@eifi1/ui-kit 0.21.0 → 0.23.0

package/dist/components/inline-edit-field.js

@@ -0,0 +1,293 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { useAnnounce } from "../hooks/use-announce.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Input, Spinner } from "./ui.js";
+import { Tooltip } from "./tooltip.js";
+import { useCommitReason } from "./write-lock.js";
+const DEFAULT_INLINE_EDIT_LABELS = {
+  edit: (label) => `Edit ${label}`,
+  failed: "The change could not be saved.",
+  empty: "Empty"
+};
+function hasContent(node) {
+  return node !== void 0 && node !== null && node !== false && node !== "";
+}
+function RenderEditor({ render, ...props }) {
+  return render(props);
+}
+function asPromise(result) {
+  return result && typeof result.then === "function" ? result : null;
+}
+function InlineEditField(props) {
+  const {
+    value,
+    onCommit,
+    label,
+    display,
+    isEqual = Object.is,
+    placeholder,
+    align = "start",
+    readOnly = false,
+    disabledReason: ownDisabledReason,
+    commit,
+    redact = false,
+    formatError,
+    editing: editingProp,
+    onEditingChange,
+    inputProps,
+    className,
+    labels: labelsProp
+  } = props;
+  const editor = props.editor;
+  const labels = useKitLabels("inlineEdit", DEFAULT_INLINE_EDIT_LABELS, labelsProp);
+  const disabledReason = useCommitReason(commit, ownDisabledReason);
+  const locked = hasContent(disabledReason);
+  const [openState, setOpenState] = useState(false);
+  const open = editingProp ?? openState;
+  const editing = open && !locked && !readOnly;
+  const [draft, setDraft] = useState(value);
+  const [pending, setPending] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const failed = hasContent(failure);
+  const errorId = useId();
+  const reasonId = useId();
+  const displayRef = useRef(null);
+  const editorRef = useRef(null);
+  const alert = useAnnounce({ politeness: "assertive" });
+  const ended = useRef(false);
+  const blurTimer = useRef(null);
+  const mounted = useRef(true);
+  const draftRef = useRef(draft);
+  useEffect(() => {
+    draftRef.current = draft;
+  });
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      if (blurTimer.current) clearTimeout(blurTimer.current);
+    };
+  }, []);
+  const [wasEditing, setWasEditing] = useState(editing);
+  if (wasEditing !== editing) {
+    setWasEditing(editing);
+    if (editing) {
+      setDraft(value);
+      setFailure(null);
+      setPending(false);
+    }
+  }
+  if (openState && !editing && editingProp === void 0) setOpenState(false);
+  const prevEditing = useRef(editing);
+  useEffect(() => {
+    const changed = prevEditing.current !== editing;
+    prevEditing.current = editing;
+    if (!changed) return;
+    if (editing) {
+      ended.current = false;
+      const control = editorRef.current?.querySelector(
+        "input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button"
+      );
+      control?.focus();
+      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();
+      return;
+    }
+    ended.current = true;
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+    blurTimer.current = null;
+    const lost = document.activeElement === null || document.activeElement === document.body;
+    if (lost) displayRef.current?.focus();
+  }, [editing]);
+  const setOpen = (next) => {
+    if (editingProp === void 0) setOpenState(next);
+    onEditingChange?.(next);
+  };
+  const fail = (caught) => {
+    ended.current = false;
+    const message = formatError ? formatError(caught) : labels.failed;
+    setFailure(hasContent(message) ? message : labels.failed);
+    alert.announce(typeof message === "string" && message !== "" ? message : labels.failed);
+    const active = document.activeElement;
+    if (active === null || active === document.body) {
+      editorRef.current?.querySelector("input, textarea, select, [tabindex]")?.focus();
+    }
+  };
+  const save = (next = draftRef.current) => {
+    if (!editing || ended.current || pending) return;
+    ended.current = true;
+    if (next !== draftRef.current) setDraft(next);
+    if (isEqual(next, value)) {
+      setOpen(false);
+      return;
+    }
+    let result;
+    try {
+      result = onCommit(next);
+    } catch (caught) {
+      fail(caught);
+      return;
+    }
+    const promise = asPromise(result);
+    if (!promise) {
+      setOpen(false);
+      return;
+    }
+    setPending(true);
+    setFailure(null);
+    promise.then(
+      () => {
+        if (!mounted.current) return;
+        setPending(false);
+        setOpen(false);
+      },
+      (caught) => {
+        if (!mounted.current) return;
+        setPending(false);
+        fail(caught);
+      }
+    );
+  };
+  const cancel = () => {
+    if (!editing || pending) return;
+    ended.current = true;
+    setOpen(false);
+  };
+  const change = (next) => {
+    if (pending) return;
+    setDraft(next);
+    draftRef.current = next;
+    setFailure(null);
+  };
+  const onKeyDown = (e) => {
+    if (e.defaultPrevented) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancel();
+      return;
+    }
+    if (e.key === "Enter" && !e.nativeEvent.isComposing && !e.shiftKey) {
+      e.preventDefault();
+      save();
+    }
+  };
+  const onBlur = (e) => {
+    if (e.currentTarget.contains(e.relatedTarget)) return;
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+    blurTimer.current = setTimeout(() => {
+      blurTimer.current = null;
+      if (!mounted.current || failed) return;
+      save();
+    }, 0);
+  };
+  const onFocus = () => {
+    if (blurTimer.current) clearTimeout(blurTimer.current);
+    blurTimer.current = null;
+  };
+  const private_ = redact ? { "data-private": true } : void 0;
+  const shown = display ? display(value) : value === null || value === void 0 ? "" : String(value);
+  const content = hasContent(shown) ? shown : /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)]", children: placeholder ?? labels.empty });
+  const alignClass = align === "end" ? "text-end" : "text-start";
+  let body;
+  if (readOnly) {
+    body = /* @__PURE__ */ jsx("span", { ...private_, className: cn("block min-w-0 truncate", alignClass), children: content });
+  } else if (editing) {
+    const describedBy = failed ? errorId : void 0;
+    const editorProps = {
+      value: draft,
+      onChange: change,
+      commit: save,
+      cancel,
+      pending,
+      label,
+      invalid: failed,
+      describedBy,
+      inputProps: {
+        "aria-label": label,
+        "aria-invalid": failed || void 0,
+        "aria-describedby": describedBy,
+        readOnly: pending
+      }
+    };
+    body = // A wrapper for the keys and the focus, not a control: the keys belong to the
+    // field inside it, which is what has focus.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: editorRef,
+        ...private_,
+        onKeyDown,
+        onBlur,
+        onFocus,
+        "aria-busy": pending || void 0,
+        className: "min-w-0",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: editor ? /* @__PURE__ */ jsx(RenderEditor, { render: editor, ...editorProps }) : /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...inputProps,
+                ...editorProps.inputProps,
+                value: String(draft ?? ""),
+                onChange: (e) => change(e.target.value),
+                className: cn("px-2 py-1", alignClass, inputProps?.className)
+              }
+            ) }),
+            pending && /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4 shrink-0" })
+          ] }),
+          failed && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: failure })
+        ]
+      }
+    );
+  } else if (locked) {
+    body = /* @__PURE__ */ jsx(Tooltip, { label: disabledReason, className: "flex w-full min-w-0", children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: displayRef,
+          type: "button",
+          ...private_,
+          "aria-disabled": true,
+          "aria-describedby": reasonId,
+          onClick: (e) => e.preventDefault(),
+          className: cn(
+            "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+            alignClass
+          ),
+          children: content
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
+    ] }) });
+  } else {
+    body = // Lazy: a table of these mounts no bubble until one is hovered or focused, and
+    // the closed bubble's text is in no ancestor's accessible name.
+    /* @__PURE__ */ jsx(Tooltip, { label: labels.edit(label), lazy: true, className: "flex w-full min-w-0", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: displayRef,
+        type: "button",
+        ...private_,
+        onClick: () => setOpen(true),
+        className: cn(
+          "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+          alignClass
+        ),
+        children: content
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), "data-editing": editing || void 0, children: [
+    body,
+    /* @__PURE__ */ jsx("span", { ...alert.regionProps })
+  ] });
+}
+export {
+  DEFAULT_INLINE_EDIT_LABELS,
+  InlineEditField
+};
+//# sourceMappingURL=inline-edit-field.js.map

