64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T3bc5,"use client"; import { useEffect, useId, useRef, useState, type PointerEvent as ReactPointerEvent, } from "react"; // --------------------------------------------------------------------------- // GnomonSet — a time picker as a flat sundial. Two concentric draggable // rings (role="slider" each): the outer sets the hour, the inner sets // minutes in 5-minute detents. A gnomon shadow (a soft blurred wedge) // points at the current hour; its LENGTH is what tells AM from PM (short = // high sun = AM, long = PM), not a separate control — dragging the hour // ring continuously past the 12 mark rolls the hour past 11 -> 12 and the // shadow lengthens, exactly like a real day turning into a real night. // // Dragging is the animation hot path: pointermove accumulates a float hour // (or minute) in a ref and writes the wedge/tick/readout DOM directly — // no React state per pointer event. The drag's FINAL value is the only // thing that ever reaches React state (on pointerup), so a keyboard arrow // press (which legitimately re-renders from state) can never fight a // stale mid-drag DOM write. // --------------------------------------------------------------------------- export interface GnomonSetProps { /** 0-23, controlled. */ hour?: number; /** 0-59, controlled — only 5-minute values are reachable via the UI. */ minute?: number; /** uncontrolled initial hour, 0-23 */ defaultHour?: number; /** uncontrolled initial minute, 0-59 */ defaultMinute?: number; /** called with the new hour and minute on any change */ onChange?: (hour: number, minute: number) => void; /** extra classes merged onto the rendered root element */ className?: string; } const VIEW = 160; const C = 80; const R_OUT_TICK_OUT = 66; const R_OUT_TICK_IN = 59; const R_NUMERAL = 48; const R_OUT_HIT = 62; const OUT_BAND = 18; const R_IN_TICK_OUT = 36; const R_IN_TICK_IN = 31; const R_IN_HIT = 34; const IN_BAND = 12; const SHADOW_AM = 32; const SHADOW_PM = 58; const WEDGE_HALF_DEG = 6; function toRad(deg: number): number { return (deg * Math.PI) / 180; } // Rounded to a fixed precision: server (Node) and client (browser) trig can // differ in the last bit or two, which is enough to fail hydration when the // raw float is serialized into the SSR-ed markup. A few decimals of pixel // precision is plenty for a 160-unit dial and makes both renders identical. function round(n: number): number { return Math.round(n * 1000) / 1000; } function pointAt(angleDeg: number, r: number): [number, number] { const rad = toRad(angleDeg); return [round(C + r * Math.cos(rad)), round(C + r * Math.sin(rad))]; } function hourAngle(hour24: number): number { return -90 + (hour24 % 12) * 30; } function minuteAngle(minute: number): number { return -90 + (minute / 5) * 30; } function shortestDelta(a: number, b: number): number { return ((((a - b + 540) % 360) + 360) % 360) - 180; } function wrap(n: number, mod: number): number { return ((n % mod) + mod) % mod; } function wedgePoints(angleDeg: number, length: number): string { const [tx, ty] = pointAt(angleDeg, length); const [lx, ly] = pointAt(angleDeg - WEDGE_HALF_DEG, length * 0.86); const [rx, ry] = pointAt(angleDeg + WEDGE_HALF_DEG, length * 0.86); return `${C},${C} ${lx},${ly} ${tx},${ty} ${rx},${ry}`; } function formatReadout(hour24: number, minute: number): string { const h12 = hour24 % 12 === 0 ? 12 : hour24 % 12; const mm = String(minute).padStart(2, "0"); const meridiem = hour24 < 12 ? "AM" : "PM"; return `${String(h12).padStart(2, "0")}:${mm} ${meridiem}`; } export function GnomonSet({ hour, minute, defaultHour = 9, defaultMinute = 0, onChange, className = "", }: GnomonSetProps) { const autoId = useId(); const fid = `gs-blur-${autoId.replace(/:/g, "")}`; const isControlled = hour !== undefined && minute !== undefined; const [uHour, setUHour] = useState(defaultHour); const [uMinute, setUMinute] = useState(defaultMinute); const curHour = isControlled ? hour! : uHour; const curMinute = isControlled ? minute! : uMinute; const wedgeRef = useRef(null); const meridiemRef = useRef(null); const readoutRef = useRef(null); const hourHandleRef = useRef(null); const minuteHandleRef = useRef(null); const outerRingRef = useRef(null); const innerRingRef = useRef(null); const hoverTickRef = useRef(null); const svgRef = useRef(null); const dragHourFloat = useRef(curHour); const dragMinuteFloat = useRef(curMinute); const prevAngleRef = useRef(0); const draggingRef = useRef<"hour" | "minute" | null>(null); const [announce, setAnnounce] = useState(""); const paint = (h: number, m: number) => { const hAngle = hourAngle(h); const length = h < 12 ? SHADOW_AM : SHADOW_PM; wedgeRef.current?.setAttribute("points", wedgePoints(hAngle, length)); const [hx, hy] = pointAt(hAngle, R_OUT_HIT); hourHandleRef.current?.setAttribute("cx", String(hx)); hourHandleRef.current?.setAttribute("cy", String(hy)); const mAngle = minuteAngle(m); const [mx, my] = pointAt(mAngle, R_IN_HIT); minuteHandleRef.current?.setAttribute("cx", String(mx)); minuteHandleRef.current?.setAttribute("cy", String(my)); if (meridiemRef.current) meridiemRef.current.textContent = h < 12 ? "AM" : "PM"; if (readoutRef.current) readoutRef.current.textContent = formatReadout(h, m); outerRingRef.current?.setAttribute("aria-valuenow", String(h)); outerRingRef.current?.setAttribute( "aria-valuetext", `${h % 12 === 0 ? 12 : h % 12} o'clock ${h < 12 ? "AM" : "PM"}` ); innerRingRef.current?.setAttribute("aria-valuenow", String(m)); innerRingRef.current?.setAttribute("aria-valuetext", `${m} minutes`); }; useEffect(() => paint(curHour, curMinute), [curHour, curMinute]); const commit = (h: number, m: number) => { if (!isControlled) { setUHour(h); setUMinute(m); } onChange?.(h, m); setAnnounce(formatReadout(h, m)); }; // One getBoundingClientRect() per event, in SVG-local (viewBox) coordinates. const toLocal = (clientX: number, clientY: number): { x: number; y: number } | null => { const svg = svgRef.current; if (!svg) return null; const rect = svg.getBoundingClientRect(); const scale = VIEW / rect.width; return { x: (clientX - rect.left) * scale, y: (clientY - rect.top) * scale }; }; const angleFromEvent = (e: PointerEvent | ReactPointerEvent) => { const p = toLocal(e.clientX, e.clientY); if (!p) return 0; return (Math.atan2(p.y - C, p.x - C) * 180) / Math.PI; }; const startDrag = (which: "hour" | "minute") => (e: ReactPointerEvent) => { (e.target as Element).setPointerCapture(e.pointerId); draggingRef.current = which; dragHourFloat.current = curHour; dragMinuteFloat.current = curMinute; prevAngleRef.current = angleFromEvent(e); e.preventDefault(); }; useEffect(() => { const onMove = (e: PointerEvent) => { const which = draggingRef.current; if (!which) return; const angle = angleFromEvent(e); const delta = shortestDelta(angle, prevAngleRef.current); prevAngleRef.current = angle; if (which === "hour") { dragHourFloat.current += delta / 30; const h = wrap(Math.round(dragHourFloat.current), 24); paint(h, Math.round(dragMinuteFloat.current / 5) * 5); } else { dragMinuteFloat.current += (delta / 30) * 5; const m = wrap(Math.round(dragMinuteFloat.current / 5) * 5, 60); paint(wrap(Math.round(dragHourFloat.current), 24), m); } }; const onUp = () => { const which = draggingRef.current; if (!which) return; draggingRef.current = null; const h = wrap(Math.round(dragHourFloat.current), 24); const m = wrap(Math.round(dragMinuteFloat.current / 5) * 5, 60); commit(h, m); }; window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); return () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [isControlled]); const onHoverMove = (e: ReactPointerEvent) => { if (e.pointerType === "touch") return; const p = toLocal(e.clientX, e.clientY); if (!p) return; const angle = (Math.atan2(p.y - C, p.x - C) * 180) / Math.PI; const dist = Math.hypot(p.x - C, p.y - C); const [x1, y1] = pointAt(angle, dist - 4); const [x2, y2] = pointAt(angle, dist + 6); const tick = hoverTickRef.current; if (tick) { tick.setAttribute("x1", String(x1)); tick.setAttribute("y1", String(y1)); tick.setAttribute("x2", String(x2)); tick.setAttribute("y2", String(y2)); tick.style.opacity = "1"; } }; const onHoverLeave = () => { if (hoverTickRef.current) hoverTickRef.current.style.opacity = "0"; }; const stepHour = (delta: number) => { const h = wrap(curHour + delta, 24); commit(h, curMinute); }; const stepMinute = (delta: number) => { const m = wrap(curMinute + delta * 5, 60); commit(curHour, m); }; return (

{announce} {formatReadout(curHour, curMinute)}

); } const CSS = ` .ns-gs-ring { cursor: pointer; outline: none; touch-action: none; } .ns-gs-ring:focus-visible { stroke: color-mix(in srgb, var(--ns-accent) 22%, transparent); } .ns-gs-wedge { transition: opacity 150ms ease-out; } .ns-gs-dial:hover .ns-gs-wedge { opacity: 0.42; } .ns-gs-hovertick { transition: opacity 150ms ease-out; } @media (prefers-reduced-motion: reduce) { .ns-gs-wedge, .ns-gs-hovertick { transition: none; } } `; 63:["$","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,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/time-picker-sundial/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/time-picker-sundial.tsx"}],"className":"h-[70svh] min-h-80"}]]}]