vibe-design-system 2.8.50 → 2.8.51

package/package.json

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

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

@@ -1603,7 +1603,15 @@ function buildProfileRenderLine(profile, RenderTarget, argsFallback) {
       )},`;
     case "SAFE":
       return `  render: (args = {}) => ${suspense(`React.createElement(${RenderTarget}, args)`)},`;
-    default: { // CONFIGURED, VARIANT
+    case "VARIANT": {
+      // Wrap in inline-block div to prevent vertical stretching caused by
+      // global SidebarProvider/flex decorators or layout: "fullscreen" in preview.
+      const argsParam = argsFallback ? "(args = {})" : "(args)";
+      const propsArg  = argsFallback ? `{ ...args${argsFallback} }` : "args";
+      const inner = suspense(`React.createElement(${RenderTarget}, ${propsArg})`);
+      return `  render: ${argsParam} => React.createElement('div', { style: { display: 'inline-block' } }, ${inner}),`;
+    }
+    default: { // CONFIGURED
       const argsParam = argsFallback ? "(args = {})" : "(args)";
       const propsArg  = argsFallback ? `{ ...args${argsFallback} }` : "args";
       return `  render: ${argsParam} => ${suspense(`React.createElement(${RenderTarget}, ${propsArg})`)},`;
@@ -1796,6 +1804,90 @@ function buildStoryFileContent(comp) {
   return lines.join("\n");
 }
 
+/**
+ * Fallback grid system scanner — reads source files for Tailwind grid patterns
+ * when scan.mjs didn't produce gridSystem data.
+ */
+function scanGridSystemFallback() {
+  const srcDirs = [
+    path.join(PROJECT_ROOT, "src"),
+    path.join(PROJECT_ROOT, "client/src"),
+    path.join(PROJECT_ROOT, "app"),
+  ];
+  const breakpoints = {};  // { "md": { count, topFiles: [] }, ... }
+  const gridCols = {};     // { "2": { count }, "3": { count }, ... }
+  const gaps = {};          // { "4": { count }, "6": { count }, ... }
+  const maxWidths = {};     // { "7xl": count, ... }
+  let containerCount = 0;
+
+  const BP_NAMES = ["sm", "md", "lg", "xl", "2xl"];
+  const bpRe = /\b(sm|md|lg|xl|2xl):/g;
+  const colRe = /\bgrid-cols-(\w+)/g;
+  const gapRe = /\bgap-(\w+)/g;
+  const maxWRe = /\bmax-w-(\w+)/g;
+  const containerRe = /\bcontainer\b/g;
+
+  function walkFiles(dir) {
+    if (!fs.existsSync(dir)) return;
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (["node_modules", ".next", "dist", "build", ".storybook", "stories"].includes(entry.name)) continue;
+        walkFiles(full);
+      } else if (/\.(tsx|jsx|ts|js|css)$/.test(entry.name)) {
+        try {
+          const content = fs.readFileSync(full, "utf-8");
+          const relFile = path.relative(PROJECT_ROOT, full).replace(/^(client\/)?src\//, "");
+          const shortName = path.basename(relFile, path.extname(relFile));
+
+          // Breakpoints
+          let m;
+          while ((m = bpRe.exec(content)) !== null) {
+            const bp = m[1];
+            if (!breakpoints[bp]) breakpoints[bp] = { count: 0, topFiles: [] };
+            breakpoints[bp].count++;
+            if (!breakpoints[bp].topFiles.includes(shortName) && breakpoints[bp].topFiles.length < 5) {
+              breakpoints[bp].topFiles.push(shortName);
+            }
+          }
+
+          // Grid columns
+          while ((m = colRe.exec(content)) !== null) {
+            const col = m[1];
+            if (!gridCols[col]) gridCols[col] = { count: 0 };
+            gridCols[col].count++;
+          }
+
+          // Gaps
+          while ((m = gapRe.exec(content)) !== null) {
+            const gap = m[1];
+            if (!gaps[gap]) gaps[gap] = { count: 0 };
+            gaps[gap].count++;
+          }
+
+          // Max widths
+          while ((m = maxWRe.exec(content)) !== null) {
+            const mw = m[1];
+            if (!maxWidths[mw]) maxWidths[mw] = 0;
+            maxWidths[mw]++;
+          }
+
+          // Container
+          const cMatches = content.match(containerRe);
+          if (cMatches) containerCount += cMatches.length;
+
+        } catch { /* skip unreadable files */ }
+      }
+    }
+  }
+
+  for (const dir of srcDirs) walkFiles(dir);
+
+  if (Object.keys(breakpoints).length === 0 && Object.keys(gridCols).length === 0) return null;
+  return { breakpoints, gridCols, gaps, maxWidths, containerCount };
+}
+
 function writeFoundationsStories(foundations) {
   const foundationsDir = path.join(STORIES_DIR, "foundations");
   ensureDir(foundationsDir);
@@ -2275,7 +2367,11 @@ function writeFoundationsStories(foundations) {
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Icons.stories.tsx")));
   }
 
-  const gridSystem = foundations?.gridSystem;
+  // Fallback: if scan.mjs didn't produce gridSystem data, scan source files directly
+  let gridSystem = foundations?.gridSystem || null;
+  if (!gridSystem || (Object.keys(gridSystem.breakpoints || {}).length === 0 && Object.keys(gridSystem.gridCols || {}).length === 0)) {
+    gridSystem = scanGridSystemFallback();
+  }
   if (gridSystem && (Object.keys(gridSystem.breakpoints || {}).length > 0 || Object.keys(gridSystem.gridCols || {}).length > 0)) {
     const bpEntries = Object.entries(gridSystem.breakpoints || {});
     const colEntries = Object.entries(gridSystem.gridCols || {});