vibe-design-system 2.5.3 → 2.5.4

package/package.json

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

package/vds-core-template/scan.mjs

@@ -666,7 +666,6 @@ function flattenJsx(jsx) {
       continue;
     }
     if (jsx[i] === "{" && (i === 0 || jsx[i - 1] !== "{")) {
-      const start = i;
       i++;
       let depth = 1;
       while (i < len && depth > 0) {
@@ -684,6 +683,39 @@ function flattenJsx(jsx) {
   return result;
 }
 
+/** Convert HTML style="key: value; ..." to React style={{ key: 'value', ... }} (camelCase keys). */
+function convertHtmlStyleToReact(jsx) {
+  return jsx.replace(
+    /style\s*=\s*["']([^"']*)["']/g,
+    (_, cssStr) => {
+      const obj = {};
+      const parts = (cssStr || "").split(";").map((s) => s.trim()).filter(Boolean);
+      for (const part of parts) {
+        const colon = part.indexOf(":");
+        if (colon <= 0) continue;
+        const key = part.slice(0, colon).trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        const value = part.slice(colon + 1).trim().replace(/^["']|["']$/g, "");
+        if (key) obj[key] = value;
+      }
+      if (Object.keys(obj).length === 0) return "style={{}}";
+      const entries = Object.entries(obj).map(([k, v]) => `${k}: "${String(v).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`).join(", ");
+      return `style={{ ${entries} }}`;
+    }
+  );
+}
+
+/** Replace Lucide icon tags with LucideIcons.TagName so namespace import works. */
+function applyLucideNamespace(jsx, lucideTags) {
+  let out = jsx;
+  for (const tag of lucideTags) {
+    const openRe = new RegExp("<" + tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?=[\\s/>])", "g");
+    const closeRe = new RegExp("</" + tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ">", "g");
+    out = out.replace(openRe, "<LucideIcons." + tag);
+    out = out.replace(closeRe, "</LucideIcons." + tag + ">");
+  }
+  return out;
+}
+
 /** Collect PascalCase tag names from JSX that are not known HTML. */
 function collectComponentTags(jsx) {
   const tags = new Set();
@@ -716,6 +748,7 @@ function writeVdsGeneratedComponents(suggestions) {
     const tokens = [];
     if (s.fullJsx && s.fullJsx.trim().length > 0) {
       bodyJsx = flattenJsx(s.fullJsx);
+      bodyJsx = convertHtmlStyleToReact(bodyJsx);
       const componentTags = collectComponentTags(bodyJsx);
       const lucideTags = [];
       const uiTags = [];
@@ -723,15 +756,14 @@ function writeVdsGeneratedComponents(suggestions) {
         if (/^[A-Z][a-z0-9]+$/.test(tag) && tag.length > 2) lucideTags.push(tag);
         else uiTags.push(tag);
       }
-      let importLines = ['import * as React from "react";'];
-      if (lucideTags.length > 0) {
-        importLines.push(`import { ${lucideTags.join(", ")} } from "lucide-react";`);
-      }
-      for (const tag of uiTags) {
-        if (!lucideTags.includes(tag)) {
-          importLines.push(`import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
-        }
-      }
+      bodyJsx = applyLucideNamespace(bodyJsx, lucideTags);
+      const standardImports = [
+        'import React from "react";',
+        'import { motion } from "framer-motion";',
+        'import * as LucideIcons from "lucide-react";',
+      ];
+      const uiImportLines = uiTags.map((tag) => `import { ${tag} } from "@/components/ui/${toKebab(tag)}";`);
+      const importLines = [...standardImports, ...uiImportLines];
       const content = importLines.join("\n") + "\n\n" +
         `export function ${componentName}() {\n  return (\n    ` +
         bodyJsx.replace(/\n/g, "\n    ") + "\n  );\n}\n";
@@ -741,7 +773,9 @@ function writeVdsGeneratedComponents(suggestions) {
       const tagName = s.tagName || "div";
       const className = s.pattern || "";
       bodyJsx = `<${tagName} className="${className.replace(/"/g, '\\"')}">\n      {null}\n    </${tagName}>`;
-      const content = `import * as React from "react";
+      const content = `import React from "react";
+import { motion } from "framer-motion";
+import * as LucideIcons from "lucide-react";
 
 export function ${componentName}() {
   return (