"use client"; import { useEffect, useMemo, useRef, useState, type ComponentType, } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Scissors, Copy, ClipboardPaste, PenLine, FolderInput, Trash2, ChevronRight, MousePointer2, MousePointerClick, Folder, Users, Archive, } from "lucide-react"; import { cn } from "@/lib/utils"; /* Lucide icons satisfy this shape without importing extra type exports. */ type MenuIcon = ComponentType<{ className?: string; size?: number | string; strokeWidth?: number; }>; export type SubMenuItem = { id: string; label: string; icon: MenuIcon; }; export type ItemEntry = { kind?: "item"; id: string; label: string; icon: MenuIcon; shortcut?: string; danger?: boolean; submenu?: SubMenuItem[]; }; export type ContextMenuEntry = ItemEntry | { kind: "separator" }; const MENU_W = 236; const SUB_W = 190; const ROW_H = 36; const SEP_H = 9; const PAD = 6; const round = (n: number) => Math.round(n); const clamp = (n: number, lo: number, hi: number) => Math.min(Math.max(n, lo), hi); function isItem(e: ContextMenuEntry): e is ItemEntry { return e.kind !== "separator"; } type OpenState = { /** cursor position as a fraction of the surface, 0..100 */ xPct: number; yPct: number; /** bumped on every fresh open so the panel re-mounts and re-springs */ cycle: number; }; type Frame = { open: boolean; xPct?: number; yPct?: number; activeId: string | null; sub: boolean; subActiveId: string | null; hold: number; }; export function ContextMenu({ entries, hint = "A native-feeling menu that springs from the cursor", autoplay = false, className, }: { entries: ContextMenuEntry[]; hint?: string; /** Drives a scripted open/hover loop so a static preview looks alive. */ autoplay?: boolean; className?: string; }) { const surfaceRef = useRef(null); const [size, setSize] = useState({ w: 0, h: 0 }); const [open, setOpen] = useState(false); const [pos, setPos] = useState({ xPct: 30, yPct: 24, cycle: 0 }); const [activeId, setActiveId] = useState(null); const [subOpen, setSubOpen] = useState(false); const [subActiveId, setSubActiveId] = useState(null); const items = useMemo(() => entries.filter(isItem), [entries]); /* deterministic menu height from the entry list (no DOM measuring) */ const menuH = useMemo( () => entries.reduce((h, e) => h + (e.kind === "separator" ? SEP_H : ROW_H), PAD * 2), [entries] ); /* vertical offset of a submenu row's top edge inside the panel */ const subTopFor = useMemo(() => { const map: Record = {}; let acc = PAD; for (const e of entries) { if (e.kind === "separator") { acc += SEP_H; continue; } map[e.id] = acc; acc += ROW_H; } return map; }, [entries]); /* observe the surface so the pct -> px math stays correct on resize */ useEffect(() => { const el = surfaceRef.current; if (!el) return; const measure = () => setSize({ w: el.clientWidth, h: el.clientHeight }); measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); /* build a lively, generic timeline straight from the entries */ const frames = useMemo(() => { if (!autoplay || items.length === 0) return []; const anchors = [ { x: 27, y: 22 }, { x: 55, y: 40 }, ]; const out: Frame[] = []; anchors.forEach((a) => { out.push({ open: true, xPct: a.x, yPct: a.y, activeId: null, sub: false, subActiveId: null, hold: 460, }); items.forEach((it) => { out.push({ open: true, activeId: it.id, sub: false, subActiveId: null, hold: 560, }); if (it.submenu && it.submenu.length > 0) { out.push({ open: true, activeId: it.id, sub: true, subActiveId: null, hold: 460, }); it.submenu.forEach((s) => { out.push({ open: true, activeId: it.id, sub: true, subActiveId: s.id, hold: 620, }); }); } }); out.push({ open: false, activeId: null, sub: false, subActiveId: null, hold: 520, }); }); return out; }, [autoplay, items]); /* run the timeline with self-scheduling timeouts */ useEffect(() => { if (!autoplay || frames.length === 0) return; let i = 0; let alive = true; let timer: ReturnType; const run = () => { if (!alive) return; const f = frames[i]; if (f.open && f.xPct !== undefined && f.yPct !== undefined) { setPos((p) => ({ xPct: f.xPct!, yPct: f.yPct!, cycle: p.cycle + 1 })); } setOpen(f.open); setActiveId(f.activeId); setSubOpen(f.sub); setSubActiveId(f.subActiveId); timer = setTimeout(() => { i = (i + 1) % frames.length; run(); }, f.hold); }; run(); return () => { alive = false; clearTimeout(timer); }; }, [autoplay, frames]); /* close on escape / outside click for genuine right-click usage */ useEffect(() => { if (autoplay) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setOpen(false); }; const onDown = (e: MouseEvent) => { if (!surfaceRef.current?.contains(e.target as Node)) return; setOpen(false); }; window.addEventListener("keydown", onKey); window.addEventListener("mousedown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("mousedown", onDown); }; }, [autoplay]); function onContextMenu(e: React.MouseEvent) { if (autoplay) return; e.preventDefault(); const rect = surfaceRef.current?.getBoundingClientRect(); if (!rect) return; setPos((p) => ({ xPct: ((e.clientX - rect.left) / rect.width) * 100, yPct: ((e.clientY - rect.top) / rect.height) * 100, cycle: p.cycle + 1, })); setActiveId(null); setSubOpen(false); setSubActiveId(null); setOpen(true); } /* geometry: cursor point in px, then a clamped top-left for the panel */ const px = (pos.xPct / 100) * size.w; const py = (pos.yPct / 100) * size.h; const left = clamp(px, 12, Math.max(12, size.w - MENU_W - 12)); const top = clamp(py, 12, Math.max(12, size.h - menuH - 12)); const originX = round(clamp(px - left, 6, MENU_W - 6)); const originY = round(clamp(py - top, 6, menuH - 6)); const activeEntry = items.find((it) => it.id === activeId); const openLeft = left + MENU_W + SUB_W + 12 > size.w; return (

{/* texture: faint dot grid + a single corner glow, kept restrained */}

{/* rest-state hint, sits behind the menu */}

right click me

{hint}

{/* scripted cursor + click ripple, only while autoplaying */} {autoplay && size.w > 0 && ( <> {open && ( )} )} {/* the menu */} {open && size.w > 0 && ( {/* top hairline */}

{entries.map((entry, i) => { if (entry.kind === "separator") { return (

); } const active = entry.id === activeId; const Icon = entry.icon; const hasSub = !!entry.submenu && entry.submenu.length > 0; return (

{ setActiveId(entry.id); setSubOpen(hasSub); setSubActiveId(null); } } className="relative flex h-9 cursor-default items-center gap-2.5 rounded-lg px-2.5" > {active && ( )} {entry.label} {hasSub ? ( ) : entry.shortcut ? ( {entry.shortcut} ) : null}

); })} {/* submenu flyout */} {subOpen && activeEntry?.submenu && (

{activeEntry.label}

{activeEntry.submenu.map((s) => { const sActive = s.id === subActiveId; const SIcon = s.icon; return (

setSubActiveId(s.id) } className="relative flex h-9 cursor-default items-center gap-2.5 rounded-lg px-2.5" > {sActive && ( )} {s.label}

); })} )} )}

); } const DEMO_ENTRIES: ContextMenuEntry[] = [ { id: "cut", label: "Cut", icon: Scissors, shortcut: "⌘X" }, { id: "copy", label: "Copy", icon: Copy, shortcut: "⌘C" }, { id: "paste", label: "Paste", icon: ClipboardPaste, shortcut: "⌘V" }, { kind: "separator" }, { id: "rename", label: "Rename", icon: PenLine, shortcut: "⏎" }, { id: "move", label: "Move to", icon: FolderInput, submenu: [ { id: "projects", label: "Projects", icon: Folder }, { id: "team", label: "Team space", icon: Users }, { id: "archive", label: "Archive", icon: Archive }, ], }, { kind: "separator" }, { id: "delete", label: "Delete", icon: Trash2, shortcut: "⌫", danger: true }, ]; export default function Demo() { return (

); }

Context Menu