4e: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"] 4f: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"] 50:T53c7,"use client"; import { useEffect, useRef, useState, type RefObject, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A right-click menu that opens where the cursor is. Wrap anything in it and give it a list of items. // It opens with a quick pop from the cursor and a stagger on the rows, one soft highlight glides // between the rows, and it is a real menu for keyboards and screen readers (arrow keys, Home and End, // type a letter to jump, Enter to choose, Escape to close and give focus back). On touch screens a // long press opens it. The document listeners exist only while the menu is open. export type ContextMenuItem = { /** A unique id for the row. */ id: string; /** The text of the row. */ label: string; /** An icon shown before the label, e.g. a lucide-react icon: . */ icon?: ReactNode; /** A shortcut hint shown on the right, e.g. "⌘ D". It is only a label: the shortcut itself is yours to handle. */ shortcut?: string; /** Called when the row is chosen. */ onSelect?: (item: ContextMenuItem) => void; /** Draw a divider line after this row. */ separator?: boolean; /** Show the row greyed out and skip it. */ disabled?: boolean; /** Colour the row red, for things like Delete. */ danger?: boolean; }; export type ContextMenuProps = { /** What the menu opens on. Right-click (or long-press on touch) anywhere inside it. */ children: ReactNode; /** The rows of the menu. */ items: ContextMenuItem[]; /** Called with the row that was chosen (after the row's own onSelect). */ onItemSelect?: (item: ContextMenuItem) => void; /** Called when the menu opens (true) and starts closing (false). */ onOpenChange?: (open: boolean) => void; /** Width of the menu, in pixels. */ width?: number; /** How long the menu takes to pop open, in seconds. */ openDuration?: number; /** Delay between one row appearing and the next, in seconds. */ stagger?: number; /** How small the menu starts, from 0.5 to 1. It grows from the cursor. */ startScale?: number; /** The GSAP ease of the pop, e.g. "power3.out" or "back.out(1.7)". */ ease?: string; /** The colour of the highlight and the focus. */ accent?: string; /** A frosted-glass menu (blurred, see-through) instead of a solid one. */ glass?: boolean; /** Turn the custom menu off, so the browser's own menu shows. */ disabled?: boolean; /** How long a finger must stay down on touch screens to open the menu, in milliseconds. */ longPress?: number; /** Extra classes for the box around the children. */ className?: string; /** Extra classes for the menu itself, e.g. a different radius. */ menuClassName?: string; }; type Opening = { x: number; y: number; key: number; keyboard: boolean }; type MenuSettings = Required>; // Menus can sit inside each other (a card inside a board). The innermost one opens, and marks the // event here so the ones around it leave it alone. const claimed = new WeakSet(); export function ContextMenu({ children, items, onItemSelect, onOpenChange, width = 232, openDuration = 0.26, stagger = 0.022, startScale = 0.9, ease = "power3.out", accent = "#0f766e", glass = true, disabled = false, longPress = 480, className = "", menuClassName = "", }: ContextMenuProps) { const boxRef = useRef(null); const [opening, setOpening] = useState(null); const [closing, setClosing] = useState(false); const counter = useRef(0); const lastOpenAt = useRef(0); const lastLongPressAt = useRef(0); const pressTimer = useRef(null); const pressStart = useRef({ x: 0, y: 0 }); // The callback can change on every render: keep the newest one without re-running effects const onOpenChangeRef = useRef(onOpenChange); onOpenChangeRef.current = onOpenChange; const reported = useRef(false); const open = opening !== null && !closing; useEffect(() => { if (reported.current === open) return; reported.current = open; onOpenChangeRef.current?.(open); }, [open]); const openAt = (x: number, y: number, keyboard: boolean) => { counter.current += 1; lastOpenAt.current = performance.now(); setClosing(false); // A new key builds a fresh menu, so opening it somewhere else plays the pop again setOpening({ x, y, key: counter.current, keyboard }); }; const clearPress = () => { if (pressTimer.current !== null) window.clearTimeout(pressTimer.current); pressTimer.current = null; }; useEffect(() => clearPress, []); const onContextMenu = (event: ReactMouseEvent) => { if (disabled || items.length === 0 || claimed.has(event.nativeEvent)) return; claimed.add(event.nativeEvent); event.preventDefault(); // A long press on Android fires this a moment after our own timer already opened the menu if (performance.now() - lastOpenAt.current < 900) return; openAt(event.clientX, event.clientY, false); }; // Touch screens: a long press opens the menu (iOS never sends a contextmenu event) const onPointerDown = (event: ReactPointerEvent) => { if (disabled || items.length === 0 || event.pointerType !== "touch" || !event.isPrimary || claimed.has(event.nativeEvent)) return; claimed.add(event.nativeEvent); clearPress(); const { clientX, clientY } = event; pressStart.current = { x: clientX, y: clientY }; pressTimer.current = window.setTimeout(() => { pressTimer.current = null; lastLongPressAt.current = performance.now(); openAt(clientX, clientY, false); }, longPress); }; const onPointerMove = (event: ReactPointerEvent) => { // A finger that moves is scrolling or dragging, not pressing const start = pressStart.current; if (pressTimer.current !== null && Math.hypot(event.clientX - start.x, event.clientY - start.y) > 10) clearPress(); }; // The tap that ends a long press shouldn't also click what is under the finger const swallowClick = (event: ReactMouseEvent) => { if (performance.now() - lastLongPressAt.current < 600) { event.preventDefault(); event.stopPropagation(); } }; // The keyboard way in: the Menu key, or Shift + F10, opens it beside the focused element const onKeyDown = (event: ReactKeyboardEvent) => { if (disabled || items.length === 0 || claimed.has(event.nativeEvent)) return; if (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10")) return; claimed.add(event.nativeEvent); event.preventDefault(); const box = boxRef.current; const focused = document.activeElement; const target = focused instanceof HTMLElement && box?.contains(focused) ? focused : box; if (!target) return; const rect = target.getBoundingClientRect(); openAt(rect.left + Math.min(rect.width / 2, 48), rect.top + Math.min(rect.height / 2, 32), true); }; return (

{children} {opening && !disabled ? createPortal( setClosing(true)} onDone={() => setOpening((current) => (current && current.key === opening.key ? null : current))} fallbackFocus={boxRef} />, document.body, ) : null}

); } type MenuProps = { opening: Opening; items: ContextMenuItem[]; settings: MenuSettings; onItemSelect?: (item: ContextMenuItem) => void; onClosing: () => void; onDone: () => void; fallbackFocus: RefObject; }; // The menu itself exists only while it is open, so everything it listens to goes away with it. function Menu({ opening, items, settings, onItemSelect, onClosing, onDone, fallbackFocus }: MenuProps) { const menuRef = useRef(null); const listRef = useRef(null); const pillRef = useRef(null); const [leaving, setLeaving] = useState(false); const leavingRef = useRef(false); const exitRef = useRef<() => void>(() => undefined); const previousFocus = useRef(null); const typed = useRef({ text: "", timer: 0 }); // Read when the menu opens or closes, so a changing control never rebuilds an open menu const settingsRef = useRef(settings); settingsRef.current = settings; const onDoneRef = useRef(onDone); onDoneRef.current = onDone; // Where the menu goes, how it pops open, and the highlight that glides between rows useGSAP( (_context, contextSafe) => { const menu = menuRef.current; const list = listRef.current; const pill = pillRef.current; if (!menu || !list || !pill || !contextSafe) return; // Remember where focus was, once (React StrictMode runs this twice, and by then the menu has focus) if (previousFocus.current === null) previousFocus.current = document.activeElement; // Put the menu at the cursor, flipped or pushed in when it would leave the screen const margin = 8; const w = menu.offsetWidth; const h = menu.offsetHeight; const maxLeft = Math.max(margin, window.innerWidth - w - margin); const maxTop = Math.max(margin, window.innerHeight - h - margin); const left = Math.min(Math.max(opening.x + w > window.innerWidth - margin ? opening.x - w : opening.x, margin), maxLeft); const top = Math.min(Math.max(opening.y + h > window.innerHeight - margin ? opening.y - h : opening.y, margin), maxTop); menu.style.left = `${left}px`; menu.style.top = `${top}px`; // The pop grows from the cursor, wherever the menu ended up const originX = Math.min(Math.max(opening.x - left, 0), w); const originY = Math.min(Math.max(opening.y - top, 0), h); gsap.set(menu, { transformOrigin: `${originX}px ${originY}px` }); const rows = Array.from(list.querySelectorAll('[role="menuitem"]')); const dividers = Array.from(list.querySelectorAll('[role="separator"]')); const mm = gsap.matchMedia(); let glideY: ((value: number) => gsap.core.Tween) | null = null; let glideH: ((value: number) => gsap.core.Tween) | null = null; let animated = true; mm.add( { reduce: "(prefers-reduced-motion: reduce)", motion: "(prefers-reduced-motion: no-preference)" }, (context) => { animated = !context.conditions?.reduce; const { openDuration, stagger, startScale, ease } = settingsRef.current; if (!animated) { // No movement: the menu is simply there gsap.set([menu, ...rows, ...dividers], { opacity: 1, clearProps: "transform" }); return; } gsap.set(pill, { opacity: 0 }); glideY = gsap.quickTo(pill, "y", { duration: 0.22, ease: "power3.out" }); glideH = gsap.quickTo(pill, "height", { duration: 0.22, ease: "power3.out" }); gsap .timeline({ defaults: { overwrite: "auto" } }) .fromTo(menu, { opacity: 0, scale: startScale, y: -6 }, { opacity: 1, scale: 1, y: 0, duration: openDuration, ease, clearProps: "transform" }, 0) .fromTo([...rows, ...dividers], { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: openDuration * 0.9, ease: "power2.out", stagger, clearProps: "transform" }, 0.04); }, ); // The highlight follows whichever row has focus (the mouse moves focus too) let lit = false; const moveHighlight = contextSafe((row: HTMLElement) => { if (animated && glideY && glideH) { if (!lit) gsap.set(pill, { y: row.offsetTop, height: row.offsetHeight }); else { glideY(row.offsetTop); glideH(row.offsetHeight); } gsap.to(pill, { opacity: 1, duration: 0.15, overwrite: "auto" }); } else { gsap.set(pill, { y: row.offsetTop, height: row.offsetHeight, opacity: 1 }); } lit = true; }); const onFocusIn = (event: FocusEvent) => { const row = (event.target as HTMLElement).closest('[role="menuitem"]'); if (row) moveHighlight(row); }; const onFocusOut = contextSafe((event: FocusEvent) => { if ((event.relatedTarget as HTMLElement | null)?.closest?.('[role="menuitem"]')) return; lit = false; gsap.to(pill, { opacity: 0, duration: 0.15, overwrite: "auto" }); }); list.addEventListener("focusin", onFocusIn); list.addEventListener("focusout", onFocusOut); // Closing plays a short fade, then the parent removes the menu exitRef.current = contextSafe(() => { list.removeEventListener("focusin", onFocusIn); list.removeEventListener("focusout", onFocusOut); if (!animated) { onDoneRef.current(); return; } gsap.to(menu, { opacity: 0, scale: 0.96, duration: 0.14, ease: "power2.in", overwrite: true, onComplete: () => onDoneRef.current() }); }); // Keyboard-opened menus start on the first row, mouse-opened ones on the menu itself const first = rows.find((row) => row.getAttribute("aria-disabled") !== "true"); (opening.keyboard && first ? first : menu).focus({ preventScroll: true }); return () => { list.removeEventListener("focusin", onFocusIn); list.removeEventListener("focusout", onFocusOut); mm.revert(); }; }, { scope: menuRef, dependencies: [] }, ); // Start closing. Keyboard and row choices give focus back to where it was. const close = (restoreFocus: boolean) => { if (leavingRef.current) return; leavingRef.current = true; setLeaving(true); onClosing(); if (restoreFocus) { const back = previousFocus.current; const hadFocus = back instanceof HTMLElement && back !== document.body && back.isConnected; // Opened with the keyboard from something unfocusable: land on the box around it const target = hadFocus ? back : opening.keyboard ? fallbackFocus.current : null; if (target) { if (!target.hasAttribute("tabindex") && !(target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement || target instanceof HTMLInputElement)) target.tabIndex = -1; target.focus({ preventScroll: true }); } } exitRef.current(); }; // Listeners that exist only while the menu is open: a press elsewhere, scrolling, a resized window useEffect(() => { if (leaving) return; const menu = menuRef.current; const onPressOutside = (event: PointerEvent) => { if (menu && event.target instanceof Node && menu.contains(event.target)) return; close(false); }; const onAnyChange = () => close(false); document.addEventListener("pointerdown", onPressOutside, true); window.addEventListener("scroll", onAnyChange, { capture: true, passive: true }); window.addEventListener("resize", onAnyChange); window.addEventListener("blur", onAnyChange); return () => { document.removeEventListener("pointerdown", onPressOutside, true); window.removeEventListener("scroll", onAnyChange, { capture: true }); window.removeEventListener("resize", onAnyChange); window.removeEventListener("blur", onAnyChange); }; // close only reads refs and stable callbacks // eslint-disable-next-line react-hooks/exhaustive-deps }, [leaving]); useEffect(() => () => window.clearTimeout(typed.current.timer), []); const choose = (item: ContextMenuItem) => { if (item.disabled || leavingRef.current) return; close(true); item.onSelect?.(item); onItemSelect?.(item); }; const rowElements = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') ?? []); const onMenuKeyDown = (event: ReactKeyboardEvent) => { const rows = rowElements(); const index = rows.indexOf(document.activeElement as HTMLElement); const go = (next: number) => { event.preventDefault(); rows[(next + rows.length) % rows.length]?.focus({ preventScroll: true }); }; if (event.key === "ArrowDown") go(index + 1); else if (event.key === "ArrowUp") go(index < 0 ? rows.length - 1 : index - 1); else if (event.key === "Home") go(0); else if (event.key === "End") go(rows.length - 1); else if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(true); } else if (event.key === "Tab") { event.preventDefault(); close(true); } else if (event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey && event.key !== " ") { // Type a letter (or a few quickly) to jump to the row that starts with it window.clearTimeout(typed.current.timer); typed.current.text += event.key.toLowerCase(); typed.current.timer = window.setTimeout(() => (typed.current.text = ""), 600); const ordered = [...rows.slice(index + 1), ...rows.slice(0, index + 1)]; const match = ordered.find((row) => (row.textContent ?? "").trim().toLowerCase().startsWith(typed.current.text)); if (match) { event.preventDefault(); match.focus({ preventScroll: true }); } } }; const { width, accent, glass, menuClassName } = settings; return (