vibe-design-system 2.8.71 → 2.8.73

package/package.json

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

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

@@ -3918,7 +3918,7 @@ function buildInventoryPreviewHtml(compName, category, colorSwatches, tokens) {
   if (/^(tabs|tab)$/.test(n)) {
     return wrap(`<div style="width:85%;box-sizing:border-box"><div style="display:flex;background:${bg};border-radius:${rad}px;padding:3px;gap:2px"><div style="flex:1;background:${bg === "#f3f4f6" ? "#fff" : hex2(bg)};border-radius:${Math.max(rad-2,2)}px;padding:4px 0;font-size:10px;font-weight:600;color:${txt};text-align:center">Tab 1</div><div style="flex:1;padding:4px 0;font-size:10px;color:${txt};opacity:0.5;text-align:center">Tab 2</div><div style="flex:1;padding:4px 0;font-size:10px;color:${txt};opacity:0.5;text-align:center">Tab 3</div></div></div>`);
   }
-  if (/^(table|datatable)$/.test(n) || category === "Text and Data Display") {
+  if (/^(table|datatable)$/.test(n) || (category === "Text and Data Display" && !/chart|sparkline/.test(n))) {
     return wrap(`<div style="border:1px solid ${brd};border-radius:${rad}px;overflow:hidden;width:85%;box-sizing:border-box"><div style="display:flex;background:${hex2(bg)};border-bottom:1px solid ${brd};padding:4px 8px;gap:8px">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.3;border-radius:1px"></div>`).join("")}</div><div style="display:flex;background:${bg};padding:4px 8px;gap:8px">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.15;border-radius:1px"></div>`).join("")}</div><div style="display:flex;background:${bg};padding:4px 8px;gap:8px;opacity:0.7">${[1,1,1].map(()=>`<div style="flex:1;height:5px;background:${txt};opacity:0.15;border-radius:1px"></div>`).join("")}</div></div>`);
   }
   if (/^(sidebar|appsidebar)$/.test(n)) {
@@ -4189,11 +4189,17 @@ function writeComponentInventoryStory(components, foundations) {
   });
 
   // ── 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']);
+  // Components that need context providers or have no visible closed state — use shape HTML
+  const PREVIEW_CONTEXT_SKIP = new Set(['toast', 'toaster', 'sonner', 'usetoast', 'alertdialog', 'hovercard']);
+  // Container/text components that need children to be visible (renders text inside)
+  const TEXT_CHILD_NAMES = new Set(['button','badge','toggle','label','link','chip','tag','pill','card','alert','marketstatscard']);
   const previewEntries = components
     .filter(comp => {
       const info = importInfoMap[comp.name];
-      return info && !info.skip && info.isShadcn;
+      if (!info || info.skip || !info.isShadcn) return false;
+      // Skip components that require context providers (Toast, Toaster, Sonner)
+      if (PREVIEW_CONTEXT_SKIP.has(info.identifier.toLowerCase())) return false;
+      return true;
     })
     .map(comp => {
       const { identifier } = importInfoMap[comp.name];
@@ -4205,9 +4211,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 +4227,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);