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[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"] 4e:T2fa1,import { IconChevronRight } from '@tabler/icons-react' import { Command as CommandRoot } from '@kmenu/react' import { CommandEmpty, CommandGroup, CommandInput, CommandList, CommandOption, useCommand, } from '@kmenu/react' import type { CommandOption as CommandOptionType, FilterFunction } from 'kmenu' import { AnimatePresence, motion, useReducedMotion } from 'motion/react' import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react' import { search } from '@/lib/command-filter' import { cn } from '@/lib/utils' export interface CommandMenuAction extends Omit { icon?: ReactNode shortcut?: Array hint?: string badge?: string crumb?: string hidden?: boolean children?: Array } const asAction = (option: CommandOptionType): CommandMenuAction => option as CommandMenuAction const filterActions: FilterFunction = (options, query) => { const visible = query.trim() ? options : options.filter((option) => !asAction(option).hidden) return search(visible, query) } function replay(element: HTMLElement | null | undefined, className: string) { if (!element) return element.classList.remove(className) void element.offsetWidth element.classList.add(className) } function CommandOptions() { const { command, state } = useCommand() const position = `${String(state.currentLevel)}:${state.breadcrumbs.map((crumb) => crumb.id).join('>')}` const lastPosition = useRef(position) const query = state.input const topId = state.filtered[0]?.id useEffect(() => { if (topId) command?.setActiveById(topId) }, [command, query, topId]) useEffect(() => { if (lastPosition.current === position) return lastPosition.current = position const list = document.querySelector('.command-list') replay(list, 'cmd-level-enter') replay(list?.closest('.command-dialog'), 'cmd-level-shift') }, [position]) const filtered = state.filtered.map(asAction) const groups = [...new Set(filtered.map((action) => action.group))].filter( (group) => group !== undefined, ) const ungrouped = filtered.filter((action) => !action.group) const renderOption = (action: CommandMenuAction) => ( {action.icon ? {action.icon} : null} {action.label} {action.badge ? {action.badge} : null} {action.children ? ( ) : action.shortcut ? ( {action.shortcut.map((key) => ( {key} ))} ) : action.hint ? ( {action.hint} ) : null} ) if (state.currentLevel > 0) return <>{filtered.map(renderOption)} return ( <> {ungrouped.map(renderOption)} {groups.map((group) => ( {group}}> {filtered.filter((action) => action.group === group).map(renderOption)} ))} ) } function Breadcrumbs({ options, scope, onLeaveScope, }: { options: Array scope?: string onLeaveScope: () => void }) { const { command, state } = useCommand() const reduced = useReducedMotion() const labels = new Map() const walk = (actions: Array) => { for (const action of actions) { if (action.id) labels.set(action.id, action.crumb ?? action.label) if (action.children) walk(action.children) } } walk(options) const hidden = reduced ? { opacity: 0 } : { opacity: 0, x: -8, filter: 'blur(4px)' } const backTo = (depth: number) => { for (let left = state.breadcrumbs.length; left > depth; left -= 1) { if (!command?.goBack()) break } } const here = state.breadcrumbs.length return (

{here === 0 && !scope ? ( Home ) : ( )} {scope ? ( here === 0 ? ( {scope} ) : ( ) ) : null} {state.breadcrumbs.map(({ id, label }, index) => index === here - 1 ? ( {labels.get(id) ?? label} ) : ( { backTo(index + 1) }} > {labels.get(id) ?? label} ), )}

) } function ScopeBackspace({ onLeaveScope }: { onLeaveScope: () => void }) { const { state } = useCommand() const depth = state.breadcrumbs.length useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if (event.key !== 'Backspace' || depth > 0) return const target = event.target if (target instanceof HTMLInputElement && target.value !== '') return event.preventDefault() onLeaveScope() } window.addEventListener('keydown', onKeyDown, true) return () => window.removeEventListener('keydown', onKeyDown, true) }, [depth, onLeaveScope]) return null } const OPEN_EVENT = 'kobra:open-command-menu' export function openCommandMenu(scope?: string) { window.dispatchEvent(new CustomEvent(OPEN_EVENT, { detail: { scope } })) } declare global { interface WindowEventMap { [OPEN_EVENT]: CustomEvent<{ scope?: string }> } } const OPEN_OVERLAY = ':is([role="dialog"],[role="alertdialog"],[role="menu"],[role="listbox"]):is([data-open],[data-state="open"])' export function CommandMenu({ actions, scopes, placeholder = 'Type a command or search…', }: { actions: Array scopes?: Record< string, { actions: Array; placeholder: string; crumb?: string } > placeholder?: string }) { const [open, setOpen] = useState(false) const [scope, setScope] = useState(null) const [isClosing, setIsClosing] = useState(false) const [ready, setReady] = useState(false) const [sized, setSized] = useState(false) const overlayRef = useRef(null) const dialogRef = useRef(null) const sizerRef = useRef(null) useEffect(() => { const dialog = dialogRef.current const sizer = sizerRef.current if (!open || !dialog || !sizer) { setSized(false) return } const style = getComputedStyle(dialog) const chrome = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth) let measured = false const observer = new ResizeObserver(([entry]) => { const box = entry?.borderBoxSize?.[0] if (!box) return dialog.style.height = `${box.blockSize + chrome}px` if (measured) return measured = true requestAnimationFrame(() => setSized(true)) }) observer.observe(sizer) return () => { observer.disconnect() dialog.style.removeProperty('height') } }, [open]) useEffect(() => { if (!open) { setReady(false) return } const timeout = window.setTimeout(() => setReady(true), 180) return () => window.clearTimeout(timeout) }, [open]) const leaveScope = useCallback(() => { setScope(null) }, []) const handleClose = useCallback(() => { if (isClosing) return setIsClosing(true) overlayRef.current?.classList.add('closing') dialogRef.current?.classList.add('closing') window.setTimeout(() => { setOpen(false) setIsClosing(false) overlayRef.current?.classList.remove('closing') dialogRef.current?.classList.remove('closing') }, 180) }, [isClosing]) const openMenu = useCallback((next: string | null = null) => { setScope(next) const overlay = document.querySelector(OPEN_OVERLAY) if (!overlay) { setOpen(true) return } document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })) const start = performance.now() const openWhenGone = () => { if (!overlay.isConnected || performance.now() - start > 500) setOpen(true) else requestAnimationFrame(openWhenGone) } requestAnimationFrame(openWhenGone) }, []) useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault() if (open) setOpen(false) else openMenu() } else if (event.key === 'Escape' && open && !isClosing) { event.preventDefault() handleClose() } } const onOpen = (event: WindowEventMap[typeof OPEN_EVENT]) => openMenu(event.detail?.scope ?? null) window.addEventListener('keydown', onKeyDown) window.addEventListener(OPEN_EVENT, onOpen) return () => { window.removeEventListener('keydown', onKeyDown) window.removeEventListener(OPEN_EVENT, onOpen) } }, [handleClose, isClosing, open, openMenu]) if (!open) return null const scoped = scope ? scopes?.[scope] : undefined const options = scoped?.actions ?? actions return ( No results found. ) } 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","@kmenu/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40kmenu%2Freact","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":"@kmenu/react"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","li","kmenu",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/kmenu","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":"kmenu"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4c",null,{"namespace":"@kobra","registryDependencies":[]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"components/ui/command-menu.tsx","content":"$4e","type":"registry:ui","target":"components/ui/command-menu.tsx"}],"className":"h-[70svh] min-h-80"}]]}]