meno-core 1.0.26 → 1.0.28

package/bin/cli.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env bun
+#!/usr/bin/env node
 /**
  * meno CLI
  * Commands: dev, build, init
@@ -8,6 +8,7 @@ import { resolve, join } from 'path';
 import { existsSync, mkdirSync, writeFileSync, cpSync, readFileSync } from 'fs';
 import { setProjectRoot } from '../lib/server/projectContext';
 import { generateBuildErrorPage, type BuildErrorsData } from '../lib/server/ssr/buildErrorOverlay';
+import { createRuntimeServer, serveFile, fileExists as runtimeFileExists } from '../lib/server/runtime';
 
 const args = process.argv.slice(2);
 const command = args[0];
@@ -17,7 +18,7 @@ function printHelp() {
 meno - Visual editor for JSON-based pages
 
 Requirements:
-  - Bun (https://bun.sh)
+  - Bun or Node.js 18+
 
 Usage:
   meno <command> [options]
@@ -100,7 +101,7 @@ async function startStaticServer(distPath: string) {
   // Parse _headers file once on startup
   const headersMap = parseHeadersFile(distPath);
 
-  const server = Bun.serve({
+  const server = await createRuntimeServer({
     port: SERVE_PORT,
     hostname: 'localhost',
     async fetch(req: Request) {
@@ -134,25 +135,20 @@ async function startStaticServer(distPath: string) {
       const filePath = join(distPath, pathname);
 
       // Check if file exists and serve it
-      if (existsSync(filePath)) {
-        const file = Bun.file(filePath);
-        if (await file.exists()) {
-          return new Response(file, { headers: customHeaders });
-        }
+      if (await runtimeFileExists(filePath)) {
+        return await serveFile(filePath, customHeaders);
       }
 
       // Try with .html extension for clean URLs
       const htmlPath = filePath.endsWith('.html') ? filePath : `${filePath}.html`;
-      if (existsSync(htmlPath)) {
-        const file = Bun.file(htmlPath);
-        return new Response(file, { headers: customHeaders });
+      if (await runtimeFileExists(htmlPath)) {
+        return await serveFile(htmlPath, customHeaders);
       }
 
       // Try index.html in directory
       const indexPath = join(filePath, 'index.html');
-      if (existsSync(indexPath)) {
-        const file = Bun.file(indexPath);
-        return new Response(file, { headers: customHeaders });
+      if (await runtimeFileExists(indexPath)) {
+        return await serveFile(indexPath, customHeaders);
       }
 
       return new Response('Not Found', { status: 404 });

package/build-static.ts

@@ -9,6 +9,7 @@ import { writeFile, readFile } from "fs/promises";
 import { join } from "path";
 import type { BuildError, BuildErrorsData } from "./lib/server/ssr/buildErrorOverlay";
 import { createHash } from "crypto";
+import { inspect, minifyJS as runtimeMinifyJS } from './lib/server/runtime';
 import {
   loadJSONFile,
   loadComponentDirectory,
@@ -31,6 +32,8 @@ import { buildItemUrl } from "./lib/shared/itemTemplateUtils";
 import { generateMiddleware, generateTrackFunction, generateResultsFunction } from "./lib/server/ab/generateFunctions";
 import { generateTrackingScript } from "./lib/server/ab/trackingScript";
 import { migrateTemplatesDirectory } from "./lib/server/migrateTemplates";
+import { extractLibraryOrigins, collectComponentLibraries } from "./lib/shared/libraryLoader";
+import type { LibrariesConfig } from "./lib/shared/types/libraries";
 
 /**
  * Collect build errors for error overlay
@@ -78,65 +81,15 @@ export function formatBunLog(log: any): string {
 }
 
 /**
- * Minify JavaScript code using Bun's built-in bundler
+ * Minify JavaScript code using runtime bundler
  * Throws on error instead of silently failing
  */
 async function minifyJS(code: string): Promise<string> {
-  const tempFile = join('/tmp', `meno-minify-${Date.now()}.js`);
-  try {
-    await writeFile(tempFile, code, 'utf-8');
-
-    // Use throw: true to get detailed error information
-    const result = await Bun.build({
-      entrypoints: [tempFile],
-      minify: true,
-      throw: true, // This makes Bun throw with detailed error info
-    });
-
-    if (result.outputs.length > 0) {
-      return await result.outputs[0].text();
-    }
-
-    throw new Error('JavaScript minification produced no output');
-  } catch (err: any) {
-    // Re-throw with formatted message that includes all details
-    let details = '';
-
-    // Bun's BuildError has a logs array with detailed info
-    if (err.logs && Array.isArray(err.logs)) {
-      details = err.logs.map((log: any) => {
-        const parts: string[] = [];
-        if (log.position?.line) {
-          parts.push(`Line ${log.position.line}:${log.position.column || 0}`);
-        }
-        if (log.position?.lineText) {
-          parts.push(log.position.lineText);
-        }
-        if (log.message) {
-          parts.push(log.message);
-        }
-        return parts.length > 0 ? parts.join('\n') : String(log);
-      }).join('\n\n');
-    }
-
-    // If no logs, try Bun.inspect for full error details
-    if (!details) {
-      try {
-        details = Bun.inspect(err);
-      } catch {
-        details = err.stack || err.message || String(err);
-      }
-    }
-
-    throw new Error(`JavaScript minification failed:\n${details}`);
-  } finally {
-    // Clean up temp file
-    try {
-      rmSync(tempFile, { force: true });
-    } catch {
-      // Ignore cleanup errors
-    }
+  const result = await runtimeMinifyJS(code);
+  if (result.success) {
+    return result.code;
   }
+  throw new Error(`JavaScript minification failed:\n${result.errors.join('\n\n')}`);
 }
 
 /**
@@ -554,11 +507,10 @@ async function buildCMSTemplates(
         errorMessage = String(error);
       }
 
-      // If we still just have "Bundle failed", try to get more from Bun.inspect
+      // If we still just have "Bundle failed", try to get more from inspect
       if (errorMessage === 'Bundle failed' || errorMessage.includes('Bundle failed\n')) {
         try {
-          // Bun.inspect gives the same output as console.log
-          const inspected = Bun.inspect(error);
+          const inspected = inspect(error);
           if (inspected && inspected !== '[object Object]' && inspected.length > errorMessage.length) {
             errorMessage = inspected;
           }
@@ -723,34 +675,9 @@ export async function buildStaticPages(): Promise<void> {
     }
   }
 
-  // Generate _headers from CSP config if no custom _headers file exists
-  if (!hostingFiles.includes('_headers')) {
-    await configService.load();
-    const cspConfig = configService.getCSP();
-    if (cspConfig && Object.keys(cspConfig).length > 0) {
-      const extraScripts = cspConfig.scriptSrc?.join(' ') || '';
-      const extraStyles = cspConfig.styleSrc?.join(' ') || '';
-      const extraConnect = cspConfig.connectSrc?.join(' ') || '';
-      const extraFrames = cspConfig.frameSrc?.join(' ') || '';
-      const extraFonts = cspConfig.fontSrc?.join(' ') || '';
-      const extraImgs = cspConfig.imgSrc?.join(' ') || '';
-
-      const cspDirectives = [
-        "default-src 'self'",
-        `script-src 'self' 'unsafe-inline' https://f.vimeocdn.com https://player.vimeo.com https://www.youtube.com https://s.ytimg.com ${extraScripts}`.trim(),
-        `style-src 'self' 'unsafe-inline' https://f.vimeocdn.com ${extraStyles}`.trim(),
-        `img-src 'self' data: https: ${extraImgs}`.trim(),
-        `connect-src 'self' https://vimeo.com https://*.vimeocdn.com ${extraConnect}`.trim(),
-        `frame-src https://player.vimeo.com https://vimeo.com https://www.youtube.com https://www.youtube-nocookie.com ${extraFrames}`.trim(),
-        `font-src 'self' data: ${extraFonts}`.trim(),
-        "media-src 'self' https: blob:"
-      ].join('; ');
-
-      const headersContent = `/*\n  Content-Security-Policy: ${cspDirectives}\n`;
-      writeFileSync(join(distDir, '_headers'), headersContent);
-      hostingFiles.push('_headers (generated from csp config)');
-    }
-  }
+  // _headers generation is deferred until after components and pages are loaded
+  // so that library CDN domains can be auto-added to CSP
+  const hasCustomHeaders = hostingFiles.includes('_headers');
 
   // Copy .well-known directory if exists
   const wellKnownDir = join(projectPaths.project, '.well-known');
@@ -786,7 +713,19 @@ export async function buildStaticPages(): Promise<void> {
     process.exit(1);
   }
 
-  const pageFiles = readdirSync(pagesDir).filter((f) => f.endsWith(".json"));
+  // Recursively collect all .json page files (supports nested folders like pages/a/b.json)
+  const pageFiles: string[] = [];
+  function scanPagesDir(dir: string, prefix: string): void {
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isFile() && entry.name.endsWith('.json')) {
+        pageFiles.push(prefix ? `${prefix}/${entry.name}` : entry.name);
+      } else if (entry.isDirectory()) {
+        scanPagesDir(join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name);
+      }
+    }
+  }
+  scanPagesDir(pagesDir, '');
   
   if (pageFiles.length === 0) {
     console.warn("⚠️  No pages found in ./pages directory");
@@ -795,8 +734,9 @@ export async function buildStaticPages(): Promise<void> {
 
   console.log(`📄 Found ${pageFiles.length} page(s) to build\n`);
 
-  // First pass: collect all slug mappings for LocaleList SSR
+  // First pass: collect all slug mappings and page-level libraries
   const slugMappings: SlugMap[] = [];
+  const allPageLibraries: LibrariesConfig[] = [];
   for (const file of pageFiles) {
     const pageName = file.replace(".json", "");
     const basePath = mapPageNameToPath(pageName);
@@ -808,10 +748,68 @@ export async function buildStaticPages(): Promise<void> {
           const pageId = basePath === '/' ? 'index' : basePath.substring(1);
           slugMappings.push({ pageId, slugs: pageData.meta.slugs });
         }
+        if (pageData.meta?.libraries) {
+          allPageLibraries.push(pageData.meta.libraries as LibrariesConfig);
+        }
       } catch { /* ignore parse errors in first pass */ }
     }
   }
 
