@symbiote-native/slider 5.0.3 → 5.2.0

package/README.md

@@ -1,9 +1,10 @@
 # @symbiote-native/slider
 
 A wrapper package for [SymbioteNative](../../README.md) that makes the third-party native
-`@react-native-community/slider` view usable from **every** adapter — React, Vue, and Angular —
-not just React. The library's default export is a React component (it calls hooks off the React
-dispatcher), so a non-React adapter renders it with a null dispatcher and it throws. This package
+`@react-native-community/slider` view usable from **every** adapter — React, Vue, Svelte, Solid,
+and Angular — not just React. The library's default export is a React component (it calls hooks
+off the React dispatcher), so a non-React adapter renders it with a null dispatcher and it throws.
+This package
 reaches the native `RNCSlider` view directly through the engine's `createNode`-by-ViewConfig path
 instead of importing the library's React component — the same mechanism SymbioteNative uses for its
 own primitives.
@@ -29,14 +30,16 @@ src/register.ts side-effect import of RNCSlider's codegen spec — registers its
                 (never the library's React Slider.tsx)
 src/react/      @symbiote-native/slider/react — forwardRef FC + descriptorToReact
 src/vue/        @symbiote-native/slider/vue   — defineComponent + descriptorToVue
+src/svelte/     @symbiote-native/slider/svelte — .svelte component + the DOM-shim renderer
+src/solid/      @symbiote-native/slider/solid — signals + descriptorToSolid
 src/angular/    @symbiote-native/slider/angular — Angular component + descriptorToAngular
 ```
 
 Each adapter entry imports `../register` first (so the ViewConfig is registered before the
 component ever mounts), then exposes a platform-split `Slider`. The core is written once; every
 adapter inherits the same folding logic and the same `ISliderProps` surface (extended per-adapter
-only where a field carries a framework element — the custom `StepMarker` is a React render prop
-but a Vue scoped slot).
+only where a field carries a framework element — the custom `StepMarker` is a React render prop, a
+Vue scoped slot, a Svelte `Snippet`, and a Solid render prop taking an **accessor**).
 
 ## Packaging — one dependency, not two
 
@@ -64,7 +67,7 @@ import { Slider } from '@symbiote-native/slider/react';
   minimumTrackTintColor="#7fb5ff"
   maximumTrackTintColor="#334155"
   thumbTintColor="#ffffff"
-/>
+/>;
 ```
 
 ```vue
@@ -81,6 +84,20 @@ import { Slider } from '@symbiote-native/slider/vue';
 </template>
 ```
 
+```tsx
+// Solid — the marker props arrive as an ACCESSOR, so only the leaf reading them re-runs
+import { Slider } from '@symbiote-native/slider/solid';
+
+<Slider
+  value={volume()}
+  onValueChange={setVolume}
+  step={0.25}
+  StepMarker={marker => (
+    <symbiote-view style={{ opacity: marker().stepMarked ? 1 : 0.3 }} />
+  )}
+/>;
+```
+
 ```ts
 // Angular — examples/angular/App.ts
 import { Slider } from '@symbiote-native/slider/angular';
@@ -93,6 +110,6 @@ processors from its own ViewConfig at runtime, so there is nothing to pre-resolv
 ## Test it
 
 Headless component tests live next to each adapter entry
-(`src/{react,vue,angular}/slider/slider.test.{ts,tsx}`) and inject a fake ViewConfig via
+(`src/{react,vue,svelte,solid,angular}/slider/slider*.test.{ts,tsx}`) and inject a fake ViewConfig via
 `setNativeViewConfigSource`, so they run without a real Fabric host. Native rendering is verified
 on-device (see the parent [README](../../README.md) for the project's testing model).

package/build/angular/slider/index.android.js

@@ -34,7 +34,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared.js';
 import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core/index.js';
@@ -45,6 +46,13 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => Slider),
+                    multi: true,
+                },
+            ],
             template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
         })];
     let _classDescriptor;

package/build/angular/slider/index.ios.js

@@ -35,10 +35,11 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared.js';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core/index.js';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core/index.js';
 const IOS_STEPS_CONTAINER_TOP = 10;
 let Slider = (() => {
     let _classDecorators = [Component({
@@ -46,6 +47,13 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => Slider),
+                    multi: true,
+                },
+            ],
             template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
         })];
     let _classDescriptor;

package/build/angular/slider/shared.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter, type OnChanges } from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
 import type { IAccessibilityProps, IAccessibilityStateValue, IAriaProps, IDescriptor } from '@symbiote-native/components';
 import { type ISymbioteEvent } from '@symbiote-native/engine';
 import { type ISliderPlatform, type ISliderProps as ISliderBaseProps } from '../../core';
 export type ISliderProps = Omit<ISliderBaseProps, 'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'>;
-export declare abstract class SliderBase implements ISliderProps, OnChanges {
+export declare abstract class SliderBase implements ISliderProps, OnChanges, ControlValueAccessor {
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
@@ -79,6 +80,10 @@ export declare abstract class SliderBase implements ISliderProps, OnChanges {
     protected readonly handleSlidingComplete: (event: ISymbioteEvent) => void;
     protected readonly handleAccessibilityAction: (event: ISymbioteEvent) => void;
     protected readonly handleLayout: (event: ISymbioteEvent) => void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     private inputProps;
     get descriptor(): IDescriptor;
 }

package/build/angular/slider/shared.js

@@ -521,6 +521,25 @@ let SliderBase = (() => {
                 this.changeDetector.markForCheck();
             }
         };
+        // ControlValueAccessor — `value`/`disabled` are plain @Input() fields feeding the `descriptor`
+        // getter (re-evaluated on every OnPush check, no fold/commit dance), so writeValue()/
+        // setDisabledState() can set them straight, no TextInput-style stale-safe seam needed.
+        writeValue(value) {
+            this.value = value ?? undefined;
+            this.changeDetector.markForCheck();
+        }
+        registerOnChange(fn) {
+            this.valueChange.subscribe(fn);
+        }
+        registerOnTouched(fn) {
+            // Slider has no blur concept (it's a drag control, not a text field) — the thumb release is
+            // the closest "the user is done interacting" signal.
+            this.slidingComplete.subscribe(() => fn());
+        }
+        setDisabledState(isDisabled) {
+            this.disabled = isDisabled;
+            this.changeDetector.markForCheck();
+        }
         inputProps() {
             return {
                 value: this.value,
@@ -641,7 +660,10 @@ let SliderBase = (() => {
                 inverted,
                 platform: this.platform,
             });
-            return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
+            return renderSlider(view, this.platform, {
+                steps,
+                onLayout: this.handleLayout,
+            });
         }
     };
     return SliderBase = _classThis;

package/build/core/index.d.ts

@@ -1,7 +1,7 @@
 export * from './constants';
 export { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, computeStepOptions, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, } from './slider-state';
 export type { ISliderAccessibilityState } from './slider-state';
-export type { ISliderProps, ISliderPlatform, ISliderViewProps } from './slider-props';
+export type { ISliderProps, ISliderPlatform, ISliderViewProps, } from './slider-props';
 export { renderSlider, renderSliderNative, resolveSliderWrapperStyle, resolveSliderNativeStyle, } from './render-slider';
 export { renderStepsIndicator, resolveStepsContainerStyle, stepNumberFontSize, orderStepOptions, STEP_INDICATOR_ELEMENT_STYLE, TRACK_MARK_CONTAINER_STYLE, THUMB_IMAGE_CONTAINER_STYLE, THUMB_IMAGE_STYLE, STEP_NUMBER_CONTAINER_STYLE, } from './render-steps-indicator';
-export type { IStepsIndicatorParams, IStepMarkerProps } from './render-steps-indicator';
+export type { IStepsIndicatorParams, IStepMarkerProps, } from './render-steps-indicator';

package/build/core/render-slider.js

@@ -11,7 +11,11 @@ import { RNC_SLIDER_VIEW_NAME } from './constants.js';
 // The native slider stretches to the measured wrapper width when one is given (the step indicator
 // and thumb then share one coordinate space); without it the slider sizes naturally.
 export function resolveSliderNativeStyle(width, platform) {
-    const base = { zIndex: 1, alignContent: 'center', alignItems: 'center' };
+    const base = {
+        zIndex: 1,
+        alignContent: 'center',
+        alignItems: 'center',
+    };
     const sized = width === undefined ? base : [base, { width }];
     return [platform.defaultStyle, sized];
 }

package/build/core/render-steps-indicator.js

@@ -64,16 +64,25 @@ export function orderStepOptions(options, inverted) {
 function renderStepCell(value, displayIndex, params, fontSize) {
     const trackMarkChildren = [];
     if (params.thumbImage !== undefined && value === params.currentValue) {
-        trackMarkChildren.push(el('symbiote-view', { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' }, [el('symbiote-image', { source: params.thumbImage, style: THUMB_IMAGE_STYLE })]));
+        trackMarkChildren.push(el('symbiote-view', {
+            style: THUMB_IMAGE_CONTAINER_STYLE,
+            testID: 'sliderTrackMark-thumbImage',
+        }, [
+            el('symbiote-image', {
+                source: params.thumbImage,
+                style: THUMB_IMAGE_STYLE,
+            }),
+        ]));
     }
     const cellChildren = [
         el('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
     ];
     if (params.renderStepNumber === true) {
         cellChildren.push(el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
-            txt({ testID: `${displayIndex}th-step`, style: { fontSize } }, [
-                String(value),
-            ]),
+            txt({
+                testID: `${displayIndex}th-step`,
+                style: { fontSize },
+            }, [String(value)]),
         ]));
     }
     return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);

package/build/core/slider-props.js

@@ -1,7 +1,5 @@
-// Slider prop types. Every field of the slider's public surface is framework-agnostic EXCEPT the
-// custom `StepMarker`, which is a render component returning a framework element (React FC vs Vue
-// slot) — since that element type is framework-specific, it can't live in a shared type, so it
-// stays in each adapter's own flavored prop type. ISliderProps here is the shared agnostic base
-// every adapter re-exports and extends; ISliderViewProps is the pre-resolved input the render fn
-// paints.
+// Slider prop types. ISliderProps is the shared agnostic base every adapter re-exports and
+// extends; ISliderViewProps is the pre-resolved input the render fn paints. The custom
+// `StepMarker` field is per-adapter (a framework element return type can't live here) - see
+// CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>.
 export {};

package/build/react/slider/index.ios.js

@@ -2,7 +2,7 @@
 // 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 { createSlider } from './shared.js';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core/index.js';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core/index.js';
 const IOS_STEPS_CONTAINER_TOP = 10;
 export const Slider = createSlider({
     defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },

package/build/react/slider/shared.js

@@ -8,10 +8,10 @@
 // it). This is the React twin of the Vue wrapper; both drive the engine, NEITHER imports the
 // library's React Slider component — that component internally calls React hooks off the React
 // dispatcher, so a non-React adapter rendering it directly would crash on a null dispatcher.
-import { createElement, forwardRef, useCallback, useEffect, useState } from 'react';
+import { createElement, forwardRef, useCallback, useEffect, useState, } from 'react';
 import { descriptorToReact, Image } from '@symbiote-native/react';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
-import { dlog } from '@symbiote-native/engine';
+import { dlog, } from '@symbiote-native/engine';
 import { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, computeStepOptions, orderStepOptions, stepNumberFontSize, renderSlider, renderSliderNative, resolveStepsContainerStyle, renderStepsIndicator, STEP_INDICATOR_ELEMENT_STYLE, TRACK_MARK_CONTAINER_STYLE, THUMB_IMAGE_CONTAINER_STYLE, THUMB_IMAGE_STYLE, STEP_NUMBER_CONTAINER_STYLE, 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, } from '../../core/index.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -116,7 +116,11 @@ export function createSlider(platform) {
                 platform,
                 StepMarker,
             });
-            return createElement('symbiote-view', { style: resolveStepsWrapperStyle(style, platform), onLayout: handleLayout, className }, overlay, descriptorToReact(renderSliderNative(view, platform)));
+            return createElement('symbiote-view', {
+                style: resolveStepsWrapperStyle(style, platform),
+                onLayout: handleLayout,
+                className,
+            }, overlay, descriptorToReact(renderSliderNative(view, platform)));
         }
         const steps = renderStepsIndicator({
             options,
@@ -158,7 +162,10 @@ function renderCustomStepsOverlay(params) {
                 key: 'thumb',
                 style: THUMB_IMAGE_CONTAINER_STYLE,
                 testID: 'sliderTrackMark-thumbImage',
-            }, createElement(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })));
+            }, createElement(Image, {
+                source: params.thumbImage,
+                style: THUMB_IMAGE_STYLE,
+            })));
         }
         const cellChildren = [
             createElement('symbiote-view', { key: 'track', style: TRACK_MARK_CONTAINER_STYLE }, ...trackChildren),

package/build/register/index.js

@@ -6,7 +6,7 @@
 // hooks, so it is framework-agnostic and shared by every adapter entry (vue / react). Each adapter
 // barrel imports it; the component modules and their headless tests stay free of the spec.
 import '@react-native-community/slider/dist/RNCSliderNativeComponent';
-import { processColor, registerComponent } from '@symbiote-native/engine';
+import { processColor, registerComponent, } from '@symbiote-native/engine';
 import { RNC_SLIDER_VIEW_NAME, SLIDER_ON_CHANGE, SLIDER_ON_VALUE_CHANGE, SLIDER_ON_SLIDING_START, SLIDER_ON_SLIDING_COMPLETE, SLIDER_ON_ACCESSIBILITY_ACTION, } from '../core/index.js';
 function listenerName(prop) {
     return prop.charAt(2).toLowerCase() + prop.slice(3);
@@ -22,7 +22,10 @@ function processSliderColor(value) {
 registerComponent(RNC_SLIDER_VIEW_NAME, {
     events: [
         { raw: 'topChange', listener: listenerName(SLIDER_ON_CHANGE) },
-        { raw: 'topRNCSliderValueChange', listener: listenerName(SLIDER_ON_VALUE_CHANGE) },
+        {
+            raw: 'topRNCSliderValueChange',
+            listener: listenerName(SLIDER_ON_VALUE_CHANGE),
+        },
         {
             raw: 'topRNCSliderSlidingStart',
             listener: listenerName(SLIDER_ON_SLIDING_START),

package/build/solid/index.d.ts

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

package/build/solid/index.js

@@ -0,0 +1,8 @@
+// @symbiote-native/slider/solid: the Solid wrapper over the @react-native-community/slider native
+// view. The bare import below is FIRST and is a side effect, not a re-export: it registers the
+// native view's ViewConfig (the codegen spec, never the library's React component) before any
+// Slider can mount. Metro's production-only `inlineRequires` moves a require down to the first
+// place its binding is USED and compiles a barrel's re-export into a lazy getter, so a registration
+// reached through one silently never runs in RELEASE builds only. Do not restructure it.
+import '../register';
+export { Slider } from './slider';

package/build/solid/slider/index.android.d.ts

@@ -0,0 +1,2 @@
+export type { ISliderProps, ISliderStepMarker } from './shared';
+export declare const Slider: (props: import("./shared").ISliderProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

package/build/solid/slider/index.android.js

@@ -0,0 +1,10 @@
+// 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 { createSlider } from './shared.js';
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core/index.js';
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+export const Slider = createSlider({
+    defaultStyle: {},
+    stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+    stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+});

package/build/solid/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './index.ios';

package/build/solid/slider/index.ios.d.ts

@@ -0,0 +1,2 @@
+export type { ISliderProps, ISliderStepMarker } from './shared';
+export declare const Slider: (props: import("./shared").ISliderProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

package/build/solid/slider/index.ios.js

@@ -0,0 +1,11 @@
+// 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 { createSlider } from './shared.js';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core/index.js';
+const IOS_STEPS_CONTAINER_TOP = 10;
+export const Slider = createSlider({
+    defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+    stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+    stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+});

package/build/solid/slider/index.js

@@ -0,0 +1,4 @@
+// Base / default Slider: re-exports the iOS build. Metro overrides this with index.ios.ts /
+// index.android.ts on a real host; under vitest / tsc the resolution lands here. Filename is the
+// selector, no Platform.OS read — the same convention adapters/solid's own Switch follows.
+export * from './index.ios.js';

package/build/solid/slider/shared.d.ts

@@ -0,0 +1,12 @@
+import type { Accessor, Ref } from 'solid-js';
+import { type IHostInstance } from '@symbiote-native/solid';
+import type { JSX } from '@symbiote-native/solid/jsx-runtime';
+import { type IClassNameValue } from '@symbiote-native/engine';
+import { type ISliderPlatform, type ISliderProps as ISliderBaseProps, type IStepMarkerProps } from '../../core';
+export type ISliderStepMarker = (marker: Accessor<IStepMarkerProps>) => JSX.Element;
+export type ISliderProps = ISliderBaseProps & {
+    class?: IClassNameValue;
+    StepMarker?: ISliderStepMarker;
+    ref?: Ref<IHostInstance>;
+};
+export declare function createSlider(platform: ISliderPlatform): (props: ISliderProps) => JSX.Element;