inai-react-components 1.6.2 → 2.0.1

package/dist/commands/add.d.ts

@@ -1,4 +1,4 @@
-import { type RegistryComponent, type ComponentsJsonFile } from "./status.js";
+import { type RegistryComponent, type RegistryJson, type RegistryTheme, type ComponentsJsonFile } from "./status.js";
 export interface AddOptions {
     /** Overwrite existing files without prompting. */
     force?: boolean;
@@ -53,6 +53,12 @@ export declare function findInRegistry(registry: {
     blocks: RegistryComponent[];
     templates: RegistryComponent[];
 }, name: string, prefix: string | null): RegistryComponent | null;
+/**
+ * Find a theme in the registry by name. Themes live in a separate list
+ * from components because they are plain CSS files — no hook deps, no
+ * snapshot pipeline, no import rewriting.
+ */
+export declare function findThemeInRegistry(registry: RegistryJson, name: string): RegistryTheme | null;
 /**
  * Determine the target directory for a component based on its type and the
  * project's aliases + layout from `components.json`.

package/dist/commands/add.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EAEtB,KAAK,kBAAkB,EAExB,MAAM,aAAa,CAAC;AA0BrB,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd,CAsCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE;IAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAAE,EAC1G,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,iBAAiB,GAAG,IAAI,CAc1B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,iBAAiB,EAC5B,cAAc,EAAE,kBAAkB,GACjC,MAAM,CAiBR;AAgRD,wBAAsB,MAAM,CAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,UAAe,GACvB,OAAO,CAAC,SAAS,CAAC,CAmMpB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,UAAU,CAC9B,aAAa,CAAC,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAqIf"}
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,kBAAkB,EAExB,MAAM,aAAa,CAAC;AA0BrB,MAAM,WAAW,UAAU;IACzB,kDAAkD;IAClD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACjD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAChD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd,CAyCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE;IAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAAE,EAC1G,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,iBAAiB,GAAG,IAAI,CAc1B;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,MAAM,GACX,aAAa,GAAG,IAAI,CAGtB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,iBAAiB,EAC5B,cAAc,EAAE,kBAAkB,GACjC,MAAM,CAiBR;AAsYD,wBAAsB,MAAM,CAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,UAAe,GACvB,OAAO,CAAC,SAAS,CAAC,CA0NpB;AAqCD,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACnD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAsB,UAAU,CAC9B,aAAa,CAAC,EAAE,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,OAAO,CAAC,IAAI,CAAC,CAqIf"}

package/dist/commands/add.js

@@ -46,6 +46,10 @@ export function parseComponentSpec(spec) {
         prefix = "template";
         name = rest.slice(9).trim();
     }
+    else if (rest.startsWith("theme/")) {
+        prefix = "theme";
+        name = rest.slice(6).trim();
+    }
     else {
         name = rest;
     }
@@ -75,6 +79,16 @@ export function findInRegistry(registry, name, prefix) {
     ];
     return allItems.find((c) => c.name === name) ?? null;
 }
+/**
+ * Find a theme in the registry by name. Themes live in a separate list
+ * from components because they are plain CSS files — no hook deps, no
+ * snapshot pipeline, no import rewriting.
+ */
+export function findThemeInRegistry(registry, name) {
+    if (!registry.themes)
+        return null;
+    return registry.themes.find((t) => t.name === name) ?? null;
+}
 /**
  * Determine the target directory for a component based on its type and the
  * project's aliases + layout from `components.json`.
@@ -243,6 +257,10 @@ async function installOne(component, registry, componentsJson, registryDir, root
             depFileName = `${depBase}.tsx`;
         }
         else {
+            // A registry-declared internalDep is missing on disk. Skipping it
+            // silently produces a runtime ReferenceError in the consumer's app
+            // (the copied component still imports the dep). Surface it.
+            console.warn(chalk.yellow(`  ⚠ internalDep "${dep}" declared by "${component.name}" was not found in registry source (expected .ts or .tsx at packages/ui/src/${dep}). The copied component may have a broken import.`));
             continue;
         }
         // e.g. libDir = "src/lib" → target: "src/lib/i18n-context.tsx"
@@ -339,6 +357,96 @@ async function installOne(component, registry, componentsJson, registryDir, root
         skipped: skippedFiles,
     };
 }
+/**
+ * Install a single theme preset (plain CSS file). Themes bypass the
+ * component pipeline entirely — no hook deps, no snapshot, no import
+ * rewriting. The destination directory is derived from the user's
+ * components.json aliases, defaulting to `<sourceRoot>/styles/themes/`.
+ */
+async function installTheme(theme, componentsJson, registryDir, rootDir, options) {
+    const name = theme.name;
+    // Destination: `<sourceRoot>/styles/themes/` by convention. The v2.0
+    // `components.json` schema doesn't yet expose `aliases.themes` — when
+    // it eventually does, read it here. For now use the source root.
+    const sourceRoot = getSourceRoot(componentsJson);
+    const themesDir = `${sourceRoot}/styles/themes`;
+    const copiedFiles = [];
+    const skippedFiles = [];
+    for (const filePath of theme.files) {
+        const registryFilePath = path.join(registryDir, filePath);
+        if (!fs.existsSync(registryFilePath)) {
+            continue;
+        }
+        const destRel = path.basename(filePath); // e.g. "ultimate.css"
+        const localFilePath = path.join(rootDir, themesDir, destRel);
+        const displayName = `${name}/${destRel}`;
+        const exists = fs.existsSync(localFilePath);
+        if (exists && !options.force) {
+            if (options.skipExisting) {
+                skippedFiles.push(displayName);
+                continue;
+            }
+            if (options.dryRun) {
+                // would-overwrite
+            }
+            else if (process.stdin.isTTY) {
+                const res = await prompts({
+                    type: "confirm",
+                    name: "overwrite",
+                    message: `Theme file "${path.relative(rootDir, localFilePath)}" already exists. Overwrite?`,
+                    initial: false,
+                });
+                if (!res.overwrite) {
+                    skippedFiles.push(displayName);
+                    continue;
+                }
+            }
+            else {
+                throw new Error(`Theme file "${path.relative(rootDir, localFilePath)}" already exists. Use --force or --skip-existing.`);
+            }
+        }
+        const content = fs.readFileSync(registryFilePath, "utf-8");
+        if (options.dryRun) {
+            console.log(chalk.dim(`  [dry-run] would write ${path.relative(rootDir, localFilePath)}`));
+        }
+        else {
+            fs.mkdirSync(path.dirname(localFilePath), { recursive: true });
+            fs.writeFileSync(localFilePath, content);
+        }
+        copiedFiles.push(displayName);
+    }
+    // Track as "installedComponents" so `status` / `list` / `update` can
+    // still find it — the shape is compatible and avoids a parallel store.
+    if (!options.dryRun) {
+        const installed = componentsJson.installedComponents ?? [];
+        const existingIdx = installed.findIndex((c) => c.name === `theme/${name}`);
+        const entry = {
+            name: `theme/${name}`,
+            version: "2.0.0",
+            installedAt: new Date().toISOString().split("T")[0],
+        };
+        if (existingIdx >= 0) {
+            installed[existingIdx] = entry;
+        }
+        else {
+            installed.push(entry);
+        }
+        componentsJson.installedComponents = installed;
+        const componentsJsonPath = path.join(rootDir, "components.json");
+        fs.writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2) + "\n");
+    }
+    const relThemesDir = themesDir;
+    const importHint = `@import "./${relThemesDir}/${name}.css";`;
+    return {
+        added: true,
+        message: `Theme "${name}" installed to ${relThemesDir}/. ` +
+            `Add to your main stylesheet: ${importHint}`,
+        files: copiedFiles,
+        npmDeps: [],
+        internalDeps: [],
+        skipped: skippedFiles,
+    };
+}
 export async function runAdd(componentSpec, rootDir, options = {}) {
     const componentsJson = readComponentsJson(rootDir);
     if (!componentsJson) {
@@ -424,6 +532,27 @@ export async function runAdd(componentSpec, rootDir, options = {}) {
             internalDeps: [],
         };
     }
+    // ─── Theme install fast path ─────────────────────────────────────
+    // Themes bypass the component dependency graph entirely — they are
+    // plain CSS files with no hooks, no registryDependencies and no
+    // transformation pipeline. Handle them first when the spec uses the
+    // `theme/` prefix or when a theme with this name exists in the registry.
+    if (prefix === "theme") {
+        const theme = findThemeInRegistry(registry, name);
+        if (!theme) {
+            const themeNames = registry.themes?.map((t) => t.name) ?? [];
+            const suggestions = fuzzySearchNames(name, themeNames, 0.4).slice(0, 5);
+            return {
+                added: false,
+                message: `Theme "${name}" not found in registry.`,
+                files: [],
+                npmDeps: [],
+                internalDeps: [],
+                suggestions,
+            };
+        }
+        return installTheme(theme, componentsJson, registryDir, rootDir, options);
+    }
     const component = findInRegistry(registry, name, prefix);
     if (!component) {
         const label = prefix ? `${prefix}/${name}` : name;
@@ -432,6 +561,7 @@ export async function runAdd(componentSpec, rootDir, options = {}) {
             ...registry.components.map((c) => c.name),
             ...registry.blocks.map((c) => c.name),
             ...registry.templates.map((c) => c.name),
+            ...(registry.themes?.map((t) => `theme/${t.name}`) ?? []),
         ];
         const suggestions = fuzzySearchNames(name, allNames, 0.4).slice(0, 5);
         return {

package/dist/commands/demo.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `inai-ui demo start` — launches the docs dev server and prints the
+ * keyboard shortcut that flips it into Pitch mode.
+ *
+ * Thin wrapper around `pnpm --filter docs dev`: the heavy lifting lives
+ * in the docs app's `PitchModeProvider` + `LiveThemeSwitcher`, so this
+ * command is really a convenience so the team can run a single command
+ * before a client call.
+ *
+ * Flags:
+ *   --theme <name>   preselect a theme by writing `localStorage` seed
+ *                    (delegated — currently prints the instructions).
+ *   --port <number>  vite port (defaults to 3000).
+ */
+export interface DemoStartOptions {
+    theme?: string;
+    port?: number;
+}
+export declare function demoStartCommand(options?: DemoStartOptions): Promise<void>;
+//# sourceMappingURL=demo.d.ts.map

package/dist/commands/demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo.d.ts","sourceRoot":"","sources":["../../src/commands/demo.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAsB,gBAAgB,CACpC,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,IAAI,CAAC,CAiCf"}

package/dist/commands/demo.js

@@ -0,0 +1,15 @@
+import { spawn } from "node:child_process";
+import chalk from "chalk";
+export async function demoStartCommand(options = {}) {
+    const port = options.port ?? 3000;
+    console.log(chalk.bold.cyan("▶ Starting InAI UI demo shell"), chalk.dim(`(port ${port})`));
+    console.log(chalk.dim("  Press ⌘⇧P (macOS) or Ctrl+Shift+P once the app is up to enter pitch mode."));
+    console.log(chalk.dim("  Use ← / → or PageUp / PageDown to walk the demo stops, Esc to exit."));
+    if (options.theme) {
+        console.log(chalk.yellow(`  Theme preselect requested: "${options.theme}" — once the dock opens, the preset will be available in the 'Presets' tab.`));
+    }
+    const proc = spawn("pnpm", ["--filter", "docs", "dev", "--port", String(port)], { stdio: "inherit", env: { ...process.env } });
+    proc.on("exit", (code) => {
+        process.exit(code ?? 0);
+    });
+}

package/dist/commands/generate.d.ts

@@ -0,0 +1,47 @@
+/**
+ * `inai-ui generate block <description>` — scaffold a brand-new block
+ * from a natural-language description using the Anthropic API.
+ *
+ * Design goals:
+ * - **Zero new dependencies**: we talk to the Anthropic REST API via
+ *   `fetch` directly. No `@anthropic-ai/sdk`.
+ * - **Safe by default**: we never overwrite existing files without an
+ *   explicit `--force` flag and dry-run is always available.
+ * - **Grounded output**: the system prompt carries the canonical InAI UI
+ *   conventions + a short catalog of available building blocks so the
+ *   model reuses primitives instead of hallucinating new ones.
+ * - **Extractable**: responses are expected to carry a fenced ```tsx
+ *   block followed by an optional ```ts data block. A thin parser pulls
+ *   both sections out of the response.
+ */
+export interface GenerateOptions {
+    description?: string;
+    slug?: string;
+    output?: string;
+    model?: string;
+    dryRun?: boolean;
+    force?: boolean;
+    apiKey?: string;
+    maxTokens?: number;
+}
+export declare function toPascalCase(slug: string): string;
+export declare function sanitizeSlug(raw: string): string;
+export interface ParsedResponse {
+    pageTsx: string;
+    dataTs: string | null;
+    raw: string;
+}
+/**
+ * Pulls the first ```tsx / ```ts / ```typescript fenced block out of the
+ * assistant's response. We expect exactly two at most — one for the page
+ * and one for the optional data.ts.
+ */
+export declare function extractCodeBlocks(text: string): ParsedResponse;
+export declare function callClaude(args: {
+    apiKey: string;
+    model: string;
+    description: string;
+    maxTokens: number;
+}): Promise<string>;
+export declare function generateBlockCommand(description: string | undefined, options: GenerateOptions): Promise<void>;
+//# sourceMappingURL=generate.d.ts.map

package/dist/commands/generate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../../src/commands/generate.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+CD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAmB9D;AAED,wBAAsB,UAAU,CAAC,IAAI,EAAE;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,CAAC,MAAM,CAAC,CAmClB;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,OAAO,EAAE,eAAe,GACvB,OAAO,CAAC,IAAI,CAAC,CA2Jf"}

package/dist/commands/generate.js

@@ -0,0 +1,204 @@
+import fs from "node:fs";
+import path from "node:path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+const DEFAULT_MODEL = "claude-sonnet-4-6";
+const DEFAULT_OUTPUT = "apps/docs/src/registry/blocks";
+const SYSTEM_PROMPT = `You are a senior React engineer generating a production-ready "block" for the InAI UI component library. A block is a full-bleed section component that ships under \`apps/docs/src/registry/blocks/<slug>/page.tsx\` and, when helpful, a sibling \`data.ts\` for mock content.
+
+Hard requirements, in order of importance:
+
+1. Stack: React 19, TypeScript strict, Tailwind CSS v4 with \`@theme\`.
+2. Always import UI primitives from \`@company/ui/<name>\` (e.g. \`import { Button } from "@company/ui/button"\`). Never barrel-import. Never hardcode colours — always use CSS custom properties from the active theme:
+   - \`--color-primary\`, \`--color-accent\`, \`--color-info\`, \`--color-success\`, \`--color-warning\`, \`--color-destructive\`
+   - Backgrounds: \`--color-background\`, \`--color-surface\`, \`--color-surface-muted\`
+   - Text: \`--color-text\`, \`--color-text-secondary\`, \`--color-text-tertiary\`
+   - Borders: \`--color-border\`
+   - Radii: \`--radius-sm\`, \`--radius-md\`, \`--radius-lg\`
+   - Shadows: \`--shadow-sm\`, \`--shadow-md\`, \`--shadow-lg\`
+   - Fonts: \`--font-display\`, \`--font-body\`, \`--font-mono\`
+3. Use Motion (imported from \`motion/react\`) for animations. Spring physics, not duration-based easing. Always respect \`useReducedMotion\`.
+4. Prefer existing primitives from the library when possible. Catalogue (non-exhaustive, most useful for blocks): Button, Card, Badge, Input, Textarea, Select, Checkbox, Switch, Tabs, Dialog, Sheet, Tooltip, Avatar, Progress, Separator, MarqueeInfinite, GradientMesh, TextMask, KineticHeading, DecryptText, ParticleText, MagneticCursor, NoiseTexture, HexbinHeatmap, SparklineLive, RadialProgress, FunnelAnimated, RadarMotion, HeatmapCalendar, CardStackDeal, MorphSVG, ForceGraphMini, WaveformCanvas, ChordDiagram, SceneTransitions, PremiumLineChart, PremiumBarChart, PremiumAreaChart, PremiumPieChart.
+5. The block MUST export a default React component named from the slug in PascalCase + "Page" (e.g. slug \`hero-magnetic\` → \`HeroMagneticPage\`).
+6. The block MUST be accessible: semantic HTML, aria-labels where appropriate, focus-visible states, and respect \`prefers-reduced-motion\`.
+7. If the block needs content data (stats, testimonials, products, nav items, etc.), emit a sibling \`data.ts\` with a typed export and import it from the page.
+8. No "lorem ipsum" — use believable, brand-neutral copy.
+9. No external image URLs. For visuals use CSS gradients, SVG, \`GradientMesh\`, \`TextMask\`, or noise textures.
+10. Keep the block self-contained. Do not modify \`block-registry.tsx\`, \`block-categories.ts\`, or any other file — the CLI will handle registration.
+
+Response format: respond ONLY with one or two fenced code blocks, nothing else.
+
+- First block, required: \`\`\`tsx ...full page.tsx content... \`\`\`
+- Second block, optional: \`\`\`ts ...full data.ts content... \`\`\`
+
+No prose between, before, or after the code fences.`;
+export function toPascalCase(slug) {
+    return slug
+        .split(/[-_\s]+/)
+        .filter(Boolean)
+        .map((w) => w[0].toUpperCase() + w.slice(1).toLowerCase())
+        .join("");
+}
+export function sanitizeSlug(raw) {
+    return raw
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64);
+}
+/**
+ * Pulls the first ```tsx / ```ts / ```typescript fenced block out of the
+ * assistant's response. We expect exactly two at most — one for the page
+ * and one for the optional data.ts.
+ */
+export function extractCodeBlocks(text) {
+    const pageMatch = text.match(/```(?:tsx|jsx|typescript|ts)\s*\n([\s\S]*?)\n```/);
+    if (!pageMatch) {
+        throw new Error("Could not find a fenced tsx code block in the model response. Re-run with a more specific description.");
+    }
+    const pageTsx = pageMatch[1].trim();
+    // Strip everything through the first block and look for a second.
+    const afterFirst = text.slice((pageMatch.index ?? 0) + pageMatch[0].length);
+    const dataMatch = afterFirst.match(/```(?:ts|typescript)\s*\n([\s\S]*?)\n```/);
+    const dataTs = dataMatch ? dataMatch[1].trim() : null;
+    return { pageTsx, dataTs, raw: text };
+}
+export async function callClaude(args) {
+    const { apiKey, model, description, maxTokens } = args;
+    const userPrompt = `Generate a block for this description:\n\n${description.trim()}\n\nRemember: respond only with the fenced code blocks — no prose.`;
+    const response = await fetch("https://api.anthropic.com/v1/messages", {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+            "x-api-key": apiKey,
+            "anthropic-version": "2023-06-01",
+        },
+        body: JSON.stringify({
+            model,
+            max_tokens: maxTokens,
+            system: SYSTEM_PROMPT,
+            messages: [{ role: "user", content: userPrompt }],
+        }),
+    });
+    if (!response.ok) {
+        const body = await response.text();
+        throw new Error(`Anthropic API error ${response.status}: ${body.slice(0, 400)}`);
+    }
+    const payload = (await response.json());
+    const textParts = payload.content
+        .filter((c) => c.type === "text")
+        .map((c) => c.text);
+    if (textParts.length === 0) {
+        throw new Error("Model returned no text content. Try again.");
+    }
+    return textParts.join("\n");
+}
+export async function generateBlockCommand(description, options) {
+    let desc = description ?? options.description;
+    if (!desc) {
+        const res = await prompts({
+            type: "text",
+            name: "description",
+            message: "Describe the block you want to generate (e.g. 'hero with gradient mesh and kinetic headline')",
+            validate: (v) => (typeof v === "string" && v.trim().length > 10) ||
+                "Please provide more detail",
+        });
+        if (!res.description) {
+            console.log(chalk.yellow("✖ Aborted."));
+            return;
+        }
+        desc = res.description;
+    }
+    const apiKey = options.apiKey ?? process.env.ANTHROPIC_API_KEY;
+    if (!apiKey) {
+        console.error(chalk.red("✖ Missing ANTHROPIC_API_KEY. Set it in your environment or pass --api-key."));
+        console.error(chalk.dim("  Get a key at https://console.anthropic.com/ — free tier includes generous credits."));
+        process.exitCode = 1;
+        return;
+    }
+    // Pick a slug.
+    let slug = options.slug ? sanitizeSlug(options.slug) : "";
+    if (!slug) {
+        const shortWords = desc
+            .toLowerCase()
+            .split(/\s+/)
+            .filter((w) => w.length > 2)
+            .slice(0, 4)
+            .join("-");
+        const suggestion = sanitizeSlug(shortWords || "generated-block");
+        const res = await prompts({
+            type: "text",
+            name: "slug",
+            message: "Slug for the new block (kebab-case):",
+            initial: suggestion,
+            validate: (v) => (typeof v === "string" && /^[a-z0-9-]+$/.test(v)) ||
+                "Use lowercase letters, numbers, and hyphens only",
+        });
+        if (!res.slug) {
+            console.log(chalk.yellow("✖ Aborted."));
+            return;
+        }
+        slug = sanitizeSlug(res.slug);
+    }
+    const outputRoot = options.output ?? DEFAULT_OUTPUT;
+    const blockDir = path.resolve(process.cwd(), outputRoot, slug);
+    const pagePath = path.join(blockDir, "page.tsx");
+    const dataPath = path.join(blockDir, "data.ts");
+    if (fs.existsSync(blockDir) && !options.force && !options.dryRun) {
+        console.error(chalk.red(`✖ ${path.relative(process.cwd(), blockDir)} already exists. Use --force to overwrite.`));
+        process.exitCode = 1;
+        return;
+    }
+    const model = options.model ?? DEFAULT_MODEL;
+    const maxTokens = options.maxTokens ?? 4096;
+    const spinner = ora(`Calling ${chalk.cyan(model)} to generate ${chalk.bold(slug)}…`).start();
+    let parsed;
+    try {
+        const text = await callClaude({ apiKey, model, description: desc, maxTokens });
+        parsed = extractCodeBlocks(text);
+        spinner.succeed(`Model returned ${text.length} chars.`);
+    }
+    catch (err) {
+        spinner.fail(err.message);
+        process.exitCode = 1;
+        return;
+    }
+    // Light post-processing: ensure the exported component name ends with "Page".
+    const expectedName = `${toPascalCase(slug)}Page`;
+    if (!parsed.pageTsx.includes(expectedName)) {
+        console.warn(chalk.yellow(`! Model did not export \`${expectedName}\`. You may need to rename the default export.`));
+    }
+    console.log();
+    console.log(chalk.bold("Generated files:"));
+    console.log(`  ${chalk.cyan(path.relative(process.cwd(), pagePath))} ${chalk.dim(`(${parsed.pageTsx.split("\n").length} lines)`)}`);
+    if (parsed.dataTs) {
+        console.log(`  ${chalk.cyan(path.relative(process.cwd(), dataPath))} ${chalk.dim(`(${parsed.dataTs.split("\n").length} lines)`)}`);
+    }
+    if (options.dryRun) {
+        console.log();
+        console.log(chalk.bold("── page.tsx ──"));
+        console.log(parsed.pageTsx);
+        if (parsed.dataTs) {
+            console.log();
+            console.log(chalk.bold("── data.ts ──"));
+            console.log(parsed.dataTs);
+        }
+        console.log();
+        console.log(chalk.dim("Dry run — no files written."));
+        return;
+    }
+    fs.mkdirSync(blockDir, { recursive: true });
+    fs.writeFileSync(pagePath, `${parsed.pageTsx}\n`, "utf8");
+    if (parsed.dataTs) {
+        fs.writeFileSync(dataPath, `${parsed.dataTs}\n`, "utf8");
+    }
+    console.log();
+    console.log(chalk.green(`✔ Block scaffolded at ${path.relative(process.cwd(), blockDir)}`));
+    console.log();
+    console.log(chalk.bold("Next steps:"));
+    console.log(`  1. Register in ${chalk.cyan("apps/docs/src/lib/block-registry.tsx")} so the route is discoverable.`);
+    console.log(`  2. Add ${chalk.bold(slug)} to a category in ${chalk.cyan("apps/docs/src/lib/block-categories.ts")} so it appears on ${chalk.cyan("/blocks")}.`);
+    console.log(`  3. Run ${chalk.cyan("pnpm --filter docs check-types")} and review the generated code before shipping.`);
+}

package/dist/commands/init.d.ts

@@ -260,6 +260,15 @@ export interface ComponentsJson {
         table: boolean;
     };
 }
