vibe-design-system 2.8.69 → 2.8.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.69",
+  "version": "2.8.71",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/story-generator.mjs

@@ -4036,10 +4036,39 @@ function writeComponentInventoryStory(components, foundations) {
     return name.replace(/[-\s]+(.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, c => c.toUpperCase());
   }
 
-  const importInfoMap  = {};  // comp.name → { identifier, importAlias, isDefault }
+  const importInfoMap  = {};  // comp.name → { identifier, importAlias, isDefault, actualExport, skip }
   const seenAliases    = new Set();
   const orderedImports = [];  // deduplicated
 
+  // Detect actual usable export from a source file.
+  // Returns { actualExport, isDefault } or null if no PascalCase export found.
+  function detectExport(srcPath, expectedId) {
+    try {
+      const src = fs.readFileSync(srcPath, 'utf-8');
+      // Exact named export: export { Foo } or export const/function/class Foo
+      if (new RegExp(`export\\s*\\{[^}]*\\b${expectedId}\\b`).test(src) ||
+          new RegExp(`export\\s+(?:const|function|class)\\s+${expectedId}\\b`).test(src)) {
+        return { actualExport: expectedId, isDefault: false };
+      }
+      // Default export
+      if (/export\s+default\b/.test(src)) {
+        return { actualExport: expectedId, isDefault: true };
+      }
+      // Any PascalCase named export from brace-export block
+      const braceMatch = src.match(/export\s*\{([^}]+)\}/);
+      if (braceMatch) {
+        const names = braceMatch[1].split(',')
+          .map(n => n.trim().replace(/\s+as\s+\S+/, '').trim())
+          .filter(n => /^[A-Z]/.test(n));
+        if (names.length > 0) return { actualExport: names[0], isDefault: false };
+      }
+      // Any PascalCase direct export
+      const directMatch = src.match(/export\s+(?:const|function|class)\s+([A-Z]\w*)/);
+      if (directMatch) return { actualExport: directMatch[1], isDefault: false };
+      return null; // no usable export
+    } catch { return { actualExport: expectedId, isDefault: false }; }
+  }
+
   for (const comp of components) {
     if (!comp.file) continue;
     const identifier = toPascalLocal(comp.name);
@@ -4057,20 +4086,26 @@ function writeComponentInventoryStory(components, foundations) {
       importAlias = `@/${compBase}/${posixNoExt}`;
     }
 
-    // Detect default vs named export
-    let isDefault = false;
-    try {
-      const srcPath = isProjectRelative
-        ? absFromRoot
-        : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
-      isDefault = /export\s+default\b/.test(fs.readFileSync(srcPath, 'utf-8'));
-    } catch { /* keep false */ }
+    // Detect actual export name in the file
+    const srcPath = isProjectRelative
+      ? absFromRoot
+      : path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
+    const exportInfo = detectExport(srcPath, identifier);
 
-    importInfoMap[comp.name] = { identifier, importAlias, isDefault };
+    if (!exportInfo) {
+      // No usable export — skip import, will fall back to shape HTML
+      importInfoMap[comp.name] = { identifier, importAlias, isDefault: false, actualExport: null, skip: true };
+      continue;
+    }
+
+    const { actualExport, isDefault } = exportInfo;
+    const isShadcn = (comp.group || '').toLowerCase() === 'shadcn';
+    importInfoMap[comp.name] = { identifier, importAlias, isDefault, actualExport, skip: false, isShadcn };
 
-    if (!seenAliases.has(importAlias)) {
+    // Only import shadcn UI primitives — project components are shown via story iframes
+    if (isShadcn && !seenAliases.has(importAlias)) {
       seenAliases.add(importAlias);
-      orderedImports.push({ identifier, importAlias, isDefault });
+      orderedImports.push({ identifier, importAlias, isDefault, actualExport });
     }
   }
 
@@ -4144,16 +4179,22 @@ function writeComponentInventoryStory(components, foundations) {
   )].length;
 
   // ── Build import lines ─────────────────────────────────────────────────────
