vibe-design-system 2.8.78 → 2.8.81

package/package.json

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

package/vds-core-template/scan.mjs

@@ -2207,6 +2207,21 @@ function extractVariantUsage(componentResults) {
   }
 }
 
+/**
+ * Heuristic: detect complex page-level components that should not get individual stories.
+ * Criteria: 500+ lines AND 4+ internal capitalized component definitions AND no cva()/forwardRef.
+ * Examples: a 900-line MethodologyMap.tsx with 8 inline sub-components.
+ */
+function isComplexPageComponent(content) {
+  const lines = content.split("\n").length;
+  if (lines < 500) return false;
+  const internalComps = (content.match(/\bconst\s+[A-Z][A-Za-z]+\s*[:=]\s*\(/g) || []).length;
+  if (internalComps < 4) return false;
+  // Don't flag UI primitives that use cva() or forwardRef — those are styled components
+  if (content.includes("cva(") || content.includes("forwardRef")) return false;
+  return true;
+}
+
 function scan() {
   const relativeFiles = COMPONENTS_DIR ? getAllComponentFiles(COMPONENTS_DIR) : [];
   if (!COMPONENTS_DIR) {
@@ -2231,7 +2246,8 @@ function scan() {
       description = "";
     }
     const tokens = extractTailwindTokens(content);
-    results.push({ file: rel, name, group, category, description, tokens });
+    const isPageComponent = isComplexPageComponent(content);
+    results.push({ file: rel, name, group, category, description, tokens, ...(isPageComponent ? { isPageComponent: true } : {}) });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);

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

@@ -2202,7 +2202,8 @@ function buildStoryFileContent(comp) {
         // Strip opacity modifier (e.g. "muted/20" → "muted") as a fallback
         const baseKey = key ? key.replace(/\/[\d.]+$/, "") : null;
         const entry = key ? (foundColors[key] || (baseKey !== key ? foundColors[baseKey] : null)) : null;
-        const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
+        const isValidCssColor = (v) => /^#[0-9a-fA-F]{3,8}$/.test(v) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lch|lab|color)\s*\(/.test(v) || v === 'transparent';
+        const hex = entry?.hex && isValidCssColor(entry.hex) ? entry.hex : null;
         return { token, hex, label: baseKey || key };
       });
 
@@ -4246,7 +4247,8 @@ function writeComponentInventoryStory(components, foundations) {
         let key = m ? m[1] : null;
         if (key) key = key.replace(/\/\d+$/, "");
         const entry = key ? foundColors[key] : null;
-        const hex = entry?.hex && /^#[0-9a-fA-F]{3,8}$/.test(entry.hex) ? entry.hex : null;
+        const isValidCssColor = (v) => /^#[0-9a-fA-F]{3,8}$/.test(v) || /^(rgb|rgba|hsl|hsla|oklch|oklab|lch|lab|color)\s*\(/.test(v) || v === 'transparent';
+        const hex = entry?.hex && isValidCssColor(entry.hex) ? entry.hex : null;
         return { token, hex };
       })
       .filter(s => s.hex);
