52: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"] 53: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"] 54:T24d9,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; const FACE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; export type HoldPhase = "idle" | "holding" | "releasing" | "committed"; export type UseHoldToConfirmOptions = { onConfirm: () => void; onAbort?: () => void; duration?: number; steps?: number; releaseRate?: number; moveTolerance?: number; haptic?: boolean; disabled?: boolean; }; export function useHoldToConfirm({ onConfirm, onAbort, duration = 1800, steps = 20, releaseRate = 2.5, moveTolerance = 10, haptic = true, disabled = false, }: UseHoldToConfirmOptions) { const [step, setStep] = useState(0); const [phase, setPhase] = useState("idle"); const phaseRef = useRef("idle"); const down = useRef(false); const elapsed = useRef(0); const last = useRef(0); const raf = useRef(0); const origin = useRef<{ x: number; y: number } | null>(null); const confirm = useRef(onConfirm); confirm.current = onConfirm; const abort = useRef(onAbort); abort.current = onAbort; const move = useCallback((next: HoldPhase) => { phaseRef.current = next; setPhase(next); }, []); const reset = useCallback(() => { cancelAnimationFrame(raf.current); raf.current = 0; down.current = false; elapsed.current = 0; origin.current = null; setStep(0); move("idle"); }, [move]); const begin = useCallback( (point?: { x: number; y: number }) => { if (disabled) return; if (phaseRef.current === "committed" || phaseRef.current === "holding") { return; } origin.current = point ?? null; down.current = true; move("holding"); if (raf.current) return; last.current = performance.now(); const loop = (now: number) => { const dt = Math.min(64, now - last.current); last.current = now; elapsed.current += down.current ? dt : -dt * releaseRate; if (elapsed.current >= duration) { raf.current = 0; elapsed.current = duration; down.current = false; origin.current = null; setStep(steps); move("committed"); if (haptic) navigator.vibrate?.(14); confirm.current(); return; } if (elapsed.current <= 0) { raf.current = 0; elapsed.current = 0; origin.current = null; setStep(0); move("idle"); return; } const s = Math.min( steps, Math.floor((elapsed.current / duration) * steps), ); setStep((prev) => (prev === s ? prev : s)); raf.current = requestAnimationFrame(loop); }; raf.current = requestAnimationFrame(loop); }, [disabled, duration, steps, releaseRate, haptic, move], ); const release = useCallback(() => { if (phaseRef.current !== "holding") return; down.current = false; origin.current = null; move("releasing"); abort.current?.(); }, [move]); useEffect(() => { const bail = () => release(); const onVisibility = () => { if (document.hidden) release(); }; window.addEventListener("blur", bail); document.addEventListener("visibilitychange", onVisibility); return () => { window.removeEventListener("blur", bail); document.removeEventListener("visibilitychange", onVisibility); cancelAnimationFrame(raf.current); raf.current = 0; }; }, [release]); const bind = { onPointerDown: (e: React.PointerEvent) => { if (e.pointerType === "mouse" && e.button !== 0) return; e.currentTarget.setPointerCapture?.(e.pointerId); begin({ x: e.clientX, y: e.clientY }); }, onPointerMove: (e: React.PointerEvent) => { const from = origin.current; if (phaseRef.current !== "holding" || !from) return; if (Math.hypot(e.clientX - from.x, e.clientY - from.y) > moveTolerance) { release(); } }, onPointerUp: release, onPointerCancel: release, onPointerLeave: release, onKeyDown: (e: React.KeyboardEvent) => { if (e.key === "Escape") { if (phaseRef.current === "holding" || phaseRef.current === "releasing") { e.preventDefault(); reset(); } return; } if (e.repeat) return; if (e.key === " " || e.key === "Enter") { e.preventDefault(); begin(); } }, onKeyUp: (e: React.KeyboardEvent) => { if (e.key === " " || e.key === "Enter") release(); }, onBlur: release, onClick: (e: React.MouseEvent) => { e.preventDefault(); if (phaseRef.current === "committed") e.stopPropagation(); }, onContextMenu: (e: React.MouseEvent) => e.preventDefault(), }; return { bind, step, steps, phase, progress: step / steps, reset, }; } export type HoldToConfirmProps = { onConfirm: () => void; children: React.ReactNode; onAbort?: () => void; confirmLabel?: string; duration?: number; resetAfter?: number; steps?: number; releaseRate?: number; disabled?: boolean; className?: string; }; export function HoldToConfirm({ onConfirm, children, onAbort, confirmLabel = "Confirmed", duration = 1800, resetAfter = 1600, steps = 20, releaseRate = 2.5, disabled = false, className = "", }: HoldToConfirmProps) { const { bind, phase, reset } = useHoldToConfirm({ onConfirm, onAbort, duration, steps, releaseRate, disabled, }); const reduced = useReducedMotion(); const hintId = useId(); const committed = phase === "committed"; const seconds = Math.round(duration / 100) / 10; const swept = useMotionValue(0); const clipPath = useTransform( swept, (v) => `inset(0 ${(1 - v) * 100}% 0 0)`, ); useEffect(() => { if (phase !== "committed" || resetAfter <= 0) return; const back = setTimeout(reset, resetAfter); return () => clearTimeout(back); }, [phase, resetAfter, reset]); useEffect(() => { if (reduced) { swept.set(phase === "holding" || phase === "committed" ? 1 : 0); return; } if (phase === "committed") { const controls = animate(swept, 1, { duration: 0.12, ease: "linear" }); return () => controls.stop(); } const from = swept.get(); if (phase === "holding") { const controls = animate(swept, 1, { duration: (duration * (1 - from)) / 1000, ease: "linear", }); return () => controls.stop(); } const controls = animate(swept, 0, { duration: (duration * from) / releaseRate / 1000, ease: [0.23, 1, 0.32, 1], }); return () => controls.stop(); }, [phase, duration, releaseRate, reduced, swept]); return ( ); } function Faces({ committed, confirmLabel, children, }: { committed: boolean; confirmLabel: string; children: React.ReactNode; }) { return ( {children} {confirmLabel} ); } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/interior/hold-to-confirm.tsx","content":"$54","type":"registry:ui","target":"components/interior/hold-to-confirm.tsx"}],"className":"h-[70svh] min-h-80"}]]}]