4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T4146,"use client" import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react" import { animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import { cn } from "@/lib/utils" import { useControllableState } from "@/registry/hooks/use-controllable-state" // Drag detection & rubber band const CLICK_THRESHOLD = 3 const DEAD_ZONE = 32 const MAX_CURSOR_RANGE = 200 const MAX_STRETCH = 8 // Layout offsets used by the "handle dodges label/value" calculation. const HANDLE_BUFFER = 8 const LABEL_OFFSET = 12 + 4 const VALUE_OFFSET = 12 - 8 function clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)) } function decimalsForStep(step: number): number { const s = step.toString() const dot = s.indexOf(".") return dot === -1 ? 0 : s.length - dot - 1 } function roundValue(val: number, step: number): number { const raw = Math.round(val / step) * step return parseFloat(raw.toFixed(decimalsForStep(step))) } // Magnetic snap to the nearest decile when within 3.125% of it. function snapToDecile(rawValue: number, min: number, max: number): number { const normalized = (rawValue - min) / (max - min) const nearest = Math.round(normalized * 10) / 10 if (Math.abs(normalized - nearest) <= 0.03125) { return min + nearest * (max - min) } return rawValue } export type ElasticSliderProps = { /** Label shown inside the track. */ label: string /** Controlled value. Use together with `onValueChange` */ value?: number /** Initial value for uncontrolled mode. Falls back to `min` */ defaultValue?: number /** Called with the new value on drag, click, or key press. */ onValueChange?: (value: number) => void /** * Minimum value. * @defaultValue 0 */ min?: number /** * Maximum value. * @defaultValue 1 */ max?: number /** * Smallest increment. * @defaultValue 0.01 */ step?: number /** Format the displayed value. Defaults to `value.toFixed(...)` based on `step` */ formatValue?: (value: number) => string className?: string /** Accessible name. Falls back to `label` */ "aria-label"?: string } export function ElasticSlider({ label, value: valueProp, defaultValue, onValueChange, min = 0, max = 1, step = 0.01, formatValue, className, "aria-label": ariaLabel, }: ElasticSliderProps) { const [value = min, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? min, onChange: onValueChange, }) const shouldReduceMotion = useReducedMotion() const wrapperRef = useRef(null) const trackRef = useRef(null) const labelRef = useRef(null) const valueRef = useRef(null) const [isInteracting, setIsInteracting] = useState(false) const [isDragging, setIsDragging] = useState(false) const [isHovered, setIsHovered] = useState(false) /** Ring only for Tab focus or keyboard value nudges, not pointer press/drag. */ const [keyboardFocusRing, setKeyboardFocusRing] = useState(false) // Pointer session state — mutable, does not trigger re-renders. const pointerDownPos = useRef<{ x: number; y: number } | null>(null) const pendingPointerFocusRef = useRef(false) const isClickRef = useRef(true) const animRef = useRef | null>(null) const wrapperRectRef = useRef(null) const scaleRef = useRef(1) const percentage = ((value - min) / (max - min)) * 100 const isActive = isInteracting || isHovered const displayValue = formatValue ? formatValue(value) : value.toFixed(decimalsForStep(step)) // Fill + handle driven by a single motion value for imperative updates. const fillPercent = useMotionValue(percentage) const fillWidth = useTransform(fillPercent, (pct) => `${pct}%`) const handleLeft = useTransform( fillPercent, (pct) => `max(4px, calc(${pct}% - 8px))` ) // Rubber band: widens the track and pulls it left when dragged past bounds. const rubberStretch = useMotionValue(0) const rubberWidth = useTransform( rubberStretch, (s) => `calc(100% + ${Math.abs(s)}px)` ) const rubberX = useTransform(rubberStretch, (s) => (s < 0 ? s : 0)) // Sync from props when not interacting and no spring is in flight. useEffect(() => { if (!isInteracting && !animRef.current) { fillPercent.jump(percentage) } }, [percentage, isInteracting, fillPercent]) const positionToValue = useCallback( (clientX: number) => { const rect = wrapperRectRef.current if (!rect) return min const sceneX = (clientX - rect.left) / scaleRef.current const nativeWidth = wrapperRef.current?.offsetWidth ?? rect.width const percent = clamp(sceneX / nativeWidth, 0, 1) return clamp(min + percent * (max - min), min, max) }, [min, max] ) const percentFromValue = useCallback( (v: number) => ((v - min) / (max - min)) * 100, [min, max] ) // Animate fill to a target percent, or jump instantly when the user prefers // reduced motion. Position still updates — only the spring is skipped. const animateFillTo = useCallback( (targetPercent: number) => { animRef.current?.stop() if (shouldReduceMotion) { fillPercent.jump(targetPercent) animRef.current = null return } animRef.current = animate(fillPercent, targetPercent, { type: "spring", stiffness: 300, damping: 25, mass: 0.8, onComplete: () => { animRef.current = null }, }) }, [fillPercent, shouldReduceMotion] ) const computeRubberStretch = useCallback((clientX: number, sign: number) => { const rect = wrapperRectRef.current if (!rect) return 0 const distancePast = sign < 0 ? rect.left - clientX : clientX - rect.right const overflow = Math.max(0, distancePast - DEAD_ZONE) return ( sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1)) ) }, []) const handlePointerDown = useCallback((e: React.PointerEvent) => { e.preventDefault() ;(e.target as HTMLElement).setPointerCapture(e.pointerId) pointerDownPos.current = { x: e.clientX, y: e.clientY } isClickRef.current = true setIsInteracting(true) pendingPointerFocusRef.current = true setKeyboardFocusRing(false) // Pointer interactions should move focus to the slider so subsequent // keyboard input is received and focus styles match the active state. trackRef.current?.focus({ preventScroll: true }) requestAnimationFrame(() => { pendingPointerFocusRef.current = false }) // Snapshot the wrapper rect so later math is immune to layout shifts. const wrapper = wrapperRef.current if (wrapper) { const rect = wrapper.getBoundingClientRect() wrapperRectRef.current = rect scaleRef.current = rect.width / wrapper.offsetWidth } }, []) const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (!isInteracting || !pointerDownPos.current) return const dx = e.clientX - pointerDownPos.current.x const dy = e.clientY - pointerDownPos.current.y if (isClickRef.current && Math.hypot(dx, dy) > CLICK_THRESHOLD) { isClickRef.current = false setIsDragging(true) } if (isClickRef.current) return const rect = wrapperRectRef.current if (rect && !shouldReduceMotion) { if (e.clientX < rect.left) { rubberStretch.jump(computeRubberStretch(e.clientX, -1)) } else if (e.clientX > rect.right) { rubberStretch.jump(computeRubberStretch(e.clientX, 1)) } else { rubberStretch.jump(0) } } const newValue = positionToValue(e.clientX) animRef.current?.stop() animRef.current = null fillPercent.jump(percentFromValue(newValue)) setValue(roundValue(newValue, step)) }, [ isInteracting, positionToValue, percentFromValue, setValue, step, fillPercent, rubberStretch, computeRubberStretch, shouldReduceMotion, ] ) const handlePointerUp = useCallback( (e: React.PointerEvent) => { if (!isInteracting) return if (isClickRef.current) { // Coarse sliders (≤10 positions) snap to the nearest step; // continuous sliders keep the decile-magnetic behavior. const rawValue = positionToValue(e.clientX) const discreteSteps = (max - min) / step const snapped = discreteSteps <= 10 ? clamp(min + Math.round((rawValue - min) / step) * step, min, max) : snapToDecile(rawValue, min, max) animateFillTo(percentFromValue(snapped)) setValue(roundValue(snapped, step)) } if (!shouldReduceMotion && rubberStretch.get() !== 0) { animate(rubberStretch, 0, { type: "spring", visualDuration: 0.35, bounce: 0.15, }) } setIsInteracting(false) setIsDragging(false) pointerDownPos.current = null }, [ isInteracting, positionToValue, percentFromValue, setValue, min, max, step, animateFillTo, rubberStretch, shouldReduceMotion, ] ) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { // Shift + Arrow is a Figma-style fast nudge: jumps by 10x the step, // independent of the WAI-ARIA Page step (which scales with range). const arrowStep = e.shiftKey ? step * 10 : step let next: number | null = null switch (e.key) { case "ArrowRight": case "ArrowUp": next = value + arrowStep break case "ArrowLeft": case "ArrowDown": next = value - arrowStep break case "Home": next = min break case "End": next = max break default: return } e.preventDefault() setKeyboardFocusRing(true) const snapped = roundValue(clamp(next, min, max), step) animateFillTo(percentFromValue(snapped)) setValue(snapped) }, [value, min, max, step, animateFillTo, percentFromValue, setValue] ) const handleTrackFocus = useCallback(() => { if (!pendingPointerFocusRef.current) { setKeyboardFocusRing(true) } }, []) const handleTrackBlur = useCallback(() => { setKeyboardFocusRing(false) }, []) // Measure label + value to derive "dodge" thresholds so the handle fades // when it would overlap either text. const [dodge, setDodge] = useState({ left: 38, right: 72 }) useLayoutEffect(() => { const wrapper = wrapperRef.current if (!wrapper) return const measure = () => { const trackWidth = wrapper.offsetWidth if (trackWidth <= 0) return const labelEl = labelRef.current const valueEl = valueRef.current const left = labelEl ? ((LABEL_OFFSET + labelEl.offsetWidth + HANDLE_BUFFER) / trackWidth) * 100 : 38 const right = valueEl ? ((trackWidth - VALUE_OFFSET - valueEl.offsetWidth - HANDLE_BUFFER) / trackWidth) * 100 : 72 setDodge((prev) => { return prev.left === left && prev.right === right ? prev : { left, right } }) } measure() const observer = new ResizeObserver(measure) observer.observe(wrapper) if (labelRef.current) observer.observe(labelRef.current) if (valueRef.current) observer.observe(valueRef.current) return () => observer.disconnect() }, [label, displayValue]) const valueDodge = percentage < dodge.left || percentage > dodge.right const handleOpacity = !isActive ? 0 : valueDodge ? 0.1 : isDragging ? 0.8 : 0.5 const discreteSteps = (max - min) / step const hashMarkCount = discreteSteps <= 10 ? discreteSteps - 1 : 9 const hashMarkPct = (i: number) => { return discreteSteps <= 10 ? (((i + 1) * step) / (max - min)) * 100 : (i + 1) * 10 } return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > ) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ncdai","registryDependencies":["https://chanhdai.com/r/use-controllable-state.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/elastic-slider/elastic-slider.tsx","content":"$51","type":"registry:component","target":"@components/elastic-slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]