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:T21dd,"use client"; import { useEffect, useImperativeHandle, useRef, type ComponentProps, type Ref, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCountdown, useCountUp, type TimerControls, type TimerStatus, } from "@/hooks/use-timer"; import { cn } from "@/lib/utils"; const DIGIT_TRANSITION = { duration: 0.2, ease: [0.645, 0.045, 0.355, 1], } as const; type TimerDirection = "down" | "up"; type TimerDisplayProps = Omit, "children"> & { seconds: number; direction: TimerDirection; status: TimerStatus; animated?: boolean; disabled?: boolean; valueClassName?: string; digitClassName?: string; separatorClassName?: string; }; export type TimerHandle = TimerControls; type SharedTimerProps = Omit, "children"> & { /** * Imperative pause/resume/reset/restart controls. `ref` points at the * rendered `` element, matching every other component in the registry; * the controls live here so both are reachable. */ controlsRef?: Ref; /** Start automatically on mount. */ autoStart?: boolean; /** Declaratively pause or resume the timer. */ paused?: boolean; /** Freeze the timer and prevent resume or restart. */ disabled?: boolean; /** Animate digit changes. Reduced-motion preferences still take precedence. */ animated?: boolean; /** Called once when the timer reaches its boundary. */ onComplete?: () => void; /** Classes applied to each hours, minutes, and seconds segment. */ valueClassName?: string; /** Classes applied to every animated digit slot. */ digitClassName?: string; /** Classes applied to both separators. */ separatorClassName?: string; }; export type CountdownProps = SharedTimerProps & { /** Countdown duration in seconds. */ duration: number; }; export type CountUpProps = SharedTimerProps & { /** Initial elapsed time in seconds. */ startAt?: number; /** Optional elapsed-time boundary in seconds. */ endAt?: number; }; export function Countdown({ duration, autoStart = true, paused, disabled = false, onComplete, controlsRef, ...props }: CountdownProps) { const timer = useCountdown({ duration, autoStart, disabled, onComplete, }); useTimerHandle(controlsRef, timer); usePausedProp(paused, timer); return ( ); } export function CountUp({ startAt = 0, endAt, autoStart = true, paused, disabled = false, onComplete, controlsRef, ...props }: CountUpProps) { const timer = useCountUp({ startAt, endAt, autoStart, disabled, onComplete, }); useTimerHandle(controlsRef, timer); usePausedProp(paused, timer); return ( ); } function TimerDisplay({ seconds: totalSeconds, direction, status, animated = true, disabled = false, className, valueClassName, digitClassName, separatorClassName, "aria-label": ariaLabel, "aria-live": ariaLive = "off", dateTime, ...props }: TimerDisplayProps) { const shouldReduceMotion = useReducedMotion(); const shouldAnimate = animated && !shouldReduceMotion; const { hours, minutes, seconds } = splitTime(totalSeconds); const values = [hours, minutes, seconds]; const labelSuffix = direction === "down" ? "remaining" : "elapsed"; return ( ); } function TimerSegment({ value, direction, animated, className, digitClassName, }: { value: number; direction: TimerDirection; animated: boolean; className?: string; digitClassName?: string; }) { const digits = String(value).padStart(2, "0").split(""); return ( {digits.map((digit, index) => ( ))} ); } function TimerDigit({ digit, direction, animated, className, }: { digit: string; direction: TimerDirection; animated: boolean; className?: string; }) { const distance = direction === "down" ? "-100%" : "100%"; return ( ); } function useTimerHandle( ref: Ref | undefined, timer: TimerControls, ) { useImperativeHandle( ref, () => ({ pause: timer.pause, resume: timer.resume, reset: timer.reset, restart: timer.restart, }), [timer.pause, timer.reset, timer.restart, timer.resume], ); } function usePausedProp( paused: boolean | undefined, timer: Pick, ) { const { pause, resume } = timer; // Pause applies on mount (an initially-paused timer must not run), but // resume only fires on a true -> false transition: resuming on every effect // run would override `autoStart={false}` on mount and silently undo // imperative pauses whenever the control identities change. const previousPausedRef = useRef(undefined); useEffect(() => { const previousPaused = previousPausedRef.current; previousPausedRef.current = paused; if (paused === true && previousPaused !== true) { pause(); } else if (paused === false && previousPaused === true) { resume(); } }, [pause, paused, resume]); } function splitTime(totalSeconds: number) { return { hours: Math.floor(totalSeconds / 3600), minutes: Math.floor((totalSeconds % 3600) / 60), seconds: totalSeconds % 60, }; } function formatUnit(value: number, unit: string) { return `${value} ${unit}${value === 1 ? "" : "s"}`; } function toDuration(totalSeconds: number) { const { hours, minutes, seconds } = splitTime(totalSeconds); return `PT${hours ? `${hours}H` : ""}${minutes ? `${minutes}M` : ""}${seconds || (!hours && !minutes) ? `${seconds}S` : ""}`; } 53:T23a1,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; export type TimerStatus = "idle" | "running" | "paused" | "completed"; export type TimerControls = { pause: () => void; resume: () => void; reset: () => void; restart: () => void; }; export type UseTimerOptions = { direction: "down" | "up"; initialSeconds: number; endSeconds?: number; autoStart?: boolean; disabled?: boolean; onComplete?: () => void; }; export type UseTimerReturn = TimerControls & { seconds: number; status: TimerStatus; isRunning: boolean; }; export type UseCountdownOptions = Omit< UseTimerOptions, "direction" | "initialSeconds" | "endSeconds" > & { duration: number; }; export type UseCountUpOptions = Omit< UseTimerOptions, "direction" | "initialSeconds" | "endSeconds" > & { startAt?: number; endAt?: number; }; type TimerAnchor = { startedAt: number; valueMs: number; }; export function useTimer({ direction, initialSeconds, endSeconds, autoStart = true, disabled = false, onComplete, }: UseTimerOptions): UseTimerReturn { const initialMs = toMilliseconds(initialSeconds, "initialSeconds"); const endMs = endSeconds === undefined ? undefined : toMilliseconds(endSeconds, "endSeconds"); validateBoundary(direction, initialMs, endMs); const startsAtBoundary = hasReachedBoundary(direction, initialMs, endMs); const initialStatus: TimerStatus = startsAtBoundary ? "completed" : autoStart && !disabled ? "running" : "idle"; const [valueMs, setValueMs] = useState(initialMs); const [status, setStatus] = useState(initialStatus); const valueRef = useRef(initialMs); const statusRef = useRef(initialStatus); const anchorRef = useRef({ startedAt: 0, valueMs: initialMs, }); const definitionRef = useRef({ direction, initialMs, endMs }); const onCompleteRef = useRef(onComplete); const completionNotifiedRef = useRef(startsAtBoundary); const wasDisabledRef = useRef(disabled); const resumeAfterDisabledRef = useRef(false); useEffect(() => { onCompleteRef.current = onComplete; }, [onComplete]); const commit = useCallback((nextValueMs: number, nextStatus: TimerStatus) => { valueRef.current = nextValueMs; statusRef.current = nextStatus; setValueMs(nextValueMs); setStatus(nextStatus); }, []); const readCurrentValue = useCallback( (now: number) => { const elapsed = Math.max(0, now - anchorRef.current.startedAt); const nextValue = direction === "down" ? anchorRef.current.valueMs - elapsed : anchorRef.current.valueMs + elapsed; return clampToBoundary(direction, nextValue, endMs); }, [direction, endMs], ); const complete = useCallback( (nextValueMs: number) => { commit(nextValueMs, "completed"); if (!completionNotifiedRef.current) { completionNotifiedRef.current = true; onCompleteRef.current?.(); } }, [commit], ); const freeze = useCallback(() => { if (statusRef.current !== "running") return; const nextValue = readCurrentValue(Date.now()); if (hasReachedBoundary(direction, nextValue, endMs)) { complete(nextValue); return; } commit(nextValue, "paused"); }, [commit, complete, direction, endMs, readCurrentValue]); const pause = useCallback(() => { resumeAfterDisabledRef.current = false; freeze(); }, [freeze]); const resume = useCallback(() => { if ( disabled || statusRef.current === "running" || hasReachedBoundary(direction, valueRef.current, endMs) ) { return; } resumeAfterDisabledRef.current = false; anchorRef.current = { startedAt: Date.now(), valueMs: valueRef.current, }; commit(valueRef.current, "running"); }, [commit, direction, disabled, endMs]); const reset = useCallback(() => { resumeAfterDisabledRef.current = false; completionNotifiedRef.current = startsAtBoundary; anchorRef.current = { startedAt: Date.now(), valueMs: initialMs }; commit(initialMs, startsAtBoundary ? "completed" : "idle"); }, [commit, initialMs, startsAtBoundary]); const restart = useCallback(() => { if (disabled) return; completionNotifiedRef.current = startsAtBoundary; anchorRef.current = { startedAt: Date.now(), valueMs: initialMs }; commit(initialMs, startsAtBoundary ? "completed" : "running"); }, [commit, disabled, initialMs, startsAtBoundary]); useEffect(() => { const previous = definitionRef.current; const definitionChanged = previous.direction !== direction || previous.initialMs !== initialMs || previous.endMs !== endMs; if (!definitionChanged) return; definitionRef.current = { direction, initialMs, endMs }; completionNotifiedRef.current = startsAtBoundary; anchorRef.current = { startedAt: Date.now(), valueMs: initialMs }; commit( initialMs, startsAtBoundary ? "completed" : autoStart && !disabled ? "running" : "idle", ); }, [ autoStart, commit, direction, disabled, endMs, initialMs, startsAtBoundary, ]); useEffect(() => { const wasDisabled = wasDisabledRef.current; wasDisabledRef.current = disabled; let timeout = 0; if (disabled) { resumeAfterDisabledRef.current = statusRef.current === "running"; timeout = window.setTimeout(freeze, 0); } else if (wasDisabled && resumeAfterDisabledRef.current) { resumeAfterDisabledRef.current = false; timeout = window.setTimeout(resume, 0); } return () => window.clearTimeout(timeout); }, [disabled, freeze, resume]); useEffect(() => { if (status !== "running" || disabled) return; let timeout = 0; if (anchorRef.current.startedAt === 0) { anchorRef.current = { startedAt: Date.now(), valueMs: valueRef.current, }; } function tick() { const nextValue = readCurrentValue(Date.now()); if (hasReachedBoundary(direction, nextValue, endMs)) { complete(nextValue); return; } commit(nextValue, "running"); timeout = window.setTimeout( tick, millisecondsUntilNextSecond(nextValue, direction), ); } timeout = window.setTimeout( tick, millisecondsUntilNextSecond(valueRef.current, direction), ); return () => window.clearTimeout(timeout); }, [commit, complete, direction, disabled, endMs, readCurrentValue, status]); const seconds = direction === "down" ? Math.ceil(valueMs / 1000) : Math.floor(valueMs / 1000); return { seconds, status, isRunning: status === "running", pause, resume, reset, restart, }; } export function useCountdown({ duration, ...options }: UseCountdownOptions): UseTimerReturn { return useTimer({ ...options, direction: "down", initialSeconds: duration, endSeconds: 0, }); } export function useCountUp({ startAt = 0, endAt, ...options }: UseCountUpOptions = {}): UseTimerReturn { return useTimer({ ...options, direction: "up", initialSeconds: startAt, endSeconds: endAt, }); } function toMilliseconds(seconds: number, name: string) { if (!Number.isFinite(seconds) || seconds < 0) { throw new RangeError(`${name} must be a finite, non-negative number.`); } // Round, because float seconds rarely scale to whole ms (16.1 * 1000 is // 16100.000000000002) and a derived duration must not throw. const milliseconds = Math.round(seconds * 1000); if (!Number.isSafeInteger(milliseconds)) { throw new RangeError(`${name} is outside the supported timer range.`); } return milliseconds; } function validateBoundary( direction: "down" | "up", initialMs: number, endMs: number | undefined, ) { if (direction === "down" && endMs !== undefined && endMs > initialMs) { throw new RangeError( "A countdown endSeconds value cannot be greater than initialSeconds.", ); } if (direction === "up" && endMs !== undefined && endMs < initialMs) { throw new RangeError( "A count-up endSeconds value cannot be less than initialSeconds.", ); } } function clampToBoundary( direction: "down" | "up", valueMs: number, endMs: number | undefined, ) { if (endMs === undefined) return Math.max(0, valueMs); return direction === "down" ? Math.max(endMs, valueMs) : Math.min(endMs, valueMs); } function hasReachedBoundary( direction: "down" | "up", valueMs: number, endMs: number | undefined, ) { if (endMs === undefined) return false; return direction === "down" ? valueMs <= endMs : valueMs >= endMs; } function millisecondsUntilNextSecond( valueMs: number, direction: "down" | "up", ) { const remainder = valueMs % 1000; const delay = direction === "down" ? remainder === 0 ? 1000 : remainder : remainder === 0 ? 1000 : 1000 - remainder; return Math.max(16, delay); } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@ericts","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/base/ui/timer.tsx","content":"$52","type":"registry:ui","target":"@ui/timer.tsx"},{"path":"registry/base/hooks/use-timer.ts","content":"$53","type":"registry:hook","target":"@hooks/use-timer.ts"}],"className":"h-[70svh] min-h-80"}]]}]