@mmstack/primitives 21.3.0 → 21.4.1

package/README.md

@@ -19,7 +19,7 @@ npm install @mmstack/primitives
 - [Timing & propagation](#timing--propagation) — `debounced`, `throttled`, `until`
 - [Reactive collections](#reactive-collections) — `indexArray`, `keyArray`, `mapObject`
 - [Effects](#effects) — `nestedEffect`
-- [Concurrency & transitions](#concurrency--transitions) — `keepPrevious`, keep-alive (`MmActivity`), `pausable*` / `providePausableOptions`, Suspense (`mm-suspense`), `startTransition` / `startTransaction`, `holdUntilReady`
+- [Concurrency & transitions](#concurrency--transitions) — `keepPrevious`, keep-alive (`MmActivity`), `pausable*` / `providePausableOptions`, Suspense (`mm-suspense`), hold-and-swap (`*mmTransition`), `startTransition` / `startTransaction`, `holdUntilReady`
 - [History & persistence](#history--persistence) — `withHistory`, `stored`, `tabSync`
 - [Performance helpers](#performance-helpers) — `chunked`, `pooled` / `pooledArray` / `pooledMap` / `pooledSet`
 - [Sensors](#sensors) — `sensor()` facade + browser-state signals
@@ -119,6 +119,10 @@ Top-level array support isn't exposed yet — use `indexArray` / `keyArray` for
 
 **Union leaves (perf opt-in).** `noUnionLeaves: true` promises no node ever flips between a leaf and a sub-store, so each node's leaf-ness is resolved once on first access and cached instead of staying reactive. Off by default — leave it off if a value can switch between a primitive and an object/array.
 
+**Unions are fully supported by default.** A node may flip between array ↔ record ↔ primitive ↔ `null` freely: routing (`keys`/iteration/prototype) follows the live kind, and a child signal you grabbed **before** a flip stays correct after it — reads resolve against the new shape (`undefined` through a `null` parent, no throw) and writes copy by the container's live shape, so writing through a pre-flip child never turns an array into a plain object.
+
+> Reserved keys: `set`, `update`, `mutate`, `inline`, `asReadonly` (and `extend`, until its removal next minor) resolve to the signal's own methods, so record keys with those names aren't reachable as child stores — read them off the value (`s().set`) instead.
+
 ### `extendStore` (scoped overlay)
 
 `extendStore(store, seed)` (on any store kind) creates a **scoped overlay** — a child store that **shares** the parent's signals for inherited keys (the same `WritableSignal`: writes go through to the parent and parent changes flow down) while keeping the seed and any new keys in a **local layer** that never propagates upward. No diffing, no syncing — local keys simply aren't wired to the parent.
@@ -437,6 +441,25 @@ This is also the pattern for coordinating resources registered _above_ a boundar
 
 **Forwarding scope (advanced).** `provideForwardingTransitionScope()` provides a scope that can be **re-pointed at a different target at runtime** via `setTarget(scope | null)` — reads follow the current target, while `add`/`remove` pin to the target a resource was registered under (so re-pointing never strands a registration). It's the building block for a coordinator that hosts several independent sub-scopes and switches which one it observes — e.g. a router outlet that, per navigation, points at the incoming route's own scope (read it from any injector with `getTransitionScope(injector)`). Most apps reach for `provideTransitionScope()`; this is for that one extra level of control.
 
+### Hold-and-swap — `*mmTransition`
+
+The transition itself, for any branch change — tabs, wizard steps, master-detail. Suspense decides placeholder-vs-content _within_ a branch, but it can't stop an `@switch` from unmounting the old branch the instant the value flips. `*mmTransition` holds it: when the bound value changes, the **old view stays mounted and visible** (keeping its old value) while the **new view mounts hidden with its own transition scope**; resources created in the incoming subtree register there just by existing, and once they've gone in flight and settled the views swap in one frame.
+
+```html
+<div *mmTransition="selectedTab(); let tab">
+  @switch (tab) {
+    @case ('overview') {
+      <overview-pane />
+    }
+    @case ('activity') {
+      <activity-pane />
+    }
+  }
+</div>
+```
+
+The first render is immediate (nothing to hold). An interrupting change mid-hold destroys the half-ready hidden view and re-targets — the stable view stays visible until the newest branch settles. A branch that loads nothing swaps right after its first render, and per-view scopes mean the outgoing branch's background work can never delay the swap. `immediate: true` skips holding; `viewTransition: true` wraps the swap in `document.startViewTransition` (feature detected). This is `@mmstack/router-core`'s `<mm-transition-outlet>` without the router — same semantics, any signal as the trigger.
+
 ### `injectStartTransition`
 
 The analog of React's `useTransition`. `startTransition(fn)` runs your state mutations (which commit immediately); any resource that reloads as a result **holds its value and reveals together once everything settles** — so a multi-resource update lands as one consistent frame instead of a torn mix of new and stale. The returned handle gives you a unified `pending` signal and a `done` promise for imperative coordination (disable a button, await completion).
@@ -461,6 +484,15 @@ const t = startTransaction(() => applyBulkEdit()); // live state updates; the di
 await t.done; // committed, display revealed in one frame
 ```
 
+Every exit settles: a throwing body rolls back, and if the calling context is **destroyed
+mid-flight** the hold is released (writes kept) and `done` resolves — a transaction can never
+leave a surviving ancestor scope frozen.
+
+Attribution is **per transaction**: a load already in flight when it starts is not adopted —
+it can neither commit the transaction early nor block its settle. (The same applies to
+`startTransition`.) A pre-existing flight re-triggered by the transaction's own writes counts
+once it restarts.
+
 ### `holdUntilReady`
 
 The **structural** counterpart to `keepPrevious`: where that holds a _value_ through a reload, this holds a _structure_ through a swap. Given a `target` signal and a `ready` predicate, it keeps yielding the previous value until `ready()` is true, then swaps to the current target. Mount the incoming structure off to the side so its resources can settle and flip `ready`, keep showing the held one meanwhile, and let the old one go once `ready` releases the swap. (`@mmstack/router-core`'s `<mm-transition-outlet>` is this pattern applied to routes.)
@@ -677,6 +709,11 @@ outer one on the same tree (e.g. a nested sortable). Reads are throttled
 (`throttle`, default 16ms); `drag.unthrottled()` exposes the un-throttled view
 for logic that needs the exact release position.
 
+The idle state carries the **end reason**: `cancelled` is `true` when the gesture
+was aborted (Escape, `pointercancel`, `.cancel()`) rather than released, and stays
+set until the next `pointerdown` — so a drag consumer can tell "drop here" from
+"abort" (`@mmstack/dnd` uses this to cancel instead of committing).
+
 ```typescript
 import { sensor } from '@mmstack/primitives';
 

package/fesm2022/mmstack-primitives.mjs

@@ -628,6 +628,38 @@ function provideForwardingTransitionScope() {
 function getTransitionScope(injector) {
     return injector.get(TRANSITION_SCOPE, null);
 }
+/**
+ * @internal Transaction-attributed pending for `startTransition`/`startTransaction`: like
+ * `scope.pending`, but loads already in flight when the tracker is created are NOT attributed —
+ * a pre-existing background load can neither settle the transaction early nor block its settle
+ * forever. A pre-existing flight is excluded only until it first settles; a later re-trigger of
+ * the same resource (e.g. the transaction's write changed its request) counts as the
+ * transaction's own work.
+ */
+function createAttributedPending(scope) {
+    const isInFlight = (ref) => {
+        const s = untracked(ref.status);
+        return s === 'loading' || s === 'reloading';
+    };
+    const preexisting = new Set(untracked(scope.resources).filter(isInFlight));
+    return computed(() => {
+        let pending = false;
+        for (const ref of scope.resources()) {
+            const s = ref.status();
+            const loading = s === 'loading' || s === 'reloading';
+            if (preexisting.has(ref)) {
+                // deletes are monotonic, so this stays sound under re-computation
+                if (loading)
+                    continue;
+                preexisting.delete(ref);
+                continue;
+            }
+            if (loading)
+                pending = true;
+        }
+        return pending;
+    });
+}
 /**
  * Returns a register function bound to the nearest transition scope: it adds a resource
  * to the scope and removes it when the caller's injection context is destroyed. Pass any
@@ -665,38 +697,43 @@ function registerResource(res, opt) {
 function injectStartTransition() {
     const scope = injectTransitionScope();
     const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
     const onServer = isPlatformServer(inject(PLATFORM_ID, { optional: true }) ?? 'browser');
     return (fn) => {
+        // attributed: loads already in flight when the transition starts are not ours —
+        // they can neither settle this transition early nor block it forever
+        const pending = createAttributedPending(scope);
         untracked(fn);
         let sawPending = false;
         const done = new Promise((resolve) => {
+            const settle = () => {
+                releaseDestroy();
+                watcher.destroy();
+                resolve();
+            };
             const watcher = effect(() => {
-                const p = scope.pending();
+                const p = pending();
                 if (p)
                     sawPending = true;
                 // settle: requests went in flight and then drained
-                if (sawPending && !p) {
-                    watcher.destroy();
-                    resolve();
-                }
+                if (sawPending && !p)
+                    settle();
             }, { ...(ngDevMode ? { debugName: "watcher" } : /* istanbul ignore next */ {}), injector });
+            // a destroy mid-flight kills the watcher — resolve so awaiters never hang
+            const releaseDestroy = destroyRef.onDestroy(settle);
             if (onServer) {
-                if (!untracked(scope.pending)) {
-                    watcher.destroy();
-                    resolve();
-                }
+                if (!untracked(pending))
+                    settle();
                 return;
             }
             // no-async fallback: once the reactive system has processed the writes (afterNextRender),
             // if nothing ever went in flight, the transition is already complete.
             afterNextRender(() => {
-                if (!sawPending && !untracked(scope.pending)) {
-                    watcher.destroy();
-                    resolve();
-                }
+                if (!sawPending && !untracked(pending))
+                    settle();
             }, { injector });
         });
-        return { pending: scope.pending, done };
+        return { pending, done };
     };
 }
 
@@ -767,8 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }] });
 /**
  * Unscoped suspense boundary — **reads the ambient scope** instead of providing one. For cases where
- * the resources to coordinate are registered *above* the boundary (e.g. an app-builder page whose
- * manifests/connectors register at a higher injector), so the boundary observes that outer scope
+ * the resources to coordinate are registered *above* the boundary so the boundary observes that outer scope
  * rather than opening a fresh one. Pair with a `provideTransitionScope()` (or another boundary) in an
  * ancestor.
  */
