vibe-design-system 1.9.12 → 2.0.1

package/bin/init.js

@@ -1,14 +1,16 @@
 #!/usr/bin/env node
 /**
- * VDS installer: npx vibe-design-system init
+ * VDS init: npx vibe-design-system init
  *
- * Single command that:
- * 1. Copies vds-core files (scan.mjs, story-generator.mjs, dashboard-server.mjs)
- * 2. Installs Storybook if not present (npx storybook@latest init --yes)
- * 3. Creates/updates .storybook/preview with index.css import and dark decorator
- * 4. Runs node vds-core/scan.mjs
- * 5. Runs node vds-core/story-generator.mjs
- * 6. Adds all scripts to package.json
+ * ADIM 1 — Bağımlılık kontrolü (storybook, @storybook/react-vite)
+ * ADIM 2 — .storybook/ (main.ts, preview.ts)
+ * ADIM 3 — vds-core/ kopyala
+ * ADIM 4 — package.json scriptleri
+ * ADIM 5 — .cursorrules
+ * ADIM 6 — src/stories/
+ * ADIM 7 — İlk tarama (scan + story-generator)
+ * ADIM 8 — Başarı mesajı
+ * ADIM 9 — Storybook örnek dosyalarını sil
  */
 import fs from "fs";
 import path from "path";
@@ -19,125 +21,230 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const INSTALLER_ROOT = path.join(__dirname, "..");
 const TEMPLATE_DIR = path.join(INSTALLER_ROOT, "vds-core-template");
 
