vibe-design-system 2.8.23 → 2.8.24

package/package.json

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

package/vds-core-template/scan.mjs

@@ -431,6 +431,75 @@ function extractCvaVariants(content) {
   return Object.keys(result).length > 0 ? result : null;
 }
 
+// Common HTML/React props that are noise for the agent — skip them in cursor rules
+const PROPS_SKIP = new Set([
+  "className","style","id","key","ref","children","asChild","slot",
+  "tabIndex","role","aria-label","aria-describedby","aria-hidden","aria-labelledby",
+  "data-testid","htmlFor","draggable","title","lang","dir","onClick","onChange",
+  "onSubmit","onBlur","onFocus","onKeyDown","onKeyUp","onMouseEnter","onMouseLeave",
+]);
+
+/**
+ * Extract TypeScript prop types from a component file.
+ * Looks for interface *Props* { ... } or type *Props* = { ... }
+ * Returns Array<{ name, type, required }> or null.
+ */
+function extractTSProps(content) {
+  // Find the start of a props interface or type alias
+  const startRe = /(?:interface|type)\s+\w*[Pp]rops\w*[^{]*\{/;
+  const sm = startRe.exec(content);
+  if (!sm) return null;
+
+  // Walk forward counting braces to find the matching closing }
+  const blockStart = sm.index + sm[0].length;
+  let depth = 1;
+  let i = blockStart;
+  while (i < content.length && depth > 0) {
+    if (content[i] === "{") depth++;
+    if (content[i] === "}") depth--;
+    i++;
+  }
+  const propsBlock = content.slice(blockStart, i - 1);
+
+  const props = [];
+  // Match top-level props: optional leading whitespace (1-6 chars), prop name, optional ?, colon, type
+  const propRe = /^[ \t]{1,6}([\w]+)(\?)?:\s*(.+?)[ \t]*;?[ \t]*$/gm;
+  let pm;
+  while ((pm = propRe.exec(propsBlock)) !== null) {
+    const propName = pm[1].trim();
+    if (PROPS_SKIP.has(propName)) continue;
+    // Skip comment lines that accidentally match (e.g. "// foo:")
+    if (propsBlock.slice(pm.index).match(/^[ \t]*\/\//)) continue;
+
+    const optional = pm[2] === "?";
+    let type = pm[3]
+      .replace(/\s*\/\/.*$/, "")  // strip inline // comments (with any space before //)
+      .trim()                     // remove surrounding whitespace
+      .replace(/;$/, "")          // strip trailing semicolon (now truly at the end)
+      .trim();
+
+    // Skip multi-line types (unbalanced braces — the rest is on the next line)
+    const openBraces  = (type.match(/\{/g) || []).length;
+    const closeBraces = (type.match(/\}/g) || []).length;
+    if (openBraces !== closeBraces) continue;
+
+    // Simplify verbose React type names
+    type = type.replace(/React\.ReactNode/g, "ReactNode");
+    type = type.replace(/React\.FC[^;,\n]*/g, "FC");
+    type = type.replace(/React\.CSSProperties/g, "CSSProperties");
+    type = type.replace(/React\.RefObject<[^>]+>/g, "RefObject");
+    type = type.replace(/React\.MouseEvent[^;,\n]*/g, "MouseEvent");
+    type = type.replace(/React\.ChangeEvent[^;,\n]*/g, "ChangeEvent");
+    type = type.replace(/React\.KeyboardEvent[^;,\n]*/g, "KeyboardEvent");
+
+    // Truncate very long types
+    if (type.length > 50) type = type.slice(0, 47) + "...";
+
+    props.push({ name: propName, type, required: !optional });
+  }
+  return props.length > 0 ? props : null;
+}
+
 function getAllComponentFiles(dir, baseDir = dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   const files = [];
@@ -2209,9 +2278,10 @@ function scan() {
     const tokens = extractTailwindTokens(content);
     const tier = inferTier(rel, content);
     const variants = (tier === "primitive") ? extractCvaVariants(content) : null;
+    const props = (tier === "component" || tier === "feature") ? extractTSProps(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 } : {}) });
+    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}), ...(props ? { props } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);

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

@@ -2569,6 +2569,20 @@ function writeCursorRules(components, foundations) {
     lines.push(``);
   }
 
+  // Format a compact props summary for cursor rules (required first, up to 6 props)
+  const formatProps = (props) => {
+    if (!Array.isArray(props) || props.length === 0) return null;
+    const sorted = [...props].sort((a, b) => {
+      if (a.required && !b.required) return -1;
+      if (!a.required && b.required) return 1;
+      return a.name.localeCompare(b.name);
+    });
+    const shown = sorted.slice(0, 6);
+    const parts = shown.map(p => p.required ? `${p.name} (${p.type}, required)` : `${p.name} (${p.type})`);
+    const suffix = props.length > 6 ? ` *(+${props.length - 6} more)*` : "";
+    return `  props: ${parts.join(" · ")}${suffix}`;
+  };
+
   // Tier 2 — Components
   if (byTier.component.length > 0) {
     lines.push(`## 🔷 Components — Reusable domain components`);
@@ -2578,6 +2592,8 @@ function writeCursorRules(components, foundations) {
       let entry = `- **${c.name}** \`${c.file}\``;
       if (c.description) entry += ` — ${c.description}`;
       lines.push(entry);
+      const propsLine = formatProps(c.props);
+      if (propsLine) lines.push(propsLine);
     }
     lines.push(``);
     lines.push(`---`);
@@ -2591,6 +2607,8 @@ function writeCursorRules(components, foundations) {
     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);
     }
     lines.push(``);
     lines.push(`---`);