@betterstart/cli 0.1.27 → 0.1.29

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   drizzleConfigTemplate
-} from "./chunk-SAPJG4NO.js";
+} from "./chunk-6JCWMKSY.js";
 
 // src/cli.ts
 import { Command as Command8 } from "commander";
@@ -1404,6 +1404,7 @@ function generatePageContent(pascal, kebab, camel, label) {
 
 import type { ${pascal}SubmissionData } from '@cms/actions/${kebab}-form'
 import { deleteBulk${pascal}Submissions } from '@cms/actions/${kebab}-form'
+import { PageHeader } from '@cms/components/shared/page-header'
 import { Button } from '@cms/components/ui/button'
 import { Input } from '@cms/components/ui/input'
 import {
@@ -1417,11 +1418,11 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@cms/components/ui/alert-dialog'
-import { PageHeader } from '@cms/components/shared/page-header'
 import { useQueryClient } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
-import { Search, Settings, Trash2 } from 'lucide-react'
+import { ChevronLeft, Search, Settings, Trash2 } from 'lucide-react'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 import { parseAsString, useQueryState } from 'nuqs'
 import { startTransition, useCallback, useState, useTransition } from 'react'
 import { toast } from 'sonner'
@@ -1434,6 +1435,7 @@ interface ${pascal}SubmissionsPageContentProps<TValue> {
 export function ${pascal}SubmissionsPageContent<TValue>({
   columns,
 }: ${pascal}SubmissionsPageContentProps<TValue>) {
+  const router = useRouter()
   const queryClient = useQueryClient()
   const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''))
   const [selectedIds, setSelectedIds] = useState<number[]>([])
@@ -1470,33 +1472,21 @@ export function ${pascal}SubmissionsPageContent<TValue>({
 
   return (
     <>
-      <div className="flex items-center justify-between border-b px-6 py-4">
-        <PageHeader title="${label}" description="View and manage form submissions" />
-        <div className="flex items-center gap-2">
-          <form action={searchAction} className="flex items-center gap-2">
-            <div className="relative">
-              <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
-              <Input
-                key={search}
-                name="search"
-                placeholder="Search submissions..."
-                defaultValue={search}
-                className="w-64 pl-9"
-              />
-            </div>
-            <Button type="submit" variant="outline">Search</Button>
-          </form>
-          <Button variant="outline" asChild>
-            <Link href="/cms/forms/${kebab}/settings">
-              <Settings className="size-3.5" />
-              Settings
-            </Link>
-          </Button>
+      <PageHeader title="${label}" back={<Button variant="ghost" size="icon" onClick={() => router.back()}><ChevronLeft /></Button>} search={<form action={searchAction} className="flex items-center gap-2 relative">
+        <Search className="text-muted-foreground/70 pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"  />
+        <Input
+          key={search}
+          name="search"
+          placeholder="Search submissions..."
+          defaultValue={search}
+          className="w-64 pl-9 bg-white rounded-full"
+        />
+      </form>} actions={<div className="flex items-center gap-2">
           {selectedIds.length > 0 && (
             <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
               <AlertDialogTrigger asChild>
-                <Button variant="destructive">
-                  <Trash2 className="size-3.5" />
+                <Button variant="destructive" size="default">
+                  <Trash2 className="size-3.5 -ml-0.5" strokeWidth={2} />
                   Delete {selectedIds.length}
                 </Button>
               </AlertDialogTrigger>
@@ -1521,9 +1511,13 @@ export function ${pascal}SubmissionsPageContent<TValue>({
               </AlertDialogContent>
             </AlertDialog>
           )}
-        </div>
-      </div>
-
+          <Button variant="outline" asChild>
+            <Link href="/cms/forms/${kebab}/settings">
+              <Settings className="size-3.5" />
+              Settings
+            </Link>
+          </Button>
+      </div>} />
       <main className="space-y-4 p-6">
         <${pascal}SubmissionsTable
           columns={columns}
@@ -1597,8 +1591,9 @@ function generateViewPage(pascal, kebab, fields, label, includeDynamic) {
             </div>
           )}` : "";
   return `import { get${pascal}Submission } from '@cms/actions/${kebab}-form'
+import { PageHeader } from '@cms/components/shared/page-header'
 import { Button } from '@cms/components/ui/button'
-import { ArrowLeft } from 'lucide-react'
+import { ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
@@ -1615,21 +1610,9 @@ export default async function Page({ params }: PageProps) {
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">${label} Submission</h1>
-          <p className="text-muted-foreground">Viewing submission #{id}</p>
-        </div>
-        <Button variant="outline" asChild>
-          <Link href="/cms/forms/${kebab}">
-            <ArrowLeft className="size-4" />
-            Back to ${label}
-          </Link>
-        </Button>
-      </div>
-
-      <div className="rounded-lg border p-6 space-y-4">
+    <>
+      <PageHeader title="${label} Submission" back={<Button variant="ghost" size="icon" asChild><Link href="/cms/forms/${kebab}"><ChevronLeft /></Link></Button>} />
+      <div className="rounded-lg border p-6 mx-6 mt-6 space-y-4">
 ${fieldItems}${customFieldsSection}
           <div className="space-y-1 border-t pt-4">
             <p className="text-sm font-medium text-muted-foreground">Submitted At</p>
@@ -1641,7 +1624,7 @@ ${fieldItems}${customFieldsSection}
             </p>
           </div>
       </div>
-    </div>
+    </>
   )
 }
 `;
@@ -1654,17 +1637,19 @@ import {
   testFormWebhook,
   upsertFormSettings,
 } from '@cms/actions/form-settings'
+import { PageHeader } from '@cms/components/shared/page-header'
 import { Button } from '@cms/components/ui/button'
 import { Input } from '@cms/components/ui/input'
 import { Label } from '@cms/components/ui/label'
 import { Switch } from '@cms/components/ui/switch'
 import { Textarea } from '@cms/components/ui/textarea'
-import { ArrowLeft, Loader2 } from 'lucide-react'
-import Link from 'next/link'
+import { ChevronLeft, Loader2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
 import { useEffect, useState, useTransition } from 'react'
 import { toast } from 'sonner'
 
 export default function ${pascal}SettingsPage() {
+  const router = useRouter()
   const [notificationEmails, setNotificationEmails] = useState('')
   const [webhookUrl, setWebhookUrl] = useState('')
   const [webhookEnabled, setWebhookEnabled] = useState(false)
@@ -1718,23 +1703,9 @@ export default function ${pascal}SettingsPage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">${label} Settings</h1>
-          <p className="text-muted-foreground">
-            Configure notifications and webhooks for this form
-          </p>
-        </div>
-        <Button variant="outline" asChild>
-          <Link href="/cms/forms/${kebab}">
-            <ArrowLeft className="size-4" />
-            Back to ${label}
-          </Link>
-        </Button>
-      </div>
-
-      <div className="space-y-6 rounded-lg border p-6">
+    <>
+      <PageHeader title="${label} Settings" back={<Button variant="ghost" size="icon" onClick={() => router.back()}><ChevronLeft /></Button>} />
+      <div className="space-y-6 rounded-lg border p-6 mx-6 mt-6">
         <div className="space-y-2">
           <Label htmlFor="notificationEmails">Notification Emails</Label>
           <Textarea
@@ -1804,7 +1775,7 @@ export default function ${pascal}SettingsPage() {
           </Button>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 `;
@@ -1866,55 +1837,47 @@ function parseSingleItem(str) {
   const labelMatch = str.match(/label:\s*['"]([^'"]+)['"]/);
   const hrefMatch = str.match(/href:\s*['"]([^'"]+)['"]/);
   const iconMatch = str.match(/icon:\s*(\w+)/);
+  const groupMatch = str.match(/group:\s*['"]([^'"]+)['"]/);
   if (!labelMatch || !hrefMatch) return null;
   const item = { label: labelMatch[1], href: hrefMatch[1] };
   if (iconMatch) item.icon = iconMatch[1];
-  const childrenMatch = str.match(/children:\s*\[([\s\S]*?)\]/);
-  if (childrenMatch) {
-    item.children = parseItemsBlock(childrenMatch[1]);
-  }
+  if (groupMatch) item.group = groupMatch[1];
   return item;
 }
 function generateNavigationCode(items, iconImports) {
   const lines = [];
-  lines.push(`import { ${iconImports.join(", ")} } from 'lucide-react'`);
   lines.push("import type { LucideIcon } from 'lucide-react'");
+  lines.push(`import { ${iconImports.join(", ")} } from 'lucide-react'`);
   lines.push("");
   lines.push("export interface CmsNavigationItem {");
   lines.push("  label: string");
   lines.push("  href: string");
   lines.push("  icon?: LucideIcon");
-  lines.push("  children?: CmsNavigationItem[]");
+  lines.push("  group?: string");
   lines.push("}");
   lines.push("");
   lines.push("export const cmsNavigation: CmsNavigationItem[] = [");
   for (let i = 0; i < items.length; i++) {
-    appendItem(lines, items[i], 2, i === items.length - 1);
+    appendItem(lines, items[i], i === items.length - 1);
   }
   lines.push("]");
   lines.push("");
   return lines.join("\n");
 }
-function appendItem(lines, item, indent, isLast) {
-  const pad = " ".repeat(indent);
-  if (item.children && item.children.length > 0) {
-    lines.push(`${pad}{`);
-    lines.push(`${pad}  label: '${item.label}',`);
-    lines.push(`${pad}  href: '${item.href}',`);
-    if (item.icon) lines.push(`${pad}  icon: ${item.icon},`);
-    lines.push(`${pad}  children: [`);
-    for (let j = 0; j < item.children.length; j++) {
-      appendItem(lines, item.children[j], indent + 4, j === item.children.length - 1);
-    }
-    lines.push(`${pad}  ]`);
-    lines.push(`${pad}}${isLast ? "" : ","}`);
-  } else {
-    lines.push(`${pad}{`);
-    lines.push(`${pad}  label: '${item.label}',`);
-    lines.push(`${pad}  href: '${item.href}'${item.icon ? "," : ""}`);
-    if (item.icon) lines.push(`${pad}  icon: ${item.icon}`);
-    lines.push(`${pad}}${isLast ? "" : ","}`);
-  }
+function appendItem(lines, item, isLast) {
+  lines.push("  {");
+  lines.push(`    label: '${item.label}',`);
+  const hasMore = item.icon != null || item.group != null;
+  lines.push(`    href: '${item.href}'${hasMore ? "," : ""}`);
+  if (item.icon && item.group) {
+    lines.push(`    icon: ${item.icon},`);
+    lines.push(`    group: '${item.group}'`);
+  } else if (item.icon) {
+    lines.push(`    icon: ${item.icon}`);
+  } else if (item.group) {
+    lines.push(`    group: '${item.group}'`);
+  }
+  lines.push(`  }${isLast ? "" : ","}`);
 }
 function toKebabCase2(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
@@ -1929,45 +1892,35 @@ function updateFormNavigation(schema, cwd, cmsDir, options = {}) {
     items = parsed.items;
     iconImports = parsed.iconImports;
   }
-  let formsGroup = items.find((item) => item.label === "Forms");
-  if (!formsGroup) {
-    formsGroup = {
-      label: "Forms",
-      href: "#",
-      icon: "FileInput",
-      children: []
-    };
-    items.push(formsGroup);
-  }
-  if (!formsGroup.children) {
-    formsGroup.children = [];
-  }
   const kebab = toKebabCase2(schema.name);
   const formHref = `/cms/forms/${kebab}`;
-  const existingIndex = formsGroup.children.findIndex((c) => c.href === formHref);
-  const newChild = {
+  const existingIndex = items.findIndex((item) => item.href === formHref);
+  const newItem = {
     label: schema.label,
     href: formHref,
-    icon: "Inbox"
+    icon: "Inbox",
+    group: "Forms"
   };
   if (existingIndex >= 0) {
     if (options.force) {
-      formsGroup.children[existingIndex] = newChild;
+      items[existingIndex] = newItem;
     } else {
       return { files: [] };
     }
   } else {
-    formsGroup.children.push(newChild);
-    formsGroup.children.sort((a, b) => a.label.localeCompare(b.label));
+    items.push(newItem);
   }
   const dashboard = items.find((item) => item.href === "/cms");
   const others = items.filter((item) => item.href !== "/cms");
-  others.sort((a, b) => a.label.localeCompare(b.label));
+  others.sort((a, b) => {
+    if (!a.group && b.group) return -1;
+    if (a.group && !b.group) return 1;
+    if (a.group && b.group && a.group !== b.group) return a.group.localeCompare(b.group);
+    return a.label.localeCompare(b.label);
+  });
   items = [...dashboard ? [dashboard] : [], ...others];
-  for (const icon of ["FileInput", "Inbox"]) {
-    if (!iconImports.includes(icon)) {
-      iconImports.push(icon);
-    }
+  if (!iconImports.includes("Inbox")) {
+    iconImports.push("Inbox");
   }
   iconImports.sort();
   const dir = path5.dirname(navFilePath);
@@ -2423,7 +2376,7 @@ function generateFormComponent(schema, cwd, cmsDir, options) {
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import { z } from 'zod'
+import { z } from 'zod/v3'
 import { create${pascal}Submission } from '@cms/actions/${formName}-form'
 import { Button } from '@cms/components/ui/button'
 import {
@@ -4517,7 +4470,7 @@ function generateCreatePage(schema, cwd, pagesDir, options = {}) {
   const Singular = toPascalCase8(singular);
   const singLabel = singularizeLabel(schema.label);
   const kebabName = toKebabCase4(schema.name);
-  const content = `import { ArrowLeft } from 'lucide-react'
+  const content = `import { ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
 import { connection } from 'next/server'
 import { PageHeader } from '@cms/components/shared/page-header'
@@ -4528,23 +4481,12 @@ export default async function Create${Singular}Page() {
   await connection()
 
   return (
-    <div className="flex flex-col w-full pb-20">
-      <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader
-          title="Create ${singLabel}"
-          description="Add a new ${singLabel.toLowerCase()} to the system"
-        />
-        <Button variant="outline" asChild>
-          <Link href="/cms/${schema.name}">
-            <ArrowLeft className="size-4" />
-            Back to ${schema.label}
-          </Link>
-        </Button>
-      </div>
-      <main className="container mx-auto max-w-5xl p-6">
+    <>
+      <PageHeader title="Create ${singLabel}" back={<Button variant="ghost" size="icon" asChild><Link href="/cms/${schema.name}"><ChevronLeft /></Link></Button>} />
+      <main className="container mx-auto max-w-5xl p-6 pb-20">
         <${Singular}Form key={Date.now()} />
       </main>
-    </div>
+    </>
   )
 }
 `;
@@ -4838,7 +4780,7 @@ function generateEditPage(schema, cwd, pagesDir, options = {}) {
   const Singular = toPascalCase10(singular);
   const camelSingular = toCamelCase6(singular);
   const kebabName = toKebabCase5(schema.name);
-  const content = `import { ArrowLeft } from 'lucide-react'
+  const content = `import { ChevronLeft } from 'lucide-react'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { PageHeader } from '@cms/components/shared/page-header'
@@ -4861,23 +4803,12 @@ export default async function Edit${Singular}Page({ params }: PageProps) {
   }
 
   return (
-    <div className="flex flex-col w-full pb-20">
-      <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader
-          title="Edit ${Singular}"
-          description="Update ${singular} information"
-        />
-        <Button variant="outline" asChild>
-          <Link href="/cms/${schema.name}">
-            <ArrowLeft className="size-4" />
-            Back to ${schema.label}
-          </Link>
-        </Button>
-      </div>
-      <main className="container mx-auto max-w-5xl p-6">
+    <>
+      <PageHeader title="Edit ${Singular}" back={<Button variant="ghost" size="icon" asChild><Link href="/cms/${schema.name}"><ChevronLeft /></Link></Button>} />
+      <main className="container mx-auto max-w-5xl p-6 pb-20">
         <${Singular}Form key={${camelSingular}.id} initialData={${camelSingular}} />
       </main>
-    </div>
+    </>
   )
 }
 `;
@@ -5868,7 +5799,7 @@ import { ${lucideIcons.join(", ")} } from 'lucide-react'` : ""}
 import { useRouter } from 'next/navigation'
 import {${hasNestedList ? " useFieldArray," : ""} useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'${hasTabsField ? "\nimport { useQueryState } from 'nuqs'" : ""}${hasRelationship ? "\nimport { cn } from '@cms/utils/cn'" : ""}
+import { z } from 'zod/v3'${hasTabsField ? "\nimport { useQueryState } from 'nuqs'" : ""}${hasRelationship ? "\nimport { cn } from '@cms/utils/cn'" : ""}
 ${relHookImports ? `${relHookImports}
 ` : ""}${uiImports.join("\n")}
 import type {
@@ -6195,7 +6126,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'${lucideIcons
 import { ${lucideIcons.join(", ")} } from 'lucide-react'` : ""}
 import {${hasNestedList ? " useFieldArray," : ""} useForm } from 'react-hook-form'
 import { toast } from 'sonner'
-import { z } from 'zod'${hasTabsField ? "\nimport { useQueryState } from 'nuqs'" : ""}${hasRelationship ? "\nimport { cn } from '@cms/utils/cn'" : ""}
+import { z } from 'zod/v3'${hasTabsField ? "\nimport { useQueryState } from 'nuqs'" : ""}${hasRelationship ? "\nimport { cn } from '@cms/utils/cn'" : ""}
 ${relHookImports ? `${relHookImports}
 ` : ""}${uiImports.join("\n")}
 import type {
@@ -6486,60 +6417,52 @@ function parseSingleItem2(str) {
   const labelMatch = str.match(/label:\s*['"]([^'"]+)['"]/);
   const hrefMatch = str.match(/href:\s*['"]([^'"]+)['"]/);
   const iconMatch = str.match(/icon:\s*(\w+)/);
+  const groupMatch = str.match(/group:\s*['"]([^'"]+)['"]/);
   if (!labelMatch || !hrefMatch) return null;
   const item = {
     label: labelMatch[1],
     href: hrefMatch[1]
   };
   if (iconMatch) item.icon = iconMatch[1];
-  const childrenMatch = str.match(/children:\s*\[([\s\S]*?)\]/);
-  if (childrenMatch) {
-    item.children = parseItemsBlock2(childrenMatch[1]);
-  }
+  if (groupMatch) item.group = groupMatch[1];
   return item;
 }
 function generateNavigationCode2(items, iconImports) {
   const lines = [];
-  lines.push(`import { ${iconImports.join(", ")} } from 'lucide-react'`);
   lines.push("import type { LucideIcon } from 'lucide-react'");
+  lines.push(`import { ${iconImports.join(", ")} } from 'lucide-react'`);
   lines.push("");
   lines.push("export interface CmsNavigationItem {");
   lines.push("  label: string");
   lines.push("  href: string");
   lines.push("  icon?: LucideIcon");
-  lines.push("  children?: CmsNavigationItem[]");
+  lines.push("  group?: string");
   lines.push("}");
   lines.push("");
   lines.push("export const cmsNavigation: CmsNavigationItem[] = [");
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
     const isLast = i === items.length - 1;
-    appendItem2(lines, item, 2, isLast);
+    appendItem2(lines, item, isLast);
   }
   lines.push("]");
   lines.push("");
   return lines.join("\n");
 }
-function appendItem2(lines, item, indent, isLast) {
-  const pad = " ".repeat(indent);
-  if (item.children && item.children.length > 0) {
-    lines.push(`${pad}{`);
-    lines.push(`${pad}  label: '${item.label}',`);
-    lines.push(`${pad}  href: '${item.href}',`);
-    if (item.icon) lines.push(`${pad}  icon: ${item.icon},`);
-    lines.push(`${pad}  children: [`);
-    for (let j = 0; j < item.children.length; j++) {
-      appendItem2(lines, item.children[j], indent + 4, j === item.children.length - 1);
-    }
-    lines.push(`${pad}  ]`);
-    lines.push(`${pad}}${isLast ? "" : ","}`);
-  } else {
-    lines.push(`${pad}{`);
-    lines.push(`${pad}  label: '${item.label}',`);
-    lines.push(`${pad}  href: '${item.href}'${item.icon ? "," : ""}`);
-    if (item.icon) lines.push(`${pad}  icon: ${item.icon}`);
-    lines.push(`${pad}}${isLast ? "" : ","}`);
-  }
+function appendItem2(lines, item, isLast) {
+  lines.push("  {");
+  lines.push(`    label: '${item.label}',`);
+  const hasMore = item.icon != null || item.group != null;
+  lines.push(`    href: '${item.href}'${hasMore ? "," : ""}`);
+  if (item.icon && item.group) {
+    lines.push(`    icon: ${item.icon},`);
+    lines.push(`    group: '${item.group}'`);
+  } else if (item.icon) {
+    lines.push(`    icon: ${item.icon}`);
+  } else if (item.group) {
+    lines.push(`    group: '${item.group}'`);
+  }
+  lines.push(`  }${isLast ? "" : ","}`);
 }
 function updateNavigation(schema, cwd, cmsDir, options = {}) {
   const navFilePath = path15.join(cwd, cmsDir, "data", "navigation.ts");
@@ -6561,48 +6484,26 @@ function updateNavigation(schema, cwd, cmsDir, options = {}) {
     icon: schema.icon
   };
   if (schema.navGroup) {
-    let group = items.find((item) => item.label === schema.navGroup?.label);
-    if (!group) {
-      group = {
-        label: schema.navGroup.label,
-        href: "#",
-        icon: schema.navGroup.icon,
-        children: []
-      };
-      items.push(group);
-    }
-    if (!group.children) {
-      group.children = [];
-    }
-    const existingChild = group.children.findIndex((c) => c.href === entityHref);
-    if (existingChild >= 0) {
-      if (options.force) {
-        group.children[existingChild] = newItem;
-      } else {
-        return { files: [] };
-      }
+    newItem.group = schema.navGroup.label;
+  }
+  const existingIndex = items.findIndex((item) => item.href === entityHref);
+  if (existingIndex >= 0) {
+    if (options.force) {
+      items[existingIndex] = newItem;
     } else {
-      group.children.push(newItem);
-      group.children.sort((a, b) => a.label.localeCompare(b.label));
-    }
-    if (schema.navGroup.icon && !iconImports.includes(schema.navGroup.icon)) {
-      iconImports.push(schema.navGroup.icon);
+      return { files: [] };
     }
   } else {
-    const existingIndex = items.findIndex((item) => item.href === entityHref);
-    if (existingIndex >= 0) {
-      if (options.force) {
-        items[existingIndex] = newItem;
-      } else {
-        return { files: [] };
-      }
-    } else {
-      items.push(newItem);
-    }
+    items.push(newItem);
   }
   const dashboard = items.find((item) => item.href === "/cms");
   const others = items.filter((item) => item.href !== "/cms");
-  others.sort((a, b) => a.label.localeCompare(b.label));
+  others.sort((a, b) => {
+    if (!a.group && b.group) return -1;
+    if (a.group && !b.group) return 1;
+    if (a.group && b.group && a.group !== b.group) return a.group.localeCompare(b.group);
+    return a.label.localeCompare(b.label);
+  });
   items = [...dashboard ? [dashboard] : [], ...others];
   if (schema.icon && !iconImports.includes(schema.icon)) {
     iconImports.push(schema.icon);
@@ -6721,8 +6622,8 @@ function generatePageContent2(schema, cwd, pagesDir, options = {}) {
   const hasCreate = schema.actions?.create ?? false;
   const hasDelete = schema.actions?.delete ?? false;
   const hasFilters = schema.filters && schema.filters.length > 0;
-  const lucideIcons = ["Search"];
-  if (hasCreate) lucideIcons.push("FilePlus");
+  const lucideIcons = ["ChevronLeft", "Search", "CornerDownLeft"];
+  if (hasCreate) lucideIcons.push("Plus");
   if (hasDelete) lucideIcons.push("Trash2");
   if (hasFilters) lucideIcons.push("Check", "ChevronsUpDown");
   let imports = `'use client'
@@ -6730,7 +6631,8 @@ function generatePageContent2(schema, cwd, pagesDir, options = {}) {
 import { useQueryClient } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
 import { ${lucideIcons.join(", ")} } from 'lucide-react'
-${hasCreate ? "import Link from 'next/link'\n" : ""}import { parseAsString${hasDelete ? ", parseAsArrayOf, parseAsInteger" : ""}, useQueryState } from 'nuqs'
+${hasCreate ? "import Link from 'next/link'\n" : ""}import { useRouter } from 'next/navigation'
+import { parseAsString${hasDelete ? ", parseAsArrayOf, parseAsInteger" : ""}, useQueryState } from 'nuqs'
 import * as React from 'react'
 import { useFormStatus } from 'react-dom'
 ${hasDelete ? "import { toast } from 'sonner'\n" : ""}import { PageHeader } from '@cms/components/shared/page-header'
@@ -6830,7 +6732,7 @@ ${filterLogic}` : ""}`;
     })
   }
 ` : "";
-  const filterDropdowns = hasFilters ? schema.filters.map(
+  const _filterDropdowns = hasFilters ? schema.filters.map(
     (f) => `        <Popover open={${f.field}ComboboxOpen} onOpenChange={set${toPascalCase14(f.field)}ComboboxOpen}>
           <PopoverTrigger asChild>
             <Button
@@ -6893,19 +6795,17 @@ ${filterLogic}` : ""}`;
           </PopoverContent>
         </Popover>`
   ).join("\n") : "";
-  const searchInput = `        <form action={searchAction} className="flex items-center gap-2">
-          <div className="relative">
-            <Search className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
-            <Input
-              key={search}
-              name="search"
-              placeholder="Search ${schema.label.toLowerCase()}..."
-              defaultValue={search}
-              className="w-64 pl-9"
-            />
-          </div>
-          <SearchButton />
-        </form>`;
+  const searchInput = `<form action={searchAction} className="flex items-center gap-2 relative">
+        <Search className="text-muted-foreground/70 pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"  />
+        <Input
+          key={search}
+          name="search"
+          placeholder="Search ${schema.label.toLowerCase()}..."
+          defaultValue={search}
+          className="w-64 pl-9 bg-white rounded-lg"
+        />
+        <CornerDownLeft className="text-muted-foreground/70 pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2" />
+      </form>`;
   const deleteButton = hasDelete ? `          {selectedIds.length > 0 && (
             <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
               <AlertDialogTrigger asChild>
@@ -6941,7 +6841,7 @@ ${filterLogic}` : ""}`;
           )}` : "";
   const createButton = hasCreate ? `          <Button asChild>
             <Link href="/cms/${schema.name}/new">
-              <FilePlus className="size-3.5 -ml-0.5" strokeWidth={2} />
+              <Plus className="size-3.5 -ml-0.5" strokeWidth={2} />
               Create ${singularizeLabel2(schema.label)}
             </Link>
           </Button>` : "";
@@ -6956,20 +6856,12 @@ ${searchButton}interface ${Plural}PageContentProps<TValue> {
 export function ${Plural}PageContent<TValue>({
   columns
 }: ${Plural}PageContentProps<TValue>) {
+  const router = useRouter()
   const queryClient = useQueryClient()
 ${searchLogic}${deleteLogic}
   return (
     <>
-      <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader title="${schema.label}" description="${schema.description}" />
-        <div className="flex items-center gap-2">
-${filterDropdowns ? `${filterDropdowns}
-` : ""}${searchInput}
-${deleteButton}
-${createButton}
-        </div>
-      </div>
-
+      <PageHeader title="${schema.label}" back={<Button variant="ghost" size="icon" onClick={() => router.back()}><ChevronLeft /></Button>} search={${searchInput}} actions={<div className="flex items-center gap-2">${deleteButton} ${createButton}</div>} />
       <main className="space-y-6 p-6">
         <${Plural}Table ${tableProps} />
       </main>
@@ -7018,14 +6910,12 @@ export default async function ${PageName}Page() {
   const data = await get${Singular}()
 
   return (
-    <div className="flex flex-col w-full pb-20">
-      <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader title="${schema.label}" description="Manage ${schema.label.toLowerCase()}" />
-      </div>
-      <main className="container mx-auto max-w-5xl p-6">
+    <>
+      <PageHeader title="${schema.label}" />
+      <main className="container mx-auto max-w-5xl p-6 pb-20">
         <${Singular}Form initialData={data} />
       </main>
-    </div>
+    </>
   )
 }
 `;
@@ -7972,14 +7862,6 @@ function openBrowser(url) {
 // src/init/prompts/features.ts
 import * as p2 from "@clack/prompts";
 async function promptFeatures(presetOverride) {
-  const includeEmail = await p2.confirm({
-    message: "Include email system? (Resend + React Email)",
-    initialValue: true
-  });
-  if (p2.isCancel(includeEmail)) {
-    p2.cancel("Setup cancelled.");
-    process.exit(0);
-  }
   let preset;
   if (presetOverride && isValidPreset(presetOverride)) {
     preset = presetOverride;
@@ -7999,7 +7881,7 @@ async function promptFeatures(presetOverride) {
     }
     preset = selected;
   }
-  return { includeEmail, preset };
+  return { includeEmail: true, preset };
 }
 function isValidPreset(value) {
   return value === "blank" || value === "blog" || value === "full";
@@ -8067,8 +7949,8 @@ export const { GET, POST } = toNextJsHandler(auth)
 function uploadRouteTemplate() {
   return `import { PutObjectCommand } from '@aws-sdk/client-s3'
 import { BUCKET_NAME, generateFilePath, getPublicUrl, getR2Client } from '@cms/lib/r2'
-import { validateFiles } from '@cms/utils/validation'
 import type { UploadedFile } from '@cms/types'
+import { validateFiles } from '@cms/utils/validation'
 import { type NextRequest, NextResponse } from 'next/server'
 
 export async function POST(request: NextRequest) {
@@ -8088,27 +7970,22 @@ export async function POST(request: NextRequest) {
     }
 
     if (files.length === 0) {
-      return NextResponse.json(
-        { success: false, error: 'No files provided' },
-        { status: 400 }
-      )
+      return NextResponse.json({ success: false, error: 'No files provided' }, { status: 400 })
     }
 
     const validation = validateFiles(files, {
       maxSizeInBytes,
       allowedTypes,
-      maxFiles: 10
+      maxFiles: 10,
     })
 
     if (!validation.valid) {
       return NextResponse.json(
         {
           success: false,
-          error: validation.errors
-            .map((e) => \`\${e.filename}: \${e.error}\`)
-            .join('; ')
+          error: validation.errors.map((e) => \`\${e.filename}: \${e.error}\`).join('; '),
         },
-        { status: 400 }
+        { status: 400 },
       )
     }
 
@@ -8124,7 +8001,7 @@ export async function POST(request: NextRequest) {
         Key: key,
         Body: buffer,
         ContentType: file.type,
-        ContentLength: file.size
+        ContentLength: file.size,
       })
 
       await getR2Client().send(command)
@@ -8134,18 +8011,14 @@ export async function POST(request: NextRequest) {
         url: getPublicUrl(key),
         filename: file.name,
         size: file.size,
-        contentType: file.type
+        contentType: file.type,
       })
     }
 
     return NextResponse.json({ success: true, files: uploadedFiles })
   } catch (error) {
-    const message =
-      error instanceof Error ? error.message : 'Failed to upload files'
-    return NextResponse.json(
-      { success: false, error: message },
-      { status: 500 }
-    )
+    const message = error instanceof Error ? error.message : 'Failed to upload files'
+    return NextResponse.json({ success: false, error: message }, { status: 500 })
   }
 }
 `;
@@ -8225,7 +8098,9 @@ function authClientTemplate() {
 import { createAuthClient } from 'better-auth/react'
 
 export const authClient = createAuthClient({
-  baseURL: process.env.NEXT_PUBLIC_BETTERSTART_AUTH_URL || (typeof window !== 'undefined' ? window.location.origin : ''),
+  baseURL:
+    process.env.NEXT_PUBLIC_BETTERSTART_AUTH_URL ||
+    (typeof window !== 'undefined' ? window.location.origin : ''),
   basePath: '/api/cms/auth',
 })
 
@@ -8246,10 +8121,7 @@ export enum UserRole {
 }
 
 export function isUserRole(value: unknown): value is UserRole {
-  return (
-    typeof value === 'string' &&
-    Object.values(UserRole).includes(value as UserRole)
-  )
+  return typeof value === 'string' && Object.values(UserRole).includes(value as UserRole)
 }
 
 /**
@@ -8704,184 +8576,121 @@ function hasEnvBetterstartVars(cwd) {
 // src/init/templates/components/cms-globals.ts
 function cmsGlobalsCssTemplate() {
   return `@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
-  --background: oklch(0.985 0 0);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.99 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.44 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.63 0.19 23.03);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.92 0 0);
-  --input: oklch(0.99 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.55 0.22 264.53);
-  --chart-3: oklch(0.72 0 0);
-  --chart-4: oklch(0.92 0 0);
-  --chart-5: oklch(0.56 0 0);
-  --sidebar: oklch(1 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.94 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.4rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.02;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.01);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.01);
-  --shadow-sm:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
-  --shadow:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
-  --shadow-md:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
-  --shadow-lg:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
-  --shadow-xl:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
-}
-
-.dark {
-  --background: oklch(0 0 0);
-  --foreground: oklch(1 0 0);
-  --card: oklch(0.14 0 0);
-  --card-foreground: oklch(1 0 0);
-  --popover: oklch(0.18 0 0);
-  --popover-foreground: oklch(1 0 0);
-  --primary: oklch(1 0 0);
-  --primary-foreground: oklch(0 0 0);
-  --secondary: oklch(0.25 0 0);
-  --secondary-foreground: oklch(1 0 0);
-  --muted: oklch(0.23 0 0);
-  --muted-foreground: oklch(0.72 0 0);
-  --accent: oklch(0.32 0 0);
-  --accent-foreground: oklch(1 0 0);
-  --destructive: oklch(0.69 0.2 23.91);
-  --destructive-foreground: oklch(0 0 0);
-  --border: oklch(0.26 0 0);
-  --input: oklch(0.32 0 0);
-  --ring: oklch(0.72 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.58 0.21 260.84);
-  --chart-3: oklch(0.56 0 0);
-  --chart-4: oklch(0.44 0 0);
-  --chart-5: oklch(0.92 0 0);
-  --sidebar: oklch(0.18 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.32 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.32 0 0);
-  --sidebar-ring: oklch(0.72 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --radius: 0.4rem;
-  --shadow-x: 0px;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.02;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.01);
-  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.01);
-  --shadow-sm:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
-  --shadow:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
-  --shadow-md:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
-  --shadow-lg:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
-  --shadow-xl:
-    0px 1px 3px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
-  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
-}
-
-.cms-root {
-  --font-sans: var(--font-geist-sans, sans-serif);
-  --font-mono: var(--font-geist-mono, monospace);
-  font-family: var(--font-sans);
-}
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
   --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --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);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
 
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @layer base {
@@ -8889,7 +8698,7 @@ function cmsGlobalsCssTemplate() {
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground antialiased;
+    @apply bg-background text-foreground;
   }
 }
 
@@ -8922,6 +8731,14 @@ function cmsGlobalsCssTemplate() {
 function dataTableTemplate() {
   return `'use client'
 
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cms/components/ui/table'
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -8931,20 +8748,11 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   type SortingState,
-  type Table as TanstackTable,
   useReactTable,
-  type VisibilityState
+  type VisibilityState,
 } from '@tanstack/react-table'
 import { parseAsInteger, useQueryState } from 'nuqs'
 import * as React from 'react'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@cms/components/ui/table'
 import { DataTablePagination } from './data-table-pagination'
 
 interface DataTableProps<TData, TValue> {
@@ -8970,7 +8778,7 @@ export function DataTable<TData, TValue>({
   selectedIds,
   onSelectedIdsChange,
   meta,
-  getId = (row) => (row as { id: number }).id
+  getId = (row) => (row as { id: number }).id,
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = React.useState<SortingState>([])
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
@@ -8993,27 +8801,38 @@ export function DataTable<TData, TValue>({
   }, [selectedIds, data, getId])
 
   const handleRowSelectionChange = React.useCallback(
-    (updater: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => {
+    (
+      updater:
+        | Record<string, boolean>
+        | ((old: Record<string, boolean>) => Record<string, boolean>),
+    ) => {
       if (!onSelectedIdsChange) return
       const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater
       const newIds = Object.keys(newSelection)
         .filter((key) => newSelection[key])
-        .map((key) => getId(data[Number.parseInt(key)]))
+        .map((key) => getId(data[Number.parseInt(key, 10)]))
         .filter(Boolean)
       onSelectedIdsChange(newIds)
     },
-    [data, rowSelection, onSelectedIdsChange, getId]
+    [data, rowSelection, onSelectedIdsChange, getId],
   )
 
   const handlePaginationChange = React.useCallback(
-    (updater: { pageIndex: number; pageSize: number } | ((old: { pageIndex: number; pageSize: number }) => { pageIndex: number; pageSize: number })) => {
+    (
+      updater:
+        | { pageIndex: number; pageSize: number }
+        | ((old: { pageIndex: number; pageSize: number }) => {
+            pageIndex: number
+            pageSize: number
+          }),
+    ) => {
       const current = { pageIndex, pageSize: effectivePageSize }
       const next = typeof updater === 'function' ? updater(current) : updater
       React.startTransition(() => {
         setPageIndex(next.pageIndex)
       })
     },
-    [pageIndex, effectivePageSize, setPageIndex]
+    [pageIndex, effectivePageSize, setPageIndex],
   )
 
   const table = useReactTable({
@@ -9036,9 +8855,9 @@ export function DataTable<TData, TValue>({
       rowSelection,
       pagination: {
         pageIndex,
-        pageSize: effectivePageSize
-      }
-    }
+        pageSize: effectivePageSize,
+      },
+    },
   })
 
   return (
@@ -9105,23 +8924,23 @@ export type { DataTableProps }
 function dataTablePaginationTemplate() {
   return `'use client'
 
-import type { Table } from '@tanstack/react-table'
-import * as React from 'react'
 import { Button } from '@cms/components/ui/button'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 } from '@cms/components/ui/select'
+import type { Table } from '@tanstack/react-table'
+import * as React from 'react'
 
 const PAGE_SIZE_OPTIONS = [
   { value: '10', label: '10' },
   { value: '20', label: '20' },
   { value: '50', label: '50' },
   { value: '100', label: '100' },
-  { value: 'all', label: 'All' }
+  { value: 'all', label: 'All' },
 ]
 
 interface DataTablePaginationProps<TData> {
@@ -9133,7 +8952,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({
   table,
   pageSize,
-  setPageSize
+  setPageSize,
 }: DataTablePaginationProps<TData>) {
   const handlePageSizeChange = React.useCallback(
     (value: string) => {
@@ -9146,7 +8965,7 @@ export function DataTablePagination<TData>({
         table.setPageIndex(0)
       })
     },
-    [setPageSize, table]
+    [setPageSize, table],
   )
 
   return (
@@ -9200,11 +9019,11 @@ export function DataTablePagination<TData>({
 function dataTableToolbarTemplate() {
   return `'use client'
 
-import { ArrowUpDown, Save, Search } from 'lucide-react'
-import * as React from 'react'
-import { useFormStatus } from 'react-dom'
 import { Button } from '@cms/components/ui/button'
 import { Input } from '@cms/components/ui/input'
+import { ArrowUpDown, Save, Search } from 'lucide-react'
+import type * as React from 'react'
+import { useFormStatus } from 'react-dom'
 
 function SearchButton() {
   const { pending } = useFormStatus()
@@ -9226,7 +9045,7 @@ export function DataTableToolbar({
   search,
   onSearch,
   searchPlaceholder = 'Search...',
-  children
+  children,
 }: DataTableToolbarProps) {
   return (
     <div className="flex items-center gap-2">
@@ -9263,7 +9082,7 @@ export function ReorderControls({
   onSave,
   onCancel,
   hasChanges,
-  isSaving
+  isSaving,
 }: ReorderControlsProps) {
   return (
     <div className="flex items-center gap-2">
@@ -9278,26 +9097,14 @@ export function ReorderControls({
       </Button>
       {reorderMode && (
         <>
-          <Button
-            variant="default"
-            size="sm"
-            onClick={onSave}
-            disabled={!hasChanges || isSaving}
-          >
+          <Button variant="default" size="sm" onClick={onSave} disabled={!hasChanges || isSaving}>
             <Save className="size-4 mr-1" />
             {isSaving ? 'Saving...' : 'Save'}
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onCancel}
-            disabled={isSaving}
-          >
+          <Button variant="outline" size="sm" onClick={onCancel} disabled={isSaving}>
             Cancel
           </Button>
-          {hasChanges && (
-            <span className="text-sm text-muted-foreground">Unsaved changes</span>
-          )}
+          {hasChanges && <span className="text-sm text-muted-foreground">Unsaved changes</span>}
         </>
       )}
     </div>
@@ -9310,7 +9117,6 @@ export function ReorderControls({
 function cmsHeaderTemplate() {
   return `'use client'
 
-import { CmsSearch } from '@cms/components/layout/cms-search'
 import { Button } from '@cms/components/ui/button'
 import { SidebarTrigger, useSidebar } from '@cms/components/ui/sidebar'
 import { useTheme } from '@cms/hooks/use-cms-theme'
@@ -9321,11 +9127,10 @@ export function CmsHeader() {
   const { state } = useSidebar()
 
   return (
-    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50 bg-sidebar">
+    <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border w-full sticky top-0 z-50">
       <div className="flex items-center px-5 gap-1 flex-1 w-full justify-between">
         <div className="flex items-center gap-2 w-full">
           {state === 'collapsed' && <SidebarTrigger />}
-          <CmsSearch />
         </div>
         <div className="flex items-center gap-2 ml-auto">
           <Button
@@ -9345,17 +9150,47 @@ export function CmsHeader() {
 `;
 }
 
-// src/init/templates/components/layout/cms-providers.ts
-function cmsProvidersTemplate() {
+// src/init/templates/components/layout/cms-nav-link.ts
+function cmsNavLinkTemplate() {
   return `'use client'
 
-import { useState } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { CmsThemeProvider } from '@cms/hooks/use-cms-theme'
-import { Toaster } from '@cms/components/ui/sonner'
-import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { SidebarMenuButton } from '@cms/components/ui/sidebar'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 
-export function CmsProviders({ children }: { children: React.ReactNode }) {
+export function CmsNavLink({
+  href,
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) {
+  const pathname = usePathname()
+  const isActive =
+    href === '/cms'
+      ? pathname === '/cms'
+      : pathname === href || pathname.startsWith(href + '/')
+
+  return (
+    <SidebarMenuButton asChild isActive={isActive}>
+      <Link href={href}>{children}</Link>
+    </SidebarMenuButton>
+  )
+}
+`;
+}
+
+// src/init/templates/components/layout/cms-providers.ts
+function cmsProvidersTemplate() {
+  return `'use client'
+
+import { Toaster } from '@cms/components/ui/sonner'
+import { CmsThemeProvider } from '@cms/hooks/use-cms-theme'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
+import { useState } from 'react'
+
+export function CmsProviders({ children }: { children: React.ReactNode }) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -9393,15 +9228,15 @@ export const CmsSearch = () => {
     <div className="flex items-center gap-2 relative w-full max-w-[240px]">
       <Button
         variant="outline"
-        className="w-full text-left items-center pr-1! rounded-full"
-        size="sm"
+        className="w-full text-left items-center pr-1.5! py-0 rounded-lg bg-white"
+        size="lg"
       >
-        <Search className="shrink-0 size-3.5 -ml-0.5 text-muted-foreground" strokeWidth={2} />
-        <span className="w-full font-medium text-xs pt-px text-muted-foreground leading-0">
-          Find...
+        <Search className="shrink-0 size-3.5 -ml-0.5 text-muted-foreground/70" />
+        <span className="w-full font-normal text-sm text-muted-foreground/70 [text-box-trim:trim-both]">
+          Quick search...
         </span>
         <div className="flex items-center gap-1 py-0.5 border rounded-full corner-squircle px-2 border-border bg-background">
-          <Command className="size-3! text-muted-foreground" strokeWidth={1.5} />
+          <Command className="size-3! text-muted-foreground" />
           <span className="font-mono text-xs font-medium">K</span>
         </div>
       </Button>
@@ -9415,123 +9250,110 @@ CmsSearch.displayName = 'CmsSearch'
 
 // src/init/templates/components/layout/cms-sidebar.ts
 function cmsSidebarTemplate() {
-  return `import { getSetting } from '@/cms/lib/actions/settings'
-import { getSession } from '@cms/auth/middleware'
+  return `import { getSession } from '@cms/auth/middleware'
 import { Avatar, AvatarFallback, AvatarImage } from '@cms/components/ui/avatar'
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from '@cms/components/ui/collapsible'
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
-  SidebarMenuButton,
   SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarRail,
-  SidebarTrigger,
 } from '@cms/components/ui/sidebar'
 import { cms } from '@cms/data/cms'
 import { type CmsNavigationItem, cmsNavigation } from '@cms/data/navigation'
-import { ChevronRight, Settings, Users } from 'lucide-react'
+import { Settings, Users } from 'lucide-react'
 import Link from 'next/link'
+import { Fragment } from 'react'
+import { getSetting } from '@/cms/lib/actions/settings'
+import { CmsNavLink } from './cms-nav-link'
+import { CmsSearch } from './cms-search'
 
-function NavItem({ item }: { item: CmsNavigationItem }) {
-  if (item.children && item.children.length > 0) {
-    return (
-      <Collapsible asChild defaultOpen className="group/collapsible border-y border-border py-2 px-2">
-        <SidebarMenuItem>
-          <CollapsibleTrigger asChild>
-            <SidebarMenuButton>
-              {item.icon && <item.icon className="size-3.5!" />}
-              <span>{item.label}</span>
-              <ChevronRight className="ml-auto size-3.5! transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-            </SidebarMenuButton>
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            <SidebarMenuSub>
-              {item.children.map((child) => (
-                <SidebarMenuSubItem key={child.href}>
-                  <SidebarMenuSubButton asChild>
-                    <Link href={child.href}>
-                      {child.icon && <child.icon className="size-3.5!" />}
-                      <span>{child.label}</span>
-                    </Link>
-                  </SidebarMenuSubButton>
-                </SidebarMenuSubItem>
-              ))}
-            </SidebarMenuSub>
-          </CollapsibleContent>
-        </SidebarMenuItem>
-      </Collapsible>
-    )
+function groupNavItems(items: CmsNavigationItem[]) {
+  const groups: { label: string | null; items: CmsNavigationItem[] }[] = []
+  const groupMap = new Map<string | null, CmsNavigationItem[]>()
+
+  for (const item of items) {
+    const key = item.group ?? null
+    if (!groupMap.has(key)) {
+      const arr: CmsNavigationItem[] = []
+      groupMap.set(key, arr)
+      groups.push({ label: key, items: arr })
+    }
+    groupMap.get(key)!.push(item)
   }
 
-  return (
-    <SidebarMenuItem className="px-2">
-      <SidebarMenuButton asChild>
-        <Link href={item.href}>
-          {item.icon && <item.icon className="size-3.5!" />}
-          <span>{item.label}</span>
-        </Link>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
-  )
+  return groups
 }
 
 export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
   const session = await getSession()
   const settings = await getSetting()
   const user = session?.user ?? null
+  const groups = groupNavItems(cmsNavigation)
 
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="border-b border-border h-14 items-center flex w-full">
         <div className="flex items-center gap-2 w-full relative h-full">
           <Link href="/cms" className="flex items-center gap-2 w-full">
-            <Avatar className="size-6.5">
+            <Avatar className="size-8">
               <AvatarImage src={'/favicon.ico'} />
-              <AvatarFallback className="text-sm font-semibold">
+              <AvatarFallback className="text-sm font-semibold text-foreground">
                 {settings?.siteName?.charAt(0) ?? cms.name?.charAt(0)}
               </AvatarFallback>
             </Avatar>
-            <div className="flex items-center gap-1 w-full group-data-[collapsible=icon]:hidden">
-              <span className="text-sm font-semibold line-clamp-1">{settings?.siteName ?? cms.name}</span>
+            <div className="flex text-foreground items-center gap-1 w-full group-data-[collapsible=icon]:hidden">
+              <span className="text-sm font-medium line-clamp-1">
+                {settings?.siteName ?? cms.name}
+              </span>
             </div>
           </Link>
-          <SidebarTrigger className="hidden md:flex" />
         </div>
       </SidebarHeader>
-      <SidebarContent className="gap-2">
-        <SidebarMenu className="py-2 gap-2">
-          {cmsNavigation.map((item) => (
-            <NavItem key={item.href + item.label} item={item} />
-          ))}
-        </SidebarMenu>
-        <SidebarMenu className="py-2 mt-auto border-t border-border px-2">
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild>
-              <Link href="/cms/users">
-                <Users className="size-3.5!" />
+      <SidebarContent>
+        <SidebarGroup className="pb-1">
+          <CmsSearch />
+        </SidebarGroup>
+
+        {groups.map((group) => (
+          <Fragment key={group.label ?? '_ungrouped'}>
+            <SidebarGroup>
+              {group.label && <SidebarGroupLabel>{group.label}</SidebarGroupLabel>}
+              <SidebarMenu>
+                {group.items.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <CmsNavLink href={item.href}>
+                      {item.icon && (
+                        <item.icon className="text-muted-foreground" absoluteStrokeWidth />
+                      )}
+                      <span>{item.label}</span>
+                    </CmsNavLink>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+          </Fragment>
+        ))}
+
+        <SidebarGroup className="mt-auto">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <CmsNavLink href="/cms/users">
+                <Users />
                 <span>Users</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <SidebarMenuButton asChild>
-              <Link href="/cms/settings">
-                <Settings className="size-3.5!" />
+              </CmsNavLink>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <CmsNavLink href="/cms/settings">
+                <Settings />
                 <span>Settings</span>
-              </Link>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </SidebarMenu>
+              </CmsNavLink>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarGroup>
       </SidebarContent>
       <SidebarFooter>
         {user && (
@@ -9543,7 +9365,6 @@ export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
           </div>
         )}
       </SidebarFooter>
-      <SidebarRail />
     </Sidebar>
   )
 }
@@ -9563,7 +9384,7 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger
+  AlertDialogTrigger,
 } from '@cms/components/ui/alert-dialog'
 import { Button } from '@cms/components/ui/button'
 import { Trash2 } from 'lucide-react'
@@ -9585,7 +9406,7 @@ export function DeleteDialog({
   isPending = false,
   title = 'Are you sure?',
   description = 'This action cannot be undone. This will permanently delete this item.',
-  trigger
+  trigger,
 }: DeleteDialogProps) {
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
@@ -9634,18 +9455,24 @@ export function DeleteButton({ onClick, label = 'item', count }: DeleteButtonPro
 function pageHeaderTemplate() {
   return `interface PageHeaderProps {
   title: string
-  description: string
   children?: React.ReactNode
+  search?: React.ReactNode
+  actions?: React.ReactNode
+  back?: React.ReactNode
 }
 
-export function PageHeader({ title, description, children }: PageHeaderProps) {
+export function PageHeader({ title, children, search, actions, back }: PageHeaderProps) {
   return (
-    <div className="flex items-center justify-between w-full">
-      <div className="flex flex-col">
-        <h2 className="text-base font-semibold tracking-tight">{title}</h2>
-        <p className="text-muted-foreground text-sm">{description}</p>
+    <div className="grid grid-cols-3 items-center justify-between w-full h-14 px-4 border-b border-border">
+      <div className="flex items-center justify-start gap-2 w-full">{back && back}</div>
+      <div className="flex items-center justify-center gap-2">
+        <h2 className="text-sm font-medium tracking-tight">{title}</h2>
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        {children && children}
+        {search && search}
+        {actions && actions}
       </div>
-      {children && <div className="flex items-center gap-2">{children}</div>}
     </div>
   )
 }
@@ -9664,7 +9491,7 @@ const statusStyles: Record<StatusVariant, string> = {
   success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
   warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300',
   error: 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300',
-  info: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300'
+  info: 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300',
 }
 
 interface StatusBadgeProps extends Omit<BadgeProps, 'variant'> {
@@ -9682,7 +9509,11 @@ export function StatusBadge({ status, className, ...props }: StatusBadgeProps) {
 }
 
 /** Map boolean values to status badges */
-export function BooleanBadge({ value, trueLabel = 'Yes', falseLabel = 'No' }: {
+export function BooleanBadge({
+  value,
+  trueLabel = 'Yes',
+  falseLabel = 'No',
+}: {
   value: boolean
   trueLabel?: string
   falseLabel?: string
@@ -9706,22 +9537,44 @@ function cmsDataTemplate(projectName) {
 
 // src/init/templates/data/navigation.ts
 function navigationDataTemplate() {
-  return `import { House } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
+  return `import type { LucideIcon } from 'lucide-react'
+import { ChartSpline, FileText, House, ImagePlay, Tag } from 'lucide-react'
 
 export interface CmsNavigationItem {
   label: string
   href: string
   icon?: LucideIcon
-  children?: CmsNavigationItem[]
+  group?: string
 }
 
 export const cmsNavigation: CmsNavigationItem[] = [
   {
-    label: 'Dashboard',
+    label: 'Overview',
     href: '/cms',
-    icon: House
-  }
+    icon: House,
+  },
+  {
+    label: 'Analytics',
+    href: '/cms/analytics',
+    icon: ChartSpline,
+  },
+  {
+    label: 'Media',
+    href: '/cms/media',
+    icon: ImagePlay,
+  },
+  {
+    label: 'Categories',
+    href: '/cms/categories',
+    icon: Tag,
+    group: 'Blog',
+  },
+  {
+    label: 'Posts',
+    href: '/cms/posts',
+    icon: FileText,
+    group: 'Blog',
+  },
 ]
 `;
 }
@@ -9795,14 +9648,10 @@ export function CmsThemeProvider({ children }: { children: React.ReactNode }) {
 
   const value = React.useMemo(
     () => ({ theme, setTheme, resolvedTheme: resolved }),
-    [theme, setTheme, resolved]
+    [theme, setTheme, resolved],
   )
 
-  return (
-    <CmsThemeContext.Provider value={value}>
-      {children}
-    </CmsThemeContext.Provider>
-  )
+  return <CmsThemeContext.Provider value={value}>{children}</CmsThemeContext.Provider>
 }
 
 export function useTheme(): ThemeContext {
@@ -9842,11 +9691,11 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
       if (result.success && result.files) {
         const images: EditorImageUploadResult[] = result.files.map((f) => ({
           url: f.url,
-          filename: f.filename
+          filename: f.filename,
         }))
         onImagesUploadedRef.current(images)
       }
-    }
+    },
   })
 
   const isUploading = mutation.isPending
@@ -9857,21 +9706,19 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
       if (imageFiles.length === 0) return
       upload(imageFiles, 'images')
     },
-    [upload]
+    [upload],
   )
 
   const handleDrop = React.useCallback(
     (e: React.DragEvent) => {
       e.preventDefault()
       e.stopPropagation()
-      const files = Array.from(e.dataTransfer.files).filter((f) =>
-        f.type.startsWith('image/')
-      )
+      const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith('image/'))
       if (files.length > 0) {
         uploadImages(files)
       }
     },
-    [uploadImages]
+    [uploadImages],
   )
 
   const openFilePicker = React.useCallback(() => {
@@ -9886,7 +9733,7 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
       }
       e.target.value = ''
     },
-    [uploadImages]
+    [uploadImages],
   )
 
   return {
@@ -9896,7 +9743,7 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
     handleDrop,
     openFilePicker,
     fileInputRef,
-    handleFileInputChange
+    handleFileInputChange,
   }
 }
 `;
@@ -9920,7 +9767,7 @@ export function useLocalStorage<T>(key: string) {
         // Silent failure for localStorage access errors
       }
     },
-    [prefixedKey]
+    [prefixedKey],
   )
 
   const getItem = React.useCallback((): T | null => {
@@ -9953,18 +9800,36 @@ export function useLocalStorage<T>(key: string) {
 `;
 }
 
+// src/init/templates/hooks/use-mobile.ts
+function useMobileHookTemplate() {
+  return `import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(\`(max-width: \${MOBILE_BREAKPOINT - 1}px)\`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}
+`;
+}
+
 // src/init/templates/hooks/use-upload.ts
 function useUploadHookTemplate() {
   return `'use client'
 
-import type {
-  UploadFileResult,
-  UploadProgress
-} from '@cms/types'
-import {
-  type FileValidationConfig,
-  validateFiles
-} from '@cms/utils/validation'
+import type { UploadFileResult, UploadProgress } from '@cms/types'
+import { type FileValidationConfig, validateFiles } from '@cms/utils/validation'
 import { type UseMutationResult, useMutation } from '@tanstack/react-query'
 import * as React from 'react'
 
@@ -10012,7 +9877,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
     onProgress,
     onSuccess,
     onError,
-    prefix: defaultPrefix
+    prefix: defaultPrefix,
   } = options
 
   const validationConfig = React.useMemo<FileValidationConfig>(() => {
@@ -10022,7 +9887,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
       const parsedTypes = parseAcceptTypes(accept)
       if (config.allowedTypes && config.allowedTypes.length > 0) {
         config.allowedTypes = [...config.allowedTypes, ...parsedTypes].filter(
-          (v, i, a) => a.indexOf(v) === i
+          (v, i, a) => a.indexOf(v) === i,
         )
       } else {
         config.allowedTypes = parsedTypes
@@ -10045,7 +9910,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
         filename: file.name,
         progress: 0,
         loaded: 0,
-        total: file.size
+        total: file.size,
       }))
       setProgress(initialProgress)
       onProgress?.(initialProgress)
@@ -10067,9 +9932,9 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
             return {
               ...p,
               progress: newProgress,
-              loaded: Math.floor((p.total * newProgress) / 100)
+              loaded: Math.floor((p.total * newProgress) / 100),
             }
-          })
+          }),
         )
       }, 200)
 
@@ -10083,7 +9948,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
 
         const response = await fetch('/api/cms/upload', {
           method: 'POST',
-          body: formData
+          body: formData,
         })
 
         const result = (await response.json()) as UploadFileResult
@@ -10093,7 +9958,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
             filename: file.name,
             progress: 100,
             loaded: file.size,
-            total: file.size
+            total: file.size,
           }))
           setProgress(completeProgress)
           onProgress?.(completeProgress)
@@ -10115,14 +9980,14 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
     onError: (error) => {
       onError?.(error)
       setProgress([])
-    }
+    },
   })
 
   const upload = React.useCallback(
     (files: File[], prefix?: string) => {
       mutation.mutate({ files, prefix })
     },
-    [mutation]
+    [mutation],
   )
 
   const validate = React.useCallback(
@@ -10130,10 +9995,10 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
       const result = validateFiles(files, validationConfig)
       return {
         valid: result.valid,
-        errors: result.errors.map((e) => \`\${e.filename}: \${e.error}\`)
+        errors: result.errors.map((e) => \`\${e.filename}: \${e.error}\`),
       }
     },
-    [validationConfig]
+    [validationConfig],
   )
 
   return { mutation, progress, upload, validate }
@@ -10153,7 +10018,7 @@ export function useUsers() {
   return useQuery<UsersResponse>({
     queryKey: ['users'],
     queryFn: () => getUsers(),
-    staleTime: 0
+    staleTime: 0,
   })
 }
 `;
@@ -10163,9 +10028,9 @@ export function useUsers() {
 function formSettingsActionTemplate() {
   return `'use server'
 
-import { eq } from 'drizzle-orm'
 import db from '@cms/db'
 import { formSettings } from '@cms/db/schema'
+import { eq } from 'drizzle-orm'
 
 export interface FormSettingsData {
   id: number
@@ -10189,9 +10054,7 @@ export interface FormSettingsResult {
   settings?: FormSettingsData
 }
 
-export async function getFormSettings(
-  formName: string
-): Promise<FormSettingsData | null> {
+export async function getFormSettings(formName: string): Promise<FormSettingsData | null> {
   try {
     const [settings] = await db
       .select()
@@ -10207,7 +10070,7 @@ export async function getFormSettings(
 
 export async function upsertFormSettings(
   formName: string,
-  data: UpsertFormSettingsInput
+  data: UpsertFormSettingsInput,
 ): Promise<FormSettingsResult> {
   try {
     const existing = await getFormSettings(formName)
@@ -10238,8 +10101,7 @@ export async function upsertFormSettings(
     console.error(\`Error upserting form settings for \${formName}:\`, error)
     return {
       success: false,
-      error:
-        error instanceof Error ? error.message : 'Failed to save form settings',
+      error: error instanceof Error ? error.message : 'Failed to save form settings',
     }
   }
 }
@@ -10255,7 +10117,7 @@ export async function getAllFormSettings(): Promise<FormSettingsData[]> {
 }
 
 export async function testFormWebhook(
-  formName: string
+  formName: string,
 ): Promise<{ success: boolean; error?: string }> {
   try {
     const settings = await getFormSettings(formName)
@@ -10286,8 +10148,7 @@ export async function testFormWebhook(
   } catch (error) {
     return {
       success: false,
-      error:
-        error instanceof Error ? error.message : 'Failed to send test webhook',
+      error: error instanceof Error ? error.message : 'Failed to send test webhook',
     }
   }
 }
@@ -10456,10 +10317,10 @@ export async function uploadImageFromUrl(
 function usersActionTemplate() {
   return `'use server'
 
+import { auth } from '@cms/auth'
 import db from '@cms/db'
-import { user, account } from '@cms/db/schema'
+import { user } from '@cms/db/schema'
 import { eq } from 'drizzle-orm'
-import { auth } from '@cms/auth'
 
 export interface UserData {
   id: string
@@ -10572,15 +10433,9 @@ export async function getUsers(): Promise<UsersResponse> {
 /**
  * Update a user's role
  */
-export async function updateUserRole(
-  userId: string,
-  role: string,
-): Promise<UpdateUserRoleResult> {
+export async function updateUserRole(userId: string, role: string): Promise<UpdateUserRoleResult> {
   try {
-    await db
-      .update(user)
-      .set({ role, updatedAt: new Date() })
-      .where(eq(user.id, userId))
+    await db.update(user).set({ role, updatedAt: new Date() }).where(eq(user.id, userId))
 
     return { success: true }
   } catch (error) {
@@ -10730,10 +10585,21 @@ function trimMathBlock(content: string): string {
 const shiki = createHighlighterCoreSync({
   themes: [githubDark, githubLight],
   langs: [
-    javascript, typescript, jsx, tsx, python, rust, go,
-    json, yaml, css, sql, shellscript, markdown
+    javascript,
+    typescript,
+    jsx,
+    tsx,
+    python,
+    rust,
+    go,
+    json,
+    yaml,
+    css,
+    sql,
+    shellscript,
+    markdown,
   ],
-  engine: createJavaScriptRegexEngine()
+  engine: createJavaScriptRegexEngine(),
 })
 
 const loadedLangs = shiki.getLoadedLanguages()
@@ -10775,11 +10641,11 @@ const md = MarkdownIt({
       lang: language,
       themes: { light: 'github-light', dark: 'github-dark' },
       defaultColor: false,
-      transformers: [transformerNotationHighlight(), transformerNotationDiff()]
+      transformers: [transformerNotationHighlight(), transformerNotationDiff()],
     })
     const escapedCode = code.replace(/</g, '&lt;').replace(/>/g, '&gt;')
     return \`<div class="code-block-wrapper not-prose" data-lang="\${language}"><button class="copy-button" data-code="\${escapedCode.replace(/"/g, '&quot;')}" aria-label="Copy code">Copy</button>\${highlighted}</div>\`
-  }
+  },
 })
   .use(headingAnchorPlugin)
   .use(dollarmath, {
@@ -10792,7 +10658,7 @@ const md = MarkdownIt({
       return renderToString(content, {
         displayMode,
         throwOnError: false,
-        strict: 'ignore'
+        strict: 'ignore',
       })
     },
     labelNormalizer(label: string) {
@@ -10800,7 +10666,7 @@ const md = MarkdownIt({
     },
     labelRenderer(label: string) {
       return \`<a href="#\${label}" class="mathlabel" title="Permalink to this equation">\xB6</a>\`
-    }
+    },
   })
 
 export function renderMarkdownSync(src: string): string {
@@ -10895,7 +10761,7 @@ export interface AuthSession {
 export enum UserRole {
   ADMIN = 'admin',
   EDITOR = 'editor',
-  MEMBER = 'member'
+  MEMBER = 'member',
 }
 
 export interface UserWithRole extends AuthUser {
@@ -10904,17 +10770,11 @@ export interface UserWithRole extends AuthUser {
 
 /** Type guard to check if a value is a valid UserRole */
 export function isUserRole(value: unknown): value is UserRole {
-  return (
-    typeof value === 'string' &&
-    Object.values(UserRole).includes(value as UserRole)
-  )
+  return typeof value === 'string' && Object.values(UserRole).includes(value as UserRole)
 }
 
 /** Check if user has one of the allowed roles */
-export function hasRequiredRole(
-  userRole: UserRole,
-  allowedRoles: UserRole[]
-): boolean {
+export function hasRequiredRole(userRole: UserRole, allowedRoles: UserRole[]): boolean {
   return allowedRoles.includes(userRole)
 }
 
@@ -11100,7 +10960,7 @@ export function createMetadata({
   description,
   path,
   ogImage,
-  noIndex = false
+  noIndex = false,
 }: CreateMetadataOptions): Metadata {
   const metadata: Metadata = {
     title,
@@ -11109,14 +10969,14 @@ export function createMetadata({
       title,
       description,
       type: 'website',
-      ...(ogImage && { images: [{ url: ogImage }] })
+      ...(ogImage && { images: [{ url: ogImage }] }),
     },
     twitter: {
       card: ogImage ? 'summary_large_image' : 'summary',
       title,
       description,
-      ...(ogImage && { images: [ogImage] })
-    }
+      ...(ogImage && { images: [ogImage] }),
+    },
   }
 
   if (path) {
@@ -11140,7 +11000,7 @@ export function generateArticleSchema({
   imageUrl,
   datePublished,
   dateModified,
-  authorName
+  authorName,
 }: {
   title: string
   description: string
@@ -11160,8 +11020,8 @@ export function generateArticleSchema({
     datePublished,
     ...(dateModified && { dateModified }),
     ...(authorName && {
-      author: { '@type': 'Person', name: authorName }
-    })
+      author: { '@type': 'Person', name: authorName },
+    }),
   }
 }
 
@@ -11214,20 +11074,16 @@ function isFileTypeAllowed(file: File, allowedTypes: string[]): boolean {
  */
 export function validateFiles(
   files: File[],
-  config: FileValidationConfig = {}
+  config: FileValidationConfig = {},
 ): FileValidationResult {
-  const {
-    maxSizeInBytes = DEFAULT_MAX_SIZE,
-    allowedTypes,
-    maxFiles = DEFAULT_MAX_FILES
-  } = config
+  const { maxSizeInBytes = DEFAULT_MAX_SIZE, allowedTypes, maxFiles = DEFAULT_MAX_FILES } = config
 
   const errors: FileValidationError[] = []
 
   if (files.length > maxFiles) {
     errors.push({
       filename: '',
-      error: \`Too many files. Maximum is \${maxFiles}.\`
+      error: \`Too many files. Maximum is \${maxFiles}.\`,
     })
   }
 
@@ -11236,14 +11092,14 @@ export function validateFiles(
       const maxMB = Math.round(maxSizeInBytes / (1024 * 1024))
       errors.push({
         filename: file.name,
-        error: \`File exceeds maximum size of \${maxMB}MB.\`
+        error: \`File exceeds maximum size of \${maxMB}MB.\`,
       })
     }
 
     if (allowedTypes && allowedTypes.length > 0 && !isFileTypeAllowed(file, allowedTypes)) {
       errors.push({
         filename: file.name,
-        error: \`File type "\${file.type || 'unknown'}" is not allowed.\`
+        error: \`File type "\${file.type || 'unknown'}" is not allowed.\`,
       })
     }
   }
@@ -11297,17 +11153,15 @@ function webhookUtilTemplate() {
  */
 export function sendWebhook(
   webhookUrl: string | null | undefined,
-  payload: Record<string, unknown>
+  payload: Record<string, unknown>,
 ): void {
-  if (!webhookUrl) return
-  // Fire-and-forget: runs in background, doesn't block
+  if (!webhookUrl) return // Fire-and-forget: runs in background, doesn't block
   ;(async () => {
     try {
       const formData = new URLSearchParams()
       for (const [key, value] of Object.entries(payload)) {
         if (value === null || value === undefined) continue
-        const stringValue =
-          typeof value === 'object' ? JSON.stringify(value) : String(value)
+        const stringValue = typeof value === 'object' ? JSON.stringify(value) : String(value)
         formData.append(key, stringValue)
       }
       await fetch(webhookUrl, {
@@ -11335,6 +11189,7 @@ function scaffoldComponents({ cwd, config }) {
   }
   write("cms-globals.css", cmsGlobalsCssTemplate());
   write("components/layout/cms-providers.tsx", cmsProvidersTemplate());
+  write("components/layout/cms-nav-link.tsx", cmsNavLinkTemplate());
   write("components/layout/cms-sidebar.tsx", cmsSidebarTemplate());
   write("components/layout/cms-header.tsx", cmsHeaderTemplate());
   write("components/layout/cms-search.tsx", cmsSearchTemplate());
@@ -11360,6 +11215,7 @@ function scaffoldComponents({ cwd, config }) {
   write("hooks/use-local-storage.ts", useLocalStorageHookTemplate());
   write("hooks/use-cms-theme.tsx", useCmsThemeTemplate());
   write("hooks/use-users.ts", useUsersHookTemplate());
+  write("hooks/use-mobile.ts", useMobileHookTemplate());
   const projectName = detectProjectName(cwd);
   write("data/cms.ts", cmsDataTemplate(projectName));
   write("data/navigation.ts", navigationDataTemplate());
@@ -11596,6 +11452,7 @@ var CORE_DEPS = [
   "nuqs",
   "sonner",
   // Styling utilities
+  "geist",
   "class-variance-authority",
   "clsx",
   "tailwind-merge",
@@ -11841,24 +11698,18 @@ import path32 from "path";
 
 // src/init/templates/pages/authenticated-layout.ts
 function authenticatedLayoutTemplate() {
-  return `import { CmsHeader } from '@cms/components/layout/cms-header'
+  return `import { requireRole } from '@cms/auth/middleware'
 import { CmsSidebar } from '@cms/components/layout/cms-sidebar'
-import { requireRole } from '@cms/auth/middleware'
-import { UserRole } from '@cms/types/auth'
 import { SidebarInset, SidebarProvider } from '@cms/components/ui/sidebar'
+import { UserRole } from '@cms/types/auth'
 
-export default async function CmsAuthLayout({
-  children
-}: {
-  children: React.ReactNode
-}) {
+export default async function CmsAuthLayout({ children }: { children: React.ReactNode }) {
   await requireRole([UserRole.ADMIN, UserRole.EDITOR])
 
   return (
     <SidebarProvider>
       <CmsSidebar />
       <SidebarInset>
-        <CmsHeader />
         <main>{children}</main>
       </SidebarInset>
     </SidebarProvider>
@@ -11871,11 +11722,17 @@ export default async function CmsAuthLayout({
 function cmsLayoutTemplate() {
   return `import '@cms/cms-globals.css'
 import { CmsProviders } from '@cms/components/layout/cms-providers'
+import { GeistMono } from 'geist/font/mono'
+import { GeistSans } from 'geist/font/sans'
 
 export default function CmsLayout({ children }: { children: React.ReactNode }) {
   return (
     <CmsProviders>
-      <div className="cms-root min-h-screen">{children}</div>
+      <div
+        className={\`cms-root min-h-screen antialiased \${GeistSans.variable} \${GeistMono.variable}\`}
+      >
+        {children}
+      </div>
     </CmsProviders>
   )
 }
@@ -11885,8 +11742,8 @@ export default function CmsLayout({ children }: { children: React.ReactNode }) {
 // src/init/templates/pages/dashboard-page.ts
 function dashboardPageTemplate() {
   return `import { PageHeader } from '@cms/components/shared/page-header'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@cms/components/ui/card'
 import { Badge } from '@cms/components/ui/badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@cms/components/ui/card'
 import { FileText, Settings, Users } from 'lucide-react'
 import Link from 'next/link'
 
@@ -11895,32 +11752,27 @@ const quickLinks = [
     title: 'Users',
     description: 'Manage admin users and roles',
     href: '/cms/users',
-    icon: Users
+    icon: Users,
   },
   {
     title: 'Settings',
     description: 'Configure CMS settings',
     href: '/cms/settings',
-    icon: Settings
+    icon: Settings,
   },
   {
     title: 'Generate',
     description: 'Add a new resource from a schema',
     href: '#',
     icon: FileText,
-    hint: 'npx betterstart generate <schema>'
-  }
+    hint: 'npx betterstart generate <schema>',
+  },
 ]
 
 export default function DashboardPage() {
   return (
     <div className="flex flex-col">
-      <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader
-          title="Dashboard"
-          description="Welcome to your CMS admin panel"
-        />
-      </div>
+      <PageHeader title="Dashboard" />
       <div className="p-6 space-y-6">
         <div className="grid gap-4 md:grid-cols-3">
           {quickLinks.map((link) => (
@@ -11990,7 +11842,7 @@ import { LoginForm } from './login-form'
 
 export const metadata: Metadata = {
   title: 'CMS Login',
-  robots: { index: false, follow: false }
+  robots: { index: false, follow: false },
 }
 
 export default function LoginPage() {
@@ -11999,9 +11851,7 @@ export default function LoginPage() {
       <div className="w-full max-w-sm">
         <div className="mb-8 text-center">
           <h1 className="text-2xl font-semibold tracking-tight">CMS</h1>
-          <p className="text-muted-foreground text-sm mt-1">
-            Sign in to access the admin panel
-          </p>
+          <p className="text-muted-foreground text-sm mt-1">Sign in to access the admin panel</p>
         </div>
         <LoginForm />
       </div>
@@ -12036,7 +11886,7 @@ export function LoginForm() {
     try {
       const result = await authClient.signIn.email({
         email,
-        password
+        password,
       })
 
       if (result.error) {
@@ -12056,9 +11906,7 @@ export function LoginForm() {
   return (
     <form onSubmit={handleSubmit} className="space-y-5">
       {error && (
-        <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
-          {error}
-        </div>
+        <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">{error}</div>
       )}
 
       <div className="space-y-2">
@@ -12103,6 +11951,7 @@ export function LoginForm() {
 function createUserDialogTemplate() {
   return `'use client'
 
+import { createUser } from '@cms/actions/users'
 import { Button } from '@cms/components/ui/button'
 import {
   Dialog,
@@ -12110,11 +11959,10 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
 } from '@cms/components/ui/dialog'
 import { Input } from '@cms/components/ui/input'
 import { Label } from '@cms/components/ui/label'
-import { createUser } from '@cms/actions/users'
 import { useQueryClient } from '@tanstack/react-query'
 import { Loader2, UserPlus } from 'lucide-react'
 import * as React from 'react'
@@ -12224,6 +12072,7 @@ export function CreateUserDialog() {
 function editRoleDialogTemplate() {
   return `'use client'
 
+import { updateUserRole } from '@cms/actions/users'
 import { Button } from '@cms/components/ui/button'
 import {
   Dialog,
@@ -12231,7 +12080,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
 } from '@cms/components/ui/dialog'
 import { Label } from '@cms/components/ui/label'
 import {
@@ -12239,9 +12088,8 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
+  SelectValue,
 } from '@cms/components/ui/select'
-import { updateUserRole } from '@cms/actions/users'
 import { UserRole } from '@cms/types/auth'
 import { useQueryClient } from '@tanstack/react-query'
 import { Loader2 } from 'lucide-react'
@@ -12255,12 +12103,7 @@ interface EditRoleDialogProps {
   children: React.ReactNode
 }
 
-export function EditRoleDialog({
-  userId,
-  currentRole,
-  userName,
-  children
-}: EditRoleDialogProps) {
+export function EditRoleDialog({ userId, currentRole, userName, children }: EditRoleDialogProps) {
   const [open, setOpen] = React.useState(false)
   const [role, setRole] = React.useState(currentRole)
   const [isPending, startTransition] = React.useTransition()
@@ -12289,9 +12132,7 @@ export function EditRoleDialog({
       <DialogContent className="sm:max-w-[350px]">
         <DialogHeader>
           <DialogTitle>Edit Role</DialogTitle>
-          <DialogDescription>
-            Change the role for {userName}
-          </DialogDescription>
+          <DialogDescription>Change the role for {userName}</DialogDescription>
         </DialogHeader>
         <div className="space-y-4">
           <div className="space-y-2">
@@ -12308,17 +12149,10 @@ export function EditRoleDialog({
             </Select>
           </div>
           <div className="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              onClick={() => setOpen(false)}
-              disabled={isPending}
-            >
+            <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
               Cancel
             </Button>
-            <Button
-              onClick={handleSave}
-              disabled={isPending || role === currentRole}
-            >
+            <Button onClick={handleSave} disabled={isPending || role === currentRole}>
               {isPending && <Loader2 className="size-4 mr-1 animate-spin" />}
               Save
             </Button>
@@ -12335,11 +12169,7 @@ export function EditRoleDialog({
 function usersColumnsTemplate() {
   return `'use client'
 
-import React from 'react'
-import {
-  Avatar,
-  AvatarFallback
-} from '@cms/components/ui/avatar'
+import { deleteUser } from '@cms/actions/users'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -12351,6 +12181,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@cms/components/ui/alert-dialog'
+import { Avatar, AvatarFallback } from '@cms/components/ui/avatar'
 import { Badge } from '@cms/components/ui/badge'
 import { Button } from '@cms/components/ui/button'
 import {
@@ -12359,14 +12190,14 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuTrigger
+  DropdownMenuTrigger,
 } from '@cms/components/ui/dropdown-menu'
 import type { UserData } from '@cms/types/auth'
-import type { ColumnDef } from '@tanstack/react-table'
 import { useQueryClient } from '@tanstack/react-query'
+import type { ColumnDef } from '@tanstack/react-table'
 import { ArrowUpDown, Edit, MoreHorizontal, Trash } from 'lucide-react'
+import React from 'react'
 import { toast } from 'sonner'
-import { deleteUser } from '@cms/actions/users'
 import { EditRoleDialog } from './edit-role-dialog'
 
 function getInitials(nameOrEmail: string): string {
@@ -12417,10 +12248,7 @@ function DeleteUserAction({
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger asChild>
-        <DropdownMenuItem
-          className="text-destructive"
-          onSelect={(e) => e.preventDefault()}
-        >
+        <DropdownMenuItem className="text-destructive" onSelect={(e) => e.preventDefault()}>
           <Trash className="size-4 mr-2" />
           Delete user
         </DropdownMenuItem>
@@ -12429,8 +12257,8 @@ function DeleteUserAction({
         <AlertDialogHeader>
           <AlertDialogTitle>Are you sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete{' '}
-            <strong>{userName}</strong> and all of their data.
+            This action cannot be undone. This will permanently delete <strong>{userName}</strong>{' '}
+            and all of their data.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -12478,7 +12306,7 @@ export const columns: ColumnDef<UserData>[] = [
           </div>
         </div>
       )
-    }
+    },
   },
   {
     accessorKey: 'emailVerified',
@@ -12490,7 +12318,7 @@ export const columns: ColumnDef<UserData>[] = [
           {verified ? 'Verified' : 'Unverified'}
         </Badge>
       )
-    }
+    },
   },
   {
     accessorKey: 'role',
@@ -12520,7 +12348,7 @@ export const columns: ColumnDef<UserData>[] = [
           </Badge>
         </EditRoleDialog>
       )
-    }
+    },
   },
   {
     accessorKey: 'createdAt',
@@ -12541,11 +12369,11 @@ export const columns: ColumnDef<UserData>[] = [
           {date.toLocaleDateString('en-US', {
             month: 'short',
             day: 'numeric',
-            year: 'numeric'
+            year: 'numeric',
           })}
         </div>
       )
-    }
+    },
   },
   {
     id: 'actions',
@@ -12564,9 +12392,7 @@ export const columns: ColumnDef<UserData>[] = [
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>Actions</DropdownMenuLabel>
-              <DropdownMenuItem
-                onClick={() => navigator.clipboard.writeText(row.original.id)}
-              >
+              <DropdownMenuItem onClick={() => navigator.clipboard.writeText(row.original.id)}>
                 Copy user ID
               </DropdownMenuItem>
               <DropdownMenuSeparator />
@@ -12579,8 +12405,8 @@ export const columns: ColumnDef<UserData>[] = [
           </DropdownMenu>
         </div>
       )
-    }
-  }
+    },
+  },
 ]
 `;
 }
@@ -12596,10 +12422,7 @@ export default function UsersPage() {
   return (
     <div className="flex flex-col">
       <div className="flex items-center justify-between bg-card px-6 py-4 border-b">
-        <PageHeader
-          title="Users"
-          description="Manage all CMS users"
-        >
+        <PageHeader title="Users">
           <CreateUserDialog />
         </PageHeader>
       </div>
@@ -12616,6 +12439,18 @@ export default function UsersPage() {
 function usersTableTemplate() {
   return `'use client'
 
+import { authClient } from '@cms/auth/client'
+import { Button } from '@cms/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@cms/components/ui/table'
+import { useUsers } from '@cms/hooks/use-users'
+import type { UserData } from '@cms/types/auth'
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -12626,21 +12461,9 @@ import {
   getSortedRowModel,
   type SortingState,
   useReactTable,
-  type VisibilityState
+  type VisibilityState,
 } from '@tanstack/react-table'
 import * as React from 'react'
-import { Button } from '@cms/components/ui/button'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@cms/components/ui/table'
-import { useUsers } from '@cms/hooks/use-users'
-import { authClient } from '@cms/auth/client'
-import type { UserData } from '@cms/types/auth'
 
 interface UsersTableProps<TValue> {
   columns: ColumnDef<UserData, TValue>[]
@@ -12670,11 +12493,11 @@ export function UsersTable<TValue>({ columns }: UsersTableProps<TValue>) {
             email: session.user.email,
             name: session.user.name,
             image: session.user.image,
-            role: (session.user as { role?: string }).role || 'member'
+            role: (session.user as { role?: string }).role || 'member',
           }
-        : null
+        : null,
     },
-    state: { sorting, columnFilters, columnVisibility }
+    state: { sorting, columnFilters, columnVisibility },
   })
 
   return (
@@ -13614,32 +13437,37 @@ var seedCommand = new Command2("seed").description("Create the initial admin use
   const { execFile } = await import("child_process");
   const tsxBin = path36.join(cwd, "node_modules", ".bin", "tsx");
   const runSeed2 = (overwrite) => new Promise((resolve, reject) => {
-    execFile(tsxBin, [seedPath], {
-      cwd,
-      env: {
-        ...process.env,
-        SEED_EMAIL: email,
-        SEED_PASSWORD: password3,
-        SEED_NAME: name || "Admin",
-        ...overwrite ? { SEED_OVERWRITE: "true" } : {}
-      }
-    }, (err, stdout, stderr) => {
-      if (err && "code" in err && err.code === 2) {
-        resolve({ code: 2, stdout });
-      } else if (err) {
-        reject(new Error(stderr || err.message));
-      } else {
-        resolve({ code: 0, stdout });
+    execFile(
+      tsxBin,
+      [seedPath],
+      {
+        cwd,
+        env: {
+          ...process.env,
+          SEED_EMAIL: email,
+          SEED_PASSWORD: password3,
+          SEED_NAME: name || "Admin",
+          ...overwrite ? { SEED_OVERWRITE: "true" } : {}
+        }
+      },
+      (err, stdout, stderr) => {
+        if (err && "code" in err && err.code === 2) {
+          resolve({ code: 2, stdout });
+        } else if (err) {
+          reject(new Error(stderr || err.message));
+        } else {
+          resolve({ code: 0, stdout });
+        }
       }
-    });
+    );
   });
-  const spinner4 = clack.spinner();
-  spinner4.start("Creating admin user...");
+  const spinner5 = clack.spinner();
+  spinner5.start("Creating admin user...");
   try {
     const result = await runSeed2(false);
     if (result.code === 2) {
       const existingName = result.stdout.split("\n").find((l) => l.startsWith("EXISTING_USER:"))?.replace("EXISTING_USER:", "")?.trim() || "unknown";
-      spinner4.stop(`Account already exists for ${email}`);
+      spinner5.stop(`Account already exists for ${email}`);
       const overwrite = await clack.confirm({
         message: `An admin account (${existingName}) already exists with this email. Replace it?`
       });
@@ -13651,14 +13479,14 @@ var seedCommand = new Command2("seed").description("Create the initial admin use
         }
         process.exit(0);
       }
-      spinner4.start("Replacing admin user...");
+      spinner5.start("Replacing admin user...");
       await runSeed2(true);
-      spinner4.stop("Admin user replaced");
+      spinner5.stop("Admin user replaced");
     } else {
-      spinner4.stop("Admin user created");
+      spinner5.stop("Admin user created");
     }
   } catch (err) {
-    spinner4.stop("Failed to create admin user");
+    spinner5.stop("Failed to create admin user");
     const errMsg = err instanceof Error ? err.message : String(err);
     clack.log.error(errMsg);
     clack.log.info("You can run the seed script manually:");
@@ -13682,7 +13510,7 @@ var seedCommand = new Command2("seed").description("Create the initial admin use
 var initCommand = new Command3("init").description("Scaffold CMS into a new or existing Next.js project").argument("[name]", "Project name (creates new directory if fresh project)").option("--preset <preset>", "Starter preset: blank, blog, or full", "blog").option("-y, --yes", "Skip all prompts (accept defaults)").option(
   "--database-url <url>",
   "PostgreSQL database connection string (postgres:// or postgresql://)"
-).action(
+).option("--force", "Overwrite all existing CMS files (nuclear option)").action(
   async (name, options) => {
     p4.intro(pc2.bgCyan(pc2.black(" BetterStart CMS ")));
     let cwd = process.cwd();
@@ -13691,21 +13519,45 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
     let isFreshProject = false;
     let srcDir;
     if (project.isExisting) {
-      p4.log.info(`Existing Next.js project detected`);
-      p4.log.info(`Package manager: ${pc2.cyan(pm)}`);
+      p4.log.info(`Next.js project detected ${pc2.dim("\xB7")} ${pc2.cyan(pm)}`);
       srcDir = project.hasSrcDir;
       if (!project.hasTypeScript) {
         p4.log.error("TypeScript is required. Please add a tsconfig.json first.");
         process.exit(1);
       }
-      if (project.conflicts.length > 0) {
-        p4.log.error("Conflicts detected:");
-        for (const conflict of project.conflicts) {
-          p4.log.warning(`  - ${conflict}`);
+      if (options.force) {
+        const nukeDirs = ["cms", "app/(cms)"];
+        const nukeFiles = ["cms.config.ts", "CMS.md", "drizzle.config.ts"];
+        let nuked = 0;
+        for (const dir of nukeDirs) {
+          const fullPath = path37.resolve(cwd, dir);
+          if (fs32.existsSync(fullPath)) {
+            fs32.rmSync(fullPath, { recursive: true, force: true });
+            nuked++;
+          }
+        }
+        for (const file of nukeFiles) {
+          const fullPath = path37.resolve(cwd, file);
+          if (fs32.existsSync(fullPath)) {
+            fs32.unlinkSync(fullPath);
+            nuked++;
+          }
         }
+        if (nuked > 0) {
+          p4.log.warn(`${pc2.yellow("Force mode:")} removed ${nuked} existing CMS paths`);
+        }
+        project = detectProject(cwd);
+      } else if (project.conflicts.length > 0) {
+        const conflictLines = project.conflicts.map((c) => `${pc2.yellow("\u25B2")} ${c}`);
+        conflictLines.push(
+          "",
+          pc2.dim("Existing files will not be overwritten."),
+          pc2.dim(`Use ${pc2.bold("--force")} to remove existing CMS files before scaffolding.`)
+        );
+        p4.note(conflictLines.join("\n"), pc2.yellow("Conflicts"));
         if (!options.yes) {
           const proceed = await p4.confirm({
-            message: "Continue anyway? (existing files will NOT be overwritten)",
+            message: "Continue anyway?",
             initialValue: true
           });
           if (p4.isCancel(proceed) || !proceed) {
@@ -13814,80 +13666,91 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
       ...getDefaultConfig(srcDir),
       features: { email: features.includeEmail }
     };
+    const results = [];
     const s = p4.spinner();
-    s.start("Creating CMS directory structure...");
+    s.start("Directory structure");
     const baseFiles = scaffoldBase({ cwd, config });
-    s.stop(`Created ${baseFiles.length} files`);
-    s.start("Configuring TypeScript path aliases...");
+    results.push({ label: "Directory structure", result: `${baseFiles.length} files` });
+    s.message("TypeScript aliases");
     const tsResult = scaffoldTsconfig(cwd);
-    s.stop(`Added ${tsResult.added.length} path aliases`);
-    s.start("Configuring Tailwind CSS...");
+    results.push({
+      label: "TypeScript aliases",
+      result: tsResult.added.length > 0 ? `${tsResult.added.length} paths` : "already set"
+    });
+    s.message("Tailwind CSS");
     const twResult = scaffoldTailwind(cwd, srcDir);
-    if (twResult.appended) {
-      s.stop(`Updated ${twResult.file}`);
-    } else if (twResult.file) {
-      s.stop("Tailwind already configured for CMS");
-    } else {
-      s.stop("No CSS file found (will configure later)");
-    }
-    s.start("Setting up environment variables...");
+    results.push({
+      label: "Tailwind CSS",
+      result: twResult.appended ? "updated" : twResult.file ? "already set" : "no CSS file"
+    });
+    s.message("Environment variables");
     const envResult = scaffoldEnv(cwd, { includeEmail: features.includeEmail, databaseUrl });
-    const envParts = [`Added ${envResult.added.length}`];
-    if (envResult.updated.length > 0) envParts.push(`updated ${envResult.updated.length}`);
-    s.stop(`${envParts.join(", ")} env vars in .env.local`);
-    s.start("Setting up database...");
+    const envCount = envResult.added.length + envResult.updated.length;
+    results.push({
+      label: "Environment variables",
+      result: envCount > 0 ? `${envCount} vars` : "already set"
+    });
+    s.message("Database");
     const dbFiles = scaffoldDatabase({ cwd, config });
-    s.stop(`Created ${dbFiles.length} database files`);
+    results.push({ label: "Database", result: `${dbFiles.length} files` });
+    s.message("Authentication");
+    const authFiles = scaffoldAuth({ cwd, config });
+    results.push({ label: "Authentication", result: `${authFiles.length} files` });
+    s.message("Components");
+    const compFiles = scaffoldComponents({ cwd, config });
+    results.push({ label: "Components", result: `${compFiles.length} files` });
+    s.message("Pages & layouts");
+    const layoutFiles = scaffoldLayout({ cwd, config });
+    results.push({ label: "Pages & layouts", result: `${layoutFiles.length} files` });
+    s.message("API routes");
+    const apiFiles = scaffoldApiRoutes({ cwd, config });
+    results.push({ label: "API routes", result: `${apiFiles.length} routes` });
+    s.message("Linter");
+    let linterResult;
+    if (project.linter.type === "none") {
+      const biomeResult = scaffoldBiome(cwd, project.linter);
+      linterResult = biomeResult.installed ? "biome (new)" : "none";
+    } else {
+      linterResult = project.linter.type;
+    }
+    results.push({ label: "Linter", result: linterResult });
+    const maxLabel = Math.max(...results.map((r) => r.label.length));
+    const noteLines = results.map((r) => {
+      const padded = r.label.padEnd(maxLabel + 3);
+      return `${pc2.green("\u2713")} ${padded}${pc2.dim(r.result)}`;
+    });
+    s.stop("");
+    process.stdout.write("\x1B[2A\x1B[J");
+    p4.note(noteLines.join("\n"), "Scaffolded CMS");
     const drizzleConfigPath = path37.join(cwd, "drizzle.config.ts");
     if (!dbFiles.includes("drizzle.config.ts") && fs32.existsSync(drizzleConfigPath)) {
-      if (!options.yes) {
+      if (options.force) {
+        const { drizzleConfigTemplate: drizzleConfigTemplate2 } = await import("./drizzle-config-EDKOEZ6G.js");
+        fs32.writeFileSync(drizzleConfigPath, drizzleConfigTemplate2(), "utf-8");
+        p4.log.success("Updated drizzle.config.ts");
+      } else if (!options.yes) {
         const overwrite = await p4.confirm({
           message: "drizzle.config.ts already exists. Overwrite with latest version?",
           initialValue: true
         });
         if (!p4.isCancel(overwrite) && overwrite) {
-          const { drizzleConfigTemplate: drizzleConfigTemplate2 } = await import("./drizzle-config-KISB26BA.js");
+          const { drizzleConfigTemplate: drizzleConfigTemplate2 } = await import("./drizzle-config-EDKOEZ6G.js");
           fs32.writeFileSync(drizzleConfigPath, drizzleConfigTemplate2(), "utf-8");
           p4.log.success("Updated drizzle.config.ts");
         }
       }
     }
-    s.start("Setting up authentication...");
-    const authFiles = scaffoldAuth({ cwd, config });
-    s.stop(`Created ${authFiles.length} auth files`);
-    s.start("Copying CMS components...");
-    const compFiles = scaffoldComponents({ cwd, config });
-    s.stop(`Created ${compFiles.length} component files`);
-    s.start("Creating CMS pages and layouts...");
-    const layoutFiles = scaffoldLayout({ cwd, config });
-    s.stop(`Created ${layoutFiles.length} page files`);
-    s.start("Creating API routes...");
-    const apiFiles = scaffoldApiRoutes({ cwd, config });
-    s.stop(`Created ${apiFiles.length} API routes`);
-    s.start("Checking for linter...");
-    if (project.linter.type === "none") {
-      s.stop("No linter found");
-      s.start("Setting up Biome linter...");
-      const biomeResult = scaffoldBiome(cwd, project.linter);
-      if (biomeResult.installed) {
-        s.stop("Created biome.json");
-      } else {
-        s.stop(`Biome skipped: ${biomeResult.skippedReason}`);
-      }
-    } else {
-      s.stop(`Linter: ${pc2.cyan(project.linter.type)} (${project.linter.configFile})`);
-    }
-    s.start("Installing dependencies (this may take a minute)...");
+    s.start("Installing dependencies (this may take a minute)");
     const depsResult = await installDependenciesAsync({
       cwd,
       pm,
       includeEmail: features.includeEmail,
       includeBiome: project.linter.type === "none"
     });
+    let depsInstalled = false;
     if (depsResult.success) {
-      s.stop(
-        `Installed ${depsResult.coreDeps.length} deps + ${depsResult.devDeps.length} dev deps`
-      );
+      s.stop("");
+      depsInstalled = true;
     } else {
       s.stop("Failed to install dependencies");
       p4.log.warning(depsResult.error ?? "Unknown error");
@@ -13897,24 +13760,59 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
   ${pc2.cyan(`${pm} add -D ${depsResult.devDeps.join(" ")}`)}`
       );
     }
-    s.start(`Applying ${features.preset} preset...`);
+    if (depsInstalled) {
+      process.stdout.write("\x1B[2A\x1B[J");
+    }
+    s.start(`Applying ${features.preset} preset`);
     const presetResult = scaffoldPreset({ cwd, config, preset: features.preset });
+    {
+      const entityNames = [];
+      const formNames = [];
+      const schemasDir = path37.join(cwd, config.paths.schemas);
+      const formsDir = path37.join(schemasDir, "forms");
+      if (fs32.existsSync(schemasDir)) {
+        for (const f of fs32.readdirSync(schemasDir)) {
+          if (f.endsWith(".json")) entityNames.push(f.replace(".json", ""));
+        }
+      }
+      if (fs32.existsSync(formsDir)) {
+        for (const f of fs32.readdirSync(formsDir)) {
+          if (f.endsWith(".json")) formNames.push(f.replace(".json", ""));
+        }
+      }
+      regenerateCmsDoc(cwd, config, {
+        preset: features.preset,
+        schemas: entityNames,
+        forms: formNames
+      });
+    }
+    s.stop("");
+    process.stdout.write("\x1B[2A\x1B[J");
+    const installLines = [];
+    if (depsInstalled) {
+      installLines.push(
+        `${pc2.green("\u2713")} Dependencies        ${pc2.dim(`${depsResult.coreDeps.length} deps + ${depsResult.devDeps.length} dev deps`)}`
+      );
+    }
     if (presetResult.errors.length > 0) {
-      s.stop(`Preset applied with ${presetResult.errors.length} warning(s)`);
+      installLines.push(
+        `${pc2.yellow("\u25B2")} Preset              ${pc2.dim(`${features.preset} \u2014 ${presetResult.errors.length} warning(s)`)}`
+      );
       for (const err of presetResult.errors) {
-        p4.log.warning(`  ${err}`);
+        installLines.push(`  ${pc2.dim(err)}`);
       }
     } else {
-      s.stop(
-        `Created ${presetResult.schemas.length} schemas, generated ${presetResult.generatedFiles.length} files`
+      installLines.push(
+        `${pc2.green("\u2713")} Preset              ${pc2.dim(`${features.preset} \u2014 ${presetResult.schemas.length} schemas, ${presetResult.generatedFiles.length} files`)}`
       );
     }
+    p4.note(installLines.join("\n"), "Installed");
     let dbPushed = false;
     if (depsResult.success && hasDbUrl(cwd)) {
-      s.start("Pushing database schema (drizzle-kit push)...");
+      s.start("Pushing database schema (drizzle-kit push)");
       const pushResult = await runDrizzlePush(cwd);
       if (pushResult.success) {
-        s.stop("Database schema pushed");
+        s.stop(`${pc2.green("\u2713")} Database schema pushed`);
         dbPushed = true;
       } else {
         s.stop("Database push failed");
@@ -13926,66 +13824,73 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
     let seedPassword;
     let seedSuccess = false;
     if (dbPushed && !options.yes) {
-      p4.log.step("Create your admin account");
-      const email = await p4.text({
-        message: "Admin email",
-        placeholder: "admin@example.com",
-        validate: (v) => {
-          if (!v || !v.includes("@")) return "Please enter a valid email";
+      p4.note(pc2.dim("Create your first admin user to access the CMS."), "Admin account");
+      const credentials = await p4.group(
+        {
+          email: () => p4.text({
+            message: "Admin email",
+            placeholder: "admin@example.com",
+            validate: (v) => {
+              if (!v || !v.includes("@")) return "Please enter a valid email";
+            }
+          }),
+          password: () => p4.password({
+            message: "Admin password",
+            validate: (v) => {
+              if (!v || v.length < 8) return "Password must be at least 8 characters";
+            }
+          })
+        },
+        {
+          onCancel: () => {
+            p4.cancel("Setup cancelled.");
+            process.exit(0);
+          }
         }
-      });
-      if (p4.isCancel(email)) {
-        p4.cancel("Setup cancelled.");
-        process.exit(0);
-      }
-      const password3 = await p4.password({
-        message: "Admin password",
-        validate: (v) => {
-          if (!v || v.length < 8) return "Password must be at least 8 characters";
+      );
+      seedEmail = credentials.email;
+      seedPassword = credentials.password;
+      s.start("Creating admin user");
+      let seedResult = await runSeed(
+        cwd,
+        config.paths?.cms ?? "./cms",
+        credentials.email,
+        credentials.password
+      );
+      if (seedResult.existingUser) {
+        s.stop(`${pc2.yellow("\u25B2")} Admin user already exists (${seedResult.existingUser})`);
+        const replace = await p4.confirm({
+          message: "Replace existing admin user?",
+          initialValue: false
+        });
+        if (!p4.isCancel(replace) && replace) {
+          s.start("Replacing admin user");
+          seedResult = await runSeed(
+            cwd,
+            config.paths?.cms ?? "./cms",
+            credentials.email,
+            credentials.password,
+            true
+          );
+        } else {
+          seedSuccess = true;
         }
-      });
-      if (p4.isCancel(password3)) {
-        p4.cancel("Setup cancelled.");
-        process.exit(0);
       }
-      seedEmail = email;
-      seedPassword = password3;
-      s.start("Creating admin user...");
-      const seedResult = await runSeed(cwd, config.paths?.cms ?? "./cms", email, password3);
       if (seedResult.success) {
-        s.stop("Admin user created");
+        s.stop(`${pc2.green("\u2713")} Admin user created`);
         seedSuccess = true;
-      } else {
-        s.stop("Failed to create admin user");
-        p4.log.warning(seedResult.error ?? "Unknown error");
-        p4.log.info(`You can run it manually: ${pc2.cyan("npx betterstart seed")}`);
-      }
-    }
-    s.start("Generating documentation...");
-    {
-      const entityNames = [];
-      const formNames = [];
-      const schemasDir = path37.join(cwd, config.paths.schemas);
-      const formsDir = path37.join(schemasDir, "forms");
-      if (fs32.existsSync(schemasDir)) {
-        for (const f of fs32.readdirSync(schemasDir)) {
-          if (f.endsWith(".json")) entityNames.push(f.replace(".json", ""));
-        }
-      }
-      if (fs32.existsSync(formsDir)) {
-        for (const f of fs32.readdirSync(formsDir)) {
-          if (f.endsWith(".json")) formNames.push(f.replace(".json", ""));
-        }
+      } else if (!seedSuccess && seedResult.error) {
+        s.stop(`${pc2.red("\u2717")} Failed to create admin user`);
+        p4.note(
+          `${pc2.red(seedResult.error)}
+
+Run manually: ${pc2.cyan("npx betterstart seed")}`,
+          pc2.red("Seed failed")
+        );
       }
-      regenerateCmsDoc(cwd, config, {
-        preset: features.preset,
-        schemas: entityNames,
-        forms: formNames
-      });
     }
-    s.stop("Generated CMS.md");
     if (isFreshProject) {
-      s.start("Creating initial git commit...");
+      s.start("Creating initial git commit");
       try {
         execFileSync4("git", ["init"], { cwd, stdio: "pipe" });
         execFileSync4("git", ["add", "."], { cwd, stdio: "pipe" });
@@ -14001,7 +13906,6 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
     const totalFiles = baseFiles.length + dbFiles.length + authFiles.length + compFiles.length + layoutFiles.length + apiFiles.length;
     const summaryLines = [
       `Preset: ${pc2.cyan(features.preset)}`,
-      `Email: ${features.includeEmail ? pc2.green("yes") : pc2.dim("no")}`,
       `Files created: ${pc2.cyan(String(totalFiles))}`,
       `Env vars: ${envResult.added.length} added, ${envResult.skipped.length} skipped`
     ];
@@ -14091,26 +13995,14 @@ function hasDbUrl(cwd) {
   }
   return false;
 }
-async function runSeed(cwd, cmsDir, email, password3) {
+function runSeed(cwd, cmsDir, email, password3, overwrite = false) {
   const scriptsDir = path37.join(cwd, cmsDir, "scripts");
   const seedPath = path37.join(scriptsDir, "seed.ts");
   if (!fs32.existsSync(scriptsDir)) {
     fs32.mkdirSync(scriptsDir, { recursive: true });
   }
   fs32.writeFileSync(seedPath, buildSeedScript(), "utf-8");
-  try {
-    const tsxBin = path37.join(cwd, "node_modules", ".bin", "tsx");
-    execFileSync4(tsxBin, [seedPath], {
-      cwd,
-      stdio: "pipe",
-      timeout: 3e4,
-      env: { ...process.env, SEED_EMAIL: email, SEED_PASSWORD: password3, SEED_NAME: "Admin" }
-    });
-    return { success: true, error: null };
-  } catch (err) {
-    const msg = err instanceof Error ? err.message : String(err);
-    return { success: false, error: msg };
-  } finally {
+  const cleanup = () => {
     try {
       fs32.unlinkSync(seedPath);
       if (fs32.existsSync(scriptsDir) && fs32.readdirSync(scriptsDir).length === 0) {
@@ -14118,7 +14010,70 @@ async function runSeed(cwd, cmsDir, email, password3) {
       }
     } catch {
     }
-  }
+  };
+  return new Promise((resolve) => {
+    const tsxBin = path37.join(cwd, "node_modules", ".bin", "tsx");
+    const child = spawn2(tsxBin, [seedPath], {
+      cwd,
+      stdio: "pipe",
+      env: {
+        ...process.env,
+        SEED_EMAIL: email,
+        SEED_PASSWORD: password3,
+        SEED_NAME: "Admin",
+        ...overwrite ? { SEED_OVERWRITE: "true" } : {}
+      }
+    });
+    let stdout = "";
+    let stderr = "";
+    child.stdout?.on("data", (chunk) => {
+      stdout += chunk.toString();
+    });
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString();
+    });
+    const timeout = setTimeout(() => {
+      child.kill();
+      cleanup();
+      resolve({ success: false, error: "Seed timed out after 30 seconds" });
+    }, 3e4);
+    child.on("close", (code) => {
+      clearTimeout(timeout);
+      cleanup();
+      if (code === 0) {
+        resolve({ success: true, error: null });
+      } else if (code === 2) {
+        const name = stdout.match(/EXISTING_USER:(.+)/)?.[1]?.trim();
+        resolve({ success: false, error: null, existingUser: name ?? email });
+      } else {
+        resolve({ success: false, error: parseSeedError(stdout, stderr) });
+      }
+    });
+    child.on("error", (err) => {
+      clearTimeout(timeout);
+      cleanup();
+      resolve({ success: false, error: parseSeedError("", err.message) });
+    });
+  });
+}
+function parseSeedError(stdout, stderr) {
+  const combined = `${stdout}
+${stderr}`;
+  const seedFailed = combined.match(/Seed failed:\s*(.+)/)?.[1]?.trim();
+  if (seedFailed) return seedFailed;
+  if (combined.includes("Failed to create user")) return "Auth API failed to create user";
+  if (combined.includes("ECONNREFUSED") || combined.includes("connection refused"))
+    return "Could not connect to database";
+  if (combined.includes("BETTERSTART_DATABASE_URL")) return "Database URL is missing or invalid";
+  if (combined.includes("password authentication failed"))
+    return "Database authentication failed \u2014 check your connection string";
+  if (combined.includes("does not exist") && combined.includes("relation"))
+    return "Database tables not found \u2014 run npx drizzle-kit push first";
+  if (combined.includes("MODULE_NOT_FOUND") || combined.includes("Cannot find module"))
+    return "Missing dependencies \u2014 run your package manager install first";
+  const firstLine = stderr.split("\n").map((l) => l.trim()).find((l) => l.length > 0 && !l.startsWith("at ") && !l.startsWith("node:"));
+  if (firstLine) return firstLine;
+  return "Unknown error \u2014 run npx betterstart seed for details";
 }
 function runDrizzlePush(cwd) {
   return new Promise((resolve) => {
@@ -14364,41 +14319,12 @@ var removeCommand = new Command4("remove").alias("rm").description("Remove all g
   console.log("");
 });
 
-// src/commands/update-deps.ts
-import path39 from "path";
-import * as clack2 from "@clack/prompts";
-import { Command as Command5 } from "commander";
-var updateDepsCommand = new Command5("update-deps").description("Install or update all CMS dependencies").option("--cwd <path>", "Project root path").action(async (options) => {
-  const cwd = options.cwd ? path39.resolve(options.cwd) : process.cwd();
-  clack2.intro("BetterStart Update Dependencies");
-  const pm = detectPackageManager(cwd);
-  clack2.log.info(`Package manager: ${pm}`);
-  const config = await resolveConfig(cwd);
-  const includeEmail = config.features?.email ?? true;
-  const s = clack2.spinner();
-  s.start("Installing dependencies...");
-  const result = await installDependenciesAsync({
-    cwd,
-    pm,
-    includeEmail,
-    includeBiome: false
-  });
-  if (result.success) {
-    s.stop(`Installed ${result.coreDeps.length} deps + ${result.devDeps.length} dev deps`);
-  } else {
-    s.stop("Dependency install failed");
-    clack2.log.error(result.error ?? "Unknown error");
-    process.exit(1);
-  }
-  clack2.outro("Dependencies updated");
-});
-
 // src/commands/uninstall.ts
 import fs35 from "fs";
-import path40 from "path";
+import path39 from "path";
 import * as p5 from "@clack/prompts";
+import { Command as Command5 } from "commander";
 import pc3 from "picocolors";
-import { Command as Command6 } from "commander";
 
 // src/commands/uninstall-cleaners.ts
 import fs34 from "fs";
@@ -14455,7 +14381,7 @@ function cleanTsconfig(tsconfigPath) {
   }
   if (removed.length === 0) return [];
   if (Object.keys(paths).length === 0) {
-    delete compilerOptions.paths;
+    compilerOptions.paths = void 0;
   } else {
     compilerOptions.paths = paths;
   }
@@ -14509,14 +14435,14 @@ function cleanEnvFile(envPath) {
     }
     if (trimmed.startsWith("#") && !headerPattern.test(trimmed)) {
       const nextNonEmpty = findNextNonEmptyLine(lines, i + 1);
-      if (nextNonEmpty !== null && nextNonEmpty.match(/^BETTERSTART_\w+=/)) {
+      if (nextNonEmpty?.match(/^BETTERSTART_\w+=/)) {
         continue;
       }
     }
     kept.push(line);
   }
   if (removed.length === 0) return [];
-  let result = kept.join("\n").replace(/\n{3,}/g, "\n\n").trim();
+  const result = kept.join("\n").replace(/\n{3,}/g, "\n\n").trim();
   if (result === "") {
     fs34.unlinkSync(envPath);
   } else {
@@ -14546,7 +14472,7 @@ function findMainCss2(cwd) {
     "globals.css"
   ];
   for (const candidate of candidates) {
-    const filePath = path40.join(cwd, candidate);
+    const filePath = path39.join(cwd, candidate);
     if (fs35.existsSync(filePath)) return filePath;
   }
   return void 0;
@@ -14562,17 +14488,19 @@ function isCLICreatedBiome(biomePath) {
 }
 function buildUninstallPlan(cwd) {
   const steps = [];
-  const hasSrc = fs35.existsSync(path40.join(cwd, "src"));
+  const hasSrc = fs35.existsSync(path39.join(cwd, "src"));
   const appBase = hasSrc ? "src/app" : "app";
   const dirs = [];
-  const cmsDir = path40.join(cwd, "cms");
-  const cmsRouteGroup = path40.join(cwd, appBase, "(cms)");
+  const cmsDir = path39.join(cwd, "cms");
+  const cmsRouteGroup = path39.join(cwd, appBase, "(cms)");
   if (fs35.existsSync(cmsDir)) dirs.push("cms/");
   if (fs35.existsSync(cmsRouteGroup)) dirs.push(`${appBase}/(cms)/`);
   if (dirs.length > 0) {
     steps.push({
       label: "CMS directories",
       items: dirs,
+      count: dirs.length,
+      unit: dirs.length === 1 ? "directory" : "directories",
       execute() {
         if (fs35.existsSync(cmsDir)) fs35.rmSync(cmsDir, { recursive: true, force: true });
         if (fs35.existsSync(cmsRouteGroup)) fs35.rmSync(cmsRouteGroup, { recursive: true, force: true });
@@ -14582,9 +14510,9 @@ function buildUninstallPlan(cwd) {
   const configFiles = [];
   const configPaths = [];
   const candidates = [
-    ["cms.config.ts", path40.join(cwd, "cms.config.ts")],
-    ["drizzle.config.ts", path40.join(cwd, "drizzle.config.ts")],
-    ["CMS.md", path40.join(cwd, "CMS.md")]
+    ["cms.config.ts", path39.join(cwd, "cms.config.ts")],
+    ["drizzle.config.ts", path39.join(cwd, "drizzle.config.ts")],
+    ["CMS.md", path39.join(cwd, "CMS.md")]
   ];
   for (const [label, fullPath] of candidates) {
     if (fs35.existsSync(fullPath)) {
@@ -14592,7 +14520,7 @@ function buildUninstallPlan(cwd) {
       configPaths.push(fullPath);
     }
   }
-  const biomePath = path40.join(cwd, "biome.json");
+  const biomePath = path39.join(cwd, "biome.json");
   if (isCLICreatedBiome(biomePath)) {
     configFiles.push("biome.json (CLI-created)");
     configPaths.push(biomePath);
@@ -14601,6 +14529,8 @@ function buildUninstallPlan(cwd) {
     steps.push({
       label: "Config files",
       items: configFiles,
+      count: configFiles.length,
+      unit: configFiles.length === 1 ? "file" : "files",
       execute() {
         for (const p6 of configPaths) {
           if (fs35.existsSync(p6)) fs35.unlinkSync(p6);
@@ -14608,13 +14538,17 @@ function buildUninstallPlan(cwd) {
       }
     });
   }
-  const tsconfigPath = path40.join(cwd, "tsconfig.json");
+  const tsconfigPath = path39.join(cwd, "tsconfig.json");
   if (fs35.existsSync(tsconfigPath)) {
     const content = fs35.readFileSync(tsconfigPath, "utf-8");
-    if (content.includes("@cms/")) {
+    const aliasMatches = content.match(/"@cms\//g);
+    if (aliasMatches && aliasMatches.length > 0) {
+      const aliasCount = aliasMatches.length;
       steps.push({
         label: "tsconfig.json path aliases",
-        items: ["Remove all @cms/* paths from compilerOptions.paths"],
+        items: [`@cms/* aliases in tsconfig.json`],
+        count: aliasCount,
+        unit: aliasCount === 1 ? "alias" : "aliases",
         execute() {
           cleanTsconfig(tsconfigPath);
         }
@@ -14624,26 +14558,30 @@ function buildUninstallPlan(cwd) {
   const cssFile = findMainCss2(cwd);
   if (cssFile) {
     const cssContent = fs35.readFileSync(cssFile, "utf-8");
-    const sourcePattern = /^@source\s+"[^"]*cms[^"]*";\s*$/m;
-    if (sourcePattern.test(cssContent)) {
-      const relCss = path40.relative(cwd, cssFile);
+    const sourceLines = cssContent.split("\n").filter((l) => /^@source\s+"[^"]*cms[^"]*";\s*$/.test(l));
+    if (sourceLines.length > 0) {
+      const relCss = path39.relative(cwd, cssFile);
       steps.push({
         label: `CSS @source lines (${relCss})`,
-        items: ["Remove @source lines referencing cms/"],
+        items: [`@source lines in ${relCss}`],
+        count: sourceLines.length,
+        unit: sourceLines.length === 1 ? "line" : "lines",
         execute() {
           cleanCss(cssFile);
         }
       });
     }
   }
-  const envPath = path40.join(cwd, ".env.local");
+  const envPath = path39.join(cwd, ".env.local");
   if (fs35.existsSync(envPath)) {
     const envContent = fs35.readFileSync(envPath, "utf-8");
     const bsVars = envContent.split("\n").filter((l) => l.trim().match(/^BETTERSTART_\w+=/)).map((l) => l.split("=")[0]);
     if (bsVars.length > 0) {
       steps.push({
         label: ".env.local variables",
-        items: bsVars,
+        items: ["BETTERSTART_* vars in .env.local"],
+        count: bsVars.length,
+        unit: bsVars.length === 1 ? "variable" : "variables",
         execute() {
           cleanEnvFile(envPath);
         }
@@ -14652,26 +14590,24 @@ function buildUninstallPlan(cwd) {
   }
   return steps;
 }
-var uninstallCommand = new Command6("uninstall").description("Remove all CMS files and undo modifications made by betterstart init").option("-f, --force", "Skip all confirmation prompts", false).option("--cwd <path>", "Project root path").action(async (options) => {
-  const cwd = options.cwd ? path40.resolve(options.cwd) : process.cwd();
+var uninstallCommand = new Command5("uninstall").description("Remove all CMS files and undo modifications made by betterstart init").option("-f, --force", "Skip all confirmation prompts", false).option("--cwd <path>", "Project root path").action(async (options) => {
+  const cwd = options.cwd ? path39.resolve(options.cwd) : process.cwd();
   p5.intro(pc3.bgRed(pc3.white(" BetterStart Uninstall ")));
   const steps = buildUninstallPlan(cwd);
   if (steps.length === 0) {
-    p5.log.info("Nothing to remove \u2014 project is already clean.");
+    p5.log.success(`${pc3.green("\u2713")} Nothing to remove \u2014 project is already clean.`);
     p5.outro("Done");
     return;
   }
-  p5.log.warn("The following will be removed/modified:\n");
-  for (const step of steps) {
-    p5.log.message(`  ${pc3.bold(step.label)}`);
-    for (const item of step.items) {
-      p5.log.message(`    ${pc3.red("\xD7")} ${pc3.dim(item)}`);
-    }
-    p5.log.message("");
-  }
+  const planLines = steps.map((step) => {
+    const names = step.items.join(" ");
+    const countLabel = pc3.dim(`${step.count} ${step.unit}`);
+    return `${pc3.red("\xD7")} ${names}  ${countLabel}`;
+  });
+  p5.note(planLines.join("\n"), "Uninstall plan");
   if (!options.force) {
     const confirmed = await p5.confirm({
-      message: `Proceed with uninstall? (${steps.length} ${steps.length === 1 ? "area" : "areas"})`,
+      message: "Proceed with uninstall?",
       initialValue: false
     });
     if (p5.isCancel(confirmed) || !confirmed) {
@@ -14679,29 +14615,45 @@ var uninstallCommand = new Command6("uninstall").description("Remove all CMS fil
       process.exit(0);
     }
   }
-  let completedCount = 0;
+  const s = p5.spinner();
+  s.start(steps[0].label);
   for (const step of steps) {
+    s.message(step.label);
     step.execute();
-    completedCount++;
-    p5.log.success(`Removed: ${step.label}`);
   }
-  p5.log.message("");
-  if (completedCount === 0) {
-    p5.log.info("No changes were made.");
+  const parts = steps.map((step) => `${step.count} ${step.unit}`);
+  s.stop(`Removed ${parts.join(", ")}`);
+  p5.note(pc3.dim("Database tables were NOT dropped \u2014 drop them manually if needed."), "Next steps");
+  p5.outro("Uninstall complete");
+});
+
+// src/commands/update-deps.ts
+import path40 from "path";
+import * as clack2 from "@clack/prompts";
+import { Command as Command6 } from "commander";
+var updateDepsCommand = new Command6("update-deps").description("Install or update all CMS dependencies").option("--cwd <path>", "Project root path").action(async (options) => {
+  const cwd = options.cwd ? path40.resolve(options.cwd) : process.cwd();
+  clack2.intro("BetterStart Update Dependencies");
+  const pm = detectPackageManager(cwd);
+  clack2.log.info(`Package manager: ${pm}`);
+  const config = await resolveConfig(cwd);
+  const includeEmail = config.features?.email ?? true;
+  const s = clack2.spinner();
+  s.start("Installing dependencies...");
+  const result = await installDependenciesAsync({
+    cwd,
+    pm,
+    includeEmail,
+    includeBiome: false
+  });
+  if (result.success) {
+    s.stop(`Installed ${result.coreDeps.length} deps + ${result.devDeps.length} dev deps`);
   } else {
-    p5.note(
-      pc3.dim("Database tables were NOT dropped \u2014 drop them manually if needed."),
-      "Next steps"
-    );
-  }
-  if (findMainCss2(cwd)) {
-    p5.log.info(
-      pc3.dim(
-        "Note: @theme tokens were left in your CSS \u2014 they're harmless and may be shared with your own styles."
-      )
-    );
+    s.stop("Dependency install failed");
+    clack2.log.error(result.error ?? "Unknown error");
+    process.exit(1);
   }
-  p5.outro(completedCount > 0 ? "Uninstall complete" : "Done");
+  clack2.outro("Dependencies updated");
 });
 
 // src/commands/update-styles.ts