vibe-design-system 2.8.72 → 2.8.73

package/package.json

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