vibe-design-system 2.8.39 → 2.8.41

package/bin/init.js

@@ -95,12 +95,14 @@ Storybook stilleri sayfalardan farklıysa: .storybook/preview.ts içinde uygulam
 `;
 
 const WATCH_MJS = `#!/usr/bin/env node
-import { watch } from 'fs';
+import { watch, existsSync } from 'fs';
 import { execSync } from 'child_process';
 import { resolve } from 'path';
 
 const ROOT = resolve(process.cwd());
-const SRC = resolve(ROOT, 'src');
+// Auto-detect frontend src dir (supports fullstack projects)
+const SRC_CANDIDATES = ['src', 'client/src', 'frontend/src', 'web/src'];
+const SRC = resolve(ROOT, SRC_CANDIDATES.find((p) => existsSync(resolve(ROOT, p, 'components'))) || SRC_CANDIDATES.find((p) => existsSync(resolve(ROOT, p))) || 'src');
 let timeout = null;
 
 function run() {
@@ -145,6 +147,25 @@ function getProjectRoot() {
   return process.cwd();
 }
 
+/**
+ * Fullstack proje desteği: client/src, frontend/src, web/src varsa onu döndür.
+ * Yoksa standart "src" döndür.
+ */
+function detectFrontendSrcDir(projectRoot) {
+  // Check fullstack prefixes FIRST — they take priority over bare src/
+  // e.g. crypto project has empty src/ (only stories/) but real code in client/src/
+  for (const prefix of ["client/src", "frontend/src", "web/src"]) {
+    const full = path.join(projectRoot, prefix);
+    if (fs.existsSync(full) && fs.statSync(full).isDirectory()) {
+      const hasComponents = fs.existsSync(path.join(full, "components"));
+      const hasAppFiles = fs.readdirSync(full).some((f) => /\.(tsx|jsx)$/i.test(f));
+      if (hasComponents || hasAppFiles) return prefix;
+    }
+  }
+  // Fallback: standard src/
+  return "src";
+}
+
 function readPackageJson(projectRoot) {
   const pkgPath = path.join(projectRoot, "package.json");
   if (!fs.existsSync(pkgPath)) return null;
@@ -223,51 +244,20 @@ function detectFramework(pkg) {
   return "vite";
 }
 
-/** Vite 7+ kullanılıyorsa Storybook 8 peer dep çakışır.
- *  .npmrc'ye legacy-peer-deps=true ekleyerek tüm npm komutlarını bağışık hale getirir. */
-function ensureLegacyPeerDepsIfNeeded(projectRoot, pkg) {
-  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
-  const viteVersion = allDeps["vite"] || "";
-  // "^7.x", "~7.x", "7.x" gibi tüm Vite 7+ versiyonlarını yakala
-  const isVite7Plus = /^\^?~?[7-9]\d*\./.test(viteVersion) || /^\^?~?[1-9]\d+\./.test(viteVersion);
-  if (!isVite7Plus) return;
-  const npmrcPath = path.join(projectRoot, ".npmrc");
-  let content = fs.existsSync(npmrcPath) ? fs.readFileSync(npmrcPath, "utf-8") : "";
-  if (content.includes("legacy-peer-deps")) return; // idempotent
-  content = content ? content.trimEnd() + "\nlegacy-peer-deps=true\n" : "legacy-peer-deps=true\n";
-  fs.writeFileSync(npmrcPath, content, "utf-8");
-  console.log("📝 .npmrc: legacy-peer-deps=true eklendi (Vite 7+ / Storybook 8 uyumluluk).");
-}
-
 /** Framework'e göre Storybook framework paket adı */
 function storybookFrameworkPackage(framework) {
   if (framework === "nextjs") return "@storybook/nextjs";
   return "@storybook/react-vite"; // vite & remix
 }
 
-/** Projenin gerçek frontend src dizinini tespit eder.
- *  Fullstack projelerde (client/, frontend/, web/) doğru alias için gerekli. */
-function detectFrontendSrcDir(projectRoot) {
-  // Fullstack / monorepo: frontend ayrı bir klasörde olabilir
-  const candidates = [
-    "client/src",
-    "frontend/src",
-    "web/src",
-  ];
-  for (const c of candidates) {
-    if (fs.existsSync(path.join(projectRoot, c))) return c;
-  }
-  return "src"; // varsayılan
-}
-
 /** Framework'e göre .storybook/main.ts içeriği */
-function buildStorybookMainTs(framework, projectRoot) {
+function buildStorybookMainTs(framework, srcPrefix) {
   if (framework === "nextjs") {
     return `import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
   stories: [
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../${srcPrefix}/**/*.stories.@(js|jsx|mjs|ts|tsx)",
     "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
@@ -281,13 +271,12 @@ export default config;
 `;
   }
   // vite (default) & remix
-  const srcDir = detectFrontendSrcDir(projectRoot || process.cwd());
   return `import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import path from "path";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../${srcPrefix}/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
   framework: {
     name: "@storybook/react-vite",
@@ -297,7 +286,7 @@ const config: StorybookConfig = {
     return mergeConfig(config, {
       resolve: {
         alias: {
-          "@": path.resolve(process.cwd(), "${srcDir}"),
+          "@": path.resolve(process.cwd(), "${srcPrefix}"),
         },
       },
     });
@@ -310,11 +299,13 @@ export default config;
 
 /** Framework'e göre CSS import path'i */
 function buildStorybookPreviewTs(framework, projectRoot) {
-  // CSS dosyasını bul
+  // CSS dosyasını bul — fullstack projeler (client/src, frontend/src, web/src) dahil
+  const frontendPrefixes = ["src", "client/src", "frontend/src", "web/src"];
   const cssCandidates = [
-    ["src/index.css", "../src/index.css"],
-    ["src/globals.css", "../src/globals.css"],
-    ["src/styles/globals.css", "../src/styles/globals.css"],
+    ...frontendPrefixes.map((p) => [p + "/index.css", "../" + p + "/index.css"]),
+    ...frontendPrefixes.map((p) => [p + "/globals.css", "../" + p + "/globals.css"]),
+    ...frontendPrefixes.map((p) => [p + "/styles/globals.css", "../" + p + "/styles/globals.css"]),
+    ...frontendPrefixes.map((p) => [p + "/App.css", "../" + p + "/App.css"]),
     ["app/globals.css", "../app/globals.css"],
   ];
   let cssImport = '// CSS bulunamadı — projenizin global CSS dosyasını buraya ekleyin';
@@ -355,10 +346,10 @@ export default preview;
 // ADIM 1 — Bağımlılık kontrolü
 function needsStorybook(projectRoot, framework) {
   const pkg = readPackageJson(projectRoot);
-  if (!pkg) return true; // package.json yok → yükle (main guard zaten önce hata verecek)
-  const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+  if (!pkg) return false;
+  const dev = pkg.devDependencies || {};
   const fwPkg = storybookFrameworkPackage(framework);
-  return !(allDeps.storybook && allDeps[fwPkg]);
+  return !(dev.storybook && dev[fwPkg]);
 }
 
 // Storybook 8.6.x — aynı minor sürümde tutarak addon uyumluluk uyarısını önler
@@ -367,41 +358,62 @@ const STORYBOOK_VERSION = "8.6.17";
 function installStorybook(projectRoot, framework) {
   const fwPkg = storybookFrameworkPackage(framework);
   console.log(`📚 Storybook v8 (${fwPkg}) kuruluyor...`);
-  const r = spawnSync(
-    "npm",
-    [
-      "install",
-      "--save-dev",
-      "--save-exact",
-      "--legacy-peer-deps",
-      `storybook@${STORYBOOK_VERSION}`,
-      `${fwPkg}@${STORYBOOK_VERSION}`,
-      `@storybook/react@${STORYBOOK_VERSION}`,
-      `@storybook/addon-essentials@${STORYBOOK_VERSION}`,
-      `@storybook/addon-a11y@${STORYBOOK_VERSION}`,
-      `@storybook/blocks@${STORYBOOK_VERSION}`,
-    ],
-    { cwd: projectRoot, stdio: "inherit", shell: true }
-  );
+  // No extra deps — @tailwindcss/vite removed (causes ERESOLVE in non-Tailwind projects)
+
+  // Vite 7+ peer dependency conflict: Storybook 8 requires vite ^4/5/6 but project has vite 7+
+  // Detect Vite version and add --legacy-peer-deps if needed
+  const pkg = readPackageJson(projectRoot);
+  const deps = { ...pkg?.dependencies, ...pkg?.devDependencies };
+  const viteVer = deps?.vite || "";
+  const viteIsMajor7Plus = /^[\^~]?[7-9]/.test(viteVer) || /^\d+/.test(viteVer) && parseInt(viteVer) >= 7;
+  const needsLegacyPeers = viteIsMajor7Plus;
+
+  if (needsLegacyPeers) {
+    console.log("⚠️ Vite 7+ algılandı — --legacy-peer-deps ile kurulum yapılıyor...");
+    // Ensure .npmrc has legacy-peer-deps for future installs too
+    const npmrcPath = path.join(projectRoot, ".npmrc");
+    const npmrcContent = fs.existsSync(npmrcPath) ? fs.readFileSync(npmrcPath, "utf-8") : "";
+    if (!npmrcContent.includes("legacy-peer-deps")) {
+      fs.appendFileSync(npmrcPath, "\nlegacy-peer-deps=true\n", "utf-8");
+    }
+  }
+
+  const installArgs = [
+    "install",
+    "--save-dev",
+    "--save-exact",
+    ...(needsLegacyPeers ? ["--legacy-peer-deps"] : []),
+    `storybook@${STORYBOOK_VERSION}`,
+    `${fwPkg}@${STORYBOOK_VERSION}`,
+    `@storybook/react@${STORYBOOK_VERSION}`,
+    `@storybook/addon-essentials@${STORYBOOK_VERSION}`,
+    `@storybook/addon-a11y@${STORYBOOK_VERSION}`,
+    `@storybook/blocks@${STORYBOOK_VERSION}`,
+  ];
+
+  const r = spawnSync("npm", installArgs, {
+    cwd: projectRoot,
+    stdio: "inherit",
+    shell: true,
+  });
   if (r.status !== 0) {
-    console.error("❌ npm install storybook başarısız oldu. VDS kurulumu durduruluyor.");
+    console.error("❌ npm install storybook başarısız oldu.");
     process.exit(1);
   }
 }
 
 // ADIM 2 — .storybook/
-function ensureStorybook(projectRoot, framework) {
+function ensureStorybook(projectRoot, framework, srcPrefix) {
   const storybookDir = path.join(projectRoot, ".storybook");
   if (!fs.existsSync(storybookDir)) {
     fs.mkdirSync(storybookDir, { recursive: true });
     console.log("📁 .storybook/ oluşturuldu.");
   }
 
-  const mainTs = buildStorybookMainTs(framework, projectRoot);
+  const mainTs = buildStorybookMainTs(framework, srcPrefix);
   const mainPath = path.join(storybookDir, "main.ts");
   fs.writeFileSync(mainPath, mainTs, "utf-8");
-  const detectedSrc = detectFrontendSrcDir(projectRoot);
-  console.log(`📝 .storybook/main.ts yazıldı (framework: ${framework}, @ alias: ${detectedSrc}).`);
+  console.log(`📝 .storybook/main.ts yazıldı (framework: ${framework}).`);
 
   const previewTs = buildStorybookPreviewTs(framework, projectRoot);
 
@@ -519,17 +531,15 @@ function ensureCursorrules(projectRoot) {
   console.log("📄 .cursorrules yazıldı.");
 }
 
-// ADIM 6 — src/stories/ oluştur (scan artık klasörü kendisi buluyor; zorla yaratmaya gerek yok)
-function ensureStoriesDir(projectRoot) {
-  const srcDir = path.join(projectRoot, "src");
+// ADIM 6 — stories/ oluştur (scan artık klasörü kendisi buluyor; zorla yaratmaya gerek yok)
+function ensureStoriesDir(projectRoot, srcPrefix) {
+  const srcDir = path.join(projectRoot, srcPrefix);
   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.");
+    console.log(`📁 ${srcPrefix}/stories/ oluşturuldu.`);
   }
-  // scan.mjs artık klasörü kendisi buluyor (src/components → components → app/components → ...)
-  // Klasör yoksa oluşturma — projeye ait mevcut yapıyı koruyalım.
 }
 
 // ADIM 7 — İlk tarama
@@ -601,15 +611,15 @@ module.exports = {
 }
 
 // ADIM 9 — Storybook örnek dosyalarını sil
-function removeStorybookExamples(projectRoot) {
-  const storiesDir = path.join(projectRoot, "src", "stories");
+function removeStorybookExamples(projectRoot, srcPrefix) {
+  const storiesDir = path.join(projectRoot, srcPrefix, "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);
+        console.log(`🗑️ Silindi: ${srcPrefix}/stories/${name}`);
       } catch (_) {}
     }
   }
@@ -643,10 +653,10 @@ if (monorepoPackages.length > 0 && pkg.workspaces) {
 }
 
 const framework = detectFramework(pkg);
-console.log(`🔍 Framework tespit edildi: ${framework}\n`);
-
-// Vite 7+ projelerinde Storybook 8 peer dep çakışmasını önle
-ensureLegacyPeerDepsIfNeeded(projectRoot, pkg);
+const srcPrefix = detectFrontendSrcDir(projectRoot);
+console.log(`🔍 Framework tespit edildi: ${framework}`);
+if (srcPrefix !== "src") console.log(`📂 Fullstack proje algılandı: kaynak dizin → ${srcPrefix}`);
+console.log("");
 
 // ADIM 1
 if (needsStorybook(projectRoot, framework)) {
@@ -656,7 +666,7 @@ if (needsStorybook(projectRoot, framework)) {
 }
 
 // ADIM 2
-ensureStorybook(projectRoot, framework);
+ensureStorybook(projectRoot, framework, srcPrefix);
 
 // ADIM 3
 ensureVdsCore(projectRoot);
@@ -668,10 +678,10 @@ addScripts(projectRoot);
 ensureCursorrules(projectRoot);
 
 // ADIM 6
-ensureStoriesDir(projectRoot);
+ensureStoriesDir(projectRoot, srcPrefix);
 
 // ADIM 9 (örnek dosyaları taramadan önce silebiliriz; scan src/components ve src/pages tarar, src/stories değil)
-removeStorybookExamples(projectRoot);
+removeStorybookExamples(projectRoot, srcPrefix);
 
 // ADIM 9b
 ensureVdsConfig(projectRoot);

package/package.json

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

package/vds-core-template/scan.mjs

@@ -40,41 +40,59 @@ function resolveDir(envKey, candidates) {
   return null;
 }
 
-const SRC_DIR = resolveDir("VDS_SRC_DIR", [
-  path.join(PROJECT_ROOT, "src"),
-  path.join(PROJECT_ROOT, "app"),
-  PROJECT_ROOT,
-]) || path.join(PROJECT_ROOT, "src");
+// Fullstack project detection: prefer client/src > frontend/src > web/src if they contain
+// components/ or .tsx files (indicating the real frontend source dir).
+function detectBestSrcDir() {
+  if (process.env.VDS_SRC_DIR) {
+    const d = path.resolve(PROJECT_ROOT, process.env.VDS_SRC_DIR);
+    if (fs.existsSync(d)) return d;
+  }
+  // Check fullstack prefixes FIRST — they take priority if they look like a real frontend dir
+  for (const prefix of ["client/src", "frontend/src", "web/src"]) {
+    const d = path.join(PROJECT_ROOT, prefix);
+    if (fs.existsSync(d) && fs.statSync(d).isDirectory()) {
+      const hasComponents = fs.existsSync(path.join(d, "components"));
+      const hasAppFiles = fs.readdirSync(d).some((f) => /\.(tsx|jsx)$/i.test(f));
+      if (hasComponents || hasAppFiles) return d;
+    }
+  }
+  // Fallback: standard src/
+  for (const d of [
+    path.join(PROJECT_ROOT, "src"),
+    path.join(PROJECT_ROOT, "app"),
+    PROJECT_ROOT,
+  ]) {
+    if (fs.existsSync(d)) return d;
+  }
+  return path.join(PROJECT_ROOT, "src");
+}
+const SRC_DIR = detectBestSrcDir();
 
 const COMPONENTS_DIR = resolveDir("VDS_COMPONENTS_DIR", [
+  // Fullstack patterns first — if client/src/components exists, prefer it over src/components
+  path.join(PROJECT_ROOT, "client", "src", "components"),
+  path.join(PROJECT_ROOT, "frontend", "src", "components"),
+  path.join(PROJECT_ROOT, "web", "src", "components"),
   path.join(PROJECT_ROOT, "src", "components"),
   path.join(PROJECT_ROOT, "components"),
   path.join(PROJECT_ROOT, "app", "components"),
   path.join(PROJECT_ROOT, "src", "views"),
   path.join(PROJECT_ROOT, "src", "modules"),
-  // Fullstack / monorepo patterns (client/, frontend/, web/)
-  path.join(PROJECT_ROOT, "client", "src", "components"),
-  path.join(PROJECT_ROOT, "frontend", "src", "components"),
-  path.join(PROJECT_ROOT, "web", "src", "components"),
-  path.join(PROJECT_ROOT, "client", "components"),
-  path.join(PROJECT_ROOT, "frontend", "components"),
 ]);
 
 const PAGES_DIR = resolveDir("VDS_PAGES_DIR", [
-  path.join(PROJECT_ROOT, "src", "pages"),
-  path.join(PROJECT_ROOT, "pages"),
-  // Fullstack / monorepo patterns
   path.join(PROJECT_ROOT, "client", "src", "pages"),
   path.join(PROJECT_ROOT, "frontend", "src", "pages"),
   path.join(PROJECT_ROOT, "web", "src", "pages"),
+  path.join(PROJECT_ROOT, "src", "pages"),
+  path.join(PROJECT_ROOT, "pages"),
 ]);
 
 const APP_DIR = resolveDir("VDS_APP_DIR", [
-  path.join(PROJECT_ROOT, "src", "app"),
-  path.join(PROJECT_ROOT, "app"),
-  // Fullstack / monorepo patterns
   path.join(PROJECT_ROOT, "client", "src", "app"),
   path.join(PROJECT_ROOT, "frontend", "src", "app"),
+  path.join(PROJECT_ROOT, "src", "app"),
+  path.join(PROJECT_ROOT, "app"),
 ]);
 
 // ── Monorepo detection ────────────────────────────────────────────────────────
@@ -382,311 +400,10 @@ function compareComponents(prevList, newResults) {
   return { added, removed, modified };
 }
 
-/**
- * Path-based classification: derive Storybook group from the first folder segment.
- * Examples:
- *   ui/button.tsx              → group: "UI"
- *   circles/CircleCard.tsx     → group: "Circles"
- *   time/TimeDashboard.tsx     → group: "Time"
- *   time-resources/planning/… → group: "Time Resources"
- *   settings/UserProfile.tsx   → group: "Settings"
- */
+/** Path-based classification: ui/ → shadcn, components root → Components, else Uncategorized. */
 function classifyByPath(rel) {
-  const normalized = rel.replace(/\\/g, "/");
-  const firstSegment = normalized.split("/")[0] || "";
-
-  // ui/ → always "UI" (shadcn primitives)
-  if (firstSegment === "ui") return { group: "UI", category: null };
-
-  // Root-level file (no subdirectory): firstSegment is a filename like "NavLink.tsx"
-  // Use "Components" instead of the filename as the group
-  if (firstSegment.includes(".")) return { group: "Components", category: null };
-
-  // Convert kebab-case folder to Title Case (time-resources → Time Resources)
-  const group = firstSegment
-    .split("-")
-    .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-    .join(" ") || "Components";
-
-  return { group, category: null };
-}
-
-/**
- * Infer the reusability tier of a component from path + content signals.
- *   primitive  → src/components/ui/ (shadcn atoms)
- *   component  → small, focused domain component (< 200 lines, ≤ 6 local imports)
- *   feature    → medium, contains state / multiple sub-parts
- *   page       → full page/view — reference only, not for direct reuse
- */
-// Semantic filename keywords that indicate a view-level (feature) component
-// even if the file is small (data fetched via context/hooks, not passed as props)
-const FEATURE_FILENAME_KEYWORDS = /Dashboard|Profile|Hub|Overview|Planning|Timesheet|Pipeline|Workload|Schedule|Portfolio|Chart|Board|Reports?|Analytics|Settings$/i;
-
-function inferTier(rel, content) {
-  const normalized = rel.replace(/\\/g, "/");
-  if (normalized.startsWith("ui/") || normalized.includes("/ui/")) return "primitive";
-
-  const filename = normalized.split("/").pop()?.replace(/\.(tsx|jsx|ts|js)$/, "") || "";
-  const lines = content.split("\n").length;
-  // Count relative imports (../ ./) AND path-alias imports (@/components/) as local dependencies
-  const localImports = (content.match(/from\s+['"](?:\.\.?\/?|@\/components\/)/g) || []).length;
-
-  if (lines >= 400 || localImports >= 12) return "page";
-  // Section/Layout/View/Panel/Screen named components with few imports are view-level feature tier.
-  // e.g. BusinessModelSection, HeroSection, CheckoutView, AppLayout, CartPanel — regardless of line count.
-  // Threshold localImports <= 3: genuine sections import very little; aggregators already hit lines/imports above.
-  const SECTION_FILENAME_PATTERNS = /Section$|Layout$|View$|Panel$|Screen$/;
-  if (SECTION_FILENAME_PATTERNS.test(filename) && localImports <= 3) return "feature";
-  // Semantic keyword: treat as feature even if small (fetches data via context/hooks)
-  if (lines >= 200 || localImports >= 7 || FEATURE_FILENAME_KEYWORDS.test(filename)) return "feature";
-  return "component";
-}
-
-// Tailwind pseudo-class modifiers that appear inside class strings — never valid cva option names
-const CVA_SKIP = new Set([
-  "hover","focus","active","disabled","dark","group","peer","placeholder",
-  "before","after","visited","checked","required","invalid","valid","not",
-  "open","closed","empty","enabled","first","last","odd","even",
-]);
-
-/**
- * Extract cva() variant options from a file, e.g.:
- *   variants: { variant: { default, destructive, ghost }, size: { sm, md, lg } }
- * Returns { variant: ["default","destructive",...], size: [...] } or null.
- * Filters out Tailwind pseudo-class modifiers that appear inside class strings.
- */
-function extractCvaVariants(content) {
-  const block = content.match(/variants\s*:\s*\{([\s\S]*?)\}\s*,?\s*defaultVariants/);
-  if (!block) return null;
-  const result = {};
-  // Each top-level key is a variant dimension (variant, size, intent…)
-  // Match: variantName: { optionA: "...", optionB: "..." }
-  const keyRe = /(\w+)\s*:\s*\{([^}]+)\}/g;
-  let m;
-  while ((m = keyRe.exec(block[1])) !== null) {
-    const dimName = m[1];
-    if (CVA_SKIP.has(dimName)) continue; // skip pseudo-class keys at outer level
-    // Extract option names: only words at the start of a line (key: "value")
-    const optRe = /^\s{6,}(\w[\w-]*)\s*:/gm;
-    let om;
-    const options = [];
-    while ((om = optRe.exec(m[2])) !== null) {
-      if (!CVA_SKIP.has(om[1])) options.push(om[1]);
-    }
-    if (options.length > 0) result[dimName] = options;
-  }
-  return Object.keys(result).length > 0 ? result : null;
-}
-
-// Common HTML/React props that are noise for the agent — skip them in cursor rules
-const PROPS_SKIP = new Set([
-  "className","style","id","key","ref","children","asChild","slot",
-  "tabIndex","role","aria-label","aria-describedby","aria-hidden","aria-labelledby",
-  "data-testid","htmlFor","draggable","title","lang","dir","onClick","onChange",
-  "onSubmit","onBlur","onFocus","onKeyDown","onKeyUp","onMouseEnter","onMouseLeave",
-]);
-
-/**
- * Extract TypeScript prop types from a component file.
- * Looks for interface *Props* { ... } or type *Props* = { ... }
- * Returns Array<{ name, type, required }> or null.
- */
-function extractTSProps(content) {
-  // Find the start of a props interface or type alias
-  const startRe = /(?:interface|type)\s+\w*[Pp]rops\w*[^{]*\{/;
-  const sm = startRe.exec(content);
-  if (!sm) return null;
-
-  // Walk forward counting braces to find the matching closing }
-  const blockStart = sm.index + sm[0].length;
-  let depth = 1;
-  let i = blockStart;
-  while (i < content.length && depth > 0) {
-    if (content[i] === "{") depth++;
-    if (content[i] === "}") depth--;
-    i++;
-  }
-  const propsBlock = content.slice(blockStart, i - 1);
-
-  const props = [];
-  // Match top-level props: optional leading whitespace (1-6 chars), prop name, optional ?, colon, type
-  const propRe = /^[ \t]{1,6}([\w]+)(\?)?:\s*(.+?)[ \t]*;?[ \t]*$/gm;
-  let pm;
-  while ((pm = propRe.exec(propsBlock)) !== null) {
-    const propName = pm[1].trim();
-    if (PROPS_SKIP.has(propName)) continue;
-    // Skip comment lines that accidentally match (e.g. "// foo:")
-    if (propsBlock.slice(pm.index).match(/^[ \t]*\/\//)) continue;
-
-    const optional = pm[2] === "?";
-    let type = pm[3]
-      .replace(/\s*\/\/.*$/, "")  // strip inline // comments (with any space before //)
-      .trim()                     // remove surrounding whitespace
-      .replace(/;$/, "")          // strip trailing semicolon (now truly at the end)
-      .trim();
-
-    // Skip multi-line types (unbalanced braces — the rest is on the next line)
-    const openBraces  = (type.match(/\{/g) || []).length;
-    const closeBraces = (type.match(/\}/g) || []).length;
-    if (openBraces !== closeBraces) continue;
-
-    // Simplify verbose React type names
-    type = type.replace(/React\.ReactNode/g, "ReactNode");
-    type = type.replace(/React\.FC[^;,\n]*/g, "FC");
-    type = type.replace(/React\.CSSProperties/g, "CSSProperties");
-    type = type.replace(/React\.RefObject<[^>]+>/g, "RefObject");
-    type = type.replace(/React\.MouseEvent[^;,\n]*/g, "MouseEvent");
-    type = type.replace(/React\.ChangeEvent[^;,\n]*/g, "ChangeEvent");
-    type = type.replace(/React\.KeyboardEvent[^;,\n]*/g, "KeyboardEvent");
-
-    // Truncate very long types
-    if (type.length > 50) type = type.slice(0, 47) + "...";
-
-    props.push({ name: propName, type, required: !optional });
-  }
-  return props.length > 0 ? props : null;
-}
-
-/**
- * Scan the entire src/ directory for non-Props TypeScript interface and type alias
- * declarations and build a type registry used by story-generator for realistic mock defaults.
- *
- * Returns { TypeName: Array<{ name, type, required }> } or null.
- * Only includes types with ≥2 fields; skips Props/State/Context/Config/Options/Ref types.
- */
-function extractProjectTypes() {
-  const registry = {};
-  const seen = new Set();
-
-  function scanDir(dir) {
-    if (!fs.existsSync(dir)) return;
-    let entries;
-    try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return; }
-    for (const e of entries) {
-      if (e.isDirectory()) {
-        if (IGNORE_DIRS.includes(e.name) || e.name === "__tests__") continue;
-        scanDir(path.join(dir, e.name));
-      } else if (/\.(ts|tsx)$/.test(e.name) &&
-                 !e.name.endsWith(".stories.tsx") &&
-                 !e.name.endsWith(".test.ts") &&
-                 !e.name.endsWith(".spec.ts")) {
-        const fullPath = path.join(dir, e.name);
-        let content;
-        try { content = fs.readFileSync(fullPath, "utf-8"); } catch { continue; }
-
-        // Find all export interface / type declarations whose names start with uppercase
-        const declRe = /(?:export\s+)?(?:interface|type)\s+([A-Z][A-Za-z0-9_]*)(?:<[^>]*>)?(?:\s+extends\s+[^{]+)?\s*(?:=\s*(?![\|&]))?(?=\s*\{)/g;
-        let dm;
-        while ((dm = declRe.exec(content)) !== null) {
-          const typeName = dm[1];
-          // Skip non-data types
-          if (/Props$|State$|Context$|Config$|Options$|Params$|Ref$|Handle$|Return$|Result$|Theme$/.test(typeName)) continue;
-          if (/^(FC|React|JSX|HTML|Event|Mouse|Key|Touch|Change|Focus|Blur|Scroll|Input|Submit|SVG)/.test(typeName)) continue;
-          if (seen.has(typeName)) continue; // first declaration wins
-
-          // Locate the opening brace of the body
-          const braceIdx = content.indexOf("{", dm.index + dm[0].length - 1);
-          if (braceIdx === -1) continue;
-
-          // Walk forward counting braces to find matching closing brace
-          let depth = 1, i = braceIdx + 1;
-          while (i < content.length && depth > 0) {
-            if (content[i] === "{") depth++;
-            if (content[i] === "}") depth--;
-            i++;
-          }
-          const block = content.slice(braceIdx + 1, i - 1);
-
-          // Parse fields — for data types we only skip React/HTML-specific attrs, NOT id/title/name etc.
-          const fields = [];
-          const fieldRe = /^[ \t]{1,6}(?:readonly\s+)?(\w+)(\?)?:\s*(.+?)[ \t]*;?[ \t]*$/gm;
-          let fm;
-          while ((fm = fieldRe.exec(block)) !== null) {
-            const fieldName = fm[1].trim();
-            // Only skip HTML/React presentation attrs — keep data fields like id, title, name, status
-            if (/^(className|style|ref|key|htmlFor|tabIndex|role|draggable|aria-|data-)/.test(fieldName)) continue;
-            if (block.slice(fm.index).match(/^[ \t]*\/\//)) continue;
-            const optional = fm[2] === "?";
-            let type = (fm[3] || "")
-              .replace(/\s*\/\/.*$/, "")
-              .trim()
-              .replace(/;$/, "")
-              .trim();
-            const openB = (type.match(/\{/g) || []).length;
-            const closeB = (type.match(/\}/g) || []).length;
-            if (openB !== closeB) continue;
-            type = type.replace(/React\.ReactNode/g, "ReactNode");
-            if (type.length > 60) type = type.slice(0, 57) + "...";
-            fields.push({ name: fieldName, type, required: !optional });
-          }
-
-          // Only register types with at least 2 fields (otherwise not useful for mock generation)
-          if (fields.length >= 2) {
-            registry[typeName] = fields;
-            seen.add(typeName);
-          }
-        }
-      }
-    }
-  }
-
-  scanDir(SRC_DIR);
-  return Object.keys(registry).length > 0 ? registry : null;
-}
-
-/**
- * Extract named UI patterns from a feature-tier file.
- *
- * Signal 1 — JSX block comments: {/* SECTION TITLE *\/}
- *   e.g. {/* CLUSTER 1: REVENUE & BILLING *\/} → label "CLUSTER 1: REVENUE & BILLING"
- *
- * Signal 2 — Nearest <h3>/<h2> text (fallback when no comments found)
- *   e.g. <h3>Unbilled WIP</h3> → label "Unbilled WIP"
- *
- * Returns Array<{ label: string, line: number }> or null.
- * Safe on any JSX/TSX file — never throws.
- */
-function extractInlinePatterns(content) {
-  const patterns = [];
-  const seen = new Set();
-
-  // Signal 1: JSX block comments — {/* ... */}
-  const commentRe = /\{\/\*\s*([\s\S]{3,120}?)\s*\*\/\}/g;
-  let cm;
-  while ((cm = commentRe.exec(content)) !== null) {
-    const raw = cm[1].replace(/\s+/g, " ").trim();
-    // Skip too-short, pure annotation, or code-style comments
-    if (!raw || raw.length < 5) continue;
-    if (/^(TODO|FIXME|HACK|NOTE|@|eslint|prettier|ts-ignore|type-)/i.test(raw)) continue;
-    // Skip comments that look like code (contain JSX/HTML tags)
-    if (/<[A-Za-z]/.test(raw)) continue;
-    const lineNum = content.slice(0, cm.index).split("\n").length;
-    const label = raw.slice(0, 80);
-    const key = label.toLowerCase().replace(/\s+/g, " ");
-    if (!seen.has(key)) {
-      seen.add(key);
-      patterns.push({ label, line: lineNum });
-    }
-  }
-
-  // Signal 2: <h3>/<h2> text content (only if no JSX comments found)
-  if (patterns.length === 0) {
-    const headingRe = /<h[23][^>]*>\s*([^<{]{4,60}?)\s*<\/h[23]>/g;
-    let hm;
-    while ((hm = headingRe.exec(content)) !== null) {
-      const raw = hm[1].replace(/\s+/g, " ").trim();
-      if (!raw || raw.length < 4) continue;
-      const lineNum = content.slice(0, hm.index).split("\n").length;
-      const label = raw.slice(0, 80);
-      const key = label.toLowerCase();
-      if (!seen.has(key)) {
-        seen.add(key);
-        patterns.push({ label, line: lineNum });
-      }
-    }
-  }
-
-  return patterns.length > 0 ? patterns : null;
+  if (rel.startsWith("ui/")) return { group: "shadcn", category: "UI" };
+  return { group: "Components", category: "Components" };
 }
 
 function getAllComponentFiles(dir, baseDir = dir) {
@@ -734,6 +451,10 @@ function extractBrandAssets() {
     path.join(PROJECT_ROOT, "public"),
     path.join(PROJECT_ROOT, "src", "assets"),
     path.join(PROJECT_ROOT, "src", "images"),
+    path.join(PROJECT_ROOT, "client", "src", "assets"),
+    path.join(PROJECT_ROOT, "client", "src", "images"),
+    path.join(PROJECT_ROOT, "frontend", "src", "assets"),
+    path.join(PROJECT_ROOT, "web", "src", "assets"),
   ];
   for (const dir of dirs) {
     const relDir = path.relative(PROJECT_ROOT, dir).replace(/\\/g, "/");
@@ -745,15 +466,16 @@ function extractBrandAssets() {
       assets.push({ path: filePath, name: baseName, type });
     }
   }
-  // Fallback: if no branded assets found by keyword, include all image files from src/assets
+  // Fallback: if no branded assets found by keyword, include all image files from SRC_DIR/assets
   if (assets.length === 0 || assets.every((r) => r.type === "asset")) {
     const assetsDir = path.join(SRC_DIR, "assets");
     if (fs.existsSync(assetsDir)) {
       const imgExtRe = /\.(png|jpg|jpeg|svg|gif|webp|ico)$/i;
       const allImages = fs.readdirSync(assetsDir).filter((f) => imgExtRe.test(f));
+      const relAssetsDir = path.relative(PROJECT_ROOT, assetsDir).replace(/\\/g, "/");
       for (const img of allImages) {
-        if (!assets.some((r) => r.path === "src/assets/" + img)) {
-          assets.push({ type: "asset", path: "src/assets/" + img, name: img });
+        if (!assets.some((r) => r.path === relAssetsDir + "/" + img)) {
+          assets.push({ type: "asset", path: relAssetsDir + "/" + img, name: img });
         }
       }
     }
@@ -761,163 +483,30 @@ function extractBrandAssets() {
   return assets;
 }
 
-/** Extract Lucide icons used in app code with per-component JSX usage counts.
- *  Returns { name, total, topFiles }[] sorted by total desc.
- *  Handles aliased imports: `import { ArrowRight as Arrow }` — counted under original name. */
+/** Extract icon names from `import { A, B, C } from "lucide-react"` in app code only (exclude stories so generated Star/defaults don't pollute). */
 function extractLucideIconsUsed(srcDir) {
   const allFiles = getAllTsxJsxInDir(srcDir);
   const files = allFiles.filter((rel) => !/^stories[/\\]/.test(rel.replace(/\\/g, "/")));
-
-  // originalName → { total: number, topFiles: Map<componentName, count> }
-  const iconData = new Map();
+  const names = new Set();
   const importRe = /import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/g;
-
   for (const rel of files) {
     const fullPath = path.join(srcDir, rel);
-    let content;
-    try { content = fs.readFileSync(fullPath, "utf-8"); } catch (_) { continue; }
-    const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
-
-    // Pass 1 — collect local-name → original-name for this file
-    importRe.lastIndex = 0;
-    let m;
-    const localToOriginal = new Map();
-    while ((m = importRe.exec(content)) !== null) {
-      m[1].split(",").forEach((part) => {
-        const trimmed = part.trim();
-        if (!trimmed) return;
-        const asMatch = trimmed.match(/^(\w+)\s+as\s+(\w+)$/);
-        if (asMatch) {
-          const orig = asMatch[1];
-          const local = asMatch[2];
-          if (/^[A-Z][a-zA-Z0-9]*$/.test(orig)) {
-            localToOriginal.set(local, orig);
-            if (!iconData.has(orig)) iconData.set(orig, { total: 0, topFiles: new Map() });
-          }
-        } else {
-          const name = trimmed.split(/\s+/)[0];
-          if (name && /^[A-Z][a-zA-Z0-9]*$/.test(name)) {
-            localToOriginal.set(name, name);
-            if (!iconData.has(name)) iconData.set(name, { total: 0, topFiles: new Map() });
-          }
-        }
-      });
-    }
-
-    // Pass 2 — count JSX usages `<LocalName ` / `<LocalName/` / `<LocalName>`
-    for (const [localName, originalName] of localToOriginal.entries()) {
-      const jsxRe = new RegExp(`<${localName}[\\s/>]`, "g");
-      let count = 0;
-      while (jsxRe.exec(content) !== null) count++;
-      if (count > 0) {
-        const data = iconData.get(originalName);
-        data.total += count;
-        data.topFiles.set(componentName, (data.topFiles.get(componentName) || 0) + count);
+    try {
+      const content = fs.readFileSync(fullPath, "utf-8");
+      let m;
+      while ((m = importRe.exec(content)) !== null) {
+        const block = m[1];
+        block.split(",").forEach((part) => {
+          const trimmed = part.trim();
+          const asMatch = trimmed.match(/^(\w+)\s+as\s+/);
+          const name = asMatch ? asMatch[1] : trimmed.split(/\s+/)[0];
+          if (name && /^[A-Z][a-zA-Z0-9]*$/.test(name)) names.add(name);
+        });
       }
-    }
+    } catch (_) {}
+    importRe.lastIndex = 0;
   }
-
-  return [...iconData.entries()]
-    .map(([name, data]) => ({
-      name,
-      total: data.total,
-      topFiles: [...data.topFiles.entries()]
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 5)
-        .map(([n]) => n),
-    }))
-    .sort((a, b) => b.total - a.total || a.name.localeCompare(b.name));
-}
-
-/** Scan app source for responsive breakpoints, grid column patterns, gaps and max-width usage.
- *  Returns { breakpoints, gridCols, gaps, maxWidths, containerCount } or null if nothing found. */
-function extractGridSystem(srcDir) {
-  if (!fs.existsSync(srcDir)) return null;
-  const allFiles = getAllTsxJsxInDir(srcDir);
-  const files = allFiles.filter((rel) => !/^stories[/\\]/.test(rel.replace(/\\/g, "/")));
-  if (files.length === 0) return null;
-
-  const BP_NAMES = ["sm", "md", "lg", "xl", "2xl"];
-  const bpData = {};
-  for (const bp of BP_NAMES) bpData[bp] = { count: 0, topFiles: new Map() };
-
-  const colData = {};  // colValue → { count, topFiles: Map }
-  const gapCounts = {};
-  const maxWCounts = {};
-  let containerCount = 0;
-
-  for (const rel of files) {
-    let content;
-    try { content = fs.readFileSync(path.join(srcDir, rel), "utf-8"); } catch (_) { continue; }
-    const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
-
-    // Breakpoints: sm: md: lg: xl: 2xl:
-    const bpRe = /\b(2xl|xl|lg|md|sm):/g;
-    let m;
-    while ((m = bpRe.exec(content)) !== null) {
-      const name = m[1];
-      bpData[name].count++;
-      bpData[name].topFiles.set(componentName, (bpData[name].topFiles.get(componentName) || 0) + 1);
-    }
-
-    // grid-cols-{value}
-    const gcRe = /\bgrid-cols-((?:\[[\w\s\-.,/()*+]+\]|\w+))/g;
-    while ((m = gcRe.exec(content)) !== null) {
-      const val = m[1];
-      if (!colData[val]) colData[val] = { count: 0, topFiles: new Map() };
-      colData[val].count++;
-      colData[val].topFiles.set(componentName, (colData[val].topFiles.get(componentName) || 0) + 1);
-    }
-
-    // gap-{n}, gap-x-{n}, gap-y-{n}
-    const gapRe = /\bgap(?:-[xy])?-((?:\[[\w\s./]+\]|\d[\w.]*|px))\b/g;
-    while ((m = gapRe.exec(content)) !== null) {
-      const val = m[1];
-      gapCounts[val] = (gapCounts[val] || 0) + 1;
-    }
-
-    // max-w-{value}
-    const maxWRe = /\bmax-w-((?:\[[\w\s./]+\]|[\w-]+))/g;
-    while ((m = maxWRe.exec(content)) !== null) {
-      const val = m[1];
-      maxWCounts[val] = (maxWCounts[val] || 0) + 1;
-    }
-
-    // container class
-    let ctrM;
-    const ctrRe = /\bcontainer\b/g;
-    while ((ctrM = ctrRe.exec(content)) !== null) containerCount++;
-  }
-
-  const breakpoints = {};
-  for (const bp of BP_NAMES) {
-    if (bpData[bp].count > 0) {
-      breakpoints[bp] = {
-        count: bpData[bp].count,
-        topFiles: [...bpData[bp].topFiles.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map(([n]) => n),
-      };
-    }
-  }
-
-  const gridCols = {};
-  for (const [val, data] of Object.entries(colData).sort((a, b) => b[1].count - a[1].count)) {
-    gridCols[val] = {
-      count: data.count,
-      topFiles: [...data.topFiles.entries()].sort((a, b) => b[1] - a[1]).slice(0, 5).map(([n]) => n),
-    };
-  }
-
-  const gaps = Object.fromEntries(
-    Object.entries(gapCounts).sort((a, b) => b[1] - a[1]).slice(0, 12)
-  );
-
-  const maxWidths = Object.fromEntries(
-    Object.entries(maxWCounts).sort((a, b) => b[1] - a[1]).slice(0, 10)
-  );
-
-  if (Object.keys(breakpoints).length === 0 && Object.keys(gridCols).length === 0) return null;
-
-  return { breakpoints, gridCols, gaps, maxWidths, containerCount };
+  return [...names].sort();
 }
 
 function extractVdsTags(content) {
@@ -1660,11 +1249,13 @@ function extractFoundations() {
   const borderRadiusScale = {};
 
   // Read ALL existing CSS files and combine them (covers Tailwind v4 split configs)
+  // Detect frontend source dir for fullstack projects (client/src, frontend/src, web/src)
+  const frontendPrefixes = ["src", "client/src", "frontend/src", "web/src"];
   const allCssCandidates = [
-    path.join(PROJECT_ROOT, "src", "index.css"),
-    path.join(PROJECT_ROOT, "src", "globals.css"),
-    path.join(PROJECT_ROOT, "src", "styles", "globals.css"),
-    path.join(PROJECT_ROOT, "src", "App.css"),
+    ...frontendPrefixes.map((p) => path.join(PROJECT_ROOT, p, "index.css")),
+    ...frontendPrefixes.map((p) => path.join(PROJECT_ROOT, p, "globals.css")),
+    ...frontendPrefixes.map((p) => path.join(PROJECT_ROOT, p, "styles", "globals.css")),
+    ...frontendPrefixes.map((p) => path.join(PROJECT_ROOT, p, "App.css")),
     path.join(PROJECT_ROOT, "app", "globals.css"),
   ];
   const cssChunks = [];
@@ -1908,7 +1499,10 @@ function extractFoundations() {
 
   // Fallback: if no typography tokens from config, extract from Google Fonts @import
   if (Object.keys(typography).length === 0 || (!typography.body && !typography.bodyFontFamily)) {
-    for (const cssFile of ["src/index.css", "src/App.css", "src/globals.css", "src/styles/globals.css"]) {
+    const typoCssCandidates = frontendPrefixes.flatMap((p) => [
+      p + "/index.css", p + "/App.css", p + "/globals.css", p + "/styles/globals.css",
+    ]);
+    for (const cssFile of typoCssCandidates) {
       const cssPath = path.join(PROJECT_ROOT, cssFile);
       if (!fs.existsSync(cssPath)) continue;
       try {
@@ -1934,11 +1528,15 @@ function extractFoundations() {
   try {
     const { globSync } = projectRequire("glob");
     const ROOT = PROJECT_ROOT;
-    allTsxFiles = globSync("src/**/*.{tsx,jsx,ts,js}", {
-      cwd: ROOT,
-      absolute: true,
-      ignore: ["**/*.stories.*", "**/node_modules/**"],
-    });
+    // Use multiple globs to cover standard + fullstack project structures
+    const srcGlobs = frontendPrefixes.map((p) => p + "/**/*.{tsx,jsx,ts,js}");
+    for (const g of srcGlobs) {
+      allTsxFiles.push(...globSync(g, {
+        cwd: ROOT,
+        absolute: true,
+        ignore: ["**/*.stories.*", "**/node_modules/**"],
+      }));
+    }
   } catch (_) {
     function walkDir(dir, list) {
       if (!fs.existsSync(dir)) return;
@@ -2278,111 +1876,6 @@ function extractTokenUsage() {
   };
 }
 
-function extractColorUsage(colorNames) {
-  if (!fs.existsSync(SRC_DIR)) return {};
-  if (!Array.isArray(colorNames) || colorNames.length === 0) return {};
-  const files = getAllTsxJsxInDir(SRC_DIR);
-  if (!Array.isArray(files) || files.length === 0) return {};
-
-  const nameSet = new Set(colorNames);
-  const usage = {};
-  for (const name of colorNames) {
-    usage[name] = { bg: 0, text: 0, border: 0, other: 0, topFiles: new Map() };
-  }
-
-  // Build reverse lookup: lowercase hex → color name (for arbitrary-* and inline-* tokens)
-  // e.g. "arbitrary-4f46e5" → hex key "4f46e5"
-  const hexToName = new Map();
-  for (const name of colorNames) {
-    if (name.startsWith("arbitrary-") || name.startsWith("inline-")) {
-      const hexKey = name.replace(/^(arbitrary|inline)-/, "").toLowerCase();
-      hexToName.set(hexKey, name);
-    }
-  }
-
-  // Single-pass regex: matches bg-primary, text-card-foreground, border-chart-1, etc.
-  const colorUtilRe = /\b(bg|text|border|fill|stroke|ring|from|to|via|outline)-([\w][\w-]*)/g;
-  // Bracket-notation: bg-[#4F46E5], text-[#4f46e5/80], etc.
-  const bracketHexRe = /\b(bg|text|border|fill|stroke|ring|from|to|via|outline)-\[#([0-9a-fA-F]{3,8})(?:\/[\d.]+)?\]/g;
-  // Inline style hex colors: color:"#4F46E5", backgroundColor:'#4f46e5', etc.
-  const inlineHexRe = /(?:color|(?:background|border|fill|stroke|ring)(?:Color)?)\s*[:=]\s*['"]#([0-9a-fA-F]{3,8})['"]/g;
-
-  for (const rel of files) {
-    if (rel.includes("stories")) continue;
-    let content;
-    try {
-      content = fs.readFileSync(path.join(SRC_DIR, rel), "utf-8");
-    } catch (_) { continue; }
-    const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
-
-    let m;
-    // ── Token-based utilities (bg-primary, text-muted-foreground, …) ──
-    const reCopy = new RegExp(colorUtilRe.source, "g");
-    while ((m = reCopy.exec(content)) !== null) {
-      const prefix = m[1];
-      const token = m[2];
-      if (!nameSet.has(token)) continue;
-      if (prefix === "bg") usage[token].bg++;
-      else if (prefix === "text") usage[token].text++;
-      else if (prefix === "border") usage[token].border++;
-      else usage[token].other++;
-      usage[token].topFiles.set(componentName, (usage[token].topFiles.get(componentName) || 0) + 1);
-    }
-
-    // ── Bracket-notation hex utilities (bg-[#4F46E5], …) ──
-    if (hexToName.size > 0) {
-      const brCopy = new RegExp(bracketHexRe.source, "gi");
-      while ((m = brCopy.exec(content)) !== null) {
-        const prefix = m[1].toLowerCase();
-        const hexKey = m[2].toLowerCase();
-        // Normalise 3-char hex → 6-char for matching
-        const normalKey = hexKey.length === 3
-          ? hexKey[0] + hexKey[0] + hexKey[1] + hexKey[1] + hexKey[2] + hexKey[2]
-          : hexKey;
-        const name = hexToName.get(normalKey) || hexToName.get(hexKey);
-        if (!name) continue;
-        if (prefix === "bg") usage[name].bg++;
-        else if (prefix === "text") usage[name].text++;
-        else if (prefix === "border") usage[name].border++;
-        else usage[name].other++;
-        usage[name].topFiles.set(componentName, (usage[name].topFiles.get(componentName) || 0) + 1);
-      }
-
-      // ── Inline style hex colors (color: "#4F46E5") ──
-      const inCopy = new RegExp(inlineHexRe.source, "gi");
-      while ((m = inCopy.exec(content)) !== null) {
-        const hexKey = m[1].toLowerCase();
-        const normalKey = hexKey.length === 3
-          ? hexKey[0] + hexKey[0] + hexKey[1] + hexKey[1] + hexKey[2] + hexKey[2]
-          : hexKey;
-        const name = hexToName.get(normalKey) || hexToName.get(hexKey);
-        if (!name) continue;
-        usage[name].other++;
-        usage[name].topFiles.set(componentName, (usage[name].topFiles.get(componentName) || 0) + 1);
-      }
-    }
-  }
-
-  const result = {};
-  for (const name of colorNames) {
-    const data = usage[name];
-    const total = data.bg + data.text + data.border + data.other;
-    if (total > 0) {
-      result[name] = {
-        bg: data.bg,
-        text: data.text,
-        border: data.border,
-        total,
-        topFiles: [...data.topFiles.entries()]
-          .sort((a, b) => b[1] - a[1])
-          .slice(0, 5)
-          .map(([n]) => n),
-      };
-    }
-  }
-  return result;
-}
-
 function extractButtonUsage() {
   if (!fs.existsSync(SRC_DIR)) return null;
   const files = getAllTsxJsxInDir(SRC_DIR);
@@ -2465,13 +1958,7 @@ function scan() {
       description = "";
     }
     const tokens = extractTailwindTokens(content);
-    const tier = inferTier(rel, content);
-    const variants = (tier === "primitive") ? extractCvaVariants(content) : null;
-    const props = (tier === "component" || tier === "feature") ? extractTSProps(content) : null;
-    const patterns = (tier === "feature") ? extractInlinePatterns(content) : null;
-    const lineCount = content.split("\n").length;
-    const localImportCount = (content.match(/from\s+['"]\.\.\?\//g) || []).length;
-    results.push({ file: rel, name, group, category, description, tokens, tier, lines: lineCount, localImports: localImportCount, ...(variants ? { variants } : {}), ...(props ? { props } : {}), ...(patterns ? { patterns } : {}) });
+    results.push({ file: rel, name, group, category, description, tokens });
   }
   if (PAGES_DIR && fs.existsSync(PAGES_DIR)) {
     const pageFiles = getAllComponentFiles(PAGES_DIR);
@@ -2480,7 +1967,6 @@ function scan() {
       const content = fs.readFileSync(fullPath, "utf-8");
       const name = humanizeName(rel);
       const tokens = extractTailwindTokens(content);
-      const lineCount = content.split("\n").length;
       results.push({
         file: path.relative(PROJECT_ROOT, PAGES_DIR).replace(/\\/g, "/") + "/" + rel,
         name,
@@ -2488,9 +1974,6 @@ function scan() {
         category: "Pages",
         description: "",
         tokens,
-        tier: "page",
-        lines: lineCount,
-        localImports: 0,
       });
     }
   }
@@ -2505,13 +1988,6 @@ function scan() {
   if (tokenUsage) {
     foundations.tokenUsage = tokenUsage;
   }
-  const colorNames = Object.keys(foundations.colors || {}).filter((k) => k !== "_dark");
-  const colorUsage = extractColorUsage(colorNames);
-  if (Object.keys(colorUsage).length > 0) foundations.colorUsage = colorUsage;
-  const gridSystem = extractGridSystem(SRC_DIR);
-  if (gridSystem) foundations.gridSystem = gridSystem;
-  const projectTypes = extractProjectTypes();
-  if (projectTypes) foundations.types = projectTypes;
   const componentSuggestions = extractComponentSuggestions();
   const unreleasedSectionCandidates = extractUnreleasedSectionCandidates();
   const output = {

package/vds-core-template/setup-storybook-providers.mjs

@@ -14,17 +14,22 @@ import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PROJECT_ROOT = path.join(__dirname, "..");
-const STORYBOOK_DIR = path.join(PROJECT_ROOT, ".storybook");
 
-/** Projenin gerçek frontend src dizinini tespit eder (fullstack/monorepo desteği). */
+// Auto-detect frontend src dir for fullstack projects (client/src, frontend/src, web/src)
 function detectSrcDir(root) {
-  for (const candidate of ["client/src", "frontend/src", "web/src"]) {
-    if (fs.existsSync(path.join(root, candidate))) return path.join(root, candidate);
+  for (const prefix of ["src", "client/src", "frontend/src", "web/src"]) {
+    const full = path.join(root, prefix);
+    if (fs.existsSync(full) && fs.statSync(full).isDirectory()) {
+      const hasComponents = fs.existsSync(path.join(full, "components"));
+      const hasAppFiles = fs.readdirSync(full).some((f) => /\.(tsx|jsx)$/i.test(f));
+      if (hasComponents || hasAppFiles) return full;
+    }
   }
   return path.join(root, "src");
 }
 
 const SRC_DIR = detectSrcDir(PROJECT_ROOT);
+const STORYBOOK_DIR = path.join(PROJECT_ROOT, ".storybook");
 
 // ── vds.config.js loader ──────────────────────────────────────────────────────
 function loadVdsConfig() {
@@ -128,7 +133,7 @@ function detectHooksInFile(content) {
 
 /** Map: relative path (src/...) -> Set of hook names */
 function detectHooksUsedInProject(projectRoot) {
-  const srcDir = detectSrcDir(projectRoot);
+  const srcDir = SRC_DIR;
   const srcRel = path.relative(projectRoot, srcDir).replace(/\\/g, "/");
   const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcRel, r));
   const byFile = new Map();
@@ -145,7 +150,7 @@ function detectHooksUsedInProject(projectRoot) {
 
 /** Find file that exports providerName (e.g. TimerProvider). If hookName is given, prefer a file that also contains that hook (e.g. context/SidebarContext.tsx for useSidebar over ui/sidebar). */
 function findProviderExportPath(projectRoot, providerName, hookName) {
-  const srcDir = detectSrcDir(projectRoot);
+  const srcDir = SRC_DIR;
   const srcRel = path.relative(projectRoot, srcDir).replace(/\\/g, "/");
   const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcRel, r));
   const exportRe = new RegExp(
@@ -157,8 +162,8 @@ function findProviderExportPath(projectRoot, providerName, hookName) {
     try {
       const content = fs.readFileSync(full, "utf-8");
       if (exportRe.test(content)) {
-        // Strip the src prefix (could be "src", "client/src", "frontend/src", etc.)
-        const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(new RegExp("^" + srcRel.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "\\/?"), "");
+        const srcRelEscaped = srcRel.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const withoutExt = rel.replace(/\.(tsx?|jsx?)$/i, "").replace(new RegExp("^" + srcRelEscaped + "/?"), "");
         const pathForImport = "@/" + withoutExt;
         const hasHook = hookName && new RegExp("\\b" + hookName + "\\b").test(content);
         candidates.push({ pathForImport, hasHook });
@@ -202,7 +207,7 @@ function detectRouterPackage(projectRoot) {
 }
 
 function projectUsesRouterHooks(projectRoot) {
-  const srcDir = detectSrcDir(projectRoot);
+  const srcDir = SRC_DIR;
   if (!fs.existsSync(srcDir)) return false;
   const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   for (const file of files) {
@@ -218,7 +223,7 @@ function projectUsesRouterHooks(projectRoot) {
 
 /** Detect if project uses react-dnd (useDrag, useDrop, or import from react-dnd). */
 function detectReactDnd(projectRoot) {
-  const srcDir = detectSrcDir(projectRoot);
+  const srcDir = SRC_DIR;
   const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   for (const full of files) {
     try {
@@ -412,7 +417,7 @@ function injectProviderDecorators(projectRoot) {
   // 7. Handle hooks without provider: add warning comment to affected story files
   if (hooksWithoutProvider.size > 0) {
     const componentNameFromPath = (rel) => path.basename(rel, path.extname(rel));
-    const storiesDir = path.join(projectRoot, "src", "stories");
+    const storiesDir = path.join(SRC_DIR, "stories");
     const storyRels = fs.existsSync(storiesDir) ? getAllSourceFiles(storiesDir, storiesDir) : [];
     const storyByComponent = new Map();
     for (const r of storyRels) {

package/vds-core-template/storybook-adapt.mjs

@@ -12,7 +12,21 @@ import { fileURLToPath } from "url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PROJECT_ROOT = path.join(__dirname, "..");
-const SRC_DIR = path.join(PROJECT_ROOT, "src");
+
+// Auto-detect frontend src dir for fullstack projects (client/src, frontend/src, web/src)
+function detectSrcDir(root) {
+  for (const prefix of ["src", "client/src", "frontend/src", "web/src"]) {
+    const full = path.join(root, prefix);
+    if (fs.existsSync(full) && fs.statSync(full).isDirectory()) {
+      const hasComponents = fs.existsSync(path.join(full, "components"));
+      const hasAppFiles = fs.readdirSync(full).some((f) => /\.(tsx|jsx)$/i.test(f));
+      if (hasComponents || hasAppFiles) return full;
+    }
+  }
+  return path.join(root, "src");
+}
+
+const SRC_DIR = detectSrcDir(PROJECT_ROOT);
 const STORYBOOK_DIR = path.join(PROJECT_ROOT, ".storybook");
 const MOCKS_DIR = path.join(STORYBOOK_DIR, "mocks");
 
@@ -70,9 +84,9 @@ function isProblematic(spec) {
 }
 
 function collectProblematicImports(projectRoot) {
-  const srcDir = path.join(projectRoot, "src");
+  const srcDir = SRC_DIR;
   if (!fs.existsSync(srcDir)) return new Set();
-  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   const found = new Set();
   for (const file of files) {
     try {
@@ -87,9 +101,9 @@ function collectProblematicImports(projectRoot) {
 
 /** Check relative imports resolve to a file; report unresolved. */
 function reportUnresolvedImports(projectRoot) {
-  const srcDir = path.join(projectRoot, "src");
+  const srcDir = detectSrcDir(projectRoot);
   if (!fs.existsSync(srcDir)) return;
-  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(srcDir, r));
   for (const file of files) {
     try {
       const content = fs.readFileSync(file, "utf-8");
@@ -204,33 +218,12 @@ function injectAliases(projectRoot, specifiers) {
   }
 }
 
-/** Inject resolve.dedupe into .storybook/main.* viteFinal to prevent multiple React instances.
- *  Multiple React instances cause "Cannot read properties of null (reading 'useRef')" at MemoryRouter. */
-function injectDedupe(projectRoot) {
-  const mainPath = getMainPath(projectRoot);
-  if (!mainPath) return;
-  let content = fs.readFileSync(mainPath, "utf-8");
-  if (content.includes("dedupe")) return; // idempotent
-  // Match: alias block + its trailing comma + whitespace/newline + resolve closing }
-  // e.g.  alias: { "@": path.resolve(...) },\n    },
-  // [^{}]* ensures we skip injection if alias has nested object values (safe fallback)
-  const pattern = /(\balias\s*:\s*\{[^{}]*\}),(\s*\})/;
-  if (!pattern.test(content)) return;
-  content = content.replace(pattern, (_, aliasBlock, resolveClose) =>
-    `${aliasBlock},\n        dedupe: ["react", "react-dom", "react-router-dom"],${resolveClose}`
-  );
-  fs.writeFileSync(mainPath, content, "utf-8");
-  console.log("[VDS] Storybook adapt: injected React dedupe into viteFinal");
-}
-
 function main() {
   const projectRoot = PROJECT_ROOT;
   if (!fs.existsSync(path.join(projectRoot, ".storybook"))) {
     console.log("[VDS] .storybook not found; skip storybook-adapt.");
     return;
   }
-  // Always inject dedupe — prevents "useRef null" crashes from multiple React instances
-  injectDedupe(projectRoot);
   reportUnresolvedImports(projectRoot);
   const problematic = collectProblematicImports(projectRoot);
   if (problematic.size === 0) return;