@symbiote-native/angular 3.0.1 → 3.1.0

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

@@ -13,9 +13,10 @@
 // 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>`, forwarding the captured templateRef + context through
-//     VListOutletDirective. Item/index/separators pass through 1:1 (no row wrapping).
+//     direct projection hop, which always resolves. The per-cell item and separator templates go
+//     straight in through VirtualizedList's `[itemTemplate]`/`[itemSeparatorTemplate]`, so a cell
+//     is ONE outlet deep (a re-stamp doubled every cell's embedded views); the once-per-list
+//     header/footer/empty slots are still re-stamped.
 //   * 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
@@ -52,6 +53,7 @@ import {
   expandRowViewability,
   firstItemOfRow,
   lastItemOfRow,
+  removeClippedSubviewsOrDefault,
   rowKeyExtractor,
   type IRow,
   type IScrollViewHandle,
@@ -61,6 +63,7 @@ import {
   type IVirtualizedListHandle,
 } from '@symbiote-native/components';
 import {
+  Platform,
   dlog,
   flattenStyle,
   resolveClassName,
@@ -111,15 +114,6 @@ const NOOP_SEPARATORS: ISeparators = {
   updateProps: (): void => undefined,
 };
 
-// Angular cannot preserve VListSeparatorDirective<ItemT>'s type parameter across this re-stamp
-// reuse (the directive is matched structurally in FlatList's own template with no explicit type
-// argument to pin ItemT to, so `let-leadingItem`/`let-trailingItem` arrive typed `unknown`) — even
-// though VirtualizedList's own buildSeparatorContext always supplies a real ItemT value. The
-// narrowest possible I/O-boundary cast for that gap; not a general-purpose unknown-to-T narrowing.
-function asItem<ItemT>(value: unknown): ItemT | undefined {
-  return value as ItemT | undefined;
-}
-
 // Re-export the shared list types + the authoring directives so the app can import the cell/slot
 // directives alongside FlatList (mirrors how virtualized-list/index re-exports them).
 export type {
@@ -226,6 +220,8 @@ export type IFlatListInputs<ItemT> = Omit<
         [scrollEventThrottle]="scrollEventThrottle"
         [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
         [keyboardDismissMode]="keyboardDismissMode"
+        [removeClippedSubviews]="resolvedRemoveClippedSubviews"
+        [nestedScrollEnabled]="nestedScrollEnabled"
         [testID]="testID"
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
@@ -310,21 +306,14 @@ export type IFlatListInputs<ItemT> = Omit<
         [scrollEventThrottle]="scrollEventThrottle"
         [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
         [keyboardDismissMode]="keyboardDismissMode"
+        [removeClippedSubviews]="resolvedRemoveClippedSubviews"
+        [nestedScrollEnabled]="nestedScrollEnabled"
         [testID]="testID"
         [style]="resolvedStyle"
         [contentContainerStyle]="contentContainerStyle"
+        [itemTemplate]="itemDir?.templateRef"
+        [itemSeparatorTemplate]="separatorDir?.templateRef"
       >
-        <ng-template
-          vListItem
-          let-item
-          let-index="index"
-          let-separators="separators"
-        >
-          <ng-container
-            [vListOutlet]="itemDir?.templateRef"
-            [vListOutletContext]="{ $implicit: item, index, separators }"
-          ></ng-container>
-        </ng-template>
         @if (headerDir !== undefined) {
           <ng-template vListHeader>
             <ng-container [vListOutlet]="headerDir.templateRef"></ng-container>
@@ -340,21 +329,6 @@ export type IFlatListInputs<ItemT> = Omit<
             <ng-container [vListOutlet]="emptyDir.templateRef"></ng-container>
           </ng-template>
         }
-        @if (separatorDir !== undefined) {
-          <ng-template
-            vListSeparator
-            let-highlighted="highlighted"
-            let-leadingItem="leadingItem"
-            let-trailingItem="trailingItem"
-          >
-            <ng-container
-              [vListOutlet]="separatorDir.templateRef"
-              [vListOutletContext]="
-                itemSeparatorContext(highlighted, leadingItem, trailingItem)
-              "
-            ></ng-container>
-          </ng-template>
-        }
       </VirtualizedList>
     }
   `,
@@ -426,9 +400,19 @@ export class FlatList<ItemT = unknown>
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  @Input() removeClippedSubviews?: boolean;
+  @Input() nestedScrollEnabled?: boolean;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
 
+  // FlatList.js always sends it, defaulted per platform.
+  get resolvedRemoveClippedSubviews(): boolean {
+    return removeClippedSubviewsOrDefault(
+      this.removeClippedSubviews,
+      Platform.OS,
+    );
+  }
+
   // The app's cell + slot templates, captured for the multi-column re-stamp path. In the
   // single-column path they are ALSO projected through <ng-content> to the inner list and these
   // captures stay unused (the inner list's own @ContentChild resolves them across the projection).
@@ -583,22 +567,6 @@ export class FlatList<ItemT = unknown>
     };
   }
 
-  // Single-column separator context: leadingItem/trailingItem are already real items (no row
-  // wrapper to narrow through — see the asItem boundary comment above).
-  itemSeparatorContext(
-    highlighted: unknown,
-    leadingItem: unknown,
-    trailingItem: unknown,
-  ): IVListSeparatorContext<ItemT> {
-    const isHighlighted = highlighted === true;
-    return {
-      $implicit: isHighlighted,
-      highlighted: isHighlighted,
-      leadingItem: asItem<ItemT>(leadingItem),
-      trailingItem: asItem<ItemT>(trailingItem),
-    };
-  }
-
   // ---- imperative handle (RN FlatList surface) — delegates to the inner VirtualizedList ----
 
   scrollToOffset(params: { offset: number; animated?: boolean }): void {

package/src/components/modal/index.ts

@@ -2,10 +2,8 @@
 // through the same childSet as the rest of the tree (no second JS surface). The style math (the
 // backdrop override, the container/host styles, the presentationStyle default), the visible gate,
 // and the iOS keep-alive reducer all live framework-agnostic in @symbiote-native/components and are shared
-// verbatim with React/Vue; here Angular supplies only the lifecycle: the keep-alive state + a
-// POST-render transition (ngOnChanges queues the reducer on a microtask so it runs AFTER the render
-// that used the OLD state, the Angular twin of React's useEffect / Vue's post-flush watch — one
-// keep-alive frame survives the visible→hidden transition), reusing renderModal's resolved props.
+// verbatim with React/Vue; here Angular supplies only the lifecycle: the keep-alive state, armed on
+// show (ngOnChanges) and dropped by the native dismiss on iOS, reusing renderModal's resolved props.
 // The user children nest UNDER the container View via <ng-content>.
 
 import {
@@ -27,7 +25,9 @@ import {
 } from '@angular/core';
 import {
   createInitialModalState,
+  isModalVisible,
   modalReducer,
+  modalVisibilityAction,
   renderModal,
   resolveAccessibilityProps,
   shouldRenderModal,
@@ -42,6 +42,7 @@ import {
 import {
   dlog,
   isSymbioteEvent,
+  Platform,
   type IStyleProp,
   type ISymbioteEvent,
   type IViewStyle,
@@ -112,7 +113,7 @@ export type IAngularModalInputs = Omit<
       <modal
         [symbioteHostProps]="hostProps()"
         (show)="show.emit()"
-        (dismiss)="dismiss.emit()"
+        (dismiss)="handleDismiss()"
         (requestClose)="requestClose.emit()"
         (orientationChange)="emit(orientationChange, $event)"
       >
@@ -180,8 +181,8 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   @Input('aria-valuenow') ariaValueNow?: number;
   @Input('aria-valuetext') ariaValueText?: string;
 
-  // The iOS keep-alive (state/modal.ts): on visible→hidden the node renders one more frame
-  // (isRendered still true) before unmounting, so the native onDismiss can arrive.
+  // The iOS keep-alive (state/modal.ts): after visible→hidden the node stays until the native
+  // onDismiss (`handleDismiss`) drops it.
   private state: IModalState = createInitialModalState(false);
 
   private readonly changeDetector = inject(ChangeDetectorRef);
@@ -192,7 +193,7 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
   private readonly elementRef = inject(ElementRef);
 
   ngOnInit(): void {
-    this.state = createInitialModalState(this.visible === true);
+    this.state = createInitialModalState(isModalVisible(this.visible));
   }
 
   // Bridges the non-reactive @Input fields `hostProps` reads into the reactive graph, so it can
@@ -212,20 +213,25 @@ export class Modal implements IAngularModalInputs, OnInit, OnChanges, DoCheck {
     const visibleChange = changes.visible;
     // First change is reflected by the ngOnInit seed; only later toggles drive the keep-alive.
     if (visibleChange === undefined || visibleChange.firstChange) return;
-    const isVisible = this.visible === true;
-    // Queue on a microtask so the reducer runs AFTER this CD pass renders with the OLD state —
-    // the keep-alive frame. A synchronous dispatch here would unmount in the same pass.
+    // Arms the iOS keep-alive on show; a hide is left to the native dismiss (state/modal.ts).
+    const action = modalVisibilityAction(isModalVisible(this.visible));
+    if (action === undefined) return;
     queueMicrotask(() => {
-      this.state = modalReducer(
-        this.state,
-        isVisible ? { type: 'show' } : { type: 'hide' },
-      );
+      this.state = modalReducer(this.state, action);
       this.changeDetector.markForCheck();
     });
   }
 
+  // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+  handleDismiss(): void {
+    if (Platform.OS !== 'ios') return;
+    this.state = modalReducer(this.state, { type: 'hide' });
+    this.changeDetector.markForCheck();
+    this.dismiss.emit();
+  }
+
   get shouldRender(): boolean {
-    const render = shouldRenderModal(this.visible === true, this.state);
+    const render = shouldRenderModal(isModalVisible(this.visible), this.state);
     if (!render) dlog('Modal hidden -> no node committed');
     return render;
   }

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

@@ -177,6 +177,8 @@ export type ISectionListInputs<ItemT> = Omit<
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
+      [removeClippedSubviews]="removeClippedSubviews"
+      [nestedScrollEnabled]="nestedScrollEnabled"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
       [testID]="testID"
@@ -343,6 +345,8 @@ export class SectionList<ItemT = unknown>
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  @Input() removeClippedSubviews?: boolean;
+  @Input() nestedScrollEnabled?: boolean;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
   @Input() testID?: string;

package/src/components/virtualized-list/directives.ts

@@ -35,7 +35,7 @@ import {
   type OnDestroy,
   type SimpleChanges,
 } from '@angular/core';
-import { dlog } from '@symbiote-native/engine';
+import { dlog, isDebug } from '@symbiote-native/engine';
 import { countAngular } from '../../diagnostics';
 import type { ISeparators } from '@symbiote-native/components';
 
@@ -129,9 +129,10 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['templateRef'] !== undefined) {
-      dlog(
-        `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef'].previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
-      );
+      if (isDebug())
+        dlog(
+          `Angular VListOutlet#${this.instanceId} templateRef CHANGED (was=${changes['templateRef'].previousValue !== undefined} now=${this.templateRef !== undefined}) -> clear + recreate`,
+        );
       this.viewContainer.clear();
       countAngular('outletCreates');
       this.viewRef =
@@ -145,9 +146,10 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
     }
     if (this.viewRef !== null && this.context !== undefined) {
       countAngular('outletUpdates');
-      dlog(
-        `Angular VListOutlet#${this.instanceId} context updated, markForCheck`,
-      );
+      if (isDebug())
+        dlog(
+          `Angular VListOutlet#${this.instanceId} context updated, markForCheck`,
+        );
       this.updateContext(this.viewRef.context, this.context);
       this.viewRef.markForCheck();
     }
@@ -155,7 +157,7 @@ export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
 
   ngOnDestroy(): void {
     countAngular('outletDestroys');
-    dlog(`Angular VListOutlet#${this.instanceId} destroyed`);
+    if (isDebug()) dlog(`Angular VListOutlet#${this.instanceId} destroyed`);
     this.viewContainer.clear();
   }
 

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

@@ -34,6 +34,7 @@ import {
   EventEmitter,
   Input,
   Output,
+  TemplateRef,
   ViewChild,
   computed,
   inject,
@@ -183,6 +184,8 @@ export interface IVirtualizedListProps<ItemT>
   scrollEventThrottle?: number;
   keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  removeClippedSubviews?: boolean;
+  nestedScrollEnabled?: boolean;
   style?: IStyleProp<IViewStyle>;
   contentContainerStyle?: IStyleProp<IViewStyle>;
 }
@@ -267,7 +270,7 @@ interface IWindowCell<ItemT> {
               [style]="cellStyle"
             >
               <ng-container
-                [vListOutlet]="itemDir?.templateRef"
+                [vListOutlet]="cellTemplate"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
             </sticky-header>
@@ -282,12 +285,12 @@ interface IWindowCell<ItemT> {
                 [style]="cellStyle"
               >
                 <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutlet]="cellTemplate"
                   [vListOutletContext]="cell.context"
                 ></ng-container>
                 @if (cell.separatorContext !== undefined) {
                   <ng-container
-                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutlet]="separatorTemplate"
                     [vListOutletContext]="cell.separatorContext"
                   ></ng-container>
                 }
@@ -298,12 +301,12 @@ interface IWindowCell<ItemT> {
                 [style]="cellStyle"
               >
                 <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutlet]="cellTemplate"
                   [vListOutletContext]="cell.context"
                 ></ng-container>
                 @if (cell.separatorContext !== undefined) {
                   <ng-container
-                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutlet]="separatorTemplate"
                     [vListOutletContext]="cell.separatorContext"
                   ></ng-container>
                 }
@@ -351,7 +354,7 @@ interface IWindowCell<ItemT> {
               [style]="cellStyle"
             >
               <ng-container
-                [vListOutlet]="itemDir?.templateRef"
+                [vListOutlet]="cellTemplate"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
             </sticky-header>
@@ -373,12 +376,12 @@ interface IWindowCell<ItemT> {
                 [style]="cellStyle"
               >
                 <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutlet]="cellTemplate"
                   [vListOutletContext]="cell.context"
                 ></ng-container>
                 @if (cell.separatorContext !== undefined) {
                   <ng-container
-                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutlet]="separatorTemplate"
                     [vListOutletContext]="cell.separatorContext"
                   ></ng-container>
                 }
@@ -389,12 +392,12 @@ interface IWindowCell<ItemT> {
                 [style]="cellStyle"
               >
                 <ng-container
-                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutlet]="cellTemplate"
                   [vListOutletContext]="cell.context"
                 ></ng-container>
                 @if (cell.separatorContext !== undefined) {
                   <ng-container
-                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutlet]="separatorTemplate"
                     [vListOutletContext]="cell.separatorContext"
                   ></ng-container>
                 }
