@stacksjs/stx 0.2.343 → 0.2.345

package/dist/{chunk-4vd0rqfs.js → chunk-9jbssgem.js}

@@ -1,5 +1,5 @@
 // @bun
-import{Aj as M,Ej as E,Fj as P,Gj as O,Hj as I,vj as B,wj as R,xj as H,yj as S,zj as F}from"./chunk-e4g8wz6t.js";import{Iv as L}from"./chunk-53sjbp3z.js";var w=null;function j(){return w}function f(z,W){if(w)w.provides.set(z,W);else V.set(z,W)}function k(z,W){let Q=w;while(Q){if(Q.provides.has(z))return Q.provides.get(z);Q=Q.parent}if(V.has(z))return V.get(z);return W}var V=new Map;function v(z,W){V.set(z,W)}function U(z){let W=w,Q=W?.el,Z=Array.isArray(z)?z:z&&typeof z==="object"?Object.keys(z):[];if(Q&&Z.length>0){let $=Q.__stx_component_emits||=Object.create(null);for(let Y of Z)$[Y]=!0}let _=($,...Y)=>{if(typeof document>"u")return;if(Q){let X=Q.__stx_component_emits||=Object.create(null);X[$]=!0,Q.dispatchEvent(new CustomEvent($,{detail:Y.length===1?Y[0]:Y,bubbles:!0,cancelable:!0}))}};if(W)W.emit=_;return _}function g(z){if(w)w.exposed=z}function m(z){let W=Promise.resolve();return z?W.then(z):W}function y(z){if(w)w.errorCapturedHooks.push(z)}function h(z,W,Q){let Z=W?.parent;while(Z){for(let _ of Z.errorCapturedHooks)if(_(z,W,Q)===!1)return;Z=Z.parent}}function p(){return w?.slots??{}}function u(){return w?.slots??{}}function l(){return w?.attrs??{}}function d(z){let W=z.__provides?new Map(Object.entries(z.__provides)):new Map;return{...z,__provides:W,__provide(Q,Z){W.set(Q,Z)},__inject(Q,Z){if(W.has(Q))return W.get(Q);if(z.__provides){let _=z.__provides instanceof Map?z.__provides:new Map(Object.entries(z.__provides));if(_.has(Q))return _.get(Q)}return Z}}}function i(){return`
+import{Aj as M,Ej as P,Fj as T,Gj as x,Hj as C,vj as B,wj as F,xj as H,yj as O,zj as I}from"./chunk-e4g8wz6t.js";import{Jv as L,Lv as R,Nv as S}from"./chunk-72x62kch.js";var w=null;function j(){return w}function g(z,W){if(w)w.provides.set(z,W);else V.set(z,W)}function v(z,W){let Q=w;while(Q){if(Q.provides.has(z))return Q.provides.get(z);Q=Q.parent}if(V.has(z))return V.get(z);return W}var V=new Map;function m(z,W){V.set(z,W)}function U(z){let W=w,Q=W?.el,Z=Array.isArray(z)?z:z&&typeof z==="object"?Object.keys(z):[];if(Q&&Z.length>0){let $=Q.__stx_component_emits||=Object.create(null);for(let Y of Z)$[Y]=!0}let _=($,...Y)=>{if(typeof document>"u")return;if(Q){let A=Q.__stx_component_emits||=Object.create(null);A[$]=!0,Q.dispatchEvent(new CustomEvent($,{detail:Y.length===1?Y[0]:Y,bubbles:!0,cancelable:!0}))}};if(W)W.emit=_;return _}function y(z){if(w)w.exposed=z}function h(z){let W=Promise.resolve();return z?W.then(z):W}function p(z){if(w)w.errorCapturedHooks.push(z)}function u(z,W,Q){let Z=W?.parent;while(Z){for(let _ of Z.errorCapturedHooks)if(_(z,W,Q)===!1)return;Z=Z.parent}}function l(){return w?.slots??{}}function d(){return w?.slots??{}}function i(){return w?.attrs??{}}function c(z){let W=z.__provides?new Map(Object.entries(z.__provides)):new Map;return{...z,__provides:W,__provide(Q,Z){W.set(Q,Z)},__inject(Q,Z){if(W.has(Q))return W.get(Q);if(z.__provides){let _=z.__provides instanceof Map?z.__provides:new Map(Object.entries(z.__provides));if(_.has(Q))return _.get(Q)}return Z}}}function o(){return`
 // STX Composition API Runtime
 (function() {
   const _provides = new Map();
@@ -64,7 +64,7 @@ import{Aj as M,Ej as E,Fj as P,Gj as O,Hj as I,vj as B,wj as R,xj as H,yj as S,z
     return refs;
   };
 })();
-`}function T(z,W,Q,Z,_){let $=!0,Y=new Set,X=(J)=>Z.get?Z.get(J):J,G=()=>X(z());return Object.defineProperty(G,"_isSignal",{value:!0}),Object.defineProperty(G,"modifiers",{get:W}),G.set=(J)=>{if(!$)return;let N=W(),A=Z.set?Z.set(J,N):J;if(N.trim&&typeof A==="string")A=A.trim();if(N.number&&typeof A==="string"&&A!==""){let K=Number(A);if(!Number.isNaN(K))A=K}if(Object.is(z(),A))return;z.set(A),Q(A)},G.update=(J)=>G.set(J(G())),G.input=(J)=>{if(!W().lazy)G.set(J)},G.change=(J)=>{if(W().lazy)G.set(J)},G.subscribe=(J)=>{if(!$)return()=>{};let N=z.subscribe((A,K)=>J(X(A),X(K)));return Y.add(N),()=>{N(),Y.delete(N)}},Object.defineProperty(G,"value",{get:G,set:G.set}),_(()=>{$=!1,Y.forEach((J)=>J()),Y.clear()}),G}function n(z="modelValue",W={}){let Q=typeof z==="string"?z:"modelValue",Z=typeof z==="string"?W:z,_=j()?.props||{},$=U([`update:${Q}`]),Y=Q==="modelValue"?"modelModifiers":`${Q}Modifiers`,X=(N)=>E(_[N])||P(_[N])?_[N]():_[N],G=B(Z.default),J=H(()=>{let N=X(Q);G.set(N===void 0?Z.default:N)});return M(J),T(G,()=>X(Y)||{},(N)=>$(`update:${Q}`,N),Z,M)}function q(z,W=!0,Q){if(!W||!z||typeof window>"u")return;let Z=window;if(!Z.__STX_DATA__){let $=document.querySelector("script[data-stx-server-data]");try{let Y=JSON.parse($?.textContent||"{}");Z.__STX_DATA__=Y&&typeof Y==="object"&&!Array.isArray(Y)?Y:{}}catch{Z.__STX_DATA__={}}}let _=Z.__STX_DATA__;if(_&&Object.prototype.hasOwnProperty.call(_,z))try{return{data:Q?Q(_[z]):_[z]}}catch($){return{data:null,error:$ instanceof Error?$:Error(String($))}}return}function D(z){if(typeof window>"u")return;let W=window;if(z===void 0)W.__STX_DATA__={};else{if(!W.__STX_DATA__)try{let Q=JSON.parse(document.querySelector("script[data-stx-server-data]")?.textContent||"{}");W.__STX_DATA__=Q&&typeof Q==="object"&&!Array.isArray(Q)?Q:{}}catch{W.__STX_DATA__={}}if(W.__STX_DATA__)delete W.__STX_DATA__[z]}}function C(){let z=b(x());try{let Q=new Bun.Transpiler({loader:"js",minifyWhitespace:!0}).transformSync(z);return Q=Q.replace(/\}(var |let |const |function )/g,"};$1"),Q}catch{return z}}function b(z){let W=[],Q=0,Z="console.log(";while(Q<z.length){let _=z.indexOf(Z,Q);if(_===-1){W.push(z.slice(Q));break}W.push(z.slice(Q,_));let $=1,Y=_+Z.length;while(Y<z.length&&$>0){let X=z[Y];if(X==='"'||X==="'"||X==="`"){let G=X;Y++;while(Y<z.length&&z[Y]!==G){if(z[Y]==="\\")Y++;Y++}Y++;continue}if(X==="(")$++;else if(X===")")$--;Y++}W.push("0"),Q=Y}return W.join("")}function x(){return`
+`}function E(z,W,Q,Z,_){let $=!0,Y=new Set,A=(J)=>Z.get?Z.get(J):J,G=()=>A(z());return Object.defineProperty(G,"_isSignal",{value:!0}),Object.defineProperty(G,"modifiers",{get:W}),G.set=(J)=>{if(!$)return;let X=W(),N=Z.set?Z.set(J,X):J;if(X.trim&&typeof N==="string")N=N.trim();if(X.number&&typeof N==="string"&&N!==""){let K=Number(N);if(!Number.isNaN(K))N=K}if(Object.is(z(),N))return;z.set(N),Q(N)},G.update=(J)=>G.set(J(G())),G.input=(J)=>{if(!W().lazy)G.set(J)},G.change=(J)=>{if(W().lazy)G.set(J)},G.subscribe=(J)=>{if(!$)return()=>{};let X=z.subscribe((N,K)=>J(A(N),A(K)));return Y.add(X),()=>{X(),Y.delete(X)}},Object.defineProperty(G,"value",{get:G,set:G.set}),_(()=>{$=!1,Y.forEach((J)=>J()),Y.clear()}),G}function r(z="modelValue",W={}){let Q=typeof z==="string"?z:"modelValue",Z=typeof z==="string"?W:z,_=j()?.props||{},$=U([`update:${Q}`]),Y=Q==="modelValue"?"modelModifiers":`${Q}Modifiers`,A=(X)=>P(_[X])||T(_[X])?_[X]():_[X],G=B(Z.default),J=H(()=>{let X=A(Q);G.set(X===void 0?Z.default:X)});return M(J),E(G,()=>A(Y)||{},(X)=>$(`update:${Q}`,X),Z,M)}function q(z,W=!0,Q){if(!W||!z||typeof window>"u")return;let Z=window;if(!Z.__STX_DATA__){let $=document.querySelector("script[data-stx-server-data]");try{let Y=JSON.parse($?.textContent||"{}");Z.__STX_DATA__=Y&&typeof Y==="object"&&!Array.isArray(Y)?Y:{}}catch{Z.__STX_DATA__={}}}let _=Z.__STX_DATA__;if(_&&Object.prototype.hasOwnProperty.call(_,z))try{return{data:Q?Q(_[z]):_[z]}}catch($){return{data:null,error:$ instanceof Error?$:Error(String($))}}return}function D(z){if(typeof window>"u")return;let W=window;if(z===void 0)W.__STX_DATA__={};else{if(!W.__STX_DATA__)try{let Q=JSON.parse(document.querySelector("script[data-stx-server-data]")?.textContent||"{}");W.__STX_DATA__=Q&&typeof Q==="object"&&!Array.isArray(Q)?Q:{}}catch{W.__STX_DATA__={}}if(W.__STX_DATA__)delete W.__STX_DATA__[z]}}function f(){let z=k(b());try{let Q=new Bun.Transpiler({loader:"js",minifyWhitespace:!0}).transformSync(z);return Q=Q.replace(/\}(var |let |const |function )/g,"};$1"),Q}catch{return z}}function k(z){let W=[],Q=0,Z="console.log(";while(Q<z.length){let _=z.indexOf(Z,Q);if(_===-1){W.push(z.slice(Q));break}W.push(z.slice(Q,_));let $=1,Y=_+Z.length;while(Y<z.length&&$>0){let A=z[Y];if(A==='"'||A==="'"||A==="`"){let G=A;Y++;while(Y<z.length&&z[Y]!==G){if(z[Y]==="\\")Y++;Y++}Y++;continue}if(A==="(")$++;else if(A===")")$--;Y++}W.push("0"),Q=Y}return W.join("")}function b(){return`
 // STX Signals Runtime (Development Build)
 console.log('[stx] signals runtime loading');
 // Pre-initialization shim: capture onMount/onDestroy calls made before the runtime IIFE runs
@@ -77,6 +77,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;
@@ -2585,7 +2661,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) {
@@ -2831,7 +2941,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 = ${R()};
 
     // 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
@@ -2866,7 +2976,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 = ${S()};
     var KEY_MAP = {enter:'Enter', tab:'Tab', escape:'Escape', space:' ', up:'ArrowUp', down:'ArrowDown', left:'ArrowLeft', right:'ArrowRight', 'delete':'Delete', backspace:'Backspace'};
 
     // Handle attributes
@@ -2955,7 +3065,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, '');
@@ -2966,7 +3076,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);
@@ -2981,7 +3091,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);
       }
