alepha 0.20.2 → 0.20.3

package/src/cli/core/services/ProjectScaffolder.ts

@@ -2,13 +2,14 @@ import { basename, dirname } from "node:path";
 import { $inject, AlephaError } from "alepha";
 import type { RunnerMethod } from "alepha/command";
 import { $logger, ConsoleColorProvider } from "alepha/logger";
-import { FileSystemProvider } from "alepha/system";
+import { FileSystemProvider, ShellProvider } from "alepha/system";
 import { type AgentMdOptions, agentMd } from "../templates/agentMd.ts";
 import { alephaConfigTs } from "../templates/alephaConfigTs.ts";
 import { apiHelloControllerTs } from "../templates/apiHelloControllerTs.ts";
 import { apiHelloResponseSchemaTs } from "../templates/apiHelloResponseSchemaTs.ts";
 import { apiIndexTs } from "../templates/apiIndexTs.ts";
 import { biomeJson } from "../templates/biomeJson.ts";
+import { componentsJsonTs } from "../templates/componentsJsonTs.ts";
 import { dummySpecTs } from "../templates/dummySpecTs.ts";
 import { editorconfig } from "../templates/editorconfig.ts";
 import { gitignore } from "../templates/gitignore.ts";
@@ -16,6 +17,19 @@ import { logoSvg } from "../templates/logoSvg.ts";
 import { mainBrowserTs } from "../templates/mainBrowserTs.ts";
 import { mainCss } from "../templates/mainCss.ts";
 import { mainServerTs } from "../templates/mainServerTs.ts";
+import { saasAdminLayoutTsx } from "../templates/saasAdminLayoutTsx.ts";
+import {
+  saasAdminSessionsTsx,
+  saasAdminUsersTsx,
+} from "../templates/saasAdminPagesTsx.ts";
+import { saasAuthLayoutTsx } from "../templates/saasAuthLayoutTsx.ts";
+import {
+  saasAuthLoginTsx,
+  saasAuthRegisterTsx,
+  saasAuthResetPasswordTsx,
+  saasAuthVerifyEmailTsx,
+} from "../templates/saasAuthPagesTsx.ts";
+import { saasRealmProviderTs } from "../templates/saasRealmProviderTs.ts";
 import { tsconfigJson } from "../templates/tsconfigJson.ts";
 import { viteConfigTs } from "../templates/viteConfigTs.ts";
 import { vitestConfigTs } from "../templates/vitestConfigTs.ts";
