@symbiote-native/angular 3.3.0 → 3.4.0

package/src/components/modal/index.ts

@@ -31,6 +31,7 @@ import {
   renderModal,
   resolveAccessibilityProps,
   shouldRenderModal,
+  warnAboutModalProps,
   type IAccessibilityProps,
   type IAriaProps,
   type IModalAnimationType,
@@ -42,11 +43,16 @@ import {
   dlog,
   isSymbioteEvent,
   Platform,
+  type IColorValue,
   type IStyleProp,
   type ISymbioteEvent,
   type IViewStyle,
 } from '@symbiote-native/engine';
 import { AccessibilityEventsBase } from '../../accessibility-events';
+import {
+  ListScopeProvider,
+  NO_LIST_SCOPE,
+} from '../virtualized-list/nested-scope';
 import {
   anchorHostStyle,
   ModalHost,
@@ -63,25 +69,26 @@ export type {
 } from '@symbiote-native/components';
 
 // Mirrors React's IModalProps minus children (Angular takes children via <ng-content>).
-export interface IAngularModalProps extends IAccessibilityProps, IAriaProps {
-  visible?: boolean;
-  transparent?: boolean;
-  backdropColor?: string;
-  animationType?: IModalAnimationType;
-  presentationStyle?: IModalPresentationStyle;
-  supportedOrientations?: ReadonlyArray<IModalOrientation>;
-  hardwareAccelerated?: boolean;
-  statusBarTranslucent?: boolean;
-  navigationBarTranslucent?: boolean;
-  allowSwipeDismissal?: boolean;
-  onShow?: () => void;
-  onDismiss?: () => void;
-  onRequestClose?: () => void;
-  // The engine hands every listener the ISymbioteEvent wrapper, so the orientation is read at
-  // event.nativeEvent.orientation (IModalOrientationChangeEvent describes that payload).
-  onOrientationChange?: (event: ISymbioteEvent) => void;
-  style?: IStyleProp<IViewStyle>;
-}
+export type IAngularModalProps = IAccessibilityProps &
+  IAriaProps & {
+    visible?: boolean;
+    transparent?: boolean;
+    backdropColor?: IColorValue;
+    animationType?: IModalAnimationType;
+    presentationStyle?: IModalPresentationStyle;
+    supportedOrientations?: ReadonlyArray<IModalOrientation>;
+    hardwareAccelerated?: boolean;
+    statusBarTranslucent?: boolean;
+    navigationBarTranslucent?: boolean;
+    allowSwipeDismissal?: boolean;
+    onShow?: () => void;
+    onDismiss?: () => void;
+    onRequestClose?: () => void;
+    // The engine hands every listener the ISymbioteEvent wrapper, so the orientation is read at
+    // event.nativeEvent.orientation (IModalOrientationChangeEvent describes that payload).
+    onOrientationChange?: (event: ISymbioteEvent) => void;
+    style?: IStyleProp<IViewStyle>;
+  };
 
 // What the Modal component itself takes as plain @Input()s: the full surface minus the
 // show/dismiss/close/orientation and accessibility events, which it exposes as real @Output()
@@ -107,6 +114,8 @@ export type IAngularModalInputs = Omit<
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ModalHost, ViewHost, SymbioteHostPropsDirective],
+  // The content sits outside the list's scroll, so a list in it is not nested in that list
+  providers: [{ provide: ListScopeProvider, useValue: NO_LIST_SCOPE }],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     @if (shouldRender) {
@@ -133,7 +142,7 @@ export class Modal
   @Output() readonly requestClose = new EventEmitter<void>();
   @Input() visible?: boolean;
   @Input() transparent?: boolean;
-  @Input() backdropColor?: string;
+  @Input() backdropColor?: IColorValue;
   @Input() animationType?: IModalAnimationType;
   @Input() presentationStyle?: IModalPresentationStyle;
   @Input() supportedOrientations?: ReadonlyArray<IModalOrientation>;
@@ -160,6 +169,18 @@ export class Modal
     this.state = createInitialModalState(isModalVisible(this.visible));
   }
 
+  // RN checks on mount and on every update, a dev build only
+  private warnOnMisuse(): void {
+    warnAboutModalProps({
+      presentationStyle: this.presentationStyle,
+      transparent: this.transparent,
+      navigationBarTranslucent: this.navigationBarTranslucent,
+      statusBarTranslucent: this.statusBarTranslucent,
+      allowSwipeDismissal: this.allowSwipeDismissal,
+      onRequestClose: this.requestClose.observed,
+    });
+  }
+
   // Bridges the non-reactive @Input 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()`
@@ -174,6 +195,7 @@ export class Modal
     // Before the keep-alive early-return below: this is the single moment Angular has finished
     // writing every changed @Input, and `hostProps` depends on far more than `visible`.
     this.hostPropsRevision.update(revision => revision + 1);
+    this.warnOnMisuse();
     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;

package/src/components/refresh-control-props.ts

@@ -13,29 +13,33 @@ import type {
   IAccessibilityProps,
   IAriaProps,
 } from '@symbiote-native/components';
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 
-export interface IAngularRefreshControlProps
-  extends IAccessibilityProps, IAriaProps {
-  refreshing: boolean;
-  // `id` — RN's W3C alias for `nativeID`, folded by the spec entry's ID_ALIAS.
-  id?: string;
-  // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
-  // fire-and-forget (native already starts refreshing on the gesture).
-  onRefresh?: () => void | Promise<void>;
-  tintColor?: string;
-  title?: string;
-  titleColor?: string;
-  progressViewOffset?: number;
-  // Android-only spinner styling (RN RefreshControlPropsAndroid): `colors` are the indicator's
-  // animated stroke colors, `progressBackgroundColor` the disc behind it, `size` the diameter
-  // preset. AndroidSwipeRefreshLayout reads them; PullToRefreshView on iOS ignores unknown props.
-  colors?: readonly string[];
-  progressBackgroundColor?: string;
-  size?: 'default' | 'large';
-  // Android-only native prop forwarded to AndroidSwipeRefreshLayout; iOS native never reads it.
-  enabled?: boolean;
-  // The Android scroll-view wrap injects the layout half of the style onto this host; iOS leaves it
-  // unset (the RefreshControl is a childless sibling). Harmless to forward on both.
-  style?: IStyleProp<IViewStyle>;
-}
+export type IAngularRefreshControlProps = IAccessibilityProps &
+  IAriaProps & {
+    refreshing: boolean;
+    // `id` — RN's W3C alias for `nativeID`, folded by the spec entry's ID_ALIAS.
+    id?: string;
+    // RN's onRefresh is `() => void | Promise<void>`, the handler may be async; the promise is
+    // fire-and-forget (native already starts refreshing on the gesture).
+    onRefresh?: () => void | Promise<void>;
+    tintColor?: IColorValue;
+    title?: string;
+    titleColor?: IColorValue;
+    progressViewOffset?: number;
+    // Android-only spinner styling (RN RefreshControlPropsAndroid): `colors` are the indicator's
+    // animated stroke colors, `progressBackgroundColor` the disc behind it, `size` the diameter
+    // preset. AndroidSwipeRefreshLayout reads them; PullToRefreshView on iOS ignores unknown props.
+    colors?: readonly IColorValue[];
+    progressBackgroundColor?: IColorValue;
+    size?: 'default' | 'large';
+    // Android-only native prop forwarded to AndroidSwipeRefreshLayout; iOS native never reads it.
+    enabled?: boolean;
+    // The Android scroll-view wrap injects the layout half of the style onto this host; iOS leaves it
+    // unset (the RefreshControl is a childless sibling). Harmless to forward on both.
+    style?: IStyleProp<IViewStyle>;
+  };

package/src/components/scroll-view-props.ts

@@ -15,8 +15,11 @@
 import type {
   IAccessibilityProps,
   IAriaProps,
+  IInnerViewRef,
+  IScrollViewNativeOnlyProps,
 } from '@symbiote-native/components';
 import type {
+  IColorValue,
   IStyleProp,
   ISymbioteEvent,
   IViewStyle,
@@ -27,80 +30,85 @@ export type { IScrollViewHandle } from '@symbiote-native/components';
 type IScrollHandler = (event: ISymbioteEvent) => void;
 type IContentSizeHandler = (width: number, height: number) => void;
 
-export interface IAngularScrollViewProps
-  extends IAccessibilityProps, IAriaProps {
-  style?: IStyleProp<IViewStyle>;
-  // A bare string resolves through the shared style registry, like `class` on the host node.
-  contentContainerStyle?: IStyleProp<IViewStyle> | string;
-  scrollEnabled?: boolean;
-  showsVerticalScrollIndicator?: boolean;
-  showsHorizontalScrollIndicator?: boolean;
-  pagingEnabled?: boolean;
-  bounces?: boolean;
-  decelerationRate?: 'normal' | 'fast' | number;
-  scrollEventThrottle?: number;
-  contentInset?: {
-    top?: number;
-    left?: number;
-    bottom?: number;
-    right?: number;
+export type IAngularScrollViewProps = IAccessibilityProps &
+  IAriaProps &
+  IScrollViewNativeOnlyProps & {
+    style?: IStyleProp<IViewStyle>;
+    // A bare string resolves through the shared style registry, like `class` on the host node.
+    contentContainerStyle?: IStyleProp<IViewStyle> | string;
+    scrollEnabled?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+    showsHorizontalScrollIndicator?: boolean;
+    pagingEnabled?: boolean;
+    bounces?: boolean;
+    decelerationRate?: 'normal' | 'fast' | number;
+    scrollEventThrottle?: number;
+    contentInset?: {
+      top?: number;
+      left?: number;
+      bottom?: number;
+      right?: number;
+    };
+    contentOffset?: { x: number; y: number };
+    removeClippedSubviews?: boolean;
+    snapToInterval?: number;
+    snapToOffsets?: number[];
+    snapToAlignment?: 'start' | 'center' | 'end';
+    snapToStart?: boolean;
+    snapToEnd?: boolean;
+    disableIntervalMomentum?: boolean;
+    experimental_endDraggingSensitivityMultiplier?: number;
+    // Sticky headers: RN implements stickiness PURELY IN JS — the native scroll view does not honor
+    // an index array. The engine's behavior resolves the indices against its own content children.
+    stickyHeaderIndices?: number[];
+    invertStickyHeaders?: boolean;
+    stickyHeaderHiddenOnScroll?: boolean;
+    // Gets the content view after the first commit and null when it goes away
+    innerViewRef?: IInnerViewRef;
+    keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
+    maintainVisibleContentPosition?: {
+      minIndexForVisible: number;
+      autoscrollToTopThreshold?: number;
+    };
+    // iOS-only forwarding props (harmless on Android: its manager ignores unknown props).
+    alwaysBounceHorizontal?: boolean;
+    alwaysBounceVertical?: boolean;
+    centerContent?: boolean;
+    scrollIndicatorInsets?: {
+      top?: number;
+      left?: number;
+      bottom?: number;
+      right?: number;
+    };
+    indicatorStyle?: 'default' | 'black' | 'white';
+    directionalLockEnabled?: boolean;
+    automaticallyAdjustKeyboardInsets?: boolean;
+    contentInsetAdjustmentBehavior?:
+      'automatic' | 'scrollableAxes' | 'never' | 'always';
+    minimumZoomScale?: number;
+    maximumZoomScale?: number;
+    zoomScale?: number;
+    bouncesZoom?: boolean;
+    pinchGestureEnabled?: boolean;
+    // Android-only forwarding props (harmless on iOS).
+    nestedScrollEnabled?: boolean;
+    overScrollMode?: 'auto' | 'always' | 'never';
+    fadingEdgeLength?: number;
+    persistentScrollbar?: boolean;
+    endFillColor?: IColorValue;
+    onLayout?: IScrollHandler;
+    onScroll?: IScrollHandler;
+    onScrollBeginDrag?: IScrollHandler;
+    onScrollEndDrag?: IScrollHandler;
+    onMomentumScrollBegin?: IScrollHandler;
+    onMomentumScrollEnd?: IScrollHandler;
+    // iOS-only: user tapped the status bar to scroll to top. Inert on Android.
+    onScrollToTop?: IScrollHandler;
+    // Synthesized in JS from the content view's onLayout (RN _handleContentOnLayout); deduped.
+    onContentSizeChange?: IContentSizeHandler;
+    onAccessibilityAction?: (event: ISymbioteEvent) => void;
+    onAccessibilityTap?: (event: ISymbioteEvent) => void;
+    onMagicTap?: (event: ISymbioteEvent) => void;
+    onAccessibilityEscape?: (event: ISymbioteEvent) => void;
   };
-  contentOffset?: { x: number; y: number };
-  removeClippedSubviews?: boolean;
-  snapToInterval?: number;
-  snapToOffsets?: number[];
-  snapToAlignment?: 'start' | 'center' | 'end';
-  snapToStart?: boolean;
-  snapToEnd?: boolean;
-  disableIntervalMomentum?: boolean;
-  // Sticky headers: RN implements stickiness PURELY IN JS — the native scroll view does not honor
-  // an index array. The engine's behavior resolves the indices against its own content children.
-  stickyHeaderIndices?: number[];
-  invertStickyHeaders?: boolean;
-  keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
-  keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
-  maintainVisibleContentPosition?: {
-    minIndexForVisible: number;
-    autoscrollToTopThreshold?: number;
-  };
-  // iOS-only forwarding props (harmless on Android: its manager ignores unknown props).
-  alwaysBounceHorizontal?: boolean;
-  alwaysBounceVertical?: boolean;
-  centerContent?: boolean;
-  scrollIndicatorInsets?: {
-    top?: number;
-    left?: number;
-    bottom?: number;
-    right?: number;
-  };
-  indicatorStyle?: 'default' | 'black' | 'white';
-  directionalLockEnabled?: boolean;
-  automaticallyAdjustKeyboardInsets?: boolean;
-  contentInsetAdjustmentBehavior?:
-    'automatic' | 'scrollableAxes' | 'never' | 'always';
-  minimumZoomScale?: number;
-  maximumZoomScale?: number;
-  zoomScale?: number;
-  bouncesZoom?: boolean;
-  pinchGestureEnabled?: boolean;
-  // Android-only forwarding props (harmless on iOS).
-  nestedScrollEnabled?: boolean;
-  overScrollMode?: 'auto' | 'always' | 'never';
-  fadingEdgeLength?: number;
-  persistentScrollbar?: boolean;
-  endFillColor?: string;
-  onLayout?: IScrollHandler;
-  onScroll?: IScrollHandler;
-  onScrollBeginDrag?: IScrollHandler;
-  onScrollEndDrag?: IScrollHandler;
-  onMomentumScrollBegin?: IScrollHandler;
-  onMomentumScrollEnd?: IScrollHandler;
-  // iOS-only: user tapped the status bar to scroll to top. Inert on Android.
-  onScrollToTop?: IScrollHandler;
-  // Synthesized in JS from the content view's onLayout (RN _handleContentOnLayout); deduped.
-  onContentSizeChange?: IContentSizeHandler;
-  onAccessibilityAction?: (event: ISymbioteEvent) => void;
-  onAccessibilityTap?: (event: ISymbioteEvent) => void;
-  onMagicTap?: (event: ISymbioteEvent) => void;
-  onAccessibilityEscape?: (event: ISymbioteEvent) => void;
-}

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

@@ -12,8 +12,8 @@ import {
   inject,
 } from '@angular/core';
 import type {
+  IInnerViewRef,
   IScrollViewHandle,
-  ISection,
   IVirtualizedSectionListHandle,
 } from '@symbiote-native/components';
 import {
@@ -23,11 +23,11 @@ import {
   type IViewStyle,
 } from '@symbiote-native/engine';
 import {
+  VListCellDirective,
   VListEmptyDirective,
   VListFooterDirective,
   VListHeaderDirective,
   VListSeparatorDirective,
-  type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
 import { LIST_ACCESSIBILITY_FORWARD } from '../virtualized-list/list-a11y-forward';
@@ -43,16 +43,11 @@ import {
   VSectionItemDirective,
   VSectionSeparatorDirective,
   VirtualizedSectionList,
+  type ISection,
   type IVirtualizedSectionListProps,
 } from '../virtualized-section-list';
 
-// The separator context arrives typed `unknown`, the directive is matched structurally in the
-// template with no type argument to pin the item type. The narrowest cast for that gap
-function asItem<ItemT>(value: unknown): ItemT | undefined {
-  return value as ItemT | undefined;
-}
-
-export type { ISection } from '@symbiote-native/components';
+export type { ISection } from '../virtualized-section-list';
 export type ISectionListHandle = IVirtualizedSectionListHandle;
 
 // Re-exported so app code gets the whole `vSection*` and `vList*` authoring surface from here
@@ -124,20 +119,28 @@ export type ISectionListInputs<ItemT> = Omit<
       [maxToRenderPerBatch]="maxToRenderPerBatch"
       [updateCellsBatchingPeriod]="updateCellsBatchingPeriod"
       [windowSize]="windowSize"
+      [disableVirtualization]="disableVirtualization"
       [inverted]="inverted"
+      [horizontal]="horizontal"
       [maintainVisibleContentPosition]="maintainVisibleContentPosition"
       [onScroll]="onScroll"
       [onScrollBeginDrag]="onScrollBeginDrag"
       [onScrollEndDrag]="onScrollEndDrag"
       [onMomentumScrollBegin]="onMomentumScrollBegin"
       [onMomentumScrollEnd]="onMomentumScrollEnd"
+      [onContentSizeChange]="onContentSizeChange"
       [scrollEventThrottle]="scrollEventThrottle"
       [keyboardShouldPersistTaps]="keyboardShouldPersistTaps"
       [keyboardDismissMode]="keyboardDismissMode"
       [removeClippedSubviews]="removeClippedSubviews"
       [nestedScrollEnabled]="nestedScrollEnabled"
+      [stickyHeaderHiddenOnScroll]="stickyHeaderHiddenOnScroll"
+      [innerViewRef]="innerViewRef"
       [style]="resolvedStyle"
       [contentContainerStyle]="contentContainerStyle"
+      [listHeaderComponentStyle]="listHeaderComponentStyle"
+      [listFooterComponentStyle]="listFooterComponentStyle"
+      [cellRendererTemplate]="cellDir?.templateRef"
       [testID]="testID"
       [nativeID]="nativeID"
       ${LIST_ACCESSIBILITY_FORWARD}
@@ -177,9 +180,10 @@ export type ISectionListInputs<ItemT> = Omit<
         </ng-template>
       }
       @if (sectionSeparatorDir !== undefined) {
-        <ng-template vSectionSeparator>
+        <ng-template vSectionSeparator let-props="props">
           <ng-container
             [vListOutlet]="sectionSeparatorDir.templateRef"
+            [vListOutletContext]="props"
           ></ng-container>
         </ng-template>
       }
@@ -203,17 +207,10 @@ export type ISectionListInputs<ItemT> = Omit<
         </ng-template>
       }
       @if (itemSeparatorDir !== undefined) {
-        <ng-template
-          vListSeparator
-          let-highlighted="highlighted"
-          let-leadingItem="leadingItem"
-          let-trailingItem="trailingItem"
-        >
+        <ng-template vListSeparator let-props="props">
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="
-              itemSeparatorContext(highlighted, leadingItem, trailingItem)
-            "
+            [vListOutletContext]="props"
           ></ng-container>
         </ng-template>
       }
@@ -242,7 +239,9 @@ export class SectionList<ItemT = unknown>
   @Input() maxToRenderPerBatch?: number;
   @Input() updateCellsBatchingPeriod?: number;
   @Input() windowSize?: number;
+  @Input() disableVirtualization?: boolean;
   @Input() inverted?: boolean;
+  @Input() horizontal?: boolean;
   @Input() maintainVisibleContentPosition?: {
     minIndexForVisible: number;
     autoscrollToTopThreshold?: number;
@@ -252,13 +251,18 @@ export class SectionList<ItemT = unknown>
   @Input() onScrollEndDrag?: (event: ISymbioteEvent) => void;
   @Input() onMomentumScrollBegin?: (event: ISymbioteEvent) => void;
   @Input() onMomentumScrollEnd?: (event: ISymbioteEvent) => void;
+  @Input() onContentSizeChange?: (width: number, height: number) => void;
   @Input() scrollEventThrottle?: number;
   @Input() keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
   @Input() keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
   @Input() removeClippedSubviews?: boolean;
   @Input() nestedScrollEnabled?: boolean;
+  @Input() stickyHeaderHiddenOnScroll?: boolean;
+  @Input() innerViewRef?: IInnerViewRef;
   @Input() style?: IStyleProp<IViewStyle>;
   @Input() contentContainerStyle?: IStyleProp<IViewStyle>;
+  @Input() listHeaderComponentStyle?: IStyleProp<IViewStyle>;
+  @Input() listFooterComponentStyle?: IStyleProp<IViewStyle>;
   @Input() testID?: string;
   @Input() nativeID?: string;
 
@@ -282,12 +286,13 @@ export class SectionList<ItemT = unknown>
   @ContentChild(VSectionFooterDirective)
   sectionFooterDir?: VSectionFooterDirective<ItemT>;
   @ContentChild(VSectionSeparatorDirective)
-  sectionSeparatorDir?: VSectionSeparatorDirective;
+  sectionSeparatorDir?: VSectionSeparatorDirective<ItemT>;
   @ContentChild(VListHeaderDirective) listHeaderDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) listFooterDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) listEmptyDir?: VListEmptyDirective;
   @ContentChild(VListSeparatorDirective)
   itemSeparatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListCellDirective) cellDir?: VListCellDirective;
 
   // The inner list, whose instance is the scroll handle, reads lazily
   @ViewChild(VirtualizedSectionList)
@@ -296,22 +301,6 @@ export class SectionList<ItemT = unknown>
   // This component's own host, the anchor `class="..."` resolves onto, not the inner list's
   private readonly elementRef = inject(ElementRef);
 
-  // The leading and trailing items arrive `unknown` from the template's `let` bindings, already
-  // unwrapped to real items
-  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),
-    };
-  }
-
   scrollToLocation(params: {
     sectionIndex: number;
     itemIndex: number;
@@ -326,7 +315,7 @@ export class SectionList<ItemT = unknown>
     this.list?.flashScrollIndicators();
   }
 
-  getNativeScrollRef(): IScrollViewHandle | null {
+  getNativeScrollRef(): ISymbioteNode | null {
     return this.list?.getNativeScrollRef() ?? null;
   }
 
@@ -342,7 +331,15 @@ export class SectionList<ItemT = unknown>
     return this.list?.getScrollNode() ?? null;
   }
 
+  getScrollRef(): ISymbioteNode | null {
+    return this.list?.getScrollRef() ?? null;
+  }
+
   recordInteraction(): void {
     this.list?.recordInteraction();
   }
+
+  setNativeProps(props: Record<string, unknown>): void {
+    this.list?.setNativeProps(props);
+  }
 }

