@svgrid/grid 2.1.22 → 2.2.0

package/src/SvColorInput.svelte

@@ -1,186 +1,187 @@
-<script lang="ts">
-  /**
-   * SvColorInput - a color swatch that opens a portalled popover with a hex
-   * field, a native picker, and a preset palette. Parity: Smart `smart-color-input`.
-   * Emits a hex string. Popover escapes the grid scroll container via popover.ts.
-   *
-   * The styled renderer over the headless `createColorInput` core: hex
-   * normalization, palette, draft field and open/close state come from the core;
-   * the portal + anchored measurement stay here (render concerns).
-   */
-  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import SvField from './SvField.svelte'
-  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
-  import { createColorInput } from './createColorInput.svelte'
-
-  /** User-facing strings for the color popover (localizable via `messages`). */
-  type ColorMessages = { dialog: string; picker: string; hex: string }
-  const DEFAULT_MESSAGES: ColorMessages = { dialog: 'Choose color', picker: 'Color picker', hex: 'Hex value' }
-
-  type Props = SvEditorProps & {
-    value?: string
-    onChange?: (hex: string) => void
-    /** Preset swatches. */
-    palette?: string[]
-    autoOpen?: boolean
-    /** Override the built-in popover strings. */
-    messages?: Partial<ColorMessages>
-  }
-
-  let {
-    value = '#3b82f6',
-    onChange,
-    disabled = false,
-    readonly = false,
-    palette,
-    name,
-    size = 'md',
-    ariaLabel,
-    invalid = false,
-    required = false,
-    error,
-    label,
-    hint,
-    dir,
-    id,
-    autoOpen = false,
-    messages,
-  }: Props = $props()
-
-  const autoId = nextEditorId('sv-color')
-  const uid = $derived(id ?? autoId)
-  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
-
-  const col = createColorInput({
-    value: () => value,
-    onChange: (hex) => onChange?.(hex),
-    disabled: () => disabled,
-    readonly: () => readonly,
-    palette: () => palette as string[],
-    id: () => uid,
-    invalid: () => invalid,
-    required: () => required,
-    error: () => error,
-    hint: () => hint,
-    ariaLabel: () => ariaLabel,
-  })
-
-  let triggerEl = $state<HTMLButtonElement | null>(null)
-  let panelEl = $state<HTMLDivElement | null>(null)
-  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
-
-  function updatePos() {
-    if (!triggerEl) return
-    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
-  }
-
-  $effect(() => {
-    if (!col.popover.open) return
-    updatePos()
-    const reposition = () => updatePos()
-    window.addEventListener('scroll', reposition, true)
-    window.addEventListener('resize', reposition)
-    const layer = createDismissableLayer({
-      element: () => [triggerEl, panelEl],
-      onDismiss: () => col.popover.close(),
-    })
-    layer.activate()
-    return () => {
-      window.removeEventListener('scroll', reposition, true)
-      window.removeEventListener('resize', reposition)
-      layer.release()
-    }
-  })
-
-  function focusOpen(node: HTMLButtonElement) {
-    if (!autoOpen) return
-    node.focus(); col.popover.show()
-  }
-</script>
-
-<SvField id={uid} {label} {hint} {error} {required} {dir}>
-  <button
-    bind:this={triggerEl}
-    class="sv-color sv-color--{size}"
-    class:is-disabled={disabled}
-    class:is-invalid={invalid}
-    {...col.swatchProps()}
-    use:focusOpen
-  >
-    <span class="sv-color__swatch" style:background={col.normalized}></span>
-    <span class="sv-color__hex">{col.normalized}</span>
-  </button>
-</SvField>
-
-{#if col.popover.open}
-  <div
-    class="sv-color__panel"
-    bind:this={panelEl}
-    use:portalToBody
-    use:popIn={{ up: panelRect.openUpward }}
-    style:position="fixed"
-    style:top={`${panelRect.top}px`}
-    style:left={`${panelRect.left}px`}
-    role="dialog"
-    aria-label={M.dialog}
-  >
-    <div class="sv-color__top">
-      <input class="sv-color__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label={M.picker} />
-      <input
-        class="sv-color__field"
-        type="text"
-        bind:value={col.hexDraft}
-        spellcheck="false"
-        aria-label={M.hex}
-        onblur={col.commitHex}
-        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
-      />
-    </div>
-    <div class="sv-color__palette">
-      {#each col.palette as c (c)}
-        <button
-          class="sv-color__chip"
-          class:is-active={col.isActive(c)}
-          style:background={c}
-          {...col.chipProps(c)}
-        ></button>
-      {/each}
-    </div>
-  </div>
-{/if}
-{#if name}<input type="hidden" {name} value={col.normalized} />{/if}
-
-<style>
-  .sv-color {
-    --_accent: var(--sg-accent, #2563eb);
-    display: inline-flex; align-items: center; gap: 8px;
-    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
-    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
-    padding: 0 10px; cursor: pointer; font: inherit;
-  }
-  .sv-color--sm { height: 28px; font-size: 12px; }
-  .sv-color--md { height: 34px; font-size: 13px; }
-  .sv-color--lg { height: 40px; font-size: 15px; }
-  .sv-color.is-disabled { opacity: 0.6; cursor: not-allowed; }
-  .sv-color.is-invalid { border-color: var(--sg-danger, #dc2626); }
-  .sv-color.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
-  .sv-color:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
-  .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
-  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; }
-
-  :global(.sv-color__panel) {
-    z-index: 2147483647; width: 208px; padding: 12px;
-    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
-    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
-  }
-  :global(.sv-color__top) { display: flex; gap: 8px; margin-bottom: 10px; }
-  :global(.sv-color__native) { width: 36px; height: 34px; padding: 0; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }
-  :global(.sv-color__field) {
-    flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
-    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
-  }
-  :global(.sv-color__palette) { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
-  :global(.sv-color__chip) { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
-  :global(.sv-color__chip.is-active) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
-</style>
+<script lang="ts">
+  /**
+   * SvColorInput - a color swatch that opens a portalled popover with a hex
+   * field, a native picker, and a preset palette. Parity: Smart `smart-color-input`.
+   * Emits a hex string. Popover escapes the grid scroll container via popover.ts.
+   *
+   * The styled renderer over the headless `createColorInput` core: hex
+   * normalization, palette, draft field and open/close state come from the core;
+   * the portal + anchored measurement stay here (render concerns).
+   */
+  import { anchoredRect, portalToBody, popIn, type AnchoredRect } from './popover'
+  import { createDismissableLayer } from './a11y/dismissable'
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createColorInput } from './createColorInput.svelte'
+
+  /** User-facing strings for the color popover (localizable via `messages`). */
+  type ColorMessages = { dialog: string; picker: string; hex: string }
+  const DEFAULT_MESSAGES: ColorMessages = { dialog: 'Choose color', picker: 'Color picker', hex: 'Hex value' }
+
+  type Props = SvEditorProps & {
+    value?: string
+    onChange?: (hex: string) => void
+    /** Preset swatches. */
+    palette?: string[]
+    autoOpen?: boolean
+    /** Override the built-in popover strings. */
+    messages?: Partial<ColorMessages>
+  }
+
+  let {
+    value = $bindable('#3b82f6'),
+    onChange,
+    disabled = false,
+    readonly = false,
+    palette,
+    name,
+    size = 'md',
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    autoOpen = false,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-color')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
+  const col = createColorInput({
+    value: () => value,
+    // Write `value` (so `bind:value` works) AND fire `onChange` (callback users).
+    onChange: (hex) => { value = hex; onChange?.(hex) },
+    disabled: () => disabled,
+    readonly: () => readonly,
+    palette: () => palette as string[],
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+
+  let triggerEl = $state<HTMLButtonElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let panelRect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
+
+  function updatePos() {
+    if (!triggerEl) return
+    panelRect = anchoredRect(triggerEl.getBoundingClientRect(), { estimatedHeight: 210, minWidth: 200 })
+  }
+
+  $effect(() => {
+    if (!col.popover.open) return
+    updatePos()
+    const reposition = () => updatePos()
+    window.addEventListener('scroll', reposition, true)
+    window.addEventListener('resize', reposition)
+    const layer = createDismissableLayer({
+      element: () => [triggerEl, panelEl],
+      onDismiss: () => col.popover.close(),
+    })
+    layer.activate()
+    return () => {
+      window.removeEventListener('scroll', reposition, true)
+      window.removeEventListener('resize', reposition)
+      layer.release()
+    }
+  })
+
+  function focusOpen(node: HTMLButtonElement) {
+    if (!autoOpen) return
+    node.focus(); col.popover.show()
+  }
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <button
+    bind:this={triggerEl}
+    class="sv-color sv-color--{size}"
+    class:is-disabled={disabled}
+    class:is-invalid={invalid}
+    {...col.swatchProps()}
+    use:focusOpen
+  >
+    <span class="sv-color__swatch" style:background={col.normalized}></span>
+    <span class="sv-color__hex">{col.normalized}</span>
+  </button>
+</SvField>
+
+{#if col.popover.open}
+  <div
+    class="sv-color__panel"
+    bind:this={panelEl}
+    use:portalToBody
+    use:popIn={{ up: panelRect.openUpward }}
+    style:position="fixed"
+    style:top={`${panelRect.top}px`}
+    style:left={`${panelRect.left}px`}
+    role="dialog"
+    aria-label={M.dialog}
+  >
+    <div class="sv-color__top">
+      <input class="sv-color__native" type="color" value={col.normalized} oninput={(e) => col.pick((e.currentTarget as HTMLInputElement).value)} aria-label={M.picker} />
+      <input
+        class="sv-color__field"
+        type="text"
+        bind:value={col.hexDraft}
+        spellcheck="false"
+        aria-label={M.hex}
+        onblur={col.commitHex}
+        onkeydown={(e) => { if (e.key === 'Enter') col.commitHex() }}
+      />
+    </div>
+    <div class="sv-color__palette">
+      {#each col.palette as c (c)}
+        <button
+          class="sv-color__chip"
+          class:is-active={col.isActive(c)}
+          style:background={c}
+          {...col.chipProps(c)}
+        ></button>
+      {/each}
+    </div>
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={col.normalized} />{/if}
+
+<style>
+  .sv-color {
+    --_accent: var(--sg-accent, #2563eb);
+    display: inline-flex; align-items: center; gap: 8px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    padding: 0 10px; cursor: pointer; font: inherit;
+  }
+  .sv-color--sm { height: 28px; font-size: 12px; }
+  .sv-color--md { height: 34px; font-size: 13px; }
+  .sv-color--lg { height: 40px; font-size: 15px; }
+  .sv-color.is-disabled { opacity: 0.6; cursor: not-allowed; }
+  .sv-color.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-color.is-invalid:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sg-danger, #dc2626) 22%, transparent); }
+  .sv-color:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+  .sv-color__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.15); flex: none; }
+  .sv-color__hex { font-variant-numeric: tabular-nums; text-transform: lowercase; }
+
+  :global(.sv-color__panel) {
+    z-index: 2147483647; width: 208px; padding: 12px;
+    background: var(--sg-bg, #fff); border: 1px solid var(--sg-border, #e2e8f0);
+    border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(15,23,42,0.35);
+  }
+  :global(.sv-color__top) { display: flex; gap: 8px; margin-bottom: 10px; }
+  :global(.sv-color__native) { width: 36px; height: 34px; padding: 0; border: 1px solid var(--sg-border, #e2e8f0); border-radius: 8px; background: none; cursor: pointer; }
+  :global(.sv-color__field) {
+    flex: 1; min-width: 0; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
+    border: 1px solid var(--sg-input-border, #cbd5e1); border-radius: 8px; background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a); outline: none;
+  }
+  :global(.sv-color__palette) { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
+  :global(.sv-color__chip) { width: 100%; aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
+  :global(.sv-color__chip.is-active) { outline: 2px solid var(--sg-accent, #2563eb); outline-offset: 1px; }
+</style>

package/src/SvComboBox.svelte

@@ -65,7 +65,7 @@
   let inputEl = $state<HTMLInputElement | null>(null)
   let fieldEl = $state<HTMLDivElement | null>(null)
   let panelEl = $state<HTMLDivElement | null>(null)
-  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false, maxHeight: 0, availHeight: 0 })
 
   // Remote data source: fetch options as the query changes (debounced).
   let remoteOptions = $state<ListOption[]>([])
@@ -111,7 +111,11 @@
 
   function updatePos() {
     if (!fieldEl) return
-    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 8 })
+    // estimatedHeight only picks the flip direction (up vs down); the panel's
+    // real max-height comes from availHeight below, so it takes its natural
+    // content height (options + group labels) and scrolls only when it truly
+    // overflows the room - never from an estimate that under-counts a row.
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(combo.filtered.length, 8) * 34 + 12 })
   }
 
   // Position + reposition + outside-click close are render concerns (need the DOM).
@@ -150,7 +154,7 @@
 </SvField>
 
 {#if combo.open}
-  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} {...combo.listboxProps()}>
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody use:popIn={{ up: rect.openUpward }} style:position="fixed" style:top={rect.openUpward ? undefined : `${rect.top}px`} style:bottom={rect.openUpward ? `${rect.bottom}px` : undefined} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} style:max-height={`${Math.min(rect.availHeight, 288)}px`} {...combo.listboxProps()}>
     {#if loading}
       <div class="sv-ddl__empty sv-ddl__loading"><svg class="sv-ddl__spin" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M21 12a9 9 0 1 1-6.2-8.6" /></svg>{M.loading}</div>
     {:else if loadOptions && !searched && combo.query.trim().length < minLength}

package/src/SvCommand.svelte

@@ -16,10 +16,8 @@
    */
   import type { CommandItem } from './ui-app.types'
   import { portalToBody, popIn } from './popover'
-  import { createFocusTrap } from './a11y/focus-trap'
-  import { lockScroll } from './a11y/scroll-lock'
-  import { createDismissableLayer } from './a11y/dismissable'
-  import { fuzzyScore } from './fuzzy'
+  import { createOverlay } from './createOverlay.svelte'
+  import { createCommand } from './createCommand.svelte'
 
   type Props = {
     open?: boolean
@@ -42,72 +40,29 @@
     hotkey = 'mod+k',
   }: Props = $props()
 
-  let query = $state('')
-  let active = $state(0)
   let panelEl = $state<HTMLDivElement | null>(null)
   let inputEl = $state<HTMLInputElement | null>(null)
 
-  const results = $derived.by(() => {
-    const q = query.trim()
-    const list = commands.filter((c) => !c.disabled)
-    if (!q) return list
-    return list
-      .map((c) => ({ c, s: fuzzyScore(`${c.label} ${c.keywords ?? ''} ${c.group ?? ''}`, q) }))
-      .filter((x) => x.s !== null)
-      .sort((a, b) => (b.s as number) - (a.s as number))
-      .map((x) => x.c)
-  })
-
   function close() { open = false; onClose?.() }
-  function run(cmd: CommandItem | undefined) {
-    if (!cmd || cmd.disabled) return
-    close()
-    onRun?.(cmd)
-    cmd.onRun?.()
-  }
-  function move(delta: number) {
-    const n = results.length
-    if (!n) return
-    active = (active + delta + n) % n
-    queueMicrotask(() =>
-      panelEl?.querySelector(`[data-idx="${active}"]`)?.scrollIntoView({ block: 'nearest' }),
-    )
-  }
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key === 'ArrowDown') { e.preventDefault(); move(1) }
-    else if (e.key === 'ArrowUp') { e.preventDefault(); move(-1) }
-    else if (e.key === 'Enter') { e.preventDefault(); run(results[active]) }
-    // Escape + outside-click are owned by the dismissable layer.
-  }
-
-  // Reset active whenever the query changes.
-  $effect(() => { void query; active = 0 })
 
-  // Focus + scroll lock + Escape/outside dismissal while open.
-  $effect(() => {
-    if (!open || !panelEl) return
-    query = ''
-    active = 0
-    const trap = createFocusTrap(panelEl, { initialFocus: () => inputEl })
-    trap.activate()
-    const unlock = lockScroll()
-    const layer = createDismissableLayer({ element: () => panelEl, onDismiss: () => close() })
-    layer.activate()
-    return () => { layer.release(); unlock(); trap.release() }
+  // Fuzzy filter + roving + run + hotkey live in the command core; the overlay
+  // lifecycle (focus-trap into the input, scroll-lock, Escape/outside dismissal)
+  // is the shared dialog core.
+  const cmd = createCommand({
+    commands: () => commands,
+    open: () => open,
+    onRun,
+    onClose: close,
+    onToggleOpen: () => (open = !open),
+    hotkey: () => hotkey,
+    scrollActiveIntoView: (i) =>
+      queueMicrotask(() => panelEl?.querySelector(`[data-idx="${i}"]`)?.scrollIntoView({ block: 'nearest' })),
   })
-
-  // Global toggle hotkey.
-  $effect(() => {
-    if (!hotkey) return
-    const key = hotkey === 'mod+p' ? 'p' : 'k'
-    const onKey = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === key) {
-        e.preventDefault()
-        open = !open
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
+  const overlay = createOverlay({
+    open: () => open,
+    getDialog: () => panelEl,
+    onClose: close,
+    initialFocus: () => inputEl,
   })
 </script>
 
@@ -117,11 +72,8 @@
       bind:this={panelEl}
       class="sv-cmd"
       use:popIn={{}}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Command palette"
-      tabindex="-1"
-      onkeydown={onKeydown}
+      {...overlay.dialogProps({ label: 'Command palette' })}
+      onkeydown={cmd.onKeydown}
     >
       <div class="sv-cmd__search">
         <span class="sv-cmd__searchicon" aria-hidden="true">⌕</span>
@@ -129,29 +81,20 @@
           bind:this={inputEl}
           class="sv-cmd__input"
           type="text"
-          role="combobox"
-          aria-expanded="true"
-          aria-controls="sv-cmd-list"
-          aria-activedescendant={results[active] ? `sv-cmd-opt-${active}` : undefined}
+          aria-label="Command palette search"
           {placeholder}
-          value={query}
-          oninput={(e) => (query = e.currentTarget.value)}
+          {...cmd.inputProps()}
         />
       </div>
-      <ul class="sv-cmd__list" id="sv-cmd-list" role="listbox" aria-label="Commands">
-        {#each results as c, i (c.id)}
-          {#if !query.trim() && c.group && c.group !== results[i - 1]?.group}
+      <ul class="sv-cmd__list" aria-label="Commands" {...cmd.listProps()}>
+        {#each cmd.results as c, i (c.id)}
+          {#if !cmd.query.trim() && c.group && c.group !== cmd.results[i - 1]?.group}
             <li class="sv-cmd__group" role="presentation">{c.group}</li>
           {/if}
           <li
-            id={`sv-cmd-opt-${i}`}
-            data-idx={i}
             class="sv-cmd__opt"
-            class:is-active={i === active}
-            role="option"
-            aria-selected={i === active}
-            onpointermove={() => (active = i)}
-            onclick={() => run(c)}
+            class:is-active={cmd.isActive(i)}
+            {...cmd.optionProps(i)}
           >
             {#if c.icon}<span class="sv-cmd__icon" aria-hidden="true">{c.icon}</span>{/if}
             <span class="sv-cmd__label">{c.label}</span>

package/src/SvCommand.test.ts

@@ -0,0 +1,78 @@
+/**
+ * Component tests for SvCommand, exercising the shared createCommand core: the
+ * global hotkey toggles it open, typing fuzzy-filters the list, arrow+Enter runs
+ * the active command, and clicking a command runs it and closes the palette.
+ */
+import { describe, expect, it, vi, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvCommand, { type CommandItem } from './SvCommand.svelte'
+
+function mountCmd(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvCommand, { target, props: props as any })
+  flushSync()
+  return { destroy: () => { unmount(app); target.remove() } }
+}
+const palette = () => document.querySelector<HTMLElement>('.sv-cmd')
+const options = () => [...document.querySelectorAll<HTMLElement>('.sv-cmd__opt')]
+const input = () => document.querySelector<HTMLInputElement>('.sv-cmd__input')
+afterEach(() => document.querySelectorAll('.sv-cmd__backdrop').forEach((n) => n.remove()))
+
+const commands: CommandItem[] = [
+  { id: 'a', label: 'New File' },
+  { id: 'b', label: 'Open Folder' },
+  { id: 'c', label: 'Save All' },
+]
+
+describe('SvCommand', () => {
+  it('opens on the Cmd/Ctrl+K hotkey', () => {
+    const { destroy } = mountCmd({ open: false, commands })
+    try {
+      expect(palette()).toBeNull()
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: true, bubbles: true }))
+      flushSync()
+      expect(palette()).not.toBeNull()
+      expect(options().length).toBe(3)
+    } finally { destroy() }
+  })
+
+  it('fuzzy-filters as you type', () => {
+    const { destroy } = mountCmd({ open: true, commands })
+    try {
+      const el = input()!
+      el.value = 'save'
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+      flushSync()
+      const labels = options().map((o) => o.textContent)
+      expect(labels.length).toBe(1)
+      expect(labels[0]).toContain('Save All')
+    } finally { destroy() }
+  })
+
+  it('runs the active command on Enter and closes', () => {
+    const onRun = vi.fn()
+    const { destroy } = mountCmd({ open: true, commands, onRun })
+    try {
+      const el = input()!
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+      flushSync()
+      el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+      flushSync()
+      expect(onRun).toHaveBeenCalledTimes(1)
+      expect(onRun.mock.calls[0]![0].id).toBe('b') // ArrowDown moved 0 -> 1
+      expect(palette()).toBeNull()
+    } finally { destroy() }
+  })
+
+  it('runs a command on click and closes', () => {
+    const onRun = vi.fn()
+    const { destroy } = mountCmd({ open: true, commands, onRun })
+    try {
+      options()[2]!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+      flushSync()
+      expect(onRun.mock.calls[0]![0].id).toBe('c')
+      expect(palette()).toBeNull()
+    } finally { destroy() }
+  })
+})