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:Tf05f,"use client"; import { forwardRef, useRef, useState, useEffect, useLayoutEffect, useCallback, useMemo, type CSSProperties, type HTMLAttributes, } from "react"; import { motion, useMotionValue, useTransform, animate, AnimatePresence, type MotionValue, } from "framer-motion"; import * as SliderPrimitive from "@radix-ui/react-slider"; import { cn } from "@/lib/utils"; import { useSizeVariant, type SizeVariant } from "@/lib/size-context"; import { spring } from "@/lib/springs"; import { fontWeights } from "@/lib/font-weight"; import { useShape } from "@/lib/shape-context"; // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- type SliderValue = number | [number, number]; type ValuePosition = "left" | "right" | "top" | "bottom" | "tooltip"; /** Props of the compact engine — the feature-rich design (ranges, discrete * step lists, value display) that renders the ladder's compact step. The * public accepts these plus `variant` and `size`. */ interface SliderEngineProps extends Omit, "onChange" | "defaultValue"> { value: SliderValue; onChange: (value: SliderValue) => void; min?: number; max?: number; step?: number; /** * Discrete list of allowed values, e.g. [0.1, 0.5, 0.7, 1.1, 1.3]. * * When set, the thumb snaps only to these values (positioned proportionally * along the track) and arrow keys walk the list. `min`/`max` derive from the * list's extremes and `step` is ignored. */ steps?: number[]; showSteps?: boolean; showValue?: boolean; valuePosition?: ValuePosition; formatValue?: (v: number) => string; label?: string; disabled?: boolean; trackClassName?: string; trackStyle?: CSSProperties; fillClassName?: string; fillStyle?: CSSProperties; hideFill?: boolean; thumbColor?: string; thumbBorderColor?: string; } // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const THUMB_SIZE = 20; const THUMB_SIZE_REST = 16; const TRACK_BG_HEIGHT = 18; const DOT_SIZE = 4; const PIP_SIZE = 5; // Inset track BG so its rounded-end centers align with thumb centers at min/max const TRACK_INSET = (THUMB_SIZE - TRACK_BG_HEIGHT) / 2; // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- function valueToPixel( v: number, min: number, max: number, trackWidth: number ): number { if (max === min) return 0; const usable = trackWidth - THUMB_SIZE; return ((v - min) / (max - min)) * usable; } function nearestStepIndex(v: number, steps: number[]): number { let idx = 0; for (let i = 1; i < steps.length; i++) { if (Math.abs(steps[i] - v) < Math.abs(steps[idx] - v)) idx = i; } return idx; } function pixelToValue( px: number, min: number, max: number, step: number, trackWidth: number, stepValues: number[] | null = null ): number { const usable = trackWidth - THUMB_SIZE; if (usable <= 0) return min; const raw = (px / usable) * (max - min) + min; if (stepValues) return stepValues[nearestStepIndex(raw, stepValues)]; const snapped = Math.round((raw - min) / step) * step + min; return Math.max(min, Math.min(max, snapped)); } function toRadixValue(value: SliderValue): number[] { return Array.isArray(value) ? value : [value]; } // --------------------------------------------------------------------------- // ValueDisplay (internal) // --------------------------------------------------------------------------- interface ValueDisplayProps { values: number[]; editingIndex: number | null; onStartEdit: (index: number) => void; onCommitEdit: (index: number, v: number) => void; onCancelEdit: () => void; min: number; max: number; step: number; stepValues: number[] | null; formatValue: (v: number) => string; label?: string; isRange: boolean; isInteracting: boolean; } function ValueDisplay({ values, editingIndex, onStartEdit, onCommitEdit, onCancelEdit, min, max, step, stepValues, formatValue, label, isRange, isInteracting, }: ValueDisplayProps) { const shape = useShape(); const [inputValue, setInputValue] = useState(""); const inputRef = useRef(null); useEffect(() => { if (editingIndex !== null) { setInputValue(String(values[editingIndex])); requestAnimationFrame(() => inputRef.current?.select()); } }, [editingIndex]); const commitEdit = useCallback( (index: number) => { const parsed = parseFloat(inputValue); if (!isNaN(parsed)) { const clamped = Math.max(min, Math.min(max, parsed)); const snapped = stepValues ? stepValues[nearestStepIndex(clamped, stepValues)] : Math.round((clamped - min) / step) * step + min; onCommitEdit(index, snapped); } else { onCancelEdit(); } }, [inputValue, min, max, step, stepValues, onCommitEdit, onCancelEdit] ); const renderValue = (index: number) => { if (editingIndex === index) { return ( {/* Ghost for layout stability — widest possible value */} {label && ( {label}: )} setInputValue(e.target.value)} onBlur={() => commitEdit(index)} onKeyDown={(e) => { if (e.key === "Enter") commitEdit(index); if (e.key === "Escape") onCancelEdit(); }} aria-label={`Edit slider value${isRange ? (index === 0 ? " (start)" : " (end)") : ""}`} className={cn( "w-[5ch] bg-transparent text-foreground outline-none border-b border-border text-center", shape.input )} style={{ fontVariationSettings: fontWeights.medium }} /> ); } return ( onStartEdit(index)} > {formatValue(values[index])} ); }; const widestValue = isRange ? `${label ? `${label}: ` : ""}${formatValue(max)} — ${formatValue(max)}` : `${label ? `${label}: ` : ""}${formatValue(max)}`; return ( {/* Invisible ghost — reserves width of widest possible value */} {label && editingIndex === null && ( {label}: )} {isRange ? ( <> {renderValue(0)} — {renderValue(1)} ) : ( renderValue(0) )} ); } // --------------------------------------------------------------------------- // TooltipValue (internal) // --------------------------------------------------------------------------- interface TooltipValueProps { value: number; formatValue: (v: number) => string; motionX: MotionValue; } function TooltipValue({ value, formatValue, motionX }: TooltipValueProps) { const shape = useShape(); const tooltipX = useTransform(motionX, (x) => x + THUMB_SIZE / 2); return ( {formatValue(value)} ); } // --------------------------------------------------------------------------- // CompactSlider — the compact-step design (formerly the only `Slider`). // --------------------------------------------------------------------------- const CompactSlider = forwardRef( ( { value, onChange, min: minProp = 0, max: maxProp = 100, step = 1, steps, showSteps = false, showValue = true, valuePosition = "left", formatValue = String, label, disabled = false, trackClassName, trackStyle, fillClassName, fillStyle, hideFill = false, thumbColor, thumbBorderColor, className, ...props }, ref ) => { const isRange = Array.isArray(value); const values = toRadixValue(value); const shape = useShape(); // Non-uniform step mode: sorted, deduped list of allowed values. Keyed on // the joined string so inline array literals don't recompute every render. const stepsKey = steps ? steps.join(",") : ""; const stepValues = useMemo(() => { if (!stepsKey) return null; const parsed = Array.from(new Set(stepsKey.split(",").map(Number))).sort( (a, b) => a - b ); return parsed.length > 1 ? parsed : null; }, [stepsKey]); const min = stepValues ? stepValues[0] : minProp; const max = stepValues ? stepValues[stepValues.length - 1] : maxProp; // --- Refs --- const trackRef = useRef(null); const trackWidthRef = useRef(0); const dragging = useRef(false); const activeDragThumb = useRef(0); const valuesRef = useRef(values); const minRef = useRef(min); const maxRef = useRef(max); valuesRef.current = values; minRef.current = min; maxRef.current = max; // --- State --- const [isHovered, setIsHovered] = useState(false); const [isPressed, setIsPressed] = useState(false); const [editingIndex, setEditingIndex] = useState(null); const [hoverPreview, setHoverPreview] = useState<{ left: number; width: number; snappedValue: number; cursorX: number; } | null>(null); const [focusedThumb, setFocusedThumb] = useState(null); const [showHoverTooltip, setShowHoverTooltip] = useState(false); const hoverDelayRef = useRef | null>(null); // Show hover tooltip after 100ms delay useEffect(() => { if (isHovered) { hoverDelayRef.current = setTimeout(() => setShowHoverTooltip(true), 100); } else { if (hoverDelayRef.current) clearTimeout(hoverDelayRef.current); setShowHoverTooltip(false); } return () => { if (hoverDelayRef.current) clearTimeout(hoverDelayRef.current); }; }, [isHovered]); // --- Motion values --- const motionX0 = useMotionValue(0); const motionX1 = useMotionValue(0); // --- Derived motion values for fill --- const fillLeft = useTransform(motionX0, (x) => isRange ? x + THUMB_SIZE / 2 - TRACK_INSET : 0 ); const fillWidthSingle = useTransform(motionX0, (x) => x + THUMB_SIZE / 2 - TRACK_INSET); const fillWidthRange = useTransform( [motionX0, motionX1] as MotionValue[], ([x0, x1]) => (x1 as number) - (x0 as number) ); const fillWidth = isRange ? fillWidthRange : fillWidthSingle; // --- Step dots mask (hides dots on filled side, like SliderComfortable pips) --- const stepDotsMaskSingle = useTransform( motionX0, (x) => { const edge = x + THUMB_SIZE / 2; return `linear-gradient(to right, transparent ${edge}px, black ${edge + 2}px)`; } ); const stepDotsMaskRange = useTransform( [motionX0, motionX1] as MotionValue[], ([x0, x1]) => { const left = (x0 as number) + THUMB_SIZE / 2; const right = (x1 as number) + THUMB_SIZE / 2; return `linear-gradient(to right, black ${left - 2}px, transparent ${left}px, transparent ${right}px, black ${right + 2}px)`; } ); const stepDotsMask = isRange ? stepDotsMaskRange : stepDotsMaskSingle; // --- Hover preview computation --- const computeHoverPreview = useCallback( (cursorX: number, trackWidth: number) => { // cursorX and trackWidth are in layout space (offsetWidth-relative), // unaffected by ancestor CSS transforms. THUMB_SIZE / TRACK_INSET are // also layout-space, so the math below is consistent end-to-end. const usable = trackWidth - THUMB_SIZE; const rawPx = cursorX - THUMB_SIZE / 2; const clampedPx = Math.max(0, Math.min(usable, rawPx)); const rawVal = usable > 0 ? (clampedPx / usable) * (max - min) + min : min; const snappedVal = stepValues ? stepValues[nearestStepIndex(rawVal, stepValues)] : Math.max( min, Math.min(max, Math.round((rawVal - min) / step) * step + min) ); const snappedPercent = max === min ? 0 : (snappedVal - min) / (max - min); const snappedX = THUMB_SIZE / 2 + snappedPercent * usable; // Find nearest thumb center const c0 = motionX0.get() + THUMB_SIZE / 2; const c1 = motionX1.get() + THUMB_SIZE / 2; const nearestIdx = isRange ? (Math.abs(snappedX - c0) <= Math.abs(snappedX - c1) ? 0 : 1) : 0; const nearest = nearestIdx === 0 ? c0 : c1; // Extend hover bar to track edges at extremes so there's no gap const edgeX = snappedVal === min ? 0 : snappedVal === max ? trackWidth : snappedX; const left = Math.min(nearest, edgeX); const width = Math.abs(edgeX - nearest); setHoverPreview({ left, width, snappedValue: snappedVal, cursorX: snappedX }); }, [min, max, step, stepValues, isRange, motionX0, motionX1] ); // --- Initial sync (before paint) --- const initialSyncDone = useRef(false); const [ready, setReady] = useState(false); useLayoutEffect(() => { const el = trackRef.current; if (!el || initialSyncDone.current) return; const w = el.offsetWidth; trackWidthRef.current = w; const px0 = valueToPixel(values[0], min, max, w); motionX0.set(px0); if (isRange && values[1] !== undefined) { const px1 = valueToPixel(values[1], min, max, w); motionX1.set(px1); } initialSyncDone.current = true; setReady(true); }, []); // --- Track width measurement (resize only) --- useEffect(() => { const el = trackRef.current; if (!el) return; const ro = new ResizeObserver(([entry]) => { const w = entry.contentRect.width; trackWidthRef.current = w; if (!dragging.current && initialSyncDone.current) { const v = valuesRef.current; const mn = minRef.current; const mx = maxRef.current; const px0 = valueToPixel(v[0], mn, mx, w); animate(motionX0, px0, spring.moderate); if (isRange && v[1] !== undefined) { const px1 = valueToPixel(v[1], mn, mx, w); animate(motionX1, px1, spring.moderate); } } }); ro.observe(el); return () => ro.disconnect(); }, [isRange, motionX0, motionX1]); // --- Sync motion values on value change (keyboard, programmatic) --- // Depend on a primitive key rather than the `values` array — its identity // changes every render (toRadixValue allocates), which would restart the // animation on unrelated re-renders (hover/tooltip state churn). const valuesKey = values.join(","); useEffect(() => { if (!initialSyncDone.current) return; if (dragging.current) return; const tw = trackWidthRef.current; if (tw <= 0) return; const v = valuesRef.current; const px0 = valueToPixel(v[0], min, max, tw); animate(motionX0, px0, spring.moderate); if (isRange && v[1] !== undefined) { const px1 = valueToPixel(v[1], min, max, tw); animate(motionX1, px1, spring.moderate); } }, [valuesKey, min, max, isRange, motionX0, motionX1]); // --- Range crossing prevention --- const clampForRange = useCallback( (px: number, thumbIndex: number): number => { if (!isRange) return px; if (thumbIndex === 0) { return Math.min(px, motionX1.get() - THUMB_SIZE * 0.5); } else { return Math.max(px, motionX0.get() + THUMB_SIZE * 0.5); } }, [isRange, motionX0, motionX1] ); // --- Emit value change --- const emitChange = useCallback( (thumbIndex: number, newValue: number) => { if (isRange) { const newValues: [number, number] = [...(values as [number, number])]; newValues[thumbIndex] = newValue; onChange(newValues); } else { onChange(newValue); } }, [isRange, values, onChange] ); // --- Pointer handlers on track --- const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; e.preventDefault(); e.stopPropagation(); // Prevent Radix from also handling the drag const trackEl = trackRef.current; if (!trackEl) return; const trackRect = trackEl.getBoundingClientRect(); const layoutWidth = trackEl.offsetWidth; if (layoutWidth <= 0 || trackRect.width <= 0) return; // Normalize cursor to layout space so it matches motionX (which is // rendered as a CSS-pixel transform), even under ancestor CSS scale. const scale = trackRect.width / layoutWidth; const localX = (e.clientX - trackRect.left) / scale - THUMB_SIZE / 2; const clamped = Math.max( 0, Math.min(layoutWidth - THUMB_SIZE, localX) ); // Determine which thumb to drag if (isRange) { const dist0 = Math.abs(clamped - motionX0.get()); const dist1 = Math.abs(clamped - motionX1.get()); activeDragThumb.current = dist0 <= dist1 ? 0 : 1; } else { activeDragThumb.current = 0; } dragging.current = true; setIsPressed(true); const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1; // Snap to step grid immediately const snappedValue = pixelToValue( clamped, min, max, step, layoutWidth, stepValues ); const snappedPx = valueToPixel(snappedValue, min, max, layoutWidth); // Clamp for range crossing const finalPx = clampForRange( snappedPx, activeDragThumb.current ); // Spring-animate thumb to clicked position animate(motionX, finalPx, spring.moderate); // Update value const finalValue = pixelToValue( finalPx, min, max, step, layoutWidth, stepValues ); emitChange(activeDragThumb.current, finalValue); (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }, [disabled, isRange, min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange] ); const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (!dragging.current) return; e.stopPropagation(); const trackEl = trackRef.current; if (!trackEl) return; const trackRect = trackEl.getBoundingClientRect(); const layoutWidth = trackEl.offsetWidth; if (layoutWidth <= 0 || trackRect.width <= 0) return; const scale = trackRect.width / layoutWidth; const localX = (e.clientX - trackRect.left) / scale - THUMB_SIZE / 2; const clamped = Math.max( 0, Math.min(layoutWidth - THUMB_SIZE, localX) ); const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1; // Snap to step grid during drag const snappedValue = pixelToValue( clamped, min, max, step, layoutWidth, stepValues ); const snappedPx = valueToPixel(snappedValue, min, max, layoutWidth); const finalPx = clampForRange( snappedPx, activeDragThumb.current ); motionX.set(finalPx); const finalValue = pixelToValue( finalPx, min, max, step, layoutWidth, stepValues ); emitChange(activeDragThumb.current, finalValue); }, [min, max, step, stepValues, motionX0, motionX1, clampForRange, emitChange] ); const handlePointerUp = useCallback(() => { if (!dragging.current) return; dragging.current = false; setIsPressed(false); setHoverPreview(null); // Spring settle to final quantized position const tw = trackWidthRef.current; const motionX = activeDragThumb.current === 0 ? motionX0 : motionX1; const currentPx = motionX.get(); const snapped = pixelToValue(currentPx, min, max, step, tw, stepValues); const snappedPx = valueToPixel(snapped, min, max, tw); animate(motionX, snappedPx, spring.moderate); }, [min, max, step, stepValues, motionX0, motionX1]); // --- Radix keyboard handler --- // In steps mode the primitive runs on indices (0..len-1, step 1) so arrow // keys walk the list; map indices back to actual values on the way out. const handleRadixChange = useCallback( (newValues: number[]) => { if (dragging.current) return; const mapped = stepValues ? newValues.map((i) => stepValues[Math.round(i)]) : newValues; if (isRange) { onChange(mapped as [number, number]); } else { onChange(mapped[0]); } }, [isRange, onChange, stepValues] ); // --- Click-to-edit handlers --- const handleStartEdit = useCallback((index: number) => { setEditingIndex(index); }, []); const handleCommitEdit = useCallback( (index: number, v: number) => { emitChange(index, v); setEditingIndex(null); }, [emitChange] ); const handleCancelEdit = useCallback(() => { setEditingIndex(null); }, []); // --- Step dots --- const stepDots = useMemo( () => showSteps ? stepValues ? stepValues.map((v) => ({ value: v, percent: max === min ? 0 : (v - min) / (max - min), })) : Array.from( { length: Math.round((max - min) / step) + 1 }, (_, i) => { const v = min + i * step; const percent = (v - min) / (max - min); return { value: v, percent }; } ) : [], [showSteps, min, max, step, stepValues] ); // --- Interaction state for tooltip --- const isInteracting = isHovered || isPressed; // --- Per-thumb accessible names --- // aria-label on Root lands on a role-less span and never reaches the // thumb (which carries role="slider"), so each Thumb gets its own label. const thumbAriaLabel = (index: number): string | undefined => { if (!isRange) return label; if (!label) return index === 0 ? "Minimum" : "Maximum"; return index === 0 ? `${label} minimum` : `${label} maximum`; }; // --- Value display component --- const valueDisplay = showValue && valuePosition !== "tooltip" && ( ); // --- Render visual thumb (not Radix — purely visual) --- const renderVisualThumb = (index: number) => { const motionX = index === 0 ? motionX0 : motionX1; return ( {/* Focus ring */} ); }; return (

