vibe-design-system 2.8.59 → 2.8.61

package/bin/init.js

@@ -488,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");
@@ -508,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"]) {
@@ -714,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.59",
+  "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>",
       "",
@@ -2418,7 +2418,7 @@ function writeFoundationsStories(foundations) {
       "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ display: \"flex\", gap: 24, flexWrap: \"wrap\", padding: 24 }}>",
+      "    <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 || \"\"} />",
@@ -2475,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>",
       "          )}",
@@ -2509,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>",
@@ -2532,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>",
@@ -2587,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);",
@@ -2595,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>",
       "        );",
@@ -2607,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 }}>",
@@ -2707,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>",
@@ -2763,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 }}>",
@@ -2840,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 && (",
@@ -2950,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>",
@@ -3068,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 && (",
@@ -3174,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 && (",
@@ -3304,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 }}>",
@@ -3334,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}>",