vibe-design-system 2.8.73 → 2.8.74

package/package.json

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