@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/data-table-pagination.tsx

@@ -1,202 +0,0 @@
-import { useMemo } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { cn } from "../lib/cn";
-import { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from "./data-table-labels";
-import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
-import { usePhoneLayout } from "../hooks/use-breakpoint";
-import { useLargeText } from "../hooks/use-large-text";
-
-export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200] as const;
-
-/** The page-size steps, with the current size slotted in when it is not one of them. */
-function sizeOptions(pageSize: number): number[] {
-  const steps: number[] = [...PAGE_SIZE_OPTIONS];
-  if (!Number.isFinite(pageSize) || steps.includes(pageSize)) return steps;
-  return [...steps, pageSize].sort((a, b) => a - b);
-}
-
-interface PaginationProps {
-  page: number;
-  totalPages: number;
-  pageSize: number;
-  total: number;
-  onPage: (p: number) => void;
-  /** Omit when the page size is not the user's to change (a server that fixes it):
-   *  the select is then not rendered at all, rather than rendered and inert. */
-  onPageSize?: (n: number) => void;
-  /** Over `dataTable` from `<UiKitProvider labels>`, over the English defaults. */
-  labels?: LabelOverride<DataTableLabels>;
-  /** For the page numbers and page-size options; falls back to the provider's. */
-  locale?: string;
-  /** `"compact"` for a pager under a compact {@link DataTable} (lenkbank's in-card
-   *  tables): a slimmer footer and page buttons, so the pager is not the tallest row
-   *  of a table that was made compact on purpose. */
-  density?: "comfortable" | "compact";
-}
-
-/**
- * How many page numbers flank the current one on the strip: ±2, and ±1 on a phone at
- * Large and Extra large (0.32.1, the 360 px Extra-large sweep; docs/text-size-
- * harmonization.md §4). At 150 % a number button is 42 px, and "‹ 1 2 3 … 494 ›" was
- * 312 px on a 360 px phone's 262; one neighbour fewer on each side saves two buttons.
- */
-const PAGE_WINDOW = 2;
-const PAGE_WINDOW_LARGE_PHONE = 1;
-
-/**
- * The strip's two parts (0.32.1, same sweep, §4 "nothing overflows"). The arrows keep
- * the ends; the numbers between them wrap, centred, when even the narrower window does
- * not fit — a middle page of a long list ("1 … 249 250 251 … 494") at Extra large, or at
- * Normal on a narrow phone, where the one-row strip ran past the screen. Where the
- * strip fits it is one row, as before.
- */
-const PAGE_STRIP = "flex min-w-0 max-w-full items-center gap-1";
-const PAGE_NUMBERS = "flex min-w-0 flex-wrap items-center justify-center gap-1";
-
-/**
- * The arrows at the ends of the strip are `aria-disabled`, not `disabled` (refactor audit
- * 2026-10-30, DSP-12): Next pressed onto the last page — or Previous onto the first —
- * is still the focused button, and a button that turns `disabled` drops the focus it
- * holds to `<body>`. JumpCalendar's arrows keep the same rule, and the table's
- * `isLoading` pager the same reason (`ServerPagination.isLoading`). Dimmed as before; a
- * press there does nothing.
- */
-const ARROW =
-  "rounded hover:bg-hover aria-disabled:cursor-not-allowed aria-disabled:opacity-40 aria-disabled:hover:bg-transparent";
-
-/** Footer for {@link DataTable}: range summary, page-size select, and a
- *  windowed page-number strip (first/last + ±2 around the current page, ±1 on a phone
- *  at Large — see {@link PAGE_WINDOW}). */
-export function Pagination({
-  page,
-  totalPages,
-  pageSize,
-  total,
-  onPage,
-  onPageSize,
-  labels: labelsProp,
-  locale: localeProp,
-  density = "comfortable",
-}: PaginationProps) {
-  const compact = density === "compact";
-  // prop > provider > English, like every other kit component. This defaulted straight
-  // to the English object, so a standalone pager under a translated provider still
-  // said "Rows per page" — only the pager INSIDE a DataTable was translated, because
-  // the table resolved the provider's labels and handed them down.
-  const labels = useKitLabels("dataTable", DEFAULT_DATA_TABLE_LABELS, labelsProp);
-  const locale = useKitLocale(localeProp);
-  // The bare numbers on the strip and in the select are text too: `String(n)` is
-  // always ASCII digits, which is wrong for a locale that writes its own. The range
-  // summary is not formatted here — `pageRange` / `rowCount` take NUMBERS so the
-  // translation can format them itself, alongside the words around them.
-  const num = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const large = useLargeText();
-  const phone = usePhoneLayout();
-  const radius = large && phone ? PAGE_WINDOW_LARGE_PHONE : PAGE_WINDOW;
-  const visible = useMemo(() => {
-    // Every page when that is no longer than the window would be (first, last, the
-    // current one, its neighbours and two ellipses).
-    if (totalPages <= 2 * radius + 3) return Array.from({ length: totalPages }, (_, i) => i);
-    const set = new Set<number>([0, totalPages - 1, page]);
-    for (let d = 1; d <= radius; d++) {
-      if (page - d >= 0) set.add(page - d);
-      if (page + d <= totalPages - 1) set.add(page + d);
-    }
-    return Array.from(set).sort((a, b) => a - b);
-  }, [page, totalPages, radius]);
-
-  const items: (number | "ellipsis")[] = [];
-  visible.forEach((p, idx) => {
-    if (idx > 0 && p - visible[idx - 1] > 1) items.push("ellipsis");
-    items.push(p);
-  });
-
-  return (
-    <div
-      data-density={density}
-      className={cn(
-        "flex flex-wrap items-center justify-between gap-2 border-t border-subtle text-xs text-secondary",
-        compact ? "px-2 py-1" : "px-3 py-2",
-      )}
-    >
-      <div className="flex items-center gap-2">
-        <span>
-          {/* No rows is a count, not a range: the range read "1–0 / 0" (round 0.34 BUG-14). */}
-          {pageSize === Infinity || total === 0
-            ? labels.rowCount(total)
-            : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total)}
-        </span>
-        {onPageSize && (
-          <select
-            value={pageSize === Infinity ? "all" : pageSize}
-            onChange={(e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value))}
-            className="rounded border border-subtle bg-surface px-1 py-0.5 text-xs"
-            aria-label={labels.pageSize}
-          >
-            {/* A `defaultPageSize` that is not one of the steps (keksdose's 5) is offered
-                too — a select whose value has no option shows its first one ("10"). */}
-            {sizeOptions(pageSize).map((n) => (
-              <option key={n} value={n}>
-                {num.format(n)}
-              </option>
-            ))}
-            <option value="all">{labels.pageSizeAll}</option>
-          </select>
-        )}
-      </div>
-      {pageSize !== Infinity && totalPages > 1 && (
-        <div data-slot="page-strip" className={PAGE_STRIP}>
-          <button
-            type="button"
-            onClick={() => {
-              if (page > 0) onPage(page - 1);
-            }}
-            aria-disabled={page === 0 || undefined}
-            className={cn(ARROW, compact ? "p-0.5" : "p-1")}
-            aria-label={labels.prevPage}
-          >
-            {/* "Previous" points back along the line — left in LTR, right in RTL. */}
-            <ChevronLeft className={cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4")} />
-          </button>
-          <div data-slot="page-numbers" className={PAGE_NUMBERS}>
-            {items.map((it, i) =>
-              it === "ellipsis" ? (
-                <span key={`e${i}`} className="px-1 text-placeholder">
-                  …
-                </span>
-              ) : (
-                <button
-                  key={it}
-                  type="button"
-                  onClick={() => onPage(it)}
-                  // Which page you are on is carried only by a background colour
-                  // otherwise, and the strip is a row of bare numbers with nothing
-                  // else to tell them apart.
-                  aria-current={it === page ? "page" : undefined}
-                  className={cn(
-                    "rounded",
-                    compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
-                    it === page ? "bg-inverse text-inverse" : "hover:bg-hover",
-                  )}
-                >
-                  {num.format(it + 1)}
-                </button>
-              ),
-            )}
-          </div>
-          <button
-            type="button"
-            onClick={() => {
-              if (page < totalPages - 1) onPage(page + 1);
-            }}
-            aria-disabled={page >= totalPages - 1 || undefined}
-            className={cn(ARROW, compact ? "p-0.5" : "p-1")}
-            aria-label={labels.nextPage}
-          >
-            <ChevronRight className={cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4")} />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/data-table-resize.ts

@@ -1,188 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { Dispatch, SetStateAction } from "react";
-import { isRtl } from "../lib/direction";
-import type { DataTableColumn } from "./data-table";
-
-// DataTable's column resize and auto-size. Moved out of data-table.tsx whole (refactor
-// audit 2026-10, MOD-3 step 2): what it needs from the table is the header cells, the
-// widths and their setter, and which columns are shown — nothing else.
-
-/** A column resize in flight. Held in a ref rather than in state: the live width is
- *  written straight onto the column's cells, so a drag costs zero renders and the
- *  one `setWidths` happens when the pointer comes up. */
-interface Resize {
-  key: string;
-  pointerId: number;
-  startX: number;
-  startWidth: number;
-  /** +1 when a drag to the right widens the column, -1 in a right-to-left table,
-   *  where the handle sits on the column's LEFT edge and widening is a drag left. */
-  sign: 1 | -1;
-  /** What React last rendered this column at, so a CANCELLED drag can put the header
-   *  back — React cannot, it never saw the inline width the drag wrote. */
-  hadWidth: number | undefined;
-  /** The header and the body cells under it, collected ONCE when the drag starts.
-   *  A `<th>` alone cannot shrink a column whose `<td>`s already carry a pinned
-   *  width — and nothing re-renders during a drag, so the list cannot go stale. */
-  cells: HTMLElement[];
-  width: number;
-  /** A press with no drag in it is not a resize — the handle is also the
-   *  double-click target that CLEARS a width, and committing the header's current
-   *  size on the way past would pin every column the user ever brushed. */
-  moved: boolean;
-}
-
-/**
- * The resize handles' pointer handlers, and the column panel's "Auto-size".
- *
- * Pointer events with capture, rather than a `mousemove`/`mouseup` pair on `window`.
- * Three defects in one eleven-line handler (audit 2026-09-22):
- *
- *  * a `setWidths` per `mousemove` re-rendered every row of the table on every pixel
- *    of the drag — on a 500-row table that is the whole body, sixty times a second;
- *  * the two `window` listeners were added from inside an event handler, so nothing
- *    removed them if the table unmounted mid-drag (the row beneath opens a route),
- *    and `document.body.style` stayed at `user-select: none; cursor: col-resize` for
- *    the rest of the session — the whole page unselectable, with the wrong cursor;
- *  * `mousedown` is a mouse. Under a finger the handle did nothing at all.
- *
- * `setPointerCapture` answers all three: the handle itself receives every move and
- * the terminating `pointerup`/`pointercancel` wherever the pointer travels, so there
- * is nothing global to leak, and a touch drag works because a finger is a pointer.
- * The live width is written straight onto the column's own cells — the same three
- * properties the render sets, so the drag and the commit cannot disagree — and
- * `setWidths` is called once, when the drag ends.
- */
-export function useColumnResize<T>({
-  headRefs,
-  widths,
-  setWidths,
-  columns,
-  hiddenCols,
-}: {
-  /** The header cells by column key, as the `<th>`s' ref callbacks fill it. */
-  headRefs: Map<string, HTMLTableCellElement>;
-  /** The widths React renders the columns at. */
-  widths: Record<string, number>;
-  setWidths: Dispatch<SetStateAction<Record<string, number>>>;
-  columns: readonly DataTableColumn<T>[];
-  hiddenCols: Set<string>;
-}) {
-  const resizing = useRef<Resize | null>(null);
-
-  /** Every cell in one column, header first, totals row included. `data-col` rather than a cell index:
-   *  an expanded row holds a single `colSpan` cell, so the nth `<td>` of a row is
-   *  not reliably the nth column. */
-  const columnCells = (key: string): HTMLElement[] => {
-    const th = headRefs.get(key);
-    if (!th) return [];
-    const table = th.closest("table");
-    if (!table) return [th];
-    return [
-      th,
-      ...Array.from(table.querySelectorAll<HTMLElement>("tbody [data-col], tfoot [data-col]")).filter(
-        (el) => el.dataset.col === key,
-      ),
-    ];
-  };
-
-  const applyLiveWidth = (cells: HTMLElement[], width: number | undefined) => {
-    const px = width == null ? "" : `${width}px`;
-    for (const el of cells) {
-      el.style.width = px;
-      el.style.minWidth = px;
-      el.style.maxWidth = px;
-    }
-  };
-
-  const releaseResizeChrome = (handle: Element, pointerId: number) => {
-    document.body.style.userSelect = "";
-    document.body.style.cursor = "";
-    // Optional calls: jsdom implements neither, and the handlers sit on the handle
-    // itself, so a run without capture behaves the same for anything that stays
-    // inside the element.
-    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture?.(pointerId);
-  };
-
-  const startResize = (e: React.PointerEvent<HTMLElement>, key: string) => {
-    // Secondary buttons open menus; only a primary press starts a drag.
-    if (e.button !== 0) return;
-    e.preventDefault();
-    e.stopPropagation();
-    const th = headRefs.get(key);
-    const startWidth = th?.getBoundingClientRect().width ?? 100;
-    resizing.current = {
-      key,
-      pointerId: e.pointerId,
-      startX: e.clientX,
-      startWidth,
-      sign: isRtl(e.currentTarget) ? -1 : 1,
-      hadWidth: widths[key],
-      cells: columnCells(key),
-      width: startWidth,
-      moved: false,
-    };
-    e.currentTarget.setPointerCapture?.(e.pointerId);
-    document.body.style.userSelect = "none";
-    document.body.style.cursor = "col-resize";
-  };
-
-  const moveResize = (e: React.PointerEvent<HTMLElement>) => {
-    const drag = resizing.current;
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    drag.width = Math.max(40, Math.round(drag.startWidth + drag.sign * (e.clientX - drag.startX)));
-    drag.moved = true;
-    applyLiveWidth(drag.cells, drag.width);
-  };
-
-  const finishResize = (e: React.PointerEvent<HTMLElement>, commit: boolean) => {
-    const drag = resizing.current;
-    // Before the early return: the page gets its selection and its cursor back even
-    // for a pointer we were not tracking.
-    releaseResizeChrome(e.currentTarget, e.pointerId);
-    if (!drag || drag.pointerId !== e.pointerId) return;
-    resizing.current = null;
-    if (commit && drag.moved) {
-      setWidths((w) => ({ ...w, [drag.key]: drag.width }));
-      return;
-    }
-    // Cancelled — the browser took the pointer for a system gesture — or the press
-    // never became a drag. Either way the column goes back to the width React last
-    // rendered it at, which nothing else can do: the inline width the drag wrote is
-    // invisible to React, so a re-render with an unchanged `widths` would keep it.
-    applyLiveWidth(drag.cells, drag.hadWidth);
-  };
-
-  // The last exit path. A table that unmounts mid-drag takes the handle, and with it
-  // every handler above, out of the document — this is the only place left to hand the
-  // page back its text selection and its cursor.
-  useEffect(
-    () => () => {
-      if (!resizing.current) return;
-      resizing.current = null;
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    },
-    [],
-  );
-
-  const autoSizeAll = () => {
-    // Clear widths so the table reflows to natural sizes, then snapshot each
-    // column's width and write it back — except for the last visible column,
-    // which is left unconstrained so it absorbs any remaining horizontal space.
-    setWidths({});
-    requestAnimationFrame(() => {
-      const next: Record<string, number> = {};
-      const cols = columns.filter((c) => !hiddenCols.has(c.key));
-      cols.forEach((col, idx) => {
-        // A `grow` column takes the rest by design: pinning it would undo that (0.48).
-        if (idx === cols.length - 1 || col.grow) return;
-        const th = headRefs.get(col.key);
-        if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
-      });
-      setWidths(next);
-    });
-  };
-
-  return { startResize, moveResize, finishResize, autoSizeAll };
-}

package/src/components/data-table-row-actions.tsx

@@ -1,302 +0,0 @@
-import { isValidElement, useCallback, useMemo } from "react";
-import type { ReactNode } from "react";
-import { Pencil, Trash2 } from "lucide-react";
-import { RowActions, type RowAction, type RowActionTone } from "./row-actions";
-import type { SwipeAction } from "./swipeable-row";
-import type { DataTableLabels } from "./data-table-labels";
-import type {
-  DataTableColumn,
-  DataTableDensity,
-  DataTableDesktopSwipeActions,
-  DataTableProps,
-  DataTableRowAction,
-  MobileSwipeActions,
-} from "./data-table";
-
-// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and
-// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit
-// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.
-
-/** The actions column's key. Not a column a caller declares, so it is kept out of the
- *  column-settings panel. */
-export const ROW_ACTIONS_KEY = "__rowActions";
-
-/** The key of the column derived from `mobileSwipeActions` (0.46, dev#598) — the
- *  table's own too. */
-export const SWIPE_ACTIONS_KEY = "__swipeActions";
-
-/** A column the TABLE adds, not the caller: out of the column settings and the count,
- *  never resized, never the totals row's header. */
-export function isTableOwnColumn(key: string): boolean {
-  return key === ROW_ACTIONS_KEY || key === SWIPE_ACTIONS_KEY;
-}
-
-/**
- * An actions column's heading (0.46.1, keksdose dev#598 rework — Marcel: a VISIBLE
- * "Actions" heading on every table with an actions column): the caller's node, else the
- * word on screen; `false` is the pre-0.46.1 heading, a screen reader's name only.
- */
-export function actionsHeading(header: ReactNode | false | undefined, word: string): ReactNode {
-  if (header === false) return <span className="sr-only">{word}</span>;
-  return header ?? word;
-}
-
-/** A curtain's tone, as an icon button's (keksdose's `toneOf`): only the tones that MEAN
- *  something on a quiet icon carry over; a status colour, a hue or an app's `paint` stays
- *  on the curtain and reads muted. */
-function swipeTone(action: SwipeAction): RowActionTone {
-  switch (action.tone) {
-    case "danger":
-    case "warning":
-    case "info":
-      return action.tone;
-    default:
-      return "muted";
-  }
-}
-
-/**
- * A row's swipe plan as desktop row actions (dev#598) — what DataTable's
- * `desktopSwipeActions` column draws, for an app that builds its own actions column (or
- * a `RowActions` outside a table) from the same `mobileSwipeActions` plan, so the two
- * cannot drift (public since 0.46.1, keksdose N3).
- *
- * `end` then `start` — the physical `right` / `left` only where the logical side is
- * missing, as the card reads them — each action once, told apart by its `id`, else by its
- * label (two stages with one label would be one button twice). Each button runs the
- * swipe's own `onCommit` — with no confirmation of the kit's (`confirm: false`), as the
- * swipe has none; a swipe's `danger` / `warning` / `info` tone carries over, any
- * other reads `muted`. `options.omit` leaves an action out, `options.commit` gives it a
- * `CommitScope` (see {@link DataTableDesktopSwipeActions}). A `null` plan is `[]`.
- *
- *     <RowActions actions={swipePlanRowActions(plan(row), row, { omit })} name={row.title} />
- */
-export function swipePlanRowActions<T>(
-  plan: MobileSwipeActions | null | undefined,
-  row: T,
-  options: Pick<DataTableDesktopSwipeActions<T>, "omit" | "commit"> = {},
-): RowAction[] {
-  if (!plan) return [];
-  const out: RowAction[] = [];
-  const seen = new Set<string>();
-  for (const action of [...(plan.end ?? plan.right ?? []), ...(plan.start ?? plan.left ?? [])]) {
-    const key = action.id ?? action.label;
-    if (seen.has(key)) continue;
-    seen.add(key);
-    if (options.omit?.(action, row)) continue;
-    const commit = typeof options.commit === "function" ? options.commit(action, row) : options.commit;
-    out.push({
-      key,
-      label: action.label,
-      icon: isValidElement(action.icon) ? (
-        action.icon
-      ) : action.icon != null && action.icon !== false ? (
-        <>{action.icon}</>
-      ) : undefined,
-      tone: swipeTone(action),
-      commit,
-      // A swipe commits without the kit asking (the plan's `onCommit` asks, as keksdose's
-      // does), so its button does not ask twice (0.49 KIT-12); a danger one still sits in
-      // the row's menu.
-      confirm: false,
-      onSelect: action.onCommit,
-    });
-  }
-  return out;
-}
-
-interface ResolvedRowAction<T> {
-  key: string;
-  label: string;
-  icon: ReactNode;
-  tone: "default" | "danger";
-  swipe: "start" | "end" | false;
-  action: DataTableRowAction<T>;
-}
-
-function resolveRowAction<T>(
-  action: DataTableRowAction<T>,
-  index: number,
-  labels: DataTableLabels,
-): ResolvedRowAction<T> {
-  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
-  return {
-    key: action.kind ?? `${index}:${action.label ?? ""}`,
-    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
-    icon: action.icon ?? (action.kind === "edit" ? <Pencil /> : action.kind === "delete" ? <Trash2 /> : null),
-    tone,
-    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
-    action,
-  };
-}
-
-/** Ask, then act. */
-async function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {
-  if (action.confirm && !(await action.confirm(row))) return;
-  action.onAction(row);
-}
-
-/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a
- *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */
-function toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {
-  return {
-    key: a.key,
-    label: a.label,
-    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,
-    tone: a.tone,
-    disabledReason: a.action.disabledReason?.(row),
-    // The table's own `confirm` asks in `runRowAction`; RowActions' default question
-    // (0.49 KIT-12) is for a delete that brought none.
-    confirm: a.action.confirm ? false : undefined,
-    onSelect: () => void runRowAction(a.action, row),
-  };
-}
-
-/**
- * The caller's columns with the actions column appended, and the same actions as a
- * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes
- * `mobileSwipeActions`). Without `rowActions` the columns come back as given.
- *
- * The actions column is appended to the caller's columns rather than drawn as a
- * second special case beside the selection column: it then gets the cell padding,
- * the widths and the phone rules (`mobileHidden`) every other column gets.
- */
-export function useRowActionColumn<T>({
-  columns: columnsProp,
-  rowActions,
-  rowActionsHeader,
-  rowName,
-  labels,
-  density,
-  mobileSwipeActions,
-  desktopSwipeActions,
-}: {
-  columns: readonly DataTableColumn<T>[];
-  rowActions: DataTableProps<T>["rowActions"];
-  rowActionsHeader?: DataTableProps<T>["rowActionsHeader"];
-  rowName: DataTableProps<T>["rowName"];
-  labels: DataTableLabels;
-  density: DataTableDensity;
-  mobileSwipeActions?: DataTableProps<T>["mobileSwipeActions"];
-  desktopSwipeActions?: DataTableProps<T>["desktopSwipeActions"];
-}): {
-  columns: readonly DataTableColumn<T>[];
-  swipesFromActions: (row: T) => MobileSwipeActions | null;
-} {
-  const rowActionsFor = useCallback(
-    (row: T): ResolvedRowAction<T>[] =>
-      rowActions
-        ? (typeof rowActions === "function" ? rowActions(row) : rowActions)
-            .filter((a) => !a.hidden?.(row))
-            .map((a, i) => resolveRowAction(a, i, labels))
-        : [],
-    [rowActions, labels],
-  );
-  // dev#598: the desktop half of the caller's swipes. On by default, except beside
-  // `rowActions`, whose column already is the desktop's (and whose swipes these usually
-  // are). The options object is often a fresh literal per render; its parts are the deps.
-  const swipeOptions = typeof desktopSwipeActions === "object" ? desktopSwipeActions : undefined;
-  const swipeColumnOn =
-    !!mobileSwipeActions && (desktopSwipeActions === undefined ? !rowActions : desktopSwipeActions !== false);
-  const swipeOmit = swipeOptions?.omit;
-  const swipeName = swipeOptions?.name;
-  const swipeCollapse = swipeOptions?.collapse;
-  const swipeCommit = swipeOptions?.commit;
-  const swipeHeader = swipeOptions?.header;
-  const swipeColumn = useMemo<DataTableColumn<T> | null>(
-    () =>
-      swipeColumnOn
-        ? {
-            key: SWIPE_ACTIONS_KEY,
-            header: actionsHeading(swipeHeader, labels.actions),
-            cell: (row) => (
-              <RowActions
-                actions={swipePlanRowActions(mobileSwipeActions!(row), row, { omit: swipeOmit, commit: swipeCommit })}
-                name={(swipeName ?? rowName)?.(row)}
-                collapse={swipeCollapse}
-                size={density === "compact" ? "2xs" : "xs"}
-                // The last column's tooltips open toward the row's start.
-                tooltipSide="start"
-                labels={{ actions: labels.actions }}
-                className="justify-end"
-              />
-            ),
-            className: "w-px whitespace-nowrap text-end",
-            // The heading over the buttons, at the row's end (0.46.1).
-            headClassName: "w-px text-end",
-            // On a phone the same actions are the card's swipes.
-            mobileHidden: true,
-            noRowLink: true,
-          }
-        : null,
-    [
-      swipeColumnOn,
-      mobileSwipeActions,
-      swipeOmit,
-      swipeCommit,
-      swipeName,
-      rowName,
-      swipeCollapse,
-      swipeHeader,
-      density,
-      labels.actions,
-    ],
-  );
-  const actionColumns = useMemo<readonly DataTableColumn<T>[]>(
-    () =>
-      rowActions
-        ? [
-            ...columnsProp,
-            {
-              key: ROW_ACTIONS_KEY,
-              header: actionsHeading(rowActionsHeader, labels.actions),
-              // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
-              // menu at Large once there are two — every label at once does not fit a
-              // row. Each control stops its own click: the row's handler already skips
-              // its controls, and this is for the caller who wraps the table in a
-              // clickable element of their own.
-              cell: (row) => (
-                <RowActions
-                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}
-                  name={rowName?.(row)}
-                  size={density === "compact" ? "2xs" : "xs"}
-                  labels={{ actions: labels.actions }}
-                  className="justify-end"
-                />
-              ),
-              className: "w-px whitespace-nowrap text-end",
-              headClassName: "w-px text-end",
-              // On a phone the same actions are the card's swipes.
-              mobileHidden: true,
-              noRowLink: true,
-            },
-          ]
-        : columnsProp,
-    [columnsProp, rowActions, rowActionsHeader, rowActionsFor, rowName, labels.actions, density],
-  );
-  const columns = useMemo(
-    () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),
-    [actionColumns, swipeColumn],
-  );
-  // A stable function (0.48.2): the phone cards compare it by identity.
-  const swipesFromActions = useCallback(
-    (row: T): MobileSwipeActions | null => {
-      const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
-      if (!swipes.length) return null;
-      const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({
-        label: a.label,
-        icon: a.icon,
-        onCommit: () => void runRowAction(a.action, row),
-        // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill
-        // and that fill's foreground armed (0.33).
-        tone: a.tone === "danger" ? "danger" : "brand",
-      });
-      return {
-        start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
-        end: swipes.filter((a) => a.swipe === "end").map(toSwipe),
-      };
-    },
-    [rowActionsFor],
-  );
-  return { columns, swipesFromActions };
-}