@vesk/vesk-cli 0.2.60 → 0.2.62

package/dist/cli.js

@@ -495,7 +495,7 @@ ${this.code}`;
 });
 
 // ../compiler/src/ir.ts
-var Expression, IRRoot, ComponentIR, StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, ComponentRef, ComponentCall, SlotNode, PropSlot, PropSlotRender, WhileLoop, SwitchCase, SwitchBlock, TryCatch, TrackDecl, RuntimeStatement, ForLoop, ServerBlock, ClientBlock, HeadBlock;
+var Expression, IRRoot, ComponentIR, StaticNode, TextNode, DynamicBinding, OpaqueDynamicRegion, MapRegion, ComponentRef, ComponentCall, SlotNode, PropSlot, PropSlotRender, WhileLoop, SwitchCase, SwitchBlock, TryCatch, TrackDecl, RuntimeStatement, BreakSignal, ForLoop, ServerBlock, ClientBlock, HeadBlock;
 var init_ir = __esm({
   "../compiler/src/ir.ts"() {
     "use strict";
@@ -742,6 +742,10 @@ var init_ir = __esm({
         this.source = source;
       }
     };
+    BreakSignal = class {
+      constructor() {
+      }
+    };
     ForLoop = class {
       init;
       condition;
@@ -4839,7 +4843,7 @@ async function renderNotFound(router, match, container) {
   }
   if (container.replaceChildren) container.replaceChildren();
   else container.innerHTML = "";
-  container.innerHTML = "<h1>404 \u2014 Not Found</h1>";
+  container.innerHTML = defaultErrorHtml(404, "Not Found");
   router._currentMatch = match;
 }
 function defaultOfflineHtml(url) {
@@ -4848,6 +4852,9 @@ function defaultOfflineHtml(url) {
 function escapeOfflineUrl(url) {
   return String(url).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function defaultErrorHtml(status, message) {
+  return '<div data-vesk-default-error="' + status + '" style="display:flex;align-items:center;justify-content:center;min-height:50vh;padding:32px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:inherit"><div style="display:flex;align-items:center"><span style="font-size:24px;font-weight:500;line-height:49px;padding-right:23px;margin-right:20px;border-right:1px solid currentColor;opacity:.85">' + status + '</span><span style="font-size:14px;line-height:49px;opacity:.7">' + message + "</span></div></div>";
+}
 async function renderOfflinePage(router, match, container) {
   const url = match.pathname || (typeof window !== "undefined" ? window.location.pathname : "");
   const chain = match.matchChain;
@@ -5136,7 +5143,7 @@ function renderMatch(router, match, container, navToken) {
     } else {
       container.innerHTML = "";
     }
-    container.innerHTML = "<h1>404 \u2014 Not Found</h1>";
+    container.innerHTML = defaultErrorHtml(404, "Not Found");
     return;
   }
   if (pageNode._pageName && (!pageNode.page || typeof pageNode.page === "string")) {
@@ -5324,7 +5331,7 @@ async function renderErrorPage(router, match, container, error) {
   if (!errorFn) {
     if (container.replaceChildren) container.replaceChildren();
     else container.innerHTML = "";
-    container.innerHTML = "<h1>500 \u2014 Internal Server Error</h1>";
+    container.innerHTML = defaultErrorHtml(500, "Internal Server Error");
     return;
   }
   const layoutNodes = chain.filter((n) => n.layout);
@@ -5388,7 +5395,7 @@ async function hydrateInitial(router, match, container, strategy) {
       });
       return;
     }
-    container.innerHTML = "<h1>404 \u2014 Not Found</h1>";
+    container.innerHTML = defaultErrorHtml(404, "Not Found");
     return;
   }
   const ssrErrorMarker = (() => {
@@ -6045,7 +6052,7 @@ function createFileRouter(routeTree, options = {}) {
             }
           })();
         } else {
-          container.innerHTML = "<h1>404 \u2014 Not Found</h1>";
+          container.innerHTML = defaultErrorHtml(404, "Not Found");
         }
         return;
       }
@@ -21555,6 +21562,7 @@ function processJSXCallbackBody(source, body) {
     for (const c of body.children) nodes.push(...processJSXChildren(source, [c]));
     return nodes;
   }
+  if (body.type === "BlockStatement") return processStatementModeBody(source, body.body);
   if (body.type === "ParenthesizedExpression") return exprToIR(source, body.expression);
   return exprToIR(source, body);
 }
@@ -21713,6 +21721,29 @@ function getReturnStatement(node) {
   }
   return null;
 }
+function containsLoopControl(node) {
+  if (!node) return false;
+  if (node.type === "ContinueStatement" || node.type === "BreakStatement") return true;
+  if (node.type === "FunctionDeclaration" || node.type === "FunctionExpression" || node.type === "ArrowFunctionExpression") return false;
+  if (node.type === "ForStatement" || node.type === "ForInStatement" || node.type === "ForOfStatement" || node.type === "WhileStatement" || node.type === "DoWhileStatement") return false;
+  if (node.type === "BlockStatement") return node.body.some(containsLoopControl);
+  if (node.type === "IfStatement") return containsLoopControl(node.consequent) || containsLoopControl(node.alternate);
+  if (node.type === "SwitchStatement") return node.cases.some((c) => (c.consequent || []).some(containsLoopControl));
+  if (node.type === "TryStatement") {
+    return containsLoopControl(node.block) || containsLoopControl(node.handler) || containsLoopControl(node.finalizer);
+  }
+  if (node.type === "CatchClause") return containsLoopControl(node.body);
+  if (node.type === "LabeledStatement") return containsLoopControl(node.body);
+  return false;
+}
+function getLoopControlGuard(consequent, kind) {
+  const stmts = consequent.type === "BlockStatement" ? consequent.body : [consequent];
+  if (stmts.length === 0) return null;
+  const want = kind === "continue" ? "ContinueStatement" : "BreakStatement";
+  const last = stmts[stmts.length - 1];
+  if (!last || last.type !== want) return null;
+  return { pre: stmts.slice(0, -1), node: last };
+}
 function isStatementMode(bodyStmts) {
   if (bodyStmts.some((s) => s.type === "JSXElement" || s.type === "JSXExpressionContainer" || s.type === "JSXFragment")) return true;
   for (const stmt of bodyStmts) {
@@ -21751,6 +21782,9 @@ function processIfStatement(source, stmt) {
   return [new OpaqueDynamicRegion(condExpr, consequent, alternate)];
 }
 function processForStatement(source, stmt, alternate = []) {
+  if (stmt.body && !hasJSXInSubtree(stmt.body) && containsLoopControl(stmt.body)) {
+    return [new RuntimeStatement(getSource(source, stmt), stmt, source)];
+  }
   if (stmt.type === "ForOfStatement") {
     const left = stmt.left;
     let itemVar = "item";
@@ -21784,6 +21818,9 @@ function processForStatement(source, stmt, alternate = []) {
   return [];
 }
 function processWhileStatement(source, stmt) {
+  if (stmt.body && !hasJSXInSubtree(stmt.body) && containsLoopControl(stmt.body)) {
+    return [new RuntimeStatement(getSource(source, stmt), stmt, source)];
+  }
   const condition = toExpression(source, stmt.test);
   const bodyTemplate = processBlockBody(source, stmt.body);
   const isDoWhile = stmt.type === "DoWhileStatement";
@@ -21849,6 +21886,18 @@ function processStatementModeBody(source, bodyStmts, filename) {
         nodes.push(new OpaqueDynamicRegion(toExpression(source, stmt.test), consequent, alternate));
         break;
       }
+      if (!stmt.alternate) {
+        const guardContinue = getLoopControlGuard(stmt.consequent, "continue");
+        const guardBreak = guardContinue ? null : getLoopControlGuard(stmt.consequent, "break");
+        const guard = guardContinue || guardBreak;
+        if (guard) {
+          const consequent = guard.pre.length ? processStatementModeBody(source, guard.pre, filename) : [];
+          if (guardBreak) consequent.push(new BreakSignal());
+          const alternate = processStatementModeBody(source, bodyStmts.slice(i + 1), filename);
+          nodes.push(new OpaqueDynamicRegion(toExpression(source, stmt.test), consequent, alternate));
+          break;
+        }
+      }
       nodes.push(...processIfStatement(source, stmt));
     } else if (stmt.type === "ForOfStatement") {
       let alternate = [];
@@ -21886,6 +21935,11 @@ function processStatementModeBody(source, bodyStmts, filename) {
     } else if (stmt.type === "ClassDeclaration") {
       const { line, column } = offsetToLineCol2(source, stmt.start ?? 0);
       throw VeskError.classDecl({ file: filename || "", line, column, code: codeFrame(source, line, column) });
+    } else if (stmt.type === "ContinueStatement") {
+      break;
+    } else if (stmt.type === "BreakStatement") {
+      nodes.push(new BreakSignal());
+      break;
     } else {
       const raw2 = getSource(source, stmt);
       if (raw2) nodes.push(new RuntimeStatement(raw2, stmt, source));
@@ -22017,6 +22071,7 @@ function warnStaleConstBindings(comp, file) {
       if (d.id?.type !== "Identifier" || !d.init) continue;
       if (reactive.has(d.id.name)) continue;
       if (d.init.type === "ArrowFunctionExpression" || d.init.type === "FunctionExpression") continue;
+      if (isReactiveFactoryCall(d.init)) continue;
       if (d.init.type === "Identifier" && reactive.has(d.init.name)) continue;
       const seen = /* @__PURE__ */ new Set();
       collectIdentifiers(d.init, seen);
@@ -22057,6 +22112,16 @@ function warnStaleConstBindings(comp, file) {
     }
   });
 }
+function isReactiveFactoryCall(node) {
+  if (!node || node.type !== "CallExpression") return false;
+  const callee = node.callee;
+  if (!callee) return false;
+  if (callee.type === "Identifier") return callee.name === "derived";
+  if (callee.type === "MemberExpression" && !callee.computed) {
+    return callee.property?.type === "Identifier" && callee.property.name === "derived";
+  }
+  return false;
+}
 function collectIdentifiers(node, into) {
   if (!node || typeof node !== "object") return;
   if (Array.isArray(node)) {
@@ -22064,6 +22129,15 @@ function collectIdentifiers(node, into) {
     return;
   }
   if (typeof node.type !== "string") return;
+  if (node.type === "MemberExpression" && !node.computed) {
+    collectIdentifiers(node.object, into);
+    if (node.property?.type === "MemberExpression") collectIdentifiers(node.property, into);
+    return;
+  }
+  if ((node.type === "Property" || node.type === "PropertyDefinition" || node.type === "MethodDefinition") && !node.computed) {
+    collectIdentifiers(node.value, into);
+    return;
+  }
   if (node.type === "Identifier" && typeof node.name === "string") into.add(node.name);
   for (const key of Object.keys(node)) {
     if (key === "loc" || key === "range" || key === "start" || key === "end") continue;
@@ -30395,14 +30469,36 @@ function transformTracked(irNode, tracked2) {
 }
 function collectTrackedNames(body) {
   const names = /* @__PURE__ */ new Map();
+  collectTrackedNamesInto(body, names);
+  return names;
+}
+function collectTrackedNamesInto(body, names) {
   for (const node of body) {
     if (node instanceof TrackDecl) {
       const cellName = node.rawName || node.name;
       names.set(node.name, { cellName, kind: "virtual" });
       if (node.rawName) names.set(node.rawName, { cellName, kind: "cell" });
+    } else if (node instanceof StaticNode || node instanceof ServerBlock || node instanceof ClientBlock || node instanceof HeadBlock) {
+      collectTrackedNamesInto(node.children, names);
+    } else if (node instanceof ComponentCall) {
+      collectTrackedNamesInto(node.children, names);
+    } else if (node instanceof PropSlot) {
+      collectTrackedNamesInto(node.body, names);
+    } else if (node instanceof MapRegion) {
+      collectTrackedNamesInto(node.bodyTemplate, names);
+      collectTrackedNamesInto(node.alternateNodes, names);
+    } else if (node instanceof OpaqueDynamicRegion) {
+      collectTrackedNamesInto(node.consequentNodes, names);
+      collectTrackedNamesInto(node.alternateNodes, names);
+    } else if (node instanceof WhileLoop || node instanceof ForLoop) {
+      collectTrackedNamesInto(node.bodyTemplate, names);
+    } else if (node instanceof TryCatch) {
+      collectTrackedNamesInto(node.bodyTemplate, names);
+      collectTrackedNamesInto(node.catchBody, names);
+    } else if (node instanceof SwitchBlock) {
+      for (const c of node.cases) collectTrackedNamesInto(c.body, names);
     }
   }
-  return names;
 }
 function collectTrackedDeps(value, tracked2) {
   const ast = value?.ast;
@@ -30437,6 +30533,53 @@ function transformTrackedInit(init, tracked2) {
   if (!expr) return init;
   return transformTracked({ raw: init, ast: expr }, tracked2);
 }
+function runtimeDeclaredNames(node) {
+  if (!(node instanceof RuntimeStatement)) return [];
+  const stmt = node.ast;
+  if (!stmt || stmt.type !== "VariableDeclaration" || !stmt.declarations) return [];
+  const out = [];
+  for (const d of stmt.declarations) {
+    if (d.id && d.id.type === "Identifier" && typeof d.id.name === "string") out.push(d.id.name);
+  }
+  return out;
+}
+function initReadsAnyOf(init, names) {
+  if (!init || names.size === 0) return false;
+  let expr = null;
+  try {
+    const prog = parse4(`(${init})`);
+    expr = prog.body?.[0]?.type === "ExpressionStatement" ? prog.body[0].expression ?? null : null;
+  } catch {
+    return false;
+  }
+  if (!expr) return false;
+  let found = false;
+  const walk9 = (n) => {
+    if (found || !n || typeof n !== "object") return;
+    if (Array.isArray(n)) {
+      for (const c of n) walk9(c);
+      return;
+    }
+    const t = n.type;
+    if (typeof t !== "string") return;
+    if (t === "Identifier") {
+      if (names.has(n.name)) found = true;
+      return;
+    }
+    if (t === "MemberExpression") {
+      const m = n;
+      walk9(m.object);
+      if (m.computed) walk9(m.property);
+      return;
+    }
+    for (const key of Object.keys(n)) {
+      if (key === "loc" || key === "range" || key === "start" || key === "end") continue;
+      walk9(n[key]);
+    }
+  };
+  walk9(expr);
+  return found;
+}
 function indent2(code, level = 1) {
   const pad = "	".repeat(level);
   return code.split("\n").map((l) => l ? pad + l : "").join("\n");
@@ -30488,6 +30631,10 @@ function emitNode(ctx2, node, tracked2, effectsVar, parentVar, compPrefix = "__c
     ctx2.push(semicolonizeStatement(transformTracked(node, tracked2)));
     return null;
   }
+  if (node instanceof BreakSignal) {
+    if (ctx2.breakFlag) ctx2.push(`${ctx2.breakFlag} = true;`);
+    return null;
+  }
   if (node instanceof SlotNode) {
     if (!parentVar) {
       if (ctx2.hydrate) {
@@ -31294,12 +31441,18 @@ function emitWhileLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
   ctx2.push(`const ${endAnchor} = document.createComment('while-end');`);
   emitHydrateFenceAnchoring(ctx2, anchor, endAnchor, parent === "$root", budget || void 0);
   const renderLoop = ctx2.n();
+  const hasBreak = bodyHasBreak(node.bodyTemplate);
+  const breakVar = hasBreak ? ctx2.n() : null;
   ctx2.push(`const ${renderLoop} = ${ctx2.isAsyncScope ? "async () => {" : "() => {"}`);
   if (!hyd) ctx2.push(indent2(`const __p = ${anchor}.parentNode;`));
   if (!hyd) ctx2.push(indent2(`const __b = document.createDocumentFragment();`));
   if (hyd) ctx2.push(indent2(`const __cl = [];`));
+  if (breakVar) ctx2.push(indent2(`let ${breakVar} = false;`));
+  const savedBreakFlag = ctx2.breakFlag;
+  ctx2.breakFlag = breakVar;
   if (node.isDoWhile) {
     ctx2.push(indent2(`do {`));
+    if (breakVar) ctx2.push(indent2(indent2(`if (${breakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -31310,6 +31463,7 @@ function emitWhileLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
     ctx2.push(indent2(`} while (${condExpr});`));
   } else {
     ctx2.push(indent2(`while (${condExpr}) {`));
+    if (breakVar) ctx2.push(indent2(indent2(`if (${breakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -31319,6 +31473,7 @@ function emitWhileLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
     }
     ctx2.push(indent2(`}`));
   }
+  ctx2.breakFlag = savedBreakFlag;
   if (!hyd) ctx2.push(indent2(`__p.insertBefore(__b, ${endAnchor});`));
   if (hyd) ctx2.push(indent2(`__place(${anchor}, ${endAnchor}, __cl, ${parent});`));
   ctx2.push(`};`);
@@ -31358,13 +31513,19 @@ function emitForLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget) {
   ctx2.push(`const ${endAnchor} = document.createComment('for-end');`);
   emitHydrateFenceAnchoring(ctx2, anchor, endAnchor, parent === "$root", budget || void 0);
   const renderLoop = ctx2.n();
+  const forHasBreak = bodyHasBreak(node.bodyTemplate);
+  const forBreakVar = forHasBreak ? ctx2.n() : null;
   ctx2.push(`const ${renderLoop} = ${ctx2.isAsyncScope ? "async () => {" : "() => {"}`);
   if (!hyd) ctx2.push(indent2(`const __p = ${anchor}.parentNode;`));
   if (!hyd) ctx2.push(indent2(`const __b = document.createDocumentFragment();`));
   if (hyd) ctx2.push(indent2(`const __cl = [];`));
+  if (forBreakVar) ctx2.push(indent2(`let ${forBreakVar} = false;`));
+  const savedForBreakFlag = ctx2.breakFlag;
+  ctx2.breakFlag = forBreakVar;
   if (node.kind === "for-in") {
     const srcExpr = transformTracked(node.condition, tracked2);
     ctx2.push(indent2(`for (${node.init} of (Array.isArray(${srcExpr}) ? ${srcExpr} : (${srcExpr} == null ? [] : Object.keys(${srcExpr})))) {`));
+    if (forBreakVar) ctx2.push(indent2(indent2(`if (${forBreakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -31381,6 +31542,7 @@ function emitForLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget) {
     if (updatePart.endsWith(";")) updatePart = updatePart.slice(0, -1).trim();
     const head = initPart ? `${initPart}; ${condExpr}` : `; ${condExpr}`;
     ctx2.push(indent2(`for (${head}; ${updatePart}) {`));
+    if (forBreakVar) ctx2.push(indent2(indent2(`if (${forBreakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -31390,6 +31552,7 @@ function emitForLoop(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget) {
     }
     ctx2.push(indent2(`}`));
   }
+  ctx2.breakFlag = savedForBreakFlag;
   if (!hyd) ctx2.push(indent2(`__p.insertBefore(__b, ${endAnchor});`));
   if (hyd) ctx2.push(indent2(`__place(${anchor}, ${endAnchor}, __cl, ${parent});`));
   ctx2.push(`};`);
@@ -31550,6 +31713,27 @@ function emitSwitchBlock(ctx2, node, tracked2, parentVar, skipK = 0, regionBudge
 }`);
   return null;
 }
+function bodyHasBreak(nodes) {
+  for (const n of nodes) {
+    if (n instanceof BreakSignal) return true;
+    if (n instanceof OpaqueDynamicRegion) {
+      if (bodyHasBreak([...n.consequentNodes, ...n.alternateNodes])) return true;
+    } else if (n instanceof SwitchBlock) {
+      for (const c of n.cases) if (bodyHasBreak(c.body)) return true;
+    } else if (n instanceof TryCatch) {
+      if (bodyHasBreak([...n.bodyTemplate, ...n.catchBody])) return true;
+    } else if (n instanceof StaticNode) {
+      if (bodyHasBreak(n.children)) return true;
+    } else if (n instanceof ComponentCall) {
+      if (bodyHasBreak(n.children)) return true;
+    } else if (n instanceof ServerBlock || n instanceof ClientBlock || n instanceof HeadBlock) {
+      if (bodyHasBreak(n.children)) return true;
+    } else if (n instanceof PropSlot) {
+      if (bodyHasBreak(n.body)) return true;
+    }
+  }
+  return false;
+}
 function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBudget) {
   const arrExpr = transformTracked(node.expression, tracked2);
   const itemVar = node.itemVariable;
@@ -31582,9 +31766,13 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
   ctx2.push(`let ${effectsVar} = [];`);
   ctx2.push(`const ${endAnchor} = document.createComment('map-end');`);
   const renderItem = ctx2.n();
+  const hasBreak = bodyHasBreak(node.bodyTemplate);
+  const breakVar = hasBreak ? ctx2.n() : null;
+  if (breakVar) ctx2.push(`let ${breakVar} = false;`);
   const indexParam = node.indexVariable ? ", __i" : "";
   ctx2.push(`const ${renderItem} = ${ctx2.isAsyncScope ? "async " : ""}(${itemVar}${indexParam}, __e, __r${hyd ? ", __cl" : ""}${hydKeyed ? ", __root" : ""}) => {`);
   ctx2.push(indent2(`__r = __r || ${endAnchor};`));
+  if (breakVar) ctx2.push(indent2(`if (${breakVar}) return;`));
   if (node.indexVariable) ctx2.push(indent2(`const ${node.indexVariable} = __i;`));
   if (hyd) {
     ctx2.push(indent2(`const __p = ${anchor}.parentNode;`));
@@ -31593,6 +31781,8 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
     ctx2.push(indent2(`const __it = document.createDocumentFragment();`));
   }
   if (hydKeyed) ctx2.rootClaim = true;
+  const savedMapBreak = ctx2.breakFlag;
+  ctx2.breakFlag = breakVar;
   for (const n of node.bodyTemplate) {
     const v = emitNode(ctx2, n, tracked2, "__e", hyd ? void 0 : "__it", "__components", 0, budget || void 0);
     if (v) {
@@ -31605,6 +31795,7 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
       }
     }
   }
+  ctx2.breakFlag = savedMapBreak;
   if (hydKeyed) ctx2.rootClaim = false;
   if (!hyd) ctx2.push(indent2(`if (__it.childNodes.length > 0) __p.insertBefore(__it, __r);`));
   ctx2.push(`};`);
@@ -31640,11 +31831,12 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
     const keyFnSrc = `(${itemVar}${node.indexVariable ? `, ${node.indexVariable}` : ""}) => ${keyExpr}`;
     const reconciler = ctx2.n();
     const initList = ctx2.n();
+    const breakReset = breakVar ? `${breakVar} = false; ` : "";
     ctx2.push(`let ${reconciler} = () => {};`);
     if (hydKeyed) {
-      ctx2.push(`const ${initList} = () => { ${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"}, null, __root), __hydrate, ${parent}, ${skipK}); };`);
+      ctx2.push(`const ${initList} = () => { ${breakReset}${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"}, null, __root), __hydrate, ${parent}, ${skipK}); };`);
     } else {
-      ctx2.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"})); };`);
+      ctx2.push(`const ${initList} = () => { ${breakReset}${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"})); };`);
     }
     if (emptyRenderName) {
       const isEmptyVar = ctx2.n();
@@ -31655,7 +31847,7 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
     const __new = ${hasItems}();
     if (__first) { __first = false; __new; return; }
     if (__new !== ${isEmptyVar}) {
-      if (__new) ${reconciler}(${arrExpr});
+      if (__new) {${breakVar ? ` ${breakVar} = false;` : ""} ${reconciler}(${arrExpr}); }
       return;
     }
     ${isEmptyVar} = !__new;
@@ -31669,22 +31861,25 @@ function emitMap(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBu
       if (!reactiveSource) return null;
       pushEffect(`let __first = true;`, `effect(() => {
     const __nv = ${arrExpr};
-    if (__first) { __first = false; __nv; ${reconciler}(${arrExpr}); return; }
-    ${reconciler}(${arrExpr});
+    if (__first) { __first = false; __nv; ${breakReset}${reconciler}(${arrExpr}); return; }
+    ${breakVar ? `if (${breakVar}) ${breakVar} = false;` : ""}${reconciler}(${arrExpr});
   })`);
     }
   } else {
     const renderAllItems = (ind, collect) => {
       const lines = [];
+      if (breakVar) lines.push(`${ind}${breakVar} = false;`);
       if (node.indexVariable) {
         lines.push(`${ind}let __i = 0;`);
         lines.push(`${ind}for (const ${itemVar} of ${arrExpr}) {`);
         lines.push(`${ind}	${aw}${renderItem}(${itemVar}, __i, ${effectsVar}${collect ? `, null, ${collect}` : ""});`);
         lines.push(`${ind}	__i++;`);
+        if (breakVar) lines.push(`${ind}	if (${breakVar}) break;`);
         lines.push(`${ind}}`);
       } else {
         lines.push(`${ind}for (const ${itemVar} of ${arrExpr}) {`);
         lines.push(`${ind}	${aw}${renderItem}(${itemVar}, ${effectsVar}${collect ? `, null, ${collect}` : ""});`);
+        if (breakVar) lines.push(`${ind}	if (${breakVar}) break;`);
         lines.push(`${ind}}`);
       }
       return lines.join("\n");
@@ -31770,8 +31965,19 @@ function generateComponent(comp, importedNames = /* @__PURE__ */ new Set(), hydr
   ctx2.push(indent2(`let __pendingChild = null;`));
   const paramInit = buildParamInit2(comp.paramNames, comp.propsAlias);
   if (paramInit) ctx2.push(indent2(paramInit));
+  const deferredTrackDecls = /* @__PURE__ */ new Set();
+  {
+    const declaredSoFar = /* @__PURE__ */ new Set();
+    for (const node of comp.body) {
+      if (node instanceof TrackDecl) {
+        if (initReadsAnyOf(node.init, declaredSoFar)) deferredTrackDecls.add(node);
+        continue;
+      }
+      for (const name of runtimeDeclaredNames(node)) declaredSoFar.add(name);
+    }
+  }
   for (const node of comp.body) {
-    if (node instanceof TrackDecl) {
+    if (node instanceof TrackDecl && !deferredTrackDecls.has(node)) {
       emitNode(ctx2, node, tracked2, null);
     }
   }
@@ -31798,7 +32004,10 @@ function generateComponent(comp, importedNames = /* @__PURE__ */ new Set(), hydr
     }
   }
   for (const node of comp.body) {
-    if (node instanceof TrackDecl) continue;
+    if (node instanceof TrackDecl) {
+      if (deferredTrackDecls.has(node)) emitNode(ctx2, node, tracked2, null);
+      continue;
+    }
     const v = emitNode(ctx2, node, tracked2, null, void 0, "__components", topPendingSkip, topBudget || void 0);
     if (v) {
       if (ctx2.hydrate) {
@@ -32257,6 +32466,9 @@ var init_client_codegen = __esm({
       walker = "__hydrate";
       asyncComps = /* @__PURE__ */ new Set();
       isAsyncScope = false;
+      // While emitting a loop body, names the boolean flag a `break` sets (see
+      // BreakSignal). Null outside a break-capable loop body.
+      breakFlag = null;
       constructor(alloc) {
         this.alloc = alloc ?? { c: 0 };
       }
@@ -32978,6 +33190,7 @@ function irNodeToJS(node, importedNames, isAsync = false, tracked2) {
     }
     return semicolonizeStatement(transformTracked(node, tracked2 || /* @__PURE__ */ new Map()));
   }
+  if (node instanceof BreakSignal) return `break;`;
   if (node instanceof SlotNode) {
     if (__vskMarkerless) return `__out.push(props.children || '');`;
     const sid = `s${nextVskId()}`;
@@ -33128,14 +33341,15 @@ function mapRegionToJS(node, isAsync = false, tracked2) {
   }
   const loopArr = arrVar || arr;
   if (node.indexVariable) {
-    lines.push("let __i = 0;");
+    const counter = `__i${nextVskId()}`;
+    lines.push(`let ${counter} = 0;`);
     lines.push(`for (const ${item} of ${loopArr}) {`);
-    lines.push(indent(`const ${node.indexVariable} = __i;`));
+    lines.push(indent(`const ${node.indexVariable} = ${counter};`));
     for (const n of bodyForItem) {
       const code = irNodeToJS(n, null, isAsync, tracked2);
       if (code) lines.push(indent(code));
     }
-    lines.push(indent("__i++;"));
+    lines.push(indent(`${counter}++;`));
     lines.push(`}`);
   } else {
     lines.push(`for (const ${item} of ${loopArr}) {`);
@@ -34218,6 +34432,94 @@ var init_server_render = __esm({
   }
 });
 
+// ../adapter/src/default-pages.ts
+function escapeDefaultPageHtml(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderDefaultPage(opts = {}) {
+  const status = opts.status ?? 404;
+  const title = escapeDefaultPageHtml(opts.title ?? `${status} \u2014 Vesk`);
+  const message = escapeDefaultPageHtml(opts.message ?? "This page could not be found.");
+  const url = opts.url ? escapeDefaultPageHtml(opts.url) : "";
+  const headExtra = opts.headExtra || "";
+  const homeHref = opts.homeHref === void 0 ? "/" : opts.homeHref;
+  const homeLabel = escapeDefaultPageHtml(opts.homeLabel ?? "Back to home");
+  const variant = `vsk-page${opts.accentStatus ? " vsk-page--error" : ""}`;
+  const action = homeHref === null ? "" : `<a class="vsk-page__btn" href="${escapeDefaultPageHtml(homeHref)}">${homeLabel}</a>`;
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex"><title>${title}</title><style>${DEFAULT_PAGE_CSS}</style>` + headExtra + `</head><body><main class="${variant}" data-vesk-default-page="${status}"><div class="vsk-page__card"><p class="vsk-page__brand"><b>Vesk</b> \xB7 built-in error page</p><div class="vsk-page__row"><span class="vsk-page__status">${status}</span><span class="vsk-page__msg">${message}</span></div>` + (url ? `<p class="vsk-page__detail">${url}</p>` : "") + (action ? `<div class="vsk-page__actions">${action}</div>` : "") + "</div></main></body></html>";
+}
+function renderDefaultNotFoundPage(opts = {}) {
+  return renderDefaultPage({
+    status: 404,
+    title: "404 \u2014 Not Found",
+    message: "This page could not be found.",
+    url: opts.url,
+    headExtra: opts.headExtra
+  });
+}
+function renderDefaultErrorPage(opts = {}) {
+  const status = opts.status ?? 500;
+  return renderDefaultPage({
+    status,
+    title: `${status} \u2014 Internal Server Error`,
+    message: opts.message || "Internal Server Error",
+    url: opts.url,
+    headExtra: opts.headExtra,
+    accentStatus: true,
+    homeHref: null
+  });
+}
+function renderDefaultErrorFragment(opts = {}) {
+  const status = opts.status ?? 500;
+  const message = escapeDefaultPageHtml(opts.message || "Internal Server Error");
+  return '<div data-vesk-default-error-fragment="' + status + '" style="display:flex;align-items:center;justify-content:center;min-height:60vh;padding:32px"><div style="display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace"><div style="display:flex;align-items:center"><span style="font-size:24px;font-weight:500;line-height:49px;padding-right:23px;margin-right:20px;border-right:1px solid currentColor;opacity:.85">' + status + '</span><span style="font-size:14px;line-height:49px;opacity:.7">' + message + "</span></div></div></div>";
+}
+var DEFAULT_PAGE_CSS;
+var init_default_pages = __esm({
+  "../adapter/src/default-pages.ts"() {
+    "use strict";
+    DEFAULT_PAGE_CSS = [
+      ":root{color-scheme:light;",
+      "--vsk-bg:oklch(0.941 0.014 88);",
+      "--vsk-fg:oklch(0.185 0.008 62);",
+      "--vsk-surface:oklch(0.965 0.012 88);",
+      "--vsk-muted:oklch(0.475 0.014 72);",
+      "--vsk-accent:oklch(0.560 0.140 42);",
+      "--vsk-border:oklch(0.86 0.012 82);",
+      "--vsk-border-strong:oklch(0.72 0.014 80);",
+      '--vsk-font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;',
+      '--vsk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}',
+      "@media (prefers-color-scheme:dark){:root{color-scheme:dark;",
+      "--vsk-bg:oklch(0.155 0.006 60);",
+      "--vsk-fg:oklch(0.931 0.014 88);",
+      "--vsk-surface:oklch(0.196 0.008 70);",
+      "--vsk-muted:oklch(0.618 0.016 80);",
+      "--vsk-accent:oklch(0.632 0.132 45);",
+      "--vsk-border:oklch(0.29 0.009 75);",
+      "--vsk-border-strong:oklch(0.40 0.011 75);}}",
+      "*{box-sizing:border-box}",
+      "html,body{margin:0;min-height:100%}",
+      "body{background:var(--vsk-bg);color:var(--vsk-fg);font-family:var(--vsk-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}",
+      ".vsk-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}",
+      ".vsk-page__card{width:100%;max-width:540px;border:1px solid var(--vsk-border);background:var(--vsk-surface);padding:clamp(28px,6vw,44px);text-align:center}",
+      "@supports (background:color-mix(in oklab,red,red)){.vsk-page__card{background:color-mix(in oklab,var(--vsk-surface) 60%,transparent)}}",
+      ".vsk-page__brand{margin:0 0 26px;font-family:var(--vsk-mono);font-size:10px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--vsk-muted)}",
+      ".vsk-page__brand b{color:var(--vsk-fg);font-weight:600}",
+      ".vsk-page__row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}",
+      ".vsk-page__status{font-size:clamp(34px,9vw,46px);font-weight:600;line-height:1;letter-spacing:-.03em;padding-right:22px;margin-right:22px;border-right:1px solid var(--vsk-border-strong)}",
+      ".vsk-page--error .vsk-page__status{color:var(--vsk-accent)}",
+      ".vsk-page__msg{font-family:var(--vsk-mono);font-size:13px;line-height:1.5;color:var(--vsk-muted);text-align:left;max-width:270px}",
+      "@media (max-width:440px){.vsk-page__row{flex-direction:column}.vsk-page__status{padding:0 0 16px;margin:0 0 16px;border-right:0;border-bottom:1px solid var(--vsk-border-strong)}.vsk-page__msg{text-align:center}}",
+      ".vsk-page__detail{margin:20px 0 0;font-family:var(--vsk-mono);font-size:11px;line-height:1.6;color:var(--vsk-muted);word-break:break-all}",
+      ".vsk-page__actions{margin-top:30px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}",
+      ".vsk-page__btn{display:inline-block;padding:11px 22px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;border:1px solid var(--vsk-fg);background:var(--vsk-fg);color:var(--vsk-bg);transition:opacity .18s cubic-bezier(.2,0,0,1)}",
+      ".vsk-page__btn:hover{opacity:.86}",
+      ".vsk-page__btn--ghost{background:transparent;color:var(--vsk-fg);border-color:var(--vsk-border-strong)}",
+      ".vsk-page__btn--ghost:hover{background:var(--vsk-fg);color:var(--vsk-bg);border-color:var(--vsk-fg);opacity:1}"
+    ].join("");
+  }
+});
+
 // ../adapter/src/paths.ts
 import { resolve as resolve11, sep as sep2 } from "node:path";
 import { existsSync as existsSync12, statSync as statSync4, readFileSync as readFileSync12 } from "node:fs";
@@ -35804,6 +36106,7 @@ function generatePlatformHandlerSource(input) {
   const prerenderedList = prerenderedPaths.length > 0 ? `const __prerendered = new Set(${JSON.stringify(prerenderedPaths)});
 ` : "const __prerendered = new Set();\n";
   const isrCache = "const __isrCache = new Map();";
+  const defaultNotFoundLine = `const __defaultNotFoundHtml = ${JSON.stringify(renderDefaultNotFoundPage())};`;
   const serverStoreLine = hasEvents ? "const __serverStore = globalThis.__vesk_server_ctx || {};" : "";
   const eventsStartLine = hasEvents ? "  await __eventsStart({ server: null });" : "";
   const eventsRequestLine = hasEvents ? "  await __eventsRequest(mwCtx);" : "";
@@ -35817,6 +36120,7 @@ ${mwImport}
 ${eventsImport}
 ${prerenderedList}
 ${isrCache}
+${defaultNotFoundLine}
 const __routes = [${routeEntries.join(",\n")}];
 
 async function __invokeRoute(route, request) {
@@ -35830,7 +36134,7 @@ async function __invokeRoute(route, request) {
       });
     }
     if (e && typeof e === 'object' && e.name === 'NotFoundError') {
-      return new Response('<!DOCTYPE html><html><body><h1>404</h1><p>Not Found</p></body></html>', {
+      return new Response(__defaultNotFoundHtml, {
         status: 404,
         headers: { 'Content-Type': 'text/html' },
       });
@@ -35957,7 +36261,7 @@ ${eventsRequestLine}
     return response;
   }
 
-  return new Response('<!DOCTYPE html><html><body><h1>404</h1><p>Not Found</p></body></html>', {
+  return new Response(__defaultNotFoundHtml, {
     status: 404,
     headers: { 'Content-Type': 'text/html' },
   });
@@ -36052,6 +36356,7 @@ var __dirname5;
 var init_platform_handler = __esm({
   "../adapter/src/platform-handler.ts"() {
     "use strict";
+    init_default_pages();
     __dirname5 = dirname13(fileURLToPath4(import.meta.url));
   }
 });
@@ -48501,6 +48806,7 @@ function resolveCssUrls(opts) {
 }
 
 // ../adapter/src/ssr-function.ts
+init_default_pages();
 function resolveErrorFile(sourceDir, appDir) {
   const rel = relative(appDir, sourceDir).split("/").filter(Boolean);
   for (let depth = rel.length; depth >= 0; depth--) {
@@ -48701,7 +49007,7 @@ ${layoutDecls.map((d) => "  " + d.compiled + ",").join("\n")}
       "    const result = await renderPage('', _errorComp, props, __componentRegistry, { hydrate: true, cached: _errorCompiled });",
       "    return result.body;",
       "  } catch {",
-      "    return '<h1>500 \\u2014 Internal Server Error</h1>';",
+      `    return ${JSON.stringify(renderDefaultErrorFragment())};`,
       "  }",
       "}",
       "",
@@ -50907,6 +51213,7 @@ async function loadVeskConfig2(projectDir) {
 }
 
 // ../adapter/src/prod-server.ts
+init_default_pages();
 var __dirname4 = dirname10(fileURLToPath3(import.meta.url));
 async function deliverResponse(res, response) {
   res.writeHead(response.status, Object.fromEntries(response.headers));
@@ -51367,7 +51674,7 @@ async function startProdServer(outDir, options) {
               }
               if (err.name === "NotFoundError") {
                 res.writeHead(404, { "Content-Type": "text/html" });
-                res.end(notFoundHtml || "<!DOCTYPE html><html><body><h1>404</h1><p>Not Found</p></body></html>");
+                res.end(notFoundHtml || renderDefaultNotFoundPage({ url: url.pathname, headExtra: bakedHeadExtra }));
                 return;
               }
               console.error("vesk ssr error:", err.message);
@@ -51395,7 +51702,7 @@ async function startProdServer(outDir, options) {
                 }
               }
               res.writeHead(500, { "Content-Type": "text/html" });
-              res.end(errorHtml || "<!DOCTYPE html><html><body><h1>500</h1><pre>Internal Server Error</pre></body></html>");
+              res.end(errorHtml || renderDefaultErrorPage({ message: process.env.NODE_ENV !== "production" ? err.message : void 0, url: url.pathname, headExtra: bakedHeadExtra }));
               return;
             }
           }
@@ -51403,7 +51710,7 @@ async function startProdServer(outDir, options) {
       }
     }
     res.writeHead(404, { "Content-Type": "text/html" });
-    res.end(notFoundHtml || "<!DOCTYPE html><html><body><h1>404</h1><p>Not Found</p></body></html>");
+    res.end(notFoundHtml || renderDefaultNotFoundPage({ url: url.pathname, headExtra: bakedHeadExtra }));
   });
   try {
     await eventsMod?.executeStart?.({ server, port, host });
@@ -52421,15 +52728,38 @@ function transformTracked2(irNode, tracked2) {
 }
 function collectTrackedNames2(body) {
   const names = /* @__PURE__ */ new Map();
+  collectTrackedNamesInto2(body, names);
+  return names;
+}
+function collectTrackedNamesInto2(body, names) {
   for (const node of body) {
     if (node instanceof TrackDecl) {
       const cellName = node.rawName || node.name;
       names.set(node.name, { cellName, kind: "virtual" });
       if (node.rawName)
         names.set(node.rawName, { cellName, kind: "cell" });
+    } else if (node instanceof StaticNode || node instanceof ServerBlock || node instanceof ClientBlock || node instanceof HeadBlock) {
+      collectTrackedNamesInto2(node.children, names);
+    } else if (node instanceof ComponentCall) {
+      collectTrackedNamesInto2(node.children, names);
+    } else if (node instanceof PropSlot) {
+      collectTrackedNamesInto2(node.body, names);
+    } else if (node instanceof MapRegion) {
+      collectTrackedNamesInto2(node.bodyTemplate, names);
+      collectTrackedNamesInto2(node.alternateNodes, names);
+    } else if (node instanceof OpaqueDynamicRegion) {
+      collectTrackedNamesInto2(node.consequentNodes, names);
+      collectTrackedNamesInto2(node.alternateNodes, names);
+    } else if (node instanceof WhileLoop || node instanceof ForLoop) {
+      collectTrackedNamesInto2(node.bodyTemplate, names);
+    } else if (node instanceof TryCatch) {
+      collectTrackedNamesInto2(node.bodyTemplate, names);
+      collectTrackedNamesInto2(node.catchBody, names);
+    } else if (node instanceof SwitchBlock) {
+      for (const c of node.cases)
+        collectTrackedNamesInto2(c.body, names);
     }
   }
-  return names;
 }
 function collectTrackedDeps2(value, tracked2) {
   const ast = value?.ast;
@@ -52469,6 +52799,64 @@ function transformTrackedInit2(init, tracked2) {
     return init;
   return transformTracked2({ raw: init, ast: expr }, tracked2);
 }
+function runtimeDeclaredNames2(node) {
+  if (!(node instanceof RuntimeStatement))
+    return [];
+  const stmt = node.ast;
+  if (!stmt || stmt.type !== "VariableDeclaration" || !stmt.declarations)
+    return [];
+  const out = [];
+  for (const d of stmt.declarations) {
+    if (d.id && d.id.type === "Identifier" && typeof d.id.name === "string")
+      out.push(d.id.name);
+  }
+  return out;
+}
+function initReadsAnyOf2(init, names) {
+  if (!init || names.size === 0)
+    return false;
+  let expr = null;
+  try {
+    const prog = parse4(`(${init})`);
+    expr = prog.body?.[0]?.type === "ExpressionStatement" ? prog.body[0].expression ?? null : null;
+  } catch {
+    return false;
+  }
+  if (!expr)
+    return false;
+  let found = false;
+  const walk9 = (n) => {
+    if (found || !n || typeof n !== "object")
+      return;
+    if (Array.isArray(n)) {
+      for (const c of n)
+        walk9(c);
+      return;
+    }
+    const t = n.type;
+    if (typeof t !== "string")
+      return;
+    if (t === "Identifier") {
+      if (names.has(n.name))
+        found = true;
+      return;
+    }
+    if (t === "MemberExpression") {
+      const m = n;
+      walk9(m.object);
+      if (m.computed)
+        walk9(m.property);
+      return;
+    }
+    for (const key of Object.keys(n)) {
+      if (key === "loc" || key === "range" || key === "start" || key === "end")
+        continue;
+      walk9(n[key]);
+    }
+  };
+  walk9(expr);
+  return found;
+}
 var NON_BUBBLING_EVENTS2 = /* @__PURE__ */ new Set([
   "focus",
   "blur",
@@ -52544,6 +52932,9 @@ var Ctx2 = class {
   walker = "__hydrate";
   asyncComps = /* @__PURE__ */ new Set();
   isAsyncScope = false;
+  // While emitting a loop body, names the boolean flag a `break` sets (see
+  // BreakSignal). Null outside a break-capable loop body.
+  breakFlag = null;
   constructor(alloc) {
     this.alloc = alloc ?? { c: 0 };
   }
@@ -52631,6 +53022,11 @@ function emitNode2(ctx2, node, tracked2, effectsVar, parentVar, compPrefix = "__
     ctx2.push(semicolonizeStatement2(transformTracked2(node, tracked2)));
     return null;
   }
+  if (node instanceof BreakSignal) {
+    if (ctx2.breakFlag)
+      ctx2.push(`${ctx2.breakFlag} = true;`);
+    return null;
+  }
   if (node instanceof SlotNode) {
     if (!parentVar) {
       if (ctx2.hydrate) {
@@ -53543,6 +53939,8 @@ function emitWhileLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget
   ctx2.push(`const ${endAnchor} = document.createComment('while-end');`);
   emitHydrateFenceAnchoring2(ctx2, anchor, endAnchor, parent === "$root", budget || void 0);
   const renderLoop = ctx2.n();
+  const hasBreak = bodyHasBreak2(node.bodyTemplate);
+  const breakVar = hasBreak ? ctx2.n() : null;
   ctx2.push(`const ${renderLoop} = ${ctx2.isAsyncScope ? "async () => {" : "() => {"}`);
   if (!hyd)
     ctx2.push(indent3(`const __p = ${anchor}.parentNode;`));
@@ -53550,8 +53948,14 @@ function emitWhileLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget
     ctx2.push(indent3(`const __b = document.createDocumentFragment();`));
   if (hyd)
     ctx2.push(indent3(`const __cl = [];`));
+  if (breakVar)
+    ctx2.push(indent3(`let ${breakVar} = false;`));
+  const savedBreakFlag = ctx2.breakFlag;
+  ctx2.breakFlag = breakVar;
   if (node.isDoWhile) {
     ctx2.push(indent3(`do {`));
+    if (breakVar)
+      ctx2.push(indent3(indent3(`if (${breakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode2(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -53564,6 +53968,8 @@ function emitWhileLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget
     ctx2.push(indent3(`} while (${condExpr});`));
   } else {
     ctx2.push(indent3(`while (${condExpr}) {`));
+    if (breakVar)
+      ctx2.push(indent3(indent3(`if (${breakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode2(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -53575,6 +53981,7 @@ function emitWhileLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget
     }
     ctx2.push(indent3(`}`));
   }
+  ctx2.breakFlag = savedBreakFlag;
   if (!hyd)
     ctx2.push(indent3(`__p.insertBefore(__b, ${endAnchor});`));
   if (hyd)
@@ -53618,6 +54025,8 @@ function emitForLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
   ctx2.push(`const ${endAnchor} = document.createComment('for-end');`);
   emitHydrateFenceAnchoring2(ctx2, anchor, endAnchor, parent === "$root", budget || void 0);
   const renderLoop = ctx2.n();
+  const forHasBreak = bodyHasBreak2(node.bodyTemplate);
+  const forBreakVar = forHasBreak ? ctx2.n() : null;
   ctx2.push(`const ${renderLoop} = ${ctx2.isAsyncScope ? "async () => {" : "() => {"}`);
   if (!hyd)
     ctx2.push(indent3(`const __p = ${anchor}.parentNode;`));
@@ -53625,9 +54034,15 @@ function emitForLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
     ctx2.push(indent3(`const __b = document.createDocumentFragment();`));
   if (hyd)
     ctx2.push(indent3(`const __cl = [];`));
+  if (forBreakVar)
+    ctx2.push(indent3(`let ${forBreakVar} = false;`));
+  const savedForBreakFlag = ctx2.breakFlag;
+  ctx2.breakFlag = forBreakVar;
   if (node.kind === "for-in") {
     const srcExpr = transformTracked2(node.condition, tracked2);
     ctx2.push(indent3(`for (${node.init} of (Array.isArray(${srcExpr}) ? ${srcExpr} : (${srcExpr} == null ? [] : Object.keys(${srcExpr})))) {`));
+    if (forBreakVar)
+      ctx2.push(indent3(indent3(`if (${forBreakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode2(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -53648,6 +54063,8 @@ function emitForLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
       updatePart = updatePart.slice(0, -1).trim();
     const head = initPart ? `${initPart}; ${condExpr}` : `; ${condExpr}`;
     ctx2.push(indent3(`for (${head}; ${updatePart}) {`));
+    if (forBreakVar)
+      ctx2.push(indent3(indent3(`if (${forBreakVar}) break;`)));
     for (const n of node.bodyTemplate) {
       const v = emitNode2(ctx2, n, tracked2, effectsVar, hyd ? parentVar : "__b", "__components", 0, budget || void 0);
       if (v) {
@@ -53659,6 +54076,7 @@ function emitForLoop2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudget)
     }
     ctx2.push(indent3(`}`));
   }
+  ctx2.breakFlag = savedForBreakFlag;
   if (!hyd)
     ctx2.push(indent3(`__p.insertBefore(__b, ${endAnchor});`));
   if (hyd)
@@ -53830,6 +54248,36 @@ function emitSwitchBlock2(ctx2, node, tracked2, parentVar, skipK = 0, regionBudg
 }`);
   return null;
 }
+function bodyHasBreak2(nodes) {
+  for (const n of nodes) {
+    if (n instanceof BreakSignal)
+      return true;
+    if (n instanceof OpaqueDynamicRegion) {
+      if (bodyHasBreak2([...n.consequentNodes, ...n.alternateNodes]))
+        return true;
+    } else if (n instanceof SwitchBlock) {
+      for (const c of n.cases)
+        if (bodyHasBreak2(c.body))
+          return true;
+    } else if (n instanceof TryCatch) {
+      if (bodyHasBreak2([...n.bodyTemplate, ...n.catchBody]))
+        return true;
+    } else if (n instanceof StaticNode) {
+      if (bodyHasBreak2(n.children))
+        return true;
+    } else if (n instanceof ComponentCall) {
+      if (bodyHasBreak2(n.children))
+        return true;
+    } else if (n instanceof ServerBlock || n instanceof ClientBlock || n instanceof HeadBlock) {
+      if (bodyHasBreak2(n.children))
+        return true;
+    } else if (n instanceof PropSlot) {
+      if (bodyHasBreak2(n.body))
+        return true;
+    }
+  }
+  return false;
+}
 function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionBudget) {
   const arrExpr = transformTracked2(node.expression, tracked2);
   const itemVar = node.itemVariable;
@@ -53863,9 +54311,15 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
   ctx2.push(`let ${effectsVar} = [];`);
   ctx2.push(`const ${endAnchor} = document.createComment('map-end');`);
   const renderItem = ctx2.n();
+  const hasBreak = bodyHasBreak2(node.bodyTemplate);
+  const breakVar = hasBreak ? ctx2.n() : null;
+  if (breakVar)
+    ctx2.push(`let ${breakVar} = false;`);
   const indexParam = node.indexVariable ? ", __i" : "";
   ctx2.push(`const ${renderItem} = ${ctx2.isAsyncScope ? "async " : ""}(${itemVar}${indexParam}, __e, __r${hyd ? ", __cl" : ""}${hydKeyed ? ", __root" : ""}) => {`);
   ctx2.push(indent3(`__r = __r || ${endAnchor};`));
+  if (breakVar)
+    ctx2.push(indent3(`if (${breakVar}) return;`));
   if (node.indexVariable)
     ctx2.push(indent3(`const ${node.indexVariable} = __i;`));
   if (hyd) {
@@ -53876,6 +54330,8 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
   }
   if (hydKeyed)
     ctx2.rootClaim = true;
+  const savedMapBreak = ctx2.breakFlag;
+  ctx2.breakFlag = breakVar;
   for (const n of node.bodyTemplate) {
     const v = emitNode2(ctx2, n, tracked2, "__e", hyd ? void 0 : "__it", "__components", 0, budget || void 0);
     if (v) {
@@ -53888,6 +54344,7 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
       }
     }
   }
+  ctx2.breakFlag = savedMapBreak;
   if (hydKeyed)
     ctx2.rootClaim = false;
   if (!hyd)
@@ -53931,11 +54388,12 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
     const keyFnSrc = `(${itemVar}${node.indexVariable ? `, ${node.indexVariable}` : ""}) => ${keyExpr}`;
     const reconciler = ctx2.n();
     const initList = ctx2.n();
+    const breakReset = breakVar ? `${breakVar} = false; ` : "";
     ctx2.push(`let ${reconciler} = () => {};`);
     if (hydKeyed) {
-      ctx2.push(`const ${initList} = () => { ${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"}, null, __root), __hydrate, ${parent}, ${skipK}); };`);
+      ctx2.push(`const ${initList} = () => { ${breakReset}${reconciler} = reconcileHydrated(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e, __root) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"}, null, __root), __hydrate, ${parent}, ${skipK}); };`);
     } else {
-      ctx2.push(`const ${initList} = () => { ${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"})); };`);
+      ctx2.push(`const ${initList} = () => { ${breakReset}${reconciler} = reconcile(${anchor}, ${endAnchor}, ${arrExpr}, ${keyFnSrc}, (${itemVar}, __i, __e) => ${renderItem}(${itemVar}${indexParam ? ", __i, __e" : ", __e"})); };`);
     }
     if (emptyRenderName) {
       const isEmptyVar = ctx2.n();
@@ -53947,7 +54405,7 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
     const __new = ${hasItems}();
     if (__first) { __first = false; __new; return; }
     if (__new !== ${isEmptyVar}) {
-      if (__new) ${reconciler}(${arrExpr});
+      if (__new) {${breakVar ? ` ${breakVar} = false;` : ""} ${reconciler}(${arrExpr}); }
       return;
     }
     ${isEmptyVar} = !__new;
@@ -53962,22 +54420,28 @@ function emitMap2(ctx2, node, tracked2, effTarget, parentVar, skipK = 0, regionB
         return null;
       pushEffect(`let __first = true;`, `effect(() => {
     const __nv = ${arrExpr};
-    if (__first) { __first = false; __nv; ${reconciler}(${arrExpr}); return; }
-    ${reconciler}(${arrExpr});
+    if (__first) { __first = false; __nv; ${breakReset}${reconciler}(${arrExpr}); return; }
+    ${breakVar ? `if (${breakVar}) ${breakVar} = false;` : ""}${reconciler}(${arrExpr});
   })`);
     }
   } else {
     const renderAllItems = (ind, collect) => {
       const lines = [];
+      if (breakVar)
+        lines.push(`${ind}${breakVar} = false;`);
       if (node.indexVariable) {
         lines.push(`${ind}let __i = 0;`);
         lines.push(`${ind}for (const ${itemVar} of ${arrExpr}) {`);
         lines.push(`${ind}	${aw}${renderItem}(${itemVar}, __i, ${effectsVar}${collect ? `, null, ${collect}` : ""});`);
         lines.push(`${ind}	__i++;`);
+        if (breakVar)
+          lines.push(`${ind}	if (${breakVar}) break;`);
         lines.push(`${ind}}`);
       } else {
         lines.push(`${ind}for (const ${itemVar} of ${arrExpr}) {`);
         lines.push(`${ind}	${aw}${renderItem}(${itemVar}, ${effectsVar}${collect ? `, null, ${collect}` : ""});`);
+        if (breakVar)
+          lines.push(`${ind}	if (${breakVar}) break;`);
         lines.push(`${ind}}`);
       }
       return lines.join("\n");
@@ -54070,8 +54534,21 @@ function generateComponent2(comp, importedNames = /* @__PURE__ */ new Set(), hyd
   const paramInit = buildParamInit3(comp.paramNames, comp.propsAlias);
   if (paramInit)
     ctx2.push(indent3(paramInit));
+  const deferredTrackDecls = /* @__PURE__ */ new Set();
+  {
+    const declaredSoFar = /* @__PURE__ */ new Set();
+    for (const node of comp.body) {
+      if (node instanceof TrackDecl) {
+        if (initReadsAnyOf2(node.init, declaredSoFar))
+          deferredTrackDecls.add(node);
+        continue;
+      }
+      for (const name of runtimeDeclaredNames2(node))
+        declaredSoFar.add(name);
+    }
+  }
   for (const node of comp.body) {
-    if (node instanceof TrackDecl) {
+    if (node instanceof TrackDecl && !deferredTrackDecls.has(node)) {
       emitNode2(ctx2, node, tracked2, null);
     }
   }
@@ -54094,8 +54571,11 @@ function generateComponent2(comp, importedNames = /* @__PURE__ */ new Set(), hyd
     }
   }
   for (const node of comp.body) {
-    if (node instanceof TrackDecl)
+    if (node instanceof TrackDecl) {
+      if (deferredTrackDecls.has(node))
+        emitNode2(ctx2, node, tracked2, null);
       continue;
+    }
     const v = emitNode2(ctx2, node, tracked2, null, void 0, "__components", topPendingSkip, topBudget || void 0);
     if (v) {
       if (ctx2.hydrate) {
@@ -61847,6 +62327,71 @@ function createVeskTools(deps) {
   return tools;
 }
 
+// ../adapter/dist/default-pages.js
+function escapeDefaultPageHtml2(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var DEFAULT_PAGE_CSS2 = [
+  ":root{color-scheme:light;",
+  "--vsk-bg:oklch(0.941 0.014 88);",
+  "--vsk-fg:oklch(0.185 0.008 62);",
+  "--vsk-surface:oklch(0.965 0.012 88);",
+  "--vsk-muted:oklch(0.475 0.014 72);",
+  "--vsk-accent:oklch(0.560 0.140 42);",
+  "--vsk-border:oklch(0.86 0.012 82);",
+  "--vsk-border-strong:oklch(0.72 0.014 80);",
+  '--vsk-font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;',
+  '--vsk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}',
+  "@media (prefers-color-scheme:dark){:root{color-scheme:dark;",
+  "--vsk-bg:oklch(0.155 0.006 60);",
+  "--vsk-fg:oklch(0.931 0.014 88);",
+  "--vsk-surface:oklch(0.196 0.008 70);",
+  "--vsk-muted:oklch(0.618 0.016 80);",
+  "--vsk-accent:oklch(0.632 0.132 45);",
+  "--vsk-border:oklch(0.29 0.009 75);",
+  "--vsk-border-strong:oklch(0.40 0.011 75);}}",
+  "*{box-sizing:border-box}",
+  "html,body{margin:0;min-height:100%}",
+  "body{background:var(--vsk-bg);color:var(--vsk-fg);font-family:var(--vsk-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}",
+  ".vsk-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}",
+  ".vsk-page__card{width:100%;max-width:540px;border:1px solid var(--vsk-border);background:var(--vsk-surface);padding:clamp(28px,6vw,44px);text-align:center}",
+  "@supports (background:color-mix(in oklab,red,red)){.vsk-page__card{background:color-mix(in oklab,var(--vsk-surface) 60%,transparent)}}",
+  ".vsk-page__brand{margin:0 0 26px;font-family:var(--vsk-mono);font-size:10px;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--vsk-muted)}",
+  ".vsk-page__brand b{color:var(--vsk-fg);font-weight:600}",
+  ".vsk-page__row{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}",
+  ".vsk-page__status{font-size:clamp(34px,9vw,46px);font-weight:600;line-height:1;letter-spacing:-.03em;padding-right:22px;margin-right:22px;border-right:1px solid var(--vsk-border-strong)}",
+  ".vsk-page--error .vsk-page__status{color:var(--vsk-accent)}",
+  ".vsk-page__msg{font-family:var(--vsk-mono);font-size:13px;line-height:1.5;color:var(--vsk-muted);text-align:left;max-width:270px}",
+  "@media (max-width:440px){.vsk-page__row{flex-direction:column}.vsk-page__status{padding:0 0 16px;margin:0 0 16px;border-right:0;border-bottom:1px solid var(--vsk-border-strong)}.vsk-page__msg{text-align:center}}",
+  ".vsk-page__detail{margin:20px 0 0;font-family:var(--vsk-mono);font-size:11px;line-height:1.6;color:var(--vsk-muted);word-break:break-all}",
+  ".vsk-page__actions{margin-top:30px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}",
+  ".vsk-page__btn{display:inline-block;padding:11px 22px;font-size:13px;font-weight:500;line-height:1;text-decoration:none;border:1px solid var(--vsk-fg);background:var(--vsk-fg);color:var(--vsk-bg);transition:opacity .18s cubic-bezier(.2,0,0,1)}",
+  ".vsk-page__btn:hover{opacity:.86}",
+  ".vsk-page__btn--ghost{background:transparent;color:var(--vsk-fg);border-color:var(--vsk-border-strong)}",
+  ".vsk-page__btn--ghost:hover{background:var(--vsk-fg);color:var(--vsk-bg);border-color:var(--vsk-fg);opacity:1}"
+].join("");
+function renderDefaultPage2(opts = {}) {
+  const status = opts.status ?? 404;
+  const title = escapeDefaultPageHtml2(opts.title ?? `${status} \u2014 Vesk`);
+  const message = escapeDefaultPageHtml2(opts.message ?? "This page could not be found.");
+  const url = opts.url ? escapeDefaultPageHtml2(opts.url) : "";
+  const headExtra = opts.headExtra || "";
+  const homeHref = opts.homeHref === void 0 ? "/" : opts.homeHref;
+  const homeLabel = escapeDefaultPageHtml2(opts.homeLabel ?? "Back to home");
+  const variant = `vsk-page${opts.accentStatus ? " vsk-page--error" : ""}`;
+  const action = homeHref === null ? "" : `<a class="vsk-page__btn" href="${escapeDefaultPageHtml2(homeHref)}">${homeLabel}</a>`;
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex"><title>${title}</title><style>${DEFAULT_PAGE_CSS2}</style>` + headExtra + `</head><body><main class="${variant}" data-vesk-default-page="${status}"><div class="vsk-page__card"><p class="vsk-page__brand"><b>Vesk</b> \xB7 built-in error page</p><div class="vsk-page__row"><span class="vsk-page__status">${status}</span><span class="vsk-page__msg">${message}</span></div>` + (url ? `<p class="vsk-page__detail">${url}</p>` : "") + (action ? `<div class="vsk-page__actions">${action}</div>` : "") + "</div></main></body></html>";
+}
+function renderDefaultNotFoundPage2(opts = {}) {
+  return renderDefaultPage2({
+    status: 404,
+    title: "404 \u2014 Not Found",
+    message: "This page could not be found.",
+    url: opts.url,
+    headExtra: opts.headExtra
+  });
+}
+
 // ../adapter/dist/css.js
 import { readFileSync as readFileSync33, existsSync as existsSync37 } from "node:fs";
 import { resolve as resolve33 } from "node:path";
@@ -61878,6 +62423,7 @@ import { WebSocketServer } from "ws";
 import { readFileSync as readFileSync34, existsSync as existsSync38, writeFileSync as writeFileSync19 } from "node:fs";
 import { resolve as resolve34, dirname as dirname24 } from "node:path";
 import { fileURLToPath as fileURLToPath7 } from "node:url";
+init_default_pages();
 init_paths();
 
 // ../adapter/src/error-codeframe.ts
@@ -64276,7 +64822,7 @@ Object.defineProperty(__components, ${JSON.stringify(cname)}, { get: () => __com
       }
       logRequest(404);
       res.writeHead(404, { "Content-Type": "text/html" });
-      res.end(notFoundHtml || `<!DOCTYPE html><html><body><h1>404</h1><p>${url.pathname}</p></body></html>`);
+      res.end(notFoundHtml || renderDefaultNotFoundPage2({ url: url.pathname }));
       return;
     }
     const urlParts = url.pathname.split("/").filter(Boolean);
@@ -64575,7 +65121,7 @@ ${prettifyHtml(body)}
         }
         logRequest(404);
         res.writeHead(404, { "Content-Type": "text/html" });
-        res.end(notFoundHtml || "<!DOCTYPE html><html><body><h1>404 \u2014 Not Found</h1></body></html>");
+        res.end(notFoundHtml || renderDefaultNotFoundPage2({ url: url.pathname }));
       } else {
         let devPayload = null;
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/vesk-cli",
-  "version": "0.2.60",
+  "version": "0.2.62",
   "type": "module",
   "description": "Vesk — compiler-first framework for the post-VDOM web. vesk dev, vesk build.",
   "bin": {
@@ -8,10 +8,10 @@
   },
   "main": "./dist/cli.js",
   "dependencies": {
-    "@vesk/adapter": "^0.2.60",
-    "@vesk/compiler": "^0.2.60",
-    "@vesk/plugin-tailwind": "^0.2.60",
-    "@vesk/runtime": "^0.2.60",
+    "@vesk/adapter": "^0.2.62",
+    "@vesk/compiler": "^0.2.62",
+    "@vesk/plugin-tailwind": "^0.2.62",
+    "@vesk/runtime": "^0.2.62",
     "esrap": "^2.3.0",
     "typescript": "^5.8.0",
     "ws": "^8.18.0",