@symbiote-native/angular 0.3.2 → 0.4.0

package/src/modules/animated/animated-leaf-binder.test.ts

@@ -0,0 +1,116 @@
+// Unit tests for AnimatedLeafBinder in isolation — no Angular involved. Both
+// AnimatedComponentBase and AnimatedImage delegate their leaf-lifecycle (build a leaf,
+// bind it to the committed Fabric node, swap leaves on re-render, tear down) to this Pure
+// Fabrication; these tests exercise the binder directly against a real engine node
+// (SymbioteSurface + the fake Fabric backend), so a break here isolates to the shared
+// orchestration rather than either owning component.
+import { beforeEach, describe, expect, it } from 'vitest';
+import { installFabric } from '@symbiote-native/test-utils';
+import {
+  AnimatedValue,
+  createElement,
+  createSurface,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
+import { AnimatedLeafBinder } from './animated-leaf-binder';
+
+const fabric = installFabric();
+let nextRootTag = 9001;
+
+beforeEach(() => fabric.reset());
+
+// A node that has already gone through a commit — whenCommitted fires synchronously.
+function committedNode(): ISymbioteNode {
+  const surface = createSurface(nextRootTag++);
+  const node = createElement('RCTView');
+  surface.appendChild(node);
+  surface.commit();
+  return node;
+}
+
+// A node that is attached to a surface but has NOT been committed yet — whenCommitted
+// must defer until the caller commits the surface.
+function uncommittedNode(): { node: ISymbioteNode; commit: () => void } {
+  const surface = createSurface(nextRootTag++);
+  const node = createElement('RCTView');
+  surface.appendChild(node);
+  return { node, commit: () => surface.commit() };
+}
+
+// `appRoot()` unwraps RN's synthetic box-none AppContainer, which is ALSO an RCTView, so a
+// plain `fabric.find(viewName === 'RCTView')` would match it instead of the node under test.
+// Each test appends exactly one child, so the container's first (only) child is the real node.
+function fakeView(): ReturnType<typeof fabric.find> {
+  return fabric.appRoot().children[0];
+}
+
+describe('AnimatedLeafBinder', () => {
+  it('creates and attaches an AnimatedProps leaf, wiring value changes onto the host node', () => {
+    const node = committedNode();
+    const binder = new AnimatedLeafBinder(() => node, 'test');
+    const opacity = new AnimatedValue(1);
+
+    // The leaf itself never pushes the INITIAL value — that first paint comes from the
+    // owning component's own reduceProps template binding (out of scope here). The leaf
+    // only drives value CHANGES after it is bound.
+    binder.reconcile({ style: { opacity } }, false);
+
+    opacity.setValue(0.4);
+    expect(fakeView()?.props.opacity).toBe(0.4);
+  });
+
+  it('binds to the host node via whenCommitted, deferring until the node is actually committed', () => {
+    const { node, commit } = uncommittedNode();
+    const binder = new AnimatedLeafBinder(() => node, 'test');
+    const opacity = new AnimatedValue(1);
+
+    binder.reconcile({ style: { opacity } }, false);
+    // Not committed yet: the value graph exists, but no Fabric node to flush onto.
+    opacity.setValue(0.5);
+    expect(fabric.created).toHaveLength(0);
+
+    commit();
+    // whenCommitted's post-commit retry binds the leaf now; a subsequent change flushes.
+    opacity.setValue(0.7);
+    expect(fakeView()?.props.opacity).toBe(0.7);
+  });
+
+  it('attaches the new leaf before detaching the old one on a second reconcile', () => {
+    const node = committedNode();
+    const binder = new AnimatedLeafBinder(() => node, 'test');
+    const shared = new AnimatedValue(1);
+    const order: string[] = [];
+    const originalAddChild = shared.__addChild.bind(shared);
+    const originalRemoveChild = shared.__removeChild.bind(shared);
+    shared.__addChild = child => {
+      order.push('add');
+      originalAddChild(child);
+    };
+    shared.__removeChild = child => {
+      order.push('remove');
+      originalRemoveChild(child);
+    };
+
+    binder.reconcile({ style: { opacity: shared } }, false);
+    order.length = 0; // only care about the SECOND reconcile's swap order
+
+    binder.reconcile({ style: { opacity: shared } }, false);
+
+    expect(order).toEqual(['add', 'remove']);
+  });
+
+  it('detaches the leaf and cancels any pending bind on destroy', () => {
+    const { node, commit } = uncommittedNode();
+    const binder = new AnimatedLeafBinder(() => node, 'test');
+    const opacity = new AnimatedValue(1);
+
+    binder.reconcile({ style: { opacity } }, false);
+    binder.destroy();
+    commit();
+
+    // The pending whenCommitted bind was cancelled by destroy, so committing afterward
+    // must not retroactively bind the (already-detached) leaf.
+    opacity.setValue(0.9);
+    expect(fakeView()?.props.opacity).toBeUndefined();
+  });
+});

package/src/modules/animated/animated-leaf-binder.ts

@@ -0,0 +1,101 @@
+// Pure Fabrication (GRASP): the leaf-lifecycle orchestration shared by every Animated*
+// wrapper, extracted out of AnimatedComponentBase so AnimatedImage — which cannot extend
+// AnimatedComponentBase, since it must extend ImageBase for TS's-native image handling —
+// gets the SAME logic via composition instead of copy-pasting it. Framework-thin on
+// purpose: it knows nothing about Angular (@ViewChild, DI, change detection), only the
+// engine's Animated leaf + commit primitives, so it stays testable without any Angular
+// bootstrap. NOTE: react/vue drive this same dance through their own runtime HOC
+// (createAnimatedComponent) rather than a class, so there is no cross-adapter dedup
+// opportunity here yet — this Pure Fabrication is local to the angular adapter.
+import {
+  AnimatedProps,
+  attachNativeEventHandler,
+  dlog,
+  whenCommitted,
+  type ISymbioteNode,
+} from '@symbiote-native/engine';
+
+export class AnimatedLeafBinder {
+  // The leaf currently wired into the value graph. Null until the first reconcile.
+  private attached: AnimatedProps | null = null;
+  // The whenCommitted waiter for the current leaf's node binding, cancelled before the next.
+  private cancelBind: (() => void) | undefined;
+  // Detachers for any Animated.event prop bound natively to the committed node (JS path: none).
+  private eventDetachers: Array<() => void> = [];
+
+  // `resolveNode` stays a caller-supplied resolver (not a constructor-captured node) so this
+  // class never needs to know HOW the host node is found — AnimatedComponentBase and
+  // AnimatedImage both resolve it the same way (resolveHostNode + isSymbioteNode over their
+  // own @ViewChild), but that's Angular DI state this binder has no business touching.
+  // `label` is purely diagnostic (dlog), mirroring the constructor.name the pre-extraction
+  // dlog call used.
+  constructor(
+    private readonly resolveNode: () => ISymbioteNode | null,
+    private readonly label: string,
+  ) {}
+
+  // Build a fresh AnimatedProps leaf from the current props (the React/Vue per-render
+  // useMemo(rest)), wire it into the graph, and swap the previous one out. Attach the NEW leaf
+  // BEFORE detaching the OLD one: a shared Value self-detaches (dropping its native node) the
+  // instant its child count hits zero, so detaching first would kill a running native animation
+  // on any unrelated re-render (mirrors RN's AnimatedComponent._attachProps). Then bind the
+  // committed node, go native if wanted, and rebind native events.
+  reconcile(props: Record<string, unknown>, wantsNative: boolean): void {
+    dlog(`${this.label} reconcile`);
+    const newLeaf = new AnimatedProps(props);
+    newLeaf.__attach();
+    if (this.attached !== null && this.attached !== newLeaf) this.attached.__detach();
+    this.attached = newLeaf;
+
+    this.bindNode(newLeaf, props, wantsNative);
+  }
+
+  // Bind the leaf to the host's Fabric node THROUGH whenCommitted: under Angular's zoneless
+  // batched change detection the inner host's tag does not exist yet at ngAfterViewInit time
+  // (the same async-commit gotcha Vue documents), so binding eagerly would no-op. whenCommitted
+  // runs the action now if already committed, else after the commit that assigns the tag.
+  private bindNode(
+    leaf: AnimatedProps,
+    props: Record<string, unknown>,
+    wantsNative: boolean,
+  ): void {
+    this.cancelBind?.();
+    this.cancelBind = undefined;
+    const node = this.resolveNode();
+    if (node === null) return;
+    this.cancelBind = whenCommitted(node, () => {
+      leaf.setNativeView(node);
+      if (wantsNative) leaf.__makeNative();
+      this.attachEvents(node, props);
+    });
+  }
+
+  // Native-attach any Animated.event prop (e.g. onScroll={Animated.event(…,{useNativeDriver:true})})
+  // to the committed node. attachNativeEventHandler no-ops (returns undefined) unless the prop is a
+  // native event handler with a committed tag, so the JS path stays the fallback. Rebound each
+  // reconcile so a new inline event re-attaches; detached first to avoid leaking the prior binding.
+  private attachEvents(node: ISymbioteNode, props: Record<string, unknown>): void {
+    this.detachEvents();
+    for (const key of Object.keys(props)) {
+      const attachment = attachNativeEventHandler(node, key, props[key]);
+      if (attachment !== undefined) this.eventDetachers.push(attachment.detach);
+    }
+  }
+
+  private detachEvents(): void {
+    for (const detach of this.eventDetachers) detach();
+    this.eventDetachers = [];
+  }
+
+  // Tear down everything: cancel a still-pending bind, drop native event listeners, detach the
+  // current leaf from the value graph. Safe to call even if reconcile() was never called.
+  destroy(): void {
+    this.cancelBind?.();
+    this.cancelBind = undefined;
+    this.detachEvents();
+    if (this.attached !== null) {
+      this.attached.__detach();
+      this.attached = null;
+    }
+  }
+}

package/src/modules/animated/animated-scroll-view.test.ts

@@ -75,6 +75,23 @@ describe('AnimatedScrollView', () => {
     expect(content?.children.map(child => child.props.testID)).toEqual(['a', 'b']);
   });
 
+  // Regression test for a THIRD bug in this same bespoke-template class, this one iOS-only (the
+  // inverse of the two Android bugs above): AnimatedScrollView never applied
+  // selectScrollIntrinsics' scrollViewBaseStyle (overflow: 'scroll') to its host node, unlike the
+  // real ScrollView component. On iOS Fabric a scroll view only clips its content to its own
+  // frame when `overflow: 'scroll'` is set; without it, content taller than the frame bleeds out
+  // over sibling views instead of scrolling clipped (Android's native ViewGroup clips regardless
+  // of the style prop, which is why this was invisible there). See
+  // core/components/src/view/render-scroll-view.ts's SCROLL_VIEW_BASE_VERTICAL comment.
+  it('applies the scroll-view base style (overflow: scroll) so content clips to the frame', async () => {
+    mount(ROOT_TAG, AnimatedScrollViewApp);
+    await tick();
+
+    const scrollView = fabric.find(node => node.viewName === 'RCTScrollView');
+    expect(scrollView?.props.overflow).toBe('scroll');
+    expect(scrollView?.props.flexDirection).toBe('column');
+  });
+
   it('lets an explicit nestedScrollEnabled in animatedProps override the default', async () => {
     mount(OVERRIDE_ROOT_TAG, AnimatedScrollViewOverrideApp);
     await tick();

package/src/modules/animated/create-animated-component.ts

@@ -32,17 +32,14 @@ import {
   type Type,
 } from '@angular/core';
 import {
-  AnimatedProps,
-  attachNativeEventHandler,
-  dlog,
   isNativeAnimatedAvailable,
   isSymbioteNode,
   reduceProps,
   readPassthroughStyle,
   resolveHostNode,
-  whenCommitted,
   type ISymbioteNode,
 } from '@symbiote-native/engine';
+import { selectScrollIntrinsics } from '@symbiote-native/components';
 import { Image, ScrollView, Text, View } from '../../components';
 import {
   anchorHostStyle,
@@ -60,6 +57,7 @@ import {
   resolveImageProps,
 } from '../../components/image/shared';
 import { SectionList } from '../../components/section-list';
+import { AnimatedLeafBinder } from './animated-leaf-binder';
 
 // RN's prop carrying explicit (already-rasterized) values that override the animated prop in
 // the COMMITTED props (sticky-header passthrough). Named once so the directive input and the
@@ -96,12 +94,14 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
   // the leaf binds to. Inherited by the decorated subclass (Angular collects base-class queries).
   @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
 
-  // The leaf currently wired into the value graph. Null until the first reconcile.
-  private attached: AnimatedProps | null = null;
-  // The whenCommitted waiter for the current leaf's node binding, cancelled before the next.
-  private cancelBind: (() => void) | undefined;
-  // Detachers for any Animated.event prop bound natively to the committed node (JS path: none).
-  private eventDetachers: Array<() => void> = [];
+  // The leaf-lifecycle orchestration (build/attach/swap/bind/detach an AnimatedProps leaf) is a
+  // Pure Fabrication shared with AnimatedImage, which cannot extend this class (it must extend
+  // ImageBase — see the file header). `resolveNode` stays a resolver, not a captured node: the
+  // committed node only exists after `hostDirective` is populated post-view-init.
+  private readonly leafBinder = new AnimatedLeafBinder(
+    () => this.hostNode(),
+    this.constructor.name,
+  );
   // Set once the view (and the inner host directive) exists; ngOnChanges before then is a no-op.
   private viewReady = false;
 
@@ -129,78 +129,22 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
   }
 
   ngOnDestroy(): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
-    this.detachEvents();
-    if (this.attached !== null) {
-      this.attached.__detach();
-      this.attached = null;
-    }
+    this.leafBinder.destroy();
   }
 
-  // Build a fresh AnimatedProps leaf from the current props (the React/Vue per-render
-  // useMemo(rest)), wire it into the graph, and swap the previous one out. Attach the NEW leaf
-  // BEFORE detaching the OLD one: a shared Value self-detaches (dropping its native node) the
-  // instant its child count hits zero, so detaching first would kill a running native animation
-  // on any unrelated re-render (mirrors RN's AnimatedComponent._attachProps). Then bind the
-  // committed node, go native if wanted, and rebind native events.
+  // A non-stable [animatedProps]/[style] input (a fresh object literal in the template) pushes
+  // a new reference on every change-detection pass of the HOST view, re-triggering this on every
+  // unrelated interaction elsewhere in the app — DEBUG=1 turns this into a visible tick count in
+  // AnimatedLeafBinder.reconcile, so an unexpectedly high rate for a component nobody is
+  // animating is the tell (see AnimatedScrollView's stable-reference fix in examples/angular/App.ts).
   private reconcile(): void {
     if (!this.viewReady) return;
-    // A non-stable [animatedProps]/[style] input (a fresh object literal in the template)
-    // pushes a new reference on every change-detection pass of the HOST view, re-triggering
-    // this on every unrelated interaction elsewhere in the app — DEBUG=1 turns this into a
-    // visible tick count, so an unexpectedly high rate for a component nobody is animating
-    // is the tell (see AnimatedScrollView's stable-reference fix in examples/angular/App.ts).
-    dlog(`AnimatedComponentBase reconcile (${this.constructor.name})`);
     const props = this.mergedProps();
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
     const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
-
-    const newLeaf = new AnimatedProps(props);
-    newLeaf.__attach();
-    if (this.attached !== null && this.attached !== newLeaf) this.attached.__detach();
-    this.attached = newLeaf;
-
-    this.bindNode(newLeaf, props, wantsNative);
-  }
-
-  // Bind the leaf to the host's Fabric node THROUGH whenCommitted: under Angular's zoneless
-  // batched change detection the inner host's tag does not exist yet at ngAfterViewInit time
-  // (the same async-commit gotcha Vue documents), so binding eagerly would no-op. whenCommitted
-  // runs the action now if already committed, else after the commit that assigns the tag.
-  private bindNode(
-    leaf: AnimatedProps,
-    props: Record<string, unknown>,
-    wantsNative: boolean,
-  ): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
-    const node = this.hostNode();
-    if (node === null) return;
-    this.cancelBind = whenCommitted(node, () => {
-      leaf.setNativeView(node);
-      if (wantsNative) leaf.__makeNative();
-      this.attachEvents(node, props);
-    });
-  }
-
-  // Native-attach any Animated.event prop (e.g. onScroll={Animated.event(…,{useNativeDriver:true})})
-  // to the committed node. attachNativeEventHandler no-ops (returns undefined) unless the prop is a
-  // native event handler with a committed tag, so the JS path stays the fallback. Rebound each
-  // reconcile so a new inline event re-attaches; detached first to avoid leaking the prior binding.
-  private attachEvents(node: ISymbioteNode, props: Record<string, unknown>): void {
-    this.detachEvents();
-    for (const key of Object.keys(props)) {
-      const attachment = attachNativeEventHandler(node, key, props[key]);
-      if (attachment !== undefined) this.eventDetachers.push(attachment.detach);
-    }
-  }
-
-  private detachEvents(): void {
-    for (const detach of this.eventDetachers) detach();
-    this.eventDetachers = [];
+    this.leafBinder.reconcile(props, wantsNative);
   }
 
   // Merge the dedicated `style` input over the generic `animatedProps` bag into one props map —
@@ -286,9 +230,13 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 
   @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
 
-  private attached: AnimatedProps | null = null;
-  private cancelBind: (() => void) | undefined;
-  private eventDetachers: Array<() => void> = [];
+  // Same Pure Fabrication AnimatedComponentBase holds — see its matching comment. AnimatedImage
+  // can't extend AnimatedComponentBase (it must extend ImageBase, see the file header), so it
+  // gets the leaf-lifecycle via composition instead of duplicating it.
+  private readonly leafBinder = new AnimatedLeafBinder(
+    () => this.hostNode(),
+    this.constructor.name,
+  );
   private viewReady = false;
 
   get animatedImageProps(): Record<string, unknown> {
@@ -313,13 +261,7 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
   }
 
   ngOnDestroy(): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
-    this.detachEvents();
-    if (this.attached !== null) {
-      this.attached.__detach();
-      this.attached = null;
-    }
+    this.leafBinder.destroy();
   }
 
   private reconcile(): void {
@@ -329,42 +271,7 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
     const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
-
-    const newLeaf = new AnimatedProps(props);
-    newLeaf.__attach();
-    if (this.attached !== null && this.attached !== newLeaf) this.attached.__detach();
-    this.attached = newLeaf;
-
-    this.bindNode(newLeaf, props, wantsNative);
-  }
-
-  private bindNode(
-    leaf: AnimatedProps,
-    props: Record<string, unknown>,
-    wantsNative: boolean,
-  ): void {
-    this.cancelBind?.();
-    this.cancelBind = undefined;
-    const node = this.hostNode();
-    if (node === null) return;
-    this.cancelBind = whenCommitted(node, () => {
-      leaf.setNativeView(node);
-      if (wantsNative) leaf.__makeNative();
-      this.attachEvents(node, props);
-    });
-  }
-
-  private attachEvents(node: ISymbioteNode, props: Record<string, unknown>): void {
-    this.detachEvents();
-    for (const key of Object.keys(props)) {
-      const attachment = attachNativeEventHandler(node, key, props[key]);
-      if (attachment !== undefined) this.eventDetachers.push(attachment.detach);
-    }
-  }
-
-  private detachEvents(): void {
-    for (const detach of this.eventDetachers) detach();
-    this.eventDetachers = [];
+    this.leafBinder.reconcile(props, wantsNative);
   }
 
   private mergedProps(): Record<string, unknown> {
@@ -389,7 +296,7 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
   inputs: ANIMATED_INPUTS,
   template: `
     <symbiote-scroll-view [symbioteHostProps]="reducedProps">
-      <symbiote-scroll-content [collapsable]="false">
+      <symbiote-scroll-content [symbioteHostProps]="contentProps">
         <ng-content></ng-content>
       </symbiote-scroll-content>
     </symbiote-scroll-view>
@@ -402,11 +309,34 @@ export class AnimatedScrollView extends AnimatedComponentBase {
   // receives touch (swallowed by the outer scroll view; iOS doesn't gate on this). The real
   // ScrollView component already defaults this (scroll-view/shared.ts), but AnimatedScrollView
   // talks to the raw primitive directly and has no such defaulting, so it must apply it too.
+  //
+  // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the OTHER thing
+  // the real ScrollView applies that this bespoke template used to skip entirely — without it,
+  // iOS Fabric never clips the scroll view's content to its own frame (Android's native
+  // ViewGroup clips regardless of the style prop, which is why this was invisible there). This
+  // wrapper has no dedicated `horizontal` input (only the generic `animatedProps`/`style`
+  // surface), and its template is hardcoded to the vertical intrinsics
+  // (symbiote-scroll-view/symbiote-scroll-content, not the horizontal variants), so
+  // selectScrollIntrinsics is always called with isHorizontal=false here — matching what the
+  // template can actually render.
   override get reducedProps(): Record<string, unknown> {
     const reduced = super.reducedProps;
-    return reduced.nestedScrollEnabled === undefined
-      ? { ...reduced, nestedScrollEnabled: true }
-      : reduced;
+    const { scrollViewBaseStyle } = selectScrollIntrinsics(false, undefined);
+    const withScrollBase: Record<string, unknown> = {
+      ...reduced,
+      style: [scrollViewBaseStyle, reduced.style],
+    };
+    return withScrollBase.nestedScrollEnabled === undefined
+      ? { ...withScrollBase, nestedScrollEnabled: true }
+      : withScrollBase;
+  }
+
+  // The content (inner) view's props: contentStyle from the same intrinsics selection, plus
+  // `collapsable: false` (the Android multi-child fix this file's tests already cover) — mirrors
+  // the real ScrollView's own `contentProps` getter (scroll-view/shared.ts).
+  get contentProps(): Record<string, unknown> {
+    const { contentStyle } = selectScrollIntrinsics(false, undefined);
+    return { style: contentStyle, collapsable: false };
   }
 }
 

package/src/renderer.test.ts

@@ -9,11 +9,12 @@ import {
   clearGlobalStyles,
   createSurface,
   disposeRoot,
+  isAnchor,
   isSymbioteNode,
   registerStyles,
 } from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
-import { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
+import { registerComposedComponent, SymbioteRenderer, SymbioteRendererFactory } from './renderer';
 
 const ROOT_TAG = 707;
 const PROBE_ID = 'probe';
@@ -176,4 +177,26 @@ describe('Angular SymbioteRenderer drives the engine', () => {
     const { renderer } = setup();
     expect(() => renderer.listen('window', 'resize', () => {})()).not.toThrow();
   });
+
+  // App/third-party selectors must not be hardcoded into ANCHOR_HOST_COMPONENTS — the owning
+  // package registers itself via registerComposedComponent, same as an adapter-owned composed
+  // component. 'RefApiDemo' names examples/angular's demo component; this test never imports
+  // it, it only proves the renderer treats an unregistered selector as a raw Fabric view name,
+  // not a hardcoded anchor host. MUST run before the registration test below, since
+  // registerComposedComponent mutates the module-level Set for the rest of the file.
+  it('does not anchor-host an app-owned selector unless it self-registers', () => {
+    const { renderer } = setup();
+    const node = renderer.createElement('RefApiDemo');
+    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
+    expect(isAnchor(node), 'falls through to a raw Fabric view, not an anchor').toBe(false);
+    expect(node.component).toBe('RefApiDemo');
+  });
+
+  it('anchor-hosts an app-owned selector once it self-registers via registerComposedComponent', () => {
+    registerComposedComponent('RefApiDemo');
+    const { renderer } = setup();
+    const node = renderer.createElement('RefApiDemo');
+    if (!isSymbioteNode(node)) throw new Error('unreachable: createElement returns a node');
+    expect(isAnchor(node)).toBe(true);
+  });
 });

package/src/renderer.ts

@@ -87,23 +87,15 @@ const ANCHOR_HOST_COMPONENTS: Set<string> = new Set([
   // Composed Angular components render their real Fabric descriptor tree from the template;
   // their Angular host element is only a framework bookkeeping node and must not paint. This
   // is NOT limited to adapter-authored components — ANY custom composed @Component used as a
-  // plain <Tag> inside another template needs its selector listed here too, adapter or app
-  // code alike, or Angular's automatic host-element creation for it falls through to a raw
-  // Fabric createNode call with an unrecognized view name, which paints RN's own "Unimplemented
-  // component: <Tag>" fallback view instead (a real device-visible bug, not a silent no-op —
-  // discovered when examples/angular's own new demo components hit this).
-  'AccessibilityDemo',
+  // plain <Tag> inside another template needs its selector listed here too, or Angular's
+  // automatic host-element creation for it falls through to a raw Fabric createNode call with
+  // an unrecognized view name, which paints RN's own "Unimplemented component: <Tag>" fallback
+  // view instead (a real device-visible bug, not a silent no-op). This Set holds only
+  // adapter/engine-owned selectors; app code and third-party packages self-register their own
+  // composed components through registerComposedComponent instead of being hardcoded here.
   'ActivityIndicator',
-  'AnimatedDemo',
-  'AnimatedParityDemo',
   'Button',
   'FlatList',
-  'NativeModulesDemo',
-  'ParityDemo',
-  'PlatformColorDemo',
-  'RefApiDemo',
-  'ResponderDemo',
-  'Slider',
   'AnimatedView',
   'symbiote-animated-view',
   'AnimatedText',