@stacksjs/stx 0.2.343 → 0.2.345

package/dist/signals.js

@@ -1,5 +1,5 @@
 import { state, derived, effect, batch, onMount, onDestroy, isSignal, isDerived, untrack, peek } from "./signals-api.js";
-import { runtimeHandledXAttrsLiteral } from "./runtime-globals.js";
+import { runtimeDirectiveNamesLiteral, runtimeEventRegexLiteral, runtimeHandledXAttrsLiteral } from "./runtime-globals.js";
 import { createModelSignal } from "./component-model.js";
 import { readHydratedData, clearServerData } from "./composables/use-fetch.js";
 
@@ -64,6 +64,82 @@ console.log('[stx] entering IIFE');
 (function() {
   'use strict';
 
+  // \u2500\u2500 Host \u2500\u2500
+  //
+  // The tree this runtime mutates. Every write the binding layer makes to a
+  // node goes through here, so the same runtime can drive something that is not
+  // the document -- native views over a bridge (stacksjs/stx#1984).
+  //
+  // Signals never touch a node, so nothing above this line needs to change; the
+  // coupling is entirely in the bind layer. A host is swapped in by assigning
+  // window.__stx_host before the runtime executes. The name is stxHost, not
+  // host, because the runtime already calls two local DOM nodes host -- a
+  // shadowed adapter fails as node.anchor is not a function, deep inside a
+  // branch swap, and nowhere near the line that caused it, which keeps the web path
+  // exactly as it was: same calls, one property lookup earlier.
+  var stxHost = window.__stx_host || {
+    setText: function(node, value) { node.textContent = value; },
+    setAttribute: function(node, name, value) { node.setAttribute(name, value); },
+    removeAttribute: function(node, name) { node.removeAttribute(name); },
+
+    // Structural operations, for the bindings that build rows rather than
+    // update one node (#1984).
+    //
+    // anchor() is a position in the child list that survives the nodes around
+    // it moving -- a comment node here, since the document has one; a native
+    // host keeps an index or a zero-size sentinel.
+    //
+    // clone() is the one that does not carry over as-is: a DOM subtree can be
+    // deep-copied, a native view hierarchy cannot. A native host materialises a
+    // fresh subtree from the template it was given instead of copying views,
+    // which is why the row template is passed rather than a node to duplicate.
+    // A native host registers the handler against the view and has the platform
+    // call it; nothing about the binding layer changes, which is the point.
+    // The options argument carries passive/capture/once. A native host has no use for
+    // passive -- there is no scroll thread to block -- but dropping the
+    // parameter silently makes every touch listener blocking again, so it stays
+    // in the signature and each host decides what to do with it.
+    listen: function(node, event, handler, options) { node.addEventListener(event, handler, options); },
+
+    // Returns the PREVIOUS visibility. bindShow needs to know whether it just
+    // revealed something, and asking the node afterwards is the one read-back
+    // in the binding layer -- a native host cannot answer what a UIView's
+    // display value was, because it has none. A write that reports what it
+    // replaced removes the question: the DOM host reads its own style, a native
+    // host reads isHidden, and the binder reads neither.
+    //
+    // Restoring an explicit display (a flex row, an inline-block) is the host's
+    // business too; it records it the first time it hides the node.
+    // The scope root a node belongs to: nearest ancestor-or-self that owns a
+    // scope, or null. Three binding paths need it -- ref ownership, and an
+    // if-chain finding the scope its branch belongs to.
+    //
+    // Not a query method. A host is never handed a selector, because a native
+    // view tree has nothing to match one against: the DOM host walks with
+    // closest(), a native host reads the node-to-scope map it maintains as it
+    // creates views. The from flag skips the node itself, which the ref path needs
+    // when it walks outward past a receiver it has already rejected.
+    scopeOf: function(node, from) {
+      var start = from ? (node && node.parentElement) : node;
+      return (start && start.closest) ? start.closest('[data-stx-scope]') : null;
+    },
+
+    setVisible: function(node, visible) {
+      if (node.__stx_display === undefined) {
+        var d = node.style.display;
+        node.__stx_display = (d && d !== 'none') ? d : '';
+      }
+      var was = node.style.display !== 'none';
+      node.style.display = visible ? node.__stx_display : 'none';
+      return was;
+    },
+
+    anchor: function(label) { return document.createComment(label); },
+    clone: function(node) { return node.cloneNode(true); },
+    insert: function(parent, node, before) { parent.insertBefore(node, before); },
+    remove: function(node) { if (node.parentNode) node.parentNode.removeChild(node); }
+  };
+
   // Inject x-cloak CSS to prevent FOUC (Flash of Unstyled Content)
   // Elements with x-cloak are hidden until the runtime removes the attribute after mount
   var cloakStyle = document.getElementById ? document.getElementById('stx-cloak-style') : null;
@@ -2572,7 +2648,41 @@ catch (e) {
     return scripts;
   }
 
-  function processElement(el, scope = componentScope) {
+  /**
+   * Bind what the server said carries a binding, instead of looking for it.
+   *
+   * The walk exists because the runtime does not know where the bindings are.
+   * The server does -- it rendered them -- so when it ships that list the
+   * runtime stops searching: resolve each id, bind that element, never touch
+   * its children. An element with no bindings is never visited at all.
+   *
+   * This is the piece a native host needs. A view hierarchy has no attributes
+   * to read and no selector to match, so discovery cannot happen there; handed
+   * the list, it does not have to. On the DOM the ids resolve by attribute,
+   * which is one query per entry rather than a full traversal.
+   *
+   * Absent a manifest nothing changes: the walk is still the default, and a
+   * page that ships no list hydrates exactly as it did.
+   */
+  function processFromManifest(root, scope, manifest) {
+    if (!root || !manifest || !manifest.length) return false;
+    for (var i = 0; i < manifest.length; i++) {
+      var entry = manifest[i];
+      var id = entry && entry.id;
+      if (id === undefined || id === null) continue;
+      var node = root.getAttribute && root.getAttribute('data-stx-b') === String(id)
+        ? root
+        : (root.querySelector ? root.querySelector('[data-stx-b="' + id + '"]') : null);
+      if (!node) continue;
+      processElement(node, scope, true);
+    }
+    return true;
+  }
+
+  // skipChildren: this element's bindings only, because something else already
+  // knows where the rest are. The manifest path passes it for every entry, so
+  // the tree is never walked; see processFromManifest.
+  function processElement(el, scope = componentScope, skipChildren) {
     // Lazy hydration: if this element has stx-hydrate and hasn't been hydrated
     // yet, defer its subtree processing until the trigger fires.
     if (el.nodeType === Node.ELEMENT_NODE && el.hasAttribute && el.hasAttribute('stx-hydrate') && !el.__stx_hydrated) {
@@ -2818,7 +2928,7 @@ catch (e2) {
     };
 
     // Known directive names to exclude from generic :attr binding
-    var DIRECTIVE_NAMES = {class:1, style:1, text:1, html:1, show:1, model:1, 'if':1, ref:1};
+    var DIRECTIVE_NAMES = ${runtimeDirectiveNamesLiteral()};
 
     // A bound value cannot introduce a URL scheme the page did not ask for.
     // This is the client half of url-safety.ts: the server refuses a scheme
@@ -2853,7 +2963,7 @@ catch (e2) {
     // a dead duplicate attribute and the real viewBox never updates.
     var SVG_ATTR_CASE = {attributename:'attributeName', attributetype:'attributeType', basefrequency:'baseFrequency', baseprofile:'baseProfile', calcmode:'calcMode', clippathunits:'clipPathUnits', diffuseconstant:'diffuseConstant', edgemode:'edgeMode', filterunits:'filterUnits', glyphref:'glyphRef', gradienttransform:'gradientTransform', gradientunits:'gradientUnits', kernelmatrix:'kernelMatrix', kernelunitlength:'kernelUnitLength', keypoints:'keyPoints', keysplines:'keySplines', keytimes:'keyTimes', lengthadjust:'lengthAdjust', limitingconeangle:'limitingConeAngle', markerheight:'markerHeight', markerunits:'markerUnits', markerwidth:'markerWidth', maskcontentunits:'maskContentUnits', maskunits:'maskUnits', numoctaves:'numOctaves', pathlength:'pathLength', patterncontentunits:'patternContentUnits', patterntransform:'patternTransform', patternunits:'patternUnits', pointsatx:'pointsAtX', pointsaty:'pointsAtY', pointsatz:'pointsAtZ', preservealpha:'preserveAlpha', preserveaspectratio:'preserveAspectRatio', primitiveunits:'primitiveUnits', refx:'refX', refy:'refY', repeatcount:'repeatCount', repeatdur:'repeatDur', requiredextensions:'requiredExtensions', requiredfeatures:'requiredFeatures', specularconstant:'specularConstant', specularexponent:'specularExponent', spreadmethod:'spreadMethod', startoffset:'startOffset', stddeviation:'stdDeviation', stitchtiles:'stitchTiles', surfacescale:'surfaceScale', systemlanguage:'systemLanguage', tablevalues:'tableValues', targetx:'targetX', targety:'targetY', textlength:'textLength', viewbox:'viewBox', viewtarget:'viewTarget', xchannelselector:'xChannelSelector', ychannelselector:'yChannelSelector', zoomandpan:'zoomAndPan'};
     var SVG_NS = 'http://www.w3.org/2000/svg';
-    var EVENT_RE = /^(click|dblclick|mousedown|mouseup|mousemove|mouseenter|mouseleave|keydown|keyup|keypress|input|change|submit|focus|blur|scroll|resize|touchstart|touchend|touchmove|contextmenu|wheel|pointerdown|pointerup|pointermove)/;
+    var EVENT_RE = ${runtimeEventRegexLiteral()};
     var KEY_MAP = {enter:'Enter', tab:'Tab', escape:'Escape', space:' ', up:'ArrowUp', down:'ArrowDown', left:'ArrowLeft', right:'ArrowRight', 'delete':'Delete', backspace:'Backspace'};
 
     // Handle attributes
@@ -2942,7 +3052,7 @@ catch (e2) {
             el.setAttribute(attrName, String(v));
           }
           else if (v === false || v === null || v === undefined) {
-            el.removeAttribute(attrName);
+            stxHost.removeAttribute(el, attrName);
           }
 else if (v === true) {
             el.setAttribute(attrName, '');
@@ -2953,7 +3063,7 @@ else {
               try { attrValue = JSON.stringify(v); }
               catch (e) { attrValue = String(v); }
             }
-            el.setAttribute(attrName, safeUrlAttr(attrName, attrValue));
+            stxHost.setAttribute(el, attrName, safeUrlAttr(attrName, attrValue));
           }
         });
         el.removeAttribute(name);
@@ -2968,7 +3078,7 @@ else if (name === '@style' || name === ':style' || name === 'x-style') {
       }
 else if (name === '@text' || name === ':text' || name === 'x-text') {
         effect(() => {
-          el.textContent = evalAttrExpr(value);
+          stxHost.setText(el, evalAttrExpr(value));
         });
         el.removeAttribute(name);
       }
@@ -2984,14 +3094,14 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
         // A page ref can be projected through a component whose own $refs
         // replaced the compatibility scope's map. The compiler retains the
         // receiver boundary so named and signal refs use the same caller.
-        var refRoot = el.closest && el.closest('[data-stx-scope]');
+        var refRoot = stxHost.scopeOf(el);
         var refCaller = el.getAttribute('data-stx-ref-caller');
         var refOwnerScope = findElementScope(el);
         if (refCaller) {
           var receiver = refRoot;
           while (receiver && receiver.getAttribute('data-stx-scope') !== refCaller
             && receiver.getAttribute('data-stx-template-scope') !== refCaller) {
-            receiver = receiver.parentElement && receiver.parentElement.closest('[data-stx-scope]');
+            receiver = stxHost.scopeOf(receiver, true);
           }
           refOwnerScope = receiver && receiver.__stx_parent_scope;
         }
@@ -3042,7 +3152,7 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
           ? { ...globalHelpers, ...el.__stx_parent_scope }
           : { ...globalHelpers, ...scope, ...(findElementScope(el) || {}) };
 
-        el.addEventListener(eventName, (event) => {
+        stxHost.listen(el, eventName, (event) => {
           // Vue-style component listeners fall through to the rendered native
           // root unless the child emits the same event. Signal components use
           // a scope wrapper, so native events arrive here from a descendant.
@@ -3165,7 +3275,7 @@ catch (e) {
 
     // Process children (skip script/style elements \u2014 their text content is not template markup)
     // Skip elements that are roots of nested stx.mount() components \u2014 those have their own scope
-    if (el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE') {
+    if (!skipChildren && el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE') {
       var children = Array.from(el.childNodes);
       children.forEach(function(child) {
         if (child.nodeType !== Node.ELEMENT_NODE) { processElement(child, scope); return; }
@@ -3243,8 +3353,6 @@ catch (e) {
     if (el.__stx_show_bound) return;
     el.__stx_show_bound = true;
 
-    const currentDisplay = el.style.display;
-    const originalDisplay = (currentDisplay && currentDisplay !== 'none') ? currentDisplay : '';
     const capturedScope = { ...globalHelpers, ...passedScope, ...(findElementScope(el) || {}) };
 
     // Check if the expression is a simple signal reference (most common case for :show)
@@ -3254,7 +3362,7 @@ catch (e) {
       effect(() => {
         const value = directSignal();
 
-        el.style.display = value ? originalDisplay : 'none';
+        stxHost.setVisible(el, !!value);
       });
     } else {
       // Complex expression path \u2014 use createAutoUnwrapProxy with fallback,
@@ -3279,16 +3387,15 @@ catch (e) {
             // or object may not be ready yet on the first effect run, and
             // the next pass will re-evaluate once data arrives.
             if (!(e2 instanceof ReferenceError) && !(e2 instanceof TypeError)) console.warn('[STX] Show expression error:', expr, e2);
-            el.style.display = 'none';
+            stxHost.setVisible(el, false);
             return;
           }
         }
-        var wasHidden = el.style.display === 'none';
-        el.style.display = value ? originalDisplay : 'none';
+        var wasVisible = stxHost.setVisible(el, !!value);
         // When transitioning from hidden to visible, stamp the element so
         // @click handlers can ignore clicks from the same frame (prevents
         // modal backdrop from catching the click that opened the modal)
-        if (value && wasHidden) {
+        if (value && !wasVisible) {
           el.__stx_shown_at = performance.now();
         }
       });
@@ -3365,7 +3472,7 @@ catch (e) {
       };
       el.__stx_model_sync = syncCheckbox;
       effect(syncCheckbox);
-      el.addEventListener('change', () => {
+      stxHost.listen(el, 'change', () => {
         var current = getValue();
         if (!Array.isArray(current)) {
           setValue(el.checked);
@@ -3382,7 +3489,7 @@ catch (e) {
       var syncRadio = () => { el.checked = String(getValue()) === String(el.value); };
       el.__stx_model_sync = syncRadio;
       effect(syncRadio);
-      el.addEventListener('change', () => {
+      stxHost.listen(el, 'change', () => {
         if (el.checked) setValue(coerceValue(el.value));
       });
     }
@@ -3408,7 +3515,7 @@ catch (e) {
           el.__stx_model_observer = null;
         });
       }
-      el.addEventListener('change', () => setValue(coerceValue(el.value)));
+      stxHost.listen(el, 'change', () => setValue(coerceValue(el.value)));
     }
 else {
       // Writing el.value moves the text cursor to the END of the control, and
@@ -3446,7 +3553,7 @@ else {
           catch (e) { /* type does not support selection */ }
         }
       });
-      el.addEventListener(modifiers.includes('lazy') ? 'change' : 'input', () => setValue(coerceValue(el.value)));
+      stxHost.listen(el, modifiers.includes('lazy') ? 'change' : 'input', () => setValue(coerceValue(el.value)));
     }
 
     el.removeAttribute(attrName);
@@ -3854,7 +3961,7 @@ else if (typeof value === 'string') {
       return;
     }
 
-    const placeholder = document.createComment('stx-for');
+    const placeholder = stxHost.anchor('stx-for');
     const isTemplate = el.tagName === 'TEMPLATE';
     const componentSetupTemplates = [];
     if (!isTemplate && el.hasAttribute('data-stx-scope')) {
@@ -3876,8 +3983,8 @@ else if (typeof value === 'string') {
           && setupSibling.hasAttribute('data-stx-scoped')
           && ((setupSibling.textContent || '').indexOf(componentScopeId) !== -1
             || (componentTemplateScopeId && (setupSibling.textContent || '').indexOf(componentTemplateScopeId) !== -1))) {
-          componentSetupTemplates.push(setupSibling.cloneNode(true));
-          setupSibling.remove();
+          componentSetupTemplates.push(stxHost.clone(setupSibling));
+          stxHost.remove(setupSibling);
           setupSibling = nextSetupSibling;
           continue;
         }
@@ -3900,16 +4007,16 @@ else if (typeof value === 'string') {
     let sibling = el.nextElementSibling;
     while (sibling) {
       if (sibling.hasAttribute('@for-loading')) {
-        loadingTemplate = sibling.cloneNode(true);
+        loadingTemplate = stxHost.clone(sibling);
         loadingTemplate.removeAttribute('@for-loading');
-        sibling.remove();
+        stxHost.remove(sibling);
         sibling = el.nextElementSibling;
         continue;
       }
       if (sibling.hasAttribute('@for-empty')) {
-        emptyTemplate = sibling.cloneNode(true);
+        emptyTemplate = stxHost.clone(sibling);
         emptyTemplate.removeAttribute('@for-empty');
-        sibling.remove();
+        stxHost.remove(sibling);
         sibling = el.nextElementSibling;
         continue;
       }
@@ -3919,13 +4026,13 @@ else if (typeof value === 'string') {
     // Capture the scope NOW before element is removed from DOM
     const capturedScope = findElementScope(el) || findElementScope(parent);
 
-    parent.insertBefore(placeholder, el);
+    stxHost.insert(parent, placeholder, el);
     // Component setup scripts execute while the server-rendered loop source is
     // still in the document. That source becomes a template, not a live
     // instance, so reclaim all registered scopes before removing it. Every
     // rendered iteration receives remapped setup scripts and fresh scopes.
     disposeSubtreeScopes(el);
-    parent.removeChild(el);
+    stxHost.remove(el);
 
     // Capture :key expression BEFORE removing the attribute
     const keyExpr = el.getAttribute(':key') || el.getAttribute('x-bind:key');
@@ -3936,7 +4043,7 @@ else if (typeof value === 'string') {
       templateContent = el.content;
     }
 else {
-      const wrapper = el.cloneNode(true);
+      const wrapper = stxHost.clone(el);
       wrapper.removeAttribute('@for');
       wrapper.removeAttribute(':for');
       wrapper.removeAttribute('x-for');
@@ -3989,12 +4096,12 @@ else {
     const removeGroup = (group) => {
       const liveNodes = liveGroupNodes(group);
       const liveSet = new Set(liveNodes);
-      liveNodes.forEach(e => { disposeSubtreeEffects(e); disposeSubtreeScopes(e); e.remove(); });
+      liveNodes.forEach(e => { disposeSubtreeEffects(e); disposeSubtreeScopes(e); stxHost.remove(e); });
       group.forEach(groupNode => {
         if (liveSet.has(groupNode)) return;
         disposeSubtreeEffects(groupNode);
         disposeSubtreeScopes(groupNode);
-        groupNode.remove();
+        stxHost.remove(groupNode);
       });
     };
 
@@ -4057,15 +4164,15 @@ catch (e) {
       hideLoading();
       hideEmpty();
       if (loadingTemplate) {
-        loadingElement = loadingTemplate.cloneNode(true);
-        parent.insertBefore(loadingElement, placeholder);
+        loadingElement = stxHost.clone(loadingTemplate);
+        stxHost.insert(parent, loadingElement, placeholder);
       }
     };
 
     // Helper to hide loading state
     const hideLoading = () => {
       if (loadingElement) {
-        loadingElement.remove();
+        stxHost.remove(loadingElement);
         loadingElement = null;
       }
     };
@@ -4075,8 +4182,8 @@ catch (e) {
       hideLoading();
       hideEmpty();
       if (emptyTemplate) {
-        emptyElement = emptyTemplate.cloneNode(true);
-        parent.insertBefore(emptyElement, placeholder);
+        emptyElement = stxHost.clone(emptyTemplate);
+        stxHost.insert(parent, emptyElement, placeholder);
         const shownEmpty = emptyElement;
         shownEmpty.__stx_effect_disposers = trackEffects(function() { processElement(shownEmpty); });
       }
@@ -4087,7 +4194,7 @@ catch (e) {
       if (emptyElement) {
         // A string @empty renders a text node, which has no subtree to dispose.
         if (emptyElement.nodeType === 1) disposeSubtreeEffects(emptyElement);
-        emptyElement.remove();
+        stxHost.remove(emptyElement);
         emptyElement = null;
       }
     };
@@ -4109,9 +4216,9 @@ catch (e) {
 
       const elements = [];
       if (isTemplate) {
-        elements.push(document.createComment('stx-for-item-start'));
+        elements.push(stxHost.anchor('stx-for-item-start'));
         Array.from(templateContent.childNodes).forEach(node => {
-          const clone = node.cloneNode(true);
+          const clone = stxHost.clone(node);
           if (clone.nodeType === 1) {
             // Structural directives need a live parent. Keep the iteration
             // scope on the clone until the keyed diff inserts it, then bind.
@@ -4119,13 +4226,13 @@ catch (e) {
           }
           elements.push(clone);
         });
-        elements.push(document.createComment('stx-for-item-end'));
+        elements.push(stxHost.anchor('stx-for-item-end'));
       } else {
-        const clone = templateContent.cloneNode(true);
+        const clone = stxHost.clone(templateContent);
         clone.__stx_for_scope = itemScope;
         elements.push(clone);
         componentSetupTemplates.forEach(function(setupTemplate) {
-          elements.push(setupTemplate.cloneNode(true));
+          elements.push(stxHost.clone(setupTemplate));
         });
       }
       remapForComponentScopes(elements);
@@ -4251,7 +4358,7 @@ catch (e) {
           hideEmpty();
           if (emptyContent && typeof emptyContent === 'string') {
             emptyElement = document.createTextNode(emptyContent);
-            parent.insertBefore(emptyElement, placeholder);
+            stxHost.insert(parent, emptyElement, placeholder);
           }
         } else if (emptyTemplate) {
           showEmpty();
@@ -4345,7 +4452,7 @@ catch (e) {
               // Moves without detaching. The cursor does not advance: this node
               // is now behind it, and the cursor still marks the next position
               // to fill.
-              parent.insertBefore(groupNode, cursor || placeholder);
+              stxHost.insert(parent, groupNode, cursor || placeholder);
             }
           }
           newElements.push(...group);
@@ -4365,7 +4472,7 @@ catch (e) {
             // Before the cursor, not before the placeholder: a new row inserted
             // in the MIDDLE of the list must land at its own position, without
             // forcing every row after it to be moved to get back in order.
-            parent.insertBefore(el, cursor || placeholder);
+            stxHost.insert(parent, el, cursor || placeholder);
             if (tgReady && el.isConnected) tgEnter(el, tgName);
           });
           hydrateComponentScopes(elements, elements.find(function(node) {
@@ -4409,13 +4516,13 @@ catch (e) {
                 disposeSubtreeEffects(el);
                 disposeSubtreeScopes(el);
                 if (tgLeave(el, tgName)) transitioned.add(el);
-                else el.remove();
+                else stxHost.remove(el);
               });
               group.forEach((el) => {
                 if (transitioned.has(el) || liveNodes.includes(el)) return;
                 disposeSubtreeEffects(el);
                 disposeSubtreeScopes(el);
-                el.remove();
+                stxHost.remove(el);
               });
             }
             else {
@@ -4505,8 +4612,8 @@ catch (e) {
       b.el.__stx_chain_member = true;
       b.el.__stx_chain_active = false;
       b.capturedElementScope = findElementScope(b.el);
-      b.placeholder = document.createComment('stx-if-chain');
-      parent.insertBefore(b.placeholder, b.el);
+      b.placeholder = stxHost.anchor('stx-if-chain');
+      stxHost.insert(parent, b.placeholder, b.el);
       b.el.removeAttribute(b.attr);
       // A <template> branch (the wrapper convertSignalDirectivesToAttributes
       // emits for a multi-child / text branch) is INERT \u2014 inserting the element
@@ -4535,10 +4642,10 @@ catch (e) {
       // and the attributes it consumed (x-model, :id) do not come back -- so a
       // second clone taken from the element would arrive already stripped, with
       // no binding and no way to acquire one.
-      b.pristine = b.isTemplate ? b.el.content.cloneNode(true) : null;
+      b.pristine = b.isTemplate ? stxHost.clone(b.el.content) : null;
       b.nodes = b.isTemplate ? [] : [b.el];
       b.endMarker = null;
-      b.el.remove();
+      stxHost.remove(b.el);
       b.childrenProcessed = false;
     });
 
@@ -4602,7 +4709,7 @@ catch (e2) {
       console.log('[stx] bindIfChain pick:', pickedIdx, 'of', chain.length, '(', pickedIdx >= 0 ? chain[pickedIdx].attr : 'none', ') prev:', currentIdx);
       if (__stxDevtoolsTracking) {
         var __ifScope = null;
-        try { __ifScope = (head && head.closest) ? head.closest('[data-stx-scope]') : null; } catch (e) { __ifScope = null; }
+        try { __ifScope = stxHost.scopeOf(head); } catch (e) { __ifScope = null; }
         __stxDevtoolsRecordIf({
           scopeId: __ifScope ? __ifScope.getAttribute('data-stx-scope') : null,
           branches: chain.map(function(c) { return c.attr; }),
@@ -4630,21 +4737,20 @@ catch (e2) {
           // contains. The marker bounds the range, so a sibling that belongs to
           // a later branch or to ordinary markup is never touched.
           if (gone.endMarker && gone.endMarker.parentNode) {
-            var host = gone.endMarker.parentNode;
             var doomed = gone.placeholder.nextSibling;
             while (doomed && doomed !== gone.endMarker) {
               var nextDoomed = doomed.nextSibling;
               disposeSubtreeEffects(doomed);
-              host.removeChild(doomed);
+              stxHost.remove(doomed);
               doomed = nextDoomed;
             }
-            gone.endMarker.remove();
+            stxHost.remove(gone.endMarker);
             gone.endMarker = null;
           }
           gone.nodes.forEach(function (n) {
             if (!n.parentNode) return;
             disposeSubtreeEffects(n);
-            n.parentNode.removeChild(n);
+            stxHost.remove(n);
           });
           // The next show clones afresh and processes again, so these effects
           // are finished with; leaving them bound only accumulates work (#1954).
@@ -4662,10 +4768,10 @@ catch (e) { /* a disposer of its own is not this branch's problem */ }
             // Detached nodes are out of reach of a DOM walk, so a row removed
             // while this branch is hidden could not dispose the effects it was
             // processed with (#1954). Same registry the single-element :if uses.
-            var host = n.parentNode;
-            if (!host.__stx_detached_if) host.__stx_detached_if = new Set();
-            host.__stx_detached_if.add(n);
-            host.removeChild(n);
+            var parentEl = n.parentNode;
+            if (!parentEl.__stx_detached_if) parentEl.__stx_detached_if = new Set();
+            parentEl.__stx_detached_if.add(n);
+            stxHost.remove(n);
           });
         }
       }
@@ -4679,16 +4785,16 @@ catch (e) { /* a disposer of its own is not this branch's problem */ }
         var anchor = pick.placeholder.nextSibling;
         var pickHost = pick.placeholder.parentNode;
         if (pick.isTemplate && pick.nodes.length === 0)
-          pick.nodes = Array.prototype.slice.call(pick.pristine.cloneNode(true).childNodes);
+          pick.nodes = Array.prototype.slice.call(stxHost.clone(pick.pristine).childNodes);
         pick.nodes.forEach(function (n) {
           if (pickHost.__stx_detached_if) pickHost.__stx_detached_if.delete(n);
-          pickHost.insertBefore(n, anchor);
+          stxHost.insert(pickHost, n, anchor);
         });
         // Bound AFTER the clones, so hiding can remove whatever a structural
         // directive inside the branch renders as their sibling.
         if (pick.isTemplate) {
-          if (!pick.endMarker) pick.endMarker = document.createComment('stx-if-chain-end');
-          pickHost.insertBefore(pick.endMarker, anchor);
+          if (!pick.endMarker) pick.endMarker = stxHost.anchor('stx-if-chain-end');
+          stxHost.insert(pickHost, pick.endMarker, anchor);
         }
         pick.el.__stx_shown_at = performance.now();
         if (!pick.childrenProcessed) {
@@ -4751,7 +4857,7 @@ catch (e) { /* a disposer of its own is not this branch's problem */ }
       return;
     }
 
-    const placeholder = document.createComment('stx-if');
+    const placeholder = stxHost.anchor('stx-if');
     // Marks where this branch's rendered content ENDS (stacksjs/stx#1955).
     // Hiding used to remove only the cloned nodes, but a structural directive
     // directly inside the template renders its own output as siblings that are
@@ -4773,27 +4879,27 @@ catch (e) { /* a disposer of its own is not this branch's problem */ }
     const capturedComponentScope = { ...passedScope };
 
     preserveConditionalComponentScopes(el, capturedComponentScope);
-    parent.insertBefore(placeholder, el);
+    stxHost.insert(parent, placeholder, el);
     el.removeAttribute(attrName);
 
     if (isTemplate) {
       // For templates, we need to handle the content fragment
       const content = el.content;
-      currentNodes = Array.from(content.childNodes).map(n => n.cloneNode(true));
+      currentNodes = Array.from(content.childNodes).map(n => stxHost.clone(n));
       // Insert cloned content initially
       // Capture the anchor once. Re-reading placeholder.nextSibling after
       // every insertion points at the node just inserted and reverses a
       // multi-root template branch.
       const initialAnchor = placeholder.nextSibling;
-      currentNodes.forEach(node => parent.insertBefore(node, initialAnchor));
+      currentNodes.forEach(node => stxHost.insert(parent, node, initialAnchor));
       // The end of this branch's range, bound at the same time as the content
       // it closes (#1955). Needed here too, not only on re-show: the first
       // hide of a branch that was never toggled removes THIS content, and a
       // nested :for renders rows that are siblings of these clones rather than
       // among them.
-      endMarker = document.createComment('stx-if-end');
-      parent.insertBefore(endMarker, initialAnchor);
-      el.remove(); // Remove the template element itself
+      endMarker = stxHost.anchor('stx-if-end');
+      stxHost.insert(parent, endMarker, initialAnchor);
+      stxHost.remove(el); // Remove the template element itself
     }
 
     // Helper to evaluate with captured scope (auto-unwraps signals).
@@ -4883,13 +4989,13 @@ catch (e2) {
       if (isTemplate) {
         if (value && !isInserted) {
           // Re-insert cloned content
-          currentNodes = Array.from(el.content.childNodes).map(n => n.cloneNode(true));
+          currentNodes = Array.from(el.content.childNodes).map(n => stxHost.clone(n));
           const insertionAnchor = placeholder.nextSibling;
-          currentNodes.forEach(node => parent.insertBefore(node, insertionAnchor));
+          currentNodes.forEach(node => stxHost.insert(parent, node, insertionAnchor));
           // Bound AFTER the clones, so hiding can remove whatever a nested
           // structural directive rendered as their sibling (#1955).
-          if (!endMarker) endMarker = document.createComment('stx-if-end');
-          parent.insertBefore(endMarker, insertionAnchor);
+          if (!endMarker) endMarker = stxHost.anchor('stx-if-end');
+          stxHost.insert(parent, endMarker, insertionAnchor);
           processTemplateNodes(currentNodes);
           childrenProcessed = true;
           // Stamp insertion time for click propagation guard
@@ -4915,12 +5021,12 @@ else if (!value && isInserted) {
             while (doomed && doomed !== endMarker) {
               var nextDoomed = doomed.nextSibling;
               disposeSubtreeEffects(doomed);
-              doomed.remove();
+              stxHost.remove(doomed);
               doomed = nextDoomed;
             }
-            endMarker.remove();
+            stxHost.remove(endMarker);
           }
-          currentNodes.forEach(node => { disposeSubtreeEffects(node); node.remove(); });
+          currentNodes.forEach(node => { disposeSubtreeEffects(node); stxHost.remove(node); });
           currentNodes = [];
           isInserted = false;
           childrenProcessed = false;
@@ -4941,7 +5047,7 @@ else {
         if (value && !isInserted) {
           console.log('[stx] bindIf INSERTING element for :if=' + expr);
           const insertionAnchor = placeholder.nextSibling;
-          currentNodes.forEach(node => parent.insertBefore(node, insertionAnchor));
+          currentNodes.forEach(node => stxHost.insert(parent, node, insertionAnchor));
           if (parent && parent.__stx_detached_if) currentNodes.forEach(node => parent.__stx_detached_if.delete(node));
           el.__stx_shown_at = performance.now();
           isInserted = true;
@@ -4957,7 +5063,7 @@ else if (!value && isInserted) {
           // once (#1737). Permanent disposal stays in bindFor (item removal)
           // and cleanupContainer (SPA navigation). The double-bind guards make
           // re-show idempotent, so toggling doesn't leak.
-          currentNodes.forEach(node => node.remove());
+          currentNodes.forEach(node => stxHost.remove(node));
           // Detached nodes are out of reach of a DOM walk, so an ancestor row or
           // branch removed while this is hidden could not dispose their effects
           // (#1954). Record them on the parent that keeps the placeholder.
@@ -7843,7 +7949,10 @@ else {
     // Bind page roots after child components have registered their local scope.
     document.querySelectorAll('[data-stx]').forEach(el => {
       console.log('[DOMContentLoaded] processElement on:', el.tagName, 'scope keys:', Object.keys(componentScope).slice(0, 10));
-      var disposeEffects = trackEffects(function() { processElement(el); });
+      var disposeEffects = trackEffects(function() {
+        // The server's list when the page shipped one, the walk otherwise.
+        if (!processFromManifest(el, componentScope, window.__stx_bindings)) processElement(el);
+      });
       el.__stx_disposers = disposeEffects;
 
       // Remove x-cloak after bindings are applied (prevents FOUC)