@eifi1/ui-kit 0.22.0 → 0.24.0

package/dist/components/column-mapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/column-mapper.tsx"],"sourcesContent":["import { useCallback, useEffect, useEffectEvent, useRef, useState } from \"react\";\nimport type { ChangeEvent, DragEvent, HTMLAttributes, ReactNode } from \"react\";\nimport { Upload } from \"lucide-react\";\n\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  assignColumnRole,\n  guessMapping,\n  missingRoles,\n  readMappedTable,\n  readTextFile,\n  roleOfColumn,\n} from \"../lib/column-mapping\";\nimport type {\n  ColumnMapperResult,\n  ColumnMapping,\n  ColumnRole,\n} from \"../lib/column-mapping\";\nimport { scrollIntoStrip, useStripFade } from \"../lib/strip-fade\";\nimport { parseTextTable } from \"../lib/table-text\";\nimport type { TableSeparator, TextTable } from \"../lib/table-text\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Checkbox } from \"./checkbox\";\nimport { Disclosure } from \"./disclosure\";\nimport { FileButton, useFilePicker } from \"./file-button\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from \"./table\";\nimport { Select, Textarea } from \"./ui\";\n\n/**\n * A table pasted, dropped or chosen as a file, and which of its columns plays which\n * part — Kurvenschmiede's columns input and keksdose's bank-file mapping step, once.\n *\n * Kurvenschmiede (`features/control/columns-input.tsx` + `csv.ts`) reads a recorder's\n * export into a playground signal (time, value) and a comparison (time, setpoint,\n * actual): a textarea, a file button, a parse, a select per role, and a line that says\n * which decimal convention was assumed and how many lines were skipped. keksdose\n * (`import-map-step.tsx`) shows a bank's CSV as a table with a role select on every\n * column's header, the file's real values under it, ignored columns dimmed, and what\n * the import still needs named under it. Same problem, two hand-built answers.\n *\n * Two layers, so both shapes fit:\n *\n * * {@link ColumnMapper} — the whole single panel: paste, drop or choose → parse\n *   ({@link parseTextTable}: separator, decimal convention, header line, all stated\n *   back) → preview with a role per column → `onChange(result)`. Kurvenschmiede's.\n * * {@link ColumnRoleTable} — the preview with the role selects alone, controlled, over\n *   rows the caller already has. keksdose's map step, whose rows come from its server's\n *   sniff (encodings, quoted multi-line cells, skipped title rows) and whose mapping\n *   lives in the wizard's state between steps.\n *\n * The rules under both are headless in `lib/column-mapping.ts`: a role moves rather\n * than doubling up, what is missing is named, and the rows a numeric role cannot read\n * are reported by line number rather than dropped.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ColumnMapperLabels {\n  /** The paste box's label. */\n  paste: string;\n  /** The caption under the paste box. */\n  pasteHint: string;\n  /** The file button. */\n  chooseFile: string;\n  /** A chosen or dropped file whose bytes could not be read at all. */\n  readError: (name: string) => string;\n  /** The checkbox that says whether the first line names the columns. */\n  headerRow: string;\n  /** What was read: so many columns and rows. */\n  summary: (columns: number, rows: number) => string;\n  /** The separator that was assumed. */\n  separatorSemicolon: string;\n  separatorComma: string;\n  separatorTab: string;\n  separatorSpace: string;\n  /** The decimal convention that was assumed — with an example, because \"decimal\n   *  comma\" alone is a term, and `1,5` is something a reader recognises. */\n  decimalComma: string;\n  decimalPoint: string;\n  /** The title over the lines that could not be read. */\n  unreadCount: (count: number) => string;\n  /** One of them. */\n  unreadLine: (line: number) => string;\n  /** Past the first hundred listed. */\n  unreadMore: (count: number) => string;\n  /** The text has content, and none of it is a row. */\n  noRows: string;\n  /** The preview table's name. */\n  table: string;\n  /** A column the table names no header for. */\n  columnN: (n: number) => string;\n  /** The role select on a column's header — its accessible name. */\n  roleOf: (column: string) => string;\n  /** The role select's \"no role\" option. */\n  ignore: string;\n  /** A required role in the select — only while some role is NOT required: when\n   *  every one is, the mark tells no role from another (0.24, Kurvenschmiede). */\n  requiredRole: (role: string) => string;\n  /** Under the preview, when it shows fewer rows than were read. */\n  previewOf: (shown: number, total: number) => string;\n  /** A required group's roles, already joined as a list with \"or\". */\n  oneOf: (roles: string) => string;\n  /** What the table still needs, already joined as a list with \"and\". */\n  missing: (roles: string) => string;\n}\n\nexport const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {\n  paste: \"Paste a table\",\n  pasteHint:\n    \"Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.\",\n  chooseFile: \"Choose a file\",\n  readError: (name) => `“${name}” could not be read`,\n  headerRow: \"The first line names the columns\",\n  summary: (columns, rows) =>\n    `${columns} ${columns === 1 ? \"column\" : \"columns\"}, ${rows} ${rows === 1 ? \"row\" : \"rows\"}`,\n  separatorSemicolon: \"separated by semicolons\",\n  separatorComma: \"separated by commas\",\n  separatorTab: \"separated by tabs\",\n  separatorSpace: \"separated by spaces\",\n  decimalComma: \"decimal comma (1,5)\",\n  decimalPoint: \"decimal point (1.5)\",\n  unreadCount: (count) =>\n    count === 1\n      ? \"1 line could not be read\"\n      : `${count} lines could not be read`,\n  unreadLine: (line) => `Line ${line} could not be read`,\n  unreadMore: (count) => `…and ${count} more`,\n  noRows: \"No line of this text reads as a row of the table.\",\n  table: \"Columns and their roles\",\n  columnN: (n) => `Column ${n}`,\n  roleOf: (column) => `What does column “${column}” hold?`,\n  ignore: \"Ignore\",\n  requiredRole: (role) => `${role} (required)`,\n  previewOf: (shown, total) =>\n    shown === 1\n      ? `The first of ${total} rows`\n      : `The first ${shown} of ${total} rows`,\n  oneOf: (roles) => `either ${roles}`,\n  missing: (roles) => `Still needed: ${roles}.`,\n};\n\nconst SEPARATOR_LABEL: Record<\n  TableSeparator,\n  \"separatorSemicolon\" | \"separatorComma\" | \"separatorTab\" | \"separatorSpace\"\n> = {\n  \";\": \"separatorSemicolon\",\n  \",\": \"separatorComma\",\n  \"\\t\": \"separatorTab\",\n  \" \": \"separatorSpace\",\n};\n\n/** How many unread lines are listed before \"…and N more\". */\nconst UNREAD_LISTED = 100;\n\n/** A file a table is likely to be in. Extensions only, so a refusal reads \"Only .csv,\n *  .tsv, … files\" rather than a list of MIME types; the parse is the real check. */\nconst DEFAULT_ACCEPT = \".csv,.tsv,.txt,.dat,.asc\";\n\nfunction formatList(\n  items: string[],\n  type: \"conjunction\" | \"disjunction\",\n  locale: string | undefined,\n): string {\n  try {\n    return new Intl.ListFormat(locale, { type, style: \"long\" }).format(items);\n  } catch {\n    return items.join(\", \");\n  }\n}\n\n// ── ColumnRoleTable ───────────────────────────────────────────────────────────\n\n/** A `data-*` attribute, typed so `{ \"data-private\": \"\" }` needs no cast. */\ntype DataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/**\n * What {@link ColumnRoleTableProps.bodyProps} puts on the preview's `<tbody>`: `data-*`\n * hooks, an `id`, a class, a style.\n */\nexport type ColumnRoleTableBodyProps = Omit<\n  HTMLAttributes<HTMLTableSectionElement>,\n  \"children\" | \"dangerouslySetInnerHTML\"\n> &\n  DataAttributes;\n\n/**\n * What {@link ColumnRoleTableProps.rowProps} returns for one preview row's `<tr>` —\n * the same shape as LineItems' `LineItemsRowProps`, on a table row.\n */\nexport type ColumnRoleTableRowProps = Omit<\n  HTMLAttributes<HTMLTableRowElement>,\n  \"children\" | \"dangerouslySetInnerHTML\"\n> &\n  DataAttributes;\n\nexport interface ColumnRoleTableProps<\n  R extends string,\n  M extends ColumnMapping<R> = ColumnMapping<R>,\n> {\n  /** The columns' names — the file's header line — or `null` for a table without one\n   *  (each column is then \"Column 1\", \"Column 2\", …). */\n  header: readonly string[] | null;\n  /** The rows to preview, as text. Only the first {@link previewRows} are drawn. */\n  rows: readonly (readonly string[])[];\n  /** How many columns. Default: the header's length or the widest previewed row. */\n  width?: number;\n  /** The parts a column can play. */\n  roles: readonly ColumnRole<R>[];\n  /** Role → column. Any object with the roles as nullable number fields — keksdose's\n   *  `CsvMapping` as it stands; the other fields are handed back untouched. */\n  mapping: M;\n  /** The next mapping, with the picked role moved onto its column. */\n  onMappingChange: (next: M) => void;\n  /** Default 5. */\n  previewRows?: number;\n  /** How many rows the table has in all, for \"The first 5 of 120 rows\". Default:\n   *  `rows.length`. */\n  totalRows?: number;\n  /** Every role select disabled — keksdose locks them while a re-sniff replaces the\n   *  table they point into. */\n  disabled?: boolean;\n  /**\n   * Extra attributes for the preview's `<tbody>` (0.24) — keksdose: the sample rows are\n   * the user's own bank data (payees, memos, amounts), and its demo mode blurs exactly\n   * that through `.demo-mode [data-private]` (#336). With nowhere to put the attribute,\n   * its map step reached into the table with a `useLayoutEffect` that set it on the\n   * `<tbody>` after every commit; `bodyProps={{ \"data-private\": \"\" }}` declares it.\n   * There is deliberately no head counterpart: the column names and the role selects\n   * are what such a mode is there to show.\n   *\n   * Spread on the kit `TableBody`; a `className` is added to its own.\n   */\n  bodyProps?: ColumnRoleTableBodyProps;\n  /**\n   * Extra attributes for one preview row's `<tr>`, from its cells and its index in the\n   * preview (0.24) — the contract of LineItems' `rowProps` (keksdose K20), on a table:\n   * `data-*` hooks (a per-row `data-private`, a test id), an `id`, a class. Called for\n   * the rows drawn, the first {@link previewRows}. The row has no attributes of its own\n   * to protect; a `className` is added after its classes.\n   */\n  rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;\n  labels?: Partial<ColumnMapperLabels>;\n  className?: string;\n}\n\n/**\n * A table's first rows, with a role select on every column's header.\n *\n * keksdose's mapping step (dev#462: \"make it more table like, where the table columns\n * can be chosen from the input and the column data changes with the chosen column\n * header\"): the file IS the form. The file's own column name sits on top, verbatim —\n * it is how the reader recognises the column; under it the role, picked in place;\n * under that the column's real values, so a column that is one off shows up here and\n * not after the import. A column with no role says \"Ignore\" and its values are dimmed:\n * the state that most needs to be visible in a twelve-column bank export.\n *\n * Picking a role another column holds MOVES it ({@link assignColumnRole}). What the\n * table still needs is named under it — a required group as \"either Amount, Debit or\n * Credit\". Required roles say \"(required)\" in the list only where some role is not\n * (0.24): Kurvenschmiede's roles are all required, so the mark told no option from\n * another, and on a phone it cut the role's own name short (\"Zeit (s) (erforderl…\")\n * — the part of the option the reader has to read. The \"Still needed\" line already\n * says what is missing; a mark that distinguishes nothing is only noise.\n *\n * The table scrolls sideways inside its own box (the kit {@link Table}'s wrapper, a\n * named, keyboard-reachable region while it overflows), so a wide export never widens\n * the page at 390px. An edge with columns behind it fades out (0.24, Kurvenschmiede:\n * on a phone the fourth column's select sat off-screen and nothing said there was more\n * to the right; phone scrollbars are overlays that show only while you drag). It is\n * the kit Tabs strip's measured fade: drawn only while something is hidden on that\n * side, so a table that fits is painted as before; both ends once scrolled into the\n * middle; the reading direction's own in RTL; never animated, so there is nothing for\n * reduced motion to turn off; and a `mask-image`, which changes no layout and needs no\n * background colour to fade to. A role select focused behind the fade is scrolled\n * clear of it.\n */\nexport function ColumnRoleTable<\n  R extends string,\n  M extends ColumnMapping<R> = ColumnMapping<R>,\n>({\n  header,\n  rows,\n  width: widthProp,\n  roles,\n  mapping,\n  onMappingChange,\n  previewRows = 5,\n  totalRows,\n  disabled,\n  bodyProps,\n  rowProps,\n  labels: labelsProp,\n  className,\n}: ColumnRoleTableProps<R, M>) {\n  const labels: ColumnMapperLabels = useKitLabels(\n    \"columnMapper\",\n    DEFAULT_COLUMN_MAPPER_LABELS,\n    labelsProp,\n  );\n  const locale = useKitLocale();\n  const shown = rows.slice(0, previewRows);\n  const width =\n    widthProp ??\n    shown.reduce(\n      (widest, row) => Math.max(widest, row.length),\n      header?.length ?? 0,\n    );\n  const columns = Array.from({ length: width }, (_, index) => index);\n  const total = totalRows ?? rows.length;\n  const nameOf = (column: number) =>\n    header?.[column] || labels.columnN(column + 1);\n  const labelOf = (value: R) =>\n    roles.find((role) => role.value === value)?.label ?? value;\n  const gaps = missingRoles(roles, mapping, width).map((gap) =>\n    gap.length === 1\n      ? labelOf(gap[0])\n      : labels.oneOf(formatList(gap.map(labelOf), \"disjunction\", locale)),\n  );\n  // \"(required)\" only where it tells one option from another.\n  const markRequired = roles.some((role) => role.required !== true);\n\n  // The Table's own scroll wrapper — the `<table>`'s parent — is what overflows; the\n  // fade is measured on it and drawn on the box round it, which has the same edges.\n  const scroller = useRef<HTMLElement | null>(null);\n  const tableRef = useCallback((table: HTMLTableElement | null) => {\n    scroller.current = table?.parentElement ?? null;\n  }, []);\n  const fade = useStripFade(scroller);\n\n  return (\n    <div\n      className={cn(\"min-w-0 space-y-1.5\", className)}\n      data-slot=\"column-role-table\"\n    >\n      <div\n        data-slot=\"column-role-table-scroll\"\n        // In reading-direction terms (\"start\", \"end\", \"both\"), for a caller's styling.\n        data-overflow={fade.overflow}\n        style={\n          fade.mask\n            ? { maskImage: fade.mask, WebkitMaskImage: fade.mask }\n            : undefined\n        }\n      >\n        <Table\n          ref={tableRef}\n          density=\"compact\"\n          framed\n          aria-label={labels.table}\n        >\n          <TableHead>\n            <TableRow>\n              {columns.map((column) => {\n                const role = roleOfColumn(roles, mapping, column);\n                const name = nameOf(column);\n                return (\n                  <TableHeaderCell\n                    key={column}\n                    scope=\"col\"\n                    className=\"min-w-36 py-2 align-top\"\n                  >\n                    <span className=\"block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]\">\n                      {name}\n                    </span>\n                    <Select\n                      size=\"sm\"\n                      className=\"w-full\"\n                      aria-label={labels.roleOf(name)}\n                      value={role ?? \"\"}\n                      disabled={disabled}\n                      // Focus brings a select behind the fade clear of it — the browser's\n                      // own scroll stops at the edge, under the fade.\n                      onFocus={(event) => {\n                        const cell = event.currentTarget.closest(\"th\");\n                        if (scroller.current && cell)\n                          scrollIntoStrip(scroller.current, cell);\n                      }}\n                      onChange={(event) =>\n                        onMappingChange(\n                          assignColumnRole(\n                            roles,\n                            mapping,\n                            column,\n                            event.target.value === \"\"\n                              ? null\n                              : (event.target.value as R),\n                          ),\n                        )\n                      }\n                    >\n                      <option value=\"\">{labels.ignore}</option>\n                      {roles.map((option) => (\n                        <option key={option.value} value={option.value}>\n                          {option.required === true && markRequired\n                            ? labels.requiredRole(option.label)\n                            : option.label}\n                        </option>\n                      ))}\n                    </Select>\n                  </TableHeaderCell>\n                );\n              })}\n            </TableRow>\n          </TableHead>\n          <TableBody {...bodyProps}>\n            {shown.map((row, index) => (\n              <TableRow {...rowProps?.(row, index)} key={index}>\n                {columns.map((column) => (\n                  <TableCell\n                    key={column}\n                    data-ignored={\n                      roleOfColumn(roles, mapping, column) === null || undefined\n                    }\n                    className={cn(\n                      \"font-mono whitespace-nowrap\",\n                      // Dimmed, not hidden: its values are what tell you whether ignoring\n                      // it was right.\n                      roleOfColumn(roles, mapping, column) === null &&\n                        \"text-[var(--text-muted)]\",\n                    )}\n                  >\n                    <span className=\"block max-w-56 truncate\">\n                      {row[column] ?? \"\"}\n                    </span>\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n      {total > shown.length && (\n        <p className=\"text-xs text-[var(--text-muted)]\">\n          {labels.previewOf(shown.length, total)}\n        </p>\n      )}\n      {gaps.length > 0 && (\n        <AlertBanner tone=\"warning\" variant=\"inline\" size=\"sm\" block>\n          {labels.missing(formatList(gaps, \"conjunction\", locale))}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n\n// ── ColumnMapper ──────────────────────────────────────────────────────────────\n\nexport interface ColumnMapperProps<R extends string> {\n  /** The parts the columns play — translated labels, which are required, which must\n   *  be numbers. See {@link ColumnRole}. */\n  roles: readonly ColumnRole<R>[];\n  /**\n   * The table read through the current mapping, on every change: the text, the header\n   * checkbox, a role. `null` while there is no table at all (an empty box). Use it when\n   * `result.complete`; until then `result.missing` says what is not placed yet.\n   *\n   * The rows are strings. A numeric role's cells are guaranteed to read with\n   * `tableNumber(cell, result.decimalComma)`; anything else is the caller's to convert.\n   */\n  onChange: (result: ColumnMapperResult<R> | null) => void;\n  /** The paste box's label. Default: `labels.paste`. */\n  label?: ReactNode;\n  /** The caption under the paste box. Default: `labels.pasteHint`. */\n  hint?: ReactNode;\n  /** What the file dialog offers, and what a drop is checked against. Default:\n   *  `.csv,.tsv,.txt,.dat,.asc`. */\n  accept?: string;\n  /** The largest file taken, in bytes. Default: no limit. */\n  maxSize?: number;\n  /** Text to start with. `onChange` is called with its result once, on mount. */\n  defaultText?: string;\n  /** Rows in the preview. Default 5. */\n  previewRows?: number;\n  /** The first mapping for a new table. Default {@link guessMapping}: a column named\n   *  like a role gets it, and the required roles left over take the free columns in\n   *  order. */\n  guess?: (table: TextTable) => ColumnMapping<R>;\n  disabled?: boolean;\n  /** The preview table's `<tbody>` attributes — {@link ColumnRoleTableProps.bodyProps}\n   *  (0.24): `{ \"data-private\": \"\" }` for a table of someone's own data. */\n  bodyProps?: ColumnRoleTableBodyProps;\n  /** One preview row's `<tr>` attributes — {@link ColumnRoleTableProps.rowProps}\n   *  (0.24). `row` is the row as read, `index` its place in the preview. */\n  rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;\n  labels?: Partial<ColumnMapperLabels>;\n  className?: string;\n}\n\ninterface MapperState<R extends string> {\n  text: string;\n  /** The reader's answer to \"does the first line name the columns\", or `null` for\n   *  the parse's own. */\n  header: boolean | null;\n  table: TextTable;\n  mapping: ColumnMapping<R>;\n}\n\nconst hasFiles = (event: DragEvent) =>\n  Array.from(event.dataTransfer?.types ?? []).includes(\"Files\");\n\n/**\n * Paste, drop or choose a table, see what it was read as, and say which column is\n * which — Kurvenschmiede's playground signal and comparison input as one kit part.\n *\n * Everything the parse assumed is stated, because a guess the reader cannot see is a\n * guess they cannot correct: the shape it found, the separator, the decimal\n * convention (\"decimal comma (1,5)\"), and every line it could not read, by number and\n * with its text. The header line is a checkbox, since the detection is a guess either\n * way and toggling it does not move a column (the mapping is kept, keksdose's\n * `keepRoles`). A new file is a new table and is mapped afresh; typing that changes the\n * column count re-guesses, because the old indexes point at nothing.\n *\n * A file can be chosen, dropped on the button, or dropped on the paste box — which,\n * left to the browser, would open the file in place of the page. It is read as UTF-8,\n * or as Windows-1252 when it is not UTF-8 ({@link readTextFile}).\n *\n * A two-step wizard that keeps the drop and the mapping apart (keksdose's) uses the\n * parts: {@link parseTextTable} or its own server's sniff, then {@link ColumnRoleTable},\n * then {@link readMappedTable}.\n */\nexport function ColumnMapper<R extends string>({\n  roles,\n  onChange,\n  label,\n  hint,\n  accept = DEFAULT_ACCEPT,\n  maxSize,\n  defaultText = \"\",\n  previewRows = 5,\n  guess,\n  disabled = false,\n  bodyProps,\n  rowProps,\n  labels: labelsProp,\n  className,\n}: ColumnMapperProps<R>) {\n  const labels: ColumnMapperLabels = useKitLabels(\n    \"columnMapper\",\n    DEFAULT_COLUMN_MAPPER_LABELS,\n    labelsProp,\n  );\n  const firstMapping = (table: TextTable) =>\n    guess ? guess(table) : guessMapping(roles, table.header, table.width);\n  const [state, setState] = useState<MapperState<R>>(() => {\n    const table = parseTextTable(defaultText);\n    return {\n      text: defaultText,\n      header: null,\n      table,\n      mapping: firstMapping(table),\n    };\n  });\n  const [reading, setReading] = useState(false);\n  const [refusal, setRefusal] = useState<string | null>(null);\n  const [dragOver, setDragOver] = useState(false);\n\n  // What is drawn and what is handed over are the same computation. Not memoised: a\n  // caller writes `roles={[…]}` inline, so a memo keyed on them would miss every time,\n  // and the read is one pass over rows that are already split.\n  const result = readMappedTable(state.table, roles, state.mapping);\n\n  const commit = (next: MapperState<R>) => {\n    setState(next);\n    onChange(\n      next.table.width === 0\n        ? null\n        : readMappedTable(next.table, roles, next.mapping),\n    );\n  };\n\n  /** New text. `fresh` (a file): the reader's header answer and the mapping start over. */\n  const take = (text: string, fresh: boolean) => {\n    const header = fresh ? null : state.header;\n    const table = parseTextTable(text, header === null ? {} : { header });\n    const keep =\n      !fresh && table.width === state.table.width && state.table.width > 0;\n    commit({\n      text,\n      header,\n      table,\n      mapping: keep ? state.mapping : firstMapping(table),\n    });\n  };\n\n  const load = (file: File) => {\n    setRefusal(null);\n    setReading(true);\n    void readTextFile(file)\n      .then(\n        (text) => take(text, true),\n        // Only the read: an error thrown by the caller's onChange is not the file's.\n        () => setRefusal(labels.readError(file.name)),\n      )\n      .finally(() => setReading(false));\n  };\n\n  const refuse = (rejections: { message: string }[]) =>\n    setRefusal(rejections[0]?.message ?? null);\n\n  // A file dropped on the paste box. The same screening as the button's.\n  const drop = useFilePicker({\n    accept,\n    maxSize,\n    disabled,\n    onFiles: ([file]) => load(file),\n    onReject: refuse,\n  });\n\n  const seeded = useEffectEvent(() => {\n    if (state.table.width > 0) onChange(result);\n  });\n  useEffect(() => {\n    seeded();\n  }, []);\n\n  const { table } = state;\n  const separator = labels[SEPARATOR_LABEL[table.separator]];\n  const unread = result.unread;\n\n  return (\n    <div\n      className={cn(\"min-w-0 space-y-3\", className)}\n      data-slot=\"column-mapper\"\n    >\n      <Textarea\n        label={label ?? labels.paste}\n        hint={hint ?? labels.pasteHint}\n        rows={5}\n        wrap=\"off\"\n        spellCheck={false}\n        autoCapitalize=\"off\"\n        autoCorrect=\"off\"\n        value={state.text}\n        disabled={disabled}\n        className={cn(\n          \"font-mono text-xs\",\n          dragOver && \"rounded-md ring-2 ring-[var(--brand)]\",\n        )}\n        data-drag-over={dragOver || undefined}\n        onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {\n          setRefusal(null);\n          take(event.target.value, false);\n        }}\n        onDragEnter={(event) => {\n          if (!hasFiles(event)) return;\n          event.preventDefault();\n          if (!disabled) setDragOver(true);\n        }}\n        onDragOver={(event) => {\n          if (!hasFiles(event)) return;\n          // Cancelled for every file drag: an uncancelled one makes the browser open\n          // the file in place of the page.\n          event.preventDefault();\n          event.dataTransfer.dropEffect = disabled ? \"none\" : \"copy\";\n        }}\n        onDragLeave={() => setDragOver(false)}\n        onDrop={(event) => {\n          if (!hasFiles(event)) return;\n          event.preventDefault();\n          setDragOver(false);\n          drop.take(event.dataTransfer.files);\n        }}\n      />\n      {drop.element}\n\n      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2\">\n        <FileButton\n          variant=\"secondary\"\n          accept={accept}\n          maxSize={maxSize}\n          droppable\n          pending={reading}\n          disabled={disabled}\n          onFiles={([file]) => load(file)}\n          onReject={refuse}\n        >\n          <Upload className=\"size-4\" aria-hidden />\n          {labels.chooseFile}\n        </FileButton>\n        {table.width > 0 && (\n          <Checkbox\n            label={labels.headerRow}\n            checked={table.header !== null}\n            disabled={disabled}\n            onCheckedChange={(checked) => {\n              const next = parseTextTable(state.text, { header: checked });\n              // Same text, same split: the columns are where they were, and so are the\n              // roles on them.\n              commit({ ...state, header: checked, table: next });\n            }}\n          />\n        )}\n      </div>\n\n      {refusal && (\n        <AlertBanner tone=\"danger\" variant=\"inline\" size=\"sm\" block>\n          {refusal}\n        </AlertBanner>\n      )}\n\n      {table.width > 0 && (\n        <>\n          <p\n            className=\"text-xs text-[var(--text-secondary)]\"\n            data-slot=\"column-mapper-summary\"\n          >\n            {[\n              labels.summary(table.width, result.rows.length),\n              separator,\n              table.decimalComma ? labels.decimalComma : labels.decimalPoint,\n            ].join(\" · \")}\n          </p>\n          {result.rows.length === 0 && (\n            <AlertBanner tone=\"warning\" variant=\"inline\" size=\"sm\" block>\n              {labels.noRows}\n            </AlertBanner>\n          )}\n          <ColumnRoleTable\n            header={table.header}\n            rows={result.rows}\n            width={table.width}\n            roles={roles}\n            mapping={state.mapping}\n            onMappingChange={(mapping) => commit({ ...state, mapping })}\n            previewRows={previewRows}\n            disabled={disabled}\n            bodyProps={bodyProps}\n            rowProps={rowProps}\n            labels={labelsProp}\n          />\n          {unread.length > 0 && (\n            <Disclosure\n              variant=\"bare\"\n              title={labels.unreadCount(unread.length)}\n              data-slot=\"column-mapper-unread\"\n            >\n              <ul className=\"space-y-1 text-xs\">\n                {unread.slice(0, UNREAD_LISTED).map((line) => (\n                  <li key={line.line} className=\"min-w-0\">\n                    <span className=\"block text-[var(--text-secondary)]\">\n                      {labels.unreadLine(line.line)}\n                    </span>\n                    <code className=\"block truncate font-mono text-[var(--text-muted)]\">\n                      {line.text}\n                    </code>\n                  </li>\n                ))}\n                {unread.length > UNREAD_LISTED && (\n                  <li className=\"text-[var(--text-muted)]\">\n                    {labels.unreadMore(unread.length - UNREAD_LISTED)}\n                  </li>\n                )}\n              </ul>\n            </Disclosure>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["table"]}

