vibe-design-system 2.8.14 → 2.8.16

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1273,6 +1273,39 @@ function extractFoundations() {
         if (!typography[key]) typography[key] = val;
       }
 
+      // ── 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"];
+      const textSizes = {};
+      const textLineHeights = {};
+      const textSizeRe = new RegExp(`--text-(${textSteps.join("|")})\\s*:\\s*([^;\\n]+);`, "g");
+      const textLhRe = new RegExp(`--text-(${textSteps.join("|")})--line-height\\s*:\\s*([^;\\n]+);`, "g");
+      let tsm;
+      while ((tsm = textSizeRe.exec(css)) !== null) {
+        // Normalize ".75rem" → "0.75rem"
+        const raw = tsm[2].trim();
+        textSizes[tsm[1]] = raw.startsWith(".") ? "0" + raw : raw;
+      }
+      while ((tsm = textLhRe.exec(css)) !== null) {
+        const raw = tsm[2].trim();
+        // Resolve calc(a / b) → rounded ratio string
+        const calcM = raw.match(/calc\(([\d.]+)\s*\/\s*([\d.]+)\)/);
+        if (calcM) {
+          const ratio = parseFloat(calcM[1]) / parseFloat(calcM[2]);
+          textLineHeights[tsm[1]] = (Math.round(ratio * 1000) / 1000) + "";
+        } else {
+          textLineHeights[tsm[1]] = raw;
+        }
+      }
+      const typeScale = textSteps
+        .filter((step) => textSizes[step])
+        .map((step) => {
+          const size = textSizes[step];
+          const pxM = size.match(/^([\d.]+)rem$/);
+          const px = pxM ? Math.round(parseFloat(pxM[1]) * 16) + "px" : null;
+          return { step, size, px, lineHeight: textLineHeights[step] || null };
+        });
+      if (typeScale.length > 0) typography.typeScale = typeScale;
+
       // Tailwind v4: extract design tokens from @layer theme { :root { ... } } or bare :root
       // Variables: --spacing (base), --radius-*, --shadow-*, --ease-*, --duration-*, --animate-*
       const v4ThemeVars = {};
@@ -1696,6 +1729,7 @@ function extractTokenUsage() {
   const zIndexCounts = new Map();
   const radiusCounts = new Map();
   const animateCounts = new Map();
+  const textSizeCounts = new Map();
 
   // Spacing utilities: gap-*, p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*, m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*, space-*, w-*, h-*
   const spacingRe = /\b(gap|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|space-x|space-y|w|h|size|inset|top|bottom|left|right|min-w|min-h|max-w|max-h)-((?:\d+(\.\d+)?|px|full|screen|auto|fit|max|min|svh|dvh|svw|dvw))\b/g;
@@ -1707,6 +1741,8 @@ function extractTokenUsage() {
   const roundedRe = /\brounded(?:-(none|sm|md|lg|xl|2xl|3xl|full|t|r|b|l|tl|tr|br|bl|s|e|ss|se|es|ee|[a-z]+(?:-(?:none|sm|md|lg|xl|2xl|3xl|full))?))?(?!\w)/g;
   // Animate utilities: animate-spin, animate-ping, animate-pulse, animate-bounce, animate-none
   const animateRe = /\banimate-(spin|ping|pulse|bounce|none|[\w-]+)\b/g;
+  // Text-size utilities: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl...
+  const textSizeUtilRe = /\btext-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)\b/g;
 
   for (const rel of files) {
     if (rel.includes("stories")) continue;
@@ -1755,6 +1791,13 @@ function extractTokenUsage() {
       const key = `animate-${m[1]}`;
       animateCounts.set(key, (animateCounts.get(key) || 0) + 1);
     }
+
+    // Text sizes
+    const textSizeUtilReCopy = new RegExp(textSizeUtilRe.source, "g");
+    while ((m = textSizeUtilReCopy.exec(content)) !== null) {
+      const key = `text-${m[1]}`;
+      textSizeCounts.set(key, (textSizeCounts.get(key) || 0) + 1);
+    }
   }
 
   const toTop = (map, n) =>
@@ -1769,6 +1812,7 @@ function extractTokenUsage() {
     zIndex: toTop(zIndexCounts, 10),
     radius: toTop(radiusCounts, 10),
     animations: toTop(animateCounts, 8),
+    textSizes: toTop(textSizeCounts, 12),
   };
 }
 

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

