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[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"] 52: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"] 53: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"] 54:T23ae,"use client" import * as React from "react" import * as MenuPrimitive from "@radix-ui/react-menubar" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" import { DropdownMenuShortcut, MenuLook, useSubmenuPlace } from "@/components/ui/dropdown-menu" type MenubarVariant = "pocket" | "leaders" | "caption" const Look = React.createContext("pocket") /** An item's own words, without its shortcut keys or a submenu's arrow. */ const words = (el: HTMLElement) => [...el.childNodes].filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent).join("").trim() || (el.textContent ?? "").trim() /** Where focus is, as the words that lead there: the bar's word, any submenus, then the item. */ function pathTo(el: HTMLElement) { const path: string[] = [] for (let at: HTMLElement | null = el; at; ) { path.unshift(words(at)) if (at.dataset.slot === "menubar-trigger") break at = document.getElementById(at.closest("[role='menu']")?.getAttribute("aria-labelledby") ?? "") } return path } /** * A row of words on a hairline. Opening a word opens the hairline under it into a pocket: * the line folds down around the menu and back up. Down opens, Left and Right move between menus. * * `variant`: `pocket` (the default), `leaders` (every menu is a contents page, the dropdown * menu's leaders) or `caption`, after the SHAPES / GRADIENTS rule that carries a name at its * far end and the old status line: the rule's far end carries the bar's name at rest, and the * path to what focus is on as you move ("File / Export / As PDF"). The caption is aria-hidden; * the menus already say where you are. */ function Menubar({ className, dir, ref, variant = "pocket", children, onFocus, onBlur, ...props }: React.ComponentProps & { variant?: MenubarVariant }) { // Radix reads direction from its own provider, not the page, so a right-to-left page would get // left-to-right menus and arrow keys the wrong way round. Without a dir, the bar takes the // direction of the page around it, read as it mounts (as the toggle group does). const [around, setAround] = React.useState<"rtl">() const [path, setPath] = React.useState(null) const caption = variant === "caption" const rest = props["aria-label"] const composedRef = useComposedRefs(React.useCallback((node: HTMLDivElement | null) => { const up = node?.parentElement if (!dir && up && getComputedStyle(up).direction === "rtl") setAround("rtl") }, [dir]), ref) return ( { onFocus?.(event) const at = (event.target as HTMLElement).closest("[role^='menuitem']") // not a menu's own box if (caption && at) setPath(pathTo(at)) }} onBlur={(event) => { onBlur?.(event) const to = event.relatedTarget as HTMLElement | null if (caption && !to?.closest("[data-slot='menubar'], [role='menu']")) setPath(null) }} {...props} > {children} {caption ? ( {(path ?? (rest ? [rest] : [])).map((w, i) => ( {w} ))} ) : null} ) } function MenubarMenu(props: React.ComponentProps) { return } function MenubarTrigger({ className, ...props }: React.ComponentProps) { return } function MenubarGroup(props: React.ComponentProps) { return } function MenubarRadioGroup(props: React.ComponentProps) { return } function MenubarSub(props: React.ComponentProps) { return } /** * The dropdown menu's list of words, hung in the bar's own hairline: the panel rises just * over the rule (a sideOffset of minus one and a half pixels, since the word reaches down to * the rule), its paper hides the rule there, and its sides and foot carry the line on. So * the menu needs no leader. Its words start under the word that opened it; the bar sits its * words in from the rule's ends by the same inset, so even the first menu folds from the rule. */ function MenubarContent({ className, align = "start", sideOffset = -1.5, /* over the rule by more than its width, whatever pixel it rounds to */ alignOffset = -27, /* --ot-space-5, the items' inset: their words line up under the word */ collisionPadding = 20, ref, onFocusOutside, children, ...props }: React.ComponentProps) { const look = React.useContext(Look) === "leaders" ? "leaders" : "list" const node = React.useRef(null) const composedRef = useComposedRefs(node, ref) return ( { onFocusOutside?.(event) // A menu still rolling up must not dismiss the next one: moving between menus // focuses the new one while the old one's exit animation runs. if (node.current?.dataset.state === "closed") event.preventDefault() }} {...props} > {children} ) } /** A destructive item says so in its words ("Delete Halden for good"); it is never red. */ function MenubarItem({ className, variant = "default", ...props }: React.ComponentProps & { variant?: "default" | "destructive" }) { return } /** Checked, the sentence turns to the expression italic. Screen readers get aria-checked. */ function MenubarCheckboxItem({ className, ...props }: React.ComponentProps) { return } function MenubarRadioItem({ className, ...props }: React.ComponentProps) { return } function MenubarLabel({ className, ...props }: React.ComponentProps) { return } function MenubarSeparator({ className, ...props }: React.ComponentProps) { return } /** Shortcut keys, each a base `ot-kbd` cap; it is the dropdown menu's, under this slot. */ function MenubarShortcut(props: React.ComponentProps) { return } /** Opens something, so it carries the one → glyph. */ function MenubarSubTrigger({ className, ...props }: React.ComponentProps) { return } /** Beside its item, or on a narrow screen dropped open under it (the dropdown menu's useSubmenuPlace). */ function MenubarSubContent({ className, ref, sideOffset, alignOffset, collisionPadding, style, ...props }: React.ComponentProps) { const place = useSubmenuPlace({ ref, sideOffset, alignOffset, collisionPadding, style }) return ( ) } export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarLabel, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent, } 55:T1317,@layer components { /* ── ot-menubar ── a frame row of words on a hairline; each opens a menu (ot-menu, dropdown-menu.css, on the popover panel). Opening a word opens the hairline under it into a pocket: the line folds down around the menu and back up. One line, no leader, no stroke. The words sit in from the rule's ends by a menu's own inset, so every menu, the first one too, folds from the rule with its words under the word. Radix moves between menus with Left and Right. */ .ot-menubar { --ot-menubar-line: var(--ot-rule-strong); position: relative; display: flex; flex-wrap: wrap; column-gap: var(--ot-space-5); padding-inline: var(--ot-space-5); box-shadow: inset 0 calc(-1 * var(--ot-hairline)) 0 var(--ot-menubar-line); } /* The word reaches down to the rule, so its menu can hang from the word's own edge. */ .ot-menubar-trigger { appearance: none; border: 0; margin: 0; padding: 0 0 var(--ot-space-2); font: inherit; color: var(--ot-graphite); cursor: pointer; outline: 0; background: linear-gradient(var(--ot-accent), var(--ot-accent)) no-repeat 0 calc(100% - var(--ot-hairline)) / 0% var(--ot-stroke); transition: color var(--ot-allegro); } .ot-menubar-trigger:is(:hover, [data-state="open"], [data-force~="hover"]) { color: var(--ot-ink); } /* Focus is the one accent: a stroke laid on the rule under the word. */ .ot-menubar-trigger:is(:focus-visible, [data-force~="focus"]) { color: var(--ot-ink); background-size: 100% var(--ot-stroke); } .ot-menubar-trigger:disabled { color: var(--ot-pencil); opacity: 0.55; cursor: not-allowed; } /* The menu: its paper covers the rule where it hangs, and its sides and foot are the same line, so the hairline runs in, down, along and back up. No dot, no leader. It unrolls down out of the line and rolls back up into it; the words arrive in turn (dropdown-menu.css). */ .ot-pop.ot-menu[data-slot="menubar-content"] { --ot-menubar-line: var(--ot-rule-strong); box-shadow: inset var(--ot-hairline) 0 0 var(--ot-menubar-line), inset calc(-1 * var(--ot-hairline)) 0 0 var(--ot-menubar-line), inset 0 calc(-1 * var(--ot-hairline)) 0 var(--ot-menubar-line); animation: ot-menubar-unroll var(--ot-moderato) var(--ot-exhale); } .ot-pop.ot-menu[data-slot="menubar-content"]::before, .ot-pop.ot-menu[data-slot="menubar-content"]::after { display: none; } .ot-pop.ot-menu[data-slot="menubar-content"][data-state="closed"] { animation: ot-menubar-roll-up var(--ot-allegro) var(--ot-breath) forwards; } /* Without room below, Radix turns it above the words, where there's no line to hang in: it stands clear of them in a whole frame and unrolls upward. */ .ot-pop.ot-menu[data-slot="menubar-content"][data-side="top"] { translate: 0 calc(-1 * var(--ot-space-2)); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-menubar-line); animation-name: ot-menubar-unroll-up; } .ot-pop.ot-menu[data-slot="menubar-content"][data-side="top"][data-state="closed"] { animation-name: ot-menubar-roll-down; } @keyframes ot-menubar-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } } @keyframes ot-menubar-roll-up { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } } @keyframes ot-menubar-unroll-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } } @keyframes ot-menubar-roll-down { from { clip-path: inset(0); } to { clip-path: inset(100% 0 0 0); } } /* ── caption ── after the SHAPES / GRADIENTS rule that carries a name at its far end, and the old status line: the bar's rule runs on to a small caption on its far end, on the words' baseline. At rest it is the bar's own name, in pencil; as focus moves it is the path to where you are ("File / Export / As PDF"), the last step inked and arriving. On a narrow bar only the last step stands. */ .ot-menubar[data-variant="caption"] { align-items: baseline; } .ot-menubar-caption { display: flex; gap: 0.5em; min-width: 0; margin-inline-start: auto; overflow: hidden; white-space: nowrap; font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-pencil); } .ot-menubar-caption > span + span::before { content: "/" / ""; margin-inline-end: 0.5em; color: var(--ot-rule-strong); } .ot-menubar-caption:not([data-rest]) > span:last-child { color: var(--ot-ink); animation: ot-arrive var(--ot-moderato) var(--ot-exhale); } @media (max-width: 40rem) { .ot-menubar-caption > span:not(:last-child) { display: none; } .ot-menubar-caption > span:last-child::before { display: none; } } @media (forced-colors: active) { .ot-menubar { border-bottom: 1px solid CanvasText; } .ot-menubar-trigger:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } .ot-pop.ot-menu[data-slot="menubar-content"] { border: 1px solid CanvasText; border-top: 0; } } } 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/react-menubar",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-menubar","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-menubar"}]]}]}]]}],["$","$L50",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"]}]]}],["$","$L51",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":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/menubar.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/menubar.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/menubar.css","content":"$55","type":"registry:file","target":"styles/0nlytype/menubar.css"}],"className":"h-[70svh] min-h-80"}]]}]