inai-react-components 0.1.7 → 1.4.0

package/dist/commands/diff.d.ts

@@ -1,4 +1,10 @@
 import { type RegistryComponent } from "./status.js";
+/**
+ * Render a unified-style colored diff between two strings using a real
+ * LCS-based algorithm (`diffLines` from the `diff` package). Lines that
+ * changed are shown in red/green; unchanged lines are only shown as dim
+ * context within `CONTEXT_LINES` of a change.
+ */
 export declare function computeDiff(localContent: string, registryContent: string): string;
 export declare function findComponentInRegistry(registryPath: string, componentName: string): RegistryComponent | null;
 export declare function runDiff(componentName: string, rootDir: string): Promise<string>;

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

@@ -1 +1 @@
-{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/commands/diff.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAGrB,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,MAAM,CA+BjF;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,iBAAiB,GAAG,IAAI,CAW1B;AAED,wBAAsB,OAAO,CAC3B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAgEjB;AAED,wBAAsB,WAAW,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CActE"}
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/commands/diff.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AAMrB;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,MAAM,CAqEjF;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,iBAAiB,GAAG,IAAI,CAW1B;AA6BD,wBAAsB,OAAO,CAC3B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAgEjB;AAED,wBAAsB,WAAW,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CActE"}

package/dist/commands/diff.js

@@ -2,33 +2,81 @@ import fs from "node:fs";
 import path from "node:path";
 import chalk from "chalk";
 import ora from "ora";
+import { diffLines } from "diff";
 import { readComponentsJson, readRegistryJson, } from "./status.js";
 import { resolveRegistryDir } from "../utils/registry-resolver.js";
+import { resolveLocalDir } from "../utils/paths.js";
+const CONTEXT_LINES = 2;
+/**
+ * Render a unified-style colored diff between two strings using a real
+ * LCS-based algorithm (`diffLines` from the `diff` package). Lines that
+ * changed are shown in red/green; unchanged lines are only shown as dim
+ * context within `CONTEXT_LINES` of a change.
+ */
 export function computeDiff(localContent, registryContent) {
-    const localLines = localContent.split("\n");
-    const registryLines = registryContent.split("\n");
+    // `diffLines` reports hunks: each has `value` (the text), and flags
+    // `added` (present only in the second arg) or `removed` (present only in
+    // the first arg). Neither flag means unchanged.
+    // We pass (registryContent, localContent) so that "added" means the
+    // local file added a line vs the registry (green +), and "removed" means
+    // the line was removed from the registry in the local file (red -).
+    const hunks = diffLines(registryContent, localContent);
+    const hasChanges = hunks.some((h) => h.added || h.removed);
+    if (!hasChanges) {
+        return chalk.green("No differences found. Component is up to date.");
+    }
     const output = [];
-    const maxLen = Math.max(localLines.length, registryLines.length);
-    let hasChanges = false;
-    for (let i = 0; i < maxLen; i++) {
-        const localLine = localLines[i];
-        const registryLine = registryLines[i];
-        if (localLine === registryLine) {
-            output.push(chalk.dim(`  ${localLine ?? ""}`));
+    for (let i = 0; i < hunks.length; i++) {
+        const hunk = hunks[i];
+        const lines = hunk.value.replace(/\n$/, "").split("\n");
+        if (hunk.added) {
+            for (const line of lines) {
+                output.push(chalk.green(`+ ${line}`));
+            }
+        }
+        else if (hunk.removed) {
+            for (const line of lines) {
+                output.push(chalk.red(`- ${line}`));
+            }
         }
         else {
-            hasChanges = true;
-            if (registryLine !== undefined) {
-                output.push(chalk.red(`- ${registryLine}`));
+            // Unchanged hunk — keep only CONTEXT_LINES around neighboring changes.
+            const prevChanged = i > 0 && (hunks[i - 1].added || hunks[i - 1].removed);
+            const nextChanged = i < hunks.length - 1 && (hunks[i + 1].added || hunks[i + 1].removed);
+            if (!prevChanged && !nextChanged) {
+                continue;
+            }
+            if (prevChanged && nextChanged && lines.length > CONTEXT_LINES * 2) {
+                // Show trailing context from previous change, a separator, then
+                // leading context for next change.
+                for (let j = 0; j < CONTEXT_LINES; j++) {
+                    output.push(chalk.dim(`  ${lines[j]}`));
+                }
+                output.push(chalk.dim("  ..."));
+                for (let j = lines.length - CONTEXT_LINES; j < lines.length; j++) {
+                    output.push(chalk.dim(`  ${lines[j]}`));
+                }
             }
-            if (localLine !== undefined) {
-                output.push(chalk.green(`+ ${localLine}`));
+            else if (prevChanged) {
+                const end = Math.min(lines.length, CONTEXT_LINES);
+                for (let j = 0; j < end; j++) {
+                    output.push(chalk.dim(`  ${lines[j]}`));
+                }
+                if (lines.length > CONTEXT_LINES) {
+                    output.push(chalk.dim("  ..."));
+                }
+            }
+            else if (nextChanged) {
+                const start = Math.max(0, lines.length - CONTEXT_LINES);
+                if (start > 0) {
+                    output.push(chalk.dim("  ..."));
+                }
+                for (let j = start; j < lines.length; j++) {
+                    output.push(chalk.dim(`  ${lines[j]}`));
+                }
             }
         }
     }
-    if (!hasChanges) {
-        return chalk.green("No differences found. Component is up to date.");
-    }
     return output.join("\n");
 }
 export function findComponentInRegistry(registryPath, componentName) {
@@ -42,6 +90,26 @@ export function findComponentInRegistry(registryPath, componentName) {
     ];
     return allItems.find((c) => c.name === componentName) ?? null;
 }
+/**
+ * Map a registry component to the alias slot that should hold its local copy.
+ * Fixes the earlier bug where `diff` always assumed `aliases.components`.
+ */
+function getLocalAliasDir(component, componentsJson) {
+    const type = component.type.toLowerCase();
+    if (type === "block") {
+        return resolveLocalDir(componentsJson.aliases.blocks, componentsJson);
+    }
+    if (type === "template") {
+        const templatesAlias = componentsJson.aliases.templates;
+        if (templatesAlias) {
+            return resolveLocalDir(templatesAlias, componentsJson);
+        }
+        const blocksDir = resolveLocalDir(componentsJson.aliases.blocks, componentsJson);
+        const parent = path.dirname(blocksDir);
+        return path.join(parent, "templates");
+    }
+    return resolveLocalDir(componentsJson.aliases.components, componentsJson);
+}
 export async function runDiff(componentName, rootDir) {
     const componentsJson = readComponentsJson(rootDir);
     if (!componentsJson) {
@@ -57,11 +125,14 @@ export async function runDiff(componentName, rootDir) {
         return chalk.yellow(`Component "${componentName}" has no files in the registry.`);
     }
     const results = [];
+    const localComponentDir = getLocalAliasDir(registryComponent, componentsJson);
+    const isMultiFile = registryComponent.type === "block" || registryComponent.type === "template";
     for (const filePath of registryComponent.files) {
         const registryFilePath = path.join(registryDir, filePath);
-        const localComponentDir = componentsJson.aliases.components.replace(/^@\//, "src/");
         const fileName = path.basename(filePath);
-        const localFilePath = path.join(rootDir, localComponentDir, fileName);
+        const localFilePath = isMultiFile
+            ? path.join(rootDir, localComponentDir, componentName, fileName)
+            : path.join(rootDir, localComponentDir, fileName);
         results.push(chalk.bold(`\nDiff for ${fileName}:`));
         results.push(chalk.dim("─".repeat(60)));
         if (!fs.existsSync(registryFilePath)) {
@@ -71,7 +142,6 @@ export async function runDiff(componentName, rootDir) {
         const registryContent = fs.readFileSync(registryFilePath, "utf-8");
         if (!fs.existsSync(localFilePath)) {
             results.push(chalk.yellow(`Local file not found at ${localComponentDir}/${fileName}. Component may not be installed.`));
-            // Show what registry has as all additions
             const lines = registryContent.split("\n");
             for (const line of lines) {
                 results.push(chalk.green(`+ ${line}`));

package/dist/commands/init.d.ts

@@ -1,5 +1,6 @@
-declare const AVAILABLE_THEMES: readonly ["inai", "monday", "linear", "notion", "vercel", "anthropic", "shadcn-default", "shadcn-blue", "shadcn-green", "shadcn-orange", "shadcn-red", "shadcn-rose", "shadcn-violet", "shadcn-yellow", "shadcn-amber", "shadcn-lime", "shadcn-emerald", "shadcn-teal", "shadcn-cyan", "shadcn-sky", "shadcn-indigo", "shadcn-purple", "shadcn-fuchsia", "shadcn-pink"];
-type Theme = (typeof AVAILABLE_THEMES)[number];
+import { type Framework } from "../utils/framework-detect.js";
+import { type ProjectLayout } from "../utils/tsconfig-detect.js";
+type Theme = string;
 declare const FONT_PRESETS: readonly [{
     readonly name: "outfit";
     readonly label: "Outfit";
@@ -221,17 +222,21 @@ export interface InitConfig {
     fontBody: FontPreset;
     fontHeading: FontPreset;
     radius: number;
-    importAlias: string;
-    utilsAlias: string;
     tanstackRouter: boolean;
     tanstackQuery: boolean;
     tanstackForm: boolean;
     tanstackTable: boolean;
+    framework?: Framework;
+    cssEntryPoint?: string;
+    /** Detected project layout — drives file destinations in `runInit`. */
+    layout?: ProjectLayout;
 }
 export interface ComponentsJson {
     $schema: string;
     registrySource?: string;
     style: string;
+    framework?: Framework;
+    layout?: ProjectLayout;
     tailwind: {
         config: string;
         css: string;
@@ -254,7 +259,7 @@ export interface ComponentsJson {
         table: boolean;
     };
 }
-export declare function promptInitConfig(registryDir?: string): Promise<InitConfig | null>;
+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;
 export declare function getLocalTailwindCssTemplate(theme: Theme, fontBody: FontPreset, fontHeading: FontPreset, radius: number): string;
@@ -266,6 +271,13 @@ export declare function getLegacyTailwindCssTemplate(theme: Theme, fontBody: Fon
  * `data-theme` attribute on the HTML element.
  */
 export declare function normalizeThemeCss(css: string, theme: string): string;
+/**
+ * Copies the i18n base files (context, types, defaults) from the registry
+ * to the project's <sourceRoot>/lib/. Required because ~75 components import
+ * `useUIMessages` from `./lib/i18n-context.js` — without these files, every
+ * subsequent `add` of an i18n-aware component would produce a broken import.
+ */
+export declare function copyI18nFiles(registryDir: string | undefined, targetDir: string, sourceRoot: string): string[];
 export declare function runInit(config: InitConfig, targetDir: string, repoUrl?: string): Promise<{
     success: boolean;
     filesCreated: string[];

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":"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"}

package/dist/commands/init.js

@@ -4,32 +4,10 @@ import chalk from "chalk";
 import ora from "ora";
 import prompts from "prompts";
 import { cloneRegistry, getCacheDir } from "../utils/registry-resolver.js";
-const AVAILABLE_THEMES = [
-    "inai",
-    "monday",
-    "linear",
-    "notion",
-    "vercel",
-    "anthropic",
-    "shadcn-default",
-    "shadcn-blue",
-    "shadcn-green",
-    "shadcn-orange",
-    "shadcn-red",
-    "shadcn-rose",
-    "shadcn-violet",
-    "shadcn-yellow",
-    "shadcn-amber",
-    "shadcn-lime",
-    "shadcn-emerald",
-    "shadcn-teal",
-    "shadcn-cyan",
-    "shadcn-sky",
-    "shadcn-indigo",
-    "shadcn-purple",
-    "shadcn-fuchsia",
-    "shadcn-pink",
-];
+import { THEME_NAMES } from "../utils/themes.js";
+import { detectFramework, frameworkLabel, getCssEntryPoint, } from "../utils/framework-detect.js";
+import { detectProjectLayout, } from "../utils/tsconfig-detect.js";
+const AVAILABLE_THEMES = THEME_NAMES;
 const FONT_PRESETS = [
     // Sans-serif — geometric & modern
     { name: "outfit", label: "Outfit", family: "'Outfit', system-ui, sans-serif" },
@@ -111,20 +89,24 @@ function discoverThemes(registryDir) {
     }
     return [...AVAILABLE_THEMES];
 }
-export async function promptInitConfig(registryDir) {
+export async function promptInitConfig(registryDir, framework, layout) {
     const themes = discoverThemes(registryDir);
+    const sourceRoot = layout?.sourceRoot ?? "src";
+    const defaultCssEntry = framework
+        ? getCssEntryPoint(framework, sourceRoot)
+        : `${sourceRoot}/index.css`;
     const response = await prompts([
         {
             type: "text",
             name: "componentPath",
             message: "Where would you like to install components?",
-            initial: "src/components/ui",
+            initial: `${sourceRoot}/components/ui`,
         },
         {
             type: "text",
             name: "blockPath",
             message: "Where would you like to install blocks?",
-            initial: "src/components/blocks",
+            initial: `${sourceRoot}/components/blocks`,
         },
         {
             type: "select",
@@ -154,18 +136,6 @@ export async function promptInitConfig(registryDir) {
             choices: RADIUS_OPTIONS.map((r) => ({ title: r.label, value: r.value })),
             initial: 2,
         },
-        {
-            type: "text",
-            name: "importAlias",
-            message: "Configure the import alias for components:",
-            initial: "@/components/ui",
-        },
-        {
-            type: "text",
-            name: "utilsAlias",
-            message: "Configure the import alias for utils:",
-            initial: "@/lib/utils",
-        },
         {
             type: "confirm",
             name: "tanstackRouter",
@@ -198,22 +168,31 @@ export async function promptInitConfig(registryDir) {
     if (!response.componentPath) {
         return null;
     }
-    return response;
+    const config = response;
+    config.framework = framework;
+    config.cssEntryPoint = defaultCssEntry;
+    config.layout = layout;
+    return config;
 }
 export function buildComponentsJson(config, repoUrl) {
+    const layout = config.layout ?? {
+        sourceRoot: "src",
+        aliasPrefix: "@/",
+    };
+    const utilsAlias = `${layout.aliasPrefix}lib/utils`;
     const json = {
         $schema: "https://inai-ui.dev/schema.json",
         style: "default",
+        framework: config.framework,
+        layout,
         tailwind: {
             config: "tailwind.config.ts",
-            css: "src/index.css",
+            css: config.cssEntryPoint ?? `${layout.sourceRoot}/index.css`,
         },
         aliases: {
-            components: config.importAlias,
-            blocks: config.blockPath.startsWith("src/")
-                ? `@/${config.blockPath.slice(4)}`
-                : config.blockPath,
-            utils: config.utilsAlias,
+            components: config.componentPath,
+            blocks: config.blockPath,
+            utils: utilsAlias,
         },
         theme: config.theme,
         font: {
@@ -248,7 +227,8 @@ function getFontFamily(font) {
 }
 export function getLocalTailwindCssTemplate(theme, fontBody, fontHeading, radius) {
     return `@import "tailwindcss";
-@import "./styles/tokens/index.css";
+@import "./styles/tokens/primitives/colors.css";
+@import "./styles/tokens/base.css";
 @import "./styles/tokens/themes/${theme}.css";
 @import "./styles/tokens/presets/typography.css";
 @import "./styles/tokens/presets/animations.css";
@@ -310,19 +290,30 @@ function copyDirRecursive(src, dest) {
     }
     return copied;
 }
-function copyTokensToProject(registryDir, targetDir, theme) {
+function copyTokensToProject(registryDir, targetDir, theme, sourceRoot) {
     const tokensSrc = path.join(registryDir, "packages", "tokens", "src");
-    const tokensDest = path.join(targetDir, "src", "styles", "tokens");
+    const tokensDest = path.join(targetDir, sourceRoot, "styles", "tokens");
+    const tokensRelBase = `${sourceRoot}/styles/tokens`;
     const copied = [];
     if (!fs.existsSync(tokensSrc))
         return copied;
     fs.mkdirSync(tokensDest, { recursive: true });
     // Copy base files
-    for (const file of ["base.css", "index.css"]) {
+    for (const file of ["base.css"]) {
         const src = path.join(tokensSrc, file);
         if (fs.existsSync(src)) {
             fs.copyFileSync(src, path.join(tokensDest, file));
-            copied.push(`src/styles/tokens/${file}`);
+            copied.push(`${tokensRelBase}/${file}`);
+        }
+    }
+    // Copy primitives (color scales referenced by all themes)
+    const primitivesSrc = path.join(tokensSrc, "primitives");
+    const primitivesDest = path.join(tokensDest, "primitives");
+    if (fs.existsSync(primitivesSrc)) {
+        const primitiveCopied = copyDirRecursive(primitivesSrc, primitivesDest);
+        for (const file of primitiveCopied) {
+            const rel = path.relative(targetDir, file);
+            copied.push(rel);
         }
     }
     // Copy selected theme (normalized so it applies without data-theme attribute)
@@ -336,7 +327,7 @@ function copyTokensToProject(registryDir, targetDir, theme) {
             const rawCss = fs.readFileSync(themeSrc, "utf-8");
             const normalizedCss = normalizeThemeCss(rawCss, theme);
             fs.writeFileSync(path.join(themesDest, themeFile), normalizedCss);
-            copied.push(`src/styles/tokens/themes/${themeFile}`);
+            copied.push(`${tokensRelBase}/themes/${themeFile}`);
         }
     }
     // Copy presets
@@ -348,14 +339,38 @@ function copyTokensToProject(registryDir, targetDir, theme) {
             const src = path.join(presetsSrc, file);
             if (fs.existsSync(src)) {
                 fs.copyFileSync(src, path.join(presetsDest, file));
-                copied.push(`src/styles/tokens/presets/${file}`);
+                copied.push(`${tokensRelBase}/presets/${file}`);
             }
         }
     }
     return copied;
 }
+/**
+ * Copies the i18n base files (context, types, defaults) from the registry
+ * to the project's <sourceRoot>/lib/. Required because ~75 components import
+ * `useUIMessages` from `./lib/i18n-context.js` — without these files, every
+ * subsequent `add` of an i18n-aware component would produce a broken import.
+ */
+export function copyI18nFiles(registryDir, targetDir, sourceRoot) {
+    if (!registryDir)
+        return [];
+    const files = ["i18n-context.tsx", "i18n-types.ts", "i18n-defaults.ts"];
+    const srcBase = path.join(registryDir, "packages", "ui", "src", "lib");
+    const destBase = path.join(targetDir, sourceRoot, "lib");
+    fs.mkdirSync(destBase, { recursive: true });
+    const copied = [];
+    for (const file of files) {
+        const src = path.join(srcBase, file);
+        if (!fs.existsSync(src))
+            continue;
+        fs.copyFileSync(src, path.join(destBase, file));
+        copied.push(`${sourceRoot}/lib/${file}`);
+    }
+    return copied;
+}
 export async function runInit(config, targetDir, repoUrl) {
     const filesCreated = [];
+    const sourceRoot = config.layout?.sourceRoot ?? "src";
     // 1. Create components.json
     const componentsJsonPath = path.join(targetDir, "components.json");
     const componentsJson = buildComponentsJson(config, repoUrl);
@@ -366,32 +381,40 @@ export async function runInit(config, targetDir, repoUrl) {
     fs.mkdirSync(componentDir, { recursive: true });
     const blockDir = path.join(targetDir, config.blockPath);
     fs.mkdirSync(blockDir, { recursive: true });
-    // 3. Create cn.ts utility
-    const utilsDir = path.join(targetDir, "src", "lib");
+    // 3. Create cn.ts utility under the detected source root
+    const utilsDir = path.join(targetDir, sourceRoot, "lib");
     fs.mkdirSync(utilsDir, { recursive: true });
     const cnPath = path.join(utilsDir, "cn.ts");
     fs.writeFileSync(cnPath, getCnTemplate());
-    filesCreated.push("src/lib/cn.ts");
+    filesCreated.push(`${sourceRoot}/lib/cn.ts`);
     // 4. Copy tokens and create CSS
-    const cssDir = path.join(targetDir, "src");
-    fs.mkdirSync(cssDir, { recursive: true });
-    const cssPath = path.join(cssDir, "index.css");
+    const cssRelPath = config.cssEntryPoint ?? `${sourceRoot}/index.css`;
+    const cssPath = path.join(targetDir, cssRelPath);
+    fs.mkdirSync(path.dirname(cssPath), { recursive: true });
     if (repoUrl) {
         // Remote mode: copy tokens from cached registry
         const registryDir = getCacheDir();
-        const tokenFiles = copyTokensToProject(registryDir, targetDir, config.theme);
+        const tokenFiles = copyTokensToProject(registryDir, targetDir, config.theme, sourceRoot);
         filesCreated.push(...tokenFiles);
+        // Copy i18n base files so components importing useUIMessages resolve
+        const i18nFiles = copyI18nFiles(registryDir, targetDir, sourceRoot);
+        filesCreated.push(...i18nFiles);
         fs.writeFileSync(cssPath, getLocalTailwindCssTemplate(config.theme, config.fontBody, config.fontHeading, config.radius));
     }
     else {
         // Local mode: reference @company/tokens package
         fs.writeFileSync(cssPath, getLegacyTailwindCssTemplate(config.theme, config.fontBody, config.fontHeading, config.radius));
     }
-    filesCreated.push("src/index.css");
+    filesCreated.push(cssRelPath);
     return { success: true, filesCreated };
 }
 export async function initCommand(repoUrl) {
     console.log(chalk.bold("\nInAI UI - Project Initialization\n"));
+    const cwd = process.cwd();
+    const detectedFramework = detectFramework(cwd);
+    const detectedLayout = detectProjectLayout(cwd);
+    console.log(chalk.dim(`Detected framework: ${frameworkLabel(detectedFramework)}`));
+    console.log(chalk.dim(`Detected layout:    ${detectedLayout.sourceRoot}/ with alias ${detectedLayout.aliasPrefix}`));
     if (repoUrl) {
         const spinner = ora("Cloning component registry...").start();
         try {
@@ -407,7 +430,7 @@ export async function initCommand(repoUrl) {
         }
     }
     const registryDir = repoUrl ? getCacheDir() : undefined;
-    const config = await promptInitConfig(registryDir);
+    const config = await promptInitConfig(registryDir, detectedFramework, detectedLayout);
     if (!config) {
         console.log(chalk.yellow("\nInitialization cancelled."));
         process.exit(0);

package/dist/commands/mcp.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Print the JSON config fragment that users must drop into their Claude
+ * Desktop or Cursor `mcpServers` block. Invoked from `inai-ui mcp init`.
+ */
+export declare function printMcpConfig(): void;
+export interface ToolTextResult {
+    content: Array<{
+        type: "text";
+        text: string;
+    }>;
+    isError?: boolean;
+}
+export declare function handleListComponents(args: {
+    category?: string;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare function handleViewComponent(args: {
+    name?: string;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare function handleAddComponent(args: {
+    name?: string;
+    force?: boolean;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare function handleDiffComponent(args: {
+    name?: string;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare function handleUpdateComponent(args: {
+    name?: string;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare function handleListThemes(): Promise<ToolTextResult>;
+export declare function handleStatus(args: {
+    json?: boolean;
+} | undefined, cwd: string): Promise<ToolTextResult>;
+export declare const MCP_TOOLS: readonly [{
+    readonly name: "list_components";
+    readonly description: "List all available components, blocks and templates in the InAI UI registry.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly category: {
+                readonly type: "string";
+                readonly description: "Optional type filter (e.g. 'component', 'form', 'block').";
+            };
+        };
+    };
+}, {
+    readonly name: "view_component";
+    readonly description: "View the source code of a component from the registry.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly name: {
+                readonly type: "string";
+                readonly description: "Component name";
+            };
+        };
+        readonly required: readonly ["name"];
+    };
+}, {
+    readonly name: "add_component";
+    readonly description: "Install a component (and its transitive registry dependencies) into the current project.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly name: {
+                readonly type: "string";
+                readonly description: "Component name";
+            };
+            readonly force: {
+                readonly type: "boolean";
+                readonly description: "Overwrite existing files without prompting.";
+            };
+        };
+        readonly required: readonly ["name"];
+    };
+}, {
+    readonly name: "diff_component";
+    readonly description: "Show a unified diff between the locally-installed component and the registry version.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly name: {
+                readonly type: "string";
+                readonly description: "Component name";
+            };
+        };
+        readonly required: readonly ["name"];
+    };
+}, {
+    readonly name: "update_component";
+    readonly description: "Update an installed component to the latest registry version using a 3-way merge against the snapshot captured at install time. Emits conflict markers when local and registry edits overlap.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly name: {
+                readonly type: "string";
+                readonly description: "Component name";
+            };
+        };
+        readonly required: readonly ["name"];
+    };
+}, {
+    readonly name: "list_themes";
+    readonly description: "List the available InAI UI themes with their categories and descriptions.";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {};
+    };
+}, {
+    readonly name: "project_status";
+    readonly description: "Return the InAI UI project status (HEALTHY / DRIFT / OUTDATED / MISSING per component).";
+    readonly inputSchema: {
+        readonly type: "object";
+        readonly properties: {
+            readonly json: {
+                readonly type: "boolean";
+                readonly description: "Return JSON payload (default true).";
+            };
+        };
+    };
+}];
+export declare function runMcp(cwd?: string): Promise<void>;
+export declare function mcpCommand(subcommand?: "init"): Promise<void>;
+//# sourceMappingURL=mcp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mcp.d.ts","sourceRoot":"","sources":["../../src/commands/mcp.ts"],"names":[],"mappings":"AAgCA;;;GAGG;AACH,wBAAgB,cAAc,IAAI,IAAI,CAErC;AAID,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AASD,wBAAsB,oBAAoB,CACxC,IAAI,EAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,EACvC,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CAKzB;AAED,wBAAsB,mBAAmB,CACvC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,EACnC,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CA8BzB;AAED,wBAAsB,kBAAkB,CACtC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,EACpD,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CAkBzB;AAED,wBAAsB,mBAAmB,CACvC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,EACnC,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CAmCzB;AAED,wBAAsB,qBAAqB,CACzC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,EACnC,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CAgBzB;AAED,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,cAAc,CAAC,CAEhE;AAED,wBAAsB,YAAY,CAChC,IAAI,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,EACpC,GAAG,EAAE,MAAM,GACV,OAAO,CAAC,cAAc,CAAC,CAGzB;AAID,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoFZ,CAAC;AAEX,wBAAsB,MAAM,CAAC,GAAG,GAAE,MAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAiEvE;AAED,wBAAsB,UAAU,CAC9B,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAAC,IAAI,CAAC,CAMf"}