@symbiote-native/angular 0.8.0 → 2.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/host-instance/index.ts

@@ -2,7 +2,7 @@
 // adapters/vue/src/host-instance/index.ts. RN's "ref/instance -> native reactTag" lookup,
 // the seam imperative-interop libraries reach through.
 //
-// Angular template refs on a primitive host (`<View #myView>`) receive the component instance,
+// Angular template refs on a primitive host (`<view #myView>`) receive the component instance,
 // not the raw engine node. SymbiotePrimitiveHost exposes `nativeElement`, which holds the
 // engine host node that `getNativeTag` is keyed on. This adapter accepts:
 //   - a bare number (idempotent)

package/src/index.ts

@@ -5,35 +5,23 @@
 // 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,
-  Button,
   FlatList,
   HorizontalScrollContentView,
   HorizontalScrollView,
   Image,
-  ImageBackground,
-  InputAccessoryView,
   KeyboardAvoidingView,
   Modal,
-  Pressable,
-  RefreshControl,
-  SafeAreaView,
   ScrollContentView,
-  ScrollView,
-  ScrollViewStickyHeader,
   SectionList,
   stableAnchorStyle,
-  Switch,
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
   Text,
-  TextInput,
-  TouchableHighlight,
   TouchableNativeFeedback,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
   View,
   VirtualizedList,
   VirtualizedSectionList,
