@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/modules/status-bar/index.ts

@@ -0,0 +1,57 @@
+// StatusBar, the Angular lifecycle half. The native StatusBarManager driving, the imperative
+// statics, and the Android bar-height constant all live in @symbiote-native/engine, shared verbatim with
+// React and Vue; Metro selects the engine's platform variant. Angular supplies only the
+// declarative shape: a component that renders nothing and re-applies the props through
+// ngOnChanges on mount + every prop change. Imperative statics are attached to the component
+// object the same way RN does.
+
+import { Component, Input, type OnChanges, type SimpleChanges } from '@angular/core';
+import {
+  applyStatusBarProps,
+  statusBarImperative,
+  statusBarCurrentHeight,
+  type IColorValue,
+  type IStatusBarProps,
+  type IStatusBarStyle,
+} from '@symbiote-native/engine';
+
+export type { IStatusBarProps, IStatusBarStyle } from '@symbiote-native/engine';
+
+@Component({
+  selector: 'StatusBar',
+  standalone: true,
+  template: '',
+})
+class StatusBarComponent implements OnChanges {
+  @Input() barStyle?: IStatusBarStyle;
+  @Input() hidden?: boolean;
+  @Input() animated?: boolean;
+  @Input() networkActivityIndicatorVisible?: boolean;
+  @Input() backgroundColor?: IColorValue;
+  @Input() translucent?: boolean;
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    applyStatusBarProps(this.buildProps());
+  }
+
+  private buildProps(): IStatusBarProps {
+    return {
+      barStyle: this.barStyle,
+      hidden: this.hidden,
+      animated: this.animated,
+      networkActivityIndicatorVisible: this.networkActivityIndicatorVisible,
+      backgroundColor: this.backgroundColor,
+      translucent: this.translucent,
+    };
+  }
+}
+
+const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
+
+Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
+  get: statusBarCurrentHeight,
+  enumerable: true,
+});
+
+export const StatusBar: typeof StatusBarWithStatics & { readonly currentHeight?: number } =
+  StatusBarWithStatics;

package/src/modules/status-bar/status-bar.test.ts

@@ -0,0 +1,50 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+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 './index';
+
+const ROOT_TAG = 901;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-status-bar-host',
+  standalone: true,
+  imports: [StatusBar],
+  template: ` <StatusBar [barStyle]="'dark-content'" [hidden]="true" [animated]="false" /> `,
+})
+class StatusBarHost {}
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+describe('StatusBar', () => {
+  it('applies status bar props on mount and renders no Fabric node', async () => {
+    const spy = vi.spyOn(engine, 'applyStatusBarProps').mockReturnValue(undefined);
+
+    mount(ROOT_TAG, StatusBarHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        barStyle: 'dark-content',
+        hidden: true,
+        animated: false,
+      }),
+    );
+
+    const root = fabric.appRoot();
+    expect(root.children).toHaveLength(0);
+  });
+
+  it('exposes imperative statics on the component value', () => {
+    expect(typeof StatusBar.setHidden).toBe('function');
+    expect(typeof StatusBar.setBarStyle).toBe('function');
+    expect(typeof StatusBar.setNetworkActivityIndicatorVisible).toBe('function');
+    expect(typeof StatusBar.setBackgroundColor).toBe('function');
+    expect(typeof StatusBar.setTranslucent).toBe('function');
+  });
+});

package/src/primitives/index.ts

