@symbiote-native/slider 0.1.0

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@symbiote-native/slider",
+  "version": "0.1.0",
+  "description": "Third-party native Slider view wrapped for SymbioteJS — one framework-agnostic core, built once and reachable from the React, Vue, and Angular adapters.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/slider"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/slider#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "codegenConfig": {
+    "name": "RNCSlider",
+    "type": "components",
+    "jsSrcsDir": "node_modules/@react-native-community/slider/src",
+    "android": {
+      "javaPackageName": "com.reactnativecommunity.slider"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNCSlider": "RNCSliderComponentView"
+      }
+    }
+  },
+  "dependencies": {
+    "@react-native-community/slider": "^5.2.0",
+    "@symbiote-native/components": "0.1.0",
+    "@symbiote-native/engine": "0.1.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "0.1.0",
+    "@symbiote-native/react": "0.1.0",
+    "@symbiote-native/vue": "0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "^22",
+    "@angular/compiler-cli": "^22",
+    "@angular/core": "^22",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "0.1.0",
+    "@symbiote-native/react": "0.1.0",
+    "@symbiote-native/vue": "0.1.0",
+    "@symbiote-native/test-utils": "0.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "ng:build": "ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
+}

package/src/angular/index.ts

@@ -0,0 +1,4 @@
+import '../register';
+
+export { Slider } from './slider';
+export type { ISliderProps } from './slider/shared';

package/src/angular/slider/index.android.ts

@@ -0,0 +1,25 @@
+// Slider on Android: the native view sizes itself (no default height), lays out implicit steps at
+// 128-point resolution, and keeps the step row at the top. Mirrors the library's Android branches.
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '@symbiote-native/angular';
+import { SliderBase } from './shared';
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
+export type { ISliderProps } from './shared';
+
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+
+@Component({
+  selector: 'Slider',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+})
+export class Slider extends SliderBase {
+  protected readonly platform = {
+    defaultStyle: {},
+    stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+    stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+  };
+}

package/src/angular/slider/index.ios.ts

@@ -0,0 +1,26 @@
+// Slider on iOS: the native view has an intrinsic 40pt height (the wrapper applies it as the
+// default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
+// Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet } from '@symbiote-native/angular';
+import { SliderBase } from './shared';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+export type { ISliderProps } from './shared';
+
+const IOS_STEPS_CONTAINER_TOP = 10;
+
+@Component({
+  selector: 'Slider',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
+})
+export class Slider extends SliderBase {
+  protected readonly platform = {
+    defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+    stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+    stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+  };
+}

package/src/angular/slider/index.ts

@@ -0,0 +1,5 @@
+// Base entry for headless / tsc: re-exports the iOS variant (Metro picks index.ios / index.android
+// per platform via filename selection; this no-suffix file is what tsx/vitest resolve). ADR 0026.
+
+export { Slider } from './index.ios';
+export type { ISliderProps } from './shared';

package/src/angular/slider/shared.ts

