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:Tbe4,"use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" function Popover(props: React.ComponentProps) { return } function PopoverTrigger(props: React.ComponentProps) { return } function PopoverAnchor(props: React.ComponentProps) { return } function PopoverClose(props: React.ComponentProps) { return } type Variant = "leader" | "brace" | "cut" /* Each variant hangs the panel its own distance off: the leader's length, the brace's small gap (Radix adds the brace's own height), and nothing at all for the cut, which rides over its opener. */ const OFFSET: Record = { leader: 27 /* --ot-space-5 */, brace: 6, cut: 0 } /** * A panel hung from what opened it. leader (the default): on a leader line, which joins the panel to * the trigger when it sits above or below and aligns to an edge (the default is the trigger's start * edge). brace: the panel's width gathered by a brace to one point at the trigger. cut: the panel's * edge cuts through the trigger's words and the panel rides over their lower half. Other menus and * pickers wear the same `ot-pop` panel. */ function PopoverContent({ className, variant = "leader", align = variant === "brace" ? "center" : "start", sideOffset = OFFSET[variant], collisionPadding = 20, arrowPadding = 24, style, children, ...props }: React.ComponentProps & { variant?: Variant }) { return ( {children} {variant === "brace" && ( // The brace's two ends curl at the panel's corners; its point is Radix's arrow, which Radix // keeps over the trigger's middle even when the panel shifts to stay on screen. )} ) } export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } 55:T1e98,@layer components { /* ── ot-pop ── popover: a panel hung from what opened it, on a leader line. Keyed on the class and [data-state] alone, so the menus and pickers that wear ot-pop (dropdown menu, combobox, date picker) hang the same way. Radix places it (side, align, sideOffset); --ot-pop-gap is that offset. */ .ot-pop { --ot-pop-gap: 8px; --ot-pop-lead: 1.1em; position: relative; z-index: 50; padding: var(--ot-space-4) var(--ot-space-5); overflow: visible; max-width: min(26rem, calc(100vw - 2 * var(--ot-margin))); background: var(--ot-paper); color: var(--ot-graphite); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); outline: 0; animation: ot-pop-in var(--ot-moderato) var(--ot-exhale); } .ot-pop[data-state="closed"] { animation: ot-pop-out var(--ot-allegro) var(--ot-breath) forwards; } .ot-pop[data-side="top"] { --ot-pop-from: 4px; } @keyframes ot-pop-in { from { opacity: 0; translate: 0 var(--ot-pop-from, -4px); } } @keyframes ot-pop-out { to { opacity: 0; } } /* The leader: a dot on the trigger's edge and a line dropping to the panel. */ .ot-pop:is([data-side="bottom"], [data-side="top"])::before, .ot-pop:is([data-side="bottom"], [data-side="top"])::after { content: ""; position: absolute; pointer-events: none; } .ot-pop:is([data-side="bottom"], [data-side="top"])::before { inset-inline-start: var(--ot-pop-lead); width: var(--ot-hairline); height: var(--ot-pop-gap); background: var(--ot-ink); } .ot-pop:is([data-side="bottom"], [data-side="top"])::after { inset-inline-start: calc(var(--ot-pop-lead) - 2px); width: 5px; height: 5px; border-radius: 50%; background: var(--ot-ink); } .ot-pop[data-align="end"] { --ot-pop-lead: calc(100% - 1.1em); } .ot-pop[data-align="center"] { --ot-pop-lead: 50%; } .ot-pop[data-side="bottom"]::before { bottom: 100%; transform-origin: 50% 0; } .ot-pop[data-side="bottom"]::after { bottom: calc(100% + var(--ot-pop-gap) - 2.5px); } .ot-pop[data-side="top"]::before { top: 100%; transform-origin: 50% 100%; } .ot-pop[data-side="top"]::after { top: calc(100% + var(--ot-pop-gap) - 2.5px); } .ot-pop[data-state="open"]::after { animation: ot-land var(--ot-moderato) var(--ot-spiccato) backwards; } .ot-pop[data-state="open"]::before { animation: ot-draw-y var(--ot-moderato) var(--ot-breath) 60ms backwards; } /* Forced colours drop the panel's hairline (a box-shadow) and paint the leader's background away. */ @media (forced-colors: active) { /* The hairline is a box-shadow, which forced colours drop. A border, not an outline: Radix's menus set an inline outline: none on their panel, which no stylesheet can outrank. */ .ot-pop { border: var(--ot-hairline) solid CanvasText; } .ot-pop::before, .ot-pop::after { forced-color-adjust: none; background: CanvasText; } .ot-pop[data-variant="brace"] { border: 0; } /* boxless: its brace is the edge */ } /* ── brace ── the panel's width gathered to one point at the trigger, like the brace that joins a score's staves or an underbrace that sums a span. The ends curl at the panel's corners (this element's own ::before and ::after); the arms and the point are Radix's arrow, which Radix keeps over the trigger's middle when the panel shifts (it measures from .ot-pop-brace-arms, which is centred on the panel, so no correction is needed). The arms run long and .ot-pop-brace-arms clips them where the curls begin. Drawn as for a panel above; Radix turns the point over for one below. */ .ot-pop[data-variant="brace"] { --ot-pop-brace-r: var(--ot-space-2); --ot-pop-brace-g: var(--ot-space-2); --ot-pop-brace-in: var(--ot-space-5); padding: var(--ot-space-3) var(--ot-pop-brace-in) var(--ot-space-4); box-shadow: none; /* the brace is the panel's edge */ } .ot-pop:is([data-variant="brace"], [data-variant="cut"])::before, .ot-pop:is([data-variant="brace"], [data-variant="cut"])::after { content: none; } .ot-pop-brace, .ot-pop-brace-arms { position: absolute; inset-block: 0; pointer-events: none; } .ot-pop-brace { inset-inline: var(--ot-pop-brace-in); } /* spans the words, not the paper round them */ .ot-pop-brace-arms { left: var(--ot-pop-brace-r); right: var(--ot-pop-brace-r); overflow-x: clip; overflow-y: visible; clip-path: inset(-3em 0); } .ot-pop-brace-point { position: relative; width: 0; height: calc(var(--ot-pop-brace-g) + 2 * var(--ot-pop-brace-r)); } .ot-pop-brace::before, .ot-pop-brace::after, .ot-pop-brace-point::before, .ot-pop-brace-point::after { content: ""; position: absolute; border: 0 solid var(--ot-ink); } .ot-pop-brace-point::before, .ot-pop-brace-point::after { top: calc(var(--ot-pop-brace-g) + var(--ot-pop-brace-r) - var(--ot-hairline)); width: 100vw; height: calc(var(--ot-pop-brace-r) + var(--ot-hairline)); border-top-width: var(--ot-hairline); } .ot-pop-brace-point::before { right: 0; border-right-width: var(--ot-hairline); border-top-right-radius: var(--ot-pop-brace-r); } .ot-pop-brace-point::after { left: 0; border-left-width: var(--ot-hairline); border-top-left-radius: var(--ot-pop-brace-r); } .ot-pop-brace::before, .ot-pop-brace::after { width: var(--ot-pop-brace-r); height: var(--ot-pop-brace-r); } .ot-pop-brace::before { left: 0; border-left-width: var(--ot-hairline); } .ot-pop-brace::after { right: 0; border-right-width: var(--ot-hairline); } .ot-pop[data-side="bottom"] .ot-pop-brace::before, .ot-pop[data-side="bottom"] .ot-pop-brace::after { top: calc(-1 * (var(--ot-pop-brace-g) + var(--ot-pop-brace-r))); border-top-width: var(--ot-hairline); } .ot-pop[data-side="top"] .ot-pop-brace::before, .ot-pop[data-side="top"] .ot-pop-brace::after { top: calc(100% + var(--ot-pop-brace-g)); border-bottom-width: var(--ot-hairline); } .ot-pop[data-side="bottom"] .ot-pop-brace::before { border-top-left-radius: var(--ot-pop-brace-r); } .ot-pop[data-side="bottom"] .ot-pop-brace::after { border-top-right-radius: var(--ot-pop-brace-r); } .ot-pop[data-side="top"] .ot-pop-brace::before { border-bottom-left-radius: var(--ot-pop-brace-r); } .ot-pop[data-side="top"] .ot-pop-brace::after { border-bottom-right-radius: var(--ot-pop-brace-r); } .ot-pop[data-variant="brace"]:is([data-side="left"], [data-side="right"]) .ot-pop-brace { display: none; } /* a brace gathers a width; beside the trigger there's none to gather */ /* Gather: the arms open out from the middle to the panel's ends, then the ends curl in. */ .ot-pop[data-state="open"] .ot-pop-brace-arms { animation: ot-pop-brace-open var(--ot-moderato) var(--ot-exhale) backwards; } .ot-pop[data-state="open"] .ot-pop-brace::before, .ot-pop[data-state="open"] .ot-pop-brace::after { animation: ot-pop-out var(--ot-allegro) var(--ot-breath) reverse var(--ot-moderato) backwards; } @keyframes ot-pop-brace-open { from { clip-path: inset(-3em 50%); } } /* ── cut ── the panel's edge cuts through the trigger's words at half their height and rides over the lower half, the way SPECTRA's title is cut by a line. There is no leader: the join is the cut. Radix gives the trigger's height; the edge the words are cut by is set in ink. */ .ot-pop[data-variant="cut"] { --ot-pop-from: 0px; --ot-pop-cut: calc(var(--radix-popover-trigger-height, 0px) / 2); } .ot-pop[data-variant="cut"][data-side="bottom"] { translate: 0 calc(-1 * var(--ot-pop-cut)); box-shadow: inset 0 var(--ot-hairline) var(--ot-ink), inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); } .ot-pop[data-variant="cut"][data-side="top"] { translate: 0 var(--ot-pop-cut); box-shadow: inset 0 calc(-1 * var(--ot-hairline)) var(--ot-ink), inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong); } .ot-pop[data-variant="cut"][data-state="open"] { animation-duration: var(--ot-andante); } } 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-popover",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-popover","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-popover"}]]}]}]]}],["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.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/popover.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/popover.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/popover.css","content":"$55","type":"registry:file","target":"styles/0nlytype/popover.css"}],"className":"h-[70svh] min-h-80"}]]}]