clawfire 0.1.0 → 0.2.1

package/dist/dev.cjs

@@ -38,8 +38,8 @@ module.exports = __toCommonJS(dev_exports);
 
 // src/dev/dev-server.ts
 var import_node_http = __toESM(require("http"), 1);
-var import_node_path = require("path");
-var import_node_fs = require("fs");
+var import_node_path2 = require("path");
+var import_node_fs2 = require("fs");
 var import_node_url = require("url");
 
 // src/core/schema.ts
@@ -946,6 +946,55 @@ var FileWatcher = class extends import_events.EventEmitter {
     this.watchers.push(watcher);
     return this;
   }
+  /**
+   * 프론트엔드 디렉터리 감시 (확장자별 이벤트 타입 자동 결정)
+   */
+  watchDirFrontend(dir) {
+    if (!(0, import_fs2.existsSync)(dir)) return this;
+    try {
+      const watcher = (0, import_fs2.watch)(dir, { recursive: true }, (event, filename) => {
+        if (!filename) return;
+        const filePath = (0, import_path2.join)(dir, filename);
+        if (!this.isWatchedFile(filePath)) return;
+        const ext = (0, import_path2.extname)(filePath);
+        const eventType = ext === ".css" ? "css-change" : "frontend-change";
+        this.emitDebounced(filePath, eventType);
+      });
+      watcher.on("error", (err) => {
+        if (err.code === "ERR_FEATURE_UNAVAILABLE_ON_PLATFORM") {
+          this.watchDirFrontendRecursiveManual(dir);
+        }
+      });
+      this.watchers.push(watcher);
+    } catch {
+      this.watchDirFrontendRecursiveManual(dir);
+    }
+    return this;
+  }
+  /**
+   * Linux fallback: 프론트엔드 디렉터리 수동 재귀 감시
+   */
+  watchDirFrontendRecursiveManual(dir) {
+    if (!(0, import_fs2.existsSync)(dir)) return;
+    const watcher = (0, import_fs2.watch)(dir, (event, filename) => {
+      if (!filename) return;
+      const filePath = (0, import_path2.join)(dir, filename);
+      if (!this.isWatchedFile(filePath)) return;
+      const ext = (0, import_path2.extname)(filePath);
+      const eventType = ext === ".css" ? "css-change" : "frontend-change";
+      this.emitDebounced(filePath, eventType);
+    });
+    this.watchers.push(watcher);
+    try {
+      const entries = (0, import_fs2.readdirSync)(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules") {
+          this.watchDirFrontendRecursiveManual((0, import_path2.join)(dir, entry.name));
+        }
+      }
+    } catch {
+    }
+  }
   /**
    * Linux fallback: 디렉터리 수동 재귀 감시
    */
