@eifi1/ui-kit 0.51.6 → 0.51.7

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { Children, createContext, 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 } from \"./focus-ring\";\nimport { Spinner } from \"./spinner\";\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 { LockedReason, mergeDescribedBy, useLockReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DEFAULT_LIST_LABELS } from \"./list-labels\";\nimport { Button } from \"./button\";\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  /** 0.51.4: the row under a {@link ListProps.limit}ed list that opens the rest, with\n   *  the WHOLE list's count — \"Show all (12)\". Optional, as every key added to a\n   *  namespace an app may annotate: left out, the provider's, then English. */\n  showAll?: (count: number) => string;\n  /** 0.51.4: the same row once the list is open, folding it back. */\n  showFewer?: string;\n}\n\n// Defined in ./list-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_LIST_LABELS };\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  /** The `<ul>` (or `<ol>`). A React 19 ref prop since 0.34 (MOD-4, refactor audit\n   *  2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLUListElement>;\n  /**\n   * Show the first `limit` rows, then a \"Show all (n)\" row that opens the rest and turns\n   * into \"Show fewer\" (0.51.4, keksdose run 89: a long \"Placed only roughly\" list on its\n   * Matching report could only fold as a whole, so it opened as nothing or everything).\n   * A list of `limit` rows or fewer draws them all, with no such row. Rows are counted as\n   * `Children` counts them: one per `ListItem`, a fragment as one.\n   *\n   * The row is a button with `aria-expanded`, controlling the list; it sits in the list\n   * as `role=\"none\"`, so a reader still hears \"list, 5 items\" for five rows.\n   */\n  limit?: number;\n}\n\n/** The show-all row's inset, in step with each density's row padding (`PAD`). */\nconst MORE_PAD: Record<ListDensity, string> = {\n  compact: \"px-2 py-1\",\n  default: \"px-3 py-1.5\",\n  comfortable: \"px-4 py-2\",\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 function List({\n  ref,\n  as = \"ul\",\n  density = \"default\",\n  separator = \"gap\",\n  limit,\n  className,\n  children,\n  ...rest\n}: ListProps) {\n  const Tag = as;\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const [open, setOpen] = useState(false);\n  const generatedId = useId();\n  const id = rest.id ?? generatedId;\n  const rows = limit === undefined ? null : Children.toArray(children);\n  const folds = rows !== null && rows.length > Math.max(0, limit!);\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        id={folds ? id : rest.id}\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        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : children}\n        {folds && (\n          <li role=\"none\" className={MORE_PAD[density]}>\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              className=\"h-auto p-0\"\n              aria-expanded={open}\n              aria-controls={id}\n              onClick={() => setOpen((was) => !was)}\n            >\n              {open\n                ? (labels.showFewer ?? DEFAULT_LIST_LABELS.showFewer)\n                : (labels.showAll ?? DEFAULT_LIST_LABELS.showAll!)(rows.length)}\n            </Button>\n          </li>\n        )}\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<ListDensity, { target: string; actions: string; leadingActions: string; gap: string; body: string }> =\n  {\n    compact: {\n      target: \"gap-2 px-2 py-1.5\",\n      actions: \"pe-1.5\",\n      leadingActions: \"ps-1.5\",\n      gap: \"gap-0.5\",\n      body: \"px-2 pb-1.5\",\n    },\n    default: {\n      target: \"gap-3 px-3 py-2.5\",\n      actions: \"pe-2\",\n      leadingActions: \"ps-2\",\n      gap: \"gap-1\",\n      body: \"px-3 pb-2.5\",\n    },\n    comfortable: {\n      target: \"gap-3 px-4 py-3\",\n      actions: \"pe-3\",\n      leadingActions: \"ps-3\",\n      gap: \"gap-1\",\n      body: \"px-4 pb-3\",\n    },\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  /** The main target — the row's `<a>`, `<button>` or `<div>`, where `id` goes. A React\n   *  19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLElement>;\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 a line under the row at Large and on a touch\n         * screen, else in the kit {@link Tooltip} over the row (`disabledReasonDisplay`),\n         * and on 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        /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`. A long list\n         *  of locked rows under a banner that already says why can keep it to the\n         *  tooltip with `\"tooltip\"` (DUP-3). */\n        disabledReasonDisplay?: DisabledReasonDisplay;\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        disabledReasonDisplay?: 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        disabledReasonDisplay?: 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        disabledReasonDisplay?: 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 function ListItem({\n  ref,\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  disabledReasonDisplay,\n  commit,\n  expandedContent,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onExpandedChange,\n  ...rest\n}: ListItemProps) {\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 && <Icon className={cn(\"size-4 shrink-0 text-muted\", align === \"start\" && \"mt-0.5\")} aria-hidden />}\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-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-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-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-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 &&\n        href !== undefined && <ExternalLink className=\"size-3.5 shrink-0 text-muted rtl:-scale-x-100\" aria-hidden />\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-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-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 ? (e) => e.preventDefault() : (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 frame takes the target's place in the row, so it takes its flex sizing too;\n      // the button fills it (`items-stretch` in the line's column). The line takes the\n      // row's body padding, so its words start where the title's do.\n      main = (\n        <LockedReason\n          lock={lock}\n          display={disabledReasonDisplay}\n          className=\"flex min-w-0 flex-1 items-stretch\"\n          lineClassName={pad.body}\n        >\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 ? \"border-brand bg-surface-2\" : bordered ? \"border-subtle\" : \"border-transparent\",\n        !stacked && interactive && !inert && !selected && \"hover: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-subtle 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":";AA4GM,SA6eF,UA/dQ,KAdN;AA5GN,SAAS,UAAU,eAAe,YAAY,OAAO,gBAAgB;AAErE,SAAS,aAAa,oBAAoB;AAE1C,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAE9B,SAAS,cAAc,kBAAkB;AACzC,SAAS,wBAAwB;AACjC,SAAS,cAAc,kBAAkB,qBAAiD;AAE1F,SAAS,2BAA2B;AACpC,SAAS,cAAc;AA+BvB,MAAM,cAAc,cAAkE;AAAA,EACpF,SAAS;AAAA,EACT,WAAW;AACb,CAAC;AA0BD,MAAM,WAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AACf;AASO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,KAAK;AAAA,EACL,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,MAAM;AACZ,QAAM,SAAS,aAAa,QAAQ,mBAAmB;AACvD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,cAAc,MAAM;AAC1B,QAAM,KAAK,KAAK,MAAM;AACtB,QAAM,OAAO,UAAU,SAAY,OAAO,SAAS,QAAQ,QAAQ;AACnE,QAAM,QAAQ,SAAS,QAAQ,KAAK,SAAS,KAAK,IAAI,GAAG,KAAM;AAC/D,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,SAAS,UAAU,GAChD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,QAAQ,KAAK,KAAK;AAAA,MACtB;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,cAAc,UAAU,YAAY,YAAY,YAAY;AAAA,QAC5D;AAAA,MACF;AAAA,MAEC;AAAA,iBAAS,CAAC,OAAO,KAAK,MAAM,GAAG,KAAK,IAAI,GAAG,KAAM,CAAC,IAAI;AAAA,QACtD,SACC,oBAAC,QAAG,MAAK,QAAO,WAAW,SAAS,OAAO,GACzC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,SAAS,MAAM,QAAQ,CAAC,QAAQ,CAAC,GAAG;AAAA,YAEnC,iBACI,OAAO,aAAa,oBAAoB,aACxC,OAAO,WAAW,oBAAoB,SAAU,KAAK,MAAM;AAAA;AAAA,QAClE,GACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAqBA,MAAM,MACJ;AAAA,EACE,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,MAAM;AAAA,EACR;AACF;AAQF,MAAM,cAAc,GAAG,YAAY,0BAA0B;AAW7D,MAAM,mBAAmB;AA+TlB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,OAAO,WAAW,WAAW;AACnC,QAAM,SAAS,aAAa,QAAQ,mBAAmB;AACvD,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,eAAe;AAC9D,QAAM,UAAU,eAAe,KAAK;AACpC,QAAM,MAAM,IAAI,OAAO;AACvB,QAAM,aAAa,oBAAoB;AACvC,QAAM,WAAW,eAAe,gBAAgB;AAChD,QAAM,SAAS,SAAS,UAAa,CAAC;AACtC,QAAM,WAAW,CAAC,WAAW,YAAY,UAAa,eAAe,SAAS;AAC9E,QAAM,cAAc,UAAU;AAG9B,QAAM,OAAO,cAAc,QAAQ,cAAc;AACjD,QAAM,SAAS,KAAK,UAAU,YAAY,CAAC;AAC3C,QAAM,QAAQ,YAAY,WAAW;AACrC,QAAM,UAAU,aAAa,UAAa,aAAa,QAAQ,aAAa;AAG5E,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,MAAM;AAEzB,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,CAAC;AACd,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AAEA,QAAM,OACJ,WACC,SAAS,oBAAC,aAAU,MAAK,SAAQ,MAAK,MAAK,WAAW,UAAU,UAAU,WAAW,QAAW,IAAK;AAExG,QAAM,OACJ,iCACG;AAAA,YAAQ,oBAAC,QAAK,WAAW,GAAG,8BAA8B,UAAU,WAAW,QAAQ,GAAG,eAAW,MAAC;AAAA,IACtG;AAAA,IAID,qBAAC,UAAK,WAAW,GAAG,gCAAgC,YAAY,QAAQ,gBAAgB,GACrF;AAAA,kBAAY,QACX,oBAAC,UAAK,WAAU,+EACb,oBACH;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UAEC,IAAI,UAAU,UAAU;AAAA,UACxB,WAAW;AAAA,YACT;AAAA,YACA,eAAe,IACX,yBACA,eAAe,IACb,GAAG,4BAA4B,gBAAgB,IAC/C;AAAA,YACN,SAAS,kBAAkB;AAAA,UAC7B;AAAA,UAEC;AAAA;AAAA,YACA,UAAU,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,cAAG,OAAO;AAAA,cAAO;AAAA,eAAC;AAAA,YACtD,YAAY,SAAS,UAAa,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,cAAG,OAAO;AAAA,cAAc;AAAA,eAAC;AAAA;AAAA;AAAA,MACxF;AAAA,MACC,YAAY,QACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,IAAI,GAAG,4BAA4B,gBAAgB,IAAI;AAAA,UAC3E;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAED,QAAQ,QACP;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WAAW,sCAAsC;AAAA,UACnD;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MAED,WAAW,QAAQ,oBAAC,UAAK,WAAU,wBAAwB,mBAAQ;AAAA,OACtE;AAAA,IACC,YAAY,QACX;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,iBAAiB,aAAa,cAAc,YAAY;AAAA,QAC1D;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IAED,UACC,oBAAC,WAAQ,OAAO,MAAM,WAAU,qBAAoB,IAEpD,YACA,SAAS,UAAa,oBAAC,gBAAa,WAAU,iDAAgD,eAAW,MAAC;AAAA,IAE3G;AAAA,IACA;AAAA;AAAA,IAGC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA,UAAU,WAAW;AAAA,UACrB,YAAY;AAAA,QACd;AAAA;AAAA,IACF;AAAA,KAEJ;AAGF,QAAM,SAAS;AAAA,IACb;AAAA;AAAA,IAEA,YAAY,QAAQ;AAAA,IACpB,UAAU,UAAU,gBAAgB;AAAA,IACpC,IAAI;AAAA;AAAA;AAAA,IAGJ,UAAU,eAAe;AAAA,IACzB,WAAW,eAAe,CAAC,SAAS,CAAC,YAAY;AAAA,IACjD,eAAe;AAAA,IACf,eAAe,CAAC,SAAS;AAAA,IACzB,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB;AAAA,EACF;AAIA,QAAM,EAAE,MAAM,cAAc,GAAG,aAAa,IAAI,eAAe,CAAC;AAEhE,MAAI;AACJ,MAAI,QAAQ;AACV,UAAM,YAA+B;AAAA,MACnC,GAAI;AAAA,MACJ,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,gBAAgB,WAAW,SAAS;AAAA,MACpC,aAAa,WAAW;AAAA,MACxB,SAAS,UAAU,CAAC,MAAM,EAAE,eAAe,IAAK;AAAA,MAChD;AAAA,MACA,UAAU;AAAA,IACZ;AACA,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,UAAM,SAAS,WAAW,SAAY,iBAAiB,YAAY,SAAS,IAAI;AAChF,WAAO,SACL,oBAAC,gBAAa,QAAiB,GAAG,WAAW,IAE7C,oBAAC,OAAG,GAAG,aAAc,GAAI,WAAW,EAAE,QAAQ,UAAU,KAAK,sBAAsB,IAAI,MACpF,oBACH;AAAA,EAEJ,WAAW,UAAU;AACnB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,MAAK;AAAA,QAIL,UAAU,SAAS,SAAY;AAAA,QAC/B,iBAAe,WAAW,UAAU;AAAA,QACpC,aAAW,WAAW;AAAA,QACtB,gBAAc,WAAW,SAAS;AAAA,QAClC,iBAAe,aAAa,WAAW;AAAA,QACvC,iBAAe,aAAa,aAAa;AAAA,QACzC,oBACE,SACI,iBAAiB,KAAK,kBAAkB,GAAyB,KAAK,QAAQ,IAC7E,KAAK,kBAAkB;AAAA,QAE9B,SACE,WAAW,SACP,SACA,aACE,SACC;AAAA,QAET,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAEF,QAAI,QAAQ;AAIV,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT,WAAU;AAAA,UACV,eAAe,IAAI;AAAA,UAElB;AAAA;AAAA,MACH;AAAA,IAEJ;AAAA,EACF,OAAO;AACL,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAI;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,iBAAe,YAAY;AAAA,QAC3B,aAAW,WAAW;AAAA,QACtB,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,mBACJ,kBAAkB,OAChB,oBAAC,SAAI,WAAW,GAAG,8BAA8B,IAAI,KAAK,IAAI,cAAc,GAAI,0BAAe,IAC7F;AACN,QAAM,YACJ,WAAW,OAAO,oBAAC,SAAI,WAAW,GAAG,8BAA8B,IAAI,KAAK,IAAI,OAAO,GAAI,mBAAQ,IAAS;AAE9G,QAAM,MACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,aAAa;AAAA;AAAA,QAEvB,aAAa;AAAA,QACb,WAAW,8BAA8B,WAAW,kBAAkB;AAAA,QACtE,CAAC,WAAW,eAAe,CAAC,SAAS,CAAC,YAAY;AAAA,SACjD,YAAY,WAAW;AAAA,QACxB;AAAA,MACF;AAAA,MAEC,oBACC,iCACE;AAAA,6BAAC,SAAI,WAAU,6BACZ;AAAA;AAAA,UACA;AAAA,UACA;AAAA,WACH;AAAA,QACC,cACC,oBAAC,YAAS,MAAM,UACd,8BAAC,SAAI,IAAI,YAAY,MAAK,SAAQ,mBAAiB,SAAS,WAAW,GAAG,WAAW,IAAI,IAAI,GAC1F,2BACH,GACF;AAAA,QAED,WACC,oBAAC,SAAI,MAAK,SAAQ,mBAAiB,SAAS,WAAW,GAAG,WAAW,IAAI,MAAM,aAAa,GACzF,UACH;AAAA,SAEJ,IAEA,iCACG;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA;AAAA,EAEJ;AAGF,QAAM,MAAM;AACZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,KAAK,cAAc,aAAa;AAAA,QAChC,KAAK,cAAc,aAAa,OAAO,QAAQ;AAAA,QAC/C,aAAa;AAAA,MACf;AAAA,MAEC,sBAAY,UAAU,GAAG,IAAI;AAAA;AAAA,EAChC;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/list.tsx"],"sourcesContent":["import { Children, createContext, 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 } from \"./focus-ring\";\nimport { Spinner } from \"./spinner\";\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 { LockedReason, mergeDescribedBy, useLockReason, type DisabledReasonDisplay } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DEFAULT_LIST_LABELS } from \"./list-labels\";\nimport { Button } from \"./button\";\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  /** 0.51.4: the row under a {@link ListProps.limit}ed list that opens the rest, with\n   *  the WHOLE list's count — \"Show all (12)\". Optional, as every key added to a\n   *  namespace an app may annotate: left out, the provider's, then English. */\n  showAll?: (count: number) => string;\n  /** 0.51.4: the same row once the list is open, folding it back. */\n  showFewer?: string;\n}\n\n// Defined in ./list-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_LIST_LABELS };\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  /** The `<ul>` (or `<ol>`). A React 19 ref prop since 0.34 (MOD-4, refactor audit\n   *  2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLUListElement>;\n  /**\n   * Show the first `limit` rows, then a \"Show all (n)\" row that opens the rest and turns\n   * into \"Show fewer\" (0.51.4, keksdose run 89: a long \"Placed only roughly\" list on its\n   * Matching report could only fold as a whole, so it opened as nothing or everything).\n   * A list of `limit` rows or fewer draws them all, with no such row. Rows are counted as\n   * `Children` counts them: one per `ListItem`, a fragment as one.\n   *\n   * The row is a button with `aria-expanded`, controlling the list; it sits in the list\n   * as `role=\"none\"`, so a reader still hears \"list, 5 items\" for five rows.\n   */\n  limit?: number;\n}\n\n/** The show-all row's inset, in step with each density's row padding (`PAD`). */\nconst MORE_PAD: Record<ListDensity, string> = {\n  compact: \"px-2 py-1\",\n  default: \"px-3 py-1.5\",\n  comfortable: \"px-4 py-2\",\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 function List({\n  ref,\n  as = \"ul\",\n  density = \"default\",\n  separator = \"gap\",\n  limit,\n  className,\n  children,\n  ...rest\n}: ListProps) {\n  const Tag = as;\n  const labels = useKitLabels(\"list\", DEFAULT_LIST_LABELS);\n  const [open, setOpen] = useState(false);\n  const generatedId = useId();\n  const id = rest.id ?? generatedId;\n  const rows = limit === undefined ? null : Children.toArray(children);\n  const folds = rows !== null && rows.length > Math.max(0, limit!);\n  return (\n    <ListContext.Provider value={{ density, separator }}>\n      <Tag\n        {...rest}\n        id={folds ? id : rest.id}\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        {/* The same array folded and open: `Children.toArray` re-keys every row (`.$a`),\n            so the raw `children` on one side remounted the first rows at each toggle and\n            dropped their state — an opened row, a typed input (audit 2026-10-30 DSP-20). */}\n        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : (rows ?? children)}\n        {folds && (\n          <li role=\"none\" className={MORE_PAD[density]}>\n            <Button\n              type=\"button\"\n              variant=\"link\"\n              size=\"sm\"\n              className=\"h-auto p-0\"\n              aria-expanded={open}\n              aria-controls={id}\n              onClick={() => setOpen((was) => !was)}\n            >\n              {open\n                ? (labels.showFewer ?? DEFAULT_LIST_LABELS.showFewer)\n                : (labels.showAll ?? DEFAULT_LIST_LABELS.showAll!)(rows.length)}\n            </Button>\n          </li>\n        )}\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<ListDensity, { target: string; actions: string; leadingActions: string; gap: string; body: string }> =\n  {\n    compact: {\n      target: \"gap-2 px-2 py-1.5\",\n      actions: \"pe-1.5\",\n      leadingActions: \"ps-1.5\",\n      gap: \"gap-0.5\",\n      body: \"px-2 pb-1.5\",\n    },\n    default: {\n      target: \"gap-3 px-3 py-2.5\",\n      actions: \"pe-2\",\n      leadingActions: \"ps-2\",\n      gap: \"gap-1\",\n      body: \"px-3 pb-2.5\",\n    },\n    comfortable: {\n      target: \"gap-3 px-4 py-3\",\n      actions: \"pe-3\",\n      leadingActions: \"ps-3\",\n      gap: \"gap-1\",\n      body: \"px-4 pb-3\",\n    },\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  /** The main target — the row's `<a>`, `<button>` or `<div>`, where `id` goes. A React\n   *  19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it was `forwardRef`. */\n  ref?: Ref<HTMLElement>;\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 a line under the row at Large and on a touch\n         * screen, else in the kit {@link Tooltip} over the row (`disabledReasonDisplay`),\n         * and on 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        /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`. A long list\n         *  of locked rows under a banner that already says why can keep it to the\n         *  tooltip with `\"tooltip\"` (DUP-3). */\n        disabledReasonDisplay?: DisabledReasonDisplay;\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        disabledReasonDisplay?: 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        disabledReasonDisplay?: 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        disabledReasonDisplay?: 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 function ListItem({\n  ref,\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  disabledReasonDisplay,\n  commit,\n  expandedContent,\n  expanded: expandedProp,\n  defaultExpanded = false,\n  onExpandedChange,\n  ...rest\n}: ListItemProps) {\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 && <Icon className={cn(\"size-4 shrink-0 text-muted\", align === \"start\" && \"mt-0.5\")} aria-hidden />}\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-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-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-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-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 &&\n        href !== undefined && <ExternalLink className=\"size-3.5 shrink-0 text-muted rtl:-scale-x-100\" aria-hidden />\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-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-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 ? (e) => e.preventDefault() : (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 frame takes the target's place in the row, so it takes its flex sizing too;\n      // the button fills it (`items-stretch` in the line's column). The line takes the\n      // row's body padding, so its words start where the title's do.\n      main = (\n        <LockedReason\n          lock={lock}\n          display={disabledReasonDisplay}\n          className=\"flex min-w-0 flex-1 items-stretch\"\n          lineClassName={pad.body}\n        >\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 ? \"border-brand bg-surface-2\" : bordered ? \"border-subtle\" : \"border-transparent\",\n        !stacked && interactive && !inert && !selected && \"hover: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-subtle 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":[]}