@@ -0,0 +1,364 @@
+// Slider, the Angular lifecycle half. The logic (value/limit/disabled folds, the step-option
+// layout) and the native render live in @symbiote-native/slider core, shared verbatim with the Vue
+// adapter; here Angular supplies plain class fields (mirroring ActivityIndicatorBase/SwitchBase)
+// plus real @Output() EventEmitters for the four native callbacks, and renders through
+// DescriptorOutlet — the generic descriptorToAngular bridge (angular-adapter skill §6) — since
+// this component has no imperative-ref need the Descriptor prop bag can't carry. The native
+// RNCSlider view carries no symbiote metadata: the engine derives its events and color
+// processors from the library's ViewConfig at runtime, registered by the side-effect import in
+// ../../register (pulled in by the package barrel, NOT here, so this module and its tests stay
+// free of the third-party spec). See CLAUDE.md <third_party_rn_packages_are_react_only> and
+// ADR 0027.
+//
+// KNOWN GAP (deliberate, scoped by the task this module was built for): the custom `StepMarker`
+// render slot (a per-adapter overlay element — a React FC, a Vue scoped slot) has no Angular
+// equivalent yet. The natural analogue is a `@ContentChild(TemplateRef) stepMarker?:
+// TemplateRef<IStepMarkerProps>` projected per step cell via `NgTemplateOutlet`, but wiring an
+// embedded view per cell (constructing it, feeding its context, keeping it in step with
+// DescriptorOutlet's imperative patch model, which has no notion of TemplateRefs) is
+// disproportionate complexity for a path no real caller exercises today (examples/react/App.tsx's
+// Slider usage has no step markers at all). Everything else — value/limits/disabled/colors/
+// thumbImage/style/every event, and the DEFAULT numbered step indicator (`renderStepNumber`) — is
+// fully implemented below; only the custom-marker overlay is unimplemented.
+
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  type OnChanges,
+} from '@angular/core';
+import { anchorHostStyle } from '@symbiote-native/angular';
+import { resolveAccessibilityProps } from '@symbiote-native/components';
+import type {
+  IAccessibilityProps,
+  IAccessibilityStateValue,
+  IAriaProps,
+  IDescriptor,
+} from '@symbiote-native/components';
+import { dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+import {
+  sanitizeSliderValue,
+  resolveSliderDisabled,
+  resolveSliderAccessibilityState,
+  resolveSliderLowerLimit,
+  resolveSliderUpperLimit,
+  valueFromSliderEvent,
+  shouldRenderStepsIndicator,
+  resolveThumbTintColor,
+  shouldPassNativeThumbImage,
+  isInvalidLimitConfig,
+  computeStepOptions,
+  renderSlider,
+  renderStepsIndicator,
+  SLIDER_DEFAULT_MINIMUM_VALUE,
+  SLIDER_DEFAULT_MAXIMUM_VALUE,
+  SLIDER_DEFAULT_STEP,
+  SLIDER_ON_CHANGE,
+  SLIDER_ON_VALUE_CHANGE,
+  SLIDER_ON_SLIDING_START,
+  SLIDER_ON_SLIDING_COMPLETE,
+  SLIDER_ON_ACCESSIBILITY_ACTION,
+  type ISliderPlatform,
+  type ISliderProps as ISliderBaseProps,
+  type ISliderViewProps,
+} from '../../core';
+
+export type ISliderProps = Omit<
+  ISliderBaseProps,
+  'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'
+>;
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+// Narrows anchorHostStyle's `unknown` (it reads an opaque engine prop bag) to the shape
+// ISliderProps['style'] actually declares — the same runtime guard the Angular adapter's
+// ActivityIndicator 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): ISliderProps['style'] {
+  return typeof value === 'object' && value !== null ? value : undefined;
+}
+
+@Directive()
+export abstract class SliderBase implements ISliderProps, OnChanges {
+  @Input() value?: number;
+  @Input() minimumValue?: number;
+  @Input() maximumValue?: number;
+  @Input() step?: number;
+  @Input() lowerLimit?: number;
+  @Input() upperLimit?: number;
+  @Input() minimumTrackTintColor?: ISliderProps['minimumTrackTintColor'];
+  @Input() maximumTrackTintColor?: ISliderProps['maximumTrackTintColor'];
+  @Input() thumbTintColor?: ISliderProps['thumbTintColor'];
+  @Input() disabled?: boolean;
+  @Input() inverted?: boolean;
+  @Input() tapToSeek?: boolean;
+  @Input() vertical?: boolean;
+  @Input() thumbImage?: ISliderProps['thumbImage'];
+  @Input() minimumTrackImage?: ISliderProps['minimumTrackImage'];
+  @Input() maximumTrackImage?: ISliderProps['maximumTrackImage'];
+  @Input() trackImage?: ISliderProps['trackImage'];
+  @Input() thumbSize?: number;
+  @Input() accessibilityUnits?: string;
+  @Input() accessibilityIncrements?: readonly string[];
+  @Input() renderStepNumber?: boolean;
+  @Input() testID?: string;
+  @Input() style?: ISliderProps['style'];
+
+  @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;
+  @Input() onAccessibilityTap?: (event: ISymbioteEvent) => void;
+  @Input() onMagicTap?: (event: ISymbioteEvent) => void;
+  @Input() onAccessibilityEscape?: (event: ISymbioteEvent) => void;
+
+  @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;
+
+  // The four native callbacks, as real EventEmitters — no v-model-style two-way twin (that was
+  // Vue-specific v-model sugar; Angular has no equivalent concept here).
+  @Output() readonly valueChange = new EventEmitter<number>();
+  @Output() readonly slidingStart = new EventEmitter<number>();
+  @Output() readonly slidingComplete = new EventEmitter<number>();
+  @Output() readonly accessibilityAction = new EventEmitter<ISymbioteEvent>();
+
+  protected abstract readonly platform: ISliderPlatform;
+
+  private readonly changeDetector = inject(ChangeDetectorRef);
+  // This component's OWN host — the non-painting anchor `class="..."` at the use site resolves
+  // onto (see anchorHostStyle's doc comment, @symbiote-native/angular) — 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);
+
+  // The value native last reported, kept only to mark the active step in the indicator. Not the
+  // controlled value — the slider is uncontrolled during a drag (no snap-back), mirroring the
+  // Vue lifecycle's `reportedValue` ref.
+  private reportedValue: number | undefined;
+  // The measured wrapper width the step indicator lays out against; 0 until the first layout.
+  private width = 0;
+
+  ngOnChanges(): void {
+    // No fold needed here: `descriptor` is a getter re-evaluated on every OnPush check the
+    // template's `[node]="descriptor"` binding triggers, so an @Input change already recomputes
+    // the render on its own. OnChanges exists so this class satisfies the same lifecycle contract
+    // as the rest of the input-driven components in this adapter.
+  }
+
+  protected readonly handleValueChange = (event: ISymbioteEvent): void => {
+    const value = valueFromSliderEvent(event);
+    if (value === undefined) return;
+    this.reportedValue = value;
+    this.valueChange.emit(value);
+  };
+
+  protected readonly handleSlidingStart = (event: ISymbioteEvent): void => {
+    const value = valueFromSliderEvent(event);
+    if (value !== undefined) this.slidingStart.emit(value);
+  };
+
+  protected readonly handleSlidingComplete = (event: ISymbioteEvent): void => {
+    const value = valueFromSliderEvent(event);
+    if (value !== undefined) this.slidingComplete.emit(value);
+  };
+
+  protected readonly handleAccessibilityAction = (event: ISymbioteEvent): void => {
+    this.accessibilityAction.emit(event);
+  };
+
+  // Native onLayout fires through the engine's event dispatch (Renderer2.listen), OUTSIDE
+  // Angular's zoneless change-detection notification — the same async-commit-timing shape the
+  // angular-adapter skill (§5) documents and the sticky-header component already works around
+  // (`ChangeDetectorRef.markForCheck()`). Mutating `width` alone would never repaint the step
+  // indicator, since nothing would tell the OnPush view it is dirty.
+  protected readonly handleLayout = (event: ISymbioteEvent): void => {
+    const layout = event.nativeEvent.layout;
+    if (isRecord(layout) && typeof layout.width === 'number') {
+      this.width = layout.width;
+      this.changeDetector.markForCheck();
+    }
+  };
+
+  private inputProps(): ISliderProps {
+    return {
+      value: this.value,
+      minimumValue: this.minimumValue,
+      maximumValue: this.maximumValue,
+      step: this.step,
+      lowerLimit: this.lowerLimit,
+      upperLimit: this.upperLimit,
+      minimumTrackTintColor: this.minimumTrackTintColor,
+      maximumTrackTintColor: this.maximumTrackTintColor,
+      thumbTintColor: this.thumbTintColor,
+      disabled: this.disabled,
+      inverted: this.inverted,
+      tapToSeek: this.tapToSeek,
+      vertical: this.vertical,
+      thumbImage: this.thumbImage,
+      minimumTrackImage: this.minimumTrackImage,
+      maximumTrackImage: this.maximumTrackImage,
+      trackImage: this.trackImage,
+      thumbSize: this.thumbSize,
+      accessibilityUnits: this.accessibilityUnits,
+      accessibilityIncrements: this.accessibilityIncrements,
+      renderStepNumber: this.renderStepNumber,
+      testID: this.testID,
+      style: [asStyle(anchorHostStyle(this.elementRef)), this.style],
+      nativeID: this.nativeID,
+      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,
+      onAccessibilityTap: this.onAccessibilityTap,
+      onMagicTap: this.onMagicTap,
+      onAccessibilityEscape: this.onAccessibilityEscape,
+      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,
+    };
+  }
+
+  get descriptor(): IDescriptor {
+    const props = resolveAccessibilityProps<ISliderProps>(this.inputProps());
+    const {
+      value,
+      minimumValue: minimumValueInput,
+      maximumValue: maximumValueInput,
+      step: stepInput,
+      lowerLimit: lowerLimitInput,
+      upperLimit: upperLimitInput,
+      disabled,
+      inverted: invertedInput,
+      thumbTintColor,
+      thumbImage,
+      accessibilityState,
+      renderStepNumber,
+      style,
+      ...passthrough
+    } = props;
+
+    const minimumValue = minimumValueInput ?? SLIDER_DEFAULT_MINIMUM_VALUE;
+    const maximumValue = maximumValueInput ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
+    const step = stepInput ?? SLIDER_DEFAULT_STEP;
+    const lowerLimit = resolveSliderLowerLimit(lowerLimitInput);
+    const upperLimit = resolveSliderUpperLimit(upperLimitInput);
+    if (isInvalidLimitConfig(lowerLimit, upperLimit)) {
+      dlog('Slider: lowerLimit must be smaller than upperLimit');
+    }
+    const inverted = invertedInput ?? false;
+    const hasThumbImage = thumbImage !== undefined;
+    // No custom-StepMarker slot on Angular yet (see the module doc comment above) — showSteps
+    // only ever considers renderStepNumber.
+    const showSteps = shouldRenderStepsIndicator(false, renderStepNumber);
+    const nativeThumbImage = shouldPassNativeThumbImage(false, hasThumbImage)
+      ? thumbImage
+      : undefined;
+
+    const view: ISliderViewProps = {
+      value: sanitizeSliderValue(value),
+      minimumValue,
+      maximumValue,
+      step,
+      lowerLimit,
+      upperLimit,
+      disabled: resolveSliderDisabled(disabled, accessibilityState),
+      inverted,
+      thumbTintColor: resolveThumbTintColor(thumbTintColor, false, hasThumbImage),
+      thumbImage: nativeThumbImage,
+      accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+      width: this.width,
+      style,
+      passthrough: {
+        ...passthrough,
+        [SLIDER_ON_CHANGE]: this.handleValueChange,
+        [SLIDER_ON_VALUE_CHANGE]: this.handleValueChange,
+        [SLIDER_ON_SLIDING_START]: this.handleSlidingStart,
+        [SLIDER_ON_SLIDING_COMPLETE]: this.handleSlidingComplete,
+        [SLIDER_ON_ACCESSIBILITY_ACTION]: this.handleAccessibilityAction,
+      },
+    };
+
+    if (!showSteps) {
+      return renderSlider(view, this.platform, { onLayout: this.handleLayout });
+    }
+
+    const options = computeStepOptions(
+      minimumValue,
+      maximumValue,
+      step,
+      this.platform.stepResolution,
+    );
+    const currentValue = this.reportedValue ?? view.value ?? minimumValue;
+    const steps = renderStepsIndicator({
+      options,
+      currentValue,
+      width: this.width,
+      renderStepNumber: renderStepNumber === true,
+      thumbImage,
+      inverted,
+      platform: this.platform,
+    });
+    return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
+  }
+}