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:T1879,"use client" import type { ComponentProps } from "react" import * as PieMenuPrimitive from "@/lib/pie-menu/primitive" import { cn } from "@/lib/utils" const EASE_OUT = "ease-[cubic-bezier(0.22,1,0.36,1)]" function PieMenu(props: PieMenuPrimitive.PieMenuProps) { return } function PieMenuTrigger({ className, ...props }: PieMenuPrimitive.PieMenuTriggerProps) { return ( ) } function PieMenuContent({ className, overlayProps, ...props }: PieMenuPrimitive.PieMenuContentProps) { return ( } {...props} /> ) } function PieMenuItem({ className, variant = "default", ...props }: PieMenuPrimitive.PieMenuItemProps & { variant?: "default" | "destructive" }) { return ( ) } function PieMenuCenter({ className, ...props }: ComponentProps) { return ( ) } /** A ring around the dead zone with an arc that turns toward the highlighted item. */ function PieMenuIndicator({ className, children, ...props }: ComponentProps) { return ( {children ?? ( )} ) } const usePieMenuAim = PieMenuPrimitive.usePieMenuAim export { PieMenu, PieMenuTrigger, PieMenuContent, PieMenuItem, PieMenuCenter, PieMenuIndicator, usePieMenuAim, } 53:T7fcb,"use client" import { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type ComponentProps, type CSSProperties, type ReactNode, type RefObject, } from "react" import { Slot } from "radix-ui" import { createPortal } from "react-dom" import { aimFromVector, aimStyle, createAimStore, IDLE_AIM, useAimStore, type AimStore, } from "./aim" import { clampCenter, degToRad, fitScale, itemTranslate, layoutItems, menuExtents, nearestIndex, radToDeg, scaleExtents, shortestRotation, stepIndex, vectorAngle, wedgeIndex, type ItemLayout, type Point, } from "./geometry" import { callHandler, composeHandlers, useComposedRefs, useControllableState, useLatest, } from "./hooks" import { usePresence, type PresenceStatus } from "./use-presence" export type { Aim } from "./aim" export type { PresenceStatus } from "./use-presence" const LONG_PRESS_MS = 450 const LONG_PRESS_TOLERANCE = 10 const TYPEAHEAD_RESET_MS = 600 /* ------------------------------------------------------------------------------------------------- * Root * -----------------------------------------------------------------------------------------------*/ type OpenSource = "pointer" | "keyboard" interface OpenRequest { key: number point: Point source: OpenSource /** The pointer that opened the menu is still down, so a release can select. */ pressed: boolean /** Only this pointer can end the press. Undefined accepts any pointer. */ pointerId?: number } interface RootContextValue { open: boolean request: OpenRequest | null openAt: (request: Omit) => void close: () => void isOpen: () => boolean triggerRef: RefObject triggerId: string contentId: string } const RootContext = createContext(null) function useRootContext(consumer: string) { const context = use(RootContext) if (!context) throw new Error(`<${consumer}> must be used inside .`) return context } export interface PieMenuProps { open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void children?: ReactNode } export function Root({ open: openProp, defaultOpen = false, onOpenChange, children, }: PieMenuProps) { const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange, }) const [request, setRequest] = useState(null) const triggerRef = useRef(null) // Mirrors `open` without waiting for a render, so two events in one frame cannot open twice. const openRef = useRef(open) useLayoutEffect(() => { openRef.current = open }, [open]) const keyRef = useRef(0) const triggerId = useId() const contentId = useId() const openAt = useCallback( (next: Omit) => { openRef.current = true keyRef.current += 1 setRequest({ ...next, key: keyRef.current }) setOpen(true) }, [setOpen] ) const close = useCallback(() => { openRef.current = false setOpen(false) }, [setOpen]) const value = useMemo( () => ({ open, request, openAt, close, isOpen: () => openRef.current, triggerRef, triggerId, contentId, }), [open, request, openAt, close, triggerId, contentId] ) return {children} } /* ------------------------------------------------------------------------------------------------- * Trigger * -----------------------------------------------------------------------------------------------*/ export interface PieMenuTriggerProps extends ComponentProps<"button"> { asChild?: boolean /** * - `press`: primary press opens the menu at the pointer. Drag and release to select. * Enter and Space open it from the keyboard. * - `contextmenu`: right click or long press opens the menu. Enter and Space open it * when the trigger itself has focus, so keys typed in a child input are left alone. * * In both modes, the ContextMenu key and Shift+F10 open the menu from the keyboard. */ openOn?: "press" | "contextmenu" } export function Trigger({ asChild = false, openOn = "press", disabled, ref, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onContextMenu, onKeyDown, ...props }: PieMenuTriggerProps) { const context = useRootContext("PieMenuTrigger") const longPress = useRef<{ timer: number pointerId: number x: number y: number } | null>(null) const cancelLongPress = useCallback(() => { if (!longPress.current) return window.clearTimeout(longPress.current.timer) longPress.current = null }, []) useEffect(() => cancelLongPress, [cancelLongPress]) const composedRef = useComposedRefs(ref, context.triggerRef) const Comp = asChild ? Slot.Root : "button" return ( { if (callHandler(onPointerDown, event) || disabled || context.isOpen()) return const { clientX: x, clientY: y, pointerId } = event if (openOn === "press") { // Ctrl + click is a context click on macOS. if ( event.pointerType === "mouse" && (event.button !== 0 || event.ctrlKey) ) return event.preventDefault() context.openAt({ point: { x, y }, source: "pointer", pressed: true, pointerId, }) return } if (event.pointerType === "mouse") return cancelLongPress() longPress.current = { pointerId, x, y, timer: window.setTimeout(() => { longPress.current = null context.openAt({ point: { x, y }, source: "pointer", pressed: true, pointerId, }) }, LONG_PRESS_MS), } }} onPointerMove={(event) => { if (callHandler(onPointerMove, event)) return const pending = longPress.current if (!pending || pending.pointerId !== event.pointerId) return if ( Math.hypot(event.clientX - pending.x, event.clientY - pending.y) > LONG_PRESS_TOLERANCE ) cancelLongPress() }} onPointerUp={(event) => { if (!callHandler(onPointerUp, event)) cancelLongPress() }} onPointerCancel={(event) => { if (!callHandler(onPointerCancel, event)) cancelLongPress() }} onContextMenu={(event) => { if (callHandler(onContextMenu, event)) return if (context.isOpen()) { event.preventDefault() return } if (openOn !== "contextmenu" || disabled) return event.preventDefault() cancelLongPress() context.openAt({ point: { x: event.clientX, y: event.clientY }, source: "pointer", // macOS fires this on press, Windows on release. pressed: event.buttons !== 0, }) }} onKeyDown={(event) => { if (callHandler(onKeyDown, event) || disabled) return const menuKey = event.key === "ContextMenu" || (event.shiftKey && event.key === "F10") const onTrigger = openOn === "press" || event.target === event.currentTarget const activate = onTrigger && (event.key === "Enter" || event.key === " ") if (!menuKey && !activate) return event.preventDefault() const rect = event.currentTarget.getBoundingClientRect() context.openAt({ point: { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2, }, source: "keyboard", pressed: false, }) }} /> ) } /* ------------------------------------------------------------------------------------------------- * Content * -----------------------------------------------------------------------------------------------*/ interface ItemRecord { id: string element: HTMLElement disabled: boolean textValue: string onSelect: RefObject<((event: Event) => void) | undefined> onHighlight: RefObject<(() => void) | undefined> } interface ContentContextValue { register: (record: ItemRecord) => () => void layoutById: ReadonlyMap highlightedId: string | null selectedId: string | null /** Degrees, or null when nothing is highlighted. */ highlightedAngle: number | null aimStore: AimStore } const ContentContext = createContext(null) function useContentContext(consumer: string) { const context = use(ContentContext) if (!context) throw new Error(`<${consumer}> must be used inside .`) return context } export interface PieMenuContentProps extends ComponentProps<"div"> { /** Distance from the center to each item anchor, in px. */ radius?: number /** Radius of the center area that selects nothing, in px. */ deadZone?: number /** Direction of the first item, in degrees clockwise from 12 o'clock. */ startAngle?: number /** Minimum space between the menu and the viewport edges, in px. */ collisionPadding?: number /** Move focus back to the trigger when the menu closes. */ returnFocus?: boolean /** Call `event.preventDefault()` to keep the menu open. */ onEscapeKeyDown?: (event: KeyboardEvent) => void /** Portal target. Defaults to `document.body`. */ container?: Element | null /** Props for the full-screen layer that captures pointer input while the menu is open. */ overlayProps?: ComponentProps<"div"> } export function Content({ container, ...props }: PieMenuContentProps) { const root = useRootContext("PieMenuContent") const menuRef = useRef(null) const { mounted, status } = usePresence(root.open, menuRef) if (!mounted || typeof document === "undefined") return null const request = root.request ?? requestFromTrigger(root.triggerRef.current) return createPortal( , container ?? document.body ) } interface Gesture { /** `drag`: the opening press is still down. `sticky`: the menu waits for a click or a key. */ mode: "drag" | "sticky" origin: Point pointerId?: number leftDeadZone: boolean pressed: boolean } interface ContentImplProps extends Omit { request: OpenRequest status: PresenceStatus menuRef: RefObject } function ContentImpl({ request, status, menuRef, radius = 96, deadZone = 20, startAngle = 0, collisionPadding = 8, returnFocus = true, onEscapeKeyDown, overlayProps, ref, style, children, ...menuProps }: ContentImplProps) { const root = useRootContext("PieMenuContent") const startRadians = degToRad(startAngle) const [items, setItems] = useState([]) const [highlightedId, setHighlightedId] = useState(null) const [selectedId, setSelectedId] = useState(null) const [fit, setFit] = useState({ center: request.point, scale: 1 }) const overlayRef = useRef(null) const highlightedRef = useRef(null) const lastInput = useRef(request.source) const gesture = useRef({ mode: request.pressed ? "drag" : "sticky", origin: request.point, pointerId: request.pointerId, leftDeadZone: false, pressed: false, }) const [aimStore] = useState(createAimStore) // Mirror the aim into CSS variables on the menu element, with no React render. useLayoutEffect( () => aimStore.subscribe(() => { const menu = menuRef.current if (!menu) return for (const [name, value] of Object.entries(aimStyle(aimStore.get()))) menu.style.setProperty(name, value) }), [aimStore, menuRef] ) const layouts = useMemo( () => layoutItems(items.length, radius, startRadians), [items.length, radius, startRadians] ) const layoutById = useMemo( () => new Map(items.map((item, index) => [item.id, layouts[index]!])), [items, layouts] ) const itemsRef = useLatest(items) const layoutsRef = useLatest(layouts) const fitRef = useLatest(fit) const onEscapeKeyDownRef = useLatest(onEscapeKeyDown) const register = useCallback((record: ItemRecord) => { setItems((current) => sortByDocumentPosition([ ...current.filter((item) => item.id !== record.id), record, ]) ) return () => setItems((current) => current.filter((item) => item.id !== record.id)) }, []) /** Pointer highlights come with a pointer aim. Keyboard highlights aim at the item. */ const highlight = useCallback( (id: string | null, source: OpenSource) => { lastInput.current = source const index = itemsRef.current.findIndex((item) => item.id === id) if (highlightedRef.current !== id) { highlightedRef.current = id setHighlightedId(id) itemsRef.current[index]?.onHighlight.current?.() } const target = index === -1 ? menuRef.current : itemsRef.current[index]!.element if (target && document.activeElement !== target) focus(target, source) if (source === "keyboard") { const layout = layoutsRef.current[index] aimStore.set( layout ? aimFromVector(layout.sin, -layout.cos, 1) : IDLE_AIM ) } }, [aimStore, itemsRef, layoutsRef, menuRef] ) const select = useCallback( (id: string, originalEvent: Event) => { const item = itemsRef.current.find((record) => record.id === id) if (!item || item.disabled) return const event = new CustomEvent("piemenu.select", { cancelable: true, detail: { originalEvent }, }) item.onSelect.current?.(event) if (event.defaultPrevented) { gesture.current = { ...gesture.current, mode: "sticky", pointerId: undefined, pressed: false, } return } setSelectedId(id) root.close() }, [itemsRef, root] ) // Keep the whole menu inside the viewport: shrink it when it is too big, then move it. // This runs before paint, so the menu never jumps. useLayoutEffect(() => { const menu = menuRef.current if (!menu) return const sizes = items.map(({ element }) => ({ width: element.offsetWidth, height: element.offsetHeight, })) const centerElement = menu.querySelector( "[data-pie-menu-center]" ) const centerSize = centerElement ? { width: centerElement.offsetWidth, height: centerElement.offsetHeight } : undefined const html = document.documentElement const viewport = { width: html.clientWidth || window.innerWidth, height: html.clientHeight || window.innerHeight, } const extents = menuExtents(layouts, sizes, centerSize) const scale = fitScale(extents, viewport, collisionPadding) const center = clampCenter( request.point, scaleExtents(extents, scale), viewport, collisionPadding ) setFit((current) => current.scale === scale && current.center.x === center.x && current.center.y === center.y ? current : { center, scale } ) }, [items, layouts, request.point, collisionPadding, menuRef]) // Initial focus: the first item for keyboard users, the menu itself for pointer users. const focusedOnOpen = useRef(false) useLayoutEffect(() => { if (focusedOnOpen.current) return const first = items.find((item) => !item.disabled) if (request.source === "keyboard" && first) { focusedOnOpen.current = true highlight(first.id, "keyboard") } else if (request.source === "pointer" || items.length > 0) { focusedOnOpen.current = true if (menuRef.current) focus(menuRef.current, request.source) } }, [items, request.source, highlight, menuRef]) // Give focus back to the trigger on close, unless something else took it. useEffect(() => { if (root.open || !returnFocus) return const active = document.activeElement const trigger = root.triggerRef.current if ( trigger && (!active || active === document.body || menuRef.current?.contains(active)) ) { focus(trigger, lastInput.current) } }, [root.open, root.triggerRef, returnFocus, menuRef]) // Pointer input. Listeners sit on the window in the capture phase, so a drag works // even when the pointer leaves the overlay, and the press that opened the menu is not seen twice. useEffect(() => { if (!root.open) return const track = (event: PointerEvent) => { const current = gesture.current const reference = current.mode === "drag" ? current.origin : fitRef.current.center const dx = event.clientX - reference.x const dy = event.clientY - reference.y const distance = Math.hypot(dx, dy) if (distance > deadZone) current.leftDeadZone = true aimStore.set(aimFromVector(dx, dy, radius * fitRef.current.scale)) const records = itemsRef.current const hovered = event.target instanceof Element ? event.target.closest("[data-pie-menu-item]") : null const hoveredItem = hovered ? records.find((item) => item.element === hovered) : undefined // The dead zone never highlights. This matters on open: items start stacked at the // center, right under the pointer, so the element under it can be an item. let next: ItemRecord | undefined if (distance > deadZone) { next = hoveredItem ?? records[wedgeIndex(vectorAngle(dx, dy), records.length, startRadians)] } highlight(next && !next.disabled ? next.id : null, "pointer") return distance } const commit = (event: PointerEvent) => { const id = highlightedRef.current if (id) select(id, event) else root.close() } const ownsPointer = (event: PointerEvent) => gesture.current.pointerId === undefined || gesture.current.pointerId === event.pointerId const onPointerMove = (event: PointerEvent) => { if (gesture.current.mode === "drag" && !ownsPointer(event)) return track(event) } const onPointerDown = (event: PointerEvent) => { const current = gesture.current if (current.mode !== "sticky") return event.preventDefault() current.pressed = true current.pointerId = event.pointerId track(event) } const onPointerUp = (event: PointerEvent) => { const current = gesture.current if (!ownsPointer(event)) return if (current.mode === "drag") { // A fast flick can release before any move event arrives. track(event) // A click that stays in the center leaves the menu open for a second click. if (current.leftDeadZone) commit(event) else gesture.current = { ...current, mode: "sticky", pointerId: undefined } return } if (!current.pressed) return current.pressed = false current.pointerId = undefined // A click in the center cancels, the same as the Escape key. if (track(event) <= deadZone) root.close() else commit(event) } const close = () => root.close() const options = { capture: true } window.addEventListener("pointermove", onPointerMove, options) window.addEventListener("pointerdown", onPointerDown, options) window.addEventListener("pointerup", onPointerUp, options) window.addEventListener("pointercancel", close, options) window.addEventListener("resize", close) window.addEventListener("blur", close) return () => { window.removeEventListener("pointermove", onPointerMove, options) window.removeEventListener("pointerdown", onPointerDown, options) window.removeEventListener("pointerup", onPointerUp, options) window.removeEventListener("pointercancel", close, options) window.removeEventListener("resize", close) window.removeEventListener("blur", close) } }, [ root, deadZone, radius, startRadians, aimStore, highlight, select, itemsRef, fitRef, ]) // Keyboard input. Arrow keys pick by direction and combine for diagonals (Up + Right = north-east). useEffect(() => { if (!root.open) return const arrows = new Set() let typeahead = "" let typeaheadTimer = 0 const onKeyDown = (event: KeyboardEvent) => { lastInput.current = "keyboard" const records = itemsRef.current const enabled = records.map((item) => !item.disabled) const current = records.findIndex( (item) => item.id === highlightedRef.current ) const go = (index: number) => { const item = records[index] if (item) highlight(item.id, "keyboard") } if (event.key === "Escape") { onEscapeKeyDownRef.current?.(event) if (event.defaultPrevented) return event.preventDefault() event.stopPropagation() root.close() } else if (event.key in ARROW_VECTORS) { event.preventDefault() arrows.add(event.key) const vector = [...arrows].reduce( (sum, key) => ({ x: sum.x + ARROW_VECTORS[key]!.x, y: sum.y + ARROW_VECTORS[key]!.y, }), { x: 0, y: 0 } ) if (vector.x === 0 && vector.y === 0) return const angles = layoutsRef.current.map((layout) => layout.angle) go(nearestIndex(vectorAngle(vector.x, vector.y), angles, enabled)) } else if (event.key === "Tab") { event.preventDefault() const step = event.shiftKey ? -1 : 1 go( stepIndex( current === -1 ? (step === 1 ? -1 : 0) : current, step, enabled ) ) } else if (event.key === "Home") { event.preventDefault() go(stepIndex(-1, 1, enabled)) } else if (event.key === "End") { event.preventDefault() go(stepIndex(0, -1, enabled)) } else if (event.key === "Enter" || event.key === " ") { event.preventDefault() // A held key from the trigger must not select at once. if (event.repeat || !highlightedRef.current) return select(highlightedRef.current, event) } else if ( event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey ) { window.clearTimeout(typeaheadTimer) typeaheadTimer = window.setTimeout( () => (typeahead = ""), TYPEAHEAD_RESET_MS ) typeahead += event.key.toLowerCase() const start = typeahead.length === 1 ? current + 1 : Math.max(current, 0) for (let offset = 0; offset < records.length; offset++) { const index = (start + offset) % records.length const item = records[index]! if ( !item.disabled && item.textValue.toLowerCase().startsWith(typeahead) ) return go(index) } } } const onKeyUp = (event: KeyboardEvent) => arrows.delete(event.key) const onBlur = () => arrows.clear() document.addEventListener("keydown", onKeyDown, true) document.addEventListener("keyup", onKeyUp, true) window.addEventListener("blur", onBlur) return () => { window.clearTimeout(typeaheadTimer) document.removeEventListener("keydown", onKeyDown, true) document.removeEventListener("keyup", onKeyUp, true) window.removeEventListener("blur", onBlur) } }, [root, highlight, select, itemsRef, layoutsRef, onEscapeKeyDownRef]) // The menu is modal: the page under it must not scroll. useEffect(() => { const overlay = overlayRef.current if (!overlay) return const prevent = (event: Event) => event.preventDefault() overlay.addEventListener("wheel", prevent, { passive: false }) return () => overlay.removeEventListener("wheel", prevent) }, []) const highlightedLayout = highlightedId ? layoutById.get(highlightedId) : undefined const overlayComposedRef = useComposedRefs(overlayProps?.ref, overlayRef) const menuComposedRef = useComposedRefs(ref, menuRef) const contentContext = useMemo( () => ({ register, layoutById, highlightedId, selectedId, highlightedAngle: highlightedLayout ? radToDeg(highlightedLayout.angle) : null, aimStore, }), [ register, layoutById, highlightedId, selectedId, highlightedLayout, aimStore, ] ) return (

