@stacksjs/stx 0.2.155 → 0.2.157

package/dist/signals.js

@@ -3,13 +3,13 @@ import { runtimeHandledXAttrsLiteral } from "./runtime-globals.js";
 
 export * from "./signals-api.js";
 export function generateSignalsRuntime() {
+  const stripped = stripConsoleLog(generateSignalsRuntimeDev());
   try {
-    const stripped = stripConsoleLog(generateSignalsRuntimeDev());
     let minified = new Bun.Transpiler({ loader: "js", minifyWhitespace: !0 }).transformSync(stripped);
     minified = minified.replace(/\}(var |let |const |function )/g, "};$1");
     return minified;
   } catch {
-    return generateSignalsRuntimeDev();
+    return stripped;
   }
 }
 function stripConsoleLog(src) {
@@ -107,15 +107,118 @@ console.log('[stx] entering IIFE');
     } catch (e) { return '[unserializable]'; }
   }
   // Wraps fetch with timing + a timeline record (the data layer's queries).
+  // Turn a non-ok Response into an Error, reading the body FIRST.
+  //
+  // Every data primitive threw a synthesized 'HTTP nnn: statusText' before
+  // touching the body, so whatever the server actually said \u2014 a validation
+  // map, a rate-limit reason, an auth message \u2014 was unreachable from any stx
+  // primitive, with no escape hatch (stacksjs/stx#1848). That is the single
+  // most cited reason an app keeps writing raw fetch() calls.
+  //
+  // The body is attached rather than only interpolated: err.data is what a
+  // caller needs to render field errors, and err.status is what it needs to
+  // tell 401 from 500 without parsing the message.
+  async function __stxHttpError(response) {
+    var body = null;
+    var text = '';
+    try { text = await response.text(); } catch (e) { text = ''; }
+    if (text) {
+      try { body = JSON.parse(text); } catch (e) { body = text; }
+    }
+    var detail = '';
+    if (body && typeof body === 'object') detail = body.message || body.error || '';
+    else if (typeof body === 'string') detail = body.slice(0, 200);
+    var message = 'HTTP ' + response.status;
+    if (response.statusText) message += ': ' + response.statusText;
+    if (detail) message += ' - ' + detail;
+    var err = new Error(message);
+    err.status = response.status;
+    err.statusText = response.statusText;
+    err.data = body;
+    err.response = response;
+    return err;
+  }
+
+  // One place an app can reach the data layer. Every stx data primitive goes
+  // through __stxFetch, the only fetch call in this runtime, so a single pair
+  // of hooks covers useFetch, useQuery and useMutation (#1855).
+  //
+  // Without it there is no way to attach an Authorization header or notice a
+  // 401 in one place, which is the reason an app keeps hand-written fetch
+  // calls sitting next to the primitives that were meant to replace them.
+  //
+  // Hooks mutate the context they are handed and their return value is
+  // ignored \u2014 the ofetch shape most people will already know. Throwing from a
+  // hook fails the request, which is what a token-refresh flow wants.
+  var __stxFetchHooks = { onRequest: null, onResponse: null, onResponseError: null };
+
+  function configureFetch(cfg) {
+    cfg = cfg || {};
+    // Replace rather than stack: a module re-evaluated by hot reload or by a
+    // SPA script re-run must not end up with the same interceptor installed
+    // twice, sending two Authorization headers or counting a 401 twice.
+    __stxFetchHooks.onRequest = typeof cfg.onRequest === 'function' ? cfg.onRequest : null;
+    __stxFetchHooks.onResponse = typeof cfg.onResponse === 'function' ? cfg.onResponse : null;
+    // Fires for a non-ok response and for a thrown fetch (network error). If it
+    // returns a Response, that Response replaces the original \u2014 this is how a
+    // 401 -> refresh -> retry is expressed once instead of per call site. The
+    // retry itself belongs to the hook: it should refresh the token and re-issue
+    // the request with a plain fetch() (not this data layer) so it does not
+    // re-enter the hook and loop. Returning nothing lets the error stand.
+    __stxFetchHooks.onResponseError = typeof cfg.onResponseError === 'function' ? cfg.onResponseError : null;
+  }
+
+  // headers may be a function, so it can be evaluated per request rather than
+  // captured once \u2014 a token that changes between calls. Object spread over a
+  // function copies no own enumerable properties, so passing one used to
+  // contribute nothing at all, in silence.
+  function __stxHeaders(h) {
+    return (typeof h === 'function' ? h() : h) || {};
+  }
+
   async function __stxFetch(source, url, opts) {
     var t0 = __stxDevtoolsNow();
+    opts = opts || {};
+    if (__stxFetchHooks.onRequest) {
+      // Normalised first so a hook can write ctx.options.headers.Authorization
+      // without having to create the bag itself.
+      opts.headers = __stxHeaders(opts.headers);
+      var reqCtx = { source: source, url: String(url), options: opts };
+      await __stxFetchHooks.onRequest(reqCtx);
+      // Reassignable, so a hook can prefix a baseURL or swap the options
+      // wholesale instead of only mutating them.
+      if (reqCtx.url) url = reqCtx.url;
+      opts = reqCtx.options || opts;
+    }
     var method = (opts && opts.method) || 'GET';
+    // A hook may hand back a Response to use in place of the original. Anything
+    // else (a truthy non-Response, undefined) leaves the outcome unchanged.
+    function __stxIsResponse(v) { return !!v && typeof v.ok === 'boolean'; }
     try {
       var r = await fetch(url, opts);
       __stxDevtoolsRecordQuery({ source: source, url: String(url), method: method, status: r.status, ok: r.ok, ms: __stxDevtoolsNow() - t0 });
+      if (__stxFetchHooks.onResponse) {
+        await __stxFetchHooks.onResponse({ source: source, url: String(url), options: opts, response: r });
+      }
+      if (!r.ok && __stxFetchHooks.onResponseError) {
+        var recovered = await __stxFetchHooks.onResponseError({ source: source, url: String(url), options: opts, response: r, error: null });
+        if (__stxIsResponse(recovered)) {
+          __stxDevtoolsRecordQuery({ source: source, url: String(url), method: method, status: recovered.status, ok: recovered.ok, retried: true, ms: __stxDevtoolsNow() - t0 });
+          return recovered;
+        }
+      }
       return r;
     } catch (e) {
       __stxDevtoolsRecordQuery({ source: source, url: String(url), method: method, status: 0, ok: false, error: String((e && e.message) || e), ms: __stxDevtoolsNow() - t0 });
+      // A network-level failure (no Response) also reaches the hook, so a retry
+      // can cover a dropped connection, not only an auth status.
+      if (__stxFetchHooks.onResponseError) {
+        var recoveredErr = await __stxFetchHooks.onResponseError({ source: source, url: String(url), options: opts, response: null, error: e });
+        if (__stxIsResponse(recoveredErr)) {
+          __stxDevtoolsRecordQuery({ source: source, url: String(url), method: method, status: recoveredErr.status, ok: recoveredErr.ok, retried: true, ms: __stxDevtoolsNow() - t0 });
+          return recoveredErr;
+        }
+      }
       throw e;
     }
   }
