52: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"] 53: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"] 54: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"] 55: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"] 56:T14c6,"use client" import * as React from "react" import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" type Variant = "names" | "lead" | "inline" const VariantContext = React.createContext("names") type NavigationMenuProps = React.ComponentProps & { /** * names: a panel of large names hung under the menu. * lead: a contents page; the names small in a column, and the one you point at or focus set as the headline beside them, with its line. * inline: one line of thought; pressing a word opens its names into the line after it, and the words after make room. */ variant?: Variant } /** * Small words that open a panel of large names. Radix keeps the pointer delay, * focus and arrow keys; each panel spans the width of the menu, hung under it. * There is no viewport: every panel sits in its own item. */ function NavigationMenu({ variant = "names", className, dir, ref, ...props }: NavigationMenuProps) { // Radix writes dir="ltr" on the nav unless told otherwise. Without a dir, the menu takes the direction // of the page around it, read as it mounts (as the menus and the tabs do), so its words and keys mirror. const [around, setAround] = React.useState<"rtl">() const composedRef = useComposedRefs(React.useCallback((node: HTMLElement | null) => { const up = node?.parentElement if (!dir && up && getComputedStyle(up).direction === "rtl") setAround("rtl") }, [dir]), ref) return ( ) } function NavigationMenuList({ className, ...props }: React.ComponentProps) { return } function NavigationMenuItem(props: React.ComponentProps) { return } /** Inline, the names open into the line, so a passing pointer must not open them: only a press does. */ const held = (e: React.PointerEvent) => e.preventDefault() /** A small word with a ↓ that turns over while its panel is open (inline: a → that inks). */ function NavigationMenuTrigger({ className, onPointerMove, onPointerLeave, ...props }: React.ComponentProps) { const inline = React.useContext(VariantContext) === "inline" return ( (onPointerMove?.(e), inline && held(e))} onPointerLeave={(e) => (onPointerLeave?.(e), inline && held(e))} {...props} /> ) } /** The panel. Its children are NavigationMenuLinks, each a large name that may hold a line. */ function NavigationMenuContent({ className, children, onPointerOver, onFocus, onPointerLeave, ...props }: React.ComponentProps) { const variant = React.useContext(VariantContext) // lead: which name stands as the headline. The first, until another is pointed at or focused. const [lead, setLead] = React.useState(0) const links = React.Children.toArray(children).filter(React.isValidElement<{ children?: React.ReactNode }>) const pick = (from: EventTarget) => { const a = from instanceof Element ? from.closest("[data-slot=navigation-menu-link]") : null const all = a?.parentElement ? [...a.parentElement.children] : [] if (a && all.includes(a)) setLead(all.indexOf(a)) } return ( (onPointerOver?.(e), variant === "lead" && pick(e.target))} onFocus={(e) => (onFocus?.(e), variant === "lead" && pick(e.target))} onPointerLeave={(e) => (onPointerLeave?.(e), variant === "inline" && held(e))} {...props} > {variant === "lead" ? ( <>

{links.map((link, i) => React.cloneElement(link as React.ReactElement<{ "data-lead"?: boolean }>, { "data-lead": i === lead || undefined }))}