-  const importLines = orderedImports.map(imp =>
-    imp.isDefault
-      ? `import ${imp.identifier} from "${imp.importAlias}";`
-      : `import { ${imp.identifier} } from "${imp.importAlias}";`
-  );
+  const importLines = orderedImports.map(imp => {
+    if (imp.isDefault) return `import ${imp.identifier} from "${imp.importAlias}";`;
+    // If actual export name differs from identifier, use "as" renaming
+    const namedPart = (imp.actualExport && imp.actualExport !== imp.identifier)
+      ? `${imp.actualExport} as ${imp.identifier}`
+      : imp.identifier;
+    return `import { ${namedPart} } from "${imp.importAlias}";`;
+  });
 
-  // ── PREVIEWS map entries ───────────────────────────────────────────────────
+  // ── PREVIEWS map: only shadcn UI primitives (safe to render with no props) ──
   const TEXT_CHILD_NAMES = new Set(['button','badge','toggle','label','link','chip','tag','pill']);
   const previewEntries = components
-    .filter(comp => importInfoMap[comp.name])
+    .filter(comp => {
+      const info = importInfoMap[comp.name];
+      return info && !info.skip && info.isShadcn;
+    })
     .map(comp => {
       const { identifier } = importInfoMap[comp.name];
       const hasText = TEXT_CHILD_NAMES.has(identifier.toLowerCase());
@@ -4163,6 +4204,26 @@ function writeComponentInventoryStory(components, foundations) {
       return `  ${JSON.stringify(comp.name)}: ${call}`;
     });
 
+  // ── STORY_IDS map: project components get embedded as story iframes ─────────
+  // Story ID = "{category}/{name}" → lowercase, spaces/slashes → hyphens → "--default"
+  function toStoryId(category, name) {
+    return [category, name].join('/')
+      .toLowerCase().replace(/[^a-z0-9/]+/g, '-').replace(/-*\/+/g, '-')
+      .replace(/-+/g, '-').replace(/^-|-$/g, '') + '--default';
+  }
+  const storyIdEntries = components
+    .filter(comp => {
+      const info = importInfoMap[comp.name];
+      return info && !info.isShadcn; // project (non-shadcn) components only
+    })
+    .map(comp => {
+      // Find the category for this component from categorized
+      const cat = Object.keys(categorized).find(c => categorized[c].some(x => x.name === comp.name));
+      if (!cat) return null;
+      return `  ${JSON.stringify(comp.name)}: ${JSON.stringify(toStoryId(cat, comp.name))}`;
+    })
+    .filter(Boolean);
+
   // ── Generate story file ────────────────────────────────────────────────────
   const content = [
     `import React from "react";`,
@@ -4188,10 +4249,14 @@ function writeComponentInventoryStory(components, foundations) {
     ] : [
       `const _PW = ({ children }: { children: React.ReactNode }) => React.createElement(React.Fragment, null, children) as React.ReactElement;`,
     ]),
-    // PREVIEWS: each component renders via its real import; ErrorBoundary catches failures
+    // PREVIEWS: shadcn UI primitives rendered directly (safe with no props)
     `const PREVIEWS: Record<string, () => React.ReactElement> = {`,
     ...previewEntries.map(e => e + ','),
     `};`,
+    // STORY_IDS: project components shown via their own story iframe
+    `const STORY_IDS: Record<string, string> = {`,
+    ...storyIdEntries.map(e => e + ','),
+    `};`,
     ``,
     // Inventory data (metadata only — visual rendering is done at runtime via PREVIEWS)
     `const inventoryData: { category: string; components: { name: string; group: string; tokenCount: number; propCount: number; colorSwatches: { token: string; hex: string }[]; previewHtml: string; previewScale: number; active: boolean }[] }[] = ${JSON.stringify(inventoryData)};`,
@@ -4199,30 +4264,44 @@ function writeComponentInventoryStory(components, foundations) {
     `const activeComponents = ${activeComponents};`,
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
-    // CardPreview: renders the actual component at the right scale, falls back to shape HTML
+    // CardPreview: shadcn → direct render; project → story iframe; else → shape HTML
     `const _InvPreview = ({ comp }: { comp: any }) => {`,
-    `  const s: number = comp.previewScale || 0.4;`,
-    `  const centered = s >= 0.9;`,
     `  const fn = PREVIEWS[comp.name];`,
+    `  const storyId = STORY_IDS[comp.name];`,
     `  const shapeHtml = (`,
     `    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}`,
     `      dangerouslySetInnerHTML={{ __html: comp.previewHtml }} />`,
     `  );`,
-    `  const wPct = (+(100 / s).toFixed(1)) + "%";`,
-    `  const innerStyle: React.CSSProperties = centered`,
-    `    ? { position: "absolute", top: "50%", left: "50%",`,
-    `        transform: "translate(-50%, -50%) scale(" + s + ")",`,
-    `        transformOrigin: "center center", pointerEvents: "none" }`,
-    `    : { position: "absolute", top: 0, left: 0, width: wPct,`,
-    `        transform: "scale(" + s + ")",`,
-    `        transformOrigin: "top left", pointerEvents: "none" };`,
-    `  return (`,
-    `    <div style={{ height: 96, overflow: "hidden", position: "relative", background: "#fff" }}>`,
-    `      <_EB fallback={shapeHtml}>`,
-    `        {fn ? <_PW><div style={innerStyle}>{fn()}</div></_PW> : shapeHtml}`,
-    `      </_EB>`,
-    `    </div>`,
-    `  );`,
+    `  // Shadcn primitives: render directly with scale`,
+    `  if (fn) {`,
+    `    const s: number = comp.previewScale || 0.65;`,
+    `    const centered = s >= 0.9;`,
+    `    const wPct = (+(100 / s).toFixed(1)) + "%";`,
+    `    const innerStyle: React.CSSProperties = centered`,
+    `      ? { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%) scale(" + s + ")", transformOrigin: "center center", pointerEvents: "none" }`,
+    `      : { position: "absolute", top: 0, left: 0, width: wPct, transform: "scale(" + s + ")", transformOrigin: "top left", pointerEvents: "none" };`,
+    `    return (`,
+    `      <div style={{ height: 140, overflow: "hidden", position: "relative", background: "#fff" }}>`,
+    `        <_EB fallback={shapeHtml}>`,
+    `          <_PW><div style={innerStyle}>{fn()}</div></_PW>`,
+    `        </_EB>`,
+    `      </div>`,
+    `    );`,
+    `  }`,
+    `  // Project components: embed their own story as iframe`,
+    `  if (storyId) {`,
+    `    return (`,
+    `      <div style={{ height: 140, overflow: "hidden", position: "relative", background: "#fff" }}>`,
+    `        <iframe`,
+    `          src={"/iframe.html?id=" + storyId + "&viewMode=story"}`,
+    `          style={{ width: "300%", height: "424px", transform: "scale(0.333)", transformOrigin: "top left", border: "none", pointerEvents: "none", display: "block" }}`,
+    `          loading="lazy"`,
+    `        />`,
+    `      </div>`,
+    `    );`,
+    `  }`,
+    `  // Fallback: shape HTML`,
+    `  return <div style={{ height: 140, display: "flex", alignItems: "center", justifyContent: "center" }} dangerouslySetInnerHTML={{ __html: comp.previewHtml }} />;`,
     `};`,
     `const InventoryCard = ({ comp }: { comp: any }) => (`,
     `  <div style={{ border: "1px solid " + (comp.active ? "#e5e7eb" : "#f0f0f0"), borderRadius: 10, overflow: "hidden", background: comp.active ? "#fff" : "#fafafa", display: "flex", flexDirection: "column" as any, boxShadow: comp.active ? "0 1px 3px rgba(0,0,0,0.05)" : "none", opacity: comp.active ? 1 : 0.55 }}>`,