@@ -41,6 +55,7 @@ export class ProjectScaffolder {
   protected readonly log = $logger();
   protected readonly colors = $inject(ConsoleColorProvider);
   protected readonly fs = $inject(FileSystemProvider);
+  protected readonly shell = $inject(ShellProvider);
   protected readonly pm = $inject(PackageManagerUtils);
   protected readonly utils = $inject(AlephaCliUtils);
 
@@ -70,7 +85,13 @@ export class ProjectScaffolder {
        */
       checkWorkspace?: boolean;
       packageJson?: boolean | DependencyModes;
-      tsconfigJson?: boolean;
+      /**
+       * `true` writes a tsconfig.json if one doesn't already exist (parent
+       * dirs included). `"local"` writes one when none exists *in this
+       * directory* — used by shadcn since the CLI reads the local
+       * tsconfig directly for import-alias detection.
+       */
+      tsconfigJson?: boolean | "local";
       biomeJson?: boolean;
       editorconfig?: boolean;
       agentMd?: false | AgentMdOptions;
@@ -91,7 +112,12 @@ export class ProjectScaffolder {
       );
     }
     if (opts.tsconfigJson) {
-      tasks.push(this.ensureTsConfig(root, { force }));
+      tasks.push(
+        this.ensureTsConfig(root, {
+          force,
+          localOnly: opts.tsconfigJson === "local",
+        }),
+      );
     }
     if (opts.biomeJson) {
       tasks.push(this.ensureBiomeConfig(root, { force, checkWorkspace }));
@@ -112,10 +138,15 @@ export class ProjectScaffolder {
 
   public async ensureTsConfig(
     root: string,
-    opts: { force?: boolean } = {},
+    opts: { force?: boolean; localOnly?: boolean } = {},
   ): Promise<void> {
-    // Check if tsconfig.json exists in current or parent directories
-    if (!opts.force && (await this.existsInParents(root, "tsconfig.json"))) {
+    // Check if tsconfig.json exists in current or parent directories.
+    // `localOnly: true` skips the parent walk — needed when a tool reads the
+    // local tsconfig directly (shadcn does this for import-alias detection).
+    const exists = opts.localOnly
+      ? await this.fs.exists(this.fs.join(root, "tsconfig.json"))
+      : await this.existsInParents(root, "tsconfig.json");
+    if (!opts.force && exists) {
       return;
     }
     await this.fs.writeFile(
@@ -240,7 +271,7 @@ export class ProjectScaffolder {
    */
   public async ensureApiProject(
     root: string,
-    opts: { force?: boolean } = {},
+    opts: { saas?: boolean; force?: boolean } = {},
   ): Promise<void> {
     const appName = this.getAppName(root);
 
@@ -256,7 +287,7 @@ export class ProjectScaffolder {
     await this.ensureFile(
       root,
       "src/api/index.ts",
-      apiIndexTs({ appName }),
+      apiIndexTs({ appName, saas: opts.saas }),
       opts.force,
     );
     await this.ensureFile(
@@ -271,6 +302,38 @@ export class ProjectScaffolder {
       apiHelloResponseSchemaTs(),
       opts.force,
     );
+
+    if (opts.saas) {
+      await this.fs.mkdir(this.fs.join(root, "src/api/providers"), {
+        recursive: true,
+      });
+      const adminEmail = await this.detectGitEmail();
+      await this.ensureFile(
+        root,
+        "src/api/providers/RealmProvider.ts",
+        saasRealmProviderTs({ adminEmail }),
+        opts.force,
+      );
+    }
+  }
+
+  /**
+   * Best-effort lookup for the developer's git email (used as the seeded
+   * `adminEmails` entry in the SaaS realm). Returns undefined if git isn't
+   * available or if `user.email` isn't configured — the template falls back
+   * to `admin@example.com` in that case.
+   */
+  protected async detectGitEmail(): Promise<string | undefined> {
+    try {
+      const stdout = (await this.shell.run("git config --get user.email", {
+        capture: true,
+      })) as unknown as string;
+      const email = (stdout ?? "").trim();
+      if (!email || !email.includes("@")) return undefined;
+      return email;
+    } catch {
+      return undefined;
+    }
   }
 
   // ===========================================
@@ -290,6 +353,8 @@ export class ProjectScaffolder {
     opts: {
       api?: boolean;
       tailwind?: boolean;
+      shadcn?: boolean;
+      saas?: boolean;
       force?: boolean;
     } = {},
   ): Promise<void> {
@@ -300,6 +365,15 @@ export class ProjectScaffolder {
       recursive: true,
     });
 
+    if (opts.saas) {
+      await this.fs.mkdir(this.fs.join(root, "src/web/components/auth"), {
+        recursive: true,
+      });
+      await this.fs.mkdir(this.fs.join(root, "src/web/components/admin"), {
+        recursive: true,
+      });
+    }
+
     // public/favicon.svg
     await this.fs.mkdir(this.fs.join(root, "public"), { recursive: true });
     await this.ensureFile(root, "public/favicon.svg", logoSvg, opts.force);
@@ -317,17 +391,32 @@ export class ProjectScaffolder {
       await this.ensureFile(root, "vite.config.ts", viteConfigTs(), opts.force);
     }
 
+    // shadcn/ui: write components.json before running `shadcn init` — the
+    // CLI respects an existing config and skips its interactive prompts,
+    // which lets us pin our aliases (`@/web/*`) and the `@alepha` registry.
+    // The CLI itself writes the cn() helper, theme tokens, and installs
+    // runtime deps (clsx, tailwind-merge, class-variance-authority,
+    // lucide-react, tw-animate-css) — see runShadcnInit below.
+    if (opts.shadcn) {
+      await this.ensureFile(
+        root,
+        "components.json",
+        componentsJsonTs(),
+        opts.force,
+      );
+    }
+
     // Web structure
     await this.ensureFile(
       root,
       "src/web/index.ts",
-      webIndexTs({ appName }),
+      webIndexTs({ appName, saas: opts.saas }),
       opts.force,
     );
     await this.ensureFile(
       root,
       "src/web/AppRouter.ts",
-      webAppRouterTs({ api: opts.api }),
+      webAppRouterTs({ api: opts.api, saas: opts.saas }),
       opts.force,
     );
     await this.ensureFile(
@@ -342,6 +431,62 @@ export class ProjectScaffolder {
       mainBrowserTs(),
       opts.force,
     );
+
+    if (opts.saas) {
+      // Auth — layout + 4 pages, each a thin wrapper around the registry
+      // component that `shadcn add @alepha/auth-*` drops at
+      // src/web/components/auth-*.tsx.
+      await this.ensureFile(
+        root,
+        "src/web/components/auth/AuthLayout.tsx",
+        saasAuthLayoutTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/auth/Login.tsx",
+        saasAuthLoginTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/auth/Register.tsx",
+        saasAuthRegisterTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/auth/ResetPassword.tsx",
+        saasAuthResetPasswordTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/auth/VerifyEmail.tsx",
+        saasAuthVerifyEmailTsx(),
+        opts.force,
+      );
+
+      // Admin — AppShell layout + 5 admin-* pages
+      await this.ensureFile(
+        root,
+        "src/web/components/admin/AdminLayout.tsx",
+        saasAdminLayoutTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/admin/Users.tsx",
+        saasAdminUsersTsx(),
+        opts.force,
+      );
+      await this.ensureFile(
+        root,
+        "src/web/components/admin/Sessions.tsx",
+        saasAdminSessionsTsx(),
+        opts.force,
+      );
+    }
   }
 
   // ===========================================
@@ -394,6 +539,10 @@ export class ProjectScaffolder {
       api?: boolean;
       react?: boolean;
       tailwind?: boolean;
+      /** boolean toggle, or a string preset id (default `b0` when bare). */
+      shadcn?: boolean | string;
+      /** boolean toggle, or a string preset id (default `b0` when bare). */
+      saas?: boolean | string;
       test?: boolean;
       force?: boolean;
     };
@@ -404,13 +553,41 @@ export class ProjectScaffolder {
       await this.fs.mkdir(root, { force: true });
     }
 
-    // Flag cascading: --tailwind → --react
+    // `--shadcn` / `--saas` are union flags: bare → true, string → preset.
+    // Capture the preset string (default `b0`), then normalize both flags
+    // to plain booleans so the rest of the pipeline keeps its boolean
+    // contract with PackageManagerUtils + ensureWebProject etc.
+    const shadcnPreset =
+      (typeof flags.saas === "string" && flags.saas) ||
+      (typeof flags.shadcn === "string" && flags.shadcn) ||
+      "b0";
+
+    // Cast to a narrower view so downstream sees pure booleans.
+    const f = flags as Omit<typeof flags, "shadcn" | "saas"> & {
+      shadcn?: boolean;
+      saas?: boolean;
+    };
+    f.shadcn = !!flags.shadcn;
+    f.saas = !!flags.saas;
+
+    // Flag cascading:
+    //   --saas    → --shadcn + --api
+    //   --shadcn  → --tailwind
+    //   --tailwind→ --react
+    if (f.saas) {
+      f.shadcn = true;
+      f.api = true;
+    }
+    if (f.shadcn) {
+      f.tailwind = true;
+    }
     if (flags.tailwind) {
       flags.react = true;
     }
 
     // When codegen flags are set, target directory must be empty (unless --force)
-    const hasCodegenFlags = flags.api || flags.react || flags.tailwind;
+    const hasCodegenFlags =
+      flags.api || flags.react || flags.tailwind || flags.shadcn || flags.saas;
     if (hasCodegenFlags && !flags.force) {
       const files = await this.fs.ls(root);
       // Allow a directory that only has package.json (common for monorepo packages)
@@ -441,9 +618,12 @@ export class ProjectScaffolder {
       handler: async () => {
         await this.ensureConfig(root, {
           force,
-          packageJson: { ...flags, isPackage: workspace.isPackage },
-          // Skip workspace-level configs if they exist at workspace root
-          tsconfigJson: !workspace.config.tsconfigJson,
+          packageJson: { ...f, isPackage: workspace.isPackage },
+          // Skip workspace-level configs if they exist at workspace root —
+          // unless --shadcn is set: the shadcn CLI reads the local
+          // tsconfig.json directly to detect import aliases (it doesn't
+          // follow `extends`), so we must ensure one exists in the package.
+          tsconfigJson: f.shadcn ? "local" : !workspace.config.tsconfigJson,
           biomeJson: true,
           editorconfig: !workspace.config.editorconfig,
           agentMd: agentType ? { type: agentType } : false,
@@ -459,12 +639,14 @@ export class ProjectScaffolder {
           force,
         });
         if (flags.api) {
-          await this.ensureApiProject(root, { force });
+          await this.ensureApiProject(root, { saas: !!flags.saas, force });
         }
         if (flags.react && !isExpo) {
           await this.ensureWebProject(root, {
             api: !!flags.api,
             tailwind: !!flags.tailwind,
+            shadcn: !!flags.shadcn,
+            saas: !!flags.saas,
             force,
           });
         }
@@ -503,10 +685,76 @@ export class ProjectScaffolder {
       await this.ensureTestDir(root);
     }
 
-    await run(`${pmName} run lint`, {
-      alias: "running linter",
-      root,
-    });
+    // shadcn/ui: run `<pm> shadcn init` against the components.json we wrote
+    // earlier. shadcn detects the existing config, respects our aliases,
+    // injects theme tokens into src/main.css, writes src/web/lib/utils.ts,
+    // and installs runtime deps (clsx, tailwind-merge, etc.).
+    //
+    // Flags chosen to keep this fully non-interactive:
+    //   --yes           skip confirmation prompts (default in shadcn v4 but
+    //                   passed explicitly so older versions also behave)
+    //   --no-monorepo   skip the monorepo prompt — we ship a single-app
+    //                   layout; users opt into monorepo via `--monorepo`
+    //                   on the alepha side later
+    //   --silent        suppress shadcn's own progress output; alepha's
+    //                   runner already prints a status line
+    //
+    // We deliberately do NOT pass `--defaults` (would force Next.js +
+    // base-nova preset) or `--template` (only applies to scratch projects;
+    // ours already has main.server.ts / main.browser.ts).
+    // Each PM has a different way to exec a project-local binary.
+    const exec = pmExecPrefix(pmName);
+
+    if (flags.shadcn) {
+      // Fully non-interactive shadcn init. The `--preset` arg is what makes
+      // this work — without it shadcn falls back to interactive prompts even
+      // with --yes/--force. Defaults: vite template + radix base + reinstall
+      // (so the components.json we pre-wrote stays canonical).
+      await run(
+        `${exec} shadcn init --no-monorepo --base radix -t vite --yes --force --reinstall --preset ${escapeShellArg(shadcnPreset)}`,
+        { alias: `running shadcn init (preset ${shadcnPreset})`, root },
+      );
+      // Re-pin our aliases + alepha registry — `shadcn init --force`
+      // overwrites components.json with the template defaults.
+      await this.fs.writeFile(
+        this.fs.join(root, "components.json"),
+        componentsJsonTs(),
+      );
+    }
+
+    // SaaS preset: pull in the auth + admin registry components from the
+    // public alepha registry (already wired via components.json's
+    // `registries: { "@alepha": "https://alepha.dev/r/{name}.json" }`).
+    // Each `shadcn add` writes the component into src/web/components/* and
+    // pulls its peer primitives + dependencies (sonner, etc.).
+    if (flags.saas) {
+      // Pull the public SaaS bundle in one shot — it aggregates control,
+      // auto-form, alepha-table, use-confirm, app-shell, every auth-*, and
+      // every admin-* block. Definition lives at
+      // https://alepha.dev/r/saas.json (see @alepha/ui-registry).
+      // `--yes --overwrite` is the only combo that works non-interactively
+      // when registry items would replace files we pre-wrote (auth-login etc.
+      // overlap with shadcn primitives like button/input).
+      await run(`${exec} shadcn add @alepha/saas --yes --overwrite`, {
+        alias: "adding alepha saas registry bundle",
+        root,
+      });
+    }
+
+    // Best-effort lint: shadcn-imported registry components occasionally
+    // trip biome rules (e.g. noArrayIndexKey on a Fragment loop). The user
+    // can fix or silence these later — don't block the whole init.
+    try {
+      await run(`${pmName} run lint`, {
+        alias: "running linter",
+        root,
+      });
+    } catch (err) {
+      this.log.warn(
+        "Linter reported issues during init — continuing. Run `lint` again later to inspect.",
+        { error: err instanceof Error ? err.message : String(err) },
+      );
+    }
 
     // Initialize git repository if not in a workspace package
     if (!workspace.isPackage) {
@@ -587,3 +835,33 @@ export class ProjectScaffolder {
     }
   }
 }
+
+/**
+ * Map a package manager name to the command that runs a project-local binary.
+ *
+ * - npm:  `npx`
+ * - yarn: `yarn` (yarn auto-resolves binary names; `yarn shadcn ...` works)
+ * - pnpm: `pnpm exec`
+ * - bun:  `bunx`
+ *
+ * Used to invoke `shadcn init` / `shadcn add` regardless of the user's PM —
+ * `npm shadcn ...` is invalid (it tries to run a script named `shadcn`).
+ */
+/** Quote a value so it survives shell parsing. */
+const escapeShellArg = (value: string): string => {
+  if (/^[A-Za-z0-9_./@:-]+$/.test(value)) return value;
+  return `'${value.replace(/'/g, "'\\''")}'`;
+};
+
+const pmExecPrefix = (pmName: string): string => {
+  switch (pmName) {
+    case "npm":
+      return "npx";
+    case "pnpm":
+      return "pnpm exec";
+    case "bun":
+      return "bunx";
+    default:
+      return "yarn";
+  }
+};

package/src/cli/core/tasks/BuildDockerTask.ts

@@ -8,7 +8,7 @@ import { BuildTask, type BuildTaskContext } from "./BuildTask.ts";
  *
  * Creates:
  * - Dockerfile with configurable base image
- * - Copies drizzle migrations if they exist
+ * - Copies migrations directory if it exists
  * - Builds Docker image when `--image` flag is provided
  */
 export class BuildDockerTask extends BuildTask {
@@ -32,7 +32,7 @@ export class BuildDockerTask extends BuildTask {
     await ctx.run({
       name: "generate deploy config (docker)",
       handler: async () => {
-        await this.copyDrizzleMigrations(ctx.root, distDir);
+        await this.copyMigrations(ctx.root, distDir);
         await this.writeDockerfile(
           ctx.root,
           distDir,
@@ -47,14 +47,13 @@ export class BuildDockerTask extends BuildTask {
     }
   }
 
-  protected async copyDrizzleMigrations(
-    root: string,
-    distDir: string,
-  ): Promise<void> {
-    const drizzleDir = this.fs.join(root, "drizzle");
-    const hasMigrations = await this.fs.exists(drizzleDir);
-    if (hasMigrations) {
-      await this.fs.cp(drizzleDir, this.fs.join(root, distDir, "drizzle"));
+  protected async copyMigrations(root: string, distDir: string): Promise<void> {
+    const migrationsDir = this.fs.join(root, "migrations");
+    if (await this.fs.exists(migrationsDir)) {
+      await this.fs.cp(
+        migrationsDir,
+        this.fs.join(root, distDir, "migrations"),
+      );
     }
   }
 

package/src/cli/core/tasks/BuildServerTask.ts

@@ -135,6 +135,14 @@ export class BuildServerTask extends BuildTask {
             chunkFileNames: "[hash].js",
             assetFileNames: "[hash][extname]",
             format: "esm",
+            codeSplitting: {
+              groups: [
+                {
+                  name: "react",
+                  test: /node_modules\/react(\/|-dom\/)/,
+                },
+              ],
+            },
             // Rolldown/Oxc minifier: preserve class and function names
             minify: {
               mangle: { keepNames: true },

package/src/cli/core/templates/apiIndexTs.ts

@@ -1,9 +1,31 @@
 export interface ApiIndexTsOptions {
   appName?: string;
+  /**
+   * Include `AlephaApiUsers` (realms, sessions, registration, identities,
+   * password reset, email verification, admin endpoints) plus the local
+   * `RealmProvider` that declares `$realm({ ... })`.
+   */
+  saas?: boolean;
 }
 
 export const apiIndexTs = (options: ApiIndexTsOptions = {}) => {
-  const { appName = "app" } = options;
+  const { appName = "app", saas = false } = options;
+
+  if (saas) {
+    return `
+import { $module } from "alepha";
+import { AlephaApiUsers } from "alepha/api/users";
+import { HelloController } from "./controllers/HelloController.ts";
+import { RealmProvider } from "./providers/RealmProvider.ts";
+
+export const ApiModule = $module({
+  name: "${appName}.api",
+  services: [HelloController, RealmProvider],
+  imports: [AlephaApiUsers],
+});
+`.trim();
+  }
+
   return `
 import { $module } from "alepha";
 import { HelloController } from "./controllers/HelloController.ts";

package/src/cli/core/templates/componentsJsonTs.ts

@@ -0,0 +1,39 @@
+/**
+ * `components.json` is the shadcn CLI's project config — it tells
+ * `shadcn add` where to drop primitives, which tailwind tokens to use,
+ * which icon library to wire up, and which custom registries to resolve.
+ *
+ * Aliases follow shadcn's defaults (`@/components`, `@/lib/utils`) so the
+ * CLI honors them across `init` + `add` calls. Alepha app code lives at
+ * `src/web/` (Home, AppRouter, …) and the shadcn primitives live at
+ * `src/components/` — kept separate to make the registry components
+ * trivially upgradable via `shadcn add --overwrite`.
+ *
+ * The `registries` block pre-wires the public Alepha registry — consumers
+ * can immediately run e.g. `shadcn add @alepha/auth-login`.
+ */
+export const componentsJsonTs = () =>
+  `{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/main.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide",
+  "registries": {
+    "@alepha": "https://alepha.dev/r/{name}.json"
+  }
+}
+`;

package/src/cli/core/templates/mainCss.ts

@@ -11,6 +11,7 @@ export const mainCss = (opts: { tailwind?: boolean } = {}) => {
  *
  * Options:
  * - Tailwind CSS: Use \`alepha init --tailwind\` to add Tailwind CSS
+ * - shadcn/ui: Use \`alepha init --shadcn\` to add shadcn/ui setup
  * - Raw CSS: Write your own styles below
  */
 

package/src/cli/core/templates/saasAdminLayoutTsx.ts

@@ -0,0 +1,77 @@
+/**
+ * SaaS admin layout — full AppShell on /admin with a sidebar, breadcrumbs,
+ * a Sonner toaster, and a confirm provider. The page list grows with
+ * whatever `admin-*` registry components the user adds.
+ *
+ * All UI primitives come from `src/components/*` where `shadcn add` drops
+ * them; alepha app code lives in `src/web/*` and references them via the
+ * `@/components/*` alias.
+ */
+export const saasAdminLayoutTsx = () =>
+  `import { AppShell } from "@/components/app-shell";
+import { Toaster } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ConfirmProvider } from "@/components/use-confirm";
+import { NestedView, useRouterState } from "alepha/react/router";
+import { ShieldCheck, Users } from "lucide-react";
+
+const NAV = [
+  {
+    label: "Identity",
+    items: [
+      { href: "/admin/users", label: "Users", icon: Users },
+      { href: "/admin/sessions", label: "Sessions", icon: ShieldCheck },
+    ],
+  },
+] as const;
+
+const findCrumbs = (pathname: string): { label: string; href?: string }[] => {
+  for (const group of NAV) {
+    const match = group.items.find((it) => it.href === pathname);
+    if (match) return [{ label: group.label }, { label: match.label }];
+  }
+  return [];
+};
+
+const AdminLayout = () => {
+  const state = useRouterState();
+  const crumbs = findCrumbs(state.url.pathname);
+
+  return (
+    <TooltipProvider>
+      <ConfirmProvider>
+        <AppShell
+          brand={
+            <a
+              href="/admin"
+              className="flex items-center gap-2 px-2 py-2 font-semibold group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
+            >
+              <span className="bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded">
+                α
+              </span>
+              <span className="truncate group-data-[collapsible=icon]:hidden">
+                Admin
+              </span>
+            </a>
+          }
+          nav={NAV.map((group) => ({
+            label: group.label,
+            items: group.items.map((it) => ({
+              href: it.href,
+              label: it.label,
+              icon: it.icon,
+              active: it.href === state.url.pathname,
+            })),
+          }))}
+          breadcrumbs={crumbs.length ? crumbs : undefined}
+        >
+          <NestedView />
+        </AppShell>
+        <Toaster />
+      </ConfirmProvider>
+    </TooltipProvider>
+  );
+};
+
+export default AdminLayout;
+`;