{/* Top / Left value */} {(valuePosition === "top" || valuePosition === "left") && valueDisplay} {/* Track area */}

setIsHovered(true)} onPointerLeave={() => { setIsHovered(false); setHoverPreview(null); }} onMouseMove={(e) => { if (dragging.current) return; const trackEl = trackRef.current; if (!trackEl) return; const trackRect = trackEl.getBoundingClientRect(); const layoutWidth = trackEl.offsetWidth; if (layoutWidth <= 0 || trackRect.width <= 0) return; // Normalize to layout space so the formula's THUMB_SIZE / TRACK_INSET // constants (layout px) match the cursor's coordinate space, even // when an ancestor applies a CSS scale transform (e.g. /demo). const scale = trackRect.width / layoutWidth; const layoutX = (e.clientX - trackRect.left) / scale; const clamped = Math.max(0, Math.min(layoutWidth, layoutX)); computeHoverPreview(clamped, layoutWidth); }} > {/* Tooltip values */} {showValue && valuePosition === "tooltip" && ( {isInteracting && ( )} {isInteracting && isRange && values[1] !== undefined && ( )} )} {/* Radix Slider — invisible, provides ARIA + keyboard nav */} nearestStepIndex(v, stepValues)) : values } onValueChange={handleRadixChange} min={stepValues ? 0 : min} max={stepValues ? stepValues.length - 1 : max} step={stepValues ? 1 : step} disabled={disabled} className="absolute inset-0 opacity-0 pointer-events-none" style={{ height: THUMB_SIZE }} > { if (e.currentTarget.matches(":focus-visible")) setFocusedThumb(0); }} onBlur={() => setFocusedThumb((prev) => prev === 0 ? null : prev)} /> {isRange && ( { if (e.currentTarget.matches(":focus-visible")) setFocusedThumb(1); }} onBlur={() => setFocusedThumb((prev) => prev === 1 ? null : prev)} /> )} {/* Visual track with pointer handlers */}

{/* Extended hit area — 8px beyond each edge */}

{/* Hover value tooltip */} {hoverPreview && showHoverTooltip && !isPressed && valuePosition !== "tooltip" && ( {formatValue(hoverPreview.snappedValue)} )} {/* Track background */} {/* Filled range */} {!hideFill && ( )} {/* Hover preview */} hoverPreview.left ? "0 9999px 9999px 0" : "9999px 0 0 9999px", backgroundColor: "color-mix(in srgb, var(--color-accent) 40%, transparent)", }} /> {/* Step dots — masked so filled side is hidden */} {stepDots.length > 0 && ( {stepDots.map(({ value: v, percent }) => (

))} )} {/* Visual thumbs */} {renderVisualThumb(0)} {isRange && renderVisualThumb(1)}

