@symbiote-native/angular 0.0.0-canary-20260724081123

package/src/angular-imports.test.ts

@@ -0,0 +1,100 @@
+// Angular source-import harness regression. Vitest imports adapter source (`src/*.ts`) directly,
+// not the partial-Ivy `ngc` output Metro consumes. The adapter tsconfig must therefore enable
+// TypeScript's legacy decorator lowering so Node never sees raw `@Component` / `@Directive`
+// syntax. Importing `@angular/compiler` enables JIT metadata creation for these source-only tests;
+// production still proves AOT/partial-Ivy through `pnpm --filter @symbiote-native/angular ng:build`.
+
+import '@angular/compiler';
+import { ElementRef, Injector, runInInjectionContext } from '@angular/core';
+import { describe, expect, it } from 'vitest';
+import { Image, ScrollView, Text, View } from './components';
+import { VirtualizedList, VListItemDirective } from './components/virtualized-list';
+import { SymbioteHostPropsDirective } from './primitives';
+import {
+  Animated,
+  AnimatedImage,
+  AnimatedScrollView,
+  AnimatedText,
+  AnimatedView,
+  createAnimatedComponent,
+} from './modules/animated';
+
+interface IAngularCompiledComponent {
+  ɵcmp?: { selectors?: unknown };
+}
+
+interface IAngularCompiledDirective {
+  ɵdir?: { selectors?: unknown };
+}
+
+describe('Angular source imports under Vitest', () => {
+  it('imports decorated adapter components and directives directly from src', () => {
+    expect(VirtualizedList).toBeTypeOf('function');
+    expect(VListItemDirective).toBeTypeOf('function');
+    expect(AnimatedView).toBeTypeOf('function');
+    expect(SymbioteHostPropsDirective).toBeTypeOf('function');
+  });
+
+  it('keeps Angular decorator metadata available to the JIT test runtime', () => {
+    expect((VirtualizedList as IAngularCompiledComponent).ɵcmp?.selectors).toEqual([
+      ['VirtualizedList'],
+    ]);
+    expect((AnimatedView as IAngularCompiledComponent).ɵcmp?.selectors).toEqual([
+      ['AnimatedView'],
+      ['symbiote-animated-view'],
+    ]);
+    expect((VListItemDirective as IAngularCompiledDirective).ɵdir?.selectors).toEqual([
+      ['', 'vListItem', ''],
+    ]);
+    expect((SymbioteHostPropsDirective as IAngularCompiledDirective).ɵdir?.selectors).toEqual([
+      ['', 'symbioteHostProps', ''],
+    ]);
+  });
+
+  it('imports the Animated namespace without losing component identity', () => {
+    expect(Animated.View).toBe(AnimatedView);
+    expect(Animated.Text).toBe(AnimatedText);
+    expect(Animated.Image).toBe(AnimatedImage);
+    expect(Animated.ScrollView).toBe(AnimatedScrollView);
+    expect(Animated.FlatList).toBeTypeOf('function');
+    expect(Animated.SectionList).toBeTypeOf('function');
+  });
+
+  it('keeps createAnimatedComponent limited to pre-authored AOT-safe Angular wrappers', () => {
+    class CustomComponent {}
+
+    expect(createAnimatedComponent(View)).toBe(AnimatedView);
+    expect(createAnimatedComponent(Text)).toBe(AnimatedText);
+    expect(createAnimatedComponent(Image)).toBe(AnimatedImage);
+    expect(createAnimatedComponent(ScrollView)).toBe(AnimatedScrollView);
+    expect(() => createAnimatedComponent(CustomComponent)).toThrow(
+      /Angular cannot synthesize a component at runtime \(no JIT compiler under AOT\/Metro\)/,
+    );
+    expect(() => createAnimatedComponent(CustomComponent)).toThrow(
+      /Author an explicit standalone @Component extending AnimatedComponentBase instead/,
+    );
+  });
+
+  it('resolves AnimatedImage props through the composed Image path', () => {
+    // AnimatedImage is an ANCHOR_HOST_COMPONENT: its field initializer injects its own
+    // ElementRef (anchorHostStyle merge, see create-animated-component.ts), so constructing it
+    // outside Angular's component machinery needs an explicit injection context.
+    const injector = Injector.create({
+      providers: [{ provide: ElementRef, useValue: new ElementRef({}) }],
+    });
+    const image = runInInjectionContext(injector, () => new AnimatedImage());
+    image.src = 'https://example.invalid/image.png';
+    image.width = 32;
+    image.height = 24;
+    image.alt = 'Preview';
+    image.animatedProps = { style: { opacity: 0.5 }, testID: 'animated-image' };
+
+    expect(image.animatedImageProps).toMatchObject({
+      testID: 'animated-image',
+      accessible: true,
+      accessibilityLabel: 'Preview',
+      source: [{ uri: 'https://example.invalid/image.png' }],
+      style: [undefined, [{ width: 32, height: 24 }, { opacity: 0.5 }]],
+    });
+  });
+});