@@ -73,6 +61,7 @@ export {
 export { createAnimatedComponent } from './modules/animated';
 export type {
   IActivityIndicatorProps,
+  IAngularPressableInputs,
   IAngularImageBackgroundProps,
   IAngularInputAccessoryViewProps,
   IAngularKeyboardAvoidingViewProps,
@@ -110,7 +99,6 @@ export type {
   ISectionListProps,
   ISeparatorProps,
   ISeparators,
-  IStickyHeaderComponentType,
   ISubmitBehavior,
   IThemeAttrBackground,
   IViewabilityConfig,
@@ -128,10 +116,61 @@ export type {
   ISection,
   ISwitchProps,
   ISwitchTrackColor,
+  ISwitchChangeEvent,
   ITextInputHandle,
   ITextInputSelection,
+  ITextInputChangeEvent,
 } 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`.
+export {
+  SYMBIOTE_ELEMENTS,
+  SymbioteElement,
+  ActivityIndicatorElement,
+  ActivityIndicatorSpinnerElement,
+  ButtonElement,
+  HorizontalScrollContentElement,
+  HorizontalScrollViewElement,
+  ImageBackgroundElement,
+  ImageElement,
+  InputAccessoryViewElement,
+  ManagedMultilineTextInputElement,
+  ManagedSwitchElement,
+  ManagedTextInputElement,
+  ModalElement,
+  MultilineTextInputElement,
+  PressableElement,
+  RefreshControlElement,
+  SafeAreaViewElement,
+  ScrollContentElement,
+  ScrollViewElement,
+  StickyHeaderElement,
+  SwitchElement,
+  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';
+export type {
+  IElementProps,
+  IStickyHeaderElementProps,
+  ITextElementProps,
+} from './element-props';
 export { mount, unmount } from './render';
 // The generic Descriptor→Angular bridge, the twin of descriptorToReact/descriptorToVue.
 // Exported so a component defined OUTSIDE this package (e.g.

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

@@ -37,12 +37,10 @@ import {
   resolveHostNode,
   type ISymbioteNode,
 } from '@symbiote-native/engine';
-import { selectScrollIntrinsics } from '@symbiote-native/components';
-import { Image, ScrollView, Text, View } from '../../components';
+import { Text, View } from '../../components';
 import {
   anchorHostStyle,
   ImageHost,
-  ScrollViewHost,
   SymbioteHostPropsDirective,
   SymbioteStyleInputDirective,
   TextHost,
@@ -53,11 +51,19 @@ import {
   IMAGE_INPUTS,
   IMAGE_OUTPUTS,
   ImageBase,
+  isImageEventCallback,
   resolveImageProps,
-} from '../../components/image/shared';
+} from '../../components/image-shared';
+import type { IGatedAccessibilityEvent } from '../../gate-demand';
 import { SectionList } from '../../components/section-list';
 import { AnimatedLeafBinder } from './animated-leaf-binder';
 
+// The intrinsic `createAnimatedComponent` accepts in place of the deleted `Image` component.
+const IMAGE_TAG = 'image';
+// Same move for the deleted `ScrollView` component — the vertical axis's own tag stands in for
+// the class identity the generic dispatcher used to compare against.
+const SCROLL_VIEW_TAG = 'scroll-view';
+
 // RN's prop carrying explicit (already-rasterized) values that override the animated prop in
 // the COMMITTED props (sticky-header passthrough). Named once so the directive input and the
 // reconcile agree.
@@ -68,7 +74,17 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // escape hatch for any OTHER prop that may hold an AnimatedNode or an Animated.event handler,
 // plus static host props to forward (the React/Vue `rest`). Each concrete @Component re-lists
 // these (Angular's inputs-on-base convention, mirroring Switch/Image).
-export const ANIMATED_INPUTS = ['style', 'animatedProps', PASSTHROUGH_PROP];
+// `testID` is listed alongside them rather than left to `animatedProps`, which is the documented
+// escape hatch for everything else. Every other component in this adapter takes it as an ordinary
+// input, and React's `createAnimatedComponent` spreads `...props`, so `<AnimatedView testID="x">`
+// is what an app writes — it compiled (a static attribute on a component tag is never checked),
+// landed on the non-painting anchor host and committed nowhere.
+export const ANIMATED_INPUTS = [
+  'style',
+  'testID',
+  'animatedProps',
+  PASSTHROUGH_PROP,
+];
 export const ANIMATED_IMAGE_INPUTS = [
   ...IMAGE_INPUTS,
   'animatedProps',
@@ -85,6 +101,7 @@ export abstract class AnimatedComponentBase
   implements AfterViewInit, DoCheck, OnChanges, OnDestroy
 {
   style: unknown;
+  testID: string | undefined;
   animatedProps: Record<string, unknown> | undefined;
   passthroughAnimatedPropExplicitValues: unknown;
 
@@ -181,9 +198,11 @@ export abstract class AnimatedComponentBase
   // never disagree.
   private mergedProps(): Record<string, unknown> {
     const base = this.animatedProps ?? {};
-    return this.style === undefined
-      ? { ...base }
-      : { ...base, style: this.style };
+    const merged: Record<string, unknown> =
+      this.style === undefined ? { ...base } : { ...base, style: this.style };
+    // Only when set, so an unset input cannot clear a `testID` the app put in `animatedProps`.
+    if (this.testID !== undefined) merged.testID = this.testID;
+    return merged;
   }
 
   // The committed host node held by IDENTITY. resolveHostNode unwraps an imperative scroll
@@ -205,9 +224,9 @@ export abstract class AnimatedComponentBase
   imports: [SymbioteHostPropsDirective, ViewHost],
   inputs: ANIMATED_INPUTS,
   template: `
-    <symbiote-view [symbioteHostProps]="reducedProps">
+    <view [symbioteHostProps]="reducedProps">
       <ng-content></ng-content>
-    </symbiote-view>
+    </view>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -223,9 +242,9 @@ export class AnimatedView extends AnimatedComponentBase {}
   imports: [SymbioteHostPropsDirective, TextHost],
   inputs: ANIMATED_INPUTS,
   template: `
-    <symbiote-text [symbioteHostProps]="reducedProps">
+    <text [symbioteHostProps]="reducedProps">
       <ng-content></ng-content>
-    </symbiote-text>
+    </text>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -242,12 +261,8 @@ export class AnimatedText extends AnimatedComponentBase {}
   inputs: ANIMATED_IMAGE_INPUTS,
   outputs: IMAGE_OUTPUTS,
   template: `
-    <symbiote-image
+    <image
       [symbioteHostProps]="animatedImageProps"
-      (accessibilityAction)="handleAccessibilityAction($event)"
-      (accessibilityTap)="handleAccessibilityTap($event)"
-      (magicTap)="handleMagicTap($event)"
-      (accessibilityEscape)="handleAccessibilityEscape($event)"
       (loadStart)="handleLoadStart($event)"
       (load)="handleLoad($event)"
       (loadEnd)="handleLoadEnd($event)"
@@ -256,7 +271,7 @@ export class AnimatedText extends AnimatedComponentBase {}
       (partialLoad)="handlePartialLoad($event)"
     >
       <ng-content></ng-content>
-    </symbiote-image>
+    </image>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -283,6 +298,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 +323,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;
   }
 
@@ -363,49 +399,23 @@ export class AnimatedImage
     { directive: SymbioteStyleInputDirective, inputs: ['style'] },
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [SymbioteHostPropsDirective, ScrollViewHost],
+  imports: [SymbioteHostPropsDirective],
   inputs: ANIMATED_INPUTS,
   template: `
-    <symbiote-scroll-view [symbioteHostProps]="reducedProps">
-      <symbiote-scroll-content [symbioteHostProps]="contentProps">
-        <ng-content></ng-content>
-      </symbiote-scroll-content>
-    </symbiote-scroll-view>
+    <scroll-view [symbioteHostProps]="reducedProps">
+      <ng-content></ng-content>
+    </scroll-view>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AnimatedScrollView extends AnimatedComponentBase {
-  // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`) — Android
-  // needs it explicit or a nested ScrollView never receives touch (swallowed by the outer one;
-  // iOS doesn't gate on this). The real ScrollView component already defaults this
-  // (scroll-view/shared.ts), but AnimatedScrollView talks to the raw primitive directly and
-  // must apply it too.
-  //
-  // scrollViewBaseStyle (overflow: 'scroll' + the per-axis flexDirection) is the other thing the
-  // real ScrollView applies that this bespoke template used to skip — without it, iOS Fabric
-  // never clips content to the scroll view's frame (invisible on Android, whose native ViewGroup
-  // clips regardless of style). This wrapper has no `horizontal` input and its template is
-  // hardcoded to the vertical intrinsics, so selectScrollIntrinsics is always called with
-  // isHorizontal=false here, matching what the template can actually render.
-  override get reducedProps(): Record<string, unknown> {
-    const reduced = super.reducedProps;
-    const { scrollViewBaseStyle } = selectScrollIntrinsics(false, undefined);
-    const withScrollBase: Record<string, unknown> = {
-      ...reduced,
-      style: [scrollViewBaseStyle, reduced.style],
-    };
-    return withScrollBase.nestedScrollEnabled === undefined
-      ? { ...withScrollBase, nestedScrollEnabled: true }
-      : withScrollBase;
-  }
-
-  // The content (inner) view's props: contentStyle from the same intrinsics selection, plus
-  // `collapsable: false` (the Android multi-child fix this file's tests already cover) — mirrors
-  // the real ScrollView's own `contentProps` getter (scroll-view/shared.ts).
-  get contentProps(): Record<string, unknown> {
-    const { contentStyle } = selectScrollIntrinsics(false, undefined);
-    return { style: contentStyle, collapsable: false };
-  }
+  // Nothing left to override: `registerScrollViewBehavior()` (`../../register.ts`) now owns the
+  // content node, `scrollViewBaseStyle`/`nestedScrollEnabled` defaults, and the sticky seam for
+  // this SAME `scroll-view` tag. This class used to build its own `<scroll-content>` child by
+  // hand — deleted 2026-09-11, since that made TWO owners of the content node the moment the
+  // behavior registered on this tag: the engine's own `buildStructure` and this template both
+  // creating one. `<ng-content>` now lands directly under the owner and the behavior redirects it
+  // into the content node it builds, same as every other `<scroll-view>` in the app.
 }
 
 // List components are already explicit AOT-compiled Angular components with their own full input
