@stacksjs/stx 0.2.118 → 0.2.120

package/dist/signals.js

@@ -270,6 +270,12 @@ else {
         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)) {
+          // Loop variables are implementation-detail signals so keyed rows can
+          // update reactively. In template expressions they must behave like
+          // their item value, including for objects with fields named value,
+          // set, or subscribe. Otherwise item.value is mistaken for the
+          // signal compatibility API and resolves to the whole item object.
+          if (val._isStxLoopItem) return val();
           if (preserveSignal && preserveSignal(prop, val)) return val;
           return val();
         }
@@ -1274,7 +1280,7 @@ finally {
     return null;
   }
 
-  function toValue(expr, el, enableAutoUnwrap = true) {
+  function toValue(expr, el, enableAutoUnwrap = true, extraScope = {}) {
     try {
       // Skip placeholder expressions like __TITLE__ (build-time placeholders)
       if (/^__[A-Z_]+__$/.test(expr.trim())) {
@@ -1282,7 +1288,7 @@ finally {
       }
       // First try component-level scope
       const elementScope = findElementScope(el || currentElement);
-      const baseScope = { ...globalHelpers, ...componentScope, ...(elementScope || {}) };
+      const baseScope = { ...globalHelpers, ...componentScope, ...(elementScope || {}), ...extraScope };
 
       // Check for pipe syntax (Feature #2)
       const pipeResult = parsePipeExpression(expr, baseScope);
@@ -1361,8 +1367,8 @@ catch (e) {
       const [, varName, op, valueExpr] = assignMatch;
       const signal = scope[varName];
       if (signal && signal._isSignal) {
-        return () => {
-          const addValue = toValue(valueExpr, null, true);
+        return ($event) => {
+          const addValue = toValue(valueExpr, null, true, { ...scope, $event: $event });
           signal.update(n => {
             switch (op) {
               case '+': return n + addValue;
@@ -1383,8 +1389,8 @@ catch (e) {
       const [, varName, valueExpr] = simpleAssignMatch;
       const signal = scope[varName];
       if (signal && signal._isSignal) {
-        return () => {
-          const newValue = toValue(valueExpr, null, true);
+        return ($event) => {
+          const newValue = toValue(valueExpr, null, true, { ...scope, $event: $event });
           signal.set(newValue);
         };
       }
@@ -1467,8 +1473,16 @@ catch (e) {
         return;
       }
 
-      const fn = new Function(...Object.keys(scope), '$event', expr);
-      fn(...Object.values(scope), event);
+      // Loop items arrive as signals (see createItemElements). Unwrap them for
+      // the same reason the inline @event path does: \`item.value\` in a handler
+      // means the item's field, not the signal API.
+      const handlerScope = {};
+      Object.keys(scope).forEach(function(k) {
+        const v = scope[k];
+        handlerScope[k] = (v && typeof v === 'function' && v._isStxLoopItem) ? v() : v;
+      });
+      const fn = new Function(...Object.keys(handlerScope), '$event', expr);
+      fn(...Object.values(handlerScope), event);
     }
 catch (e) {
       // Event handlers fire on user interaction, not reactive re-runs \u2014 there's no
@@ -1625,10 +1639,22 @@ catch (e) {
       && /^\\s*\\(?\\s*\\w+(?:\\s*,\\s*\\w+)?\\s*\\)?\\s+(?:in|of)\\s+.+\\s*$/.test(expr);
   }
 
+  function getElementAttributes(el) {
+    if (!el || !el.attributes) return [];
+    return Array.from(el.attributes).map(function(attr) {
+      // Browser DOM exposes Attr records through NamedNodeMap. HappyDOM and
+      // other standards-oriented DOM implementations may expose Map entries
+      // for cloned nodes instead. Normalize both shapes so reactive nodes
+      // created by :for hydrate exactly like their browser counterparts.
+      if (Array.isArray(attr)) return { name: attr[0], value: attr[1] };
+      return attr;
+    });
+  }
+
   function getModelBinding(el) {
     if (!el || !el.attributes) return null;
     var prefixes = ['x-model', ':model', '@model'];
-    var attrs = Array.from(el.attributes);
+    var attrs = getElementAttributes(el);
     for (var i = 0; i < attrs.length; i++) {
       var name = attrs[i] && attrs[i].name;
       if (!name) continue;
@@ -1640,17 +1666,112 @@ catch (e) {
     return null;
   }
 
+  function readDeferredParentComponentProps(el) {
+    var serialized = el.getAttribute('data-stx-deferred-parent-bindings');
+    if (!serialized) return {};
+    try {
+      var parsed = JSON.parse(serialized);
+      return parsed && typeof parsed === 'object' ? parsed : {};
+    }
+    catch (e) {
+      return {};
+    }
+  }
+
+  function preserveDeferredParentComponentProps(el) {
+    var names = (el.getAttribute('data-stx-parent-bindings') || '').split(/\\s+/).filter(Boolean);
+    if (!names.length) return;
+    var deferred = readDeferredParentComponentProps(el);
+    names.forEach(function(name) {
+      var sourceName = ':' + name;
+      if (el.hasAttribute(sourceName))
+        deferred[name] = el.getAttribute(sourceName);
+    });
+    if (Object.keys(deferred).length)
+      el.setAttribute('data-stx-deferred-parent-bindings', JSON.stringify(deferred));
+  }
+
+  function hasPendingLoopBoundary(el) {
+    var loopBoundary = el;
+    while (loopBoundary && loopBoundary !== document) {
+      var loopExpression = loopBoundary.getAttribute && (
+        loopBoundary.getAttribute('@for')
+        || loopBoundary.getAttribute(':for')
+        || loopBoundary.getAttribute('x-for')
+      );
+      if (loopExpression && isForDirectiveExpression(loopExpression))
+        return true;
+      loopBoundary = loopBoundary.parentElement || loopBoundary.parentNode;
+    }
+    return false;
+  }
+
+  function hasPendingAncestorLoopBoundary(el) {
+    var loopBoundary = el && (el.parentElement || el.parentNode);
+    while (loopBoundary && loopBoundary !== document) {
+      var loopExpression = loopBoundary.getAttribute && (
+        loopBoundary.getAttribute('@for')
+        || loopBoundary.getAttribute(':for')
+        || loopBoundary.getAttribute('x-for')
+      );
+      if (loopExpression && isForDirectiveExpression(loopExpression))
+        return true;
+      loopBoundary = loopBoundary.parentElement || loopBoundary.parentNode;
+    }
+    return false;
+  }
+
+  function syncComponentPropSignal(el, name, value) {
+    if (!el || !el.getAttribute || value === undefined) return;
+    var scopeId = el.getAttribute('data-stx-scope');
+    var scopeVars = scopeId && window.stx._scopes && window.stx._scopes[scopeId];
+    if (!scopeVars) return;
+    var camelName = name.replace(/-([a-z0-9])/g, function(_, character) {
+      return character.toUpperCase();
+    });
+    var propSignal = scopeVars[name] || scopeVars[camelName];
+    if (!propSignal || !propSignal._isSignal || typeof propSignal.set !== 'function') return;
+    var directValues = el.__stx_direct_prop_values || (el.__stx_direct_prop_values = {});
+    var directValue = {
+      raw: el.hasAttribute(name) ? el.getAttribute(name) : null,
+      value: value,
+    };
+    directValues[name] = directValue;
+    directValues[camelName] = directValue;
+    // This runs inside the parent binding effect. Reading the child prop
+    // signal normally would subscribe that effect to its own output. Parent
+    // expressions that return a fresh array or object would then recurse:
+    // syncing the child retriggers the parent, which creates another value.
+    // Compare without dependency tracking so the effect only follows the
+    // caller-owned signals used by the binding expression.
+    if (!Object.is(peek(function() { return propSignal(); }), value))
+      propSignal.set(value);
+  }
+
   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;
+    if (hasPendingLoopBoundary(el)) {
+      preserveDeferredParentComponentProps(el);
+      return;
+    }
+    var deferred = readDeferredParentComponentProps(el);
+    var bindings = names.map(function(name) {
+      var sourceName = ':' + name;
+      var expression = el.hasAttribute(sourceName) ? el.getAttribute(sourceName) : deferred[name];
+      return typeof expression === 'string'
+        ? { name: name, sourceName: sourceName, expression: expression }
+        : null;
+    }).filter(Boolean);
+    if (!bindings.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);
+    bindings.forEach(function(binding) {
+      var name = binding.name;
+      var sourceName = binding.sourceName;
+      var expression = binding.expression;
       effect(function() {
         var value;
         try {
@@ -1687,9 +1808,21 @@ catch (e) {
           }
           el.setAttribute(name, serialized);
         }
+        // The component setup scope is already registered for normal and
+        // cloned signal components. Update its prop signal directly so object
+        // identity and synchronous Vue-like prop delivery do not depend on a
+        // MutationObserver round trip through a serialized DOM attribute.
+        // The attribute remains the public DOM reflection and observer fallback
+        // for scopes that register after this binding pass.
+        syncComponentPropSignal(el, name, value);
       });
       el.removeAttribute(sourceName);
+      delete deferred[name];
     });
+    if (Object.keys(deferred).length)
+      el.setAttribute('data-stx-deferred-parent-bindings', JSON.stringify(deferred));
+    else
+      el.removeAttribute('data-stx-deferred-parent-bindings');
   }
 
   function resolveComponentCallerScope(el, pageScope) {
@@ -1720,11 +1853,69 @@ catch (e) {
     root.querySelectorAll('[data-stx-scope]').forEach(function(scopeEl) { scopeEls.push(scopeEl); });
     scopeEls.forEach(function(scopeEl) {
       if (scopeEl.__stx_parent_props_bound) return;
+      // A component inside a descendant loop cannot resolve its caller props
+      // until bindFor creates the iteration scope. Binding it while the outer
+      // conditional is being detached would consume expressions such as
+      // :status="deployment.status" before the deployment item exists, leaving every
+      // later clone with the child's default prop. bindFor hydrates these
+      // component scopes after insertion with the correct per-item scope.
+      var current = scopeEl;
+      while (current && current !== root) {
+        if (current.hasAttribute
+          && (current.hasAttribute('@for') || current.hasAttribute(':for') || current.hasAttribute('x-for'))) {
+          preserveDeferredParentComponentProps(scopeEl);
+          return;
+        }
+        current = current.parentElement || current.parentNode;
+      }
       scopeEl.__stx_parent_scope = resolveComponentCallerScope(scopeEl, callerScope);
       bindParentComponentProps(scopeEl, scopeEl.__stx_parent_scope);
     });
   }
 
+  // Component setup scripts are emitted immediately after their scoped root.
+  // When that root itself carries :if, detaching only the element leaves the
+  // sibling setup script outside the conditional node group. Scripts inserted
+  // through innerHTML are inert, so the later hydration pass has no script to
+  // execute and the component keeps raw directives and interpolations.
+  function findConditionalComponentSetupSiblings(root) {
+    if (!root || !root.hasAttribute || !root.hasAttribute('data-stx-scope')) return [];
+    var scopeId = root.getAttribute('data-stx-scope');
+    var templateScopeId = root.getAttribute('data-stx-template-scope') || scopeId;
+    if (!scopeId) return [];
+
+    var scripts = [];
+    var sibling = root.nextSibling;
+    while (sibling) {
+      var next = sibling.nextSibling;
+      if (sibling.nodeType === Node.TEXT_NODE && !(sibling.textContent || '').trim()) {
+        sibling = next;
+        continue;
+      }
+      if (sibling.nodeType === Node.COMMENT_NODE) {
+        sibling = next;
+        continue;
+      }
+      if (sibling.nodeType === Node.ELEMENT_NODE
+        && sibling.tagName === 'STYLE'
+        && sibling.hasAttribute('data-stx-vendor')) {
+        sibling = next;
+        continue;
+      }
+      if (sibling.nodeType === Node.ELEMENT_NODE
+        && sibling.tagName === 'SCRIPT'
+        && sibling.hasAttribute('data-stx-scoped')
+        && ((sibling.textContent || '').indexOf(scopeId) !== -1
+          || (templateScopeId && (sibling.textContent || '').indexOf(templateScopeId) !== -1))) {
+        scripts.push(sibling);
+        sibling = next;
+        continue;
+      }
+      break;
+    }
+    return scripts;
+  }
+
   function processElement(el, scope = componentScope) {
     // Debug: log every element with x-class or @click
     if (el.nodeType === Node.ELEMENT_NODE && el.hasAttribute) {
@@ -1739,6 +1930,17 @@ catch (e) {
       deferHydration(el, trigger, scope);
       return;
     }
+    if (el.nodeType === Node.ELEMENT_NODE
+      && el.hasAttribute
+      && el.hasAttribute('data-stx-scope')
+      && hasPendingAncestorLoopBoundary(el)) {
+      preserveDeferredParentComponentProps(el);
+      // Even when the component is itself a loop root, an ancestor loop must
+      // create its caller item scope first. The ancestor's bindFor pass will
+      // clone and hydrate this component with that scope, then its own loop can
+      // evaluate expressions such as group.resources.
+      return;
+    }
 
     if (el.nodeType === Node.ELEMENT_NODE && el.tagName === 'BUTTON' && el.hasAttribute && el.hasAttribute('@click')) {
 
@@ -1964,9 +2166,9 @@ catch (e2) {
 
     // Handle attributes
     if (el.hasAttribute && (el.hasAttribute('x-class') || el.hasAttribute('@click'))) {
-      console.log('[stx] attr loop entry:', el.tagName, 'attrs:', Array.from(el.attributes).map(a => a.name).join(', '));
+      console.log('[stx] attr loop entry:', el.tagName, 'attrs:', getElementAttributes(el).map(a => a.name).join(', '));
     }
-    Array.from(el.attributes).forEach(attr => {
+    getElementAttributes(el).forEach(attr => {
       const name = attr.name;
       const value = attr.value;
       if (!name) return;
@@ -2008,6 +2210,7 @@ catch (e2) {
               el.value = desiredValue;
               if (desiredValue === '' && el.tagName !== 'OPTION') el.removeAttribute(attrName);
               else if (el.getAttribute(attrName) !== desiredValue) el.setAttribute(attrName, desiredValue);
+              if (typeof el.__stx_model_sync === 'function') el.__stx_model_sync();
             };
             applyControlValue();
 
@@ -2032,6 +2235,24 @@ catch (e2) {
             }
             return;
           }
+          // Checked, selected, and indeterminate are live DOM properties, just like value.
+          // Updating only the HTML attribute leaves a user-touched checkbox or
+          // radio in its previous state because the property becomes dirty.
+          // Indeterminate has no corresponding effective HTML attribute at all.
+          if ((attrName === 'checked' || attrName === 'selected' || attrName === 'indeterminate') && attrName in el) {
+            var selectedState = Boolean(v);
+            el[attrName] = selectedState;
+            if (attrName === 'indeterminate') {
+              el.removeAttribute(attrName);
+            }
+            else if (selectedState) {
+              el.setAttribute(attrName, '');
+            }
+            else {
+              el.removeAttribute(attrName);
+            }
+            return;
+          }
           if (v === false || v === null || v === undefined) {
             el.removeAttribute(attrName);
           }
@@ -2076,6 +2297,14 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
         // Store ref in scope.$refs and componentScope.$refs
         if (scope.$refs) scope.$refs[value] = el;
         if (componentScope.$refs) componentScope.$refs[value] = el;
+        // Also fill a same-named signal declared in the script block, so the
+        // documented ref() + x-ref pair works and reading the signal returns
+        // the element. Without this the signal stayed empty and every read of
+        // it silently returned undefined.
+        var refTarget = (scope && scope[value]) || componentScope[value];
+        if (refTarget && typeof refTarget === 'function' && refTarget._isSignal && typeof refTarget.set === 'function') {
+          refTarget.set(el);
+        }
       }
       else if (name.startsWith('@') || name.startsWith(':')) {
         // Event handlers: @click, :click, @submit.prevent, :keydown.enter, etc.
@@ -2103,11 +2332,15 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
         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 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.
+          // Ignore that native event only after defineEmits() has declared or
+          // emitted the same name, preventing submit/click handlers from
+          // firing once for the native event and again for the CustomEvent.
+          var componentEmits = el.__stx_component_emits;
+          if (isForwardedComponentEvent && event.target !== el
+            && componentEmits && componentEmits[eventName]) return;
 
           // Vue-style component handlers receive the emitted payload directly.
           // Native root events still receive the Event object so server-only
@@ -2172,7 +2405,16 @@ else if (name === 'ref' || name === ':ref' || name === 'x-ref' || name === 'data
               // primitive reads.
               var unwrapVars = Object.keys(eventCapturedScope).map(function(k) {
                 var v = eventCapturedScope[k];
-                if (v && typeof v === 'function' && v._isSignal && expressionUsesSignalApi(value, k)) {
+                // A :for item is a signal only as an implementation detail, so
+                // that keyed rows can update in place. Its \`.value\` is a field
+                // on the item, never the signal compatibility API \u2014 the same
+                // rule createAutoUnwrapProxy states for binding expressions.
+                // Without the carve-out, expressionUsesSignalApi sees
+                // \`option.value\` and hands the handler the raw signal, so a
+                // handler like \`pick(option.value)\` receives the whole item.
+                // It is not an error, so it lands silently: the wrong value is
+                // stored and only surfaces much later.
+                if (v && typeof v === 'function' && v._isSignal && !v._isStxLoopItem && expressionUsesSignalApi(value, k)) {
                   return 'var ' + k + ' = __s["' + k + '"]';
                 }
                 return 'var ' + k + ' = __s["' + k + '"] && typeof __s["' + k + '"] === "function" && __s["' + k + '"]._isSignal ? __s["' + k + '"]() : __s["' + k + '"]';
@@ -2379,12 +2621,54 @@ catch (e) {
       }
     };
 
-    if (tag === 'input' && (type === 'checkbox' || type === 'radio')) {
-      effect(() => { el.checked = getValue(); });
-      el.addEventListener('change', () => setValue(el.checked));
+    if (tag === 'input' && type === 'checkbox') {
+      var syncCheckbox = () => {
+        var current = getValue();
+        el.checked = Array.isArray(current)
+          ? current.some(function(item) { return String(item) === String(el.value); })
+          : Boolean(current);
+      };
+      el.__stx_model_sync = syncCheckbox;
+      effect(syncCheckbox);
+      el.addEventListener('change', () => {
+        var current = getValue();
+        if (!Array.isArray(current)) {
+          setValue(el.checked);
+          return;
+        }
+
+        var checkboxValue = coerceValue(el.value);
+        var next = current.filter(function(item) { return String(item) !== String(checkboxValue); });
+        if (el.checked) next.push(checkboxValue);
+        setValue(next);
+      });
+    }
+    else if (tag === 'input' && type === 'radio') {
+      var syncRadio = () => { el.checked = String(getValue()) === String(el.value); };
+      el.__stx_model_sync = syncRadio;
+      effect(syncRadio);
+      el.addEventListener('change', () => {
+        if (el.checked) setValue(coerceValue(el.value));
+      });
     }
     else if (tag === 'select') {
-      effect(() => { el.value = getValue(); });
+      var syncSelect = () => { el.value = getValue() ?? ''; };
+      el.__stx_model_sync = syncSelect;
+      effect(syncSelect);
+      if (!el.__stx_model_observer && typeof window.MutationObserver !== 'undefined') {
+        el.__stx_model_observer = new window.MutationObserver(syncSelect);
+        el.__stx_model_observer.observe(el, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['value'],
+        });
+        el.__stx_destroy = el.__stx_destroy || [];
+        el.__stx_destroy.push(function() {
+          if (el.__stx_model_observer) el.__stx_model_observer.disconnect();
+          el.__stx_model_observer = null;
+        });
+      }
       el.addEventListener('change', () => setValue(coerceValue(el.value)));
     }
 else {
@@ -2591,6 +2875,179 @@ else if (typeof value === 'string') {
     });
   }
 
+  var __forComponentScopeCounter = 0;
+  var __forComponentSetupFactories = new Map();
+
+  function forEachGroupElement(nodes, callback) {
+    nodes.forEach(function(node) {
+      if (!node || node.nodeType !== Node.ELEMENT_NODE) return;
+      callback(node);
+      if (node.querySelectorAll) {
+        node.querySelectorAll('*').forEach(function(child) { callback(child); });
+      }
+    });
+  }
+
+  // A signal component expanded inside <template :for> carries a compiled
+  // data-stx-scope id and setup script. cloneNode() used to duplicate that id
+  // for every row, so all instances shared the first child's props and state.
+  // Give each cloned component tree its own ids before insertion, and rewrite
+  // the setup scripts that target those ids.
+  function remapForComponentScopes(nodes) {
+    var scopeMap = {};
+    forEachGroupElement(nodes, function(node) {
+      if (!node.hasAttribute || !node.hasAttribute('data-stx-scope')) return;
+      var oldId = node.getAttribute('data-stx-scope');
+      if (!oldId) return;
+      if (!scopeMap[oldId])
+        scopeMap[oldId] = oldId + '_for_' + (++__forComponentScopeCounter);
+      // Keep the compiler's original id through any additional structural
+      // clones. DOM cloneNode() preserves attributes but not expando fields.
+      if (!node.hasAttribute('data-stx-template-scope'))
+        node.setAttribute('data-stx-template-scope', oldId);
+      node.setAttribute('data-stx-scope', scopeMap[oldId]);
+    });
+
+    var oldIds = Object.keys(scopeMap);
+    if (!oldIds.length) return;
+
+    forEachGroupElement(nodes, function(node) {
+      if (node.attributes) {
+        Array.from(node.attributes).forEach(function(rawAttribute) {
+          var attribute = Array.isArray(rawAttribute)
+            ? { name: rawAttribute[0], value: rawAttribute[1] }
+            : rawAttribute;
+          if (!attribute || attribute.name === 'data-stx-scope' || attribute.name === 'data-stx-template-scope') return;
+          var value = attribute.value;
+          if (typeof value !== 'string') return;
+          oldIds.forEach(function(oldId) {
+            if (value.indexOf(oldId) !== -1)
+              value = value.split(oldId).join(scopeMap[oldId]);
+          });
+          if (value !== attribute.value) node.setAttribute(attribute.name, value);
+        });
+      }
+    });
+  }
+
+  function hydrateComponentScopes(nodes, callerScope) {
+    var roots = [];
+    var scripts = [];
+    forEachGroupElement(nodes, function(node) {
+      if (node.hasAttribute && node.hasAttribute('data-stx-scope')) roots.push(node);
+      if (node.tagName === 'SCRIPT' && node.hasAttribute('data-stx-scoped')) scripts.push(node);
+    });
+    if (!roots.length) return;
+
+    function hasPendingStructuralAncestor(root) {
+      var cursor = root && root.parentElement;
+      while (cursor && cursor.nodeType === Node.ELEMENT_NODE) {
+        if (cursor.hasAttribute('@for')
+          || cursor.hasAttribute(':for')
+          || cursor.hasAttribute('x-for')
+          || cursor.hasAttribute('@if')
+          || cursor.hasAttribute(':if')
+          || cursor.hasAttribute('x-if')
+          || cursor.hasAttribute('@else-if')
+          || cursor.hasAttribute(':else-if')
+          || cursor.hasAttribute('x-else-if')
+          || cursor.hasAttribute('@else')
+          || cursor.hasAttribute(':else')
+          || cursor.hasAttribute('x-else'))
+          return true;
+        cursor = cursor.parentElement;
+      }
+      return false;
+    }
+
+    // Scripts cloned from template.content are inert in browsers. Compile each
+    // distinct component setup body once, then run that cached function for
+    // every loop instance. Temporarily restoring the template's original scope
+    // id lets existing compiled setup code locate the correct root without
+    // rewriting and reparsing the full script for every row.
+    scripts.forEach(function(old) {
+      var text = old.textContent || '';
+      var pendingRoots = roots.filter(function(root) {
+        var scopeId = root.getAttribute('data-stx-scope');
+        var originalScopeId = root.getAttribute('data-stx-template-scope') || scopeId;
+        return scopeId
+          && originalScopeId
+          && text.indexOf(originalScopeId) !== -1
+          && !hasPendingStructuralAncestor(root)
+          && !(window.stx._scopes && window.stx._scopes[scopeId]);
+      });
+      if (!pendingRoots.length) return;
+
+      var setup = __forComponentSetupFactories.get(text);
+      if (!setup) {
+        try {
+          setup = new Function(text);
+          __forComponentSetupFactories.set(text, setup);
+        }
+        catch (e) {
+          console.error('[stx] cloned component setup compile error:', e);
+          return;
+        }
+      }
+
+      pendingRoots.forEach(function(root) {
+        var scopeId = root.getAttribute('data-stx-scope');
+        var originalScopeId = root.getAttribute('data-stx-template-scope') || scopeId;
+        if (!scopeId || !originalScopeId) return;
+
+        root.setAttribute('data-stx-scope', originalScopeId);
+        try {
+          setup();
+          var registeredScope = window.stx._scopes && (window.stx._scopes[originalScopeId] || window.stx._scopes[scopeId]);
+          if (registeredScope && originalScopeId !== scopeId) {
+            delete window.stx._scopes[originalScopeId];
+            window.stx._scopes[scopeId] = registeredScope;
+          }
+        }
+        catch (e) {
+          console.error('[stx] cloned component setup error:', e);
+        }
+        finally {
+          root.setAttribute('data-stx-scope', scopeId);
+        }
+      });
+
+      // A component that is itself a structural source still needs its setup
+      // sibling when bindFor/bindIf turns that source into a clone template.
+      // Final row instances have no structural attribute and can discard it.
+      var isStructuralSource = pendingRoots.some(function(root) {
+        return root.hasAttribute('@for')
+          || root.hasAttribute(':for')
+          || root.hasAttribute('x-for')
+          || root.hasAttribute('@if')
+          || root.hasAttribute(':if')
+          || root.hasAttribute('x-if');
+      });
+      if (!isStructuralSource && old.parentNode) old.parentNode.removeChild(old);
+    });
+
+    roots.forEach(function(root) {
+      var scopeId = root.getAttribute('data-stx-scope');
+      var scopeVars = scopeId && window.stx._scopes && window.stx._scopes[scopeId];
+      var resolvedCallerScope = resolveComponentCallerScope(root, callerScope);
+      root.__stx_parent_scope = resolvedCallerScope;
+      bindParentComponentProps(root, resolvedCallerScope);
+      if (!scopeVars || root.__stx_disposers) return;
+      scopeVars.__el = root;
+      var childScope = { ...resolvedCallerScope, ...scopeVars };
+      root.__stx_disposers = trackEffects(function() {
+        processElement(root, childScope);
+      });
+      if (scopeVars.__mountCallbacks && !scopeVars.__mounted) {
+        scopeVars.__mounted = true;
+        scopeVars.__mountCallbacks.forEach(function(fn) {
+          try { fn(); }
+          catch (e) { console.error('[stx] onMount error:', e); }
+        });
+      }
+    });
+  }
+
   function bindFor(el, passedScope = componentScope, attrName = '@for') {
     if (el.__stx_for_bound) return;
     el.__stx_for_bound = true;
@@ -2614,6 +3071,34 @@ else if (typeof value === 'string') {
 
     const placeholder = document.createComment('stx-for');
     const isTemplate = el.tagName === 'TEMPLATE';
+    const componentSetupTemplates = [];
+    if (!isTemplate && el.hasAttribute('data-stx-scope')) {
+      const componentScopeId = el.getAttribute('data-stx-scope');
+      const componentTemplateScopeId = el.getAttribute('data-stx-template-scope') || componentScopeId;
+      let setupSibling = el.nextSibling;
+      while (setupSibling) {
+        const nextSetupSibling = setupSibling.nextSibling;
+        if (setupSibling.nodeType === Node.TEXT_NODE && !(setupSibling.textContent || '').trim()) {
+          setupSibling = nextSetupSibling;
+          continue;
+        }
+        if (setupSibling.nodeType === Node.COMMENT_NODE) {
+          setupSibling = nextSetupSibling;
+          continue;
+        }
+        if (setupSibling.nodeType === Node.ELEMENT_NODE
+          && setupSibling.tagName === 'SCRIPT'
+          && setupSibling.hasAttribute('data-stx-scoped')
+          && ((setupSibling.textContent || '').indexOf(componentScopeId) !== -1
+            || (componentTemplateScopeId && (setupSibling.textContent || '').indexOf(componentTemplateScopeId) !== -1))) {
+          componentSetupTemplates.push(setupSibling.cloneNode(true));
+          setupSibling.remove();
+          setupSibling = nextSetupSibling;
+          continue;
+        }
+        break;
+      }
+    }
 
     // Check if element also has @if / :if - need to handle together
     const ifExpr = el.getAttribute('@if') || el.getAttribute(':if');
@@ -2650,6 +3135,11 @@ else if (typeof value === 'string') {
     const capturedScope = findElementScope(el) || findElementScope(parent);
 
     parent.insertBefore(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);
 
     // Capture :key expression BEFORE removing the attribute
@@ -2686,6 +3176,49 @@ else {
     let loadingElement = null;
     let emptyElement = null;
 
+    // A <template :for> can contain another structural directive. That
+    // nested directive replaces its source node with a placeholder and owns
+    // additional live siblings around that placeholder. Track an explicit
+    // boundary for every template iteration so keyed reuse moves the complete
+    // live range, including nodes created by nested :for / :if bindings.
+    // Moving only the original cloned nodes pulled static siblings past the
+    // nested range on the next outer update (header, then rows became rows,
+    // then header).
+    const liveGroupNodes = (group) => {
+      if (!isTemplate || !group || group.length < 2) return group || [];
+      const start = group[0];
+      const end = group[group.length - 1];
+      if (!start || !end || start.parentNode !== parent || end.parentNode !== parent)
+        return group.filter(groupNode => groupNode && groupNode.parentNode === parent);
+
+      const nodes = [];
+      let currentNode = start;
+      while (currentNode) {
+        nodes.push(currentNode);
+        if (currentNode === end) break;
+        currentNode = currentNode.nextSibling;
+      }
+      return nodes;
+    };
+
+    const removeGroup = (group) => {
+      const liveNodes = liveGroupNodes(group);
+      const liveSet = new Set(liveNodes);
+      liveNodes.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
+      group.forEach(groupNode => {
+        if (liveSet.has(groupNode)) return;
+        disposeSubtreeScopes(groupNode);
+        groupNode.remove();
+      });
+    };
+
+    const clearRenderedItems = () => {
+      currentGroups.forEach(removeGroup);
+      currentElements = [];
+      currentGroups = [];
+      currentKeys = [];
+    };
+
     // Helper to evaluate with captured scope (auto-unwraps signals)
     // NOTE: This eagerly reads ALL signals in scope \u2014 use evalLazy inside effects
     // to avoid over-broad dependency tracking.
@@ -2779,6 +3312,7 @@ catch (e) {
     // The item is wrapped in a signal so bindings track it reactively.
     const createItemElements = (item, index, key) => {
       const itemSignal = state(item);
+      itemSignal._isStxLoopItem = true;
       const indexSignal = state(index);
       if (key) itemSignalMap.set(key, { item: itemSignal, index: indexSignal });
 
@@ -2788,6 +3322,7 @@ catch (e) {
 
       const elements = [];
       if (isTemplate) {
+        elements.push(document.createComment('stx-for-item-start'));
         Array.from(templateContent.childNodes).forEach(node => {
           const clone = node.cloneNode(true);
           if (clone.nodeType === 1) {
@@ -2797,11 +3332,16 @@ catch (e) {
           }
           elements.push(clone);
         });
+        elements.push(document.createComment('stx-for-item-end'));
       } else {
         const clone = templateContent.cloneNode(true);
         clone.__stx_for_scope = itemScope;
         elements.push(clone);
+        componentSetupTemplates.forEach(function(setupTemplate) {
+          elements.push(setupTemplate.cloneNode(true));
+        });
       }
+      remapForComponentScopes(elements);
       return elements;
     };
 
@@ -2827,10 +3367,7 @@ catch (e) {
         const isLoading = evalLazy(loadingExpr);
         if (isLoading) {
           // Dispose scopes registered by items before they leave the DOM (#1727).
-          currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
-          currentElements = [];
-          currentGroups = [];
-          currentKeys = [];
+          clearRenderedItems();
           showLoading();
           return;
         }
@@ -2876,10 +3413,7 @@ catch (e) {
         const ifValue = evalLazy(ifExpr);
         if (!ifValue) {
           // Dispose scopes registered by items before they leave the DOM (#1727).
-          currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
-          currentElements = [];
-          currentGroups = [];
-          currentKeys = [];
+          clearRenderedItems();
           hideEmpty();
           return;
         }
@@ -2917,10 +3451,7 @@ catch (e) {
       // Check empty state (Feature #3)
       if (list.length === 0) {
         // Dispose scopes registered by items before they leave the DOM (#1727).
-        currentElements.forEach(e => { disposeSubtreeScopes(e); e.remove(); });
-        currentElements = [];
-        currentGroups = [];
-        currentKeys = [];
+        clearRenderedItems();
         if (emptyExpr) {
           const emptyContent = evalLazy(emptyExpr);
           if (emptyContent && typeof emptyContent === 'string') {
@@ -2973,9 +3504,10 @@ catch (e) {
           // group's nodes. Its own placeholder owns reinsertion, so keyed reuse
           // must not resurrect that hidden node.
           const group = existing.shift();
-          group.forEach(el => {
-            if (el.parentNode === parent) parent.insertBefore(el, placeholder);
-          });
+          const liveNodes = liveGroupNodes(group);
+          const fragment = document.createDocumentFragment();
+          liveNodes.forEach(groupNode => fragment.appendChild(groupNode));
+          parent.insertBefore(fragment, placeholder);
           newElements.push(...group);
           newGroups.push(group);
           usedKeys.add(key);
@@ -2992,14 +3524,20 @@ catch (e) {
           const elements = createItemElements(list[i], i, key);
           elements.forEach(el => {
             parent.insertBefore(el, placeholder);
+            if (tgReady && el.isConnected) tgEnter(el, tgName);
+          });
+          hydrateComponentScopes(elements, elements.find(function(node) {
+            return node && node.__stx_for_scope;
+          })?.__stx_for_scope || passedScope);
+          elements.forEach(el => {
             if (el.nodeType === 1) {
               var itemScope = el.__stx_for_scope || passedScope;
               delete el.__stx_for_scope;
-              processElement(el, itemScope);
+              if (!el.__stx_disposers && el.tagName !== 'SCRIPT')
+                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);
@@ -3011,11 +3549,28 @@ catch (e) {
       // remove() call (#1727).
       for (const [key, groups] of oldKeyMap) {
         if (!usedKeys.has(key)) {
-          const elements = groups.flat();
           // In a transition group, run the leave animation and let it remove the
           // node; otherwise remove immediately. Scopes are disposed up-front
           // either way (their destroy hooks shouldn't wait on a CSS transition).
-          elements.forEach(el => { disposeSubtreeScopes(el); if (!(tgReady && tgLeave(el, tgName))) el.remove(); });
+          groups.forEach((group) => {
+            if (tgReady) {
+              const liveNodes = liveGroupNodes(group);
+              const transitioned = new Set();
+              liveNodes.forEach((el) => {
+                disposeSubtreeScopes(el);
+                if (tgLeave(el, tgName)) transitioned.add(el);
+                else el.remove();
+              });
+              group.forEach((el) => {
+                if (transitioned.has(el) || liveNodes.includes(el)) return;
+                disposeSubtreeScopes(el);
+                el.remove();
+              });
+            }
+            else {
+              removeGroup(group);
+            }
+          });
           itemSignalMap.delete(key);
         }
       }
@@ -3214,9 +3769,26 @@ catch (e2) {
           (function (branch) {
             setTimeout(function () {
               var childScope = { ...globalHelpers, ...capturedComponentScope, ...(branch.capturedElementScope || {}) };
+              // Components compiled inside any branch of an if/else-if/else
+              // chain carry scoped setup scripts with them. Branch nodes are
+              // detached before those scripts can execute, so simply
+              // re-inserting the selected branch leaves component props,
+              // events, directives, and projected slot expressions inert.
+              // Hydrate those scopes before the normal subtree walk, matching
+              // the single-template :if and :for insertion paths.
+              var previouslyTrackedNodes = new Set();
+              branch.nodes.forEach(function (n) {
+                if (n && n.__stx_disposers) previouslyTrackedNodes.add(n);
+              });
+              hydrateComponentScopes(branch.nodes, childScope);
               branch.nodes.forEach(function (n) {
                 if (n.nodeType !== 1) return; // whitespace/text between template children
-                processElement(n, childScope);
+                // A scoped component receives its disposer in the outer scope
+                // walk immediately after processElement returns from binding
+                // this conditional. That first pass intentionally stops at
+                // :if, so a disposer does not mean its children were hydrated.
+                if (previouslyTrackedNodes.has(n) || !n.__stx_disposers)
+                  processElement(n, childScope);
                 n.removeAttribute('x-cloak');
                 n.querySelectorAll('[x-cloak]').forEach(function (c) { c.removeAttribute('x-cloak'); });
               });
@@ -3245,10 +3817,11 @@ catch (e2) {
 
     const placeholder = document.createComment('stx-if');
     let isInserted = true;
-    let currentNodes = [];
 
     // Handle <template> elements specially - clone their content
     const isTemplate = el.tagName === 'TEMPLATE';
+    const componentSetupSiblings = isTemplate ? [] : findConditionalComponentSetupSiblings(el);
+    let currentNodes = isTemplate ? [] : [el, ...componentSetupSiblings];
 
     // Capture BOTH element scope AND passedScope NOW before anything changes
     // passedScope may contain @for iteration variables or parent component signals
@@ -3323,6 +3896,28 @@ catch (e2) {
       childrenProcessed = true;
     };
 
+    // A <template :if> inserts clones of template.content rather than the
+    // template element itself. Those clones still need the normal directive
+    // and interpolation pass. Previously the initially-visible branch was
+    // inserted and left inert, so bindings such as :text and {{ expression }}
+    // leaked into the rendered UI until the condition toggled.
+    const processTemplateNodes = (nodes) => {
+      const childScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
+      // Components compiled inside a <template :if> carry setup scripts in the
+      // template content. Browser-cloned scripts are inert, so register their
+      // scopes and forwarded props before walking the inserted branch. This is
+      // the same component hydration path used by <template :for>.
+      hydrateComponentScopes(nodes, childScope);
+      nodes.forEach(node => {
+        if (!node.__stx_disposers && node.tagName !== 'SCRIPT')
+          processElement(node, childScope);
+        if (node.nodeType === 1) {
+          node.removeAttribute('x-cloak');
+          node.querySelectorAll('[x-cloak]').forEach(c => c.removeAttribute('x-cloak'));
+        }
+      });
+    };
+
     // Evaluate the :if expression \u2014 use direct signal read for simple refs,
     // falling back to evalExpr for complex expressions
     const fullScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
@@ -3351,16 +3946,8 @@ catch (e2) {
           currentNodes = Array.from(el.content.childNodes).map(n => n.cloneNode(true));
           const insertionAnchor = placeholder.nextSibling;
           currentNodes.forEach(node => parent.insertBefore(node, insertionAnchor));
-          // Process the new nodes \u2014 use LIVE componentScope so all functions are available
-          const childScope = { ...componentScope, ...(capturedElementScope || {}) };
-          currentNodes.forEach(node => {
-            if (node.nodeType === 1) {
-              processElement(node, childScope);
-              // Remove x-cloak from processed clones
-              node.removeAttribute('x-cloak');
-              node.querySelectorAll('[x-cloak]').forEach(c => c.removeAttribute('x-cloak'));
-            }
-          });
+          processTemplateNodes(currentNodes);
+          childrenProcessed = true;
           // Stamp insertion time for click propagation guard
           currentNodes.forEach(function(n) { if (n.nodeType === 1) n.__stx_shown_at = performance.now(); });
           isInserted = true;
@@ -3372,12 +3959,22 @@ else if (!value && isInserted) {
           currentNodes.forEach(node => node.remove());
           currentNodes = [];
           isInserted = false;
+          childrenProcessed = false;
+        }
+        else if (value && isInserted && !childrenProcessed) {
+          // Initial template content is cloned before the effect runs. Process
+          // it after the condition is confirmed so hidden branches stay inert.
+          childrenProcessed = true;
+          setTimeout(function() {
+            if (isInserted) processTemplateNodes(currentNodes);
+          }, 0);
         }
       }
 else {
         if (value && !isInserted) {
           console.log('[stx] bindIf INSERTING element for :if=' + expr);
-          parent.insertBefore(el, placeholder.nextSibling);
+          const insertionAnchor = placeholder.nextSibling;
+          currentNodes.forEach(node => parent.insertBefore(node, insertionAnchor));
           el.__stx_shown_at = performance.now();
           isInserted = true;
         }
@@ -3392,7 +3989,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.
-          el.remove();
+          currentNodes.forEach(node => node.remove());
           isInserted = false;
           console.log('[stx] bindIf REMOVED, el.isConnected:', el.isConnected);
         }
@@ -3407,7 +4004,15 @@ else if (!value && isInserted) {
           childrenProcessed = true;
           setTimeout(function() {
             var childScope = { ...globalHelpers, ...capturedComponentScope, ...(capturedElementScope || {}) };
-            processElement(el, childScope);
+            // A false single-element conditional is detached before the
+            // DOMContentLoaded component-scope pass. When it becomes visible,
+            // hydrate any component roots in the restored subtree first so
+            // projected slot bindings and component-local directives receive
+            // the same lifecycle as components inserted by template :if.
+            var wasTrackedBeforeConditionalHydration = !!el.__stx_disposers;
+            hydrateComponentScopes(currentNodes, childScope);
+            if (wasTrackedBeforeConditionalHydration || !el.__stx_disposers)
+              processElement(el, childScope);
             // Remove x-cloak from the inserted subtree \u2014 the initial
             // cloak removal (after processElement on the root) already
             // ran before this deferred processing, so newly-inserted
@@ -3542,6 +4147,15 @@ else if (timer === null) {
   }
 
   function useInterval(interval, options) {
+    // Accept the callback-first form too \u2014 useInterval(fn, 1000) is what most
+    // callers reach for, and silently ignoring the callback (the previous
+    // behaviour) produced a timer that ticked into the void.
+    var callback = null;
+    if (typeof interval === 'function') {
+      callback = interval;
+      interval = typeof options === 'number' ? options : 1000;
+      options = {};
+    }
     interval = interval || 1000;
     options = options || {};
     var count = 0;
@@ -3569,6 +4183,7 @@ else if (timer === null) {
       listeners.forEach(function(fn) { fn(count); });
       resume();
     }
+    if (callback) listeners.push(callback);
     resume();
     onDestroy(function() { pause(); listeners = []; });
     return {
@@ -3659,8 +4274,16 @@ else if (timer === null) {
   }
 
   function useClickOutside(target, handler) {
+    function resolveTarget() {
+      if (typeof target === 'string') return document.querySelector(target);
+      if (target && typeof target === 'object') {
+        if ('current' in target) return target.current;
+        if ('value' in target) return target.value;
+      }
+      return target;
+    }
     function listener(event) {
-      var el = typeof target === 'string' ? document.querySelector(target) : target;
+      var el = resolveTarget();
       if (!el) return;
       if (el === event.target || el.contains(event.target)) return;
       handler(event);
@@ -3707,6 +4330,15 @@ else if (timer === null) {
     };
   }
 
+  // Queue work after the current synchronous signal/effect flush. This mirrors
+  // the Composition API nextTick contract and gives template refs a chance to
+  // resolve after a structural directive inserts their elements.
+  function nextTick(fn) {
+    return Promise.resolve().then(function() {
+      if (fn) fn();
+    });
+  }
+
   function useAsync(fn, options) {
     options = options || {};
     var asyncState = 'idle';
@@ -3845,6 +4477,61 @@ catch (e) {}
     return matches;
   }
 
+  var scrollLockStates = new WeakMap();
+
+  function resolveScrollLockTarget(target) {
+    var value = target;
+    if (typeof value === 'function') value = value();
+    if (value && typeof value === 'object' && 'current' in value) value = value.current;
+    if (value && typeof value === 'object' && !value.nodeType && 'value' in value) value = value.value;
+    return value || document.body || document.documentElement;
+  }
+
+  function acquireScrollLock(element) {
+    if (!element) return;
+    var existing = scrollLockStates.get(element);
+    if (existing) {
+      existing.count += 1;
+      return;
+    }
+    scrollLockStates.set(element, { count: 1, overflow: element.style.overflow });
+    element.style.overflow = 'hidden';
+  }
+
+  function releaseScrollLock(element) {
+    if (!element) return;
+    var existing = scrollLockStates.get(element);
+    if (!existing) return;
+    existing.count -= 1;
+    if (existing.count > 0) return;
+    element.style.overflow = existing.overflow;
+    scrollLockStates.delete(element);
+  }
+
+  function useScrollLock(target) {
+    var locked = state(false);
+    var lockedElement = null;
+    var unsubscribe = locked.subscribe(function(value) {
+      if (value) {
+        if (lockedElement) return;
+        lockedElement = resolveScrollLockTarget(target);
+        acquireScrollLock(lockedElement);
+      }
+      else if (lockedElement) {
+        releaseScrollLock(lockedElement);
+        lockedElement = null;
+      }
+    });
+    onDestroy(function() {
+      unsubscribe();
+      if (lockedElement) {
+        releaseScrollLock(lockedElement);
+        lockedElement = null;
+      }
+    });
+    return locked;
+  }
+
   function usePreferredDark() { return useMediaQuery('(prefers-color-scheme: dark)'); }
   function usePreferredLight() { return useMediaQuery('(prefers-color-scheme: light)'); }
   function usePreferredReducedMotion() { return useMediaQuery('(prefers-reduced-motion: reduce)'); }
@@ -3932,6 +4619,30 @@ catch (e) {}
     return s;
   }
 
+  var __stxGeneratedIdCounter = 0;
+
+  // Stable, scope-aware DOM ids for component authoring. A component setup
+  // runs with window.__STX_CURRENT_ELEMENT__ pointing at its compiled root, so
+  // the data-stx scope id is already the canonical per-instance identity. The
+  // local counter supports multiple useId() calls in one component while the
+  // global fallback covers page scripts and manually-mounted roots.
+  function useId(prefix) {
+    var normalizedPrefix = String(prefix || 'stx')
+      .trim()
+      .replace(/[^a-zA-Z0-9_-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'stx';
+    var root = window.__STX_CURRENT_ELEMENT__;
+    if (root && root.getAttribute) {
+      var scopeId = root.getAttribute('data-stx-scope') || root.getAttribute('data-stx') || '';
+      if (scopeId) {
+        root.__stx_id_counter = (root.__stx_id_counter || 0) + 1;
+        return normalizedPrefix + '-' + String(scopeId).replace(/[^a-zA-Z0-9_-]+/g, '-') + '-' + root.__stx_id_counter;
+      }
+    }
+    __stxGeneratedIdCounter++;
+    return normalizedPrefix + '-' + __stxGeneratedIdCounter;
+  }
+
   // Reactive prop binding. Bridges the gap between a parent's clientReactive
   // attribute (e.g. :open="modalOpen()" on a component) and the component's
   // internal state. Returns a signal whose value tracks the named attribute
@@ -4018,7 +4729,19 @@ catch (e) {}
       var raw = attribute.raw;
       if (raw === lastRaw) return;
       lastRaw = raw;
-      var next = hasAttr ? parse(raw) : staticValue;
+      var directValues = root.__stx_direct_prop_values;
+      var directValue = directValues && directValues[name];
+      var next;
+      if (directValue && directValue.raw === raw) {
+        next = directValue.value;
+        delete directValues[name];
+        for (var directKey in directValues) {
+          if (directValues[directKey] === directValue) delete directValues[directKey];
+        }
+      }
+      else {
+        next = hasAttr ? parse(raw) : staticValue;
+      }
       if (next !== s()) s.set(next);
     });
     observer.observe(root, { attributes: true, attributeFilter: attributeNames });
@@ -4561,16 +5284,19 @@ catch (e) {}
     useCounter,
     useClickOutside,
     useFocus,
+    nextTick,
     useAsync,
     useLocalStorage,
     useSessionStorage,
     useCookie,
+    useId,
     useReactiveProp,
     useEventListener,
     useWebSocket,
     useColorMode,
     useDark,
     useMediaQuery,
+    useScrollLock,
     usePreferredDark,
     usePreferredLight,
     usePreferredReducedMotion,
@@ -4615,10 +5341,23 @@ catch (e) {}
       }
       return result;
     },
-    defineEmits: function() {
+    defineEmits: function(events) {
       var el = window.__STX_CURRENT_ELEMENT__ || null;
+      var declaredEvents = Array.isArray(events)
+        ? events
+        : (events && typeof events === 'object' ? Object.keys(events) : []);
+      if (el && declaredEvents.length) {
+        el.__stx_component_emits = el.__stx_component_emits || Object.create(null);
+        declaredEvents.forEach(function(event) {
+          el.__stx_component_emits[event] = true;
+        });
+      }
       return function(event, payload) {
         var target = el || document.body;
+        if (el) {
+          el.__stx_component_emits = el.__stx_component_emits || Object.create(null);
+          el.__stx_component_emits[event] = true;
+        }
         target.dispatchEvent(new CustomEvent(event, { detail: payload, bubbles: true, cancelable: true }));
       };
     },
@@ -5075,6 +5814,7 @@ else {
   window.useCounter = useCounter;
   window.useClickOutside = useClickOutside;
   window.useFocus = useFocus;
+  window.nextTick = nextTick;
   window.useAsync = useAsync;
   window.useLocalStorage = useLocalStorage;
   window.useEventListener = useEventListener;