@@ -2997,14 +3107,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;
         }
@@ -3055,7 +3165,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.
@@ -3178,7 +3288,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; }
@@ -3256,8 +3366,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)
@@ -3267,7 +3375,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,
@@ -3292,16 +3400,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();
         }
       });
@@ -3378,7 +3485,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);
@@ -3395,7 +3502,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));
       });
     }
@@ -3421,7 +3528,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
@@ -3459,7 +3566,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);
@@ -3867,7 +3974,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')) {
@@ -3889,8 +3996,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;
         }
@@ -3913,16 +4020,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;
       }
@@ -3932,13 +4039,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');
@@ -3949,7 +4056,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');
@@ -4002,12 +4109,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);
       });
     };
 
@@ -4070,15 +4177,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;
       }
     };
@@ -4088,8 +4195,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); });
       }
@@ -4100,7 +4207,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;
       }
     };
@@ -4122,9 +4229,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.
@@ -4132,13 +4239,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);
@@ -4264,7 +4371,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();
@@ -4358,7 +4465,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);
@@ -4378,7 +4485,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) {
@@ -4422,13 +4529,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 {
@@ -4518,8 +4625,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
@@ -4548,10 +4655,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;
     });
 
@@ -4615,7 +4722,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; }),
@@ -4643,21 +4750,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).
@@ -4675,10 +4781,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);
           });
         }
       }
