vibe-design-system 2.8.75 → 2.8.78

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1397,9 +1397,14 @@ function extractFoundations() {
     if (cssChunks.length > 0) {
       const css = cssChunks.join("\n");
 
-      const rootMatch = css.match(/:root\s*\{([\s\S]*?)\}/);
-      if (rootMatch) {
-        const rootVars = parseCssVarBlock(rootMatch[1]);
+      // Collect ALL :root blocks (a file may have multiple, e.g. a small one early
+      // and the main one inside @layer base { :root { } })
+      const rootBlocks = [];
+      const rootGlobalRe = /:root\s*\{([\s\S]*?)\}/g;
+      let rootM;
+      while ((rootM = rootGlobalRe.exec(css)) !== null) { rootBlocks.push(rootM[1]); }
+      if (rootBlocks.length > 0) {
+        const rootVars = parseCssVarBlock(rootBlocks.join("\n"));
         for (const [name, value] of Object.entries(rootVars)) {
           if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
             const hsl = `hsl(${value})`;
@@ -1424,11 +1429,13 @@ function extractFoundations() {
         }
       }
 
-      const bodyMatch = css.match(/body\s*\{[^}]*font-family:\s*([^;]+);/s);
+      // body { font-family } — supports nested @layer base { body { } } structure
+      const bodyMatch = css.match(/\bbody\s*\{[\s\S]*?font-family:\s*([^;]+);/) ||
+                        css.match(/body\s*\{[^}]*font-family:\s*([^;]+);/s);
       if (bodyMatch) typography.body = bodyMatch[1].trim();
       const monoMatch = css.match(/code,\s*pre,\s*\.font-mono\s*\{[^}]*font-family:\s*([^;]+);/s);
       if (monoMatch) typography.mono = monoMatch[1].trim();
-      // Tailwind v4: CSS custom properties for fonts (--font-sans, --font-mono, --font-weight-*)
+      // CSS custom properties for fonts (--font-sans, --font-mono, --font-display, etc.)
       const fontVarRe = /--font([\w-]*):\s*([^;\n]+);/g;
       let fvm;
       while ((fvm = fontVarRe.exec(css)) !== null) {
@@ -1436,6 +1443,18 @@ function extractFoundations() {
         const val = fvm[2].trim();
         if (!typography[key]) typography[key] = val;
       }
+      // Resolve var(--font-*) references in body/mono to actual font names
+      // Key construction must match the fontVarRe loop: --font-sans → "font-sans" → "fontSans"
+      function resolveTypoVar(val) {
+        if (!val || !val.startsWith("var(")) return val;
+        const m = val.match(/var\(--font-([\w-]+)\)/);
+        if (!m) return val;
+        // prepend "-" so camelCase conversion matches: "font-" + "sans" → "fontSans"
+        const key = `font-${m[1]}`.replace(/-([a-zA-Z])/g, (_, c) => c.toUpperCase());
+        return (typography[key] && !typography[key].startsWith("var(")) ? typography[key] : val;
+      }
+      if (typography.body) typography.body = resolveTypoVar(typography.body);
+      if (typography.mono) typography.mono = resolveTypoVar(typography.mono);
 
       // ── Type Scale: extract --text-* font sizes + line-heights from compiled CSS
       const textSteps = ["xs","sm","base","lg","xl","2xl","3xl","4xl","5xl","6xl","7xl","8xl","9xl"];
@@ -1910,6 +1929,33 @@ function extractFoundations() {
     }
   }
 
+  // ── Scan source files for arbitrary Tailwind [font-family:'FontName'] usage ──
+  // Covers projects like Blurple where the font is only set via arbitrary Tailwind classes
+  if (SRC_DIR && fs.existsSync(SRC_DIR)) {
+    const arbFonts = new Set();
+    const arbRe = /\[font-family:\s*'([^']+)'/g;
+    function scanSrcForFonts(dir) {
+      if (!fs.existsSync(dir)) return;
+      let entries;
+      try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch (_) { return; }
+      for (const e of entries) {
+        const full = path.join(dir, e.name);
+        if (e.isDirectory()) {
+          if (!IGNORE_DIRS.includes(e.name)) scanSrcForFonts(full);
+        } else if (/\.(tsx|jsx|ts|js|css)$/i.test(e.name)) {
+          try {
+            const content = fs.readFileSync(full, "utf-8");
+            arbRe.lastIndex = 0;
+            let m;
+            while ((m = arbRe.exec(content)) !== null) arbFonts.add(m[1]);
+          } catch (_) {}
+        }
+      }
+    }
+    scanSrcForFonts(SRC_DIR);
+    if (arbFonts.size > 0) typography.arbitraryFonts = Array.from(arbFonts);
+  }
+
   return {
     colors: foundationsColors,
     typography,
@@ -2101,6 +2147,66 @@ function extractButtonUsage() {
   };
 }
 
+/**
+ * Scan all non-component source files and count how many times each variant value
+ * is explicitly used for each component (e.g. <Button variant="destructive">).
+ * Returns a map: { [compName]: { [variantValue]: count } }
+ * Only static string literals are counted; dynamic values are ignored.
+ */
+function extractVariantUsage(componentResults) {
+  if (!SRC_DIR || !fs.existsSync(SRC_DIR)) return;
+  const compDir = COMPONENTS_DIR ? path.resolve(COMPONENTS_DIR) : null;
+
+  // Collect all .tsx/.jsx/.ts/.js files in SRC_DIR that are NOT inside COMPONENTS_DIR
+  function collectNonCompFiles(dir, acc = []) {
+    if (!fs.existsSync(dir)) return acc;
+    let entries;
+    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch (_) { return acc; }
+    for (const e of entries) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory()) {
+        if (IGNORE_DIRS.includes(e.name)) continue;
+        if (compDir && path.resolve(full) === compDir) continue; // skip components dir
+        collectNonCompFiles(full, acc);
+      } else if (e.isFile() && /\.(tsx|jsx|ts|js)$/i.test(e.name) &&
+                 !e.name.endsWith(".stories.tsx") && !e.name.endsWith(".stories.ts") &&
+                 !e.name.endsWith(".test.tsx") && !e.name.endsWith(".test.ts") &&
+                 !e.name.endsWith(".spec.tsx") && !e.name.endsWith(".spec.ts")) {
+        acc.push(full);
+      }
+    }
+    return acc;
+  }
+
+  const nonCompFiles = collectNonCompFiles(SRC_DIR);
+  if (nonCompFiles.length === 0) return;
+
+  for (const comp of componentResults) {
+    const name = comp.name;
+    // Match <ComponentName ...variant="X" or variant='X' anywhere on the same tag
+    // Simple regex: looks for <Name followed (anywhere on the line) by variant="X"
+    const variantRe = new RegExp(
+      `<${name}[\\s\\S]{0,300}?\\bvariant=(?:"([^"]+)"|'([^']+)')`,
+      "g"
+    );
+    const usage = {};
+    for (const file of nonCompFiles) {
+      let content;
+      try { content = fs.readFileSync(file, "utf-8"); } catch (_) { continue; }
+      // Reset lastIndex for global regex per file
+      variantRe.lastIndex = 0;
+      let m;
+      while ((m = variantRe.exec(content)) !== null) {
+        const val = m[1] || m[2];
+        if (val) usage[val] = (usage[val] || 0) + 1;
+      }
+    }
+    if (Object.keys(usage).length > 0) {
+      comp.variantUsage = usage;
+    }
+  }
+}
+
 function scan() {
   const relativeFiles = COMPONENTS_DIR ? getAllComponentFiles(COMPONENTS_DIR) : [];
   if (!COMPONENTS_DIR) {
@@ -2144,6 +2250,9 @@ function scan() {
       });
     }
   }
+  // Attach real-world variant usage (which variant values are actually passed in pages/layouts)
+  extractVariantUsage(results);
+
   const foundations = extractFoundations();
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };

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

