vibe-design-system 2.8.58 → 2.8.61

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";
@@ -487,6 +488,19 @@ function ensureVdsCore(projectRoot) {
   console.log("📦 vds-core/ hazır.");
 }
 
+/**
+ * Computes a deterministic Storybook port based on the project root path.
+ * Each project gets a consistent unique port (6100–6899) so switching between
+ * projects doesn't cause "story not found" errors from stale browser URLs.
+ */
+function computeProjectPort(projectRoot) {
+  let h = 5381;
+  for (let i = 0; i < projectRoot.length; i++) {
+    h = ((h << 5) + h + projectRoot.charCodeAt(i)) & 0x7fffffff;
+  }
+  return 6100 + (h % 800);
+}
+
 // ADIM 4 — package.json scriptleri
 function addScripts(projectRoot) {
   const pkgPath = path.join(projectRoot, "package.json");
@@ -507,7 +521,8 @@ function addScripts(projectRoot) {
     changed = true;
   }
   if (!scripts.storybook) {
-    scripts.storybook = "storybook dev -p 6006";
+    const sbPort = computeProjectPort(projectRoot);
+    scripts.storybook = `storybook dev -p ${sbPort}`;
     changed = true;
   }
   if (!scripts["build-storybook"]) {
@@ -713,13 +728,15 @@ runSetupStorybookProviders(projectRoot);
 runStorybookAdapt(projectRoot);
 
 // ADIM 8
+const _finalPort = computeProjectPort(projectRoot);
 console.log("\n✅ VDS kuruldu!");
+console.log(`→ Storybook: http://localhost:${_finalPort}`);
 console.log("→ npm run vds:stories    — tarama + story + provider (tek komut)");
 console.log("→ npm run vds:watch      — otomatik güncelleme (watch modu)");
 console.log("\nNot: Storybook başlarken (Node 24+) DEP0190 uyarısı çıkarsa Storybook kaynaklıdır, güvenle yok sayabilirsiniz.\n");
 
 // ADIM 10 — Storybook'u otomatik başlat
-console.log("🚀 Storybook başlatılıyor → http://localhost:6006\n");
+console.log(`🚀 Storybook başlatılıyor → http://localhost:${_finalPort}\n`);
 const sbProc = spawn("npm", ["run", "storybook"], {
   stdio: "inherit",
   cwd: projectRoot,

package/package.json

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

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

@@ -2143,7 +2143,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#f8fafc\", minHeight: 500 }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: 500, color: \"#111\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\", color: \"#111\" }}>Colors</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 40px\" }}>Design tokens defined in CSS variables — grouped by role</p>",
       "",
@@ -2262,7 +2262,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 860, color: \"#111\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 860, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Typography</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Type scale, font families, and weights</p>",
       "",
@@ -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\";",
@@ -2379,11 +2418,11 @@ 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>",
+      "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 32, background: \"#fff\", minHeight: \"100vh\" }}>",
+      "      {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>",
@@ -2436,33 +2475,33 @@ function writeFoundationsStories(foundations) {
       "          title={`Click to copy: ${d.name}`}",
       "          style={{",
       "            display: \"flex\", flexDirection: \"column\", gap: 10, padding: 14,",
-      "            border: `1px solid ${isCopied ? \"#4ade80\" : \"#1e293b\"}`,",
+      "            border: `1px solid ${isCopied ? \"#16a34a\" : \"#e5e7eb\"}`,",
       "            borderRadius: 10,",
-      "            background: isCopied ? \"#052e16\" : \"#0f172a\",",
+      "            background: isCopied ? \"#f0fdf4\" : \"#f9fafb\",",
       "            cursor: \"pointer\",",
       "            opacity: faded ? 0.4 : 1,",
       "            transition: \"border-color 0.15s, background 0.15s\",",
       "          }}",
       "        >",
       "          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"flex-start\" }}>",
-      "            <div style={{ padding: 8, background: \"#1e293b\", borderRadius: 8, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>",
-      "              <Icon size={22} strokeWidth={1.75} color=\"#94a3b8\" />",
+      "            <div style={{ padding: 8, background: \"#f3f4f6\", borderRadius: 8, display: \"flex\", alignItems: \"center\", justifyContent: \"center\" }}>",
+      "              <Icon size={22} strokeWidth={1.75} color=\"#374151\" />",
       "            </div>",
       "            {d.total > 0 && (",
-      "              <span style={{ fontSize: 11, fontWeight: 600, background: \"#1e293b\",",
-      "                color: \"#94a3b8\", padding: \"2px 7px\", borderRadius: 999, alignSelf: \"flex-start\" }}>",
+      "              <span style={{ fontSize: 11, fontWeight: 600, background: \"#e5e7eb\",",
+      "                color: \"#374151\", padding: \"2px 7px\", borderRadius: 999, alignSelf: \"flex-start\" }}>",
       "                ×{d.total}",
       "              </span>",
       "            )}",
       "          </div>",
-      "          <span style={{ fontSize: 12, fontWeight: 500, color: isCopied ? \"#4ade80\" : \"#e2e8f0\" }}>",
+      "          <span style={{ fontSize: 12, fontWeight: 500, color: isCopied ? \"#16a34a\" : \"#111827\" }}>",
       "            {isCopied ? \"Copied!\" : d.name}",
       "          </span>",
       "          {d.topFiles.length > 0 && (",
       "            <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 4 }}>",
       "              {d.topFiles.map((f) => (",
-      "                <span key={f} style={{ fontSize: 10, background: \"#1e293b\", color: \"#64748b\",",
-      "                  padding: \"1px 6px\", borderRadius: 4 }}>{f}</span>",
+      "                <span key={f} style={{ fontSize: 10, background: \"#e8f0fe\", color: \"#1e40af\",",
+      "                  padding: \"1px 6px\", borderRadius: 4, fontFamily: \"monospace\" }}>{f}</span>",
       "              ))}",
       "            </div>",
       "          )}",
@@ -2470,18 +2509,19 @@ function writeFoundationsStories(foundations) {
       "      );",
       "    };",
       "    return (",
-      "      <div style={{ padding: 24, fontFamily: \"sans-serif\" }}>",
+      "      <div style={{ padding: 32, fontFamily: \"system-ui,sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
+      "        <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Icons</h2>",
       "        <div style={{ marginBottom: 24 }}>",
-      "          <p style={{ margin: 0, marginBottom: 4, fontSize: 14, color: \"#94a3b8\" }}>",
-      "            {iconData.length} icons imported from <code style={{ fontSize: 12 }}>lucide-react</code> in app code.",
+      "          <p style={{ margin: 0, marginBottom: 4, fontSize: 13, color: \"#6b7280\" }}>",
+      "            {iconData.length} icons imported from <code style={{ fontSize: 12, background: \"#f3f4f6\", padding: \"1px 5px\", borderRadius: 4 }}>lucide-react</code> in app code.",
       "          </p>",
-      "          <p style={{ margin: 0, fontSize: 12, color: \"#475569\" }}>",
+      "          <p style={{ margin: 0, fontSize: 12, color: \"#9ca3af\" }}>",
       "            Sorted by usage frequency · Badge = total JSX usages · Click any card to copy the icon name.",
       "          </p>",
       "        </div>",
       "        {usedIcons.length > 0 && (",
       "          <>",
-      "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#64748b\",",
+      "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#374151\",",
       "              textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>",
       "              Active — {usedIcons.length}",
       "            </p>",
@@ -2493,7 +2533,7 @@ function writeFoundationsStories(foundations) {
       "        )}",
       "        {unusedIcons.length > 0 && (",
       "          <>",
-      "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#334155\",",
+      "            <p style={{ margin: \"0 0 12px\", fontSize: 12, fontWeight: 600, color: \"#9ca3af\",",
       "              textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>",
       "              Imported, not used in JSX — {unusedIcons.length}",
       "            </p>",
@@ -2548,7 +2588,7 @@ function writeFoundationsStories(foundations) {
       "    const gapEntries = Object.entries(gridSystem.gaps || {});",
       "    const maxWEntries = Object.entries(gridSystem.maxWidths || {});",
       "    const chip = (label: string) => (",
-      "      <span key={label} style={{ fontSize: 10, background: \"#1e293b\", color: \"#64748b\", padding: \"1px 6px\", borderRadius: 4 }}>{label}</span>",
+      "      <span key={label} style={{ fontSize: 10, background: \"#e8f0fe\", color: \"#1e40af\", padding: \"1px 6px\", borderRadius: 4, fontFamily: \"monospace\" }}>{label}</span>",
       "    );",
       "    const renderColPreview = (colVal: string) => {",
       "      const n = parseInt(colVal, 10);",
@@ -2556,7 +2596,7 @@ function writeFoundationsStories(foundations) {
       "        return (",
       "          <div style={{ display: \"grid\", gridTemplateColumns: `repeat(${n}, 1fr)`, gap: 2, marginBottom: 8 }}>",
       "            {Array.from({ length: n }).map((_, i) => (",
-      "              <div key={i} style={{ height: 20, borderRadius: 3, background: \"#1e3a5f\" }} />",
+      "              <div key={i} style={{ height: 20, borderRadius: 3, background: \"#3b82f6\" }} />",
       "            ))}",
       "          </div>",
       "        );",
@@ -2568,7 +2608,7 @@ function writeFoundationsStories(foundations) {
       "      );",
       "    };",
       "    return (",
-      "      <div style={{ padding: 24, fontFamily: \"sans-serif\", maxWidth: 900 }}>",
+      "      <div style={{ padding: 24, fontFamily: \"sans-serif\", maxWidth: 900, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
       "",
       "        {/* ── Breakpoints ── */}",
       "        <section style={{ marginBottom: 40 }}>",
@@ -2668,7 +2708,7 @@ function writeFoundationsStories(foundations) {
       "                <span key={val} style={{ display: \"flex\", alignItems: \"center\", gap: 6,",
       "                  background: \"#0a0f1a\", border: \"1px solid #1e293b\", borderRadius: 6, padding: \"5px 10px\", fontSize: 12 }}>",
       "                  <code style={{ color: \"#67e8f9\" }}>gap-{val}</code>",
-      "                  <span style={{ color: \"#475569\", fontSize: 11 }}>×{data.count}</span>",
+      "                  <span style={{ color: \"#374151\", fontSize: 11 }}>×{data.count}</span>",
       "                </span>",
       "              ))}",
       "            </div>",
@@ -2724,7 +2764,7 @@ function writeFoundationsStories(foundations) {
         "",
         "export const Default: Story = {",
         "  render: () => (",
-        "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
+        "    <div style={{ padding: 32, fontFamily: \"system-ui, sans-serif\", background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
         "      <h2 style={{ marginBottom: 8 }}>Used Button variants in app code</h2>",
         "      <p style={{ marginBottom: 16, color: \"#888\", fontSize: 13 }}>Based on &lt;Button ... /&gt; usages in src/ (ignores lowercase &lt;button&gt;).</p>",
         "      <table style={{ borderCollapse: \"collapse\", width: \"100%\", fontSize: 13 }}>",
@@ -2801,7 +2841,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 760, color: \"#111\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 760, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Spacing Scale</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 24px\" }}>Base unit: 0.25rem = 4px · built on an 8px grid system</p>",
       "      {usedSpacing.length > 0 && (",
@@ -2911,7 +2951,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#f1f5f9\", minHeight: 400 }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\", color: \"#111\" }}>Elevation & Shadows</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Depth is communicated through layered shadow levels</p>",
       "      <h3 style={{ fontSize: 15, fontWeight: 600, margin: \"0 0 14px\", color: \"#374151\" }}>Shadow Scale</h3>",
@@ -3029,7 +3069,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 800 }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 800, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Border & Radius</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Corner radius scale — from sharp edges to fully rounded</p>",
       "      {usedRadius.length > 0 && (",
@@ -3135,7 +3175,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 700, color: \"#111\" }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, maxWidth: 700, color: \"#111\", background: \"#fff\", minHeight: \"100vh\" }}>",
       "      <h2 style={{ fontSize: 20, fontWeight: 700, margin: \"0 0 4px\" }}>Motion & Interaction</h2>",
       "      <p style={{ fontSize: 13, color: \"#888\", margin: \"0 0 32px\" }}>Consistent timing and easing for smooth, intentional motion</p>",
       "      {usedAnimations.length > 0 && (",
@@ -3265,7 +3305,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ padding: 32, fontFamily: 'system-ui, sans-serif', background: '#f7fafc', minHeight: '100vh' }}>",
+      "    <div style={{ padding: 32, fontFamily: 'system-ui, sans-serif', background: '#fff', minHeight: '100vh', color: '#111' }}>",
       "      <h2 style={{ marginBottom: 8, fontSize: 24, fontWeight: 700, color: '#1a202c' }}>Component Suggestions</h2>",
       "      <p style={{ color: '#718096', marginBottom: 32, fontSize: 14 }}>Bu pattern'ler birden fazla dosyada tekrar ediyor. Her biri ayrı bir component olabilir. <strong>Copy Prompt</strong> butonuna tıklayıp Cursor veya Superflex'e yapıştır.</p>",
       "      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>",
@@ -3295,7 +3335,7 @@ function writeChangelogStory(changelog) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ fontFamily: \"monospace\", padding: 24 }}>",
+      "    <div style={{ fontFamily: \"system-ui,sans-serif\", padding: 32, background: \"#fff\", minHeight: \"100vh\", color: \"#111\" }}>",
       "      <h2>CHANGELOG</h2>",
       "      {changelog.length === 0 ? <p>No changes recorded yet.</p> : changelog.map((entry) => (",
       "        <div key={entry.version}>",