+  // Generate _headers from CSP config, auto-including library CDN domains
+  if (!hasCustomHeaders) {
+    await configService.load();
+    const cspConfig = configService.getCSP();
+    if (cspConfig && Object.keys(cspConfig).length > 0) {
+      // Collect all library sources: global + component + page-level
+      // Note: we concatenate (not mergeLibraries) because _headers applies globally —
+      // we need the union of ALL origins, regardless of per-page merge modes
+      const globalLibraries = configService.getLibraries();
+      const componentLibraries = collectComponentLibraries(globalComponents);
+      const allJs = [
+        ...(globalLibraries.js || []),
+        ...(componentLibraries.js || []),
+        ...allPageLibraries.flatMap(p => p.js || []),
+      ];
+      const allCss = [
+        ...(globalLibraries.css || []),
+        ...(componentLibraries.css || []),
+        ...allPageLibraries.flatMap(p => p.css || []),
+      ];
+      const allLibs: LibrariesConfig = { js: allJs, css: allCss };
+
+      // Extract CDN origins from all library URLs
+      const { scriptOrigins, styleOrigins } = extractLibraryOrigins(allLibs);
+
+      const extraScripts = [
+        ...(cspConfig.scriptSrc || []),
+        ...Array.from(scriptOrigins),
+      ].join(' ');
+      const extraStyles = [
+        ...(cspConfig.styleSrc || []),
+        ...Array.from(styleOrigins),
+      ].join(' ');
+      const extraConnect = cspConfig.connectSrc?.join(' ') || '';
+      const extraFrames = cspConfig.frameSrc?.join(' ') || '';
+      const extraFonts = cspConfig.fontSrc?.join(' ') || '';
+      const extraImgs = cspConfig.imgSrc?.join(' ') || '';
+
+      const cspDirectives = [
+        "default-src 'self'",
+        `script-src 'self' 'unsafe-inline' https://f.vimeocdn.com https://player.vimeo.com https://www.youtube.com https://s.ytimg.com ${extraScripts}`.trim(),
+        `style-src 'self' 'unsafe-inline' https://f.vimeocdn.com ${extraStyles}`.trim(),
+        `img-src 'self' data: https: ${extraImgs}`.trim(),
+        `connect-src 'self' https://vimeo.com https://*.vimeocdn.com ${extraConnect}`.trim(),
+        `frame-src https://player.vimeo.com https://vimeo.com https://www.youtube.com https://www.youtube-nocookie.com ${extraFrames}`.trim(),
+        `font-src 'self' data: ${extraFonts}`.trim(),
+        "media-src 'self' https: blob:"
+      ].join('; ');
+
+      const headersContent = `/*\n  Content-Security-Policy: ${cspDirectives}\n`;
+      writeFileSync(join(distDir, '_headers'), headersContent);
+      console.log(`✅ Generated _headers with CSP (auto-included ${scriptOrigins.size + styleOrigins.size} library origin(s))\n`);
+    }
+  }
+
   let successCount = 0;
   let errorCount = 0;
 
