@symbiote-native/angular 0.6.2 → 0.8.0

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

@@ -46,7 +46,8 @@ export interface IVSectionContext<ItemT> {
 // `<ng-template vSectionItem>` — one section item row. The static guard types the `let-` bindings.
 @Directive({ selector: '[vSectionItem]', standalone: true })
 export class VSectionItemDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVSectionItemContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVSectionItemContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VSectionItemDirective<T>,
@@ -59,7 +60,8 @@ export class VSectionItemDirective<ItemT = unknown> {
 // `<ng-template vSectionHeader>` — rendered above each section's items (RN renderSectionHeader).
 @Directive({ selector: '[vSectionHeader]', standalone: true })
 export class VSectionHeaderDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VSectionHeaderDirective<T>,
@@ -72,7 +74,8 @@ export class VSectionHeaderDirective<ItemT = unknown> {
 // `<ng-template vSectionFooter>` — rendered below each section's items (RN renderSectionFooter).
 @Directive({ selector: '[vSectionFooter]', standalone: true })
 export class VSectionFooterDirective<ItemT = unknown> {
-  readonly templateRef = inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
+  readonly templateRef =
+    inject<TemplateRef<IVSectionContext<ItemT>>>(TemplateRef);
 
   static ngTemplateContextGuard<T>(
     _dir: VSectionFooterDirective<T>,

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

@@ -64,7 +64,10 @@ import {
   type IVListSeparatorContext,
 } from '../virtualized-list';
 import { VListOutletDirective } from '../virtualized-list/directives';
-import { stableAnchorStyle } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import {
   VSectionFooterDirective,
   VSectionHeaderDirective,
@@ -92,9 +95,20 @@ export type { IVSectionContext, IVSectionItemContext } from './directives';
 // those are the per-adapter children/render fields and become `<ng-template>` directives in Angular.
 // Everything agnostic is the SAME surface as the
 // React/Vue adapters, including the a11y/aria prop family forwarded through VirtualizedList.
-export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps, IAriaProps {
+export interface IVirtualizedSectionListProps<ItemT>
+  extends IAccessibilityProps, IAriaProps {
   sections: ReadonlyArray<ISection<ItemT>>;
   keyExtractor?: (item: ItemT, index: number) => string;
+  // Fixed-layout fast path, FLAT like RN's: the SECTIONS array plus a flat entry index, where every
+  // section contributes two rows beyond its items (header, footer) and the caller accounts for them.
+  // A `({ section, index })` form would be our invention, not parity - `VirtualizedSectionList.js`
+  // has no getItemLayout code at all, the prop rides through `passThroughProps`; that shape is the
+  // community react-native-section-list-get-item-layout, layered on top. Without it a fast scroll
+  // outruns measurement and leaves blank windows.
+  getItemLayout?: (
+    data: ReadonlyArray<ISection<ItemT>> | null,
+    index: number,
+  ) => { length: number; offset: number; index: number };
   // Stick each section header to the top as the next section scrolls up. Routed to the inner
   // VirtualizedList's stickyHeaderIndices. Defaults to `Platform.OS === 'ios'`; Android does not
   // stick by default. Pass true/false to override.
@@ -146,6 +160,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'VirtualizedSectionList',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [
     VirtualizedList,
     VListItemDirective,
@@ -162,6 +179,7 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [getItem]="getEntry"
       [getItemCount]="getEntryCount"
       [keyExtractor]="entryKeyExtractor"
+      [getItemLayout]="entryItemLayout"
       [stickyHeaderIndices]="stickyHeaderIndices"
       [extraData]="extraData"
       [inverted]="inverted"
@@ -206,8 +224,12 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [accessibilityElementsHidden]="accessibilityElementsHidden"
       [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
       [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="accessibilityRespondsToUserInteraction"
-      [accessibilityShowsLargeContentViewer]="accessibilityShowsLargeContentViewer"
+      [accessibilityRespondsToUserInteraction]="
+        accessibilityRespondsToUserInteraction
+      "
+      [accessibilityShowsLargeContentViewer]="
+        accessibilityShowsLargeContentViewer
+      "
       [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
       (accessibilityAction)="resolvedOnAccessibilityAction?.($event)"
       (accessibilityTap)="resolvedOnAccessibilityTap?.($event)"
@@ -245,7 +267,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
             ></ng-container>
           }
           @case ('section-separator') {
-            <ng-container [vListOutlet]="sectionSeparatorDir?.templateRef"></ng-container>
+            <ng-container
+              [vListOutlet]="sectionSeparatorDir?.templateRef"
+            ></ng-container>
           }
           @case ('item') {
             <ng-container
@@ -259,12 +283,16 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       <!-- list-level slots: forward the app's VirtualizedList directives to the inner list. -->
       @if (listHeaderDir !== undefined) {
         <ng-template vListHeader>
-          <ng-container [vListOutlet]="listHeaderDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listHeaderDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listFooterDir !== undefined) {
         <ng-template vListFooter>
-          <ng-container [vListOutlet]="listFooterDir.templateRef"></ng-container>
+          <ng-container
+            [vListOutlet]="listFooterDir.templateRef"
+          ></ng-container>
         </ng-template>
       }
       @if (listEmptyDir !== undefined) {
@@ -282,7 +310,9 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
         >
           <ng-container
             [vListOutlet]="itemSeparatorDir.templateRef"
-            [vListOutletContext]="itemSeparatorContextOf(highlighted, leadingItem, trailingItem)"
+            [vListOutletContext]="
+              itemSeparatorContextOf(highlighted, leadingItem, trailingItem)
+            "
           ></ng-container>
         </ng-template>
       }
@@ -290,15 +320,26 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
   `,
 })
 export class VirtualizedSectionList<ItemT = unknown>
-  implements IVirtualizedSectionListInputs<ItemT>, IVirtualizedSectionListHandle, DoCheck
+  implements
+    IVirtualizedSectionListInputs<ItemT>,
+    IVirtualizedSectionListHandle,
+    DoCheck
 {
   @Input({ required: true }) sections!: ReadonlyArray<ISection<ItemT>>;
   @Input() keyExtractor?: (item: ItemT, index: number) => string;
+  @Input() getItemLayout?: (
+    data: ReadonlyArray<ISection<ItemT>> | null,
+    index: number,
+  ) => { length: number; offset: number; index: number };
   @Input() stickySectionHeadersEnabled?: boolean;
   @Input() extraData?: unknown;
-  @Output() readonly endReached = new EventEmitter<{ distanceFromEnd: number }>();
+  @Output() readonly endReached = new EventEmitter<{
+    distanceFromEnd: number;
+  }>();
   @Input() onEndReachedThreshold?: number;
-  @Output() readonly startReached = new EventEmitter<{ distanceFromStart: number }>();
+  @Output() readonly startReached = new EventEmitter<{
+    distanceFromStart: number;
+  }>();
   @Input() onStartReachedThreshold?: number;
   @Output() readonly refresh = new EventEmitter<void>();
   @Input() refreshing?: boolean | null;
@@ -359,8 +400,10 @@ export class VirtualizedSectionList<ItemT = unknown>
   @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
   @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
   @Input() accessibilityLabelledBy?: string | string[];
-  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
-  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input()
+  importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input()
+  accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
   @Input() screenReaderFocusable?: boolean;
   @Input() accessibilityViewIsModal?: boolean;
   @Input() accessibilityElementsHidden?: boolean;
@@ -392,20 +435,27 @@ export class VirtualizedSectionList<ItemT = unknown>
   // The section cell templates the app authors (the Angular twin of renderItem /
   // renderSectionHeader / renderSectionFooter / SectionSeparatorComponent), captured from projected
   // <ng-template> content and stamped by the synthesized vListItem dispatch.
-  @ContentChild(VSectionItemDirective) sectionItemDir?: VSectionItemDirective<ItemT>;
-  @ContentChild(VSectionHeaderDirective) sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
-  @ContentChild(VSectionFooterDirective) sectionFooterDir?: VSectionFooterDirective<ItemT>;
-  @ContentChild(VSectionSeparatorDirective) sectionSeparatorDir?: VSectionSeparatorDirective;
+  @ContentChild(VSectionItemDirective)
+  sectionItemDir?: VSectionItemDirective<ItemT>;
+  @ContentChild(VSectionHeaderDirective)
+  sectionHeaderDir?: VSectionHeaderDirective<ItemT>;
+  @ContentChild(VSectionFooterDirective)
+  sectionFooterDir?: VSectionFooterDirective<ItemT>;
+  @ContentChild(VSectionSeparatorDirective)
+  sectionSeparatorDir?: VSectionSeparatorDirective;
 
   // list-level slots reuse VirtualizedList's own directives; VSL forwards them to the inner list.
   @ContentChild(VListHeaderDirective) listHeaderDir?: VListHeaderDirective;
   @ContentChild(VListFooterDirective) listFooterDir?: VListFooterDirective;
   @ContentChild(VListEmptyDirective) listEmptyDir?: VListEmptyDirective;
-  @ContentChild(VListSeparatorDirective) itemSeparatorDir?: VListSeparatorDirective<ItemT>;
+  @ContentChild(VListSeparatorDirective)
+  itemSeparatorDir?: VListSeparatorDirective<ItemT>;
 
   // The composed inner VirtualizedList. Its instance IS an IVirtualizedListHandle, so the section
   // handle delegates straight to it. Available from ngAfterViewInit; reads lazily, no-ops pre-commit.
-  @ViewChild(VirtualizedList) private list?: VirtualizedList<ISectionEntry<ItemT>>;
+  @ViewChild(VirtualizedList) private list?: VirtualizedList<
+    ISectionEntry<ItemT>
+  >;
 
   // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
   // onto (see anchorHostStyle's doc comment) — NOT `list` above, which targets the real inner
@@ -438,7 +488,10 @@ export class VirtualizedSectionList<ItemT = unknown>
     this.lastHasSectionSeparator = hasSectionSeparator;
 
     const sections = this.sections ?? [];
-    const { entries, headerIndices } = flattenSections(sections, hasSectionSeparator);
+    const { entries, headerIndices } = flattenSections(
+      sections,
+      hasSectionSeparator,
+    );
     this.flatEntries = entries;
     this.headerIndices = headerIndices;
 
@@ -457,42 +510,95 @@ export class VirtualizedSectionList<ItemT = unknown>
 
   // The derived flat-stream accessors handed to the inner VirtualizedList. Stable arrow fields so
   // the bindings keep a constant identity; they read the live flatEntries.
-  getEntry = (_source: unknown, index: number): ISectionEntry<ItemT> => this.flatEntries[index];
+  getEntry = (_source: unknown, index: number): ISectionEntry<ItemT> =>
+    this.flatEntries[index];
   getEntryCount = (): number => this.flatEntries.length;
   entryKeyExtractor = (entry: ISectionEntry<ItemT>, index: number): string =>
     sectionEntryKey(entry, index, this.keyExtractor);
 
+  // Hand the callback `sections`, not the entries: RN's inner VirtualizedList gets
+  // `data={this.props.sections}` (VirtualizedSectionList.js:216) while ours streams the FLATTENED
+  // entries, so the same user code would otherwise see a different argument here than on RN.
+  //
+  // UPSTREAM-DIVERGENCE(react-native): the flat INDEX matches RN's (two rows per section, header
+  // and footer) only while the vSectionSeparator template is unset. With it, flattenSections emits
+  // an extra 'section-separator' row per boundary that RN renders inside the neighbouring cell, so
+  // indices shift by one per boundary from the second section on. Deliberate - that row is how this
+  // adapter paints the separator; a caller combining the two must account for it.
+  //
+  // Cached on the input's own identity, like resolvedStyle above: the inner VirtualizedList folds
+  // getItemLayout into its ngDoCheck dedup array, so a wrapper allocated per getter read would
+  // re-run its whole recompute every CD.
+  private cachedEntryItemLayout?: (
+    data: unknown,
+    index: number,
+  ) => { length: number; offset: number; index: number };
+  private lastGetItemLayout?: IVirtualizedSectionListProps<ItemT>['getItemLayout'];
+  get entryItemLayout():
+    | ((
+        data: unknown,
+        index: number,
+      ) => { length: number; offset: number; index: number })
+    | undefined {
+    if (this.getItemLayout !== this.lastGetItemLayout) {
+      const getItemLayout = this.getItemLayout;
+      this.lastGetItemLayout = getItemLayout;
+      this.cachedEntryItemLayout =
+        getItemLayout === undefined
+          ? undefined
+          : (
+              _entries: unknown,
+              index: number,
+            ): { length: number; offset: number; index: number } =>
+              getItemLayout(this.sections, index);
+    }
+    return this.cachedEntryItemLayout;
+  }
+
   // Adapts each @Output() into the plain callback VirtualizedList's own @Input() still wants,
   // gated on `.observed` so an unlistened event forwards `undefined` — the same "nobody cares"
   // contract the old @Input() callback passthrough had (e.g. onRefresh presence gates whether a
   // RefreshControl is built downstream; see the Vue twin's `listens('onRefresh')` gate).
-  get resolvedOnEndReached(): ((info: { distanceFromEnd: number }) => void) | undefined {
-    return this.endReached.observed ? info => this.endReached.emit(info) : undefined;
+  get resolvedOnEndReached():
+    ((info: { distanceFromEnd: number }) => void) | undefined {
+    return this.endReached.observed
+      ? info => this.endReached.emit(info)
+      : undefined;
   }
 
-  get resolvedOnStartReached(): ((info: { distanceFromStart: number }) => void) | undefined {
-    return this.startReached.observed ? info => this.startReached.emit(info) : undefined;
+  get resolvedOnStartReached():
+    ((info: { distanceFromStart: number }) => void) | undefined {
+    return this.startReached.observed
+      ? info => this.startReached.emit(info)
+      : undefined;
   }
 
   get resolvedOnRefresh(): (() => void) | undefined {
     return this.refresh.observed ? () => this.refresh.emit() : undefined;
   }
 
-  get resolvedOnAccessibilityAction(): ((event: ISymbioteEvent) => void) | undefined {
+  get resolvedOnAccessibilityAction():
+    ((event: ISymbioteEvent) => void) | undefined {
     return this.accessibilityAction.observed
       ? event => this.accessibilityAction.emit(event)
       : undefined;
   }
 
-  get resolvedOnAccessibilityTap(): ((event: ISymbioteEvent) => void) | undefined {
-    return this.accessibilityTap.observed ? event => this.accessibilityTap.emit(event) : undefined;
+  get resolvedOnAccessibilityTap():
+    ((event: ISymbioteEvent) => void) | undefined {
+    return this.accessibilityTap.observed
+      ? event => this.accessibilityTap.emit(event)
+      : undefined;
   }
 
   get resolvedOnMagicTap(): ((event: ISymbioteEvent) => void) | undefined {
-    return this.magicTap.observed ? event => this.magicTap.emit(event) : undefined;
+    return this.magicTap.observed
+      ? event => this.magicTap.emit(event)
+      : undefined;
   }
 
-  get resolvedOnAccessibilityEscape(): ((event: ISymbioteEvent) => void) | undefined {
+  get resolvedOnAccessibilityEscape():
+    ((event: ISymbioteEvent) => void) | undefined {
     return this.accessibilityEscape.observed
       ? event => this.accessibilityEscape.emit(event)
       : undefined;
@@ -515,7 +621,10 @@ export class VirtualizedSectionList<ItemT = unknown>
     return { $implicit: value.section, section: value.section };
   }
 
-  itemContextOf(value: unknown, separators: ISeparators): IVSectionItemContext<ItemT> | undefined {
+  itemContextOf(
+    value: unknown,
+    separators: ISeparators,
+  ): IVSectionItemContext<ItemT> | undefined {
     if (!this.isEntry(value) || value.kind !== 'item') return undefined;
     return {
       $implicit: value.item,
@@ -538,8 +647,12 @@ export class VirtualizedSectionList<ItemT = unknown>
     return {
       $implicit: highlighted === true,
       highlighted: highlighted === true,
-      leadingItem: this.isEntry(leadingItem) ? unwrapEntryItem(leadingItem) : undefined,
-      trailingItem: this.isEntry(trailingItem) ? unwrapEntryItem(trailingItem) : undefined,
+      leadingItem: this.isEntry(leadingItem)
+        ? unwrapEntryItem(leadingItem)
+        : undefined,
+      trailingItem: this.isEntry(trailingItem)
+        ? unwrapEntryItem(trailingItem)
+        : undefined,
     };
   }
 

package/src/components.ts

@@ -112,7 +112,10 @@ export type {
   IVSectionItemContext,
 } from './components/virtualized-section-list';
 export { SectionList } from './components/section-list';
-export type { ISectionListHandle, ISectionListProps } from './components/section-list';
+export type {
+  ISectionListHandle,
+  ISectionListProps,
+} from './components/section-list';
 
 // Re-export primitive hosts so composed components can import them from the public barrel too.
 export {
@@ -134,6 +137,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,
@@ -48,7 +42,11 @@ import {
 /** Marks the destination for `*portal` — place it on whichever already-mounted host should
  *  paint the portaled content (e.g. a persistent overlay-host View near the app root), then
  *  export it to a template variable and pass that variable as `*portal`'s target. */
-@Directive({ selector: '[portalOutlet]', standalone: true, exportAs: 'portalOutlet' })
+@Directive({
+  selector: '[portalOutlet]',
+  standalone: true,
+  exportAs: 'portalOutlet',
+})
 export class PortalOutletDirective {
   readonly viewContainerRef = inject(ViewContainerRef);
 }
@@ -65,7 +63,9 @@ export class PortalDirective implements OnChanges, OnDestroy {
 
   ngOnChanges(): void {
     this.viewRef?.destroy();
-    this.viewRef = this.portal.viewContainerRef.createEmbeddedView(this.templateRef);
+    this.viewRef = this.portal.viewContainerRef.createEmbeddedView(
+      this.templateRef,
+    );
   }
 
   ngOnDestroy(): void {

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
@@ -112,7 +109,9 @@ export class TunnelOut implements OnInit, OnDestroy {
   private stopEffect: (() => void) | undefined;
 
   ngOnInit(): void {
-    const ref = effect(() => this.sync(this.tunnel.entries()), { injector: this.injector });
+    const ref = effect(() => this.sync(this.tunnel.entries()), {
+      injector: this.injector,
+    });
     this.stopEffect = () => ref.destroy();
   }
 

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

@@ -15,7 +15,10 @@ import {
   type OnDestroy,
   type SimpleChanges,
 } from '@angular/core';
-import type { IDescriptor, IDescriptorChild } from '@symbiote-native/components';
+import type {
+  IDescriptor,
+  IDescriptorChild,
+} from '@symbiote-native/components';
 
 type IRenderedChild = IRenderedElement | IRenderedText;
 
@@ -43,7 +46,8 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
   @Input({ required: true }) node!: IDescriptor;
 
   private readonly renderer = inject(Renderer2);
-  private readonly hostNode = inject<ElementRef<unknown>>(ElementRef).nativeElement;
+  private readonly hostNode =
+    inject<ElementRef<unknown>>(ElementRef).nativeElement;
   private rendered: IRenderedElement | undefined;
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -57,7 +61,10 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
     this.rendered = undefined;
   }
 
-  private patchRoot(rendered: IRenderedElement | undefined, next: IDescriptor): IRenderedElement {
+  private patchRoot(
+    rendered: IRenderedElement | undefined,
+    next: IDescriptor,
+  ): IRenderedElement {
     if (rendered === undefined) {
       const created = this.createElement(next);
       this.renderer.appendChild(this.hostNode, created.node);
@@ -67,7 +74,9 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
   }
 
   private createChild(child: IDescriptorChild): IRenderedChild {
-    return typeof child === 'string' ? this.createText(child) : this.createElement(child);
+    return typeof child === 'string'
+      ? this.createText(child)
+      : this.createElement(child);
   }
 
   private createText(value: string): IRenderedText {
@@ -127,12 +136,19 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
     }
 
     this.patchProps(rendered, next.props);
-    rendered.children = this.patchChildren(rendered.node, rendered.children, next.children);
+    rendered.children = this.patchChildren(
+      rendered.node,
+      rendered.children,
+      next.children,
+    );
     rendered.descriptor = next;
     return rendered;
   }
 
-  private patchProps(rendered: IRenderedElement, nextProps: Record<string, unknown>): void {
+  private patchProps(
+    rendered: IRenderedElement,
+    nextProps: Record<string, unknown>,
+  ): void {
     const prevProps = rendered.props;
     for (const key of Object.keys(prevProps)) {
       if (!(key in nextProps)) {
@@ -173,13 +189,18 @@ export class DescriptorOutlet implements OnChanges, OnDestroy {
 
     for (let i = common; i < renderedChildren.length; i++) {
       const rendered = renderedChildren[i];
-      if (rendered !== undefined) this.renderer.removeChild(parent, rendered.node);
+      if (rendered !== undefined)
+        this.renderer.removeChild(parent, rendered.node);
     }
 
     return nextRendered;
   }
 
-  private replaceChild(parent: unknown, oldChild: unknown, newChild: unknown): void {
+  private replaceChild(
+    parent: unknown,
+    oldChild: unknown,
+    newChild: unknown,
+  ): void {
     this.renderer.insertBefore(parent, newChild, oldChild);
     this.renderer.removeChild(parent, oldChild);
   }