51: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"] 52: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/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"],"ItemStyles"] 53:I[34002,["/_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"],"CodeEditor"] 54: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"] 55:T21a5,"use client" import * as React from "react" import * as MenuPrimitive from "@radix-ui/react-context-menu" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" import { DropdownMenuShortcut, MenuLook, useSubmenuPlace } from "@/components/ui/dropdown-menu" // Radix reads direction from its own provider, not the page. Without a dir, the menu takes the // direction of the page around its trigger, read as the trigger mounts (as the dropdown menu // does). The trigger also keeps where you pressed, for the content to place itself from. type Point = { x: number; y: number } type Around = { dir?: "ltr" | "rtl"; setAround: (dir: "rtl") => void; atRef: React.RefObject } const Around = React.createContext({ setAround: () => {}, atRef: { current: { x: 0, y: 0 } } }) function ContextMenu({ dir, ...props }: React.ComponentProps) { const [around, setAround] = React.useState<"rtl">() const atRef = React.useRef({ x: 0, y: 0 }) const value = React.useMemo(() => ({ dir: dir ?? around, setAround, atRef }), [dir, around]) return ( ) } function ContextMenuTrigger({ ref, onContextMenu, onPointerDown, ...props }: React.ComponentProps) { const { setAround, atRef } = React.useContext(Around) const composedRef = useComposedRefs(React.useCallback((node: HTMLSpanElement | null) => { if (node && getComputedStyle(node).direction === "rtl") setAround("rtl") }, [setAround]), ref) return ( { atRef.current = { x: event.clientX, y: event.clientY } onContextMenu?.(event) }} onPointerDown={(event) => { atRef.current = { x: event.clientX, y: event.clientY } // a long press opens from here onPointerDown?.(event) }} {...props} /> ) } function ContextMenuGroup(props: React.ComponentProps) { return } function ContextMenuRadioGroup(props: React.ComponentProps) { return } function ContextMenuSub(props: React.ComponentProps) { return } /** Where a menu opens from the point along one axis: forward (toward the line's end, or * down) when it fits, else back from the point, else slid in to fit. Returns its start edge. */ function reach(at: number, size: number, room: number, pad: number, forward: boolean) { const fore = at + 2, back = at - 2 - size const fitsFore = fore + size <= room - pad, fitsBack = back >= pad if (forward ? fitsFore : fitsBack) return forward ? fore : back if (forward ? fitsBack : fitsFore) return forward ? back : fore return Math.max(pad, Math.min(fore, room - pad - size)) } /** * The same list of words, opened where you pressed (right-click, the ContextMenu key or * Shift+F10) and spreading from that point like ink. It has no leader line: nothing * hangs it from a trigger. It opens toward the line's end and down from the point, as the * system's own menus do: to the left on a right-to-left page. Without room it opens back * from the point, and on a phone, with room neither way, it slides in to fit, over the * point. Radix only opens it to the right and never slides it across, so it is placed here: * Radix sets it at the point (no collisions) and it is carried to its place. A cross, the * register mark of a Swiss sheet, pins the point the ink spread from. * * `variant`: `list` (the highlighter), `leaders` (the dropdown menu's contents page) or * `orbit`, after WOVE: the words stand on an arc bowed away from the point, a dot on the arc * for each, and the one you point at inks with the accent dot. */ function ContextMenuContent({ className, collisionPadding = 20, variant = "list", ref, style, children, ...props }: React.ComponentProps & { variant?: "list" | "leaders" | "orbit" }) { const { dir, atRef } = React.useContext(Around) const [shift, setShift] = React.useState({ x: 0, y: 0 }) const pad = typeof collisionPadding === "number" ? collisionPadding : Math.max(...Object.values(collisionPadding), 0) const composedRef = useComposedRefs(React.useCallback((node: HTMLDivElement | null) => { if (node) { const { x, y } = atRef.current, html = document.documentElement const next = { x: reach(x, node.offsetWidth, html.clientWidth, pad, dir !== "rtl") - (x + 2), y: reach(y - 2, node.offsetHeight, html.clientHeight, pad, true) - y } setShift((was) => (was.x === next.x && was.y === next.y ? was : next)) } }, [atRef, dir, pad]), ref) return ( {children} ) } /** A destructive item says so in its words ("Delete Halden for good"); it is never red. */ function ContextMenuItem({ className, variant = "default", ...props }: React.ComponentProps & { variant?: "default" | "destructive" }) { return } /** Checked, the sentence turns to the expression italic. Screen readers get aria-checked. */ function ContextMenuCheckboxItem({ className, ...props }: React.ComponentProps) { return } function ContextMenuRadioItem({ className, ...props }: React.ComponentProps) { return } function ContextMenuLabel({ className, ...props }: React.ComponentProps) { return } function ContextMenuSeparator({ className, ...props }: React.ComponentProps) { return } /** Shortcut keys, each a base `ot-kbd` cap; it is the dropdown menu's, under this slot. */ function ContextMenuShortcut(props: React.ComponentProps) { return } /** Opens something, so it carries the one → glyph. */ function ContextMenuSubTrigger({ className, ...props }: React.ComponentProps) { return } /** Beside its item, or on a narrow screen dropped open under it (the dropdown menu's useSubmenuPlace). */ function ContextMenuSubContent({ className, ref, sideOffset, alignOffset, collisionPadding, style, ...props }: React.ComponentProps) { const place = useSubmenuPlace({ ref, sideOffset, alignOffset, collisionPadding, style }) return ( ) } export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuGroup, ContextMenuLabel, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, } 56:T1794,@layer components { /* ── ot-menu[data-at="point"] ── a context menu opens where you pressed and spreads from that point like ink. Nothing hangs it from a trigger, so no leader; a cross, the register mark of "the uncreative", pins the point instead, over the menu's corner. The list itself (ot-menu) is dropdown-menu.css. context-menu.tsx places it from the point and sets --ot-at-x and --ot-at-y, the point in the menu's own box. */ .ot-pop.ot-menu[data-at="point"]::after { display: none; } .ot-pop.ot-menu[data-at="point"]::before { content: ""; position: absolute; pointer-events: none; left: calc(var(--ot-at-x, 0px) - 6px); top: calc(var(--ot-at-y, 0px) - 6px); width: 13px; height: 13px; background: linear-gradient(var(--ot-ink), var(--ot-ink)) 50% 0 / var(--ot-hairline) 100% no-repeat, linear-gradient(var(--ot-ink), var(--ot-ink)) 0 50% / 100% var(--ot-hairline) no-repeat; animation: none; } .ot-pop.ot-menu[data-at="point"][data-state="open"] { animation: ot-spread var(--ot-andante) var(--ot-exhale); } @keyframes ot-spread { from { clip-path: circle(0 at var(--ot-at-x, 0px) var(--ot-at-y, 0px)); } to { clip-path: circle(150% at var(--ot-at-x, 0px) var(--ot-at-y, 0px)); } } /* ── orbit ── after WOVE: the words stand on an arc bowed away from the point, one dot on the arc for each, and the one you point at inks, its dot landing as the accent. The arc is the frame, so the panel's hairline stands down. Every row is one step high, so the arc is drawn by the rows themselves: each one's offset and its piece of the ring come from its place in the list (sibling-index). Put items and separators straight in the list; a group counts as one row. The paper ends at the arc too: each row lays it only outside the ring, so the arc is the panel's edge. The words swing out to the arc as they arrive. */ .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] { --ot-orbit-row: calc(var(--ot-p) * 2.3); --ot-orbit-dot: var(--ot-space-3); box-shadow: none; background: none; padding-block: 0; padding-inline-end: calc(var(--ot-space-5) + var(--ot-orbit-row)); } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > * { --ot-orbit-r: calc(sibling-count() * 0.7); --ot-orbit-t: calc(sibling-index() - (sibling-count() + 1) / 2); --ot-orbit-s: sqrt(var(--ot-orbit-r) * var(--ot-orbit-r) - var(--ot-orbit-t) * var(--ot-orbit-t)); --ot-orbit-e: sqrt(var(--ot-orbit-r) * var(--ot-orbit-r) - (sibling-count() - 1) * (sibling-count() - 1) / 4); --ot-orbit-ring: calc(var(--ot-orbit-r) * var(--ot-orbit-row)); position: relative; box-sizing: border-box; display: flex; align-items: center; block-size: var(--ot-orbit-row); margin: 0; padding-block: 0; white-space: nowrap; translate: calc(var(--ot-orbit-row) * (var(--ot-orbit-s) - var(--ot-orbit-e))) 0; color: var(--ot-graphite); background: radial-gradient(circle var(--ot-orbit-ring) at calc(var(--ot-orbit-dot) - var(--ot-orbit-row) * var(--ot-orbit-s)) calc((0.5 - var(--ot-orbit-t)) * var(--ot-orbit-row)), transparent calc(var(--ot-orbit-ring) - 0.6px), var(--ot-rule-strong) calc(var(--ot-orbit-ring) - 0.5px), var(--ot-rule-strong) calc(var(--ot-orbit-ring) + 0.5px), var(--ot-paper) calc(var(--ot-orbit-ring) + 0.6px)); transition: color var(--ot-allegro); } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"]:is([dir="rtl"], [dir="rtl"] *) > * { translate: calc(var(--ot-orbit-row) * (var(--ot-orbit-e) - var(--ot-orbit-s))) 0; background-image: radial-gradient(circle var(--ot-orbit-ring) at calc(100% - var(--ot-orbit-dot) + var(--ot-orbit-row) * var(--ot-orbit-s)) calc((0.5 - var(--ot-orbit-t)) * var(--ot-orbit-row)), transparent calc(var(--ot-orbit-ring) - 0.6px), var(--ot-rule-strong) calc(var(--ot-orbit-ring) - 0.5px), var(--ot-rule-strong) calc(var(--ot-orbit-ring) + 0.5px), var(--ot-paper) calc(var(--ot-orbit-ring) + 0.6px)); } /* A dot on the arc for each item; the one you point at lands as the accent. */ .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item::before { content: ""; position: absolute; inset-inline-start: calc(var(--ot-orbit-dot) - var(--ot-dot) / 2); top: calc(50% - var(--ot-dot) / 2); width: var(--ot-dot); height: var(--ot-dot); border-radius: 50%; background: var(--ot-rule-strong); scale: 0.43; transition: scale var(--ot-moderato) var(--ot-spiccato), background-color 0s; } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item:is([data-highlighted], [data-force~="hover"], .ot-menu-sub[data-state="open"]) { color: var(--ot-ink); } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item:is([data-highlighted], [data-force~="hover"], .ot-menu-sub[data-state="open"])::before { background: var(--ot-accent); scale: 1; } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item[data-disabled]::before { opacity: 0.55; } /* A separator is a step of silence on the arc, with a short rule in it. */ .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-sep::after { content: ""; position: absolute; inset-inline-start: var(--ot-space-5); top: 50%; width: 2em; height: var(--ot-hairline); background: var(--ot-rule); } @media (forced-colors: active) { .ot-pop.ot-menu[data-at="point"]::before { forced-color-adjust: none; background: linear-gradient(CanvasText, CanvasText) 50% 0 / 1px 100% no-repeat, linear-gradient(CanvasText, CanvasText) 0 50% / 100% 1px no-repeat; } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] { border: 1px solid CanvasText; background: Canvas; } /* the arc and its paper are gradients, which forced colours drops */ .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item::before { forced-color-adjust: none; background: GrayText; } .ot-pop.ot-menu[data-at="point"][data-variant="orbit"] > .ot-menu-item:is([data-highlighted], [data-force~="hover"])::before { background: Highlight; } } } 50:["$","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-context-menu",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-context-menu","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-context-menu"}]]}]}]]}],["$","$L51",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json","https://thedirectors.agency/ui/r/dropdown-menu.json","https://thedirectors.agency/ui/r/popover.json"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/context-menu.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/0nlytype/ui/context-menu.tsx","content":"$55","type":"registry:ui"},{"path":"registry/0nlytype/styles/context-menu.css","content":"$56","type":"registry:file","target":"styles/0nlytype/context-menu.css"}],"className":"h-[70svh] min-h-80"}]]}]