npm - @helloleo/plugins - Versions diffs - 0.1.14 → 0.1.16 - Mend

@helloleo/plugins 0.1.14 → 0.1.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (125) hide show

package/dist/index.js CHANGED Viewed

@@ -12538,404 +12538,50 @@ var RemovePlugin = async () => {
 };
 // src/tools/scaffold.ts
 import { mkdir } from "fs/promises";
-import path2 from "path";
-function packageJson(name) {
-  return JSON.stringify({
-    name,
-    private: true,
-    version: "0.0.0",
-    type: "module",
-    scripts: {
-      dev: "vite",
-      start: "vite",
-      build: "vite build",
-      preview: "vite preview"
-    },
-    dependencies: {
-      react: "^18.3.1",
-      "react-dom": "^18.3.1",
-      clsx: "^2.1.1",
-      "tailwind-merge": "^2.6.0",
-      "lucide-react": "^1.14.0"
-    },
-    devDependencies: {
-      "@types/react": "^18.3.12",
-      "@types/react-dom": "^18.3.1",
-      "@vitejs/plugin-react": "^4.3.4",
-      autoprefixer: "^10.4.20",
-      postcss: "^8.4.49",
-      tailwindcss: "^3.4.17",
-      typescript: "^5.6.3",
-      vite: "^6.0.5"
-    }
-  }, null, 2);
-}
-function indexHtml(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 viteConfig() {
-  return `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    allowedHosts: true,
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-})`;
-}
-function tailwindConfig() {
-  return `export default {
-  darkMode: ["class"],
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
-        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
-        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
-        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
-        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
-        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
-        success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))" },
-        warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))" },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-      },
-      fontFamily: {
-        sans: "var(--font-sans)",
-        heading: "var(--font-heading)",
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      borderWidth: {
-        DEFAULT: "var(--border-width)",
-      },
-      boxShadow: {
-        DEFAULT: "var(--shadow)",
-        lg: "var(--shadow-lg)",
-      },
-    },
-  },
-  plugins: [],
-}`;
-}
-function postcssConfig() {
-  return `export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}`;
-}
-function indexCss(primaryColor, fontFamily, borderRadius) {
-  const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
-  return `/*
- * HelloLeo Design System -- READ BEFORE STYLING.
- *
- * The CSS variables below are the single source of truth for the project's
- * design tokens. They power the no-code Design panel in the HelloLeo webapp:
- * the user edits colors / fonts / radius / shadows visually, and the panel
- * writes back to THIS file. Keeping the conventions intact is what unlocks
- * that round-trip.
- *
- * Conventions (do not break):
- *   - All colors stored as raw HSL triplets (no hsl() wrapper, no #hex).
- *     Tailwind classes wrap them via hsl(var(--token)). Never inline #hex
- *     in components -- always use design tokens (bg-primary, text-foreground,
- *     border-border, etc.).
- *   - --primary / --secondary / --accent / --destructive / --success /
- *     --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.
- *   - .dark variants mirror :root one-for-one. When adding a token, add it
- *     to BOTH blocks or dark mode breaks.
- *
- * UI primitives (Button, Card, Input, Modal, Table, Badge, Alert, Spinner)
- * MUST live in src/components/ui/ and consume these tokens via Tailwind
- * classes -- never hardcoded colors. One responsibility per file, <50 lines
- * per component.
- */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --primary: ${primaryColor};
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
-    --radius: ${borderRadius};
-    --border-width: 1px;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-    --font-sans: ${fontValue};
-    --font-heading: ${fontValue};
-  }
+import path3 from "path";
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
-    --border-width: 1px;
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
-    --font-sans: ${fontValue};
-    --font-heading: ${fontValue};
+// src/template-render.ts
+import path2 from "path";
+var {Glob } = globalThis.Bun;
+var TEMPLATES_ROOT = path2.join(import.meta.dir, "templates");
+var TOKEN_RE = /\{\{(LEO_[A-Z0-9_]+)\}\}/g;
+var SKIP = /(^|\/)(node_modules|dist|dist-ssr|\.tanstack|\.output|bun\.lock|bun\.lockb|package-lock\.json|yarn\.lock|pnpm-lock\.yaml)(\/|$)/;
+async function renderTemplate(templateId, vars, destDir) {
+  const root = path2.join(TEMPLATES_ROOT, templateId);
+  const glob = new Glob("**/*");
+  const created = [];
+  for await (const rel of glob.scan({
+    cwd: root,
+    dot: true,
+    onlyFiles: true
+  })) {
+    if (SKIP.test(rel))
+      continue;
+    const raw = await Bun.file(path2.join(root, rel)).text();
+    const content = raw.replace(TOKEN_RE, (_m, key) => vars[key] ?? "");
+    await Bun.write(path2.join(destDir, rel), content);
+    created.push(rel);
   }
+  return created.sort();
 }
-body {
-  @apply bg-background text-foreground font-sans;
-}`;
-}
-function utilsTs() {
-  return `import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}`;
-}
+// src/tools/scaffold.ts
+var SCAFFOLD_VERSION = "tanstack-router-2026-06-15";
 function projectUuidFromDir(dir) {
-  return path2.basename(dir);
-}
-function proxyTs(projectUuid) {
-  return `/*
- * HelloLeo Integration Proxy -- runtime helper for connected integrations.
- *
- * All third-party APIs (Odoo, Airtable, HubSpot, Stripe, Notion, Gladia,
- * Microsoft 365, Klaviyo, Supabase, DimoMaint, etc.) are reachable through
- * this single proxy. The proxy handles auth and CORS using credentials the
- * user already configured in Project Settings -- you NEVER pass an API key
- * from frontend code, and you NEVER call third-party hosts directly.
- *
- * Two modes:
- *   A) Frontend-only project -> import callIntegration() from this file.
- *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
- *      Use Cloud whenever the project needs backend logic, automations,
- *      webhooks, scheduled jobs, or AI agents. Keep secrets server-side.
- *
- * Integration slugs:
- *   Use the exact slug from the Enabled MCP list with the "pipedream-"
- *   prefix removed. e.g. "pipedream-gorgias_oauth" -> "gorgias_oauth".
- *   Native integrations (odoo, airtable) keep their plain name.
- *
- * Response shape (always wrapped):
- *   { success: boolean, status: number, data: <provider payload> }
- *
- *   Unwrap "data" by provider:
- *     odoo            -> data.result
- *     airtable        -> data.records
- *     notion          -> data.results
- *     microsoft 365   -> data.value
- *     klaviyo         -> data.data
- *     supabase / dimomaint -> data
- *
- * Pagination: put query params directly in the endpoint string,
- *   e.g. endpoint: '/api/tickets?cursor=xyz&per_page=100'.
- *   Read pagination metadata from the response to build the next call.
- *   Never .filter() large lists in the frontend -- paginate server-side.
- *
- * Secrets for non-integration APIs (e.g. raw OpenAI): store them in
- * HelloLeo Cloud -> Settings -> Cloud -> Secrets, and read via env.SECRET_NAME
- * from a Worker. Never embed secrets in frontend code.
- */
-export const INTEGRATION_PROXY_URL =
-  'https://api.app.helloleo.dev/api/integration-proxy/${projectUuid}';
-export interface ProxyRequest {
-  integration: string;
-  endpoint: string;
-  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-  body?: unknown;
-  headers?: Record<string, string>;
-}
-export interface ProxyResponse<T = unknown> {
-  success: boolean;
-  status: number;
-  data: T;
-}
-export async function callIntegration<T = unknown>(
-  req: ProxyRequest,
-): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ method: 'POST', ...req }),
-  });
-  return res.json();
-}
-/* Example -- Odoo search_read:
- *
- *   const r = await callIntegration({
- *     integration: 'odoo',
- *     endpoint: '/jsonrpc',
- *     body: {
- *       model: 'product.template',
- *       method: 'search_read',
- *       args: [[['type', '=', 'consu']]],
- *       kwargs: { fields: ['name', 'list_price'], limit: 50 },
- *     },
- *   });
- *   const products = r.data?.result ?? [];
- */
-`;
-}
-function hexToHslTriplet(hex3) {
-  let h = hex3.trim().replace(/^#/, "");
-  if (h.length === 3) {
-    h = h.split("").map((c) => c + c).join("");
-  }
-  if (!/^[0-9a-fA-F]{6}$/.test(h))
-    return "";
-  const r = Number.parseInt(h.slice(0, 2), 16) / 255;
-  const g = Number.parseInt(h.slice(2, 4), 16) / 255;
-  const b = Number.parseInt(h.slice(4, 6), 16) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  let s = 0;
-  let hue = 0;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        hue = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        hue = (b - r) / d + 2;
-        break;
-      default:
-        hue = (r - g) / d + 4;
-    }
-    hue *= 60;
-  }
-  return `${Math.round(hue)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-}
-function normalizePrimaryColor(value) {
-  const trimmed = value.trim();
-  if (/^(#|[0-9a-fA-F]{3}$|[0-9a-fA-F]{6}$)/.test(trimmed)) {
-    const hsl = hexToHslTriplet(trimmed);
-    if (hsl)
-      return hsl;
-  }
-  return trimmed;
-}
-function mainTsx() {
-  return `import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)`;
+  return path3.basename(dir);
 }
 async function writeBaseScaffold(opts, dir) {
   const name = opts.name ?? "leo-project";
-  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 });
-  const files = [
-    ["package.json", packageJson(name)],
-    ["index.html", indexHtml(font)],
-    ["vite.config.js", viteConfig()],
-    ["tailwind.config.js", tailwindConfig()],
-    ["postcss.config.js", postcssConfig()],
-    [path2.join("src", "index.css"), indexCss(primary, font, radius)],
-    [path2.join("src", "lib", "utils.ts"), utilsTs()],
-    [path2.join("src", "lib", "proxy.ts"), proxyTs(projectUuidFromDir(dir))],
-    [path2.join("src", "main.tsx"), mainTsx()]
-  ];
-  const created = [];
-  for (const [filePath, content] of files) {
-    await Bun.write(path2.join(dir, filePath), content);
-    created.push(filePath);
-  }
-  return created;
+  const created = await renderTemplate(SCAFFOLD_VERSION, { LEO_NAME: name, LEO_PROJECT_UUID: projectUuidFromDir(dir) }, dir);
+  await mkdir(path3.join(dir, ".leo"), { recursive: true });
+  const leoPath = path3.join(".leo", "project.json");
+  await Bun.write(path3.join(dir, leoPath), JSON.stringify({ $schema: 1, scaffold: SCAFFOLD_VERSION }, null, 2));
+  return [...created, leoPath];
 }
 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.",
+  description: "Scaffold a new React 19 + Vite + Tailwind CSS v4 + TanStack Router project " + "with shadcn/ui baked in. Renders the full template: TanStack file-based " + "routing (src/routes/), the complete shadcn/ui component set under " + "src/components/ui, src/lib/utils.ts (cn helper), src/lib/proxy.ts " + "(HelloLeo integration proxy), src/styles.css (shadcn design tokens, " + "light+dark), plus package.json, vite.config.ts, tsconfig.json, " + "tsr.config.json, components.json, .gitignore and the generated " + "src/routeTree.gen.ts. Call this FIRST for any new project before adding " + "routes and pages. 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.",
   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-project)")
   },
   async execute(args, context) {
     const created = await writeBaseScaffold(args, context.directory);
@@ -12943,13 +12589,21 @@ var scaffold = tool({
       `Scaffolded ${created.length} files:`,
       ...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: add routes as files under src/routes/ (TanStack file-based",
+      "  routing). Edit src/routes/index.tsx for the home page.",
+      "UI: shadcn/ui components are already in src/components/ui -- import and",
+      "  use them; do not attempt to re-add via the shadcn CLI.",
+      "Design system: edit tokens in src/styles.css (light + dark blocks).",
+      "Data fetching: React Query is wired (QueryClient on the router context +",
+      "  QueryClientProvider). ALWAYS fetch with @tanstack/react-query --",
+      "  useQuery / useMutation in components, or a route loader calling",
+      "  context.queryClient.ensureQueryData(). Do NOT hand-roll fetches with",
+      "  useEffect + useState. Wrap the fetch call (usually callIntegration())",
+      "  in the queryFn.",
+      "Integration calls: use callIntegration() from src/lib/proxy.ts -- as the",
+      "  queryFn body, never on its own in useEffect. Its header comment",
+      "  documents slugs, response unwrapping, pagination, and frontend-only vs",
+      "  HelloLeo Cloud routing."
     ].join(`
 `);
   }
@@ -12961,7 +12615,7 @@ var ScaffoldPlugin = async () => {
 };
 // src/tools/setup-netsuite.ts
 import { mkdir as mkdir2 } from "fs/promises";
-import path3 from "path";
+import path4 from "path";
 function netsuiteTs() {
   return `/*
  * NetSuite OAuth client helper (bearer-token-in-fragment).
@@ -13152,34 +12806,119 @@ export function LoginPage() {
 }
 `;
 }
-function netsuiteAuthGateTsx() {
-  return `import { useEffect, useState } from 'react';
+function authTsx() {
+  return `import * as React from 'react';
+import {
+  getNetSuiteSession,
+  signInWithNetSuite,
+  signOutNetSuite,
+  type NetSuiteSession,
+} from './netsuite';
+/**
+ * NetSuite auth context. Holds the current session (resolved from the Worker's
+ * /api/me via getNetSuiteSession) and exposes sign-in / sign-out. The only
+ * authoritative auth check is /api/me -- never trust sessionStorage directly.
+ */
+export interface NetSuiteAuthContextValue {
+  pending: boolean;
+  isAuthenticated: boolean;
+  session: NetSuiteSession | null;
+  signIn: () => void;
+  signOut: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+const NetSuiteAuthContext =
+  React.createContext<NetSuiteAuthContextValue | null>(null);
+export function NetSuiteAuthProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [session, setSession] = React.useState<NetSuiteSession | null>(null);
+  const [pending, setPending] = React.useState(true);
+  const refresh = React.useCallback(async () => {
+    setPending(true);
+    try {
+      setSession(await getNetSuiteSession());
+    } finally {
+      setPending(false);
+    }
+  }, []);
+  React.useEffect(() => {
+    refresh();
+  }, [refresh]);
+  const value: NetSuiteAuthContextValue = {
+    pending,
+    isAuthenticated: Boolean(session?.authenticated),
+    session,
+    signIn: () => signInWithNetSuite(),
+    signOut: signOutNetSuite,
+    refresh,
+  };
+  return (
+    <NetSuiteAuthContext.Provider value={value}>
+      {children}
+    </NetSuiteAuthContext.Provider>
+  );
+}
+export function useNetSuiteAuth(): NetSuiteAuthContextValue {
+  const ctx = React.useContext(NetSuiteAuthContext);
+  if (!ctx) {
+    throw new Error('useNetSuiteAuth must be used within <NetSuiteAuthProvider>');
+  }
+  return ctx;
+}
+`;
+}
+function authLayoutTsx() {
+  return `import type { ReactNode } from 'react';
+import { NetSuiteAuthProvider, useNetSuiteAuth } from '../../lib/auth';
 import { LoginPage } from './LoginPage';
