4d: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"] 4e: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"] 4f: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"] 50: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"] 51:T242b,"use client"; import { scrollAreaListChildren } from "@/components/ui/scroll-area"; import * as React from "react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "@radix-ui/react-context-menu"; import { useFlowAppearance, useFlowGroup, } from "@/lib/cojeev-motion/use-flow"; import { adornMenuItem, itemText, type ItemAdornmentItemProps } from "@/components/ui/item-adornment"; import { StateChevron, AnimatedIcon } from "@/components/ui/animated-icon"; export type ContextMenuProps = React.ComponentProps; export function ContextMenu(props: ContextMenuProps) { return ; } export type ContextMenuPortalProps = React.ComponentProps< typeof Primitive.Portal >; export function ContextMenuPortal(props: ContextMenuPortalProps) { return ; } export type ContextMenuGroupProps = React.ComponentProps< typeof Primitive.Group >; export function ContextMenuGroup(props: ContextMenuGroupProps) { return ; } export type ContextMenuRadioGroupProps = React.ComponentProps< typeof Primitive.RadioGroup >; export function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) { return ( ); } export type ContextMenuSubProps = React.ComponentProps; export function ContextMenuSub(props: ContextMenuSubProps) { return ; } export type ContextMenuTriggerProps = React.ComponentProps< typeof Primitive.Trigger >; export function ContextMenuTrigger({ className, ref, onKeyDown, ...props }: ContextMenuTriggerProps) { return ( { onKeyDown?.(event); if (event.defaultPrevented || props.disabled) return; if ( event.key === "ContextMenu" || (event.shiftKey && event.key === "F10") ) { event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); event.currentTarget.dispatchEvent( new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left + rect.width / 2, clientY: rect.top + rect.height / 2, }), ); } }} className={cn("", className)} {...props} /> ); } export const contextmenuContentVariants = 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 ContextMenuContentProps = React.ComponentProps< typeof Primitive.Content >; export function ContextMenuContent({ className, ref, children, ...props }: ContextMenuContentProps) { const morphRef = useMorph("surfaces", ref); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( {scrollAreaListChildren(children, props.asChild)} ); } export type ContextMenuSubContentProps = React.ComponentProps< typeof Primitive.SubContent >; export function ContextMenuSubContent({ className, children, ref, ...props }: ContextMenuSubContentProps) { const morphRef = useMorph("surfaces", ref); const groupRef = useFlowGroup(morphRef, { itemSelector: ".v-menu__item", activeSelector: "[data-highlighted]", }); const flowRef = useFlowAppearance(true, groupRef, "grow"); return ( {scrollAreaListChildren(children, props.asChild)} ); } export type ContextMenuItemProps = React.ComponentProps< typeof Primitive.Item > & { variant?: "default" | "danger"; inset?: boolean } & ItemAdornmentItemProps; export function ContextMenuItem({ className, children, adornment, adornmentId, variant, inset, ref, ...props }: ContextMenuItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild)} ); } export type ContextMenuSubTriggerProps = React.ComponentProps< typeof Primitive.SubTrigger > & { inset?: boolean } & ItemAdornmentItemProps; export function ContextMenuSubTrigger({ className, adornment, adornmentId, inset, children, ref, ...props }: ContextMenuSubTriggerProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type ContextMenuCheckboxItemProps = React.ComponentProps< typeof Primitive.CheckboxItem > & ItemAdornmentItemProps; export function ContextMenuCheckboxItem({ className, adornment, adornmentId, children, ref, ...props }: ContextMenuCheckboxItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type ContextMenuRadioItemProps = React.ComponentProps< typeof Primitive.RadioItem > & ItemAdornmentItemProps; export function ContextMenuRadioItem({ className, adornment, adornmentId, children, ref, ...props }: ContextMenuRadioItemProps) { const morphRef = useMorph("nav", ref); return ( {adornMenuItem(children, adornment, adornmentId ?? props.textValue ?? props.id ?? itemText(children), props.asChild, )} ); } export type ContextMenuLabelProps = React.ComponentProps< typeof Primitive.Label >; export function ContextMenuLabel({ className, ...props }: ContextMenuLabelProps) { return ( ); } export type ContextMenuSeparatorProps = React.ComponentProps< typeof Primitive.Separator >; export function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps) { return ( ); } export type ContextMenuShortcutProps = React.ComponentProps<"span">; export function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps) { return ( ); } 52:T1517,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-menu__item:where([data-slot="context-menu"], [data-slot^="context-menu-"]) { 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="context-menu"], [data-slot^="context-menu-"] ):hover, .v-menu__item:where( [data-slot="context-menu"], [data-slot^="context-menu-"] )[data-highlighted] { background: var(--v-beige); } .v-menu__item:where( [data-slot="context-menu"], [data-slot^="context-menu-"] ).-danger { color: var(--v-danger-ink); } .v-menu__sep:where([data-slot="context-menu"], [data-slot^="context-menu-"]) { height: 1px; background: var(--v-border); margin: 4px 0; } .v-menu__group:where([data-slot="context-menu"], [data-slot^="context-menu-"]) { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); padding: 8px 12px 4px; } .v-menu:where([data-slot="context-menu"], [data-slot^="context-menu-"]) { scrollbar-gutter: stable; } .v-menu:where( [data-slot="context-menu"], [data-slot^="context-menu-"] )::-webkit-scrollbar { width: 12px; height: 12px; } .v-menu:where( [data-slot="context-menu"], [data-slot^="context-menu-"] )::-webkit-scrollbar-track { background: transparent; border-radius: 999px; } .v-menu:where( [data-slot="context-menu"], [data-slot^="context-menu-"] )::-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="context-menu"], [data-slot^="context-menu-"]) { scrollbar-gutter: stable; } .v-menu:where([data-slot="context-menu"], [data-slot^="context-menu-"]) { scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { [data-slot="context-menu"], [data-slot^="context-menu-"], [data-slot="context-menu"]::before, [data-slot="context-menu"]::after, [data-slot^="context-menu-"]::before, [data-slot^="context-menu-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="context-menu-trigger"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot^="context-menu-"][data-inset] { padding-left: 32px; } [data-slot^="context-menu-"][data-disabled] { color: var(--v-disabled-ink); cursor: not-allowed; } [data-slot^="context-menu-"][data-highlighted] { outline: none; background: var(--v-beige); } [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"] { min-width:min(200px,var(--radix-context-menu-content-available-width,calc(100vw - 24px))); max-width:min(calc(100vw - 24px),var(--radix-context-menu-content-available-width,calc(100vw - 24px))); max-height:min(480px,var(--radix-context-menu-content-available-height,calc(100dvh - 32px))); overflow:visible; overscroll-behavior:contain; overflow-wrap:anywhere; } [data-slot="context-menu-item"] { min-width:0; height:auto; min-height:36px; white-space:normal; } [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"] { z-index:var(--z-popover); } [data-slot^="context-menu-"][data-part="item"] { min-width:0; white-space:normal; overflow-wrap:anywhere; padding-block:8px; } [data-slot="context-menu-content"], [data-slot="context-menu-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^="context-menu-"][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^="context-menu-"][data-part="item"]:is(:hover,[data-highlighted],[data-state="checked"]) { background:var(--v-beige); color:var(--v-text); } [data-slot^="context-menu-"][data-part="item"][data-state="checked"], [data-slot^="context-menu-"][data-part="item"]:active { background:var(--v-pink-soft); color:var(--v-text); } [data-slot^="context-menu-"][data-part="item"].-danger { color:var(--v-danger-ink); } [data-slot^="context-menu-"][data-part="item"][data-disabled] { background:transparent; color:var(--v-disabled-ink); } [data-slot^="context-menu-"] .v-menu__check { display:inline-grid; place-items:center; width:18px; min-width:18px; margin-inline-start:auto; color:inherit; } [data-slot^="context-menu-"] .v-menu__check .v-icon { width:16px; height:16px; } /* 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="context-menu-sub-content"] { min-width:min(200px,var(--radix-context-menu-content-available-width,200px)); max-width:min(calc(100vw - 24px),var(--radix-context-menu-content-available-width,260px)); } /* The shared ScrollArea owns menu overflow and its custom thumb. */ :is([data-slot="context-menu-content"],[data-slot="context-menu-sub-content"]) .v-list-scroll { --list-scroll-max-height:min(320px, calc(var(--radix-popper-available-height, 60dvh) - 20px)); } } 4c:["$","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-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"}]]}]}]]}],["$","$L4d",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"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/context-menu.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/context-menu.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/context-menu.css","content":"$52","type":"registry:file","target":"styles/cojeev/context-menu.css"}],"className":"h-[70svh] min-h-80"}]]}]