@symbiote-native/angular 0.7.0 → 1.0.0

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:289 and :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',
@@ -63,6 +107,9 @@ export class HorizontalScrollView extends SymbiotePrimitiveHost {}
 })
 export class HorizontalScrollContentView extends SymbiotePrimitiveHost {}
 
+// The pair the LOWERED path commits — declared so the tag alphabet stays complete, though no
+// Angular template renders them: this adapter has no lowering transform. The `-managed` pair below
+// is what its own TextInput renders.
 @Component({
   selector: 'symbiote-text-input',
   standalone: true,
@@ -77,6 +124,20 @@ export class TextInputHost extends SymbiotePrimitiveHost {}
 })
 export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
 
+@Component({
+  selector: 'symbiote-text-input-managed',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ManagedTextInputHost extends SymbiotePrimitiveHost {}
+
+@Component({
+  selector: 'symbiote-text-input-multiline-managed',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ManagedMultilineTextInputHost extends SymbiotePrimitiveHost {}
+
 @Component({
   selector: 'symbiote-switch',
   standalone: true,
@@ -84,6 +145,16 @@ export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
 })
 export class SwitchHost extends SymbiotePrimitiveHost {}
 
+// The component path's spelling — same native Switch/AndroidSwitch, a tag the engine's Switch
+// behavior does not carry. See `component-names/shared.ts` for why the wrapper may not share the
+// lowered tag; mirrors `ManagedTextInputHost` above.
+@Component({
+  selector: 'symbiote-switch-managed',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class ManagedSwitchHost extends SymbiotePrimitiveHost {}
+
 @Component({
   selector: 'symbiote-activity-indicator',
   standalone: true,

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/register.ts

@@ -0,0 +1,43 @@
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
+//
+// A lowered `<symbiote-pressable>`/`<symbiote-text-input>` is a bare custom element with no
+// component behind it, so the press machine and the controlled-input machine have to live on the
+// engine node itself — reached by `registerPressableBehavior()`/`registerTextInputBehavior()`
+// having run before the first node of that tag is created.
+//
+// Metro turns on `inlineRequires` for PRODUCTION only, moving a `require()` down to the first place
+// its binding is used as a VALUE; a barrel's `export { X } from './x'` compiles to a lazy getter,
+// so a module reached only that way never evaluates unless something names it as a value — silent
+// in Release builds alone, invisible to tsc, to vitest, and to grepping the bundle (see CLAUDE.md,
+// "Never make correctness depend on a module's load-time side effect"). A bare
+// `import './register';` placed NEXT TO a re-export of the same specifier does not help either —
+// Babel merges the two into one dependency and the merged one stays lazy. This is the shape that
+// survives both traps, matching `adapters/{vue,svelte,solid}/src/register.ts` and
+// `packages/slider/src/{react,vue,svelte,angular}/index.ts`.
+import {
+  registerImageBehavior,
+  registerInputAccessoryViewBehavior,
+  registerPressableBehavior,
+  registerSwitchBehavior,
+  registerTextInputBehavior,
+} from '@symbiote-native/components';
+
+registerPressableBehavior();
+// Only the LOWERED tags carry this — the wrapper renders `symbiote-text-input-managed` /
+// `symbiote-text-input-multiline-managed` and keeps running its own lifecycle. One owner per node;
+// see `component-names/shared.ts`.
+registerTextInputBehavior();
+// Same reason as TextInput: the wrapper renders `symbiote-switch-managed` and runs its own
+// lastNativeReport/snap-back lifecycle, so the engine's copy attaches only to the bare tag.
+registerSwitchBehavior();
+
+// Image owns no runtime — its behavior is a prop FOLD and nothing else, and it is registered on the
+// same `symbiote-image` the wrapper already emits rather than on a `-managed` twin. That is safe
+// only because the mapping is idempotent, which `core/components/src/behaviors/image.test.ts`
+// asserts rather than assumes; a wrapper-built node simply folds a second time and nothing moves.
+registerImageBehavior();
+
+// Fold-only, and it shares the wrapper's tag for the same reason Image does: the mapping has no
+// aliasing at all, so a wrapper-built node folding a second time moves nothing.
+// `core/components/src/behaviors/input-accessory-view.test.ts` asserts that rather than assuming it.
+registerInputAccessoryViewBehavior();

package/src/render/index.ts

@@ -10,6 +10,7 @@ import {
   createSurface,
   disposeRoot,
   dlog,
+  reportUncaughtError,
   toPublicInstance,
   type ISymbioteNode,
   type IRootTag,
@@ -61,8 +62,38 @@ function asAngularHost(hostNode: SymbioteSurface | ISymbioteNode): Element {
 // 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));
+  // 'symbiote-view', not 'View': the public name is not a Fabric view name, and until
+  // makeDescriptorFor learned to reject one it fell through to a view literally named `View`.
+  const descriptor = descriptorFor('symbiote-view');
+  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 +112,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 +152,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 +192,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,
     ],