vibe-design-system 1.9.11 → 1.9.12

package/package.json

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

package/vds-core-template/scan.mjs

@@ -364,6 +364,12 @@ const COMPONENT_SUGGESTION_KEYWORDS = [
   { 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: /\bmodal\b/i, name: "Modal" },
 ];
 
 function suggestNameFromPattern(pattern, index) {
@@ -391,6 +397,8 @@ function extractComponentSuggestions() {
     while ((m = re.exec(content)) !== null) {
       const raw = (m[1] ?? m[2] ?? "").trim().replace(/\s+/g, " ").trim();
       if (!raw) continue;
+      const classCount = raw.split(/\s+/).filter(Boolean).length;
+      if (classCount < 3) continue;
       if (!byPattern.has(raw)) {
         const before = content.substring(0, m.index);
         const lastOpen = before.lastIndexOf("<");

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

@@ -795,7 +795,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "  render: () => (",
       "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
       "      <h2 style={{ marginBottom: 16 }}>Repeated className patterns (component candidates)</h2>",
-      "      <p style={{ color: \"#888\", marginBottom: 24 }}>These patterns appear 2+ times across src/pages. Consider extracting as components.</p>",
+      "      <p style={{ color: \"#888\", marginBottom: 24 }}>Patterns with 3+ classes appearing 2+ times across src/pages. Consider extracting as components.</p>",
       "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
       "        {suggestions.map((s, i) => (",
       "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",