@symbiote-native/angular 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/angular",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "SymbioteNative's Angular adapter — a Renderer2/RendererFactory2 with DOM-less bootstrap driving real native iOS/Android views through the same engine as the other adapters.",
   "license": "MIT",
   "repository": {
@@ -42,7 +42,10 @@
     "metro-config.cjs",
     "babel-linker.cjs",
     "babel-register-composed.cjs",
-    "tsconfig.angular.base.json"
+    "tsconfig.angular.base.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
   ],
   "bin": {
     "symbiote-angular-dev": "./bin/symbiote-angular-dev.cjs"
@@ -51,24 +54,26 @@
     "access": "public"
   },
   "dependencies": {
-    "@angular/compiler-cli": "^22",
+    "@angular/compiler-cli": "~22.0.8",
     "@react-native/typescript-config": "0.86.0",
-    "@symbiote-native/components": "0.3.0",
-    "@symbiote-native/css-parser": "0.2.3"
+    "@symbiote-native/components": "0.4.0",
+    "@symbiote-native/css-parser": "0.3.0"
   },
   "peerDependencies": {
     "@angular/core": ">=20",
+    "@angular/forms": ">=20",
     "@symbiote-native/engine": ">=0.1.7",
     "react-native": ">=0.86"
   },
   "devDependencies": {
-    "@angular/compiler": "^22",
-    "@angular/core": "^22",
+    "@angular/compiler": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@angular/forms": "~22.0.8",
     "@babel/core": "^7.25.2",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^26.0.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/engine": "0.1.7",
+    "@symbiote-native/engine": "0.2.0",
     "@symbiote-native/test-utils": "0.1.6"
   },
   "scripts": {

package/src/anchor-host-registry.ts

@@ -11,11 +11,11 @@
 // Housing the registry here rather than inline in `renderer/index.ts` keeps it out of the require
 // cycle (cheap insurance against a load-order strand). The bug that actually surfaced this,
 // though, was STALE BUILD ARTIFACTS, not the cycle: `ngc -p` never deletes orphaned outputs, so
-// after the renderer moved `renderer.ts` → `renderer/index.ts` the orphaned `build/angular/
+// after the renderer moved `renderer.ts` -> `renderer/index.ts` the orphaned `build/angular/
 // renderer.js` lingered and SHADOWED `build/angular/renderer/index.js` (a file beats a folder in
 // Node/Metro resolution), giving the bundle a second, stale registry Set — fixed by cleaning
 // `build/` before every ngc build (see each Angular package's `clean` script). Full record:
-// angular-adapter §11c, symbiote-dev-examples §5e.
+// angular-adapter §11c.
 
 // Lowercased at construction — isAnchorHostComponent and registerComposedComponent both normalize
 // to lowercase (Angular lowercases a dynamically-mounted component's selector at runtime, see

package/src/components/activity-indicator/index.android.ts

@@ -1,11 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DescriptorOutlet } from '../../descriptor-to-angular';
 import { ActivityIndicatorBase } from './shared';
+import { SymbioteStyleInputDirective } from '../../primitives';
 export type { IActivityIndicatorProps } from './shared';
 
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,

package/src/components/activity-indicator/index.ios.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { DescriptorOutlet } from '../../descriptor-to-angular';
 import { ActivityIndicatorBase } from './shared';
+import { SymbioteStyleInputDirective } from '../../primitives';
 export type { IActivityIndicatorProps } from './shared';
 
 const IOS_DEFAULT_COLOR = '#999999';
