vibe-design-system 1.9.5 → 1.9.8

package/package.json

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

package/vds-core-template/scan.mjs

@@ -14,22 +14,6 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PROJECT_ROOT = path.join(__dirname, "..");
 const projectRequire = createRequire(path.join(PROJECT_ROOT, "package.json"));
 
-function getVdsPackageVersion() {
-  try {
-    const fromNodeModules = path.join(PROJECT_ROOT, "node_modules", "vibe-design-system", "package.json");
-    if (fs.existsSync(fromNodeModules)) {
-      const pkg = JSON.parse(fs.readFileSync(fromNodeModules, "utf-8"));
-      return pkg.version || null;
-    }
-    const nextToScript = path.join(__dirname, "..", "package.json");
-    if (fs.existsSync(nextToScript)) {
-      const pkg = JSON.parse(fs.readFileSync(nextToScript, "utf-8"));
-      if (pkg.name === "vibe-design-system") return pkg.version || null;
-    }
-  } catch (_) {}
-  return null;
-}
-
 const CLI_LOCALES = {
   en: {
     componentsNotFound: "src/components not found. VDS scan skipped.",
@@ -266,7 +250,7 @@ function getAllTsxJsxInDir(dir) {
 }
 
 const BRAND_KEYWORDS = /logo|brand|icon|favicon|emblem|mark/i;
-const BRAND_EXTENSIONS = /\.(svg|png|ico|jpg|jpeg|webp|gif)$/i;
+const BRAND_EXTENSIONS = /\.(svg|png|ico)$/i;
 
 function getFilesByExtension(dir, extRe, baseDir = dir) {
   if (!fs.existsSync(dir)) return [];
@@ -283,7 +267,7 @@ function getFilesByExtension(dir, extRe, baseDir = dir) {
   return files;
 }
 
-/** Scan public/ and src/assets/ for all images; include logos/brand by keyword, rest as "asset". Preview URL is relative for dashboard /api/vds-asset. */
+/** Scan public/, src/assets/, src/images/ for .svg, .png, .ico; filter by brand keywords. */
 function extractBrandAssets() {
   const assets = [];
   const dirs = [
@@ -292,12 +276,26 @@ function extractBrandAssets() {
     path.join(PROJECT_ROOT, "src", "images"),
   ];
   for (const dir of dirs) {
-    if (!fs.existsSync(dir)) continue;
+    const relDir = path.relative(PROJECT_ROOT, dir).replace(/\\/g, "/");
     const files = getFilesByExtension(dir, BRAND_EXTENSIONS, PROJECT_ROOT);
     for (const filePath of files) {
       const baseName = path.basename(filePath);
-      const type = /favicon|\.ico$/i.test(baseName) ? "favicon" : BRAND_KEYWORDS.test(baseName) ? (baseName.match(/logo|brand|emblem|mark/i) ? "logo" : "icon") : "asset";
-      assets.push({ path: filePath, name: baseName, type, previewUrl: `/api/vds-asset?path=${encodeURIComponent(filePath)}` });
+      if (!BRAND_KEYWORDS.test(baseName)) continue;
+      const type = /favicon|\.ico$/i.test(baseName) ? "favicon" : /logo|brand|emblem|mark/i.test(baseName) ? "logo" : "icon";
+      assets.push({ path: filePath, name: baseName, type });
+    }
+  }
+  // Fallback: if no branded assets found by keyword, include all image files from src/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));
+      for (const img of allImages) {
+        if (!assets.some((r) => r.path === "src/assets/" + img)) {
+          assets.push({ type: "asset", path: "src/assets/" + img, name: img });
+        }
+      }
     }
   }
   return assets;
@@ -353,14 +351,6 @@ function humanizeName(filePath) {
   return base.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
 }
 
-/** Normalize component source for storage: consistent newlines, collapse excess blank lines, trim. */
-function cleanRawCode(raw) {
-  if (typeof raw !== "string") return "";
-  let s = raw.replace(/\r\n/g, "\n").replace(/\r/g, "\n").trim();
-  s = s.replace(/\n{3,}/g, "\n\n");
-  return s;
-}
-
 function extractTailwindTokens(content) {
   const tokens = new Set();
   const patterns = [
@@ -385,42 +375,6 @@ function extractTailwindTokens(content) {
   return [...tokens].sort();
 }
 
-const TAILWIND_CATEGORIES = [
-  { tag: "Spacing", test: (c) => /^(p|m|gap|space|w|h|min-|max-|size)-|padding|margin/.test(c) || /^inset-|top-|left-|right-|bottom-/.test(c) },
-  { tag: "Colors", test: (c) => /^(bg|text|border|ring|from|to|via|fill|stroke|decoration|divide|placeholder)-/.test(c) || /^outline-/.test(c) },
-  { tag: "Layout", test: (c) => /^(flex|grid|block|inline|hidden|visible|overflow|float|clear|object-|aspect-)/.test(c) || /^container|box-/.test(c) },
-  { tag: "Typography", test: (c) => /^(text|font|leading|tracking|italic|not-italic|antialiased|subpixel)/.test(c) || /^truncate|break-|whitespace-|underline|line-through/.test(c) },
-  { tag: "Effects", test: (c) => /^(shadow|opacity|mix-blend|bg-blend)/.test(c) },
-  { tag: "Borders", test: (c) => /^(border|rounded|ring-|outline)/.test(c) },
-  { tag: "Transitions", test: (c) => /^(transition|duration|ease|animate|delay)/.test(c) },
-  { tag: "Interactivity", test: (c) => /^(cursor|pointer-events|resize|scroll|snap)/.test(c) || /^hover:|focus:|active:|disabled:/.test(c) },
-  { tag: "Responsive", test: (c) => /^(sm|md|lg|xl|2xl):/.test(c) },
-  { tag: "Position", test: (c) => /^(relative|absolute|fixed|sticky)/.test(c) },
-];
-
-function categorizeTailwindTokens(tokens) {
-  const byCategory = {};
-  const tags = new Set();
-  for (const token of tokens) {
-    let matched = false;
-    for (const { tag, test } of TAILWIND_CATEGORIES) {
-      if (test(token)) {
-        tags.add(tag);
-        if (!byCategory[tag]) byCategory[tag] = [];
-        byCategory[tag].push(token);
-        matched = true;
-        break;
-      }
-    }
-    if (!matched) {
-      tags.add("Other");
-      if (!byCategory.Other) byCategory.Other = [];
-      byCategory.Other.push(token);
-    }
-  }
-  return { tags: [...tags].sort(), byCategory };
-}
-
 /** 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*\)/) ||
@@ -466,83 +420,6 @@ function parseCssVarBlock(block) {
   return out;
 }
 
-/** Default Tailwind theme values when project has none (no placeholders). */
-const DEFAULT_TAILWIND = {
-  spacing: {
-    0: "0", 0.5: "0.125rem", 1: "0.25rem", 1.5: "0.375rem", 2: "0.5rem", 2.5: "0.625rem",
-    3: "0.75rem", 3.5: "0.875rem", 4: "1rem", 5: "1.25rem", 6: "1.5rem", 7: "1.75rem",
-    8: "2rem", 9: "2.25rem", 10: "2.5rem", 11: "2.75rem", 12: "3rem", 14: "3.5rem",
-    16: "4rem", 20: "5rem", 24: "6rem", 28: "7rem", 32: "8rem", 36: "9rem", 40: "10rem",
-    44: "11rem", 48: "12rem", 52: "13rem", 56: "14rem", 60: "15rem", 64: "16rem",
-    72: "18rem", 80: "20rem", 96: "24rem", px: "1px",
-  },
-  borderRadius: {
-    none: "0", sm: "0.125rem", DEFAULT: "0.25rem", md: "0.375rem", lg: "0.5rem",
-    xl: "0.75rem", "2xl": "1rem", "3xl": "1.5rem", full: "9999px",
-  },
-  boxShadow: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-  },
-  transitionDuration: { DEFAULT: "150ms", 75: "75ms", 100: "100ms", 150: "150ms", 200: "200ms", 300: "300ms", 500: "500ms", 700: "700ms", 1000: "1000ms" },
-  transitionTimingFunction: { DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)", linear: "linear", in: "cubic-bezier(0.4, 0, 1, 1)", out: "cubic-bezier(0, 0, 0.2, 1)", "in-out": "cubic-bezier(0.4, 0, 0.2, 1)" },
-  animation: { DEFAULT: "none" },
-};
-
-/** Extract a single theme block (e.g. borderRadius: { lg: "..." }) from config text. Handles nested braces. */
-function extractThemeBlock(content, key) {
-  const keyRe = new RegExp(`${key}\\s*:\\s*\\{`, "g");
-  const m = keyRe.exec(content);
-  if (!m) return null;
-  let start = m.index + m[0].length;
-  let depth = 1;
-  let i = start;
-  while (i < content.length && depth > 0) {
-    if (content[i] === "{") depth++;
-    else if (content[i] === "}") depth--;
-    i++;
-  }
-  const block = content.slice(start, i - 1);
-  const out = {};
-  const pairRe = /(\w+):\s*["']([^"']*)["']/g;
-  let pm;
-  while ((pm = pairRe.exec(block)) !== null) out[pm[1]] = pm[2].trim();
-  if (Object.keys(out).length === 0) {
-    const fallbackRe = /(\w+):\s*([^,}\n]+)/g;
-    while ((pm = fallbackRe.exec(block)) !== null) out[pm[1]] = pm[2].trim().replace(/^["']|["']$/g, "");
-  }
-  return Object.keys(out).length ? out : null;
-}
-
-/** Parse tailwind.config.js/ts/mjs as raw text to extract theme.extend (and theme) for radius, shadows, motion. */
-function parseTailwindConfigRaw(content) {
-  const out = { borderRadius: {}, boxShadow: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {}, spacing: {}, screens: {} };
-  const normalized = content.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
-  const extendMatch = normalized.match(/extend\s*:\s*\{/);
-  const themeMatch = normalized.match(/theme\s*:\s*\{/);
-  const searchStart = extendMatch ? normalized.indexOf("extend") : themeMatch ? normalized.indexOf("theme") : 0;
-  const slice = searchStart ? normalized.slice(searchStart) : normalized;
-  const br = extractThemeBlock(slice, "borderRadius");
-  if (br) out.borderRadius = br;
-  const bs = extractThemeBlock(slice, "boxShadow");
-  if (bs) out.boxShadow = bs;
-  const td = extractThemeBlock(slice, "transitionDuration");
-  if (td) out.transitionDuration = td;
-  const ttf = extractThemeBlock(slice, "transitionTimingFunction");
-  if (ttf) out.transitionTimingFunction = ttf;
-  const anim = extractThemeBlock(slice, "animation");
-  if (anim) out.animation = anim;
-  const sp = extractThemeBlock(slice, "spacing");
-  if (sp) out.spacing = sp;
-  const scr = extractThemeBlock(slice, "screens");
-  if (scr) out.screens = scr;
-  return out;
-}
-
 /** Resolve Tailwind theme for boxShadow, spacing, screens, zIndex, motion. Uses resolveConfig when available. */
 function getTailwindTheme() {
   const empty = { shadows: {}, spacing: {}, breakpoints: {}, zIndex: {}, transitionDuration: {}, transitionTimingFunction: {}, animation: {} };
@@ -560,14 +437,13 @@ function getTailwindTheme() {
     }
     const resolved = resolveConfig(config);
     const theme = resolved.theme || {};
-    const extend = theme.extend || {};
-    const boxShadow = extend.boxShadow ?? theme.boxShadow;
-    const spacing = extend.spacing ?? theme.spacing;
-    const screens = extend.screens ?? theme.screens;
-    const zIndex = extend.zIndex ?? theme.zIndex;
-    const transitionDuration = extend.transitionDuration ?? theme.transitionDuration;
-    const transitionTimingFunction = extend.transitionTimingFunction ?? theme.transitionTimingFunction;
-    const animation = extend.animation ?? theme.animation;
+    const boxShadow = theme.boxShadow;
+    const spacing = theme.spacing;
+    const screens = theme.screens;
+    const zIndex = theme.zIndex;
+    const transitionDuration = theme.transitionDuration;
+    const transitionTimingFunction = theme.transitionTimingFunction;
+    const animation = theme.animation;
     const toObj = (v) => (v && typeof v === "object" && !Array.isArray(v) ? v : {});
     return {
       shadows: toObj(boxShadow),
@@ -589,7 +465,6 @@ function extractFoundations() {
   const typography = {};
   const cssRadiusVars = {};
   const borderRadiusScale = {};
-  const cssByPrefix = { radius: {}, spacing: {}, border: {}, shadows: {}, motion: {} };
   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");
@@ -603,30 +478,10 @@ function extractFoundations() {
       if (rootMatch) {
         const rootVars = parseCssVarBlock(rootMatch[1]);
         for (const [name, value] of Object.entries(rootVars)) {
-          const norm = name.toLowerCase();
-          if (norm.startsWith("radius") || norm === "radius") {
-            cssByPrefix.radius[name] = value;
-          } else if (norm.startsWith("spacing") || norm.startsWith("space")) {
-            cssByPrefix.spacing[name] = value;
-          } else if (norm.startsWith("border")) {
-            cssByPrefix.border[name] = value;
-          } else if (norm.startsWith("shadow")) {
-            cssByPrefix.shadows[name] = value;
-          } else if (norm.startsWith("font") || norm.startsWith("line-height") || norm.startsWith("font-weight") || norm.startsWith("letter-spacing")) {
-            typography[name] = value;
-          } else if (norm.startsWith("color")) {
-            if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
-              const hsl = `hsl(${value})`;
-              colors[name] = { value: hsl, hex: hslToHex(hsl) || hsl };
-            } else {
-              colors[name] = { value, hex: value };
-            }
-          } else if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
+          if (/\d+\s+\d+%/.test(value) || /\d+%/.test(value)) {
             const hsl = `hsl(${value})`;
             colors[name] = { value: hsl, hex: hslToHex(hsl) || hsl };
-          } else if (/^\d+(\.\d+)?(ms|s)$/.test(value) || /ease|linear|cubic/.test(value)) {
-            cssByPrefix.motion[name] = value;
-          } else if (/rem|px|em|calc/.test(value)) {
+          } else if (/rem|px/.test(value)) {
             cssRadiusVars[name] = value;
           } else {
             colors[name] = { value, hex: value };
@@ -646,190 +501,125 @@ function extractFoundations() {
         }
       }
 
-      const bodyBlock = css.match(/body\s*\{([^}]*)\}/);
-      if (bodyBlock) {
-        const bodyProps = bodyBlock[1];
-        const ff = bodyProps.match(/font-family:\s*([^;]+);/);
-        if (ff) typography.bodyFontFamily = ff[1].trim();
-        const lh = bodyProps.match(/line-height:\s*([^;]+);/);
-        if (lh) typography.bodyLineHeight = lh[1].trim();
-        const fw = bodyProps.match(/font-weight:\s*([^;]+);/);
-        if (fw) typography.bodyFontWeight = fw[1].trim();
-        const ls = bodyProps.match(/letter-spacing:\s*([^;]+);/);
-        if (ls) typography.bodyLetterSpacing = ls[1].trim();
-      }
       const bodyMatch = css.match(/body\s*\{[^}]*font-family:\s*([^;]+);/);
-      if (bodyMatch) typography.body = typography.body || bodyMatch[1].trim();
+      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 (_) {}
 
-  const twPaths = [
-    path.join(PROJECT_ROOT, "tailwind.config.ts"),
-    path.join(PROJECT_ROOT, "tailwind.config.js"),
-    path.join(PROJECT_ROOT, "tailwind.config.mjs"),
-  ];
-  let rawParsed = null;
-  for (const twFile of twPaths) {
+  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 (_) {}
+
+  // Fallback: if no CSS variable colors found, extract hardcoded colors from component files
+  if (Object.keys(colors).length === 0) {
+    const hardcodedColors = new Map();
+    const srcFiles = getAllTsxJsxInDir(SRC_DIR);
+    for (const f of srcFiles) {
       try {
-        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*["']?([^"',}\n]+)["']?/g;
-          let m2;
-          while ((m2 = brRe.exec(body)) !== null) borderRadiusScale[m2[1]] = m2[2].trim();
+        const fullPath = path.join(SRC_DIR, f);
+        const content = fs.readFileSync(fullPath, "utf-8");
+        const matches = content.matchAll(/(bg|text|border|from|to|via|ring|fill|stroke|shadow|outline|accent|divide|decoration|placeholder)-\[#([0-9a-fA-F]{3,8})\]/g);
+        for (const m of matches) {
+          const hex = "#" + m[2].toLowerCase();
+          if (!hardcodedColors.has(hex)) {
+            hardcodedColors.set(hex, { usages: new Set(), count: 0 });
+          }
+          hardcodedColors.get(hex).usages.add(m[1]);
+          hardcodedColors.get(hex).count++;
         }
-        rawParsed = parseTailwindConfigRaw(tw);
-        break;
       } catch (_) {}
     }
+    const sorted = [...hardcodedColors.entries()].sort((a, b) => b[1].count - a[1].count);
+    for (const [hex, info] of sorted) {
+      const primaryUsage = [...info.usages][0];
+      const name = `color-${primaryUsage}-${hex.slice(1)}`;
+      colors[name] = { value: hex, hex };
+    }
   }
 
   const radius = {};
   if (cssRadiusVars.radius) radius.base = cssRadiusVars.radius;
-  for (const [k, v] of Object.entries(cssRadiusVars)) {
-    if (k !== "_motion" && k !== "radius" && /radius|rounded/.test(k)) radius[k] = v;
-  }
-  for (const [k, v] of Object.entries(cssByPrefix.radius)) radius[k] = v;
   if (Object.keys(borderRadiusScale).length > 0) radius.borderRadius = borderRadiusScale;
-  if (rawParsed && Object.keys(rawParsed.borderRadius || {}).length > 0) {
-    radius.borderRadius = { ...radius.borderRadius, ...rawParsed.borderRadius };
-  }
-
   const foundationsColors = { ...colors };
   if (Object.keys(colorsDark).length > 0) foundationsColors._dark = colorsDark;
 
+  // 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 cssPath = path.join(PROJECT_ROOT, cssFile);
+      if (!fs.existsSync(cssPath)) continue;
+      try {
+        const cssContent = fs.readFileSync(cssPath, "utf-8");
+        const fontImports = cssContent.matchAll(/@import\s+url\(['"]?https:\/\/fonts\.googleapis\.com\/css2\?family=([^&'"]+)/g);
+        const families = [];
+        for (const m of fontImports) {
+          const family = decodeURIComponent(m[1]).replace(/\+/g, " ").split(":")[0];
+          families.push(family);
+        }
+        if (families.length > 0) {
+          typography.body = families[0] + ", sans-serif";
+          typography.fontFamilies = families;
+          if (families.length > 1) typography.headingFont = families.find((f) => f !== families[0]) || families[1];
+          break;
+        }
+      } catch (_) {}
+    }
+  }
+
   const twTheme = getTailwindTheme();
   const normalizeThemeObj = (obj) => {
     if (!obj || typeof obj !== "object") return {};
     const out = {};
     for (const [k, v] of Object.entries(obj)) {
-      if (v !== undefined && v !== null && k !== "_placeholder") out[k] = typeof v === "string" ? v : String(v);
+      if (v !== undefined && v !== null) out[k] = typeof v === "string" ? v : String(v);
     }
     return out;
   };
-
-  let shadows = {
-    ...normalizeThemeObj(rawParsed?.boxShadow),
-    ...normalizeThemeObj(twTheme.shadows),
-    ...cssByPrefix.shadows,
-  };
-  if (Object.keys(shadows).length === 0) shadows = DEFAULT_TAILWIND.boxShadow;
-
-  const motionFromCss = cssByPrefix.motion || {};
-  let transitionDuration = {
-    ...normalizeThemeObj(rawParsed?.transitionDuration),
-    ...normalizeThemeObj(twTheme.transitionDuration),
-    ...(Object.keys(motionFromCss).length ? { _cssVars: motionFromCss } : {}),
-  };
-  if (Object.keys(transitionDuration).length === 0) transitionDuration = DEFAULT_TAILWIND.transitionDuration;
-  let transitionTimingFunction = {
-    ...normalizeThemeObj(rawParsed?.transitionTimingFunction),
-    ...normalizeThemeObj(twTheme.transitionTimingFunction),
-  };
-  if (Object.keys(transitionTimingFunction).length === 0) transitionTimingFunction = DEFAULT_TAILWIND.transitionTimingFunction;
-  let animation = {
-    ...normalizeThemeObj(rawParsed?.animation),
-    ...normalizeThemeObj(twTheme.animation),
-  };
-  if (Object.keys(animation).length === 0) animation = DEFAULT_TAILWIND.animation;
-
-  let spacing = Object.keys(normalizeThemeObj(rawParsed?.spacing)).length
-    ? { ...normalizeThemeObj(rawParsed.spacing), ...normalizeThemeObj(twTheme.spacing) }
-    : normalizeThemeObj(twTheme.spacing);
-  if (Object.keys(spacing).length === 0) spacing = DEFAULT_TAILWIND.spacing;
-  spacing = { ...spacing, ...cssByPrefix.spacing };
-
-  const border = Object.keys(cssByPrefix.border).length ? cssByPrefix.border : null;
-
   return {
     colors: foundationsColors,
     typography,
     radius,
-    shadows,
-    spacing,
-    breakpoints: Object.keys(normalizeThemeObj(rawParsed?.screens)).length
-      ? { ...normalizeThemeObj(rawParsed.screens), ...normalizeThemeObj(twTheme.breakpoints) }
-      : normalizeThemeObj(twTheme.breakpoints),
+    shadows: normalizeThemeObj(twTheme.shadows),
+    spacing: normalizeThemeObj(twTheme.spacing),
+    breakpoints: normalizeThemeObj(twTheme.breakpoints),
     zIndex: normalizeThemeObj(twTheme.zIndex),
-    ...(border ? { border } : {}),
     motion: {
-      transitionDuration,
-      transitionTimingFunction,
-      animation,
+      transitionDuration: normalizeThemeObj(twTheme.transitionDuration),
+      transitionTimingFunction: normalizeThemeObj(twTheme.transitionTimingFunction),
+      animation: normalizeThemeObj(twTheme.animation),
     },
   };
 }
 
-/** Resolve a Tailwind utility class to its theme value (e.g. rounded-md → 0.375rem). */
-function resolveClassToValue(className, foundations) {
-  if (!foundations || typeof className !== "string") return null;
-  const parts = className.split("-");
-  if (parts.length < 2) return null;
-  const spacingKeys = ["p", "m", "px", "py", "pt", "pr", "pb", "pl", "gap", "w", "h", "min-w", "min-h", "max-w", "max-h", "top", "right", "bottom", "left", "space-x", "space-y"];
-  const spacing = foundations.spacing || DEFAULT_TAILWIND.spacing;
-  const radius = foundations.radius?.borderRadius || foundations.radius || DEFAULT_TAILWIND.borderRadius;
-  const shadows = foundations.shadows || DEFAULT_TAILWIND.boxShadow;
-  const motionDuration = foundations.motion?.transitionDuration || DEFAULT_TAILWIND.transitionDuration;
-  const motionEasing = foundations.motion?.transitionTimingFunction || DEFAULT_TAILWIND.transitionTimingFunction;
-
-  if (parts[0] === "rounded") {
-    const key = parts.length >= 2 ? parts.slice(1).join("-") : "DEFAULT";
-    const v = radius[key];
-    return v != null ? v : null;
-  }
-  if (parts[0] === "shadow") {
-    const key = parts.length === 2 ? "DEFAULT" : parts[1];
-    const v = shadows[key];
-    return v != null ? v : null;
-  }
-  if (spacingKeys.some((pre) => className === pre || className.startsWith(pre + "-"))) {
-    const last = parts[parts.length - 1];
-    const v = spacing[last];
-    if (v != null) return v;
-    return null;
-  }
-  if (parts[0] === "duration") {
-    const key = parts[1] || "DEFAULT";
-    return motionDuration[key] ?? null;
-  }
-  if (parts[0] === "ease") {
-    const key = parts[1] || "DEFAULT";
-    return motionEasing[key] ?? null;
-  }
-  return null;
-}
-
-function buildResolvedSpecs(tokens, foundations) {
-  if (!Array.isArray(tokens) || !foundations) return [];
-  const out = [];
-  for (const t of tokens) {
-    const value = resolveClassToValue(t, foundations);
-    if (value != null) out.push({ class: t, value });
-  }
-  return out;
-}
-
 function scan() {
-  const pkgVersion = getVdsPackageVersion();
-  if (pkgVersion) console.log("[VDS] vibe-design-system v" + pkgVersion);
   if (!fs.existsSync(COMPONENTS_DIR)) {
     console.error(CLI_LOCALES[CLI_LOCALE].componentsNotFound);
     process.exit(1);
@@ -854,26 +644,11 @@ function scan() {
       description = "";
     }
     const tokens = extractTailwindTokens(content);
-    const { tags: tokenTags, byCategory: tokenCategories } = categorizeTailwindTokens(tokens);
-    results.push({
-      file: rel,
-      name,
-      group,
-      category,
-      description,
-      tokens,
-      tokenTags,
-      tokenCategories,
-      componentRender: true,
-      rawCode: cleanRawCode(content),
-    });
+    results.push({ file: rel, name, group, category, description, tokens });
   }
   const foundations = extractFoundations();
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
-  for (const r of results) {
-    r.resolvedSpecs = buildResolvedSpecs(r.tokens, foundations);
-  }
   const output = {
     branch: getGitBranch(),
     engineer: getGitEngineer(),
@@ -923,7 +698,7 @@ function loadVdsOutputFromBranch(branch) {
 }
 
 function componentSignature(c) {
-  return JSON.stringify({ name: c.name, group: c.group, category: c.category, tokenTags: (c.tokenTags || []).slice().sort(), tokens: (c.tokens || []).slice().sort() });
+  return JSON.stringify({ name: c.name, group: c.group, category: c.category, tokens: (c.tokens || []).slice().sort() });
 }
 
 function runCompare() {
@@ -1008,8 +783,6 @@ if (isCompare) {
     }
     scan();
     console.log("[VDS] Watch: src/components (.tsx, .jsx). Scan complete.");
-    const v = getVdsPackageVersion();
-    if (v) console.log("[VDS] vibe-design-system v" + v);
     const url = vdsDashboardUrl();
     console.log("[VDS] Dashboard: " + formatClickableLink(url) + "\n");
   }

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

@@ -42,6 +42,12 @@ const SKIP_LIST = [
   "InputOtp",
   "Resizable",
   "Sonner",
+  "ImageWithFallback",
+  "ConnectionLines",
+  "ScrollToTop",
+  "Form",
+  "Toaster",
+  "Toast",
 ];
 
 /** shadcn/ui composite component recipes: component name → imports + render. */
@@ -215,35 +221,32 @@ const RECIPES = {
     )`,
   },
   Checkbox: {
-    extraImports: [{ from: "@/components/ui/label", names: ["Label"] }],
     render: `(args) => (
       <div className="flex items-center space-x-2">
         <ComponentRef id="terms" {...args} />
-        <Label htmlFor="terms">Accept terms</Label>
+        <label htmlFor="terms" className="text-sm font-medium">Accept terms</label>
       </div>
     )`,
   },
   Switch: {
-    extraImports: [{ from: "@/components/ui/label", names: ["Label"] }],
     render: `(args) => (
       <div className="flex items-center space-x-2">
         <ComponentRef id="switch" {...args} />
-        <Label htmlFor="switch">Enable notifications</Label>
+        <label htmlFor="switch" className="text-sm font-medium">Enable notifications</label>
       </div>
     )`,
   },
   RadioGroup: {
     imports: ["RadioGroupItem"],
-    extraImports: [{ from: "@/components/ui/label", names: ["Label"] }],
     render: `(args) => (
       <ComponentRef className="flex flex-col space-y-2" {...args}>
         <div className="flex items-center space-x-2">
           <RadioGroupItem value="comfortable" id="comfortable" />
-          <Label htmlFor="comfortable">Comfortable</Label>
+          <label htmlFor="comfortable" className="text-sm font-medium">Comfortable</label>
         </div>
         <div className="flex items-center space-x-2">
           <RadioGroupItem value="compact" id="compact" />
-          <Label htmlFor="compact">Compact</Label>
+          <label htmlFor="compact" className="text-sm font-medium">Compact</label>
         </div>
       </ComponentRef>
     )`,
@@ -276,12 +279,42 @@ const RECIPES = {
       </ComponentRef>
     )`,
   },
+  Command: {
+    imports: ["CommandInput", "CommandList", "CommandEmpty", "CommandGroup", "CommandItem"],
+    render: `(args) => (
+      <ComponentRef className="rounded-lg border shadow-md" {...args}>
+        <CommandInput placeholder="Type a command..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem>Calendar</CommandItem>
+            <CommandItem>Search</CommandItem>
+            <CommandItem>Settings</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </ComponentRef>
+    )`,
+  },
+  Carousel: {
+    imports: ["CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext"],
+    render: `(args) => (
+      <ComponentRef className="w-full max-w-xs" {...args}>
+        <CarouselContent>
+          <CarouselItem><div className="p-4 text-center border rounded">Slide 1</div></CarouselItem>
+          <CarouselItem><div className="p-4 text-center border rounded">Slide 2</div></CarouselItem>
+          <CarouselItem><div className="p-4 text-center border rounded">Slide 3</div></CarouselItem>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </ComponentRef>
+    )`,
+  },
   Collapsible: {
     imports: ["CollapsibleTrigger", "CollapsibleContent"],
     render: `(args) => (
       <ComponentRef {...args}>
-        <CollapsibleTrigger asChild><button>Toggle</button></CollapsibleTrigger>
-        <CollapsibleContent>Collapsible content here.</CollapsibleContent>
+        <CollapsibleTrigger asChild><button className="text-sm font-medium">Toggle content</button></CollapsibleTrigger>
+        <CollapsibleContent className="mt-2 p-2 border rounded">Hidden content revealed.</CollapsibleContent>
       </ComponentRef>
     )`,
   },