@vesk/vesk-cli 0.2.24 → 0.2.26

package/dist/cli.js

@@ -2154,6 +2154,9 @@ function stripDirectTextNodes(el) {
     if (el.childNodes[i].nodeType === 3) el.childNodes[i].remove();
   }
 }
+function captureSsrElementChildren(el) {
+  el.__vsk_ssrEls = Array.prototype.slice.call(el.children);
+}
 function assertFullyHydrated(container) {
   let unclaimed = 0;
   let sample = "";
@@ -2198,6 +2201,19 @@ function adoptElement(marker, tag) {
   if (tag && el.tagName.toLowerCase() !== tag) return null;
   marker.remove();
   stripDirectTextNodes(el);
+  captureSsrElementChildren(el);
+  stampClaimed(el);
+  return el;
+}
+function adoptElementRaw(marker, tag) {
+  const el = marker.nextElementSibling;
+  if (!el) {
+    marker.remove();
+    return null;
+  }
+  if (tag && el.tagName.toLowerCase() !== tag) return null;
+  marker.remove();
+  captureSsrElementChildren(el);
   stampClaimed(el);
   return el;
 }
@@ -2205,30 +2221,6 @@ function createHydrateWalker(container, markerList) {
   const markers = markerList || (container ? collectVskMarkers(container) : []);
   return new WalkerEngine(container, markers);
 }
-function createHydrateChildWalker(parentEl) {
-  let childIdx = 0;
-  const children = parentEl ? parentEl.children : [];
-  return {
-    root: parentEl,
-    done() {
-      return childIdx >= children.length;
-    },
-    nextElement(tag) {
-      while (childIdx < children.length) {
-        const child = children[childIdx++];
-        if (!tag || child.tagName.toLowerCase() === tag) {
-          stripDirectTextNodes(child);
-          stampClaimed(child);
-          return child;
-        }
-      }
-      return document.createElement(tag || "div");
-    },
-    subWalker(rootEl) {
-      return createHydrateChildWalker(rootEl);
-    }
-  };
-}
 function hydrateViewport(container, componentFn, props, rootMargin = 500) {
   if (document.readyState !== "complete") {
     return new Promise((resolve39) => {
@@ -2375,6 +2367,13 @@ var init_hydrate = __esm({
       root;
       markers;
       idx = 0;
+      // Elements already adopted by an earlier claim in this walk. Marker-only SSR
+      // can leave TWO `<!--vsk-->` marks on the same element (the call site and
+      // the callee's own root marker — e.g. Link self-prefixes `<!--vsk-->` and
+      // the shared walker claims its call-site marker), and a claim must never
+      // adopt the same node twice: double-adoption strips its SSR text a second
+      // time and shells the cursor so every later claim misses its element.
+      adopted = /* @__PURE__ */ new WeakSet();
       constructor(root3, markers) {
         this.root = root3;
         this.markers = markers.map((c) => ({ comment: c, state: "unclaimed" }));
@@ -2382,6 +2381,43 @@ var init_hydrate = __esm({
       done() {
         return this.idx >= this.markers.length;
       }
+      // A marker whose `nextElementSibling` was already adopted is a dead alias of
+      // a live claim point (double-marker collision). Retire it and move on so the
+      // cursor never claims a node twice.
+      isAlreadyAdopted(tm, el) {
+        if (el !== null && this.adopted.has(el)) {
+          tm.state = "claimed";
+          this.idx++;
+          tm.comment.remove();
+          return true;
+        }
+        return false;
+      }
+      recordAdopted(el) {
+        this.adopted.add(el);
+      }
+      // Marker-only SSR can stack several `<!--vsk-->` marks before ONE element
+      // (call-site marker + the callee's own root marker). The FIRST claim adopts
+      // the element; the alias markers that immediately follow it are dead — they
+      // point at an already-claimed node and must be physically retired so the
+      // canary never counts them and a trailing alias never lingers in the DOM.
+      retireAliases(el) {
+        let i = this.idx;
+        while (i < this.markers.length) {
+          const tm = this.markers[i];
+          if (tm.state === "claimed") {
+            i++;
+            continue;
+          }
+          if (tm.comment.nextElementSibling === el) {
+            tm.state = "claimed";
+            tm.comment.remove();
+            i++;
+            continue;
+          }
+          break;
+        }
+      }
       nextElement(tag) {
         while (this.idx < this.markers.length) {
           const tm = this.markers[this.idx];
@@ -2390,6 +2426,7 @@ var init_hydrate = __esm({
             continue;
           }
           const el = tm.comment.nextElementSibling;
+          if (this.isAlreadyAdopted(tm, el)) continue;
           if (tag && el && el.tagName.toLowerCase() !== tag) {
             break;
           }
@@ -2399,6 +2436,8 @@ var init_hydrate = __esm({
             tm.state = "claimed";
             break;
           }
+          this.recordAdopted(adopted);
+          this.retireAliases(adopted);
           tm.state = "claimed";
           return adopted;
         }
@@ -2410,6 +2449,45 @@ ${String(this.root.outerHTML).slice(0, 800)}` : "")
         }
         return document.createElement(tag || "div");
       }
+      claimOnly(tag) {
+        while (this.idx < this.markers.length) {
+          const tm = this.markers[this.idx];
+          if (tm.state === "claimed") {
+            this.idx++;
+            continue;
+          }
+          const el = tm.comment.nextElementSibling;
+          if (this.isAlreadyAdopted(tm, el)) continue;
+          if (tag && el && el.tagName.toLowerCase() !== tag) break;
+          this.idx++;
+          const adopted = adoptElementRaw(tm.comment, tag);
+          if (adopted === null) {
+            tm.state = "claimed";
+            break;
+          }
+          this.recordAdopted(adopted);
+          this.retireAliases(adopted);
+          tm.state = "claimed";
+          return adopted;
+        }
+        return document.createElement(tag || "div");
+      }
+      retireDetached() {
+        while (this.idx < this.markers.length) {
+          const tm = this.markers[this.idx];
+          if (tm.state === "claimed") {
+            this.idx++;
+            continue;
+          }
+          const c = tm.comment;
+          if (!c || !c.parentNode) {
+            tm.state = "claimed";
+            this.idx++;
+            continue;
+          }
+          break;
+        }
+      }
       subWalker(rootEl) {
         const subMarkers = this.markers.slice(this.idx).filter((m) => {
           if (m.state === "claimed") return false;
@@ -2420,9 +2498,6 @@ ${String(this.root.outerHTML).slice(0, 800)}` : "")
         });
         this.idx += subMarkers.length;
         for (const m of subMarkers) m.state = "claimed";
-        if (subMarkers.length === 0 && rootEl && rootEl.tagName === "SPAN" && rootEl.style && rootEl.style.display === "contents") {
-          return createHydrateChildWalker(rootEl);
-        }
         return new _WalkerEngine(rootEl, subMarkers.map((m) => m.comment));
       }
       claimByKey(key) {
@@ -2431,10 +2506,14 @@ ${String(this.root.outerHTML).slice(0, 800)}` : "")
           const tm = this.markers[i];
           if (tm.state === "claimed") continue;
           const el = tm.comment.nextElementSibling;
+          if (this.isAlreadyAdopted(tm, el)) continue;
           if (el && el.getAttribute("data-vsk-key") === strKey) {
             tm.state = "claimed";
+            this.recordAdopted(el);
+            this.retireAliases(el);
             tm.comment.remove();
             stripDirectTextNodes(el);
+            captureSsrElementChildren(el);
             stampClaimed(el);
             return { el };
           }
@@ -2448,6 +2527,7 @@ ${String(this.root.outerHTML).slice(0, 800)}` : "")
           const tm = this.markers[i];
           if (tm.state === "claimed") continue;
           const el = tm.comment.nextElementSibling;
+          if (el && this.adopted.has(el)) continue;
           if (el && el.getAttribute("data-vsk-key") === strKey) return el;
         }
         return null;
@@ -2835,11 +2915,6 @@ function isRouteHref(href) {
 function setIsHydrating(v) {
   __isHydrating = v;
 }
-function captureInitialScroll() {
-  if (typeof window === "undefined") return;
-  _initialSavedScroll = window.scrollY || 0;
-  _initialScrollRestored = false;
-}
 function setIsPopStateNavigation(v) {
   _isPopStateNavigation = v;
 }
@@ -2907,11 +2982,6 @@ function handleScroll(pathname, isReplace, scrollBehavior) {
     requestAnimationFrame(() => {
       window.scrollTo({ top: savedY !== void 0 ? savedY : 0, behavior });
     });
-  } else if (isReplace && !_initialScrollRestored) {
-    _initialScrollRestored = true;
-    requestAnimationFrame(() => {
-      window.scrollTo({ top: _initialSavedScroll, behavior });
-    });
   } else if (!isReplace) {
     requestAnimationFrame(() => window.scrollTo({ top: 0, behavior }));
   }
@@ -2976,10 +3046,6 @@ function Link(props, registry, hydrate) {
   const href = props.href || "#";
   if (hydrate && hydrate.nextElement) {
     let a2 = hydrate.nextElement("a");
-    if (a2 && !a2.parentNode && hydrate.root) {
-      const existing = hydrate.root.querySelector("a");
-      if (existing) a2 = existing;
-    }
     const claimed = a2 ? a2.parentNode !== null : false;
     if (!a2) a2 = document.createElement("a");
     applyLinkDom(a2, props, href);
@@ -3222,7 +3288,7 @@ function useRouter() {
     }
   };
 }
-var Redirect, NotFoundError, RouterCtx, _currentRouter, _outletId, __isHydrating, _state, _scrollPositions, _isPopStateNavigation, _initialScrollRestored, _initialSavedScroll, HEAD_MARKER;
+var Redirect, NotFoundError, RouterCtx, _currentRouter, _outletId, __isHydrating, _state, _scrollPositions, _isPopStateNavigation, HEAD_MARKER;
 var init_router_components = __esm({
   "../runtime/src/router-components.ts"() {
     "use strict";
@@ -3257,8 +3323,6 @@ var init_router_components = __esm({
     };
     _scrollPositions = /* @__PURE__ */ new Map();
     _isPopStateNavigation = false;
-    _initialScrollRestored = false;
-    _initialSavedScroll = 0;
     HEAD_MARKER = "data-vesk-head";
   }
 });
@@ -4316,10 +4380,6 @@ function createRouter(routes, options = {}) {
     },
     start() {
       setCurrentRouter(this);
-      if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
-        captureInitialScroll();
-        window.history.scrollRestoration = "manual";
-      }
       if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
         let _scrollTimer = null;
         window.addEventListener("scroll", () => {
@@ -4639,10 +4699,6 @@ function createFileRouter(routeTree, options = {}) {
     },
     start() {
       setCurrentRouter(this);
-      if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
-        captureInitialScroll();
-        window.history.scrollRestoration = "manual";
-      }
       if (typeof window !== "undefined" && typeof window.addEventListener === "function") {
         let _scrollTimer = null;
         const _onScroll = () => {
@@ -27583,15 +27639,21 @@ function emitStatic(ctx2, node, tracked2, effectsVar) {
       ctx2.push(`${el}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(escapeHtml4(attr.value))});`);
     }
   }
+  let residueBefore = 0;
   for (const child of children) {
     const childVar = emitNode(ctx2, child, tracked2, effectsVar, el);
     if (childVar) {
       if (ctx2.hydrate) {
-        ctx2.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+        if (child instanceof TextNode || child instanceof DynamicBinding) {
+          ctx2.push(`if (${childVar}.parentNode !== ${el}) { const __ssr = ${el}.__vsk_ssrEls || []; if (${residueBefore} < __ssr.length) ${el}.insertBefore(${childVar}, __ssr[${residueBefore}]); else ${el}.appendChild(${childVar}); }`);
+        } else {
+          ctx2.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+        }
       } else {
         ctx2.push(`${el}.appendChild(${childVar});`);
       }
     }
+    residueBefore += ssrResidueEstimate(child);
   }
   for (const attr of dynAttrs) {
     const target = attr.target || "";
@@ -27762,22 +27824,28 @@ function emitComponentCall(ctx2, node, tracked2, effectsVar, parentVar, compPref
   }
   const propsObj = `{ ${propsEntries.join(", ")} }`;
   const v = ctx2.n();
-  const awaitKw = ctx2.asyncComps.has(node.componentName) ? "await " : "";
+  const awaitKw = ctx2.isAsyncScope ? "await " : "";
   const calleeExpr = node.calleeExpr ? `(${node.calleeExpr})` : null;
   if (ctx2.hydrate) {
     const access = calleeExpr ?? (ctx2.importedNames.has(node.componentName) ? node.componentName : `__components[${JSON.stringify(node.componentName)}]`);
-    const subScope = () => ctx2.inTryBody ? `${ctx2.walker}.subWalker(${parentVar})` : `${ctx2.walker}.subWalker(${ctx2.walker}.nextElement())`;
+    const plainTarget = !!(calleeExpr || ctx2.importedNames.has(node.componentName)) && !ctx2.selfClaimNames.has(node.componentName);
+    const walkerArg = ctx2.walker;
+    const maybeReplace = (v2) => {
+      if (!plainTarget) return;
+      ctx2.push(`if (${v2} && ${v2}.parentNode == null && ${v2}.nodeType !== 11) { const __sr = ${walkerArg}.claimOnly(); if (__sr && __sr.parentNode) __sr.parentNode.replaceChild(${v2}, __sr); }`);
+    };
+    const maybeRetire = () => {
+      if (ctx2.selfClaimNames.has(node.componentName)) {
+        ctx2.push(`${walkerArg}.retireDetached();`);
+      }
+    };
     if (node.children.length > 0) {
-      const walkerVar = ctx2.n();
-      ctx2.push(`const ${walkerVar} = ${subScope()};`);
       const frag = ctx2.n();
       ctx2.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
-      const savedWalker = ctx2.walker;
       const savedEffects = ctx2.effects;
       const wipeMount = ctx2.linkNames.has(node.componentName);
       const savedHydrate = ctx2.hydrate;
       if (wipeMount) ctx2.hydrate = false;
-      ctx2.walker = walkerVar;
       ctx2.effects = [];
       for (const child of node.children) {
         const childVar = emitNode(ctx2, child, tracked2, effectsVar, "$f");
@@ -27785,14 +27853,17 @@ function emitComponentCall(ctx2, node, tracked2, effectsVar, parentVar, compPref
       }
       for (const eff of ctx2.effects) ctx2.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr(eff)});` : eff);
       ctx2.effects = savedEffects;
-      ctx2.walker = savedWalker;
       ctx2.hydrate = savedHydrate;
       ctx2.push(`return $f; })();`);
       propsEntries.push(`children: ${frag}`);
-      ctx2.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(", ")} }, __registry, ${walkerVar});`);
+      ctx2.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(", ")} }, __registry, ${walkerArg});`);
+      maybeReplace(v);
+      maybeRetire();
       return v;
     }
-    ctx2.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${subScope()});`);
+    ctx2.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${walkerArg});`);
+    maybeReplace(v);
+    maybeRetire();
     return v;
   } else {
     if (node.children.length > 0) {
@@ -28521,11 +28592,12 @@ ${renderAllItems("    ", null)}
 function computeAsyncComponents(comps) {
   return new Set(comps.filter((c) => c.isAsync).map((c) => c.name));
 }
-function generateComponent(comp, importedNames = /* @__PURE__ */ new Set(), hydrate = false, asyncComps = /* @__PURE__ */ new Set(), linkNames = /* @__PURE__ */ new Set()) {
+function generateComponent(comp, importedNames = /* @__PURE__ */ new Set(), hydrate = false, asyncComps = /* @__PURE__ */ new Set(), linkNames = /* @__PURE__ */ new Set(), selfClaimNames = /* @__PURE__ */ new Set()) {
   const tracked2 = collectTrackedNames(comp.body);
   const ctx2 = new Ctx();
   ctx2.importedNames = importedNames;
   ctx2.linkNames = linkNames;
+  ctx2.selfClaimNames = selfClaimNames;
   ctx2.hydrate = hydrate;
   ctx2.asyncComps = asyncComps;
   ctx2.isAsyncScope = comp.isAsync || asyncComps.has(comp.name);
@@ -28549,10 +28621,16 @@ function generateComponent(comp, importedNames = /* @__PURE__ */ new Set(), hydr
   const paramInit = buildParamInit2(comp.paramNames);
   if (paramInit) ctx2.push(indent2(paramInit));
   for (const node of comp.body) {
+    if (node instanceof TrackDecl) {
+      emitNode(ctx2, node, tracked2, null);
+    }
+  }
+  for (const node of comp.body) {
+    if (node instanceof TrackDecl) continue;
     const v = emitNode(ctx2, node, tracked2, null);
     if (v) {
       if (ctx2.hydrate) {
-        ctx2.push(indent2(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !$root.contains(${v})) $root.appendChild(${v}); }`));
+        ctx2.push(indent2(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !${v}.parentNode.contains(${v})) $root.appendChild(${v}); }`));
       } else {
         ctx2.push(indent2(`$root.appendChild(${v});`));
       }
@@ -28579,7 +28657,13 @@ function buildComponentMap(irRoot, hydrate = false) {
   mapLines.push(`const __components = {};`);
   const asyncComps = computeAsyncComponents(irRoot.components);
   const linkNames = /* @__PURE__ */ new Set();
+  const selfClaimNames = /* @__PURE__ */ new Set();
+  const SELF_CLAIM_RUNTIME = /* @__PURE__ */ new Set(["Link", "NavLink", "Md", "Form", "Field", "LoadingIndicator"]);
   for (const imp of irRoot.imports) {
+    if (importModuleTarget(imp) !== "@vesk/runtime") continue;
+    for (const pair of importBindingPairs(imp)) {
+      if (SELF_CLAIM_RUNTIME.has(pair.imported)) selfClaimNames.add(pair.local);
+    }
     for (const pair of importBindingPairs(imp)) {
       if (pair.imported === "Link" || pair.imported === "NavLink") linkNames.add(pair.local);
     }
@@ -28589,11 +28673,11 @@ function buildComponentMap(irRoot, hydrate = false) {
   const directNames = /* @__PURE__ */ new Set([...extractRuntimeNames(irRoot.imports), ...localValueImportNames(irRoot.imports), ...topValueNames]);
   for (const comp of irRoot.components) {
     if (hydrate && isStaticComponent(comp)) {
-      const stub = `(props, __registry, __hydrate) => { return __hydrate.root; }`;
+      const stub = `(props, __registry, __hydrate) => { return __hydrate.claimOnly(); }`;
       mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${stub};`);
       continue;
     }
-    const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames);
+    const code = generateComponent(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames);
     mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${code};`);
   }
   mapLines.push(`function __cleanup(start, end) {`);
@@ -28622,6 +28706,32 @@ function buildComponentMap(irRoot, hydrate = false) {
   mapLines.push(`}`);
   return mapLines.join("\n\n");
 }
+function ssrResidueEstimate(node) {
+  if (Array.isArray(node)) {
+    let total = 0;
+    for (const n of node) total += ssrResidueEstimate(n);
+    return total;
+  }
+  if (node instanceof StaticNode) return 1;
+  if (node instanceof ComponentCall) return 1;
+  if (node instanceof OpaqueDynamicRegion) {
+    return Math.max(ssrResidueEstimate(node.consequentNodes), ssrResidueEstimate(node.alternateNodes));
+  }
+  if (node instanceof MapRegion) {
+    return Math.max(ssrResidueEstimate(node.bodyTemplate), ssrResidueEstimate(node.alternateNodes));
+  }
+  if (node instanceof ForLoop) return ssrResidueEstimate(node.bodyTemplate);
+  if (node instanceof WhileLoop) return ssrResidueEstimate(node.bodyTemplate);
+  if (node instanceof SwitchBlock) {
+    let max = 0;
+    for (const c of node.cases) max = Math.max(max, ssrResidueEstimate(c.body));
+    return max;
+  }
+  if (node instanceof TryCatch) {
+    return Math.max(ssrResidueEstimate(node.bodyTemplate), ssrResidueEstimate(node.catchBody));
+  }
+  return 0;
+}
 function isStaticIR(body) {
   for (const node of body) {
     if (node instanceof StaticNode) {
@@ -28851,6 +28961,7 @@ var init_client_codegen = __esm({
     init_server_utils();
     init_module_imports();
     init_scan();
+    init_tokens();
     init_md_inline();
     init_strip_ts();
     NON_BUBBLING_EVENTS = /* @__PURE__ */ new Set([
@@ -28892,6 +29003,11 @@ var init_client_codegen = __esm({
       c = 0;
       importedNames = /* @__PURE__ */ new Set();
       linkNames = /* @__PURE__ */ new Set();
+      // Runtime component imports that claim their own SSR root via `nextElement`
+      // (Link/NavLink/Md/Form/Field/LoadingIndicator) and return a DocumentFragment
+      // when claimed. They need no call-site adoption guard — the guard targets
+      // genuinely-plain components that never touch the walker.
+      selfClaimNames = /* @__PURE__ */ new Set();
       delegatedEvents = /* @__PURE__ */ new Set();
       directEvents = /* @__PURE__ */ new Set();
       hydrate = false;
@@ -29280,7 +29396,7 @@ function componentCallToJS(node, importedNames, isAsync = false, tracked2) {
   lines.push(`const ${calleeVar} = ${callee};`);
   const callExpr3 = `${awaitKw}${calleeVar}(${propsObj}, __registry, (${calleeVar}.__veskScope || __vesk))`;
   if (__vskHydrate) {
-    lines.push(`__out.push(${JSON.stringify(HYDRATE_COMPONENT_WRAPPER)} + (${callExpr3} || '') + '</span>');`);
+    lines.push(`__out.push(${JSON.stringify(HYDRATE_COMPONENT_WRAPPER)} + (${callExpr3} || ''));`);
   } else {
     lines.push(`__out.push(${callExpr3} || '');`);
   }
@@ -29384,7 +29500,7 @@ var init_server_jsgen = __esm({
     init_scan();
     init_server_utils();
     init_module_imports();
-    HYDRATE_COMPONENT_WRAPPER = '<!--vsk--><span style="display:contents">';
+    HYDRATE_COMPONENT_WRAPPER = "<!--vsk-->";
     __currentCompName = "";
   }
 });
@@ -40831,6 +40947,7 @@ init_actions();
 init_server_utils();
 init_module_imports();
 init_scan();
+init_tokens();
 init_md_inline();
 init_strip_ts();
 import { walk as walk6 } from "zimmerframe";
@@ -41052,6 +41169,11 @@ var Ctx2 = class {
   c = 0;
   importedNames = /* @__PURE__ */ new Set();
   linkNames = /* @__PURE__ */ new Set();
+  // Runtime component imports that claim their own SSR root via `nextElement`
+  // (Link/NavLink/Md/Form/Field/LoadingIndicator) and return a DocumentFragment
+  // when claimed. They need no call-site adoption guard — the guard targets
+  // genuinely-plain components that never touch the walker.
+  selfClaimNames = /* @__PURE__ */ new Set();
   delegatedEvents = /* @__PURE__ */ new Set();
   directEvents = /* @__PURE__ */ new Set();
   hydrate = false;
@@ -41209,15 +41331,21 @@ function emitStatic2(ctx2, node, tracked2, effectsVar) {
       ctx2.push(`${el}.setAttribute(${JSON.stringify(attr.name)}, ${JSON.stringify(escapeHtml5(attr.value))});`);
     }
   }
+  let residueBefore = 0;
   for (const child of children) {
     const childVar = emitNode2(ctx2, child, tracked2, effectsVar, el);
     if (childVar) {
       if (ctx2.hydrate) {
-        ctx2.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+        if (child instanceof TextNode || child instanceof DynamicBinding) {
+          ctx2.push(`if (${childVar}.parentNode !== ${el}) { const __ssr = ${el}.__vsk_ssrEls || []; if (${residueBefore} < __ssr.length) ${el}.insertBefore(${childVar}, __ssr[${residueBefore}]); else ${el}.appendChild(${childVar}); }`);
+        } else {
+          ctx2.push(`if (${childVar}.parentNode !== ${el}) { if (!${el} || ${childVar}.parentNode == null || !${el}.contains(${childVar})) ${el}.appendChild(${childVar}); }`);
+        }
       } else {
         ctx2.push(`${el}.appendChild(${childVar});`);
       }
     }
+    residueBefore += ssrResidueEstimate2(child);
   }
   for (const attr of dynAttrs) {
     const target = attr.target || "";
@@ -41408,23 +41536,30 @@ function emitComponentCall2(ctx2, node, tracked2, effectsVar, parentVar, compPre
   }
   const propsObj = `{ ${propsEntries.join(", ")} }`;
   const v = ctx2.n();
-  const awaitKw = ctx2.asyncComps.has(node.componentName) ? "await " : "";
+  const awaitKw = ctx2.isAsyncScope ? "await " : "";
   const calleeExpr = node.calleeExpr ? `(${node.calleeExpr})` : null;
   if (ctx2.hydrate) {
     const access = calleeExpr ?? (ctx2.importedNames.has(node.componentName) ? node.componentName : `__components[${JSON.stringify(node.componentName)}]`);
-    const subScope = () => ctx2.inTryBody ? `${ctx2.walker}.subWalker(${parentVar})` : `${ctx2.walker}.subWalker(${ctx2.walker}.nextElement())`;
+    const plainTarget = !!(calleeExpr || ctx2.importedNames.has(node.componentName)) && !ctx2.selfClaimNames.has(node.componentName);
+    const walkerArg = ctx2.walker;
+    const maybeReplace = (v2) => {
+      if (!plainTarget)
+        return;
+      ctx2.push(`if (${v2} && ${v2}.parentNode == null && ${v2}.nodeType !== 11) { const __sr = ${walkerArg}.claimOnly(); if (__sr && __sr.parentNode) __sr.parentNode.replaceChild(${v2}, __sr); }`);
+    };
+    const maybeRetire = () => {
+      if (ctx2.selfClaimNames.has(node.componentName)) {
+        ctx2.push(`${walkerArg}.retireDetached();`);
+      }
+    };
     if (node.children.length > 0) {
-      const walkerVar = ctx2.n();
-      ctx2.push(`const ${walkerVar} = ${subScope()};`);
       const frag = ctx2.n();
       ctx2.push(`const ${frag} = (() => { const $f = document.createDocumentFragment();`);
-      const savedWalker = ctx2.walker;
       const savedEffects = ctx2.effects;
       const wipeMount = ctx2.linkNames.has(node.componentName);
       const savedHydrate = ctx2.hydrate;
       if (wipeMount)
         ctx2.hydrate = false;
-      ctx2.walker = walkerVar;
       ctx2.effects = [];
       for (const child of node.children) {
         const childVar = emitNode2(ctx2, child, tracked2, effectsVar, "$f");
@@ -41434,14 +41569,17 @@ function emitComponentCall2(ctx2, node, tracked2, effectsVar, parentVar, compPre
       for (const eff of ctx2.effects)
         ctx2.push(effectsVar ? `${effectsVar}.push(${effectBlockToHandlerExpr2(eff)});` : eff);
       ctx2.effects = savedEffects;
-      ctx2.walker = savedWalker;
       ctx2.hydrate = savedHydrate;
       ctx2.push(`return $f; })();`);
       propsEntries.push(`children: ${frag}`);
-      ctx2.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(", ")} }, __registry, ${walkerVar});`);
+      ctx2.push(`const ${v} = ${awaitKw}${access}({ ${propsEntries.join(", ")} }, __registry, ${walkerArg});`);
+      maybeReplace(v);
+      maybeRetire();
       return v;
     }
