@symbiote-native/angular 1.0.0 → 2.0.1

package/metro-transformer.cjs

@@ -1,69 +0,0 @@
-// The Angular app-side Metro transformer: host-primitive lowering + the CSS pipeline.
-//
-// Point `metro.config.js`'s `babelTransformerPath` here INSTEAD of `./metro-css-parser`, and do
-// NOT also list `./babel-lower-host-primitives` in `babel.config.js` — as a babel plugin it does
-// half the job, silently.
-//
-// WHY a source pre-pass and not a plugin. Angular's linker reads an INLINE template by SLICING THE
-// FILE'S SOURCE TEXT at the AST node's own byte range (`templateFromPartialCode` in
-// `@angular/compiler-cli`'s bundled linker: `code: this.code`, `range: {startPos, endPos}`), never
-// from the string the AST carries. So a plugin that rewrites `template` in the AST is invisible to
-// a linker running in the SAME babel pass, while its edit to `dependencies` — read as an ordinary
-// AST array — lands. The result is the worst of both: the primitives are gone from `dependencies`
-// and the tags are still `<View>`/`<Pressable>`, so they match no directive at all, no component
-// template runs, and the screen loses its styles and its press handlers with nothing red anywhere.
-//
-// Printing the lowered AST back to TEXT before Metro parses it is what makes the two agree: the
-// linker then slices the rewritten template out of the source it was handed.
-//
-// .cjs for the same reason as this package's other loose scripts: Metro `require()`s a
-// babelTransformerPath directly, and the package is "type": "module".
-const { transformSync } = require('@babel/core');
-const { readFileSync } = require('node:fs');
-const { createHash } = require('node:crypto');
-const {
-  createCssMetroTransformer,
-  resolveUpstreamTransformer,
-} = require('@symbiote-native/css-parser');
-
-const LOWER_PLUGIN_PATH = require.resolve('./babel-lower-host-primitives.cjs');
-const lowerHostPrimitives = require(LOWER_PLUGIN_PATH);
-
-// ngc's partial output is the only thing this can act on, and every such file names the declaration
-// helper. Cheaper than parsing every file in the bundle to find out it has no component in it.
-const PARTIAL_DECLARATION_MARKER = 'ɵɵngDeclareComponent';
-
-function createLoweringTransformer(upstreamTransformer) {
-  return {
-    transform(params) {
-      if (!params.src.includes(PARTIAL_DECLARATION_MARKER)) {
-        return upstreamTransformer.transform(params);
-      }
-      const lowered = transformSync(params.src, {
-        filename: params.filename,
-        babelrc: false,
-        configFile: false,
-        plugins: [lowerHostPrimitives],
-      });
-      return upstreamTransformer.transform({
-        ...params,
-        src: lowered?.code ?? params.src,
-      });
-    },
-    // Metro's own key covers the upstream transformer and babel.config.js, NOT a plugin this file
-    // require()s itself — so editing the lowering rules would otherwise be served from cache and
-    // read on device as "the change did nothing".
-    getCacheKey(...args) {
-      const upstream = upstreamTransformer.getCacheKey?.(...args) ?? '';
-      const plugin = createHash('sha1')
-        .update(readFileSync(LOWER_PLUGIN_PATH))
-        .digest('hex');
-      return `${upstream}-symbiote-lower-${plugin}`;
-    },
-  };
-}
-
-module.exports = createCssMetroTransformer(
-  createLoweringTransformer(resolveUpstreamTransformer()),
-);
-module.exports.createLoweringTransformer = createLoweringTransformer;

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

