vibe-design-system 2.8.49 → 2.8.50

package/package.json

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

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

@@ -677,7 +677,9 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
         lines.push(`    ${primaryDimension}: "${dimensions[primaryDimension].default || dimensions[primaryDimension].values[0]}",`);
       }
       lines.push(`    ${dimName}: "${val}",`);
-      if (childrenArgLine(componentName)) lines.push(childrenArgLine(componentName));
+      // For icon size use a short symbol; otherwise use component name
+      const childLabel = val === "icon" ? "\u2726" : componentName;
+      if (childrenArgLine(childLabel)) lines.push(childrenArgLine(childLabel));
       for (const line of filteredArgLines) lines.push(line);
       lines.push(`  },`);
       lines.push(`};`);
@@ -709,29 +711,51 @@ function buildMultiDimensionStories(variantMap, renderLine, childrenArgLine, def
     const secondaryDim = secondaryDimensions.find((d) => dimensions[d] && dimensions[d].values.length >= 2);
 
     lines.push(`export const AllVariants: Story = {`);
-    lines.push(`  render: () => (`);
-    lines.push(`    <div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 16 }}>`);
+    lines.push(`  parameters: { layout: "padded" },`);
+    lines.push(`  render: () => {`);
 
     if (secondaryDim) {
       const secondaryValues = dimensions[secondaryDim].values;
+      const colCount = secondaryValues.length;
+
+      // Style constants for the grid
+      lines.push(`    const hdr: React.CSSProperties = { textAlign: "center", fontSize: 11, fontWeight: 600, color: "#6b7280", fontFamily: "monospace", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0 4px" };`);
+      lines.push(`    const lbl: React.CSSProperties = { fontSize: 12, fontWeight: 500, color: "#374151", fontFamily: "monospace" };`);
+      lines.push(`    const cell: React.CSSProperties = { display: "flex", justifyContent: "center", alignItems: "center" };`);
+      lines.push(`    return (`);
+      lines.push(`      <div style={{ padding: 24 }}>`);
+      lines.push(`        <div style={{ display: "grid", gridTemplateColumns: "100px repeat(${colCount}, minmax(80px, 1fr))", gap: "16px 12px", alignItems: "center" }}>`);
+
+      // Header row: empty corner + secondary dimension labels
+      lines.push(`          <div />`);
+      for (const sVal of secondaryValues) {
+        lines.push(`          <div style={hdr}>${sVal}</div>`);
+      }
+
+      // Data rows: primary label + component cells
       for (const pVal of primaryValues) {
-        lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>`);
-        lines.push(`        <span style={{ width: 90, fontSize: 12, color: "#888", fontFamily: "monospace" }}>${pVal}</span>`);
+        lines.push(`          <div style={lbl}>${pVal}</div>`);
         for (const sVal of secondaryValues) {
-          lines.push(`        <ComponentRef ${primaryDimension}="${pVal}" ${secondaryDim}="${sVal}">${pVal}</ComponentRef>`);
+          const childText = sVal === "icon" ? "\u2726" : componentName;
+          lines.push(`          <div style={cell}><ComponentRef ${primaryDimension}="${pVal}" ${secondaryDim}="${sVal}">${childText}</ComponentRef></div>`);
         }
-        lines.push(`      </div>`);
       }
+
+      lines.push(`        </div>`);
+      lines.push(`      </div>`);
+      lines.push(`    );`);
     } else {
-      lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>`);
+      // No secondary dimension — labeled flex layout
+      lines.push(`    return (`);
+      lines.push(`      <div style={{ display: "flex", flexWrap: "wrap", gap: 12, padding: 24, alignItems: "center" }}>`);
       for (const val of primaryValues) {
-        lines.push(`        <ComponentRef ${primaryDimension}="${val}">${val}</ComponentRef>`);
+        lines.push(`        <ComponentRef ${primaryDimension}="${val}">${componentName}</ComponentRef>`);
       }
       lines.push(`      </div>`);
+      lines.push(`    );`);
     }
 
-    lines.push(`    </div>`);
-    lines.push(`  ),`);
+    lines.push(`  },`);
     lines.push(`};`);
   }
 
@@ -1595,7 +1619,7 @@ function buildProfileRenderLine(profile, RenderTarget, argsFallback) {
  */
 function buildProfileChildrenArgLine(profile) {
   return (label) => {
-    if (profile === "WRAPPER") return `    children: ${JSON.stringify(label)},`;
+    if (profile === "WRAPPER" || profile === "VARIANT") return `    children: ${JSON.stringify(label)},`;
     return null;
   };
 }
@@ -1697,6 +1721,8 @@ function buildStoryFileContent(comp) {
   lines.push(`  component: ComponentRef,`);
   // SECTION: no props/args → autodocs tries to render React.lazy without Suspense → useRef crash
   if (profile !== "SECTION") lines.push(`  tags: ["autodocs"],`);
+  // Center small components (VARIANT, WRAPPER, CONFIGURED, SAFE) to prevent vertical stretching
+  if (profile !== "SECTION") lines.push(`  parameters: { layout: "centered" },`);
 
   // Build argTypes from extracted TypeScript props + icon-specific overrides
   const argTypeEntries = [];