vibe-design-system 2.8.21 → 2.8.22

package/package.json

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

@@ -2486,6 +2486,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 +2692,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);