@@ -1,23 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DescriptorOutlet } from '../../descriptor-to-angular';
-import { ActivityIndicatorBase } from './shared';
-import { SymbioteStyleInputDirective } from '../../primitives';
-export type { IActivityIndicatorProps } from './shared';
-
-@Component({
-  selector: 'ActivityIndicator',
-  standalone: true,
-  hostDirectives: [
-    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-  ],
-  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

@@ -1,21 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { DescriptorOutlet } from '../../descriptor-to-angular';
-import { ActivityIndicatorBase } from './shared';
-import { SymbioteStyleInputDirective } from '../../primitives';
-export type { IActivityIndicatorProps } from './shared';
-
-const IOS_DEFAULT_COLOR = '#999999';
-
-@Component({
-  selector: 'ActivityIndicator',
-  standalone: true,
-  hostDirectives: [
-    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-  ],
-  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

@@ -1,4 +0,0 @@
-// 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

@@ -1,225 +0,0 @@
-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;
-  }
-}

package/src/components/button.ts

@@ -1,237 +0,0 @@
-// Button for Angular. The minimal cross-platform button in RN's iOS shape (Button.js): a
-// TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold are
-// shared in @symbiote-native/components/view; Angular only composes its TouchableOpacity + a
-// symbiote-text child and re-maps the few Button-owned props. No JS-side platform branch, so this
-// stays a flat single file.
-//
-// RN's Button fixes accessibilityRole="button", marks the root accessible, and propagates
-// `disabled` into the accessibility state; those three win over any caller value. `title` becomes
-// the Text child; disabled forwards straight; touchSoundDisabled maps to the pressable's
-// android_disableSound. Every other field of the shared IButtonProps stays RE-EXPORTED from
-// @symbiote-native/components verbatim. onPress and the four accessibility callbacks are the
-// exceptions: each is a real @Output() here (`press`, `accessibilityAction`, `accessibilityTap`,
-// `magicTap`, `accessibilityEscape`), mirroring the Vue adapter's Button, which forks the same
-// onPress field the same way — not a new precedent, the existing one extended to accessibility.
-
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  inject,
-  Input,
-  Output,
-  signal,
-  type DoCheck,
-} from '@angular/core';
-import {
-  BUTTON_ACCESSIBILITY_ROLE,
-  resolveButtonTextStyle,
-  type IAccessibilityProps,
-  type IAccessibilityStateValue,
-  type IAriaProps,
-  type IButtonProps as ICoreButtonProps,
-} from '@symbiote-native/components';
-import type {
-  ISymbioteEvent,
-  ITextStyle,
-  IStyleProp,
-  IViewStyle,
-} from '@symbiote-native/engine';
-import { anchorStyleProp, TextHost } from '../primitives';
-import { TouchableOpacity } from './touchable';
-import {
-  gateWanted,
-  injectGateDemandAbove,
-  provideGateDemand,
-  type IGateDemand,
-  type IGatedAccessibilityEvent,
-} from '../gate-demand';
-
-export type IButtonProps = Omit<
-  ICoreButtonProps,
-  | 'onPress'
-  | 'onAccessibilityAction'
-  | 'onAccessibilityTap'
-  | 'onMagicTap'
-  | 'onAccessibilityEscape'
->;
-
-@Component({
-  selector: 'Button',
-  standalone: true,
-  viewProviders: [provideGateDemand(() => Button)],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [TouchableOpacity, TextHost],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <TouchableOpacity
-      [style]="anchorStyle"
-      (press)="press.emit($event)"
-      [disabled]="disabled"
-      [android_disableSound]="touchSoundDisabled"
-      [accessibilityRole]="buttonRole"
-      [accessible]="true"
-      [accessibilityState]="{ disabled }"
-      [testID]="testID"
-      [nativeID]="nativeID"
-      [hasTVPreferredFocus]="hasTVPreferredFocus"
-      [nextFocusDown]="nextFocusDown"
-      [nextFocusForward]="nextFocusForward"
-      [nextFocusLeft]="nextFocusLeft"
-      [nextFocusRight]="nextFocusRight"
-      [nextFocusUp]="nextFocusUp"
-      [accessibilityLabel]="accessibilityLabel"
-      [accessibilityHint]="accessibilityHint"
-      [accessibilityValue]="accessibilityValue"
-      [accessibilityActions]="accessibilityActions"
-      [accessibilityLabelledBy]="accessibilityLabelledBy"
-      [importantForAccessibility]="importantForAccessibility"
-      [accessibilityLiveRegion]="accessibilityLiveRegion"
-      [screenReaderFocusable]="screenReaderFocusable"
-      [accessibilityViewIsModal]="accessibilityViewIsModal"
-      [accessibilityElementsHidden]="accessibilityElementsHidden"
-      [accessibilityIgnoresInvertColors]="accessibilityIgnoresInvertColors"
-      [accessibilityLanguage]="accessibilityLanguage"
-      [accessibilityRespondsToUserInteraction]="
-        accessibilityRespondsToUserInteraction
-      "
-      [accessibilityShowsLargeContentViewer]="
-        accessibilityShowsLargeContentViewer
-      "
-      [accessibilityLargeContentTitle]="accessibilityLargeContentTitle"
-      (accessibilityAction)="accessibilityAction.emit($event)"
-      (accessibilityTap)="accessibilityTap.emit($event)"
-      (magicTap)="magicTap.emit($event)"
-      (accessibilityEscape)="accessibilityEscape.emit($event)"
-      [ariaLabel]="ariaLabel"
-      [ariaBusy]="ariaBusy"
-      [ariaChecked]="ariaChecked"
-      [ariaDisabled]="ariaDisabled"
-      [ariaExpanded]="ariaExpanded"
-      [ariaHidden]="ariaHidden"
-      [ariaLabelledBy]="ariaLabelledBy"
-      [ariaLive]="ariaLive"
-      [ariaSelected]="ariaSelected"
-      [ariaModal]="ariaModal"
-      [ariaValueMax]="ariaValueMax"
-      [ariaValueMin]="ariaValueMin"
-      [ariaValueNow]="ariaValueNow"
-      [ariaValueText]="ariaValueText"
-      [role]="role"
-    >
-      <symbiote-text [style]="textStyle">{{ title }}</symbiote-text>
-    </TouchableOpacity>
-  `,
-})
-export class Button implements IButtonProps, DoCheck {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment in primitives/shared.ts) — NOT the inner
-  // TouchableOpacity/Pressable one level down. RN's real Button takes no `style` prop, so this
-  // is the only style source forwarded.
-  private readonly elementRef = inject(ElementRef);
-
-  @Output() readonly press = new EventEmitter<ISymbioteEvent>();
-  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
-  @Output() readonly accessibilityTap = new EventEmitter<ISymbioteEvent>();
-  @Output() readonly magicTap = new EventEmitter<ISymbioteEvent>();
-  @Output() readonly accessibilityEscape = new EventEmitter<ISymbioteEvent>();
-
-  // This wrapper binds the four gated accessibility events on the component it renders, which
-  // Angular forces to be unconditional and which would light that component's gates on every
-  // instance. It answers for them instead — see `gate-demand.ts`.
-  private readonly gateDemandAbove = injectGateDemandAbove();
-
-  wantsGate(name: IGatedAccessibilityEvent): boolean {
-    return gateWanted(this.gateDemandAbove, name, this[name]);
-  }
-
-  // Button-owned props: title is the Text child, color/disabled fold into the label style, and
-  // touchSoundDisabled re-maps onto TouchableOpacity.
-  @Input() title = '';
-  @Input() color?: string;
-  @Input() disabled?: boolean;
-  @Input() touchSoundDisabled?: boolean;
-  @Input() testID?: string;
-
-  // TV-focus props (Button.js): inert on a phone host, forwarded through TouchableOpacity.
-  @Input() hasTVPreferredFocus?: boolean;
-  @Input() nextFocusDown?: number;
-  @Input() nextFocusForward?: number;
-  @Input() nextFocusLeft?: number;
-  @Input() nextFocusRight?: number;
-  @Input() nextFocusUp?: number;
-
-  // Accessibility surface (IAccessibilityProps). accessibilityRole, accessible, and
-  // accessibilityState are declared for surface completeness but Button forces its own
-  // (button / true / { disabled }); the caller value is ignored, mirroring RN's Button.js.
-  @Input() nativeID?: string;
-  @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;
-
-  // Web-alias a11y surface (IAriaProps). External dashed aliases are exposed as Angular inputs and
-  // forwarded to TouchableOpacity's camelCase aria inputs.
-  @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;
-
-  // RN's Button is always accessibilityRole="button"; the shared role constant, not a literal.
-  readonly buttonRole = BUTTON_ACCESSIBILITY_ROLE;
-
-  // The label style with the caller color tinted in and `disabled` greying it out (disabled wins),
-  // computed by the shared fold so every adapter paints the identical button.
-  get textStyle(): ITextStyle {
-    return resolveButtonTextStyle(this.color, this.disabled);
-  }
-
-  // Polled, not read live: a class toggled after mount reaches the anchor through
-  // addClass/removeClass, which dirties nothing, so a plain getter froze at its creation value.
-  // Button cannot use SymbioteStyleInputDirective instead - RN's Button has no `style` prop, so
-  // there is no `style` @Input for it to hang off.
-  //
-  // ngDoCheck runs during the PARENT's refresh even when this view is skipped; the signal write is
-  // what marks this view. The anchor returns the same props.style reference until a commit changes
-  // it, so Object.is makes an unchanged poll free.
-  private readonly anchorStyleValue = signal<
-    IStyleProp<IViewStyle> | undefined
-  >(undefined);
-
-  ngDoCheck(): void {
-    this.anchorStyleValue.set(anchorStyleProp<IViewStyle>(this.elementRef));
-  }
-
-  get anchorStyle(): IStyleProp<IViewStyle> | undefined {
-    return this.anchorStyleValue();
-  }
-}

package/src/components/image/index.android.ts

@@ -1,95 +0,0 @@
-import {
-  CUSTOM_ELEMENTS_SCHEMA,
-  Component,
-  ElementRef,
-  inject,
-  signal,
-  type DoCheck,
-  type OnChanges,
-} from '@angular/core';
-import {
-  anchorHostStyle,
-  ImageHost,
-  SymbioteHostPropsDirective,
-  SymbioteStyleInputDirective,
-} from '../../primitives';
-import {
-  IMAGE_INPUTS,
-  IMAGE_OUTPUTS,
-  ImageBase,
-  resolveImageProps,
-} from './shared';
-export { setImageSourceResolver } from './shared';
-export type {
-  IImageProps,
-  IImageSource,
-  IImageSourceProp,
-  IResizeMode,
-  IImageSize,
-  IImageCacheStatus,
-} from './shared';
-
-@Component({
-  selector: 'Image',
-  standalone: true,
-  hostDirectives: [
-    { directive: SymbioteStyleInputDirective, inputs: ['style'] },
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [ImageHost, SymbioteHostPropsDirective],
-  inputs: IMAGE_INPUTS,
-  outputs: IMAGE_OUTPUTS,
-  template: `
-    <symbiote-image
-      [symbioteHostProps]="imageProps()"
-      (loadStart)="handleLoadStart($event)"
-      (load)="handleLoad($event)"
-      (loadEnd)="handleLoadEnd($event)"
-      (error)="handleError($event)"
-      (progress)="handleProgress($event)"
-      (partialLoad)="handlePartialLoad($event)"
-    />
-  `,
-})
-export class Image extends ImageBase implements OnChanges, DoCheck {
-  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
-  // onto (see anchorHostStyle's doc comment) — NOT the inner `symbiote-image` one level down.
-  private readonly elementRef = inject(ElementRef);
-
-  // The anchor's class-derived style is written by the renderer's addClass/removeClass and never
-  // reaches Angular's input pipeline (a bare `class="x"` never appears in SimpleChanges — see
-  // anchorHostStyle's doc comment), so ImageBase's inputsRevision cannot see it. Hence its own
-  // signal: a plain field read inside a computed() would be untracked and the bag would go stale
-  // the moment a `[class.x]`/`[ngClass]` toggled.
-  //
-  // ngDoCheck is the right cadence: render3's callHooks flushes a node's pre-order hooks at the
-  // next `ɵɵadvance` past it (or in refreshView's post-template flush), i.e. AFTER the declaring
-  // template's ɵɵclassProp wrote the class onto this element and BEFORE this component's own view
-  // refreshes — the exact window a class poll needs. callHooks also runs under
-  // setActiveConsumer(null), so the write registers no dependency on the caller's view (no NG0600).
-  // commitClassStyle allocates a fresh style array only when a token actually moved, so signal.set's
-  // own Object.is check makes an unchanged poll a no-op that dirties nothing.
-  //
-  // Known gap, shared with every other component polling this way (Pressable, SafeAreaView,
-  // TouchableNativeFeedback): `[ngClass]` applies its tokens from NgClass's OWN ngDoCheck, and a
-  // node's hooks flush in registration order with the component's first, so an [ngClass] flip lands
-  // one pass after this poll reads it. `class=` and `[class.x]` are written by the declaring
-  // template's styling instructions and so are always current here.
-  private readonly anchorStyle = signal<unknown>(undefined);
-
-  // ImageBase is undecorated, so the input bump is declared here rather than inherited.
-  ngOnChanges(): void {
-    this.bumpInputsRevision();
-  }
-
-  ngDoCheck(): void {
-    this.anchorStyle.set(anchorHostStyle(this.elementRef));
-  }
-
-  protected override buildImageProps(): Record<string, unknown> {
-    return resolveImageProps({
-      ...this.imageInputProps,
-      style: [this.anchorStyle(), this.style],
-    });
-  }
-}