@@ -8,6 +9,7 @@ const IOS_DEFAULT_COLOR = '#999999';
 @Component({
   selector: 'ActivityIndicator',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   imports: [DescriptorOutlet],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<symbiote-descriptor-outlet [node]="descriptor" />`,

package/src/components/button.ts

@@ -1,19 +1,17 @@
 // Button for Angular. The minimal cross-platform button in RN's iOS shape (Button.js): a
 // TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold are
-// shared in @symbiote-native/components/view; here Angular only composes its TouchableOpacity + a
-// symbiote-text child and re-maps the few Button-owned props. The Angular twin of the React/Vue
-// adapter's Button. No JS-side platform branch, so this stays a flat single file.
+// shared in @symbiote-native/components/view; Angular only composes its TouchableOpacity + a
+// symbiote-text child and re-maps the few Button-owned props. No JS-side platform branch, so this
+// stays a flat single file.
 //
-// RN's Button fixes accessibilityRole="button", marks the root accessible, and propagates `disabled`
-// into the accessibility state; those three win over any caller value. `title` becomes the Text
-// child; disabled forwards straight; touchSoundDisabled maps to the pressable's android_disableSound.
-// Every OTHER field of the shared IButtonProps (title, color, disabled, touchSoundDisabled, testID,
-// TV-focus, accessibility state) is agnostic and stays RE-EXPORTED from @symbiote-native/components
-// verbatim. onPress and the four accessibility callbacks are the
+// RN's Button fixes accessibilityRole="button", marks the root accessible, and propagates
+// `disabled` into the accessibility state; those three win over any caller value. `title` becomes
+// the Text child; disabled forwards straight; touchSoundDisabled maps to the pressable's
+// android_disableSound. Every other field of the shared IButtonProps stays RE-EXPORTED from
+// @symbiote-native/components verbatim. onPress and the four accessibility callbacks are the
 // exceptions: each is a real @Output() here (`press`, `accessibilityAction`, `accessibilityTap`,
-// `magicTap`, `accessibilityEscape`), mirroring the Vue adapter's Button, which forks the SAME onPress
-// field the same way (`Omit<ICoreButtonProps, 'onPress'>` + a `press` emit) — not a new precedent, the
-// existing one extended to accessibility.
+// `magicTap`, `accessibilityEscape`), mirroring the Vue adapter's Button, which forks the same
+// onPress field the same way — not a new precedent, the existing one extended to accessibility.
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -24,6 +22,8 @@ import {
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
 } from '@angular/core';
 import {
   BUTTON_ACCESSIBILITY_ROLE,
@@ -108,7 +108,7 @@ export type IButtonProps = Omit<
     </TouchableOpacity>
   `,
 })
-export class Button implements IButtonProps {
+export class Button implements IButtonProps, DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment in primitives/shared.ts) — NOT the inner
   // TouchableOpacity/Pressable one level down. RN's real Button takes no `style` prop, so this
@@ -187,7 +187,21 @@ export class Button implements IButtonProps {
     return resolveButtonTextStyle(this.color, this.disabled);
   }
 
+  // Polled, not read live: a class toggled after mount reaches the anchor through
+  // addClass/removeClass, which dirties nothing, so a plain getter froze at its creation value.
+  // Button cannot use SymbioteStyleInputDirective instead - RN's Button has no `style` prop, so
+  // there is no `style` @Input for it to hang off.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped; the signal write is
+  // what marks this view. The anchor returns the same props.style reference until a commit changes
+  // it, so Object.is makes an unchanged poll free.
+  private readonly anchorStyleValue = signal<IStyleProp<IViewStyle> | undefined>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyleValue.set(anchorStyleProp<IViewStyle>(this.elementRef));
+  }
+
   get anchorStyle(): IStyleProp<IViewStyle> | undefined {
-    return anchorStyleProp<IViewStyle>(this.elementRef);
+    return this.anchorStyleValue();
   }
 }

package/src/components/flat-list/index.ts

@@ -1,37 +1,35 @@
 // FlatList, the Angular convenience surface over VirtualizedList. It takes a plain `data` array
 // and derives getItem/getItemCount; numColumns packs items into rows (each row a flex-row of N
-// columns), so the virtualized stream is rows, not items (RN's FlatList). All windowing /
-// viewability / batching / imperative scrolling are inherited from VirtualizedList; the data
-// shaping (chunkIntoRows / rowKeyExtractor / expandRowViewability / row-separator unwrap) is shared
-// verbatim from @symbiote-native/components, exactly as the React and Vue FlatLists reuse it. This is the
-// Angular twin of adapters/vue/src/components/flat-list/index.ts.
+// columns), so the virtualized stream is rows, not items (RN's FlatList). Windowing / viewability /
+// batching / imperative scrolling are inherited from VirtualizedList; the data shaping
+// (chunkIntoRows / rowKeyExtractor / expandRowViewability / row-separator unwrap) is shared
+// verbatim from @symbiote-native/components, same as React/Vue's FlatLists.
 //