package/src/components/touchable-props.ts

@@ -9,7 +9,11 @@
 // <prop_types_split_agnostic_vs_per_adapter> describes. Mirrors React/Vue's ITouchableBaseProps.
 
 import type { IPressTimingProps } from '@symbiote-native/components';
-import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type {
+  IColorValue,
+  IStyleProp,
+  IViewStyle,
+} from '@symbiote-native/engine';
 
 import type { IAngularPressableInputs } from './pressable-props';
 
@@ -24,7 +28,7 @@ export type IAngularTouchableOpacityProps = IAngularTouchableBaseProps & {
 
 export type IAngularTouchableHighlightProps = IAngularTouchableBaseProps & {
   activeOpacity?: number;
-  underlayColor?: string;
+  underlayColor?: IColorValue;
   // 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.

package/src/components/virtualized-list/cell-renderer-context.ts

@@ -0,0 +1,36 @@
+// The context a `vListCell` template reads for one cell: RN's `CellRendererComponent` props plus
+// the template that stamps the item and its separator inside the wrapper the app draws
+
+import type { TemplateRef } from '@angular/core';
+import type { IViewStyle } from '@symbiote-native/engine';
+import type { IWindowCell } from './cell-registry';
+import type { IVListCellContext } from './directives';
+
+export type ICellRendererArgs<ItemT> = {
+  cell: IWindowCell<ItemT>;
+  style: IViewStyle | undefined;
+  // The list's own template holding the cell's item and separator outlets
+  body: TemplateRef<unknown> | undefined;
+  layout: (
+    measure: IWindowCell<ItemT>['measure'],
+    event: unknown,
+    index: number,
+  ) => void;
+  focus: (index: number) => void;
+};
+
+export function buildCellRendererContext<ItemT>(
+  args: ICellRendererArgs<ItemT>,
+): IVListCellContext {
+  const { cell, style, body, layout, focus } = args;
+  return {
+    $implicit: cell.context.$implicit,
+    cellKey: cell.key,
+    index: cell.index,
+    style,
+    layout: event => layout(cell.measure, event, cell.index),
+    focus: () => focus(cell.index),
+    content: body,
+    contentContext: { $implicit: cell },
+  };
+}