@symbiote-native/angular 0.6.1 → 0.7.0

package/src/components/touchable-native-feedback/index.ts

@@ -1,22 +1,19 @@
 // TouchableNativeFeedback: the Angular lifecycle half. Android's ripple / state-drawable
-// touchable, built on Pressable like the rest of the family (the Angular twin of the React/Vue
-// adapter). RN realizes its feedback by cloning the child into an RCTView carrying native ripple
-// props; we instead nest the child under a feedback <symbiote-view> that carries those props
-// (nativeBackgroundAndroid / nativeForegroundAndroid), inside a <Pressable> that owns the press
-// wiring. The native props are read by Android's ReactViewManager; on iOS they are inert props,
-// so the child still renders with working press wiring. The static factories + background mapping
-// are shared in @symbiote-native/components and reused verbatim — Angular only attaches them onto the
-// component class and nests the feedback view. No JS-side platform branch (one Fabric path both
-// platforms), so this stays a flat single file, mirroring React/Vue.
+// touchable, built on Pressable like the rest of the family. RN realizes its feedback by cloning
+// the child into an RCTView carrying native ripple props; we instead nest the child under a
+// feedback <symbiote-view> that carries those props (nativeBackgroundAndroid /
+// nativeForegroundAndroid), inside a <Pressable> that owns the press wiring. The native props are
+// read by Android's ReactViewManager; on iOS they are inert, so the child still renders with
+// working press wiring. The static factories + background mapping are shared in
+// @symbiote-native/components and reused verbatim. One Fabric path both platforms, so this stays
+// a flat single file, mirroring React/Vue.
 //
 // This component's own press/hover events are real @Output() EventEmitters too, matching
