@symbiote-native/angular 3.2.0 → 3.4.0

package/src/elements-controls.ts

@@ -0,0 +1,290 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  Renderer2,
+  forwardRef,
+  inject,
+} from '@angular/core';
+import type { OnDestroy } from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
+import { VALUE_CHANGE_EVENT } from './renderer/value-change';
+import type {
+  IActivityIndicatorProps,
+  IInputAccessoryViewViewProps,
+  ILayoutConformanceMode,
+  IModalViewProps,
+  ISwitchProps,
+  ITextInputProps,
+} from '@symbiote-native/components';
+import type { IStickyHeaderElementProps } from './element-props';
+import type { IAngularRefreshControlProps } from './components/refresh-control-props';
+import { TextInputNativeInputs } from './element-text-input-native';
+import {
+  ReadBackElement,
+  SymbioteElement,
+  ValueChangeElement,
+} from './element-base';
+
+@Directive({ selector: 'text-input', standalone: true })
+export class TextInputElement extends TextInputNativeInputs {
+  @Input() value?: ITextInputProps['value'];
+  @Input() defaultValue?: ITextInputProps['defaultValue'];
+  @Input() placeholder?: ITextInputProps['placeholder'];
+  @Input() placeholderTextColor?: ITextInputProps['placeholderTextColor'];
+  @Input() multiline?: ITextInputProps['multiline'];
+  @Input() numberOfLines?: ITextInputProps['numberOfLines'];
+  @Input() maxLength?: ITextInputProps['maxLength'];
+  @Input() editable?: ITextInputProps['editable'];
+  @Input() readOnly?: ITextInputProps['readOnly'];
+  @Input() autoFocus?: ITextInputProps['autoFocus'];
+  @Input() autoCapitalize?: ITextInputProps['autoCapitalize'];
+  @Input() autoComplete?: ITextInputProps['autoComplete'];
+  @Input() autoCorrect?: ITextInputProps['autoCorrect'];
+  @Input() blurOnSubmit?: ITextInputProps['blurOnSubmit'];
+  @Input() submitBehavior?: ITextInputProps['submitBehavior'];
+  @Input() cursorColor?: ITextInputProps['cursorColor'];
+  @Input() enterKeyHint?: ITextInputProps['enterKeyHint'];
+  @Input() returnKeyType?: ITextInputProps['returnKeyType'];
+  @Input() inputMode?: ITextInputProps['inputMode'];
+  @Input() keyboardType?: ITextInputProps['keyboardType'];
+  @Input() inputAccessoryViewID?: ITextInputProps['inputAccessoryViewID'];
+  @Input() scrollEnabled?: ITextInputProps['scrollEnabled'];
+  @Input() secureTextEntry?: ITextInputProps['secureTextEntry'];
+  @Input() selectTextOnFocus?: ITextInputProps['selectTextOnFocus'];
+  @Input() selection?: ITextInputProps['selection'];
+  @Input() selectionColor?: ITextInputProps['selectionColor'];
+  @Input() selectionHandleColor?: ITextInputProps['selectionHandleColor'];
+  @Input() showSoftInputOnFocus?: ITextInputProps['showSoftInputOnFocus'];
+  @Input() textAlign?: ITextInputProps['textAlign'];
+  @Input() textContentType?: ITextInputProps['textContentType'];
+  @Input() underlineColorAndroid?: ITextInputProps['underlineColorAndroid'];
+  @Input() onValueChange?: ITextInputProps['onValueChange'];
+  @Input() onChangeText?: ITextInputProps['onChangeText'];
+  @Input() onContentSizeChange?: ITextInputProps['onContentSizeChange'];
+  @Input() onEndEditing?: ITextInputProps['onEndEditing'];
+  @Input() onKeyPress?: ITextInputProps['onKeyPress'];
+  @Input() onSelectionChange?: ITextInputProps['onSelectionChange'];
+  @Input() onSubmitEditing?: ITextInputProps['onSubmitEditing'];
+
+  // NonNullable, not the prop type: `[(value)]="name"` binds a `string`, and an emitter that can
+  // also emit `undefined` fails the two-way assignability check ngtsc runs on the event half.
+  @Output() readonly valueChange = new EventEmitter<
+    NonNullable<ITextInputProps['value']>
+  >();
+
+  protected hasValueSubscriber(): boolean {
+    return this.valueChange.observed;
+  }
+
+  protected emitValue(value: unknown): void {
+    if (typeof value === 'string') this.valueChange.emit(value);
+  }
+}
+
+@Directive({ selector: 'text-input-multiline', standalone: true })
+export class MultilineTextInputElement extends TextInputElement {}
+
+@Directive({ selector: 'switch, symbiote-switch', standalone: true })
+export class SwitchElement extends ValueChangeElement {
+  @Input() value?: ISwitchProps['value'];
+  @Input() disabled?: ISwitchProps['disabled'];
+  @Input() trackColor?: ISwitchProps['trackColor'];
+  @Input() thumbColor?: ISwitchProps['thumbColor'];
+  @Input() ios_backgroundColor?: ISwitchProps['ios_backgroundColor'];
+  @Input() onValueChange?: ISwitchProps['onValueChange'];
+
+  @Output() readonly valueChange = new EventEmitter<
+    NonNullable<ISwitchProps['value']>
+  >();
+
+  protected hasValueSubscriber(): boolean {
+    return this.valueChange.observed;
+  }
+
+  protected emitValue(value: unknown): void {
+    if (typeof value === 'boolean') this.valueChange.emit(value);
+  }
+}
+
+/**
+ * `[(ngModel)]` / `formControlName` on a `<text-input>` or a `<switch>`.
+ *
+ * The wrappers provided `NG_VALUE_ACCESSOR` themselves; a tag has no class for @angular/forms to
+ * call into, so the accessor moves onto a directive of its own rather than being dropped — the
+ * shape Angular's own `DefaultValueAccessor` takes for `<input>`. Providing it unconditionally is
+ * safe: @angular/forms looks the accessor up only when an `ngModel` / `formControl*` directive sits
+ * on the SAME element, so a plain `<switch [(value)]>` never reaches it.
+ *
+ * Everything below goes through `Renderer2`, which is the adapter's own — `setProperty` lands in
+ * `routeProp` and `listen('valueChange')` is already unwrapped to a bare value there, so this
+ * directive holds no fold of its own.
+ */
+@Directive()
+abstract class SymbioteValueAccessor
+  implements ControlValueAccessor, OnDestroy
+{
+  private readonly renderer = inject(Renderer2);
+  private readonly host = inject(ElementRef);
+  private unlisten?: () => void;
+
+  // The prop that spells "not editable" for this tag: RN's TextInput has no `disabled`, it has
+  // `editable` (inverted), while Switch takes `disabled` straight.
+  protected abstract writeDisabled(isDisabled: boolean): void;
+
+  protected setProp(name: string, value: unknown): void {
+    this.renderer.setProperty(this.host.nativeElement, name, value);
+  }
+
+  writeValue(value: unknown): void {
+    this.setProp('value', value ?? undefined);
+  }
+
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.unlisten?.();
+    this.unlisten = this.renderer.listen(
+      this.host.nativeElement,
+      VALUE_CHANGE_EVENT,
+      (value: unknown) => {
+        // THE HALF THE DOM DOES FOR FREE, and without it a controlled input undoes every
+        // keystroke. `<text-input>`'s behavior re-commands the native text whenever `props.value`
+        // disagrees with what native last reported — that is what makes it controlled — and the
+        // read-back flush exists so the app's new value is on the node by the time the commit runs.
+        // @angular/forms does not reach the node in that window: `NgModel.ngOnChanges` defers
+        // `_updateValue` through `resolvedPromise.then`, so `writeValue` lands a MICROTASK after
+        // the flush, and the commit in between still reads the value from before the keystroke.
+        //
+        // In a browser there is nothing to do here: `input.value` already holds what the user
+        // typed. `node.props.value` is the same slot, and nothing else writes it — so the accessor
+        // mirrors it, which is the shape rather than a workaround. A later `writeValue` still wins,
+        // so an app that transforms or refuses the value keeps doing so, one microtask on.
+        //
+        // Without this, every character snaps the field back to its mounted text.
+        this.setProp('value', value);
+        fn(value);
+      },
+    );
+  }
+
+  // Native has no blur-driven "touched" signal distinct from `blur`, and RN's own onBlur is what an
+  // app binds — so touched is driven off the same event rather than a second channel.
+  registerOnTouched(fn: () => void): void {
+    this.setProp('onBlur', () => fn());
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.writeDisabled(isDisabled);
+  }
+
+  ngOnDestroy(): void {
+    this.unlisten?.();
+  }
+}
+
+@Directive({
+  selector:
+    'text-input[ngModel], text-input[formControl], text-input[formControlName], text-input-multiline[ngModel], text-input-multiline[formControl], text-input-multiline[formControlName]',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextInputValueAccessor),
+      multi: true,
+    },
+  ],
+})
+export class TextInputValueAccessor extends SymbioteValueAccessor {
+  protected override writeDisabled(isDisabled: boolean): void {
+    this.setProp('editable', !isDisabled);
+  }
+}
+
+@Directive({
+  selector: 'switch[ngModel], switch[formControl], switch[formControlName]',
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SwitchValueAccessor),
+      multi: true,
+    },
+  ],
+})
+export class SwitchValueAccessor extends SymbioteValueAccessor {
+  protected override writeDisabled(isDisabled: boolean): void {
+    this.setProp('disabled', isDisabled);
+  }
+}
+
+// The HOST — RN's centering RCTView (ActivityIndicator.js:112), which is the tag an app writes.
+// The four spinner props are declared here because that is where the app writes them; the engine's
+// behavior redirects them onto the spinner it builds underneath (`slotProps`).
+@Directive({ selector: 'activity-indicator', standalone: true })
+export class ActivityIndicatorElement extends SymbioteElement {
+  @Input() animating?: IActivityIndicatorProps['animating'];
+  @Input() color?: IActivityIndicatorProps['color'];
+  @Input() size?: IActivityIndicatorProps['size'];
+  @Input() hidesWhenStopped?: IActivityIndicatorProps['hidesWhenStopped'];
+}
+
+// The native spinner. Built by the behavior's `buildStructure` and by the wrapper's render fn, never
+// written in an app template — declared only so the tag alphabet stays covered, the same as
+// `scroll-content`.
+@Directive({ selector: 'activity-indicator-spinner', standalone: true })
+export class ActivityIndicatorSpinnerElement extends ActivityIndicatorElement {}
+
+@Directive({ selector: 'safe-area-view', standalone: true })
+export class SafeAreaViewElement extends SymbioteElement {}
+
+// RN's `experimental_LayoutConformance`: the tag paints as `display: contents` through its fold
+@Directive({ selector: 'layout-conformance', standalone: true })
+export class LayoutConformanceElement extends SymbioteElement {
+  @Input() mode?: ILayoutConformanceMode;
+}
+
+@Directive({ selector: 'modal, symbiote-modal', standalone: true })
+export class ModalElement extends SymbioteElement {
+  @Input() visible?: IModalViewProps['visible'];
+  @Input() transparent?: IModalViewProps['transparent'];
+  @Input() animationType?: IModalViewProps['animationType'];
+  @Input() presentationStyle?: IModalViewProps['presentationStyle'];
+  @Input() supportedOrientations?: IModalViewProps['supportedOrientations'];
+  @Input() hardwareAccelerated?: IModalViewProps['hardwareAccelerated'];
+  @Input() statusBarTranslucent?: IModalViewProps['statusBarTranslucent'];
+  @Input()
+  navigationBarTranslucent?: IModalViewProps['navigationBarTranslucent'];
+  @Input() allowSwipeDismissal?: IModalViewProps['allowSwipeDismissal'];
+  @Input() backdropColor?: IModalViewProps['backdropColor'];
+}
+
+@Directive({ selector: 'refresh-control', standalone: true })
+export class RefreshControlElement extends ReadBackElement {
+  @Input() refreshing?: IAngularRefreshControlProps['refreshing'];
+  @Input() enabled?: IAngularRefreshControlProps['enabled'];
+  @Input() colors?: IAngularRefreshControlProps['colors'];
+  @Input() tintColor?: IAngularRefreshControlProps['tintColor'];
+  @Input() title?: IAngularRefreshControlProps['title'];
+  @Input() titleColor?: IAngularRefreshControlProps['titleColor'];
+  @Input() size?: IAngularRefreshControlProps['size'];
+  @Input()
+  progressBackgroundColor?: IAngularRefreshControlProps['progressBackgroundColor'];
+  @Input()
+  progressViewOffset?: IAngularRefreshControlProps['progressViewOffset'];
+  @Input() onRefresh?: IAngularRefreshControlProps['onRefresh'];
+}
+
+@Directive({ selector: 'sticky-header', standalone: true })
+export class StickyHeaderElement extends SymbioteElement {
+  @Input() inverted?: IStickyHeaderElementProps['inverted'];
+  @Input() nextHeaderLayoutY?: IStickyHeaderElementProps['nextHeaderLayoutY'];
+  @Input()
+  scrollAnimatedValue?: IStickyHeaderElementProps['scrollAnimatedValue'];
+  @Input() scrollViewHeight?: IStickyHeaderElementProps['scrollViewHeight'];
+}
+
+@Directive({ selector: 'input-accessory-view', standalone: true })
+export class InputAccessoryViewElement extends SymbioteElement {
+  @Input() backgroundColor?: IInputAccessoryViewViewProps['backgroundColor'];
+}

