vibe-design-system 2.8.72 → 2.8.74

package/package.json

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

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

@@ -2415,7 +2415,7 @@ function scanGridSystemFallback() {
   return { breakpoints, gridCols, gaps, maxWidths, containerCount };
 }
 
-function writeFoundationsStories(foundations) {
+function writeFoundationsStories(foundations, components) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
 
@@ -3591,15 +3591,33 @@ function writeFoundationsStories(foundations) {
     const effectiveEasings   = easingRows.length   > 0 ? easingRows.slice(0, 4)   : TAILWIND_DEFAULT_EASINGS;
     const hasCustomDurations = durationRows.length > 0;
 
+    // ── Scan comp.tokens[] for all motion utilities (project-specific) ─────────
+    // This captures transition-*, duration-*, animate-*, ease-*, delay-* from every component
+    const motionPattern = /^(transition|duration|animate|ease|delay)-/;
+    const compMotionCounts = {};
+    for (const comp of (components || [])) {
+      for (const tok of (comp.tokens || [])) {
+        if (motionPattern.test(tok)) {
+          compMotionCounts[tok] = (compMotionCounts[tok] || 0) + 1;
+        }
+      }
+    }
+    // Merge with tokenUsage.animations (captures animate-* from page-level scans too)
+    for (const a of (foundations?.tokenUsage?.animations || [])) {
+      compMotionCounts[a.token] = (compMotionCounts[a.token] || 0) + a.count;
+    }
     // Which duration tokens are actually used in the project?
     const usedDurationKeys = new Set(
-      (foundations?.tokenUsage?.animations || [])
-        .filter(a => a.token.startsWith("duration-"))
-        .map(a => a.token.replace("duration-", ""))
+      Object.keys(compMotionCounts)
+        .filter(t => t.startsWith("duration-"))
+        .map(t => t.replace("duration-", ""))
     );
 
-    // All motion-related token chips from tokenUsage
-    const motionChips = (foundations?.tokenUsage?.animations || []).slice(0, 24);
+    // All motion-related token chips sorted by usage count
+    const motionChips = Object.entries(compMotionCounts)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 24)
+      .map(([token, count]) => ({ token, count }));
 
     const motionContent = [
       "import React from \"react\";",
@@ -3918,7 +3936,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 +4207,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];
@@ -4687,7 +4711,7 @@ function main() {
 
   ensureDir(STORIES_DIR);
   ensureDir(path.join(STORIES_DIR, "foundations"));
-  writeFoundationsStories(foundations);
+  writeFoundationsStories(foundations, components);
   writeCursorRules(components, foundations);
   const componentSuggestions = data.componentSuggestions;
   if (componentSuggestions?.length) {