@symbiote-native/angular 2.0.1 → 3.0.0

package/src/elements.ts

@@ -36,6 +36,7 @@ import {
   ChangeDetectorRef,
   Directive,
   ElementRef,
+  ErrorHandler,
   EventEmitter,
   Input,
   Output,
@@ -52,10 +53,12 @@ import type {
 import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
 import { VALUE_CHANGE_EVENT } from './renderer/value-change';
 import {
-  createCallbackWrapper,
   registerViewFlush,
   unregisterViewFlush,
 } from './change-detection-flush';
+import { SymbioteCallbackHost } from './callback-host';
+import { withholdFromRuntimeMatching } from './runtime-matching';
+import { SymbioteStyleHost } from './style-host';
 import type {
   IActivityIndicatorProps,
   IImageProps,
@@ -89,21 +92,25 @@ import type { IAngularScrollViewProps } from './components/scroll-view-props';
  * — so without this loop a bare tag commits nothing at all. It stays generic on purpose: per-prop
  * forwarding code is a component wrapper by another name, which is what this migration removes.
  * `renderer.setProperty` lands in the adapter's own renderer, which routes the value through the
- * engine's `routeProp` and applies the `id` -> `nativeID` and `symbioteStyle` -> `style` aliases.
+ * engine's `routeProp` and applies the `id` -> `nativeID` alias.
  */
 @Directive()
 export abstract class SymbioteElement implements OnChanges {
   private readonly renderer = inject(Renderer2);
   protected readonly host = inject(ElementRef);
-  protected readonly detector = inject(ChangeDetectorRef);
 
-  // An `onX` PROP is called by the engine, so Angular is never told it fired. Shared with the
-  // component path's `SymbioteHostPropsDirective`, which has the identical deficit — see
-  // `createCallbackWrapper`.
-  private readonly wrapCallback = createCallbackWrapper(
-    this.detector,
-    this.host.nativeElement,
-  );
+  // NO `ChangeDetectorRef` HERE, and its absence is the point. This class is instantiated once per
+  // ELEMENT, so injecting one cost ~1.0-2.4 us on every tag of a screen to serve the few that carry
+  // an `on*` prop — ten thousand `ViewRef`s on a thousand-row create, read by none of them
+  // (`core/engine/cpp/tests/js/angular-directive-cost.itest.ts`). `SymbioteCallbackHost` owns one and
+  // MATCHES on the callback attributes instead, registering it against the node; `markViewFor` is how
+  // the wrapper reaches it. The inputs did not move, so nothing about this file's public surface did.
+
+  // THE `on*` WRAPPER LEFT THIS CLASS on 2026-09-18, for `SymbioteRenderer.setProperty`. Most of
+  // these directives are withheld from runtime matching now (`./runtime-matching`), so a binding
+  // reaches the renderer through `ɵɵproperty` without passing through any directive — a wrapper that
+  // lives here would simply stop running. The renderer is reached by every path, which is the home it
+  // should have had.
 
   @Input() testID?: IElementProps['testID'];
   @Input() nativeID?: IElementProps['nativeID'];
@@ -183,7 +190,6 @@ export abstract class SymbioteElement implements OnChanges {
   @Input() shouldRasterizeIOS?: IElementProps['shouldRasterizeIOS'];
   @Input()
   needsOffscreenAlphaCompositing?: IElementProps['needsOffscreenAlphaCompositing'];
-  @Input() symbioteStyle?: IElementProps['symbioteStyle'];
   // Declared, and the reason is the one `element-props.ts` used to give for NOT declaring it —
   // reversed by measurement. `[style]` on an element with no directive input reaches Angular's own
   // CSS styling engine (`ɵɵstyleMap`), which cannot represent an RN StyleProp: an ARRAY decomposes
@@ -205,6 +211,25 @@ export abstract class SymbioteElement implements OnChanges {
   // in what commits.
   @Input() style?: IElementProps['style'];
 
+  /**
+   * Declared so Angular SHADOWS the `[class]` binding into it instead of decomposing the string.
+   *
+   * A styling binding goes to a directive input when the directive declares that exact public name
+   * — `setShadowStylingInputFlags` sets `hasClassInput`/`hasStyleInput` off the input map, and
+   * `checkStylingMap` then hands the whole value over and never calls the renderer per key
+   * (`view/directives.ts`, `instructions/styling.ts`). `style` has been declared here all along and
+   * is shadowed; `class` was not, so every `[class]` reached the renderer one TOKEN at a time — on
+   * the element-directive path as much as the bare one. Measured at ~3.3 us per class binding
+   * (`adapter-create-cost.itest.ts`, "prices the class channel"), on the channel every example app
+   * uses for its static look.
+   *
+   * `[class.foo]` and `[ngClass]` are NOT shadowed and keep arriving as `addClass`, so a node can
+   * now be told its classes both ways at once; the renderer unions the two sources
+   * (`classStringFor`). Typed as a string rather than RN's `className`, because that is what
+   * `ɵɵclassMap` hands over after it concatenates any static `class=` prefix.
+   */
+  @Input() class?: string;
+
   // The flat-bag spelling of the events below. `(press)` and `[onPress]` are both supported and
   // land in the same place; an app that already holds a handler bag binds the props.
   @Input() onPress?: IElementProps['onPress'];
@@ -221,7 +246,9 @@ export abstract class SymbioteElement implements OnChanges {
       this.renderer.setProperty(
         this.host.nativeElement,
         name,
-        this.wrapCallback(name, changes[name]?.currentValue),
+        // Unwrapped on purpose: `SymbioteRenderer.setProperty` is where an `on*` value is wrapped
+        // now, and it is the call this line makes.
+        changes[name]?.currentValue,
       );
     }
   }
@@ -239,11 +266,40 @@ export abstract class SymbioteElement implements OnChanges {
  */
 @Directive()
 abstract class ReadBackElement extends SymbioteElement implements OnDestroy {
+  // ITS OWN, now that the base has none. Three tags reach this class, so the injection is paid where
+  // it is read instead of on every element of a screen.
+  private readonly detector = inject(ChangeDetectorRef);
+  private readonly errorHandler = inject(ErrorHandler);
+
   constructor() {
     super();
     const node: unknown = this.host.nativeElement;
     if (typeof node === 'object' && node !== null) {
-      registerViewFlush(node, () => this.detector.detectChanges());
+      registerViewFlush(node, () => this.flush());
+    }
+  }
+
+  // REPORTED, NOT RETHROWN, and it is Angular's own contract rather than a swallow. Every other
+  // change detection in an app runs inside `ApplicationRef.tick()`, which catches and hands the
+  // error to `ErrorHandler` — `render/index.ts` provides `SymbioteErrorHandler` for exactly that,
+  // after an unprovided token once turned every async tick exception into a hard crash. This flush
+  // is the ONE change detection that runs outside that boundary: the engine calls it from inside a
+  // native event dispatch, where a throw has nowhere to go but `RCTFatal`.
+  //
+  // Device-diagnosed 2026-09-20 on ApiPlaygroundScreen. `PlaygroundLifecycleLogger` emits from
+  // `ngDoCheck`/`ngAfterContentChecked`/`ngAfterViewChecked` and the screen's handler writes a
+  // signal its own template reads, so the view re-dirties itself on every pass and
+  // `detectChangesInViewWhileDirty` throws NG0103 after MAXIMUM_REFRESH_RERUNS. The scheduler's own
+  // ticks were already hitting it and reporting it quietly; the first KEYSTROKE took the same throw
+  // through here and killed the app — `Terminating app due to uncaught exception
+  // 'RCTFatalException: Unhandled JS Exception: Error: NG0103'`, with no redbox because Release has
+  // none. So the app bug is the app's, and a flush that turns a reported error into a fatal one is
+  // ours: a keystroke must not be stricter than a tick.
+  private flush(): void {
+    try {
+      this.detector.detectChanges();
+    } catch (error: unknown) {
+      this.errorHandler.handleError(error);
     }
   }
 
@@ -253,13 +309,31 @@ abstract class ReadBackElement extends SymbioteElement implements OnDestroy {
   }
 }
 
-@Directive({ selector: 'view', standalone: true })
+// BOTH SPELLINGS ON THE SEVEN DASHLESS TAGS, and it is a correctness fix rather than a convenience.
+//
+// The renderer has always mapped `symbiote-view` onto `view` (`PRIMITIVE_SELECTOR_ALIAS`), because
+// `CUSTOM_ELEMENTS_SCHEMA` admits an unknown element only when the name carries a hyphen — so the
+// hyphenated form is the spelling an app WITHOUT these directives has to use. It is the same tag and
+// commits the same node.
+//
+// It was not the same tag HERE. A selector of `view` alone meant an app that imports
+// `SYMBIOTE_ELEMENTS` and writes `<symbiote-view>` matched nothing: no type check on its props, no
+// declared inputs, none of `SymbioteElement`'s forwarding or callback wrapping — silently, with the
+// tree still looking right. Measured, that shape also ran ~8.6 us per element FASTER, which is what
+// made it look like an optimization instead of a hole (`angular-directive-cost.itest.ts`).
+//
+// Only the seven dashless tags need it: `hyphenatedIntrinsicAliases` skips any tag that already
+// carries a dash, so `symbiote-scroll-view` resolves nowhere on either side and the two halves agree
+// already.
+@Directive({ selector: 'view, symbiote-view', standalone: true })
 export class ViewElement extends SymbioteElement {}
 
-@Directive({ selector: 'pressable', standalone: true })
+@Directive({ selector: 'pressable, symbiote-pressable', standalone: true })
 export class PressableElement extends SymbioteElement {
   @Input() disabled?: IAngularPressableProps['disabled'];
   @Input() cancelable?: IAngularPressableProps['cancelable'];
+  @Input()
+  blockNativeResponder?: IAngularPressableProps['blockNativeResponder'];
   @Input() delayLongPress?: IAngularPressableProps['delayLongPress'];
   @Input() delayHoverIn?: IAngularPressableProps['delayHoverIn'];
   @Input() delayHoverOut?: IAngularPressableProps['delayHoverOut'];
@@ -269,6 +343,9 @@ export class PressableElement extends SymbioteElement {
   pressRetentionOffset?: IAngularPressableProps['pressRetentionOffset'];
   @Input() unstable_pressDelay?: IAngularPressableProps['unstable_pressDelay'];
   @Input() android_ripple?: IAngularPressableProps['android_ripple'];
+  // ON THE BASE, so both touchables inherit it — the prop is Pressable's AND
+  // TouchableHighlight's upstream, and they extend this rather than repeat its surface.
+  @Input() testOnly_pressed?: IAngularPressableProps['testOnly_pressed'];
   @Input()
   android_disableSound?: IAngularPressableProps['android_disableSound'];
   @Input() hasTVPreferredFocus?: IAngularPressableProps['hasTVPreferredFocus'];
@@ -300,6 +377,8 @@ export class TouchableHighlightElement extends PressableElement {
   @Input() delayPressIn?: number;
   @Input() delayPressOut?: number;
   @Input() minPressDuration?: number;
+  // TouchableHighlight.js:205 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
 }
 
 // RN's TouchableNativeFeedback is a Pressable that CLONES onto its single child instead of
@@ -310,6 +389,8 @@ export class TouchableHighlightElement extends PressableElement {
 export class TouchableNativeFeedbackElement extends PressableElement {
   @Input() background?: INativeFeedbackBackground;
   @Input() useForeground?: boolean;
+  // TouchableNativeFeedback.js:228 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
 }
 
 // RN's TouchableWithoutFeedback clones onto its single child the same way
@@ -321,19 +402,21 @@ export class TouchableWithoutFeedbackElement extends PressableElement {
   @Input() delayPressIn?: number;
   @Input() delayPressOut?: number;
   @Input() minPressDuration?: number;
+  // TouchableWithoutFeedback.js:199 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
 }
 
 // RN's Button IS a TouchableOpacity (Button.js:384), and the behavior builds the view and the
 // label under it — so the tag takes the touchable's surface plus the four props Button owns. There
 // is no `style`: RN's Button has no such prop, and the label/background come from `color`.
-@Directive({ selector: 'button', standalone: true })
+@Directive({ selector: 'button, symbiote-button', standalone: true })
 export class ButtonElement extends TouchableOpacityElement {
   @Input() title?: string;
   @Input() color?: string;
   @Input() touchSoundDisabled?: boolean;
 }
 
-@Directive({ selector: 'text', standalone: true })
+@Directive({ selector: 'text, symbiote-text', standalone: true })
 export class TextElement extends SymbioteElement {
   // Narrows the inherited input to a TEXT style so `fontSize`/`fontWeight` type-check here. The
   // initializer is what TS2612 asks for to accept a redeclaration as deliberate; `declare` would
@@ -350,7 +433,7 @@ export class TextElement extends SymbioteElement {
   @Input() disabled?: ITextElementProps['disabled'];
 }
 
-@Directive({ selector: 'image', standalone: true })
+@Directive({ selector: 'image, symbiote-image', standalone: true })
 export class ImageElement extends SymbioteElement {
   @Input() source?: IImageProps['source'];
   @Input() src?: IImageProps['src'];
@@ -499,7 +582,7 @@ export class HorizontalScrollContentElement extends SymbioteElement {}
  * obvious reading is wrong: the file header's "an `@Output` CONSUMES the binding" holds for a
  * COMPONENT, and an element is the other case — Angular attaches the renderer listener for the
  * event as well, so `Renderer2.listen` still runs and the engine still hears the change. Measured
- * under JIT by deleting this whole hook: every case in `lowered-two-way-value.test.ts` stayed
+ * under JIT by deleting this whole hook: every case in `renderer/two-way-value.test.ts` stayed
  * green, delivery included, and exactly ONCE (nothing double-fires when both paths exist).
  *
  * It is kept because the measurement is JIT-only and this adapter has a recorded case of JIT and
@@ -580,6 +663,7 @@ export class TextInputElement extends ValueChangeElement {
   @Input() textContentType?: ITextInputProps['textContentType'];
   @Input() underlineColorAndroid?: ITextInputProps['underlineColorAndroid'];
   @Input() onValueChange?: ITextInputProps['onValueChange'];
+  @Input() onChangeText?: ITextInputProps['onChangeText'];
   @Input() onContentSizeChange?: ITextInputProps['onContentSizeChange'];
   @Input() onEndEditing?: ITextInputProps['onEndEditing'];
   @Input() onKeyPress?: ITextInputProps['onKeyPress'];
@@ -604,16 +688,7 @@ export class TextInputElement extends ValueChangeElement {
 @Directive({ selector: 'text-input-multiline', standalone: true })
 export class MultilineTextInputElement extends TextInputElement {}
 
-// The COMPONENT path's spelling of the pair above — same native views, a tag the behavior registry
-// deliberately does not carry (`component-names/shared.ts`). Declared so the tag alphabet is
-// complete; an app writes the plain name.
-@Directive({ selector: 'text-input-managed', standalone: true })
-export class ManagedTextInputElement extends TextInputElement {}
-
-@Directive({ selector: 'text-input-multiline-managed', standalone: true })
-export class ManagedMultilineTextInputElement extends TextInputElement {}
-
-@Directive({ selector: 'switch', standalone: true })
+@Directive({ selector: 'switch, symbiote-switch', standalone: true })
 export class SwitchElement extends ValueChangeElement {
   @Input() value?: ISwitchProps['value'];
   @Input() disabled?: ISwitchProps['disabled'];
@@ -635,9 +710,6 @@ export class SwitchElement extends ValueChangeElement {
   }
 }
 
-@Directive({ selector: 'switch-managed', standalone: true })
-export class ManagedSwitchElement extends SwitchElement {}
-
 /**
  * `[(ngModel)]` / `formControlName` on a `<text-input>` or a `<switch>`.
  *
@@ -677,6 +749,21 @@ abstract class SymbioteValueAccessor
       this.host.nativeElement,
       VALUE_CHANGE_EVENT,
       (value: unknown) => {
+        // THE HALF THE DOM DOES FOR FREE, and without it a controlled input undoes every
+        // keystroke. `<text-input>`'s behavior re-commands the native text whenever `props.value`
+        // disagrees with what native last reported — that is what makes it controlled — and the
+        // read-back flush exists so the app's new value is on the node by the time the commit runs.
+        // @angular/forms does not reach the node in that window: `NgModel.ngOnChanges` defers
+        // `_updateValue` through `resolvedPromise.then`, so `writeValue` lands a MICROTASK after
+        // the flush, and the commit in between still reads the value from before the keystroke.
+        //
+        // In a browser there is nothing to do here: `input.value` already holds what the user
+        // typed. `node.props.value` is the same slot, and nothing else writes it — so the accessor
+        // mirrors it, which is the shape rather than a workaround. A later `writeValue` still wins,
+        // so an app that transforms or refuses the value keeps doing so, one microtask on.
+        //
+        // Device-reported 2026-09-20: every character snapped the field back to its mounted text.
+        this.setProp('value', value);
         fn(value);
       },
     );
@@ -716,8 +803,7 @@ export class TextInputValueAccessor extends SymbioteValueAccessor {
 }
 
 @Directive({
-  selector:
-    'switch[ngModel], switch[formControl], switch[formControlName], switch-managed[ngModel], switch-managed[formControl], switch-managed[formControlName]',
+  selector: 'switch[ngModel], switch[formControl], switch[formControlName]',
   standalone: true,
   providers: [
     {
@@ -753,7 +839,7 @@ export class ActivityIndicatorSpinnerElement extends ActivityIndicatorElement {}
 @Directive({ selector: 'safe-area-view', standalone: true })
 export class SafeAreaViewElement extends SymbioteElement {}
 
-@Directive({ selector: 'modal', standalone: true })
+@Directive({ selector: 'modal, symbiote-modal', standalone: true })
 export class ModalElement extends SymbioteElement {
   @Input() visible?: IModalViewProps['visible'];
   @Input() transparent?: IModalViewProps['transparent'];
@@ -824,10 +910,7 @@ export const SYMBIOTE_ELEMENTS = [
   HorizontalScrollContentElement,
   TextInputElement,
   MultilineTextInputElement,
-  ManagedTextInputElement,
-  ManagedMultilineTextInputElement,
   SwitchElement,
-  ManagedSwitchElement,
   ActivityIndicatorElement,
   ActivityIndicatorSpinnerElement,
   SafeAreaViewElement,
@@ -840,8 +923,46 @@ export const SYMBIOTE_ELEMENTS = [
   // provided, and `elements.test.ts` subtracts them from its tag-coverage check by name.
   TextInputValueAccessor,
   SwitchValueAccessor,
+  // Also not a tag: it matches on the callback ATTRIBUTES, so it lands only on the elements that
+  // bind one and carries the `ChangeDetectorRef` their wrapper needs. It rides this list for the same
+  // reason the accessors do, and `elements.test.ts` subtracts it from the tag-coverage check by name.
+  SymbioteCallbackHost,
+  // The other attribute-matched one: it claims `[style]` and `[class]` so an RN style ARRAY never
+  // reaches Angular's styling engine, which cannot represent one and throws. See `style-host.ts`.
+  SymbioteStyleHost,
 ] as const;
 
+// THE DIRECTIVES THAT GO ON MATCHING, and the list is the exceptions rather than the rule.
+//
+// A tag directive here is, with four exceptions, nothing but `@Input()` declarations over one
+// inherited `ngOnChanges` that forwards each of them to the renderer — which is the call
+// `ɵɵproperty` makes directly on an element nothing claimed. So the instance buys a compile-time
+// check at ~8.5-9.4 us of run time per element, and `./runtime-matching` keeps the check while
+// dropping the instance.
+//
+// These four cannot go, because they DO something when they are built:
+//
+//   text-input, text-input-multiline, switch   `ValueChangeElement` — listens for the engine's value
+//                                              event and registers a view flush, which is what stops
+//                                              a controlled value being undone inside one microtask
+//   refresh-control                            `ReadBackElement`, the same flush for the same reason
+//
+// The two form accessors and `SymbioteCallbackHost` are absent from both lists deliberately: they
+// match on an ATTRIBUTE rather than a tag, so they already land only where they are needed.
+withholdFromRuntimeMatching(
+  SYMBIOTE_ELEMENTS.filter(
+    directive =>
+      directive !== TextInputElement &&
+      directive !== MultilineTextInputElement &&
+      directive !== SwitchElement &&
+      directive !== RefreshControlElement &&
+      directive !== TextInputValueAccessor &&
+      directive !== SwitchValueAccessor &&
+      directive !== SymbioteCallbackHost &&
+      directive !== SymbioteStyleHost,
+  ),
+);
+
 // A prop this file forgets is not a silent gap — it is `Can't bind to 'x'` in the app that tries
 // it, which is the failure mode a hand-written list produces here. So the lists are checked
 // against the prop TYPES rather than trusted: each assertion below resolves to `true` only when

package/src/index.ts

@@ -4,6 +4,21 @@
 //
 // SEAM SCAFFOLD: mount/unmount + the renderer seam + host intrinsic selectors. Full RN-like
 // composed components still flow through the shared @symbiote-native/components bridge.
+//
+// `View` AND `Text` ARE NO LONGER WORTH IMPORTING, and on 2026-09-18 the examples stopped. They are
+// `@Component`s on the `view` and `text` SELECTORS — a second mechanism on the same tags
+// `SYMBIOTE_ELEMENTS` covers, kept for one stated reason their own header gives: "Declaring `style`
+// as a real Angular input prevents Angular's CSS style engine from decomposing RN `StyleProp`
+// arrays". `SymbioteStyleHost` does exactly that now, for every tag, at a directive's cost rather
+// than a component's.
+//
+// An app loses nothing it cannot spell better: `@ViewChild('ref')` on a template reference returns
+// Angular's own `ElementRef<IHostInstance>`, whose `nativeElement` IS the engine host node — the same
+// property the component exposed, reached without a component instance per element.
+//
+// They stay EXPORTED because the composed components render them and ngtsc resolves a component's
+// template dependencies to importable names (NG3004, the same rule that put the element directives
+// back below). Retiring them means retiring them from those nine components first.
 
 import './register';
 
@@ -123,10 +138,28 @@ export type {
 } from './components';
 export { setImageSourceResolver } from './components';
 // The element directives that make a HAND-WRITTEN intrinsic tag (`<view>`, `<text-input>`, ...)
-// compile under ngtsc with no schema, and with a real type on every declared prop. `imports:
-// [SYMBIOTE_ELEMENTS]` is the whole app-facing surface; the individual classes are exported for an
-// app that wants a narrower import. See `elements.ts`'s header for why a directive rather than
-// `CUSTOM_ELEMENTS_SCHEMA`/`NO_ERRORS_SCHEMA`.
+// compile under ngtsc with no schema, and with a real type on every declared prop. See `elements.ts`
+// for why a directive rather than `CUSTOM_ELEMENTS_SCHEMA`/`NO_ERRORS_SCHEMA`.
+//
+// `imports: [SYMBIOTE_ELEMENTS]` IS THE ONLY SUPPORTED SPELLING — and the individual classes are
+// exported anyway, because ngtsc requires it and a build proves it.
+//
+// They were removed on 2026-09-18 and put back the same hour. The reason to remove them is real: a
+// withheld tag directive (`./runtime-matching`) is a compile-time declaration and nothing else, so
+// what makes `<view [style]="[a, b]">` work at RUN time is `SymbioteStyleHost`, and what makes
+// `<view [onPress]="fn">` work at all is `SymbioteCallbackHost` claiming the name before
+// `setDomProperty` throws NG0306. Both ride this array. A narrow `imports: [ViewElement]` type-checks
+// and then fails on a device the first time the app writes an array style.
+//
+// WHAT PUTS THEM BACK is NG3004: `Unable to import directive ViewElement — the symbol is not
+// exported from index.d.ts`. ngtsc resolves every directive reachable through an imported array to an
+// IMPORTABLE NAME in the package's public types, so a class inside `SYMBIOTE_ELEMENTS` that the
+// barrel does not name breaks AOT for every screen that uses the array. The removal passed its own
+// vitest guard and every headless suite, and failed on the first real `ngc` run — the same
+// wrong-harness green this repo keeps finding.
+//
+// So the narrow spelling is DISCOURAGED and not prevented, and `elements-are-exported-for-aot.test.ts`
+// now asserts the opposite invariant: every member of the array is named here.
 export {
   SYMBIOTE_ELEMENTS,
   SymbioteElement,
@@ -138,9 +171,6 @@ export {
   ImageBackgroundElement,
   ImageElement,
   InputAccessoryViewElement,
-  ManagedMultilineTextInputElement,
-  ManagedSwitchElement,
-  ManagedTextInputElement,
   ModalElement,
   MultilineTextInputElement,
   PressableElement,
@@ -150,22 +180,25 @@ export {
   ScrollViewElement,
   StickyHeaderElement,
   SwitchElement,
+  SwitchValueAccessor,
   TextElement,
   TextInputElement,
-  // The `[(ngModel)]` / `formControl*` accessors for the two controlled tags — where the deleted
-  // wrappers' `NG_VALUE_ACCESSOR` went. Both ride `SYMBIOTE_ELEMENTS`; named separately for an app
-  // that imports narrowly.
-  SwitchValueAccessor,
   TextInputValueAccessor,
-  // The three the list omitted while their components still existed. These are now the ONLY
-  // replacements for their deleted components in an app's `imports`, so a narrower import has to be
-  // able to name them.
   TouchableHighlightElement,
   TouchableNativeFeedbackElement,
   TouchableOpacityElement,
   TouchableWithoutFeedbackElement,
   ViewElement,
 } from './elements';
+// `CALLBACK_ATTRIBUTE_SELECTOR` is exported so a MEASUREMENT can carry the real string rather than a
+// copy of it — the ladder in `core/engine/cpp/tests/js/angular-directive-cost.itest.ts` prices what
+// this selector costs to match, and a second copy there would price a different one the day either
+// drifts. The two host classes are exported for the same reason the array is: they are part of it.
+export {
+  CALLBACK_ATTRIBUTE_SELECTOR,
+  SymbioteCallbackHost,
+} from './callback-host';
+export { STYLE_HOST_SELECTOR, SymbioteStyleHost } from './style-host';
 export type {
   IElementProps,
   IStickyHeaderElementProps,

package/src/primitives/index.ts

@@ -3,16 +3,7 @@
 // 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,
-  Input,
-  type OnInit,
-  type SimpleChanges,
-} from '@angular/core';
-import {
-  resolveTextProps,
-  type IEllipsizeMode,
-} from '@symbiote-native/components';
+import { Component } from '@angular/core';
 import { SymbiotePrimitiveHost } from './shared';
 
 export {
@@ -31,46 +22,26 @@ 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.
+ * Text is an ORDINARY primitive host as of 2026-09-18, and the two `@Input()`s it used to declare
+ * are gone with the code that needed them.
  *
- * 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"`.
+ * They existed for one stated reason: a default can only be applied by code that can SEE whether the
+ * caller supplied a value, and a pass-through host binding is invisible to the component — so the
+ * defaults had to be applied where the inputs were readable. That argument was sound and it is now
+ * answered one layer down. The payload builder reads the AUTHORED bag, so it can tell an absent
+ * `ellipsizeMode` from an explicit `clip` without anyone declaring anything; the rule is keyed on the
+ * component (`foldTextDefaults`, `SymbioteFabricProps.cpp`) and reaches every `RCTText` however it
+ * was spelled.
+ *
+ * The pass-through is therefore the CORRECT path for both props now, and `text-defaults.test.ts`'s
+ * "never overwrites a value the caller supplied" is what proves the authored value still arrives.
  */
 @Component({
   selector: 'text',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
-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);
-  }
-}
+export class TextHost extends SymbiotePrimitiveHost {}
 
 @Component({
   selector: 'image',
@@ -107,9 +78,6 @@ 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: 'text-input',
   standalone: true,
@@ -124,20 +92,6 @@ export class TextInputHost extends SymbiotePrimitiveHost {}
 })
 export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
 
-@Component({
-  selector: 'text-input-managed',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class ManagedTextInputHost extends SymbiotePrimitiveHost {}
-
-@Component({
-  selector: 'text-input-multiline-managed',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class ManagedMultilineTextInputHost extends SymbiotePrimitiveHost {}
-
 @Component({
   selector: 'switch',
   standalone: true,
@@ -145,16 +99,6 @@ export class ManagedMultilineTextInputHost 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: 'switch-managed',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class ManagedSwitchHost extends SymbiotePrimitiveHost {}
-
 // The centering RCTView RN wraps the spinner in (ActivityIndicator.js:112), not the spinner —
 // which is what this tag resolved to until 2026-09-09. The native view moved to
 // `activity-indicator-spinner`, built by the engine's ActivityIndicator behavior, so nothing writes

package/src/primitives/shared.ts

@@ -10,10 +10,15 @@ import {
   type SimpleChanges,
 } from '@angular/core';
 import { countAngular } from '../diagnostics';
-import { createCallbackWrapper } from '../change-detection-flush';
+import {
+  createCallbackWrapper,
+  registerViewMarker,
+  type ICallbackWrapper,
+} from '../change-detection-flush';
 import {
   flattenStyle,
   isSymbioteNode,
+  propOf,
   type IHostInstance,
   type IStyleProp,
 } from '@symbiote-native/engine';
@@ -43,7 +48,7 @@ import {
  */
 export function anchorHostStyle(elementRef: ElementRef<unknown>): unknown {
   const node = elementRef.nativeElement;
-  return isSymbioteNode(node) ? node.props.style : undefined;
+  return isSymbioteNode(node) ? propOf(node, 'style') : undefined;
 }
 
 // anchorHostStyle returns `unknown` (it reads whatever already resolved onto the anchor node's
@@ -259,10 +264,20 @@ export class SymbioteHostPropsDirective {
   // binds its result: the "pan does nothing" bug. Shared with the TAG path's `SymbioteElement`,
   // which has the identical deficit; the mechanism, the `onScroll` exemption and why the wrapper
   // is cached per original handler live in `createCallbackWrapper`.
-  private readonly wrapCallback = createCallbackWrapper(
-    this.cdr,
-    this.elementRef.nativeElement,
-  );
+  //
+  // THE REF REACHES THE WRAPPER BY THE NODE NOW, not as an argument. `SymbioteElement` stopped
+  // injecting one per element — it was ~1-2.4 us on every tag of a screen to serve the few that carry
+  // a callback — so `createCallbackWrapper` looks its marker up in `markViewFor`. This directive
+  // keeps its own injection because it is matched by an ATTRIBUTE a composed component writes
+  // deliberately, not by every element, and registers it here for the same node the wrapper holds.
+  private readonly wrapCallback = this.registerMarkerAndWrap();
+
+  private registerMarkerAndWrap(): ICallbackWrapper {
+    const node: unknown = this.elementRef.nativeElement;
+    if (typeof node === 'object' && node !== null)
+      registerViewMarker(node, this.cdr);
+    return createCallbackWrapper(node);
+  }
 
   // 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.