-function getProjectRoot() {
-  const cwd = process.cwd();
+const STORYBOOK_MAIN_TS = `import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;
+`;
+
+const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
+import "../src/index.css";
+const preview: Preview = { parameters: { layout: "centered" } };
+export default preview;
+`;
+
+const CURSORRULES = `# VDS — Vibe Design System
+Bu proje VDS kullanıyor. Komutlar:
+- npm run vds → projeyi tara
+- npm run vds:stories → Storybook story'lerini üret
+- npm run vds:watch → değişiklikleri izle
+- npm run storybook → design system'ı aç (localhost:6006)
+
+Geliştirme kuralları:
+- UI component'leri src/components/ui/ altına koy
+- Variant'lar için cva() kullan
+- Tailwind CSS kullan
+- Named export veya default export — ikisi de çalışır
+`;
+
+const WATCH_MJS = `#!/usr/bin/env node
+import { watch } from 'fs';
+import { execSync } from 'child_process';
+import { resolve } from 'path';
+
+const ROOT = resolve(process.cwd());
+const SRC = resolve(ROOT, 'src');
+let timeout = null;
+
+function run() {
+  const ts = new Date().toLocaleTimeString();
+  console.log(\`\\n[VDS \${ts}] Değişiklik algılandı, taranıyor...\`);
   try {
-    const pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf-8"));
-    if (pkg.name === "vibe-design-system") return path.join(cwd, "..");
-  } catch (_) {}
-  return cwd;
+    execSync('node vds-core/scan.mjs', { stdio: 'inherit', cwd: ROOT });
+    execSync('node vds-core/story-generator.mjs', { stdio: 'inherit', cwd: ROOT });
+    console.log(\`[VDS \${ts}] ✅ Design system güncellendi.\`);
+  } catch (e) {
+    console.error(\`[VDS \${ts}] ❌ Hata:\`, e.message);
+  }
 }
 
-function isStorybookInstalled(projectRoot) {
-  const storybookDir = path.join(projectRoot, ".storybook");
-  if (fs.existsSync(storybookDir)) return true;
+function onFileChange(eventType, filename) {
+  if (!filename) return;
+  if (filename.includes('stories/')) return;
+  if (filename.includes('vds-output')) return;
+  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') && 
+      !filename.endsWith('.css') && !filename.endsWith('.js')) return;
+  console.log(\`[VDS] Değişiklik: \${filename}\`);
+  clearTimeout(timeout);
+  timeout = setTimeout(run, 2000);
+}
+
+run();
+console.log('[VDS] 👀 src/ klasörü izleniyor...');
+console.log('[VDS] Durdurmak için Ctrl+C\\n');
+watch(SRC, { recursive: true }, onFileChange);
+`;
+
+const STORYBOOK_EXAMPLE_FILES = [
+  "Button.stories.js",
+  "Header.stories.js",
+  "Page.stories.js",
+  "Button.jsx",
+  "Header.jsx",
+  "Page.jsx",
+];
+
+function getProjectRoot() {
+  return process.cwd();
+}
+
+function readPackageJson(projectRoot) {
   const pkgPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(pkgPath)) return null;
   try {
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
-    const dev = pkg.devDependencies || {};
-    if (dev["@storybook/react-vite"] || dev["storybook"]) return true;
-  } catch (_) {}
-  return false;
+    return JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  } catch (_) {
+    return null;
+  }
+}
+
+// ADIM 1 — Bağımlılık kontrolü
+function needsStorybook(projectRoot) {
+  const pkg = readPackageJson(projectRoot);
+  if (!pkg) return false;
+  const dev = pkg.devDependencies || {};
+  return !(dev.storybook && dev["@storybook/react-vite"]);
 }
 
 function installStorybook(projectRoot) {
-  console.log("📚 Storybook kuruluyor...");
-  const r = spawnSync("npx", ["storybook@latest", "init", "--yes"], {
-    cwd: projectRoot,
-    stdio: "inherit",
-    shell: true,
-  });
+  console.log("📚 Storybook bağımlılıkları kuruluyor...");
+  const r = spawnSync(
+    "npm",
+    ["install", "--save-dev", "storybook", "@storybook/react", "@storybook/react-vite"],
+    { cwd: projectRoot, stdio: "inherit" }
+  );
   if (r.status !== 0) {
-    console.warn("⚠️ Storybook init tamamlanamadı; manuel: npx storybook@latest init");
+    console.warn("⚠️ npm install storybook tamamlanamadı.");
   }
 }
 
-const PREVIEW_CONTENT = `import type { Preview } from "@storybook/react-vite";
-import React from "react";
-import "../src/index.css";
+// ADIM 2 — .storybook/
+function ensureStorybook(projectRoot) {
+  const storybookDir = path.join(projectRoot, ".storybook");
+  if (!fs.existsSync(storybookDir)) {
+    fs.mkdirSync(storybookDir, { recursive: true });
+    console.log("📁 .storybook/ oluşturuldu.");
+  }
 
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark" style={{ minHeight: "100vh", padding: "1rem" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
+  const mainPath = path.join(storybookDir, "main.ts");
+  if (!fs.existsSync(mainPath)) {
+    fs.writeFileSync(mainPath, STORYBOOK_MAIN_TS, "utf-8");
+    console.log("📝 .storybook/main.ts yazıldı.");
+  }
 
-export default preview;
-`;
+  const previewPath = path.join(storybookDir, "preview.ts");
+  if (!fs.existsSync(previewPath)) {
+    fs.writeFileSync(previewPath, STORYBOOK_PREVIEW_TS, "utf-8");
+    console.log("📝 .storybook/preview.ts yazıldı.");
+  }
+}
 