@@ -0,0 +1,119 @@
+// Angular primitive host components over Symbiote engine intrinsics. These are the only
+// components that directly own the `symbiote-*` selectors; every composed adapter
+// component imports them and renders them in its template. Declaring `style` as a real
+// Angular input prevents Angular's CSS style engine from decomposing RN `StyleProp` arrays.
+
+import { Component } from '@angular/core';
+import { SymbiotePrimitiveHost } from './shared';
+
+export {
+  anchorHostStyle,
+  anchorStyleProp,
+  stableAnchorStyle,
+  SymbioteHostPropsDirective,
+} from './shared';
+
+@Component({
+  selector: 'symbiote-view, View',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text, Text',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class TextHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-image',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ImageHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-scroll-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ScrollViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-scroll-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ScrollContentView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-horizontal-scroll-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class HorizontalScrollView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-horizontal-scroll-content',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class HorizontalScrollContentView extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text-input',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class TextInputHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text-input-multiline',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-switch',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SwitchHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-activity-indicator',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ActivityIndicatorHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-safe-area-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SafeAreaViewHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-modal',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ModalHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-refresh-control',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class RefreshControlHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-input-accessory-view',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class InputAccessoryViewHost extends SymbiotePrimitiveHost {}

package/src/primitives/shared.ts

@@ -0,0 +1,190 @@
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  inject,
+  Input,
+  type OnChanges,
+  Renderer2,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  flattenStyle,
+  isSymbioteNode,
+  type IHostInstance,
+  type IStyleProp,
+} from '@symbiote-native/engine';
+
+/**
+ * A composed Angular component (Pressable, SafeAreaView, ScrollView, ...) is created as a
+ * non-painting ANCHOR host (`ANCHOR_HOST_COMPONENTS` in renderer.ts) so it doesn't paint an
+ * extra native view over its own template's real content. `class="..."`/`[class.x]`/`[ngClass]`
+ * at the component's use site ALWAYS resolves through the renderer's addClass/removeClass onto
+ * that anchor — Angular gives no `@Input()` interception hook for `class` the way it does for
+ * `[style]` (which is why `style` alone was declared as an `@Input()` in the first place, see
+ * `SymbiotePrimitiveHost` above) — so the anchor ends up holding the fully-resolved class-derived
+ * style (`routeProp`'s `commitClassStyle` already wrote it to `anchor.props.style`) while the
+ * REAL native node the component's own template creates never sees it.
+ *
+ * Call this from a composed component's own `hostProps`/style getter and merge the result AHEAD
+ * of its own explicit `style` @Input, e.g. `style: [anchorHostStyle(this.elementRef),
+ * this.resolvedStyle]` — array order matters: `flattenStyle`'s later-wins collapse is what makes
+ * an explicit `[style]` on the component still beat its ambient class, mirroring the
+ * class-loses-to-explicit-style cascade `commitClassStyle` already enforces for a direct
+ * primitive. `this.elementRef` must be this component's OWN injected `ElementRef` (its anchor
+ * host), not a `@ViewChild` into its template's inner primitive.
+ *
+ * Skipping this call for a new `ANCHOR_HOST_COMPONENTS` entry compiles clean under `tsc` AND a
+ * real `ngc` AOT build — no type error, no template error — it just silently drops `class="..."`
+ * forever; only a device/simulator render (or a committed-node style assertion) catches it.
+ */
+export function anchorHostStyle(elementRef: ElementRef<unknown>): unknown {
+  const node = elementRef.nativeElement;
+  return isSymbioteNode(node) ? node.props.style : undefined;
+}
+
+// anchorHostStyle returns `unknown` (it reads whatever already resolved onto the anchor node's
+// props bag); a style prop's fields are all optional so any object structurally satisfies it —
+// this narrows just enough (falsy-per-IStyleProp, or an object/array) to fold it into a
+// strictly-typed IStyleProp<T> array without an `as` cast, for a composed component whose own
+// inner primitive declares a real `@Input() style: IStyleProp<SomeConcreteStyle>` (e.g.
+// TouchableOpacity's Pressable, Button's TouchableOpacity) rather than the loosely-typed
+// `symbioteHostProps` bag most composed components merge anchorHostStyle into directly.
+function isStyleValue<T>(value: unknown): value is IStyleProp<T> {
+  return (
+    value === undefined ||
+    value === null ||
+    value === false ||
+    value === '' ||
+    typeof value === 'object'
+  );
+}
+
+export function anchorStyleProp<T>(elementRef: ElementRef<unknown>): IStyleProp<T> | undefined {
+  const value = anchorHostStyle(elementRef);
+  return isStyleValue<T>(value) ? value : undefined;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null;
+}
+
+function shallowStyleEqual(a: Record<string, unknown>, b: Record<string, unknown>): boolean {
+  const aKeys = Object.keys(a);
+  if (aKeys.length !== Object.keys(b).length) return false;
+  return aKeys.every(key => a[key] === b[key]);
+}
+
+/**
+ * `anchorHostStyle` must be re-read on every check (a bare `class="x"` with no matching
+ * `[style]` binding never appears in Angular's `SimpleChanges`/dirty-check inputs, so nothing
+ * else signals "the anchor's class-derived style may have changed"). But `flattenStyle([...])`
+ * always allocates a FRESH object, even when its content is byte-for-byte identical to last
+ * time — and a windowed list component (FlatList/VirtualizedList/SectionList/
+ * VirtualizedSectionList) binds its resolved style into a structural-directive-bound `@Input()`
+ * chain where a fresh reference on an UNRELATED CD pass is mistaken for a real change, which
+ * reschedules ANOTHER CD tick (`VListOutletDirective`'s `context` `@Input()` calling
+ * `markForCheck()`) — free-running forever. See the `flat-list-array-style.test.ts` regression
+ * this fixes (and the near-identical `lastRecompute` dedup guard in `virtualized-list/index.ts`,
+ * which this mirrors at the style-merge call site instead of a whole recompute step). Returns
+ * `previous` unchanged when the freshly-flattened merge is shallow-equal to it, so a downstream
+ * `@Input() style` binding sees NO change and skips its own update on an unrelated tick.
+ */
+export function stableAnchorStyle(
+  elementRef: ElementRef<unknown>,
+  explicitStyle: unknown,
+  previous: unknown,
+): Record<string, unknown> {
+  const next = flattenStyle([anchorHostStyle(elementRef), explicitStyle]);
+  return isRecord(previous) && shallowStyleEqual(previous, next) ? previous : next;
+}
+
+const ON_PREFIX = /^on[A-Z]/;
+
+/**
+ * Base for all Angular primitive host components (`symbiote-view`, `symbiote-text`, ...).
+ * RN's `StyleProp` can be an object, an array, nested arrays, falsy entries, and Animated
+ * values. Angular's raw `[style]` binding on a custom element routes through the CSS style
+ * engine (`setStyle` per key), which crashes on numeric array keys. By declaring `style` as
+ * an Angular `@Input()` on a known component, we intercept it here and forward a flattened
+ * style object through `Renderer2.setProperty`, bypassing Angular's CSS styling path.
+ *
+ * Other props (source, pointerEvents, ...) are intentionally *not* declared as inputs.
+ * Angular then treats them as host property bindings and still dispatches them through the
+ * custom renderer's `setProperty`, so the engine's `routeProp` handles them as usual.
+ */
+@Directive()
+export abstract class SymbiotePrimitiveHost implements OnChanges {
+  private readonly renderer = inject(Renderer2);
+  private readonly elementRef = inject(ElementRef);
+
+  @Input() style?: IStyleProp<unknown>;
+
+  /**
+   * The underlying engine host node (public instance). Exposed so `findNodeHandle` can resolve
+   * an Angular template ref (`#ref`) on a primitive host to its native reactTag.
+   */
+  get nativeElement(): IHostInstance {
+    return this.elementRef.nativeElement;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!('style' in changes)) return;
+    const value = this.style === undefined ? undefined : flattenStyle(this.style);
+    this.renderer.setProperty(this.elementRef.nativeElement, 'style', value);
+  }
+}
+
+/**
+ * Applies a whole resolved props record (a shared `renderX(...).props` bag) onto a host
+ * element via `Renderer2.setProperty`, one call per key. Angular templates compile bindings
+ * ahead of time — there is no `v-bind="obj"` equivalent for a custom element — so a component
+ * whose props come from a shared render function would otherwise have to declare every key as
+ * its own static `[prop]="hostProps['x']"` binding. This generalizes the pattern
+ * `SwitchHostPropsDirective` proved first: `<symbiote-x [symbioteHostProps]="hostProps" #ref="symbioteHost">`,
+ * with `ref.node` exposing the native element for any imperative follow-up call.
+ */
+@Directive({
+  selector: '[symbioteHostProps]',
+  standalone: true,
+  exportAs: 'symbioteHost',
+  inputs: ['symbioteHostProps'],
+})
+export class SymbioteHostPropsDirective {
+  private readonly renderer = inject(Renderer2);
+  private readonly elementRef = inject<ElementRef<unknown>>(ElementRef);
+  // The directive lives in its HOST component's template, so its injected ChangeDetectorRef IS
+  // that component's own view detector — the one thing that can refresh it (see wrapCallback).
+  private readonly cdr = inject(ChangeDetectorRef);
+
+  get node(): unknown {
+    return this.elementRef.nativeElement;
+  }
+
+  set symbioteHostProps(props: Record<string, unknown>) {
+    for (const [key, value] of Object.entries(props)) {
+      this.renderer.setProperty(this.elementRef.nativeElement, key, this.wrapCallback(key, value));
+    }
+  }
+
+  // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's
+  // event dispatch — a plain JS call, entirely outside Angular. In Angular 20 a component compiles
+  // as a SignalView (not CheckAlways), so a plain (non-signal) state mutation inside such a callback
+  // does NOT dirty the view's reactive consumer, and the scheduler's root detectChanges() will NOT
+  // descend into it (a Global pass only refreshes CheckAlways / Dirty / RefreshView views) — the
+  // "pan does nothing" bug on a nested component. `markForCheck()` flags THIS component's view AND
+  // all its ancestors with RefreshView (which survives the descent) and notifies the CD scheduler,
+  // so the next root tick repaints the mutation. It targets the directive's injecting view
+  // (`_cdRefInjectingView`, i.e. the host component), unlike `detectChanges()` which acts on a
+  // resolved `_lView` that is NOT the host component here. The Angular twin of what React/Vue get
+  // for free (setState / proxy reactivity).
+  private wrapCallback(key: string, value: unknown): unknown {
+    if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
+    const handler = value as (...args: unknown[]) => unknown;
+    return (...args: unknown[]): unknown => {
+      const result = handler(...args);
+      this.cdr.markForCheck();
+      return result;
+    };
+  }
+}

