@symbiote-native/angular 2.0.0 → 3.0.0

package/build/angular/renderer/index.js

@@ -4,76 +4,35 @@
 // engine's tiny mutation API; the engine owns all Fabric clone-on-write, shared with
 // every other adapter. This is the Angular twin of adapters/vue/src/renderer.ts — proof
 // that the same engine mutation API drives both frameworks.
-import { appendChild, createAnchor, createElement, createRawText, dlog, getExplicitStyle, insertBefore, isDebug, isSymbioteEvent, isSymbioteNode, removeChild, routeProp, setEventListener, setProp, setText, toPublicInstance, RAW_TEXT_COMPONENT, SymbioteSurface, } from '@symbiote-native/engine';
+import { appendChild, createAnchor, createElement, createRawText, componentOf, dlog, getExplicitStyle, insertBefore, isDebug, isRawTextNode, isSymbioteEvent, isSymbioteNode, isTextContainer, isSameShallowStyle, nextSiblingOf, parentOf, propOf, registerBeforeFlush, removeChild, routeProp, setEventListener, setText, textOf, toPublicInstance, SymbioteSurface, } from '@symbiote-native/engine';
 import { COMPONENT_DESCRIPTORS, descriptorFor, } from '@symbiote-native/components';
-import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
 import { isAnchorHostComponent } from '../anchor-host-registry';
-import { countAngular, noteAngularCreate, noteAngularWrite, } from '../diagnostics';
+import { countAngular, noteAngularCreate, noteAngularStyleWrite, noteAngularWrite, } from '../diagnostics';
 function isSurface(parent) {
     return parent instanceof SymbioteSurface;
 }
 function isRawText(node) {
-    return node.component === RAW_TEXT_COMPONENT;
+    return isRawTextNode(node);
 }
 function isRecord(value) {
     return typeof value === 'object' && value !== null;
 }
-// RN's Text.js applies two defaults on the way to native (core/components/host-primitives.cjs's
-// `Text.defaults`; the authority on what they MEAN is core/components/src/text-props.ts's
-// resolveTextProps, which the composed `Text` @Component already calls). That component's own
-// host paints directly (Text is not anchor-hosted — see the top-level "View/Text's own component
-// doesn't have this split" reasoning elsewhere in this file), so createElement runs for its INNER
-// text node too; seeding here therefore covers both the composed Text and any bare
-// `text` a future lowering emits, uniformly. Found missing 2026-08-31 (a cross-adapter
-// key-count diff against Vue's real BenchmarkRow.vue) — without this a lowered Text's
-// `numberOfLines` clips with no ellipsis, silently, on device only. Vue's renderer already does
-// this (`adapters/vue/src/renderer/index.ts`'s `seedTextDefaults`); Angular's simply never did.
+// RN's TWO TEXT DEFAULTS LEFT THIS RENDERER ENTIRELY ON 2026-09-18, in two steps a fortnight apart.
+// The SEED went first, to the payload builder — writing them as props cost a crossing every time an
+// app authored the same value (6 000 per 1 000-row create, `writesOfUnchanged`). What stayed was a
+// resolver for the clear-back path: a write of `undefined` looked up the default instead of clearing.
 //
