vibe-design-system 2.8.21 → 2.8.23

package/package.json

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

package/vds-core-template/scan.mjs

@@ -375,6 +375,62 @@ function classifyByPath(rel) {
   return { group: "Components", category: "Components" };
 }
 
+/**
+ * Infer the reusability tier of a component from path + content signals.
+ *   primitive  → src/components/ui/ (shadcn atoms)
+ *   component  → small, focused domain component (< 200 lines, ≤ 6 local imports)
+ *   feature    → medium, contains state / multiple sub-parts
+ *   page       → full page/view — reference only, not for direct reuse
+ */
+function inferTier(rel, content) {
+  const normalized = rel.replace(/\\/g, "/");
+  if (normalized.startsWith("ui/") || normalized.includes("/ui/")) return "primitive";
+
+  const lines = content.split("\n").length;
+  // Count relative imports (../ ./) AND path-alias imports (@/components/) as local dependencies
+  const localImports = (content.match(/from\s+['"](?:\.\.?\/?|@\/components\/)/g) || []).length;
+
+  if (lines >= 400 || localImports >= 12) return "page";
+  if (lines >= 200 || localImports >= 7)  return "feature";
+  return "component";
+}
+
+// Tailwind pseudo-class modifiers that appear inside class strings — never valid cva option names
+const CVA_SKIP = new Set([
+  "hover","focus","active","disabled","dark","group","peer","placeholder",
+  "before","after","visited","checked","required","invalid","valid","not",
+  "open","closed","empty","enabled","first","last","odd","even",
+]);
+
+/**
+ * Extract cva() variant options from a file, e.g.:
+ *   variants: { variant: { default, destructive, ghost }, size: { sm, md, lg } }
+ * Returns { variant: ["default","destructive",...], size: [...] } or null.
+ * Filters out Tailwind pseudo-class modifiers that appear inside class strings.
+ */
+function extractCvaVariants(content) {
+  const block = content.match(/variants\s*:\s*\{([\s\S]*?)\}\s*,?\s*defaultVariants/);
+  if (!block) return null;
+  const result = {};
+  // Each top-level key is a variant dimension (variant, size, intent…)
+  // Match: variantName: { optionA: "...", optionB: "..." }
+  const keyRe = /(\w+)\s*:\s*\{([^}]+)\}/g;
+  let m;
+  while ((m = keyRe.exec(block[1])) !== null) {
+    const dimName = m[1];
+    if (CVA_SKIP.has(dimName)) continue; // skip pseudo-class keys at outer level
+    // Extract option names: only words at the start of a line (key: "value")
+    const optRe = /^\s{6,}(\w[\w-]*)\s*:/gm;
+    let om;
+    const options = [];
+    while ((om = optRe.exec(m[2])) !== null) {
+      if (!CVA_SKIP.has(om[1])) options.push(om[1]);
+    }
+    if (options.length > 0) result[dimName] = options;
+  }
+  return Object.keys(result).length > 0 ? result : null;
+}
+
 function getAllComponentFiles(dir, baseDir = dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   const files = [];
@@ -2151,7 +2207,11 @@ function scan() {
       description = "";
     }
     const tokens = extractTailwindTokens(content);
-    results.push({ file: rel, name, group, category, description, tokens });
+    const tier = inferTier(rel, content);
+    const variants = (tier === "primitive") ? extractCvaVariants(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 } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);
@@ -2160,6 +2220,7 @@ function scan() {
       const content = fs.readFileSync(fullPath, "utf-8");
       const name = humanizeName(rel);
       const tokens = extractTailwindTokens(content);
+      const lineCount = content.split("\n").length;
       results.push({
         file: path.relative(PROJECT_ROOT, PAGES_DIR).replace(/\\/g, "/") + "/" + rel,
         name,
@@ -2167,6 +2228,9 @@ function scan() {
         category: "Pages",
         description: "",
         tokens,
+        tier: "page",
+        lines: lineCount,
+        localImports: 0,
       });
     }
   }

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>",
       "          </>",
       "        )}",
@@ -2486,6 +2514,195 @@ function writeChangelogStory(changelog) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Changelog.stories.tsx")));
 }
 
+/** Generate .cursor/rules — structured design system context for AI agents.
+ *  Components are split into tiers so the agent knows what to reuse vs reference.
+ *  Foundations (colors, icons, spacing, breakpoints) are inlined as tables/lists.
+ *  The file is written to PROJECT_ROOT/.cursor/rules so Cursor injects it automatically. */
+function writeCursorRules(components, foundations) {
+  const lines = [];
+  const now = new Date().toISOString().slice(0, 10);
+
+  lines.push(`# VDS Design System — Agent Context`);
+  lines.push(`> Auto-generated by VDS on ${now}. Do not edit — regenerated on every \`npm run vds\`.`);
+  lines.push(``);
+
+  // ── Ground rules ──────────────────────────────────────────────────────────
+  const gaps = foundations?.gridSystem?.gaps || {};
+  const topGaps = Object.entries(gaps).sort((a, b) => b[1] - a[1]).slice(0, 4).map(([v]) => `gap-${v}`).join(", ");
+  const bpUsed = Object.keys(foundations?.gridSystem?.breakpoints || {});
+  const bpAll  = ["sm","md","lg","xl","2xl"];
+  const bpUnused = bpAll.filter(b => !bpUsed.includes(b));
+
+  lines.push(`## ⚙️ Rules`);
+  lines.push(`1. Before creating a new component, check the component lists below.`);
+  lines.push(`2. **Never hardcode colors or hex values** — use the token table.`);
+  lines.push(`3. **Always import icons from \`lucide-react\`** — never other icon libraries.`);
+  if (topGaps) lines.push(`4. **Spacing convention**: ${topGaps} are the standard gaps in this project.`);
+  if (bpUsed.length)   lines.push(`5. **Breakpoints in use**: ${bpUsed.map(b=>`\`${b}:\``).join(" ")} — prefer these.`);
+  if (bpUnused.length) lines.push(`6. **Breakpoints NOT used**: ${bpUnused.map(b=>`\`${b}:\``).join(" ")} — avoid unless explicitly needed.`);
+  lines.push(``);
+  lines.push(`---`);
+  lines.push(``);
+
+  // ── Component tiers ───────────────────────────────────────────────────────
+  const byTier = { primitive: [], component: [], feature: [], page: [] };
+  for (const c of components) {
+    const t = c.tier || "component";
+    if (byTier[t]) byTier[t].push(c);
+  }
+
+  // Tier 1 — Primitives
+  if (byTier.primitive.length > 0) {
+    lines.push(`## 🧱 Primitives — Use first for all UI elements`);
+    lines.push(`> Atomic components from \`src/components/ui/\`. Always prefer over building from scratch.`);
+    lines.push(``);
+    for (const c of byTier.primitive.sort((a, b) => a.name.localeCompare(b.name))) {
+      let entry = `- **${c.name}** \`${c.file}\``;
+      if (c.variants) {
+        const parts = Object.entries(c.variants).map(([k, vs]) => `${k}: ${vs.join(" | ")}`);
+        entry += `  — ${parts.join(" · ")}`;
+      }
+      lines.push(entry);
+    }
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // Tier 2 — Components
+  if (byTier.component.length > 0) {
+    lines.push(`## 🔷 Components — Reusable domain components`);
+    lines.push(`> Project-specific, small, focused. Use before creating new ones.`);
+    lines.push(``);
+    for (const c of byTier.component.sort((a, b) => a.name.localeCompare(b.name))) {
+      let entry = `- **${c.name}** \`${c.file}\``;
+      if (c.description) entry += ` — ${c.description}`;
+      lines.push(entry);
+    }
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // 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(``);
+    for (const c of byTier.feature.sort((a, b) => a.name.localeCompare(b.name))) {
+      lines.push(`- **${c.name}** \`${c.file}\``);
+    }
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // Tier 4 — Pages (just names, no need to list file paths)
+  if (byTier.page.length > 0) {
+    lines.push(`## 📄 Pages & Views — Reference only`);
+    lines.push(`> Full page views. Study for patterns but do not import into new features.`);
+    lines.push(``);
+    lines.push(byTier.page.map(c => c.name).sort().join(", "));
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // ── Color tokens ──────────────────────────────────────────────────────────
+  const colors = foundations?.colors || {};
+  const colorUsage = foundations?.colorUsage || {};
+  const colorEntries = Object.entries(colors)
+    .filter(([k]) => k !== "_dark" && !k.startsWith("arbitrary-") && !k.startsWith("inline-"))
+    .sort((a, b) => {
+      const ua = colorUsage[a[0]]?.total || 0;
+      const ub = colorUsage[b[0]]?.total || 0;
+      return ub - ua;
+    })
+    .slice(0, 20);
+
+  if (colorEntries.length > 0) {
+    lines.push(`## 🎨 Color Tokens — Never hardcode hex values`);
+    lines.push(`> Use Tailwind utility classes: \`bg-{token}\`, \`text-{token}\`, \`border-{token}\``);
+    lines.push(``);
+    lines.push(`| Token | Value | Usages |`);
+    lines.push(`|-------|-------|--------|`);
+    for (const [token, val] of colorEntries) {
+      const hex = typeof val === "string" ? val : (val?.DEFAULT || val?.value || "");
+      const usage = colorUsage[token]?.total || 0;
+      lines.push(`| \`${token}\` | ${hex} | ${usage > 0 ? `×${usage}` : "—"} |`);
+    }
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // ── Typography ────────────────────────────────────────────────────────────
+  const typo = foundations?.typography || {};
+  if (typo.fontFamily && Object.keys(typo.fontFamily).length > 0) {
+    lines.push(`## 🔤 Typography`);
+    const families = Object.entries(typo.fontFamily).map(([k, v]) => `${k}: ${Array.isArray(v) ? v[0] : v}`).join(" · ");
+    lines.push(`Font: ${families}`);
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // ── Spacing / Grid ────────────────────────────────────────────────────────
+  const gridSystem = foundations?.gridSystem;
+  if (gridSystem) {
+    lines.push(`## 📐 Spacing & Layout (detected in this project)`);
+    if (Object.keys(gaps).length > 0) {
+      const gapLine = Object.entries(gaps).sort((a,b)=>b[1]-a[1]).slice(0,8)
+        .map(([v, c]) => `\`gap-${v}\` ×${c}`).join("  ·  ");
+      lines.push(`**Common gaps:** ${gapLine}`);
+    }
+    if (Object.keys(gridSystem.gridCols || {}).length > 0) {
+      const colLine = Object.entries(gridSystem.gridCols).sort((a,b)=>b[1].count-a[1].count).slice(0,6)
+        .map(([v, d]) => `\`grid-cols-${v}\` ×${d.count}`).join("  ·  ");
+      lines.push(`**Grid columns:** ${colLine}`);
+    }
+    if (Object.keys(gridSystem.maxWidths || {}).length > 0) {
+      const mwLine = Object.entries(gridSystem.maxWidths).slice(0,5)
+        .map(([v, c]) => `\`max-w-${v}\` ×${c}`).join("  ·  ");
+      lines.push(`**Container widths:** ${mwLine}`);
+    }
+    if (bpUsed.length > 0) {
+      const bpLine = bpUsed.map(bp => {
+        const d = gridSystem.breakpoints[bp];
+        return `\`${bp}:\` ×${d.count}`;
+      }).join("  ·  ");
+      lines.push(`**Active breakpoints:** ${bpLine}`);
+    }
+    lines.push(``);
+    lines.push(`---`);
+    lines.push(``);
+  }
+
+  // ── Icons ─────────────────────────────────────────────────────────────────
+  const icons = Array.isArray(foundations?.icons) ? foundations.icons : [];
+  const activeIcons = icons.filter(i => i && typeof i === "object" ? i.total > 0 : true);
+  if (activeIcons.length > 0) {
+    lines.push(`## 🎯 Icons — \`import { Name } from "lucide-react"\``);
+    lines.push(`> ${activeIcons.length} icons active in this project. See Foundations/Icons in Storybook for full list.`);
+    lines.push(``);
+    const top = activeIcons.slice(0, 16);
+    const iconLine = top.map(i => {
+      const n = typeof i === "string" ? i : i.name;
+      const t = typeof i === "object" ? i.total : 0;
+      return t > 0 ? `\`${n}\` ×${t}` : `\`${n}\``;
+    }).join("  ·  ");
+    lines.push(`**Most used:** ${iconLine}`);
+    if (icons.length > top.length) lines.push(`*(+ ${icons.length - top.length} more)*`);
+    lines.push(``);
+  }
+
+  const cursorDir = path.join(PROJECT_ROOT, ".cursor");
+  if (!fs.existsSync(cursorDir)) fs.mkdirSync(cursorDir, { recursive: true });
+  const outPath = path.join(cursorDir, "rules");
+  fs.writeFileSync(outPath, lines.join("\n"), "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, outPath));
+}
+
 function main() {
   if (!fs.existsSync(VDS_OUTPUT)) {
     console.error("[VDS] vds-output.json not found. Run `npm run vds` first.");
@@ -2503,6 +2720,7 @@ function main() {
   ensureDir(STORIES_DIR);
   ensureDir(path.join(STORIES_DIR, "foundations"));
   writeFoundationsStories(foundations);
+  writeCursorRules(components, foundations);
   const componentSuggestions = data.componentSuggestions;
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);