@@ -973,7 +1022,7 @@ var FileWatcher = class extends import_events.EventEmitter {
    */
   isWatchedFile(filePath) {
     const ext = (0, import_path2.extname)(filePath);
-    return [".ts", ".tsx", ".js", ".jsx", ".json"].includes(ext);
+    return [".ts", ".tsx", ".js", ".jsx", ".json", ".html", ".css", ".svg", ".png", ".jpg", ".jpeg", ".gif", ".ico", ".webp", ".woff", ".woff2"].includes(ext);
   }
   /**
    * 디바운스 이벤트 발생
@@ -1007,78 +1056,486 @@ var FileWatcher = class extends import_events.EventEmitter {
   }
 };
 
+// src/dev/page-compiler.ts
+var import_node_path = require("path");
+var import_node_fs = require("fs");
+var MAX_COMPONENT_DEPTH = 10;
+var META_REGEX = /<!--\s*@(\w+):\s*(.+?)\s*-->/g;
+var COMPONENT_REGEX = /<c-([a-z][a-z0-9-]*)\s*\/>/g;
+var SLOT_MARKER = "<slot />";
+var PageCompiler = class {
+  constructor(projectDir) {
+    this.projectDir = projectDir;
+    this.pagesDir = (0, import_node_path.resolve)(projectDir, "app/pages");
+    this.componentsDir = (0, import_node_path.resolve)(projectDir, "app/components");
+  }
+  pagesDir;
+  componentsDir;
+  /**
+   * Check if the page system is active (app/pages/ exists)
+   */
+  isActive() {
+    return (0, import_node_fs.existsSync)(this.pagesDir);
+  }
+  /**
+   * Resolve a URL pathname to a page file path.
+   * Returns null if no matching page exists.
+   *
+   * /            → app/pages/index.html
+   * /about       → app/pages/about.html OR app/pages/about/index.html
+   * /todos       → app/pages/todos/index.html OR app/pages/todos.html
+   */
+  resolve(pathname) {
+    if (!this.isActive()) return null;
+    const clean = pathname === "/" ? "" : pathname.replace(/\/+$/, "");
+    const segments = clean ? clean.split("/").filter(Boolean) : [];
+    const candidates = [];
+    if (segments.length === 0) {
+      candidates.push((0, import_node_path.join)(this.pagesDir, "index.html"));
+    } else {
+      const pathPart = segments.join("/");
+      candidates.push((0, import_node_path.join)(this.pagesDir, `${pathPart}.html`));
+      candidates.push((0, import_node_path.join)(this.pagesDir, pathPart, "index.html"));
+    }
+    for (const candidate of candidates) {
+      if (!candidate.startsWith(this.pagesDir)) continue;
+      const name = (0, import_node_path.basename)(candidate);
+      if (name.startsWith("_")) continue;
+      if ((0, import_node_fs.existsSync)(candidate)) return candidate;
+    }
+    return null;
+  }
+  /**
+   * Resolve the 404 page file path.
+   */
+  resolve404() {
+    const path404 = (0, import_node_path.join)(this.pagesDir, "_404.html");
+    return (0, import_node_fs.existsSync)(path404) ? path404 : null;
+  }
+  /**
+   * Compile a full page with layouts and components.
+   */
+  compile(pagePath) {
+    let pageHtml = (0, import_node_fs.readFileSync)(pagePath, "utf-8");
+    const meta = this.extractMeta(pageHtml);
+    pageHtml = this.stripMeta(pageHtml);
+    pageHtml = this.processComponents(pageHtml);
+    pageHtml = this.wrapPageContent(pageHtml);
+    const layouts = this.collectLayouts(pagePath);
+    let html = pageHtml;
+    for (const layoutPath of layouts) {
+      let layoutHtml = (0, import_node_fs.readFileSync)(layoutPath, "utf-8");
+      layoutHtml = this.processComponents(layoutHtml);
+      html = layoutHtml.replace(SLOT_MARKER, html);
+    }
+    if (meta.title) {
+      html = this.setTitle(html, meta.title);
+    }
+    return {
+      html,
+      meta,
+      filePath: pagePath,
+      layouts
+    };
+  }
+  /**
+   * Compile a partial page for SPA navigation.
+   * Returns only the page content (no layout) plus metadata.
+   */
+  compilePartial(pagePath, pathname) {
+    let pageHtml = (0, import_node_fs.readFileSync)(pagePath, "utf-8");
+    const meta = this.extractMeta(pageHtml);
+    pageHtml = this.stripMeta(pageHtml);
+    pageHtml = this.processComponents(pageHtml);
+    return {
+      html: pageHtml,
+      meta,
+      path: pathname
+    };
+  }
+  // ─── Internal Methods ────────────────────────────────────────────
+  /**
+   * Extract <!-- @key: value --> metadata from HTML.
+   */
+  extractMeta(html) {
+    const meta = {};
+    let match;
+    const regex = new RegExp(META_REGEX.source, META_REGEX.flags);
+    while ((match = regex.exec(html)) !== null) {
+      meta[match[1]] = match[2];
+    }
+    return meta;
+  }
+  /**
+   * Strip metadata comments from HTML.
+   */
+  stripMeta(html) {
+    return html.replace(META_REGEX, "").trim();
+  }
+  /**
+   * Process <c-name /> component tags by replacing them with component file contents.
+   * Supports nested components up to MAX_COMPONENT_DEPTH.
+   */
+  processComponents(html, depth = 0) {
+    if (depth >= MAX_COMPONENT_DEPTH) return html;
+    if (!COMPONENT_REGEX.test(html)) return html;
+    const regex = new RegExp(COMPONENT_REGEX.source, COMPONENT_REGEX.flags);
+    const result = html.replace(regex, (_match, name) => {
+      const componentPath = (0, import_node_path.join)(this.componentsDir, `${name}.html`);
+      if (!(0, import_node_fs.existsSync)(componentPath)) {
+        return `<!-- component "${name}" not found -->`;
+      }
+      const content = (0, import_node_fs.readFileSync)(componentPath, "utf-8").trim();
+      return this.processComponents(content, depth + 1);
+    });
+    return result;
+  }
+  /**
+   * Wrap page content in the router target div.
+   */
+  wrapPageContent(html) {
+    return `<div id="clawfire-page">
+${html}
+</div>`;
+  }
+  /**
+   * Collect layout files from page directory up to pages root.
+   * Returns innermost layout first (closest to page).
+   */
+  collectLayouts(pagePath) {
+    const layouts = [];
+    let dir = (0, import_node_path.dirname)(pagePath);
+    while (dir.startsWith(this.pagesDir)) {
+      const layoutPath = (0, import_node_path.join)(dir, "_layout.html");
+      if ((0, import_node_fs.existsSync)(layoutPath)) {
+        layouts.push(layoutPath);
+      }
+      if (dir === this.pagesDir) break;
+      dir = (0, import_node_path.dirname)(dir);
+    }
+    return layouts;
+  }
+  /**
+   * Set or update <title> tag in HTML.
+   */
+  setTitle(html, title) {
+    if (html.includes("<title>")) {
+      return html.replace(/<title>[^<]*<\/title>/, `<title>${title}</title>`);
+    }
+    if (html.includes("</head>")) {
+      return html.replace("</head>", `  <title>${title}</title>
+</head>`);
+    }
+    return html;
+  }
+};
+
 // src/dev/dev-server.ts
