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:T2071,"use client"; import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from "react"; export interface CometDialProps { min?: number; max?: number; step?: number; /** Controlled value. */ value?: number; /** Initial value when uncontrolled. */ defaultValue?: number; /** Called with the new value while dragging or using the keyboard. */ onChange?: (value: number) => void; /** Comet and arc color. */ color?: string; /** Diameter in px. */ size?: number; /** Label under the readout; also the accessible name. */ label?: string; /** Suffix after the number, e.g. "%". */ unit?: string; disabled?: boolean; className?: string; } const START = 135; // deg, bottom-left const SWEEP = 270; const R = 78; const TAIL = 18; const TICKS = 31; const point = (f: number, r = R) => { const a = ((START + f * SWEEP) * Math.PI) / 180; // Rounded so server and client trig agree (avoids hydration mismatches). const q = (n: number) => Math.round(n * 1000) / 1000; return [q(100 + Math.cos(a) * r), q(100 + Math.sin(a) * r)] as const; }; const [ax, ay] = point(0); const [bx, by] = point(1); const ARC = `M${ax} ${ay}A${R} ${R} 0 1 1 ${bx} ${by}`; export function CometDial({ min = 0, max = 100, step = 1, value, defaultValue = 40, onChange, color = "#38bdf8", size = 220, label = "Volume", unit = "%", disabled, className, }: CometDialProps) { const [inner, setInner] = useState(defaultValue); const v = Math.min(max, Math.max(min, value ?? inner)); const frac = (x: number) => (max > min ? (x - min) / (max - min) : 0); const root = useRef(null); const fill = useRef(null); const head = useRef(null); const tail = useRef<(SVGCircleElement | null)[]>([]); const st = useRef({ cur: -1, target: 0, trail: [] as number[], raf: 0, drag: false, calm: false }); const draw = () => { const s = st.current; const [hx, hy] = point(s.cur); head.current?.setAttribute("transform", `translate(${hx} ${hy})`); if (fill.current) fill.current.style.strokeDashoffset = `${1 - s.cur}`; tail.current.forEach((c, i) => { if (!c) return; const [x, y] = point(s.trail[i] ?? s.cur); c.setAttribute("cx", `${x}`); c.setAttribute("cy", `${y}`); }); }; const tick = () => { const s = st.current; s.cur += (s.target - s.cur) * (s.calm ? 1 : 0.2); s.trail.unshift(s.cur); s.trail.length = TAIL; draw(); const settled = Math.abs(s.target - s.cur) < 1e-4 && s.trail.every((t) => Math.abs(t - s.cur) < 1e-3); s.raf = settled ? 0 : requestAnimationFrame(tick); }; const target = v === undefined ? 0 : frac(v); useEffect(() => { const s = st.current; s.calm = window.matchMedia("(prefers-reduced-motion: reduce)").matches; s.target = target; if (s.cur < 0) { s.cur = target; s.trail = Array(TAIL).fill(target); draw(); return; } if (!s.raf) s.raf = requestAnimationFrame(tick); // draw/tick only touch refs // eslint-disable-next-line react-hooks/exhaustive-deps }, [target]); useEffect(() => { const s = st.current; return () => cancelAnimationFrame(s.raf); }, []); const commit = (next: number) => { const snapped = Math.min(max, Math.max(min, min + Math.round((next - min) / step) * step)); const clean = Number(snapped.toFixed(6)); if (clean === v) return; setInner(clean); onChange?.(clean); }; const fromPointer = (e: PointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); const a = (Math.atan2(e.clientY - (r.top + r.height / 2), e.clientX - (r.left + r.width / 2)) * 180) / Math.PI; let rel = (a - START + 720) % 360; if (rel > SWEEP) rel = rel - SWEEP < (360 - SWEEP) / 2 ? SWEEP : 0; let f = rel / SWEEP; // Don't wrap from max to min (or back) through the dead zone while dragging. if (st.current.drag && Math.abs(f - frac(v)) > 0.5) f = frac(v) > 0.5 ? 1 : 0; commit(min + f * (max - min)); }; const onKey = (e: KeyboardEvent) => { const big = step * Math.max(1, Math.round((max - min) / step / 10)); const map: Record = { ArrowRight: v + step, ArrowUp: v + step, ArrowLeft: v - step, ArrowDown: v - step, PageUp: v + big, PageDown: v - big, Home: min, End: max, }; if (!(e.key in map) || disabled) return; e.preventDefault(); commit(map[e.key]); }; const lit = frac(v); const shown = Number.isInteger(step) ? Math.round(v) : v.toFixed(String(step).split(".")[1]?.length ?? 1); return (

{ if (disabled || e.button !== 0) return; e.currentTarget.setPointerCapture(e.pointerId); st.current.drag = false; fromPointer(e); st.current.drag = true; }} onPointerMove={(e) => { if (st.current.drag) fromPointer(e); }} onPointerUp={() => (st.current.drag = false)} onPointerCancel={() => (st.current.drag = false)} className={`group relative touch-none select-none rounded-full outline-none focus-visible:ring-[3px] focus-visible:ring-ring/60 focus-visible:ring-offset-4 focus-visible:ring-offset-background ${ disabled ? "cursor-not-allowed opacity-50" : "cursor-grab active:cursor-grabbing" } ${className ?? ""}`} style={{ width: size, height: size }} >

{shown} {unit}

{label}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/ui/comet-dial.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]