-// Sourced from `foldHostBag` (`@symbiote-native/components/fold-host-bag`, driven by
-// `HOST_PRIMITIVES.Text.defaults`) rather than a second hardcoded copy — React and Svelte call the
-// same function directly; this used to be a THIRD, independent restatement of the same two
-// defaults, with nothing to catch it drifting from the spec if a default's value ever changed.
-// `foldHostBag('text', {})` on an EMPTY bag folds every default with no authored value to
-// override it (the alias loop has nothing to fold — `id` is only rewritten when present), which is
-// exactly the seed this function needs.
-function seedTextDefaults(node) {
-    const seeded = foldHostBag('text', {});
-    for (const [key, value] of Object.entries(seeded))
-        setProp(node, key, value);
-}
-// An explicit `undefined` must NOT clear one of those defaults — RN treats a missing prop and an
-// explicit undefined alike, and only a literal `false` opts allowFontScaling out. Reached only
-// when a later write clears a key back to undefined, so it costs nothing on the common path.
-// `foldHostBag` folds every Text default when called this way (not just `key`), because its
-// contract is "fold a whole bag" — the extra key computed alongside `key` is simply unread here.
-function textDefaultFor(el, key) {
-    if (isSurface(el) || !el.isText)
-        return undefined;
-    return foldHostBag('text', { [key]: undefined })[key];
-}
-// RN's `id` is the modern W3C-named alias for `nativeID` (core/components/host-primitives.cjs's
-// `ID_ALIAS`) — View.js/Text.js copy it over unconditionally, so the two name ONE native prop.
-// React/Solid/Svelte fold it in a wrapper or transform; Angular had it nowhere, so `<view
-// id="x">`/`[id]="x"` reached Fabric with an unknown `id` key and no `nativeID` — silently, on
-// device only. Lives in the renderer (mirroring Vue's `PROP_ALIASES`) so it covers every path
-// that can set a prop — `setAttribute`, `setProperty`, and (should a future lowering emit one) a
-// hand-built call — not just the composed component's own `id` @Input.
-// `symbioteStyle` is what the lowering transform emits in place of `[style]`: Angular routes a
-// `style` binding to its own CSS styling engine, which cannot represent an RN StyleProp (an array
-// throws inside change detection). Under any other name it is an ordinary property binding and
-// arrives here.
+// That is gone too, and for the reason the seed was: `applyTextDefaults` (and its C++ twin) runs on
+// EVERY commit of every `RCTText`, so a cleared key is absent for exactly as long as it takes the
+// payload builder to supply the default again. The resolver was answering a question nothing asks.
+//
+// `PROP_ALIASES` (`id` -> `nativeID`) left this renderer on 2026-09-18 — `routeProp` resolves it
+// for every adapter now, so every path that can set a prop still reaches it.
 // Angular's two-way sugar `[(value)]` compiles to a `(valueChange)` binding; the engine knows the
 // same fold as the function prop `onValueChange`. See `listen()`. The two names live in a leaf
 // module so `elements.ts`'s ControlValueAccessor can name them without importing this cyclic file.
 import { VALUE_CHANGE_EVENT, VALUE_CHANGE_PROP } from './value-change';
-import { flushViewFor } from '../change-detection-flush';
-const PROP_ALIASES = new Map([
-    ['id', 'nativeID'],
-    ['symbioteStyle', 'style'],
-]);
-function aliasedPropName(name) {
-    return PROP_ALIASES.get(name) ?? name;
-}
+import { createCallbackWrapper, flushViewFor, isWrappableCallback, } from '../change-detection-flush';
 // The app callbacks an engine behavior READS BACK inside the same microtask turn, as an Angular
 // `(event)` binding — `valueChange` is handled in `listen` on its own, since it also needs the field
 // unwrapped. Zoneless change detection is a macrotask, so without a flush the behavior reads the
