@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/components.ts

@@ -0,0 +1,149 @@
+// Angular component surface over Symbiote intrinsics. Public tags (`View`, `Text`) are
+// ergonomic aliases of the primitive hosts in `../primitives`; engine intrinsics (`symbiote-*`)
+// are the actual Angular primitive host components. Every primitive host declares `style` as a
+// real Angular input so RN `StyleProp` arrays/objects are flattened and forwarded through the
+// custom renderer, instead of being misinterpreted by Angular's CSS style engine.
+
+export { ActivityIndicator } from './components/activity-indicator';
+export type { IActivityIndicatorProps } from './components/activity-indicator';
+export { Image, setImageSourceResolver } from './components/image';
+export { InputAccessoryView } from './components/input-accessory-view';
+export type { IAngularInputAccessoryViewProps } from './components/input-accessory-view';
+export { Modal } from './components/modal';
+export type {
+  IAngularModalProps,
+  IModalAnimationType,
+  IModalOrientation,
+  IModalOrientationChangeEvent,
+  IModalPresentationStyle,
+} from './components/modal';
+export type {
+  IImageProps,
+  IImageSource,
+  IImageSourceProp,
+  IResizeMode,
+  IImageSize,
+  IImageCacheStatus,
+} from './components/image';
+export { Pressable } from './components/pressable';
+export type { IAngularPressableProps } from './components/pressable';
+export { SafeAreaView } from './components/safe-area-view';
+export type { IAngularSafeAreaViewProps } from './components/safe-area-view';
+export { Switch } from './components/switch';
+export type { ISwitchProps, ISwitchTrackColor } from './components/switch';
+export { ImageBackground } from './components/image-background';
+export type { IAngularImageBackgroundProps } from './components/image-background';
+export { KeyboardAvoidingView } from './components/keyboard-avoiding-view';
+export type {
+  IAngularKeyboardAvoidingViewProps,
+  IKeyboardAvoidingBehavior,
+} from './components/keyboard-avoiding-view';
+export { RefreshControl } from './components/refresh-control';
+export type { IAngularRefreshControlProps } from './components/refresh-control';
+export { TextInput } from './components/text-input';
+export type {
+  IAngularTextInputProps,
+  IEnterKeyHint,
+  IInputMode,
+  ISubmitBehavior,
+  ITextInputHandle,
+  ITextInputSelection,
+} from './components/text-input';
+export { TouchableNativeFeedback } from './components/touchable-native-feedback';
+export type {
+  IAngularTouchableNativeFeedbackProps,
+  INativeFeedbackBackground,
+  IRippleBackground,
+  IThemeAttrBackground,
+} from './components/touchable-native-feedback';
+export {
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+} from './components/touchable';
+export type {
+  IAngularTouchableHighlightProps,
+  IAngularTouchableOpacityProps,
+  IAngularTouchableWithoutFeedbackProps,
+} from './components/touchable';
+export { ScrollView, ScrollViewStickyHeader } from './components/scroll-view';
+export type {
+  IAngularScrollViewProps,
+  IScrollViewHandle,
+  IStickyHeaderComponentType,
+} from './components/scroll-view';
+export { Button } from './components/button';
+export type { IButtonProps } from './components/button';
+export {
+  VirtualizedList,
+  VListEmptyDirective,
+  VListFooterDirective,
+  VListHeaderDirective,
+  VListItemDirective,
+  VListSeparatorDirective,
+} from './components/virtualized-list';
+export type {
+  ICellLayout,
+  ISeparatorProps,
+  ISeparators,
+  IViewabilityConfig,
+  IViewabilityConfigCallbackPair,
+  IViewableItemsChangedInfo,
+  IViewToken,
+  IVirtualizedListHandle,
+  IVirtualizedListProps,
+  IVListItemContext,
+  IVListSeparatorContext,
+} from './components/virtualized-list';
+export { FlatList } from './components/flat-list';
+export type { IFlatListHandle, IFlatListProps } from './components/flat-list';
+export {
+  VirtualizedSectionList,
+  VSectionFooterDirective,
+  VSectionHeaderDirective,
+  VSectionItemDirective,
+  VSectionSeparatorDirective,
+} from './components/virtualized-section-list';
+export type {
+  ISection,
+  IVirtualizedSectionListHandle,
+  IVirtualizedSectionListProps,
+  IVSectionContext,
+  IVSectionItemContext,
+} from './components/virtualized-section-list';
+export { SectionList } 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 {
+  ViewHost,
+  ViewHost as View,
+  TextHost,
+  TextHost as Text,
+  ImageHost,
+  ScrollViewHost,
+  ScrollContentView,
+  HorizontalScrollView,
+  HorizontalScrollContentView,
+  TextInputHost,
+  MultilineTextInputHost,
+  SwitchHost,
+  ActivityIndicatorHost,
+  SafeAreaViewHost,
+  ModalHost,
+  RefreshControlHost,
+  InputAccessoryViewHost,
+  SymbioteHostPropsDirective,
+  // 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.
+  anchorHostStyle,
+  // Same reasoning, for a component whose merged style is reassigned unconditionally every CD
+  // tick (rather than read once inside a props-object getter) — see stableAnchorStyle's doc
+  // comment for the free-running-CD-loop it prevents.
+  stableAnchorStyle,
+} from './primitives/index';
+
+// Public ergonomic aliases: <View> and <Text> resolve directly to the primitive hosts
+// (no extra Angular bookkeeping anchor), while the internal symbiote-* selectors remain
+// available for composed adapter templates.

