@symbiote-native/angular 0.6.2 → 0.7.0

package/src/modules/animated/animated-leaf-binder.ts

@@ -1,101 +1,52 @@
-// Pure Fabrication (GRASP): the leaf-lifecycle orchestration shared by every Animated*
-// wrapper, extracted out of AnimatedComponentBase so AnimatedImage — which cannot extend
-// AnimatedComponentBase, since it must extend ImageBase for TS's-native image handling —
-// gets the SAME logic via composition instead of copy-pasting it. Framework-thin on
-// purpose: it knows nothing about Angular (@ViewChild, DI, change detection), only the
-// engine's Animated leaf + commit primitives, so it stays testable without any Angular
-// bootstrap. NOTE: react/vue drive this same dance through their own runtime HOC
-// (createAnimatedComponent) rather than a class, so there is no cross-adapter dedup
-// opportunity here yet — this Pure Fabrication is local to the angular adapter.
+// Angular's binding of the shared AnimatedProps leaf lifecycle (core/engine's
+// createAnimatedLeafLifecycle). The POLICY - when to rebuild, when to skip, attach-new-before-
+// detach-old, native event rebinding - lives in the engine and is identical for every adapter;
+// this class supplies only the two things that are genuinely Angular's: how the host node is
+// resolved (a @ViewChild directive, not a ref), and the whenCommitted deferral its batched
+// change detection forces.
+//
+// Pure Fabrication (GRASP): kept as its own class rather than folded into AnimatedComponentBase so
+// AnimatedImage - which must extend ImageBase instead - gets the same wiring by composition rather
+// than copy-paste.
 import {
-  AnimatedProps,
-  attachNativeEventHandler,
-  dlog,
+  createAnimatedLeafLifecycle,
   whenCommitted,
+  type IAnimatedLeafLifecycle,
   type ISymbioteNode,
 } from '@symbiote-native/engine';
 
 export class AnimatedLeafBinder {
-  // The leaf currently wired into the value graph. Null until the first reconcile.
-  private attached: AnimatedProps | null = null;
-  // The whenCommitted waiter for the current leaf's node binding, cancelled before the next.
-  private cancelBind: (() => void) | undefined;
-  // Detachers for any Animated.event prop bound natively to the committed node (JS path: none).
-  private eventDetachers: Array<() => void> = [];
+  private readonly lifecycle: IAnimatedLeafLifecycle;
 
   // `resolveNode` stays a caller-supplied resolver (not a constructor-captured node) so this
-  // class never needs to know HOW the host node is found — AnimatedComponentBase and
+  // class never needs to know HOW the host node is found - AnimatedComponentBase and
   // AnimatedImage both resolve it the same way (resolveHostNode + isSymbioteNode over their
   // own @ViewChild), but that's Angular DI state this binder has no business touching.
   // `label` is purely diagnostic (dlog), mirroring the constructor.name the pre-extraction
   // dlog call used.
   constructor(
     private readonly resolveNode: () => ISymbioteNode | null,
-    private readonly label: string,
-  ) {}
-
-  // Build a fresh AnimatedProps leaf from the current props (the React/Vue per-render
-  // useMemo(rest)), wire it into the graph, and swap the previous one out. Attach the NEW leaf
-  // BEFORE detaching the OLD one: a shared Value self-detaches (dropping its native node) the
-  // instant its child count hits zero, so detaching first would kill a running native animation
-  // on any unrelated re-render (mirrors RN's AnimatedComponent._attachProps). Then bind the
-  // committed node, go native if wanted, and rebind native events.
-  reconcile(props: Record<string, unknown>, wantsNative: boolean): void {
-    dlog(`${this.label} reconcile`);
-    const newLeaf = new AnimatedProps(props);
-    newLeaf.__attach();
-    if (this.attached !== null && this.attached !== newLeaf) this.attached.__detach();
-    this.attached = newLeaf;
-
-    this.bindNode(newLeaf, props, wantsNative);
+    label: string,
+  ) {
+    this.lifecycle = createAnimatedLeafLifecycle(label);
   }
 
-  // Bind the leaf to the host's Fabric node THROUGH whenCommitted: under Angular's zoneless
-  // batched change detection the inner host's tag does not exist yet at ngAfterViewInit time
-  // (the same async-commit gotcha Vue documents), so binding eagerly would no-op. whenCommitted
-  // runs the action now if already committed, else after the commit that assigns the tag.
-  private bindNode(
-    leaf: AnimatedProps,
-    props: Record<string, unknown>,
-    wantsNative: boolean,
-  ): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
+  // Only the NATIVE half is deferred through whenCommitted (which runs it NOW when the node is
+  // already committed - the steady state, and the only path a scroll frame takes). The leaf itself
+  // always joins the value graph synchronously: deferring THAT too put the build behind a
+  // canceller the next reconcile drops, so a component reconciling faster than it commits never
+  // attached anything and a sticky header's rebuilt interpolation never reached the graph.
+  // Regression-covered in leaf-attach-before-commit.test.ts.
+  reconcile(props: Record<string, unknown>, wantsNative: boolean): void {
     const node = this.resolveNode();
-    if (node === null) return;
-    this.cancelBind = whenCommitted(node, () => {
-      leaf.setNativeView(node);
-      if (wantsNative) leaf.__makeNative();
-      this.attachEvents(node, props);
-    });
-  }
-
-  // Native-attach any Animated.event prop (e.g. onScroll={Animated.event(…,{useNativeDriver:true})})
-  // to the committed node. attachNativeEventHandler no-ops (returns undefined) unless the prop is a
-  // native event handler with a committed tag, so the JS path stays the fallback. Rebound each
-  // reconcile so a new inline event re-attaches; detached first to avoid leaking the prior binding.
-  private attachEvents(node: ISymbioteNode, props: Record<string, unknown>): void {
-    this.detachEvents();
-    for (const key of Object.keys(props)) {
-      const attachment = attachNativeEventHandler(node, key, props[key]);
-      if (attachment !== undefined) this.eventDetachers.push(attachment.detach);
-    }
-  }
-
-  private detachEvents(): void {
-    for (const detach of this.eventDetachers) detach();
-    this.eventDetachers = [];
+    this.lifecycle.reconcile(props, node, wantsNative, bind =>
+      node === null ? undefined : whenCommitted(node, bind),
+    );
   }
 
   // Tear down everything: cancel a still-pending bind, drop native event listeners, detach the
   // current leaf from the value graph. Safe to call even if reconcile() was never called.
   destroy(): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
-    this.detachEvents();
-    if (this.attached !== null) {
-      this.attached.__detach();
-      this.attached = null;
-    }
+    this.lifecycle.teardown();
   }
 }