-    ctx2.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${subScope()});`);
+    ctx2.push(`const ${v} = ${awaitKw}${access}(${propsObj}, __registry, ${walkerArg});`);
+    maybeReplace(v);
+    maybeRetire();
     return v;
   } else {
     if (node.children.length > 0) {
@@ -42255,11 +42393,12 @@ ${renderAllItems("    ", null)}
 function computeAsyncComponents2(comps) {
   return new Set(comps.filter((c) => c.isAsync).map((c) => c.name));
 }
-function generateComponent2(comp, importedNames = /* @__PURE__ */ new Set(), hydrate = false, asyncComps = /* @__PURE__ */ new Set(), linkNames = /* @__PURE__ */ new Set()) {
+function generateComponent2(comp, importedNames = /* @__PURE__ */ new Set(), hydrate = false, asyncComps = /* @__PURE__ */ new Set(), linkNames = /* @__PURE__ */ new Set(), selfClaimNames = /* @__PURE__ */ new Set()) {
   const tracked2 = collectTrackedNames2(comp.body);
   const ctx2 = new Ctx2();
   ctx2.importedNames = importedNames;
   ctx2.linkNames = linkNames;
+  ctx2.selfClaimNames = selfClaimNames;
   ctx2.hydrate = hydrate;
   ctx2.asyncComps = asyncComps;
   ctx2.isAsyncScope = comp.isAsync || asyncComps.has(comp.name);
@@ -42284,10 +42423,17 @@ function generateComponent2(comp, importedNames = /* @__PURE__ */ new Set(), hyd
   if (paramInit)
     ctx2.push(indent3(paramInit));
   for (const node of comp.body) {
+    if (node instanceof TrackDecl) {
+      emitNode2(ctx2, node, tracked2, null);
+    }
+  }
+  for (const node of comp.body) {
+    if (node instanceof TrackDecl)
+      continue;
     const v = emitNode2(ctx2, node, tracked2, null);
     if (v) {
       if (ctx2.hydrate) {
-        ctx2.push(indent3(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !$root.contains(${v})) $root.appendChild(${v}); }`));
+        ctx2.push(indent3(`if (${v}.parentNode !== $root) { if (!$root || ${v}.parentNode == null || !${v}.parentNode.contains(${v})) $root.appendChild(${v}); }`));
       } else {
         ctx2.push(indent3(`$root.appendChild(${v});`));
       }
