vibe-design-system 2.8.79 → 2.8.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.79",
+  "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)`);