package/src/modules/animated/create-animated-component.ts

@@ -1,22 +1,18 @@
-// createAnimatedComponent for @symbiote-native/angular: the Angular twin of the React/Vue
-// wrapper. React/Vue have a runtime HOC (`createAnimatedComponent(Component)` builds a
-// fresh wrapped component on the fly). Angular has NO such idiom AND it cannot have one:
-// the AOT-under-Metro build compiles every @Component at build
-// time and ships NO JIT compiler to Hermes, so a runtime `Component({...})(class)` would
-// throw. The idiomatic, AOT-safe equivalent is therefore an EXPLICIT set of standalone
-// components — AnimatedView / AnimatedText / AnimatedImage / AnimatedScrollView — each a
-// thin @Component over the matching host primitive, all sharing one abstract lifecycle
-// base. The mechanism (build an AnimatedProps leaf, reduce animated props to current
-// values for the first paint, bind the leaf to the committed host node, swap leaves on
-// re-render, tear down on destroy) lives once in AnimatedComponentBase; only the per-host
-// template differs.
+// createAnimatedComponent for @symbiote-native/angular. React/Vue have a runtime HOC
+// (`createAnimatedComponent(Component)` builds a fresh wrapped component on the fly); Angular
+// can't — the AOT-under-Metro build compiles every @Component ahead of time and ships no JIT
+// compiler to Hermes, so a runtime `Component({...})(class)` would throw. The AOT-safe
+// equivalent is an EXPLICIT set of standalone components — AnimatedView / AnimatedText /
+// AnimatedImage / AnimatedScrollView — each a thin @Component over the matching host primitive,
+// sharing one abstract lifecycle base. The mechanism (build an AnimatedProps leaf, reduce
+// animated props to current values for the first paint, bind the leaf to the committed host
+// node, swap leaves on re-render, tear down on destroy) lives once in AnimatedComponentBase.
 //
 // The framework-agnostic half (reduceProps / readPassthroughStyle / resolveHostNode /
 // AnimatedProps / attachNativeEventHandler / isNativeAnimatedAvailable) comes from