@@ -303,6 +406,40 @@ else {
     });
   }
 
+  // A proxy for the WRITE side of x-model, kept separate from the read proxy
+  // on purpose.
+  //
+  // The read proxy returns a plain object as-is, which is right for reading \u2014
+  // ordinary data should stay ordinary. But it means an assignment lands on the
+  // raw object, so a signal held there gets REPLACED by the typed value rather
+  // than set (#1883). Descending through a write proxy instead keeps set-trap
+  // semantics all the way down, so the signal at the end of any path is set.
+  function createModelWriteProxy(target) {
+    return new Proxy(target, {
+      get(t, prop) {
+        var val = t[prop];
+        if (val && typeof val === 'function' && (val._isSignal || val._isDerived)) {
+          // Descend INTO the signal's value: x-model="form.email" over
+          // state({email}) must reach the object, not stamp a property onto
+          // the signal function itself.
+          var inner = val();
+          return (inner && typeof inner === 'object') ? createModelWriteProxy(inner) : inner;
+        }
+        if (val && typeof val === 'object') return createModelWriteProxy(val);
+        return val;
+      },
+      set(t, prop, value) {
+        var cur = t[prop];
+        if (cur && typeof cur === 'function' && cur._isSignal && typeof cur.set === 'function') {
+          cur.set(value);
+          return true;
+        }
+        t[prop] = value;
+        return true;
+      },
+    });
+  }
+
   // ==========================================================================
   // Pipe Syntax Support (Feature #2)
   // ==========================================================================