{/* Bottom / Right value */} {(valuePosition === "bottom" || valuePosition === "right") && valueDisplay}

); } ); CompactSlider.displayName = "SliderCompact"; // --------------------------------------------------------------------------- // ComfortableSlider — the default-step design (pips / scrubber layouts). // --------------------------------------------------------------------------- interface SliderComfortableProps extends Omit, "onChange" | "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onAnimationStart"> { value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number; variant?: "pips" | "scrubber"; label?: string; formatValue?: (v: number) => string; disabled?: boolean; } const ComfortableSlider = forwardRef( ( { value, onChange, min = 0, max = 100, step = 1, variant = "pips", label, formatValue = String, disabled = false, className, ...props }, ref ) => { const containerRef = useRef(null); const dragging = useRef(false); const handleDragging = useRef(false); const [isHovered, setIsHovered] = useState(false); const [isPressed, setIsPressed] = useState(false); const [isFocused, setIsFocused] = useState(false); const [hoverPreview, setHoverPreview] = useState<{ left: number; width: number; snappedValue: number; cursorX: number; } | null>(null); const [showHoverTooltip, setShowHoverTooltip] = useState(false); const hoverDelayRef = useRef | null>(null); const shape = useShape(); // Show hover tooltip after 100ms delay useEffect(() => { if (isHovered) { hoverDelayRef.current = setTimeout(() => setShowHoverTooltip(true), 100); } else { if (hoverDelayRef.current) clearTimeout(hoverDelayRef.current); setShowHoverTooltip(false); } return () => { if (hoverDelayRef.current) clearTimeout(hoverDelayRef.current); }; }, [isHovered]); const mergedRef = useCallback( (el: HTMLDivElement | null) => { containerRef.current = el; if (typeof ref === "function") (ref as React.RefCallback)(el); else if (ref) (ref as React.RefObject).current = el; }, [ref] ); const pipSteps = useMemo( () => Array.from( { length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step ), [min, max, step] ); const pipCount = pipSteps.length; // Fill motion value const fillPercent = useMotionValue( max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min))) ); // Small offset when value is at min so the handle line stays visible const zeroTarget = variant === "pips" ? 8 : 17; const zeroOffset = useMotionValue(value === min ? zeroTarget : 0); const fillWidthStyle = useTransform(fillPercent, (p) => `${p * 100}%`); const handleLeftStyle = useTransform( [fillPercent, zeroOffset] as MotionValue[], ([p, zo]) => `calc(${(p as number) * 100}% - 8px + ${zo as number}px)` ); const handleLineLeftStyle = useTransform( [fillPercent, zeroOffset] as MotionValue[], ([p, zo]) => `calc(${(p as number) * 100}% - 9px + ${zo as number}px)` ); // Pips-specific: offset by px-3 (12px) padding so fill edge aligns with active pip center const pipsFillWidthStyle = useTransform( [fillPercent, zeroOffset] as MotionValue[], ([p, zo]) => `calc(${(p as number) * 100}% + ${20 - 20 * (p as number) - (zo as number) * 2.5}px)` ); const pipsHandleLineLeftStyle = useTransform( fillPercent, (p) => `calc(${p * 100}% + ${11 - 24 * p}px)` ); const pipsMaskStyle = useTransform( [fillPercent, zeroOffset] as MotionValue[], ([p, zo]) => { const offset = 20 - 20 * (p as number) - (zo as number) * 2.5; return `linear-gradient(to right, transparent calc(${(p as number) * 100}% + ${offset}px), black calc(${(p as number) * 100}% + ${offset + 2}px))`; } ); // --- Hover preview computation --- const computeHoverPreview = useCallback( (clientX: number) => { const el = containerRef.current; if (!el) return; const rect = el.getBoundingClientRect(); // Use clientWidth (padding box) — CSS % and absolute left/width are relative to it const w = el.clientWidth; if (w <= 0 || rect.width <= 0) return; // Normalize cursor to layout space so it matches `w` (layout, padding // box). offsetWidth is the layout border-box; the difference vs `w` is // the horizontal border contribution split across both sides. const scale = rect.width / el.offsetWidth; const borderLeftLayout = (el.offsetWidth - w) / 2; const visualX = clientX - rect.left; const layoutX = visualX / scale - borderLeftLayout; const clamped = Math.max(0, Math.min(w, layoutX)); // Snap to nearest step value let snappedVal: number; if (variant === "pips") { if (pipCount <= 1) return; const index = Math.max(0, Math.min(pipCount - 1, Math.round((clamped / w) * (pipCount - 1)))); snappedVal = pipSteps[index]; } else { const raw = min + (clamped / w) * (max - min); snappedVal = Math.max(min, Math.min(max, Math.round((raw - min) / step) * step + min)); } const snappedPercent = max === min ? 0 : (snappedVal - min) / (max - min); const snappedX = snappedPercent * w; // Current handle position — for pips, match the visual fill edge offset const currentPercent = fillPercent.get(); let handleX: number; if (variant === "pips") { const zo = zeroOffset.get(); handleX = currentPercent * w + (20 - 20 * currentPercent - zo * 2.5); } else { handleX = currentPercent * w; } // Extend hover bar to container edges at extremes so there's no gap const edgeX = snappedVal === min ? 0 : snappedVal === max ? w : snappedX; const left = Math.min(handleX, edgeX); const width = Math.abs(edgeX - handleX); setHoverPreview({ left, width, snappedValue: snappedVal, cursorX: snappedX }); }, [variant, pipSteps, pipCount, min, max, step, fillPercent, zeroOffset] ); // Sync fill on programmatic value change useEffect(() => { if (dragging.current || handleDragging.current) return; const percent = max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min))); animate(fillPercent, percent, spring.fast); animate(zeroOffset, value === min ? zeroTarget : 0, spring.fast); }, [value, min, max, variant, fillPercent, zeroOffset, zeroTarget]); const getValueFromX = useCallback( (clientX: number) => { const rect = containerRef.current?.getBoundingClientRect(); if (!rect) return min; const x = clientX - rect.left; const clamped = Math.max(0, Math.min(rect.width, x)); if (variant === "pips") { if (pipCount <= 1) return min; const index = Math.max( 0, Math.min(pipCount - 1, Math.round((clamped / rect.width) * (pipCount - 1))) ); return pipSteps[index]; } else { const raw = min + (clamped / rect.width) * (max - min); const snapped = Math.round((raw - min) / step) * step + min; return Math.max(min, Math.min(max, snapped)); } }, [variant, pipSteps, pipCount, min, max, step] ); const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; e.preventDefault(); dragging.current = true; setIsPressed(true); const newVal = getValueFromX(e.clientX); onChange(newVal); const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min))); animate(fillPercent, newPercent, spring.fast); animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast); (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max] ); const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (!dragging.current) return; const newVal = getValueFromX(e.clientX); onChange(newVal); const newPercent = Math.max(0, Math.min(1, (newVal - min) / (max - min))); if (variant === "scrubber") { fillPercent.set(newPercent); } else { animate(fillPercent, newPercent, spring.fast); } animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast); }, [getValueFromX, onChange, variant, fillPercent, zeroOffset, zeroTarget, min, max] ); const handlePointerUp = useCallback(() => { dragging.current = false; setIsPressed(false); setHoverPreview(null); }, []); // Resize handle drag handlers (direct cursor position) const handleResizePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; e.preventDefault(); e.stopPropagation(); handleDragging.current = true; setIsPressed(true); const newVal = getValueFromX(e.clientX); onChange(newVal); fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min)))); animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast); (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }, [disabled, getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max] ); const handleResizePointerMove = useCallback( (e: React.PointerEvent) => { if (!handleDragging.current) return; const newVal = getValueFromX(e.clientX); onChange(newVal); fillPercent.set(Math.max(0, Math.min(1, (newVal - min) / (max - min)))); animate(zeroOffset, newVal === min ? zeroTarget : 0, spring.fast); }, [getValueFromX, onChange, fillPercent, zeroOffset, zeroTarget, min, max] ); const handleResizePointerUp = useCallback(() => { handleDragging.current = false; setIsPressed(false); setHoverPreview(null); }, []); const handleRadixChange = useCallback( (newValues: number[]) => { onChange(newValues[0]); }, [onChange] ); const isActive = isHovered || isFocused; return (

