@eifi1/ui-kit 0.51.2 → 0.51.4

package/README.md

@@ -568,16 +568,16 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**2193 names from 363 modules** — 1014 values and 1179 types. _Italic_ is a type-only export.
+**2195 names from 363 modules** — 1015 values and 1180 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 2193 |
+| `@eifi1/ui-kit` | 2195 |
 | `@eifi1/ui-kit/chart` | 100 |
-| `@eifi1/ui-kit/shell` | 119 |
+| `@eifi1/ui-kit/shell` | 120 |
 | `@eifi1/ui-kit/data-table` | 56 |
 | `@eifi1/ui-kit/wizard` | 25 |
 | `@eifi1/ui-kit/tour` | 49 |
@@ -797,7 +797,7 @@ re-slicing of it, never a second API.
 | `components/text-link` | `TextLink`, _`TextLinkCurrent`_, _`TextLinkProps`_, _`TextLinkRenderProps`_, _`TextLinkTone`_, _`TextLinkUnderline`_ |
 | `components/toast` | `DEFAULT_TOAST_LABELS`, `toast`, `TOAST_ACTION_DURATION`, `Toaster`, `TOASTER_OFFSET_BOTTOM`, `TOASTER_OFFSET_TOP`, _`ToastAction`_, _`ToasterOffset`_, _`ToasterProps`_, _`ToastId`_, _`ToastLabels`_, _`ToastOptions`_, _`ToastPosition`_, _`ToastPromiseOptions`_, _`ToastRedoOptions`_, _`ToastSwipeDirection`_, _`ToastUndoOptions`_ |
 | `components/translation-review` | `TranslationReviewPanel`, _`TranslationReviewGroupBy`_, _`TranslationReviewOrigin`_, _`TranslationReviewPanelProps`_, _`TranslationReviewSaveInfo`_ |
-| `components/legal` | `DEFAULT_LEGAL_LABELS`, `LEGAL_HREFS`, `LegalFooter`, `LegalLayout`, `LegalLinks`, `legalOperatorText`, `LegalSection`, `useLegalLabels`, _`LegalDisclaimerSectionLabels`_, _`LegalFooterProps`_, _`LegalFramedSectionLabels`_, _`LegalLabels`_, _`LegalLayoutProps`_, _`LegalLink`_, _`LegalLinksProps`_, _`LegalOperator`_, _`LegalOperatorSectionLabels`_, _`LegalOperatorText`_, _`LegalPageKey`_, _`LegalSectionProps`_, _`LegalTextSectionLabels`_ |
+| `components/legal` | `DEFAULT_LEGAL_LABELS`, `LEGAL_HREFS`, `LegalFooter`, `LegalLayout`, `LegalLinks`, `legalOperatorText`, `LegalSection`, `useLegalLabels`, _`LegalDisclaimerSectionLabels`_, _`LegalFooterProps`_, _`LegalFramedSectionLabels`_, _`LegalInfoPageKey`_, _`LegalLabels`_, _`LegalLayoutProps`_, _`LegalLink`_, _`LegalLinksProps`_, _`LegalOperator`_, _`LegalOperatorSectionLabels`_, _`LegalOperatorText`_, _`LegalPageKey`_, _`LegalSectionProps`_, _`LegalTextSectionLabels`_ |
 | `components/legal-page` | `LEGAL_SKELETON`, `LegalAcceptCheckbox`, `LegalKitSection`, `LegalPage`, _`LegalAcceptCheckboxProps`_, _`LegalDisclaimerVariant`_, _`LegalKitSectionKey`_, _`LegalKitSectionProps`_, _`LegalPageProps`_, _`LegalSectionOwner`_, _`LegalSkeletonEntry`_, _`LegalSkeletonPage`_ |
 | `components/appearance-labels` | `DEFAULT_APPEARANCE_LABELS`, `useAppearanceLabels`, _`AppearanceLabels`_ |
 | `components/date-format-setting` | `DateFormatSetting`, _`DateFormatSettingProps`_ |
@@ -865,7 +865,7 @@ re-slicing of it, never a second API.
 |---|---|
 | `settings/settings-layout` | `SETTINGS_SEARCH_THRESHOLD`, `SettingsLayout`, _`SettingsDocumentTitleParts`_, _`SettingsLayoutProps`_, _`SettingsLayoutWidth`_ |
 | `settings/use-settings-route` | `resolveSettingsLocation`, `SETTINGS_FROM_LIST_STATE`, `settingsFromListState`, `useSettingsRoute`, _`SettingsLayoutMode`_, _`SettingsLocation`_, _`SettingsLocationResult`_, _`SettingsLocationRules`_, _`SettingsRoute`_, _`UseSettingsRouteOptions`_ |
-| `settings/use-settings-focus` | `SETTINGS_FOCUS_MS`, `SETTINGS_FOCUS_RING`, `useSettingsFocus` |
+| `settings/use-settings-focus` | `SETTINGS_FOCUS_MS`, `SETTINGS_FOCUS_RING`, `useFocusParam`, `useSettingsFocus` |
 | `settings/settings-section` | `SettingsSection`, _`SettingsSectionProps`_ |
 | `settings/settings-context` | `useSettingsLayout`, _`SettingsLayoutContextValue`_ |
 | `settings/settings-heading` | `SettingsHeadingLevel`, `useSettingsHeadingLevel`, _`SettingsHeadingLevelProps`_, _`SettingsHeadingTag`_ |

package/dist/components/combobox-core.js

