@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/color-picker/color.ts

@@ -0,0 +1,124 @@
+/**
+ * Colour conversions for the picker: hex, rgb() and oklch() in and out, HSV
+ * for the picking surface, and WCAG contrast. sRGB throughout; OKLCH through
+ * OKLab, the space the Mlola engine derives its palettes in.
+ */
+export interface RGBA {
+  /** 0 to 255. */
+  r: number;
+  g: number;
+  b: number;
+  /** 0 to 1. */
+  a: number;
+}
+
+export interface HSVA {
+  /** 0 to 360. */
+  h: number;
+  /** 0 to 1. */
+  s: number;
+  v: number;
+  a: number;
+}
+
+export type ColorFormat = "hex" | "rgb" | "oklch";
+
+const clamp = (value: number, low = 0, high = 1) => Math.min(high, Math.max(low, value));
+const round = (value: number, digits = 0) => Number(value.toFixed(digits));
+
+const toLinear = (channel: number) => (channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
+const toGamma = (channel: number) => (channel <= 0.0031308 ? 12.92 * channel : 1.055 * channel ** (1 / 2.4) - 0.055);
+
+export function rgbToOklch({ r, g, b }: RGBA) {
+  const [lr, lg, lb] = [r, g, b].map((channel) => toLinear(channel / 255));
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const C = Math.sqrt(A * A + B * B);
+  const h = C < 0.0001 ? 0 : ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360;
+  return { l: L, c: C, h };
+}
+
+export function oklchToRgb(L: number, C: number, h: number, a = 1): RGBA {
+  const radians = (h * Math.PI) / 180;
+  const A = C * Math.cos(radians);
+  const B = C * Math.sin(radians);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  const linear = [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s];
+  const [r, g, b] = linear.map((channel) => Math.round(clamp(toGamma(clamp(channel))) * 255));
+  return { r, g, b, a };
+}
+
+/** Read #rgb, #rgba, #rrggbb, #rrggbbaa, rgb()/rgba() or oklch(); null for anything else. */
+export function parseColor(text: string): RGBA | null {
+  const value = text.trim().toLowerCase();
+  const hex = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(value);
+  if (hex) {
+    let digits = hex[1];
+    if (digits.length <= 4) digits = [...digits].map((digit) => digit + digit).join("");
+    const channel = (index: number) => parseInt(digits.slice(index * 2, index * 2 + 2), 16);
+    return { r: channel(0), g: channel(1), b: channel(2), a: digits.length === 8 ? round(channel(3) / 255, 3) : 1 };
+  }
+  const rgb = /^rgba?\(\s*([\d.]+%?)[\s,]+([\d.]+%?)[\s,]+([\d.]+%?)(?:[\s,/]+([\d.]+%?))?\s*\)$/.exec(value);
+  if (rgb) {
+    const channel = (part: string) => clamp(part.endsWith("%") ? (parseFloat(part) / 100) * 255 : parseFloat(part), 0, 255);
+    const alpha = rgb[4] === undefined ? 1 : rgb[4].endsWith("%") ? parseFloat(rgb[4]) / 100 : parseFloat(rgb[4]);
+    return { r: Math.round(channel(rgb[1])), g: Math.round(channel(rgb[2])), b: Math.round(channel(rgb[3])), a: clamp(alpha) };
+  }
+  const oklch = /^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+([\d.]+)(?:deg)?(?:\s*\/\s*([\d.]+%?))?\s*\)$/.exec(value);
+  if (oklch) {
+    const lightness = oklch[1].endsWith("%") ? parseFloat(oklch[1]) / 100 : parseFloat(oklch[1]);
+    const alpha = oklch[4] === undefined ? 1 : oklch[4].endsWith("%") ? parseFloat(oklch[4]) / 100 : parseFloat(oklch[4]);
+    return oklchToRgb(lightness, parseFloat(oklch[2]), parseFloat(oklch[3]), clamp(alpha));
+  }
+  return null;
+}
+
+export function rgbToHsv({ r, g, b, a }: RGBA): HSVA {
+  const [red, green, blue] = [r / 255, g / 255, b / 255];
+  const max = Math.max(red, green, blue);
+  const delta = max - Math.min(red, green, blue);
+  let h = 0;
+  if (delta) {
+    if (max === red) h = ((green - blue) / delta) % 6;
+    else if (max === green) h = (blue - red) / delta + 2;
+    else h = (red - green) / delta + 4;
+  }
+  return { h: (h * 60 + 360) % 360, s: max ? delta / max : 0, v: max, a };
+}
+
+export function hsvToRgb({ h, s, v, a }: HSVA): RGBA {
+  const chroma = v * s;
+  const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1));
+  const match = v - chroma;
+  const [r, g, b] = h < 60 ? [chroma, x, 0] : h < 120 ? [x, chroma, 0] : h < 180 ? [0, chroma, x] : h < 240 ? [0, x, chroma] : h < 300 ? [x, 0, chroma] : [chroma, 0, x];
+  return { r: Math.round((r + match) * 255), g: Math.round((g + match) * 255), b: Math.round((b + match) * 255), a };
+}
+
+const hex2 = (value: number) => Math.round(value).toString(16).padStart(2, "0");
+
+export function formatColor(color: RGBA, format: ColorFormat = "hex"): string {
+  const alpha = color.a < 1;
+  if (format === "rgb") return alpha ? `rgb(${color.r} ${color.g} ${color.b} / ${round(color.a, 2)})` : `rgb(${color.r} ${color.g} ${color.b})`;
+  if (format === "oklch") {
+    const { l, c, h } = rgbToOklch(color);
+    return `oklch(${round(l * 100, 1)}% ${round(c, 3)} ${round(h, 1)}${alpha ? ` / ${round(color.a, 2)}` : ""})`;
+  }
+  return `#${hex2(color.r)}${hex2(color.g)}${hex2(color.b)}${alpha ? hex2(color.a * 255) : ""}`;
+}
+
+/** WCAG 2 relative luminance and contrast ratio, 1 to 21. */
+export function luminance({ r, g, b }: RGBA) {
+  const [lr, lg, lb] = [r, g, b].map((channel) => toLinear(channel / 255));
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+
+export function contrastRatio(first: RGBA, second: RGBA) {
+  const [light, dark] = [luminance(first), luminance(second)].sort((a, b) => b - a);
+  return (light + 0.05) / (dark + 0.05);
+}

package/snapshot/source/packages/components/combobox/combobox.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import * as React from "react";
+import { IconCheck, IconChevronDown, IconPlus, IconX } from "@mlola-ui/icons";
+import { Field, fieldDescription } from "../input/input";
+import { cx } from "../_internal/react";
+import { matchCommand } from "../_internal/match";
+import { revealIn } from "../_internal/scroll";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  /** An icon, avatar or swatch before the label. */
+  leading?: React.ReactNode;
+  /** More words that find this option. */
+  keywords?: string[];
+  group?: string;
+  disabled?: boolean;
+}
+
+/** Rank options against what was typed: prefix, word start, substring, then letters in order. */
+export function filterOptions(options: ComboboxOption[], query: string) {
+  if (!query.trim()) return options;
+  return options
+    .map((option) => ({ option, match: matchCommand(option.label, query, option.keywords) }))
+    .filter((entry) => entry.match)
+    .sort((a, b) => b.match!.score - a.match!.score)
+    .map((entry) => entry.option);
+}
+
+export interface ComboboxListProps {
+  id: string;
+  options: ComboboxOption[];
+  /** Index of the highlighted row. */
+  active: number;
+  onActiveChange: (index: number) => void;
+  onPick: (option: ComboboxOption) => void;
+  isSelected?: (option: ComboboxOption) => boolean;
+  /** A last row that creates what was typed. */
+  create?: { label: string; onCreate: () => void } | null;
+  empty?: React.ReactNode;
+  side: "top" | "bottom";
+  label?: string;
+  grouped?: boolean;
+}
+
+/**
+ * The popup list a combobox or tag input shows under its field: grouped,
+ * highlighted by pointer or arrows, never taking focus from the input.
+ */
+export function ComboboxList({ id, options, active, onActiveChange, onPick, isSelected, create, empty, side, label, grouped = true }: ComboboxListProps) {
+  const list = React.useRef<HTMLUListElement>(null);
+  React.useEffect(() => {
+    revealIn(list.current, list.current?.querySelector<HTMLElement>("[data-highlighted]") ?? null);
+  }, [active, options]);
+  let lastGroup: string | undefined;
+  return (
+    <div className="ml-combobox-popover" data-side={side} onMouseDown={(event) => event.preventDefault()}>
+      <ul ref={list} id={id} role="listbox" aria-label={label} className="ml-combobox-list">
+        {options.map((option, index) => {
+          const heading = grouped && option.group && option.group !== lastGroup ? option.group : null;
+          lastGroup = option.group;
+          const selected = isSelected?.(option) ?? false;
+          return (
+            <React.Fragment key={option.value}>
+              {heading ? (
+                <li role="presentation" className="ml-combobox-group">
+                  {heading}
+                </li>
+              ) : null}
+              <li
+                id={`${id}-${index}`}
+                role="option"
+                aria-selected={selected}
+                aria-disabled={option.disabled || undefined}
+                className="ml-combobox-option"
+                data-highlighted={index === active || undefined}
+                onPointerMove={() => index !== active && onActiveChange(index)}
+                onClick={() => !option.disabled && onPick(option)}
+              >
+                {option.leading ? (
+                  <span className="ml-combobox-leading" aria-hidden="true">
+                    {option.leading}
+                  </span>
+                ) : null}
+                <span className="ml-combobox-text">
+                  <span className="ml-combobox-label">{option.label}</span>
+                  {option.description ? <span className="ml-combobox-description">{option.description}</span> : null}
+                </span>
+                {selected ? <IconCheck aria-hidden="true" size="0.95em" className="ml-combobox-check" /> : null}
+              </li>
+            </React.Fragment>
+          );
+        })}
+        {create ? (
+          <li
+            id={`${id}-${options.length}`}
+            role="option"
+            aria-selected={false}
+            className="ml-combobox-option"
+            data-create=""
+            data-highlighted={active === options.length || undefined}
+            onPointerMove={() => active !== options.length && onActiveChange(options.length)}
+            onClick={create.onCreate}
+          >
+            <span className="ml-combobox-leading" aria-hidden="true">
+              <IconPlus size="1em" />
+            </span>
+            <span className="ml-combobox-label">{create.label}</span>
+          </li>
+        ) : null}
+        {!options.length && !create ? <li className="ml-combobox-empty">{empty ?? "No matches"}</li> : null}
+      </ul>
+    </div>
+  );
+}
+
+/** Open the list above the field when there is not enough room below it. */
+export function sideFor(element: HTMLElement | null, room = 280): "top" | "bottom" {
+  if (!element) return "bottom";
+  const rect = element.getBoundingClientRect();
+  return window.innerHeight - rect.bottom < room && rect.top > window.innerHeight - rect.bottom ? "top" : "bottom";
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: string;
+  /** Offer to create what was typed when nothing matches it exactly. */
+  onCreate?: (text: string) => void;
+  /** Shown when nothing matches. */
+  emptyMessage?: React.ReactNode;
+  clearable?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  className?: string;
+}
+
+/**
+ * A text field that filters a list as you type: the searchable choice for
+ * long lists such as countries, people or repositories. Arrows move, Enter
+ * chooses, Escape restores; with `onCreate`, a missing option can be added.
+ */
+export function Combobox({
+  options,
+  value,
+  defaultValue = null,
+  onValueChange,
+  label,
+  hint,
+  error,
+  placeholder = "Search…",
+  onCreate,
+  emptyMessage,
+  clearable = true,
+  disabled,
+  required,
+  id,
+  className,
+}: ComboboxProps) {
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const listId = `${fieldId}-list`;
+  const [inner, setInner] = React.useState<string | null>(defaultValue);
+  const current = value !== undefined ? value : inner;
+  const chosen = options.find((option) => option.value === current) ?? null;
+  const [query, setQuery] = React.useState(chosen?.label ?? "");
+  const [open, setOpen] = React.useState(false);
+  const [active, setActive] = React.useState(0);
+  const [side, setSide] = React.useState<"top" | "bottom">("bottom");
+  const control = React.useRef<HTMLDivElement>(null);
+  const typed = React.useRef(false);
+
+  // Show the chosen label whenever the value changes from outside or the list closes.
+  React.useEffect(() => {
+    if (!open) setQuery(chosen?.label ?? "");
+  }, [chosen?.label, open]);
+
+  const shown = typed.current ? filterOptions(options, query) : options;
+  const exact = options.some((option) => option.label.toLowerCase() === query.trim().toLowerCase());
+  const create = onCreate && query.trim() && !exact ? { label: `Create “${query.trim()}”`, onCreate: () => pickCreate() } : null;
+  const count = shown.length + (create ? 1 : 0);
+
+  const commit = (next: string | null) => {
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  const openList = () => {
+    if (disabled) return;
+    setSide(sideFor(control.current));
+    setOpen(true);
+    const index = shown.findIndex((option) => option.value === current);
+    setActive(Math.max(0, index));
+  };
+
+  const close = () => {
+    setOpen(false);
+    typed.current = false;
+  };
+
+  const pick = (option: ComboboxOption) => {
+    commit(option.value);
+    setQuery(option.label);
+    close();
+  };
+
+  function pickCreate() {
+    const text = query.trim();
+    if (!text) return;
+    onCreate?.(text);
+    close();
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) return openList();
+      if (!count) return;
+      setActive((index) => (index + (event.key === "ArrowDown" ? 1 : -1) + count) % count);
+    } else if (event.key === "Enter" && open) {
+      event.preventDefault();
+      if (active < shown.length) {
+        const option = shown[active];
+        if (option && !option.disabled) pick(option);
+      } else if (create) pickCreate();
+    } else if (event.key === "Escape") {
+      if (open) {
+        event.preventDefault();
+        setQuery(chosen?.label ?? "");
+        close();
+      } else if (clearable && current) {
+        event.preventDefault();
+        commit(null);
+        setQuery("");
+      }
+    } else if (event.key === "Tab" && open) close();
+  };
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-combobox", className)}>
+      <div ref={control} className="ml-combobox-control" data-open={open || undefined}>
+        {chosen?.leading && !typed.current ? (
+          <span className="ml-combobox-value-leading" aria-hidden="true">
+            {chosen.leading}
+          </span>
+        ) : null}
+        <input
+          id={fieldId}
+          className="ml-input ml-combobox-input"
+          data-leading={chosen?.leading && !typed.current ? "" : undefined}
+          data-clearable={clearable && current && !disabled ? "" : undefined}
+          role="combobox"
+          aria-expanded={open}
+          aria-controls={listId}
+          aria-autocomplete="list"
+          aria-activedescendant={open && count ? `${listId}-${active}` : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={fieldDescription(fieldId, { hint, error })}
+          value={query}
+          placeholder={placeholder}
+          disabled={disabled}
+          autoComplete="off"
+          spellCheck={false}
+          onChange={(event) => {
+            typed.current = true;
+            setQuery(event.target.value);
+            setActive(0);
+            if (!open) openList();
+          }}
+          onFocus={(event) => event.currentTarget.select()}
+          onClick={() => (open ? undefined : openList())}
+          onKeyDown={onKeyDown}
+          onBlur={() => {
+            setQuery(chosen?.label ?? "");
+            close();
+          }}
+        />
+        {clearable && current && !disabled ? (
+          <button
+            type="button"
+            className="ml-combobox-clear"
+            aria-label="Clear"
+            tabIndex={-1}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              commit(null);
+              setQuery("");
+            }}
+          >
+            <IconX aria-hidden="true" size="0.9em" />
+          </button>
+        ) : null}
+        <IconChevronDown aria-hidden="true" size="1.1em" className="ml-combobox-chevron" />
+        {open ? (
+          <ComboboxList
+            id={listId}
+            options={shown}
+            active={active}
+            onActiveChange={setActive}
+            onPick={pick}
+            isSelected={(option) => option.value === current}
+            create={create}
+            empty={emptyMessage}
+            side={side}
+            label={typeof label === "string" ? label : undefined}
+            grouped={!typed.current}
+          />
+        ) : null}
+      </div>
+    </Field>
+  );
+}