package/src/render/index.ts

@@ -0,0 +1,235 @@
+// Mount an Angular app onto a Fabric surface. The native host hands us a rootTag; we
+// create a surface and bootstrap a standalone Angular component WITHOUT platform-browser
+// (no DOM) — createEnvironmentInjector + createComponent over @angular/core only, with our
+// SymbioteRendererFactory provided so Angular drives the engine, which commits into
+// nativeFabricUIManager; RN's own renderer never in the path. Angular twin of
+// adapters/vue/src/render.ts.
+
+import {
+  createElement as createEngineElement,
+  createSurface,
+  disposeRoot,
+  dlog,
+  toPublicInstance,
+  type ISymbioteNode,
+  type IRootTag,
+  type SymbioteSurface,
+} from '@symbiote-native/engine';
+import { descriptorFor } from '@symbiote-native/components';
+import {
+  ApplicationRef,
+  createComponent,
+  createEnvironmentInjector,
+  DOCUMENT,
+  ErrorHandler,
+  RendererFactory2,
+  ɵINJECTOR_SCOPE as INJECTOR_SCOPE,
+  ɵprovideZonelessChangeDetectionInternal as provideZonelessChangeDetectionInternal,
+  type ComponentRef,
+  type EnvironmentInjector,
+  type Type,
+} from '@angular/core';
+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
+// a DOM Element. Our root has neither shape — a null parent IS a root injector, and the host
+// is a SymbioteSurface (or, for a wrapped AppRegistry root, a plain engine node) the
+// SymbioteRenderer (not the DOM) consumes. These are the sanctioned I/O-edge casts where our
+// objects cross into Angular's web-typed API; revisit if Angular ever exposes a cast-free
+// host. Nothing else in the adapter casts.
+function rootInjectorParent(): EnvironmentInjector {
+  return null as unknown as EnvironmentInjector;
+}
+function asAngularHost(hostNode: SymbioteSurface | ISymbioteNode): Element {
+  // Angular's locateHostElement reads hostElement.tagName even when a concrete hostElement
+  // is supplied. The host container is given Angular the tiny DOM-shaped field it probes
+  // without changing the renderer target.
+  Object.defineProperty(hostNode, 'tagName', {
+    configurable: true,
+    value: 'symbiote-root',
+  });
+  return hostNode as unknown as Element;
+}
+
+// A bare `symbiote-view` node, created directly through the engine (bypassing Angular's own
+// createElement, which only resolves KNOWN symbiote primitives, never an arbitrary component's
+// selector — see SymbioteRenderer.createElement). Used as the AppRegistry root's host when a
+// wrapperComponentProvider is set: Angular has no hostElement-less bootstrap for our renderer
+// (it would try `renderer.createElement(rootComponent.selector)`, which throws for anything
+// that isn't one of our primitives), so the root needs an explicit host too, one we then hand
+// to the wrapper as projectable content.
+function createDetachedViewHost(): ISymbioteNode {
+  const descriptor = descriptorFor('View');
+  return toPublicInstance(createEngineElement(descriptor.component, descriptor.isText));
+}
+
+interface IMountedApp {
+  cmpRef: ComponentRef<unknown>;
+  rootRef: ComponentRef<unknown> | undefined;
+  injector: EnvironmentInjector;
+}
+
+// AppRegistry's `wrapperComponentProvider` support: the root renders detached (Angular gives
+// it its own host node via our renderer, not yet attached anywhere), and the wrapper — the
+// component actually attached to the surface — receives that host node as a projected child.
+// `<ng-content>` in the wrapper's template is the Angular idiom for "render my children", the
+// direct twin of React's `createElement(Wrapper, null, rootElement)`.
+export interface IMountOptions {
+  initialProps?: object;
+  wrapperComponent?: Type<unknown>;
+}
+
+function applyInputs(cmpRef: ComponentRef<unknown>, initialProps: object | undefined): void {
+  if (initialProps === undefined) return;
+  for (const [key, value] of Object.entries(initialProps)) {
+    cmpRef.setInput(key, value);
+  }
+}
+
+// One Angular app per surface, so a surface can be torn down (unmount) or cleanly
+// re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on Fast
+// Refresh and on lifecycle/focus changes, reusing the rootTag.
+const apps = new Map<IRootTag, IMountedApp>();
+
+function teardown(rootTag: IRootTag): void {
+  const app = apps.get(rootTag);
+  if (app === undefined) return;
+  app.rootRef?.destroy();
+  app.cmpRef.destroy();
+  app.injector.destroy();
+  apps.delete(rootTag);
+  disposeRoot(rootTag);
+}
+
+export function mount(
+  rootTag: IRootTag,
+  rootComponent: Type<unknown>,
+  options?: IMountOptions,
+): SymbioteSurface {
+  // A re-mount on a live rootTag starts clean; otherwise the stale app double-drives the surface.
+  teardown(rootTag);
+
+  const surface = createSurface(rootTag);
+  const injector = createEnvironmentInjector(
+    [
+      {
+        provide: RendererFactory2,
+        useValue: new SymbioteRendererFactory(surface),
+      },
+      { provide: DOCUMENT, useValue: { head: surface, body: surface } },
+      // createEnvironmentInjector with a null parent gives this injector scope
+      // {'environment'} only (see EnvironmentNgModuleRefAdapter), so providedIn:'root'
+      // tokens — ApplicationRef included — never resolve on their own (R3Injector.get
+      // walks up looking for an injector whose `scopes` contains 'root', and a null
+      // parent means that search always dead-ends in NullInjector). platform-browser's
+      // BROWSER_MODULE_PROVIDERS solves this the same way for real DOM apps: it hands
+      // { provide: INJECTOR_SCOPE, useValue: 'root' } to its OWN app-level providers, and
+      // R3Injector's constructor reads that provider and self-tags this.scopes with
+      // 'root'. We do the same here — no PlatformRef, no DOM, just this one provider.
+      { provide: INJECTOR_SCOPE, useValue: 'root' },
+      // Supplies the real ChangeDetectionSchedulerImpl (microtask-batched, self-scheduling
+      // via ApplicationRef.afterTick) + NoopNgZone + ZONELESS_ENABLED: true — the exact
+      // bundle internalCreateApplication() uses. With ApplicationRef reachable (see above),
+      // there is no more reason for a hand-rolled scheduler: it replaces our old
+      // unconditional `rootView.detectChanges(); cmpView.detectChanges()` (which force-ran
+      // BOTH root views on every tick regardless of cause) with Angular's own tick(), which
+      // only enters an attached view when something actually marked it (RefreshView / Dirty
+      // consumer / HasChildViewsToRefresh). NOTE: this does NOT stop the root's own template
+      // from re-running on a plain press or `ChangeDetectorRef.markForCheck()` anywhere in
+      // the tree — `markViewDirty` (which both native (event) bindings and `markForCheck()`
+      // go through, see SymbioteHostPropsDirective) unconditionally sets RefreshView on
+      // EVERY ancestor up to the root; that is fundamental, unavoidable Angular zoneless
+      // behavior, true in every Angular app, not something this swap changes. What DOES
+      // still protect a sibling branch from an unrelated press is a genuine child
+      // `@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,
+    ],
+    rootInjectorParent(),
+  );
+
+  // hostElement = the surface: the component's template content commits straight into the
+  // surface with no wrapper view, the engine wrapping surface.children in its synthetic flex
+  // root — the Angular equivalent of Vue's `app.mount(surface)`.
+  let cmpRef: ComponentRef<unknown>;
+  let rootRef: ComponentRef<unknown> | undefined;
+  if (options?.wrapperComponent === undefined) {
+    cmpRef = createComponent<unknown>(rootComponent, {
+      environmentInjector: injector,
+      hostElement: asAngularHost(surface),
+    });
+    applyInputs(cmpRef, options?.initialProps);
+  } else {
+    // The root gets its own host node from the renderer (createComponent without a
+    // hostElement) but is not attached to the surface directly; it is handed to the
+    // wrapper as projectable content instead, so only the wrapper needs a real host.
+    const rootHost = asAngularHost(createDetachedViewHost());
+    rootRef = createComponent<unknown>(rootComponent, {
+      environmentInjector: injector,
+      hostElement: rootHost,
+    });
+    applyInputs(rootRef, options.initialProps);
+    cmpRef = createComponent<unknown>(options.wrapperComponent, {
+      environmentInjector: injector,
+      hostElement: asAngularHost(surface),
+      projectableNodes: [[rootHost]],
+    });
+  }
+
+  // Attach both root views to ApplicationRef so its own tick() (via the real
+  // ChangeDetectionSchedulerImpl provided above) drives them from here on — no manual
+  // ChangeDetectorRef juggling needed. markForCheck anywhere in the tree now notifies
+  // the real scheduler, which batches a microtask and calls appRef.tick() itself.
+  const appRef = injector.get(ApplicationRef);
+  appRef.attachView(cmpRef.hostView);
+  if (rootRef !== undefined) {
+    appRef.attachView(rootRef.hostView);
+  }
+
+  dlog(`angular mount root=${rootTag}`);
+  appRef.tick(); // first paint
+  surface.requestCommit();
+
+  apps.set(rootTag, { cmpRef, rootRef, injector });
+  return surface;
+}
+
+// Tear down a surface by rootTag: the public pair of `mount`, and the JS half of the
+// bridgeless `RN$stopSurface` contract (see installStopSurfaceGlobal).
+export function unmount(rootTag: IRootTag): void {
+  dlog(`angular unmount root=${rootTag}`);
+  teardown(rootTag);
+}
+
+// `global.RN$stopSurface` is the JSI hook C++ AppRegistryBinding::stopSurface calls to stop a
+// Fabric surface. RN installs it from its own renderer; symbiote REPLACES that renderer, so
+// without this the binding throws "Global was not installed" on every surface stop (Fast
+// Refresh, focus/lifecycle) and the screen goes blank. Same contract as the React/Vue
+// adapters: an app uses one adapter, so exactly one installer runs.
+declare global {
+  var RN$stopSurface: ((surfaceId: number) => void) | undefined;
+}
+
+function installStopSurfaceGlobal(): void {
+  globalThis.RN$stopSurface = (surfaceId: number): void => {
+    unmount(surfaceId);
+  };
+  dlog('installed global.RN$stopSurface');
+}
+
+installStopSurfaceGlobal();