package/dist/components/combobox-core.d.ts

@@ -65,6 +65,36 @@ declare function settleEnabled(rows: readonly {
 /** Classes a disabled row adds over its normal ones — dimmed, no hover, the
  *  kit's soft-disabled look (`DangerConfirm`, `SignaturePad`). */
 declare const DISABLED_ROW_CLASS = "cursor-not-allowed opacity-50 hover:bg-transparent";
+/**
+ * Whether an entity picker offers its create row — one rule for
+ * {@link EntityCombobox}, {@link MultiEntityCombobox} and {@link InlineEntityCombobox}.
+ *
+ * With a query: while the trimmed query names no option exactly (case-insensitive) —
+ * an exact hit is a record the list is already showing, and a second way to "make" it
+ * would mint a duplicate. With NO query: only when the caller named the row for that
+ * case (`createEmptyLabel`) — a row reading `Create “”` says nothing, and the kit cannot
+ * know the noun ("Create cash account") that would make it say something (keksdose G9).
+ *
+ * `names` is what the query is compared against: the loaded rows for a panel picker
+ * (its async list is all it knows), every option for the inline one.
+ */
+declare function offersCreate(onCreate: unknown, query: string, names: readonly string[], createEmptyLabel: string | undefined): boolean;
+/**
+ * {@link EndHintRow}'s `hint` and `className` for a combobox-family field, keeping the
+ * 0.22 rule (keksdose): a field that was passed `hint` at all — even `undefined` — keeps
+ * ONE box, so a hint coming and going never rebuilds the control under the cursor.
+ *
+ * A text hint is a caption after the control and never moved it; the case this covers
+ * is the "?" (a {@link FieldHint}) on a field with no label line, which sits at the end
+ * edge in a row of its own. Without this the row existed only while the "?" did, and
+ * the control was re-parented — remounted, focus and caret lost — each time it came or
+ * went. With `hint` passed the row stays, its end slot empty and its gap closed, so
+ * nothing on screen moves either.
+ */
+declare function endHintRowProps(hintPassed: boolean, hasLabel: boolean, labelHint: ReactNode | undefined): {
+    hint: ReactNode | undefined;
+    className?: string;
+};
 /**
  * The family's floating label, as a real `<label for>` (lenkbank): the input is then
  * named the way {@link Input}'s is, so `getByLabelText` and any helper that walks
@@ -213,6 +243,13 @@ interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWi
     showCreate: boolean;
     onCreate: () => void;
     createContent: ReactNode;
+    /**
+     * The create row is shown but not takeable, and this says why — the lock's reason
+     * when the picker's `createCommit` meets a locked {@link WriteLockProvider}. Rendered
+     * as the row's second line rather than a tooltip, as {@link ComboOption.disabled}
+     * asks of every disabled row: a hover is the one explanation a phone cannot show.
+     */
+    createDisabledReason?: ReactNode;
     /** What the sheet calls itself on a phone — the field's label. Ignored on
      *  desktop, where the panel sits under the field that already says it. */
     sheetTitle?: ReactNode;
@@ -246,6 +283,6 @@ interface ComboboxPanelProps<V extends string | number> extends ComponentPropsWi
  * `tabIndex={-1}` because focus never leaves the search box — that is what
  * `aria-activedescendant` is FOR.
  */
-declare function ComboboxPanel<V extends string | number>({ core, listboxId, searchPlaceholder, emptyLabel, multi, isSelected, onChoose, showCreate, onCreate, createContent, sheetTitle, closeLabel, loadErrorLabel, className, style, ...rest }: ComboboxPanelProps<V>): react.JSX.Element | null;
+declare function ComboboxPanel<V extends string | number>({ core, listboxId, searchPlaceholder, emptyLabel, multi, isSelected, onChoose, showCreate, onCreate, createContent, createDisabledReason, sheetTitle, closeLabel, loadErrorLabel, className, style, ...rest }: ComboboxPanelProps<V>): react.JSX.Element | null;
 
-export { type ComboClearValue, type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxFieldLabel, ComboboxPanel, type ComboboxPanelProps, DISABLED_ROW_CLASS, type OptionSource, type OptionSourceOptions, SUGGESTION_LIST_CLASS, isOptionEnabled, settleEnabled, stepEnabled, suggestionRowClass, useActiveOptionScroll, useComboboxCore, useComboboxFieldError, useOptionSource };
+export { type ComboClearValue, type ComboOption, type ComboboxCore, type ComboboxCoreOptions, ComboboxFieldLabel, ComboboxPanel, type ComboboxPanelProps, DISABLED_ROW_CLASS, type OptionSource, type OptionSourceOptions, SUGGESTION_LIST_CLASS, endHintRowProps, isOptionEnabled, offersCreate, settleEnabled, stepEnabled, suggestionRowClass, useActiveOptionScroll, useComboboxCore, useComboboxFieldError, useOptionSource };

package/dist/components/combobox-core.js

@@ -30,6 +30,17 @@ function settleEnabled(rows, i) {
   return before !== i ? before : -1;
 }
 const DISABLED_ROW_CLASS = "cursor-not-allowed opacity-50 hover:bg-transparent";
+function offersCreate(onCreate, query, names, createEmptyLabel) {
+  if (!onCreate) return false;
+  if (!query) return Boolean(createEmptyLabel);
+  const q = query.toLowerCase();
+  return !names.some((n) => n.toLowerCase() === q);
+}
+function endHintRowProps(hintPassed, hasLabel, labelHint) {
+  if (hasLabel) return { hint: void 0 };
+  if (labelHint !== void 0) return { hint: labelHint };
+  return hintPassed ? { hint: null, className: "gap-0" } : { hint: void 0 };
+}
 function ComboboxFieldLabel({
   htmlFor,
   className,
@@ -195,6 +206,7 @@ function ComboboxPanel({
   showCreate,
   onCreate,
   createContent,
+  createDisabledReason,
   sheetTitle,
   closeLabel,
   loadErrorLabel,
@@ -202,6 +214,7 @@ function ComboboxPanel({
   style,
   ...rest
 }) {
+  const createLocked = hasMessage(createDisabledReason);
   const {
     rect,
     placement,
@@ -218,7 +231,7 @@ function ComboboxPanel({
     closeToTrigger
   } = core;
   const isPhone = useMediaQuery(PHONE_QUERY, false);
-  const rows = showCreate ? [...results, {}] : results;
+  const rows = showCreate ? [...results, { disabled: createLocked }] : results;
   const rowCount = rows.length;
   const optionId = (index) => `${listboxId}-option-${index}`;
   const current = settleEnabled(rows, active);
@@ -243,7 +256,7 @@ function ComboboxPanel({
       e.preventDefault();
       if (current < 0) return;
       if (current < results.length) onChoose(results[current]);
-      else if (showCreate) onCreate();
+      else if (showCreate && !createLocked) onCreate();
     } else if (e.key === "Tab") {
       e.preventDefault();
       closeToTrigger();
@@ -363,20 +376,28 @@ function ComboboxPanel({
             id: optionId(results.length),
             role: "option",
             "aria-selected": false,
+            "aria-disabled": createLocked || void 0,
             tabIndex: -1,
             onMouseDown: (e) => {
               e.preventDefault();
-              onCreate();
+              if (!createLocked) onCreate();
+            },
+            onMouseEnter: () => {
+              if (!createLocked) setActive(results.length);
             },
-            onMouseEnter: () => setActive(results.length),
             className: cn(
               isPhone ? SHEET_ROW_CLASS : "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
               "text-[var(--text-secondary)]",
-              current === results.length && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]"
+              createLocked ? DISABLED_ROW_CLASS : current === results.length && !isPhone ? "bg-[var(--bg-active)]" : !isPhone && "hover:bg-[var(--bg-hover)]",
+              // After SHEET_ROW_CLASS, so its hover is the one cancelled.
+              createLocked && isPhone && DISABLED_ROW_CLASS
             ),
             children: [
               /* @__PURE__ */ jsx(Plus, { className: "size-4 shrink-0" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: createContent })
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "block truncate", children: createContent }),
+                createLocked && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-placeholder)]", children: createDisabledReason })
+              ] })
             ]
           }
         ) })
@@ -456,7 +477,9 @@ export {
   ComboboxPanel,
   DISABLED_ROW_CLASS,
   SUGGESTION_LIST_CLASS,
+  endHintRowProps,
   isOptionEnabled,
+  offersCreate,
   settleEnabled,
   stepEnabled,
   suggestionRowClass,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useId, 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 { useMediaQuery } from \"../hooks/use-media-query\";\nimport { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from \"./ui\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\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   * Searchable like `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 * 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). 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  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!filter || !q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query, filter]);\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 type ComboboxCoreOptions<V extends string | number> = OptionSourceOptions<V>;\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  ...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 = useMediaQuery(PHONE_QUERY, false);\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  useEscapeKey(closeToTrigger, open);\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 error line under a field — the same type as `ui.tsx`'s (module-private) one,\n *  so a combobox's message is indistinguishable from an Input's. */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n/**\n * {@link Input}'s `error` for the combobox family: the message under the field, its\n * id on the control's `aria-describedby` (merged, never replacing — the hint the\n * caller pointed at stays first), and `invalid` implied. ui.tsx's `useFieldError` is\n * module-private, so this restates it on the same rules `choice-parts.ts` does.\n */\nexport function useComboboxFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy?: string,\n) {\n  const errorId = useId();\n  const has = hasMessage(error);\n  return {\n    isInvalid: Boolean(invalid) || has,\n    describedBy: mergeDescribedBy(describedBy, has && errorId),\n    errorEl: has ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg\";\n\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]\",\n    isActive ? \"bg-[var(--bg-active)]\" : \"hover:bg-[var(--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\nexport interface ComboboxPanelProps<V extends string | number>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  core: ComboboxCore<V>;\n  /** What the trigger's `aria-controls` names. Owned by the component that renders\n   *  the trigger, not by the core: one id has to reach both, and only one of them\n   *  can be the origin. */\n  listboxId: string;\n  /** Default: `combobox.search` from the {@link UiKitProvider}, else English. */\n  searchPlaceholder?: string;\n  /** Default: `combobox.noResults` from the {@link UiKitProvider}, else English. */\n  emptyLabel?: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n  /** Default: `combobox.loadError` from the {@link UiKitProvider}, else English. */\n  loadErrorLabel?: string;\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  sheetTitle,\n  closeLabel,\n  loadErrorLabel,\n  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const {\n    rect,\n    placement,\n    panelRef,\n    inputRef,\n    query,\n    setQuery,\n    results,\n    busy,\n    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 = useMediaQuery(PHONE_QUERY, false);\n  // Every row the keyboard can land on, the create row included (never disabled).\n  const rows: readonly { disabled?: boolean }[] = showCreate ? [...results, {}] : 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\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`\n  // registers it on the document, so it answers wherever focus has ended up.\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // 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) onCreate();\n    } else if (e.key === \"Tab\") {\n      // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n      // here to whatever follows the portal — i.e. off the end of the document. The\n      // trade is one extra Tab (trigger, then onward) against never stranding focus\n      // at the bottom of the page.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // 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-[var(--danger)]\" : \"text-[var(--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  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(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"presentation\">\n            <button\n              type=\"button\"\n              id={optionId(i)}\n              role=\"option\"\n              aria-selected={selected}\n              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                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n                o.disabled\n                  ? DISABLED_ROW_CLASS\n                  : i === current && !isPhone\n                    ? \"bg-[var(--bg-active)]\"\n                    : !isPhone && \"hover:bg-[var(--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-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                      : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-[var(--text-primary)]\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-[var(--brand)]\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"presentation\">\n          <button\n            type=\"button\"\n            id={optionId(results.length)}\n            role=\"option\"\n            // Never chosen — it is an action, and it disappears the moment it has\n            // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n            // job to say.\n            aria-selected={false}\n            tabIndex={-1}\n            onMouseDown={(e) => {\n              e.preventDefault();\n              onCreate();\n            }}\n            onMouseEnter={() => setActive(results.length)}\n            className={cn(\n              isPhone\n                ? SHEET_ROW_CLASS\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n              \"text-[var(--text-secondary)]\",\n              current === results.length && !isPhone\n                ? \"bg-[var(--bg-active)]\"\n                : !isPhone && \"hover:bg-[var(--bg-hover)]\",\n            )}\n          >\n            <Plus className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{createContent}</span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        // First, so the sheet's own props below win: `rest` is typed as div\n        // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n        // its heading — one name, two meanings, and the sheet's is the one the caller\n        // asked for.\n        {...rest}\n        className={className}\n        style={style}\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder ?? labels.search}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n            itself: it catches the listbox keys bubbling from the sheet's search <input>,\n            which holds focus while the list is up. */}\n        <div onKeyDown={onKeyDown} 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: its left in a left-to-right form,\n  // its right in a right-to-left one (it may be wider than the trigger, `minWidth`).\n  // `clientWidth` rather than `innerWidth`, because a fixed box's `right` is measured\n  // from the edge of the viewport inside any scrollbar.\n  const inline =\n    dir === \"rtl\"\n      ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right }\n      : { left: rect.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      dir={dir}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.top,\n        ...inline,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder ?? labels.search}\n        // Focus is in this box while the list is up, so this is what has to name the\n        // list and the row the arrows are on.\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n      {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, useId, 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 { useMediaQuery } from \"../hooks/use-media-query\";\nimport { FLOATING_LABEL_STATIC, PHONE_QUERY, Spinner } from \"./ui\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { DEFAULT_COMBOBOX_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\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   * Searchable like `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). 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  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!filter || !q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query, filter]);\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 type ComboboxCoreOptions<V extends string | number> = OptionSourceOptions<V>;\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  ...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 = useMediaQuery(PHONE_QUERY, false);\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  useEscapeKey(closeToTrigger, open);\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 error line under a field — the same type as `ui.tsx`'s (module-private) one,\n *  so a combobox's message is indistinguishable from an Input's. */\nconst FIELD_ERROR_CLASS = \"mt-1 text-[11px] leading-tight text-[var(--danger)]\";\n\n/**\n * {@link Input}'s `error` for the combobox family: the message under the field, its\n * id on the control's `aria-describedby` (merged, never replacing — the hint the\n * caller pointed at stays first), and `invalid` implied. ui.tsx's `useFieldError` is\n * module-private, so this restates it on the same rules `choice-parts.ts` does.\n */\nexport function useComboboxFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy?: string,\n) {\n  const errorId = useId();\n  const has = hasMessage(error);\n  return {\n    isInvalid: Boolean(invalid) || has,\n    describedBy: mergeDescribedBy(describedBy, has && errorId),\n    errorEl: has ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The anchored suggestion list's box and rows — one look for {@link Combobox},\n *  {@link InlineEntityCombobox} and {@link Autocomplete}. */\nexport const SUGGESTION_LIST_CLASS =\n  \"max-h-64 overflow-y-auto rounded-md border border-[var(--border)] bg-[var(--bg-surface)] py-1 shadow-lg\";\n\nexport const suggestionRowClass = (isActive: boolean) =>\n  cn(\n    \"block w-full truncate px-3 py-1.5 text-start text-sm text-[var(--text-primary)]\",\n    isActive ? \"bg-[var(--bg-active)]\" : \"hover:bg-[var(--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\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\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  className,\n  style,\n  ...rest\n}: ComboboxPanelProps<V>) {\n  const createLocked = hasMessage(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 = useMediaQuery(PHONE_QUERY, false);\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\n  // The WAI-ARIA APG's listbox keyboard, in full: Up/Down step, Home/End jump, Enter\n  // commits, Tab leaves. Escape is the one key handled elsewhere — `useComboboxCore`\n  // registers it on the document, so it answers wherever focus has ended up.\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    // 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\") {\n      // The panel is PORTALLED to <body>, so the browser's own Tab would move from\n      // here to whatever follows the portal — i.e. off the end of the document. The\n      // trade is one extra Tab (trigger, then onward) against never stranding focus\n      // at the bottom of the page.\n      e.preventDefault();\n      closeToTrigger();\n    }\n  };\n\n  // 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-[var(--danger)]\" : \"text-[var(--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  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(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-[var(--text-muted)]\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"presentation\">\n            <button\n              type=\"button\"\n              id={optionId(i)}\n              role=\"option\"\n              aria-selected={selected}\n              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                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm\",\n                o.disabled\n                  ? DISABLED_ROW_CLASS\n                  : i === current && !isPhone\n                    ? \"bg-[var(--bg-active)]\"\n                    : !isPhone && \"hover:bg-[var(--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-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                      : \"border-[var(--border-strong)] bg-[var(--bg-surface)]\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-[var(--text-primary)]\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-[var(--brand)]\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"presentation\">\n          <button\n            type=\"button\"\n            id={optionId(results.length)}\n            role=\"option\"\n            // Never chosen — it is an action, and it disappears the moment it has\n            // been taken. Whether the keyboard is ON it is `aria-activedescendant`'s\n            // job to say.\n            aria-selected={false}\n            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-[var(--text-secondary)]\",\n              createLocked\n                ? DISABLED_ROW_CLASS\n                : current === results.length && !isPhone\n                  ? \"bg-[var(--bg-active)]\"\n                  : !isPhone && \"hover:bg-[var(--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\">{createContent}</span>\n              {createLocked && (\n                <span className=\"block truncate text-xs text-[var(--text-placeholder)]\">\n                  {createDisabledReason}\n                </span>\n              )}\n            </span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        // First, so the sheet's own props below win: `rest` is typed as div\n        // attributes, and the DOM's `title` is a tooltip string where the sheet's is\n        // its heading — one name, two meanings, and the sheet's is the one the caller\n        // asked for.\n        {...rest}\n        className={className}\n        style={style}\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder ?? labels.search}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n            itself: it catches the listbox keys bubbling from the sheet's search <input>,\n            which holds focus while the list is up. */}\n        <div onKeyDown={onKeyDown} 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: its left in a left-to-right form,\n  // its right in a right-to-left one (it may be wider than the trigger, `minWidth`).\n  // `clientWidth` rather than `innerWidth`, because a fixed box's `right` is measured\n  // from the edge of the viewport inside any scrollbar.\n  const inline =\n    dir === \"rtl\"\n      ? { right: (document.documentElement.clientWidth || window.innerWidth) - rect.right }\n      : { left: rect.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      dir={dir}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: placement.top,\n        ...inline,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        className,\n      )}\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder ?? labels.search}\n        // Focus is in this box while the list is up, so this is what has to name the\n        // list and the row the arrows are on.\n        listboxId={listboxId}\n        activeId={activeId}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n      {announcement}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":["Fragment"]}