@@ -15,7 +15,7 @@ import { anchoredInline, useAnchoredPanel, viewportSize } from "../hooks/use-anc
 import { pressInside, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { isImeEnter } from "../lib/ime.js";
-import { foldForSearch } from "../lib/text-match.js";
+import { matchesSearch, searchWords } from "../lib/text-match.js";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { hasContent } from "../lib/presence.js";
 const isOptionEnabled = (o) => o !== void 0 && !o.disabled;
@@ -91,10 +91,9 @@ function useOptionSource({
   const clientResults = useMemo(() => {
     if (isAsync) return [];
     const src = options ?? [];
-    const q = foldForSearch(query.trim(), locale);
-    if (!filter || !q) return src;
-    const hit = (s) => s !== void 0 && foldForSearch(s, locale).includes(q);
-    return src.filter((o) => hit(o.label) || hit(o.sublabel));
+    const words = searchWords(query, locale);
+    if (!filter || words.length === 0) return src;
+    return src.filter((o) => matchesSearch(words, [o.label, o.sublabel], locale));
   }, [isAsync, options, query, filter, locale]);
   const pending = isAsync && active && !tooShort && settled.query !== query;
   const failed = isAsync && !tooShort && settled.failed;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useLayoutEffect, 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 { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { usePhoneLayout, useRemPx } from \"../hooks/use-breakpoint\";\nimport { FLOATING_LABEL_STATIC } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { pressInside, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\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   * The heading stays at the top of the list while its rows scroll beneath it.\n   *\n   * NOT searched (0.40, kk run 79): a group is where a row is filed, not what it is\n   * called — with first-letter groups (\"A\", \"B\", … \"#\"), typing \"a\" matched every row\n   * filed under A. Searching a category's name means putting it in `sublabel`.\n   */\n  group?: string;\n  /**\n   * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n   * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n   * the information — a write-locked result, an account that is closed — where\n   * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n   * hover tooltip is the one explanation a phone cannot show.\n   *\n   * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n   * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n   * chosen disabled option stays chosen — the row only refuses to be toggled.\n   */\n  disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n  o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n  rows: readonly { disabled?: boolean }[],\n  from: number,\n  dir: 1 | -1,\n): number {\n  for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n    if (!rows[i].disabled) return i;\n  }\n  return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n *  before it, else `-1`. For a highlight that starts on a fixed index (the panel\n *  pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n  if (i < 0 || i >= rows.length) return -1;\n  if (!rows[i].disabled) return i;\n  const after = stepEnabled(rows, i, 1);\n  if (after !== i) return after;\n  const before = stepEnabled(rows, i, -1);\n  return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * Whether an entity picker offers its create row — one rule for\n * {@link EntityCombobox}, {@link MultiEntityCombobox} and {@link InlineEntityCombobox}.\n *\n * With a query: while the trimmed query names no option exactly (case-insensitive) —\n * an exact hit is a record the list is already showing, and a second way to \"make\" it\n * would mint a duplicate. With NO query: only when the caller named the row for that\n * case (`createEmptyLabel`) — a row reading `Create “”` says nothing, and the kit cannot\n * know the noun (\"Create cash account\") that would make it say something (keksdose G9).\n *\n * `names` is what the query is compared against: the loaded rows for a panel picker\n * (its async list is all it knows), every option for the inline one.\n */\nexport function offersCreate(\n  onCreate: unknown,\n  query: string,\n  names: readonly string[],\n  createEmptyLabel: string | undefined,\n): boolean {\n  if (!onCreate) return false;\n  if (!query) return Boolean(createEmptyLabel);\n  const q = query.toLowerCase();\n  return !names.some((n) => n.toLowerCase() === q);\n}\n\n/**\n * {@link EndHintRow}'s `hint` and `className` for a combobox-family field, keeping the\n * 0.22 rule (keksdose): a field that was passed `hint` at all — even `undefined` — keeps\n * ONE box, so a hint coming and going never rebuilds the control under the cursor.\n *\n * A text hint is a caption after the control and never moved it; the case this covers\n * is the \"?\" (a {@link FieldHint}) on a field with no label line, which sits at the end\n * edge in a row of its own. Without this the row existed only while the \"?\" did, and\n * the control was re-parented — remounted, focus and caret lost — each time it came or\n * went. With `hint` passed the row stays, its end slot empty and its gap closed, so\n * nothing on screen moves either.\n */\nexport function endHintRowProps(\n  hintPassed: boolean,\n  hasLabel: boolean,\n  labelHint: ReactNode | undefined,\n): { hint: ReactNode | undefined; className?: string } {\n  if (hasLabel) return { hint: undefined };\n  if (labelHint !== undefined) return { hint: labelHint };\n  return hintPassed ? { hint: null, className: \"gap-0\" } : { hint: undefined };\n}\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n  htmlFor,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n  return (\n    <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </label>\n  );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered unless `filter` is false), also\n   *  used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored,\n   *  and a rejection is caught and reported as `failed`. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n  /**\n   * Narrow `options` by the query (label/sublabel substring, folded for search: no case,\n   * no accents, the locale's case rules — \"zurich\" finds Zürich, DUP-5). Default `true`.\n   *\n   * `false` shows `options` exactly as given, in the given order — for a list the\n   * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n   * second, client-side substring filter could only get wrong: a provider that\n   * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n   * throw that row away.\n   */\n  filter?: boolean;\n  /**\n   * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n   * called. Default `0` — the pickers list everything on open. Set it for a source\n   * that is costly or rate-limited: one letter against a geocoder matches half a\n   * continent, and a request per opened panel is a request nobody asked for.\n   */\n  minChars?: number;\n  /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n  debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** The last lookup for this query REJECTED. The rows are emptied with it: results\n   *  from an earlier query under a failed one would read as the answer to it. */\n  failed: boolean;\n  /** The query is shorter than `minChars`, so nothing was asked. */\n  tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n  filter = true,\n  minChars = 0,\n  debounceMs = 150,\n  query,\n  active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n  const isAsync = typeof loadOptions === \"function\";\n  const tooShort = query.trim().length < minChars;\n  const [settled, setSettled] = useState<{\n    query: string | null;\n    results: ComboOption<V>[];\n    failed: boolean;\n  }>({ query: null, results: [], failed: false });\n  const loadRef = useRef(loadOptions);\n  useEffect(() => {\n    loadRef.current = loadOptions;\n  });\n  const reqId = useRef(0);\n\n  useEffect(() => {\n    // Bumped even when nothing is asked, so a request still in flight from a longer\n    // query cannot land after the user has deleted back below `minChars`.\n    const id = ++reqId.current;\n    if (!active || !isAsync || tooShort) return;\n    const t = setTimeout(\n      async () => {\n        try {\n          const r = await loadRef.current!(query);\n          if (reqId.current === id) setSettled({ query, results: r, failed: false });\n        } catch {\n          // The one path the old `try/finally` had no answer for: the list kept the\n          // previous query's rows and said nothing (Keksdose proposal §2).\n          if (reqId.current === id) setSettled({ query, results: [], failed: true });\n        }\n      },\n      query ? debounceMs : 0,\n    );\n    return () => clearTimeout(t);\n  }, [query, active, isAsync, tooShort, debounceMs]);\n\n  // Folded as every kit list folds (DUP-5, refactor audit 2026-10): plain `toLowerCase`\n  // here meant \"zurich\" found no Zürich in kastlan's eighteen entity pickers, and the\n  // Turkish \"ı\" no \"IRMAK\".\n  const locale = useKitLocale();\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = foldForSearch(query.trim(), locale);\n    if (!filter || !q) return src;\n    const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);\n    return src.filter((o) => hit(o.label) || hit(o.sublabel));\n  }, [isAsync, options, query, filter, locale]);\n\n  const pending = isAsync && active && !tooShort && settled.query !== query;\n  const failed = isAsync && !tooShort && settled.failed;\n  return {\n    results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n    busy: Boolean(loading) || pending,\n    failed: failed && !pending,\n    tooShort,\n  };\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> extends OptionSourceOptions<V> {\n  /**\n   * Back closes the open anchored list, not the page or the dialog behind it — the rule\n   * `useDropdown` keeps for its lists (keksdose live #309 rework). Default `false`, as the\n   * entity pickers have always been; CurrencySelect, MultiSelect, GroupedPicker and\n   * AmountInput's currency chip, which came over from `useDropdown` (DUP-4), pass `true`\n   * so they keep it. On a phone the `PickerSheet` registers Back itself.\n   */\n  backCloses?: 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  /** See {@link OptionSource}. */\n  failed: boolean;\n  tooShort: boolean;\n  minChars: number;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a\n   *  value the caller just chose after the result list has moved on. */\n  rememberOption: (o: ComboOption<V>) => void;\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  minChars = 0,\n  backCloses = false,\n  ...source\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 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 = usePhoneLayout();\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  // A layer on the Escape stack while the anchored panel is open (Wave 2, DUP-1), so a\n  // dialog around the picker closes only after it (BUG-1). `ComboboxPanel` takes the key\n  // where focus is. On a phone the `PickerSheet` is the layer, as it is the outside.\n  useDismissLayer(open && !isPhone, closeToTrigger);\n  // See `backCloses`. The same close path a pointer dismissal takes.\n  useOverlayHistory(backCloses && open && !isPhone, close);\n\n  // Reset the query each time the panel opens, and the highlighted row whenever the\n  // visible set changes (a new query, or the panel opening or closing). Adjusted while\n  // rendering against the previous values rather than in an effect, so the render that\n  // opens the panel already searches for \"\" and highlights the first row.\n  const [prevOpen, setPrevOpen] = useState(open);\n  const [prevQuery, setPrevQuery] = useState(query);\n  if (open !== prevOpen || query !== prevQuery) {\n    const opened = open && !prevOpen;\n    setPrevOpen(open);\n    setPrevQuery(opened ? \"\" : query);\n    if (opened) setQuery(\"\");\n    setActive(0);\n  }\n\n  // Focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\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) or the\n  // client-side filter — see {@link useOptionSource}.\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    ...source,\n    options,\n    minChars,\n    query,\n    active: open,\n  });\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  const rememberOption = (o: ComboOption<V>) => {\n    cacheRef.current.set(o.value, o);\n  };\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    failed,\n    tooShort,\n    minChars,\n    rect,\n    placement,\n    rememberOption,\n    resolve,\n    closeToTrigger,\n  };\n}\n\n// The family's `error` is every field's `useFieldError` (field-parts) since 0.34 — the\n// restatement that stood here ignored a form library's `aria-invalid` (DUP-8).\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\n/**\n * A group's heading in a picker list stays at the top of the list while its rows scroll\n * under it (kk run 79 gap 3): with first-letter groups over two hundred payees, the\n * heading is the one thing that says where in the alphabet the thumb is. Opaque — the\n * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared\n * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,\n * `InlineEntityCombobox`).\n */\nexport const GROUP_HEADING_STICKY = \"sticky top-0 z-10 bg-surface\";\n\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg\";\n\n// One line at Normal; from Large up a long suggestion wraps and its row grows (text size\n// §10.17, round 0.34 T1), like every other option list of the kit.\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate-until-large px-3 py-1.5 text-start text-sm text-primary\",\n    isActive ? \"bg-active\" : \"hover:bg-hover\",\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\n/** The anchored panel's least width, in rem: 220 px at Normal (§3.2). */\nconst PANEL_MIN_REM = 13.75;\n\n/** The room the anchored panel keeps from either edge of the glass, in px —\n *  `anchoredInline`'s default. */\nconst PANEL_EDGE = 8;\n\n/**\n * How wide the anchored panel is. The phone sheet is the screen's width whatever this\n * says.\n */\nexport interface ComboboxPanelWidth {\n  /** The least width, in rem — never under the trigger's own. Default 13.75 (220 px at\n   *  Normal, §3.2). */\n  minRem?: number;\n  /**\n   * As wide as the rows make it (`max-content`), between the least width and `maxRem`,\n   * instead of exactly the least — measured, so the clamp to the glass still knows it.\n   * CurrencySelect's list grows to show the full currency names (feedback #308);\n   * MultiSelect's rows to show their hints (keksdose #147). A `w-*` class in the panel's\n   * `className` does not apply: the panel is portalled to <body>, where `w-full` would be\n   * the screen.\n   */\n  fit?: boolean;\n  /** With `fit`, the most it grows to, in rem. Default: the glass. */\n  maxRem?: number;\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  /**\n   * The create row is shown but not takeable, and this says why — the lock's reason\n   * when the picker's `createCommit` meets a locked {@link WriteLockProvider}. Rendered\n   * as the row's second line rather than a tooltip, as {@link ComboOption.disabled}\n   * asks of every disabled row: a hover is the one explanation a phone cannot show.\n   */\n  createDisabledReason?: 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  /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n  loadErrorLabel?: string;\n  /**\n   * What a row shows in place of its label and sublabel — for a row that says more than\n   * two strings: CurrencySelect's symbol, code and name side by side. The option's\n   * `icon`, the multi checkbox and the check mark stay the panel's. Its text is the\n   * option's accessible name, so separate the parts with a space.\n   */\n  renderOption?: (o: ComboOption<V>) => ReactNode;\n  /** Controls between the search box and the list, in the anchored panel and the phone\n   *  sheet alike — MultiSelect's \"Select all\" and \"Clear\". */\n  toolbar?: ReactNode;\n  /** See {@link ComboboxPanelWidth}. */\n  width?: ComboboxPanelWidth;\n  /** Which of the trigger's edges the anchored panel hangs from, by reading direction.\n   *  Default `start`; `end` grows the panel toward the start, so a field with content\n   *  after it is not pushed past the page (CurrencySelect, feedback #308). */\n  align?: \"start\" | \"end\";\n  /**\n   * Lay the rows out in columns, one block per `group`, with the group's name above it —\n   * GroupedPicker's panel (feedback #267/#276): a large grouped set reads as a sheet of\n   * short lists side by side rather than one long one. Each block is a `role=\"group\"`\n   * named by its heading. The arrow keys walk the rows in reading order, down each\n   * column. The phone sheet keeps one column with headings.\n   */\n  columns?: boolean;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-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  createDisabledReason,\n  sheetTitle,\n  closeLabel,\n  loadErrorLabel,\n  renderOption,\n  toolbar,\n  width,\n  align = \"start\",\n  columns,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const createLocked = hasContent(createDisabledReason);\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    failed,\n    tooShort,\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 = usePhoneLayout();\n  // Every row the keyboard can land on, the create row included — passed over, like a\n  // disabled option, while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...results, { disabled: createLocked }]\n    : results;\n  const rowCount = rows.length;\n  const optionId = (index: number) => `${listboxId}-option-${index}`;\n  // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n  // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n  // async list turned out to hold.\n  const current = settleEnabled(rows, active);\n  const activeId = current >= 0 ? optionId(current) : 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  // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n  // direction is read off the trigger and put back on the panel below.\n  const dir = useAnchorDir(core.triggerRef, core.open);\n  const remPx = useRemPx();\n  // A `fit` panel's measured width — what it takes to keep it on the glass (see\n  // `ComboboxPanelWidth.fit`). Observed rather than read once: the rows change under the\n  // search, and a filtered list of short names is a narrower panel. `null` where nothing\n  // is laid out (jsdom), and the least width is used.\n  const fit = width?.fit === true && !isPhone;\n  const [fitWidth, setFitWidth] = useState<number | null>(null);\n  const placed = core.open && rect !== null;\n  useLayoutEffect(() => {\n    const el = panelRef.current;\n    if (!fit || !placed || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setFitWidth(measured > 0 ? measured : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [fit, placed, panelRef]);\n\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves, Escape closes. On the panel's search box — in the anchored\n  // panel and, through `onSearchKeyDown`, in the phone sheet's header (BUG-5).\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // Escape goes to the top of the kit's Escape stack — this list, which opened over\n    // any dialog it sits in — and stops HERE (round 0.34 BUG-1, Wave 2 DUP-1). The\n    // panel's events travel up the React tree through that dialog, portal or not, and\n    // one press used to close the dialog and throw the form away, list still open.\n    if (takeEscape(e)) return;\n    // The Enter that confirms an IME composition is the IME's (BUG-9).\n    if (isImeEnter(e)) return;\n    // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n    // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n    // goes to the row after the one already shown as highlighted.\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, current, 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, -1, 1));\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, rowCount, -1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (current < 0) return;\n      if (current < results.length) onChoose(results[current]);\n      else if (showCreate && !createLocked) onCreate();\n    } else if (e.key === \"Tab\" && !isPhone) {\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. The phone sheet is a dialog, and its trap keeps Tab.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // What the list holds, said in ONE place that is both on screen and a polite\n  // live region. Focus stays in the search box, so the list changing under it was\n  // silent — a reader typed and heard nothing back, and a failed lookup was the same\n  // silence as a slow one. Outside the listbox, which may own only options.\n  //\n  // Three different empties, and only one of them is \"nothing matched\": a lookup\n  // that failed must not claim there is nothing to find, and a query under\n  // `minChars` was never asked. With rows showing, the count is for the reader only.\n  const message: ReactNode =\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.\n      <>\n        <span aria-hidden>…</span>\n        <span className=\"sr-only\">{labels.loading}</span>\n      </>\n    ) : busy ? (\n      // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n      // a new query, or a caller's `loading` while it reloads — looked exactly like a\n      // finished list: rows that were about to be replaced, with nothing saying so.\n      // A line of its own under the rows, in words, so it reads without the spinner.\n      <span className=\"flex items-center gap-2\">\n        <Spinner label={null} className=\"size-3.5 border\" />\n        {labels.loading}\n      </span>\n    ) : results.length === 0 && !showCreate ? (\n      failed ? (\n        (loadErrorLabel ?? labels.loadError)\n      ) : tooShort ? (\n        labels.minChars(core.minChars)\n      ) : (\n        (emptyLabel ?? labels.noResults)\n      )\n    ) : null;\n  // `relative` so the sr-only text has a local containing block (see\n  // sr-only-containment.test).\n  const announcement = (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"relative\",\n        message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n        failed ? \"text-danger\" : \"text-muted\",\n      )}\n    >\n      {message ??\n        (results.length > 0 && (\n          <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n        ))}\n    </div>\n  );\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  // One option row — the same in both containers and in both layouts.\n  const optionRow = (o: ComboOption<V>, i: number) => {\n    const selected = isSelected(o.value);\n    return (\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          id={optionId(i)}\n          role=\"option\"\n          aria-selected={selected}\n          aria-disabled={o.disabled || undefined}\n          tabIndex={-1}\n          onMouseDown={(e) => {\n            e.preventDefault();\n            if (!o.disabled) onChoose(o);\n          }}\n          onMouseEnter={() => {\n            if (!o.disabled) setActive(i);\n          }}\n          className={cn(\n            isPhone\n              ? SHEET_ROW_CLASS\n              : columns\n                ? // A cell of a column (GroupedPicker): tighter, so four columns fit.\n                  \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-start text-sm\"\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n            // The row the arrows are on shows it on a phone too: the sheet takes\n            // the keyboard (BUG-5), and a tablet or a desktop at Large has one.\n            o.disabled\n              ? DISABLED_ROW_CLASS\n              : i === current\n                ? \"bg-active\"\n                : !isPhone && \"hover:bg-hover\",\n            // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n            o.disabled && isPhone && DISABLED_ROW_CLASS,\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-inverse text-inverse\"\n                  : \"border-strong bg-surface\",\n              )}\n            >\n              {selected && <Check className=\"size-3\" />}\n            </span>\n          )}\n          {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n          {renderOption ? (\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">{renderOption(o)}</span>\n          ) : (\n            /* Label and sublabel wrap from Large up (text size §10.17, round 0.34 T1). */\n            <span className=\"min-w-0 flex-1\">\n              <span className={cn(\"block truncate-until-large text-primary\", columns && selected && \"font-medium\")}>\n                {o.label}\n              </span>\n              {o.sublabel && (\n                <span className=\"block truncate-until-large text-xs text-placeholder\">{o.sublabel}</span>\n              )}\n            </span>\n          )}\n          {!multi && selected && <Check className=\"size-4 shrink-0 text-brand\" />}\n        </button>\n      </li>\n    );\n  };\n\n  const createRow = 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        aria-disabled={createLocked || undefined}\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          if (!createLocked) onCreate();\n        }}\n        onMouseEnter={() => {\n          if (!createLocked) setActive(results.length);\n        }}\n        className={cn(\n          isPhone\n            ? SHEET_ROW_CLASS\n            : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n          \"text-secondary\",\n          createLocked\n            ? DISABLED_ROW_CLASS\n            : current === results.length\n              ? \"bg-active\"\n              : !isPhone && \"hover:bg-hover\",\n          // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n          createLocked && isPhone && DISABLED_ROW_CLASS,\n        )}\n      >\n        <Plus className=\"size-4 shrink-0\" />\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate-until-large\">{createContent}</span>\n          {createLocked && (\n            <span className=\"block truncate-until-large text-xs text-placeholder\">\n              {createDisabledReason}\n            </span>\n          )}\n        </span>\n      </button>\n    </li>\n  );\n\n  // In columns, a block per run of one group; `results` keeps its source order, so a\n  // run is the rows up to the next change of group.\n  const blocks: { group: string; rows: { o: ComboOption<V>; i: number }[] }[] = [];\n  if (columns && !isPhone) {\n    results.forEach((o, i) => {\n      const group = o.group ?? \"\";\n      const last = blocks[blocks.length - 1];\n      if (last && last.group === group) last.rows.push({ o, i });\n      else blocks.push({ group, rows: [{ o, i }] });\n    });\n  }\n\n  const list = (\n    <ul\n      id={listboxId}\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      // The rows are provisional while a lookup is in flight — whether or not the\n      // previous query's are still showing.\n      aria-busy={busy || undefined}\n      // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n      // Tooltip in a row then portals out in a test exactly as it does in the\n      // browser, instead of joining the option's accessible name (keksdose E8).\n      {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto\",\n        columns && !isPhone ? \"columns-2 gap-4 p-3 md:columns-3 xl:columns-4\" : \"py-1\",\n        isPhone && \"flex-none\",\n      )}\n    >\n      {columns && !isPhone\n        ? blocks.map((block) => (\n            // A column block: its heading is a picture of the group's name, which the\n            // `role=\"group\"` carries for a reader — the listbox may own options and\n            // groups, and a heading of loose text in it is neither.\n            <li key={`${block.group}|${block.rows[0].i}`} role=\"presentation\" className=\"mb-3 break-inside-avoid\">\n              {block.group && (\n                <div aria-hidden className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-muted\">\n                  {block.group}\n                </div>\n              )}\n              <ul role=\"group\" aria-label={block.group || undefined} className=\"space-y-0.5\">\n                {block.rows.map(({ o, i }) => (\n                  <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>{optionRow(o, i)}</Fragment>\n                ))}\n              </ul>\n            </li>\n          ))\n        : results.map((o, i) => {\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                      GROUP_HEADING_STICKY,\n                      \"font-semibold uppercase tracking-wide text-muted\",\n                      isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-caption first:pt-1\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                {optionRow(o, i)}\n              </Fragment>\n            );\n          })}\n      {createRow}\n    </ul>\n  );\n\n  // The search box is NAMED, not only prompted: a placeholder is gone the moment a\n  // character is typed, and jsdom's readers and some real ones never took it for a name\n  // (BUG-12: GroupedPicker's filter had \"no name beyond its placeholder\").\n  const searchText = searchPlaceholder ?? labels.search;\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={searchText}\n        searchLabel={searchText}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n        // The sheet's search box is in its HEADER, outside the list: the keys go to it\n        // there, and it names the list and the active row (BUG-5). A div around the list\n        // used to catch them, and never did — focus is in the box, not in the list.\n        onSearchKeyDown={onKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n        // A multi list stays open as rows are ticked, so the sheet needs a way out\n        // that is not the X in its corner: the kit's sticky \"Done\" (keksdose #412).\n        // A single pick closes the sheet itself.\n        done={multi}\n      >\n        {toolbar}\n        <div className=\"relative\">\n          {list}\n          {announcement}\n        </div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n  // The panel hangs from the trigger's START edge (or, `align=\"end\"`, its end): its left\n  // in a left-to-right form, its right in a right-to-left one, at least 13.75rem wide\n  // (220 px at Normal, in rem so its text keeps its room at Large, §3.2; `width.minRem`)\n  // and never wider than the glass — and clamped to the glass, which in a left-to-right\n  // form it never was (Wave 2, DUP-7). It is placed by the edge it hangs from, so a `fit`\n  // panel grows away from the trigger's edge before its width is measured; a box hung by\n  // its `right` is measured from inside any scrollbar, as the glass's width is.\n  const glass = viewportSize().width - 2 * PANEL_EDGE;\n  const least = Math.min(Math.max(rect.width, (width?.minRem ?? PANEL_MIN_REM) * remPx), glass);\n  const most = Math.max(least, Math.min(width?.maxRem !== undefined ? width.maxRem * remPx : glass, glass));\n  const panelWidth = fit ? Math.min(Math.max(fitWidth ?? least, least), most) : least;\n  const at = anchoredInline(rect, panelWidth, { dir, align, edge: PANEL_EDGE });\n  const inline = (dir === \"rtl\") === (align === \"start\") ? { right: at.right } : { left: at.left };\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: it catches the listbox keys bubbling from the search <input> inside it,\n       which holds focus while the panel is open. */\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      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      dir={dir}\n      onKeyDown={onKeyDown}\n      // A press in a panel opened from a row is inside this list for the core's outside\n      // press, though portalled elsewhere (dev#623).\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        pressInside(panelRef)?.(e);\n      }}\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). Flipped\n      // above, it hangs from its bottom edge, so a list shorter than its cap still meets\n      // the trigger (keksdose K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        ...inline,\n        // A `fit` panel takes its width from its rows between the two bounds; any other\n        // is exactly the least width.\n        ...(fit ? { width: \"max-content\", minWidth: least, maxWidth: most } : { width: panelWidth }),\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchText}\n        aria-label={searchText}\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      {toolbar}\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      {announcement}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["Fragment"]}
+{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useLayoutEffect, 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 { CLIPS_ATTRIBUTE } from \"../lib/clipping\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { usePhoneLayout, useRemPx } from \"../hooks/use-breakpoint\";\nimport { FLOATING_LABEL_STATIC } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { pressInside, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { isImeEnter } from \"../lib/ime\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\n\n/**\n * What an entity picker hands `onChange` when it is cleared — `clearValue` on\n * {@link EntityCombobox} and {@link InlineEntityCombobox}. `null` by default.\n *\n * A closed set rather than any value, on purpose: every member is something no\n * option can be (an option's value is a `string | number`, and `\"\"` is never a real\n * id), so the picker can also READ it back — a field whose `value` is the clear\n * value shows as empty, with no clear button, exactly as `null` does. An arbitrary\n * sentinel could collide with an id and would make that read ambiguous.\n *\n * No `undefined`: a prop set to `undefined` is a prop not passed, so it would read as\n * the default and emit `null` — the one outcome the caller had asked not to get.\n */\nexport type ComboClearValue = null | \"\";\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   * The heading stays at the top of the list while its rows scroll beneath it.\n   *\n   * NOT searched (0.40, kk run 79): a group is where a row is filed, not what it is\n   * called — with first-letter groups (\"A\", \"B\", … \"#\"), typing \"a\" matched every row\n   * filed under A. Searching a category's name means putting it in `sublabel`.\n   */\n  group?: string;\n  /**\n   * Shown but not takeable: rendered dimmed with `aria-disabled`, passed over by the\n   * arrow keys, and a click or Enter on it does nothing. For a row whose existence is\n   * the information — a write-locked result, an account that is closed — where\n   * leaving it out would read as \"there is no such thing\". Say WHY in `sublabel`: a\n   * hover tooltip is the one explanation a phone cannot show.\n   *\n   * Honoured by {@link Autocomplete}, {@link InlineEntityCombobox} and the panel\n   * pickers ({@link EntityCombobox}, {@link MultiEntityCombobox}); on those an already\n   * chosen disabled option stays chosen — the row only refuses to be toggled.\n   */\n  disabled?: boolean;\n}\n\n/** A row the user may take — present and not {@link ComboOption.disabled}. */\nexport const isOptionEnabled = (o: { disabled?: boolean } | undefined): boolean =>\n  o !== undefined && !o.disabled;\n\n/**\n * The next takeable row from `from`, stepping `dir` — what the arrow keys use so a\n * disabled row is passed over, as the APG allows. Stays on `from` at the end of the\n * list (the family's arrows clamp rather than wrap) and answers `-1` when `from` is\n * not a row and there is nothing to step to.\n */\nexport function stepEnabled(\n  rows: readonly { disabled?: boolean }[],\n  from: number,\n  dir: 1 | -1,\n): number {\n  for (let i = from + dir; i >= 0 && i < rows.length; i += dir) {\n    if (!rows[i].disabled) return i;\n  }\n  return from >= 0 && from < rows.length ? from : -1;\n}\n\n/** `i` when that row is takeable, else the nearest takeable one after it, else\n *  before it, else `-1`. For a highlight that starts on a fixed index (the panel\n *  pickers open on row 0) and must never rest on a disabled row. */\nexport function settleEnabled(rows: readonly { disabled?: boolean }[], i: number): number {\n  if (i < 0 || i >= rows.length) return -1;\n  if (!rows[i].disabled) return i;\n  const after = stepEnabled(rows, i, 1);\n  if (after !== i) return after;\n  const before = stepEnabled(rows, i, -1);\n  return before !== i ? before : -1;\n}\n\n/** Classes a disabled row adds over its normal ones — dimmed, no hover, the\n *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */\nexport const DISABLED_ROW_CLASS = \"cursor-not-allowed opacity-50 hover:bg-transparent\";\n\n/**\n * Whether an entity picker offers its create row — one rule for\n * {@link EntityCombobox}, {@link MultiEntityCombobox} and {@link InlineEntityCombobox}.\n *\n * With a query: while the trimmed query names no option exactly (case-insensitive) —\n * an exact hit is a record the list is already showing, and a second way to \"make\" it\n * would mint a duplicate. With NO query: only when the caller named the row for that\n * case (`createEmptyLabel`) — a row reading `Create “”` says nothing, and the kit cannot\n * know the noun (\"Create cash account\") that would make it say something (keksdose G9).\n *\n * `names` is what the query is compared against: the loaded rows for a panel picker\n * (its async list is all it knows), every option for the inline one.\n */\nexport function offersCreate(\n  onCreate: unknown,\n  query: string,\n  names: readonly string[],\n  createEmptyLabel: string | undefined,\n): boolean {\n  if (!onCreate) return false;\n  if (!query) return Boolean(createEmptyLabel);\n  const q = query.toLowerCase();\n  return !names.some((n) => n.toLowerCase() === q);\n}\n\n/**\n * {@link EndHintRow}'s `hint` and `className` for a combobox-family field, keeping the\n * 0.22 rule (keksdose): a field that was passed `hint` at all — even `undefined` — keeps\n * ONE box, so a hint coming and going never rebuilds the control under the cursor.\n *\n * A text hint is a caption after the control and never moved it; the case this covers\n * is the \"?\" (a {@link FieldHint}) on a field with no label line, which sits at the end\n * edge in a row of its own. Without this the row existed only while the \"?\" did, and\n * the control was re-parented — remounted, focus and caret lost — each time it came or\n * went. With `hint` passed the row stays, its end slot empty and its gap closed, so\n * nothing on screen moves either.\n */\nexport function endHintRowProps(\n  hintPassed: boolean,\n  hasLabel: boolean,\n  labelHint: ReactNode | undefined,\n): { hint: ReactNode | undefined; className?: string } {\n  if (hasLabel) return { hint: undefined };\n  if (labelHint !== undefined) return { hint: labelHint };\n  return hintPassed ? { hint: null, className: \"gap-0\" } : { hint: undefined };\n}\n\n/**\n * The family's floating label, as a real `<label for>` (lenkbank): the input is then\n * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks\n * `<label htmlFor>` finds it. Same placement and type as {@link FieldLabel}, which\n * stays a `<span>` for the TRIGGER pickers — a `<button>` is labelable, but those\n * compose their own \"label: value\" name. `pointer-events-none` (from the class)\n * keeps a press on it landing on the field under it, as before.\n */\nexport function ComboboxFieldLabel({\n  htmlFor,\n  className,\n  children,\n  ...rest\n}: ComponentPropsWithoutRef<\"label\"> & { htmlFor: string }) {\n  return (\n    <label {...rest} htmlFor={htmlFor} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </label>\n  );\n}\n\n/**\n * Where a combobox's rows come from, and how a query narrows them. Shared by the\n * trigger pickers ({@link useComboboxCore}) and the inline {@link Autocomplete}, so\n * the two cannot drift in what a failed lookup or a too-short query does.\n */\nexport interface OptionSourceOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered unless `filter` is false), also\n   *  used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored,\n   *  and a rejection is caught and reported as `failed`. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n  /**\n   * Narrow `options` by the query (label/sublabel substring, folded for search: no case,\n   * no accents, the locale's case rules — \"zurich\" finds Zürich, DUP-5). Default `true`.\n   *\n   * `false` shows `options` exactly as given, in the given order — for a list the\n   * caller has already searched and ranked on a server (Keksdose's geocoder), which a\n   * second, client-side substring filter could only get wrong: a provider that\n   * matches \"Bahnhofstr.\" to \"Bahnhofstrasse\" is right, and a label filter would\n   * throw that row away.\n   */\n  filter?: boolean;\n  /**\n   * Below this many (trimmed) characters nothing is offered and `loadOptions` is not\n   * called. Default `0` — the pickers list everything on open. Set it for a source\n   * that is costly or rate-limited: one letter against a geocoder matches half a\n   * continent, and a request per opened panel is a request nobody asked for.\n   */\n  minChars?: number;\n  /** Quiet time after the last keystroke before `loadOptions` runs. Default 150 ms. */\n  debounceMs?: number;\n}\n\nexport interface OptionSource<V extends string | number> {\n  results: ComboOption<V>[];\n  busy: boolean;\n  /** The last lookup for this query REJECTED. The rows are emptied with it: results\n   *  from an earlier query under a failed one would read as the answer to it. */\n  failed: boolean;\n  /** The query is shorter than `minChars`, so nothing was asked. */\n  tooShort: boolean;\n}\n\n/**\n * The rows half of a combobox: client-side filtering, or a debounced, race-safe\n * `loadOptions` with its loading and failure states.\n *\n * `active` gates the async side — a closed list asks nothing. Loading is DERIVED\n * (\"the settled answer is for a different query\") rather than flagged on in the\n * effect, so there is no render between a keystroke and the debounce in which an\n * empty list could claim \"No results\" for a question still being asked.\n */\nexport function useOptionSource<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n  filter = true,\n  minChars = 0,\n  debounceMs = 150,\n  query,\n  active,\n}: OptionSourceOptions<V> & { query: string; active: boolean }): OptionSource<V> {\n  const isAsync = typeof loadOptions === \"function\";\n  const tooShort = query.trim().length < minChars;\n  const [settled, setSettled] = useState<{\n    query: string | null;\n    results: ComboOption<V>[];\n    failed: boolean;\n  }>({ query: null, results: [], failed: false });\n  const loadRef = useRef(loadOptions);\n  useEffect(() => {\n    loadRef.current = loadOptions;\n  });\n  const reqId = useRef(0);\n\n  useEffect(() => {\n    // Bumped even when nothing is asked, so a request still in flight from a longer\n    // query cannot land after the user has deleted back below `minChars`.\n    const id = ++reqId.current;\n    if (!active || !isAsync || tooShort) return;\n    const t = setTimeout(\n      async () => {\n        try {\n          const r = await loadRef.current!(query);\n          if (reqId.current === id) setSettled({ query, results: r, failed: false });\n        } catch {\n          // The one path the old `try/finally` had no answer for: the list kept the\n          // previous query's rows and said nothing (Keksdose proposal §2).\n          if (reqId.current === id) setSettled({ query, results: [], failed: true });\n        }\n      },\n      query ? debounceMs : 0,\n    );\n    return () => clearTimeout(t);\n  }, [query, active, isAsync, tooShort, debounceMs]);\n\n  // Folded as every kit list folds (DUP-5, refactor audit 2026-10): plain `toLowerCase`\n  // here meant \"zurich\" found no Zürich in kastlan's eighteen entity pickers, and the\n  // Turkish \"ı\" no \"IRMAK\".\n  const locale = useKitLocale();\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    // Every word of the query, in the label or the sublabel (0.51.4): \"migros zürich\".\n    const words = searchWords(query, locale);\n    if (!filter || words.length === 0) return src;\n    return src.filter((o) => matchesSearch(words, [o.label, o.sublabel], locale));\n  }, [isAsync, options, query, filter, locale]);\n\n  const pending = isAsync && active && !tooShort && settled.query !== query;\n  const failed = isAsync && !tooShort && settled.failed;\n  return {\n    results: tooShort ? [] : isAsync ? (failed ? [] : settled.results) : clientResults,\n    busy: Boolean(loading) || pending,\n    failed: failed && !pending,\n    tooShort,\n  };\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> extends OptionSourceOptions<V> {\n  /**\n   * Back closes the open anchored list, not the page or the dialog behind it — the rule\n   * `useDropdown` keeps for its lists (keksdose live #309 rework). Default `false`, as the\n   * entity pickers have always been; CurrencySelect, MultiSelect, GroupedPicker and\n   * AmountInput's currency chip, which came over from `useDropdown` (DUP-4), pass `true`\n   * so they keep it. On a phone the `PickerSheet` registers Back itself.\n   */\n  backCloses?: 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  /** See {@link OptionSource}. */\n  failed: boolean;\n  tooShort: boolean;\n  minChars: number;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  /** Put an option in the label cache, so {@link ComboboxCore.resolve} still knows a\n   *  value the caller just chose after the result list has moved on. */\n  rememberOption: (o: ComboOption<V>) => void;\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  minChars = 0,\n  backCloses = false,\n  ...source\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 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 = usePhoneLayout();\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  // A layer on the Escape stack while the anchored panel is open (Wave 2, DUP-1), so a\n  // dialog around the picker closes only after it (BUG-1). `ComboboxPanel` takes the key\n  // where focus is. On a phone the `PickerSheet` is the layer, as it is the outside.\n  useDismissLayer(open && !isPhone, closeToTrigger);\n  // See `backCloses`. The same close path a pointer dismissal takes.\n  useOverlayHistory(backCloses && open && !isPhone, close);\n\n  // Reset the query each time the panel opens, and the highlighted row whenever the\n  // visible set changes (a new query, or the panel opening or closing). Adjusted while\n  // rendering against the previous values rather than in an effect, so the render that\n  // opens the panel already searches for \"\" and highlights the first row.\n  const [prevOpen, setPrevOpen] = useState(open);\n  const [prevQuery, setPrevQuery] = useState(query);\n  if (open !== prevOpen || query !== prevQuery) {\n    const opened = open && !prevOpen;\n    setPrevOpen(open);\n    setPrevQuery(opened ? \"\" : query);\n    if (opened) setQuery(\"\");\n    setActive(0);\n  }\n\n  // Focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\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) or the\n  // client-side filter — see {@link useOptionSource}.\n  const { results, busy, failed, tooShort } = useOptionSource<V>({\n    ...source,\n    options,\n    minChars,\n    query,\n    active: open,\n  });\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  const rememberOption = (o: ComboOption<V>) => {\n    cacheRef.current.set(o.value, o);\n  };\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    failed,\n    tooShort,\n    minChars,\n    rect,\n    placement,\n    rememberOption,\n    resolve,\n    closeToTrigger,\n  };\n}\n\n// The family's `error` is every field's `useFieldError` (field-parts) since 0.34 — the\n// restatement that stood here ignored a form library's `aria-invalid` (DUP-8).\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\n/**\n * A group's heading in a picker list stays at the top of the list while its rows scroll\n * under it (kk run 79 gap 3): with first-letter groups over two hundred payees, the\n * heading is the one thing that says where in the alphabet the thumb is. Opaque — the\n * list's own `bg-surface` — so the rows pass beneath it rather than through it. Shared\n * by every list that heads groups (the panel and the sheet, `Combobox`, `Autocomplete`,\n * `InlineEntityCombobox`).\n */\nexport const GROUP_HEADING_STICKY = \"sticky top-0 z-10 bg-surface\";\n\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-subtle bg-surface py-1 shadow-lg\";\n\n// One line at Normal; from Large up a long suggestion wraps and its row grows (text size\n// §10.17, round 0.34 T1), like every other option list of the kit.\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate-until-large px-3 py-1.5 text-start text-sm text-primary\",\n    isActive ? \"bg-active\" : \"hover:bg-hover\",\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\n/** The anchored panel's least width, in rem: 220 px at Normal (§3.2). */\nconst PANEL_MIN_REM = 13.75;\n\n/** The room the anchored panel keeps from either edge of the glass, in px —\n *  `anchoredInline`'s default. */\nconst PANEL_EDGE = 8;\n\n/**\n * How wide the anchored panel is. The phone sheet is the screen's width whatever this\n * says.\n */\nexport interface ComboboxPanelWidth {\n  /** The least width, in rem — never under the trigger's own. Default 13.75 (220 px at\n   *  Normal, §3.2). */\n  minRem?: number;\n  /**\n   * As wide as the rows make it (`max-content`), between the least width and `maxRem`,\n   * instead of exactly the least — measured, so the clamp to the glass still knows it.\n   * CurrencySelect's list grows to show the full currency names (feedback #308);\n   * MultiSelect's rows to show their hints (keksdose #147). A `w-*` class in the panel's\n   * `className` does not apply: the panel is portalled to <body>, where `w-full` would be\n   * the screen.\n   */\n  fit?: boolean;\n  /** With `fit`, the most it grows to, in rem. Default: the glass. */\n  maxRem?: number;\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  /**\n   * The create row is shown but not takeable, and this says why — the lock's reason\n   * when the picker's `createCommit` meets a locked {@link WriteLockProvider}. Rendered\n   * as the row's second line rather than a tooltip, as {@link ComboOption.disabled}\n   * asks of every disabled row: a hover is the one explanation a phone cannot show.\n   */\n  createDisabledReason?: 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  /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n  loadErrorLabel?: string;\n  /**\n   * What a row shows in place of its label and sublabel — for a row that says more than\n   * two strings: CurrencySelect's symbol, code and name side by side. The option's\n   * `icon`, the multi checkbox and the check mark stay the panel's. Its text is the\n   * option's accessible name, so separate the parts with a space.\n   */\n  renderOption?: (o: ComboOption<V>) => ReactNode;\n  /** Controls between the search box and the list, in the anchored panel and the phone\n   *  sheet alike — MultiSelect's \"Select all\" and \"Clear\". */\n  toolbar?: ReactNode;\n  /** See {@link ComboboxPanelWidth}. */\n  width?: ComboboxPanelWidth;\n  /** Which of the trigger's edges the anchored panel hangs from, by reading direction.\n   *  Default `start`; `end` grows the panel toward the start, so a field with content\n   *  after it is not pushed past the page (CurrencySelect, feedback #308). */\n  align?: \"start\" | \"end\";\n  /**\n   * Lay the rows out in columns, one block per `group`, with the group's name above it —\n   * GroupedPicker's panel (feedback #267/#276): a large grouped set reads as a sheet of\n   * short lists side by side rather than one long one. Each block is a `role=\"group\"`\n   * named by its heading. The arrow keys walk the rows in reading order, down each\n   * column. The phone sheet keeps one column with headings.\n   */\n  columns?: boolean;\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Start-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  createDisabledReason,\n  sheetTitle,\n  closeLabel,\n  loadErrorLabel,\n  renderOption,\n  toolbar,\n  width,\n  align = \"start\",\n  columns,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const createLocked = hasContent(createDisabledReason);\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    failed,\n    tooShort,\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 = usePhoneLayout();\n  // Every row the keyboard can land on, the create row included — passed over, like a\n  // disabled option, while a write lock holds it.\n  const rows: readonly { disabled?: boolean }[] = showCreate\n    ? [...results, { disabled: createLocked }]\n    : results;\n  const rowCount = rows.length;\n  const optionId = (index: number) => `${listboxId}-option-${index}`;\n  // The core opens on row 0 and knows nothing of `disabled`; the highlight is settled\n  // HERE, derived, so it can never rest on a row that cannot be taken — whatever the\n  // async list turned out to hold.\n  const current = settleEnabled(rows, active);\n  const activeId = current >= 0 ? optionId(current) : 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  // Portalled to <body>, the panel leaves the subtree its `dir` came from — so the\n  // direction is read off the trigger and put back on the panel below.\n  const dir = useAnchorDir(core.triggerRef, core.open);\n  const remPx = useRemPx();\n  // A `fit` panel's measured width — what it takes to keep it on the glass (see\n  // `ComboboxPanelWidth.fit`). Observed rather than read once: the rows change under the\n  // search, and a filtered list of short names is a narrower panel. `null` where nothing\n  // is laid out (jsdom), and the least width is used.\n  const fit = width?.fit === true && !isPhone;\n  const [fitWidth, setFitWidth] = useState<number | null>(null);\n  const placed = core.open && rect !== null;\n  useLayoutEffect(() => {\n    const el = panelRef.current;\n    if (!fit || !placed || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setFitWidth(measured > 0 ? measured : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [fit, placed, panelRef]);\n\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves, Escape closes. On the panel's search box — in the anchored\n  // panel and, through `onSearchKeyDown`, in the phone sheet's header (BUG-5).\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // Escape goes to the top of the kit's Escape stack — this list, which opened over\n    // any dialog it sits in — and stops HERE (round 0.34 BUG-1, Wave 2 DUP-1). The\n    // panel's events travel up the React tree through that dialog, portal or not, and\n    // one press used to close the dialog and throw the form away, list still open.\n    if (takeEscape(e)) return;\n    // The Enter that confirms an IME composition is the IME's (BUG-9).\n    if (isImeEnter(e)) return;\n    // Disabled rows are passed over (`stepEnabled`), and each step starts from the\n    // SETTLED highlight, not the raw index, so the first Down from a disabled row 0\n    // goes to the row after the one already shown as highlighted.\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, current, 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive(current < 0 ? -1 : stepEnabled(rows, current, -1));\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, -1, 1));\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      setActive(stepEnabled(rows, rowCount, -1));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (current < 0) return;\n      if (current < results.length) onChoose(results[current]);\n      else if (showCreate && !createLocked) onCreate();\n    } else if (e.key === \"Tab\" && !isPhone) {\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. The phone sheet is a dialog, and its trap keeps Tab.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // What the list holds, said in ONE place that is both on screen and a polite\n  // live region. Focus stays in the search box, so the list changing under it was\n  // silent — a reader typed and heard nothing back, and a failed lookup was the same\n  // silence as a slow one. Outside the listbox, which may own only options.\n  //\n  // Three different empties, and only one of them is \"nothing matched\": a lookup\n  // that failed must not claim there is nothing to find, and a query under\n  // `minChars` was never asked. With rows showing, the count is for the reader only.\n  const message: ReactNode =\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.\n      <>\n        <span aria-hidden>…</span>\n        <span className=\"sr-only\">{labels.loading}</span>\n      </>\n    ) : busy ? (\n      // Loading with the LAST query's rows still up. This was `null`, so a refetch —\n      // a new query, or a caller's `loading` while it reloads — looked exactly like a\n      // finished list: rows that were about to be replaced, with nothing saying so.\n      // A line of its own under the rows, in words, so it reads without the spinner.\n      <span className=\"flex items-center gap-2\">\n        <Spinner label={null} className=\"size-3.5 border\" />\n        {labels.loading}\n      </span>\n    ) : results.length === 0 && !showCreate ? (\n      failed ? (\n        (loadErrorLabel ?? labels.loadError)\n      ) : tooShort ? (\n        labels.minChars(core.minChars)\n      ) : (\n        (emptyLabel ?? labels.noResults)\n      )\n    ) : null;\n  // `relative` so the sr-only text has a local containing block (see\n  // sr-only-containment.test).\n  const announcement = (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"relative\",\n        message !== null && cn(\"py-2 text-sm\", isPhone ? \"px-4\" : \"px-3\"),\n        failed ? \"text-danger\" : \"text-muted\",\n      )}\n    >\n      {message ??\n        (results.length > 0 && (\n          <span className=\"sr-only\">{labels.resultCount(results.length)}</span>\n        ))}\n    </div>\n  );\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  // One option row — the same in both containers and in both layouts.\n  const optionRow = (o: ComboOption<V>, i: number) => {\n    const selected = isSelected(o.value);\n    return (\n      <li role=\"presentation\">\n        <button\n          type=\"button\"\n          id={optionId(i)}\n          role=\"option\"\n          aria-selected={selected}\n          aria-disabled={o.disabled || undefined}\n          tabIndex={-1}\n          onMouseDown={(e) => {\n            e.preventDefault();\n            if (!o.disabled) onChoose(o);\n          }}\n          onMouseEnter={() => {\n            if (!o.disabled) setActive(i);\n          }}\n          className={cn(\n            isPhone\n              ? SHEET_ROW_CLASS\n              : columns\n                ? // A cell of a column (GroupedPicker): tighter, so four columns fit.\n                  \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-start text-sm\"\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n            // The row the arrows are on shows it on a phone too: the sheet takes\n            // the keyboard (BUG-5), and a tablet or a desktop at Large has one.\n            o.disabled\n              ? DISABLED_ROW_CLASS\n              : i === current\n                ? \"bg-active\"\n                : !isPhone && \"hover:bg-hover\",\n            // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n            o.disabled && isPhone && DISABLED_ROW_CLASS,\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-inverse text-inverse\"\n                  : \"border-strong bg-surface\",\n              )}\n            >\n              {selected && <Check className=\"size-3\" />}\n            </span>\n          )}\n          {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n          {renderOption ? (\n            <span className=\"flex min-w-0 flex-1 items-center gap-2\">{renderOption(o)}</span>\n          ) : (\n            /* Label and sublabel wrap from Large up (text size §10.17, round 0.34 T1). */\n            <span className=\"min-w-0 flex-1\">\n              <span className={cn(\"block truncate-until-large text-primary\", columns && selected && \"font-medium\")}>\n                {o.label}\n              </span>\n              {o.sublabel && (\n                <span className=\"block truncate-until-large text-xs text-placeholder\">{o.sublabel}</span>\n              )}\n            </span>\n          )}\n          {!multi && selected && <Check className=\"size-4 shrink-0 text-brand\" />}\n        </button>\n      </li>\n    );\n  };\n\n  const createRow = 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        aria-disabled={createLocked || undefined}\n        tabIndex={-1}\n        onMouseDown={(e) => {\n          e.preventDefault();\n          if (!createLocked) onCreate();\n        }}\n        onMouseEnter={() => {\n          if (!createLocked) setActive(results.length);\n        }}\n        className={cn(\n          isPhone\n            ? SHEET_ROW_CLASS\n            : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n          \"text-secondary\",\n          createLocked\n            ? DISABLED_ROW_CLASS\n            : current === results.length\n              ? \"bg-active\"\n              : !isPhone && \"hover:bg-hover\",\n          // After SHEET_ROW_CLASS, so its hover is the one cancelled.\n          createLocked && isPhone && DISABLED_ROW_CLASS,\n        )}\n      >\n        <Plus className=\"size-4 shrink-0\" />\n        <span className=\"min-w-0 flex-1\">\n          <span className=\"block truncate-until-large\">{createContent}</span>\n          {createLocked && (\n            <span className=\"block truncate-until-large text-xs text-placeholder\">\n              {createDisabledReason}\n            </span>\n          )}\n        </span>\n      </button>\n    </li>\n  );\n\n  // In columns, a block per run of one group; `results` keeps its source order, so a\n  // run is the rows up to the next change of group.\n  const blocks: { group: string; rows: { o: ComboOption<V>; i: number }[] }[] = [];\n  if (columns && !isPhone) {\n    results.forEach((o, i) => {\n      const group = o.group ?? \"\";\n      const last = blocks[blocks.length - 1];\n      if (last && last.group === group) last.rows.push({ o, i });\n      else blocks.push({ group, rows: [{ o, i }] });\n    });\n  }\n\n  const list = (\n    <ul\n      id={listboxId}\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      // The rows are provisional while a lookup is in flight — whether or not the\n      // previous query's are still showing.\n      aria-busy={busy || undefined}\n      // It scrolls, and says so where jsdom can see it (see `CLIPS_ATTRIBUTE`): a\n      // Tooltip in a row then portals out in a test exactly as it does in the\n      // browser, instead of joining the option's accessible name (keksdose E8).\n      {...{ [CLIPS_ATTRIBUTE]: \"\" }}\n      className={cn(\n        \"min-h-0 flex-1 overflow-y-auto\",\n        columns && !isPhone ? \"columns-2 gap-4 p-3 md:columns-3 xl:columns-4\" : \"py-1\",\n        isPhone && \"flex-none\",\n      )}\n    >\n      {columns && !isPhone\n        ? blocks.map((block) => (\n            // A column block: its heading is a picture of the group's name, which the\n            // `role=\"group\"` carries for a reader — the listbox may own options and\n            // groups, and a heading of loose text in it is neither.\n            <li key={`${block.group}|${block.rows[0].i}`} role=\"presentation\" className=\"mb-3 break-inside-avoid\">\n              {block.group && (\n                <div aria-hidden className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-muted\">\n                  {block.group}\n                </div>\n              )}\n              <ul role=\"group\" aria-label={block.group || undefined} className=\"space-y-0.5\">\n                {block.rows.map(({ o, i }) => (\n                  <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>{optionRow(o, i)}</Fragment>\n                ))}\n              </ul>\n            </li>\n          ))\n        : results.map((o, i) => {\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                      GROUP_HEADING_STICKY,\n                      \"font-semibold uppercase tracking-wide text-muted\",\n                      isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-caption first:pt-1\",\n                    )}\n                  >\n                    {o.group}\n                  </li>\n                )}\n                {optionRow(o, i)}\n              </Fragment>\n            );\n          })}\n      {createRow}\n    </ul>\n  );\n\n  // The search box is NAMED, not only prompted: a placeholder is gone the moment a\n  // character is typed, and jsdom's readers and some real ones never took it for a name\n  // (BUG-12: GroupedPicker's filter had \"no name beyond its placeholder\").\n  const searchText = searchPlaceholder ?? labels.search;\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={searchText}\n        searchLabel={searchText}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n        // The sheet's search box is in its HEADER, outside the list: the keys go to it\n        // there, and it names the list and the active row (BUG-5). A div around the list\n        // used to catch them, and never did — focus is in the box, not in the list.\n        onSearchKeyDown={onKeyDown}\n        listboxId={listboxId}\n        activeId={activeId}\n        // A multi list stays open as rows are ticked, so the sheet needs a way out\n        // that is not the X in its corner: the kit's sticky \"Done\" (keksdose #412).\n        // A single pick closes the sheet itself.\n        done={multi}\n      >\n        {toolbar}\n        <div className=\"relative\">\n          {list}\n          {announcement}\n        </div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n  // The panel hangs from the trigger's START edge (or, `align=\"end\"`, its end): its left\n  // in a left-to-right form, its right in a right-to-left one, at least 13.75rem wide\n  // (220 px at Normal, in rem so its text keeps its room at Large, §3.2; `width.minRem`)\n  // and never wider than the glass — and clamped to the glass, which in a left-to-right\n  // form it never was (Wave 2, DUP-7). It is placed by the edge it hangs from, so a `fit`\n  // panel grows away from the trigger's edge before its width is measured; a box hung by\n  // its `right` is measured from inside any scrollbar, as the glass's width is.\n  const glass = viewportSize().width - 2 * PANEL_EDGE;\n  const least = Math.min(Math.max(rect.width, (width?.minRem ?? PANEL_MIN_REM) * remPx), glass);\n  const most = Math.max(least, Math.min(width?.maxRem !== undefined ? width.maxRem * remPx : glass, glass));\n  const panelWidth = fit ? Math.min(Math.max(fitWidth ?? least, least), most) : least;\n  const at = anchoredInline(rect, panelWidth, { dir, align, edge: PANEL_EDGE });\n  const inline = (dir === \"rtl\") === (align === \"start\") ? { right: at.right } : { left: at.left };\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: it catches the listbox keys bubbling from the search <input> inside it,\n       which holds focus while the panel is open. */\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      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).\n      data-kit-layer=\"\"\n      dir={dir}\n      onKeyDown={onKeyDown}\n      // A press in a panel opened from a row is inside this list for the core's outside\n      // press, though portalled elsewhere (dev#623).\n      onPointerDownCapture={(e) => {\n        rest.onPointerDownCapture?.(e);\n        pressInside(panelRef)?.(e);\n      }}\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). Flipped\n      // above, it hangs from its bottom edge, so a list shorter than its cap still meets\n      // the trigger (keksdose K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.above ? undefined : placement.top,\n        bottom: placement.above ? placement.bottom : undefined,\n        ...inline,\n        // A `fit` panel takes its width from its rows between the two bounds; any other\n        // is exactly the least width.\n        ...(fit ? { width: \"max-content\", minWidth: least, maxWidth: most } : { width: panelWidth }),\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-subtle bg-surface shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchText}\n        aria-label={searchText}\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      {toolbar}\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      {announcement}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["Fragment"]}

package/dist/components/currency-option-list.js

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
-import { foldForSearch } from "../lib/text-match.js";
+import { matchesSearch, searchWords } from "../lib/text-match.js";
 import { ComboboxPanel } from "./combobox-core.js";
 import { CURRENCIES } from "../currencies.js";
 function CurrencyFlag({ country, className, ...rest }) {
@@ -57,8 +57,8 @@ function CurrencyOptionList({
   const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);
   const query = core.query;
   const results = useMemo(() => {
-    const q = foldForSearch(query.trim(), locale);
-    const hits = q ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q))) : named;
+    const words = searchWords(query, locale);
+    const hits = words.length > 0 ? named.filter(({ c, name }) => matchesSearch(words, [c.code, name, c.symbol], locale)) : named;
     return hits.map(
       ({ c, name }) => ({
         value: c.code,

package/dist/components/currency-option-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/currency-option-list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { foldForSearch } from \"../lib/text-match\";\nimport { ComboboxPanel, type ComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { CURRENCIES, type CurrencyOption } from \"../currencies\";\n\n// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect\n// re-exports the data under its own name, as it always has; the list is package-private.\n// Its own module, so AmountInput can render the list without a cycle through\n// currency-select. The data itself is ../currencies since 0.35: an entry of its own that\n// imports nothing, which an app's build can read in Node (keksdose's flag subset).\nexport { CURRENCIES };\nexport type { CurrencyOption };\n\nexport interface CurrencyFlagProps extends ComponentPropsWithRef<\"span\"> {\n  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */\n  country: string;\n}\n\nexport function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {\n  return (\n    <span\n      {...rest}\n      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the\n      // code printed next to it, and a reader that met both would hear the currency\n      // twice.\n      aria-hidden\n      className={cn(\"fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0\", `fi-${country}`, className)}\n    />\n  );\n}\n\nconst CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));\n\nexport function getCurrency(code: string | null | undefined): CurrencyOption | undefined {\n  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;\n}\n\n/** The name to SHOW for a currency: the caller's translation if they have one for\n *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for\n *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with\n *  AmountInput, which renders the same list from the same data.\n *\n *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an\n *  app that never set one keeps the shipped English names it has always shown,\n *  rather than whatever language the test runner or the browser happens to be in. */\nexport function currencyName(\n  c: CurrencyOption,\n  names?: Record<string, string>,\n  locale?: string,\n): string {\n  const own = names?.[c.code];\n  if (own !== undefined) return own;\n  if (locale) {\n    try {\n      const shown = new Intl.DisplayNames([locale], { type: \"currency\" }).of(c.code);\n      if (shown && shown !== c.code) return shown;\n    } catch {\n      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.\n    }\n  }\n  return c.name;\n}\n\nexport interface CurrencyOptionListProps {\n  /** The host's `useComboboxCore`: its trigger, its open state, its query. */\n  core: ComboboxCore<string>;\n  /** What the host's trigger names in `aria-controls`. */\n  listboxId: string;\n  /** The chosen code, if any — selected and checked in the list. */\n  value: string | null | undefined;\n  /** A currency was picked. The host closes the list. */\n  onChoose: (code: string) => void;\n  /** Only these ISO codes, in this order; codes the kit has no definition for are\n   *  dropped. Default every one of {@link CURRENCIES}. */\n  codes?: readonly string[];\n  /** Translated names by code — see {@link currencyName}. */\n  currencyNames?: Record<string, string>;\n  locale?: string;\n  searchPlaceholder: string;\n  /** The phone sheet's title — the field's name. */\n  sheetTitle: ReactNode;\n}\n\n/**\n * The currency list — its filter and its rows — that CurrencySelect and AmountInput's\n * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,\n * DUP-4 + BUG-12).\n *\n * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a\n * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`\n * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had\n * given CurrencySelect a panel that grows to the full names. And both were lists of plain\n * buttons under a trigger that promised a listbox. On the shared panel they are a listbox\n * of options, the chosen one selected, with the arrow keys, the live result count, the\n * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped\n * the absolute panel's first third away).\n *\n * The panel hangs from the trigger's END edge and grows toward the start, as wide as the\n * names need up to 20rem and the glass (feedback #308: a field with content after it is\n * not pushed past the page).\n */\nexport function CurrencyOptionList({\n  core,\n  listboxId,\n  value,\n  onChoose,\n  codes,\n  currencyNames,\n  locale,\n  searchPlaceholder,\n  sheetTitle,\n}: CurrencyOptionListProps) {\n  // Keyed on the codes' CONTENTS: an inline `options={[\"EUR\", \"CHF\"]}` is a new array\n  // every render.\n  const codesKey = codes?.join(\",\");\n  const pool = useMemo(\n    () =>\n      codesKey === undefined\n        ? CURRENCIES\n        : // The caller's order; codes the kit has no definition for are dropped.\n          codesKey\n            .split(\",\")\n            .map((code) => getCurrency(code))\n            .filter((c): c is CurrencyOption => c !== undefined),\n    [codesKey],\n  );\n  const named = useMemo(\n    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),\n    [pool, currencyNames, locale],\n  );\n  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);\n\n  // The code, the name the row SHOWS (so a translated list is searchable in the language\n  // it is written in) and the symbol — folded as every kit list folds (DUP-5).\n  const query = core.query;\n  const results = useMemo(() => {\n    const q = foldForSearch(query.trim(), locale);\n    const hits = q\n      ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q)))\n      : named;\n    return hits.map(\n      ({ c, name }): ComboOption<string> => ({\n        value: c.code,\n        label: name,\n        icon: <CurrencyFlag country={c.country} />,\n      }),\n    );\n  }, [named, query, locale]);\n\n  const chosen = getCurrency(value)?.code;\n  return (\n    <ComboboxPanel\n      // The core with the currency filter's rows in place of its own.\n      core={{ ...core, results }}\n      listboxId={listboxId}\n      searchPlaceholder={searchPlaceholder}\n      sheetTitle={sheetTitle}\n      isSelected={(code) => code === chosen}\n      onChoose={(o) => onChoose(o.value)}\n      showCreate={false}\n      onCreate={() => {}}\n      createContent={null}\n      width={{ fit: true, maxRem: 20 }}\n      align=\"end\"\n      renderOption={(o) => {\n        const row = byCode.get(o.value);\n        if (!row) return o.label;\n        return (\n          <>\n            <span className=\"w-8 shrink-0 font-mono text-muted\">{row.c.symbol}</span>{\" \"}\n            <span className=\"shrink-0 font-medium text-primary\">{row.c.code}</span>{\" \"}\n            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a\n                reader scans for, and it never shrinks. */}\n            <span className=\"min-w-0 truncate-until-large text-muted\">{row.name}</span>\n          </>\n        );\n      }}\n    />\n  );\n}\n"],"mappings":";AAsBI,SAoJM,UApJN,KAoJM,YApJN;AAtBJ,SAAS,eAAe;AAExB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAC9B,SAAS,qBAA0D;AACnE,SAAS,kBAAuC;AAezC,SAAS,aAAa,EAAE,SAAS,WAAW,GAAG,KAAK,GAAsB;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MAIJ,eAAW;AAAA,MACX,WAAW,GAAG,6FAA6F,MAAM,OAAO,IAAI,SAAS;AAAA;AAAA,EACvI;AAEJ;AAEA,MAAM,mBAAmB,IAAI,IAAI,WAAW,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5D,SAAS,YAAY,MAA6D;AACvF,SAAO,OAAO,iBAAiB,IAAI,KAAK,YAAY,CAAC,IAAI;AAC3D;AAUO,SAAS,aACd,GACA,OACA,QACQ;AACR,QAAM,MAAM,QAAQ,EAAE,IAAI;AAC1B,MAAI,QAAQ,OAAW,QAAO;AAC9B,MAAI,QAAQ;AACV,QAAI;AACF,YAAM,QAAQ,IAAI,KAAK,aAAa,CAAC,MAAM,GAAG,EAAE,MAAM,WAAW,CAAC,EAAE,GAAG,EAAE,IAAI;AAC7E,UAAI,SAAS,UAAU,EAAE,KAAM,QAAO;AAAA,IACxC,QAAQ;AAAA,IAER;AAAA,EACF;AACA,SAAO,EAAE;AACX;AAwCO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAG1B,QAAM,WAAW,OAAO,KAAK,GAAG;AAChC,QAAM,OAAO;AAAA,IACX,MACE,aAAa,SACT;AAAA;AAAA,MAEA,SACG,MAAM,GAAG,EACT,IAAI,CAAC,SAAS,YAAY,IAAI,CAAC,EAC/B,OAAO,CAAC,MAA2B,MAAM,MAAS;AAAA;AAAA,IAC3D,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,QAAQ;AAAA,IACZ,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,aAAa,GAAG,eAAe,MAAM,EAAE,EAAE;AAAA,IAC3E,CAAC,MAAM,eAAe,MAAM;AAAA,EAC9B;AACA,QAAM,SAAS,QAAQ,MAAM,IAAI,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;AAI9E,QAAM,QAAQ,KAAK;AACnB,QAAM,UAAU,QAAQ,MAAM;AAC5B,UAAM,IAAI,cAAc,MAAM,KAAK,GAAG,MAAM;AAC5C,UAAM,OAAO,IACT,MAAM,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC,EAAE,MAAM,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,cAAc,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IACxG;AACJ,WAAO,KAAK;AAAA,MACV,CAAC,EAAE,GAAG,KAAK,OAA4B;AAAA,QACrC,OAAO,EAAE;AAAA,QACT,OAAO;AAAA,QACP,MAAM,oBAAC,gBAAa,SAAS,EAAE,SAAS;AAAA,MAC1C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,OAAO,MAAM,CAAC;AAEzB,QAAM,SAAS,YAAY,KAAK,GAAG;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,EAAE,GAAG,MAAM,QAAQ;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,CAAC,SAAS,SAAS;AAAA,MAC/B,UAAU,CAAC,MAAM,SAAS,EAAE,KAAK;AAAA,MACjC,YAAY;AAAA,MACZ,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,eAAe;AAAA,MACf,OAAO,EAAE,KAAK,MAAM,QAAQ,GAAG;AAAA,MAC/B,OAAM;AAAA,MACN,cAAc,CAAC,MAAM;AACnB,cAAM,MAAM,OAAO,IAAI,EAAE,KAAK;AAC9B,YAAI,CAAC,IAAK,QAAO,EAAE;AACnB,eACE,iCACE;AAAA,8BAAC,UAAK,WAAU,qCAAqC,cAAI,EAAE,QAAO;AAAA,UAAQ;AAAA,UAC1E,oBAAC,UAAK,WAAU,qCAAqC,cAAI,EAAE,MAAK;AAAA,UAAQ;AAAA,UAGxE,oBAAC,UAAK,WAAU,2CAA2C,cAAI,MAAK;AAAA,WACtE;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/currency-option-list.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { matchesSearch, searchWords } from \"../lib/text-match\";\nimport { ComboboxPanel, type ComboboxCore, type ComboOption } from \"./combobox-core\";\nimport { CURRENCIES, type CurrencyOption } from \"../currencies\";\n\n// The one list both currency pickers render (round 0.34 Wave 2, DUP-4). CurrencySelect\n// re-exports the data under its own name, as it always has; the list is package-private.\n// Its own module, so AmountInput can render the list without a cycle through\n// currency-select. The data itself is ../currencies since 0.35: an entry of its own that\n// imports nothing, which an app's build can read in Node (keksdose's flag subset).\nexport { CURRENCIES };\nexport type { CurrencyOption };\n\nexport interface CurrencyFlagProps extends ComponentPropsWithRef<\"span\"> {\n  /** ISO 3166-1 alpha-2, lowercase — the class flag-icons keys its sprite by. */\n  country: string;\n}\n\nexport function CurrencyFlag({ country, className, ...rest }: CurrencyFlagProps) {\n  return (\n    <span\n      {...rest}\n      // Stays `aria-hidden` whatever a caller passes: the flag is a picture of the\n      // code printed next to it, and a reader that met both would hear the currency\n      // twice.\n      aria-hidden\n      className={cn(\"fi inline-block w-5 h-[0.9375rem] rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)] shrink-0\", `fi-${country}`, className)}\n    />\n  );\n}\n\nconst CURRENCY_BY_CODE = new Map(CURRENCIES.map((c) => [c.code, c]));\n\nexport function getCurrency(code: string | null | undefined): CurrencyOption | undefined {\n  return code ? CURRENCY_BY_CODE.get(code.toUpperCase()) : undefined;\n}\n\n/** The name to SHOW for a currency: the caller's translation if they have one for\n *  that code; else, when a `locale` is known, the name `Intl.DisplayNames` has for\n *  it in that locale; else the English name {@link CURRENCIES} carries. Shared with\n *  AmountInput, which renders the same list from the same data.\n *\n *  `Intl` only when a locale was actually GIVEN (by prop or `<UiKitProvider>`): an\n *  app that never set one keeps the shipped English names it has always shown,\n *  rather than whatever language the test runner or the browser happens to be in. */\nexport function currencyName(\n  c: CurrencyOption,\n  names?: Record<string, string>,\n  locale?: string,\n): string {\n  const own = names?.[c.code];\n  if (own !== undefined) return own;\n  if (locale) {\n    try {\n      const shown = new Intl.DisplayNames([locale], { type: \"currency\" }).of(c.code);\n      if (shown && shown !== c.code) return shown;\n    } catch {\n      // A malformed tag, or a runtime without `DisplayNames`: the shipped name.\n    }\n  }\n  return c.name;\n}\n\nexport interface CurrencyOptionListProps {\n  /** The host's `useComboboxCore`: its trigger, its open state, its query. */\n  core: ComboboxCore<string>;\n  /** What the host's trigger names in `aria-controls`. */\n  listboxId: string;\n  /** The chosen code, if any — selected and checked in the list. */\n  value: string | null | undefined;\n  /** A currency was picked. The host closes the list. */\n  onChoose: (code: string) => void;\n  /** Only these ISO codes, in this order; codes the kit has no definition for are\n   *  dropped. Default every one of {@link CURRENCIES}. */\n  codes?: readonly string[];\n  /** Translated names by code — see {@link currencyName}. */\n  currencyNames?: Record<string, string>;\n  locale?: string;\n  searchPlaceholder: string;\n  /** The phone sheet's title — the field's name. */\n  sheetTitle: ReactNode;\n}\n\n/**\n * The currency list — its filter and its rows — that CurrencySelect and AmountInput's\n * currency chip both render, on the picker family's `ComboboxPanel` (round 0.34 Wave 2,\n * DUP-4 + BUG-12).\n *\n * The chip's list was a hand copy of CurrencySelect's, and it had drifted: the name kept a\n * plain `truncate` where T1 made CurrencySelect's wrap from Large up, it took no `options`\n * subset, it had no check mark and no listbox id, and it was a fixed 16rem where #308 had\n * given CurrencySelect a panel that grows to the full names. And both were lists of plain\n * buttons under a trigger that promised a listbox. On the shared panel they are a listbox\n * of options, the chosen one selected, with the arrow keys, the live result count, the\n * phone sheet (live #200) and portal anchoring (dev#548: an `overflow` ancestor clipped\n * the absolute panel's first third away).\n *\n * The panel hangs from the trigger's END edge and grows toward the start, as wide as the\n * names need up to 20rem and the glass (feedback #308: a field with content after it is\n * not pushed past the page).\n */\nexport function CurrencyOptionList({\n  core,\n  listboxId,\n  value,\n  onChoose,\n  codes,\n  currencyNames,\n  locale,\n  searchPlaceholder,\n  sheetTitle,\n}: CurrencyOptionListProps) {\n  // Keyed on the codes' CONTENTS: an inline `options={[\"EUR\", \"CHF\"]}` is a new array\n  // every render.\n  const codesKey = codes?.join(\",\");\n  const pool = useMemo(\n    () =>\n      codesKey === undefined\n        ? CURRENCIES\n        : // The caller's order; codes the kit has no definition for are dropped.\n          codesKey\n            .split(\",\")\n            .map((code) => getCurrency(code))\n            .filter((c): c is CurrencyOption => c !== undefined),\n    [codesKey],\n  );\n  const named = useMemo(\n    () => pool.map((c) => ({ c, name: currencyName(c, currencyNames, locale) })),\n    [pool, currencyNames, locale],\n  );\n  const byCode = useMemo(() => new Map(named.map((n) => [n.c.code, n])), [named]);\n\n  // The code, the name the row SHOWS (so a translated list is searchable in the language\n  // it is written in) and the symbol — folded as every kit list folds (DUP-5).\n  const query = core.query;\n  const results = useMemo(() => {\n    // Every word of the query, in the code, the name or the symbol (0.51.4).\n    const words = searchWords(query, locale);\n    const hits = words.length > 0 ? named.filter(({ c, name }) => matchesSearch(words, [c.code, name, c.symbol], locale)) : named;\n    return hits.map(\n      ({ c, name }): ComboOption<string> => ({\n        value: c.code,\n        label: name,\n        icon: <CurrencyFlag country={c.country} />,\n      }),\n    );\n  }, [named, query, locale]);\n\n  const chosen = getCurrency(value)?.code;\n  return (\n    <ComboboxPanel\n      // The core with the currency filter's rows in place of its own.\n      core={{ ...core, results }}\n      listboxId={listboxId}\n      searchPlaceholder={searchPlaceholder}\n      sheetTitle={sheetTitle}\n      isSelected={(code) => code === chosen}\n      onChoose={(o) => onChoose(o.value)}\n      showCreate={false}\n      onCreate={() => {}}\n      createContent={null}\n      width={{ fit: true, maxRem: 20 }}\n      align=\"end\"\n      renderOption={(o) => {\n        const row = byCode.get(o.value);\n        if (!row) return o.label;\n        return (\n          <>\n            <span className=\"w-8 shrink-0 font-mono text-muted\">{row.c.symbol}</span>{\" \"}\n            <span className=\"shrink-0 font-medium text-primary\">{row.c.code}</span>{\" \"}\n            {/* The name wraps from Large up (round 0.34 T1); the code beside it is what a\n                reader scans for, and it never shrinks. */}\n            <span className=\"min-w-0 truncate-until-large text-muted\">{row.name}</span>\n          </>\n        );\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-fit.js

@@ -30,13 +30,15 @@ function useColumnFit({
     () => active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : [],
     [active, order, hidden]
   );
-  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;
-  const latest = useRef({ order, current, growKey, active, scroller });
+  const growCol = columns.find((c) => c.grow && !hiddenCols.has(c.key));
+  const growKey = growCol?.key;
+  const growMin = growCol?.growMin ?? GROW_MIN_REM;
+  const latest = useRef({ order, current, growKey, growMin, active, scroller });
   useLayoutEffect(() => {
-    latest.current = { order, current, growKey, active, scroller };
+    latest.current = { order, current, growKey, growMin, active, scroller };
   });
   const measure = useCallback(() => {
-    const { order: order2, current: current2, growKey: growKey2, active: active2, scroller: scroller2 } = latest.current;
+    const { order: order2, current: current2, growKey: growKey2, growMin: growMin2, active: active2, scroller: scroller2 } = latest.current;
     const flip = lastShown.current;
     lastShown.current = null;
     for (const k of stuck.current.keys()) if (!current2.includes(k)) stuck.current.delete(k);
@@ -47,7 +49,7 @@ function useColumnFit({
     if (!table || avail <= 0) return;
     const growTh = growKey2 ? headRefs.get(growKey2) : void 0;
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-    let need = growTh ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem : table.offsetWidth;
+    let need = growTh ? table.offsetWidth - growTh.offsetWidth + growMin2 * rem : table.offsetWidth;
     if (!growTh && need <= avail + 0.5 && current2.length > 0) {
       const before = table.style.width;
       table.style.width = "min-content";

package/dist/components/data-table-fit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-fit.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's fit to its own width (0.48, keksdose live #451: \"On expanded sidebar for\n// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the\n// width selectively\"). Two column options, both opt-in:\n//\n// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on\n//   its cells: in an auto table layout that is \"the rest of the row\", never its content's\n//   width), so one long title can no longer widen the table.\n// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,\n//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out\n//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),\n//   and brings them back in the reverse order as soon as the table, as it is NOW, has\n//   room for them (its need re-measured, plus the column's own header width from when\n//   it was left out), so narrower content (a filter, another page) counts as much as a\n//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a\n//   narrower window, the Columns drawer and Large text all count the same. A column\n//   whose return the very next measure undoes stays out until the table has more room\n//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`). And\n//   the TABLE's own width, through the same observer (0.51.2): anything that widens it\n//   after a measure — rows drawn a frame later, `virtualize` locking its column widths —\n//   is measured again, so the table never stays wider than its scroller.\n\n/** The least a `grow` column keeps before the table starts leaving columns out: about\n *  a sentence of a title. In rem, so Large text asks for more. */\nexport const GROW_MIN_REM = 10;\n\n/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an\n *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The\n *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`\n *  column is left to leave out: the table then scrolls sideways rather than crushing the\n *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */\nexport const GROW_HEAD_CLASS = \"w-full max-w-0 min-w-[10rem]\";\nexport const GROW_CELL_CLASS = \"w-full max-w-0 truncate-until-large\";\n\n/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column\n *  squeezes the rest to their min-content width, so any text with a space broke in two\n *  even at 1920px (\"CHF 2'568.38\", \"Peter Mueller\", a date with its time). One line at\n *  Normal, so a column is never narrower than its text and `fitPriority` measures what\n *  the columns really need; from Large up the cell wraps as before (§10.17). The headers\n *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes\n *  `not-large:whitespace-normal` in its `className`. */\nexport const GROW_PEER_CELL_CLASS = \"not-large:whitespace-nowrap\";\n\n// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of\n// badges reads as well stacked, and held to one line it widened the user roster's Status\n// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).\n\n/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */\nexport function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {\n  return columns\n    .map((col, index) => ({ col, index }))\n    .filter(({ col }) => col.fitPriority != null)\n    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)\n    .map(({ col }) => col);\n}\n\n/**\n * Which columns the table leaves out for width, and the Columns panel's \"keep it\".\n *\n * A column the user TICKS in the Columns panel is theirs: it is never left out for width\n * again while the table is mounted (`keep`): the table makes room by leaving out the next\n * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and\n * drops the keep. Keeps are not persisted: on the next visit the table fits again.\n */\nexport function useColumnFit<T>({\n  columns,\n  hiddenCols,\n  headRefs,\n  scroller,\n  enabled,\n  content,\n}: {\n  columns: DataTableColumn<T>[];\n  /** The user's hidden columns: never candidates (they are out already). */\n  hiddenCols: Set<string>;\n  headRefs: Map<string, HTMLTableCellElement>;\n  /** The desktop scroller, read after render (it is declared below the call). */\n  scroller: () => HTMLElement | null;\n  /** The wide layout. On a phone (the card list) nothing is left out for width. */\n  enabled: boolean;\n  /**\n   * What can change the columns' widths besides the scroller (0.48.2): the rows on\n   * screen, the columns, the stored widths, the text size. Compared item by item after\n   * each render, and the table is measured only when one changed — a selection tick no\n   * longer forces a layout of the whole table. Without it, every render measures.\n   */\n  content?: readonly unknown[];\n}): {\n  /** The columns left out for width now — empty while off. */\n  autoHidden: Set<string>;\n  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */\n  keep: (key: string, on: boolean) => void;\n} {\n  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());\n  const [hidden, setHidden] = useState<string[]>([]);\n  // A column's own header width, written when it is left out: it comes back once the\n  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the\n  // whole table's need at hide time, which went stale when the content narrowed).\n  const ownWidth = useRef(new Map<string, number>());\n  // A column whose return the very next measure undid, at the same scroller width: the\n  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out\n  // until the table has more. Dropped once the column is no longer left out for width.\n  const stuck = useRef(new Map<string, number>());\n  // What the last measure brought back, each column with the room it had then, and at\n  // which scroller width: read (and cleared) by the measure right after it.\n  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);\n\n  const hasFit = columns.some((c) => c.fitPriority != null);\n  const active = enabled && hasFit;\n  const order = useMemo(\n    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),\n    [columns, hiddenCols, kept],\n  );\n  // Only the candidates still in play, in hide order — a column the user hid or kept\n  // since, or one the app dropped, is no longer \"hidden for width\".\n  const current = useMemo(\n    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),\n    [active, order, hidden],\n  );\n  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;\n\n  // What `measure` reads, refreshed after each render (before the measure below runs):\n  // the ResizeObserver's callback is set up once and must see the current columns.\n  const latest = useRef({ order, current, growKey, active, scroller });\n  useLayoutEffect(() => {\n    latest.current = { order, current, growKey, active, scroller };\n  });\n\n  const measure = useCallback(() => {\n    const { order, current, growKey, active, scroller } = latest.current;\n    // Only the measure right after a bring-back can undo it.\n    const flip = lastShown.current;\n    lastShown.current = null;\n    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);\n    const el = scroller();\n    if (!active || !el) return;\n    const table = el.querySelector(\"table\");\n    const avail = el.clientWidth;\n    // Not laid out (display:none, jsdom): nothing to fit to.\n    if (!table || avail <= 0) return;\n    const growTh = growKey ? headRefs.get(growKey) : undefined;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    let need = growTh\n      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem\n      : table.offsetWidth;\n    if (!growTh && need <= avail + 0.5 && current.length > 0) {\n      // A `w-full` table is at least the scroller's width, which says nothing about how\n      // much room its content leaves: probe its content's width (what it takes once it\n      // overflows) for the bring-back below. Read and put back in one layout pass.\n      const before = table.style.width;\n      table.style.width = \"min-content\";\n      need = table.offsetWidth;\n      table.style.width = before;\n    }\n    if (need > avail + 0.5) {\n      // Leave out, in order, until the rest fits: each column saves its header's width\n      // (the others are at their content's width while a `grow` column takes the rest).\n      const next = [...current];\n      for (const col of order) {\n        if (need <= avail + 0.5) break;\n        if (next.includes(col.key)) continue;\n        const w = headRefs.get(col.key)?.offsetWidth ?? 0;\n        ownWidth.current.set(col.key, w);\n        need -= w;\n        next.push(col.key);\n      }\n      if (next.length === current.length) return;\n      // The last measure brought these back at this same width, and the table cannot\n      // hold them: their header width fell short of what they cost drawn (see below).\n      if (flip && Math.abs(flip.avail - avail) <= 0.5)\n        for (const k of next.slice(current.length)) {\n          const room = flip.rooms.get(k);\n          if (room != null) stuck.current.set(k, room);\n        }\n      setHidden(next);\n      return;\n    }\n    // Bring back, the last left out first, while the table as it is now has room for\n    // them by their recorded header width. A column that costs more drawn than that is\n    // left out again by the next measure, before paint. That alone does not settle it:\n    // the re-hide records its header's width again, and the header can measure the same\n    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the\n    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's\n    // update limit (#185). So a column whose return the next measure undid, at the same\n    // scroller width, waits for more room than it had then: a wider scroller or narrower\n    // content. Whatever the error in its width, that is one invisible flip per room it is\n    // tried at.\n    let n = current.length;\n    const rooms = new Map<string, number>();\n    while (n > 0) {\n      const k = current[n - 1];\n      const w = ownWidth.current.get(k);\n      if (w == null || need + w > avail + 0.5) break;\n      const room = stuck.current.get(k);\n      if (room != null && avail - need <= room + 0.5) break;\n      rooms.set(k, avail - need);\n      need += w;\n      n--;\n    }\n    if (n === current.length) return;\n    lastShown.current = { avail, rooms };\n    setHidden(current.slice(0, n));\n  }, [headRefs]);\n\n  // The table the observer below watches, kept to this render's.\n  const observer = useRef<ResizeObserver | null>(null);\n  const watched = useRef<{ table: Element; width: number } | null>(null);\n  const watchTable = useCallback(() => {\n    const ro = observer.current;\n    const table = latest.current.scroller()?.querySelector(\"table\") ?? null;\n    if (!ro || table === (watched.current?.table ?? null)) return;\n    if (watched.current) ro.unobserve(watched.current.table);\n    // Its width now, as the measure that just ran saw it: a report of the same width is\n    // not news, one that differs is (it may come a frame later, rows drawn by then).\n    watched.current = table ? { table, width: (table as HTMLElement).offsetWidth } : null;\n    if (table) ro.observe(table);\n  }, []);\n\n  // After a render that changed what is drawn: rows, a filter or a page can widen a\n  // column as much as a resize. Before paint, so a column the table cannot hold is never\n  // drawn first. A render that changed none of it (a ticked box, a focused row) skips the\n  // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).\n  const lastContent = useRef<readonly unknown[] | null>(null);\n  useLayoutEffect(() => {\n    // The table the observer watches is this render's (a table drawn after a loading\n    // state, or remounted, is a new element).\n    watchTable();\n    const now = content ? [...content, order, current, growKey, active] : null;\n    const prev = lastContent.current;\n    lastContent.current = now;\n    if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;\n    measure();\n  });\n\n  // The scroller, and the table in it (0.51.2, keksdose's register). The fit measured\n  // after a render that changed `content` and when the SCROLLER changed size, but the table\n  // also widens on its own after that: under `virtualize` the rows actually drawn are the\n  // window's, set a frame later, and its column-width lock lands a frame later still —\n  // neither is `content`, and the scroller keeps its size. A load whose first measure saw\n  // the table before its rows were in kept every `fitPriority` column and then overflowed\n  // for good (893px in 757 at 1124, 1058 in 913 at 1280, on 0.50.1 as on 0.51). Watched,\n  // a table that grows past what was measured is measured again. Only a WIDTH change of\n  // the table counts: its height moves with every row the window draws, and each measure\n  // lays the whole table out.\n  useEffect(() => {\n    const el = latest.current.scroller();\n    if (!active || !el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      let changed = false;\n      for (const entry of entries) {\n        if (entry.target === el) changed = true;\n        else if (watched.current && entry.target === watched.current.table) {\n          // The border box, as `offsetWidth` reads it (the content rect leaves the border out).\n          const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n          if (Math.abs(width - watched.current.width) > 0.5) {\n            watched.current.width = width;\n            changed = true;\n          }\n        }\n      }\n      if (changed) measure();\n    });\n    ro.observe(el);\n    observer.current = ro;\n    watchTable();\n    return () => {\n      ro.disconnect();\n      observer.current = null;\n      watched.current = null;\n    };\n  }, [active, measure, watchTable]);\n\n  const keep = useCallback((key: string, on: boolean) => {\n    setKept((s) => {\n      if (s.has(key) === on) return s;\n      const next = new Set(s);\n      if (on) next.add(key);\n      else next.delete(key);\n      return next;\n    });\n  }, []);\n\n  const autoHidden = useMemo(() => new Set(current), [current]);\n  return { autoHidden, keep };\n}\n"],"mappings":"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","names":["order","current","growKey","active","scroller"]}
+{"version":3,"sources":["../../src/components/data-table-fit.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's fit to its own width (0.48, keksdose live #451: \"On expanded sidebar for\n// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the\n// width selectively\"). Two column options, both opt-in:\n//\n// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on\n//   its cells: in an auto table layout that is \"the rest of the row\", never its content's\n//   width), so one long title can no longer widen the table.\n// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,\n//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out\n//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),\n//   and brings them back in the reverse order as soon as the table, as it is NOW, has\n//   room for them (its need re-measured, plus the column's own header width from when\n//   it was left out), so narrower content (a filter, another page) counts as much as a\n//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a\n//   narrower window, the Columns drawer and Large text all count the same. A column\n//   whose return the very next measure undoes stays out until the table has more room\n//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`). And\n//   the TABLE's own width, through the same observer (0.51.2): anything that widens it\n//   after a measure — rows drawn a frame later, `virtualize` locking its column widths —\n//   is measured again, so the table never stays wider than its scroller.\n\n/** The least a `grow` column keeps before the table starts leaving columns out: about\n *  a sentence of a title. In rem, so Large text asks for more. */\nexport const GROW_MIN_REM = 10;\n\n/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an\n *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The\n *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`\n *  column is left to leave out: the table then scrolls sideways rather than crushing the\n *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */\nexport const GROW_HEAD_CLASS = \"w-full max-w-0 min-w-[10rem]\";\nexport const GROW_CELL_CLASS = \"w-full max-w-0 truncate-until-large\";\n\n/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column\n *  squeezes the rest to their min-content width, so any text with a space broke in two\n *  even at 1920px (\"CHF 2'568.38\", \"Peter Mueller\", a date with its time). One line at\n *  Normal, so a column is never narrower than its text and `fitPriority` measures what\n *  the columns really need; from Large up the cell wraps as before (§10.17). The headers\n *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes\n *  `not-large:whitespace-normal` in its `className`. */\nexport const GROW_PEER_CELL_CLASS = \"not-large:whitespace-nowrap\";\n\n// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of\n// badges reads as well stacked, and held to one line it widened the user roster's Status\n// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).\n\n/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */\nexport function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {\n  return columns\n    .map((col, index) => ({ col, index }))\n    .filter(({ col }) => col.fitPriority != null)\n    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)\n    .map(({ col }) => col);\n}\n\n/**\n * Which columns the table leaves out for width, and the Columns panel's \"keep it\".\n *\n * A column the user TICKS in the Columns panel is theirs: it is never left out for width\n * again while the table is mounted (`keep`): the table makes room by leaving out the next\n * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and\n * drops the keep. Keeps are not persisted: on the next visit the table fits again.\n */\nexport function useColumnFit<T>({\n  columns,\n  hiddenCols,\n  headRefs,\n  scroller,\n  enabled,\n  content,\n}: {\n  columns: DataTableColumn<T>[];\n  /** The user's hidden columns: never candidates (they are out already). */\n  hiddenCols: Set<string>;\n  headRefs: Map<string, HTMLTableCellElement>;\n  /** The desktop scroller, read after render (it is declared below the call). */\n  scroller: () => HTMLElement | null;\n  /** The wide layout. On a phone (the card list) nothing is left out for width. */\n  enabled: boolean;\n  /**\n   * What can change the columns' widths besides the scroller (0.48.2): the rows on\n   * screen, the columns, the stored widths, the text size. Compared item by item after\n   * each render, and the table is measured only when one changed — a selection tick no\n   * longer forces a layout of the whole table. Without it, every render measures.\n   */\n  content?: readonly unknown[];\n}): {\n  /** The columns left out for width now — empty while off. */\n  autoHidden: Set<string>;\n  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */\n  keep: (key: string, on: boolean) => void;\n} {\n  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());\n  const [hidden, setHidden] = useState<string[]>([]);\n  // A column's own header width, written when it is left out: it comes back once the\n  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the\n  // whole table's need at hide time, which went stale when the content narrowed).\n  const ownWidth = useRef(new Map<string, number>());\n  // A column whose return the very next measure undid, at the same scroller width: the\n  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out\n  // until the table has more. Dropped once the column is no longer left out for width.\n  const stuck = useRef(new Map<string, number>());\n  // What the last measure brought back, each column with the room it had then, and at\n  // which scroller width: read (and cleared) by the measure right after it.\n  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);\n\n  const hasFit = columns.some((c) => c.fitPriority != null);\n  const active = enabled && hasFit;\n  const order = useMemo(\n    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),\n    [columns, hiddenCols, kept],\n  );\n  // Only the candidates still in play, in hide order — a column the user hid or kept\n  // since, or one the app dropped, is no longer \"hidden for width\".\n  const current = useMemo(\n    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),\n    [active, order, hidden],\n  );\n  const growCol = columns.find((c) => c.grow && !hiddenCols.has(c.key));\n  const growKey = growCol?.key;\n  const growMin = growCol?.growMin ?? GROW_MIN_REM;\n\n  // What `measure` reads, refreshed after each render (before the measure below runs):\n  // the ResizeObserver's callback is set up once and must see the current columns.\n  const latest = useRef({ order, current, growKey, growMin, active, scroller });\n  useLayoutEffect(() => {\n    latest.current = { order, current, growKey, growMin, active, scroller };\n  });\n\n  const measure = useCallback(() => {\n    const { order, current, growKey, growMin, active, scroller } = latest.current;\n    // Only the measure right after a bring-back can undo it.\n    const flip = lastShown.current;\n    lastShown.current = null;\n    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);\n    const el = scroller();\n    if (!active || !el) return;\n    const table = el.querySelector(\"table\");\n    const avail = el.clientWidth;\n    // Not laid out (display:none, jsdom): nothing to fit to.\n    if (!table || avail <= 0) return;\n    const growTh = growKey ? headRefs.get(growKey) : undefined;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    let need = growTh\n      ? table.offsetWidth - growTh.offsetWidth + growMin * rem\n      : table.offsetWidth;\n    if (!growTh && need <= avail + 0.5 && current.length > 0) {\n      // A `w-full` table is at least the scroller's width, which says nothing about how\n      // much room its content leaves: probe its content's width (what it takes once it\n      // overflows) for the bring-back below. Read and put back in one layout pass.\n      const before = table.style.width;\n      table.style.width = \"min-content\";\n      need = table.offsetWidth;\n      table.style.width = before;\n    }\n    if (need > avail + 0.5) {\n      // Leave out, in order, until the rest fits: each column saves its header's width\n      // (the others are at their content's width while a `grow` column takes the rest).\n      const next = [...current];\n      for (const col of order) {\n        if (need <= avail + 0.5) break;\n        if (next.includes(col.key)) continue;\n        const w = headRefs.get(col.key)?.offsetWidth ?? 0;\n        ownWidth.current.set(col.key, w);\n        need -= w;\n        next.push(col.key);\n      }\n      if (next.length === current.length) return;\n      // The last measure brought these back at this same width, and the table cannot\n      // hold them: their header width fell short of what they cost drawn (see below).\n      if (flip && Math.abs(flip.avail - avail) <= 0.5)\n        for (const k of next.slice(current.length)) {\n          const room = flip.rooms.get(k);\n          if (room != null) stuck.current.set(k, room);\n        }\n      setHidden(next);\n      return;\n    }\n    // Bring back, the last left out first, while the table as it is now has room for\n    // them by their recorded header width. A column that costs more drawn than that is\n    // left out again by the next measure, before paint. That alone does not settle it:\n    // the re-hide records its header's width again, and the header can measure the same\n    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the\n    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's\n    // update limit (#185). So a column whose return the next measure undid, at the same\n    // scroller width, waits for more room than it had then: a wider scroller or narrower\n    // content. Whatever the error in its width, that is one invisible flip per room it is\n    // tried at.\n    let n = current.length;\n    const rooms = new Map<string, number>();\n    while (n > 0) {\n      const k = current[n - 1];\n      const w = ownWidth.current.get(k);\n      if (w == null || need + w > avail + 0.5) break;\n      const room = stuck.current.get(k);\n      if (room != null && avail - need <= room + 0.5) break;\n      rooms.set(k, avail - need);\n      need += w;\n      n--;\n    }\n    if (n === current.length) return;\n    lastShown.current = { avail, rooms };\n    setHidden(current.slice(0, n));\n  }, [headRefs]);\n\n  // The table the observer below watches, kept to this render's.\n  const observer = useRef<ResizeObserver | null>(null);\n  const watched = useRef<{ table: Element; width: number } | null>(null);\n  const watchTable = useCallback(() => {\n    const ro = observer.current;\n    const table = latest.current.scroller()?.querySelector(\"table\") ?? null;\n    if (!ro || table === (watched.current?.table ?? null)) return;\n    if (watched.current) ro.unobserve(watched.current.table);\n    // Its width now, as the measure that just ran saw it: a report of the same width is\n    // not news, one that differs is (it may come a frame later, rows drawn by then).\n    watched.current = table ? { table, width: (table as HTMLElement).offsetWidth } : null;\n    if (table) ro.observe(table);\n  }, []);\n\n  // After a render that changed what is drawn: rows, a filter or a page can widen a\n  // column as much as a resize. Before paint, so a column the table cannot hold is never\n  // drawn first. A render that changed none of it (a ticked box, a focused row) skips the\n  // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).\n  const lastContent = useRef<readonly unknown[] | null>(null);\n  useLayoutEffect(() => {\n    // The table the observer watches is this render's (a table drawn after a loading\n    // state, or remounted, is a new element).\n    watchTable();\n    const now = content ? [...content, order, current, growKey, active] : null;\n    const prev = lastContent.current;\n    lastContent.current = now;\n    if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;\n    measure();\n  });\n\n  // The scroller, and the table in it (0.51.2, keksdose's register). The fit measured\n  // after a render that changed `content` and when the SCROLLER changed size, but the table\n  // also widens on its own after that: under `virtualize` the rows actually drawn are the\n  // window's, set a frame later, and its column-width lock lands a frame later still —\n  // neither is `content`, and the scroller keeps its size. A load whose first measure saw\n  // the table before its rows were in kept every `fitPriority` column and then overflowed\n  // for good (893px in 757 at 1124, 1058 in 913 at 1280, on 0.50.1 as on 0.51). Watched,\n  // a table that grows past what was measured is measured again. Only a WIDTH change of\n  // the table counts: its height moves with every row the window draws, and each measure\n  // lays the whole table out.\n  useEffect(() => {\n    const el = latest.current.scroller();\n    if (!active || !el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver((entries) => {\n      let changed = false;\n      for (const entry of entries) {\n        if (entry.target === el) changed = true;\n        else if (watched.current && entry.target === watched.current.table) {\n          // The border box, as `offsetWidth` reads it (the content rect leaves the border out).\n          const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n          if (Math.abs(width - watched.current.width) > 0.5) {\n            watched.current.width = width;\n            changed = true;\n          }\n        }\n      }\n      if (changed) measure();\n    });\n    ro.observe(el);\n    observer.current = ro;\n    watchTable();\n    return () => {\n      ro.disconnect();\n      observer.current = null;\n      watched.current = null;\n    };\n  }, [active, measure, watchTable]);\n\n  const keep = useCallback((key: string, on: boolean) => {\n    setKept((s) => {\n      if (s.has(key) === on) return s;\n      const next = new Set(s);\n      if (on) next.add(key);\n      else next.delete(key);\n      return next;\n    });\n  }, []);\n\n  const autoHidden = useMemo(() => new Set(current), [current]);\n  return { autoHidden, keep };\n}\n"],"mappings":"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","names":["order","current","growKey","growMin","active","scroller"]}