@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components/touchable/touchable.test.ts

@@ -0,0 +1,102 @@
+// Regression coverage for the anchor-vs-real-content class bug (see pressable.test.ts for the
+// full writeup): a `class="..."` written on a composed component's OWN use site always resolves
+// through Angular's addClass/removeClass onto that component's non-painting ANCHOR host, never
+// onto the real committed Fabric view one (or more) levels down. Each Touchable forwards its own
+// anchor's resolved style into whatever it commits, mirroring Pressable's fix.
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback } from './index';
+
+const ROOT_TAG = 940;
+const fabric = installFabric();
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+@Component({
+  selector: 'symbiote-touchable-opacity-host',
+  standalone: true,
+  imports: [TouchableOpacity],
+  template: `
+    <TouchableOpacity [testID]="'opacity'" class="card">
+      <symbiote-text>Press</symbiote-text>
+    </TouchableOpacity>
+  `,
+})
+class TouchableOpacityHost {}
+
+@Component({
+  selector: 'symbiote-touchable-highlight-host',
+  standalone: true,
+  imports: [TouchableHighlight],
+  template: `
+    <TouchableHighlight [testID]="'highlight'" class="card">
+      <symbiote-text>Press</symbiote-text>
+    </TouchableHighlight>
+  `,
+})
+class TouchableHighlightHost {}
+
+@Component({
+  selector: 'symbiote-touchable-without-feedback-host',
+  standalone: true,
+  imports: [TouchableWithoutFeedback],
+  template: `
+    <TouchableWithoutFeedback [testID]="'without-feedback'" class="card">
+      <symbiote-text>Press</symbiote-text>
+    </TouchableWithoutFeedback>
+  `,
+})
+class TouchableWithoutFeedbackHost {}
+
+describe('TouchableOpacity', () => {
+  it('resolves a class= on the TouchableOpacity use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, TouchableOpacityHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    // TouchableOpacity folds its OWN class-derived style into the inner AnimatedView leaf, not
+    // the outer Pressable — mirroring React's TouchableOpacity (see adapters/react/src/components/
+    // touchable/index.ts's comment: "className is pulled out here, like style, and applied to the
+    // inner AnimatedView... it would land on the outer Pressable instead, which is not what a user
+    // expects"), so the testID-carrying outer view is NOT where the resolved style lands.
+    expect(fabric.find(n => n.props.testID === 'opacity')).toBeDefined();
+    const node = fabric.find(n => n.props.backgroundColor === 'red');
+    expect(node, 'a committed node received the class-derived style').toBeDefined();
+  });
+});
+
+describe('TouchableHighlight', () => {
+  it('resolves a class= on the TouchableHighlight use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, TouchableHighlightHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'highlight');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});
+
+describe('TouchableWithoutFeedback', () => {
+  it('resolves a class= on the TouchableWithoutFeedback use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, TouchableWithoutFeedbackHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'without-feedback');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});

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

@@ -0,0 +1,254 @@
+// 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.
+//
+// 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.
+
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  type OnChanges,
+} from '@angular/core';
+import {
+  backgroundProps,
+  canUseNativeForeground,
+  resolveAccessibilityProps,
+  resolveDisabledAccessibilityState,
+  rippleBackground,
+  selectableBackground,
+  selectableBackgroundBorderless,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IAriaProps,
+  type INativeFeedbackBackground,
+  type IPressableAndroidRippleConfig,
+  type IRectOffset,
+} from '@symbiote-native/components';
+import { dlog, isSymbioteEvent, type ISymbioteEvent } from '@symbiote-native/engine';
+import { anchorHostStyle, SymbioteHostPropsDirective, ViewHost } from '../../primitives';
+import { Pressable, type IAngularPressableInputs } from '../pressable';
+
+export type {
+  INativeFeedbackBackground,
+  IThemeAttrBackground,
+  IRippleBackground,
+} from '@symbiote-native/components';
+
+// Mirrors React's ITouchableNativeFeedbackProps (Omit<IPressableProps, 'style'> + the native
+// feedback config) minus children (Angular takes children via <ng-content>) and minus the press/
+// hover events (declared as this component's OWN @Output()s below). Declared per-adapter over the
+// shared Pressable INPUT surface.
+export type IAngularTouchableNativeFeedbackProps = Omit<IAngularPressableInputs, 'style'> & {
+  background?: INativeFeedbackBackground;
+  useForeground?: boolean;
+};
+
+@Component({
+  selector: 'TouchableNativeFeedback',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [Pressable, ViewHost, SymbioteHostPropsDirective],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <Pressable
+      (press)="press.emit($event)"
+      (pressIn)="pressIn.emit($event)"
+      (pressOut)="pressOut.emit($event)"
+      (pressMove)="pressMove.emit($event)"
+      (longPress)="longPress.emit($event)"
+      (hoverIn)="hoverIn.emit($event)"
+      (hoverOut)="hoverOut.emit($event)"
+      [delayLongPress]="delayLongPress"
+      [delayHoverIn]="delayHoverIn"
+      [delayHoverOut]="delayHoverOut"
+      [disabled]="disabled"
+      [cancelable]="cancelable"
+      [hitSlop]="hitSlop"
+      [pressRetentionOffset]="pressRetentionOffset"
+      [unstable_pressDelay]="unstable_pressDelay"
+      [android_ripple]="android_ripple"
+      [android_disableSound]="android_disableSound"
+    >
+      <symbiote-view
+        [symbioteHostProps]="hostProps"
+        (accessibilityAction)="emit(accessibilityAction, $event)"
+        (accessibilityTap)="emit(accessibilityTap, $event)"
+        (magicTap)="emit(magicTap, $event)"
+        (accessibilityEscape)="emit(accessibilityEscape, $event)"
+      >
+        <ng-content></ng-content>
+      </symbiote-view>
+    </Pressable>
+  `,
+})
+export class TouchableNativeFeedback implements IAngularTouchableNativeFeedbackProps, OnChanges {
+  // 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;
+  static readonly SelectableBackgroundBorderless = selectableBackgroundBorderless;
+  static readonly Ripple = rippleBackground;
+  static readonly canUseNativeForeground = canUseNativeForeground;
+
+  @Output() readonly press = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly pressIn = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly pressOut = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly pressMove = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly longPress = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly hoverIn = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly hoverOut = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+  @Input() background?: INativeFeedbackBackground;
+  @Input() useForeground?: boolean;
+  @Input() delayLongPress?: number;
+  @Input() delayHoverIn?: number;
+  @Input() delayHoverOut?: number;
+  @Input() disabled?: boolean;
+  @Input() cancelable?: boolean;
+  @Input() hitSlop?: IRectOffset;
+  @Input() pressRetentionOffset?: IRectOffset;
+  @Input() unstable_pressDelay?: number;
+  @Input() android_ripple?: IPressableAndroidRippleConfig;
+  @Input() android_disableSound?: boolean;
+  @Input() testID?: string;
+  @Input() nativeID?: string;
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the feedback <symbiote-view> one level down.
+  // TouchableNativeFeedback has no explicit `style`/`class`-forwarding @Input() of its own (RN's
+  // TouchableNativeFeedback takes none either — style/class always came from the child), so the
+  // anchor's class-derived style is the ONLY style source for hostProps.style below.
+  private readonly elementRef = inject(ElementRef);
+
+  ngOnChanges(): void {
+    dlog(
+      `TouchableNativeFeedback render ${this.resolvedBackground.type} useForeground ${this.useForeground === true}`,
+    );
+  }
+
+  // RN defaults a missing background to SelectableBackground() so the touchable always shows
+  // feedback; mirror that here.
+  private get resolvedBackground(): INativeFeedbackBackground {
+    return this.background ?? selectableBackground();
+  }
+
+  // backgroundProps picks the foreground slot only where the platform supports it, else the
+  // background slot (canUseNativeForeground) — shared with React/Vue. One side is always undefined.
+  get feedback(): Record<string, INativeFeedbackBackground> {
+    return backgroundProps(this.resolvedBackground, this.useForeground === true);
+  }
+
+  // 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> {
+    return {
+      nativeBackgroundAndroid: this.feedback['nativeBackgroundAndroid'],
+      nativeForegroundAndroid: this.feedback['nativeForegroundAndroid'],
+      style: anchorHostStyle(this.elementRef),
+      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 {
+    if (isSymbioteEvent(event)) emitter.emit(event);
+  }
+
+  // Fold the web aria-*/role aliases into the canonical accessibility* props once per render, so the
+  // host never sees an aria-* key (native ignores them), and merge `disabled` into the a11y state
+  // (resolveDisabledAccessibilityState) the same way Pressable does for its own host.
+  get folded(): Partial<IAngularTouchableNativeFeedbackProps> {
+    return resolveAccessibilityProps({
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: resolveDisabledAccessibilityState(this.accessibilityState, this.disabled),
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    });
+  }
+}

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

@@ -0,0 +1,49 @@
+// Regression coverage for the anchor-vs-real-content class bug (see pressable.test.ts for the
+// full writeup): a `class="..."` written on TouchableNativeFeedback's OWN use site always resolves
+// through Angular's addClass/removeClass onto its non-painting ANCHOR host, never onto the real
+// committed feedback <symbiote-view> one level down. TouchableNativeFeedback has no explicit
+// `style`/`class`-forwarding @Input() of its own, so the anchor's class-derived style is the
+// ONLY style source hostProps.style forwards.
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { TouchableNativeFeedback } from './index';
+
+const ROOT_TAG = 941;
+const fabric = installFabric();
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+@Component({
+  selector: 'symbiote-touchable-native-feedback-host',
+  standalone: true,
+  imports: [TouchableNativeFeedback],
+  template: `
+    <TouchableNativeFeedback [testID]="'native-feedback'" class="card">
+      <symbiote-text>Press</symbiote-text>
+    </TouchableNativeFeedback>
+  `,
+})
+class TouchableNativeFeedbackHost {}
+
+describe('TouchableNativeFeedback', () => {
+  it('resolves a class= on the TouchableNativeFeedback use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, TouchableNativeFeedbackHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'native-feedback');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});

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

@@ -0,0 +1,168 @@
+// VirtualizedList authoring directives: the Angular-faithful equivalent of React/Vue
+// `renderItem` / `ListHeaderComponent` / `ListFooterComponent` / `ListEmptyComponent` /
+// `ItemSeparatorComponent`. React/Vue pass an element-returning callback; that does NOT
+// translate to Angular, where per-item content is a TEMPLATE. So the app supplies each
+// slot as an `<ng-template>` carrying one of these structural directives, and the list
+// stamps the windowed slice through them. The agnostic windowing surface stays shared,
+// only the cell-AUTHORING shape is framework-specific.
+//
+// Authoring API (what FlatList / SectionList build on, and what the app imports):
+//   <VirtualizedList [data]="rows" [getItem]="getItem" [getItemCount]="count">
+//     <ng-template vListItem let-item let-index="index" let-separators="separators"> … </ng-template>
+//     <ng-template vListHeader> … </ng-template>
+//     <ng-template vListFooter> … </ng-template>
+//     <ng-template vListEmpty> … </ng-template>
+//     <ng-template vListSeparator let-highlighted="highlighted" let-leadingItem="leadingItem"> … </ng-template>
+//   </VirtualizedList>
+//
+// `vListItem` carries a static ngTemplateContextGuard so `let-item` infers as ItemT and
+// `let-index` / `let-separators` are typed — the Angular twin of `renderItem`'s typed info arg.
+//
+// VListOutletDirective is the INTERNAL renderer the list uses to stamp those templates. It is
+// a core-only reimplementation of `@angular/common`'s NgTemplateOutlet (the adapter depends on
+// @angular/core ONLY — see package.json), built on ViewContainerRef / TemplateRef from
+// @angular/core: create on template change, update the embedded view's context in place on a
+// context change (no churn of the cell's own view across windowing recomputes).
+
+import {
+  Directive,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+  inject,
+  type EmbeddedViewRef,
+  type OnChanges,
+  type OnDestroy,
+  type SimpleChanges,
+} from '@angular/core';
+import { dlog } from '@symbiote-native/engine';
+import type { ISeparators } from '@symbiote-native/components';
+
+let vListOutletInstanceCounter = 0;
+
+// The context a `vListItem` template receives, mirroring RN's renderItem info arg
+// ({ item, index, separators }). `$implicit` is the item, so `let-item` (no key) binds it.
+export interface IVListItemContext<ItemT> {
+  $implicit: ItemT;
+  index: number;
+  separators: ISeparators;
+}
+
+// The context a `vListSeparator` template receives, mirroring RN's ItemSeparatorComponent props
+// (the highlight flag the cell toggles + the items flanking the gap). `$implicit` is the highlight
+// flag, so `let-highlighted` binds it.
+export interface IVListSeparatorContext<ItemT> {
+  $implicit: boolean;
+  highlighted: boolean;
+  leadingItem?: ItemT;
+  trailingItem?: ItemT;
+  // RN lets a row drive arbitrary separator props via separators.updateProps; they ride here.
+  [key: string]: unknown;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+// `<ng-template vListItem>` — the per-cell content. The static guard makes the `let-` bindings
+// typed at the call site (let-item: ItemT, let-index: number, let-separators: ISeparators).
+@Directive({ selector: '[vListItem]', standalone: true })
+export class VListItemDirective<ItemT = unknown> {
+  readonly templateRef = inject<TemplateRef<IVListItemContext<ItemT>>>(TemplateRef);
+
+  static ngTemplateContextGuard<T>(
+    _dir: VListItemDirective<T>,
+    _ctx: unknown,
+  ): _ctx is IVListItemContext<T> {
+    return true;
+  }
+}
+
+// `<ng-template vListHeader>` — rendered once above the cells (RN ListHeaderComponent).
+@Directive({ selector: '[vListHeader]', standalone: true })
+export class VListHeaderDirective {
+  readonly templateRef = inject(TemplateRef);
+}
+
+// `<ng-template vListFooter>` — rendered once below the cells (RN ListFooterComponent).
+@Directive({ selector: '[vListFooter]', standalone: true })
+export class VListFooterDirective {
+  readonly templateRef = inject(TemplateRef);
+}
+
+// `<ng-template vListEmpty>` — rendered in place of the cells when the list is empty
+// (RN ListEmptyComponent).
+@Directive({ selector: '[vListEmpty]', standalone: true })
+export class VListEmptyDirective {
+  readonly templateRef = inject(TemplateRef);
+}
+
+// `<ng-template vListSeparator>` — rendered between cells (RN ItemSeparatorComponent). The guard
+// types the `let-` bindings against the separator props.
+@Directive({ selector: '[vListSeparator]', standalone: true })
+export class VListSeparatorDirective<ItemT = unknown> {
+  readonly templateRef = inject<TemplateRef<IVListSeparatorContext<ItemT>>>(TemplateRef);
+
+  static ngTemplateContextGuard<T>(
+    _dir: VListSeparatorDirective<T>,
+    _ctx: unknown,
+  ): _ctx is IVListSeparatorContext<T> {
+    return true;
+  }
+}
+
+// Core-only NgTemplateOutlet twin. The adapter cannot import @angular/common's NgTemplateOutlet
+// (not a dependency), so the list stamps templates through this: it creates the embedded view when
+// the template changes and updates the live view's context IN PLACE on a context change, so a
+// windowing recompute (a fresh context object every CD) refreshes the cell without tearing it down.
+@Directive({ selector: '[vListOutlet]', standalone: true })
+export class VListOutletDirective<C = unknown> implements OnChanges, OnDestroy {
+  @Input({ alias: 'vListOutlet' }) templateRef?: TemplateRef<C>;
+  @Input({ alias: 'vListOutletContext' }) context?: C;
+
+  private viewRef: EmbeddedViewRef<C> | null = null;
+  private readonly viewContainer = inject(ViewContainerRef);
+  private readonly instanceId = (vListOutletInstanceCounter += 1);
+
+  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`,
+      );
+      this.viewContainer.clear();
+      this.viewRef =
+        this.templateRef === undefined
+          ? null
+          : this.viewContainer.createEmbeddedView(this.templateRef, this.context);
+      return;
+    }
+    if (this.viewRef !== null && this.context !== undefined) {
+      dlog(`Angular VListOutlet#${this.instanceId} context updated, markForCheck`);
+      this.updateContext(this.viewRef.context, this.context);
+      this.viewRef.markForCheck();
+    }
+  }
+
+  ngOnDestroy(): void {
+    dlog(`Angular VListOutlet#${this.instanceId} destroyed`);
+    this.viewContainer.clear();
+  }
+
+  // Copy the new context's fields onto the live embedded view's context object (whose identity the
+  // consumer's `let-` bindings already read), dropping keys that disappeared. The generic `C` can't
+  // be index-WRITTEN even once narrowed (TS2862), so the copy runs in a non-generic helper the
+  // guarded records flow into — no cast (NgTemplateOutlet does the same copy via `as any`).
+  private updateContext(viewContext: C, nextContext: C): void {
+    if (!isRecord(viewContext) || !isRecord(nextContext)) return;
+    copyContextFields(viewContext, nextContext);
+  }
+}
+
+function copyContextFields(target: Record<string, unknown>, source: Record<string, unknown>): void {
+  for (const key of Object.keys(target)) {
+    if (!(key in source)) delete target[key];
+  }
+  for (const key of Object.keys(source)) {
+    target[key] = source[key];
+  }
+}