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:T3df4,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const EXIT = [0.23, 1, 0.32, 1] as const; const ITEM_H = 32; const SEP_H = 9; const PAD = 5; const BORDER = 1; export type ContextMenuItem = | { id: string; type: "separator" } | { id: string; type?: "item"; label: string; shortcut?: string; icon?: ReactNode; disabled?: boolean; onSelect?: (id: string) => void; }; export type ContextMenuPlacement = { left: number; top: number; width: number; maxHeight: number; transformOrigin: string; }; export type UseContextMenuOptions = { items: ContextMenuItem[]; onSelect?: (id: string) => void; width?: number; margin?: number; holdDuration?: number; moveTolerance?: number; disabled?: boolean; }; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), Math.max(min, max)); } function measure(items: ContextMenuItem[]) { let height = PAD * 2 + BORDER * 2; for (const item of items) height += item.type === "separator" ? SEP_H : ITEM_H; return height; } export function useContextMenu({ items, onSelect, width = 224, margin = 8, holdDuration = 460, moveTolerance = 8, disabled = false, }: UseContextMenuOptions) { const [placement, setPlacement] = useState(null); const [active, setActive] = useState(-1); const triggerRef = useRef(null); const menuRef = useRef(null); const itemRefs = useRef<(HTMLButtonElement | null)[]>([]); const opened = useRef(false); const activeRef = useRef(-1); const hold = useRef | null>(null); const holdFrom = useRef<{ x: number; y: number } | null>(null); const swallowClick = useRef(false); const pressed = useRef(-1); const query = useRef(""); const queryTimer = useRef | null>(null); activeRef.current = active; const list = useRef(items); list.current = items; const emit = useRef(onSelect); emit.current = onSelect; const height = useMemo(() => measure(items), [items]); const steps = useMemo( () => items.reduce((acc, item, index) => { if (item.type !== "separator" && !item.disabled) acc.push(index); return acc; }, []), [items], ); const stepsRef = useRef(steps); stepsRef.current = steps; const clearHold = useCallback(() => { if (hold.current !== null) clearTimeout(hold.current); hold.current = null; holdFrom.current = null; }, []); const close = useCallback( (restoreFocus = false) => { clearHold(); if (!opened.current) return; opened.current = false; setPlacement(null); setActive(-1); if (restoreFocus) triggerRef.current?.focus({ preventScroll: true }); }, [clearHold], ); const openAt = useCallback( (x: number, y: number, source: "pointer" | "keyboard" = "pointer") => { if (disabled || list.current.length === 0) return; const vw = document.documentElement.clientWidth; const vh = document.documentElement.clientHeight; const w = Math.min(width, Math.max(160, vw - margin * 2)); const cap = Math.max(ITEM_H + PAD * 2, vh - margin * 2); const h = Math.min(height, cap); const left = clamp(x + w + margin <= vw ? x : x - w, margin, vw - w - margin); const top = clamp(y + h + margin <= vh ? y : y - h, margin, vh - h - margin); opened.current = true; pressed.current = -1; setPlacement({ left, top, width: w, maxHeight: cap, transformOrigin: `${clamp(x - left, 0, w)}px ${clamp(y - top, 0, h)}px`, }); setActive(source === "keyboard" ? (stepsRef.current[0] ?? -1) : -1); }, [disabled, height, margin, width], ); const choose = useCallback( (index: number) => { const item = list.current[index]; if (!item || item.type === "separator" || item.disabled) return; close(true); item.onSelect?.(item.id); emit.current?.(item.id); }, [close], ); const step = useCallback((dir: 1 | -1) => { const order = stepsRef.current; if (order.length === 0) return; const at = order.indexOf(activeRef.current); setActive( at === -1 ? (dir === 1 ? order[0] : order[order.length - 1]) : order[(at + dir + order.length) % order.length], ); }, []); const edge = useCallback((which: "first" | "last") => { const order = stepsRef.current; if (order.length === 0) return; setActive(which === "first" ? order[0] : order[order.length - 1]); }, []); const typeahead = useCallback((char: string) => { query.current += char.toLowerCase(); if (queryTimer.current !== null) clearTimeout(queryTimer.current); queryTimer.current = setTimeout(() => { query.current = ""; }, 600); const order = stepsRef.current; const from = order.indexOf(activeRef.current) + 1; for (let k = 0; k < order.length; k += 1) { const index = order[(from + k) % order.length]; const item = list.current[index]; if (item.type !== "separator" && item.label.toLowerCase().startsWith(query.current)) { setActive(index); return; } } }, []); const isOpen = placement !== null; useEffect(() => { if (!isOpen) return; const node = activeRef.current >= 0 ? itemRefs.current[activeRef.current] : menuRef.current; node?.focus({ preventScroll: true }); if (activeRef.current >= 0) node?.scrollIntoView({ block: "nearest" }); }, [isOpen, active]); useEffect(() => { if (!isOpen) return; const inside = (target: EventTarget | null) => menuRef.current?.contains(target as Node) ?? false; const onDown = (event: PointerEvent) => { if (inside(event.target)) return; if (event.button === 2 && triggerRef.current?.contains(event.target as Node)) return; close(false); }; const onScroll = (event: Event) => { if (inside(event.target)) return; close(false); }; const onKey = (event: KeyboardEvent) => { if (event.key !== "Escape") return; event.preventDefault(); event.stopPropagation(); close(true); }; const bail = () => close(false); document.addEventListener("pointerdown", onDown, true); document.addEventListener("scroll", onScroll, { capture: true, passive: true }); document.addEventListener("keydown", onKey, true); window.addEventListener("resize", bail); window.addEventListener("blur", bail); return () => { document.removeEventListener("pointerdown", onDown, true); document.removeEventListener("scroll", onScroll, { capture: true }); document.removeEventListener("keydown", onKey, true); window.removeEventListener("resize", bail); window.removeEventListener("blur", bail); }; }, [isOpen, close]); useEffect( () => () => { if (hold.current !== null) clearTimeout(hold.current); if (queryTimer.current !== null) clearTimeout(queryTimer.current); }, [], ); const triggerProps = { tabIndex: disabled ? -1 : 0, "aria-haspopup": "menu" as const, "aria-expanded": isOpen, style: { touchAction: "manipulation", WebkitTouchCallout: "none" } as CSSProperties, onContextMenu: (event: ReactMouseEvent) => { if (disabled) return; event.preventDefault(); event.stopPropagation(); clearHold(); triggerRef.current = event.currentTarget as HTMLDivElement; openAt(event.clientX, event.clientY, "pointer"); }, onKeyDown: (event: ReactKeyboardEvent) => { if (disabled || opened.current) return; const wants = event.key === "ContextMenu" || (event.shiftKey && event.key === "F10") || (event.key === "Enter" && event.target === event.currentTarget); if (!wants) return; event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); openAt(Math.round(rect.left + 14), Math.round(rect.top + 14), "keyboard"); }, onPointerDown: (event: ReactPointerEvent) => { if (disabled || event.pointerType === "mouse" || opened.current) return; const x = event.clientX; const y = event.clientY; triggerRef.current = event.currentTarget as HTMLDivElement; holdFrom.current = { x, y }; hold.current = setTimeout(() => { hold.current = null; swallowClick.current = true; navigator.vibrate?.(10); openAt(x, y, "pointer"); }, holdDuration); }, onPointerMove: (event: ReactPointerEvent) => { const from = holdFrom.current; if (hold.current === null || !from) return; if (Math.hypot(event.clientX - from.x, event.clientY - from.y) > moveTolerance) clearHold(); }, onPointerUp: clearHold, onPointerCancel: clearHold, onPointerLeave: clearHold, onClick: (event: ReactMouseEvent) => { if (!swallowClick.current) return; swallowClick.current = false; event.preventDefault(); event.stopPropagation(); }, }; const menuProps = { role: "menu" as const, tabIndex: -1, "aria-orientation": "vertical" as const, onContextMenu: (event: ReactMouseEvent) => event.preventDefault(), onKeyDown: (event: ReactKeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); step(event.key === "ArrowDown" ? 1 : -1); return; } if (event.key === "Home" || event.key === "End") { event.preventDefault(); edge(event.key === "Home" ? "first" : "last"); return; } if (event.key === "Tab") { event.preventDefault(); close(true); return; } if ( event.key.length === 1 && event.key !== " " && !event.metaKey && !event.ctrlKey && !event.altKey ) { typeahead(event.key); } }, }; const getItemProps = (index: number) => ({ ref: (node: HTMLButtonElement | null) => { itemRefs.current[index] = node; }, role: "menuitem" as const, tabIndex: -1, onPointerMove: () => { const item = list.current[index]; if (activeRef.current === index || item.type === "separator" || item.disabled) return; setActive(index); }, onPointerDown: () => { pressed.current = index; }, onClick: (event: ReactMouseEvent) => { if (event.detail !== 0 && pressed.current !== index) return; pressed.current = -1; choose(index); }, }); return { isOpen, active, placement, openAt, close, triggerRef, triggerProps, menuRef, menuProps, getItemProps, }; } export type ContextMenuProps = { items: ContextMenuItem[]; children: ReactNode; onSelect?: (id: string) => void; label?: string; hint?: string; width?: number; disabled?: boolean; className?: string; }; export function ContextMenu({ items, children, onSelect, label = "Context menu", hint = "Right-click, or press Shift plus F10, for options", width = 224, disabled = false, className = "", }: ContextMenuProps) { const uid = useId(); const reduced = useReducedMotion(); const [host, setHost] = useState(null); useEffect(() => setHost(document.body), []); const { isOpen, active, placement, triggerRef, triggerProps, menuRef, menuProps, getItemProps, } = useContextMenu({ items, onSelect, width, disabled }); const hasIcons = items.some((item) => item.type !== "separator" && item.icon); const menuId = `${uid}-menu`; return ( <>

{children} {hint}

{placement ? ( {items.map((item, index) => item.type === "separator" ? (

) : ( ), )} ) : null} ); } function Portal({ host, children, }: { host: HTMLElement | null; children: ReactNode; }) { if (!host) return null; return createPortal(children, host); } 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/context-menu.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/context-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]