61: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"] 62: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"] 63:T39a4,"use client" import * as React from "react" import { useReducedMotion, useSpring } from "framer-motion" import { cn } from "@/lib/utils" export interface LensClockProps { /** IANA time zone such as "America/Los_Angeles". Omit to use the viewer's own zone. */ timeZone?: string /** Fixed moment to display. Omit to keep the clock live, read from the viewer's device clock. */ time?: Date /** Force a palette. Omit to follow the surrounding `dark` class. */ theme?: "light" | "dark" className?: string } // Geometry in card units (the card is a 100 x 100 viewBox). const TICK_OUTER = 54 const MINOR_INNER = 50.5 const HOUR_INNER = 42 const LABEL_RADIUS = 61 const HAND_LENGTH = 33 const MINUTE_LENGTH = 48 const SECOND_LENGTH = 52 // How far the dial centre sits behind the card centre, opposite the hand. const PAN_DISTANCE = 24 const LIGHT_VARS = "[--lc-accent:#ff8a00] [--lc-lume:#62c42a] [--lc-card-from:#f6f6f8] [--lc-card-to:#e2e1e6] [--lc-edge:rgba(255,255,255,0.9)] [--lc-tick:#a3a2a8] [--lc-label:#8e8d93] [--lc-spoke:#6f6e76] [--lc-hand:#fbfbfc] [--lc-hand-edge:rgba(0,0,0,0.06)] [--lc-pivot-from:#ffffff] [--lc-pivot-to:#e6e5ea] [--lc-sleeve:#ffffff]" const DARK_VARS = "[--lc-accent:#ff9f0a] [--lc-lume:#6fd136] [--lc-card-from:#262628] [--lc-card-to:#141415] [--lc-edge:rgba(255,255,255,0.07)] [--lc-tick:#76767b] [--lc-label:#808086] [--lc-spoke:#a2a2a8] [--lc-hand:#46464a] [--lc-hand-edge:rgba(255,255,255,0.06)] [--lc-pivot-from:#4a4a4d] [--lc-pivot-to:#2a2a2c] [--lc-sleeve:#38383b]" // Written out in full so Tailwind can detect every class. const AUTO_DARK_VARS = "dark:[--lc-accent:#ff9f0a] dark:[--lc-lume:#6fd136] dark:[--lc-card-from:#262628] dark:[--lc-card-to:#141415] dark:[--lc-edge:rgba(255,255,255,0.07)] dark:[--lc-tick:#76767b] dark:[--lc-label:#808086] dark:[--lc-spoke:#a2a2a8] dark:[--lc-hand:#46464a] dark:[--lc-hand-edge:rgba(255,255,255,0.06)] dark:[--lc-pivot-from:#4a4a4d] dark:[--lc-pivot-to:#2a2a2c] dark:[--lc-sleeve:#38383b]" const TIME_FORMAT: Intl.DateTimeFormatOptions = { hour: "numeric", minute: "numeric", second: "numeric", hourCycle: "h23", } function createFormatter(timeZone?: string) { try { return new Intl.DateTimeFormat("en-US", { ...TIME_FORMAT, timeZone }) } catch { // Unknown zone: fall back to the viewer's own. return new Intl.DateTimeFormat("en-US", TIME_FORMAT) } } function readTime(date: Date, formatter: Intl.DateTimeFormat) { const parts = formatter.formatToParts(date) const get = (type: Intl.DateTimeFormatPartTypes) => Number(parts.find((part) => part.type === type)?.value ?? 0) return { hours: get("hour") % 24, minutes: get("minute"), seconds: get("second") } } type SpringOptions = Parameters[1] // Springs toward an unwrapped angle so 59 -> 0 keeps moving forward. function useAngle(target: number | null, reduceMotion: boolean, options: SpringOptions) { const angle = useSpring(0, options) const unwrapped = React.useRef(null) React.useEffect(() => { if (target === null) return const previous = unwrapped.current const next = previous === null ? target : previous + ((((target - previous) % 360) + 540) % 360) - 180 unwrapped.current = next if (previous === null || reduceMotion) angle.jump(next) else angle.set(next) }, [target, reduceMotion, angle]) return angle } function useNow(fixed?: Date) { const [now, setNow] = React.useState(null) React.useEffect(() => { if (fixed) return const tick = () => setNow(new Date()) tick() let interval: ReturnType | undefined // Align updates with the wall-clock second. const timeout = setTimeout(() => { tick() interval = setInterval(tick, 1000) }, 1000 - (Date.now() % 1000)) return () => { clearTimeout(timeout) if (interval) clearInterval(interval) } }, [fixed]) return fixed ?? now } function pad(value: number) { return value.toString().padStart(2, "0") } export function LensClock({ timeZone, time, theme, className }: LensClockProps) { const now = useNow(time) const formatter = React.useMemo(() => createFormatter(timeZone), [timeZone]) const parts = now ? readTime(now, formatter) : null const reduceMotion = useReducedMotion() ?? false const id = React.useId().replace(/:/g, "") const dialRef = React.useRef(null) const hourRef = React.useRef(null) const minuteRef = React.useRef(null) const secondRef = React.useRef(null) const ready = now !== null const live = !time const target = parts ? ((parts.hours % 12) + parts.minutes / 60 + parts.seconds / 3600) * 30 : null // A fixed `time` springs into place; the live clock is drawn per frame below. const hourAngle = useAngle(live ? null : target, reduceMotion, { stiffness: 70, damping: 18 }) const minuteAngle = useAngle( !live && parts ? (parts.minutes + parts.seconds / 60) * 6 : null, reduceMotion, { stiffness: 90, damping: 18 } ) const secondAngle = useAngle(!live && parts ? parts.seconds * 6 : null, reduceMotion, { stiffness: 90, damping: 18, }) const draw = React.useCallback((hour: number, minute: number, second: number) => { const rad = (hour * Math.PI) / 180 const cx = 50 - PAN_DISTANCE * Math.sin(rad) const cy = 50 + PAN_DISTANCE * Math.cos(rad) dialRef.current?.setAttribute("transform", `translate(${cx} ${cy})`) hourRef.current?.setAttribute("transform", `rotate(${hour})`) minuteRef.current?.setAttribute("transform", `rotate(${minute})`) secondRef.current?.setAttribute("transform", `rotate(${second})`) }, []) React.useEffect(() => { if (live) return const update = () => draw(hourAngle.get(), minuteAngle.get(), secondAngle.get()) update() const unsubscribe = [ hourAngle.on("change", update), minuteAngle.on("change", update), secondAngle.on("change", update), ] return () => unsubscribe.forEach((fn) => fn()) }, [live, ready, hourAngle, minuteAngle, secondAngle, draw]) // Live: the time-zone wall clock is read once a second, and every frame in // between adds the device clock's elapsed milliseconds for a smooth sweep. const baseSeconds = live && parts ? parts.hours * 3600 + parts.minutes * 60 + parts.seconds : null const baseAt = live && now ? Math.floor(now.getTime() / 1000) * 1000 : null React.useEffect(() => { if (baseSeconds === null || baseAt === null) return let frame = 0 const tick = () => { const elapsed = (Date.now() - baseAt) / 1000 // Reduced motion: step once a second instead of sweeping. const t = baseSeconds + (reduceMotion ? Math.floor(elapsed) : elapsed) draw((t / 120) % 360, (t / 10) % 360, (t * 6) % 360) frame = requestAnimationFrame(tick) } tick() return () => cancelAnimationFrame(frame) }, [baseSeconds, baseAt, reduceMotion, draw]) const hours = parts?.hours ?? 0 const minutes = parts?.minutes ?? 0 const ticks = React.useMemo( () => Array.from({ length: 60 }, (_, i) => { const deg = i * 6 const rad = (deg * Math.PI) / 180 const sin = Math.sin(rad) const cos = -Math.cos(rad) return { i, deg, sin, cos, isHour: i % 5 === 0 } }), [] ) const dial = ( <> {/* Hairline spokes converging on the pivot */} {Array.from({ length: 12 }, (_, i) => ( ))} {ticks.map(({ i, sin, cos, isHour }) => { if (!isHour) { return ( ) } return ( ) })} {Array.from({ length: 12 }, (_, i) => { const hour = i === 0 ? 12 : i const deg = i * 30 const rad = (deg * Math.PI) / 180 // Tangential labels that stay readable: tops point out on the upper // half of the dial and in on the lower half. const rotation = deg > 90 && deg < 270 ? deg - 180 : deg return ( {hour} ) })} {/* Hour hand */} {/* Minute hand */} {/* Seconds hand, with a short counterweight tail */} ) const timeLabel = now ? `${pad(hours)}:${pad(minutes)}` : undefined return (

) } 60:["$","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"}]]}]}]]}],["$","$L61",null,{"namespace":"@componentry","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/lens-clock.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]