package/dist/components/modal.d.ts

@@ -130,6 +130,30 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
      * `onClose` still runs, after the param is cleared. Requires a react-router Router.
      */
     urlParam?: DialogParam;
+    /**
+     * A request the dialog started is in flight: it stays until the caller says otherwise
+     * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by
+     * closing the dialog, and the dialog should not pretend it can.
+     *
+     * While true the panel is `aria-busy`, and every dismissal is refused before the exit
+     * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —
+     * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an
+     * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them
+     * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its
+     * panel and popped it back up.
+     *
+     * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the
+     * press that reaches the dialog's own layer is taken and dropped. A refused Back puts
+     * the dialog's history entry back, so the Back after the request closes the dialog
+     * rather than leaving the page.
+     *
+     * Not held: a close the caller decides on (`open={false}`, unmounting), and — with
+     * `urlParam` — Back, which leaves the param's entry like any other navigation. A close
+     * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one
+     * made from an effect that depends on that close (ReauthDialog's on a resolved submit)
+     * runs again once `busy` turns false, because the close changes with it.
+     */
+    busy?: boolean;
     /**
      * The PANEL — the `role="dialog"` element the rest of the props go on, not the
      * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on

package/dist/components/modal.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
 import { mergeRefs } from "./field-parts.js";
@@ -94,6 +94,8 @@ function ModalPanel({
   style,
   role = "dialog",
   urlParam: _urlParam,
+  busy = false,
+  "aria-busy": ariaBusy,
   ownHistoryEntry = true,
   ref,
   ...rest
@@ -116,13 +118,16 @@ function ModalPanel({
     const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);
     return () => clearTimeout(timer);
   }, [exiting]);
-  const { closing, requestClose } = useCloseTransition(() => {
+  const { closing, requestClose: lower } = useCloseTransition(() => {
     setDismissed(true);
     onClose();
   });
+  const requestClose = useCallback(() => {
+    if (!busy) lower();
+  }, [busy, lower]);
   const backdropClose = useBackdropClose(active ? requestClose : () => {
   });
-  useOverlayHistory(active && ownHistoryEntry, requestClose);
+  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
   useBodyScrollLock(active);
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;
@@ -154,6 +159,7 @@ function ModalPanel({
             ref: setPanel,
             role: role === "alertdialog" ? "alertdialog" : "dialog",
             "aria-modal": "true",
+            "aria-busy": busy ? true : ariaBusy,
             "aria-labelledby": labelledBy,
             tabIndex: -1,
             onKeyDown: handleKeyDown,

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? requestClose : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  useOverlayHistory(active && ownHistoryEntry, requestClose);\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || window.innerWidth < 768) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * A request the dialog started is in flight: it stays until the caller says otherwise\n   * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by\n   * closing the dialog, and the dialog should not pretend it can.\n   *\n   * While true the panel is `aria-busy`, and every dismissal is refused before the exit\n   * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —\n   * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an\n   * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them\n   * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its\n   * panel and popped it back up.\n   *\n   * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the\n   * press that reaches the dialog's own layer is taken and dropped. A refused Back puts\n   * the dialog's history entry back, so the Back after the request closes the dialog\n   * rather than leaving the page.\n   *\n   * Not held: a close the caller decides on (`open={false}`, unmounting), and — with\n   * `urlParam` — Back, which leaves the param's entry like any other navigation. A close\n   * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one\n   * made from an effect that depends on that close (ReauthDialog's on a resolved submit)\n   * runs again once `busy` turns false, because the close changes with it.\n   */\n  busy?: boolean;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  busy = false,\n  \"aria-busy\": ariaBusy,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose: lower } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // `busy` (DUP-3) refuses HERE, before `lower` starts the exit: a refusal in the\n  // caller's `onClose` comes 220ms too late, after the panel has already gone down.\n  // A new function when `busy` flips, so a close asked for from an effect while busy\n  // (a resolved action whose caller's `isPending` trails its promise) runs again.\n  const requestClose = useCallback(() => {\n    if (!busy) lower();\n  }, [busy, lower]);\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? requestClose : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  // `held`: a Back while busy is refused, and the entry it took is put back.\n  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.\n        aria-busy={busy ? true : ariaBusy}\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAuRI;AAvRJ,SAAS,eAAe,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AACjF,SAAS,oBAAoB;AAS7B,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,sBAAwC;AACjD,SAAS,iBAAiB,oBAAoB,0BAA0B;AACxE,SAAS,eAAe,YAAY,uBAAuB;AAoB3D,SAAS,cAAc,SAAkB;AACvC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAC1E,QAAM,OAAO,OAAgE,IAAI;AAEjF,QAAM,UAAU,MAAM;AACpB,SAAK,UAAU;AAAA,EACjB;AAEA,SAAO;AAAA;AAAA;AAAA,IAGL,OAAO,MAAM,UAAU,IAAI;AAAA,IAC3B,OAAO,SAAS,EAAE,WAAW,aAAa,OAAO,CAAC,OAAO,OAAO,CAAC,MAAM,IAAI;AAAA,IAC3E,UAAU,CAAC,UACP,SACA;AAAA,MACE,eAAe,CAAC,MAAyC;AACvD,YAAI,EAAE,WAAW,KAAK,OAAO,aAAa,IAAK;AAC/C,cAAM,SAAS,EAAE;AAGjB,YAAI,OAAO,QAAQ,gDAAgD,EAAG;AACtE,aAAK,UAAU,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS,IAAI,QAAQ,KAAK,GAAG,IAAI,QAAQ,KAAK,EAAE;AACpF,YAAI;AAKF,YAAE,cAAc,kBAAkB,EAAE,SAAS;AAAA,QAC/C,QAAQ;AAAA,QAKR;AAAA,MACF;AAAA,MACA,eAAe,CAAC,MAAyC;AACvD,cAAM,QAAQ,KAAK;AACnB,YAAI,CAAC,MAAO;AACZ,kBAAU,EAAE,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,GAAG,GAAG,MAAM,KAAK,EAAE,UAAU,MAAM,EAAE,CAAC;AAAA,MACpF;AAAA,MACA,aAAa;AAAA;AAAA;AAAA;AAAA,MAIb,iBAAiB;AAAA,MACjB,sBAAsB;AAAA,IACxB;AAAA,EACN;AACF;AAQO,MAAM,oBAAoB,cAAmC,IAAI;AASjE,SAAS,iBAAiB,SAAqB;AACpD,QAAM,yBAAyB,OAAO,KAAK;AAC3C,SAAO;AAAA,IACL,aAAa,CAAC,MAAuC;AACnD,6BAAuB,UAAU,EAAE,WAAW,EAAE;AAAA,IAClD;AAAA,IACA,WAAW,CAAC,MAAuC;AACjD,YAAM,UAAU,uBAAuB;AACvC,6BAAuB,UAAU;AACjC,UAAI,WAAW,EAAE,WAAW,EAAE,cAAe,SAAQ;AAAA,IACvD;AAAA,EACF;AACF;AA4JA,SAAS,cAAc,EAAE,UAAU,SAAS,GAAG,KAAK,GAA2C;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,eAAe,QAAQ;AAI/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,MAAI,WAAW,CAAC,KAAM,YAAW,KAAK;AACtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAM,QAAQ,CAAC;AAAA,MACf,iBAAiB;AAAA,MACjB,SAAS,MAAM;AACb,mBAAW,IAAI;AACf,gBAAQ,KAAK;AACb,gBAAQ;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;AAUO,SAAS,MAAM,OAAmB;AACvC,SAAO,MAAM,aAAa,SACxB,oBAAC,iBAAe,GAAG,OAAO,UAAU,MAAM,UAAU,IAEpD,oBAAC,cAAY,GAAG,OAAO;AAE3B;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAGG;AACD,QAAM,WAAW,OAAuB,IAAI;AAG5C,QAAM,WAAW,QAAQ,MAAM,UAAU,UAAU,GAAG,GAAG,CAAC,GAAG,CAAC;AAC9D,QAAM,OAAO,cAAc,QAAQ,SAAS,CAAC;AAG7C,QAAM,SAAS,QAAQ;AAKvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAIhD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,IAAI;AAC7C,MAAI,SAAS,UAAU;AACrB,gBAAY,IAAI;AAChB,iBAAa,KAAK;AAClB,eAAW,SAAS,SAAS,aAAa,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC;AACrF,QAAI,KAAM,MAAK,MAAM;AAAA,EACvB;AACA,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,QAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,eAAe;AACjE,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,OAAO,CAAC;AAMZ,QAAM,EAAE,SAAS,cAAc,MAAM,IAAI,mBAAmB,MAAM;AAChE,iBAAa,IAAI;AACjB,YAAQ;AAAA,EACV,CAAC;AAKD,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,KAAM,OAAM;AAAA,EACnB,GAAG,CAAC,MAAM,KAAK,CAAC;AAGhB,QAAM,gBAAgB,iBAAiB,SAAS,eAAe,MAAM;AAAA,EAAC,CAAC;AAMvE,oBAAkB,UAAU,iBAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AAKzE,oBAAkB,MAAM;AAaxB,eAAa,UAAU,EAAE,QAAQ,cAAc,YAAY,CAAC;AAC5D,QAAM,UAAU,WAAW;AAK3B,QAAM,QAAQ,gBAAgB,QAAQ,YAAY;AAClD,QAAM,gBAAgB,CAAC,MAAqC;AAG1D,kBAAc,GAAG,WAAW,KAAK;AAGjC,eAAW,CAAC;AAAA,EACd;AAOA,MAAI,CAAC,UAAU,CAAC,QAAS,QAAO;AAChC,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAKC,eAAa,WAAW;AAAA,QAGxB,kBAAe;AAAA,QACf,WAAW;AAAA;AAAA;AAAA;AAAA,UAIT,UAAU,wBAAwB;AAAA,UAClC;AAAA,UACA,YAAY,eAAe;AAAA,QAC7B;AAAA,QACC,GAAG;AAAA,QAMJ;AAAA,UAAC;AAAA;AAAA,YAME,GAAG;AAAA,YACJ,KAAK;AAAA,YAGL,MAAM,SAAS,gBAAgB,gBAAgB;AAAA,YAC/C,cAAW;AAAA,YAEX,aAAW,OAAO,OAAO;AAAA,YACzB,mBAAiB;AAAA,YACjB,UAAU;AAAA,YACV,WAAW;AAAA,YACV,GAAG,KAAK;AAAA,YAIT,OAAO,EAAE,GAAG,OAAO,GAAG,KAAK,MAAM;AAAA,YACjC,WAAW;AAAA,cACT,UAAU,sCAAsC;AAAA,cAChD;AAAA,cACA,EAAE,IAAI,YAAY,IAAI,YAAY,IAAI,aAAa,OAAO,iBAAiB,EAAE,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAcjF;AAAA,cACA;AAAA;AAAA;AAAA,cAGA,aAAa;AAAA,cACb;AAAA,YACF;AAAA,YAEA,8BAAC,kBAAkB,UAAlB,EAA2B,OAAO,cAAe,UAAS;AAAA;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/money-draft.js

