vibe-design-system 2.8.71 → 2.8.72

package/package.json

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

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

@@ -4205,9 +4205,10 @@ function writeComponentInventoryStory(components, foundations) {
     });
 
   // ── 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('/')
+  // Uses Storybook's sanitize logic: lowercase + replace non-alphanumeric with '-'
+  // PascalCase names stay as one word ("AppHeader" → "appheader"), matching real IDs
+  function toStoryId(category, pascalName) {
+    return [category, pascalName].join('/')
       .toLowerCase().replace(/[^a-z0-9/]+/g, '-').replace(/-*\/+/g, '-')
       .replace(/-+/g, '-').replace(/^-|-$/g, '') + '--default';
   }
@@ -4220,7 +4221,12 @@ function writeComponentInventoryStory(components, foundations) {
       // 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))}`;
+      // Use PascalCase identifier to match Storybook story title field (no hyphenation of PascalCase)
+      const pascalId = toPascalLocal(comp.name);
+      // Only include if a story file actually exists for this component
+      const storyFile = path.join(STORIES_DIR, `${pascalId}.stories.tsx`);
+      if (!fs.existsSync(storyFile)) return null; // no story → shape HTML fallback
+      return `  ${JSON.stringify(comp.name)}: ${JSON.stringify(toStoryId(cat, pascalId))}`;
     })
     .filter(Boolean);