+/**
+ * Load an InitConfig from a JSON file. Used by the `--config <path>` flag
+ * to skip interactive prompts in CI / automated bootstrap flows. Missing
+ * optional fields are filled with sensible defaults; invalid/missing
+ * required fields throw with a clear message.
+ *
+ * The accepted JSON schema lives at `packages/cli/src/schemas/init-config.schema.json`.
+ */
+export declare function loadInitConfigFromFile(configPath: string, framework?: Framework, layout?: ProjectLayout): InitConfig;
 export declare function promptInitConfig(registryDir?: string, framework?: Framework, layout?: ProjectLayout): Promise<InitConfig | null>;
 export declare function buildComponentsJson(config: InitConfig, repoUrl?: string): ComponentsJson;
 export declare function getCnTemplate(): string;
@@ -296,6 +305,13 @@ export declare function runInit(config: InitConfig, targetDir: string, repoUrl?:
     success: boolean;
     filesCreated: string[];
 }>;
-export declare function initCommand(repoUrl?: string): Promise<void>;
+export interface InitCommandOptions {
+    /** Path to a JSON config file. When provided, interactive prompts are
+     *  skipped and the config is loaded from disk. Enables CI/automated
+     *  bootstrap. See `packages/cli/src/schemas/init-config.schema.json`
+     *  for the accepted shape. */
+    config?: string;
+}
+export declare function initCommand(repoUrl?: string, options?: InitCommandOptions): Promise<void>;
 export {};
 //# sourceMappingURL=init.d.ts.map

