@eifi1/ui-kit 0.32.2 → 0.33.0

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

@@ -1 +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 { FOCUS_RING } from \"./focus-ring\";\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/**\n * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the display button, the\n * locked one and the read-only text wrap instead of ending in \"…\", and break a word too\n * long for the cell, so an IBAN or an e-mail address shows to its last character. The\n * value IS the button's accessible name and the thing being edited: a reader who needs\n * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of\n * these keeps its one-line cells at Normal.\n *\n * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's\n * budget and invoice lines), and `anywhere` lowers the value's min-content width to one\n * letter, so an auto-sized column could squeeze an amount to a digit per line. With\n * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider\n * than a sized cell still breaks.\n */\nconst VALUE_WRAP_AT_LARGE = \"large:whitespace-normal large:break-words\";\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\", VALUE_WRAP_AT_LARGE, 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-caption 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\",\n              VALUE_WRAP_AT_LARGE,\n              FOCUS_RING,\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\",\n            VALUE_WRAP_AT_LARGE,\n            FOCUS_RING,\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":[]}
+{"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 { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } 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?: CommitScope;\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/**\n * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the display button, the\n * locked one and the read-only text wrap instead of ending in \"…\", and break a word too\n * long for the cell, so an IBAN or an e-mail address shows to its last character. The\n * value IS the button's accessible name and the thing being edited: a reader who needs\n * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of\n * these keeps its one-line cells at Normal.\n *\n * 0.33 (§10.17): the kit's one `truncate-until-large` (tokens.css) in place of this\n * file's own `truncate` + `large:whitespace-normal large:break-words`. The utility\n * breaks with `overflow-wrap: anywhere`, which lowers the value's min-content width: in\n * an auto-sized table column (keksdose's budget and invoice lines) give the column a\n * width, or an amount can be squeezed to a digit per line.\n */\nconst VALUE_TRUNCATE = \"truncate-until-large\";\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\", VALUE_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-caption 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 rounded-sm focus:outline-none\",\n              VALUE_TRUNCATE,\n              FOCUS_RING,\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 rounded-sm underline-offset-2 hover:underline focus:outline-none\",\n            VALUE_TRUNCATE,\n            FOCUS_RING,\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

@@ -1,18 +1,23 @@
 import * as react from 'react';
-import { eY as SelectProps, d$ as KitLanguageCode, d_ as KitLanguage } from '../delete-account-setting-Dy4kJgUm.js';
+import { f8 as SelectProps, e0 as KitLanguageCode, d$ as KitLanguage } from '../delete-account-setting-DiPX4Vue.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ 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';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/legal-page.d.ts

@@ -1,20 +1,25 @@
 import * as react from 'react';
 import { Ref, ReactNode } from 'react';
-import { ej as LegalPageKey, e4 as LabelOverride, ea as LegalLabels, eg as LegalOperator } from '../delete-account-setting-Dy4kJgUm.js';
+import { ek as LegalPageKey, e5 as LabelOverride, eb as LegalLabels, eh as LegalOperator } from '../delete-account-setting-DiPX4Vue.js';
 import { CheckboxProps } from './checkbox.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -26,7 +31,6 @@ 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';
@@ -38,9 +42,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -56,7 +57,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/legal.d.ts

@@ -1,18 +1,23 @@
 import 'react';
-export { cF as DEFAULT_LEGAL_LABELS, e2 as LEGAL_HREFS, e6 as LegalDisclaimerSectionLabels, e7 as LegalFooter, e8 as LegalFooterProps, e9 as LegalFramedSectionLabels, ea as LegalLabels, eb as LegalLayout, ec as LegalLayoutProps, ed as LegalLink, ee as LegalLinks, ef as LegalLinksProps, eg as LegalOperator, eh as LegalOperatorSectionLabels, ei as LegalOperatorText, gk as LegalPageContext, gl as LegalPageContextValue, ej as LegalPageKey, gm as LegalRefTarget, ek as LegalSection, el as LegalSectionProps, gn as LegalSectionSlot, go as LegalSlotContext, gp as LegalText, em as LegalTextSectionLabels, gq as baseLanguage, fR as legalOperatorText, gr as resolveLegalRefs, ga as useLegalLabels, gs as warnLegalOnce } from '../delete-account-setting-Dy4kJgUm.js';
+export { cF as DEFAULT_LEGAL_LABELS, e3 as LEGAL_HREFS, e7 as LegalDisclaimerSectionLabels, e8 as LegalFooter, e9 as LegalFooterProps, ea as LegalFramedSectionLabels, eb as LegalLabels, ec as LegalLayout, ed as LegalLayoutProps, ee as LegalLink, ef as LegalLinks, eg as LegalLinksProps, eh as LegalOperator, ei as LegalOperatorSectionLabels, ej as LegalOperatorText, gz as LegalPageContext, gA as LegalPageContextValue, ek as LegalPageKey, gB as LegalRefTarget, el as LegalSection, em as LegalSectionProps, gC as LegalSectionSlot, gD as LegalSlotContext, gE as LegalText, en as LegalTextSectionLabels, gF as baseLanguage, g1 as legalOperatorText, gG as resolveLegalRefs, gn as useLegalLabels, gH as warnLegalOnce } from '../delete-account-setting-DiPX4Vue.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
+import './field-parts.js';
+import './write-lock.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ 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';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/list.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, ReactElement, MouseEvent, Ref } from 'react';
 import { LucideIcon } from 'lucide-react';
 import { TextTone } from './signed-amount.js';
