@symbiote-native/angular 0.7.0 → 1.0.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, SymbioteStyleInputDirective } from '../../primitives';
+import {
+  stableAnchorStyle,
+  SymbioteStyleInputDirective,
+} from '../../primitives';
 import {
   VSectionFooterDirective,
   VSectionHeaderDirective,
@@ -85,6 +88,13 @@ export {
   VSectionItemDirective,
   VSectionSeparatorDirective,
 } from './directives';
+import {
+  gateWanted,
+  injectGateDemandAbove,
+  provideGateDemand,
+  type IGateDemand,
+  type IGatedAccessibilityEvent,
+} from '../../gate-demand';
 export type { IVSectionContext, IVSectionItemContext } from './directives';
 
 // The Angular VirtualizedSectionList prop surface. Mirrors React/Vue's IVirtualizedSectionListProps
@@ -92,9 +102,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,7 +167,10 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
 @Component({
   selector: 'VirtualizedSectionList',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  viewProviders: [provideGateDemand(() => VirtualizedSectionList)],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   imports: [
     VirtualizedList,
     VListItemDirective,
@@ -163,6 +187,7 @@ export type IVirtualizedSectionListInputs<ItemT> = Omit<
       [getItem]="getEntry"
       [getItemCount]="getEntryCount"
       [keyExtractor]="entryKeyExtractor"
+      [getItemLayout]="entryItemLayout"
       [stickyHeaderIndices]="stickyHeaderIndices"
       [extraData]="extraData"
       [inverted]="inverted"
@@ -207,8 +232,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)"
@@ -246,7 +275,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
@@ -260,12 +291,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) {
@@ -283,7 +318,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>
       }
@@ -291,15 +328,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;
@@ -360,8 +408,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;
@@ -374,6 +424,16 @@ export class VirtualizedSectionList<ItemT = unknown>
   @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
   @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+
+  // This wrapper binds the four gated accessibility events on the component it renders, which
+  // Angular forces to be unconditional and which would light that component's gates on every
+  // instance. It answers for them instead — see `gate-demand.ts`.
+  private readonly gateDemandAbove = injectGateDemandAbove();
+
+  wantsGate(name: IGatedAccessibilityEvent): boolean {
+    return gateWanted(this.gateDemandAbove, name, this[name]);
+  }
+
   @Input() role?: IAriaProps['role'];
   @Input() ariaLabel?: string;
   @Input() ariaLabelledBy?: string;
@@ -393,20 +453,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
@@ -439,7 +506,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;
 
@@ -458,42 +528,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;
@@ -516,7 +639,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,
@@ -539,8 +665,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 {
@@ -127,6 +130,8 @@ export {
   HorizontalScrollContentView,
   TextInputHost,
   MultilineTextInputHost,
+  ManagedTextInputHost,
+  ManagedMultilineTextInputHost,
   SwitchHost,
   ActivityIndicatorHost,
   SafeAreaViewHost,

package/src/create-portal/index.ts

@@ -20,16 +20,23 @@
 //
 // 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 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.
+// ViewContainerRef comes from `PortalOutletDirective`, exported to a template variable with the
+// same 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.
+//
+// THE MARKER GOES ON AN `<ng-container>` INSIDE THE TARGET, never on the target element. A
+// ViewContainerRef anchors AT its host and `createEmbeddedView` inserts after that anchor, so
+// `<View portalOutlet>` delivers a SIBLING where React's `createPortal(node, host)` and Vue's
+// `<Teleport to>` deliver a child. Device-reported 2026-09-02: a card portaled into an absolutely
+// positioned overlay laid out in the scroll flow, since the overlay cannot centre a node that is
+// not in it.
 
 import {
   Directive,
+  ElementRef,
   inject,
   Input,
   TemplateRef,
@@ -38,13 +45,40 @@ import {
   type OnChanges,
   type OnDestroy,
 } from '@angular/core';
+import { isAnchor, isSymbioteNode } from '@symbiote-native/engine';
 
 /** 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' })
+ *  paint the portaled content — on an `<ng-container>` INSIDE that host, never on the host
+ *  element itself (see the file header) — then export it to a template variable and pass that
+ *  variable as `*portal`'s target:
+ *
+ *  ```html
+ *  <View class="overlay-host">
+ *    <ng-container portalOutlet #overlayHost="portalOutlet"></ng-container>
+ *  </View>
+ *  ```
+ */
+@Directive({
+  selector: '[portalOutlet]',
+  standalone: true,
+  exportAs: 'portalOutlet',
+})
 export class PortalOutletDirective {
   readonly viewContainerRef = inject(ViewContainerRef);
+
+  constructor() {
+    // The wrong placement commits a valid tree that simply differs from React's, so nothing
+    // downstream can catch it. It has to fail where it is written.
+    const host: unknown = inject(ElementRef).nativeElement;
+    if (!isSymbioteNode(host) || !isAnchor(host)) {
+      throw new Error(
+        'portalOutlet must sit on an <ng-container> inside the target host, not on the host ' +
+          'element: a ViewContainerRef anchored at an element inserts AFTER it, so the ported ' +
+          'content would become the host\'s sibling. Write <View class="…">' +
+          '<ng-container portalOutlet #x="portalOutlet"></ng-container></View>.',
+      );
+    }
+  }
 }
 
 /** `*portal="overlayHost"` — renders the host element into whichever `PortalOutletDirective`
@@ -59,7 +93,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

@@ -109,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);
   }