@symbiote-native/angular 0.6.2 → 0.8.0

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

@@ -1,22 +1,18 @@
-// createAnimatedComponent for @symbiote-native/angular: the Angular twin of the React/Vue
-// wrapper. React/Vue have a runtime HOC (`createAnimatedComponent(Component)` builds a
-// fresh wrapped component on the fly). Angular has NO such idiom AND it cannot have one:
-// the AOT-under-Metro build compiles every @Component at build
-// time and ships NO JIT compiler to Hermes, so a runtime `Component({...})(class)` would
-// throw. The idiomatic, AOT-safe equivalent is therefore an EXPLICIT set of standalone
-// components — AnimatedView / AnimatedText / AnimatedImage / AnimatedScrollView — each a
-// thin @Component over the matching host primitive, all sharing one abstract lifecycle
-// base. The mechanism (build an AnimatedProps leaf, reduce animated props to current
-// values for the first paint, bind the leaf to the committed host node, swap leaves on
-// re-render, tear down on destroy) lives once in AnimatedComponentBase; only the per-host
-// template differs.
+// createAnimatedComponent for @symbiote-native/angular. React/Vue have a runtime HOC
+// (`createAnimatedComponent(Component)` builds a fresh wrapped component on the fly); Angular
+// can't — the AOT-under-Metro build compiles every @Component ahead of time and ships no JIT
+// compiler to Hermes, so a runtime `Component({...})(class)` would throw. The AOT-safe
+// equivalent is an EXPLICIT set of standalone components — AnimatedView / AnimatedText /
+// AnimatedImage / AnimatedScrollView — each a thin @Component over the matching host primitive,
+// sharing one abstract lifecycle base. The mechanism (build an AnimatedProps leaf, reduce
+// animated props to current values for the first paint, bind the leaf to the committed host
+// node, swap leaves on re-render, tear down on destroy) lives once in AnimatedComponentBase.
 //
 // The framework-agnostic half (reduceProps / readPassthroughStyle / resolveHostNode /
 // AnimatedProps / attachNativeEventHandler / isNativeAnimatedAvailable) comes from
