vibe-design-system 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.3.1",
+  "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;
+  }
+  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";
   }
-  if (parts.length > 0) return parts.join("");
-  return "Block" + (index + 1);
+  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,
@@ -778,10 +783,11 @@ function extractFoundations() {
   let allTsxFiles = [];
   try {
     const { globSync } = projectRequire("glob");
+    const ROOT = PROJECT_ROOT;
     allTsxFiles = globSync("src/**/*.{tsx,jsx,ts,js}", {
-      cwd: PROJECT_ROOT,
+      cwd: ROOT,
       absolute: true,
-      ignore: ["**/node_modules/**", "**/*.stories.*", "**/dist/**", "**/vds-output*"],
+      ignore: ["**/*.stories.*", "**/node_modules/**"],
     });
   } catch (_) {
     function walkDir(dir, list) {

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>)}",