@@ -500,6 +503,8 @@ export class VirtualizedList<ItemT = unknown>
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  @Input() removeClippedSubviews?: boolean;
+  @Input() nestedScrollEnabled?: boolean;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
   @Input() testID?: string;
@@ -550,6 +555,20 @@ export class VirtualizedList<ItemT = unknown>
   @ContentChild(VListSeparatorDirective)
   separatorDir?: VListSeparatorDirective<ItemT>;
 
+  // A wrapping list (FlatList) hands its app's cell/separator templates straight in, so a cell is
+  // one outlet deep instead of a wrapper outlet around the app's own; each wins over projection.
+  @Input() itemTemplate?: TemplateRef<IVListItemContext<ItemT>>;
+  @Input() itemSeparatorTemplate?: TemplateRef<IVListSeparatorContext<ItemT>>;
+
+  get cellTemplate(): TemplateRef<IVListItemContext<ItemT>> | undefined {
+    return this.itemTemplate ?? this.itemDir?.templateRef;
+  }
+
+  get separatorTemplate():
+    TemplateRef<IVListSeparatorContext<ItemT>> | undefined {
+    return this.itemSeparatorTemplate ?? this.separatorDir?.templateRef;
+  }
+
   // The inner scroll TAG's own engine node — a template ref on a bare intrinsic hands back the
   // host node directly (`isSymbioteNode(elementRef.nativeElement)`, matching `anchorHostStyle`'s
   // own reader below), so there is no wrapper component left to read a handle off. Present from
