From de5d8324a7526228e65729eb18f11a4f77814e63 Mon Sep 17 00:00:00 2001
From: George Price <38691495+GeorgeBPrice@users.noreply.github.com>
Date: Sat, 20 Dec 2025 11:50:07 +1000
Subject: [PATCH 1/2] Massive UI Overhual, Templates, skeletons, log table,
 mobile menu

---
 README.md                                    |   27 +-
 app/api-keys/page.tsx                        |   76 +-
 app/auth/signin/page.tsx                     |    6 +-
 app/components/footer.tsx                    |   10 +-
 app/dashboard/events/events-list.tsx         |  262 ++-
 app/dashboard/events/page.tsx                |   18 +-
 app/generator/page.tsx                       |  605 +++++--
 app/globals.css                              |  172 +-
 app/layout.tsx                               |   18 +-
 app/page.tsx                                 |   15 +-
 app/saved/page.tsx                           |   57 +-
 app/schema/new/page.tsx                      |   38 +-
 app/settings/page.tsx                        |  489 +++---
 app/templates/page.tsx                       |  137 ++
 components/generator/config-panel.tsx        |    4 +-
 components/generator/generation-progress.tsx |   88 +
 components/layout/auth-buttons.tsx           |    2 +-
 components/layout/navbar.tsx                 |  208 ++-
 components/templates/template-card.tsx       |   96 +
 components/templates/template-picker.tsx     |  136 ++
 components/ui/button.tsx                     |   12 +-
 components/ui/card.tsx                       |   20 +-
 components/ui/results-skeleton.tsx           |   21 +
 components/ui/schema-card-skeleton.tsx       |   26 +
 components/ui/skeleton.tsx                   |   22 +
 components/ui/toast.tsx                      |    9 +-
 lib/templates.ts                             | 1661 ++++++++++++++++++
 package-lock.json                            |  912 ++++++----
 package.json                                 |    9 +-
 types/template.ts                            |   32 +
 30 files changed, 4150 insertions(+), 1038 deletions(-)
 create mode 100644 app/templates/page.tsx
 create mode 100644 components/generator/generation-progress.tsx
 create mode 100644 components/templates/template-card.tsx
 create mode 100644 components/templates/template-picker.tsx
 create mode 100644 components/ui/results-skeleton.tsx
 create mode 100644 components/ui/schema-card-skeleton.tsx
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 lib/templates.ts
 create mode 100644 types/template.ts

diff --git a/README.md b/README.md
index 50fd2a2..85680d3 100644
--- a/README.md
+++ b/README.md
@@ -2,16 +2,15 @@
 
 A powerful tool for generating realistic mock data using AI LLMs.
 
-## New in v1.1.0: External API
+## New in v1.2.0: Template & UI overhaul
 
-**Programmatic Access with API Keys**
+**Enhanced UX, templates, and event analytics**
 
-- **External API Endpoint**: `POST /api/v1/generate` for programmatic data generation
-- **Secure API Key Management**: Create, manage, and revoke API keys with 90-day expiry
-- **Bearer Token Authentication**: Use API keys in Authorization header
-- **Clean Data Response**: Get clean JSON/SQL/CSV/etc, without explanatory text
-- **Rate Limiting**: 5 free generations per day (paid tiers coming soon).
-- **Multiple Formats**: JSON, SQL, CSV, XML, HTML, TXT support
+- Dedicated **Templates page** with searchable categories, SQL/NoSQL toggles, and generator injection
+- Modal template browser using gradient CTAs, skeleton loaders, and dual-schema cards that prefill the generator
+- Refreshed **Generator UI**: skeleton loaders, progress/cancel controls, CTA gradient utilities, and repositioned save/reset controls
+- **Events dashboard table** with filters plus portrait jsPDF export for auditing
+- Unified dark theme and CSS overhual, nav/footer polish, and consistent CTA styles
 
 ### Simplest Quick Start with External API
 
@@ -103,9 +102,9 @@ VERCEL_OIDC_TOKEN=token_to_connect_to_redis_service
 - Real-time record generation request tracking using Redis Streams/Upstash
 - Rate limitting of free API record generation requests using Redis
 - Export data in JSON, SQL, or CSV formats
-- **NEW**: External API with secure API key authentication
-- **NEW**: Programmatic data generation for integrations
-- **NEW**: API key management with usage tracking
+- **NEW**: Templates catalogue & modal picker with SQL/NoSQL toggle and generator injection
+- **NEW**: Generator progress/cancel controls plus CTA gradient system
+- **NEW**: Events dashboard table with filters and portrait jsPDF export
 
 ## Tech Stack
 
@@ -214,6 +213,12 @@ npm run test:critical
 
 ## Releases
 
+### v1.2.0 - UI, templates, and analytics
+- **Templates catalogue**: Dedicated templates page + modal picker with SQL/NoSQL toggle, dual-schema data, and generator injection
+- **Generator polish**: Skeletons, CTA gradient system, progress/cancellation controls, and repositioned save/reset actions
+- **Events dashboard**: Filterable table prepared for audits and portrait jsPDF export
+- **Global theming**: Unified dark CSS theme, navbar/footer polish, and CTA color tokens
+
 ### v1.1.0 - External API & API Key Management
 - **External API**: New `/api/v1/generate` endpoint for programmatic access
 - **API Key Management**: Create, manage, and revoke API keys with 90-day expiry
diff --git a/app/api-keys/page.tsx b/app/api-keys/page.tsx
index f759464..5b10f4d 100644
--- a/app/api-keys/page.tsx
+++ b/app/api-keys/page.tsx
@@ -48,6 +48,7 @@ import {
   CheckCircle,
   Clock,
 } from "lucide-react";
