@eifi1/ui-kit 0.16.1 → 0.17.0

package/dist/components/facing-pair.d.ts

@@ -6,7 +6,7 @@ import './series-chart-labels.js';
 import './toggle-legend.js';
 import './series-chart-ticks.js';
 import './series-chart-budget.js';
-import '../kit-labels-DE--LmCk.js';
+import '../kit-labels-C4uB_zmg.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/file-button.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { O as DEFAULT_FILE_PICKER_LABELS, ac as FileButton, ad as FileButtonProps, bf as FilePickHandler, af as FilePickerLabels, ag as FileRejection, ah as FileRejectionReason, ai as FileScreenOptions, b0 as UseFilePickerOptions, b1 as UseFilePickerReturn, bg as formatAccept, bh as judgePick, b4 as matchesAccept, bi as screenFiles, bj as summariseRejections, b7 as useFilePicker } from '../kit-labels-DE--LmCk.js';
+export { P as DEFAULT_FILE_PICKER_LABELS, ad as FileButton, ae as FileButtonProps, bh as FilePickHandler, ag as FilePickerLabels, ah as FileRejection, ai as FileRejectionReason, aj as FileScreenOptions, b2 as UseFilePickerOptions, b3 as UseFilePickerReturn, bi as formatAccept, bj as judgePick, b6 as matchesAccept, bk as screenFiles, bl as summariseRejections, b9 as useFilePicker } from '../kit-labels-C4uB_zmg.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/file-dropzone.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ag as FileRejection, bf as FilePickHandler, af as FilePickerLabels } from '../kit-labels-DE--LmCk.js';
+import { ah as FileRejection, bh as FilePickHandler, ag as FilePickerLabels } from '../kit-labels-C4uB_zmg.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/form-actions.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import 'lucide-react';
-export { P as DEFAULT_FORM_ACTIONS_LABELS, al as FormActions, am as FormActionsAlign, an as FormActionsDestructive, ao as FormActionsLabels, ap as FormActionsPlacement, aq as FormActionsProps, ar as FormActionsStickyWithin, as as FormActionsSubmitProps } from '../kit-labels-DE--LmCk.js';
+export { Q as DEFAULT_FORM_ACTIONS_LABELS, am as FormActions, an as FormActionsAlign, ao as FormActionsDestructive, ap as FormActionsLabels, aq as FormActionsPlacement, ar as FormActionsProps, as as FormActionsStickyWithin, at as FormActionsSubmitProps, aN as ResponsiveFormActionsPlacement } from '../kit-labels-C4uB_zmg.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';

package/dist/components/form-actions.js

@@ -3,11 +3,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { isValidElement } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Button, Spinner } from "./ui.js";
 const DEFAULT_FORM_ACTIONS_LABELS = {
   save: "Save",
   cancel: "Cancel"
 };
