@symbiote-native/slider 5.1.0 → 6.0.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,39 @@ import { Slider } from '@symbiote-native/slider/vue';
 </template>
 ```
 
+```svelte
+<!-- Svelte — examples/svelte/screens/CanaryScreen.svelte -->
+<script lang="ts">
+  import { Slider } from '@symbiote-native/slider/svelte';
+  let volume = $state(0.6);
+</script>
+
+<Slider
+  value={volume}
+  onValueChange={next => (volume = next)}
+  minimumValue={0}
+  maximumValue={1}
+  step={0.01}
+  minimumTrackTintColor="#7fb5ff"
+  maximumTrackTintColor="#334155"
+  thumbTintColor="#ffffff"
+/>
+```
+
+```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 +129,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/index.js

@@ -1,2 +1,2 @@
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

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

@@ -46,7 +46,13 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
-            providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
+            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

@@ -39,7 +39,7 @@ 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({
@@ -47,7 +47,13 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
-            providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
+            providers: [
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => Slider),
+                    multi: true,
+                },
+            ],
             template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
         })];
     let _classDescriptor;

package/build/angular/slider/shared.js

@@ -660,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/react/index.js

@@ -3,5 +3,5 @@
 // import of the codegen spec — never the library's React Slider component), then exposes the
 // platform-split Slider. The public prop type is the agnostic base plus React's StepMarker render
 // component (Vue takes the same marker as a scoped slot).
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

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/index.js';
+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;