vibe-design-system 2.3.1 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -453,31 +453,42 @@ function humanizeName(filePath) {
 }
 
 const COMPONENT_SUGGESTION_KEYWORDS = [
-  { re: /\bcard\b/i, name: "Card" },
-  { re: /\bsection\b/i, name: "Section" },
-  { re: /\bitem\b/i, name: "Item" },
-  { re: /\bbadge\b/i, name: "Badge" },
-  { re: /\brow\b/i, name: "Row" },
-  { re: /\bgrid\b/i, name: "Grid" },
-  { re: /\bhero\b/i, name: "Hero" },
-  { re: /\bcta\b/i, name: "Cta" },
-  { re: /\bstat\b/i, name: "Stat" },
-  { re: /\bprice\b/i, name: "Pricing" },
-  { re: /\bfeature\b/i, name: "Feature" },
-  { re: /\bbutton\b/i, name: "Button" },
-  { re: /\btag\b/i, name: "Tag" },
-  { re: /\bchip\b/i, name: "Chip" },
-  { re: /\btile\b/i, name: "Tile" },
-  { re: /\bbanner\b/i, name: "Banner" },
+  "card",
+  "grid",
+  "section",
+  "hero",
+  "cta",
+  "nav",
+  "footer",
+  "header",
+  "form",
+  "modal",
+  "badge",
+  "item",
+  "row",
+  "list",
+  "container",
+  "wrapper",
+  "panel",
+  "banner",
+  "stat",
 ];
 
-function suggestNameFromPattern(pattern, index) {
-  const parts = [];
-  for (const { re, name } of COMPONENT_SUGGESTION_KEYWORDS) {
-    if (re.test(pattern)) parts.push(name);
+function suggestNameFromPattern(pattern) {
+  const words = pattern
+    .split(/\s+/)
+    .flatMap((c) => c.split("-"))
+    .filter(Boolean);
+  for (const w of words) {
+    const lower = w.toLowerCase();
+    if (COMPONENT_SUGGESTION_KEYWORDS.includes(lower)) {
+      return lower.charAt(0).toUpperCase() + lower.slice(1);
+    }
   }
-  if (parts.length > 0) return parts.join("");
-  return "Block" + (index + 1);
+  if (/\bflex\b/.test(pattern) && /\bitems-center\b/.test(pattern)) return "FlexRow";
+  if (/\brounded\b/.test(pattern) && /\bborder\b/.test(pattern)) return "Card";
+  if (/^max-w|^mx-auto|^container$/i.test(pattern.split(/\s+/)[0] || "")) return "Container";
+  return "Container";
 }
 
 /** Scan src/pages/*.tsx for repeated className clusters; return component suggestions. */
@@ -516,11 +527,9 @@ function extractComponentSuggestions() {
   }
 
   const suggestions = [];
-  let blockIndex = 0;
   for (const [pattern, { count, files, snippet }] of byPattern.entries()) {
     if (count < 2) continue;
-    const suggestedName = suggestNameFromPattern(pattern, blockIndex);
-    if (suggestedName.startsWith("Block")) blockIndex += 1;
+    const suggestedName = suggestNameFromPattern(pattern);
     suggestions.push({
       suggestedName,
       occurrences: count,
@@ -778,10 +787,11 @@ function extractFoundations() {
   let allTsxFiles = [];
   try {
     const { globSync } = projectRequire("glob");
+    const ROOT = PROJECT_ROOT;
     allTsxFiles = globSync("src/**/*.{tsx,jsx,ts,js}", {
-      cwd: PROJECT_ROOT,
+      cwd: ROOT,
       absolute: true,
-      ignore: ["**/node_modules/**", "**/*.stories.*", "**/dist/**", "**/vds-output*"],
+      ignore: ["**/*.stories.*", "**/node_modules/**"],
     });
   } catch (_) {
     function walkDir(dir, list) {

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

@@ -68,7 +68,7 @@ const RECIPES = {
     )`,
   },
   Dialog: {
-    imports: ["DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription"],
+    imports: ["DialogTrigger", "DialogContent", "DialogHeader", "DialogTitle", "DialogDescription", "DialogClose"],
     render: `(args) => (
       <ComponentRef {...args}>
         <DialogTrigger asChild><button>Open Dialog</button></DialogTrigger>
@@ -77,6 +77,7 @@ const RECIPES = {
             <DialogTitle>Dialog Title</DialogTitle>
             <DialogDescription>This is a dialog description.</DialogDescription>
           </DialogHeader>
+          <DialogClose asChild><button>Close</button></DialogClose>
         </DialogContent>
       </ComponentRef>
     )`,
@@ -304,8 +305,8 @@ const RECIPES = {
           <CarouselItem><div className="p-4 text-center border rounded">Slide 2</div></CarouselItem>
           <CarouselItem><div className="p-4 text-center border rounded">Slide 3</div></CarouselItem>
         </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
+        <CarouselPrevious aria-label="Previous slide" />
+        <CarouselNext aria-label="Next slide" />
       </ComponentRef>
     )`,
   },
@@ -752,15 +753,13 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div>",
-      "      <h2 style={{ marginBottom: 16 }}>Logo and favicon paths</h2>",
-      "      <ul style={{ listStyle: \"none\", padding: 0 }}>",
-      "        {assets.length === 0 ? <li>No brand assets found.</li> : assets.map((a, i) => (",
-      "          <li key={i} style={{ padding: \"8px 0\", borderBottom: \"1px solid #222\" }}>",
-      "            <strong>{a.type || \"asset\"}</strong>: <code>{a.path || a.name || \"\"}</code>",
-      "          </li>",
-      "        ))}",
-      "      </ul>",
+      "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 24 }}>",
+      "      {assets.length === 0 ? <p>No brand assets found.</p> : assets.map((a, i) => (",
+      "        <div key={i} style={{ textAlign: \"center\" }}>",
+      "          <img src={\"/\" + String(a.path || \"\").replace(\"public/\", \"\")} style={{ maxHeight: 80, maxWidth: 160, objectFit: \"contain\" }} alt={a.name || \"\"} />",
+      "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\" }}>{a.name || a.type || \"asset\"}</div>",
+      "        </div>",
+      "      ))}",
       "    </div>",
       "  ),",
       "};",
@@ -831,7 +830,7 @@ function writeChangelogStory(changelog) {
       "  render: () => (",
       "    <div style={{ fontFamily: \"monospace\", padding: 24 }}>",
       "      <h2>CHANGELOG</h2>",
-      "      {changelog.length === 0 ? <p>No changes recorded yet. Run npm run vds again after making changes.</p> : changelog.map((entry) => (",
+      "      {changelog.length === 0 ? <p>No changes recorded yet.</p> : changelog.map((entry) => (",
       "        <div key={entry.version}>",
       "          <h3>v{entry.version} — {entry.date}</h3>",
       "          {entry.changes.map((c, i) => <div key={i}>{c.type}: {c.name ?? c.key ?? \"\"}</div>)}",