@symbiote-native/angular 0.3.3 → 0.5.0

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/modules/{status-bar.test.ts → status-bar/status-bar.test.ts}

@@ -4,8 +4,8 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import * as engine from '@symbiote-native/engine';
 import { installFabric } from '@symbiote-native/test-utils';
 
-import { mount, unmount } from '../render';
-import { StatusBar } from './status-bar';
+import { mount, unmount } from '../../render';
+import { StatusBar } from './index';
 
 const ROOT_TAG = 901;
 const fabric = installFabric();

package/src/{render.ts → render/index.ts}

@@ -21,6 +21,7 @@ import {
   createComponent,
   createEnvironmentInjector,
   DOCUMENT,
+  ErrorHandler,
   RendererFactory2,
   ɵINJECTOR_SCOPE as INJECTOR_SCOPE,
   ɵprovideZonelessChangeDetectionInternal as provideZonelessChangeDetectionInternal,
@@ -28,8 +29,8 @@ import {
   type EnvironmentInjector,
   type Type,
 } from '@angular/core';
-import { SymbioteRendererFactory } from './renderer';
-import { ColorSchemeService, WindowDimensionsService } from './services';
+import { SymbioteRendererFactory } from '../renderer';
+import { ColorSchemeService, WindowDimensionsService } from '../services';
 
 // The two FFI-edge casts of this adapter, both confined here to bootstrap. Angular's core
 // types model a browser: the injector parent is a non-null EnvironmentInjector, the host is
@@ -145,6 +146,17 @@ export function mount(
       // `@Component` boundary — SignalView-compiled children are skip-eligible regardless of
       // this scheduler.
       ...provideZonelessChangeDetectionInternal(),
+      // Angular's own INTERNAL_APPLICATION_ERROR_HANDLER (core.mjs) reports a tick()
+      // exception by calling `injector.get(ErrorHandler)` — a normal `bootstrapApplication`
+      // registers this token by default (platform-browser's BROWSER_MODULE_PROVIDERS), but
+      // our from-scratch environment injector never did, so that lookup itself threw
+      // NG0201 and REPLACED whatever the real error was with an unrelated "No provider
+      // found for ErrorHandler" — the real exception never got logged, and the NG0201 itself
+      // propagated out of a bare Timeout callback uncaught (nothing above it in the stack to
+      // catch it), i.e. any async tick() exception, anywhere in the app, crashed hard instead
+      // of being reported. Providing the default `ErrorHandler` (same one bootstrapApplication
+      // ships) restores the intended behavior: `console.error('ERROR', e)` and keep running.
+      { provide: ErrorHandler, useClass: ErrorHandler },
       ColorSchemeService,
       WindowDimensionsService,
     ],

package/src/{render.test.ts → render/render.test.ts}

@@ -7,7 +7,7 @@ import '@angular/compiler';
 import { Component } from '@angular/core';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { installFabric } from '@symbiote-native/test-utils';
-import { mount, unmount } from './render';
+import { mount, unmount } from './index';
 
 const ROOT_TAG = 808;
 

package/src/{renderer.ts → renderer/index.ts}

@@ -29,7 +29,7 @@ import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
 import {
   getScrollViewProjection,
   removeScrollViewProjectedChild,
-} from './components/scroll-view/projection';
+} from '../components/scroll-view/projection';
 
 // Angular host nodes are all SymbioteNode (elements, raw text, anchors). The mount
 // container is the surface, so a parent can be either a node or the surface root.
@@ -80,64 +80,64 @@ const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
 // anchor host (see the set comment below). Tests register their own child-component selectors
 // through this at module load; app-authored composed components can too.
 export function registerComposedComponent(selector: string): void {
-  ANCHOR_HOST_COMPONENTS.add(selector);
+  ANCHOR_HOST_COMPONENTS.add(selector.toLowerCase());
 }
 
