@symbiote-native/slider 5.0.0 → 5.0.1

package/build/react/slider/shared.js

@@ -1,176 +0,0 @@
-// Slider, the React lifecycle half. The logic (value/limit/disabled folds, the step-option layout)
-// and the native render live in @symbiote-native/slider core, shared verbatim with the Vue adapter; here
-// React supplies the lifecycle — useState for the last-reported value (to mark the active step)
-// and the measured width (for the step indicator), useEffect for the limit warning — plus the
-// descriptor bridge and forwardRef to the native view (matching the library's forwardRef). 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). 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 { descriptorToReact, Image } from '@symbiote-native/react';
-import { resolveAccessibilityProps } from '@symbiote-native/components';
-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);
-}
-function toChild(child) {
-    return typeof child === 'string' ? child : descriptorToReact(child);
-}
-// renderSlider's Descriptor IS the outer wrapper (symbiote-view hosting the native leaf +
-// optional steps overlay); className is reapplied on it here, exactly like ImageBackground's
-// wrapper.
-function withClassName(descriptor, className) {
-    return createElement(descriptor.type, { key: descriptor.key, ...descriptor.props, className }, ...descriptor.children.map(toChild));
-}
-export function createSlider(platform) {
-    return forwardRef((rawProps, forwardedRef) => {
-        // Slider owns its host wrapper rather than rendering through a symbiote View, so it folds
-        // aria/role into accessibility* here; the rest (testID, accessibilityLabel, accessibility-
-        // Actions, …) rides to the native node via `passthrough`.
-        const props = resolveAccessibilityProps(rawProps);
-        const { value, minimumValue, maximumValue, step, lowerLimit, upperLimit, disabled, inverted, thumbTintColor, thumbImage, accessibilityState, renderStepNumber, style, className, StepMarker, onValueChange, onSlidingStart, onSlidingComplete, onAccessibilityAction, ...passthrough } = props;
-        const [reportedValue, setReportedValue] = useState(undefined);
-        const [width, setWidth] = useState(0);
-        const handleValueChange = useCallback((event) => {
-            const next = valueFromSliderEvent(event);
-            if (next === undefined)
-                return;
-            setReportedValue(next);
-            onValueChange?.(next);
-        }, [onValueChange]);
-        const handleSlidingStart = useCallback((event) => {
-            const next = valueFromSliderEvent(event);
-            if (next !== undefined)
-                onSlidingStart?.(next);
-        }, [onSlidingStart]);
-        const handleSlidingComplete = useCallback((event) => {
-            const next = valueFromSliderEvent(event);
-            if (next !== undefined)
-                onSlidingComplete?.(next);
-        }, [onSlidingComplete]);
-        const handleAccessibilityAction = useCallback((event) => {
-            onAccessibilityAction?.(event);
-        }, [onAccessibilityAction]);
-        const handleLayout = useCallback((event) => {
-            const layout = event.nativeEvent.layout;
-            if (isRecord(layout) && typeof layout.width === 'number')
-                setWidth(layout.width);
-        }, []);
-        const minimum = minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE;
-        const maximum = maximumValue ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
-        const stepValue = step ?? SLIDER_DEFAULT_STEP;
-        const lower = resolveSliderLowerLimit(lowerLimit);
-        const upper = resolveSliderUpperLimit(upperLimit);
-        useEffect(() => {
-            if (isInvalidLimitConfig(lower, upper))
-                dlog('Slider: lowerLimit must be smaller than upperLimit');
-        }, [lower, upper]);
-        const hasStepMarker = StepMarker !== undefined;
-        const hasThumbImage = thumbImage !== undefined;
-        const showSteps = shouldRenderStepsIndicator(hasStepMarker, renderStepNumber);
-        // Passed to the native view 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).
-        const nativeThumbImage = shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
-            ? thumbImage
-            : undefined;
-        const view = {
-            value: sanitizeSliderValue(value),
-            minimumValue: minimum,
-            maximumValue: maximum,
-            step: stepValue,
-            lowerLimit: lower,
-            upperLimit: upper,
-            disabled: resolveSliderDisabled(disabled, accessibilityState),
-            inverted: inverted ?? false,
-            thumbTintColor: resolveThumbTintColor(thumbTintColor, hasStepMarker, hasThumbImage),
-            thumbImage: nativeThumbImage,
-            accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
-            width,
-            style,
-            passthrough: {
-                ...passthrough,
-                ref: forwardedRef,
-                [SLIDER_ON_CHANGE]: handleValueChange,
-                [SLIDER_ON_VALUE_CHANGE]: handleValueChange,
-                [SLIDER_ON_SLIDING_START]: handleSlidingStart,
-                [SLIDER_ON_SLIDING_COMPLETE]: handleSlidingComplete,
-                [SLIDER_ON_ACCESSIBILITY_ACTION]: handleAccessibilityAction,
-            },
-        };
-        if (!showSteps) {
-            return withClassName(renderSlider(view, platform, { onLayout: handleLayout }), className);
-        }
-        const options = computeStepOptions(minimum, maximum, stepValue, platform.stepResolution);
-        const currentValue = reportedValue ?? view.value ?? minimum;
-        if (StepMarker !== undefined) {
-            const overlay = renderCustomStepsOverlay({
-                options,
-                currentValue,
-                inverted: view.inverted,
-                renderStepNumber: renderStepNumber === true,
-                thumbImage,
-                width,
-                platform,
-                StepMarker,
-            });
-            return createElement('symbiote-view', { style: resolveStepsWrapperStyle(style, platform), onLayout: handleLayout, className }, overlay, descriptorToReact(renderSliderNative(view, platform)));
-        }
-        const steps = renderStepsIndicator({
-            options,
-            currentValue,
-            width,
-            renderStepNumber: renderStepNumber === true,
-            thumbImage,
-            inverted: view.inverted,
-            platform,
-        });
-        return withClassName(renderSlider(view, platform, { steps, onLayout: handleLayout }), className);
-    });
-}
-// The wrapper style for the custom-marker steps path mirrors renderSlider's wrapper.
-function resolveStepsWrapperStyle(style, platform) {
-    return [platform.defaultStyle, style, { justifyContent: 'center' }];
-}
-// The custom-marker overlay: the same flex row as the agnostic default, each mark hosting the
-// user's StepMarker element (plus the thumbImage on the current step and the optional step
-// number), mirroring the library's SliderTrackMark composition.
-function renderCustomStepsOverlay(params) {
-    const fontSize = stepNumberFontSize(params.options.length);
-    const ordered = orderStepOptions(params.options, params.inverted);
-    const min = params.options[0];
-    const max = params.options[params.options.length - 1];
-    const cells = ordered.map((value, index) => {
-        const trackChildren = [
-            createElement(params.StepMarker, {
-                key: 'marker',
-                stepMarked: value === params.currentValue,
-                currentValue: params.currentValue,
-                index,
-                min,
-                max,
-            }),
-        ];
-        if (params.thumbImage !== undefined && value === params.currentValue) {
-            trackChildren.push(createElement('symbiote-view', {
-                key: 'thumb',
-                style: THUMB_IMAGE_CONTAINER_STYLE,
-                testID: 'sliderTrackMark-thumbImage',
-            }, createElement(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })));
-        }
-        const cellChildren = [
-            createElement('symbiote-view', { key: 'track', style: TRACK_MARK_CONTAINER_STYLE }, ...trackChildren),
-        ];
-        if (params.renderStepNumber) {
-            cellChildren.push(createElement('symbiote-view', { key: 'number', style: STEP_NUMBER_CONTAINER_STYLE }, createElement('symbiote-text', { testID: `${index}th-step`, style: { fontSize } }, String(value))));
-        }
-        return createElement('symbiote-view', { key: index, style: STEP_INDICATOR_ELEMENT_STYLE }, ...cellChildren);
-    });
-    return createElement('symbiote-view', {
-        pointerEvents: 'none',
-        testID: 'StepsIndicator-Container',
-        style: resolveStepsContainerStyle(params.width, params.platform),
-    }, ...cells);
-}

