@symbiote-native/angular 0.7.0 → 0.8.0

package/src/index.ts

@@ -61,6 +61,16 @@ export {
   AnimatedText,
   AnimatedView,
 } from './modules/animated';
+// Exported even though Angular's version maps only the four primitives (View/Text/Image/
+// ScrollView) onto the pre-authored wrappers above and THROWS on anything else — there is no JIT
+// under AOT/Metro, so it cannot synthesize a wrapper at runtime the way the other four adapters
+// do. It ships anyway because portable code (`createAnimatedComponent(View)`) then compiles and
+// runs identically on all five adapters, and the one case Angular cannot serve fails with a
+// message naming the fix (author a standalone @Component over AnimatedComponentBase) instead of
+// failing as a missing export, which names nothing. Found by the barrel audit in
+// `.claude/rules/adapter-parity-audit.md`: it was implemented and tested here all along and simply
+// never reached this file, so `@symbiote-native/angular` consumers could not reach it at all.
+export { createAnimatedComponent } from './modules/animated';
 export type {
   IActivityIndicatorProps,
   IAngularImageBackgroundProps,
@@ -135,7 +145,12 @@ export { DescriptorOutlet } from './descriptor-to-angular';
 // idiom) parameterized by an `@Input()`, rather than a factory returning fresh components per
 // call.
 export { PortalDirective, PortalOutletDirective } from './create-portal';
-export { createTunnel, TunnelInDirective, TunnelOut, type ITunnelStore } from './create-tunnel';
+export {
+  createTunnel,
+  TunnelInDirective,
+  TunnelOut,
+  type ITunnelStore,
+} from './create-tunnel';
 export { SymbioteRenderer, SymbioteRendererFactory } from './renderer';
 // registerComposedComponent lives in the dependency-free leaf ./anchor-host-registry, NOT in the
 // require-cyclic ./renderer — see the leaf header. The babel-register-composed plugin injects the
@@ -258,7 +273,11 @@ export {
   setNativeViewConfigSource,
   StyleSheet,
 } from '@symbiote-native/engine';
-export type { IRootTag, ISymbioteEvent, ISymbioteNode } from '@symbiote-native/engine';
+export type {
+  IRootTag,
+  ISymbioteEvent,
+  ISymbioteNode,
+} from '@symbiote-native/engine';
 // The agnostic style / platform / view-config types behind the values above. Angular takes its
 // component props as @Input()s and exports no per-component prop type, but an app still needs
 // these to type a style object or a Platform.select spec.
@@ -288,3 +307,13 @@ export type {
   IPressableAndroidRippleConfig,
   IImageStatics,
 } from '@symbiote-native/components';
+
+// Diagnostics: per-window Angular-side counters (change-detection passes, renderer writes, list
+// recomputes, cell views). The engine's readCommitProfile() prices the commit; these say how many
+// times anything ran at all - the number that exposes a change-detection free-run.
+export {
+  readAngularProfile,
+  readAngularProfileDetail,
+  setAngularProfileDetail,
+} from './diagnostics';
+export type { IAngularProfile, IAngularProfileDetail } from './diagnostics';

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

@@ -69,7 +69,11 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // plus static host props to forward (the React/Vue `rest`). Each concrete @Component re-lists
 // these (Angular's inputs-on-base convention, mirroring Switch/Image).
 export const ANIMATED_INPUTS = ['style', 'animatedProps', PASSTHROUGH_PROP];
-export const ANIMATED_IMAGE_INPUTS = [...IMAGE_INPUTS, 'animatedProps', PASSTHROUGH_PROP];
+export const ANIMATED_IMAGE_INPUTS = [
+  ...IMAGE_INPUTS,
+  'animatedProps',
+  PASSTHROUGH_PROP,
+];
 
 // The shared lifecycle for every animated wrapper. Concrete subclasses add ONLY a @Component
 // decorator (selector + the host-primitive template) — no behavior. Plain fields (no @Input
@@ -92,7 +96,8 @@ export abstract class AnimatedComponentBase
 
   // The directive sitting on the inner host primitive; its `node` is the committed SymbioteNode
   // the leaf binds to. Inherited by the decorated subclass (Angular collects base-class queries).
-  @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
+  @ViewChild(SymbioteHostPropsDirective)
+  private hostDirective?: SymbioteHostPropsDirective;
 
   // 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
@@ -110,10 +115,14 @@ export abstract class AnimatedComponentBase
   // array, which the commit layer flattens) so the ShadowTree carries the current transform.
   get reducedProps(): Record<string, unknown> {
     const reduced = reduceProps(this.mergedProps());
-    const passthroughStyle = readPassthroughStyle(this.passthroughAnimatedPropExplicitValues);
+    const passthroughStyle = readPassthroughStyle(
+      this.passthroughAnimatedPropExplicitValues,
+    );
     if (passthroughStyle !== undefined) {
       reduced['style'] =
-        reduced['style'] === undefined ? passthroughStyle : [reduced['style'], passthroughStyle];
+        reduced['style'] === undefined
+          ? passthroughStyle
+          : [reduced['style'], passthroughStyle];
     }
     reduced['style'] = [this.anchorStyle(), reduced['style']];
     return reduced;
@@ -162,7 +171,8 @@ export abstract class AnimatedComponentBase
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
-    const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
+    const wantsNative =
+      hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
     this.leafBinder.reconcile(props, wantsNative);
   }
 
@@ -171,7 +181,9 @@ export abstract class AnimatedComponentBase
   // never disagree.
   private mergedProps(): Record<string, unknown> {
     const base = this.animatedProps ?? {};
-    return this.style === undefined ? { ...base } : { ...base, style: this.style };
+    return this.style === undefined
+      ? { ...base }
+      : { ...base, style: this.style };
   }
 
   // The committed host node held by IDENTITY. resolveHostNode unwraps an imperative scroll
@@ -186,7 +198,9 @@ export abstract class AnimatedComponentBase
 @Component({
   selector: 'AnimatedView, symbiote-animated-view',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ViewHost],
   inputs: ANIMATED_INPUTS,
@@ -202,7 +216,9 @@ export class AnimatedView extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedText, symbiote-animated-text',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextHost],
   inputs: ANIMATED_INPUTS,
@@ -218,7 +234,9 @@ export class AnimatedText extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedImage, symbiote-animated-image',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ImageHost],
   inputs: ANIMATED_IMAGE_INPUTS,
@@ -242,7 +260,10 @@ export class AnimatedText extends AnimatedComponentBase {}
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges, OnDestroy {
+export class AnimatedImage
+  extends ImageBase
+  implements AfterViewInit, OnChanges, OnDestroy
+{
   animatedProps: Record<string, unknown> | undefined;
   passthroughAnimatedPropExplicitValues: unknown;
 
@@ -250,7 +271,8 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
   // comment on AnimatedComponentBase.elementRef.
   private readonly elementRef = inject(ElementRef);
 
-  @ViewChild(SymbioteHostPropsDirective) private hostDirective?: SymbioteHostPropsDirective;
+  @ViewChild(SymbioteHostPropsDirective)
+  private hostDirective?: SymbioteHostPropsDirective;
 
   // Same Pure Fabrication AnimatedComponentBase holds — see its matching comment. AnimatedImage
   // can't extend AnimatedComponentBase (it must extend ImageBase, see the file header), so it
@@ -263,10 +285,14 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 
   get animatedImageProps(): Record<string, unknown> {
     const reduced = reduceProps(this.mergedProps());
-    const passthroughStyle = readPassthroughStyle(this.passthroughAnimatedPropExplicitValues);
+    const passthroughStyle = readPassthroughStyle(
+      this.passthroughAnimatedPropExplicitValues,
+    );
     if (passthroughStyle !== undefined) {
       reduced['style'] =
-        reduced['style'] === undefined ? passthroughStyle : [reduced['style'], passthroughStyle];
+        reduced['style'] === undefined
+          ? passthroughStyle
+          : [reduced['style'], passthroughStyle];
     }
     const resolved = resolveImageProps(reduced);
     resolved['style'] = [anchorHostStyle(this.elementRef), resolved['style']];
@@ -311,7 +337,8 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
-    const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
+    const wantsNative =
+      hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
     this.leafBinder.reconcile(props, wantsNative);
   }
 
@@ -332,7 +359,9 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 @Component({
   selector: 'AnimatedScrollView, symbiote-animated-scroll-view',
   standalone: true,
-  hostDirectives: [{ directive: SymbioteStyleInputDirective, inputs: ['style'] }],
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ScrollViewHost],
   inputs: ANIMATED_INPUTS,

package/src/modules/app-registry/index.ts

@@ -23,7 +23,9 @@ export type IComponentProvider = () => Type<unknown>;
 // a pre-authored standalone @Component whose template renders `<ng-content>` — the Angular idiom
 // for "render my children" (mount() projects the root's host node into it, the twin of React's
 // createElement(Wrapper, null, rootElement)).
-export type IWrapperComponentProvider = (appParameters: IAppParameters) => Type<unknown>;
+export type IWrapperComponentProvider = (
+  appParameters: IAppParameters,
+) => Type<unknown>;
 
 function runnableFor(
   componentProvider: IComponentProvider,

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

@@ -5,7 +5,12 @@
 // 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 {
+  Component,
+  Input,
+  type OnChanges,
+  type SimpleChanges,
+} from '@angular/core';
 import {
   applyStatusBarProps,
   statusBarImperative,
@@ -46,12 +51,16 @@ class StatusBarComponent implements OnChanges {
   }
 }
 
-const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
+const StatusBarWithStatics = Object.assign(
+  StatusBarComponent,
+  statusBarImperative,
+);
 
 Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
   get: statusBarCurrentHeight,
   enumerable: true,
 });
 
-export const StatusBar: typeof StatusBarWithStatics & { readonly currentHeight?: number } =
-  StatusBarWithStatics;
+export const StatusBar: typeof StatusBarWithStatics & {
+  readonly currentHeight?: number;
+} = StatusBarWithStatics;

package/src/primitives/index.ts

@@ -3,7 +3,16 @@
 // 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 {
+  Component,
+  Input,
+  type OnInit,
+  type SimpleChanges,
+} from '@angular/core';
+import {
+  resolveTextProps,
+  type IEllipsizeMode,
+} from '@symbiote-native/components';
 import { SymbiotePrimitiveHost } from './shared';
 
 export {
@@ -21,12 +30,47 @@ export {
 })
 export class ViewHost extends SymbiotePrimitiveHost {}
 
+/**
+ * Text carries the two defaults RN's Text.js applies unconditionally (`ellipsizeMode ?? 'tail'`,
+ * `allowFontScaling !== false`, Text.js:288-291). Without them native falls back to `clip` and a
+ * clamped Text cuts mid-word with no ellipsis — device-observed on the other adapters 2026-08-19.
+ *
+ * They are declared as real `@Input()`s, unlike the pass-through props the base's comment
+ * describes, for one reason: the default can only be applied by code that can SEE whether the
+ * caller supplied a value. A host-binding pass-through is invisible here, so blindly writing
+ * 'tail' would silently overwrite an explicit `ellipsizeMode="clip"`.
+ */
 @Component({
   selector: 'symbiote-text, Text',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
-export class TextHost extends SymbiotePrimitiveHost {}
+export class TextHost extends SymbiotePrimitiveHost implements OnInit {
+  @Input() ellipsizeMode?: IEllipsizeMode;
+  @Input() allowFontScaling?: boolean;
+
+  // ngOnChanges fires before ngOnInit when a binding exists, and not at all when none does —
+  // so both hooks are needed to guarantee the defaults land exactly once per settled value.
+  ngOnInit(): void {
+    this.applyTextDefaults();
+  }
+
+  override ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+    if ('ellipsizeMode' in changes || 'allowFontScaling' in changes) {
+      this.applyTextDefaults();
+    }
+  }
+
+  private applyTextDefaults(): void {
+    const resolved = resolveTextProps({
+      ellipsizeMode: this.ellipsizeMode,
+      allowFontScaling: this.allowFontScaling,
+    });
+    this.setHostProp('ellipsizeMode', resolved.ellipsizeMode);
+    this.setHostProp('allowFontScaling', resolved.allowFontScaling);
+  }
+}
 
 @Component({
   selector: 'symbiote-image',

package/src/primitives/shared.ts

@@ -9,6 +9,7 @@ import {
   Renderer2,
   type SimpleChanges,
 } from '@angular/core';
+import { countAngular } from '../diagnostics';
 import {
   flattenStyle,
   isSymbioteNode,
@@ -61,7 +62,9 @@ function isStyleValue<T>(value: unknown): value is IStyleProp<T> {
   );
 }
 
-export function anchorStyleProp<T>(elementRef: ElementRef<unknown>): IStyleProp<T> | undefined {
+export function anchorStyleProp<T>(
+  elementRef: ElementRef<unknown>,
+): IStyleProp<T> | undefined {
   const value = anchorHostStyle(elementRef);
   return isStyleValue<T>(value) ? value : undefined;
 }
@@ -70,7 +73,10 @@ 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 {
+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]);
@@ -97,7 +103,9 @@ export function stableAnchorStyle(
   previous: unknown,
 ): Record<string, unknown> {
   const next = flattenStyle([anchorHostStyle(elementRef), explicitStyle]);
-  return isRecord(previous) && shallowStyleEqual(previous, next) ? previous : next;
+  return isRecord(previous) && shallowStyleEqual(previous, next)
+    ? previous
+    : next;
 }
 
 const ON_PREFIX = /^on[A-Z]/;
@@ -166,9 +174,11 @@ export class SymbioteStyleInputDirective implements DoCheck, OnChanges {
   // check re-dirties the view every tick and free-runs CD, the hazard `stableAnchorStyle` above
   // prevents one level up.
   ngDoCheck(): void {
+    countAngular('styleChecks');
     const current = anchorHostStyle(this.elementRef);
     if (isAnchorStyleUnchanged(this.lastAnchorStyle, current)) return;
     this.lastAnchorStyle = current;
+    countAngular('styleMarks');
     this.cdr.markForCheck();
   }
 }
@@ -178,7 +188,9 @@ export class SymbioteStyleInputDirective implements DoCheck, OnChanges {
 // above into a CD loop.
 function isAnchorStyleUnchanged(previous: unknown, next: unknown): boolean {
   if (Object.is(previous, next)) return true;
-  return isRecord(previous) && isRecord(next) && shallowStyleEqual(previous, next);
+  return (
+    isRecord(previous) && isRecord(next) && shallowStyleEqual(previous, next)
+  );
 }
 
 /**
@@ -194,10 +206,17 @@ function isAnchorStyleUnchanged(previous: unknown, next: unknown): boolean {
  * custom renderer's `setProperty`, so the engine's `routeProp` handles them as usual.
  */
 @Directive()
-export abstract class SymbiotePrimitiveHost implements OnChanges {
+export abstract class SymbiotePrimitiveHost implements DoCheck, OnChanges {
   private readonly renderer = inject(Renderer2);
   private readonly elementRef = inject(ElementRef);
 
+  // Counting only. Angular calls this once per view per check, so it is the only honest measure of
+  // how much tree a tick walks - and with CheckAlways primitives that is the whole application, not
+  // the screen on top. One integer increment next to a template refresh is not measurable.
+  ngDoCheck(): void {
+    countAngular('viewsChecked');
+  }
+
   @Input() style?: IStyleProp<unknown>;
 
   /**
@@ -210,8 +229,18 @@ export abstract class SymbiotePrimitiveHost implements OnChanges {
 
   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);
+    const value =
+      this.style === undefined ? undefined : flattenStyle(this.style);
+    this.setHostProp('style', value);
+  }
+
+  /**
+   * Push one resolved prop onto the host element. `protected` rather than exposing the injected
+   * Renderer2/ElementRef, so a subclass applying its own defaults (TextHost) uses the same single
+   * write path this base already uses for `style`.
+   */
+  protected setHostProp(key: string, value: unknown): void {
+    this.renderer.setProperty(this.elementRef.nativeElement, key, value);
   }
 }
 
@@ -246,16 +275,48 @@ export class SymbioteHostPropsDirective {
   // Reference stability is the point, not just the allocation: a fresh function on every push
   // defeats every downstream identity check on the bag, so nothing upstream could ever conclude
   // "this bag is unchanged" while a callback prop was in it.
-  private readonly wrappers = new WeakMap<object, (...args: unknown[]) => unknown>();
+  private readonly wrappers = new WeakMap<
+    object,
+    (...args: unknown[]) => unknown
+  >();
+
+  // Values pushed by the previous bag, so a push writes only what actually moved. Copied rather
+  // than aliased: a component is free to hand back the same object with mutated fields.
+  private pushed: Record<string, unknown> = {};
 
   get node(): unknown {
     return this.elementRef.nativeElement;
   }
 
+  // MEASURED 2026-08-20, headless 1000-row create: writing every key of every bag cost 104 000
+  // engine setProp calls where Solid's identical screen cost 12 000 — and 90 000 of them carried
+  // `undefined`. A composed component's bag is a FIXED-SHAPE literal (Pressable's is ~48 keys,
+  // most of them unset on any given instance), so the first push of a fresh node spends most of
+  // its work deleting keys the node never had. Diffing per key removes exactly that: an unset key
+  // is skipped on mount and still written the moment it changes to or from a real value.
   set symbioteHostProps(props: Record<string, unknown>) {
+    const pushed = this.pushed;
+    // Only keys the node actually carries, so the vanished-key sweep below walks a handful rather
+    // than the bag's whole declared shape.
+    const next: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(props)) {
-      this.renderer.setProperty(this.elementRef.nativeElement, key, this.wrapCallback(key, value));
+      if (value !== undefined) next[key] = value;
+      if (Object.is(pushed[key], value)) continue;
+      this.renderer.setProperty(
+        this.elementRef.nativeElement,
+        key,
+        this.wrapCallback(key, value),
+      );
+    }
+    // A bag's key SET is not fixed across pushes — resolveAccessibilityProps folds aria-* aliases
+    // into a different shape once any of them holds a value — and a key that vanishes must clear
+    // the prop rather than leave the last value on the native view. A key still IN the bag was
+    // already handled above, `undefined` included.
+    for (const key of Object.keys(pushed)) {
+      if (key in props) continue;
+      this.renderer.setProperty(this.elementRef.nativeElement, key, undefined);
     }
+    this.pushed = next;
   }
 
   // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's

package/src/render/index.ts

@@ -10,6 +10,7 @@ import {
   createSurface,
   disposeRoot,
   dlog,
+  reportUncaughtError,
   toPublicInstance,
   type ISymbioteNode,
   type IRootTag,
@@ -62,7 +63,35 @@ function asAngularHost(hostNode: SymbioteSurface | ISymbioteNode): Element {
 // to the wrapper as projectable content.
 function createDetachedViewHost(): ISymbioteNode {
   const descriptor = descriptorFor('View');
-  return toPublicInstance(createEngineElement(descriptor.component, descriptor.isText));
+  return toPublicInstance(
+    createEngineElement(descriptor.component, descriptor.isText),
+  );
+}
+
+// Angular's whole unhandled-error funnel: INTERNAL_APPLICATION_ERROR_HANDLER resolves this token
+// and hands it everything the framework caught on the app's behalf — a scheduled (async) tick that
+// threw, a template listener that threw, a rejected pending task. Routed to the engine so an
+// Angular app reaches the same native redbox as a React one instead of a console line nobody sees
+// off a dev machine.
+//
+// There is deliberately no caught-vs-uncaught split here, unlike the React adapter's
+// onUncaughtError/onCaughtError pair. Angular has no error boundary, and every path where the app
+// DID handle something keeps clear of this seam on its own: a `@defer` block with an `@error`
+// branch renders that branch (defer/rendering.ts calls handleUncaughtError only when there is
+// none), `resource()` parks the failure in its own error signal, and an app-level try/catch or
+// `catchError` never reaches Angular at all. So anything arriving here is by construction
+// unclaimed, and the redbox is the right answer for all of it.
+//
+// Two things this must not do. It must not also call `super.handleError` — reportUncaughtError
+// picks exactly one channel (host reporter or console) precisely because RN routes console.error
+// into LogBox too, so the pair would double-report every error. And it must not throw: the
+// scheduler invokes this from inside its own `catch` (zoneless_scheduling_impl.ts's tick), where a
+// second throw escapes to the host and kills the "report and keep running" behaviour the provider
+// exists for.
+class SymbioteErrorHandler extends ErrorHandler {
+  override handleError(error: unknown): void {
+    reportUncaughtError(error, { origin: 'angular render' });
+  }
 }
 
 interface IMountedApp {
@@ -81,7 +110,10 @@ export interface IMountOptions {
   wrapperComponent?: Type<unknown>;
 }
 
-function applyInputs(cmpRef: ComponentRef<unknown>, initialProps: object | undefined): void {
+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);
@@ -118,7 +150,23 @@ export function mount(
         provide: RendererFactory2,
         useValue: new SymbioteRendererFactory(surface),
       },
-      { provide: DOCUMENT, useValue: { head: surface, body: surface } },
+      // `getElementById` is not decoration: `resource()` resolves TransferState, whose root
+      // factory runs `retrieveTransferredState(doc, appId)` ->
+      // `doc.getElementById(appId + '-state')` (core/src/transfer_state.ts:156) to pick up
+      // server-rendered state. A stub without it makes that a TypeError, and because the throw
+      // happens while the component is being constructed, the ENTIRE screen renders nothing —
+      // white body under a native header that navigation drew anyway, no error surfaced. The
+      // `optional: true` on the injector lookup does not help: the token resolves, its factory
+      // is what throws. Returning null is the honest client answer — there is no server here, so
+      // `script?.tagName` short-circuits and the caller gets `{}`.
+      {
+        provide: DOCUMENT,
+        useValue: {
+          head: surface,
+          body: surface,
+          getElementById: (): null => null,
+        },
+      },
       // createEnvironmentInjector with a null parent scopes this injector to {'environment'}
       // only (see EnvironmentNgModuleRefAdapter), so providedIn:'root' tokens — ApplicationRef
       // included — never resolve (R3Injector.get walks up for a `scopes` containing 'root', and
@@ -142,9 +190,11 @@ export function mount(
       // `injector.get(ErrorHandler)`; a normal `bootstrapApplication` registers that token by
       // default, but our from-scratch environment injector never did, so the lookup itself threw
       // NG0201 and replaced the real error with "No provider found for ErrorHandler" — any async
-      // tick() exception crashed hard, uncaught, instead of being reported. Providing the
-      // default `ErrorHandler` restores `console.error('ERROR', e)` and keep running.
-      { provide: ErrorHandler, useClass: ErrorHandler },
+      // tick() exception crashed hard, uncaught, instead of being reported. The token still has to
+      // be provided for exactly that reason; what it resolves to is now SymbioteErrorHandler
+      // (see above), which reports through the engine instead of Angular's `console.error('ERROR',
+      // e)` and, like the default, returns rather than rethrows so the app keeps running.
+      { provide: ErrorHandler, useClass: SymbioteErrorHandler },
       ColorSchemeService,
       WindowDimensionsService,
     ],