-// TEMPLATE FORWARDING — both paths RE-STAMP; neither uses a bare `<ng-content>` passthrough.
+// TEMPLATE FORWARDING — both column paths RE-STAMP; neither uses a bare `<ng-content>` passthrough.
 // Angular's @ContentChild does NOT resolve a directive across a SECOND `<ng-content>` re-projection
-// hop (it only sees what was projected directly onto the querying component's own tag) — a bare
-// `<VirtualizedList ...><ng-content></ng-content></VirtualizedList>` here left VirtualizedList's own
-// itemDir/headerDir/etc. undefined, so every cell rendered empty (a real, confirmed device bug — see
-// flat-list.test.ts). Fixed for both column modes the same way:
+// hop (only what's projected directly onto the querying component's own tag) — a bare
+// `<VirtualizedList ...><ng-content></ng-content></VirtualizedList>` left VirtualizedList's own
+// itemDir/headerDir/etc. undefined, rendering every cell empty (confirmed device bug, see
+// flat-list.test.ts). Fixed for both column modes:
 //   * Single column (numColumns <= 1): FlatList captures the app's `<ng-template vListItem>` (and
 //     vListHeader/vListFooter/vListEmpty/vListSeparator) with its OWN @ContentChild — a single,
 //     direct projection hop, which always resolves — then re-authors equivalent `<ng-template>`s on
-//     `<VirtualizedList>`, each forwarding the captured templateRef + context through
+//     `<VirtualizedList>`, forwarding the captured templateRef + context through
 //     VListOutletDirective. Item/index/separators pass through 1:1 (no row wrapping).
-//   * Multi column (numColumns > 1): the same re-stamp, but the app's vListItem is typed for ItemT
-//     while the virtualized stream is rows (IRow<ItemT>), so a plain passthrough couldn't work even if
-//     the projection issue didn't exist. The row vListItem lays out the N columns side by side (each
-//     cell stamps the app's item template via VListOutletDirective with the per-item context {item,
-//     index: row.startIndex + column, separators}), the row vListSeparator unwraps the flanking rows
-//     to their last/first item, and onViewableItemsChanged is wrapped with expandRowViewability so the
-//     caller still sees per-item visibility. This mirrors exactly how Vue's FlatList intercepts
-//     renderItem with renderRow.
+//   * Multi column (numColumns > 1): same re-stamp, but the app's vListItem is typed for ItemT
+//     while the virtualized stream is rows (IRow<ItemT>), so a plain passthrough couldn't work
+//     regardless. The row vListItem lays out the N columns side by side (each cell stamps the
+//     app's item template via VListOutletDirective with context {item, index: row.startIndex +
+//     column, separators}), the row vListSeparator unwraps the flanking rows to their last/first
+//     item, and onViewableItemsChanged is wrapped with expandRowViewability so the caller still
+//     sees per-item visibility — mirrors how Vue's FlatList intercepts renderItem with renderRow.
 //
 // The imperative handle (scrollToIndex / scrollToOffset / scrollToEnd / scrollToItem /
 // recordInteraction / flashScrollIndicators / getScroll* / getNativeScrollRef) is RN's FlatList
-// surface; FlatList re-exposes it by delegating to the inner VirtualizedList (@ViewChild). The
-// element-returning props (renderItem / ItemSeparatorComponent / List{Header,Footer,Empty}Component)
-// are templates in Angular, so they are absent from IFlatListProps, per the per-adapter
-// children/render prop split; everything agnostic mirrors IVirtualizedListProps.
+// surface, delegated straight to the inner VirtualizedList (@ViewChild). The element-returning
+// props (renderItem / ItemSeparatorComponent / List{Header,Footer,Empty}Component) are templates
+// in Angular, so they're absent from IFlatListProps per the per-adapter children/render split;
+// everything else mirrors IVirtualizedListProps.
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -44,6 +42,7 @@ import {
   Output,
   ViewChild,
   inject,
+  type DoCheck,
   type OnChanges,
   type SimpleChanges,
 } from '@angular/core';
