@symbiote-native/angular 2.0.1 → 3.0.1

package/src/change-detection-flush.ts

@@ -58,7 +58,23 @@ interface IViewMarker {
   markForCheck(): void;
 }
 
-type ICallbackWrapper = (key: string, value: unknown) => unknown;
+export type ICallbackWrapper = (key: string, value: unknown) => unknown;
+
+/**
+ * Is this prop write one the wrapper would touch at all?
+ *
+ * Exported so a CALLER can ask before building a wrapper it may never need — an element directive is
+ * constructed per TAG, and a screen's tags overwhelmingly carry no `on*` function prop. Keeping the
+ * question here rather than copying the two tests at the call site is what stops the predicate and
+ * the wrapper drifting apart.
+ */
+export function isWrappableCallback(key: string, value: unknown): boolean {
+  return (
+    ON_PREFIX.test(key) &&
+    typeof value === 'function' &&
+    key !== PER_FRAME_CALLBACK
+  );
+}
 
 /**
  * Makes an app callback handed to the engine as a PROP re-enter Angular's update loop.
@@ -82,14 +98,18 @@ type ICallbackWrapper = (key: string, value: unknown) => unknown;
  * ONE wrapper per original handler, for the caller's lifetime. A fresh closure per push would make
  * the engine store a new listener every time and would defeat every downstream identity check.
  */