@@ -42318,7 +42464,15 @@ function buildComponentMap3(irRoot, hydrate = false) {
   mapLines.push(`const __components = {};`);
   const asyncComps = computeAsyncComponents2(irRoot.components);
   const linkNames = /* @__PURE__ */ new Set();
+  const selfClaimNames = /* @__PURE__ */ new Set();
+  const SELF_CLAIM_RUNTIME = /* @__PURE__ */ new Set(["Link", "NavLink", "Md", "Form", "Field", "LoadingIndicator"]);
   for (const imp of irRoot.imports) {
+    if (importModuleTarget(imp) !== "@vesk/runtime")
+      continue;
+    for (const pair of importBindingPairs(imp)) {
+      if (SELF_CLAIM_RUNTIME.has(pair.imported))
+        selfClaimNames.add(pair.local);
+    }
     for (const pair of importBindingPairs(imp)) {
       if (pair.imported === "Link" || pair.imported === "NavLink")
         linkNames.add(pair.local);
@@ -42329,11 +42483,11 @@ function buildComponentMap3(irRoot, hydrate = false) {
   const directNames = /* @__PURE__ */ new Set([...extractRuntimeNames(irRoot.imports), ...localValueImportNames(irRoot.imports), ...topValueNames]);
   for (const comp of irRoot.components) {
     if (hydrate && isStaticComponent2(comp)) {
-      const stub = `(props, __registry, __hydrate) => { return __hydrate.root; }`;
+      const stub = `(props, __registry, __hydrate) => { return __hydrate.claimOnly(); }`;
       mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${stub};`);
       continue;
     }
-    const code = generateComponent2(comp, directNames, hydrate, asyncComps, linkNames);
+    const code = generateComponent2(comp, directNames, hydrate, asyncComps, linkNames, selfClaimNames);
     mapLines.push(`__components[${JSON.stringify(comp.name)}] = ${code};`);
   }
   mapLines.push(`function __cleanup(start, end) {`);
@@ -42362,6 +42516,38 @@ function buildComponentMap3(irRoot, hydrate = false) {
   mapLines.push(`}`);
   return mapLines.join("\n\n");
 }
+function ssrResidueEstimate2(node) {
+  if (Array.isArray(node)) {
+    let total = 0;
+    for (const n of node)
+      total += ssrResidueEstimate2(n);
+    return total;
+  }
+  if (node instanceof StaticNode)
+    return 1;
+  if (node instanceof ComponentCall)
+    return 1;
+  if (node instanceof OpaqueDynamicRegion) {
+    return Math.max(ssrResidueEstimate2(node.consequentNodes), ssrResidueEstimate2(node.alternateNodes));
+  }
+  if (node instanceof MapRegion) {
+    return Math.max(ssrResidueEstimate2(node.bodyTemplate), ssrResidueEstimate2(node.alternateNodes));
+  }
+  if (node instanceof ForLoop)
+    return ssrResidueEstimate2(node.bodyTemplate);
+  if (node instanceof WhileLoop)
+    return ssrResidueEstimate2(node.bodyTemplate);
+  if (node instanceof SwitchBlock) {
+    let max = 0;
+    for (const c of node.cases)
+      max = Math.max(max, ssrResidueEstimate2(c.body));
+    return max;
+  }
+  if (node instanceof TryCatch) {
+    return Math.max(ssrResidueEstimate2(node.bodyTemplate), ssrResidueEstimate2(node.catchBody));
+  }
+  return 0;
+}
 function isStaticIR2(body) {
   for (const node of body) {
     if (node instanceof StaticNode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vesk/vesk-cli",
-  "version": "0.2.24",
+  "version": "0.2.26",
   "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.24",
-    "@vesk/compiler": "^0.2.24",
-    "@vesk/plugin-tailwind": "^0.2.24",
-    "@vesk/runtime": "^0.2.24",
+    "@vesk/adapter": "^0.2.26",
+    "@vesk/compiler": "^0.2.26",
+    "@vesk/plugin-tailwind": "^0.2.26",
+    "@vesk/runtime": "^0.2.26",
     "esrap": "^2.3.0",
     "typescript": "^5.8.0",
     "ws": "^8.18.0",