4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 50:T2896,"use client"; import { scrollAreaListChildren } from "@/components/ui/scroll-area"; import * as React from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "@radix-ui/react-menubar"; import { useFlowAppearance, useFlowGroup, } from "@/lib/cojeev-motion/use-flow"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; function useRetainedMenuContentRef(ref?: React.Ref) { const nodeRef = React.useRef(null); const composedRef = React.useCallback((node: HTMLDivElement | null) => { nodeRef.current = node; const release = assignMotionRef(ref, node); return () => { nodeRef.current = null; release(); }; }, [ref]); return { nodeRef, composedRef }; } import { adornItem, adornMenuItem, itemText, type ItemAdornmentItemProps } from "@/components/ui/item-adornment"; import { StateChevron, AnimatedIcon } from "@/components/ui/animated-icon"; export type MenubarProps = React.ComponentProps; export function Menubar({ className, ref, ...props }: MenubarProps) { const morphRef = useMorph("nav", ref); return ( ); } export type MenubarMenuProps = React.ComponentProps; export function MenubarMenu(props: MenubarMenuProps) { return ; } export type MenubarPortalProps = React.ComponentProps; export function MenubarPortal(props: MenubarPortalProps) { return ; } export type MenubarGroupProps = React.ComponentProps; export function MenubarGroup(props: MenubarGroupProps) { return ; } export type MenubarRadioGroupProps = React.ComponentProps< typeof Primitive.RadioGroup >; export function MenubarRadioGroup(props: MenubarRadioGroupProps) { return ; } export type MenubarSubProps = React.ComponentProps; export function MenubarSub(props: MenubarSubProps) { return ; } export type MenubarTriggerProps = React.ComponentProps< typeof Primitive.Trigger > & { chevron?: boolean }; export function MenubarTrigger({ className, children, chevron = true, ref, ...props }: MenubarTriggerProps) { const morphRef = useMorph("buttons", ref); return ( {adornItem(children, false, "", props.asChild, chevron ? : null)} ); } export const menubarContentVariants = cva( "v-menu [background:var(--popover)] [border-radius:var(--r-card-sm)] [padding:var(--s-2)] [min-width:200px] [box-shadow:var(--shadow-float)] [border:1px_solid_var(--v-border)] [display:grid] [gap:2px]", ); export type MenubarContentProps = React.ComponentProps< typeof Primitive.Content >; export function MenubarContent({ className, ref, children, sideOffset = 6, onInteractOutside, ...props }: MenubarContentProps) { const { nodeRef, composedRef } = useRetainedMenuContentRef(ref); const morphRef = useMorph("surfaces", composedRef); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( { onInteractOutside?.(event); // A retained closing menu must not dismiss the next menu when its // keyboard focus enters that sibling before the old exit finishes. if (nodeRef.current?.dataset.state === "closed") event.preventDefault(); }} > {scrollAreaListChildren(children, props.asChild)} ); } export type MenubarSubContentProps = React.ComponentProps< typeof Primitive.SubContent >; export function MenubarSubContent({ className, children, ref, onInteractOutside, ...props }: MenubarSubContentProps) { const { nodeRef, composedRef } = useRetainedMenuContentRef(ref); const morphRef = useMorph("surfaces", composedRef); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( { onInteractOutside?.(event); if (nodeRef.current?.dataset.state === "closed") event.preventDefault(); }} >{scrollAreaListChildren(children, props.asChild)} ); } export type MenubarItemProps = React.ComponentProps & { variant?: "default" | "danger"; inset?: boolean; } & ItemAdornmentItemProps; export function MenubarItem({ className, children, adornment, adornmentId, variant, inset, ref, ...props }: MenubarItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild)} ); } export type MenubarSubTriggerProps = React.ComponentProps< typeof Primitive.SubTrigger > & { inset?: boolean } & ItemAdornmentItemProps; export function MenubarSubTrigger({ className, adornment, adornmentId, inset, children, ref, ...props }: MenubarSubTriggerProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type MenubarCheckboxItemProps = React.ComponentProps< typeof Primitive.CheckboxItem > & ItemAdornmentItemProps; export function MenubarCheckboxItem({ className, adornment, adornmentId, children, ref, ...props }: MenubarCheckboxItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type MenubarRadioItemProps = React.ComponentProps< typeof Primitive.RadioItem > & ItemAdornmentItemProps; export function MenubarRadioItem({ className, adornment, adornmentId, children, ref, ...props }: MenubarRadioItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type MenubarLabelProps = React.ComponentProps; export function MenubarLabel({ className, ...props }: MenubarLabelProps) { return ( ); } export type MenubarSeparatorProps = React.ComponentProps< typeof Primitive.Separator >; export function MenubarSeparator({ className, ...props }: MenubarSeparatorProps) { return ( ); } export type MenubarShortcutProps = React.ComponentProps<"span">; export function MenubarShortcut({ className, ...props }: MenubarShortcutProps) { return ( ); } 51:T1813,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-menu__item:where([data-slot="menubar"], [data-slot^="menubar-"]) { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); font-size: var(--fs-control); width: 100%; text-align: left; white-space: nowrap; } .v-menu__item:where([data-slot="menubar"], [data-slot^="menubar-"]):hover, .v-menu__item:where( [data-slot="menubar"], [data-slot^="menubar-"] )[data-highlighted] { background: var(--v-beige); } .v-menu__item:where([data-slot="menubar"], [data-slot^="menubar-"]).-danger { color: var(--v-danger-ink); } .v-menu__sep:where([data-slot="menubar"], [data-slot^="menubar-"]) { height: 1px; background: var(--v-border); margin: 4px 0; } .v-menu__group:where([data-slot="menubar"], [data-slot^="menubar-"]) { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); padding: 8px 12px 4px; } .v-menubar:where([data-slot="menubar"], [data-slot^="menubar-"]) { display: inline-flex; gap: var(--s-1); padding: 4px; background: var(--card); border-radius: var(--r-pill); } .v-menubar__trigger:where([data-slot="menubar"], [data-slot^="menubar-"]) { height: 32px; padding: 0 var(--s-4); border-radius: var(--r-pill); font-size: var(--fs-control); font-weight: 500; } .v-menubar__trigger:where( [data-slot="menubar"], [data-slot^="menubar-"] )[aria-expanded="true"], .v-menubar__trigger:where( [data-slot="menubar"], [data-slot^="menubar-"] ):hover { background: var(--v-ink); color: var(--v-on-ink); } .v-menu:where([data-slot="menubar"], [data-slot^="menubar-"]) { scrollbar-gutter: stable; } .v-menu:where( [data-slot="menubar"], [data-slot^="menubar-"] )::-webkit-scrollbar { width: 12px; height: 12px; } .v-menu:where( [data-slot="menubar"], [data-slot^="menubar-"] )::-webkit-scrollbar-track { background: transparent; border-radius: 999px; } .v-menu:where( [data-slot="menubar"], [data-slot^="menubar-"] )::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--v-ink) 34%, transparent); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; min-height: 36px; } .v-menu:where([data-slot="menubar"], [data-slot^="menubar-"]) { scrollbar-gutter: stable; } .v-menu:where([data-slot="menubar"], [data-slot^="menubar-"]) { scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { [data-slot="menubar"], [data-slot^="menubar-"], [data-slot="menubar"]::before, [data-slot="menubar"]::after, [data-slot^="menubar-"]::before, [data-slot^="menubar-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot^="menubar-"][data-inset] { padding-left: 32px; } [data-slot^="menubar-"][data-disabled] { color: var(--v-disabled-ink); cursor: not-allowed; } [data-slot^="menubar-"][data-part="item"][data-highlighted] { outline: none; background: var(--v-beige); } [data-slot="menubar-content"], [data-slot="menubar-sub-content"] { min-width:min(200px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:min(480px,var(--radix-menubar-content-available-height,calc(100dvh - 32px))); overflow:visible; overscroll-behavior:contain; overflow-wrap:anywhere; } [data-slot="menubar-item"] { min-width:0; height:auto; min-height:36px; white-space:normal; } /* Nested menus live above dialog surfaces as well as the document. */ [data-slot="menubar-content"], [data-slot="menubar-sub-content"] { z-index: var(--z-popover); } /* Compact by default; --menu-width or inline width can deliberately match a large trigger. */ [data-slot="menubar-content"], [data-slot="menubar-sub-content"] { width:var(--menu-width,260px); min-width:min(200px,calc(100vw - 24px)); max-width:calc(100vw - 24px); color:var(--popover-foreground); } [data-slot^="menubar-"][data-part="item"] { min-width:0; min-height:44px; padding-block:7px; gap:10px; white-space:normal; overflow-wrap:anywhere; text-align:start; } [data-slot^="menubar-"][data-part="item"]:is(:hover,[data-highlighted],[data-state="checked"]) { background:var(--v-beige); color:var(--v-text); } [data-slot^="menubar-"][data-part="item"][data-state="checked"] { background:var(--v-pink-soft); } [data-slot^="menubar-"][data-part="item"]:active { background:var(--v-pink-soft); color:var(--v-text); } [data-slot^="menubar-"][data-part="item"].-danger { color:var(--v-danger-ink); } [data-slot^="menubar-"][data-part="item"][data-disabled] { background:transparent; color:var(--v-disabled-ink); } [data-slot^="menubar-"] .v-menu__check { display:inline-grid; place-items:center; width:18px; min-width:18px; margin-inline-start:auto; color:inherit; } [data-slot^="menubar-"] .v-menu__check .v-icon { width:16px; height:16px; } [data-slot="menubar-trigger"] { display:inline-flex; align-items:center; gap:8px; min-height:36px; height:auto; color:var(--v-text); } [data-slot="menubar-trigger"]:is(:hover,[data-highlighted],[data-state="open"],[aria-expanded="true"]) { background:var(--v-ink); color:var(--v-on-ink); --mfill:var(--v-ink); } [data-slot="menubar-trigger"]:active { background:var(--v-pink); color:var(--v-on-accent); --mfill:var(--v-pink); } [data-slot="menubar-trigger"][data-disabled] { background:transparent; color:var(--v-disabled-ink); --mfill:transparent; } /* A native flyout may share a narrow viewport with its parent. Use Popper's measured free width so its labels wrap instead of leaving the screen. */ [data-slot="menubar-sub-content"] { min-width:min(200px,var(--radix-menubar-content-available-width,200px)); max-width:min(calc(100vw - 24px),var(--radix-menubar-content-available-width,260px)); } /* The shared ScrollArea owns menu overflow and its custom thumb. */ :is([data-slot="menubar-content"],[data-slot="menubar-sub-content"]) .v-list-scroll { --list-scroll-max-height:min(320px, calc(var(--radix-popper-available-height, 60dvh) - 20px)); } } 4b:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/scroll-area.json","https://000h.cojeev.com/r/item-adornment.json","https://000h.cojeev.com/r/animated-icon.json"]}]]}],["$","$L4d",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":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/menubar.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/menubar.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/menubar.css","content":"$51","type":"registry:file","target":"styles/cojeev/menubar.css"}],"className":"h-[70svh] min-h-80"}]]}]