@symbiote-native/angular 0.8.0 → 1.0.0

package/src/gate-demand.ts

@@ -0,0 +1,109 @@
+// Whether anything downstream actually wants a gated accessibility event, passed from a wrapper
+// component to the inner component that owns the gate.
+//
+// THE PROBLEM. Six Fabric events fire only if a BOOLEAN prop reaches the payload
+// (`.claude/rules/fabric-boolean-event-gates.md`), and the flag follows the VALUE: a handler
+// present means `true`, absent means the key is deleted. Every component that owns such a gate
+// therefore writes it only while its own `@Output()` is `.observed`.
+//
+// Angular has no conditional template binding, so a wrapper rendering an inner component must write
+// `(accessibilityAction)="accessibilityAction.emit($event)"` unconditionally — which subscribes,
+// which makes the inner's `.observed` permanently true, which lights the flag on EVERY instance
+// whether or not any app listens. Fixing the inner component does nothing: the wrapper is the
+// subscriber. The chain is up to four deep here (SectionList -> VirtualizedSectionList ->
+// VirtualizedList -> ScrollView), and every middle link has the same problem for the same reason.
+//
+// WHY THIS IS DI AND NOT AN `@Input`. An input is public API. An app could write
+// `[gatedEvents]="…"` on a `Pressable` and silently switch its accessibility events OFF — a change
+// nothing in this repo could detect and nothing on screen would show. A `viewProviders` entry is
+// not part of the component's binding surface, so an app cannot reach it by accident.
+//
+// WHY `viewProviders` AND NOT `providers` — measured, both arms, 2026-09-02:
+//
+//   viewProviders   the wrapper's OWN template sees it, projected content does NOT
+//   providers       both see it
+//
+// The second half is what matters: an app writing `<TouchableOpacity><Pressable/></TouchableOpacity>`
+// projects its own Pressable INTO the wrapper, and that Pressable must behave exactly as it would
+// standing alone. Under `providers` it would inherit the wrapper's demand and the debt would just
+// move one level down.
+//
+// Verified on both rungs — JIT through `mount()`, and again by executing the artifact from a real
+// `ngc --compilationMode partial` + `babel-linker.cjs` chain, because `viewProviders` compiles into
+// the component definition (`ɵɵProvidersFeature`) and this repo has a recorded case of JIT and AOT
+// disagreeing on a compiled binding (`.claude/rules/test-harness-false-greens.md` §21/§21a). Both
+// arms reported the same four cells.
+import {
+  EventEmitter,
+  InjectionToken,
+  forwardRef,
+  inject,
+} from '@angular/core';
+import type { Provider, Type } from '@angular/core';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+
+// The four `on*`-gated accessibility events every wrapper forwards. Not the full gate list from the
+// engine: `layout` and `textLayout` are never forwarded wrapper-to-wrapper, and
+// KeyboardAvoidingView READS its own `onLayout` internally, so gating that one on a subscriber
+// would break inset-following (`.claude/rules/keyboard-avoiding-view-rn-contract.md`).
+export const GATED_ACCESSIBILITY_EVENTS = [
+  'accessibilityAction',
+  'accessibilityTap',
+  'magicTap',
+  'accessibilityEscape',
+] as const;
+
+export type IGatedAccessibilityEvent =
+  (typeof GATED_ACCESSIBILITY_EVENTS)[number];
+
+export interface IGateDemand {
+  wantsGate(name: IGatedAccessibilityEvent): boolean;
+}
+
+export const GATE_DEMAND = new InjectionToken<IGateDemand>(
+  'symbiote.gate-demand',
+);
+
+/**
+ * Declare a wrapper as the demand for everything in its own template.
+ *
+ * Takes a THUNK rather than the class: the entry sits in the decorator of the very class it names,
+ * so the reference has to be late.
+ */
+export function provideGateDemand(get: () => Type<IGateDemand>): Provider {
+  return { provide: GATE_DEMAND, useExisting: forwardRef(get) };
+}
+
+/**
+ * For a component that OWNS a gate — the innermost one, which writes the flag.
+ */
+export function injectGateDemand(): IGateDemand | null {
+  return inject(GATE_DEMAND, { optional: true });
+}
+
+/**
+ * For a component that PROVIDES demand and is itself wrapped.
+ *
+ * `skipSelf` is not optional here: a component resolves its own `viewProviders`, so without it the
+ * lookup reaches this class's own `useExisting` entry and Angular throws NG0200 at construction.
+ * Loud rather than silent, but the shape is easy to get wrong, which is why the two lookups are
+ * separate functions instead of one with a flag.
+ */
+export function injectGateDemandAbove(): IGateDemand | null {
+  return inject(GATE_DEMAND, { optional: true, skipSelf: true });
+}
+
+/**
+ * The one expression both roles evaluate.
+ *
+ * A demand from above OVERRIDES the local emitter, and that override is the whole mechanism: a
+ * middle link's own emitter is `.observed` precisely because the level above bound it, so answering
+ * from it would report "wanted" for a chain nobody subscribed to.
+ */
+export function gateWanted(
+  above: IGateDemand | null,
+  name: IGatedAccessibilityEvent,
+  own: EventEmitter<ISymbioteEvent>,
+): boolean {
+  return above !== null ? above.wantsGate(name) : own.observed;
+}

