64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T35c0,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactNode, } from "react"; // --------------------------------------------------------------------------- // JackKnife — a context menu that unfolds like a pocket knife. A spine // anchors at the trigger point (the pointer for a right-click, or the // trigger button's own position for the accessible trigger); menu items are // slim "blades" hinged at the spine edge, each swinging in with a staggered // rotation from folded (~80deg, tucked flat against the spine) to open // (0deg). Every swing is a one-shot ref-driven CSS transition (transform + // a border-color pulse for the hairline edge highlight) — timed with a // per-item delay for the stagger — not a continuous rAF loop. A submenu is // the same component recursively, anchored at the parent blade's tip. // Distinct from menu-nested-trays (telescoping trays) and dropdown-drape (cloth // dropdown): this is a radial-fold context-menu primitive. // --------------------------------------------------------------------------- export interface JackKnifeItem { id: string; label: string; shortcut?: string; disabled?: boolean; submenu?: JackKnifeItem[]; } export interface JackKnifeProps { /** the menu's rows */ items: JackKnifeItem[]; /** called with the chosen row's id when one is selected */ onSelect?: (id: string) => void; /** region that opens the menu on right-click; the trigger button always works too */ children?: ReactNode; /** accessible name for the trigger button and the menu itself */ label?: string; /** extra classes merged onto the rendered root element */ className?: string; } type Anchor = { x: number; y: number; side: "left" | "right" }; const OPEN_MS = 260; const OPEN_STAGGER_MS = 38; const CLOSE_MS = 150; const CLOSE_STAGGER_MS = 22; const HAIRLINE_HOLD_MS = 120; const TYPEAHEAD_RESET_MS = 700; const ITEM_W = 200; const EDGE_MARGIN = 10; function computeAnchor(x: number, y: number): Anchor { const side: Anchor["side"] = x + ITEM_W + EDGE_MARGIN > window.innerWidth ? "left" : "right"; return { x, y, side }; } function clampTop(y: number, height: number) { return Math.min(Math.max(EDGE_MARGIN, y), Math.max(EDGE_MARGIN, window.innerHeight - height - EDGE_MARGIN)); } function foldItem( el: HTMLElement | null, index: number, opening: boolean, side: "left" | "right", reduced: boolean ) { if (!el) return; const sign = side === "right" ? -1 : 1; if (reduced) { el.style.transition = "none"; el.style.transform = "rotate(0deg)"; el.style.opacity = opening ? "1" : "0"; el.style.borderColor = "var(--border)"; return; } if (opening) { el.style.transition = "none"; el.style.transform = `rotate(${sign * 80}deg)`; el.style.opacity = "0"; el.style.borderColor = "var(--border)"; el.getBoundingClientRect(); // force reflow before animating in const delay = index * OPEN_STAGGER_MS; el.style.transition = `transform ${OPEN_MS}ms cubic-bezier(0.16,1,0.3,1) ${delay}ms, opacity ${OPEN_MS * 0.7}ms linear ${delay}ms, border-color ${OPEN_MS}ms linear ${delay}ms`; el.style.transform = "rotate(0deg)"; el.style.opacity = "1"; el.style.borderColor = "var(--foreground)"; window.setTimeout(() => { el.style.transition = `border-color ${HAIRLINE_HOLD_MS}ms linear`; el.style.borderColor = "var(--border)"; }, delay + OPEN_MS); } else { const delay = index * CLOSE_STAGGER_MS; el.style.transition = `transform ${CLOSE_MS}ms cubic-bezier(0.6,0,0.84,0) ${delay}ms, opacity ${CLOSE_MS}ms linear ${delay}ms`; el.style.transform = `rotate(${sign * 80}deg)`; el.style.opacity = "0"; } } interface BladesProps { items: JackKnifeItem[]; anchor: Anchor; label: string; onSelect: (id: string) => void; onClose: (focusTrigger: boolean) => void; menuId: string; } function Blades({ items, anchor, label, onSelect, onClose, menuId }: BladesProps) { const panelRef = useRef(null); const itemRefs = useRef<(HTMLButtonElement | null)[]>([]); const reducedRef = useRef(false); const [reduced, setReduced] = useState(false); const [submenuIndex, setSubmenuIndex] = useState(null); const [submenuAnchor, setSubmenuAnchor] = useState(null); const typeaheadRef = useRef({ buffer: "", at: 0 }); const closableItems = useMemo(() => items.filter((it) => !it.disabled), [items]); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; setReduced(mq.matches); const onChange = () => { reducedRef.current = mq.matches; setReduced(mq.matches); }; mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); useEffect(() => { items.forEach((_, i) => foldItem(itemRefs.current[i] ?? null, i, true, anchor.side, reducedRef.current)); const first = itemRefs.current.find((el, i) => el && !items[i]?.disabled); first?.focus({ preventScroll: true }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const closeSelf = useCallback( (focusTrigger: boolean) => { items.forEach((_, i) => foldItem(itemRefs.current[i] ?? null, i, false, anchor.side, reducedRef.current)); const total = reducedRef.current ? 0 : items.length * CLOSE_STAGGER_MS + CLOSE_MS; window.setTimeout(() => onClose(focusTrigger), total); }, [items, anchor.side, onClose] ); const openSubmenu = (index: number) => { const el = itemRefs.current[index]; if (!el) return; const rect = el.getBoundingClientRect(); const x = anchor.side === "right" ? rect.right - 8 : rect.left + 8; setSubmenuAnchor(computeAnchor(x, rect.top)); setSubmenuIndex(index); }; const closeSubmenu = () => { setSubmenuIndex(null); setSubmenuAnchor(null); }; const focusByIndex = (i: number) => { const el = itemRefs.current[i]; el?.focus({ preventScroll: true }); }; const onKeyDown = (e: ReactKeyboardEvent) => { if (submenuIndex !== null) { // let the submenu's own handler deal with everything except closing it back here if (e.key === "Escape") return; // bubbles from submenu, harmless return; } const enabled = itemRefs.current .map((el, i) => ({ el, i })) .filter(({ el, i }) => el && !items[i]?.disabled); const currentIdx = enabled.findIndex(({ el }) => el === document.activeElement); if (e.key === "Escape") { e.preventDefault(); closeSelf(true); return; } if (e.key === "Tab") { closeSelf(false); return; } if (e.key === "ArrowDown") { e.preventDefault(); const next = enabled[(currentIdx + 1) % enabled.length]; if (next) focusByIndex(next.i); return; } if (e.key === "ArrowUp") { e.preventDefault(); const next = enabled[currentIdx < 0 ? enabled.length - 1 : (currentIdx - 1 + enabled.length) % enabled.length]; if (next) focusByIndex(next.i); return; } if (e.key === "Home") { e.preventDefault(); const first = enabled[0]; if (first) focusByIndex(first.i); return; } if (e.key === "End") { e.preventDefault(); const last = enabled[enabled.length - 1]; if (last) focusByIndex(last.i); return; } if (e.key === "ArrowRight" || e.key === "Enter" || e.key === " ") { const active = items[currentIdx >= 0 ? enabled[currentIdx]!.i : -1]; if (active?.submenu?.length) { e.preventDefault(); openSubmenu(enabled[currentIdx]!.i); } else if (e.key !== "ArrowRight" && active && !active.disabled) { e.preventDefault(); onSelect(active.id); } return; } if (e.key === "ArrowLeft") { return; // top level has nowhere to go left to; submenu instance handles its own close } if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) { const now = Date.now(); const ta = typeaheadRef.current; ta.buffer = now - ta.at < TYPEAHEAD_RESET_MS ? ta.buffer + e.key : e.key; ta.at = now; const match = closableItems.find((it) => it.label.toLowerCase().startsWith(ta.buffer.toLowerCase())); if (match) { const idx = items.indexOf(match); focusByIndex(idx); } } }; const panelTop = clampTop(anchor.y, items.length * 38 + 16); const panelLeft = anchor.side === "right" ? anchor.x : anchor.x - ITEM_W; return ( ); } export function JackKnife({ items, onSelect, children, label = "Actions", className = "" }: JackKnifeProps) { const autoId = useId(); const menuId = `jk-menu-${autoId.replace(/:/g, "")}`; const triggerRef = useRef(null); const [anchor, setAnchor] = useState(null); const [open, setOpen] = useState(false); const openAt = (x: number, y: number) => setAnchor(computeAnchor(x, y)); useEffect(() => { setOpen(anchor !== null); }, [anchor]); useEffect(() => { if (!open) return; const onPointerDown = (e: PointerEvent) => { // scoped to this instance's own menu id (and its `-sub` descendants at // any depth) — a bare `[role="menu"]` query would match a SECOND // JackKnife instance's panel elsewhere on the page and incorrectly // treat a click inside THAT menu as "inside this one" const panels = document.querySelectorAll(`[id^="${menuId}"]`); const target = e.target as Node; const inside = Array.from(panels).some((p) => p.contains(target)); if (!inside) setAnchor(null); }; document.addEventListener("pointerdown", onPointerDown, true); return () => document.removeEventListener("pointerdown", onPointerDown, true); }, [open, menuId]); const handleSelect = (id: string) => { onSelect?.(id); setAnchor(null); triggerRef.current?.focus(); }; const handleClose = (focusTrigger: boolean) => { setAnchor(null); if (focusTrigger) triggerRef.current?.focus(); }; return (

{children && (

{ e.preventDefault(); openAt(e.clientX, e.clientY); }} > {children}

)} {open && anchor && ( )}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/context-menu-unfold/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/context-menu-unfold.tsx"}],"className":"h-[70svh] min-h-80"}]]}]