@betterstart/cli 0.1.28 → 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 group2 = items.find((item) => item.label === schema.navGroup?.label);
-    if (!group2) {
-      group2 = {
-        label: schema.navGroup.label,
-        href: "#",
-        icon: schema.navGroup.icon,
-        children: []
-      };
-      items.push(group2);
-    }
-    if (!group2.children) {
-      group2.children = [];
-    }
-    const existingChild = group2.children.findIndex((c) => c.href === entityHref);
-    if (existingChild >= 0) {
-      if (options.force) {
-        group2.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 {
-      group2.children.push(newItem);
-      group2.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>
+    </>
   )
 }
 `;
@@ -8059,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) {
@@ -8080,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 },
       )
     }
 
@@ -8116,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)
@@ -8126,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 })
   }
 }
 `;
@@ -8217,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',
 })
 
@@ -8238,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)
 }
 
 /**
@@ -8696,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 {
@@ -8881,7 +8698,7 @@ function cmsGlobalsCssTemplate() {
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground antialiased;
+    @apply bg-background text-foreground;
   }
 }
 
@@ -8914,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,
@@ -8923,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> {
@@ -8962,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>([])
@@ -8985,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({
@@ -9028,9 +8855,9 @@ export function DataTable<TData, TValue>({
       rowSelection,
       pagination: {
         pageIndex,
-        pageSize: effectivePageSize
-      }
-    }
+        pageSize: effectivePageSize,
+      },
+    },
   })
 
   return (
@@ -9097,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> {
@@ -9125,7 +8952,7 @@ interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({
   table,
   pageSize,
-  setPageSize
+  setPageSize,
 }: DataTablePaginationProps<TData>) {
   const handlePageSizeChange = React.useCallback(
     (value: string) => {
@@ -9138,7 +8965,7 @@ export function DataTablePagination<TData>({
         table.setPageIndex(0)
       })
     },
-    [setPageSize, table]
+    [setPageSize, table],
   )
 
   return (
@@ -9192,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()
@@ -9218,7 +9045,7 @@ export function DataTableToolbar({
   search,
   onSearch,
   searchPlaceholder = 'Search...',
-  children
+  children,
 }: DataTableToolbarProps) {
   return (
     <div className="flex items-center gap-2">
@@ -9255,7 +9082,7 @@ export function ReorderControls({
   onSave,
   onCancel,
   hasChanges,
-  isSaving
+  isSaving,
 }: ReorderControlsProps) {
   return (
     <div className="flex items-center gap-2">
@@ -9270,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>
@@ -9302,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'
@@ -9313,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
@@ -9337,19 +9150,49 @@ 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 }) {
-  const [queryClient] = useState(
-    () =>
+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({
         defaultOptions: {
           queries: {
@@ -9385,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>
@@ -9407,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 && (
@@ -9535,7 +9365,6 @@ export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
           </div>
         )}
       </SidebarFooter>
-      <SidebarRail />
     </Sidebar>
   )
 }
@@ -9555,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'
@@ -9577,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}>
@@ -9626,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>
   )
 }
@@ -9656,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'> {
@@ -9674,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
@@ -9698,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',
+  },
 ]
 `;
 }
@@ -9787,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 {
@@ -9834,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
@@ -9849,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(() => {
@@ -9878,7 +9733,7 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
       }
       e.target.value = ''
     },
-    [uploadImages]
+    [uploadImages],
   )
 
   return {
@@ -9888,7 +9743,7 @@ export function useEditorImageUpload({ onImagesUploaded }: UseEditorImageUploadO
     handleDrop,
     openFilePicker,
     fileInputRef,
-    handleFileInputChange
+    handleFileInputChange,
   }
 }
 `;
@@ -9912,7 +9767,7 @@ export function useLocalStorage<T>(key: string) {
         // Silent failure for localStorage access errors
       }
     },
-    [prefixedKey]
+    [prefixedKey],
   )
 
   const getItem = React.useCallback((): T | null => {
@@ -9945,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'
 
@@ -10004,7 +9877,7 @@ export function useUpload(options: UseUploadOptions = {}): UseUploadReturn {
     onProgress,
     onSuccess,
     onError,
-    prefix: defaultPrefix
+    prefix: defaultPrefix,
   } = options
 
   const validationConfig = React.useMemo<FileValidationConfig>(() => {
@@ -10014,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
@@ -10037,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)
@@ -10059,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)
 
@@ -10075,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
@@ -10085,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)
@@ -10107,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(
@@ -10122,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 }
@@ -10145,7 +10018,7 @@ export function useUsers() {
   return useQuery<UsersResponse>({
     queryKey: ['users'],
     queryFn: () => getUsers(),
-    staleTime: 0
+    staleTime: 0,
   })
 }
 `;
@@ -10155,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
@@ -10181,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()
@@ -10199,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)
@@ -10230,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',
     }
   }
 }
@@ -10247,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)
@@ -10278,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',
     }
   }
 }
@@ -10448,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
@@ -10564,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) {
@@ -10722,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()
@@ -10767,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, {
@@ -10784,7 +10658,7 @@ const md = MarkdownIt({
       return renderToString(content, {
         displayMode,
         throwOnError: false,
-        strict: 'ignore'
+        strict: 'ignore',
       })
     },
     labelNormalizer(label: string) {
@@ -10792,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 {
@@ -10887,7 +10761,7 @@ export interface AuthSession {
 export enum UserRole {
   ADMIN = 'admin',
   EDITOR = 'editor',
-  MEMBER = 'member'
+  MEMBER = 'member',
 }
 
 export interface UserWithRole extends AuthUser {
@@ -10896,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)
 }
 
@@ -11092,7 +10960,7 @@ export function createMetadata({
   description,
   path,
   ogImage,
-  noIndex = false
+  noIndex = false,
 }: CreateMetadataOptions): Metadata {
   const metadata: Metadata = {
     title,
@@ -11101,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) {
@@ -11132,7 +11000,7 @@ export function generateArticleSchema({
   imageUrl,
   datePublished,
   dateModified,
-  authorName
+  authorName,
 }: {
   title: string
   description: string
@@ -11152,8 +11020,8 @@ export function generateArticleSchema({
     datePublished,
     ...(dateModified && { dateModified }),
     ...(authorName && {
-      author: { '@type': 'Person', name: authorName }
-    })
+      author: { '@type': 'Person', name: authorName },
+    }),
   }
 }
 
@@ -11206,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}.\`,
     })
   }
 
@@ -11228,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.\`,
       })
     }
   }
@@ -11289,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, {
@@ -11327,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());
@@ -11352,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());
@@ -11588,6 +11452,7 @@ var CORE_DEPS = [
   "nuqs",
   "sonner",
   // Styling utilities
+  "geist",
   "class-variance-authority",
   "clsx",
   "tailwind-merge",
@@ -11833,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>
@@ -11863,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>
   )
 }
@@ -11877,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'
 
@@ -11887,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) => (
@@ -11982,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() {
@@ -11991,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>
@@ -12028,7 +11886,7 @@ export function LoginForm() {
     try {
       const result = await authClient.signIn.email({
         email,
-        password
+        password,
       })
 
       if (result.error) {
@@ -12048,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">
@@ -12095,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,
@@ -12102,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'
@@ -12216,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,
@@ -12223,7 +12080,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
 } from '@cms/components/ui/dialog'
 import { Label } from '@cms/components/ui/label'
 import {
@@ -12231,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'
@@ -12247,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()
@@ -12281,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">
@@ -12300,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>
@@ -12327,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,
@@ -12343,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 {
@@ -12351,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 {
@@ -12409,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>
@@ -12421,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>
@@ -12470,7 +12306,7 @@ export const columns: ColumnDef<UserData>[] = [
           </div>
         </div>
       )
-    }
+    },
   },
   {
     accessorKey: 'emailVerified',
@@ -12482,7 +12318,7 @@ export const columns: ColumnDef<UserData>[] = [
           {verified ? 'Verified' : 'Unverified'}
         </Badge>
       )
-    }
+    },
   },
   {
     accessorKey: 'role',
@@ -12512,7 +12348,7 @@ export const columns: ColumnDef<UserData>[] = [
           </Badge>
         </EditRoleDialog>
       )
-    }
+    },
   },
   {
     accessorKey: 'createdAt',
@@ -12533,11 +12369,11 @@ export const columns: ColumnDef<UserData>[] = [
           {date.toLocaleDateString('en-US', {
             month: 'short',
             day: 'numeric',
-            year: 'numeric'
+            year: 'numeric',
           })}
         </div>
       )
-    }
+    },
   },
   {
     id: 'actions',
@@ -12556,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 />
@@ -12571,8 +12405,8 @@ export const columns: ColumnDef<UserData>[] = [
           </DropdownMenu>
         </div>
       )
-    }
-  }
+    },
+  },
 ]
 `;
 }
@@ -12588,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>
@@ -12608,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,
@@ -12618,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>[]
@@ -12662,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 (
@@ -13606,24 +13437,29 @@ 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 spinner5 = clack.spinner();
   spinner5.start("Creating admin user...");
@@ -13674,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();
@@ -13689,9 +13525,35 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
         p4.log.error("TypeScript is required. Please add a tsconfig.json first.");
         process.exit(1);
       }
-      if (project.conflicts.length > 0) {
+      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."));
+        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({
@@ -13862,13 +13724,17 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
     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");
         }
@@ -13985,7 +13851,12 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
       seedEmail = credentials.email;
       seedPassword = credentials.password;
       s.start("Creating admin user");
-      let seedResult = await runSeed(cwd, config.paths?.cms ?? "./cms", credentials.email, credentials.password);
+      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({
@@ -13994,7 +13865,13 @@ var initCommand = new Command3("init").description("Scaffold CMS into a new or e
         });
         if (!p4.isCancel(replace) && replace) {
           s.start("Replacing admin user");
-          seedResult = await runSeed(cwd, config.paths?.cms ?? "./cms", credentials.email, credentials.password, true);
+          seedResult = await runSeed(
+            cwd,
+            config.paths?.cms ?? "./cms",
+            credentials.email,
+            credentials.password,
+            true
+          );
         } else {
           seedSuccess = true;
         }
@@ -14187,8 +14064,7 @@ ${stderr}`;
   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("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"))
@@ -14443,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";
@@ -14534,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;
   }
@@ -14588,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 {
@@ -14625,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;
@@ -14641,11 +14488,11 @@ 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) {
@@ -14663,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)) {
@@ -14673,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);
@@ -14691,7 +14538,7 @@ 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");
     const aliasMatches = content.match(/"@cms\//g);
@@ -14713,7 +14560,7 @@ function buildUninstallPlan(cwd) {
     const cssContent = fs35.readFileSync(cssFile, "utf-8");
     const sourceLines = cssContent.split("\n").filter((l) => /^@source\s+"[^"]*cms[^"]*";\s*$/.test(l));
     if (sourceLines.length > 0) {
-      const relCss = path40.relative(cwd, cssFile);
+      const relCss = path39.relative(cwd, cssFile);
       steps.push({
         label: `CSS @source lines (${relCss})`,
         items: [`@source lines in ${relCss}`],
@@ -14725,7 +14572,7 @@ function buildUninstallPlan(cwd) {
       });
     }
   }
-  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]);
@@ -14743,12 +14590,12 @@ 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.success(pc3.green("\u2713") + " 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;
   }
@@ -14776,13 +14623,39 @@ var uninstallCommand = new Command6("uninstall").description("Remove all CMS fil
   }
   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.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 {
+    s.stop("Dependency install failed");
+    clack2.log.error(result.error ?? "Unknown error");
+    process.exit(1);
+  }
+  clack2.outro("Dependencies updated");
+});
+
 // src/commands/update-styles.ts
 import fs36 from "fs";
 import path41 from "path";