package/src/elements-layout.ts

@@ -0,0 +1,168 @@
+import { Directive, Input } from '@angular/core';
+import type { IImageProps } from '@symbiote-native/components';
+import type { IAngularImageBackgroundProps } from './components/image-background-props';
+import type { IAngularScrollViewProps } from './components/scroll-view-props';
+import { SymbioteElement } from './element-base';
+
+@Directive({ selector: 'image, symbiote-image', standalone: true })
+export class ImageElement extends SymbioteElement {
+  @Input() source?: IImageProps['source'];
+  @Input() src?: IImageProps['src'];
+  @Input() srcSet?: IImageProps['srcSet'];
+  @Input() alt?: IImageProps['alt'];
+  @Input() width?: IImageProps['width'];
+  @Input() height?: IImageProps['height'];
+  @Input() resizeMode?: IImageProps['resizeMode'];
+  @Input() resizeMethod?: IImageProps['resizeMethod'];
+  @Input() resizeMultiplier?: IImageProps['resizeMultiplier'];
+  @Input() defaultSource?: IImageProps['defaultSource'];
+  @Input() loadingIndicatorSource?: IImageProps['loadingIndicatorSource'];
+  @Input() blurRadius?: IImageProps['blurRadius'];
+  @Input() capInsets?: IImageProps['capInsets'];
+  @Input() crossOrigin?: IImageProps['crossOrigin'];
+  @Input() referrerPolicy?: IImageProps['referrerPolicy'];
+  @Input() fadeDuration?: IImageProps['fadeDuration'];
+  @Input()
+  progressiveRenderingEnabled?: IImageProps['progressiveRenderingEnabled'];
+  @Input() tintColor?: IImageProps['tintColor'];
+  @Input() onLoad?: IImageProps['onLoad'];
+  @Input() onLoadStart?: IImageProps['onLoadStart'];
+  @Input() onLoadEnd?: IImageProps['onLoadEnd'];
+  @Input() onError?: IImageProps['onError'];
+  @Input() onProgress?: IImageProps['onProgress'];
+  @Input() onPartialLoad?: IImageProps['onPartialLoad'];
+}
+
+// The box, not the image. Every Image prop below rides the engine's `slotPropsExcept` redirect onto
+// the absolutely-filled image the behavior builds, exactly as RN's own `...props` spread does
+// (ImageBackground.js:81) — so this directive declares them to make the BINDING legal, and the
+// engine decides which node each lands on.
+@Directive({ selector: 'image-background', standalone: true })
+export class ImageBackgroundElement extends SymbioteElement {
+  @Input() imageStyle?: IAngularImageBackgroundProps['imageStyle'];
+  @Input() source?: IImageProps['source'];
+  @Input() src?: IImageProps['src'];
+  @Input() srcSet?: IImageProps['srcSet'];
+  @Input() alt?: IImageProps['alt'];
+  @Input() width?: IImageProps['width'];
+  @Input() height?: IImageProps['height'];
+  @Input() resizeMode?: IImageProps['resizeMode'];
+  @Input() resizeMethod?: IImageProps['resizeMethod'];
+  @Input() resizeMultiplier?: IImageProps['resizeMultiplier'];
+  @Input() defaultSource?: IImageProps['defaultSource'];
+  @Input() loadingIndicatorSource?: IImageProps['loadingIndicatorSource'];
+  @Input() blurRadius?: IImageProps['blurRadius'];
+  @Input() capInsets?: IImageProps['capInsets'];
+  @Input() crossOrigin?: IImageProps['crossOrigin'];
+  @Input() referrerPolicy?: IImageProps['referrerPolicy'];
+  @Input() fadeDuration?: IImageProps['fadeDuration'];
+  @Input()
+  progressiveRenderingEnabled?: IImageProps['progressiveRenderingEnabled'];
+  @Input() tintColor?: IImageProps['tintColor'];
+  @Input() onLoad?: IImageProps['onLoad'];
+  @Input() onLoadStart?: IImageProps['onLoadStart'];
+  @Input() onLoadEnd?: IImageProps['onLoadEnd'];
+  @Input() onError?: IImageProps['onError'];
+  @Input() onProgress?: IImageProps['onProgress'];
+  @Input() onPartialLoad?: IImageProps['onPartialLoad'];
+}
+
+@Directive({ selector: 'scroll-view', standalone: true })
+export class ScrollViewElement extends SymbioteElement {
+  // No `horizontal` @Input: the axis is the TAG you write, never a prop — see
+  // `../components/scroll-view-props.ts`'s header. `HorizontalScrollViewElement` below is the
+  // other spelling, not a variant of this one.
+  @Input() scrollEnabled?: IAngularScrollViewProps['scrollEnabled'];
+  @Input() scrollEventThrottle?: IAngularScrollViewProps['scrollEventThrottle'];
+  @Input()
+  contentContainerStyle?: IAngularScrollViewProps['contentContainerStyle'];
+  @Input() contentInset?: IAngularScrollViewProps['contentInset'];
+  @Input()
+  contentInsetAdjustmentBehavior?: IAngularScrollViewProps['contentInsetAdjustmentBehavior'];
+  @Input() contentOffset?: IAngularScrollViewProps['contentOffset'];
+  @Input()
+  scrollIndicatorInsets?: IAngularScrollViewProps['scrollIndicatorInsets'];
+  @Input()
+  showsHorizontalScrollIndicator?: IAngularScrollViewProps['showsHorizontalScrollIndicator'];
+  @Input()
+  showsVerticalScrollIndicator?: IAngularScrollViewProps['showsVerticalScrollIndicator'];
+  @Input()
+  alwaysBounceHorizontal?: IAngularScrollViewProps['alwaysBounceHorizontal'];
+  @Input()
+  alwaysBounceVertical?: IAngularScrollViewProps['alwaysBounceVertical'];
+  @Input() bounces?: IAngularScrollViewProps['bounces'];
+  @Input() bouncesZoom?: IAngularScrollViewProps['bouncesZoom'];
+  @Input() centerContent?: IAngularScrollViewProps['centerContent'];
+  @Input() decelerationRate?: IAngularScrollViewProps['decelerationRate'];
+  @Input()
+  directionalLockEnabled?: IAngularScrollViewProps['directionalLockEnabled'];
+  @Input()
+  disableIntervalMomentum?: IAngularScrollViewProps['disableIntervalMomentum'];
+  @Input() endFillColor?: IAngularScrollViewProps['endFillColor'];
+  @Input() fadingEdgeLength?: IAngularScrollViewProps['fadingEdgeLength'];
+  @Input() indicatorStyle?: IAngularScrollViewProps['indicatorStyle'];
+  @Input() invertStickyHeaders?: IAngularScrollViewProps['invertStickyHeaders'];
+  @Input() keyboardDismissMode?: IAngularScrollViewProps['keyboardDismissMode'];
+  @Input()
+  keyboardShouldPersistTaps?: IAngularScrollViewProps['keyboardShouldPersistTaps'];
+  @Input()
+  automaticallyAdjustKeyboardInsets?: IAngularScrollViewProps['automaticallyAdjustKeyboardInsets'];
+  @Input()
+  maintainVisibleContentPosition?: IAngularScrollViewProps['maintainVisibleContentPosition'];
+  @Input() maximumZoomScale?: IAngularScrollViewProps['maximumZoomScale'];
+  @Input() minimumZoomScale?: IAngularScrollViewProps['minimumZoomScale'];
+  @Input() zoomScale?: IAngularScrollViewProps['zoomScale'];
+  @Input() nestedScrollEnabled?: IAngularScrollViewProps['nestedScrollEnabled'];
+  @Input() overScrollMode?: IAngularScrollViewProps['overScrollMode'];
+  @Input() pagingEnabled?: IAngularScrollViewProps['pagingEnabled'];
+  @Input() persistentScrollbar?: IAngularScrollViewProps['persistentScrollbar'];
+  @Input() pinchGestureEnabled?: IAngularScrollViewProps['pinchGestureEnabled'];
+  @Input() snapToAlignment?: IAngularScrollViewProps['snapToAlignment'];
+  @Input() snapToEnd?: IAngularScrollViewProps['snapToEnd'];
+  @Input() snapToInterval?: IAngularScrollViewProps['snapToInterval'];
+  @Input() snapToOffsets?: IAngularScrollViewProps['snapToOffsets'];
+  @Input() snapToStart?: IAngularScrollViewProps['snapToStart'];
+  @Input() stickyHeaderIndices?: IAngularScrollViewProps['stickyHeaderIndices'];
+  @Input() onScroll?: IAngularScrollViewProps['onScroll'];
+  @Input() onScrollBeginDrag?: IAngularScrollViewProps['onScrollBeginDrag'];
+  @Input() onScrollEndDrag?: IAngularScrollViewProps['onScrollEndDrag'];
+  @Input()
+  onMomentumScrollBegin?: IAngularScrollViewProps['onMomentumScrollBegin'];
+  @Input() onMomentumScrollEnd?: IAngularScrollViewProps['onMomentumScrollEnd'];
+  @Input() onScrollToTop?: IAngularScrollViewProps['onScrollToTop'];
+  @Input() onContentSizeChange?: IAngularScrollViewProps['onContentSizeChange'];
+  @Input()
+  onKeyboardWillShow?: IAngularScrollViewProps['onKeyboardWillShow'];
+  @Input()
+  onKeyboardWillHide?: IAngularScrollViewProps['onKeyboardWillHide'];
+  @Input() onKeyboardDidShow?: IAngularScrollViewProps['onKeyboardDidShow'];
+  @Input() onKeyboardDidHide?: IAngularScrollViewProps['onKeyboardDidHide'];
+  @Input()
+  automaticallyAdjustContentInsets?: IAngularScrollViewProps['automaticallyAdjustContentInsets'];
+  @Input()
+  automaticallyAdjustsScrollIndicatorInsets?: IAngularScrollViewProps['automaticallyAdjustsScrollIndicatorInsets'];
+  @Input()
+  canCancelContentTouches?: IAngularScrollViewProps['canCancelContentTouches'];
+  @Input()
+  experimental_endDraggingSensitivityMultiplier?: IAngularScrollViewProps['experimental_endDraggingSensitivityMultiplier'];
+  @Input() innerViewRef?: IAngularScrollViewProps['innerViewRef'];
+  @Input()
+  onScrollAnimationEnd?: IAngularScrollViewProps['onScrollAnimationEnd'];
+  @Input() scrollPerfTag?: IAngularScrollViewProps['scrollPerfTag'];
+  @Input()
+  scrollToOverflowEnabled?: IAngularScrollViewProps['scrollToOverflowEnabled'];
+  @Input()
+  scrollsChildToFocus?: IAngularScrollViewProps['scrollsChildToFocus'];
+  @Input() scrollsToTop?: IAngularScrollViewProps['scrollsToTop'];
+  @Input()
+  stickyHeaderHiddenOnScroll?: IAngularScrollViewProps['stickyHeaderHiddenOnScroll'];
+}
+
+@Directive({ selector: 'horizontal-scroll-view', standalone: true })
+export class HorizontalScrollViewElement extends ScrollViewElement {}
+
+@Directive({ selector: 'scroll-content', standalone: true })
+export class ScrollContentElement extends SymbioteElement {}
+
+@Directive({ selector: 'horizontal-scroll-content', standalone: true })
+export class HorizontalScrollContentElement extends SymbioteElement {}