{links[lead] ? ( ) : null} ) : ( children )} ) } function NavigationMenuLink({ className, ...props }: React.ComponentProps) { return } export { type NavigationMenuProps, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } 57:T1e0b,@layer components { /* ── ot-navmenu ── small words open a panel of large names. Radix marks each trigger and panel with data-state. The panel hangs under the whole list: Radix wraps the list in a positioned box, so the items stay static. */ .ot-navmenu { position: relative; } .ot-navmenu [data-slot="navigation-menu-list"] { list-style: none; margin: 0; padding: 0 0 var(--ot-space-3); display: flex; flex-wrap: wrap; column-gap: var(--ot-space-6); } .ot-navmenu [data-slot="navigation-menu-item"] { position: static; } .ot-navmenu :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-item"] > [data-slot="navigation-menu-link"]) { appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: var(--ot-graphite); text-decoration: none; cursor: pointer; transition: color var(--ot-allegro); } .ot-navmenu :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-item"] > [data-slot="navigation-menu-link"]):is(:hover, [data-state="open"], [data-force~="hover"]) { color: var(--ot-ink); } .ot-navmenu [data-slot="navigation-menu-trigger"]::after { content: "↓" / ""; display: inline-block; margin-inline-start: 0.3em; font-size: 0.72em; color: var(--ot-pencil); transition: rotate var(--ot-moderato) var(--ot-spiccato); } .ot-navmenu [data-slot="navigation-menu-trigger"][data-state="open"]::after { rotate: 180deg; } .ot-navmenu-panel { position: absolute; z-index: 20; inset-inline: 0; inset-block-start: 100%; padding: var(--ot-space-6) 0 var(--ot-space-7); background: var(--ot-paper); display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--ot-space-4) var(--ot-gutter); align-content: start; animation: ot-navmenu-in var(--ot-moderato) var(--ot-exhale); } .ot-navmenu-panel[data-state="closed"] { animation: ot-navmenu-out var(--ot-allegro) var(--ot-breath) forwards; } .ot-navmenu-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--ot-hairline); background: var(--ot-ink); transform-origin: 0 50%; } :is([dir="rtl"], [dir="rtl"] *) .ot-navmenu-panel::before { transform-origin: 100% 50%; } .ot-navmenu-panel[data-state="open"]::before { animation: ot-draw-x var(--ot-andante) var(--ot-exhale) backwards; } .ot-navmenu-panel[data-state="open"] > * { animation: ot-arrive var(--ot-andante) var(--ot-exhale) backwards; animation-delay: calc(sibling-index() * var(--ot-arpeggio)); } .ot-navmenu-panel > a { display: grid; font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); font-weight: 200; color: var(--ot-ink); text-decoration: none; transition: font-weight var(--ot-moderato) var(--ot-exhale); } .ot-navmenu-panel > a:is(:hover, :focus-visible, [data-force~="hover"]) { font-weight: 500; } .ot-navmenu-panel small { font-size: var(--ot-pp); line-height: var(--ot-pp-lh); letter-spacing: var(--ot-pp-tr); font-weight: 400; color: var(--ot-pencil); } /* lead: a contents page. The names stand small in a narrow column; the one pointed at or focused (the first, at first) is set beside them as the headline, with its line under it, and steps up each time it changes. */ .ot-navmenu[data-variant="lead"] .ot-navmenu-panel { grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); } .ot-navmenu-names { display: grid; justify-items: start; align-content: start; gap: var(--ot-space-2); padding-block-start: 0.35em; } .ot-navmenu-names > a { display: grid; font-size: var(--ot-mp); line-height: var(--ot-mp-lh); letter-spacing: var(--ot-mp-tr); color: var(--ot-graphite); text-decoration: none; transition: color var(--ot-allegro); } .ot-navmenu-names > a:is([data-lead], :hover, :focus-visible, [data-force~="hover"]) { color: var(--ot-ink); } .ot-navmenu-names small { display: none; } .ot-navmenu-lead { display: grid; align-content: start; font-size: var(--ot-ff); line-height: var(--ot-ff-lh); letter-spacing: var(--ot-ff-tr); font-weight: 200; color: var(--ot-ink); animation: ot-arrive var(--ot-moderato) var(--ot-exhale); } .ot-navmenu-lead small { max-inline-size: 36ch; margin-block-start: var(--ot-space-3); font-size: var(--ot-p); line-height: var(--ot-p-lh); letter-spacing: 0; color: var(--ot-graphite); } /* A phone has no pointer to lead with: the names keep their lines, and the headline stands down. */ @media (max-width: 40rem) { .ot-navmenu[data-variant="lead"] .ot-navmenu-panel { grid-template-columns: minmax(0, 1fr); } .ot-navmenu-names small { display: block; } .ot-navmenu-lead { display: none; } } /* inline: one line of thought, as "Healthy habits → for creatives". Pressing a word opens its names into the line after its arrow, larger, on the same baseline; the words after it make room, and the others step back. */ .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-list"] { align-items: baseline; column-gap: var(--ot-space-5); row-gap: var(--ot-space-2); padding-block-end: 0; } .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-item"] { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ot-space-4); } .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-trigger"]::after { content: "→" / ""; rotate: none; transition: color var(--ot-allegro), translate var(--ot-moderato) var(--ot-exhale); } .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-trigger"][data-state="open"]::after { color: var(--ot-ink); translate: 0.15em 0; } :is([dir="rtl"], [dir="rtl"] *) .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-trigger"]::after { scale: -1 1; } :is([dir="rtl"], [dir="rtl"] *) .ot-navmenu[data-variant="inline"] [data-slot="navigation-menu-trigger"][data-state="open"]::after { translate: -0.15em 0; } .ot-navmenu[data-variant="inline"]:has(.ot-navmenu-panel[data-state="open"]) :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-item"] > [data-slot="navigation-menu-link"]):not([data-state="open"]) { color: var(--ot-pencil); } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel { position: static; display: inline-flex; align-items: baseline; column-gap: var(--ot-space-4); padding: 0; background: none; overflow: clip; overflow-clip-margin: 0.3em; white-space: nowrap; animation: ot-navmenu-open var(--ot-andante) var(--ot-exhale); } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel[data-state="closed"] { animation: ot-navmenu-shut var(--ot-moderato) var(--ot-breath) forwards; } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel::before { content: none; } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel[data-state="open"] > * { animation: none; } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel > a { display: inline; } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel small { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 40rem) { .ot-navmenu[data-variant="inline"] .ot-navmenu-panel { flex-wrap: wrap; white-space: normal; row-gap: 0; } .ot-navmenu[data-variant="inline"] .ot-navmenu-panel > a { font-size: var(--ot-mp); line-height: var(--ot-mp-lh); font-weight: 300; } } @keyframes ot-navmenu-open { from { inline-size: 0; opacity: 0; } } @keyframes ot-navmenu-shut { to { inline-size: 0; opacity: 0; } } @media (forced-colors: active) { .ot-navmenu-panel::before { forced-color-adjust: none; background: CanvasText; } } @keyframes ot-navmenu-in { from { opacity: 0; } } @keyframes ot-navmenu-out { to { opacity: 0; } } } 51:["$","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-navigation-menu",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-navigation-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-navigation-menu"}]]}]}]]}],["$","$L52",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],["$","$L53",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":["$","$L54",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/navigation-menu.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L55",null,{"files":[{"path":"registry/0nlytype/ui/navigation-menu.tsx","content":"$56","type":"registry:ui"},{"path":"registry/0nlytype/styles/navigation-menu.css","content":"$57","type":"registry:file","target":"styles/0nlytype/navigation-menu.css"}],"className":"h-[70svh] min-h-80"}]]}]