@@ -739,6 +758,11 @@ export class VirtualizedList<ItemT = unknown>
       scrollEventThrottle: this.scrollEventThrottle,
       keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
       keyboardDismissMode: this.keyboardDismissMode,
+      // RN's VirtualizedList spreads its props onto the ScrollView, this one included.
+      removeClippedSubviews: this.removeClippedSubviews,
+      nestedScrollEnabled: this.nestedScrollEnabled,
+      // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
+      isInvertedVirtualizedList: this.isInverted ? true : undefined,
       contentOffset: this.commandedOffset,
       // `stickyHeaderIndices` is deliberately NOT forwarded — it numbers the scroll view's PAINT
       // children, and a windowed list paints a header, a spacer and a slice, so the positions move
@@ -1041,7 +1065,7 @@ export class VirtualizedList<ItemT = unknown>
       this.headerDir !== undefined,
       this.footerDir !== undefined,
       this.emptyDir !== undefined,
-      this.separatorDir !== undefined,
+      this.separatorTemplate !== undefined,
     ];
     const previous = this.lastRecompute;
     this.lastRecompute = recomputeInputs;
@@ -1076,7 +1100,7 @@ export class VirtualizedList<ItemT = unknown>
     const m = this.listState.metrics;
     this.itemCount = m.count;
     const hasHeader = this.headerDir !== undefined;