-function ensureStorybookPreview(projectRoot) {
-  const storybookDir = path.join(projectRoot, ".storybook");
-  if (!fs.existsSync(storybookDir)) fs.mkdirSync(storybookDir, { recursive: true });
+// ADIM 3 — vds-core/ kopyala
+function copyDirRecursive(src, dest) {
+  if (!fs.existsSync(src)) return;
+  if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+  for (const name of fs.readdirSync(src)) {
+    const srcPath = path.join(src, name);
+    const destPath = path.join(dest, name);
+    if (fs.statSync(srcPath).isDirectory()) {
+      copyDirRecursive(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
 
-  const previewTsx = path.join(storybookDir, "preview.tsx");
-  const previewTs = path.join(storybookDir, "preview.ts");
-  if (fs.existsSync(previewTs)) try { fs.unlinkSync(previewTs); } catch (_) {}
-  fs.writeFileSync(previewTsx, PREVIEW_CONTENT, "utf-8");
-  console.log("📝 .storybook/preview.tsx güncellendi (index.css + dark decorator).");
+function ensureVdsCore(projectRoot) {
+  const vdsCoreDest = path.join(projectRoot, "vds-core");
+  if (!fs.existsSync(vdsCoreDest)) {
+    fs.mkdirSync(vdsCoreDest, { recursive: true });
+  }
+  copyDirRecursive(TEMPLATE_DIR, vdsCoreDest);
+  const watchPath = path.join(vdsCoreDest, "watch.mjs");
+  if (!fs.existsSync(watchPath)) {
+    fs.writeFileSync(watchPath, WATCH_MJS, "utf-8");
+  }
+  console.log("📦 vds-core/ hazır.");
 }
 
+// ADIM 4 — package.json scriptleri
 function addScripts(projectRoot) {
   const pkgPath = path.join(projectRoot, "package.json");
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  const pkg = readPackageJson(projectRoot);
+  if (!pkg) return;
   const scripts = pkg.scripts || {};
-  if (!scripts.vds) scripts.vds = "node vds-core/scan.mjs";
-  if (!scripts["vds:watch"]) scripts["vds:watch"] = "node vds-core/scan.mjs --watch";
-  if (!scripts["vds:dashboard"]) scripts["vds:dashboard"] = "node vds-core/dashboard-server.mjs";
-  if (!scripts["vds:stories"]) scripts["vds:stories"] = "node vds-core/story-generator.mjs";
-  if (!scripts.storybook) scripts.storybook = "storybook dev -p 6006";
-  if (!scripts["build-storybook"]) scripts["build-storybook"] = "storybook build";
-  pkg.scripts = scripts;
-  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
-}
-
-function addVdsDependency(projectRoot) {
-  const pkgPath = path.join(projectRoot, "package.json");
-  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
-  const dev = pkg.devDependencies || {};
-  if (!dev["vibe-design-system"]) {
-    dev["vibe-design-system"] = "^1.9.0";
-    pkg.devDependencies = dev;
+  let changed = false;
+  if (!scripts.vds) {
+    scripts.vds = "node vds-core/scan.mjs";
+    changed = true;
+  }
+  if (!scripts["vds:stories"]) {
+    scripts["vds:stories"] = "node vds-core/story-generator.mjs";
+    changed = true;
+  }
+  if (!scripts["vds:watch"]) {
+    scripts["vds:watch"] = "node vds-core/watch.mjs";
+    changed = true;
+  }
+  if (!scripts.storybook) {
+    scripts.storybook = "storybook dev -p 6006";
+    changed = true;
+  }
+  if (!scripts["build-storybook"]) {
+    scripts["build-storybook"] = "storybook build";
+    changed = true;
+  }
+  if (changed) {
+    pkg.scripts = scripts;
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
-    const r = spawnSync("npm", ["install"], { cwd: projectRoot, stdio: "inherit", shell: true });
-    if (r.status !== 0) console.warn("npm install uyarı verdi; manuel çalıştırın: npm install");
+    console.log("📜 package.json scriptleri eklendi.");
   }
 }
 
-function ensureVdsCore(projectRoot) {
-  const vdsCoreDest = path.join(projectRoot, "vds-core");
-  if (!fs.existsSync(vdsCoreDest)) fs.mkdirSync(vdsCoreDest, { recursive: true });
+// ADIM 5 — .cursorrules
+function ensureCursorrules(projectRoot) {
+  const p = path.join(projectRoot, ".cursorrules");
+  fs.writeFileSync(p, CURSORRULES, "utf-8");
+  console.log("📄 .cursorrules yazıldı.");
+}
 
-  const scanSrc = path.join(TEMPLATE_DIR, "scan.mjs");
-  if (fs.existsSync(scanSrc)) {
-    fs.copyFileSync(scanSrc, path.join(vdsCoreDest, "scan.mjs"));
-  } else {
-    console.error("vds-core-template/scan.mjs bulunamadı.");
-    process.exit(1);
+// ADIM 6 — src/stories/ (ve scan için gerekli src/components, src/pages)
+function ensureStoriesDir(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
+  const storiesDir = path.join(srcDir, "stories");
+  if (!fs.existsSync(storiesDir)) {
+    fs.mkdirSync(storiesDir, { recursive: true });
+    console.log("📁 src/stories/ oluşturuldu.");
   }
-
-  const serverSrc = path.join(TEMPLATE_DIR, "dashboard-server.mjs");
-  if (fs.existsSync(serverSrc)) {
-    fs.copyFileSync(serverSrc, path.join(vdsCoreDest, "dashboard-server.mjs"));
+  const componentsDir = path.join(srcDir, "components");
+  if (!fs.existsSync(componentsDir)) {
+    fs.mkdirSync(componentsDir, { recursive: true });
+    console.log("📁 src/components/ oluşturuldu (VDS taraması için).");
   }
-
-  const storyGenSrc = path.join(TEMPLATE_DIR, "story-generator.mjs");
-  if (fs.existsSync(storyGenSrc)) {
-    fs.copyFileSync(storyGenSrc, path.join(vdsCoreDest, "story-generator.mjs"));
+  const pagesDir = path.join(srcDir, "pages");
+  if (!fs.existsSync(pagesDir)) {
+    fs.mkdirSync(pagesDir, { recursive: true });
   }
 }
 
+// ADIM 7 — İlk tarama
 function runScan(projectRoot) {
   const scanPath = path.join(projectRoot, "vds-core", "scan.mjs");
   if (!fs.existsSync(scanPath)) return;
@@ -162,39 +269,61 @@ function runStoryGenerator(projectRoot) {
   if (r.status !== 0) process.exitCode = r.status ?? 1;
 }
 
-console.log("🎨 VDS kuruluyor...");
+// ADIM 9 — Storybook örnek dosyalarını sil
+function removeStorybookExamples(projectRoot) {
+  const storiesDir = path.join(projectRoot, "src", "stories");
+  if (!fs.existsSync(storiesDir)) return;
+  for (const name of STORYBOOK_EXAMPLE_FILES) {
+    const filePath = path.join(storiesDir, name);
+    if (fs.existsSync(filePath)) {
+      try {
+        fs.unlinkSync(filePath);
+        console.log("🗑️ Silindi: src/stories/" + name);
+      } catch (_) {}
+    }
+  }
+}
+
+// ——— main ———
+console.log("🎨 VDS kuruluyor...\n");
 
 const projectRoot = getProjectRoot();
-const pkgPath = path.join(projectRoot, "package.json");
-if (!fs.existsSync(pkgPath)) {
+const pkg = readPackageJson(projectRoot);
+if (!pkg) {
   console.error("❌ Bu klasörde package.json bulunamadı.");
-  console.error("VDS, mevcut bir React projesine kurulmalıdır.");
   process.exit(1);
 }
 
-// 1. Copy vds-core files
-ensureVdsCore(projectRoot);
-
-// 2. Install Storybook if not present
-if (!isStorybookInstalled(projectRoot)) {
+// ADIM 1
+if (needsStorybook(projectRoot)) {
   installStorybook(projectRoot);
 } else {
-  console.log("📚 Storybook zaten mevcut.");
+  console.log("📚 Storybook zaten yüklü.");
 }
 
-// 3. Create/update .storybook/preview with index.css + dark decorator
-ensureStorybookPreview(projectRoot);
+// ADIM 2
+ensureStorybook(projectRoot);
+
+// ADIM 3
+ensureVdsCore(projectRoot);
 
-// 6. Add all scripts to package.json (before scan so scripts are there)
+// ADIM 4
 addScripts(projectRoot);
-addVdsDependency(projectRoot);
 
-// 4. Run scan
-runScan(projectRoot);
+// ADIM 5
+ensureCursorrules(projectRoot);
+
+// ADIM 6
+ensureStoriesDir(projectRoot);
 
-// 5. Run story generator
+// ADIM 9 (örnek dosyaları taramadan önce silebiliriz; scan src/components ve src/pages tarar, src/stories değil)
+removeStorybookExamples(projectRoot);
+
+// ADIM 7
+runScan(projectRoot);
 runStoryGenerator(projectRoot);
 
-console.log("✅ Kurulum tamamlandı.");
-console.log("   Storybook: npm run storybook");
-console.log("   Dashboard: npm run vds:dashboard");
+// ADIM 8
+console.log("\n✅ VDS kuruldu!");
+console.log("→ npm run storybook ile design system'ını aç");
+console.log("→ npm run vds:watch ile otomatik güncellemeyi başlat\n");

package/package.json

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

package/vds-core-template/scan.mjs

@@ -92,6 +92,106 @@ function readPreviousOutput() {
   return null;
 }
 
+function readPreviousOutputFull() {
+  try {
+    if (fs.existsSync(OUTPUT_FILE)) {
+      const raw = fs.readFileSync(OUTPUT_FILE, "utf-8");
+      return JSON.parse(raw);
+    }
+  } catch (_) {}
+  return null;
+}
+
+const CHANGELOG_MAX_ENTRIES = 20;
+
+function getColorHex(val) {
+  if (val == null) return null;
+  if (typeof val === "string") return val;
+  if (typeof val === "object" && (val.hex || val.value)) return val.hex || val.value;
+  return null;
+}
+
+function compareColors(prevColors, newColors) {
+  const changes = [];
+  if (!prevColors && !newColors) return changes;
+  const prev = prevColors || {};
+  const next = newColors || {};
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+  for (const key of allKeys) {
+    if (key === "_dark") continue;
+    const fromHex = getColorHex(prev[key]);
+    const toHex = getColorHex(next[key]);
+    if (toHex == null) {
+      if (fromHex != null) changes.push({ type: "color_removed", name: key });
+      continue;
+    }
+    if (fromHex == null) {
+      changes.push({ type: "color_added", name: key, to: toHex });
+      continue;
+    }
+    if (fromHex !== toHex) {
+      changes.push({ type: "color_changed", name: key, from: fromHex, to: toHex });
+    }
+  }
+  if (next._dark && typeof next._dark === "object") {
+    const prevDark = prev._dark || {};
+    for (const key of Object.keys(next._dark)) {
+      const fromHex = getColorHex(prevDark[key]);
+      const toHex = getColorHex(next._dark[key]);
+      if (fromHex != null && toHex != null && fromHex !== toHex) {
+        changes.push({ type: "color_changed", name: `_dark.${key}`, from: fromHex, to: toHex });
+      } else if (fromHex == null && toHex != null) {
+        changes.push({ type: "color_added", name: `_dark.${key}`, to: toHex });
+      } else if (fromHex != null && toHex == null) {
+        changes.push({ type: "color_removed", name: `_dark.${key}` });
+      }
+    }
+  }
+  return changes;
+}
+
+function compareTypography(prevTypo, newTypo) {
+  const changes = [];
+  if (!prevTypo && !newTypo) return changes;
+  const prev = prevTypo || {};
+  const next = newTypo || {};
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+  for (const key of allKeys) {
+    const fromVal = prev[key] != null ? String(prev[key]) : null;
+    const toVal = next[key] != null ? String(next[key]) : null;
+    if (fromVal === toVal) continue;
+    if (toVal == null) continue;
+    changes.push({
+      type: "typography_changed",
+      key,
+      from: fromVal || "(none)",
+      to: toVal,
+    });
+  }
+  return changes;
+}
+
+function buildChangelogChanges(prevOutput, newOutput, added, removed) {
+  const changes = [];
+  const prevFoundations = prevOutput?.foundations;
+  const newFoundations = newOutput?.foundations;
+
+  const colorChanges = compareColors(prevFoundations?.colors, newFoundations?.colors);
+  changes.push(...colorChanges);
+
+  const typoChanges = compareTypography(prevFoundations?.typography, newFoundations?.typography);
+  changes.push(...typoChanges);
+
+  for (const a of added) {
+    changes.push({ type: "component_added", name: a.name });
+  }
+  for (const r of removed) {
+    changes.push({ type: "component_removed", name: r.name });
+  }
+
+  return changes;
+}
+
 function readLastVersion() {
   try {
     if (fs.existsSync(HISTORY_FILE)) {
@@ -760,21 +860,37 @@ function scan() {
     componentSuggestions,
   };
 
-  const prevComponents = readPreviousOutput();
+  const prevOutput = readPreviousOutputFull();
+  const prevComponents = prevOutput?.components ?? readPreviousOutput();
   const { added, removed, modified } = compareComponents(prevComponents, results);
   const hasChanges = added.length > 0 || removed.length > 0 || modified.length > 0;
 
+  const prevVersion = prevOutput?.version || readLastVersion() || "1.0.0";
+  const changelogChanges = buildChangelogChanges(prevOutput, output, added, removed);
+  const prevChangelog = Array.isArray(prevOutput?.changelog) ? prevOutput.changelog : [];
+  if (changelogChanges.length > 0) {
+    const nextVersion = incPatch(prevVersion);
+    const changelogEntry = {
+      version: nextVersion,
+      date: new Date().toISOString(),
+      changes: changelogChanges,
+    };
+    output.changelog = prevChangelog.concat(changelogEntry).slice(-CHANGELOG_MAX_ENTRIES);
+    output.version = nextVersion;
+  } else {
+    output.changelog = prevChangelog;
+    output.version = prevVersion;
+  }
+
   fs.writeFileSync(OUTPUT_FILE, JSON.stringify(output, null, 2), "utf-8");
   const publicDir = path.join(PROJECT_ROOT, "public");
   if (!fs.existsSync(publicDir)) fs.mkdirSync(publicDir, { recursive: true });
   fs.writeFileSync(PUBLIC_MANIFEST, JSON.stringify(output, null, 2), "utf-8");
 
   if (hasChanges) {
-    const lastVersion = readLastVersion();
-    const nextVersion = incPatch(lastVersion);
     const changes = [...added, ...removed, ...modified];
     const historyEntry = {
-      version: nextVersion,
+      version: output.version,
       timestamp: new Date().toISOString(),
       branch: getGitBranch(),
       engineer: getGitEngineer(),
@@ -784,7 +900,7 @@ function scan() {
     entries.push(historyEntry);
     fs.writeFileSync(HISTORY_FILE, JSON.stringify(entries, null, 2), "utf-8");
     console.log(
-      `[VDS] v${nextVersion}: ${added.length} added, ${removed.length} removed, ${modified.length} modified`
+      `[VDS] v${output.version}: ${added.length} added, ${removed.length} removed, ${modified.length} modified`
     );
     console.log(cliT("scanComplete", results.length));
   }

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

@@ -813,6 +813,65 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "ComponentSuggestions.stories.tsx")));
 }
 
+function writeChangelogStory(changelog) {
+  if (!Array.isArray(changelog) || changelog.length === 0) return;
+  const foundationsDir = path.join(STORIES_DIR, "foundations");
+  ensureDir(foundationsDir);
+  const entries = changelog.map((e) => ({
+    version: e.version,
+    date: e.date,
+    changes: e.changes || [],
+  }));
+  const content =
+    [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta = { title: \"Foundations/Changelog\" } satisfies Meta;",
+      "export default meta;",
+      "type Story = StoryObj;",
+      "",
+      `const changelog = ${JSON.stringify(entries)};`,
+      "",
+      "function ChangeItem({ c }) {",
+      "  if (c.type === \"color_changed\")",
+      "    return (",
+      "      <div style={{ marginBottom: 8 }}>",
+      "        <strong>{c.name}</strong>: <span style={{ color: \"#888\" }}>{c.from}</span> → <span style={{ color: \"#0f0\" }}>{c.to}</span>",
+      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.from, marginLeft: 8, border: \"1px solid #333\" }} />",
+      "        <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} />",
+      "      </div>",
+      "    );",
+      "  if (c.type === \"color_added\") return <div style={{ marginBottom: 8 }}><strong>{c.name}</strong> added: <code>{c.to}</code> <span style={{ display: \"inline-block\", width: 16, height: 16, backgroundColor: c.to, marginLeft: 4, border: \"1px solid #333\" }} /></div>;",
+      "  if (c.type === \"color_removed\") return <div style={{ marginBottom: 8, color: \"#888\" }}><strong>{c.name}</strong> removed</div>;",
+      "  if (c.type === \"typography_changed\") return <div style={{ marginBottom: 8 }}><strong>{c.key}</strong>: {c.from} → {c.to}</div>;",
+      "  if (c.type === \"component_added\") return <div style={{ marginBottom: 8, color: \"#0f0\" }}>+ {c.name}</div>;",
+      "  if (c.type === \"component_removed\") return <div style={{ marginBottom: 8, color: \"#f88\" }}>− {c.name}</div>;",
+      "  return <div style={{ marginBottom: 8 }}>{c.type}: {JSON.stringify(c)}</div>;",
+      "}",
+      "",
+      "export const Default: Story = {",
+      "  render: () => (",
+      "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
+      "      <h2 style={{ marginBottom: 16 }}>VDS Changelog</h2>",
+      "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
+      "        {changelog.map((e, i) => (",
+      "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",
+      "            <div style={{ fontWeight: 600, marginBottom: 4 }}>v{e.version}</div>",
+      "            <div style={{ fontSize: 12, color: \"#888\", marginBottom: 12 }}>{e.date}</div>",
+      "            {e.changes.length === 0 ? <div style={{ color: \"#666\" }}>No changes</div> : (",
+      "              <div>{e.changes.map((c, j) => <ChangeItem key={j} c={c} />)}</div>",
+      "            )}",
+      "          </div>",
+      "        ))}",
+      "      </div>",
+      "    </div>",
+      "  ),",
+      "};",
+    ].join("\n");
+  fs.writeFileSync(path.join(foundationsDir, "Changelog.stories.tsx"), content, "utf-8");
+  console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Changelog.stories.tsx")));
+}
+
 function main() {
   if (!fs.existsSync(VDS_OUTPUT)) {
     console.error("[VDS] vds-output.json not found. Run `npm run vds` first.");
@@ -832,6 +891,10 @@ function main() {
   if (componentSuggestions?.length) {
     writeComponentSuggestionsStory(componentSuggestions);
   }
+  const changelog = data.changelog;
+  if (changelog?.length) {
+    writeChangelogStory(changelog);
+  }
   try {
     const fd = path.join(STORIES_DIR, "foundations");
     if (fs.existsSync(fd)) {

package/vds-core-template/watch.mjs

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { watch } from 'fs';
+import { execSync } from 'child_process';
+import { resolve } from 'path';
+
+const ROOT = resolve(process.cwd());
+const SRC = resolve(ROOT, 'src');
+let timeout = null;
+
+function run() {
+  const ts = new Date().toLocaleTimeString();
+  console.log(`\n[VDS ${ts}] Değişiklik algılandı, taranıyor...`);
+  try {
+    execSync('node vds-core/scan.mjs', { stdio: 'inherit', cwd: ROOT });
+    execSync('node vds-core/story-generator.mjs', { stdio: 'inherit', cwd: ROOT });
+    console.log(`[VDS ${ts}] ✅ Design system güncellendi.`);
+  } catch (e) {
+    console.error(`[VDS ${ts}] ❌ Hata:`, e.message);
+  }
+}
+
+function onFileChange(eventType, filename) {
+  if (!filename) return;
+  if (filename.includes('stories/')) return;
+  if (filename.includes('vds-output')) return;
+  if (!filename.endsWith('.tsx') && !filename.endsWith('.ts') && 
+      !filename.endsWith('.css') && !filename.endsWith('.js')) return;
+  console.log(`[VDS] Değişiklik: ${filename}`);
+  clearTimeout(timeout);
+  timeout = setTimeout(run, 2000);
+}
+
+run();
+console.log('[VDS] 👀 src/ klasörü izleniyor...');
+console.log('[VDS] Durdurmak için Ctrl+C\n');
+watch(SRC, { recursive: true }, onFileChange);