package/dist/commands/init.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,6BAA6B,CAAC;AAIrC,KAAK,KAAK,GAAG,MAAM,CAAC;AAEpB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DR,CAAC;AACX,KAAK,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAUxD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,UAAU,CAAC;IACrB,WAAW,EAAE,UAAU,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC;QACjB,OAAO,EAAE,UAAU,CAAC;KACrB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QACR,MAAM,EAAE,OAAO,CAAC;QAChB,KAAK,EAAE,OAAO,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;CACH;AAiCD;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CACpC,UAAU,EAAE,MAAM,EAClB,SAAS,CAAC,EAAE,SAAS,EACrB,MAAM,CAAC,EAAE,aAAa,GACrB,UAAU,CAyEZ;AAED,wBAAsB,gBAAgB,CACpC,WAAW,CAAC,EAAE,MAAM,EACpB,SAAS,CAAC,EAAE,SAAS,EACrB,MAAM,CAAC,EAAE,aAAa,GACrB,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CA0F5B;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,EAClB,OAAO,CAAC,EAAE,MAAM,GACf,cAAc,CA8ChB;AAED,wBAAgB,aAAa,IAAI,MAAM,CAQtC;AAOD,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAc/H;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAahI;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAoBpE;AAsHD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,GACrB,MAAM,EAAE,CAeV;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,MAAM,GACrB,OAAO,CAKT;AAED,wBAAsB,OAAO,CAC3B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,MAAM,GACf,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CA0FvD;AAED,MAAM,WAAW,kBAAkB;IACjC;;;kCAG8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAsB,WAAW,CAC/B,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CA8Hf"}