package/snapshot/source/packages/components/command-menu/command-menu.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+import * as React from "react";
+import { IconSearch } from "@mlola-ui/icons";
+import { useControllableState } from "../_internal/react";
+import { revealIn } from "../_internal/scroll";
+import { Kbd, Shortcut } from "../kbd/kbd";
+import { Modal } from "../modal/modal";
+import { matchCommand } from "../_internal/match";
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  /** e.g. "mod+shift+p", shown on the row. */
+  shortcut?: string;
+  /** Extra words that should find this command. */
+  keywords?: string[];
+  disabled?: boolean;
+  onSelect: () => void;
+}
+
+export interface CommandGroup {
+  heading: string;
+  items: CommandItem[];
+}
+
+export interface CommandMenuProps {
+  groups: CommandGroup[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Toggles the menu from anywhere. `null` disables it. */
+  hotkey?: string | null;
+  placeholder?: string;
+  label?: string;
+}
+
+function matchesHotkey(event: KeyboardEvent, hotkey: string) {
+  const parts = hotkey.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  const wantsMod = parts.includes("mod");
+  const mod = event.metaKey || event.ctrlKey;
+  return event.key.toLowerCase() === key && mod === wantsMod && event.shiftKey === parts.includes("shift") && event.altKey === parts.includes("alt");
+}
+
+function Highlight({ text, positions }: { text: string; positions: number[] }) {
+  if (!positions.length) return <>{text}</>;
+  const marked = new Set(positions);
+  return (
+    <>
+      {[...text].map((char, index) =>
+        marked.has(index) ? (
+          <mark key={index} className="ml-command-match">
+            {char}
+          </mark>
+        ) : (
+          <React.Fragment key={index}>{char}</React.Fragment>
+        ),
+      )}
+    </>
+  );
+}
+
+/**
+ * The ⌘K palette: every action a product offers, one keystroke away. Type to
+ * rank commands (prefix, word start, substring, then letters in order), move
+ * with the arrows, run with Enter.
+ */
+export function CommandMenu({ groups, open, defaultOpen = false, onOpenChange, hotkey = "mod+k", placeholder = "Type a command or search…", label = "Command menu" }: CommandMenuProps) {
+  const [isOpen, setOpen] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(0);
+  const listId = React.useId();
+
+  React.useEffect(() => {
+    if (!hotkey) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (matchesHotkey(event, hotkey)) {
+        event.preventDefault();
+        setOpen(!isOpen);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [hotkey, isOpen, setOpen]);
+
+  const results = React.useMemo(() => {
+    return groups
+      .map((group) => ({
+        heading: group.heading,
+        items: group.items
+          .map((item) => ({ item, match: matchCommand(item.label, query, item.keywords) }))
+          .filter((entry): entry is { item: CommandItem; match: NonNullable<ReturnType<typeof matchCommand>> } => entry.match !== null)
+          .sort((left, right) => (query.trim() ? right.match.score - left.match.score : 0)),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [groups, query]);
+  const flat = results.flatMap((group) => group.items);
+  const current = Math.min(active, Math.max(0, flat.length - 1));
+
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+    setActive(0);
+  };
+
+  const run = (item: CommandItem | undefined) => {
+    if (!item || item.disabled) return;
+    close();
+    item.onSelect();
+  };
+
+  let index = -1;
+  return (
+    <Modal open={isOpen} onClose={close} label={label} size="md" className="ml-command">
+      <div className="ml-command-search">
+        <IconSearch aria-hidden="true" size="1.1em" />
+        <input
+          className="ml-command-input"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls={listId}
+          aria-activedescendant={flat.length ? `${listId}-${current}` : undefined}
+          aria-autocomplete="list"
+          aria-label={label}
+          placeholder={placeholder}
+          value={query}
+          autoFocus
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setActive(0);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown") setActive((current + 1) % Math.max(1, flat.length));
+            else if (event.key === "ArrowUp") setActive((current - 1 + flat.length) % Math.max(1, flat.length));
+            else if (event.key === "Home") setActive(0);
+            else if (event.key === "End") setActive(Math.max(0, flat.length - 1));
+            else if (event.key === "Enter") run(flat[current]?.item);
+            else return;
+            event.preventDefault();
+          }}
+        />
+      </div>
+      <div id={listId} role="listbox" aria-label="Commands" className="ml-command-list">
+        {results.map((group) => (
+          <div key={group.heading} role="group" aria-label={group.heading} className="ml-command-group">
+            <p className="ml-command-heading" aria-hidden="true">
+              {group.heading}
+            </p>
+            {group.items.map(({ item, match }) => {
+              index += 1;
+              const position = index;
+              return (
+                <div
+                  key={item.id}
+                  id={`${listId}-${position}`}
+                  role="option"
+                  aria-selected={position === current}
+                  aria-disabled={item.disabled || undefined}
+                  className="ml-command-item"
+                  onPointerMove={() => setActive(position)}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => run(item)}
+                  ref={(node) => {
+                    if (position === current && node) revealIn(node.closest<HTMLElement>(".ml-command-list"), node);
+                  }}
+                >
+                  {item.icon ? <span className="ml-command-icon" aria-hidden="true">{item.icon}</span> : null}
+                  <span className="ml-command-text">
+                    <span className="ml-command-label">
+                      <Highlight text={item.label} positions={match.positions} />
+                    </span>
+                    {item.description ? <span className="ml-command-description">{item.description}</span> : null}
+                  </span>
+                  {item.shortcut ? <Shortcut keys={item.shortcut} /> : null}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+        {flat.length === 0 ? <p className="ml-command-empty">No commands match “{query.trim()}”.</p> : null}
+      </div>
+      <footer className="ml-command-footer" aria-hidden="true">
+        <span>
+          <Kbd>↑</Kbd>
+          <Kbd>↓</Kbd> to move
+        </span>
+        <span>
+          <Kbd>↵</Kbd> to run
+        </span>
+        <span>
+          <Kbd>esc</Kbd> to close
+        </span>
+      </footer>
+    </Modal>
+  );
+}