-    const hasSeparators = this.separatorDir !== undefined;
+    const hasSeparators = this.separatorTemplate !== undefined;
     const stickySet =
       this.stickyHeaderIndices !== undefined
         ? new Set(this.stickyHeaderIndices)
@@ -1087,8 +1111,9 @@ export class VirtualizedList<ItemT = unknown>
       : this.contentContainerStyle;
     this.resolvedStyle = flattenStyle([
       anchorHostStyle(this.elementRef),
+      // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
       this.isInverted
-        ? [this.style, this.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE]
+        ? [this.isHorizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE, this.style]
         : this.style,
     ]);
     this.cellStyle = this.isInverted

package/src/components/virtualized-section-list/index.ts

@@ -146,6 +146,8 @@ export interface IVirtualizedSectionListProps<ItemT>
   scrollEventThrottle?: number;
   keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  removeClippedSubviews?: boolean;
+  nestedScrollEnabled?: boolean;
   style?: IStyleProp<IViewStyle>;
   contentContainerStyle?: IStyleProp<IViewStyle>;
 }
@@ -213,6 +215,8 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
+      [removeClippedSubviews]="removeClippedSubviews"
+      [nestedScrollEnabled]="nestedScrollEnabled"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
       [testID]="testID"
@@ -375,6 +379,8 @@ export class VirtualizedSectionList<ItemT = unknown>
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+  @Input() removeClippedSubviews?: boolean;
+  @Input() nestedScrollEnabled?: boolean;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
   @Input() testID?: string;

