@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/line-items.tsx

@@ -1,602 +0,0 @@
-import { useCallback, useLayoutEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, CSSProperties, HTMLAttributes, KeyboardEvent, Key, ReactNode } from "react";
-import { Plus, Trash2 } from "lucide-react";
-import { cn } from "../lib/cn";
-import { hasContent } from "../lib/presence";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { Button } from "./button";
-import { IconButton } from "./icon-button";
-import { DEFAULT_LINE_ITEMS_LABELS } from "./line-items-labels";
-
-/** The words {@link LineItems} renders on its own behalf. Row numbers are 1-based. */
-export interface LineItemsLabels {
-  /** The dashed add button. */
-  add: string;
-  /** The remove button's name for one row. */
-  remove: (row: number) => string;
-  /** Its name while it waits for the second press (`confirmRemove`). */
-  confirmRemove: (row: number) => string;
-  /** A row's group name, when the caller gives no `rowLabel`. */
-  row: (row: number) => string;
-  /** The name a cell's field should carry: the column, and which row. */
-  cell: (column: string, row: number) => string;
-  /** The totals row's label, and its group name. */
-  totals: string;
-}
-
-// Defined in ./line-items-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_LINE_ITEMS_LABELS };
-
-/** What a column's `render` receives for one row. */
-export interface LineItemCellContext<T> {
-  item: T;
-  /** 0-based. */
-  index: number;
-  /** The accessible name for the cell's field — "Debit, row 2". The header is
-   *  hidden from assistive tech (each row repeats it), so the field has to carry it:
-   *  `<Input aria-label={label} … />`. */
-  label: string;
-  /** The column's own name ("Debit") for the field's VISIBLE label — set only when the
-   *  cell's labels are `"floating"` (see {@link LineItemsProps.fieldLabels}), so one
-   *  render serves both modes: `<Input label={fieldLabel} aria-label={label} … />`.
-   *  Undefined there, the Input stays a bare compact control; set, it floats "Debit"
-   *  while `aria-label` still says which row. */
-  fieldLabel?: string;
-}
-
-/** How a cell's field is labelled. `aria`: the field is a bare control named by
- *  `aria-label`, under a header row (stacked: a small copy of the header over it).
- *  `floating`: the field shows its own floating label ({@link LineItemCellContext.fieldLabel}),
- *  so the list draws no header for it. */
-export type LineItemsFieldLabels = "aria" | "floating";
-
-/** 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. */
-export 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
- * yet), with an optional action that settles it ("Set amount to total").
- */
-export 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.
-   *  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`. `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. */
-export type LineItemsRemovePlacement = "row" | "inline";
-
-/** How the remove button sits in the height of a wide row: at its top, centred, or at
- *  its foot. */
-export type LineItemsRemoveAlign = "start" | "center" | "end";
-
-export interface LineItemsColumn<T> {
-  /** Stable id: the React key, and the key into `totals`. */
-  key: string;
-  /** The column header (and the small label over the cell once the rows stack). */
-  header: ReactNode;
-  /** The column's name for {@link LineItemCellContext.label}, when `header` is not a
-   *  string. */
-  label?: string;
-  /** The grid track once the rows are wide enough to be a table. Default
-   *  `minmax(0,1fr)`; `"7rem"` for an amount. */
-  width?: string;
-  /** `end` for figures: the header and the totals cell end-align with the field. */
-  align?: "start" | "end";
-  /** This column's labelling, over the list's {@link LineItemsProps.fieldLabels} — a
-   *  read-only "Sum" cell in a floating list keeps its header with `"aria"`. */
-  fieldLabels?: LineItemsFieldLabels;
-  /** With {@link LineItemsProps.narrowColumns} `2`: `2` gives the cell a whole row of
-   *  the stacked card (a description), where short fields pair up two to a row.
-   *  Default `1`. No effect on the wide grid. */
-  narrowSpan?: 1 | 2;
-  render: (ctx: LineItemCellContext<T>) => ReactNode;
-}
-
-/**
- * What {@link LineItemsProps.rowProps} returns for one row: `data-*` hooks, an `id`, a
- * class, handlers. A `data-*` attribute is typed so `{ "data-tour": "rule-condition" }`
- * needs no cast.
- */
-export type LineItemsRowProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  "children" | "dangerouslySetInnerHTML" | "role"
-> & {
-  [key: `data-${string}`]: string | number | boolean | undefined;
-};
-
-export interface LineItemsProps<T> extends Omit<ComponentPropsWithRef<"div">, "children"> {
-  items: readonly T[];
-  columns: readonly LineItemsColumn<T>[];
-  /** The row's React key. Default: the item's `id` (react-hook-form's `useFieldArray`
-   *  `fields` carry one), else its index. */
-  getKey?: (item: T, index: number) => Key;
-  /** Append a row. Omitted: no add button. The first field of the new row is focused. */
-  onAdd?: () => void;
-  /** Remove the row at `index`. Omitted: no remove buttons. */
-  onRemove?: (index: number) => void;
-  /** Remove is disabled at or below this many rows (a journal entry needs two).
-   *  Default 0. */
-  minItems?: number;
-  /** Add is disabled at this many rows. */
-  maxItems?: number;
-  /**
-   * Ask before a row goes:
-   *  - `true`: the remove button asks for a second press — it fills red and its name
-   *    becomes `lineItems.confirmRemove`; Escape, or leaving it, calls it off.
-   *  - a function: called with the row, and the row goes only if it answers `true`
-   *    (`(item, i) => confirm({ title: … , tone: "danger" })` with `useConfirm`).
-   */
-  confirmRemove?: boolean | ((item: T, index: number) => boolean | Promise<boolean>);
-  /** The add button's text. Default `lineItems.add`. */
-  addLabel?: ReactNode;
-  /** A row's group name ("Line 2"). Default `lineItems.row`. */
-  rowLabel?: (index: number, item: T) => string;
-  /** A totals row under the lines, one entry per column `key`. The first column
-   *  without an entry carries {@link totalsLabel}. Omitted: no totals row. */
-  totals?: Partial<Record<string, ReactNode>>;
-  /** Default `lineItems.totals`, "Total". */
-  totalsLabel?: ReactNode;
-  /** Shown in place of the rows when there are none. */
-  empty?: ReactNode;
-  /** A message about the list as a whole ("The entry does not balance"). */
-  error?: ReactNode;
-  /** A line under the lines and totals — the remainder of a split, say. See
-   *  {@link LineItemsSummary}. */
-  summary?: LineItemsSummary;
-  /** How the cells' fields are labelled. Default `aria` (compact bare controls under a
-   *  header row); `floating` hands each cell its column's name as
-   *  {@link LineItemCellContext.fieldLabel} for a visible floating label, and drops the
-   *  header for those columns. A column's own `fieldLabels` wins. */
-  fieldLabels?: LineItemsFieldLabels;
-  /** Stacked (a narrow pane), how many fields share a row of a line's card: `2` pairs
-   *  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;
-  /**
-   * Extra attributes for one row's element (the `role="group"` that holds its fields) —
-   * keksdose K20: its rule editor's tour points at the first condition row with
-   * `[data-tour="rule-condition"]` (dev#495), and with nowhere to put the anchor on the
-   * row it wrapped a cell's field in a `span` instead, which the spotlight then drew
-   * around one field rather than the row. Test ids the same way.
-   *
-   * MERGED under the list's own, which win: `role`, the group's `aria-label` (that is
-   * {@link rowLabel}'s) and `data-line-items-row` stay the list's — the row's name and
-   * the hook its focus handling finds rows by. `className` is added after the row's
-   * own classes, `style` is passed through, and an `onKeyDown` runs BEFORE the row's
-   * Ctrl/⌘+Enter "add a row" (call `preventDefault()` to keep that from happening).
-   */
-  rowProps?: (item: T, index: number) => LineItemsRowProps | undefined;
-  labels?: LabelOverride<LineItemsLabels>;
-}
-
-const REMOVE_TRACK = "2.25rem";
-const SUMMARY_TONE: Record<LineItemsSummaryTone, string> = {
-  neutral: "text-primary",
-  success: "text-success",
-  danger: "text-danger",
-  muted: "text-muted",
-  // SignedAmount's money palette (toneTextClass "income" / "expense").
-  income: "text-money-income",
-  expense: "text-money-expense",
-};
-const REMOVE_ALIGN: Record<LineItemsRemoveAlign, string> = {
-  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: unknown, index: number): Key {
-  if (typeof item === "object" && item !== null && "id" in item) {
-    const id = (item as { id: unknown }).id;
-    if (typeof id === "string" || typeof id === "number") return id;
-  }
-  return index;
-}
-
-type PendingFocus = { kind: "added" } | { kind: "removed"; index: number };
-
-/**
- * An editable list of lines — journal entry lines, lease components, invoice
- * positions, budget rows: column headers, a row of fields per item, a remove button
- * per row, a dashed "add" button under them, and an optional totals row.
- *
- * Presentation only: the rows are the caller's `items` and the fields are the
- * caller's, rendered per column. So it works over plain state —
- *
- * ```tsx
- * <LineItems items={lines} columns={cols} onAdd={() => setLines([...lines, blank()])}
- *   onRemove={(i) => setLines(lines.filter((_, j) => j !== i))} minItems={2} />
- * ```
- *
- * — and over react-hook-form's `useFieldArray` alike (`items={fields}`, `onAdd={() =>
- * append(blank())}`, `onRemove={remove}`), for which `@eifi1/ui-kit/rhf` has
- * `RhfLineItems`.
- *
- * On a wide pane the rows are a grid under the headers; on a narrow one (a container
- * query, so a dialog stacks where it is cramped) each row stacks its fields, each
- * under a small copy of its header. The headers are `aria-hidden`: every row is a
- * named group and every field is named by `render`'s `label` ("Debit, row 2"), which
- * is what a screen reader needs — a header row it would read once, out of context.
- *
- * Keyboard: after Add, focus lands in the new row's first field; after a remove, on
- * the row that took its place (else the add button). Ctrl/⌘+Enter in any row adds a
- * row.
- */
-export function LineItems<T>({
-  items,
-  columns,
-  getKey = defaultKey,
-  onAdd,
-  onRemove,
-  minItems = 0,
-  maxItems,
-  confirmRemove,
-  addLabel,
-  rowLabel,
-  totals,
-  totalsLabel,
-  empty,
-  error,
-  summary,
-  fieldLabels = "aria",
-  narrowColumns = 1,
-  removePlacement = "row",
-  removeAlign: removeAlignProp,
-  disabled = false,
-  rowProps,
-  labels: labelsProp,
-  className,
-  style,
-  ...rest
-}: LineItemsProps<T>) {
-  const labels = useKitLabels("lineItems", DEFAULT_LINE_ITEMS_LABELS, labelsProp);
-  const rowRefs = useRef<Array<HTMLDivElement | null>>([]);
-  const addRef = useRef<HTMLButtonElement>(null);
-  const pendingFocus = useRef<PendingFocus | null>(null);
-  const [confirmingAt, setConfirming] = useState<number | null>(null);
-  // A confirm waiting on a row that has since gone is void.
-  const confirming = confirmingAt !== null && confirmingAt < items.length ? confirmingAt : null;
-
-  const tracks = [...columns.map((c) => c.width ?? "minmax(0,1fr)"), ...(onRemove ? [REMOVE_TRACK] : [])];
-  const gridStyle = { "--line-items-cols": tracks.join(" ") } as CSSProperties;
-  const canAdd = Boolean(onAdd) && !disabled && (maxItems === undefined || items.length < maxItems);
-  const canRemove = Boolean(onRemove) && !disabled && items.length > minItems;
-  const hasError = hasContent(error);
-
-  // Focus after the list has re-rendered with the new rows — a layout effect, so the
-  // caret is where it belongs before paint.
-  useLayoutEffect(() => {
-    const pending = pendingFocus.current;
-    if (!pending) return;
-    pendingFocus.current = null;
-    if (pending.kind === "added") {
-      const row = rowRefs.current[items.length - 1];
-      row?.querySelector<HTMLElement>(FOCUSABLE)?.focus();
-      return;
-    }
-    const row = rowRefs.current[Math.min(pending.index, items.length - 1)];
-    const target =
-      row?.querySelector<HTMLElement>("[data-line-items-remove]:not([disabled])") ??
-      row?.querySelector<HTMLElement>(FOCUSABLE) ??
-      addRef.current;
-    target?.focus();
-  }, [items.length]);
-
-  const add = useCallback(() => {
-    if (!canAdd || !onAdd) return;
-    pendingFocus.current = { kind: "added" };
-    onAdd();
-  }, [canAdd, onAdd]);
-
-  const removeAt = async (index: number) => {
-    if (!canRemove || !onRemove) return;
-    if (confirmRemove === true && confirming !== index) {
-      setConfirming(index);
-      return;
-    }
-    if (typeof confirmRemove === "function") {
-      const ok = await confirmRemove(items[index], index);
-      if (!ok) return;
-    }
-    setConfirming(null);
-    pendingFocus.current = { kind: "removed", index };
-    onRemove(index);
-  };
-
-  const onRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.key === "Enter" && (e.ctrlKey || e.metaKey) && canAdd) {
-      e.preventDefault();
-      add();
-    }
-  };
-
-  const columnName = (column: LineItemsColumn<T>) =>
-    column.label ?? (typeof column.header === "string" ? column.header : column.key);
-  const floats = (column: LineItemsColumn<T>) => (column.fieldLabels ?? fieldLabels) === "floating";
-  // A header row only for the columns that still need one: with every field floating
-  // its own label, a row of headers would say each name twice.
-  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: LineItemsColumn<T>) => (
-    <span
-      key={column.key}
-      className={cn("min-w-0 truncate text-xs font-medium text-muted", column.align === "end" && "text-end")}
-    >
-      {floats(column) ? null : column.header}
-    </span>
-  );
-
-  const removeCell = (index: number, row: number, isConfirming: boolean) => (
-    <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",
-      )}
-    >
-      <IconButton
-        type="button"
-        data-line-items-remove=""
-        variant={isConfirming ? "danger" : "ghost"}
-        tone={isConfirming ? undefined : "danger"}
-        label={isConfirming ? labels.confirmRemove(row) : labels.remove(row)}
-        // The icon alone at every text size (docs/text-size-harmonization.md §10.8): the
-        // row's one control, in a grid column sized for an icon, whose name becomes a
-        // sentence while it waits ("Remove row 3? Press again to confirm") — as text at
-        // Large it would push the row's fields aside and change width between the two
-        // presses. The name stays the accessible name; the red fill says "confirm".
-        labelVisible={false}
-        disabled={!canRemove}
-        onClick={() => void removeAt(index)}
-        onBlur={() => {
-          if (isConfirming) setConfirming(null);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === "Escape" && isConfirming) {
-            e.stopPropagation();
-            setConfirming(null);
-          }
-        }}
-      >
-        <Trash2 />
-      </IconButton>
-    </div>
-  );
-
-  const showTotals = totals !== undefined;
-  const summaryTone = summary?.tone ?? "neutral";
-  const summaryHasValue = hasContent(summary?.value);
-  const labelColumn = showTotals ? columns.find((c) => !hasContent(totals[c.key]))?.key : undefined;
-
-  return (
-    <div
-      data-slot="line-items"
-      {...rest}
-      style={{ ...gridStyle, ...style }}
-      className={cn("@container space-y-2", className)}
-    >
-      {showHeader && (
-        <div aria-hidden className="hidden gap-2 @lg:grid @lg:grid-cols-[var(--line-items-cols)]">
-          {columns.map(headerCell)}
-          {onRemove && <span />}
-        </div>
-      )}
-
-      {items.length === 0 && hasContent(empty) && (
-        <div className="rounded-md border border-dashed border-subtle px-3 py-4 text-center text-sm text-muted">
-          {empty}
-        </div>
-      )}
-
-      {items.map((item, index) => {
-        const row = index + 1;
-        const isConfirming = confirming === index;
-        const extra = rowProps?.(item, index);
-        return (
-          // The row's Ctrl/⌘+Enter is a shortcut for the add button, which is itself
-          // reachable by Tab; the group only listens for it bubbling from its fields.
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-          <div
-            {...extra}
-            key={getKey(item, index)}
-            ref={(el) => {
-              rowRefs.current[index] = el;
-            }}
-            role="group"
-            aria-label={rowLabel ? rowLabel(index, item) : labels.row(row)}
-            data-line-items-row=""
-            onKeyDown={(e) => {
-              if (extra?.onKeyDown) {
-                extra.onKeyDown(e);
-                if (e.defaultPrevented) return;
-              }
-              onRowKeyDown(e);
-            }}
-            className={cn(
-              "grid grid-cols-1 gap-2 @lg:grid-cols-[var(--line-items-cols)] @lg:items-start",
-              // Two short fields to a row of the card — from 18rem, where two fields
-              // still fit a figure each; on anything narrower they stack after all.
-              pairs && "@2xs:grid-cols-2",
-              // Stacked, each row is a card of its own so the rows stay apart.
-              "@max-lg:rounded-md @max-lg:border @max-lg:border-subtle @max-lg:p-3",
-              extra?.className,
-            )}
-          >
-            {columns.map((column) => {
-              const floating = floats(column);
-              const isLast = inline && column === lastColumn;
-              const span = pairs && column.narrowSpan === 2 && "@2xs:col-span-2 @lg:col-span-1";
-              const cell = (
-                <div
-                  key={column.key}
-                  className={cn(
-                    "min-w-0 space-y-1 @lg:space-y-0",
-                    // The wide grid places every cell in its own track again.
-                    isLast ? "flex-1" : span,
-                  )}
-                >
-                  {!floating && (
-                    <span aria-hidden className="block text-xs font-medium text-muted @lg:hidden">
-                      {column.header}
-                    </span>
-                  )}
-                  {column.render({
-                    item,
-                    index,
-                    label: labels.cell(columnName(column), row),
-                    fieldLabel: floating ? columnName(column) : undefined,
-                  })}
-                </div>
-              );
-              if (!isLast) return cell;
-              // Inline, the last field and the remove button share one cell of the
-              // card; on the wide grid the wrapper dissolves (`contents`) and each is a
-              // track of its own again. Level with the field's control: its foot under
-              // a header copy, its middle when it floats its own label.
-              return (
-                <div
-                  key={column.key}
-                  data-line-items-inline=""
-                  className={cn("flex min-w-0 gap-2 @lg:contents", floating ? "items-center" : "items-end", span)}
-                >
-                  {cell}
-                  {removeCell(index, row, isConfirming)}
-                </div>
-              );
-            })}
-            {onRemove && !inline && removeCell(index, row, isConfirming)}
-          </div>
-        );
-      })}
-
-      {showTotals && (
-        <div
-          role="group"
-          aria-label={typeof totalsLabel === "string" ? totalsLabel : labels.totals}
-          data-line-items-totals=""
-          className="grid grid-cols-1 gap-2 border-t border-subtle pt-2 text-sm font-semibold tabular-nums text-primary @lg:grid-cols-[var(--line-items-cols)]"
-        >
-          {columns.map((column) => {
-            const value = totals[column.key];
-            if (column.key === labelColumn) {
-              return (
-                <span key={column.key} className="min-w-0">
-                  {totalsLabel ?? labels.totals}
-                </span>
-              );
-            }
-            return (
-              <span
-                key={column.key}
-                className={cn(
-                  "min-w-0",
-                  column.align === "end" && "@lg:text-end",
-                  // Stacked, a column with no total takes no line.
-                  !hasContent(value) && "@max-lg:hidden",
-                )}
-              >
-                {hasContent(value) && (
-                  <span className="flex justify-between gap-2 @lg:block">
-                    <span aria-hidden className="font-normal text-muted @lg:hidden">
-                      {column.header}
-                    </span>
-                    {value}
-                  </span>
-                )}
-              </span>
-            );
-          })}
-          {onRemove && <span className="@max-lg:hidden" />}
-        </div>
-      )}
-
-      {summary && (
-        <div data-line-items-summary="" className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-primary">
-          {/* With no value the line is a state of its own, and the label takes the
-              tone — the only place left to carry it. */}
-          <span
-            data-tone={summaryHasValue ? undefined : summaryTone}
-            className={cn("min-w-0", !summaryHasValue && SUMMARY_TONE[summaryTone])}
-          >
-            {summary.label}
-          </span>
-          {summaryHasValue && (
-            <span data-tone={summaryTone} className={cn("font-semibold tabular-nums", SUMMARY_TONE[summaryTone])}>
-              {summary.value}
-            </span>
-          )}
-          {hasContent(summary.status) && (
-            <span data-line-items-summary-status="" className="inline-flex">
-              {summary.status}
-            </span>
-          )}
-          {summary.action && (
-            <Button
-              type="button"
-              variant={summary.action.variant === "link" ? "link" : "secondary"}
-              tone={summary.action.variant === "link" ? "muted" : undefined}
-              size="sm"
-              className="ms-auto"
-              disabled={disabled || summary.action.disabled}
-              onClick={summary.action.onClick}
-            >
-              {summary.action.label}
-            </Button>
-          )}
-        </div>
-      )}
-
-      {hasError && <p className="text-caption leading-tight text-danger">{error}</p>}
-
-      {onAdd && (
-        <Button
-          ref={addRef}
-          type="button"
-          variant="secondary"
-          className="w-full border-dashed"
-          disabled={!canAdd}
-          onClick={add}
-        >
-          <Plus aria-hidden className="size-4" />
-          {addLabel ?? labels.add}
-        </Button>
-      )}
-    </div>
-  );
-}

package/src/components/list-labels.ts

@@ -1,12 +0,0 @@
-// The English words of ./list, in a module with no component code: the English catalogue
-// (src/i18n/defaults.ts) imports them without the component, so `en` loads as one chunk
-// like the other languages (0.34, KS U8). ./list re-exports them.
-
-import type { ListLabels } from "./list";
-
-export const DEFAULT_LIST_LABELS: ListLabels = {
-  unread: "Unread",
-  opensInNewTab: "opens in a new tab",
-  showAll: (count) => `Show all (${count})`,
-  showFewer: "Show fewer",
-};