vibe-design-system 2.2.1 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -750,8 +750,6 @@ function extractFoundations() {
   const radius = {};
   if (cssRadiusVars.radius) radius.base = cssRadiusVars.radius;
   if (Object.keys(borderRadiusScale).length > 0) radius.borderRadius = borderRadiusScale;
-  const foundationsColors = { ...colors };
-  if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
 
   // Fallback: if no typography tokens from config, extract from Google Fonts @import
   if (Object.keys(typography).length === 0 || (!typography.body && !typography.bodyFontFamily)) {
@@ -776,6 +774,91 @@ function extractFoundations() {
     }
   }
 
+  // ── FALLBACK 1: Arbitrary Tailwind values ──────────────────
+  let allTsxFiles = [];
+  try {
+    const { globSync } = projectRequire("glob");
+    allTsxFiles = globSync("src/**/*.{tsx,jsx,ts,js}", {
+      cwd: PROJECT_ROOT,
+      absolute: true,
+      ignore: ["**/node_modules/**", "**/*.stories.*", "**/dist/**", "**/vds-output*"],
+    });
+  } catch (_) {
+    function walkDir(dir, list) {
+      if (!fs.existsSync(dir)) return;
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const e of entries) {
+        const full = path.join(dir, e.name);
+        if (e.isDirectory()) {
+          if (e.name !== "node_modules" && e.name !== "dist") walkDir(full, list);
+        } else if (/\.(tsx|jsx|ts|js)$/i.test(e.name) && !e.name.includes(".stories.")) {
+          list.push(full);
+        }
+      }
+    }
+    walkDir(SRC_DIR, allTsxFiles);
+  }
+
+  const ARBITRARY_HEX = /(?:bg|text|border|ring|fill|stroke|from|to|via)-\[#([0-9a-fA-F]{3,8})\]/g;
+  const arbitraryColors = new Map();
+  for (const file of allTsxFiles) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const match of content.matchAll(ARBITRARY_HEX)) {
+        const hex = "#" + match[1].toUpperCase();
+        arbitraryColors.set(hex, (arbitraryColors.get(hex) || 0) + 1);
+      }
+    } catch (_) {}
+  }
+  const getHex = (v) => {
+    const x = typeof v === "string" ? v : v?.hex ?? v?.value;
+    return x ? String(x).toUpperCase() : "";
+  };
+  const existingHexValues = new Set([
+    ...Object.values(colors).map((v) => getHex(v)).filter(Boolean),
+    ...Object.values(colorsDark).map((v) => getHex(v)).filter(Boolean),
+  ]);
+  for (const [hex, count] of arbitraryColors) {
+    const hexUpper = hex.toUpperCase();
+    if (existingHexValues.has(hexUpper)) continue;
+    if (count < 1) continue;
+    const name = "arbitrary-" + hex.slice(1).toLowerCase();
+    colors[name] = { value: hex, source: "arbitrary-tailwind", frequency: count };
+  }
+  // ── FALLBACK 2: Google Fonts URL ──────────────────────────
+  const GFONTS_PATTERN = /family=([A-Za-z+]+)(?::.*?)?(?:&|$)/g;
+  const fontFileCandidates = [
+    ...allTsxFiles.filter(
+      (f) =>
+        f.includes("layout.") ||
+        f.includes("_document.") ||
+        f.endsWith("index.css") ||
+        f.includes("globals.css")
+    ),
+    path.join(PROJECT_ROOT, "index.html"),
+    path.join(PROJECT_ROOT, "src", "index.css"),
+    path.join(PROJECT_ROOT, "src", "globals.css"),
+    path.join(PROJECT_ROOT, "src", "App.css"),
+    path.join(PROJECT_ROOT, "app", "globals.css"),
+  ].filter((p) => fs.existsSync(p));
+  for (const file of fontFileCandidates) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      if (!content.includes("fonts.googleapis.com")) continue;
+      for (const match of content.matchAll(GFONTS_PATTERN)) {
+        const family = match[1].replace(/\+/g, " ");
+        const alreadyHas = Object.values(typography).some((v) => String(v).includes(family));
+        if (!alreadyHas) {
+          const key = "--font-" + family.toLowerCase().replace(/\s+/g, "-");
+          typography[key] = { family, source: "google-fonts-url" };
+        }
+      }
+    } catch (_) {}
+  }
+
+  const foundationsColors = { ...colors };
+  if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
+
   const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};

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