package/src/index.ts

@@ -5,6 +5,8 @@
 // SEAM SCAFFOLD: mount/unmount + the renderer seam + host intrinsic selectors. Full RN-like
 // composed components still flow through the shared @symbiote-native/components bridge.
 
+import './register';
+
 export {
   ActivityIndicator,
   anchorHostStyle,

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

@@ -53,8 +53,10 @@ import {
   IMAGE_INPUTS,
   IMAGE_OUTPUTS,
   ImageBase,
+  isImageEventCallback,
   resolveImageProps,
 } from '../../components/image/shared';
+import type { IGatedAccessibilityEvent } from '../../gate-demand';
 import { SectionList } from '../../components/section-list';
 import { AnimatedLeafBinder } from './animated-leaf-binder';
 
@@ -244,10 +246,6 @@ export class AnimatedText extends AnimatedComponentBase {}
   template: `
     <symbiote-image
       [symbioteHostProps]="animatedImageProps"
-      (accessibilityAction)="handleAccessibilityAction($event)"
-      (accessibilityTap)="handleAccessibilityTap($event)"
-      (magicTap)="handleMagicTap($event)"
-      (accessibilityEscape)="handleAccessibilityEscape($event)"
       (loadStart)="handleLoadStart($event)"
       (load)="handleLoad($event)"
       (loadEnd)="handleLoadEnd($event)"
@@ -283,6 +281,18 @@ export class AnimatedImage
   );
   private viewReady = false;
 
+  private gateInto(
+    props: Record<string, unknown>,
+    name: IGatedAccessibilityEvent,
+    key: string,
+  ): void {
+    const carried = props[key];
+    props[key] = this.gatedAccessibilityHandler(
+      name,
+      isImageEventCallback(carried) ? carried : undefined,
+    );
+  }
+
   get animatedImageProps(): Record<string, unknown> {
     const reduced = reduceProps(this.mergedProps());
     const passthroughStyle = readPassthroughStyle(
@@ -296,6 +306,15 @@ export class AnimatedImage
     }
     const resolved = resolveImageProps(reduced);
     resolved['style'] = [anchorHostStyle(this.elementRef), resolved['style']];
+    // The four gated accessibility events, which used to be template bindings on the host tag and
+    // therefore lit their Fabric flags on every AnimatedImage in the app
+    // (`.claude/rules/fabric-boolean-event-gates.md`). Routed through the base's gate instead, so
+    // both channels still reach the app — the `onX` callback carried in the animated prop bag, and
+    // the `@Output()` an app may bind on <AnimatedImage> (IMAGE_OUTPUTS declares all four).
+    this.gateInto(resolved, 'accessibilityAction', 'onAccessibilityAction');
+    this.gateInto(resolved, 'accessibilityTap', 'onAccessibilityTap');
+    this.gateInto(resolved, 'magicTap', 'onMagicTap');
+    this.gateInto(resolved, 'accessibilityEscape', 'onAccessibilityEscape');
     return resolved;
   }
 

package/src/primitives/index.ts

@@ -32,7 +32,7 @@ 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
+ * `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
@@ -107,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,
@@ -121,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,
@@ -128,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/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

@@ -62,7 +62,9 @@ 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');
+  // '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),
   );