@@ -930,11 +928,10 @@ export async function buildStaticPages(): Promise<void> {
         errorMessage = String(error);
       }
 
-      // If we still just have "Bundle failed", try to get more from Bun.inspect
+      // If we still just have "Bundle failed", try to get more from inspect
       if (errorMessage === 'Bundle failed' || errorMessage.includes('Bundle failed\n')) {
         try {
-          // Bun.inspect gives the same output as console.log
-          const inspected = Bun.inspect(error);
+          const inspected = inspect(error);
           if (inspected && inspected !== '[object Object]' && inspected.length > errorMessage.length) {
             errorMessage = inspected;
           }
@@ -1044,11 +1041,4 @@ export async function buildStaticPages(): Promise<void> {
   }
 }
 
-// Run build only when executed directly (CLI), not when imported as a module
-if (import.meta.main) {
-  await buildStaticPages().catch((error) => {
-    console.error("❌ Build failed:", error);
-    process.exit(1);
-  });
-}
 

package/entries/server-router.tsx

@@ -64,7 +64,7 @@ async function initialize() {
 await initialize();
 
 // Create and start server using the factory
-const { server, port } = createServer({
+const { server, port } = await createServer({
   pageService,
   componentService,
   wsManager,

package/lib/client/routing/Router.tsx

@@ -142,6 +142,10 @@ export function Router(props: RouterProps = {}): ReactElement {
   // Store CMS template path for HMR reloads (so we don't lose it after initial load)
   const [cmsTemplatePath, setCmsTemplatePath] = useState<string | null>(null);
 
+  // Grace period: skip HMR reloads shortly after receiving committed data via postMessage
+  const lastCommitTimestampRef = useRef(0);
+  const COMMIT_GRACE_MS = 1000;
+
   // Track if initial mount used SSR CMS context (to skip redundant path-based load)
   const ssrCmsHandledRef = useRef(false);
   // Track if initial load is done (to prevent currentPath effect from firing on mount)
@@ -292,6 +296,7 @@ export function Router(props: RouterProps = {}): ReactElement {
         setPreviewComponentTree(null);
       } else if (event.data?.type === IFRAME_MESSAGE_TYPES.PAGE_DATA_COMMITTED) {
         // Update the real tree with committed editor mutations (instant preview)
+        lastCommitTimestampRef.current = Date.now();
         const pageData = event.data.pageData;
         if (pageData?.root) {
           setComponentTree(pageData.root);
@@ -299,6 +304,7 @@ export function Router(props: RouterProps = {}): ReactElement {
           componentTreeRef.current = pageData.root;
         }
       } else if (event.data?.type === IFRAME_MESSAGE_TYPES.COMPONENT_DEFINITION_COMMITTED) {
+        lastCommitTimestampRef.current = Date.now();
         const { componentName, definition } = event.data;
         if (componentName && definition) {
           services.componentRegistry.register(componentName, definition);
@@ -332,7 +338,7 @@ export function Router(props: RouterProps = {}): ReactElement {
       // Clear registry when tree is cleared (no elements to register)
       elementRegistry.clear();
     }
-  }, [previewComponentTree, componentTree, services, cmsContext]);
+  }, [previewComponentTree, componentTree, services, cmsContext, registryVersion]);
 
   // Post-paint: send interactive styles to parent and execute scripts
   useEffect(() => {
@@ -361,7 +367,7 @@ export function Router(props: RouterProps = {}): ReactElement {
         };
       }
     }
-  }, [previewComponentTree, componentTree, services, disableScripts, cmsContext]);
+  }, [previewComponentTree, componentTree, services, disableScripts, cmsContext, registryVersion]);
 
   // Prefetch all internal links when using 'load' strategy
   useEffect(() => {
@@ -391,6 +397,15 @@ export function Router(props: RouterProps = {}): ReactElement {
     await routeLoader.loadComponents(pathToLoad);
   }, [cmsTemplatePath]);
 
+  // Grace-aware version for HMR: skip reload if iframe just received committed data via postMessage
+  const loadComponentsForHMR = useCallback(async (path: string) => {
+    if (Date.now() - lastCommitTimestampRef.current < COMMIT_GRACE_MS) {
+      return;
+    }
+    const pathToLoad = cmsTemplatePath || path;
+    await routeLoader.loadComponents(pathToLoad);
+  }, [cmsTemplatePath]);
+
   // Ref for loadComponents to avoid recreating effects when cmsTemplatePath changes
   const loadComponentsRef = useRef(loadComponents);
   useEffect(() => { loadComponentsRef.current = loadComponents; }, [loadComponents]);
@@ -626,7 +641,7 @@ export function Router(props: RouterProps = {}): ReactElement {
   // Render HMRManager once at the top level with page content
   return h('div', null,
     h(HMRManager, {
-      onReload: loadComponents,
+      onReload: loadComponentsForHMR,
       onCMSUpdate: handleCMSUpdate,
       currentPath: currentPath,
     }),

package/lib/server/__integration__/test-helpers.ts

@@ -162,7 +162,7 @@ export async function createTestServer(options: {
     cmsProvider: options.cmsProvider,
   };
 
-  const { server, port: actualPort } = createServer(config);
+  const { server, port: actualPort } = await createServer(config);
   const baseUrl = `http://localhost:${actualPort}`;
 
   return {

package/lib/server/createServer.ts

@@ -1,6 +1,6 @@
 /**
  * Server Factory
- * Creates a configurable Bun server for meno-core
+ * Creates a runtime-agnostic server for meno-core
  * Can be extended by @meno/studio for editor functionality
  */
 
@@ -11,16 +11,10 @@ import type { CMSProvider } from '../shared/interfaces/contentProvider';
 import { WebSocketManager } from './websocketManager';
 import { handleRoutes, type RouteContext } from './routes';
 import { SERVER_PORT, MAX_PORT_ATTEMPTS, HMR_ROUTE } from '../shared/constants';
-
-// Bun WebSocket type
-type BunWebSocket = {
-  send(data: string | ArrayBuffer | Uint8Array): void;
-  readyState: number;
-  close(code?: number, reason?: string): void;
-};
+import { createRuntimeServer, type RuntimeServer, type RuntimeWSClient } from './runtime';
 
 // Custom message handler type
-export type WSMessageHandler = (ws: BunWebSocket, data: unknown) => void;
+export type WSMessageHandler = (ws: RuntimeWSClient, data: unknown) => void;
 
 /**
  * Server configuration
@@ -54,14 +48,14 @@ export type AdditionalRouteHandler = (
  * Server factory result
  */
 export interface ServerResult {
-  server: ReturnType<typeof Bun.serve>;
+  server: RuntimeServer;
   port: number;
 }
 
 /**
- * Create a Bun server with the given configuration
+ * Create a server with the given configuration
  */
-export function createServer(config: ServerConfig): ServerResult {
+export async function createServer(config: ServerConfig): Promise<ServerResult> {
   const {
     port: requestedPort = SERVER_PORT,
     pageService,
@@ -82,74 +76,77 @@ export function createServer(config: ServerConfig): ServerResult {
     injectLiveReload,
   };
 
-  function createBunConfig(port: number) {
-    return {
-      port,
-      hostname: 'localhost',
-      development: {
-        hmr: true,
-      },
-
-      async fetch(req: Request, server: any) {
-        const url = new URL(req.url);
-
-        // Check additional routes first (allows studio to inject routes)
-        for (const handler of additionalRoutes) {
-          const response = await handler(req, url, routeContext);
-          if (response) {
-            return response;
-          }
-        }
+  // Try to start server, incrementing port if busy
+  let lastError: unknown;
 
-        // Handle all routes through centralized router
-        const response = await handleRoutes(req, url, server, routeContext);
-        return response || new Response('Not Found', { status: 404 });
-      },
+  for (let portAttempt = 0; portAttempt < MAX_PORT_ATTEMPTS; portAttempt++) {
+    const currentPort = requestedPort + portAttempt;
 
-      websocket: {
-        open(ws: BunWebSocket) {
-          wsManager.addClient(ws);
-        },
-        message(ws: BunWebSocket, message: unknown) {
-          try {
-            const data = JSON.parse(message as string);
-
-            // Respond to ping with pong (for heartbeat)
-            if (data.type === 'ping') {
-              ws.send('pong');
-              return;
+    try {
+      const server = await createRuntimeServer({
+        port: currentPort,
+        hostname: 'localhost',
+        wsPath: HMR_ROUTE,
+
+        async fetch(req: Request, upgradeWebSocket: (req: Request) => boolean) {
+          const url = new URL(req.url);
+
+          // Check additional routes first (allows studio to inject routes)
+          for (const handler of additionalRoutes) {
+            const response = await handler(req, url, routeContext);
+            if (response) {
+              return response;
             }
+          }
 
-            // Allow custom message handlers
-            if (onWSMessage) {
-              onWSMessage(ws, data);
-            }
-          } catch (error) {
-            // Ignore non-JSON messages
+          // WebSocket upgrade for HMR
+          if (url.pathname === HMR_ROUTE) {
+            const success = upgradeWebSocket(req);
+            return success
+              ? undefined
+              : new Response('WebSocket upgrade failed', { status: 500 });
           }
-        },
-        close(ws: BunWebSocket) {
-          wsManager.removeClient(ws);
-        },
-      },
-    };
-  }
 
-  // Try to start server, incrementing port if busy
-  let server: ReturnType<typeof Bun.serve> | undefined;
-  let actualPort = requestedPort;
+          // Handle all routes through centralized router
+          const response = await handleRoutes(req, url, null, routeContext);
+          return response || new Response('Not Found', { status: 404 });
+        },
 
-  for (let portAttempt = 0; portAttempt < MAX_PORT_ATTEMPTS; portAttempt++) {
-    const currentPort = requestedPort + portAttempt;
+        websocket: {
+          open(ws: RuntimeWSClient) {
+            wsManager.addClient(ws);
+          },
+          message(ws: RuntimeWSClient, message: string) {
+            try {
+              const data = JSON.parse(message);
+
+              // Respond to ping with pong (for heartbeat)
+              if (data.type === 'ping') {
+                ws.send('pong');
+                return;
+              }
+
+              // Allow custom message handlers
+              if (onWSMessage) {
+                onWSMessage(ws, data);
+              }
+            } catch (error) {
+              // Ignore non-JSON messages
+            }
+          },
+          close(ws: RuntimeWSClient) {
+            wsManager.removeClient(ws);
+          },
+        },
+      });
 
-    try {
-      server = Bun.serve(createBunConfig(currentPort));
-      actualPort = server.port ?? currentPort;
       if (portAttempt > 0) {
-        console.log(`Warning: Port ${requestedPort} was busy, using port ${actualPort} instead`);
+        console.log(`Warning: Port ${requestedPort} was busy, using port ${server.port} instead`);
       }
-      break;
+
+      return { server, port: server.port };
     } catch (error: unknown) {
+      lastError = error;
       const err = error as { code?: string };
       if (err?.code === 'EADDRINUSE') {
         if (portAttempt >= MAX_PORT_ATTEMPTS - 1) {
@@ -164,11 +161,7 @@ export function createServer(config: ServerConfig): ServerResult {
     }
   }
 
-  if (!server) {
-    throw new Error('Failed to start server');
-  }
-
-  return { server, port: actualPort };
+  throw lastError || new Error('Failed to start server');
 }
 
 /**

package/lib/server/fileWatcher.ts

@@ -16,6 +16,7 @@ export interface FileWatchCallbacks {
   onVariablesChange?: () => Promise<void>;
   onEnumsChange?: () => Promise<void>;
   onCMSChange?: (collection: string) => Promise<void>;
+  onImageAdded?: (filename: string) => Promise<void>;
 }
 
 export class FileWatcher {
@@ -26,7 +27,8 @@ export class FileWatcher {
   private variablesWatcher: FSWatcher | null = null;
   private enumsWatcher: FSWatcher | null = null;
   private cmsWatcher: FSWatcher | null = null;
-  
+  private imagesWatcher: FSWatcher | null = null;
+
   constructor(private callbacks: FileWatchCallbacks) {}
   
   /**
@@ -183,6 +185,25 @@ export class FileWatcher {
     );
   }
 
+  /**
+   * Start watching images directory for new source images
+   */
+  watchImages(dirPath: string = projectPaths.images()): void {
+    if (!existsSync(dirPath)) {
+      return;
+    }
+
+    this.imagesWatcher = watch(
+      dirPath,
+      { recursive: false },
+      async (event, filename) => {
+        if (event === 'rename' && filename && this.callbacks.onImageAdded) {
+          await this.callbacks.onImageAdded(filename);
+        }
+      }
+    );
+  }
+
   /**
    * Start watching all directories
    */
@@ -194,6 +215,7 @@ export class FileWatcher {
     this.watchVariables();
     this.watchEnums();
     this.watchCMS();
+    this.watchImages();
   }
   
   /**
@@ -234,13 +256,18 @@ export class FileWatcher {
       this.cmsWatcher.close();
       this.cmsWatcher = null;
     }
+
+    if (this.imagesWatcher) {
+      this.imagesWatcher.close();
+      this.imagesWatcher = null;
+    }
   }
   
   /**
    * Check if watchers are active
    */
   isWatching(): boolean {
-    return this.componentsWatcher !== null || this.pagesWatcher !== null || this.cmsWatcher !== null;
+    return this.componentsWatcher !== null || this.pagesWatcher !== null || this.cmsWatcher !== null || this.imagesWatcher !== null;
   }
 }