@symbiote-native/slider 5.0.1 → 5.0.2

package/build/react/slider/shared.js

@@ -0,0 +1,176 @@
+// 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

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

package/build/register/index.js

@@ -0,0 +1,47 @@
+// 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

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

package/build/vue/index.js

@@ -0,0 +1,7 @@
+// @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

@@ -0,0 +1,18 @@
+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

@@ -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/vue/slider/index.d.ts

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

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

@@ -0,0 +1,18 @@
+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

@@ -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/vue/slider/index.js

@@ -0,0 +1,3 @@
+// 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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,253 @@
+// 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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/slider",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Third-party native Slider view wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, and Angular adapters.",
   "license": "MIT",
   "repository": {
@@ -71,9 +71,9 @@
     "react": ">=19.0.0",
     "react-native": ">=0.86",
     "vue": ">=3.5.0",
+    "@symbiote-native/angular": "0.6.1",
     "@symbiote-native/react": "0.2.8",
-    "@symbiote-native/vue": "0.3.8",
-    "@symbiote-native/angular": "0.6.1"
+    "@symbiote-native/vue": "0.3.8"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -109,13 +109,13 @@
     "typescript": "~6.0.0",
     "@symbiote-native/angular": "0.6.1",
     "@symbiote-native/engine": "0.1.7",
-    "@symbiote-native/react": "0.2.8",
     "@symbiote-native/test-utils": "0.1.6",
+    "@symbiote-native/react": "0.2.8",
     "@symbiote-native/vue": "0.3.8"
   },
   "scripts": {
     "typecheck": "tsc --build",
-    "clean": "rm -rf build",
+    "clean": "rm -rf build-ngc",
     "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   }