-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',
-  'ActivityIndicator',
-  'AnimatedDemo',
-  'AnimatedParityDemo',
-  'Button',
-  'FlatList',
-  'NativeModulesDemo',
-  'ParityDemo',
-  'PlatformColorDemo',
-  'RefApiDemo',
-  'ResponderDemo',
-  'Slider',
-  'AnimatedView',
-  'symbiote-animated-view',
-  'AnimatedText',
-  'symbiote-animated-text',
-  'AnimatedImage',
-  'symbiote-animated-image',
-  'AnimatedScrollView',
-  'symbiote-animated-scroll-view',
-  'symbiote-descriptor-outlet',
-  'tunnel-out',
-  'Image',
-  'ImageBackground',
-  'InputAccessoryView',
-  'KeyboardAvoidingView',
-  'Modal',
-  'Pressable',
-  'RefreshControl',
-  'SafeAreaView',
-  'ScrollView',
-  'ScrollViewStickyHeader',
-  'SectionList',
-  'symbiote-sticky-header',
-  'StatusBar',
-  'Switch',
-  'Text',
-  'TextInput',
-  'TouchableHighlight',
-  'TouchableNativeFeedback',
-  'TouchableOpacity',
-  'TouchableWithoutFeedback',
-  'VirtualizedList',
-  'VirtualizedSectionList',
-  'symbiote-pressable',
-]);
+// Lowercased at construction — createElement's lookup and registerComposedComponent's insert
+// both normalize to lowercase (Angular lowercases a dynamically-mounted component's selector at
+// runtime, see §11a), so the literal entries below must match that or every capitalized one
+// (all but the handful already written lowercase) silently never matches .has() and falls
+// through to a real Fabric createNode — the exact "Unimplemented component" / extra-wrapper-node
+// bug this Set exists to prevent.
+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, 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',
+    'Button',
+    'FlatList',
+    'AnimatedView',
+    'symbiote-animated-view',
+    'AnimatedText',
+    'symbiote-animated-text',
+    'AnimatedImage',
+    'symbiote-animated-image',
+    'AnimatedScrollView',
+    'symbiote-animated-scroll-view',
+    'symbiote-descriptor-outlet',
+    'tunnel-out',
+    'Image',
+    'ImageBackground',
+    'InputAccessoryView',
+    'KeyboardAvoidingView',
+    'Modal',
+    'Pressable',
+    'RefreshControl',
+    'SafeAreaView',
+    'ScrollView',
+    'ScrollViewStickyHeader',
+    'SectionList',
+    'symbiote-sticky-header',
+    'StatusBar',
+    'Switch',
+    'Text',
+    'TextInput',
+    'TouchableHighlight',
+    'TouchableNativeFeedback',
+    'TouchableOpacity',
+    'TouchableWithoutFeedback',
+    'VirtualizedList',
+    'VirtualizedSectionList',
+    'symbiote-pressable',
+  ].map(selector => selector.toLowerCase()),
+);
 
 // Inserting a bare raw-text node anywhere but inside a <Text> is invalid in Fabric (a
 // stray RCTRawText would paint). Angular's ɵɵtext only ever lands text inside a <Text>,
