mycontext-cli 0.2.38 → 0.4.0

package/dist/commands/generate-components.js

@@ -40,40 +40,10 @@ exports.GenerateComponentsCommand = void 0;
 const fileSystem_1 = require("../utils/fileSystem");
 const spinner_1 = require("../utils/spinner");
 const chalk_1 = __importDefault(require("chalk"));
+const prompts_1 = __importDefault(require("prompts"));
 const fs = __importStar(require("fs-extra"));
 const path = __importStar(require("path"));
 const child_process_1 = require("child_process");
-// Code Generation Sub-Agent
-class CodeGenSubAgent {
-    constructor() {
-        this.name = "CodeGenSubAgent";
-    }
-    async run({ component, group, options }) {
-        // Use the existing generateComponentCode logic
-        return new GenerateComponentsCommand().generateComponentCode(component, group, options);
-    }
-}
-// QA Sub-Agent (stub for demonstration)
-class QASubAgent {
-    constructor() {
-        this.name = "QASubAgent";
-    }
-    async run({ code, component }) {
-        // Placeholder: In real implementation, run static analysis, lint, or type checks
-        // For now, always return true (pass)
-        return true;
-    }
-}
-// Docs Writer Sub-Agent (stub for demonstration)
-class DocsSubAgent {
-    constructor() {
-        this.name = "DocsSubAgent";
-    }
-    async run({ component, group }) {
-        // Placeholder: Generate markdown or JSDoc for the component
-        return `# ${component.name}\n\n${component.description}\n`;
-    }
-}
 // --- Orchestration in GenerateComponentsCommand ---
 class GenerateComponentsCommand {
     constructor() {
@@ -117,6 +87,8 @@ class GenerateComponentsCommand {
     async execute(target, options) {
         const spinner = new spinner_1.EnhancedSpinner("Initializing component generation...");
         try {
+            // System reminder: high-level plan
+            console.log(chalk_1.default.gray("\n[mycontext] Plan: plan → generate → QA → docs → preview (→ checks)\n"));
             // Check authentication unless local mode is enabled
             let userInfo = null;
             if (!options.local) {
@@ -146,6 +118,36 @@ class GenerateComponentsCommand {
             // Determine if we're generating a specific group or all components
             const isAll = target === "all" || options.all;
             const groupName = isAll ? undefined : target;
+            // Core-first flow: generate a single BrandComp then exit
+            if (isAll && options.coreFirst) {
+                await this.generateCoreBrandComp(options, spinner);
+                // Update preview registry and ensure /preview route
+                if (options.updatePreview !== false) {
+                    const componentsDir = options.output || path.join("components", ".mycontext");
+                    await this.updatePreviewRegistry(componentsDir);
+                    await this.ensurePreviewRoute();
+                }
+                // Guidance for refinement step
+                console.log(chalk_1.default.blue("\n🧩 Core-first step complete: edit 'components/.mycontext/core/BrandComp.tsx' until you're happy."));
+                console.log(chalk_1.default.gray("   You can also run: mycontext enhance components/.mycontext/core/BrandComp.tsx --prompt 'Tweak spacing/colors'\n"));
+                // If non-interactive, stop here
+                if (options.yes) {
+                    return;
+                }
+                // Ask whether to proceed with remaining components now
+                const answer = await (0, prompts_1.default)({
+                    type: "toggle",
+                    name: "proceed",
+                    message: "Proceed to generate the remaining components now? (You can rerun later)",
+                    initial: false,
+                    active: "yes",
+                    inactive: "no",
+                });
+                if (answer?.proceed) {
+                    await this.generateAllComponents(options, spinner, userInfo.userId);
+                }
+                return;
+            }
             if (isAll) {
                 await this.generateAllComponents(options, spinner, userInfo.userId);
             }
@@ -239,7 +241,9 @@ class GenerateComponentsCommand {
             const list = this.contextArtifacts.compList;
             if (!list || !Array.isArray(list.groups))
                 return null;
-            const norm = (s) => String(s || "").toLowerCase().replace(/\s+/g, " ");
+            const norm = (s) => String(s || "")
+                .toLowerCase()
+                .replace(/\s+/g, " ");
             const g = list.groups.find((x) => norm(x?.name) === norm(groupName));
             if (!g || !Array.isArray(g.components))
                 return null;
@@ -270,6 +274,8 @@ class GenerateComponentsCommand {
         }
         // Ensure shadcn/ui components are available before generation
         await this.ensureShadcnComponentsInstalled(groups, spinner);
+        // Ensure form dependencies (zod, react-hook-form) exist
+        await this.ensureFormDeps(spinner);
         // Ensure test scaffold exists (optional)
         if (options.withTests) {
             await this.ensureTestsScaffold(spinner);
@@ -281,6 +287,7 @@ class GenerateComponentsCommand {
         let generatedGroups = 0;
         for (const group of groups) {
             spinner.updateText(`Generating ${group.name} components...`);
+            console.log(chalk_1.default.gray(`\n[mycontext] Reminder: generate → QA → docs for group '${group.name}'`));
             const groupDir = path.join(componentsDir, this.toKebabCase(group.name));
             await this.fs.ensureDir(groupDir);
             const components = group.components || [];
@@ -302,6 +309,8 @@ class GenerateComponentsCommand {
             await this.updatePreviewRegistry(componentsDir);
             await this.ensurePreviewRoute();
         }
+        // Post-generation: scan actual imports and ensure missing shadcn primitives are installed
+        await this.scanAndInstallShadcnFromComponents(componentsDir, spinner);
         spinner.success({
             text: `Generated ${totalComponents} components across ${generatedGroups} groups!`,
         });
@@ -318,6 +327,21 @@ class GenerateComponentsCommand {
         });
         // Post-run hints
         this.printNextStepsAfterComponents(options);
+        // Optionally open preview in browser
+        if (options.openPreview !== false) {
+            try {
+                const url = "http://localhost:3000/preview";
+                console.log(chalk_1.default.blue(`\n🌐 Opening preview: ${url}`));
+                // best-effort open using the OS default opener
+                const opener = process.platform === "darwin"
+                    ? "open"
+                    : process.platform === "win32"
+                        ? "start"
+                        : "xdg-open";
+                (0, child_process_1.execSync)(`${opener} ${url}`, { stdio: "ignore" });
+            }
+            catch { }
+        }
     }
     async generateComponentGroup(groupName, options, spinner, userId) {
         spinner.updateText(`Generating ${groupName} components...`);
@@ -340,6 +364,8 @@ class GenerateComponentsCommand {
         }
         // Ensure shadcn/ui components are available before generation
         await this.ensureShadcnComponentsInstalled([group], spinner);
+        // Ensure form dependencies (zod, react-hook-form) exist
+        await this.ensureFormDeps(spinner);
         // Ensure test scaffold exists (optional)
         if (options.withTests) {
             await this.ensureTestsScaffold(spinner);
@@ -364,6 +390,8 @@ class GenerateComponentsCommand {
             await this.updatePreviewRegistry(compBaseDir);
             await this.ensurePreviewRoute();
         }
+        // Post-generation: scan actual imports and ensure missing shadcn primitives are installed
+        await this.scanAndInstallShadcnFromComponents(compBaseDir, spinner);
         spinner.success({
             text: `Generated ${components.length} components in ${group.name}!`,
         });
@@ -374,6 +402,204 @@ class GenerateComponentsCommand {
         });
         console.log(chalk_1.default.gray(`    • index.ts`));
         console.log(chalk_1.default.gray(`    • page.tsx`));
+        // Optionally open preview in browser
+        if (options.openPreview !== false) {
+            try {
+                const url = "http://localhost:3000/preview";
+                console.log(chalk_1.default.blue(`\n🌐 Opening preview: ${url}`));
+                const opener = process.platform === "darwin"
+                    ? "open"
+                    : process.platform === "win32"
+                        ? "start"
+                        : "xdg-open";
+                (0, child_process_1.execSync)(`${opener} ${url}`, { stdio: "ignore" });
+            }
+            catch { }
+        }
+    }
+    /**
+     * Generate a single core BrandComp using PRD/types/brand context to act as the design anchor.
+     */
+    async generateCoreBrandComp(options, spinner) {
+        spinner.updateText("Generating core BrandComp...");
+        const componentsDir = options.output || path.join("components", ".mycontext");
+        const groupDir = path.join(componentsDir, "core");
+        await this.fs.ensureDir(groupDir);
+        // Ensure shadcn initialized
+        await this.ensureShadcnComponentsInstalled([
+            {
+                name: "Core",
+                components: [
+                    {
+                        name: "BrandComp",
+                        type: "layout",
+                        description: "Core brand canvas",
+                        tags: ["layout", "canvas"],
+                    },
+                ],
+            },
+        ], spinner);
+        // Best-effort brand token application
+        await this.applyBrandTokens();
+        const brandComp = {
+            name: "BrandComp",
+            type: "layout",
+            description: "A core brand canvas showcasing typography, primary/secondary colors, interactive states, and spacing. Acts as a reference for other components.",
+            userStories: [
+                "As a designer, I can see brand colors and typography applied consistently.",
+                "As a developer, I can reference spacing, radius, and interactive states.",
+            ],
+            actionFunctions: [],
+            dependencies: ["react"],
+            tags: ["brand", "layout", "canvas"],
+        };
+        // Try sub-agent generation first
+        try {
+            const { orchestrator } = await Promise.resolve().then(() => __importStar(require("../agents/orchestrator/SubAgentOrchestrator")));
+            const codeResult = (await orchestrator.executeAgent("CodeGenSubAgent", {
+                component: brandComp,
+                group: { name: "Core" },
+                options: {
+                    ...options,
+                    context: {
+                        prd: this.contextArtifacts.prd,
+                        types: this.contextArtifacts.types,
+                    },
+                },
+            }));
+            await this.fs.writeFile(path.join(groupDir, `BrandComp.tsx`), codeResult.code);
+        }
+        catch {
+            const code = this.generateComponentCode(brandComp, { name: "Core" }, {
+                ...options,
+                context: {
+                    prd: this.contextArtifacts.prd,
+                    types: this.contextArtifacts.types,
+                },
+            });
+            await this.fs.writeFile(path.join(groupDir, `BrandComp.tsx`), code);
+        }
+        // Group index and preview
+        await this.generateGroupIndex({
+            name: "Core",
+            description: "Core brand canvas",
+            components: [brandComp],
+        }, groupDir);
+        await this.generatePreviewPage({
+            name: "Core",
+            description: "Core brand canvas",
+            components: [brandComp],
+        }, groupDir);
+        spinner.success({ text: "Generated core BrandComp." });
+    }
+    /**
+     * Scan generated TSX files for imports from '@/components/ui/*' and ensure those shadcn primitives are installed.
+     */
+    async scanAndInstallShadcnFromComponents(componentsBaseDir, spinner) {
+        try {
+            const projectRoot = process.cwd();
+            const pkgJsonPath = path.join(projectRoot, "package.json");
+            if (!(await fs.pathExists(pkgJsonPath)))
+                return;
+            const needed = new Set();
+            const walk = async (dir) => {
+                const entries = await fs.readdir(dir);
+                for (const entry of entries) {
+                    const full = path.join(dir, entry);
+                    const stat = await fs.stat(full);
+                    if (stat.isDirectory())
+                        await walk(full);
+                    else if (entry.endsWith(".tsx")) {
+                        const src = await fs.readFile(full, "utf8");
+                        const re = /from\s+["']@\/components\/ui\/([^"']+)["']/g;
+                        let m;
+                        while ((m = re.exec(src))) {
+                            const mod = m[1];
+                            if (mod)
+                                needed.add(mod);
+                        }
+                    }
+                }
+            };
+            await walk(componentsBaseDir);
+            if (needed.size === 0)
+                return;
+            // Filter out already-present ui files
+            const uiDir = path.join(projectRoot, "components", "ui");
+            const missing = [];
+            for (const name of needed) {
+                const p = path.join(uiDir, `${name}.tsx`);
+                if (!(await fs.pathExists(p)))
+                    missing.push(name);
+            }
+            if (missing.length === 0)
+                return;
+            spinner.updateText(`Installing missing shadcn primitives from imports (${missing.length})...`);
+            const pm = await this.detectPackageManager(projectRoot);
+            try {
+                if (pm === "pnpm") {
+                    (0, child_process_1.execSync)(`pnpm dlx shadcn@latest add ${missing.join(" ")}`.trim(), {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+                else {
+                    (0, child_process_1.execSync)(`npx shadcn@latest add ${missing.join(" ")}`.trim(), {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+            }
+            catch {
+                console.log(chalk_1.default.yellow("   ⚠️ shadcn add (post-scan) failed; you can add components manually."));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow(`   ⚠️ shadcn post-scan encountered an issue: ${error instanceof Error ? error.message : String(error)}`));
+        }
+    }
+    /**
+     * Apply brand tokens to globals.css (:root variables) if branding exists.
+     */
+    async applyBrandTokens() {
+        try {
+            const projectRoot = process.cwd();
+            const appDir = (await fs.pathExists(path.join(projectRoot, "src", "app")))
+                ? path.join(projectRoot, "src", "app")
+                : path.join(projectRoot, "app");
+            const globalsPath = path.join(appDir, "globals.css");
+            if (!(await fs.pathExists(globalsPath)))
+                return;
+            const brandPath = path.join(projectRoot, ".mycontext", "03-branding.md");
+            if (!(await fs.pathExists(brandPath)))
+                return;
+            const brand = await fs.readFile(brandPath, "utf8");
+            const pick = (label) => {
+                const m = brand.match(new RegExp(label + ".*?(#[0-9a-fA-F]{6})"));
+                return m ? m[1] : null;
+            };
+            const primary = pick("primary") || pick("Primary") || null;
+            const secondary = pick("secondary") || pick("Secondary") || null;
+            const accent = pick("accent") || pick("Accent") || null;
+            if (!primary && !secondary && !accent)
+                return;
+            let css = await fs.readFile(globalsPath, "utf8");
+            const ensureVar = (name, value) => {
+                const re = new RegExp(`(--${name}:\s*)([^;]+)(;)`);
+                if (re.test(css))
+                    css = css.replace(re, `$1${value}$3`);
+                else
+                    css = css.replace(/:root\s*\{/, (m) => `${m}\n  --${name}: ${value};`);
+            };
+            if (primary)
+                ensureVar("primary", primary);
+            if (secondary)
+                ensureVar("secondary", secondary);
+            if (accent)
+                ensureVar("accent", accent);
+            await fs.writeFile(globalsPath, css);
+        }
+        catch { }
     }
     async generateComponent(component, group, groupDir, options, userId) {
         try {
@@ -435,15 +661,23 @@ class GenerateComponentsCommand {
                 .replace(new RegExp(`${safeName} Default`, "g"), `${safeName}Default`);
             await this.fs.writeFile(componentPath, fixedCode);
             // Execute QA and docs in parallel
+            const componentWithContext = {
+                ...component,
+                _context: {
+                    group: group?.name,
+                    prd: this.contextArtifacts.prd,
+                    types: this.contextArtifacts.types,
+                },
+            };
             const [qaResult, docsResult] = (await Promise.all([
                 orchestrator.executeAgent("QASubAgent", {
                     code: codeResult.code,
-                    component,
+                    component: componentWithContext,
                     standards: ["typescript", "react", "accessibility"],
                 }),
                 orchestrator.executeAgent("DocsSubAgent", {
                     code: codeResult.code,
-                    component,
+                    component: componentWithContext,
                     format: "readme",
                 }),
             ]));
@@ -515,6 +749,11 @@ class GenerateComponentsCommand {
     async ensureShadcnComponentsInstalled(groups, spinner) {
         try {
             const projectRoot = process.cwd();
+            const pkgJsonPath = path.join(projectRoot, "package.json");
+            if (!(await fs.pathExists(pkgJsonPath))) {
+                console.log(chalk_1.default.gray("   Skipping shadcn setup: no package.json in current directory. Run inside an existing Next.js project."));
+                return;
+            }
             const componentsJsonPath = path.join(projectRoot, "components.json");
             // Initialize shadcn if components.json is missing
             if (!(await fs.pathExists(componentsJsonPath))) {
@@ -551,6 +790,10 @@ class GenerateComponentsCommand {
             const names = Array.from(needed);
             spinner.updateText(`Installing shadcn components (${names.length})...`);
             try {
+                if (!(await fs.pathExists(pkgJsonPath))) {
+                    console.log(chalk_1.default.gray("   Skipping 'shadcn add' because no package.json was found."));
+                    return;
+                }
                 if (pkgManager === "pnpm") {
                     (0, child_process_1.execSync)(`pnpm dlx shadcn@latest add ${names.join(" ")}`, {
                         cwd: projectRoot,
@@ -572,6 +815,50 @@ class GenerateComponentsCommand {
             console.log(chalk_1.default.yellow(`   ⚠️ shadcn setup encountered an issue: ${error instanceof Error ? error.message : String(error)}`));
         }
     }
+    async ensureFormDeps(spinner) {
+        try {
+            const projectRoot = process.cwd();
+            const pkgPath = path.join(projectRoot, "package.json");
+            const pkg = (await fs.pathExists(pkgPath))
+                ? await fs.readJson(pkgPath)
+                : {};
+            const deps = {
+                ...(pkg.dependencies || {}),
+                ...(pkg.devDependencies || {}),
+            };
+            const need = [];
+            if (!deps["zod"])
+                need.push("zod");
+            if (!deps["react-hook-form"])
+                need.push("react-hook-form");
+            if (!deps["@hookform/resolvers"])
+                need.push("@hookform/resolvers");
+            if (need.length === 0)
+                return;
+            spinner.updateText(`Ensuring form dependencies: ${need.join(", ")}`);
+            const pm = await this.detectPackageManager(projectRoot);
+            try {
+                if (pm === "pnpm") {
+                    (0, child_process_1.execSync)(`pnpm add ${need.join(" ")}`, {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+                else {
+                    (0, child_process_1.execSync)(`npm i ${need.join(" ")}`, {
+                        cwd: projectRoot,
+                        stdio: "inherit",
+                    });
+                }
+            }
+            catch {
+                console.log(chalk_1.default.yellow("   ⚠️ Failed to install form deps automatically. You can install them manually."));
+            }
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow(`   ⚠️ Form deps step encountered an issue: ${error instanceof Error ? error.message : String(error)}`));
+        }
+    }
     inferShadcnForComponent(component, out) {
         const type = (component.type || "").toLowerCase();
         const name = String(component.name || "").toLowerCase();
@@ -608,7 +895,7 @@ class GenerateComponentsCommand {
             /alert|dialog|toast|progress|skeleton/.test(name)) {
             add(["alert", "alert-dialog", "dialog", "progress", "skeleton"]);
         }
-        if (type === "data" || /table|command|combobox/.test(name)) {
+        if (type === "data" || /table|command|combobox|list/.test(name)) {
             add(["table", "command"]);
         }
         if (type === "overlay" || /popover|tooltip|sheet|drawer/.test(name)) {
@@ -1008,7 +1295,6 @@ export default ${name};
     e.preventDefault();
     setIsSubmitting(true);
     try {
-      // TODO: Implement form submission logic
       onSubmit?.(formData);
     } catch (error) {
       console.error("Form submission error:", error);
@@ -1050,42 +1336,19 @@ export default ${name};
         switch (normalizedType) {
             case "form":
                 return `
+      {/* Example domain-agnostic form scaffold. Replace fields per component plan. */}
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
-          <label htmlFor="email" className="text-sm font-medium">
-            Email
-          </label>
-          <input
-            id="email"
-            type="email"
-            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            placeholder="Enter your email"
-            required
-          />
+          <label htmlFor="field1" className="text-sm font-medium">Field 1</label>
+          <input id="field1" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Type here" />
         </div>
-        <div className="space-y-2">
-          <label htmlFor="password" className="text-sm font-medium">
-            Password
-          </label>
-          <input
-            id="password"
-            type="password"
-            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            placeholder="Enter your password"
-            required
-          />
-        </div>
-        {error && (
-          <div className="text-sm text-destructive">
-            {error}
-          </div>
-        )}
+        {error ? <div className="text-sm text-destructive">{error}</div> : null}
         <button
           type="submit"
           disabled={loading || isSubmitting}
           className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
         >
-          {loading || isSubmitting ? "Loading..." : "Submit"}
+          {loading || isSubmitting ? "Submitting..." : "Submit"}
         </button>
       </form>`;
             case "layout":
@@ -1146,14 +1409,14 @@ export default ${name};
                 case "handleLogin":
                     return `
 export async function handleLogin(email: string, password: string) {
-  // TODO: Implement login logic
+  // Implement login logic in application layer
   console.log("Logging in with:", { email, password });
   return { success: true };
 }`;
                 case "handleSignup":
                     return `
 export async function handleSignup(email: string, password: string, name: string) {
-  // TODO: Implement signup logic
+  // Implement signup logic in application layer
   console.log("Signing up with:", { email, password, name });
   return { success: true };
 }`;
@@ -1166,14 +1429,14 @@ export function validateEmail(email: string): boolean {
                 case "checkUsername":
                     return `
 export async function checkUsername(username: string): Promise<boolean> {
-  // TODO: Implement username availability check
+  // Implement username availability check in application layer
   console.log("Checking username:", username);
   return true;
 }`;
                 default:
                     return `
 export function ${func}() {
-  // TODO: Implement ${func} logic
+  // Implement ${func} logic in application layer
   console.log("${func} called");
 }`;
             }
@@ -1264,6 +1527,8 @@ ${components
                     .join(" ");
                 groups.push({ dir: item, name: title, files });
             }
+            // Build preview props based on component prop interfaces and types
+            await this.buildPreviewProps(componentsDir);
             const registryPath = path.join(componentsDir, "registry.tsx");
             const entries = [];
             for (const g of groups) {
@@ -1276,6 +1541,7 @@ ${components
             const content = `"use client";
 import React from 'react';
 import dynamic from 'next/dynamic';
+import { previewProps } from './preview-props';
 
 export type PreviewRegistryItem = {
   group: string;
@@ -1305,7 +1571,8 @@ export const previewItems = items.map((item) => ({
       if (!comp) {
         console.warn('[mycontext/preview] Missing export ' + item.name + ' in ' + item.path);
       }
-      return (comp || ((props: any) => <MissingComponent name={item.name} {...props} />)) as React.ComponentType<any>;
+      const C = (comp || ((props: any) => <MissingComponent name={item.name} {...props} />)) as React.ComponentType<any>;
+      return (props: any) => <C {...(previewProps[item.name] || {})} {...props} />;
     } catch (e) {
       console.warn('[mycontext/preview] Failed to load ' + item.path + ':', e);
       return ((props: any) => <MissingComponent name={item.name} {...props} />) as React.ComponentType<any>;
@@ -1368,6 +1635,119 @@ function groupBy<T, K extends string | number>(
             console.log(chalk_1.default.yellow(`   ⚠️ Failed to update preview registry: ${error instanceof Error ? error.message : String(error)}`));
         }
     }
+    /**
+     * Build preview-props.ts by parsing component prop interfaces and .mycontext/02-types.ts
+     * Generates sample values for primitives and known interfaces; skips unknowns.
+     */
+    async buildPreviewProps(componentsDir) {
+        try {
+            const projectRoot = process.cwd();
+            const typesPathCandidates = [
+                path.join(projectRoot, ".mycontext", "02-types.ts"),
+                path.join(projectRoot, ".mycontext", "types.ts"),
+                path.join(projectRoot, "context", "types.ts"),
+            ];
+            let typesSource = "";
+            for (const p of typesPathCandidates) {
+                if (await fs.pathExists(p)) {
+                    typesSource = await fs.readFile(p, "utf8");
+                    break;
+                }
+            }
+            // Parse interfaces from types file
+            const interfaceRegex = /interface\s+(\w+)\s*\{([\s\S]*?)\}/g;
+            const interfaces = {};
+            let match;
+            while ((match = interfaceRegex.exec(typesSource))) {
+                const name = match[1];
+                const body = match[2];
+                const fields = {};
+                body
+                    .split("\n")
+                    .map((l) => l.trim())
+                    .filter(Boolean)
+                    .forEach((line) => {
+                    const m = line.match(/^(\w+)\??:\s*([^;]+);/);
+                    if (m)
+                        fields[m[1]] = m[2].trim();
+                });
+                interfaces[name] = fields;
+            }
+            // Discover components and parse their Props interfaces
+            const propsMap = {};
+            const groups = await fs.readdir(componentsDir);
+            for (const g of groups) {
+                const groupPath = path.join(componentsDir, g);
+                const stat = await fs.stat(groupPath);
+                if (!stat.isDirectory())
+                    continue;
+                const files = (await fs.readdir(groupPath)).filter((f) => f.endsWith(".tsx"));
+                for (const file of files) {
+                    if (file === "page.tsx")
+                        continue;
+                    const base = file.replace(/\.tsx$/, "");
+                    const full = path.join(groupPath, file);
+                    const src = await fs.readFile(full, "utf8");
+                    const propsInterfaceMatch = src.match(/interface\s+(\w+)Props\s*\{([\s\S]*?)\}/);
+                    if (!propsInterfaceMatch)
+                        continue;
+                    const propsBody = propsInterfaceMatch[2];
+                    const entries = propsBody
+                        .split("\n")
+                        .map((l) => l.trim())
+                        .filter((l) => /:\s*/.test(l));
+                    const propsObj = {};
+                    for (const line of entries) {
+                        const m = line.match(/^(\w+)\??:\s*([^;]+);/);
+                        if (!m)
+                            continue;
+                        const propName = m[1];
+                        const typeStr = m[2].trim();
+                        const value = this.generateSampleValue(typeStr, interfaces, 0);
+                        if (value !== undefined)
+                            propsObj[propName] = value;
+                    }
+                    if (Object.keys(propsObj).length > 0)
+                        propsMap[base] = propsObj;
+                }
+            }
+            const out = `export const previewProps: Record<string, any> = ${JSON.stringify(propsMap, null, 2)};\n`;
+            await fs.writeFile(path.join(componentsDir, "preview-props.ts"), out);
+        }
+        catch (error) {
+            console.log(chalk_1.default.yellow(`   ⚠️ Failed to build preview props: ${error instanceof Error ? error.message : String(error)}`));
+        }
+    }
+    generateSampleValue(typeStr, interfaces, depth) {
+        if (depth > 2)
+            return undefined;
+        const t = typeStr.replace(/\s+/g, "");
+        if (t.endsWith("[]")) {
+            const inner = t.slice(0, -2);
+            const v = this.generateSampleValue(inner, interfaces, depth + 1);
+            return v === undefined ? undefined : [v];
+        }
+        if (/^string\b/.test(t))
+            return "Sample";
+        if (/^number\b/.test(t))
+            return 1;
+        if (/^boolean\b/.test(t))
+            return true;
+        if (/^Date\b/.test(t))
+            return new Date().toISOString();
+        if (interfaces[t]) {
+            const fields = interfaces[t];
+            const obj = {};
+            for (const [k, vt] of Object.entries(fields)) {
+                const v = this.generateSampleValue(vt, interfaces, depth + 1);
+                if (v !== undefined)
+                    obj[k] = v;
+            }
+            return obj;
+        }
+        // Unknown type: skip
+        return undefined;
+    }
     async ensurePreviewRoute() {
         try {
             const projectRoot = process.cwd();