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[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"] 52:T28c2,// Ballmac UI: Command. https://ui.ballmac.com/components/command // Based on shadcn/ui Command (MIT, Copyright (c) 2023 shadcn) on cmdk (MIT, Copyright (c) 2022 Dip), adding a page-safe scroll fix, an item description, a loading row, and a hotkey dialog. "use client"; import * as React from "react"; import { Command as Primitive } from "cmdk"; import { Check, Search } from "lucide-react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { cn } from "@/lib/utils"; import { useMessages } from "@/lib/ballmac/i18n"; /** * cmdk scrolls the highlighted row into view with scrollIntoView, which also scrolls the page when * the command menu is off-screen (an inline demo below the fold). Route it to the list only. */ function scrollWithinList(this: HTMLElement) { const list = this.closest("[cmdk-list]"); if (!list) return; const bounds = list.getBoundingClientRect(); const rect = this.getBoundingClientRect(); if (rect.top < bounds.top) list.scrollTop -= bounds.top - rect.top + 8; else if (rect.bottom > bounds.bottom) list.scrollTop += rect.bottom - bounds.bottom + 8; } function keepScrollInList(el: HTMLElement | null) { if (el) el.scrollIntoView = scrollWithinList; } function setRef(ref: React.Ref | undefined, value: T | null) { if (typeof ref === "function") ref(value); else if (ref) (ref as React.RefObject).current = value; } type CommandProps = React.ComponentProps; /** Root. Accepts cmdk props such as `filter`, `shouldFilter`, `value`, `onValueChange` and `loop`. */ function Command({ className, loop = true, label, ...props }: CommandProps) { const msg = useMessages() label ??= msg("command.label", "Command menu") return ( ); } type CommandDialogProps = Omit & { /** Controlled open state. */ open?: boolean; /** Initial open state when uncontrolled. */ defaultOpen?: boolean; /** Called when the dialog opens or closes. */ onOpenChange?: (open: boolean) => void; /** Key that toggles the dialog together with ⌘ (Ctrl on Windows and Linux). `false` turns the shortcut off. */ hotkey?: string | false; /** Accessible title of the dialog (visually hidden). */ title?: string; /** Accessible description of the dialog (visually hidden). */ description?: string; }; /** The command menu in a modal dialog near the top of the screen. Toggled with ⌘K by default; Escape closes it. */ function CommandDialog({ open: openProp, defaultOpen = false, onOpenChange, hotkey = "k", title, description, className, children, ...props }: CommandDialogProps) { const msg = useMessages() title ??= msg("command.title", "Command menu") description ??= msg("command.description", "Type a command or search. Use the arrow keys to move and Enter to run.") const [uncontrolled, setUncontrolled] = React.useState(defaultOpen); const open = openProp ?? uncontrolled; const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); React.useEffect(() => { if (!hotkey) return; const onKeyDown = (event: KeyboardEvent) => { if ( (event.metaKey || event.ctrlKey) && !event.altKey && event.key.toLowerCase() === hotkey.toLowerCase() ) { event.preventDefault(); setOpen(!open); } }; document.addEventListener("keydown", onKeyDown); return () => document.removeEventListener("keydown", onKeyDown); }, [hotkey, open, setOpen]); return ( {title} {description} {children} ); } type CommandInputProps = React.ComponentProps; function CommandInput({ className, ...props }: CommandInputProps) { return (

); } type CommandListProps = React.ComponentProps; function CommandList({ className, ...props }: CommandListProps) { return ( ); } type CommandEmptyProps = React.ComponentProps; function CommandEmpty({ className, ...props }: CommandEmptyProps) { return ( ); } type CommandLoadingProps = React.ComponentProps; /** Shown while results load. Renders `role="progressbar"` with the given `progress` (0 to 100). */ function CommandLoading({ className, ...props }: CommandLoadingProps) { return ( ); } type CommandGroupProps = React.ComponentProps; function CommandGroup({ ref, className, ...props }: CommandGroupProps) { return ( { keepScrollInList(el?.querySelector("[cmdk-group-heading]") ?? null); setRef(ref, el); }} data-slot="command-group" className={cn( "overflow-hidden text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className, )} {...props} /> ); } type CommandSeparatorProps = React.ComponentProps; function CommandSeparator({ className, ...props }: CommandSeparatorProps) { return ( ); } type CommandItemProps = React.ComponentProps & { /** Leading icon. Use this instead of putting the icon in `children` when the item has a `description`. */ icon?: React.ReactNode; /** Second line of muted text under the title. */ description?: React.ReactNode; /** Show a check at the end, for the currently chosen option in a picker. */ selected?: boolean; }; function CommandItem({ ref, className, icon, description, selected, children, ...props }: CommandItemProps) { return ( { keepScrollInList(el); setRef(ref, el); }} data-slot="command-item" data-checked={selected ? "true" : undefined} className={cn( "relative flex min-h-9 cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className, )} {...props} > {icon} {description ? ( {children} {description} ) : ( children )} {selected && ); } type CommandShortcutProps = React.ComponentProps<"span">; function CommandShortcut({ className, ...props }: CommandShortcutProps) { return ( ); } export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandLoading, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, type CommandProps, type CommandDialogProps, type CommandInputProps, type CommandListProps, type CommandEmptyProps, type CommandLoadingProps, type CommandGroupProps, type CommandItemProps, type CommandShortcutProps, type CommandSeparatorProps, }; 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","cmdk@^1",{"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@^1"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@ballmac","registryDependencies":["utils","https://ui.ballmac.com/r/i18n.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ballmac/components/command.tsx","content":"$52","type":"registry:ui","target":"@components/ballmac/command.tsx"}],"className":"h-[70svh] min-h-80"}]]}]