@vertz/ui-server 0.2.20 → 0.2.22

package/dist/bun-dev-server.d.ts

@@ -83,6 +83,7 @@ interface ErrorDetail {
 	stack?: string;
 }
 type ErrorCategory = "build" | "resolve" | "runtime" | "ssr";
+declare function isStaleGraphError(message: string): boolean;
 /** A resolved stack frame for terminal logging. */
 interface TerminalStackFrame {
 	functionName: string | null;
@@ -108,6 +109,13 @@ declare function createRuntimeErrorDeduplicator(): {
 interface BunDevServer {
 	start(): Promise<void>;
 	stop(): Promise<void>;
+	/**
+	* Soft-restart the dev server: stops Bun.serve(), clears all caches,
+	* creates a fresh Bun.serve() with a clean HMR module graph.
+	* Broadcasts { type: 'restarting' } to clients before stopping.
+	* Skips one-time setup (plugin registration, console.error patching).
+	*/
+	restart(): Promise<void>;
 	/** Broadcast an error to all connected WebSocket clients. */
 	broadcastError(category: ErrorCategory, errors: ErrorDetail[]): void;
 	/** Clear current error and notify all connected WebSocket clients.
@@ -185,4 +193,4 @@ declare function clearSSRRequireCache(): number;
 * SSR is always on. HMR always works. No mode toggle needed.
 */
 declare function createBunDevServer(options: BunDevServerOptions): BunDevServer;
-export { parseHMRAssets, generateSSRPageHtml, formatTerminalRuntimeError, detectFaviconTag, createRuntimeErrorDeduplicator, createFetchInterceptor, createBunDevServer, clearSSRRequireCache, buildScriptTag, SSRPageHtmlOptions, HMRAssets, FetchInterceptorOptions, ErrorDetail, ErrorCategory, BunDevServerOptions, BunDevServer };
+export { parseHMRAssets, isStaleGraphError, generateSSRPageHtml, formatTerminalRuntimeError, detectFaviconTag, createRuntimeErrorDeduplicator, createFetchInterceptor, createBunDevServer, clearSSRRequireCache, buildScriptTag, SSRPageHtmlOptions, HMRAssets, FetchInterceptorOptions, ErrorDetail, ErrorCategory, BunDevServerOptions, BunDevServer };

package/dist/bun-dev-server.js

@@ -611,6 +611,9 @@ class SSRComment extends SSRNode {
   }
 }
 
+// src/dom-shim/ssr-element.ts
+import { __styleStr } from "@vertz/ui/internals";
+
 // src/types.ts
 function rawHtml(html) {
   return { __raw: true, html };
@@ -654,6 +657,52 @@ class SSRDocumentFragment extends SSRNode {
 }
 
 // src/dom-shim/ssr-element.ts
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function kebabToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function createDatasetProxy(element) {
+  return new Proxy({}, {
+    set(_target, prop, value) {
+      if (typeof prop === "string") {
+        element.setAttribute(`data-${camelToKebab(prop)}`, String(value));
+      }
+      return true;
+    },
+    get(_target, prop) {
+      if (typeof prop === "string") {
+        return element.getAttribute(`data-${camelToKebab(prop)}`) ?? undefined;
+      }
+      return;
+    },
+    has(_target, prop) {
+      if (typeof prop === "string") {
+        return element.getAttribute(`data-${camelToKebab(prop)}`) !== null;
+      }
+      return false;
+    },
+    deleteProperty(_target, prop) {
+      if (typeof prop === "string") {
+        element.removeAttribute(`data-${camelToKebab(prop)}`);
+      }
+      return true;
+    },
+    ownKeys() {
+      return Object.keys(element.attrs).filter((k) => k.startsWith("data-")).map((k) => kebabToCamel(k.slice(5)));
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (typeof prop === "string") {
+        const val = element.getAttribute(`data-${camelToKebab(prop)}`);
+        if (val !== null) {
+          return { configurable: true, enumerable: true, value: val };
+        }
+      }
+      return;
+    }
+  });
+}
 function createStyleProxy(element) {
   const styles = {};
   return new Proxy(styles, {
@@ -685,16 +734,27 @@ class SSRElement extends SSRNode {
   _textContent = null;
   _innerHTML = null;
   style;
+  dataset;
   constructor(tag) {
     super();
     this.tag = tag;
     this.style = createStyleProxy(this);
+    this.dataset = createDatasetProxy(this);
   }
   setAttribute(name, value) {
-    if (name === "class") {
+    if (name === "style" && typeof value === "object" && value !== null) {
+      this.attrs.style = __styleStr(value);
+      for (const [k, v] of Object.entries(value)) {
+        if (v != null)
+          this.style[k] = String(v);
+      }
+      return;
+    }
+    const attrName = name === "className" ? "class" : name;
+    if (attrName === "class") {
       this._classList = new Set(value.split(/\s+/).filter(Boolean));
     }
-    this.attrs[name] = value;
+    this.attrs[attrName] = value;
   }
   getAttribute(name) {
     return this.attrs[name] ?? null;
@@ -831,6 +891,86 @@ class SSRElement extends SSRNode {
   get innerHTML() {
     return this._innerHTML ?? "";
   }
+  get placeholder() {
+    return this.attrs.placeholder ?? "";
+  }
+  set placeholder(value) {
+    this.attrs.placeholder = value;
+  }
+  get type() {
+    return this.attrs.type ?? "";
+  }
+  set type(value) {
+    this.attrs.type = value;
+  }
+  get name() {
+    return this.attrs.name ?? "";
+  }
+  set name(value) {
+    this.attrs.name = value;
+  }
+  get value() {
+    return this.attrs.value ?? "";
+  }
+  set value(value) {
+    this.attrs.value = value;
+  }
+  get src() {
+    return this.attrs.src ?? "";
+  }
+  set src(value) {
+    this.attrs.src = value;
+  }
+  get alt() {
+    return this.attrs.alt ?? "";
+  }
+  set alt(value) {
+    this.attrs.alt = value;
+  }
+  get htmlFor() {
+    return this.attrs.for ?? "";
+  }
+  set htmlFor(value) {
+    this.attrs.for = value;
+  }
+  get disabled() {
+    return "disabled" in this.attrs;
+  }
+  set disabled(value) {
+    if (value) {
+      this.attrs.disabled = "";
+    } else {
+      delete this.attrs.disabled;
+    }
+  }
+  get checked() {
+    return "checked" in this.attrs;
+  }
+  set checked(value) {
+    if (value) {
+      this.attrs.checked = "";
+    } else {
+      delete this.attrs.checked;
+    }
+  }
+  get rows() {
+    return Number(this.attrs.rows) || 0;
+  }
+  set rows(value) {
+    this.attrs.rows = String(value);
+  }
+  get scope() {
+    return this.attrs.scope ?? "";
+  }
+  set scope(value) {
+    this.attrs.scope = value;
+  }
+  get href() {
+    return this.attrs.href ?? "";
+  }
+  set href(value) {
+    this.attrs.href = value;
+  }
   addEventListener(_event, _handler) {}
   removeEventListener(_event, _handler) {}
   toVNode() {
@@ -1347,7 +1487,8 @@ async function ssrRenderToString(module, url, options) {
         css,
         ssrData,
         headTags: themePreloadTags,
-        discoveredRoutes: ctx.discoveredRoutes
+        discoveredRoutes: ctx.discoveredRoutes,
+        matchedRoutePatterns: ctx.matchedRoutePatterns
       };
     } finally {
       clearGlobalSSRTimeout();
@@ -1468,6 +1609,14 @@ function detectFaviconTag(projectRoot) {
   const faviconPath = resolve(projectRoot, "public", "favicon.svg");
   return existsSync(faviconPath) ? '<link rel="icon" type="image/svg+xml" href="/favicon.svg">' : "";
 }
+var STALE_GRAPH_PATTERNS = [
+  /Export named ['"].*['"] not found in module/i,
+  /No matching export in ['"].*['"] for import/i,
+  /does not provide an export named/i
+];
+function isStaleGraphError(message) {
+  return STALE_GRAPH_PATTERNS.some((pattern) => pattern.test(message));
+}
 var MAX_TERMINAL_STACK_FRAMES = 5;
 function formatTerminalRuntimeError(errors, parsedStack) {
   const primary = errors[0];
@@ -1562,6 +1711,24 @@ function buildErrorChannelScript(editor) {
     "V._src=null;",
     "V._hadClientError=false;",
     "V._needsReload=false;",
+    "V._restarting=false;",
+    `V.isStaleGraph=function(m){return/Export named ['"].*['"] not found in module/i.test(m)||/No matching export in ['"].*['"] for import/i.test(m)||/does not provide an export named/i.test(m)};`,
+    "V._canAutoRestart=function(){",
+    "var raw=sessionStorage.getItem('__vertz_auto_restart');",
+    "var ts;try{ts=raw?JSON.parse(raw):[]}catch(e){ts=[]}",
+    "var now=Date.now();",
+    "ts=ts.filter(function(t){return now-t<10000});",
+    "return ts.length<3};",
+    "V._autoRestart=function(){",
+    "if(V._restarting)return;",
+    "var raw=sessionStorage.getItem('__vertz_auto_restart');",
+    "var ts;try{ts=raw?JSON.parse(raw):[]}catch(e){ts=[]}",
+    "var now=Date.now();",
+    "ts=ts.filter(function(t){return now-t<10000});",
+    "if(ts.length>=3)return;",
+    "ts.push(now);",
+    "sessionStorage.setItem('__vertz_auto_restart',JSON.stringify(ts));",
+    "if(V._ws&&V._ws.readyState===1){V._ws.send(JSON.stringify({type:'restart'}))}};",
     'var rts=sessionStorage.getItem("__vertz_recovering");',
     "V._recovering=rts&&(Date.now()-Number(rts)<10000);",
     'if(V._recovering)sessionStorage.removeItem("__vertz_recovering");',
@@ -1602,7 +1769,7 @@ function buildErrorChannelScript(editor) {
     `var link=href?'<a href="'+href+'" style="color:var(--ve-link);text-decoration:underline;text-underline-offset:2px">'+loc+'</a>':'<span>'+loc+'</span>';`,
     `return'<div style="font-size:11px;color:'+color+';margin:1px 0;font-family:ui-monospace,monospace">'+V.esc(name)+' '+link+'</div>'};`,
     "V.removeOverlay=function(){V._src=null;var e=document.getElementById('__vertz_error');if(e)e.remove();" + "var d=document.getElementById('__vertz_error_data');if(d)d.remove()};",
-    "V.showOverlay=function(t,body,payload,src){",
+    "V.showOverlay=function(t,body,payload,src,restartable){",
     "V.removeOverlay();",
     "V._src=src||'ws';",
     "var d=document,c=d.createElement('div');",
@@ -1621,12 +1788,16 @@ function buildErrorChannelScript(editor) {
     "--ve-error:hsl(0 72% 65%);--ve-link:hsl(217 91% 70%);--ve-border:hsl(0 0% 18%);",
     "--ve-code:hsl(36 80% 65%);--ve-code-bg:hsl(0 0% 11%);--ve-btn:hsl(0 0% 93%);--ve-btn-fg:hsl(0 0% 7%)}}';",
     "d.head.appendChild(st);",
+    `var btns=restartable?'<div style="display:flex;gap:6px">'`,
+    `+'<button id="__vertz_restart" style="background:var(--ve-btn);color:var(--ve-btn-fg);border:none;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;font-weight:500">Restart Server</button>'`,
+    `+'<button id="__vertz_retry" style="background:transparent;color:var(--ve-muted);border:1px solid var(--ve-border);border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer">Retry</button></div>'`,
+    `:'<button id="__vertz_retry" style="background:var(--ve-btn);color:var(--ve-btn-fg);border:none;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;font-weight:500">Retry</button>';`,
     `c.innerHTML='<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px">'`,
     `+'<span style="font-size:13px;font-weight:600;color:var(--ve-error)">'+V.esc(t)+'</span>'`,
-    `+'<button id="__vertz_retry" style="background:var(--ve-btn);color:var(--ve-btn-fg);border:none;border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;font-weight:500">Retry</button>'`,
-    "+'</div>'+body;",
+    "+btns+'</div>'+body;",
     "(d.body||d.documentElement).appendChild(c);",
     "d.getElementById('__vertz_retry').onclick=function(){location.reload()};",
+    "var rb=d.getElementById('__vertz_restart');if(rb){rb.onclick=function(){if(V._ws&&V._ws.readyState===1){V._ws.send(JSON.stringify({type:'restart'}))}}};",
     "if(payload){var s=d.createElement('script');s.type='application/json';s.id='__vertz_error_data';s.textContent=JSON.stringify(payload);(d.body||d.documentElement).appendChild(s)}};",
     "var delay=1000,maxDelay=30000;",
     "function connect(){",
@@ -1637,16 +1808,30 @@ function buildErrorChannelScript(editor) {
     "try{var m=JSON.parse(e.data);",
     "if(m.type==='error'){",
     "if(V._recovering)return;",
-    "V.showOverlay(m.category==='build'?'Build failed':m.category==='ssr'?'SSR error':m.category==='resolve'?'Module not found':'Runtime error',V.formatErrors(m.errors)+V.formatStack(m.parsedStack),m,'ws')}",
+    "var sg=m.errors&&m.errors.some(function(e){return V.isStaleGraph(e.message)});",
+    "V.showOverlay(m.category==='build'?'Build failed':m.category==='ssr'?'SSR error':m.category==='resolve'?'Module not found':'Runtime error',V.formatErrors(m.errors)+V.formatStack(m.parsedStack),m,'ws',sg)}",
     "else if(m.type==='clear'){",
     "if(V._needsReload){V._needsReload=false;V.removeOverlay();sessionStorage.setItem('__vertz_recovering',String(Date.now()));_reload();return}",
     "var a=document.getElementById('app');",
     "if(!a||a.innerHTML.length<50){V.removeOverlay();sessionStorage.setItem('__vertz_recovering',String(Date.now()));_reload();return}",
     "if(V._hadClientError)return;",
     "V.removeOverlay()}",
-    "else if(m.type==='connected'){delay=1000}",
+    "else if(m.type==='restarting'){",
+    "V._restarting=true;",
+    "V.removeOverlay();",
+    "V._src='ws';",
+    "sessionStorage.removeItem('__vertz_reload_count');sessionStorage.removeItem('__vertz_reload_ts');",
+    "var d2=document,c2=d2.createElement('div');c2.id='__vertz_error';",
+    "c2.style.cssText='position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:2147483647;background:#1a1a1a;color:#fff;border-radius:8px;padding:14px 20px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:13px;box-shadow:0 4px 24px rgba(0,0,0,0.2)';",
+    "c2.textContent='Restarting dev server\\u2026';",
+    "(d2.body||d2.documentElement).appendChild(c2);",
+    "V._restartTimer=setTimeout(function(){var el=d2.getElementById('__vertz_error');if(el){el.textContent='Restart timed out. Try restarting manually (Ctrl+C and re-run).'}V._restarting=false},10000)}",
+    "else if(m.type==='connected'){delay=1000;",
+    "var restartEl=document.getElementById('__vertz_error');",
+    "var timedOut=restartEl&&restartEl.textContent&&restartEl.textContent.indexOf('timed out')!==-1;",
+    "if(V._restarting||timedOut){V._restarting=false;if(V._restartTimer){clearTimeout(V._restartTimer);V._restartTimer=null}_reload()}}",
     "}catch(ex){}};",
-    "ws.onclose=function(){V._ws=null;setTimeout(function(){delay=Math.min(delay*2,maxDelay);connect()},delay)};",
+    "ws.onclose=function(){V._ws=null;var d3=V._restarting?100:delay;setTimeout(function(){if(!V._restarting){delay=Math.min(delay*2,maxDelay)}connect()},d3)};",
     "ws.onerror=function(){ws.close()}}",
     "connect();",
     "V._sendResolveStack=function(stack,msg){",
@@ -1656,8 +1841,11 @@ function buildErrorChannelScript(editor) {
     "if(V._recovering&&a&&a.innerHTML.length>50)return;",
     "if(V._recovering)V._recovering=false;",
     "V._hadClientError=true;",
-    "V.showOverlay(title,V.formatErrors(errors),payload,'client')}",
+    "var sg2=errors&&errors.some(function(e){return V.isStaleGraph(e.message)});",
+    "V.showOverlay(title,V.formatErrors(errors),payload,'client',sg2);",
+    "if(sg2){V._autoRestart()}}",
     "if(V._recovering){setTimeout(function(){V._recovering=false},5000)}",
+    "setTimeout(function(){sessionStorage.removeItem('__vertz_auto_restart')},5000);",
     "window.addEventListener('error',function(e){",
     "var msg=e.message||String(e.error);",
     "var stk=e.error&&e.error.stack;",
@@ -1675,7 +1863,7 @@ function buildErrorChannelScript(editor) {
     "var t=Array.prototype.join.call(arguments,' ');",
     "var hmr=t.match(/\\[vertz-hmr\\] Error re-mounting (\\w+): ([\\s\\S]*?)(?:\\n\\s+at |$)/);",
     "if(hmr){hmrErr=true;V._hadClientError=true;",
-    "V.showOverlay('Runtime error',V.formatErrors([{message:hmr[2].split('\\n')[0]}]),{type:'error',category:'runtime',errors:[{message:hmr[2].split('\\n')[0]}]},'client')}",
+    "var hmrMsg=hmr[2].split('\\n')[0];var hmrSg=V.isStaleGraph(hmrMsg);V.showOverlay('Runtime error',V.formatErrors([{message:hmrMsg}]),{type:'error',category:'runtime',errors:[{message:hmrMsg}]},'client',hmrSg);if(hmrSg){V._autoRestart()}}",
     "origCE.apply(console,arguments)};",
     "console.log=function(){",
     "var t=Array.prototype.join.call(arguments,' ');",
@@ -1819,6 +2007,16 @@ function createBunDevServer(options) {
   let clearGraceUntil = 0;
   let runtimeDebounceTimer = null;
   let pendingRuntimeError = null;
+  const autoRestartTimestamps = [];
+  const AUTO_RESTART_CAP = 3;
+  const AUTO_RESTART_WINDOW_MS = 1e4;
+  function canAutoRestart() {
+    const now = Date.now();
+    while (autoRestartTimestamps.length > 0 && now - (autoRestartTimestamps[0] ?? 0) > AUTO_RESTART_WINDOW_MS) {
+      autoRestartTimestamps.shift();
+    }
+    return autoRestartTimestamps.length < AUTO_RESTART_CAP;
+  }
   function broadcastError(category, errors) {
     if (currentError?.category === "build" && category !== "build") {
       return;
@@ -1827,6 +2025,26 @@ function createBunDevServer(options) {
       return;
     }
     if (category === "runtime") {
+      if (errors.some((e) => isStaleGraphError(e.message ?? ""))) {
+        currentError = { category: "runtime", errors };
+        const errMsg = JSON.stringify({ type: "error", category: "runtime", errors });
+        for (const ws of wsClients) {
+          ws.sendText(errMsg);
+        }
+        if (!isRestarting && canAutoRestart()) {
+          autoRestartTimestamps.push(Date.now());
+          if (logRequests) {
+            const truncated = errors[0]?.message?.slice(0, 80) ?? "";
+            console.log(`[Server] Stale graph detected: ${truncated}`);
+          }
+          devServer.restart();
+        } else if (!isRestarting && !canAutoRestart()) {
+          if (logRequests) {
+            console.log("[Server] Auto-restart cap reached (3 in 10s), waiting for manual restart");
+          }
+        }
+        return;
+      }
       if (!pendingRuntimeError || errors.some((e) => e.file)) {
         pendingRuntimeError = errors;
       }
@@ -2034,32 +2252,42 @@ function createBunDevServer(options) {
     }
     return new Response("OpenAPI spec not found", { status: 404 });
   };
+  let isRestarting = false;
+  let pluginsRegistered = false;
+  let stableUpdateManifest = null;
   async function start() {
     const { plugin } = await Promise.resolve(globalThis.Bun);
     const { createVertzBunPlugin } = await import("./bun-plugin/index.js");
     const entryPath = resolve(projectRoot, entry);
     const rawClientSrc = clientEntryOption ?? entry;
     const clientSrc = rawClientSrc.replace(/^\.\//, "/");
-    plugin({
-      name: "vertz-ssr-jsx-swap",
-      setup(build) {
-        build.onResolve({ filter: /^@vertz\/ui\/jsx-runtime$/ }, () => ({
-          path: "@vertz/ui-server/jsx-runtime",
-          external: false
-        }));
-        build.onResolve({ filter: /^@vertz\/ui\/jsx-dev-runtime$/ }, () => ({
-          path: "@vertz/ui-server/jsx-runtime",
-          external: false
-        }));
-      }
-    });
-    const { plugin: serverPlugin, updateManifest: updateServerManifest } = createVertzBunPlugin({
-      hmr: false,
-      fastRefresh: false,
-      logger,
-      diagnostics
-    });
-    plugin(serverPlugin);
+    if (!pluginsRegistered) {
+      plugin({
+        name: "vertz-ssr-jsx-swap",
+        setup(build) {
+          build.onResolve({ filter: /^@vertz\/ui\/jsx-runtime$/ }, () => ({
+            path: "@vertz/ui-server/jsx-runtime",
+            external: false
+          }));
+          build.onResolve({ filter: /^@vertz\/ui\/jsx-dev-runtime$/ }, () => ({
+            path: "@vertz/ui-server/jsx-runtime",
+            external: false
+          }));
+        }
+      });
+    }
+    if (!pluginsRegistered) {
+      const { plugin: serverPlugin, updateManifest } = createVertzBunPlugin({
+        hmr: false,
+        fastRefresh: false,
+        logger,
+        diagnostics
+      });
+      plugin(serverPlugin);
+      stableUpdateManifest = updateManifest;
+    }
+    pluginsRegistered = true;
+    const updateServerManifest = stableUpdateManifest;
     let ssrMod;
     try {
       ssrMod = await import(entryPath);
@@ -2068,6 +2296,9 @@ function createBunDevServer(options) {
       }
     } catch (e) {
       console.error("[Server] Failed to load SSR module:", e);
+      if (isRestarting) {
+        throw e;
+      }
       process.exit(1);
     }
     let fontFallbackMetrics;
@@ -2272,6 +2503,18 @@ data: {}
               console.warn("[Server] Session resolver failed:", resolverErr instanceof Error ? resolverErr.message : resolverErr);
             }
           }
+          if (ssrAuth && apiHandler) {
+            try {
+              const origin = `http://${host}:${server?.port}`;
+              const provRes = await apiHandler(new Request(`${origin}${skipSSRPaths[0]}auth/providers`));
+              if (provRes.ok) {
+                const providers = await provRes.json();
+                ssrAuth.providers = providers;
+                sessionScript += `
+<script>window.__VERTZ_PROVIDERS__=${safeSerialize(providers)};</script>`;
+              }
+            } catch {}
+          }
           const doRender = async () => {
             logger.log("ssr", "render-start", { url: pathname });
             const ssrStart = performance.now();
@@ -2355,7 +2598,9 @@ data: {}
         message(ws, msg) {
           try {
             const data = JSON.parse(typeof msg === "string" ? msg : new TextDecoder().decode(msg));
-            if (data.type === "ping") {
+            if (data.type === "restart") {
+              devServer.restart();
+            } else if (data.type === "ping") {
               ws.sendText(JSON.stringify({ type: "pong" }));
             } else if (data.type === "resolve-stack" && data.stack) {
               const selfFetch = async (url) => {
@@ -2609,7 +2854,7 @@ data: {}
       });
     }
   }
-  return {
+  const devServer = {
     start,
     broadcastError,
     clearError,
@@ -2635,11 +2880,70 @@ data: {}
         server.stop(true);
         server = null;
       }
+    },
+    async restart() {
+      if (isRestarting) {
+        if (logRequests) {
+          console.log("[Server] Restart already in progress, skipping");
+        }
+        return;
+      }
+      isRestarting = true;
+      if (logRequests) {
+        console.log("[Server] Restarting dev server...");
+      }
+      const restartMsg = JSON.stringify({ type: "restarting" });
+      for (const ws of wsClients) {
+        try {
+          ws.sendText(restartMsg);
+        } catch {}
+      }
+      await devServer.stop();
+      wsClients.clear();
+      currentError = null;
+      if (runtimeDebounceTimer) {
+        clearTimeout(runtimeDebounceTimer);
+        runtimeDebounceTimer = null;
+      }
+      pendingRuntimeError = null;
+      lastBuildError = "";
+      lastBroadcastedError = "";
+      lastChangedFile = "";
+      clearGraceUntil = 0;
+      terminalDedup.reset();
+      clearSSRRequireCache();
+      sourceMapResolver.invalidate();
+      const retryDelays = [100, 200, 500];
+      let lastErr;
+      for (let attempt = 0;attempt < retryDelays.length; attempt++) {
+        await new Promise((r) => setTimeout(r, retryDelays[attempt]));
+        try {
+          await start();
+          if (logRequests) {
+            console.log(`[Server] Dev server restarted on port ${port}`);
+          }
+          lastErr = null;
+          break;
+        } catch (e) {
+          lastErr = e;
+          if (logRequests) {
+            const errMsg = e instanceof Error ? e.message : String(e);
+            console.log(`[Server] Restart attempt ${attempt + 1} failed: ${errMsg}`);
+          }
+        }
+      }
+      if (lastErr) {
+        const errMsg = lastErr instanceof Error ? lastErr.message : String(lastErr);
+        console.error(`[Server] Restart failed after ${retryDelays.length} attempts: ${errMsg}`);
+      }
+      isRestarting = false;
     }
   };
+  return devServer;
 }
 export {
   parseHMRAssets,
+  isStaleGraphError,
   generateSSRPageHtml,
   formatTerminalRuntimeError,
   detectFaviconTag,

package/dist/bun-plugin/index.js

@@ -607,6 +607,7 @@ function extractStaticProps(element, sourceFile) {
         if (alt === null)
           return null;
         break;
+      case "className":
       case "class":
         if (value) {
           className = extractStaticString(value, sourceFile) ?? undefined;

package/dist/dom-shim/index.d.ts

@@ -63,8 +63,9 @@ declare class SSRElement extends SSRNode {
 		display: string;
 		[key: string]: any;
 	};
+	dataset: DOMStringMap;
 	constructor(tag: string);
-	setAttribute(name: string, value: string): void;
+	setAttribute(name: string, value: string | Record<string, any>): void;
 	getAttribute(name: string): string | null;
 	removeAttribute(name: string): void;
 	appendChild(child: SSRElement | SSRTextNode | SSRComment | SSRDocumentFragment): void;
@@ -83,6 +84,30 @@ declare class SSRElement extends SSRNode {
 	get textContent(): string | null;
 	set innerHTML(value: string);
 	get innerHTML(): string;
+	get placeholder(): string;
+	set placeholder(value: string);
+	get type(): string;
+	set type(value: string);
+	get name(): string;
+	set name(value: string);
+	get value(): string;
+	set value(value: string);
+	get src(): string;
+	set src(value: string);
+	get alt(): string;
+	set alt(value: string);
+	get htmlFor(): string;
+	set htmlFor(value: string);
+	get disabled(): boolean;
+	set disabled(value: boolean);
+	get checked(): boolean;
+	set checked(value: boolean);
+	get rows(): number;
+	set rows(value: number);
+	get scope(): string;
+	set scope(value: string);
+	get href(): string;
+	set href(value: string);
 	addEventListener(_event: string, _handler: any): void;
 	removeEventListener(_event: string, _handler: any): void;
 	/** Convert to a VNode tree for @vertz/ui-server */

package/dist/dom-shim/index.js

@@ -7,7 +7,7 @@ import {
   installDomShim,
   removeDomShim,
   toVNode
-} from "../shared/chunk-9jjdzz8c.js";
+} from "../shared/chunk-1363r1qw.js";
 export {
   toVNode,
   removeDomShim,

package/dist/index.d.ts

@@ -374,7 +374,7 @@ declare function clearGlobalSSRTimeout(): void;
 */
 declare function getGlobalSSRTimeout(): number | undefined;
 import { FontFallbackMetrics as FontFallbackMetrics4 } from "@vertz/ui";
-import { FontFallbackMetrics as FontFallbackMetrics3, Theme as Theme2 } from "@vertz/ui";
+import { CompiledRoute, FontFallbackMetrics as FontFallbackMetrics3, Theme as Theme2 } from "@vertz/ui";
 import { SSRAuth as SSRAuth_jq1nwm } from "@vertz/ui/internals";
 interface SSRModule {
 	default?: () => unknown;
@@ -390,6 +390,8 @@ interface SSRModule {
 	* SSR renderer. Export `getInjectedCSS` from @vertz/ui in the app entry.
 	*/
 	getInjectedCSS?: () => string[];
+	/** Compiled routes exported from the app for build-time SSG with generateParams. */
+	routes?: CompiledRoute[];
 }
 interface SSRRenderResult {
 	html: string;
@@ -402,6 +404,8 @@ interface SSRRenderResult {
 	headTags: string;
 	/** Route patterns discovered by createRouter() during SSR (for build-time pre-rendering). */
 	discoveredRoutes?: string[];
+	/** Route patterns that matched the current URL (for per-route modulepreload). */
+	matchedRoutePatterns?: string[];
 	/** Set when ProtectedRoute writes a redirect during SSR. Server should return 302. */
 	redirect?: {
 		to: string;
@@ -500,6 +504,13 @@ interface SSRHandlerOptions {
 	fallbackMetrics?: Record<string, FontFallbackMetrics4>;
 	/** Paths to inject as `<link rel="modulepreload">` in `<head>`. */
 	modulepreload?: string[];
+	/**
+	* Route chunk manifest for per-route modulepreload injection.
+	* When provided, only chunks for the matched route are preloaded instead of all chunks.
+	*/
+	routeChunkManifest?: {
+		routes: Record<string, string[]>;
+	};
 	/** Cache-Control header for HTML responses. Omit or undefined = no header (safe default). */
 	cacheControl?: string;
 	/**

package/dist/index.js

@@ -19,7 +19,7 @@ import {
   ssrDiscoverQueries,
   ssrRenderToString,
   streamToString
-} from "./shared/chunk-c5ee9yf1.js";
+} from "./shared/chunk-qzdhe6bn.js";
 import {
   clearGlobalSSRTimeout,
   createSSRAdapter,
@@ -31,7 +31,7 @@ import {
   registerSSRQuery,
   setGlobalSSRTimeout,
   ssrStorage
-} from "./shared/chunk-9jjdzz8c.js";
+} from "./shared/chunk-1363r1qw.js";
 
 // src/asset-pipeline.ts
 function renderAssetTags(assets) {

package/dist/jsx-runtime/index.js

@@ -29,13 +29,18 @@ function jsx(tag, props) {
   }
   const { children, ...attrs } = props || {};
   const serializableAttrs = {};
+  const resolvedClass = unwrapSignal(attrs.className) ?? unwrapSignal(attrs.class);
   for (const [key, rawValue] of Object.entries(attrs)) {
     if (key.startsWith("on") && typeof rawValue === "function") {
       continue;
     }
     const value = unwrapSignal(rawValue);
-    if (key === "class" && value != null) {
-      serializableAttrs.class = String(value);
+    if (key === "className" || key === "class") {
+      if (key === "class" && attrs.className != null)
+        continue;
+      if (resolvedClass != null) {
+        serializableAttrs.class = String(resolvedClass);
+      }
       continue;
     }
     if (key === "style" && value != null) {

package/dist/shared/{chunk-9jjdzz8c.js → chunk-1363r1qw.js}

@@ -61,6 +61,9 @@ class SSRComment extends SSRNode {
   }
 }
 
+// src/dom-shim/ssr-element.ts
+import { __styleStr } from "@vertz/ui/internals";
+
 // src/types.ts
 function rawHtml(html) {
   return { __raw: true, html };
@@ -104,6 +107,52 @@ class SSRDocumentFragment extends SSRNode {
 }
 
 // src/dom-shim/ssr-element.ts
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function kebabToCamel(str) {
+  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+function createDatasetProxy(element) {
+  return new Proxy({}, {
+    set(_target, prop, value) {
+      if (typeof prop === "string") {
+        element.setAttribute(`data-${camelToKebab(prop)}`, String(value));
+      }
+      return true;
+    },
+    get(_target, prop) {
+      if (typeof prop === "string") {
+        return element.getAttribute(`data-${camelToKebab(prop)}`) ?? undefined;
+      }
+      return;
+    },
+    has(_target, prop) {
+      if (typeof prop === "string") {
+        return element.getAttribute(`data-${camelToKebab(prop)}`) !== null;
+      }
+      return false;
+    },
+    deleteProperty(_target, prop) {
+      if (typeof prop === "string") {
+        element.removeAttribute(`data-${camelToKebab(prop)}`);
+      }
+      return true;
+    },
+    ownKeys() {
+      return Object.keys(element.attrs).filter((k) => k.startsWith("data-")).map((k) => kebabToCamel(k.slice(5)));
+    },
+    getOwnPropertyDescriptor(_target, prop) {
+      if (typeof prop === "string") {
+        const val = element.getAttribute(`data-${camelToKebab(prop)}`);
+        if (val !== null) {
+          return { configurable: true, enumerable: true, value: val };
+        }
+      }
+      return;
+    }
+  });
+}
 function createStyleProxy(element) {
   const styles = {};
   return new Proxy(styles, {
@@ -135,16 +184,27 @@ class SSRElement extends SSRNode {
   _textContent = null;
   _innerHTML = null;
   style;
+  dataset;
   constructor(tag) {
     super();
     this.tag = tag;
     this.style = createStyleProxy(this);
+    this.dataset = createDatasetProxy(this);
   }
   setAttribute(name, value) {
-    if (name === "class") {
+    if (name === "style" && typeof value === "object" && value !== null) {
+      this.attrs.style = __styleStr(value);
+      for (const [k, v] of Object.entries(value)) {
+        if (v != null)
+          this.style[k] = String(v);
+      }
+      return;
+    }
+    const attrName = name === "className" ? "class" : name;
+    if (attrName === "class") {
       this._classList = new Set(value.split(/\s+/).filter(Boolean));
     }
-    this.attrs[name] = value;
+    this.attrs[attrName] = value;
   }
   getAttribute(name) {
     return this.attrs[name] ?? null;
@@ -281,6 +341,86 @@ class SSRElement extends SSRNode {
   get innerHTML() {
     return this._innerHTML ?? "";
   }
+  get placeholder() {
+    return this.attrs.placeholder ?? "";
+  }
+  set placeholder(value) {
+    this.attrs.placeholder = value;
+  }
+  get type() {
+    return this.attrs.type ?? "";
+  }
+  set type(value) {
+    this.attrs.type = value;
+  }
+  get name() {
+    return this.attrs.name ?? "";
+  }
+  set name(value) {
+    this.attrs.name = value;
+  }
+  get value() {
+    return this.attrs.value ?? "";
+  }
+  set value(value) {
+    this.attrs.value = value;
+  }
+  get src() {
+    return this.attrs.src ?? "";
+  }
+  set src(value) {
+    this.attrs.src = value;
+  }
+  get alt() {
+    return this.attrs.alt ?? "";
+  }
+  set alt(value) {
+    this.attrs.alt = value;
+  }
+  get htmlFor() {
+    return this.attrs.for ?? "";
+  }
+  set htmlFor(value) {
+    this.attrs.for = value;
+  }
+  get disabled() {
+    return "disabled" in this.attrs;
+  }
+  set disabled(value) {
+    if (value) {
+      this.attrs.disabled = "";
+    } else {
+      delete this.attrs.disabled;
+    }
+  }
+  get checked() {
+    return "checked" in this.attrs;
+  }
+  set checked(value) {
+    if (value) {
+      this.attrs.checked = "";
+    } else {
+      delete this.attrs.checked;
+    }
+  }
+  get rows() {
+    return Number(this.attrs.rows) || 0;
+  }
+  set rows(value) {
+    this.attrs.rows = String(value);
+  }
+  get scope() {
+    return this.attrs.scope ?? "";
+  }
+  set scope(value) {
+    this.attrs.scope = value;
+  }
+  get href() {
+    return this.attrs.href ?? "";
+  }
+  set href(value) {
+    this.attrs.href = value;
+  }
   addEventListener(_event, _handler) {}
   removeEventListener(_event, _handler) {}
   toVNode() {

package/dist/shared/{chunk-c5ee9yf1.js → chunk-qzdhe6bn.js}

@@ -6,7 +6,7 @@ import {
   setGlobalSSRTimeout,
   ssrStorage,
   toVNode
-} from "./chunk-9jjdzz8c.js";
+} from "./chunk-1363r1qw.js";
 
 // src/html-serializer.ts
 var VOID_ELEMENTS = new Set([
@@ -330,7 +330,8 @@ async function ssrRenderToString(module, url, options) {
         css,
         ssrData,
         headTags: themePreloadTags,
-        discoveredRoutes: ctx.discoveredRoutes
+        discoveredRoutes: ctx.discoveredRoutes,
+        matchedRoutePatterns: ctx.matchedRoutePatterns
       };
     } finally {
       clearGlobalSSRTimeout();
@@ -536,7 +537,7 @@ function injectIntoTemplate(options) {
   if (template.includes("<!--ssr-outlet-->")) {
     html = template.replace("<!--ssr-outlet-->", appHtml);
   } else {
-    html = template.replace(/(<div[^>]*id="app"[^>]*>)([\s\S]*?)(<\/div>)/, `$1${appHtml}$3`);
+    html = replaceAppDivContent(template, appHtml);
   }
   if (headTags) {
     html = html.replace("</head>", `${headTags}
@@ -560,6 +561,37 @@ function injectIntoTemplate(options) {
   }
   return html;
 }
+function replaceAppDivContent(template, appHtml) {
+  const openMatch = template.match(/<div[^>]*id="app"[^>]*>/);
+  if (!openMatch || openMatch.index == null)
+    return template;
+  const openTag = openMatch[0];
+  const contentStart = openMatch.index + openTag.length;
+  let depth = 1;
+  let i = contentStart;
+  const len = template.length;
+  while (i < len && depth > 0) {
+    if (template[i] === "<") {
+      if (template.startsWith("</div>", i)) {
+        depth--;
+        if (depth === 0)
+          break;
+        i += 6;
+      } else if (template.startsWith("<div", i) && /^<div[\s>]/.test(template.slice(i, i + 5))) {
+        depth++;
+        i += 4;
+      } else {
+        i++;
+      }
+    } else {
+      i++;
+    }
+  }
+  if (depth !== 0) {
+    return template;
+  }
+  return template.slice(0, contentStart) + appHtml + template.slice(i);
+}
 
 // src/ssr-handler.ts
 import { compileTheme as compileTheme2 } from "@vertz/ui";
@@ -595,6 +627,7 @@ function createSSRHandler(options) {
     nonce,
     fallbackMetrics,
     modulepreload,
+    routeChunkManifest,
     cacheControl,
     sessionResolver
   } = options;
@@ -646,7 +679,7 @@ function createSSRHandler(options) {
         console.warn("[Server] Session resolver failed:", resolverErr instanceof Error ? resolverErr.message : resolverErr);
       }
     }
-    return handleHTMLRequest(module, template, pathname + url.search, ssrTimeout, nonce, fallbackMetrics, linkHeader, modulepreloadTags, cacheControl, sessionScript, ssrAuth);
+    return handleHTMLRequest(module, template, pathname + url.search, ssrTimeout, nonce, fallbackMetrics, linkHeader, modulepreloadTags, routeChunkManifest, cacheControl, sessionScript, ssrAuth);
   };
 }
 async function handleNavRequest(module, url, ssrTimeout) {
@@ -672,7 +705,7 @@ data: {}
     });
   }
 }
-async function handleHTMLRequest(module, template, url, ssrTimeout, nonce, fallbackMetrics, linkHeader, modulepreloadTags, cacheControl, sessionScript, ssrAuth) {
+async function handleHTMLRequest(module, template, url, ssrTimeout, nonce, fallbackMetrics, linkHeader, staticModulepreloadTags, routeChunkManifest, cacheControl, sessionScript, ssrAuth) {
   try {
     const result = await ssrRenderToString(module, url, { ssrTimeout, fallbackMetrics, ssrAuth });
     if (result.redirect) {
@@ -681,6 +714,21 @@ async function handleHTMLRequest(module, template, url, ssrTimeout, nonce, fallb
         headers: { Location: result.redirect.to }
       });
     }
+    let modulepreloadTags = staticModulepreloadTags;
+    if (routeChunkManifest && result.matchedRoutePatterns?.length) {
+      const chunkPaths = new Set;
+      for (const pattern of result.matchedRoutePatterns) {
+        const chunks = routeChunkManifest.routes[pattern];
+        if (chunks) {
+          for (const chunk of chunks) {
+            chunkPaths.add(chunk);
+          }
+        }
+      }
+      if (chunkPaths.size > 0) {
+        modulepreloadTags = buildModulepreloadTags([...chunkPaths]);
+      }
+    }
     const allHeadTags = [result.headTags, modulepreloadTags].filter(Boolean).join(`
 `);
     const html = injectIntoTemplate({

package/dist/ssr/index.d.ts

@@ -1,5 +1,5 @@
-import { CompiledRoute } from "@vertz/ui";
-import { FontFallbackMetrics, Theme } from "@vertz/ui";
+import { CompiledRoute as CompiledRoute2 } from "@vertz/ui";
+import { CompiledRoute, FontFallbackMetrics, Theme } from "@vertz/ui";
 import { SSRAuth as SSRAuth_jq1nwm } from "@vertz/ui/internals";
 interface SSRModule {
 	default?: () => unknown;
@@ -15,6 +15,8 @@ interface SSRModule {
 	* SSR renderer. Export `getInjectedCSS` from @vertz/ui in the app entry.
 	*/
 	getInjectedCSS?: () => string[];
+	/** Compiled routes exported from the app for build-time SSG with generateParams. */
+	routes?: CompiledRoute[];
 }
 interface SSRRenderResult {
 	html: string;
@@ -27,6 +29,8 @@ interface SSRRenderResult {
 	headTags: string;
 	/** Route patterns discovered by createRouter() during SSR (for build-time pre-rendering). */
 	discoveredRoutes?: string[];
+	/** Route patterns that matched the current URL (for per-route modulepreload). */
+	matchedRoutePatterns?: string[];
 	/** Set when ProtectedRoute writes a redirect during SSR. Server should return 302. */
 	redirect?: {
 		to: string;
@@ -88,7 +92,7 @@ declare function discoverRoutes(module: SSRModule): Promise<string[]>;
 * - Routes with `*` wildcard
 * - Routes with `prerender: false` (looked up in compiledRoutes)
 */
-declare function filterPrerenderableRoutes(patterns: string[], compiledRoutes?: CompiledRoute[]): string[];
+declare function filterPrerenderableRoutes(patterns: string[], compiledRoutes?: CompiledRoute2[]): string[];
 /**
 * Pre-render a list of routes into complete HTML strings.
 *
@@ -110,6 +114,16 @@ declare function prerenderRoutes(module: SSRModule, template: string, options: P
 * pages (like /manifesto) ship zero JavaScript.
 */
 declare function stripScriptsFromStaticHTML(html: string): string;
+/**
+* Collect all paths that should be pre-rendered from compiled routes.
+*
+* Walks the route tree and collects:
+* - Static routes with `prerender: true`
+* - Dynamic routes with `generateParams` (expanded to concrete paths)
+* - Skips routes with `prerender: false`
+* - Routes without `prerender` or `generateParams` are not collected
+*/
+declare function collectPrerenderPaths(routes: CompiledRoute2[], prefix?: string): Promise<string[]>;
 import { FontFallbackMetrics as FontFallbackMetrics2 } from "@vertz/ui";
 import { AccessSet } from "@vertz/ui/auth";
 interface SessionData {
@@ -167,6 +181,13 @@ interface SSRHandlerOptions {
 	fallbackMetrics?: Record<string, FontFallbackMetrics2>;
 	/** Paths to inject as `<link rel="modulepreload">` in `<head>`. */
 	modulepreload?: string[];
+	/**
+	* Route chunk manifest for per-route modulepreload injection.
+	* When provided, only chunks for the matched route are preloaded instead of all chunks.
+	*/
+	routeChunkManifest?: {
+		routes: Record<string, string[]>;
+	};
 	/** Cache-Control header for HTML responses. Omit or undefined = no header (safe default). */
 	cacheControl?: string;
 	/**
@@ -197,4 +218,4 @@ interface InjectIntoTemplateOptions {
 * injects CSS before </head>, and ssrData before </body>.
 */
 declare function injectIntoTemplate(options: InjectIntoTemplateOptions): string;
-export { stripScriptsFromStaticHTML, ssrRenderToString, ssrDiscoverQueries, prerenderRoutes, injectIntoTemplate, filterPrerenderableRoutes, discoverRoutes, createSSRHandler, SSRRenderResult, SSRModule, SSRHandlerOptions, SSRDiscoverResult, PrerenderResult, PrerenderOptions };
+export { stripScriptsFromStaticHTML, ssrRenderToString, ssrDiscoverQueries, prerenderRoutes, injectIntoTemplate, filterPrerenderableRoutes, discoverRoutes, createSSRHandler, collectPrerenderPaths, SSRRenderResult, SSRModule, SSRHandlerOptions, SSRDiscoverResult, PrerenderResult, PrerenderOptions };

package/dist/ssr/index.js

@@ -3,8 +3,8 @@ import {
   injectIntoTemplate,
   ssrDiscoverQueries,
   ssrRenderToString
-} from "../shared/chunk-c5ee9yf1.js";
-import"../shared/chunk-9jjdzz8c.js";
+} from "../shared/chunk-qzdhe6bn.js";
+import"../shared/chunk-1363r1qw.js";
 
 // src/prerender.ts
 async function discoverRoutes(module) {
@@ -56,6 +56,36 @@ function stripScriptsFromStaticHTML(html) {
   result = result.replace(/<link\b[^>]*\brel=["']modulepreload["'][^>]*\/?>/gi, "");
   return result;
 }
+async function collectPrerenderPaths(routes, prefix = "") {
+  const paths = [];
+  for (const route of routes) {
+    const fullPattern = joinPatterns(prefix, route.pattern);
+    const optedOut = route.prerender === false;
+    if (!optedOut) {
+      if (route.generateParams) {
+        const paramSets = await route.generateParams();
+        for (const params of paramSets) {
+          let path = fullPattern;
+          for (const [key, value] of Object.entries(params)) {
+            path = path.replaceAll(`:${key}`, value);
+          }
+          const unreplaced = path.match(/:(\w+)/);
+          if (unreplaced) {
+            throw new Error(`generateParams for "${fullPattern}" returned params missing key "${unreplaced[1]}"`);
+          }
+          paths.push(path);
+        }
+      } else if (route.prerender === true) {
+        paths.push(fullPattern);
+      }
+    }
+    if (route.children) {
+      const childPaths = await collectPrerenderPaths(route.children, fullPattern);
+      paths.push(...childPaths);
+    }
+  }
+  return paths;
+}
 function findCompiledRoute(routes, pattern, prefix = "") {
   for (const route of routes) {
     const fullPattern = joinPatterns(prefix, route.pattern);
@@ -84,5 +114,6 @@ export {
   injectIntoTemplate,
   filterPrerenderableRoutes,
   discoverRoutes,
-  createSSRHandler
+  createSSRHandler,
+  collectPrerenderPaths
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-server",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "type": "module",
   "license": "MIT",
   "description": "Vertz UI server-side rendering runtime",
@@ -58,16 +58,16 @@
     "@ampproject/remapping": "^2.3.0",
     "@capsizecss/unpack": "^4.0.0",
     "@jridgewell/trace-mapping": "^0.3.31",
-    "@vertz/core": "^0.2.18",
-    "@vertz/ui": "^0.2.18",
-    "@vertz/ui-compiler": "^0.2.18",
+    "@vertz/core": "^0.2.21",
+    "@vertz/ui": "^0.2.21",
+    "@vertz/ui-compiler": "^0.2.21",
     "magic-string": "^0.30.0",
     "sharp": "^0.34.5",
     "ts-morph": "^27.0.2"
   },
   "devDependencies": {
-    "@vertz/codegen": "^0.2.18",
-    "@vertz/ui-auth": "^0.2.18",
+    "@vertz/codegen": "^0.2.21",
+    "@vertz/ui-auth": "^0.2.19",
     "bun-types": "^1.3.10",
     "bunup": "^0.16.31",
     "@happy-dom/global-registrator": "^20.8.3",