inai-react-components 1.6.1 → 2.0.0

package/dist/commands/theme.js

@@ -72,6 +72,119 @@ export async function runThemeCreate(options, rootDir) {
         message: `Theme "${name}" created at ${outputPath}`,
     };
 }
+function srgbToLinear(v) {
+    const n = v / 255;
+    return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+}
+export function hexToOklch(hex) {
+    const normalized = hex.trim().replace(/^#/, "");
+    if (!/^[0-9a-fA-F]{6}$/.test(normalized)) {
+        throw new Error(`Invalid hex color "${hex}"`);
+    }
+    const r = Number.parseInt(normalized.slice(0, 2), 16);
+    const g = Number.parseInt(normalized.slice(2, 4), 16);
+    const b = Number.parseInt(normalized.slice(4, 6), 16);
+    const rl = srgbToLinear(r);
+    const gl = srgbToLinear(g);
+    const bl = srgbToLinear(b);
+    const l1 = 0.4122214708 * rl + 0.5363325363 * gl + 0.0514459929 * bl;
+    const l2 = 0.2119034982 * rl + 0.6806995451 * gl + 0.1073969566 * bl;
+    const l3 = 0.0883024619 * rl + 0.2817188376 * gl + 0.6299787005 * bl;
+    const l_ = Math.cbrt(l1);
+    const m_ = Math.cbrt(l2);
+    const s_ = Math.cbrt(l3);
+    const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+    const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+    const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+    const C = Math.sqrt(a * a + bb * bb);
+    let H = (Math.atan2(bb, a) * 180) / Math.PI;
+    if (H < 0)
+        H += 360;
+    return { l: Number(L.toFixed(3)), c: Number(C.toFixed(3)), h: Number(H.toFixed(1)) };
+}
+function formatOklch({ l, c, h }, offsets) {
+    const ol = Math.min(Math.max(l + (offsets?.l ?? 0), 0), 1);
+    const oc = Math.max(c + (offsets?.c ?? 0), 0);
+    const oh = ((h + (offsets?.h ?? 0)) % 360 + 360) % 360;
+    return `oklch(${ol.toFixed(3)} ${oc.toFixed(3)} ${oh.toFixed(1)})`;
+}
+/**
+ * Produce a minimal CSS theme layer that overrides the brand-centric
+ * token slots. It is meant to be stacked on top of an existing theme
+ * (e.g. by `@import`-ing this file after `ultimate.css`) so the rest of
+ * the scheme stays coherent and accessible.
+ */
+export function generateThemeFromHexCss(name, hex, oklch) {
+    const capital = name.charAt(0).toUpperCase() + name.slice(1);
+    return `/*
+ * ${capital} Theme (Brand override)
+ * Generated by company-ui CLI from hex ${hex}
+ * Layer on top of a base theme: @import "./ultimate.css"; then this file.
+ */
+:root[data-theme="${name}"],
+:root[data-theme="${name}"] .dark {
+  --color-primary: ${formatOklch(oklch)};
+  --color-primary-hover: ${formatOklch(oklch, { l: -0.05 })};
+  --color-primary-active: ${formatOklch(oklch, { l: -0.1 })};
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-focus-ring: ${formatOklch(oklch, { l: 0.04, c: -0.05 })};
+  --color-accent: ${formatOklch(oklch, { h: 35 })};
+  --color-accent-hover: ${formatOklch(oklch, { h: 35, l: -0.05 })};
+}
+`;
+}
+export async function runThemeFromHex(options, rootDir) {
+    const { name, hex } = options;
+    if (!name || name.trim().length === 0) {
+        return { success: false, filePath: "", message: "Theme name is required." };
+    }
+    let oklch;
+    try {
+        oklch = hexToOklch(hex);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        return { success: false, filePath: "", message };
+    }
+    const themesDir = resolveThemesDir(rootDir);
+    fs.mkdirSync(themesDir, { recursive: true });
+    const outputPath = path.join(themesDir, `${name}.css`);
+    if (fs.existsSync(outputPath)) {
+        return {
+            success: false,
+            filePath: outputPath,
+            message: `Theme file "${name}.css" already exists at ${themesDir}.`,
+        };
+    }
+    const css = generateThemeFromHexCss(name, hex, oklch);
+    fs.writeFileSync(outputPath, css);
+    return {
+        success: true,
+        filePath: outputPath,
+        message: `Theme "${name}" generated from ${hex} at ${outputPath}`,
+    };
+}
+export async function themeFromHexCommand(options) {
+    const spinner = ora(`Generating theme "${options.name}" from ${options.hex}...`).start();
+    try {
+        const rootDir = process.cwd();
+        const result = await runThemeFromHex(options, rootDir);
+        if (result.success) {
+            spinner.succeed(result.message);
+            console.log(chalk.dim(`\nTo use this theme, import it after the base theme:`));
+            console.log(chalk.cyan(`  @import "@company/tokens/themes/ultimate.css";\n  @import "@company/tokens/themes/${options.name}.css";`));
+        }
+        else {
+            spinner.fail(result.message);
+        }
+    }
+    catch (error) {
+        spinner.fail("Theme generation failed.");
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(chalk.red(`\nError: ${message}`));
+        process.exit(1);
+    }
+}
 export async function themeCreateCommand(options) {
     const spinner = ora(`Creating theme "${options.name}" based on "${options.base}"...`).start();
     try {

package/dist/index.js

@@ -7,21 +7,25 @@ import { diffCommand } from "./commands/diff.js";
 import { listCommand } from "./commands/list.js";
 import { updateCommand } from "./commands/update.js";
 import { syncCommand } from "./commands/sync.js";
-import { themeCreateCommand } from "./commands/theme.js";
+import { themeCreateCommand, themeFromHexCommand, } from "./commands/theme.js";
+import { demoStartCommand } from "./commands/demo.js";
 import { mcpCommand } from "./commands/mcp.js";
 import { migrateCommand } from "./commands/migrate.js";
 import { runSchema } from "./commands/schema.js";
 import { registriesListCommand, registriesAddCommand, registriesRemoveCommand, } from "./commands/registries.js";
 import { removeCommand } from "./commands/remove.js";
+import { generateBlockCommand } from "./commands/generate.js";
+import { manifestCommand } from "./commands/manifest.js";
 const program = new Command();
 program
     .name("inai-ui")
     .description("CLI for InAI UI component library")
-    .version("1.6.1");
+    .version("2.0.0");
 program
     .command("init [repo-url]")
     .description("Initialize InAI UI in your project. Optionally pass a Git repo URL to fetch components remotely.")
-    .action((repoUrl) => initCommand(repoUrl));
+    .option("--config <path>", "Path to a JSON config file. Skips interactive prompts (CI/automation).")
+    .action((repoUrl, options) => initCommand(repoUrl, options));
 program
     .command("add [component]")
     .description("Add a component to your project. Without arguments, opens an interactive picker to select multiple components.")
@@ -41,6 +45,12 @@ program
     .description("Show installed components with drift / outdated / missing state")
     .option("--json", "Emit the status report as JSON (machine-readable)")
     .action((options) => statusCommand(options));
+program
+    .command("manifest")
+    .description("List installed components with their pinned versions and outdated state.")
+    .option("--json", "Emit the manifest as JSON (machine-readable)")
+    .option("--outdated", "Show only components whose version drifts from the registry")
+    .action((options) => manifestCommand(options));
 const mcpCmd = program
     .command("mcp")
     .description("Start the MCP (Model Context Protocol) server over stdio so AI assistants can drive the CLI.")
@@ -77,6 +87,18 @@ themeCmd
     .requiredOption("-n, --name <name>", "Name for the new theme")
     .requiredOption("-b, --base <base>", "Base theme to extend (monday, linear, notion, vercel)")
     .action((options) => themeCreateCommand(options));
+themeCmd
+    .command("from-hex")
+    .description("Generate a brand override theme from a single hex color (converts to OKLCH and writes a layered .css file).")
+    .requiredOption("-n, --name <name>", "Theme slug, used as filename")
+    .requiredOption("-c, --hex <hex>", "Brand hex color, e.g. #6b46c1")
+    .action((options) => themeFromHexCommand(options));
+program
+    .command("demo")
+    .description("Launch the docs app in pitch-mode-ready demo state. Use ⌘⇧P once the app is up.")
+    .option("--theme <name>", "Preselect a theme preset for the demo")
+    .option("--port <number>", "Vite dev port", (value) => Number.parseInt(value, 10))
+    .action((options) => demoStartCommand(options));
 program
     .command("migrate")
     .description("Apply deprecated-prop rename codemods to your project (inputSize→size, selectSize→size, comboBoxSize→size, checkboxState→state).")
@@ -123,4 +145,24 @@ registriesCmd
     .action(async (name) => {
     await registriesRemoveCommand(name);
 });
+const generateCmd = program
+    .command("generate")
+    .alias("gen")
+    .description("Generate new content from natural language using the Anthropic API");
+generateCmd
+    .command("block [description...]")
+    .description("Generate a new block (page section) from a natural-language description. Requires ANTHROPIC_API_KEY.")
+    .option("--slug <slug>", "Slug for the new block (kebab-case). Derived from the description if omitted.")
+    .option("--output <dir>", "Output directory root", "apps/docs/src/registry/blocks")
+    .option("--model <model>", "Claude model id", "claude-sonnet-4-6")
+    .option("--max-tokens <n>", "Max tokens for the response", (v) => Number.parseInt(v, 10))
+    .option("--dry-run", "Print the generated files without writing them")
+    .option("--force", "Overwrite an existing block with the same slug")
+    .option("--api-key <key>", "Anthropic API key (otherwise ANTHROPIC_API_KEY env var)")
+    .action((descriptionParts, options) => {
+    const description = descriptionParts && descriptionParts.length > 0
+        ? descriptionParts.join(" ")
+        : undefined;
+    return generateBlockCommand(description, options);
+});
 program.parse();

package/dist/schemas/init-config.schema.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://inai-ui.dev/init-config.schema.json",
+  "title": "InAI UI Init Config",
+  "description": "JSON config consumed by `inai-ui init --config <path>` to skip interactive prompts in CI / automation flows. Every required field has a sensible default if omitted.",
+  "type": "object",
+  "additionalProperties": false,
+  "properties": {
+    "componentPath": {
+      "type": "string",
+      "description": "Where to install components. Defaults to `<sourceRoot>/components/ui`.",
+      "default": "src/components/ui"
+    },
+    "blockPath": {
+      "type": "string",
+      "description": "Where to install blocks. Defaults to `<sourceRoot>/components/blocks`.",
+      "default": "src/components/blocks"
+    },
+    "theme": {
+      "type": "string",
+      "description": "Base theme. Must be one of the values returned by `inai-ui list themes`.",
+      "default": "inai"
+    },
+    "fontBody": {
+      "type": "string",
+      "description": "Font preset for body text. See `FONT_PRESETS` in init.ts for the full list.",
+      "default": "outfit"
+    },
+    "fontHeading": {
+      "type": "string",
+      "description": "Font preset for headings.",
+      "default": "outfit"
+    },
+    "radius": {
+      "type": "number",
+      "description": "Border radius in rem. Common values: 0, 0.25, 0.5, 0.75, 1.0.",
+      "default": 0.5
+    },
+    "tanstackRouter": {
+      "type": "boolean",
+      "description": "Generate TanStack Router-aware integrations.",
+      "default": false
+    },
+    "tanstackQuery": {
+      "type": "boolean",
+      "description": "Generate TanStack Query-aware integrations.",
+      "default": false
+    },
+    "tanstackForm": {
+      "type": "boolean",
+      "description": "Generate TanStack Form-aware integrations.",
+      "default": false
+    },
+    "tanstackTable": {
+      "type": "boolean",
+      "description": "Generate TanStack Table-aware integrations.",
+      "default": false
+    },
+    "framework": {
+      "type": "string",
+      "enum": [
+        "next-app",
+        "next-pages",
+        "vite",
+        "remix",
+        "astro",
+        "tanstack-start",
+        "unknown"
+      ],
+      "description": "Framework. When omitted, the CLI detects it from the consumer's package.json."
+    },
+    "cssEntryPoint": {
+      "type": "string",
+      "description": "Path to the project's root CSS file where tokens get imported. When omitted, the CLI derives it from the framework."
+    }
+  }
+}

package/dist/schemas/registry-item.schema.json

@@ -18,6 +18,15 @@
     "description": {
       "type": "string"
     },
+    "tags": {
+      "type": "array",
+      "items": { "type": "string" },
+      "description": "Free-form tags used by the CLI picker and `inai-ui list` filters"
+    },
+    "category": {
+      "type": "string",
+      "description": "High-level grouping used by the docs site and `inai-ui list -c <category>`"
+    },
     "files": {
       "type": "array",
       "items": { "type": "string" },

package/dist/utils/registry-resolver.d.ts

@@ -10,6 +10,10 @@ export declare function getRegistryCacheDir(name: string): string;
  * diverged history, interrupted previous run), the cache is reset to
  * match origin; if that also fails, the directory is nuked and a fresh
  * clone is done. Users should never have to touch `~/.inai-ui/registry`.
+ *
+ * The clone is shallow (`--depth 1 --filter=blob:none --single-branch`)
+ * by default — set `INAI_UI_FULL_CLONE=1` to get a full clone if you
+ * need full git history (e.g. cross-version diffing).
  */
 export declare function cloneRegistry(repoUrl: string): string;
 /**

package/dist/utils/registry-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry-resolver.d.ts","sourceRoot":"","sources":["../../src/utils/registry-resolver.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAS7E,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExD;AA8CD;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAcrD;AAmBD;;;;;;;;;;;;GAYG;AACH,wBAAsB,eAAe,CACnC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,sBAA2B,GACnC,OAAO,CAAC,MAAM,CAAC,CA+FjB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAS7D"}
+{"version":3,"file":"registry-resolver.d.ts","sourceRoot":"","sources":["../../src/utils/registry-resolver.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAS7E,wBAAgB,WAAW,IAAI,MAAM,CAEpC;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExD;AAsED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAiBrD;AAmBD;;;;;;;;;;;;GAYG;AACH,wBAAsB,eAAe,CACnC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE,sBAA2B,GACnC,OAAO,CAAC,MAAM,CAAC,CA+FjB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAS7D"}

package/dist/utils/registry-resolver.js

@@ -45,6 +45,12 @@ function refreshGitCache(cacheDir) {
             const remoteHead = execSync("git symbolic-ref refs/remotes/origin/HEAD", { cwd: cacheDir, stdio: ["pipe", "pipe", "pipe"] })
                 .toString()
                 .trim();
+            // Defense-in-depth: `remoteHead` comes from git's own output, but we
+            // interpolate it into a shell command. Refuse anything that isn't a
+            // well-formed ref so a poisoned upstream can't smuggle metachars.
+            if (!/^refs\/remotes\/origin\/[A-Za-z0-9._/-]+$/.test(remoteHead)) {
+                throw new Error(`Unexpected remote HEAD ref: ${remoteHead}`);
+            }
             execSync(`git reset --hard ${remoteHead}`, {
                 cwd: cacheDir,
                 stdio: "pipe",
@@ -57,6 +63,23 @@ function refreshGitCache(cacheDir) {
         }
     }
 }
+/**
+ * Build the argument string for `git clone`. Defaults to a shallow,
+ * blob-filtered clone so registries with large histories (e.g. the InAI
+ * monorepo at v2.0.0 with 600+ blocks/templates) finish in seconds
+ * instead of minutes and save ~70% bandwidth on CI.
+ *
+ * Set `INAI_UI_FULL_CLONE=1` (or pass `{ shallow: false }`) to opt out —
+ * needed if the consumer wants to run `git log` across history or diff
+ * cross-version.
+ */
+function buildCloneArgs(branch, shallow = true) {
+    const branchArg = branch ? `--branch "${branch}" ` : "";
+    if (process.env.INAI_UI_FULL_CLONE === "1" || !shallow) {
+        return `${branchArg}`.trim();
+    }
+    return `${branchArg}--depth 1 --filter=blob:none --single-branch`.trim();
+}
 /**
  * Clone (or fast-forward) a git registry into the legacy single-cache
  * directory. Preserved for backward compatibility with the v0.5.0
@@ -66,6 +89,10 @@ function refreshGitCache(cacheDir) {
  * diverged history, interrupted previous run), the cache is reset to
  * match origin; if that also fails, the directory is nuked and a fresh
  * clone is done. Users should never have to touch `~/.inai-ui/registry`.
+ *
+ * The clone is shallow (`--depth 1 --filter=blob:none --single-branch`)
+ * by default — set `INAI_UI_FULL_CLONE=1` to get a full clone if you
+ * need full git history (e.g. cross-version diffing).
  */
 export function cloneRegistry(repoUrl) {
     if (fs.existsSync(path.join(LEGACY_CACHE_DIR, ".git"))) {
@@ -79,7 +106,10 @@ export function cloneRegistry(repoUrl) {
     if (fs.existsSync(LEGACY_CACHE_DIR)) {
         fs.rmSync(LEGACY_CACHE_DIR, { recursive: true });
     }
-    execSync(`git clone "${repoUrl}" "${LEGACY_CACHE_DIR}"`, { stdio: "pipe" });
+    const cloneArgs = buildCloneArgs();
+    execSync(`git clone ${cloneArgs} "${repoUrl}" "${LEGACY_CACHE_DIR}"`, {
+        stdio: "pipe",
+    });
     return LEGACY_CACHE_DIR;
 }
 /**
@@ -145,7 +175,10 @@ export async function resolveRegistry(registry, projectDir, options = {}) {
         }
         if (!fs.existsSync(path.join(cacheDir, ".git"))) {
             fs.mkdirSync(REGISTRIES_CACHE_DIR, { recursive: true });
-            execSync(`git clone --branch "${branch}" "${cloneUrl}" "${cacheDir}"`, { stdio: "pipe" });
+            const cloneArgs = buildCloneArgs(branch);
+            execSync(`git clone ${cloneArgs} "${cloneUrl}" "${cacheDir}"`, {
+                stdio: "pipe",
+            });
         }
         return cacheDir;
     }

package/dist/utils/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/utils/themes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,EAwC7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAA8B,CAAC;AAE/D,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/utils/themes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,aAAa,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,EA+C7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,EAA8B,CAAC;AAE/D,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAElD"}

package/dist/utils/themes.js

@@ -42,6 +42,13 @@ export const THEMES = [
     { name: "cosmic", label: "Cosmic", category: "creative", description: "Space-inspired violet and nebula hues." },
     { name: "matcha", label: "Matcha", category: "creative", description: "Earthy matcha greens and cream." },
     { name: "volcanic", label: "Volcanic", category: "creative", description: "Charcoal and lava orange contrast." },
+    { name: "brutalist", label: "Brutalist", category: "creative", description: "Neon yellow over pure black and white with ink borders." },
+    { name: "glassmorphism-pro", label: "Glassmorphism Pro", category: "creative", description: "Pastel teal on frosted-mist surfaces." },
+    { name: "y2k-chrome", label: "Y2K Chrome", category: "creative", description: "Cyber-blue and hot pink over chrome silver." },
+    { name: "editorial", label: "Editorial", category: "creative", description: "Serif ink on cream paper with muted rust accents." },
+    { name: "cyber-punk-v2", label: "Cyber Punk v2", category: "creative", description: "Neon red + cyan on deep night, glowing borders." },
+    { name: "neumorphism-soft", label: "Neumorphism Soft", category: "creative", description: "Soft lavender with dual inner/outer shadows." },
+    { name: "swiss-grid", label: "Swiss Grid", category: "creative", description: "Helvetica red + pure black on paper, zero radius." },
 ];
 export const THEME_NAMES = THEMES.map((t) => t.name);
 export function isKnownTheme(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inai-react-components",
-  "version": "1.6.1",
+  "version": "2.0.0",
   "description": "CLI for InAI UI component library — install components from a private registry into your React project",
   "private": false,
   "type": "module",