@stacksjs/stx 0.2.112 → 0.2.114

package/dist/signals.js

@@ -264,18 +264,19 @@ else {
   // expressions like store.someSignal (no parens) and store.x === 'y'
   // resolve to the value. Action methods on the store pass through as
   // functions because they don't carry _isSignal/_isDerived markers.
-  function createAutoUnwrapProxy(scope) {
+  function createAutoUnwrapProxy(scope, preserveSignal) {
     return new Proxy(scope, {
       get(target, prop) {
         const val = target[prop];
         // If it's a signal or derived, call it to get the value
         if (val && typeof val === 'function' && (val._isSignal || val._isDerived)) {
+          if (preserveSignal && preserveSignal(prop, val)) return val;
           return val();
         }
         // If it's an stx store, return a recursively-unwrapping wrapper so
         // store.signalProp resolves to the value in template expressions
         if (val && typeof val === 'object' && val._isStxStore) {
-          return createAutoUnwrapProxy(val);
+          return createAutoUnwrapProxy(val, preserveSignal);
         }
         return val;
       },
@@ -700,8 +701,32 @@ finally {
   const mountCallbacks = [];
   const destroyCallbacks = [];
 
-  function onMount(fn) { mountCallbacks.push(fn); }
-  function onDestroy(fn) { destroyCallbacks.push(fn); }
+  function currentLifecycleScope() {
+    var el = window.__STX_CURRENT_ELEMENT__;
+    if (!el || !el.getAttribute || !window.stx || !window.stx._scopes) return null;
+    var scopeId = el.getAttribute('data-stx-scope');
+    return scopeId ? window.stx._scopes[scopeId] || null : null;
+  }
+
+  function onMount(fn) {
+    var scope = currentLifecycleScope();
+    if (scope) {
+      scope.__mountCallbacks = scope.__mountCallbacks || [];
+      scope.__mountCallbacks.push(fn);
+      return;
+    }
+    mountCallbacks.push(fn);
+  }
+
+  function onDestroy(fn) {
+    var scope = currentLifecycleScope();
+    if (scope) {
+      scope.__destroyCallbacks = scope.__destroyCallbacks || [];
+      scope.__destroyCallbacks.push(fn);
+      return;
+    }
+    destroyCallbacks.push(fn);
+  }
 
   // Drain any early mount/destroy calls captured by the pre-initialization shim
   if (window.__stx_early_mounts) { window.__stx_early_mounts.forEach(function(fn) { mountCallbacks.push(fn); }); window.__stx_early_mounts = null; }
@@ -959,17 +984,22 @@ else {
 
   // setRouteParams: called by the server-injected script to set initial params
   function setRouteParams(params) {
-    _routeParams.set(params || {});
+    var nextParams = params || {};
+    _routeParams.set(nextParams);
+    window.__stx_rp = nextParams;
+    if (window.stx) window.stx._rp = nextParams;
   }
 
   // Listen for SPA navigation to update params
   window.addEventListener('stx:navigate', function(e) {
-    // Parse params from URL if route patterns are registered
-    // For now, reset params \u2014 the server will inject them on full loads
-    // and the page's script can set them via setRouteParams() on SPA nav
-    if (e.detail && e.detail.params) {
-      _routeParams.set(e.detail.params);
-    }
+    // The destination fragment's data-stx-route-params script runs after this
+    // event and before stx:load. Reset first so a static route can never inherit
+    // params from the dynamic route that preceded it.
+    var nextParams = e.detail
+      && Object.prototype.hasOwnProperty.call(e.detail, 'params')
+      ? e.detail.params
+      : {};
+    setRouteParams(nextParams);
   });
 
   // Apply any server-injected params (set before runtime loaded)
@@ -1252,19 +1282,31 @@ finally {
       }
       // First try component-level scope
       const elementScope = findElementScope(el || currentElement);
-      const baseScope = { ...componentScope, ...(elementScope || {}), ...globalHelpers };
+      const baseScope = { ...globalHelpers, ...componentScope, ...(elementScope || {}) };
 
       // Check for pipe syntax (Feature #2)
       const pipeResult = parsePipeExpression(expr, baseScope);
       if (pipeResult) {
         // Use auto-unwrap proxy for pipe expressions
-        const unwrapScope = enableAutoUnwrap ? createAutoUnwrapProxy(baseScope) : baseScope;
+        const unwrapScope = enableAutoUnwrap
+          ? createAutoUnwrapProxy(baseScope, function(prop) {
+              if (typeof prop !== 'string') return false;
+              return expressionCallsSignal(expr, prop)
+                || expressionUsesSignalApi(expr, prop);
+            })
+          : baseScope;
         const piped = executePipeExpression(pipeResult.valueExpr, pipeResult.pipes, unwrapScope);
         return (piped && typeof piped === 'function' && (piped._isSignal || piped._isDerived)) ? piped() : piped;
       }
 
       // Use auto-unwrap proxy if enabled (Feature #1)
-      const scope = enableAutoUnwrap ? createAutoUnwrapProxy(baseScope) : baseScope;
+      const scope = enableAutoUnwrap
+        ? createAutoUnwrapProxy(baseScope, function(prop) {
+            if (typeof prop !== 'string') return false;
+            return expressionCallsSignal(expr, prop)
+              || expressionUsesSignalApi(expr, prop);
+          })
+        : baseScope;
       const fn = new Function(...Object.keys(baseScope), 'return ' + expr);
       const result = fn(...Object.values(scope));
       // Post-eval unwrap \u2014 see evalAttrExpr note for the reason.
@@ -1364,6 +1406,50 @@ catch (e) {
     return null;
   }
 
+  function expressionUsesSignalApi(expression, name) {
+    var escapedName = name.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');
+    return expressionUsesSignalMethod(expression, name)
+      || expressionUsesSignalValue(expression, name);
+  }
+
+  function expressionUsesSignalMethod(expression, name) {
+    var escapedName = name.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');
+    return new RegExp('(?:^|[^\\\\w$])' + escapedName + '\\\\s*\\\\.\\\\s*(?:set|update|subscribe)\\\\s*\\\\(').test(expression);
+  }
+
+  function expressionUsesSignalValue(expression, name) {
+    var escapedName = name.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');
+    return new RegExp('(?:^|[^\\\\w$])' + escapedName + '\\\\s*\\\\.\\\\s*value\\\\b').test(expression);
+  }
+
+  function expressionCallsSignal(expression, name) {
+    var escapedName = name.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');
+    return new RegExp('(?:^|[^\\\\w$])' + escapedName + '\\\\s*\\\\(').test(expression);
+  }
+
+  function createExpressionAutoUnwrapProxy(scope, expression) {
+    return createAutoUnwrapProxy(scope, function(prop, signal) {
+      if (typeof prop !== 'string') return false;
+      if (expressionCallsSignal(expression, prop) || expressionUsesSignalMethod(expression, prop))
+        return true;
+      if (!expressionUsesSignalValue(expression, prop))
+        return false;
+
+      // A :for item is itself represented by a signal. If that item's value
+      // is an object with a real value field, item.value means the field,
+      // not the signal wrapper API. Primitive signals still support
+      // count.value, matching the explicit ref syntax.
+      try {
+        var currentValue = signal();
+        return !(currentValue && typeof currentValue === 'object'
+          && Object.prototype.hasOwnProperty.call(currentValue, 'value'));
+      }
+      catch (e) {
+        return true;
+      }
+    });
+  }
+
   function executeHandler(expr, event, el) {
     try {
       // Skip placeholder expressions like __TITLE__ (build-time placeholders)
@@ -1372,7 +1458,7 @@ catch (e) {
       }
       // First try component-level scope
       const elementScope = findElementScope(el || currentElement);
-      const scope = { ...componentScope, ...(elementScope || {}), ...globalHelpers };
+      const scope = { ...globalHelpers, ...componentScope, ...(elementScope || {}) };
 
       // Check for shorthand syntax (Feature #8)
       const shorthandFn = parseEventShorthand(expr, scope);
@@ -1534,6 +1620,111 @@ catch (e) {
     processElement(el, scope);
   }
 
+  function isForDirectiveExpression(expr) {
+    return typeof expr === 'string'
+      && /^\\s*\\(?\\s*\\w+(?:\\s*,\\s*\\w+)?\\s*\\)?\\s+(?:in|of)\\s+.+\\s*$/.test(expr);
+  }
+
+  function getModelBinding(el) {
+    if (!el || !el.attributes) return null;
+    var prefixes = ['x-model', ':model', '@model'];
+    var attrs = Array.from(el.attributes);
+    for (var i = 0; i < attrs.length; i++) {
+      var name = attrs[i] && attrs[i].name;
+      if (!name) continue;
+      for (var j = 0; j < prefixes.length; j++) {
+        if (name === prefixes[j] || name.indexOf(prefixes[j] + '.') === 0)
+          return { name: name, expression: attrs[i].value };
+      }
+    }
+    return null;
+  }
+
+  function bindParentComponentProps(el, callerScope) {
+    if (!el || !el.getAttribute || el.__stx_parent_props_bound) return;
+    var names = (el.getAttribute('data-stx-parent-bindings') || '').split(/\\s+/).filter(Boolean);
+    if (!names.length) return;
+    el.__stx_parent_props_bound = true;
+    var scope = { ...globalHelpers, ...callerScope };
+
+    names.forEach(function(name) {
+      var sourceName = ':' + name;
+      if (!el.hasAttribute(sourceName)) return;
+      var expression = el.getAttribute(sourceName);
+      effect(function() {
+        var value;
+        try {
+          // Support both signal styles in forwarded props:
+          //   :open="open" and :open="open()".
+          // Auto-unwrap bare signals, but preserve a signal function when this
+          // expression explicitly calls it or accesses its object API.
+          var unwrapScope = createAutoUnwrapProxy(scope, function(prop) {
+            if (typeof prop !== 'string') return false;
+            return expressionCallsSignal(expression, prop)
+              || expressionUsesSignalApi(expression, prop);
+          });
+          var fn = new Function('__scope__', 'with(__scope__) { return (' + expression + ') }');
+          value = fn(unwrapScope);
+          if (value && typeof value === 'function' && (value._isSignal || value._isDerived)) value = value();
+        }
+        catch (e) {
+          if (!(e instanceof ReferenceError) && !(e instanceof TypeError))
+            console.warn('[STX] Parent component prop error:', expression, e);
+          value = undefined;
+        }
+
+        if (value === false || value === null || value === undefined) {
+          el.removeAttribute(name);
+        }
+        else if (value === true) {
+          el.setAttribute(name, '');
+        }
+        else {
+          var serialized = value;
+          if (typeof value === 'object') {
+            try { serialized = JSON.stringify(value); }
+            catch (e) { serialized = String(value); }
+          }
+          el.setAttribute(name, serialized);
+        }
+      });
+      el.removeAttribute(sourceName);
+    });
+  }
+
+  function resolveComponentCallerScope(el, pageScope) {
+    var resolved = { ...pageScope };
+    var ancestors = [];
+    var current = el && (el.parentElement || el.parentNode);
+    while (current && current !== document) {
+      if (current.getAttribute && current.hasAttribute('data-stx-scope'))
+        ancestors.push(current.getAttribute('data-stx-scope'));
+      current = current.parentElement || current.parentNode;
+    }
+    ancestors.reverse().forEach(function(scopeId) {
+      var ancestorScope = window.stx._scopes && window.stx._scopes[scopeId];
+      if (ancestorScope) Object.assign(resolved, ancestorScope);
+    });
+    return resolved;
+  }
+
+  // A false :if detaches its subtree before the DOMContentLoaded scope walk
+  // reaches nested components. Capture and bind their caller-owned props while
+  // the ancestor chain is still connected, otherwise resolveComponentCallerScope
+  // can no longer see the component that declared expressions such as
+  // :options="environmentOptions".
+  function preserveConditionalComponentScopes(root, callerScope) {
+    if (!root || !root.querySelectorAll) return;
+    var scopeEls = [];
+    if (root.matches && root.matches('[data-stx-scope]')) scopeEls.push(root);
+    root.querySelectorAll('[data-stx-scope]').forEach(function(scopeEl) { scopeEls.push(scopeEl); });
+    scopeEls.forEach(function(scopeEl) {
+      if (scopeEl.__stx_parent_props_bound) return;
+      scopeEl.__stx_parent_scope = resolveComponentCallerScope(scopeEl, callerScope);
+      bindParentComponentProps(scopeEl, scopeEl.__stx_parent_scope);
+    });
+  }
+
   function processElement(el, scope = componentScope) {
     // Debug: log every element with x-class or @click
     if (el.nodeType === Node.ELEMENT_NODE && el.hasAttribute) {
@@ -1566,7 +1757,7 @@ catch (e) {
       if (el.hasAttribute('data-stx-memo')) {
         var memoExpr = el.getAttribute('data-stx-memo');
         try {
-          var memoScope = { ...scope, ...(findElementScope(el) || {}), ...globalHelpers };
+          var memoScope = { ...globalHelpers, ...scope, ...(findElementScope(el) || {}) };
           var memoFn = new Function(...Object.keys(memoScope), 'return ' + memoExpr);
           var memoVals = JSON.stringify(memoFn(...Object.values(memoScope)));
           if (el.__stx_memo_prev === memoVals) {
@@ -1586,7 +1777,7 @@ catch (e) {
           // Capture scope NOW before effects run asynchronously
           // Use the passed scope parameter (not global componentScope) to preserve context
           // through nested @if/@for processing where componentScope may be restored
-          const capturedScope = { ...scope, ...(findElementScope(parentEl) || {}), ...globalHelpers };
+          const capturedScope = { ...globalHelpers, ...scope, ...(findElementScope(parentEl) || {}) };
           parts.forEach(part => {
             const match = part.match(/^\\{\\{\\s*([\\s\\S]+?)\\s*\\}\\}$/);
             if (match) {
@@ -1596,22 +1787,29 @@ catch (e) {
                 fragment.appendChild(document.createTextNode(part));
                 return;
               }
-              const span = document.createElement('span');
-              fragment.appendChild(span);
+              // Native text-only elements cannot contain the span wrapper used
+              // for general interpolation. Bind a text node there so options,
+              // titles, and textareas retain valid DOM and accessible labels.
+              const isTextOnlyParent = parentEl
+                && (parentEl.tagName === 'OPTION' || parentEl.tagName === 'TITLE' || parentEl.tagName === 'TEXTAREA');
+              const bindingNode = isTextOnlyParent
+                ? document.createTextNode('')
+                : document.createElement('span');
+              fragment.appendChild(bindingNode);
               // Use captured scope, not dynamic lookup
               effect(() => {
                 try {
                   // Check for pipe syntax (Feature #2)
                   const pipeResult = parsePipeExpression(expr, capturedScope);
                   if (pipeResult) {
-                    const unwrapScope = createAutoUnwrapProxy(capturedScope);
-                    span.textContent = executePipeExpression(pipeResult.valueExpr, pipeResult.pipes, unwrapScope);
+                    const unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
+                    bindingNode.textContent = executePipeExpression(pipeResult.valueExpr, pipeResult.pipes, unwrapScope);
                   }
 else {
                     // Use auto-unwrap proxy (Feature #1)
-                    const unwrapScope = createAutoUnwrapProxy(capturedScope);
+                    const unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
                     const fn = new Function(...Object.keys(capturedScope), 'return ' + expr);
-                    span.textContent = fn(...Object.values(unwrapScope));
+                    bindingNode.textContent = fn(...Object.values(unwrapScope));
                   }
                 }
 catch (e) {
@@ -1620,11 +1818,11 @@ catch (e) {
                   // Retry without auto-unwrap so signal functions remain callable.
                   try {
                     const fn = new Function(...Object.keys(capturedScope), 'return ' + expr);
-                    span.textContent = fn(...Object.values(capturedScope));
+                    bindingNode.textContent = fn(...Object.values(capturedScope));
                   }
 catch (e2) {
                     if (!(e2 instanceof ReferenceError) && !(e2 instanceof TypeError)) console.warn('[STX] Expression error:', expr, e2);
-                    span.textContent = '';
+                    bindingNode.textContent = '';
                   }
                 }
               });
@@ -1652,8 +1850,9 @@ else if (part) {
     }
 
     // Handle @for / :for / x-for first (reactive list)
-    if (el.hasAttribute('@for') || el.hasAttribute(':for') || el.hasAttribute('x-for')) {
-      var forAttr = el.hasAttribute(':for') ? ':for' : el.hasAttribute('x-for') ? 'x-for' : '@for';
+    var hasColonForLoop = el.hasAttribute(':for') && isForDirectiveExpression(el.getAttribute(':for'));
+    if (el.hasAttribute('@for') || hasColonForLoop || el.hasAttribute('x-for')) {
+      var forAttr = hasColonForLoop ? ':for' : el.hasAttribute('x-for') ? 'x-for' : '@for';
       bindFor(el, scope, forAttr);
       return;
     }
@@ -1697,14 +1896,14 @@ else if (part) {
     }
 
     // Handle @model / :model / x-model (two-way binding)
-    if (el.hasAttribute('@model') || el.hasAttribute(':model') || el.hasAttribute('x-model')) {
-      var modelAttr = el.hasAttribute(':model') ? ':model' : el.hasAttribute('x-model') ? 'x-model' : '@model';
-      bindModel(el, el.getAttribute(modelAttr), scope, modelAttr);
+    var modelBinding = getModelBinding(el);
+    if (modelBinding) {
+      bindModel(el, modelBinding.expression, scope, modelBinding.name);
     }
 
     // Capture scope once for all attribute bindings on this element
     // Use the passed scope parameter to preserve context through nested processing
-    const attrCapturedScope = { ...scope, ...(findElementScope(el) || {}), ...globalHelpers };
+    const attrCapturedScope = { ...globalHelpers, ...scope, ...(findElementScope(el) || {}) };
 
     // Post-eval unwrap: if the expression result is a signal function (e.g.
     // step was resolved via identifier lookup, not via the auto-unwrap
@@ -1717,7 +1916,8 @@ else if (part) {
       if (v && typeof v === 'function' && (v._isSignal || v._isDerived)) return v();
       return v;
     };
-    const evalAttrExpr = (rawExpr) => {
+    const evalAttrExpr = (rawExpr, evaluationScope) => {
+      const activeScope = evaluationScope || attrCapturedScope;
       // Decode HTML entities that browsers may encode in attribute values
       // e.g. :text="a > b" may be stored as :text="a &gt; b" in HTML
       var expr = rawExpr.replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&quot;/g,'"').replace(/&#39;/g,"'").replace(/&#x27;/g,"'");
@@ -1725,23 +1925,23 @@ else if (part) {
         if (/^__[A-Z_]+__$/.test(expr.trim())) return expr;
 
         // Check for pipe syntax (Feature #2)
-        const pipeResult = parsePipeExpression(expr, attrCapturedScope);
+        const pipeResult = parsePipeExpression(expr, activeScope);
         if (pipeResult) {
-          const unwrapScope = createAutoUnwrapProxy(attrCapturedScope);
+          const unwrapScope = createExpressionAutoUnwrapProxy(activeScope, expr);
           return maybeUnwrapSignal(executePipeExpression(pipeResult.valueExpr, pipeResult.pipes, unwrapScope));
         }
 
         // Use auto-unwrap proxy (Feature #1)
-        const unwrapScope = createAutoUnwrapProxy(attrCapturedScope);
-        const fn = new Function(...Object.keys(attrCapturedScope), 'return ' + expr);
-        return maybeUnwrapSignal(fn(...Object.values(unwrapScope)));
+        const unwrapScope = createExpressionAutoUnwrapProxy(activeScope, expr);
+        const fn = new Function('__scope__', 'with(__scope__) { return (' + expr + ') }');
+        return maybeUnwrapSignal(fn(unwrapScope));
       }
 catch (e) {
         // Auto-unwrap can break explicit signal calls like errorData().message
         // Retry without auto-unwrap so signal functions remain callable
         try {
-          const fn = new Function(...Object.keys(attrCapturedScope), 'return ' + expr);
-          return maybeUnwrapSignal(fn(...Object.values(attrCapturedScope)));
+          const fn = new Function('__scope__', 'with(__scope__) { return (' + expr + ') }');
+          return maybeUnwrapSignal(fn(activeScope));
         }
 catch (e2) {
           if (!(e2 instanceof ReferenceError) && !(e2 instanceof TypeError)) console.warn('[STX] Attribute expression error:', expr, e2);
@@ -1751,7 +1951,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, 'for':1, ref:1};
+    var DIRECTIVE_NAMES = {class:1, style:1, text:1, html:1, show:1, model:1, 'if':1, ref:1};
     // SVG attributes are case-sensitive, but the HTML parser lowercases
     // prefixed attribute names \u2014 ':viewBox' arrives as ':viewbox' because
     // the spec's "adjust SVG attributes" step only covers unprefixed names.
@@ -1785,8 +1985,27 @@ catch (e2) {
           || (name.startsWith('x-') && !X_HANDLED[name.split('.')[0]] && !X_HANDLED[name])) {
         let attrName = name.startsWith('@bind:') ? name.slice(6) : name.startsWith('x-bind:') ? name.slice(7) : name.startsWith('x-') ? name.slice(2) : name.slice(1);
         if (el.namespaceURI === SVG_NS && SVG_ATTR_CASE[attrName]) attrName = SVG_ATTR_CASE[attrName];
+        var parentBindingNames = (el.getAttribute && el.getAttribute('data-stx-parent-bindings') || '').split(/\\s+/);
+        var bindingScope = el.__stx_parent_scope && parentBindingNames.includes(attrName)
+          ? el.__stx_parent_scope
+          : attrCapturedScope;
         effect(() => {
-          const v = evalAttrExpr(value);
+          const v = evalAttrExpr(value, bindingScope);
+          // Form control values are live DOM properties. Setting only the HTML
+          // attribute does not update a <select>'s chosen option and can leave
+          // inputs displaying stale text after a reactive update.
+          if (attrName === 'value' && 'value' in el) {
+            var controlValue = v;
+            if (typeof v === 'object' && v !== null) {
+              try { controlValue = JSON.stringify(v); }
+              catch (e) { controlValue = String(v); }
+            }
+            controlValue = v === false || v === null || v === undefined ? '' : String(controlValue);
+            el.value = controlValue;
+            if (controlValue === '' && el.tagName !== 'OPTION') el.removeAttribute(attrName);
+            else el.setAttribute(attrName, controlValue);
+            return;
+          }
           if (v === false || v === null || v === undefined) {
             el.removeAttribute(attrName);
           }
@@ -1794,7 +2013,12 @@ else if (v === true) {
             el.setAttribute(attrName, '');
           }
 else {
-            el.setAttribute(attrName, v);
+            var attrValue = v;
+            if (typeof v === 'object') {
+              try { attrValue = JSON.stringify(v); }
+              catch (e) { attrValue = String(v); }
+            }
+            el.setAttribute(attrName, attrValue);
           }
         });
         el.removeAttribute(name);
@@ -1827,7 +2051,7 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
         if (scope.$refs) scope.$refs[value] = el;
         if (componentScope.$refs) componentScope.$refs[value] = el;
       }
-else if (name.startsWith('@') || name.startsWith(':')) {
+      else if (name.startsWith('@') || name.startsWith(':')) {
         // Event handlers: @click, :click, @submit.prevent, :keydown.enter, etc.
         const parts = name.slice(1).split('.');
         const eventName = parts[0];
@@ -1844,11 +2068,28 @@ else if (name.startsWith('@') || name.startsWith(':')) {
         el[eventKey] = true;
 
         // Capture scope at setup time so @for loop variables are available when event fires
-        const eventCapturedScope = { ...scope, ...(findElementScope(el) || {}), ...globalHelpers };
+        const parentEventNames = (el.getAttribute && el.getAttribute('data-stx-parent-events') || '').split(/\\s+/);
+        const isForwardedComponentEvent = !!(el.__stx_parent_scope && parentEventNames.includes(eventName));
+        const eventCapturedScope = isForwardedComponentEvent
+          ? { ...globalHelpers, ...el.__stx_parent_scope }
+          : { ...globalHelpers, ...scope, ...(findElementScope(el) || {}) };
 
         console.log('[stx] binding event:', eventName, 'on', el.tagName, 'expr:', value.substring(0, 40));
         el.addEventListener(eventName, (event) => {
           console.log('[stx] event fired:', eventName, 'on', el.tagName);
+          // A component listener belongs to the component root. Ignore native
+          // events bubbling out of its internal markup, otherwise a form
+          // component with @submit fires the parent once for the native form
+          // submit and again for defineEmits('submit').
+          if (isForwardedComponentEvent && event.target !== el) return;
+
+          // Vue-style component handlers receive the emitted payload directly.
+          // Native root events still receive the Event object so server-only
+          // components can forward clicks and other browser events.
+          var handlerEvent = isForwardedComponentEvent && event instanceof CustomEvent
+            ? event.detail
+            : event;
+
           // Skip clicks on elements that just became visible in this frame.
           // Prevents modal backdrop from catching the click that opened the modal.
           if (eventName === 'click') {
@@ -1876,7 +2117,7 @@ else if (name.startsWith('@') || name.startsWith(':')) {
           try {
             if (!value || /^__[A-Z_]+__$/.test(value.trim())) return;
             var shorthandFn = parseEventShorthand(value, eventCapturedScope);
-            if (shorthandFn) { shorthandFn(event); return; }
+            if (shorthandFn) { shorthandFn(handlerEvent); return; }
             // Check if any scope values are signals (x-data pattern)
             var hasSignals = Object.values(eventCapturedScope).some(function(v) {
               return v && typeof v === 'function' && v._isSignal;
@@ -1898,23 +2139,23 @@ else if (name.startsWith('@') || name.startsWith(':')) {
               }).join(';');
               var body = getVars + ';' + value + ';' + setVars;
               var fn2 = new Function('__s', '$event', body);
-              fn2(eventCapturedScope, event);
+              fn2(eventCapturedScope, handlerEvent);
             } else if (hasSignals) {
-              // Function call with signals in scope \u2014 keep signals that have .set()
-              // called on them as raw signal functions, unwrap the rest for reading
+              // Function calls with signals in scope keep any signal used through
+              // its object API as a raw signal function, and unwrap the rest for
+              // primitive reads.
               var unwrapVars = Object.keys(eventCapturedScope).map(function(k) {
                 var v = eventCapturedScope[k];
-                // If this signal is used with .set() in the expression, keep it as-is
-                if (v && typeof v === 'function' && v._isSignal && value.includes(k + '.set(')) {
+                if (v && typeof v === 'function' && v._isSignal && expressionUsesSignalApi(value, k)) {
                   return 'var ' + k + ' = __s["' + k + '"]';
                 }
                 return 'var ' + k + ' = __s["' + k + '"] && typeof __s["' + k + '"] === "function" && __s["' + k + '"]._isSignal ? __s["' + k + '"]() : __s["' + k + '"]';
               }).join(';');
               var fn3 = new Function('__s', '$event', unwrapVars + ';' + value);
-              fn3(eventCapturedScope, event);
+              fn3(eventCapturedScope, handlerEvent);
             } else {
               var fn = new Function(...Object.keys(eventCapturedScope), '$event', value);
-              fn(...Object.values(eventCapturedScope), event);
+              fn(...Object.values(eventCapturedScope), handlerEvent);
             }
           }
 catch (e) {
@@ -2015,7 +2256,7 @@ catch (e) {
 
     const currentDisplay = el.style.display;
     const originalDisplay = (currentDisplay && currentDisplay !== 'none') ? currentDisplay : '';
-    const capturedScope = { ...passedScope, ...(findElementScope(el) || {}), ...globalHelpers };
+    const capturedScope = { ...globalHelpers, ...passedScope, ...(findElementScope(el) || {}) };
 
     // Check if the expression is a simple signal reference (most common case for :show)
     const directSignal = capturedScope[expr];
@@ -2035,7 +2276,7 @@ catch (e) {
       effect(() => {
         var value;
         try {
-          var unwrapScope = createAutoUnwrapProxy(capturedScope);
+          var unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
           var fn = new Function(...Object.keys(capturedScope), 'return ' + expr);
           value = fn(...Object.values(unwrapScope));
         } catch (e1) {
@@ -2071,20 +2312,40 @@ catch (e) {
     el.__stx_model_bound = true;
     const tag = el.tagName.toLowerCase();
     const type = el.type;
+    const modifiers = attrName.split('.').slice(1);
+    const capturedScope = { ...globalHelpers, ...passedScope, ...(findElementScope(el) || {}) };
+    const coerceValue = (value) => {
+      var next = value;
+      if (modifiers.includes('trim') && typeof next === 'string') next = next.trim();
+      if (modifiers.includes('number') && next !== '') {
+        var numeric = Number(next);
+        if (!Number.isNaN(numeric)) next = numeric;
+      }
+      return next;
+    };
 
-    const getValue = () => toValue(expr, el);
+    const getValue = () => {
+      var direct = capturedScope[expr];
+      if (direct && typeof direct === 'function' && (direct._isSignal || direct._isDerived))
+        return direct();
+      try {
+        var unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
+        var fn = new Function('__scope__', 'with(__scope__) { return (' + expr + ') }');
+        return fn(unwrapScope);
+      }
+      catch (e) {
+        if (!(e instanceof ReferenceError) && !(e instanceof TypeError)) console.warn('[STX] ' + attrName + ' get error:', expr, e);
+        return '';
+      }
+    };
     const setValue = (val) => {
       try {
-        // Check component scope first, then element scope - use passed scope
-        const elementScope = findElementScope(el);
-        const scope = { ...passedScope, ...(elementScope || {}) };
-
-        if (scope[expr] && scope[expr]._isSignal) {
-          scope[expr].set(val);
+        if (capturedScope[expr] && capturedScope[expr]._isSignal) {
+          capturedScope[expr].set(val);
         }
 else {
-          const fn = new Function(...Object.keys(scope), 'v', expr + ' = v');
-          fn(...Object.values(scope), val);
+          const fn = new Function(...Object.keys(capturedScope), 'v', expr + ' = v');
+          fn(...Object.values(capturedScope), val);
         }
       }
 catch (e) {
@@ -2096,13 +2357,13 @@ catch (e) {
       effect(() => { el.checked = getValue(); });
       el.addEventListener('change', () => setValue(el.checked));
     }
-else if (tag === 'select') {
+    else if (tag === 'select') {
       effect(() => { el.value = getValue(); });
-      el.addEventListener('change', () => setValue(el.value));
+      el.addEventListener('change', () => setValue(coerceValue(el.value)));
     }
 else {
       effect(() => { el.value = getValue() ?? ''; });
-      el.addEventListener('input', () => setValue(el.value));
+      el.addEventListener(modifiers.includes('lazy') ? 'change' : 'input', () => setValue(coerceValue(el.value)));
     }
 
     el.removeAttribute(attrName);
@@ -2110,7 +2371,7 @@ else {
 
   function bindClass(el, expr, passedScope = componentScope) {
     const originalClasses = el.className;
-    const capturedScope = { ...passedScope, ...(findElementScope(el) || {}), ...globalHelpers };
+    const capturedScope = { ...globalHelpers, ...passedScope, ...(findElementScope(el) || {}) };
     const keys = Object.keys(capturedScope);
 
     // Pre-compile \u2014 filter out keys that aren't valid JS identifiers
@@ -2140,7 +2401,7 @@ else {
         // First pass: auto-unwrap proxy \u2014 handles expressions that read
         // signals as primitives (e.g. { 'active': count > 5 } where count
         // is a signal).
-        const unwrapScope = createAutoUnwrapProxy(capturedScope);
+        const unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
         value = fn.apply(null, safeKeys.map(k => unwrapScope[k]));
       } catch (e1) {
         // Retry with raw scope \u2014 handles call-expressions like activeTab()
@@ -2163,11 +2424,11 @@ else {
         });
       }
 else if (Array.isArray(value)) {
-        var _clsArr = originalClasses + ' ' + value.filter(Boolean).join(' ');
+        var _clsArr = [originalClasses, value.filter(Boolean).join(' ')].filter(Boolean).join(' ');
         if (typeof el.className === 'string') el.className = _clsArr; else el.setAttribute('class', _clsArr);
       }
 else {
-        var _clsStr = originalClasses + (value ? ' ' + value : '');
+        var _clsStr = [originalClasses, value || ''].filter(Boolean).join(' ');
         if (typeof el.className === 'string') el.className = _clsStr; else el.setAttribute('class', _clsStr);
       }
     });
@@ -2175,7 +2436,7 @@ else {
 
   function bindStyle(el, expr, passedScope = componentScope) {
     // Capture scope at setup time - use passed scope to preserve context
-    const capturedScope = { ...passedScope, ...(findElementScope(el) || {}), ...globalHelpers };
+    const capturedScope = { ...globalHelpers, ...passedScope, ...(findElementScope(el) || {}) };
 
     const evalExpr = () => {
       // Mirror bindClass: first try the auto-unwrap proxy (so an expression
@@ -2185,7 +2446,7 @@ else {
       // values, which would make theme() try to call a primitive and
       // throw TypeError.
       try {
-        const unwrapScope = createAutoUnwrapProxy(capturedScope);
+        const unwrapScope = createExpressionAutoUnwrapProxy(capturedScope, expr);
         const fn = new Function(...Object.keys(capturedScope), 'return ' + expr);
         return fn(...Object.values(unwrapScope));
       }
@@ -2409,8 +2670,12 @@ else {
           return expression;
         }
         // Use passedScope instead of componentScope to preserve context through nested processing
-        const scope = { ...passedScope, ...(capturedScope || {}), ...globalHelpers, ...extraScope };
-        const unwrapScope = createAutoUnwrapProxy(scope);
+        const scope = { ...globalHelpers, ...passedScope, ...(capturedScope || {}), ...extraScope };
+        const unwrapScope = createAutoUnwrapProxy(scope, function(prop) {
+          if (typeof prop !== 'string') return false;
+          return expressionCallsSignal(expression, prop)
+            || expressionUsesSignalApi(expression, prop);
+        });
         const fn = new Function(...Object.keys(scope), 'return ' + expression);
         return fn(...Object.values(unwrapScope));
       }
@@ -2426,8 +2691,12 @@ catch (e) {
     const evalLazy = (expression, extraScope = {}) => {
       try {
         if (/^__[A-Z_]+__$/.test(expression.trim())) return expression;
-        const scope = { ...passedScope, ...(capturedScope || {}), ...globalHelpers, ...extraScope };
-        const unwrapScope = createAutoUnwrapProxy(scope);
+        const scope = { ...globalHelpers, ...passedScope, ...(capturedScope || {}), ...extraScope };
+        const unwrapScope = createAutoUnwrapProxy(scope, function(prop) {
+          if (typeof prop !== 'string') return false;
+          return expressionCallsSignal(expression, prop)
+            || expressionUsesSignalApi(expression, prop);
+        });
         // new Function body is non-strict, so with() works \u2014 only accessed
         // properties trigger the proxy's get trap and register as dependencies
         const fn = new Function('__scope__', 'with(__scope__) { return ' + expression + ' }');
@@ -2487,7 +2756,7 @@ catch (e) {
       const indexSignal = state(index);
       if (key) itemSignalMap.set(key, { item: itemSignal, index: indexSignal });
 
-      const itemScope = { ...passedScope, ...(capturedScope || {}), ...globalHelpers };
+      const itemScope = { ...globalHelpers, ...passedScope, ...(capturedScope || {}) };
       itemScope[itemName] = itemSignal;
       if (indexName) itemScope[indexName] = indexSignal;
 
@@ -2496,17 +2765,15 @@ catch (e) {
         Array.from(templateContent.childNodes).forEach(node => {
           const clone = node.cloneNode(true);
           if (clone.nodeType === 1) {
-            processElement(clone, itemScope);
-            clone.removeAttribute('x-cloak');
-            clone.querySelectorAll('[x-cloak]').forEach(c => c.removeAttribute('x-cloak'));
+            // Structural directives need a live parent. Keep the iteration
+            // scope on the clone until the keyed diff inserts it, then bind.
+            clone.__stx_for_scope = itemScope;
           }
           elements.push(clone);
         });
       } else {
         const clone = templateContent.cloneNode(true);
-        processElement(clone, itemScope);
-        clone.removeAttribute('x-cloak');
-        clone.querySelectorAll('[x-cloak]').forEach(c => c.removeAttribute('x-cloak'));
+        clone.__stx_for_scope = itemScope;
         elements.push(clone);
       }
       return elements;
@@ -2606,7 +2873,7 @@ catch (e) {
         // rare, so the extra Object.keys / spread cost is negligible.
         var diagScope;
         try {
-          var diagMerged = { ...passedScope, ...(capturedScope || {}), ...globalHelpers };
+          var diagMerged = { ...globalHelpers, ...passedScope, ...(capturedScope || {}) };
           var firstIdent = listExpr.match(/^[A-Za-z_$][\\w$]*/);
           var rootName = firstIdent ? firstIdent[0] : '?';
           var rootInScope = Object.prototype.hasOwnProperty.call(diagMerged, rootName);
@@ -2676,8 +2943,13 @@ catch (e) {
         if (existing && existing.length > 0 && !usedKeys.has(key)) {
           // Reuse this item's nodes \u2014 move the whole group into position, in
           // order, so a multi-node row stays contiguous and correctly ordered.
+          // A structural directive may intentionally have detached one of the
+          // group's nodes. Its own placeholder owns reinsertion, so keyed reuse
+          // must not resurrect that hidden node.
           const group = existing.shift();
-          group.forEach(el => parent.insertBefore(el, placeholder));
+          group.forEach(el => {
+            if (el.parentNode === parent) parent.insertBefore(el, placeholder);
+          });
           newElements.push(...group);
           newGroups.push(group);
           usedKeys.add(key);
@@ -2692,7 +2964,17 @@ catch (e) {
         } else {
           // New item \u2014 create DOM elements with a fresh item signal
           const elements = createItemElements(list[i], i, key);
-          elements.forEach(el => { parent.insertBefore(el, placeholder); if (tgReady) tgEnter(el, tgName); });
+          elements.forEach(el => {
+            parent.insertBefore(el, placeholder);
+            if (el.nodeType === 1) {
+              var itemScope = el.__stx_for_scope || passedScope;
+              delete el.__stx_for_scope;
+              processElement(el, itemScope);
+              el.removeAttribute('x-cloak');
+              el.querySelectorAll('[x-cloak]').forEach(c => c.removeAttribute('x-cloak'));
+            }
+            if (tgReady && el.isConnected) tgEnter(el, tgName);
+          });
           newElements.push(...elements);
           newGroups.push(elements);
         }
@@ -2785,6 +3067,7 @@ catch (e) {
     // branches instead of bringing their content to life. The active branch
     // is re-inserted below and IS connected, so it processes normally.
     chain.forEach(function(b) {
+      preserveConditionalComponentScopes(b.el, capturedComponentScope);
       b.el.__stx_if_bound = true;
       b.el.__stx_chain_member = true;
       b.capturedElementScope = findElementScope(b.el);
@@ -2823,9 +3106,9 @@ catch (e) {
     function evalBranch(b) {
       var expression = b.expr;
       if (/^__[A-Z_]+__$/.test(expression.trim())) return expression;
-      var scope = { ...capturedComponentScope, ...(b.capturedElementScope || {}), ...globalHelpers };
+      var scope = { ...globalHelpers, ...capturedComponentScope, ...(b.capturedElementScope || {}) };
       try {
-        var unwrapScope = createAutoUnwrapProxy(scope);
+        var unwrapScope = createExpressionAutoUnwrapProxy(scope, expression);
         // new Function body is non-strict, so with() works.
         var fn = new Function('__scope__', 'with(__scope__) { return ' + expression + ' }');
         return fn(unwrapScope);
@@ -2904,7 +3187,7 @@ catch (e2) {
           // effect's tracked signals.
           (function (branch) {
             setTimeout(function () {
-              var childScope = { ...capturedComponentScope, ...(branch.capturedElementScope || {}), ...globalHelpers };
+              var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
               branch.nodes.forEach(function (n) {
                 if (n.nodeType !== 1) return; // whitespace/text between template children
                 processElement(n, childScope);
@@ -2946,6 +3229,7 @@ catch (e2) {
     const capturedElementScope = findElementScope(el);
     const capturedComponentScope = { ...passedScope };
 
+    preserveConditionalComponentScopes(el, capturedComponentScope);
     parent.insertBefore(placeholder, el);
     el.removeAttribute(attrName);
 
@@ -2975,15 +3259,15 @@ catch (e2) {
       }
       try {
         // Use captured componentScope (with @for vars) merged with element scope
-        const scope = { ...capturedComponentScope, ...(capturedElementScope || {}), ...globalHelpers };
-        const unwrapScope = createAutoUnwrapProxy(scope);
+        const scope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
+        const unwrapScope = createExpressionAutoUnwrapProxy(scope, expression);
         const fn = new Function(...Object.keys(scope), 'return ' + expression);
         return fn(...Object.values(unwrapScope));
       }
 catch (e1) {
         try {
           // Retry without the unwrap proxy so call-syntax (signal()) works.
-          const scope2 = { ...capturedComponentScope, ...(capturedElementScope || {}), ...globalHelpers };
+          const scope2 = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
           const fn2 = new Function(...Object.keys(scope2), 'return ' + expression);
           return fn2(...Object.values(scope2));
         }
@@ -3001,7 +3285,7 @@ catch (e2) {
     const processChildrenWithScope = () => {
       // Build the combined scope for children - no need to modify global componentScope
       // Just pass the scope explicitly to processElement
-      const childScope = { ...capturedComponentScope, ...(capturedElementScope || {}), ...globalHelpers };
+      const childScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
 
 
       Array.from(el.childNodes).forEach(child => processElement(child, childScope));
@@ -3011,7 +3295,7 @@ catch (e2) {
 
     // Evaluate the :if expression \u2014 use direct signal read for simple refs,
     // falling back to evalExpr for complex expressions
-    const fullScope = { ...capturedComponentScope, ...(capturedElementScope || {}), ...globalHelpers };
+    const fullScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
     const directSignal = fullScope[expr];
 
     if (directSignal) {
@@ -3091,7 +3375,7 @@ else if (!value && isInserted) {
         if (value && isInserted && !childrenProcessed) {
           childrenProcessed = true;
           setTimeout(function() {
-            var childScope = { ...capturedComponentScope, ...(capturedElementScope || {}), ...globalHelpers };
+            var childScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
             processElement(el, childScope);
             // Remove x-cloak from the inserted subtree \u2014 the initial
             // cloak removal (after processElement on the root) already
@@ -3506,16 +3790,35 @@ catch (e) {}
 
   function useDark(options) {
     var cm = useColorMode(options);
-    return {
-      get isDark() { return cm.isDark; },
-      toggle: function() { cm.toggle(); },
-      set: function(dark) { cm.set(dark ? 'dark' : 'light'); },
-      subscribe: function(fn) {
-        return cm.subscribe(function(mode) { fn(mode === 'dark'); });
-      }
-    };
+    var dark = state(cm.isDark);
+    var setSignal = dark.set;
+    cm.subscribe(function(mode) { setSignal(mode === 'dark'); });
+    dark.toggle = function() { cm.toggle(); };
+    dark.set = function(value) { cm.set(value ? 'dark' : 'light'); };
+    Object.defineProperty(dark, 'isDark', { get: function() { return dark(); } });
+    return dark;
   }
 
+  function useMediaQuery(query) {
+    var mql = window.matchMedia(query);
+    var matches = state(mql.matches);
+    var onChange = function(event) { matches.set(event.matches); };
+    if (mql.addEventListener) mql.addEventListener('change', onChange);
+    else if (mql.addListener) mql.addListener(onChange);
+    onDestroy(function() {
+      if (mql.removeEventListener) mql.removeEventListener('change', onChange);
+      else if (mql.removeListener) mql.removeListener(onChange);
+    });
+    Object.defineProperty(matches, 'matches', { get: function() { return matches(); } });
+    Object.defineProperty(matches, 'value', { get: function() { return matches(); } });
+    return matches;
+  }
+
+  function usePreferredDark() { return useMediaQuery('(prefers-color-scheme: dark)'); }
+  function usePreferredLight() { return useMediaQuery('(prefers-color-scheme: light)'); }
+  function usePreferredReducedMotion() { return useMediaQuery('(prefers-reduced-motion: reduce)'); }
+  function usePreferredContrast() { return useMediaQuery('(prefers-contrast: more)'); }
+
   // Vue-compat aliases
   var ref = state;
   var reactive = state;
@@ -3618,26 +3921,76 @@ catch (e) {}
   function useReactiveProp(name, defaultValue, opts) {
     opts = opts || {};
     var parse = opts.parse || function(v) {
+      // Infer the prop's intended scalar type from its default. A string prop
+      // with an empty value must stay "", not become the boolean true. This
+      // mirrors typed component props and keeps form/error text stable when a
+      // parent forwards an empty signal value through a DOM attribute.
+      if (typeof defaultValue === 'string') return v == null ? '' : String(v);
+      if (typeof defaultValue === 'boolean') {
+        if (v === '' || v === 'true') return true;
+        if (v === 'false' || v === null || v === undefined) return false;
+        return Boolean(v);
+      }
       if (v === '' || v === 'true') return true;
       if (v === 'false') return false;
+      if (typeof v === 'string' && (v.charAt(0) === '[' || v.charAt(0) === '{')) {
+        try { return JSON.parse(v); }
+        catch (e) {}
+      }
+      if (typeof defaultValue === 'number')
+        return v != null && v !== '' && !isNaN(Number(v)) ? Number(v) : defaultValue;
       if (v != null && v !== '' && !isNaN(Number(v))) return Number(v);
       return v;
     };
     var root = window.__STX_CURRENT_ELEMENT__;
+    var kebabName = name.replace(/([A-Z])/g, function(_, c) { return '-' + c.toLowerCase(); });
+    var lowerName = name.toLowerCase();
+    var attributeNames = [name];
+    if (kebabName !== name) attributeNames.push(kebabName);
+    if (lowerName !== name && lowerName !== kebabName) attributeNames.push(lowerName);
+    function readAttribute() {
+      if (!root || !root.hasAttribute) return { has: false, raw: null };
+      for (var i = 0; i < attributeNames.length; i++) {
+        var candidate = attributeNames[i];
+        if (root.hasAttribute(candidate))
+          return { has: true, raw: root.getAttribute(candidate) };
+      }
+      return { has: false, raw: null };
+    }
+    var staticValue = defaultValue;
+    if (root && root.getAttribute) {
+      var serializedProps = root.getAttribute('data-stx-props');
+      if (serializedProps) {
+        try {
+          var parsedProps = JSON.parse(serializedProps);
+          var camelName = name.replace(/-([a-z0-9])/g, function(_, c) { return c.toUpperCase(); });
+          if (Object.prototype.hasOwnProperty.call(parsedProps, name)) staticValue = parsedProps[name];
+          else if (Object.prototype.hasOwnProperty.call(parsedProps, camelName)) staticValue = parsedProps[camelName];
+        }
+        catch (e) {}
+      }
+    }
     var initial;
-    if (root && root.hasAttribute && root.hasAttribute(name)) {
-      initial = parse(root.getAttribute(name));
+    var lastRaw = null;
+    var initialAttribute = readAttribute();
+    if (initialAttribute.has) {
+      lastRaw = initialAttribute.raw;
+      initial = parse(lastRaw);
     } else {
-      initial = defaultValue;
+      initial = staticValue;
     }
     var s = state(initial);
     if (!root) return s;
     var observer = new MutationObserver(function() {
-      var hasAttr = root.hasAttribute(name);
-      var next = hasAttr ? parse(root.getAttribute(name)) : defaultValue;
+      var attribute = readAttribute();
+      var hasAttr = attribute.has;
+      var raw = attribute.raw;
+      if (raw === lastRaw) return;
+      lastRaw = raw;
+      var next = hasAttr ? parse(raw) : staticValue;
       if (next !== s()) s.set(next);
     });
-    observer.observe(root, { attributes: true, attributeFilter: [name] });
+    observer.observe(root, { attributes: true, attributeFilter: attributeNames });
     onDestroy(function() { observer.disconnect(); });
     return s;
   }
@@ -4109,6 +4462,8 @@ catch (e) {}
       var scopeId = el.getAttribute('data-stx-scope');
       var scopeVars = window.stx._scopes && window.stx._scopes[scopeId];
       if (!scopeVars) return;
+      el.__stx_parent_scope = { ...componentScope };
+      bindParentComponentProps(el, el.__stx_parent_scope);
       Object.assign(componentScope, scopeVars);
       el.__stx_disposers = trackEffects(function() { processElement(el, componentScope); });
       if (scopeVars.__mountCallbacks && !scopeVars.__mounted) {
@@ -4143,6 +4498,9 @@ catch (e) {}
     peek,
     onMount,
     onDestroy,
+    onMounted: onMount,
+    onBeforeUnmount: onDestroy,
+    onUnmounted: onDestroy,
     useFetch,
     useRef,
     navigate,
@@ -4180,6 +4538,11 @@ catch (e) {}
     useWebSocket,
     useColorMode,
     useDark,
+    useMediaQuery,
+    usePreferredDark,
+    usePreferredLight,
+    usePreferredReducedMotion,
+    usePreferredContrast,
     useHead,
     useSeoMeta,
     // Client-side no-op for definePageMeta \u2014 the real implementation registers
@@ -4242,7 +4605,7 @@ catch (e) {}
     _tg: { enter: tgEnter, leave: tgLeave, flip: tgFlip, snapshot: tgSnapshot },  // <TransitionGroup> helpers (#1742)
     _scopes: {},  // Component-level scopes
     _scopeCounter: 0,  // Counter for generating unique scope IDs during SPA navigation
-    _latestSetup: null,  // Latest SFC setup function (for SPA re-initialization)
+    _latestSetup: window.__stx_latestSetup || null,  // Latest SFC setup function (including scripts parsed before the runtime)
     _stores: new Map(),  // Global store registry \u2014 survives SPA navigation
 
     // \u2500\u2500 Store System \u2500\u2500
@@ -4447,6 +4810,16 @@ catch (e) {}
       return result;
     },
 
+    registerStoresClient: function(stores) {
+      window.__STX_STORES__ = window.__STX_STORES__ || {};
+      var names = Object.keys(stores || {});
+      for (var i = 0; i < names.length; i++) {
+        var name = names[i];
+        window.__STX_STORES__[name] = stores[name];
+      }
+      window.dispatchEvent(new CustomEvent('stx:stores-ready', { detail: names }));
+    },
+
     useStore: function(id) {
       var store = window.stx._stores.get(id);
       if (!store && window.__STX_STORES__) {
@@ -4491,7 +4864,7 @@ catch (e) {}
         }
 
         var disposeEffects = trackEffects(function() {
-          processElement(root, scope || componentScope);
+          processElement(root, { ...componentScope, ...(scope || {}) });
         });
         root.__stx_disposers = disposeEffects;
 
@@ -4522,9 +4895,26 @@ else {
       var scriptEl = document.currentScript;
 
       function doMount() {
-        // Find component root: next sibling element after the script tag
-        var root = scriptEl ? scriptEl.nextElementSibling : null;
-        if (!root && scriptEl) root = scriptEl.previousElementSibling || scriptEl.parentElement;
+        // Auto-mount scripts are emitted after their component template. Other
+        // generated helper scripts can sit between the rendered root and this
+        // script, so walk past script/style siblings before selecting the root.
+        // Router-injected page scripts are marked data-stx-page and must use the
+        // content-container fallback below instead.
+        var isSpaPageScript = scriptEl && scriptEl.hasAttribute
+          && scriptEl.hasAttribute('data-stx-page')
+          && !scriptEl.hasAttribute('data-stx-positioned');
+        var root = null;
+        if (scriptEl && !isSpaPageScript) {
+          var previous = scriptEl.previousElementSibling;
+          while (previous && (previous.tagName === 'SCRIPT' || previous.tagName === 'STYLE'))
+            previous = previous.previousElementSibling;
+
+          var next = scriptEl.nextElementSibling;
+          while (next && (next.tagName === 'SCRIPT' || next.tagName === 'STYLE'))
+            next = next.nextElementSibling;
+
+          root = previous || next || scriptEl.parentElement;
+        }
 
         // SPA fallback: during router navigation, script is appended to body>
         // (not inside the content container), so nextElementSibling won't find the page content.
@@ -4593,7 +4983,7 @@ else {
 
         // Walk DOM and bind directives, tracking effects for cleanup
         var disposeEffects = trackEffects(function() {
-          processElement(root, scope || componentScope);
+          processElement(root, { ...componentScope, ...(scope || {}) });
         });
         root.__stx_disposers = disposeEffects;
 
@@ -4614,7 +5004,9 @@ catch (e) { console.error('[stx] onMount error:', e); }
         root.__stx_destroy = localDestroyHooks;
       }
 
-      if (document.readyState === 'loading') {
+      var isRoutedMount = scriptEl && scriptEl.hasAttribute
+        && scriptEl.hasAttribute('data-stx-page');
+      if (document.readyState === 'loading' || isRoutedMount) {
         mountQueue.push(doMount);
       }
 else {
@@ -4819,14 +5211,31 @@ else {
   console.log('[stx] registering DOMContentLoaded handler');
   document.addEventListener('DOMContentLoaded', () => {
     console.log('[stx] DOMContentLoaded fired \u2014 processing scopes');
-    // Process mount queue (from stx.mount() calls during loading)
-    mountQueue.forEach(function(fn) { fn(); });
-    mountQueue = [];
-
     // Track which scoped elements have been processed
     const processedScopes = new Set();
 
-    // Initialize components with data-stx attribute
+    // Layout expansion can remove the data-stx marker from a page's first
+    // element while leaving markers owned by the layout itself. The generated
+    // page setup is still queued explicitly, so adopt it when its own marker
+    // did not survive.
+    const latestSetup = window.stx._latestSetup;
+    const latestSetupName = typeof latestSetup === 'function' ? latestSetup.name : '';
+    const hasLatestSetupMarker = latestSetupName && Array.from(document.querySelectorAll('[data-stx]'))
+      .some(el => el.getAttribute('data-stx') === latestSetupName);
+    if (latestSetup && !hasLatestSetupMarker) {
+      try {
+        const result = latestSetup();
+        if (typeof result === 'object' && result !== null)
+          Object.assign(componentScope, result);
+      }
+      catch (e) {
+        console.error('[stx] initial setup error:', e);
+      }
+    }
+
+    // Register page setup before mounting child components. Projected slot
+    // content belongs to the caller, so child mounts need the caller's signals
+    // available when they walk their own rendered roots.
     document.querySelectorAll('[data-stx]').forEach(el => {
       const setupName = el.getAttribute('data-stx');
       console.log('[DOMContentLoaded] data-stx:', setupName, 'el:', el.tagName, 'fn exists:', !!(setupName && window[setupName]));
@@ -4837,6 +5246,16 @@ else {
           Object.assign(componentScope, result);
         }
       }
+    });
+    var pageScopeSnapshot = { ...componentScope };
+
+    // Process mount queue (from stx.mount() calls during loading) only after
+    // caller setup is available for Vue-style projected slot ownership.
+    mountQueue.forEach(function(fn) { fn(); });
+    mountQueue = [];
+
+    // 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); });
       el.__stx_disposers = disposeEffects;
@@ -4902,6 +5321,12 @@ else {
 
       if (!scopeVars) return;
 
+      // Forwarded props and events belong to the caller. Capture its scope
+      // before this component's locals are merged, so identical child names
+      // cannot shadow expressions such as :total-items="totalItems".
+      el.__stx_parent_scope = resolveComponentCallerScope(el, pageScopeSnapshot);
+      bindParentComponentProps(el, el.__stx_parent_scope);
+
       // Merge component scope vars into componentScope (don't restore - keep for head elements)
       // This ensures expressions can access component variables even for elements
       // where findElementScope might not work (e.g., cloned elements not yet in DOM)
@@ -5184,10 +5609,6 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
     });
     destroyCallbacks.length = 0;
 
-    // Process mount queue (scripts in swapped content may have called stx.mount())
-    mountQueue.forEach(function(fn) { fn(); });
-    mountQueue = [];
-
     // Re-process scoped components in new content
     var routerOpts = window.STX_ROUTER_OPTIONS || window.__stxRouterConfig || {};
     var container = document.querySelector('[data-stx-content]')
@@ -5228,6 +5649,13 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
         }
       });
     }
+    var spaPageScopeSnapshot = { ...componentScope };
+
+    // Routed component mount scripts execute after DOMContentLoaded. Queue them
+    // until the destination page setup is active so projected props and parent
+    // event handlers resolve against the caller, matching initial hydration.
+    mountQueue.forEach(function(fn) { fn(); });
+    mountQueue = [];
 
     // Initialize x-data scopes after SPA fragment swap.
     // On full page load, the reactive bridge <script> calls initScope(). But after SPA
@@ -5277,6 +5705,8 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
         return;
       }
       if (!scopeVars) return;
+      el.__stx_parent_scope = resolveComponentCallerScope(el, spaPageScopeSnapshot);
+      bindParentComponentProps(el, el.__stx_parent_scope);
       Object.assign(componentScope, scopeVars);
       if (el.__stx_disposers) return;
       var disposeEffects = trackEffects(function() { processElement(el, componentScope); });
@@ -5353,9 +5783,9 @@ catch (e) { console.warn('[stx] mount callback error:', e); }
       var sa = el.hasAttribute(':show') ? ':show' : el.hasAttribute('x-show') ? 'x-show' : '@show';
       bindShow(el, el.getAttribute(sa), componentScope, sa);
     }
-    if (el.hasAttribute && (el.hasAttribute('@model') || el.hasAttribute(':model') || el.hasAttribute('x-model'))) {
-      var ma = el.hasAttribute(':model') ? ':model' : el.hasAttribute('x-model') ? 'x-model' : '@model';
-      bindModel(el, el.getAttribute(ma), componentScope, ma);
+    var mb = getModelBinding(el);
+    if (mb) {
+      bindModel(el, mb.expression, componentScope, mb.name);
     }
     // Process children, skipping scoped containers and script/style elements
     if (el.tagName !== 'SCRIPT' && el.tagName !== 'STYLE') {