vibe-design-system 2.8.22 → 2.8.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.22",
+  "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

@@ -1608,37 +1608,65 @@ function writeFoundationsStories(foundations) {
       : rawIcons.map((name) => ({ name, total: 0, topFiles: [] }));
 
     const iconsContent = [
+      "import { useState } from \"react\";",
       "import type { Meta, StoryObj } from \"@storybook/react\";",
       "import * as Lucide from \"lucide-react\";",
       "",
       "const meta = { title: \"Foundations/Icons\" } satisfies Meta;",
       "export default meta;",
       "type Story = StoryObj;",
+      "type IconEntry = { name: string; total: number; topFiles: string[] };",
       "",
-      `const iconData = ${JSON.stringify(iconData, null, 2)};`,
+      `const iconData: IconEntry[] = ${JSON.stringify(iconData, null, 2)};`,
       "",
       "export const Default: Story = {",
       "  render: () => {",
+      "    const [copied, setCopied] = useState<string | null>(null);",
       "    const usedIcons = iconData.filter((d) => d.total > 0);",
       "    const unusedIcons = iconData.filter((d) => d.total === 0);",
-      "    const renderCard = (d: { name: string; total: number; topFiles: string[] }) => {",
+      "",
+      "    const handleCopy = (name: string) => {",
+      "      navigator.clipboard?.writeText(name).then(() => {",
+      "        setCopied(name);",
+      "        setTimeout(() => setCopied(null), 1400);",
+      "      });",
+      "    };",
+      "",
+      "    const renderCard = (d: IconEntry, faded = false) => {",
       "      const Icon = (Lucide as Record<string, any>)[d.name];",
       "      if (!Icon) return null;",
+      "      const isCopied = copied === d.name;",
       "      return (",
-      "        <div key={d.name} style={{ display: \"flex\", flexDirection: \"column\", gap: 8, padding: 14,",
-      "          border: \"1px solid #1e293b\", borderRadius: 10, background: \"#0f172a\" }}>",
+      "        <div",
+      "          key={d.name}",
+      "          onClick={() => handleCopy(d.name)}",
+      "          title={`Click to copy: ${d.name}`}",
+      "          style={{",
+      "            display: \"flex\", flexDirection: \"column\", gap: 10, padding: 14,",
+      "            border: `1px solid ${isCopied ? \"#4ade80\" : \"#1e293b\"}`,",
+      "            borderRadius: 10,",
+      "            background: isCopied ? \"#052e16\" : \"#0f172a\",",
+      "            cursor: \"pointer\",",
+      "            opacity: faded ? 0.4 : 1,",
+      "            transition: \"border-color 0.15s, background 0.15s\",",
+      "          }}",
+      "        >",
       "          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\" }}>",
-      "            <Icon size={22} strokeWidth={1.5} />",
+      "            <div style={{ padding: 8, background: \"#1e293b\", borderRadius: 8, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>",
+      "              <Icon size={22} strokeWidth={1.75} color=\"#94a3b8\" />",
+      "            </div>",
       "            {d.total > 0 && (",
       "              <span style={{ fontSize: 11, fontWeight: 600, background: \"#1e293b\",",
-      "                color: \"#94a3b8\", padding: \"2px 7px\", borderRadius: 999 }}>",
+      "                color: \"#94a3b8\", padding: \"2px 7px\", borderRadius: 999, alignSelf: \"flex-start\" }}>",
       "                ×{d.total}",
       "              </span>",
       "            )}",
       "          </div>",
-      "          <span style={{ fontSize: 12, fontWeight: 500, color: \"#e2e8f0\" }}>{d.name}</span>",
+      "          <span style={{ fontSize: 12, fontWeight: 500, color: isCopied ? \"#4ade80\" : \"#e2e8f0\" }}>",
+      "            {isCopied ? \"Copied!\" : d.name}",
+      "          </span>",
       "          {d.topFiles.length > 0 && (",
-      "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4, marginTop: 2 }}>",
+      "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>",
       "              {d.topFiles.map((f) => (",
       "                <span key={f} style={{ fontSize: 10, background: \"#1e293b\", color: \"#64748b\",",
       "                  padding: \"1px 6px\", borderRadius: 4 }}>{f}</span>",
@@ -1655,7 +1683,7 @@ function writeFoundationsStories(foundations) {
       "            {iconData.length} icons imported from <code style={{ fontSize: 12 }}>lucide-react</code> in app code.",
       "          </p>",
       "          <p style={{ margin: 0, fontSize: 12, color: \"#475569\" }}>",
-      "            Sorted by usage frequency · Badge shows total JSX usages · Chips show top components.",
+      "            Sorted by usage frequency · Badge = total JSX usages · Click any card to copy the icon name.",
       "          </p>",
       "        </div>",
       "        {usedIcons.length > 0 && (",
@@ -1665,8 +1693,8 @@ function writeFoundationsStories(foundations) {
       "              Active — {usedIcons.length}",
       "            </p>",
       "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(160px, 1fr))\",",
-      "              gap: 10, marginBottom: 32 }}>",
-      "              {usedIcons.map(renderCard)}",
+      "              gap: 10, marginBottom: 36 }}>",
+      "              {usedIcons.map((d) => renderCard(d, false))}",
       "            </div>",
       "          </>",
       "        )}",
@@ -1674,11 +1702,11 @@ function writeFoundationsStories(foundations) {
       "          <>",
       "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#334155\",",
       "              textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>",
-      "              Imported (not used in JSX) — {unusedIcons.length}",
+      "              Imported, not used in JSX — {unusedIcons.length}",
       "            </p>",
       "            <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(140px, 1fr))\",",
-      "              gap: 8, opacity: 0.45 }}>",
-      "              {unusedIcons.map(renderCard)}",
+      "              gap: 8 }}>",
+      "              {unusedIcons.map((d) => renderCard(d, true))}",
       "            </div>",
       "          </>",
       "        )}",
@@ -2541,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`);
@@ -2550,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(`---`);
@@ -2563,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(`---`);