vibe-design-system 2.8.68 → 2.8.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.68",
+  "version": "2.8.70",
   "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,24 @@ 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;
+    importInfoMap[comp.name] = { identifier, importAlias, isDefault, actualExport, skip: false };
 
     if (!seenAliases.has(importAlias)) {
       seenAliases.add(importAlias);
-      orderedImports.push({ identifier, importAlias, isDefault });
+      orderedImports.push({ identifier, importAlias, isDefault, actualExport });
     }
   }
 
@@ -4144,16 +4177,19 @@ 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 entries (only for non-skipped components) ─────────────────
   const TEXT_CHILD_NAMES = new Set(['button','badge','toggle','label','link','chip','tag','pill']);
   const previewEntries = components
-    .filter(comp => importInfoMap[comp.name])
+    .filter(comp => importInfoMap[comp.name] && !importInfoMap[comp.name].skip)
     .map(comp => {
       const { identifier } = importInfoMap[comp.name];
       const hasText = TEXT_CHILD_NAMES.has(identifier.toLowerCase());
@@ -4200,7 +4236,7 @@ function writeComponentInventoryStory(components, foundations) {
     `const uniqueTokens = ${uniqueTokens};`,
     ``,
     // CardPreview: renders the actual component at the right scale, falls back to shape HTML
-    `const CardPreview = ({ comp }: { comp: any }) => {`,
+    `const _InvPreview = ({ comp }: { comp: any }) => {`,
     `  const s: number = comp.previewScale || 0.4;`,
     `  const centered = s >= 0.9;`,
     `  const fn = PREVIEWS[comp.name];`,
@@ -4224,10 +4260,10 @@ function writeComponentInventoryStory(components, foundations) {
     `    </div>`,
     `  );`,
     `};`,
-    `const Card = ({ comp }: { comp: any }) => (`,
+    `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 }}>`,
     `    <div style={{ background: comp.active ? "#f8f9fa" : "#f5f5f5", borderBottom: "1px solid #f0f0f0" }}>`,
-    `      <CardPreview comp={comp} />`,
+    `      <_InvPreview comp={comp} />`,
     `    </div>`,
     `    <div style={{ padding: "10px 12px" }}>`,
     `      <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 5 }}>`,
@@ -4279,8 +4315,8 @@ function writeComponentInventoryStory(components, foundations) {
     `              {inactive.length > 0 && <span style={{ fontSize: 12, background: "#f3f4f6", color: "#9ca3af", padding: "2px 9px", borderRadius: 12 }}>{inactive.length} installed</span>}`,
     `            </div>`,
     `            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12 }}>`,
-    `              {active.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
-    `              {expanded && inactive.map((comp: any) => <Card key={comp.name} comp={comp} />)}`,
+    `              {active.map((comp: any) => <InventoryCard key={comp.name} comp={comp} />)}`,
+    `              {expanded && inactive.map((comp: any) => <InventoryCard key={comp.name} comp={comp} />)}`,
     `            </div>`,
     `          </div>`,
     `        );`,