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:T1c52,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const POP = { type: "spring", stiffness: 640, damping: 22, mass: 0.7 } as const; const INSTANT = { duration: 0 } as const; export type UseLongPressOptions = { onLongPress: () => void; duration?: number; steps?: number; moveTolerance?: number; haptic?: boolean; disabled?: boolean; onCancel?: () => void; }; type Phase = "idle" | "holding" | "fired"; export function useLongPress({ onLongPress, duration = 550, steps = 12, moveTolerance = 8, haptic = true, disabled = false, onCancel, }: UseLongPressOptions) { const cells = Math.max(1, Math.round(steps)); const [step, setStep] = useState(0); const [holding, setHolding] = useState(false); const phase = useRef("idle"); const raf = useRef(0); const startedAt = useRef(0); const origin = useRef<{ x: number; y: number } | null>(null); const settle = useRef | null>(null); const fire = useRef(onLongPress); fire.current = onLongPress; const cancelled = useRef(onCancel); cancelled.current = onCancel; const reset = useCallback(() => { cancelAnimationFrame(raf.current); raf.current = 0; if (settle.current) { clearTimeout(settle.current); settle.current = null; } origin.current = null; phase.current = "idle"; setHolding(false); setStep(0); }, []); const end = useCallback(() => { if (phase.current !== "holding") return; reset(); cancelled.current?.(); }, [reset]); const begin = useCallback( (point?: { x: number; y: number }) => { if (disabled || phase.current !== "idle") return; phase.current = "holding"; origin.current = point ?? null; startedAt.current = performance.now(); setHolding(true); setStep(0); const tick = (now: number) => { const p = Math.min(1, (now - startedAt.current) / duration); const s = Math.floor(p * cells); setStep((prev) => (prev === s ? prev : s)); if (p < 1) { raf.current = requestAnimationFrame(tick); return; } raf.current = 0; phase.current = "fired"; setStep(cells); if (haptic) navigator.vibrate?.(12); fire.current(); settle.current = setTimeout(() => { if (phase.current === "fired") reset(); }, 260); }; raf.current = requestAnimationFrame(tick); }, [disabled, duration, cells, haptic, reset], ); useEffect(() => { const bail = () => end(); const onVisibility = () => document.hidden && end(); window.addEventListener("blur", bail); document.addEventListener("visibilitychange", onVisibility); return () => { window.removeEventListener("blur", bail); document.removeEventListener("visibilitychange", onVisibility); cancelAnimationFrame(raf.current); if (settle.current) clearTimeout(settle.current); }; }, [end]); const bind = { onPointerDown: (e: React.PointerEvent) => { if (e.button !== 0 && e.pointerType === "mouse") return; e.currentTarget.setPointerCapture?.(e.pointerId); begin({ x: e.clientX, y: e.clientY }); }, onPointerMove: (e: React.PointerEvent) => { const from = origin.current; if (phase.current !== "holding" || !from) return; if (Math.hypot(e.clientX - from.x, e.clientY - from.y) > moveTolerance) { end(); } }, onPointerUp: end, onPointerCancel: end, onPointerLeave: end, onKeyDown: (e: React.KeyboardEvent) => { if (e.repeat) return; if (e.key === " " || e.key === "Enter") { e.preventDefault(); begin(); } }, onKeyUp: (e: React.KeyboardEvent) => { if (e.key === " " || e.key === "Enter") end(); if (e.key === "Escape") end(); }, onBlur: end, onClick: (e: React.MouseEvent) => { if (phase.current === "fired") { e.preventDefault(); e.stopPropagation(); } }, onContextMenu: (e: React.MouseEvent) => e.preventDefault(), }; return { bind, step, steps: cells, holding, fired: step === cells, progress: step / cells, }; } export type LongPressButtonProps = { onLongPress: () => void; children: React.ReactNode; duration?: number; steps?: number; disabled?: boolean; className?: string; }; export function LongPressButton({ onLongPress, children, duration = 550, steps = 12, disabled = false, className = "", }: LongPressButtonProps) { const hintId = useId(); const reduced = useReducedMotion() === true; const { bind, step, steps: cells, holding, fired } = useLongPress({ onLongPress, duration, steps, disabled, }); const progress = fired ? 1 : step / cells; return ( {children} {children} Press and hold for {Math.round(duration / 100) / 10} seconds to confirm ); } 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":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/long-press.tsx","content":"$52","type":"registry:ui","target":"components/interior/long-press.tsx"}],"className":"h-[70svh] min-h-80"}]]}]