package/build/register/index.d.ts

@@ -1 +0,0 @@
-import '@react-native-community/slider/dist/RNCSliderNativeComponent';

package/build/register/index.js

@@ -1,47 +0,0 @@
-// Side-effect: register RNCSlider's ViewConfig in RN's ReactNativeViewConfigRegistry. Evaluating
-// the codegen native-component spec (codegenNativeComponent('RNCSlider', …)) registers the
-// ViewConfig getter the engine reads via setNativeViewConfigSource, so the engine can derive
-// RNCSlider's events and color/image processors on first commit. We pull the codegen SPEC, never
-// the library's default export (Slider.tsx, a React component using hooks) — this module has no
-// 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 { 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);
-}
-function processSliderColor(value) {
-    return processColor(value);
-}
-// Fallback metadata for the native slider. RN's codegen module above normally registers the same
-// ViewConfig into ReactNativeViewConfigRegistry, but relying only on that side effect is brittle on
-// Metro/RN version boundaries: if the registry lookup misses, the slider still mounts, but tint
-// props stay raw and native value events never route back to JS. Keep the explicit fallback here,
-// in the wrapper package that owns RNCSlider, so React/Vue/Angular all inherit the same behavior.
-registerComponent(RNC_SLIDER_VIEW_NAME, {
-    events: [
-        { raw: 'topChange', listener: listenerName(SLIDER_ON_CHANGE) },
-        { raw: 'topRNCSliderValueChange', listener: listenerName(SLIDER_ON_VALUE_CHANGE) },
-        {
-            raw: 'topRNCSliderSlidingStart',
-            listener: listenerName(SLIDER_ON_SLIDING_START),
-            direct: true,
-        },
-        {
-            raw: 'topRNCSliderSlidingComplete',
-            listener: listenerName(SLIDER_ON_SLIDING_COMPLETE),
-            direct: true,
-        },
-        {
-            raw: 'topRNCSliderAccessibilityAction',
-            listener: listenerName(SLIDER_ON_ACCESSIBILITY_ACTION),
-            direct: true,
-        },
-    ],
-    processors: {
-        minimumTrackTintColor: processSliderColor,
-        maximumTrackTintColor: processSliderColor,
-        thumbTintColor: processSliderColor,
-    },
-});