-// @symbiote-native/engine, shared verbatim with React and Vue. Angular supplies
-// only the lifecycle wiring. The per-frame path NEVER goes through Angular change
-// detection: value.setValue / animation -> flushValue -> AnimatedProps.update() ->
-// setNativeProps(node), exactly as on the other adapters.
+// @symbiote-native/engine, shared with React and Vue. The per-frame path NEVER goes through
+// Angular change detection: value.setValue / animation -> flushValue -> AnimatedProps.update()
+// -> setNativeProps(node), same as the other adapters.
 
 import {
   ChangeDetectionStrategy,
@@ -25,8 +21,10 @@ import {
   Directive,
   ElementRef,
   inject,
+  signal,
   ViewChild,
   type AfterViewInit,
+  type DoCheck,
   type OnChanges,
   type OnDestroy,
   type Type,
@@ -43,11 +41,12 @@ import { selectScrollIntrinsics } from '@symbiote-native/components';
 import { Image, ScrollView, Text, View } from '../../components';
 import {
   anchorHostStyle,
-  ViewHost,
-  TextHost,
   ImageHost,
   ScrollViewHost,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
+  TextHost,
+  ViewHost,
 } from '../../primitives';
 import { FlatList } from '../../components/flat-list';
 import {
@@ -67,11 +66,14 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // The inputs every animated wrapper accepts. `style` is the (possibly animated) style — the
 // common path (TouchableOpacity passes `[style, { opacity }]`). `animatedProps` is the generic
 // escape hatch for any OTHER prop that may hold an AnimatedNode or an Animated.event handler,
-// plus static host props to forward (the React/Vue `rest`). The passthrough drives native.
-// Each concrete @Component re-lists these (Angular's inputs-on-base convention, mirroring
-// Switch/Image), so they are inherited consistently.
+// 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
@@ -79,7 +81,9 @@ export const ANIMATED_IMAGE_INPUTS = [...IMAGE_INPUTS, 'animatedProps', PASSTHRO
 // @Directive() (no selector) is the Angular-sanctioned decorator for an abstract base that
 // declares lifecycle hooks — without it ngtsc rejects the inherited hooks (NG2007).
 @Directive()
-export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges, OnDestroy {
+export abstract class AnimatedComponentBase
+  implements AfterViewInit, DoCheck, OnChanges, OnDestroy
+{
   style: unknown;
   animatedProps: Record<string, unknown> | undefined;
   passthroughAnimatedPropExplicitValues: unknown;
@@ -92,7 +96,8 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
 
   // 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,15 +115,38 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
   // 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'] = [anchorHostStyle(this.elementRef), reduced['style']];
+    reduced['style'] = [this.anchorStyle(), reduced['style']];
     return reduced;
   }
 
+  // The anchor's class-derived style, polled rather than read live inside `reducedProps`.
+  //
+  // Two different writers land style on this component's anchor and NEITHER goes through
+  // ngOnChanges: `class=` / `[class.x]` / `[ngClass]` at the use site (via the renderer's
+  // addClass/removeClass -> commitClassStyle), and a `[style]` binding from a composing parent
+  // that Angular writes as a host property because `style` is not declared as an @Input here.
+  // Reading them live in the getter worked at CREATION only - nothing dirties THIS view when the
+  // anchor changes, so the getter was never re-read and the update was lost. Device-visible as a
+  // TouchableOpacity whose `class` toggled after mount never repainted.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+  // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+  // unchanged poll a no-op, so a steady screen costs one property read per pass and nothing else.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngAfterViewInit(): void {
     this.viewReady = true;
     this.reconcile();
@@ -143,7 +171,8 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
     const hasPassthroughAnimatedValues =
       this.passthroughAnimatedPropExplicitValues !== null &&
       this.passthroughAnimatedPropExplicitValues !== undefined;
-    const wantsNative = hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
+    const wantsNative =
+      hasPassthroughAnimatedValues && isNativeAnimatedAvailable();
     this.leafBinder.reconcile(props, wantsNative);
   }
 
@@ -152,7 +181,9 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
   // 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
@@ -167,6 +198,9 @@ export abstract class AnimatedComponentBase implements AfterViewInit, OnChanges,
 @Component({
   selector: 'AnimatedView, symbiote-animated-view',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ViewHost],
   inputs: ANIMATED_INPUTS,
@@ -182,6 +216,9 @@ export class AnimatedView extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedText, symbiote-animated-text',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, TextHost],
   inputs: ANIMATED_INPUTS,
@@ -197,6 +234,9 @@ export class AnimatedText extends AnimatedComponentBase {}
 @Component({
   selector: 'AnimatedImage, symbiote-animated-image',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ImageHost],
   inputs: ANIMATED_IMAGE_INPUTS,
@@ -220,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;
 
@@ -228,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
@@ -241,16 +285,39 @@ 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']];
     return resolved;
   }
 
+  // The anchor's class-derived style, polled rather than read live inside `reducedProps`.
+  //
+  // Two different writers land style on this component's anchor and NEITHER goes through
+  // ngOnChanges: `class=` / `[class.x]` / `[ngClass]` at the use site (via the renderer's
+  // addClass/removeClass -> commitClassStyle), and a `[style]` binding from a composing parent
+  // that Angular writes as a host property because `style` is not declared as an @Input here.
+  // Reading them live in the getter worked at CREATION only - nothing dirties THIS view when the
+  // anchor changes, so the getter was never re-read and the update was lost. Device-visible as a
+  // TouchableOpacity whose `class` toggled after mount never repainted.
+  //
+  // ngDoCheck runs during the PARENT's refresh even when this view is skipped, and the signal
+  // write is what then marks this view for refresh. `signal.set`'s own Object.is makes an
+  // unchanged poll a no-op, so a steady screen costs one property read per pass and nothing else.
+  private readonly anchorStyle = signal<unknown>(undefined);
+
+  ngDoCheck(): void {
+    this.anchorStyle.set(anchorHostStyle(this.elementRef));
+  }
+
   ngAfterViewInit(): void {
     this.viewReady = true;
     this.reconcile();
@@ -270,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);
   }
 
@@ -291,6 +359,9 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 @Component({
   selector: 'AnimatedScrollView, symbiote-animated-scroll-view',
   standalone: true,
+  hostDirectives: [
+    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   imports: [SymbioteHostPropsDirective, ScrollViewHost],
   inputs: ANIMATED_INPUTS,
@@ -305,20 +376,17 @@ export class AnimatedImage extends ImageBase implements AfterViewInit, OnChanges
 })
 export class AnimatedScrollView extends AnimatedComponentBase {
   // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`) — Android
-  // needs it explicit or a ScrollView nested inside another scrollable container never
-  // 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.
+  // needs it explicit or a nested ScrollView never receives touch (swallowed by the outer one;
+  // 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
+  // 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.
+  // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the other thing the
+  // real ScrollView applies that this bespoke template used to skip — without it, iOS Fabric
+  // never clips content to the scroll view's frame (invisible on Android, whose native ViewGroup
+  // clips regardless of style). This wrapper has no `horizontal` input and its template is
+  // hardcoded to the vertical intrinsics, 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;
     const { scrollViewBaseStyle } = selectScrollIntrinsics(false, undefined);

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

@@ -15,17 +15,17 @@ import {
 } from '@symbiote-native/engine';
 import { mount } from '../../render';
 
-// RN's IComponentProvider: a thunk returning the root component (lazy so the module
-// graph stays cheap until the app actually runs).
+// RN's IComponentProvider. Lazy so the module graph stays cheap until the app actually runs.
 export type IComponentProvider = () => Type<unknown>;
 
-// RN's IWrapperComponentProvider: given the surface's parameters, returns a
-// component to wrap the app root in (e.g. a context provider). Optional. Angular has no
-// runtime template synthesis (no JIT under AOT/Metro — see create-animated-component.ts),
-// so the wrapper must be 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>;
+// RN's IWrapperComponentProvider (e.g. a context provider). Angular has no runtime template
+// synthesis (no JIT under AOT/Metro — see create-animated-component.ts), so the wrapper must be
+// 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>;
 
 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 {
@@ -11,6 +20,7 @@ export {
   anchorStyleProp,
   stableAnchorStyle,
   SymbioteHostPropsDirective,
+  SymbioteStyleInputDirective,
 } from './shared';
 
 @Component({
@@ -20,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',