@helloleo/plugins 0.1.12 → 0.1.13

package/src/tools/scaffold.ts

@@ -76,7 +76,7 @@ export default defineConfig({
 })`;
 }
 
-function tailwindConfig() {
+export function tailwindConfig() {
 	return `export default {
   darkMode: ["class"],
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -119,7 +119,7 @@ function tailwindConfig() {
 }`;
 }
 
-function postcssConfig() {
+export function postcssConfig() {
 	return `export default {
   plugins: {
     tailwindcss: {},
@@ -128,7 +128,7 @@ function postcssConfig() {
 }`;
 }
 
-function indexCss(
+export function indexCss(
 	primaryColor: string,
 	fontFamily: string,
 	borderRadius: string,
@@ -152,8 +152,9 @@ function indexCss(
  *     --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> — 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.
  *
@@ -233,7 +234,7 @@ body {
 }`;
 }
 
-function utilsTs() {
+export function utilsTs() {
 	return `import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
@@ -242,7 +243,7 @@ export function cn(...inputs: ClassValue[]) {
 }`;
 }
 
-function proxyTs() {
+export function proxyTs() {
 	return `/*
  * HelloLeo Integration Proxy -- runtime helper for connected integrations.
  *
@@ -286,6 +287,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 {
@@ -365,7 +367,7 @@ function hexToHslTriplet(hex: string): string {
 	return `${Math.round(hue)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
 }
 
-function normalizePrimaryColor(value: string): string {
+export function normalizePrimaryColor(value: string): string {
 	const trimmed = value.trim();
 	if (/^(#|[0-9a-fA-F]{3}$|[0-9a-fA-F]{6}$)/.test(trimmed)) {
 		const hsl = hexToHslTriplet(trimmed);
@@ -432,60 +434,953 @@ export async function writeBaseScaffold(
 	return created;
 }
 
-export const scaffold = tool({
+// NOTE: `writeBaseScaffold` + the design-system helpers above are the legacy
+// React+Vite base, still consumed by `setup_netsuite`. The `scaffold` TOOL below
+// is the current TanStack scaffolder (spa/ssr) — it replaced the old React tool.
+
+/*
+ * scaffold_app -- next-gen HelloLeo scaffold.
+ *
+ * One tool, two modes (both TanStack, both Vite, same design system + tooling):
+ *   - mode "spa"  -> TanStack Router SPA (client-only). Runs `vite dev`; deploys
+ *                    as a static Vite app on the preview sandbox, like today.
+ *   - mode "ssr"  -> TanStack Start (Node server target, validated by
+ *                    cf-sandbox-tanstack-poc). SSR loaders + server functions +
+ *                    Drizzle. Runs `vite dev`; on the preview sandbox the Node
+ *                    server runs inside the CF Sandbox container (the PM2
+ *                    replacement). DB adapter swaps libsql (dev) -> D1 (prod);
+ *                    wrangler.jsonc carries the Workers-for-Platforms prod target.
+ *                    (Executing SSR *on workerd itself* needs a newer TanStack/CF
+ *                    integration than the pinned 1.121.x — tracked as follow-up.)
+ *
+ * Shared across both:
+ *   - Tailwind v3 + the HelloLeo design-system tokens (src/styles/app.css) so
+ *     the no-code Design panel round-trip keeps working (same tokens as the
+ *     legacy `scaffold`).
+ *   - ShadcnUI primitives (components.json + src/components/ui/*) consuming the
+ *     design tokens -- never hardcoded colors.
+ *   - Biome (biome.json) for format + lint. No ESLint/Prettier.
+ *   - Strict TypeScript (tsconfig.json: strict, bundler resolution, @/* paths)
+ *     so the editor / OpenCode LSP gives full type info.
+ *
+ * Version pins mirror the validated cf-sandbox-tanstack-poc:
+ * TanStack 1.121.x, React 19, Vite 6, @cloudflare/* current.
+ */
+
+const REACT = "^19.0.0";
+const VITE = "^6.0.5";
+const TS = "^5.6.3";
+// Pin EXACT (no caret): @tanstack/react-router and @tanstack/react-start must
+// share one @tanstack/router-core. react-router floats ahead of react-start's
+// release line, so a caret skews router-core and SSR breaks (missing
+// processRouteTree export). 1.131.50 is the matched set react-start ships with.
+const TANSTACK = "1.131.50";
+const BIOME = "2.4.8";
+
+// ---------- shared tooling files ----------
+
+function tsconfig(): string {
+	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(): string {
+	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(): string {
+	// shadcn/ui config -- "new-york" style on Tailwind v3 with our token names.
+	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,
+	);
+}
+
+// ---------- shadcn primitives (token-driven) ----------
+
+function uiButton(): string {
+	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(): string {
+	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(): string {
+	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(): string {
+	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(): string {
+	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(): string {
+	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 }
+`;
+}
+
+// ---------- mode: SPA (TanStack Router) ----------
+
+function spaPackageJson(name: string): string {
+	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(): string {
+	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: string): string {
+	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(): string {
+	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(): string {
+	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(): string {
+	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 · Tailwind · shadcn/ui · Biome</CardDescription>
+        </CardHeader>
+        <CardContent className="flex gap-3">
+          <Button>Get started</Button>
+          <Button variant="outline">Learn more</Button>
+        </CardContent>
+      </Card>
+    </main>
+  )
+}
+`;
+}
+
+// ---------- mode: SSR (TanStack Start on Cloudflare workerd) ----------
+
+function ssrPackageJson(name: string): string {
+	return JSON.stringify(
+		{
+			name,
+			private: true,
+			version: "0.0.0",
+			type: "module",
+			scripts: {
+				// Node-target SSR (Nitro). vite dev for local; build emits
+				// .output/server/index.mjs (PORT-aware) which the CF Sandbox runs.
+				// `predev` runs automatically on `npm run dev` (the sandbox's launch
+				// command) → creates the DB tables before the server starts, so a
+				// DB query in a route loader never hits "no such table".
+				predev: "drizzle-kit push --force",
+				dev: "vite dev --host",
+				build: "vite build",
+				// `preview` is what HelloLeo's PM2 publish runs for vite projects to
+				// serve the production build. For node-SSR that's the Nitro server
+				// (honours PORT). `prepreview` runs first → ensures DB tables exist.
+				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(): string {
+	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 — 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: string): string {
+	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 — 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(): string {
+	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: string): string {
+	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(): string {
+	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 — 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 — 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) · Tailwind · shadcn/ui · Biome · 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(): string {
+	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(): string {
+	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 — 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 — 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 — also a
+// production build — 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(): string {
+	return `import { defineConfig } from "drizzle-kit"
+
+// Dev/preview: push the schema straight into the local libsql file (no D1 creds
+// needed) — 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: string): string {
+	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\n.dev.vars\n` : base;
+}
+
+// ---------- writer ----------
+
+interface ScaffoldAppOptions {
+	name?: string;
+	mode?: "spa" | "ssr";
+	primaryColor?: string;
+	fontFamily?: string;
+	borderRadius?: string;
+}
+
+async function writeAppScaffold(
+	opts: ScaffoldAppOptions,
+	dir: string,
+): Promise<string[]> {
+	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(path.join(dir, "src", "lib"), { recursive: true });
+	await mkdir(path.join(dir, "src", "components", "ui"), { recursive: true });
+	await mkdir(path.join(dir, "src", "routes"), { recursive: true });
+	await mkdir(path.join(dir, "src", "styles"), { recursive: true });
+
+	// Files common to both modes.
+	const files: [string, string][] = [
+		["tsconfig.json", tsconfig()],
+		["biome.json", biomeJson()],
+		["components.json", componentsJson()],
+		["tailwind.config.js", tailwindConfig()],
+		["postcss.config.js", postcssConfig()],
+		[".gitignore", gitignore(mode)],
+		[path.join("src", "styles", "app.css"), indexCss(primary, font, radius)],
+		[path.join("src", "lib", "utils.ts"), utilsTs()],
+		[path.join("src", "lib", "proxy.ts"), proxyTs()],
+		[path.join("src", "components", "ui", "button.tsx"), uiButton()],
+		[path.join("src", "components", "ui", "card.tsx"), uiCard()],
+		[path.join("src", "components", "ui", "input.tsx"), uiInput()],
+		[path.join("src", "components", "ui", "textarea.tsx"), uiTextarea()],
+		[path.join("src", "components", "ui", "label.tsx"), uiLabel()],
+		[path.join("src", "components", "ui", "badge.tsx"), uiBadge()],
+	];
+
+	if (mode === "spa") {
+		files.push(
+			["package.json", spaPackageJson(name)],
+			["vite.config.ts", spaViteConfig()],
+			["index.html", spaIndexHtml(font)],
+			[path.join("src", "main.tsx"), spaMainTsx()],
+			[path.join("src", "routes", "__root.tsx"), spaRootRoute()],
+			[path.join("src", "routes", "index.tsx"), spaIndexRoute()],
+		);
+	} else {
+		await mkdir(path.join(dir, "src", "db"), { recursive: true });
+		files.push(
+			["package.json", ssrPackageJson(name)],
+			["vite.config.ts", ssrViteConfig()],
+			["wrangler.jsonc", ssrWranglerJsonc(name)],
+			["drizzle.config.ts", ssrDrizzleConfig()],
+			[path.join("src", "router.tsx"), ssrRouter()],
+			[path.join("src", "routes", "__root.tsx"), ssrRootRoute(font)],
+			[path.join("src", "routes", "index.tsx"), ssrIndexRoute()],
+			[path.join("src", "db", "schema.ts"), ssrDbSchema()],
+			[path.join("src", "db", "index.ts"), ssrDbIndex()],
+		);
+	}
+
+	const created: string[] = [];
+	for (const [filePath, content] of files) {
+		await Bun.write(path.join(dir, filePath), content);
+		created.push(filePath);
+	}
+	return created.sort();
+}
+
+export const scaffoldApp = 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.",
+		"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)"),
+			.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. 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.",
+				'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 name, e.g. "Inter", "Poppins" (default: Inter)',
-			),
+			.describe('Google Font family, e.g. "Inter", "Poppins" (default: Inter)'),
 		borderRadius: tool.schema
 			.string()
 			.optional()
-			.describe(
-				'Base border radius, e.g. "0.5rem", "0.75rem" (default: 0.5rem)',
-			),
+			.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 — 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("\n");
 	},
 });
 
+// Registered as `scaffold` — this is THE scaffold tool (replaced the legacy
+// React+Vite `scaffold`). The coder UI keys its scaffold events off this name.
 export const ScaffoldPlugin: Plugin = async () => {
 	return {
-		tool: { scaffold: scaffold },
+		tool: { scaffold: scaffoldApp },
 	};
 };