package/src/descriptor-to-angular/index.ts

@@ -86,8 +86,10 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
   private createElement(descriptor: IDescriptor): IRenderedElement {
     const node = this.renderer.createElement(descriptor.type);
     const props = { ...descriptor.props };
-    for (const [key, value] of Object.entries(props)) {
-      this.renderer.setProperty(node, key, value);
+    // `Object.keys` rather than `Object.entries` — `entries` allocates a pair array per key up front,
+    // and this runs once per rendered descriptor element. See `object-iteration-cost.itest.ts`.
+    for (const key of Object.keys(props)) {
+      this.renderer.setProperty(node, key, props[key]);
     }
 
     const children = descriptor.children.map(child => this.createChild(child));
@@ -155,7 +157,8 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
         this.renderer.setProperty(rendered.node, key, undefined);
       }
     }
-    for (const [key, value] of Object.entries(nextProps)) {
+    for (const key of Object.keys(nextProps)) {
+      const value = nextProps[key];
       if (!Object.is(prevProps[key], value)) {
         this.renderer.setProperty(rendered.node, key, value);
       }

package/src/element-props.ts

@@ -8,13 +8,9 @@
 // differ, since a bare tag takes children from the template and a handle from `#ref`, so neither
 // `children` nor `ref` appears here.
 //
-// `style` IS declared, reversing what this comment said until 2026-09-11. Leaving it to Angular's
-// styling engine was not the conservative choice it reads as: an array decomposes into
-// numeric-index keys there and a press-state CALLBACK throws out of `toStylingKeyValueArray`,
-// aborting the enclosing template update — which is what an app writes, and what every deleted
-// wrapper component accepted. The claim that a directive can reclaim it "solely by executing a
-// linked AOT artifact" was answered rather than assumed: `elements.test.ts` compiles the binding
-// through real ngtsc and runs the LINKED output. See `SymbioteElement.style`.
+// `style` and `styleProp` are TWO bindings. `[style]` is Angular's styling binding: an object or CSS
+// string, as on a DOM element, unclaimed because a claim is a directive instance per element. An RN
+// array or press-state callback throws in that engine, so it travels as `[styleProp]`.
 import type {
   IAccessibilityProps,
   IAriaProps,
@@ -31,6 +27,17 @@ import type {
 
 type IEventHandler = (event: ISymbioteEvent) => void;
 
+/**
+ * What `[style]` carries on a tag: Angular's own styling binding, decomposed key by key into
+ * `Renderer2.setStyle` exactly as on a DOM element. A style OBJECT or a CSS string - never an array
+ * or a function, which that engine cannot represent. Those are `[styleProp]`.
+ */
+export type IAngularStyleBinding<TStyle> = TStyle | string | null | undefined;
+
+/** RN's full StyleProp, press-state callback included: the `[styleProp]` binding. */
+export type IElementStyleProp =
+  IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+
 export interface IElementProps
   extends IAccessibilityProps, IAriaProps, IResponderProps {
   /** RN's modern W3C-named alias for `nativeID`; the renderer folds it (`PROP_ALIASES`). */
@@ -43,13 +50,14 @@ export interface IElementProps
   renderToHardwareTextureAndroid?: boolean;
   shouldRasterizeIOS?: boolean;
   needsOffscreenAlphaCompositing?: boolean;
+  style?: IAngularStyleBinding<IViewStyle>;
   /**
-   * The press-state callback is in the union because a subclass cannot widen an
-   * inherited property and `<pressable>`/`<touchable-*>` are the tags that take one; on every other
-   * tag the engine resolves it at `pressed: false`.
+   * An RN StyleProp as ONE property binding: arrays, falsy entries, and the press-state callback.
+   * The callback is in the union because a subclass cannot widen an inherited property and
+   * `<pressable>`/`<touchable-*>` are the tags that take one; on every other tag the engine resolves
+   * it at `pressed: false`.
    */
-  style?:
-    IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
+  styleProp?: IElementStyleProp;
   onPress?: IEventHandler;
   onPressIn?: IEventHandler;
   onPressOut?: IEventHandler;
@@ -63,7 +71,8 @@ export interface IElementProps
 /** Text's own surface on top of the shared one. `onTextLayout` is an event, so it is not here. */
 export interface ITextElementProps {
   /** Narrows the shared `style` so `fontSize` / `fontWeight` type-check on a `<text>`. */
-  style?: IStyleProp<ITextStyle>;
+  style?: IAngularStyleBinding<ITextStyle>;
+  styleProp?: IStyleProp<ITextStyle>;
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
   selectable?: boolean;