package/src/create-portal/create-portal.test.ts

@@ -0,0 +1,90 @@
+// Proves createPortal (create-portal.ts) paints content into an already-mounted destination
+// WITHIN THE SAME SURFACE — mirrors adapters/react/src/create-portal.test.tsx's "same surface,
+// already-mounted target" case (Angular has no cross-surface equivalent of this primitive;
+// createTunnel covers that, see create-tunnel.test.ts).
+
+import '@angular/compiler';
+import { Component, signal } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ViewHost, TextHost } from '../primitives';
+import { PortalDirective, PortalOutletDirective } from './index';
+
+const ROOT_TAG = 930;
+
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+const settle = async (): Promise<void> => {
+  await tick();
+  await tick();
+};
+
+let capturedHost: HostApp | undefined;
+
+@Component({
+  selector: 'symbiote-portal-host-app',
+  standalone: true,
+  imports: [ViewHost, TextHost, PortalDirective, PortalOutletDirective],
+  template: `
+    <View>
+      <View portalOutlet #overlayHost="portalOutlet" testID="overlay-host"></View>
+      @if (visible()) {
+        <View *portal="overlayHost"><Text>portaled content</Text></View>
+      }
+    </View>
+  `,
+})
+class HostApp {
+  readonly visible = signal(false);
+
+  constructor() {
+    // Captures the live component instance so the test can drive its signals after mount.
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+beforeEach(() => {
+  capturedHost = undefined;
+  fabric.reset();
+});
+afterEach(() => unmount(ROOT_TAG));
+
+function walk(nodes: IFakeNode[], visit: (node: IFakeNode) => void): void {
+  for (const node of nodes) {
+    visit(node);
+    walk(node.children, visit);
+  }
+}
+
+function findText(text: string): IFakeNode | undefined {
+  let found: IFakeNode | undefined;
+  walk(fabric.committed, node => {
+    if (node.viewName === 'RCTRawText' && node.props.text === text) found = node;
+  });
+  return found;
+}
+
+describe('createPortal (Angular) — same-surface delivery', () => {
+  it('renders nothing until the portal is toggled on', async () => {
+    mount(ROOT_TAG, HostApp);
+    await settle();
+    expect(findText('portaled content')).toBeUndefined();
+  });
+
+  it('paints content into the outlet once toggled on, and removes it once toggled off', async () => {
+    mount(ROOT_TAG, HostApp);
+    await settle();
+
+    if (!capturedHost) throw new Error('host was not captured');
+    capturedHost.visible.set(true);
+    await settle();
+    expect(findText('portaled content'), 'painted once the portal renders').toBeDefined();
+
+    capturedHost.visible.set(false);
+    await settle();
+    expect(findText('portaled content'), 'gone once the portal unmounts').toBeUndefined();
+  });
+});

package/src/create-portal/index.ts

@@ -0,0 +1,74 @@
+// 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.
+//
+// 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.
+//
+// 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.
+//
+// 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.
+
+import {
+  Directive,
+  inject,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+  type EmbeddedViewRef,
+  type OnChanges,
+  type OnDestroy,
+} from '@angular/core';
+
+/** 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' })
+export class PortalOutletDirective {
+  readonly viewContainerRef = inject(ViewContainerRef);
+}
+
+/** `*portal="overlayHost"` — renders the host element into whichever `PortalOutletDirective`
+ *  `overlayHost` refers to, same surface only (see the file header). Combine with `@if` for
+ *  conditional visibility, exactly like `*ngIf`. */
+@Directive({ selector: '[portal]', standalone: true })
+export class PortalDirective implements OnChanges, OnDestroy {
+  @Input({ required: true }) portal!: PortalOutletDirective;
+
+  private readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+  private viewRef: EmbeddedViewRef<unknown> | null = null;
+
+  ngOnChanges(): void {
+    this.viewRef?.destroy();
+    this.viewRef = this.portal.viewContainerRef.createEmbeddedView(this.templateRef);
+  }
+
+  ngOnDestroy(): void {
+    this.viewRef?.destroy();
+  }
+}

package/src/create-tunnel/create-tunnel.test.ts

@@ -0,0 +1,120 @@
+// Proves createTunnel (create-tunnel.ts) actually delivers across two GENUINELY separate,
+// independently-mounted SymbioteSurfaces — the same proof React's/Vue's create-tunnel tests
+// give, via two real `mount()` calls on different rootTags. Mirrors
+// adapters/react/src/create-tunnel.test.tsx and adapters/vue/src/create-tunnel.test.ts.
+
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { ViewHost, TextHost } from '../primitives';
+import { createTunnel, TunnelInDirective, TunnelOut } from './index';
+
+const SOURCE_TAG = 920;
+const TARGET_TAG = 921;
+
+const fabric = installFabric();
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+const settle = async (): Promise<void> => {
+  await tick();
+  await tick();
+};
+
+beforeEach(() => fabric.reset());
+afterEach(() => {
+  unmount(SOURCE_TAG);
+  unmount(TARGET_TAG);
+});
+
+function walk(nodes: IFakeNode[], visit: (node: IFakeNode) => void): void {
+  for (const node of nodes) {
+    visit(node);
+    walk(node.children, visit);
+  }
+}
+
+function findText(text: string): IFakeNode | undefined {
+  let found: IFakeNode | undefined;
+  walk(fabric.committed, node => {
+    if (node.viewName === 'RCTRawText' && node.props.text === text) found = node;
+  });
+  return found;
+}
+
+describe('createTunnel (Angular) — genuine cross-surface delivery', () => {
+  it('paints content registered by surface A on surface B, a DIFFERENT mounted surface', async () => {
+    const tunnel = createTunnel();
+
+    @Component({
+      selector: 'symbiote-tunnel-source-app',
+      standalone: true,
+      imports: [TextHost, TunnelInDirective],
+      template: '<Text *tunnelIn="tunnel">ported across surfaces</Text>',
+    })
+    class SourceApp {
+      readonly tunnel = tunnel;
+    }
+
+    @Component({
+      selector: 'symbiote-tunnel-target-app',
+      standalone: true,
+      imports: [ViewHost, TunnelOut],
+      template: '<View><tunnel-out [tunnel]="tunnel" /></View>',
+    })
+    class TargetApp {
+      readonly tunnel = tunnel;
+    }
+
+    // Surface A registers, fully independently, before surface B ever mounts.
+    mount(SOURCE_TAG, SourceApp);
+    // Surface B mounts SEPARATELY (its own rootTag, its own SymbioteSurface) and reads the
+    // tunnel via its own TunnelOut — no ref, no rootTag lookup, no shared Fabric node at all.
+    mount(TARGET_TAG, TargetApp);
+    await settle();
+
+    // fake-fabric's `committed` is last-write-wins across rootTags (core/test-utils
+    // limitation, not the engine's), so after mounting B second it reflects B's own tree.
+    expect(
+      findText('ported across surfaces'),
+      'content is present in the LAST-committed tree (surface B)',
+    ).toBeDefined();
+  });
+
+  it('removes the content from the target once the source unmounts', async () => {
+    const tunnel = createTunnel();
+
+    @Component({
+      selector: 'symbiote-tunnel-source-app-2',
+      standalone: true,
+      imports: [TextHost, TunnelInDirective],
+      template: '<Text *tunnelIn="tunnel">still here</Text>',
+    })
+    class SourceApp {
+      readonly tunnel = tunnel;
+    }
+
+    @Component({
+      selector: 'symbiote-tunnel-target-app-2',
+      standalone: true,
+      imports: [ViewHost, TunnelOut],
+      template: '<View><tunnel-out [tunnel]="tunnel" /></View>',
+    })
+    class TargetApp {
+      readonly tunnel = tunnel;
+    }
+
+    mount(SOURCE_TAG, SourceApp);
+    mount(TARGET_TAG, TargetApp);
+    await settle();
+    expect(findText('still here'), 'present while the source is mounted').toBeDefined();
+
+    // Tearing down surface A destroys TunnelInDirective, whose ngOnDestroy unregisters from
+    // the shared store; surface B's TunnelOut effect reacts on its own next tick and destroys
+    // its view.
+    unmount(SOURCE_TAG);
+    await settle();
+    expect(findText('still here'), 'gone from surface B after the source unmounts').toBeUndefined();
+  });
+});

package/src/create-tunnel/index.ts

@@ -0,0 +1,136 @@
+// 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.
+//
+// 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
+// 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.
+//
+// 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.
+//
+// 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
+// element instead of wrapping it in a named `<ng-template>`:
+//   @if (toastVisible) {
+//     <View *tunnelIn="overlayTunnel"><Text>…</Text></View>
+//   }
+//   …
+//   <tunnel-out [tunnel]="overlayTunnel" />
+// No `context` param: unlike a `*ngFor` cell template, tunneled content needs no per-registration
+// data — it already closes over whatever signals/fields its OWN declaring component exposes, and
+// Angular's own change detection keeps that live once the embedded view exists, the same way any
+// other template does.
+
+import {
+  Component,
+  Directive,
+  effect,
+  inject,
+  Injector,
+  Input,
+  signal,
+  TemplateRef,
+  ViewContainerRef,
+  type EmbeddedViewRef,
+  type OnDestroy,
+  type OnInit,
+  type Signal,
+} from '@angular/core';
+
+export interface ITunnelStore {
+  readonly entries: Signal<ReadonlyMap<number, TemplateRef<unknown>>>;
+  register(id: number, templateRef: TemplateRef<unknown>): void;
+  unregister(id: number): void;
+}
+
+export function createTunnel(): ITunnelStore {
+  const store = signal<ReadonlyMap<number, TemplateRef<unknown>>>(new Map());
+
+  return {
+    entries: store.asReadonly(),
+    register(id, templateRef) {
+      store.update(map => new Map(map).set(id, templateRef));
+    },
+    unregister(id) {
+      store.update(map => {
+        if (!map.has(id)) return map;
+        const next = new Map(map);
+        next.delete(id);
+        return next;
+      });
+    },
+  };
+}
+
+let nextTunnelEntryId = 0;
+
+/** `*tunnelIn="overlayTunnel"` — registers the host element under `overlayTunnel` from
+ *  wherever it's mounted, any surface. Combine with `@if` for conditional visibility, exactly
+ *  like `*ngIf`. */
+@Directive({ selector: '[tunnelIn]', standalone: true })
+export class TunnelInDirective implements OnInit, OnDestroy {
+  @Input({ required: true }) tunnelIn!: ITunnelStore;
+
+  private readonly templateRef = inject<TemplateRef<unknown>>(TemplateRef);
+  private readonly id = nextTunnelEntryId++;
+
+  ngOnInit(): void {
+    this.tunnelIn.register(this.id, this.templateRef);
+  }
+
+  ngOnDestroy(): void {
+    this.tunnelIn.unregister(this.id);
+  }
+}
+
+/** Renders everything currently registered on `tunnel`, in registration order. Mount this in
+ *  the component that should actually paint the content — the tunnel's own `<router-outlet>`. */
+@Component({
+  selector: 'tunnel-out',
+  standalone: true,
+  template: '',
+})
+export class TunnelOut implements OnInit, OnDestroy {
+  @Input({ required: true }) tunnel!: ITunnelStore;
+
+  private readonly viewContainerRef = inject(ViewContainerRef);
+  private readonly injector = inject(Injector);
+  private readonly views = new Map<number, EmbeddedViewRef<unknown>>();
+  private stopEffect: (() => void) | undefined;
+
+  ngOnInit(): void {
+    const ref = effect(() => this.sync(this.tunnel.entries()), { injector: this.injector });
+    this.stopEffect = () => ref.destroy();
+  }
+
+  ngOnDestroy(): void {
+    this.stopEffect?.();
+    for (const view of this.views.values()) view.destroy();
+    this.views.clear();
+  }
+
+  private sync(entries: ReadonlyMap<number, TemplateRef<unknown>>): void {
+    for (const [id, view] of this.views) {
+      if (entries.has(id)) continue;
+      view.destroy();
+      this.views.delete(id);
+    }
+    for (const [id, templateRef] of entries) {
+      if (this.views.has(id)) continue;
+      this.views.set(id, this.viewContainerRef.createEmbeddedView(templateRef));
+    }
+  }
+}

package/src/descriptor-to-angular/descriptor-outlet.test.ts

@@ -0,0 +1,94 @@
+import '@angular/compiler';
+import { Component, signal } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { el, txt, type IDescriptor } from '@symbiote-native/components';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../render';
+import { DescriptorOutlet } from './index.ts';
+
+const ROOT_TAG = 904;
+const fabric = installFabric();
+
+let capturedHost: DescriptorOutletHost | undefined;
+
+async function flushAngular(): Promise<void> {
+  await Promise.resolve();
+  await new Promise<void>(resolve => setTimeout(resolve, 0));
+}
+
+function currentOutletChild() {
+  const child = fabric.appRoot().children[0];
+  if (!child) throw new Error('descriptor outlet rendered no root child');
+  return child;
+}
+
+@Component({
+  selector: 'symbiote-descriptor-outlet-host',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  template: '<symbiote-descriptor-outlet [node]="node()" />',
+})
+class DescriptorOutletHost {
+  readonly node = signal<IDescriptor>(
+    el('symbiote-view', { testID: 'root', style: { width: 10 } }, [txt({}, ['hello'])]),
+  );
+
+  constructor() {
+    // Captures the live component instance so the test can drive its signals after mount.
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+beforeEach(() => {
+  capturedHost = undefined;
+  fabric.reset();
+});
+afterEach(() => unmount(ROOT_TAG));
+
+describe('DescriptorOutlet', () => {
+  it('renders a Descriptor tree through Renderer2', async () => {
+    mount(ROOT_TAG, DescriptorOutletHost);
+    await flushAngular();
+
+    expect(fabric.serialize(fabric.appRoot().children)).toBe(
+      'RCTView(RCTText(RCTRawText "hello"))',
+    );
+    const root = currentOutletChild();
+    expect(root.props.testID).toBe('root');
+    expect(root.props.width).toBe(10);
+  });
+
+  it('does not recommit a structurally identical descriptor through anchor flattening', async () => {
+    mount(ROOT_TAG, DescriptorOutletHost);
+    await flushAngular();
+
+    const completeRootBefore = fabric.counts.completeRoot;
+
+    capturedHost?.node.set(
+      el('symbiote-view', { testID: 'root', style: { width: 10 } }, [txt({}, ['hello'])]),
+    );
+    await flushAngular();
+
+    expect(fabric.counts.completeRoot).toBe(completeRootBefore);
+  });
+
+  it('patches same type/key descriptors without recreating the Fabric node', async () => {
+    mount(ROOT_TAG, DescriptorOutletHost);
+    await flushAngular();
+
+    const before = currentOutletChild();
+    const createdBefore = fabric.counts.createNode;
+
+    capturedHost?.node.set(
+      el('symbiote-view', { testID: 'root', style: { width: 20 } }, [txt({}, ['hello'])]),
+    );
+    await flushAngular();
+
+    const after = currentOutletChild();
+    expect(fabric.counts.createNode).toBe(createdBefore);
+    expect(after.instanceHandle).toBe(before.instanceHandle);
+    expect(after.props.width).toBe(20);
+  });
+});