@@ -679,7 +679,7 @@ function buildComponentVariantMap(source, effectiveProps) {
 /**
  * Generate multi-dimension stories: individual per variant, per size, per state, + AllVariants grid.
  */
-function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, defaultArgLines, componentName) {
+function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, defaultArgLines, componentName, variantUsage) {
   const lines = [];
   const { dimensions, booleanStates, primaryDimension, secondaryDimensions } = variantMap;
 
@@ -690,10 +690,26 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
     return !match || !allDimNames.has(match[1]);
   });
 
+  // Pre-compute filtered primary values (used in sections A and D).
+  // variantUsage is comp.variantUsage: { [variantValue]: count }  (only for "variant" prop)
+  // If usage data exists, keep only values that were actually used + the default value.
+  // If no usage data exists (old scans / dynamic-only usage) → keep all values.
+  let filteredPrimaryValues = null;
+  if (primaryDimension && dimensions[primaryDimension]) {
+    const _pd = dimensions[primaryDimension];
+    const _def = _pd.default || _pd.values[0];
+    // Only apply filtering when the primary dimension is "variant" (that's what we scan)
+    const _umap = (primaryDimension === "variant" && variantUsage && Object.keys(variantUsage).length > 0)
+      ? variantUsage : null;
+    filteredPrimaryValues = _umap
+      ? _pd.values.filter(v => v === _def || _umap[v])
+      : _pd.values;
+  }
+
   // --- A. Primary dimension stories (one per value) ---
   if (primaryDimension && dimensions[primaryDimension]) {
-    const dim = dimensions[primaryDimension];
-    const defaultValue = dim.default || dim.values[0];
+    const dim = { ...dimensions[primaryDimension], values: filteredPrimaryValues || dimensions[primaryDimension].values };
+    const defaultValue = dim.default || dimensions[primaryDimension].values[0];
 
     // Default story uses the default value
     lines.push(`export const Default: Story = {`);
@@ -706,7 +722,7 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
     lines.push(`};`);
     lines.push("");
 
-    // Remaining values get their own stories
+    // Remaining values get their own stories (filtered by actual project usage)
     for (const val of dim.values) {
       if (val === defaultValue) continue;
       const storyName = capitalize(val);
@@ -778,9 +794,9 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
     lines.push("");
   }
 
-  // --- D. AllVariants grid story (only if primary has 2+ values) ---
-  if (primaryDimension && dimensions[primaryDimension] && dimensions[primaryDimension].values.length >= 2) {
-    const primaryValues = dimensions[primaryDimension].values;
+  // --- D. AllVariants grid story (only if primary has 2+ used values) ---
+  if (primaryDimension && filteredPrimaryValues && filteredPrimaryValues.length >= 2) {
+    const primaryValues = filteredPrimaryValues;
     const secondaryDim = secondaryDimensions.find((d) => dimensions[d] && dimensions[d].values.length >= 2);
 
     lines.push(`export const AllVariants: Story = {`);
@@ -2116,7 +2132,8 @@ function buildStoryFileContent(comp) {
 
   if (hasDimensions) {
     const multiStories = buildMultiDimensionStories(
-      variantMap, renderLine, childrenArgLine, defaultArgLines, componentName
+      variantMap, renderLine, childrenArgLine, defaultArgLines, componentName,
+      comp.variantUsage || null
     );
     if (multiStories) {
       lines.push(multiStories);
@@ -2182,9 +2199,11 @@ function buildStoryFileContent(comp) {
       const resolvedColors = colorRaw.map(token => {
         const m = token.match(/^(?:bg|text|border|ring|from|to|fill|stroke)-(.+)$/);
         const key = m ? m[1] : null;
-        const entry = key ? foundColors[key] : null;
+        // Strip opacity modifier (e.g. "muted/20" → "muted") as a fallback
+        const baseKey = key ? key.replace(/\/[\d.]+$/, "") : null;
+        const entry = key ? (foundColors[key] || (baseKey !== key ? foundColors[baseKey] : null)) : null;
         const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
-        return { token, hex, label: key };
+        return { token, hex, label: baseKey || key };
       });
 
       const hasContent = resolvedColors.length > 0 || spacingRaw.length > 0 || typographyRaw.length > 0 || radiusRaw.length > 0 || animRaw.length > 0;
@@ -2634,15 +2653,34 @@ function writeFoundationsStories(foundations, components) {
     const usedTextSizes = (foundations?.tokenUsage?.textSizes || []);
     const usedTextMap = Object.fromEntries(usedTextSizes.map(({ token, count }) => [token, count]));
 
-    // Font families
+    // Font families — build from known keys, then add arbitrary fonts found in source
     const fontFamilyKeys = ["fontSans", "fontMono", "body", "heading", "tailwindSans", "tailwindMono"];
-    const familyRows = Object.entries(typo)
-      .filter(([k]) => fontFamilyKeys.includes(k) || k.toLowerCase().includes("font") && !k.toLowerCase().includes("weight") && k !== "typeScale" && k !== "fontSize")
+    const rawFamilyRows = Object.entries(typo)
+      .filter(([k]) => k !== "arbitraryFonts" &&
+        (fontFamilyKeys.includes(k) || (k.toLowerCase().includes("font") && !k.toLowerCase().includes("weight") && k !== "typeScale" && k !== "fontSize")))
       .map(([k, v]) => {
         const val = typeof v === "object" && v !== null ? (v.family || v.value || "") : Array.isArray(v) ? v.join(", ") : String(v);
         return { token: k, value: val };
       })
-      .filter((r) => r.value);
+      .filter((r) => r.value && !r.value.startsWith("var(")); // drop unresolved CSS var refs
+
+    // Add arbitrary [font-family:'Name'] fonts found in source files (e.g. Blurple's Urbanist)
+    if (Array.isArray(typo.arbitraryFonts)) {
+      for (const f of typo.arbitraryFonts) {
+        if (!rawFamilyRows.some((r) => r.value.includes(f))) {
+          rawFamilyRows.push({ token: "projectFont", value: `'${f}', sans-serif` });
+        }
+      }
+    }
+
+    // Deduplicate: keep only the first entry per unique primary font name
+    const seenFontNames = new Set();
+    const familyRows = rawFamilyRows.filter((r) => {
+      const primary = r.value.split(",")[0].trim().replace(/['"]/g, "").toLowerCase();
+      if (seenFontNames.has(primary)) return false;
+      seenFontNames.add(primary);
+      return true;
+    });
 
     // Font weights — check fontWeightScale (from twTheme.fontWeight), then legacy specific keys, then Tailwind defaults
     const weightKeys = ["fontWeightNormal", "fontWeightMedium", "fontWeightSemibold", "fontWeightBold"];
@@ -2665,7 +2703,9 @@ function writeFoundationsStories(foundations, components) {
     // Reverse type scale for display (largest first)
     const scaleDesc = [...typeScale].reverse();
 
-    const sansFamily = typo.fontSans || typo.tailwindSans || typo.body || "system-ui, sans-serif";
+    const firstArbitraryFont = Array.isArray(typo.arbitraryFonts) && typo.arbitraryFonts.length > 0
+      ? `'${typo.arbitraryFonts[0]}', sans-serif` : null;
+    const sansFamily = typo.fontSans || typo.body || firstArbitraryFont || typo.tailwindSans || "system-ui, sans-serif";
 
     const typoContent = [
       "import React from \"react\";",