@symbiote-native/slider 5.0.3 → 5.2.0

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;
+}

package/build/svelte/index.d.ts

@@ -0,0 +1,3 @@
+import '../register';
+export { default as Slider } from './slider/index.svelte';
+export type { ISliderProps } from './slider/slider-props';

package/build/svelte/index.js

@@ -0,0 +1,9 @@
+// @symbiote-native/slider/svelte: Svelte wrapper over the @react-native-community/slider native
+// view. Importing this barrel first registers the native view's ViewConfig (../register, a
+// side-effect import of the codegen spec, never the library's React component), then exposes
+// Slider. Mirrors vue/index.ts, except the platform split lives one level down
+// (slider/slider-platform.ts, Metro-filename-selected) - matching this adapter's own
+// Switch/ActivityIndicator convention, since Svelte components are compiled `.svelte` files, not
+// factories like Vue's per-platform `createSlider(platform)`.
+import '../register';
+export { default as Slider } from './slider/index.svelte';

package/build/svelte/slider/index.svelte

@@ -0,0 +1,326 @@
+<script lang="ts" module>
+  // Slider, the Svelte lifecycle half. Logic (value/limit/disabled folds, step-option layout) and
+  // the native render live in @symbiote-native/slider core, shared with every adapter; Svelte
+  // supplies reactivity (`$state`/`$derived`) and the descriptor bridge for the native
+  // `RNCSlider` leaf. The native view carries no symbiote metadata - the engine derives its
+  // events/color/image processors from the library's ViewConfig at runtime, registered by the
+  // side-effect import in ../index (not here, so this module and its tests stay free of the
+  // third-party spec).
+  //
+  // The leaf is bridged rather than written as `<RNCSlider>` because 'RNCSlider' is neither
+  // hyphenated nor lowercase-leading, so Svelte's compiler parses a literal tag as a COMPONENT
+  // reference, not an element (confirmed against the compiled output). The descriptor bridge
+  // (`native-view-bridge`'s `mountDescriptorChildren`, svelte-adapter-dom-shim skill §19)
+  // sidesteps this by calling `document.createElement(child.type)` programmatically, which the
+  // compiler never inspects. Imported from `native-view-bridge`, not the package's main barrel -
+  // the main barrel pulls in the whole `.svelte` module graph, fatal under vitest's plain
+  // svelte-plugin-free transform (this component's own smoke test).
+  //
+  // The custom-marker overlay's thumb-image cell uses the raw `symbiote-image` host tag rather
+  // than the framework's `Image` component: core's `render-steps-indicator.ts` paints the same
+  // default-overlay thumb with a bare `el('symbiote-image', {source, style})` Descriptor, and
+  // importing another `.svelte` component here would reintroduce the same main-barrel problem
+  // one level down.
+  import type { ISliderProps } from './slider-props';
+
+  export type { ISliderProps };
+</script>
+
+<script lang="ts">
+  import { dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+  import {
+    mountDescriptorChildren,
+    createDescriptorChildrenSync,
+    type IDescriptorChildrenMount,
+    type ShimElement,
+  } from '@symbiote-native/svelte/native-view-bridge';
+  import type { IDescriptorChild } from '@symbiote-native/components';
+  import {
+    sanitizeSliderValue,
+    resolveSliderDisabled,
+    resolveSliderAccessibilityState,
+    resolveSliderLowerLimit,
+    resolveSliderUpperLimit,
+    valueFromSliderEvent,
+    shouldRenderStepsIndicator,
+    resolveThumbTintColor,
+    shouldPassNativeThumbImage,
+    isInvalidLimitConfig,
+    computeStepOptions,
+    orderStepOptions,
+    stepNumberFontSize,
+    renderSlider,
+    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,
+    type ISliderViewProps,
+  } from '../../core';
+  import { PLATFORM } from './slider-platform';
+
+  function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  let {
+    value = $bindable(),
+    minimumValue,
+    maximumValue,
+    step,
+    lowerLimit,
+    upperLimit,
+    disabled,
+    inverted = false,
+    thumbTintColor,
+    thumbImage,
+    accessibilityState,
+    renderStepNumber,
+    style,
+    class: className,
+    stepMarker,
+    onValueChange,
+    onSlidingStart,
+    onSlidingComplete,
+    onAccessibilityAction,
+    ...passthrough
+  }: ISliderProps = $props();
+
+  // Last value native reported, kept only to mark the active step - not the controlled value (the
+  // slider is uncontrolled during a drag, unlike Switch: native owns the thumb position). A plain
+  // number, not an engine-node reference, so `$state` (not `.raw`) is fine here; only `hostShim*`
+  // below needs `.raw`'s no-deep-proxy guarantee for the engine's WeakMap-keyed identity lookups.
+  let reportedValue = $state<number | undefined>(undefined);
+  // The measured wrapper width the step indicator lays out against; 0 until the first layout.
+  let width = $state(0);
+
+  function handleValueChange(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next === undefined) return;
+    reportedValue = next;
+    // Additive `bind:value` sugar (svelte-adapter-dom-shim skill): reassigning a `$bindable()`
+    // prop pushes it to the caller's bound variable, on the same report path as `onValueChange`
+    // below (matches the Vue adapter's `emitModelUpdate` timing) - never replacing the
+    // `value`/`onValueChange` contract.
+    value = next;
+    onValueChange?.(next);
+  }
+  function handleSlidingStart(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next !== undefined) onSlidingStart?.(next);
+  }
+  function handleSlidingComplete(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next !== undefined) onSlidingComplete?.(next);
+  }
+  function handleAccessibilityAction(event: ISymbioteEvent): void {
+    onAccessibilityAction?.(event);
+  }
+  function handleLayout(event: ISymbioteEvent): void {
+    const layout = event.nativeEvent.layout;
+    if (isRecord(layout) && typeof layout.width === 'number')
+      width = layout.width;
+  }
+
+  const minimum = $derived(minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE);
+  const maximum = $derived(maximumValue ?? SLIDER_DEFAULT_MAXIMUM_VALUE);
+  const resolvedStep = $derived(step ?? SLIDER_DEFAULT_STEP);
+  const lower = $derived(resolveSliderLowerLimit(lowerLimit));
+  const upper = $derived(resolveSliderUpperLimit(upperLimit));
+
+  $effect(() => {
+    if (isInvalidLimitConfig(lower, upper)) {
+      dlog('Slider: lowerLimit must be smaller than upperLimit');
+    }
+  });
+
+  const hasStepMarker = $derived(stepMarker !== undefined);
+  const hasThumbImage = $derived(thumbImage !== undefined);
+  const showSteps = $derived(
+    shouldRenderStepsIndicator(hasStepMarker, renderStepNumber),
+  );
+
+  // The native view gets a thumbImage only when there is one AND no custom marker (which draws
+  // its own thumb), matching the library. Passed raw — the engine runs the image processor
+  // derived from RNCSlider's ViewConfig (same path as the color tints).
+  const nativeThumbImage = $derived(
+    shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+      ? thumbImage
+      : undefined,
+  );
+
+  const view = $derived<ISliderViewProps>({
+    value: sanitizeSliderValue(value),
+    minimumValue: minimum,
+    maximumValue: maximum,
+    step: resolvedStep,
+    lowerLimit: lower,
+    upperLimit: upper,
+    disabled: resolveSliderDisabled(disabled, accessibilityState),
+    inverted,
+    thumbTintColor: resolveThumbTintColor(
+      thumbTintColor,
+      hasStepMarker,
+      hasThumbImage,
+    ),
+    thumbImage: nativeThumbImage,
+    accessibilityState: resolveSliderAccessibilityState(
+      disabled,
+      accessibilityState,
+    ),
+    width,
+    style,
+    passthrough: {
+      ...passthrough,
+      [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 = $derived(
+    computeStepOptions(minimum, maximum, resolvedStep, PLATFORM.stepResolution),
+  );
+  const currentValue = $derived(reportedValue ?? view.value ?? minimum);
+
+  // --- No custom marker: renderSlider() is the single source of truth (wrapper + optional
+  // default steps overlay + the native leaf), ALL pure Descriptor — mounted via the bridge.
+  // Unlike every fixed-shape component elsewhere in this adapter, this Descriptor's own shape
+  // genuinely varies with `renderStepNumber` (1 child with no overlay, 2 with one), so the sync
+  // below tolerates a child-count change with a clean rebuild instead of assuming constant shape.
+  const defaultDescriptor = $derived(
+    hasStepMarker
+      ? undefined
+      : renderSlider(
+          view,
+          PLATFORM,
+          showSteps
+            ? {
+                steps: renderStepsIndicator({
+                  options,
+                  currentValue,
+                  width,
+                  renderStepNumber: renderStepNumber === true,
+                  thumbImage,
+                  inverted,
+                  platform: PLATFORM,
+                }),
+                onLayout: handleLayout,
+              }
+            : { onLayout: handleLayout },
+        ),
+  );
+
+  let hostShimDefault = $state.raw<ShimElement | null>(null);
+  let mountedDefault: IDescriptorChildrenMount | undefined;
+  let mountedDefaultCount = -1;
+
+  function syncDefaultChildren(children: IDescriptorChild[]): void {
+    if (hostShimDefault === null) return;
+    if (
+      mountedDefault === undefined ||
+      mountedDefaultCount !== children.length
+    ) {
+      for (const child of hostShimDefault.children.slice())
+        hostShimDefault.removeChild(child);
+      mountedDefault = mountDescriptorChildren(hostShimDefault, children);
+      mountedDefaultCount = children.length;
+    } else {
+      mountedDefault.update(children);
+    }
+  }
+
+  $effect(() => {
+    const descriptor = defaultDescriptor;
+    if (descriptor === undefined) return;
+    syncDefaultChildren(descriptor.children);
+  });
+
+  // --- Custom marker: the overlay is hand-authored live template content below (it hosts the
+  // caller's `stepMarker` Snippet, a live child no Descriptor can carry — component-render-fn-
+  // boundary rule). Only the native leaf (always exactly one, constant shape) is bridged.
+  const fontSize = $derived(stepNumberFontSize(options.length));
+  const orderedOptions = $derived(orderStepOptions(options, inverted));
+  const minOption = $derived(options[0]);
+  const maxOption = $derived(options[options.length - 1]);
+  const nativeLeafDescriptor = $derived(renderSliderNative(view, PLATFORM));
+  const markerWrapperBag = $derived({
+    style: resolveSliderWrapperStyle(style, PLATFORM),
+    class: className,
+    onLayout: handleLayout,
+  });
+
+  let hostShimMarker = $state.raw<ShimElement | null>(null);
+  const syncMarkerLeaf = createDescriptorChildrenSync();
+
+  $effect(() => {
+    if (!hasStepMarker) return;
+    syncMarkerLeaf(hostShimMarker, [nativeLeafDescriptor]);
+  });
+</script>
+
+{#if hasStepMarker}
+  <symbiote-view p={markerWrapperBag} bind:this={hostShimMarker}>
+    <symbiote-view
+      p={{
+        pointerEvents: 'none',
+        testID: 'StepsIndicator-Container',
+        style: resolveStepsContainerStyle(width, PLATFORM),
+      }}
+    >
+      {#each orderedOptions as optionValue, index (optionValue)}
+        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
+          <symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
+            {@render stepMarker?.({
+              stepMarked: optionValue === currentValue,
+              currentValue,
+              index,
+              min: minOption,
+              max: maxOption,
+            })}
+            {#if thumbImage !== undefined && optionValue === currentValue}
+              <symbiote-view
+                p={{
+                  style: THUMB_IMAGE_CONTAINER_STYLE,
+                  testID: 'sliderTrackMark-thumbImage',
+                }}
+              >
+                <symbiote-image
+                  p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }}
+                />
+              </symbiote-view>
+            {/if}
+          </symbiote-view>
+          {#if renderStepNumber}
+            <symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
+              <symbiote-text
+                p={{ testID: `${index}th-step`, style: { fontSize } }}
+              >
+                {String(optionValue)}
+              </symbiote-text>
+            </symbiote-view>
+          {/if}
+        </symbiote-view>
+      {/each}
+    </symbiote-view>
+  </symbiote-view>
+{:else}
+  <symbiote-view
+    p={{ ...defaultDescriptor?.props, class: className }}
+    bind:this={hostShimDefault}
+  />
+{/if}

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

@@ -0,0 +1,5 @@
+import type { ISliderProps } from './slider-props';
+export type { ISliderProps };
+declare const Index: import("svelte").Component<ISliderProps, {}, "value">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/build/svelte/slider/slider-platform.android.d.ts

@@ -0,0 +1,2 @@
+import type { ISliderPlatform } from '../../core';
+export declare const PLATFORM: ISliderPlatform;

package/build/svelte/slider/slider-platform.android.js

@@ -0,0 +1,11 @@
+// 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
+// packages/slider/src/vue/slider/index.android.ts exactly, one level down (platform CONSTANT
+// here — see index.svelte's header).
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core/index.js';
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+export const PLATFORM = {
+    defaultStyle: {},
+    stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+    stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+};

package/build/svelte/slider/slider-platform.d.ts

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

package/build/svelte/slider/slider-platform.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ISliderPlatform } from '../../core';
+export declare const PLATFORM: ISliderPlatform;