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:T3111,// Hairline UI · range-ruler · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; /* ───────────────────────────────────────────────────────── * RANGE RULER: dual needles on a graduated hairline ruler * * ruler an axis with 1px SVG tick marks; major ticks * mark intervals, minor ticks subdivide steps * needles two tactile hairline sliders with 1px indicators; * needles glide with zero edge-jumping or layout thrash * repulsion drag the lower needle into the upper one and it * pushes the upper needle forward instead of * clipping; drag backwards and it pushes down * badges floating metric pills roll with NumberRoll; * when needles get within 48px, badges merge into * a single span readout * mobile expanded touch targets and track-wide gesture * capture allow effortless finger manipulation * * Both needles are accessible sliders with full arrow, Home, * End, and Page keys. * ───────────────────────────────────────────────────────── */ import * as React from 'react'; import { NumberRoll } from './number-roll'; import { INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { snapRulerValue, useRangeRuler } from './use-range-ruler'; export type RangeValue = [number, number]; export interface RangeRulerProps extends Omit, 'onChange' | 'defaultValue'> { label?: string; value?: RangeValue; defaultValue?: RangeValue; min?: number; max?: number; step?: number; minDistance?: number; unit?: string; disabled?: boolean; onValueChange?: (value: RangeValue) => void; onValueCommit?: (value: RangeValue) => void; format?: Intl.NumberFormatOptions; locales?: string | string[]; } export function RangeRuler({ label, value, defaultValue = [20, 80], min = 0, max = 100, step = 1, minDistance = 0, unit = '', disabled = false, onValueChange, onValueCommit, format, locales, className = '', ...props }: RangeRulerProps) { const reduced = useInteractionReducedMotion(); const lower = Number.isFinite(min) ? min : 0; const upper = Number.isFinite(max) && max > lower ? max : lower + 100; const increment = Number.isFinite(step) && step > 0 ? step : 1; const [own, setOwn] = React.useState(defaultValue); const currentVal = value ?? own; const safeVal: RangeValue = React.useMemo(() => { const l = snapRulerValue(currentVal[0], lower, upper - minDistance, increment); const u = snapRulerValue(currentVal[1], l + minDistance, upper, increment); return [l, u]; }, [currentVal, lower, upper, minDistance, increment]); const decimals = Math.min(4, Math.max(0, (String(increment).split('.')[1] ?? '').length)); const formatNumber = React.useCallback( (n: number) => { const formatted = n.toFixed(decimals); return unit ? `${formatted} ${unit}` : formatted; }, [decimals, unit] ); const formatAria = React.useCallback( (n: number) => `${n.toFixed(decimals)}${unit ? ` ${unit}` : ''}`, [decimals, unit] ); const handleChange = React.useCallback( (next: RangeValue) => onValueChange?.(next), [onValueChange] ); const handleCommit = React.useCallback( (next: RangeValue) => { if (value === undefined) setOwn(next); onValueCommit?.(next); }, [value, onValueCommit] ); const ruler = useRangeRuler({ value: safeVal, min: lower, max: upper, step: increment, minDistance, disabled, reduced, onChange: handleChange, onCommit: handleCommit, format: formatAria, formatNumber, }); const rangeSpan = Math.max(0.00001, upper - lower); const tickCount = Math.min(81, Math.max(11, Math.round(rangeSpan / increment) + 1)); const majorInterval = Math.max(1, Math.round(tickCount / 8)); const ticks = React.useMemo(() => { return Array.from({ length: tickCount }, (_, i) => { const fraction = i / (tickCount - 1); const isMajor = i % majorInterval === 0 || i === tickCount - 1; return { fraction, isMajor, key: i }; }); }, [tickCount, majorInterval]); const lowerHint = React.useId(); const upperHint = React.useId(); const lowerPercent = Math.max(0, Math.min(100, ((safeVal[0] - lower) / rangeSpan) * 100)); const upperPercent = Math.max(0, Math.min(100, ((safeVal[1] - lower) / rangeSpan) * 100)); return (

{label && (

{label} {formatNumber(safeVal[0])} — {formatNumber(safeVal[1])}

)} {/* Floating Readout Badges (No heavy shadows, pure hairline borders) */}

{ruler.isMerged ? (

{formatNumber(safeVal[0])} – {formatNumber(safeVal[1])} – {unit && {unit}}

) : (

{formatNumber(safeVal[0])} {unit && {unit}}

{formatNumber(safeVal[1])} {unit && {unit}}

)}