package/src/renderer/index.ts

@@ -18,6 +18,7 @@ import {
   removeChild,
   routeProp,
   setEventListener,
+  setProp,
   setText,
   toPublicInstance,
   RAW_TEXT_COMPONENT,
@@ -25,6 +26,7 @@ import {
   type ISymbioteNode,
 } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
+import { foldHostBag } from '@symbiote-native/components/fold-host-bag';
 import type { Renderer2, RendererFactory2, RendererType2 } from '@angular/core';
 import { isAnchorHostComponent } from '../anchor-host-registry';
 import {
@@ -55,6 +57,64 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 
+// RN's Text.js applies two defaults on the way to native (core/components/host-primitives.cjs's
+// `Text.defaults`; the authority on what they MEAN is core/components/src/text-props.ts's
+// resolveTextProps, which the composed `Text` @Component already calls). That component's own
+// host paints directly (Text is not anchor-hosted — see the top-level "View/Text's own component
+// doesn't have this split" reasoning elsewhere in this file), so createElement runs for its INNER
+// symbiote-text node too; seeding here therefore covers both the composed Text and any bare
+// `symbiote-text` a future lowering emits, uniformly. Found missing 2026-08-31 (a cross-adapter
+// key-count diff against Vue's real BenchmarkRow.vue) — without this a lowered Text's
+// `numberOfLines` clips with no ellipsis, silently, on device only. Vue's renderer already does
+// this (`adapters/vue/src/renderer/index.ts`'s `seedTextDefaults`); Angular's simply never did.
+//
+// Sourced from `foldHostBag` (`@symbiote-native/components/fold-host-bag`, driven by
+// `HOST_PRIMITIVES.Text.defaults`) rather than a second hardcoded copy — React and Svelte call the
+// same function directly; this used to be a THIRD, independent restatement of the same two
+// defaults, with nothing to catch it drifting from the spec if a default's value ever changed.
+// `foldHostBag('symbiote-text', {})` on an EMPTY bag folds every default with no authored value to
+// override it (the alias loop has nothing to fold — `id` is only rewritten when present), which is
+// exactly the seed this function needs.
+function seedTextDefaults(node: ISymbioteNode): void {
+  const seeded = foldHostBag('symbiote-text', {});
+  for (const [key, value] of Object.entries(seeded)) setProp(node, key, value);
+}
+
+// An explicit `undefined` must NOT clear one of those defaults — RN treats a missing prop and an
+// explicit undefined alike, and only a literal `false` opts allowFontScaling out. Reached only
+// when a later write clears a key back to undefined, so it costs nothing on the common path.
+// `foldHostBag` folds every Text default when called this way (not just `key`), because its
+// contract is "fold a whole bag" — the extra key computed alongside `key` is simply unread here.
+function textDefaultFor(el: IHostElement, key: string): unknown {
+  if (isSurface(el) || !el.isText) return undefined;
+  return foldHostBag('symbiote-text', { [key]: undefined })[key];
+}
+
+// RN's `id` is the modern W3C-named alias for `nativeID` (core/components/host-primitives.cjs's
+// `ID_ALIAS`) — View.js/Text.js copy it over unconditionally, so the two name ONE native prop.
+// React/Solid/Svelte fold it in a wrapper or transform; Angular had it nowhere, so `<View
+// id="x">`/`[id]="x"` reached Fabric with an unknown `id` key and no `nativeID` — silently, on
+// device only. Lives in the renderer (mirroring Vue's `PROP_ALIASES`) so it covers every path
+// that can set a prop — `setAttribute`, `setProperty`, and (should a future lowering emit one) a
+// hand-built call — not just the composed component's own `id` @Input.
+// `symbioteStyle` is what the lowering transform emits in place of `[style]`: Angular routes a
+// `style` binding to its own CSS styling engine, which cannot represent an RN StyleProp (an array
+// throws inside change detection). Under any other name it is an ordinary property binding and
+// arrives here.
+// Angular's two-way sugar `[(value)]` compiles to a `(valueChange)` binding; the engine knows the
+// same fold as the function prop `onValueChange`. See `listen()`.
+const VALUE_CHANGE_EVENT = 'valueChange';
+const VALUE_CHANGE_PROP = 'onValueChange';
+
+const PROP_ALIASES: ReadonlyMap<string, string> = new Map([
+  ['id', 'nativeID'],
+  ['symbioteStyle', 'style'],
+]);
+
+function aliasedPropName(name: string): string {
+  return PROP_ALIASES.get(name) ?? name;
+}
+
 // Diagnostic-only: tags each anchor with a sequential id so log lines can tell distinct
 // anchors apart (they all otherwise print the same generic '#anchor' component name).
 // Gated behind isDebug() so a production build pays zero cost (no WeakMap writes).
@@ -92,6 +152,10 @@ const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
 // Inserting a bare raw-text node anywhere but inside a <Text> is invalid in Fabric (a
 // stray RCTRawText would paint). Angular's ɵɵtext only ever lands text inside a <Text>,
 // but guard anyway for parity with the Vue adapter and to fail loudly on a bad template.
+// `removeScrollViewProjectedChild` takes a remove callback and uses it only when the child turns
+// out to be projected, which almost none are — so the engine's own `removeChild` is passed by
+// reference rather than wrapped in an arrow. The wrapper was allocated on EVERY removed node:
+// 10 000 closures on a Clear whose engine window is 0.1 ms.
 function assertTextPlacement(child: ISymbioteNode, parent: IHostElement): void {
   if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
     throw new Error(
@@ -119,22 +183,37 @@ export class SymbioteRenderer implements Renderer2 {
     // name for a native leaf. Public aliases are normalized to their engine primitive name
     // before descriptor lookup. descriptorFor resolves it; an unknown `symbiote-*` is a typo,
     // any other string flows through as a raw Fabric name (events/processors derived from its
-    // ViewConfig). toPublicInstance grafts the imperative API (measure / setNativeProps /
-    // focus) onto the raw node in place, returning the SAME identity the commit mirror keys on.
+    // ViewConfig). The imperative API (measure / setNativeProps / focus) is on the node's
+    // prototype, so toPublicInstance hands back the SAME identity the commit mirror keys on.
     countAngular('nodesCreated');
     noteAngularCreate(name);
     const engineName = PRIMITIVE_SELECTOR_ALIAS[name] ?? name;
+
     if (isAnchorHostComponent(engineName)) {
       const anchor = tagAnchorForDebug(createAnchor());
-      dlog(
-        `angular createElement ${name} -> anchor host ${describeHost(anchor)}`,
-      );
+      if (isDebug()) {
+        dlog(
+          `angular createElement ${name} -> anchor host ${describeHost(anchor)}`,
+        );
+      }
       return anchor;
     }
 
     const descriptor = descriptorFor(engineName);
-    const node = createElement(descriptor.component, descriptor.isText);
-    dlog(`angular createElement ${name} -> ${descriptor.component}`);
+    // The tag, not just the resolved Fabric name: the host-behavior registry is keyed by the
+    // INTRINSIC tag (host-behavior.ts's own comment), and a node only ever carries the resolved
+    // name afterward. Omitting this argument means attachHostBehavior looks up the WRONG key
+    // (e.g. 'RCTView') and any registered behavior silently never attaches — Vue's renderer
+    // already passes this correctly (`createElement(descriptor.component, descriptor.isText, type)`).
+    const node = createElement(
+      descriptor.component,
+      descriptor.isText,
+      engineName,
+    );
+    if (descriptor.isText) seedTextDefaults(node);
+    if (isDebug()) {
+      dlog(`angular createElement ${name} -> ${descriptor.component}`);
+    }
     return toPublicInstance(node);
   }
 
@@ -144,7 +223,9 @@ export class SymbioteRenderer implements Renderer2 {
     // Vue createComment path.
     countAngular('nodesCreated');
     const anchor = tagAnchorForDebug(createAnchor());
-    dlog(`Angular renderer createComment -> ${describeHost(anchor)}`);
+    if (isDebug()) {
+      dlog(`Angular renderer createComment -> ${describeHost(anchor)}`);
+    }
     return anchor;
   }
 
@@ -161,15 +242,19 @@ export class SymbioteRenderer implements Renderer2 {
     countAngular('nodesInserted');
     assertTextPlacement(newChild, parent);
     if (isSurface(parent)) {
-      dlog(
-        `Angular renderer appendChild parent=surface child=${describeHost(newChild)}`,
-      );
+      if (isDebug()) {
+        dlog(
+          `Angular renderer appendChild parent=surface child=${describeHost(newChild)}`,
+        );
+      }
       parent.appendChild(newChild);
     } else {
       const projection = getScrollViewProjection(parent);
-      dlog(
-        `Angular renderer appendChild parent=${describeHost(parent)} child=${describeHost(newChild)} projection=${projection !== undefined}`,
-      );
+      if (isDebug()) {
+        dlog(
+          `Angular renderer appendChild parent=${describeHost(parent)} child=${describeHost(newChild)} projection=${projection !== undefined}`,
+        );
+      }
       if (projection !== undefined) {
         projection.appendProjectedChild(parent, newChild, (target, child) =>
           appendChild(target, child),
@@ -190,16 +275,20 @@ export class SymbioteRenderer implements Renderer2 {
     countAngular('nodesInserted');
     assertTextPlacement(newChild, parent);
     if (isSurface(parent)) {
-      dlog(
-        `Angular renderer insertBefore parent=surface child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'}`,
-      );
+      if (isDebug()) {
+        dlog(
+          `Angular renderer insertBefore parent=surface child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'}`,
+        );
+      }
       if (refChild) parent.insertBefore(newChild, refChild);
       else parent.appendChild(newChild);
     } else {
       const projection = getScrollViewProjection(parent);
-      dlog(
-        `Angular renderer insertBefore parent=${describeHost(parent)} child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'} projection=${projection !== undefined}`,
-      );
+      if (isDebug()) {
+        dlog(
+          `Angular renderer insertBefore parent=${describeHost(parent)} child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'} projection=${projection !== undefined}`,
+        );
+      }
       if (projection !== undefined) {
         projection.insertProjectedChild(
           parent,
@@ -224,16 +313,15 @@ export class SymbioteRenderer implements Renderer2 {
     // surface.children with no parent). Angular's `parent` arg is ignored in favor of the
     // authoritative link, mirroring the Vue adapter's remove.
     countAngular('nodesRemoved');
-    const angularParent = _parent !== null ? describeHost(_parent) : 'null';
-    const retainedParent =
-      oldChild.parent !== undefined ? describeHost(oldChild.parent) : 'none';
-    const wasProjected = removeScrollViewProjectedChild(
-      oldChild,
-      (parent, child) => removeChild(parent, child),
-    );
-    dlog(
-      `Angular renderer removeChild angularParent=${angularParent} retainedParent=${retainedParent} child=${describeHost(oldChild)} viaProjection=${wasProjected}`,
-    );
+    const wasProjected = removeScrollViewProjectedChild(oldChild, removeChild);
+    if (isDebug()) {
+      const angularParent = _parent !== null ? describeHost(_parent) : 'null';
+      const retainedParent =
+        oldChild.parent !== undefined ? describeHost(oldChild.parent) : 'none';
+      dlog(
+        `Angular renderer removeChild angularParent=${angularParent} retainedParent=${retainedParent} child=${describeHost(oldChild)} viaProjection=${wasProjected}`,
+      );
+    }
     if (!wasProjected) {
       const parent = oldChild.parent;
       if (parent !== undefined) removeChild(parent, oldChild);
@@ -278,7 +366,7 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     countAngular('rendererWrites');
     noteAngularWrite(name);
-    routeProp(el, name, value);
+    routeProp(el, aliasedPropName(name), value);
     this.surface.requestCommit();
   }
 
@@ -286,7 +374,8 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     countAngular('rendererWrites');
     noteAngularWrite(name);
-    routeProp(el, name, undefined);
+    const aliased = aliasedPropName(name);
+    routeProp(el, aliased, textDefaultFor(el, aliased));
     this.surface.requestCommit();
   }
 
@@ -353,7 +442,12 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     countAngular('rendererWrites');
     noteAngularWrite(name);
-    routeProp(el, name, value);
+    const aliased = aliasedPropName(name);
+    routeProp(
+      el,
+      aliased,
+      value === undefined ? textDefaultFor(el, aliased) : value,
+    );
     this.surface.requestCommit();
   }
 
@@ -362,7 +456,9 @@ export class SymbioteRenderer implements Renderer2 {
     noteAngularWrite('#text');
     // A useful permanent seam: text mutations are low-frequency and the one place a stale
     // `{{binding}}` (a change-detection gap) shows up as "the setValue never fired".
-    dlog(`Angular renderer setValue "${value}" on ${describeHost(node)}`);
+    if (isDebug()) {
+      dlog(`Angular renderer setValue "${value}" on ${describeHost(node)}`);
+    }
     setText(node, value);
     this.surface.requestCommit();
   }
@@ -377,6 +473,20 @@ export class SymbioteRenderer implements Renderer2 {
     callback: (event: unknown) => boolean | void,
   ): () => void {
     if (!isSymbioteNode(target)) return () => {};
+    // `[(value)]` desugars to `(valueChange)`, which is the spelling every Angular template writes
+    // for a Switch or a TextInput. On the COMPONENT path it is an `@Output()` the wrapper derives
+    // from the raw `change` payload; on a LOWERED element there is no component, and registering
+    // `valueChange` as an engine event would wait forever for a Fabric event of that name.
+    //
+    // The lowered path already carries the same fold under RN's own spelling: both behaviors call
+    // `node.props.onValueChange(value, event)` — a plain function PROP, not an event
+    // (`behaviors/switch.ts`, `behaviors/text-input.ts`). So this is a rename, not a mechanism:
+    // route the binding to that prop and `[(value)]` behaves identically on both paths. Without it
+    // the transform had to refuse to lower the two primitives whose idiomatic spelling this is.
+    if (eventName === VALUE_CHANGE_EVENT) {
+      routeProp(target, VALUE_CHANGE_PROP, callback);
+      return () => routeProp(target, VALUE_CHANGE_PROP, undefined);
+    }
     setEventListener(target, eventName, callback);
     return () => setEventListener(target, eventName, undefined);
   }

package/src/state-style.ts

@@ -0,0 +1,39 @@
+// Re-export only. The implementation is shared (`@symbiote-native/components`) because two adapters
+// had written byte-identical copies; this file exists so the code a transform EMITS keeps importing
+// from the adapter package the app already depends on, rather than reaching past it.
+//
+// Imported from the SUBPATH, not the barrel: every adapter barrel re-exports
+// `@symbiote-native/components` wholesale, so a name on that barrel silently becomes public API on
+// all five — which is how a transform internal nearly shipped as a supported export.
+//
+// Present on every adapter, including those with no lowering transform yet: a per-framework subpath
+// that four of five declare is exactly the silent gap `tests/package-subpath-parity.test.ts` exists
+// to catch, and the file costs a re-export. Deliberately NOT on the public barrel — the emitted
+// code names it, app code does not.
+export {
+  resolveStateStyle,
+  type IPressStateArgument,
+  type IResolvedStateStyle,
+} from '@symbiote-native/components/state-style';
+
+// Angular-only addition to this otherwise byte-identical file: a template expression can call a
+// PIPE, never an arbitrary imported function — `resolveStateStyle(x)` in a template resolves as
+// `ctx.resolveStateStyle(x)`, a component-instance method lookup, which the lowering transform has
+// no component to add one to (verified against the installed compiler-cli, 2026-09-01: the linker
+// compiles it straight to a `ctx.` property read with no error, so this fails at RUNTIME —
+// `ctx.resolveStateStyle is not a function` — not at compile time). A pipe is the one thing that
+// resolves through `dependencies` the way a component/directive does.
+//
+// `emitStyleExpressionOnce` still applies: the transform's `@let pair = (expr | resolveStateStyle);`
+// evaluates `expr` exactly once (verified via the compiled `ɵɵpipeBind1` call) and `pair.style` /
+// `pair.activeStyle` are two cheap reads of the local, never a second evaluation of `expr`.
+import { Pipe, type PipeTransform } from '@angular/core';
+import { resolveStateStyle as resolveStateStyleImpl } from '@symbiote-native/components/state-style';
+import type { IResolvedStateStyle } from '@symbiote-native/components/state-style';
+
+@Pipe({ name: 'resolveStateStyle', standalone: true })
+export class SymbioteStateStylePipe implements PipeTransform {
+  transform(value: unknown): IResolvedStateStyle {
+    return resolveStateStyleImpl(value);
+  }
+}