@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/column-mapper.js

@@ -0,0 +1,375 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useState } from "react";
+import { Upload } from "lucide-react";
+import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import {
+  assignColumnRole,
+  guessMapping,
+  missingRoles,
+  readMappedTable,
+  readTextFile,
+  roleOfColumn
+} from "../lib/column-mapping.js";
+import { parseTextTable } from "../lib/table-text.js";
+import { AlertBanner } from "./alert-banner.js";
+import { Checkbox } from "./checkbox.js";
+import { Disclosure } from "./disclosure.js";
+import { FileButton, useFilePicker } from "./file-button.js";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow
+} from "./table.js";
+import { Select, Textarea } from "./ui.js";
+const DEFAULT_COLUMN_MAPPER_LABELS = {
+  paste: "Paste a table",
+  pasteHint: "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
+  chooseFile: "Choose a file",
+  readError: (name) => `\u201C${name}\u201D could not be read`,
+  headerRow: "The first line names the columns",
+  summary: (columns, rows) => `${columns} ${columns === 1 ? "column" : "columns"}, ${rows} ${rows === 1 ? "row" : "rows"}`,
+  separatorSemicolon: "separated by semicolons",
+  separatorComma: "separated by commas",
+  separatorTab: "separated by tabs",
+  separatorSpace: "separated by spaces",
+  decimalComma: "decimal comma (1,5)",
+  decimalPoint: "decimal point (1.5)",
+  unreadCount: (count) => count === 1 ? "1 line could not be read" : `${count} lines could not be read`,
+  unreadLine: (line) => `Line ${line} could not be read`,
+  unreadMore: (count) => `\u2026and ${count} more`,
+  noRows: "No line of this text reads as a row of the table.",
+  table: "Columns and their roles",
+  columnN: (n) => `Column ${n}`,
+  roleOf: (column) => `What does column \u201C${column}\u201D hold?`,
+  ignore: "Ignore",
+  requiredRole: (role) => `${role} (required)`,
+  previewOf: (shown, total) => shown === 1 ? `The first of ${total} rows` : `The first ${shown} of ${total} rows`,
+  oneOf: (roles) => `either ${roles}`,
+  missing: (roles) => `Still needed: ${roles}.`
+};
+const SEPARATOR_LABEL = {
+  ";": "separatorSemicolon",
+  ",": "separatorComma",
+  "	": "separatorTab",
+  " ": "separatorSpace"
+};
+const UNREAD_LISTED = 100;
+const DEFAULT_ACCEPT = ".csv,.tsv,.txt,.dat,.asc";
+function formatList(items, type, locale) {
+  try {
+    return new Intl.ListFormat(locale, { type, style: "long" }).format(items);
+  } catch {
+    return items.join(", ");
+  }
+}
+function ColumnRoleTable({
+  header,
+  rows,
+  width: widthProp,
+  roles,
+  mapping,
+  onMappingChange,
+  previewRows = 5,
+  totalRows,
+  disabled,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useKitLabels(
+    "columnMapper",
+    DEFAULT_COLUMN_MAPPER_LABELS,
+    labelsProp
+  );
+  const locale = useKitLocale();
+  const shown = rows.slice(0, previewRows);
+  const width = widthProp ?? shown.reduce(
+    (widest, row) => Math.max(widest, row.length),
+    header?.length ?? 0
+  );
+  const columns = Array.from({ length: width }, (_, index) => index);
+  const total = totalRows ?? rows.length;
+  const nameOf = (column) => header?.[column] || labels.columnN(column + 1);
+  const labelOf = (value) => roles.find((role) => role.value === value)?.label ?? value;
+  const gaps = missingRoles(roles, mapping, width).map(
+    (gap) => gap.length === 1 ? labelOf(gap[0]) : labels.oneOf(formatList(gap.map(labelOf), "disjunction", locale))
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-w-0 space-y-1.5", className),
+      "data-slot": "column-role-table",
+      children: [
+        /* @__PURE__ */ jsxs(Table, { density: "compact", framed: true, "aria-label": labels.table, children: [
+          /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => {
+            const role = roleOfColumn(roles, mapping, column);
+            const name = nameOf(column);
+            return /* @__PURE__ */ jsxs(
+              TableHeaderCell,
+              {
+                scope: "col",
+                className: "min-w-36 py-2 align-top",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "block max-w-56 truncate pb-1 text-[11px] font-normal text-[var(--text-muted)]", children: name }),
+                  /* @__PURE__ */ jsxs(
+                    Select,
+                    {
+                      size: "sm",
+                      className: "w-full",
+                      "aria-label": labels.roleOf(name),
+                      value: role ?? "",
+                      disabled,
+                      onChange: (event) => onMappingChange(
+                        assignColumnRole(
+                          roles,
+                          mapping,
+                          column,
+                          event.target.value === "" ? null : event.target.value
+                        )
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "", children: labels.ignore }),
+                        roles.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.required === true ? labels.requiredRole(option.label) : option.label }, option.value))
+                      ]
+                    }
+                  )
+                ]
+              },
+              column
+            );
+          }) }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: shown.map((row, index) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              "data-ignored": roleOfColumn(roles, mapping, column) === null || void 0,
+              className: cn(
+                "font-mono whitespace-nowrap",
+                // Dimmed, not hidden: its values are what tell you whether ignoring
+                // it was right.
+                roleOfColumn(roles, mapping, column) === null && "text-[var(--text-muted)]"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "block max-w-56 truncate", children: row[column] ?? "" })
+            },
+            column
+          )) }, index)) })
+        ] }),
+        total > shown.length && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: labels.previewOf(shown.length, total) }),
+        gaps.length > 0 && /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", variant: "inline", size: "sm", block: true, children: labels.missing(formatList(gaps, "conjunction", locale)) })
+      ]
+    }
+  );
+}
+const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+function ColumnMapper({
+  roles,
+  onChange,
+  label,
+  hint,
+  accept = DEFAULT_ACCEPT,
+  maxSize,
+  defaultText = "",
+  previewRows = 5,
+  guess,
+  disabled = false,
+  labels: labelsProp,
+  className
+}) {
+  const labels = useKitLabels(
+    "columnMapper",
+    DEFAULT_COLUMN_MAPPER_LABELS,
+    labelsProp
+  );
+  const firstMapping = (table2) => guess ? guess(table2) : guessMapping(roles, table2.header, table2.width);
+  const [state, setState] = useState(() => {
+    const table2 = parseTextTable(defaultText);
+    return {
+      text: defaultText,
+      header: null,
+      table: table2,
+      mapping: firstMapping(table2)
+    };
+  });
+  const [reading, setReading] = useState(false);
+  const [refusal, setRefusal] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+  const result = readMappedTable(state.table, roles, state.mapping);
+  const commit = (next) => {
+    setState(next);
+    onChange(
+      next.table.width === 0 ? null : readMappedTable(next.table, roles, next.mapping)
+    );
+  };
+  const take = (text, fresh) => {
+    const header = fresh ? null : state.header;
+    const table2 = parseTextTable(text, header === null ? {} : { header });
+    const keep = !fresh && table2.width === state.table.width && state.table.width > 0;
+    commit({
+      text,
+      header,
+      table: table2,
+      mapping: keep ? state.mapping : firstMapping(table2)
+    });
+  };
+  const load = (file) => {
+    setRefusal(null);
+    setReading(true);
+    void readTextFile(file).then(
+      (text) => take(text, true),
+      // Only the read: an error thrown by the caller's onChange is not the file's.
+      () => setRefusal(labels.readError(file.name))
+    ).finally(() => setReading(false));
+  };
+  const refuse = (rejections) => setRefusal(rejections[0]?.message ?? null);
+  const drop = useFilePicker({
+    accept,
+    maxSize,
+    disabled,
+    onFiles: ([file]) => load(file),
+    onReject: refuse
+  });
+  const seeded = useEffectEvent(() => {
+    if (state.table.width > 0) onChange(result);
+  });
+  useEffect(() => {
+    seeded();
+  }, []);
+  const { table } = state;
+  const separator = labels[SEPARATOR_LABEL[table.separator]];
+  const unread = result.unread;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-w-0 space-y-3", className),
+      "data-slot": "column-mapper",
+      children: [
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            label: label ?? labels.paste,
+            hint: hint ?? labels.pasteHint,
+            rows: 5,
+            wrap: "off",
+            spellCheck: false,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            value: state.text,
+            disabled,
+            className: cn(
+              "font-mono text-xs",
+              dragOver && "rounded-md ring-2 ring-[var(--brand)]"
+            ),
+            "data-drag-over": dragOver || void 0,
+            onChange: (event) => {
+              setRefusal(null);
+              take(event.target.value, false);
+            },
+            onDragEnter: (event) => {
+              if (!hasFiles(event)) return;
+              event.preventDefault();
+              if (!disabled) setDragOver(true);
+            },
+            onDragOver: (event) => {
+              if (!hasFiles(event)) return;
+              event.preventDefault();
+              event.dataTransfer.dropEffect = disabled ? "none" : "copy";
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: (event) => {
+              if (!hasFiles(event)) return;
+              event.preventDefault();
+              setDragOver(false);
+              drop.take(event.dataTransfer.files);
+            }
+          }
+        ),
+        drop.element,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-2", children: [
+          /* @__PURE__ */ jsxs(
+            FileButton,
+            {
+              variant: "secondary",
+              accept,
+              maxSize,
+              droppable: true,
+              pending: reading,
+              disabled,
+              onFiles: ([file]) => load(file),
+              onReject: refuse,
+              children: [
+                /* @__PURE__ */ jsx(Upload, { className: "size-4", "aria-hidden": true }),
+                labels.chooseFile
+              ]
+            }
+          ),
+          table.width > 0 && /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: labels.headerRow,
+              checked: table.header !== null,
+              disabled,
+              onCheckedChange: (checked) => {
+                const next = parseTextTable(state.text, { header: checked });
+                commit({ ...state, header: checked, table: next });
+              }
+            }
+          )
+        ] }),
+        refusal && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", variant: "inline", size: "sm", block: true, children: refusal }),
+        table.width > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs text-[var(--text-secondary)]",
+              "data-slot": "column-mapper-summary",
+              children: [
+                labels.summary(table.width, result.rows.length),
+                separator,
+                table.decimalComma ? labels.decimalComma : labels.decimalPoint
+              ].join(" \xB7 ")
+            }
+          ),
+          result.rows.length === 0 && /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", variant: "inline", size: "sm", block: true, children: labels.noRows }),
+          /* @__PURE__ */ jsx(
+            ColumnRoleTable,
+            {
+              header: table.header,
+              rows: result.rows,
+              width: table.width,
+              roles,
+              mapping: state.mapping,
+              onMappingChange: (mapping) => commit({ ...state, mapping }),
+              previewRows,
+              disabled,
+              labels: labelsProp
+            }
+          ),
+          unread.length > 0 && /* @__PURE__ */ jsx(
+            Disclosure,
+            {
+              variant: "bare",
+              title: labels.unreadCount(unread.length),
+              "data-slot": "column-mapper-unread",
+              children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1 text-xs", children: [
+                unread.slice(0, UNREAD_LISTED).map((line) => /* @__PURE__ */ jsxs("li", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { className: "block text-[var(--text-secondary)]", children: labels.unreadLine(line.line) }),
+                  /* @__PURE__ */ jsx("code", { className: "block truncate font-mono text-[var(--text-muted)]", children: line.text })
+                ] }, line.line)),
+                unread.length > UNREAD_LISTED && /* @__PURE__ */ jsx("li", { className: "text-[var(--text-muted)]", children: labels.unreadMore(unread.length - UNREAD_LISTED) })
+              ] })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ColumnMapper,
+  ColumnRoleTable,
+  DEFAULT_COLUMN_MAPPER_LABELS
+};
+//# sourceMappingURL=column-mapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/column-mapper.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from \"react\";\nimport type { ChangeEvent, DragEvent, 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 { 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. */\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\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  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}). Required\n * roles say so in the list, and what the table still needs is named under it — a\n * required group as \"either Amount, Debit or Credit\".\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.\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  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\n  return (\n    <div\n      className={cn(\"min-w-0 space-y-1.5\", className)}\n      data-slot=\"column-role-table\"\n    >\n      <Table density=\"compact\" framed aria-label={labels.table}>\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                    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\n                          ? labels.requiredRole(option.label)\n                          : option.label}\n                      </option>\n                    ))}\n                  </Select>\n                </TableHeaderCell>\n              );\n            })}\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {shown.map((row, index) => (\n            <TableRow 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      {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  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  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            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,