@symbiote-native/angular 0.6.2 → 0.8.0

package/src/primitives/shared.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectorRef,
   Directive,
+  type DoCheck,
   ElementRef,
   inject,
   Input,
@@ -8,6 +9,7 @@ import {
   Renderer2,
   type SimpleChanges,
 } from '@angular/core';
+import { countAngular } from '../diagnostics';
 import {
   flattenStyle,
   isSymbioteNode,
@@ -60,7 +62,9 @@ function isStyleValue<T>(value: unknown): value is IStyleProp<T> {
   );
 }
 
-export function anchorStyleProp<T>(elementRef: ElementRef<unknown>): IStyleProp<T> | undefined {
+export function anchorStyleProp<T>(
+  elementRef: ElementRef<unknown>,
+): IStyleProp<T> | undefined {
   const value = anchorHostStyle(elementRef);
   return isStyleValue<T>(value) ? value : undefined;
 }
@@ -69,7 +73,10 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 
-function shallowStyleEqual(a: Record<string, unknown>, b: Record<string, unknown>): boolean {
+function shallowStyleEqual(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
   const aKeys = Object.keys(a);
   if (aKeys.length !== Object.keys(b).length) return false;
   return aKeys.every(key => a[key] === b[key]);
@@ -96,11 +103,96 @@ export function stableAnchorStyle(
   previous: unknown,
 ): Record<string, unknown> {
   const next = flattenStyle([anchorHostStyle(elementRef), explicitStyle]);
-  return isRecord(previous) && shallowStyleEqual(previous, next) ? previous : next;
+  return isRecord(previous) && shallowStyleEqual(previous, next)
+    ? previous
+    : next;
 }
 
 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 {
+    countAngular('styleChecks');
+    const current = anchorHostStyle(this.elementRef);
+    if (isAnchorStyleUnchanged(this.lastAnchorStyle, current)) return;
+    this.lastAnchorStyle = current;
+    countAngular('styleMarks');
+    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
@@ -114,10 +206,17 @@ const ON_PREFIX = /^on[A-Z]/;
  * custom renderer's `setProperty`, so the engine's `routeProp` handles them as usual.
  */
 @Directive()
-export abstract class SymbiotePrimitiveHost implements OnChanges {
+export abstract class SymbiotePrimitiveHost implements DoCheck, OnChanges {
   private readonly renderer = inject(Renderer2);
   private readonly elementRef = inject(ElementRef);
 
+  // Counting only. Angular calls this once per view per check, so it is the only honest measure of
+  // how much tree a tick walks - and with CheckAlways primitives that is the whole application, not
+  // the screen on top. One integer increment next to a template refresh is not measurable.
+  ngDoCheck(): void {
+    countAngular('viewsChecked');
+  }
+
   @Input() style?: IStyleProp<unknown>;
 
   /**
@@ -130,8 +229,18 @@ export abstract class SymbiotePrimitiveHost implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (!('style' in changes)) return;
-    const value = this.style === undefined ? undefined : flattenStyle(this.style);
-    this.renderer.setProperty(this.elementRef.nativeElement, 'style', value);
+    const value =
+      this.style === undefined ? undefined : flattenStyle(this.style);
+    this.setHostProp('style', value);
+  }
+
+  /**
+   * Push one resolved prop onto the host element. `protected` rather than exposing the injected
+   * Renderer2/ElementRef, so a subclass applying its own defaults (TextHost) uses the same single
+   * write path this base already uses for `style`.
+   */
+  protected setHostProp(key: string, value: unknown): void {
+    this.renderer.setProperty(this.elementRef.nativeElement, key, value);
   }
 }
 
@@ -156,15 +265,58 @@ 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
+  >();
+
+  // Values pushed by the previous bag, so a push writes only what actually moved. Copied rather
+  // than aliased: a component is free to hand back the same object with mutated fields.
+  private pushed: Record<string, unknown> = {};
 
   get node(): unknown {
     return this.elementRef.nativeElement;
   }
 
+  // MEASURED 2026-08-20, headless 1000-row create: writing every key of every bag cost 104 000
+  // engine setProp calls where Solid's identical screen cost 12 000 — and 90 000 of them carried
+  // `undefined`. A composed component's bag is a FIXED-SHAPE literal (Pressable's is ~48 keys,
+  // most of them unset on any given instance), so the first push of a fresh node spends most of
+  // its work deleting keys the node never had. Diffing per key removes exactly that: an unset key
+  // is skipped on mount and still written the moment it changes to or from a real value.
   set symbioteHostProps(props: Record<string, unknown>) {
+    const pushed = this.pushed;
+    // Only keys the node actually carries, so the vanished-key sweep below walks a handful rather
+    // than the bag's whole declared shape.
+    const next: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(props)) {
-      this.renderer.setProperty(this.elementRef.nativeElement, key, this.wrapCallback(key, value));
+      if (value !== undefined) next[key] = value;
+      if (Object.is(pushed[key], value)) continue;
+      this.renderer.setProperty(
+        this.elementRef.nativeElement,
+        key,
+        this.wrapCallback(key, value),
+      );
+    }
+    // A bag's key SET is not fixed across pushes — resolveAccessibilityProps folds aria-* aliases
+    // into a different shape once any of them holds a value — and a key that vanishes must clear
+    // the prop rather than leave the last value on the native view. A key still IN the bag was
+    // already handled above, `undefined` included.
+    for (const key of Object.keys(pushed)) {
+      if (key in props) continue;
+      this.renderer.setProperty(this.elementRef.nativeElement, key, undefined);
     }
+    this.pushed = next;
   }
 
   // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's
@@ -180,11 +332,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

@@ -10,6 +10,7 @@ import {
   createSurface,
   disposeRoot,
   dlog,
+  reportUncaughtError,
   toPublicInstance,
   type ISymbioteNode,
   type IRootTag,
@@ -62,7 +63,35 @@ function asAngularHost(hostNode: SymbioteSurface | ISymbioteNode): Element {
 // to the wrapper as projectable content.
 function createDetachedViewHost(): ISymbioteNode {
   const descriptor = descriptorFor('View');
-  return toPublicInstance(createEngineElement(descriptor.component, descriptor.isText));
+  return toPublicInstance(
+    createEngineElement(descriptor.component, descriptor.isText),
+  );
+}
+
+// Angular's whole unhandled-error funnel: INTERNAL_APPLICATION_ERROR_HANDLER resolves this token
+// and hands it everything the framework caught on the app's behalf — a scheduled (async) tick that
+// threw, a template listener that threw, a rejected pending task. Routed to the engine so an
+// Angular app reaches the same native redbox as a React one instead of a console line nobody sees
+// off a dev machine.
+//
+// There is deliberately no caught-vs-uncaught split here, unlike the React adapter's
+// onUncaughtError/onCaughtError pair. Angular has no error boundary, and every path where the app
+// DID handle something keeps clear of this seam on its own: a `@defer` block with an `@error`
+// branch renders that branch (defer/rendering.ts calls handleUncaughtError only when there is
+// none), `resource()` parks the failure in its own error signal, and an app-level try/catch or
+// `catchError` never reaches Angular at all. So anything arriving here is by construction
+// unclaimed, and the redbox is the right answer for all of it.
+//
+// Two things this must not do. It must not also call `super.handleError` — reportUncaughtError
+// picks exactly one channel (host reporter or console) precisely because RN routes console.error
+// into LogBox too, so the pair would double-report every error. And it must not throw: the
+// scheduler invokes this from inside its own `catch` (zoneless_scheduling_impl.ts's tick), where a
+// second throw escapes to the host and kills the "report and keep running" behaviour the provider
+// exists for.
+class SymbioteErrorHandler extends ErrorHandler {
+  override handleError(error: unknown): void {
+    reportUncaughtError(error, { origin: 'angular render' });
+  }
 }
 
 interface IMountedApp {
@@ -81,7 +110,10 @@ export interface IMountOptions {
   wrapperComponent?: Type<unknown>;
 }
 
-function applyInputs(cmpRef: ComponentRef<unknown>, initialProps: object | undefined): void {
+function applyInputs(
+  cmpRef: ComponentRef<unknown>,
+  initialProps: object | undefined,
+): void {
   if (initialProps === undefined) return;
   for (const [key, value] of Object.entries(initialProps)) {
     cmpRef.setInput(key, value);
@@ -118,45 +150,51 @@ export function mount(
         provide: RendererFactory2,
         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.
+      // `getElementById` is not decoration: `resource()` resolves TransferState, whose root
+      // factory runs `retrieveTransferredState(doc, appId)` ->
+      // `doc.getElementById(appId + '-state')` (core/src/transfer_state.ts:156) to pick up
+      // server-rendered state. A stub without it makes that a TypeError, and because the throw
+      // happens while the component is being constructed, the ENTIRE screen renders nothing —
+      // white body under a native header that navigation drew anyway, no error surfaced. The
+      // `optional: true` on the injector lookup does not help: the token resolves, its factory
+      // is what throws. Returning null is the honest client answer — there is no server here, so
+      // `script?.tagName` short-circuits and the caller gets `{}`.
+      {
+        provide: DOCUMENT,
+        useValue: {
+          head: surface,
+          body: surface,
+          getElementById: (): null => null,
+        },
+      },
+      // 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.
-      { provide: ErrorHandler, useClass: ErrorHandler },
+      // 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. The token still has to
+      // be provided for exactly that reason; what it resolves to is now SymbioteErrorHandler
+      // (see above), which reports through the engine instead of Angular's `console.error('ERROR',
+      // e)` and, like the default, returns rather than rethrows so the app keeps running.
+      { provide: ErrorHandler, useClass: SymbioteErrorHandler },
       ColorSchemeService,
       WindowDimensionsService,
     ],

package/src/renderer/index.ts

@@ -28,6 +28,12 @@ import { descriptorFor } from '@symbiote-native/components';
 import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
 import { isAnchorHostComponent } from '../anchor-host-registry';
 import {
+  countAngular,
+  noteAngularCreate,
+  noteAngularWrite,
+} from '../diagnostics';
+import {
+  flushScrollViewProjections,
   getScrollViewProjection,
   removeScrollViewProjectedChild,
 } from '../components/scroll-view/projection';
@@ -68,7 +74,9 @@ function describeHost(node: IHostElement | null | undefined): string {
   if (node === null || node === undefined) return 'null';
   if (isSurface(node)) return 'surface';
   const anchorId = anchorDebugIds.get(node);
-  return anchorId !== undefined ? `${node.component}#${anchorId}` : node.component;
+  return anchorId !== undefined
+    ? `${node.component}#${anchorId}`
+    : node.component;
 }
 
 const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
@@ -86,7 +94,9 @@ const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
 // 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)) {
-    throw new Error(`Text string "${String(child.props.text)}" must be rendered inside a <Text>`);
+    throw new Error(
+      `Text string "${String(child.props.text)}" must be rendered inside a <Text>`,
+    );
   }
 }
 
@@ -111,10 +121,14 @@ export class SymbioteRenderer implements Renderer2 {
     // any other string flows through as a raw Fabric name (events/processors derived from its
     // ViewConfig). toPublicInstance grafts the imperative API (measure / setNativeProps /
     // focus) onto the raw node in place, returning the SAME identity the commit mirror keys on.
+    countAngular('nodesCreated');
+    noteAngularCreate(name);
     const engineName = PRIMITIVE_SELECTOR_ALIAS[name] ?? name;
     if (isAnchorHostComponent(engineName)) {
       const anchor = tagAnchorForDebug(createAnchor());
-      dlog(`angular createElement ${name} -> anchor host ${describeHost(anchor)}`);
+      dlog(
+        `angular createElement ${name} -> anchor host ${describeHost(anchor)}`,
+      );
       return anchor;
     }
 
@@ -128,12 +142,14 @@ export class SymbioteRenderer implements Renderer2 {
     // Angular structural directives (*ngIf / @if / @for) need anchor nodes to track
     // position. A real retained node the commit walk SKIPS — no native view. Twin of the
     // Vue createComment path.
+    countAngular('nodesCreated');
     const anchor = tagAnchorForDebug(createAnchor());
     dlog(`Angular renderer createComment -> ${describeHost(anchor)}`);
     return anchor;
   }
 
   createText(value: string): IHostNode {
+    countAngular('nodesCreated');
     return createRawText(value);
   }
 
@@ -142,9 +158,12 @@ export class SymbioteRenderer implements Renderer2 {
     // (see parentNode below) — mirrors Angular's own `if (parentRNode !== null)` guard in
     // addLViewToLContainer: skip silently now, the later projection pass places it correctly.
     if (parent === null) return;
+    countAngular('nodesInserted');
     assertTextPlacement(newChild, parent);
     if (isSurface(parent)) {
-      dlog(`Angular renderer appendChild parent=surface child=${describeHost(newChild)}`);
+      dlog(
+        `Angular renderer appendChild parent=surface child=${describeHost(newChild)}`,
+      );
       parent.appendChild(newChild);
     } else {
       const projection = getScrollViewProjection(parent);
@@ -162,8 +181,13 @@ export class SymbioteRenderer implements Renderer2 {
     this.surface.requestCommit();
   }
 
-  insertBefore(parent: IHostElement | null, newChild: IHostNode, refChild: IHostNode | null): void {
+  insertBefore(
+    parent: IHostElement | null,
+    newChild: IHostNode,
+    refChild: IHostNode | null,
+  ): void {
     if (parent === null) return; // see the appendChild guard above
+    countAngular('nodesInserted');
     assertTextPlacement(newChild, parent);
     if (isSurface(parent)) {
       dlog(
@@ -177,10 +201,15 @@ export class SymbioteRenderer implements Renderer2 {
         `Angular renderer insertBefore parent=${describeHost(parent)} child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'} projection=${projection !== undefined}`,
       );
       if (projection !== undefined) {
-        projection.insertProjectedChild(parent, newChild, refChild, (target, child, before) => {
-          if (before === undefined) appendChild(target, child);
-          else insertBefore(target, child, before);
-        });
+        projection.insertProjectedChild(
+          parent,
+          newChild,
+          refChild,
+          (target, child, before) => {
+            if (before === undefined) appendChild(target, child);
+            else insertBefore(target, child, before);
+          },
+        );
       } else if (refChild) {
         insertBefore(parent, newChild, refChild);
       } else {
@@ -194,10 +223,13 @@ 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.
+    countAngular('nodesRemoved');
     const angularParent = _parent !== null ? describeHost(_parent) : 'null';
-    const retainedParent = oldChild.parent !== undefined ? describeHost(oldChild.parent) : 'none';
-    const wasProjected = removeScrollViewProjectedChild(oldChild, (parent, child) =>
-      removeChild(parent, child),
+    const retainedParent =
+      oldChild.parent !== undefined ? describeHost(oldChild.parent) : 'none';
+    const wasProjected = removeScrollViewProjectedChild(
+      oldChild,
+      (parent, child) => removeChild(parent, child),
     );
     dlog(
       `Angular renderer removeChild angularParent=${angularParent} retainedParent=${retainedParent} child=${describeHost(oldChild)} viaProjection=${wasProjected}`,
@@ -228,7 +260,8 @@ export class SymbioteRenderer implements Renderer2 {
   }
 
   nextSibling(node: IHostNode): IHostNode | null {
-    const siblings = node.parent !== undefined ? node.parent.children : this.surface.children;
+    const siblings =
+      node.parent !== undefined ? node.parent.children : this.surface.children;
     const index = siblings.indexOf(node);
     return index >= 0 ? (siblings[index + 1] ?? null) : null;
   }
@@ -243,12 +276,16 @@ export class SymbioteRenderer implements Renderer2 {
 
   setAttribute(el: IHostElement, name: string, value: string): void {
     if (isSurface(el)) return;
+    countAngular('rendererWrites');
+    noteAngularWrite(name);
     routeProp(el, name, value);
     this.surface.requestCommit();
   }
 
   removeAttribute(el: IHostElement, name: string): void {
     if (isSurface(el)) return;
+    countAngular('rendererWrites');
+    noteAngularWrite(name);
     routeProp(el, name, undefined);
     this.surface.requestCommit();
   }
@@ -264,6 +301,8 @@ export class SymbioteRenderer implements Renderer2 {
 
   addClass(el: IHostElement, name: string): void {
     if (isSurface(el)) return;
+    countAngular('rendererWrites');
+    noteAngularWrite('class');
     const tokens = this.classTokens.get(el) ?? new Set<string>();
     tokens.add(name);
     this.classTokens.set(el, tokens);
@@ -275,6 +314,8 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     const tokens = this.classTokens.get(el);
     if (tokens === undefined) return;
+    countAngular('rendererWrites');
+    noteAngularWrite('class');
     tokens.delete(name);
     routeProp(el, 'class', tokens.size > 0 ? [...tokens].join(' ') : undefined);
     this.surface.requestCommit();
@@ -287,6 +328,8 @@ export class SymbioteRenderer implements Renderer2 {
   // merge writes, and spreading an array as a record would silently produce numeric-index keys.
   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 });
@@ -297,6 +340,8 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     const current = getExplicitStyle(el);
     if (!isRecord(current)) return;
+    countAngular('rendererWrites');
+    noteAngularWrite(`style.${style}`);
     const { [style]: _removed, ...rest } = current;
     routeProp(el, 'style', rest);
     this.surface.requestCommit();
@@ -306,11 +351,15 @@ export class SymbioteRenderer implements Renderer2 {
   // ViewConfig (identical to React/Vue), so the whole flat-bag prop layer is shared.
   setProperty(el: IHostElement, name: string, value: unknown): void {
     if (isSurface(el)) return;
+    countAngular('rendererWrites');
+    noteAngularWrite(name);
     routeProp(el, name, value);
     this.surface.requestCommit();
   }
 
   setValue(node: IHostNode, value: string): void {
+    countAngular('rendererWrites');
+    noteAngularWrite('#text');
     // A useful permanent seam: text mutations are low-frequency and the one place a stale
     // `{{binding}}` (a change-detection gap) shows up as "the setValue never fired".
     dlog(`Angular renderer setValue "${value}" on ${describeHost(node)}`);
@@ -341,7 +390,20 @@ export class SymbioteRendererFactory implements RendererFactory2 {
 
   constructor(private readonly surface: SymbioteSurface) {}
 
-  createRenderer(_hostElement: unknown, _type: RendererType2 | null): Renderer2 {
+  createRenderer(
+    _hostElement: unknown,
+    _type: RendererType2 | null,
+  ): Renderer2 {
     return (this.renderer ??= new SymbioteRenderer(this.surface));
   }
+
+  // Not commit coalescing (requestCommit owns that) — this is the one moment where a ScrollView's
+  // two input channels are known to be consistent: Angular has finished writing every `@Input` AND
+  // the renderer has finished every projected insert/remove for this pass, while the surface's
+  // commit is still only queued. Sticky projection reconciles are batched to here for both reasons;
+  // see flushScrollViewProjections.
+  end(): void {
+    countAngular('cdPasses');
+    flushScrollViewProjections();
+  }
 }

package/src/services/color-scheme.service.ts

@@ -11,7 +11,9 @@ import { Appearance, type IColorSchemeName } from '@symbiote-native/engine';
  */
 @Injectable({ providedIn: 'root' })
 export class ColorSchemeService {
-  readonly colorScheme = signal<IColorSchemeName | null>(Appearance.getColorScheme());
+  readonly colorScheme = signal<IColorSchemeName | null>(
+    Appearance.getColorScheme(),
+  );
 
   constructor() {
     const destroyRef = inject(DestroyRef);