vibe-design-system 2.8.69 → 2.8.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.69",
+  "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());