-export function createCallbackWrapper(
-  view: IViewMarker,
-  node: unknown,
-): ICallbackWrapper {
-  const wrappers = new WeakMap<object, (...args: unknown[]) => unknown>();
+export function createCallbackWrapper(node: unknown): ICallbackWrapper {
+  // Allocated on the FIRST wrap, not at construction. The map is per-CALLER, so an eager one is one
+  // `WeakMap` per directive instance — 7 000 on a 1 000-row create of the benchmark row, none of
+  // which is ever read, because that row carries no `on*` prop.
+  let wrappers: WeakMap<object, (...args: unknown[]) => unknown> | undefined;
   return (key: string, value: unknown): unknown => {
-    if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
-    if (key === PER_FRAME_CALLBACK) return value;
+    // The second test is redundant at RUNTIME and load-bearing for the TYPE: `isWrappableCallback`
+    // answers a boolean, which narrows nothing, and the alternative is a cast. Keeping the `typeof`
+    // here is what lets `value` be a `Function` below without one.
+    if (!isWrappableCallback(key, value) || typeof value !== 'function')
+      return value;
+    wrappers ??= new WeakMap();
     const cached = wrappers.get(value);
     if (cached !== undefined) return cached;
     // Reflect.apply rather than a cast-to-signature local: `typeof value === 'function'` narrows to
@@ -97,7 +117,7 @@ export function createCallbackWrapper(
     // `undefined` as the receiver preserves the previous unbound call.
     const wrapper = (...args: unknown[]): unknown => {
       const result: unknown = Reflect.apply(value, undefined, args);
-      view.markForCheck();
+      markViewFor(node);
       flushViewFor(node);
       return result;
     };
@@ -106,6 +126,39 @@ export function createCallbackWrapper(
   };
 }
 
+/**
+ * The MARKER half, keyed on the node rather than injected.
+ *
+ * `markForCheck` needs the view holding the binding, and until 2026-09-18 the only way to have one
+ * was for `SymbioteElement` to inject a `ChangeDetectorRef` — on EVERY element, so that its lazy
+ * `on*` wrapper could reach one on the few that carry a callback. An injection is ~1-2.4 us per
+ * element on JavaScriptCore (`core/engine/cpp/tests/js/angular-directive-cost.itest.ts`), so a
+ * thousand-row screen paid for ten thousand `ViewRef`s to serve none.
+ *
+ * `SymbioteCallbackHost` registers here instead, and it MATCHES on the callback attributes rather
+ * than being injected — so an element with no `on*` binding neither instantiates it nor pays for it.
+ * Measured as the whole trade, selector included: -3.9 / -9.3 / -25.5 ms over ten thousand elements.
+ *
+ * Separate from `viewFlushes` deliberately. They come from different directives, on overlapping but
+ * different sets of tags, and they are not the same instruction: this one SCHEDULES and reaches every
+ * ancestor, that one re-checks ONE view synchronously. Collapsing them into a single entry would make
+ * whichever directive registered last decide which of the two an element gets.
+ */
+const viewMarkers = new WeakMap<object, IViewMarker>();
+
+export function registerViewMarker(node: object, marker: IViewMarker): void {
+  viewMarkers.set(node, marker);
+}
+
+export function unregisterViewMarker(node: object): void {
+  viewMarkers.delete(node);
+}
+
+export function markViewFor(node: unknown): void {
+  if (typeof node !== 'object' || node === null) return;
+  viewMarkers.get(node)?.markForCheck();
+}
+
 export function registerViewFlush(node: object, flush: () => void): void {
   viewFlushes.set(node, flush);
 }

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

@@ -516,7 +516,8 @@ export class FlatList<ItemT = unknown>
   // ---- multi-column data adaptation (the virtualized stream is rows) ----
   getRow = (_data: unknown, index: number): IRow<ItemT> => this.rows[index];
   getRowCount = (_data: unknown): number => this.rows.length;
-  rowKey = (row: IRow<ItemT>, _index: number): string => rowKeyExtractor(row);
+  rowKey = (row: IRow<ItemT>, _index: number): string =>
+    rowKeyExtractor(row, this.keyExtractor);
 
   // Viewability over rows expands back to per-item tokens, so the caller sees item-level
   // visibility, not row-level (shared expandRowViewability), matching Vue.

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

@@ -26,7 +26,9 @@ import {
 } from '@angular/core';
 import {
   computeInset,
+  configureKeyboardAvoidingAnimation,
   keyboardAvoidingEventNamesFor,
+  readKeyboardAnimationTiming,
   readKeyboardFrame,
   readLayoutFrame,
   readPrefersCrossFadeTransitions,
@@ -227,6 +229,12 @@ export class KeyboardAvoidingView
       previousInset: this.inset,
       prefersCrossFadeTransitions: this.prefersCrossFadeTransitions,
     });
+    // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
+    if (next !== this.inset)
+      configureKeyboardAvoidingAnimation(
+        readKeyboardAnimationTiming(payload),
+        this.enabled !== false,
+      );
     dlog(`KeyboardAvoidingView show -> inset ${next}`);
     this.inset = next;
     this.changeDetector.markForCheck();

package/src/components/pressable-props.ts

@@ -33,7 +33,15 @@ export interface IAngularPressableProps
   delayLongPress?: number;
   disabled?: boolean;
   cancelable?: boolean;
+  // Tells native to stand down once this Pressable claims the gesture (RN Pressable.js:123,
+  // Pressability.js onResponderGrant), so a parent ScrollView cannot steal it mid-drag. Default
+  // false.
+  blockNativeResponder?: boolean;
   hitSlop?: IRectOffset;
+  // RN's snapshot affordance (`Pressable.js:151`, `TouchableHighlight.js:61`): render the control in
+  // its pressed state with no gesture, so a test can capture it. Consumed by the engine and stripped
+  // before the payload — no ViewConfig declares it.
+  testOnly_pressed?: boolean;
   pressRetentionOffset?: IRectOffset;
   unstable_pressDelay?: number;
   android_ripple?: IPressableAndroidRippleConfig;

package/src/components/touchable-props.ts

@@ -27,4 +27,8 @@ export type IAngularTouchableOpacityProps = IAngularTouchableBaseProps & {
 export type IAngularTouchableHighlightProps = IAngularTouchableBaseProps & {
   activeOpacity?: number;
   underlayColor?: string;
+  // RN's snapshot affordance (`Pressable.js:151`, `TouchableHighlight.js:61`): render the control in
+  // its pressed state with no gesture, so a test can capture it. Consumed by the engine and stripped
+  // before the payload — no ViewConfig declares it.
+  testOnly_pressed?: boolean;
 };

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

@@ -44,10 +44,8 @@ import {
   type OnDestroy,
 } from '@angular/core';
 import {
-  DEFAULT_END_REACHED_THRESHOLD,
   DEFAULT_INITIAL_NUM_TO_RENDER,
   DEFAULT_MAX_TO_RENDER_PER_BATCH,
-  DEFAULT_START_REACHED_THRESHOLD,
   DEFAULT_UPDATE_CELLS_BATCHING_PERIOD,
   DEFAULT_WINDOW_SIZE,
   EMPTY_OFFSET,
@@ -214,6 +212,13 @@ interface IWindowCell<ItemT> {
   context: IVListItemContext<ItemT>;
   measure: (event: ISymbioteEvent) => void;
   separatorContext?: IVListSeparatorContext<ItemT>;
+  /**
+   * Picks the cell's TAG in the template — `sticky-header` pins, `view` does not.
+   *
+   * It is stable per cell key (an index is a section header or it is not), so the `@if` never
+   * swaps an element type under a live cell and nothing remounts as the window slides.
+   */
+  isSticky: boolean;
 }
 
 // The scroll body is identical on both axes; only the outer tag differs (the axis comes from the
@@ -257,7 +262,7 @@ interface IWindowCell<ItemT> {
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -265,27 +270,45 @@ interface IWindowCell<ItemT> {
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
           }
           @for (cell of windowCells; track cell.key) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>
@@ -323,7 +346,7 @@ interface IWindowCell<ItemT> {
             <view [style]="leadingSpacerStyle"></view>
           }
           @if (forcedStickyCell !== null) {
-            <view
+            <sticky-header
               (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
               [style]="cellStyle"
             >
@@ -331,7 +354,7 @@ interface IWindowCell<ItemT> {
                 [vListOutlet]="itemDir?.templateRef"
                 [vListOutletContext]="forcedStickyCell.context"
               ></ng-container>
-            </view>
+            </sticky-header>
           }
           @if (gapSpacerStyle !== null) {
             <view [style]="gapSpacerStyle"></view>
@@ -344,21 +367,39 @@ interface IWindowCell<ItemT> {
                first index moves. Measured at exactly 17px on device 2026-08-19; see
                .claude/rules/list-geometry-feedback-loop.md. -->
           @for (cell of windowCells; track cell.key) {
-            <view
-              (layout)="handleCellLayout(cell.measure, $event)"
-              [style]="cellStyle"
-            >
-              <ng-container
-                [vListOutlet]="itemDir?.templateRef"
-                [vListOutletContext]="cell.context"
-              ></ng-container>
-              @if (cell.separatorContext !== undefined) {
+            @if (cell.isSticky) {
+              <sticky-header
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
                 <ng-container
-                  [vListOutlet]="separatorDir?.templateRef"
-                  [vListOutletContext]="cell.separatorContext"
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
                 ></ng-container>
-              }
-            </view>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </sticky-header>
+            } @else {
+              <view
+                (layout)="handleCellLayout(cell.measure, $event)"
+                [style]="cellStyle"
+              >
+                <ng-container
+                  [vListOutlet]="itemDir?.templateRef"
+                  [vListOutletContext]="cell.context"
+                ></ng-container>
+                @if (cell.separatorContext !== undefined) {
+                  <ng-container
+                    [vListOutlet]="separatorDir?.templateRef"
+                    [vListOutletContext]="cell.separatorContext"
+                  ></ng-container>
+                }
+              </view>
+            }
           }
           @if (trailingSpacerStyle !== null) {
             <view [style]="trailingSpacerStyle"></view>
@@ -540,7 +581,6 @@ export class VirtualizedList<ItemT = unknown>
   gapSpacerStyle: IViewStyle | null = null;
   trailingSpacerStyle: IViewStyle | null = null;
   cellStyle: IViewStyle | undefined = undefined;
-  renderedStickyIndices: number[] | undefined = undefined;
   // Bound to the template's `[style]="resolvedStyle"`, which Angular compiles to the built-in
   // ɵɵstyleMap instruction — it only understands a flat object, never an array (RN's own
   // `style={[a, b]}` composition idiom crashes deep inside Angular's styling engine), so this
@@ -700,7 +740,10 @@ export class VirtualizedList<ItemT = unknown>
       keyboardShouldPersistTaps: this.keyboardShouldPersistTaps,
       keyboardDismissMode: this.keyboardDismissMode,
       contentOffset: this.commandedOffset,
-      stickyHeaderIndices: this.renderedStickyIndices,
+      // `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
+      // every time the window slides and the behavior re-wraps a different child each pass. The
+      // cells carry the `sticky-header` TAG instead, which pins by DOCUMENT order.
       maintainVisibleContentPosition:
         this.resolvedMaintainVisibleContentPosition,
       // The four boolean-gated Fabric events (`.claude/rules/fabric-boolean-event-gates.md`): the
@@ -750,11 +793,11 @@ export class VirtualizedList<ItemT = unknown>
       this.updateCellsBatchingPeriod ?? DEFAULT_UPDATE_CELLS_BATCHING_PERIOD
     );
   }
-  private get onEndReachedThresholdValue(): number {
-    return this.onEndReachedThreshold ?? DEFAULT_END_REACHED_THRESHOLD;
+  private get onEndReachedThresholdValue(): number | undefined {
+    return this.onEndReachedThreshold;
   }
-  private get onStartReachedThresholdValue(): number {
-    return this.onStartReachedThreshold ?? DEFAULT_START_REACHED_THRESHOLD;
+  private get onStartReachedThresholdValue(): number | undefined {
+    return this.onStartReachedThreshold;
   }
 
   // onScroll stays a plain callback bag key (an Animated.event(...) target must be able to flow
@@ -933,7 +976,12 @@ export class VirtualizedList<ItemT = unknown>
           const info = effect.info;
           const map = effect.map;
           const fire = (): void => {
-            for (const pair of pairs) pair.onViewableItemsChanged(info);
+            for (const pair of pairs) {
+              pair.onViewableItemsChanged({
+                ...info,
+                viewabilityConfig: pair.viewabilityConfig,
+              });
+            }
             this.dispatch({ kind: 'viewable-fired', map });
           };
           if (this.viewableTimer !== null) {
@@ -1084,7 +1132,6 @@ export class VirtualizedList<ItemT = unknown>
       this.leadingSpacerStyle = null;
       this.gapSpacerStyle = null;
       this.trailingSpacerStyle = null;
-      this.renderedStickyIndices = undefined;
       dlog(
         `Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`,
       );
@@ -1112,10 +1159,7 @@ export class VirtualizedList<ItemT = unknown>
       plan.trailingExtent > EMPTY_OFFSET
         ? this.spacerStyle(plan.trailingExtent)
         : null;
-    this.renderedStickyIndices =
-      stickySet !== undefined && plan.stickyChildPositions.length > 0
-        ? plan.stickyChildPositions
-        : undefined;
+    // `plan.stickyChildPositions` is deliberately NOT read — it was the input to the index form.
     dlog(
       `STICKY[list] stickySet=${stickySet === undefined ? 'undefined' : JSON.stringify([...stickySet])} ` +
         `childPositions=${JSON.stringify(plan.stickyChildPositions)} ` +
@@ -1129,6 +1173,8 @@ export class VirtualizedList<ItemT = unknown>
             plan.forcedStickyCell.index,
             plan.forcedStickyCell.key,
             false,
+            // Sticky by construction — `forcedStickyCell` exists only for an index in `stickySet`.
+            true,
           )
         : null;
 
@@ -1141,7 +1187,12 @@ export class VirtualizedList<ItemT = unknown>
       // 2026-08-19 as a run of cells all shifting by exactly the divider's 1px.
       const includeSeparator = hasSeparators && planned.index < m.count - 1;
       cells.push(
-        this.buildWindowCell(planned.index, planned.key, includeSeparator),
+        this.buildWindowCell(
+          planned.index,
+          planned.key,
+          includeSeparator,
+          stickySet?.has(planned.index) === true,
+        ),
       );
     }
     this.windowCells = cells;
@@ -1162,6 +1213,7 @@ export class VirtualizedList<ItemT = unknown>
     index: number,
     key: string,
     includeSeparator: boolean,
+    isSticky: boolean,
   ): IWindowCell<ItemT> {
     const item = this.getItem(this.data, index);
     return {
@@ -1172,6 +1224,7 @@ export class VirtualizedList<ItemT = unknown>
       separatorContext: includeSeparator
         ? this.buildSeparatorContext(index, item)
         : undefined,
+      isSticky,
     };
   }
 

package/src/components.ts

@@ -179,8 +179,6 @@ export {
   HorizontalScrollContentView,
   TextInputHost,
   MultilineTextInputHost,
-  ManagedTextInputHost,
-  ManagedMultilineTextInputHost,
   SwitchHost,
   ActivityIndicatorHost,
   SafeAreaViewHost,

package/src/diagnostics.ts

@@ -116,6 +116,24 @@ export function noteAngularWrite(propName: string): void {
   writesByProp.set(propName, (writesByProp.get(propName) ?? 0) + 1);
 }
 
+/**
+ * A style KEY write, named `style.<key>` in the readout — and the prefix is built HERE.
+ *
+ * `noteAngularWrite` gates itself, but an ARGUMENT is evaluated before the callee can refuse it, so
+ * `noteAngularWrite(`style.${key}`)` builds a string on every `setStyle` in a Release build with the
+ * detail map off. `setStyle` is Angular's only styling channel — one call per key per node — so the
+ * bench row's create allocated ~7 000 of them for nobody.
+ *
+ * It is the same trap `CLAUDE.md` records for `dlog` arguments on this very renderer, in a different
+ * function; `tests/dlog-argument-budget.test.ts` scans for the `dlog` spelling and does not see this
+ * one.
+ */
+export function noteAngularStyleWrite(key: string): void {
+  if (!isDetailEnabled) return;
+  const name = `style.${key}`;
+  writesByProp.set(name, (writesByProp.get(name) ?? 0) + 1);
+}
+
 export function noteAngularCreate(tagName: string): void {
   if (!isDetailEnabled) return;
   createsByTag.set(tagName, (createsByTag.get(tagName) ?? 0) + 1);

package/src/element-props.ts

@@ -15,8 +15,6 @@
 // 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`.
-//
-// `symbioteStyle` stays as an alias — it is public API and the renderer still folds it.
 import type {
   IAccessibilityProps,
   IAriaProps,
@@ -45,10 +43,8 @@ export interface IElementProps
   renderToHardwareTextureAndroid?: boolean;
   shouldRasterizeIOS?: boolean;
   needsOffscreenAlphaCompositing?: boolean;
-  /** The array-capable `[style]`, aliased to `style` in the renderer. */
-  symbioteStyle?: IStyleProp<IViewStyle>;
   /**
-   * RN's own spelling. The press-state callback is in the union because a subclass cannot widen an
+   * 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`.
    */