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:T1d55,"use client"; import { ScrollAreaList } 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 { Command as Primitive } from "cmdk"; import { Dialog, DialogContent, DialogTitle, DialogDescription, type DialogProps, } from "@/components/ui/dialog"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { adornItem, itemText, type ItemAdornmentItemProps } from "@/components/ui/item-adornment"; import { Icon } from "@/components/ui/icon"; import { createMotionLane, motionTokens, useChoreography, } from "@/lib/cojeev-motion/choreography"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; /** * cmdk owns filtering and removes its own Item/Empty DOM. Keep that semantic * update immediate and coordinate the persistent results paint around it. * This is deliberately a results transition, not retained per-item exits. */ export function useCommandResultsMotion( forwardedRef?: React.Ref, ) { const { quiet } = useChoreography(); const quietRef = React.useRef(quiet); const settle = React.useRef<(() => void) | null>(null); React.useLayoutEffect(() => { quietRef.current = quiet; if (quiet) settle.current?.(); }, [quiet]); return React.useCallback( (node: T | null) => { const releaseRef = assignMotionRef(forwardedRef, node); if (!node) return releaseRef; const lane = createMotionLane(1, (value) => node.style.setProperty("--command-results-opacity", String(value)), ); settle.current = () => lane.jump(1); const signature = () => Array.from(node.querySelectorAll("[cmdk-item]")) .map((item) => item.id) .join("|") + ":" + Boolean(node.querySelector("[cmdk-empty]")); let previous = signature(); let revision = 0; const observer = new MutationObserver(() => { const next = signature(); if (next === previous) return; previous = next; node.dataset.resultsRevision = String(++revision); if (quietRef.current) lane.jump(1); else { lane.jump(0.86); lane.to(1, { duration: motionTokens.duration.quick, ease: [...motionTokens.ease.enter], }); } }); observer.observe(node, { childList: true, subtree: true }); return () => { observer.disconnect(); settle.current = null; lane.dispose(); node.style.removeProperty("--command-results-opacity"); releaseRef(); }; }, [forwardedRef], ); } export const commandVariants = cva( "v-cmd [background:var(--popover)] [width:min(520px,100%)] [overflow:hidden] [border:0] [box-shadow:var(--shadow-float),inset_0_0_0_1px_var(--v-border)] [border-radius:22px]", ); export type CommandProps = React.ComponentProps; export function Command({ className, ref, ...props }: CommandProps) { const morphRef = useMorph("surfaces", ref); return ( ); } export type CommandDialogProps = DialogProps & { title?: string; description?: string; className?: string; }; export function CommandDialog({ children, title = "Command palette", description = "Search for a command to run.", className, ...props }: CommandDialogProps) { return ( ); } export type CommandInputProps = React.ComponentProps & { leading?: React.ReactNode; trailing?: React.ReactNode; }; export function CommandInput({ className, leading, trailing, ...props }: CommandInputProps) { const wrapperRef = useMorph("inputs"); return (

{leading ?? } {trailing}

); } export type CommandListProps = React.ComponentProps; export function CommandList({ className, ref, children, ...props }: CommandListProps) { const groupRef = useFlowGroup(ref, { itemSelector: ".v-menu__item", activeSelector: "[aria-selected=true]", }); const resultsRef = useCommandResultsMotion(groupRef); return ( {children} ); } export type CommandEmptyProps = React.ComponentProps; export function CommandEmpty({ className, ...props }: CommandEmptyProps) { return ( ); } export type CommandGroupProps = React.ComponentProps; export function CommandGroup({ className, ...props }: CommandGroupProps) { return ( ); } export type CommandItemProps = React.ComponentProps & { variant?: "default" | "danger"; } & ItemAdornmentItemProps; export function CommandItem({ className, adornment, adornmentId, variant, ref, children, ...props }: CommandItemProps) { const morphRef = useMorph("nav", ref); return ( {adornItem(children, adornment, adornmentId ?? props.value ?? itemText(children), props.asChild)} ); } export type CommandSeparatorProps = React.ComponentProps< typeof Primitive.Separator >; export function CommandSeparator({ className, ...props }: CommandSeparatorProps) { return ( ); } export type CommandShortcutProps = React.ComponentProps<"span">; export function CommandShortcut({ className, ...props }: CommandShortcutProps) { return ( ); } 51:T240f,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-menu:where([data-slot="command"], [data-slot^="command-"]) { 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; } .v-menu__item:where([data-slot="command"], [data-slot^="command-"]) { 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="command"], [data-slot^="command-"]):hover, .v-menu__item:where( [data-slot="command"], [data-slot^="command-"] )[aria-selected="true"] { background: var(--v-beige); } .v-menu__item:where([data-slot="command"], [data-slot^="command-"]).-danger { color: var(--v-danger-ink); } .v-menu__sep:where([data-slot="command"], [data-slot^="command-"]) { height: 1px; background: var(--v-border); margin: 4px 0; } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) { display: flex; align-items: center; gap: var(--s-3); height: 52px; padding: 0 var(--s-5); border-bottom: 1px solid var(--v-border); } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) input { flex: 1; background: none; border: 0; outline: 0; font-size: var(--fs-body); } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]) { max-height: none; overflow: visible; padding: var(--s-2); } .v-cmd__empty:where([data-slot="command"], [data-slot^="command-"]) { padding: var(--s-6); text-align: center; color: var(--muted-foreground); font-size: var(--fs-control); } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) { box-shadow: inset 0 0 0 1px var(--v-edge); } .v-cmd__input:where( [data-slot="command"], [data-slot^="command-"] ):focus-within { box-shadow: inset 0 0 0 2px var(--v-brand); border-color: transparent; } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) { box-shadow: none; } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) { height: 56px; padding: 0 14px 0 18px; gap: 12px; border-bottom: 1px solid var(--v-border); background: var(--v-canvas); box-shadow: none; color: var(--v-text); } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) > .v-icon { width: 20px; height: 20px; color: var(--v-text-2); } .v-cmd__input:where( [data-slot="command"], [data-slot^="command-"] ):focus-within { box-shadow: none; background: color-mix(in oklab, var(--v-pink) 10%, var(--v-canvas)); } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]):focus-within > .v-icon { color: var(--v-text); } .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]) .v-kbd { background: var(--v-beige); border-bottom-color: var(--v-edge); } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]) { padding: 8px; } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) [cmdk-group-heading] { padding: 10px 12px 6px; } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]), .v-menu:where([data-slot="command"], [data-slot^="command-"]) { scrollbar-gutter: stable; } .v-cmd__list:where( [data-slot="command"], [data-slot^="command-"] )::-webkit-scrollbar, .v-menu:where( [data-slot="command"], [data-slot^="command-"] )::-webkit-scrollbar { width: 12px; height: 12px; } .v-cmd__list:where( [data-slot="command"], [data-slot^="command-"] )::-webkit-scrollbar-track, .v-menu:where( [data-slot="command"], [data-slot^="command-"] )::-webkit-scrollbar-track { background: transparent; border-radius: 999px; } .v-cmd__list:where( [data-slot="command"], [data-slot^="command-"] )::-webkit-scrollbar-thumb, .v-menu:where( [data-slot="command"], [data-slot^="command-"] )::-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-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 0 10px 0 8px; border-radius: 12px; font-size: 14.5px; transition: background var(--t-micro); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item .v-disk { width: 28px; height: 28px; } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item .v-disk .v-icon { width: 15px; height: 15px; } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item:hover { background: color-mix(in oklab, var(--v-beige) 70%, var(--v-canvas)); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item[aria-selected="true"] { background: var(--v-pink-soft); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-pink); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item[aria-selected="true"]::after { content: "\21B5"; font-size: 12px; font-weight: 600; color: var(--v-text-2); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--v-canvas); box-shadow: inset 0 0 0 1px var(--v-border); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item.-danger[aria-selected="true"] { background: var(--status-danger-bg); box-shadow: inset 0 0 0 1px var(--v-danger); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) [cmdk-group-heading] { padding: 12px 12px 6px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--v-text-2); } .v-cmd:where([data-slot="command"], [data-slot^="command-"]) [cmdk-group-heading] + .v-menu__item { margin-top: 0; } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]) { padding: 6px 8px 10px; display: grid; gap: 2px; } .v-cmd__empty:where([data-slot="command"], [data-slot^="command-"]) { padding: 28px 20px; font-size: 14px; color: var(--v-text-2); } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]), .v-menu:where([data-slot="command"], [data-slot^="command-"]) { scrollbar-gutter: stable; } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]) { scrollbar-gutter: stable; } .v-cmd__list:where([data-slot="command"], [data-slot^="command-"]), .v-menu:where([data-slot="command"], [data-slot^="command-"]) { scrollbar-gutter: stable; } :root[data-mode="dark"] .v-cmd__input:where([data-slot="command"], [data-slot^="command-"]), :root[data-mode="dark"] .v-cmd:where([data-slot="command"], [data-slot^="command-"]) { background: var(--v-beige); } :root[data-mode="dark"] .v-cmd:where([data-slot="command"], [data-slot^="command-"]) .v-menu__item[aria-selected="true"]::after { background: var(--v-beige-2); color: var(--v-text); } @media (prefers-reduced-motion: reduce) { [data-slot="command"], [data-slot^="command-"], [data-slot="command"]::before, [data-slot="command"]::after, [data-slot^="command-"]::before, [data-slot^="command-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="command-list"] [cmdk-group], [data-slot="command-list"] [cmdk-group-items] { display: contents; } [data-slot="command-list"] > [cmdk-list-sizer] { display: grid; gap: 2px; } [data-slot="command-group"] [cmdk-group-heading] { padding: 12px 12px 6px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v-text-2); } [data-slot="command-group"][hidden] { display: none; } [data-slot="command-item"][data-disabled="true"] { color: var(--v-disabled-ink); cursor: not-allowed; } [data-slot="command-item"] { cursor: pointer; } [data-slot="command-item"][data-text-only] { grid-template-columns: minmax(0, 1fr) auto; white-space: normal; overflow-wrap: anywhere; } /* cmdk keeps its semantic group wrappers; items still paint above the shared selection layer. */ [data-flow-owned][data-slot="command-list"] [data-slot="command-item"] { position: relative; z-index: 1; } .v-command-results > [cmdk-list-sizer] { opacity: var(--command-results-opacity, 1); } /* Automatic identity adds the first column; legacy/custom icon compositions keep theirs. */ [data-slot="command-item"]:has(> .v-item-adornment) { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:46px; padding-block:8px; } [data-slot="command-item"] > .v-item-adornment { grid-column:1; } [data-slot="command-item"]:has(> .v-item-adornment) > [data-slot="command-shortcut"] { grid-column:3; } /* A command has one trailing cue. The Enter hint must not wrap below a supplied shortcut. */ .v-cmd [data-slot="command-item"]:has(> [data-slot="command-shortcut"])::after { display:none; } } 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","cmdk",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cmdk","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":"cmdk"}]]}]}]]}],["$","$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/dialog.json","https://000h.cojeev.com/r/item-adornment.json","https://000h.cojeev.com/r/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/command.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/command.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/command.css","content":"$51","type":"registry:file","target":"styles/cojeev/command.css"}],"className":"h-[70svh] min-h-80"}]]}]