{ if (!disabled) setIsHovered(true); }} onPointerLeave={() => { if (!disabled) { setIsHovered(false); setHoverPreview(null); } }} onMouseMove={(e) => { if (disabled || dragging.current || handleDragging.current) return; computeHoverPreview(e.clientX); }} > {/* Extended hit area — 8px beyond each edge */}

{/* Hover value tooltip — outside overflow-hidden container */} {hoverPreview && showHoverTooltip && !isPressed && ( {formatValue(hoverPreview.snappedValue)} )} {/* Invisible Radix for keyboard nav + a11y */} { if (e.currentTarget.matches(":focus-visible")) setIsFocused(true); }} onBlur={() => setIsFocused(false)} /> {/* Hover preview */} {/* Pips: dots layer — z-[1] */} {variant === "pips" && ( {pipSteps.map((pipValue) => { const isActivePip = pipValue === value; return (

); })} )} {/* Pips: label + value BG layer — z-[2] (occludes dots behind text) */} {variant === "pips" && (

{label && ( {label} )} {formatValue(value)}

)} {/* Pips: fill — z-[3] */} {variant === "pips" && ( )} {/* Pips: handle line — z-[3] */} {variant === "pips" && ( )} {/* Pips: label + value text layer — z-[4] */} {variant === "pips" && (

{label && ( {label} )} {formatValue(value)}

)} {/* Scrubber: fill */} {variant === "scrubber" && ( )} {/* Scrubber: handle line */} {variant === "scrubber" && ( )} {/* Scrubber: label */} {variant === "scrubber" && label && ( {label} )} {/* Scrubber: flex-1 spacer + value */} {variant === "scrubber" && ( <>

{formatValue(value)} )} {/* Resize handle (scrubber only) */} {variant === "scrubber" && ( )}

); } ); ComfortableSlider.displayName = "SliderComfortable"; // --------------------------------------------------------------------------- // Slider — the public component, riding the size ladder. // // The two historical designs are the two ladder steps: the comfortable // pips/scrubber design renders at the default step, the dense original // design at the compact step. Features only the compact engine implements // (range values, discrete step lists, value display, track styling) force // it regardless of the resolved step, so no capability is ever lost. // --------------------------------------------------------------------------- interface SliderProps extends SliderEngineProps { /** Default-step layout: value pips along the track, or an edge-to-edge * scrubber. Ignored when the compact design renders. */ variant?: "pips" | "scrubber"; /** Pins the slider to one step of the size ladder (see /docs/sizes). * Omitted, it follows the surrounding SizeProvider. */ size?: SizeVariant; } const Slider = forwardRef( ({ size, variant = "pips", ...props }, ref) => { const resolved = useSizeVariant(size); const needsCompactEngine = Array.isArray(props.value) || props.steps !== undefined || props.showSteps !== undefined || props.showValue !== undefined || props.valuePosition !== undefined || props.trackClassName !== undefined || props.trackStyle !== undefined || props.fillClassName !== undefined || props.fillStyle !== undefined || props.hideFill !== undefined || props.thumbColor !== undefined || props.thumbBorderColor !== undefined; if (resolved === "compact" || needsCompactEngine) { return ; } const { value, onChange, min, max, step, label, formatValue, disabled, // Compact-engine-only fields — all undefined on this path (any defined // one would have routed to the compact engine above). steps: _steps, showSteps: _showSteps, showValue: _showValue, valuePosition: _valuePosition, trackClassName: _trackClassName, trackStyle: _trackStyle, fillClassName: _fillClassName, fillStyle: _fillStyle, hideFill: _hideFill, thumbColor: _thumbColor, thumbBorderColor: _thumbBorderColor, ...html } = props; return ( void} min={min} max={max} step={step} variant={variant} label={label} formatValue={formatValue} disabled={disabled} {...(html as Omit)} /> ); } ); Slider.displayName = "Slider"; /** @deprecated The comfortable design is now the ladder's default step — * render (optionally with `variant`) instead. */ const SliderComfortable = ComfortableSlider; export { Slider, SliderComfortable }; export type { SliderProps, SliderValue, ValuePosition, SliderComfortableProps }; 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","@radix-ui/react-slider",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slider","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":"@radix-ui/react-slider"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/springs.json","https://www.fluidfunctionalism.com/r/font-weight.json","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/size-context.json","https://www.fluidfunctionalism.com/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/radix/slider.tsx","content":"$52","type":"registry:ui","target":"components/ui/slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]