package/src/elements-press.ts

@@ -0,0 +1,153 @@
+import { Directive, Input } from '@angular/core';
+import type { INativeFeedbackBackground } from '@symbiote-native/components';
+import type { IColorValue } from '@symbiote-native/engine';
+import type { ITextElementProps } from './element-props';
+import type { ICheckboxProps } from './components/checkbox-props';
+import type { IAngularPressableProps } from './components/pressable-props';
+import type {
+  IAngularTouchableHighlightProps,
+  IAngularTouchableOpacityProps,
+} from './components/touchable-props';
+import { SymbioteElement } from './element-base';
+
+// BOTH SPELLINGS ON THE SEVEN DASHLESS TAGS, and it is a correctness fix rather than a convenience.
+//
+// The renderer has always mapped `symbiote-view` onto `view` (`PRIMITIVE_SELECTOR_ALIAS`), because
+// `CUSTOM_ELEMENTS_SCHEMA` admits an unknown element only when the name carries a hyphen — so the
+// hyphenated form is the spelling an app WITHOUT these directives has to use. It is the same tag and
+// commits the same node.
+//
+// It was not the same tag HERE. A selector of `view` alone meant an app that imports
+// `SYMBIOTE_ELEMENTS` and writes `<symbiote-view>` matched nothing: no type check on its props, no
+// declared inputs, none of `SymbioteElement`'s forwarding or callback wrapping — silently, with the
+// tree still looking right. Measured, that shape also ran ~8.6 us per element FASTER, which is what
+// made it look like an optimization instead of a hole (`angular-directive-cost.itest.ts`).
+//
+// Only the seven dashless tags need it: `hyphenatedIntrinsicAliases` skips any tag that already
+// carries a dash, so `symbiote-scroll-view` resolves nowhere on either side and the two halves agree
+// already.
+@Directive({ selector: 'view, symbiote-view', standalone: true })
+export class ViewElement extends SymbioteElement {}
+
+@Directive({ selector: 'pressable, symbiote-pressable', standalone: true })
+export class PressableElement extends SymbioteElement {
+  @Input() disabled?: IAngularPressableProps['disabled'];
+  @Input() cancelable?: IAngularPressableProps['cancelable'];
+  @Input()
+  blockNativeResponder?: IAngularPressableProps['blockNativeResponder'];
+  @Input() delayLongPress?: IAngularPressableProps['delayLongPress'];
+  @Input() delayHoverIn?: IAngularPressableProps['delayHoverIn'];
+  @Input() delayHoverOut?: IAngularPressableProps['delayHoverOut'];
+  @Input() onHoverIn?: IAngularPressableProps['onHoverIn'];
+  @Input() onHoverOut?: IAngularPressableProps['onHoverOut'];
+  @Input()
+  pressRetentionOffset?: IAngularPressableProps['pressRetentionOffset'];
+  @Input() unstable_pressDelay?: IAngularPressableProps['unstable_pressDelay'];
+  @Input() android_ripple?: IAngularPressableProps['android_ripple'];
+  // ON THE BASE, so both touchables inherit it — the prop is Pressable's AND
+  // TouchableHighlight's upstream, and they extend this rather than repeat its surface.
+  @Input() testOnly_pressed?: IAngularPressableProps['testOnly_pressed'];
+  @Input()
+  android_disableSound?: IAngularPressableProps['android_disableSound'];
+  @Input() hasTVPreferredFocus?: IAngularPressableProps['hasTVPreferredFocus'];
+  @Input() nextFocusDown?: IAngularPressableProps['nextFocusDown'];
+  @Input() nextFocusForward?: IAngularPressableProps['nextFocusForward'];
+  @Input() nextFocusLeft?: IAngularPressableProps['nextFocusLeft'];
+  @Input() nextFocusRight?: IAngularPressableProps['nextFocusRight'];
+  @Input() nextFocusUp?: IAngularPressableProps['nextFocusUp'];
+}
+
+// RN's TouchableOpacity is a Pressable that also fades, and both halves are on the engine node —
+// so it takes the same inputs and adds only the fade's own knob.
+@Directive({ selector: 'touchable-opacity', standalone: true })
+export class TouchableOpacityElement extends PressableElement {
+  @Input() activeOpacity?: number;
+  @Input() delayPressIn?: number;
+  @Input() delayPressOut?: number;
+  @Input() minPressDuration?: number;
+}
+
+// RN's TouchableHighlight is a Pressable that swaps its own background while pressed
+// (TouchableHighlight.js), and the underlay machine runs on the engine node — so the tag takes the
+// press surface plus the two knobs that describe the underlay. `onShowUnderlay`/`onHideUnderlay`
+// need no @Input: they are events, bound as `(showUnderlay)` through the renderer's own listen.
+@Directive({ selector: 'touchable-highlight', standalone: true })
+export class TouchableHighlightElement extends PressableElement {
+  @Input() activeOpacity?: number;
+  @Input() underlayColor?: IColorValue;
+  @Input() delayPressIn?: number;
+  @Input() delayPressOut?: number;
+  @Input() minPressDuration?: number;
+  // TouchableHighlight.js:205 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
+}
+
+// RN's TouchableNativeFeedback is a Pressable that CLONES onto its single child instead of
+// rendering anything (TouchableNativeFeedback.js:339) — so the tag takes the press surface plus the
+// two props that pick the Android ripple drawable. The tag itself commits no native view; the
+// behavior configures the child, which is why `elements.test.ts` reads it as an anchor.
+@Directive({ selector: 'touchable-native-feedback', standalone: true })
+export class TouchableNativeFeedbackElement extends PressableElement {
+  @Input() background?: INativeFeedbackBackground;
+  @Input() useForeground?: boolean;
+  // TouchableNativeFeedback.js:228 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
+}
+
+// RN's TouchableWithoutFeedback clones onto its single child the same way
+// (TouchableWithoutFeedback.js:286) and installs no drawable, so it takes the press surface plus the
+// three timing knobs it forwards to Pressability (:186-190) and nothing else. Like the tag above it
+// commits no native view; `elements.test.ts` reads it as an anchor.
+@Directive({ selector: 'touchable-without-feedback', standalone: true })
+export class TouchableWithoutFeedbackElement extends PressableElement {
+  @Input() delayPressIn?: number;
+  @Input() delayPressOut?: number;
+  @Input() minPressDuration?: number;
+  // TouchableWithoutFeedback.js:199 — forwarded to Pressability as `android_disableSound`.
+  @Input() touchSoundDisabled?: boolean;
+}
+
+// RN's Button IS a TouchableOpacity (Button.js:384), and the behavior builds the view and the
+// label under it — so the tag takes the touchable's surface plus the four props Button owns. There
+// is no `style`: RN's Button has no such prop, and the label/background come from `color`.
+@Directive({ selector: 'button, symbiote-button', standalone: true })
+export class ButtonElement extends TouchableOpacityElement {
+  @Input() title?: string;
+  @Input() color?: IColorValue;
+  @Input() touchSoundDisabled?: boolean;
+}
+
+// expo-checkbox: View-like box plus the toggle on the engine node, поэтому только свои пять полей
+// Нет `(valueChange)`: тоггл зовёт `onValueChange` как проп, он не engine-событие с read-back
+@Directive({ selector: 'checkbox, symbiote-checkbox', standalone: true })
+export class CheckboxElement extends SymbioteElement {
+  @Input() value?: ICheckboxProps['value'];
+  @Input() disabled?: ICheckboxProps['disabled'];
+  @Input() color?: ICheckboxProps['color'];
+  @Input() onValueChange?: ICheckboxProps['onValueChange'];
+}
+
+@Directive({ selector: 'text, symbiote-text', standalone: true })
+export class TextElement extends SymbioteElement {
+  // Narrows the inherited input to a TEXT style so `fontSize`/`fontWeight` type-check here. The
+  // initializer is what TS2612 asks for to accept a redeclaration as deliberate; `declare` would
+  // be the other answer and cannot carry a decorator.
+  @Input() override style?: ITextElementProps['style'] = undefined;
+  @Input() override styleProp?: ITextElementProps['styleProp'] = undefined;
+  @Input() numberOfLines?: ITextElementProps['numberOfLines'];
+  @Input() ellipsizeMode?: ITextElementProps['ellipsizeMode'];
+  @Input() selectable?: ITextElementProps['selectable'];
+  @Input() adjustsFontSizeToFit?: ITextElementProps['adjustsFontSizeToFit'];
+  @Input() minimumFontScale?: ITextElementProps['minimumFontScale'];
+  @Input() allowFontScaling?: ITextElementProps['allowFontScaling'];
+  @Input() maxFontSizeMultiplier?: ITextElementProps['maxFontSizeMultiplier'];
+  @Input() selectionColor?: ITextElementProps['selectionColor'];
+  @Input() disabled?: ITextElementProps['disabled'];
+  @Input()
+  android_hyphenationFrequency?: ITextElementProps['android_hyphenationFrequency'];
+  @Input() dataDetectorType?: ITextElementProps['dataDetectorType'];
+  @Input() dynamicTypeRamp?: ITextElementProps['dynamicTypeRamp'];
+  @Input() lineBreakMode?: ITextElementProps['lineBreakMode'];
+  @Input() lineBreakStrategyIOS?: ITextElementProps['lineBreakStrategyIOS'];
+  @Input() textBreakStrategy?: ITextElementProps['textBreakStrategy'];
+}