50: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"] 51: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"] 52:T4d44,import * as React from 'react' import { cn } from '@/lib/utils' export interface SliderProps extends Omit, 'onChange' | 'defaultValue'> { value?: number[] defaultValue?: number[] min?: number max?: number step?: number onValueChange?: (value: number[]) => void onValueCommit?: (value: number[]) => void disabled?: boolean orientation?: 'horizontal' | 'vertical' // Jelly physics settings stiffness?: number damping?: number mass?: number } interface SpringState { position: number velocity: number } const Slider = React.forwardRef( ( { value: controlledValue, defaultValue = [0], min = 0, max = 100, step = 1, onValueChange, onValueCommit, disabled = false, orientation = 'horizontal', stiffness = 400, damping = 28, mass = 1, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }, ref ) => { const trackRef = React.useRef(null) const animationRef = React.useRef(null) const lastTimeRef = React.useRef(0) const isDraggingRef = React.useRef(false) const keyboardDragTimeoutRef = React.useRef | null>(null) const currentValueRef = React.useRef(defaultValue) // Track active drag handlers for cleanup on unmount const dragHandlersRef = React.useRef<{ onMove: ((e: PointerEvent) => void) | null onUp: (() => void) | null }>({ onMove: null, onUp: null }) // `max === min` made every percentage NaN/Infinity, which flowed straight // into `left: calc(NaN% - 14px)`; `step === 0` made the snap Math.round // produce NaN. Both are reachable from computed props. const safeRange = max - min || Number.EPSILON const safeStep = step > 0 ? step : 1 const toPercent = React.useCallback( (v: number) => ((v - min) / safeRange) * 100, [min, safeRange] ) const isControlled = controlledValue !== undefined const wasControlled = React.useRef(isControlled) React.useEffect(() => { if (wasControlled.current !== isControlled) { if (process.env.NODE_ENV === 'development') { console.warn('[Slider] Component is changing from ' + (wasControlled.current ? 'controlled' : 'uncontrolled') + ' to ' + (isControlled ? 'controlled' : 'uncontrolled') + '. This is not supported.') } wasControlled.current = isControlled } }, [isControlled]) const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const actualValue = isControlled ? controlledValue : uncontrolledValue const isRange = actualValue.length > 1 // Spring physics state for each thumb const [springs, setSprings] = React.useState(() => actualValue.map((v) => ({ position: toPercent(v), velocity: 0, })) ) const [targets, setTargets] = React.useState(() => actualValue.map(toPercent) ) const targetsRef = React.useRef(targets) const [activeThumb, setActiveThumb] = React.useState(null) const [squishes, setSquishes] = React.useState<{ scaleX: number; scaleY: number }[]>(() => actualValue.map(() => ({ scaleX: 1, scaleY: 1 })) ) const [hoveringThumb, setHoveringThumb] = React.useState(null) // Keep currentValueRef in sync for stale-closure-free commit React.useEffect(() => { currentValueRef.current = actualValue }, [actualValue]) // Update targets when value changes externally React.useEffect(() => { const newTargets = actualValue.map(toPercent) setTargets(newTargets) targetsRef.current = newTargets // Ensure springs array matches value array length if (springs.length !== actualValue.length) { setSprings(actualValue.map((v) => ({ position: toPercent(v), velocity: 0, }))) setSquishes(actualValue.map(() => ({ scaleX: 1, scaleY: 1 }))) } }, [actualValue, min, max, springs.length, toPercent]) // Spring physics simulation — only runs while dragging const startSpringLoop = React.useCallback(() => { if (animationRef.current) return // already running lastTimeRef.current = 0 const simulate = (timestamp: number) => { if (!isDraggingRef.current) { animationRef.current = null return } if (!lastTimeRef.current) { lastTimeRef.current = timestamp } const deltaTime = Math.min((timestamp - lastTimeRef.current) / 1000, 0.064) lastTimeRef.current = timestamp // Computed outside the updater: a state updater must be pure, and // React StrictMode double-invokes it — calling setSquishes in there // fired it twice per frame. const pendingSquishes: { scaleX: number; scaleY: number }[] = [] setSprings((prev) => { const newSprings: SpringState[] = [] const newSquishes: { scaleX: number; scaleY: number }[] = [] const len = Math.min(prev.length, targetsRef.current.length) for (let i = 0; i < len; i++) { const displacement = targetsRef.current[i] - prev[i].position const springForce = stiffness * displacement const dampingForce = damping * prev[i].velocity const acceleration = (springForce - dampingForce) / mass const newVelocity = prev[i].velocity + acceleration * deltaTime const newPosition = prev[i].position + newVelocity * deltaTime // Calculate squish based on velocity const velocityMagnitude = Math.abs(newVelocity) const squishAmount = Math.min(velocityMagnitude / 500, 0.25) const direction = newVelocity > 0 ? 1 : -1 newSquishes.push({ scaleX: 1 + squishAmount * direction * 0.4, scaleY: 1 - squishAmount * 0.25, }) // Stop animation when settled if (Math.abs(displacement) < 0.01 && Math.abs(newVelocity) < 0.01) { newSprings.push({ position: targetsRef.current[i], velocity: 0 }) newSquishes[i] = { scaleX: 1, scaleY: 1 } } else { newSprings.push({ position: newPosition, velocity: newVelocity }) } } pendingSquishes.length = 0 pendingSquishes.push(...newSquishes) return newSprings }) setSquishes(pendingSquishes) animationRef.current = requestAnimationFrame(simulate) } animationRef.current = requestAnimationFrame(simulate) }, [stiffness, damping, mass]) // Cleanup rAF on unmount React.useEffect(() => { return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } if (keyboardDragTimeoutRef.current) { clearTimeout(keyboardDragTimeoutRef.current) } } }, []) // Cleanup drag handlers on unmount React.useEffect(() => { return () => { const { onMove, onUp } = dragHandlersRef.current if (onMove) { document.removeEventListener('pointermove', onMove) } if (onUp) { document.removeEventListener('pointerup', onUp) } } }, []) const getValueFromPosition = (clientX: number, clientY: number) => { if (!trackRef.current) return 0 const rect = trackRef.current.getBoundingClientRect() let percent: number if (orientation === 'vertical') { percent = 1 - Math.max(0, Math.min(1, (clientY - rect.top) / rect.height)) } else { percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) } const rawValue = min + percent * safeRange const steppedValue = Math.round(rawValue / safeStep) * safeStep return Math.max(min, Math.min(max, steppedValue)) } const getPercentFromPosition = (clientX: number, clientY: number) => { if (!trackRef.current) return 0 const rect = trackRef.current.getBoundingClientRect() if (orientation === 'vertical') { return (1 - Math.max(0, Math.min(1, (clientY - rect.top) / rect.height))) * 100 } return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)) * 100 } const findNearestThumb = (percent: number): number => { if (!isRange) return 0 let nearestIndex = 0 let nearestDistance = Infinity for (let i = 0; i < springs.length; i++) { const distance = Math.abs(springs[i].position - percent) if (distance < nearestDistance) { nearestDistance = distance nearestIndex = i } } return nearestIndex } const updateValue = (index: number, newValue: number) => { const newValues = [...actualValue] if (isRange) { // Ensure values don't cross over if (index === 0) { newValues[0] = Math.min(newValue, actualValue[1] - step) } else { newValues[1] = Math.max(newValue, actualValue[0] + step) } } else { newValues[index] = newValue } // Clamp to min/max newValues[index] = Math.max(min, Math.min(max, newValues[index])) if (!isControlled) { setUncontrolledValue(newValues) } onValueChange?.(newValues) } const handleTrackPointerDown = (e: React.PointerEvent) => { if (disabled) return e.preventDefault() const percent = getPercentFromPosition(e.clientX, e.clientY) const nearestThumbIndex = findNearestThumb(percent) const newValue = getValueFromPosition(e.clientX, e.clientY) setActiveThumb(nearestThumbIndex) isDraggingRef.current = true startSpringLoop() updateValue(nearestThumbIndex, newValue) // Add velocity boost for jelly effect setSprings((prev) => { const newSprings = [...prev] newSprings[nearestThumbIndex] = { ...newSprings[nearestThumbIndex], velocity: (e.movementX || 0) * 10, } return newSprings }) const handlePointerMove = (e: PointerEvent) => { const newValue = getValueFromPosition(e.clientX, e.clientY) updateValue(nearestThumbIndex, newValue) // Add velocity for jelly effect setSprings((prev) => { const newSprings = [...prev] newSprings[nearestThumbIndex] = { ...newSprings[nearestThumbIndex], velocity: newSprings[nearestThumbIndex].velocity + (e.movementX || 0) * 3, } return newSprings }) } const handlePointerUp = () => { setActiveThumb(null) isDraggingRef.current = false onValueCommit?.(currentValueRef.current) document.removeEventListener('pointermove', handlePointerMove) document.removeEventListener('pointerup', handlePointerUp) dragHandlersRef.current = { onMove: null, onUp: null } } // Store handlers for cleanup dragHandlersRef.current = { onMove: handlePointerMove, onUp: handlePointerUp } document.addEventListener('pointermove', handlePointerMove) document.addEventListener('pointerup', handlePointerUp) } const handleThumbPointerDown = (index: number) => (e: React.PointerEvent) => { if (disabled) return e.preventDefault() e.stopPropagation() setActiveThumb(index) isDraggingRef.current = true startSpringLoop() const handlePointerMove = (e: PointerEvent) => { const newValue = getValueFromPosition(e.clientX, e.clientY) updateValue(index, newValue) // Add velocity for jelly effect setSprings((prev) => { const newSprings = [...prev] newSprings[index] = { ...newSprings[index], velocity: newSprings[index].velocity + (e.movementX || 0) * 3, } return newSprings }) } const handlePointerUp = () => { setActiveThumb(null) isDraggingRef.current = false onValueCommit?.(currentValueRef.current) document.removeEventListener('pointermove', handlePointerMove) document.removeEventListener('pointerup', handlePointerUp) dragHandlersRef.current = { onMove: null, onUp: null } } // Store handlers for cleanup dragHandlersRef.current = { onMove: handlePointerMove, onUp: handlePointerUp } document.addEventListener('pointermove', handlePointerMove) document.addEventListener('pointerup', handlePointerUp) } const handleKeyDown = (index: number) => (e: React.KeyboardEvent) => { if (disabled) return let newValue = actualValue[index] const largeStep = safeRange / 10 switch (e.key) { case 'ArrowRight': case 'ArrowUp': newValue = Math.min(max, actualValue[index] + step) break case 'ArrowLeft': case 'ArrowDown': newValue = Math.max(min, actualValue[index] - step) break case 'PageUp': newValue = Math.min(max, actualValue[index] + largeStep) break case 'PageDown': newValue = Math.max(min, actualValue[index] - largeStep) break case 'Home': newValue = min break case 'End': newValue = max break default: return } e.preventDefault() updateValue(index, newValue) // Add velocity for keyboard navigation jelly effect setSprings((prev) => { const newSprings = [...prev] newSprings[index] = { ...newSprings[index], velocity: (newValue > actualValue[index] ? 1 : -1) * 80, } return newSprings }) isDraggingRef.current = true startSpringLoop() if (keyboardDragTimeoutRef.current) clearTimeout(keyboardDragTimeoutRef.current) keyboardDragTimeoutRef.current = setTimeout(() => { isDraggingRef.current = false }, 300) } // Calculate range fill position const getRangeFillStyle = () => { if (isRange) { const left = Math.min(springs[0]?.position ?? 0, springs[1]?.position ?? 0) const right = Math.max(springs[0]?.position ?? 0, springs[1]?.position ?? 0) return { left: `${left}%`, width: `${right - left}%`, } } return { left: '0%', width: `${springs[0]?.position ?? 0}%`, } } return (

{/* Track */}

{/* Range fill */}

{/* Decorative stripes */}

{/* Thumbs */} {springs.map((spring, index) => (

setHoveringThumb(index)} onMouseLeave={() => setHoveringThumb(null)} className={cn( 'absolute h-7 w-7 cursor-grab', 'border-3 border-foreground bg-background', 'shadow-[4px_4px_0px_hsl(var(--shadow-color))]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', 'transition-shadow duration-150', activeThumb === index && 'cursor-grabbing shadow-[2px_2px_0px_hsl(var(--shadow-color))] z-10', hoveringThumb === index && activeThumb !== index && 'shadow-[5px_5px_0px_hsl(var(--shadow-color))]' )} style={ orientation === 'vertical' ? { bottom: `calc(${spring.position}% - 14px)`, left: '50%', transform: ` translateX(-50%) scaleX(${squishes[index]?.scaleX ?? 1}) scaleY(${squishes[index]?.scaleY ?? 1}) rotate(${((squishes[index]?.scaleX ?? 1) - 1) * 8}deg) `, } : { left: `calc(${spring.position}% - 14px)`, top: '50%', transform: ` translateY(-50%) scaleX(${squishes[index]?.scaleX ?? 1}) scaleY(${squishes[index]?.scaleY ?? 1}) rotate(${((squishes[index]?.scaleX ?? 1) - 1) * 8}deg) `, } } > {/* Inner border detail */}

{/* Grip lines */}

))}

) } ) Slider.displayName = 'Slider' export { Slider } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/slider.tsx","content":"$52","type":"registry:ui","target":"components/ui/slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]