sonance-brand-mcp 1.3.15 → 1.3.17

package/dist/assets/dev-tools/utils.ts

@@ -0,0 +1,360 @@
+
+import { 
+  ComponentStyle, 
+  ConfigSection 
+} from "./types";
+import { 
+  SONANCE_PREVIEW_STYLE_ID, 
+  TAILWIND_TO_CSS, 
+  TARGETABLE_CATEGORIES, 
+  COMPONENT_CONFIG_MAP 
+} from "./constants";
+import { componentSnippets } from "../../lib/brand-system";
+
+/**
+ * Generate CSS from component overrides
+ * Uses attribute selectors to target specific components
+ * Text color cascades to ALL descendants to override nested styles
+ */
+export function generateComponentCSS(overrides: Record<string, ComponentStyle>): string {
+  const rules: string[] = [];
+  
+  for (const [key, styles] of Object.entries(overrides)) {
+    const containerDeclarations: string[] = [];
+    const textDeclarations: string[] = [];
+    
+    // Parse key to see if it's a variant override
+    // format: "componentName" or "componentName:variantId"
+    const [componentName, variantId] = key.split(':');
+    
+    // Construct selector
+    // If variantId exists, target specific variant. Otherwise target all components of this type.
+    const selector = variantId 
+      ? `[data-sonance-name="${componentName}"][data-sonance-variant="${variantId}"]`
+      : `[data-sonance-name="${componentName}"]`;
+    
+    // Container-level styles
+    if (styles.backgroundColor) {
+      containerDeclarations.push(`background-color: ${styles.backgroundColor} !important`);
+    }
+    if (styles.borderRadius) {
+      containerDeclarations.push(`border-radius: ${styles.borderRadius} !important`);
+    }
+    if (styles.borderColor) {
+      containerDeclarations.push(`border-color: ${styles.borderColor} !important`);
+    }
+    
+    // Text styles - need to cascade to ALL children
+    if (styles.textColor) {
+      textDeclarations.push(`color: ${styles.textColor} !important`);
+    }
+    if (styles.fontWeight) {
+      textDeclarations.push(`font-weight: ${styles.fontWeight} !important`);
+    }
+    
+    // Container styles on the element itself
+    if (containerDeclarations.length > 0) {
+      rules.push(`${selector} { ${containerDeclarations.join("; ")}; }`);
+    }
+    
+    // Text styles on the element AND all descendants (to override child text styles)
+    if (textDeclarations.length > 0) {
+      // Apply to container itself
+      rules.push(`${selector} { ${textDeclarations.join("; ")}; }`);
+      // Apply to ALL descendants (p, span, h1-h6, a, etc.)
+      rules.push(`${selector} * { ${textDeclarations.join("; ")}; }`);
+    }
+    
+    // Also handle generic element names (e.g., "button" without specific type)
+    if (componentName.includes("-")) {
+      const genericName = componentName.split("-")[0];
+      const genericSelector = `[data-sonance-name="${genericName}"]`;
+      
+      if (containerDeclarations.length > 0) {
+        rules.push(`${genericSelector} { ${containerDeclarations.join("; ")}; }`);
+      }
+      if (textDeclarations.length > 0) {
+        rules.push(`${genericSelector} { ${textDeclarations.join("; ")}; }`);
+        rules.push(`${genericSelector} * { ${textDeclarations.join("; ")}; }`);
+      }
+    }
+  }
+  
+  return rules.join("\n");
+}
+
+/**
+ * Inject or update preview styles in the document head
+ */
+export function injectPreviewStyles(css: string): void {
+  if (typeof document === "undefined") return;
+  
+  let styleEl = document.getElementById(SONANCE_PREVIEW_STYLE_ID) as HTMLStyleElement | null;
+  
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = SONANCE_PREVIEW_STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  
+  styleEl.textContent = css;
+}
+
+/**
+ * Remove preview styles from the document
+ */
+export function removePreviewStyles(): void {
+  if (typeof document === "undefined") return;
+
+  const styleEl = document.getElementById(SONANCE_PREVIEW_STYLE_ID);
+  if (styleEl) {
+    styleEl.remove();
+  }
+}
+
+/**
+ * Convert a single Tailwind class to CSS
+ */
+export function tailwindClassToCSS(className: string): string {
+  // Handle hover/focus variants
+  const isHover = className.startsWith("hover:");
+  const isFocus = className.startsWith("focus:");
+  const baseClass = className.replace(/^(hover:|focus:)/, "");
+
+  let css = "";
+
+  for (const [prefix, converter] of Object.entries(TAILWIND_TO_CSS)) {
+    if (baseClass.startsWith(prefix)) {
+      const value = baseClass.slice(prefix.length);
+      css = converter(value);
+      break;
+    }
+    // Handle exact matches (like "shadow" without suffix)
+    if (baseClass === prefix.replace(/-$/, "")) {
+      css = converter("");
+      break;
+    }
+  }
+
+  return css;
+}
+
+/**
+ * Extract new Tailwind classes from modified code and convert to CSS
+ * Compares original and modified className strings
+ */
+export function extractPreviewCSSFromCode(
+  originalCode: string,
+  modifiedCode: string,
+  componentType: string,
+  variantId?: string | null
+): string {
+  // Extract all className strings from both versions
+  const classNameRegex = /className\s*=\s*["'`]([^"'`]+)["'`]/g;
+  const cnRegex = /cn\s*\(\s*["'`]([^"'`]+)["'`]/g;
+
+  const extractClasses = (code: string): Set<string> => {
+    const classes = new Set<string>();
+    let match;
+
+    // Match className="..."
+    while ((match = classNameRegex.exec(code)) !== null) {
+      match[1].split(/\s+/).forEach(c => classes.add(c));
+    }
+    classNameRegex.lastIndex = 0;
+
+    // Match cn("...")
+    while ((match = cnRegex.exec(code)) !== null) {
+      match[1].split(/\s+/).forEach(c => classes.add(c));
+    }
+    cnRegex.lastIndex = 0;
+
+    return classes;
+  };
+
+  const originalClasses = extractClasses(originalCode);
+  const modifiedClasses = extractClasses(modifiedCode);
+
+  // Extract variant-specific conditional classes from modified code
+  // Matches patterns like: variant === "variant-7cea9f37" && "bg-white border-gray-300..."
+  // Also catches the short variantId (without "variant-" prefix)
+  let variantSpecificClasses: string[] = [];
+  if (variantId) {
+    // Try to match with full variant ID or just the hash part
+    // Note: We avoid backticks in patterns due to template literal parsing issues
+    const patterns = [
+      // Pattern: variant === "variant-7cea9f37" && "classes..."
+      new RegExp('variant\\s*===\\s*["\']variant-' + variantId + '["\']\\s*&&\\s*["\']([^"\']+)["\']', "g"),
+      // Pattern: variant === "7cea9f37" && "classes..."
+      new RegExp('variant\\s*===\\s*["\']' + variantId + '["\']\\s*&&\\s*["\']([^"\']+)["\']', "g"),
+    ];
+    
+    for (const regex of patterns) {
+      let match;
+      while ((match = regex.exec(modifiedCode)) !== null) {
+        const classes = match[1].split(/\s+/).filter(c => c.length > 0);
+        variantSpecificClasses = [...variantSpecificClasses, ...classes];
+      }
+    }
+    
+    // Also try to find classes added in conditional blocks referencing our variant
+    // This catches cases where the exact pattern varies
+    const loosePattern = new RegExp('["\']variant-' + variantId + '["\'][^}]*["\']([^"\']{10,})["\']', "g");
+    let looseMatch;
+    while ((looseMatch = loosePattern.exec(modifiedCode)) !== null) {
+      // Extract potential Tailwind classes (words with hyphens, common patterns)
+      const potentialClasses = looseMatch[1].split(/\s+/).filter(c => 
+        c.length > 0 && 
+        (c.includes("-") || /^(bg|text|border|rounded|p|m|flex|grid|w|h|font|shadow|opacity|transition|hover|focus)/.test(c))
+      );
+      variantSpecificClasses = [...variantSpecificClasses, ...potentialClasses];
+    }
+    
+    // Deduplicate
+    variantSpecificClasses = [...new Set(variantSpecificClasses)];
+  }
+
+  // Find new classes (in modified but not in original)
+  const newClasses = [...modifiedClasses].filter(c => !originalClasses.has(c));
+
+  if (newClasses.length === 0 && variantSpecificClasses.length === 0) {
+    return "";
+  }
+
+  // Convert new classes to CSS
+  const normalRules: string[] = [];
+  const hoverRules: string[] = [];
+  const variantRules: string[] = [];
+
+  // Process standard new classes
+  for (const className of newClasses) {
+    const css = tailwindClassToCSS(className);
+    if (css) {
+      if (className.startsWith("hover:")) {
+        hoverRules.push(css);
+      } else {
+        normalRules.push(css);
+      }
+    }
+  }
+
+  // Process variant-specific classes (force apply to variant)
+  for (const className of variantSpecificClasses) {
+    const css = tailwindClassToCSS(className);
+    if (css) {
+      // For variant-specific, we treat everything as important override
+      variantRules.push(css);
+    }
+  }
+
+  const selector = `[data-sonance-name="${componentType}"]`;
+  const rules: string[] = [];
+
+  if (normalRules.length > 0) {
+    rules.push(`${selector} { ${normalRules.join("; ")} !important; }`);
+  }
+  if (hoverRules.length > 0) {
+    rules.push(`${selector}:hover { ${hoverRules.join("; ")} !important; }`);
+  }
+
+  // Force-apply variant-specific styles to the currently selected variant
+  if (variantId && variantRules.length > 0) {
+    const variantSelector = `[data-sonance-variant="${variantId}"]`;
+    // Apply to the element itself
+    rules.push(`${variantSelector} { ${variantRules.join(" !important; ")} !important; }`);
+    // Also try to apply text colors to children if they are set
+    const textRules = variantRules.filter(r => r.startsWith("color:"));
+    if (textRules.length > 0) {
+      rules.push(`${variantSelector} * { ${textRules.join(" !important; ")} !important; }`);
+    }
+  }
+  
+  // Fallback: if we have a variantId but no variant-specific classes were detected,
+  // AND we have new normal classes, apply those to the variant selector as well
+  // This handles cases where the AI simply added classes without using the variant conditional pattern
+  if (variantId && variantRules.length === 0 && normalRules.length > 0) {
+    const variantSelector = `[data-sonance-variant="${variantId}"]`;
+    rules.push(`${variantSelector} { ${normalRules.join(" !important; ")} !important; }`);
+    // Apply text colors to children
+    const textRules = normalRules.filter(r => r.startsWith("color:"));
+    if (textRules.length > 0) {
+      rules.push(`${variantSelector} * { ${textRules.join(" !important; ")} !important; }`);
+    }
+  }
+
+  // Detect Tailwind data-attribute variants in multiple formats:
+  // Format 1: data-[variant='xxx']:rounded-lg
+  // Format 2: [&[data-variant='xxx']]:rounded-lg (Tailwind parent selector syntax)
+  const patterns = [
+    // Format 1: data-[variant='xxx']:class
+    /data-\[variant=['"]([^'"]+)['"]\]:([a-zA-Z0-9-]+)/g,
+    // Format 2: [&[data-variant='xxx']]:class
+    /\[&\[data-variant=['"]([^'"]+)['"]\]\]:([a-zA-Z0-9-]+)/g,
+  ];
+  
+  for (const pattern of patterns) {
+    let dataMatch;
+    while ((dataMatch = pattern.exec(modifiedCode)) !== null) {
+      const variantValue = dataMatch[1];
+      const tailwindClass = dataMatch[2];
+      const css = tailwindClassToCSS(tailwindClass);
+      if (css) {
+        // Generate CSS selectors that target BOTH:
+        // 1. data-variant (what the AI adds)
+        // 2. data-sonance-variant (what's already on the page from DevTools tagging)
+        // This ensures preview works before saving
+        rules.push(`[data-variant="${variantValue}"] { ${css} !important; }`);
+        rules.push(`[data-sonance-variant="${variantValue}"] { ${css} !important; }`);
+      }
+    }
+  }
+  
+  // Also check if the variantId was passed - apply new classes to it directly
+  // This is a fallback when the AI doesn't use the data-variant pattern
+  if (variantId && rules.length === 0) {
+    // Try to extract any new Tailwind classes and apply to the variant
+    const allNewClasses = [...newClasses, ...variantSpecificClasses];
+    const variantCSS: string[] = [];
+    for (const className of allNewClasses) {
+      const css = tailwindClassToCSS(className);
+      if (css) {
+        variantCSS.push(css);
+      }
+    }
+    if (variantCSS.length > 0) {
+      rules.push(`[data-sonance-variant="${variantId}"] { ${variantCSS.join(" !important; ")} !important; }`);
+    }
+  }
+
+  return rules.join("\n");
+}
+
+// Helper to check if a category should show scope options
+export function shouldShowScopeOptions(category: string): boolean {
+  if (category === "all") return true; // Show for "all" selection
+  const lowerCategory = category.toLowerCase();
+  return TARGETABLE_CATEGORIES.includes(lowerCategory);
+}
+
+/**
+ * Get the visible config sections for a given component type
+ * First checks for specific component ID, then falls back to category
+ */
+export function getVisibleSections(componentType: string): ConfigSection[] {
+  // Check for exact match first (specific component ID)
+  if (COMPONENT_CONFIG_MAP[componentType.toLowerCase()]) {
+    return COMPONENT_CONFIG_MAP[componentType.toLowerCase()];
+  }
+  
+  // Try to find the component's category from snippets
+  const snippet = componentSnippets.find(s => s.id === componentType);
+  if (snippet) {
+    const categoryKey = snippet.category.toLowerCase();
+    if (COMPONENT_CONFIG_MAP[categoryKey]) {
+      return COMPONENT_CONFIG_MAP[categoryKey];
+    }
+  }
+  
+  // Default: show all sections if unknown
+  return ["colors", "radius", "typography"];
+}

package/dist/index.js

@@ -555,6 +555,43 @@ function runDevToolsInstaller() {
         createdFiles.push(`${pathPrefix}theme/sonance-config.json`);
         console.log(`  ✓ Created ${pathPrefix}theme/ with initial files`);
     }
+    // 13. Install brand logos to public/logos/
+    const publicLogosDir = path.join(targetDir, "public/logos");
+    let sourceLogosDir;
+    if (IS_BUNDLED) {
+        sourceLogosDir = path.join(BUNDLED_ASSETS, "logos");
+    }
+    else {
+        sourceLogosDir = path.join(DEV_PROJECT_ROOT, "public/logos");
+    }
+    if (fs.existsSync(sourceLogosDir)) {
+        // Helper to recursively copy directory
+        function copyLogosDir(src, dest, relativePath = "") {
+            if (!fs.existsSync(dest)) {
+                fs.mkdirSync(dest, { recursive: true });
+            }
+            const entries = fs.readdirSync(src, { withFileTypes: true });
+            for (const entry of entries) {
+                const srcPath = path.join(src, entry.name);
+                const destPath = path.join(dest, entry.name);
+                const relPath = relativePath ? `${relativePath}/${entry.name}` : entry.name;
+                if (entry.isDirectory()) {
+                    copyLogosDir(srcPath, destPath, relPath);
+                    createdDirectories.push(`public/logos/${relPath}`);
+                }
+                else if (entry.isFile() && /\.(png|jpg|jpeg|svg|webp)$/i.test(entry.name)) {
+                    fs.copyFileSync(srcPath, destPath);
+                    createdFiles.push(`public/logos/${relPath}`);
+                }
+            }
+        }
+        copyLogosDir(sourceLogosDir, publicLogosDir);
+        createdDirectories.push("public/logos");
+        console.log(`  ✓ Installed brand logos to public/logos/`);
+    }
+    else {
+        console.log(`  ⚠️  Could not find logos source directory`);
+    }
     // Detect user's file paths
     const globalsCssPaths = [
         "src/app/globals.css",
@@ -917,6 +954,237 @@ if (process.argv.includes("uninstall-devtools") || process.argv.includes("--unin
     runDevToolsUninstaller();
     process.exit(0);
 }
+// Check for sync command
+if (process.argv.includes("sync")) {
+    const fullSync = process.argv.includes("--full");
+    runDevToolsSync(fullSync);
+    process.exit(0);
+}
+// Check for watch command
+if (process.argv.includes("watch")) {
+    runDevToolsWatch();
+    // Don't exit - keep watching
+}
+/**
+ * Sync DevTools files to target project without full uninstall/reinstall
+ */
+function runDevToolsSync(fullSync = false) {
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │                                                 │");
+    console.log("  │   🔄  Sonance DevTools - Sync                   │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    const targetDir = process.cwd();
+    const manifestPath = path.join(targetDir, MANIFEST_FILENAME);
+    // Check if manifest exists
+    if (!fs.existsSync(manifestPath)) {
+        console.log("  ❌ No DevTools installation found in this directory.");
+        console.log("     Run 'npx sonance-brand-mcp install-devtools' first.");
+        console.log("");
+        return;
+    }
+    // Read manifest
+    let manifest;
+    try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+    }
+    catch {
+        console.log("  ❌ Could not read manifest file.");
+        return;
+    }
+    console.log(`  📁 Detected structure: ${manifest.structure === "src" ? "src/" : "root"}`);
+    console.log(`  📦 Syncing ${fullSync ? "all files" : "core files only"}...`);
+    console.log("");
+    const baseDir = manifest.structure === "src" ? "src" : "";
+    let syncedCount = 0;
+    let errorCount = 0;
+    // Determine source paths
+    let sourceDevTools;
+    let sourceBrandSystem;
+    let sourceBrandContext;
+    let sourceApiAnalyze;
+    let sourceApiSaveColors;
+    if (IS_BUNDLED) {
+        sourceDevTools = path.join(BUNDLED_ASSETS, "dev-tools");
+        sourceBrandSystem = path.join(BUNDLED_ASSETS, "brand-system.ts");
+        sourceBrandContext = path.join(BUNDLED_ASSETS, "brand-context.tsx");
+        sourceApiAnalyze = path.join(BUNDLED_ASSETS, "api/sonance-analyze/route.ts");
+        sourceApiSaveColors = path.join(BUNDLED_ASSETS, "api/sonance-save-colors/route.ts");
+    }
+    else {
+        sourceDevTools = path.join(DEV_PROJECT_ROOT, "src/components/dev-tools");
+        sourceBrandSystem = path.join(DEV_PROJECT_ROOT, "src/lib/brand-system.ts");
+        sourceBrandContext = path.join(DEV_PROJECT_ROOT, "src/lib/brand-context.tsx");
+        sourceApiAnalyze = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-analyze/route.ts");
+        sourceApiSaveColors = path.join(DEV_PROJECT_ROOT, "src/app/api/sonance-save-colors/route.ts");
+    }
+    // Core files to sync (always synced)
+    const coreFiles = [
+        { src: sourceBrandSystem, dest: path.join(targetDir, baseDir, "lib/brand-system.ts"), name: "brand-system.ts" },
+        { src: sourceBrandContext, dest: path.join(targetDir, baseDir, "lib/brand-context.tsx"), name: "brand-context.tsx" },
+    ];
+    // Sync DevTools directory
+    const devToolsDestDir = path.join(targetDir, baseDir, "components/dev-tools");
+    if (fs.existsSync(sourceDevTools) && fs.existsSync(devToolsDestDir)) {
+        const entries = fs.readdirSync(sourceDevTools, { withFileTypes: true });
+        for (const entry of entries) {
+            if (entry.isFile()) {
+                try {
+                    fs.copyFileSync(path.join(sourceDevTools, entry.name), path.join(devToolsDestDir, entry.name));
+                    console.log(`  ✓ Synced components/dev-tools/${entry.name}`);
+                    syncedCount++;
+                }
+                catch (err) {
+                    console.log(`  ✗ Failed: components/dev-tools/${entry.name}`);
+                    errorCount++;
+                }
+            }
+        }
+    }
+    // Sync core lib files
+    for (const file of coreFiles) {
+        if (fs.existsSync(file.src)) {
+            try {
+                fs.copyFileSync(file.src, file.dest);
+                console.log(`  ✓ Synced lib/${file.name}`);
+                syncedCount++;
+            }
+            catch (err) {
+                console.log(`  ✗ Failed: lib/${file.name}`);
+                errorCount++;
+            }
+        }
+    }
+    // Full sync includes API routes
+    if (fullSync) {
+        const apiFiles = [
+            { src: sourceApiAnalyze, dest: path.join(targetDir, baseDir, "app/api/sonance-analyze/route.ts"), name: "sonance-analyze" },
+        ];
+        // Check if save-colors exists
+        if (fs.existsSync(sourceApiSaveColors)) {
+            apiFiles.push({ src: sourceApiSaveColors, dest: path.join(targetDir, baseDir, "app/api/sonance-save-colors/route.ts"), name: "sonance-save-colors" });
+        }
+        for (const file of apiFiles) {
+            if (fs.existsSync(file.src)) {
+                try {
+                    // Ensure directory exists
+                    const destDir = path.dirname(file.dest);
+                    if (!fs.existsSync(destDir)) {
+                        fs.mkdirSync(destDir, { recursive: true });
+                    }
+                    fs.copyFileSync(file.src, file.dest);
+                    console.log(`  ✓ Synced api/${file.name}/route.ts`);
+                    syncedCount++;
+                }
+                catch (err) {
+                    console.log(`  ✗ Failed: api/${file.name}/route.ts`);
+                    errorCount++;
+                }
+            }
+        }
+    }
+    console.log("");
+    if (errorCount === 0) {
+        console.log(`  ✅ Synced ${syncedCount} file(s) successfully!`);
+    }
+    else {
+        console.log(`  ⚠️  Synced ${syncedCount} file(s), ${errorCount} failed.`);
+    }
+    console.log("");
+    console.log("  💡 Tip: Restart your dev server to pick up changes.");
+    console.log("");
+}
+/**
+ * Watch DevTools source files and auto-sync on changes
+ */
+function runDevToolsWatch() {
+    console.log("");
+    console.log("  ┌─────────────────────────────────────────────────┐");
+    console.log("  │                                                 │");
+    console.log("  │   👁️  Sonance DevTools - Watch Mode             │");
+    console.log("  │                                                 │");
+    console.log("  └─────────────────────────────────────────────────┘");
+    console.log("");
+    const targetDir = process.cwd();
+    const manifestPath = path.join(targetDir, MANIFEST_FILENAME);
+    // Check if manifest exists
+    if (!fs.existsSync(manifestPath)) {
+        console.log("  ❌ No DevTools installation found in this directory.");
+        console.log("     Run 'npx sonance-brand-mcp install-devtools' first.");
+        console.log("");
+        process.exit(1);
+    }
+    // Read manifest
+    let manifest;
+    try {
+        manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+    }
+    catch {
+        console.log("  ❌ Could not read manifest file.");
+        process.exit(1);
+    }
+    console.log(`  📁 Structure: ${manifest.structure === "src" ? "src/" : "root"}`);
+    console.log("  👀 Watching for changes...");
+    console.log("  📝 Press Ctrl+C to stop");
+    console.log("");
+    // Determine what to watch based on environment
+    let watchDir;
+    if (IS_BUNDLED) {
+        console.log("  ⚠️  Watch mode works best in development.");
+        console.log("     For bundled version, use 'sync' command instead.");
+        console.log("");
+        process.exit(0);
+    }
+    else {
+        watchDir = path.join(DEV_PROJECT_ROOT, "src");
+    }
+    // Set up file watcher
+    const watchedPaths = [
+        path.join(watchDir, "components/dev-tools"),
+        path.join(watchDir, "lib/brand-system.ts"),
+        path.join(watchDir, "lib/brand-context.tsx"),
+        path.join(watchDir, "app/api/sonance-analyze"),
+    ];
+    let debounceTimer = null;
+    const handleChange = (eventType, filename) => {
+        // Debounce rapid changes
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+            const timestamp = new Date().toLocaleTimeString();
+            console.log(`  [${timestamp}] 🔄 Change detected${filename ? `: ${filename}` : ""}`);
+            runDevToolsSync(false);
+        }, 300);
+    };
+    // Watch each path
+    for (const watchPath of watchedPaths) {
+        if (fs.existsSync(watchPath)) {
+            try {
+                const stat = fs.statSync(watchPath);
+                if (stat.isDirectory()) {
+                    fs.watch(watchPath, { recursive: true }, handleChange);
+                }
+                else {
+                    fs.watch(watchPath, handleChange);
+                }
+                console.log(`  📂 Watching: ${path.relative(DEV_PROJECT_ROOT, watchPath)}`);
+            }
+            catch (err) {
+                console.log(`  ⚠️  Could not watch: ${watchPath}`);
+            }
+        }
+    }
+    console.log("");
+    // Keep process alive
+    process.on("SIGINT", () => {
+        console.log("");
+        console.log("  👋 Watch mode stopped.");
+        console.log("");
+        process.exit(0);
+    });
+}
 // Resolve paths based on environment
 function getAssetPath(assetType) {
     if (IS_BUNDLED) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.15",
+  "version": "1.3.17",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",