vibe-design-system 2.4.0 → 2.4.1

package/package.json

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

package/vds-core-template/scan.mjs

@@ -452,39 +452,43 @@ function humanizeName(filePath) {
   return base.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 }
 
-// Priority order: first match in pattern wins
-const COMPONENT_SUGGESTION_KEYWORDS_ORDERED = [
-  { re: /\bcard\b/i, name: "Card" },
-  { re: /\bsection\b/i, name: "Section" },
-  { re: /\bgrid\b/i, name: "Grid" },
-  { re: /\bhero\b/i, name: "Hero" },
-  { re: /\bcta\b/i, name: "Cta" },
-  { re: /\bnav\b/i, name: "Nav" },
-  { re: /\bfooter\b/i, name: "Footer" },
-  { re: /\bheader\b/i, name: "Header" },
-  { re: /\bform\b/i, name: "Form" },
-  { re: /\bmodal\b/i, name: "Modal" },
-  { re: /\bbadge\b/i, name: "Badge" },
-  { re: /\bitem\b/i, name: "Item" },
-  { re: /\brow\b/i, name: "Row" },
-  { re: /\blist\b/i, name: "List" },
+const COMPONENT_SUGGESTION_KEYWORDS = [
+  "card",
+  "grid",
+  "section",
+  "hero",
+  "cta",
+  "nav",
+  "footer",
+  "header",
+  "form",
+  "modal",
+  "badge",
+  "item",
+  "row",
+  "list",
+  "container",
+  "wrapper",
+  "panel",
+  "banner",
+  "stat",
 ];
 
 function suggestNameFromPattern(pattern) {
-  for (const { re, name } of COMPONENT_SUGGESTION_KEYWORDS_ORDERED) {
-    if (re.test(pattern)) return name;
-  }
-  const firstToken = pattern.split(/\s+/)[0] || "";
-  if (/^max-w|^mx-auto|^container$/i.test(firstToken)) return "Container";
-  if (/^flex\b/i.test(firstToken)) return "FlexRow";
-  if (/^grid\b/i.test(firstToken)) return "Grid";
-  if (firstToken.length > 0) {
-    const pascal = firstToken
-      .replace(/-([a-z0-9])/gi, (_, c) => c.toUpperCase())
-      .replace(/^(.)/, (_, c) => c.toUpperCase());
-    return pascal.replace(/[^a-zA-Z0-9]/g, "") || "Block";
+  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);
+    }
   }
-  return "Block";
+  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. */

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>",
       "  ),",
       "};",