@symbiote-native/angular 2.0.1 → 3.0.0

package/src/renderer/index.ts

@@ -10,19 +10,26 @@ import {
   createAnchor,
   createElement,
   createRawText,
+  componentOf,
   dlog,
   getExplicitStyle,
   insertBefore,
   isDebug,
+  isRawTextNode,
   isSymbioteEvent,
   isSymbioteNode,
+  isTextContainer,
+  isSameShallowStyle,
+  nextSiblingOf,
+  parentOf,
+  propOf,
+  registerBeforeFlush,
   removeChild,
   routeProp,
   setEventListener,
-  setProp,
   setText,
+  textOf,
   toPublicInstance,
-  RAW_TEXT_COMPONENT,
   SymbioteSurface,
   type ISymbioteNode,
 } from '@symbiote-native/engine';
@@ -30,12 +37,12 @@ import {
   COMPONENT_DESCRIPTORS,
   descriptorFor,
 } from '@symbiote-native/components';
-import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
 import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
 import { isAnchorHostComponent } from '../anchor-host-registry';
 import {
   countAngular,
   noteAngularCreate,
+  noteAngularStyleWrite,
   noteAngularWrite,
 } from '../diagnostics';
 // Angular host nodes are all SymbioteNode (elements, raw text, anchors). The mount