@@ -833,9 +869,13 @@ function runInTransaction(txn, fn) {
 function injectStartTransaction() {
     const scope = injectTransitionScope();
     const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
     const onServer = isPlatformServer(inject(PLATFORM_ID, { optional: true }) ?? 'browser');
     return (fn) => {
         const txn = createTransaction();
+        // attributed: loads already in flight when the transaction starts are not ours —
+        // they can neither commit this transaction early nor block its settle forever
+        const pending = createAttributedPending(scope);
         // Hold BEFORE the writes, so the display freezes at pre-transaction values.
         scope.beginHold();
         let finished = false;
@@ -852,6 +892,7 @@ function injectStartTransaction() {
             if (finished)
                 return;
             finished = true;
+            releaseDestroy();
             watcher?.destroy();
             if (restore)
                 txn.restore();
@@ -860,6 +901,10 @@ function injectStartTransaction() {
             scope.endHold();
             resolveDone();
         };
+        // The scope may outlive the calling context (a component transacting on an ancestor
+        // boundary): a destroy mid-flight kills the settle watcher, so without this the hold
+        // would leak and freeze the surviving scope forever. Keep the writes — they landed live.
+        const releaseDestroy = destroyRef.onDestroy(() => finish(false));
         try {
             runInTransaction(txn, fn);
         }
@@ -869,31 +914,193 @@ function injectStartTransaction() {
         }
         let sawPending = false;
         watcher = effect(() => {
-            const p = scope.pending();
+            const p = pending();
             if (p)
                 sawPending = true;
             if (sawPending && !p)
                 finish(false);
         }, { injector });
         if (onServer) {
-            if (!untracked(scope.pending))
+            if (!untracked(pending))
                 finish(false);
         }
         else {
             // no-async fallback: if nothing ever went in flight, settle once the writes are processed.
             afterNextRender(() => {
-                if (!sawPending && !untracked(scope.pending))
+                if (!sawPending && !untracked(pending))
                     finish(false);
             }, { injector });
         }
         return {
-            pending: scope.pending,
+            pending,
             done,
             abort: () => finish(true),
         };
     };
 }
 
+/**
+ * Generic hold-and-swap: the non-router `TransitionRouterOutlet`. When the bound value changes,
+ * the OLD view stays mounted and visible (it keeps its old context value — that's the hold) while
+ * the NEW view mounts hidden with its **own transition scope**; resources created in the incoming
+ * subtree register into that scope just by existing, and once they've gone in flight and settled
+ * the views swap in one frame. Tabs, wizard steps, master-detail — any branch change that would
+ * otherwise flash a loading state.
+ *
+ * ```html
+ * <div *mmTransition="selectedTab(); let tab">
+ *   @switch (tab) { ... }
+ * </div>
+ * ```
+ *
+ * Distinct from `<mm-suspense>` (the readiness gate): suspense decides placeholder-vs-content
+ * *within* one branch, but can't stop an `@switch` from unmounting the old branch the instant the
+ * value flips. This directive is the swap itself — the old branch survives until the new one is
+ * ready. Compose them freely: suspense inside a transitioned branch handles its first load.
+ *
+ * Semantics mirror the outlet: the first render is immediate (nothing to hold); an interrupting
+ * value change mid-hold destroys the half-ready hidden view and re-targets; a branch that loads
+ * nothing swaps right after its first render. Per-view scopes mean the outgoing branch's
+ * background work can never delay the swap. Set `mmTransitionImmediate` to skip holding, and
+ * `mmTransitionViewTransition` to wrap the swap in `document.startViewTransition` (feature
+ * detected). On the server every change swaps immediately.
+ */
+class MmTransition {
+    tpl = inject(TemplateRef);
+    vcr = inject(ViewContainerRef);
+    parent = inject(Injector);
+    onServer = isPlatformServer(inject(PLATFORM_ID, { optional: true }) ?? 'browser');
+    /** The value whose changes are transitioned. Each view keeps the value it was created with. */
+    value = input.required({ ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'mmTransition' });
+    /** Skip holding entirely — every change swaps at once (the plain re-render behavior). */
+    immediate = input(false, { ...(ngDevMode ? { debugName: "immediate" } : /* istanbul ignore next */ {}), alias: 'mmTransitionImmediate' });
+    /** Wrap the swap in the View Transitions API for an animated cross-fade (feature detected). */
+    viewTransition = input(false, { ...(ngDevMode ? { debugName: "viewTransition" } : /* istanbul ignore next */ {}), alias: 'mmTransitionViewTransition' });
+    current = null;
+    incoming = null;
+    /** Bumped on every re-target/teardown so a superseded (possibly deferred) swap can't commit. */
+    swapEpoch = 0;
+    holding = signal(false, ...(ngDevMode ? [{ debugName: "holding" }] : /* istanbul ignore next */ []));
+    /** True while an incoming view is mounted hidden, waiting to settle. */
+    pending = this.holding.asReadonly();
+    static ngTemplateContextGuard(dir, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ctx) {
+        return true;
+    }
+    constructor() {
+        effect(() => {
+            const v = this.value();
+            untracked(() => this.onValue(v));
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.swapEpoch++; // a deferred view-transition callback must not touch destroyed state
+            this.dropIncoming();
+            // `current` is destroyed with the container
+        });
+    }
+    onValue(v) {
+        if (!this.current) {
+            // first render: nothing to hold yet — show immediately (also what SSR serializes)
+            this.current = this.createView(v).view;
+            return;
+        }
+        this.dropIncoming(); // an interrupting change supersedes the previous hold
+        this.swapEpoch++;
+        const epoch = this.swapEpoch;
+        if (this.onServer || this.immediate()) {
+            this.finishSwap(epoch, this.createView(v).view);
+            return;
+        }
+        const { view, scope } = this.createView(v);
+        this.setHidden(view, true);
+        this.holding.set(true);
+        // Registration happens synchronously during view creation, so a resource already in
+        // flight counts from the start; later kickoffs are caught by the watcher.
+        let sawPending = untracked(scope.pending);
+        const watcher = effect(() => {
+            const pending = scope.pending();
+            untracked(() => {
+                if (epoch !== this.swapEpoch)
+                    return;
+                if (pending)
+                    sawPending = true;
+                if (sawPending && !pending)
+                    this.commitSwap(epoch, view);
+            });
+        }, { ...(ngDevMode ? { debugName: "watcher" } : /* istanbul ignore next */ {}), injector: this.parent });
+        this.incoming = { view, watcher };
+        // Fallback for a branch that loads nothing.
+        afterNextRender(() => {
+            if (epoch === this.swapEpoch &&
+                !sawPending &&
+                !untracked(scope.pending)) {
+                this.commitSwap(epoch, view);
+            }
+        }, { injector: this.parent });
+    }
+    commitSwap(epoch, view) {
+        if (epoch !== this.swapEpoch)
+            return;
+        if (this.viewTransition() &&
+            typeof document !== 'undefined' &&
+            document.startViewTransition) {
+            // the browser snapshots the old frame first; the epoch guard covers the deferral
+            document.startViewTransition(() => this.finishSwap(epoch, view));
+        }
+        else {
+            this.finishSwap(epoch, view);
+        }
+    }
+    /** The actual swap: destroy the old view, reveal the new one. Always instant. */
+    finishSwap(epoch, view) {
+        if (epoch !== this.swapEpoch)
+            return; // superseded while deferred — not ours to commit
+        this.swapEpoch++; // consume: the watcher and the render fallback can both fire, one commits
+        this.current?.destroy();
+        this.setHidden(view, false);
+        this.current = view;
+        this.incoming?.watcher.destroy();
+        this.incoming = null;
+        this.holding.set(false);
+    }
+    dropIncoming() {
+        if (!this.incoming)
+            return;
+        this.incoming.watcher.destroy();
+        this.incoming.view.destroy();
+        this.incoming = null;
+        this.holding.set(false);
+    }
+    createView(v) {
+        // Each view gets its own scope, so its subtree's resources register here by existing —
+        // and the outgoing view's background work can't block the swap (per-view isolation).
+        const injector = Injector.create({
+            parent: this.parent,
+            providers: [provideTransitionScope()],
+        });
+        const scope = getTransitionScope(injector);
+        const view = this.vcr.createEmbeddedView(this.tpl, { $implicit: v, mmTransition: v }, { injector });
+        return { view, scope };
+    }
+    setHidden(view, hidden) {
+        for (const node of view.rootNodes) {
+            // covers HTML and SVG roots; text/comment roots can't be styled — prefer an element root
+            if (node instanceof HTMLElement || node instanceof SVGElement)
+                node.style.display = hidden ? 'none' : '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MmTransition, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: MmTransition, isStandalone: true, selector: "[mmTransition]", inputs: { value: { classPropertyName: "value", publicName: "mmTransition", isSignal: true, isRequired: true, transformFunction: null }, immediate: { classPropertyName: "immediate", publicName: "mmTransitionImmediate", isSignal: true, isRequired: false, transformFunction: null }, viewTransition: { classPropertyName: "viewTransition", publicName: "mmTransitionViewTransition", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["mmTransition"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: MmTransition, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mmTransition]',
+                    exportAs: 'mmTransition',
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "mmTransition", required: true }] }], immediate: [{ type: i0.Input, args: [{ isSignal: true, alias: "mmTransitionImmediate", required: false }] }], viewTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "mmTransitionViewTransition", required: false }] }] } });
+
 /**
  * @internal
  */
