vibe-design-system 2.8.79 → 2.8.82

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1429,11 +1429,17 @@ function extractFoundations() {
         }
       }
 
-      // 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);
+      // body { font-family } — Tailwind v4 sets font on html/:host, NOT body
+      // Use [^}]* to stay within block boundaries ([\s\S]*? crosses blocks → mono font false-positive)
+      const bodyMatch =
+        css.match(/\bbody\s*\{[^}]*font-family:\s*([^;]+);/) ||
+        css.match(/html\s*(?:,\s*:host)?\s*\{[^}]*font-family:\s*([^;]+);/); // Tailwind v4
       if (bodyMatch) typography.body = bodyMatch[1].trim();
-      const monoMatch = css.match(/code,\s*pre,\s*\.font-mono\s*\{[^}]*font-family:\s*([^;]+);/s);
+      // Mono: code/kbd/samp/pre block (Tailwind v4 uses code,kbd,samp,pre not code,pre,.font-mono)
+      const monoMatch =
+        css.match(/code,\s*pre,\s*\.font-mono\s*\{[^}]*font-family:\s*([^;]+);/) ||
+        css.match(/code,\s*kbd[^{]*\{[^}]*font-family:\s*([^;]+);/) ||
+        css.match(/\bcode\b[^{,]*\{[^}]*font-family:\s*([^;]+);/);
       if (monoMatch) typography.mono = monoMatch[1].trim();
       // CSS custom properties for fonts (--font-sans, --font-mono, --font-display, etc.)
       const fontVarRe = /--font([\w-]*):\s*([^;\n]+);/g;
@@ -1444,14 +1450,27 @@ function extractFoundations() {
         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"
+      // Also handles Tailwind v4 --default-font-family / --default-mono-font-family chain
       function resolveTypoVar(val) {
         if (!val || !val.startsWith("var(")) return val;
+        // Direct --font-* reference: var(--font-sans) → typography.fontSans
         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 (m) {
+          const key = `font-${m[1]}`.replace(/-([a-zA-Z])/g, (_, c) => c.toUpperCase());
+          return (typography[key] && !typography[key].startsWith("var(")) ? typography[key] : val;
+        }
+        // Tailwind v4: var(--default-font-family, ...) → resolve via fontSans
+        if (val.includes("--default-font-family") && !val.includes("--default-mono")) {
+          if (typography.fontSans && !typography.fontSans.startsWith("var(")) return typography.fontSans;
+          // Fallback: strip the var() wrapper to get the fallback list
+          return val.replace(/^var\(--default-font-family,\s*/, "").replace(/\)\s*$/, "").trim() || val;
+        }
+        // Tailwind v4: var(--default-mono-font-family, ...) → resolve via fontMono
+        if (val.includes("--default-mono-font-family")) {
+          if (typography.fontMono && !typography.fontMono.startsWith("var(")) return typography.fontMono;
+          return val.replace(/^var\(--default-mono-font-family,\s*/, "").replace(/\)\s*$/, "").trim() || val;
+        }
+        return val;
       }
       if (typography.body) typography.body = resolveTypoVar(typography.body);
       if (typography.mono) typography.mono = resolveTypoVar(typography.mono);
@@ -2207,6 +2226,21 @@ function extractVariantUsage(componentResults) {
   }
 }
 
+/**
+ * Heuristic: detect complex page-level components that should not get individual stories.
+ * Criteria: 500+ lines AND 4+ internal capitalized component definitions AND no cva()/forwardRef.
+ * Examples: a 900-line MethodologyMap.tsx with 8 inline sub-components.
+ */
+function isComplexPageComponent(content) {
+  const lines = content.split("\n").length;
+  if (lines < 500) return false;
+  const internalComps = (content.match(/\bconst\s+[A-Z][A-Za-z]+\s*[:=]\s*\(/g) || []).length;
+  if (internalComps < 4) return false;
+  // Don't flag UI primitives that use cva() or forwardRef — those are styled components
+  if (content.includes("cva(") || content.includes("forwardRef")) return false;
+  return true;
+}
+
 function scan() {
   const relativeFiles = COMPONENTS_DIR ? getAllComponentFiles(COMPONENTS_DIR) : [];
   if (!COMPONENTS_DIR) {
@@ -2231,7 +2265,8 @@ function scan() {
       description = "";
     }
     const tokens = extractTailwindTokens(content);
-    results.push({ file: rel, name, group, category, description, tokens });
+    const isPageComponent = isComplexPageComponent(content);
+    results.push({ file: rel, name, group, category, description, tokens, ...(isPageComponent ? { isPageComponent: true } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);

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

@@ -1792,6 +1792,96 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
     }
     lines.push(`};`);
   }
+
+  // --- Design Tokens story (same block as generateStoryFile) ---
+  {
+    const compTokens = Array.isArray(comp.tokens) ? comp.tokens : [];
+    const foundColors = FOUNDATIONS_DATA?.colors || {};
+    if (compTokens.length >= 3) {
+      const cleanTokens = compTokens.filter(t => !/:/.test(t));
+      const colorRaw      = cleanTokens.filter(t =>
+        /^(bg|text|border|ring|from|to|fill|stroke)-/.test(t) &&
+        !/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|\d)/.test(t)
+      );
+      const spacingRaw    = cleanTokens.filter(t => /^(p[xylrbt]?-|m[xylrbt]?-|gap|space-[xy]|w-|h-|min-[wh]|max-[wh]|size-)/.test(t));
+      const typographyRaw = cleanTokens.filter(t => /^(text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)|font-)/.test(t));
+      const radiusRaw     = cleanTokens.filter(t => /^rounded/.test(t));
+      const animRaw       = cleanTokens.filter(t => /^(transition|duration|animate|ease|delay)-/.test(t));
+      const resolvedColors = colorRaw.map(token => {
+        const m = token.match(/^(?:bg|text|border|ring|from|to|fill|stroke)-(.+)$/);
+        const key = m ? m[1] : null;
+        const baseKey = key ? key.replace(/\/[\d.]+$/, "") : null;
+        const entry = key ? (foundColors[key] || (baseKey !== key ? foundColors[baseKey] : null)) : null;
+        const isValidCssColor = (v) => /^#[0-9a-fA-F]{3,8}$/.test(v) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lch|lab|color)\s*\(/.test(v) || v === 'transparent';
+        const hex = entry?.hex && isValidCssColor(entry.hex) ? entry.hex : null;
+        return { token, hex, label: baseKey || key };
+      });
+      const hasContent = resolvedColors.length > 0 || spacingRaw.length > 0 || typographyRaw.length > 0 || radiusRaw.length > 0 || animRaw.length > 0;
+      if (hasContent) {
+        lines.push("");
+        lines.push(`export const Tokens: Story = {`);
+        lines.push(`  name: "Design Tokens",`);
+        lines.push(`  parameters: { layout: "fullscreen" },`);
+        lines.push(`  render: () => {`);
+        lines.push(`    const colorTokens = ${JSON.stringify(resolvedColors)};`);
+        lines.push(`    const spacingTokens = ${JSON.stringify(spacingRaw)};`);
+        lines.push(`    const typographyTokens = ${JSON.stringify(typographyRaw)};`);
+        lines.push(`    const radiusTokens = ${JSON.stringify(radiusRaw)};`);
+        lines.push(`    const animationTokens = ${JSON.stringify(animRaw)};`);
+        lines.push(`    const chip = (label: string, bg: string, color: string) => (`);
+        lines.push(`      <span key={label} style={{ fontFamily: "monospace", fontSize: 11, background: bg, color, padding: "3px 9px", borderRadius: 5, border: \`1px solid \${bg === "#f9fafb" ? "#e5e7eb" : bg}\`, whiteSpace: "nowrap" as any }}>{label}</span>`);
+        lines.push(`    );`);
+        lines.push(`    const section = (title: string, children: any) => (`);
+        lines.push(`      <section style={{ marginBottom: 28 }}>`);
+        lines.push(`        <p style={{ margin: "0 0 10px", fontSize: 11, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.08em" }}>{title}</p>`);
+        lines.push(`        {children}`);
+        lines.push(`      </section>`);
+        lines.push(`    );`);
+        lines.push(`    return (`);
+        lines.push(`      <div style={{ padding: 40, background: "#fff", fontFamily: "system-ui,sans-serif", color: "#111", minHeight: "100vh", width: "100%" }}>`);
+        lines.push(`        <h2 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 6px" }}>Design Tokens</h2>`);
+        lines.push(`        <p style={{ fontSize: 13, color: "#6b7280", margin: "0 0 32px" }}>Tailwind utilities used in <code style={{ background: "#f3f4f6", padding: "1px 6px", borderRadius: 4, fontSize: 12 }}>${componentName}</code> — resolved to project values.</p>`);
+        lines.push(`        {colorTokens.length > 0 && section("Color", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>`);
+        lines.push(`            {colorTokens.map(({ token, hex, label }) => (`);
+        lines.push(`              <div key={token} style={{ display: "flex", alignItems: "center", gap: 7, padding: "7px 12px", border: "1px solid #e5e7eb", borderRadius: 8, background: "#f9fafb" }}>`);
+        lines.push(`                {hex && <span style={{ display: "inline-block", width: 16, height: 16, borderRadius: 4, background: hex, border: "1px solid rgba(0,0,0,0.1)", flexShrink: 0 }} />}`);
+        lines.push(`                <code style={{ fontSize: 12, color: "#374151", fontWeight: 600 }}>{token}</code>`);
+        lines.push(`                {hex && <span style={{ fontSize: 11, color: "#9ca3af" }}>{hex}</span>}`);
+        lines.push(`              </div>`);
+        lines.push(`            ))}`);
+        lines.push(`          </div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {spacingTokens.length > 0 && section("Spacing", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{spacingTokens.map(t => chip(t, "#faf5ff", "#6d28d9"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {typographyTokens.length > 0 && section("Typography", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{typographyTokens.map(t => chip(t, "#fffbeb", "#92400e"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {radiusTokens.length > 0 && section("Border Radius", (`);
+        lines.push(`          <div style={{ display: "flex", gap: 16, flexWrap: "wrap", alignItems: "flex-end" }}>`);
+        lines.push(`            {radiusTokens.map(t => {`);
+        lines.push(`              const px = t === "rounded-none" ? 0 : t === "rounded-sm" ? 2 : t === "rounded" ? 4 : t === "rounded-md" ? 6 : t === "rounded-lg" ? 8 : t === "rounded-xl" ? 12 : t === "rounded-2xl" ? 16 : t === "rounded-3xl" ? 24 : t === "rounded-full" ? 9999 : 4;`);
+        lines.push(`              return (`);
+        lines.push(`                <div key={t} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>`);
+        lines.push(`                  <div style={{ width: 44, height: 44, background: "#6366f1", borderRadius: px }} />`);
+        lines.push(`                  <code style={{ fontSize: 10, color: "#6b7280" }}>{t}</code>`);
+        lines.push(`                </div>`);
+        lines.push(`              );`);
+        lines.push(`            })}`);
+        lines.push(`          </div>`);
+        lines.push(`        ))}`);
+        lines.push(`        {animationTokens.length > 0 && section("Motion", (`);
+        lines.push(`          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>{animationTokens.map(t => chip(t, "#f0fdf4", "#166534"))}</div>`);
+        lines.push(`        ))}`);
+        lines.push(`      </div>`);
+        lines.push(`    );`);
+        lines.push(`  },`);
+        lines.push(`};`);
+      }
+    }
+  }
+
   return lines.join("\n");
 }
 
@@ -2115,42 +2205,46 @@ function buildStoryFileContent(comp) {
   // Component-specific stories for non-variant components (Input, Textarea, etc.)
   // Skip buildSpecialStories when multi-dimension detection found CVA dimensions —
   // generic detection produces better stories than hardcoded ones.
+  let generatedSpecialStories = false;
   if (!hasDimensions) {
     const specialStories = buildSpecialStories(componentName, variants);
     if (specialStories) {
       lines.push(specialStories);
-      return lines.join("\n");
+      generatedSpecialStories = true;
+      // Do NOT return here — fall through to Tokens + Usage stories below
     }
   }
 
-  // Profile-driven render + children — single source of truth via getStoryProfile()
-  const useSafeWrapper = profile === "SAFE";
-  const RenderTarget   = useSafeWrapper ? "SafeWrapper" : "ComponentRef";
-  const argsFallback   = !useSafeWrapper && (componentName && RENDER_ARGS_FALLBACKS[componentName]) || "";
-  const renderLine     = buildProfileRenderLine(profile, RenderTarget, argsFallback);
-  const childrenArgLine = buildProfileChildrenArgLine(profile);
+  if (!generatedSpecialStories) {
+    // Profile-driven render + children — single source of truth via getStoryProfile()
+    const useSafeWrapper = profile === "SAFE";
+    const RenderTarget   = useSafeWrapper ? "SafeWrapper" : "ComponentRef";
+    const argsFallback   = !useSafeWrapper && (componentName && RENDER_ARGS_FALLBACKS[componentName]) || "";
+    const renderLine     = buildProfileRenderLine(profile, RenderTarget, argsFallback);
+    const childrenArgLine = buildProfileChildrenArgLine(profile);
 
-  if (hasDimensions) {
-    const multiStories = buildMultiDimensionStories(
-      variantMap, renderLine, childrenArgLine, defaultArgLines, componentName,
-      comp.variantUsage || null
-    );
-    if (multiStories) {
-      lines.push(multiStories);
-    }
-  } else {
-    // No dimensions detected: single Default story
-    lines.push(`export const Default: Story = {`);
-    lines.push(renderLine);
-    const storyArgLines = [];
-    if (childrenArgLine(componentName)) storyArgLines.push(childrenArgLine(componentName));
-    for (const line of defaultArgLines) storyArgLines.push(line);
-    if (storyArgLines.length > 0) {
-      lines.push(`  args: {`);
-      for (const line of storyArgLines) lines.push(line);
-      lines.push(`  },`);
+    if (hasDimensions) {
+      const multiStories = buildMultiDimensionStories(
+        variantMap, renderLine, childrenArgLine, defaultArgLines, componentName,
+        comp.variantUsage || null
+      );
+      if (multiStories) {
+        lines.push(multiStories);
+      }
+    } else {
+      // No dimensions detected: single Default story
+      lines.push(`export const Default: Story = {`);
+      lines.push(renderLine);
+      const storyArgLines = [];
+      if (childrenArgLine(componentName)) storyArgLines.push(childrenArgLine(componentName));
+      for (const line of defaultArgLines) storyArgLines.push(line);
+      if (storyArgLines.length > 0) {
+        lines.push(`  args: {`);
+        for (const line of storyArgLines) lines.push(line);
+        lines.push(`  },`);
+      }
+      lines.push(`};`);
     }
-    lines.push(`};`);
   }
 
   // --- Project-specific usage stories ---
@@ -2190,7 +2284,7 @@ function buildStoryFileContent(comp) {
         /^(bg|text|border|ring|from|to|fill|stroke)-/.test(t) &&
         !/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|\d)/.test(t)
       );
-      const spacingRaw    = cleanTokens.filter(t => /^(p[xylrbt]?|m[xylrbt]?|gap|space-[xy]|w-|h-|min-[wh]|max-[wh]|size-)/.test(t));
+      const spacingRaw    = cleanTokens.filter(t => /^(p[xylrbt]?-|m[xylrbt]?-|gap|space-[xy]|w-|h-|min-[wh]|max-[wh]|size-)/.test(t));
       const typographyRaw = cleanTokens.filter(t => /^(text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl)|font-)/.test(t));
       const radiusRaw     = cleanTokens.filter(t => /^rounded/.test(t));
       const animRaw       = cleanTokens.filter(t => /^(transition|duration|animate|ease|delay)-/.test(t));
@@ -2202,7 +2296,8 @@ function buildStoryFileContent(comp) {
         // 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;
+        const isValidCssColor = (v) => /^#[0-9a-fA-F]{3,8}$/.test(v) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lch|lab|color)\s*\(/.test(v) || v === 'transparent';
+        const hex = entry?.hex && isValidCssColor(entry.hex) ? entry.hex : null;
         return { token, hex, label: baseKey || key };
       });
 
@@ -4246,7 +4341,8 @@ function writeComponentInventoryStory(components, foundations) {
         let key = m ? m[1] : null;
         if (key) key = key.replace(/\/\d+$/, "");
         const entry = key ? foundColors[key] : null;
-        const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
+        const isValidCssColor = (v) => /^#[0-9a-fA-F]{3,8}$/.test(v) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lch|lab|color)\s*\(/.test(v) || v === 'transparent';
+        const hex = entry?.hex && isValidCssColor(entry.hex) ? entry.hex : null;
         return { token, hex };
       })
       .filter(s => s.hex);
@@ -4906,6 +5002,11 @@ function main() {
     const storyFileName = `${componentName}.stories.tsx`;
     const storyPath = path.join(STORIES_DIR, storyFileName);
     if (SKIP_LIST.includes(componentName)) continue;
+    // Skip complex page-level components detected by scan (500+ lines, 4+ inline sub-components)
+    if (comp.isPageComponent) {
+      console.log(`[VDS] ${componentName} → skipped (complex page component — add to extraSkipList to suppress this message)`);
+      continue;
+    }
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
     if (requiredCount > 3) {
       console.log(`[VDS] ${componentName} → skipped (${requiredCount} required props — too complex to auto-generate)`);