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:T194b,"use client"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { useCallback, useEffect, useId, useRef, useState } from "react"; export type HoldActionPhase = "idle" | "holding" | "releasing" | "complete"; export type UseHoldActionOptions = { onComplete: () => void; onCancel?: () => void; duration?: number; moveTolerance?: number; disabled?: boolean; }; export function useHoldAction({ onComplete, onCancel, duration = 1200, moveTolerance = 10, disabled = false }: UseHoldActionOptions) { const [phase, setPhase] = useState("idle"); const [progress, setProgress] = useState(0); const phaseRef = useRef("idle"); const frame = useRef(0); const startedAt = useRef(0); const origin = useRef<{ x: number; y: number } | null>(null); const complete = useRef(onComplete); const cancel = useRef(onCancel); complete.current = onComplete; cancel.current = onCancel; const stop = useCallback((next: HoldActionPhase = "idle") => { cancelAnimationFrame(frame.current); frame.current = 0; phaseRef.current = next; setPhase(next); setProgress(next === "complete" ? 1 : 0); origin.current = null; }, []); const release = useCallback(() => { if (phaseRef.current !== "holding") return; cancel.current?.(); stop("releasing"); window.setTimeout(() => phaseRef.current === "releasing" && stop(), 160); }, [stop]); const begin = useCallback((point?: { x: number; y: number }) => { if (disabled || phaseRef.current === "holding" || phaseRef.current === "complete") return; origin.current = point ?? null; phaseRef.current = "holding"; setPhase("holding"); setProgress(0); startedAt.current = performance.now(); const tick = (now: number) => { const next = Math.min(1, (now - startedAt.current) / duration); setProgress(next); if (next < 1) { frame.current = requestAnimationFrame(tick); return; } frame.current = 0; phaseRef.current = "complete"; setPhase("complete"); navigator.vibrate?.(12); complete.current(); }; frame.current = requestAnimationFrame(tick); }, [disabled, duration]); useEffect(() => { const abandon = () => release(); const visibility = () => document.hidden && release(); window.addEventListener("blur", abandon); document.addEventListener("visibilitychange", visibility); return () => { window.removeEventListener("blur", abandon); document.removeEventListener("visibilitychange", visibility); cancelAnimationFrame(frame.current); }; }, [release]); return { phase, progress, reset: () => stop(), bind: { onPointerDown: (event: React.PointerEvent) => { if (event.pointerType === "mouse" && event.button !== 0) return; event.currentTarget.setPointerCapture?.(event.pointerId); begin({ x: event.clientX, y: event.clientY }); }, onPointerMove: (event: React.PointerEvent) => { const start = origin.current; if (!start || phaseRef.current !== "holding") return; if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > moveTolerance) release(); }, onPointerUp: release, onPointerCancel: release, onPointerLeave: release, onKeyDown: (event: React.KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); release(); return; } if (!event.repeat && (event.key === " " || event.key === "Enter")) { event.preventDefault(); begin(); } }, onKeyUp: (event: React.KeyboardEvent) => { if (event.key === " " || event.key === "Enter") release(); }, onBlur: release, onClick: (event: React.MouseEvent) => event.preventDefault(), onContextMenu: (event: React.MouseEvent) => event.preventDefault(), }, }; } export type HoldActionProps = { children: React.ReactNode; onComplete: () => void; onCancel?: () => void; duration?: number; completeLabel?: string; hint?: string; resetAfter?: number; disabled?: boolean; className?: string; }; export function HoldAction({ children, onComplete, onCancel, duration = 1200, completeLabel = "Complete", hint, resetAfter = 1400, disabled = false, className = "" }: HoldActionProps) { const { bind, phase, progress, reset } = useHoldAction({ onComplete, onCancel, duration, disabled }); const reduced = useReducedMotion() === true; const hintId = useId(); const fill = useMotionValue(0); const clipPath = useTransform(fill, (value) => `inset(0 ${(1 - value) * 100}% 0 0)`); const completed = phase === "complete"; useEffect(() => { const controls = animate(fill, progress, { duration: reduced ? 0 : phase === "releasing" ? 0.16 : 0.08, ease: "linear" }); return () => controls.stop(); }, [fill, phase, progress, reduced]); useEffect(() => { if (!completed || resetAfter <= 0) return; const timer = window.setTimeout(reset, resetAfter); return () => window.clearTimeout(timer); }, [completed, reset, resetAfter]); return ( ); } 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":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/hold-action.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/hold-action.tsx"}],"className":"h-[70svh] min-h-80"}]]}]