-import { getNetSuiteSession, type NetSuiteSession } from '../../lib/netsuite';
 /**
- * Mandatory auth gate for NetSuite projects. Wrap your real App content with
- * <AuthGate>...</AuthGate>. Never render NetSuite data without this gate -- it
- * is the ONLY supported authentication for a NetSuite project (no password
- * gates, no sessionStorage flags, no shared credential).
- *
- * Pattern in src/App.tsx:
+ * NetSuite auth layout. This is the ONLY wiring you need to add by hand --
+ * wrap the root route's <Outlet /> with it:
  *
- *   import { AuthGate } from './components/auth/AuthGate';
- *   export default function App() {
+ *   // src/routes/__root.tsx
+ *   import { AuthLayout } from '../components/auth/AuthLayout';
+ *   ...
+ *   function RootComponent() {
  *     return (
- *       <AuthGate>
- *         <Dashboard />   // your authenticated content
- *       </AuthGate>
+ *       <>
+ *         <AuthLayout>
+ *           <Outlet />
+ *         </AuthLayout>
+ *         { ...devtools... }
+ *       </>
  *     );
  *   }
+ *
+ * It provides NetSuite auth context to the whole tree and gates rendering:
+ * while the session resolves it shows a spinner, unauthenticated users see
+ * <LoginPage />, authenticated users see your routes. Use useNetSuiteAuth()
+ * anywhere below it to read the session or sign out. NEVER swap this for a
+ * password gate -- real OAuth is the only supported login.
  */
