vibe-design-system 2.8.76 → 2.8.79

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1429,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) {
@@ -1441,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"];
@@ -1915,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,
@@ -2106,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) {
@@ -2149,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);
@@ -2636,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"];
@@ -2667,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\";",

package/vds-core-template/storybook-adapt.mjs

@@ -262,6 +262,89 @@ function injectViteConfigAliases(projectRoot) {
   console.log(`[VDS] Storybook adapt: injected vite aliases: ${missingAliases.map(([k]) => k).join(", ")}`);
 }
 
+// ============================================================
+// VERSION-PINNED IMPORT HANDLING (Bolt/Lovable/AI-generated)
+// ============================================================
+
+/** Detect if import specifier has a @version suffix (e.g. @radix-ui/react-slot@1.1.2) */
+function isVersionPinned(spec) {
+  return /^(?:@[\w.-]+\/)?[\w.-]+@\d+\.\d+/.test(spec) && !spec.startsWith("@/");
+}
+
+/** Scan source files for any version-pinned imports */
+function hasVersionPinnedImports() {
+  if (!fs.existsSync(SRC_DIR)) return false;
+  const files = getAllSourceFiles(SRC_DIR, SRC_DIR).map((r) => path.join(SRC_DIR, r));
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const spec of extractImports(content)) {
+        if (isVersionPinned(spec)) return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
+/**
+ * Remove wrong version alias entries previously injected by a broken VDS run.
+ * These look like: "@radix-ui/react-slot@1.1.2": path.resolve(process.cwd(), "@radix-ui/react-slot"),
+ * They point to non-existent paths and must be replaced by the plugin approach.
+ */
+function cleanupWrongVersionAliases(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+  const before = content;
+  // Remove any alias line where key has @version suffix
+  content = content.replace(
+    /\n?\s*"(?:@[\w.-]+\/)?[\w.-]+@[\d.]+"\s*:\s*path\.resolve\(process\.cwd\(\),\s*"[^"]+"\),?/g,
+    ""
+  );
+  if (content !== before) {
+    fs.writeFileSync(mainPath, content, "utf-8");
+    console.log("[VDS] Storybook adapt: cleaned up incorrect version-pinned aliases from main.ts.");
+  }
+}
+
+/**
+ * Inject a Vite plugin that strips @version suffixes from package import specifiers.
+ * e.g.  @radix-ui/react-slot@1.1.2  →  @radix-ui/react-slot  (resolved from node_modules normally).
+ * Only added to viteFinal-based configs (not Next.js @storybook/nextjs).
+ */
+function injectVersionStripPlugin(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+
+  if (content.includes("vds-version-pin-strip")) return; // already injected
+  if (!content.includes("viteFinal")) return;            // only for Vite-based storybook
+
+  // The plugin block to inject. Double-escaped backslashes become single in the written file.
+  const pluginBlock = `    plugins: [
+      {
+        name: "vds-version-pin-strip",
+        enforce: "pre",
+        async resolveId(id) {
+          // Strip @version suffix: @radix-ui/react-slot@1.1.2 → @radix-ui/react-slot
+          const m = id.match(/^((?:@[\\w.-]+\\/)?[\\w.-]+)@[\\d]+\\.[\\d]/);
+          if (m) return this.resolve(m[1], undefined, { skipSelf: true });
+        },
+      },
+    ],
+    `;
+
+  // Insert before the resolve: { block inside viteFinal
+  const resolvePattern = /([ \t]+)(resolve\s*:\s*\{)/;
+  if (resolvePattern.test(content)) {
+    content = content.replace(resolvePattern, (_, indent, resolveKw) =>
+      `${indent}${pluginBlock}${resolveKw}`
+    );
+    fs.writeFileSync(mainPath, content, "utf-8");
+    console.log("[VDS] Storybook adapt: injected vds-version-pin-strip Vite plugin.");
+  }
+}
+
 function main() {
   const projectRoot = PROJECT_ROOT;
   if (!fs.existsSync(path.join(projectRoot, ".storybook"))) {
@@ -272,10 +355,16 @@ function main() {
   injectViteConfigAliases(projectRoot);
   reportUnresolvedImports(projectRoot);
   const problematic = collectProblematicImports(projectRoot);
-  if (problematic.size === 0) return;
-  writeMocks(projectRoot, problematic);
-  injectAliases(projectRoot, problematic);
-  console.log("[VDS] Storybook adapt: mocked", [...problematic].join(", "));
+  if (problematic.size > 0) {
+    writeMocks(projectRoot, problematic);
+    injectAliases(projectRoot, problematic);
+    console.log("[VDS] Storybook adapt: mocked", [...problematic].join(", "));
+  }
+  // Handle version-pinned imports (AI/Bolt/Lovable-generated projects with @pkg@version syntax)
+  if (hasVersionPinnedImports()) {
+    cleanupWrongVersionAliases(projectRoot);
+    injectVersionStripPlugin(projectRoot);
+  }
 }
 
 main();