60: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"] 61:I[544296,["/_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"],"ItemStyles"] 62:I[8513,["/_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"],"ScrollArea"] 63:I[8513,["/_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"],"ScrollBar"] 64: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"] 65:T3386,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useIsPresent } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type MenuItem = { label: string; icon: React.ReactNode; // Shown inside the surface once the item is chosen. done?: string; disabled?: boolean; destructive?: boolean; // Draws a divider above the item. separated?: boolean; }; type Open = { id: number; x: number; y: number }; // Long enough that a resting thumb or a scroll that starts slowly never // opens it, the same threshold the platforms use. const LONG_PRESS = 500; // A finger drifting further than this is scrolling, not pressing. const LONG_PRESS_SLOP = 10; // Keeps the menu off the very edge of the viewport. const EDGE = 8; const EASE_OUT = [0.23, 1, 0.32, 1] as const; export function ContextMenuArea({ items, onSelect, label = "Canvas", className, children, }: { items: MenuItem[]; onSelect?: (item: MenuItem) => void; label?: string; className?: string; children?: React.ReactNode; }) { const surfaceRef = useRef(null); const hintId = useId(); const [menu, setMenu] = useState(null); const nextId = useRef(0); const press = useRef<{ id: number; x: number; y: number; timer: ReturnType; } | null>(null); // The keyboard and a long-press both fire their own contextmenu event // right after we have already opened; this swallows that echo. const openedAt = useRef(-Infinity); useEffect(() => () => clearTimeout(press.current?.timer), []); const open = (x: number, y: number) => { openedAt.current = performance.now(); setMenu({ id: ++nextId.current, x, y }); }; const openAtCenter = () => { const rect = surfaceRef.current?.getBoundingClientRect(); if (rect) open(rect.left + rect.width / 2, rect.top + rect.height / 2); }; const cancelPress = () => { clearTimeout(press.current?.timer); press.current = null; }; const close = (returnFocus: boolean) => { setMenu(null); if (returnFocus) surfaceRef.current?.focus({ preventScroll: true }); }; return (

{ e.preventDefault(); if (!e.currentTarget.contains(e.target as Node)) return; cancelPress(); if (performance.now() - openedAt.current < 500) return; // A menu key press with no pointer position reports 0,0. if (e.clientX === 0 && e.clientY === 0) openAtCenter(); else open(e.clientX, e.clientY); }} onKeyDown={(e) => { if (!e.currentTarget.contains(e.target as Node)) return; if ((e.key === "F10" && e.shiftKey) || e.key === "ContextMenu") { e.preventDefault(); openAtCenter(); } }} // Mouse and pen get the native contextmenu event; touch needs a hold. onPointerDown={(e) => { if (e.pointerType !== "touch" || !e.isPrimary) return; if (!e.currentTarget.contains(e.target as Node)) return; cancelPress(); const { clientX: x, clientY: y, pointerId: id } = e; press.current = { id, x, y, timer: setTimeout(() => { press.current = null; navigator.vibrate?.(10); open(x, y); }, LONG_PRESS), }; }} onPointerMove={(e) => { const p = press.current; if (!p || p.id !== e.pointerId) return; if (Math.hypot(e.clientX - p.x, e.clientY - p.y) > LONG_PRESS_SLOP) { cancelPress(); } }} onPointerUp={cancelPress} onPointerCancel={cancelPress} className={cn( "relative flex h-[320px] w-[min(520px,100%)] touch-manipulation flex-col items-center justify-center gap-1.5 rounded-3xl px-6 text-center border border-dashed border-border outline-hidden select-none [-webkit-touch-callout:none] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground", className, )} > Press Shift F10 for actions {children} {menu && ( { close(true); onSelect?.(item); }} /> )}

); } function Menu({ x, y, items, onClose, onSelect, }: { x: number; y: number; items: MenuItem[]; onClose: (returnFocus: boolean) => void; onSelect: (item: MenuItem) => void; }) { const ref = useRef(null); const isPresent = useIsPresent(); const reduceMotion = useReducedMotion(); // Measures the real menu before the first paint, then flips it to the // other side of the pointer when it would overflow and shifts it inward // if even that does not fit. Written straight to the node, so placement // costs no extra render. useLayoutEffect(() => { const el = ref.current; if (!el) return; // offsetWidth ignores the entering scale, so this is the settled size. const w = el.offsetWidth; const h = el.offsetHeight; const vw = document.documentElement.clientWidth; const vh = document.documentElement.clientHeight; const place = (at: number, size: number, max: number) => { const flipped = at + size > max - EDGE ? at - size : at; return Math.min(Math.max(flipped, EDGE), max - size - EDGE); }; const left = place(x, w, vw); const top = place(y, h, vh); el.style.left = `${left}px`; el.style.top = `${top}px`; // Grows out of the pointer itself: the corner nearest it after a flip, // or the exact point when the menu had to shift. const ox = Math.min(Math.max(x - left, 0), w); const oy = Math.min(Math.max(y - top, 0), h); el.style.transformOrigin = `${ox}px ${oy}px`; el.querySelector('[role="menuitem"]')?.focus({ preventScroll: true, }); }, [x, y]); useEffect(() => { if (!isPresent) return; const outside = (e: PointerEvent) => { if (!ref.current?.contains(e.target as Node)) onClose(false); }; const dismiss = () => onClose(false); document.addEventListener("pointerdown", outside, true); // Capture catches scrolling in any container, not just the page. window.addEventListener("scroll", dismiss, true); window.addEventListener("resize", dismiss); window.addEventListener("blur", dismiss); return () => { document.removeEventListener("pointerdown", outside, true); window.removeEventListener("scroll", dismiss, true); window.removeEventListener("resize", dismiss); window.removeEventListener("blur", dismiss); }; }, [isPresent, onClose]); const onKeyDown = (e: React.KeyboardEvent) => { const list = Array.from( ref.current?.querySelectorAll('[role="menuitem"]') ?? [], ); const at = list.indexOf(document.activeElement as HTMLElement); const go = (i: number) => list[(i + list.length) % list.length]?.focus({ preventScroll: true }); if (e.key === "ArrowDown") go(at + 1); else if (e.key === "ArrowUp") go(at < 0 ? -1 : at - 1); else if (e.key === "Home") go(0); else if (e.key === "End") go(-1); else if (e.key === "Escape" || e.key === "Tab") onClose(true); else return; e.preventDefault(); e.stopPropagation(); }; return createPortal(