package/build/vue/index.d.ts

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

package/build/vue/index.js

@@ -1,7 +0,0 @@
-// @symbiote-native/slider/vue: the Vue 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 the platform-
-// split Slider. The public prop type is the agnostic core ISliderProps plus a Vue-only `class`
-// field (see slider/shared.ts); the custom StepMarker is a Vue scoped slot, not a prop.
-import '../register';
-export { Slider } from './slider';

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

@@ -1,18 +0,0 @@
-export declare const Slider: import("vue").DefineSetupFnComponent<import("./shared").ISliderProps, {
-    valueChange: (value: number) => boolean;
-    slidingStart: (value: number) => boolean;
-    slidingComplete: (value: number) => boolean;
-    accessibilityAction: (event: import("@symbiote-native/engine").ISymbioteEvent) => boolean;
-    'update:modelValue': (value: number) => boolean;
-    'update:value': (value: number) => boolean;
-}, {}, Omit<import("../../core").ISliderProps, "onValueChange" | "onSlidingStart" | "onSlidingComplete" | "onAccessibilityAction"> & {
-    modelValue?: number;
-    class?: import("@symbiote-native/engine").IClassNameValue;
-} & {
-    onValueChange?: ((value: number) => any) | undefined;
-    onSlidingStart?: ((value: number) => any) | undefined;
-    onSlidingComplete?: ((value: number) => any) | undefined;
-    onAccessibilityAction?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    "onUpdate:value"?: ((value: number) => any) | undefined;
-}, import("vue").PublicProps>;

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

@@ -1,10 +0,0 @@
-// 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/vue/slider/index.d.ts

@@ -1,2 +0,0 @@
-export { Slider } from './index.ios';
-export type { ISliderProps } from './shared';

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

