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:T46ef,"use client"; import { Slot } from "@radix-ui/react-slot"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const controlCornerInheritClassName = "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]"; const contextMenuThemeClassName = "[--cm-surface:#ffffff] [--cm-foreground:#111111] [--cm-border:#e3e7ec] [--cm-muted-foreground:#6d7480] [--cm-accent:#f3f5f8] [--color-accent:var(--cm-accent)] [--color-accent-foreground:var(--cm-accent-foreground)] [--cm-accent-foreground:#111111] [--cm-destructive:#dc2626] [--cm-ring:rgba(17,17,17,0.16)] dark:[--cm-surface:#111111] dark:[--cm-foreground:#f6f3ec] dark:[--cm-border:#2b2a25] dark:[--cm-muted-foreground:#9a958a] dark:[--cm-accent:#1a1a18] [--color-accent:var(--cm-accent)] [--color-accent-foreground:var(--cm-accent-foreground)] dark:[--cm-accent-foreground:#f6f3ec] dark:[--cm-destructive:#f87171] dark:[--cm-ring:rgba(246,243,236,0.18)]"; const contextMenuPanelClassName = cn( controlCornerClassName, "border border-[color:color-mix(in_oklch,var(--cm-border),transparent_40%)] bg-[color:var(--cm-surface)] p-1.5 text-[color:var(--cm-foreground)] shadow-2xl" ); const contextMenuTriggerClassName = "outline-none focus-visible:ring-2 focus-visible:ring-[color:color-mix(in_oklch,var(--cm-ring),transparent_50%)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--cm-surface)]"; const contextMenuItemHighlightClassName = cn( controlCornerInheritClassName, "absolute inset-0 bg-[color:var(--cm-accent)]" ); const contextMenuItemClassName = cn( controlCornerClassName, "relative flex w-full cursor-pointer items-center gap-2.5 px-3 py-2.5 text-left font-medium text-sm outline-none transition-colors" ); const contextMenuItemDefaultClassName = "text-[color:color-mix(in_oklch,var(--cm-foreground),transparent_15%)] hover:bg-accent/60"; const contextMenuItemDestructiveClassName = "text-[color:var(--cm-destructive)] hover:bg-accent/60"; export type ContextMenuItem = { label: string; icon?: React.ReactNode; shortcut?: string; onSelect?: () => void; destructive?: boolean; disabled?: boolean; separatorAfter?: boolean; }; type Position = { x: number; y: number }; type MenuOrigin = "top-left" | "top-right" | "bottom-left" | "bottom-right"; export interface ContextMenuProps { items: ContextMenuItem[]; children: React.ReactNode; className?: string; menuClassName?: string; } const MENU_WIDTH = 232; const ITEM_HEIGHT = 44; const TYPEAHEAD_RESET_MS = 500; const VIEWPORT_MARGIN = 8; export function ContextMenu({ items, children, className, menuClassName, }: ContextMenuProps) { const [open, setOpen] = React.useState(false); const [mounted, setMounted] = React.useState(false); const [anchor, setAnchor] = React.useState({ x: 0, y: 0 }); const [pos, setPos] = React.useState({ x: 0, y: 0 }); const [origin, setOrigin] = React.useState("top-left"); const [activeIndex, setActiveIndex] = React.useState(null); const triggerRef = React.useRef(null); const menuRef = React.useRef(null); const itemRefs = React.useRef>([]); const returnFocusRef = React.useRef(null); const typeaheadRef = React.useRef(""); const typeaheadTimeoutRef = React.useRef(null); const shouldSyncFocusRef = React.useRef(false); const enabledIndexes = React.useMemo( () => items.reduce((indexes, item, index) => { if (!item.disabled) { indexes.push(index); } return indexes; }, []), [items] ); React.useEffect(() => { setMounted(true); }, []); const clearTypeahead = React.useCallback(() => { if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); typeaheadTimeoutRef.current = null; } typeaheadRef.current = ""; }, []); React.useEffect(() => clearTypeahead, [clearTypeahead]); const getFirstEnabledIndex = React.useCallback( () => enabledIndexes[0] ?? null, [enabledIndexes] ); const getLastEnabledIndex = React.useCallback( () => (enabledIndexes.length > 0 ? (enabledIndexes.at(-1) ?? null) : null), [enabledIndexes] ); const focusItem = React.useCallback((index: number | null) => { if (index === null) { menuRef.current?.focus(); return; } itemRefs.current[index]?.focus(); }, []); const closeMenu = React.useCallback( (restoreFocus = false) => { clearTypeahead(); setOpen(false); setActiveIndex(null); if (!restoreFocus) { return; } const nextFocusTarget = returnFocusRef.current ?? triggerRef.current; if (!nextFocusTarget) { return; } window.requestAnimationFrame(() => { nextFocusTarget.focus(); }); }, [clearTypeahead] ); const getNextEnabledIndex = React.useCallback( (currentIndex: number | null, direction: 1 | -1) => { if (!enabledIndexes.length) { return null; } if (currentIndex === null) { return direction === 1 ? (enabledIndexes[0] ?? null) : (enabledIndexes.at(-1) ?? null); } const currentPosition = enabledIndexes.indexOf(currentIndex); if (currentPosition === -1) { return direction === 1 ? (enabledIndexes[0] ?? null) : (enabledIndexes.at(-1) ?? null); } const nextPosition = (currentPosition + direction + enabledIndexes.length) % enabledIndexes.length; return enabledIndexes[nextPosition] ?? null; }, [enabledIndexes] ); const findMatchingIndex = React.useCallback( (query: string, fromIndex: number | null) => { const normalizedQuery = query.trim().toLowerCase(); if (!normalizedQuery) { return null; } const startIndex = fromIndex === null ? 0 : (fromIndex + 1) % Math.max(items.length, 1); for (let offset = 0; offset < items.length; offset += 1) { const index = (startIndex + offset) % items.length; const item = items[index]; if (item?.disabled) { continue; } if (item?.label.toLowerCase().startsWith(normalizedQuery)) { return index; } } return null; }, [items] ); const updatePosition = React.useCallback( (clientX: number, clientY: number, width: number, height: number) => { const vw = window.innerWidth; const vh = window.innerHeight; const overflowRight = clientX + width + VIEWPORT_MARGIN > vw; const overflowBottom = clientY + height + VIEWPORT_MARGIN > vh; const x = overflowRight ? Math.max(VIEWPORT_MARGIN, clientX - width) : Math.min(clientX, vw - width - VIEWPORT_MARGIN); const y = overflowBottom ? Math.max(VIEWPORT_MARGIN, clientY - height) : Math.min(clientY, vh - height - VIEWPORT_MARGIN); setOrigin( `${overflowBottom ? "bottom" : "top"}-${overflowRight ? "right" : "left"}` ); setPos({ x, y }); }, [] ); const openAt = React.useCallback( (clientX: number, clientY: number) => { if (!items.length) { return; } const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null; returnFocusRef.current = activeElement && triggerRef.current?.contains(activeElement) ? activeElement : triggerRef.current; shouldSyncFocusRef.current = true; clearTypeahead(); setAnchor({ x: clientX, y: clientY }); setPos({ x: clientX, y: clientY }); setActiveIndex(getFirstEnabledIndex()); setOpen(true); }, [clearTypeahead, getFirstEnabledIndex, items.length] ); const openFromElement = React.useCallback( (element: HTMLElement) => { const rect = element.getBoundingClientRect(); openAt(rect.left + Math.min(rect.width / 2, 24), rect.bottom); }, [openAt] ); const moveActiveIndex = React.useCallback((index: number | null) => { if (index === null) { return; } shouldSyncFocusRef.current = true; setActiveIndex(index); }, []); const handleSelect = React.useCallback( (index: number | null, restoreFocus = false) => { if (index === null) { return; } const item = items[index]; if (!item || item.disabled) { return; } item.onSelect?.(); closeMenu(restoreFocus); }, [closeMenu, items] ); const handleContextMenu = (e: React.MouseEvent) => { e.preventDefault(); openAt(e.clientX, e.clientY); }; const handleTriggerKeyDown = (e: React.KeyboardEvent) => { if (!(e.shiftKey && e.key === "F10") && e.key !== "ContextMenu") { return; } e.preventDefault(); const target = e.target instanceof HTMLElement ? e.target : triggerRef.current; if (!target) { return; } openFromElement(target); }; const getNavigationIndexForKey = React.useCallback( (key: string) => { switch (key) { case "ArrowDown": return getNextEnabledIndex(activeIndex, 1); case "ArrowUp": return getNextEnabledIndex(activeIndex, -1); case "Home": return getFirstEnabledIndex(); case "End": return getLastEnabledIndex(); default: return undefined; } }, [ activeIndex, getFirstEnabledIndex, getLastEnabledIndex, getNextEnabledIndex, ] ); const handleTypeaheadKey = React.useCallback( (key: string) => { const normalizedKey = key.toLowerCase(); const nextQuery = typeaheadRef.current === normalizedKey ? normalizedKey : `${typeaheadRef.current}${normalizedKey}`; const match = findMatchingIndex(nextQuery, activeIndex); typeaheadRef.current = nextQuery; if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); } typeaheadTimeoutRef.current = window.setTimeout(() => { typeaheadRef.current = ""; typeaheadTimeoutRef.current = null; }, TYPEAHEAD_RESET_MS); moveActiveIndex(match); }, [activeIndex, findMatchingIndex, moveActiveIndex] ); const handleMenuKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); closeMenu(true); return; } if (e.key === "Tab") { closeMenu(); return; } const navigationIndex = getNavigationIndexForKey(e.key); if (navigationIndex !== undefined) { e.preventDefault(); moveActiveIndex(navigationIndex); return; } if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleSelect(activeIndex, true); return; } if ( e.altKey || e.ctrlKey || e.metaKey || e.key.length !== 1 || e.key === " " ) { return; } handleTypeaheadKey(e.key); }; React.useLayoutEffect(() => { if (!(open && menuRef.current)) { return; } const menuElement = menuRef.current; const measureAndPosition = () => { const { height, width } = menuElement.getBoundingClientRect(); updatePosition(anchor.x, anchor.y, width, height); }; measureAndPosition(); const observer = new ResizeObserver(() => { measureAndPosition(); }); observer.observe(menuElement); return () => observer.disconnect(); }, [anchor.x, anchor.y, open, updatePosition]); React.useEffect(() => { if (!open) { return; } const handleWindowMouseDown = () => closeMenu(); const handleWindowResize = () => closeMenu(); const handleWindowScroll = (event: Event) => { if ( event.target instanceof Node && menuRef.current?.contains(event.target) ) { return; } closeMenu(); }; window.addEventListener("mousedown", handleWindowMouseDown); window.addEventListener("scroll", handleWindowScroll, true); window.addEventListener("resize", handleWindowResize); return () => { window.removeEventListener("mousedown", handleWindowMouseDown); window.removeEventListener("scroll", handleWindowScroll, true); window.removeEventListener("resize", handleWindowResize); }; }, [closeMenu, open]); React.useEffect(() => { if (!(open && shouldSyncFocusRef.current)) { return; } shouldSyncFocusRef.current = false; const frame = window.requestAnimationFrame(() => { focusItem(activeIndex); }); return () => window.cancelAnimationFrame(frame); }, [activeIndex, focusItem, open]); const transformOrigin = { "top-left": "top left", "top-right": "top right", "bottom-left": "bottom left", "bottom-right": "bottom right", }[origin]; const menu = ( {open && mounted ? ( e.preventDefault()} onKeyDown={handleMenuKeyDown} onMouseDown={(e) => e.stopPropagation()} ref={menuRef} role="menu" style={{ position: "fixed", top: pos.y, left: pos.x, width: MENU_WIDTH, maxHeight: `calc(100vh - ${VIEWPORT_MARGIN * 2}px)`, overflowY: "auto", overscrollBehavior: "contain", transformOrigin, zIndex: 50, }} tabIndex={-1} transition={{ duration: 0.14, ease: [0.16, 1, 0.3, 1], }} > {items.map((item, i) => ( { itemRefs.current[i] = node; }} item={item} onClick={() => { if (item.disabled) { return; } handleSelect(i); }} onFocus={() => setActiveIndex(i)} onHover={() => setActiveIndex(i)} /> {item.separatorAfter && i < items.length - 1 && (

)} ))} ) : null} ); const triggerClassName = cn( contextMenuThemeClassName, contextMenuTriggerClassName, className ); const useSlottedTrigger = React.isValidElement(children) && children.type !== React.Fragment; return ( <> {useSlottedTrigger ? ( {children} ) : ( )} {mounted ? createPortal(menu, document.body) : null} ); } function MenuItem({ item, active, buttonRef, onFocus, onHover, onClick, }: { item: ContextMenuItem; active: boolean; buttonRef: (node: HTMLButtonElement | null) => void; onFocus: () => void; onHover: () => void; onClick: () => void; }) { return ( {active && !item.disabled && ( )} {item.icon && ( {item.icon} )} {item.label} {item.shortcut && ( {item.shortcut} )} ); } 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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","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":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"context-menu.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]