@@ -84,6 +43,42 @@ function aliasedPropName(name) {
 // wrapped by `SymbioteElement` itself, which reaches every one of them rather than a named three,
 // and adds the `markForCheck` a prop callback needs and an event binding gets from Angular.
 const READ_BACK_EVENTS = new Set(['refresh']);
+// How many distinct style objects the renderer keeps to hand back by identity. A screen's styles are
+// a handful; the bench row has four. See `publishedStyles`.
+const STYLE_CACHE = 16;
+// `listen(VALUE_CHANGE_EVENT)` can be called TWICE for the SAME logical `(valueChange)`/`[(value)]`
+// binding on a MATCHED element — Angular's own compiled output-binding codegen wires one listener,
+// `ValueChangeElement.ngOnInit`'s manual bridge wires a second (`lowered-two-way-value.test.ts`,
+// "delivers a bound handler exactly once per change"). Those two must DEDUPE (last one replaces,
+// not composes — firing both double-delivers the identical value). A genuinely different explicit
+// `[onValueChange]` app-level handler (routed here via `ngOnChanges`'s generic per-input loop) must
+// instead be PRESERVED and called alongside the bridge, or it silently stops firing the moment
+// `[(value)]`/`(valueChange)` is also bound. This set is what tells the two cases apart.
+const bridgedValueChangeHandlers = new WeakSet();
+// The genuinely explicit `[onValueChange]` app handler for a node, if one is bound — read LIVE by
+// the composed forward function on every event rather than captured once at compose time. That is
+// what makes handler installation order-independent: `ngOnChanges` (the explicit handler) and the
+// two `listen(VALUE_CHANGE_EVENT)` calls (the bridge, see below) can happen in any interleaving —
+// at initial mount OR on a later `[onValueChange]` rebind (`ngOnChanges` again, same code path,
+// routed through `setProperty`) — without one silently overwriting the other's closure.
+const explicitValueChangeHandlers = new WeakMap();
+function composeValueChangeHandler(target, bridgeCallback) {
+    const forwardValue = withChangeDetection(target, (event) => {
+        explicitValueChangeHandlers.get(target)?.(event);
+        if (isSymbioteEvent(event)) {
+            if ('text' in event)
+                return bridgeCallback(event.text);
+            if ('value' in event)
+                return bridgeCallback(event.value);
+        }
+        return bridgeCallback(event);
+    });
+    bridgedValueChangeHandlers.add(forwardValue);
+    return forwardValue;
+}
+function isReadBackListener(value) {
+    return typeof value === 'function';
+}
 function withChangeDetection(node, listener) {
     return (event) => {
         const result = listener(event);
@@ -112,8 +107,8 @@ function describeHost(node) {
         return 'surface';
     const anchorId = anchorDebugIds.get(node);
     return anchorId !== undefined
-        ? `${node.component}#${anchorId}`
-        : node.component;
+        ? `${componentOf(node)}#${anchorId}`
+        : componentOf(node);
 }
 // A hand-written tag ngtsc accepts must contain a HYPHEN, so the six dashless intrinsics
 // (`view`/`text`/`pressable`/`image`/`switch`/`modal`) need a second spelling that has one.
@@ -154,23 +149,144 @@ const PRIMITIVE_SELECTOR_ALIAS = {
 // stray RCTRawText would paint). Angular's ɵɵtext only ever lands text inside a <text>,
 // but guard anyway for parity with the Vue adapter and to fail loudly on a bad template.
 function assertTextPlacement(child, parent) {
-    if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
-        throw new Error(`Text string "${String(child.props.text)}" must be rendered inside a <text>`);
+    if (isRawText(child) && (isSurface(parent) || !isTextContainer(parent))) {
+        throw new Error(`Text string "${textOf(child) ?? ''}" must be rendered inside a <text>`);
     }
 }
 // One renderer per mounted surface. Every mutation asks the surface to (microtask-
 // coalesced) recommit — the same seam Vue uses; a burst of Angular change-detection
 // mutations collapses into one completeRoot.
 export class SymbioteRenderer {
-    surface;
-    data = {};
-    // Angular calls destroyNode per-node only when this is non-null; teardown happens in
-    // render.ts (unmount), so per-node cleanup is a no-op.
-    destroyNode = null;
     constructor(surface) {
         this.surface = surface;
+        this.data = {};
+        // Angular calls destroyNode per-node only when this is non-null; teardown happens in
+        // render.ts (unmount), so per-node cleanup is a no-op.
+        this.destroyNode = null;
+        this.pendingStyle = {};
+        /**
+         * Style objects this renderer has already published, so a list of identical rows sends ONE.
+         *
+         * The intern table keys by IDENTITY, so a fresh object per node is a fresh entry per node and the
+         * host converts every entry across JSI. Measured on the bench arm: `values` 7 001 against Vue's
+         * 3 004 for the identical tree, with `convert` 19.5 ms against 0.6 — and the gap is the KIND
+         * rather than the count, ~4 000 of Angular's being objects that convert recursively where Vue's
+         * are scalars plus four hoisted styles every row shares.
+         *
+         * Angular cannot share them on its own: `ɵɵstyleMap` hands over KEYS, so the object is this
+         * renderer's own construction. Recognising one it has already built is what puts an Angular app
+         * back on the footing of a framework whose author hoisted the constant.
+         *
+         * SMALL AND MRU. A screen has a handful of distinct styles and re-publishes them thousands of
+         * times, so a hit is almost always at the front; a miss costs at most `STYLE_CACHE` shallow
+         * compares, which is nothing beside the conversion it saves. An app with more distinct styles than
+         * this simply stops sharing — it never stops being correct.
+         */
+        this.publishedStyles = [];
+        // Ivy compiles every class= / [class.foo] / [ngClass] form down to per-token addClass/
+        // removeClass calls (never a single setAttribute('class', ...) call), so a per-node token set
+        // is accumulated here and re-joined into one string on every change, then handed to
+        // routeProp('class', ...) exactly like Vue's template `class="..."` and React's JSX
+        // `className="..."` — all three resolve through the SAME centralized class+style merge in
+        // core/engine/src/node.ts, so a class registered via the SFC/CSS-Modules style compiler
+        // resolves identically regardless of adapter.
+        this.classTokens = new WeakMap();
+        // The OTHER class source: a whole string written as a prop. Kept apart from the token set rather
+        // than merged into it, because the two are replaced independently — a new `[class]` value
+        // replaces this string entirely while leaving every `[class.foo]` token standing.
+        this.classStrings = new WeakMap();
+        this.callbackWrappers = new WeakMap();
+        // A READ AND A COMMIT BOTH ARRIVE FROM ELSEWHERE, so the renderer cannot close the run on its
+        // own: a turn whose last act is a style change has no next call to close it, and the commit
+        // would paint the node without it. `flushOps` is the one door in front of every drain.
+        this.releaseBeforeFlush = registerBeforeFlush(() => this.flushStyling());
+    }
+    destroy() {
+        this.flushStyling();
+        this.releaseBeforeFlush();
+    }
+    /**
+     * Publish whatever the styling run is holding. Idempotent, and free when it holds nothing.
+     *
+     * IT DOES NOT REQUEST A COMMIT, and that is not an omission — the request is made when the style
+     * is ACCUMULATED, exactly where it was made before the run existed. This runs from inside
+     * `flushOps`, which the commit itself calls first, so asking there schedules a SECOND commit whose
+     * tree is already current: a full `completeRoot` plus a Yoga pass for nothing.
+     *
+     * Measured, because it did not look like a cost. The bench arm's `select` fell 17.1 -> 3.8 ms and
+     * its `remove` rose 7.1 -> 18.2 in the same runs — the extra commit lands in whichever step's
+     * microtask happens to run it, so the work had MOVED between steps rather than gone. Two rows
+     * moving by the same amount in opposite directions is what that always looks like.
+     */
+    flushStyling() {
+        const styled = this.pendingStyleNode;
+        if (styled !== undefined) {
+            const style = this.pendingStyle;
+            this.pendingStyleNode = undefined;
+            this.pendingStyle = {};
+            routeProp(styled, 'style', this.canonicalStyle(style));
+        }
+        const classed = this.pendingClassNode;
+        if (classed !== undefined) {
+            this.pendingClassNode = undefined;
+            routeProp(classed, 'class', this.classStringFor(classed));
+        }
+    }
+    /**
+     * The union of a node's two class sources, or `undefined` when it has none.
+     *
+     * A node can be told its classes BOTH ways in one pass: Ivy compiles `[class.foo]`, `[ngClass]`
+     * and a static `class=` down to per-token `addClass`/`removeClass`, while a whole-string `class`
+     * arrives at `setProperty` — which is the shape Angular uses when a directive declares `class` as
+     * an input and the styling binding is shadowed into it (`setShadowStylingInputFlags`,
+     * `view/directives.ts`). Publishing either one alone erases the other, and the DOM renderer this
+     * mirrors has no such problem because `classList` accumulates for it.
+     */
+    classStringFor(el) {
+        const tokens = this.classTokens.get(el);
+        const whole = this.classStrings.get(el);
+        if (whole === undefined) {
+            return tokens !== undefined && tokens.size > 0
+                ? [...tokens].join(' ')
+                : undefined;
+        }
+        if (tokens === undefined || tokens.size === 0) {
+            return whole.length > 0 ? whole : undefined;
+        }
+        const union = new Set(whole.split(/\s+/u).filter(token => token.length > 0));
+        for (const token of tokens)
+            union.add(token);
+        return union.size > 0 ? [...union].join(' ') : undefined;
+    }
+    /** A published object equal to this one, or this one — which then becomes the published copy. */
+    canonicalStyle(style) {
+        for (let at = 0; at < this.publishedStyles.length; at += 1) {
+            const known = this.publishedStyles[at];
+            if (!isSameShallowStyle(style, known))
+                continue;
+            if (at > 0) {
+                this.publishedStyles.splice(at, 1);
+                this.publishedStyles.unshift(known);
+            }
+            return known;
+        }
+        this.publishedStyles.unshift(style);
+        if (this.publishedStyles.length > STYLE_CACHE)
+            this.publishedStyles.pop();
+        return style;
+    }
+    /** The accumulator for this node's style run, opening one (and closing any other) if needed. */
+    openStyleRun(el) {
+        if (this.pendingStyleNode === el)
+            return this.pendingStyle;
+        this.flushStyling();
+        // Seeded from what is STANDING, because Angular sends only the keys that changed — an update
+        // that moves one key must not drop the rest.
+        const current = getExplicitStyle(el);
+        this.pendingStyle = isRecord(current) ? { ...current } : {};
+        this.pendingStyleNode = el;
+        return this.pendingStyle;
     }
-    destroy() { }
     createElement(name) {
         // `name` is the component's host tag — a symbiote intrinsic (`view`,
         // `text`, …), a public ergonomic alias (`View`, `Text`), or a raw Fabric view
@@ -207,8 +323,6 @@ export class SymbioteRenderer {
         // (e.g. 'RCTView') and any registered behavior silently never attaches — Vue's renderer
         // already passes this correctly (`createElement(descriptor.component, descriptor.isText, type)`).
         const node = createElement(descriptor.component, descriptor.isText, engineName);
-        if (descriptor.isText)
-            seedTextDefaults(node);
         if (isDebug()) {
             dlog(`angular createElement ${name} -> ${descriptor.component}`);
         }
@@ -283,13 +397,21 @@ export class SymbioteRenderer {
         // Detach from the child's own retained parent (a top-level node lives in
         // surface.children with no parent). Angular's `parent` arg is ignored in favor of the
         // authoritative link, mirroring the Vue adapter's remove.
+        // Angular tears down a root view by removing its HOST, which here is the surface itself. There
+        // is nothing above it to detach from — the old retained tree absorbed the call (`indexOf` of a
+        // node that is not in the list is -1), and the mutation buffer cannot: it would record a remove
+        // naming the surface as a child of its own node.
+        if (isSurface(oldChild))
+            return;
         countAngular('nodesRemoved');
         if (isDebug()) {
             const angularParent = _parent !== null ? describeHost(_parent) : 'null';
-            const retainedParent = oldChild.parent !== undefined ? describeHost(oldChild.parent) : 'none';
+            const retainedParent = parentOf(oldChild) !== undefined
+                ? describeHost(parentOf(oldChild))
+                : 'none';
             dlog(`Angular renderer removeChild angularParent=${angularParent} retainedParent=${retainedParent} child=${describeHost(oldChild)}`);
         }
-        const parent = oldChild.parent;
+        const parent = parentOf(oldChild);
         if (parent !== undefined)
             removeChild(parent, oldChild);
         else
@@ -310,12 +432,12 @@ export class SymbioteRenderer {
     // does `inject(ViewContainerRef)`, e.g. VListOutletDirective) forwards this null straight into
     // insertBefore without checking it; without that guard it crashed on-device.
     parentNode(node) {
-        return node.parent ?? null;
+        return parentOf(node) ?? null;
     }
     nextSibling(node) {
-        const siblings = node.parent !== undefined ? node.parent.children : this.surface.children;
-        const index = siblings.indexOf(node);
-        return index >= 0 ? (siblings[index + 1] ?? null) : null;
+        // `?? null` because Renderer2 types the miss as null; the engine answers undefined
+        // uniformly and owns the top-level fallback through the surface it is handed.
+        return nextSiblingOf(node, this.surface) ?? null;
     }
     // locateHostElement always routes createComponent's `hostElement` THROUGH here as
     // `selectorOrNode` (Angular's own core.mjs) — it is never bypassed just because a real
@@ -324,31 +446,27 @@ export class SymbioteRenderer {
     selectRootElement(selectorOrNode) {
         return typeof selectorOrNode === 'string' ? this.surface : selectorOrNode;
     }
+    // The three prop writers below close the styling run FIRST. A read or a commit would do it through
+    // `registerBeforeFlush`, but neither happens here: this is one prop write landing on the same node
+    // whose `style` or `class` is still held, and a run published afterwards would overwrite it.
     setAttribute(el, name, value) {
         if (isSurface(el))
             return;
+        this.flushStyling();
         countAngular('rendererWrites');
         noteAngularWrite(name);
-        routeProp(el, aliasedPropName(name), value);
+        routeProp(el, name, value);
         this.surface.requestCommit();
     }
     removeAttribute(el, name) {
         if (isSurface(el))
             return;
+        this.flushStyling();
         countAngular('rendererWrites');
         noteAngularWrite(name);
-        const aliased = aliasedPropName(name);
-        routeProp(el, aliased, textDefaultFor(el, aliased));
+        routeProp(el, name, undefined);
         this.surface.requestCommit();
     }
-    // Ivy compiles every class= / [class.foo] / [ngClass] form down to per-token addClass/
-    // removeClass calls (never a single setAttribute('class', ...) call), so a per-node token set
-    // is accumulated here and re-joined into one string on every change, then handed to
-    // routeProp('class', ...) exactly like Vue's template `class="..."` and React's JSX
-    // `className="..."` — all three resolve through the SAME centralized class+style merge in
-    // core/engine/src/node.ts, so a class registered via the SFC/CSS-Modules style compiler
-    // resolves identically regardless of adapter.
-    classTokens = new WeakMap();
     addClass(el, name) {
         if (isSurface(el))
             return;
@@ -357,7 +475,7 @@ export class SymbioteRenderer {
         const tokens = this.classTokens.get(el) ?? new Set();
         tokens.add(name);
         this.classTokens.set(el, tokens);
-        routeProp(el, 'class', [...tokens].join(' '));
+        this.openClassRun(el);
         this.surface.requestCommit();
     }
     removeClass(el, name) {
@@ -369,9 +487,17 @@ export class SymbioteRenderer {
         countAngular('rendererWrites');
         noteAngularWrite('class');
         tokens.delete(name);
-        routeProp(el, 'class', tokens.size > 0 ? [...tokens].join(' ') : undefined);
+        this.openClassRun(el);
         this.surface.requestCommit();
     }
+    // The token SET is the accumulator here — `addClass` has already put the token in it — so this
+    // only has to remember whose run is open. Closing it re-joins the set once.
+    openClassRun(el) {
+        if (this.pendingClassNode === el)
+            return;
+        this.flushStyling();
+        this.pendingClassNode = el;
+    }
     // Angular decomposes a [style] binding into per-key setStyle calls (ɵɵstyleMap). RN wants
     // the whole style object as one `style` prop, so merge each key into it — onto the explicit
     // style half tracked by routeProp's centralized class+style merge (core/engine/src/node.ts),
@@ -381,22 +507,23 @@ export class SymbioteRenderer {
         if (isSurface(el))
             return;
         countAngular('rendererWrites');
-        noteAngularWrite(`style.${style}`);
-        const current = getExplicitStyle(el);
-        const base = isRecord(current) ? current : {};
-        routeProp(el, 'style', { ...base, [style]: value });
+        noteAngularStyleWrite(style);
+        this.openStyleRun(el)[style] = value;
         this.surface.requestCommit();
     }
     removeStyle(el, style) {
         if (isSurface(el))
             return;
-        const current = getExplicitStyle(el);
-        if (!isRecord(current))
+        // A remove on a node with no style at all is Angular clearing a binding it never set. Opening a
+        // run for it would publish an empty style onto a node that had none, which the old early return
+        // was there to avoid.
+        if (this.pendingStyleNode !== el && !isRecord(getExplicitStyle(el)))
             return;
         countAngular('rendererWrites');
-        noteAngularWrite(`style.${style}`);
-        const { [style]: _removed, ...rest } = current;
-        routeProp(el, 'style', rest);
+        noteAngularStyleWrite(style);
+        const run = this.openStyleRun(el);
+        // The accumulator is this renderer's own object, never the node's — see `openStyleRun`.
+        delete run[style];
         this.surface.requestCommit();
     }
     // [prop]="x" bindings. routeProp makes the prop-vs-event decision from the node's
@@ -406,10 +533,63 @@ export class SymbioteRenderer {
             return;
         countAngular('rendererWrites');
         noteAngularWrite(name);
-        const aliased = aliasedPropName(name);
-        routeProp(el, aliased, value === undefined ? textDefaultFor(el, aliased) : value);
+        // A WHOLE CLASS STRING IS NOT AN ORDINARY PROP: it is one of two sources the node's class list
+        // is built from, and writing it straight through would erase every `[class.foo]` token the
+        // other one put there. It joins the class run instead, exactly as `addClass` does.
+        if (name === 'class') {
+            this.openClassRun(el);
+            this.classStrings.set(el, typeof value === 'string' ? value : '');
+            this.surface.requestCommit();
+            return;
+        }
+        // `ngOnChanges` routes every `[onValueChange]` write here (both the initial bind and any
+        // later rebind to a new function reference) — never through `listen()`. When the write is a
+        // genuinely explicit app handler (not a prior bridge's own forward function), update the live
+        // slot `composeValueChangeHandler`'s forward function reads on every event; when a bridge is
+        // already installed on this node, that's ALL that's needed — the installed forward function
+        // picks the new handler up on its own, no re-route. Without this, a rebind after mount would
+        // silently kill the `[(value)]` two-way sync the moment it overwrote the composed prop raw.
+        if (name === VALUE_CHANGE_PROP) {
+            if (isReadBackListener(value) && !bridgedValueChangeHandlers.has(value)) {
+                explicitValueChangeHandlers.set(el, value);
+            }
+            else {
+                explicitValueChangeHandlers.delete(el);
+            }
+            const current = propOf(el, VALUE_CHANGE_PROP);
+            const bridgeActive = isReadBackListener(current) && bridgedValueChangeHandlers.has(current);
+            if (bridgeActive) {
+                this.surface.requestCommit();
+                return;
+            }
+        }
+        this.flushStyling();
+        routeProp(el, name, this.wrapCallback(el, name, value));
         this.surface.requestCommit();
     }
+    // AN `on*` PROP IS CALLED BY THE ENGINE, so Angular is told nothing and a plain field mutation
+    // inside the app's handler dirties no view — the "pan readout stuck at dx 0" bug
+    // `change-detection-flush.ts` records. It used to be wrapped by `SymbioteElement.ngOnChanges`,
+    // which is the wrong place now that most element directives are withheld from runtime matching
+    // (`../runtime-matching`): a withheld tag's binding reaches the renderer DIRECTLY through
+    // `ɵɵproperty` and never passes through a directive at all.
+    //
+    // Here it is reached by both paths and by every adapter surface — an element binding, a composed
+    // component's flat bag, an imperative write — which is a better home than the one it left.
+    //
+    // The cache is per NODE rather than per caller, because a node is what both paths agree on, and the
+    // wrapper is built on the first callback a node receives: the overwhelming majority of tags carry
+    // no `on*` prop, and an eager one would be a closure and a `WeakMap` per element for nothing.
+    wrapCallback(node, name, value) {
+        if (!isWrappableCallback(name, value))
+            return value;
+        let wrapper = this.callbackWrappers.get(node);
+        if (wrapper === undefined) {
+            wrapper = createCallbackWrapper(node);
+            this.callbackWrappers.set(node, wrapper);
+        }
+        return wrapper(name, value);
+    }
     setValue(node, value) {
         countAngular('rendererWrites');
         noteAngularWrite('#text');
@@ -429,11 +609,11 @@ export class SymbioteRenderer {
         if (!isSymbioteNode(target))
             return () => { };
         // `[(value)]` desugars to `(valueChange)`, which is the spelling every Angular template writes
-        // for a Switch or a TextInput. On the COMPONENT path it is an `@Output()` the wrapper derives
-        // from the raw `change` payload; on a LOWERED element there is no component, and registering
-        // `valueChange` as an engine event would wait forever for a Fabric event of that name.
+        // for a Switch or a TextInput. It used to be an `@Output()` a wrapper derived from the raw
+        // `change` payload; a tag has no component, and registering `valueChange` as an engine event
+        // would wait forever for a Fabric event of that name.
         //
-        // The lowered path already carries the same fold under RN's own spelling: both behaviors call
+        // The same fold already exists under RN's own spelling: both behaviors call
         // `node.props.onValueChange(event)` — a plain function PROP, not an event
         // (`behaviors/switch.ts`, `behaviors/text-input.ts`), with `text`/`value` carried as a FIELD on
         // the event object rather than a second argument (Svelte forces every individual `on*` prop
@@ -442,17 +622,20 @@ export class SymbioteRenderer {
         // unwrap that field back to a bare value before handing it to Angular's callback, or `text =
         // $event` would assign the whole event object instead of the typed string/boolean.
         if (eventName === VALUE_CHANGE_EVENT) {
-            const forwardValue = withChangeDetection(target, (event) => {
-                if (isSymbioteEvent(event)) {
-                    if ('text' in event)
-                        return callback(event.text);
-                    if ('value' in event)
-                        return callback(event.value);
-                }
-                return callback(event);
-            });
-            routeProp(target, VALUE_CHANGE_PROP, forwardValue);
-            return () => routeProp(target, VALUE_CHANGE_PROP, undefined);
+            // `ngOnChanges` may already have written an explicit `[onValueChange]` binding onto this
+            // same prop key via `routeProp` (`setProperty`'s generic reflect loop) — seed the live
+            // explicit-handler slot from it, unless what's there is a PRIOR bridge's own forward
+            // function (the Angular-vs-manual-bridge double-registration this branch already dedupes,
+            // `listen(VALUE_CHANGE_EVENT)` fires twice per element — see `bridgedValueChangeHandlers`).
+            // Composing with the explicit handler (never replacing it) is the RN-parity behavior: RN's
+            // `onChange` always fires regardless of whether `value` is controlled.
+            const currentOnValueChange = propOf(target, VALUE_CHANGE_PROP);
+            if (isReadBackListener(currentOnValueChange) &&
+                !bridgedValueChangeHandlers.has(currentOnValueChange)) {
+                explicitValueChangeHandlers.set(target, currentOnValueChange);
+            }
+            routeProp(target, VALUE_CHANGE_PROP, composeValueChangeHandler(target, callback));
+            return () => routeProp(target, VALUE_CHANGE_PROP, explicitValueChangeHandlers.get(target));
         }
         const listener = READ_BACK_EVENTS.has(eventName)
             ? withChangeDetection(target, callback)
@@ -465,8 +648,6 @@ export class SymbioteRenderer {
 // surface-bound renderer for every component (begin/end commit-coalescing is unnecessary —
 // requestCommit already microtask-coalesces).
 export class SymbioteRendererFactory {
-    surface;
-    renderer;
     constructor(surface) {
         this.surface = surface;
     }