-// @symbiote-native/engine, shared verbatim with React and Vue. Angular supplies
-// only the lifecycle wiring. The per-frame path NEVER goes through Angular change
-// detection: value.setValue / animation -> flushValue -> AnimatedProps.update() ->
-// setNativeProps(node), exactly as on the other adapters.
+// @symbiote-native/engine, shared with React and Vue. The per-frame path NEVER goes through
+// Angular change detection: value.setValue / animation -> flushValue -> AnimatedProps.update()
+// -> setNativeProps(node), same as the other adapters.
 
 import {
   ChangeDetectionStrategy,
@@ -25,8 +21,10 @@ import {
   Directive,
   ElementRef,
   inject,
+  signal,
   ViewChild,
   type AfterViewInit,
+  type DoCheck,
   type OnChanges,
   type OnDestroy,
   type Type,
@@ -43,11 +41,12 @@ import { selectScrollIntrinsics } from '@symbiote-native/components';
 import { Image, ScrollView, Text, View } from '../../components';
 import {
   anchorHostStyle,
-  ViewHost,
-  TextHost,
   ImageHost,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  TextHost,
+  ViewHost,
 } from '../../primitives';
 import { FlatList } from '../../components/flat-list';
 import {
@@ -67,9 +66,8 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // The inputs every animated wrapper accepts. `style` is the (possibly animated) style — the
 // common path (TouchableOpacity passes `[style, { opacity }]`). `animatedProps` is the generic
 // escape hatch for any OTHER prop that may hold an AnimatedNode or an Animated.event handler,
-// plus static host props to forward (the React/Vue `rest`). The passthrough drives native.
-// Each concrete @Component re-lists these (Angular's inputs-on-base convention, mirroring
-// Switch/Image), so they are inherited consistently.
+// plus static host props to forward (the React/Vue `rest`). Each concrete @Component re-lists
+// these (Angular's inputs-on-base convention, mirroring Switch/Image).
 export const ANIMATED_INPUTS = ['style', 'animatedProps', PASSTHROUGH_PROP];
 export const ANIMATED_IMAGE_INPUTS = [...IMAGE_INPUTS, 'animatedProps', PASSTHROUGH_PROP];
 
@@ -79,7 +77,9 @@ export const ANIMATED_IMAGE_INPUTS = [...IMAGE_INPUTS, 'animatedProps', PASSTHRO
 // @Directive() (no selector) is the Angular-sanctioned decorator for an abstract base that
 // declares lifecycle hooks — without it ngtsc rejects the inherited hooks (NG2007).
 @Directive()
-export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges, OnDestroy {
+export abstract class AnimatedComponentBase
+  implements AfterViewInit, DoCheck, OnChanges, OnDestroy
+{
   style: unknown;
   animatedProps: Record<string, unknown> | undefined;
   passthroughAnimatedPropExplicitValues: unknown;
@@ -115,10 +115,29 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
       reduced['style'] =
         reduced['style'] === undefined ? passthroughStyle : [reduced['style'], passthroughStyle];
     }
-    reduced['style'] = [anchorHostStyle(this.elementRef), reduced['style']];
+    reduced['style'] = [this.anchorStyle(), reduced['style']];
     return reduced;
   }
 
+  // The anchor's class-derived style, polled rather than read live inside `reducedProps`.
+  //
+  // Two different writers land style on this component's anchor and NEITHER goes through
+  // ngOnChanges: `class=` / `[class.x]` / `[ngClass]` at the use site (via the renderer's
+  // addClass/removeClass -> commitClassStyle), and a `[style]` binding from a composing parent
+  // that Angular writes as a host property because `style` is not declared as an @Input here.
+  // Reading them live in the getter worked at CREATION only - nothing dirties THIS view when the
+  // anchor changes, so the getter was never re-read and the update was lost. Device-visible as a
+  // TouchableOpacity whose `class` toggled after mount never repainted.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+  // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+  // unchanged poll a no-op, so a steady screen costs one property read per pass and nothing else.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngAfterViewInit(): void {
     this.viewReady = true;
     this.reconcile();
@@ -167,6 +186,7 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
 @Component({
   selector: 'AnimatedView, symbiote-animated-view',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ViewHost],
   inputs: ANIMATED_INPUTS,
@@ -182,6 +202,7 @@ export class AnimatedView extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedText, symbiote-animated-text',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextHost],
   inputs: ANIMATED_INPUTS,
@@ -197,6 +218,7 @@ export class AnimatedText extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedImage, symbiote-animated-image',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ImageHost],
   inputs: ANIMATED_IMAGE_INPUTS,
@@ -251,6 +273,25 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
     return resolved;
   }
 
+  // The anchor's class-derived style, polled rather than read live inside `reducedProps`.
+  //
+  // Two different writers land style on this component's anchor and NEITHER goes through
+  // ngOnChanges: `class=` / `[class.x]` / `[ngClass]` at the use site (via the renderer's
+  // addClass/removeClass -> commitClassStyle), and a `[style]` binding from a composing parent
+  // that Angular writes as a host property because `style` is not declared as an @Input here.
+  // Reading them live in the getter worked at CREATION only - nothing dirties THIS view when the
+  // anchor changes, so the getter was never re-read and the update was lost. Device-visible as a
+  // TouchableOpacity whose `class` toggled after mount never repainted.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+  // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+  // unchanged poll a no-op, so a steady screen costs one property read per pass and nothing else.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngAfterViewInit(): void {
     this.viewReady = true;
     this.reconcile();
@@ -291,6 +332,7 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 @Component({
   selector: 'AnimatedScrollView, symbiote-animated-scroll-view',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ScrollViewHost],
   inputs: ANIMATED_INPUTS,
@@ -305,20 +347,17 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 })
 export class AnimatedScrollView extends AnimatedComponentBase {
   // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`) — Android
-  // needs it explicit or a ScrollView nested inside another scrollable container never
-  // receives touch (swallowed by the outer scroll view; iOS doesn't gate on this). The real
-  // ScrollView component already defaults this (scroll-view/shared.ts), but AnimatedScrollView
-  // talks to the raw primitive directly and has no such defaulting, so it must apply it too.
+  // needs it explicit or a nested ScrollView never receives touch (swallowed by the outer one;
+  // iOS doesn't gate on this). The real ScrollView component already defaults this
+  // (scroll-view/shared.ts), but AnimatedScrollView talks to the raw primitive directly and
+  // must apply it too.
   //
-  // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the OTHER thing
-  // the real ScrollView applies that this bespoke template used to skip entirely — without it,
-  // iOS Fabric never clips the scroll view's content to its own frame (Android's native
-  // ViewGroup clips regardless of the style prop, which is why this was invisible there). This
-  // wrapper has no dedicated `horizontal` input (only the generic `animatedProps`/`style`
-  // surface), and its template is hardcoded to the vertical intrinsics
-  // (symbiote-scroll-view/symbiote-scroll-content, not the horizontal variants), so
-  // selectScrollIntrinsics is always called with isHorizontal=false here — matching what the
-  // template can actually render.
+  // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the other thing the
+  // real ScrollView applies that this bespoke template used to skip — without it, iOS Fabric
+  // never clips content to the scroll view's frame (invisible on Android, whose native ViewGroup
+  // clips regardless of style). This wrapper has no `horizontal` input and its template is
+  // hardcoded to the vertical intrinsics, so selectScrollIntrinsics is always called with
+  // isHorizontal=false here, matching what the template can actually render.
   override get reducedProps(): Record<string, unknown> {
     const reduced = super.reducedProps;
     const { scrollViewBaseStyle } = selectScrollIntrinsics(false, undefined);

package/src/modules/app-registry/index.ts

@@ -15,16 +15,14 @@ import {
 } from '@symbiote-native/engine';
 import { mount } from '../../render';
 
-// RN's IComponentProvider: a thunk returning the root component (lazy so the module
-// graph stays cheap until the app actually runs).
+// RN's IComponentProvider. Lazy so the module graph stays cheap until the app actually runs.
 export type IComponentProvider = () => Type<unknown>;
 
-// RN's IWrapperComponentProvider: given the surface's parameters, returns a
-// component to wrap the app root in (e.g. a context provider). Optional. Angular has no
-// runtime template synthesis (no JIT under AOT/Metro — see create-animated-component.ts),
-// so the wrapper must be a pre-authored standalone @Component whose template renders
-// `<ng-content>` — the Angular idiom for "render my children" (mount() projects the root's
-// host node into it, the twin of React's createElement(Wrapper, null, rootElement)).
+// RN's IWrapperComponentProvider (e.g. a context provider). Angular has no runtime template
+// synthesis (no JIT under AOT/Metro — see create-animated-component.ts), so the wrapper must be
+// a pre-authored standalone @Component whose template renders `<ng-content>` — the Angular idiom
+// for "render my children" (mount() projects the root's host node into it, the twin of React's
+// createElement(Wrapper, null, rootElement)).
 export type IWrapperComponentProvider = (appParameters: IAppParameters) => Type<unknown>;
 
 function runnableFor(

package/src/primitives/index.ts

@@ -11,6 +11,7 @@ export {
   anchorStyleProp,
   stableAnchorStyle,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from './shared';
 
 @Component({

package/src/primitives/shared.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectorRef,
   Directive,
+  type DoCheck,
   ElementRef,
   inject,
   Input,
@@ -101,6 +102,85 @@ export function stableAnchorStyle(
 
 const ON_PREFIX = /^on[A-Z]/;
 
+// The one `onX` that fires per FRAME rather than per gesture, and with sticky headers RN pins
+// `scrollEventThrottle` to 1 (ScrollView.js), so 60 times a second. Since markForCheck walks
+// RefreshView|Dirty to the ROOT, wrapping it cost one full ancestor-screen template execution per
+// frame - the canary's ~37fps scroll (components/virtualized-list/scroll-cost.test.ts).
+//
+// Nothing lost its refresh: VirtualizedList marks itself when the window moves, sticky rides the
+// native driver, and a caller's own handler is typically an Animated.event touching no Angular
+// state. Drag/momentum begin/end stay wrapped - once per gesture is not a hot path.
+const PER_FRAME_CALLBACK = 'onScroll';
+
+/**
+ * Restores the OnPush dirty-marking Angular skips for a `[style]` binding that a directive
+ * declares as an input. Attach it to any component declaring a `style` input:
+ * `hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }]`.
+ *
+ * An ordinary `[foo]` binding compiles to `ɵɵproperty` -> `setPropertyAndInputs`, whose last act
+ * for a component host is `markDirtyIfOnPush` (`render3/instructions/shared.ts`) — the flag
+ * `detectChangesInView` needs before it will re-execute a non-CheckAlways view. `[style]` and
+ * `[class]` do NOT take that path: they compile to the styling instructions, which on finding a
+ * directive input of the same name hand off to `setDirectiveInputsWhichShadowsStyling`
+ * (`render3/instructions/property.ts`) — two lines that write the input and stop. No dirty flag.
+ * The input lands and `ngOnChanges` fires, but the receiving component's own template, and every
+ * getter it reads, is frozen at its creation value. Verified against @angular/core 22.0.8.
+ *
+ * Symbiote sits squarely on that gap: every composed component declares `style` as a real
+ * `@Input()` on purpose, because a raw `[style]` binding would otherwise be decomposed key by key
+ * by Angular's CSS style engine, which cannot represent an RN StyleProp array or an Animated value
+ * (see `SymbiotePrimitiveHost` above). So the one binding name Angular forgets to mark is the one
+ * carrying the whole styling surface.
+ *
+ * `markForCheck()` here is exactly the skipped `markDirtyIfOnPush`, not a bigger hammer: the write
+ * happens inside the parent's refresh, and `markViewDirty` uses the `Dirty` bit alone while views
+ * are refreshing (`render3/instructions/mark_view_dirty.ts`), which the ancestors then clear at the
+ * end of their own `refreshView`. A component that already bridges its inputs into a signal (the
+ * `inputsRevision` + `computed` pattern — Pressable, ScrollView) is immune on its own, since a
+ * signal write dirties the template consumer, which `detectChangesInView` honors in any mode.
+ */
+@Directive({
+  selector: '[symbioteStyleInput]',
+  standalone: true,
+  inputs: ['style'],
+})
+export class SymbioteStyleInputDirective implements DoCheck, OnChanges {
+  private readonly cdr = inject(ChangeDetectorRef);
+  // A host directive's ElementRef is the HOST COMPONENT's element - i.e. exactly the anchor a
+  // `class=` at the use site resolves onto.
+  private readonly elementRef = inject(ElementRef);
+  private lastAnchorStyle: unknown;
+
+  style?: unknown;
+
+  ngOnChanges(): void {
+    this.cdr.markForCheck();
+  }
+
+  // The `class` half of the same gap, and it needs a POLL, not a hook: a class at the use site
+  // never becomes an input, so there is no SimpleChanges entry to fire on. Making the view refresh
+  // is enough - every composed component re-reads the anchor in a getter on its own.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view would be skipped, so the mark
+  // lands in the same pass rather than one behind. The dedup gate is load-bearing: marking on every
+  // check re-dirties the view every tick and free-runs CD, the hazard `stableAnchorStyle` above
+  // prevents one level up.
+  ngDoCheck(): void {
+    const current = anchorHostStyle(this.elementRef);
+    if (isAnchorStyleUnchanged(this.lastAnchorStyle, current)) return;
+    this.lastAnchorStyle = current;
+    this.cdr.markForCheck();
+  }
+}
+
+// Reference equality is the normal path (the engine replaces props.style only on a real class
+// change); the shallow compare guards against an equal-but-fresh object, which would turn the poll
+// above into a CD loop.
+function isAnchorStyleUnchanged(previous: unknown, next: unknown): boolean {
+  if (Object.is(previous, next)) return true;
+  return isRecord(previous) && isRecord(next) && shallowStyleEqual(previous, next);
+}
+
 /**
  * Base for all Angular primitive host components (`symbiote-view`, `symbiote-text`, ...).
  * RN's `StyleProp` can be an object, an array, nested arrays, falsy entries, and Animated
@@ -156,6 +236,17 @@ export class SymbioteHostPropsDirective {
   // The directive lives in its HOST component's template, so its injected ChangeDetectorRef IS
   // that component's own view detector — the one thing that can refresh it (see wrapCallback).
   private readonly cdr = inject(ChangeDetectorRef);
+  // One wrapper per ORIGINAL handler, for the lifetime of this directive. Without it every push
+  // of the props bag allocated a brand-new closure for every `onX` key, and the engine stored it
+  // as a new listener (`setEventListener` allocates its own closure on top) - per key, per push,
+  // on a path a scroll frame reaches 60 times a second. The wrapper body closes over nothing but
+  // `value` and this instance's `cdr`, so the handler alone is a complete cache key; `key` is
+  // read only by the ON_PREFIX guard above and never enters the wrapper.
+  //
+  // Reference stability is the point, not just the allocation: a fresh function on every push
+  // defeats every downstream identity check on the bag, so nothing upstream could ever conclude
+  // "this bag is unchanged" while a callback prop was in it.
+  private readonly wrappers = new WeakMap<object, (...args: unknown[]) => unknown>();
 
   get node(): unknown {
     return this.elementRef.nativeElement;
@@ -180,11 +271,19 @@ export class SymbioteHostPropsDirective {
   // for free (setState / proxy reactivity).
   private wrapCallback(key: string, value: unknown): unknown {
     if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
-    const handler = value as (...args: unknown[]) => unknown;
-    return (...args: unknown[]): unknown => {
-      const result = handler(...args);
+    if (key === PER_FRAME_CALLBACK) return value;
+    const cached = this.wrappers.get(value);
+    if (cached !== undefined) return cached;
+    // Reflect.apply rather than calling a cast-to-signature local: `typeof value === 'function'`
+    // narrows to `Function`, which has no call signature TypeScript will accept, and this repo
+    // does not use `as` to paper over that. `undefined` as the receiver preserves the previous
+    // unbound call.
+    const wrapper = (...args: unknown[]): unknown => {
+      const result: unknown = Reflect.apply(value, undefined, args);
       this.cdr.markForCheck();
       return result;
     };
+    this.wrappers.set(value, wrapper);
+    return wrapper;
   }
 }

package/src/render/index.ts

@@ -119,43 +119,31 @@ export function mount(
         useValue: new SymbioteRendererFactory(surface),
       },
       { provide: DOCUMENT, useValue: { head: surface, body: surface } },
-      // createEnvironmentInjector with a null parent gives this injector scope
-      // {'environment'} only (see EnvironmentNgModuleRefAdapter), so providedIn:'root'
-      // tokens — ApplicationRef included — never resolve on their own (R3Injector.get
-      // walks up looking for an injector whose `scopes` contains 'root', and a null
-      // parent means that search always dead-ends in NullInjector). platform-browser's
-      // BROWSER_MODULE_PROVIDERS solves this the same way for real DOM apps: it hands
-      // { provide: INJECTOR_SCOPE, useValue: 'root' } to its OWN app-level providers, and
-      // R3Injector's constructor reads that provider and self-tags this.scopes with
-      // 'root'. We do the same here — no PlatformRef, no DOM, just this one provider.
+      // createEnvironmentInjector with a null parent scopes this injector to {'environment'}
+      // only (see EnvironmentNgModuleRefAdapter), so providedIn:'root' tokens — ApplicationRef
+      // included — never resolve (R3Injector.get walks up for a `scopes` containing 'root', and
+      // a null parent always dead-ends in NullInjector). platform-browser solves this the same
+      // way for real DOM apps via BROWSER_MODULE_PROVIDERS: hand { provide: INJECTOR_SCOPE,
+      // useValue: 'root' } to the app-level providers, which R3Injector's constructor reads to
+      // self-tag this.scopes with 'root'. Same trick here, no PlatformRef, no DOM.
       { provide: INJECTOR_SCOPE, useValue: 'root' },
-      // Supplies the real ChangeDetectionSchedulerImpl (microtask-batched, self-scheduling
-      // via ApplicationRef.afterTick) + NoopNgZone + ZONELESS_ENABLED: true — the exact
-      // bundle internalCreateApplication() uses. With ApplicationRef reachable (see above),
-      // there is no more reason for a hand-rolled scheduler: it replaces our old
-      // unconditional `rootView.detectChanges(); cmpView.detectChanges()` (which force-ran
-      // BOTH root views on every tick regardless of cause) with Angular's own tick(), which
-      // only enters an attached view when something actually marked it (RefreshView / Dirty
-      // consumer / HasChildViewsToRefresh). NOTE: this does NOT stop the root's own template
-      // from re-running on a plain press or `ChangeDetectorRef.markForCheck()` anywhere in
-      // the tree — `markViewDirty` (which both native (event) bindings and `markForCheck()`
-      // go through, see SymbioteHostPropsDirective) unconditionally sets RefreshView on
-      // EVERY ancestor up to the root; that is fundamental, unavoidable Angular zoneless
-      // behavior, true in every Angular app, not something this swap changes. What DOES
-      // still protect a sibling branch from an unrelated press is a genuine child
-      // `@Component` boundary — SignalView-compiled children are skip-eligible regardless of
-      // this scheduler.
+      // Supplies the real ChangeDetectionSchedulerImpl (microtask-batched via
+      // ApplicationRef.afterTick) + NoopNgZone + ZONELESS_ENABLED: true — the exact bundle
+      // internalCreateApplication() uses. Replaces the old unconditional
+      // `rootView.detectChanges(); cmpView.detectChanges()` (force-ran both root views on every
+      // tick) with Angular's own tick(), which only enters a view something actually marked
+      // dirty. This does NOT stop the root's own template from re-running on a plain press or
+      // `markForCheck()` anywhere in the tree — `markViewDirty` unconditionally sets RefreshView
+      // on every ancestor up to the root; that's fundamental Angular zoneless behavior, not
+      // something this swap changes. A genuine child `@Component` boundary still protects a
+      // sibling branch from an unrelated press.
       ...provideZonelessChangeDetectionInternal(),
-      // Angular's own INTERNAL_APPLICATION_ERROR_HANDLER (core.mjs) reports a tick()
-      // exception by calling `injector.get(ErrorHandler)` — a normal `bootstrapApplication`
-      // registers this token by default (platform-browser's BROWSER_MODULE_PROVIDERS), but
-      // our from-scratch environment injector never did, so that lookup itself threw
-      // NG0201 and REPLACED whatever the real error was with an unrelated "No provider
-      // found for ErrorHandler" — the real exception never got logged, and the NG0201 itself
-      // propagated out of a bare Timeout callback uncaught (nothing above it in the stack to
-      // catch it), i.e. any async tick() exception, anywhere in the app, crashed hard instead
-      // of being reported. Providing the default `ErrorHandler` (same one bootstrapApplication
-      // ships) restores the intended behavior: `console.error('ERROR', e)` and keep running.
+      // Angular's INTERNAL_APPLICATION_ERROR_HANDLER reports a tick() exception via
+      // `injector.get(ErrorHandler)`; a normal `bootstrapApplication` registers that token by
+      // default, but our from-scratch environment injector never did, so the lookup itself threw
+      // NG0201 and replaced the real error with "No provider found for ErrorHandler" — any async
+      // tick() exception crashed hard, uncaught, instead of being reported. Providing the
+      // default `ErrorHandler` restores `console.error('ERROR', e)` and keep running.
       { provide: ErrorHandler, useClass: ErrorHandler },
       ColorSchemeService,
       WindowDimensionsService,

package/build/angular/modules/animated/animated-leaf-binder/index.d.ts

@@ -1,14 +0,0 @@
-import { type ISymbioteNode } from '@symbiote-native/engine';
-export declare class AnimatedLeafBinder {
-    private readonly resolveNode;
-    private readonly label;
-    private attached;
-    private cancelBind;
-    private eventDetachers;
-    constructor(resolveNode: () => ISymbioteNode | null, label: string);
-    reconcile(props: Record<string, unknown>, wantsNative: boolean): void;
-    private bindNode;
-    private attachEvents;
-    private detachEvents;
-    destroy(): void;
-}