@@ -422,12 +432,16 @@ export const AnimatedSectionList = SectionList;
 export function createAnimatedComponent(base: unknown): Type<unknown> {
   if (base === View) return AnimatedView;
   if (base === Text) return AnimatedText;
-  if (base === Image) return AnimatedImage;
-  if (base === ScrollView) return AnimatedScrollView;
+  // The TAG, not a component identity: `ScrollView`/`Image` are gone as classes now
+  // (`components/scroll-view-props.ts`, `modules/image`), so there is no class to compare
+  // against — the same move React made (`createAnimatedComponent('image')`). A tag string is also
+  // what portable app code can pass on every adapter.
+  if (base === SCROLL_VIEW_TAG) return AnimatedScrollView;
+  if (base === IMAGE_TAG) return AnimatedImage;
   throw new Error(
     'createAnimatedComponent: Angular cannot synthesize a component at runtime (no JIT compiler ' +
       'under AOT/Metro). Author an explicit standalone @Component extending AnimatedComponentBase ' +
-      'instead. The built-in primitives View / Text / Image / ScrollView map to ' +
-      'AnimatedView / AnimatedText / AnimatedImage / AnimatedScrollView.',
+      "instead. The built-in primitives View / Text and the tags 'scroll-view' / 'image' map to " +
+      'AnimatedView / AnimatedText / AnimatedScrollView / AnimatedImage.',
   );
 }

