@xano/sdk 1.0.6 → 1.0.8

package/dist/{chunk-EQFYOOO6.js → chunk-5GIOCDUM.js}

@@ -1,15 +1,11 @@
-import {
-  decodeMarkerWith,
-  iconLibraryOf,
-  reactPreset
-} from "./chunk-M6ZFSTIZ.js";
 import {
   blockVersion,
   composeBlock,
   gitattributesSpec,
+  gitignoreSpec,
   htmlDialect,
   upsertBlock
-} from "./chunk-3EDSPMXN.js";
+} from "./chunk-LJM5CIY4.js";
 import {
   colorTokens,
   defaultThemeChoice,
@@ -18,6 +14,182 @@ import {
   fontThemeVars,
   orderedTokens
 } from "./chunk-TFFGOFVZ.js";
+import {
+  md5Hex
+} from "./chunk-OHX6MIUZ.js";
+
+// src/emit/icon-presets.ts
+var ICON_LIBRARIES = ["lucide", "tabler", "phosphor"];
+var DEFAULT_ICON_LIBRARY = "lucide";
+var LIBRARIES = {
+  lucide: {
+    id: "lucide",
+    label: "Lucide",
+    componentsJson: "lucide",
+    react: {
+      dependency: { "lucide-react": "^0.475.0" },
+      arrowImport: `import { ArrowRight } from "lucide-react";`,
+      arrowComponent: "ArrowRight",
+      modeImports: [`import { Monitor, Moon, Sun } from "lucide-react";`],
+      modeComponents: { system: "Monitor", light: "Sun", dark: "Moon" }
+    },
+    svelte: {
+      // Not the same version line as `lucide-react`: the Svelte icons ship from
+      // a separate package on their own 1.x.
+      dependency: { "@lucide/svelte": "^1.31.0" },
+      arrowImport: `import ArrowRight from "@lucide/svelte/icons/arrow-right";`,
+      arrowComponent: "ArrowRight",
+      modeImports: [
+        `import Monitor from "@lucide/svelte/icons/monitor";`,
+        `import Moon from "@lucide/svelte/icons/moon";`,
+        `import Sun from "@lucide/svelte/icons/sun";`
+      ],
+      modeComponents: { system: "Monitor", light: "Sun", dark: "Moon" }
+    },
+    guidance: {
+      react: `Icons are [Lucide](https://lucide.dev/icons), installed as \`lucide-react\` and
+imported by name from the package root \u2014
+\`import { ArrowRight } from "lucide-react";\`.`,
+      svelte: `Icons are [Lucide](https://lucide.dev/icons), installed as \`@lucide/svelte\` \u2014
+**not** \`lucide-react\`, which is the wrong package here in the same way the
+plain \`shadcn\` CLI is. Import them one per module, and kebab-case the name into
+the path: the icon is that module's DEFAULT export, and \`ArrowRight\` lives at
+\`arrow-right\` \u2014 \`import ArrowRight from "@lucide/svelte/icons/arrow-right";\`.
+Never from the package root, which pulls the whole set into the bundle.`
+    }
+  },
+  tabler: {
+    id: "tabler",
+    label: "Tabler",
+    componentsJson: "tabler",
+    react: {
+      dependency: { "@tabler/icons-react": "^3.31.0" },
+      // Every Tabler component is prefixed `Icon`, so the name in markup is not
+      // the name on the website — the single most common mistake with this set.
+      arrowImport: `import { IconArrowRight } from "@tabler/icons-react";`,
+      arrowComponent: "IconArrowRight",
+      modeImports: [
+        `import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-react";`
+      ],
+      modeComponents: {
+        system: "IconDeviceDesktop",
+        light: "IconSun",
+        dark: "IconMoon"
+      }
+    },
+    svelte: {
+      dependency: { "@tabler/icons-svelte": "^3.31.0" },
+      arrowImport: `import { IconArrowRight } from "@tabler/icons-svelte";`,
+      arrowComponent: "IconArrowRight",
+      modeImports: [
+        `import { IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-svelte";`
+      ],
+      modeComponents: {
+        system: "IconDeviceDesktop",
+        light: "IconSun",
+        dark: "IconMoon"
+      }
+    },
+    guidance: {
+      react: `Icons are [Tabler](https://tabler.io/icons), installed as \`@tabler/icons-react\`.
+Every component is prefixed \`Icon\` \u2014 the site lists \`arrow-right\`, the import is
+\`import { IconArrowRight } from "@tabler/icons-react";\`.`,
+      svelte: `Icons are [Tabler](https://tabler.io/icons), installed as \`@tabler/icons-svelte\` \u2014
+**not** \`@tabler/icons-react\`, which is the wrong package here in the same way
+the plain \`shadcn\` CLI is. Every component is prefixed \`Icon\`, so the name in
+markup is not the name on the site: \`arrow-right\` is
+\`import { IconArrowRight } from "@tabler/icons-svelte";\`.`
+    }
+  },
+  phosphor: {
+    id: "phosphor",
+    label: "Phosphor",
+    // shadcn/ui's CLI does not know this set. Left off components.json rather
+    // than guessed — see IconLibrary.componentsJson.
+    componentsJson: void 0,
+    react: {
+      dependency: { "@phosphor-icons/react": "^2.1.7" },
+      arrowImport: `import { ArrowRight } from "@phosphor-icons/react";`,
+      arrowComponent: "ArrowRight",
+      modeImports: [`import { Desktop, Moon, Sun } from "@phosphor-icons/react";`],
+      modeComponents: { system: "Desktop", light: "Sun", dark: "Moon" }
+    },
+    svelte: {
+      dependency: { "phosphor-svelte": "^3.0.1" },
+      arrowImport: `import ArrowRight from "phosphor-svelte/lib/ArrowRight";`,
+      arrowComponent: "ArrowRight",
+      modeImports: [
+        `import Desktop from "phosphor-svelte/lib/Desktop";`,
+        `import Moon from "phosphor-svelte/lib/Moon";`,
+        `import Sun from "phosphor-svelte/lib/Sun";`
+      ],
+      modeComponents: { system: "Desktop", light: "Sun", dark: "Moon" }
+    },
+    guidance: {
+      react: `Icons are [Phosphor](https://phosphoricons.com), installed as
+\`@phosphor-icons/react\` and imported by name \u2014
+\`import { ArrowRight } from "@phosphor-icons/react";\`. Each takes a \`weight\` prop
+(\`regular\`, \`bold\`, \`duotone\`, \u2026) rather than only a stroke width.`,
+      svelte: `Icons are [Phosphor](https://phosphoricons.com), installed as \`phosphor-svelte\` \u2014
+**not** \`@phosphor-icons/react\`, which is the wrong package here in the same way
+the plain \`shadcn\` CLI is. Import them one per module, and PascalCase the name
+into the path: \`import ArrowRight from "phosphor-svelte/lib/ArrowRight";\`.
+Never from the package root, which pulls the whole set into the bundle.`
+    }
+  }
+};
+function findIconLibrary(id) {
+  const normalized = id.trim().toLowerCase();
+  return ICON_LIBRARIES.includes(normalized) ? LIBRARIES[normalized] : void 0;
+}
+function allIconLibraries() {
+  return ICON_LIBRARIES.map((id) => LIBRARIES[id]);
+}
+function defaultIconLibrary() {
+  return LIBRARIES[DEFAULT_ICON_LIBRARY];
+}
+function resolveIconsFlag(raw) {
+  const library = findIconLibrary(raw);
+  if (library === void 0) {
+    throw new Error(
+      `Unknown --icons "${raw}". Valid icon libraries: ${ICON_LIBRARIES.join(", ")}.`
+    );
+  }
+  return library;
+}
+function iconLibraryOf(id) {
+  return id === void 0 ? defaultIconLibrary() : LIBRARIES[id];
+}
+
+// src/emit/decode-record.ts
+function decodeDigest(content) {
+  return md5Hex(content);
+}
+function decodeMarkerWith(previous, files) {
+  const sorted = [...files].sort((a, b) => a.path.localeCompare(b.path));
+  return {
+    ...previous,
+    files: sorted.map((f) => f.path),
+    digests: Object.fromEntries(sorted.map((f) => [f.path, decodeDigest(f.content)]))
+  };
+}
+var SOURCE_KINDS = /* @__PURE__ */ new Set(["workspace", "ephemeral", "local", "tenant", "release"]);
+function decodeMarkerHead(previous, command, provenance, sdkVersion, report) {
+  const colon = provenance.indexOf(":");
+  const kind = colon === -1 ? provenance : provenance.slice(0, colon);
+  const origin = SOURCE_KINDS.has(kind) ? { source: kind, origin: colon === -1 ? kind : provenance.slice(colon + 1) } : { source: "file", origin: provenance };
+  const { generatedBy: _generatedBy, report: _previousReport, files: _files, digests: _digests, ...kept } = previous;
+  return {
+    ...kept,
+    ...origin,
+    sdkVersion,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    note: `Written by \`xanosdk ${command}\`. Its presence lets a later \`pull\`, \`generate --force\` or \`init --from\` refresh this tree in place.`,
+    // The findings of THIS decode — a previous one's would describe a source
+    // the tree no longer reflects. Dropped when this command has none to say.
+    ...report !== void 0 ? { report } : {}
+  };
+}
 
 // src/emit/init-templates.ts
 var STANDALONE_NPM = { manager: "npm", member: "", declared: false };
@@ -28,12 +200,112 @@ function sdkDep(sdkVersion) {
   const ceiling = major > 0 ? `${major + 1}.0.0` : `0.${minor + 1}.0`;
   return `>=${sdkVersion} <${ceiling}`;
 }
+var npmKeyOrder = (a, b) => a.localeCompare(b, "en");
 function sortedKeys(map) {
-  return Object.fromEntries(Object.entries(map).sort(([a], [b]) => a.localeCompare(b, "en")));
+  return Object.fromEntries(Object.entries(map).sort(([a], [b]) => npmKeyOrder(a, b)));
+}
+function isSorted(keys) {
+  return keys.every((key, i) => i === 0 || npmKeyOrder(keys[i - 1], key) <= 0);
+}
+var BACKEND_CHECK = "tsc -p xano && tsc -p xano/lambdas";
+function xanoScripts(check, frontend) {
+  const routes = "xanosdk routes ./xano/index.ts --emit xano/routes.gen.ts";
+  return {
+    "xano:routes": routes,
+    // Both are prefixed with a typecheck: the export pass validates what it
+    // can see in the encoded bundle, and TypeScript validates the rest. With
+    // `tsc` on `build` alone, anyone following the documented workflow would
+    // ship with the compiler's half of the checks never run.
+    // No `--lock` on either of these: every build maintains `xano/xano.lock`
+    // by default, so the flag would be redundant here and would read as
+    // though the lock were something a project opts into. It is not — object
+    // identity derives from `(type, name)`, and without a lock a rename
+    // re-derives the guid and the engine does delete-and-recreate instead of
+    // rename-in-place, so the file has to exist before the identities matter.
+    // Scaffolds written before the default flipped still pass `--lock`, and
+    // it stays accepted for exactly that reason.
+    "xano:export": `npm run xano:routes && ${check} && xanosdk export ./xano/index.ts --out workspace.json`,
+    // The default deploy, and the tight loop: redeploy the backend to the
+    // Xano Engine on this machine. It needs no Xano account, so a fresh
+    // scaffold runs it before anyone signs in.
+    //
+    // No `--static` and no `npm run build`, and both omissions are the point
+    // rather than an economy: there is no frontend to ship here. The dev
+    // server is still serving it, and the deploy points that server at the
+    // engine on its way past, so the loop is backend-only by design.
+    // (`--static` does work on a Xano Engine, for a built frontend the
+    // engine itself should serve; this loop has none.)
+    //
+    // No `--local`: the Xano Engine is where a bare deploy goes, and the
+    // project's pinned version is what it runs. Baking an engine version or
+    // URL into a scaffolded project would ship a coordinate that is not this
+    // project's to carry.
+    //
+    // `--keep-data`, because the engine is the developer's own backend and
+    // this loop runs once per code change: each run merges into what the last
+    // one left, so rows entered through the app survive the edit. The first
+    // run, and the first after the engine restarts, replaces and seeds.
+    // `--reset` on the command line still gives a clean slate.
+    "xano:deploy": `npm run xano:routes && ${check} && xanosdk deploy ./xano/index.ts --keep-data`,
+    // The cloud deploy: backend and built frontend to an ephemeral.
+    // Runs `build` rather than `check` directly: `--static ./frontend/dist`
+    // needs that directory to EXIST, and only `vite build` writes it. Pointing
+    // the flag at a directory the script never produced meant a fresh clone
+    // running the documented command had no `dist` to ship.
+    // `build` already prefixes the same typecheck, so this is one check, not
+    // two. With no frontend, the backend goes alone.
+    "xano:deploy:ephemeral": frontend ? `npm run build && xanosdk deploy ./xano/index.ts --ephemeral --static ./frontend/dist` : `npm run xano:routes && ${check} && xanosdk deploy ./xano/index.ts --ephemeral`,
+    // The frontend-only loop: rebuild and republish to the environment this
+    // project last deployed to, without recompiling or re-importing the
+    // backend. `build` runs first because publish ships only what is on disk.
+    ...frontend ? { "xano:deploy:frontend": "npm run build && xanosdk publish ./frontend/dist" } : {},
+    // The CI guard: fails instead of changing xano.lock, so an uncommitted
+    // identity change is caught in review rather than on a deploy. An
+    // installed toolchain module's own check rides on the same run: a module
+    // that owns a generated tree verifies it under this same flag.
+    // `--strict` fails on a stale or missing committed manifest rather than
+    // rewriting it, the same way `--frozen-lock` treats xano.lock.
+    //
+    // `export --check`, not an export to a file: a CI checkout has no
+    // `xano/.env` and no `xano/.secrets.json`, and a real export refuses a
+    // declared documentation gate it cannot supply. The check writes nothing
+    // — no bundle, no lock — so there is nothing a missing secret could clear,
+    // and it needs none. It implies `--frozen-lock`. `--strict` as the grounding
+    // tells every CI and unattended build to: a build warning is a hard
+    // failure. Env values never reach it — a declared name with no value is
+    // `""`, which only `deploy` refuses — so a checkout with no `xano/.env`
+    // passes it (a fresh scaffold and an `init --from` tree both do).
+    "xano:check": `${routes} --strict && ${check} && xanosdk export ./xano/index.ts --check --strict`,
+    // No compile step and no entry file: this runs what is DEPLOYED, so it
+    // pairs with `xano:deploy` rather than repeating its work. Exits 5 on a
+    // failing suite, which is what makes it usable as a CI gate.
+    "xano:test": "xanosdk test run-all"
+  };
+}
+function backendScripts() {
+  const scripts = xanoScripts(BACKEND_CHECK, false);
+  return { "xano:routes": scripts["xano:routes"], "xano:typecheck": `npm run xano:routes && ${BACKEND_CHECK}`, ...scripts };
+}
+var BACKEND_DEV_DEPENDENCIES = {
+  "@types/node": "^20.19.43",
+  tsx: "^4.19.2",
+  typescript: "^6.0.3"
+};
+function renderBackendPackageJson({ appName, sdkVersion }) {
+  const pkg = {
+    name: appName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: backendScripts(),
+    dependencies: { "@xano/sdk": sdkDep(sdkVersion) },
+    devDependencies: sortedKeys({ ...BACKEND_DEV_DEPENDENCIES }),
+    engines: { node: `>=${NODE_MIN}` }
+  };
+  return JSON.stringify(pkg, null, 2) + "\n";
 }
 function renderPackageJson({ appName, sdkVersion }, preset, choice = defaultThemeChoice()) {
   const check = `${preset.checkCmd} && tsc -p xano/lambdas`;
-  const routes = "xanosdk routes ./xano/index.ts --emit xano/routes.gen.ts";
   const pkg = {
     name: appName,
     version: "0.1.0",
@@ -44,75 +316,7 @@ function renderPackageJson({ appName, sdkVersion }, preset, choice = defaultThem
       build: `npm run xano:routes && ${check} && vite build`,
       preview: "vite preview",
       typecheck: `npm run xano:routes && ${check}`,
-      "xano:routes": routes,
-      // Both are prefixed with a typecheck: the export pass validates what it
-      // can see in the encoded bundle, and TypeScript validates the rest. With
-      // `tsc` on `build` alone, anyone following the documented workflow would
-      // ship with the compiler's half of the checks never run.
-      // No `--lock` on either of these: every build maintains `xano/xano.lock`
-      // by default, so the flag would be redundant here and would read as
-      // though the lock were something a project opts into. It is not — object
-      // identity derives from `(type, name)`, and without a lock a rename
-      // re-derives the guid and the engine does delete-and-recreate instead of
-      // rename-in-place, so the file has to exist before the identities matter.
-      // Scaffolds written before the default flipped still pass `--lock`, and
-      // it stays accepted for exactly that reason.
-      "xano:export": `npm run xano:routes && ${check} && xanosdk export ./xano/index.ts --out workspace.json`,
-      // The default deploy, and the tight loop: redeploy the backend to the
-      // Xano Engine on this machine. It needs no Xano account, so a fresh
-      // scaffold runs it before anyone signs in.
-      //
-      // No `--static` and no `npm run build`, and both omissions are the point
-      // rather than an economy: there is no frontend to ship here. The dev
-      // server is still serving it, and the deploy points that server at the
-      // engine on its way past, so the loop is backend-only by design.
-      // (`--static` does work on a Xano Engine, for a built frontend the
-      // engine itself should serve; this loop has none.)
-      //
-      // No `--local`: the Xano Engine is where a bare deploy goes, and the
-      // project's pinned version is what it runs. Baking an engine version or
-      // URL into a scaffolded project would ship a coordinate that is not this
-      // project's to carry.
-      //
-      // `--keep-data`, because the engine is the developer's own backend and
-      // this loop runs once per code change: each run merges into what the last
-      // one left, so rows entered through the app survive the edit. The first
-      // run, and the first after the engine restarts, replaces and seeds.
-      // `--reset` on the command line still gives a clean slate.
-      "xano:deploy": `npm run xano:routes && ${check} && xanosdk deploy ./xano/index.ts --keep-data`,
-      // The cloud deploy: backend and built frontend to an ephemeral.
-      // Runs `build` rather than `check` directly: `--static ./frontend/dist`
-      // needs that directory to EXIST, and only `vite build` writes it. Pointing
-      // the flag at a directory the script never produced meant a fresh clone
-      // running the documented command had no `dist` to ship.
-      // `build` already prefixes the same typecheck, so this is one check, not
-      // two.
-      "xano:deploy:ephemeral": `npm run build && xanosdk deploy ./xano/index.ts --ephemeral --static ./frontend/dist`,
-      // The frontend-only loop: rebuild and republish to the environment this
-      // project last deployed to, without recompiling or re-importing the
-      // backend. `build` runs first because publish ships only what is on disk.
-      "xano:deploy:frontend": "npm run build && xanosdk publish ./frontend/dist",
-      // The CI guard: fails instead of changing xano.lock, so an uncommitted
-      // identity change is caught in review rather than on a deploy. An
-      // installed toolchain module's own check rides on the same run: a module
-      // that owns a generated tree verifies it under this same flag.
-      // `--strict` fails on a stale or missing committed manifest rather than
-      // rewriting it, the same way `--frozen-lock` treats xano.lock.
-      //
-      // `export --check`, not an export to a file: a CI checkout has no
-      // `xano/.env` and no `xano/.secrets.json`, and a real export refuses a
-      // declared documentation gate it cannot supply. The check writes nothing
-      // — no bundle, no lock — so there is nothing a missing secret could clear,
-      // and it needs none. It implies `--frozen-lock`. `--strict` as the grounding
-      // tells every CI and unattended build to: a build warning is a hard
-      // failure. Env values never reach it — a declared name with no value is
-      // `""`, which only `deploy` refuses — so a checkout with no `xano/.env`
-      // passes it (a fresh scaffold and an `init --from` tree both do).
-      "xano:check": `${routes} --strict && ${check} && xanosdk export ./xano/index.ts --check --strict`,
-      // No compile step and no entry file: this runs what is DEPLOYED, so it
-      // pairs with `xano:deploy` rather than repeating its work. Exits 5 on a
-      // failing suite, which is what makes it usable as a CI gate.
-      "xano:test": "xanosdk test run-all",
+      ...xanoScripts(check, true),
       // Framework-owned scripts, last so a preset can add to the set but the
       // shared xano:* contract above stays the same in every scaffold.
       ...preset.extraScripts
@@ -178,10 +382,33 @@ function renderTsconfig(preset) {
   };
   return JSON.stringify(tsconfig, null, 2) + "\n";
 }
+var BACKEND_TSCONFIG_PATH = "xano/tsconfig.json";
+function renderBackendTsconfig() {
+  const tsconfig = {
+    compilerOptions: {
+      target: "ES2022",
+      lib: ["ES2022", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      types: ["node"]
+    },
+    include: ["**/*.ts"],
+    exclude: ["lambdas"]
+  };
+  return JSON.stringify(tsconfig, null, 2) + "\n";
+}
 var LAMBDA_GLOBALS_TYPES = "@xano/sdk/lambda-globals";
-function renderLambdaTsconfig() {
+function renderLambdaTsconfig(base = "project") {
   const tsconfig = {
-    extends: "../../tsconfig.json",
+    // A project with no frontend has no root tsconfig: `xano/tsconfig.json` is
+    // the config the backend checks under, and the lambdas build on that.
+    extends: base === "backend" ? "../tsconfig.json" : "../../tsconfig.json",
     // No DOM and no node types: a lambda body runs in neither.
     compilerOptions: { lib: ["ES2022"], types: [LAMBDA_GLOBALS_TYPES] },
     files: [],
@@ -284,6 +511,25 @@ ${framework}
 # it means each build mints identities that are thrown away and re-invented.
 `;
 }
+function renderGitignoreBlock(version) {
+  return composeBlock(
+    gitignoreSpec(),
+    [
+      "# What the Xano backend writes. xano/ itself, and xano/xano.lock, are committed.",
+      "node_modules/",
+      "/workspace.json",
+      "/.xano/",
+      "xano/.env",
+      "xano/.env.tmp-*",
+      "xano/.secrets.json",
+      "xano/.secrets.json.tmp-*"
+    ],
+    version
+  );
+}
+function mergeGitignore(existing, version) {
+  return upsertBlock(existing, gitignoreSpec(), renderGitignoreBlock(version)).text;
+}
 var NODE_MIN = "20.19";
 function renderGitattributes(contributions = []) {
   let text = `# The export writes LF. Normalizing here keeps generated output
@@ -441,6 +687,67 @@ function refreshReadmeBuiltWith(existing, sdkVersion) {
 function renderReadmeDescriptionSlot(appName) {
   return `_Describe ${appName} here: what it does and who it is for._`;
 }
+var README_ENGINE_BULLETS = `- **It works on a fresh machine with nothing set.** The first run downloads the latest
+  engine once per machine and pins its version in \`package.json\`. Commit that change, so
+  everyone on the project runs the same engine.
+- **It keeps your table rows across redeploys** (\`--keep-data\`). The first run seeds and
+  later runs merge your changes in without re-seeding. Rows survive only in tables and columns that keep
+  their names (a rename drops the old one with its rows), and only while the engine runs. An
+  engine update or restart starts it empty and the next run seeds again.
+  \`npm run xano:deploy -- --reset\` gives a clean, re-seeded slate.
+- **Updates are yours to take.** When a newer engine ships, a deploy offers it and never
+  applies it without a yes. \`npx xanosdk local update\` moves the pin on purpose,
+  and \`npx xanosdk local cache clear\` reclaims the disk space. To try another engine
+  without moving the pin, export \`XANOSDK_ENGINE_OVERRIDE\` with a version (\`v0.1.5\`)
+  or an engine archive path.
+- **The rest of the CLI follows.** After a local deploy, \`npm run xano:test\`,
+  \`npx xanosdk tables\` and \`npx xanosdk status\` reach the engine with no flag.
+  \`npx xanosdk local stop <name>\` shuts it down.`;
+var README_LOCK_SECTION = `## \`xano.lock\` \u2014 commit it
+
+Object identity derives from \`(type, name)\`, so a rename would otherwise change
+an object's guid and the engine would **delete and recreate** it rather than
+renaming it in place \u2014 losing its rows on a record-preserving import.
+[\`xano/xano.lock\`](xano/xano.lock) freezes each guid and each API group's
+canonical slug, so renames and re-deploys keep the same identities (and the same
+public URLs).
+
+Every build writes it \u2014 no flag \u2014 and it **must be committed**. Ignoring it means
+each build mints identities and public URLs that are thrown away and re-invented
+next time. If you release to a workspace that already exists, adopt what it
+already serves first with \`npx xanosdk lock import <live-bundle.json> --lock=xano/xano.lock\`;
+that is also the recovery path once identities have drifted.
+
+\`\`\`bash
+npm run xano:check      # CI: fail on ANY build warning (it runs --strict), if the export
+                        # would change xano.lock, or if the lock carries an entry no
+                        # object matches \u2014 writes nothing and needs no secrets, so a
+                        # fresh clone runs it as-is
+\`\`\`
+
+To rename an object: rename it in code and run \`npm run xano:export\`. Only if it
+warns of an orphaned entry, run the \`npx xanosdk lock rename <kind> <old> <new>\` it prints, then
+export again. Every \`lock\` subcommand finds \`xano/xano.lock\` from the project entry, as
+\`export\` does \u2014 \`--entry=<file>\` names another entry, \`--lock=<path>\` the lock itself.`;
+var README_ADD_ONS_SECTION = `## Add-ons
+
+Xano SDK is composable with other \`@xano-sdk/*\` packages:
+
+- **[\`@xano-sdk/auth\`](https://www.npmjs.com/package/@xano-sdk/auth)** \u2014 turnkey
+  authentication (user/login/signup tables and endpoints). Install it with
+  \`npx xanosdk marketplace install @xano-sdk/auth\`, then register it in
+  \`xano/index.ts\`. Authentication only \u2014 **not** authorization: it has no
+  roles, permissions, or route guards, and its tokens carry no role claim.
+  Enforce roles off the caller's row with \`@xano/sdk\`: spread
+  \`...guard.role(userTable, "admin")\` into the endpoint's stack.
+- More \`@xano-sdk/*\` packages register onto the same workspace. This list
+  does not update itself \u2014 run \`npx xanosdk marketplace list\` for the live
+  catalogue, \`npx xanosdk marketplace search <words>\` to narrow it, and
+  \`npx xanosdk marketplace details <package>\` to see what an add-on installs and
+  how to register it. All three work before you log in.
+
+None of these ship with the scaffold. Install one only when you need it \u2014 an
+add-on you never register is weight in \`package.json\` for nothing.`;
 function renderReadme({ appName, install, sdkVersion }, preset, choice = defaultThemeChoice()) {
   return `# ${appName}
 
@@ -474,22 +781,7 @@ It prints the backend URL, a link that opens Xano's visual builder on the engine
 points \`npm run dev\` at it through \`.env.local\` (restart the dev server if it was already
 running).
 
-- **It works on a fresh machine with nothing set.** The first run downloads the latest
-  engine once per machine and pins its version in \`package.json\`. Commit that change, so
-  everyone on the project runs the same engine.
-- **It keeps your table rows across redeploys** (\`--keep-data\`). The first run seeds and
-  later runs merge your changes in without re-seeding. Rows survive only in tables and columns that keep
-  their names (a rename drops the old one with its rows), and only while the engine runs. An
-  engine update or restart starts it empty and the next run seeds again.
-  \`npm run xano:deploy -- --reset\` gives a clean, re-seeded slate.
-- **Updates are yours to take.** When a newer engine ships, a deploy offers it and never
-  applies it without a yes. \`npx xanosdk local update\` moves the pin on purpose,
-  and \`npx xanosdk local cache clear\` reclaims the disk space. To try another engine
-  without moving the pin, export \`XANOSDK_ENGINE_OVERRIDE\` with a version (\`v0.1.5\`)
-  or an engine archive path.
-- **The rest of the CLI follows.** After a local deploy, \`npm run xano:test\`,
-  \`npx xanosdk tables\` and \`npx xanosdk status\` reach the engine with no flag.
-  \`npx xanosdk local stop <name>\` shuts it down.
+${README_ENGINE_BULLETS}
 
 ## Deploy to Xano's cloud
 
@@ -521,32 +813,7 @@ The other scripts:
   ./xano/index.ts --test\` does both in one step.
 - \`npm run xano:export\` compiles the backend to \`workspace.json\` (don't commit it).
 
-## \`xano.lock\` \u2014 commit it
-
-Object identity derives from \`(type, name)\`, so a rename would otherwise change
-an object's guid and the engine would **delete and recreate** it rather than
-renaming it in place \u2014 losing its rows on a record-preserving import.
-[\`xano/xano.lock\`](xano/xano.lock) freezes each guid and each API group's
-canonical slug, so renames and re-deploys keep the same identities (and the same
-public URLs).
-
-Every build writes it \u2014 no flag \u2014 and it **must be committed**. Ignoring it means
-each build mints identities and public URLs that are thrown away and re-invented
-next time. If you release to a workspace that already exists, adopt what it
-already serves first with \`npx xanosdk lock import <live-bundle.json> --lock=xano/xano.lock\`;
-that is also the recovery path once identities have drifted.
-
-\`\`\`bash
-npm run xano:check      # CI: fail on ANY build warning (it runs --strict), if the export
-                        # would change xano.lock, or if the lock carries an entry no
-                        # object matches \u2014 writes nothing and needs no secrets, so a
-                        # fresh clone runs it as-is
-\`\`\`
-
-To rename an object: rename it in code and run \`npm run xano:export\`. Only if it
-warns of an orphaned entry, run the \`npx xanosdk lock rename <kind> <old> <new>\` it prints, then
-export again. Every \`lock\` subcommand finds \`xano/xano.lock\` from the project entry, as
-\`export\` does \u2014 \`--entry=<file>\` names another entry, \`--lock=<path>\` the lock itself.
+${README_LOCK_SECTION}
 
 ## The one contract
 
@@ -575,25 +842,76 @@ ${preset.readmeFrontendSection(choice.icons)}
 
 ${renderReadmeThemingSection(choice)}
 
-## Add-ons
+${README_ADD_ONS_SECTION}
 
-Xano SDK is composable with other \`@xano-sdk/*\` packages:
+${renderReadmeBuiltWith(sdkVersion)}
+`;
+}
+function renderBackendReadme({ appName, install, sdkVersion }) {
+  return `# ${appName}
 
-- **[\`@xano-sdk/auth\`](https://www.npmjs.com/package/@xano-sdk/auth)** \u2014 turnkey
-  authentication (user/login/signup tables and endpoints). Install it with
-  \`npx xanosdk marketplace install @xano-sdk/auth\`, then register it in
-  \`xano/index.ts\`. Authentication only \u2014 **not** authorization: it has no
-  roles, permissions, or route guards, and its tokens carry no role claim.
-  Enforce roles off the caller's row with \`@xano/sdk\`: spread
-  \`...guard.role(userTable, "admin")\` into the endpoint's stack.
-- More \`@xano-sdk/*\` packages register onto the same workspace. This list
-  does not update itself \u2014 run \`npx xanosdk marketplace list\` for the live
-  catalogue, \`npx xanosdk marketplace search <words>\` to narrow it, and
-  \`npx xanosdk marketplace details <package>\` to see what an add-on installs and
-  how to register it. All three work before you log in.
+${XANO_BADGE}
 
-None of these ship with the scaffold. Install one only when you need it \u2014 an
-add-on you never register is weight in \`package.json\` for nothing.
+${renderReadmeDescriptionSlot(appName)}
+
+The backend under [\`xano/\`](xano/) is TypeScript, authored with the
+[Xano SDK](https://github.com/xano-sdk/sdk) and running on [Xano](https://xano.com). It runs
+on your machine as the **Xano Engine** and ships to Xano's cloud with the same command.
+
+## Quick start
+
+\`\`\`bash
+${install?.manager ?? "npm"} install${install?.ignoreWorkspace === true ? " --ignore-workspace" : ""}
+npm run xano:deploy   # run the backend on the Xano Engine, on this machine
+\`\`\`
+
+No Xano account needed. Then author your backend in [\`xano/index.ts\`](xano/index.ts),
+starting with the walkthrough in [\`xano/EXAMPLE.md\`](xano/EXAMPLE.md), and rerun
+\`npm run xano:deploy\` after each change.
+
+## Run it on your machine
+
+The Xano Engine is Xano running on your machine. \`npm run xano:deploy\` typechecks the
+backend and deploys it to the engine: no sign-in, and no network round-trip.
+It prints the backend URL and a link that opens Xano's visual builder on the engine.
+
+${README_ENGINE_BULLETS}
+
+## Deploy to Xano's cloud
+
+\`\`\`bash
+npx xanosdk login               # once, to authenticate against your Xano account
+npm run xano:deploy:ephemeral   # typecheck, then ship the backend to an ephemeral
+\`\`\`
+
+That deploys the backend to a live **ephemeral** environment on Xano and prints its URL.
+Run it again to refresh the same environment; if it expired, a fresh one is created and
+the new URL is called out. \`npx xanosdk status\` says who you are signed in as, which
+workspace you are bound to, and which environment this project last deployed to. Your
+**workspace** is reached through a release (\`deploy --ephemeral --test\`, \`release create\`,
+\`promote\`); see the
+[deploying guide](https://github.com/xano-sdk/sdk/blob/main/guides/deploying.md).
+
+The other scripts:
+
+- \`npm run xano:test\` runs the tests the DEPLOYED environment carries \u2014 the \`tests\`
+  on a query/function/middleware and any \`workflowTest()\`. It compiles nothing, so
+  deploy first. A failing suite exits 5, distinct from a crash. \`npx xanosdk deploy
+  ./xano/index.ts --test\` does both in one step.
+- \`npm run xano:typecheck\` type-checks \`xano/\` and its lambdas.
+- \`npm run xano:export\` compiles the backend to \`workspace.json\` (don't commit it).
+
+${README_LOCK_SECTION}
+
+## Calling the backend
+
+\`npm run xano:routes\` writes \`xano/routes.gen.ts\` from the defs: every endpoint's verb,
+path (\`routePath("GET notes/{id}", { id })\`) and request type (\`RouteInputs["POST create_note"]\`).
+A client takes them from there, and response types from the query defs (\`import type\` +
+\`InferResponse\`), rather than hand-typing a URL. \`xano:check\` fails on a missing or stale
+copy \u2014 commit it. \`npx xanosdk routes xano/index.ts\` lists every endpoint's verb + path.
+
+${README_ADD_ONS_SECTION}
 
 ${renderReadmeBuiltWith(sdkVersion)}
 `;
@@ -843,18 +1161,18 @@ ${XANO_BADGE}
 ${renderReadmeDescriptionSlot(appName)}
 
 The backend under [\`xano/\`](xano/) is TypeScript pulled from ${describeCommittedOrigin(origin)}
-with the [Xano SDK](https://github.com/xano-sdk/sdk), and runs on [Xano](https://xano.com). The
+with the [Xano SDK](https://github.com/xano-sdk/sdk), and runs on [Xano](https://xano.com).${preset === null ? "" : ` The
 ${preset.label} frontend under [\`frontend/\`](frontend/) is a starter \u2014 the pull carries a
-backend, not a UI.
+backend, not a UI.`}
 
 ## Run it
 
 \`\`\`bash
 npm run xano:deploy                # on the Xano Engine, on this machine (no account needed)
-npm run dev                        # the starter frontend, pointed at it
-
+${preset === null ? "" : `npm run dev                        # the starter frontend, pointed at it
+`}
 npx xanosdk login                  # once, to authenticate against your Xano account
-npm run xano:deploy:ephemeral      # typecheck, build the frontend, ship both to an ephemeral
+${preset === null ? "npm run xano:deploy:ephemeral      # typecheck, ship the backend to an ephemeral" : "npm run xano:deploy:ephemeral      # typecheck, build the frontend, ship both to an ephemeral"}
 \`\`\`
 
 ## Read this before deploying
@@ -875,7 +1193,11 @@ translate cleanly on this pull. Read it before trusting the tree.
 ${secrets}
 ## Working on it
 
-\`\`\`bash
+${preset === null ? `\`\`\`bash
+npm run xano:typecheck # xano/ and its lambdas
+npm run xano:export    # compile the backend to workspace.json (don't commit it)
+npm run xano:routes    # regenerate xano/routes.gen.ts: every endpoint's path and request type
+\`\`\`` : `\`\`\`bash
 npm run dev            # run the starter frontend
 npm run typecheck      # the whole project, both halves
 npm run xano:export    # compile the backend to workspace.json (don't commit it)
@@ -883,7 +1205,7 @@ npm run xano:routes    # regenerate xano/routes.gen.ts: the frontend's paths and
 \`\`\`
 
 [\`frontend/src/lib/api.ts\`](frontend/src/lib/api.ts) shows the one contract: paths
-and request types from \`xano/routes.gen.ts\`, response types from the query defs in \`xano/\`.
+and request types from \`xano/routes.gen.ts\`, response types from the query defs in \`xano/\`.`}
 
 ${renderReadmeBuiltWith(sdkVersion)}
 `;
@@ -1194,346 +1516,122 @@ export const XANO_HOST: string =
 `;
 }
 
-// src/emit/frontend-svelte.ts
+// src/emit/frontend-react.ts
 var CODE_CLASS = "bg-muted rounded px-1.5 py-0.5 font-mono text-sm";
-function htmlText(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function svelteText(s) {
-  return htmlText(s).replace(/\{/g, "&#123;").replace(/\}/g, "&#125;");
+function jsxText(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\{/g, "&#123;").replace(/\}/g, "&#125;");
 }
 function renderNode(node) {
-  return "code" in node ? `<code class="${CODE_CLASS}">${svelteText(node.code)}</code>` : svelteText(node.text);
+  return "code" in node ? `<code className="${CODE_CLASS}">${jsxText(node.code)}</code>` : jsxText(node.text);
 }
 function renderNodes(nodes) {
   return nodes.map(renderNode).join("");
 }
 function renderApp(landing, choice) {
-  const steps = landing.steps.map((step) => `        <li>${renderNodes(step)}</li>`).join("\n");
+  const steps = landing.steps.map((step) => `            <li>${renderNodes(step)}</li>`).join("\n");
   const toggle = choice.dark === "toggle";
-  const icons = iconLibraryOf(choice.icons).svelte;
-  return `<script lang="ts">
-  ${icons.arrowImport}
-
-  import { Button } from "$lib/components/ui/button/index.js";
-  import * as Card from "$lib/components/ui/card/index.js";${toggle ? `
-  import ModeToggle from "$lib/components/mode-toggle.svelte";` : ""}
-</script>
-
-<main class="mx-auto flex min-h-screen max-w-2xl flex-col justify-center p-8">${toggle ? `
-  <div class="mb-4 flex justify-end">
-    <ModeToggle />
-  </div>` : ""}
-  <Card.Root>
-    <Card.Header>
-      <Card.Title class="text-3xl tracking-tight">${svelteText(landing.title)}</Card.Title>
-      <Card.Description class="text-base">
-        ${renderNodes(landing.lead)}
-      </Card.Description>
-    </Card.Header>
-    <Card.Content>
-      <ol class="text-muted-foreground list-inside list-decimal space-y-2">
-${steps}
-      </ol>
-    </Card.Content>
-    <Card.Footer>
-      <!-- Components come from shadcn-svelte \u2014 add more with
-           \`npx shadcn-svelte@latest add <name>\`. -->
-      <Button href="${landing.cta.href}" target="_blank" rel="noreferrer">
-        ${svelteText(landing.cta.label)}
-        <${icons.arrowComponent} />
-      </Button>
-    </Card.Footer>
-  </Card.Root>
-</main>
-`;
-}
-function renderSvelteKitPlugin() {
-  return `sveltekit({
-    // RUNES MODE, FORCED \u2014 not left to Svelte 5's per-component detection.
-    //
-    // By default a component that uses \`export let\` and \`<slot>\` simply
-    // compiles in legacy mode and works, so the Svelte 4 API an assistant
-    // reaches for from older training data produces no error at all. Pinning
-    // runes here turns that into a compile failure naming the file, which is
-    // the same guidance the agent brief gives, enforced instead of stated.
-    //
-    // \`node_modules\` is exempted (returning undefined restores detection):
-    // an installed library compiles under whatever mode ITS author wrote for,
-    // and forcing ours onto it would break dependencies this project does not
-    // own. Removable in Svelte 6, where runes stop being opt-in.
-    compilerOptions: {
-      runes: ({ filename }) =>
-        filename.split(/[/\\\\]/).includes("node_modules") ? undefined : true,
-    },
-    // No \`preprocess\`. vite-plugin-svelte 7 compiles \`<script lang="ts">\`
-    // itself, so \`vitePreprocess()\` is the no-op it looks like \u2014 \`sv create\`
-    // emits none either. Verified against a real build: components typecheck
-    // and compile without it.
-    //
-    // The deploy target is a static host with NO server runtime \u2014 Xano is the
-    // backend. Routes are PRERENDERED (see frontend/src/routes/+layout.ts):
-    // each becomes its own HTML file at build time, and the host resolves a URL
-    // to it by trying the exact key, then \`{path}.html\`, then
-    // \`{path}/index.html\`. That is why no \`trailingSlash\` is configured \u2014 both
-    // output shapes resolve, so this stays on SvelteKit's default.
-    //
-    // The SDK's adapter, writing to frontend/dist. Every prerendered route is
-    // its own file; a route that sets \`prerender = false\` (a detail page for
-    // rows created at runtime) has no file, so the host answers it with
-    // 404.html, which the adapter writes as the app shell whenever such a
-    // route exists: the shell boots the app and renders the route in the
-    // browser, so a reload or a deep link works. While every route is
-    // prerendered, 404.html stays the prerendered /404 page.
-    //
-    // Do not swap it for \`@sveltejs/adapter-static\` with a \`fallback\`: that
-    // writes the shell at index.html, over the prerendered home page.
-    //
-    // \`xanosdk deploy --static-env\` still finds its anchor: every document
-    // renders from app.html, so each has a <head> that gets the injected globals.
-    adapter: adapter({ out: "frontend/dist" }),
-    // Absolute asset URLs, pinned rather than left to the default. Prerendered
-    // pages live at varying URL depths, and a relative \`../_app/\u2026\` computed for
-    // one depth 404s at another.
-    paths: { relative: false },
-    prerender: {
-      // A hash link in the shared layout \u2014 \`<a href="#services">\`, the default
-      // shape of a one-page site's nav \u2014 renders into EVERY prerendered route,
-      // including the scaffold's own /404. There it resolves to /404#services,
-      // an anchor that by definition is not on that page, and SvelteKit's
-      // default handler THROWS: the vite build succeeds and the prerender pass
-      // after it kills the build, with a stack trace naming only files inside
-      // node_modules and a route the author never wrote.
-      //
-      // So ignore a missing id on /404 specifically, rather than reaching for a
-      // blanket \`handleMissingId: "warn"\`. A hash link that is genuinely broken
-      // on a real route still fails the build, which is the check worth keeping.
-      handleMissingId: ({ path, message }) => {
-        if (path === "/404") return;
-        throw new Error(message);
-      },
-    },
-    // SvelteKit's project layout, redirected under frontend/ so this stays a
-    // single-root project: one package.json, one tsconfig.json, and xano/
-    // sitting alongside as the backend half. NOTE these are what make
-    // frontend/src/routes the routes directory \u2014 a file added under a
-    // top-level src/routes/ is not a route and will not be served.
-    files: {
-      routes: "frontend/src/routes",
-      lib: "frontend/src/lib",
-      appTemplate: "frontend/src/app.html",
-      assets: "frontend/static",
-    },
-  })`;
-}
-function renderAppHtml({ appName }, choice) {
-  return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${htmlText(appName)}</title>
-${renderThemeScript(choice.dark)}
-    <!-- Drop a favicon.png into frontend/static/ and link it here:
-         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-         Everything in that directory is copied to the site root verbatim. -->
-    <!-- Keep this inside <head>: \`xanosdk deploy --static-env\` injects the
-         backend URL here as a window global that frontend/src/lib/api.ts reads. -->
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-  </body>
-</html>
-`;
-}
-function renderModeToggleSvelte(icons) {
-  return `<script lang="ts">
-  ${icons.modeImports.join("\n  ")}
-
-  import { Button } from "$lib/components/ui/button/index.js";
-  import { getMode, setMode, watchMode, type Mode } from "$lib/theme.js";
+  const icons = iconLibraryOf(choice.icons).react;
+  return `${icons.arrowImport}
 
-  /** system \u2192 light \u2192 dark \u2192 system. */
-  const next: Record<Mode, Mode> = { system: "light", light: "dark", dark: "system" };
-
-  const icons = {
-    system: ${icons.modeComponents.system},
-    light: ${icons.modeComponents.light},
-    dark: ${icons.modeComponents.dark},
-  };
-
-  // Starts at "system" so the prerendered HTML is deterministic; the effect
-  // corrects it in the browser, after the inline script has already applied
-  // the right class.
-  let mode = $state<Mode>("system");
-
-  $effect(() => {
-    mode = getMode();
-    return watchMode((m) => (mode = m));
-  });
-
-  function change() {
-    const target = next[mode];
-    setMode(target);
-    mode = target;
-  }
-
-  const Icon = $derived(icons[mode]);
-</script>
-
-<Button variant="ghost" size="icon" onclick={change} aria-label="Switch to {next[mode]} theme">
-  <Icon />
-</Button>
-`;
-}
-function renderAppDts() {
-  return `// See https://svelte.dev/docs/kit/types#app.d.ts
-declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface PageState {}
-    // interface Platform {}
-  }
-}
-
-export {};
-`;
-}
-function renderLayoutTs() {
-  return `// There is no server. The backend is Xano, reached through $lib/api.ts,
-// and \`npm run xano:deploy:ephemeral\` ships this app to a static host with no runtime.
-//
-// prerender: true \u2014 every route is rendered to its own HTML file AT BUILD TIME
-// and served as a real document. That is what makes each page load as itself
-// rather than as an empty shell that fills in afterwards.
-//
-// Prerendering IS server-rendering, just at build time rather than per request.
-// So module-scope \`window\`/\`document\` access now fails the BUILD instead of the
-// browser \u2014 which is the better place to find out. Reach for browser globals
-// inside onMount, or guard with \`import { browser } from "$app/environment"\`.
-//
-// A route with dynamic segments (e.g. /posts/[id]) cannot be prerendered unless
-// the build knows which ones exist, so THE BUILD FAILS and names the route.
-// In that route's +page.ts, either list the ids (only those get a page):
-//
-//   export const entries = () => [{ id: "1" }, { id: "2" }];
-//
-// or, for rows created at runtime, render it in the browser instead:
-//
-//   export const prerender = false;
-//
-// Inherited by every route below this one.
-export const prerender = true;
-`;
-}
-function renderErrorState() {
-  return `<script lang="ts">
-  // Shared by the prerendered /404 route and +error.svelte.
-  let { status = 404, message = "" }: { status?: number; message?: string } = $props();
-</script>
-
-<main class="grid min-h-screen place-items-center p-8">
-  <div class="max-w-md space-y-4 text-center">
-    <p class="text-6xl font-semibold tracking-tight">{status}</p>
-    <h1 class="text-xl font-medium">
-      {status === 404 ? "We can't find that page." : "Something went wrong."}
-    </h1>
-    <p class="text-muted-foreground text-sm">
-      {message !== "" ? message : "The link may be broken, or the page may have moved."}
-    </p>
-    <a
-      href="/"
-      class="bg-primary text-primary-foreground ring-offset-background focus-visible:ring-ring inline-flex h-10 items-center rounded-md px-5 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-    >
-      Back to safety
-    </a>
-  </div>
-</main>
-`;
-}
-function renderNotFoundRoute() {
-  return `<script lang="ts">
-  // Prerendered to 404.html, which is what tells the static host to answer an
-  // unmatched path with a real 404 instead of quietly serving the app shell
-  // with a 200 (a missing asset would then reach the browser as HTML, which it
-  // reports as "Unexpected token '<'").
-  //
-  // It must be a route, not +error.svelte: SvelteKit never prerenders the error
-  // component to a file, so relying on it would ship no 404.html at all.
-  //
-  // Delete this directory and an unmatched path serves the home page with a 200
-  // instead \u2014 which is worse, not better, so keep it unless you have a reason.
-  import ErrorState from "$lib/components/error-state.svelte";
-</script>
-
-<svelte:head>
-  <title>Page not found</title>
-</svelte:head>
-
-<ErrorState status={404} />
-`;
+import { Button } from "@/components/ui/button";${toggle ? `
+import { ModeToggle } from "@/components/mode-toggle";` : ""}
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function App() {
+  return (
+    <main className="mx-auto flex min-h-screen max-w-2xl flex-col justify-center p-8">${toggle ? `
+      <div className="mb-4 flex justify-end">
+        <ModeToggle />
+      </div>` : ""}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-3xl tracking-tight">${jsxText(landing.title)}</CardTitle>
+          <CardDescription className="text-base">
+            ${renderNodes(landing.lead)}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ol className="text-muted-foreground list-inside list-decimal space-y-2">
+${steps}
+          </ol>
+        </CardContent>
+        <CardFooter>
+          {/* asChild renders the Button's styles onto the anchor. Components come
+              from shadcn/ui \u2014 add more with \`npx shadcn@latest add <name>\`. */}
+          <Button asChild>
+            <a href="${landing.cta.href}" target="_blank" rel="noreferrer">
+              ${jsxText(landing.cta.label)} <${icons.arrowComponent} />
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
+    </main>
+  );
 }
-function renderErrorSvelte() {
-  return `<script lang="ts">
-  // Rendered when a client-side navigation or load fails inside the running
-  // app. The static host never sees these \u2014 for a path that matched no
-  // document at all, it serves the prerendered routes/404 page instead.
-  import { page } from "$app/state";
-  import ErrorState from "$lib/components/error-state.svelte";
-</script>
-
-<svelte:head>
-  <title>{page.status === 404 ? "Page not found" : "Something went wrong"}</title>
-</svelte:head>
-
-<ErrorState status={page.status} message={page.error?.message ?? ""} />
 `;
 }
-function renderLayoutSvelte() {
-  return `<script lang="ts">
-  // The shared token stylesheet \u2014 semantic colors (bg-primary,
-  // text-muted-foreground) plus the Tailwind v4 theme. Imported once here so
-  // every route gets it.
-  import "../index.css";
-
-  let { children } = $props();
-</script>
-
-{@render children()}
+function renderMainTsx() {
+  return `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.js";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
 `;
 }
 function renderComponentsJson(choice) {
   const config = {
-    $schema: "https://shadcn-svelte.com/schema.json",
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "new-york",
+    rsc: false,
+    tsx: true,
     tailwind: {
-      // v4 has no config file; the theme lives in the stylesheet — the same
-      // shared one the React preset points at.
+      // v4 has no config file; the theme lives in the stylesheet.
+      config: "",
       css: "frontend/src/index.css",
-      // Tracks the theme the stylesheet was rendered from — see the React
-      // preset's note; the shadcn-svelte CLI reads it the same way.
-      baseColor: choice.theme.baseColor ?? "neutral"
+      // The base color the scaffold's stylesheet was rendered from. The CLI
+      // reads it for the few colors a generated component hard-codes rather
+      // than tokenises, so a value that disagrees with index.css produces
+      // components that clash with everything already there. An imported
+      // registry theme belongs to no upstream base and falls back to neutral.
+      baseColor: choice.theme.baseColor ?? "neutral",
+      cssVariables: true,
+      prefix: ""
     },
     aliases: {
-      components: "$lib/components",
-      utils: "$lib/utils",
-      ui: "$lib/components/ui",
-      hooks: "$lib/hooks",
-      lib: "$lib"
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks"
     },
-    typescript: true,
-    registry: "https://shadcn-svelte.com/registry"
+    // Omitted entirely for a set the CLI does not know — writing an
+    // unrecognised value would break `add` for every component, which is worse
+    // than icons defaulting to lucide. See IconLibrary.componentsJson.
+    ...iconLibraryOf(choice.icons).componentsJson === void 0 ? {} : { iconLibrary: iconLibraryOf(choice.icons).componentsJson }
   };
   return JSON.stringify(config, null, 2) + "\n";
 }
-function renderButtonSvelte() {
-  return `<script lang="ts" module>
-  import { type VariantProps, tv } from "tailwind-variants";
+function renderButtonTsx() {
+  return `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
 
-  export const buttonVariants = tv({
-    base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
@@ -1541,503 +1639,344 @@ function renderButtonSvelte() {
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
     },
-  });
-
-  export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-  export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
-
-  export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-    WithElementRef<HTMLAnchorAttributes> & {
-      variant?: ButtonVariant;
-      size?: ButtonSize;
-    };
-</script>
-
-<script lang="ts">
-  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-  import type { WithElementRef } from "bits-ui";
-  import { cn } from "$lib/utils.js";
-
-  let {
-    class: className,
-    variant = "default",
-    size = "default",
-    ref = $bindable(null),
-    href = undefined,
-    type = "button",
-    children,
-    ...restProps
-  }: ButtonProps = $props();
-</script>
-
-{#if href}
-  <a
-    bind:this={ref}
-    data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
-    {href}
-    {...restProps}
-  >
-    {@render children?.()}
-  </a>
-{:else}
-  <button
-    bind:this={ref}
-    data-slot="button"
-    class={cn(buttonVariants({ variant, size }), className)}
-    {type}
-    {...restProps}
-  >
-    {@render children?.()}
-  </button>
-{/if}
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
 `;
 }
-function renderButtonIndex() {
-  return `export {
-  default as Button,
-  buttonVariants,
-  type ButtonProps,
-  type ButtonSize,
-  type ButtonVariant,
-} from "./button.svelte";
-`;
+function renderModeToggleTsx(icons) {
+  return `import { useEffect, useState } from "react";
+${icons.modeImports.join("\n")}
+
+import { Button } from "@/components/ui/button";
+import { getMode, setMode, watchMode, type Mode } from "@/lib/theme";
+
+/** system \u2192 light \u2192 dark \u2192 system. */
+const NEXT: Record<Mode, Mode> = { system: "light", light: "dark", dark: "system" };
+
+const ICON = {
+  system: ${icons.modeComponents.system},
+  light: ${icons.modeComponents.light},
+  dark: ${icons.modeComponents.dark},
+};
+
+export function ModeToggle() {
+  // Read on mount, not during render: the inline script in index.html has
+  // already applied the class, and touching localStorage while rendering would
+  // break if this component is ever server-rendered.
+  const [mode, setLocal] = useState<Mode>("system");
+  useEffect(() => {
+    setLocal(getMode());
+    return watchMode(setLocal);
+  }, []);
+
+  const Icon = ICON[mode];
+  const change = () => {
+    const next = NEXT[mode];
+    setMode(next);
+    setLocal(next);
+  };
+
+  return (
+    <Button variant="ghost" size="icon" onClick={change} aria-label={\`Switch to \${NEXT[mode]} theme\`}>
+      <Icon />
+    </Button>
+  );
 }
-function cardPart(slot, tag, classes) {
-  return `<script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
-  import type { WithElementRef } from "bits-ui";
-  import { cn } from "$lib/utils.js";
-
-  let {
-    class: className,
-    ref = $bindable(null),
-    children,
-    ...restProps
-  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<${tag}
-  bind:this={ref}
-  data-slot="${slot}"
-  class={cn("${classes}", className)}
-  {...restProps}
->
-  {@render children?.()}
-</${tag}>
 `;
 }
-function renderCardIndex() {
-  return `import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
+function renderCardTsx() {
+  return `import * as React from "react"
+import { cn } from "cn"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
 
 export {
-  Root,
-  Content,
-  Description,
-  Footer,
-  Header,
-  Title,
-  //
-  Root as Card,
-  Content as CardContent,
-  Description as CardDescription,
-  Footer as CardFooter,
-  Header as CardHeader,
-  Title as CardTitle,
-};
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
 `;
 }
-var sveltePreset = {
-  id: "svelte",
-  label: "SvelteKit",
+var reactPreset = {
+  id: "react",
+  label: "React + Vite",
   dependencies: {
-    // shadcn-svelte's runtime surface. `bits-ui` is the headless primitive
-    // library its components are built on (the Radix equivalent), and
-    // `tailwind-variants` types the variants (the cva equivalent). clsx +
-    // tailwind-merge back the `cn()` its components import from `$lib/utils`.
-    // Pre-installed so `npx shadcn-svelte@latest add <component>` works
-    // without a separate npm i.
+    // shadcn/ui's runtime surface. `radix-ui` is the unified primitives
+    // package current components import (`Slot.Root` powers `asChild`) — not
+    // the per-primitive `@radix-ui/react-*` packages, which it superseded.
+    // cva types the variants, and `cn` is shadcn's own class merger, which its
+    // components import directly (it replaced clsx + tailwind-merge upstream).
+    // Pre-installed so `npx shadcn@latest add <component>` works without a
+    // separate npm i.
     //
-    // The icon package is `--icons`, merged in by renderPackageJson from
-    // `iconBinding` below — see the React preset's note.
-    "bits-ui": "^2.18.1",
-    clsx: "^2.1.1",
-    "tailwind-merge": "^3.0.1",
-    "tailwind-variants": "^3.3.1"
+    // The icon package is deliberately absent: it is `--icons`, merged in by
+    // renderPackageJson from `iconBinding` below. Naming lucide here too would
+    // install it alongside whatever the user actually chose.
+    "class-variance-authority": "^0.7.1",
+    cn: "^0.4.0",
+    "radix-ui": "^1.6.7",
+    react: "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   devDependencies: {
-    // The SDK's adapter (`@xano/sdk/sveltekit`) bundles its server half with
-    // esbuild; Vite 8 does not install it.
-    esbuild: "^0.28.1",
-    // 2.70 peer-accepts vite ^8 and vite-plugin-svelte ^7 — the versions
-    // pinned below. Bump this line and those two together.
-    "@sveltejs/kit": "^2.70.2",
-    // 7.x, matching what `sv create` installs. It peer-requires vite ^8, so
-    // this line and the `vite` pin move together or not at all — and the React
-    // preset's plugin has the same constraint, which is why the two presets
-    // share one Vite major rather than each choosing.
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tailwindcss/vite": "^4.1.5",
     "@types/node": "^20.19.43",
-    svelte: "^5.56.9",
-    "svelte-check": "^4.7.6",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    // 6.x, which peer-requires vite ^8 — the same constraint the Svelte
+    // preset's plugin has, which is why both presets share one Vite major.
+    // Its `@rolldown/plugin-babel` and `babel-plugin-react-compiler` peers are
+    // OPTIONAL (they back the React Compiler path, which this scaffold does
+    // not enable), so neither is shipped: verified by a clean install with no
+    // unmet-peer warnings.
+    "@vitejs/plugin-react": "^6.0.5",
     tailwindcss: "^4.1.5",
     "tw-animate-css": "^1.2.4",
     tsx: "^4.19.2",
-    // 6.x, the major `sv create` pins. svelte-check peer-accepts `^5 || ^6`;
-    // 7 is out but not yet in that range, so this tracks the canonical
-    // scaffold rather than latest.
+    // Kept in step with the Svelte preset — the major `sv create` pins. 7 is
+    // out, but svelte-check's peer range stops at 6 and the two presets track
+    // one TypeScript major so the shared tsconfig means the same thing in both.
     typescript: "^6.0.3",
     vite: "^8.0.16"
   },
-  // svelte-check REPLACES `tsc --noEmit` here rather than joining it.
-  //
-  // It is a superset: reading the same tsconfig, it checks `xano/`'s TypeScript
-  // exactly as `tsc` would AND the components `tsc` cannot parse at all. Running
-  // both is not merely redundant — `tsc` fails outright on the UI kit's barrels,
-  // which re-export types from `.svelte` modules it only knows as default
-  // exports. Verified against a real scaffold: a type error planted in
-  // `xano/index.ts` and one planted in `App.svelte` are each caught by this
-  // command alone.
-  //
-  // `svelte-kit sync` runs first, and is not optional: it generates
-  // `.svelte-kit/tsconfig.json` (which the project's tsconfig extends) and the
-  // route types. Without it svelte-check fails on a missing extends target
-  // rather than on anything the user wrote.
-  checkCmd: "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-  // SvelteKit supplies `$lib` on both sides — the Vite alias from its plugin
-  // and the tsconfig path from the config it generates. Declaring either by
-  // hand would be a second source of truth that can silently disagree.
-  aliasName: null,
-  aliasTarget: "frontend/src/lib",
-  tsconfigPaths: {},
-  tsconfigExtends: "./.svelte-kit/tsconfig.json",
-  // What `svelte-kit sync` generates and the extended config lists — re-added
-  // because our `include` replaces that config's rather than merging with it.
-  // These are the declarations behind `$app/*`, `$env/*`, and `./$types`.
-  tsconfigInclude: [
-    ".svelte-kit/ambient.d.ts",
-    ".svelte-kit/env.d.ts",
-    ".svelte-kit/non-ambient.d.ts",
-    ".svelte-kit/types/**/$types.d.ts"
-  ],
-  // `prepare` runs on `npm install`, so a fresh clone has `.svelte-kit/`
-  // before anything reads tsconfig.json.
-  extraScripts: { prepare: "svelte-kit sync" },
-  // shadcn-svelte's generated components import these from `$lib/utils.js`
-  // alongside `cn()`. Without them the scaffold type-checks until the first
-  // `npx shadcn-svelte@latest add <name>` — which the agent guidance tells
-  // assistants to run — and then fails inside components the user never wrote,
-  // with an error naming a file they have no reason to suspect.
-  //
-  // Verbatim from shadcn-svelte's own utils.ts, so a component the CLI writes
-  // resolves against exactly what upstream expects.
-  libUtilsExtra: `
-export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
-export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
-export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
-export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
-`,
-  gitignoreEntries: [".svelte-kit/"],
-  // No `jsx`. `verbatimModuleSyntax` is what svelte-check expects so that
-  // type-only imports in components are erased rather than emitted.
-  tsconfigOptions: { verbatimModuleSyntax: true },
+  // `tsc` checks .tsx natively, so React needs nothing beyond it.
+  checkCmd: "tsc --noEmit",
+  aliasName: "@",
+  aliasTarget: "frontend/src",
+  // `./`-rooted: with no `baseUrl` (deprecated in TypeScript 6), a `paths`
+  // target resolves against tsconfig.json's own directory.
+  tsconfigPaths: { "@/*": ["./frontend/src/*"] },
+  tsconfigOptions: { jsx: "react-jsx" },
   viteImports: [
-    `import { sveltekit } from "@sveltejs/kit/vite";`,
-    `import adapter from "@xano/sdk/sveltekit";`,
+    `import react from "@vitejs/plugin-react";`,
     `import tailwindcss from "@tailwindcss/vite";`
   ],
-  // tailwindcss() before sveltekit() — the order Tailwind v4 documents for
-  // SvelteKit, so the stylesheet is processed before Kit consumes the graph.
-  //
-  // The whole SvelteKit config rides in the sveltekit() call. There is no
-  // svelte.config.js by design — see renderSvelteKitPlugin().
-  vitePlugins: ["tailwindcss()", renderSvelteKitPlugin()],
-  // SvelteKit resolves its own paths from this file's directory and redirects
-  // them into frontend/ via `files`; moving Vite's root under it puts the two
-  // into disagreement. Output is the adapter's job, not `build.outDir`.
-  viteRoot: null,
-  viteBuild: null,
-  // SvelteKit owns the page template — frontend/src/app.html. No `entryScript`
-  // follows: there is no shared index.html for it to point at.
-  ownsHtmlEntry: true,
-  files(vars, landing, choice = defaultThemeChoice()) {
-    const ui = "frontend/src/lib/components/ui";
+  vitePlugins: ["react()", "tailwindcss()"],
+  entryScript: "/src/main.tsx",
+  libUtils: `export { cn, type ClassValue } from "cn";
+`,
+  files(_vars, landing, choice = defaultThemeChoice()) {
     return [
+      // The shadcn/ui CLI's config — lets `npx shadcn@latest add <component>`
+      // work in a fresh scaffold without a separate `shadcn init`.
       { path: "components.json", content: renderComponentsJson(choice) },
-      { path: "frontend/src/app.html", content: renderAppHtml(vars, choice) },
-      // Only for `--dark toggle` — see the React preset's note.
+      { path: "frontend/src/main.tsx", content: renderMainTsx() },
+      { path: "frontend/src/App.tsx", content: renderApp(landing, choice) },
+      // Only for `--dark toggle`. `system` needs no component: the inline
+      // script in index.html is the whole implementation.
       ...choice.dark === "toggle" ? [
         {
-          path: "frontend/src/lib/components/mode-toggle.svelte",
-          content: renderModeToggleSvelte(iconLibraryOf(choice.icons).svelte)
+          path: "frontend/src/components/mode-toggle.tsx",
+          content: renderModeToggleTsx(iconLibraryOf(choice.icons).react)
         }
       ] : [],
-      { path: "frontend/src/app.d.ts", content: renderAppDts() },
-      { path: "frontend/src/routes/+layout.ts", content: renderLayoutTs() },
-      { path: "frontend/src/routes/+layout.svelte", content: renderLayoutSvelte() },
-      { path: "frontend/src/routes/+page.svelte", content: renderApp(landing, choice) },
-      { path: "frontend/src/routes/+error.svelte", content: renderErrorSvelte() },
-      { path: "frontend/src/routes/404/+page.svelte", content: renderNotFoundRoute() },
-      { path: "frontend/src/lib/components/error-state.svelte", content: renderErrorState() },
-      // `kit.files.assets` points here: static files copied to the site root
-      // verbatim. A README rather than a .gitkeep because this one gets
-      // PUBLISHED — everything here lands in frontend/dist, so the placeholder
-      // that keeps the directory in git is a file real users will see deployed.
-      {
-        path: "frontend/static/README.md",
-        content: `Files here are copied to the site root as-is \u2014 \`favicon.png\` is served
-at \`/favicon.png\`. Reference them from a component with a root-relative
-path, or from \`app.html\` via \`%sveltekit.assets%\`.
-
-Delete this file once you add something real.
-`
-      },
-      { path: `${ui}/button/button.svelte`, content: renderButtonSvelte() },
-      { path: `${ui}/button/index.ts`, content: renderButtonIndex() },
-      {
-        path: `${ui}/card/card.svelte`,
-        content: cardPart(
-          "card",
-          "div",
-          "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm"
-        )
-      },
-      {
-        path: `${ui}/card/card-header.svelte`,
-        content: cardPart(
-          "card-header",
-          "div",
-          "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
-        )
-      },
-      {
-        path: `${ui}/card/card-title.svelte`,
-        content: cardPart("card-title", "div", "leading-none font-semibold")
-      },
-      {
-        path: `${ui}/card/card-description.svelte`,
-        content: cardPart("card-description", "div", "text-sm text-muted-foreground")
-      },
-      {
-        path: `${ui}/card/card-content.svelte`,
-        content: cardPart("card-content", "div", "px-6")
-      },
-      {
-        path: `${ui}/card/card-footer.svelte`,
-        content: cardPart("card-footer", "div", "flex items-center px-6 [.border-t]:pt-6")
-      },
-      { path: `${ui}/card/index.ts`, content: renderCardIndex() }
+      // The two components the landing page uses. Every other shadcn component
+      // is one `npx shadcn@latest add` away and lands beside these.
+      { path: "frontend/src/components/ui/button.tsx", content: renderButtonTsx() },
+      { path: "frontend/src/components/ui/card.tsx", content: renderCardTsx() }
     ];
   },
   iconBinding(id) {
-    return iconLibraryOf(id).svelte;
+    return iconLibraryOf(id).react;
   },
   readmeFrontendSection(icons) {
-    return `[SvelteKit](https://svelte.dev/docs/kit) with Svelte 5, styled with
-[Tailwind CSS](https://tailwindcss.com) v4 and
-[shadcn-svelte](https://shadcn-svelte.com).
-
-Pages live in [\`frontend/src/routes/\`](frontend/src/routes/) \u2014 \`+page.svelte\`
-is a page, a subdirectory is a nested route. Routes are **prerendered**: each
-becomes its own HTML document at build time, so a page loads as itself rather
-than as a shell that fills in afterwards, and an unmatched path returns a real
-404 from [\`+error.svelte\`](frontend/src/routes/+error.svelte).
-
-> **There is no server.** \`npm run xano:deploy:ephemeral\` ships this app to a static host
-> with no runtime of its own; Xano is the backend, reached through
-> [\`frontend/src/lib/api.ts\`](frontend/src/lib/api.ts). So \`+page.server.ts\`,
-> form actions, and server \`load\` have nothing to run on \u2014 and **nothing warns
-> you**: a project using them builds and deploys green, then fails in the
-> browser. Treat them as unavailable. That is the trade \u2014 the backend is
-> authored in [\`xano/\`](xano/) as TypeScript and deployed alongside the
-> frontend, so it is a real backend, just not this one.
->
-> \`frontend/src/routes/+layout.ts\` sets \`prerender = true\` for the whole app.
-> Because prerendering renders at build time, module-scope \`window\`/\`document\`
-> access now fails the **build** rather than the browser \u2014 use \`onMount\`, or
-> guard with \`import { browser } from "$app/environment"\`.
-
-**A dynamic route fails the build until it says how it renders.** A route like
-\`/posts/[id]\` cannot be prerendered unless the build knows which ids exist, so
-the build stops and names it. For rows created at runtime (the usual detail
-page), render it in the browser:
-
-\`\`\`ts
-// frontend/src/routes/posts/[id]/+page.ts
-export const prerender = false;
-\`\`\`
-
-The host has no file for \`/posts/42\`, so it answers with \`404.html\`, which the
-SDK's adapter (\`@xano/sdk/sveltekit\`, in \`vite.config.ts\`) writes as the app
-shell: it boots the app and renders the route, so a reload or a deep link works
-(the response status is still 404). Only for ids known at build time, list them
-instead \u2014 each gets its own page, and no other id has one:
-\`export const entries = () => [{ id: "1" }, { id: "2" }];\`
-
-[\`frontend/src/routes/404/+page.svelte\`](frontend/src/routes/404/+page.svelte)
-prerenders to \`404.html\` while every route is prerendered, which is what makes
-an unmatched path return a real 404. It has to be a route: SvelteKit never
-prerenders \`+error.svelte\` to a file. Once a route sets \`prerender = false\`,
-the adapter writes the app shell there instead, and an unmatched path renders
-\`+error.svelte\` in the browser, still with a 404.
-
-shadcn-svelte is not a dependency \u2014
-its components are copied into
-[\`frontend/src/lib/components/ui/\`](frontend/src/lib/components/ui/) and owned by
-this project, so edit them freely. \`Button\` and \`Card\` are already there; add
-more with:
+    return `React + Vite, styled with [Tailwind CSS](https://tailwindcss.com) v4 and
+[shadcn/ui](https://ui.shadcn.com). shadcn is not a dependency \u2014 its components
+are copied into [\`frontend/src/components/ui/\`](frontend/src/components/ui/) and
+owned by this project, so edit them freely. \`Button\` and \`Card\` are already
+there; add more with:
 
 \`\`\`bash
-npx shadcn-svelte@latest add dialog input form
+npx shadcn@latest add dialog input form
 \`\`\`
 
 [\`components.json\`](components.json) is pre-configured, so that works with no
-\`shadcn-svelte init\` step. ${iconLibraryOf(icons).guidance.svelte}
+\`shadcn init\` step. ${iconLibraryOf(icons).guidance.react}
+[\`frontend/src/App.tsx\`](frontend/src/App.tsx) already uses one.
 
-\`\`\`ts
-${iconLibraryOf(icons).svelte.arrowImport}
-\`\`\`
-
-[\`frontend/src/routes/+page.svelte\`](frontend/src/routes/+page.svelte) already
-does, and that is the form \`npx shadcn-svelte@latest add\` writes too.
-
-Components import through the \`$lib\` alias
-(\`$lib/components/ui/button\`, \`$lib/utils\`), which SvelteKit points at
-\`frontend/src/lib/\` via \`kit.files\` in
-[\`vite.config.ts\`](vite.config.ts) \u2014 there is no \`paths\` entry to keep in
-sync, and adding one would just be a second answer that can disagree.
+Components import through the \`@/\` alias (\`@/components/ui/button\`), which
+maps to \`frontend/src/\` in both \`tsconfig.json\` and \`vite.config.ts\` \u2014 change
+one and change the other. \`cn()\` comes from shadcn's \`cn\` package, which is
+what the CLI writes into every component it adds.
 
 Colors come from the theme tokens in
-[\`frontend/src/index.css\`](frontend/src/index.css) \u2014 see **Theming** below.
-
-> \`npm run typecheck\` runs \`svelte-kit sync && svelte-check\`, not \`tsc\`. It
-> checks both halves \u2014 the backend's TypeScript and the components \u2014 where
-> \`tsc\` cannot read \`.svelte\` files at all. Keep it in the script: it is what
-> makes the frontend unable to drift from the backend defs. \`sync\` regenerates
-> \`.svelte-kit/\`, which \`tsconfig.json\` extends; \`npm install\` runs it too.`;
+[\`frontend/src/index.css\`](frontend/src/index.css) \u2014 see **Theming** below.`;
   },
   agentGuidanceSection(icons) {
-    return `- \`frontend/src/\` \u2014 the SvelteKit app. Svelte 5 + Tailwind v4 + shadcn-svelte.
-  - **There is no server.** This deploys to a static host with no runtime, and
-    Xano is the backend. Never write \`+page.server.ts\`, \`+layout.server.ts\`,
-    form actions, or server \`load\` \u2014 reach the backend through
-    \`frontend/src/lib/api.ts\` instead, and never stand up a second backend here.
-  - **The build will not stop you.** A project containing \`+page.server.ts\`
-    compiles and deploys green, then fails in the browser on the live site. A
-    passing build is not evidence that a server feature works \u2014 there is
-    nothing to run it.
-  - \`frontend/src/routes/\` \u2014 file-based routing. A page is \`+page.svelte\`, a
-    nested route is a subdirectory. **Routes live under \`frontend/src/\`, not a
-    top-level \`src/\`** \u2014 \`files\` in the \`sveltekit()\` plugin config in
-    \`vite.config.ts\` points SvelteKit here. A file added under a top-level
-    \`src/routes/\` is not a route and is never served.
-  - **Routes are prerendered.** \`frontend/src/routes/+layout.ts\` sets
-    \`prerender = true\` for the whole app, so every route is rendered to its own
-    HTML document at build time and served as a real page. A static route needs
-    nothing registered \u2014 add \`+page.svelte\` and it works.
-  - **Prerendering renders at BUILD time**, so module-scope \`window\`/\`document\`
-    access now breaks the build, not the browser. Use \`onMount\`, or guard with
-    \`import { browser } from "$app/environment"\`. This is a page option, not a
-    server \u2014 do not "fix" it by reaching for \`ssr\` or a server file.
-  - **A dynamic route fails the build until it says how it renders.**
-    \`/posts/[id]\` cannot be prerendered unless the build knows which ids exist.
-    For rows created at runtime (a detail page), export
-    \`const prerender = false\` from that route's \`+page.ts\`: the host answers
-    it with the \`404.html\` app shell the SDK's adapter writes, which renders it
-    in the browser, so reloads and deep links work. \`entries\` only fits ids
-    known at build time \u2014 any other id has no page.
-  - \`frontend/src/routes/404/+page.svelte\` prerenders to \`404.html\`, which is
-    what makes an unmatched path return a real 404 instead of silently serving a
-    page with a 200. Keep it: without it a missing asset comes back as HTML and
-    the browser reports \`Unexpected token '<'\`. It has to be a route \u2014 SvelteKit
-    never prerenders \`+error.svelte\` to a file, so that alone would ship no
-    \`404.html\`.
-  - Keep the adapter in \`vite.config.ts\` (\`@xano/sdk/sveltekit\`). Do NOT
-    swap in \`@sveltejs/adapter-static\` with a \`fallback\`: it writes an empty
-    shell over the prerendered home page.
-  - Data loading: call \`api.ts\` from the component, or from a universal
-    \`+page.ts\` \`load\` if you need it before render. Both run in the browser.
-  - \`frontend/src/lib/components/ui/\` \u2014 shadcn-svelte components, **copied in and
-    owned by this project**. Edit them directly; there is no library to configure
-    around.
-  - Need one that isn't there? \`npx shadcn-svelte@latest add <name>\` \u2014 do not
-    hand-roll it, and do not add a different component library. Note the
-    \`-svelte\` suffix: the plain \`shadcn\` CLI writes React and will not work here.
-  - ${iconLibraryOf(icons).guidance.svelte.replace(/\n/g, "\n    ")}
-  - That import form is what \`frontend/src/routes/+page.svelte\` already uses and
-    what \`npx shadcn-svelte@latest add\` writes, so matching it keeps what you
-    write consistent with what the CLI generates beside it. Do not add another
-    icon library and do not paste raw inline \`<svg>\` markup.
-  - Import via the \`$lib\` alias (\`$lib/components/ui/button\`, \`$lib/utils\`),
-    which SvelteKit generates for both TypeScript and the bundler. Do not add a
-    \`paths\` entry for it \u2014 a hand-written one is a second source of truth that
-    can disagree with the generated one.
-  - Components are Svelte 5 **runes** (\`$props()\`, \`$bindable()\`,
-    \`{@render children?.()}\`) \u2014 not the Svelte 4 \`export let\` / slot API. Runes
-    mode is FORCED in \`vite.config.ts\`, so \`export let\` is a compile error
-    naming the file rather than a component that quietly builds in legacy mode.
-    Do not "fix" that error by relaxing \`compilerOptions.runes\` \u2014 write the
-    rune.
-  - \`npm run typecheck\` runs \`svelte-kit sync && svelte-check\`, which checks both
-    \`xano/\` and the components. Do not swap it for \`tsc --noEmit\`: \`tsc\` cannot
-    read \`.svelte\` files and fails on the UI kit's barrels. \`sync\` regenerates
-    \`.svelte-kit/\`, which \`tsconfig.json\` extends \u2014 run it after adding a route.`;
+    return `- \`frontend/src/\` \u2014 the React app. Tailwind v4 + shadcn/ui.
+  - \`frontend/src/components/ui/\` \u2014 shadcn components, **copied in and owned by
+    this project**. Edit them directly; there is no library to configure around.
+  - Need one that isn't there? \`npx shadcn@latest add <name>\` \u2014 do not hand-roll
+    it, and do not add a different component library.
+  - ${iconLibraryOf(icons).guidance.react.replace(/\n/g, "\n    ")}
+    \`frontend/src/App.tsx\` already uses one. Do not add another icon library and
+    do not paste raw inline \`<svg>\` markup \u2014 search the set before concluding an
+    icon is missing.
+  - Import via the \`@/\` alias (\`@/components/ui/button\`), declared in both
+    \`tsconfig.json\` and \`vite.config.ts\`. \`cn()\` is \`import { cn } from "cn"\`
+    (shadcn's own package, which the CLI writes into every component it adds);
+    \`@/lib/utils\` re-exports it. Leave a generated component's imports as the
+    CLI wrote them.
+  - \`npx shadcn@latest add sonner\` writes a \`Toaster\` that reads the mode from
+    \`next-themes\`, which this project does not use. Drop that import and
+    uninstall \`next-themes\`, then pass \`theme\` from the project's own mode:
+    \`getMode()\` + \`watchMode()\` from \`@/lib/theme\` when that module exists,
+    otherwise \`"system"\` (or \`"light"\` if nothing applies the \`dark\` class).`;
   }
 };
 
-// src/emit/frontend-presets.ts
-var FRAMEWORKS = ["react", "svelte"];
-var DEFAULT_FRAMEWORK = "react";
-var PRESETS = {
-  react: reactPreset,
-  svelte: sveltePreset
-};
-function findFrontendPreset(id) {
-  const normalized = id.trim().toLowerCase();
-  return FRAMEWORKS.includes(normalized) ? PRESETS[normalized] : void 0;
-}
-function allFrontendPresets() {
-  return FRAMEWORKS.map((id) => PRESETS[id]);
-}
-function resolveFrameworkFlag(raw) {
-  const preset = findFrontendPreset(raw);
-  if (preset === void 0) {
-    throw new Error(
-      `Unknown --framework "${raw}". Valid frameworks: ${FRAMEWORKS.join(", ")}.`
-    );
-  }
-  return preset;
-}
-
 export {
+  ICON_LIBRARIES,
+  DEFAULT_ICON_LIBRARY,
+  findIconLibrary,
+  allIconLibraries,
+  defaultIconLibrary,
+  resolveIconsFlag,
+  iconLibraryOf,
+  reactPreset,
+  decodeDigest,
+  decodeMarkerWith,
+  decodeMarkerHead,
   sdkDep,
+  sortedKeys,
+  isSorted,
+  renderBackendPackageJson,
   renderPackageJson,
   renderTsconfig,
+  BACKEND_TSCONFIG_PATH,
+  renderBackendTsconfig,
   renderLambdaTsconfig,
   renderViteConfig,
   renderIndexHtml,
   renderGitignore,
+  mergeGitignore,
   NODE_MIN,
   renderGitattributes,
   checkJobDir,
@@ -2049,6 +1988,7 @@ export {
   readmeBuiltWithVersion,
   refreshReadmeBuiltWith,
   renderReadme,
+  renderBackendReadme,
   renderXanoIndex,
   renderXanoExampleMd,
   describeOrigin,
@@ -2057,13 +1997,9 @@ export {
   initLanding,
   codegenLanding,
   renderIndexCss,
+  renderThemeScript,
   renderThemeModule,
   renderCnUtil,
-  renderApiTs,
-  FRAMEWORKS,
-  DEFAULT_FRAMEWORK,
-  findFrontendPreset,
-  allFrontendPresets,
-  resolveFrameworkFlag
+  renderApiTs
 };
-//# sourceMappingURL=chunk-EQFYOOO6.js.map
+//# sourceMappingURL=chunk-5GIOCDUM.js.map