@symbiote-native/angular 0.8.0 → 2.0.0

package/src/primitives/shared.ts

@@ -10,6 +10,7 @@ import {
   type SimpleChanges,
 } from '@angular/core';
 import { countAngular } from '../diagnostics';
+import { createCallbackWrapper } from '../change-detection-flush';
 import {
   flattenStyle,
   isSymbioteNode,
@@ -108,18 +109,6 @@ export function stableAnchorStyle(
     : next;
 }
 
-const ON_PREFIX = /^on[A-Z]/;
-
-// The one `onX` that fires per FRAME rather than per gesture, and with sticky headers RN pins
-// `scrollEventThrottle` to 1 (ScrollView.js), so 60 times a second. Since markForCheck walks
-// RefreshView|Dirty to the ROOT, wrapping it cost one full ancestor-screen template execution per
-// frame - the canary's ~37fps scroll (components/virtualized-list/scroll-cost.test.ts).
-//
-// Nothing lost its refresh: VirtualizedList marks itself when the window moves, sticky rides the
-// native driver, and a caller's own handler is typically an Animated.event touching no Angular
-// state. Drag/momentum begin/end stay wrapped - once per gesture is not a hot path.
-const PER_FRAME_CALLBACK = 'onScroll';
-
 /**
  * Restores the OnPush dirty-marking Angular skips for a `[style]` binding that a directive
  * declares as an input. Attach it to any component declaring a `style` input:
@@ -194,7 +183,7 @@ function isAnchorStyleUnchanged(previous: unknown, next: unknown): boolean {
 }
 
 /**
- * Base for all Angular primitive host components (`symbiote-view`, `symbiote-text`, ...).
+ * Base for all Angular primitive host components (`view`, `text`, ...).
  * RN's `StyleProp` can be an object, an array, nested arrays, falsy entries, and Animated
  * values. Angular's raw `[style]` binding on a custom element routes through the CSS style
  * engine (`setStyle` per key), which crashes on numeric array keys. By declaring `style` as
@@ -265,20 +254,15 @@ export class SymbioteHostPropsDirective {
   // The directive lives in its HOST component's template, so its injected ChangeDetectorRef IS
   // that component's own view detector — the one thing that can refresh it (see wrapCallback).
   private readonly cdr = inject(ChangeDetectorRef);
-  // One wrapper per ORIGINAL handler, for the lifetime of this directive. Without it every push
-  // of the props bag allocated a brand-new closure for every `onX` key, and the engine stored it
-  // as a new listener (`setEventListener` allocates its own closure on top) - per key, per push,
-  // on a path a scroll frame reaches 60 times a second. The wrapper body closes over nothing but
-  // `value` and this instance's `cdr`, so the handler alone is a complete cache key; `key` is
-  // read only by the ON_PREFIX guard above and never enters the wrapper.
-  //
-  // 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
-  >();
+  // A flat-bag `onX` callback (responder negotiation, onLongPress, …) is invoked by the engine's
+  // event dispatch — a plain JS call, entirely outside Angular — so nothing dirties the view that
+  // 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,
+  );
 
   // 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.
@@ -330,21 +314,4 @@ export class SymbioteHostPropsDirective {
   // (`_cdRefInjectingView`, i.e. the host component), unlike `detectChanges()` which acts on a
   // resolved `_lView` that is NOT the host component here. The Angular twin of what React/Vue get
   // for free (setState / proxy reactivity).
-  private wrapCallback(key: string, value: unknown): unknown {
-    if (!ON_PREFIX.test(key) || typeof value !== 'function') return value;
-    if (key === PER_FRAME_CALLBACK) return value;
-    const cached = this.wrappers.get(value);
-    if (cached !== undefined) return cached;
-    // Reflect.apply rather than calling a cast-to-signature local: `typeof value === 'function'`
-    // narrows to `Function`, which has no call signature TypeScript will accept, and this repo
-    // does not use `as` to paper over that. `undefined` as the receiver preserves the previous
-    // unbound call.
-    const wrapper = (...args: unknown[]): unknown => {
-      const result: unknown = Reflect.apply(value, undefined, args);
-      this.cdr.markForCheck();
-      return result;
-    };
-    this.wrappers.set(value, wrapper);
-    return wrapper;
-  }
 }

package/src/register.ts

@@ -0,0 +1,15 @@
+// Side-effect ONLY. Exports nothing, and must never be re-exported from the barrel.
+//
+// The fourteen calls live once, in `@symbiote-native/components/register` — they were identical in
+// all five adapters, and each copy carried a migration ledger justifying a call against a wrapper
+// that no longer exists. What is per-adapter is only the SPELLING of the import below: every
+// `*-tag.test.*` here reaches the registry through `import './register';`, and this adapter's own
+// barrel guard pins that line.
+//
+// WHY A SIDE-EFFECT SUBPATH AND NOT A BARREL EXPORT. Metro turns on `inlineRequires` for PRODUCTION
+// only: it moves a `require` down to the first place its binding is used as a VALUE, and
+// `export { X } from './x'` compiles to a lazy getter. A registration reached that way never
+// evaluates in a Release build — invisible to tsc, to vitest, and to grepping the bundle. A bare
+// `import` placed NEXT TO a re-export of the same specifier does not help either: Babel merges the
+// two into one dependency and the merged dependency stays lazy.
+import '@symbiote-native/components/register';

package/src/render/index.ts

@@ -54,7 +54,7 @@ function asAngularHost(hostNode: SymbioteSurface | ISymbioteNode): Element {
   return hostNode as unknown as Element;
 }
 
-// A bare `symbiote-view` node, created directly through the engine (bypassing Angular's own
+// A bare `view` node, created directly through the engine (bypassing Angular's own
 // createElement, which only resolves KNOWN symbiote primitives, never an arbitrary component's
 // selector — see SymbioteRenderer.createElement). Used as the AppRegistry root's host when a
 // wrapperComponentProvider is set: Angular has no hostElement-less bootstrap for our renderer
@@ -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');
+  // '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('view');
   return toPublicInstance(
     createEngineElement(descriptor.component, descriptor.isText),
   );

package/src/renderer/index.ts

@@ -14,17 +14,23 @@ import {
   getExplicitStyle,
   insertBefore,
   isDebug,
+  isSymbioteEvent,
   isSymbioteNode,
   removeChild,
   routeProp,
   setEventListener,
+  setProp,
   setText,
   toPublicInstance,
   RAW_TEXT_COMPONENT,
   SymbioteSurface,
   type ISymbioteNode,
 } from '@symbiote-native/engine';
-import { descriptorFor } from '@symbiote-native/components';
+import {
+  COMPONENT_DESCRIPTORS,
+  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 {
@@ -32,12 +38,6 @@ import {
   noteAngularCreate,
   noteAngularWrite,
 } from '../diagnostics';
-import {
-  flushScrollViewProjections,
-  getScrollViewProjection,
-  removeScrollViewProjectedChild,
-} from '../components/scroll-view/projection';
-
 // Angular host nodes are all SymbioteNode (elements, raw text, anchors). The mount
 // container is the surface, so a parent can be either a node or the surface root.
 type IHostNode = ISymbioteNode;
@@ -55,6 +55,89 @@ 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
+// text node too; seeding here therefore covers both the composed Text and any bare
+// `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('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('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('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()`. The two names live in a leaf
+// module so `elements.ts`'s ControlValueAccessor can name them without importing this cyclic file.
+import { VALUE_CHANGE_EVENT, VALUE_CHANGE_PROP } from './value-change';
+import { flushViewFor } from '../change-detection-flush';
+
+const PROP_ALIASES: ReadonlyMap<string, string> = new Map([
+  ['id', 'nativeID'],
+  ['symbioteStyle', 'style'],
+]);
+
+function aliasedPropName(name: string): string {
+  return PROP_ALIASES.get(name) ?? name;
+}
+
+// The app callbacks an engine behavior READS BACK inside the same microtask turn, as an Angular
+// `(event)` binding — `valueChange` is handled in `listen` on its own, since it also needs the field
+// unwrapped. Zoneless change detection is a macrotask, so without a flush the behavior reads the
+// PRE-event value; `../change-detection-flush` holds the whole mechanism, the three behaviors, and
+// why this is scoped rather than wired to the engine's event-dispatch seam.
+//
+// The other spelling — the `[onRefresh]` flat-bag PROP — is not here: an `on*` function prop is
+// wrapped by `SymbioteElement` itself, which reaches every one of them rather than a named three,
+// and adds the `markForCheck` a prop callback needs and an event binding gets from Angular.
+const READ_BACK_EVENTS: ReadonlySet<string> = new Set(['refresh']);
+
+type IReadBackListener = (event: unknown) => unknown;
+
+function withChangeDetection(
+  node: IHostElement,
+  listener: IReadBackListener,
+): IReadBackListener {
+  return (event: unknown): unknown => {
+    const result = listener(event);
+    flushViewFor(node);
+    return result;
+  };
+}
+
 // 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).
@@ -79,23 +162,51 @@ function describeHost(node: IHostElement | null | undefined): string {
     : node.component;
 }
 
+// A hand-written tag ngtsc accepts must contain a HYPHEN, so the six dashless intrinsics
+// (`view`/`text`/`pressable`/`image`/`switch`/`modal`) need a second spelling that has one.
+// `hasElement`/`hasProperty` gate the CUSTOM_ELEMENTS_SCHEMA branch behind
+// `normalizedTag.includes('-')` (compiler/src/schema/dom_element_schema_registry.ts), so a dashless
+// tag is NG8001 under every schema but NO_ERRORS_SCHEMA — which switches off element checking
+// entirely. Dropping the `symbiote-` prefix from the tag alphabet is what took the dash away.
+//
+// A per-tag directive is the other repair, and it is the one an app should reach for now that
+// `SYMBIOTE_ELEMENTS` exists (`../elements.ts`). Matching a directive does turn every bound prop
+// into an input lookup — the sentence that used to end this paragraph — but that is a repair
+// rather than a dead end: declare the input and the lookup succeeds, with a real TYPE, which no
+// schema gives. This alias map stays for the `symbiote-*` spelling and for an app that has not
+// imported the directives.
+//
+// Derived, so a future dashless intrinsic joins by existing; when the alphabet regains its dashes
+// upstream every entry becomes identity and the map can go. See `bare-intrinsic-tag-aot.test.ts`.
+const HYPHEN_PREFIX = 'symbiote-';
+
+function hyphenatedIntrinsicAliases(): Record<string, string> {
+  const aliases: Record<string, string> = {};
+  for (const tag of Object.keys(COMPONENT_DESCRIPTORS)) {
+    if (tag.includes('-')) continue;
+    aliases[`${HYPHEN_PREFIX}${tag}`] = tag;
+  }
+  return aliases;
+}
+
 const PRIMITIVE_SELECTOR_ALIAS: Record<string, string> = {
   // Public ergonomic selectors map directly to the engine primitive descriptors.
-  View: 'symbiote-view',
-  Text: 'symbiote-text',
+  View: 'view',
+  Text: 'text',
+  ...hyphenatedIntrinsicAliases(),
 };
 
 // The ANCHOR_HOST_COMPONENTS Set and registerComposedComponent now live in the dependency-free
 // leaf module ../anchor-host-registry (imported above as isAnchorHostComponent) — see its header
 // for why the registry must NOT sit in this require-cyclic renderer module.
 
-// 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>,
+// 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.
 function assertTextPlacement(child: ISymbioteNode, parent: IHostElement): void {
   if (isRawText(child) && (isSurface(parent) || !parent.isText)) {
     throw new Error(
-      `Text string "${String(child.props.text)}" must be rendered inside a <Text>`,
+      `Text string "${String(child.props.text)}" must be rendered inside a <text>`,
     );
   }
 }
@@ -114,27 +225,55 @@ export class SymbioteRenderer implements Renderer2 {
   destroy(): void {}
 
   createElement(name: string): IHostNode {
-    // `name` is the component's host tag — a symbiote intrinsic (`symbiote-view`,
-    // `symbiote-text`, …), a public ergonomic alias (`View`, `Text`), or a raw Fabric view
+    // `name` is the component's host tag — a symbiote intrinsic (`view`,
+    // `text`, …), a public ergonomic alias (`View`, `Text`), or a raw Fabric view
     // 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)) {
+
+    // An INTRINSIC is never an anchor, and the check has to come first now that the tags carry no
+    // prefix. The anchor registry is keyed on lowercased selectors — Angular lowercases a
+    // dynamically-mounted component's selector at runtime, so it must be — and the composed
+    // wrappers are named after the primitives they render: `Text`.toLowerCase() IS the tag `text`.
+    // While both layers exist, every `<text>` would anchor instead of painting.
+    //
+    // Derived from the descriptor table rather than an exclusion list, so it cannot go stale; and
+    // it disappears on its own when the wrappers do, which is what this migration is for. The
+    // collision is exactly the single-word names — `TextInput` lowercases to `textinput`, which is
+    // no tag of ours.
+    if (
+      COMPONENT_DESCRIPTORS[engineName] === undefined &&
+      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 +283,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,22 +302,22 @@ 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 (projection !== undefined) {
-        projection.appendProjectedChild(parent, newChild, (target, child) =>
-          appendChild(target, child),
+      // The engine's own `appendChild` already redirects through `parent.childHost` when the
+      // primitive's behavior builds one (ScrollView's content node, e.g.) — the adapter-side
+      // projection bridge this used to route through is gone with the ScrollView component.
+      if (isDebug()) {
+        dlog(
+          `Angular renderer appendChild parent=${describeHost(parent)} child=${describeHost(newChild)}`,
         );
-      } else {
-        appendChild(parent, newChild);
       }
+      appendChild(parent, newChild);
     }
     this.surface.requestCommit();
   }
@@ -190,31 +331,21 @@ 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 (projection !== undefined) {
-        projection.insertProjectedChild(
-          parent,
-          newChild,
-          refChild,
-          (target, child, before) => {
-            if (before === undefined) appendChild(target, child);
-            else insertBefore(target, child, before);
-          },
+      if (isDebug()) {
+        dlog(
+          `Angular renderer insertBefore parent=${describeHost(parent)} child=${describeHost(newChild)} ref=${refChild ? describeHost(refChild) : 'null'}`,
         );
-      } else if (refChild) {
-        insertBefore(parent, newChild, refChild);
-      } else {
-        appendChild(parent, newChild);
       }
+      if (refChild) insertBefore(parent, newChild, refChild);
+      else appendChild(parent, newChild);
     }
     this.surface.requestCommit();
   }
@@ -224,21 +355,17 @@ 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}`,
-    );
-    if (!wasProjected) {
-      const parent = oldChild.parent;
-      if (parent !== undefined) removeChild(parent, oldChild);
-      else this.surface.removeChild(oldChild);
+    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)}`,
+      );
     }
+    const parent = oldChild.parent;
+    if (parent !== undefined) removeChild(parent, oldChild);
+    else this.surface.removeChild(oldChild);
     this.surface.requestCommit();
   }
 
@@ -278,7 +405,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 +413,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 +481,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 +495,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,7 +512,34 @@ export class SymbioteRenderer implements Renderer2 {
     callback: (event: unknown) => boolean | void,
   ): () => void {
     if (!isSymbioteNode(target)) return () => {};
-    setEventListener(target, eventName, callback);
+    // `[(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(event)` — a plain function PROP, not an event
+    // (`behaviors/switch.ts`, `behaviors/text-input.ts`), with `text`/`value` carried as a FIELD on
+    // the event object rather than a second argument (Svelte forces every individual `on*` prop
+    // through a native listener that calls with exactly one argument, always a real object). So
+    // Angular's own `[(value)]` sugar needs one extra step its React/Vue/Solid counterparts do not:
+    // unwrap that field back to a bare value before handing it to Angular's callback, or `text =
+    // $event` would assign the whole event object instead of the typed string/boolean.
+    if (eventName === VALUE_CHANGE_EVENT) {
+      const forwardValue = withChangeDetection(target, (event: unknown) => {
+        if (isSymbioteEvent(event)) {
+          if ('text' in event) return callback(event.text);
+          if ('value' in event) return callback(event.value);
+        }
+        return callback(event);
+      });
+      routeProp(target, VALUE_CHANGE_PROP, forwardValue);
+      return () => routeProp(target, VALUE_CHANGE_PROP, undefined);
+    }
+    const listener = READ_BACK_EVENTS.has(eventName)
+      ? withChangeDetection(target, callback)
+      : callback;
+    setEventListener(target, eventName, listener);
     return () => setEventListener(target, eventName, undefined);
   }
 }
@@ -397,13 +559,10 @@ export class SymbioteRendererFactory implements RendererFactory2 {
     return (this.renderer ??= new SymbioteRenderer(this.surface));
   }
 
-  // Not commit coalescing (requestCommit owns that) — this is the one moment where a ScrollView's
-  // two input channels are known to be consistent: Angular has finished writing every `@Input` AND
-  // the renderer has finished every projected insert/remove for this pass, while the surface's
-  // commit is still only queued. Sticky projection reconciles are batched to here for both reasons;
-  // see flushScrollViewProjections.
+  // Not commit coalescing (requestCommit owns that) — a per-CD-pass counter only, now that the
+  // ScrollView projection bridge this used to also flush is gone (`../register.ts`'s
+  // `registerScrollViewBehavior` owns the content node and the sticky seam for every adapter).
   end(): void {
     countAngular('cdPasses');
-    flushScrollViewProjections();
   }
 }

package/src/renderer/value-change.ts

@@ -0,0 +1,8 @@
+// The two names Angular's `[(value)]` sugar rides on, in a dependency-free LEAF so `elements.ts`
+// can name the event without importing the require-cyclic `renderer/index.ts` (same reasoning as
+// `anchor-host-registry.ts`).
+//
+// `[(value)]` desugars to a `(valueChange)` binding, which is no Fabric event — the renderer
+// translates it to the `onValueChange` PROP both behaviors already call.
+export const VALUE_CHANGE_EVENT = 'valueChange';
+export const VALUE_CHANGE_PROP = 'onValueChange';

package/build/angular/components/activity-indicator/index.android.d.ts

@@ -1,13 +0,0 @@
-import { ActivityIndicatorBase } from './shared';
-import * as i0 from "@angular/core";
-import * as i1 from "../../primitives/shared";
-export type { IActivityIndicatorProps } from './shared';
-export declare class ActivityIndicator extends ActivityIndicatorBase {
-    protected readonly defaultColor: null;
-    protected readonly nativeExtras: {
-        styleAttr: string;
-        indeterminate: boolean;
-    };
-    static ɵfac: i0.ɵɵFactoryDeclaration<ActivityIndicator, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ActivityIndicator, "ActivityIndicator", never, {}, {}, never, never, true, [{ directive: typeof i1.SymbioteStyleInputDirective; inputs: { "style": "style"; }; outputs: {}; }]>;
-}

package/build/angular/components/activity-indicator/index.android.js

@@ -1,29 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DescriptorOutlet } from '../../descriptor-to-angular';
-import { ActivityIndicatorBase } from './shared';
-import { SymbioteStyleInputDirective } from '../../primitives';
-import * as i0 from "@angular/core";
-import * as i1 from "../../primitives/shared";
-export class ActivityIndicator extends ActivityIndicatorBase {
-    defaultColor = null;
-    nativeExtras = {
-        styleAttr: 'Normal',
-        indeterminate: true,
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicator, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ActivityIndicator, isStandalone: true, selector: "ActivityIndicator", usesInheritance: true, hostDirectives: [{ directive: i1.SymbioteStyleInputDirective, inputs: ["style", "style"] }], ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ActivityIndicator, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ActivityIndicator',
-                    standalone: true,
-                    hostDirectives: [
-                        { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-                    ],
-                    imports: [DescriptorOutlet],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
-                }]
-        }] });
-//# sourceMappingURL=index.android.js.map

package/build/angular/components/activity-indicator/index.android.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../../src/components/activity-indicator/index.android.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kBAAkB,CAAC;;;AAa/D,MAAM,OAAO,iBAAkB,SAAQ,qBAAqB;IACvC,YAAY,GAAG,IAAI,CAAC;IACX,YAAY,GAAG;QACzC,SAAS,EAAE,QAAQ;QACnB,aAAa,EAAE,IAAI;KACpB,CAAC;uGALS,iBAAiB;2FAAjB,iBAAiB,iMAFlB,oDAAoD,4DAFpD,gBAAgB;;2FAIf,iBAAiB;kBAV7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,UAAU,EAAE,IAAI;oBAChB,cAAc,EAAE;wBACd,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE;qBAC9D;oBACD,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE,oDAAoD;iBAC/D"}