@vertz/ui-server 0.2.14 → 0.2.16

package/dist/bun-dev-server.js

@@ -1,4 +1,8 @@
 // @bun
+import {
+  imageContentType,
+  isValidImageName
+} from "./shared/chunk-gggnhyqj.js";
 import {
   __require
 } from "./shared/chunk-eb80r8e8.js";
@@ -40,6 +44,53 @@ function createDebugLogger(logDir) {
   };
 }
 
+// src/dev-image-proxy.ts
+function jsonError(error, status) {
+  return new Response(JSON.stringify({ error, status }), {
+    status,
+    headers: { "Content-Type": "application/json" }
+  });
+}
+var FETCH_TIMEOUT_MS = 1e4;
+async function handleDevImageProxy(request) {
+  const url = new URL(request.url);
+  const sourceUrl = url.searchParams.get("url");
+  if (!sourceUrl) {
+    return jsonError('Missing required "url" parameter', 400);
+  }
+  let parsed;
+  try {
+    parsed = new URL(sourceUrl);
+  } catch {
+    return jsonError('Invalid "url" parameter', 400);
+  }
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    return jsonError("Only HTTP(S) URLs are allowed", 400);
+  }
+  let response;
+  try {
+    response = await fetch(sourceUrl, {
+      signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
+    });
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "TimeoutError") {
+      return jsonError("Image fetch timed out", 504);
+    }
+    return jsonError("Failed to fetch image", 502);
+  }
+  if (!response.ok) {
+    return jsonError(`Upstream returned status ${response.status}`, 502);
+  }
+  const contentType = response.headers.get("Content-Type") ?? "application/octet-stream";
+  return new Response(response.body, {
+    status: 200,
+    headers: {
+      "Content-Type": contentType,
+      "Cache-Control": "no-cache"
+    }
+  });
+}
+
 // src/diagnostics-collector.ts
 class DiagnosticsCollector {
   startTime = Date.now();
@@ -59,6 +110,10 @@ class DiagnosticsCollector {
   manifestFileCount = 0;
   manifestDurationMs = 0;
   manifestWarnings = [];
+  manifestHmrUpdateCount = 0;
+  manifestLastHmrUpdate = null;
+  manifestLastHmrFile = null;
+  manifestLastHmrChanged = null;
   errorCurrent = null;
   errorLastCategory = null;
   errorLastMessage = null;
@@ -67,6 +122,10 @@ class DiagnosticsCollector {
   watcherLastChangeTime = null;
   static MAX_RUNTIME_ERRORS = 10;
   runtimeErrorsBuffer = [];
+  fieldSelectionManifestFileCount = 0;
+  fieldSelectionEntries = new Map;
+  static MAX_FIELD_MISSES = 50;
+  fieldMissesBuffer = [];
   recordPluginConfig(filter, hmr, fastRefresh) {
     this.pluginFilter = filter;
     this.pluginHmr = hmr;
@@ -94,6 +153,12 @@ class DiagnosticsCollector {
     this.manifestDurationMs = durationMs;
     this.manifestWarnings = warnings;
   }
+  recordManifestUpdate(file, changed, _durationMs) {
+    this.manifestHmrUpdateCount++;
+    this.manifestLastHmrUpdate = new Date().toISOString();
+    this.manifestLastHmrFile = file;
+    this.manifestLastHmrChanged = changed;
+  }
   recordHMRAssets(bundledScriptUrl, bootstrapDiscovered) {
     this.hmrBundledScriptUrl = bundledScriptUrl;
     this.hmrBootstrapDiscovered = bootstrapDiscovered;
@@ -126,6 +191,24 @@ class DiagnosticsCollector {
   clearRuntimeErrors() {
     this.runtimeErrorsBuffer = [];
   }
+  recordFieldSelectionManifest(fileCount) {
+    this.fieldSelectionManifestFileCount = fileCount;
+  }
+  recordFieldSelection(file, entry) {
+    this.fieldSelectionEntries.set(file, entry);
+  }
+  recordFieldMiss(type, id, field, querySource) {
+    this.fieldMissesBuffer.push({
+      type,
+      id,
+      field,
+      querySource,
+      timestamp: new Date().toISOString()
+    });
+    if (this.fieldMissesBuffer.length > DiagnosticsCollector.MAX_FIELD_MISSES) {
+      this.fieldMissesBuffer = this.fieldMissesBuffer.slice(this.fieldMissesBuffer.length - DiagnosticsCollector.MAX_FIELD_MISSES);
+    }
+  }
   getSnapshot() {
     return {
       status: "ok",
@@ -152,7 +235,11 @@ class DiagnosticsCollector {
       manifest: {
         fileCount: this.manifestFileCount,
         durationMs: this.manifestDurationMs,
-        warnings: [...this.manifestWarnings]
+        warnings: [...this.manifestWarnings],
+        hmrUpdateCount: this.manifestHmrUpdateCount,
+        lastHmrUpdate: this.manifestLastHmrUpdate,
+        lastHmrFile: this.manifestLastHmrFile,
+        lastHmrChanged: this.manifestLastHmrChanged
       },
       errors: {
         current: this.errorCurrent,
@@ -166,7 +253,12 @@ class DiagnosticsCollector {
         lastChangedFile: this.watcherLastChangedFile,
         lastChangeTime: this.watcherLastChangeTime
       },
-      runtimeErrors: [...this.runtimeErrorsBuffer]
+      runtimeErrors: [...this.runtimeErrorsBuffer],
+      fieldSelection: {
+        manifestFileCount: this.fieldSelectionManifestFileCount,
+        entries: Object.fromEntries(this.fieldSelectionEntries),
+        misses: [...this.fieldMissesBuffer]
+      }
     };
   }
 }
@@ -193,6 +285,109 @@ function runWithScopedFetch(interceptor, fn) {
   return fetchScope.run(interceptor, fn);
 }
 
+// src/font-metrics.ts
+import { readFile } from "fs/promises";
+import { join as join2 } from "path";
+import { fromBuffer } from "@capsizecss/unpack";
+var SYSTEM_FONT_METRICS = {
+  Arial: {
+    ascent: 1854,
+    descent: -434,
+    lineGap: 67,
+    unitsPerEm: 2048,
+    xWidthAvg: 904
+  },
+  "Times New Roman": {
+    ascent: 1825,
+    descent: -443,
+    lineGap: 87,
+    unitsPerEm: 2048,
+    xWidthAvg: 819
+  },
+  "Courier New": {
+    ascent: 1705,
+    descent: -615,
+    lineGap: 0,
+    unitsPerEm: 2048,
+    xWidthAvg: 1229
+  }
+};
+function detectFallbackFont(fallback) {
+  for (const f of fallback) {
+    const lower = f.toLowerCase();
+    if (lower === "sans-serif" || lower === "system-ui")
+      return "Arial";
+    if (lower === "serif")
+      return "Times New Roman";
+    if (lower === "monospace")
+      return "Courier New";
+  }
+  return "Arial";
+}
+function formatPercent(value) {
+  return `${(value * 100).toFixed(2)}%`;
+}
+function computeFallbackMetrics(fontMetrics, fallbackFont) {
+  const systemMetrics = SYSTEM_FONT_METRICS[fallbackFont];
+  const fontNormalizedWidth = fontMetrics.xWidthAvg / fontMetrics.unitsPerEm;
+  const systemNormalizedWidth = systemMetrics.xWidthAvg / systemMetrics.unitsPerEm;
+  const sizeAdjust = fontNormalizedWidth / systemNormalizedWidth;
+  const ascentOverride = fontMetrics.ascent / (fontMetrics.unitsPerEm * sizeAdjust);
+  const descentOverride = Math.abs(fontMetrics.descent) / (fontMetrics.unitsPerEm * sizeAdjust);
+  const lineGapOverride = fontMetrics.lineGap / (fontMetrics.unitsPerEm * sizeAdjust);
+  return {
+    ascentOverride: formatPercent(ascentOverride),
+    descentOverride: formatPercent(descentOverride),
+    lineGapOverride: formatPercent(lineGapOverride),
+    sizeAdjust: formatPercent(sizeAdjust),
+    fallbackFont
+  };
+}
+function getPrimarySrcPath(descriptor) {
+  const { src } = descriptor;
+  if (!src)
+    return null;
+  if (typeof src === "string")
+    return src;
+  const first = src[0];
+  if (first)
+    return first.path;
+  return null;
+}
+function resolveFilePath(urlPath, rootDir) {
+  const cleaned = urlPath.startsWith("/") ? urlPath.slice(1) : urlPath;
+  return join2(rootDir, cleaned);
+}
+async function extractFontMetrics(fonts, rootDir) {
+  const result = {};
+  for (const [key, descriptor] of Object.entries(fonts)) {
+    const adjustFontFallback = descriptor.adjustFontFallback ?? true;
+    if (adjustFontFallback === false)
+      continue;
+    const srcPath = getPrimarySrcPath(descriptor);
+    if (!srcPath)
+      continue;
+    if (!srcPath.toLowerCase().endsWith(".woff2"))
+      continue;
+    try {
+      const filePath = resolveFilePath(srcPath, rootDir);
+      const buffer = await readFile(filePath);
+      const metrics = await fromBuffer(buffer);
+      const fallbackFont = typeof adjustFontFallback === "string" ? adjustFontFallback : detectFallbackFont(descriptor.fallback);
+      result[key] = computeFallbackMetrics({
+        ascent: metrics.ascent,
+        descent: metrics.descent,
+        lineGap: metrics.lineGap,
+        unitsPerEm: metrics.unitsPerEm,
+        xWidthAvg: metrics.xWidthAvg
+      }, fallbackFont);
+    } catch (error) {
+      console.warn(`[vertz] Failed to extract font metrics for "${key}" from "${srcPath}":`, error instanceof Error ? error.message : error);
+    }
+  }
+  return result;
+}
+
 // src/source-map-resolver.ts
 import { readFileSync } from "fs";
 import { resolve as resolvePath } from "path";
@@ -338,6 +533,17 @@ function createSourceMapResolver(projectRoot) {
   };
 }
 
+// src/ssr-access-set.ts
+function createAccessSetScript(accessSet, nonce) {
+  const json = JSON.stringify(accessSet);
+  const escaped = json.replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+  const nonceAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : "";
+  return `<script${nonceAttr}>window.__VERTZ_ACCESS_SET__=${escaped}</script>`;
+}
+function escapeAttr(s) {
+  return s.replace(/[&"'<>]/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+
 // src/ssr-render.ts
 import { compileTheme } from "@vertz/ui";
 import { EntityStore, MemoryCache, QueryEnvelopeStore } from "@vertz/ui/internals";
@@ -745,14 +951,14 @@ function installDomShim() {
     querySelector: () => null,
     querySelectorAll: () => [],
     getElementById: () => null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
     cookie: ""
   };
   globalThis.document = fakeDocument;
   if (typeof window === "undefined") {
     globalThis.window = {
       location: { pathname: ssrStorage.getStore()?.url || "/", search: "", hash: "" },
-      addEventListener: () => {},
-      removeEventListener: () => {},
       history: {
         pushState: () => {},
         replaceState: () => {}
@@ -865,14 +1071,14 @@ var RAW_TEXT_ELEMENTS = new Set(["script", "style"]);
 function escapeHtml(text) {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function escapeAttr(value) {
+function escapeAttr2(value) {
   const str = typeof value === "string" ? value : String(value);
   return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
 function serializeAttrs(attrs) {
   const parts = [];
   for (const [key, value] of Object.entries(attrs)) {
-    parts.push(` ${key}="${escapeAttr(value)}"`);
+    parts.push(` ${key}="${escapeAttr2(value)}"`);
   }
   return parts.join("");
 }
@@ -937,7 +1143,7 @@ async function streamToString(stream) {
 function createTemplateChunk(slotId, resolvedHtml, nonce) {
   const tmplId = `v-tmpl-${slotId}`;
   const slotRef = `v-slot-${slotId}`;
-  const nonceAttr = nonce != null ? ` nonce="${escapeAttr(nonce)}"` : "";
+  const nonceAttr = nonce != null ? ` nonce="${escapeAttr2(nonce)}"` : "";
   return `<template id="${tmplId}">${resolvedHtml}</template>` + `<script${nonceAttr}>` + `(function(){` + `var s=document.getElementById("${slotRef}");` + `var t=document.getElementById("${tmplId}");` + `if(s&&t){s.replaceWith(t.content.cloneNode(true));t.remove()}` + `})()` + "</script>";
 }
 
@@ -964,7 +1170,7 @@ function renderToStream(tree, options) {
     }
     const { tag, attrs, children } = node;
     const isRawText = RAW_TEXT_ELEMENTS.has(tag);
-    const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${escapeAttr(v)}"`).join("");
+    const attrStr = Object.entries(attrs).map(([k, v]) => ` ${k}="${escapeAttr2(v)}"`).join("");
     if (VOID_ELEMENTS.has(tag)) {
       return `<${tag}${attrStr}>`;
     }
@@ -1020,7 +1226,7 @@ function createRequestContext(url) {
     contextScope: null,
     entityStore: new EntityStore,
     envelopeStore: new QueryEnvelopeStore,
-    queryCache: new MemoryCache,
+    queryCache: new MemoryCache({ maxSize: Infinity }),
     inflight: new Map,
     queries: [],
     errors: []
@@ -1041,9 +1247,6 @@ function resolveAppFactory(module) {
   return createApp;
 }
 function collectCSS(themeCss, module) {
-  const themeTag = themeCss ? `<style data-vertz-css>${themeCss}</style>` : "";
-  const globalTags = module.styles ? module.styles.map((s) => `<style data-vertz-css>${s}</style>`).join(`
-`) : "";
   const alreadyIncluded = new Set;
   if (themeCss)
     alreadyIncluded.add(themeCss);
@@ -1052,9 +1255,12 @@ function collectCSS(themeCss, module) {
       alreadyIncluded.add(s);
   }
   const componentCss = module.getInjectedCSS ? module.getInjectedCSS().filter((s) => !alreadyIncluded.has(s)) : [];
-  const componentStyles = componentCss.map((s) => `<style data-vertz-css>${s}</style>`).join(`
-`);
-  return [themeTag, globalTags, componentStyles].filter(Boolean).join(`
+  const themeTag = themeCss ? `<style data-vertz-css>${themeCss}</style>` : "";
+  const globalTag = module.styles && module.styles.length > 0 ? `<style data-vertz-css>${module.styles.join(`
+`)}</style>` : "";
+  const componentTag = componentCss.length > 0 ? `<style data-vertz-css>${componentCss.join(`
+`)}</style>` : "";
+  return [themeTag, globalTag, componentTag].filter(Boolean).join(`
 `);
 }
 async function ssrRenderToString(module, url, options) {
@@ -1067,14 +1273,40 @@ async function ssrRenderToString(module, url, options) {
       setGlobalSSRTimeout(ssrTimeout);
       const createApp = resolveAppFactory(module);
       let themeCss = "";
+      let themePreloadTags = "";
       if (module.theme) {
         try {
-          themeCss = compileTheme(module.theme).css;
+          const compiled = compileTheme(module.theme, {
+            fallbackMetrics: options?.fallbackMetrics
+          });
+          themeCss = compiled.css;
+          themePreloadTags = compiled.preloadTags;
         } catch (e) {
           console.error("[vertz] Failed to compile theme export. Ensure your theme is created with defineTheme().", e);
         }
       }
       createApp();
+      const store = ssrStorage.getStore();
+      if (store) {
+        if (store.pendingRouteComponents?.size) {
+          const entries = Array.from(store.pendingRouteComponents.entries());
+          const results = await Promise.allSettled(entries.map(([route, promise]) => Promise.race([
+            promise.then((mod) => ({ route, factory: mod.default })),
+            new Promise((_, reject) => setTimeout(() => reject(new Error("lazy route timeout")), ssrTimeout))
+          ])));
+          store.resolvedComponents = new Map;
+          for (const result of results) {
+            if (result.status === "fulfilled") {
+              const { route, factory } = result.value;
+              store.resolvedComponents.set(route, factory);
+            }
+          }
+          store.pendingRouteComponents = undefined;
+        }
+        if (!store.resolvedComponents) {
+          store.resolvedComponents = new Map;
+        }
+      }
       const queries = getSSRQueries();
       const resolvedQueries = [];
       if (queries.length > 0) {
@@ -1086,7 +1318,6 @@ async function ssrRenderToString(module, url, options) {
           }),
           new Promise((r) => setTimeout(r, timeout || ssrTimeout)).then(() => "timeout")
         ])));
-        const store = ssrStorage.getStore();
         if (store)
           store.queries = [];
       }
@@ -1099,7 +1330,13 @@ async function ssrRenderToString(module, url, options) {
         key,
         data: JSON.parse(JSON.stringify(data))
       })) : [];
-      return { html, css, ssrData };
+      return {
+        html,
+        css,
+        ssrData,
+        headTags: themePreloadTags,
+        discoveredRoutes: ctx.discoveredRoutes
+      };
     } finally {
       clearGlobalSSRTimeout();
     }
@@ -1203,6 +1440,17 @@ data: ${safeSerialize(entry)}
   });
 }
 
+// src/ssr-session.ts
+function createSessionScript(session, nonce) {
+  const json = JSON.stringify(session);
+  const escaped = json.replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+  const nonceAttr = nonce ? ` nonce="${escapeAttr3(nonce)}"` : "";
+  return `<script${nonceAttr}>window.__VERTZ_SESSION__=${escaped}</script>`;
+}
+function escapeAttr3(s) {
+  return s.replace(/[&"'<>]/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+
 // src/bun-dev-server.ts
 var MAX_TERMINAL_STACK_FRAMES = 5;
 function formatTerminalRuntimeError(errors, parsedStack) {
@@ -1431,7 +1679,8 @@ function generateSSRPageHtml({
   ssrData,
   scriptTag,
   editor = "vscode",
-  headTags = ""
+  headTags = "",
+  sessionScript = ""
 }) {
   const ssrDataScript = ssrData.length > 0 ? `<script>window.__VERTZ_SSR_DATA__=${safeSerialize(ssrData)};</script>` : "";
   return `<!doctype html>
@@ -1447,6 +1696,7 @@ function generateSSRPageHtml({
   </head>
   <body>
     <div id="app">${bodyHtml}</div>
+    ${sessionScript}
     ${ssrDataScript}
     ${scriptTag}
   </body>
@@ -1509,6 +1759,13 @@ function buildScriptTag(bundledScriptUrl, hmrBootstrapScript, clientSrc) {
   }
   return `<script type="module" src="${clientSrc}"></script>`;
 }
+function clearSSRRequireCache() {
+  const keys = Object.keys(__require.cache);
+  for (const key of keys) {
+    delete __require.cache[key];
+  }
+  return keys.length;
+}
 function createBunDevServer(options) {
   const {
     entry,
@@ -1522,7 +1779,8 @@ function createBunDevServer(options) {
     projectRoot = process.cwd(),
     logRequests = true,
     editor: editorOption,
-    headTags = ""
+    headTags = "",
+    sessionResolver
   } = options;
   const editor = detectEditor(editorOption);
   if (apiHandler) {
@@ -1776,7 +2034,7 @@ function createBunDevServer(options) {
         }));
       }
     });
-    const { plugin: serverPlugin } = createVertzBunPlugin({
+    const { plugin: serverPlugin, updateManifest: updateServerManifest } = createVertzBunPlugin({
       hmr: false,
       fastRefresh: false,
       logger,
@@ -1793,6 +2051,14 @@ function createBunDevServer(options) {
       console.error("[Server] Failed to load SSR module:", e);
       process.exit(1);
     }
+    let fontFallbackMetrics;
+    if (ssrMod.theme?.fonts) {
+      try {
+        fontFallbackMetrics = await extractFontMetrics(ssrMod.theme.fonts, projectRoot);
+      } catch (e) {
+        console.warn("[Server] Failed to extract font metrics:", e);
+      }
+    }
     mkdirSync(devDir, { recursive: true });
     const frInitPath = resolve(devDir, "fast-refresh-init.ts");
     writeFileSync2(frInitPath, `import '@vertz/ui-server/fast-refresh-runtime';
@@ -1877,6 +2143,31 @@ if (import.meta.hot) import.meta.hot.accept();
         if (pathname === "/__vertz_diagnostics") {
           return Response.json(diagnostics.getSnapshot());
         }
+        if (pathname === "/_vertz/image") {
+          return handleDevImageProxy(request);
+        }
+        if (pathname.startsWith("/__vertz_img/")) {
+          const imgName = pathname.slice("/__vertz_img/".length);
+          if (!isValidImageName(imgName)) {
+            return new Response("Forbidden", { status: 403 });
+          }
+          const imagesDir = resolve(projectRoot, ".vertz", "images");
+          const imgPath = resolve(imagesDir, imgName);
+          if (!imgPath.startsWith(imagesDir)) {
+            return new Response("Forbidden", { status: 403 });
+          }
+          const file = Bun.file(imgPath);
+          if (await file.exists()) {
+            const ext = imgName.split(".").pop();
+            return new Response(file, {
+              headers: {
+                "Content-Type": imageContentType(ext),
+                "Cache-Control": "public, max-age=31536000, immutable"
+              }
+            });
+          }
+          return new Response("Not Found", { status: 404 });
+        }
         if (openapi && request.method === "GET" && pathname === "/api/openapi.json") {
           return serveOpenAPISpec();
         }
@@ -1937,16 +2228,38 @@ data: {}
             skipSSRPaths,
             originalFetch: globalThis.fetch
           }) : null;
+          let sessionScript = "";
+          if (sessionResolver) {
+            try {
+              const sessionResult = await sessionResolver(request);
+              if (sessionResult) {
+                const scripts = [];
+                scripts.push(createSessionScript(sessionResult.session));
+                if (sessionResult.accessSet != null) {
+                  scripts.push(createAccessSetScript(sessionResult.accessSet));
+                }
+                sessionScript = scripts.join(`
+`);
+              }
+            } catch (resolverErr) {
+              console.warn("[Server] Session resolver failed:", resolverErr instanceof Error ? resolverErr.message : resolverErr);
+            }
+          }
           const doRender = async () => {
             logger.log("ssr", "render-start", { url: pathname });
             const ssrStart = performance.now();
-            const result = await ssrRenderToString(ssrMod, pathname, { ssrTimeout: 300 });
+            const result = await ssrRenderToString(ssrMod, pathname, {
+              ssrTimeout: 300,
+              fallbackMetrics: fontFallbackMetrics
+            });
             logger.log("ssr", "render-done", {
               url: pathname,
               durationMs: Math.round(performance.now() - ssrStart),
               htmlBytes: result.html.length
             });
             const scriptTag = buildScriptTag(bundledScriptUrl, hmrBootstrapScript, clientSrc);
+            const combinedHeadTags = [headTags, result.headTags].filter(Boolean).join(`
+`);
             const html = generateSSRPageHtml({
               title,
               css: result.css,
@@ -1954,7 +2267,8 @@ data: {}
               ssrData: result.ssrData,
               scriptTag,
               editor,
-              headTags
+              headTags: combinedHeadTags,
+              sessionScript
             });
             return new Response(html, {
               status: 200,
@@ -2188,14 +2502,19 @@ data: {}
           } catch {}
           if (stopped)
             return;
-          const cacheKeys = Object.keys(__require.cache);
-          let cacheCleared = 0;
-          for (const key of cacheKeys) {
-            if (key.startsWith(srcDir) || key.startsWith(entryPath)) {
-              delete __require.cache[key];
-              cacheCleared++;
-            }
+          if (filename.endsWith(".ts") || filename.endsWith(".tsx")) {
+            const changedFilePath = resolve(srcDir, filename);
+            try {
+              const manifestStartMs = performance.now();
+              const source = await Bun.file(changedFilePath).text();
+              const { changed } = updateServerManifest(changedFilePath, source);
+              const manifestDurationMs = Math.round(performance.now() - manifestStartMs);
+              diagnostics.recordManifestUpdate(lastChangedFile, changed, manifestDurationMs);
+            } catch {}
           }
+          if (stopped)
+            return;
+          const cacheCleared = clearSSRRequireCache();
           logger.log("watcher", "cache-cleared", { entries: cacheCleared });
           const ssrWrapperPath = resolve(devDir, "ssr-reload-entry.ts");
           mkdirSync(devDir, { recursive: true });
@@ -2205,6 +2524,11 @@ data: {}
           try {
             const freshMod = await import(`${ssrWrapperPath}?t=${Date.now()}`);
             ssrMod = freshMod;
+            if (freshMod.theme?.fonts) {
+              try {
+                fontFallbackMetrics = await extractFontMetrics(freshMod.theme.fonts, projectRoot);
+              } catch {}
+            }
             const durationMs = Math.round(performance.now() - ssrReloadStart);
             diagnostics.recordSSRReload(true, durationMs);
             logger.log("watcher", "ssr-reload", { status: "ok", durationMs });
@@ -2218,18 +2542,18 @@ data: {}
             await new Promise((r) => setTimeout(r, 500));
             if (stopped)
               return;
-            const retryKeys = Object.keys(__require.cache);
-            for (const key of retryKeys) {
-              if (key.startsWith(srcDir) || key.startsWith(entryPath)) {
-                delete __require.cache[key];
-              }
-            }
+            clearSSRRequireCache();
             mkdirSync(devDir, { recursive: true });
             writeFileSync2(ssrWrapperPath, `export * from '${entryPath}';
 `);
             try {
               const freshMod = await import(`${ssrWrapperPath}?t=${Date.now()}`);
               ssrMod = freshMod;
+              if (freshMod.theme?.fonts) {
+                try {
+                  fontFallbackMetrics = await extractFontMetrics(freshMod.theme.fonts, projectRoot);
+                } catch {}
+              }
               const durationMs = Math.round(performance.now() - ssrReloadStart);
               diagnostics.recordSSRReload(true, durationMs);
               logger.log("watcher", "ssr-reload", { status: "ok", durationMs, retry: true });
@@ -2287,5 +2611,6 @@ export {
   createRuntimeErrorDeduplicator,
   createFetchInterceptor,
   createBunDevServer,
+  clearSSRRequireCache,
   buildScriptTag
 };