@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/combobox-core.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -9,6 +10,7 @@ import { useMediaQuery } from "../hooks/use-media-query.js";
 import { PHONE_QUERY } from "./ui.js";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
 import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+import { DEFAULT_COMBOBOX_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 function useComboboxCore({
   options,
   loadOptions,
@@ -27,10 +29,15 @@ function useComboboxCore({
   loadRef.current = loadOptions;
   const reqId = useRef(0);
   const close = () => setOpen(false);
+  const closeToTrigger = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
-  useOutsideClick([triggerRef, panelRef], close, open);
-  useEscapeKey(close, open);
+  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
+  useEscapeKey(closeToTrigger, open);
   useEffect(() => {
     if (!open) return;
     setQuery("");
@@ -87,11 +94,19 @@ function useComboboxCore({
     rect,
     placement,
     cacheRef,
-    resolve
+    resolve,
+    closeToTrigger
   };
 }
+function useActiveOptionScroll(activeId) {
+  useEffect(() => {
+    if (!activeId) return;
+    document.getElementById(activeId)?.scrollIntoView?.({ block: "nearest" });
+  }, [activeId]);
+}
 function ComboboxPanel({
   core,
+  listboxId,
   searchPlaceholder,
   emptyLabel,
   multi,
@@ -101,11 +116,30 @@ function ComboboxPanel({
   onCreate,
   createContent,
   sheetTitle,
-  closeLabel
+  closeLabel,
+  className,
+  style,
+  ...rest
 }) {
-  const { rect, placement, panelRef, inputRef, query, setQuery, results, busy, active, setActive } = core;
+  const {
+    rect,
+    placement,
+    panelRef,
+    inputRef,
+    query,
+    setQuery,
+    results,
+    busy,
+    active,
+    setActive,
+    closeToTrigger
+  } = core;
   const isPhone = useMediaQuery(PHONE_QUERY, false);
   const rowCount = results.length + (showCreate ? 1 : 0);
+  const optionId = (index) => `${listboxId}-option-${index}`;
+  const activeId = active >= 0 && active < rowCount ? optionId(active) : void 0;
+  useActiveOptionScroll(activeId);
+  const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS);
   const onKeyDown = (e) => {
     if (e.key === "ArrowDown") {
       e.preventDefault();
@@ -113,22 +147,39 @@ function ComboboxPanel({
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActive((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(rowCount - 1);
     } else if (e.key === "Enter") {
       e.preventDefault();
       if (active < results.length) onChoose(results[active]);
       else if (showCreate) onCreate();
+    } else if (e.key === "Tab") {
+      e.preventDefault();
+      closeToTrigger();
     }
   };
   if (!core.open || typeof document === "undefined") return null;
   const list = /* @__PURE__ */ jsxs(
     "ul",
     {
+      id: listboxId,
       role: "listbox",
       "aria-multiselectable": multi,
       className: cn("min-h-0 flex-1 overflow-y-auto py-1", isPhone && "flex-none"),
       children: [
-        busy && results.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: "\u2026" }),
-        !busy && results.length === 0 && !showCreate && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-slate-500 dark:text-slate-400", children: emptyLabel }),
+        busy && results.length === 0 && // The ellipsis is the picture; the words are for a reader, who otherwise met
+        // an empty-looking list with a lone "…" in it — or, in most readers, nothing
+        // at all, since punctuation alone is skipped. `relative` so the sr-only text
+        // has a local containing block (see sr-only-containment.test).
+        /* @__PURE__ */ jsxs("li", { className: "relative px-3 py-2 text-sm text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2026" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.loading })
+        ] }),
+        !busy && results.length === 0 && !showCreate && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-[var(--text-muted)]", children: emptyLabel ?? labels.noResults }),
         results.map((o, i) => {
           const selected = isSelected(o.value);
           const startsGroup = o.group != null && o.group !== results[i - 1]?.group;
@@ -142,16 +193,20 @@ function ComboboxPanel({
                 {
                   role: "presentation",
                   className: cn(
-                    "font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400",
+                    "font-semibold uppercase tracking-wide text-[var(--text-muted)]",
                     isPhone ? "px-4 pb-1 pt-3 text-xs" : "px-3 pb-0.5 pt-2 text-[11px] first:pt-1"
                   ),
                   children: o.group
                 }
               ),
-              /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": selected, children: /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
+                  id: optionId(i),
+                  role: "option",
+                  "aria-selected": selected,
+                  tabIndex: -1,
                   onMouseDown: (e) => {
                     e.preventDefault();
                     onChoose(o);
@@ -159,35 +214,40 @@ function ComboboxPanel({
                   onMouseEnter: () => setActive(i),
                   className: cn(
                     isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-                    i === active && !isPhone ? "bg-slate-100 dark:bg-slate-800" : !isPhone && "hover:bg-slate-50 dark:hover:bg-slate-800"
+                    i === active && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]"
                   ),
                   children: [
                     multi && /* @__PURE__ */ jsx(
                       "span",
                       {
+                        "aria-hidden": true,
                         className: cn(
                           "flex size-4 shrink-0 items-center justify-center rounded border",
-                          selected ? "border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900" : "border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900"
+                          selected ? "border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "border-[var(--border-strong)] bg-[var(--bg-surface)]"
                         ),
                         children: selected && /* @__PURE__ */ jsx(Check, { className: "size-3" })
                       }
                     ),
                     o.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: o.icon }),
                     /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "block truncate text-slate-900 dark:text-slate-100", children: o.label }),
-                      o.sublabel && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-400 dark:text-slate-500", children: o.sublabel })
+                      /* @__PURE__ */ jsx("span", { className: "block truncate text-[var(--text-primary)]", children: o.label }),
+                      o.sublabel && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-placeholder)]", children: o.sublabel })
                     ] }),
-                    !multi && selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-sky-600 dark:text-sky-400" })
+                    !multi && selected && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-[var(--brand)]" })
                   ]
                 }
               ) })
             ] }, `${o.group ?? ""}|${String(o.value)}`)
           );
         }),