@@ -4692,16 +4798,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) {
@@ -4764,7 +4870,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
@@ -4786,27 +4892,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).
@@ -4896,13 +5002,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
@@ -4928,12 +5034,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;
@@ -4954,7 +5060,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;
@@ -4970,7 +5076,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.
@@ -5911,7 +6017,7 @@ catch (e) {} }
     return normalizedPrefix + '-' + __stxGeneratedIdCounter;
   }
 
-  var createModelSignal = ${T.toString()};
+  var createModelSignal = ${E.toString()};
   function useModel(name, options) {
     if (typeof name !== 'string') { options = name || {}; name = 'modelValue'; }
     options = options || {};
@@ -7856,7 +7962,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)
@@ -8623,5 +8732,5 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
     }
   }
 })();
-`}var Yz={state:B,derived:R,effect:H,batch:S,onMount:F,onDestroy:M,isSignal:E,isDerived:P,untrack:O,peek:I,generateSignalsRuntime:C,generateSignalsRuntimeDev:x};
-export{f as _i,k as $i,v as aj,U as bj,g as cj,m as dj,y as ej,h as fj,p as gj,u as hj,l as ij,d as jj,i as kj,n as lj,D as mj,C as nj,x as oj,Yz as pj};
+`}var _z={state:B,derived:F,effect:H,batch:O,onMount:I,onDestroy:M,isSignal:P,isDerived:T,untrack:x,peek:C,generateSignalsRuntime:f,generateSignalsRuntimeDev:b};
+export{g as _i,v as $i,m as aj,U as bj,y as cj,h as dj,p as ej,u as fj,l as gj,d as hj,i as ij,c as jj,o as kj,r as lj,D as mj,f as nj,b as oj,_z as pj};