3a:"DraftPreviewFrame" 3b:I[67308,["$4","$7","$1d","$2f","$30"],"$3a"] 3c:T6b1,'use client'; import { useState } from 'react'; import { DetentSliderLabel, DetentSliderRoot, DetentSliderThumb, DetentSliderTrack } from './detent-slider'; const DetentSlider = Object.assign(DetentSliderRoot, { Label: DetentSliderLabel, Root: DetentSliderRoot, Thumb: DetentSliderThumb, Track: DetentSliderTrack }); const DEVICE_ARIA = { '0': 'Device folded, compact cover display', '1': 'Device unfolded, continuous inner display', default: 'Device partially unfolded' } as const; const fmt = (n: number) => n.toFixed(3); export const DetentSliderPreview = () => { const [sim, setSim] = useState({ position: 0, stretchMax: 0.8, stretchPosition: 0 }); return (

position {fmt(sim.position)}

stretchPosition {fmt(sim.stretchPosition)}

Drag to open and close

); }; 3d:T2382,'use client'; import type { AriaValueText } from './use-detent-slider'; import type { ComponentProps, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from 'react'; import type { LabelProps as LabelPrimitiveProps, SliderProps as SliderPrimitiveProps, SliderThumbProps as SliderThumbPrimitiveProps, SliderTrackProps as SliderTrackPrimitiveProps } from 'react-aria-components'; import { createContext, useContext, useEffect, useLayoutEffect, useMemo } from 'react'; import { Label as LabelPrimitive, Slider as SliderPrimitive, SliderThumb as SliderThumbPrimitive, SliderTrack as SliderTrackPrimitive } from 'react-aria-components'; import { composeClassNames } from '@utils'; import { detentSlider } from './detent-slider.styles'; import { useDetentSlider } from './use-detent-slider'; export type { SimulationUpdate } from './magnet-simulator'; export type { AriaValueText } from './use-detent-slider'; type DetentSliderSlots = ReturnType; type DetentSliderContextValue = { getLastTransform: () => string; getLastVisualStyle: () => { transform: string; ['--thumb-width']: string; ['--left']: string; ['--right']: string; ['--icon']: string; }; inputRef: RefObject; isDisabled: boolean; onInputKeyDown: (e: KeyboardEvent) => void; onInputKeyUp: (e: KeyboardEvent) => void; onThumbPointerDown: (e: ReactPointerEvent) => void; onTrackClick: (e: ReactMouseEvent) => void; onTrackPointerDown: (e: ReactPointerEvent) => void; reapplyTransform: () => void; slots: DetentSliderSlots; thumbRef: RefObject; trackRef: RefObject; }; const DetentSliderContext = createContext(null); const useDetentSliderContext = () => { const context = useContext(DetentSliderContext); if (!context) { throw new Error('DetentSlider compound parts must be used within DetentSlider.Root'); } return context; }; /* ------------------------------------------------------------------------------------------------- * DetentSlider Root * -----------------------------------------------------------------------------------------------*/ export interface DetentSliderRootProps extends Omit { value?: number; defaultValue?: number; onChange?: (value: number) => void; onChangeEnd?: (value: number) => void; /** * Escape hatch: raw magnet-sim frame (for external previews). * Called from the sim draw path without forcing Root re-renders. * Labs readout may setState here — production users should avoid/throttle per-frame setState. */ onSimulationUpdate?: (update: { position: number; stretchPosition: number; stretchMax: number }) => void; isDisabled?: boolean; /** Used when children are omitted (one-liner). Ignored when composing Label explicitly. */ label?: string; /** * Thresholded aria-valuetext labels (near closed / near open / mid). * Thresholds follow magnet radii from DEFAULT_MAGNETS. */ ariaValueText?: AriaValueText; /** Full override; wins over `ariaValueText` when provided. */ getAriaValueText?: (position: number) => string; children?: ReactNode; } export const DetentSliderRoot = (props: DetentSliderRootProps) => { const { ariaValueText, children, className, defaultValue = 0, getAriaValueText, isDisabled = false, label = 'Drag below to open and close', onChange, onChangeEnd, onSimulationUpdate, value: valueProp, ...rest } = props; const slots = useMemo(() => detentSlider(), []); const { ariaValue, getLastTransform, getLastVisualStyle, inputRef, onInputKeyDown, onInputKeyUp, onThumbPointerDown, onTrackClick, onTrackPointerDown, reapplyTransform, thumbRef, trackRef } = useDetentSlider({ ariaValueText, defaultValue, getAriaValueText, isDisabled, onChange, onChangeEnd, onSimulationUpdate, value: valueProp }); const ctx = useMemo( () => ({ getLastTransform, getLastVisualStyle, inputRef, isDisabled, onInputKeyDown, onInputKeyUp, onThumbPointerDown, onTrackClick, onTrackPointerDown, reapplyTransform, slots, thumbRef, trackRef }), [getLastTransform, getLastVisualStyle, inputRef, isDisabled, onInputKeyDown, onInputKeyUp, onThumbPointerDown, onTrackClick, onTrackPointerDown, reapplyTransform, slots, thumbRef, trackRef] ); const resolvedChildren = children ?? ( <> {label} ); return ( {}} onChangeEnd={() => {}} {...rest} > {resolvedChildren} ); }; /* ------------------------------------------------------------------------------------------------- * DetentSlider Label * -----------------------------------------------------------------------------------------------*/ export interface DetentSliderLabelProps extends LabelPrimitiveProps {} export const DetentSliderLabel = (props: DetentSliderLabelProps) => { const { className, ...rest } = props; const { slots } = useDetentSliderContext(); // Label className is a plain string (not RAC ClassNameOrFunction) return ; }; /* ------------------------------------------------------------------------------------------------- * DetentSlider Track * -----------------------------------------------------------------------------------------------*/ export interface DetentSliderTrackProps extends SliderTrackPrimitiveProps {} export const DetentSliderTrack = (props: DetentSliderTrackProps) => { const { className, onClick, onPointerDown, ...rest } = props; const { onTrackClick, onTrackPointerDown, slots, trackRef } = useDetentSliderContext(); return ( { onTrackClick(e); if (typeof onClick === 'function') onClick(e); }} onPointerDown={(e) => { onTrackPointerDown(e); if (typeof onPointerDown === 'function') onPointerDown(e); }} {...rest} /> ); }; /* ------------------------------------------------------------------------------------------------- * DetentSlider Thumb * -----------------------------------------------------------------------------------------------*/ export interface DetentSliderThumbProps extends Omit { style?: SliderThumbPrimitiveProps['style']; } export const DetentSliderThumb = (props: DetentSliderThumbProps) => { const { className, onPointerDown, style, ...rest } = props; const { getLastVisualStyle, inputRef, onInputKeyDown, onInputKeyUp, onThumbPointerDown, reapplyTransform, slots, thumbRef } = useDetentSliderContext(); // Restore sim transform if anything wiped it — layout effect may read refs useLayoutEffect(() => { reapplyTransform(); }); // Bind on the hidden range input (RAC routes arrows there, not the thumb div). // Handlers are stable ([]); effect does not thrash. useEffect(() => { const input = inputRef.current; if (!input) return; input.addEventListener('keydown', onInputKeyDown); input.addEventListener('keyup', onInputKeyUp); return () => { input.removeEventListener('keydown', onInputKeyDown); input.removeEventListener('keyup', onInputKeyUp); }; }, [inputRef, onInputKeyDown, onInputKeyUp]); return ( { const userStyle = typeof style === 'function' ? style(renderProps) : style; const visual = getLastVisualStyle(); return { ...userStyle, ...visual, insetInlineStart: 'auto', left: -0.5 }; }} onPointerDown={(e) => { onThumbPointerDown(e); if (typeof onPointerDown === 'function') onPointerDown(e); }} {...rest} >

); }; export type DetentSliderRootComponentProps = ComponentProps; 3e:T35ce,'use client'; import type { MagnetSimulator, SimulationUpdate } from './magnet-simulator'; import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, RefObject } from 'react'; import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { createMagnetSimulator, decay } from './magnet-simulator'; const THUMB_W = 60; const DEFAULT_MAGNETS = [ { origin: 0, radius: 0.08, strength: 0.8 }, { origin: 1, radius: 0.08, strength: 0.8 } ]; export type AriaValueText = { 0: string; 1: string; default: string; }; const DEFAULT_ARIA_VALUE_TEXT: AriaValueText = { 0: 'Closed', 1: 'Open', default: 'Partially folded' }; const clamp01 = (n: number) => Math.min(1, Math.max(0, n)); const resolveAriaValueText = (position: number, labels: AriaValueText, closedRadius: number, openRadius: number) => { if (position <= closedRadius) return labels[0]; if (position >= 1 - openRadius) return labels[1]; return labels.default; }; type ThumbVisualStyle = { transform: string; ['--thumb-width']: string; ['--left']: string; ['--right']: string; ['--icon']: string; }; type DetentSliderController = { ariaTimeout: number; ariaValueText: AriaValueText; bounds: DOMRect | null; gestureRatio: number; getAriaValueText?: (position: number) => string; isDisabled: boolean; lastReported: number; lastTransform: string; /** React-owned thumb style mirror so RAC re-renders cannot wipe sim paint. */ lastVisualStyle: ThumbVisualStyle; needsBounds: boolean; onChange?: (value: number) => void; onChangeEnd?: (value: number) => void; onSimulationUpdate?: (update: { position: number; stretchMax: number; stretchPosition: number }) => void; /** Sparse React aria mirror — setState, not a render-driving visual. */ setAriaValue: (value: number) => void; sim: MagnetSimulator | null; thumbPosPx: number; travelW: number; }; type DomRefs = { inputRef: RefObject; thumbRef: RefObject; trackRef: RefObject; }; const resolveAria = (c: DetentSliderController, position: number) => { const getter = c.getAriaValueText; if (getter) return getter(position); return resolveAriaValueText(position, c.ariaValueText, DEFAULT_MAGNETS[0]!.radius, DEFAULT_MAGNETS[1]!.radius); }; const measure = (c: DetentSliderController, track: HTMLDivElement | null) => { if (!track) return; const bounds = track.getBoundingClientRect(); c.bounds = bounds; c.travelW = Math.max(1, bounds.width - THUMB_W); c.needsBounds = false; }; const ensureBounds = (c: DetentSliderController, track: HTMLDivElement | null) => { if (c.needsBounds || !c.bounds) measure(c, track); }; const mapClientX = (c: DetentSliderController, track: HTMLDivElement | null, clientX: number) => { ensureBounds(c, track); const bounds = c.bounds; const W = c.travelW; if (!bounds || W <= 0) return c.gestureRatio; const left = bounds.left + 0.5 * THUMB_W; const right = bounds.right - 0.5 * THUMB_W; let thumbPx = c.thumbPosPx; if (clientX >= left && clientX <= right) { thumbPx = clientX - left; } if (thumbPx > W || clientX > right) thumbPx = W; else if (thumbPx < 0 || clientX < left) thumbPx = 0; c.thumbPosPx = thumbPx; const ratio = thumbPx / W; c.gestureRatio = ratio; return ratio; }; const applyVisual = (c: DetentSliderController, thumb: HTMLDivElement | null, input: HTMLInputElement | null, e: SimulationUpdate) => { const W = c.travelW; if (!thumb || W <= 0) return; const stretchPx = decay(Math.abs(e.stretchPosition - e.position) * W, e.stretchMax * W, 2); const dir = Math.sign(e.stretchPosition - e.position); // LTR rtlDirection = 1 const pos = e.position; const transform = `translateX(${pos * W}px) scaleY(${1 - 0.0025 * stretchPx})`; // Match Apple: only flip anchor when dir is ±1; keep previous when dir === 0 let left = c.lastVisualStyle['--left']; let right = c.lastVisualStyle['--right']; if (dir === 1) { left = 'var(--offset)'; right = 'auto'; } else if (dir === -1) { left = 'auto'; right = 'var(--offset)'; } const icon = `${dir * stretchPx}`; const thumbWidth = `${stretchPx}`; c.lastTransform = transform; c.lastVisualStyle = { '--icon': icon, '--left': left, '--right': right, '--thumb-width': thumbWidth, transform }; // Imperative paint for the animation loop (no React re-render required) thumb.style.transform = transform; thumb.style.setProperty('--thumb-width', thumbWidth); thumb.style.setProperty('--left', left); thumb.style.setProperty('--right', right); thumb.style.setProperty('--icon', icon); if (input) { input.value = `${e.position}`; input.setAttribute('aria-valuenow', `${e.position}`); input.setAttribute('step', '0.5'); window.clearTimeout(c.ariaTimeout); c.ariaTimeout = window.setTimeout(() => { input.setAttribute('aria-valuetext', e.aria ?? resolveAria(c, e.position)); }, 1000 / 30); } const reported = clamp01(e.position); if (Math.abs(reported - c.lastReported) > 1e-4) { c.lastReported = reported; c.onChange?.(reported); } }; export type UseDetentSliderOptions = { value?: number; defaultValue?: number; isDisabled?: boolean; onChange?: (value: number) => void; onChangeEnd?: (value: number) => void; onSimulationUpdate?: (update: { position: number; stretchMax: number; stretchPosition: number }) => void; ariaValueText?: AriaValueText; getAriaValueText?: (position: number) => string; }; export const useDetentSlider = (options: UseDetentSliderOptions) => { const { ariaValueText, defaultValue = 0, getAriaValueText, isDisabled = false, onChange, onChangeEnd, onSimulationUpdate, value: valueProp } = options; const trackRef = useRef(null); const thumbRef = useRef(null); const inputRef = useRef(null); const domRefs = useRef({ inputRef, thumbRef, trackRef }); const initial = clamp01(valueProp ?? defaultValue); // Sparse RAC value — aria mirror of seated position; never drives visual left% const [ariaValue, setAriaValue] = useState(() => initial); const controllerRef = useRef({ ariaTimeout: 0, ariaValueText: ariaValueText ?? DEFAULT_ARIA_VALUE_TEXT, bounds: null, gestureRatio: initial, getAriaValueText, isDisabled, lastReported: initial, lastTransform: 'translateX(0px)', lastVisualStyle: { '--icon': '0', '--left': 'var(--offset)', '--right': 'auto', '--thumb-width': '0', transform: 'translateX(0px)' }, needsBounds: true, onChange, onChangeEnd, onSimulationUpdate, setAriaValue, sim: null, thumbPosPx: 0, travelW: 0 }); // Keep latest props on the controller without render-time ref writes. // setAriaValue is stable (React setState) — stored once on controller init. useLayoutEffect(() => { const c = controllerRef.current; c.ariaValueText = ariaValueText ?? DEFAULT_ARIA_VALUE_TEXT; c.getAriaValueText = getAriaValueText; c.isDisabled = isDisabled; c.onChange = onChange; c.onChangeEnd = onChangeEnd; c.onSimulationUpdate = onSimulationUpdate; }); // Mount-once in useLayoutEffect so measure + first applyVisual run before paint // (avoids thumb flash from RAC translate(-50%,-50%) / unmeasured travelW). useLayoutEffect(() => { const c = controllerRef.current; const { inputRef: inputR, thumbRef: thumbR, trackRef: trackR } = domRefs.current; const start = clamp01(c.gestureRatio); const sim = createMagnetSimulator({ magnets: DEFAULT_MAGNETS.map((m) => ({ ...m })), spring: { bounce: 0.4, duration: 0.4 }, value: start }); c.sim = sim; const emitUpdate = (payload: SimulationUpdate) => { const ctrl = controllerRef.current; applyVisual(ctrl, thumbR.current, inputR.current, { ...payload, aria: resolveAria(ctrl, payload.position) }); ctrl.onSimulationUpdate?.({ position: payload.position, stretchMax: payload.stretchMax, stretchPosition: payload.stretchPosition }); }; sim.on('simulationUpdate', (payload) => { emitUpdate(payload); }); measure(c, trackR.current); c.thumbPosPx = start * c.travelW; c.gestureRatio = start; emitUpdate({ aria: resolveAria(c, start), position: start, stretchMax: 0.8, stretchPosition: start }); sim.reset(start); const onResize = () => { const ctrl = controllerRef.current; ctrl.needsBounds = true; measure(ctrl, trackR.current); const thumb = thumbR.current; if (thumb && ctrl.sim) { const pos = ctrl.sim.currentState.position; const transform = `translateX(${pos * ctrl.travelW}px)`; ctrl.lastTransform = transform; ctrl.lastVisualStyle = { ...ctrl.lastVisualStyle, transform }; thumb.style.transform = transform; } }; window.addEventListener('resize', onResize); return () => { window.removeEventListener('resize', onResize); window.clearTimeout(c.ariaTimeout); sim.destroy(); c.sim = null; }; }, []); // Controlled value sync — honest [value] dep; reads/writes via controller useEffect(() => { if (valueProp === undefined) return; const c = controllerRef.current; if (!c.sim) return; const next = clamp01(valueProp); if (Math.abs(next - c.lastReported) <= 1e-4) return; c.lastReported = next; c.gestureRatio = next; c.thumbPosPx = next * c.travelW; c.setAriaValue(next); c.sim.reset(next); }, [valueProp]); const onInputKeyDown = useCallback((e: KeyboardEvent) => { const c = controllerRef.current; const input = domRefs.current.inputRef.current; if (c.isDisabled) return; if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return; e.preventDefault(); e.stopPropagation(); const delta = e.code === 'ArrowLeft' ? -0.5 : 0.5; const current = input ? parseFloat(input.value) : c.gestureRatio; const next = clamp01((Number.isFinite(current) ? current : 0) + delta); c.gestureRatio = next; c.thumbPosPx = next * c.travelW; if (input) { input.value = `${next}`; input.setAttribute('step', '0.5'); } c.sim?.simulate(next, true); }, []); const onInputKeyUp = useCallback((e: KeyboardEvent) => { const c = controllerRef.current; const input = domRefs.current.inputRef.current; if (c.isDisabled) return; if (e.code !== 'ArrowLeft' && e.code !== 'ArrowRight') return; e.preventDefault(); e.stopPropagation(); c.sim?.simulate(clamp01(c.gestureRatio), false); c.onChangeEnd?.(clamp01(c.gestureRatio)); c.setAriaValue(c.gestureRatio); if (input) input.setAttribute('step', 'any'); }, []); const onThumbPointerDown = useCallback((e: ReactPointerEvent) => { const c = controllerRef.current; const { inputRef: inputR, trackRef: trackR } = domRefs.current; if (c.isDisabled) return; // Block RAC thumb move; simulator owns truth e.preventDefault(); e.stopPropagation(); ensureBounds(c, trackR.current); const W = c.travelW; const value = W > 0 ? c.thumbPosPx / W : c.gestureRatio; c.gestureRatio = value; c.sim?.simulate(clamp01(value), true); const onMove = (ev: PointerEvent) => { const ctrl = controllerRef.current; const ratio = mapClientX(ctrl, trackR.current, ev.clientX); ctrl.sim?.simulate(clamp01(ratio), true); }; const onUp = () => { const ctrl = controllerRef.current; ctrl.sim?.simulate(clamp01(ctrl.gestureRatio), false); ctrl.onChangeEnd?.(clamp01(ctrl.gestureRatio)); ctrl.setAriaValue(ctrl.gestureRatio); const input = inputR.current; if (input) input.setAttribute('step', 'any'); window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); }, []); const onTrackPointerDown = useCallback((e: ReactPointerEvent) => { if (controllerRef.current.isDisabled) return; // Prevent RAC track scrubbing from fighting the magnet sim e.preventDefault(); }, []); const onTrackClick = useCallback((e: ReactMouseEvent) => { const c = controllerRef.current; const { inputRef: inputR, trackRef: trackR } = domRefs.current; if (c.isDisabled) return; // Apple: only when target is the track itself (not the thumb) if (e.target !== trackR.current) return; ensureBounds(c, trackR.current); const ratio = mapClientX(c, trackR.current, e.clientX); c.sim?.simulate(clamp01(ratio), false); c.onChangeEnd?.(clamp01(ratio)); c.setAriaValue(ratio); const input = inputR.current; if (input) { input.setAttribute('step', '0.5'); window.setTimeout(() => input.setAttribute('step', 'any'), 400); } }, []); const reapplyTransform = useCallback(() => { const el = domRefs.current.thumbRef.current; if (el) el.style.transform = controllerRef.current.lastTransform; }, []); const getLastTransform = useCallback(() => controllerRef.current.lastTransform, []); const getLastVisualStyle = useCallback(() => controllerRef.current.lastVisualStyle, []); return { ariaValue, getLastTransform, getLastVisualStyle, inputRef, isDisabled, onInputKeyDown, onInputKeyUp, onThumbPointerDown, onTrackClick, onTrackPointerDown, reapplyTransform, thumbRef, trackRef }; }; 3f:Tcca,import type { VariantProps } from 'tailwind-variants'; import { tv } from 'tailwind-variants'; /** Duo-style detent slider — Tailwind neutral palette, site accent (B/W invert). */ export const detentSlider = tv({ slots: { label: ['m-0 text-[12px] leading-[1.33337] font-normal tracking-[-0.01em] text-neutral-600', 'dark:text-neutral-400'], root: 'group/detent-slider flex w-full max-w-md flex-col outline-none', thumb: ['inset-inline-start-auto! pointer-events-auto absolute -top-3 left-[-0.5px]! box-border h-10 w-15 origin-center cursor-pointer touch-none appearance-none rounded-[22px] border-2 border-neutral-50 bg-transparent shadow-none will-change-transform outline-none [--icon:0] [--left:var(--offset)] [--offset:-2px] [--right:auto] [--thumb-width:0]', 'data-disabled:pointer-events-none data-disabled:opacity-40 data-focus-visible:**:data-[slot=thumb-visual]:outline-2 data-focus-visible:**:data-[slot=thumb-visual]:outline-offset-4 data-focus-visible:**:data-[slot=thumb-visual]:outline-neutral-900', 'dark:border-neutral-950 dark:data-focus-visible:**:data-[slot=thumb-visual]:outline-neutral-100'], thumbVisual: ["pointer-events-none absolute -top-0.5 right-(--right) left-(--left) box-border h-10 w-[calc(60px+1px*var(--thumb-width))] rounded-[22px] border-[0.5px] border-black/10 bg-neutral-900 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4zNiAxMi4yOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTExLjc3IDEyLjAybDUuMjYtNS4xNGMuMjMtLjIzLjMzLS40Ni4zMy0uNzRzLS4xMS0uNTMtLjMzLS43NEwxMS43Ny4yN2EuODUuODUgMCAwMC0uNjQtLjI3LjkxOC45MTggMCAwMC0uNjMgMS41OWw0LjY4IDQuNTUtNC42OCA0LjU2YS45MTguOTE4IDAgMDAuNjMgMS41OWMuMjUgMCAuNDYtLjEuNjQtLjI3bS02LjE4IDBjLjE4LjE4LjM5LjI3LjY0LjI3LjUxIDAgLjkzLS40MS45My0uOTIgMC0uMjUtLjExLS40OS0uMjktLjY3TDIuMTkgNi4xNGw0LjY4LTQuNTVjLjE4LS4xOC4yOS0uNDIuMjktLjY3IDAtLjUxLS40Mi0uOTItLjkzLS45MmEuODcuODcgMCAwMC0uNjQuMjdMLjMzIDUuNDFjLS4yMy4yMS0uMzMuNDYtLjMzLjc0cy4xLjUxLjMzLjc0bDUuMjYgNS4xNHoiLz48L3N2Zz4=')] bg-size-[17px] bg-position-[calc(50%+0.5px*var(--icon))_50%] bg-no-repeat shadow-[0_2px_7px_rgba(0,0,0,0.28)]", "dark:border-black/40 dark:bg-neutral-100 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNy4zNiAxMi4yOSI+PHBhdGggZmlsbD0iIzE3MTcxNyIgZD0iTTExLjc3IDEyLjAybDUuMjYtNS4xNGMuMjMtLjIzLjMzLS40Ni4zMy0uNzRzLS4xMS0uNTMtLjMzLS43NEwxMS43Ny4yN2EuODUuODUgMCAwMC0uNjQtLjI3LjkxOC45MTggMCAwMC0uNjMgMS41OWw0LjY4IDQuNTUtNC42OCA0LjU2YS45MTguOTE4IDAgMDAuNjMgMS41OWMuMjUgMCAuNDYtLjEuNjQtLjI3bS02LjE4IDBjLjE4LjE4LjM5LjI3LjY0LjI3LjUxIDAgLjkzLS40MS45My0uOTIgMC0uMjUtLjExLS40OS0uMjktLjY3TDIuMTkgNi4xNGw0LjY4LTQuNTVjLjE4LS4xOC4yOS0uNDIuMjktLjY3IDAtLjUxLS40Mi0uOTItLjkzLS45MmEuODcuODcgMCAwMC0uNjQuMjdMLjMzIDUuNDFjLS4yMy4yMS0uMzMuNDYtLjMzLjc0cy4xLjUxLjMzLjc0bDUuMjYgNS4xNHoiLz48L3N2Zz4=')] dark:shadow-[0_2px_7px_rgba(0,0,0,0.55)]"], track: ['relative mt-4.5 box-border h-4.25 w-full appearance-none rounded-[28px] border-[0.5px] border-black/10 bg-neutral-300 p-0 will-change-transform select-none [--thumb-direction:1] [--thumb-position:0] [--thumb-width:0]', 'data-disabled:opacity-40', 'dark:border-white/10 dark:bg-neutral-700'] } }); export type DetentSliderVariants = VariantProps; 40:T34c8,export type Magnet = { origin: number; strength: number; radius: number; }; export type SpringParams = { duration: number; bounce: number; }; export type SimulationUpdate = { position: number; stretchPosition: number; stretchMax: number; aria?: string; }; export type MagnetSimulatorOptions = { value: number; magnets: Magnet[]; spring: SpringParams; bounds?: number[]; }; type SimState = { position: number; target: number; velocity: number; stretchPosition: number; stretchTarget: number; stretchVelocity: number; }; type PosVel = { position: number; velocity: number; }; type Listener = (payload: SimulationUpdate) => void; const GLOBAL_THRESHOLD = 1e-5; /** Engaged runaway only — inland finger past radius×this; outward rubber untouched. */ const INLAND_LEAVE_SLACK = 1.5; const FRAME_DT = 1 / 60; const copyState = (from: SimState, to: SimState) => { to.position = from.position; to.target = from.target; to.velocity = from.velocity; to.stretchPosition = from.stretchPosition; to.stretchTarget = from.stretchTarget; to.stretchVelocity = from.stretchVelocity; }; const makeState = (value: number): SimState => ({ position: value, stretchPosition: value, stretchTarget: value, stretchVelocity: 0, target: value, velocity: 0 }); /** Semi-implicit Euler spring step; writes into `out` (no allocation). */ const integrateSpring = (mass: number, stiffness: number, damping: number, pos: number, vel: number, target: number, dt: number, out: PosVel) => { const newVelocity = vel + ((-stiffness * (pos - target) + -damping * vel) / mass) * dt; out.velocity = newVelocity; out.position = pos + newVelocity * dt; }; /** Inverse-square magnet step within radius; writes into `out` (no allocation). */ const integrateMagnet = (strength: number, radius: number, pos: number, vel: number, origin: number, dt: number, out: PosVel) => { const a = Math.abs(pos - origin); const o = Math.sign(pos - origin); const l = Math.sqrt((radius * radius) / 10); const force = strength * ((l * -l) / (a * a)) * o; const newVelocity = vel + (a <= radius ? force : 0) * dt; out.velocity = newVelocity; out.position = pos + newVelocity * dt; }; export const decay = (delta: number, max: number, i: number) => Math.tanh(delta / (max * i)) * max; export class MagnetSimulator { readonly magnets: Magnet[]; currentState: SimState; private previousState: SimState; private renderState: SimState; private _magnetEngaged: Magnet | null = null; private _magnetEngaging: Magnet | null = null; private magnetDisengaging: Magnet | null = null; private pointerDown: boolean | null = null; private attractionDirection = 0; private maxMagnetStrength = 0; private frameTimeAccumulator = 0; private fpsThen = performance.now(); private readonly spring = { damping: 0, mass: 1, stiffness: 0 }; private readonly listeners: Listener[] = []; /** Reused by integrateSpring / integrateMagnet — never read across steps. */ private readonly pv: PosVel = { position: 0, velocity: 0 }; private rafRunning = false; private rafId = 0; constructor(options: MagnetSimulatorOptions) { this.magnets = options.magnets.map((m) => ({ ...m })); for (const m of this.magnets) { if (m.strength > this.maxMagnetStrength) this.maxMagnetStrength = m.strength; } const initial = options.value; this.currentState = makeState(initial); this.previousState = makeState(initial); this.renderState = makeState(initial); this.setSpringParams(options.spring.duration, options.spring.bounce); } get magnetEngaged() { return this._magnetEngaged; } get magnetEngaging() { return this._magnetEngaging; } on = (name: 'simulationUpdate', fn: Listener) => { if (name === 'simulationUpdate') this.listeners.push(fn); }; setSpringParams = (duration: number, bounce: number) => { this.spring.mass = 1; this.spring.stiffness = ((2 * Math.PI) / duration) ** 2; this.spring.damping = ((1 - bounce) * (4 * Math.PI)) / duration; }; simulate = (progress: number, isPointerDown: boolean) => { // Original: `(engaging && engaged) || (target = progress)` — mutually exclusive so target always updates if (!(this._magnetEngaging !== null && this._magnetEngaged !== null)) { this.currentState.target = progress; } this.currentState.stretchTarget = progress; this.pointerDown = isPointerDown; if (this._magnetEngaging) this.holdMagnetTargets(this._magnetEngaging); if (this._magnetEngaged) this.holdMagnetTargets(this._magnetEngaged); this.requestFrame(); }; reset = (value: number) => { const s = this.currentState; s.position = s.target = value; s.stretchPosition = s.stretchTarget = value; s.velocity = s.stretchVelocity = 0; copyState(s, this.previousState); copyState(s, this.renderState); this._magnetEngaging = this._magnetEngaged = this.magnetDisengaging = null; this.pointerDown = false; this.requestFrame(); }; destroy = () => { cancelAnimationFrame(this.rafId); this.rafRunning = false; }; private requestFrame = () => { if (this.rafRunning) return; this.rafRunning = true; this.rafId = requestAnimationFrame(this.tick); }; private tick = () => { this.rafRunning = false; this.onUpdate(); this.onDraw(); }; private emit = (payload: SimulationUpdate) => { for (const fn of this.listeners) fn(payload); }; private snap = (kind: 'position' | 'stretch', value: number) => { if (kind === 'position') { this.currentState.position = this.previousState.position = this.renderState.position = value; this.currentState.velocity = this.previousState.velocity = this.renderState.velocity = 0; } else { this.currentState.stretchPosition = this.previousState.stretchPosition = this.renderState.stretchPosition = value; this.currentState.stretchVelocity = this.previousState.stretchVelocity = this.renderState.stretchVelocity = 0; } }; private holdMagnetTargets = (magnet: Magnet) => { if (!this.pointerDown) { this.currentState.target = this.currentState.stretchTarget = magnet.origin; } }; private inRadius = (magnet: Magnet, kind: 'position' | 'stretch') => { if (kind === 'position') { return Math.abs(this.renderState.position - magnet.origin) <= magnet.radius; } return Math.abs(this.renderState.stretchPosition - magnet.origin) <= magnet.radius; }; /** Finger distance inland from the magnet (toward track center). Outward overshoot is negative. */ private inlandFinger = (magnet: Magnet) => { const inland = magnet.origin <= 0.5 ? 1 : -1; return (this.currentState.stretchTarget - magnet.origin) * inland; }; /** Stretch leave on currentState — same radius as Apple, without render lag. */ private stretchLeftMagnet = (magnet: Magnet) => Math.abs(this.currentState.stretchPosition - magnet.origin) > magnet.radius; /** Fast inland reverse while seat is held — only past radius×slack so normal rubber stays. */ private inlandFingerRunaway = (magnet: Magnet) => this.pointerDown === true && this.inlandFinger(magnet) > magnet.radius * INLAND_LEAVE_SLACK; private targetInRadius = (magnet: Magnet, kind: 'position' | 'stretch') => (kind === 'position' || kind === 'stretch') && Math.abs(this.currentState.target - magnet.origin) <= magnet.radius; private isAttached = (magnet: Magnet) => Math.sign(this.currentState.position - magnet.origin) !== this.attractionDirection || this.currentState.position === magnet.origin; private isNear = (threshold: number, kind: 'position' | 'stretch') => { const s = this.currentState; if (kind === 'position') { return Math.abs(s.position - s.target) < threshold && Math.abs(s.velocity) < threshold; } return Math.abs(s.stretchPosition - s.stretchTarget) < threshold && Math.abs(s.stretchVelocity) < threshold; }; private stepSpring = (kind: 'position' | 'stretch') => { const s = this.currentState; const sp = this.spring; const out = this.pv; if (kind === 'position') { integrateSpring(sp.mass, sp.stiffness, sp.damping, s.position, s.velocity, s.target, FRAME_DT, out); s.velocity = out.velocity; s.position = out.position; } else { integrateSpring(sp.mass, sp.stiffness, sp.damping, s.stretchPosition, s.stretchVelocity, s.stretchTarget, FRAME_DT, out); s.stretchVelocity = out.velocity; s.stretchPosition = out.position; } }; private settle = (kind: 'position' | 'stretch') => { if (this.isNear(GLOBAL_THRESHOLD, kind)) { this.snap(kind, kind === 'position' ? this.currentState.target : this.currentState.stretchTarget); } else { this.stepSpring(kind); } }; /** Draw-only quiet: near → snap current+render; else false. Never springs. */ private tryQuiet = (kind: 'position' | 'stretch'): boolean => { if (!this.isNear(GLOBAL_THRESHOLD, kind)) return false; const cur = this.currentState; const render = this.renderState; if (kind === 'position') { cur.position = render.position = cur.target; cur.velocity = render.velocity = 0; } else { cur.stretchPosition = render.stretchPosition = cur.stretchTarget; cur.stretchVelocity = render.stretchVelocity = 0; } return true; }; private onUpdate = () => { const fpsNow = performance.now(); const elapsed = 0.001 * (fpsNow - this.fpsThen); this.fpsThen = fpsNow; this.frameTimeAccumulator += Math.min(1 / 30, elapsed); const prev = this.previousState; const cur = this.currentState; while (this.frameTimeAccumulator >= FRAME_DT) { prev.position = cur.position; prev.velocity = cur.velocity; prev.stretchPosition = cur.stretchPosition; prev.stretchVelocity = cur.stretchVelocity; const engaging = this._magnetEngaging; const engaged = this._magnetEngaged; const disengaging = this.magnetDisengaging; if (engaging !== null && engaged === null && disengaging === null) { // engaging — lock when attached but do NOT promote to engaged here (Orignal: draw) this.holdMagnetTargets(engaging); if (this.isAttached(engaging)) { this.snap('position', engaging.origin); } else { const out = this.pv; integrateMagnet(engaging.strength, engaging.radius, cur.position, Math.abs(cur.velocity) * -this.attractionDirection, engaging.origin, FRAME_DT, out); cur.velocity = out.velocity; cur.position = out.position; } this.settle('stretch'); } else if (engaging === null && engaged === null && disengaging === null) { // free this.settle('position'); this.settle('stretch'); for (let i = 0; i < this.magnets.length; i++) { const m = this.magnets[i]!; if (this.inRadius(m, 'position')) { this.attractionDirection = Math.sign(cur.position - m.origin); cur.target = m.origin; this._magnetEngaging = m; } } } else if (engaging === null && engaged !== null && disengaging === null) { // engaged — Apple stretch leave (currentState) + inland runaway safety only this.holdMagnetTargets(engaged); this.settle('stretch'); if (this.stretchLeftMagnet(engaged) || this.inlandFingerRunaway(engaged)) { this.magnetDisengaging = engaged; this._magnetEngaged = null; } } else if (engaging === null && engaged === null && disengaging !== null) { // disengaging this.settle('position'); this.settle('stretch'); if (this.targetInRadius(disengaging, 'position')) { this._magnetEngaging = disengaging; this.magnetDisengaging = null; } if (this.magnetDisengaging !== null && !this.inRadius(this.magnetDisengaging, 'position')) { this.magnetDisengaging = null; } } this.frameTimeAccumulator -= FRAME_DT; } const t = this.frameTimeAccumulator / FRAME_DT; const render = this.renderState; render.velocity = cur.velocity * t + prev.velocity * (1 - t); render.position = cur.position * t + prev.position * (1 - t); render.stretchVelocity = cur.stretchVelocity * t + prev.stretchVelocity * (1 - t); render.stretchPosition = cur.stretchPosition * t + prev.stretchPosition * (1 - t); }; private onDraw = () => { let settled = true; const cur = this.currentState; const render = this.renderState; if (this._magnetEngaging !== null) { // engaged is promoted in draw, not update if (this.isAttached(this._magnetEngaging)) { cur.position = render.position = this._magnetEngaging.origin; cur.velocity = render.velocity = 0; this._magnetEngaged = this._magnetEngaging; this._magnetEngaging = null; } else { settled = false; } if (!this.tryQuiet('stretch')) settled = false; } else { if (!this.tryQuiet('position')) settled = false; if (!this.tryQuiet('stretch')) settled = false; } this.emit({ position: cur.position, stretchMax: this.maxMagnetStrength, stretchPosition: cur.stretchPosition }); if (!settled) this.requestFrame(); }; } export const createMagnetSimulator = (options: MagnetSimulatorOptions) => new MagnetSimulator(options); 36:["$","$L3b",null,{"defaultSourceOpen":false,"name":"detent-slider","showSource":true,"sources":[{"code":"$3c","language":"tsx","name":"index.tsx"},{"code":"$3d","language":"tsx","name":"detent-slider.tsx"},{"code":"$3e","language":"typescript","name":"use-detent-slider.ts"},{"code":"$3f","language":"typescript","name":"detent-slider.styles.ts"},{"code":"$40","language":"typescript","name":"magnet-simulator.ts"}]}]