@@ -1,5 +1,6 @@
 "use client";
 import { useState } from "react";
+import { formatResult } from "../lib/calc.js";
 function readAmount(text) {
   const t = text.trim();
   if (t === "") return null;
@@ -11,12 +12,13 @@ function amountOf(value) {
   return typeof value === "number" ? Number.isFinite(value) ? value : void 0 : readAmount(String(value));
 }
 function useMoneyDraft(value, valueAs = "number") {
-  const external = value === null || value === void 0 ? "" : String(value);
+  const stored = typeof value === "number" && !Number.isFinite(value) ? null : value;
+  const external = stored === null || stored === void 0 ? "" : typeof stored === "number" ? formatResult(stored) : String(stored);
   const [draft, setDraft] = useState(external);
-  const [seen, setSeen] = useState(value);
-  if (seen !== value) {
-    setSeen(value);
-    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(value);
+  const [seen, setSeen] = useState(stored);
+  if (!Object.is(seen, stored)) {
+    setSeen(stored);
+    const same = valueAs === "string" ? draft === external : readAmount(draft) === amountOf(stored);
     if (!same) setDraft(external);
   }
   return {

package/dist/components/money-draft.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/money-draft.ts"],"sourcesContent":["import { useState } from \"react\";\n\n/**\n * The draft-and-settle loop of a money field whose store is not AmountInput's text.\n * Package-private — a module of its own so `money-field.tsx`'s `export *` in the barrel\n * does not make it API.\n */\n\n/** The number an amount's text reads as — AmountInput reports dot-decimal text — `null`\n *  for empty, `undefined` for no number yet (a lone \"-\" or \".\", a sum still being typed:\n *  \"1200+\"). */\nexport function readAmount(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/** A stored amount as a number: a number as it is, a stored text read as an amount's\n *  text is, nothing as `null`. */\nfunction amountOf(value: unknown): number | null | undefined {\n  if (value === null || value === undefined) return null;\n  return typeof value === \"number\" ? (Number.isFinite(value) ? value : undefined) : readAmount(String(value));\n}\n\n/** {@link useMoneyDraft}'s answer. */\nexport interface MoneyDraft {\n  /** The text the field shows — AmountInput's `value`. */\n  draft: string;\n  /** AmountInput's `onChange`: keeps the typed text, and answers what it reads as — a\n   *  number, `null` for empty, `undefined` for no number yet. */\n  change: (text: string) => number | null | undefined;\n  /** AmountInput's `onCommit`: what the settled text reads as. With no number in it (a\n   *  lone \"-\") the draft goes back to the stored amount — rather than a guess, and rather\n   *  than leaving \"-\" on screen while the store keeps the old figure — and the answer is\n   *  `undefined`. A `\"string\"` store keeps what was typed: it holds that text too. */\n  settle: (text: string) => number | null | undefined;\n}\n\n/**\n * The draft-and-settle loop of a money field whose store is a number, or text the store\n * holds itself: `MoneyField`'s, and `RhfMoneyField`'s (`valueAs`). One copy since 0.34\n * (DUP-9, refactor audit 2026-10): the twin's own kept a different parse and no\n * snap-back, so a lone \"-\" stayed on screen while the form kept the old number.\n *\n * The text being typed lives here — a stored number cannot hold \"12.\" or \"12+5\" — and is\n * re-read from `value` only when `value` moves away from what the draft already says (a\n * reset, another row's save, a `setValue`), so a commit's own echo keeps the typist's\n * spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n */\nexport function useMoneyDraft(value: unknown, valueAs: \"number\" | \"string\" = \"number\"): MoneyDraft {\n  const external = value === null || value === undefined ? \"\" : String(value);\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState<unknown>(value);\n  if (seen !== value) {\n    setSeen(value);\n    const same = valueAs === \"string\" ? draft === external : readAmount(draft) === amountOf(value);\n    if (!same) setDraft(external);\n  }\n  return {\n    draft,\n    change: (text) => {\n      setDraft(text);\n      return readAmount(text);\n    },\n    settle: (text) => {\n      const next = readAmount(text);\n      if (next === undefined && valueAs === \"number\") setDraft(external);\n      return next;\n    },\n  };\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AAWlB,SAAS,WAAW,MAAyC;AAClE,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAIA,SAAS,SAAS,OAA2C;AAC3D,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,SAAO,OAAO,UAAU,WAAY,OAAO,SAAS,KAAK,IAAI,QAAQ,SAAa,WAAW,OAAO,KAAK,CAAC;AAC5G;AA2BO,SAAS,cAAc,OAAgB,UAA+B,UAAsB;AACjG,QAAM,WAAW,UAAU,QAAQ,UAAU,SAAY,KAAK,OAAO,KAAK;AAC1E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,SAAS,OAAO;AAClB,YAAQ,KAAK;AACb,UAAM,OAAO,YAAY,WAAW,UAAU,WAAW,WAAW,KAAK,MAAM,SAAS,KAAK;AAC7F,QAAI,CAAC,KAAM,UAAS,QAAQ;AAAA,EAC9B;AACA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,eAAS,IAAI;AACb,aAAO,WAAW,IAAI;AAAA,IACxB;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,YAAM,OAAO,WAAW,IAAI;AAC5B,UAAI,SAAS,UAAa,YAAY,SAAU,UAAS,QAAQ;AACjE,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/money-draft.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { formatResult } from \"../lib/calc\";\n\n/**\n * The draft-and-settle loop of a money field whose store is not AmountInput's text.\n * Package-private — a module of its own so `money-field.tsx`'s `export *` in the barrel\n * does not make it API.\n */\n\n/** The number an amount's text reads as — AmountInput reports dot-decimal text — `null`\n *  for empty, `undefined` for no number yet (a lone \"-\" or \".\", a sum still being typed:\n *  \"1200+\"). */\nexport function readAmount(text: string): number | null | undefined {\n  const t = text.trim();\n  if (t === \"\") return null;\n  const n = Number(t);\n  return Number.isFinite(n) ? n : undefined;\n}\n\n/** A stored amount as a number: a number as it is, a stored text read as an amount's\n *  text is, nothing as `null`. */\nfunction amountOf(value: unknown): number | null | undefined {\n  if (value === null || value === undefined) return null;\n  return typeof value === \"number\" ? (Number.isFinite(value) ? value : undefined) : readAmount(String(value));\n}\n\n/** {@link useMoneyDraft}'s answer. */\nexport interface MoneyDraft {\n  /** The text the field shows — AmountInput's `value`. */\n  draft: string;\n  /** AmountInput's `onChange`: keeps the typed text, and answers what it reads as — a\n   *  number, `null` for empty, `undefined` for no number yet. */\n  change: (text: string) => number | null | undefined;\n  /** AmountInput's `onCommit`: what the settled text reads as. With no number in it (a\n   *  lone \"-\") the draft goes back to the stored amount — rather than a guess, and rather\n   *  than leaving \"-\" on screen while the store keeps the old figure — and the answer is\n   *  `undefined`. A `\"string\"` store keeps what was typed: it holds that text too. */\n  settle: (text: string) => number | null | undefined;\n}\n\n/**\n * The draft-and-settle loop of a money field whose store is a number, or text the store\n * holds itself: `MoneyField`'s, and `RhfMoneyField`'s (`valueAs`). One copy since 0.34\n * (DUP-9, refactor audit 2026-10): the twin's own kept a different parse and no\n * snap-back, so a lone \"-\" stayed on screen while the form kept the old number.\n *\n * The text being typed lives here — a stored number cannot hold \"12.\" or \"12+5\" — and is\n * re-read from `value` only when `value` moves away from what the draft already says (a\n * reset, another row's save, a `setValue`), so a commit's own echo keeps the typist's\n * spelling (\"12.50\" stays \"12.50\" when 12.5 comes back).\n */\nexport function useMoneyDraft(value: unknown, valueAs: \"number\" | \"string\" = \"number\"): MoneyDraft {\n  // A number that is not finite is no amount, as on NumberField. NaN never equals itself,\n  // and the re-read below took it for a new value on every render until React threw \"Too\n  // many re-renders\" — MoneyField and RhfMoneyField both (refactor audit 2026-10-30,\n  // INP-11).\n  const stored = typeof value === \"number\" && !Number.isFinite(value) ? null : value;\n  // `formatResult`, not `String`: `String` writes exponent form below 1e-6 and from 1e21,\n  // and the commit's digits-only cleanup strips the \"e\" — one click into the field and\n  // away committed a float leftover of 5.1e-15 as 5.12, 1e-7 as 17 and 1e21 as 121\n  // (INP-12, BUG-11's class).\n  const external =\n    stored === null || stored === undefined ? \"\" : typeof stored === \"number\" ? formatResult(stored) : String(stored);\n  const [draft, setDraft] = useState(external);\n  const [seen, setSeen] = useState<unknown>(stored);\n  if (!Object.is(seen, stored)) {\n    setSeen(stored);\n    const same = valueAs === \"string\" ? draft === external : readAmount(draft) === amountOf(stored);\n    if (!same) setDraft(external);\n  }\n  return {\n    draft,\n    change: (text) => {\n      setDraft(text);\n      return readAmount(text);\n    },\n    settle: (text) => {\n      const next = readAmount(text);\n      if (next === undefined && valueAs === \"number\") setDraft(external);\n      return next;\n    },\n  };\n}\n"],"mappings":";AAAA,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAWtB,SAAS,WAAW,MAAyC;AAClE,QAAM,IAAI,KAAK,KAAK;AACpB,MAAI,MAAM,GAAI,QAAO;AACrB,QAAM,IAAI,OAAO,CAAC;AAClB,SAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAClC;AAIA,SAAS,SAAS,OAA2C;AAC3D,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,SAAO,OAAO,UAAU,WAAY,OAAO,SAAS,KAAK,IAAI,QAAQ,SAAa,WAAW,OAAO,KAAK,CAAC;AAC5G;AA2BO,SAAS,cAAc,OAAgB,UAA+B,UAAsB;AAKjG,QAAM,SAAS,OAAO,UAAU,YAAY,CAAC,OAAO,SAAS,KAAK,IAAI,OAAO;AAK7E,QAAM,WACJ,WAAW,QAAQ,WAAW,SAAY,KAAK,OAAO,WAAW,WAAW,aAAa,MAAM,IAAI,OAAO,MAAM;AAClH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,QAAQ;AAC3C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,MAAM;AAChD,MAAI,CAAC,OAAO,GAAG,MAAM,MAAM,GAAG;AAC5B,YAAQ,MAAM;AACd,UAAM,OAAO,YAAY,WAAW,UAAU,WAAW,WAAW,KAAK,MAAM,SAAS,MAAM;AAC9F,QAAI,CAAC,KAAM,UAAS,QAAQ;AAAA,EAC9B;AACA,SAAO;AAAA,IACL;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,eAAS,IAAI;AACb,aAAO,WAAW,IAAI;AAAA,IACxB;AAAA,IACA,QAAQ,CAAC,SAAS;AAChB,YAAM,OAAO,WAAW,IAAI;AAC5B,UAAI,SAAS,UAAa,YAAY,SAAU,UAAS,QAAQ;AACjE,aAAO;AAAA,IACT;AAAA,EACF;AACF;","names":[]}

package/dist/components/money-field.d.ts

@@ -5,8 +5,8 @@ export interface MoneyFieldProps extends Omit<AmountInputProps, "value" | "onCha
     /** The amount, or `null` for an empty field. */
     value: number | null;
     /**
-     * The settled amount — on blur, on Enter, on the numpad's "=" and on a calculator
-     * result; never a half-typed "1200+". Rounded to the currency's minor unit (or
+     * The settled amount — on blur, on Enter, on the numpad's "=" and once per calculator
+     * session (its "=", or the pad closing on a newer result); never a half-typed "1200+". Rounded to the currency's minor unit (or
      * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the
      * field was emptied. Not fired when the settled amount equals `value`, so an
      * Enter-then-blur saves once.

package/dist/components/money-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\nimport { useMoneyDraft } from \"./money-draft\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps extends Omit<\n  AmountInputProps,\n  \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"\n> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and on a calculator\n   * result; never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the\n * field that paints and describes it like {@link Input}'s, and `calculator={false}`,\n * for an amount in a close-on-blur inline editor, where a click on the calculator icon\n * blurs the field and tears the editor down before the popover can open (typed\n * calculations still evaluate).\n *\n * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a\n * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.\n *\n * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a\n * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the\n * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in\n * the kit Tooltip and its description; the calculator, the numpad and the currency\n * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab\n * order, which is what a lock must not do.\n *\n * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:\n * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit\n * price's finer scale (kastlan 5).\n *\n * ```tsx\n * <MoneyField aria-label=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const money = useMoneyDraft(value);\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={money.draft}\n      onChange={money.change}\n      onCommit={(text) => {\n        // No number (\"-\" alone): the draft is back on the stored amount, nothing commits.\n        const next = money.settle(text);\n        if (next !== undefined && next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AA+DI;AA9DJ,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AA0DvB,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,QAAQ,cAAc,KAAK;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,UAAU,CAAC,SAAS;AAElB,cAAM,OAAO,MAAM,OAAO,IAAI;AAC9B,YAAI,SAAS,UAAa,SAAS,MAAO,UAAS,IAAI;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/money-field.tsx"],"sourcesContent":["import type { ComponentProps, Ref } from \"react\";\nimport { AmountInput } from \"./amount-input\";\nimport { useMoneyDraft } from \"./money-draft\";\n\ntype AmountInputProps = ComponentProps<typeof AmountInput>;\n\nexport interface MoneyFieldProps extends Omit<\n  AmountInputProps,\n  \"value\" | \"onChange\" | \"onCommit\" | \"negative\" | \"onNegativeChange\" | \"ref\"\n> {\n  /** The amount, or `null` for an empty field. */\n  value: number | null;\n  /**\n   * The settled amount — on blur, on Enter, on the numpad's \"=\" and once per calculator\n   * session (its \"=\", or the pad closing on a newer result); never a half-typed \"1200+\". Rounded to the currency's minor unit (or\n   * `digits`) and clamped to `min` / `max`, like {@link AmountInput}. `null` when the\n   * field was emptied. Not fired when the settled amount equals `value`, so an\n   * Enter-then-blur saves once.\n   */\n  onCommit: (value: number | null) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\n/**\n * {@link AmountInput} with a NUMBER in and a number out, for money edited outside a\n * form — a budget row, a table cell (kastlan 52: new-budget-page edited a CHF amount per\n * row with `NumberField` because AmountInput is string-valued and reports every\n * keystroke, \"1200+\" included, so a number-state row needed its own parse-and-settle\n * glue). This is that glue, the same one `RhfMoneyField` has: the text being typed\n * lives here, and only a settled figure reaches `onCommit`.\n *\n * The currency chip, the calculator, the numpad, the locale's decimal mark, the\n * rounding to the currency's minor unit and `min` / `max` are AmountInput's. A caller-\n * owned sign (`negative`) is not offered: the figure here carries its own minus.\n *\n * So are two props a table cell needs (keksdose K4, K6): `error`, the message under the\n * field that paints and describes it like {@link Input}'s, and `calculator={false}`,\n * for an amount in a close-on-blur inline editor, where a click on the calculator icon\n * blurs the field and tears the editor down before the popover can open (typed\n * calculations still evaluate).\n *\n * `inputClassName` (0.23, keksdose G7) styles the `<input>` itself — `text-end` for a\n * money column — where `className` sizes the wrapper; see {@link AmountInput}'s.\n *\n * LOCKED (0.34, round 0.34 C2): a row that saves itself passes `commit` (or a\n * `disabledReason` of its own), AmountInput's — under a locked `WriteLockProvider` the\n * field stays in the tab order showing its amount, `readOnly`, with the lock's reason in\n * the kit Tooltip and its description; the calculator, the numpad and the currency\n * picker are off, and `onCommit` is never called. `disabled` takes it out of the tab\n * order, which is what a lock must not do.\n *\n * This, not a `NumberField` with `digits={2}`, is the number-valued field for money:\n * it settles to the CURRENCY's minor unit (JPY 0, CHF 2) and `digits` takes a unit\n * price's finer scale (kastlan 5).\n *\n * ```tsx\n * <MoneyField aria-label=\"Amount\" currency=\"CHF\" value={row.amount}\n *   onCommit={(amount) => updateRow(row.id, { amount })} />\n * ```\n */\nexport function MoneyField({ value, onCommit, ref, ...props }: MoneyFieldProps) {\n  const money = useMoneyDraft(value);\n  return (\n    <AmountInput\n      {...props}\n      ref={ref}\n      value={money.draft}\n      onChange={money.change}\n      onCommit={(text) => {\n        // No number (\"-\" alone): the draft is back on the stored amount, nothing commits.\n        const next = money.settle(text);\n        if (next !== undefined && next !== value) onCommit(next);\n      }}\n    />\n  );\n}\n"],"mappings":";AA+DI;AA9DJ,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AA0DvB,SAAS,WAAW,EAAE,OAAO,UAAU,KAAK,GAAG,MAAM,GAAoB;AAC9E,QAAM,QAAQ,cAAc,KAAK;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO,MAAM;AAAA,MACb,UAAU,MAAM;AAAA,MAChB,UAAU,CAAC,SAAS;AAElB,cAAM,OAAO,MAAM,OAAO,IAAI;AAC9B,YAAI,SAAS,UAAa,SAAS,MAAO,UAAS,IAAI;AAAA,MACzD;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/multi-entity-combobox.js

@@ -110,7 +110,8 @@ function MultiEntityCombobox(props) {
     onCreate,
     q,
     results.map((o) => o.label),
-    createEmptyLabel
+    createEmptyLabel,
+    locale
   );
   const showClear = Boolean(clearable && value.length > 0 && !inert);
   const toggle = (o) => {