@@ -4906,6 +4908,11 @@ function main() {
     const storyFileName = `${componentName}.stories.tsx`;
     const storyPath = path.join(STORIES_DIR, storyFileName);
     if (SKIP_LIST.includes(componentName)) continue;
+    // Skip complex page-level components detected by scan (500+ lines, 4+ inline sub-components)
+    if (comp.isPageComponent) {
+      console.log(`[VDS] ${componentName} → skipped (complex page component — add to extraSkipList to suppress this message)`);
+      continue;
+    }
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
     if (requiredCount > 3) {
       console.log(`[VDS] ${componentName} → skipped (${requiredCount} required props — too complex to auto-generate)`);

package/vds-core-template/storybook-adapt.mjs

@@ -262,6 +262,89 @@ function injectViteConfigAliases(projectRoot) {
   console.log(`[VDS] Storybook adapt: injected vite aliases: ${missingAliases.map(([k]) => k).join(", ")}`);
 }
 
+// ============================================================
+// VERSION-PINNED IMPORT HANDLING (Bolt/Lovable/AI-generated)
+// ============================================================
+
+/** Detect if import specifier has a @version suffix (e.g. @radix-ui/react-slot@1.1.2) */
+function isVersionPinned(spec) {
+  return /^(?:@[\w.-]+\/)?[\w.-]+@\d+\.\d+/.test(spec) && !spec.startsWith("@/");
+}
+
+/** Scan source files for any version-pinned imports */
+function hasVersionPinnedImports() {
+  if (!fs.existsSync(SRC_DIR)) return false;
+  const files = getAllSourceFiles(SRC_DIR, SRC_DIR).map((r) => path.join(SRC_DIR, r));
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const spec of extractImports(content)) {
+        if (isVersionPinned(spec)) return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
+/**
+ * Remove wrong version alias entries previously injected by a broken VDS run.
+ * These look like: "@radix-ui/react-slot@1.1.2": path.resolve(process.cwd(), "@radix-ui/react-slot"),
+ * They point to non-existent paths and must be replaced by the plugin approach.
+ */
+function cleanupWrongVersionAliases(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+  const before = content;
+  // Remove any alias line where key has @version suffix
+  content = content.replace(
+    /\n?\s*"(?:@[\w.-]+\/)?[\w.-]+@[\d.]+"\s*:\s*path\.resolve\(process\.cwd\(\),\s*"[^"]+"\),?/g,
+    ""
+  );
+  if (content !== before) {
+    fs.writeFileSync(mainPath, content, "utf-8");
+    console.log("[VDS] Storybook adapt: cleaned up incorrect version-pinned aliases from main.ts.");
+  }
+}
+
+/**
+ * Inject a Vite plugin that strips @version suffixes from package import specifiers.
+ * e.g.  @radix-ui/react-slot@1.1.2  →  @radix-ui/react-slot  (resolved from node_modules normally).
+ * Only added to viteFinal-based configs (not Next.js @storybook/nextjs).
+ */
+function injectVersionStripPlugin(projectRoot) {
+  const mainPath = getMainPath(projectRoot);
+  if (!mainPath) return;
+  let content = fs.readFileSync(mainPath, "utf-8");
+
+  if (content.includes("vds-version-pin-strip")) return; // already injected
+  if (!content.includes("viteFinal")) return;            // only for Vite-based storybook
+
+  // The plugin block to inject. Double-escaped backslashes become single in the written file.
+  const pluginBlock = `    plugins: [
+      {
+        name: "vds-version-pin-strip",
+        enforce: "pre",
+        async resolveId(id) {
+          // Strip @version suffix: @radix-ui/react-slot@1.1.2 → @radix-ui/react-slot
+          const m = id.match(/^((?:@[\\w.-]+\\/)?[\\w.-]+)@[\\d]+\\.[\\d]/);
+          if (m) return this.resolve(m[1], undefined, { skipSelf: true });
+        },
+      },
+    ],
+    `;
+
+  // Insert before the resolve: { block inside viteFinal
+  const resolvePattern = /([ \t]+)(resolve\s*:\s*\{)/;
+  if (resolvePattern.test(content)) {
+    content = content.replace(resolvePattern, (_, indent, resolveKw) =>
+      `${indent}${pluginBlock}${resolveKw}`
+    );
+    fs.writeFileSync(mainPath, content, "utf-8");
+    console.log("[VDS] Storybook adapt: injected vds-version-pin-strip Vite plugin.");
+  }
+}
+
 function main() {
   const projectRoot = PROJECT_ROOT;
   if (!fs.existsSync(path.join(projectRoot, ".storybook"))) {
@@ -272,10 +355,16 @@ function main() {
   injectViteConfigAliases(projectRoot);
   reportUnresolvedImports(projectRoot);
   const problematic = collectProblematicImports(projectRoot);
-  if (problematic.size === 0) return;
-  writeMocks(projectRoot, problematic);
-  injectAliases(projectRoot, problematic);
-  console.log("[VDS] Storybook adapt: mocked", [...problematic].join(", "));
+  if (problematic.size > 0) {
+    writeMocks(projectRoot, problematic);
+    injectAliases(projectRoot, problematic);
+    console.log("[VDS] Storybook adapt: mocked", [...problematic].join(", "));
+  }
+  // Handle version-pinned imports (AI/Bolt/Lovable-generated projects with @pkg@version syntax)
+  if (hasVersionPinnedImports()) {
+    cleanupWrongVersionAliases(projectRoot);
+    injectVersionStripPlugin(projectRoot);
+  }
 }
 
 main();