vibe-design-system 2.8.27 → 2.8.28

package/package.json

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

package/vds-core-template/scan.mjs

@@ -525,6 +525,61 @@ function extractTSProps(content) {
   return props.length > 0 ? props : null;
 }
 
+/**
+ * Extract named UI patterns from a feature-tier file.
+ *
+ * Signal 1 — JSX block comments: {/* SECTION TITLE *\/}
+ *   e.g. {/* CLUSTER 1: REVENUE & BILLING *\/} → label "CLUSTER 1: REVENUE & BILLING"
+ *
+ * Signal 2 — Nearest <h3>/<h2> text (fallback when no comments found)
+ *   e.g. <h3>Unbilled WIP</h3> → label "Unbilled WIP"
+ *
+ * Returns Array<{ label: string, line: number }> or null.
+ * Safe on any JSX/TSX file — never throws.
+ */
+function extractInlinePatterns(content) {
+  const patterns = [];
+  const seen = new Set();
+
+  // Signal 1: JSX block comments — {/* ... */}
+  const commentRe = /\{\/\*\s*([\s\S]{3,120}?)\s*\*\/\}/g;
+  let cm;
+  while ((cm = commentRe.exec(content)) !== null) {
+    const raw = cm[1].replace(/\s+/g, " ").trim();
+    // Skip too-short, pure annotation, or code-style comments
+    if (!raw || raw.length < 5) continue;
+    if (/^(TODO|FIXME|HACK|NOTE|@|eslint|prettier|ts-ignore|type-)/i.test(raw)) continue;
+    // Skip comments that look like code (contain JSX/HTML tags)
+    if (/<[A-Za-z]/.test(raw)) continue;
+    const lineNum = content.slice(0, cm.index).split("\n").length;
+    const label = raw.slice(0, 80);
+    const key = label.toLowerCase().replace(/\s+/g, " ");
+    if (!seen.has(key)) {
+      seen.add(key);
+      patterns.push({ label, line: lineNum });
+    }
+  }
+
+  // Signal 2: <h3>/<h2> text content (only if no JSX comments found)
+  if (patterns.length === 0) {
+    const headingRe = /<h[23][^>]*>\s*([^<{]{4,60}?)\s*<\/h[23]>/g;
+    let hm;
+    while ((hm = headingRe.exec(content)) !== null) {
+      const raw = hm[1].replace(/\s+/g, " ").trim();
+      if (!raw || raw.length < 4) continue;
+      const lineNum = content.slice(0, hm.index).split("\n").length;
+      const label = raw.slice(0, 80);
+      const key = label.toLowerCase();
+      if (!seen.has(key)) {
+        seen.add(key);
+        patterns.push({ label, line: lineNum });
+      }
+    }
+  }
+
+  return patterns.length > 0 ? patterns : null;
+}
+
 function getAllComponentFiles(dir, baseDir = dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   const files = [];
@@ -2304,9 +2359,10 @@ function scan() {
     const tier = inferTier(rel, content);
     const variants = (tier === "primitive") ? extractCvaVariants(content) : null;
     const props = (tier === "component" || tier === "feature") ? extractTSProps(content) : null;
+    const patterns = (tier === "feature") ? extractInlinePatterns(content) : null;
     const lineCount = content.split("\n").length;
     const localImportCount = (content.match(/from\s+['"]\.\.\?\//g) || []).length;
-    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}), ...(props ? { props } : {}) });
+    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}), ...(props ? { props } : {}), ...(patterns ? { patterns } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);

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

@@ -2669,13 +2669,17 @@ function writeCursorRules(components, foundations) {
 
   // Tier 3 — Features
   if (byTier.feature.length > 0) {
-    lines.push(`## ⚙️ Feature Components — Extract patterns, don't import whole`);
-    lines.push(`> Complex components with internal state. Reuse sub-patterns, not the whole file.`);
+    lines.push(`## ⚙️ Feature Views — Reuse existing UI patterns before building new ones`);
+    lines.push(`> Full views with internal state. When a user story needs a new widget, check the pattern list below first.`);
     lines.push(``);
     for (const c of byTier.feature.sort((a, b) => a.name.localeCompare(b.name))) {
       lines.push(`- **${c.name}** \`${c.file}\``);
       const propsLine = formatProps(c.props);
       if (propsLine) lines.push(propsLine);
+      if (Array.isArray(c.patterns) && c.patterns.length > 0) {
+        const patternParts = c.patterns.slice(0, 8).map(p => `"${p.label}" (line ${p.line})`);
+        lines.push(`  patterns: ${patternParts.join(" · ")}`);
+      }
     }
     lines.push(``);
     lines.push(`---`);