@@ -81,7 +80,7 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle, ViewHost } from '../../primitives';
+import { stableAnchorStyle, SymbioteStyleInputDirective, ViewHost } from '../../primitives';
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
@@ -165,6 +164,7 @@ export type IFlatListInputs<ItemT> = Omit<
 @Component({
   selector: 'FlatList',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [
     VirtualizedList,
@@ -338,7 +338,7 @@ export type IFlatListInputs<ItemT> = Omit<
   `,
 })
 export class FlatList<ItemT = unknown>
-  implements IFlatListInputs<ItemT>, IVirtualizedListHandle, OnChanges
+  implements IFlatListInputs<ItemT>, IVirtualizedListHandle, DoCheck, OnChanges
 {
   // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
   // `[onEndReached]="…"` — re-emitted straight from the inner VirtualizedList's own @Output()s (see
@@ -427,18 +427,16 @@ export class FlatList<ItemT = unknown>
     return this.columns > SINGLE_COLUMN;
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    // Recomputed on EVERY ngOnChanges call, not gated on `changes['style']`: a class= on the
-    // FlatList use site (no matching [style] binding at all) never appears in `changes`, so a
-    // guard here would permanently skip picking up anchorHostStyle for that (the actual bug-report
-    // shape) — ngOnChanges still fires at least once at mount via the required `data` @Input(), and
-    // by then the anchor's class-derived style is already resolved synchronously (routeProp runs
-    // inline from Renderer2.addClass, before this component's own lifecycle hooks). stableAnchorStyle
-    // (not a bare flattenStyle) keeps `resolvedStyle`'s REFERENCE stable across ticks where nothing
-    // actually changed — `[style]="resolvedStyle"` binds onto VirtualizedList's own `@Input() style`,
-    // which feeds its `ngDoCheck` dedup gate; a fresh object every tick would defeat that gate and
-    // free-run change detection forever (see stableAnchorStyle's doc comment).
+  // ngDoCheck, NOT ngOnChanges: a bare `class=` never becomes an @Input, so ngOnChanges does not
+  // RUN for it and the merge froze at its creation value (a stranded tile on the ReactiveStyle
+  // canary). stableAnchorStyle, not a bare flattenStyle, keeps `resolvedStyle`'s reference stable
+  // across ticks that changed nothing - a fresh object every tick defeats VirtualizedList's own
+  // dedup gate and free-runs CD (see stableAnchorStyle's doc comment).
+  ngDoCheck(): void {
     this.resolvedStyle = stableAnchorStyle(this.elementRef, this.style, this.resolvedStyle);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
     if (changes['columnWrapperStyle'] !== undefined) {
       // A class-name string resolves through the shared registry before flattenStyle, which
       // only understands style objects/arrays.

package/src/components/image/index.android.ts

@@ -1,5 +1,18 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
-import { anchorHostStyle, ImageHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  ElementRef,
+  inject,
+  signal,
+  type DoCheck,
+  type OnChanges,
+} from '@angular/core';
+import {
+  anchorHostStyle,
+  ImageHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
@@ -14,13 +27,14 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,
   outputs: IMAGE_OUTPUTS,
   template: `
     <symbiote-image
-      [symbioteHostProps]="imageProps"
+      [symbioteHostProps]="imageProps()"
       (accessibilityAction)="handleAccessibilityAction($event)"
       (accessibilityTap)="handleAccessibilityTap($event)"
       (magicTap)="handleMagicTap($event)"
@@ -34,15 +48,45 @@ export type {
     />
   `,
 })
-export class Image extends ImageBase {
+export class Image extends ImageBase implements OnChanges, DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT the inner `symbiote-image` one level down.
   private readonly elementRef = inject(ElementRef);
 
-  override get imageProps(): Record<string, unknown> {
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass and never
+  // reaches Angular's input pipeline (a bare `class="x"` never appears in SimpleChanges — see
+  // anchorHostStyle's doc comment), so ImageBase's inputsRevision cannot see it. Hence its own
+  // signal: a plain field read inside a computed() would be untracked and the bag would go stale
+  // the moment a `[class.x]`/`[ngClass]` toggled.
+  //
+  // ngDoCheck is the right cadence: render3's callHooks flushes a node's pre-order hooks at the
+  // next `ɵɵadvance` past it (or in refreshView's post-template flush), i.e. AFTER the declaring
+  // template's ɵɵclassProp wrote the class onto this element and BEFORE this component's own view
+  // refreshes — the exact window a class poll needs. callHooks also runs under
+  // setActiveConsumer(null), so the write registers no dependency on the caller's view (no NG0600).
+  // commitClassStyle allocates a fresh style array only when a token actually moved, so signal.set's
+  // own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  //
+  // Known gap, shared with every other component polling this way (Pressable, SafeAreaView,
+  // TouchableNativeFeedback): `[ngClass]` applies its tokens from NgClass's OWN ngDoCheck, and a
+  // node's hooks flush in registration order with the component's first, so an [ngClass] flip lands
+  // one pass after this poll reads it. `class=` and `[class.x]` are written by the declaring
+  // template's styling instructions and so are always current here.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  // ImageBase is undecorated, so the input bump is declared here rather than inherited.
+  ngOnChanges(): void {
+    this.bumpInputsRevision();
+  }
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
+  protected override buildImageProps(): Record<string, unknown> {
     return resolveImageProps({
       ...this.imageInputProps,
-      style: [anchorHostStyle(this.elementRef), this.style],
+      style: [this.anchorStyle(), this.style],
     });
   }
 }

package/src/components/image/index.ios.ts

@@ -1,5 +1,18 @@
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
-import { anchorHostStyle, ImageHost, SymbioteHostPropsDirective } from '../../primitives';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  Component,
+  ElementRef,
+  inject,
+  signal,
+  type DoCheck,
+  type OnChanges,
+} from '@angular/core';
+import {
+  anchorHostStyle,
+  ImageHost,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import { IMAGE_INPUTS, IMAGE_OUTPUTS, ImageBase, resolveImageProps } from './shared';
 export { setImageSourceResolver } from './shared';
 export type {
@@ -14,13 +27,14 @@ export type {
 @Component({
   selector: 'Image',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ImageHost, SymbioteHostPropsDirective],
   inputs: IMAGE_INPUTS,
   outputs: IMAGE_OUTPUTS,
   template: `
     <symbiote-image
-      [symbioteHostProps]="imageProps"
+      [symbioteHostProps]="imageProps()"
       (accessibilityAction)="handleAccessibilityAction($event)"
       (accessibilityTap)="handleAccessibilityTap($event)"
       (magicTap)="handleMagicTap($event)"
@@ -34,15 +48,45 @@ export type {
     />
   `,
 })
-export class Image extends ImageBase {
+export class Image extends ImageBase implements OnChanges, DoCheck {
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT the inner `symbiote-image` one level down.
   private readonly elementRef = inject(ElementRef);
 
-  override get imageProps(): Record<string, unknown> {
+  // The anchor's class-derived style is written by the renderer's addClass/removeClass and never
+  // reaches Angular's input pipeline (a bare `class="x"` never appears in SimpleChanges — see
+  // anchorHostStyle's doc comment), so ImageBase's inputsRevision cannot see it. Hence its own
+  // signal: a plain field read inside a computed() would be untracked and the bag would go stale
+  // the moment a `[class.x]`/`[ngClass]` toggled.
+  //
+  // ngDoCheck is the right cadence: render3's callHooks flushes a node's pre-order hooks at the
+  // next `ɵɵadvance` past it (or in refreshView's post-template flush), i.e. AFTER the declaring
+  // template's ɵɵclassProp wrote the class onto this element and BEFORE this component's own view
+  // refreshes — the exact window a class poll needs. callHooks also runs under
+  // setActiveConsumer(null), so the write registers no dependency on the caller's view (no NG0600).
+  // commitClassStyle allocates a fresh style array only when a token actually moved, so signal.set's
+  // own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  //
+  // Known gap, shared with every other component polling this way (Pressable, SafeAreaView,
+  // TouchableNativeFeedback): `[ngClass]` applies its tokens from NgClass's OWN ngDoCheck, and a
+  // node's hooks flush in registration order with the component's first, so an [ngClass] flip lands
+  // one pass after this poll reads it. `class=` and `[class.x]` are written by the declaring
+  // template's styling instructions and so are always current here.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  // ImageBase is undecorated, so the input bump is declared here rather than inherited.
+  ngOnChanges(): void {
+    this.bumpInputsRevision();
+  }
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
+  protected override buildImageProps(): Record<string, unknown> {
     return resolveImageProps({
       ...this.imageInputProps,
-      style: [anchorHostStyle(this.elementRef), this.style],
+      style: [this.anchorStyle(), this.style],
     });
   }
 }

package/src/components/image/shared.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, computed, signal } from '@angular/core';
 import {
   imageStatics,
   renderImage,
@@ -473,7 +473,39 @@ export abstract class ImageBase {
     };
   }
 
-  get imageProps(): Record<string, unknown> {
+  // Bridges the non-reactive @Input fields into the reactive graph so imageProps below can be a
+  // memoized computed(). Signal inputs would make this unnecessary, but `input()` is visible only
+  // to the AOT compiler and this package's unit suite runs on JIT - see the
+  // `angular-adapter-change-detection` skill, §6. `signal()`/`computed()` are plain runtime APIs
+  // and need no compiler support, which is what makes this bridge possible at all.
+  //
+  // ImageBase is deliberately UNdecorated, so the ngOnChanges that bumps this lives on each
+  // platform @Component instead of here.
+  //
+  // Every dependency of the bag below is an @Input, which Angular always routes through
+  // ngOnChanges. State assigned OUTSIDE that path needs its OWN signal - never widen this one to
+  // "bump on everything", which silently un-memoizes the bag. The platform anchor style is exactly
+  // such a dependency and carries its own signal.
+  protected readonly inputsRevision = signal(0);
+
+  protected bumpInputsRevision(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, so
+  // `[symbioteHostProps]`'s reference check failed every time and every key was re-pushed through
+  // Renderer2 -> routeProp - pure waste when nothing changed. computed() returns the SAME object
+  // until a tracked dependency actually changes, and the input setter then skips the whole spread.
+  //
+  // A computed FIELD cannot be overridden by a subclass accessor the way a getter can, so the
+  // platform components override buildImageProps() below and this stays the single memoization
+  // point for every platform.
+  readonly imageProps = computed<Record<string, unknown>>(() => {
+    this.inputsRevision();
+    return this.buildImageProps();
+  });
+
+  protected buildImageProps(): Record<string, unknown> {
     return resolveImageProps(this.imageInputProps);
   }
 }

package/src/components/image-background.ts

@@ -37,7 +37,7 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { Image } from './image';
-import { anchorHostStyle, ViewHost } from '../primitives';
+import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost } from '../primitives';
 
 // Mirrors React's IImageBackgroundProps minus children (Angular takes children via <ng-content>):
 // every forwarding Image prop flows onto the inner image; `style` is the WRAPPER View style and
@@ -68,6 +68,7 @@ export type IAngularImageBackgroundInputs = Omit<
 @Component({
   selector: 'ImageBackground',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [Image, ViewHost],
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/components/input-accessory-view/index.ts

@@ -11,11 +11,15 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  computed,
   ElementRef,
   EventEmitter,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
+  type OnChanges,
 } from '@angular/core';
 import {
   renderInputAccessoryView,
@@ -34,6 +38,7 @@ import {
   anchorHostStyle,
   InputAccessoryViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from '../../primitives';
 
 // Mirrors React's IInputAccessoryViewProps minus children (Angular takes children via
@@ -56,12 +61,13 @@ export type IAngularInputAccessoryViewInputs = Omit<
 @Component({
   selector: 'InputAccessoryView',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [InputAccessoryViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <symbiote-input-accessory-view
-      [symbioteHostProps]="hostProps"
+      [symbioteHostProps]="hostProps()"
       (accessibilityAction)="emit(accessibilityAction, $event)"
       (accessibilityTap)="emit(accessibilityTap, $event)"
       (magicTap)="emit(magicTap, $event)"
@@ -71,7 +77,7 @@ export type IAngularInputAccessoryViewInputs = Omit<
     </symbiote-input-accessory-view>
   `,
 })
-export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
+export class InputAccessoryView implements IAngularInputAccessoryViewInputs, OnChanges, DoCheck {
   @Input() nativeID?: string;
   @Input() backgroundColor?: string;
   @Input() style?: IStyleProp<IViewStyle>;
@@ -135,12 +141,44 @@ export class InputAccessoryView implements IAngularInputAccessoryViewInputs {
     });
   }
 
+  // Bridges the non-reactive fields `hostProps` reads into the reactive graph, so it can memoize.
+  // Plain fields read inside a computed() are UNTRACKED - something must signal "a dependency
+  // changed" or the bag goes stale. Signal inputs would do this natively, but `input()` is visible
+  // only to the AOT compiler and this package's unit suite runs on JIT (see the
+  // `angular-adapter-change-detection` skill, §6); `signal()`/`computed()` are plain runtime APIs.
+  private readonly hostPropsRevision = signal(0);
+  // What the anchor's class-derived style was when the bag was last built (identity, not value).
+  private lastAnchorStyle: unknown;
+
+  ngOnChanges(): void {
+    // The single moment Angular has finished writing every changed @Input for this pass.
+    this.hostPropsRevision.update(revision => revision + 1);
+  }
+
+  // The anchor's class-derived style is NOT an @Input: `class="..."`/`[ngClass]` at the use site
+  // resolves through the renderer's addClass onto this component's anchor host (see
+  // anchorHostStyle's doc comment), so it never shows up in SimpleChanges and ngOnChanges alone
+  // would leave a later class toggle stranded. ngDoCheck runs at exactly the cadence the old
+  // getter was re-read, and bumps only on a real identity change.
+  ngDoCheck(): void {
+    const anchorStyle = anchorHostStyle(this.elementRef);
+    if (anchorStyle === this.lastAnchorStyle) return;
+    this.lastAnchorStyle = anchorStyle;
+    this.hostPropsRevision.update(revision => revision + 1);
+  }
+
   // The anchor's class-derived style goes FIRST, the Descriptor's resolved style SECOND —
   // flattenStyle's later-wins collapse keeps an explicit [style] winning over its ambient class.
-  get hostProps(): Record<string, unknown> {
+  //
+  // A computed(), not a getter: Angular re-reads a template getter on every refresh of this view
+  // and `[symbioteHostProps]` compares by REFERENCE, so a freshly rebuilt (but identical) bag
+  // re-pushes every key through renderer.setProperty -> the engine's prop routing - and this one
+  // re-runs renderInputAccessoryView to build it.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.hostPropsRevision();
     const descriptorProps = this.descriptor.props;
     return { ...descriptorProps, style: [anchorHostStyle(this.elementRef), descriptorProps.style] };
-  }
+  });
 
   // Typed as the a11y intersection WITH the string index (the bag renderInputAccessoryView spreads
   // into the host props), so resolveAccessibilityProps's result stays assignable to passthrough.

package/src/components/keyboard-avoiding-view/index.ts

@@ -48,7 +48,12 @@ import {
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
-import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import {
+  anchorHostStyle,
+  SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  ViewHost,
+} from '../../primitives';
 
 export type { IKeyboardAvoidingBehavior } from '@symbiote-native/components';
 
@@ -79,6 +84,7 @@ export type IAngularKeyboardAvoidingViewInputs = Omit<
 @Component({
   selector: 'KeyboardAvoidingView',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ViewHost, SymbioteHostPropsDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,