+import { CommitScope } from './write-lock.js';
 import './stat-tile.js';
 
 interface ListLabels {
@@ -263,7 +264,7 @@ type ListItemProps = ListItemBaseProps & (({
      * the `disabledReason` way with the lock's reason (which wins over its own). No
      * provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.
      */
-    commit?: boolean;
+    commit?: CommitScope;
     href?: never;
     renderLink?: never;
     external?: never;

package/dist/components/list.js

@@ -42,7 +42,6 @@ const PAD = {
   comfortable: { target: "gap-3 px-4 py-3", actions: "pe-3", leadingActions: "ps-3", gap: "gap-1", body: "px-4 pb-3" }
 };
 const TARGET_RING = cn(FOCUS_RING, "focus-visible:ring-inset");
-const WRAP_AT_LARGE = "large:whitespace-normal large:[overflow-wrap:anywhere]";
 const UNCLAMP_AT_LARGE = "large:line-clamp-none";
 const ListItem = forwardRef(function ListItem2({
   title,
@@ -121,14 +120,14 @@ const ListItem = forwardRef(function ListItem2({
     ),
     leading,
     /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 flex-1 flex-col", trailing != null && "large:basis-40"), children: [
-      overline != null && /* @__PURE__ */ jsx("span", { className: cn("block truncate text-caption font-medium leading-snug text-[var(--text-muted)]", WRAP_AT_LARGE), children: overline }),
+      overline != null && /* @__PURE__ */ jsx("span", { className: "block truncate-until-large text-caption font-medium leading-snug text-[var(--text-muted)]", children: overline }),
       /* @__PURE__ */ jsxs(
         "span",
         {
           id: stacked ? titleId : void 0,
           className: cn(
             "block text-sm text-[var(--text-primary)]",
-            titleLines === 1 ? cn("truncate", WRAP_AT_LARGE) : titleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : "break-words",
+            titleLines === 1 ? "truncate-until-large" : titleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : "break-words",
             unread ? "font-semibold" : "font-medium"
           ),
           children: [
@@ -151,7 +150,7 @@ const ListItem = forwardRef(function ListItem2({
         {
           className: cn(
             "block text-xs text-[var(--text-muted)]",
-            subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : cn("truncate", WRAP_AT_LARGE)
+            subtitleLines === 2 ? cn("line-clamp-2 break-words", UNCLAMP_AT_LARGE) : "truncate-until-large"
           ),
           children: subtitle
         }
@@ -161,7 +160,7 @@ const ListItem = forwardRef(function ListItem2({
         {
           className: cn(
             "mt-0.5 text-caption leading-snug text-[var(--text-muted)]",
-            metaWrap ? "flex flex-wrap items-center gap-1" : cn("block truncate", WRAP_AT_LARGE)
+            metaWrap ? "flex flex-wrap items-center gap-1" : "block truncate-until-large"
           ),
           children: meta
         }

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ChevronDown, ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING, Spinner } from \"./ui\";\nimport { StatusDot } from \"./status-dot\";\nimport { Collapse } from \"./disclosure\";\nimport { toneTextClass } from \"./signed-amount\";\nimport type { TextTone } from \"./signed-amount\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { mergeDescribedBy } from \"./choice-parts\";\nimport { LockedReason, useLockReason } from \"./field-parts\";\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\nexport interface ListLabels {\n  /** Read after an unread row's title — the dot alone says nothing to a screen reader. */\n  unread: string;\n  /** Read after an external row's title: the row leaves the app in a new tab. */\n  opensInNewTab: string;\n}\n\nexport const DEFAULT_LIST_LABELS: ListLabels = {\n  unread: \"Unread\",\n  opensInNewTab: \"opens in a new tab\",\n};\n\n/* ── List ─────────────────────────────────────────────────────────────────── */\n\n/**\n * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px\n * row every site draws with `py-2.5`, `comfortable` for a list that is the page.\n */\nexport type ListDensity = \"compact\" | \"default\" | \"comfortable\";\n/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space\n *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */\nexport type ListSeparator = \"divider\" | \"gap\" | \"none\";\n\nconst ListContext = createContext<{ density: ListDensity; separator: ListSeparator }>({\n  density: \"default\",\n  separator: \"gap\",\n});\n\nexport interface ListProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"role\"> {\n  /** `ol` when the order means something (a ranked list, numbered segments). */\n  as?: \"ul\" | \"ol\";\n  /** Every row's density, unless a row says otherwise. Default `default`. */\n  density?: ListDensity;\n  /** Default `gap`. */\n  separator?: ListSeparator;\n}\n\n/**\n * The list of {@link ListItem}s.\n *\n * A `<ul>` with an explicit `role=\"list\"`: Safari drops a list's semantics once its\n * bullets are styled away, and \"list, 7 items\" is exactly what a screen-reader user\n * wants to hear before the first row.\n */\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  { as = \"ul\", density = \"default\", separator = \"gap\", className, children, ...rest },\n  ref,\n) {\n  const Tag = as;\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        ref={ref as Ref<HTMLUListElement & HTMLOListElement>}\n        role=\"list\"\n        className={cn(\n          \"m-0 flex list-none flex-col p-0\",\n          separator === \"gap\" && (density === \"compact\" ? \"gap-0.5\" : \"gap-1\"),\n          className,\n        )}\n      >\n        {children}\n      </Tag>\n    </ListContext.Provider>\n  );\n});\n\n/* ── ListItem ─────────────────────────────────────────────────────────────── */\n\n/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ListItemLinkProps {\n  href: string;\n  /** The row's target look — keep it, or the row's padding and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"true\";\n  \"aria-busy\"?: true;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nconst PAD: Record<\n  ListDensity,\n  { target: string; actions: string; leadingActions: string; gap: string; body: string }\n> = {\n  compact: { target: \"gap-2 px-2 py-1.5\", actions: \"pe-1.5\", leadingActions: \"ps-1.5\", gap: \"gap-0.5\", body: \"px-2 pb-1.5\" },\n  default: { target: \"gap-3 px-3 py-2.5\", actions: \"pe-2\", leadingActions: \"ps-2\", gap: \"gap-1\", body: \"px-3 pb-2.5\" },\n  comfortable: { target: \"gap-3 px-4 py-3\", actions: \"pe-3\", leadingActions: \"ps-3\", gap: \"gap-1\", body: \"px-4 pb-3\" },\n};\n\n/** {@link ListItemBaseProps.trailingTone}: a {@link TextTone}, or `inherit` — no\n *  colour of the slot's own, so an element's colour (or the row's) stands. */\nexport type ListItemTrailingTone = TextTone | \"inherit\";\n\n// The kit's focus frame (§5), inset so the row's own border and its neighbours do not\n// clip it.\nconst TARGET_RING = cn(FOCUS_RING, \"focus-visible:ring-inset\");\n\n/**\n * §4 \"ListItem: title, subtitle and meta wrap instead of truncating\" at Large and Extra\n * large (docs/text-size-harmonization.md). `large:` variants over the Normal look, so\n * a list keeps its one-height rows at Normal and costs no render to switch: a one-line\n * `truncate` wraps (and breaks a word too long for the row), a `line-clamp-2` lets go.\n * An ellipsis hides the end of a name, which is the part a reader who needs big type\n * cannot recover by squinting.\n */\nconst WRAP_AT_LARGE = \"large:whitespace-normal large:[overflow-wrap:anywhere]\";\nconst UNCLAMP_AT_LARGE = \"large:line-clamp-none\";\n\ninterface ListItemBaseProps {\n  /** The row's name: one line, truncated — unless {@link titleLines} says otherwise. */\n  title: ReactNode;\n  /**\n   * How many lines the title may take. `1` (default) truncates with an ellipsis, which\n   * is right for a name the app chose — a unit number, a user, a file — where the\n   * cut-off end is still recognisable and every row keeps one height.\n   *\n   * `2` clamps at two lines; `\"all\"` shows every line, breaking inside a long word\n   * rather than overflowing. For rows whose only name is free text a person typed\n   * (kastlan 44): a defect or a note titled by its description, where the first 30\n   * characters on a phone say nothing and there is no other field to tell two rows\n   * apart. Pair it with `align=\"start\"` so the icon stays by the first line.\n   */\n  titleLines?: 1 | 2 | \"all\";\n  /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */\n  subtitle?: ReactNode;\n  /** `2` for a line that is a body rather than a label (keksdose's notification text). */\n  subtitleLines?: 1 | 2;\n  /**\n   * A small line ABOVE the title, in the caption type: the group a row belongs to, a\n   * date heading, a category (\"Groceries · weekly\"). Part of the target and of its\n   * name, read before the title. One line, truncated.\n   */\n  overline?: ReactNode;\n  /** A third line in the caption type: a timestamp, \"Updated …\" (lenkbank's projects). */\n  meta?: ReactNode;\n  /**\n   * Let {@link meta} wrap: it becomes a wrapping row (`flex-wrap`, a small gap)\n   * instead of one truncated line — for a run of chips (keksdose's payee-backfill\n   * tags), which otherwise had nowhere to go but the body, outside the target. Still\n   * inside the target, so still no controls: chips that only show, not ones that\n   * remove themselves.\n   */\n  metaWrap?: boolean;\n  /**\n   * Content INSIDE the main target, under the title, subtitle and meta: a progress or\n   * budget bar, a sparkline, a strip of figures (keksdose's food-group bars). Unlike\n   * {@link children}, which sits outside the target, a click on it is a click on the\n   * row, and its hover fill covers it.\n   *\n   * Because it is inside the button or link it obeys the {@link trailing} rule: shown,\n   * never operated — no buttons, links or inputs (invalid HTML in a button, and folded\n   * into its name). Its text joins the row's accessible name, so give a bar that only\n   * repeats a figure already in the row `aria-hidden`. Rendered in a block `<span>`,\n   * full width of the TEXT COLUMN only — the column the title and subtitle are in, not\n   * the whole row: it starts after the {@link icon} / {@link leading} and stops where\n   * {@link trailing} begins, so a meter under a row with a trailing figure is as wide as\n   * the title, not run on under the figure (keksdose's budget rows). For a bar across\n   * the full row, put it in {@link children} (outside the target) or leave `trailing`\n   * off and show the figure in `meta`. Strictly a button holds phrasing content only; the\n   * kit's `ProgressBar` draws `<div>`s, which every browser lays out and reads fine\n   * there but an HTML validator flags.\n   */\n  content?: ReactNode;\n  /** A Lucide icon before the text, muted, at 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the text — an avatar, a file-type badge, a drag handle. */\n  leading?: ReactNode;\n  /**\n   * Inside the main target, at its end: a status chip, a file size, a count. It is part\n   * of what the row's click does and part of its accessible name — so never a control.\n   * Controls go in {@link actions}.\n   */\n  trailing?: ReactNode;\n  /**\n   * The colour of the {@link trailing} slot. Default `muted` — today's look, right for\n   * a size or a count in plain text. `inherit` sets none, so an element's own colour\n   * (an amount coloured by its sign) stands without a second override; any\n   * {@link TextTone} colours a plain-text figure (`\"danger\"` for an overdue count).\n   */\n  trailingTone?: ListItemTrailingTone;\n  /**\n   * Controls BESIDE the main target, never inside it: copy, delete, \"Open\".\n   *\n   * A button inside a button (or a link) is invalid HTML, and a screen reader folds the\n   * inner one into the outer one's name where it cannot be reached. lenkbank found this\n   * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and\n   * solved it the same way each time: the row's target and its actions are siblings in\n   * one bordered box. That is this slot — and being siblings is also what stops a click\n   * on \"Copy\" from selecting the row.\n   */\n  actions?: ReactNode;\n  /**\n   * Controls BEFORE the main target, never inside it: a selection checkbox, a drag\n   * handle that is a button. The mirror of {@link actions} at the start edge — a\n   * sibling of the target, so checking the box does not activate (or expand) the row\n   * and the checkbox keeps its own name. Give the control an `aria-label` naming the\n   * row (\"Select Groceries\"), since it is not inside the row's name. Anything that only\n   * shows goes in {@link leading}, inside the target.\n   */\n  leadingActions?: ReactNode;\n  /**\n   * Rich content UNDER the title row and outside its target: photos, per-row buttons,\n   * form fields — kastlan's handover room inspector (room-inspector.tsx), the handover\n   * detail page and the wizard's defects step (wizard/defects-step.tsx), which draw\n   * each room or defect as a `Card variant=\"inset\"` because a row could not hold a\n   * photo strip with its own buttons.\n   *\n   * The same rule as {@link actions}, one row down: the title area stays ONE named\n   * target (the button or link, with the title and subtitle as its name), and the body\n   * is its sibling, never nested in it — a thumbnail's \"Remove\" inside the row's button\n   * would be invalid HTML and unreachable by a screen reader. The body is a\n   * `role=\"group\"` named by the row's title (`aria-labelledby`), so tabbing into the\n   * third photo's button of the second room is heard as \"Kitchen, group\" first rather\n   * than as a button floating free of any row. Inside the row's box, so a `selected`\n   * border and a `divider` hold both; the hover fill stays on the target alone, since\n   * the body is not what a click on the row does.\n   */\n  children?: ReactNode;\n  /** Classes on the {@link children} body. */\n  bodyClassName?: string;\n  /**\n   * The unread mark: a brand dot at the row's end, the title in semibold, and \"Unread\"\n   * read after the title (keksdose notification-inbox.tsx:215). For another status,\n   * pass your own mark in {@link status}.\n   */\n  unread?: boolean;\n  /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */\n  status?: ReactNode;\n  /**\n   * The row is the chosen one — a brand border on the raised surface (lenkbank's\n   * profile bar and segment list). `aria-current=\"true\"` on the target: the row is the\n   * current one of a set, which is what those lists mean, not a pressed toggle.\n   */\n  selected?: boolean;\n  disabled?: boolean;\n  /**\n   * Work under way on the row — keksdose's attachment download (support-attachments\n   * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a\n   * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so\n   * a keyboard user is not dropped back to the top of the page mid-download.\n   */\n  loading?: boolean;\n  /** Overrides the {@link List}'s density for this row. */\n  density?: ListDensity;\n  /** `start` for rows whose text runs to two or three lines, so the icon sits by the\n   *  title rather than the middle of the paragraph. Default `center`. */\n  align?: \"center\" | \"start\";\n  /** Classes on the visible row (the bordered box). */\n  className?: string;\n  /** Classes on the main target (the button, link or static block). */\n  targetClassName?: string;\n  /**\n   * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop\n   * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE\n   * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,\n   * so the row's own role, name, state and click handling always win.\n   */\n  targetProps?: HTMLAttributes<HTMLElement>;\n  /**\n   * A visible border while unselected, instead of the transparent one. For rows laid out\n   * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose\n   * text. The selected row's brand border is unchanged.\n   */\n  bordered?: boolean;\n  /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */\n  as?: \"li\" | \"div\";\n  /**\n   * Wraps the visible row (the bordered box: target, actions and body) in an element\n   * of your own, INSIDE the `<li>` — a `<Tooltip>` explaining why the row is disabled,\n   * an app's save guard: `renderRow={(row) => <Tooltip label=\"Locked\">{row}</Tooltip>}`.\n   *\n   * The wrapper otherwise had to go round the whole `ListItem`, which put a `<span>`\n   * between the `<ul>` and its `<li>` (invalid; the list stops counting items), so\n   * callers wrote `<li><Wrapper><ListItem as=\"div\" /></Wrapper></li>` — and lost the\n   * divider and its spacing, which sit on the row's own `<li>`. Here the `<li>` stays\n   * the list's child and keeps both. The `<li>` becomes a column and the row takes the\n   * full width, so an inline wrapper (the tooltip's `inline-flex` span) still stretches\n   * the row across the list.\n   *\n   * `row` is the row BOX (a `<div>`), not the target: a wrapper that forces a prop onto\n   * its child with `cloneElement` — a save guard that injects `disabled` while a form is\n   * dirty (keksdose's SaveGuard) — sets it on that div, where it does nothing, and the\n   * button inside stays live. Pass `disabled` (or `loading`) to the ListItem yourself,\n   * from the same state the guard reads, and let the wrapper only explain it:\n   * `<ListItem disabled={dirty} renderRow={(row) => <Tooltip label=\"Save first\">{row}</Tooltip>} />`.\n   */\n  renderRow?: (row: ReactElement) => ReactNode;\n  /** Reaches the main target — the element with the row's name and action. */\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * The row is ONE thing to activate, so the types allow one: a button, an in-app link,\n * an external link, or nothing (a static row, like kastlan's passkey and user lists).\n */\nexport type ListItemProps = ListItemBaseProps &\n  (\n    | ({\n        /** Makes the row a button — select, open, mark read. */\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Why the row's click is not available — {@link Button}'s `disabledReason`, for\n         * a row whose click WRITES (mark read, assign, toggle a grant). keksdose K3: such\n         * rows sat behind a `SaveGuard` that forced a native `disabled`, out of the tab\n         * order, so the reason never reached a keyboard; `renderRow` with a Tooltip could\n         * explain it but not keep the row reachable.\n         *\n         * With a reason the row's button is `aria-disabled` instead: still focusable, a\n         * click does nothing, the reason is in the kit {@link Tooltip} over the row and on\n         * its `aria-describedby`, and the row wears the disabled look. It wins over\n         * `disabled`. The row's `actions` are untouched — each control there is its own.\n         */\n        disabledReason?: ReactNode;\n        /**\n         * The row's click COMMITS. Under a locked {@link WriteLockProvider} it is locked\n         * the `disabledReason` way with the lock's reason (which wins over its own). No\n         * provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n         */\n        commit?: boolean;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      } & NotExpandable)\n    | ({\n        /**\n         * Makes the row a link. A real `<a href>`, so a middle click opens it in a\n         * background tab (keksdose feedback #451) — which a button calling `navigate`\n         * cannot do.\n         */\n        href: string;\n        /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n         *  linkComponent>`, then `<a>`. The API `Chip`, `StatTile` and `MenuItem`\n         *  share. Ignored for an `external` row. */\n        renderLink?: (props: ListItemLinkProps) => ReactElement;\n        /**\n         * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener\n         * noreferrer\">` with an external-link mark, and \"opens in a new tab\" read\n         * after the title. keksdose's inbox rows whose URL is absolute.\n         */\n        external?: boolean;\n        /** Runs on a click, before the navigation (mark the row read). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** Runs on a middle click, which fires no `click` — keksdose marks a\n         *  notification read here too, so a row opened into a background tab does not\n         *  stay unread. */\n        onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        disabledReason?: never;\n        commit?: never;\n      } & NotExpandable)\n    | ({\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n        disabledReason?: never;\n        commit?: never;\n      } & NotExpandable)\n    | {\n        /**\n         * Makes the row a disclosure: the target is a button with `aria-expanded` and a\n         * turning chevron at its end, and this opens under the row, outside the target\n         * (so it may hold controls), animated by {@link Collapse}. keksdose's collapsible\n         * groups — a group row with a select-all checkbox before it\n         * ({@link ListItemBaseProps.leadingActions}) and its members inside.\n         *\n         * The row's ONE action is the toggle, so it takes no `onClick` or `href`. The\n         * content is a `role=\"group\"` named by the title, unmounted while shut (as a\n         * `Disclosure`'s body is).\n         */\n        expandedContent: ReactNode;\n        /** Controlled open state. Leave it out for the row to keep its own. */\n        expanded?: boolean;\n        /** The uncontrolled row's first state. Default `false`. */\n        defaultExpanded?: boolean;\n        /** Runs on every toggle with the new state. */\n        onExpandedChange?: (expanded: boolean) => void;\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n        disabledReason?: never;\n        commit?: never;\n      }\n  );\n\ninterface NotExpandable {\n  expandedContent?: never;\n  expanded?: never;\n  defaultExpanded?: never;\n  onExpandedChange?: never;\n}\n\n/**\n * One row of a {@link List}: leading icon or avatar, title and subtitle (both\n * truncating by default), a trailing slot, and — beside the row, not inside it — its actions.\n *\n * At Large and Extra large (0.32, docs/text-size-harmonization.md §4) nothing in it\n * truncates: the overline, title, subtitle and meta wrap, a two-line clamp lets go, and\n * a trailing slot drops under the text when the two no longer fit side by side. The\n * rows lose their one height there; that is the trade the reader asked for.\n *\n * All three apps draw this row by hand, a dozen times: kastlan's units\n * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity\n * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)\n * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment\n * downloads; lenkbank's profiles, projects and segments. The copies differ in the\n * details that are easy to get wrong — which of them truncate, whether the actions\n * are nested in the button, whether a link row is a link at all.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    title,\n    titleLines = 1,\n    overline,\n    subtitle,\n    subtitleLines = 1,\n    meta,\n    metaWrap = false,\n    content,\n    icon: Icon,\n    leading,\n    trailing,\n    trailingTone = \"muted\",\n    actions,\n    leadingActions,\n    unread = false,\n    status,\n    selected = false,\n    disabled = false,\n    loading = false,\n    density: densityProp,\n    align = \"center\",\n    className,\n    targetClassName,\n    targetProps,\n    bordered = false,\n    as = \"li\",\n    renderRow,\n    children,\n    bodyClassName,\n    href,\n    renderLink,\n    external = false,\n    onClick,\n    onAuxClick,\n    disabledReason,\n    commit,\n    expandedContent,\n    expanded: expandedProp,\n    defaultExpanded = false,\n    onExpandedChange,\n    ...rest\n  },\n  ref,\n) {\n  const list = useContext(ListContext);\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const kitLink = useKitLink();\n  const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);\n  const density = densityProp ?? list.density;\n  const pad = PAD[density];\n  const expandable = expandedContent !== undefined;\n  const expanded = expandable && (expandedProp ?? ownExpanded);\n  const isLink = href !== undefined && !disabled;\n  const isButton = !isLink && (onClick !== undefined || expandable) && href === undefined;\n  const interactive = isLink || isButton;\n  // Only an onClick row takes a reason (the types allow no other); the hook runs on\n  // every row so the hook order never depends on which kind of row this is.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked && isButton && !expandable;\n  const inert = disabled || loading || locked;\n  const hasBody = children !== undefined && children !== null && children !== false;\n  // Anything under the row's own line: the box turns into a column, and the target\n  // takes its own corners and hover fill (see `children`).\n  const stacked = hasBody || expandable;\n  const titleId = useId();\n  const expandedId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n    if (expandedProp === undefined) setOwnExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const mark =\n    status ??\n    (unread ? <StatusDot tone=\"brand\" size=\"sm\" className={align === \"start\" ? \"mt-1.5\" : undefined} /> : null);\n\n  const body = (\n    <>\n      {Icon && (\n        <Icon\n          className={cn(\"size-4 shrink-0 text-[var(--text-muted)]\", align === \"start\" && \"mt-0.5\")}\n          aria-hidden\n        />\n      )}\n      {leading}\n      {/* With a trailing slot, a basis at Large: below it the trailing chip or figure\n          wraps under the text (the target wraps, see `target`) rather than squeezing the\n          now-wrapping title into a column one word wide (§4, 240 px effective width). */}\n      <span className={cn(\"flex min-w-0 flex-1 flex-col\", trailing != null && \"large:basis-40\")}>\n        {overline != null && (\n          <span className={cn(\"block truncate text-caption font-medium leading-snug text-[var(--text-muted)]\", WRAP_AT_LARGE)}>\n            {overline}\n          </span>\n        )}\n        <span\n          // Names the body's and the expanded content's group; harmless without one.\n          id={stacked ? titleId : undefined}\n          className={cn(\n            \"block text-sm text-[var(--text-primary)]\",\n            titleLines === 1\n              ? cn(\"truncate\", WRAP_AT_LARGE)\n              : titleLines === 2\n                ? cn(\"line-clamp-2 break-words\", UNCLAMP_AT_LARGE)\n                : \"break-words\",\n            unread ? \"font-semibold\" : \"font-medium\",\n          )}\n        >\n          {title}\n          {unread && <span className=\"sr-only\"> ({labels.unread})</span>}\n          {external && href !== undefined && <span className=\"sr-only\"> ({labels.opensInNewTab})</span>}\n        </span>\n        {subtitle != null && (\n          <span\n            className={cn(\n              \"block text-xs text-[var(--text-muted)]\",\n              subtitleLines === 2 ? cn(\"line-clamp-2 break-words\", UNCLAMP_AT_LARGE) : cn(\"truncate\", WRAP_AT_LARGE),\n            )}\n          >\n            {subtitle}\n          </span>\n        )}\n        {meta != null && (\n          <span\n            className={cn(\n              \"mt-0.5 text-caption leading-snug text-[var(--text-muted)]\",\n              metaWrap ? \"flex flex-wrap items-center gap-1\" : cn(\"block truncate\", WRAP_AT_LARGE),\n            )}\n          >\n            {meta}\n          </span>\n        )}\n        {content != null && <span className=\"mt-1.5 block min-w-0\">{content}</span>}\n      </span>\n      {trailing != null && (\n        <span\n          className={cn(\n            \"flex shrink-0 items-center gap-2 text-xs large:ms-auto\",\n            trailingTone !== \"inherit\" && toneTextClass(trailingTone),\n          )}\n        >\n          {trailing}\n        </span>\n      )}\n      {loading ? (\n        <Spinner label={null} className=\"size-3.5 shrink-0\" />\n      ) : (\n        external && href !== undefined && (\n          <ExternalLink className=\"size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100\" aria-hidden />\n        )\n      )}\n      {mark}\n      {expandable && (\n        // Turned, not swapped — the Disclosure card's convention: down while shut, up\n        // while open. A rotation is its own mirror, so RTL needs nothing.\n        <ChevronDown\n          aria-hidden\n          className={cn(\n            \"size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n            align === \"start\" && \"mt-0.5\",\n            expanded && \"rotate-180\",\n          )}\n        />\n      )}\n    </>\n  );\n\n  const target = cn(\n    \"flex min-w-0 flex-1 text-start\",\n    // §4 at Large: the trailing slot drops under the text when both no longer fit.\n    trailing != null && \"large:flex-wrap\",\n    align === \"start\" ? \"items-start\" : \"items-center\",\n    pad.target,\n    // When stacked the target is the top of the box, not all of it, so it takes its\n    // own corners and its own hover fill (see `children`).\n    stacked ? \"rounded-md\" : \"rounded-[inherit]\",\n    stacked && interactive && !inert && !selected && \"transition-colors hover:bg-[var(--bg-hover)]\",\n    interactive && TARGET_RING,\n    interactive && !inert && \"cursor-pointer\",\n    loading && \"cursor-progress\",\n    locked && !loading && \"cursor-not-allowed\",\n    targetClassName,\n  );\n\n  // `role` is the row's own (a button, a link, or nothing on a static block): a\n  // targetProps role would silently turn the row into something else.\n  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};\n\n  let main: ReactNode;\n  if (isLink) {\n    const linkProps: ListItemLinkProps = {\n      ...(targetExtras as Partial<ListItemLinkProps>),\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      className: target,\n      \"aria-current\": selected ? \"true\" : undefined,\n      \"aria-busy\": loading || undefined,\n      onClick: loading\n        ? (e) => e.preventDefault()\n        : (onClick as ListItemLinkProps[\"onClick\"]),\n      onAuxClick,\n      children: body,\n    };\n    const { children: linkBody, ...anchorProps } = linkProps;\n    const render = external ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n    main = render ? (\n      <RenderedLink render={render} {...linkProps} />\n    ) : (\n      <a {...anchorProps} {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}>\n        {linkBody}\n      </a>\n    );\n  } else if (isButton) {\n    main = (\n      <button\n        {...(targetExtras as HTMLAttributes<HTMLButtonElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        // A disabled row is `disabled`: nothing to do there, and nothing to reach. A\n        // loading row is only `aria-disabled` — see `loading` — and so is a locked one:\n        // a reason wins over `disabled`, so the row stays reachable to say it.\n        disabled={locked ? undefined : disabled}\n        aria-disabled={loading || locked || undefined}\n        aria-busy={loading || undefined}\n        aria-current={selected ? \"true\" : undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-controls={expandable ? expandedId : undefined}\n        aria-describedby={\n          locked\n            ? mergeDescribedBy(rest[\"aria-describedby\"] as string | undefined, lock.reasonId)\n            : (rest[\"aria-describedby\"] as string | undefined)\n        }\n        onClick={\n          loading || locked\n            ? undefined\n            : expandable\n              ? toggle\n              : (onClick as (event: MouseEvent<HTMLButtonElement>) => void)\n        }\n        className={target}\n      >\n        {body}\n      </button>\n    );\n    if (locked) {\n      // The Tooltip takes the target's place in the row, so it takes its flex sizing\n      // too; the button fills it.\n      main = (\n        <LockedReason lock={lock} className=\"flex min-w-0 flex-1\">\n          {main}\n        </LockedReason>\n      );\n    }\n  } else {\n    main = (\n      <div\n        {...(targetExtras as HTMLAttributes<HTMLDivElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        className={target}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const leadingActionsEl =\n    leadingActions != null ? (\n      <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.leadingActions)}>{leadingActions}</div>\n    ) : null;\n  const actionsEl =\n    actions != null ? <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.actions)}>{actions}</div> : null;\n\n  const row = (\n    <div\n      className={cn(\n        \"flex min-w-0 rounded-md border transition-colors\",\n        stacked ? \"flex-col\" : \"items-center\",\n        // See `renderRow`: the wrapper may be inline, the row is not.\n        renderRow && \"w-full\",\n        selected\n          ? \"border-[var(--brand)] bg-[var(--bg-surface-2)]\"\n          : bordered\n            ? \"border-[var(--border)]\"\n            : \"border-transparent\",\n        !stacked && interactive && !inert && !selected && \"hover:bg-[var(--bg-hover)]\",\n        (disabled || locked) && \"opacity-50\",\n        className,\n      )}\n    >\n      {stacked ? (\n        <>\n          <div className=\"flex min-w-0 items-center\">\n            {leadingActionsEl}\n            {main}\n            {actionsEl}\n          </div>\n          {expandable && (\n            <Collapse open={expanded}>\n              <div id={expandedId} role=\"group\" aria-labelledby={titleId} className={cn(\"min-w-0\", pad.body)}>\n                {expandedContent}\n              </div>\n            </Collapse>\n          )}\n          {hasBody && (\n            <div role=\"group\" aria-labelledby={titleId} className={cn(\"min-w-0\", pad.body, bodyClassName)}>\n              {children}\n            </div>\n          )}\n        </>\n      ) : (\n        <>\n          {leadingActionsEl}\n          {main}\n          {actionsEl}\n        </>\n      )}\n    </div>\n  );\n\n  const Tag = as;\n  return (\n    <Tag\n      className={cn(\n        list.separator === \"divider\" && \"border-b border-[var(--border)] last:border-b-0\",\n        list.separator === \"divider\" && as === \"li\" && \"py-0.5\",\n        renderRow && \"flex flex-col\",\n      )}\n    >\n      {renderRow ? renderRow(row) : row}\n    </Tag>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: ListItemLinkProps & { render: (props: ListItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":["List","ListItem"]}
+{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext, useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { ChevronDown, ExternalLink } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING, Spinner } from \"./ui\";\nimport { StatusDot } from \"./status-dot\";\nimport { Collapse } from \"./disclosure\";\nimport { toneTextClass } from \"./signed-amount\";\nimport type { TextTone } from \"./signed-amount\";\nimport { useKitLabels, useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\nimport { mergeDescribedBy } from \"./choice-parts\";\nimport { LockedReason, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/* ── Labels ───────────────────────────────────────────────────────────────── */\n\nexport interface ListLabels {\n  /** Read after an unread row's title — the dot alone says nothing to a screen reader. */\n  unread: string;\n  /** Read after an external row's title: the row leaves the app in a new tab. */\n  opensInNewTab: string;\n}\n\nexport const DEFAULT_LIST_LABELS: ListLabels = {\n  unread: \"Unread\",\n  opensInNewTab: \"opens in a new tab\",\n};\n\n/* ── List ─────────────────────────────────────────────────────────────────── */\n\n/**\n * `compact` 36px-ish rows for a dense panel (an inbox in a menu), `default` the ~44px\n * row every site draws with `py-2.5`, `comfortable` for a list that is the page.\n */\nexport type ListDensity = \"compact\" | \"default\" | \"comfortable\";\n/** `divider`: a rule between rows (kastlan's `divide-y` lists); `gap`: a small space\n *  between rows (lenkbank's `space-y-2`, kastlan's `space-y-1`); `none`: flush. */\nexport type ListSeparator = \"divider\" | \"gap\" | \"none\";\n\nconst ListContext = createContext<{ density: ListDensity; separator: ListSeparator }>({\n  density: \"default\",\n  separator: \"gap\",\n});\n\nexport interface ListProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"role\"> {\n  /** `ol` when the order means something (a ranked list, numbered segments). */\n  as?: \"ul\" | \"ol\";\n  /** Every row's density, unless a row says otherwise. Default `default`. */\n  density?: ListDensity;\n  /** Default `gap`. */\n  separator?: ListSeparator;\n}\n\n/**\n * The list of {@link ListItem}s.\n *\n * A `<ul>` with an explicit `role=\"list\"`: Safari drops a list's semantics once its\n * bullets are styled away, and \"list, 7 items\" is exactly what a screen-reader user\n * wants to hear before the first row.\n */\nexport const List = forwardRef<HTMLUListElement, ListProps>(function List(\n  { as = \"ul\", density = \"default\", separator = \"gap\", className, children, ...rest },\n  ref,\n) {\n  const Tag = as;\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        ref={ref as Ref<HTMLUListElement & HTMLOListElement>}\n        role=\"list\"\n        className={cn(\n          \"m-0 flex list-none flex-col p-0\",\n          separator === \"gap\" && (density === \"compact\" ? \"gap-0.5\" : \"gap-1\"),\n          className,\n        )}\n      >\n        {children}\n      </Tag>\n    </ListContext.Provider>\n  );\n});\n\n/* ── ListItem ─────────────────────────────────────────────────────────────── */\n\n/** What {@link ListItemProps.renderLink} is handed. Spread it onto your router's link,\n *  mapping `href` to what it calls it — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ListItemLinkProps {\n  href: string;\n  /** The row's target look — keep it, or the row's padding and focus ring go. */\n  className: string;\n  children: ReactNode;\n  ref?: Ref<HTMLAnchorElement>;\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n  \"aria-current\"?: \"true\";\n  \"aria-busy\"?: true;\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\nconst PAD: Record<\n  ListDensity,\n  { target: string; actions: string; leadingActions: string; gap: string; body: string }\n> = {\n  compact: { target: \"gap-2 px-2 py-1.5\", actions: \"pe-1.5\", leadingActions: \"ps-1.5\", gap: \"gap-0.5\", body: \"px-2 pb-1.5\" },\n  default: { target: \"gap-3 px-3 py-2.5\", actions: \"pe-2\", leadingActions: \"ps-2\", gap: \"gap-1\", body: \"px-3 pb-2.5\" },\n  comfortable: { target: \"gap-3 px-4 py-3\", actions: \"pe-3\", leadingActions: \"ps-3\", gap: \"gap-1\", body: \"px-4 pb-3\" },\n};\n\n/** {@link ListItemBaseProps.trailingTone}: a {@link TextTone}, or `inherit` — no\n *  colour of the slot's own, so an element's colour (or the row's) stands. */\nexport type ListItemTrailingTone = TextTone | \"inherit\";\n\n// The kit's focus frame (§5), inset so the row's own border and its neighbours do not\n// clip it.\nconst TARGET_RING = cn(FOCUS_RING, \"focus-visible:ring-inset\");\n\n/**\n * §4 \"ListItem: title, subtitle and meta wrap instead of truncating\" at Large and Extra\n * large (docs/text-size-harmonization.md). `large:` variants over the Normal look, so\n * a list keeps its one-height rows at Normal and costs no render to switch: a one-line\n * line is `truncate-until-large` (tokens.css, 0.33 §10.17: `truncate`, and at Large a\n * wrap that breaks a word too long for the row — the kit's one name for what this file\n * spelt as `WRAP_AT_LARGE`), a `line-clamp-2` lets go. An ellipsis hides the end of a\n * name, which is the part a reader who needs big type cannot recover by squinting.\n */\nconst UNCLAMP_AT_LARGE = \"large:line-clamp-none\";\n\ninterface ListItemBaseProps {\n  /** The row's name: one line, truncated — unless {@link titleLines} says otherwise. */\n  title: ReactNode;\n  /**\n   * How many lines the title may take. `1` (default) truncates with an ellipsis, which\n   * is right for a name the app chose — a unit number, a user, a file — where the\n   * cut-off end is still recognisable and every row keeps one height.\n   *\n   * `2` clamps at two lines; `\"all\"` shows every line, breaking inside a long word\n   * rather than overflowing. For rows whose only name is free text a person typed\n   * (kastlan 44): a defect or a note titled by its description, where the first 30\n   * characters on a phone say nothing and there is no other field to tell two rows\n   * apart. Pair it with `align=\"start\"` so the icon stays by the first line.\n   */\n  titleLines?: 1 | 2 | \"all\";\n  /** The line under it: one line, truncated — or two, with `subtitleLines={2}`. */\n  subtitle?: ReactNode;\n  /** `2` for a line that is a body rather than a label (keksdose's notification text). */\n  subtitleLines?: 1 | 2;\n  /**\n   * A small line ABOVE the title, in the caption type: the group a row belongs to, a\n   * date heading, a category (\"Groceries · weekly\"). Part of the target and of its\n   * name, read before the title. One line, truncated.\n   */\n  overline?: ReactNode;\n  /** A third line in the caption type: a timestamp, \"Updated …\" (lenkbank's projects). */\n  meta?: ReactNode;\n  /**\n   * Let {@link meta} wrap: it becomes a wrapping row (`flex-wrap`, a small gap)\n   * instead of one truncated line — for a run of chips (keksdose's payee-backfill\n   * tags), which otherwise had nowhere to go but the body, outside the target. Still\n   * inside the target, so still no controls: chips that only show, not ones that\n   * remove themselves.\n   */\n  metaWrap?: boolean;\n  /**\n   * Content INSIDE the main target, under the title, subtitle and meta: a progress or\n   * budget bar, a sparkline, a strip of figures (keksdose's food-group bars). Unlike\n   * {@link children}, which sits outside the target, a click on it is a click on the\n   * row, and its hover fill covers it.\n   *\n   * Because it is inside the button or link it obeys the {@link trailing} rule: shown,\n   * never operated — no buttons, links or inputs (invalid HTML in a button, and folded\n   * into its name). Its text joins the row's accessible name, so give a bar that only\n   * repeats a figure already in the row `aria-hidden`. Rendered in a block `<span>`,\n   * full width of the TEXT COLUMN only — the column the title and subtitle are in, not\n   * the whole row: it starts after the {@link icon} / {@link leading} and stops where\n   * {@link trailing} begins, so a meter under a row with a trailing figure is as wide as\n   * the title, not run on under the figure (keksdose's budget rows). For a bar across\n   * the full row, put it in {@link children} (outside the target) or leave `trailing`\n   * off and show the figure in `meta`. Strictly a button holds phrasing content only; the\n   * kit's `ProgressBar` draws `<div>`s, which every browser lays out and reads fine\n   * there but an HTML validator flags.\n   */\n  content?: ReactNode;\n  /** A Lucide icon before the text, muted, at 16px. */\n  icon?: LucideIcon;\n  /** Anything else before the text — an avatar, a file-type badge, a drag handle. */\n  leading?: ReactNode;\n  /**\n   * Inside the main target, at its end: a status chip, a file size, a count. It is part\n   * of what the row's click does and part of its accessible name — so never a control.\n   * Controls go in {@link actions}.\n   */\n  trailing?: ReactNode;\n  /**\n   * The colour of the {@link trailing} slot. Default `muted` — today's look, right for\n   * a size or a count in plain text. `inherit` sets none, so an element's own colour\n   * (an amount coloured by its sign) stands without a second override; any\n   * {@link TextTone} colours a plain-text figure (`\"danger\"` for an overdue count).\n   */\n  trailingTone?: ListItemTrailingTone;\n  /**\n   * Controls BESIDE the main target, never inside it: copy, delete, \"Open\".\n   *\n   * A button inside a button (or a link) is invalid HTML, and a screen reader folds the\n   * inner one into the outer one's name where it cannot be reached. lenkbank found this\n   * three times (profile-bar.tsx:110, projects-page.tsx:61, segment-list.tsx:165) and\n   * solved it the same way each time: the row's target and its actions are siblings in\n   * one bordered box. That is this slot — and being siblings is also what stops a click\n   * on \"Copy\" from selecting the row.\n   */\n  actions?: ReactNode;\n  /**\n   * Controls BEFORE the main target, never inside it: a selection checkbox, a drag\n   * handle that is a button. The mirror of {@link actions} at the start edge — a\n   * sibling of the target, so checking the box does not activate (or expand) the row\n   * and the checkbox keeps its own name. Give the control an `aria-label` naming the\n   * row (\"Select Groceries\"), since it is not inside the row's name. Anything that only\n   * shows goes in {@link leading}, inside the target.\n   */\n  leadingActions?: ReactNode;\n  /**\n   * Rich content UNDER the title row and outside its target: photos, per-row buttons,\n   * form fields — kastlan's handover room inspector (room-inspector.tsx), the handover\n   * detail page and the wizard's defects step (wizard/defects-step.tsx), which draw\n   * each room or defect as a `Card variant=\"inset\"` because a row could not hold a\n   * photo strip with its own buttons.\n   *\n   * The same rule as {@link actions}, one row down: the title area stays ONE named\n   * target (the button or link, with the title and subtitle as its name), and the body\n   * is its sibling, never nested in it — a thumbnail's \"Remove\" inside the row's button\n   * would be invalid HTML and unreachable by a screen reader. The body is a\n   * `role=\"group\"` named by the row's title (`aria-labelledby`), so tabbing into the\n   * third photo's button of the second room is heard as \"Kitchen, group\" first rather\n   * than as a button floating free of any row. Inside the row's box, so a `selected`\n   * border and a `divider` hold both; the hover fill stays on the target alone, since\n   * the body is not what a click on the row does.\n   */\n  children?: ReactNode;\n  /** Classes on the {@link children} body. */\n  bodyClassName?: string;\n  /**\n   * The unread mark: a brand dot at the row's end, the title in semibold, and \"Unread\"\n   * read after the title (keksdose notification-inbox.tsx:215). For another status,\n   * pass your own mark in {@link status}.\n   */\n  unread?: boolean;\n  /** A mark in the unread dot's place — a `StatusDot` of another tone, a count. */\n  status?: ReactNode;\n  /**\n   * The row is the chosen one — a brand border on the raised surface (lenkbank's\n   * profile bar and segment list). `aria-current=\"true\"` on the target: the row is the\n   * current one of a set, which is what those lists mean, not a pressed toggle.\n   */\n  selected?: boolean;\n  disabled?: boolean;\n  /**\n   * Work under way on the row — keksdose's attachment download (support-attachments\n   * .tsx:91). A spinner takes the trailing edge, the target is `aria-busy`, and a\n   * second click is ignored. The row keeps focus: `aria-disabled`, not `disabled`, so\n   * a keyboard user is not dropped back to the top of the page mid-download.\n   */\n  loading?: boolean;\n  /** Overrides the {@link List}'s density for this row. */\n  density?: ListDensity;\n  /** `start` for rows whose text runs to two or three lines, so the icon sits by the\n   *  title rather than the middle of the paragraph. Default `center`. */\n  align?: \"center\" | \"start\";\n  /** Classes on the visible row (the bordered box). */\n  className?: string;\n  /** Classes on the main target (the button, link or static block). */\n  targetClassName?: string;\n  /**\n   * Extra attributes and handlers for the main target — e.g. HTML5 drag-and-drop\n   * (`draggable`, `onDragStart`, `onDragEnd`): lenkbank's segment list drags the WHOLE\n   * 44px row, and a grip inside the button cannot start a drag in Firefox. Spread first,\n   * so the row's own role, name, state and click handling always win.\n   */\n  targetProps?: HTMLAttributes<HTMLElement>;\n  /**\n   * A visible border while unselected, instead of the transparent one. For rows laid out\n   * as a wrapping strip (lenkbank's profile bar), where borderless rows read as loose\n   * text. The selected row's brand border is unchanged.\n   */\n  bordered?: boolean;\n  /** `div` for a single row outside a {@link List}; an `<li>` must sit in a list. */\n  as?: \"li\" | \"div\";\n  /**\n   * Wraps the visible row (the bordered box: target, actions and body) in an element\n   * of your own, INSIDE the `<li>` — a `<Tooltip>` explaining why the row is disabled,\n   * an app's save guard: `renderRow={(row) => <Tooltip label=\"Locked\">{row}</Tooltip>}`.\n   *\n   * The wrapper otherwise had to go round the whole `ListItem`, which put a `<span>`\n   * between the `<ul>` and its `<li>` (invalid; the list stops counting items), so\n   * callers wrote `<li><Wrapper><ListItem as=\"div\" /></Wrapper></li>` — and lost the\n   * divider and its spacing, which sit on the row's own `<li>`. Here the `<li>` stays\n   * the list's child and keeps both. The `<li>` becomes a column and the row takes the\n   * full width, so an inline wrapper (the tooltip's `inline-flex` span) still stretches\n   * the row across the list.\n   *\n   * `row` is the row BOX (a `<div>`), not the target: a wrapper that forces a prop onto\n   * its child with `cloneElement` — a save guard that injects `disabled` while a form is\n   * dirty (keksdose's SaveGuard) — sets it on that div, where it does nothing, and the\n   * button inside stays live. Pass `disabled` (or `loading`) to the ListItem yourself,\n   * from the same state the guard reads, and let the wrapper only explain it:\n   * `<ListItem disabled={dirty} renderRow={(row) => <Tooltip label=\"Save first\">{row}</Tooltip>} />`.\n   */\n  renderRow?: (row: ReactElement) => ReactNode;\n  /** Reaches the main target — the element with the row's name and action. */\n  id?: string;\n  [key: `aria-${string}`]: string | boolean | number | undefined;\n  [key: `data-${string}`]: unknown;\n}\n\n/**\n * The row is ONE thing to activate, so the types allow one: a button, an in-app link,\n * an external link, or nothing (a static row, like kastlan's passkey and user lists).\n */\nexport type ListItemProps = ListItemBaseProps &\n  (\n    | ({\n        /** Makes the row a button — select, open, mark read. */\n        onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n        /**\n         * Why the row's click is not available — {@link Button}'s `disabledReason`, for\n         * a row whose click WRITES (mark read, assign, toggle a grant). keksdose K3: such\n         * rows sat behind a `SaveGuard` that forced a native `disabled`, out of the tab\n         * order, so the reason never reached a keyboard; `renderRow` with a Tooltip could\n         * explain it but not keep the row reachable.\n         *\n         * With a reason the row's button is `aria-disabled` instead: still focusable, a\n         * click does nothing, the reason is in the kit {@link Tooltip} over the row and on\n         * its `aria-describedby`, and the row wears the disabled look. It wins over\n         * `disabled`. The row's `actions` are untouched — each control there is its own.\n         */\n        disabledReason?: ReactNode;\n        /**\n         * The row's click COMMITS. Under a locked {@link WriteLockProvider} it is locked\n         * the `disabledReason` way with the lock's reason (which wins over its own). No\n         * provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3.\n         */\n        commit?: CommitScope;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n      } & NotExpandable)\n    | ({\n        /**\n         * Makes the row a link. A real `<a href>`, so a middle click opens it in a\n         * background tab (keksdose feedback #451) — which a button calling `navigate`\n         * cannot do.\n         */\n        href: string;\n        /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n         *  linkComponent>`, then `<a>`. The API `Chip`, `StatTile` and `MenuItem`\n         *  share. Ignored for an `external` row. */\n        renderLink?: (props: ListItemLinkProps) => ReactElement;\n        /**\n         * The link leaves the app: a plain `<a target=\"_blank\" rel=\"noopener\n         * noreferrer\">` with an external-link mark, and \"opens in a new tab\" read\n         * after the title. keksdose's inbox rows whose URL is absolute.\n         */\n        external?: boolean;\n        /** Runs on a click, before the navigation (mark the row read). */\n        onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        /** Runs on a middle click, which fires no `click` — keksdose marks a\n         *  notification read here too, so a row opened into a background tab does not\n         *  stay unread. */\n        onAuxClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n        disabledReason?: never;\n        commit?: never;\n      } & NotExpandable)\n    | ({\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n        disabledReason?: never;\n        commit?: never;\n      } & NotExpandable)\n    | {\n        /**\n         * Makes the row a disclosure: the target is a button with `aria-expanded` and a\n         * turning chevron at its end, and this opens under the row, outside the target\n         * (so it may hold controls), animated by {@link Collapse}. keksdose's collapsible\n         * groups — a group row with a select-all checkbox before it\n         * ({@link ListItemBaseProps.leadingActions}) and its members inside.\n         *\n         * The row's ONE action is the toggle, so it takes no `onClick` or `href`. The\n         * content is a `role=\"group\"` named by the title, unmounted while shut (as a\n         * `Disclosure`'s body is).\n         */\n        expandedContent: ReactNode;\n        /** Controlled open state. Leave it out for the row to keep its own. */\n        expanded?: boolean;\n        /** The uncontrolled row's first state. Default `false`. */\n        defaultExpanded?: boolean;\n        /** Runs on every toggle with the new state. */\n        onExpandedChange?: (expanded: boolean) => void;\n        onClick?: never;\n        href?: never;\n        renderLink?: never;\n        external?: never;\n        onAuxClick?: never;\n        disabledReason?: never;\n        commit?: never;\n      }\n  );\n\ninterface NotExpandable {\n  expandedContent?: never;\n  expanded?: never;\n  defaultExpanded?: never;\n  onExpandedChange?: never;\n}\n\n/**\n * One row of a {@link List}: leading icon or avatar, title and subtitle (both\n * truncating by default), a trailing slot, and — beside the row, not inside it — its actions.\n *\n * At Large and Extra large (0.32, docs/text-size-harmonization.md §4) nothing in it\n * truncates: the overline, title, subtitle and meta wrap, a two-line clamp lets go, and\n * a trailing slot drops under the text when the two no longer fit side by side. The\n * rows lose their one height there; that is the trade the reader asked for.\n *\n * All three apps draw this row by hand, a dozen times: kastlan's units\n * (building-detail-page.tsx:402), open tickets (group-overview-page.tsx:160), activity\n * feed (activity-feed.tsx:53), company users (platform-company-detail-page.tsx:140)\n * and passkeys (passkeys-card.tsx:75); keksdose's notification inbox and attachment\n * downloads; lenkbank's profiles, projects and segments. The copies differ in the\n * details that are easy to get wrong — which of them truncate, whether the actions\n * are nested in the button, whether a link row is a link at all.\n */\nexport const ListItem = forwardRef<HTMLElement, ListItemProps>(function ListItem(\n  {\n    title,\n    titleLines = 1,\n    overline,\n    subtitle,\n    subtitleLines = 1,\n    meta,\n    metaWrap = false,\n    content,\n    icon: Icon,\n    leading,\n    trailing,\n    trailingTone = \"muted\",\n    actions,\n    leadingActions,\n    unread = false,\n    status,\n    selected = false,\n    disabled = false,\n    loading = false,\n    density: densityProp,\n    align = \"center\",\n    className,\n    targetClassName,\n    targetProps,\n    bordered = false,\n    as = \"li\",\n    renderRow,\n    children,\n    bodyClassName,\n    href,\n    renderLink,\n    external = false,\n    onClick,\n    onAuxClick,\n    disabledReason,\n    commit,\n    expandedContent,\n    expanded: expandedProp,\n    defaultExpanded = false,\n    onExpandedChange,\n    ...rest\n  },\n  ref,\n) {\n  const list = useContext(ListContext);\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const kitLink = useKitLink();\n  const [ownExpanded, setOwnExpanded] = useState(defaultExpanded);\n  const density = densityProp ?? list.density;\n  const pad = PAD[density];\n  const expandable = expandedContent !== undefined;\n  const expanded = expandable && (expandedProp ?? ownExpanded);\n  const isLink = href !== undefined && !disabled;\n  const isButton = !isLink && (onClick !== undefined || expandable) && href === undefined;\n  const interactive = isLink || isButton;\n  // Only an onClick row takes a reason (the types allow no other); the hook runs on\n  // every row so the hook order never depends on which kind of row this is.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked && isButton && !expandable;\n  const inert = disabled || loading || locked;\n  const hasBody = children !== undefined && children !== null && children !== false;\n  // Anything under the row's own line: the box turns into a column, and the target\n  // takes its own corners and hover fill (see `children`).\n  const stacked = hasBody || expandable;\n  const titleId = useId();\n  const expandedId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n    if (expandedProp === undefined) setOwnExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const mark =\n    status ??\n    (unread ? <StatusDot tone=\"brand\" size=\"sm\" className={align === \"start\" ? \"mt-1.5\" : undefined} /> : null);\n\n  const body = (\n    <>\n      {Icon && (\n        <Icon\n          className={cn(\"size-4 shrink-0 text-[var(--text-muted)]\", align === \"start\" && \"mt-0.5\")}\n          aria-hidden\n        />\n      )}\n      {leading}\n      {/* With a trailing slot, a basis at Large: below it the trailing chip or figure\n          wraps under the text (the target wraps, see `target`) rather than squeezing the\n          now-wrapping title into a column one word wide (§4, 240 px effective width). */}\n      <span className={cn(\"flex min-w-0 flex-1 flex-col\", trailing != null && \"large:basis-40\")}>\n        {overline != null && (\n          <span className=\"block truncate-until-large text-caption font-medium leading-snug text-[var(--text-muted)]\">\n            {overline}\n          </span>\n        )}\n        <span\n          // Names the body's and the expanded content's group; harmless without one.\n          id={stacked ? titleId : undefined}\n          className={cn(\n            \"block text-sm text-[var(--text-primary)]\",\n            titleLines === 1\n              ? \"truncate-until-large\"\n              : titleLines === 2\n                ? cn(\"line-clamp-2 break-words\", UNCLAMP_AT_LARGE)\n                : \"break-words\",\n            unread ? \"font-semibold\" : \"font-medium\",\n          )}\n        >\n          {title}\n          {unread && <span className=\"sr-only\"> ({labels.unread})</span>}\n          {external && href !== undefined && <span className=\"sr-only\"> ({labels.opensInNewTab})</span>}\n        </span>\n        {subtitle != null && (\n          <span\n            className={cn(\n              \"block text-xs text-[var(--text-muted)]\",\n              subtitleLines === 2 ? cn(\"line-clamp-2 break-words\", UNCLAMP_AT_LARGE) : \"truncate-until-large\",\n            )}\n          >\n            {subtitle}\n          </span>\n        )}\n        {meta != null && (\n          <span\n            className={cn(\n              \"mt-0.5 text-caption leading-snug text-[var(--text-muted)]\",\n              metaWrap ? \"flex flex-wrap items-center gap-1\" : \"block truncate-until-large\",\n            )}\n          >\n            {meta}\n          </span>\n        )}\n        {content != null && <span className=\"mt-1.5 block min-w-0\">{content}</span>}\n      </span>\n      {trailing != null && (\n        <span\n          className={cn(\n            \"flex shrink-0 items-center gap-2 text-xs large:ms-auto\",\n            trailingTone !== \"inherit\" && toneTextClass(trailingTone),\n          )}\n        >\n          {trailing}\n        </span>\n      )}\n      {loading ? (\n        <Spinner label={null} className=\"size-3.5 shrink-0\" />\n      ) : (\n        external && href !== undefined && (\n          <ExternalLink className=\"size-3.5 shrink-0 text-[var(--text-muted)] rtl:-scale-x-100\" aria-hidden />\n        )\n      )}\n      {mark}\n      {expandable && (\n        // Turned, not swapped — the Disclosure card's convention: down while shut, up\n        // while open. A rotation is its own mirror, so RTL needs nothing.\n        <ChevronDown\n          aria-hidden\n          className={cn(\n            \"size-4 shrink-0 text-[var(--text-muted)] transition-transform duration-200 ease-out motion-reduce:transition-none\",\n            align === \"start\" && \"mt-0.5\",\n            expanded && \"rotate-180\",\n          )}\n        />\n      )}\n    </>\n  );\n\n  const target = cn(\n    \"flex min-w-0 flex-1 text-start\",\n    // §4 at Large: the trailing slot drops under the text when both no longer fit.\n    trailing != null && \"large:flex-wrap\",\n    align === \"start\" ? \"items-start\" : \"items-center\",\n    pad.target,\n    // When stacked the target is the top of the box, not all of it, so it takes its\n    // own corners and its own hover fill (see `children`).\n    stacked ? \"rounded-md\" : \"rounded-[inherit]\",\n    stacked && interactive && !inert && !selected && \"transition-colors hover:bg-[var(--bg-hover)]\",\n    interactive && TARGET_RING,\n    interactive && !inert && \"cursor-pointer\",\n    loading && \"cursor-progress\",\n    locked && !loading && \"cursor-not-allowed\",\n    targetClassName,\n  );\n\n  // `role` is the row's own (a button, a link, or nothing on a static block): a\n  // targetProps role would silently turn the row into something else.\n  const { role: _ignoredRole, ...targetExtras } = targetProps ?? {};\n\n  let main: ReactNode;\n  if (isLink) {\n    const linkProps: ListItemLinkProps = {\n      ...(targetExtras as Partial<ListItemLinkProps>),\n      ...rest,\n      ref: ref as Ref<HTMLAnchorElement>,\n      href,\n      className: target,\n      \"aria-current\": selected ? \"true\" : undefined,\n      \"aria-busy\": loading || undefined,\n      onClick: loading\n        ? (e) => e.preventDefault()\n        : (onClick as ListItemLinkProps[\"onClick\"]),\n      onAuxClick,\n      children: body,\n    };\n    const { children: linkBody, ...anchorProps } = linkProps;\n    const render = external ? undefined : pickLinkRenderer(renderLink, kitLink, href);\n    main = render ? (\n      <RenderedLink render={render} {...linkProps} />\n    ) : (\n      <a {...anchorProps} {...(external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : null)}>\n        {linkBody}\n      </a>\n    );\n  } else if (isButton) {\n    main = (\n      <button\n        {...(targetExtras as HTMLAttributes<HTMLButtonElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLButtonElement>}\n        type=\"button\"\n        // A disabled row is `disabled`: nothing to do there, and nothing to reach. A\n        // loading row is only `aria-disabled` — see `loading` — and so is a locked one:\n        // a reason wins over `disabled`, so the row stays reachable to say it.\n        disabled={locked ? undefined : disabled}\n        aria-disabled={loading || locked || undefined}\n        aria-busy={loading || undefined}\n        aria-current={selected ? \"true\" : undefined}\n        aria-expanded={expandable ? expanded : undefined}\n        aria-controls={expandable ? expandedId : undefined}\n        aria-describedby={\n          locked\n            ? mergeDescribedBy(rest[\"aria-describedby\"] as string | undefined, lock.reasonId)\n            : (rest[\"aria-describedby\"] as string | undefined)\n        }\n        onClick={\n          loading || locked\n            ? undefined\n            : expandable\n              ? toggle\n              : (onClick as (event: MouseEvent<HTMLButtonElement>) => void)\n        }\n        className={target}\n      >\n        {body}\n      </button>\n    );\n    if (locked) {\n      // The Tooltip takes the target's place in the row, so it takes its flex sizing\n      // too; the button fills it.\n      main = (\n        <LockedReason lock={lock} className=\"flex min-w-0 flex-1\">\n          {main}\n        </LockedReason>\n      );\n    }\n  } else {\n    main = (\n      <div\n        {...(targetExtras as HTMLAttributes<HTMLDivElement>)}\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        className={target}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const leadingActionsEl =\n    leadingActions != null ? (\n      <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.leadingActions)}>{leadingActions}</div>\n    ) : null;\n  const actionsEl =\n    actions != null ? <div className={cn(\"flex shrink-0 items-center\", pad.gap, pad.actions)}>{actions}</div> : null;\n\n  const row = (\n    <div\n      className={cn(\n        \"flex min-w-0 rounded-md border transition-colors\",\n        stacked ? \"flex-col\" : \"items-center\",\n        // See `renderRow`: the wrapper may be inline, the row is not.\n        renderRow && \"w-full\",\n        selected\n          ? \"border-[var(--brand)] bg-[var(--bg-surface-2)]\"\n          : bordered\n            ? \"border-[var(--border)]\"\n            : \"border-transparent\",\n        !stacked && interactive && !inert && !selected && \"hover:bg-[var(--bg-hover)]\",\n        (disabled || locked) && \"opacity-50\",\n        className,\n      )}\n    >\n      {stacked ? (\n        <>\n          <div className=\"flex min-w-0 items-center\">\n            {leadingActionsEl}\n            {main}\n            {actionsEl}\n          </div>\n          {expandable && (\n            <Collapse open={expanded}>\n              <div id={expandedId} role=\"group\" aria-labelledby={titleId} className={cn(\"min-w-0\", pad.body)}>\n                {expandedContent}\n              </div>\n            </Collapse>\n          )}\n          {hasBody && (\n            <div role=\"group\" aria-labelledby={titleId} className={cn(\"min-w-0\", pad.body, bodyClassName)}>\n              {children}\n            </div>\n          )}\n        </>\n      ) : (\n        <>\n          {leadingActionsEl}\n          {main}\n          {actionsEl}\n        </>\n      )}\n    </div>\n  );\n\n  const Tag = as;\n  return (\n    <Tag\n      className={cn(\n        list.separator === \"divider\" && \"border-b border-[var(--border)] last:border-b-0\",\n        list.separator === \"divider\" && as === \"li\" && \"py-0.5\",\n        renderRow && \"flex flex-col\",\n      )}\n    >\n      {renderRow ? renderRow(row) : row}\n    </Tag>\n  );\n});\n\nfunction RenderedLink({\n  render,\n  ...props\n}: ListItemLinkProps & { render: (props: ListItemLinkProps) => ReactElement }) {\n  return render(props);\n}\n"],"mappings":"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","names":["List","ListItem"]}