@xanots/sdk 0.0.11 → 0.0.12

package/dist/{chunk-Q77KNEUL.js → chunk-RQNMTDXD.js}

@@ -1571,6 +1571,855 @@ function iconLibraryOf(id) {
   return id === void 0 ? defaultIconLibrary() : LIBRARIES[id];
 }
 
+// src/emit/init-templates.ts
+function sdkDep(sdkVersion) {
+  const parsed = /^(\d+)\.(\d+)\.\d+/.exec(sdkVersion);
+  if (!parsed) return ">=0.0.1 <0.1.0";
+  const [major, minor] = [Number(parsed[1]), Number(parsed[2])];
+  const ceiling = major > 0 ? `${major + 1}.0.0` : `0.${minor + 1}.0`;
+  return `>=${sdkVersion} <${ceiling}`;
+}
+function renderPackageJson({ appName, sdkVersion }, preset, choice = defaultThemeChoice()) {
+  const check = preset.checkCmd;
+  const pkg = {
+    name: appName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: `${check} && vite build`,
+      preview: "vite preview",
+      typecheck: check,
+      // Both are prefixed with a typecheck: the export pass validates what it
+      // can see in the encoded bundle, and TypeScript validates the rest. Only
+      // `build` used to run `tsc`, so anyone following the documented workflow
+      // shipped with the compiler's half of the checks never run.
+      // `--lock` on both: object identity derives from `(type, name)`, so
+      // without a lock a rename re-derives the guid and the engine does
+      // delete-and-recreate instead of rename-in-place. The lock has to be
+      // adopted BEFORE the identities matter — by the time a rename lands
+      // against data anyone cares about, the guids have already drifted and
+      // recovery is `xanots lock import`. The scaffold is the earliest possible
+      // moment, so it opts in from the first export (issue #26). Once the file
+      // exists every export uses it, flag or not.
+      "xano:export": `${check} && xanots export ./xano/index.ts --out workspace.json --lock`,
+      // 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 one documented command had no `dist` to ship (issue #241).
+      // `build` already prefixes the same typecheck, so this is one check, not
+      // two.
+      "xano:deploy": `npm run build && xanots deploy ./xano/index.ts --static ./frontend/dist --lock`,
+      // The CI guard: fails instead of changing xano.lock, so an uncommitted
+      // identity change is caught in review rather than on a deploy.
+      "xano:check": `${check} && xanots export ./xano/index.ts --out workspace.json --frozen-lock`,
+      // 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": "xanots test run-all",
+      // 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
+    },
+    dependencies: {
+      // `@xanots/sdk` is the only XanoTS dependency a scaffold ships with.
+      // Add-ons (`@xanots/auth`, and the packages that follow it) are installed
+      // on demand — a project that never registers auth should not carry it,
+      // and an add-on's release cadence is its own, not the CLI's.
+      "@xanots/sdk": sdkDep(sdkVersion),
+      ...preset.dependencies,
+      // The icon set and the typefaces are choices, not framework constants, so
+      // they are merged here rather than sitting in `preset.dependencies`. Both
+      // land after the preset's own entries: a preset that still names an icon
+      // package would otherwise win over the set the user actually picked.
+      ...preset.iconBinding(choice.icons).dependency,
+      ...fontDependencies(choice.fonts)
+    },
+    devDependencies: { ...preset.devDependencies },
+    // Not ">=20": Vite 8 and vite-plugin-svelte 7 both declare
+    // `^20.19 || >=22.12`, so 20.0–20.18 installs the toolchain and then fails
+    // to run it. Stating the real floor turns that into an install-time
+    // warning instead of a confusing crash.
+    engines: { node: ">=20.19" }
+  };
+  return JSON.stringify(pkg, null, 2) + "\n";
+}
+function renderTsconfig(preset) {
+  const aliasPaths = Object.keys(preset.tsconfigPaths).length > 0 ? { paths: { ...preset.tsconfigPaths } } : {};
+  const tsconfig = {
+    // Present only when the framework generates a config to build on — see
+    // FrontendPreset.tsconfigExtends. The `include` below is re-declared on
+    // top of it deliberately: an extended config's `include` is REPLACED, not
+    // merged, and dropping `xano` here would leave the backend unchecked while
+    // every command still exits 0.
+    ...preset.tsconfigExtends === void 0 ? {} : { extends: preset.tsconfigExtends },
+    compilerOptions: {
+      target: "ES2022",
+      lib: ["ES2022", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      moduleResolution: "bundler",
+      ...preset.tsconfigOptions,
+      strict: true,
+      noEmit: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      types: ["node", "vite/client"],
+      ...aliasPaths
+    },
+    // Both halves of the project typecheck together: the XanoTS backend and
+    // the frontend that derives its types from the backend's defs. A preset
+    // that extends a generated config appends whatever that config listed —
+    // `include` is replaced, not merged, so anything it declared is otherwise
+    // silently dropped. See FrontendPreset.tsconfigInclude.
+    include: ["xano", "frontend/src", ...preset.tsconfigInclude ?? []]
+  };
+  return JSON.stringify(tsconfig, null, 2) + "\n";
+}
+function renderViteConfig(preset) {
+  const root = preset.viteRoot === void 0 ? "frontend" : preset.viteRoot;
+  const build = preset.viteBuild === void 0 ? { outDir: "dist", emptyOutDir: true } : preset.viteBuild;
+  const header = root === null ? `// Vite's root is the project root. The framework resolves its own file
+// locations from the plugin config below \u2014 this file is the ONLY place that
+// config lives \u2014 and routes the build through its adapter, which writes
+// frontend/dist, the directory \`npm run xano:deploy\` ships as the frontend.` : `// Vite's root is the ${root}/ folder, so index.html and the app live there
+// while the XanoTS backend sits in xano/ as a peer. The build lands in
+// ${root}/dist, which \`npm run xano:deploy\` ships as the static frontend.`;
+  const rootBlock = root === null ? "" : `  root: ${JSON.stringify(root)},
+  // Vite resolves \`.env\` files against \`root\`, which is ${root}/ here \u2014 but
+  // \`.env.example\` sits at the project root, so that is where anyone will
+  // actually put their \`.env.local\`. Point envDir back at this file's own
+  // directory so VITE_XANO_HOST is picked up in dev.
+  envDir: fileURLToPath(new URL(".", import.meta.url)),
+`;
+  const buildBlock = build === null ? "" : `  build: ${renderInlineObject(build)},
+`;
+  const aliasBlock = preset.aliasName === null ? "" : `  resolve: {
+    alias: {
+      // The alias the UI kit writes its imports against. Resolved from this
+      // file rather than from Vite's root so it points at the right directory
+      // either way. Keep in sync with the \`paths\` entry in tsconfig.json.
+      "${preset.aliasName}": fileURLToPath(new URL("./${preset.aliasTarget}", import.meta.url)),
+    },
+  },
+`;
+  const fileUrlImport = rootBlock === "" && aliasBlock === "" ? "" : `import { fileURLToPath } from "node:url";
+`;
+  return `${fileUrlImport}import { defineConfig } from "vite";
+${preset.viteImports.join("\n")}
+
+${header}
+export default defineConfig({
+${rootBlock}${buildBlock}  plugins: [${preset.vitePlugins.join(", ")}],
+${aliasBlock}  server: { host: "127.0.0.1", port: 5173 },
+});
+`;
+}
+function renderInlineObject(obj) {
+  const entries = Object.entries(obj).map(([k, v]) => `${k}: ${JSON.stringify(v)}`);
+  return entries.length === 0 ? "{}" : `{ ${entries.join(", ")} }`;
+}
+function renderIndexHtml({ appName }, preset, choice = defaultThemeChoice()) {
+  if (preset.entryScript === void 0) {
+    throw new Error(`The ${preset.id} preset owns its own HTML entry; renderIndexHtml does not apply.`);
+  }
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${appName}</title>
+${renderThemeScript(choice.dark)}  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="${preset.entryScript}"></script>
+  </body>
+</html>
+`;
+}
+function renderGitignore(preset) {
+  const framework = (preset?.gitignoreEntries ?? []).map((e) => `${e}
+`).join("");
+  return `node_modules/
+dist/
+workspace.json
+.xano/
+.env
+.env.local
+*.local
+${framework}
+# Not ignored, on purpose: xano/xano.lock pins object identity across renames
+# and environments. Commit it.
+`;
+}
+function renderEnvExample() {
+  return `# Point the frontend at a deployed Xano backend. Leave unset to run the UI
+# with no backend. When you \`npm run xano:deploy\`, the backend URL is injected
+# as window.XANO_HOST at runtime instead \u2014 no rebuild needed.
+VITE_XANO_HOST=https://your-instance.xano.io
+`;
+}
+function renderReadme({ appName }, preset, choice = defaultThemeChoice()) {
+  return `# ${appName}
+
+A [XanoTS](https://www.npmjs.com/package/@xanots/sdk) project: a Xano
+backend authored in TypeScript under [\`xano/\`](xano/), and a ${preset.label}
+frontend under [\`frontend/\`](frontend/) that derives its request paths and
+types from the backend defs \u2014 so the two can't drift.
+
+## Quick start
+
+\`\`\`bash
+npm install
+npm run dev          # run the frontend (no backend needed yet)
+\`\`\`
+
+Then author your backend in [\`xano/index.ts\`](xano/index.ts) \u2014 start with the
+walkthrough in [\`xano/EXAMPLE.md\`](xano/EXAMPLE.md).
+
+## Deploy
+
+\`\`\`bash
+xanots login            # once, to authenticate against your Xano account
+npm run xano:deploy     # build the frontend, then ship it with the backend
+\`\`\`
+
+- \`npm run xano:export\` compiles the backend to \`workspace.json\` (don't commit it).
+- \`npm run xano:deploy\` deploys the backend and the built frontend to a live
+  **ephemeral** environment 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.
+- \`xanots status\` says who you are signed in as, which workspace you are bound to, and
+  which environment this project last deployed to \u2014 its URL, and when it expires. You
+  never have to remember the environment's name.
+- \`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. \`xanots deploy
+  ./xano/index.ts --test\` does both in one step.
+
+## \`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).
+
+It is created by \`npm run xano:export\` or \`npm run xano:deploy\`, and **must be
+committed**. Adopt it from the first export: once identities have drifted, the
+recovery path is \`xanots lock import <live-bundle.json> --lock=xano/xano.lock\`
+against the deployed workspace.
+
+\`\`\`bash
+npm run xano:check      # CI: fail if the export would change xano.lock
+\`\`\`
+
+To rename an object: rename it in code, run \`npm run xano:export\` (stderr prints
+the exact fix-up), run \`xanots lock rename <kind> <old> <new> --lock=xano/xano.lock\`,
+then export again. \`lock rename\` and \`lock import\` need that flag here \u2014 they take no
+entry file, so they look for the lock in the current directory, while
+\`lock prune ./xano/index.ts\` derives it from the entry like \`export\` does.
+
+## The one contract
+
+[\`frontend/src/lib/api.ts\`](frontend/src/lib/api.ts) imports the XanoTS query
+defs and derives paths (\`getPath()\`) and request/response types
+(\`InferInput\` / \`InferResponse\`) from them. Never hand-type a URL or a request
+body \u2014 change a def and the frontend types follow.
+
+> To spot-check a def from Node (read \`getPath()\`/\`verb\`, log a value), run a real
+> file with \`tsx <file.ts>\` **from inside the project root** \u2014 not \`tsx -e\`, not
+> bare \`node file.ts\`, and not from another directory (they mis-resolve the
+> intra-workspace \`.js\` imports and the \`@xanots/sdk\` specifier). Or use
+> \`xanots routes xano/index.ts\` to list every endpoint's verb + path.
+
+## The frontend
+
+${preset.readmeFrontendSection(choice.icons)}
+
+${renderReadmeThemingSection(choice)}
+
+## Add-ons
+
+XanoTS is composable with other \`@xanots/*\` packages:
+
+- **[\`@xanots/auth\`](https://www.npmjs.com/package/@xanots/auth)** \u2014 turnkey
+  authentication (user/login/signup tables and endpoints). Install it with
+  \`xanots marketplace install @xanots/auth\`, then register it in
+  \`xano/index.ts\`. Authentication only \u2014 **not** authorization: it has no
+  roles, permissions, or route guards. Build those with \`@xanots/sdk\` (a role
+  column plus a \`s.precondition\` per endpoint).
+- More \`@xanots/*\` packages register onto the same workspace. This list
+  does not update itself \u2014 run \`xanots marketplace list\` for the live
+  catalogue, \`xanots marketplace search <words>\` to narrow it, and
+  \`xanots 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 renderXanoIndex({ appName }) {
+  return `import { workspace } from "@xanots/sdk";
+
+/**
+ * The ${appName} backend.
+ *
+ * A workspace is assembled by registering typed objects onto a workspace()
+ * instance and default-exporting it. This starter is intentionally empty and
+ * already compiles + deploys \u2014 add your first table and endpoint below.
+ *
+ * \u2500\u2500 Add your first table + endpoint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ *
+ *   import { workspace, table, apiGroup, query, f, input, s, ref, c, expect, resp } from "@xanots/sdk";
+ *
+ *   const notes = table({
+ *     name: "notes",
+ *     // \`id\` (int PK) + \`created_at\` (epochms) are auto-injected.
+ *     schema: {
+ *       body: f.text({ required: true }),
+ *     },
+ *   });
+ *
+ *   const api = apiGroup({ name: "notes", canonical: "notes" }); // pin the slug
+ *
+ *   const createNote = query({
+ *     name: "create_note",
+ *     verb: "POST",
+ *     apiGroup: api,
+ *     input: { body: input.text({ required: true }) },
+ *     // ...build the stack with the s.* statement helpers...
+ *     // Assertions ride along with the object they cover; \`npm run xano:test\`
+ *     // runs them against whatever you last deployed.
+ *     tests: [
+ *       {
+ *         name: "creates a note",
+ *         input: { body: c.text("hello") },
+ *         expect: [expect.to_be_defined(resp())],
+ *       },
+ *     ],
+ *   });
+ *
+ *   export default workspace("${appName}")
+ *     .registerTables([notes])
+ *     .registerApiGroups([api])
+ *     .registerQueries([createNote]);
+ *
+ * Discover the exact builders and options from the package's own types and its
+ * shipped docs \u2014 read \`node_modules/@xanots/sdk/llms.txt\` first (it ends with a
+ * map of the \`llms/*.md\` topic files), then the .d.ts files.
+ * See \`xano/EXAMPLE.md\` for the full walkthrough.
+ *
+ * \u2500\u2500 Optional add-ons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Nothing below is installed. Reach for an add-on when you need it, not before.
+ *
+ * @xanots/auth registers turnkey auth (user/login/signup) onto this same
+ * workspace. Install it first (\`xanots marketplace install @xanots/auth\`), then
+ * \`registerAuth(workspace("${appName}"), { canonical: "authn" })\` returns the
+ * instance to chain your own .register*() calls onto:
+ *
+ *   registerAuth(workspace("${appName}"), { canonical: "authn" })
+ *     .registerTables([notes])
+ *     .registerApiGroups([api])
+ *     .registerQueries([createNote]);
+ *
+ * That is not the whole catalogue. \`xanots marketplace list\` prints every
+ * published add-on and \`xanots marketplace details <package>\` prints what one
+ * installs plus the registration to paste here \u2014 no login required.
+ */
+export default workspace("${appName}");
+`;
+}
+function renderXanoExampleMd({ appName }) {
+  return `# Building your ${appName} backend
+
+The backend lives in [\`index.ts\`](index.ts) and is a single default-exported
+\`workspace()\`. You grow it by registering typed objects.
+
+## Learn the library from the library
+
+Everything you need is in the package itself:
+
+- \`node_modules/@xanots/sdk/llms.txt\` \u2014 the router: the mental model, the deploy contract, every gotcha, and control flow. Read it in full first; it ends with a list of topic files and the condition for opening each.
+- \`node_modules/@xanots/sdk/llms/*.md\` \u2014 one file per surface. Open the one or two whose condition matches the task; skip the rest.
+- The published TypeScript types and JSDoc (\`node_modules/@xanots/sdk/**/*.d.ts\`).
+- \`node_modules/@xanots/sdk/manifest.json\` \u2014 the exhaustive reference; grep or \`jq\` the one entry you need rather than reading it whole.
+
+Author against those signatures \u2014 don't invent an API that isn't there.
+
+## The shape
+
+\`\`\`
+xano/
+\u251C\u2500\u2500 index.ts          default export: the workspace registering everything below
+\u251C\u2500\u2500 tables/<name>.ts  a table (name, typed schema, indexes)
+\u251C\u2500\u2500 api/<group>.ts    an API group; pin its canonical slug so paths are stable
+\u2514\u2500\u2500 api/<endpoint>.ts a query: name, verb, apiGroup, typed input, a stack, a response
+\`\`\`
+
+## Steps
+
+1. **Define a table** under \`tables/\` with \`table({ name, schema: { ... } })\`.
+   \`id\` and \`created_at\` are auto-injected.
+2. **Define an API group** with \`apiGroup({ name, canonical })\`. Pinning the
+   canonical slug keeps the public path stable and lets \`getPath()\` resolve in
+   the browser bundle without a lock file.
+3. **Define endpoints** with \`query({ name, verb, apiGroup, input, ... })\`, building
+   the logic from the \`s.*\` statement helpers and the expression/column/input/
+   reference helpers.
+4. **Register everything** in \`index.ts\`:
+   \`\`\`ts
+   export default workspace("${appName}")
+     .registerTables([...])
+     .registerApiGroups([...])
+     .registerQueries([...]);
+   \`\`\`
+5. **Assert it works** \u2014 add a \`tests: [...]\` entry to a query or function
+   (named inputs plus \`expect.*\` assertions on its response), or a
+   \`workflowTest({ name, stack })\` when the behavior spans several objects.
+   They live beside the code they cover and ship with it. See "Testing" below.
+6. **Compile** with \`npm run xano:export\`, and **deploy** with
+   \`npm run xano:deploy\` (after \`xanots login\`). The first of either writes
+   \`xano/xano.lock\` \u2014 **commit it**. It pins every object's identity, so a later
+   rename renames the object instead of deleting and recreating it. See
+   "\`xano.lock\` \u2014 commit it" in the project README.
+
+## Testing
+
+Two kinds of test are authored in \`xano/\` alongside the objects they cover, and
+both run against a DEPLOYED environment:
+
+- **Unit test** \u2014 \`tests: [...]\` on a \`query\`, \`defineFunction\`, or
+  \`middleware\`. Each entry is a named set of inputs run against that object, with
+  \`expect.*\` assertions on its response. A statement's \`mock\` (keyed by test
+  NAME) makes one step return a value instead of doing its work, but only while
+  that test runs.
+- **Workflow test** \u2014 \`workflowTest({ name, stack })\`, a standalone object whose
+  stack calls others (\`s.function.call\`, \`s.api.call\`) and asserts with
+  \`s.expect.*\`. Use it for behavior that spans objects.
+
+\`expect.*\` and \`s.expect.*\` are different builders \u2014 an assertion record versus
+a workflow-test statement \u2014 and are not interchangeable.
+
+\`\`\`bash
+npm run xano:deploy    # tests run against what is deployed, so deploy first
+npm run xano:test      # runs both kinds; exits 5 if any fail
+\`\`\`
+
+\`npx xanots deploy ./xano/index.ts --test\` does both in one step, and
+\`npx xanots test list\` shows what a deployed environment carries without running
+anything. Read \`node_modules/@xanots/sdk/llms/tests.md\` before authoring either
+kind.
+
+### Event-driven objects
+
+A scheduled \`task\`, an \`mcpServer\`, and every trigger **fire normally on an
+ephemeral** \u2014 where \`deploy\` sends them \u2014 so test them by deploying and letting
+them run.
+
+## Wire the frontend
+
+In [\`../frontend/src/lib/api.ts\`](../frontend/src/lib/api.ts), derive paths and
+types from your query defs (\`getPath()\`, \`InferInput\`, \`InferResponse\`) \u2014 never
+hand-type a URL or a request body.
+
+Keep the client bundle lean (**split route metadata from stack-heavy authoring**):
+
+- \`import type\` for shapes \u2014 \`InferInput\`/\`InferResponse\` erase to nothing.
+- Import the **one lean query def** for its \`getPath()\`/\`verb\`, never \`xano/index.ts\`
+  (that pulls the whole workspace). A def's \`s.*\`/\`c.*\` stack calls run at module
+  load to build it, so they can't be tree-shaken out of the bundle.
+- A def whose stack builds a heavy graph \u2014 an agent + its tools via \`s.ai.agent.run\`
+  \u2014 drags that whole graph in. For those, don't import the def in the browser:
+  declare its \`{ path, verb }\` as plain metadata (see the \`ROUTES\` example in
+  \`api.ts\`) and verify it against the compiled bundle with
+  \`npx xanots routes xano/index.ts\`.
+`;
+}
+function describeOrigin(o) {
+  switch (o.source) {
+    case "workspace":
+      return `workspace ${o.origin}`;
+    case "ephemeral":
+      return `ephemeral "${o.origin}"`;
+    case "file":
+      return `the bundle at ${o.origin}`;
+  }
+}
+function renderCodegenMarker({ sdkVersion }, origin, generatedAt, report) {
+  return JSON.stringify(
+    {
+      source: origin.source,
+      origin: origin.origin,
+      sdkVersion,
+      generatedAt,
+      note: "Written by `xanots init --from`. Its presence lets a re-run refresh xano/ in place.",
+      // The findings, so parity is trackable release over release and gateable
+      // in CI without scraping stderr. Omitted rather than written empty when
+      // the caller has none to record.
+      ...report === void 0 ? {} : { report }
+    },
+    null,
+    2
+  ) + "\n";
+}
+function renderCodegenReadme({ appName }, origin, envNames, preset) {
+  const secrets = envNames.length === 0 ? "" : `
+## Heads up: this tree contains your workspace env var values
+
+The pull carried ${envNames.length} workspace env var${envNames.length === 1 ? "" : "s"} \u2014
+${envNames.map((n) => `\`${n}\``).join(", ")} \u2014 **with their values**, inline in
+[\`xano/index.ts\`](xano/index.ts), because that is what a deploy has to send. If any of them
+is a secret, do not commit \`xano/\` as-is: add it to \`.gitignore\`, or replace the values
+before committing.
+`;
+  return `# ${appName}
+
+A [XanoTS](https://www.npmjs.com/package/@xanots/sdk) project pulled from
+${describeOrigin(origin)}. The Xano backend lives in [\`xano/\`](xano/) as readable
+TypeScript; the ${preset.label} frontend under [\`frontend/\`](frontend/) is a starter \u2014
+the pull carries a backend, not a UI.
+
+## Deploy it
+
+\`\`\`bash
+xanots login            # once, to authenticate against your Xano account
+npm run xano:deploy     # typecheck, build the frontend, ship both
+\`\`\`
+
+## Read this before deploying
+
+- **\`xano/\` is disposable.** Re-running \`xanots init --from\` on this directory
+  rewrites it wholesale \u2014 no merge, no diff, no preservation of hand edits. The rest of
+  the project (this README, \`package.json\`, \`frontend/\`) is yours and is left alone.
+- **Deploying is a full replace.** The import path clears the target workspace and
+  re-imports. Send this only to an **ephemeral** environment \u2014 never to a
+  workspace holding data you care about. That is why \`npm run xano:deploy\` targets an
+  ephemeral env and there is no deploy-to-your-real-workspace command.
+- **This is schema only.** Table rows are not carried, and neither are payload sections
+  this SDK models no kind for. A deploy recreates the structure, not the data.
+
+[\`xano/README.md\`](xano/README.md) is the authoritative record of what did and did not
+translate cleanly on this pull. Read it before trusting the tree.
+${secrets}
+## Working on it
+
+\`\`\`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)
+npx xanots routes xano/index.ts   # list every endpoint's verb + path
+\`\`\`
+
+[\`frontend/src/lib/api.ts\`](frontend/src/lib/api.ts) shows the one contract: derive
+request paths and types from the query defs in \`xano/\` rather than hand-typing a URL.
+`;
+}
+function renderReadmeThemingSection(choice) {
+  const { theme, dark } = choice;
+  const darkNote = {
+    system: `Dark mode follows the OS. An inline script in the HTML entry sets
+\`class="dark"\` on \`<html>\` before first paint (so the page never flashes light
+first), and the \`.dark\` block in the stylesheet supplies the palette. To let
+people override it, add a control that toggles that class \u2014 or scaffold your
+next project with \`--dark toggle\`, which ships one.`,
+    toggle: `Dark mode follows the OS until the user says otherwise. The pieces:
+an inline script in the HTML entry applies the mode before first paint,
+[\`frontend/src/lib/theme.ts\`](frontend/src/lib/theme.ts) holds and persists it,
+and the mode toggle on the landing page cycles system \u2192 light \u2192 dark.`,
+    off: `This project was scaffolded with \`--dark off\`, so nothing switches
+themes. The \`.dark\` block in the stylesheet is still there and still complete \u2014
+add \`class="dark"\` to \`<html>\` to see it, and wire that to a control (or the OS
+setting) to turn it on for real.`
+  }[dark];
+  return `## Theming
+
+Scaffolded with the **${theme.label}** theme. Every color in the app comes from
+the semantic tokens at the top of
+[\`frontend/src/index.css\`](frontend/src/index.css) \u2014 \`--primary\`,
+\`--muted-foreground\`, \`--border\`, the \`--chart-*\` ramp, the \`--sidebar-*\` set \u2014
+and every shadcn component reads those names, so editing one value rebrands
+everything that uses it. Style with the token classes (\`bg-primary\`,
+\`text-muted-foreground\`) rather than raw palette classes like \`bg-gray-100\`, or
+the theme stops being one.
+
+Tailwind v4 has no \`tailwind.config.js\`; that stylesheet *is* the config.
+
+To swap the whole palette later:
+
+\`\`\`bash
+npx shadcn@latest add https://ui.shadcn.com/r/themes/stone.json   # or any registry theme
+\`\`\`
+
+${darkNote}`;
+}
+var UI_DOCS_CTA = {
+  label: "Browse UI components",
+  href: "https://ui.shadcn.com/docs/components"
+};
+function initLanding({ appName }) {
+  return {
+    title: appName,
+    lead: [
+      { text: "Your XanoTS project is ready. The backend lives in " },
+      { code: "xano/" },
+      { text: " and this frontend in " },
+      { code: "frontend/" },
+      { text: "." }
+    ],
+    steps: [
+      [
+        { text: "Author your first table + endpoint in " },
+        { code: "xano/index.ts" },
+        { text: " (see " },
+        { code: "xano/EXAMPLE.md" },
+        { text: ")." }
+      ],
+      [{ text: "Wire it into the UI from " }, { code: "frontend/src/lib/api.ts" }, { text: "." }],
+      [{ text: "Ship it: " }, { code: "npm run xano:deploy" }, { text: "." }]
+    ],
+    cta: UI_DOCS_CTA
+  };
+}
+function codegenLanding({ appName }, origin) {
+  return {
+    title: appName,
+    lead: [
+      { text: `This project was pulled from ${describeOrigin(origin)}. The backend lives in ` },
+      { code: "xano/" },
+      { text: " as readable TypeScript; this frontend is a starter." }
+    ],
+    steps: [
+      [
+        { text: "Read " },
+        { code: "xano/README.md" },
+        { text: " \u2014 what did and did not translate cleanly on the pull." }
+      ],
+      [
+        { text: "List the endpoints: " },
+        { code: "npx xanots routes xano/index.ts" },
+        { text: ", then wire them up in " },
+        { code: "frontend/src/lib/api.ts" },
+        { text: "." }
+      ],
+      [
+        { text: "Ship it: " },
+        { code: "npm run xano:deploy" },
+        { text: " (a full replace of an ephemeral env)." }
+      ]
+    ],
+    cta: UI_DOCS_CTA
+  };
+}
+function renderIndexCss(choice = defaultThemeChoice()) {
+  const { theme } = choice;
+  const colorMap = colorTokens(theme.light).map((token) => `  --color-${token}: var(--${token});`).join("\n");
+  const block = (vars) => orderedTokens(vars).map(([name, value]) => `  --${name}: ${value};`).join("\n");
+  const faces = fontImports(choice.fonts);
+  const fontVars = fontThemeVars(choice.fonts).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const headingRule = choice.fonts?.heading === void 0 ? "" : `
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }`;
+  return `${faces.length === 0 ? "" : faces.join("\n") + "\n"}@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Map the tokens below into Tailwind's theme so \`bg-primary\` and friends
+   resolve. Tailwind v4 does this in CSS; there is no tailwind.config.js. */
+@theme inline {
+${colorMap}
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);${fontVars === "" ? "" : `
+${fontVars}`}
+}
+
+/* Theme: ${theme.label}. Rebrand here \u2014 these are the only colors the
+   components know about. Swap the whole palette for another shadcn theme with
+   \`npx shadcn@latest add <registry-theme-url>\`, or scaffold a different one
+   next time with \`xanots init --theme <base>-<accent>\`. */
+:root {
+${block(theme.light)}
+}
+
+${darkBlockComment(choice.dark)}
+.dark {
+${block(theme.dark)}
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }${headingRule}
+}
+`;
+}
+function darkBlockComment(dark) {
+  switch (dark) {
+    case "system":
+      return `/* Applied by the inline script in index.html, which follows the OS setting.
+   Add a control that toggles this class to let the user override it. */`;
+    case "toggle":
+      return `/* Applied by frontend/src/lib/theme.ts \u2014 the OS setting by default, and the
+   user's choice once they use the mode toggle. */`;
+    case "off":
+      return `/* Applied by adding \`class="dark"\` to <html> \u2014 wire that to a toggle if you
+   want one; this scaffold was created with --dark off, so nothing does yet. */`;
+  }
+}
+function renderThemeScript(dark) {
+  if (dark === "off") return "";
+  const resolve = dark === "toggle" ? `var stored = localStorage.getItem("theme");
+          var dark = stored === "dark" || (stored !== "light" && media.matches);` : `var dark = media.matches;`;
+  return `    <script>
+      // Sets the \`dark\` class before first paint, so the page never flashes
+      // light before switching. Keep this inline and above the stylesheet.
+      (function () {
+        try {
+          var media = window.matchMedia("(prefers-color-scheme: dark)");
+          ${resolve}
+          document.documentElement.classList.toggle("dark", dark);
+        } catch (e) {}
+      })();
+    </script>
+`;
+}
+function renderThemeModule() {
+  return `/**
+ * Color mode, persisted. The inline script in index.html applies the stored
+ * value before first paint; this module is what changes it afterwards.
+ *
+ * "system" means no stored preference \u2014 the OS decides, and keeps deciding if
+ * the user changes it while the page is open.
+ */
+export type Mode = "light" | "dark" | "system";
+
+const KEY = "theme";
+
+const prefersDark = () =>
+  window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+/** The stored preference, or "system" when there is none. */
+export function getMode(): Mode {
+  const stored = localStorage.getItem(KEY);
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+
+/** Whether \`mode\` renders dark right now. */
+export function isDark(mode: Mode): boolean {
+  return mode === "dark" || (mode === "system" && prefersDark());
+}
+
+/** Persist a mode and apply it. "system" clears the stored override. */
+export function setMode(mode: Mode): void {
+  if (mode === "system") localStorage.removeItem(KEY);
+  else localStorage.setItem(KEY, mode);
+  document.documentElement.classList.toggle("dark", isDark(mode));
+}
+
+/**
+ * Re-apply on OS changes, and on changes made in another tab. Returns an
+ * unsubscribe function \u2014 call it from your framework's cleanup hook.
+ *
+ * The OS listener re-reads the mode rather than closing over it, so it stays
+ * correct after the user picks an explicit light/dark and then goes back to
+ * system.
+ */
+export function watchMode(onChange: (mode: Mode) => void): () => void {
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const apply = () => {
+    const mode = getMode();
+    document.documentElement.classList.toggle("dark", isDark(mode));
+    onChange(mode);
+  };
+  media.addEventListener("change", apply);
+  window.addEventListener("storage", apply);
+  return () => {
+    media.removeEventListener("change", apply);
+    window.removeEventListener("storage", apply);
+  };
+}
+`;
+}
+function renderCnUtil(extra = "") {
+  return `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+${extra}`;
+}
+function renderApiTs() {
+  return `// The one contract: derive paths and request/response *types* from your xanots
+// query defs. Never hand-type a URL or a request body \u2014 change a def and
+// everything here follows.
+//
+// Keep the client bundle lean (the split-route-metadata rule):
+//   \u2022 \`import type\` for shapes \u2014 InferInput/InferResponse erase to nothing.
+//   \u2022 Import the ONE lean query def module for its getPath()/verb \u2014 never
+//     ../../../xano/index.js (that pulls the whole workspace) and never a def
+//     whose stack builds a heavy graph (an agent + its tools via s.ai.agent.run):
+//     those s.*/c.* factory calls run at module load and can't be tree-shaken out.
+//   \u2022 For such a stack-heavy endpoint, don't import its def in the browser at all \u2014
+//     declare its { path, verb } in the ROUTES table below and verify it against
+//     the compiled bundle with \`npx xanots routes xano/index.ts\`.
+//
+// This starter has no endpoints yet. Once you add one in xano/, wire it like:
+//
+//   // Types are free \u2014 always import them type-only.
+//   import type { InferInput, InferResponse } from "@xanots/sdk";
+//   import type { createNoteQuery } from "../../../xano/api/create-note.js";
+//
+//   // Runtime path/verb: import the lean def value, OR (for a stack-heavy def)
+//   // read it from ROUTES so the def never enters the bundle.
+//   import { createNoteQuery } from "../../../xano/api/create-note.js";
+//
+//   export type CreateNoteBody = InferInput<typeof createNoteQuery>;
+//   export type Note = InferResponse<typeof createNoteQuery>;
+//
+//   export async function createNote(body: CreateNoteBody): Promise<Note> {
+//     const res = await fetch(XANO_HOST + createNoteQuery.getPath(), {
+//       method: createNoteQuery.verb,
+//       headers: { "content-type": "application/json" },
+//       body: JSON.stringify(body),
+//     });
+//     if (!res.ok) throw new Error(await res.text());
+//     return res.json();
+//   }
+//
+// The stack-heavy escape hatch \u2014 plain metadata, no def import, no bundle cost.
+// Keep it in sync with \`npx xanots routes xano/index.ts\` (it prints verb + path):
+//
+//   export const ROUTES = {
+//     triageRequest: { path: "/api:notes/triage_request", verb: "POST" },
+//   } as const;
+
+/**
+ * The deployed Xano backend's base URL. Injected as \`window.XANO_HOST\` by
+ * \`xanots deploy <entry> --static <dir>\`, or read from \`VITE_XANO_HOST\` in dev.
+ * Empty string when neither is set (the UI runs with no backend).
+ */
+export const XANO_HOST: string =
+  (typeof window !== "undefined" && (window as { XANO_HOST?: string }).XANO_HOST) ||
+  import.meta.env.VITE_XANO_HOST ||
+  "";
+`;
+}
+
 // src/emit/frontend-react.ts
 var CODE_CLASS = "bg-muted rounded px-1.5 py-0.5 font-mono text-sm";
 function jsxText(s) {
@@ -1997,6 +2846,834 @@ Colors come from the theme tokens in
   }
 };
 
+// src/emit/frontend-svelte.ts
+var CODE_CLASS2 = "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 renderNode2(node) {
+  return "code" in node ? `<code class="${CODE_CLASS2}">${svelteText(node.code)}</code>` : svelteText(node.text);
+}
+function renderNodes2(nodes) {
+  return nodes.map(renderNode2).join("");
+}
+function renderApp2(landing, choice) {
+  const steps = landing.steps.map((step) => `        <li>${renderNodes2(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">
+        ${renderNodes2(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.
+    //
+    // NO \`fallback\`. It looks harmless \u2014 it used to be how every URL got served
+    // \u2014 but adapter-static writes the fallback shell AT index.html, overwriting
+    // the prerendered home page with an empty document. Measured on a real
+    // build: 1936 bytes of empty shell instead of 4920 bytes of rendered page,
+    // on the most-visited route in the app.
+    //
+    // Dropping it also gets the better failure. With no fallback, adapter-static
+    // is \`strict\` by default, so a route it cannot prerender (a dynamic \`[id]\`
+    // with no \`entries\`) FAILS THE BUILD with a message naming the route \u2014
+    // instead of shipping and 404ing for real users.
+    //
+    // \`xanots deploy --static-env\` still finds its anchor: every prerendered
+    // route renders from app.html, so each document has a <head> and each one
+    // gets the injected globals.
+    adapter: adapter({
+      pages: "frontend/dist",
+      assets: "frontend/dist",
+      precompress: false,
+    }),
+    // 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>: \`xanots 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";
+
+  /** 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\` 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.
+// That is deliberate \u2014 better than shipping a page that 404s for real users.
+// Give it entries, in that route's +page.ts:
+//
+//   export const entries = () => [{ id: "1" }, { id: "2" }];
+//
+// 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} />
+`;
+}
+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 renderComponentsJson2(choice) {
+  const config = {
+    $schema: "https://shadcn-svelte.com/schema.json",
+    tailwind: {
+      // v4 has no config file; the theme lives in the stylesheet — the same
+      // shared one the React preset points at.
+      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"
+    },
+    aliases: {
+      components: "$lib/components",
+      utils: "$lib/utils",
+      ui: "$lib/components/ui",
+      hooks: "$lib/hooks",
+      lib: "$lib"
+    },
+    typescript: true,
+    registry: "https://shadcn-svelte.com/registry"
+  };
+  return JSON.stringify(config, null, 2) + "\n";
+}
+function renderButtonSvelte() {
+  return `<script lang="ts" module>
+  import { type VariantProps, tv } from "tailwind-variants";
+
+  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",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "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",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-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",
+      },
+    },
+    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 renderButtonIndex() {
+  return `export {
+  default as Button,
+  buttonVariants,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./button.svelte";
+`;
+}
+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";
+
+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,
+};
+`;
+}
+var sveltePreset = {
+  id: "svelte",
+  label: "SvelteKit",
+  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 `cn()` exactly as in the React preset. Pre-installed
+    // so `npx shadcn-svelte@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"
+  },
+  devDependencies: {
+    // Writes the static bundle `deploy --static` ships. Peer-depends on kit ^2.
+    "@sveltejs/adapter-static": "^3.0.10",
+    // 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",
+    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.
+    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 },
+  viteImports: [
+    `import { sveltekit } from "@sveltejs/kit/vite";`,
+    `import adapter from "@sveltejs/adapter-static";`,
+    `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";
+    return [
+      { path: "components.json", content: renderComponentsJson2(choice) },
+      { path: "frontend/src/app.html", content: renderAppHtml(vars, choice) },
+      // Only for `--dark toggle` — see the React preset's note.
+      ...choice.dark === "toggle" ? [
+        {
+          path: "frontend/src/lib/components/mode-toggle.svelte",
+          content: renderModeToggleSvelte(iconLibraryOf(choice.icons).svelte)
+        }
+      ] : [],
+      { 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: renderApp2(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() }
+    ];
+  },
+  iconBinding(id) {
+    return iconLibraryOf(id).svelte;
+  },
+  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\` 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 needs \`entries\`, or the build fails.** A route like
+\`/posts/[id]\` cannot be prerendered unless the build knows which ids exist, so
+the build stops and names it \u2014 deliberately, rather than shipping a page that
+404s for real users:
+
+\`\`\`ts
+// frontend/src/routes/posts/[id]/+page.ts
+export const entries = () => [{ id: "1" }, { id: "2" }];
+\`\`\`
+
+[\`frontend/src/routes/404/+page.svelte\`](frontend/src/routes/404/+page.svelte)
+prerenders to \`404.html\`, 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,
+so that alone would ship no \`404.html\` at all.
+
+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:
+
+\`\`\`bash
+npx shadcn-svelte@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}
+
+\`\`\`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.
+
+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.`;
+  },
+  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 needs \`entries\`, or the build fails.** \`/posts/[id]\`
+    cannot be prerendered unless the build knows which ids exist, so the build
+    stops and names the route. Export
+    \`const entries = () => [{ id: "1" }, { id: "2" }]\` from that route's
+    \`+page.ts\`. This is the single most likely thing to catch you out when
+    adding a detail page \u2014 and it is a build error, not a runtime surprise, so
+    you will see it immediately.
+  - \`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\`.
+  - Do NOT add \`fallback\` to the adapter config. It writes an empty shell over
+    the prerendered home page, and it turns the un-prerenderable-route build
+    error into a silent runtime 404.
+  - 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.`;
+  }
+};
+
+// 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 {
   BASE_TOKENS,
   ACCENT_TOKENS,
@@ -2039,6 +3716,30 @@ export {
   defaultIconLibrary,
   resolveIconsFlag,
   iconLibraryOf,
-  reactPreset
+  reactPreset,
+  sdkDep,
+  renderPackageJson,
+  renderTsconfig,
+  renderViteConfig,
+  renderIndexHtml,
+  renderGitignore,
+  renderEnvExample,
+  renderReadme,
+  renderXanoIndex,
+  renderXanoExampleMd,
+  describeOrigin,
+  renderCodegenMarker,
+  renderCodegenReadme,
+  initLanding,
+  codegenLanding,
+  renderIndexCss,
+  renderThemeModule,
+  renderCnUtil,
+  renderApiTs,
+  FRAMEWORKS,
+  DEFAULT_FRAMEWORK,
+  findFrontendPreset,
+  allFrontendPresets,
+  resolveFrameworkFlag
 };
-//# sourceMappingURL=chunk-Q77KNEUL.js.map
+//# sourceMappingURL=chunk-RQNMTDXD.js.map