@symbiote-native/slider 5.1.0 → 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

@@ -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/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;

package/build/solid/slider/shared.js

@@ -0,0 +1,296 @@
+// Slider, the Solid 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 React, Vue,
+// Svelte and Angular; Solid supplies only the reactivity — a signal for the value native last
+// reported (to mark the active step), a signal for the measured width — plus the descriptor bridge.
+// The native RNCSlider carries no symbiote metadata: the engine derives its events and color/image
+// processors from the library's ViewConfig, registered by ../register (the package barrel pulls it,
+// NOT this module, so the tests stay free of the third-party spec). Like every other adapter here,
+// this NEVER imports the library's React Slider component — it calls hooks off the React dispatcher
+// and would crash under a non-React adapter.
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
+// destructure would freeze the slider at its mount-time values; every read sits inside an accessor.
+//
+// WHY THE TREE IS ASSEMBLED BY HAND INSTEAD OF THROUGH renderSlider(). Solid has no reconciler
+// between what this file returns and the host nodes, so a tree whose SHAPE changes has to be
+// rebuilt, and rebuilding the native slider would throw away the node identity its own thumb grip
+// and every imperative command key on. renderSlider's Descriptor carries the step overlay as a
+// child, i.e. its child count flips with `renderStepNumber` — which descriptorToSolid refuses
+// (.claude/rules/solid-descriptor-bridge.md §2). So the wrapper is built once here, the native leaf
+// is bridged once via renderSliderNative (the split core exposes for exactly this: React takes it
+// too on its custom-marker path), and only the OVERLAY sits behind a rebuild boundary. The result
+// is a stable native node across every overlay change — where React remounts it, since the wrapper's
+// unkeyed children shift by one.
+//
+// The hand-written createElement / spread / insert calls below are what compiled JSX emits; this
+// package cannot use JSX at all, because its tsconfig is shared with the React/Vue/Angular entries
+// and TypeScript has one `jsx` setting per program. descriptor-to-solid.ts drives the renderer the
+// same way for the same reason.
+// createComponent comes from solid-js, not the renderer's re-export: the renderer's is typed to
+// return its own host-node union, which cannot hold what a component returns (an Image is
+// JSX.Element). Same function either way.
+import { createComponent, createEffect, createMemo, createSignal, untrack, } from 'solid-js';
+import { descriptorToSolid, Image, } from '@symbiote-native/solid';
+import { createElement, createTextNode, insert, insertNode, setProp, spread, } from '@symbiote-native/solid/renderer';
+import { resolveAccessibilityProps } from '@symbiote-native/components';
+import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
+import { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, computeStepOptions, orderStepOptions, stepNumberFontSize, renderSliderNative, resolveSliderWrapperStyle, 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';
+// Read by the component itself; everything else (the track tints and images, thumbSize, tapToSeek,
+// vertical, testID, the accessibility surface, a caller's `ref`) forwards onto the native leaf. The
+// four JS callbacks MUST be stripped — a function prop reaching Fabric crashes Android's
+// folly::dynamic serializer — and are re-supplied as the native event handlers in `passthrough`.
+const HANDLED_PROPS = [
+    'value',
+    'minimumValue',
+    'maximumValue',
+    'step',
+    'lowerLimit',
+    'upperLimit',
+    'disabled',
+    'inverted',
+    'thumbTintColor',
+    'thumbImage',
+    'accessibilityState',
+    'renderStepNumber',
+    'style',
+    'class',
+    'StepMarker',
+    'onValueChange',
+    'onSlidingStart',
+    'onSlidingComplete',
+    'onAccessibilityAction',
+];
+function forwardProps(resolved) {
+    const forwarded = { ...resolved };
+    for (const key of HANDLED_PROPS)
+        delete forwarded[key];
+    return forwarded;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+// Narrowing, not defensive: the renderer's createElement is typed over its IHostNode union (which
+// includes the surface), while everything below needs a real host node. Same guard descriptorToSolid
+// opens with.
+function hostElement(tag) {
+    const node = createElement(tag);
+    if (!isSymbioteNode(node)) {
+        throw new Error(`Slider: ${tag} did not create a host node`);
+    }
+    return node;
+}
+// Solid core's own render-prop shape, line for line with `<Show>`: untrack + accessor, with an arity
+// guard because `typeof fn === 'function'` cannot separate a render prop from the bare zero-argument
+// accessor JSX.Element also permits. A 0-arity marker is handed back unread so `insert` wraps it in
+// its own render effect; calling it here would freeze it at its first value.
+function callStepMarker(marker, props) {
+    if (marker.length === 0)
+        return () => marker(props);
+    return untrack(() => marker(props));
+}
+export function createSlider(platform) {
+    return function Slider(props) {
+        // What native last reported, kept only to mark the active step. NOT the controlled value — the
+        // slider is uncontrolled during a drag, native owns the thumb and reports up.
+        const [reportedValue, setReportedValue] = createSignal(undefined);
+        // The measured wrapper width the step indicator lays out against; 0 until the first layout.
+        const [width, setWidth] = createSignal(0);
+        const handleValueChange = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next === undefined)
+                return;
+            setReportedValue(next);
+            props.onValueChange?.(next);
+        };
+        const handleSlidingStart = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next !== undefined)
+                props.onSlidingStart?.(next);
+        };
+        const handleSlidingComplete = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next !== undefined)
+                props.onSlidingComplete?.(next);
+        };
+        const handleAccessibilityAction = (event) => {
+            props.onAccessibilityAction?.(event);
+        };
+        const handleLayout = (event) => {
+            const layout = event.nativeEvent.layout;
+            if (isRecord(layout) && typeof layout.width === 'number') {
+                setWidth(layout.width);
+            }
+        };
+        const minimumValue = () => props.minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE;
+        const maximumValue = () => props.maximumValue ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
+        const step = () => props.step ?? SLIDER_DEFAULT_STEP;
+        const lowerLimit = () => resolveSliderLowerLimit(props.lowerLimit);
+        const upperLimit = () => resolveSliderUpperLimit(props.upperLimit);
+        createEffect(() => {
+            if (isInvalidLimitConfig(lowerLimit(), upperLimit())) {
+                dlog('Slider: lowerLimit must be smaller than upperLimit');
+            }
+        });
+        const hasStepMarker = () => props.StepMarker !== undefined;
+        const hasThumbImage = () => props.thumbImage !== undefined;
+        const showSteps = () => shouldRenderStepsIndicator(hasStepMarker(), props.renderStepNumber);
+        const view = () => {
+            // Folded BEFORE the handled props are read, exactly as React folds rawProps before it
+            // destructures: `aria-disabled` lands in accessibilityState, and reading the raw prop instead
+            // would hand the fold below an undefined and blank the a11y state the alias just set.
+            const resolved = resolveAccessibilityProps(props);
+            return {
+                value: sanitizeSliderValue(props.value),
+                minimumValue: minimumValue(),
+                maximumValue: maximumValue(),
+                step: step(),
+                lowerLimit: lowerLimit(),
+                upperLimit: upperLimit(),
+                disabled: resolveSliderDisabled(props.disabled, resolved.accessibilityState),
+                inverted: props.inverted ?? false,
+                thumbTintColor: resolveThumbTintColor(props.thumbTintColor, hasStepMarker(), hasThumbImage()),
+                // Passed to native raw — the engine runs the image processor derived from RNCSlider's
+                // ViewConfig — and only when no custom marker draws its own thumb (matches the library).
+                thumbImage: shouldPassNativeThumbImage(hasStepMarker(), hasThumbImage())
+                    ? props.thumbImage
+                    : undefined,
+                accessibilityState: resolveSliderAccessibilityState(props.disabled, resolved.accessibilityState),
+                width: width(),
+                style: props.style,
+                passthrough: {
+                    ...forwardProps(resolved),
+                    [SLIDER_ON_CHANGE]: handleValueChange,
+                    [SLIDER_ON_VALUE_CHANGE]: handleValueChange,
+                    [SLIDER_ON_SLIDING_START]: handleSlidingStart,
+                    [SLIDER_ON_SLIDING_COMPLETE]: handleSlidingComplete,
+                    [SLIDER_ON_ACCESSIBILITY_ACTION]: handleAccessibilityAction,
+                },
+            };
+        };
+        const options = createMemo(() => computeStepOptions(minimumValue(), maximumValue(), step(), platform.stepResolution));
+        const currentValue = createMemo(() => reportedValue() ?? sanitizeSliderValue(props.value) ?? minimumValue());
+        // THE REBUILD BOUNDARY (.claude/rules/solid-descriptor-bridge.md §5). Everything read TRACKED
+        // here changes the overlay's SHAPE — which overlay kind, how many cells, whether each cell
+        // carries a number — and the build itself is untracked so it does not also subscribe to every
+        // value/width read inside it. Drop the untrack and one drag rebuilds the whole indicator.
+        const overlay = createMemo(() => {
+            if (!showSteps())
+                return null;
+            const marker = props.StepMarker;
+            const cells = options();
+            const withNumbers = props.renderStepNumber === true;
+            const inverted = props.inverted ?? false;
+            const thumbImage = props.thumbImage;
+            // Read for its dependency, not its value: the DEFAULT overlay hands the thumb image to
+            // whichever cell matches the current value, so the cell's child count moves with that value —
+            // a shape change descriptorToSolid refuses. With no thumb image the shape is fixed and the
+            // bridge just re-props the same nodes.
+            if (marker === undefined && thumbImage !== undefined)
+                currentValue();
+            return untrack(() => marker === undefined
+                ? descriptorToSolid(() => renderStepsIndicator({
+                    options: cells,
+                    currentValue: currentValue(),
+                    width: width(),
+                    renderStepNumber: withNumbers,
+                    thumbImage,
+                    inverted,
+                    platform,
+                }))
+                : buildCustomOverlay({
+                    cells,
+                    marker,
+                    withNumbers,
+                    inverted,
+                    currentValue,
+                    width,
+                    thumbImage: () => props.thumbImage,
+                    platform,
+                }));
+        });
+        // Built ONCE and kept by identity: descriptorToSolid wires every prop through a render effect on
+        // this same node, so a value/tint/limit change re-commits the existing native slider instead of
+        // replacing it — which would drop the thumb the user is dragging.
+        const leaf = descriptorToSolid(() => renderSliderNative(view(), platform));
+        const wrapper = hostElement('symbiote-view');
+        // A statically-present key set (all three are always emitted), so this needs no withStableKeys
+        // widening — `spread` alone has no removal pass for a key that vanishes.
+        spread(wrapper, () => ({
+            style: resolveSliderWrapperStyle(props.style, platform),
+            class: props.class,
+            onLayout: handleLayout,
+        }), true);
+        insertNode(wrapper, leaf);
+        // The overlay goes BEFORE the leaf, matching the z-order renderSlider composes; `leaf` is the
+        // marker `insert` positions against, which is also what keeps it from clearing the wrapper.
+        insert(wrapper, overlay, leaf);
+        return wrapper;
+    };
+}
+// The custom-marker overlay: the same flex row the agnostic default paints, but each mark hosts the
+// caller's own marker element, mirroring the library's SliderTrackMark composition. Built by hand
+// rather than as a Descriptor because a Descriptor holds only VALUES, and a marker is a live Solid
+// subtree — the same boundary View and Pressable sit on.
+function buildCustomOverlay(params) {
+    const fontSize = stepNumberFontSize(params.cells.length);
+    const ordered = orderStepOptions(params.cells, params.inverted);
+    const min = params.cells[0];
+    const max = params.cells[params.cells.length - 1];
+    const container = hostElement('symbiote-view');
+    // pointerEvents none so the overlay never eats the drag. `style` tracks the measured width, hence
+    // an accessor rather than a one-shot setProp.
+    spread(container, () => ({
+        pointerEvents: 'none',
+        testID: 'StepsIndicator-Container',
+        style: resolveStepsContainerStyle(params.width(), params.platform),
+    }), true);
+    ordered.forEach((value, index) => {
+        insertNode(container, buildStepCell({ value, index, min, max, fontSize, params }));
+    });
+    return container;
+}
+function buildStepCell(cell) {
+    const { params } = cell;
+    const element = hostElement('symbiote-view');
+    setProp(element, 'style', STEP_INDICATOR_ELEMENT_STYLE);
+    const track = hostElement('symbiote-view');
+    setProp(track, 'style', TRACK_MARK_CONTAINER_STYLE);
+    insertNode(element, track);
+    // A memo, not a bare accessor: several leaves inside one marker must see the same object, and an
+    // unchanged value must not hand out a fresh one.
+    const markerProps = createMemo(() => ({
+        stepMarked: cell.value === params.currentValue(),
+        currentValue: params.currentValue(),
+        index: cell.index,
+        min: cell.min,
+        max: cell.max,
+    }));
+    const markerElement = callStepMarker(params.marker, markerProps);
+    // One `insert` owns the track's children: the marker (stable identity, reconciled in place) and
+    // the thumb image, which only the cell matching the current value carries.
+    insert(track, () => [markerElement, buildThumbImage(cell)]);
+    if (params.withNumbers) {
+        const numberBox = hostElement('symbiote-view');
+        setProp(numberBox, 'style', STEP_NUMBER_CONTAINER_STYLE);
+        const label = hostElement('symbiote-text');
+        setProp(label, 'testID', `${cell.index}th-step`);
+        setProp(label, 'style', { fontSize: cell.fontSize });
+        insertNode(label, createTextNode(String(cell.value)));
+        insertNode(numberBox, label);
+        insertNode(element, numberBox);
+    }
+    return element;
+}
+function buildThumbImage(cell) {
+    const source = cell.params.thumbImage();
+    if (source === undefined || cell.value !== cell.params.currentValue()) {
+        return null;
+    }
+    const container = hostElement('symbiote-view');
+    setProp(container, 'style', THUMB_IMAGE_CONTAINER_STYLE);
+    setProp(container, 'testID', 'sliderTrackMark-thumbImage');
+    // The Image COMPONENT, not a raw symbiote-image: it resolves an asset id through RN's own
+    // resolveAssetSource, exactly as React's and Vue's custom overlays do.
+    insert(container, createComponent(Image, { source, style: THUMB_IMAGE_STYLE }));
+    return container;
+}