@cosxai/ui 1.0.0-alpha.1 → 1.0.0-alpha.10

package/src/components/Button.tsx

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Check } from 'lucide-react';
-import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 
 import { cn } from '../lib/cn';
 import { Spinner } from './Spinner';
@@ -17,7 +17,9 @@ const button = cva(
     'rounded-md border border-transparent font-sans font-semibold leading-none',
     'transition-[background-color,border-color,color] duration-[120ms] ease-standard',
     'cursor-pointer outline-none focus-visible:shadow-(--focus-ring)',
-    'disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:opacity-40',
+    // Disabled sinks: the well with grey text (3.0 readme and design.cosx.co;
+    // the 3.0 Button source used opacity). "!" so hover never lifts it back.
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
   ],
   {
     variants: {
@@ -45,6 +47,17 @@ const button = cva(
       // Focus ring follows the ground.
       { ground: 'yellow', class: 'focus-visible:shadow-[0_0_0_3px_var(--yellow),0_0_0_5px_var(--ink)]' },
       { ground: 'ink', class: 'focus-visible:shadow-[0_0_0_3px_var(--ink),0_0_0_5px_var(--yellow)]' },
+      // Disabled: filled types sink into the well; outlined and text-only turn grey.
+      {
+        variant: ['primary', 'yellow', 'ink', 'danger'],
+        class:
+          'disabled:border-transparent! disabled:bg-well! disabled:text-fg-secondary! aria-disabled:border-transparent! aria-disabled:bg-well! aria-disabled:text-fg-secondary!',
+      },
+      {
+        variant: ['secondary', 'ghost'],
+        class:
+          'disabled:bg-transparent! disabled:text-fg-secondary! aria-disabled:bg-transparent! aria-disabled:text-fg-secondary! disabled:hover:border-[rgba(17,17,17,.18)] aria-disabled:hover:border-[rgba(17,17,17,.18)]',
+      },
     ],
     defaultVariants: { size: 'md', variant: 'primary', ground: 'auto' },
   },
@@ -63,7 +76,7 @@ export type ButtonProps = Omit<ComponentProps<'button'>, 'disabled'> & {
   shortcut?: string | undefined;
   /** A count at the end (Comments 12). Hidden at zero, 99+ above 99. */
   count?: number | undefined;
-  /** Async state: busy locks the width and shows a spinner; done confirms in place. See useButtonAction. */
+  /** Async state: busy shows a spinner, done confirms in place; the width never changes. See useButtonAction. */
   state?: ButtonState | undefined;
   /** Label shown while state="done". @default the children */
   doneLabel?: ReactNode;
@@ -106,15 +119,6 @@ export function Button({
   ref,
   ...rest
 }: ButtonProps) {
-  const inner = useRef<HTMLButtonElement | null>(null);
-  const [lockedWidth, setLockedWidth] = useState<number | null>(null);
-
-  // Lock the idle width so busy / done never resize the button.
-  useLayoutEffect(() => {
-    if (state === 'idle') setLockedWidth(null);
-    else if (lockedWidth === null && inner.current) setLockedWidth(inner.current.getBoundingClientRect().width);
-  }, [state, lockedWidth]);
-
   const classes = cn(button({ variant, size, ground: ground ?? 'auto' }), className);
   if (asChild) {
     return (
@@ -125,23 +129,22 @@ export function Button({
   }
 
   const busy = state === 'busy';
+  // Busy and done keep the idle content in place (hidden) and draw on top of
+  // it, so the button never resizes — also when it first renders busy.
+  const overlaid = state !== 'idle';
   const blocked = Boolean(disabledReason) && disabled;
   const shownCount = count === undefined ? null : formatCount(count);
-  const setRefs = (el: HTMLButtonElement | null) => {
-    inner.current = el;
-    if (typeof ref === 'function') ref(el);
-    else if (ref) ref.current = el;
-  };
-
   return (
     <button
       type="button"
       {...rest}
-      ref={setRefs}
+      ref={ref}
       className={classes}
-      style={lockedWidth ? { ...style, width: lockedWidth } : style}
+      style={style}
       disabled={disabled && !disabledReason ? true : undefined}
-      aria-disabled={blocked || busy ? true : undefined}
+      // Busy is not disabled (spec: "busy and disabled are different states"):
+      // it keeps its look; aria-busy says so and repeat clicks are ignored below.
+      aria-disabled={blocked ? true : undefined}
       aria-busy={busy || undefined}
       title={blocked ? disabledReason : rest.title}
       onClick={(e) => {
@@ -152,27 +155,32 @@ export function Button({
         onClick?.(e);
       }}
     >
-      {busy ? (
-        <Spinner />
-      ) : state === 'done' ? (
-        <>
-          <Check size={14} strokeWidth={2} aria-hidden />
-          {doneLabel ?? children}
-        </>
-      ) : (
-        <>
-          {iconLeft}
-          {children}
-          {iconRight}
-          {shownCount && <span className="font-medium tabular-nums opacity-70">{shownCount}</span>}
-          {shortcut && (
-            <kbd className="ml-0.5 font-sans text-[12px] font-medium opacity-60" aria-hidden>
-              {shortcut}
-            </kbd>
+      <span className={cn('contents', overlaid && 'invisible')} aria-hidden={overlaid || undefined} data-button-content="">
+        {iconLeft}
+        {children}
+        {iconRight}
+        {shownCount && <span className="font-medium tabular-nums opacity-70">{shownCount}</span>}
+        {shortcut && (
+          <kbd className="ml-0.5 font-sans text-[12px] font-medium opacity-60" aria-hidden>
+            {shortcut}
+          </kbd>
+        )}
+      </span>
+      {overlaid && (
+        <span className="absolute inset-0 flex items-center justify-center gap-2" data-button-overlay="">
+          {busy ? (
+            <>
+              <Spinner />
+              <span className="sr-only">{children}</span>
+            </>
+          ) : (
+            <>
+              <Check size={14} strokeWidth={2} aria-hidden />
+              {doneLabel ?? children}
+            </>
           )}
-        </>
+        </span>
       )}
-      {busy && <span className="sr-only">{children}</span>}
     </button>
   );
 }

package/src/components/ChoiceCards.tsx

@@ -0,0 +1,68 @@
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
+import { useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { definedAria } from './inputs-aria';
+
+export type Choice = {
+  value: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** A glyph at the start (an Icon). */
+  icon?: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+export type ChoiceCardsProps = {
+  choices: Choice[];
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** Cards per row on wide screens; they stack on phones. @default 2 */
+  columns?: 2 | 3 | undefined;
+  'aria-label'?: string | undefined;
+  'aria-labelledby'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * ChoiceCards — a few weighty options, each a card with a title and a
+ * sentence (Add a person · Add an organisation). Radio semantics; the
+ * chosen card sits on the brand colour with an ink edge.
+ */
+export function ChoiceCards({ choices, value, defaultValue, onChange, columns = 2, className, ...aria }: ChoiceCardsProps) {
+  const [own, setOwn] = useState(defaultValue);
+  const current = value ?? own;
+  return (
+    <RadioPrimitive.Root
+      value={current ?? ''}
+      onValueChange={(v) => {
+        if (value === undefined) setOwn(v);
+        onChange?.(v);
+      }}
+      loop
+      {...definedAria(aria)}
+      className={cn('grid grid-cols-1 gap-3', columns === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2', className)}
+    >
+      {choices.map((c) => (
+        <RadioPrimitive.Item
+          key={c.value}
+          value={c.value}
+          disabled={c.disabled}
+          className={cn(
+            'group flex cursor-pointer items-start gap-3 rounded-lg border border-rule bg-page p-4 text-left font-sans text-fg outline-none',
+            'transition-[background-color,border-color] duration-[120ms] ease-standard hover:border-fg focus-visible:shadow-(--focus-ring)',
+            'data-[state=checked]:border-fg data-[state=checked]:bg-hover',
+            'disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-rule',
+          )}
+        >
+          {c.icon && <span className="mt-0.5 flex shrink-0">{c.icon}</span>}
+          <span className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="text-ui font-medium">{c.title}</span>
+            {c.description && <span className="text-meta leading-normal text-fg-secondary">{c.description}</span>}
+          </span>
+        </RadioPrimitive.Item>
+      ))}
+    </RadioPrimitive.Root>
+  );
+}

package/src/components/CodeInput.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { useField } from './Field';
+
+export type CodeInputProps = {
+  /** Number of cells. @default 6 */
+  length?: number | undefined;
+  value?: string | undefined;
+  onChange?: ((code: string) => void) | undefined;
+  /** Called once every cell is filled — typing the last digit or pasting the whole code. */
+  onComplete?: ((code: string) => void) | undefined;
+  /** Digits only (default) or letters and digits. */
+  mode?: 'numeric' | 'alphanumeric' | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Seconds until the code can be sent again; the countdown runs here. */
+  resendIn?: number | undefined;
+  onResend?: (() => void) | undefined;
+  /** @default (s) => `Resend in ${s} s` */
+  formatCountdown?: ((seconds: number) => ReactNode) | undefined;
+  /** @default "Send a new code" */
+  resendLabel?: string | undefined;
+  /** Name of the group for screen readers when there is no Field label. @default "Verification code" */
+  'aria-label'?: string | undefined;
+  className?: string | undefined;
+};
+
+/**
+ * CodeInput — one cell per character of a one-time code. Typing moves on,
+ * Backspace moves back, arrows move; pasting the whole code fills every
+ * cell and completes. The first cell carries autocomplete=one-time-code
+ * so phones offer the code from the message.
+ */
+export function CodeInput({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  mode = 'numeric',
+  invalid,
+  disabled,
+  resendIn,
+  onResend,
+  formatCountdown = (s) => `Resend in ${s} s`,
+  resendLabel = 'Send a new code',
+  'aria-label': ariaLabel = 'Verification code',
+  className,
+}: CodeInputProps) {
+  const field = useField();
+  const [own, setOwn] = useState('');
+  const code = (value ?? own).slice(0, length);
+  const cells = useRef<Array<HTMLInputElement | null>>([]);
+  const allowed = mode === 'numeric' ? /\d/ : /[a-z0-9]/i;
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+
+  const [left, setLeft] = useState(resendIn ?? 0);
+  useEffect(() => setLeft(resendIn ?? 0), [resendIn]);
+  useEffect(() => {
+    if (left <= 0) return;
+    const t = setTimeout(() => setLeft((s) => s - 1), 1000);
+    return () => clearTimeout(t);
+  }, [left]);
+
+  const set = (next: string) => {
+    const clean = next.slice(0, length);
+    if (value === undefined) setOwn(clean);
+    onChange?.(clean);
+    if (clean.length === length && !clean.includes(' ')) onComplete?.(clean);
+  };
+  const focus = (i: number) => cells.current[Math.max(0, Math.min(length - 1, i))]?.focus();
+  const chars = Array.from({ length }, (_, i) => code[i] ?? '');
+
+  const put = (i: number, raw: string) => {
+    const typed = [...raw].filter((c) => allowed.test(c)).map((c) => c.toUpperCase());
+    if (!typed.length) return;
+    const next = [...chars];
+    typed.forEach((c, k) => {
+      if (i + k < length) next[i + k] = c;
+    });
+    // Empty cells are a space inside; the value has no trailing spaces.
+    set(next.map((c) => c || ' ').join('').trimEnd());
+    focus(i + typed.length);
+  };
+
+  return (
+    <div className={cn('flex flex-col gap-2 font-sans', className)}>
+      <div role="group" aria-label={field?.labelId ? undefined : ariaLabel} aria-labelledby={field?.labelId} className="flex gap-2">
+        {chars.map((c, i) => (
+          <input
+            key={i}
+            ref={(el) => {
+              cells.current[i] = el;
+            }}
+            id={i === 0 ? field?.id : undefined}
+            value={c.trim()}
+            inputMode={mode === 'numeric' ? 'numeric' : 'text'}
+            autoComplete={i === 0 ? 'one-time-code' : 'off'}
+            maxLength={length}
+            disabled={off}
+            aria-label={`${i + 1} of ${length}`}
+            aria-invalid={bad || undefined}
+            aria-describedby={field?.describedBy}
+            onFocus={(e) => e.currentTarget.select()}
+            onChange={(e) => put(i, e.target.value)}
+            onPaste={(e) => {
+              e.preventDefault();
+              put(0, e.clipboardData.getData('text'));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Backspace') {
+                e.preventDefault();
+                const next = [...chars];
+                const at = c.trim() ? i : i - 1;
+                if (at < 0) return;
+                next[at] = ' ';
+                set(next.map((ch) => ch || ' ').join('').trimEnd());
+                focus(at);
+              } else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                focus(i - 1);
+              } else if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                focus(i + 1);
+              }
+            }}
+            className={cn(
+              'h-[52px] w-11 rounded-md border bg-sunk text-center font-sans text-[20px] font-medium text-fg tabular-nums outline-none',
+              'transition-[border-color] duration-[120ms] ease-standard focus:border-fg focus:shadow-(--focus-ring)',
+              bad ? 'border-transparent bg-error-wash focus:border-error' : 'border-transparent',
+              off && 'cursor-not-allowed bg-well text-fg-secondary',
+            )}
+          />
+        ))}
+      </div>
+      {resendIn !== undefined && (
+        <div className="text-meta text-fg-secondary" aria-live="polite">
+          {left > 0 ? (
+            formatCountdown(left)
+          ) : (
+            <button type="button" onClick={onResend} className="cursor-pointer rounded-xs font-medium text-fg underline underline-offset-3 outline-none focus-visible:shadow-(--focus-ring)">
+              {resendLabel}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/CommandPalette.tsx

@@ -0,0 +1,228 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Command } from 'cmdk';
+import { Search } from 'lucide-react';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Spinner } from './Spinner';
+
+export type CommandItem = {
+  id: string;
+  title: ReactNode;
+  /** Where it lives: "Series A / Legal". */
+  subtitle?: ReactNode;
+  /** Right-aligned: a page ("p. 14"), a shortcut. */
+  meta?: ReactNode;
+  /** A line of matched text (full-text results). */
+  excerpt?: ReactNode;
+  icon?: ReactNode;
+  onSelect: () => void;
+};
+
+export type CommandSource = {
+  id: string;
+  /** Section heading: "Documents · titles", "Full text". */
+  label: string;
+  /** Results for the query. Aborted when the query changes. Throwing marks the source failed (it stops counting as pending). */
+  search: (query: string, signal: AbortSignal) => Promise<CommandItem[]>;
+  /** Characters needed before it runs. @default 1 */
+  minQuery?: number | undefined;
+};
+
+export type CommandPaletteLabels = {
+  /** @default "Search or run an action" */
+  placeholder?: string;
+  /** @default (q) => `Nothing matches “${q}”.` */
+  empty?: (query: string) => ReactNode;
+  /** Heading hint while a slower source has not returned. @default "arriving" */
+  arriving?: string;
+  /** @default "Actions" */
+  actions?: string;
+  /** Accessible name of the palette. @default "Command palette" */
+  title?: string;
+};
+
+export type CommandPaletteProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Searched in parallel; each section appears as its source returns, in this order. */
+  sources: CommandSource[];
+  /** Actions for the query ("Ask the Agent about “cap table”"), always listed after the results. */
+  actions?: ((query: string) => CommandItem[]) | undefined;
+  labels?: CommandPaletteLabels | undefined;
+  /** ms after typing before sources run. @default 150 */
+  debounce?: number | undefined;
+};
+
+const GROUP = '[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2.5 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-secondary';
+
+type SourceState = { status: 'pending' | 'done' | 'failed'; items: CommandItem[] };
+
+/**
+ * CommandPalette — ⌘K. Fast sources (titles) show at once, slower ones
+ * (full text with page and excerpt) fill in below; a spinner shows while
+ * any is out, and "nothing matches" only once every source has returned.
+ * Arrows, Enter, Esc (cmdk + Radix Dialog). Pair with useCommandPaletteHotkey.
+ */
+export function CommandPalette({ open, onOpenChange, sources, actions, labels = {}, debounce = 150 }: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Record<string, SourceState>>({});
+  // The highlighted row. Follows the first result as sections arrive,
+  // until the person moves with the arrows.
+  const [selected, setSelected] = useState('');
+  const moved = useRef(false);
+  const sourcesRef = useRef(sources);
+  sourcesRef.current = sources;
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+      setResults({});
+    }
+  }, [open]);
+  useEffect(() => {
+    moved.current = false;
+  }, [query]);
+
+  useEffect(() => {
+    const q = query.trim();
+    const active = sourcesRef.current.filter((s) => q.length >= (s.minQuery ?? 1));
+    if (!q || active.length === 0) {
+      setResults({});
+      return;
+    }
+    setResults(Object.fromEntries(active.map((s) => [s.id, { status: 'pending', items: [] } satisfies SourceState])));
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      for (const s of active) {
+        s.search(q, controller.signal).then(
+          (items) => !controller.signal.aborted && setResults((r) => ({ ...r, [s.id]: { status: 'done', items } })),
+          () => !controller.signal.aborted && setResults((r) => ({ ...r, [s.id]: { status: 'failed', items: [] } })),
+        );
+      }
+    }, debounce);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query, debounce]);
+
+  const q = query.trim();
+  const states = Object.values(results);
+  const pending = states.some((s) => s.status === 'pending');
+  const found = states.some((s) => s.items.length > 0);
+  const actionItems = q && actions ? actions(q) : [];
+  const order = [
+    ...sourcesRef.current.flatMap((s) => (results[s.id]?.items ?? []).map((i) => `${s.id}:${i.id}`)),
+    ...actionItems.map((i) => `action:${i.id}`),
+  ];
+  const first = order[0] ?? '';
+  useEffect(() => {
+    if (!moved.current) setSelected(first);
+  }, [first]);
+  const run = (item: CommandItem) => {
+    onOpenChange(false);
+    item.onSelect();
+  };
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-scrim" />
+        <DialogPrimitive.Content
+          aria-describedby={undefined}
+          className="fixed top-[12vh] left-1/2 z-50 w-[calc(100%-32px)] max-w-[640px] -translate-x-1/2 overflow-hidden rounded-lg border border-rule bg-page font-sans text-fg outline-none"
+        >
+          <DialogPrimitive.Title className="sr-only">{labels.title ?? 'Command palette'}</DialogPrimitive.Title>
+          <Command
+            shouldFilter={false}
+            loop
+            label={labels.title ?? 'Command palette'}
+            value={selected}
+            onValueChange={setSelected}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') moved.current = true;
+            }}
+          >
+            <div className="flex items-center gap-2.5 border-b border-rule px-4">
+              <Search size={16} aria-hidden className="shrink-0 text-fg-secondary" />
+              <Command.Input
+                value={query}
+                onValueChange={setQuery}
+                placeholder={labels.placeholder ?? 'Search or run an action'}
+                className="h-12 min-w-0 flex-1 border-0 bg-transparent font-sans text-[15px] text-fg outline-none placeholder:text-fg-secondary"
+              />
+              {pending && <Spinner label="Searching" className="text-fg-secondary" />}
+            </div>
+            <Command.List className="max-h-[min(420px,60vh)] overflow-y-auto p-1.5">
+              {sourcesRef.current.map((s) => {
+                const st = results[s.id];
+                if (!st || (st.status !== 'pending' && st.items.length === 0)) return null;
+                return (
+                  <Command.Group
+                    key={s.id}
+                    className={GROUP}
+                    heading={
+                      <span className="flex items-center gap-1.5">
+                        {s.label}
+                        {st.status === 'pending' && <span className="font-normal">· {labels.arriving ?? 'arriving'}</span>}
+                      </span>
+                    }
+                  >
+                    {st.items.map((item) => (
+                      <PaletteItem key={`${s.id}:${item.id}`} value={`${s.id}:${item.id}`} item={item} onRun={run} />
+                    ))}
+                  </Command.Group>
+                );
+              })}
+              {q && !pending && !found && (
+                <div role="status" className="px-3 py-3 text-ui text-fg-secondary">
+                  {labels.empty ? labels.empty(q) : `Nothing matches “${q}”.`}
+                </div>
+              )}
+              {actionItems.length > 0 && (
+                <Command.Group className={GROUP} heading={labels.actions ?? 'Actions'}>
+                  {actionItems.map((item) => (
+                    <PaletteItem key={`action:${item.id}`} value={`action:${item.id}`} item={item} onRun={run} />
+                  ))}
+                </Command.Group>
+              )}
+            </Command.List>
+          </Command>
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  );
+}
+
+function PaletteItem({ item, value, onRun }: { item: CommandItem; value: string; onRun: (item: CommandItem) => void }) {
+  return (
+    <Command.Item
+      value={value}
+      onSelect={() => onRun(item)}
+      className={cn('flex cursor-pointer items-start gap-2.5 rounded-md px-3 py-2 outline-none', 'data-[selected=true]:bg-hover')}
+    >
+      {item.icon && <span className="mt-0.5 grid size-4 shrink-0 place-items-center text-fg-secondary">{item.icon}</span>}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="truncate text-ui">{item.title}</span>
+        {item.subtitle && <span className="truncate text-meta text-fg-secondary">{item.subtitle}</span>}
+        {item.excerpt && <span className="line-clamp-2 text-small text-fg-secondary">{item.excerpt}</span>}
+      </span>
+      {item.meta && <span className="mt-0.5 shrink-0 text-meta text-fg-secondary tabular-nums">{item.meta}</span>}
+    </Command.Item>
+  );
+}
+
+/** ⌘K / Ctrl+K toggles the palette (also from inside inputs). */
+export function useCommandPaletteHotkey(setOpen: (update: (open: boolean) => boolean) => void) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setOpen((o) => !o);
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [setOpen]);
+}