@@ -607,7 +744,16 @@ finally {
       activeEffect = runEffect;
       effectStack.push(runEffect);
       try {
-        cleanup = fn();
+        // Only a FUNCTION is a cleanup. An effect body is an expression as
+        // often as it is a block, and an expression has a value: an effect
+        // written as an arrow assigning to textContent returns the assigned
+        // string. Storing that and calling it on the next run threw
+        // "cleanup is not a function" from the line above \u2014 outside this try,
+        // so it escaped runEffect entirely and propagated out of whatever
+        // .set() triggered the notification, taking unrelated subscribers with
+        // it. Only ever on the second run, which is why it read as correct.
+        var __result = fn();
+        cleanup = typeof __result === 'function' ? __result : undefined;
       }
       catch (e) {
         // Auto-dispose effects that fail \u2014 prevents zombie subscriptions
@@ -745,6 +891,38 @@ finally {
     destroyCallbacks.push(fn);
   }
 
+  // Run mount callbacks and keep whatever teardown they hand back.
+  //
+  // A mount callback may return its own cleanup \u2014 the shape LifecycleCallback
+  // has always declared, and the shape every peer framework uses. Only the two
+  // component-factory paths honoured it; the other flush sites called fn() and
+  // dropped the result on the floor, so the teardown never ran and nothing said
+  // so. A listener or timer registered that way outlived its element and leaked
+  // once per re-render (#1857).
+  //
+  // The sink argument is where a returned cleanup is parked: a scoped flush
+  // passes that scope's __destroyCallbacks, a global flush passes the module
+  // queue. (No backticks in this comment \u2014 it lives inside a template literal.)
+  function runMountCallbacks(list, sink) {
+    if (!list || !list.length) return;
+    var target = sink || destroyCallbacks;
+    for (var i = 0; i < list.length; i++) {
+      try {
+        var cleanup = list[i]();
+        if (typeof cleanup === 'function') target.push(cleanup);
+      }
+      catch (e) { console.error('[stx] onMount error:', e); }
+    }
+  }
+
+  // The scope's own teardown queue, created on demand so a scope that never
+  // returns a cleanup does not carry an empty array around.
+  function scopeDestroySink(scopeVars) {
+    if (!scopeVars) return destroyCallbacks;
+    scopeVars.__destroyCallbacks = scopeVars.__destroyCallbacks || [];
+    return scopeVars.__destroyCallbacks;
+  }
+
   // 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; }
   if (window.__stx_early_destroys) { window.__stx_early_destroys.forEach(function(fn) { destroyCallbacks.push(fn); }); window.__stx_early_destroys = null; }
@@ -890,7 +1068,16 @@ finally {
     const error = state(null);
     if (options.suspense) registerSuspense(loading, error);
 
+    // A superseded or unmounted request must not resolve into a torn-down
+    // scope. Each run gets its own AbortController; a newer run (refetch or a
+    // reactive URL change) aborts the one before it, and onDestroy aborts the
+    // last in-flight one. State writes are guarded on signal.aborted (#1871).
+    let __stxAbort = null;
+
     const fetchData = async () => {
+      if (__stxAbort) __stxAbort.abort();
+      __stxAbort = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+      const __signal = __stxAbort ? __stxAbort.signal : undefined;
       loading.set(true);
       error.set(null);
 
@@ -905,8 +1092,9 @@ finally {
           method: options.method || 'GET',
           headers: {
             'Content-Type': 'application/json',
-            ...(options.headers || {})
-          }
+            ...__stxHeaders(options.headers)
+          },
+          signal: __signal
         };
 
         if (options.body) {
@@ -916,18 +1104,21 @@ finally {
         }
 
         const response = await __stxFetch('useFetch', url, fetchOptions);
+        if (__signal && __signal.aborted) return;
 
-        if (!response.ok) {
-          throw new Error(\`HTTP \${response.status}: \${response.statusText}\`);
-        }
+        if (!response.ok) throw await __stxHttpError(response);
 
         const result = await response.json();
+        if (__signal && __signal.aborted) return;
 
         // Apply transform if provided
         const transformed = options.transform ? options.transform(result) : result;
         data.set(transformed);
       }
 catch (e) {
+        // A superseded/unmounted request rejects with AbortError \u2014 expected,
+        // not a failure to surface. The run that superseded it owns the state.
+        if (e && e.name === 'AbortError') return;
         console.error('[STX] useFetch error:', e);
         // Store Error objects (not just messages) so consumers can use
         // .message, .stack, instanceof Error. Matches the composable's
@@ -936,7 +1127,8 @@ catch (e) {
         if (options.onError) options.onError(e);
       }
 finally {
-        loading.set(false);
+        // If a newer run (or onDestroy) aborted this one, that run owns loading.
+        if (!__signal || !__signal.aborted) loading.set(false);
       }
     };
 
@@ -962,6 +1154,10 @@ else if (immediate) {
       onMount(fetchData);
     }
 
+    // Abort an in-flight request when the owning scope is destroyed, so its
+    // resolution can't write into a torn-down component (#1871).
+    if (typeof onDestroy === 'function') onDestroy(function() { if (__stxAbort) __stxAbort.abort(); });
+
     return {
       data,
       loading,
@@ -1015,6 +1211,33 @@ else if (immediate) {
     else window.location.href = url;
   }
 
+  // Re-run the CURRENT route against the server and swap the result, keeping
+  // every client signal on the page alive.
+  //
+  // The router grew refresh()/invalidate() for this, but they lived only on
+  // window.stxRouter \u2014 nothing in the authoring surface reached them, so a
+  // <script client> block still had no way to say "the mutation changed what
+  // the server rendered". Apps kept calling location.reload() and threw away
+  // the state the SPA exists to preserve. See #1850.
+  //
+  // Degrades to a real reload when the router is absent (a page that never
+  // booted it, or a mid-boot call), mirroring how navigate() falls through to
+  // window.location.
+  function refresh() {
+    if (window.stxRouter && typeof window.stxRouter.refresh === 'function')
+      return window.stxRouter.refresh();
+    window.location.reload();
+    return Promise.resolve(false);
+  }
+
+  // Expire a cached route so the NEXT visit re-fetches it, without navigating
+  // now. Pairs with refresh(): refresh the page you are on, invalidate the ones
+  // your mutation also changed.
+  function invalidateRoute(url) {
+    if (window.stxRouter && typeof window.stxRouter.invalidate === 'function')
+      window.stxRouter.invalidate(url);
+  }
+
   function goBack() { window.history.back(); }
   function goForward() { window.history.forward(); }
 
@@ -1060,6 +1283,20 @@ else if (immediate) {
     };
   }
 
+  // Exported from src/runtime.ts, whose whole stated purpose is client-facing
+  // APIs that hide window internals \u2014 but never published on window.stx, so a
+  // client script importing them destructured undefined and threw on use. The
+  // capability was always here behind useRoute().params; only the documented
+  // names were unreachable (stacksjs/stx#1843).
+  function useRouteParams() {
+    return _routeParams();
+  }
+
+  function useRouteParam(name, fallback) {
+    var value = _routeParams()[name];
+    return value === undefined ? fallback : value;
+  }
+
   function useSearchParams() {
     var params = state(Object.fromEntries(new URLSearchParams(window.location.search)));
     var syncFromUrl = function() {
@@ -1136,6 +1373,13 @@ else if (immediate) {
   // ==========================================================================
 
   var _queryCache = {};
+  // Requests currently in flight, keyed exactly like _queryCache. _queryCache
+  // is written only after the body parses, so the whole in-flight window was a
+  // cache miss and N components mounting together issued N identical requests
+  // (#1869). Refcounted: a caller that loses interest must not cancel a
+  // response another caller is still waiting on.
+  var _queryInflight = {};
+  var __stxQueryInstance = 0;
 
   // Suspense registry (#1742). A query created with { suspense: true } pushes
   // { el, loading, error } here at creation time (which runs during partial-scope
@@ -1165,6 +1409,20 @@ else if (immediate) {
     var isStale = state(false);
     if (options.suspense) registerSuspense(loading, error);
 
+    // Per-run AbortController: a newer run aborts the previous in-flight one and
+    // onDestroy aborts the last, so a resolved request can't write into a
+    // torn-down scope (#1871).
+    var __stxAbort = null;
+    // Identity, so dedup can tell "another component wants this key" from
+    // "this component asked again". They must behave differently: joining is
+    // right for the first, and wrong for the second \u2014 refetch() after a
+    // mutation has to hit the network, not adopt the pre-mutation request that
+    // happens to still be open (#1869).
+    var __instanceId = ++__stxQueryInstance;
+    // The shared entry this instance is currently attached to, so superseding
+    // can release its claim without cancelling a request someone else joined.
+    var __joined = null;
+
     var fetchData = async function() {
       var resolvedUrl = typeof url === 'function' ? url() : url;
       if (!resolvedUrl) { loading.set(false); return; }
@@ -1186,13 +1444,69 @@ else if (immediate) {
         isStale.set(true);
       }
 
+      // Join a request ANOTHER instance already has open for this key. Not one
+      // of our own: this instance calling refetch() means "I want fresh data",
+      // and adopting its own pre-mutation request would silently return stale
+      // data \u2014 so an own-instance run still supersedes, exactly as #1871 says.
+      var shared = _queryInflight[key];
+      if (shared && shared.owner !== __instanceId) {
+        shared.refs++;
+        __joined = shared;
+        loading.set(true);
+        error.set(null);
+        try {
+          var joinedResult = await shared.promise;
+          var joinedTransformed = options.transform ? options.transform(joinedResult) : joinedResult;
+          data.set(joinedTransformed);
+          isStale.set(false);
+          if (options.onSuccess) options.onSuccess(joinedTransformed);
+        }
+        catch (e) {
+          if (e && e.name === 'AbortError') return;
+          error.set(e.message || 'Query failed');
+          if (options.onError) options.onError(e);
+        }
+        finally {
+          shared.refs--;
+          if (__joined === shared) __joined = null;
+          loading.set(false);
+        }
+        return;
+      }
+
+      // Superseding this instance's own run. Abort ONLY if nobody joined it \u2014
+      // cancelling a request another component is waiting on would leave it
+      // loading forever, which would turn #1871's fix into a worse bug.
+      if (__stxAbort) {
+        if (__joined && __joined.refs > 1) __joined.refs--;
+        else __stxAbort.abort();
+      }
+      __joined = null;
+      __stxAbort = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+      var __signal = __stxAbort ? __stxAbort.signal : undefined;
       loading.set(true);
       error.set(null);
       try {
-        var fetchOpts = { method: 'GET', headers: { 'Content-Type': 'application/json', ...(options.headers || {}) } };
-        var response = await __stxFetch('useQuery', resolvedUrl, fetchOpts);
-        if (!response.ok) throw new Error('HTTP ' + response.status + ': ' + response.statusText);
-        var result = await response.json();
+        var fetchOpts = { method: 'GET', headers: { 'Content-Type': 'application/json', ...__stxHeaders(options.headers) }, signal: __signal };
+        // Published BEFORE it is awaited, so a caller starting in the same tick
+        // finds it. The network part only \u2014 transform, cache write and
+        // onSuccess stay per-caller, since each may transform differently.
+        var netPromise = (async function() {
+          var response = await __stxFetch('useQuery', resolvedUrl, fetchOpts);
+          if (!response.ok) throw await __stxHttpError(response);
+          return await response.json();
+        })();
+        var entry = { owner: __instanceId, refs: 1, controller: __stxAbort, promise: netPromise };
+        _queryInflight[key] = entry;
+        __joined = entry;
+        // Cleared on settle, both ways. A settled entry left behind would turn
+        // dedup into a permanent cache and no request for this key would ever
+        // be issued again.
+        var releaseEntry = function() { if (_queryInflight[key] === entry) delete _queryInflight[key]; };
+        netPromise.then(releaseEntry, releaseEntry);
+
+        var result = await netPromise;
+        if (__signal && __signal.aborted) return;
         var transformed = options.transform ? options.transform(result) : result;
         data.set(transformed);
         isStale.set(false);
@@ -1202,11 +1516,14 @@ else if (immediate) {
         setTimeout(function() { delete _queryCache[key]; }, cacheTime);
       }
 catch (e) {
+        // A superseded/unmounted request rejects with AbortError \u2014 expected;
+        // the run that superseded it owns the state (#1871).
+        if (e && e.name === 'AbortError') return;
         error.set(e.message || 'Query failed');
         if (options.onError) options.onError(e);
       }
 finally {
-        loading.set(false);
+        if (!__signal || !__signal.aborted) loading.set(false);
       }
     };
 
@@ -1226,12 +1543,25 @@ finally {
       onDestroy(function() { document.removeEventListener('visibilitychange', onVisibility); });
     }
 
-    // refetchInterval
+    // refetchInterval: poll only while the tab is visible and (if given)
+    // enabled holds; optionally stop after an error so a broken endpoint is
+    // not hammered every interval in a backgrounded tab (#1870).
     if (options.refetchInterval) {
-      var intervalId = setInterval(fetchData, options.refetchInterval);
+      var intervalId = setInterval(function() {
+        if (typeof document !== 'undefined' && document.hidden) return;
+        var en = options.enabled;
+        if (typeof en === 'function' ? !en() : en === false) return;
+        var p = fetchData();
+        if (options.stopOnError && p && typeof p.then === 'function') {
+          p.then(function() { if (error()) clearInterval(intervalId); });
+        }
+      }, options.refetchInterval);
       onDestroy(function() { clearInterval(intervalId); });
     }
 
+    // Abort an in-flight request when the owning scope is destroyed (#1871).
+    onDestroy(function() { if (__stxAbort) __stxAbort.abort(); });
+
     return {
       data: data,
       loading: loading,
@@ -1267,11 +1597,11 @@ finally {
         var resolvedUrl = typeof url === 'function' ? url() : url;
         var fetchOpts = {
           method: options.method || 'POST',
-          headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
+          headers: { 'Content-Type': 'application/json', ...__stxHeaders(options.headers) },
           body: typeof body === 'string' ? body : JSON.stringify(body)
         };
         var response = await __stxFetch('useMutation', resolvedUrl, fetchOpts);
-        if (!response.ok) throw new Error('HTTP ' + response.status + ': ' + response.statusText);
+        if (!response.ok) throw await __stxHttpError(response);
         var result = await response.json();
         var transformed = options.transform ? options.transform(result) : result;
         data.set(transformed);
@@ -1611,7 +1941,7 @@ catch (e) {
         var sv = sid && window.stx._scopes ? window.stx._scopes[sid] : null;
         if (sv && sv.__mountCallbacks && !sv.__mounted) {
           sv.__mounted = true;
-          sv.__mountCallbacks.forEach(function(fn) { try { fn(); } catch (e) { console.error('[stx] onMount error:', e); } });
+          runMountCallbacks(sv.__mountCallbacks, scopeDestroySink(sv));
         }
         window.dispatchEvent(new CustomEvent('stx:hydrated', { detail: { el: el, trigger: trigger } }));
       };
@@ -2697,8 +3027,22 @@ catch (e) {
           capturedScope[expr].set(val);
         }
 else {
-          const fn = new Function(...Object.keys(capturedScope), 'v', expr + ' = v');
-          fn(...Object.values(capturedScope), val);
+          // Write through the SAME auto-unwrap proxy the read path uses.
+          //
+          // This used to destructure the scope into plain parameters, so an
+          // lvalue like store.title assigned onto the raw object and REPLACED
+          // the signal with a raw string. Everything else bound to that signal
+          // stopped updating, its .set was gone so the next write threw
+          // TypeError, and nothing warned \u2014 the field the user typed into was
+          // the only thing on the page that still looked right (#1883).
+          //
+          // The proxy's set trap already did the correct thing (call .set on a
+          // signal-valued property) and was simply never reached from here.
+          // Routing through it also drops the old requirement that every scope
+          // key be a valid identifier, since nothing is destructured now.
+          var writeScope = createModelWriteProxy(capturedScope);
+          var writeFn = new Function('__scope__', '__v__', 'with(__scope__) { ' + expr + ' = __v__ }');
+          writeFn(writeScope, val);
         }
       }
 catch (e) {
@@ -3178,10 +3522,7 @@ else if (typeof value === 'string') {
       });
       if (scopeVars.__mountCallbacks && !scopeVars.__mounted) {
         scopeVars.__mounted = true;
-        scopeVars.__mountCallbacks.forEach(function(fn) {
-          try { fn(); }
-          catch (e) { console.error('[stx] onMount error:', e); }
-        });
+        runMountCallbacks(scopeVars.__mountCallbacks, scopeDestroySink(scopeVars));
       }
     });
   }
@@ -3631,6 +3972,27 @@ catch (e) {
       const newGroups = [];
       const usedKeys = new Set();
 
+      // Minimal-move reconciliation.
+      //
+      // Every reused row used to be round-tripped through a DocumentFragment,
+      // and appendChild into a fragment DETACHES the node from the document
+      // first. Removing a focused node blurs it and resets activeElement, so a
+      // list could not contain a field the user was typing in: any write to the
+      // backing array kicked them out of it, losing caret, selection and undo
+      // history. It happened for every row unconditionally, including rows that
+      // had not moved, and unkeyed loops took the same path because getItemKey
+      // falls back to the index (#1882).
+      //
+      // The cursor walks the existing rendering in order. A node already at the
+      // cursor is left ENTIRELY alone \u2014 an unchanged list now performs zero DOM
+      // operations \u2014 and a node that genuinely has to move is moved with
+      // insertBefore, which relocates it without a detach/reattach cycle.
+      let cursor = null;
+      for (let ci = 0; ci < currentGroups.length && !cursor; ci++) {
+        const seed = liveGroupNodes(currentGroups[ci] || []);
+        if (seed.length) cursor = seed[0];
+      }
+
       for (let i = 0; i < list.length; i++) {
         const key = newKeys[i];
         const existing = oldKeyMap.get(key);
@@ -3643,9 +4005,20 @@ catch (e) {
           // must not resurrect that hidden node.
           const group = existing.shift();
           const liveNodes = liveGroupNodes(group);
-          const fragment = document.createDocumentFragment();
-          liveNodes.forEach(groupNode => fragment.appendChild(groupNode));
-          parent.insertBefore(fragment, placeholder);
+          for (let li = 0; li < liveNodes.length; li++) {
+            const groupNode = liveNodes[li];
+            if (groupNode === cursor) {
+              // Already exactly where it belongs. Touching it here is what
+              // used to blur it, so the correct action is to do nothing.
+              cursor = cursor.nextSibling;
+            }
+            else {
+              // Moves without detaching. The cursor does not advance: this node
+              // is now behind it, and the cursor still marks the next position
+              // to fill.
+              parent.insertBefore(groupNode, cursor || placeholder);
+            }
+          }
           newElements.push(...group);
           newGroups.push(group);
           usedKeys.add(key);
@@ -3661,7 +4034,10 @@ catch (e) {
           // 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);
+            // Before the cursor, not before the placeholder: a new row inserted
+            // in the MIDDLE of the list must land at its own position, without
+            // forcing every row after it to be moved to get back in order.
+            parent.insertBefore(el, cursor || placeholder);
             if (tgReady && el.isConnected) tgEnter(el, tgName);
           });
           hydrateComponentScopes(elements, elements.find(function(node) {
@@ -4307,15 +4683,23 @@ else if (timer === null) {
     return throttled;
   }
 
-  function useInterval(interval, options) {
+  function useInterval(interval, options, thirdOptions) {
     // 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.
+    // behaviour) produced a timer that ticked into the void. An options object
+    // may follow the interval \u2014 useInterval(fn, 1000, { enabled, whileVisible })
+    // \u2014 or replace it \u2014 useInterval(fn, { enabled }) (#1870).
     var callback = null;
     if (typeof interval === 'function') {
       callback = interval;
-      interval = typeof options === 'number' ? options : 1000;
-      options = {};
+      if (typeof options === 'number') {
+        interval = options;
+        options = thirdOptions || {};
+      }
+      else {
+        interval = 1000;
+        options = (options && typeof options === 'object') ? options : {};
+      }
     }
     interval = interval || 1000;
     options = options || {};
@@ -4323,7 +4707,18 @@ else if (timer === null) {
     var id = null;
     var running = false;
     var listeners = [];
+    // A tick is skipped (not counted, listeners not called) while the timer is
+    // gated off: enabled is false / returns false, or whileVisible is set
+    // and the document is hidden. This makes "run only while authorized and
+    // visible" expressible without the caller hand-pausing the timer (#1870).
+    function shouldTick() {
+      if (options.whileVisible && typeof document !== 'undefined' && document.hidden) return false;
+      var en = options.enabled;
+      if (typeof en === 'function') return !!en();
+      return en !== false;
+    }
     function tick() {
+      if (!shouldTick()) return;
       count++;
       listeners.forEach(function(fn) { fn(count); });
     }
@@ -4786,7 +5181,68 @@ catch (e) {} }
 
   // Vue-compat aliases
   var ref = state;
-  var reactive = state;
+
+  // reactive() used to be a bare alias of state(), which made it the most
+  // dangerous name in the runtime. state({n:0}) returns a SIGNAL, so the Vue
+  // shape everyone reaches for silently did nothing:
+  //
+  //   const s = reactive({ count: 0 })
+  //   s.count            // undefined \u2014 a signal has no such property
+  //   s.count++          // writes an expando onto a function object
+  //   {{ s.count }}      // renders empty, forever, with no warning
+  //
+  // Backed by one signal PER PROPERTY, created on first touch. That is what
+  // makes a read inside an effect track only the field it read, so writing
+  // b does not re-run an effect that only read a (#1885).
+  var __stxReactiveProxies = new WeakMap();
+
+  function reactive(target) {
+    // Primitives have no properties to track. Returning them unchanged keeps
+    // reactive(0) from silently becoming an object.
+    if (!target || typeof target !== 'object') return target;
+    var existing = __stxReactiveProxies.get(target);
+    if (existing) return existing;
+
+    var propSignals = Object.create(null);
+    function signalFor(prop) {
+      if (!propSignals[prop]) propSignals[prop] = state(target[prop]);
+      return propSignals[prop];
+    }
+
+    var proxy = new Proxy(target, {
+      get: function(t, prop, receiver) {
+        // Symbols and inherited members are plumbing \u2014 toJSON, Symbol.iterator,
+        // array methods. Tracking them would create a signal per method lookup
+        // and make every effect depend on the whole object.
+        if (typeof prop === 'symbol' || !Object.prototype.hasOwnProperty.call(t, prop))
+          return Reflect.get(t, prop, receiver);
+        var value = signalFor(prop)();
+        // Nested objects are wrapped too, and cached in the WeakMap, so
+        // identity is stable across reads \u2014 a fresh proxy each time would
+        // break === comparisons and defeat keyed list reuse.
+        return (value && typeof value === 'object') ? reactive(value) : value;
+      },
+      set: function(t, prop, value) {
+        if (typeof prop === 'symbol') return Reflect.set(t, prop, value);
+        var had = Object.prototype.hasOwnProperty.call(t, prop);
+        t[prop] = value;
+        // Write the plain target FIRST so a signal created later reads the
+        // current value, then notify anyone already watching this property.
+        if (propSignals[prop]) propSignals[prop].set(value);
+        else if (had) signalFor(prop);
+        return true;
+      },
+      deleteProperty: function(t, prop) {
+        var had = Object.prototype.hasOwnProperty.call(t, prop);
+        delete t[prop];
+        if (had && propSignals[prop]) propSignals[prop].set(undefined);
+        return true;
+      },
+    });
+
+    __stxReactiveProxies.set(target, proxy);
+    return proxy;
+  }
   var computed = derived;
   var watch = $watch;
   var watchEffect = function(fn) { return effect(fn); };
@@ -5321,7 +5777,22 @@ catch (e) {} }
     var confirmText = opts.confirmText || 'OK';
     var cancelText = opts.cancelText || 'Cancel';
     var id = 'stx-dialog-' + (++_dialogId);
-    var isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // Resolve dark from what the APP decided, not only from the OS. stx's own
+    // color-mode boot writes a class (default 'dark') and/or an attribute
+    // (e.g. data-theme) onto <html>, so an app pinned to light on a dark OS used
+    // to get a dark dialog over a light page. An explicit opts.dark wins over
+    // both, and the media query stays as the last resort. See #1875.
+    var _root = document.documentElement;
+    var _attrTheme = _root.getAttribute('data-theme') || _root.getAttribute('data-color-mode');
+    var isDark = opts.dark != null
+      ? !!opts.dark
+      : _root.classList.contains('dark')
+        ? true
+        : _attrTheme === 'dark'
+          ? true
+          : _attrTheme === 'light'
+            ? false
+            : !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
     var bg = isDark ? '#1f2937' : '#ffffff';
     var textColor = isDark ? '#f3f4f6' : '#1f2937';
     var subColor = isDark ? '#9ca3af' : '#6b7280';
@@ -5344,23 +5815,45 @@ catch (e) {} }
 
       if (title) {
         var titleEl = document.createElement('h3');
+        titleEl.id = id + '-title';
         titleEl.style.cssText = 'margin:0 0 0.5rem;font-size:1.125rem;font-weight:600';
         titleEl.textContent = title;
         panel.appendChild(titleEl);
+        // role=alertdialog was announced with no accessible name at all.
+        backdrop.setAttribute('aria-labelledby', titleEl.id);
       }
 
       var msgEl = document.createElement('p');
+      msgEl.id = id + '-message';
       msgEl.style.cssText = 'margin:0 0 1.25rem;font-size:0.875rem;line-height:1.5;color:' + subColor;
       msgEl.textContent = message;
       panel.appendChild(msgEl);
+      backdrop.setAttribute('aria-describedby', msgEl.id);
+      if (!title)
+        backdrop.setAttribute('aria-label', message);
 
       var btnRow = document.createElement('div');
       btnRow.style.cssText = 'display:flex;gap:0.75rem;justify-content:center';
 
+      // Captured before the dialog steals focus, so it can be handed back on
+      // close. Without this a keyboard or screen-reader user is dropped at the
+      // top of the document every time a dialog closes.
+      var previouslyFocused = document.activeElement;
+      var closed = false;
+
       function cleanup(result) {
+        // Guarded: the escape handler used to be able to fire after a button had
+        // already closed the dialog, because the listener outlived it.
+        if (closed) return;
+        closed = true;
+        document.removeEventListener('keydown', keyHandler, true);
         backdrop.style.opacity = '0';
         panel.style.transform = 'scale(0.95)';
         setTimeout(function() { backdrop.remove(); }, 200);
+        if (previouslyFocused && typeof previouslyFocused.focus === 'function') {
+          try { previouslyFocused.focus(); }
+          catch (_e) { /* element may be gone; not worth failing the dialog over */ }
+        }
         resolve(result);
       }
 
@@ -5392,11 +5885,45 @@ catch (e) {} }
       backdrop.style.opacity = '1';
       panel.style.transform = 'scale(1)';
 
-      // Escape key
-      var escHandler = function(e) {
-        if (e.key === 'Escape') { cleanup(isConfirm ? false : undefined); document.removeEventListener('keydown', escHandler); }
+      // Escape, plus a real focus trap.
+      //
+      // The old handler removed itself ONLY inside the Escape branch, so every
+      // dialog dismissed with a button left a permanent keydown listener on
+      // document holding this whole closure \u2014 backdrop, panel and resolve \u2014 alive.
+      // Removal now lives in cleanup(), which every exit path goes through.
+      //
+      // aria-modal="true" was already being claimed on the backdrop while Tab
+      // walked straight out into the page behind it. Capture phase so the trap
+      // wins over anything the page has bound.
+      var keyHandler = function(e) {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          cleanup(isConfirm ? false : undefined);
+          return;
+        }
+        if (e.key !== 'Tab') return;
+        var focusable = panel.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (!focusable.length) return;
+        var first = focusable[0];
+        var last = focusable[focusable.length - 1];
+        // Focus may sit outside the panel entirely (the page had it when the
+        // dialog opened), in which case Tab must pull it back in rather than
+        // continue through the document.
+        if (!panel.contains(document.activeElement)) {
+          e.preventDefault();
+          (e.shiftKey ? last : first).focus();
+          return;
+        }
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
       };
-      document.addEventListener('keydown', escHandler);
+      document.addEventListener('keydown', keyHandler, true);
 
       // Focus the primary button
       okBtn.focus();
@@ -5526,7 +6053,7 @@ catch (e) {} }
       el.__stx_disposers = trackEffects(function() { processElement(el, componentScope); });
       if (scopeVars.__mountCallbacks && !scopeVars.__mounted) {
         scopeVars.__mounted = true;
-        scopeVars.__mountCallbacks.forEach(function(fn) { try { fn(); } catch (e) { console.error('[stx] onMount error:', e); } });
+        runMountCallbacks(scopeVars.__mountCallbacks, scopeDestroySink(scopeVars));
       }
     });
     // 3. Bind directives across the subtree.
@@ -5537,7 +6064,7 @@ catch (e) {} }
     if (mountCallbacks.length) {
       var cbs = mountCallbacks.slice();
       mountCallbacks.length = 0;
-      cbs.forEach(function(fn) { try { fn(); } catch (e) { console.error('[stx] mount error:', e); } });
+      runMountCallbacks(cbs, destroyCallbacks);
     }
     window.dispatchEvent(new CustomEvent('stx:hydrated', { detail: { el: container, trigger: 'stream' } }));
   }
@@ -5571,13 +6098,18 @@ catch (e) {} }
     useFetch,
     useRef,
     navigate,
+    refresh,
+    invalidateRoute,
     goBack,
     goForward,
     useRoute,
+    useRouteParams,
+    useRouteParam,
     setRouteParams,
     useSearchParams,
     useQuery,
     useMutation,
+    configureFetch,
     useOptimistic,
     provide,
     $computed,
@@ -5701,8 +6233,11 @@ catch (e) {} }
 
     defineStore: function(id, setupOrOptions, storeOptions) {
       console.log('[stx:store] defineStore called:', id, 'type:', typeof setupOrOptions === 'function' ? 'setup' : 'options', 'persist:', !!(storeOptions && storeOptions.persist));
-      // Return existing store if already defined
-      if (window.stx._stores.has(id)) {
+      // Return existing store if already defined.
+      //
+      // During a store HMR pass the definition is deliberately re-run, so the
+      // cached instance must NOT short-circuit it (#1877 ask 4).
+      if (window.stx._stores.has(id) && !window.stx.__hmrStoreReplacing) {
         console.log('[stx:store] returning existing store:', id);
         return window.stx._stores.get(id);
       }
@@ -5842,18 +6377,72 @@ catch (e) {} }
       if (persistCfg) {
         var pOpts = persistCfg === true ? {} : persistCfg;
         var storageKey = pOpts.key || ('stx-store-' + id);
-        var storageType = pOpts.storage === 'sessionStorage' ? sessionStorage : localStorage;
         var pick = pOpts.pick || null;
 
+        // Three additions, all of which apps previously had to hand-roll outside
+        // the store entirely (#1872):
+        //
+        //   keys        map a field to its OWN storage key, and optionally its own
+        //               backend, instead of folding everything into one JSON blob
+        //   serialize   / deserialize \u2014 the codec was hardcoded to JSON, so a
+        //               persisted string came back quoted. A signed-out token
+        //               stored as '""' is two characters and TRUTHY, which is a
+        //               real class of auth bug, and a legacy raw value could not
+        //               be read at all
+        //   cookie      a backend the SERVER can read. Server-rendered,
+        //               owner-scoped pages authenticate from a cookie and cannot
+        //               see localStorage, so this previously meant a second
+        //               persisted signal plus a hand-written mirroring effect
+        var fieldMap = pOpts.keys || null;
+        var defaultSerialize = pOpts.serialize || function(value) { return JSON.stringify(value); };
+        var defaultDeserialize = pOpts.deserialize || function(raw) { return JSON.parse(raw); };
+
+        // 'local' and 'localStorage' both accepted; the old code only recognised
+        // 'sessionStorage', so 'session' silently fell through to localStorage.
+        // Resolved through window when the bare global is absent, so persist also
+        // works where the runtime is evaluated outside a page's global scope
+        // (component test harnesses, embedded runtimes).
+        function _backendFor(kind) {
+          if (kind === 'cookie') return 'cookie';
+          var scope = typeof window !== 'undefined' ? window : null;
+          if (kind === 'session' || kind === 'sessionStorage')
+            return typeof sessionStorage !== 'undefined' ? sessionStorage : (scope && scope.sessionStorage);
+          return typeof localStorage !== 'undefined' ? localStorage : (scope && scope.localStorage);
+        }
+        var storageType = _backendFor(pOpts.storage);
+
+        // Resolved config for a field that has its own key, or null if it belongs
+        // in the shared blob.
+        function _mappedConfig(field) {
+          if (!fieldMap || !Object.prototype.hasOwnProperty.call(fieldMap, field)) return null;
+          var cfg = fieldMap[field];
+          if (typeof cfg === 'string') cfg = { key: cfg };
+          cfg = cfg || {};
+          return {
+            key: cfg.key || field,
+            backend: _backendFor(cfg.storage === undefined ? pOpts.storage : cfg.storage),
+            cookieOpts: cfg,
+            serialize: cfg.serialize || defaultSerialize,
+            deserialize: cfg.deserialize || defaultDeserialize
+          };
+        }
+
+        // A mapped field owns its key, so it must NOT also be written into the
+        // blob \u2014 otherwise it round-trips through two places that can disagree.
+        function _inBlob(field) {
+          if (pick && pick.indexOf(field) === -1) return false;
+          return !_mappedConfig(field);
+        }
+
         // Read persisted state (overrides hydration)
         try {
-          var saved = storageType.getItem(storageKey);
+          var saved = storageType === 'cookie' ? null : storageType.getItem(storageKey);
           if (saved) {
-            var parsed = JSON.parse(saved);
+            var parsed = defaultDeserialize(saved);
             console.log('[stx:store] restoring persisted state:', id, 'key:', storageKey, Object.keys(parsed));
             batch(function() {
               for (var pk in parsed) {
-                if (result[pk] && result[pk]._isSignal && (!pick || pick.indexOf(pk) !== -1)) {
+                if (result[pk] && result[pk]._isSignal && _inBlob(pk)) {
                   result[pk].set(parsed[pk]);
                 }
               }
@@ -5863,21 +6452,73 @@ catch (e) {} }
           }
         } catch(e) { console.warn('[stx:store] persistence read error:', id, e); }
 
+        // Per-field persistence: own key, own backend, own codec.
+        //
+        // The disposer swap is the same trick the blob effect below uses \u2014 these
+        // effects must outlive the component that happened to instantiate the
+        // store, or persistence would stop the first time that component
+        // unmounted.
+        var prevFieldDisposers = activeDisposers;
+        activeDisposers = null;
+        if (fieldMap) {
+          for (var fk in fieldMap) {
+            if (!Object.prototype.hasOwnProperty.call(fieldMap, fk)) continue;
+            if (!result[fk] || !result[fk]._isSignal) {
+              console.warn('[stx:store] persist.keys names a field that is not a signal:', id, fk);
+              continue;
+            }
+            (function(field, cfg, signal) {
+              if (cfg.backend === 'cookie') {
+                // useCookie owns path / max-age / SameSite / Secure, so cookie
+                // attributes do not have to be reimplemented here. It is a
+                // string-valued signal, hence serialize on the way out.
+                var cookieSignal = useCookie(cfg.key, cfg.cookieOpts);
+                var initialCookie = cookieSignal();
+                if (initialCookie !== '' && initialCookie != null) {
+                  try { signal.set(cfg.deserialize(initialCookie)); }
+                  catch(e) { console.warn('[stx:store] persist read error:', id, field, e); }
+                }
+                effect(function() {
+                  var next = signal();
+                  try { cookieSignal.set(next == null ? '' : String(cfg.serialize(next))); }
+                  catch(e) { console.warn('[stx:store] persist write error:', id, field, e); }
+                });
+                return;
+              }
+              try {
+                var rawValue = cfg.backend.getItem(cfg.key);
+                if (rawValue !== null) signal.set(cfg.deserialize(rawValue));
+              } catch(e) { console.warn('[stx:store] persist read error:', id, field, e); }
+              effect(function() {
+                var value = signal();
+                try { cfg.backend.setItem(cfg.key, String(cfg.serialize(value))); }
+                catch(e) { console.warn('[stx:store] persist write error:', id, field, e); }
+              });
+            })(fk, _mappedConfig(fk), result[fk]);
+          }
+        }
+        activeDisposers = prevFieldDisposers;
+
         // Write on change (debounced)
         var writeTimer = null;
         var prevPersistDisposers = activeDisposers;
         activeDisposers = null;
         effect(function() {
           var snapshot = {};
+          var wrote = false;
           for (var wk in result) {
-            if (result[wk] && result[wk]._isSignal && (!pick || pick.indexOf(wk) !== -1)) {
+            if (result[wk] && result[wk]._isSignal && _inBlob(wk)) {
               snapshot[wk] = result[wk]();
+              wrote = true;
             }
           }
+          // With every field mapped to its own key there is no blob left, and
+          // writing an empty object would clobber whatever else owns that key.
+          if (!wrote || storageType === 'cookie') return;
           if (writeTimer) clearTimeout(writeTimer);
           writeTimer = setTimeout(function() {
             console.log('[stx:store] persisting:', id, 'key:', storageKey, Object.keys(snapshot));
-            try { storageType.setItem(storageKey, JSON.stringify(snapshot)); } catch(e) { console.warn('[stx:store] persist write error:', id, e); }
+            try { storageType.setItem(storageKey, String(defaultSerialize(snapshot))); } catch(e) { console.warn('[stx:store] persist write error:', id, e); }
           }, 100);
         });
         activeDisposers = prevPersistDisposers;
@@ -5889,6 +6530,26 @@ catch (e) {} }
       // keep working); only template expression evaluation auto-unwraps.
       result._isStxStore = true;
 
+      // Carry state across a hot replacement.
+      //
+      // The NEW store object is kept rather than patching the old one: a
+      // setup-style store's actions close over the signals created in that
+      // same run, so keeping the old signals would leave the new actions
+      // writing to signals nothing is watching \u2014 an edit that appears to do
+      // nothing, which is worse than the reload this replaces. Seeding the new
+      // signals with the old values keeps state and behaviour consistent, and
+      // the caller re-renders afterwards so components rebind to this object.
+      var seed = window.stx.__hmrStoreSeed && window.stx.__hmrStoreSeed[id];
+      if (seed) {
+        for (var seedKey in seed) {
+          var target = result[seedKey];
+          if (target && target._isSignal && typeof target.set === 'function' && !target._isDerived) {
+            try { target.set(seed[seedKey]); }
+            catch (e) { /* shape changed across the edit \u2014 keep the new default */ }
+          }
+        }
+      }
+
       // Register globally
       window.stx._stores.set(id, result);
       window.__STX_STORES__ = window.__STX_STORES__ || {};
@@ -5898,6 +6559,55 @@ catch (e) {} }
       return result;
     },
 
+    // Replace the store definitions in place, keeping their state \u2014 the
+    // acceptHMRUpdate contract (#1877 ask 4). Called by the dev server's HMR
+    // client when a file under storesDir changes, instead of reloading the
+    // document and throwing away everything the SPA exists to preserve.
+    __hmrReplaceStores: function(code) {
+      var seed = {};
+      window.stx._stores.forEach(function(store, id) {
+        var values = {};
+        for (var key in store) {
+          var value = store[key];
+          // Derived values recompute from state, so seeding them would fight
+          // their own recomputation.
+          if (value && value._isSignal && !value._isDerived) {
+            try { values[key] = value.peek ? value.peek() : value(); }
+            catch (e) { /* unreadable \u2014 let the new default stand */ }
+          }
+        }
+        seed[id] = values;
+      });
+
+      window.stx.__hmrStoreSeed = seed;
+      window.stx.__hmrStoreReplacing = true;
+      var ok = true;
+      try {
+        // Indirect eval, so the bundle evaluates at global scope the way it
+        // does when inlined into the page.
+        (0, eval)(code);
+      }
+      catch (e) {
+        ok = false;
+        console.error('[stx:hmr] store bundle failed to evaluate:', e);
+      }
+      finally {
+        window.stx.__hmrStoreReplacing = false;
+        window.stx.__hmrStoreSeed = null;
+      }
+
+      if (!ok) return false;
+
+      // Components captured the PREVIOUS store object from useStore(), so
+      // re-render the route to rebind them. Still not a document reload: the
+      // swap keeps every non-store signal on the page alive.
+      if (window.stxRouter && typeof window.stxRouter.refresh === 'function') {
+        try { window.stxRouter.refresh(); }
+        catch (e) { /* a refresh that cannot run is not worth a reload here */ }
+      }
+      return true;
+    },
+
     registerStoresClient: function(stores) {
       window.__STX_STORES__ = window.__STX_STORES__ || {};
       var names = Object.keys(stores || {});
@@ -6154,7 +6864,7 @@ else {
   window.defineStore = window.stx.defineStore;
   window.useStore = window.stx.useStore;
   window.ref = state;
-  window.reactive = state;
+  window.reactive = reactive;
   window.computed = derived;
   window.watch = $watch;
   window.watchEffect = function(fn) { return effect(fn); };
@@ -6374,7 +7084,7 @@ else {
       el.removeAttribute('x-cloak');
       el.querySelectorAll('[x-cloak]').forEach(function(c) { c.removeAttribute('x-cloak'); });
 
-      mountCallbacks.forEach(fn => fn());
+      runMountCallbacks(mountCallbacks, destroyCallbacks);
     });
 
     // Multi-root fragment fix: a no-body> setup page tags only the FIRST
@@ -6463,16 +7173,14 @@ else {
       var scopeDeferred = el.hasAttribute && el.hasAttribute('stx-hydrate') && !el.__stx_hydrated;
       if (scopeVars && scopeVars.__mountCallbacks && !scopeVars.__mounted && !scopeDeferred) {
         scopeVars.__mounted = true;
-        scopeVars.__mountCallbacks.forEach(fn => fn());
+        runMountCallbacks(scopeVars.__mountCallbacks, scopeDestroySink(scopeVars));
       }
     });
 
     // Run global mount callbacks (from partial <script client> blocks that call onMount)
     // These are pushed during script execution, before DOMContentLoaded
     console.log('[stx] running global mountCallbacks:', mountCallbacks.length);
-    mountCallbacks.forEach(function(fn) {
-      try { fn(); } catch(e) { console.error('[stx] onMount error:', e); }
-    });
+    runMountCallbacks(mountCallbacks, destroyCallbacks);
     mountCallbacks.length = 0;
 
     // Auto-process elements with data-stx-auto (skip already processed scoped elements)
@@ -7051,15 +7759,12 @@ catch (e) { console.warn('[stx] destroy callback error:', e); }
       var scopeVars = window.stx._scopes && window.stx._scopes[scopeId];
       if (scopeVars && scopeVars.__mountCallbacks && !scopeVars.__mounted) {
         scopeVars.__mounted = true;
-        scopeVars.__mountCallbacks.forEach(function(fn) { fn(); });
+        runMountCallbacks(scopeVars.__mountCallbacks, scopeDestroySink(scopeVars));
       }
     });
 
     // Flush global mountCallbacks (from scripts re-executed after SPA content swap)
-    mountCallbacks.forEach(function(fn) {
-      try { fn(); }
-catch (e) { console.warn('[stx] mount callback error:', e); }
-    });
+    runMountCallbacks(mountCallbacks, destroyCallbacks);
     mountCallbacks.length = 0;
 
     // Everything that should have hydrated has now had its chance (#1773).