vibe-design-system 1.0.0

package/bin/init.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+/**
+ * VDS installer: npx vibe-design-system init
+ * Copies vds-core-template to vds-core, adds scripts and /vds route.
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+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();
+  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;
+}
+
+function copyRecursive(src, dest) {
+  const stat = fs.statSync(src);
+  if (stat.isDirectory()) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+    for (const name of fs.readdirSync(src)) {
+      copyRecursive(path.join(src, name), path.join(dest, name));
+    }
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+function addScripts(projectRoot) {
+  const pkgPath = path.join(projectRoot, "package.json");
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  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";
+  pkg.scripts = scripts;
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
+}
+
+function hasVdsRoute(content) {
+  return /path\s*=\s*["']\/vds["']/.test(content) || /path\s*=\s*\{["']\/vds["']\}/.test(content);
+}
+
+function hasVdsImport(content) {
+  return /from\s+["']@\/vds-core["']/.test(content) || /from\s+["'].*vds-core["']/.test(content);
+}
+
+function addVdsRouteToApp(projectRoot) {
+  const appPath = path.join(projectRoot, "src", "App.tsx");
+  const mainPath = path.join(projectRoot, "src", "main.tsx");
+  let pathToEdit = null;
+  if (fs.existsSync(appPath)) pathToEdit = appPath;
+  else if (fs.existsSync(mainPath)) pathToEdit = mainPath;
+  if (!pathToEdit) return;
+
+  let content = fs.readFileSync(pathToEdit, "utf-8");
+  if (hasVdsRoute(content)) return;
+
+  if (!hasVdsImport(content)) {
+    const lastImportMatch = content.match(/\n(import\s+.+?;\s*)\n(?!\s*import)/s);
+    if (lastImportMatch) {
+      content = content.replace(lastImportMatch[0], lastImportMatch[0] + '\nimport VdsDashboard from "@/vds-core";');
+    } else {
+      content = content.replace(/(\n)(export\s|const\s|\()/m, '\nimport VdsDashboard from "@/vds-core";\n$2');
+    }
+  }
+
+  const routeInsert = '<Route path="/vds" element={<VdsDashboard />} />';
+  if (content.includes('<Route path="*"') || content.includes("<Route path=\"*\"")) {
+    content = content.replace(
+      /(\s*)(<Route\s+path=["']\*["'])/,
+      `$1${routeInsert}\n$1$2`
+    );
+  } else {
+    const routesMatch = content.match(/(<Routes[^>]*>)([\s\S]*?)(<\/Routes>)/);
+    if (routesMatch) {
+      const [, open, inner, close] = routesMatch;
+      content = content.replace(routesMatch[0], open + inner.trimEnd() + "\n  " + routeInsert + "\n  " + close);
+    }
+  }
+
+  fs.writeFileSync(pathToEdit, content, "utf-8");
+}
+
+console.log("🎨 VDS kuruluyor...");
+
+const projectRoot = getProjectRoot();
+const vdsCoreDest = path.join(projectRoot, "vds-core");
+
+if (!fs.existsSync(vdsCoreDest)) {
+  if (!fs.existsSync(TEMPLATE_DIR)) {
+    console.error("vds-core-template bulunamadı.");
+    process.exit(1);
+  }
+  copyRecursive(TEMPLATE_DIR, vdsCoreDest);
+}
+
+addScripts(projectRoot);
+addVdsRouteToApp(projectRoot);
+
+console.log("✅ VDS kuruldu! npm run vds:watch çalıştırın, sonra /vds adresini açın.");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "vibe-design-system",
+  "version": "1.0.0",
+  "description": "Auto-generate design systems for vibe coding projects",
+  "type": "module",
+  "bin": {
+    "vibe-design-system": "./bin/init.js"
+  },
+  "files": ["bin", "vds-core-template"],
+  "engines": { "node": ">=18" }
+}

package/vds-core-template/README.md

@@ -0,0 +1,28 @@
+# VDS Core — Ghost mode
+
+Zero-config, autonomous design system. Drop this folder into any Vite + React project and activate with one route.
+
+## Activation (any project)
+
+1. **Scan** (regenerate manifest):
+   ```bash
+   npm run vds
+   ```
+   Add to `package.json` if missing:
+   ```json
+   "vds": "node vds-core/scan.mjs"
+   ```
+
+2. **Mount** the dashboard (e.g. in your router):
+   ```tsx
+   import VdsDashboard from "@/vds-core";
+   // ...
+   <Route path="/vds" element={<VdsDashboard />} />
+   ```
+
+3. Ensure `public/vds-output.json` exists (created by step 1). Then open `/vds`.
+
+## Layout
+
+- `vds-core/scan.mjs` — Node script; scans `src/components`, CSS, Tailwind config. Writes `vds-output.json` and `public/vds-output.json`. Paths are relative to **project root** (parent of `vds-core`).
+- `src/vds-core/` — Dashboard UI; reads `/vds-output.json`, renders Foundations + Component Library. No config; works as soon as the route is mounted.

package/vds-core-template/scan.mjs

@@ -0,0 +1,496 @@
+#!/usr/bin/env node
+/**
+ * VDS Core — Ghost scan. Run from project root: node vds-core/scan.mjs
+ * Paths are relative to the host project root (parent of vds-core).
+ * Set VDS_LOCALE=en|tr for CLI message language (default: en).
+ */
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PROJECT_ROOT = path.join(__dirname, "..");
+
+const CLI_LOCALES = {
+  en: {
+    componentsNotFound: "src/components not found. VDS scan skipped.",
+    scanComplete: "VDS: {n} components → vds-output.json & public/vds-output.json",
+  },
+  tr: {
+    componentsNotFound: "src/components bulunamadı. VDS taraması atlandı.",
+    scanComplete: "VDS: {n} bileşen → vds-output.json ve public/vds-output.json",
+  },
+};
+const CLI_LOCALE = (process.env.VDS_LOCALE === "tr" ? "tr" : "en");
+const cliT = (key, n) => CLI_LOCALES[CLI_LOCALE][key].replace("{n}", String(n));
+const COMPONENTS_DIR = path.join(PROJECT_ROOT, "src", "components");
+const OUTPUT_FILE = path.join(PROJECT_ROOT, "vds-output.json");
+const PUBLIC_MANIFEST = path.join(PROJECT_ROOT, "public", "vds-output.json");
+const HISTORY_FILE = path.join(PROJECT_ROOT, "vds-history.json");
+
+function incPatch(version) {
+  const parts = String(version || "1.0.0").split(".");
+  const major = parseInt(parts[0], 10) || 1;
+  const minor = parseInt(parts[1], 10) || 0;
+  const patch = (parseInt(parts[2], 10) || 0) + 1;
+  return `${major}.${minor}.${patch}`;
+}
+
+function readPreviousOutput() {
+  try {
+    if (fs.existsSync(OUTPUT_FILE)) {
+      const raw = fs.readFileSync(OUTPUT_FILE, "utf-8");
+      const data = JSON.parse(raw);
+      return data.components || [];
+    }
+  } catch (_) {}
+  return null;
+}
+
+function readLastVersion() {
+  try {
+    if (fs.existsSync(HISTORY_FILE)) {
+      const raw = fs.readFileSync(HISTORY_FILE, "utf-8");
+      const data = JSON.parse(raw);
+      const entries = Array.isArray(data) ? data : data.entries || [];
+      const last = entries[entries.length - 1];
+      return last ? last.version : "1.0.0";
+    }
+  } catch (_) {}
+  return "1.0.0";
+}
+
+function readHistoryEntries() {
+  try {
+    if (fs.existsSync(HISTORY_FILE)) {
+      const raw = fs.readFileSync(HISTORY_FILE, "utf-8");
+      const data = JSON.parse(raw);
+      return Array.isArray(data) ? data : data.entries || [];
+    }
+  } catch (_) {}
+  return [];
+}
+
+function compareComponents(prevList, newResults) {
+  const prevByFile = new Map((prevList || []).map((c) => [c.file, c]));
+  const newByFile = new Map(newResults.map((c) => [c.file, c]));
+  const added = [];
+  const removed = [];
+  const modified = [];
+  for (const [file, c] of newByFile) {
+    const p = prevByFile.get(file);
+    if (!p) added.push({ type: "added", name: c.name, group: c.group, category: c.category });
+    else if (p.name !== c.name || p.group !== c.group || p.category !== c.category) {
+      modified.push({ type: "modified", name: c.name, group: c.group, category: c.category });
+    }
+  }
+  for (const [file, c] of prevByFile) {
+    if (!newByFile.has(file)) removed.push({ type: "removed", name: c.name, group: c.group, category: c.category });
+  }
+  return { added, removed, modified };
+}
+
+const CLASSIFICATION_RULES = [
+  { keywords: ["analysisdashboard", "componentlibrary"], group: "Sections", category: "Dashboard" },
+  {
+    keywords: [
+      "enterprisepushpanel",
+      "figmalibrarygenerator",
+      "integrationguide",
+      "projectdropzone",
+      "repoconnect",
+      "tokensstudioguide",
+    ],
+    group: "Sections",
+    category: "Features",
+  },
+  { keywords: ["hover-card"], group: "Feedback", category: "Feedback" },
+  {
+    keywords: [
+      "card",
+      "table",
+      "list",
+      "badge",
+      "avatar",
+      "chart",
+      "accordion",
+      "tabs",
+      "collapsible",
+      "toggle-group",
+      "carousel",
+      "scroll-area",
+    ],
+    group: "Data Display",
+    category: "Data Display",
+  },
+  { keywords: ["toggle"], group: "Actions", category: "Toggle" },
+  { keywords: ["button", "cta"], group: "Actions", category: "Button" },
+  { keywords: ["drawer", "sheet"], group: "Feedback", category: "Overlay" },
+  {
+    keywords: [
+      "modal",
+      "dialog",
+      "alert",
+      "toast",
+      "toaster",
+      "sonner",
+      "tooltip",
+      "popover",
+      "hover-card",
+      "progress",
+      "skeleton",
+    ],
+    group: "Feedback",
+    category: "Feedback",
+  },
+  {
+    keywords: [
+      "input",
+      "form",
+      "select",
+      "checkbox",
+      "textarea",
+      "label",
+      "switch",
+      "radio",
+      "slider",
+      "calendar",
+      "input-otp",
+      "command",
+    ],
+    group: "Forms",
+    category: "Forms",
+  },
+  {
+    keywords: [
+      "nav",
+      "header",
+      "sidebar",
+      "menu",
+      "menubar",
+      "dropdown-menu",
+      "navigation-menu",
+      "context-menu",
+      "navlink",
+      "breadcrumb",
+      "pagination",
+    ],
+    group: "Navigation",
+    category: "Navigation",
+  },
+  { keywords: ["separator", "aspect-ratio", "resizable"], group: "Layout", category: "Layout" },
+  {
+    keywords: ["hero", "banner", "section", "pricing", "feature", "featuresgrid", "interactivedemo", "modernhero"],
+    group: "Sections",
+    category: "Sections",
+  },
+];
+
+function getAllComponentFiles(dir, baseDir = dir) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  const files = [];
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...getAllComponentFiles(fullPath, baseDir));
+    } else if (entry.isFile() && /\.(tsx|jsx)$/i.test(entry.name)) {
+      files.push(path.relative(baseDir, fullPath).replace(/\\/g, "/"));
+    }
+  }
+  return files;
+}
+
+function extractVdsTags(content) {
+  const tags = {};
+  const tagNames = ["vds-group", "vds-category", "vds-name", "vds-description"];
+  for (const tag of tagNames) {
+    const re = new RegExp(`@${tag}\\s+([^\n*]+)`, "g");
+    const m = re.exec(content);
+    if (m) tags[tag.replace("vds-", "")] = m[1].trim();
+  }
+  return Object.keys(tags).length ? tags : null;
+}
+
+function classifyByFileName(filePath) {
+  const baseName = path.basename(filePath, path.extname(filePath)).toLowerCase();
+  for (const rule of CLASSIFICATION_RULES) {
+    const found = rule.keywords.some((kw) => baseName.includes(kw));
+    if (found) return { group: rule.group, category: rule.category };
+  }
+  return { group: "Uncategorized", category: "Uncategorized" };
+}
+
+function humanizeName(filePath) {
+  const base = path.basename(filePath, path.extname(filePath));
+  return base.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+}
+
+function extractTailwindTokens(content) {
+  const tokens = new Set();
+  const patterns = [
+    /className\s*=\s*["'`]([^"'`]+)["'`]/g,
+    /className\s*=\s*\{\s*["'`]([^"'`]+)["'`]/g,
+    /cn\s*\(\s*["'`]([^"'`]+)["'`]/g,
+    /cva\s*\(\s*["'`]([^"'`]+)["'`]/g,
+    /["'`]([a-zA-Z0-9_\-\/\s\[\]&:%.]+(?:hover|focus|active|disabled|sm|md|lg|xl|2xl|dark:)[a-zA-Z0-9_\-\/\s\[\]&:%.]*)["'`]/g,
+  ];
+  for (const re of patterns) {
+    let m;
+    while ((m = re.exec(content)) !== null) {
+      const part = m[1];
+      part
+        .replace(/\$\{[^}]*\}/g, " ")
+        .split(/\s+/)
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0 && /^[a-zA-Z0-9_\-\[\]\/:&%.]+$/.test(s))
+        .forEach((s) => tokens.add(s));
+    }
+  }
+  return [...tokens].sort();
+}
+
+/** Parse HSL string "0 0% 0%" or "hsl(0 0% 0%)" and return hex. */
+function hslToHex(hslStr) {
+  const match = hslStr.match(/hsl\s*\(\s*([\d.]+)\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%\s*\)/) ||
+    hslStr.match(/^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%$/);
+  if (!match) return null;
+  const h = Number(match[1]) / 360;
+  const s = Number(match[2]) / 100;
+  const l = Number(match[3]) / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (x) => {
+    const n = Math.round(Math.max(0, Math.min(255, x * 255)));
+    return n.toString(16).padStart(2, "0");
+  };
+  return "#" + toHex(r) + toHex(g) + toHex(b);
+}
+function hue2rgb(p, q, t) {
+  if (t < 0) t += 1;
+  if (t > 1) t -= 1;
+  if (t < 1 / 6) return p + (q - p) * 6 * t;
+  if (t < 1 / 2) return q;
+  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+}
+
+function parseCssVarBlock(block) {
+  const out = {};
+  const varRe = /--([a-zA-Z0-9-]+)\s*:\s*([^;]+);/g;
+  let m;
+  while ((m = varRe.exec(block)) !== null) {
+    const name = m[1];
+    const raw = m[2].trim();
+    out[name] = raw;
+  }
+  return out;
+}
+
+function extractFoundations() {
+  const colors = {};
+  const colorsDark = {};
+  const typography = {};
+  const cssRadiusVars = {};
+  const borderRadiusScale = {};
+  const cssPath = path.join(PROJECT_ROOT, "src", "index.css");
+  const globalsCss = path.join(PROJECT_ROOT, "src", "globals.css");
+  const appGlobals = path.join(PROJECT_ROOT, "app", "globals.css");
+  const cssToRead = fs.existsSync(cssPath) ? cssPath : fs.existsSync(globalsCss) ? globalsCss : appGlobals;
+
+  try {
+    if (fs.existsSync(cssToRead)) {
+      const css = fs.readFileSync(cssToRead, "utf-8");
+
+      const rootMatch = css.match(/:root\s*\{([\s\S]*?)\}/);
+      if (rootMatch) {
+        const rootVars = parseCssVarBlock(rootMatch[1]);
+        for (const [name, value] of Object.entries(rootVars)) {
+          if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
+            const hsl = `hsl(${value})`;
+            colors[name] = { value: hsl, hex: hslToHex(hsl) || hsl };
+          } else if (/rem|px/.test(value)) {
+            cssRadiusVars[name] = value;
+          } else {
+            colors[name] = { value, hex: value };
+          }
+        }
+      }
+
+      const darkMatch = css.match(/\.dark\s*\{([\s\S]*?)\}/) ||
+        css.match(/\[data-theme\s*=\s*["']dark["']\]\s*\{([\s\S]*?)\}/);
+      if (darkMatch) {
+        const darkVars = parseCssVarBlock(darkMatch[1]);
+        for (const [name, value] of Object.entries(darkVars)) {
+          if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
+            const hsl = `hsl(${value})`;
+            colorsDark[name] = { value: hsl, hex: hslToHex(hsl) || hsl };
+          }
+        }
+      }
+
+      const bodyMatch = css.match(/body\s*\{[^}]*font-family:\s*([^;]+);/);
+      if (bodyMatch) typography.body = bodyMatch[1].trim();
+      const monoMatch = css.match(/code,\s*pre,\s*\.font-mono\s*\{[^}]*font-family:\s*([^;]+);/);
+      if (monoMatch) typography.mono = monoMatch[1].trim();
+    }
+  } catch (_) {}
+
+  try {
+    const twPath = path.join(PROJECT_ROOT, "tailwind.config.ts");
+    const twPathJs = path.join(PROJECT_ROOT, "tailwind.config.js");
+    const twFile = fs.existsSync(twPath) ? twPath : twPathJs;
+    if (fs.existsSync(twFile)) {
+      const tw = fs.readFileSync(twFile, "utf-8");
+      const sansMatch = tw.match(/sans:\s*\[([^\]]+)\]/);
+      if (sansMatch) {
+        typography.tailwindSans = sansMatch[1]
+          .split(",")
+          .map((s) => s.trim().replace(/^['"`]|['"`]$/g, ""))
+          .filter(Boolean);
+      }
+      const monoMatch2 = tw.match(/mono:\s*\[([^\]]+)\]/);
+      if (monoMatch2) {
+        typography.tailwindMono = monoMatch2[1]
+          .split(",")
+          .map((s) => s.trim().replace(/^['"`]|['"`]$/g, ""))
+          .filter(Boolean);
+      }
+      const brMatch = tw.match(/borderRadius:\s*\{([\s\S]*?)\}/);
+      if (brMatch) {
+        const body = brMatch[1];
+        const brRe = /(\w+):\s*"([^"]+)"/g;
+        let m2;
+        while ((m2 = brRe.exec(body)) !== null) borderRadiusScale[m2[1]] = m2[2];
+      }
+    }
+  } catch (_) {}
+
+  const radius = {};
+  if (cssRadiusVars.radius) radius.base = cssRadiusVars.radius;
+  if (Object.keys(borderRadiusScale).length > 0) radius.borderRadius = borderRadiusScale;
+  const foundationsColors = { ...colors };
+  if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
+  return { colors: foundationsColors, typography, radius };
+}
+
+function scan() {
+  if (!fs.existsSync(COMPONENTS_DIR)) {
+    console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
+    process.exit(1);
+  }
+  const relativeFiles = getAllComponentFiles(COMPONENTS_DIR);
+  const results = [];
+  for (const rel of relativeFiles) {
+    const fullPath = path.join(COMPONENTS_DIR, rel);
+    const content = fs.readFileSync(fullPath, "utf-8");
+    const vdsTags = extractVdsTags(content);
+    let group, category, name, description;
+    if (vdsTags) {
+      group = vdsTags.group ?? "Uncategorized";
+      category = vdsTags.category ?? "Uncategorized";
+      name = vdsTags.name ?? humanizeName(rel);
+      description = vdsTags.description ?? "";
+    } else {
+      const classified = classifyByFileName(rel);
+      group = classified.group;
+      category = classified.category;
+      name = humanizeName(rel);
+      description = "";
+    }
+    const tokens = extractTailwindTokens(content);
+    results.push({ file: rel, name, group, category, description, tokens });
+  }
+  const foundations = extractFoundations();
+  const output = {
+    scannedAt: new Date().toISOString(),
+    totalComponents: results.length,
+    components: results,
+    foundations,
+  };
+
+  const prevComponents = readPreviousOutput();
+  const { added, removed, modified } = compareComponents(prevComponents, results);
+  const hasChanges = added.length > 0 || removed.length > 0 || modified.length > 0;
+
+  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,
+      timestamp: new Date().toISOString(),
+      changes,
+    };
+    const entries = readHistoryEntries();
+    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`
+    );
+    console.log(cliT("scanComplete", results.length));
+  }
+}
+
+const isWatch = process.argv.includes("--watch");
+
+if (isWatch) {
+  if (!fs.existsSync(COMPONENTS_DIR)) {
+    console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
+    process.exit(1);
+  }
+  let debounceTimer = null;
+  let lastChangedFiles = new Set();
+
+  function runScan() {
+    const files = [...lastChangedFiles];
+    lastChangedFiles.clear();
+    if (files.length) {
+      const rel = path.relative(PROJECT_ROOT, files[0]);
+      if (files.length === 1) {
+        console.log(`[VDS] ${rel}`);
+      } else {
+        console.log(`[VDS] ${files.length} files changed`);
+      }
+    }
+    scan();
+    console.log("[VDS] Watch: src/components (.tsx, .jsx). Scan complete.\n");
+  }
+
+  function scheduleScan(filename) {
+    if (!filename || !/\.(tsx|jsx)$/i.test(filename)) return;
+    lastChangedFiles.add(path.join(COMPONENTS_DIR, filename));
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(runScan, 300);
+  }
+
+  console.log("[VDS] Watching src/components for .tsx / .jsx changes…\n");
+  runScan();
+
+  try {
+    const watcher = fs.watch(COMPONENTS_DIR, { recursive: true }, (eventType, filename) => {
+      if (filename) scheduleScan(filename);
+    });
+    process.on("SIGINT", () => {
+      watcher.close();
+      process.exit(0);
+    });
+  } catch (err) {
+    console.error("[VDS] Watch failed:", err.message);
+    process.exit(1);
+  }
+} else {
+  scan();
+}