+import Skeleton from "@/components/ui/skeleton";
 
 interface ApiKey {
   id: string;
@@ -217,18 +218,7 @@ export default function ApiKeysPage() {
     return { status: "active", color: "default", text: `${days} days left` };
   };
 
-  if (status === "loading" || loading) {
-    return (
-      <div className="container mx-auto py-8">
-        <div className="flex items-center justify-center h-64">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-            <p className="text-muted-foreground">Loading API keys...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  const showSkeletonContent = status === "loading" || loading;
 
   if (status === "unauthenticated") {
     return (
@@ -243,18 +233,18 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="container mx-auto py-8 space-y-8">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
+    <div className="space-y-6">
+      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-2">
+          <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">Security</p>
           <h1 className="text-3xl font-bold tracking-tight">API Keys</h1>
-          <p className="text-muted-foreground">
-            Manage your API keys for external access to AI Mocker
+          <p className="text-sm text-muted-foreground max-w-3xl">
+            Control third-party access with scoped API keys, monitor their usage, and rotate them easily.
           </p>
         </div>
         <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-          <DialogTrigger asChild>
-            <Button>
+        <DialogTrigger asChild>
+          <Button className="w-full sm:w-auto" disabled={showSkeletonContent}>
               <Plus className="h-4 w-4 mr-2" />
               Create API Key
             </Button>
@@ -269,7 +259,9 @@ export default function ApiKeysPage() {
             </DialogHeader>
             <div className="space-y-4">
               <div>
-                <Label htmlFor="key-name">API Key Name</Label>
+                <Label htmlFor="key-name" className="pb-2">
+                  API Key Name
+                </Label>
                 <Input
                   id="key-name"
                   placeholder="e.g., Production App, Development Testing"
@@ -278,7 +270,7 @@ export default function ApiKeysPage() {
                   onKeyPress={(e) => e.key === "Enter" && createApiKey()}
                 />
               </div>
-              <div className="flex justify-end space-x-2">
+              <div className="flex flex-col gap-2 justify-end sm:flex-row">
                 <Button
                   variant="outline"
                   onClick={() => {
@@ -288,17 +280,14 @@ export default function ApiKeysPage() {
                 >
                   Cancel
                 </Button>
-                <Button
-                  onClick={createApiKey}
-                  disabled={creating || !newKeyName.trim()}
-                >
+                <Button onClick={createApiKey} disabled={creating || !newKeyName.trim()}>
                   {creating ? "Creating..." : "Create API Key"}
                 </Button>
               </div>
             </div>
           </DialogContent>
         </Dialog>
-      </div>
+      </header>
 
       {/* New API Key Display */}
       {showNewKey && newApiKey && (
@@ -347,8 +336,33 @@ export default function ApiKeysPage() {
         </div>
       )}
 
-      {/* Main Content */}
-      <Tabs defaultValue="keys" className="space-y-6">
+      {showSkeletonContent ? (
+        <div className="space-y-4">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <Skeleton className="h-10 w-40 rounded-full" />
+            <Skeleton className="h-10 w-40 rounded-full" />
+          </div>
+          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div
+                key={`api-key-skeleton-${index}`}
+                className="space-y-3 rounded-2xl border border-white/10 bg-card p-5 shadow-[0_25px_60px_rgba(2,6,23,0.7)]"
+              >
+                <Skeleton className="h-5 w-32 rounded-full" />
+                <Skeleton className="h-3 w-40 rounded-full" />
+                <Skeleton className="h-10 w-full rounded-2xl" />
+                <div className="flex justify-between gap-3">
+                  <Skeleton className="h-10 w-24 rounded-full" />
+                  <Skeleton className="h-10 w-24 rounded-full" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : (
+        <>
+          {/* Main Content */}
+          <Tabs defaultValue="keys" className="space-y-6">
         <TabsList>
           <TabsTrigger value="keys">API Keys</TabsTrigger>
           <TabsTrigger value="docs">Documentation</TabsTrigger>
@@ -729,7 +743,9 @@ result = generate_mock_data(
             </CardContent>
           </Card>
         </TabsContent>
-      </Tabs>
+          </Tabs>
+        </>
+      )}
     </div>
   );
 }
diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index 7afe898..114a6f7 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -54,7 +54,7 @@ export default function SignInPage() {
 
   if (status === "loading") {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-background p-4">
+      <div className="flex items-center justify-center min-h-screen p-4">
         <Card className="w-full max-w-md text-center">
           <CardHeader>
             <CardTitle>Loading...</CardTitle>
@@ -96,13 +96,13 @@ export default function SignInPage() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-background p-4">
+    <div className="flex items-center justify-center min-h-screen p-4">
       <Card className="w-full max-w-md">
         <CardHeader className="text-center">
           <CardTitle className="text-2xl font-bold">Sign In</CardTitle>
           <CardDescription>Choose a provider to sign in</CardDescription>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent className="space-y-4 pt-4">
           {loadingProviders ? (
             <div className="text-center text-muted-foreground">Loading sign-in options...</div>
           ) : providers ? (
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index 84a5c87..11798d9 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -2,10 +2,10 @@ import Link from "next/link";
 
 export function Footer() {
   return (
-    <footer className="border-t py-6 md:py-0">
-      <div className="container flex flex-col items-center gap-4 md:h-16 md:flex-row md:justify-center">
-        <p className="text-center text-sm leading-loose text-muted-foreground">
-          © {new Date().getFullYear()} AI Mocker. All rights reserved. {" "} 
+    <footer className="border-t py-6 px-6">
+      <div className="container mx-auto flex justify-center">
+        <p className="text-sm leading-loose text-muted-foreground text-center">
+          © {new Date().getFullYear()} AI Mocker. All rights reserved.{" "}
           <Link
             href="/terms"
             className="text-sm text-muted-foreground underline underline-offset-4 hover:text-primary"
@@ -16,4 +16,4 @@ export function Footer() {
       </div>
     </footer>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/dashboard/events/events-list.tsx b/app/dashboard/events/events-list.tsx
index adef50e..bd8849f 100644
--- a/app/dashboard/events/events-list.tsx
+++ b/app/dashboard/events/events-list.tsx
@@ -1,16 +1,11 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { jsPDF } from "jspdf";
 import { Button } from "@/components/ui/button";
 import { RefreshCw, Check, X, FileJson, FileText, Table } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import Skeleton from "@/components/ui/skeleton";
 
 interface GenerationEvent {
   id: string;
@@ -29,6 +24,8 @@ export function EventsList() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [cooldown, setCooldown] = useState(0);
+  const [statusFilter, setStatusFilter] = useState<"all" | "success" | "failed">("all");
+  const [formatFilter, setFormatFilter] = useState<string>("all");
 
   const COOLDOWN_SECONDS = 30;
 
@@ -70,6 +67,70 @@ export function EventsList() {
     }
   }, [startCooldown]);
 
+  const formatOptions = useMemo(() => {
+    const formats = Array.from(new Set(events.map((event) => event.format.toLowerCase())));
+    return formats;
+  }, [events]);
+
+  const filteredEvents = useMemo(() => {
+    return events.filter((event) => {
+      const statusMatch =
+        statusFilter === "all" || (statusFilter === "success" && event.success) || (statusFilter === "failed" && !event.success);
+
+      const formatMatch = formatFilter === "all" || event.format.toLowerCase() === formatFilter;
+
+      return statusMatch && formatMatch;
+    });
+  }, [events, statusFilter, formatFilter]);
+
+  const handleExportPdf = () => {
+    const doc = new jsPDF({ orientation: "portrait" });
+    doc.setFontSize(16);
+    doc.text("Generator Requests Log", 14, 16);
+    doc.setFontSize(10);
+    doc.text(`Filters: status=${statusFilter}, format=${formatFilter}`, 14, 24);
+
+    const headers = ["Schema", "Records", "Format", "Schema ID", "Status", "Timestamp"];
+    const rows = filteredEvents.map((event) => [
+      event.schemaName || "Generation",
+      event.recordsCount.toString(),
+      event.format?.toUpperCase() || "N/A",
+      event.schemaId ? `${event.schemaId.substring(0, 8)}...` : "—",
+      event.success ? "Success" : "Failed",
+      formatDate(event.timestamp),
+    ]);
+
+    const headerY = 32;
+    const rowHeight = 8;
+    let cursorY = headerY + rowHeight;
+
+    doc.setFontSize(9);
+    const columnWidth = 33;
+    const drawHeader = () => {
+      headers.forEach((header, index) => {
+        doc.text(header, 14 + index * columnWidth, headerY);
+      });
+      cursorY = headerY + rowHeight;
+    };
+
+    drawHeader();
+
+    cursorY += rowHeight;
+
+    rows.forEach((row) => {
+      row.forEach((cell, index) => {
+        doc.text(cell, 14 + index * 40, cursorY);
+      });
+      cursorY += rowHeight;
+      if (cursorY > 180) {
+        doc.addPage();
+        drawHeader();
+      }
+    });
+
+    doc.save("generator-events.pdf");
+  };
+
   // Fetch events on component mount
   useEffect(() => {
     fetchEvents();
@@ -105,17 +166,46 @@ export function EventsList() {
 
   return (
     <>
-      <div className="flex justify-end mb-4">
-        <Button
-          onClick={fetchEvents}
-          disabled={loading || cooldown > 0}
-          variant="outline"
-        >
-          <RefreshCw
-            className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`}
-          />
-          {getRefreshButtonText()}
-        </Button>
+      <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between mb-4">
+        <div className="flex flex-wrap gap-3">
+          <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as "all" | "success" | "failed")}>
+            <SelectTrigger className="w-[160px]">
+              <SelectValue placeholder="Filter by status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All status</SelectItem>
+              <SelectItem value="success">Success</SelectItem>
+              <SelectItem value="failed">Failed</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={formatFilter} onValueChange={(value) => setFormatFilter(value)}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Filter by format" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All formats</SelectItem>
+              {formatOptions.map((format) => (
+                <SelectItem key={format} value={format}>
+                  {format.toUpperCase()}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex flex-wrap gap-3">
+          <Button
+            onClick={fetchEvents}
+            disabled={loading || cooldown > 0}
+            variant="outline"
+            className="flex items-center"
+          >
+            <RefreshCw className={`mr-2 h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            {getRefreshButtonText()}
+          </Button>
+          <Button onClick={handleExportPdf} variant="outline" className="flex items-center">
+            Export as PDF
+          </Button>
+        </div>
       </div>
 
       {error && (
@@ -124,67 +214,91 @@ export function EventsList() {
         </div>
       )}
 
-      {loading && events.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-muted-foreground">Loading events...</p>
+      {loading ? (
+        <div className="space-y-4 animate-pulse" aria-live="polite">
+          <div className="overflow-hidden rounded-2xl border border-white/10 bg-card px-4 py-3">
+            <div className="flex flex-wrap items-center justify-between gap-4">
+              <Skeleton className="h-3 w-32" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+          </div>
+
+          <div className="overflow-hidden rounded-2xl border border-white/10 shadow-lg">
+            <div className="overflow-auto">
+              <div className="space-y-4 p-4">
+                {Array.from({ length: 4 }).map((_, index) => (
+                  <div
+                    key={`events-skeleton-row-${index}`}
+                    className="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-white/5 bg-slate-950/60 px-4 py-3"
+                  >
+                    <div className="space-y-2">
+                      <Skeleton className="h-4 w-40 rounded-full" />
+                      <Skeleton className="h-3 w-24 rounded-full" />
+                    </div>
+                    <div className="space-y-2">
+                      <Skeleton className="h-3 w-28 rounded-full" />
+                      <Skeleton className="h-3 w-20 rounded-full" />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
         </div>
       ) : events.length === 0 ? (
         <div className="text-center py-12">
           <p className="text-muted-foreground">No events found</p>
         </div>
       ) : (
-        <div className="grid gap-4">
-          {events.map((event) => (
-            <Card
-              key={event.id}
-              className={event.success ? "" : "border-destructive/30"}
-            >
-              <CardHeader className="pb-2">
-                <div className="flex justify-between items-center">
-                  <CardTitle className="text-base">
-                    {event.schemaName || "Generation"}
-                  </CardTitle>
-                  <Badge variant={event.success ? "default" : "destructive"}>
-                    {event.success ? (
-                      <Check className="mr-1 h-3 w-3" />
-                    ) : (
-                      <X className="mr-1 h-3 w-3" />
-                    )}
-                    {event.success ? "Success" : "Failed"}
-                  </Badge>
-                </div>
-                <CardDescription>{formatDate(event.timestamp)}</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm">
-                  <div>
-                    <span className="text-muted-foreground">Records:</span>{" "}
-                    {event.recordsCount}
-                  </div>
-                  <div className="flex items-center">
-                    <span className="text-muted-foreground mr-1">Format:</span>{" "}
-                    <div className="flex items-center">
+        <div className="overflow-hidden rounded-2xl border border-white/10 shadow-lg">
+          <div className="overflow-auto">
+            <table className="min-w-full text-sm">
+              <thead className="bg-slate-900/60 text-xs uppercase tracking-wide text-white/70">
+                <tr>
+                  <th className="px-4 py-3 text-left">Schema</th>
+                  <th className="px-4 py-3 text-left">Records</th>
+                  <th className="px-4 py-3 text-left">Format</th>
+                  <th className="px-4 py-3 text-left">Schema ID</th>
+                  <th className="px-4 py-3 text-left">Status</th>
+                  <th className="px-4 py-3 text-left">Timestamp</th>
+                </tr>
+              </thead>
+              <tbody className="bg-slate-950/60">
+                {filteredEvents.map((event) => (
+                  <tr
+                    key={event.id}
+                    className="border-t border-white/5 hover:bg-white/5 transition"
+                  >
+                    <td className="px-4 py-3">{event.schemaName || "Generation"}</td>
+                    <td className="px-4 py-3">{event.recordsCount}</td>
+                    <td className="px-4 py-3 flex items-center">
                       {getFormatIcon(event.format)}
-                      {event.format ? event.format.toUpperCase() : "N/A"}
-                    </div>
-                  </div>
-                  {event.schemaId && (
-                    <div>
-                      <span className="text-muted-foreground">Schema ID:</span>{" "}
-                      <span className="font-mono text-xs">
-                        {event.schemaId.substring(0, 10)}...
-                      </span>
-                    </div>
-                  )}
-                </div>
-                {event.errorMessage && (
-                  <div className="mt-2 p-2 bg-destructive/10 rounded text-sm text-destructive">
-                    {event.errorMessage}
-                  </div>
-                )}
-              </CardContent>
-            </Card>
-          ))}
+                      {event.format?.toUpperCase() || "N/A"}
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs">
+                      {event.schemaId ? `${event.schemaId.substring(0, 8)}...` : "—"}
+                    </td>
+                    <td className="px-4 py-3">
+                      <div className="inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-semibold">
+                        {event.success ? (
+                          <>
+                            <Check className="h-3 w-3 text-emerald-400" />
+                            <span className="text-emerald-300">Success</span>
+                          </>
+                        ) : (
+                          <>
+                            <X className="h-3 w-3 text-destructive" />
+                            <span className="text-destructive">Failed</span>
+                          </>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs">{formatDate(event.timestamp)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
     </>
diff --git a/app/dashboard/events/page.tsx b/app/dashboard/events/page.tsx
index b842eaf..a3ffb2a 100644
--- a/app/dashboard/events/page.tsx
+++ b/app/dashboard/events/page.tsx
@@ -12,16 +12,18 @@ export default async function EventsDashboard() {
   }
   
   return (
-    <div className="container mx-auto py-6">
+    <div className="container mx-auto">
       <div className="flex justify-between items-center mb-6">
-        <div>
-          <h1 className="text-2xl font-bold">Generator Requests Log</h1>
-          <p className="text-muted-foreground">
-            A log of your mock-record-generation requests
-          </p>
-        </div>
+        <section className="space-y-2">
+          <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">Log</p>
+          <div className="space-y-1">
+            <h1 className="text-3xl font-bold leading-tight">Generator Requests Log</h1>
+            <p className="text-sm text-muted-foreground max-w-3xl">
+              A log of your mock-record-generation requests
+            </p>
+          </div>
+        </section>
       </div>
-
       <EventsList />
     </div>
   );
diff --git a/app/generator/page.tsx b/app/generator/page.tsx
index 47ab13a..a59d885 100644
--- a/app/generator/page.tsx
+++ b/app/generator/page.tsx
@@ -16,17 +16,110 @@ import { Textarea } from "@/components/ui/textarea";
 import SchemaEditor from "@/components/generator/schema-editor";
 import { ConfigPanel } from "@/components/generator/config-panel";
 import ResultsViewer from "@/components/results/results-viewer";
+import ResultsSkeleton from "@/components/ui/results-skeleton";
+import Skeleton from "@/components/ui/skeleton";
 import { toast } from "@/components/ui/use-toast";
 import { SaveSchemaDialog } from "@/components/generator/save-schema-dialog";
 import { useSearchParams, useRouter } from "next/navigation";
-import { FileText, Code, Loader2, Zap, Save } from "lucide-react";
+import Link from "next/link";
+import {
+  FileText,
+  Code,
+  Loader2,
+  Zap,
+  Save,
+  Download,
+  RotateCcw,
+} from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { UserAiSettings } from "@/lib/storage";
 import { DailyLimitInfo } from "@/components/ui/DailyLimitInfo";
+import GenerationProgress, { type StepId } from "@/components/generator/generation-progress";
+import TemplatePicker from "@/components/templates/template-picker";
+import { TemplateSelection } from "@/types/template";
+
+function GeneratorLoadingSkeleton() {
+  return (
+    <div className="flex flex-col gap-6 p-4 w-full animate-pulse" aria-live="polite">
+      <div className="flex flex-col gap-4 w-full">
+        <Card className="flex-1 min-w-0">
+          <CardHeader className="space-y-3 px-6 pt-6">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="space-y-4 px-6 pb-6">
+            {Array.from({ length: 5 }).map((_, index) => (
+              <Skeleton
+                key={`config-skeleton-${index}`}
+                className="h-10 w-full rounded-2xl"
+              />
+            ))}
+          </CardContent>
+          <CardFooter className="px-6 pb-6 pt-0">
+            <Skeleton className="h-10 w-40 rounded-full" />
+          </CardFooter>
+        </Card>
+        <Card className="flex-1 min-w-0">
+          <CardHeader className="space-y-3 px-6 pt-6">
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="px-6 pb-6">
+            <Skeleton className="h-[360px] w-full rounded-[1.5rem]" />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="w-full">
+        <Card className="w-full">
+          <CardHeader className="space-y-2 px-6 pt-6">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-4 w-48" />
+          </CardHeader>
+          <CardContent className="px-6 pb-6">
+            <Skeleton className="h-[360px] w-full rounded-[1.5rem]" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
 
 function GeneratorPageContent() {
   const { data: session, status } = useSession();
   const searchParams = useSearchParams();
   const router = useRouter();
+  const loadSavedAction = session?.user ? (
+    <Button variant="outline" size="sm" asChild className="flex items-center gap-2">
+      <Link href="/saved" className="flex items-center gap-2">
+        <Download className="h-4 w-4" />
+        Load Saved
+      </Link>
+    </Button>
+  ) : (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled
+              className="flex items-center gap-2 cursor-not-allowed"
+            >
+              <Download className="h-4 w-4" />
+              Load Saved
+            </Button>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Sign in to access</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
   const schemaId = searchParams?.get("schema");
   const resultsRef = useRef<HTMLDivElement>(null);
 
@@ -42,6 +135,48 @@ function GeneratorPageContent() {
   const [results, setResults] = useState("");
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<"schema" | "examples">("schema");
+  const [progressStep, setProgressStep] = useState<StepId>("parsing");
+  const [progressPercent, setProgressPercent] = useState(0);
+  const [progressMessage, setProgressMessage] = useState("");
+  const [generationController, setGenerationController] = useState<AbortController | null>(null);
+
+  const handleTemplateSelected = (selection: TemplateSelection) => {
+    const { template, schema: selectedSchema, schemaType: selectedType } = selection
+    setSchema(selectedSchema)
+    setSchemaType(selectedType)
+    setSchemaName(template.name)
+    setExamples(template.examples ?? "")
+    setActiveTab("schema")
+    toast({
+      title: "Schema Loaded",
+      description: `Loaded "${template.name}" (${selectedType.toUpperCase()}) schema - ready to generate mock data.`,
+      variant: "success",
+    })
+  }
+
+  const handleResetSchemaDefinition = () => {
+    setSchema("")
+    setSchemaType("sql")
+    setExamples("")
+    setResults("")
+    setActiveTab("schema")
+    setSchemaName(null)
+    setLoadedInstructions(null)
+    setTempInstructions("")
+    setFormat("json")
+    setRecordCount(10)
+    setProgressStep("parsing")
+    setProgressPercent(0)
+    setProgressMessage("")
+    setIsGenerating(false)
+    setGenerationController(null)
+    router.replace("/generator")
+    toast({
+      title: "Schema Reset",
+      description: "Configuration cleared. Start fresh with a new schema.",
+      variant: "default",
+    })
+  }
 
   // swap active tab with schema data type (in step 1 and step 2)
   useEffect(() => {
@@ -194,6 +329,30 @@ function GeneratorPageContent() {
     loadSavedSchema();
   }, [schemaId, searchParams]);
 
+  useEffect(() => {
+    const templateSchemaParam = searchParams?.get("templateSchema");
+    const templateTypeParam = searchParams?.get("templateType") as
+      | "sql"
+      | "nosql"
+      | null;
+    const templateNameParam = searchParams?.get("templateName");
+
+    if (templateSchemaParam && templateTypeParam) {
+      const decodedSchema = decodeURIComponent(templateSchemaParam);
+      setSchema(decodedSchema);
+      setSchemaType(templateTypeParam);
+      setSchemaName(templateNameParam || "Template");
+      setActiveTab("schema");
+      toast({
+        title: "Schema Loaded",
+        description: `Loaded "${
+          templateNameParam || "Template"
+        }" (${templateTypeParam.toUpperCase()}) schema - ready to generate mock data.`,
+        variant: "success",
+      });
+    }
+  }, [searchParams]);
+
   // Load user settings when authenticated
   useEffect(() => {
     const fetchUserSettings = async () => {
@@ -224,10 +383,33 @@ function GeneratorPageContent() {
     fetchUserSettings();
   }, [status, session?.user?.id]);
 
+  useEffect(() => {
+    if (!isGenerating) {
+      setProgressPercent(0);
+      return;
+    }
+
+    const interval = window.setInterval(() => {
+      setProgressPercent((prev) => {
+        if (prev >= 95) return prev;
+        return Math.min(prev + 4, 95);
+      });
+    }, 1400);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [isGenerating]);
+
   const handleGenerate = async () => {
     try {
+      const controller = new AbortController();
+      setGenerationController(controller);
       setIsGenerating(true);
       setResults("");
+      setProgressStep("parsing");
+      setProgressPercent(8);
+      setProgressMessage("Validating schema and configuration...");
 
       // Determine if we're using samples based on schema type
       const usingSamples = schemaType === "sample";
@@ -368,12 +550,18 @@ function GeneratorPageContent() {
         }
       }
 
+      setProgressStep("generating");
+      setProgressPercent(45);
+      setProgressMessage("Sending request to the AI service...");
+
       // Make the API call
       try {
+        setProgressMessage("Generating mock records...");
         const response = await fetch("/api/generate", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(requestBody),
+          signal: controller.signal,
         });
 
         if (!response.ok) {
@@ -410,6 +598,10 @@ function GeneratorPageContent() {
         const data = await response.json();
         setResults(data.result);
 
+        setProgressStep("formatting");
+        setProgressPercent(90);
+        setProgressMessage("Formatting the output...");
+
         // Always refresh the usage counter after generation
         if (dailyLimitRef.current) {
           await dailyLimitRef.current.refreshUsage();
@@ -435,12 +627,25 @@ function GeneratorPageContent() {
             resultsRef.current.scrollIntoView({ behavior: "smooth" });
           }
         }, 100);
+        setProgressPercent(100);
+        setProgressMessage("Results are ready");
       } catch (apiError) {
         console.error("API error:", apiError);
         throw apiError;
       }
     } catch (error) {
       console.error("Generation error:", error);
+      if (error instanceof DOMException && error.name === "AbortError") {
+        toast({
+          title: "Generation Cancelled",
+          description: "You cancelled the mock generation.",
+          variant: "default",
+        });
+        setProgressMessage("Generation cancelled");
+        setProgressStep("parsing");
+        return;
+      }
+
       if (!(error instanceof Error && error.message.includes("Error "))) {
         toast({
           title: "Generation Failed",
@@ -460,9 +665,19 @@ function GeneratorPageContent() {
       }
     } finally {
       setIsGenerating(false);
+      setGenerationController(null);
     }
   };
 
+  const handleCancelGeneration = () => {
+    if (!generationController) {
+      return;
+    }
+
+    setProgressMessage("Cancelling...");
+    generationController.abort();
+  };
+
   const handleSave = async (
     name: string,
     description?: string,
@@ -554,200 +769,234 @@ function GeneratorPageContent() {
     }
   };
 
-  // show loading indicator
-  if (isLoading && schemaId) {
-    return (
-      <div className="flex items-center justify-center h-screen">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-        <p className="ml-2 text-lg">Loading schema...</p>
-      </div>
-    );
-  }
+  const showSkeletonContent = status === "loading" || isLoading;
 
   return (
-    <div className="flex flex-col gap-6 p-4 w-full">
-      <div className="flex flex-col md:flex-row gap-4 h-full">
-        {/* Configuration panel */}
-        <div className="flex-1 flex">
-          <ConfigPanel
-            stepNumber={1}
-            title="Configure Record Generation"
-            schemaType={schemaType}
-            setSchemaType={handleSchemaTypeChange}
-            recordsCount={recordCount}
-            setRecordsCount={setRecordCount}
-            outputFormat={format}
-            setOutputFormat={setFormat}
-            tempModel={tempModel}
-            setTempModel={setTempModel}
-            tempApiKey={tempApiKey}
-            setTempApiKey={setTempApiKey}
-            tempBaseUrl={tempBaseUrl}
-            setTempBaseUrl={setTempBaseUrl}
-            tempTemperature={tempTemperature}
-            setTempTemperature={setTempTemperature}
-            tempMaxTokens={tempMaxTokens}
-            setTempMaxTokens={setTempMaxTokens}
-            tempHeaders={tempHeaders}
-            setTempHeaders={setTempHeaders}
-            useUserSettings={useUserSettings}
-            setUseUserSettings={setUseUserSettings}
-            isGenerating={isGenerating}
-            isSignedIn={status === "authenticated"}
-            loadedInstructions={loadedInstructions}
-            tempInstructions={tempInstructions}
-            setTempInstructions={setTempInstructions}
-            userSettings={userSettings}
-          />
+    <div className="flex flex-col gap-5 w-full">
+      <section className="space-y-2">
+        <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">Generator</p>
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold leading-tight">Generate Mock Records</h1>
+          <p className="text-sm text-muted-foreground max-w-3xl">
+            Craft SQL/NoSQL schemas or example records, run the generator, and get export-ready mock data.
+          </p>
         </div>
+      </section>
 
-        {/* Schema/Data Sample Tabs */}
-        <div className="flex-1 flex">
-          <Card className="flex flex-col h-full w-full">
-            <CardHeader className="relative">
-              <div
-                className="absolute top-0 right-0 bg-primary/10 text-primary px-2 py-2 rounded-tr-xl text-xs font-medium"
-                style={{ top: "-24px" }}
-              >
-                Step 2
-              </div>
-              {schemaId && schemaName && (
-                <div className="flex items-center p-2 bg-green-50 dark:bg-green-900/20 rounded-md w-fit">
-                  <div className="text-green-700 dark:text-green-300 text-sm font-medium">
-                    Loaded schema: {schemaName}
-                  </div>
+      {showSkeletonContent ? (
+        <GeneratorLoadingSkeleton />
+      ) : (
+        <div className="flex flex-col gap-5 md:flex-row h-full">
+          {/* Configuration panel */}
+          <div className="flex-1 flex">
+            <ConfigPanel
+              stepNumber={1}
+              title="Configure Record Generation"
+              schemaType={schemaType}
+              setSchemaType={handleSchemaTypeChange}
+              recordsCount={recordCount}
+              setRecordsCount={setRecordCount}
+              outputFormat={format}
+              setOutputFormat={setFormat}
+              tempModel={tempModel}
+              setTempModel={setTempModel}
+              tempApiKey={tempApiKey}
+              setTempApiKey={setTempApiKey}
+              tempBaseUrl={tempBaseUrl}
+              setTempBaseUrl={setTempBaseUrl}
+              tempTemperature={tempTemperature}
+              setTempTemperature={setTempTemperature}
+              tempMaxTokens={tempMaxTokens}
+              setTempMaxTokens={setTempMaxTokens}
+              tempHeaders={tempHeaders}
+              setTempHeaders={setTempHeaders}
+              useUserSettings={useUserSettings}
+              setUseUserSettings={setUseUserSettings}
+              isGenerating={isGenerating}
+              isSignedIn={status === "authenticated"}
+              loadedInstructions={loadedInstructions}
+              tempInstructions={tempInstructions}
+              setTempInstructions={setTempInstructions}
+              userSettings={userSettings}
+            />
+          </div>
+
+          {/* Schema/Data Sample Tabs */}
+          <div className="flex-1 flex">
+            <Card className="flex flex-col h-full w-full">
+              <CardHeader className="relative space-y-3 px-4 pt-6 sm:px-6">
+                <div
+                  className="absolute top-0 right-0 bg-primary/10 text-primary px-2 py-2 rounded-tr-xl text-xs font-medium"
+                  style={{ top: "-24px", right: "-24px" }}
+                >
+                  Step 2
                 </div>
-              )}
-              <Tabs
-                value={activeTab}
-                onValueChange={handleTabChange}
-                className="w-full mt-3"
-              >
-                <TabsList className="grid w-full grid-cols-2">
-                  <TabsTrigger value="schema">
-                    <FileText className="mr-1 h-4 w-4" />
-                    Use Database Schema
-                  </TabsTrigger>
-                  <TabsTrigger value="examples">
-                    <Code className="mr-1 h-4 w-4" />
-                    Use Sample Records
-                  </TabsTrigger>
-                </TabsList>
-                <TabsContent value="schema" className="mt-2">
-                  <CardTitle className="text-lg font-semibold mb-1">
-                    Database Schema Definition
-                  </CardTitle>
-                  <CardDescription className="text-sm mb-2">
-                    Define your{" "}
-                    {schemaType === "sql"
-                      ? "SQL table(s)"
-                      : schemaType === "nosql"
-                      ? "NoSQL collection structure"
-                      : schemaType === "sample"
-                      ? "schema (unused with Sample Data)"
-                      : "database schema"}
-                    .
-                  </CardDescription>
-                </TabsContent>
-                <TabsContent value="examples" className="mt-2">
-                  <CardTitle className="text-lg font-semibold mb-1">
-                    Sample Data Records
-                  </CardTitle>
-                  <CardDescription className="text-sm mb-2">
-                    Paste in example records for the AI, in any format. Several
-                    records produce better results.
-                  </CardDescription>
-                </TabsContent>
-              </Tabs>
-            </CardHeader>
-            <CardContent className="flex-grow flex flex-col p-0">
-              {activeTab === "schema" ? (
-                <div className="p-6 pb-0 h-[300px]">
-                  <SchemaEditor
-                    value={schema}
-                    onChange={setSchema}
-                    type={schemaType}
-                    disabled={isGenerating}
+                {schemaName && (
+                  <div className="flex items-center p-2 bg-green-50 dark:bg-green-900/20 rounded-md w-fit">
+                    <div className="text-green-700 dark:text-green-300 text-sm font-medium">
+                      Loaded schema: {schemaName}
+                    </div>
+                  </div>
+                )}
+                <Tabs
+                  value={activeTab}
+                  onValueChange={handleTabChange}
+                  className="w-full mt-3"
+                >
+                  <TabsList className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2 mb-8">
+                    <TabsTrigger value="schema">
+                      <FileText className="mr-1 h-4 w-4" />
+                      Use Database Schema
+                    </TabsTrigger>
+                    <TabsTrigger value="examples">
+                      <Code className="mr-1 h-4 w-4" />
+                      Use Sample Records
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="schema" >
+                    <CardTitle className="text-lg font-semibold mb-1">
+                      Database Schema Definition
+                    </CardTitle>
+                    <CardDescription className="text-sm mb-2">
+                      Define your{" "}
+                      {schemaType === "sql"
+                        ? "SQL table(s)"
+                        : schemaType === "nosql"
+                        ? "NoSQL collection structure"
+                        : schemaType === "sample"
+                        ? "schema (unused with Sample Data)"
+                        : "database schema"}
+                      .
+                    </CardDescription>
+                  </TabsContent>
+                  <TabsContent value="examples" >
+                    <CardTitle className="text-lg font-semibold mb-1">
+                      Sample Data Records
+                    </CardTitle>
+                    <CardDescription className="text-sm mb-2">
+                      Paste in example records for the AI, in any format. Several
+                      records produce better results.
+                    </CardDescription>
+                  </TabsContent>
+                </Tabs>
+                <div className="mt-4 flex flex-wrap justify-end gap-3">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-9 w-9 rounded-full p-2"
+                    onClick={handleResetSchemaDefinition}
+                    aria-label="Reset schema definition"
+                  >
+                    <RotateCcw className="h-4 w-4" />
+                  </Button>
+                  {loadSavedAction}
+                  <TemplatePicker
+                    triggerLabel="Browse Templates"
+                    onSelect={handleTemplateSelected}
                   />
                 </div>
-              ) : (
-                <div className="p-3 h-full flex">
-                  <Textarea
-                    value={examples}
-                    onChange={(e) => setExamples(e.target.value)}
-                    placeholder={`# JSON example: {"id": 1, "name": "Jane Smith", "email": "jane.smith@example.com", "role": "user"}
+              </CardHeader>
+              <CardContent className="flex-grow flex flex-col p-0">
+                {activeTab === "schema" ? (
+                  <div className="p-4 pb-0 h-[300px] sm:p-5">
+                    <SchemaEditor
+                      value={schema}
+                      onChange={setSchema}
+                      type={schemaType}
+                      disabled={isGenerating}
+                    />
+                  </div>
+                ) : (
+                  <div className="p-3 h-full flex">
+                    <Textarea
+                      value={examples}
+                      onChange={(e) => setExamples(e.target.value)}
+                      placeholder={`# JSON example: {"id": 1, "name": "Jane Smith", "email": "jane.smith@example.com", "role": "user"}
 # CSV example: 1, John Doe,john.doe@example.com,admin
 # Tab example: 1\tJohn Doe\tjohn.doe@example.com\tadmin
 # Literal example: id, name, email, role`}
-                    className="h-full flex-grow font-mono text-sm resize-none border border-input rounded-md p-3"
-                    disabled={isGenerating}
+                      className="h-full flex-grow font-mono text-sm resize-none border border-input rounded-md p-3"
+                      disabled={isGenerating}
+                    />
+                  </div>
+                )}
+              </CardContent>
+              <CardFooter className="text-sm text-muted-foreground border-t pt-4 mt-4">
+                <div className="space-y-3 w-full">
+                  <p>
+                    By using this service, you agree to our{" "}
+                    <a href="/terms" className="text-primary hover:underline">
+                      Terms of Use
+                    </a>
+                    . You are responsible for all content generated and any API
+                    charges incurred when using this service with your own API
+                    key.
+                  </p>
+                  <DailyLimitInfo
+                    hasOwnApiKey={useUserSettings && !!userSettings?.apiKey}
+                    ref={dailyLimitRef}
                   />
                 </div>
-              )}
-            </CardContent>
-            <CardFooter className="text-sm text-muted-foreground border-t pt-4 mt-4">
-              <div className="space-y-3 w-full">
-                <p>
-                  By using this service, you agree to our{" "}
-                  <a href="/terms" className="text-primary hover:underline">
-                    Terms of Use
-                  </a>
-                  . You are responsible for all content generated and any API
-                  charges incurred when using this service with your own API
-                  key.
-                </p>
-                <DailyLimitInfo
-                  hasOwnApiKey={useUserSettings && !!userSettings?.apiKey}
-                  ref={dailyLimitRef}
-                />
-              </div>
-            </CardFooter>
-            <div className="p-6 pt-0 pb-1 flex items-center justify-start gap-2">
-              <Button
-                onClick={handleGenerate}
-                disabled={isGenerating}
-                size="default"
-                className="flex-grow"
-              >
-                {isGenerating ? (
-                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                ) : (
-                  <Zap className="mr-2 h-5 w-5" />
-                )}
-                {isGenerating ? "Generating..." : "Generate Mock Records"}
-              </Button>
-
-              {session && (
+              </CardFooter>
+              <div className="p-4 pt-4 pb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:p-6">
                 <Button
-                  variant="outline"
+                  onClick={handleGenerate}
+                  disabled={isGenerating}
                   size="default"
-                  onClick={() => setSaveDialogOpen(true)}
-                  disabled={
-                    isGenerating ||
-                    (schemaType !== "sample" && !schema.trim()) ||
-                    (schemaType === "sample" && !examples.trim())
-                  }
+                  className="w-full sm:flex-grow"
                 >
-                  <Save className="mr-2 h-5 w-5" />
-                  {schemaId
-                    ? "Save Changes"
-                    : schemaType === "sample"
-                    ? "Save Examples"
-                    : "New Schema"}
+                  {isGenerating ? (
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                  ) : (
+                    <Zap className="mr-2 h-5 w-5" />
+                  )}
+                  {isGenerating ? "Generating..." : "Generate Mock Records"}
                 </Button>
-              )}
-            </div>
-          </Card>
+
+                {session && (
+                  <Button
+                    variant="outline"
+                    size="default"
+                    onClick={() => setSaveDialogOpen(true)}
+                    disabled={
+                      isGenerating ||
+                      (schemaType !== "sample" && !schema.trim()) ||
+                      (schemaType === "sample" && !examples.trim())
+                    }
+                  >
+                    <Save className="mr-2 h-5 w-5" />
+                    {schemaName
+                      ? "Save Changes"
+                      : schemaType === "sample"
+                      ? "Save Examples"
+                      : "Save New Schema"
+                    }
+                  </Button>
+                )}
+              </div>
+            </Card>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Results Section */}
+      {isGenerating && (
+        <div className="w-full">
+          <GenerationProgress
+            currentStep={progressStep}
+            progress={progressPercent}
+            description={progressMessage}
+            onCancel={handleCancelGeneration}
+            isCancelable={!!generationController}
+          />
+        </div>
+      )}
       <div className="w-full" ref={resultsRef}>
         <Card className="w-full">
           <CardHeader className="relative">
             <div
               className="absolute top-0 right-0 bg-primary/10 text-primary px-2 py-2 rounded-tr-xl text-xs font-medium"
-              style={{ top: "-24px" }}
+              style={{ top: "-24px", right: "-24px" }}
             >
               Results
             </div>
@@ -761,11 +1010,15 @@ function GeneratorPageContent() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResultsViewer
-              results={results}
-              format={format}
-              isLoading={isGenerating}
-            />
+            {isGenerating && !results ? (
+              <ResultsSkeleton />
+            ) : (
+              <ResultsViewer
+                results={results}
+                format={format}
+                isLoading={isGenerating}
+              />
+            )}
           </CardContent>
         </Card>
       </div>
diff --git a/app/globals.css b/app/globals.css
index 9711daf..7b45fa2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -45,40 +45,6 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
-}
-
-.dark {
   --background: oklch(0.129 0.042 264.695);
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.208 0.042 265.755);
@@ -110,6 +76,19 @@
   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.551 0.027 264.364);
+  --card-gradient-start: rgba(59, 130, 246, 0.35);
+  --card-gradient-middle: hsla(308, 92%, 70%, 0.25);
+  --card-gradient-end: rgba(14, 165, 233, 0);
+  --schema-accent-sql: #fb923c;
+  --schema-accent-nosql: #38bdf8;
+  --schema-accent-sample: #c084fc;
+  --status-success: #22c55e;
+  --status-warning: #facc15;
+  --status-error: #f43f5e;
+  --status-info: #38bdf8;
+  --cta-gradient: linear-gradient(0deg, rgba(97,115,250,1) 0%, rgba(60,87,252,1) 100%);
+  --cta-gradient-hover: linear-gradient(0deg, rgb(71, 58, 249) 0%, rgb(55, 18, 237) 100%);
+  --cta-text: #ffffff;
 }
 
 @layer base {
@@ -117,6 +96,129 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-slate-950 text-foreground font-sans leading-relaxed antialiased;
+    background-image:
+      radial-gradient(circle at top, rgba(59, 130, 246, 0.25), transparent 35%),
+      radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.2), transparent 40%),
+      linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95));
+    min-height: 100vh;
+    color: var(--foreground);
+  }
+}
+
+@layer components {
+  .page-card {
+    @apply rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/80 via-slate-900/60 to-slate-900/40 p-5 shadow-[0_40px_80px_rgba(15,23,42,0.4)] backdrop-blur-xl;
+  }
+
+  .hero-highlight {
+    @apply text-lg font-semibold text-white/80;
+  }
+
+  .template-dialog {
+    @apply h-[80vh] max-h-[80vh] w-[min(80vw,1200px)] max-w-[1200px] sm:max-w-none;
+  }
+
+  @media (max-width: 640px) {
+    .template-dialog {
+      width: 95vw;
+      max-width: 95vw;
+      height: 85vh;
+      max-height: 85vh;
+      padding: 1rem;
+    }
+  }
+
+  .template-card-shell {
+    @apply bg-white/5;
+  }
+
+  .template-schema-preview {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+  }
+
+  .template-schema-preview::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .template-schema-preview::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.65);
+    border-radius: 999px;
+  }
+
+  .template-schema-preview::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .template-use-button {
+    @apply bg-gradient-to-r from-sky-500 to-blue-500 text-white shadow-[0_20px_45px_rgba(15,23,42,0.35)] hover:shadow-[0_25px_55px_rgba(15,23,42,0.45)];
+  }
+
+  .status-pill {
+    @apply inline-flex h-3 w-3 shrink-0 rounded-full shadow-inner;
+  }
+
+  .status-pill-success {
+    background-color: var(--status-success);
+  }
+
+  .status-pill-warning {
+    background-color: var(--status-warning);
+  }
+
+  .status-pill-error {
+    background-color: var(--status-error);
+  }
+
+  .status-pill-info {
+    background-color: var(--status-info);
+  }
+
+  .cta-button {
+    background-image: var(--cta-gradient);
+    color: var(--cta-text);
+    border: none;
+    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.45);
+    transition: transform 0.2s ease, background-image 0.3s ease, box-shadow 0.2s ease;
+  }
+
+  .cta-button:hover:not(:disabled) {
+    background-image: var(--cta-gradient-hover);
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.5);
+  }
+
+  .cta-button:focus-visible {
+    outline: 2px solid rgba(255,255,255,0.5);
+    outline-offset: 2px;
+  }
+
+  .nav-cta-button {
+    @apply border border-transparent bg-transparent text-white transition-all duration-200;
+  }
+
+  .nav-cta-button:hover:not(:disabled) {
+    background-image: var(--cta-gradient);
+    color: var(--cta-text);
+    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.45);
+    transform: translateY(-2px) scale(1.01);
+  }
+}
+
+@layer utilities {
+  .schema-badge-sql {
+    background-color: var(--schema-accent-sql);
+    color: #fff;
+  }
+
+  .schema-badge-nosql {
+    background-color: var(--schema-accent-nosql);
+    color: #fff;
+  }
+
+  .schema-badge-sample {
+    background-color: var(--schema-accent-sample);
+    color: #fff;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 1ba3363..9067312 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -25,16 +25,18 @@ export default async function RootLayout({
 
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={`${inter.className}`}>
         <SessionProvider>
-            <div className="min-h-screen flex flex-col">
-              <Navbar />
-              <main className="flex-1 container mx-auto py-4 px-4 md:px-6">
+          <div className="min-h-screen flex flex-col">
+            <Navbar />
+            <main className="flex-1 px-4 pb-6 pt-6 sm:px-6 lg:px-8">
+              <div className="mx-auto flex w-full max-w-6xl flex-col gap-6">
                 {children}
-              </main>
-              <Footer />
-            </div>
-            <Toaster />
+              </div>
+            </main>
+            <Footer />
+          </div>
+          <Toaster />
         </SessionProvider>
         <Analytics />
       </body>
diff --git a/app/page.tsx b/app/page.tsx
index f28a0ec..c28ff4d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Database, Github, Code, ArrowRight } from "lucide-react";
+import { Database, Github, ArrowRight, GitBranch, Bot } from "lucide-react";
 
 export default function Home() {
   return (
@@ -42,7 +42,7 @@ export default function Home() {
           </p>
         </div>
         <div className="flex flex-col items-center text-center p-6 border rounded-lg">
-          <Code className="h-10 w-10 mb-4" />
+          <Bot className="h-10 w-10 mb-4" />
           <h3 className="text-xl font-semibold mb-2">AI-Powered</h3>
           <p className="text-muted-foreground">
             Realistic contextual data generated with AI for meaningful test
@@ -50,17 +50,10 @@ export default function Home() {
           </p>
         </div>
         <div className="flex flex-col items-center text-center p-6 border rounded-lg">
-          <svg
-            className="h-10 w-10 mb-4"
-            fill="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
-          </svg>
+          <GitBranch className="h-10 w-10 mb-4" />
           <h3 className="text-xl font-semibold mb-2">Free & Open Source</h3>
           <p className="text-muted-foreground">
-            Completely free-to-use with your own API key. Limited free usage also available.
+          Limited free usage available, or completely free-to-use with your own API key. 
           </p>
         </div>
       </div>
diff --git a/app/saved/page.tsx b/app/saved/page.tsx
index 0a5b1a5..6cd9c7a 100644
--- a/app/saved/page.tsx
+++ b/app/saved/page.tsx
@@ -15,6 +15,8 @@ import { Button } from "@/components/ui/button";
 import { Database, ExternalLink, Calendar, FilePlus, RefreshCcw } from "lucide-react";
 import DeleteSchemaButton from "@/components/generator/delete-schema-button";
 import { toast } from "@/components/ui/use-toast";
+import SchemaCardSkeleton from "@/components/ui/schema-card-skeleton";
+import Skeleton from "@/components/ui/skeleton";
 import { useSession } from "next-auth/react";
 
 function formatDate(timestamp: number): string {
@@ -103,10 +105,28 @@ export default function SavedSchemasPage() {
       }
   }, [status, fetchSchemas]);
 
+  const renderSkeletonGrid = () => (
+    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+      {Array.from({ length: 6 }, (_, index) => (
+        <SchemaCardSkeleton key={`schema-skeleton-${index}`} />
+      ))}
+    </div>
+  );
+
   if (status === "loading") {
     return (
-      <div className="flex items-center justify-center h-40">
-        <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
+      <div className="space-y-6 animate-pulse" aria-live="polite">
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-10 w-48" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+          <div className="flex gap-2">
+            <Skeleton className="h-10 w-32 rounded-full" />
+            <Skeleton className="h-10 w-32 rounded-full" />
+          </div>
+        </div>
+        {renderSkeletonGrid()}
       </div>
     );
   }
@@ -125,31 +145,38 @@ export default function SavedSchemasPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold">Saved Schemas</h1>
-        <div className="flex space-x-2">
+      <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="space-y-2">
+          <p className="text-xs uppercase tracking-[0.4em] text-muted-foreground">Saved Schemas</p>
+          <h1 className="text-3xl font-bold leading-tight">Your Saved Schemas</h1>
+          <p className="text-sm text-muted-foreground">
+            Quickly access and manage the schemas you have saved for future runs.
+          </p>
+        </div>
+        <div className="flex flex-wrap gap-2 sm:flex-nowrap">
           <Button
             variant="outline"
             onClick={handleRefresh}
             disabled={isLoading}
+            className="flex-1 sm:flex-none"
           >
-            <RefreshCcw className={`mr-2 h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+            <RefreshCcw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
             {isLoading ? "Loading..." : "Refresh"}
           </Button>
-          <Button asChild>
-            <Link href="/schema/new">
-              <FilePlus className="mr-2 h-4 w-4" />
+          <Button asChild className="flex-1 sm:flex-none">
+            <Link href="/schema/new" className="flex items-center justify-center gap-2">
+              <FilePlus className="h-4 w-4" />
               New Schema
             </Link>
           </Button>
         </div>
-      </div>
+      </header>
 
-      {isLoading ? (
-        <div className="flex items-center justify-center h-40">
-          <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full"></div>
-        </div>
-      ) : schemas.length === 0 ? (
+        {isLoading ? (
+          <div className="animate-pulse" aria-live="polite">
+            {renderSkeletonGrid()}
+          </div>
+        ) : schemas.length === 0 ? (
         <div className="text-center py-12">
           <Database className="mx-auto h-12 w-12 text-muted-foreground" />
           <h3 className="mt-4 text-lg font-semibold">No schemas saved yet</h3>
diff --git a/app/schema/new/page.tsx b/app/schema/new/page.tsx
index ff0f38b..ca508a7 100644
--- a/app/schema/new/page.tsx
+++ b/app/schema/new/page.tsx
@@ -88,6 +88,16 @@ export default function NewSchemaPage() {
     }
   };
 
+  const resetForm = () => {
+    setSchema("");
+    setSchemaType("sql");
+    setName("");
+    setDescription("");
+    setAdditionalInstructions("");
+    setPreferredFormat("json");
+    setPreferredRecordCount(10);
+  };
+
   if (status === "loading") {
     return (
       <div className="flex items-center justify-center min-h-[50vh]">
@@ -104,15 +114,6 @@ export default function NewSchemaPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold">Create New Schema</h1>
-        <div className="flex space-x-2">
-          <Button variant="outline" onClick={() => router.push("/saved")}>
-            Cancel
-          </Button>
-          <Button onClick={handleSave} disabled={isSaving}>
-            {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-            {isSaving ? "Saving..." : "Save Schema"}
-          </Button>
-        </div>
       </div>
 
       <Card>
@@ -231,6 +232,25 @@ export default function NewSchemaPage() {
           </div>
         </CardFooter>
       </Card>
+
+      <div className="flex flex-col gap-3 border-t border-white/10 pt-4">
+        <Button
+          onClick={handleSave}
+          disabled={isSaving}
+          className="w-full justify-center"
+        >
+          {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+          {isSaving ? "Saving..." : "Save Schema"}
+        </Button>
+        <div className="flex flex-wrap gap-3">
+          <Button variant="ghost" className="flex-1" onClick={resetForm}>
+            Reset
+          </Button>
+          <Button variant="outline" className="flex-1" onClick={() => router.push("/saved")}>
+            Cancel
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
index 7409722..e4d9f63 100644
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@@ -27,6 +27,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import Skeleton from "@/components/ui/skeleton";
 
 export default function SettingsPage() {
   // Add global CSS for button hover cursor
@@ -329,14 +330,6 @@ export default function SettingsPage() {
     setHeadersText('');
   };
 
-  if (status === "loading" || (status === "authenticated" && isLoading)) {
-    return (
-      <div className="flex items-center justify-center min-h-[50vh]">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    );
-  }
-
   if (status === "unauthenticated") {
     return (
          <div className="text-center py-12">
@@ -349,242 +342,280 @@ export default function SettingsPage() {
     );
   }
 
+  const showSkeletonContent = status === "loading" || (status === "authenticated" && isLoading);
+
   return (
     <div className="space-y-6">
-      <h1 className="text-3xl font-bold">Settings</h1>
+      <section className="space-y-2">
+        <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">AI Settings</p>
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold leading-tight">AI Provider Configuration</h1>
+          <p className="text-sm text-muted-foreground max-w-3xl">
+            Override default AI settings. Leave blank to use defaults.
+          </p>
+        </div>
+      </section>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>AI Provider Configuration</CardTitle>
-            <CardDescription>
-              Override default AI settings. Leave blank to use defaults.
-            </CardDescription>
-            <CardDescription>
-              <FileWarning className="w-4 h-4 inline-block text-red-400" />
-              <span className="text-xs text-red-400 px-1">
-                Your API keys are stored securely in your browsers local storage, not on our servers. 
-                Your settings will be lost if you clear your browser data.
-              </span>
-            </CardDescription>
-            <button
-              type="button"
-              onClick={() => setShowModelReference(!showModelReference)}
-              className="flex items-center text-sm font-medium mt-2 text-muted-foreground hover:text-foreground"
-            >
-              <HelpCircle className="h-4 w-4 mr-2" />
-              Model Configuration Reference
-              {showModelReference ? (
-                <ChevronUp className="ml-auto h-4 w-4" />
-              ) : (
-                <ChevronDown className="ml-auto h-4 w-4" />
-              )}
-            </button>
-            
-            {showModelReference && (
-              <div className="space-y-3 text-xs text-muted-foreground mt-2 p-3 border rounded-md bg-muted/30">
-                <div>
-                  <h4 className="font-semibold">OpenAI</h4>
-                  <p>Model: <code>gpt-4o, gpt-4-turbo, gpt-3.5-turbo</code></p>
-                  <p>Base URL: <code>https://api.openai.com/v1</code> (default)</p>
-                  <p>Auth: API key as Bearer token</p>
+        {showSkeletonContent ? (
+          <>
+            {Array.from({ length: 2 }).map((_, cardIndex) => (
+              <div
+                key={`settings-skeleton-card-${cardIndex}`}
+                className="space-y-4 rounded-[2rem] border border-white/10 bg-card p-6 shadow-[0_20px_60px_rgba(2,6,23,0.7)]"
+              >
+                <Skeleton className="h-5 w-40 rounded-lg" />
+                <Skeleton className="h-3 w-56 rounded-full" />
+                <div className="space-y-3">
+                  {Array.from({ length: 4 }).map((_, fieldIndex) => (
+                    <Skeleton
+                      key={`settings-skeleton-field-${cardIndex}-${fieldIndex}`}
+                      className="h-10 w-full rounded-2xl"
+                    />
+                  ))}
                 </div>
-                
-                <div>
-                  <h4 className="font-semibold">Anthropic Claude</h4>
-                  <p>Model: <code>claude-3-7-sonnet, claude-3-haiku</code></p>
-                  <p>Base URL: <code>https://api.anthropic.com/v1/messages</code></p>
-                  <p>Header: <code>anthropic-version: 2023-06-01</code></p>
-                  <p>Auth: API key as <code>x-api-key</code> header</p>
-                </div>
-                
-                <div>
-                  <h4 className="font-semibold">Mistral AI</h4>
-                  <p>Model: <code>mistral-tiny, mistral-small, mistral-medium</code></p>
-                  <p>Base URL: <code>https://api.mistral.ai/v1/chat/completions</code></p>
-                  <p>Auth: API key as Bearer token</p>
-                </div>
-                
-                <div>
-                  <h4 className="font-semibold">Google Gemini</h4>
-                  <p>Model: <code>gemini-pro, gemini-1.5-pro</code></p>
-                  <p>Base URL: <code>https://generativelanguage.googleapis.com/v1/models</code></p>
-                  <p>Auth: API key sent as URL parameter</p>
-                </div>
-                
-                <div>
-                  <h4 className="font-semibold">Cohere</h4>
-                  <p>Model: <code>command, command-r, command-r-plus</code></p>
-                  <p>Base URL: <code>https://api.cohere.ai/v1/generate</code></p>
-                  <p>Auth: API key as Bearer token</p>
-                </div>
-                
-                <div>
-                  <h4 className="font-semibold">Azure OpenAI</h4>
-                  <p>Model: <code>azure:deployment-name</code></p>
-                  <p>Base URL: <code>https://your-resource.openai.azure.com/openai/deployments</code></p>
-                  <p>Auth: API key as Bearer token</p>
+                <div className="flex justify-between gap-3">
+                  <Skeleton className="h-10 w-28 rounded-full" />
+                  <Skeleton className="h-10 w-28 rounded-full" />
                 </div>
               </div>
-            )}
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="apiKey">Your API Key</Label>
-              <Input
-                id="apiKey"
-                name="apiKey"
-                type="password"
-                placeholder="sk-... (leave blank to use default)"
-                value={aiSettings.apiKey}
-                onChange={handleSettingChange}
-                disabled={isSaving}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="model">Model Name</Label>
-              <Input
-                id="model"
-                name="model"
-                type="text"
-                placeholder="e.g., gpt-4o-mini, claude-3-7-sonnet, gemini-pro, etc."
-                value={aiSettings.model}
-                onChange={handleSettingChange}
-                disabled={isSaving}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="baseUrl">API Base URL (Optional)</Label>
-              <Input
-                id="baseUrl"
-                name="baseUrl"
-                type="text"
-                placeholder="e.g., https://api.groq.com/openai/v1"
-                value={aiSettings.baseUrl}
-                onChange={handleSettingChange}
-                disabled={isSaving}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="temperature">Temperature: {aiSettings.temperature?.toFixed(1)}</Label>
-              <Slider
-                id="temperature"
-                min={0}
-                max={2}
-                step={0.1}
-                value={[aiSettings.temperature ?? 0.7]}
-                onValueChange={handleTemperatureChange}
-                disabled={isSaving}
-              />
-              <p className="text-xs text-muted-foreground">
-                Controls randomness: 0 is more focused, 2 is more creative.
-              </p>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="maxTokens">Max Tokens: {aiSettings.maxTokens}</Label>
-              <Slider
-                id="maxTokens"
-                min={1000}
-                max={8000}
-                step={100}
-                value={[aiSettings.maxTokens ?? 4000]}
-                onValueChange={handleMaxTokensChange}
-                disabled={isSaving}
-              />
-              <p className="text-xs text-muted-foreground">
-                Limit the length of the AI response.
-              </p>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="headers">Custom Headers (Optional)</Label>
-              <Textarea
-                id="headers"
-                placeholder="# Header example: Anthropic-Version: 2023-06-01"
-                value={headersText}
-                onChange={handleHeadersChange}
-                disabled={isSaving}
-                className="font-mono text-sm h-14"
-              />
-                  <div className="mb-4 p-3 bg-amber-50 dark:bg-amber-950/20 rounded-md border border-amber-200 dark:border-amber-800">
-                    <p className="text-sm mb-1">
-                      <strong>Important:</strong> By using this service, you agree to our{" "}
-                      <a href="/terms" className="text-primary hover:underline">
-                        Terms of Use
-                      </a>
-                      .
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      You are responsible for all API charges incurred when using your API keys with our service.
-                    </p>
-                  </div>
-            </div>
-          </CardContent>
-          <CardFooter className="flex justify-between">
-            <Button onClick={handleSave} disabled={isSaving || isLoading}>
-              {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              {isSaving ? "Saving..." : settingsSaved ? "Settings Saved" : "Save AI Settings"}
-            </Button>
-            <Button 
-              variant="outline" 
-              onClick={handleClearForm} 
-              disabled={isSaving || isLoading}
-            >
-              Clear Form
-            </Button>
-          </CardFooter>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Account Information</CardTitle>
-            <CardDescription>
-              Your current account details
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {session?.user ? (
-              <div className="space-y-2">
-                <div className="flex items-center space-x-2">
-                  <p className="font-medium">Name:</p>
-                  <div className="font-medium text-foreground">
-                    {session.user.name || "Not available"}
+            ))}
+          </>
+        ) : (
+          <>
+            <Card>
+              <CardHeader>
+                <CardTitle>AI Provider Configuration</CardTitle>
+                <CardDescription>
+                  Override default AI settings. Leave blank to use defaults.
+                </CardDescription>
+                <CardDescription>
+                  <FileWarning className="w-4 h-4 inline-block text-red-400" />
+                  <span className="text-xs text-red-400 px-1">
+                    Your API keys are stored securely in your browsers local storage, not on our servers. 
+                    Your settings will be lost if you clear your browser data.
+                  </span>
+                </CardDescription>
+                <button
+                  type="button"
+                  onClick={() => setShowModelReference(!showModelReference)}
+                  className="flex items-center text-sm font-medium mt-2 text-muted-foreground hover:text-foreground"
+                >
+                  <HelpCircle className="h-4 w-4 mr-2" />
+                  Model Configuration Reference
+                  {showModelReference ? (
+                    <ChevronUp className="ml-auto h-4 w-4" />
+                  ) : (
+                    <ChevronDown className="ml-auto h-4 w-4" />
+                  )}
+                </button>
+                
+                {showModelReference && (
+                  <div className="space-y-3 text-xs text-muted-foreground mt-2 p-3 border rounded-md bg-muted/30">
+                    <div>
+                      <h4 className="font-semibold">OpenAI</h4>
+                      <p>Model: <code>gpt-4o, gpt-4-turbo, gpt-3.5-turbo</code></p>
+                      <p>Base URL: <code>https://api.openai.com/v1</code> (default)</p>
+                      <p>Auth: API key as Bearer token</p>
+                    </div>
+                    
+                    <div>
+                      <h4 className="font-semibold">Anthropic Claude</h4>
+                      <p>Model: <code>claude-3-7-sonnet, claude-3-haiku</code></p>
+                      <p>Base URL: <code>https://api.anthropic.com/v1/messages</code></p>
+                      <p>Header: <code>anthropic-version: 2023-06-01</code></p>
+                      <p>Auth: API key as <code>x-api-key</code> header</p>
+                    </div>
+                    
+                    <div>
+                      <h4 className="font-semibold">Mistral AI</h4>
+                      <p>Model: <code>mistral-tiny, mistral-small, mistral-medium</code></p>
+                      <p>Base URL: <code>https://api.mistral.ai/v1/chat/completions</code></p>
+                      <p>Auth: API key as Bearer token</p>
+                    </div>
+                    
+                    <div>
+                      <h4 className="font-semibold">Google Gemini</h4>
+                      <p>Model: <code>gemini-pro, gemini-1.5-pro</code></p>
+                      <p>Base URL: <code>https://generativelanguage.googleapis.com/v1/models</code></p>
+                      <p>Auth: API key sent as URL parameter</p>
+                    </div>
+                    
+                    <div>
+                      <h4 className="font-semibold">Cohere</h4>
+                      <p>Model: <code>command, command-r, command-r-plus</code></p>
+                      <p>Base URL: <code>https://api.cohere.ai/v1/generate</code></p>
+                      <p>Auth: API key as Bearer token</p>
+                    </div>
+                    
+                    <div>
+                      <h4 className="font-semibold">Azure OpenAI</h4>
+                      <p>Model: <code>azure:deployment-name</code></p>
+                      <p>Base URL: <code>https://your-resource.openai.azure.com/openai/deployments</code></p>
+                      <p>Auth: API key as Bearer token</p>
+                    </div>
                   </div>
+                )}
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="apiKey">Your API Key</Label>
+                  <Input
+                    id="apiKey"
+                    name="apiKey"
+                    type="password"
+                    placeholder="sk-... (leave blank to use default)"
+                    value={aiSettings.apiKey}
+                    onChange={handleSettingChange}
+                    disabled={isSaving}
+                  />
                 </div>
-                <div className="flex items-center space-x-2">
-                  <p className="font-medium">Email:</p>
-                  <p>{session.user.email || "Not provided"}</p>
+                <div className="space-y-2">
+                  <Label htmlFor="model">Model Name</Label>
+                  <Input
+                    id="model"
+                    name="model"
+                    type="text"
+                    placeholder="e.g., gpt-4o-mini, claude-3-7-sonnet, gemini-pro, etc."
+                    value={aiSettings.model}
+                    onChange={handleSettingChange}
+                    disabled={isSaving}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="baseUrl">API Base URL (Optional)</Label>
+                  <Input
+                    id="baseUrl"
+                    name="baseUrl"
+                    type="text"
+                    placeholder="e.g., https://api.groq.com/openai/v1"
+                    value={aiSettings.baseUrl}
+                    onChange={handleSettingChange}
+                    disabled={isSaving}
+                  />
                 </div>
-                <div className="mt-6 pt-4 border-t">
-                  <p className="text-sm text-muted-foreground mb-2">
-                    Manage your stored API settings. These actions only affect your local device, 
-                    the local storage in the browser is cleared when you delete your API settings.
+                <div className="space-y-2">
+                  <Label htmlFor="temperature">Temperature: {aiSettings.temperature?.toFixed(1)}</Label>
+                  <Slider
+                    id="temperature"
+                    min={0}
+                    max={2}
+                    step={0.1}
+                    value={[aiSettings.temperature ?? 0.7]}
+                    onValueChange={handleTemperatureChange}
+                    disabled={isSaving}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Controls randomness: 0 is more focused, 2 is more creative.
                   </p>
-                  <Button 
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => setConfirmDeleteOpen(true)}
-                    disabled={!settingsSaved || isSaving}
-                    className="mt-2"
-                  >
-                    Delete API Settings
-                  </Button>
                 </div>
-                <div className="space-y-2 mt-6 pt-6 border-t">
-x                  <DailyLimitInfo 
-                    hasOwnApiKey={!!aiSettings.apiKey} 
-                    variant="detailed" 
-                    className="mt-2" 
+                <div className="space-y-2">
+                  <Label htmlFor="maxTokens">Max Tokens: {aiSettings.maxTokens}</Label>
+                  <Slider
+                    id="maxTokens"
+                    min={1000}
+                    max={8000}
+                    step={100}
+                    value={[aiSettings.maxTokens ?? 4000]}
+                    onValueChange={handleMaxTokensChange}
+                    disabled={isSaving}
                   />
-                  <p className="text-sm text-muted-foreground mt-2">
-                    Free users are limited to 5 generations per day. Add your own API key above to bypass this limit.
+                  <p className="text-xs text-muted-foreground">
+                    Limit the length of the AI response.
                   </p>
                 </div>
-              </div>
-            ) : (
-              <p>Not signed in</p>
-            )}
-          </CardContent>
-        </Card>
+                <div className="space-y-2">
+                  <Label htmlFor="headers">Custom Headers (Optional)</Label>
+                  <Textarea
+                    id="headers"
+                    placeholder="# Header example: Anthropic-Version: 2023-06-01"
+                    value={headersText}
+                    onChange={handleHeadersChange}
+                    disabled={isSaving}
+                    className="font-mono text-sm h-14"
+                  />
+                      <div className="mb-4 p-3 rounded-md border border-amber-200 dark:border-amber-800">
+                        <p className="text-sm mb-1">
+                          <strong>Important:</strong> By using this service, you agree to our{" "}
+                          <a href="/terms" className="text-primary hover:underline">
+                            Terms of Use
+                          </a>
+                          .
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          You are responsible for all API charges incurred when using your API keys with our service.
+                        </p>
+                      </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-between">
+                <Button onClick={handleSave} disabled={isSaving || isLoading}>
+                  {isSaving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+                  {isSaving ? "Saving..." : settingsSaved ? "Settings Saved" : "Save AI Settings"}
+                </Button>
+                <Button 
+                  variant="outline" 
+                  onClick={handleClearForm} 
+                  disabled={isSaving || isLoading}
+                >
+                  Clear Form
+                </Button>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Account Information</CardTitle>
+                <CardDescription>
+                  Your current account details
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {session?.user ? (
+                  <div className="space-y-2">
+                    <div className="flex items-center space-x-2">
+                      <p className="font-medium">Name:</p>
+                      <div className="font-medium text-foreground">
+                        {session.user.name || "Not available"}
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <p className="font-medium">Email:</p>
+                      <p>{session.user.email || "Not provided"}</p>
+                    </div>
+                    <div className="mt-6 pt-4 border-t">
+                      <p className="text-sm text-muted-foreground mb-2">
+                        Manage your stored API settings. These actions only affect your local device, 
+                        the local storage in the browser is cleared when you delete your API settings.
+                      </p>
+                      <Button 
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => setConfirmDeleteOpen(true)}
+                        disabled={!settingsSaved || isSaving}
+                        className="mt-2"
+                      >
+                        Delete API Settings
+                      </Button>
+                    </div>
+                    <div className="space-y-2 mt-6 pt-6 border-t">
+                      <DailyLimitInfo 
+                        hasOwnApiKey={!!aiSettings.apiKey} 
+                        variant="detailed" 
+                        className="mt-2" 
+                      />
+                      <p className="text-sm text-muted-foreground mt-2">
+                        Free users are limited to 5 generations per day. Add your own API key to bypass this limit.
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <p>Not signed in</p>
+                )}
+              </CardContent>
+            </Card>
+          </>
+        )}
       </div>
 
       <Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
diff --git a/app/templates/page.tsx b/app/templates/page.tsx
new file mode 100644
index 0000000..f2861ff
--- /dev/null
+++ b/app/templates/page.tsx
@@ -0,0 +1,137 @@
+ "use client";
+
+import { useMemo, useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import TemplateCard from "@/components/templates/template-card";
+import { searchTemplates } from "@/lib/templates";
+import { SchemaTemplateCategory, TemplateSelection } from "@/types/template";
+import Skeleton from "@/components/ui/skeleton";
+
+const categories: (SchemaTemplateCategory | "all")[] = [
+  "all",
+  "authentication",
+  "profiles",
+  "settings",
+  "email",
+  "messages",
+  "alerts",
+  "system",
+  "other",
+];
+
+const categoryLabel = (category: SchemaTemplateCategory | "all") =>
+  category === "all" ? "All" : category.charAt(0).toUpperCase() + category.slice(1);
+
+export default function TemplatesPage() {
+  const [query, setQuery] = useState("");
+  const [activeCategory, setActiveCategory] = useState<SchemaTemplateCategory | "all">("all");
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
+
+  const templates = useMemo(
+    () =>
+      searchTemplates({
+        query,
+        category: activeCategory === "all" ? undefined : activeCategory,
+      }),
+    [query, activeCategory]
+  );
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => setIsLoading(false), 200);
+    return () => window.clearTimeout(timer);
+  }, []);
+
+  const showSkeletonContent = isLoading;
+
+  const handleUseTemplate = (selection: TemplateSelection) => {
+    const params = new URLSearchParams({
+      templateSchema: encodeURIComponent(selection.schema),
+      templateType: selection.schemaType,
+      templateName: selection.template.name,
+      from: "templates",
+    });
+
+    router.push(`/generator?${params.toString()}`);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <section className="space-y-2">
+        <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">Templates</p>
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold leading-tight">Sample Template Schemas</h1>
+          <p className="text-sm text-muted-foreground max-w-3xl">
+            Browse sample templates and load them directly into the generator.
+          </p>
+        </div>
+      </section>
+      </div>
+
+      <div className="flex flex-wrap gap-2 max-sm:-mx-1 max-sm:px-1">
+        {showSkeletonContent
+          ? Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton
+                key={`category-skeleton-${index}`}
+                className="h-9 w-24 rounded-full"
+              />
+            ))
+          : categories.map((category) => (
+              <Button
+                key={category}
+                variant="ghost"
+                size="sm"
+                className={`rounded-full px-3 text-[11px] font-semibold uppercase tracking-widest max-sm:px-2 ${
+                  activeCategory === category ? "text-white" : "text-muted-foreground hover:text-white/80"
+                }`}
+                onClick={() => setActiveCategory(category)}
+              >
+                {categoryLabel(category)}
+              </Button>
+            ))}
+      </div>
+
+      <div>
+        {showSkeletonContent ? (
+          <Skeleton className="h-10 w-full rounded-2xl" />
+        ) : (
+          <Input
+            placeholder="Search templates (name, tags, schema)..."
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            className="max-sm:text-sm"
+          />
+        )}
+      </div>
+
+      {showSkeletonContent ? (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div
+              key={`template-skeleton-${index}`}
+              className="page-card template-card-shell flex flex-col gap-4 border border-white/10 p-6 text-slate-300"
+            >
+              <Skeleton className="h-6 w-40 rounded-full" />
+              <Skeleton className="h-3 w-32 rounded-full" />
+              <Skeleton className="h-32 w-full rounded-2xl" />
+              <div className="flex justify-between gap-3">
+                <Skeleton className="h-8 w-20 rounded-full" />
+                <Skeleton className="h-10 w-28 rounded-full" />
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {templates.map((template) => (
+            <TemplateCard key={template.id} template={template} onUse={handleUseTemplate} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
diff --git a/components/generator/config-panel.tsx b/components/generator/config-panel.tsx
index d6823f5..fd51194 100644
--- a/components/generator/config-panel.tsx
+++ b/components/generator/config-panel.tsx
@@ -159,7 +159,7 @@ export function ConfigPanel({
     <Card className="h-full w-full overflow-y-auto">
       <CardHeader className="relative">
         {stepNumber && (
-          <div className="absolute top-0 right-0 bg-primary/10 text-primary px-2 py-2 rounded-tr-xl text-xs font-medium" style={{ top: "-24px" }}>
+          <div className="absolute top-0 right-0 bg-primary/10 text-primary px-2 py-2 rounded-tr-xl text-xs font-medium" style={{ top: "-24px", right: "-24px" }}>
             Step 1
           </div>
         )}
@@ -168,7 +168,7 @@ export function ConfigPanel({
           Adjust mock data generation settings. Logged in users can use their own API keys and models for unlimited generations.
         </CardDescription>
       </CardHeader>
-      <CardContent className="space-y-6">
+      <CardContent className="space-y-6 mt-4">
         <div className="space-y-2">
           <Label htmlFor="schema-type">Data Source Type</Label>
           <Select value={schemaType} onValueChange={(value) => setSchemaType(value as typeof schemaType)} disabled={isGenerating}>
diff --git a/components/generator/generation-progress.tsx b/components/generator/generation-progress.tsx
new file mode 100644
index 0000000..1597126
--- /dev/null
+++ b/components/generator/generation-progress.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button"
+import { CheckCircle, Loader2, X } from "lucide-react"
+
+export const generationSteps = [
+  { id: "parsing", label: "Parsing schema" },
+  { id: "generating", label: "Generating data" },
+  { id: "formatting", label: "Formatting output" },
+] as const
+
+export type StepId = (typeof generationSteps)[number]["id"]
+
+type GenerationProgressProps = {
+  currentStep: StepId
+  progress: number
+  description?: string
+  onCancel?: () => void
+  isCancelable?: boolean
+}
+
+export default function GenerationProgress({
+  currentStep,
+  progress,
+  description,
+  onCancel,
+  isCancelable,
+}: GenerationProgressProps) {
+  const normalizedProgress = Math.min(Math.max(Math.round(progress), 0), 100)
+  const activeIndex = generationSteps.findIndex((step) => step.id === currentStep)
+
+  return (
+    <div className="rounded-2xl border border-border/60 bg-background/60 p-4 shadow-lg backdrop-blur">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+            {currentStep === "parsing"
+              ? "Parsing schema"
+              : currentStep === "generating"
+              ? "Generating data"
+              : "Formatting output"}
+          </p>
+          <p className="text-sm font-medium text-foreground">{description || "Preparing your mock records"}</p>
+        </div>
+        <div className="flex items-center gap-2 rounded-full border border-border/40 bg-muted/30 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+          <Loader2 className="h-3 w-3 animate-spin" />
+          {normalizedProgress}%
+        </div>
+      </div>
+
+      <div className="mt-3 h-2 w-full overflow-hidden rounded-full bg-muted-foreground/20">
+        <div
+          className="h-full rounded-full bg-gradient-to-r from-primary to-accent transition-all duration-300"
+          style={{ width: `${normalizedProgress}%` }}
+        />
+      </div>
+
+      <div className="mt-3 grid gap-3 sm:grid-cols-3">
+        {generationSteps.map((step, index) => {
+          const status = index < activeIndex ? "completed" : index === activeIndex ? "active" : "pending"
+          return (
+            <div
+              key={step.id}
+              className="flex gap-2 rounded-xl border border-border/40 bg-muted/30 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground"
+            >
+              {status === "completed" ? (
+                <CheckCircle className="h-4 w-4 text-success" />
+              ) : status === "active" ? (
+                <Loader2 className="h-4 w-4 animate-spin text-primary" />
+              ) : (
+                <span className="h-3 w-3 rounded-full bg-muted-foreground/70" />
+              )}
+              <span className={status === "active" ? "text-foreground" : undefined}>{step.label}</span>
+            </div>
+          )
+        })}
+      </div>
+
+      {isCancelable && onCancel ? (
+        <div className="mt-4 flex justify-end">
+          <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={onCancel}>
+            <X className="mr-2 h-4 w-4" />
+            Cancel
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
diff --git a/components/layout/auth-buttons.tsx b/components/layout/auth-buttons.tsx
index 18f6af3..69ab143 100644
--- a/components/layout/auth-buttons.tsx
+++ b/components/layout/auth-buttons.tsx
@@ -57,7 +57,7 @@ export function AuthButtons() {
           <DropdownMenuItem asChild>
             <Link href="/saved">
               <User className="mr-2 h-4 w-4" />
-              <span>Saved Schemas</span>
+              <span>Your Saved Schemas</span>
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild>
diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
index 5d651ac..57343c9 100644
--- a/components/layout/navbar.tsx
+++ b/components/layout/navbar.tsx
@@ -2,96 +2,172 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useState } from "react";
 import { AuthButtons } from "./auth-buttons";
 import { Button } from "@/components/ui/button";
-import { Database, Save, Settings, BarChart2, Key } from "lucide-react";
+import { Database, Save, Settings, BarChart2, Key, Layers, Menu, X } from "lucide-react";
 import { useSession } from "next-auth/react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 export default function Navbar() {
   const pathname = usePathname();
   const { data: session } = useSession();
 
+  const [tooltipTarget, setTooltipTarget] = useState<string | null>(null);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
   const navItems = [
-    {
-      name: "Generator",
-      href: "/generator",
-      icon: <Database className="h-4 w-4 mr-2" />,
-    },
-    {
-      name: "Saved Schemas",
-      href: "/saved",
-      icon: <Save className="h-4 w-4 mr-2" />,
-    },
-    {
-      name: "AI Settings",  
-      href: "/settings",
-      icon: <Settings className="h-4 w-4 mr-2" />,
-    },
-    {
-      name: "API Option",
-      href: "/api-keys",
-      icon: <Key className="h-4 w-4 mr-2" />,
-    },
+    { name: "Generator", href: "/generator", icon: <Database className="h-4 w-4" /> },
+    { name: "Templates", href: "/templates", icon: <Layers className="h-4 w-4" /> },
+    { name: "Saved", href: "/saved", icon: <Save className="h-4 w-4" />, requiresAuth: true },
+    { name: "AI Settings", href: "/settings", icon: <Settings className="h-4 w-4" />, requiresAuth: true },
+    { name: "API", href: "/api-keys", icon: <Key className="h-4 w-4" />, requiresAuth: true },
   ];
 
-  // Only show events log for authenticated users
   if (session?.user) {
     navItems.push({
-      name: "Event Log",
+      name: "Log",
       href: "/dashboard/events",
-      icon: <BarChart2 className="h-4 w-4 mr-2" />,
+      icon: <BarChart2 className="h-4 w-4" />,
     });
   }
 
   return (
-    <header className="border-b">
-      <div className="container mx-auto flex h-16 items-center px-4 sm:px-6">
-        <Link href="/" className="flex items-center space-x-2">
-          <Database className="h-6 w-6" />
-          <span className="font-bold">MockRG.AI</span>
+    <header className="sticky top-0 z-30 w-full border-b border-white/10 bg-gradient-to-b from-slate-900/95 to-slate-950/80 shadow-2xl shadow-slate-950/60 backdrop-blur-lg">
+      <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-3 px-4 py-4">
+        <Link href="/" className="flex items-center gap-3">
+          <div>
+            <Database className="h-8 w-8" />
+          </div>
+          <div>
+            <div className="text-lg font-semibold tracking-wide text-white">MockRG.AI</div>
+            <p className="text-xs uppercase tracking-[0.3em] text-slate-300">Data Mocker</p>
+          </div>
         </Link>
-        <nav className="ml-auto flex items-center space-x-1 md:space-x-2">
-          <div className="hidden md:flex space-x-1">
-            {navItems.map((item) => (
+
+        <TooltipProvider>
+          <nav className="hidden flex-1 flex-wrap items-center justify-end gap-2 md:flex">
+            {navItems.map((item) => {
+              const isActive =
+                pathname === item.href || pathname?.startsWith(`${item.href}/`);
+              const isDisabled = !!(item.requiresAuth && !session?.user);
+
+              if (isDisabled) {
+                return (
+                  <Tooltip
+                    key={item.href}
+                    open={tooltipTarget === item.href}
+                    onOpenChange={(open) => setTooltipTarget(open ? item.href : null)}
+                  >
+                    <TooltipTrigger asChild>
+                      <span
+                        onClick={() => setTooltipTarget(item.href)}
+                        className="flex items-center gap-2 rounded-full border border-white/10 bg-slate-900/60 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground opacity-60 cursor-pointer"
+                      >
+                        {item.icon}
+                        {item.name}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Sign in to access</TooltipContent>
+                  </Tooltip>
+                );
+              }
+
+              return (
+                <Button
+                  key={item.href}
+                  variant={isActive ? "default" : "ghost"}
+                  size="sm"
+                  asChild
+                  className={`rounded-full px-3 text-xs font-semibold tracking-wide uppercase nav-cta-button transition duration-150 ease-in-out hover:-translate-y-0.5 hover:ring-1 hover:ring-slate-200/40 active:scale-95`}
+                >
+                  <Link href={item.href} className="flex items-center gap-2">
+                    {item.icon}
+                    {item.name}
+                  </Link>
+                </Button>
+              );
+            })}
+          </nav>
+        </TooltipProvider>
+
+        <div className="ml-auto hidden md:block">
+          <AuthButtons />
+        </div>
+
+        <div className="ml-auto flex items-center gap-2 md:hidden">
+          <DropdownMenu open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+            <DropdownMenuTrigger asChild>
               <Button
-                key={item.href}
-                variant={pathname === item.href || pathname?.startsWith(item.href + '/') ? "default" : "ghost"}
-                size="sm"
-                asChild
+                variant="ghost"
+                size="icon"
+                className="h-10 w-10 rounded-full border border-white/10 bg-slate-900/70 text-white hover:bg-slate-800/80"
               >
-                <Link href={item.href} className="flex items-center">
-                  {item.icon}
-                  {item.name}
-                </Link>
+                {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
               </Button>
-            ))}
-          </div>
-          <div className="ml-2">
-            <AuthButtons />
-          </div>
-        </nav>
-      </div>
-      <div className="md:hidden border-t">
-        <div className="container mx-auto flex justify-between px-4">
-          {navItems.map((item) => (
-            <Button
-              key={item.href}
-              variant={pathname === item.href || pathname?.startsWith(item.href + '/') ? "default" : "ghost"}
-              size="sm"
-              asChild
-              className="flex-1"
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              sideOffset={12}
+              className="w-64 rounded-2xl border border-white/10 bg-slate-950/95 p-2 text-white shadow-2xl shadow-slate-950/70 backdrop-blur-xl"
             >
-              <Link
-                href={item.href}
-                className="flex items-center justify-center py-2"
-              >
-                {item.icon}
-                <span className="sr-only md:not-sr-only">{item.name}</span>
-              </Link>
-            </Button>
-          ))}
+              <DropdownMenuLabel className="text-xs uppercase tracking-[0.25em] text-slate-300">
+                Navigation
+              </DropdownMenuLabel>
+              {navItems.map((item) => {
+                const isActive =
+                  pathname === item.href || pathname?.startsWith(`${item.href}/`);
+                const isDisabled = !!(item.requiresAuth && !session?.user);
+
+                if (isDisabled) {
+                  return (
+                    <DropdownMenuItem
+                      key={item.href}
+                      disabled
+                      className="flex items-center justify-between rounded-xl border border-transparent px-3 py-2 text-sm text-slate-400"
+                    >
+                      <span className="flex items-center gap-2">
+                        {item.icon}
+                        {item.name}
+                      </span>
+                      <span className="text-[11px] uppercase text-slate-500">Sign in</span>
+                    </DropdownMenuItem>
+                  );
+                }
+
+                return (
+                  <DropdownMenuItem
+                    key={item.href}
+                    asChild
+                    onClick={() => setMobileMenuOpen(false)}
+                    className={`rounded-xl px-3 py-2 text-sm transition ${
+                      isActive ? "bg-slate-800/80 text-white" : "text-slate-200 hover:bg-slate-900"
+                    }`}
+                  >
+                    <Link href={item.href} className="flex items-center gap-2">
+                      {item.icon}
+                      {item.name}
+                    </Link>
+                  </DropdownMenuItem>
+                );
+              })}
+              <DropdownMenuSeparator className="my-2 bg-white/10" />
+              <div className="px-2 pb-1">
+                <AuthButtons />
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </div>
     </header>
-  );
+  )
 }
+
diff --git a/components/templates/template-card.tsx b/components/templates/template-card.tsx
new file mode 100644
index 0000000..2aa7648
--- /dev/null
+++ b/components/templates/template-card.tsx
@@ -0,0 +1,96 @@
+import { useMemo, useState } from "react"
+
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { SchemaTemplate, TemplateSelection } from "@/types/template"
+
+type TemplateCardProps = {
+  template: SchemaTemplate
+  onUse: (selection: TemplateSelection) => void
+}
+
+export default function TemplateCard({ template, onUse }: TemplateCardProps) {
+  const [selectedType, setSelectedType] = useState<"sql" | "nosql">(template.schemaType)
+
+  const schemaText = useMemo(() => {
+    const fallback =
+      template.schemas?.[selectedType] ??
+      template.schema ??
+      `/* Coming soon: ${selectedType.toUpperCase()} version */`
+
+    if (!template.schemas?.[selectedType] && template.schemas) {
+      return `/* Coming soon: ${selectedType.toUpperCase()} version */`
+    }
+
+    return fallback
+  }, [selectedType, template.schema, template.schemas])
+
+  const hasSql = !!(template.schemas?.sql || template.schemaType === "sql")
+  const hasNosql = !!(template.schemas?.nosql || template.schemaType === "nosql")
+
+  return (
+    <Card className="page-card template-card-shell flex h-full flex-col gap-4 border-white/10 shadow-[0_30px_60px_rgba(15,23,42,0.45)]">
+      <CardHeader className="px-4 pt-4 sm:px-6 sm:pt-6">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+          <div className="space-y-1">
+            <CardTitle className="text-base font-semibold text-white sm:text-lg">{template.name}</CardTitle>
+            <p className="text-sm leading-relaxed text-white/70">{template.description}</p>
+          </div>
+          <div className="flex items-center self-start rounded-full border border-white/10 bg-white/5 p-1 text-xs font-semibold uppercase tracking-widest text-white/70">
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`h-8 px-3 text-[11px] ${selectedType === "sql" ? "bg-white/15 text-white" : "text-white/70"}`}
+              onClick={() => setSelectedType("sql")}
+              disabled={!hasSql}
+            >
+              SQL
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`h-8 px-3 text-[11px] ${selectedType === "nosql" ? "bg-white/15 text-white" : "text-white/70"}`}
+              onClick={() => setSelectedType("nosql")}
+              disabled={!hasNosql}
+            >
+              NoSQL
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-4 pb-0 sm:px-6">
+        <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          <span className="rounded-full bg-white/10 px-3 py-1 text-white">{selectedType.toUpperCase()}</span>
+          <span className="text-white/70">{template.category}</span>
+        </div>
+        <pre className="template-schema-preview mt-3 max-h-32 overflow-auto rounded-lg border border-white/10 bg-slate-900/80 p-3 text-[0.72rem] leading-relaxed text-white/80 sm:text-[0.75rem]">
+          {schemaText.trim()}
+        </pre>
+      </CardContent>
+      <CardFooter className="mt-auto flex flex-col gap-3 px-4 pb-5 pt-3 sm:flex-row sm:items-center sm:justify-between sm:gap-2 sm:px-6 sm:pb-6">
+        <div className="flex flex-wrap gap-2">
+          {template.tags.map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-[11px]">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+        <Button
+          size="sm"
+          className="template-use-button text-xs uppercase tracking-widest w-full sm:w-auto"
+          onClick={() =>
+            onUse({
+              template,
+              schema: schemaText,
+              schemaType: selectedType,
+            })
+          }
+        >
+          Use Template
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
diff --git a/components/templates/template-picker.tsx b/components/templates/template-picker.tsx
new file mode 100644
index 0000000..759ed0a
--- /dev/null
+++ b/components/templates/template-picker.tsx
@@ -0,0 +1,136 @@
+import { useMemo, useState } from "react"
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import TemplateCard from "@/components/templates/template-card"
+import { searchTemplates } from "@/lib/templates"
+import { SchemaTemplateCategory, TemplateSelection } from "@/types/template"
+import { cn } from "@/lib/utils"
+import { Layers, Search } from "lucide-react"
+
+type TemplatePickerProps = {
+  triggerLabel: string
+  onSelect: (selection: TemplateSelection) => void
+}
+
+const categoryBadge = (category: SchemaTemplateCategory | "all") => {
+  return category === "all" ? "All" : category.charAt(0).toUpperCase() + category.slice(1)
+}
+
+const categories: (SchemaTemplateCategory | "all")[] = [
+  "all",
+  "authentication",
+  "profiles",
+  "settings",
+  "email",
+  "messages",
+  "alerts",
+  "system",
+  "other",
+]
+
+export default function TemplatePicker({ triggerLabel, onSelect }: TemplatePickerProps) {
+  const [query, setQuery] = useState("")
+  const [activeCategory, setActiveCategory] = useState<SchemaTemplateCategory | "all">("all")
+  const [isOpen, setIsOpen] = useState(false)
+
+  const templates = useMemo(
+    () =>
+      searchTemplates({
+        query,
+        category: activeCategory === "all" ? undefined : activeCategory,
+      }),
+    [query, activeCategory]
+  )
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="secondary" size="sm" className="flex items-center gap-1">
+          <Layers className="h-4 w-4" />
+          {triggerLabel}
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        className="page-card template-dialog max-w-[95vw] sm:!max-w-[1200px] sm:w-[min(95vw,1200px)]"
+      >
+        <DialogHeader>
+          <DialogTitle>Browse Schema Templates</DialogTitle>
+          <DialogDescription>
+            Load a template to jumpstart your schema, then tweak it as needed.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-wrap items-center gap-1">
+          {categories.map((category) => (
+            <Button
+              key={category}
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "rounded-full px-2 text-[11px] m font-semibold uppercase tracking-widest max-sm:text-[10px] max-sm:px-1",
+                activeCategory === category ? "text-white" : "text-muted-foreground hover:text-white/80"
+              )}
+              onClick={() => setActiveCategory(category)}
+            >
+              {categoryBadge(category)}
+            </Button>
+          ))}
+        </div>
+        <div>
+          <div className="relative w-full">
+            <span className="pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground">
+              <Search className="h-4 w-4" />
+            </span>
+            <Input
+              placeholder="Search templates (name, tags, schema)..."
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+
+        <div className="max-h-[60vh] overflow-y-auto pr-1 max-sm:max-h-[60vh]">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {templates.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-muted/60 bg-muted/10 p-6 text-center text-sm text-muted-foreground">
+                No templates match your search yet.
+              </div>
+            ) : (
+              templates.map((template) => (
+                <TemplateCard
+                  key={template.id}
+                  template={template}
+                  onUse={(selection) => {
+                    onSelect(selection)
+                    setIsOpen(false)
+                  }}
+                />
+              ))
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="mt-6 border-t pt-4">
+          <DialogClose asChild>
+            <Button variant="outline" size="sm">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 01d587e..ec1cbcb 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,20 +5,20 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transform-gpu transition duration-200 cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "cta-button text-white shadow-[0_15px_45px_rgba(15,23,42,0.35)] focus-visible:ring-offset-primary/40",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white shadow-[0_10px_25px_rgba(220,38,38,0.05)] hover:-translate-y-0.5 hover:scale-[1.02] hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-border bg-background shadow-sm hover:-translate-y-0.5 hover:bg-accent/10 hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:-translate-y-0.5 hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent/10 hover:text-accent-foreground dark:hover:bg-accent/20",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index d05bbc6..bb89aae 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -6,12 +6,20 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
+      className="group relative overflow-hidden rounded-[1.5rem] p-px"
+      style={{
+        backgroundImage:
+          "linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-middle), var(--card-gradient-end))",
+      }}
+    >
+      <div
+        className={cn(
+          "min-h-full rounded-[1.3125rem] border border-border/60 bg-card px-6 py-6 shadow-[0_15px_35px_rgba(15,23,42,0.1)] transition-all duration-300 group-hover:border-border/80",
+          className
+        )}
+        {...props}
+      />
+    </div>
   )
 }
 
diff --git a/components/ui/results-skeleton.tsx b/components/ui/results-skeleton.tsx
new file mode 100644
index 0000000..048ca1c
--- /dev/null
+++ b/components/ui/results-skeleton.tsx
@@ -0,0 +1,21 @@
+import Skeleton from "@/components/ui/skeleton"
+
+export default function ResultsSkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-end gap-3">
+        <Skeleton className="h-10 w-28 rounded-full" />
+        <Skeleton className="h-10 w-28 rounded-full" />
+      </div>
+      <Skeleton className="h-12 w-full rounded-xl" />
+      <Skeleton className="h-72 w-full rounded-2xl" />
+      <div className="grid grid-cols-2 gap-4">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-1/2" />
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </div>
+  )
+}
+
diff --git a/components/ui/schema-card-skeleton.tsx b/components/ui/schema-card-skeleton.tsx
new file mode 100644
index 0000000..8623e27
--- /dev/null
+++ b/components/ui/schema-card-skeleton.tsx
@@ -0,0 +1,26 @@
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card"
+import Skeleton from "@/components/ui/skeleton"
+
+export default function SchemaCardSkeleton() {
+  return (
+    <Card className="flex animate-pulse flex-col gap-2 border-border/60 bg-background/30 shadow-none">
+      <CardHeader className="space-y-2 px-6 pt-6">
+        <Skeleton className="h-5 w-1/2" />
+        <Skeleton className="h-4 w-1/4" />
+      </CardHeader>
+      <CardContent className="space-y-3 px-6 pb-2">
+        <Skeleton className="h-20 w-full" />
+      </CardContent>
+      <CardFooter className="flex items-center justify-between px-6 pb-6 pt-0">
+        <Skeleton className="h-9 w-24 rounded-full" />
+        <Skeleton className="h-9 w-20 rounded-full" />
+      </CardFooter>
+    </Card>
+  )
+}
+
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..a935194
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="presentation"
+      className={cn(
+        "animate-pulse rounded-lg bg-muted-foreground/10 shadow-inner dark:bg-muted-foreground/20",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export default Skeleton
+
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 17e0790..665a042 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -31,12 +31,13 @@ const Toast = React.forwardRef<
       role="alert"
       aria-label="toast"
       className={cn(
-        "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-        variant === "default" && "border bg-background text-foreground",
+        "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl border px-6 py-5 shadow-2xl shadow-slate-900/10 bg-opacity-90 transition duration-250 ease-out backdrop-blur-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
+        "hover:-translate-y-0.5",
+        variant === "default" && "border border-border bg-background text-foreground",
         variant === "destructive" &&
-          "destructive border-destructive bg-destructive text-destructive-foreground",
+          "border-destructive bg-destructive text-destructive-foreground",
         variant === "success" &&
-          "border-green-500 bg-green-100 text-green-900 dark:bg-green-900/20 dark:border-green-500/30 dark:text-green-300",
+          "border-green-500 bg-green-50 text-green-900 dark:bg-green-900/20 dark:border-green-500/30 dark:text-green-300",
         className
       )}
       {...props}
diff --git a/lib/templates.ts b/lib/templates.ts
new file mode 100644
index 0000000..d20655d
--- /dev/null
+++ b/lib/templates.ts
@@ -0,0 +1,1661 @@
+import { SchemaTemplate, SchemaTemplateCategory } from "@/types/template"
+
+const schemaTemplates: SchemaTemplate[] = [
+  // authentication
+  {
+    id: "auth-sessions-sql",
+    name: "Auth Sessions",
+    description: "Track login sessions, devices, and expiration metadata.",
+    category: "authentication",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE auth_sessions (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  device TEXT,
+  ip VARCHAR(45),
+  last_used TIMESTAMPTZ DEFAULT NOW(),
+  expires_at TIMESTAMPTZ
+);`,
+    schemas: {
+      sql: `
+CREATE TABLE auth_sessions (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  device TEXT,
+  ip VARCHAR(45),
+  last_used TIMESTAMPTZ DEFAULT NOW(),
+  expires_at TIMESTAMPTZ
+);`,
+      nosql: `{
+  "type": "authSession",
+  "id": "sess_a12",
+  "userId": "user_123",
+  "device": "web",
+  "ip": "198.51.100.23",
+  "lastUsed": "2025-07-02T12:00:00Z",
+  "expiresAt": "2025-07-02T14:00:00Z"
+}`,
+    },
+    tags: ["security", "sessions"],
+    popularity: 68,
+  },
+  {
+    id: "auth-tokens-nosql",
+    name: "Token Registry",
+    description: "Documents refresh/PSK tokens with geolocation and status.",
+    category: "authentication",
+    schemaType: "nosql",
+    schema: `
+{
+  "tokenId": "tok_abc",
+  "userId": "user_123",
+  "scopes": ["generate", "read"],
+  "createdAt": "2025-06-30T12:00:00Z",
+  "isActive": true
+}`,
+    schemas: {
+      sql: `
+CREATE TABLE token_registry (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  token TEXT,
+  scopes TEXT[],
+  created_at TIMESTAMPTZ DEFAULT NOW(),
+  expires_at TIMESTAMPTZ,
+  is_active BOOLEAN DEFAULT TRUE
+);`,
+      nosql: `
+{
+  "tokenId": "tok_abc",
+  "userId": "user_123",
+  "scopes": ["generate", "read"],
+  "createdAt": "2025-06-30T12:00:00Z",
+  "isActive": true
+}`,
+    },
+    tags: ["tokens", "auth"],
+    popularity: 61,
+  },
+  {
+    id: "auth-factors-sql",
+    name: "Auth Factors",
+    description: "Store MFA devices, recovery codes, and status.",
+    category: "authentication",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE auth_factors (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  type VARCHAR(32),
+  last_used TIMESTAMPTZ,
+  is_active BOOLEAN DEFAULT TRUE
+);`,
+    schemas: {
+      sql: `
+CREATE TABLE auth_factors (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  type VARCHAR(32),
+  last_used TIMESTAMPTZ,
+  is_active BOOLEAN DEFAULT TRUE
+);`,
+      nosql: `{
+  "factorId": "factor_123",
+  "userId": "user_123",
+  "type": "totp",
+  "lastUsed": "2025-07-02T11:00:00Z",
+  "isActive": true
+}`,
+    },
+    tags: ["mfa", "security"],
+    popularity: 55,
+  },
+  {
+    id: "auth-logs-sql",
+    name: "Auth Event Log",
+    description: "Audit login/logout events with IP and outcome.",
+    category: "authentication",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE authentication_logs (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  event VARCHAR(64),
+  outcome VARCHAR(32),
+  ip_address VARCHAR(45),
+  occurred_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    schemas: {
+      sql: `
+CREATE TABLE authentication_logs (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  event VARCHAR(64),
+  outcome VARCHAR(32),
+  ip_address VARCHAR(45),
+  occurred_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `{
+  "eventId": "evt_001",
+  "userId": "user_123",
+  "event": "login",
+  "outcome": "success",
+  "ipAddress": "198.51.100.10",
+  "occurredAt": "2025-07-02T10:00:00Z"
+}`,
+    },
+    tags: ["audit", "security"],
+    popularity: 63,
+  },
+  {
+    id: "auth-reset-nosql",
+    name: "Reset Tokens",
+    description: "Temporary tokens for password reset/verification flows.",
+    category: "authentication",
+    schemaType: "nosql",
+    schema: `
+{
+  "resetId": "reset_098",
+  "userId": "user_123",
+  "token": "abc123",
+  "expiresAt": "2025-07-02T13:00:00Z"
+}`,
+    schemas: {
+      sql: `
+CREATE TABLE password_resets (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  token TEXT,
+  expires_at TIMESTAMPTZ,
+  used BOOLEAN DEFAULT FALSE
+);`,
+      nosql: `
+{
+  "resetId": "reset_098",
+  "userId": "user_123",
+  "token": "abc123",
+  "expiresAt": "2025-07-02T13:00:00Z"
+}`,
+    },
+    tags: ["verification"],
+    popularity: 48,
+  },
+  {
+    id: "auth-policies-sql",
+    name: "Security Policies",
+    description: "Define password/min-height/lockout rules by role.",
+    category: "authentication",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE security_policies (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  min_length INT,
+  requires_symbols BOOLEAN,
+  lockout_threshold INT
+);`,
+    schemas: {
+      sql: `
+CREATE TABLE security_policies (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  min_length INT,
+  requires_symbols BOOLEAN,
+  lockout_threshold INT
+);`,
+      nosql: `{
+  "policyId": "policy_01",
+  "name": "Default",
+  "rules": {
+    "minLength": 12,
+    "requiresSymbols": true,
+    "lockoutThreshold": 5
+  }
+}`,
+    },
+    tags: ["policy", "security"],
+    popularity: 46,
+  },
+
+  // profiles
+  {
+    id: "profiles-base-sql",
+    name: "Profile Base",
+    description: "Core profile information for all users.",
+    category: "profiles",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE profiles (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  display_name TEXT,
+  bio TEXT,
+  locale TEXT,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    schemas: {
+      sql: `
+CREATE TABLE profiles (
+  id UUID PRIMARY KEY,
+  user_id UUID REFERENCES users(id),
+  display_name TEXT,
+  bio TEXT,
+  locale TEXT,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `{
+  "profileId": "profile_123",
+  "userId": "user_123",
+  "displayName": "Lena",
+  "bio": "Developer",
+  "locale": "en-US",
+  "createdAt": "2025-07-01T10:00:00Z"
+}`,
+    },
+    tags: ["ui", "profiles"],
+    popularity: 67,
+  },
+  {
+    id: "profiles-meta-nosql",
+    name: "Profile Metadata",
+    description: "Persist preferences, badges, and saved items.",
+    category: "profiles",
+    schemaType: "nosql",
+    schema: `
+{
+  "userId": "user_123",
+  "badges": ["beta_tester"],
+  "preferences": {
+    "view": "compact",
+    "notifications": true
+  }
+}`,
+    schemas: {
+      sql: `
+CREATE TABLE profile_metadata (
+  profile_id UUID PRIMARY KEY,
+  badges TEXT[],
+  preferences JSONB
+);`,
+      nosql: `{
+  "userId": "user_123",
+  "badges": ["beta_tester"],
+  "preferences": {
+    "view": "compact",
+    "notifications": true
+  }
+}`,
+    },
+    tags: ["preferences"],
+    popularity: 62,
+  },
+  {
+    id: "profiles-connections-sql",
+    name: "Connections Graph",
+    description: "Store follows/friends relationships with metadata.",
+    category: "profiles",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE profile_connections (
+  id SERIAL PRIMARY KEY,
+  profile_a UUID,
+  profile_b UUID,
+  relation_type VARCHAR(32),
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["network"],
+    popularity: 58,
+    schemas: {
+      sql: `
+CREATE TABLE profile_connections (
+  id SERIAL PRIMARY KEY,
+  profile_a UUID,
+  profile_b UUID,
+  relation_type VARCHAR(32),
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `{
+  "connectionId": "conn_123",
+  "profiles": ["profile_a", "profile_b"],
+  "relationType": "follows",
+  "createdAt": "2025-07-02T12:15:00Z"
+}`,
+    },
+  },
+  {
+    id: "profiles-avatars-sql",
+    name: "Avatar Metadata",
+    description: "Manage profile avatars across variants and alt text.",
+    category: "profiles",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE profile_avatars (
+  id UUID PRIMARY KEY,
+  profile_id UUID REFERENCES profiles(id),
+  url TEXT,
+  variant VARCHAR(32),
+  alt_text TEXT
+);`,
+    tags: ["media"],
+    popularity: 52,
+    schemas: {
+      sql: `
+CREATE TABLE profile_avatars (
+  id UUID PRIMARY KEY,
+  profile_id UUID REFERENCES profiles(id),
+  url TEXT,
+  variant VARCHAR(32),
+  alt_text TEXT
+);`,
+      nosql: `{
+  "avatarId": "avatar_123",
+  "profileId": "profile_123",
+  "url": "https://cdn.example/avatar.png",
+  "variant": "default",
+  "altText": "Profile picture"
+}`,
+    },
+  },
+  {
+    id: "profiles-preferences-nosql",
+    name: "Profile Preferences",
+    description: "JSON preferences for UI layout, timezone, and locale.",
+    category: "profiles",
+    schemaType: "nosql",
+    schema: `
+{
+  "userId": "user_123",
+  "preferences": {
+    "theme": "dark",
+    "timezone": "America/New_York"
+  }
+}`,
+    tags: ["preferences"],
+    popularity: 44,
+    schemas: {
+      sql: `
+CREATE TABLE profile_preferences (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  preferences JSONB
+);`,
+      nosql: `
+{
+  "userId": "user_123",
+  "preferences": {
+    "theme": "dark",
+    "timezone": "America/New_York"
+  }
+}`,
+    },
+  },
+  {
+    id: "profiles-activity-nosql",
+    name: "Activity Timeline",
+    description: "Capture recent profile actions with timestamps.",
+    category: "profiles",
+    schemaType: "nosql",
+    schema: `
+{
+  "userId": "user_123",
+  "activities": [
+    { "event": "login", "ts": "2025-07-02T13:00:00Z" }
+  ]
+}`,
+    tags: ["audit"],
+    popularity: 49,
+    schemas: {
+      sql: `
+CREATE TABLE profile_activities (
+  id UUID PRIMARY KEY,
+  profile_id UUID,
+  event VARCHAR(64),
+  timestamp TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "userId": "user_123",
+  "activities": [
+    { "event": "login", "ts": "2025-07-02T13:00:00Z" }
+  ]
+}`,
+    },
+  },
+
+  // settings
+  {
+    id: "settings-defaults-nosql",
+    name: "Workspace Preferences",
+    description: "Document workspace defaults and toggle states.",
+    category: "settings",
+    schemaType: "nosql",
+    schema: `
+{
+  "workspaceId": "ws_001",
+  "defaults": {
+    "role": "Member",
+    "language": "en-US"
+  },
+  "flags": {
+    "beta": true
+  }
+}`,
+    tags: ["workspace", "defaults"],
+    popularity: 61,
+    schemas: {
+      sql: `
+CREATE TABLE workspace_preferences (
+  id UUID PRIMARY KEY,
+  workspace_id UUID,
+  defaults JSONB,
+  flags JSONB
+);`,
+      nosql: `
+{
+  "workspaceId": "ws_001",
+  "defaults": {
+    "role": "Member",
+    "language": "en-US"
+  },
+  "flags": {
+    "beta": true
+  }
+}`,
+    },
+  },
+  {
+    id: "settings-permissions-sql",
+    name: "Role Permission Matrix",
+    description: "Map roles to feature flags and capabilities.",
+    category: "settings",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE role_permissions (
+  id UUID PRIMARY KEY,
+  role VARCHAR(64),
+  permission_key TEXT,
+  is_enabled BOOLEAN DEFAULT TRUE
+);`,
+    tags: ["authorization"],
+    popularity: 53,
+    schemas: {
+      sql: `
+CREATE TABLE role_permissions (
+  id UUID PRIMARY KEY,
+  role VARCHAR(64),
+  permission_key TEXT,
+  is_enabled BOOLEAN DEFAULT TRUE
+);`,
+      nosql: `{
+  "permissionId": "perm_01",
+  "role": "admin",
+  "permissionKey": "generate",
+  "isEnabled": true
+}`,
+    },
+  },
+  {
+    id: "settings-integrations-sql",
+    name: "Integration Keys",
+    description: "Store external service credentials per user.",
+    category: "settings",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE integration_settings (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  service_name TEXT,
+  credentials JSONB,
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["api", "integrations"],
+    popularity: 47,
+    schemas: {
+      sql: `
+CREATE TABLE integration_settings (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  service_name TEXT,
+  credentials JSONB,
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "integrationId": "int_123",
+  "userId": "user_123",
+  "serviceName": "Stripe",
+  "credentials": { "apiKey": "sk_live" },
+  "updatedAt": "2025-07-02T14:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "settings-audit-nosql",
+    name: "Settings Audit Trail",
+    description: "Track who changed key configuration fields.",
+    category: "settings",
+    schemaType: "nosql",
+    schema: `
+{
+  "changeId": "chg_202",
+  "changedBy": "admin",
+  "timestamp": "2025-07-02T14:00:00Z",
+  "details": [
+    { "field": "theme", "from": "light", "to": "dark" }
+  ]
+}`,
+    tags: ["audit"],
+    popularity: 43,
+    schemas: {
+      sql: `
+CREATE TABLE settings_audit (
+  id UUID PRIMARY KEY,
+  change_id TEXT,
+  changed_by TEXT,
+  details JSONB,
+  timestamp TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "changeId": "chg_202",
+  "changedBy": "admin",
+  "timestamp": "2025-07-02T14:00:00Z",
+  "details": [
+    { "field": "theme", "from": "light", "to": "dark" }
+  ]
+}`,
+    },
+  },
+  {
+    id: "settings-workflows-nosql",
+    name: "Workflow Settings",
+    description: "Define automation workflows tied to settings.",
+    category: "settings",
+    schemaType: "nosql",
+    schema: `
+{
+  "workflowId": "wf_notify",
+  "triggers": ["user.signup"],
+  "actions": ["notify_team"]
+}`,
+    tags: ["automation"],
+    popularity: 41,
+    schemas: {
+      sql: `
+CREATE TABLE workflow_settings (
+  id UUID PRIMARY KEY,
+  workflow_id TEXT,
+  triggers TEXT[],
+  actions TEXT[]
+);`,
+      nosql: `
+{
+  "workflowId": "wf_notify",
+  "triggers": ["user.signup"],
+  "actions": ["notify_team"]
+}`,
+    },
+  },
+  {
+    id: "settings-branding-nosql",
+    name: "Branding Tokens",
+    description: "Store company colors/logos across themes.",
+    category: "settings",
+    schemaType: "nosql",
+    schema: `
+{
+  "theme": "corporate",
+  "colors": {
+    "primary": "#5b21b6",
+    "accent": "#38bdf8"
+  }
+}`,
+    tags: ["branding"],
+    popularity: 39,
+    schemas: {
+      sql: `
+CREATE TABLE branding_tokens (
+  id UUID PRIMARY KEY,
+  theme VARCHAR(64),
+  colors JSONB
+);`,
+      nosql: `
+{
+  "theme": "corporate",
+  "colors": {
+    "primary": "#5b21b6",
+    "accent": "#38bdf8"
+  }
+}`,
+    },
+  },
+
+  // email
+  {
+    id: "email-outbox-sql",
+    name: "Email Outbox",
+    description: "Queue transactional emails with retry state.",
+    category: "email",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE email_outbox (
+  id UUID PRIMARY KEY,
+  to_address VARCHAR(255),
+  subject TEXT,
+  body TEXT,
+  status VARCHAR(16) DEFAULT 'pending',
+  scheduled_at TIMESTAMPTZ
+);`,
+    tags: ["transactional"],
+    popularity: 69,
+  schemas: {
+    sql: `
+CREATE TABLE email_outbox (
+  id UUID PRIMARY KEY,
+  to_address VARCHAR(255),
+  subject TEXT,
+  body TEXT,
+  status VARCHAR(16) DEFAULT 'pending',
+  scheduled_at TIMESTAMPTZ
+);`,
+    nosql: `
+{
+  "queueId": "email_001",
+  "to": "user@example.com",
+  "subject": "Welcome",
+  "status": "pending",
+  "scheduledAt": "2025-07-02T12:00:00Z"
+}`,
+  },
+  },
+  {
+    id: "email-templates-nosql",
+    name: "Email Templates Store",
+    description: "Manage subject/body combos with versioning.",
+    category: "email",
+    schemaType: "nosql",
+    schema: `
+{
+  "templateId": "welcome_v2",
+  "subject": "Welcome to MockRG",
+  "body": "<p>Hi {{name}}, welcome!</p>",
+  "channels": ["email"],
+  "version": 2
+}`,
+    tags: ["marketing"],
+    popularity: 73,
+  schemas: {
+    sql: `
+CREATE TABLE email_templates (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  subject TEXT,
+  body TEXT,
+  channels TEXT[]
+);`,
+    nosql: `
+{
+  "templateId": "welcome_v2",
+  "subject": "Welcome to MockRG",
+  "body": "<p>Hi {{name}}, welcome!</p>",
+  "channels": ["email"],
+  "version": 2
+}`,
+  },
+  },
+  {
+    id: "email-digest-sql",
+    name: "Digest Rules",
+    description: "Schedule cadence/filters for digests.",
+    category: "email",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE digest_rules (
+  id UUID PRIMARY KEY,
+  cadence VARCHAR(32),
+  filter JSONB,
+  last_sent TIMESTAMPTZ
+);`,
+    tags: ["automation"],
+    popularity: 42,
+  schemas: {
+    sql: `
+CREATE TABLE digest_rules (
+  id UUID PRIMARY KEY,
+  cadence VARCHAR(32),
+  filter JSONB,
+  last_sent TIMESTAMPTZ
+);`,
+    nosql: `
+{
+  "digestId": "digest_001",
+  "cadence": "weekly",
+  "recipients": ["team@example.com"]
+}`,
+  },
+  },
+  {
+    id: "email-verification-sql",
+    name: "Verification Tokens",
+    description: "Keep track of email verification attempts.",
+    category: "email",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE email_verifications (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  token VARCHAR(255),
+  expires_at TIMESTAMPTZ,
+  used BOOLEAN DEFAULT FALSE
+);`,
+    tags: ["security"],
+    popularity: 57,
+  schemas: {
+    sql: `
+CREATE TABLE email_verifications (
+  id UUID PRIMARY KEY,
+  user_id UUID,
+  token VARCHAR(255),
+  expires_at TIMESTAMPTZ,
+  used BOOLEAN DEFAULT FALSE
+);`,
+    nosql: `
+{
+  "verificationId": "ver_abc",
+  "userId": "user_456",
+  "token": "abc123",
+  "expiresAt": "2025-07-02T13:00:00Z",
+  "used": false
+}`,
+  },
+  },
+  {
+    id: "email-events-sql",
+    name: "Email Event Log",
+    description: "Record each email send/delivery/failure event.",
+    category: "email",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE email_events (
+  id UUID PRIMARY KEY,
+  event_type VARCHAR(64),
+  metadata JSONB,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["audit"],
+    popularity: 44,
+  schemas: {
+    sql: `
+CREATE TABLE email_events (
+  id UUID PRIMARY KEY,
+  event_type VARCHAR(64),
+  metadata JSONB,
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    nosql: `
+{
+  "eventId": "evt_123",
+  "eventType": "sent",
+  "metadata": {},
+  "createdAt": "2025-07-02T09:30:00Z"
+}`,
+  },
+  },
+  {
+    id: "email-bounces-sql",
+    name: "Bounce Tracking",
+    description: "Capture bounce codes and retry counts.",
+    category: "email",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE email_bounces (
+  id UUID PRIMARY KEY,
+  recipient VARCHAR(255),
+  reason TEXT,
+  last_attempt TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["deliverability"],
+    popularity: 49,
+  schemas: {
+    sql: `
+CREATE TABLE email_bounces (
+  id UUID PRIMARY KEY,
+  recipient VARCHAR(255),
+  reason TEXT,
+  last_attempt TIMESTAMPTZ DEFAULT NOW()
+);`,
+    nosql: `
+{
+  "bounceId": "bounce_01",
+  "recipient": "user@example.com",
+  "reason": "550 5.1.1",
+  "lastAttempt": "2025-07-02T09:45:00Z"
+}`,
+  },
+  },
+
+  // messages
+  {
+    id: "messages-threads-sql",
+    name: "Message Threads",
+    description: "Store conversation threads and participants.",
+    category: "messages",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE threads (
+  id UUID PRIMARY KEY,
+  title TEXT,
+  metadata JSONB
+);
+
+CREATE TABLE messages (
+  id UUID PRIMARY KEY,
+  thread_id UUID REFERENCES threads(id),
+  sender_id UUID,
+  content TEXT,
+  sent_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["chat"],
+    popularity: 61,
+    schemas: {
+      sql: `
+CREATE TABLE threads (
+  id UUID PRIMARY KEY,
+  title TEXT,
+  metadata JSONB
+);
+
+CREATE TABLE messages (
+  id UUID PRIMARY KEY,
+  thread_id UUID REFERENCES threads(id),
+  sender_id UUID,
+  content TEXT,
+  sent_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "threadId": "thread_123",
+  "title": "Support Insights",
+  "messages": [
+    { "id": "msg_1", "senderId": "user_123", "content": "Hello" }
+  ]
+}`,
+    },
+  },
+  {
+    id: "messages-templates-nosql",
+    name: "Message Templates",
+    description: "Reusable templates for messaging flows.",
+    category: "messages",
+    schemaType: "nosql",
+    schema: `
+{
+  "templateId": "onboard_msg",
+  "content": "Welcome, {{name}}!",
+  "channels": ["sms", "push"]
+}`,
+    tags: ["automation"],
+    popularity: 65,
+    schemas: {
+      sql: `
+CREATE TABLE message_templates (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  content TEXT,
+  channels TEXT[]
+);`,
+      nosql: `
+{
+  "templateId": "onboard_msg",
+  "content": "Welcome, {{name}}!",
+  "channels": ["sms", "push"]
+}`,
+    },
+  },
+  {
+    id: "messages-delivery-log-sql",
+    name: "Delivery Log",
+    description: "When and how messages reached recipients.",
+    category: "messages",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE message_logs (
+  id UUID PRIMARY KEY,
+  message_id UUID,
+  channel VARCHAR(16),
+  status VARCHAR(16),
+  delivered_at TIMESTAMPTZ
+);`,
+    tags: ["observability"],
+    popularity: 52,
+    schemas: {
+      sql: `
+CREATE TABLE message_logs (
+  id UUID PRIMARY KEY,
+  message_id UUID,
+  channel VARCHAR(16),
+  status VARCHAR(16),
+  delivered_at TIMESTAMPTZ
+);`,
+      nosql: `
+{
+  "logId": "log_123",
+  "messageId": "msg_123",
+  "status": "delivered",
+  "deliveredAt": "2025-07-02T09:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "messages-subscriptions-sql",
+    name: "Subscriber Preferences",
+    description: "Track opt-in state per channel/contact.",
+    category: "messages",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE subscription_preferences (
+  id UUID PRIMARY KEY,
+  contact_id UUID,
+  channel VARCHAR(32),
+  status VARCHAR(8)
+);`,
+    tags: ["compliance"],
+    popularity: 47,
+    schemas: {
+      sql: `
+CREATE TABLE subscription_preferences (
+  id UUID PRIMARY KEY,
+  contact_id UUID,
+  channel VARCHAR(32),
+  status VARCHAR(8)
+);`,
+      nosql: `
+{
+  "preferenceId": "pref_001",
+  "contactId": "contact_123",
+  "channel": "sms",
+  "status": "opted_in"
+}`,
+    },
+  },
+  {
+    id: "messages-tags-nosql",
+    name: "Message Tags",
+    description: "Tag sent messages by topic or priority.",
+    category: "messages",
+    schemaType: "nosql",
+    schema: `
+{
+  "messageId": "msg_123",
+  "tags": ["support", "urgent"]
+}`,
+    tags: ["analytics"],
+    popularity: 44,
+    schemas: {
+      sql: `
+CREATE TABLE message_tags (
+  id UUID PRIMARY KEY,
+  message_id UUID,
+  tag VARCHAR(64)
+);`,
+      nosql: `
+{
+  "messageId": "msg_123",
+  "tags": ["support", "urgent"]
+}`,
+    },
+  },
+  {
+    id: "messages-playbook-nosql",
+    name: "Playbooks",
+    description: "Define ordered steps of multi-channel flows.",
+    category: "messages",
+    schemaType: "nosql",
+    schema: `
+{
+  "playbookId": "welcome",
+  "steps": [
+    { "channel": "email", "template": "welcome" }
+  ]
+}`,
+    tags: ["automation"],
+    popularity: 58,
+    schemas: {
+      sql: `
+CREATE TABLE message_playbooks (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  steps JSONB
+);`,
+      nosql: `
+{
+  "playbookId": "welcome",
+  "steps": [
+    { "channel": "email", "template": "welcome" }
+  ]
+}`,
+    },
+  },
+
+  // alerts
+  {
+    id: "alerts-main-sql",
+    name: "Alerts Table",
+    description: "Store alerts with severity, owner, and status.",
+    category: "alerts",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE alerts (
+  id UUID PRIMARY KEY,
+  source VARCHAR(128),
+  severity VARCHAR(32),
+  status VARCHAR(32) DEFAULT 'open',
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["ops"],
+    popularity: 57,
+  schemas: {
+    sql: `
+CREATE TABLE alerts (
+  id UUID PRIMARY KEY,
+  source VARCHAR(128),
+  severity VARCHAR(32),
+  status VARCHAR(32) DEFAULT 'open',
+  created_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    nosql: `{
+  "alertId": "alert_001",
+  "source": "database",
+  "severity": "high",
+  "status": "open",
+  "createdAt": "2025-07-02T08:00:00Z"
+}`,
+  },
+  },
+  {
+    id: "alerts-rules-nosql",
+    name: "Alert Rules",
+    description: "Define trigger rules and escalation steps.",
+    category: "alerts",
+    schemaType: "nosql",
+    schema: `
+{
+  "ruleId": "high_cpu",
+  "condition": { "metric": "cpu.percent", "threshold": 85 },
+  "actions": ["notify_slack", "email_team"]
+}`,
+    tags: ["automation"],
+    popularity: 50,
+  schemas: {
+    sql: `
+CREATE TABLE alert_rules (
+  id UUID PRIMARY KEY,
+  metric VARCHAR(64),
+  threshold INT,
+  actions TEXT[]
+);`,
+    nosql: `
+{
+  "ruleId": "high_cpu",
+  "condition": { "metric": "cpu.percent", "threshold": 85 },
+  "actions": ["notify_slack", "email_team"]
+}`,
+  },
+  },
+  {
+    id: "alerts-history-sql",
+    name: "Alert History",
+    description: "Timeline of acknowledgments and resolutions.",
+    category: "alerts",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE alert_history (
+  id UUID PRIMARY KEY,
+  alert_id UUID REFERENCES alerts(id),
+  action VARCHAR(64),
+  performed_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["audit"],
+    popularity: 46,
+  schemas: {
+    sql: `
+CREATE TABLE alert_history (
+  id UUID PRIMARY KEY,
+  alert_id UUID REFERENCES alerts(id),
+  action VARCHAR(64),
+  performed_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    nosql: `
+{
+  "historyId": "hist_01",
+  "alertId": "alert_001",
+  "action": "acknowledged",
+  "performedAt": "2025-07-02T08:05:00Z"
+}`,
+  },
+  },
+  {
+    id: "alerts-channels-sql",
+    name: "Alert Channels",
+    description: "Endpoint definitions for urgency channels.",
+    category: "alerts",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE alert_channels (
+  id UUID PRIMARY KEY,
+  name VARCHAR(64),
+  type VARCHAR(32),
+  config JSONB,
+  enabled BOOLEAN DEFAULT TRUE
+);`,
+    tags: ["integrations"],
+    popularity: 43,
+  schemas: {
+    sql: `
+CREATE TABLE alert_channels (
+  id UUID PRIMARY KEY,
+  name VARCHAR(64),
+  type VARCHAR(32),
+  config JSONB,
+  enabled BOOLEAN DEFAULT TRUE
+);`,
+    nosql: `
+{
+  "channelId": "ch_slack",
+  "name": "Slack Ops",
+  "type": "slack",
+  "config": { "webhookUrl": "https://hooks.slack.com/services/X" },
+  "enabled": true
+}`,
+  },
+  },
+  {
+    id: "alerts-escalation-nosql",
+    name: "Escalation Paths",
+    description: "Document the escalation path per severity.",
+    category: "alerts",
+    schemaType: "nosql",
+    schema: `
+{
+  "severity": "critical",
+  "path": [
+    { "role": "on_call", "delayMinutes": 5 },
+    { "role": "team_lead", "delayMinutes": 15 }
+  ]
+}`,
+    tags: ["ops"],
+    popularity: 41,
+  schemas: {
+    sql: `
+CREATE TABLE alert_escalations (
+  id UUID PRIMARY KEY,
+  severity VARCHAR(32),
+  roles TEXT[],
+  delay_minutes INT[]
+);`,
+    nosql: `
+{
+  "severity": "critical",
+  "path": [
+    { "role": "on_call", "delayMinutes": 5 },
+    { "role": "team_lead", "delayMinutes": 15 }
+  ]
+}`,
+  },
+  },
+  {
+    id: "alerts-quarantine-sql",
+    name: "Alert Quarantine",
+    description: "Temporarily mute noisy alerts for maintenance.",
+    category: "alerts",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE alert_quarantine (
+  id UUID PRIMARY KEY,
+  alert_id UUID REFERENCES alerts(id),
+  reason TEXT,
+  expires_at TIMESTAMPTZ
+);`,
+    tags: ["ops"],
+    popularity: 39,
+  schemas: {
+    sql: `
+CREATE TABLE alert_quarantine (
+  id UUID PRIMARY KEY,
+  alert_id UUID REFERENCES alerts(id),
+  reason TEXT,
+  expires_at TIMESTAMPTZ
+);`,
+    nosql: `
+{
+  "quarantineId": "q_001",
+  "alertId": "alert_002",
+  "reason": "maintenance",
+  "expiresAt": "2025-07-02T10:00:00Z"
+}`,
+  },
+  },
+
+  // system
+  {
+    id: "system-events-sql",
+    name: "System Events",
+    description: "Captured events for auditing and analytics.",
+    category: "system",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE system_events (
+  id UUID PRIMARY KEY,
+  source VARCHAR(128),
+  payload JSONB,
+  event_time TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["audit"],
+    popularity: 64,
+  },
+  {
+    id: "system-metrics-nosql",
+    name: "Metrics Snapshot",
+    description: "Time series for CPU, memory, and throughput.",
+    category: "system",
+    schemaType: "nosql",
+    schema: `
+{
+  "metricId": "response_time",
+  "values": [
+    { "timestamp": "2025-07-02T10:00:00Z", "value": 142 }
+  ]
+}`,
+    tags: ["monitoring"],
+    popularity: 58,
+  },
+  {
+    id: "system-config-sql",
+    name: "System Config",
+    description: "Tenant-specific configuration key/value pairs.",
+    category: "system",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE system_config (
+  id UUID PRIMARY KEY,
+  tenant_id UUID,
+  key TEXT,
+  value JSONB,
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["multi-tenant"],
+    popularity: 55,
+    schemas: {
+      sql: `
+CREATE TABLE system_config (
+  id UUID PRIMARY KEY,
+  tenant_id UUID,
+  key TEXT,
+  value JSONB,
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "configId": "cfg_001",
+  "tenantId": "tenant_01",
+  "key": "maxUsers",
+  "value": { "limit": 1000 },
+  "updatedAt": "2025-07-02T10:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "system-incidents-nosql",
+    name: "Incident Records",
+    description: "Document incidents, owners, and statuses.",
+    category: "system",
+    schemaType: "nosql",
+    schema: `
+{
+  "incidentId": "inc_123",
+  "summary": "Database failover",
+  "status": "resolved",
+  "owner": "on-call"
+}`,
+    tags: ["ops"],
+    popularity: 50,
+    schemas: {
+      sql: `
+CREATE TABLE system_incidents (
+  id UUID PRIMARY KEY,
+  summary TEXT,
+  status VARCHAR(32),
+  owner VARCHAR(64),
+  updated_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "incidentId": "inc_123",
+  "summary": "Database failover",
+  "status": "resolved",
+  "owner": "on-call"
+}`,
+    },
+  },
+  {
+    id: "system-maintenance-nosql",
+    name: "Maintenance Windows",
+    description: "Capture upcoming maintenance for services.",
+    category: "system",
+    schemaType: "nosql",
+    schema: `
+{
+  "maintenanceId": "mnt_abc",
+  "systems": ["api", "db"],
+  "startsAt": "2025-07-05T02:00:00Z",
+  "durationMinutes": 45
+}`,
+    tags: ["ops"],
+    popularity: 46,
+    schemas: {
+      sql: `
+CREATE TABLE maintenance_windows (
+  id UUID PRIMARY KEY,
+  title TEXT,
+  systems TEXT[],
+  starts_at TIMESTAMPTZ,
+  duration_minutes INT
+);`,
+      nosql: `
+{
+  "maintenanceId": "mnt_abc",
+  "systems": ["api", "db"],
+  "startsAt": "2025-07-05T02:00:00Z",
+  "durationMinutes": 45
+}`,
+    },
+  },
+  {
+    id: "system-lookup-sql",
+    name: "Lookup Helpers",
+    description: "Common dimension tables for statuses or severities.",
+    category: "system",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE statuses (
+  id SERIAL PRIMARY KEY,
+  code VARCHAR(32),
+  label TEXT
+);
+
+CREATE TABLE priorities (
+  id SERIAL PRIMARY KEY,
+  name TEXT,
+  level INT
+);`,
+    tags: ["dimension"],
+    popularity: 36,
+    schemas: {
+      sql: `
+CREATE TABLE statuses (
+  id SERIAL PRIMARY KEY,
+  code VARCHAR(32),
+  label TEXT
+);
+
+CREATE TABLE priorities (
+  id SERIAL PRIMARY KEY,
+  name TEXT,
+  level INT
+);`,
+      nosql: `
+{
+  "lookupId": "lookup_1",
+  "statuses": [
+    { "code": "OPEN", "label": "Open" }
+  ],
+  "priorities": [
+    { "name": "High", "level": 1 }
+  ]
+}`,
+    },
+  },
+
+  // other
+  {
+    id: "other-analytics-sql",
+    name: "Analytics Snapshot",
+    description: "Store analytics tables for ad-hoc reporting.",
+    category: "other",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE analytics_snapshots (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  payload JSONB,
+  recorded_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+    tags: ["analytics"],
+    popularity: 33,
+    schemas: {
+      sql: `
+CREATE TABLE analytics_snapshots (
+  id UUID PRIMARY KEY,
+  name TEXT,
+  payload JSONB,
+  recorded_at TIMESTAMPTZ DEFAULT NOW()
+);`,
+      nosql: `
+{
+  "snapshotId": "snap_001",
+  "name": "Ad-hoc",
+  "payload": {},
+  "recordedAt": "2025-07-02T09:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "other-data-lake-nosql",
+    name: "Data Lake Document",
+    description: "Generic JSON container for rich data capture.",
+    category: "other",
+    schemaType: "nosql",
+    schema: `
+{
+  "source": "external",
+  "payload": {},
+  "receivedAt": "2025-07-02T09:00:00Z"
+}`,
+    tags: ["ingest"],
+    popularity: 28,
+    schemas: {
+      sql: `
+CREATE TABLE data_lake (
+  id UUID PRIMARY KEY,
+  source TEXT,
+  payload JSONB,
+  received_at TIMESTAMPTZ
+);`,
+      nosql: `
+{
+  "source": "external",
+  "payload": {},
+  "receivedAt": "2025-07-02T09:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "other-search-index-sql",
+    name: "Search Index",
+    description: "Pre-processed documents for text search.",
+    category: "other",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE search_index (
+  id UUID PRIMARY KEY,
+  document TEXT,
+  keywords TEXT[],
+  rank FLOAT
+);`,
+    tags: ["search"],
+    popularity: 26,
+    schemas: {
+      sql: `
+CREATE TABLE search_index (
+  id UUID PRIMARY KEY,
+  document TEXT,
+  keywords TEXT[],
+  rank FLOAT
+);`,
+      nosql: `
+{
+  "documentId": "doc_001",
+  "text": "Sample doc",
+  "keywords": ["mock", "data"],
+  "rank": 0.95
+}`,
+    },
+  },
+  {
+    id: "other-rate-limit-sql",
+    name: "Rate Limit Counters",
+    description: "Track counts per bucket for throttles.",
+    category: "other",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE rate_limits (
+  id UUID PRIMARY KEY,
+  bucket TEXT,
+  remaining INT,
+  reset_at TIMESTAMPTZ
+);`,
+    tags: ["throttling"],
+    popularity: 29,
+    schemas: {
+      sql: `
+CREATE TABLE rate_limits (
+  id UUID PRIMARY KEY,
+  bucket TEXT,
+  remaining INT,
+  reset_at TIMESTAMPTZ
+);`,
+      nosql: `
+{
+  "bucket": "login_ipv4",
+  "remaining": 9,
+  "resetAt": "2025-07-02T10:00:00Z"
+}`,
+    },
+  },
+  {
+    id: "other-tags-nosql",
+    name: "Tags Directory",
+    description: "Map tags to descriptions and weight.",
+    category: "other",
+    schemaType: "nosql",
+    schema: `
+{
+  "tagId": "tag_mock",
+  "name": "Mock",
+  "weight": 0.8
+}`,
+    tags: ["taxonomy"],
+    popularity: 24,
+    schemas: {
+      sql: `
+CREATE TABLE taxonomy_tags (
+  id UUID PRIMARY KEY,
+  tag_id TEXT,
+  name TEXT,
+  weight NUMERIC
+);`,
+      nosql: `
+{
+  "tagId": "tag_mock",
+  "name": "Mock",
+  "weight": 0.8
+}`,
+    },
+  },
+  {
+    id: "other-geo-sql",
+    name: "Geo Points",
+    description: "Store geospatial points for mapping.",
+    category: "other",
+    schemaType: "sql",
+    schema: `
+CREATE TABLE geo_points (
+  id UUID PRIMARY KEY,
+  label TEXT,
+  coordinates geography(POINT)
+);`,
+    tags: ["geo"],
+    popularity: 31,
+    schemas: {
+      sql: `
+CREATE TABLE geo_points (
+  id UUID PRIMARY KEY,
+  label TEXT,
+  coordinates geography(POINT)
+);`,
+      nosql: `
+{
+  "pointId": "pt_abc",
+  "label": "HQ",
+  "latitude": 39.95,
+  "longitude": -75.16
+}`,
+    },
+  },
+]
+
+export interface TemplateSearchOptions {
+  query?: string
+  category?: SchemaTemplateCategory
+  tags?: string[]
+  schemaType?: "sql" | "nosql"
+}
+
+const fuzzyMatch = (value: string | undefined, needle: string) =>
+  !!value && value.toLowerCase().includes(needle.toLowerCase())
+
+export function getTemplates(): SchemaTemplate[] {
+  return schemaTemplates
+}
+
+export function getTemplateById(id: string): SchemaTemplate | undefined {
+  return schemaTemplates.find((template) => template.id === id)
+}
+
+export function searchTemplates(options: TemplateSearchOptions = {}): SchemaTemplate[] {
+  const { query, category, tags, schemaType } = options
+
+  return schemaTemplates.filter((template) => {
+    if (category && template.category !== category) {
+      return false
+    }
+
+    if (schemaType && template.schemaType !== schemaType) {
+      return false
+    }
+
+    if (tags && tags.length > 0) {
+      const matchesTags = tags.every((tag) =>
+        template.tags.some((candidate) => candidate.toLowerCase() === tag.toLowerCase())
+      )
+      if (!matchesTags) {
+        return false
+      }
+    }
+
+    if (query) {
+      const needle = query.trim().toLowerCase()
+      const matchesQuery =
+        fuzzyMatch(template.name, needle) ||
+        fuzzyMatch(template.description, needle) ||
+        fuzzyMatch(template.schema, needle)
+      if (!matchesQuery) {
+        return false
+      }
+    }
+
+    return true
+  })
+}
+
diff --git a/package-lock.json b/package-lock.json
index 30a0593..1a68af3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ai-mocker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ai-mocker",
-      "version": "0.1.0",
+      "version": "1.2.0",
       "dependencies": {
         "@auth/upstash-redis-adapter": "^2.9.0",
         "@hookform/resolvers": "^5.0.1",
@@ -30,11 +30,12 @@
         "clsx": "^2.1.1",
         "dotenv": "^16.5.0",
         "ioredis": "^5.6.1",
+        "jspdf": "^3.0.4",
         "lucide-react": "^0.487.0",
-        "next": "15.2.4",
-        "next-auth": "^4.24.11",
+        "next": "15.5.9",
+        "next-auth": "^4.24.13",
         "next-themes": "^0.4.6",
-        "nodemailer": "^6.10.0",
+        "nodemailer": "^7.0.11",
         "openai": "^4.91.1",
         "react": "^19.0.0",
         "react-ace": "^14.0.1",
@@ -103,9 +104,9 @@
       }
     },
     "node_modules/@auth/core": {
-      "version": "0.34.2",
-      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.34.2.tgz",
-      "integrity": "sha512-KywHKRgLiF3l7PLyL73fjLSIBe1YNcA6sMeew4yMP6cfCWGXZrkkXd32AjRi1hlJ9nvovUBGZHvbn+LijO6ZeQ==",
+      "version": "0.34.3",
+      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.34.3.tgz",
+      "integrity": "sha512-jMjY/S0doZnWYNV90x0jmU3B+UcrsfGYnukxYrRbj0CVvGI/MX3JbHsxSrx2d4mbnXaUsqJmAcDfoQWA6r0lOw==",
       "license": "ISC",
       "optional": true,
       "peer": true,
@@ -121,7 +122,7 @@
       "peerDependencies": {
         "@simplewebauthn/browser": "^9.0.1",
         "@simplewebauthn/server": "^9.0.2",
-        "nodemailer": "^6.8.0"
+        "nodemailer": "^7"
       },
       "peerDependenciesMeta": {
         "@simplewebauthn/browser": {
@@ -184,21 +185,21 @@
       }
     },
     "node_modules/@auth/upstash-redis-adapter": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/@auth/upstash-redis-adapter/-/upstash-redis-adapter-2.9.0.tgz",
-      "integrity": "sha512-j98y6Bya/fZATrv6kZ+iJsrLF9yM3ZSUhOS1ymSqUmulCChiQr1gdU1uqMd+58+MOSh8fCXqMgyly7d3A/+Q8g==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@auth/upstash-redis-adapter/-/upstash-redis-adapter-2.11.1.tgz",
+      "integrity": "sha512-ZG0MFlqlOoIbISHRj8KCh+/mykelWk0DvWNZTPAQrZZ3fV3u1TJWkEdUzHtJ8bc0TQxxY4zj18FOZhdqZw5i1g==",
       "license": "ISC",
       "dependencies": {
-        "@auth/core": "0.39.0"
+        "@auth/core": "0.41.1"
       },
       "peerDependencies": {
         "@upstash/redis": "^1.0.1"
       }
     },
     "node_modules/@auth/upstash-redis-adapter/node_modules/@auth/core": {
-      "version": "0.39.0",
-      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.39.0.tgz",
-      "integrity": "sha512-jusviw/sUSfAh6S/wjY5tRmJOq0Itd3ImF+c/b4HB9DfmfChtcfVJTNJeqCeExeCG8oh4PBKRsMQJsn2W6NhFQ==",
+      "version": "0.41.1",
+      "resolved": "https://registry.npmjs.org/@auth/core/-/core-0.41.1.tgz",
+      "integrity": "sha512-t9cJ2zNYAdWMacGRMT6+r4xr1uybIdmYa49calBPeTqwgAFPV/88ac9TEvCR85pvATiSPt8VaNf+Gt24JIT/uw==",
       "license": "ISC",
       "dependencies": {
         "@panva/hkdf": "^1.2.1",
@@ -210,7 +211,7 @@
       "peerDependencies": {
         "@simplewebauthn/browser": "^9.0.1",
         "@simplewebauthn/server": "^9.0.2",
-        "nodemailer": "^6.8.0"
+        "nodemailer": "^7.0.7"
       },
       "peerDependenciesMeta": {
         "@simplewebauthn/browser": {
@@ -225,18 +226,18 @@
       }
     },
     "node_modules/@auth/upstash-redis-adapter/node_modules/jose": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-6.0.10.tgz",
-      "integrity": "sha512-skIAxZqcMkOrSwjJvplIPYrlXGpxTPnro2/QWTDCxAdWQrSTV5/KqspMWmi5WAx5+ULswASJiZ0a+1B/Lxt9cw==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
     },
     "node_modules/@auth/upstash-redis-adapter/node_modules/oauth4webapi": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.5.0.tgz",
-      "integrity": "sha512-DF3mLWNuxPkxJkHmWxbSFz4aE5CjWOsm465VBfBdWzmzX4Mg3vF8icxK+iKqfdWrIumBJ2TaoNQWx+SQc2bsPQ==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.8.3.tgz",
+      "integrity": "sha512-pQ5BsX3QRTgnt5HxgHwgunIRaDXBdkT23tf8dfzmtTIL2LTpdmxgbpbBm0VgFWAIDlezQvQCTgnVIUmHupXHxw==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
@@ -743,13 +744,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -832,9 +830,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
-      "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.1.tgz",
+      "integrity": "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -1278,9 +1276,9 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
-      "integrity": "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz",
+      "integrity": "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1320,13 +1318,13 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
-      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -1335,19 +1333,22 @@
       }
     },
     "node_modules/@eslint/config-helpers": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.1.tgz",
-      "integrity": "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
       "dev": true,
       "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
-      "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1382,19 +1383,22 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.24.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.24.0.tgz",
-      "integrity": "sha512-uIY/y3z0uvOGX8cp1C2fiC4+ZmBhp6yZWkojtHL1YEMnRt1Y63HB9TM17proGEmeG7HeUY+UP36F0aknKYTpYA==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
+      "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -1402,32 +1406,19 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
-      "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.13.0",
+        "@eslint/core": "^0.17.0",
         "levn": "^0.4.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
-      "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@types/json-schema": "^7.0.15"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      }
-    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
@@ -1544,10 +1535,20 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
-      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
       "cpu": [
         "arm64"
       ],
@@ -1563,13 +1564,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
-      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
       "cpu": [
         "x64"
       ],
@@ -1585,13 +1586,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-darwin-x64": "1.0.4"
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-libvips-darwin-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
-      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
       "cpu": [
         "arm64"
       ],
@@ -1605,9 +1606,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-darwin-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
-      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
       "cpu": [
         "x64"
       ],
@@ -1621,9 +1622,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
-      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
       "cpu": [
         "arm"
       ],
@@ -1637,9 +1638,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
-      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
       "cpu": [
         "arm64"
       ],
@@ -1652,10 +1653,42 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-libvips-linux-s390x": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
-      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
       "cpu": [
         "s390x"
       ],
@@ -1669,9 +1702,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linux-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
-      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
       "cpu": [
         "x64"
       ],
@@ -1685,9 +1718,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
-      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
       "cpu": [
         "arm64"
       ],
@@ -1701,9 +1734,9 @@
       }
     },
     "node_modules/@img/sharp-libvips-linuxmusl-x64": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
-      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
       "cpu": [
         "x64"
       ],
@@ -1717,9 +1750,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
-      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
       "cpu": [
         "arm"
       ],
@@ -1735,13 +1768,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm": "1.0.5"
+        "@img/sharp-libvips-linux-arm": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
-      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
       "cpu": [
         "arm64"
       ],
@@ -1757,13 +1790,57 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-arm64": "1.0.4"
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
-      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
       "cpu": [
         "s390x"
       ],
@@ -1779,13 +1856,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-s390x": "1.0.4"
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
-      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
       "cpu": [
         "x64"
       ],
@@ -1801,13 +1878,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linux-x64": "1.0.4"
+        "@img/sharp-libvips-linux-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
-      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
       "cpu": [
         "arm64"
       ],
@@ -1823,13 +1900,13 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
-      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
       "cpu": [
         "x64"
       ],
@@ -1845,20 +1922,20 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
-      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
       "cpu": [
         "wasm32"
       ],
       "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.2.0"
+        "@emnapi/runtime": "^1.7.0"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -1867,10 +1944,29 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
-      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
       "cpu": [
         "ia32"
       ],
@@ -1887,9 +1983,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
-      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
       "cpu": [
         "x64"
       ],
@@ -1953,9 +2049,9 @@
       }
     },
     "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2491,9 +2587,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.4.tgz",
-      "integrity": "sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
+      "integrity": "sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -2507,9 +2603,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.4.tgz",
-      "integrity": "sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.7.tgz",
+      "integrity": "sha512-IZwtxCEpI91HVU/rAUOOobWSZv4P2DeTtNaCdHqLcTJU4wdNXgAySvKa/qJCgR5m6KI8UsKDXtO2B31jcaw1Yw==",
       "cpu": [
         "arm64"
       ],
@@ -2523,9 +2619,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.4.tgz",
-      "integrity": "sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.7.tgz",
+      "integrity": "sha512-UP6CaDBcqaCBuiq/gfCEJw7sPEoX1aIjZHnBWN9v9qYHQdMKvCKcAVs4OX1vIjeE+tC5EIuwDTVIoXpUes29lg==",
       "cpu": [
         "x64"
       ],
@@ -2539,9 +2635,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.4.tgz",
-      "integrity": "sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.7.tgz",
+      "integrity": "sha512-NCslw3GrNIw7OgmRBxHtdWFQYhexoUCq+0oS2ccjyYLtcn1SzGzeM54jpTFonIMUjNbHmpKpziXnpxhSWLcmBA==",
       "cpu": [
         "arm64"
       ],
@@ -2555,9 +2651,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.4.tgz",
-      "integrity": "sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.7.tgz",
+      "integrity": "sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==",
       "cpu": [
         "arm64"
       ],
@@ -2571,9 +2667,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.4.tgz",
-      "integrity": "sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.7.tgz",
+      "integrity": "sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==",
       "cpu": [
         "x64"
       ],
@@ -2587,9 +2683,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.4.tgz",
-      "integrity": "sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.7.tgz",
+      "integrity": "sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==",
       "cpu": [
         "x64"
       ],
@@ -2603,9 +2699,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.4.tgz",
-      "integrity": "sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.7.tgz",
+      "integrity": "sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==",
       "cpu": [
         "arm64"
       ],
@@ -2619,9 +2715,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.4.tgz",
-      "integrity": "sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ==",
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.7.tgz",
+      "integrity": "sha512-gMzgBX164I6DN+9/PGA+9dQiwmTkE4TloBNx8Kv9UiGARsr9Nba7IpcBRA1iTV9vwlYnrE3Uy6I7Aj6qLjQuqw==",
       "cpu": [
         "x64"
       ],
@@ -4028,12 +4124,6 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
-    "node_modules/@swc/counter": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
-      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -4651,6 +4741,19 @@
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
@@ -4685,6 +4788,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -4841,9 +4951,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5263,9 +5373,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -5793,10 +5903,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5880,17 +6000,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -5980,6 +6089,26 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6099,25 +6228,11 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -6130,20 +6245,9 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6179,6 +6283,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.47.0.tgz",
+      "integrity": "sha512-c3Q2VVkGAUyupsjRnaNX6u8Dq2vAdzm9iuPj5FW0fRxzlxgq9Q39MDq10IvmQSpLgHQNyQzQmOo6bgGHmH3NNg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/create-jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
@@ -6303,6 +6419,16 @@
       "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
       "license": "MIT"
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -6578,9 +6704,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
@@ -6664,6 +6790,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.1.tgz",
+      "integrity": "sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.5.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
@@ -7034,33 +7170,32 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.24.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.24.0.tgz",
-      "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==",
+      "version": "9.39.2",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
+      "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.20.0",
-        "@eslint/config-helpers": "^0.2.0",
-        "@eslint/core": "^0.12.0",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.24.0",
-        "@eslint/plugin-kit": "^0.2.7",
+        "@eslint/js": "9.39.2",
+        "@eslint/plugin-kit": "^0.4.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
-        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -7366,9 +7501,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
@@ -7383,9 +7518,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -7396,15 +7531,15 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -7583,6 +7718,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -7603,6 +7749,12 @@
         "bser": "2.1.1"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -7627,9 +7779,9 @@
       }
     },
     "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7717,14 +7869,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -8143,6 +8296,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
@@ -8305,6 +8472,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
     "node_modules/ioredis": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.6.1.tgz",
@@ -8347,13 +8520,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -9848,9 +10014,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -9997,6 +10163,23 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jspdf": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
+      "integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.2.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -10606,15 +10789,13 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.2.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.2.4.tgz",
-      "integrity": "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ==",
+      "version": "15.5.9",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.9.tgz",
+      "integrity": "sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.2.4",
-        "@swc/counter": "0.1.3",
+        "@next/env": "15.5.9",
         "@swc/helpers": "0.5.15",
-        "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -10626,19 +10807,19 @@
         "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.2.4",
-        "@next/swc-darwin-x64": "15.2.4",
-        "@next/swc-linux-arm64-gnu": "15.2.4",
-        "@next/swc-linux-arm64-musl": "15.2.4",
-        "@next/swc-linux-x64-gnu": "15.2.4",
-        "@next/swc-linux-x64-musl": "15.2.4",
-        "@next/swc-win32-arm64-msvc": "15.2.4",
-        "@next/swc-win32-x64-msvc": "15.2.4",
-        "sharp": "^0.33.5"
+        "@next/swc-darwin-arm64": "15.5.7",
+        "@next/swc-darwin-x64": "15.5.7",
+        "@next/swc-linux-arm64-gnu": "15.5.7",
+        "@next/swc-linux-arm64-musl": "15.5.7",
+        "@next/swc-linux-x64-gnu": "15.5.7",
+        "@next/swc-linux-x64-musl": "15.5.7",
+        "@next/swc-win32-arm64-msvc": "15.5.7",
+        "@next/swc-win32-x64-msvc": "15.5.7",
+        "sharp": "^0.34.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
-        "@playwright/test": "^1.41.2",
+        "@playwright/test": "^1.51.1",
         "babel-plugin-react-compiler": "*",
         "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
         "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
@@ -10660,9 +10841,9 @@
       }
     },
     "node_modules/next-auth": {
-      "version": "4.24.11",
-      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.11.tgz",
-      "integrity": "sha512-pCFXzIDQX7xmHFs4KVH4luCjaCbuPRtZ9oBUjUhOk84mZ9WVPf94n87TxYI4rSRf9HmfHEF8Yep3JrYDVOo3Cw==",
+      "version": "4.24.13",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.24.13.tgz",
+      "integrity": "sha512-sgObCfcfL7BzIK76SS5TnQtc3yo2Oifp/yIpfv6fMfeBOiBJkDWF3A2y9+yqnmJ4JKc2C+nMjSjmgDeTwgN1rQ==",
       "license": "ISC",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
@@ -10676,9 +10857,9 @@
         "uuid": "^8.3.2"
       },
       "peerDependencies": {
-        "@auth/core": "0.34.2",
-        "next": "^12.2.5 || ^13 || ^14 || ^15",
-        "nodemailer": "^6.6.5",
+        "@auth/core": "0.34.3",
+        "next": "^12.2.5 || ^13 || ^14 || ^15 || ^16",
+        "nodemailer": "^7.0.7",
         "react": "^17.0.2 || ^18 || ^19",
         "react-dom": "^17.0.2 || ^18 || ^19"
       },
@@ -10783,9 +10964,9 @@
       "license": "MIT"
     },
     "node_modules/nodemailer": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.0.tgz",
-      "integrity": "sha512-SQ3wZCExjeSatLE/HBaXS5vqUOQk6GtBdIIKxiFdmm01mOQZX/POJkO3SUX1wDiYcwUOJwT23scFSC9fY2H8IA==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-gnXhNRE0FNhD7wPSCGhdNh46Hs6nm+uTyg+Kq0cZukNQiYdnCsoQjodNP9BQVG9XrcK/v6/MgpAPBUFyzh9pvw==",
       "license": "MIT-0",
       "engines": {
         "node": ">=6.0.0"
@@ -11142,6 +11323,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11224,6 +11411,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -11492,6 +11686,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -11713,10 +11917,11 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
@@ -11841,6 +12046,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -11947,9 +12162,9 @@
       "license": "MIT"
     },
     "node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
       "devOptional": true,
       "license": "ISC",
       "bin": {
@@ -12015,16 +12230,16 @@
       }
     },
     "node_modules/sharp": {
-      "version": "0.33.5",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
-      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "optional": true,
       "dependencies": {
-        "color": "^4.2.3",
-        "detect-libc": "^2.0.3",
-        "semver": "^7.6.3"
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
@@ -12033,25 +12248,30 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.33.5",
-        "@img/sharp-darwin-x64": "0.33.5",
-        "@img/sharp-libvips-darwin-arm64": "1.0.4",
-        "@img/sharp-libvips-darwin-x64": "1.0.4",
-        "@img/sharp-libvips-linux-arm": "1.0.5",
-        "@img/sharp-libvips-linux-arm64": "1.0.4",
-        "@img/sharp-libvips-linux-s390x": "1.0.4",
-        "@img/sharp-libvips-linux-x64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
-        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
-        "@img/sharp-linux-arm": "0.33.5",
-        "@img/sharp-linux-arm64": "0.33.5",
-        "@img/sharp-linux-s390x": "0.33.5",
-        "@img/sharp-linux-x64": "0.33.5",
-        "@img/sharp-linuxmusl-arm64": "0.33.5",
-        "@img/sharp-linuxmusl-x64": "0.33.5",
-        "@img/sharp-wasm32": "0.33.5",
-        "@img/sharp-win32-ia32": "0.33.5",
-        "@img/sharp-win32-x64": "0.33.5"
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
       }
     },
     "node_modules/shebang-command": {
@@ -12160,16 +12380,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -12264,6 +12474,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/standard-as-callback": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -12276,14 +12496,6 @@
       "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
       "license": "MIT"
     },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -12541,6 +12753,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12590,6 +12812,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
@@ -13099,6 +13331,16 @@
         }
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index 6a44de5..cb981d3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ai-mocker",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -38,11 +38,12 @@
     "clsx": "^2.1.1",
     "dotenv": "^16.5.0",
     "ioredis": "^5.6.1",
+    "jspdf": "^3.0.4",
     "lucide-react": "^0.487.0",
-    "next": "15.2.4",
-    "next-auth": "^4.24.11",
+    "next": "15.5.9",
+    "next-auth": "^4.24.13",
     "next-themes": "^0.4.6",
-    "nodemailer": "^6.10.0",
+    "nodemailer": "^7.0.11",
     "openai": "^4.91.1",
     "react": "^19.0.0",
     "react-ace": "^14.0.1",
diff --git a/types/template.ts b/types/template.ts
new file mode 100644
index 0000000..4ed7355
--- /dev/null
+++ b/types/template.ts
@@ -0,0 +1,32 @@
+export type SchemaTemplateCategory =
+  | "authentication"
+  | "profiles"
+  | "settings"
+  | "email"
+  | "messages"
+  | "alerts"
+  | "system"
+  | "other"
+
+export interface SchemaTemplate {
+  id: string
+  name: string
+  description: string
+  category: SchemaTemplateCategory
+  schema: string
+  schemaType: "sql" | "nosql"
+  schemas?: {
+    sql?: string
+    nosql?: string
+  }
+  examples?: string
+  tags: string[]
+  popularity: number
+}
+
+export interface TemplateSelection {
+  template: SchemaTemplate
+  schema: string
+  schemaType: "sql" | "nosql"
+}
+

From 3350550c8e276607e2a71b52681856ebc9976db2 Mon Sep 17 00:00:00 2001
From: George Price <38691495+GeorgeBPrice@users.noreply.github.com>
Date: Sat, 20 Dec 2025 12:57:09 +1000
Subject: [PATCH 2/2] Added several more Jest tests

---
 __tests__/components/ui/Button.test.tsx   |  4 +-
 __tests__/components/ui/alert.test.tsx    | 46 +++++++++++++
 __tests__/components/ui/card.test.tsx     | 81 +++++++++++++++++++++++
 __tests__/components/ui/label.test.tsx    | 41 ++++++++++++
 __tests__/components/ui/skeleton.test.tsx | 24 +++++++
 __tests__/components/ui/toast.test.tsx    | 18 +++--
 6 files changed, 202 insertions(+), 12 deletions(-)
 create mode 100644 __tests__/components/ui/alert.test.tsx
 create mode 100644 __tests__/components/ui/card.test.tsx
 create mode 100644 __tests__/components/ui/label.test.tsx
 create mode 100644 __tests__/components/ui/skeleton.test.tsx

diff --git a/__tests__/components/ui/Button.test.tsx b/__tests__/components/ui/Button.test.tsx
index a203d10..069e13e 100644
--- a/__tests__/components/ui/Button.test.tsx
+++ b/__tests__/components/ui/Button.test.tsx
@@ -51,8 +51,8 @@ describe('Button Component', () => {
     expect(button).toBeInTheDocument();
     
     // Default variant classes should be applied
-    expect(button).toHaveClass('bg-primary');
-    expect(button).toHaveClass('text-primary-foreground');
+    expect(button).toHaveClass('cta-button');
+    expect(button).toHaveClass('text-white');
     
     // Default size classes should be applied
     expect(button).toHaveClass('h-9');
diff --git a/__tests__/components/ui/alert.test.tsx b/__tests__/components/ui/alert.test.tsx
new file mode 100644
index 0000000..ddbed8d
--- /dev/null
+++ b/__tests__/components/ui/alert.test.tsx
@@ -0,0 +1,46 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+jest.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}))
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert"
+
+describe("Alert components", () => {
+  it("renders default alert with expected classes", () => {
+    render(
+      <Alert data-testid="alert-default">
+        <AlertTitle>Title</AlertTitle>
+        <AlertDescription>Description</AlertDescription>
+      </Alert>
+    )
+
+    const alert = screen.getByTestId("alert-default")
+    expect(alert).toHaveRole("alert")
+    expect(alert).toHaveClass("bg-background", "text-foreground")
+    expect(screen.getByText("Title")).toHaveClass("font-medium")
+    expect(screen.getByText("Description")).toHaveClass("text-sm")
+  })
+
+  it("applies destructive variant classes", () => {
+    render(
+      <Alert variant="destructive" data-testid="alert-destructive">
+        Destructive
+      </Alert>
+    )
+
+    const alert = screen.getByTestId("alert-destructive")
+    expect(alert).toHaveClass("border-destructive/50", "text-destructive")
+  })
+})
+
diff --git a/__tests__/components/ui/card.test.tsx b/__tests__/components/ui/card.test.tsx
new file mode 100644
index 0000000..b22c36c
--- /dev/null
+++ b/__tests__/components/ui/card.test.tsx
@@ -0,0 +1,81 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+jest.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}))
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+describe("Card components", () => {
+  it("renders the Card wrapper and inner surface with provided props", () => {
+    render(
+      <Card data-testid="card-inner" className="extra-class">
+        card body
+      </Card>
+    )
+
+    const inner = screen.getByTestId("card-inner")
+    expect(inner).toBeInTheDocument()
+    expect(inner).toHaveClass("min-h-full", "extra-class")
+
+    const outer = inner.closest("[data-slot='card']")
+    expect(outer).toBeInTheDocument()
+    expect(outer).toHaveStyle(
+      "background-image: linear-gradient(135deg, var(--card-gradient-start), var(--card-gradient-middle), var(--card-gradient-end))"
+    )
+  })
+
+  it("applies slot classes for header, title, and description", () => {
+    render(
+      <Card>
+        <CardHeader data-testid="card-header">
+          <CardTitle data-testid="card-title">Title</CardTitle>
+          <CardDescription data-testid="card-description">
+            Description
+          </CardDescription>
+        </CardHeader>
+      </Card>
+    )
+
+    const header = screen.getByTestId("card-header")
+    expect(header).toHaveAttribute("data-slot", "card-header")
+    expect(header).toHaveClass("grid", "items-start")
+
+    expect(screen.getByTestId("card-title")).toHaveClass("font-semibold")
+    expect(screen.getByTestId("card-description")).toHaveClass(
+      "text-muted-foreground"
+    )
+  })
+
+  it("renders action, content, and footer slots", () => {
+    render(
+      <Card>
+        <CardContent data-testid="card-content">Content</CardContent>
+        <CardAction data-testid="card-action">Action</CardAction>
+        <CardFooter data-testid="card-footer">Footer</CardFooter>
+      </Card>
+    )
+
+    expect(screen.getByTestId("card-content")).toHaveClass("px-6")
+    expect(screen.getByTestId("card-action")).toHaveAttribute(
+      "data-slot",
+      "card-action"
+    )
+    expect(screen.getByTestId("card-footer")).toHaveClass("flex")
+  })
+})
+
diff --git a/__tests__/components/ui/label.test.tsx b/__tests__/components/ui/label.test.tsx
new file mode 100644
index 0000000..d3efa27
--- /dev/null
+++ b/__tests__/components/ui/label.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+jest.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}))
+
+import { Label } from "@/components/ui/label"
+
+describe("Label component", () => {
+  it("renders the label root with the provided text and classes", () => {
+    render(
+      <Label data-testid="label-root" className="custom-label">
+        Label Text
+      </Label>
+    )
+
+    const label = screen.getByTestId("label-root")
+    expect(label).toHaveTextContent("Label Text")
+    expect(label).toHaveAttribute("data-slot", "label")
+    expect(label).toHaveClass("flex", "items-center", "custom-label")
+  })
+
+  it("supports disabled styling via attributes", () => {
+    render(
+      <Label data-testid="label-disabled" disabled>
+        Disabled
+      </Label>
+    )
+
+    expect(screen.getByTestId("label-disabled")).toHaveClass(
+      "group-data-[disabled=true]:pointer-events-none"
+    )
+  })
+})
+
diff --git a/__tests__/components/ui/skeleton.test.tsx b/__tests__/components/ui/skeleton.test.tsx
new file mode 100644
index 0000000..2dcce20
--- /dev/null
+++ b/__tests__/components/ui/skeleton.test.tsx
@@ -0,0 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+
+jest.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}))
+
+import Skeleton from "@/components/ui/skeleton"
+
+describe("Skeleton component", () => {
+  it("renders the skeleton surface with default classes", () => {
+    render(<Skeleton data-testid="skeleton" className="extra" />)
+
+    const skeleton = screen.getByTestId("skeleton")
+    expect(skeleton).toHaveAttribute("role", "presentation")
+    expect(skeleton).toHaveClass("animate-pulse", "rounded-lg", "extra")
+  })
+})
+
diff --git a/__tests__/components/ui/toast.test.tsx b/__tests__/components/ui/toast.test.tsx
index 9ae3093..ffefcfe 100644
--- a/__tests__/components/ui/toast.test.tsx
+++ b/__tests__/components/ui/toast.test.tsx
@@ -98,10 +98,9 @@ describe('Toast Components', () => {
       );
 
       const toast = screen.getByRole('alert', { name: 'toast' });
-      expect(toast).toHaveClass('destructive');
-      expect(toast).toHaveClass('border-destructive');
-      expect(toast).toHaveClass('bg-destructive');
-      expect(toast).toHaveClass('text-destructive-foreground');
+    expect(toast).toHaveClass('border-destructive');
+    expect(toast).toHaveClass('bg-destructive');
+    expect(toast).toHaveClass('text-destructive-foreground');
     });
 
     it('renders with success variant', () => {
@@ -112,11 +111,11 @@ describe('Toast Components', () => {
       );
 
       const toast = screen.getByRole('alert', { name: 'toast' });
-      expect(toast).toHaveClass('border-green-500');
-      expect(toast).toHaveClass('bg-green-100');
-      expect(toast).toHaveClass('text-green-900');
-      expect(toast).toHaveClass('dark:bg-green-900/20');
-      expect(toast).toHaveClass('dark:border-green-500/30');
+    expect(toast).toHaveClass('border-green-500');
+    expect(toast).toHaveClass('bg-green-50');
+    expect(toast).toHaveClass('text-green-900');
+    expect(toast).toHaveClass('dark:bg-green-900/20');
+    expect(toast).toHaveClass('dark:border-green-500/30');
       expect(toast).toHaveClass('dark:text-green-300');
     });
 
@@ -174,7 +173,6 @@ describe('Toast Components', () => {
       render(<Toast variant="destructive">Destructive Toast</Toast>);
       const toast = screen.getByRole('alert', { name: 'toast' });
       expect(toast).toBeInTheDocument();
-      expect(toast).toHaveClass('destructive');
     });
 
     it('renders Toast with success variant', () => {