@@ -48,71 +55,34 @@ function isSurface(parent: IHostElement): parent is SymbioteSurface {
 }
 
 function isRawText(node: ISymbioteNode): boolean {
-  return node.component === RAW_TEXT_COMPONENT;
+  return isRawTextNode(node);
 }
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   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: ISymbioteNode): void {
-  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: IHostElement, key: string): unknown {
-  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: ReadonlyMap<string, string> = new Map([
-  ['id', 'nativeID'],
-  ['symbioteStyle', 'style'],
-]);
-
-function aliasedPropName(name: string): string {
-  return PROP_ALIASES.get(name) ?? name;
-}
+import {
+  createCallbackWrapper,
+  flushViewFor,
+  isWrappableCallback,
+  type ICallbackWrapper,
+} 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
@@ -125,8 +95,53 @@ function aliasedPropName(name: string): string {
 // and adds the `markForCheck` a prop callback needs and an event binding gets from Angular.
 const READ_BACK_EVENTS: ReadonlySet<string> = 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;
+
 type IReadBackListener = (event: unknown) => unknown;
 
+// `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<IReadBackListener>();
+
+// 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<
+  ISymbioteNode,
+  IReadBackListener
+>();
+
+function composeValueChangeHandler(
+  target: ISymbioteNode,
+  bridgeCallback: (event: unknown) => boolean | void,
+): IReadBackListener {
+  const forwardValue = withChangeDetection(target, (event: unknown) => {
+    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: unknown): value is IReadBackListener {
+  return typeof value === 'function';
+}
+
 function withChangeDetection(
   node: IHostElement,
   listener: IReadBackListener,
@@ -158,8 +173,8 @@ function describeHost(node: IHostElement | null | undefined): string {
   if (isSurface(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
@@ -204,9 +219,9 @@ const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
 // 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: ISymbioteNode, parent: IHostElement): void {
-  if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
+  if (isRawText(child) && (isSurface(parent) || !isTextContainer(parent))) {
     throw new Error(
-      `Text string "${String(child.props.text)}" must be rendered inside a <text>`,
+      `Text string "${textOf(child) ?? ''}" must be rendered inside a <text>`,
     );
   }
 }
@@ -220,9 +235,144 @@ export class SymbioteRenderer implements Renderer2 {
   // render.ts (unmount), so per-node cleanup is a no-op.
   destroyNode: ((node: ISymbioteNode) => void) | null = null;
 
-  constructor(private readonly surface: SymbioteSurface) {}
+  // THE STYLING RUN, and why it is held rather than published key by key.
+  //
+  // Angular has no whole-value styling call: `ɵɵstyleMap` / `ɵɵclassMap` walk the key-value array
+  // and call `setStyle` / `addClass` once PER KEY (`updateStyling` -> `applyStyling`, upstream
+  // `@angular/core`). RN wants one `style` prop, so publishing on each call rebuilt the whole object
+  // every time — N writes for an N-key style, the k-th carrying k keys, and N DISTINCT values where
+  // the app authored one. Measured on the headless bench arm: `values` 10 001 against Vue's 3 004
+  // for the identical tree, and `convert` 30.0 ms against 0.6.
+  //
+  // The run is safe to hold because it is CONTIGUOUS: `updateStyling` takes its node from
+  // `getSelectedIndex()` and the loop never changes element mid-way, so the calls for one node
+  // arrive with nothing between them. Anything else — a different node, any other renderer call, a
+  // host read, the commit — closes it first.
+  // `ISymbioteNode`, not `IHostElement`: a surface is turned away by `isSurface` at every entry
+  // point, so a run can only ever be open on a real node, and saying so keeps the publish below
+  // free of a second guard.
+  private pendingStyleNode: ISymbioteNode | undefined;
+  private pendingStyle: Record<string, unknown> = {};
+  private pendingClassNode: ISymbioteNode | undefined;
+  private readonly releaseBeforeFlush: () => void;
+
+  constructor(private readonly surface: SymbioteSurface) {
+    // 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(): void {
+    this.flushStyling();
+    this.releaseBeforeFlush();
+  }
 
-  destroy(): void {}
+  /**
+   * 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.
+   */
+  private flushStyling(): void {
+    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.
+   */
+  private classStringFor(el: ISymbioteNode): string | undefined {
+    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;
+  }
+
+  /**
+   * 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.
+   */
+  private readonly publishedStyles: Record<string, unknown>[] = [];
+
+  /** A published object equal to this one, or this one — which then becomes the published copy. */
+  private canonicalStyle(
+    style: Record<string, unknown>,
+  ): Record<string, unknown> {
+    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. */
+  private openStyleRun(el: ISymbioteNode): Record<string, unknown> {
+    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;
+  }
 
   createElement(name: string): IHostNode {
     // `name` is the component's host tag — a symbiote intrinsic (`view`,
@@ -270,7 +420,6 @@ export class SymbioteRenderer implements Renderer2 {
       descriptor.isText,
       engineName,
     );
-    if (descriptor.isText) seedTextDefaults(node);
     if (isDebug()) {
       dlog(`angular createElement ${name} -> ${descriptor.component}`);
     }
@@ -354,16 +503,23 @@ export class SymbioteRenderer implements Renderer2 {
     // 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';
+        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 this.surface.removeChild(oldChild);
     this.surface.requestCommit();
@@ -383,14 +539,13 @@ export class SymbioteRenderer implements Renderer2 {
   // does `inject(ViewContainerRef)`, e.g. VListOutletDirective) forwards this null straight into
   // insertBefore without checking it; without that guard it crashed on-device.
   parentNode(node: IHostNode): IHostElement | null {
-    return node.parent ?? null;
+    return parentOf(node) ?? null;
   }
 
   nextSibling(node: IHostNode): IHostNode | null {
-    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
@@ -401,20 +556,24 @@ export class SymbioteRenderer implements Renderer2 {
     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: IHostElement, name: string, value: string): void {
     if (isSurface(el)) return;
+    this.flushStyling();
     countAngular('rendererWrites');
     noteAngularWrite(name);
-    routeProp(el, aliasedPropName(name), value);
+    routeProp(el, name, value);
     this.surface.requestCommit();
   }
 
   removeAttribute(el: IHostElement, name: string): void {
     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();
   }
 
@@ -427,6 +586,15 @@ export class SymbioteRenderer implements Renderer2 {
   // resolves identically regardless of adapter.
   private readonly classTokens = new WeakMap<IHostNode, Set<string>>();
 
+  // 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.
+  private readonly classStrings = new WeakMap<IHostNode, string>();
+  private readonly callbackWrappers = new WeakMap<
+    IHostNode,
+    ICallbackWrapper
+  >();
+
   addClass(el: IHostElement, name: string): void {
     if (isSurface(el)) return;
     countAngular('rendererWrites');
@@ -434,7 +602,7 @@ export class SymbioteRenderer implements Renderer2 {
     const tokens = this.classTokens.get(el) ?? new Set<string>();
     tokens.add(name);
     this.classTokens.set(el, tokens);
-    routeProp(el, 'class', [...tokens].join(' '));
+    this.openClassRun(el);
     this.surface.requestCommit();
   }
 
@@ -445,10 +613,18 @@ export class SymbioteRenderer implements Renderer2 {
     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.
+  private openClassRun(el: ISymbioteNode): void {
+    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),
@@ -457,21 +633,23 @@ export class SymbioteRenderer implements Renderer2 {
   setStyle(el: IHostElement, style: string, value: unknown): void {
     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: IHostElement, style: string): void {
     if (isSurface(el)) return;
-    const current = getExplicitStyle(el);
-    if (!isRecord(current)) return;
+    // 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();
   }
 
@@ -481,15 +659,64 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) 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.
+  private wrapCallback(node: IHostNode, name: string, value: unknown): unknown {
+    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: IHostNode, value: string): void {
     countAngular('rendererWrites');
     noteAngularWrite('#text');
@@ -513,11 +740,11 @@ export class SymbioteRenderer implements Renderer2 {
   ): () => void {
     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
@@ -526,15 +753,31 @@ export class SymbioteRenderer implements Renderer2 {
     // 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: unknown) => {
-        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)