event.preventDefault() )} >

) } const ARROW_VECTORS: Record = { ArrowUp: { x: 0, y: -1 }, ArrowDown: { x: 0, y: 1 }, ArrowLeft: { x: -1, y: 0 }, ArrowRight: { x: 1, y: 0 }, } /** * Script focus shows a focus ring in some browsers even after a click. * Pointer users get no ring, keyboard users do. */ function focus(element: HTMLElement, source: OpenSource) { element.focus({ preventScroll: true, focusVisible: source === "keyboard", } as FocusOptions) } function requestFromTrigger(trigger: HTMLElement | null): OpenRequest { const rect = trigger?.getBoundingClientRect() const point = rect ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : { x: window.innerWidth / 2, y: window.innerHeight / 2 } return { key: 0, point, source: "keyboard", pressed: false } } function sortByDocumentPosition(records: ItemRecord[]) { return records.sort((a, b) => a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1 ) } /* ------------------------------------------------------------------------------------------------- * Item * -----------------------------------------------------------------------------------------------*/ export interface PieMenuItemProps extends Omit< ComponentProps<"div">, "onSelect" > { disabled?: boolean /** Text for typeahead. Defaults to the text content of the item. */ textValue?: string /** Call `event.preventDefault()` to keep the menu open. */ onSelect?: (event: Event) => void /** Runs when the item becomes the highlighted item, by pointer or by keyboard. */ onHighlight?: () => void } export function Item({ disabled = false, textValue, onSelect, onHighlight, ref, style, ...props }: PieMenuItemProps) { const context = useContentContext("PieMenuItem") const id = useId() const elementRef = useRef(null) const onSelectRef = useLatest(onSelect) const onHighlightRef = useLatest(onHighlight) const { register } = context // An item can mount while the menu is open. It gets its own first frame in the // start state, so it can transition in like the items that opened with the menu. const [starting, setStarting] = useState(true) useEffect(() => { let frame = requestAnimationFrame(() => { frame = requestAnimationFrame(() => setStarting(false)) }) return () => cancelAnimationFrame(frame) }, []) useLayoutEffect(() => { const element = elementRef.current if (!element) return return register({ id, element, disabled, textValue: textValue ?? element.textContent?.trim() ?? "", onSelect: onSelectRef, onHighlight: onHighlightRef, }) }, [register, id, disabled, textValue, onSelectRef, onHighlightRef]) const composedRef = useComposedRefs(ref, elementRef) const layout = context.layoutById.get(id) return (

) } function itemStyle(layout: ItemLayout) { return { "--pie-item-index": layout.index, "--pie-item-angle": `${radToDeg(layout.angle)}deg`, "--pie-item-x": `${layout.x}px`, "--pie-item-y": `${layout.y}px`, "--pie-item-sin": layout.sin, "--pie-item-cos": layout.cos, "--pie-item-translate": itemTranslate(layout), } as CSSProperties } /* ------------------------------------------------------------------------------------------------- * Center and Indicator * -----------------------------------------------------------------------------------------------*/ /** Content at the center of the menu, such as an avatar. It is decorative by default. */ export function Center({ style, ...props }: ComponentProps<"div">) { return (

) } /** * Turns toward the highlighted item. It always takes the short way around, * so a move from 350° to 10° turns 20°, not 340°. */ export function Indicator({ style, ...props }: ComponentProps<"div">) { const { highlightedAngle } = useContentContext("PieMenuIndicator") const [rotation, setRotation] = useState(highlightedAngle ?? 0) if (highlightedAngle !== null) { const target = shortestRotation(rotation, highlightedAngle) if (Math.abs(target - rotation) > 0.01) setRotation(target) } return (

) } /* ------------------------------------------------------------------------------------------------- * Hooks * -----------------------------------------------------------------------------------------------*/ /** * The live aim inside ``. It re-renders on every pointer move. * For styles, prefer the `--pie-aim-*` CSS variables: they update without a render. */ export function usePieMenuAim() { return useAimStore(useContentContext("usePieMenuAim").aimStore) } 54:T181c,/** * Pure math for pie menus. Angles are in radians, measured clockwise from * 12 o'clock, so 0 is "up" and PI / 2 is "right". Screen y grows downward. */ export const TAU = Math.PI * 2 export interface Point { x: number y: number } export interface Size { width: number height: number } export interface ItemLayout { index: number angle: number /** Offset of the anchor point from the menu center, in px. */ x: number y: number sin: number cos: number } export function degToRad(degrees: number) { return (degrees * Math.PI) / 180 } export function radToDeg(radians: number) { return (radians * 180) / Math.PI } export function normalizeAngle(angle: number) { return ((angle % TAU) + TAU) % TAU } /** Angle of a vector in screen space. */ export function vectorAngle(dx: number, dy: number) { return normalizeAngle(Math.atan2(dx, -dy)) } /** Smallest distance between two angles, in the range [0, PI]. */ export function angularDistance(a: number, b: number) { const diff = Math.abs(normalizeAngle(a) - normalizeAngle(b)) return Math.min(diff, TAU - diff) } export function itemAngle(index: number, count: number, startAngle = 0) { return normalizeAngle(startAngle + (index * TAU) / count) } export function layoutItems( count: number, radius: number, startAngle = 0 ): ItemLayout[] { return Array.from({ length: count }, (_, index) => { const angle = itemAngle(index, count, startAngle) const sin = Math.sin(angle) const cos = Math.cos(angle) return { index, angle, sin, cos, x: sin * radius, y: -cos * radius } }) } /** Index of the wedge that contains the angle. Each wedge is centered on its item. */ export function wedgeIndex(angle: number, count: number, startAngle = 0) { if (count === 0) return -1 const slice = TAU / count return Math.round(normalizeAngle(angle - startAngle) / slice) % count } /** Index of the enabled item closest to the angle, or -1 when no item is enabled. */ export function nearestIndex( angle: number, angles: readonly number[], enabled: readonly boolean[] ) { let best = -1 let bestDistance = Infinity angles.forEach((itemAngle, index) => { if (!enabled[index]) return const distance = angularDistance(angle, itemAngle) if (distance < bestDistance - 1e-9) { best = index bestDistance = distance } }) return best } /** Next enabled index when walking the ring. Returns -1 when no item is enabled. */ export function stepIndex( from: number, step: 1 | -1, enabled: readonly boolean[] ) { const count = enabled.length for (let offset = 1; offset <= count; offset++) { const index = (((from + step * offset) % count) + count) % count if (enabled[index]) return index } return -1 } /** * Where an item box sits relative to its anchor point. Boxes grow away from the * center: a right-side label starts at the anchor, a top label ends at it. * The result is a fraction of the box size, in the range [-1, 0]. */ export function anchorOffset(sin: number, cos: number) { return { x: -0.5 + 0.5 * sin, y: -0.5 - 0.5 * cos } } /** CSS `translate` value that puts an item box at its anchor point. */ export function itemTranslate(layout: ItemLayout) { const offset = anchorOffset(layout.sin, layout.cos) const px = (value: number) => `${round(value)}px` const pct = (value: number) => `${round(value * 100)}%` return `calc(${px(layout.x)} + ${pct(offset.x)}) calc(${px(layout.y)} + ${pct(offset.y)})` } export interface Extents { left: number right: number top: number bottom: number } /** Bounding box of all item boxes and a centered box, relative to the menu center. */ export function menuExtents( layouts: readonly ItemLayout[], sizes: readonly Size[], centerSize?: Size ): Extents { const extents: Extents = { left: 0, right: 0, top: 0, bottom: 0 } const include = (left: number, top: number, size: Size) => { extents.left = Math.min(extents.left, left) extents.top = Math.min(extents.top, top) extents.right = Math.max(extents.right, left + size.width) extents.bottom = Math.max(extents.bottom, top + size.height) } layouts.forEach((layout, index) => { const size = sizes[index] if (!size) return const offset = anchorOffset(layout.sin, layout.cos) include( layout.x + offset.x * size.width, layout.y + offset.y * size.height, size ) }) if (centerSize) include(-centerSize.width / 2, -centerSize.height / 2, centerSize) return extents } /** Scale that makes the menu fit inside the viewport, never above 1 and never below `min`. */ export function fitScale( extents: Extents, viewport: Size, padding = 8, min = 0.5 ) { const width = extents.right - extents.left const height = extents.bottom - extents.top const scale = Math.min( 1, (viewport.width - padding * 2) / width, (viewport.height - padding * 2) / height ) return Math.max(min, Number.isFinite(scale) ? scale : 1) } export function scaleExtents(extents: Extents, scale: number): Extents { return { left: extents.left * scale, right: extents.right * scale, top: extents.top * scale, bottom: extents.bottom * scale, } } /** Moves the center so the whole menu stays inside the viewport. */ export function clampCenter( point: Point, extents: Extents, viewport: Size, padding = 8 ): Point { const clampAxis = (value: number, min: number, max: number, size: number) => min > max ? size / 2 : Math.min(Math.max(value, min), max) return { x: clampAxis( point.x, padding - extents.left, viewport.width - padding - extents.right, viewport.width ), y: clampAxis( point.y, padding - extents.top, viewport.height - padding - extents.bottom, viewport.height ), } } /** Rotation target in degrees that turns the shortest way from the current value. */ export function shortestRotation(fromDegrees: number, toDegrees: number) { const delta = ((((toDegrees - fromDegrees) % 360) + 540) % 360) - 180 return fromDegrees + delta } function round(value: number) { return Math.round(value * 100) / 100 } 55:T8a6,import { useSyncExternalStore } from "react" import { radToDeg, vectorAngle } from "./geometry" /** * Where the user "aims" inside an open pie menu: the pointer direction, or the * direction of the highlighted item when the user drives the menu by keyboard. * `x` and `y` are in the range [-1, 1], relative to the menu radius. */ export interface Aim { x: number y: number /** Degrees, clockwise from 12 o'clock. */ angle: number /** 0 at the center, 1 at the item ring or farther. */ distance: number } export const IDLE_AIM: Aim = { x: 0, y: 0, angle: 0, distance: 0 } export function aimFromVector(dx: number, dy: number, radius: number): Aim { const length = Math.hypot(dx, dy) if (length === 0) return IDLE_AIM const distance = Math.min(length / radius, 1) return { x: (dx / length) * distance, y: (dy / length) * distance, angle: radToDeg(vectorAngle(dx, dy)), distance, } } type Listener = () => void /** * A tiny external store. Pointer moves arrive at display rate, so the menu * writes them here and to CSS variables instead of into React state. */ export function createAimStore() { let aim = IDLE_AIM const listeners = new Set() return { get: () => aim, set(next: Aim) { if (next.x === aim.x && next.y === aim.y) return aim = next listeners.forEach((listener) => listener()) }, subscribe(listener: Listener) { listeners.add(listener) return () => { listeners.delete(listener) } }, } } export type AimStore = ReturnType export function useAimStore(store: AimStore | null) { return useSyncExternalStore( store?.subscribe ?? noopSubscribe, store?.get ?? getIdle, getIdle ) } /** CSS custom properties that mirror the aim, for styles that follow the pointer. */ export function aimStyle(aim: Aim) { return { "--pie-aim-x": round(aim.x), "--pie-aim-y": round(aim.y), "--pie-aim-angle": `${round(aim.angle)}deg`, "--pie-aim-distance": round(aim.distance), } } const noopSubscribe = () => () => {} const getIdle = () => IDLE_AIM function round(value: number) { return String(Math.round(value * 1000) / 1000) } 56:T8c9,import { useCallback, useLayoutEffect, useRef, useState, type Ref } from "react" export function useLatest(value: T) { const ref = useRef(value) useLayoutEffect(() => { ref.current = value }) return ref } export function useControllableState(options: { value: T | undefined defaultValue: T onChange?: (value: T) => void }) { const [uncontrolled, setUncontrolled] = useState(options.defaultValue) const isControlled = options.value !== undefined const value = isControlled ? (options.value as T) : uncontrolled const onChange = useLatest(options.onChange) const setValue = useCallback( (next: T) => { if (!isControlled) setUncontrolled(next) if (!Object.is(next, value)) onChange.current?.(next) }, [isControlled, value, onChange] ) return [value, setValue] as const } export function composeRefs(...refs: Array | undefined>) { return (node: T | null) => { const cleanups = refs.map((ref) => { if (typeof ref === "function") return ref(node) if (ref) ref.current = node return undefined }) return () => { cleanups.forEach((cleanup, index) => { const ref = refs[index] if (typeof cleanup === "function") cleanup() else if (typeof ref === "function") ref(null) else if (ref) ref.current = null }) } } } /** A stable callback ref that sets both refs. */ export function useComposedRefs( a: Ref | undefined, b: Ref | undefined ) { return useCallback((node: T | null) => composeRefs(a, b)(node), [a, b]) } /** * Calls the user handler. Returns true when the user prevented the default, * so the caller can skip its own handling. */ export function callHandler( handler: ((event: E) => void) | undefined, event: E ) { handler?.(event) return event.defaultPrevented } /** Calls the user handler first. The internal handler runs unless the user prevented it. */ export function composeHandlers( userHandler: ((event: E) => void) | undefined, ownHandler: (event: E) => void ) { return (event: E) => { userHandler?.(event) if (!event.defaultPrevented) ownHandler(event) } } 57:Ta49,import { useEffect, useState, type RefObject } from "react" /** * - `starting`: first frame after mount. Styles show the enter start state. * - `entering`: enter transitions run. Use it for enter-only effects, such as a stagger. * - `open`: idle. * - `ending`: exit transitions run. The element unmounts when they finish. */ export type PresenceStatus = "starting" | "entering" | "open" | "ending" /** * Keeps an element mounted while its CSS transitions finish, in the style of * Base UI's `data-starting-style` and `data-ending-style`. It waits on the Web * Animations API, so it works with transitions and keyframes and needs no timers. */ export function usePresence( present: boolean, ref: RefObject ) { const [mounted, setMounted] = useState(present) const [status, setStatus] = useState( present ? "starting" : "ending" ) // Adjust the state when the prop changes, during render. This is the React pattern // for state that follows a prop, and it avoids an extra render from an effect. const [previous, setPrevious] = useState(present) if (present !== previous) { setPrevious(present) if (present) { setMounted(true) setStatus("starting") } else if (status !== "starting") { setStatus("ending") } } useEffect(() => { if (!mounted) return let cancelled = false let frame = 0 if (status === "starting") { // Two frames: the browser must paint the start state before it can transition from it. frame = requestAnimationFrame(() => { frame = requestAnimationFrame(() => setStatus(present ? "entering" : "ending") ) }) } else if (status === "entering" || status === "ending") { frame = requestAnimationFrame(() => { waitForAnimations(ref.current).then(() => { if (cancelled) return if (status === "entering") setStatus("open") else setMounted(false) }) }) } return () => { cancelled = true cancelAnimationFrame(frame) } }, [mounted, status, present, ref]) return { mounted, status } } function waitForAnimations(element: HTMLElement | null) { if (!element || typeof element.getAnimations !== "function") return Promise.resolve() // Skip endless animations, such as a spinner inside the element. They never finish. const animations = element .getAnimations({ subtree: true }) .filter( (animation) => animation.effect?.getComputedTiming().endTime !== Infinity ) return Promise.allSettled(animations.map((animation) => animation.finished)) } 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",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@jpmarques","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/ui/pie-menu.tsx","content":"$52","type":"registry:ui"},{"path":"src/lib/pie-menu/primitive.tsx","content":"$53","type":"registry:lib"},{"path":"src/lib/pie-menu/geometry.ts","content":"$54","type":"registry:lib"},{"path":"src/lib/pie-menu/aim.ts","content":"$55","type":"registry:lib"},{"path":"src/lib/pie-menu/hooks.ts","content":"$56","type":"registry:lib"},{"path":"src/lib/pie-menu/use-presence.ts","content":"$57","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]