vibe-design-system 2.3.0 → 2.4.0

package/package.json

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

package/vds-core-template/scan.mjs

@@ -452,32 +452,39 @@ function humanizeName(filePath) {
   return base.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 }
 
-const COMPONENT_SUGGESTION_KEYWORDS = [
+// Priority order: first match in pattern wins
+const COMPONENT_SUGGESTION_KEYWORDS_ORDERED = [
   { re: /\bcard\b/i, name: "Card" },
   { re: /\bsection\b/i, name: "Section" },
-  { re: /\bitem\b/i, name: "Item" },
-  { re: /\bbadge\b/i, name: "Badge" },
-  { re: /\brow\b/i, name: "Row" },
   { re: /\bgrid\b/i, name: "Grid" },
   { re: /\bhero\b/i, name: "Hero" },
   { re: /\bcta\b/i, name: "Cta" },
-  { re: /\bstat\b/i, name: "Stat" },
-  { re: /\bprice\b/i, name: "Pricing" },
-  { re: /\bfeature\b/i, name: "Feature" },
-  { re: /\bbutton\b/i, name: "Button" },
-  { re: /\btag\b/i, name: "Tag" },
-  { re: /\bchip\b/i, name: "Chip" },
-  { re: /\btile\b/i, name: "Tile" },
-  { re: /\bbanner\b/i, name: "Banner" },
+  { re: /\bnav\b/i, name: "Nav" },
+  { re: /\bfooter\b/i, name: "Footer" },
+  { re: /\bheader\b/i, name: "Header" },
+  { re: /\bform\b/i, name: "Form" },
+  { re: /\bmodal\b/i, name: "Modal" },
+  { re: /\bbadge\b/i, name: "Badge" },
+  { re: /\bitem\b/i, name: "Item" },
+  { re: /\brow\b/i, name: "Row" },
+  { re: /\blist\b/i, name: "List" },
 ];
 
-function suggestNameFromPattern(pattern, index) {
-  const parts = [];
-  for (const { re, name } of COMPONENT_SUGGESTION_KEYWORDS) {
-    if (re.test(pattern)) parts.push(name);
+function suggestNameFromPattern(pattern) {
+  for (const { re, name } of COMPONENT_SUGGESTION_KEYWORDS_ORDERED) {
+    if (re.test(pattern)) return name;
   }
-  if (parts.length > 0) return parts.join("");
-  return "Block" + (index + 1);
+  const firstToken = pattern.split(/\s+/)[0] || "";
+  if (/^max-w|^mx-auto|^container$/i.test(firstToken)) return "Container";
+  if (/^flex\b/i.test(firstToken)) return "FlexRow";
+  if (/^grid\b/i.test(firstToken)) return "Grid";
+  if (firstToken.length > 0) {
+    const pascal = firstToken
+      .replace(/-([a-z0-9])/gi, (_, c) => c.toUpperCase())
+      .replace(/^(.)/, (_, c) => c.toUpperCase());
+    return pascal.replace(/[^a-zA-Z0-9]/g, "") || "Block";
+  }
+  return "Block";
 }
 
 /** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
@@ -516,11 +523,9 @@ function extractComponentSuggestions() {
   }
 
   const suggestions = [];
-  let blockIndex = 0;
   for (const [pattern, { count, files, snippet }] of byPattern.entries()) {
     if (count < 2) continue;
-    const suggestedName = suggestNameFromPattern(pattern, blockIndex);
-    if (suggestedName.startsWith("Block")) blockIndex += 1;
+    const suggestedName = suggestNameFromPattern(pattern);
     suggestions.push({
       suggestedName,
       occurrences: count,
@@ -750,8 +755,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)) {
@@ -777,19 +780,34 @@ function extractFoundations() {
   }
 
   // ── FALLBACK 1: Arbitrary Tailwind values ──────────────────
-  const srcRelFiles = getAllTsxJsxInDir(SRC_DIR);
-  const allSourceFiles = [
-    ...srcRelFiles.map((f) => path.join(SRC_DIR, f)),
-    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));
+  let allTsxFiles = [];
+  try {
+    const { globSync } = projectRequire("glob");
+    const ROOT = PROJECT_ROOT;
+    allTsxFiles = globSync("src/**/*.{tsx,jsx,ts,js}", {
+      cwd: ROOT,
+      absolute: true,
+      ignore: ["**/*.stories.*", "**/node_modules/**"],
+    });
+  } 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 allSourceFiles) {
+  for (const file of allTsxFiles) {
     try {
       const content = fs.readFileSync(file, "utf-8");
       for (const match of content.matchAll(ARBITRARY_HEX)) {
@@ -813,18 +831,23 @@ function extractFoundations() {
     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 fontFiles = allSourceFiles.filter(
-    (f) =>
-      f.endsWith("index.html") ||
-      f.includes("layout.") ||
-      f.includes("_document.") ||
-      f.endsWith("index.css") ||
-      f.includes("globals.css")
-  );
-  for (const file of fontFiles) {
+  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;
@@ -839,6 +862,9 @@ function extractFoundations() {
     } 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

@@ -831,7 +831,7 @@ function writeChangelogStory(changelog) {
       "  render: () => (",
       "    <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) => (",
+      "      {changelog.length === 0 ? <p>No changes recorded yet.</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>)}",