vibe-design-system 2.8.58 → 2.8.59

package/bin/init.js

@@ -278,8 +278,9 @@ export default config;
   // vite (default) & remix
   // For fullstack projects (client/src, frontend/src, etc.), add staticDirs for public assets
   const frontendDir = srcPrefix.split("/")[0]; // e.g. "client" from "client/src"
+  // Map public/ to "/" so components can load /images/... /figmaAssets/... etc. without prefix
   const staticDirsLine = srcPrefix !== "src"
-    ? `\n  staticDirs: [{ from: "../${frontendDir}/public", to: "/${frontendDir}" }],`
+    ? `\n  staticDirs: ["../${frontendDir}/public"],`
     : "";
 
   return `import type { StorybookConfig } from "@storybook/react-vite";

package/package.json

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

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

@@ -2365,8 +2365,47 @@ function writeFoundationsStories(foundations) {
     console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Typography.stories.tsx")));
   }
 
+  // Collect brand assets: prefer scan data, fallback to scanning public/ directories
   const brandAssets = foundations?.brand?.assets;
-  const assets = Array.isArray(brandAssets) ? brandAssets : [];
+  let assets = Array.isArray(brandAssets) ? brandAssets : [];
+
+  // Also scan public/ dirs directly — scan.mjs may miss most project image assets
+  {
+    const publicDirs = [
+      path.join(PROJECT_ROOT, "public"),
+      path.join(PROJECT_ROOT, "client", "public"),
+      path.join(PROJECT_ROOT, "frontend", "public"),
+      path.join(PROJECT_ROOT, "src", "assets"),
+      path.join(PROJECT_ROOT, "client", "src", "assets"),
+    ];
+    const IMAGE_EXT = /\.(svg|png|jpg|jpeg|webp|gif)$/i;
+    const existingUrls = new Set(assets.map((a) => a.url || a.path || ""));
+
+    for (const pubDir of publicDirs) {
+      if (!fs.existsSync(pubDir)) continue;
+      const newAssets = [];
+      const scanDir = (dir, baseUrl) => {
+        let entries;
+        try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
+        for (const e of entries) {
+          const urlPath = baseUrl + "/" + e.name;
+          if (e.isDirectory()) {
+            scanDir(path.join(dir, e.name), urlPath);
+          } else if (IMAGE_EXT.test(e.name) && !existingUrls.has(urlPath)) {
+            newAssets.push({ name: e.name.replace(/\.[^.]+$/, ""), url: urlPath });
+          }
+        }
+      };
+      scanDir(pubDir, "");
+      if (newAssets.length > 0) {
+        assets = [...assets, ...newAssets];
+        break; // Use first matching public dir only
+      }
+    }
+    // Limit to 40 assets to keep story file size reasonable
+    assets = assets.slice(0, 40);
+  }
+
   const brandContent =
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
@@ -2380,10 +2419,10 @@ function writeFoundationsStories(foundations) {
       "export const Default: Story = {",
       "  render: () => (",
       "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 24 }}>",
-      "      {assets.length === 0 ? <p>No brand assets found.</p> : assets.map((a, i) => (",
-      "        <div key={i} style={{ textAlign: \"center\" }}>",
-      "          <img src={\"/\" + String(a.path || \"\").replace(\"public/\", \"\")} style={{ maxHeight: 100, maxWidth: 200, objectFit: \"contain\" }} alt={a.name || \"\"} />",
-      "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\" }}>{a.name || a.type || \"asset\"}</div>",
+      "      {assets.length === 0 ? <p style={{ color: '#888', fontFamily: 'monospace' }}>No brand assets found — add images to public/ or client/public/</p> : assets.map((a, i) => (",
+      "        <div key={i} style={{ textAlign: \"center\", background: '#f8f8f8', borderRadius: 8, padding: 12, minWidth: 120 }}>",
+      "          <img src={a.url || (\"/\" + String(a.path || \"\").replace(/^public\\//, \"\"))} style={{ maxHeight: 100, maxWidth: 180, objectFit: \"contain\", display: 'block', margin: '0 auto' }} alt={a.name || \"\"} />",
+      "          <div style={{ fontSize: 11, marginTop: 8, color: \"#666\", wordBreak: 'break-all' }}>{a.name || a.type || \"asset\"}</div>",
       "        </div>",
       "      ))}",
       "    </div>",