@@ -1,18 +0,0 @@
-export declare const Slider: import("vue").DefineSetupFnComponent<import("./shared").ISliderProps, {
-    valueChange: (value: number) => boolean;
-    slidingStart: (value: number) => boolean;
-    slidingComplete: (value: number) => boolean;
-    accessibilityAction: (event: import("@symbiote-native/engine").ISymbioteEvent) => boolean;
-    'update:modelValue': (value: number) => boolean;
-    'update:value': (value: number) => boolean;
-}, {}, Omit<import("../../core").ISliderProps, "onValueChange" | "onSlidingStart" | "onSlidingComplete" | "onAccessibilityAction"> & {
-    modelValue?: number;
-    class?: import("@symbiote-native/engine").IClassNameValue;
-} & {
-    onValueChange?: ((value: number) => any) | undefined;
-    onSlidingStart?: ((value: number) => any) | undefined;
-    onSlidingComplete?: ((value: number) => any) | undefined;
-    onAccessibilityAction?: ((event: import("@symbiote-native/engine").ISymbioteEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    "onUpdate:value"?: ((value: number) => any) | undefined;
-}, import("vue").PublicProps>;

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

@@ -1,11 +0,0 @@
-// 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/vue/slider/index.js

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

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

@@ -1,26 +0,0 @@
-import { type IClassNameValue, type ISymbioteEvent } from '@symbiote-native/engine';
-import { type ISliderPlatform, type ISliderProps as ISliderBaseProps } from '../../core';
-export type ISliderProps = Omit<ISliderBaseProps, 'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'> & {
-    modelValue?: number;
-    class?: IClassNameValue;
-};
-type ISliderEmits = {
-    valueChange: (value: number) => boolean;
-    slidingStart: (value: number) => boolean;
-    slidingComplete: (value: number) => boolean;
-    accessibilityAction: (event: ISymbioteEvent) => boolean;
-    'update:modelValue': (value: number) => boolean;
-    'update:value': (value: number) => boolean;
-};
-export declare function createSlider(platform: ISliderPlatform): import("vue").DefineSetupFnComponent<ISliderProps, ISliderEmits, {}, Omit<ISliderBaseProps, "onValueChange" | "onSlidingStart" | "onSlidingComplete" | "onAccessibilityAction"> & {
-    modelValue?: number;
-    class?: IClassNameValue;
-} & {
-    onValueChange?: ((value: number) => any) | undefined;
-    onSlidingStart?: ((value: number) => any) | undefined;
-    onSlidingComplete?: ((value: number) => any) | undefined;
-    onAccessibilityAction?: ((event: ISymbioteEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    "onUpdate:value"?: ((value: number) => any) | undefined;
-}, import("vue").PublicProps>;
-export {};

package/build/vue/slider/shared.js

@@ -1,253 +0,0 @@
-// Slider, the Vue lifecycle half. The logic (value/limit/disabled folds, the step-option layout)
-// and the native render live in @symbiote-native/slider core, shared verbatim with the future Angular
-// adapter; here Vue supplies the reactivity — a ref tracks the value native last reported (to mark
-// the active step) and a ref the measured width (for the step indicator) — plus the descriptor
-// bridge. The native RNCSlider view carries no symbiote metadata: the engine derives its events
-// and color processors from the library's ViewConfig at runtime. That ViewConfig is registered by
-// the side-effect import in ../register (pulled in by the package barrel, NOT here, so this module
-// and its tests stay free of the third-party spec).
-import { defineComponent, h, ref } from '@vue/runtime-core';
-import { descriptorToVue, normalizeVueAttrs, resolveModelValue, emitModelUpdate, Image, } from '@symbiote-native/vue';
-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);
-}
-function asNumber(value) {
-    return typeof value === 'number' ? value : undefined;
-}
-function isNumber(value) {
-    return typeof value === 'number';
-}
-function asBoolean(value) {
-    return typeof value === 'boolean' ? value : undefined;
-}
-function isImageSourceProp(value) {
-    return typeof value === 'number' || (typeof value === 'object' && value !== null);
-}
-// accessibilityState arrives untyped; narrow its disabled flag for the fold while preserving the
-// other entries at runtime (the resolve spread carries them onto the native node).
-function asAccessibilityState(value) {
-    if (!isRecord(value))
-        return undefined;
-    return { ...value, disabled: typeof value.disabled === 'boolean' ? value.disabled : undefined };
-}
-// The props/handlers the lifecycle consumes itself; everything else (the track tints + images,
-// thumbSize, tapToSeek, vertical, accessibility*/testID/aria-*) forwards onto the native node.
-// The four callbacks are JS-only and must NEVER reach Fabric, so they are stripped here and
-// re-supplied as the native event handlers in `passthrough`. `class` is handled too: like
-// `style`, it targets the WRAPPER `symbiote-view` (renderSlider's outer element), never the
-// inner native slider leaf `passthrough` reaches — applied explicitly by each render path below.
-const HANDLED_ATTRS = [
-    'value',
-    'modelValue',
-    'minimumValue',
-    'maximumValue',
-    'step',
-    'lowerLimit',
-    'upperLimit',
-    'disabled',
-    'inverted',
-    'thumbTintColor',
-    'thumbImage',
-    'accessibilityState',
-    'renderStepNumber',
-    'style',
-    'class',
-    'onValueChange',
-    'onSlidingStart',
-    'onSlidingComplete',
-    'onAccessibilityAction',
-];
-function forwardAttrs(attrs) {
-    const result = {};
-    for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
-            result[key] = attrs[key];
-    }
-    return result;
-}
-// renderSlider builds the wrapper `symbiote-view` descriptor itself, with no `class` field of
-// its own (packages/slider/src/core stays framework-agnostic). `class` is stamped onto that
-// returned descriptor's props here, right before the Vue bridge, so it lands on the SAME
-// element `style` targets rather than the inner native leaf `passthrough` would otherwise
-// carry it to (the ImageBackground-style wrapper/inner split).
-function applyWrapperClass(descriptor, classValue) {
-    descriptor.props = { ...descriptor.props, class: classValue };
-    return descriptor;
-}
-export function createSlider(platform) {
-    return defineComponent((_props, { attrs: rawAttrs, slots, emit }) => {
-        // The value native last reported, kept only to mark the active step in the indicator. Not
-        // the controlled value — the slider is uncontrolled during a drag (no snap-back).
-        const reportedValue = ref(undefined);
-        // The measured wrapper width the step indicator lays out against; 0 until the first layout.
-        const width = ref(0);
-        const handleValueChange = (event) => {
-            const value = valueFromSliderEvent(event);
-            if (value === undefined)
-                return;
-            reportedValue.value = value;
-            emit('valueChange', value);
-            emitModelUpdate(emit, value);
-        };
-        const handleSlidingStart = (event) => {
-            const value = valueFromSliderEvent(event);
-            if (value !== undefined)
-                emit('slidingStart', value);
-        };
-        const handleSlidingComplete = (event) => {
-            const value = valueFromSliderEvent(event);
-            if (value !== undefined)
-                emit('slidingComplete', value);
-        };
-        const handleAccessibilityAction = (event) => {
-            emit('accessibilityAction', event);
-        };
-        const handleLayout = (event) => {
-            const layout = event.nativeEvent.layout;
-            if (isRecord(layout) && typeof layout.width === 'number')
-                width.value = layout.width;
-        };
-        return () => {
-            const attrs = normalizeVueAttrs(rawAttrs);
-            const minimumValue = asNumber(attrs.minimumValue) ?? SLIDER_DEFAULT_MINIMUM_VALUE;
-            const maximumValue = asNumber(attrs.maximumValue) ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
-            const step = asNumber(attrs.step) ?? SLIDER_DEFAULT_STEP;
-            const lowerLimit = resolveSliderLowerLimit(asNumber(attrs.lowerLimit));
-            const upperLimit = resolveSliderUpperLimit(asNumber(attrs.upperLimit));
-            if (isInvalidLimitConfig(lowerLimit, upperLimit)) {
-                dlog('Slider: lowerLimit must be smaller than upperLimit');
-            }
-            const disabledAttr = asBoolean(attrs.disabled);
-            const accessibilityState = asAccessibilityState(attrs.accessibilityState);
-            const inverted = asBoolean(attrs.inverted) ?? false;
-            const hasStepMarker = slots.stepMarker !== undefined;
-            const renderStepNumber = asBoolean(attrs.renderStepNumber);
-            const hasThumbImage = attrs.thumbImage !== undefined;
-            const showSteps = 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. We pass the source raw — the engine runs the
-            // image processor derived from RNCSlider's ViewConfig (same path as the color tints), so
-            // unlike the plain-RN library wrapper we do NOT pre-call Image.resolveAssetSource here.
-            const nativeThumbImage = shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
-                ? attrs.thumbImage
-                : undefined;
-            const view = {
-                value: sanitizeSliderValue(resolveModelValue(attrs, isNumber)),
-                minimumValue,
-                maximumValue,
-                step,
-                lowerLimit,
-                upperLimit,
-                disabled: resolveSliderDisabled(disabledAttr, accessibilityState),
-                inverted,
-                thumbTintColor: resolveThumbTintColor(attrs.thumbTintColor, hasStepMarker, hasThumbImage),
-                thumbImage: nativeThumbImage,
-                accessibilityState: resolveSliderAccessibilityState(disabledAttr, accessibilityState),
-                width: width.value,
-                style: attrs.style,
-                passthrough: {
-                    ...forwardAttrs(attrs),
-                    [SLIDER_ON_CHANGE]: handleValueChange,
-                    [SLIDER_ON_VALUE_CHANGE]: handleValueChange,
-                    [SLIDER_ON_SLIDING_START]: handleSlidingStart,
-                    [SLIDER_ON_SLIDING_COMPLETE]: handleSlidingComplete,
-                    [SLIDER_ON_ACCESSIBILITY_ACTION]: handleAccessibilityAction,
-                },
-            };
-            // Common case: no step overlay. The full slider (wrapper + native leaf) renders agnostic.
-            if (!showSteps) {
-                return descriptorToVue(applyWrapperClass(renderSlider(view, platform, { onLayout: handleLayout }), attrs.class));
-            }
-            const options = computeStepOptions(minimumValue, maximumValue, step, platform.stepResolution);
-            const currentValue = reportedValue.value ?? view.value ?? minimumValue;
-            // A custom StepMarker is a per-adapter element (a Vue slot), so its overlay is assembled
-            // here at the VNode level; the default overlay (numbers / thumbImage only) is the shared
-            // agnostic render. Either way the wrapper measures width via onLayout.
-            if (hasStepMarker) {
-                const overlay = renderCustomStepsOverlay({
-                    options,
-                    currentValue,
-                    minimumValue,
-                    maximumValue,
-                    inverted,
-                    renderStepNumber: renderStepNumber === true,
-                    thumbImage: attrs.thumbImage,
-                    width: width.value,
-                    platform,
-                    stepMarker: slots.stepMarker,
-                });
-                return h('symbiote-view', {
-                    style: resolveStepsWrapperStyle(view.style, platform),
-                    class: attrs.class,
-                    onLayout: handleLayout,
-                }, [overlay, descriptorToVue(renderSliderNative(view, platform))]);
-            }
-            const steps = renderStepsIndicator({
-                options,
-                currentValue,
-                width: width.value,
-                renderStepNumber: renderStepNumber === true,
-                thumbImage: attrs.thumbImage,
-                inverted,
-                platform,
-            });
-            return descriptorToVue(applyWrapperClass(renderSlider(view, platform, { steps, onLayout: handleLayout }), attrs.class));
-        };
-    }, {
-        name: 'Slider',
-        inheritAttrs: false,
-        emits: {
-            valueChange: (_value) => true,
-            slidingStart: (_value) => true,
-            slidingComplete: (_value) => true,
-            accessibilityAction: (_event) => true,
-            'update:modelValue': (_value) => true,
-            'update:value': (_value) => true,
-        },
-    });
-}
-// The wrapper style for the steps path mirrors renderSlider's wrapper (kept here because the
-// custom-marker path builds the wrapper itself rather than going through renderSlider).
-function resolveStepsWrapperStyle(style, platform) {
-    return [platform.defaultStyle, style, { justifyContent: 'center' }];
-}
-// The custom-marker overlay: the same flex row as the agnostic default, but each mark hosts the
-// user's `#stepMarker` scoped slot (plus the thumbImage on the current step and the optional step
-// number), exactly as the library's SliderTrackMark composes a StepMarker + Image.
-function renderCustomStepsOverlay(params) {
-    const fontSize = stepNumberFontSize(params.options.length);
-    const ordered = orderStepOptions(params.options, params.inverted);
-    const min = params.options[0];
-    const max = params.options[params.options.length - 1];
-    const cells = ordered.map((value, index) => {
-        const trackChildren = [];
-        const marker = params.stepMarker?.({
-            stepMarked: value === params.currentValue,
-            currentValue: params.currentValue,
-            index,
-            min,
-            max,
-        });
-        if (marker !== undefined)
-            trackChildren.push(h('symbiote-view', {}, marker));
-        if (isImageSourceProp(params.thumbImage) && value === params.currentValue) {
-            trackChildren.push(h('symbiote-view', { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' }, [h(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })]));
-        }
-        const cellChildren = [
-            h('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),
-        ];
-        if (params.renderStepNumber) {
-            cellChildren.push(h('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
-                h('symbiote-text', { testID: `${index}th-step`, style: { fontSize } }, String(value)),
-            ]));
-        }
-        return h('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
-    });
-    return h('symbiote-view', {
-        pointerEvents: 'none',
-        testID: 'StepsIndicator-Container',
-        style: resolveStepsContainerStyle(params.width, params.platform),
-    }, cells);
-}