@@ -814,56 +814,29 @@ function writeComponentSuggestionsStory(componentSuggestions) {
 }
 
 function writeChangelogStory(changelog) {
-  if (!Array.isArray(changelog) || changelog.length === 0) return;
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
-  const entries = changelog.map((e) => ({
-    version: e.version,
-    date: e.date,
-    changes: e.changes || [],
-  }));
+  const entries = Array.isArray(changelog) ? changelog.map((e) => ({ version: e.version, date: e.date, changes: e.changes || [] })) : [];
   const content =
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "",
-      "const meta = { title: \"Foundations/Changelog\" } satisfies Meta;",
+      "const meta = { title: \"Foundations/Changelog\", tags: [\"autodocs\"] } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
       "",
       `const changelog = ${JSON.stringify(entries)};`,
       "",
-      "function ChangeItem({ c }) {",
-      "  if (c.type === \"color_changed\")",
-      "    return (",
-      "      <div style={{ marginBottom: 8 }}>",
-      "        <strong>{c.name}</strong>: <span style={{ color: \"#888\" }}>{c.from}</span> → <span style={{ color: \"#0f0\" }}>{c.to}</span>",
-      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.from, marginLeft: 8, border: \"1px solid #333\" }} />",
-      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} />",
-      "      </div>",
-      "    );",
-      "  if (c.type === \"color_added\") return <div style={{ marginBottom: 8 }}><strong>{c.name}</strong> added: <code>{c.to}</code> <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} /></div>;",
-      "  if (c.type === \"color_removed\") return <div style={{ marginBottom: 8, color: \"#888\" }}><strong>{c.name}</strong> removed</div>;",
-      "  if (c.type === \"typography_changed\") return <div style={{ marginBottom: 8 }}><strong>{c.key}</strong>: {c.from} → {c.to}</div>;",
-      "  if (c.type === \"component_added\") return <div style={{ marginBottom: 8, color: \"#0f0\" }}>+ {c.name}</div>;",
-      "  if (c.type === \"component_removed\") return <div style={{ marginBottom: 8, color: \"#f88\" }}>− {c.name}</div>;",
-      "  return <div style={{ marginBottom: 8 }}>{c.type}: {JSON.stringify(c)}</div>;",
-      "}",
-      "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
-      "      <h2 style={{ marginBottom: 16 }}>VDS Changelog</h2>",
-      "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
-      "        {changelog.map((e, i) => (",
-      "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",
-      "            <div style={{ fontWeight: 600, marginBottom: 4 }}>v{e.version}</div>",
-      "            <div style={{ fontSize: 12, color: \"#888\", marginBottom: 12 }}>{e.date}</div>",
-      "            {e.changes.length === 0 ? <div style={{ color: \"#666\" }}>No changes</div> : (",
-      "              <div>{e.changes.map((c, j) => <ChangeItem key={j} c={c} />)}</div>",
-      "            )}",
-      "          </div>",
-      "        ))}",
-      "      </div>",
+      "    <div style={{ fontFamily: \"monospace\", padding: 24 }}>",
+      "      <h2>CHANGELOG</h2>",
+      "      {changelog.length === 0 ? <p>No changes recorded yet. Run npm run vds again after making changes.</p> : changelog.map((entry) => (",
+      "        <div key={entry.version}>",
+      "          <h3>v{entry.version} — {entry.date}</h3>",
+      "          {entry.changes.map((c, i) => <div key={i}>{c.type}: {c.name ?? c.key ?? \"\"}</div>)}",
+      "        </div>",
+      "      ))}",
       "    </div>",
       "  ),",
       "};",
@@ -891,10 +864,7 @@ function main() {
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);
   }
-  const changelog = data.changelog;
-  if (changelog?.length) {
-    writeChangelogStory(changelog);
-  }
+  writeChangelogStory(data.changelog);
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {