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:T1fcc,// Hairline UI · ratio-balancer · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; /* ───────────────────────────────────────────────────────── * RATIO BALANCER: constrained multi-segment resource allocator * * track a single 1px hairline bar dividing 100% across * segments; each segment expands or shrinks with * flex-grow * dividers tactile hairline divider grips; delta-based drag * ensures 1:1 finger tracking with zero initial * jump on mobile and desktop * numbers percentage readouts roll in place via NumberRoll * upon release; DOM text updates immediately while * dragging * touch expanded 36px touch targets allow effortless finger * dragging on phones * * Dividers are accessible separators with ArrowLeft/Right keys. * ───────────────────────────────────────────────────────── */ import * as React from 'react'; import { NumberRoll } from './number-roll'; import { INTERACTION_FOCUS, useInteractionReducedMotion } from './ui-interaction-motion'; import { normalizeRatios, type RatioSegment, useRatioBalancer } from './use-ratio-balancer'; export type { RatioSegment }; export interface RatioBalancerProps extends Omit, 'onChange'> { label?: string; segments?: RatioSegment[]; defaultSegments?: RatioSegment[]; minRatio?: number; disabled?: boolean; onValueChange?: (ratios: number[]) => void; onValueCommit?: (ratios: number[]) => void; } const DEFAULT_SEGMENTS: RatioSegment[] = [ { id: 'inference', label: 'Inference', ratio: 50 }, { id: 'training', label: 'Training', ratio: 30 }, { id: 'cache', label: 'Cache & KV', ratio: 20 }, ]; const COLORS = [ 'bg-primary/10 text-primary border-primary/25', 'bg-foreground/5 text-foreground border-foreground/15', 'bg-muted text-muted-foreground border-border', 'bg-accent text-accent-foreground border-border', 'bg-primary/5 text-foreground border-primary/20', ]; export function RatioBalancer({ label, segments: controlledSegments, defaultSegments = DEFAULT_SEGMENTS, minRatio = 5, disabled = false, onValueChange, onValueCommit, className = '', ...props }: RatioBalancerProps) { const reduced = useInteractionReducedMotion(); const [internalSegments, setInternalSegments] = React.useState(defaultSegments); const segments = controlledSegments ?? internalSegments; const currentRatios = React.useMemo(() => normalizeRatios(segments.map((s) => s.ratio)), [segments]); const handleChange = React.useCallback( (nextRatios: number[]) => { onValueChange?.(nextRatios); }, [onValueChange] ); const handleCommit = React.useCallback( (nextRatios: number[]) => { if (!controlledSegments) { setInternalSegments((prev) => prev.map((seg, i) => ({ ...seg, ratio: nextRatios[i] ?? seg.ratio, })) ); } onValueCommit?.(nextRatios); }, [controlledSegments, onValueCommit] ); const balancer = useRatioBalancer({ segments, minRatio, disabled, reduced, onChange: handleChange, onCommit: handleCommit, }); return (

{/* Label and Total */} {label && (

{label} 100% TOTAL

)} {/* Main Bar Track (Hairline borders only, zero heavy shadows) */}

{segments.map((seg, i) => { const colorClass = COLORS[i % COLORS.length]; const isLast = i === segments.length - 1; const ratio = currentRatios[i] ?? seg.ratio; return ( {/* Segment Cell */}

{ balancer.segmentRefs.current[i] = el; }} className={`relative flex min-w-[42px] flex-col justify-between overflow-hidden rounded-[10px] border px-2.5 py-1.5 transition-[flex-grow] will-change-[flex-grow] ${colorClass}`} style={{ flexGrow: ratio }} >

{seg.label}

{ balancer.readoutRefs.current[i] = el; }} style={{ display: balancer.activeDivider !== null ? 'inline' : 'none' }} className="font-mono text-[13px] font-medium tabular-nums" > {Math.round(ratio)}%

{/* Divider Grip (Expanded 36px touch hit area for mobile fingers) */} {!isLast && (

)} ); })}

{/* Legend & Breakdown */}

Drag dividers to reallocate percentages.

{segments.map((seg) => ( {seg.label}: {Math.round(currentRatios[segments.indexOf(seg)] ?? seg.ratio)}% ))}

); } 53:T1ded,// Hairline UI · ratio-balancer · 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 interface RatioSegment { id: string; label: string; ratio: number; color?: string; } type Options = { segments: RatioSegment[]; minRatio?: number; disabled: boolean; reduced: boolean; onChange?: (ratios: number[]) => void; onCommit?: (ratios: number[]) => void; }; /** Normalizes ratios to sum cleanly to 100. */ export function normalizeRatios(values: number[]): number[] { const sum = values.reduce((a, b) => a + b, 0); if (sum === 0) { const even = 100 / values.length; return values.map(() => Math.round(even)); } let acc = 0; const result = values.map((v, i) => { if (i === values.length - 1) return Math.max(0, 100 - acc); const rounded = Math.round((v / sum) * 100); acc += rounded; return rounded; }); return result; } export function useRatioBalancer(options: Options) { const trackRef = React.useRef(null); const segmentRefs = React.useRef<(HTMLDivElement | null)[]>([]); const readoutRefs = React.useRef<(HTMLSpanElement | null)[]>([]); const dividerRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const optionsRef = React.useRef(options); optionsRef.current = options; const [activeDivider, setActiveDivider] = React.useState(null); const gesture = React.useRef<{ id: number; dividerIndex: number; startX: number; startRatios: number[]; startRatioLeft: number; startRatioRight: number; currentRatios: number[]; trackWidth: number; } | null>(null); const paint = React.useCallback( (ratios: number[], animate: boolean) => { const o = optionsRef.current; ratios.forEach((ratio, i) => { const seg = segmentRefs.current[i]; if (seg) { seg.style.transition = animate && !o.reduced ? `flex-grow 360ms ${EASE_OUT}` : 'none'; seg.style.flexGrow = String(ratio); } const readout = readoutRefs.current[i]; if (readout) { readout.textContent = `${Math.round(ratio)}%`; } }); // Update divider aria attributes let accumulated = 0; ratios.slice(0, -1).forEach((ratio, i) => { accumulated += ratio; const div = dividerRefs.current[i]; if (div) { div.setAttribute('aria-valuenow', String(Math.round(accumulated))); } }); }, [] ); const commit = React.useCallback( (next: number[], animate = true) => { const clean = normalizeRatios(next); paint(clean, animate); optionsRef.current.onChange?.(clean); optionsRef.current.onCommit?.(clean); }, [paint] ); const finish = React.useCallback( (cancelled: boolean) => { const g = gesture.current; if (!g) return; gesture.current = null; setActiveDivider(null); if (cancelled) { paint(g.startRatios, true); optionsRef.current.onChange?.(g.startRatios); } else { commit(g.currentRatios, false); } }, [commit, paint] ); React.useLayoutEffect(() => { if (!gesture.current) { const currentRatios = options.segments.map((s) => s.ratio); paint(currentRatios, true); } }, [options.segments, options.reduced, 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]); const startDrag = React.useCallback( (dividerIndex: number, 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); event.currentTarget.focus({ preventScroll: true }); const currentRatios = optionsRef.current.segments.map((s) => s.ratio); gesture.current = { id: event.pointerId, dividerIndex, startX: event.clientX, startRatios: [...currentRatios], startRatioLeft: currentRatios[dividerIndex] ?? 50, startRatioRight: currentRatios[dividerIndex + 1] ?? 50, currentRatios: [...currentRatios], trackWidth: Math.max(1, rect.width), }; setActiveDivider(dividerIndex); paint(currentRatios, 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 idx = g.dividerIndex; const minRatio = o.minRatio ?? 5; // Delta-based calculation guarantees zero initial jump and 1:1 physical tracking const deltaX = event.clientX - g.startX; const deltaPercent = (deltaX / g.trackWidth) * 100; const pairTotal = g.startRatioLeft + g.startRatioRight; let newLeft = Math.round(g.startRatioLeft + deltaPercent); newLeft = Math.max(minRatio, Math.min(pairTotal - minRatio, newLeft)); const newRight = pairTotal - newLeft; const next = [...g.currentRatios]; next[idx] = newLeft; next[idx + 1] = newRight; if (next[idx] === g.currentRatios[idx] && next[idx + 1] === g.currentRatios[idx + 1]) return; g.currentRatios = next; paint(next, false); o.onChange?.(next); }, [paint] ); const makeKeyHandler = React.useCallback( (dividerIndex: number) => (event: React.KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); finish(true); return; } if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const o = optionsRef.current; const delta = (event.shiftKey ? 5 : 1) * (event.key === 'ArrowRight' ? 1 : -1); const minRatio = o.minRatio ?? 5; const segs = o.segments; const ratios = segs.map((s) => s.ratio); const combined = ratios[dividerIndex] + ratios[dividerIndex + 1]; let newLeft = ratios[dividerIndex] + delta; newLeft = Math.max(minRatio, Math.min(combined - minRatio, newLeft)); const next = [...ratios]; next[dividerIndex] = newLeft; next[dividerIndex + 1] = combined - newLeft; commit(next); }, [commit, finish] ); return { trackRef, segmentRefs, readoutRefs, dividerRefs, activeDivider, commit, getDividerProps: (idx: number) => ({ onPointerDown: (e: React.PointerEvent) => startDrag(idx, 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(idx), }), }; } 54:Tc6c,// Hairline UI · ratio-balancer · 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/ratio-balancer.tsx","content":"$52","type":"registry:component"},{"path":"registry/use-ratio-balancer.ts","content":"$53","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]