@symbiote-native/angular 0.1.0

package/src/components/switch/android-switch-class.test.ts

@@ -0,0 +1,42 @@
+// Android-specific twin of the class= regression covered for iOS in switch.test.ts. Switch's
+// hostProps getter is overridden per-platform component (index.ios.ts / index.android.ts), each
+// injecting its OWN ElementRef, so the fix needs its own coverage against the Android build too.
+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 { Switch } from './index.android';
+
+const ROOT_TAG = 942;
+const fabric = installFabric();
+
+beforeEach(() => {
+  fabric.reset();
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+@Component({
+  selector: 'symbiote-android-switch-class-host',
+  standalone: true,
+  imports: [Switch],
+  template: `<Switch [testID]="'switch-with-class'" class="card"></Switch>`,
+})
+class AndroidSwitchClassHost {}
+
+describe('Switch (android)', () => {
+  it('resolves a class= on the Switch use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, AndroidSwitchClassHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'switch-with-class');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});

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

@@ -0,0 +1,61 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
+import { anchorHostStyle, SwitchHost, SymbioteHostPropsDirective } from '../../primitives';
+import { SwitchBase } from './shared';
+export type { ISwitchProps, ISwitchTrackColor } from './shared';
+
+@Component({
+  selector: 'Switch',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [SwitchHost, SymbioteHostPropsDirective],
+  inputs: [
+    'value',
+    'disabled',
+    'trackColor',
+    'thumbColor',
+    'ios_backgroundColor',
+    'style',
+    'nativeID',
+    'testID',
+    'accessibilityLabel',
+    'accessibilityRole',
+    'accessibilityState',
+    'accessibilityValue',
+    'accessibilityHint',
+    'accessible',
+    'role',
+    'aria-label',
+    'aria-disabled',
+    'aria-checked',
+  ],
+  outputs: ['valueChange', 'change'],
+  template: `
+    <symbiote-switch
+      #nativeSwitch="symbioteHost"
+      [symbioteHostProps]="hostProps"
+      (change)="handleChange($event, nativeSwitch)"
+    />
+  `,
+})
+export class Switch extends SwitchBase {
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-switch> leaf one level down.
+  private readonly elementRef = inject(ElementRef);
+
+  protected readonly platform = {
+    snapBackCommand: 'setNativeValue',
+    trackColorProps: (value: boolean, trackColor?: { false?: string; true?: string }) => ({
+      trackColorForFalse: trackColor?.false,
+      trackColorForTrue: trackColor?.true,
+      trackTintColor: value ? trackColor?.true : trackColor?.false,
+    }),
+  };
+
+  // The anchor's class-derived style goes first, then whatever SwitchBase already resolved
+  // (its own explicit `style` @Input plus the ios_backgroundColor fold), so an explicit [style]
+  // still beats the ambient class.
+  override get hostProps(): Record<string, unknown> {
+    const props = super.hostProps;
+    return { ...props, style: [anchorHostStyle(this.elementRef), props['style']] };
+  }
+}

package/src/components/switch/index.ios.ts

@@ -0,0 +1,60 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, inject } from '@angular/core';
+import { anchorHostStyle, SwitchHost, SymbioteHostPropsDirective } from '../../primitives';
+import { SwitchBase } from './shared';
+export type { ISwitchProps, ISwitchTrackColor } from './shared';
+
+@Component({
+  selector: 'Switch',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [SwitchHost, SymbioteHostPropsDirective],
+  inputs: [
+    'value',
+    'disabled',
+    'trackColor',
+    'thumbColor',
+    'ios_backgroundColor',
+    'style',
+    'nativeID',
+    'testID',
+    'accessibilityLabel',
+    'accessibilityRole',
+    'accessibilityState',
+    'accessibilityValue',
+    'accessibilityHint',
+    'accessible',
+    'role',
+    'aria-label',
+    'aria-disabled',
+    'aria-checked',
+  ],
+  outputs: ['valueChange', 'change'],
+  template: `
+    <symbiote-switch
+      #nativeSwitch="symbioteHost"
+      [symbioteHostProps]="hostProps"
+      (change)="handleChange($event, nativeSwitch)"
+    />
+  `,
+})
+export class Switch extends SwitchBase {
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment) — NOT the <symbiote-switch> leaf one level down.
+  private readonly elementRef = inject(ElementRef);
+
+  protected readonly platform = {
+    snapBackCommand: 'setValue',
+    trackColorProps: (_value: boolean, trackColor?: { false?: string; true?: string }) => ({
+      onTintColor: trackColor?.true,
+      tintColor: trackColor?.false,
+    }),
+  };
+
+  // The anchor's class-derived style goes first, then whatever SwitchBase already resolved
+  // (its own explicit `style` @Input plus the ios_backgroundColor fold), so an explicit [style]
+  // still beats the ambient class.
+  override get hostProps(): Record<string, unknown> {
+    const props = super.hostProps;
+    return { ...props, style: [anchorHostStyle(this.elementRef), props['style']] };
+  }
+}

package/src/components/switch/index.ts

@@ -0,0 +1,4 @@
+// Base/default Switch. Re-exports the iOS build; Metro picks index.ios.ts / index.android.ts
+// in platform bundles. The Angular lifecycle reuses the shared Switch reducer + render fold.
+
+export * from './index.ios';

package/src/components/switch/shared.ts

@@ -0,0 +1,197 @@
+import { Directive, EventEmitter, Output } from '@angular/core';
+import { renderSwitch, resolveAccessibilityProps } from '@symbiote-native/components';
+import type {
+  ISwitchPlatform,
+  ISwitchProps,
+  ISwitchState,
+  ISwitchTrackColor,
+} from '@symbiote-native/components';
+import {
+  createInitialSwitchState,
+  shouldSnapBack,
+  switchReducer,
+  valueFromChange,
+} from '@symbiote-native/components';
+import {
+  dispatchViewCommand,
+  dlog,
+  isSymbioteNode,
+  whenCommitted,
+  type ISymbioteEvent,
+  type ISymbioteNode,
+  type IStyleProp,
+  type IViewStyle,
+} from '@symbiote-native/engine';
+
+export type { ISwitchProps, ISwitchTrackColor } from '@symbiote-native/components';
+
+export type ISwitchInputs = Pick<
+  ISwitchProps,
+  | 'value'
+  | 'disabled'
+  | 'trackColor'
+  | 'thumbColor'
+  | 'ios_backgroundColor'
+  | 'style'
+  | 'nativeID'
+  | 'testID'
+  | 'accessibilityLabel'
+  | 'accessibilityRole'
+  | 'accessibilityState'
+  | 'accessibilityValue'
+  | 'accessibilityHint'
+  | 'accessible'
+  | 'role'
+  | 'aria-label'
+  | 'aria-disabled'
+  | 'aria-checked'
+>;
+
+type ISwitchHostPlatform = ISwitchPlatform & { snapBackCommand: string };
+
+type IHostProps = Record<string, unknown>;
+
+function readSwitchNode(value: unknown): ISymbioteNode | null {
+  if (isSymbioteNode(value)) return value;
+  if (
+    typeof value === 'object' &&
+    value !== null &&
+    'node' in value &&
+    isSymbioteNode(value.node)
+  ) {
+    return value.node;
+  }
+  return null;
+}
+
+function isSwitchEvent(event: unknown): event is ISymbioteEvent {
+  return (
+    typeof event === 'object' &&
+    event !== null &&
+    'nativeEvent' in event &&
+    typeof event.nativeEvent === 'object' &&
+    event.nativeEvent !== null
+  );
+}
+
+// @Directive() (no selector) is the Angular-sanctioned decorator for an abstract base whose
+// concrete subclasses are real @Components — ngc's AOT build (NG2007) requires it the moment the
+// base itself carries decorated members (@Output() here), mirroring ScrollViewBase.
+@Directive()
+export abstract class SwitchBase implements ISwitchInputs {
+  // The value/change lifecycle as real Angular events: `(valueChange)="onToggle($event)"`, not
+  // `[onValueChange]="onToggle"` — mirrors Pressable's press/hover @Output() conversion. Unlike
+  // Pressable's createPressHandlers, handleChange() below calls `.emit()` unconditionally: it needs
+  // no "was this bound" adapter because EventEmitter.emit() is already a safe no-op with no subscribers.
+  @Output() readonly valueChange = new EventEmitter<boolean>();
+  @Output() readonly change = new EventEmitter<ISymbioteEvent>();
+  value: boolean | undefined;
+  disabled: boolean | undefined;
+  trackColor: ISwitchTrackColor | undefined;
+  thumbColor: string | undefined;
+  ios_backgroundColor: string | undefined;
+  style: IStyleProp<IViewStyle> | undefined;
+  nativeID: string | undefined;
+  testID: string | undefined;
+  accessibilityLabel: string | undefined;
+  accessibilityRole: ISwitchInputs['accessibilityRole'];
+  accessibilityState: ISwitchInputs['accessibilityState'];
+  accessibilityValue: ISwitchInputs['accessibilityValue'];
+  accessibilityHint: string | undefined;
+  accessible: boolean | undefined;
+  role: ISwitchInputs['role'];
+  'aria-label': string | undefined;
+  'aria-disabled': boolean | undefined;
+  'aria-checked': boolean | 'mixed' | undefined;
+
+  protected abstract readonly platform: ISwitchHostPlatform;
+  private switchState: ISwitchState = createInitialSwitchState();
+
+  get hostProps(): IHostProps {
+    const props = resolveAccessibilityProps(this.inputProps());
+    const {
+      value,
+      disabled,
+      trackColor,
+      thumbColor,
+      ios_backgroundColor,
+      style,
+      onValueChange: _onValueChange,
+      ...passthrough
+    } = props;
+
+    return renderSwitch(
+      {
+        value: value === true,
+        disabled,
+        trackColor,
+        thumbColor,
+        ios_backgroundColor,
+        style,
+        passthrough,
+      },
+      this.platform,
+    ).props;
+  }
+
+  handleChange(event: unknown, node: unknown): void {
+    if (!isSwitchEvent(event)) return;
+    this.change.emit(event);
+    const next = valueFromChange(event);
+    dlog(
+      `Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`,
+    );
+    if (next === undefined) return;
+
+    this.valueChange.emit(next);
+    this.switchState = switchReducer(this.switchState, { type: 'native-reported', value: next });
+
+    const hostNode = readSwitchNode(node);
+    if (hostNode === null) return;
+    queueMicrotask(() => this.snapBackIfNeeded(hostNode));
+  }
+
+  private snapBackIfNeeded(node: ISymbioteNode): void {
+    const fabricValue = this.value === true;
+    if (!shouldSnapBack(this.switchState, fabricValue)) {
+      dlog(
+        `Switch snap-back no-op reported=${String(this.switchState.lastNativeReport)} value=${fabricValue}`,
+      );
+      return;
+    }
+
+    dlog(
+      `Switch ${this.platform.snapBackCommand} snap-back reported=${String(this.switchState.lastNativeReport)} value=${fabricValue}`,
+    );
+    whenCommitted(node, () => {
+      dispatchViewCommand(node, this.platform.snapBackCommand, [fabricValue]);
+    });
+  }
+
+  private inputProps(): Partial<ISwitchProps> {
+    const props: Partial<ISwitchProps> = {
+      value: this.value,
+      disabled: this.disabled,
+      trackColor: this.trackColor,
+      thumbColor: this.thumbColor,
+      ios_backgroundColor: this.ios_backgroundColor,
+      style: this.style,
+    };
+
+    return {
+      ...props,
+      nativeID: this.nativeID,
+      testID: this.testID,
+      accessibilityLabel: this.accessibilityLabel,
+      accessibilityRole: this.accessibilityRole,
+      accessibilityState: this.accessibilityState,
+      accessibilityValue: this.accessibilityValue,
+      accessibilityHint: this.accessibilityHint,
+      accessible: this.accessible,
+      role: this.role,
+      'aria-label': this['aria-label'],
+      'aria-disabled': this['aria-disabled'],
+      'aria-checked': this['aria-checked'],
+    };
+  }
+}

package/src/components/switch/switch.test.ts

@@ -0,0 +1,92 @@
+import '@angular/compiler';
+import { Component } from '@angular/core';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { clearGlobalStyles, registerStyles } from '@symbiote-native/engine';
+import { installFabric } from '@symbiote-native/test-utils';
+
+import { mount, unmount } from '../../render';
+import { Switch } from './index';
+
+const ROOT_TAG = 902;
+const fabric = installFabric();
+
+let capturedHost: SwitchHost | undefined;
+
+@Component({
+  selector: 'symbiote-switch-host',
+  standalone: true,
+  imports: [Switch],
+  template: `
+    <Switch [value]="value" (valueChange)="onValueChange($event)" (change)="onChange($event)">
+    </Switch>
+  `,
+})
+class SwitchHost {
+  value = false;
+  onValueChange = vi.fn((next: boolean) => {
+    this.value = next;
+  });
+  onChange = 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);
+  clearGlobalStyles();
+});
+
+describe('Switch', () => {
+  it('commits a controlled Switch with the resolved iOS color props', async () => {
+    mount(ROOT_TAG, SwitchHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.viewName === 'Switch');
+    expect(node, 'Switch node committed').toBeDefined();
+    expect(node?.props).toMatchObject({
+      value: false,
+    });
+  });
+
+  it('fires onValueChange and onChange when native reports a change', async () => {
+    mount(ROOT_TAG, SwitchHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.viewName === 'Switch');
+    expect(node).toBeDefined();
+
+    fabric.fireEvent(node?.instanceHandle, 'topChange', { value: true, eventCount: 1 });
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const host = capturedHost;
+    expect(host?.onValueChange).toHaveBeenCalledWith(true);
+    expect(host?.onChange).toHaveBeenCalled();
+    expect(host?.value).toBe(true);
+  });
+
+  it('resolves a class= on the Switch use site onto the real committed view, not the anchor', async () => {
+    registerStyles({ card: { backgroundColor: 'red' } });
+
+    mount(ROOT_TAG, SwitchClassHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'switch-with-class');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});
+
+@Component({
+  selector: 'symbiote-switch-class-host',
+  standalone: true,
+  imports: [Switch],
+  template: `<Switch [testID]="'switch-with-class'" class="card"></Switch>`,
+})
+class SwitchClassHost {}

package/src/components/text-input-class-style.test.ts

@@ -0,0 +1,54 @@
+// Regression test for the anchor/class bug (angular-adapter skill): TextInput is its own
+// ANCHOR_HOST_COMPONENTS entry — a class= on <TextInput> resolves onto TextInput's OWN anchor and
+// needs its OWN anchorHostStyle merge (see text-input.ts's buildPassthrough), for BOTH the
+// single-line and multiline host it renders through (`@if`/`@else` picks one at runtime). 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 { TextInput } from './text-input';
+
+const ROOT_TAG = 917;
+const fabric = installFabric();
+
+@Component({
+  selector: 'symbiote-text-input-class-host',
+  standalone: true,
+  imports: [TextInput],
+  template: `
+    <TextInput [testID]="'single-line'" class="card" />
+    <TextInput [testID]="'multiline'" [multiline]="true" class="card" />
+  `,
+})
+class TextInputClassHost {}
+
+beforeEach(() => {
+  fabric.reset();
+  registerStyles({ card: { backgroundColor: 'red' } });
+});
+afterEach(() => {
+  unmount(ROOT_TAG);
+  clearGlobalStyles();
+});
+
+describe('TextInput anchor class= resolution', () => {
+  it('resolves a class= on the TextInput use site onto the real committed single-line host', async () => {
+    mount(ROOT_TAG, TextInputClassHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'single-line');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+
+  it('resolves a class= on the TextInput use site onto the real committed multiline host', async () => {
+    mount(ROOT_TAG, TextInputClassHost);
+    await new Promise<void>(resolve => setTimeout(resolve, 0));
+
+    const node = fabric.find(n => n.props.testID === 'multiline');
+    expect(node?.props.backgroundColor).toBe('red');
+  });
+});