-export function AuthGate({ children }: { children: React.ReactNode }) {
-  const [session, setSession] = useState<NetSuiteSession | null>(null);
+export function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <NetSuiteAuthProvider>
+      <Gate>{children}</Gate>
+    </NetSuiteAuthProvider>
+  );
+}
-  useEffect(() => { getNetSuiteSession().then(setSession); }, []);
+function Gate({ children }: { children: ReactNode }) {
+  const { pending, isAuthenticated } = useNetSuiteAuth();
-  if (session === null) {
+  if (pending) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-background">
         <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
@@ -13187,90 +12926,79 @@ export function AuthGate({ children }: { children: React.ReactNode }) {
     );
   }
-  if (!session.authenticated) return <LoginPage />;
+  if (!isAuthenticated) return <LoginPage />;
   return <>{children}</>;
 }
 `;
 }
-function netsuiteAppTsx() {
-  return `import { AuthGate } from './components/auth/AuthGate';
-/**
- * NetSuite project entry point. KEEP <AuthGate> as the outermost element --
- * removing it disables real OAuth and exposes NetSuite data to anonymous
- * users. Build your dashboard / pages inside the gate.
- */
-export default function App() {
-  return (
-    <AuthGate>
-      <div className="min-h-screen bg-background text-foreground p-8">
-        <h1 className="text-2xl font-bold">You are signed in to NetSuite.</h1>
-        <p className="text-muted-foreground mt-2">
-          Replace this placeholder with your dashboard.
-        </p>
-      </div>
-    </AuthGate>
-  );
-}
-`;
-}
 var setupNetsuite = tool({
-  description: "Bootstrap a NetSuite-backed React + Vite + Tailwind project in one call. " + "Writes the full HelloLeo base scaffold AND the NetSuite OAuth wiring " + "(src/lib/netsuite.ts, src/components/auth/{SignInWithNetSuite,LoginPage,AuthGate}.tsx, " + "src/App.tsx wrapped in <AuthGate>). " + "Use this INSTEAD of `scaffold` for any project that needs NetSuite. " + "Uses default theme (Inter font, blue primary, 0.5rem radius) -- edit " + "src/index.css afterwards to customise. Real OAuth is wired from day " + "one -- never replace the gate with a password placeholder.",
+  description: "Bootstrap a NetSuite-backed React + Vite + Tailwind v4 + TanStack Router " + "project in one call. Writes the full HelloLeo base scaffold PLUS the " + "NetSuite OAuth wiring, all ADDITIVE -- it never overwrites a scaffold " + "file. Adds src/lib/netsuite.ts (OAuth client), src/lib/auth.tsx " + "(NetSuiteAuthProvider + useNetSuiteAuth), and " + "src/components/auth/{AuthLayout,LoginPage,SignInWithNetSuite}.tsx. " + "Use this INSTEAD of `scaffold` for any project that needs NetSuite. " + "After it runs there is exactly ONE manual step: wrap the root route's " + "<Outlet /> with <AuthLayout> in src/routes/__root.tsx (the tool's output " + "shows the snippet). Real OAuth is wired from day one -- never replace " + "<AuthLayout> with a password placeholder.",
   args: {},
   async execute(_args, context) {
     const dir = context.directory;
     const base = await writeBaseScaffold({}, dir);
-    await mkdir2(path3.join(dir, "src", "components", "auth"), {
+    await mkdir2(path4.join(dir, "src", "components", "auth"), {
       recursive: true
     });
     const nsFiles = [
-      [path3.join("src", "lib", "netsuite.ts"), netsuiteTs()],
+      [path4.join("src", "lib", "netsuite.ts"), netsuiteTs()],
+      [path4.join("src", "lib", "auth.tsx"), authTsx()],
       [
-        path3.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
-        signInButtonTsx()
+        path4.join("src", "components", "auth", "AuthLayout.tsx"),
+        authLayoutTsx()
       ],
       [
-        path3.join("src", "components", "auth", "LoginPage.tsx"),
+        path4.join("src", "components", "auth", "LoginPage.tsx"),
         netsuiteLoginPageTsx()
       ],
       [
-        path3.join("src", "components", "auth", "AuthGate.tsx"),
-        netsuiteAuthGateTsx()
-      ],
-      [path3.join("src", "App.tsx"), netsuiteAppTsx()]
+        path4.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
+        signInButtonTsx()
+      ]
     ];
-    const nsCreated = [];
     for (const [filePath, content] of nsFiles) {
-      await Bun.write(path3.join(dir, filePath), content);
-      nsCreated.push(filePath);
+      await Bun.write(path4.join(dir, filePath), content);
     }
-    const all = [...base, ...nsCreated];
+    const all = [...base, ...nsFiles.map(([f]) => f)];
     return [
-      `Scaffolded ${all.length} files (base + NetSuite OAuth):`,
-      ...all.map((f) => `  - ${f}`),
+      `Generated ${all.length} files (base scaffold + NetSuite OAuth, all additive -- nothing overwritten).`,
+      "",
+      "All you need to do is wrap the root layout with the auth layout.",
+      "In src/routes/__root.tsx, import AuthLayout and wrap <Outlet />:",
+      "",
+      "    import { AuthLayout } from '../components/auth/AuthLayout'",
+      "",
+      "    function RootComponent() {",
+      "      return (",
+      "        <>",
+      "          <AuthLayout>",
+      "            <Outlet />",
+      "          </AuthLayout>",
+      "          {/* keep the existing <TanStackDevtools ... /> here */}",
+      "        </>",
+      "      )",
+      "    }",
+      "",
+      "That single wrap gates every route: <LoginPage /> until the user signs",
+      "in with NetSuite, your routes after. Read the session anywhere below it",
+      "with useNetSuiteAuth() from src/lib/auth.tsx. NEVER swap <AuthLayout>",
+      "for a password gate -- real OAuth is the only supported login.",
       "",
-      "Next: build your dashboard INSIDE <AuthGate> in src/App.tsx.",
-      "Design system reference: read the header comment in src/index.css",
-      "  before adding tokens or styling primitives.",
+      "NetSuite OAuth files written:",
+      "  - src/lib/netsuite.ts          OAuth client (signIn / session / workerFetch)",
+      "  - src/lib/auth.tsx             NetSuiteAuthProvider + useNetSuiteAuth",
+      "  - src/components/auth/AuthLayout.tsx        provider + gate (wrap root with this)",
+      "  - src/components/auth/LoginPage.tsx         unauthenticated view",
+      "  - src/components/auth/SignInWithNetSuite.tsx sign-in button",
       "",
-      "NetSuite auth -- already wired:",
-      "  - App.tsx wraps everything in <AuthGate>. NEVER remove the gate",
-      "    or build a password placeholder -- real OAuth is the only login.",
-      "  - LoginPage.tsx + SignInWithNetSuite.tsx are the unauthenticated",
-      "    view. Customise the copy / imagery, keep <SignInWithNetSuite/>",
-      "    as the call-to-action.",
-      "  - signInWithNetSuite() in src/lib/netsuite.ts hits the Worker at",
-      "    /auth/netsuite/start. Deploy the Worker via cloudflare-backend",
-      "    MCP with routes:",
+      "Worker (deploy via cloudflare-backend MCP) must serve:",
       "      GET  /auth/netsuite/start     -- redirect to NetSuite OAuth",
       "      GET  /auth/netsuite/callback  -- code -> token exchange",
-      "      GET  /api/me                   -- current session",
+      "      GET  /api/me                  -- current session",
       "      POST /auth/netsuite/logout    -- clear session",
-      "    Worker reads env.NETSUITE_ACCOUNT_ID, env.NETSUITE_CLIENT_ID,",
-      "    env.NETSUITE_CLIENT_SECRET (set by the runtime-setup wizard).",
-      "  - VITE_WORKER_URL must be set so the frontend knows where to",
-      "    send users. The HelloLeo Cloud provisioner seeds this."
+      "    Reads env.NETSUITE_ACCOUNT_ID / _CLIENT_ID / _CLIENT_SECRET.",
+      "    VITE_WORKER_URL must be set (HelloLeo Cloud provisioner seeds it)."
     ].join(`
 `);
   }