-        showCreate && /* @__PURE__ */ jsx("li", { role: "option", "aria-selected": active === results.length, children: /* @__PURE__ */ jsxs(
+        showCreate && /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
+            id: optionId(results.length),
+            role: "option",
+            "aria-selected": false,
+            tabIndex: -1,
             onMouseDown: (e) => {
               e.preventDefault();
               onCreate();
@@ -195,8 +255,8 @@ function ComboboxPanel({
             onMouseEnter: () => setActive(results.length),
             className: cn(
               isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm",
-              "text-slate-700 dark:text-slate-200",
-              active === results.length && !isPhone ? "bg-slate-100 dark:bg-slate-800" : !isPhone && "hover:bg-slate-50 dark:hover:bg-slate-800"
+              "text-[var(--text-secondary)]",
+              active === results.length && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]"
             ),
             children: [
               /* @__PURE__ */ jsx(Plus, { className: "size-4 shrink-0" }),
@@ -211,12 +271,15 @@ function ComboboxPanel({
     return /* @__PURE__ */ jsx(
       PickerSheet,
       {
+        ...rest,
+        className,
+        style,
         open: true,
         onClose: () => core.setOpen(false),
         title: sheetTitle,
         query,
         onQueryChange: setQuery,
-        searchPlaceholder,
+        searchPlaceholder: searchPlaceholder ?? labels.search,
         inputRef,
         closeLabel,
         children: /* @__PURE__ */ jsx("div", { onKeyDown, children: list })
@@ -228,9 +291,11 @@ function ComboboxPanel({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ...rest,
         ref: panelRef,
         onKeyDown,
         style: {
+          ...style,
           position: "fixed",
           top: placement.top,
           left: rect.left,
@@ -238,7 +303,10 @@ function ComboboxPanel({
           minWidth: 220,
           maxHeight: placement.maxHeight
         },
-        className: "z-50 flex flex-col rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
+        className: cn(
+          "z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+          className
+        ),
         children: [
           /* @__PURE__ */ jsx(
             DropdownSearchHeader,
@@ -246,7 +314,9 @@ function ComboboxPanel({
               query,
               onQueryChange: setQuery,
               inputRef,
-              placeholder: searchPlaceholder
+              placeholder: searchPlaceholder ?? labels.search,
+              listboxId,
+              activeId
             }
           ),
           list
@@ -258,6 +328,7 @@ function ComboboxPanel({
 }
 export {
   ComboboxPanel,
+  useActiveOptionScroll,
   useComboboxCore
 };
 //# sourceMappingURL=combobox-core.js.map

package/dist/components/combobox-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * Searchable like `sublabel`.\n   */\n  group?: string;\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered), also used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  cacheRef: RefObject<Map<V, ComboOption<V>>>;\n  resolve: (v: V) => ComboOption<V> | null;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const isAsync = typeof loadOptions === \"function\";\n  const [asyncResults, setAsyncResults] = useState<ComboOption<V>[]>([]);\n  const [asyncLoading, setAsyncLoading] = useState(false);\n  const loadRef = useRef(loadOptions);\n  loadRef.current = loadOptions;\n  const reqId = useRef(0);\n\n  const close = () => setOpen(false);\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  // Reset the query + focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided).\n  useEffect(() => {\n    if (!open || !isAsync) return;\n    const id = ++reqId.current;\n    setAsyncLoading(true);\n    const run = async () => {\n      try {\n        const r = await loadRef.current!(query);\n        if (reqId.current === id) setAsyncResults(r);\n      } finally {\n        if (reqId.current === id) setAsyncLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n  }, [query, open, isAsync]);\n\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query]);\n\n  const results = isAsync ? asyncResults : clientResults;\n  const busy = Boolean(loading) || (isAsync && asyncLoading);\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n\n  // Reset the highlighted row whenever the visible set changes.\n  useEffect(() => {\n    setActive(0);\n  }, [query, open]);\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    rect,\n    placement,\n    cacheRef,\n    resolve,\n  };\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Left-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  sheetTitle,\n  closeLabel,\n}: {\n  core: ComboboxCore<V>;\n  searchPlaceholder?: string;\n  emptyLabel: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n}) {\n  const { rect, placement, panelRef, inputRef, query, setQuery, results, busy, active, setActive } =\n    core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  const rowCount = results.length + (showCreate ? 1 : 0);\n\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, rowCount - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (active < results.length) onChoose(results[active]);\n      else if (showCreate) onCreate();\n    }\n  };\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  const list = (\n    <ul\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {busy && results.length === 0 && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">…</li>\n      )}\n      {!busy && results.length === 0 && !showCreate && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">{emptyLabel}</li>\n      )}\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"option\" aria-selected={selected}>\n            <button\n              type=\"button\"\n              onMouseDown={(e) => {\n                e.preventDefault();\n                onChoose(o);\n              }}\n              onMouseEnter={() => setActive(i)}\n              className={cn(\n                isPhone\n                  ? SHEET_ROW_CLASS\n                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n                i === active && !isPhone\n                  ? \"bg-slate-100 dark:bg-slate-800\"\n                  : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n              )}\n            >\n              {multi && (\n                <span\n                  className={cn(\n                    \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                    selected\n                      ? \"border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900\"\n                      : \"border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-slate-900 dark:text-slate-100\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-slate-400 dark:text-slate-500\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-sky-600 dark:text-sky-400\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"option\" aria-selected={active === results.length}>\n          <button\n            type=\"button\"\n            onMouseDown={(e) => {\n              e.preventDefault();\n              onCreate();\n            }}\n            onMouseEnter={() => setActive(results.length)}\n            className={cn(\n              isPhone\n                ? SHEET_ROW_CLASS\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n              \"text-slate-700 dark:text-slate-200\",\n              active === results.length && !isPhone\n                ? \"bg-slate-100 dark:bg-slate-800\"\n                : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n            )}\n          >\n            <Plus className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{createContent}</span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        <div onKeyDown={onKeyDown}>{list}</div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n\n  return createPortal(\n    <div\n      ref={panelRef}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        position: \"fixed\",\n        top: placement.top,\n        left: rect.left,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className=\"z-50 flex flex-col rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * Searchable like `sublabel`.\n   */\n  group?: string;\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered), also used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  cacheRef: RefObject<Map<V, ComboOption<V>>>;\n  resolve: (v: V) => ComboOption<V> | null;\n  /** Close and hand focus back to the trigger — the keyboard paths only. See\n   *  {@link useDropdown} for why a pointer dismissal must not do this. */\n  closeToTrigger: () => void;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const isAsync = typeof loadOptions === \"function\";\n  const [asyncResults, setAsyncResults] = useState<ComboOption<V>[]>([]);\n  const [asyncLoading, setAsyncLoading] = useState(false);\n  const loadRef = useRef(loadOptions);\n  loadRef.current = loadOptions;\n  const reqId = useRef(0);\n\n  const close = () => setOpen(false);\n  // Escape unmounts the panel the user is typing in; without this the browser drops\n  // focus on <body>, so the caret disappears and the next Tab restarts at the top of\n  // the page. A pointer dismissal deliberately does NOT do this — the press has\n  // already decided where focus belongs.\n  const closeToTrigger = () => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  };\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n  // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n  // portalled to <body> and carrying its own ways out — the close X, Escape, and\n  // Back through `useOverlayHistory` — so there is no outside left to press.\n  //\n  // Leaving the listener on there was not merely redundant, it was the bug:\n  // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n  // press inside it answered \"outside\". While `useOutsideClick` listened for\n  // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n  // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n  // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n  // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n  // stops `mousedown` for exactly this reason, but that guard was written for\n  // `useDropdown`'s listener and never covered this hook.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  useEscapeKey(closeToTrigger, open);\n\n  // Reset the query + focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided).\n  useEffect(() => {\n    if (!open || !isAsync) return;\n    const id = ++reqId.current;\n    setAsyncLoading(true);\n    const run = async () => {\n      try {\n        const r = await loadRef.current!(query);\n        if (reqId.current === id) setAsyncResults(r);\n      } finally {\n        if (reqId.current === id) setAsyncLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n  }, [query, open, isAsync]);\n\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query]);\n\n  const results = isAsync ? asyncResults : clientResults;\n  const busy = Boolean(loading) || (isAsync && asyncLoading);\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n\n  // Reset the highlighted row whenever the visible set changes.\n  useEffect(() => {\n    setActive(0);\n  }, [query, open]);\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    rect,\n    placement,\n    cacheRef,\n    resolve,\n    closeToTrigger,\n  };\n}\n\n/**\n * Keep the option the keyboard is on inside the visible part of the list.\n *\n * `aria-activedescendant` moves a highlight WITHOUT moving focus, which is the whole\n * point of it — and the cost is that the browser scrolls nothing on its own. In a\n * panel capped at a few hundred pixels over an account list two hundred long, Down\n * walked the highlight straight out of the box and the list sat still.\n *\n * Optional-called because jsdom does not implement `scrollIntoView`: three consumers\n * run this component in their own suites, and a picker that throws there is a worse\n * trade than a list that does not scroll in a test.\n */\nexport function useActiveOptionScroll(activeId: string | undefined): void {\n  useEffect(() => {\n    if (!activeId) return;\n    document.getElementById(activeId)?.scrollIntoView?.({ block: \"nearest\" });\n  }, [activeId]);\n}\n\nexport interface ComboboxPanelProps<V extends string | number>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  core: ComboboxCore<V>;\n  /** What the trigger's `aria-controls` names. Owned by the component that renders\n   *  the trigger, not by the core: one id has to reach both, and only one of them\n   *  can be the origin. */\n  listboxId: string;\n  /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n  searchPlaceholder?: string;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Left-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n *\n * ## The ARIA, which is `CommandPalette`'s\n *\n * This rendered a `role=\"listbox\"` of `role=\"option\"` rows and stopped there, so a\n * reader was handed a text box and silence: the highlight the arrow keys move lived\n * only in a background colour, and nothing tied the box being typed in to the list\n * being filtered. `CommandPalette` has had the whole model since it was written —\n * `aria-controls` from the field to the list, `aria-activedescendant` naming the row\n * the keyboard is on — and it was the only thing in the package that did.\n *\n * Two distinct states, deliberately not conflated:\n *   - `aria-selected` is CHOSEN. It is the check mark, and in `multi` the checkbox.\n *   - `aria-activedescendant` is where the KEYBOARD is. Announcing that as selected\n *     would tell a reader that the row they are merely passing over is the answer.\n *\n * `role=\"option\"` sits on the `<button>`, not on the `<li>` around it, for the same\n * reason it does in `CommandPalette`: an option may not contain a separately\n * focusable control, and the button is the thing a pointer presses. The rows are\n * `tabIndex={-1}` because focus never leaves the search box — that is what\n * `aria-activedescendant` is FOR.\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  listboxId,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  sheetTitle,\n  closeLabel,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    active,\n    setActive,\n    closeToTrigger,\n  } = core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  const rowCount = results.length + (showCreate ? 1 : 0);\n  const optionId = (index: number) => `${listboxId}-option-${index}`;\n  const activeId = active >= 0 && active < rowCount ? optionId(active) : undefined;\n  useActiveOptionScroll(activeId);\n  // The consumers resolve their own props against the provider already; this is\n  // for the loading row, which no consumer names, and for a caller that renders the\n  // panel directly and leaves the two optional strings out.\n  const labels = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS);\n\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`\n  // registers it on the document, so it answers wherever focus has ended up.\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, rowCount - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(0);\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(rowCount - 1);\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (active < results.length) onChoose(results[active]);\n      else if (showCreate) onCreate();\n    } else if (e.key === \"Tab\") {\n      // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n      // here to whatever follows the portal — i.e. off the end of the document. The\n      // trade is one extra Tab (trigger, then onward) against never stranding focus\n      // at the bottom of the page.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  const list = (\n    <ul\n      id={listboxId}\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {busy && results.length === 0 && (\n        // The ellipsis is the picture; the words are for a reader, who otherwise met\n        // an empty-looking list with a lone \"…\" in it — or, in most readers, nothing\n        // at all, since punctuation alone is skipped. `relative` so the sr-only text\n        // has a local containing block (see sr-only-containment.test).\n        <li className=\"relative px-3 py-2 text-sm text-[var(--text-muted)]\">\n          <span aria-hidden>…</span>\n          <span className=\"sr-only\">{labels.loading}</span>\n        </li>\n      )}\n      {!busy && results.length === 0 && !showCreate && (\n        <li className=\"px-3 py-2 text-sm text-[var(--text-muted)]\">\n          {emptyLabel ?? labels.noResults}\n        </li>\n      )}\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"presentation\">\n            <button\n              type=\"button\"\n              id={optionId(i)}\n              role=\"option\"\n              aria-selected={selected}\n              tabIndex={-1}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                onChoose(o);\n              }}\n              onMouseEnter={() => setActive(i)}\n              className={cn(\n                isPhone\n                  ? SHEET_ROW_CLASS\n                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n                i === active && !isPhone\n                  ? \"bg-[var(--bg-active)]\"\n                  : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n              )}\n            >\n              {multi && (\n                <span\n                  // The checkbox is a PICTURE of `aria-selected` above, so a reader\n                  // that met both would be told twice.\n                  aria-hidden\n                  className={cn(\n                    \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                    selected\n                      ? \"border-[var(--bg-inverse)] bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                      : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-[var(--text-primary)]\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-[var(--brand)]\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"presentation\">\n          <button\n            type=\"button\"\n            id={optionId(results.length)}\n            role=\"option\"\n            // Never chosen — it is an action, and it disappears the moment it has\n            // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n            // job to say.\n            aria-selected={false}\n            tabIndex={-1}\n            onMouseDown={(e) => {\n              e.preventDefault();\n              onCreate();\n            }}\n            onMouseEnter={() => setActive(results.length)}\n            className={cn(\n              isPhone\n                ? SHEET_ROW_CLASS\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n              \"text-[var(--text-secondary)]\",\n              active === results.length && !isPhone\n                ? \"bg-[var(--bg-active)]\"\n                : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n            )}\n          >\n            <Plus className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{createContent}</span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        // First, so the sheet's own props below win: `rest` is typed as div\n        // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n        // its heading — one name, two meanings, and the sheet's is the one the caller\n        // asked for.\n        {...rest}\n        className={className}\n        style={style}\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder ?? labels.search}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        <div onKeyDown={onKeyDown}>{list}</div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n\n  return createPortal(\n    <div\n      // Spread FIRST: `onKeyDown` below is the listbox keyboard (Up/Down/Home/End/\n      // Enter/Tab) and the placement is measured rather than chosen, so neither is a\n      // caller's to replace by accident — while a `data-*` anchor or an\n      // `aria-describedby` has nothing to collide with.\n      {...rest}\n      ref={panelRef}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.top,\n        left: rect.left,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder ?? labels.search}\n        // Focus is in this box while the list is up, so this is what has to name the\n        // list and the row the arrows are on.\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAiWQ,SACE,KADF;AAjWR,SAAS,UAAU,WAAW,SAAS,QAAQ,gBAAgB;AAC/D,SAAS,oBAAoB;AAS7B,SAAS,OAAO,YAAY;AAC5B,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,aAAa,uBAAuB;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAE5B,SAAS,wBAA4C;AACrD,SAAS,cAAc,uBAAuB;AAC9C,SAAS,yBAAyB,oBAAoB;AAwD/C,SAAS,gBAA2C;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AACF,GAA4C;AAC1C,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,QAAM,UAAU,OAAO,gBAAgB;AACvC,QAAM,CAAC,cAAc,eAAe,IAAI,SAA2B,CAAC,CAAC;AACrE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,UAAU,OAAO,WAAW;AAClC,UAAQ,UAAU;AAClB,QAAM,QAAQ,OAAO,CAAC;AAEtB,QAAM,QAAQ,MAAM,QAAQ,KAAK;AAKjC,QAAM,iBAAiB,MAAM;AAC3B,YAAQ,KAAK;AACb,eAAW,SAAS,MAAM;AAAA,EAC5B;AAGA,QAAM,YAAY,iBAAiB,YAAY,IAAI;AACnD,QAAM,OAAO,UAAU;AAevB,QAAM,UAAU,cAAc,aAAa,KAAK;AAChD,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,QAAQ,CAAC,OAAO;AAC/D,eAAa,gBAAgB,IAAI;AAGjC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,aAAS,EAAE;AACX,UAAM,KAAK,sBAAsB,MAAM,SAAS,SAAS,MAAM,CAAC;AAChE,WAAO,MAAM,qBAAqB,EAAE;AAAA,EACtC,GAAG,CAAC,IAAI,CAAC;AAGT,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,QAAS;AACvB,UAAM,KAAK,EAAE,MAAM;AACnB,oBAAgB,IAAI;AACpB,UAAM,MAAM,YAAY;AACtB,UAAI;AACF,cAAM,IAAI,MAAM,QAAQ,QAAS,KAAK;AACtC,YAAI,MAAM,YAAY,GAAI,iBAAgB,CAAC;AAAA,MAC7C,UAAE;AACA,YAAI,MAAM,YAAY,GAAI,iBAAgB,KAAK;AAAA,MACjD;AAAA,IACF;AACA,UAAM,IAAI,WAAW,KAAK,QAAQ,MAAM,CAAC;AACzC,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,OAAO,MAAM,OAAO,CAAC;AAEzB,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,QAAS,QAAO,CAAC;AACrB,UAAM,MAAM,WAAW,CAAC;AACxB,UAAM,IAAI,MAAM,KAAK,EAAE,YAAY;AACnC,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,IAAI;AAAA,MACT,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,IAAI,YAAY,EAAE,SAAS,CAAC;AAAA,IACzF;AAAA,EACF,GAAG,CAAC,SAAS,SAAS,KAAK,CAAC;AAE5B,QAAM,UAAU,UAAU,eAAe;AACzC,QAAM,OAAO,QAAQ,OAAO,KAAM,WAAW;AAI7C,QAAM,WAAW,OAAO,oBAAI,IAAuB,CAAC;AACpD,YAAU,MAAM;AACd,eAAW,KAAK,WAAW,CAAC,EAAG,UAAS,QAAQ,IAAI,EAAE,OAAO,CAAC;AAC9D,eAAW,KAAK,QAAS,UAAS,QAAQ,IAAI,EAAE,OAAO,CAAC;AAAA,EAC1D,GAAG,CAAC,SAAS,OAAO,CAAC;AACrB,QAAM,UAAU,CAAC,MACf,SAAS,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,SAAS,QAAQ,IAAI,CAAC,KAAK;AAGpE,YAAU,MAAM;AACd,cAAU,CAAC;AAAA,EACb,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAcO,SAAS,sBAAsB,UAAoC;AACxE,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,aAAS,eAAe,QAAQ,GAAG,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,EAC1E,GAAG,CAAC,QAAQ,CAAC;AACf;AAmDO,SAAS,cAAyC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAIJ,QAAM,UAAU,cAAc,aAAa,KAAK;AAChD,QAAM,WAAW,QAAQ,UAAU,aAAa,IAAI;AACpD,QAAM,WAAW,CAAC,UAAkB,GAAG,SAAS,WAAW,KAAK;AAChE,QAAM,WAAW,UAAU,KAAK,SAAS,WAAW,SAAS,MAAM,IAAI;AACvE,wBAAsB,QAAQ;AAI9B,QAAM,SAAS,aAAa,YAAY,uBAAuB;AAK/D,QAAM,YAAY,CAAC,MAA0B;AAC3C,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAe;AACjB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,WAAW,CAAC,CAAC;AAAA,IAChD,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAe;AACjB,gBAAU,CAAC,MAAM,KAAK,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,IACrC,WAAW,EAAE,QAAQ,QAAQ;AAC3B,QAAE,eAAe;AACjB,gBAAU,CAAC;AAAA,IACb,WAAW,EAAE,QAAQ,OAAO;AAC1B,QAAE,eAAe;AACjB,gBAAU,WAAW,CAAC;AAAA,IACxB,WAAW,EAAE,QAAQ,SAAS;AAC5B,QAAE,eAAe;AACjB,UAAI,SAAS,QAAQ,OAAQ,UAAS,QAAQ,MAAM,CAAC;AAAA,eAC5C,WAAY,UAAS;AAAA,IAChC,WAAW,EAAE,QAAQ,OAAO;AAK1B,QAAE,eAAe;AACjB,qBAAe;AAAA,IACjB;AAAA,EACF;AAEA,MAAI,CAAC,KAAK,QAAQ,OAAO,aAAa,YAAa,QAAO;AAE1D,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,wBAAsB;AAAA,MACtB,WAAW,GAAG,uCAAuC,WAAW,WAAW;AAAA,MAE1E;AAAA,gBAAQ,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA,QAK1B,qBAAC,QAAG,WAAU,uDACZ;AAAA,8BAAC,UAAK,eAAW,MAAC,oBAAC;AAAA,UACnB,oBAAC,UAAK,WAAU,WAAW,iBAAO,SAAQ;AAAA,WAC5C;AAAA,QAED,CAAC,QAAQ,QAAQ,WAAW,KAAK,CAAC,cACjC,oBAAC,QAAG,WAAU,8CACX,wBAAc,OAAO,WACxB;AAAA,QAED,QAAQ,IAAI,CAAC,GAAG,MAAM;AACrB,gBAAM,WAAW,WAAW,EAAE,KAAK;AAKnC,gBAAM,cAAc,EAAE,SAAS,QAAQ,EAAE,UAAU,QAAQ,IAAI,CAAC,GAAG;AACnE;AAAA;AAAA;AAAA;AAAA,YAIE,qBAAC,YACE;AAAA,6BACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAW;AAAA,oBACT;AAAA,oBACA,UAAU,2BAA2B;AAAA,kBACvC;AAAA,kBAEC,YAAE;AAAA;AAAA,cACL;AAAA,cAEJ,oBAAC,QAAG,MAAK,gBACP;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,IAAI,SAAS,CAAC;AAAA,kBACd,MAAK;AAAA,kBACL,iBAAe;AAAA,kBACf,UAAU;AAAA,kBACV,aAAa,CAAC,MAAM;AAClB,sBAAE,eAAe;AACjB,6BAAS,CAAC;AAAA,kBACZ;AAAA,kBACA,cAAc,MAAM,UAAU,CAAC;AAAA,kBAC/B,WAAW;AAAA,oBACT,UACI,kBACA;AAAA,oBACJ,MAAM,UAAU,CAAC,UACb,0BACA,CAAC,WAAW;AAAA,kBAClB;AAAA,kBAEC;AAAA,6BACC;AAAA,sBAAC;AAAA;AAAA,wBAGC,eAAW;AAAA,wBACX,WAAW;AAAA,0BACT;AAAA,0BACA,WACI,iFACA;AAAA,wBACN;AAAA,wBAEC,sBAAY,oBAAC,SAAM,WAAU,UAAS;AAAA;AAAA,oBACzC;AAAA,oBAED,EAAE,QAAQ,oBAAC,UAAK,WAAU,YAAY,YAAE,MAAK;AAAA,oBAC9C,qBAAC,UAAK,WAAU,kBACd;AAAA,0CAAC,UAAK,WAAU,6CAA6C,YAAE,OAAM;AAAA,sBACpE,EAAE,YACD,oBAAC,UAAK,WAAU,yDACb,YAAE,UACL;AAAA,uBAEJ;AAAA,oBACC,CAAC,SAAS,YAAY,oBAAC,SAAM,WAAU,uCAAsC;AAAA;AAAA;AAAA,cAChF,GACF;AAAA,iBA3De,GAAG,EAAE,SAAS,EAAE,IAAI,OAAO,EAAE,KAAK,CAAC,EA4DlD;AAAA;AAAA,QAEJ,CAAC;AAAA,QACA,cACC,oBAAC,QAAG,MAAK,gBACP;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAI,SAAS,QAAQ,MAAM;AAAA,YAC3B,MAAK;AAAA,YAIL,iBAAe;AAAA,YACf,UAAU;AAAA,YACV,aAAa,CAAC,MAAM;AAClB,gBAAE,eAAe;AACjB,uBAAS;AAAA,YACX;AAAA,YACA,cAAc,MAAM,UAAU,QAAQ,MAAM;AAAA,YAC5C,WAAW;AAAA,cACT,UACI,kBACA;AAAA,cACJ;AAAA,cACA,WAAW,QAAQ,UAAU,CAAC,UAC1B,0BACA,CAAC,WAAW;AAAA,YAClB;AAAA,YAEA;AAAA,kCAAC,QAAK,WAAU,mBAAkB;AAAA,cAClC,oBAAC,UAAK,WAAU,YAAY,yBAAc;AAAA;AAAA;AAAA,QAC5C,GACF;AAAA;AAAA;AAAA,EAEJ;AAGF,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QAKE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA,MAAI;AAAA,QACJ,SAAS,MAAM,KAAK,QAAQ,KAAK;AAAA,QACjC,OAAO;AAAA,QACP;AAAA,QACA,eAAe;AAAA,QACf,mBAAmB,qBAAqB,OAAO;AAAA,QAC/C;AAAA,QACA;AAAA,QAEA,8BAAC,SAAI,WAAuB,gBAAK;AAAA;AAAA,IACnC;AAAA,EAEJ;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAKE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QAIA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,UAAU;AAAA,UACV,KAAK,UAAU;AAAA,UACf,MAAM,KAAK;AAAA,UACX,OAAO,KAAK;AAAA,UACZ,UAAU;AAAA,UACV,WAAW,UAAU;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,eAAe;AAAA,cACf;AAAA,cACA,aAAa,qBAAqB,OAAO;AAAA,cAGzC;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UAGC;AAAA;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/combobox.d.ts

@@ -1,20 +1,17 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ComboOption } from './combobox-core.js';
 import '../hooks/use-anchored-rect.js';
 import '../hooks/use-anchored-panel.js';
 
 /**
- * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE
- * styling, chevron and static floating label) but lets the user type a value
- * that isn't in the list — e.g. naming a brand-new payee. Picking from the
- * filtered suggestion list fills the value; typing keeps whatever was entered.
- *
- * Use this instead of an `<Input list="…">` + `<datalist>` so the control is
- * visually and behaviourally consistent with the other dropdowns (feedback
- * #230 — the payee field looked/behaved differently from every other select).
+ * Four of the div's own attributes are omitted because this component already owns
+ * the name, with a different meaning: `id` is the INPUT's (a caller labels or
+ * automates the field, not the box around it), and `onChange`/`onBlur`/`onSubmit`
+ * are the field's — a value, a departure, and "I mean what I typed" — rather than
+ * the DOM events of the wrapper. Everything else a wrapper needs reaches the root.
  */
-declare function Combobox({ value, onChange, options, label, id, placeholder, className, groupBy, maxSuggestions, searchPlaceholder, closeLabel, createLabel, invalid, optionAdornment, autoFocus, onBlur, onSubmit, "aria-label": ariaLabel, }: {
+interface ComboboxProps extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange" | "onBlur" | "onSubmit"> {
     value: string;
     onChange: (v: string) => void;
     /** Suggestion pool (e.g. existing payee names). */
@@ -59,7 +56,6 @@ declare function Combobox({ value, onChange, options, label, id, placeholder, cl
     /** Enter pressed with no row highlighted, i.e. "I mean what I typed". The list
      *  closes either way; this is for a caller whose Enter also submits a row editor. */
     onSubmit?: () => void;
-    "aria-label"?: string;
     /** Rows to offer when the field is empty. 8 on a dropdown, where that is all
      *  that fits; the phone sheet asks for more because it has a screen. */
     maxSuggestions?: number;
@@ -81,26 +77,21 @@ declare function Combobox({ value, onChange, options, label, id, placeholder, cl
      * values are all supposed to already exist.
      */
     createLabel?: (value: string) => string;
-}): react.JSX.Element;
+}
 /**
- * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input
- * with the shared field styling, chevron and inline as-you-type filtering) but
- * the value is an option id, not free text. Built so an entity picker can sit
- * next to a free-text combobox without any visible difference — a button-trigger
- * panel picker ({@link EntityCombobox}) never matches an input field exactly.
- *
- * Text-vs-value reconciliation: the input's text is transient. Picking a row or
- * typing an exact (unique) label commits that option; emptying the text commits
- * a clear; anything else reverts to the selected option's label on blur/Escape.
+ * Free-text combobox that looks like the shared {@link Select} (same FIELD_BASE
+ * styling, chevron and static floating label) but lets the user type a value
+ * that isn't in the list — e.g. naming a brand-new payee. Picking from the
+ * filtered suggestion list fills the value; typing keeps whatever was entered.
  *
- * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}
- * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto
- * this component and must not lose its sheet). The sheet carries its OWN query state
- * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a
- * sheet that emptied it to show the full list would read as "the user cleared the
- * field" the moment it closed.
+ * Use this instead of an `<Input list="…">` + `<datalist>` so the control is
+ * visually and behaviourally consistent with the other dropdowns (feedback
+ * #230 — the payee field looked/behaved differently from every other select).
  */
-declare function InlineEntityCombobox<V extends string | number>({ value, onChange, options, label, id, placeholder, className, disabled, autoFocus, searchPlaceholder, emptyLabel, closeLabel, clearable, clearLabel, invalid, "aria-label": ariaLabel, }: {
+declare function Combobox({ value, onChange, options, label, id, placeholder, className, groupBy, maxSuggestions, searchPlaceholder, closeLabel, createLabel, invalid, optionAdornment, autoFocus, onBlur, onSubmit, "aria-label": ariaLabel, ...rest }: ComboboxProps): react.JSX.Element;
+/** `id` is the INPUT's and `onChange` is the field's — see {@link ComboboxProps}
+ *  for why the div's spellings of them are omitted. */
+interface InlineEntityComboboxProps<V extends string | number> extends Omit<ComponentPropsWithoutRef<"div">, "id" | "onChange"> {
     /** Selected option id, or null when nothing is selected. */
     value: V | null;
     /** Required and unanswered — see {@link Combobox}'s `invalid`. */
@@ -119,10 +110,11 @@ declare function InlineEntityCombobox<V extends string | number>({ value, onChan
      *  without a passthrough this component's fixed prop list puts the `<input>`
      *  out of a caller's reach entirely (Keksdose feedback live #218). */
     autoFocus?: boolean;
-    /** Phone sheet only — the anchored list has the field itself to type in. */
+    /** Phone sheet only — the anchored list has the field itself to type in. Falls
+     *  back to `placeholder`, then to `combobox.search` from the {@link UiKitProvider}. */
     searchPlaceholder?: string;
     /** Phone sheet only: a full screen showing nothing has to say why. The anchored
-     *  list simply does not open. */
+     *  list simply does not open. Default: `combobox.noResults` from the provider. */
     emptyLabel?: string;
     closeLabel?: string;
     /** Offer a clear "×" in place of the chevron whenever something is selected.
@@ -135,7 +127,25 @@ declare function InlineEntityCombobox<V extends string | number>({ value, onChan
      *  affordance both shells share, and it clears without opening anything. */
     clearable?: boolean;
     clearLabel?: string;
-    "aria-label"?: string;
-}): react.JSX.Element;
+}
+/**
+ * The id-keyed sibling of {@link Combobox}: identical anatomy (a real text input
+ * with the shared field styling, chevron and inline as-you-type filtering) but
+ * the value is an option id, not free text. Built so an entity picker can sit
+ * next to a free-text combobox without any visible difference — a button-trigger
+ * panel picker ({@link EntityCombobox}) never matches an input field exactly.
+ *
+ * Text-vs-value reconciliation: the input's text is transient. Picking a row or
+ * typing an exact (unique) label commits that option; emptying the text commits
+ * a clear; anything else reverts to the selected option's label on blur/Escape.
+ *
+ * **On a phone the list opens as a full-screen sheet**, exactly like {@link Combobox}
+ * beside it (Keksdose live #200, extended by dev#477 — the account picker moved onto
+ * this component and must not lose its sheet). The sheet carries its OWN query state
+ * rather than reusing `text`: `text` is what {@link reconcile} judges on blur, so a
+ * sheet that emptied it to show the full list would read as "the user cleared the
+ * field" the moment it closed.
+ */
+declare function InlineEntityCombobox<V extends string | number>({ value, onChange, options, label, id, placeholder, className, disabled, autoFocus, searchPlaceholder, emptyLabel, closeLabel, clearable, clearLabel, invalid, "aria-label": ariaLabel, ...rest }: InlineEntityComboboxProps<V>): react.JSX.Element;
 
-export { Combobox, InlineEntityCombobox };
+export { Combobox, type ComboboxProps, InlineEntityCombobox, type InlineEntityComboboxProps };