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:T5430,"use client"; /** * @author: @dorianbaffier * @description: Marking Menu * @version: 1.0.0 * @date: 2026-10-14 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { CalendarDays, Folder, House, Inbox, type LucideIcon, PenLine, Search, Settings, User, } from "lucide-react"; import { AnimatePresence, animate, motion, useMotionValue } from "motion/react"; import { type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactNode, type PointerEvent as ReactPointerEvent, useCallback, useEffect, useId, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface MarkingMenuItem { id: string; label: string; icon: LucideIcon; } export interface MarkingMenuProps { /** Up to eight destinations, laid out clockwise from the top. */ items?: MarkingMenuItem[]; /** Called with the item picked, by menu, flick or keyboard. */ onSelect?: (item: MarkingMenuItem) => void; /** The surface the menu opens over. Defaults to a small demo page. */ children?: ReactNode; className?: string; } const DEFAULT_ITEMS: MarkingMenuItem[] = [ { id: "home", label: "Home", icon: House }, { id: "inbox", label: "Inbox", icon: Inbox }, { id: "calendar", label: "Calendar", icon: CalendarDays }, { id: "files", label: "Files", icon: Folder }, { id: "search", label: "Search", icon: Search }, { id: "compose", label: "Compose", icon: PenLine }, { id: "profile", label: "Profile", icon: User }, { id: "settings", label: "Settings", icon: Settings }, ]; // Hold this long without moving and the menu appears under the finger. // Move further than FLICK first and it never does: the stroke alone picks. const HOLD_MS = 180; const FLICK = 36; // Inside this radius nothing is picked; letting go there cancels. const DEAD_ZONE = 24; // Geometry of the disc, in px. const DISC = 112; const RING = 78; const HUB = 30; // Selected items lean towards the pointer by this much. const LEAN = 7; // How long the stroke's tail stays on screen. const TRAIL_MS = 260; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // Arrow keys walk round the ring: right and down go clockwise. const MOVE_KEYS: Record = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1, }; type Mode = "press" | "sticky"; interface OpenMenu { // Where the disc is drawn: the press point, nudged inside the surface. x: number; y: number; mode: Mode; fromKeyboard: boolean; } interface Gesture { id: number; x: number; y: number; stage: "pending" | "menu" | "flick"; timer: number; } const round = (n: number) => Math.round(n * 100) / 100; /** Item index for a direction, clockwise from the top, or -1 if too short. */ function pick(dx: number, dy: number, count: number) { if (Math.hypot(dx, dy) < DEAD_ZONE) { return -1; } const angle = (Math.atan2(dy, dx) * 180) / Math.PI + 90; const step = 360 / count; return Math.round((((angle % 360) + 360) % 360) / step) % count; } /** A ring sector pointing up, spanning `span` degrees. */ function sectorPath(span: number) { const half = ((span / 2 - 1.5) * Math.PI) / 180; const inner = HUB + 5; const outer = DISC - 5; const point = (r: number, a: number) => `${round(r * Math.sin(a))} ${round(-r * Math.cos(a))}`; return [ `M${point(inner, -half)}`, `L${point(outer, -half)}`, `A${outer} ${outer} 0 0 1 ${point(outer, half)}`, `L${point(inner, half)}`, `A${inner} ${inner} 0 0 0 ${point(inner, -half)}`, "Z", ].join(" "); } function haptic() { if (typeof navigator !== "undefined" && "vibrate" in navigator) { navigator.vibrate(4); } } export default function MarkingMenu({ items = DEFAULT_ITEMS, onSelect, children, className, }: MarkingMenuProps) { const list = items.slice(0, 8); const count = list.length; const step = 360 / count; const menuId = useId(); const surfaceRef = useRef(null); const triggerRef = useRef(null); const menuRef = useRef(null); const aimRef = useRef(null); const trailRef = useRef(null); const gestureRef = useRef(null); const trailPoints = useRef<{ x: number; y: number; t: number }[]>([]); const trailFrame = useRef(0); const [open, setOpen] = useState(null); const [selected, setSelected] = useState(-1); const [current, setCurrent] = useState(list[0]); const [flash, setFlash] = useState<{ item: MarkingMenuItem; x: number; y: number; key: number; } | null>(null); // Live mirrors for pointer handlers, which must not wait for a render. const openRef = useRef(open); openRef.current = open; const selectedRef = useRef(selected); selectedRef.current = selected; // The highlight swings round to the picked slice on a spring, always the // short way. const wedge = useMotionValue(0); useEffect(() => { if (selected < 0) { return; } const from = wedge.get(); const to = selected * step; const delta = ((((to - from) % 360) + 540) % 360) - 180; const controls = animate(wedge, from + delta, { type: "spring", stiffness: 520, damping: 36, }); return () => controls.stop(); }, [selected, step, wedge]); const local = useCallback((event: { clientX: number; clientY: number }) => { const rect = surfaceRef.current?.getBoundingClientRect(); return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0), }; }, []); /** Where to draw the disc so it stays inside the surface. */ const place = useCallback((x: number, y: number) => { const rect = surfaceRef.current?.getBoundingClientRect(); const w = rect?.width ?? 0; const h = rect?.height ?? 0; const pad = DISC + 8; return { x: w > pad * 2 ? Math.min(Math.max(x, pad), w - pad) : w / 2, y: h > pad * 2 ? Math.min(Math.max(y, pad), h - pad) : h / 2, }; }, []); const select = useCallback((index: number) => { if (index !== selectedRef.current) { selectedRef.current = index; setSelected(index); if (index >= 0) { haptic(); } } }, []); /** Point the aim tick at the pointer and pick the slice it is in. */ const aim = useCallback( (x: number, y: number) => { const menu = openRef.current; if (!menu) { return; } const dx = x - menu.x; const dy = y - menu.y; const tick = aimRef.current; if (tick) { const away = Math.hypot(dx, dy) >= DEAD_ZONE; tick.style.opacity = away ? "1" : "0"; tick.style.transform = `rotate(${Math.atan2(dy, dx) + Math.PI / 2}rad)`; } select(pick(dx, dy, count)); }, [count, select] ); const close = useCallback(() => { const menu = openRef.current; openRef.current = null; setOpen(null); select(-1); if (menu?.fromKeyboard) { triggerRef.current?.focus(); } }, [select]); const commit = useCallback( (index: number, at?: { x: number; y: number }) => { const item = list[index]; if (item) { setCurrent(item); onSelect?.(item); if (at) { setFlash({ item, ...at, key: performance.now() }); } } close(); }, [list, onSelect, close] ); const show = useCallback( (x: number, y: number, mode: Mode, fromKeyboard = false) => { const at = place(x, y); const menu = { ...at, mode, fromKeyboard }; openRef.current = menu; setOpen(menu); select(fromKeyboard ? 0 : -1); }, [place, select] ); // The stroke the pointer leaves while pressed, eaten from its tail. const drawTrail = useCallback(() => { trailFrame.current = 0; const now = performance.now(); const points = trailPoints.current; while (points.length > 0 && now - points[0].t > TRAIL_MS) { points.shift(); } const path = trailRef.current; if (path) { path.setAttribute( "d", points .map((p, i) => `${i === 0 ? "M" : "L"}${round(p.x)} ${round(p.y)}`) .join("") ); } if (points.length > 0) { trailFrame.current = requestAnimationFrame(drawTrail); } }, []); const addTrail = useCallback( (x: number, y: number) => { trailPoints.current.push({ x, y, t: performance.now() }); if (!trailFrame.current) { trailFrame.current = requestAnimationFrame(drawTrail); } }, [drawTrail] ); useEffect( () => () => { cancelAnimationFrame(trailFrame.current); window.clearTimeout(gestureRef.current?.timer); }, [] ); const onPointerDown = (event: ReactPointerEvent) => { if (event.button !== 0 || gestureRef.current) { return; } if ((event.target as HTMLElement).closest("[data-marking-trigger]")) { return; } const p = local(event); const menu = openRef.current; if (menu?.mode === "sticky") { // A sticky menu (right click, keyboard) is picked with a click. aim(p.x, p.y); commit(selectedRef.current); return; } event.preventDefault(); event.currentTarget.setPointerCapture(event.pointerId); const gesture: Gesture = { id: event.pointerId, x: p.x, y: p.y, stage: "pending", timer: window.setTimeout(() => { if (gestureRef.current === gesture && gesture.stage === "pending") { gesture.stage = "menu"; show(gesture.x, gesture.y, "press"); } }, HOLD_MS), }; gestureRef.current = gesture; addTrail(p.x, p.y); }; const onPointerMove = (event: ReactPointerEvent) => { const p = local(event); const gesture = gestureRef.current; if (!gesture) { if (openRef.current?.mode === "sticky") { aim(p.x, p.y); } return; } if (event.pointerId !== gesture.id) { return; } addTrail(p.x, p.y); if ( gesture.stage === "pending" && Math.hypot(p.x - gesture.x, p.y - gesture.y) > FLICK ) { // Moving off before the menu shows: an expert stroke. No menu, the // direction alone decides. window.clearTimeout(gesture.timer); gesture.stage = "flick"; } if (gesture.stage === "menu") { aim(p.x, p.y); } }; const onPointerUp = (event: ReactPointerEvent) => { const gesture = gestureRef.current; if (!gesture || event.pointerId !== gesture.id) { return; } gestureRef.current = null; window.clearTimeout(gesture.timer); const p = local(event); if (gesture.stage === "menu") { aim(p.x, p.y); commit(selectedRef.current); } else if (gesture.stage === "flick") { commit(pick(p.x - gesture.x, p.y - gesture.y, count), p); } }; const onPointerCancel = (event: ReactPointerEvent) => { const gesture = gestureRef.current; if (gesture && event.pointerId === gesture.id) { window.clearTimeout(gesture.timer); gestureRef.current = null; close(); } }; const onContextMenu = (event: ReactMouseEvent) => { event.preventDefault(); const gesture = gestureRef.current; if (gesture) { window.clearTimeout(gesture.timer); gestureRef.current = null; } const p = local(event); show(p.x, p.y, "sticky"); }; const openFromKeyboard = () => { const rect = surfaceRef.current?.getBoundingClientRect(); show((rect?.width ?? 0) / 2, (rect?.height ?? 0) / 2, "sticky", true); }; useEffect(() => { if (open?.fromKeyboard) { menuRef.current?.focus(); } }, [open]); const onMenuKeyDown = (event: ReactKeyboardEvent) => { const index = selectedRef.current; const move = MOVE_KEYS[event.key]; const digit = Number.parseInt(event.key, 10); if (move) { event.preventDefault(); // From nothing picked, the first step lands on the top item. let from = index; if (index < 0) { from = move > 0 ? -1 : 1; } select((from + move + count) % count); } else if (event.key === "Enter" || event.key === " ") { event.preventDefault(); commit(index); } else if (event.key === "Escape" || event.key === "Tab") { close(); } else if (digit >= 1 && digit <= count) { event.preventDefault(); commit(digit - 1); } }; const Current = current?.icon ?? House; const active = selected >= 0 ? list[selected] : undefined; return ( // biome-ignore lint/a11y/noStaticElementInteractions: a gesture surface; the Menu button is its keyboard path. // biome-ignore lint/a11y/noNoninteractiveElementInteractions: same as above.

{children ?? (

{current?.label}

Press and hold anywhere, or flick

Right click opens it too

)} {open ? (