@@ -170,7 +170,7 @@ export class SymbioteRenderer implements Renderer2 {
     // ViewConfig). toPublicInstance grafts the imperative API (measure / setNativeProps /
     // focus) onto the raw node in place, returning the SAME identity the commit mirror keys on.
     const engineName = PRIMITIVE_SELECTOR_ALIAS[name] ?? name;
-    if (ANCHOR_HOST_COMPONENTS.has(engineName)) {
+    if (ANCHOR_HOST_COMPONENTS.has(engineName.toLowerCase())) {
       const anchor = tagAnchorForDebug(createAnchor());
       dlog(`angular createElement ${name} -> anchor host ${describeHost(anchor)}`);
       return anchor;

package/src/{renderer.test.ts → renderer/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 './index';
 
 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/build/angular/components/input-accessory-view.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-accessory-view.js","sourceRoot":"","sources":["../../../src/components/input-accessory-view.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,iGAAiG;AACjG,kGAAkG;AAClG,6FAA6F;AAC7F,+FAA+F;AAC/F,4FAA4F;AAE5F,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,yBAAyB,GAI1B,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;;AAEpG,6FAA6F;AAC7F,6FAA6F;AAC7F,SAAS,eAAe,CAAC,KAAc;IACrC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,aAAa,IAAI,KAAK,CAAC;AAC/E,CAAC;AAqCD,MAAM,OAAO,kBAAkB;IACpB,QAAQ,CAAU;IAClB,eAAe,CAAU;IACzB,KAAK,CAA0B;IACrB,mBAAmB,GAAG,IAAI,YAAY,EAAkB,CAAC;IACzD,gBAAgB,GAAG,IAAI,YAAY,EAAkB,CAAC;IACtD,QAAQ,GAAG,IAAI,YAAY,EAAkB,CAAC;IAC9C,mBAAmB,GAAG,IAAI,YAAY,EAAkB,CAAC;IACnE,MAAM,CAAU;IAChB,UAAU,CAAW;IACrB,kBAAkB,CAAU;IAC5B,iBAAiB,CAAU;IAC3B,iBAAiB,CAA4C;IAC7D,kBAAkB,CAA4B;IAC9C,kBAAkB,CAA6C;IAC/D,oBAAoB,CAA+C;IACnE,uBAAuB,CAAqB;IAC5C,yBAAyB,CAAoD;IAC7E,uBAAuB,CAAkD;IACzE,qBAAqB,CAAW;IAChC,wBAAwB,CAAW;IACnC,2BAA2B,CAAW;IACtC,gCAAgC,CAAW;IAC3C,qBAAqB,CAAU;IAC/B,sCAAsC,CAAW;IACjD,oCAAoC,CAAW;IAC/C,8BAA8B,CAAU;IACxC,IAAI,CAAsB;IACd,SAAS,CAAU;IACd,cAAc,CAAU;IAC9B,QAAQ,CAA2B;IACjC,UAAU,CAAW;IACvB,QAAQ,CAAW;IAChB,WAAW,CAAqB;IAC/B,YAAY,CAAW;IACvB,YAAY,CAAW;IACvB,YAAY,CAAW;IAC1B,SAAS,CAAW;IACjB,YAAY,CAAU;IACtB,YAAY,CAAU;IACtB,YAAY,CAAU;IACrB,aAAa,CAAU;IAEhD,6FAA6F;IAC7F,+FAA+F;IAC/F,uCAAuC;IACtB,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAEjD,8FAA8F;IAC9F,IAAI,CAAC,OAAqC,EAAE,KAAc;QACxD,IAAI,eAAe,CAAC,KAAK,CAAC;YAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAED,4FAA4F;IAC5F,kGAAkG;IAClG,4FAA4F;IAC5F,gGAAgG;IAChG,IAAI,SAAS;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,OAAO;YACL,KAAK,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;YACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,eAAe,EAAE,IAAI,CAAC,eAAe;YACrC,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,kBAAkB,EAAE,MAAM,CAAC,kBAAkB;YAC7C,iBAAiB,EAAE,MAAM,CAAC,iBAAiB;YAC3C,iBAAiB,EAAE,MAAM,CAAC,iBAAiB;YAC3C,kBAAkB,EAAE,MAAM,CAAC,kBAAkB;YAC7C,kBAAkB,EAAE,MAAM,CAAC,kBAAkB;YAC7C,oBAAoB,EAAE,MAAM,CAAC,oBAAoB;YACjD,uBAAuB,EAAE,MAAM,CAAC,uBAAuB;YACvD,yBAAyB,EAAE,MAAM,CAAC,yBAAyB;YAC3D,uBAAuB,EAAE,MAAM,CAAC,uBAAuB;YACvD,qBAAqB,EAAE,MAAM,CAAC,qBAAqB;YACnD,wBAAwB,EAAE,MAAM,CAAC,wBAAwB;YACzD,2BAA2B,EAAE,MAAM,CAAC,2BAA2B;YAC/D,gCAAgC,EAAE,MAAM,CAAC,gCAAgC;YACzE,qBAAqB,EAAE,MAAM,CAAC,qBAAqB;YACnD,sCAAsC,EAAE,MAAM,CAAC,sCAAsC;YACrF,oCAAoC,EAAE,MAAM,CAAC,oCAAoC;YACjF,8BAA8B,EAAE,MAAM,CAAC,8BAA8B;SACtE,CAAC;IACJ,CAAC;IAED,+FAA+F;IAC/F,uFAAuF;IACvF,IAAI,MAAM;QACR,OAAO,yBAAyB,CAAC;YAC/B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;YACzC,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;YAC3C,oBAAoB,EAAE,IAAI,CAAC,oBAAoB;YAC/C,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;YACrD,yBAAyB,EAAE,IAAI,CAAC,yBAAyB;YACzD,uBAAuB,EAAE,IAAI,CAAC,uBAAuB;YACrD,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;YACjD,wBAAwB,EAAE,IAAI,CAAC,wBAAwB;YACvD,2BAA2B,EAAE,IAAI,CAAC,2BAA2B;YAC7D,gCAAgC,EAAE,IAAI,CAAC,gCAAgC;YACvE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;YACjD,sCAAsC,EAAE,IAAI,CAAC,sCAAsC;YACnF,oCAAoC,EAAE,IAAI,CAAC,oCAAoC;YAC/E,8BAA8B,EAAE,IAAI,CAAC,8BAA8B;YACnE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,iBAAiB,EAAE,IAAI,CAAC,cAAc;YACtC,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,cAAc,EAAE,IAAI,CAAC,WAAW;YAChC,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,gBAAgB,EAAE,IAAI,CAAC,aAAa;SACrC,CAAC,CAAC;IACL,CAAC;uGA1HU,kBAAkB;2FAAlB,kBAAkB,y5DAZnB;;;;;;;;;;GAUT,4DAZS,sBAAsB,0EAAE,0BAA0B;;2FAcjD,kBAAkB;kBAlB9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,sBAAsB,CAAC;oBACjC,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;oBAC7D,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;;;;;;;;;GAUT;iBACF;;sBAEE,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,MAAM;;sBACN,MAAM;;sBACN,MAAM;;sBACN,MAAM;;sBACN,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;;sBACL,KAAK;uBAAC,YAAY;;sBAClB,KAAK;uBAAC,iBAAiB;;sBACvB,KAAK;uBAAC,WAAW;;sBACjB,KAAK;uBAAC,aAAa;;sBACnB,KAAK;uBAAC,WAAW;;sBACjB,KAAK;uBAAC,cAAc;;sBACpB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,YAAY;;sBAClB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,eAAe;;sBACrB,KAAK;uBAAC,gBAAgB"}