package/dist/components/inline-edit-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/inline-edit-field.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Input, Spinner } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\n\n/**\n * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`\n * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.\n */\nexport interface InlineEditLabels {\n  /** The display button's tooltip and description — what pressing it does. Receives\n   *  the field's `label` (\"Budget name\" → \"Edit Budget name\"). */\n  edit: (label: string) => string;\n  /** Shown (and spoken) when `onCommit` rejects and no `formatError` says better. */\n  failed: string;\n  /** What the display shows for an empty value, when no `placeholder` is given. */\n  empty: string;\n}\n\nexport const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {\n  edit: (label) => `Edit ${label}`,\n  failed: \"The change could not be saved.\",\n  empty: \"Empty\",\n};\n\n/** What an `editor` render prop is handed: the draft and the means to end the edit. */\nexport interface InlineEditorProps<T> {\n  /** The draft — seeded from `value` each time the editor opens. */\n  value: T;\n  /** Replace the draft (every keystroke). */\n  onChange: (next: T) => void;\n  /**\n   * End the edit and save. Without an argument it saves the draft; WITH one it saves\n   * that — for an editor whose own commit hands over a resolved value (`NumberInput`'s\n   * `onCommit` gives \"1050\" for a typed \"1100-50\"). Called twice (the editor's own\n   * Enter, then the field's), the second call does nothing.\n   */\n  commit: (next?: T) => void;\n  /** End the edit and drop the draft — what Escape does. */\n  cancel: () => void;\n  /** The save is in flight: make the control read-only (not disabled — it has focus). */\n  pending: boolean;\n  /** The field's `label`, for the control's accessible name. */\n  label: string;\n  /** The last save failed and the draft has not been touched since. */\n  invalid: boolean;\n  /** The id of the failure message while there is one, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** The four above as attributes — spread them on a kit field that takes the DOM\n   *  spelling: `<AmountInput {...p.inputProps} … />`. */\n  inputProps: {\n    \"aria-label\": string;\n    \"aria-invalid\": true | undefined;\n    \"aria-describedby\": string | undefined;\n    readOnly: boolean;\n  };\n}\n\ninterface InlineEditFieldBaseProps<T> {\n  /** The saved value — what the display shows, and what the editor opens on. */\n  value: T;\n  /**\n   * Save `next`. Return a promise and the field waits: the editor stays open and\n   * read-only with a spinner until it settles, closes when it resolves, and STAYS OPEN\n   * with the failure under it when it rejects (or throws) — the typed value is kept for\n   * a retry. Not called when the draft equals `value` (see `isEqual`): opening the\n   * editor and leaving it unchanged is not a write.\n   */\n  onCommit: (next: T) => void | Promise<unknown>;\n  /** What the value is (\"Budget name\", \"Assigned\") — the editor's accessible name and\n   *  the subject of the display's \"Edit …\" description. Not drawn: inline, the row or\n   *  the column header is the visible label. */\n  label: string;\n  /** The value as the display shows it — a formatted amount, a date. Default: the\n   *  value as text. */\n  display?: (value: T) => ReactNode;\n  /** Whether the draft is unchanged, so leaving the editor is not a write. Default\n   *  `Object.is`. keksdose compares assigned amounts as NUMBERS — \"1100\" is the\n   *  server's \"1100.0000\". */\n  isEqual?: (a: T, b: T) => boolean;\n  /** What the display shows for an empty value (`\"\"`, `null`, an empty `display`).\n   *  Default `labels.empty`. */\n  placeholder?: ReactNode;\n  /** `\"end\"` for a figure in a right-aligned money column. Default `\"start\"`. */\n  align?: \"start\" | \"end\";\n  /** Look, do not touch — a guest's view: the value as plain text, no button. */\n  readOnly?: boolean;\n  /**\n   * Why it cannot be edited now — the write lock's sentence, a closed period. The\n   * value stays a BUTTON (focusable, `aria-disabled`) with the reason in the kit\n   * Tooltip and its description; it opens no editor. An editor that is open when the\n   * reason arrives closes, its draft dropped: a field you can type into must be one\n   * whose value can be saved (keksdose dev#496).\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the\n   *  `disabledReason` path with the lock's reason (which wins over its own). No\n   *  provider, or an unlocked one: no effect. */\n  commit?: boolean;\n  /** The value is the user's own data: `data-private` on the display and the editor,\n   *  so the app's demo-mode blur covers both. */\n  redact?: boolean;\n  /** Turns a rejection into words. Default `labels.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Controlled open state — a row's swipe action that opens the editor from outside\n   *  (keksdose's assigned cell). Left out, the field keeps its own. */\n  editing?: boolean;\n  /** Called with the next open state: on open, on a save that resolved, on cancel. */\n  onEditingChange?: (editing: boolean) => void;\n  /** Attributes for the DEFAULT text editor's `<input>` — `maxLength`, `inputMode`,\n   *  `autoComplete`. Ignored with `editor`. */\n  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\">;\n  /** Classes for the root. */\n  className?: string;\n  labels?: Partial<InlineEditLabels>;\n}\n\ntype EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;\n\n/**\n * The editor. Optional for a string value — the kit's `Input`, compact — and\n * REQUIRED for anything else, since only the caller knows how to edit a number or an\n * amount. Render a kit field from the props it is handed:\n *\n * ```tsx\n * editor={(p) => (\n *   <NumberInput calculator={false} ariaLabel={p.label} value={p.value} onChange={p.onChange}\n *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />\n * )}\n * ```\n *\n * The field itself handles Enter (save), Escape (cancel) and focus leaving the editor\n * (save) around whatever is rendered — a key the editor has already handled\n * (`preventDefault`, as a listbox does for its Enter) is left to it. Focus counts as\n * \"inside\" across a portal, so a picker or a phone keypad the editor opens does not\n * end the edit.\n */\nexport type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> &\n  ([T] extends [string] ? { editor?: EditorRender<T> } : { editor: EditorRender<T> });\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** Calls the `editor` render prop as a component of its own: the props it is handed\n *  close over the field's refs, and a render prop called in the field's own render\n *  would read like a ref read during render. Module-level, so the type is stable and\n *  the editor never remounts. */\nfunction RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render: EditorRender<T> }) {\n  return render(props);\n}\n\n/** `onCommit`'s result, if it is a promise. */\nfunction asPromise(result: unknown): Promise<unknown> | null {\n  return result && typeof (result as Promise<unknown>).then === \"function\" ? (result as Promise<unknown>) : null;\n}\n\n/**\n * A value that edits in place: a quiet button showing the value; click it (or Enter\n * on it) and it becomes a field; Enter or leaving the field saves, Escape cancels\n * (keksdose K9).\n *\n * keksdose has three of them by hand — the budget's assigned cell (budget-cells.tsx),\n * the invoice line's value cells (invoice-lines-table.tsx `EditableCell`) and the\n * budget rename (budgets-page.tsx, an `Input` + Save + Cancel with no Escape) — and\n * each had to learn the same rules:\n *\n *  - **The display's accessible name is the VALUE.** A cell named \"Edit\" reads a table\n *    of \"edit, edit, edit\"; the action is the description instead (\"Edit Assigned\"),\n *    in the kit Tooltip on hover and focus.\n *  - **An unchanged draft is not a write.** Opening the editor and leaving it was a PUT\n *    in keksdose until `isEqual` compared numbers, and on a sealed budget an outbox row\n *    for a change nobody made.\n *  - **A failed save keeps the editor.** The typed value is the user's work; the\n *    failure is shown under it (attached with `aria-describedby`, and spoken), and the\n *    next keystroke clears it. Escape still drops the draft.\n *  - **Locked means a disabled BUTTON, not a disabled field** (keksdose dev#496): at\n *    rest a real row shows this button, so a locked page shows the same, with the\n *    reason — never a field that takes keys it cannot save.\n *\n * Inside a {@link DataTable} cell it needs nothing extra: the table already leaves a\n * click or a key on a control of the cell to that control. Focus returns to the value\n * after Enter or Escape; after a save that came from focus leaving, it stays where the\n * user put it.\n *\n * ```tsx\n * <InlineEditField label={t(\"budgets.name\")} value={budget.name}\n *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />\n * ```\n */\nexport function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {\n  const {\n    value,\n    onCommit,\n    label,\n    display,\n    isEqual = Object.is,\n    placeholder,\n    align = \"start\",\n    readOnly = false,\n    disabledReason: ownDisabledReason,\n    commit,\n    redact = false,\n    formatError,\n    editing: editingProp,\n    onEditingChange,\n    inputProps,\n    className,\n    labels: labelsProp,\n  } = props;\n  const editor = props.editor as EditorRender<T> | undefined;\n  const labels = useKitLabels(\"inlineEdit\", DEFAULT_INLINE_EDIT_LABELS, labelsProp);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n\n  const [openState, setOpenState] = useState(false);\n  const open = editingProp ?? openState;\n  // Locked (or read-only) wins over an open flag: a stale `editing` must never bring a\n  // live commit-on-blur field back on a page that cannot save it.\n  const editing = open && !locked && !readOnly;\n  const [draft, setDraft] = useState<T>(value);\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const failed = hasContent(failure);\n\n  const errorId = useId();\n  const reasonId = useId();\n  const displayRef = useRef<HTMLButtonElement>(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n  const alert = useAnnounce({ politeness: \"assertive\" });\n\n  // One edit ends once: Enter in a NumberInput commits through its own `onCommit` and\n  // then reaches the field's Enter; a save that closes the editor unmounts the focused\n  // control, which some browsers answer with a blur. The second ending is a no-op.\n  const ended = useRef(false);\n  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  // The latest draft for the deferred blur check, which runs after a render.\n  const draftRef = useRef(draft);\n  useEffect(() => {\n    draftRef.current = draft;\n  });\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n      if (blurTimer.current) clearTimeout(blurTimer.current);\n    };\n  }, []);\n\n  // Seed the draft when the editor opens — from wherever the open came (the button, a\n  // controlled `editing`). During render, like DangerConfirm's wipe, so no frame shows\n  // the editor holding the previous edit's text.\n  const [wasEditing, setWasEditing] = useState(editing);\n  if (wasEditing !== editing) {\n    setWasEditing(editing);\n    if (editing) {\n      setDraft(value);\n      setFailure(null);\n      setPending(false);\n    }\n  }\n  // An open editor that a lock (or `readOnly`) took away is closed for good, not\n  // merely hidden until the lock lifts.\n  if (openState && !editing && editingProp === undefined) setOpenState(false);\n\n  // Focus follows the edit: into the editor when it opens, back to the value when it\n  // closes — but only if focus went down with the editor (Enter, Escape, a save that\n  // resolved under it). A save that came from focus LEAVING keeps focus where it went.\n  const prevEditing = useRef(editing);\n  useEffect(() => {\n    const changed = prevEditing.current !== editing;\n    prevEditing.current = editing;\n    if (!changed) return;\n    if (editing) {\n      // A fresh edit, which may end once. Here rather than in the seed above: a ref is\n      // not written during render, and no event can end the edit before this runs.\n      ended.current = false;\n      const control = editorRef.current?.querySelector<HTMLElement>(\n        \"input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button\",\n      );\n      control?.focus();\n      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();\n      return;\n    }\n    // However it closed — a save, Escape, a lock taking it away — a blur check still\n    // queued from the editor has nothing left to save.\n    ended.current = true;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (lost) displayRef.current?.focus();\n  }, [editing]);\n\n  const setOpen = (next: boolean) => {\n    if (editingProp === undefined) setOpenState(next);\n    onEditingChange?.(next);\n  };\n\n  const fail = (caught: unknown) => {\n    ended.current = false;\n    const message = formatError ? formatError(caught) : labels.failed;\n    setFailure(hasContent(message) ? message : labels.failed);\n    alert.announce(typeof message === \"string\" && message !== \"\" ? message : labels.failed);\n    // Focus back into the editor if the failure left it nowhere (a pending field that\n    // the browser let go of); never pulled back from somewhere the user went.\n    const active = document.activeElement;\n    if (active === null || active === document.body) {\n      editorRef.current?.querySelector<HTMLElement>(\"input, textarea, select, [tabindex]\")?.focus();\n    }\n  };\n\n  const save = (next: T = draftRef.current) => {\n    if (!editing || ended.current || pending) return;\n    ended.current = true;\n    if (next !== draftRef.current) setDraft(next);\n    if (isEqual(next, value)) {\n      setOpen(false);\n      return;\n    }\n    let result: unknown;\n    try {\n      result = onCommit(next);\n    } catch (caught) {\n      fail(caught);\n      return;\n    }\n    const promise = asPromise(result);\n    if (!promise) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    setFailure(null);\n    promise.then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setOpen(false);\n      },\n      (caught: unknown) => {\n        if (!mounted.current) return;\n        setPending(false);\n        fail(caught);\n      },\n    );\n  };\n\n  const cancel = () => {\n    // A request that has left cannot be called back; Escape waits for it.\n    if (!editing || pending) return;\n    ended.current = true;\n    setOpen(false);\n  };\n\n  const change = (next: T) => {\n    if (pending) return;\n    setDraft(next);\n    // Now, not after the render: a blur check scheduled before that render reads it.\n    draftRef.current = next;\n    // The failure described the draft that was sent; once edited it describes nothing\n    // on screen, and the next save (or blur) is a fresh attempt.\n    setFailure(null);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      // Ours, not the dialog's or the popover's around the field.\n      e.preventDefault();\n      e.stopPropagation();\n      cancel();\n      return;\n    }\n    // Not mid-composition: Enter there picks the IME's candidate (Japanese, Chinese).\n    if (e.key === \"Enter\" && !e.nativeEvent.isComposing && !e.shiftKey) {\n      e.preventDefault();\n      save();\n    }\n  };\n\n  // Leaving the editor saves. Deferred one task, and cancelled by any focus that lands\n  // back inside: React reports focus moves through PORTALS to the component tree, so a\n  // calculator popover or a phone keypad the editor opened counts as inside, which a\n  // DOM `contains` check would get wrong. A failure on screen holds the editor: the\n  // user is looking at why, and moving away is not a retry.\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = setTimeout(() => {\n      blurTimer.current = null;\n      if (!mounted.current || failed) return;\n      save();\n    }, 0);\n  };\n  const onFocus = () => {\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n  };\n\n  const private_ = redact ? { \"data-private\": true } : undefined;\n  const shown = display ? display(value) : value === null || value === undefined ? \"\" : String(value);\n  const content = hasContent(shown) ? (\n    shown\n  ) : (\n    <span className=\"text-[var(--text-muted)]\">{placeholder ?? labels.empty}</span>\n  );\n  const alignClass = align === \"end\" ? \"text-end\" : \"text-start\";\n\n  let body: ReactNode;\n  if (readOnly) {\n    body = (\n      <span {...private_} className={cn(\"block min-w-0 truncate\", alignClass)}>\n        {content}\n      </span>\n    );\n  } else if (editing) {\n    const describedBy = failed ? errorId : undefined;\n    const editorProps: InlineEditorProps<T> = {\n      value: draft,\n      onChange: change,\n      commit: save,\n      cancel,\n      pending,\n      label,\n      invalid: failed,\n      describedBy,\n      inputProps: {\n        \"aria-label\": label,\n        \"aria-invalid\": failed || undefined,\n        \"aria-describedby\": describedBy,\n        readOnly: pending,\n      },\n    };\n    body = (\n      // A wrapper for the keys and the focus, not a control: the keys belong to the\n      // field inside it, which is what has focus.\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above\n      <div\n        ref={editorRef}\n        {...private_}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        aria-busy={pending || undefined}\n        className=\"min-w-0\"\n      >\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">\n            {editor ? (\n              <RenderEditor render={editor} {...editorProps} />\n            ) : (\n              <Input\n                {...inputProps}\n                {...editorProps.inputProps}\n                value={String(draft ?? \"\")}\n                onChange={(e) => change(e.target.value as unknown as T)}\n                className={cn(\"px-2 py-1\", alignClass, inputProps?.className)}\n              />\n            )}\n          </div>\n          {/* Decorative: `aria-busy` on the wrapper says it. */}\n          {pending && <Spinner label={null} className=\"size-4 shrink-0\" />}\n        </div>\n        {failed && (\n          <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n            {failure}\n          </p>\n        )}\n      </div>\n    );\n  } else if (locked) {\n    // Button's `disabledReason` path, spelled out for a button that must look like\n    // the value rather than like a Button: focusable, `aria-disabled`, every\n    // activation swallowed, the reason in the kit Tooltip and in a `hidden` copy that\n    // describes it. The button in a FRAGMENT so the Tooltip does not add the bubble as\n    // a second description of the same sentence.\n    body = (\n      <Tooltip label={disabledReason} className=\"flex w-full min-w-0\">\n        <>\n          <button\n            ref={displayRef}\n            type=\"button\"\n            {...private_}\n            aria-disabled\n            aria-describedby={reasonId}\n            onClick={(e) => e.preventDefault()}\n            className={cn(\n              \"block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n              alignClass,\n            )}\n          >\n            {content}\n          </button>\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  } else {\n    body = (\n      // Lazy: a table of these mounts no bubble until one is hovered or focused, and\n      // the closed bubble's text is in no ancestor's accessible name.\n      <Tooltip label={labels.edit(label)} lazy className=\"flex w-full min-w-0\">\n        <button\n          ref={displayRef}\n          type=\"button\"\n          {...private_}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n            alignClass,\n          )}\n        >\n          {content}\n        </button>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-editing={editing || undefined}>\n      {body}\n      {/* Always mounted: a live region that mounts with its message is usually missed. */}\n      <span {...alert.regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/language-select.d.ts

@@ -0,0 +1,130 @@
+import * as react from 'react';
+import { KitLanguageCode, KitLanguage } from '../i18n/languages.js';
+import { bw as SelectProps } from '../feedback-BxeQVzwq.js';
+import '../shell/topbar-controls.js';
+import '../theme/palette-presets.js';
+import '../theme/chart-palette.js';
+import '../theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './mini-calendar.js';
+import './calendar-heatmap.js';
+import './popover.js';
+import './chip.js';
+import './field-sync.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './pie-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
+import './swatch-picker.js';
+import './tile-radio.js';
+import './icon-picker.js';
+import './dialog-frame.js';
+import './modal.js';
+import '../hooks/use-search-param-state.js';
+import './measured-grid.js';
+import './account-settings-labels.js';
+import './floating-panel.js';
+import './bulk-action-bar.js';
+import './list.js';
+import './signed-amount.js';
+import './breadcrumbs.js';
+import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
+import './write-lock.js';
+import './legal.js';
+import './account-chips.js';
+import '../lib/format.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
+import './column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import './field-parts.js';
+
+/**
+ * A language as a FORM FIELD: one of the codes an app offers, picked in a form beside
+ * other fields — label, hint and error like every kit field, controlled, submitted with
+ * the rest.
+ *
+ * Kurvenschmiede's admin invites people by mail, and the invitation goes out in a
+ * language the admin picks, because the invitee has no account yet to say theirs
+ * (allowlist-panel.tsx: a `Select` with an `<option>` per language, spelled out by
+ * hand). Neither language control the kit had fits there: `LanguageMenu` is the top
+ * bar's switcher for the reader's OWN language, a flag in a hover menu that changes the
+ * page the moment it is picked; `LanguageSetting` is the settings row for the same
+ * thing and takes ready-made `{ code, label }` rows. This one is for a language that
+ * belongs to something else — an invitation, a mail template, a customer's
+ * correspondence — and takes only the CODES: the names come from the kit's registry
+ * ({@link languageOptions}), the same "Deutsch", "Français", "简体中文" the switcher shows.
+ *
+ * Every {@link Select} prop passes through (`label`, `hint`, `error`, `required`,
+ * `disabled`, `size`, `name`, `id`, `data-*`); only `value`, `onChange` and the options
+ * are this component's.
+ *
+ * WHAT IT SHOWS FOR `value`. The offered code that answers it, by
+ * {@link resolveLanguage}'s rule: so i18next's `resolvedLanguage` can be handed in as it
+ * comes, and a stored `de` or `de-AT` shows as the one German, `de-CH`. A value that
+ * answers to none of the codes shows the fallback `resolveLanguage` would pick (`de-CH`
+ * when offered, else the first code) — where a bare native select would show its first
+ * option and say nothing. Either way the field does not write the resolved code back:
+ * `onChange` fires when the person picks, as on any field. Keep `value` one of `codes`
+ * (resolve it once, where the state starts) and what is shown is what is submitted.
+ *
+ * Each name is marked with its own language (`lang`), so a screen reader says
+ * "Français" in French rather than spelling it in the page's voice. A caller's
+ * `optionLabel` (English names for a team-facing list) is in the page's language, and
+ * goes unmarked.
+ */
+interface LanguageSelectProps extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
+    /** The chosen language: one of `codes` — or any tag, shown as the code it resolves to. */
+    value: string;
+    /** The picked code — always one of `codes`. */
+    onChange: (code: KitLanguageCode) => void;
+    /** The languages to offer, in the order to list them. Default: all seven
+     *  ({@link KIT_LANGUAGES}' order, alphabetical by native name). */
+    codes?: readonly KitLanguageCode[];
+    /**
+     * The text of each option. Default: the language's name in itself — the right name
+     * for a reader looking for theirs, and for an admin choosing what an invitee reads.
+     * `(language) => language.englishName` for a list read by a team rather than by the
+     * language's readers (a reviewer grant), or the app's own words for a code.
+     */
+    optionLabel?: (language: KitLanguage) => string;
+}
+declare const LanguageSelect: react.ForwardRefExoticComponent<LanguageSelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+export { LanguageSelect, type LanguageSelectProps };

package/dist/components/language-select.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { KIT_LANGUAGES, languageOptions, resolveLanguage } from "../i18n/languages.js";
+import { Select } from "./ui.js";
+const ALL_CODES = KIT_LANGUAGES.map((language) => language.code);
+const LanguageSelect = forwardRef(function LanguageSelect2({ value, onChange, codes = ALL_CODES, optionLabel, ...rest }, ref) {
+  const shown = resolveLanguage([value], codes);
+  return /* @__PURE__ */ jsx(Select, { ...rest, ref, value: shown, onChange: (e) => onChange(e.target.value), children: languageOptions(codes).map((option) => {
+    const language = KIT_LANGUAGES.find((entry) => entry.code === option.code);
+    return /* @__PURE__ */ jsx("option", { value: option.code, lang: optionLabel ? void 0 : language.formatLocale, children: optionLabel ? optionLabel(language) : option.label }, option.code);
+  }) });
+});
+LanguageSelect.displayName = "LanguageSelect";
+export {
+  LanguageSelect
+};
+//# sourceMappingURL=language-select.js.map

package/dist/components/language-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/language-select.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { KIT_LANGUAGES, languageOptions, resolveLanguage } from \"../i18n/languages\";\nimport type { KitLanguage, KitLanguageCode } from \"../i18n/languages\";\nimport { Select } from \"./ui\";\nimport type { SelectProps } from \"./ui\";\n\n/**\n * A language as a FORM FIELD: one of the codes an app offers, picked in a form beside\n * other fields — label, hint and error like every kit field, controlled, submitted with\n * the rest.\n *\n * Kurvenschmiede's admin invites people by mail, and the invitation goes out in a\n * language the admin picks, because the invitee has no account yet to say theirs\n * (allowlist-panel.tsx: a `Select` with an `<option>` per language, spelled out by\n * hand). Neither language control the kit had fits there: `LanguageMenu` is the top\n * bar's switcher for the reader's OWN language, a flag in a hover menu that changes the\n * page the moment it is picked; `LanguageSetting` is the settings row for the same\n * thing and takes ready-made `{ code, label }` rows. This one is for a language that\n * belongs to something else — an invitation, a mail template, a customer's\n * correspondence — and takes only the CODES: the names come from the kit's registry\n * ({@link languageOptions}), the same \"Deutsch\", \"Français\", \"简体中文\" the switcher shows.\n *\n * Every {@link Select} prop passes through (`label`, `hint`, `error`, `required`,\n * `disabled`, `size`, `name`, `id`, `data-*`); only `value`, `onChange` and the options\n * are this component's.\n *\n * WHAT IT SHOWS FOR `value`. The offered code that answers it, by\n * {@link resolveLanguage}'s rule: so i18next's `resolvedLanguage` can be handed in as it\n * comes, and a stored `de` or `de-AT` shows as the one German, `de-CH`. A value that\n * answers to none of the codes shows the fallback `resolveLanguage` would pick (`de-CH`\n * when offered, else the first code) — where a bare native select would show its first\n * option and say nothing. Either way the field does not write the resolved code back:\n * `onChange` fires when the person picks, as on any field. Keep `value` one of `codes`\n * (resolve it once, where the state starts) and what is shown is what is submitted.\n *\n * Each name is marked with its own language (`lang`), so a screen reader says\n * \"Français\" in French rather than spelling it in the page's voice. A caller's\n * `optionLabel` (English names for a team-facing list) is in the page's language, and\n * goes unmarked.\n */\nexport interface LanguageSelectProps extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\" | \"multiple\"> {\n  /** The chosen language: one of `codes` — or any tag, shown as the code it resolves to. */\n  value: string;\n  /** The picked code — always one of `codes`. */\n  onChange: (code: KitLanguageCode) => void;\n  /** The languages to offer, in the order to list them. Default: all seven\n   *  ({@link KIT_LANGUAGES}' order, alphabetical by native name). */\n  codes?: readonly KitLanguageCode[];\n  /**\n   * The text of each option. Default: the language's name in itself — the right name\n   * for a reader looking for theirs, and for an admin choosing what an invitee reads.\n   * `(language) => language.englishName` for a list read by a team rather than by the\n   * language's readers (a reviewer grant), or the app's own words for a code.\n   */\n  optionLabel?: (language: KitLanguage) => string;\n}\n\nconst ALL_CODES: readonly KitLanguageCode[] = KIT_LANGUAGES.map((language) => language.code);\n\nexport const LanguageSelect = forwardRef<HTMLSelectElement, LanguageSelectProps>(function LanguageSelect(\n  { value, onChange, codes = ALL_CODES, optionLabel, ...rest },\n  ref,\n) {\n  const shown = resolveLanguage([value], codes);\n  return (\n    <Select {...rest} ref={ref} value={shown} onChange={(e) => onChange(e.target.value as KitLanguageCode)}>\n      {languageOptions(codes).map((option) => {\n        const language = KIT_LANGUAGES.find((entry) => entry.code === option.code)!;\n        return (\n          <option key={option.code} value={option.code} lang={optionLabel ? undefined : language.formatLocale}>\n            {optionLabel ? optionLabel(language) : option.label}\n          </option>\n        );\n      })}\n    </Select>\n  );\n});\nLanguageSelect.displayName = \"LanguageSelect\";\n"],"mappings":";AAqEU;AArEV,SAAS,kBAAkB;AAC3B,SAAS,eAAe,iBAAiB,uBAAuB;AAEhE,SAAS,cAAc;AAsDvB,MAAM,YAAwC,cAAc,IAAI,CAAC,aAAa,SAAS,IAAI;AAEpF,MAAM,iBAAiB,WAAmD,SAASA,gBACxF,EAAE,OAAO,UAAU,QAAQ,WAAW,aAAa,GAAG,KAAK,GAC3D,KACA;AACA,QAAM,QAAQ,gBAAgB,CAAC,KAAK,GAAG,KAAK;AAC5C,SACE,oBAAC,UAAQ,GAAG,MAAM,KAAU,OAAO,OAAO,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB,GAClG,0BAAgB,KAAK,EAAE,IAAI,CAAC,WAAW;AACtC,UAAM,WAAW,cAAc,KAAK,CAAC,UAAU,MAAM,SAAS,OAAO,IAAI;AACzE,WACE,oBAAC,YAAyB,OAAO,OAAO,MAAM,MAAM,cAAc,SAAY,SAAS,cACpF,wBAAc,YAAY,QAAQ,IAAI,OAAO,SADnC,OAAO,IAEpB;AAAA,EAEJ,CAAC,GACH;AAEJ,CAAC;AACD,eAAe,cAAc;","names":["LanguageSelect"]}

package/dist/components/line-items.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, Key } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Key, HTMLAttributes } from 'react';
 
 /** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */
 interface LineItemsLabels {
@@ -97,6 +97,14 @@ interface LineItemsColumn<T> {
     narrowSpan?: 1 | 2;
     render: (ctx: LineItemCellContext<T>) => ReactNode;
 }
+/**
+ * What {@link LineItemsProps.rowProps} returns for one row: `data-*` hooks, an `id`, a
+ * class, handlers. A `data-*` attribute is typed so `{ "data-tour": "rule-condition" }`
+ * needs no cast.
+ */
+type LineItemsRowProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML" | "role"> & {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
 interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     items: readonly T[];
     columns: readonly LineItemsColumn<T>[];
@@ -155,6 +163,20 @@ interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "child
     removeAlign?: LineItemsRemoveAlign;
     /** Disables add and remove (the fields are the caller's to disable). */
     disabled?: boolean;
+    /**
+     * Extra attributes for one row's element (the `role="group"` that holds its fields) —
+     * keksdose K20: its rule editor's tour points at the first condition row with
+     * `[data-tour="rule-condition"]` (dev#495), and with nowhere to put the anchor on the
+     * row it wrapped a cell's field in a `span` instead, which the spotlight then drew
+     * around one field rather than the row. Test ids the same way.
+     *
+     * MERGED under the list's own, which win: `role`, the group's `aria-label` (that is
+     * {@link rowLabel}'s) and `data-line-items-row` stay the list's — the row's name and
+     * the hook its focus handling finds rows by. `className` is added after the row's
+     * own classes, `style` is passed through, and an `onKeyDown` runs BEFORE the row's
+     * Ctrl/⌘+Enter "add a row" (call `preventDefault()` to keep that from happening).
+     */
+    rowProps?: (item: T, index: number) => LineItemsRowProps | undefined;
     labels?: Partial<LineItemsLabels>;
 }
 /**
@@ -184,6 +206,6 @@ interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "child
  * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a
  * row.
  */
-declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, summary, fieldLabels, narrowColumns, removePlacement, removeAlign: removeAlignProp, disabled, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
+declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, summary, fieldLabels, narrowColumns, removePlacement, removeAlign: removeAlignProp, disabled, rowProps, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
 
-export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsFieldLabels, type LineItemsLabels, type LineItemsProps, type LineItemsRemoveAlign, type LineItemsRemovePlacement, type LineItemsSummary, type LineItemsSummaryTone };
+export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsFieldLabels, type LineItemsLabels, type LineItemsProps, type LineItemsRemoveAlign, type LineItemsRemovePlacement, type LineItemsRowProps, type LineItemsSummary, type LineItemsSummaryTone };