+var MIME_TYPES = {
+  html: "text/html; charset=utf-8",
+  css: "text/css; charset=utf-8",
+  js: "application/javascript; charset=utf-8",
+  mjs: "application/javascript; charset=utf-8",
+  json: "application/json; charset=utf-8",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  ico: "image/x-icon",
+  webp: "image/webp",
+  woff: "font/woff",
+  woff2: "font/woff2",
+  ttf: "font/ttf",
+  eot: "application/vnd.ms-fontobject",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  pdf: "application/pdf",
+  txt: "text/plain; charset=utf-8",
+  xml: "application/xml; charset=utf-8"
+};
+var STATIC_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".css",
+  ".js",
+  ".mjs",
+  ".json",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".ico",
+  ".webp",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".mp4",
+  ".webm",
+  ".mp3",
+  ".wav",
+  ".pdf",
+  ".txt",
+  ".xml",
+  ".map"
+]);
+function generateHmrScript(port) {
+  return `
+<script data-clawfire-hmr>
+(function() {
+  var dot, status;
+  function createBanner() {
+    var banner = document.createElement('div');
+    banner.id = 'clawfire-dev-banner';
+    banner.style.cssText = 'position:fixed;bottom:0;left:0;right:0;padding:6px 16px;background:#1a1a2e;color:#f97316;font-size:12px;font-family:monospace;z-index:99999;display:flex;align-items:center;gap:8px;border-top:1px solid #2a2a2a;';
+    banner.innerHTML = '<span style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;" id="clawfire-dot"></span><span>Clawfire Dev</span><span style="color:#666;margin-left:auto;" id="clawfire-status">Connected</span>';
+    document.body.appendChild(banner);
+    dot = document.getElementById('clawfire-dot');
+    status = document.getElementById('clawfire-status');
+  }
+
+  function refreshCss() {
+    var links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (var i = 0; i < links.length; i++) {
+      var href = links[i].getAttribute('href');
+      if (href) {
+        var url = new URL(href, location.href);
+        url.searchParams.set('_hmr', Date.now().toString());
+        links[i].setAttribute('href', url.toString());
+      }
+    }
+    var styles = document.querySelectorAll('style[data-href]');
+    for (var j = 0; j < styles.length; j++) {
+      var dataHref = styles[j].getAttribute('data-href');
+      if (dataHref) {
+        fetch(dataHref + '?_hmr=' + Date.now())
+          .then(function(r) { return r.text(); })
+          .then(function(css) { styles[j].textContent = css; })
+          .catch(function() {});
+      }
+    }
+    if (status) status.textContent = 'CSS updated';
+    setTimeout(function() { if (status) status.textContent = 'Connected'; }, 1500);
+  }
+
+  var reconnectTimer;
+  function connect() {
+    var es = new EventSource('http://localhost:${port}/__dev/events');
+    es.onopen = function() {
+      if (!dot) createBanner();
+      dot.style.background = '#22c55e';
+      status.textContent = 'Connected';
+      if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+    };
+    es.onmessage = function(e) {
+      try {
+        var data = JSON.parse(e.data);
+        if (data.type === 'connected') return;
+        if (data.type === 'css-change') {
+          refreshCss();
+          return;
+        }
+        if (data.type === 'error') {
+          if (dot) dot.style.background = '#ef4444';
+          if (status) status.textContent = 'Error: ' + (data.message || 'reload failed');
+          return;
+        }
+        // frontend-change, route-change, page-change, component-change \u2192 full reload
+        if (dot) dot.style.background = '#eab308';
+        if (status) status.textContent = 'Reloading...';
+        setTimeout(function() { location.reload(); }, 300);
+      } catch(err) {}
+    };
+    es.onerror = function() {
+      es.close();
+      if (dot) dot.style.background = '#ef4444';
+      if (status) status.textContent = 'Disconnected';
+      reconnectTimer = setTimeout(connect, 2000);
+    };
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function() { connect(); });
+  } else {
+    connect();
+  }
+})();
+</script>`;
+}
+function generateRouterScript() {
+  return `
+<script data-clawfire-router>
+(function() {
+  function updateActiveNav() {
+    var path = location.pathname;
+    var links = document.querySelectorAll('#nav-links a[href]');
+    for (var i = 0; i < links.length; i++) {
+      var href = links[i].getAttribute('href');
+      if (!href || href.startsWith('http')) continue;
+      var isActive = (path === '/' && href === '/') || (href !== '/' && path.startsWith(href));
+      links[i].setAttribute('data-active', isActive ? 'true' : 'false');
+    }
+  }
+
+  function navigate(url) {
+    var target = new URL(url, location.href);
+    // Only handle same-origin, non-hash navigation
+    if (target.origin !== location.origin) return false;
+    if (target.pathname === location.pathname && target.hash) return false;
+
+    fetch(target.pathname, {
+      headers: { 'X-Clawfire-Partial': 'true' }
+    })
+    .then(function(res) {
+      if (!res.ok) throw new Error('Page not found');
+      return res.json();
+    })
+    .then(function(data) {
+      // Update page content
+      var container = document.getElementById('clawfire-page');
+      if (container) {
+        container.innerHTML = data.html;
+        // Execute scripts in new content
+        var scripts = container.querySelectorAll('script');
+        for (var i = 0; i < scripts.length; i++) {
+          var newScript = document.createElement('script');
+          if (scripts[i].src) {
+            newScript.src = scripts[i].src;
+          } else {
+            newScript.textContent = scripts[i].textContent;
+          }
+          scripts[i].parentNode.replaceChild(newScript, scripts[i]);
+        }
+      }
+      // Update title
+      if (data.meta && data.meta.title) {
+        document.title = data.meta.title;
+      }
+      // Update URL
+      history.pushState(null, '', target.pathname);
+      // Update nav active state
+      updateActiveNav();
+      // Dispatch event for page scripts
+      document.dispatchEvent(new CustomEvent('clawfire:navigate', { detail: { path: data.path } }));
+      // Scroll to top
+      window.scrollTo(0, 0);
+    })
+    .catch(function(err) {
+      // Fallback: full page navigation
+      location.href = url;
+    });
+
+    return true;
+  }
+
+  // Intercept link clicks
+  document.addEventListener('click', function(e) {
+    var anchor = e.target.closest ? e.target.closest('a[href]') : null;
+    if (!anchor) return;
+    var href = anchor.getAttribute('href');
+    if (!href) return;
+    // Skip external links, new-tab links, modified clicks
+    if (href.startsWith('http') || href.startsWith('//')) return;
+    if (anchor.target === '_blank') return;
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
+    if (anchor.hasAttribute('download')) return;
+
+    e.preventDefault();
+    navigate(href);
+  });
+
+  // Handle back/forward
+  window.addEventListener('popstate', function() {
+    navigate(location.pathname);
+  });
+
+  // Set initial active nav state
+  updateActiveNav();
+})();
+</script>`;
+}
 var DevServer = class {
-  server = null;
+  frontendServer = null;
+  apiServer = null;
   router;
   watcher = null;
-  sseClients = [];
+  frontendSseClients = [];
+  apiSseClients = [];
   sseIdCounter = 0;
   options;
   routesDir;
   schemasDir;
+  publicDir;
+  pagesDir;
+  componentsDir;
   playgroundHtml = "";
   importCounter = 0;
-  // ESM 캐시 버스팅용
   isReloading = false;
+  pageCompiler;
   constructor(options = {}) {
     this.options = {
       projectDir: options.projectDir || process.cwd(),
-      port: options.port || 3456,
+      port: options.port || 3e3,
+      apiPort: options.apiPort || 3456,
       routerOptions: options.routerOptions || {},
       hotReload: options.hotReload !== false,
       debounceMs: options.debounceMs || 150,
       onSetupRoutes: options.onSetupRoutes || (() => {
       })
     };
-    this.routesDir = (0, import_node_path.resolve)(this.options.projectDir, "app/routes");
-    this.schemasDir = (0, import_node_path.resolve)(this.options.projectDir, "app/schemas");
+    this.routesDir = (0, import_node_path2.resolve)(this.options.projectDir, "app/routes");
+    this.schemasDir = (0, import_node_path2.resolve)(this.options.projectDir, "app/schemas");
+    this.publicDir = (0, import_node_path2.resolve)(this.options.projectDir, "public");
+    this.pagesDir = (0, import_node_path2.resolve)(this.options.projectDir, "app/pages");
+    this.componentsDir = (0, import_node_path2.resolve)(this.options.projectDir, "app/components");
+    this.pageCompiler = new PageCompiler(this.options.projectDir);
     this.router = createRouter({
       cors: ["*"],
-      // dev에서는 모든 origin 허용
       rateLimit: 0,
-      // dev에서는 rate limit 비활성화
       ...this.options.routerOptions
     });
   }
-  /**
-   * 개발 서버 시작
-   */
+  // ─── Lifecycle ──────────────────────────────────────────────────────
   async start() {
     await this.loadRoutes();
     this.regeneratePlayground();
-    this.server = import_node_http.default.createServer((req, res) => this.handleHttpRequest(req, res));
+    this.apiServer = import_node_http.default.createServer((req, res) => this.handleApiRequest(req, res));
+    this.frontendServer = import_node_http.default.createServer((req, res) => this.handleFrontendRequest(req, res));
     if (this.options.hotReload) {
       this.startWatcher();
     }
-    await new Promise((resolve3, reject) => {
-      this.server.listen(this.options.port, () => {
-        resolve3();
-      });
-      this.server.on("error", reject);
+    await new Promise((resolve4, reject) => {
+      this.apiServer.listen(this.options.apiPort, () => resolve4());
+      this.apiServer.on("error", reject);
+    });
+    await new Promise((resolve4, reject) => {
+      this.frontendServer.listen(this.options.port, () => resolve4());
+      this.frontendServer.on("error", reject);
     });
     this.printStartupBanner();
   }
-  /**
-   * 서버 종료
-   */
   async stop() {
     this.watcher?.close();
-    for (const client of this.sseClients) {
+    for (const client of [...this.frontendSseClients, ...this.apiSseClients]) {
       client.res.end();
     }
-    this.sseClients = [];
+    this.frontendSseClients = [];
+    this.apiSseClients = [];
     this.router.destroy();
-    if (this.server) {
-      await new Promise((resolve3) => {
-        this.server.close(() => resolve3());
+    if (this.apiServer) {
+      await new Promise((resolve4) => {
+        this.apiServer.close(() => resolve4());
+      });
+    }
+    if (this.frontendServer) {
+      await new Promise((resolve4) => {
+        this.frontendServer.close(() => resolve4());
       });
     }
   }
   // ─── Route Loading ─────────────────────────────────────────────────
-  /**
-   * 라우트 파일 로딩 (또는 수동 콜백)
-   */
   async loadRoutes() {
     this.router.destroy();
     this.router = createRouter({
@@ -1090,11 +1547,11 @@ var DevServer = class {
       await this.options.onSetupRoutes(this.router);
       if (this.router.getRoutes().length > 0) return;
     }
-    if (!(0, import_node_fs.existsSync)(this.routesDir)) return;
+    if (!(0, import_node_fs2.existsSync)(this.routesDir)) return;
     const discovered = discoverRoutes(this.routesDir);
     for (const route of discovered) {
       try {
-        const fullPath = (0, import_node_path.resolve)(this.routesDir, route.filePath);
+        const fullPath = (0, import_node_path2.resolve)(this.routesDir, route.filePath);
         const fileUrl = (0, import_node_url.pathToFileURL)(fullPath).href;
         const mod = await import(`${fileUrl}?v=${++this.importCounter}`);
         const contract = mod.default;
@@ -1106,13 +1563,10 @@ var DevServer = class {
       }
     }
   }
-  /**
-   * 라우트 핫 리로드
-   */
   async reloadRoutes(event) {
     if (this.isReloading) return;
     this.isReloading = true;
-    const relPath = (0, import_node_path.relative)(this.options.projectDir, event.filePath);
+    const relPath = (0, import_node_path2.relative)(this.options.projectDir, event.filePath);
     const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
     console.log(`
   \x1B[33m[${timestamp}]\x1B[0m \x1B[36m${relPath}\x1B[0m changed`);
@@ -1122,7 +1576,13 @@ var DevServer = class {
       this.regeneratePlayground();
       const routeCount = this.router.getRoutes().length;
       console.log(`  \x1B[32m\u2713\x1B[0m ${routeCount} routes loaded`);
-      this.broadcastSSE({
+      this.broadcastSSE(this.apiSseClients, {
+        type: event.type,
+        file: relPath,
+        timestamp: event.timestamp,
+        routes: routeCount
+      });
+      this.broadcastSSE(this.frontendSseClients, {
         type: event.type,
         file: relPath,
         timestamp: event.timestamp,
@@ -1130,34 +1590,71 @@ var DevServer = class {
       });
     } catch (err) {
       console.log(`  \x1B[31m\u2717\x1B[0m Reload failed:`, err);
-      this.broadcastSSE({
+      const errorData = {
         type: "error",
         file: relPath,
         message: err instanceof Error ? err.message : "Unknown error"
-      });
+      };
+      this.broadcastSSE(this.apiSseClients, errorData);
+      this.broadcastSSE(this.frontendSseClients, errorData);
     } finally {
       this.isReloading = false;
     }
   }
+  // ─── Frontend Change Handler ───────────────────────────────────────
+  handleFrontendChange(event) {
+    const relPath = (0, import_node_path2.relative)(this.options.projectDir, event.filePath);
+    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    if (event.type === "css-change") {
+      console.log(`
+  \x1B[33m[${timestamp}]\x1B[0m \x1B[35m${relPath}\x1B[0m CSS updated`);
+      this.broadcastSSE(this.frontendSseClients, {
+        type: "css-change",
+        file: relPath,
+        timestamp: event.timestamp
+      });
+    } else {
+      console.log(`
+  \x1B[33m[${timestamp}]\x1B[0m \x1B[35m${relPath}\x1B[0m changed \u2192 reload`);
+      this.broadcastSSE(this.frontendSseClients, {
+        type: event.type,
+        file: relPath,
+        timestamp: event.timestamp
+      });
+    }
+  }
   // ─── File Watcher ──────────────────────────────────────────────────
   startWatcher() {
     this.watcher = new FileWatcher(this.options.debounceMs);
-    if ((0, import_node_fs.existsSync)(this.routesDir)) {
+    if ((0, import_node_fs2.existsSync)(this.routesDir)) {
       this.watcher.watchDir(this.routesDir, "route-change");
     }
-    if ((0, import_node_fs.existsSync)(this.schemasDir)) {
+    if ((0, import_node_fs2.existsSync)(this.schemasDir)) {
       this.watcher.watchDir(this.schemasDir, "schema-change");
     }
-    const configFile = (0, import_node_path.resolve)(this.options.projectDir, "clawfire.config.ts");
-    if ((0, import_node_fs.existsSync)(configFile)) {
+    const configFile = (0, import_node_path2.resolve)(this.options.projectDir, "clawfire.config.ts");
+    if ((0, import_node_fs2.existsSync)(configFile)) {
       this.watcher.watchFile(configFile, "config-change");
     }
-    this.watcher.on("change", (event) => {
-      this.reloadRoutes(event);
-    });
+    if ((0, import_node_fs2.existsSync)(this.publicDir)) {
+      this.watcher.watchDirFrontend(this.publicDir);
+    }
+    if ((0, import_node_fs2.existsSync)(this.pagesDir)) {
+      this.watcher.watchDir(this.pagesDir, "page-change");
+    }
+    if ((0, import_node_fs2.existsSync)(this.componentsDir)) {
+      this.watcher.watchDir(this.componentsDir, "component-change");
+    }
+    this.watcher.on("route-change", (event) => this.reloadRoutes(event));
+    this.watcher.on("schema-change", (event) => this.reloadRoutes(event));
+    this.watcher.on("config-change", (event) => this.reloadRoutes(event));
+    this.watcher.on("frontend-change", (event) => this.handleFrontendChange(event));
+    this.watcher.on("css-change", (event) => this.handleFrontendChange(event));
+    this.watcher.on("page-change", (event) => this.handleFrontendChange(event));
+    this.watcher.on("component-change", (event) => this.handleFrontendChange(event));
   }
   // ─── SSE (Server-Sent Events) ──────────────────────────────────────
-  handleSSE(req, res) {
+  handleSSE(req, res, clients) {
     res.writeHead(200, {
       "Content-Type": "text/event-stream",
       "Cache-Control": "no-cache",
@@ -1166,19 +1663,20 @@ var DevServer = class {
     });
     const clientId = ++this.sseIdCounter;
     const client = { id: clientId, res };
-    this.sseClients.push(client);
+    clients.push(client);
     res.write(`data: ${JSON.stringify({ type: "connected", id: clientId })}
 
 `);
     req.on("close", () => {
-      this.sseClients = this.sseClients.filter((c) => c.id !== clientId);
+      const idx = clients.indexOf(client);
+      if (idx !== -1) clients.splice(idx, 1);
     });
   }
-  broadcastSSE(data) {
+  broadcastSSE(clients, data) {
     const message = `data: ${JSON.stringify(data)}
 
 `;
-    for (const client of this.sseClients) {
+    for (const client of clients) {
       try {
         client.res.write(message);
       } catch {
@@ -1189,95 +1687,206 @@ var DevServer = class {
   regeneratePlayground() {
     const baseHtml = generatePlaygroundHtml({
       title: "Clawfire Dev Playground",
-      apiBaseUrl: `http://localhost:${this.options.port}`
+      apiBaseUrl: `http://localhost:${this.options.apiPort}`
     });
     const liveReloadScript = `
 <script>
 (function() {
-  const banner = document.createElement('div');
+  var banner = document.createElement('div');
   banner.id = 'dev-banner';
   banner.style.cssText = 'position:fixed;bottom:0;left:0;right:0;padding:6px 16px;background:#1a1a2e;color:#f97316;font-size:12px;font-family:monospace;z-index:9999;display:flex;align-items:center;gap:8px;border-top:1px solid #2a2a2a;';
   banner.innerHTML = '<span style="width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;" id="dev-dot"></span><span>Clawfire Dev Server</span><span style="color:#666;margin-left:auto;" id="dev-status">Connected</span>';
   document.body.appendChild(banner);
 
-  let reconnectTimer;
+  var reconnectTimer;
   function connect() {
-    const es = new EventSource('http://localhost:${this.options.port}/__dev/events');
-
-    es.onopen = () => {
+    var es = new EventSource('http://localhost:${this.options.apiPort}/__dev/events');
+    es.onopen = function() {
       document.getElementById('dev-dot').style.background = '#22c55e';
       document.getElementById('dev-status').textContent = 'Connected';
       if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
     };
-
-    es.onmessage = (e) => {
+    es.onmessage = function(e) {
       try {
-        const data = JSON.parse(e.data);
+        var data = JSON.parse(e.data);
         if (data.type === 'connected') return;
-
         if (data.type === 'error') {
           document.getElementById('dev-dot').style.background = '#ef4444';
           document.getElementById('dev-status').textContent = 'Error: ' + (data.message || 'reload failed');
           return;
         }
-
-        // \uD30C\uC77C \uBCC0\uACBD \u2192 \uD398\uC774\uC9C0 \uC0C8\uB85C\uACE0\uCE68
         document.getElementById('dev-dot').style.background = '#eab308';
         document.getElementById('dev-status').textContent = 'Reloading...';
-        setTimeout(() => window.location.reload(), 300);
-      } catch {}
+        setTimeout(function() { window.location.reload(); }, 300);
+      } catch(err) {}
     };
-
-    es.onerror = () => {
+    es.onerror = function() {
       es.close();
       document.getElementById('dev-dot').style.background = '#ef4444';
       document.getElementById('dev-status').textContent = 'Disconnected \u2014 reconnecting...';
       reconnectTimer = setTimeout(connect, 2000);
     };
   }
-
   connect();
 })();
 </script>`;
     this.playgroundHtml = baseHtml.replace("</body>", liveReloadScript + "\n</body>");
   }
-  // ─── HTTP Request Handler ──────────────────────────────────────────
-  handleHttpRequest(req, res) {
+  // ─── Script Injection ──────────────────────────────────────────────
+  /**
+   * Inject HMR and (optionally) client-side router scripts before </body>.
+   */
+  injectScripts(html, includeRouter) {
+    const hmr = generateHmrScript(this.options.port);
+    const router = includeRouter ? generateRouterScript() : "";
+    const scripts = router + hmr;
+    if (html.includes("</body>")) {
+      return html.replace("</body>", scripts + "\n</body>");
+    }
+    return html + scripts;
+  }
+  // ─── Static File Serving ──────────────────────────────────────────
+  serveStaticFile(filePath, res) {
+    if (!(0, import_node_fs2.existsSync)(filePath)) return false;
+    try {
+      const content = (0, import_node_fs2.readFileSync)(filePath);
+      const ext = (0, import_node_path2.extname)(filePath).slice(1).toLowerCase();
+      const mime = MIME_TYPES[ext] || "application/octet-stream";
+      if (ext === "html") {
+        const html = content.toString("utf-8");
+        const injected = this.injectScripts(html, false);
+        res.writeHead(200, { "Content-Type": mime });
+        res.end(injected);
+        return true;
+      }
+      res.writeHead(200, { "Content-Type": mime });
+      res.end(content);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  // ─── API Proxy ────────────────────────────────────────────────────
+  proxyToApiServer(req, res) {
+    const proxyReq = import_node_http.default.request(
+      {
+        hostname: "127.0.0.1",
+        port: this.options.apiPort,
+        path: req.url,
+        method: req.method,
+        headers: {
+          ...req.headers,
+          host: `localhost:${this.options.apiPort}`
+        }
+      },
+      (proxyRes) => {
+        res.writeHead(proxyRes.statusCode || 500, proxyRes.headers);
+        proxyRes.pipe(res, { end: true });
+      }
+    );
+    proxyReq.on("error", (err) => {
+      res.writeHead(502, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ error: { code: "PROXY_ERROR", message: "API server unavailable" } }));
+    });
+    req.pipe(proxyReq, { end: true });
+  }
+  // ─── Frontend Request Handler ─────────────────────────────────────
+  handleFrontendRequest(req, res) {
     const url = new URL(req.url || "/", `http://localhost:${this.options.port}`);
     if (url.pathname === "/__dev/events") {
-      this.handleSSE(req, res);
+      this.handleSSE(req, res, this.frontendSseClients);
       return;
     }
-    if (url.pathname === "/" || url.pathname === "/__playground") {
-      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-      res.end(this.playgroundHtml);
+    if (url.pathname.startsWith("/api")) {
+      this.proxyToApiServer(req, res);
       return;
     }
-    if (!url.pathname.startsWith("/api") && !url.pathname.startsWith("/__")) {
-      const publicDir = (0, import_node_path.resolve)(this.options.projectDir, "public");
-      const filePath = (0, import_node_path.resolve)(publicDir, url.pathname.slice(1));
-      if ((0, import_node_fs.existsSync)(filePath) && !filePath.includes("..")) {
+    if (url.pathname.startsWith("/__")) {
+      this.proxyToApiServer(req, res);
+      return;
+    }
+    const ext = (0, import_node_path2.extname)(url.pathname);
+    if (ext && STATIC_EXTENSIONS.has(ext)) {
+      const filePath2 = (0, import_node_path2.resolve)(this.publicDir, url.pathname.slice(1));
+      if (filePath2.startsWith(this.publicDir) && this.serveStaticFile(filePath2, res)) {
+        return;
+      }
+      res.writeHead(404);
+      res.end("Not found");
+      return;
+    }
+    if (this.pageCompiler.isActive()) {
+      const isPartial = req.headers["x-clawfire-partial"] === "true";
+      const pagePath = this.pageCompiler.resolve(url.pathname);
+      if (pagePath) {
         try {
-          const content = (0, import_node_fs.readFileSync)(filePath);
-          const ext = filePath.split(".").pop() || "";
-          const mimeTypes = {
-            html: "text/html",
-            css: "text/css",
-            js: "application/javascript",
-            json: "application/json",
-            png: "image/png",
-            jpg: "image/jpeg",
-            svg: "image/svg+xml",
-            ico: "image/x-icon",
-            woff2: "font/woff2"
-          };
-          res.writeHead(200, { "Content-Type": mimeTypes[ext] || "application/octet-stream" });
-          res.end(content);
-          return;
+          if (isPartial) {
+            const partial = this.pageCompiler.compilePartial(pagePath, url.pathname);
+            res.writeHead(200, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(JSON.stringify(partial));
+          } else {
+            const compiled = this.pageCompiler.compile(pagePath);
+            const html = this.injectScripts(compiled.html, true);
+            res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+            res.end(html);
+          }
+        } catch (err) {
+          logger.warn(`Page compilation error: ${url.pathname}`, err);
+          res.writeHead(500, { "Content-Type": "text/html; charset=utf-8" });
+          res.end(`<h1>500 \u2014 Page Compilation Error</h1><pre>${err instanceof Error ? err.message : "Unknown error"}</pre>`);
+        }
+        return;
+      }
+      const page404 = this.pageCompiler.resolve404();
+      if (page404) {
+        try {
+          if (isPartial) {
+            const partial = this.pageCompiler.compilePartial(page404, url.pathname);
+            res.writeHead(404, { "Content-Type": "application/json; charset=utf-8" });
+            res.end(JSON.stringify(partial));
+          } else {
+            const compiled = this.pageCompiler.compile(page404);
+            const html = this.injectScripts(compiled.html, true);
+            res.writeHead(404, { "Content-Type": "text/html; charset=utf-8" });
+            res.end(html);
+          }
         } catch {
+          res.writeHead(404);
+          res.end("Not found");
         }
+        return;
       }
     }
+    const requestedPath = url.pathname === "/" ? "index.html" : url.pathname.slice(1);
+    const filePath = (0, import_node_path2.resolve)(this.publicDir, requestedPath);
+    if (!filePath.startsWith(this.publicDir)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+    if (this.serveStaticFile(filePath, res)) {
+      return;
+    }
+    const indexPath = (0, import_node_path2.resolve)(this.publicDir, "index.html");
+    if ((0, import_node_fs2.existsSync)(indexPath)) {
+      this.serveStaticFile(indexPath, res);
+      return;
+    }
+    res.writeHead(404);
+    res.end("Not found");
+  }
+  // ─── API Request Handler ──────────────────────────────────────────
+  handleApiRequest(req, res) {
+    const url = new URL(req.url || "/", `http://localhost:${this.options.apiPort}`);
+    if (url.pathname === "/__dev/events") {
+      this.handleSSE(req, res, this.apiSseClients);
+      return;
+    }
+    if (url.pathname === "/" || url.pathname === "/__playground") {
+      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+      res.end(this.playgroundHtml);
+      return;
+    }
     if (url.pathname.startsWith("/api")) {
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS");
@@ -1342,12 +1951,14 @@ var DevServer = class {
   printStartupBanner() {
     const routes = this.router.getRoutes();
     const watching = this.options.hotReload;
+    const pagesActive = this.pageCompiler.isActive();
     console.log("");
     console.log("  \x1B[1m\x1B[33m\u26A1 Clawfire Dev Server\x1B[0m");
     console.log("  \x1B[2m\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\x1B[0m");
-    console.log(`  \x1B[36mPlayground\x1B[0m : http://localhost:${this.options.port}`);
-    console.log(`  \x1B[36mAPI\x1B[0m        : http://localhost:${this.options.port}/api/...`);
-    console.log(`  \x1B[36mManifest\x1B[0m   : http://localhost:${this.options.port}/api/__manifest`);
+    console.log(`  \x1B[36mApp\x1B[0m        : http://localhost:${this.options.port}`);
+    console.log(`  \x1B[36mAPI\x1B[0m        : http://localhost:${this.options.apiPort}/api/...`);
+    console.log(`  \x1B[36mPlayground\x1B[0m : http://localhost:${this.options.apiPort}`);
+    console.log(`  \x1B[36mPages\x1B[0m      : ${pagesActive ? "\x1B[32mON\x1B[0m (app/pages/)" : "\x1B[2mOFF\x1B[0m"}`);
     console.log("");
     console.log(`  \x1B[32mRoutes (${routes.length})\x1B[0m:`);
     for (const route of routes) {
@@ -1357,8 +1968,10 @@ var DevServer = class {
     }
     console.log("");
     if (watching) {
+      const watchDirs = ["app/routes/", "app/schemas/", "public/"];
+      if (pagesActive) watchDirs.push("app/pages/", "app/components/");
       console.log(`  \x1B[35mHot Reload\x1B[0m : \x1B[32mON\x1B[0m`);
-      console.log(`  \x1B[2mWatching: app/routes/, app/schemas/\x1B[0m`);
+      console.log(`  \x1B[2mWatching: ${watchDirs.join(", ")}\x1B[0m`);
     } else {
       console.log(`  \x1B[35mHot Reload\x1B[0m : OFF`);
     }