@helloleo/plugins 0.1.12 → 0.1.13

package/dist/index.js

@@ -12675,8 +12675,9 @@ function indexCss(primaryColor, fontFamily, borderRadius) {
  *     --warning each have a paired -foreground for text on that surface.
  *   - --radius drives lg/md/sm via calc() in tailwind.config.js. Edit here,
  *     not in component classes.
- *   - --font-sans for body, --font-heading for headings. Both load from the
- *     Google Fonts <link> in index.html.
+ *   - --font-sans for body, --font-heading for headings. The webfont is loaded
+ *     via a Google Fonts <link> \u2014 in index.html (SPA) or the root route head
+ *     (SSR). Keep the family here in sync with that <link>.
  *   - .dark variants mirror :root one-for-one. When adding a token, add it
  *     to BOTH blocks or dark mode breaks.
  *
@@ -12807,6 +12808,7 @@ function proxyTs() {
 
 const PROJECT_UUID = import.meta.env.VITE_PROJECT_UUID ?? '';
 export const INTEGRATION_PROXY_URL =
+  import.meta.env.VITE_INTEGRATION_PROXY_URL ??
   \`https://api.app.helloleo.dev/api/integration-proxy/\${PROJECT_UUID}\`;
 
 export interface ProxyRequest {
@@ -12927,34 +12929,779 @@ async function writeBaseScaffold(opts, dir) {
   }
   return created;
 }
-var scaffold = tool({
-  description: "Scaffold a new React + Vite + Tailwind CSS project with the HelloLeo design system. " + "Creates all mandatory boilerplate: package.json, index.html (with Google Fonts), " + "vite.config.js, tailwind.config.js, postcss.config.js, src/index.css (CSS variables " + "light+dark), src/lib/utils.ts (cn helper), src/lib/proxy.ts, and src/main.tsx. " + "Call this FIRST for any new project before writing App.tsx and components. " + "For NetSuite projects (NetSuite MCP in the live list), call `setup_netsuite` " + "INSTEAD -- it bundles base scaffold + OAuth wiring in one call. Do not call both.",
+var REACT = "^19.0.0";
+var VITE = "^6.0.5";
+var TS = "^5.6.3";
+var TANSTACK = "1.131.50";
+var BIOME = "2.4.8";
+function tsconfig() {
+  return JSON.stringify({
+    compilerOptions: {
+      target: "ES2022",
+      module: "ESNext",
+      moduleResolution: "Bundler",
+      lib: ["ES2022", "DOM", "DOM.Iterable"],
+      jsx: "react-jsx",
+      strict: true,
+      noUncheckedIndexedAccess: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      verbatimModuleSyntax: true,
+      skipLibCheck: true,
+      noEmit: true,
+      baseUrl: ".",
+      paths: { "@/*": ["./src/*"] },
+      types: ["vite/client"]
+    },
+    include: ["src", "*.config.ts"]
+  }, null, 2);
+}
+function biomeJson() {
+  return JSON.stringify({
+    $schema: `https://biomejs.dev/schemas/${BIOME}/schema.json`,
+    vcs: { enabled: true, clientKind: "git", useIgnoreFile: true },
+    files: { ignoreUnknown: true },
+    formatter: { enabled: true, indentStyle: "tab", lineWidth: 80 },
+    linter: { enabled: true, rules: { recommended: true } },
+    javascript: { formatter: { quoteStyle: "double" } },
+    assist: { actions: { source: { organizeImports: "on" } } }
+  }, null, 2);
+}
+function componentsJson() {
+  return JSON.stringify({
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "new-york",
+    rsc: false,
+    tsx: true,
+    tailwind: {
+      config: "tailwind.config.js",
+      css: "src/styles/app.css",
+      baseColor: "slate",
+      cssVariables: true,
+      prefix: ""
+    },
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks"
+    },
+    iconLibrary: "lucide"
+  }, null, 2);
+}
+function uiButton() {
+  return `import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+`;
+}
+function uiCard() {
+  return `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow", className)} {...props} />
+  ),
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("font-heading font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+)
+CardContent.displayName = "CardContent"
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent }
+`;
+}
+function uiInput() {
+  return `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Input.displayName = "Input"
+
+export { Input }
+`;
+}
+function uiTextarea() {
+  return `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
+`;
+}
+function uiLabel() {
+  return `import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Label.displayName = "Label"
+
+export { Label }
+`;
+}
+function uiBadge() {
+  return `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
+`;
+}
+function spaPackageJson(name) {
+  return JSON.stringify({
+    name,
+    private: true,
+    version: "0.0.0",
+    type: "module",
+    scripts: {
+      dev: "vite dev --host",
+      build: "vite build",
+      preview: "vite preview",
+      lint: "biome check --write ."
+    },
+    dependencies: {
+      react: REACT,
+      "react-dom": REACT,
+      "@tanstack/react-router": TANSTACK,
+      "class-variance-authority": "^0.7.1",
+      clsx: "^2.1.1",
+      "tailwind-merge": "^2.6.0",
+      "lucide-react": "^0.468.0",
+      "@radix-ui/react-slot": "^1.1.1"
+    },
+    devDependencies: {
+      "@tanstack/router-plugin": TANSTACK,
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
+      "@vitejs/plugin-react": "^4.3.4",
+      "@biomejs/biome": BIOME,
+      autoprefixer: "^10.4.20",
+      postcss: "^8.4.49",
+      tailwindcss: "^3.4.17",
+      typescript: TS,
+      vite: VITE
+    }
+  }, null, 2);
+}
+function spaViteConfig() {
+  return `import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite"
+import path from "node:path"
+
+export default defineConfig({
+  // File-based routing: routes live in src/routes, routeTree.gen.ts is generated.
+  plugins: [TanStackRouterVite({ target: "react", autoCodeSplitting: true }), react()],
+  // allowedHosts:true is REQUIRED for the HelloLeo preview sandbox (proxied host).
+  server: { allowedHosts: true },
+  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
+})
+`;
+}
+function spaIndexHtml(fontFamily) {
+  const fontParam = fontFamily.replace(/\s+/g, "+");
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=${fontParam}:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <title>App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}
+function spaMainTsx() {
+  return `import React from "react"
+import ReactDOM from "react-dom/client"
+import { RouterProvider, createRouter } from "@tanstack/react-router"
+import { routeTree } from "./routeTree.gen"
+import "./styles/app.css"
+
+const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true })
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router
+  }
+}
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
+`;
+}
+function spaRootRoute() {
+  return `import { Outlet, createRootRoute } from "@tanstack/react-router"
+
+export const Route = createRootRoute({
+  errorComponent: ({ error }) => (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-3 p-8">
+      <h1 className="text-2xl font-heading font-semibold text-destructive">Something went wrong</h1>
+      <pre className="max-w-full overflow-auto rounded-md bg-muted p-4 text-left text-xs text-muted-foreground">{error instanceof Error ? error.message : String(error)}</pre>
+    </main>
+  ),
+  notFoundComponent: () => (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-2 p-8">
+      <h1 className="text-2xl font-heading font-semibold">404</h1>
+      <p className="text-muted-foreground">This page could not be found.</p>
+    </main>
+  ),
+  component: () => (
+    <div className="min-h-screen bg-background text-foreground">
+      <Outlet />
+    </div>
+  ),
+})
+`;
+}
+function spaIndexRoute() {
+  return `import { createFileRoute } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+export const Route = createFileRoute("/")({ component: Home })
+
+function Home() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-6 p-8">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="text-2xl">Welcome to your app</CardTitle>
+          <CardDescription>TanStack Router SPA \xB7 Tailwind \xB7 shadcn/ui \xB7 Biome</CardDescription>
+        </CardHeader>
+        <CardContent className="flex gap-3">
+          <Button>Get started</Button>
+          <Button variant="outline">Learn more</Button>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}
+`;
+}
+function ssrPackageJson(name) {
+  return JSON.stringify({
+    name,
+    private: true,
+    version: "0.0.0",
+    type: "module",
+    scripts: {
+      predev: "drizzle-kit push --force",
+      dev: "vite dev --host",
+      build: "vite build",
+      prepreview: "drizzle-kit push --force",
+      preview: "node .output/server/index.mjs",
+      start: "node .output/server/index.mjs",
+      "db:generate": "drizzle-kit generate",
+      "db:push": "drizzle-kit push --force",
+      deploy: "wrangler deploy",
+      lint: "biome check --write ."
+    },
+    dependencies: {
+      react: REACT,
+      "react-dom": REACT,
+      "@tanstack/react-router": TANSTACK,
+      "@tanstack/react-start": TANSTACK,
+      "drizzle-orm": "^0.36.4",
+      "@libsql/client": "^0.14.0",
+      "class-variance-authority": "^0.7.1",
+      clsx: "^2.1.1",
+      "tailwind-merge": "^2.6.0",
+      "lucide-react": "^0.468.0",
+      "@radix-ui/react-slot": "^1.1.1"
+    },
+    devDependencies: {
+      wrangler: "^4.20.0",
+      "@cloudflare/workers-types": "^4.20250601.0",
+      "drizzle-kit": "^0.28.1",
+      "@types/node": "^22.0.0",
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
+      "@vitejs/plugin-react": "^4.3.4",
+      "@biomejs/biome": BIOME,
+      autoprefixer: "^10.4.20",
+      postcss: "^8.4.49",
+      tailwindcss: "^3.4.17",
+      typescript: TS,
+      vite: VITE
+    }
+  }, null, 2);
+}
+function ssrViteConfig() {
+  return `import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import { tanstackStart } from "@tanstack/react-start/plugin/vite"
+import path from "node:path"
+
+// TanStack Start default (Node server) target -> dist/server/server.js + dist/client.
+// The CF Sandbox container runs that server (PORT-aware), proven by the POC.
+export default defineConfig({
+  plugins: [tanstackStart({ customViteReactPlugin: true }), react()],
+  // allowedHosts:true is REQUIRED for the HelloLeo preview sandbox (proxied host).
+  server: { allowedHosts: true },
+  // Pre-bundle shared deps at boot so vite doesn't re-optimize + restart the dev
+  // server mid-request (which 500s the first SSR load with "transport disconnected").
+  optimizeDeps: {
+    include: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-react"],
+  },
+  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
+  // __WORKERD__ tells src/db which runtime it's building for: true only for the
+  // prod cloudflare-module build (NITRO_PRESET set by the publish flow), false
+  // for dev and the Node preview build. Lets getDb dead-code-eliminate the wrong
+  // DB driver per target.
+  define: {
+    __WORKERD__: JSON.stringify(process.env.NITRO_PRESET === "cloudflare-module"),
+  },
+  // "cloudflare:workers" is a workerd-only module (src/db reads the D1 binding
+  // from it in prod). vite's SSR pass can't resolve it \u2014 externalize so the
+  // workerd build keeps it as an import; on other targets it's DCE'd away.
+  build: { rollupOptions: { external: ["cloudflare:workers"] } },
+})
+`;
+}
+function ssrWranglerJsonc(name) {
+  return `{
+  // PROD target (Workers for Platforms). Dev/preview runs the Node server in the
+  // CF Sandbox container and does NOT use this file.
+  //
+  // NOTE: HelloLeo's publish flow REGENERATES this file at deploy time \u2014 it
+  // auto-creates the D1 database, fills in database_id, and pins its own
+  // compatibility_date. This file is the local-dev / manual \`wrangler deploy\`
+  // copy; for a manual deploy, run \`wrangler d1 create ${name}\` and paste the
+  // id below first. compatibility_date is kept at/under the runtime baseline so
+  // \`wrangler dev\` works on the pinned workerd binary.
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "${name}",
+  "compatibility_date": "2026-04-01",
+  "compatibility_flags": ["nodejs_compat"],
+  "observability": { "enabled": true },
+  "assets": { "directory": ".output/public", "binding": "ASSETS" },
+  "d1_databases": [
+    { "binding": "DB", "database_name": "${name}", "database_id": "" }
+  ]
+}
+`;
+}
+function ssrRouter() {
+  return `import { createRouter as createTanStackRouter } from "@tanstack/react-router"
+import { routeTree } from "./routeTree.gen"
+
+export function createRouter() {
+  return createTanStackRouter({
+    routeTree,
+    defaultPreload: "intent",
+    scrollRestoration: true,
+  })
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}
+`;
+}
+function ssrRootRoute(fontFamily) {
+  const fontParam = fontFamily.replace(/\s+/g, "+");
+  return `import { Outlet, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router"
+import appCss from "../styles/app.css?url"
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "App" },
+    ],
+    // The design-system font is loaded here (SSR has no index.html). Keep the
+    // family in sync with --font-sans / --font-heading in src/styles/app.css.
+    links: [
+      { rel: "preconnect", href: "https://fonts.googleapis.com" },
+      { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
+      { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=${fontParam}:wght@400;500;600;700&display=swap" },
+      { rel: "stylesheet", href: appCss },
+    ],
+  }),
+  errorComponent: ({ error }) => (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-3 p-8">
+      <h1 className="text-2xl font-heading font-semibold text-destructive">Something went wrong</h1>
+      <pre className="max-w-full overflow-auto rounded-md bg-muted p-4 text-left text-xs text-muted-foreground">{error instanceof Error ? error.message : String(error)}</pre>
+    </main>
+  ),
+  notFoundComponent: () => (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-2 p-8">
+      <h1 className="text-2xl font-heading font-semibold">404</h1>
+      <p className="text-muted-foreground">This page could not be found.</p>
+    </main>
+  ),
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body className="min-h-screen bg-background text-foreground font-sans">
+        <Outlet />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+`;
+}
+function ssrIndexRoute() {
+  return `import { createFileRoute } from "@tanstack/react-router"
+import { createServerFn } from "@tanstack/react-start"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+// Server functions (TanStack Start 1.131.x API \u2014 IMPORTANT, do not invent
+// methods):
+//   - No input:   createServerFn({ method: "GET" }).handler(async () => {...})
+//   - With input: createServerFn({ method: "POST" })
+//                   .validator((d: { title: string }) => d)   // NOT .inputType()
+//                   .handler(async ({ data }) => { data.title })  // input is { data }
+//     Call it as: addTask({ data: { title } })   // NOT addTask({ title })
+//   - DB access:  \`const db = await getDb()\` (async). Resolves D1 in prod,
+//                 libsql in dev. Safe in server fns AND route loaders \u2014 just
+//                 never at module top. Prefer server functions for mutations.
+// Example DB-backed server fn (dev=libsql, prod=D1, same code):
+//   const getItems = createServerFn({ method: "GET" }).handler(async () => {
+//     const db = await getDb()
+//     return await db.select().from(items)
+//   })
+const getServerInfo = createServerFn({ method: "GET" }).handler(async () => {
+  return { renderedAt: new Date().toISOString() }
+})
+
+export const Route = createFileRoute("/")({
+  loader: () => getServerInfo(),
+  component: Home,
+})
+
+function Home() {
+  const info = Route.useLoaderData()
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col items-center justify-center gap-6 p-8">
+      <Card className="w-full">
+        <CardHeader>
+          <CardTitle className="text-2xl">Welcome to your app</CardTitle>
+          <CardDescription>TanStack Start SSR (workerd) \xB7 Tailwind \xB7 shadcn/ui \xB7 Biome \xB7 Drizzle/D1</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          <p className="text-sm text-muted-foreground">Server-rendered at {info.renderedAt}</p>
+          <div className="flex gap-3">
+            <Button>Get started</Button>
+            <Button variant="outline">Learn more</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}
+`;
+}
+function ssrDbSchema() {
+  return `import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core"
+
+// Example table. dev uses local D1 (miniflare), prod uses the D1 binding "DB".
+export const items = sqliteTable("items", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  title: text("title").notNull(),
+  createdAt: integer("created_at", { mode: "timestamp" }).$defaultFn(() => new Date()),
+})
+`;
+}
+function ssrDbIndex() {
+  return `/// <reference types="@cloudflare/workers-types" />
+import { drizzle as drizzleD1 } from "drizzle-orm/d1"
+import * as schema from "./schema"
+
+// Resolve the DB for the CURRENT request. ASYNC \u2014 always \`await getDb()\`.
+// Works from ANYWHERE on the server (route loaders, server functions,
+// beforeLoad) because it does NOT depend on AsyncLocalStorage / getEvent (which
+// is only populated inside server functions under workerd \u2014 calling getDb in a
+// loader the old way threw "No HTTPEvent found in AsyncLocalStorage").
+//   - PROD (workerd): the D1 binding read straight from the per-request env.
+//   - DEV (node SSR): a local libsql file, imported lazily and behind the DEV
+//     guard so neither @libsql/client nor node:stream is ever bundled into the
+//     workerd build (which would break it).
+// Same sqlite schema both ways.
+// __WORKERD__ is replaced at build time by vite (see vite.config.ts): true only
+// for the prod cloudflare-module build, false for dev + the Node preview build.
+// Using it (not import.meta.env.DEV) is what lets the Node preview \u2014 also a
+// production build \u2014 still take the libsql path. It's a literal, so the unused
+// branch (and its driver) is dead-code-eliminated from each bundle.
+declare const __WORKERD__: boolean
+
+export async function getDb() {
+  if (__WORKERD__) {
+    const { env } = await import("cloudflare:workers")
+    return drizzleD1((env as unknown as { DB: D1Database }).DB, { schema })
+  }
+  const { drizzle } = await import("drizzle-orm/libsql")
+  const { createClient } = await import("@libsql/client")
+  return drizzle(
+    createClient({ url: process.env.DATABASE_URL ?? "file:./local.db" }),
+    { schema },
+  )
+}
+`;
+}
+function ssrDrizzleConfig() {
+  return `import { defineConfig } from "drizzle-kit"
+
+// Dev/preview: push the schema straight into the local libsql file (no D1 creds
+// needed) \u2014 this is what \`predev\` runs so tables exist before the dev server.
+// Prod (D1) uses generated migrations applied via wrangler, not this push.
+export default defineConfig({
+  dialect: "sqlite",
+  schema: "./src/db/schema.ts",
+  out: "./drizzle",
+  dbCredentials: { url: process.env.DATABASE_URL ?? "file:./local.db" },
+})
+`;
+}
+function gitignore(mode) {
+  const base = `node_modules
+dist
+.output
+.nitro
+.tanstack
+.vite
+local.db
+*.local
+.DS_Store
+
+# Generated by the TanStack Router/Start vite plugin
+src/routeTree.gen.ts
+`;
+  return mode === "ssr" ? `${base}.wrangler
+.dev.vars
+` : base;
+}
+async function writeAppScaffold(opts, dir) {
+  const name = opts.name ?? "leo-app";
+  const mode = opts.mode ?? "spa";
+  const primary = normalizePrimaryColor(opts.primaryColor ?? "221.2 83.2% 53.3%");
+  const font = opts.fontFamily ?? "Inter";
+  const radius = opts.borderRadius ?? "0.5rem";
+  await mkdir(path2.join(dir, "src", "lib"), { recursive: true });
+  await mkdir(path2.join(dir, "src", "components", "ui"), { recursive: true });
+  await mkdir(path2.join(dir, "src", "routes"), { recursive: true });
+  await mkdir(path2.join(dir, "src", "styles"), { recursive: true });
+  const files = [
+    ["tsconfig.json", tsconfig()],
+    ["biome.json", biomeJson()],
+    ["components.json", componentsJson()],
+    ["tailwind.config.js", tailwindConfig()],
+    ["postcss.config.js", postcssConfig()],
+    [".gitignore", gitignore(mode)],
+    [path2.join("src", "styles", "app.css"), indexCss(primary, font, radius)],
+    [path2.join("src", "lib", "utils.ts"), utilsTs()],
+    [path2.join("src", "lib", "proxy.ts"), proxyTs()],
+    [path2.join("src", "components", "ui", "button.tsx"), uiButton()],
+    [path2.join("src", "components", "ui", "card.tsx"), uiCard()],
+    [path2.join("src", "components", "ui", "input.tsx"), uiInput()],
+    [path2.join("src", "components", "ui", "textarea.tsx"), uiTextarea()],
+    [path2.join("src", "components", "ui", "label.tsx"), uiLabel()],
+    [path2.join("src", "components", "ui", "badge.tsx"), uiBadge()]
+  ];
+  if (mode === "spa") {
+    files.push(["package.json", spaPackageJson(name)], ["vite.config.ts", spaViteConfig()], ["index.html", spaIndexHtml(font)], [path2.join("src", "main.tsx"), spaMainTsx()], [path2.join("src", "routes", "__root.tsx"), spaRootRoute()], [path2.join("src", "routes", "index.tsx"), spaIndexRoute()]);
+  } else {
+    await mkdir(path2.join(dir, "src", "db"), { recursive: true });
+    files.push(["package.json", ssrPackageJson(name)], ["vite.config.ts", ssrViteConfig()], ["wrangler.jsonc", ssrWranglerJsonc(name)], ["drizzle.config.ts", ssrDrizzleConfig()], [path2.join("src", "router.tsx"), ssrRouter()], [path2.join("src", "routes", "__root.tsx"), ssrRootRoute(font)], [path2.join("src", "routes", "index.tsx"), ssrIndexRoute()], [path2.join("src", "db", "schema.ts"), ssrDbSchema()], [path2.join("src", "db", "index.ts"), ssrDbIndex()]);
+  }
+  const created = [];
+  for (const [filePath, content] of files) {
+    await Bun.write(path2.join(dir, filePath), content);
+    created.push(filePath);
+  }
+  return created.sort();
+}
+var scaffoldApp = tool({
+  description: "Scaffold a modern TanStack app with the HelloLeo design system, ShadcnUI, " + "Biome and strict TypeScript. Two modes: mode='spa' (TanStack Router, " + "client-only -- use for static frontends / dashboards) or mode='ssr' " + "(TanStack Start on Cloudflare workerd -- use when the project needs a " + "backend, SSR, server functions, or a database via D1/Drizzle). " + "Creates package.json, vite.config.ts, tsconfig.json (strict), biome.json, " + "components.json, tailwind.config.js, postcss.config.js, " + "src/styles/app.css (design tokens, light+dark), src/lib/utils.ts + proxy.ts, " + "shadcn primitives in src/components/ui (Button, Card, Input, Textarea, " + "Label, Badge), and TanStack routes in src/routes. " + "Call this FIRST for any new project before writing feature routes/components. " + "For NetSuite projects use `setup_netsuite` instead.",
   args: {
-    name: tool.schema.string().optional().describe("Project name for package.json (default: leo-project)"),
-    primaryColor: tool.schema.string().optional().describe("Primary brand color. Prefer raw HSL triplet (no hsl() wrapper, no # prefix), " + 'e.g. "221.2 83.2% 53.3%". Hex like "#3b82f6" is also accepted and will ' + "be auto-converted. Default: blue."),
-    fontFamily: tool.schema.string().optional().describe('Google Font family name, e.g. "Inter", "Poppins" (default: Inter)'),
-    borderRadius: tool.schema.string().optional().describe('Base border radius, e.g. "0.5rem", "0.75rem" (default: 0.5rem)')
+    name: tool.schema.string().optional().describe("Project name for package.json (default: leo-app)"),
+    mode: tool.schema.enum(["spa", "ssr"]).optional().describe("'spa' = TanStack Router client-only (default). 'ssr' = TanStack Start " + "on Cloudflare workerd with SSR + D1/Drizzle. Pick 'ssr' when the app " + "needs a backend, server functions, auth, or a database."),
+    primaryColor: tool.schema.string().optional().describe('Primary brand color as raw HSL triplet, e.g. "221.2 83.2% 53.3%". ' + 'Hex like "#3b82f6" is auto-converted. Default: blue.'),
+    fontFamily: tool.schema.string().optional().describe('Google Font family, e.g. "Inter", "Poppins" (default: Inter)'),
+    borderRadius: tool.schema.string().optional().describe('Base border radius, e.g. "0.5rem" (default: 0.5rem)')
   },
   async execute(args, context) {
-    const created = await writeBaseScaffold(args, context.directory);
+    const mode = args.mode ?? "spa";
+    const created = await writeAppScaffold(args, context.directory);
+    const next = mode === "ssr" ? [
+      "Mode: SSR (TanStack Start, Node server \u2014 runs in the CF Sandbox container).",
+      "Dev server: `npm run dev`.",
+      "Add routes in src/routes/*.tsx; server logic via createServerFn.",
+      "Database: edit src/db/schema.ts, `npm run db:push`, query via `db` from src/db.",
+      "  (dev = local libsql file; prod = D1, see wrangler.jsonc)."
+    ] : [
+      "Mode: SPA (TanStack Router, client-only).",
+      "Dev server: `npm run dev`.",
+      "Add routes in src/routes/*.tsx (file-based; routeTree.gen.ts is generated)."
+    ];
     return [
-      `Scaffolded ${created.length} files:`,
+      `Scaffolded ${created.length} files (mode=${mode}):`,
       ...created.map((f) => `  - ${f}`),
       "",
-      "Next: create src/App.tsx with your application code.",
-      "Design system reference: read the header comment in src/index.css",
-      "  before adding tokens or styling primitives.",
-      "Integration calls: use callIntegration() from src/lib/proxy.ts.",
-      "  Header comment in that file documents slugs, response unwrapping,",
-      "  pagination, and frontend-only vs HelloLeo Cloud routing.",
-      "Update package.json with any extra packages you need after scaffolding."
+      ...next,
+      "",
+      "Design system: src/styles/app.css tokens (light+dark) drive Tailwind +",
+      "  shadcn. Never hardcode colors -- use bg-primary, text-foreground, etc.",
+      "UI primitives live in src/components/ui (Button, Card scaffolded).",
+      "  Add more shadcn components consuming the same tokens.",
+      "Integrations: callIntegration() from src/lib/proxy.ts.",
+      "Lint/format: `npm run lint` (Biome)."
     ].join(`
 `);
   }
 });
 var ScaffoldPlugin = async () => {
   return {
-    tool: { scaffold }
+    tool: { scaffold: scaffoldApp }
   };
 };
 // src/tools/setup-netsuite.ts