{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/command/Command.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { CommandFilter } from './context'\n\n  export interface CommandProps extends HTMLAttributes<HTMLDivElement> {\n    /** Selected value. Updated on item select. */\n    value?: string\n    onValueChange?: (value: string) => void\n    /** Custom filter — mirrors cmdk `filter`. Omit for the default normalized-substring match. */\n    filter?: CommandFilter\n    /** When false, skip filtering entirely (consumer filters externally). Mirrors cmdk `shouldFilter`. Default true. */\n    shouldFilter?: boolean\n    /** When true, arrow navigation wraps around the ends. Mirrors cmdk `loop`. Default false. */\n    loop?: boolean\n    ref?: HTMLDivElement | null\n  }\n\n  let commandIdCounter = 0\n</script>\n\n<script lang=\"ts\">\n  import { SvelteMap, SvelteSet } from 'svelte/reactivity'\n  import { cn } from '$lib/utils'\n  import { normalizeSearch, setCommandContext, type CommandItemRegistration } from './context'\n\n  let {\n    class: className,\n    value = $bindable(''),\n    onValueChange,\n    filter,\n    shouldFilter = true,\n    loop = false,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: CommandProps = $props()\n\n  commandIdCounter += 1\n  const listId = `uipkge-command-list-${commandIdCounter}`\n\n  let search = $state('')\n  let highlightedId = $state<string | null>(null)\n  let listEl: HTMLElement | null = null\n\n  const allItems = new SvelteMap<string, CommandItemRegistration>()\n  const allGroups = new SvelteMap<string, SvelteSet<string>>()\n\n  const isFiltering = $derived(!!search && shouldFilter)\n\n  const scores = $derived.by(() => {\n    const map = new Map<string, boolean>()\n    if (!isFiltering) {\n      for (const id of allItems.keys()) map.set(id, true)\n      return map\n    }\n    const q = normalizeSearch(search)\n    for (const [id, entry] of allItems) {\n      if (filter) {\n        const result = filter(entry.value, search, entry.keywords)\n        map.set(id, typeof result === 'number' ? result > 0 : result)\n      } else {\n        map.set(id, normalizeSearch(entry.text || entry.value).includes(q))\n      }\n    }\n    return map\n  })\n\n  const visibleGroups = $derived.by(() => {\n    const set = new Set<string>()\n    if (!isFiltering) {\n      for (const id of allGroups.keys()) set.add(id)\n      return set\n    }\n    for (const [groupId, members] of allGroups) {\n      for (const itemId of members) {\n        if (scores.get(itemId)) {\n          set.add(groupId)\n          break\n        }\n      }\n    }\n    return set\n  })\n\n  const count = $derived(isFiltering ? [...scores.values()].filter(Boolean).length : allItems.size)\n  const activeDescendant = $derived(highlightedId ? `${listId}-item-${highlightedId}` : undefined)\n\n  /** Visible, enabled ids in DOM order (falls back to registration order). */\n  function orderedVisibleIds(): string[] {\n    if (!listEl) return [...scores].filter(([, v]) => v).map(([id]) => id)\n    const ids: string[] = []\n    for (const el of listEl.querySelectorAll('[data-command-item-id]')) {\n      const id = el.getAttribute('data-command-item-id')!\n      const entry = allItems.get(id)\n      if (entry && !entry.disabled && (scores.get(id) ?? true)) ids.push(id)\n    }\n    return ids\n  }\n\n  function moveHighlight(direction: 1 | -1) {\n    const ids = orderedVisibleIds()\n    if (!ids.length) return\n    const current = highlightedId ? ids.indexOf(highlightedId) : -1\n    let next: number\n    if (current === -1) {\n      next = direction === 1 ? 0 : ids.length - 1\n    } else if (loop) {\n      next = (current + direction + ids.length) % ids.length\n    } else {\n      // cmdk default: clamp at the ends instead of wrapping.\n      next = Math.min(ids.length - 1, Math.max(0, current + direction))\n    }\n    highlightedId = ids[next]!\n    listEl?.querySelector(`[data-command-item-id=\"${highlightedId}\"]`)?.scrollIntoView({ block: 'nearest' })\n  }\n\n  function selectItem(id: string) {\n    const entry = allItems.get(id)\n    if (!entry || entry.disabled) return\n    value = entry.value\n    onValueChange?.(entry.value)\n    search = ''\n    highlightedId = null\n    entry.onSelect(entry.value)\n  }\n\n  function selectHighlighted() {\n    if (highlightedId) selectItem(highlightedId)\n  }\n\n  setCommandContext({\n    get search() {\n      return search\n    },\n    setSearch(v) {\n      search = v\n      highlightedId = null\n    },\n    get count() {\n      return count\n    },\n    get listId() {\n      return listId\n    },\n    get activeDescendant() {\n      return activeDescendant\n    },\n    isItemVisible: (id) => (isFiltering ? (scores.get(id) ?? true) : true),\n    isGroupVisible: (groupId) => (isFiltering ? visibleGroups.has(groupId) : true),\n    isHighlighted: (id) => highlightedId === id,\n    setHighlighted: (id) => {\n      highlightedId = id\n    },\n    registerItem(id, entry) {\n      // Idempotent: the item $effect re-runs when registration itself\n      // invalidates its deps, so a redundant write would ping-pong forever\n      // (effect_update_depth_exceeded). The onSelect closure is fresh on every\n      // run by construction, so compare data fields and swap the fn silently.\n      const prev = allItems.get(id)\n      if (\n        prev &&\n        prev.value === entry.value &&\n        prev.text === entry.text &&\n        prev.disabled === entry.disabled &&\n        prev.groupId === entry.groupId &&\n        (prev.keywords ?? []).join('\\n') === (entry.keywords ?? []).join('\\n')\n      ) {\n        prev.onSelect = entry.onSelect\n        return\n      }\n      allItems.set(id, entry)\n      if (entry.groupId) {\n        let members = allGroups.get(entry.groupId)\n        if (!members) {\n          members = new SvelteSet<string>()\n          allGroups.set(entry.groupId, members)\n        }\n        members.add(id)\n      }\n    },\n    unregisterItem(id) {\n      if (!allItems.has(id)) return\n      allItems.delete(id)\n      if (highlightedId === id) highlightedId = null\n    },\n    registerGroup(id) {\n      if (!allGroups.has(id)) allGroups.set(id, new SvelteSet<string>())\n    },\n    unregisterGroup(id) {\n      if (!allGroups.has(id)) return\n      allGroups.delete(id)\n    },\n    moveHighlight,\n    selectHighlighted,\n    selectItem,\n    setListElement(el) {\n      listEl = el\n    },\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command\"\n  class={cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/Command.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandDialog.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n\n  export interface CommandDialogProps {\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    title?: string\n    description?: string\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '$lib/components/ui/dialog'\n  import Command from './Command.svelte'\n\n  let {\n    open = $bindable(false),\n    onOpenChange,\n    title = 'Command Palette',\n    description = 'Search for a command to run...',\n    children,\n  }: CommandDialogProps = $props()\n</script>\n\n<Dialog bind:open {onOpenChange}>\n  <DialogContent class=\"overflow-hidden p-0\">\n    <DialogHeader class=\"sr-only\">\n      <DialogTitle>{title}</DialogTitle>\n      <DialogDescription>{description}</DialogDescription>\n    </DialogHeader>\n    <Command>\n      {@render children?.()}\n    </Command>\n  </DialogContent>\n</Dialog>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandDialog.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandEmpty.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandEmptyProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { getCommandContext } from './context'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CommandEmptyProps = $props()\n\n  const ctx = getCommandContext()\n  const show = $derived(!!ctx.search && ctx.count === 0)\n</script>\n\n{#if show}\n  <div\n    bind:this={ref}\n    data-uipkge\n    data-slot=\"command-empty\"\n    class={cn('py-6 text-center text-sm', className)}\n    {...restProps}\n  >\n    {@render children?.()}\n  </div>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandEmpty.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandGroup.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandGroupProps extends HTMLAttributes<HTMLDivElement> {\n    heading?: string\n    ref?: HTMLDivElement | null\n  }\n\n  let commandGroupIdCounter = 0\n</script>\n\n<script lang=\"ts\">\n  import { untrack } from 'svelte'\n  import { cn } from '$lib/utils'\n  import { getCommandContext, setCommandGroupContext } from './context'\n\n  let { class: className, heading, children, ref = $bindable(null), ...restProps }: CommandGroupProps = $props()\n\n  commandGroupIdCounter += 1\n  const id = `g${commandGroupIdCounter}`\n\n  const ctx = getCommandContext()\n  setCommandGroupContext(id)\n\n  $effect(() => {\n    // untrack: keep the register write from subscribing this effect to the\n    // command's group map (effect_update_depth_exceeded). Registration is idempotent.\n    untrack(() => ctx.registerGroup(id))\n    return () => ctx.unregisterGroup(id)\n  })\n\n  const visible = $derived(ctx.isGroupVisible(id))\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command-group\"\n  role=\"group\"\n  aria-label={heading}\n  hidden={!visible}\n  class={cn('text-foreground overflow-hidden p-1', className)}\n  {...restProps}\n>\n  {#if heading}\n    <div data-uipkge data-slot=\"command-group-heading\" class=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\">\n      {heading}\n    </div>\n  {/if}\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandGroup.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandInput.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandInputProps extends HTMLAttributes<HTMLInputElement> {\n    /** Focus the input on mount. Default false so inline embeds don't steal focus. */\n    autoFocus?: boolean\n    ref?: HTMLInputElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Search } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { getCommandContext } from './context'\n\n  let {\n    class: className,\n    autoFocus = false,\n    ref = $bindable(null),\n    onkeydown,\n    ...restProps\n  }: CommandInputProps = $props()\n\n  const ctx = getCommandContext()\n\n  $effect(() => {\n    if (autoFocus) ref?.focus()\n  })\n\n  type OnKeyDown = NonNullable<HTMLAttributes<HTMLInputElement>['onkeydown']>\n  const handleKeyDown: OnKeyDown = (e) => {\n    onkeydown?.(e)\n    if (e.defaultPrevented) return\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      ctx.moveHighlight(1)\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      ctx.moveHighlight(-1)\n    } else if (e.key === 'Enter') {\n      e.preventDefault()\n      ctx.selectHighlighted()\n    } else if (e.key === 'Escape' && ctx.search) {\n      e.preventDefault()\n      ctx.setSearch('')\n    }\n  }\n</script>\n\n<div data-uipkge data-slot=\"command-input-wrapper\" class=\"flex h-9 items-center gap-2 border-b px-3\">\n  <Search class=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n  <input\n    bind:this={ref}\n    bind:value={() => ctx.search, (v) => ctx.setSearch(v)}\n    role=\"combobox\"\n    aria-expanded=\"true\"\n    aria-controls={ctx.listId}\n    aria-activedescendant={ctx.activeDescendant}\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    spellcheck=\"false\"\n    data-uipkge\n    data-slot=\"command-input\"\n    class={cn(\n      'placeholder:text-muted-foreground focus-visible:ring-ring/40 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...restProps}\n    onkeydown={handleKeyDown}\n  />\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandInput.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandItemProps extends HTMLAttributes<HTMLDivElement> {\n    /** Unique value for the item. Used for selection and as the filter fallback. */\n    value?: string\n    /** Extra search terms passed to a custom `filter` — mirrors cmdk item `keywords`. */\n    keywords?: string[]\n    disabled?: boolean\n    onSelect?: (value: string) => void\n    ref?: HTMLDivElement | null\n  }\n\n  let commandItemIdCounter = 0\n</script>\n\n<script lang=\"ts\">\n  import { untrack } from 'svelte'\n  import { cn } from '$lib/utils'\n  import { getCommandContext, getCommandGroupContext } from './context'\n\n  let {\n    class: className,\n    value: valueProp = '',\n    keywords,\n    disabled = false,\n    onSelect,\n    children,\n    ref = $bindable(null),\n    onclick,\n    onmouseenter,\n    ...restProps\n  }: CommandItemProps = $props()\n\n  commandItemIdCounter += 1\n  const id = `c${commandItemIdCounter}`\n\n  const ctx = getCommandContext()\n  const groupId = getCommandGroupContext()\n\n  $effect(() => {\n    const text = ref?.textContent ?? valueProp ?? ''\n    // untrack: the register write must not subscribe this effect to the\n    // command's item map (effect_update_depth_exceeded). Registration is idempotent.\n    untrack(() =>\n      ctx.registerItem(id, {\n        value: valueProp,\n        text,\n        disabled,\n        groupId,\n        keywords,\n        onSelect: (v) => onSelect?.(v),\n      }),\n    )\n    return () => ctx.unregisterItem(id)\n  })\n\n  const visible = $derived(ctx.isItemVisible(id))\n  const highlighted = $derived(ctx.isHighlighted(id))\n\n  type OnClick = NonNullable<HTMLAttributes<HTMLDivElement>['onclick']>\n  type OnMouseEnter = NonNullable<HTMLAttributes<HTMLDivElement>['onmouseenter']>\n\n  const handleClick: OnClick = (e) => {\n    onclick?.(e)\n    if (e.defaultPrevented || disabled) return\n    ctx.selectItem(id)\n  }\n\n  const handleMouseEnter: OnMouseEnter = (e) => {\n    onmouseenter?.(e)\n    if (!disabled) ctx.setHighlighted(id)\n  }\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command-item\"\n  role=\"option\"\n  id={`${ctx.listId}-item-${id}`}\n  data-command-item-id={id}\n  data-value={valueProp}\n  data-highlighted={highlighted ? '' : undefined}\n  data-disabled={disabled ? '' : undefined}\n  aria-selected={highlighted}\n  aria-disabled={disabled || undefined}\n  hidden={!visible}\n  class={cn(\n    \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    className,\n  )}\n  {...restProps}\n  onclick={handleClick}\n  onmouseenter={handleMouseEnter}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandList.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandListProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { getCommandContext } from './context'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CommandListProps = $props()\n\n  const ctx = getCommandContext()\n\n  $effect(() => {\n    ctx.setListElement(ref)\n    return () => ctx.setListElement(null)\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command-list\"\n  role=\"listbox\"\n  id={ctx.listId}\n  aria-label=\"Commands\"\n  class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}\n  {...restProps}\n>\n  <div role=\"presentation\">\n    {@render children?.()}\n  </div>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandList.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandSeparator.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CommandSeparatorProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command-separator\"\n  role=\"separator\"\n  class={cn('bg-border -mx-1 h-px', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandSeparator.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/CommandShortcut.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface CommandShortcutProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: CommandShortcutProps = $props()\n</script>\n\n<span\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"command-shortcut\"\n  class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</span>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/CommandShortcut.svelte"
    },
    {
      "path": "packages/registry-svelte/components/command/context.ts",
      "content": "import { getContext, setContext } from 'svelte'\n\n/**\n * Custom filter — mirrors cmdk `filter`. Return a positive number (or `true`)\n * to keep the item, `0` (or `false`) to hide it. Receives the item value, the\n * current search string, and the item's keywords.\n */\nexport type CommandFilter = (value: string, search: string, keywords?: string[]) => number | boolean\n\nexport interface CommandItemRegistration {\n  value: string\n  text: string\n  disabled: boolean\n  groupId: string | undefined\n  keywords: string[] | undefined\n  onSelect: (value: string) => void\n}\n\nexport interface CommandContextValue {\n  readonly search: string\n  setSearch: (search: string) => void\n  readonly count: number\n  readonly listId: string\n  readonly activeDescendant: string | undefined\n  isItemVisible: (id: string) => boolean\n  isGroupVisible: (groupId: string) => boolean\n  isHighlighted: (id: string) => boolean\n  setHighlighted: (id: string | null) => void\n  registerItem: (id: string, entry: CommandItemRegistration) => void\n  unregisterItem: (id: string) => void\n  registerGroup: (id: string) => void\n  unregisterGroup: (id: string) => void\n  moveHighlight: (direction: 1 | -1) => void\n  selectHighlighted: () => void\n  selectItem: (id: string) => void\n  setListElement: (el: HTMLElement | null) => void\n}\n\nconst COMMAND_CONTEXT_KEY = Symbol('uipkge-command')\nconst COMMAND_GROUP_CONTEXT_KEY = Symbol('uipkge-command-group')\n\nexport function setCommandContext(value: CommandContextValue): void {\n  setContext(COMMAND_CONTEXT_KEY, value)\n}\n\nexport function getCommandContext(): CommandContextValue {\n  const value = getContext<CommandContextValue | undefined>(COMMAND_CONTEXT_KEY)\n  if (!value) throw new Error('Command parts must be used inside <Command>')\n  return value\n}\n\nexport function setCommandGroupContext(groupId: string): void {\n  setContext(COMMAND_GROUP_CONTEXT_KEY, groupId)\n}\n\nexport function getCommandGroupContext(): string | undefined {\n  return getContext<string | undefined>(COMMAND_GROUP_CONTEXT_KEY)\n}\n\nexport function normalizeSearch(s: string): string {\n  return s\n    .toLowerCase()\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/context.ts"
    },
    {
      "path": "packages/registry-svelte/components/command/index.ts",
      "content": "export { default as Command, type CommandProps } from './Command.svelte'\nexport { default as CommandDialog, type CommandDialogProps } from './CommandDialog.svelte'\nexport { default as CommandEmpty, type CommandEmptyProps } from './CommandEmpty.svelte'\nexport { default as CommandGroup, type CommandGroupProps } from './CommandGroup.svelte'\nexport { default as CommandInput, type CommandInputProps } from './CommandInput.svelte'\nexport { default as CommandItem, type CommandItemProps } from './CommandItem.svelte'\nexport { default as CommandList, type CommandListProps } from './CommandList.svelte'\nexport { default as CommandSeparator, type CommandSeparatorProps } from './CommandSeparator.svelte'\nexport { default as CommandShortcut, type CommandShortcutProps } from './CommandShortcut.svelte'\nexport type { CommandFilter } from './context'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/command/index.ts"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/dialog.json"
  ],
  "description": "Searchable command palette a la Cmd-K — keyboard-driven menu with grouped items, icons, shortcuts, and filtering. Use as a global launcher (mounted in a Dialog via CommandDialog) or inline as a typeahead select. Hand-rolled runes behavior: filter, arrow/enter navigation, highlight.",
  "categories": [
    "overlay"
  ]
}