@@ -2895,9 +3102,13 @@ const IDLE = {
     button: -1,
     pointerType: '',
     origin: null,
+    cancelled: false,
 };
+/** Terminal state of an aborted gesture — same idle shape, `cancelled: true`. */
+const CANCELLED = { ...IDLE, cancelled: true };
 function stateEqual(a, b) {
     return (a.active === b.active &&
+        a.cancelled === b.cancelled &&
         a.pointerId === b.pointerId &&
         a.current.x === b.current.x &&
         a.current.y === b.current.y &&
@@ -2975,7 +3186,7 @@ function createPointerDrag(opt) {
         ctrl: e.ctrlKey,
         meta: e.metaKey,
     });
-    const end = () => {
+    const end = (cancelled = false) => {
         gesture?.abort();
         gesture = null;
         activePointerId = null;
@@ -2983,8 +3194,8 @@ function createPointerDrag(opt) {
         activePointerType = '';
         activeOrigin = null;
         activated = false;
-        state.set(IDLE);
-        state.flush(); // terminal transition: reflect IDLE now, not on the trailing edge
+        state.set(cancelled ? CANCELLED : IDLE);
+        state.flush(); // terminal transition: reflect idle now, not on the trailing edge
     };
     const onMove = (e) => {
         if (e.pointerId !== activePointerId)
@@ -3004,6 +3215,7 @@ function createPointerDrag(opt) {
             button: activeButton, // pointermove button is -1; keep the down-button
             pointerType: activePointerType,
             origin: activeOrigin,
+            cancelled: false,
         });
     };
     const onUp = (e) => {
@@ -3012,11 +3224,11 @@ function createPointerDrag(opt) {
     };
     const onCancel = (e) => {
         if (e.pointerId === activePointerId)
-            end();
+            end(true);
     };
     const onKey = (e) => {
         if (e.key === 'Escape' && activePointerId !== null)
-            end();
+            end(true);
     };
     const onDown = (el) => (e) => {
         if (activePointerId !== null)
@@ -3061,6 +3273,7 @@ function createPointerDrag(opt) {
             button: e.button,
             pointerType: activePointerType,
             origin: activeOrigin,
+            cancelled: false,
         });
     };
     const attach = (el) => {
@@ -3070,7 +3283,7 @@ function createPointerDrag(opt) {
         });
         return () => {
             controller.abort();
-            end();
+            end(true); // teardown mid-gesture is an abort, not a drop
         };
     };
     if (isSignal(target)) {
@@ -3088,7 +3301,7 @@ function createPointerDrag(opt) {
     }
     const base = state.asReadonly();
     base.unthrottled = state.original;
-    base.cancel = end;
+    base.cancel = () => end(true);
     return base;
 }
 
@@ -3684,30 +3897,35 @@ function getCachedChild(target, prop, build, cache, cleanupRegistry) {
     cleanupRegistry.register(proxy, { target, prop }, ref);
     return proxy;
 }
+/**
+ * @internal Whether a mutable parent's child value must always re-notify: in-place mutation
+ * keeps an object child's reference stable, so `Object.is` would swallow the change. Decided
+ * per-VALUE (not snapshotted at build) so a union child that becomes an object later still
+ * propagates parent-level mutations.
+ */
+function mutableChildEqual(a, b) {
+    if (typeof a === 'object' && a !== null)
+        return false;
+    return Object.is(a, b);
+}
 /**
  * @internal Builds the derived child signal for `prop` and wraps it as an array/object substore.
- * A record parent reads the key directly; any other container goes through the fallback `from`/
- * `onChange` path. Shared verbatim by the array and object proxies — the only place a child node
- * is constructed.
+ * Both the read (`v?.[prop]`) and the write (`createFallbackOnChange` copies by the container's
+ * LIVE shape) are shape-adaptive, so a child cached before an array↔record↔null union flip stays
+ * correct after it. The only place a child node is constructed — shared by every container kind.
  */
 function buildChildNode(target, prop, isMutableSource, options) {
     const value = untracked(target);
-    const valueIsRecord = isRecord(value);
-    const valueIsArray = Array.isArray(value);
     const nodeVivify = resolveVivify(value, options.vivify);
     const vivifyFn = createVivify(nodeVivify);
-    const equalFn = (valueIsRecord || valueIsArray) &&
-        isMutableSource &&
-        typeof value[prop] === 'object'
-        ? () => false
+    const equalFn = isMutableSource && (isRecord(value) || Array.isArray(value))
+        ? mutableChildEqual
         : undefined;
-    const computation = valueIsRecord
-        ? derived(target, prop, { equal: equalFn, vivify: nodeVivify })
-        : derived(target, {
-            from: (v) => v?.[prop],
-            onChange: createFallbackOnChange(target, prop, vivifyFn, isMutableSource),
-            equal: equalFn,
-        });
+    const computation = derived(target, {
+        from: (v) => v?.[prop],
+        onChange: createFallbackOnChange(target, prop, vivifyFn, isMutableSource),
+        equal: equalFn,
+    });
     const childSample = untracked(computation);
     const childVivify = resolveVivify(childSample, options.vivify);
     const proxy = toStore(computation, options);
@@ -4592,5 +4810,5 @@ function withHistory(sourceOrValue, opt) {
  * Generated bundle index. Do not edit.
  */
 
-export { MmActivity, PAUSABLE_OPTIONS, SuspenseBoundary, SuspenseBoundaryBase, UnscopedSuspenseBoundary, activeTransaction, batteryStatus, chunked, clipboard, combineWith, createForwardingScope, createTransaction, createTransitionScope, debounce, debounced, derived, distinct, elementSize, elementVisibility, extendStore, filter, filterWith, focusWithin, forkStore, geolocation, getTransitionScope, holdUntilReady, idle, indexArray, injectPaused, injectRegisterResource, injectStartTransaction, injectStartTransition, injectTransitionScope, isDerivation, isLeaf, isMutable, isOpaque, isStore, keepPrevious, keyArray, map, mapArray, mapObject, mediaQuery, merge3, mousePosition, mutable, mutableStore, nestedEffect, networkStatus, opaque, orientation, pageVisibility, pairwise, pausableComputed, pausableEffect, pausableSignal, pipeable, piped, pointerDrag, pooled, pooledArray, pooledMap, pooledSet, prefersDarkMode, prefersReducedMotion, provideForwardingTransitionScope, providePausableOptions, providePaused, provideTransitionScope, registerResource, resolvePause, scan, scrollPosition, select, sensor, sensors, signalFromEvent, startWith, store, stored, tabSync, tap, throttle, throttled, toFakeDerivation, toFakeSignalDerivation, toStore, toWritable, until, windowSize, withHistory };
+export { MmActivity, MmTransition, PAUSABLE_OPTIONS, SuspenseBoundary, SuspenseBoundaryBase, UnscopedSuspenseBoundary, activeTransaction, batteryStatus, chunked, clipboard, combineWith, createAttributedPending, createForwardingScope, createTransaction, createTransitionScope, debounce, debounced, derived, distinct, elementSize, elementVisibility, extendStore, filter, filterWith, focusWithin, forkStore, geolocation, getTransitionScope, holdUntilReady, idle, indexArray, injectPaused, injectRegisterResource, injectStartTransaction, injectStartTransition, injectTransitionScope, isDerivation, isLeaf, isMutable, isOpaque, isStore, keepPrevious, keyArray, map, mapArray, mapObject, mediaQuery, merge3, mousePosition, mutable, mutableStore, nestedEffect, networkStatus, opaque, orientation, pageVisibility, pairwise, pausableComputed, pausableEffect, pausableSignal, pipeable, piped, pointerDrag, pooled, pooledArray, pooledMap, pooledSet, prefersDarkMode, prefersReducedMotion, provideForwardingTransitionScope, providePausableOptions, providePaused, provideTransitionScope, registerResource, resolvePause, scan, scrollPosition, select, sensor, sensors, signalFromEvent, startWith, store, stored, tabSync, tap, throttle, throttled, toFakeDerivation, toFakeSignalDerivation, toStore, toWritable, until, windowSize, withHistory };
 //# sourceMappingURL=mmstack-primitives.mjs.map