@xanots/sdk 0.0.2 → 0.0.3-beta.0

package/README.md

@@ -102,8 +102,17 @@ npx @xanots/sdk init my-app && cd my-app
 npm run dev                       # the frontend runs immediately
 ```
 
+In a terminal it asks three questions — framework, theme, AI instruction files — each with a
+default. The theme is shadcn's own: a base color plus an optional accent, rendered into the
+token stylesheet, with a complete dark palette either way.
+
+```bash
+npx @xanots/sdk init my-app --theme zinc-blue --dark toggle
+npx @xanots/sdk init my-app --theme https://ui.shadcn.com/r/themes/slate.json   # or any registry theme
+```
+
 The starter backend is empty but already compiles and deploys — grow it from the walkthrough
-in `xano/EXAMPLE.md`. For the flags, the two presets, and add-ons, see
+in `xano/EXAMPLE.md`. For the flags, the two presets, theming, and add-ons, see
 [The scaffolded project](https://github.com/xanots/sdk/blob/main/guides/scaffold.md).
 
 **3. Build the frontend.**

package/dist/.build-fingerprint

@@ -1 +1 @@
-c55e4f9d5b84cbeb62826b396d7824e3302e42e404c14866421d7e54d035853c
+f76d4016cad82dc8dd5a4715fbed070d613d1f69be8bda57ea3ca194658c21dd

package/dist/{agent-file-refresh-7XCACU34.js → agent-file-refresh-J3KY54E5.js}

@@ -5,8 +5,9 @@ import {
   presetFilePath,
   renderPreset,
   upsertManagedBlock
-} from "./chunk-VKFQJEMW.js";
+} from "./chunk-WRYT2PAX.js";
 import "./chunk-47WDWMBJ.js";
+import "./chunk-6DHJVLYP.js";
 import {
   warn
 } from "./chunk-EZG76F7R.js";
@@ -92,4 +93,4 @@ export {
   isCI,
   refreshAgentFiles
 };
-//# sourceMappingURL=agent-file-refresh-7XCACU34.js.map
+//# sourceMappingURL=agent-file-refresh-J3KY54E5.js.map

package/dist/bin.js

@@ -2,11 +2,12 @@
 import {
   readVersion,
   run
-} from "./chunk-UVLVQWWF.js";
+} from "./chunk-VVXPK6SE.js";
 import {
   exitCodeOf,
   reportFailure
-} from "./chunk-IZW6MK3U.js";
+} from "./chunk-FY6LXRR6.js";
+import "./chunk-HJPTWBLH.js";
 import {
   blank,
   clearProgress,
@@ -15,15 +16,14 @@ import {
   style,
   warn
 } from "./chunk-EZG76F7R.js";
+import {
+  atomicWrite
+} from "./chunk-GNPVYOPB.js";
 import "./chunk-55VHDNW5.js";
-import "./chunk-YYRDLFSJ.js";
+import "./chunk-QO4I5OYF.js";
 import "./chunk-5L4X5LS6.js";
 import "./chunk-WHOJWOSV.js";
 import "./chunk-5XZ744TS.js";
-import "./chunk-HJPTWBLH.js";
-import {
-  atomicWrite
-} from "./chunk-GNPVYOPB.js";
 import "./chunk-4HT3BNZ7.js";
 
 // src/emit/update-check.ts

package/dist/chunk-4HKZH6YK.js

@@ -0,0 +1,307 @@
+import {
+  presetFilePath,
+  resolveAiPresets,
+  scaffoldProject
+} from "./chunk-WRYT2PAX.js";
+import {
+  DEFAULT_FRAMEWORK,
+  allFrontendPresets,
+  findFrontendPreset,
+  initLanding,
+  renderApiTs,
+  renderCnUtil,
+  renderEnvExample,
+  renderGitignore,
+  renderIndexCss,
+  renderIndexHtml,
+  renderPackageJson,
+  renderReadme,
+  renderThemeModule,
+  renderTsconfig,
+  renderViteConfig,
+  renderXanoExampleMd,
+  renderXanoIndex,
+  resolveFrameworkFlag
+} from "./chunk-YZ4GU6F5.js";
+import {
+  DEFAULT_DARK_MODE,
+  curatedThemes,
+  defaultTheme,
+  defaultThemeChoice,
+  normalizeRadius,
+  resolveDarkModeFlag,
+  resolveFontFlag,
+  resolveIconsFlag,
+  resolveThemeFlag,
+  themeFromRegistryItem,
+  themeSwatch,
+  withRadius
+} from "./chunk-6DHJVLYP.js";
+import {
+  readVersion
+} from "./chunk-VVXPK6SE.js";
+import {
+  blank,
+  detail,
+  info,
+  step,
+  style,
+  success
+} from "./chunk-EZG76F7R.js";
+
+// src/emit/init-command.ts
+import { basename, resolve } from "path";
+
+// src/emit/frontend-resolve.ts
+import { createInterface } from "readline/promises";
+function defaultFrontendPreset() {
+  const preset = findFrontendPreset(DEFAULT_FRAMEWORK);
+  if (preset === void 0) {
+    throw new Error(`Default frontend preset "${DEFAULT_FRAMEWORK}" is missing from the table.`);
+  }
+  return preset;
+}
+async function promptFramework() {
+  const presets = allFrontendPresets();
+  const rl = createInterface({ input: process.stdin, output: process.stderr });
+  try {
+    process.stderr.write(
+      `
+Which frontend framework?
+` + presets.map((p, i) => `  ${i + 1}) ${p.label}${p.id === DEFAULT_FRAMEWORK ? " (default)" : ""}`).join("\n") + `
+`
+    );
+    const answer = await rl.question(`Enter a number or name, or leave blank for the default: `);
+    const token = answer.trim().toLowerCase();
+    if (token === "") return defaultFrontendPreset();
+    const byIndex = Number.parseInt(token, 10);
+    if (Number.isInteger(byIndex) && byIndex >= 1 && byIndex <= presets.length) {
+      return presets[byIndex - 1];
+    }
+    return findFrontendPreset(token) ?? defaultFrontendPreset();
+  } finally {
+    rl.close();
+  }
+}
+async function resolveFrontendPreset(flag) {
+  if (flag !== void 0 && flag !== "") return resolveFrameworkFlag(flag);
+  if (process.stdin.isTTY && process.stderr.isTTY) return promptFramework();
+  return defaultFrontendPreset();
+}
+
+// src/emit/theme-resolve.ts
+import { createInterface as createInterface2 } from "readline/promises";
+import { readFileSync } from "fs";
+import { resolve as resolvePath } from "path";
+function isRegistryRef(value) {
+  return /^https?:\/\//i.test(value) || value.toLowerCase().endsWith(".json");
+}
+async function loadRegistryTheme(ref) {
+  if (/^https?:\/\//i.test(ref)) {
+    let res;
+    try {
+      res = await fetch(ref, { headers: { accept: "application/json" } });
+    } catch (err) {
+      throw new Error(
+        `Could not fetch the theme at ${ref}: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+    if (!res.ok) throw new Error(`Could not fetch the theme at ${ref}: ${res.status} ${res.statusText}`);
+    const text2 = await res.text();
+    return themeFromRegistryItem(parseJson(text2, ref), ref);
+  }
+  const path = resolvePath(ref);
+  let text;
+  try {
+    text = readFileSync(path, "utf8");
+  } catch (err) {
+    throw new Error(
+      `Could not read the theme file ${path}: ${err instanceof Error ? err.message : String(err)}`
+    );
+  }
+  return themeFromRegistryItem(parseJson(text, path), path);
+}
+function parseJson(text, source) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new Error(`${source} is not valid JSON \u2014 a registry theme is a JSON registry item.`);
+  }
+}
+async function themeFromFlag(raw) {
+  return isRegistryRef(raw.trim()) ? loadRegistryTheme(raw.trim()) : resolveThemeFlag(raw);
+}
+function swatch(theme, color) {
+  if (!color) return "";
+  const blocks = themeSwatch(theme).map(({ r, g, b }) => `\x1B[38;2;${r};${g};${b}m\u2588\x1B[0m`).join("");
+  return blocks === "" ? "" : `${blocks} `;
+}
+function colorEnabled() {
+  if (process.env.FORCE_COLOR) return process.env.FORCE_COLOR !== "0";
+  return !process.env.NO_COLOR && process.stderr.isTTY === true;
+}
+async function promptTheme() {
+  const themes = curatedThemes();
+  const color = colorEnabled();
+  const rl = createInterface2({ input: process.stdin, output: process.stderr });
+  try {
+    process.stderr.write(
+      `
+Which theme? (shadcn/ui color tokens \u2014 everything else is identical)
+` + themes.map((t, i) => `  ${i + 1}) ${swatch(t, color)}${t.label}${i === 0 ? " (default)" : ""}`).join("\n") + `
+${style.dim(
+        `  \u2026or any <base>-<accent> pair, or a registry theme URL. See \`xanots init --help\`.`
+      )}
+`
+    );
+    for (; ; ) {
+      const answer = (await rl.question(`Enter a number, a theme, or leave blank for the default: `)).trim();
+      if (answer === "") return defaultTheme();
+      const byIndex = Number.parseInt(answer, 10);
+      if (Number.isInteger(byIndex) && byIndex >= 1 && byIndex <= themes.length) {
+        return themes[byIndex - 1];
+      }
+      if (!isRegistryRef(answer)) {
+        try {
+          return resolveThemeFlag(answer);
+        } catch {
+          return defaultTheme();
+        }
+      }
+      try {
+        return await loadRegistryTheme(answer);
+      } catch (err) {
+        process.stderr.write(`${style.yellow("!")} ${err instanceof Error ? err.message : String(err)}
+`);
+      }
+    }
+  } finally {
+    rl.close();
+  }
+}
+async function resolveThemeChoice(args) {
+  const dark = args.dark === void 0 || args.dark === "" ? DEFAULT_DARK_MODE : resolveDarkModeFlag(args.dark);
+  const fonts = {
+    ...args.font !== void 0 && args.font !== "" ? { sans: resolveFontFlag(args.font, "sans") } : {},
+    ...args.fontMono !== void 0 && args.fontMono !== "" ? { mono: resolveFontFlag(args.fontMono, "mono") } : {},
+    ...args.fontHeading !== void 0 && args.fontHeading !== "" ? { heading: resolveFontFlag(args.fontHeading, "heading") } : {}
+  };
+  const icons = args.icons === void 0 || args.icons === "" ? void 0 : resolveIconsFlag(args.icons).id;
+  let theme;
+  if (args.theme !== void 0 && args.theme !== "") {
+    theme = await themeFromFlag(args.theme);
+  } else if (process.stdin.isTTY && process.stderr.isTTY) {
+    theme = await promptTheme();
+  } else {
+    theme = defaultThemeChoice().theme;
+  }
+  if (args.radius !== void 0 && args.radius !== "") {
+    theme = withRadius(theme, normalizeRadius(args.radius));
+  }
+  return {
+    theme,
+    dark,
+    ...Object.keys(fonts).length === 0 ? {} : { fonts },
+    ...icons === void 0 ? {} : { icons }
+  };
+}
+
+// src/emit/init-command.ts
+function sanitizeAppName(raw) {
+  const name = raw.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return name === "" ? "app" : name;
+}
+function projectShellFiles(vars, preset, parts, choice = defaultThemeChoice()) {
+  return [
+    { path: "package.json", content: renderPackageJson(vars, preset, choice) },
+    { path: "tsconfig.json", content: renderTsconfig(preset) },
+    { path: "vite.config.ts", content: renderViteConfig(preset) },
+    { path: ".gitignore", content: renderGitignore(preset) },
+    { path: ".env.example", content: renderEnvExample() },
+    { path: "README.md", content: parts.readme },
+    // Skipped when the framework supplies its own entry document — see
+    // FrontendPreset.ownsHtmlEntry. A second index.html beside SvelteKit's
+    // app.html would never be served and would still read as the entry point.
+    ...preset.ownsHtmlEntry === true ? [] : [{ path: "frontend/index.html", content: renderIndexHtml(vars, preset, choice) }],
+    // Shared across every framework: both UI kits resolve against the same
+    // Tailwind v4 semantic tokens, back `cn()` with clsx + tailwind-merge, and
+    // look for library code at frontend/src/lib/. Only the alias NAME pointing
+    // at that directory differs, and the preset owns that.
+    { path: "frontend/src/index.css", content: renderIndexCss(choice) },
+    { path: "frontend/src/lib/api.ts", content: renderApiTs() },
+    { path: "frontend/src/lib/utils.ts", content: renderCnUtil(preset.libUtilsExtra) },
+    // The mode store behind `--dark toggle`, shared by both presets' toggles —
+    // it is plain DOM and localStorage, with nothing framework-shaped in it.
+    // `system` and `off` need no state, so nothing is written for them.
+    ...choice.dark === "toggle" ? [{ path: "frontend/src/lib/theme.ts", content: renderThemeModule() }] : [],
+    // The framework's own half: entry module, app component, vendored UI kit,
+    // and whatever tool config that kit's CLI reads.
+    ...preset.files(vars, parts.landing, choice)
+  ];
+}
+function buildFileSet(vars, preset, choice) {
+  return [
+    ...projectShellFiles(
+      vars,
+      preset,
+      { readme: renderReadme(vars, preset, choice), landing: initLanding(vars) },
+      choice
+    ),
+    { path: "xano/index.ts", content: renderXanoIndex(vars) },
+    { path: "xano/EXAMPLE.md", content: renderXanoExampleMd(vars) }
+  ];
+}
+async function runInitCommand(args) {
+  const targetArg = args.positionals[0] ?? ".";
+  const targetDir = resolve(targetArg);
+  const appName = sanitizeAppName(args.name ?? basename(targetDir));
+  const preset = await resolveFrontendPreset(args.framework);
+  const choice = await resolveThemeChoice(args);
+  const presets = await resolveAiPresets(args.ai);
+  const vars = { appName, sdkVersion: readVersion() };
+  step(
+    `Scaffolding ${style.bold(appName)} (${preset.label}, ${choice.theme.label}) in ${targetDir}`
+  );
+  const result = await scaffoldProject({
+    targetDir,
+    files: buildFileSet(vars, preset, choice),
+    presets,
+    appName,
+    force: args.force,
+    noInstall: args.noInstall,
+    // An `init` project's `xano/` is hand-authored, never machine-written: it is
+    // not refreshable, and `--force` must not clear it.
+    regenerable: false,
+    sdkVersion: readVersion(),
+    frontend: preset,
+    theme: choice
+  });
+  info(`Theme: ${choice.theme.label} \u2014 dark mode: ${choice.dark}`);
+  if (presets.length > 0) {
+    info(`AI instructions: ${presets.map(presetFilePath).join(", ")}`);
+  }
+  blank();
+  success("Project ready.");
+  const cdHint = targetDir === process.cwd() ? "" : `  cd ${targetArg}
+`;
+  detail(
+    `Next steps:
+` + cdHint + (result.install === "installed" ? `` : `  npm install
+`) + `  npm run dev            # run the frontend
+  xanots login           # authenticate with Xano
+  npm run xano:deploy    # build the frontend, then deploy \u2192 live ephemeral URL
+
+The first export or deploy writes xano/xano.lock \u2014 commit it. It pins each
+object's identity, so renaming one later renames it instead of deleting and
+recreating it. See "xano.lock \u2014 commit it" in the README.`
+  );
+}
+
+export {
+  resolveFrontendPreset,
+  resolveThemeChoice,
+  sanitizeAppName,
+  projectShellFiles,
+  runInitCommand
+};
+//# sourceMappingURL=chunk-4HKZH6YK.js.map