-// Pressable (which it wraps) — `(press)="press.emit($event)"`, never `[onPress]="onPress"`.
-// Non-event config (delayLongPress, hitSlop, ...) still rides down as plain @Input() bindings. The
-// a11y identity bag + the four a11y events live on the feedback view — the one host intrinsic here —
-// folded through the shared resolveAccessibilityProps and routed through emit() on the (event)
-// channel (Angular blocks [onX] property bindings on host elements; events flow through (event)
-// only). disabled folds into the a11y state via resolveDisabledAccessibilityState, exactly as
-// Pressable does for its own host.
+// Pressable (which it wraps) — `(press)="press.emit($event)"`, never `[onPress]="onPress"`. The
+// a11y identity bag + the four a11y events live on the feedback view — the one host intrinsic here
+// — folded through the shared resolveAccessibilityProps and routed through emit() on the (event)
+// channel (Angular blocks [onX] property bindings on host elements). disabled folds into the a11y
+// state via resolveDisabledAccessibilityState, exactly as Pressable does for its own host.
 
 import {
   CUSTOM_ELEMENTS_SCHEMA,
@@ -24,9 +21,12 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  computed,
   inject,
   Input,
   Output,
+  signal,
+  type DoCheck,
   type OnChanges,
 } from '@angular/core';
 import {
@@ -90,7 +90,7 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
       [android_disableSound]="android_disableSound"
     >
       <symbiote-view
-        [symbioteHostProps]="hostProps"
+        [symbioteHostProps]="hostProps()"
         (accessibilityAction)="emit(accessibilityAction, $event)"
         (accessibilityTap)="emit(accessibilityTap, $event)"
         (magicTap)="emit(magicTap, $event)"
@@ -101,7 +101,9 @@ export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs,
     </Pressable>
   `,
 })
-export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackProps, OnChanges {
+export class TouchableNativeFeedback
+  implements IAngularTouchableNativeFeedbackProps, OnChanges, DoCheck
+{
   // The static helpers are pure config-dict producers; they live as members on the component class
   // so callers reach them as `TouchableNativeFeedback.Ripple(...)`, exactly like RN.
   static readonly SelectableBackground = selectableBackground;
@@ -175,7 +177,37 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
   // anchor's class-derived style is the ONLY style source for hostProps.style below.
   private readonly elementRef = inject(ElementRef);
 
+  // Bridges the non-reactive @Input fields above into the reactive graph, so the computed() bag
+  // below can memoize a value derived from them. 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. Mirrors ScrollView's identical bridge
+  // (components/scroll-view/shared.ts), including its constraint: ONLY safe for a bag whose every
+  // dependency is an @Input or carries its own signal, never for plain internal mutable state.
+  private readonly inputsRevision = signal(0);
+
+  // The anchor's class-derived style is hostProps' one dependency that is NOT an @Input:
+  // `class="..."`/`[class.x]`/`[ngClass]` at the use site resolves through the renderer's
+  // addClass/removeClass onto the anchor node (anchorHostStyle's doc comment), so it never appears
+  // in SimpleChanges and ngOnChanges cannot cover it. The engine's commitClassStyle allocates a
+  // fresh [classStyle, explicitStyle] array on exactly the passes where a class token actually
+  // moved, so signal.set's own Object.is check makes an unchanged poll a no-op that dirties nothing.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  // ngDoCheck is the only hook that observes the anchor AFTER the parent wrote it. Angular flushes
+  // a node's pre-order hooks at the next `advance` PAST it (hooks.ts callHooks runs "until that
+  // node index exclusive") or in refreshView's post-template flush - both strictly after the
+  // parent's classProp on this element, and strictly before this component's own view refreshes.
+  // Angular also nulls the active consumer around lifecycle hooks (render3/hooks.ts), so this
+  // write registers no dependency on the caller's view and cannot throw NG0600.
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngOnChanges(): void {
+    // Tells the computed bag below that an @Input moved - plain class fields are not reactive on
+    // their own. Must stay in ngOnChanges: that is the single moment Angular has finished writing
+    // every changed input for this pass.
+    this.inputsRevision.update(revision => revision + 1);
     dlog(
       `TouchableNativeFeedback render ${this.resolvedBackground.type} useForeground ${this.useForeground === true}`,
     );
@@ -195,17 +227,26 @@ export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackP
 
   // Assembles the SAME resolved values the template used to bind one-by-one into a single
   // flat bag for `[symbioteHostProps]` (Renderer2.setProperty per key) — see primitives/shared.ts.
-  get hostProps(): Record<string, unknown> {
+  //
+  // MEASURED 2026-08-16: as a getter this rebuilt the bag on every refresh of this view, and a
+  // press dirties this very view (SymbioteHostPropsDirective wraps each flat-bag onX with
+  // markForCheck), so `[symbioteHostProps]`'s reference check failed every time and re-pushed
+  // every key through Renderer2.setProperty -> routeProp for an identical bag. Memoized, an
+  // unchanged bag costs one reference compare. Every dependency below is either an @Input (covered
+  // by inputsRevision) or the anchor style (covered by its own signal) - nothing here reads plain
+  // internal mutable state, which is what makes memoizing this one safe.
+  readonly hostProps = computed<Record<string, unknown>>(() => {
+    this.inputsRevision();
     return {
       nativeBackgroundAndroid: this.feedback['nativeBackgroundAndroid'],
       nativeForegroundAndroid: this.feedback['nativeForegroundAndroid'],
-      style: anchorHostStyle(this.elementRef),
+      style: this.anchorStyle(),
       testID: this.testID,
       nativeID: this.nativeID,
       accessible: this.accessible,
       ...this.folded,
     };
-  }
+  });
 
   // Forward an engine event to the matching @Output(), narrowing the template's untyped $event.
   emit(emitter: EventEmitter<ISymbioteEvent>, event: unknown): void {

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

@@ -35,9 +35,12 @@ import {
   Input,
   Output,
   ViewChild,
+  computed,
   inject,
+  signal,
   type AfterViewChecked,
   type DoCheck,
+  type OnChanges,
   type OnDestroy,
 } from '@angular/core';
 import {
@@ -86,7 +89,7 @@ import {
 } from '@symbiote-native/engine';
 import { ScrollView } from '../scroll-view';
 import { RefreshControl } from '../refresh-control';
-import { anchorHostStyle, ViewHost } from '../../primitives';
+import { anchorHostStyle, SymbioteStyleInputDirective, ViewHost } from '../../primitives';
 import {
   VListEmptyDirective,
   VListFooterDirective,
@@ -202,6 +205,7 @@ interface IWindowCell<ItemT> {
 @Component({
   selector: 'VirtualizedList',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [ScrollView, RefreshControl, VListOutletDirective, ViewHost],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -210,30 +214,30 @@ interface IWindowCell<ItemT> {
       [horizontal]="isHorizontal"
       [style]="resolvedStyle"
       [contentContainerStyle]="resolvedContentContainerStyle"
-      [testID]="foldedAccessibility.testID"
-      [nativeID]="foldedAccessibility.nativeID"
-      [accessible]="foldedAccessibility.accessible"
-      [accessibilityLabel]="foldedAccessibility.accessibilityLabel"
-      [accessibilityHint]="foldedAccessibility.accessibilityHint"
-      [accessibilityRole]="foldedAccessibility.accessibilityRole"
-      [accessibilityState]="foldedAccessibility.accessibilityState"
-      [accessibilityValue]="foldedAccessibility.accessibilityValue"
-      [accessibilityActions]="foldedAccessibility.accessibilityActions"
-      [accessibilityLabelledBy]="foldedAccessibility.accessibilityLabelledBy"
-      [importantForAccessibility]="foldedAccessibility.importantForAccessibility"
-      [accessibilityLiveRegion]="foldedAccessibility.accessibilityLiveRegion"
-      [screenReaderFocusable]="foldedAccessibility.screenReaderFocusable"
-      [accessibilityViewIsModal]="foldedAccessibility.accessibilityViewIsModal"
-      [accessibilityElementsHidden]="foldedAccessibility.accessibilityElementsHidden"
-      [accessibilityIgnoresInvertColors]="foldedAccessibility.accessibilityIgnoresInvertColors"
-      [accessibilityLanguage]="foldedAccessibility.accessibilityLanguage"
+      [testID]="foldedAccessibility().testID"
+      [nativeID]="foldedAccessibility().nativeID"
+      [accessible]="foldedAccessibility().accessible"
+      [accessibilityLabel]="foldedAccessibility().accessibilityLabel"
+      [accessibilityHint]="foldedAccessibility().accessibilityHint"
+      [accessibilityRole]="foldedAccessibility().accessibilityRole"
+      [accessibilityState]="foldedAccessibility().accessibilityState"
+      [accessibilityValue]="foldedAccessibility().accessibilityValue"
+      [accessibilityActions]="foldedAccessibility().accessibilityActions"
+      [accessibilityLabelledBy]="foldedAccessibility().accessibilityLabelledBy"
+      [importantForAccessibility]="foldedAccessibility().importantForAccessibility"
+      [accessibilityLiveRegion]="foldedAccessibility().accessibilityLiveRegion"
+      [screenReaderFocusable]="foldedAccessibility().screenReaderFocusable"
+      [accessibilityViewIsModal]="foldedAccessibility().accessibilityViewIsModal"
+      [accessibilityElementsHidden]="foldedAccessibility().accessibilityElementsHidden"
+      [accessibilityIgnoresInvertColors]="foldedAccessibility().accessibilityIgnoresInvertColors"
+      [accessibilityLanguage]="foldedAccessibility().accessibilityLanguage"
       [accessibilityRespondsToUserInteraction]="
-        foldedAccessibility.accessibilityRespondsToUserInteraction
+        foldedAccessibility().accessibilityRespondsToUserInteraction
       "
       [accessibilityShowsLargeContentViewer]="
-        foldedAccessibility.accessibilityShowsLargeContentViewer
+        foldedAccessibility().accessibilityShowsLargeContentViewer
       "
-      [accessibilityLargeContentTitle]="foldedAccessibility.accessibilityLargeContentTitle"
+      [accessibilityLargeContentTitle]="foldedAccessibility().accessibilityLargeContentTitle"
       (accessibilityAction)="accessibilityActionTick($event)"
       (accessibilityTap)="accessibilityTapTick($event)"
       (magicTap)="magicTapTick($event)"
@@ -275,6 +279,20 @@ interface IWindowCell<ItemT> {
         @if (leadingSpacerStyle !== null) {
           <symbiote-view [style]="leadingSpacerStyle"></symbiote-view>
         }
+        @if (forcedStickyCell !== null) {
+          <symbiote-view
+            (layout)="handleCellLayout(forcedStickyCell.measure, $event)"
+            [style]="cellStyle"
+          >
+            <ng-container
+              [vListOutlet]="itemDir?.templateRef"
+              [vListOutletContext]="forcedStickyCell.context"
+            ></ng-container>
+          </symbiote-view>
+        }
+        @if (gapSpacerStyle !== null) {
+          <symbiote-view [style]="gapSpacerStyle"></symbiote-view>
+        }
         @for (cell of windowCells; track cell.key) {
           <symbiote-view (layout)="handleCellLayout(cell.measure, $event)" [style]="cellStyle">
             <ng-container
@@ -310,6 +328,7 @@ export class VirtualizedList<ItemT = unknown>
     IVirtualizedListHandle,
     DoCheck,
     AfterViewChecked,
+    OnChanges,
     OnDestroy
 {
   // The list's edge/viewability/failure events as real Angular events: `(endReached)="…"`, not
@@ -426,7 +445,13 @@ export class VirtualizedList<ItemT = unknown>
   // --- template-bound view state, assembled in ngDoCheck (recomputeView) ---
   itemCount = EMPTY_OFFSET;
   windowCells: IWindowCell<ItemT>[] = [];
+  // The nearest sticky-header cell force-mounted outside [first,last] (plan.forcedStickyCell), the
+  // Angular twin of RN's _ensureClosestStickyHeader. Rendered ahead of windowCells, right after the
+  // leading spacer, with gapSpacerStyle filling the gap to the window's own first cell — see
+  // buildListPlan's doc comment for the exact child order this assumes.
+  forcedStickyCell: IWindowCell<ItemT> | null = null;
   leadingSpacerStyle: IViewStyle | null = null;
+  gapSpacerStyle: IViewStyle | null = null;
   trailingSpacerStyle: IViewStyle | null = null;
   cellStyle: IViewStyle | undefined = undefined;
   renderedStickyIndices: number[] | undefined = undefined;
@@ -457,6 +482,9 @@ export class VirtualizedList<ItemT = unknown>
   private batchTimer: ReturnType<typeof setTimeout> | null = null;
   // Dedupes the after-commit effects: they run only when the windowing signature changed.
   private lastEffectSignature = '';
+  // Dedupes dispatch's markForCheck against the RENDERED window (see dispatch below). Distinct from
+  // lastEffectSignature, which gates the batch-fill timer and deliberately includes scrollOffset.
+  private lastRenderSignature = '';
   // Dedupes ngDoCheck's own recompute. WITHOUT this, recomputeView() unconditionally rebuilds
   // windowCells (and each cell's `separators` handle — fresh closures every call) on EVERY CD pass,
   // including ones triggered by something else entirely in the app. A fresh context object flows
@@ -476,7 +504,27 @@ export class VirtualizedList<ItemT = unknown>
   // inner `<ScrollView>` one level down (itself its own separate anchor host).
   private readonly elementRef = inject(ElementRef);
 
-  get foldedAccessibility(): IAccessibilityProps & IAriaProps & Record<string, unknown> {
+  // Bridges the non-reactive @Input fields into the reactive graph so the computed below can
+  // memoize a bag derived from them (the same bridge ScrollView's shared.ts uses - read its comment
+  // for why signal inputs are not an option while this package's unit suite runs on JIT).
+  //
+  // ONLY safe for a bag whose every dependency is an @Input. This list's window machinery
+  // (listState, renderVersion, windowCells, the measured metrics) is driven from scroll/layout
+  // callbacks that never touch ngOnChanges, so nothing derived from it may ride this signal - it
+  // would memoize a window that stops re-computing mid-scroll. Make that state its own signal
+  // instead of widening this one.
+  private readonly inputsRevision = signal(0);
+
+  // MEASURED: the template feeds 20 separate <ScrollView> inputs off this one bag, and Angular does
+  // not cache a getter across binding expressions - as a getter it rebuilt the object 20 times per
+  // refresh, and every consumer saw a fresh reference, so all 20 reported "changed" and wrote
+  // through to the ScrollView. A computed evaluates once and hands back the SAME object until an
+  // input actually changes. Every dependency below is an @Input, which is what makes
+  // inputsRevision a complete dependency set here.
+  readonly foldedAccessibility = computed<
+    IAccessibilityProps & IAriaProps & Record<string, unknown>
+  >(() => {
+    this.inputsRevision();
     return resolveAccessibilityProps({
       testID: this.testID,
       nativeID: this.nativeID,
@@ -514,7 +562,7 @@ export class VirtualizedList<ItemT = unknown>
       'aria-valuenow': this.ariaValueNow,
       'aria-valuetext': this.ariaValueText,
     });
-  }
+  });
 
   get shouldRenderRefreshControl(): boolean {
     return this.refreshRequested ?? this.refresh.observed;
@@ -631,10 +679,22 @@ export class VirtualizedList<ItemT = unknown>
     const inputs = this.buildInputs();
     const result = reduceList(this.listState, action, inputs);
     this.runEffects(result.effects, inputs);
-    if (result.changed) {
-      this.renderVersion += 1;
-      this.cdr.markForCheck();
-    }
+    if (!result.changed) return;
+    this.renderVersion += 1;
+    // The reducer reports `changed` for EVERY scroll offset - it has to, since the offset feeds
+    // end-reached distance, viewability and the batch-fill timer, all handled above in runEffects.
+    // The TEMPLATE reads none of those; it reads the window. Marking on the offset repainted the
+    // whole ancestor chain 60 times a second on a sticky screen for a window that had not moved.
+    const signature = this.renderSignature();
+    if (signature === this.lastRenderSignature) return;
+    this.lastRenderSignature = signature;
+    this.cdr.markForCheck();
+  }
+
+  // The window, not the offset: exactly the metrics recomputeView turns into cells and spacers.
+  private renderSignature(): string {
+    const m = this.listState.metrics;
+    return `${m.first}|${m.last}|${m.count}|${m.total}`;
   }
 
   private runEffects(effects: IListEffect<ItemT>[], inputs: IListReducerInputs<ItemT>): void {
@@ -690,6 +750,14 @@ export class VirtualizedList<ItemT = unknown>
     }
   }
 
+  // foldedAccessibility reads plain @Input fields, which are NOT reactive on their own - this bump
+  // is what tells that computed an input changed. It must stay in ngOnChanges: that is the single
+  // moment Angular has finished writing every changed input for this pass, and it runs before
+  // ngDoCheck below, so the recompute already sees the current values.
+  ngOnChanges(): void {
+    this.inputsRevision.update(revision => revision + 1);
+  }
+
   // Once-per-CD recompute, BEFORE the template bindings are read (so the freshly computed
   // template-bound fields render this pass — computing them in ngAfterContentChecked instead would
   // trip ExpressionChangedAfterItHasBeenChecked). The dedup guard runs refresh-metrics (which owns
@@ -710,6 +778,10 @@ export class VirtualizedList<ItemT = unknown>
       this.stickyHeaderIndices,
       this.maintainVisibleContentPosition,
       this.style,
+      // `recomputeView` folds this into the committed style, but it arrives through
+      // addClass/removeClass, never as an @Input - so without it here no entry moves on a class
+      // toggle and the gate skips the recompute forever. Reference-stable, so the dedup holds.
+      anchorHostStyle(this.elementRef),
       this.contentContainerStyle,
       // Folds scroll / layout / measure / batch-tick: dispatch bumps renderVersion on any change.
       this.renderVersion,
@@ -779,7 +851,9 @@ export class VirtualizedList<ItemT = unknown>
 
     if (m.count === FIRST_INDEX) {
       this.windowCells = [];
+      this.forcedStickyCell = null;
       this.leadingSpacerStyle = null;
+      this.gapSpacerStyle = null;
       this.trailingSpacerStyle = null;
       this.renderedStickyIndices = undefined;
       dlog(`Angular VirtualizedList empty (viewport=${this.listState.viewportLength})`);
@@ -800,32 +874,29 @@ export class VirtualizedList<ItemT = unknown>
     });
     this.leadingSpacerStyle =
       plan.leadingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.leadingExtent) : null;
+    this.gapSpacerStyle = plan.gapExtent > EMPTY_OFFSET ? this.spacerStyle(plan.gapExtent) : null;
     this.trailingSpacerStyle =
       plan.trailingExtent > EMPTY_OFFSET ? this.spacerStyle(plan.trailingExtent) : null;
     this.renderedStickyIndices =
       stickySet !== undefined && plan.stickyChildPositions.length > 0
         ? plan.stickyChildPositions
         : undefined;
+    dlog(
+      `STICKY[list] stickySet=${stickySet === undefined ? 'undefined' : JSON.stringify([...stickySet])} ` +
+        `childPositions=${JSON.stringify(plan.stickyChildPositions)} ` +
+        `forcedStickyCell=${plan.forcedStickyCell === undefined ? 'none' : plan.forcedStickyCell.index} ` +
+        `window=[${m.first},${m.last}] hasHeader=${this.headerDir !== undefined}`,
+    );
+
+    this.forcedStickyCell =
+      plan.forcedStickyCell !== undefined
+        ? this.buildWindowCell(plan.forcedStickyCell.index, plan.forcedStickyCell.key, false)
+        : null;
 
     const cells: IWindowCell<ItemT>[] = [];
     for (const planned of plan.cells) {
-      const item = this.getItem(this.data, planned.index);
-      const context: IVListItemContext<ItemT> = {
-        $implicit: item,
-        index: planned.index,
-        separators: this.makeSeparators(planned.index),
-      };
-      let separatorContext: IVListSeparatorContext<ItemT> | undefined;
-      if (hasSeparators && planned.index < m.last) {
-        separatorContext = this.buildSeparatorContext(planned.index, item);
-      }
-      cells.push({
-        key: planned.key,
-        index: planned.index,
-        context,
-        measure: this.cellMeasure(planned.index),
-        separatorContext,
-      });
+      const includeSeparator = hasSeparators && planned.index < m.last;
+      cells.push(this.buildWindowCell(planned.index, planned.key, includeSeparator));
     }
     this.windowCells = cells;
 
@@ -835,6 +906,28 @@ export class VirtualizedList<ItemT = unknown>
     );
   }
 
+  // Assembles one cell (window or forced-sticky) — the context, measure closure, and optional
+  // separator context — so both plan.cells and plan.forcedStickyCell build identically.
+  private buildWindowCell(
+    index: number,
+    key: string,
+    includeSeparator: boolean,
+  ): IWindowCell<ItemT> {
+    const item = this.getItem(this.data, index);
+    const context: IVListItemContext<ItemT> = {
+      $implicit: item,
+      index,
+      separators: this.makeSeparators(index),
+    };
+    return {
+      key,
+      index,
+      context,
+      measure: this.cellMeasure(index),
+      separatorContext: includeSeparator ? this.buildSeparatorContext(index, item) : undefined,
+    };
+  }
+
   private buildSeparatorContext(index: number, item: ItemT): IVListSeparatorContext<ItemT> {
     const overrides = this.separatorOverrides.get(index);
     const highlighted = overrides?.highlighted ?? false;

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

@@ -64,7 +64,7 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle } from '../../primitives';
+import { stableAnchorStyle, SymbioteStyleInputDirective } from '../../primitives';
 import {
   VSectionFooterDirective,
   VSectionHeaderDirective,
@@ -146,6 +146,7 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'VirtualizedSectionList',
   standalone: true,
+  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
   imports: [
     VirtualizedList,
     VListItemDirective,

package/src/components.ts

@@ -134,6 +134,11 @@ export {
   RefreshControlHost,
   InputAccessoryViewHost,
   SymbioteHostPropsDirective,
+  // Public even though no app names it: it rides `hostDirectives` on every component declaring a
+  // `style` input, so ngtsc writes it into their public type metadata and a consuming app's AOT
+  // build fails with NG3004 without it. Invisible to tsc and vitest; only a consumer's ngc catches
+  // it.
+  SymbioteStyleInputDirective,
   // Exported so an OUT-OF-PACKAGE composed component (e.g. @symbiote-native/slider's Angular wrapper,
   // itself listed in ANCHOR_HOST_COMPONENTS) can merge its own anchor host's class-derived style
   // the same way every in-package composed component does — see anchorHostStyle's doc comment.

package/src/create-portal/index.ts

@@ -1,38 +1,32 @@
 // createPortal for @symbiote-native/angular — the Angular twin of the React/Vue same-surface portal
-// (create-portal.ts / Teleport in runtime-helpers.ts). Scope is identical: the target must be
-// an already-mounted location WITHIN THE SAME SURFACE as the portal's call site — moving content
-// across independently-mounted surfaces has no safe host-level primitive to hook into, so
-// createTunnel (create-tunnel.ts) covers that cross-surface case instead.
+// (create-portal.ts / Teleport in runtime-helpers.ts). Scope is identical: the target must be an
+// already-mounted location WITHIN THE SAME SURFACE as the portal's call site — moving content
+// across independently-mounted surfaces has no safe host-level primitive, so createTunnel
+// (create-tunnel.ts) covers that cross-surface case instead.
 //
-// React/Vue implement this as a thin validating wrapper around a mechanism the FRAMEWORK
-// ITSELF already has (react-reconciler's Fiber-level HostPortal, Vue's own <Teleport>) — all
-// the actual node-moving is handled generically by the engine's insert/remove, which those
-// frameworks already call. Angular has no such built-in: there is no `@angular/cdk` dependency
-// here (core-only, see package.json), and physically moving an EmbeddedView's already-created
-// root nodes via Renderer2 after the fact is NOT safe — Angular's own view-destroy path removes
-// a view's nodes from wherever ITS OWN bookkeeping thinks they live (the container's insertion
-// point), not from wherever a node was manually moved to afterwards, so a raw Renderer2 move
-// would desync Angular's internals from the retained tree.
+// React/Vue implement this as a thin validating wrapper around a mechanism the framework itself
+// already has (react-reconciler's Fiber-level HostPortal, Vue's own <Teleport>). Angular has no
+// such built-in (no `@angular/cdk` dependency here, core-only — see package.json), and physically
+// moving an EmbeddedView's already-created root nodes via Renderer2 after the fact is NOT safe —
+// Angular's own view-destroy path removes a view's nodes from wherever ITS OWN bookkeeping thinks
+// they live, not from wherever a node was manually moved to, so a raw Renderer2 move would desync
+// Angular's internals from the retained tree.
 //
-// PortalDirective is a STRUCTURAL directive (`*portal="overlayHost"`), not a component that
-// takes a separate `<ng-template>` + `[content]` binding — that two-step reads as foreign to
-// anyone used to `*ngIf`/`*ngFor`/`*ngTemplateOutlet`, where the directive sits directly on the
-// content and its TemplateRef comes from injection, not a passed-in reference. `*portal="x"`
-// desugars the same way `*ngIf` does: Angular wraps the host element in an `<ng-template>` and
-// injects that template's own TemplateRef into the directive automatically.
+// PortalDirective is a STRUCTURAL directive (`*portal="overlayHost"`), not a component taking a
+// separate `<ng-template>` + `[content]` binding — that two-step reads as foreign next to
+// `*ngIf`/`*ngFor`/`*ngTemplateOutlet`. `*portal="x"` desugars the same way `*ngIf` does: Angular
+// wraps the host element in an `<ng-template>` and injects that template's own TemplateRef into
+// the directive automatically.
 //
 // The safe, fully-public-API mechanism: create the embedded view DIRECTLY inside a
 // ViewContainerRef anchored at the destination, so there is nothing to move at all. That
-// ViewContainerRef has to come from somewhere in the destination's own template — hence
-// `PortalOutletDirective`, a marker placed on the target host (`<View portalOutlet
-// #overlayHost="portalOutlet">`) purely to expose its ViewContainerRef, the same
-// export-as-template-variable idiom `#form="ngForm"` uses. This also replaces the
-// `isSymbioteNode` runtime guard React/Vue need: there `to` is an arbitrary JS value at
-// runtime (a wrong ref, a string, a plain object all type-check as `any`/`unknown` until
-// validated), but here `to` is typed as `PortalOutletDirective` — the only way to construct
-// one is Angular's own template compiler resolving a template reference variable, so
-// `strictTemplates` rejects anything else at compile time and there is nothing left to guard
-// against at runtime.
+// ViewContainerRef comes from `PortalOutletDirective`, a marker placed on the target host
+// (`<View portalOutlet #overlayHost="portalOutlet">`) purely to expose its ViewContainerRef, the
+// same export-as-template-variable idiom `#form="ngForm"` uses. This also replaces the
+// `isSymbioteNode` runtime guard React/Vue need (there `to` is an arbitrary JS value until
+// validated): here `to` is typed as `PortalOutletDirective` — the only way to construct one is
+// Angular's own template compiler resolving a template reference variable, so `strictTemplates`
+// rejects anything else at compile time and there is nothing left to guard at runtime.
 
 import {
   Directive,

package/src/create-tunnel/index.ts

@@ -1,25 +1,22 @@
 // createTunnel for @symbiote-native/angular — the Angular twin of the React/Vue cross-surface tunnel
 // (adapters/react/src/create-tunnel.tsx, adapters/vue/src/create-tunnel.ts — read their
-// headers for the full "why not just extend the portal across surfaces" rationale; same prior
-// art: pmndrs/tunnel-rat, facebook/react#17147). `TunnelOut` lives in whichever component should
-// PAINT the content; its OWN read of the shared store drives that surface's own normal render
-// cycle — no cross-surface reach-in, no rootTag lookup, works whether TunnelIn and TunnelOut
-// share a surface or not.
+// headers for the "why not just extend the portal across surfaces" rationale; same prior art:
+// pmndrs/tunnel-rat, facebook/react#17147). `TunnelOut` lives in whichever component should PAINT
+// the content; its own read of the shared store drives that surface's own normal render cycle —
+// no cross-surface reach-in, works whether TunnelIn and TunnelOut share a surface or not.
 //
-// Angular cannot mirror React's/Vue's shape verbatim: both of those build a FRESH `In`/`Out`
-// pair per `createTunnel()` call (a closure-scoped class in Vue, closure-scoped functions in
-// React). Angular components can't be synthesized at runtime — there is no JIT compiler under
-// Metro/Hermes (see modules/animated/create-animated-component.ts's header for the same
+// Angular cannot mirror React's/Vue's shape verbatim: both build a FRESH `In`/`Out` pair per
+// `createTunnel()` call, and Angular components can't be synthesized at runtime — no JIT compiler
+// under Metro/Hermes (see modules/animated/create-animated-component.ts's header for the same
 // constraint). So here `createTunnel()` returns only a plain reactive STORE (a signal);
 // `TunnelInDirective` and `TunnelOut` are ONE static, pre-authored, AOT-compilable pair,
-// parameterized by that store through an input — same relationship `VListOutletDirective` has
-// to the per-cell template it stamps, generalized to an open-ended, changing SET of templates.
+// parameterized by that store through an input — the relationship `VListOutletDirective` has to
+// the per-cell template it stamps, generalized to an open-ended, changing SET of templates.
 //
-// TunnelInDirective is a STRUCTURAL directive (`*tunnelIn="overlayTunnel"`), not a component
-// that takes a separate `<ng-template>` + `[content]` binding — matching `*portal` (see
-// create-portal.ts's header for why that reads as native Angular and the two-step form
-// doesn't). `TunnelOut` stays a plain component (`<tunnel-out>`) — it's a rendering SLOT, the
-// same shape as Angular's own `<router-outlet>`, not content that needs a structural directive.
+// TunnelInDirective is a STRUCTURAL directive (`*tunnelIn="overlayTunnel"`), matching `*portal`
+// (see create-portal.ts's header for why that reads as native Angular). `TunnelOut` stays a plain
+// component (`<tunnel-out>`) — a rendering SLOT, the same shape as Angular's own
+// `<router-outlet>`, not content that needs a structural directive.
 //
 // App code stays fully declarative — no ViewContainerRef/imperative rendering — by putting
 // `*tunnelIn` directly on the portable content, the same way `*ngIf` sits directly on an

package/src/index.ts

@@ -27,6 +27,7 @@ export {
   stableAnchorStyle,
   Switch,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
   Text,
   TextInput,
   TouchableHighlight,
@@ -249,7 +250,6 @@ export type {
 } from '@symbiote-native/engine';
 export {
   dlog,
-  flattenStyle,
   isDebug,
   Platform,
   processColor,
@@ -259,3 +259,32 @@ export {
   StyleSheet,
 } from '@symbiote-native/engine';
 export type { IRootTag, ISymbioteEvent, ISymbioteNode } from '@symbiote-native/engine';
+// The agnostic style / platform / view-config types behind the values above. Angular takes its
+// component props as @Input()s and exports no per-component prop type, but an app still needs
+// these to type a style object or a Platform.select spec.
+export type {
+  IViewStyle,
+  ITextStyle,
+  IFlexAlign,
+  IFlexJustify,
+  IPlatformStatic,
+  IPlatformOSType,
+  IPlatformConstantsIOS,
+  IPlatformConstantsAndroid,
+  IPlatformSelectSpec,
+  INativeViewConfig,
+  INativeViewConfigSource,
+} from '@symbiote-native/engine';
+export type {
+  IAccessibilityProps,
+  IAriaProps,
+  IAccessibilityRole,
+  IRole,
+  IAccessibilityStateValue,
+  IAccessibilityValue,
+  IAccessibilityActionInfo,
+  IResponderProps,
+  IPressState,
+  IPressableAndroidRippleConfig,
+  IImageStatics,
+} from '@symbiote-native/components';