vibe-design-system 2.5.1 → 2.5.3

package/package.json

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

package/vds-core-template/scan.mjs

@@ -620,7 +620,7 @@ function extractComponentSuggestions() {
     if (count < 2) continue;
     const suggestedName = suggestNameFromContent(innerText) || suggestNameFromPattern(pattern);
     suggestions.push({
-      suggestedName: suggestedName.replace(/\s+/g, ""),
+      suggestedName: sanitizeComponentName(suggestedName.replace(/\s+/g, "")),
       tagName: tagName || "div",
       pattern,
       fullJsx,
@@ -635,10 +635,55 @@ function extractComponentSuggestions() {
 
 const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
 
+/** Ensure component name is valid JS: no leading digits/special chars, PascalCase. */
+function sanitizeComponentName(name) {
+  if (!name || typeof name !== "string") return "Extracted";
+  let s = name.replace(/\s+/g, "").replace(/^[0-9\W_]+/, "");
+  if (!s) return "Extracted";
+  s = s.charAt(0).toUpperCase() + s.slice(1);
+  return s;
+}
+
 function toKebab(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
 }
 
+/** Flatten JSX: replace ${...} and {...} (variables/expressions) with placeholders so generated component has no "item is not defined". */
+function flattenJsx(jsx) {
+  let result = "";
+  let i = 0;
+  const len = jsx.length;
+  while (i < len) {
+    if (jsx.slice(i, i + 2) === "${") {
+      i += 2;
+      let depth = 1;
+      while (i < len && depth > 0) {
+        if (jsx[i] === "{") depth++;
+        else if (jsx[i] === "}") depth--;
+        i++;
+      }
+      result += '"Sample"';
+      continue;
+    }
+    if (jsx[i] === "{" && (i === 0 || jsx[i - 1] !== "{")) {
+      const start = i;
+      i++;
+      let depth = 1;
+      while (i < len && depth > 0) {
+        const c = jsx[i];
+        if (c === "{") depth++;
+        else if (c === "}") depth--;
+        i++;
+      }
+      result += '{"Sample"}';
+      continue;
+    }
+    result += jsx[i];
+    i++;
+  }
+  return result;
+}
+
 /** Collect PascalCase tag names from JSX that are not known HTML. */
 function collectComponentTags(jsx) {
   const tags = new Set();
@@ -659,7 +704,7 @@ function writeVdsGeneratedComponents(suggestions) {
   const entries = [];
   for (let i = 0; i < suggestions.length; i++) {
     const s = suggestions[i];
-    let baseName = (s.suggestedName || "Extracted").replace(/\s+/g, "");
+    let baseName = sanitizeComponentName(s.suggestedName || "Extracted");
     let fileName = baseName + ".tsx";
     if (usedNames.has(fileName)) fileName = baseName + String(i + 1) + ".tsx";
     usedNames.add(fileName);
@@ -670,7 +715,7 @@ function writeVdsGeneratedComponents(suggestions) {
     let bodyJsx;
     const tokens = [];
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
-      bodyJsx = s.fullJsx;
+      bodyJsx = flattenJsx(s.fullJsx);
       const componentTags = collectComponentTags(bodyJsx);
       const lucideTags = [];
       const uiTags = [];

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

@@ -587,9 +587,10 @@ function buildStoryFileContent(comp) {
   }
   const exportStyle = detectExportStyle(source, componentName);
   const omitChildren = componentWrapsVoidElement(source);
+  const isPage = comp.file.startsWith("pages/");
 
-  // Skip story if no export found (e.g. Join.tsx with broken default export)
-  if (exportStyle === "unknown" && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
+  // Skip story only if not a page and no export found
+  if (exportStyle === "unknown" && !isPage && (!source.includes("export") || !new RegExp(`\\b${componentName}\\b`).test(source))) {
     return null;
   }
 
@@ -600,7 +601,10 @@ function buildStoryFileContent(comp) {
   const lines = [];
   lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
 
-  if (exportStyle === "default") {
+  if (isPage && exportStyle !== "default") {
+    lines.push(`import * as Named from "${importPath}";`);
+    lines.push(`const ComponentRef = Named["${componentName}"] ?? Named.default;`);
+  } else if (exportStyle === "default") {
     lines.push(`import ${componentName} from "${importPath}";`);
     lines.push(`const ComponentRef = ${componentName};`);
   } else if (exportStyle === "named" || exportStyle === "unknown") {