+const BREAKPOINTS = [
+  ["xl", "(min-width: 1280px)"],
+  ["lg", "(min-width: 1024px)"],
+  ["md", "(min-width: 768px)"],
+  ["sm", "(min-width: 640px)"]
+];
+function useResolvedPlacement(placement) {
+  const matches = {
+    xl: useMediaQuery(BREAKPOINTS[0][1], false),
+    lg: useMediaQuery(BREAKPOINTS[1][1], false),
+    md: useMediaQuery(BREAKPOINTS[2][1], false),
+    sm: useMediaQuery(BREAKPOINTS[3][1], false)
+  };
+  if (typeof placement === "string") return placement;
+  for (const [key] of BREAKPOINTS) {
+    const p = placement[key];
+    if (matches[key] && p !== void 0) return p;
+  }
+  return placement.base;
+}
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
 const ALIGN_CLASS = {
   start: "justify-start",
   center: "justify-center",
@@ -37,8 +61,9 @@ function FormActions({
   destructive,
   start: startSlot,
   align,
-  placement = "inline",
+  placement: placementProp = "inline",
   stickyWithin = "viewport",
+  bleed,
   form,
   children,
   className,
@@ -46,6 +71,8 @@ function FormActions({
   ...rest
 }) {
   const labels = useKitLabels("form", DEFAULT_FORM_ACTIONS_LABELS);
+  const placement = useResolvedPlacement(placementProp);
+  const bleedLength = bleed === void 0 || bleed === "" ? void 0 : cssLength(bleed);
   const hasDestructive = destructive !== void 0 && destructive !== null && destructive !== false;
   const hasStart = startSlot !== void 0 && startSlot !== null && startSlot !== false;
   const justify = align ?? (hasDestructive || hasStart ? "between" : "end");
@@ -78,6 +105,10 @@ function FormActions({
         // container the nav is not underneath: `--app-nav-h` is the document's,
         // and would hold the row that far above the container's own edge.
         bottom: stickyWithin === "container" ? 0 : "max(0px, calc(var(--app-nav-h, 0px) - 1px))",
+        ...bleedLength !== void 0 && {
+          marginInline: `calc(-1 * ${bleedLength})`,
+          paddingInline: bleedLength
+        },
         ...style
       } : style,
       className: cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className),

package/dist/components/form-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner, type ButtonProps, type ButtonVariant } from \"./ui\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n};\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  submitVariant = \"brand\",\n  destructive,\n  start: startSlot,\n  align,\n  placement = \"inline\",\n  stickyWithin = \"viewport\",\n  form,\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n\n  return (\n    <div\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...style,\n            }\n          : style\n      }\n      className={cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}\n    >\n      {(hasDestructive || hasStart) && (\n        <div className=\"me-auto flex min-w-0 flex-wrap items-center gap-2\">\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={onSubmit}\n          variant={submitVariant}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          aria-busy={pending || undefined}\n        >\n          {pending ? (\n            <Spinner label={null} className=\"size-4\" />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className=\"size-4 shrink-0\" />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA6MI,cAuCI,YAvCJ;AA7MJ,SAAS,sBAAsB;AAG/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,eAAqD;AAQ/D,MAAM,8BAAiD;AAAA,EAC5D,MAAM;AAAA,EACN,QAAQ;AACV;AA2CA,MAAM,cAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,kBAAwD;AAAA,EAC5D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAwFA,SAAS,kBAAkB,OAAiD;AAC1E,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,eAAe,KAAK,KAAK,aAAa;AAC/F;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,QAAQ,2BAA2B;AAC/D,QAAM,iBAAiB,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,WAAW,cAAc,UAAa,cAAc,QAAQ,cAAc;AAChF,QAAM,UAAU,UAAU,kBAAkB,WAAW,YAAY;AACnE,QAAM,kBAAkB,CAAC,iBAAiB,OAAO,kBAAkB,WAAW,IAC5E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,YAAY;AAAA,MACrB,UAAU,YAAY;AAAA,MACtB,gBAAgB,YAAY;AAAA,MAE3B,sBAAY;AAAA;AAAA,EACf,IAEA;AAEF,QAAM,YAAY,eAAe,OAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,kBAAgB;AAAA,MAChB,sBAAoB,cAAc,WAAW,eAAe;AAAA,MAC3D,GAAG;AAAA,MACJ,OACE,cAAc,WACV;AAAA,QACE,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,QAAQ,iBAAiB,cAAc,IAAI;AAAA,QAC3C,GAAG;AAAA,MACL,IACA;AAAA,MAEN,WAAW,GAAG,qCAAqC,YAAY,OAAO,GAAG,gBAAgB,SAAS,GAAG,SAAS;AAAA,MAE5G;AAAA,2BAAkB,aAClB,qBAAC,SAAI,WAAU,qDACZ;AAAA;AAAA,UACA,YAAY;AAAA,WACf;AAAA,QAEF,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA,YACC,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,SAAS,UAChD,yBAAe,OAAO,QACzB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,MAAM,WAAW,WAAW;AAAA,cAC5B;AAAA,cACA,SAAS;AAAA,cACT,SAAS;AAAA,cACT,UAAU,WAAW;AAAA,cACrB,gBAAgB,UAAU,SAAY;AAAA,cACtC,aAAW,WAAW;AAAA,cAErB;AAAA,0BACC,oBAAC,WAAQ,OAAO,MAAM,WAAU,UAAS,IAEzC,cAAc,oBAAC,cAAW,eAAW,MAAC,WAAU,mBAAkB;AAAA,gBAEnE,WAAW,iBAAiB,SAAY,eAAe;AAAA;AAAA;AAAA,UAC1D;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { Button, Spinner, type ButtonProps, type ButtonVariant } from \"./ui\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n};\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * A placement per breakpoint, mobile first — `{ base: \"sticky\", md: \"inline\" }` is a\n * Save row stuck to the bottom of a phone's long form and in the flow under the last\n * field from 768px up, where the form fits. The breakpoints are Tailwind's (sm 640,\n * md 768, lg 1024, xl 1280px), as `BulkActionBar`'s `variant` breakpoints are, and\n * resolved the same way, in JS: the sticky row is positioned by inline style, which a\n * `md:` class cannot reach. keksdose switched `placement` on its own media query at\n * every long form for want of this.\n */\nexport interface ResponsiveFormActionsPlacement {\n  base: FormActionsPlacement;\n  sm?: FormActionsPlacement;\n  md?: FormActionsPlacement;\n  lg?: FormActionsPlacement;\n  xl?: FormActionsPlacement;\n}\n\nconst BREAKPOINTS = [\n  [\"xl\", \"(min-width: 1280px)\"],\n  [\"lg\", \"(min-width: 1024px)\"],\n  [\"md\", \"(min-width: 768px)\"],\n  [\"sm\", \"(min-width: 640px)\"],\n] as const;\n\n/** The placement in force: the widest breakpoint that matches AND names one, else\n *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a\n *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row\n *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */\nfunction useResolvedPlacement(\n  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,\n): FormActionsPlacement {\n  const matches = {\n    xl: useMediaQuery(BREAKPOINTS[0][1], false),\n    lg: useMediaQuery(BREAKPOINTS[1][1], false),\n    md: useMediaQuery(BREAKPOINTS[2][1], false),\n    sm: useMediaQuery(BREAKPOINTS[3][1], false),\n  };\n  if (typeof placement === \"string\") return placement;\n  for (const [key] of BREAKPOINTS) {\n    const p = placement[key];\n    if (matches[key] && p !== undefined) return p;\n  }\n  return placement.base;\n}\n\n/** A CSS length: a number is pixels. */\nfunction cssLength(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}, or one per breakpoint — see\n   *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;\n  /**\n   * While the row is `sticky`: pull it out over its container's inline padding by this\n   * much (a CSS length, a number in px) and give the same back as padding — so the\n   * rule above it and its surface run edge to edge, while the buttons stay on the\n   * content's line. Without it a sticky row in a padded card or pane is a strip inset\n   * from both sides, with the content scrolling past it in the gutters (keksdose wrote\n   * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`\"0.75rem\"`,\n   * `12`, `\"var(--pane-px)\"`). Applied only while the resolved placement is sticky, so\n   * `placement={{ base: \"sticky\", md: \"inline\" }}` bleeds on the phone alone.\n   */\n  bleed?: string | number;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  submitVariant = \"brand\",\n  destructive,\n  start: startSlot,\n  align,\n  placement: placementProp = \"inline\",\n  stickyWithin = \"viewport\",\n  bleed,\n  form,\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  const placement = useResolvedPlacement(placementProp);\n  const bleedLength = bleed === undefined || bleed === \"\" ? undefined : cssLength(bleed);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n\n  return (\n    <div\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...(bleedLength !== undefined && {\n                marginInline: `calc(-1 * ${bleedLength})`,\n                paddingInline: bleedLength,\n              }),\n              ...style,\n            }\n          : style\n      }\n      className={cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}\n    >\n      {(hasDestructive || hasStart) && (\n        <div className=\"me-auto flex min-w-0 flex-wrap items-center gap-2\">\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={onSubmit}\n          variant={submitVariant}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          aria-busy={pending || undefined}\n        >\n          {pending ? (\n            <Spinner label={null} className=\"size-4\" />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className=\"size-4 shrink-0\" />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -38,8 +38,10 @@ interface LineItemCellContext<T> {
  *  `floating`: the field shows its own floating label ({@link LineItemCellContext.fieldLabel}),
  *  so the list draws no header for it. */
 type LineItemsFieldLabels = "aria" | "floating";
-/** The colour of a {@link LineItemsSummary}'s value. */
-type LineItemsSummaryTone = "neutral" | "success" | "danger" | "muted";
+/** The colour of a {@link LineItemsSummary}'s value — a verdict (`success` /
+ *  `danger`), quiet (`muted`), or the money pair (`income` / `expense`, the colours
+ *  `SignedAmount` draws a figure in) for a remainder that reads as the row it settles. */
+type LineItemsSummaryTone = "neutral" | "success" | "danger" | "muted" | "income" | "expense";
 /**
  * A line under the lines that says where they stand — a split's remainder ("Left to
  * assign  CHF 0.00", green at zero, red otherwise, muted while the total is not known
@@ -49,16 +51,30 @@ interface LineItemsSummary {
     label: ReactNode;
     value?: ReactNode;
     /** The value's colour. Default `neutral`. The label stays neutral: the colour is a
-     *  second signal, never the only one — the value and label carry the meaning. */
+     *  second signal, never the only one — the value and label carry the meaning.
+     *  With no `value` the line is a state on its own ("Waiting for the total"), and
+     *  the tone colours the label instead — `muted` quiets the whole line. */
     tone?: LineItemsSummaryTone;
+    /** Beside the value: a chip or badge that names the state ("Balanced" next to a
+     *  journal entry's zero difference). */
+    status?: ReactNode;
     /** A small button at the end of the line. Disabled along with the list's
-     *  `disabled`. */
+     *  `disabled`. `variant`: `secondary` (default) is a boxed button; `link` a muted
+     *  text link, for an action that is an aside rather than the way to settle it. */
     action?: {
         label: ReactNode;
         onClick: () => void;
         disabled?: boolean;
+        variant?: "secondary" | "link";
     };
 }
+/** Where a row's remove button sits. `row` (default): stacked, a row of the card to
+ *  itself (paired, the whole width); wide, its own track. `inline`: stacked, beside
+ *  the row's last field ("category + amount" over "memo + delete"); wide, unchanged. */
+type LineItemsRemovePlacement = "row" | "inline";
+/** How the remove button sits in the height of a wide row: at its top, centred, or at
+ *  its foot. */
+type LineItemsRemoveAlign = "start" | "center" | "end";
 interface LineItemsColumn<T> {
     /** Stable id: the React key, and the key into `totals`. */
     key: string;
@@ -129,6 +145,14 @@ interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "child
      *  them up (a column's `narrowSpan={2}` takes a whole row), once the pane is wide
      *  enough for two fields (18rem); narrower still, one. Default `1`. */
     narrowColumns?: 1 | 2;
+    /** Stacked, where the remove button goes: a row of its own (`row`, default) or
+     *  beside the last field (`inline`). See {@link LineItemsRemovePlacement}. */
+    removePlacement?: LineItemsRemovePlacement;
+    /** On the wide grid, the remove button's place in the row's height. Default `start`
+     *  — or `center` when a column floats its label (`fieldLabels="floating"`): a
+     *  floating field is taller than the button, and centred is level with its control.
+     *  A field that shows a message under itself grows the row; pin `start` then. */
+    removeAlign?: LineItemsRemoveAlign;
     /** Disables add and remove (the fields are the caller's to disable). */
     disabled?: boolean;
     labels?: Partial<LineItemsLabels>;
@@ -160,6 +184,6 @@ interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "child
  * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a
  * row.
  */
-declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, summary, fieldLabels, narrowColumns, disabled, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
+declare function LineItems<T>({ items, columns, getKey, onAdd, onRemove, minItems, maxItems, confirmRemove, addLabel, rowLabel, totals, totalsLabel, empty, error, summary, fieldLabels, narrowColumns, removePlacement, removeAlign: removeAlignProp, disabled, labels: labelsProp, className, style, ...rest }: LineItemsProps<T>): react.JSX.Element;
 
-export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsFieldLabels, type LineItemsLabels, type LineItemsProps, type LineItemsSummary, type LineItemsSummaryTone };
+export { DEFAULT_LINE_ITEMS_LABELS, type LineItemCellContext, LineItems, type LineItemsColumn, type LineItemsFieldLabels, type LineItemsLabels, type LineItemsProps, type LineItemsRemoveAlign, type LineItemsRemovePlacement, type LineItemsSummary, type LineItemsSummaryTone };

package/dist/components/line-items.js

@@ -18,7 +18,15 @@ const SUMMARY_TONE = {
   neutral: "text-[var(--text-primary)]",
   success: "text-[var(--success)]",
   danger: "text-[var(--danger)]",
-  muted: "text-[var(--text-muted)]"
+  muted: "text-[var(--text-muted)]",
+  // SignedAmount's money palette (toneTextClass "income" / "expense").
+  income: "text-[var(--money-income)]",
+  expense: "text-[var(--money-expense)]"
+};
+const REMOVE_ALIGN = {
+  start: "@lg:self-start",
+  center: "@lg:self-center",
+  end: "@lg:self-end"
 };
 const FOCUSABLE = "input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
 function defaultKey(item, index) {
@@ -49,6 +57,8 @@ function LineItems({
   summary,
   fieldLabels = "aria",
   narrowColumns = 1,
+  removePlacement = "row",
+  removeAlign: removeAlignProp,
   disabled = false,
   labels: labelsProp,
   className,
@@ -108,6 +118,9 @@ function LineItems({
   const floats = (column) => (column.fieldLabels ?? fieldLabels) === "floating";
   const showHeader = columns.some((c) => !floats(c));
   const pairs = narrowColumns === 2;
+  const removeAlign = removeAlignProp ?? (columns.some(floats) ? "center" : "start");
+  const inline = removePlacement === "inline" && Boolean(onRemove) && columns.length > 0;
+  const lastColumn = columns[columns.length - 1];
   const headerCell = (column) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -119,7 +132,44 @@ function LineItems({
     },
     column.key
   );
+  const removeCell = (index, row, isConfirming) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-line-items-remove-cell": "",
+      className: cn(
+        "flex justify-end @lg:justify-center",
+        REMOVE_ALIGN[removeAlign],
+        // Paired, the remove button keeps a row of its own at the card's end rather
+        // than squeezing in beside the last field — unless asked to go `inline`.
+        inline ? "shrink-0" : pairs && "@2xs:col-span-2 @lg:col-span-1"
+      ),
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          type: "button",
+          "data-line-items-remove": "",
+          variant: isConfirming ? "danger" : "ghost",
+          tone: isConfirming ? void 0 : "danger",
+          label: isConfirming ? labels.confirmRemove(row) : labels.remove(row),
+          disabled: !canRemove,
+          onClick: () => void removeAt(index),
+          onBlur: () => {
+            if (isConfirming) setConfirming(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Escape" && isConfirming) {
+              e.stopPropagation();
+              setConfirming(null);
+            }
+          },
+          children: /* @__PURE__ */ jsx(Trash2, {})
+        }
+      )
+    }
+  );
   const showTotals = totals !== void 0;
+  const summaryTone = summary?.tone ?? "neutral";
+  const summaryHasValue = hasContent(summary?.value);
   const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : void 0;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -162,13 +212,15 @@ function LineItems({
                 children: [
                   columns.map((column) => {
                     const floating = floats(column);
-                    return /* @__PURE__ */ jsxs(
+                    const isLast = inline && column === lastColumn;
+                    const span = pairs && column.narrowSpan === 2 && "@2xs:col-span-2 @lg:col-span-1";
+                    const cell = /* @__PURE__ */ jsxs(
                       "div",
                       {
                         className: cn(
                           "min-w-0 space-y-1 @lg:space-y-0",
                           // The wide grid places every cell in its own track again.
-                          pairs && column.narrowSpan === 2 && "@2xs:col-span-2 @lg:col-span-1"
+                          isLast ? "flex-1" : span
                         ),
                         children: [
                           !floating && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "block text-xs font-medium text-[var(--text-muted)] @lg:hidden", children: column.header }),
@@ -182,31 +234,21 @@ function LineItems({
                       },
                       column.key
                     );
-                  }),
-                  onRemove && // Paired, the remove button keeps a row of its own at the card's end
-                  // rather than squeezing in beside the last field.
-                  /* @__PURE__ */ jsx("div", { className: cn("flex justify-end @lg:justify-center", pairs && "@2xs:col-span-2 @lg:col-span-1"), children: /* @__PURE__ */ jsx(
-                    IconButton,
-                    {
-                      type: "button",
-                      "data-line-items-remove": "",
-                      variant: isConfirming ? "danger" : "ghost",
-                      tone: isConfirming ? void 0 : "danger",
-                      label: isConfirming ? labels.confirmRemove(row) : labels.remove(row),
-                      disabled: !canRemove,
-                      onClick: () => void removeAt(index),
-                      onBlur: () => {
-                        if (isConfirming) setConfirming(null);
-                      },
-                      onKeyDown: (e) => {
-                        if (e.key === "Escape" && isConfirming) {
-                          e.stopPropagation();
-                          setConfirming(null);
-                        }
+                    if (!isLast) return cell;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "data-line-items-inline": "",
+                        className: cn("flex min-w-0 gap-2 @lg:contents", floating ? "items-center" : "items-end", span),
+                        children: [
+                          cell,
+                          removeCell(index, row, isConfirming)
+                        ]
                       },
-                      children: /* @__PURE__ */ jsx(Trash2, {})
-                    }
-                  ) })
+                      column.key
+                    );
+                  }),
+                  onRemove && !inline && removeCell(index, row, isConfirming)
                 ]
               },
               getKey(item, index)
@@ -253,20 +295,22 @@ function LineItems({
             "data-line-items-summary": "",
             className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--text-primary)]",
             children: [
-              /* @__PURE__ */ jsx("span", { className: "min-w-0", children: summary.label }),
-              hasContent(summary.value) && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "span",
                 {
-                  "data-tone": summary.tone ?? "neutral",
-                  className: cn("font-semibold tabular-nums", SUMMARY_TONE[summary.tone ?? "neutral"]),
-                  children: summary.value
+                  "data-tone": summaryHasValue ? void 0 : summaryTone,
+                  className: cn("min-w-0", !summaryHasValue && SUMMARY_TONE[summaryTone]),
+                  children: summary.label
                 }
               ),
+              summaryHasValue && /* @__PURE__ */ jsx("span", { "data-tone": summaryTone, className: cn("font-semibold tabular-nums", SUMMARY_TONE[summaryTone]), children: summary.value }),
+              hasContent(summary.status) && /* @__PURE__ */ jsx("span", { "data-line-items-summary-status": "", className: "inline-flex", children: summary.status }),
               summary.action && /* @__PURE__ */ jsx(
                 Button,
                 {
                   type: "button",
-                  variant: "secondary",
+                  variant: summary.action.variant === "link" ? "link" : "secondary",
+                  tone: summary.action.variant === "link" ? "muted" : void 0,
                   size: "sm",
                   className: "ms-auto",
                   disabled: disabled || summary.action.disabled,

package/dist/components/line-items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/line-items.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, Key, ReactNode } from \"react\";\nimport { Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, IconButton } from \"./ui\";\n\n/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */\nexport interface LineItemsLabels {\n  /** The dashed add button. */\n  add: string;\n  /** The remove button's name for one row. */\n  remove: (row: number) => string;\n  /** Its name while it waits for the second press (`confirmRemove`). */\n  confirmRemove: (row: number) => string;\n  /** A row's group name, when the caller gives no `rowLabel`. */\n  row: (row: number) => string;\n  /** The name a cell's field should carry: the column, and which row. */\n  cell: (column: string, row: number) => string;\n  /** The totals row's label, and its group name. */\n  totals: string;\n}\n\nexport const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels = {\n  add: \"Add row\",\n  remove: (row) => `Remove row ${row}`,\n  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,\n  row: (row) => `Row ${row}`,\n  cell: (column, row) => `${column}, row ${row}`,\n  totals: \"Total\",\n};\n\n/** What a column's `render` receives for one row. */\nexport interface LineItemCellContext<T> {\n  item: T;\n  /** 0-based. */\n  index: number;\n  /** The accessible name for the cell's field — \"Debit, row 2\". The header is\n   *  hidden from assistive tech (each row repeats it), so the field has to carry it:\n   *  `<Input aria-label={label} … />`. */\n  label: string;\n  /** The column's own name (\"Debit\") for the field's VISIBLE label — set only when the\n   *  cell's labels are `\"floating\"` (see {@link LineItemsProps.fieldLabels}), so one\n   *  render serves both modes: `<Input label={fieldLabel} aria-label={label} … />`.\n   *  Undefined there, the Input stays a bare compact control; set, it floats \"Debit\"\n   *  while `aria-label` still says which row. */\n  fieldLabel?: string;\n}\n\n/** How a cell's field is labelled. `aria`: the field is a bare control named by\n *  `aria-label`, under a header row (stacked: a small copy of the header over it).\n *  `floating`: the field shows its own floating label ({@link LineItemCellContext.fieldLabel}),\n *  so the list draws no header for it. */\nexport type LineItemsFieldLabels = \"aria\" | \"floating\";\n\n/** The colour of a {@link LineItemsSummary}'s value. */\nexport type LineItemsSummaryTone = \"neutral\" | \"success\" | \"danger\" | \"muted\";\n\n/**\n * A line under the lines that says where they stand — a split's remainder (\"Left to\n * assign  CHF 0.00\", green at zero, red otherwise, muted while the total is not known\n * yet), with an optional action that settles it (\"Set amount to total\").\n */\nexport interface LineItemsSummary {\n  label: ReactNode;\n  value?: ReactNode;\n  /** The value's colour. Default `neutral`. The label stays neutral: the colour is a\n   *  second signal, never the only one — the value and label carry the meaning. */\n  tone?: LineItemsSummaryTone;\n  /** A small button at the end of the line. Disabled along with the list's\n   *  `disabled`. */\n  action?: { label: ReactNode; onClick: () => void; disabled?: boolean };\n}\n\nexport interface LineItemsColumn<T> {\n  /** Stable id: the React key, and the key into `totals`. */\n  key: string;\n  /** The column header (and the small label over the cell once the rows stack). */\n  header: ReactNode;\n  /** The column's name for {@link LineItemCellContext.label}, when `header` is not a\n   *  string. */\n  label?: string;\n  /** The grid track once the rows are wide enough to be a table. Default\n   *  `minmax(0,1fr)`; `\"7rem\"` for an amount. */\n  width?: string;\n  /** `end` for figures: the header and the totals cell end-align with the field. */\n  align?: \"start\" | \"end\";\n  /** This column's labelling, over the list's {@link LineItemsProps.fieldLabels} — a\n   *  read-only \"Sum\" cell in a floating list keeps its header with `\"aria\"`. */\n  fieldLabels?: LineItemsFieldLabels;\n  /** With {@link LineItemsProps.narrowColumns} `2`: `2` gives the cell a whole row of\n   *  the stacked card (a description), where short fields pair up two to a row.\n   *  Default `1`. No effect on the wide grid. */\n  narrowSpan?: 1 | 2;\n  render: (ctx: LineItemCellContext<T>) => ReactNode;\n}\n\nexport interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  items: readonly T[];\n  columns: readonly LineItemsColumn<T>[];\n  /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`\n   *  `fields` carry one), else its index. */\n  getKey?: (item: T, index: number) => Key;\n  /** Append a row. Omitted: no add button. The first field of the new row is focused. */\n  onAdd?: () => void;\n  /** Remove the row at `index`. Omitted: no remove buttons. */\n  onRemove?: (index: number) => void;\n  /** Remove is disabled at or below this many rows (a journal entry needs two).\n   *  Default 0. */\n  minItems?: number;\n  /** Add is disabled at this many rows. */\n  maxItems?: number;\n  /**\n   * Ask before a row goes:\n   *  - `true`: the remove button asks for a second press — it fills red and its name\n   *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.\n   *  - a function: called with the row, and the row goes only if it answers `true`\n   *    (`(item, i) => confirm({ title: … , tone: \"danger\" })` with `useConfirm`).\n   */\n  confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);\n  /** The add button's text. Default `lineItems.add`. */\n  addLabel?: ReactNode;\n  /** A row's group name (\"Line 2\"). Default `lineItems.row`. */\n  rowLabel?: (index: number, item: T) => string;\n  /** A totals row under the lines, one entry per column `key`. The first column\n   *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */\n  totals?: Partial<Record<string, ReactNode>>;\n  /** Default `lineItems.totals`, \"Total\". */\n  totalsLabel?: ReactNode;\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  /** A message about the list as a whole (\"The entry does not balance\"). */\n  error?: ReactNode;\n  /** A line under the lines and totals — the remainder of a split, say. See\n   *  {@link LineItemsSummary}. */\n  summary?: LineItemsSummary;\n  /** How the cells' fields are labelled. Default `aria` (compact bare controls under a\n   *  header row); `floating` hands each cell its column's name as\n   *  {@link LineItemCellContext.fieldLabel} for a visible floating label, and drops the\n   *  header for those columns. A column's own `fieldLabels` wins. */\n  fieldLabels?: LineItemsFieldLabels;\n  /** Stacked (a narrow pane), how many fields share a row of a line's card: `2` pairs\n   *  them up (a column's `narrowSpan={2}` takes a whole row), once the pane is wide\n   *  enough for two fields (18rem); narrower still, one. Default `1`. */\n  narrowColumns?: 1 | 2;\n  /** Disables add and remove (the fields are the caller's to disable). */\n  disabled?: boolean;\n  labels?: Partial<LineItemsLabels>;\n}\n\nconst REMOVE_TRACK = \"2.25rem\";\nconst SUMMARY_TONE: Record<LineItemsSummaryTone, string> = {\n  neutral: \"text-[var(--text-primary)]\",\n  success: \"text-[var(--success)]\",\n  danger: \"text-[var(--danger)]\",\n  muted: \"text-[var(--text-muted)]\",\n};\nconst FOCUSABLE =\n  \"input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])\";\n\nfunction defaultKey(item: unknown, index: number): Key {\n  if (typeof item === \"object\" && item !== null && \"id\" in item) {\n    const id = (item as { id: unknown }).id;\n    if (typeof id === \"string\" || typeof id === \"number\") return id;\n  }\n  return index;\n}\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\ntype PendingFocus = { kind: \"added\" } | { kind: \"removed\"; index: number };\n\n/**\n * An editable list of lines — journal entry lines, lease components, invoice\n * positions, budget rows: column headers, a row of fields per item, a remove button\n * per row, a dashed \"add\" button under them, and an optional totals row.\n *\n * Presentation only: the rows are the caller's `items` and the fields are the\n * caller's, rendered per column. So it works over plain state —\n *\n * ```tsx\n * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}\n *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />\n * ```\n *\n * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>\n * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has\n * `RhfLineItems`.\n *\n * On a wide pane the rows are a grid under the headers; on a narrow one (a container\n * query, so a dialog stacks where it is cramped) each row stacks its fields, each\n * under a small copy of its header. The headers are `aria-hidden`: every row is a\n * named group and every field is named by `render`'s `label` (\"Debit, row 2\"), which\n * is what a screen reader needs — a header row it would read once, out of context.\n *\n * Keyboard: after Add, focus lands in the new row's first field; after a remove, on\n * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a\n * row.\n */\nexport function LineItems<T>({\n  items,\n  columns,\n  getKey = defaultKey,\n  onAdd,\n  onRemove,\n  minItems = 0,\n  maxItems,\n  confirmRemove,\n  addLabel,\n  rowLabel,\n  totals,\n  totalsLabel,\n  empty,\n  error,\n  summary,\n  fieldLabels = \"aria\",\n  narrowColumns = 1,\n  disabled = false,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: LineItemsProps<T>) {\n  const labels = useKitLabels(\"lineItems\", DEFAULT_LINE_ITEMS_LABELS, labelsProp);\n  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);\n  const addRef = useRef<HTMLButtonElement>(null);\n  const pendingFocus = useRef<PendingFocus | null>(null);\n  const [confirmingAt, setConfirming] = useState<number | null>(null);\n  // A confirm waiting on a row that has since gone is void.\n  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;\n\n  const tracks = [...columns.map((c) => c.width ?? \"minmax(0,1fr)\"), ...(onRemove ? [REMOVE_TRACK] : [])];\n  const gridStyle = { \"--line-items-cols\": tracks.join(\" \") } as CSSProperties;\n  const canAdd = Boolean(onAdd) && !disabled && (maxItems === undefined || items.length < maxItems);\n  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;\n  const hasError = hasContent(error);\n\n\n  // Focus after the list has re-rendered with the new rows — a layout effect, so the\n  // caret is where it belongs before paint.\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending) return;\n    pendingFocus.current = null;\n    if (pending.kind === \"added\") {\n      const row = rowRefs.current[items.length - 1];\n      row?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n      return;\n    }\n    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];\n    const target =\n      row?.querySelector<HTMLElement>(\"[data-line-items-remove]:not([disabled])\") ??\n      row?.querySelector<HTMLElement>(FOCUSABLE) ??\n      addRef.current;\n    target?.focus();\n  }, [items.length]);\n\n  const add = useCallback(() => {\n    if (!canAdd || !onAdd) return;\n    pendingFocus.current = { kind: \"added\" };\n    onAdd();\n  }, [canAdd, onAdd]);\n\n  const removeAt = async (index: number) => {\n    if (!canRemove || !onRemove) return;\n    if (confirmRemove === true && confirming !== index) {\n      setConfirming(index);\n      return;\n    }\n    if (typeof confirmRemove === \"function\") {\n      const ok = await confirmRemove(items[index], index);\n      if (!ok) return;\n    }\n    setConfirming(null);\n    pendingFocus.current = { kind: \"removed\", index };\n    onRemove(index);\n  };\n\n  const onRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"Enter\" && (e.ctrlKey || e.metaKey) && canAdd) {\n      e.preventDefault();\n      add();\n    }\n  };\n\n  const columnName = (column: LineItemsColumn<T>) =>\n    column.label ?? (typeof column.header === \"string\" ? column.header : column.key);\n  const floats = (column: LineItemsColumn<T>) => (column.fieldLabels ?? fieldLabels) === \"floating\";\n  // A header row only for the columns that still need one: with every field floating\n  // its own label, a row of headers would say each name twice.\n  const showHeader = columns.some((c) => !floats(c));\n  const pairs = narrowColumns === 2;\n\n  const headerCell = (column: LineItemsColumn<T>) => (\n    <span\n      key={column.key}\n      className={cn(\n        \"min-w-0 truncate text-xs font-medium text-[var(--text-muted)]\",\n        column.align === \"end\" && \"text-end\",\n      )}\n    >\n      {floats(column) ? null : column.header}\n    </span>\n  );\n\n  const showTotals = totals !== undefined;\n  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : undefined;\n\n  return (\n    <div\n      data-slot=\"line-items\"\n      {...rest}\n      style={{ ...gridStyle, ...style }}\n      className={cn(\"@container space-y-2\", className)}\n    >\n      {showHeader && (\n        <div aria-hidden className=\"hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]\">\n          {columns.map(headerCell)}\n          {onRemove && <span />}\n        </div>\n      )}\n\n      {items.length === 0 && hasContent(empty) && (\n        <div className=\"rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]\">\n          {empty}\n        </div>\n      )}\n\n      {items.map((item, index) => {\n        const row = index + 1;\n        const isConfirming = confirming === index;\n        return (\n          // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself\n          // reachable by Tab; the group only listens for it bubbling from its fields.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            key={getKey(item, index)}\n            ref={(el) => {\n              rowRefs.current[index] = el;\n            }}\n            role=\"group\"\n            aria-label={rowLabel ? rowLabel(index, item) : labels.row(row)}\n            data-line-items-row=\"\"\n            onKeyDown={onRowKeyDown}\n            className={cn(\n              \"grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start\",\n              // Two short fields to a row of the card — from 18rem, where two fields\n              // still fit a figure each; on anything narrower they stack after all.\n              pairs && \"@2xs:grid-cols-2\",\n              // Stacked, each row is a card of its own so the rows stay apart.\n              \"@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3\",\n            )}\n          >\n            {columns.map((column) => {\n              const floating = floats(column);\n              return (\n                <div\n                  key={column.key}\n                  className={cn(\n                    \"min-w-0 space-y-1 @lg:space-y-0\",\n                    // The wide grid places every cell in its own track again.\n                    pairs && column.narrowSpan === 2 && \"@2xs:col-span-2 @lg:col-span-1\",\n                  )}\n                >\n                  {!floating && (\n                    <span aria-hidden className=\"block text-xs font-medium text-[var(--text-muted)] @lg:hidden\">\n                      {column.header}\n                    </span>\n                  )}\n                  {column.render({\n                    item,\n                    index,\n                    label: labels.cell(columnName(column), row),\n                    fieldLabel: floating ? columnName(column) : undefined,\n                  })}\n                </div>\n              );\n            })}\n            {onRemove && (\n              // Paired, the remove button keeps a row of its own at the card's end\n              // rather than squeezing in beside the last field.\n              <div className={cn(\"flex justify-end @lg:justify-center\", pairs && \"@2xs:col-span-2 @lg:col-span-1\")}>\n                <IconButton\n                  type=\"button\"\n                  data-line-items-remove=\"\"\n                  variant={isConfirming ? \"danger\" : \"ghost\"}\n                  tone={isConfirming ? undefined : \"danger\"}\n                  label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}\n                  disabled={!canRemove}\n                  onClick={() => void removeAt(index)}\n                  onBlur={() => {\n                    if (isConfirming) setConfirming(null);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === \"Escape\" && isConfirming) {\n                      e.stopPropagation();\n                      setConfirming(null);\n                    }\n                  }}\n                >\n                  <Trash2 />\n                </IconButton>\n              </div>\n            )}\n          </div>\n        );\n      })}\n\n      {showTotals && (\n        <div\n          role=\"group\"\n          aria-label={typeof totalsLabel === \"string\" ? totalsLabel : labels.totals}\n          data-line-items-totals=\"\"\n          className=\"grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]\"\n        >\n          {columns.map((column) => {\n            const value = totals[column.key];\n            if (column.key === labelColumn) {\n              return (\n                <span key={column.key} className=\"min-w-0\">\n                  {totalsLabel ?? labels.totals}\n                </span>\n              );\n            }\n            return (\n              <span\n                key={column.key}\n                className={cn(\n                  \"min-w-0\",\n                  column.align === \"end\" && \"@lg:text-end\",\n                  // Stacked, a column with no total takes no line.\n                  !hasContent(value) && \"@max-lg:hidden\",\n                )}\n              >\n                {hasContent(value) && (\n                  <span className=\"flex justify-between gap-2 @lg:block\">\n                    <span aria-hidden className=\"font-normal text-[var(--text-muted)] @lg:hidden\">\n                      {column.header}\n                    </span>\n                    {value}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n          {onRemove && <span className=\"@max-lg:hidden\" />}\n        </div>\n      )}\n\n      {summary && (\n        <div\n          data-line-items-summary=\"\"\n          className=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--text-primary)]\"\n        >\n          <span className=\"min-w-0\">{summary.label}</span>\n          {hasContent(summary.value) && (\n            <span\n              data-tone={summary.tone ?? \"neutral\"}\n              className={cn(\"font-semibold tabular-nums\", SUMMARY_TONE[summary.tone ?? \"neutral\"])}\n            >\n              {summary.value}\n            </span>\n          )}\n          {summary.action && (\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              size=\"sm\"\n              className=\"ms-auto\"\n              disabled={disabled || summary.action.disabled}\n              onClick={summary.action.onClick}\n            >\n              {summary.action.label}\n            </Button>\n          )}\n        </div>\n      )}\n\n      {hasError && (\n        <p className=\"text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n\n      {onAdd && (\n        <Button\n          ref={addRef}\n          type=\"button\"\n          variant=\"secondary\"\n          className=\"w-full border-dashed\"\n          disabled={!canAdd}\n          onClick={add}\n        >\n          <Plus aria-hidden className=\"size-4\" />\n          {addLabel ?? labels.add}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAwSI,cAsBI,YAtBJ;AAxSJ,SAAS,aAAa,iBAAiB,QAAQ,gBAAgB;AAE/D,SAAS,MAAM,cAAc;AAC7B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,kBAAkB;AAkB5B,MAAM,4BAA6C;AAAA,EACxD,KAAK;AAAA,EACL,QAAQ,CAAC,QAAQ,cAAc,GAAG;AAAA,EAClC,eAAe,CAAC,QAAQ,cAAc,GAAG;AAAA,EACzC,KAAK,CAAC,QAAQ,OAAO,GAAG;AAAA,EACxB,MAAM,CAAC,QAAQ,QAAQ,GAAG,MAAM,SAAS,GAAG;AAAA,EAC5C,QAAQ;AACV;AAwHA,MAAM,eAAe;AACrB,MAAM,eAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AACT;AACA,MAAM,YACJ;AAEF,SAAS,WAAW,MAAe,OAAoB;AACrD,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,QAAQ,MAAM;AAC7D,UAAM,KAAM,KAAyB;AACrC,QAAI,OAAO,OAAO,YAAY,OAAO,OAAO,SAAU,QAAO;AAAA,EAC/D;AACA,SAAO;AACT;AAEA,SAAS,WAAW,MAA0B;AAC5C,SAAO,SAAS,UAAa,SAAS,QAAQ,SAAS,SAAS,SAAS;AAC3E;AA+BO,SAAS,UAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,SAAS,aAAa,aAAa,2BAA2B,UAAU;AAC9E,QAAM,UAAU,OAAqC,CAAC,CAAC;AACvD,QAAM,SAAS,OAA0B,IAAI;AAC7C,QAAM,eAAe,OAA4B,IAAI;AACrD,QAAM,CAAC,cAAc,aAAa,IAAI,SAAwB,IAAI;AAElE,QAAM,aAAa,iBAAiB,QAAQ,eAAe,MAAM,SAAS,eAAe;AAEzF,QAAM,SAAS,CAAC,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,eAAe,GAAG,GAAI,WAAW,CAAC,YAAY,IAAI,CAAC,CAAE;AACtG,QAAM,YAAY,EAAE,qBAAqB,OAAO,KAAK,GAAG,EAAE;AAC1D,QAAM,SAAS,QAAQ,KAAK,KAAK,CAAC,aAAa,aAAa,UAAa,MAAM,SAAS;AACxF,QAAM,YAAY,QAAQ,QAAQ,KAAK,CAAC,YAAY,MAAM,SAAS;AACnE,QAAM,WAAW,WAAW,KAAK;AAKjC,kBAAgB,MAAM;AACpB,UAAM,UAAU,aAAa;AAC7B,QAAI,CAAC,QAAS;AACd,iBAAa,UAAU;AACvB,QAAI,QAAQ,SAAS,SAAS;AAC5B,YAAMA,OAAM,QAAQ,QAAQ,MAAM,SAAS,CAAC;AAC5C,MAAAA,MAAK,cAA2B,SAAS,GAAG,MAAM;AAClD;AAAA,IACF;AACA,UAAM,MAAM,QAAQ,QAAQ,KAAK,IAAI,QAAQ,OAAO,MAAM,SAAS,CAAC,CAAC;AACrE,UAAM,SACJ,KAAK,cAA2B,0CAA0C,KAC1E,KAAK,cAA2B,SAAS,KACzC,OAAO;AACT,YAAQ,MAAM;AAAA,EAChB,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,QAAM,MAAM,YAAY,MAAM;AAC5B,QAAI,CAAC,UAAU,CAAC,MAAO;AACvB,iBAAa,UAAU,EAAE,MAAM,QAAQ;AACvC,UAAM;AAAA,EACR,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAM,WAAW,OAAO,UAAkB;AACxC,QAAI,CAAC,aAAa,CAAC,SAAU;AAC7B,QAAI,kBAAkB,QAAQ,eAAe,OAAO;AAClD,oBAAc,KAAK;AACnB;AAAA,IACF;AACA,QAAI,OAAO,kBAAkB,YAAY;AACvC,YAAM,KAAK,MAAM,cAAc,MAAM,KAAK,GAAG,KAAK;AAClD,UAAI,CAAC,GAAI;AAAA,IACX;AACA,kBAAc,IAAI;AAClB,iBAAa,UAAU,EAAE,MAAM,WAAW,MAAM;AAChD,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,eAAe,CAAC,MAAqC;AACzD,QAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,QAAQ;AAC3D,QAAE,eAAe;AACjB,UAAI;AAAA,IACN;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,WAClB,OAAO,UAAU,OAAO,OAAO,WAAW,WAAW,OAAO,SAAS,OAAO;AAC9E,QAAM,SAAS,CAAC,YAAgC,OAAO,eAAe,iBAAiB;AAGvF,QAAM,aAAa,QAAQ,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACjD,QAAM,QAAQ,kBAAkB;AAEhC,QAAM,aAAa,CAAC,WAClB;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA,OAAO,UAAU,SAAS;AAAA,MAC5B;AAAA,MAEC,iBAAO,MAAM,IAAI,OAAO,OAAO;AAAA;AAAA,IAN3B,OAAO;AAAA,EAOd;AAGF,QAAM,aAAa,WAAW;AAC9B,QAAM,cAAc,aAAa,QAAQ,KAAK,CAAC,MAAM,CAAC,WAAW,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,MAAM;AAExF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACT,GAAG;AAAA,MACJ,OAAO,EAAE,GAAG,WAAW,GAAG,MAAM;AAAA,MAChC,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAE9C;AAAA,sBACC,qBAAC,SAAI,eAAW,MAAC,WAAU,gEACxB;AAAA,kBAAQ,IAAI,UAAU;AAAA,UACtB,YAAY,oBAAC,UAAK;AAAA,WACrB;AAAA,QAGD,MAAM,WAAW,KAAK,WAAW,KAAK,KACrC,oBAAC,SAAI,WAAU,iHACZ,iBACH;AAAA,QAGD,MAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,gBAAM,MAAM,QAAQ;AACpB,gBAAM,eAAe,eAAe;AACpC;AAAA;AAAA;AAAA;AAAA,YAIE;AAAA,cAAC;AAAA;AAAA,gBAEC,KAAK,CAAC,OAAO;AACX,0BAAQ,QAAQ,KAAK,IAAI;AAAA,gBAC3B;AAAA,gBACA,MAAK;AAAA,gBACL,cAAY,WAAW,SAAS,OAAO,IAAI,IAAI,OAAO,IAAI,GAAG;AAAA,gBAC7D,uBAAoB;AAAA,gBACpB,WAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA;AAAA;AAAA,kBAGA,SAAS;AAAA;AAAA,kBAET;AAAA,gBACF;AAAA,gBAEC;AAAA,0BAAQ,IAAI,CAAC,WAAW;AACvB,0BAAM,WAAW,OAAO,MAAM;AAC9B,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,WAAW;AAAA,0BACT;AAAA;AAAA,0BAEA,SAAS,OAAO,eAAe,KAAK;AAAA,wBACtC;AAAA,wBAEC;AAAA,2BAAC,YACA,oBAAC,UAAK,eAAW,MAAC,WAAU,iEACzB,iBAAO,QACV;AAAA,0BAED,OAAO,OAAO;AAAA,4BACb;AAAA,4BACA;AAAA,4BACA,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,GAAG;AAAA,4BAC1C,YAAY,WAAW,WAAW,MAAM,IAAI;AAAA,0BAC9C,CAAC;AAAA;AAAA;AAAA,sBAjBI,OAAO;AAAA,oBAkBd;AAAA,kBAEJ,CAAC;AAAA,kBACA;AAAA;AAAA,kBAGC,oBAAC,SAAI,WAAW,GAAG,uCAAuC,SAAS,gCAAgC,GACjG;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,0BAAuB;AAAA,sBACvB,SAAS,eAAe,WAAW;AAAA,sBACnC,MAAM,eAAe,SAAY;AAAA,sBACjC,OAAO,eAAe,OAAO,cAAc,GAAG,IAAI,OAAO,OAAO,GAAG;AAAA,sBACnE,UAAU,CAAC;AAAA,sBACX,SAAS,MAAM,KAAK,SAAS,KAAK;AAAA,sBAClC,QAAQ,MAAM;AACZ,4BAAI,aAAc,eAAc,IAAI;AAAA,sBACtC;AAAA,sBACA,WAAW,CAAC,MAAM;AAChB,4BAAI,EAAE,QAAQ,YAAY,cAAc;AACtC,4BAAE,gBAAgB;AAClB,wCAAc,IAAI;AAAA,wBACpB;AAAA,sBACF;AAAA,sBAEA,8BAAC,UAAO;AAAA;AAAA,kBACV,GACF;AAAA;AAAA;AAAA,cAlEG,OAAO,MAAM,KAAK;AAAA,YAoEzB;AAAA;AAAA,QAEJ,CAAC;AAAA,QAEA,cACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,OAAO,gBAAgB,WAAW,cAAc,OAAO;AAAA,YACnE,0BAAuB;AAAA,YACvB,WAAU;AAAA,YAET;AAAA,sBAAQ,IAAI,CAAC,WAAW;AACvB,sBAAM,QAAQ,OAAO,OAAO,GAAG;AAC/B,oBAAI,OAAO,QAAQ,aAAa;AAC9B,yBACE,oBAAC,UAAsB,WAAU,WAC9B,yBAAe,OAAO,UADd,OAAO,GAElB;AAAA,gBAEJ;AACA,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,WAAW;AAAA,sBACT;AAAA,sBACA,OAAO,UAAU,SAAS;AAAA;AAAA,sBAE1B,CAAC,WAAW,KAAK,KAAK;AAAA,oBACxB;AAAA,oBAEC,qBAAW,KAAK,KACf,qBAAC,UAAK,WAAU,wCACd;AAAA,0CAAC,UAAK,eAAW,MAAC,WAAU,mDACzB,iBAAO,QACV;AAAA,sBACC;AAAA,uBACH;AAAA;AAAA,kBAdG,OAAO;AAAA,gBAgBd;AAAA,cAEJ,CAAC;AAAA,cACA,YAAY,oBAAC,UAAK,WAAU,kBAAiB;AAAA;AAAA;AAAA,QAChD;AAAA,QAGD,WACC;AAAA,UAAC;AAAA;AAAA,YACC,2BAAwB;AAAA,YACxB,WAAU;AAAA,YAEV;AAAA,kCAAC,UAAK,WAAU,WAAW,kBAAQ,OAAM;AAAA,cACxC,WAAW,QAAQ,KAAK,KACvB;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAW,QAAQ,QAAQ;AAAA,kBAC3B,WAAW,GAAG,8BAA8B,aAAa,QAAQ,QAAQ,SAAS,CAAC;AAAA,kBAElF,kBAAQ;AAAA;AAAA,cACX;AAAA,cAED,QAAQ,UACP;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,UAAU,YAAY,QAAQ,OAAO;AAAA,kBACrC,SAAS,QAAQ,OAAO;AAAA,kBAEvB,kBAAQ,OAAO;AAAA;AAAA,cAClB;AAAA;AAAA;AAAA,QAEJ;AAAA,QAGD,YACC,oBAAC,OAAE,WAAU,kDACV,iBACH;AAAA,QAGD,SACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,UAAU,CAAC;AAAA,YACX,SAAS;AAAA,YAET;AAAA,kCAAC,QAAK,eAAW,MAAC,WAAU,UAAS;AAAA,cACpC,YAAY,OAAO;AAAA;AAAA;AAAA,QACtB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["row"]}
+{"version":3,"sources":["../../src/components/line-items.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, KeyboardEvent, Key, ReactNode } from \"react\";\nimport { Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, IconButton } from \"./ui\";\n\n/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */\nexport interface LineItemsLabels {\n  /** The dashed add button. */\n  add: string;\n  /** The remove button's name for one row. */\n  remove: (row: number) => string;\n  /** Its name while it waits for the second press (`confirmRemove`). */\n  confirmRemove: (row: number) => string;\n  /** A row's group name, when the caller gives no `rowLabel`. */\n  row: (row: number) => string;\n  /** The name a cell's field should carry: the column, and which row. */\n  cell: (column: string, row: number) => string;\n  /** The totals row's label, and its group name. */\n  totals: string;\n}\n\nexport const DEFAULT_LINE_ITEMS_LABELS: LineItemsLabels = {\n  add: \"Add row\",\n  remove: (row) => `Remove row ${row}`,\n  confirmRemove: (row) => `Remove row ${row}? Press again to confirm`,\n  row: (row) => `Row ${row}`,\n  cell: (column, row) => `${column}, row ${row}`,\n  totals: \"Total\",\n};\n\n/** What a column's `render` receives for one row. */\nexport interface LineItemCellContext<T> {\n  item: T;\n  /** 0-based. */\n  index: number;\n  /** The accessible name for the cell's field — \"Debit, row 2\". The header is\n   *  hidden from assistive tech (each row repeats it), so the field has to carry it:\n   *  `<Input aria-label={label} … />`. */\n  label: string;\n  /** The column's own name (\"Debit\") for the field's VISIBLE label — set only when the\n   *  cell's labels are `\"floating\"` (see {@link LineItemsProps.fieldLabels}), so one\n   *  render serves both modes: `<Input label={fieldLabel} aria-label={label} … />`.\n   *  Undefined there, the Input stays a bare compact control; set, it floats \"Debit\"\n   *  while `aria-label` still says which row. */\n  fieldLabel?: string;\n}\n\n/** How a cell's field is labelled. `aria`: the field is a bare control named by\n *  `aria-label`, under a header row (stacked: a small copy of the header over it).\n *  `floating`: the field shows its own floating label ({@link LineItemCellContext.fieldLabel}),\n *  so the list draws no header for it. */\nexport type LineItemsFieldLabels = \"aria\" | \"floating\";\n\n/** The colour of a {@link LineItemsSummary}'s value — a verdict (`success` /\n *  `danger`), quiet (`muted`), or the money pair (`income` / `expense`, the colours\n *  `SignedAmount` draws a figure in) for a remainder that reads as the row it settles. */\nexport type LineItemsSummaryTone = \"neutral\" | \"success\" | \"danger\" | \"muted\" | \"income\" | \"expense\";\n\n/**\n * A line under the lines that says where they stand — a split's remainder (\"Left to\n * assign  CHF 0.00\", green at zero, red otherwise, muted while the total is not known\n * yet), with an optional action that settles it (\"Set amount to total\").\n */\nexport interface LineItemsSummary {\n  label: ReactNode;\n  value?: ReactNode;\n  /** The value's colour. Default `neutral`. The label stays neutral: the colour is a\n   *  second signal, never the only one — the value and label carry the meaning.\n   *  With no `value` the line is a state on its own (\"Waiting for the total\"), and\n   *  the tone colours the label instead — `muted` quiets the whole line. */\n  tone?: LineItemsSummaryTone;\n  /** Beside the value: a chip or badge that names the state (\"Balanced\" next to a\n   *  journal entry's zero difference). */\n  status?: ReactNode;\n  /** A small button at the end of the line. Disabled along with the list's\n   *  `disabled`. `variant`: `secondary` (default) is a boxed button; `link` a muted\n   *  text link, for an action that is an aside rather than the way to settle it. */\n  action?: { label: ReactNode; onClick: () => void; disabled?: boolean; variant?: \"secondary\" | \"link\" };\n}\n\n/** Where a row's remove button sits. `row` (default): stacked, a row of the card to\n *  itself (paired, the whole width); wide, its own track. `inline`: stacked, beside\n *  the row's last field (\"category + amount\" over \"memo + delete\"); wide, unchanged. */\nexport type LineItemsRemovePlacement = \"row\" | \"inline\";\n\n/** How the remove button sits in the height of a wide row: at its top, centred, or at\n *  its foot. */\nexport type LineItemsRemoveAlign = \"start\" | \"center\" | \"end\";\n\nexport interface LineItemsColumn<T> {\n  /** Stable id: the React key, and the key into `totals`. */\n  key: string;\n  /** The column header (and the small label over the cell once the rows stack). */\n  header: ReactNode;\n  /** The column's name for {@link LineItemCellContext.label}, when `header` is not a\n   *  string. */\n  label?: string;\n  /** The grid track once the rows are wide enough to be a table. Default\n   *  `minmax(0,1fr)`; `\"7rem\"` for an amount. */\n  width?: string;\n  /** `end` for figures: the header and the totals cell end-align with the field. */\n  align?: \"start\" | \"end\";\n  /** This column's labelling, over the list's {@link LineItemsProps.fieldLabels} — a\n   *  read-only \"Sum\" cell in a floating list keeps its header with `\"aria\"`. */\n  fieldLabels?: LineItemsFieldLabels;\n  /** With {@link LineItemsProps.narrowColumns} `2`: `2` gives the cell a whole row of\n   *  the stacked card (a description), where short fields pair up two to a row.\n   *  Default `1`. No effect on the wide grid. */\n  narrowSpan?: 1 | 2;\n  render: (ctx: LineItemCellContext<T>) => ReactNode;\n}\n\nexport interface LineItemsProps<T> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  items: readonly T[];\n  columns: readonly LineItemsColumn<T>[];\n  /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`\n   *  `fields` carry one), else its index. */\n  getKey?: (item: T, index: number) => Key;\n  /** Append a row. Omitted: no add button. The first field of the new row is focused. */\n  onAdd?: () => void;\n  /** Remove the row at `index`. Omitted: no remove buttons. */\n  onRemove?: (index: number) => void;\n  /** Remove is disabled at or below this many rows (a journal entry needs two).\n   *  Default 0. */\n  minItems?: number;\n  /** Add is disabled at this many rows. */\n  maxItems?: number;\n  /**\n   * Ask before a row goes:\n   *  - `true`: the remove button asks for a second press — it fills red and its name\n   *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.\n   *  - a function: called with the row, and the row goes only if it answers `true`\n   *    (`(item, i) => confirm({ title: … , tone: \"danger\" })` with `useConfirm`).\n   */\n  confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);\n  /** The add button's text. Default `lineItems.add`. */\n  addLabel?: ReactNode;\n  /** A row's group name (\"Line 2\"). Default `lineItems.row`. */\n  rowLabel?: (index: number, item: T) => string;\n  /** A totals row under the lines, one entry per column `key`. The first column\n   *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */\n  totals?: Partial<Record<string, ReactNode>>;\n  /** Default `lineItems.totals`, \"Total\". */\n  totalsLabel?: ReactNode;\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  /** A message about the list as a whole (\"The entry does not balance\"). */\n  error?: ReactNode;\n  /** A line under the lines and totals — the remainder of a split, say. See\n   *  {@link LineItemsSummary}. */\n  summary?: LineItemsSummary;\n  /** How the cells' fields are labelled. Default `aria` (compact bare controls under a\n   *  header row); `floating` hands each cell its column's name as\n   *  {@link LineItemCellContext.fieldLabel} for a visible floating label, and drops the\n   *  header for those columns. A column's own `fieldLabels` wins. */\n  fieldLabels?: LineItemsFieldLabels;\n  /** Stacked (a narrow pane), how many fields share a row of a line's card: `2` pairs\n   *  them up (a column's `narrowSpan={2}` takes a whole row), once the pane is wide\n   *  enough for two fields (18rem); narrower still, one. Default `1`. */\n  narrowColumns?: 1 | 2;\n  /** Stacked, where the remove button goes: a row of its own (`row`, default) or\n   *  beside the last field (`inline`). See {@link LineItemsRemovePlacement}. */\n  removePlacement?: LineItemsRemovePlacement;\n  /** On the wide grid, the remove button's place in the row's height. Default `start`\n   *  — or `center` when a column floats its label (`fieldLabels=\"floating\"`): a\n   *  floating field is taller than the button, and centred is level with its control.\n   *  A field that shows a message under itself grows the row; pin `start` then. */\n  removeAlign?: LineItemsRemoveAlign;\n  /** Disables add and remove (the fields are the caller's to disable). */\n  disabled?: boolean;\n  labels?: Partial<LineItemsLabels>;\n}\n\nconst REMOVE_TRACK = \"2.25rem\";\nconst SUMMARY_TONE: Record<LineItemsSummaryTone, string> = {\n  neutral: \"text-[var(--text-primary)]\",\n  success: \"text-[var(--success)]\",\n  danger: \"text-[var(--danger)]\",\n  muted: \"text-[var(--text-muted)]\",\n  // SignedAmount's money palette (toneTextClass \"income\" / \"expense\").\n  income: \"text-[var(--money-income)]\",\n  expense: \"text-[var(--money-expense)]\",\n};\nconst REMOVE_ALIGN: Record<LineItemsRemoveAlign, string> = {\n  start: \"@lg:self-start\",\n  center: \"@lg:self-center\",\n  end: \"@lg:self-end\",\n};\nconst FOCUSABLE =\n  \"input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])\";\n\nfunction defaultKey(item: unknown, index: number): Key {\n  if (typeof item === \"object\" && item !== null && \"id\" in item) {\n    const id = (item as { id: unknown }).id;\n    if (typeof id === \"string\" || typeof id === \"number\") return id;\n  }\n  return index;\n}\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\ntype PendingFocus = { kind: \"added\" } | { kind: \"removed\"; index: number };\n\n/**\n * An editable list of lines — journal entry lines, lease components, invoice\n * positions, budget rows: column headers, a row of fields per item, a remove button\n * per row, a dashed \"add\" button under them, and an optional totals row.\n *\n * Presentation only: the rows are the caller's `items` and the fields are the\n * caller's, rendered per column. So it works over plain state —\n *\n * ```tsx\n * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}\n *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />\n * ```\n *\n * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>\n * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has\n * `RhfLineItems`.\n *\n * On a wide pane the rows are a grid under the headers; on a narrow one (a container\n * query, so a dialog stacks where it is cramped) each row stacks its fields, each\n * under a small copy of its header. The headers are `aria-hidden`: every row is a\n * named group and every field is named by `render`'s `label` (\"Debit, row 2\"), which\n * is what a screen reader needs — a header row it would read once, out of context.\n *\n * Keyboard: after Add, focus lands in the new row's first field; after a remove, on\n * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a\n * row.\n */\nexport function LineItems<T>({\n  items,\n  columns,\n  getKey = defaultKey,\n  onAdd,\n  onRemove,\n  minItems = 0,\n  maxItems,\n  confirmRemove,\n  addLabel,\n  rowLabel,\n  totals,\n  totalsLabel,\n  empty,\n  error,\n  summary,\n  fieldLabels = \"aria\",\n  narrowColumns = 1,\n  removePlacement = \"row\",\n  removeAlign: removeAlignProp,\n  disabled = false,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: LineItemsProps<T>) {\n  const labels = useKitLabels(\"lineItems\", DEFAULT_LINE_ITEMS_LABELS, labelsProp);\n  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);\n  const addRef = useRef<HTMLButtonElement>(null);\n  const pendingFocus = useRef<PendingFocus | null>(null);\n  const [confirmingAt, setConfirming] = useState<number | null>(null);\n  // A confirm waiting on a row that has since gone is void.\n  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;\n\n  const tracks = [...columns.map((c) => c.width ?? \"minmax(0,1fr)\"), ...(onRemove ? [REMOVE_TRACK] : [])];\n  const gridStyle = { \"--line-items-cols\": tracks.join(\" \") } as CSSProperties;\n  const canAdd = Boolean(onAdd) && !disabled && (maxItems === undefined || items.length < maxItems);\n  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;\n  const hasError = hasContent(error);\n\n\n  // Focus after the list has re-rendered with the new rows — a layout effect, so the\n  // caret is where it belongs before paint.\n  useLayoutEffect(() => {\n    const pending = pendingFocus.current;\n    if (!pending) return;\n    pendingFocus.current = null;\n    if (pending.kind === \"added\") {\n      const row = rowRefs.current[items.length - 1];\n      row?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n      return;\n    }\n    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];\n    const target =\n      row?.querySelector<HTMLElement>(\"[data-line-items-remove]:not([disabled])\") ??\n      row?.querySelector<HTMLElement>(FOCUSABLE) ??\n      addRef.current;\n    target?.focus();\n  }, [items.length]);\n\n  const add = useCallback(() => {\n    if (!canAdd || !onAdd) return;\n    pendingFocus.current = { kind: \"added\" };\n    onAdd();\n  }, [canAdd, onAdd]);\n\n  const removeAt = async (index: number) => {\n    if (!canRemove || !onRemove) return;\n    if (confirmRemove === true && confirming !== index) {\n      setConfirming(index);\n      return;\n    }\n    if (typeof confirmRemove === \"function\") {\n      const ok = await confirmRemove(items[index], index);\n      if (!ok) return;\n    }\n    setConfirming(null);\n    pendingFocus.current = { kind: \"removed\", index };\n    onRemove(index);\n  };\n\n  const onRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === \"Enter\" && (e.ctrlKey || e.metaKey) && canAdd) {\n      e.preventDefault();\n      add();\n    }\n  };\n\n  const columnName = (column: LineItemsColumn<T>) =>\n    column.label ?? (typeof column.header === \"string\" ? column.header : column.key);\n  const floats = (column: LineItemsColumn<T>) => (column.fieldLabels ?? fieldLabels) === \"floating\";\n  // A header row only for the columns that still need one: with every field floating\n  // its own label, a row of headers would say each name twice.\n  const showHeader = columns.some((c) => !floats(c));\n  const pairs = narrowColumns === 2;\n  const removeAlign = removeAlignProp ?? (columns.some(floats) ? \"center\" : \"start\");\n  const inline = removePlacement === \"inline\" && Boolean(onRemove) && columns.length > 0;\n  const lastColumn = columns[columns.length - 1];\n\n  const headerCell = (column: LineItemsColumn<T>) => (\n    <span\n      key={column.key}\n      className={cn(\n        \"min-w-0 truncate text-xs font-medium text-[var(--text-muted)]\",\n        column.align === \"end\" && \"text-end\",\n      )}\n    >\n      {floats(column) ? null : column.header}\n    </span>\n  );\n\n  const removeCell = (index: number, row: number, isConfirming: boolean) => (\n    <div\n      data-line-items-remove-cell=\"\"\n      className={cn(\n        \"flex justify-end @lg:justify-center\",\n        REMOVE_ALIGN[removeAlign],\n        // Paired, the remove button keeps a row of its own at the card's end rather\n        // than squeezing in beside the last field — unless asked to go `inline`.\n        inline ? \"shrink-0\" : pairs && \"@2xs:col-span-2 @lg:col-span-1\",\n      )}\n    >\n      <IconButton\n        type=\"button\"\n        data-line-items-remove=\"\"\n        variant={isConfirming ? \"danger\" : \"ghost\"}\n        tone={isConfirming ? undefined : \"danger\"}\n        label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}\n        disabled={!canRemove}\n        onClick={() => void removeAt(index)}\n        onBlur={() => {\n          if (isConfirming) setConfirming(null);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === \"Escape\" && isConfirming) {\n            e.stopPropagation();\n            setConfirming(null);\n          }\n        }}\n      >\n        <Trash2 />\n      </IconButton>\n    </div>\n  );\n\n  const showTotals = totals !== undefined;\n  const summaryTone = summary?.tone ?? \"neutral\";\n  const summaryHasValue = hasContent(summary?.value);\n  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : undefined;\n\n  return (\n    <div\n      data-slot=\"line-items\"\n      {...rest}\n      style={{ ...gridStyle, ...style }}\n      className={cn(\"@container space-y-2\", className)}\n    >\n      {showHeader && (\n        <div aria-hidden className=\"hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]\">\n          {columns.map(headerCell)}\n          {onRemove && <span />}\n        </div>\n      )}\n\n      {items.length === 0 && hasContent(empty) && (\n        <div className=\"rounded-md border border-dashed border-[var(--border)] px-3 py-4 text-center text-sm text-[var(--text-muted)]\">\n          {empty}\n        </div>\n      )}\n\n      {items.map((item, index) => {\n        const row = index + 1;\n        const isConfirming = confirming === index;\n        return (\n          // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself\n          // reachable by Tab; the group only listens for it bubbling from its fields.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n          <div\n            key={getKey(item, index)}\n            ref={(el) => {\n              rowRefs.current[index] = el;\n            }}\n            role=\"group\"\n            aria-label={rowLabel ? rowLabel(index, item) : labels.row(row)}\n            data-line-items-row=\"\"\n            onKeyDown={onRowKeyDown}\n            className={cn(\n              \"grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start\",\n              // Two short fields to a row of the card — from 18rem, where two fields\n              // still fit a figure each; on anything narrower they stack after all.\n              pairs && \"@2xs:grid-cols-2\",\n              // Stacked, each row is a card of its own so the rows stay apart.\n              \"@max-lg:rounded-md @max-lg:border @max-lg:border-[var(--border)] @max-lg:p-3\",\n            )}\n          >\n            {columns.map((column) => {\n              const floating = floats(column);\n              const isLast = inline && column === lastColumn;\n              const span = pairs && column.narrowSpan === 2 && \"@2xs:col-span-2 @lg:col-span-1\";\n              const cell = (\n                <div\n                  key={column.key}\n                  className={cn(\n                    \"min-w-0 space-y-1 @lg:space-y-0\",\n                    // The wide grid places every cell in its own track again.\n                    isLast ? \"flex-1\" : span,\n                  )}\n                >\n                  {!floating && (\n                    <span aria-hidden className=\"block text-xs font-medium text-[var(--text-muted)] @lg:hidden\">\n                      {column.header}\n                    </span>\n                  )}\n                  {column.render({\n                    item,\n                    index,\n                    label: labels.cell(columnName(column), row),\n                    fieldLabel: floating ? columnName(column) : undefined,\n                  })}\n                </div>\n              );\n              if (!isLast) return cell;\n              // Inline, the last field and the remove button share one cell of the\n              // card; on the wide grid the wrapper dissolves (`contents`) and each is a\n              // track of its own again. Level with the field's control: its foot under\n              // a header copy, its middle when it floats its own label.\n              return (\n                <div\n                  key={column.key}\n                  data-line-items-inline=\"\"\n                  className={cn(\"flex min-w-0 gap-2 @lg:contents\", floating ? \"items-center\" : \"items-end\", span)}\n                >\n                  {cell}\n                  {removeCell(index, row, isConfirming)}\n                </div>\n              );\n            })}\n            {onRemove && !inline && removeCell(index, row, isConfirming)}\n          </div>\n        );\n      })}\n\n      {showTotals && (\n        <div\n          role=\"group\"\n          aria-label={typeof totalsLabel === \"string\" ? totalsLabel : labels.totals}\n          data-line-items-totals=\"\"\n          className=\"grid grid-cols-1 gap-2 border-t border-[var(--border)] pt-2 text-sm font-semibold tabular-nums text-[var(--text-primary)] @lg:grid-cols-[var(--line-items-cols)]\"\n        >\n          {columns.map((column) => {\n            const value = totals[column.key];\n            if (column.key === labelColumn) {\n              return (\n                <span key={column.key} className=\"min-w-0\">\n                  {totalsLabel ?? labels.totals}\n                </span>\n              );\n            }\n            return (\n              <span\n                key={column.key}\n                className={cn(\n                  \"min-w-0\",\n                  column.align === \"end\" && \"@lg:text-end\",\n                  // Stacked, a column with no total takes no line.\n                  !hasContent(value) && \"@max-lg:hidden\",\n                )}\n              >\n                {hasContent(value) && (\n                  <span className=\"flex justify-between gap-2 @lg:block\">\n                    <span aria-hidden className=\"font-normal text-[var(--text-muted)] @lg:hidden\">\n                      {column.header}\n                    </span>\n                    {value}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n          {onRemove && <span className=\"@max-lg:hidden\" />}\n        </div>\n      )}\n\n      {summary && (\n        <div\n          data-line-items-summary=\"\"\n          className=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--text-primary)]\"\n        >\n          {/* With no value the line is a state of its own, and the label takes the\n              tone — the only place left to carry it. */}\n          <span\n            data-tone={summaryHasValue ? undefined : summaryTone}\n            className={cn(\"min-w-0\", !summaryHasValue && SUMMARY_TONE[summaryTone])}\n          >\n            {summary.label}\n          </span>\n          {summaryHasValue && (\n            <span data-tone={summaryTone} className={cn(\"font-semibold tabular-nums\", SUMMARY_TONE[summaryTone])}>\n              {summary.value}\n            </span>\n          )}\n          {hasContent(summary.status) && (\n            <span data-line-items-summary-status=\"\" className=\"inline-flex\">\n              {summary.status}\n            </span>\n          )}\n          {summary.action && (\n            <Button\n              type=\"button\"\n              variant={summary.action.variant === \"link\" ? \"link\" : \"secondary\"}\n              tone={summary.action.variant === \"link\" ? \"muted\" : undefined}\n              size=\"sm\"\n              className=\"ms-auto\"\n              disabled={disabled || summary.action.disabled}\n              onClick={summary.action.onClick}\n            >\n              {summary.action.label}\n            </Button>\n          )}\n        </div>\n      )}\n\n      {hasError && (\n        <p className=\"text-[11px] leading-tight text-[var(--danger)]\">\n          {error}\n        </p>\n      )}\n\n      {onAdd && (\n        <Button\n          ref={addRef}\n          type=\"button\"\n          variant=\"secondary\"\n          className=\"w-full border-dashed\"\n          disabled={!canAdd}\n          onClick={add}\n        >\n          <Plus aria-hidden className=\"size-4\" />\n          {addLabel ?? labels.add}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["row"]}

package/dist/components/list.d.ts

@@ -99,7 +99,12 @@ interface ListItemBaseProps {
      * never operated — no buttons, links or inputs (invalid HTML in a button, and folded
      * into its name). Its text joins the row's accessible name, so give a bar that only
      * repeats a figure already in the row `aria-hidden`. Rendered in a block `<span>`,
-     * full width of the text column. Strictly a button holds phrasing content only; the
+     * full width of the TEXT COLUMN only — the column the title and subtitle are in, not
+     * the whole row: it starts after the {@link icon} / {@link leading} and stops where
+     * {@link trailing} begins, so a meter under a row with a trailing figure is as wide as
+     * the title, not run on under the figure (keksdose's budget rows). For a bar across
+     * the full row, put it in {@link children} (outside the target) or leave `trailing`
+     * off and show the figure in `meta`. Strictly a button holds phrasing content only; the
      * kit's `ProgressBar` draws `<div>`s, which every browser lays out and reads fine
      * there but an HTML validator flags.
      */
@@ -219,6 +224,13 @@ interface ListItemBaseProps {
      * the list's child and keeps both. The `<li>` becomes a column and the row takes the
      * full width, so an inline wrapper (the tooltip's `inline-flex` span) still stretches
      * the row across the list.
+     *
+     * `row` is the row BOX (a `<div>`), not the target: a wrapper that forces a prop onto
+     * its child with `cloneElement` — a save guard that injects `disabled` while a form is
+     * dirty (keksdose's SaveGuard) — sets it on that div, where it does nothing, and the
+     * button inside stays live. Pass `disabled` (or `loading`) to the ListItem yourself,
+     * from the same state the guard reads, and let the wrapper only explain it:
+     * `<ListItem disabled={dirty} renderRow={(row) => <Tooltip label="Save first">{row}</Tooltip>} />`.
      */
     renderRow?: (row: ReactElement) => ReactNode;
     /** Reaches the main target — the element with the row's name and action. */