package/src/modules/animated/index.ts

@@ -55,7 +55,7 @@ export {
 // getter only exists to defer a RUNTIME createAnimatedComponent(ScrollView) past module init so
 // it cannot read ScrollView inside its own TDZ during an import cycle. AnimatedScrollView here is
 // a statically-declared component that never reads the ScrollView class at init (it targets the
-// `symbiote-scroll-view` host by string), so there is no cycle to defer.
+// `scroll-view` host by string), so there is no cycle to defer.
 //
 // FlatList / SectionList are exposed as explicit AOT-safe list entries now that the Angular list
 // components exist. Angular still cannot synthesize arbitrary animated wrappers at runtime; custom

package/src/modules/image/index.ts

@@ -0,0 +1,18 @@
+// RN's Image STATICS — `getSize`, `getSizeWithHeaders`, `prefetch`, `abortPrefetch`, `queryCache`,
+// `resolveAssetSource`.
+//
+// IN `modules/`, NOT `components/`. The primitive is the `<image>` tag matched by `ImageElement`,
+// and its fold runs in the engine (`behaviors/image.ts`); what is left under the name `Image` is an
+// imperative API with no view, which is what this bucket is for
+// (<adapter_src_follows_framework_idioms>). Sitting in `components/` was what made a statics object
+// read as a component.
+//
+// A NAMESPACE OBJECT rather than six bare functions, deliberately: `Alert`, `Share`, `Linking` and
+// `AppState` all take that shape, and an app porting from RN writes `Image.getSize(...)` verbatim.
+//
+// Shared verbatim via `imageStatics`, the same source every other adapter's Image uses.
+import { imageStatics, type IImageStatics } from '@symbiote-native/components';
+
+export type { IImageStatics };
+
+export const Image: IImageStatics = imageStatics;

package/src/primitives/index.ts

@@ -24,7 +24,7 @@ export {
 } from './shared';
 
 @Component({
-  selector: 'symbiote-view, View',
+  selector: 'view',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
@@ -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
@@ -41,7 +41,7 @@ export class ViewHost extends SymbiotePrimitiveHost {}
  * 'tail' would silently overwrite an explicit `ellipsizeMode="clip"`.
  */
 @Component({
-  selector: 'symbiote-text, Text',
+  selector: 'text',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
@@ -73,91 +73,122 @@ export class TextHost extends SymbiotePrimitiveHost implements OnInit {
 }
 
 @Component({
-  selector: 'symbiote-image',
+  selector: 'image',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class ImageHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-scroll-view',
+  selector: 'scroll-view',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class ScrollViewHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-scroll-content',
+  selector: 'scroll-content',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class ScrollContentView extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-horizontal-scroll-view',
+  selector: 'horizontal-scroll-view',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class HorizontalScrollView extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-horizontal-scroll-content',
+  selector: 'horizontal-scroll-content',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 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',
+  selector: 'text-input',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class TextInputHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-text-input-multiline',
+  selector: 'text-input-multiline',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class MultilineTextInputHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-switch',
+  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,
   template: '<ng-content></ng-content>',
 })
 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
+// it in a template and it needs no host here.
 @Component({
-  selector: 'symbiote-activity-indicator',
+  selector: 'activity-indicator',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class ActivityIndicatorHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-safe-area-view',
+  selector: 'safe-area-view',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class SafeAreaViewHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-modal',
+  selector: 'modal',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class ModalHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-refresh-control',
+  selector: 'refresh-control',
   standalone: true,
   template: '<ng-content></ng-content>',
 })
 export class RefreshControlHost extends SymbiotePrimitiveHost {}
 
 @Component({
-  selector: 'symbiote-input-accessory-view',
+  selector: 'input-accessory-view',
   standalone: true,
   template: '<ng-content></ng-content>',
 })