package/src/bootstrap.ts

@@ -0,0 +1,26 @@
+// Zero-config app entry, the Angular twin of adapters/react/src/bootstrap.ts. Lives OUTSIDE the
+// package's main barrel — see that file's header for why anything importing react-native must
+// stay there. No @Component/@Directive decorators here, so unlike the package's main "." entry
+// this needs no ngc/AOT build step and can stay a plain source reference.
+
+import { AppRegistry as RNAppRegistry } from 'react-native';
+import type { Type } from '@angular/core';
+import { bootstrapHost, type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+import { AppRegistry, setHostRegistrar } from './modules/app-registry';
+
+export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+
+export type IBootstrapApplicationOptions = IBootstrapHostOptions & {
+  appName: string;
+};
+
+// Mirrors real Angular's bootstrapApplication(RootComponent, config) idiom.
+export function bootstrapApplication(
+  AppComponent: Type<unknown>,
+  options: IBootstrapApplicationOptions,
+): void {
+  const { appName, ...bootstrapOptions } = options;
+  bootstrapHost(bootstrapOptions);
+  setHostRegistrar(RNAppRegistry);
+  AppRegistry.registerComponent(appName, () => AppComponent);
+}

package/src/components/activity-indicator/activity-indicator-class-style.test.ts

@@ -0,0 +1,44 @@
+// Regression test for the anchor/class bug: ActivityIndicator is its own
+// ANCHOR_HOST_COMPONENTS entry AND renders through DescriptorOutlet (`symbiote-descriptor-outlet`,
+// itself also an anchor entry) — a class= on <ActivityIndicator> resolves onto ActivityIndicator's
+// OWN anchor, two levels up from the real committed wrapper View the descriptor builds, and needs
+// its OWN anchorHostStyle merge (see shared.ts's `descriptor` getter). Mirrors pressable.test.ts's
+// "resolves a class=" case.
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { ActivityIndicator } from './index';
+
+const ROOT_TAG = 909;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-activity-indicator-class-host',
+  standalone: true,
+  imports: [ActivityIndicator],
+  template: `<ActivityIndicator class="card" />`,
+})
+class ActivityIndicatorClassHost {}
+
+beforeEach(() => {
+  fabric.reset();
+  registerStyles({ card: { backgroundColor: 'red' } });
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('ActivityIndicator anchor class= resolution', () => {
+  it('resolves a class= on the ActivityIndicator use site onto the real committed wrapper View', async () => {
+    mount(ROOT_TAG, ActivityIndicatorClassHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.backgroundColor === 'red');
+    expect(node, 'a real Fabric node carries the class-derived style').toBeDefined();
+  });
+});

package/src/components/activity-indicator/activity-indicator.test.ts

@@ -0,0 +1,131 @@
+import '@angular/compiler';
+import { Component, signal } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { ActivityIndicator } from './index';
+
+const ROOT_TAG = 905;
+const fabric = installFabric();
+
+let capturedHost: ActivityIndicatorHost | undefined;
+
+function findCommitted(predicate: (node: IFakeNode) => boolean): IFakeNode | undefined {
+  const visit = (node: IFakeNode): IFakeNode | undefined => {
+    if (predicate(node)) return node;
+    for (const child of node.children) {
+      const found = visit(child);
+      if (found) return found;
+    }
+    return undefined;
+  };
+  for (const node of fabric.committed) {
+    const found = visit(node);
+    if (found) return found;
+  }
+  return undefined;
+}
+
+function findSpinner(): IFakeNode {
+  const node = findCommitted(n => n.viewName === 'ActivityIndicatorView');
+  if (!node) throw new Error('no ActivityIndicatorView was created');
+  return node;
+}
+
+function findWrapper(): IFakeNode {
+  const node = findCommitted(n => n.viewName === 'RCTView' && n.props.pointerEvents !== 'box-none');
+  if (!node) throw new Error('no ActivityIndicator wrapper was created');
+  return node;
+}
+
+@Component({
+  selector: 'symbiote-activity-indicator-host',
+  standalone: true,
+  imports: [ActivityIndicator],
+  template: `
+    <ActivityIndicator
+      [size]="size()"
+      [color]="color()"
+      [animating]="animating()"
+      [testID]="testID()"
+      [accessible]="true"
+      [accessibilityLabel]="'loading'"
+      (layout)="onLayout($event)"
+    />
+  `,
+})
+class ActivityIndicatorHost {
+  readonly size = signal<'small' | 'large' | number>('large');
+  readonly color = signal('#0000ff');
+  readonly animating = signal(false);
+  readonly testID = signal('spinner-wrapper');
+  onLayout = vi.fn();
+
+  constructor() {
+    // Captures the live component instance so the test can drive its signals after mount.
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    capturedHost = this;
+  }
+}
+
+beforeEach(() => {
+  capturedHost = undefined;
+  fabric.reset();
+});
+afterEach(() => unmount(ROOT_TAG));
+
+describe('ActivityIndicator', () => {
+  it('renders through the shared descriptor shape and forwards wrapper props', async () => {
+    mount(ROOT_TAG, ActivityIndicatorHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    expect(fabric.serialize(fabric.appRoot().children)).toBe('RCTView(ActivityIndicatorView)');
+
+    const spinner = findSpinner();
+    expect(spinner.props.animating).toBe(false);
+    expect(spinner.props.color).toBe('#0000ff');
+    expect(spinner.props.hidesWhenStopped).toBe(true);
+    expect(spinner.props.size).toBe('large');
+    expect(spinner.props.width).toBe(36);
+    expect(spinner.props.height).toBe(36);
+
+    const wrapper = findWrapper();
+    expect(wrapper.props.testID).toBe('spinner-wrapper');
+    expect(wrapper.props.accessible).toBe(true);
+    expect(wrapper.props.accessibilityLabel).toBe('loading');
+    expect(wrapper.props.alignItems).toBe('center');
+    expect(wrapper.props.justifyContent).toBe('center');
+
+    fabric.fireEvent(wrapper.instanceHandle, 'topLayout', {});
+    expect(capturedHost?.onLayout).toHaveBeenCalledOnce();
+  });
+
+  it('patches the descriptor without remounting the native wrapper', async () => {
+    mount(ROOT_TAG, ActivityIndicatorHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const before = findWrapper();
+    const createdBefore = fabric.counts.createNode;
+
+    if (!capturedHost) throw new Error('host was not captured');
+    capturedHost.size.set(48);
+    capturedHost.color.set('#ff0000');
+    capturedHost.animating.set(true);
+    capturedHost.testID.set('spinner-wrapper-updated');
+    await Promise.resolve();
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const after = findWrapper();
+    expect(after.instanceHandle).toBe(before.instanceHandle);
+    expect(fabric.counts.createNode).toBe(createdBefore);
+    expect(after.props.testID).toBe('spinner-wrapper-updated');
+    const spinner = findSpinner();
+    expect(spinner.props.color).toBe('#ff0000');
+    expect(spinner.props.animating).toBe(true);
+    expect(spinner.props.width).toBe(48);
+    expect(spinner.props.height).toBe(48);
+    // Updating from string size to numeric size sends null to reset the previous native enum.
+    expect(spinner.props.size).toBeNull();
+  });
+});

package/src/components/activity-indicator/index.android.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '../../descriptor-to-angular';
+import { ActivityIndicatorBase } from './shared';
+export type { IActivityIndicatorProps } from './shared';
+
+@Component({
+  selector: 'ActivityIndicator',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+})
+export class ActivityIndicator extends ActivityIndicatorBase {
+  protected readonly defaultColor = null;
+  protected override readonly nativeExtras = { styleAttr: 'Normal', indeterminate: true };
+}

package/src/components/activity-indicator/index.ios.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '../../descriptor-to-angular';
+import { ActivityIndicatorBase } from './shared';
+export type { IActivityIndicatorProps } from './shared';
+
+const IOS_DEFAULT_COLOR = '#999999';
+
+@Component({
+  selector: 'ActivityIndicator',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+})
+export class ActivityIndicator extends ActivityIndicatorBase {
+  protected readonly defaultColor = IOS_DEFAULT_COLOR;
+}

package/src/components/activity-indicator/index.ts

@@ -0,0 +1,4 @@
+// Base/default ActivityIndicator. Re-exports the iOS build; Metro picks index.ios.ts /
+// index.android.ts in platform bundles.
+
+export * from './index.ios';

package/src/components/activity-indicator/shared.ts

@@ -0,0 +1,206 @@
+import { Directive, ElementRef, EventEmitter, inject, Input, Output } from '@angular/core';
+import {
+  renderActivityIndicator,
+  resolveAccessibilityProps,
+  type IAccessibilityProps,
+  type IAccessibilityStateValue,
+  type IActivityIndicatorPlatform,
+  type IActivityIndicatorProps,
+  type IActivityIndicatorSize,
+  type IAriaProps,
+} from '@symbiote-native/components';
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IDescriptor } from '@symbiote-native/components';
+import { anchorHostStyle } from '../../primitives';
+
+export type { IActivityIndicatorProps, IActivityIndicatorSize } from '@symbiote-native/components';
+
+// Narrows anchorHostStyle's `unknown` (it reads an opaque engine prop bag) to the shape
+// IActivityIndicatorProps['style'] actually declares, the same runtime guard image/shared.ts's
+// asStyle() uses for the identical reason — a style value is structurally opaque at the type
+// level, so this only rules out non-objects, never validates individual style keys.
+function asStyle(value: unknown): IActivityIndicatorProps['style'] {
+  return typeof value === 'object' && value !== null ? value : undefined;
+}
+
+// What the component itself takes as plain @Input()s: the full shared, cross-adapter
+// IActivityIndicatorProps surface minus onLayout and the accessibility callbacks, which it
+// exposes as real @Output() EventEmitters instead (see the class below), mirroring Pressable's
+// IAngularPressableInputs split.
+export type IActivityIndicatorInputs = Omit<
+  IActivityIndicatorProps,
+  | 'onLayout'
+  | 'onAccessibilityAction'
+  | 'onAccessibilityTap'
+  | 'onMagicTap'
+  | 'onAccessibilityEscape'
+>;
+
+@Directive()
+export abstract class ActivityIndicatorBase implements IActivityIndicatorInputs {
+  @Input() animating?: boolean;
+  @Input() color?: string;
+  @Input() hidesWhenStopped?: boolean;
+  @Input() nativeID?: string;
+  @Input() size?: IActivityIndicatorSize;
+  @Input() style?: IActivityIndicatorProps['style'];
+  @Input() testID?: string;
+  // Real @Output()s. This component renders through DescriptorOutlet (`symbiote-descriptor-
+  // outlet`), not a hand-written template: emitterHandler() below wraps each EventEmitter into a
+  // plain callback under the SAME onX key the shared, cross-adapter IActivityIndicatorProps
+  // expects, so the Descriptor's props bag still carries a function the engine's routeProp
+  // recognizes and routes to setEventListener — the outlet's renderer.setProperty call never
+  // sees an EventEmitter, only the wrapper.
+  @Output() readonly layout = new EventEmitter<ISymbioteEvent>();
+
+  @Input() accessible?: boolean;
+  @Input() accessibilityLabel?: string;
+  @Input() accessibilityHint?: string;
+  @Input() accessibilityRole?: IAccessibilityProps['accessibilityRole'];
+  @Input() accessibilityState?: IAccessibilityStateValue;
+  @Input() accessibilityValue?: IAccessibilityProps['accessibilityValue'];
+  @Input() accessibilityActions?: IAccessibilityProps['accessibilityActions'];
+  @Input() accessibilityLabelledBy?: string | string[];
+  @Input() importantForAccessibility?: IAccessibilityProps['importantForAccessibility'];
+  @Input() accessibilityLiveRegion?: IAccessibilityProps['accessibilityLiveRegion'];
+  @Input() screenReaderFocusable?: boolean;
+  @Input() accessibilityViewIsModal?: boolean;
+  @Input() accessibilityElementsHidden?: boolean;
+  @Input() accessibilityIgnoresInvertColors?: boolean;
+  @Input() accessibilityLanguage?: string;
+  @Input() accessibilityRespondsToUserInteraction?: boolean;
+  @Input() accessibilityShowsLargeContentViewer?: boolean;
+  @Input() accessibilityLargeContentTitle?: string;
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
+  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
+
+  @Input() role?: IAriaProps['role'];
+  @Input('aria-label') ariaLabel?: string;
+  @Input('aria-labelledby') ariaLabelledBy?: string;
+  @Input('aria-live') ariaLive?: IAriaProps['aria-live'];
+  @Input('aria-hidden') ariaHidden?: boolean;
+  @Input('aria-busy') ariaBusy?: boolean;
+  @Input('aria-checked') ariaChecked?: boolean | 'mixed';
+  @Input('aria-disabled') ariaDisabled?: boolean;
+  @Input('aria-expanded') ariaExpanded?: boolean;
+  @Input('aria-selected') ariaSelected?: boolean;
+  @Input('aria-modal') ariaModal?: boolean;
+  @Input('aria-valuemax') ariaValueMax?: number;
+  @Input('aria-valuemin') ariaValueMin?: number;
+  @Input('aria-valuenow') ariaValueNow?: number;
+  @Input('aria-valuetext') ariaValueText?: string;
+
+  protected abstract readonly defaultColor: string | null;
+  protected readonly nativeExtras: Readonly<Record<string, unknown>> = {};
+
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the descriptor-outlet-rendered wrapper the
+  // `descriptor` getter below builds. Merged FIRST so an explicit `style` @Input still wins
+  // (flattenStyle's later-wins collapse), mirroring every other composed component's anchor merge.
+  private readonly elementRef = inject(ElementRef);
+
+  // Stable bound wrappers (created ONCE, not per `descriptor` access) fed to emitterHandler below.
+  // jsonEqual (core/engine/src/commit.ts) falls through to Object.is for a function leaf, so a
+  // fresh closure built inside the `descriptor` getter would never equal the previous frame's
+  // closure even when nothing changed — every CD pass would read as "props changed" and force a
+  // real Fabric re-clone cascading up every ancestor to the root (the same hazard
+  // AnimatedComponentBase.reconcile() and ScrollViewStickyHeader's onHostLayout guard against).
+  private readonly onLayoutHandler = (event: ISymbioteEvent): void => this.layout.emit(event);
+  private readonly onAccessibilityActionHandler = (event: ISymbioteEvent): void =>
+    this.accessibilityAction.emit(event);
+  private readonly onAccessibilityTapHandler = (event: ISymbioteEvent): void =>
+    this.accessibilityTap.emit(event);
+  private readonly onMagicTapHandler = (event: ISymbioteEvent): void => this.magicTap.emit(event);
+  private readonly onAccessibilityEscapeHandler = (event: ISymbioteEvent): void =>
+    this.accessibilityEscape.emit(event);
+
+  get descriptor(): IDescriptor {
+    const props = resolveAccessibilityProps<IActivityIndicatorProps>({
+      animating: this.animating,
+      color: this.color,
+      hidesWhenStopped: this.hidesWhenStopped,
+      nativeID: this.nativeID,
+      size: this.size,
+      style: [asStyle(anchorHostStyle(this.elementRef)), this.style],
+      testID: this.testID,
+      onLayout: this.emitterHandler(this.layout, this.onLayoutHandler),
+      accessible: this.accessible,
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityHint: this.accessibilityHint,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityActions: this.accessibilityActions,
+      accessibilityLabelledBy: this.accessibilityLabelledBy,
+      importantForAccessibility: this.importantForAccessibility,
+      accessibilityLiveRegion: this.accessibilityLiveRegion,
+      screenReaderFocusable: this.screenReaderFocusable,
+      accessibilityViewIsModal: this.accessibilityViewIsModal,
+      accessibilityElementsHidden: this.accessibilityElementsHidden,
+      accessibilityIgnoresInvertColors: this.accessibilityIgnoresInvertColors,
+      accessibilityLanguage: this.accessibilityLanguage,
+      accessibilityRespondsToUserInteraction: this.accessibilityRespondsToUserInteraction,
+      accessibilityShowsLargeContentViewer: this.accessibilityShowsLargeContentViewer,
+      accessibilityLargeContentTitle: this.accessibilityLargeContentTitle,
+      onAccessibilityAction: this.emitterHandler(
+        this.accessibilityAction,
+        this.onAccessibilityActionHandler,
+      ),
+      onAccessibilityTap: this.emitterHandler(
+        this.accessibilityTap,
+        this.onAccessibilityTapHandler,
+      ),
+      onMagicTap: this.emitterHandler(this.magicTap, this.onMagicTapHandler),
+      onAccessibilityEscape: this.emitterHandler(
+        this.accessibilityEscape,
+        this.onAccessibilityEscapeHandler,
+      ),
+      role: this.role,
+      'aria-label': this.ariaLabel,
+      'aria-labelledby': this.ariaLabelledBy,
+      'aria-live': this.ariaLive,
+      'aria-hidden': this.ariaHidden,
+      'aria-busy': this.ariaBusy,
+      'aria-checked': this.ariaChecked,
+      'aria-disabled': this.ariaDisabled,
+      'aria-expanded': this.ariaExpanded,
+      'aria-selected': this.ariaSelected,
+      'aria-modal': this.ariaModal,
+      'aria-valuemax': this.ariaValueMax,
+      'aria-valuemin': this.ariaValueMin,
+      'aria-valuenow': this.ariaValueNow,
+      'aria-valuetext': this.ariaValueText,
+    });
+
+    const { animating, color, hidesWhenStopped, size, style, ...passthrough } = props;
+    return renderActivityIndicator(
+      {
+        animating: animating !== false,
+        color,
+        hidesWhenStopped: hidesWhenStopped !== false,
+        size: size ?? 'small',
+        style,
+        passthrough,
+      },
+      this.platform,
+    );
+  }
+
+  private get platform(): IActivityIndicatorPlatform {
+    return { defaultColor: this.defaultColor, nativeExtras: this.nativeExtras };
+  }
+
+  // Gates a STABLE bound handler behind `observed`, so an unbound event still resolves to
+  // `undefined` in the descriptor's props bag — the same "undefined means nobody cares" contract
+  // the old @Input() callback had, letting resolveAccessibilityProps drop the key entirely instead
+  // of handing the engine a no-op function. `handler` must be one of the readonly bound fields
+  // above, never a closure built here — see their doc comment for why.
+  private emitterHandler(
+    emitter: EventEmitter<ISymbioteEvent>,
+    handler: (event: ISymbioteEvent) => void,
+  ): ((event: ISymbioteEvent) => void) | undefined {
+    return emitter.observed ? handler : undefined;
+  }
+}