@eifi1/ui-kit 0.48.1 → 0.49.0

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

@@ -15,7 +15,9 @@ import type { DataTableColumn } from "./data-table";
 //   room for them (its need re-measured, plus the column's own header width from when
 //   it was left out), so narrower content (a filter, another page) counts as much as a
 //   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a
-//   narrower window, the Columns drawer and Large text all count the same.
+//   narrower window, the Columns drawer and Large text all count the same. A column
+//   whose return the very next measure undoes stays out until the table has more room
+//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`).
 
 /** The least a `grow` column keeps before the table starts leaving columns out: about
  *  a sentence of a title. In rem, so Large text asks for more. */
@@ -65,6 +67,7 @@ export function useColumnFit<T>({
   headRefs,
   scroller,
   enabled,
+  content,
 }: {
   columns: DataTableColumn<T>[];
   /** The user's hidden columns: never candidates (they are out already). */
@@ -74,6 +77,13 @@ export function useColumnFit<T>({
   scroller: () => HTMLElement | null;
   /** The wide layout. On a phone (the card list) nothing is left out for width. */
   enabled: boolean;
+  /**
+   * What can change the columns' widths besides the scroller (0.48.2): the rows on
+   * screen, the columns, the stored widths, the text size. Compared item by item after
+   * each render, and the table is measured only when one changed — a selection tick no
+   * longer forces a layout of the whole table. Without it, every render measures.
+   */
+  content?: readonly unknown[];
 }): {
   /** The columns left out for width now — empty while off. */
   autoHidden: Set<string>;
@@ -86,6 +96,13 @@ export function useColumnFit<T>({
   // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the
   // whole table's need at hide time, which went stale when the content narrowed).
   const ownWidth = useRef(new Map<string, number>());
+  // A column whose return the very next measure undid, at the same scroller width: the
+  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out
+  // until the table has more. Dropped once the column is no longer left out for width.
+  const stuck = useRef(new Map<string, number>());
+  // What the last measure brought back, each column with the room it had then, and at
+  // which scroller width: read (and cleared) by the measure right after it.
+  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);
 
   const hasFit = columns.some((c) => c.fitPriority != null);
   const active = enabled && hasFit;
@@ -110,6 +127,10 @@ export function useColumnFit<T>({
 
   const measure = useCallback(() => {
     const { order, current, growKey, active, scroller } = latest.current;
+    // Only the measure right after a bring-back can undo it.
+    const flip = lastShown.current;
+    lastShown.current = null;
+    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);
     const el = scroller();
     if (!active || !el) return;
     const table = el.querySelector("table");
@@ -142,25 +163,54 @@ export function useColumnFit<T>({
         need -= w;
         next.push(col.key);
       }
-      if (next.length !== current.length) setHidden(next);
+      if (next.length === current.length) return;
+      // The last measure brought these back at this same width, and the table cannot
+      // hold them: their header width fell short of what they cost drawn (see below).
+      if (flip && Math.abs(flip.avail - avail) <= 0.5)
+        for (const k of next.slice(current.length)) {
+          const room = flip.rooms.get(k);
+          if (room != null) stuck.current.set(k, room);
+        }
+      setHidden(next);
       return;
     }
     // Bring back, the last left out first, while the table as it is now has room for
-    // them. Should the column have grown since (wider content), the next measure leaves
-    // it out again before paint and records its new width, so it cannot flicker.
+    // them by their recorded header width. A column that costs more drawn than that is
+    // left out again by the next measure, before paint. That alone does not settle it:
+    // the re-hide records its header's width again, and the header can measure the same
+    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the
+    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's
+    // update limit (#185). So a column whose return the next measure undid, at the same
+    // scroller width, waits for more room than it had then: a wider scroller or narrower
+    // content. Whatever the error in its width, that is one invisible flip per room it is
+    // tried at.
     let n = current.length;
+    const rooms = new Map<string, number>();
     while (n > 0) {
-      const w = ownWidth.current.get(current[n - 1]);
+      const k = current[n - 1];
+      const w = ownWidth.current.get(k);
       if (w == null || need + w > avail + 0.5) break;
+      const room = stuck.current.get(k);
+      if (room != null && avail - need <= room + 0.5) break;
+      rooms.set(k, avail - need);
       need += w;
       n--;
     }
-    if (n !== current.length) setHidden(current.slice(0, n));
+    if (n === current.length) return;
+    lastShown.current = { avail, rooms };
+    setHidden(current.slice(0, n));
   }, [headRefs]);
 
-  // After every render: rows, a filter or a page can widen a column as much as a resize.
-  // Before paint, so a column the table cannot hold is never drawn first.
+  // After a render that changed what is drawn: rows, a filter or a page can widen a
+  // column as much as a resize. Before paint, so a column the table cannot hold is never
+  // drawn first. A render that changed none of it (a ticked box, a focused row) skips the
+  // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).
+  const lastContent = useRef<readonly unknown[] | null>(null);
   useLayoutEffect(() => {
+    const now = content ? [...content, order, current, growKey, active] : null;
+    const prev = lastContent.current;
+    lastContent.current = now;
+    if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;
     measure();
   });
 

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

@@ -94,19 +94,27 @@ export function useGroupBandTops(
   useLayoutEffect(() => {
     const table = tableRef.current;
     if (!enabled || !table) return;
-    const parts = [
+    // Looked up afresh on each measure: under `virtualize` (0.48.2) the first band can
+    // leave the DOM as the rows scroll, and a detached cell measures 0 — the bands would
+    // stack on one another. A band missing for now keeps the height it had.
+    const parts = () => [
       table.tHead,
       table.querySelector<HTMLElement>("[data-leading-row='sticky']"),
       table.querySelector<HTMLElement>("th[data-group-band='1']"),
     ];
+    let bandHeight = 0;
     const measure = () => {
-      const [head, lead, band] = parts.map((el) => (el ? el.getBoundingClientRect().height : 0));
+      const [headEl, leadEl, bandEl] = parts();
+      const head = headEl ? headEl.getBoundingClientRect().height : 0;
+      const lead = leadEl ? leadEl.getBoundingClientRect().height : 0;
+      if (bandEl) bandHeight = bandEl.getBoundingClientRect().height;
+      const band = bandHeight;
       setTops((prev) => (prev[0] === head + lead && prev[1] === head + lead + band ? prev : [head + lead, head + lead + band]));
     };
     measure();
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
-    for (const el of parts) if (el) observer.observe(el);
+    for (const el of parts()) if (el) observer.observe(el);
     return () => observer.disconnect();
   }, [tableRef, enabled, signature]);
   return tops;
@@ -127,6 +135,7 @@ export function DataTableGroupBand({
   compact,
   label,
   end,
+  ariaRowIndex,
 }: {
   level: 1 | 2;
   colSpan: number;
@@ -134,9 +143,11 @@ export function DataTableGroupBand({
   compact: boolean;
   label: ReactNode;
   end: ReactNode;
+  /** Under `virtualize` (0.48.2). */
+  ariaRowIndex?: number;
 }) {
   return (
-    <tr data-group-row={level}>
+    <tr data-group-row={level} aria-rowindex={ariaRowIndex}>
       <th
         scope="rowgroup"
         colSpan={colSpan}

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

@@ -45,6 +45,9 @@ export function DataTableHead<T>({
   startResize,
   moveResize,
   finishResize,
+  ariaRowIndex,
+  lockedWidths,
+  selectionLockKey,
 }: {
   visibleColumns: DataTableColumn<T>[];
   selection: DataTableProps<T>["selection"];
@@ -71,13 +74,25 @@ export function DataTableHead<T>({
   startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;
   moveResize: (e: React.PointerEvent<HTMLElement>) => void;
   finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;
+  /** Under `virtualize` (0.48.2): 1. */
+  ariaRowIndex?: number;
+  /** Under `virtualize` (0.48.2): each column's locked width, as the header cell's
+   *  `min-width` — a `<col>` width alone gave way to a `grow` column's 100%. */
+  lockedWidths?: Record<string, number> | null;
+  /** The selection column's key in `lockedWidths`. */
+  selectionLockKey?: string;
 }) {
   return (
     <thead className="bg-surface-2 text-secondary">
-      <tr className="text-start">
+      <tr className="text-start" aria-rowindex={ariaRowIndex}>
         {selection && (
           <th
             scope="col"
+            style={
+              selectionLockKey && lockedWidths?.[selectionLockKey] !== undefined
+                ? { minWidth: lockedWidths[selectionLockKey] }
+                : undefined
+            }
             className={cn(
               "sticky top-0 z-10 bg-surface-2 align-middle backdrop-blur-sm",
               compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2",
@@ -140,7 +155,15 @@ export function DataTableHead<T>({
                     : "none"
                   : undefined
               }
-              style={ownHead.style || pinnedHead ? { ...ownHead.style, ...pinnedHead } : undefined}
+              style={
+                ownHead.style || pinnedHead || lockedWidths?.[col.key] !== undefined
+                  ? {
+                      ...ownHead.style,
+                      ...(lockedWidths?.[col.key] !== undefined ? { minWidth: lockedWidths[col.key] } : null),
+                      ...pinnedHead,
+                    }
+                  : undefined
+              }
               className={cn(
                 "relative font-medium align-middle whitespace-nowrap",
                 compact ? "px-2 py-1" : "px-3 py-2",

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

@@ -16,10 +16,13 @@ import { cn } from "../lib/cn";
 export function DataTableLeadingRow({
   colSpan,
   sticky = false,
+  ariaRowIndex,
   children,
 }: {
   colSpan: number;
   sticky?: boolean;
+  /** Under `virtualize` (0.48.2). */
+  ariaRowIndex?: number;
   children: ReactNode;
 }) {
   const cellRef = useRef<HTMLTableCellElement>(null);
@@ -36,7 +39,7 @@ export function DataTableLeadingRow({
     return () => observer.disconnect();
   }, [sticky]);
   return (
-    <tr className={cn(!sticky && "border-t border-subtle")}>
+    <tr aria-rowindex={ariaRowIndex} className={cn(!sticky && "border-t border-subtle")}>
       <td
         ref={cellRef}
         colSpan={colSpan}

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

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from "react";
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from "lucide-react";
 import { FOCUS_RING } from "./focus-ring";
@@ -13,6 +13,9 @@ import { FilterPopover } from "./data-table-filter-popover";
 import { SwipeableRow, type SwipeAction } from "./swipeable-row";
 import { DialogFrame } from "./dialog-frame";
 import { Checkbox } from "./checkbox";
+import { Chip } from "./chip";
+import { BooleanMark } from "./data-table-cells";
+import { EMPTY_FORMATTED_VALUE } from "../lib/format";
 import { useLongPress } from "../hooks/use-long-press";
 import type { DataTableLabels } from "./data-table-labels";
 import { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from "./data-table-shared";
@@ -70,19 +73,21 @@ const CARD_NO_TRUNCATE =
  * header's `sr-only` text (an actions column's), as every kit container must.
  */
 export function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {
+  const fields = filledFields(columns, row);
+  if (fields.length === 0) return null;
   return (
     <dl
       data-card-fields="stacked"
       className={cn("relative flex min-w-0 flex-col", compact ? "gap-1.5 text-xs" : "gap-2.5 text-sm", CARD_NO_TRUNCATE)}
     >
-      {columns.map((col) => (
+      {fields.map(({ col, value }) => (
         <div key={col.key} className="min-w-0">
           <dt className="text-xs uppercase tracking-wide text-muted">{col.header}</dt>
           <dd
             {...dataAttrsOf(col.cellProps?.(row))}
             className="mt-0.5 min-w-0 break-words text-secondary"
           >
-            {col.cell(row)}
+            {value}
           </dd>
         </div>
       ))}
@@ -90,6 +95,112 @@ export function StackedFields<T>({ columns, row, compact }: { columns: DataTable
   );
 }
 
+/** The most fields the default phone card shows under its title (0.49 KIT-7). */
+export const MOBILE_CARD_FIELDS = 3;
+
+/**
+ * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,
+ * not `mobileHidden`): the title — `mobile: "primary"` or `mobilePrimary`, else the
+ * first that is not a status — the `role: "status"` columns for beside it, at most
+ * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: "secondary"` when any is,
+ * else the first after the title, and the `role: "actions"` columns, drawn after the
+ * fields. An actions column is never the title and never one of the fields, so the
+ * fields and the marks leave it on the card; only `mobileHidden` / `mobile: "hidden"`
+ * (which keep it out of `columns`) remove it.
+ */
+export function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {
+  primary: DataTableColumn<T> | null;
+  status: DataTableColumn<T>[];
+  fields: DataTableColumn<T>[];
+  actions: DataTableColumn<T>[];
+} {
+  const titles = columns.filter((c) => c.role !== "actions");
+  const primary =
+    titles.find((c) => c.mobile === "primary") ??
+    titles.find((c) => c.mobilePrimary) ??
+    titles.find((c) => c.role !== "status") ??
+    titles[0] ??
+    null;
+  const status = columns.filter((c) => c !== primary && c.role === "status");
+  const actions = columns.filter((c) => c.role === "actions");
+  const rest = titles.filter((c) => c !== primary && c.role !== "status");
+  const marked = rest.filter((c) => c.mobile === "secondary");
+  return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };
+}
+
+/** A column whose cell keeps its own clicks — `noRowLink`, or `role: "actions"`: no row
+ *  link may wrap it, and a card that draws it is not a link itself. */
+export function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {
+  return !!col.noRowLink || col.role === "actions";
+}
+
+/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a
+ *  production one, never under vitest. Read per call so a test can switch it on. */
+function devWarnings(): boolean {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+
+/**
+ * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`
+ * column past its three fields. Such a column holds the cell's own controls — a per-row
+ * delete, a link — and the card leaves it out with them, so on a phone the action is
+ * gone. Never for a `role: "actions"` column, which the card draws after its fields.
+ * Read off the declared `columns` (not the ones a person or the width hid), and only
+ * while the table lets the card choose: `enabled` is false with a `mobileCard` or
+ * `mobileDetailsInRow` (the column is then in the opened row), and a column marked
+ * `mobile: "secondary"` means the app chose. Once per table and column key; `name`
+ * (the table's `storageKey` or `urlSync` prefix) says which table, else its title
+ * column does.
+ */
+export function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {
+  const warned = useRef<Set<string> | null>(null);
+  useEffect(() => {
+    if (!enabled || !devWarnings()) return;
+    const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== "hidden");
+    if (phone.some((c) => c.mobile === "secondary")) return;
+    const { primary, status, fields, actions } = mobileCardColumns(phone);
+    const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);
+    const table = name ? ` "${name}"` : primary ? ` (title column "${primary.key}")` : "";
+    warned.current ??= new Set();
+    for (const col of phone) {
+      if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;
+      warned.current.add(col.key);
+      console.warn(
+        `[ui-kit] DataTable${table}: column "${col.key}" (noRowLink) is past the phone card's three fields and ` +
+          'leaves the card — give it role: "actions" (drawn after the fields), or move its action to rowActions.',
+      );
+    }
+  }, [columns, enabled, name]);
+}
+
+/**
+ * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,
+ * a boolean (React draws neither), `""` or blank text, and the formatters' empty value
+ * "—" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.
+ * Any other element is never empty here — its output is the component's — so a column
+ * whose empty value should drop off the card returns `null` (or "—") from `cell` for it.
+ */
+export function isEmptyCell(value: ReactNode): boolean {
+  if (value === null || value === undefined || typeof value === "boolean") return true;
+  if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;
+  if (typeof value === "string") {
+    const text = value.trim();
+    return text === "" || text === EMPTY_FORMATTED_VALUE;
+  }
+  return false;
+}
+
+/** Each column's rendered cell, without the empty ones. */
+function filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {
+  return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));
+}
+
+/** A status column's value beside the card's title: text in a neutral chip, an element
+ *  (the app's own Chip or StatusDot) as it is. */
+function StatusChip({ value }: { value: ReactNode }) {
+  return typeof value === "string" || typeof value === "number" ? <Chip size="sm">{value}</Chip> : <>{value}</>;
+}
+
 // ---------- Phone sort control (keksdose K10) ----------
 
 /**
@@ -199,7 +310,11 @@ export interface MobileRowProps<T> {
   mobileCardLinkable: boolean;
   mobileCard: DataTableProps<T>["mobileCard"];
   mobilePrimaryCol: DataTableColumn<T> | null;
+  /** The `role: "status"` columns, drawn as chips beside the title (0.49 KIT-7). */
+  mobileStatusColumns: DataTableColumn<T>[];
   mobileSecondaryColumns: DataTableColumn<T>[];
+  /** The `role: "actions"` columns, drawn after the fields at the card's end (0.49 KIT-7). */
+  mobileActionColumns: DataTableColumn<T>[];
   mobileExpandAsDialog: boolean;
   compact: boolean;
   /** The text size is Large or Extra large (§4). */
@@ -236,7 +351,9 @@ export function MobileRow<T>({
   mobileCardLinkable,
   mobileCard,
   mobilePrimaryCol,
+  mobileStatusColumns,
   mobileSecondaryColumns,
+  mobileActionColumns,
   mobileExpandAsDialog,
   compact,
   large,
@@ -305,6 +422,11 @@ export function MobileRow<T>({
   // itself is the anchor, and routing it through `linkColumn` too would nest an
   // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so
   // exactly one anchor exists per row.
+  // The default card's filled fields and status values (0.49 KIT-7): an empty one
+  // gets no line. Not computed for a `mobileCard`, which draws its own.
+  const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);
+  const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);
+  const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);
   const cardInner = (
     <>
       {/* The card's own content keeps the column it always had; the chevron sits
@@ -323,24 +445,42 @@ export function MobileRow<T>({
           mobileCard(row)
         ) : (
           <>
-            {/* Only the `data-*` half of `cellProps` — see its note. */}
-            {mobilePrimaryCol && (
-              <div {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))} className="min-w-0 break-words font-medium">
-                {mobilePrimaryCol.cell(row)}
+            {/* Only the `data-*` half of `cellProps` — see its note. The title row
+                carries the status chips at its end (0.49 KIT-7). */}
+            {(mobilePrimaryCol || statuses.length > 0) && (
+              <div data-card-head="" className="flex min-w-0 items-start justify-between gap-2">
+                {mobilePrimaryCol && (
+                  <div
+                    {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}
+                    data-card-title=""
+                    className="min-w-0 flex-1 break-words font-medium"
+                  >
+                    {mobilePrimaryCol.cell(row)}
+                  </div>
+                )}
+                {statuses.length > 0 && (
+                  <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+                    {statuses.map(({ col, value }) => (
+                      <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status="" className="inline-flex">
+                        <StatusChip value={value} />
+                      </span>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
-            {mobileSecondaryColumns.length > 0 && large ? (
+            {fields.length > 0 && large ? (
               // §4: each label ABOVE its value at Large. Side by side, a label column
               // sized to the widest label leaves a value a sliver of a 240 px card.
               <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />
-            ) : mobileSecondaryColumns.length > 0 && (
+            ) : fields.length > 0 && (
               <dl
                 className={cn(
                   "grid grid-cols-[auto_1fr] gap-x-3",
                   compact ? "gap-y-0.5 text-xs" : "gap-y-1 text-sm",
                 )}
               >
-                {mobileSecondaryColumns.map((col) => (
+                {fields.map(({ col, value }) => (
                   <Fragment key={col.key}>
                     <dt className="text-xs uppercase tracking-wide text-muted self-center">
                       {col.header}
@@ -349,12 +489,23 @@ export function MobileRow<T>({
                       {...dataAttrsOf(col.cellProps?.(row))}
                       className="min-w-0 text-secondary self-center"
                     >
-                      {col.cell(row)}
+                      {value}
                     </dd>
                   </Fragment>
                 ))}
               </dl>
             )}
+            {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its
+                buttons keep their own clicks, and RowActions folds into "⋯" at Large. */}
+            {actionCells.length > 0 && (
+              <div data-card-actions="" className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+                {actionCells.map(({ col, value }) => (
+                  <div key={col.key} {...dataAttrsOf(col.cellProps?.(row))} className="flex min-w-0 justify-end">
+                    {value}
+                  </div>
+                ))}
+              </div>
+            )}
           </>
         )}
       </div>

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

@@ -64,7 +64,8 @@ function swipeTone(action: SwipeAction): RowActionTone {
  * `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`; a swipe's `danger` / `warning` / `info` tone carries over, any
+ * 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 `[]`.
  *
@@ -94,6 +95,10 @@ export function swipePlanRowActions<T>(
           : 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,
     });
   }
@@ -142,6 +147,9 @@ function toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {
     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),
   };
 }
@@ -272,7 +280,8 @@ export function useRowActionColumn<T>({
     () => (swipeColumn ? [...actionColumns, swipeColumn] : actionColumns),
     [actionColumns, swipeColumn],
   );
-  const swipesFromActions = (row: T): MobileSwipeActions | null => {
+  // 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 => ({
@@ -287,6 +296,6 @@ export function useRowActionColumn<T>({
       start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
       end: swipes.filter((a) => a.swipe === "end").map(toSwipe),
     };
-  };
+  }, [rowActionsFor]);
   return { columns, swipesFromActions };
 }