{/* The Track & Graduated Hairline Ruler */}

{/* SVG Graduated Ruler Ticks */} {/* Track gesture container (allows drag anywhere on track) */}

{/* Active Highlight Band */} {/* Lower / Upper Bound Labels */}

Adjust minimum. Left arrow decreases, right arrow increases. Shift increases step by 10. Home sets to minimum, End to maximum.

Adjust maximum. Left arrow decreases, right arrow increases. Shift increases step by 10. Home sets to minimum, End to maximum.

); } 53:T3414,// Hairline UI · range-ruler · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { EASE_OUT } from './ui-interaction-motion'; export function snapRulerValue(value: number, min: number, max: number, step: number) { if (!Number.isFinite(value) || value <= min) return min; if (value >= max) return max; const snapped = min + Math.round((value - min) / step) * step; return Number(Math.max(min, Math.min(max, snapped)).toFixed(6)); } type Range = [number, number]; type RangeRulerOptions = { value: Range; min: number; max: number; step: number; minDistance?: number; disabled: boolean; reduced: boolean; onChange?: (value: Range) => void; onCommit?: (value: Range) => void; format: (value: number) => string; formatNumber: (value: number) => string; }; /** High-performance gesture controller for a dual-needle graduated ruler. */ export function useRangeRuler(options: RangeRulerOptions) { const trackRef = React.useRef(null); const lowerThumbRef = React.useRef(null); const upperThumbRef = React.useRef(null); const highlightRef = React.useRef(null); const lowerReadoutRef = React.useRef(null); const upperReadoutRef = React.useRef(null); const mergedReadoutRef = React.useRef(null); const optionsRef = React.useRef(options); optionsRef.current = options; const [activeThumb, setActiveThumb] = React.useState<'lower' | 'upper' | null>(null); const [isMerged, setIsMerged] = React.useState(false); // Active drag state kept strictly in refs to prevent layout thrash and React re-renders. const gesture = React.useRef<{ id: number; thumb: 'lower' | 'upper'; startVal: Range; currentVal: Range; trackLeft: number; trackWidth: number; } | null>(null); const getRatio = React.useCallback( (val: number) => { const { min, max } = optionsRef.current; const span = Math.max(0.00001, max - min); return Math.max(0, Math.min(1, (val - min) / span)); }, [] ); const paint = React.useCallback( (range: Range, animate: boolean) => { const o = optionsRef.current; const [lower, upper] = range; const lowerRatio = getRatio(lower); const upperRatio = getRatio(upper); const lowerPct = (lowerRatio * 100).toFixed(4); const upperPct = (upperRatio * 100).toFixed(4); const spanPct = Math.max(0, (upperRatio - lowerRatio) * 100).toFixed(4); const transition = animate && !o.reduced ? `left 360ms ${EASE_OUT}` : 'none'; const barTransition = animate && !o.reduced ? `left 360ms ${EASE_OUT}, width 360ms ${EASE_OUT}` : 'none'; if (lowerThumbRef.current) { lowerThumbRef.current.style.transition = transition; lowerThumbRef.current.style.left = `${lowerPct}%`; lowerThumbRef.current.setAttribute('aria-valuenow', String(lower)); lowerThumbRef.current.setAttribute('aria-valuetext', o.format(lower)); } if (upperThumbRef.current) { upperThumbRef.current.style.transition = transition; upperThumbRef.current.style.left = `${upperPct}%`; upperThumbRef.current.setAttribute('aria-valuenow', String(upper)); upperThumbRef.current.setAttribute('aria-valuetext', o.format(upper)); } if (highlightRef.current) { highlightRef.current.style.transition = barTransition; highlightRef.current.style.left = `${lowerPct}%`; highlightRef.current.style.width = `${spanPct}%`; } if (lowerReadoutRef.current) lowerReadoutRef.current.textContent = o.formatNumber(lower); if (upperReadoutRef.current) upperReadoutRef.current.textContent = o.formatNumber(upper); if (mergedReadoutRef.current) { mergedReadoutRef.current.textContent = lower === upper ? o.formatNumber(lower) : `${o.formatNumber(lower)} – ${o.formatNumber(upper)}`; } const track = trackRef.current; const trackWidth = track ? track.offsetWidth : 400; const pixelGap = (upperRatio - lowerRatio) * trackWidth; setIsMerged(pixelGap < 48); }, [getRatio] ); const commit = React.useCallback( (next: Range, animate = true) => { const o = optionsRef.current; const dist = o.minDistance ?? 0; let lower = snapRulerValue(next[0], o.min, o.max - dist, o.step); let upper = snapRulerValue(next[1], o.min + dist, o.max, o.step); if (lower > upper - dist) { if (next[0] > o.value[0]) upper = Math.min(o.max, lower + dist); else lower = Math.max(o.min, upper - dist); } const clean: Range = [lower, upper]; paint(clean, animate); o.onChange?.(clean); o.onCommit?.(clean); }, [paint] ); const finish = React.useCallback( (cancelled: boolean) => { const g = gesture.current; if (!g) return; gesture.current = null; setActiveThumb(null); if (cancelled) { paint(g.startVal, true); optionsRef.current.onChange?.(g.startVal); } else { commit(g.currentVal, false); } }, [commit, paint] ); React.useLayoutEffect(() => { if (!gesture.current) paint(options.value, true); }, [options.value, options.min, options.max, options.reduced, paint]); React.useEffect(() => { const handleResize = () => { if (!gesture.current) paint(optionsRef.current.value, false); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, [paint]); React.useEffect(() => { const interrupted = () => finish(true); const hidden = () => { if (document.hidden) interrupted(); }; window.addEventListener('blur', interrupted); document.addEventListener('visibilitychange', hidden); return () => { window.removeEventListener('blur', interrupted); document.removeEventListener('visibilitychange', hidden); }; }, [finish]); React.useEffect(() => { if (options.disabled) finish(true); }, [options.disabled, finish]); const startDrag = React.useCallback( (thumb: 'lower' | 'upper', event: React.PointerEvent) => { if (event.button !== 0 || !event.isPrimary || optionsRef.current.disabled) return; const track = trackRef.current; if (!track) return; const rect = track.getBoundingClientRect(); event.currentTarget.setPointerCapture(event.pointerId); const targetEl = thumb === 'lower' ? lowerThumbRef.current : upperThumbRef.current; targetEl?.focus({ preventScroll: true }); gesture.current = { id: event.pointerId, thumb, startVal: [...optionsRef.current.value] as Range, currentVal: [...optionsRef.current.value] as Range, trackLeft: rect.left, trackWidth: Math.max(1, rect.width), }; setActiveThumb(thumb); paint(optionsRef.current.value, false); }, [paint] ); const onPointerMove = React.useCallback( (event: React.PointerEvent) => { const g = gesture.current; const o = optionsRef.current; if (!g || g.id !== event.pointerId) return; const clientX = event.clientX; const fraction = Math.max(0, Math.min(1, (clientX - g.trackLeft) / g.trackWidth)); const targetVal = snapRulerValue(o.min + fraction * (o.max - o.min), o.min, o.max, o.step); const dist = o.minDistance ?? 0; let [lower, upper] = g.currentVal; if (g.thumb === 'lower') { lower = Math.min(o.max - dist, targetVal); // Repulsion: lower pushes upper forward if (lower > upper - dist) { upper = Math.min(o.max, lower + dist); } } else { upper = Math.max(o.min + dist, targetVal); // Repulsion: upper pushes lower backward if (upper < lower + dist) { lower = Math.max(o.min, upper - dist); } } if (lower === g.currentVal[0] && upper === g.currentVal[1]) return; g.currentVal = [lower, upper]; paint([lower, upper], false); o.onChange?.([lower, upper]); }, [paint] ); const onTrackPointerDown = React.useCallback( (event: React.PointerEvent) => { if (event.button !== 0 || !event.isPrimary || optionsRef.current.disabled) return; // If clicking directly on a thumb button, let the thumb handler handle it if ((event.target as HTMLElement).closest('button')) return; const track = trackRef.current; if (!track) return; const rect = track.getBoundingClientRect(); const fraction = Math.max(0, Math.min(1, (event.clientX - rect.left) / Math.max(1, rect.width))); const clickVal = optionsRef.current.min + fraction * (optionsRef.current.max - optionsRef.current.min); const [lower, upper] = optionsRef.current.value; const closer: 'lower' | 'upper' = Math.abs(clickVal - lower) <= Math.abs(clickVal - upper) ? 'lower' : 'upper'; startDrag(closer, event); // Immediately process movement to click position const targetVal = snapRulerValue(clickVal, optionsRef.current.min, optionsRef.current.max, optionsRef.current.step); const dist = optionsRef.current.minDistance ?? 0; let nextLower = lower; let nextUpper = upper; if (closer === 'lower') { nextLower = Math.min(optionsRef.current.max - dist, targetVal); if (nextLower > nextUpper - dist) nextUpper = Math.min(optionsRef.current.max, nextLower + dist); } else { nextUpper = Math.max(optionsRef.current.min + dist, targetVal); if (nextUpper < nextLower + dist) nextLower = Math.max(optionsRef.current.min, nextUpper - dist); } if (gesture.current) { gesture.current.currentVal = [nextLower, nextUpper]; paint([nextLower, nextUpper], false); optionsRef.current.onChange?.([nextLower, nextUpper]); } }, [startDrag, paint] ); const makeKeyHandler = React.useCallback( (thumb: 'lower' | 'upper') => (event: React.KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); finish(true); return; } const o = optionsRef.current; if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const isUp = ['ArrowRight', 'ArrowUp', 'PageUp'].includes(event.key); const mult = event.key.startsWith('Page') || event.shiftKey ? 10 : 1; const delta = o.step * mult * (isUp ? 1 : -1); const dist = o.minDistance ?? 0; let [lower, upper] = o.value; if (thumb === 'lower') { if (event.key === 'Home') lower = o.min; else if (event.key === 'End') lower = upper - dist; else lower = Math.max(o.min, Math.min(o.max - dist, lower + delta)); if (lower > upper - dist) upper = Math.min(o.max, lower + dist); } else { if (event.key === 'Home') upper = lower + dist; else if (event.key === 'End') upper = o.max; else upper = Math.max(o.min + dist, Math.min(o.max, upper + delta)); if (upper < lower + dist) lower = Math.max(o.min, upper - dist); } commit([lower, upper]); }, [commit, finish] ); return { trackRef, lowerThumbRef, upperThumbRef, highlightRef, lowerReadoutRef, upperReadoutRef, mergedReadoutRef, activeThumb, isMerged, commit, trackHandlers: { onPointerDown: onTrackPointerDown, onPointerMove, onPointerUp: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(false); }, onPointerCancel: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, }, lowerHandlers: { onPointerDown: (e: React.PointerEvent) => startDrag('lower', e), onPointerMove, onPointerUp: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(false); }, onPointerCancel: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onLostPointerCapture: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onBlur: () => finish(true), onKeyDown: makeKeyHandler('lower'), }, upperHandlers: { onPointerDown: (e: React.PointerEvent) => startDrag('upper', e), onPointerMove, onPointerUp: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(false); }, onPointerCancel: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onLostPointerCapture: (e: React.PointerEvent) => { if (e.pointerId === gesture.current?.id) finish(true); }, onBlur: () => finish(true), onKeyDown: makeKeyHandler('upper'), }, }; } 54:Tc69,// Hairline UI · range-ruler · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; export const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; export const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)'; export const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'; const query = '(prefers-reduced-motion: reduce)'; const subscribe = (notify: () => void) => { const media = window.matchMedia(query); media.addEventListener('change', notify); return () => media.removeEventListener('change', notify); }; export const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); export function useInteractionActivity() { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(el); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return { ref, active: visible && !hidden }; } export function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties { return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` }; } /** Sample recent movement rather than averaging a long drag and losing its release velocity. */ export type PointerSample = { x: number; time: number }; export function samplePointer(samples: PointerSample[], x: number, time: number) { samples.push({ x, time }); while (samples.length > 2 && time - samples[0].time > 100) samples.shift(); } export function releaseVelocity(samples: PointerSample[], now: number) { if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0; const first = samples[0], last = samples[samples.length - 1]; return (last.x - first.x) / Math.max(1, last.time - first.time); } /** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */ export function springFrames(from: number, to: number, velocity = 0, duration = 520) { const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping); const displacement = from - to; const coefficient = (velocity * 1000 + damping * omega * displacement) / damped; return Array.from({ length: 33 }, (_, i) => { const t = (i / 32) * duration / 1000; const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t)); return { value: i === 32 ? to : value, offset: i / 32 }; }); } 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":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/range-ruler.tsx","content":"$52","type":"registry:component"},{"path":"registry/use-range-ruler.ts","content":"$53","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]