@@ -1288,40 +1288,136 @@ function writeFoundationsStories(foundations) {
   fs.writeFileSync(path.join(foundationsDir, "Colors.stories.tsx"), colorsContent, "utf-8");
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Colors.stories.tsx")));
 
-  const typo = foundations?.typography;
-  if (typo && typeof typo === "object" && Object.keys(typo).length > 0) {
-    const typoRows = Object.entries(typo).map(([k, v]) => {
-      const displayValue = typeof v === "object" && v !== null
-        ? (v.family || v.value || JSON.stringify(v))
-        : Array.isArray(v) ? v.join(", ") : String(v);
-      return { token: k, value: displayValue, fontFamily: displayValue };
-    });
-    const typoContent =
-      [
-        "import type { Meta, StoryObj } from \"@storybook/react\";",
-        "",
-        "const meta = { title: \"Foundations/Typography\" } satisfies Meta;",
-        "export default meta;",
-        "type Story = StoryObj;",
-        "",
-        `const typography = ${JSON.stringify(typoRows)};`,
-        "",
-        "export const Default: Story = {",
-        "  render: () => (",
-        "    <div>",
-        "      <h2 style={{ marginBottom: 16 }}>Font family & scale</h2>",
-        "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
-        "        {typography.map(({ token, value, fontFamily }) => (",
-        "          <div key={token} style={{ borderBottom: \"1px solid #222\", paddingBottom: 16 }}>",
-        "            <div style={{ marginBottom: 8 }}><strong>{token}</strong> <code style={{ fontSize: 12, color: \"#888\" }}>{value}</code></div>",
-        "            <div style={{ fontFamily: fontFamily || \"inherit\", fontSize: 18 }}>Aa — The quick brown fox jumps over the lazy dog.</div>",
-        "          </div>",
-        "        ))}",
-        "      </div>",
-        "    </div>",
-        "  ),",
-        "};",
-      ].join("\n");
+  {
+    const typo = foundations?.typography || {};
+    const typeScale = Array.isArray(typo.typeScale) ? typo.typeScale : [];
+    const usedTextSizes = (foundations?.tokenUsage?.textSizes || []);
+    const usedTextMap = Object.fromEntries(usedTextSizes.map(({ token, count }) => [token, count]));
+
+    // Font families
+    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")
+      .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);
+
+    // Font weights
+    const weightKeys = ["fontWeightNormal", "fontWeightMedium", "fontWeightSemibold", "fontWeightBold"];
+    const weightRows = weightKeys
+      .filter((k) => typo[k])
+      .map((k) => ({ token: k, value: String(typo[k]) }));
+
+    // Reverse type scale for display (largest first)
+    const scaleDesc = [...typeScale].reverse();
+
+    const sansFamily = typo.fontSans || typo.tailwindSans || typo.body || "system-ui, sans-serif";
+
+    const typoContent = [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Typography\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const typeScale: { step: string; size: string; px: string | null; lineHeight: string | null }[] = ${JSON.stringify(scaleDesc)};`,
+      `const usedTextSizes: { token: string; count: number }[] = ${JSON.stringify(usedTextSizes)};`,
+      `const familyRows: { token: string; value: string }[] = ${JSON.stringify(familyRows)};`,
+      `const weightRows: { token: string; value: string }[] = ${JSON.stringify(weightRows)};`,
+      `const sansFamily = ${JSON.stringify(sansFamily)};`,
+      "",
+      "export const Default: Story = {",
+      "  render: () => (",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 860, color: \"#111\" }}>",
+      "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Typography</h2>",
+      "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Type scale, font families, and weights</p>",
+      "",
+      "      {/* ── TYPE SCALE ── */}",
+      "      <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Type Scale</h3>",
+      "      {usedTextSizes.length > 0 && (",
+      "        <div style={{ marginBottom: 16 }}>",
+      "          <p style={{ fontSize: 12, color: \"#6b7280\", margin: \"0 0 8px\", fontWeight: 500 }}>Most used in this project</p>",
+      "          <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 6 }}>",
+      "            {usedTextSizes.map(({ token, count }) => (",
+      "              <span key={token} style={{ padding: \"3px 10px\", background: \"#ede9fe\", color: \"#5b21b6\", borderRadius: 20, fontSize: 12, fontWeight: 500 }}>",
+      "                {token} <span style={{ opacity: 0.6 }}>×{count}</span>",
+      "              </span>",
+      "            ))}",
+      "          </div>",
+      "        </div>",
+      "      )}",
+      "      {typeScale.length === 0 ? (",
+      "        <p style={{ color: \"#999\", fontSize: 13, marginBottom: 32 }}>No type scale detected.</p>",
+      "      ) : (",
+      "        <div style={{ display: \"flex\", flexDirection: \"column\", gap: 0, marginBottom: 48, border: \"1px solid #e5e7eb\", borderRadius: 10, overflow: \"hidden\" }}>",
+      "          {typeScale.map(({ step, size, px, lineHeight }, i) => {",
+      "            const usageCount = usedTextSizes.find(u => u.token === `text-${step}`)?.count;",
+      "            const remVal = parseFloat(size);",
+      "            const pxVal = px ? parseInt(px) : Math.round(remVal * 16);",
+      "            return (",
+      "              <div key={step} style={{ display: \"flex\", alignItems: \"center\", gap: 20, padding: \"14px 20px\", background: i % 2 === 0 ? \"#fff\" : \"#f9fafb\", borderTop: i === 0 ? \"none\" : \"1px solid #f0f0f0\" }}>",
+      "                <div style={{ width: 120, flexShrink: 0 }}>",
+      "                  <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>",
+      "                    <code style={{ fontSize: 12, fontWeight: 600, color: \"#6366f1\", background: \"#eef2ff\", padding: \"2px 7px\", borderRadius: 4 }}>text-{step}</code>",
+      "                    {usageCount && <span style={{ fontSize: 11, color: \"#9ca3af\" }}>×{usageCount}</span>}",
+      "                  </div>",
+      "                  <div style={{ fontSize: 11, color: \"#9ca3af\", marginTop: 4 }}>",
+      "                    {size}{px && px !== size ? ` · ${px}` : \"\"}",
+      "                    {lineHeight ? <span style={{ marginLeft: 8 }}>lh {lineHeight}</span> : null}",
+      "                  </div>",
+      "                </div>",
+      "                <div style={{ fontSize: size, fontFamily: sansFamily, color: \"#111\", lineHeight: lineHeight || 1.5, overflow: \"hidden\", whiteSpace: \"nowrap\", textOverflow: \"ellipsis\", flex: 1 }}>",
+      "                  The quick brown fox jumps over the lazy dog",
+      "                </div>",
+      "              </div>",
+      "            );",
+      "          })}",
+      "        </div>",
+      "      )}",
+      "",
+      "      {/* ── FONT FAMILIES ── */}",
+      "      {familyRows.length > 0 && (",
+      "        <>",
+      "          <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Font Families</h3>",
+      "          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 16, marginBottom: 40 }}>",
+      "            {familyRows.map(({ token, value }) => (",
+      "              <div key={token} style={{ padding: \"12px 16px\", background: \"#f8fafc\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
+      "                <div style={{ display: \"flex\", gap: 12, alignItems: \"baseline\", marginBottom: 6 }}>",
+      "                  <span style={{ fontSize: 12, fontWeight: 600, color: \"#374151\", minWidth: 140 }}>{token}</span>",
+      "                  <code style={{ fontSize: 11, color: \"#9ca3af\", wordBreak: \"break-all\" as any }}>{value.length > 60 ? value.slice(0, 60) + \"…\" : value}</code>",
+      "                </div>",
+      "                <div style={{ fontFamily: value, fontSize: 18, color: \"#374151\", letterSpacing: \"-0.01em\" }}>",
+      "                  Aa — The quick brown fox jumps over the lazy dog.",
+      "                </div>",
+      "              </div>",
+      "            ))}",
+      "          </div>",
+      "        </>",
+      "      )}",
+      "",
+      "      {/* ── FONT WEIGHTS ── */}",
+      "      {weightRows.length > 0 && (",
+      "        <>",
+      "          <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Font Weights</h3>",
+      "          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 10, marginBottom: 40, maxWidth: 560 }}>",
+      "            {weightRows.map(({ token, value }) => (",
+      "              <div key={token} style={{ display: \"flex\", alignItems: \"baseline\", gap: 16, padding: \"8px 0\", borderBottom: \"1px solid #f0f0f0\" }}>",
+      "                <code style={{ width: 64, fontSize: 11, color: \"#9ca3af\", flexShrink: 0 }}>{value}</code>",
+      "                <span style={{ fontSize: 11, color: \"#9ca3af\", width: 120, flexShrink: 0 }}>{token}</span>",
+      "                <span style={{ fontFamily: sansFamily, fontSize: 17, fontWeight: parseInt(value) || value as any }}>",
+      "                  The quick brown fox",
+      "                </span>",
+      "              </div>",
+      "            ))}",
+      "          </div>",
+      "        </>",
+      "      )}",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
     fs.writeFileSync(path.join(foundationsDir, "Typography.stories.tsx"), typoContent, "utf-8");
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Typography.stories.tsx")));
   }
@@ -1576,7 +1672,8 @@ function writeFoundationsStories(foundations) {
       "shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
     };
     // If token CSS values available use those; otherwise use defaults keyed by used token names
-    const shadowDisplayRows = shadowRows.length > 0
+    const hasCustomShadows = shadowRows.length > 0;
+    const shadowDisplayRows = hasCustomShadows
       ? shadowRows
       : usedShadows.map(({ token }) => ({ token, value: shadowDefaults[token] || "" })).filter((r) => r.value);
 
@@ -1594,6 +1691,7 @@ function writeFoundationsStories(foundations) {
       `const usedShadows: { token: string; count: number }[] = ${JSON.stringify(usedShadows)};`,
       `const usedZIndex: { token: string; count: number }[] = ${JSON.stringify(usedZIndex)};`,
       `const zSemantics: Record<string, string> = ${JSON.stringify(zIndexSemantics)};`,
+      `const hasCustomShadows: boolean = ${hasCustomShadows};`,
       "",
       "export const Default: Story = {",
       "  render: () => (",
@@ -1610,14 +1708,22 @@ function writeFoundationsStories(foundations) {
       "          ))}",
       "        </div>",
       "      )}",
+      "      {!hasCustomShadows && shadowTokens.length > 0 && (",
+      "        <p style={{ fontSize: 12, color: \"#92400e\", background: \"#fef3c7\", border: \"1px solid #fde68a\", borderRadius: 6, padding: \"6px 12px\", marginBottom: 16, display: \"inline-block\" }}>",
+      "          ℹ️ Tailwind built-in shadows — this project has no custom <code>--shadow-*</code> CSS vars",
+      "        </p>",
+      "      )}",
       "      {shadowTokens.length === 0 ? (",
       "        <p style={{ color: \"#999\", fontSize: 13, marginBottom: 32 }}>No shadow tokens detected.</p>",
       "      ) : (",
-      "        <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 24, marginBottom: 48 }}>",
+      "        <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 28, marginBottom: 48 }}>",
       "          {shadowTokens.map(({ token, value }) => (",
-      "            <div key={token} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 10 }}>",
-      "              <div style={{ width: 80, height: 80, background: \"#fff\", borderRadius: 10, boxShadow: value, border: token === \"none\" ? \"1px dashed #ccc\" : \"none\" }} />",
-      "              <span style={{ fontSize: 12, fontWeight: 600, color: \"#374151\" }}>{token === \"DEFAULT\" ? \"default\" : token}</span>",
+      "            <div key={token} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 8, maxWidth: 100 }}>",
+      "              <div style={{ width: 80, height: 72, background: \"#fff\", borderRadius: 10, boxShadow: value, border: token === \"none\" ? \"1px dashed #ccc\" : \"none\", flexShrink: 0 }} />",
+      "              <span style={{ fontSize: 12, fontWeight: 600, color: \"#374151\", textAlign: \"center\" }}>{token === \"DEFAULT\" ? \"default\" : token}</span>",
+      "              <code style={{ fontSize: 10, color: \"#9ca3af\", textAlign: \"center\", wordBreak: \"break-all\" as any, lineHeight: 1.4 }}>",
+      "                {value.length > 36 ? value.slice(0, 36) + \"…\" : value}",
+      "              </code>",
       "            </div>",
       "          ))}",
       "        </div>",