@eifi1/ui-kit 0.49.0 → 0.50.1

package/dist/components/data-table-mobile.js

@@ -31,7 +31,12 @@ function physicalSwipe(actions, dir) {
   };
 }
 const CARD_NO_TRUNCATE = "large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]";
-function StackedFields({ columns, row, compact }) {
+function StackedFields({
+  columns,
+  row,
+  compact,
+  liftOwnClicks = false
+}) {
   const fields = filledFields(columns, row);
   if (fields.length === 0) return null;
   return /* @__PURE__ */ jsx(
@@ -45,7 +50,7 @@ function StackedFields({ columns, row, compact }) {
           "dd",
           {
             ...dataAttrsOf(col.cellProps?.(row)),
-            className: "mt-0.5 min-w-0 break-words text-secondary",
+            className: cn("mt-0.5 min-w-0 break-words text-secondary", liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD),
             children: value
           }
         )
@@ -53,6 +58,9 @@ function StackedFields({ columns, row, compact }) {
     }
   );
 }
+const LIFTED_CELL = "relative z-[2]";
+const LIFTED_FIELD = cn(LIFTED_CELL, "w-fit max-w-full justify-self-start");
+const STRETCHED_RING = "has-[[data-card-link]:focus-visible]:ring-inset has-[[data-card-link]:focus-visible]:ring-focus has-[[data-card-link]:focus-visible]:ring-brand";
 const MOBILE_CARD_FIELDS = 3;
 function mobileCardColumns(columns) {
   const titles = columns.filter((c) => c.role !== "actions");
@@ -171,6 +179,7 @@ function MobileRow({
   swipeActionsFor,
   mobileDir,
   mobileCardLinkable,
+  mobileCardStretched,
   mobileCard,
   mobilePrimaryCol,
   mobileStatusColumns,
@@ -192,7 +201,8 @@ function MobileRow({
   const swipeActions = swipeActionsFor?.(row);
   const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;
   const swipeEnabled = !!swipe && !selecting;
-  const href = mobileCardLinkable ? rowHref?.(row) : void 0;
+  const stretched = mobileCardStretched && interactive && !selecting && !mobileCard && !!mobilePrimaryCol;
+  const href = mobileCardLinkable || stretched ? rowHref?.(row) : void 0;
   const cardClass = cn(
     "w-full text-start flex items-center",
     // §4: more room per row at Large — a taller row is a bigger tap target too.
@@ -211,7 +221,11 @@ function MobileRow({
     // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
     // keeps the fill and the squeeze above; an outline on every tap of a long list would
     // be louder than the acknowledgement it replaces.
-    (interactive || selecting) && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
+    (interactive || selecting) && !stretched && cn("[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset", FOCUS_RING),
+    // A stretched card (0.50 K4) draws the same frame, inside the card, while its TITLE
+    // control has the keyboard: the ring outlines the whole tap target, as on every other
+    // card, not the title's line alone. The own-click cells draw their own.
+    stretched && cn("relative [-webkit-tap-highlight-color:transparent]", STRETCHED_RING),
     selecting && "cursor-pointer",
     select?.selected && selecting && "bg-brand-soft",
     // A 500 ms hold would otherwise start a text selection, and iOS's link callout —
@@ -219,6 +233,35 @@ function MobileRow({
     // is not selectable on a phone where the table offers selection.
     select && "select-none [-webkit-touch-callout:none]"
   );
+  const stretchedClass = "block w-full text-start focus-visible:outline-none after:absolute after:inset-0 after:z-[1] after:content-['']";
+  const titleControl = (title) => href ? /* @__PURE__ */ jsx(
+    RowLink,
+    {
+      href,
+      "data-card-link": "",
+      "data-row-link": "",
+      onActivate: () => onRowClick(row),
+      "aria-expanded": opensRow ? expanded : void 0,
+      className: stretchedClass,
+      onKeyDown: (e) => {
+        if (e.key !== " ") return;
+        e.preventDefault();
+        onRowClick(row);
+      },
+      children: title
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-card-link": "",
+      "data-row-link": "",
+      "aria-expanded": opensRow ? expanded : void 0,
+      onClick: () => onRowClick(row),
+      className: cn(stretchedClass, "font-[inherit]"),
+      children: title
+    }
+  );
   const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);
   const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);
   const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);
@@ -242,7 +285,7 @@ function MobileRow({
                 ...dataAttrsOf(mobilePrimaryCol.cellProps?.(row)),
                 "data-card-title": "",
                 className: "min-w-0 flex-1 break-words font-medium",
-                children: mobilePrimaryCol.cell(row)
+                children: stretched ? titleControl(mobilePrimaryCol.cell(row)) : mobilePrimaryCol.cell(row)
               }
             ),
             statuses.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1", children: statuses.map(({ col, value }) => /* @__PURE__ */ jsx("span", { ...dataAttrsOf(col.cellProps?.(row)), "data-card-status": "", className: "inline-flex", children: /* @__PURE__ */ jsx(StatusChip, { value }) }, col.key)) })
@@ -250,7 +293,7 @@ function MobileRow({
           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.
-            /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact })
+            /* @__PURE__ */ jsx(StackedFields, { columns: mobileSecondaryColumns, row, compact, liftOwnClicks: stretched })
           ) : fields.length > 0 && /* @__PURE__ */ jsx(
             "dl",
             {
@@ -264,14 +307,22 @@ function MobileRow({
                   "dd",
                   {
                     ...dataAttrsOf(col.cellProps?.(row)),
-                    className: "min-w-0 text-secondary self-center",
+                    className: cn("min-w-0 text-secondary self-center", stretched && keepsOwnClicks(col) && LIFTED_FIELD),
                     children: value
                   }
                 )
               ] }, col.key))
             }
           ),
-          actionCells.length > 0 && /* @__PURE__ */ jsx("div", { "data-card-actions": "", className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: actionCells.map(({ col, value }) => /* @__PURE__ */ jsx("div", { ...dataAttrsOf(col.cellProps?.(row)), className: "flex min-w-0 justify-end", children: value }, col.key)) })
+          actionCells.length > 0 && /* @__PURE__ */ jsx("div", { "data-card-actions": "", className: "flex min-w-0 flex-wrap items-center justify-end gap-2", children: actionCells.map(({ col, value }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...dataAttrsOf(col.cellProps?.(row)),
+              className: cn("flex min-w-0 justify-end", stretched && LIFTED_CELL),
+              children: value
+            },
+            col.key
+          )) })
         ] })
       }
     ),
@@ -356,6 +407,9 @@ function MobileRow({
         ]
       }
     )
+  ) : stretched ? (
+    // The stretched card (0.50 K4): a plain box; its title is the control (above).
+    /* @__PURE__ */ jsx("div", { ...press, "data-card-stretched": "", className: cardClass, children: cardInner })
   ) : interactive && href ? (
     // A card with a URL of its own is a LINK, not a div wearing role="button"
     // (feedback #451): the phone's long-press "open in new tab" and a screen

package/dist/components/data-table-mobile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { Chip } from \"./chip\";\nimport { BooleanMark } from \"./data-table-cells\";\nimport { EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n  DataTableCellProps,\n  DataTableColumn,\n  DataTableProps,\n  DataTableSortLabels,\n  FilterState,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n  if (!props) return undefined;\n  const out: Record<string, unknown> = {};\n  for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n  return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n  actions: MobileSwipeActions,\n  dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n  const rtl = dir === \"rtl\";\n  return {\n    left: (rtl ? actions.end : actions.start) ?? actions.left,\n    right: (rtl ? actions.start : actions.end) ?? actions.right,\n  };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n  \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({ columns, row, compact }: { columns: DataTableColumn<T>[]; row: T; compact: boolean }) {\n  const fields = filledFields(columns, row);\n  if (fields.length === 0) return null;\n  return (\n    <dl\n      data-card-fields=\"stacked\"\n      className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n    >\n      {fields.map(({ col, value }) => (\n        <div key={col.key} className=\"min-w-0\">\n          <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n          <dd\n            {...dataAttrsOf(col.cellProps?.(row))}\n            className=\"mt-0.5 min-w-0 break-words text-secondary\"\n          >\n            {value}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n/** The most fields the default phone card shows under its title (0.49 KIT-7). */\nexport const MOBILE_CARD_FIELDS = 3;\n\n/**\n * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,\n * not `mobileHidden`): the title — `mobile: \"primary\"` or `mobilePrimary`, else the\n * first that is not a status — the `role: \"status\"` columns for beside it, at most\n * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: \"secondary\"` when any is,\n * else the first after the title, and the `role: \"actions\"` columns, drawn after the\n * fields. An actions column is never the title and never one of the fields, so the\n * fields and the marks leave it on the card; only `mobileHidden` / `mobile: \"hidden\"`\n * (which keep it out of `columns`) remove it.\n */\nexport function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {\n  primary: DataTableColumn<T> | null;\n  status: DataTableColumn<T>[];\n  fields: DataTableColumn<T>[];\n  actions: DataTableColumn<T>[];\n} {\n  const titles = columns.filter((c) => c.role !== \"actions\");\n  const primary =\n    titles.find((c) => c.mobile === \"primary\") ??\n    titles.find((c) => c.mobilePrimary) ??\n    titles.find((c) => c.role !== \"status\") ??\n    titles[0] ??\n    null;\n  const status = columns.filter((c) => c !== primary && c.role === \"status\");\n  const actions = columns.filter((c) => c.role === \"actions\");\n  const rest = titles.filter((c) => c !== primary && c.role !== \"status\");\n  const marked = rest.filter((c) => c.mobile === \"secondary\");\n  return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };\n}\n\n/** A column whose cell keeps its own clicks — `noRowLink`, or `role: \"actions\"`: no row\n *  link may wrap it, and a card that draws it is not a link itself. */\nexport function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {\n  return !!col.noRowLink || col.role === \"actions\";\n}\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n *  production one, never under vitest. Read per call so a test can switch it on. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`\n * column past its three fields. Such a column holds the cell's own controls — a per-row\n * delete, a link — and the card leaves it out with them, so on a phone the action is\n * gone. Never for a `role: \"actions\"` column, which the card draws after its fields.\n * Read off the declared `columns` (not the ones a person or the width hid), and only\n * while the table lets the card choose: `enabled` is false with a `mobileCard` or\n * `mobileDetailsInRow` (the column is then in the opened row), and a column marked\n * `mobile: \"secondary\"` means the app chose. Once per table and column key; `name`\n * (the table's `storageKey` or `urlSync` prefix) says which table, else its title\n * column does.\n */\nexport function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {\n  const warned = useRef<Set<string> | null>(null);\n  useEffect(() => {\n    if (!enabled || !devWarnings()) return;\n    const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== \"hidden\");\n    if (phone.some((c) => c.mobile === \"secondary\")) return;\n    const { primary, status, fields, actions } = mobileCardColumns(phone);\n    const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);\n    const table = name ? ` \"${name}\"` : primary ? ` (title column \"${primary.key}\")` : \"\";\n    warned.current ??= new Set();\n    for (const col of phone) {\n      if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;\n      warned.current.add(col.key);\n      console.warn(\n        `[ui-kit] DataTable${table}: column \"${col.key}\" (noRowLink) is past the phone card's three fields and ` +\n          'leaves the card — give it role: \"actions\" (drawn after the fields), or move its action to rowActions.',\n      );\n    }\n  }, [columns, enabled, name]);\n}\n\n/**\n * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,\n * a boolean (React draws neither), `\"\"` or blank text, and the formatters' empty value\n * \"—\" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.\n * Any other element is never empty here — its output is the component's — so a column\n * whose empty value should drop off the card returns `null` (or \"—\") from `cell` for it.\n */\nexport function isEmptyCell(value: ReactNode): boolean {\n  if (value === null || value === undefined || typeof value === \"boolean\") return true;\n  if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;\n  if (typeof value === \"string\") {\n    const text = value.trim();\n    return text === \"\" || text === EMPTY_FORMATTED_VALUE;\n  }\n  return false;\n}\n\n/** Each column's rendered cell, without the empty ones. */\nfunction filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {\n  return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));\n}\n\n/** A status column's value beside the card's title: text in a neutral chip, an element\n *  (the app's own Chip or StatusDot) as it is. */\nfunction StatusChip({ value }: { value: ReactNode }) {\n  return typeof value === \"string\" || typeof value === \"number\" ? <Chip size=\"sm\">{value}</Chip> : <>{value}</>;\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n  columns,\n  sorts,\n  sortCycle,\n  compact,\n  labels,\n  onPick,\n  onFlip,\n}: {\n  columns: DataTableColumn<T>[];\n  sorts: SortState[];\n  sortCycle: SortCycle;\n  compact: boolean;\n  labels: DataTableLabels;\n  onPick: (key: string | null) => void;\n  onFlip: () => void;\n}) {\n  const selectId = useId();\n  const sortLabels: DataTableSortLabels = labels;\n  if (columns.length === 0) return null;\n  // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n  // sort chain drops it, and so does the control rather than claiming it.\n  const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n  const offerDefault = sortCycle === \"tri\" || primary === null;\n  const desc = primary?.dir === \"desc\";\n  return (\n    <div\n      data-table-mobile-sort=\"\"\n      className={cn(\n        // At Large the direction button shows its words (IconButton's label, §4); the\n        // row wraps so the select keeps a usable width on a 240 px card.\n        \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n        compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n      )}\n    >\n      <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n        {sortLabels.sortBy}\n      </label>\n      <Select\n        id={selectId}\n        size={compact ? \"sm\" : \"md\"}\n        className=\"min-w-0 flex-1 large:basis-40\"\n        value={primary?.key ?? \"\"}\n        onChange={(e) => onPick(e.target.value || null)}\n      >\n        {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n        {columns.map((col) => (\n          <option key={col.key} value={col.key}>\n            {columnLabel(col, labels)}\n          </option>\n        ))}\n      </Select>\n      <IconButton\n        size={compact ? \"xs\" : \"md\"}\n        variant=\"secondary\"\n        label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n        disabled={primary === null}\n        onClick={onFlip}\n      >\n        {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n      </IconButton>\n    </div>\n  );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n  row: T;\n  isExpanded: DataTableProps<T>[\"isExpanded\"];\n  /** What the row shows when opened — DataTable's `openedRowContent`. */\n  openedRowContent: (row: T) => ReactNode;\n  /** Whether an opened row has anything to show at all. */\n  opensRow: boolean;\n  rowClassName: DataTableProps<T>[\"rowClassName\"];\n  rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n  onRowClick: DataTableProps<T>[\"onRowClick\"];\n  rowHref: DataTableProps<T>[\"rowHref\"];\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The card list's reading direction, for which physical drag a swipe side means. */\n  mobileDir: Direction;\n  /** No column the card renders owns a link, so the card itself may be one. */\n  mobileCardLinkable: boolean;\n  mobileCard: DataTableProps<T>[\"mobileCard\"];\n  mobilePrimaryCol: DataTableColumn<T> | null;\n  /** The `role: \"status\"` columns, drawn as chips beside the title (0.49 KIT-7). */\n  mobileStatusColumns: DataTableColumn<T>[];\n  mobileSecondaryColumns: DataTableColumn<T>[];\n  /** The `role: \"actions\"` columns, drawn after the fields at the card's end (0.49 KIT-7). */\n  mobileActionColumns: DataTableColumn<T>[];\n  mobileExpandAsDialog: boolean;\n  compact: boolean;\n  /** The text size is Large or Extra large (§4). */\n  large: boolean;\n  /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n  select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n  /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n  active: boolean;\n  /** `selection.isSelectable` for this row. */\n  selectable: boolean;\n  selected: boolean;\n  onToggle: (checked: boolean) => void;\n  /** A long press outside the mode: enter it with this row selected. */\n  onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n *  identical row markup. */\nexport function MobileRow<T>({\n  row,\n  isExpanded,\n  openedRowContent,\n  opensRow,\n  rowClassName,\n  rowAttributes,\n  onRowClick,\n  rowHref,\n  swipeActionsFor,\n  mobileDir,\n  mobileCardLinkable,\n  mobileCard,\n  mobilePrimaryCol,\n  mobileStatusColumns,\n  mobileSecondaryColumns,\n  mobileActionColumns,\n  mobileExpandAsDialog,\n  compact,\n  large,\n  select,\n}: MobileRowProps<T>) {\n  const expanded = isExpanded?.(row) ?? false;\n  // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n  // instead of opening the row, and the swipe and the long press stand down, so no\n  // gesture means two things at once (keksdose's register list, its feedback #153).\n  const selecting = !!select?.active;\n  // Not on an open card, as in kk's register: its editor and a selection are two modes\n  // fighting over the same row.\n  const pressable = !!select && select.selectable && !selecting && !expanded;\n  const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n  const expansion = expanded ? openedRowContent(row) : null;\n  const tint = rowClassName?.(row);\n  // Use div+role=\"button\" rather than a real <button> so cells that\n  // contain their own interactive controls (status toggles, action\n  // icons) don't end up as illegal nested buttons.\n  const interactive = !!onRowClick;\n  // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n  // only a cursor and a tap-tint to advertise its editor — on the invoice review\n  // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n  // values are not editable\". A chevron is the affordance every list on a phone\n  // uses for exactly this, and it points the way the row actually opens: right into\n  // a sheet, or down into an inline panel that flips it when expanded.\n  const opensDetail = interactive && opensRow;\n  const swipeActions = swipeActionsFor?.(row);\n  const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n  // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n  // down to the buttons\"). Only the card's header — the summary line — is inside\n  // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n  // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n  // In selection mode a sideways drag would be a second meaning for a selecting touch.\n  const swipeEnabled = !!swipe && !selecting;\n  const href = mobileCardLinkable ? rowHref?.(row) : undefined;\n  const cardClass = cn(\n    \"w-full text-start flex items-center\",\n    // §4: more room per row at Large — a taller row is a bigger tap target too.\n    compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n    // Live #320's other half: the card acknowledges the touch before the sheet\n    // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n    // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n    // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n    // on every row of a long list, so anything larger becomes the list's personality\n    // rather than feedback. `transition-transform` alone, so the existing background\n    // flip stays instant.\n    interactive &&\n      \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n    // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n    // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n    // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n    // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n    // keeps the fill and the squeeze above; an outline on every tap of a long list would\n    // be louder than the acknowledgement it replaces.\n    (interactive || selecting) && cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n    selecting && \"cursor-pointer\",\n    select?.selected && selecting && \"bg-brand-soft\",\n    // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n    // which only yields to this CSS. The trade kk made on its register: the card's text\n    // is not selectable on a phone where the table offers selection.\n    select && \"select-none [-webkit-touch-callout:none]\",\n  );\n  // The card's content is written once and worn by either tag below. Note that\n  // the primary cell is rendered RAW here, never through `linkColumn` — the card\n  // itself is the anchor, and routing it through `linkColumn` too would nest an\n  // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n  // exactly one anchor exists per row.\n  // The default card's filled fields and status values (0.49 KIT-7): an empty one\n  // gets no line. Not computed for a `mobileCard`, which draws its own.\n  const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);\n  const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);\n  const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);\n  const cardInner = (\n    <>\n      {/* The card's own content keeps the column it always had; the chevron sits\n          beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col\",\n          compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n          // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n          // the reader who chose bigger type is the one an ellipsis fails. A caller's\n          // `mobileCard` is its own layout and keeps what it chose.\n          !mobileCard && CARD_NO_TRUNCATE,\n        )}\n      >\n        {mobileCard ? (\n          mobileCard(row)\n        ) : (\n          <>\n            {/* Only the `data-*` half of `cellProps` — see its note. The title row\n                carries the status chips at its end (0.49 KIT-7). */}\n            {(mobilePrimaryCol || statuses.length > 0) && (\n              <div data-card-head=\"\" className=\"flex min-w-0 items-start justify-between gap-2\">\n                {mobilePrimaryCol && (\n                  <div\n                    {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}\n                    data-card-title=\"\"\n                    className=\"min-w-0 flex-1 break-words font-medium\"\n                  >\n                    {mobilePrimaryCol.cell(row)}\n                  </div>\n                )}\n                {statuses.length > 0 && (\n                  <div className=\"flex shrink-0 flex-wrap items-center justify-end gap-1\">\n                    {statuses.map(({ col, value }) => (\n                      <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status=\"\" className=\"inline-flex\">\n                        <StatusChip value={value} />\n                      </span>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {fields.length > 0 && large ? (\n              // §4: each label ABOVE its value at Large. Side by side, a label column\n              // sized to the widest label leaves a value a sliver of a 240 px card.\n              <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} />\n            ) : fields.length > 0 && (\n              <dl\n                className={cn(\n                  \"grid grid-cols-[auto_1fr] gap-x-3\",\n                  compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n                )}\n              >\n                {fields.map(({ col, value }) => (\n                  <Fragment key={col.key}>\n                    <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n                      {col.header}\n                    </dt>\n                    <dd\n                      {...dataAttrsOf(col.cellProps?.(row))}\n                      className=\"min-w-0 text-secondary self-center\"\n                    >\n                      {value}\n                    </dd>\n                  </Fragment>\n                ))}\n              </dl>\n            )}\n            {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its\n                buttons keep their own clicks, and RowActions folds into \"⋯\" at Large. */}\n            {actionCells.length > 0 && (\n              <div data-card-actions=\"\" className=\"flex min-w-0 flex-wrap items-center justify-end gap-2\">\n                {actionCells.map(({ col, value }) => (\n                  <div key={col.key} {...dataAttrsOf(col.cellProps?.(row))} className=\"flex min-w-0 justify-end\">\n                    {value}\n                  </div>\n                ))}\n              </div>\n            )}\n          </>\n        )}\n      </div>\n      {opensDetail && !selecting &&\n        // `aria-hidden`: the row already announces itself as a button with\n        // `aria-expanded`, so the icon would only add a second, wordless stop.\n        (mobileExpandAsDialog ? (\n          // Points INTO the sheet, which is the reading-forward direction.\n          <ChevronRight\n            aria-hidden\n            className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n          />\n        ) : (\n          <ChevronDown\n            aria-hidden\n            className={cn(\n              \"size-4 shrink-0 text-placeholder transition-transform\",\n              expanded && \"rotate-180\",\n            )}\n          />\n        ))}\n    </>\n  );\n  // The long press rides the card itself; the click it leaves behind is swallowed on\n  // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n  // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n  // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n  // mode too, or a long press whose click never came would eat the first toggle.\n  //\n  // A press that starts on a control in a cell (or in a portal one opened) is that\n  // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n  const press = select\n    ? {\n        ...longPress.handlers,\n        onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n          if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n            longPress.consumeClick();\n            return;\n          }\n          longPress.handlers.onPointerDown(e);\n        },\n        onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n          if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n          longPress.handlers.onContextMenu(e);\n        },\n      }\n    : undefined;\n  const body = selecting ? (\n    // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n    // `aria-pressed`, the box beside it only a picture of that state (the card is the\n    // one control, so the two can never fight or fire twice).\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n       tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n    <div\n      role={select!.selectable ? \"button\" : undefined}\n      tabIndex={select!.selectable ? 0 : undefined}\n      aria-pressed={select!.selectable ? select!.selected : undefined}\n      aria-disabled={select!.selectable ? undefined : true}\n      data-card-selecting=\"\"\n      {...press}\n      onClick={(e) => {\n        if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n        // A tap on a control in a cell is that control's (keksdose live #428).\n        if (fromOwnControl(e.target, e.currentTarget)) return;\n        select!.onToggle(!select!.selected);\n      }}\n      onKeyDown={(e) => {\n        if (!select!.selectable || e.target !== e.currentTarget) return;\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          select!.onToggle(!select!.selected);\n        }\n      }}\n      className={cardClass}\n    >\n      <Checkbox\n        readOnly\n        tabIndex={-1}\n        aria-hidden\n        checked={select!.selected}\n        disabled={!select!.selectable}\n        className=\"pointer-events-none shrink-0 self-center\"\n        inputClassName=\"pointer-events-none\"\n      />\n      {cardInner}\n    </div>\n  ) : interactive && href ? (\n      // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n      // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n      // reader's link semantics both come free, and the fake role goes away.\n      <RowLink\n        href={href}\n        {...press}\n        onActivate={() => onRowClick!(row)}\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n        // Enter already activates a link natively, and that routes through\n        // RowLink's own onClick — handling it here too would open the row twice.\n        // Space is the only key left, and only so it opens the row instead of\n        // scrolling the list.\n        onKeyDown={(e) => {\n          if (e.key !== \" \") return;\n          e.preventDefault();\n          onRowClick!(row);\n        }}\n      >\n        {cardInner}\n      </RowLink>\n    ) : (\n      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n         only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n         Enter/Space handler below; the rule cannot follow the conditional role. */\n      <div\n        {...press}\n        role={interactive ? \"button\" : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={\n          interactive\n            ? (e) => {\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // A tap on a control in a cell (a select, a button) is that\n                // control's, as on the desktop `<tr>` (keksdose live #428).\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                onRowClick!(row);\n              }\n            : undefined\n        }\n        onKeyDown={\n          interactive\n            ? (e) => {\n                // A key press inside a nested control is that control's.\n                if (e.target !== e.currentTarget) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onRowClick!(row);\n                }\n              }\n            : undefined\n        }\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n      >\n        {cardInner}\n      </div>\n    );\n  return (\n    <li\n      className={cn(tint)}\n      {...cleanAttrs(rowAttributes?.(row))}\n      data-selected={selecting && select!.selected ? \"\" : undefined}\n      onClickCapture={\n        select\n          ? (e) => {\n              if (!longPress.consumeClick()) return;\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          : undefined\n      }\n    >\n      {swipeEnabled ? (\n        <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n          {body}\n        </SwipeableRow>\n      ) : (\n        body\n      )}\n      {expansion && !mobileExpandAsDialog && (\n        <div\n          className={cn(\n            \"bg-surface-2 border-t border-subtle\",\n            compact ? \"px-3 py-2\" : \"px-4 py-3\",\n          )}\n        >\n          {expansion}\n        </div>\n      )}\n    </li>\n  );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n  active,\n  allSelected,\n  someSelected,\n  compact,\n  labels,\n  onEnter,\n  onToggleAll,\n  onCancel,\n}: {\n  active: boolean;\n  allSelected: boolean;\n  someSelected: boolean;\n  compact: boolean;\n  labels: DataTableLabels;\n  onEnter: () => void;\n  onToggleAll: (checked: boolean) => void;\n  onCancel: () => void;\n}) {\n  // The control that was pressed unmounts with the mode it switched, so focus is\n  // handed across: into the bar's box on the way in, back to the button on the way out.\n  const handOff = useRef(false);\n  const allBox = useRef<HTMLInputElement>(null);\n  const enterButton = useRef<HTMLButtonElement>(null);\n  useEffect(() => {\n    if (!handOff.current) return;\n    handOff.current = false;\n    (active ? allBox.current : enterButton.current)?.focus();\n  }, [active]);\n  if (!active)\n    return (\n      <button\n        ref={enterButton}\n        type=\"button\"\n        data-table-mobile-select=\"\"\n        onClick={() => {\n          handOff.current = true;\n          onEnter();\n        }}\n        className={cn(\n          \"sr-only rounded-md text-sm font-medium text-secondary\",\n          // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n          // (SwipeableRow's 0.32.1 note).\n          \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n          FOCUS_RING,\n        )}\n      >\n        {labels.selectRows}\n      </button>\n    );\n  return (\n    <div\n      data-table-mobile-select=\"\"\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n        compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n      )}\n    >\n      <Checkbox\n        ref={allBox}\n        label={labels.selectAllRows}\n        checked={allSelected}\n        indeterminate={someSelected && !allSelected}\n        onChange={(e) => onToggleAll(e.target.checked)}\n      />\n      <button\n        type=\"button\"\n        onClick={() => {\n          handOff.current = true;\n          onCancel();\n        }}\n        className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n      >\n        {labels.cancelSelection}\n      </button>\n    </div>\n  );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n  columns,\n  filters,\n  selectOptionsByKey,\n  isServer,\n  hasFilterCallback,\n  onSetFilter,\n  onClearFilter,\n  onClearAll,\n  labels,\n  locale,\n}: {\n  columns: DataTableColumn<T>[];\n  filters: FilterState;\n  selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n  isServer: boolean;\n  hasFilterCallback: boolean;\n  onSetFilter: (key: string, value: FilterValue) => void;\n  onClearFilter: (key: string) => void;\n  onClearAll: () => void;\n  labels: DataTableLabels;\n  locale?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n  // in, so it carries the trigger's direction with it — read at the moment of opening,\n  // from the element the user actually pressed.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const [expanded, setExpanded] = useState<string | null>(null);\n\n  const filterable = useMemo(\n    () =>\n      columns\n        .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n        .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n    [columns, isServer, hasFilterCallback],\n  );\n\n  if (filterable.length === 0) return null;\n\n  const activeCount = filterable.filter(({ col }) => {\n    const s = filters[col.key];\n    return s && isFilterActive(s);\n  }).length;\n\n  return (\n    <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n      <button\n        type=\"button\"\n        onClick={(e) => {\n          setDir(dirOf(e.currentTarget));\n          setOpen(true);\n        }}\n        className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n      >\n        <Filter className=\"size-4\" />\n        <span>{labels.filters}</span>\n        {activeCount > 0 && (\n          <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n            {activeCount}\n          </span>\n        )}\n      </button>\n      {activeCount > 0 && (\n        <button\n          type=\"button\"\n          onClick={onClearAll}\n          className=\"text-xs text-muted hover:text-secondary\"\n        >\n          {labels.clearAll}\n        </button>\n      )}\n      {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n          in the URL, so closing never loses anything), the scroll lock, focus in and\n          back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n          screen's edges on a phone, as it always did. */}\n      <DialogFrame\n        open={open}\n        onClose={() => setOpen(false)}\n        title={labels.filters}\n        closeButton\n        closeLabel={labels.close}\n        headerDivider\n        fullBleed\n        // Portalled to <body>, so the direction read from the button goes with it.\n        dir={dir}\n        className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n        // The sections run edge to edge with a rule between them, as before.\n        bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n        actions={(close) => (\n          <>\n            <button\n              type=\"button\"\n              onClick={onClearAll}\n              disabled={activeCount === 0}\n              // `me-auto` keeps Clear all at the start and Done at the end.\n              className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n            >\n              {labels.clearAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={close}\n              className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n            >\n              {labels.done}\n            </button>\n          </>\n        )}\n      >\n        {filterable.map(({ col, filter }) => {\n          const state = filters[col.key];\n          const active = !!state && isFilterActive(state);\n          const isItemOpen = expanded === col.key;\n          return (\n            <div key={col.key}>\n              <button\n                type=\"button\"\n                onClick={() => setExpanded(isItemOpen ? null : col.key)}\n                aria-expanded={isItemOpen}\n                className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n              >\n                <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n                  {col.header}\n                  {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n                </span>\n                <ChevronDown\n                  className={cn(\n                    \"size-4 shrink-0 text-placeholder transition-transform\",\n                    isItemOpen && \"rotate-180\",\n                  )}\n                />\n              </button>\n              {isItemOpen && (\n                <div className=\"px-4 pb-3\">\n                  <FilterPopover\n                    column={col}\n                    state={state ?? defaultFilterState(filter)}\n                    onChange={(next) => onSetFilter(col.key, next)}\n                    onClear={() => onClearFilter(col.key)}\n                    selectOptions={selectOptionsByKey[col.key] ?? []}\n                    labels={labels}\n                    locale={locale}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </DialogFrame>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment"]}
+{"version":3,"sources":["../../src/components/data-table-mobile.tsx"],"sourcesContent":["import { Fragment, isValidElement, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent, ReactNode } from \"react\";\nimport { ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, ChevronRight, Filter } from \"lucide-react\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { IconButton } from \"./icon-button\";\nimport { Select } from \"./select\";\nimport { cn } from \"../lib/cn\";\nimport { dirOf, type Direction } from \"../lib/direction\";\nimport { defaultFilterState, isFilterActive, resolveFilter } from \"./data-table-filters\";\nimport type { ColumnFilter, FilterValue } from \"./data-table-filters\";\nimport type { SortCycle, SortState } from \"./data-table-sort\";\nimport { FilterPopover } from \"./data-table-filter-popover\";\nimport { SwipeableRow, type SwipeAction } from \"./swipeable-row\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Checkbox } from \"./checkbox\";\nimport { Chip } from \"./chip\";\nimport { BooleanMark } from \"./data-table-cells\";\nimport { EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport { useLongPress } from \"../hooks/use-long-press\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { RowLink, cleanAttrs, columnLabel, fromOutside, fromOwnControl } from \"./data-table-shared\";\nimport type {\n  DataTableCellProps,\n  DataTableColumn,\n  DataTableProps,\n  DataTableSortLabels,\n  FilterState,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's phone layout: the card a row becomes, the fields inside it, and the sort\n// and filter controls above the card list. Moved out of data-table.tsx whole (refactor\n// audit 2026-10, MOD-3 step 4); the list itself, its pager and its row dialog stay in\n// DataTable, which owns the state they share with the wide-screen table.\n\n/** Only the `data-*` attributes of a cell's props — what a phone card field takes. */\nfunction dataAttrsOf(props: DataTableCellProps | undefined): Record<string, unknown> | undefined {\n  if (!props) return undefined;\n  const out: Record<string, unknown> = {};\n  for (const [k, v] of Object.entries(props)) if (k.startsWith(\"data-\") && k !== \"data-col\") out[k] = v;\n  return out;\n}\n\n/** The logical sides onto the physical drag directions {@link SwipeableRow} takes. */\nfunction physicalSwipe(\n  actions: MobileSwipeActions,\n  dir: Direction,\n): { left?: SwipeAction[]; right?: SwipeAction[] } {\n  const rtl = dir === \"rtl\";\n  return {\n    left: (rtl ? actions.end : actions.start) ?? actions.left,\n    right: (rtl ? actions.start : actions.end) ?? actions.right,\n  };\n}\n\n// ---------- Phone card at Large (0.32) ----------\n\n/**\n * §4 \"nothing truncates\" in a phone card at Large and Extra large: a cell's own\n * `truncate` (a kit cell, a chip, the app's span) wraps instead — and breaks inside a\n * word too long for the card rather than running out of it. A descendant rule, so it\n * reaches the cells without the table knowing what they render; `large:`, so Normal\n * keeps every ellipsis it had.\n */\nconst CARD_NO_TRUNCATE =\n  \"large:[&_.truncate]:whitespace-normal large:[&_.truncate]:[overflow-wrap:anywhere]\";\n\n/**\n * Columns as label-above-value pairs: the phone card's fields at Large (§4), and the\n * opened row's `mobileDetailsInRow` at every size. Each pair is a `<div>` in the\n * `<dl>` — the grouping HTML allows — so a pair keeps together and the gap falls\n * BETWEEN facts rather than between a label and its own value. `relative` holds a\n * header's `sr-only` text (an actions column's), as every kit container must.\n */\nexport function StackedFields<T>({\n  columns,\n  row,\n  compact,\n  liftOwnClicks = false,\n}: {\n  columns: DataTableColumn<T>[];\n  row: T;\n  compact: boolean;\n  /** On a stretched card (0.50 K4): lift the own-click fields above its title link. */\n  liftOwnClicks?: boolean;\n}) {\n  const fields = filledFields(columns, row);\n  if (fields.length === 0) return null;\n  return (\n    <dl\n      data-card-fields=\"stacked\"\n      className={cn(\"relative flex min-w-0 flex-col\", compact ? \"gap-1.5 text-xs\" : \"gap-2.5 text-sm\", CARD_NO_TRUNCATE)}\n    >\n      {fields.map(({ col, value }) => (\n        <div key={col.key} className=\"min-w-0\">\n          <dt className=\"text-xs uppercase tracking-wide text-muted\">{col.header}</dt>\n          <dd\n            {...dataAttrsOf(col.cellProps?.(row))}\n            className={cn(\"mt-0.5 min-w-0 break-words text-secondary\", liftOwnClicks && keepsOwnClicks(col) && LIFTED_FIELD)}\n          >\n            {value}\n          </dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\n/**\n * A stretched card's own-click cell (0.50 K4): above the title control's overlay\n * (`after:z-[1]`), so its link or buttons take their own taps. `w-fit` keeps the lifted\n * box to the cell's content, so the field's empty rest still opens the row.\n */\nconst LIFTED_CELL = \"relative z-[2]\";\nconst LIFTED_FIELD = cn(LIFTED_CELL, \"w-fit max-w-full justify-self-start\");\n\n/**\n * The keyboard frame of a stretched card (0.50 K4): FOCUS_RING's, inside the card,\n * while its title control (`data-card-link`) has the focus.\n */\nconst STRETCHED_RING =\n  \"has-[[data-card-link]:focus-visible]:ring-inset has-[[data-card-link]:focus-visible]:ring-focus has-[[data-card-link]:focus-visible]:ring-brand\";\n\n/** The most fields the default phone card shows under its title (0.49 KIT-7). */\nexport const MOBILE_CARD_FIELDS = 3;\n\n/**\n * The default phone card's columns (0.49 KIT-7), out of the phone's columns (visible,\n * not `mobileHidden`): the title — `mobile: \"primary\"` or `mobilePrimary`, else the\n * first that is not a status — the `role: \"status\"` columns for beside it, at most\n * {@link MOBILE_CARD_FIELDS} fields: those marked `mobile: \"secondary\"` when any is,\n * else the first after the title, and the `role: \"actions\"` columns, drawn after the\n * fields. An actions column is never the title and never one of the fields, so the\n * fields and the marks leave it on the card; only `mobileHidden` / `mobile: \"hidden\"`\n * (which keep it out of `columns`) remove it.\n */\nexport function mobileCardColumns<T>(columns: DataTableColumn<T>[]): {\n  primary: DataTableColumn<T> | null;\n  status: DataTableColumn<T>[];\n  fields: DataTableColumn<T>[];\n  actions: DataTableColumn<T>[];\n} {\n  const titles = columns.filter((c) => c.role !== \"actions\");\n  const primary =\n    titles.find((c) => c.mobile === \"primary\") ??\n    titles.find((c) => c.mobilePrimary) ??\n    titles.find((c) => c.role !== \"status\") ??\n    titles[0] ??\n    null;\n  const status = columns.filter((c) => c !== primary && c.role === \"status\");\n  const actions = columns.filter((c) => c.role === \"actions\");\n  const rest = titles.filter((c) => c !== primary && c.role !== \"status\");\n  const marked = rest.filter((c) => c.mobile === \"secondary\");\n  return { primary, status, fields: (marked.length > 0 ? marked : rest).slice(0, MOBILE_CARD_FIELDS), actions };\n}\n\n/** A column whose cell keeps its own clicks — `noRowLink`, or `role: \"actions\"`: no row\n *  link may wrap it, and a card that draws it is not a link itself. */\nexport function keepsOwnClicks<T>(col: DataTableColumn<T>): boolean {\n  return !!col.noRowLink || col.role === \"actions\";\n}\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n *  production one, never under vitest. Read per call so a test can switch it on. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * A development build's note on the default phone card (0.49 KIT-7): a `noRowLink`\n * column past its three fields. Such a column holds the cell's own controls — a per-row\n * delete, a link — and the card leaves it out with them, so on a phone the action is\n * gone. Never for a `role: \"actions\"` column, which the card draws after its fields.\n * Read off the declared `columns` (not the ones a person or the width hid), and only\n * while the table lets the card choose: `enabled` is false with a `mobileCard` or\n * `mobileDetailsInRow` (the column is then in the opened row), and a column marked\n * `mobile: \"secondary\"` means the app chose. Once per table and column key; `name`\n * (the table's `storageKey` or `urlSync` prefix) says which table, else its title\n * column does.\n */\nexport function useCardColumnWarnings<T>(columns: DataTableColumn<T>[], enabled: boolean, name?: string): void {\n  const warned = useRef<Set<string> | null>(null);\n  useEffect(() => {\n    if (!enabled || !devWarnings()) return;\n    const phone = columns.filter((c) => !c.mobileHidden && c.mobile !== \"hidden\");\n    if (phone.some((c) => c.mobile === \"secondary\")) return;\n    const { primary, status, fields, actions } = mobileCardColumns(phone);\n    const onCard = new Set<DataTableColumn<T> | null>([primary, ...status, ...fields, ...actions]);\n    const table = name ? ` \"${name}\"` : primary ? ` (title column \"${primary.key}\")` : \"\";\n    warned.current ??= new Set();\n    for (const col of phone) {\n      if (onCard.has(col) || !col.noRowLink || warned.current.has(col.key)) continue;\n      warned.current.add(col.key);\n      console.warn(\n        `[ui-kit] DataTable${table}: column \"${col.key}\" (noRowLink) is past the phone card's three fields and ` +\n          'leaves the card — give it role: \"actions\" (drawn after the fields), or move its action to rowActions.',\n      );\n    }\n  }, [columns, enabled, name]);\n}\n\n/**\n * Whether a rendered cell shows nothing worth a line (0.49 KIT-7): `null`, `undefined`,\n * a boolean (React draws neither), `\"\"` or blank text, and the formatters' empty value\n * \"—\" ({@link EMPTY_FORMATTED_VALUE}), and `booleanColumn`'s mark for an unset value.\n * Any other element is never empty here — its output is the component's — so a column\n * whose empty value should drop off the card returns `null` (or \"—\") from `cell` for it.\n */\nexport function isEmptyCell(value: ReactNode): boolean {\n  if (value === null || value === undefined || typeof value === \"boolean\") return true;\n  if (isValidElement<{ value?: unknown }>(value) && value.type === BooleanMark) return value.props.value == null;\n  if (typeof value === \"string\") {\n    const text = value.trim();\n    return text === \"\" || text === EMPTY_FORMATTED_VALUE;\n  }\n  return false;\n}\n\n/** Each column's rendered cell, without the empty ones. */\nfunction filledFields<T>(columns: DataTableColumn<T>[], row: T): { col: DataTableColumn<T>; value: ReactNode }[] {\n  return columns.map((col) => ({ col, value: col.cell(row) })).filter(({ value }) => !isEmptyCell(value));\n}\n\n/** A status column's value beside the card's title: text in a neutral chip, an element\n *  (the app's own Chip or StatusDot) as it is. */\nfunction StatusChip({ value }: { value: ReactNode }) {\n  return typeof value === \"string\" || typeof value === \"number\" ? <Chip size=\"sm\">{value}</Chip> : <>{value}</>;\n}\n\n// ---------- Phone sort control (keksdose K10) ----------\n\n/**\n * The card list's sort control: a \"Sort by\" select and a direction button.\n *\n * keksdose K10 (inputs audit 2026-10-02 §5; its aggregated report tables, #258): a\n * table is sorted by its header row and the phone card list has none, so the two\n * decisions the header carries — which column, which direction — were unreachable\n * below the breakpoint. keksdose hand-built this row over its DataTable to answer\n * \"who did I pay the most\" on the device it was asked on; this is that row, driven by\n * the SAME sort state as the headers (controlled `sorts` included), so turning the\n * phone sideways keeps the order and a sort chosen here is the one the URL and the\n * storage key hold.\n *\n * The rules are the header's: a newly picked column starts in its `firstSort`, the\n * direction button flips the primary sort (secondary ones stay), and \"Default order\"\n * — the third click of a `\"tri\"` cycle — is offered only under `\"tri\"`, since a\n * `\"toggle\"` table promises it is always ranked by something. The select's label is\n * a real `<label>` beside it, and the button sits outside that label: a click inside\n * a label is forwarded to the control it names, so a nested button would flip AND\n * open the select.\n */\nexport function MobileSort<T>({\n  columns,\n  sorts,\n  sortCycle,\n  compact,\n  labels,\n  onPick,\n  onFlip,\n}: {\n  columns: DataTableColumn<T>[];\n  sorts: SortState[];\n  sortCycle: SortCycle;\n  compact: boolean;\n  labels: DataTableLabels;\n  onPick: (key: string | null) => void;\n  onFlip: () => void;\n}) {\n  const selectId = useId();\n  const sortLabels: DataTableSortLabels = labels;\n  if (columns.length === 0) return null;\n  // A persisted or URL sort can name a column with no `sortBy` (or a hidden one): the\n  // sort chain drops it, and so does the control rather than claiming it.\n  const primary = sorts[0] && columns.some((c) => c.key === sorts[0].key) ? sorts[0] : null;\n  const offerDefault = sortCycle === \"tri\" || primary === null;\n  const desc = primary?.dir === \"desc\";\n  return (\n    <div\n      data-table-mobile-sort=\"\"\n      className={cn(\n        // At Large the direction button shows its words (IconButton's label, §4); the\n        // row wraps so the select keeps a usable width on a 240 px card.\n        \"flex flex-wrap items-center gap-2 border-b border-subtle\",\n        compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n      )}\n    >\n      <label htmlFor={selectId} className=\"shrink-0 text-xs text-muted\">\n        {sortLabels.sortBy}\n      </label>\n      <Select\n        id={selectId}\n        size={compact ? \"sm\" : \"md\"}\n        className=\"min-w-0 flex-1 large:basis-40\"\n        value={primary?.key ?? \"\"}\n        onChange={(e) => onPick(e.target.value || null)}\n      >\n        {offerDefault && <option value=\"\">{sortLabels.sortDefault}</option>}\n        {columns.map((col) => (\n          <option key={col.key} value={col.key}>\n            {columnLabel(col, labels)}\n          </option>\n        ))}\n      </Select>\n      <IconButton\n        size={compact ? \"xs\" : \"md\"}\n        variant=\"secondary\"\n        label={desc ? sortLabels.sortDescending : sortLabels.sortAscending}\n        disabled={primary === null}\n        onClick={onFlip}\n      >\n        {desc ? <ArrowDownWideNarrow /> : <ArrowUpNarrowWide />}\n      </IconButton>\n    </div>\n  );\n}\n\n// ---------- Phone card ----------\n\n/** One phone card: what DataTable's card list draws for a row. */\nexport interface MobileRowProps<T> {\n  row: T;\n  isExpanded: DataTableProps<T>[\"isExpanded\"];\n  /** What the row shows when opened — DataTable's `openedRowContent`. */\n  openedRowContent: (row: T) => ReactNode;\n  /** Whether an opened row has anything to show at all. */\n  opensRow: boolean;\n  rowClassName: DataTableProps<T>[\"rowClassName\"];\n  rowAttributes: DataTableProps<T>[\"rowAttributes\"];\n  onRowClick: DataTableProps<T>[\"onRowClick\"];\n  rowHref: DataTableProps<T>[\"rowHref\"];\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions`. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The card list's reading direction, for which physical drag a swipe side means. */\n  mobileDir: Direction;\n  /** No column the card renders owns a link, so the card itself may be one. */\n  mobileCardLinkable: boolean;\n  /**\n   * The card draws cells that keep their own clicks, so it cannot be one control (0.50\n   * K4): its TITLE is the row's link (`rowHref`) or button (`onRowClick`), stretched over\n   * the card, and those cells sit above it. Only for the default card, never a\n   * `mobileCard`, and never when the title itself keeps its own clicks.\n   */\n  mobileCardStretched: boolean;\n  mobileCard: DataTableProps<T>[\"mobileCard\"];\n  mobilePrimaryCol: DataTableColumn<T> | null;\n  /** The `role: \"status\"` columns, drawn as chips beside the title (0.49 KIT-7). */\n  mobileStatusColumns: DataTableColumn<T>[];\n  mobileSecondaryColumns: DataTableColumn<T>[];\n  /** The `role: \"actions\"` columns, drawn after the fields at the card's end (0.49 KIT-7). */\n  mobileActionColumns: DataTableColumn<T>[];\n  mobileExpandAsDialog: boolean;\n  compact: boolean;\n  /** The text size is Large or Extra large (§4). */\n  large: boolean;\n  /** Phone selection (0.40, keksdose live #421); null without DataTable's `selection`. */\n  select: MobileRowSelect | null;\n}\n\n/** A phone card's part in DataTable's `selection` (0.40, keksdose live #421). */\nexport interface MobileRowSelect {\n  /** The card list is in selection mode: the card shows its box and a tap toggles it. */\n  active: boolean;\n  /** `selection.isSelectable` for this row. */\n  selectable: boolean;\n  selected: boolean;\n  onToggle: (checked: boolean) => void;\n  /** A long press outside the mode: enter it with this row selected. */\n  onLongPress: () => void;\n}\n\n/** One mobile card. Shared by the flat list and the grouped list, so both draw\n *  identical row markup. */\nexport function MobileRow<T>({\n  row,\n  isExpanded,\n  openedRowContent,\n  opensRow,\n  rowClassName,\n  rowAttributes,\n  onRowClick,\n  rowHref,\n  swipeActionsFor,\n  mobileDir,\n  mobileCardLinkable,\n  mobileCardStretched,\n  mobileCard,\n  mobilePrimaryCol,\n  mobileStatusColumns,\n  mobileSecondaryColumns,\n  mobileActionColumns,\n  mobileExpandAsDialog,\n  compact,\n  large,\n  select,\n}: MobileRowProps<T>) {\n  const expanded = isExpanded?.(row) ?? false;\n  // Selection mode (#421): the whole card is the row's checkbox — a tap toggles it\n  // instead of opening the row, and the swipe and the long press stand down, so no\n  // gesture means two things at once (keksdose's register list, its feedback #153).\n  const selecting = !!select?.active;\n  // Not on an open card, as in kk's register: its editor and a selection are two modes\n  // fighting over the same row.\n  const pressable = !!select && select.selectable && !selecting && !expanded;\n  const longPress = useLongPress(() => select?.onLongPress(), { enabled: pressable });\n  const expansion = expanded ? openedRowContent(row) : null;\n  const tint = rowClassName?.(row);\n  // Use div+role=\"button\" rather than a real <button> so cells that\n  // contain their own interactive controls (status toggles, action\n  // icons) don't end up as illegal nested buttons.\n  const interactive = !!onRowClick;\n  // Say that the card OPENS something (Keksdose feedback #163). A phone card had\n  // only a cursor and a tap-tint to advertise its editor — on the invoice review\n  // screen, whose entire purpose is correcting mis-read lines, that read as \"these\n  // values are not editable\". A chevron is the affordance every list on a phone\n  // uses for exactly this, and it points the way the row actually opens: right into\n  // a sheet, or down into an inline panel that flips it when expanded.\n  const opensDetail = interactive && opensRow;\n  const swipeActions = swipeActionsFor?.(row);\n  const swipe = swipeActions ? physicalSwipe(swipeActions, mobileDir) : null;\n  // An OPEN card swipes too (0.40, keksdose live #416, Marcel: \"faster than scrolling\n  // down to the buttons\"). Only the card's header — the summary line — is inside\n  // SwipeableRow; the opened body below is a sibling, so its fields, sliders and\n  // scrolling never meet the gesture. Until 0.40 an open card silently lost it.\n  // In selection mode a sideways drag would be a second meaning for a selecting touch.\n  const swipeEnabled = !!swipe && !selecting;\n  // The stretched card (0.50 K4): the title is the control, the card a plain box.\n  // Selection mode keeps its own card (the whole card is the toggle there).\n  const stretched = mobileCardStretched && interactive && !selecting && !mobileCard && !!mobilePrimaryCol;\n  const href = mobileCardLinkable || stretched ? rowHref?.(row) : undefined;\n  const cardClass = cn(\n    \"w-full text-start flex items-center\",\n    // §4: more room per row at Large — a taller row is a bigger tap target too.\n    compact ? \"px-3 py-2 gap-2 text-sm large:py-3\" : \"px-4 py-3 gap-3 large:py-4\",\n    // Live #320's other half: the card acknowledges the touch before the sheet\n    // arrives. On a cold route the data can take a beat, and an unacknowledged tap\n    // reads as \"did that register?\" — which is most of what \"abrupt\" means here.\n    // `origin-center` + a 0.5% squeeze is deliberately almost subliminal: this fires\n    // on every row of a long list, so anything larger becomes the list's personality\n    // rather than feedback. `transition-transform` alone, so the existing background\n    // flip stays instant.\n    interactive &&\n      \"cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-active motion-reduce:transition-none motion-reduce:active:scale-100\",\n    // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live\n    // #394): the browser's own ring and tap highlight sit on the card's outer edge, and\n    // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and\n    // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press\n    // keeps the fill and the squeeze above; an outline on every tap of a long list would\n    // be louder than the acknowledgement it replaces.\n    (interactive || selecting) &&\n      !stretched &&\n      cn(\"[-webkit-tap-highlight-color:transparent] focus-visible:ring-inset\", FOCUS_RING),\n    // A stretched card (0.50 K4) draws the same frame, inside the card, while its TITLE\n    // control has the keyboard: the ring outlines the whole tap target, as on every other\n    // card, not the title's line alone. The own-click cells draw their own.\n    stretched && cn(\"relative [-webkit-tap-highlight-color:transparent]\", STRETCHED_RING),\n    selecting && \"cursor-pointer\",\n    select?.selected && selecting && \"bg-brand-soft\",\n    // A 500 ms hold would otherwise start a text selection, and iOS's link callout —\n    // which only yields to this CSS. The trade kk made on its register: the card's text\n    // is not selectable on a phone where the table offers selection.\n    select && \"select-none [-webkit-touch-callout:none]\",\n  );\n  // The card's content is written once and worn by either tag below. Note that\n  // the primary cell is rendered RAW here, never through `linkColumn` — the card\n  // itself is the anchor, and routing it through `linkColumn` too would nest an\n  // <a> inside an <a>. Desktop and mobile are mutually exclusive (`isMdUp`), so\n  // exactly one anchor exists per row.\n  // The default card's filled fields and status values (0.49 KIT-7): an empty one\n  // gets no line. Not computed for a `mobileCard`, which draws its own.\n  // The stretched card's title control (0.50 K4): the row's link, or a real <button>\n  // when the table only has `onRowClick` — a plain control, since nothing interactive\n  // sits inside it any more. Its `::after` covers the whole card, so a tap anywhere\n  // but on an own-click cell (lifted above it) lands on it, and a long press on the\n  // card is a long press on the link (\"open in new tab\"). Its accessible name is the\n  // title alone; the fields read as text after it. `data-row-link` marks it as the\n  // row itself for `fromOwnControl`, so the long press still arms on it.\n  const stretchedClass =\n    \"block w-full text-start focus-visible:outline-none after:absolute after:inset-0 after:z-[1] after:content-['']\";\n  const titleControl = (title: ReactNode) =>\n    href ? (\n      <RowLink\n        href={href}\n        data-card-link=\"\"\n        data-row-link=\"\"\n        onActivate={() => onRowClick!(row)}\n        aria-expanded={opensRow ? expanded : undefined}\n        className={stretchedClass}\n        // Enter follows RowLink's own onClick; Space opens the row too, not the list's scroll.\n        onKeyDown={(e) => {\n          if (e.key !== \" \") return;\n          e.preventDefault();\n          onRowClick!(row);\n        }}\n      >\n        {title}\n      </RowLink>\n    ) : (\n      <button\n        type=\"button\"\n        data-card-link=\"\"\n        data-row-link=\"\"\n        aria-expanded={opensRow ? expanded : undefined}\n        onClick={() => onRowClick!(row)}\n        className={cn(stretchedClass, \"font-[inherit]\")}\n      >\n        {title}\n      </button>\n    );\n  const fields = mobileCard ? [] : filledFields(mobileSecondaryColumns, row);\n  const statuses = mobileCard ? [] : filledFields(mobileStatusColumns, row);\n  const actionCells = mobileCard ? [] : filledFields(mobileActionColumns, row);\n  const cardInner = (\n    <>\n      {/* The card's own content keeps the column it always had; the chevron sits\n          beside it rather than inside, so a caller's `mobileCard` is untouched. */}\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col\",\n          compact ? \"gap-1 large:gap-2\" : \"gap-2 large:gap-3\",\n          // §4 \"nothing truncates\": at Large a cell's own `truncate` wraps instead —\n          // the reader who chose bigger type is the one an ellipsis fails. A caller's\n          // `mobileCard` is its own layout and keeps what it chose.\n          !mobileCard && CARD_NO_TRUNCATE,\n        )}\n      >\n        {mobileCard ? (\n          mobileCard(row)\n        ) : (\n          <>\n            {/* Only the `data-*` half of `cellProps` — see its note. The title row\n                carries the status chips at its end (0.49 KIT-7). */}\n            {(mobilePrimaryCol || statuses.length > 0) && (\n              <div data-card-head=\"\" className=\"flex min-w-0 items-start justify-between gap-2\">\n                {mobilePrimaryCol && (\n                  <div\n                    {...dataAttrsOf(mobilePrimaryCol.cellProps?.(row))}\n                    data-card-title=\"\"\n                    className=\"min-w-0 flex-1 break-words font-medium\"\n                  >\n                    {stretched ? titleControl(mobilePrimaryCol.cell(row)) : mobilePrimaryCol.cell(row)}\n                  </div>\n                )}\n                {statuses.length > 0 && (\n                  <div className=\"flex shrink-0 flex-wrap items-center justify-end gap-1\">\n                    {statuses.map(({ col, value }) => (\n                      <span key={col.key} {...dataAttrsOf(col.cellProps?.(row))} data-card-status=\"\" className=\"inline-flex\">\n                        <StatusChip value={value} />\n                      </span>\n                    ))}\n                  </div>\n                )}\n              </div>\n            )}\n            {fields.length > 0 && large ? (\n              // §4: each label ABOVE its value at Large. Side by side, a label column\n              // sized to the widest label leaves a value a sliver of a 240 px card.\n              <StackedFields columns={mobileSecondaryColumns} row={row} compact={compact} liftOwnClicks={stretched} />\n            ) : fields.length > 0 && (\n              <dl\n                className={cn(\n                  \"grid grid-cols-[auto_1fr] gap-x-3\",\n                  compact ? \"gap-y-0.5 text-xs\" : \"gap-y-1 text-sm\",\n                )}\n              >\n                {fields.map(({ col, value }) => (\n                  <Fragment key={col.key}>\n                    <dt className=\"text-xs uppercase tracking-wide text-muted self-center\">\n                      {col.header}\n                    </dt>\n                    <dd\n                      {...dataAttrsOf(col.cellProps?.(row))}\n                      className={cn(\"min-w-0 text-secondary self-center\", stretched && keepsOwnClicks(col) && LIFTED_FIELD)}\n                    >\n                      {value}\n                    </dd>\n                  </Fragment>\n                ))}\n              </dl>\n            )}\n            {/* The row's actions after the fields, at the card's end (0.49 KIT-7): its\n                buttons keep their own clicks, and RowActions folds into \"⋯\" at Large. */}\n            {actionCells.length > 0 && (\n              <div data-card-actions=\"\" className=\"flex min-w-0 flex-wrap items-center justify-end gap-2\">\n                {actionCells.map(({ col, value }) => (\n                  <div\n                    key={col.key}\n                    {...dataAttrsOf(col.cellProps?.(row))}\n                    className={cn(\"flex min-w-0 justify-end\", stretched && LIFTED_CELL)}\n                  >\n                    {value}\n                  </div>\n                ))}\n              </div>\n            )}\n          </>\n        )}\n      </div>\n      {opensDetail && !selecting &&\n        // `aria-hidden`: the row already announces itself as a button with\n        // `aria-expanded`, so the icon would only add a second, wordless stop.\n        (mobileExpandAsDialog ? (\n          // Points INTO the sheet, which is the reading-forward direction.\n          <ChevronRight\n            aria-hidden\n            className=\"size-4 shrink-0 text-placeholder rtl:-scale-x-100\"\n          />\n        ) : (\n          <ChevronDown\n            aria-hidden\n            className={cn(\n              \"size-4 shrink-0 text-placeholder transition-transform\",\n              expanded && \"rotate-180\",\n            )}\n          />\n        ))}\n    </>\n  );\n  // The long press rides the card itself; the click it leaves behind is swallowed on\n  // the `<li>` below, in the capture phase, before the card (or RowLink) sees it.\n  // Attached whenever the table selects, the hook's `enabled` deciding whether a press\n  // arms: its pointerdown also clears a stale swallow latch, which must happen in the\n  // mode too, or a long press whose click never came would eat the first toggle.\n  //\n  // A press that starts on a control in a cell (or in a portal one opened) is that\n  // control's, not a way into the mode (keksdose live #428): it only clears the latch.\n  const press = select\n    ? {\n        ...longPress.handlers,\n        onPointerDown: (e: ReactPointerEvent<HTMLElement>) => {\n          if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) {\n            longPress.consumeClick();\n            return;\n          }\n          longPress.handlers.onPointerDown(e);\n        },\n        onContextMenu: (e: ReactMouseEvent<HTMLElement>) => {\n          if (fromOutside(e.target, e.currentTarget) || fromOwnControl(e.target, e.currentTarget)) return;\n          longPress.handlers.onContextMenu(e);\n        },\n      }\n    : undefined;\n  const body = selecting ? (\n    // In the mode a card is a toggle — kk's register row: `role=\"button\"` with\n    // `aria-pressed`, the box beside it only a picture of that state (the card is the\n    // one control, so the two can never fight or fire twice).\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=\"button\",\n       tabIndex 0 and Enter/Space are all here; the rule cannot follow the conditional role. */\n    <div\n      role={select!.selectable ? \"button\" : undefined}\n      tabIndex={select!.selectable ? 0 : undefined}\n      aria-pressed={select!.selectable ? select!.selected : undefined}\n      aria-disabled={select!.selectable ? undefined : true}\n      data-card-selecting=\"\"\n      {...press}\n      onClick={(e) => {\n        if (!select!.selectable || fromOutside(e.target, e.currentTarget)) return;\n        // A tap on a control in a cell is that control's (keksdose live #428).\n        if (fromOwnControl(e.target, e.currentTarget)) return;\n        select!.onToggle(!select!.selected);\n      }}\n      onKeyDown={(e) => {\n        if (!select!.selectable || e.target !== e.currentTarget) return;\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          select!.onToggle(!select!.selected);\n        }\n      }}\n      className={cardClass}\n    >\n      <Checkbox\n        readOnly\n        tabIndex={-1}\n        aria-hidden\n        checked={select!.selected}\n        disabled={!select!.selectable}\n        className=\"pointer-events-none shrink-0 self-center\"\n        inputClassName=\"pointer-events-none\"\n      />\n      {cardInner}\n    </div>\n  ) : stretched ? (\n    // The stretched card (0.50 K4): a plain box; its title is the control (above).\n    <div {...press} data-card-stretched=\"\" className={cardClass}>\n      {cardInner}\n    </div>\n  ) : interactive && href ? (\n      // A card with a URL of its own is a LINK, not a div wearing role=\"button\"\n      // (feedback #451): the phone's long-press \"open in new tab\" and a screen\n      // reader's link semantics both come free, and the fake role goes away.\n      <RowLink\n        href={href}\n        {...press}\n        onActivate={() => onRowClick!(row)}\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n        // Enter already activates a link natively, and that routes through\n        // RowLink's own onClick — handling it here too would open the row twice.\n        // Space is the only key left, and only so it opens the row instead of\n        // scrolling the list.\n        onKeyDown={(e) => {\n          if (e.key !== \" \") return;\n          e.preventDefault();\n          onRowClick!(row);\n        }}\n      >\n        {cardInner}\n      </RowLink>\n    ) : (\n      /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- the handlers are\n         only attached when `interactive`, and then so are role=\"button\", tabIndex 0 and the\n         Enter/Space handler below; the rule cannot follow the conditional role. */\n      <div\n        {...press}\n        role={interactive ? \"button\" : undefined}\n        tabIndex={interactive ? 0 : undefined}\n        onClick={\n          interactive\n            ? (e) => {\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // A tap on a control in a cell (a select, a button) is that\n                // control's, as on the desktop `<tr>` (keksdose live #428).\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                onRowClick!(row);\n              }\n            : undefined\n        }\n        onKeyDown={\n          interactive\n            ? (e) => {\n                // A key press inside a nested control is that control's.\n                if (e.target !== e.currentTarget) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  e.preventDefault();\n                  onRowClick!(row);\n                }\n              }\n            : undefined\n        }\n        aria-expanded={opensRow ? expanded : undefined}\n        className={cardClass}\n      >\n        {cardInner}\n      </div>\n    );\n  return (\n    <li\n      className={cn(tint)}\n      {...cleanAttrs(rowAttributes?.(row))}\n      data-selected={selecting && select!.selected ? \"\" : undefined}\n      onClickCapture={\n        select\n          ? (e) => {\n              if (!longPress.consumeClick()) return;\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          : undefined\n      }\n    >\n      {swipeEnabled ? (\n        <SwipeableRow enabled left={swipe!.left} right={swipe!.right}>\n          {body}\n        </SwipeableRow>\n      ) : (\n        body\n      )}\n      {expansion && !mobileExpandAsDialog && (\n        <div\n          className={cn(\n            \"bg-surface-2 border-t border-subtle\",\n            compact ? \"px-3 py-2\" : \"px-4 py-3\",\n          )}\n        >\n          {expansion}\n        </div>\n      )}\n    </li>\n  );\n}\n\n// ---------- Phone selection bar (0.40, keksdose live #421) ----------\n\n/**\n * The card list's way into and out of selection mode for a keyboard and a screen\n * reader — the long press is a touch gesture, and a gesture alone is no path at all.\n *\n * Outside the mode it is one button, \"Select rows\", visually hidden until it takes\n * focus (SwipeableRow's keyboard buttons, the same rule): the card list keeps the look\n * kk's register has, where the long press is the way in, and Tab or a screen reader's\n * cursor still finds it. In the mode it is a visible row: \"Select all rows\" — the\n * desktop header's box — and Cancel, which clears the selection and leaves, as the\n * bulk bar's Clear does. The owner's bulk bar is the owner's, as on desktop: it\n * appears because the selection is no longer empty.\n */\nexport function MobileSelectBar({\n  active,\n  allSelected,\n  someSelected,\n  compact,\n  labels,\n  onEnter,\n  onToggleAll,\n  onCancel,\n}: {\n  active: boolean;\n  allSelected: boolean;\n  someSelected: boolean;\n  compact: boolean;\n  labels: DataTableLabels;\n  onEnter: () => void;\n  onToggleAll: (checked: boolean) => void;\n  onCancel: () => void;\n}) {\n  // The control that was pressed unmounts with the mode it switched, so focus is\n  // handed across: into the bar's box on the way in, back to the button on the way out.\n  const handOff = useRef(false);\n  const allBox = useRef<HTMLInputElement>(null);\n  const enterButton = useRef<HTMLButtonElement>(null);\n  useEffect(() => {\n    if (!handOff.current) return;\n    handOff.current = false;\n    (active ? allBox.current : enterButton.current)?.focus();\n  }, [active]);\n  if (!active)\n    return (\n      <button\n        ref={enterButton}\n        type=\"button\"\n        data-table-mobile-select=\"\"\n        onClick={() => {\n          handOff.current = true;\n          onEnter();\n        }}\n        className={cn(\n          \"sr-only rounded-md text-sm font-medium text-secondary\",\n          // Padding only once shown: unconditional, it beats sr-only's `padding: 0`\n          // (SwipeableRow's 0.32.1 note).\n          \"focus:not-sr-only focus:m-2 focus:inline-flex focus:px-2 focus:py-1\",\n          FOCUS_RING,\n        )}\n      >\n        {labels.selectRows}\n      </button>\n    );\n  return (\n    <div\n      data-table-mobile-select=\"\"\n      className={cn(\n        \"flex flex-wrap items-center justify-between gap-2 border-b border-subtle\",\n        compact ? \"px-3 py-1.5\" : \"px-4 py-2\",\n      )}\n    >\n      <Checkbox\n        ref={allBox}\n        label={labels.selectAllRows}\n        checked={allSelected}\n        indeterminate={someSelected && !allSelected}\n        onChange={(e) => onToggleAll(e.target.checked)}\n      />\n      <button\n        type=\"button\"\n        onClick={() => {\n          handOff.current = true;\n          onCancel();\n        }}\n        className={cn(\"rounded-md px-2 py-1 text-sm text-muted hover:text-secondary\", FOCUS_RING)}\n      >\n        {labels.cancelSelection}\n      </button>\n    </div>\n  );\n}\n\n// ---------- Mobile filter sheet ----------\n\n/**\n * Filter access for the mobile card list (feedback #299). The desktop table\n * houses per-column filters in its header; the card list has no header, so the\n * same filters were unreachable on phones. This renders a compact \"Filters\" bar\n * that opens a bottom sheet listing each filterable column as a collapsible\n * section, reusing the very same {@link FilterPopover} and filter state the\n * desktop table drives — so it filters identically and stays URL-synced.\n *\n * The sheet is a {@link DialogFrame} (round 0.34 BUG-7b = DUP-6). It was the last\n * hand-rolled modal in the kit: `role=\"dialog\" aria-modal=\"true\"` on the backdrop, with\n * copies of the scroll lock, the backdrop close and the Back entry — and no name, no\n * focus moved in, no trap and no Escape, so a reader was told the page was hidden while\n * focus stayed on it. On a phone `Modal` is a bottom sheet already; it now brings all\n * of that, and the exit motion, from the one place every other dialog gets it.\n */\nexport function MobileFilters<T>({\n  columns,\n  filters,\n  selectOptionsByKey,\n  isServer,\n  hasFilterCallback,\n  onSetFilter,\n  onClearFilter,\n  onClearAll,\n  labels,\n  locale,\n}: {\n  columns: DataTableColumn<T>[];\n  filters: FilterState;\n  selectOptionsByKey: Record<string, { value: string; label: string }[]>;\n  isServer: boolean;\n  hasFilterCallback: boolean;\n  onSetFilter: (key: string, value: FilterValue) => void;\n  onClearFilter: (key: string) => void;\n  onClearAll: () => void;\n  labels: DataTableLabels;\n  locale?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  // The sheet is portalled to <body>, out from under whatever `dir` the table sits\n  // in, so it carries the trigger's direction with it — read at the moment of opening,\n  // from the element the user actually pressed.\n  const [dir, setDir] = useState<Direction>(\"ltr\");\n  const [expanded, setExpanded] = useState<string | null>(null);\n\n  const filterable = useMemo(\n    () =>\n      columns\n        .map((col) => ({ col, filter: !isServer || hasFilterCallback ? resolveFilter(col) : null }))\n        .filter((x): x is { col: DataTableColumn<T>; filter: ColumnFilter<T> } => !!x.filter),\n    [columns, isServer, hasFilterCallback],\n  );\n\n  if (filterable.length === 0) return null;\n\n  const activeCount = filterable.filter(({ col }) => {\n    const s = filters[col.key];\n    return s && isFilterActive(s);\n  }).length;\n\n  return (\n    <div className=\"flex items-center justify-between gap-2 border-b border-subtle px-4 py-2\">\n      <button\n        type=\"button\"\n        onClick={(e) => {\n          setDir(dirOf(e.currentTarget));\n          setOpen(true);\n        }}\n        className=\"inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium text-secondary hover:bg-hover\"\n      >\n        <Filter className=\"size-4\" />\n        <span>{labels.filters}</span>\n        {activeCount > 0 && (\n          <span className=\"inline-flex min-w-4 items-center justify-center rounded-full bg-info-soft px-1 text-caption font-semibold text-info\">\n            {activeCount}\n          </span>\n        )}\n      </button>\n      {activeCount > 0 && (\n        <button\n          type=\"button\"\n          onClick={onClearAll}\n          className=\"text-xs text-muted hover:text-secondary\"\n        >\n          {labels.clearAll}\n        </button>\n      )}\n      {/* Escape, the backdrop, Back (Keksdose feedback #172: the filters are already\n          in the URL, so closing never loses anything), the scroll lock, focus in and\n          back to this bar's button — all `Modal`'s. `fullBleed` lets the sheet meet the\n          screen's edges on a phone, as it always did. */}\n      <DialogFrame\n        open={open}\n        onClose={() => setOpen(false)}\n        title={labels.filters}\n        closeButton\n        closeLabel={labels.close}\n        headerDivider\n        fullBleed\n        // Portalled to <body>, so the direction read from the button goes with it.\n        dir={dir}\n        className=\"max-h-[85vh] rounded-b-none md:rounded-b-lg\"\n        // The sections run edge to edge with a rule between them, as before.\n        bodyClassName=\"space-y-0 divide-y divide-subtle px-0 pt-0 pb-0\"\n        actions={(close) => (\n          <>\n            <button\n              type=\"button\"\n              onClick={onClearAll}\n              disabled={activeCount === 0}\n              // `me-auto` keeps Clear all at the start and Done at the end.\n              className=\"me-auto text-sm text-muted hover:text-secondary disabled:opacity-40\"\n            >\n              {labels.clearAll}\n            </button>\n            <button\n              type=\"button\"\n              onClick={close}\n              className=\"rounded-md bg-inverse px-4 py-2 text-sm font-medium text-inverse\"\n            >\n              {labels.done}\n            </button>\n          </>\n        )}\n      >\n        {filterable.map(({ col, filter }) => {\n          const state = filters[col.key];\n          const active = !!state && isFilterActive(state);\n          const isItemOpen = expanded === col.key;\n          return (\n            <div key={col.key}>\n              <button\n                type=\"button\"\n                onClick={() => setExpanded(isItemOpen ? null : col.key)}\n                aria-expanded={isItemOpen}\n                className=\"flex w-full items-center justify-between gap-2 px-4 py-3 text-start\"\n              >\n                <span className=\"flex items-center gap-2 text-sm font-medium text-secondary\">\n                  {col.header}\n                  {active && <span className=\"size-1.5 rounded-full bg-brand\" />}\n                </span>\n                <ChevronDown\n                  className={cn(\n                    \"size-4 shrink-0 text-placeholder transition-transform\",\n                    isItemOpen && \"rotate-180\",\n                  )}\n                />\n              </button>\n              {isItemOpen && (\n                <div className=\"px-4 pb-3\">\n                  <FilterPopover\n                    column={col}\n                    state={state ?? defaultFilterState(filter)}\n                    onChange={(next) => onSetFilter(col.key, next)}\n                    onClear={() => onClearFilter(col.key)}\n                    selectOptions={selectOptionsByKey[col.key] ?? []}\n                    labels={labels}\n                    locale={locale}\n                  />\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </DialogFrame>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Fragment"]}

package/dist/components/data-table-row.d.ts

@@ -59,7 +59,7 @@ export interface DataTableRowProps<T> {
 export declare const DataTableRow: <T>(props: DataTableRowProps<T> & {
     key?: string | number;
 }) => ReactNode;
-export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
+export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCardStretched" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
     ctx: RefObject<DataTableRowCtx<T>>;
     rowKey: string | number;
     expanded: boolean;

package/dist/components/data-table-row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n//  * the row object, its index and its key;\n//  * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n//    selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n//    its `rowAttributes` compared key by key. The functions themselves may be inline;\n//  * the column definitions BY IDENTITY: a cell is the caller's render function, and\n//    what it reads is the caller's to say. A page that memoises its columns (keksdose's\n//    `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n//    array every render and the full re-render it always had — never a stale cell;\n//  * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n//    with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n  onRowClick: ((row: T) => void) | undefined;\n  onToggle: ((row: T, checked: boolean) => void) | undefined;\n  isSelected: (row: T) => boolean;\n  canSelect: (row: T) => boolean;\n  selectRange: (toIndex: number) => boolean;\n  /** Anchor the next Shift+click range on this row's key. */\n  setAnchor: (key: string | number) => void;\n  /** Remember the checkbox click that drew a range… */\n  markRangeClick: (e: Event) => void;\n  /** …and drop that click's own change event (true once for it). */\n  takeRangeClick: (e: Event) => boolean;\n  setFocusRowKey: (key: string | number) => void;\n  /** The phone card's long press: enter selection mode with this row selected. */\n  onLongPress: (row: T) => void;\n  /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n   *  when the key was one of them. Without it the roving walks the rendered rows. */\n  moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n *  `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n  a: Record<string, string | undefined> | undefined,\n  b: Record<string, string | undefined> | undefined,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const ak = Object.keys(a);\n  if (ak.length !== Object.keys(b).length) return false;\n  for (const k of ak) if (a[k] !== b[k]) return false;\n  return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n  for (const k of Object.keys(next) as (keyof P)[]) {\n    if (k === \"attrs\") continue;\n    if (!Object.is(prev[k], next[k])) return false;\n  }\n  return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n *  the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n  if (!(key in ROW_NAV_KEYS)) return false;\n  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n  const table = from.closest(\"table\");\n  if (!table) return false;\n  const rows = Array.from(table.tBodies).flatMap((body) =>\n    Array.from(body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n    ),\n  );\n  const i = rows.indexOf(from);\n  const target =\n    key === \"ArrowDown\"\n      ? rows[i + 1]\n      : key === \"ArrowUp\"\n        ? rows[i - 1]\n        : key === \"Home\"\n          ? rows[0]\n          : key === \"End\"\n            ? rows[rows.length - 1]\n            : undefined;\n  // At either end the key is still consumed, or ArrowDown on the last row would\n  // scroll the page out from under a focused row.\n  target?.focus();\n  return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n  row: T;\n  rowIndex: number;\n  rowKey: string | number;\n  ctx: RefObject<DataTableRowCtx<T>>;\n  columns: DataTableColumn<T>[];\n  widths: Record<string, number>;\n  growDrawn: boolean;\n  linkColumn: DataTableColumn<T> | undefined;\n  href: string | undefined;\n  /** The selection column is drawn (DataTable's `selection`). */\n  selectionColumn: boolean;\n  selectable: boolean;\n  selected: boolean;\n  expanded: boolean;\n  /** The open row's detail; `null` on a closed row. */\n  expansion: ReactNode;\n  /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n  disclosure: boolean;\n  detailId: string;\n  rowsFocusable: boolean;\n  rowInteractive: boolean;\n  tabbable: boolean;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  compact: boolean;\n  totalColSpan: number;\n  rowDetailsLabel: string;\n  selectRowLabel: string;\n  /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n   *  next), and the row is marked with its index for the window's measuring. */\n  ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n  row,\n  rowIndex,\n  rowKey: key,\n  ctx,\n  columns,\n  widths,\n  growDrawn,\n  linkColumn,\n  href,\n  selectionColumn,\n  selectable,\n  selected,\n  expanded,\n  expansion,\n  disclosure: hasDisclosure,\n  detailId,\n  rowsFocusable,\n  rowInteractive,\n  tabbable,\n  className,\n  attrs,\n  compact,\n  totalColSpan,\n  rowDetailsLabel,\n  selectRowLabel,\n  ariaRowIndex,\n}: DataTableRowProps<T>) {\n  const windowed = ariaRowIndex !== undefined;\n  // Whether the row is open, said where ARIA allows it (round 0.34, the\n  // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n  // table's, and the <tr> wore it. A disclosure button in the first cell carries\n  // it now, with `aria-controls` on the detail row while that is there.\n  // Visually hidden and not a tab stop: the row stays the one roving stop, with\n  // Enter/Space and the whole-row click — this is the screen reader cursor's\n  // way in, and where it hears the state. Named by `aria-label`, so the cell's\n  // text stays the cell's own.\n  const disclosure = hasDisclosure ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      className=\"sr-only-fixed\"\n      aria-label={rowDetailsLabel}\n      aria-expanded={expanded}\n      aria-controls={expansion ? detailId : undefined}\n      // The row's own handler leaves a click on a control inside it alone.\n      onClick={() => ctx.current.onRowClick!(row)}\n    />\n  ) : null;\n  return (\n    <Fragment>\n      <tr\n        {...cleanAttrs(attrs)}\n        aria-rowindex={ariaRowIndex}\n        data-row-index={windowed ? rowIndex : undefined}\n        data-row-nav={rowsFocusable ? \"\" : undefined}\n        tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n        onFocus={\n          rowsFocusable\n            ? (e) => {\n                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n              }\n            : undefined\n        }\n        onKeyDown={\n          rowsFocusable\n            ? (e) => {\n                // Only the row's own key presses: Enter on a nested button\n                // or link is that control's, and Space in a nested input\n                // is a space.\n                if (e.target !== e.currentTarget) return;\n                if (e.altKey || e.ctrlKey || e.metaKey) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  // Space would otherwise scroll the table.\n                  e.preventDefault();\n                  ctx.current.onRowClick!(row);\n                  return;\n                }\n                if (e.shiftKey) return;\n                const move = ctx.current.moveFocus;\n                if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n        className={cn(\n          \"border-t border-subtle\",\n          rowInteractive && \"cursor-pointer hover:bg-hover\",\n          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n          // is not painted by every engine, an outline is.\n          rowsFocusable &&\n            \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          className,\n        )}\n        onClick={\n          rowInteractive\n            ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n                const c = ctx.current;\n                // A click on a control inside the row (a button, a link,\n                // an input the cell renders) is that control's — it must\n                // not also open the row. Cells no longer have to\n                // `stopPropagation` to get that.\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // Modifier-clicks anywhere in the row drive\n                // selection instead of expanding it (feedback #289):\n                // Ctrl/Cmd toggles a single row, Shift selects the\n                // range from the last-toggled row (inclusive of this\n                // one) — the same as the checkbox, but for the whole\n                // row, which is what the checkbox-only version was\n                // missing.\n                if (c.onToggle && c.canSelect(row)) {\n                  if (e.shiftKey) {\n                    // Drop the text selection a shift-click would\n                    // otherwise smear across the rows.\n                    window.getSelection?.()?.removeAllRanges();\n                    if (c.selectRange(rowIndex)) return;\n                    // No anchor yet: treat it as the first pick.\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                  if (e.metaKey || e.ctrlKey) {\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                }\n                c.onRowClick?.(row);\n              }\n            : undefined\n        }\n      >\n        {selectionColumn && (\n          <td\n            className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n            // Don't let selecting a row also trigger the row click\n            // (which expands/edits it).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {selectable && (\n              <input\n                type=\"checkbox\"\n                className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n                checked={selected}\n                // Shift+click selects the range from the last toggled\n                // row. `preventDefault` puts the box back, but it does NOT\n                // stop React's `onChange`: React derives a checkbox's\n                // change from the `click` itself, after the browser has\n                // already flipped `checked` and before the cancellation\n                // reverts it — so the same click also reported itself as\n                // a single toggle, and the owner got `onToggleMany` and\n                // then `onToggle` for the clicked row. The click is\n                // remembered by identity and its change is dropped; a\n                // boolean flag would outlive a click whose change never\n                // came and swallow the user's next real one.\n                onClick={(e) => {\n                  if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n                    e.preventDefault();\n                    ctx.current.markRangeClick(e.nativeEvent);\n                  }\n                }}\n                onChange={(e) => {\n                  const c = ctx.current;\n                  if (c.takeRangeClick(e.nativeEvent)) return;\n                  c.setAnchor(key);\n                  c.onToggle?.(row, e.target.checked);\n                }}\n                aria-label={selectRowLabel}\n              />\n            )}\n          </td>\n        )}\n        {columns.map((col, colIndex) => {\n          const width = widths[col.key];\n          // The caller's first, the table's over it — see `cellProps`.\n          const own = splitCellProps(col.cellProps?.(row));\n          const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <td\n              {...own.attrs}\n              key={col.key}\n              data-col={col.key}\n              style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n              className={cn(\n                \"align-top\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                width && \"overflow-hidden text-ellipsis\",\n                col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n                logicalAlign(own.className),\n                logicalAlign(col.className),\n              )}\n            >\n              {colIndex === 0 && disclosure}\n              {col === linkColumn && href ? (\n                // No `onActivate`: the click is left to bubble to the\n                // <tr> handler above, which already owns expand-vs-select.\n                // Calling it here as well would toggle the row twice.\n                <RowLink href={href} className=\"block\" data-row-link=\"\">\n                  {col.cell(row)}\n                </RowLink>\n              ) : (\n                col.cell(row)\n              )}\n            </td>\n          );\n        })}\n      </tr>\n      {expansion && (\n        <tr\n          id={hasDisclosure ? detailId : undefined}\n          aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n          data-row-detail={windowed ? rowIndex : undefined}\n          className=\"bg-surface-2 border-t border-subtle\"\n        >\n          {/* The detail panel spans every column. In an `auto` table\n              layout (the default here — columns only get fixed style\n              widths once the user resizes/auto-sizes them) the cell's\n              content preferred-width is redistributed across the\n              spanned columns, so a long expansion visibly re-sizes the\n              columns above it — and one-line content does not, since\n              its preferred width is small (feedback #104). Wrapping the\n              content in `w-0 min-w-full` pins the cell's preferred\n              width to ~0 (the explicit width:0 child), so it can never\n              perturb the columns; the div then fills to the full row\n              width only at paint time, and long text wraps within it.\n              Inside it the content is pinned to what the scroller SHOWS\n              (0.47, keksdose S4): on a table wider than its scroller a\n              table-wide panel put an inline editor's Save/Cancel off-screen.\n              `sticky start-0` holds it at the scroller's start edge (the\n              right one in RTL) as the row scrolls sideways, and\n              `--dt-visible-w` (the scroller's clientWidth, measured above)\n              sizes it; before the first measure, and in a table no wider\n              than its scroller, it is the full width as before. */}\n          <td colSpan={totalColSpan} className=\"p-0\">\n            <div className=\"w-0 min-w-full\">\n              <div\n                className={cn(\n                  \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n                  compact ? \"px-2 py-2\" : \"px-3 py-3\",\n                )}\n              >\n                {expansion}\n              </div>\n            </div>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n *  file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n  props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T>\n  extends Pick<\n    MobileRowProps<T>,\n    | \"row\"\n    | \"opensRow\"\n    | \"mobileDir\"\n    | \"mobileCardLinkable\"\n    | \"mobileCard\"\n    | \"mobilePrimaryCol\"\n    | \"mobileStatusColumns\"\n    | \"mobileSecondaryColumns\"\n    | \"mobileActionColumns\"\n    | \"mobileExpandAsDialog\"\n    | \"compact\"\n    | \"large\"\n  > {\n  ctx: RefObject<DataTableRowCtx<T>>;\n  rowKey: string | number;\n  expanded: boolean;\n  /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n  expansion: ReactNode;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  /** The table has `onRowClick`. */\n  interactive: boolean;\n  href: string | undefined;\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The table has `selection`. */\n  selectionOn: boolean;\n  selectActive: boolean;\n  selectable: boolean;\n  selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n  ctx,\n  rowKey: key,\n  expanded,\n  expansion,\n  className,\n  attrs,\n  interactive,\n  href,\n  selectionOn,\n  selectActive,\n  selectable,\n  selected,\n  ...rest\n}: DataTableMobileRowProps<T>) {\n  const { row } = rest;\n  // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n  // table derived, and the handlers read the latest props through `ctx`.\n  return (\n    <MobileRow\n      {...rest}\n      isExpanded={expanded ? yes : undefined}\n      openedRowContent={() => expansion}\n      rowClassName={() => className}\n      rowAttributes={() => attrs}\n      onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n      rowHref={href !== undefined ? () => href : undefined}\n      select={\n        selectionOn\n          ? {\n              active: selectActive,\n              selectable,\n              selected,\n              onToggle: (checked) => {\n                ctx.current.setAnchor(key);\n                ctx.current.onToggle?.(row, checked);\n              },\n              onLongPress: () => ctx.current.onLongPress(row),\n            }\n          : null\n      }\n    />\n  );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n  props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n//  * the row object, its index and its key;\n//  * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n//    selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n//    its `rowAttributes` compared key by key. The functions themselves may be inline;\n//  * the column definitions BY IDENTITY: a cell is the caller's render function, and\n//    what it reads is the caller's to say. A page that memoises its columns (keksdose's\n//    `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n//    array every render and the full re-render it always had — never a stale cell;\n//  * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n//    with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n  onRowClick: ((row: T) => void) | undefined;\n  onToggle: ((row: T, checked: boolean) => void) | undefined;\n  isSelected: (row: T) => boolean;\n  canSelect: (row: T) => boolean;\n  selectRange: (toIndex: number) => boolean;\n  /** Anchor the next Shift+click range on this row's key. */\n  setAnchor: (key: string | number) => void;\n  /** Remember the checkbox click that drew a range… */\n  markRangeClick: (e: Event) => void;\n  /** …and drop that click's own change event (true once for it). */\n  takeRangeClick: (e: Event) => boolean;\n  setFocusRowKey: (key: string | number) => void;\n  /** The phone card's long press: enter selection mode with this row selected. */\n  onLongPress: (row: T) => void;\n  /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n   *  when the key was one of them. Without it the roving walks the rendered rows. */\n  moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n *  `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n  a: Record<string, string | undefined> | undefined,\n  b: Record<string, string | undefined> | undefined,\n): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  const ak = Object.keys(a);\n  if (ak.length !== Object.keys(b).length) return false;\n  for (const k of ak) if (a[k] !== b[k]) return false;\n  return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n  for (const k of Object.keys(next) as (keyof P)[]) {\n    if (k === \"attrs\") continue;\n    if (!Object.is(prev[k], next[k])) return false;\n  }\n  return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n *  the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n  if (!(key in ROW_NAV_KEYS)) return false;\n  // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n  const table = from.closest(\"table\");\n  if (!table) return false;\n  const rows = Array.from(table.tBodies).flatMap((body) =>\n    Array.from(body.children).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n    ),\n  );\n  const i = rows.indexOf(from);\n  const target =\n    key === \"ArrowDown\"\n      ? rows[i + 1]\n      : key === \"ArrowUp\"\n        ? rows[i - 1]\n        : key === \"Home\"\n          ? rows[0]\n          : key === \"End\"\n            ? rows[rows.length - 1]\n            : undefined;\n  // At either end the key is still consumed, or ArrowDown on the last row would\n  // scroll the page out from under a focused row.\n  target?.focus();\n  return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n  row: T;\n  rowIndex: number;\n  rowKey: string | number;\n  ctx: RefObject<DataTableRowCtx<T>>;\n  columns: DataTableColumn<T>[];\n  widths: Record<string, number>;\n  growDrawn: boolean;\n  linkColumn: DataTableColumn<T> | undefined;\n  href: string | undefined;\n  /** The selection column is drawn (DataTable's `selection`). */\n  selectionColumn: boolean;\n  selectable: boolean;\n  selected: boolean;\n  expanded: boolean;\n  /** The open row's detail; `null` on a closed row. */\n  expansion: ReactNode;\n  /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n  disclosure: boolean;\n  detailId: string;\n  rowsFocusable: boolean;\n  rowInteractive: boolean;\n  tabbable: boolean;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  compact: boolean;\n  totalColSpan: number;\n  rowDetailsLabel: string;\n  selectRowLabel: string;\n  /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n   *  next), and the row is marked with its index for the window's measuring. */\n  ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n  row,\n  rowIndex,\n  rowKey: key,\n  ctx,\n  columns,\n  widths,\n  growDrawn,\n  linkColumn,\n  href,\n  selectionColumn,\n  selectable,\n  selected,\n  expanded,\n  expansion,\n  disclosure: hasDisclosure,\n  detailId,\n  rowsFocusable,\n  rowInteractive,\n  tabbable,\n  className,\n  attrs,\n  compact,\n  totalColSpan,\n  rowDetailsLabel,\n  selectRowLabel,\n  ariaRowIndex,\n}: DataTableRowProps<T>) {\n  const windowed = ariaRowIndex !== undefined;\n  // Whether the row is open, said where ARIA allows it (round 0.34, the\n  // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n  // table's, and the <tr> wore it. A disclosure button in the first cell carries\n  // it now, with `aria-controls` on the detail row while that is there.\n  // Visually hidden and not a tab stop: the row stays the one roving stop, with\n  // Enter/Space and the whole-row click — this is the screen reader cursor's\n  // way in, and where it hears the state. Named by `aria-label`, so the cell's\n  // text stays the cell's own.\n  const disclosure = hasDisclosure ? (\n    <button\n      type=\"button\"\n      tabIndex={-1}\n      className=\"sr-only-fixed\"\n      aria-label={rowDetailsLabel}\n      aria-expanded={expanded}\n      aria-controls={expansion ? detailId : undefined}\n      // The row's own handler leaves a click on a control inside it alone.\n      onClick={() => ctx.current.onRowClick!(row)}\n    />\n  ) : null;\n  return (\n    <Fragment>\n      <tr\n        {...cleanAttrs(attrs)}\n        aria-rowindex={ariaRowIndex}\n        data-row-index={windowed ? rowIndex : undefined}\n        data-row-nav={rowsFocusable ? \"\" : undefined}\n        tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n        onFocus={\n          rowsFocusable\n            ? (e) => {\n                if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n              }\n            : undefined\n        }\n        onKeyDown={\n          rowsFocusable\n            ? (e) => {\n                // Only the row's own key presses: Enter on a nested button\n                // or link is that control's, and Space in a nested input\n                // is a space.\n                if (e.target !== e.currentTarget) return;\n                if (e.altKey || e.ctrlKey || e.metaKey) return;\n                if (e.key === \"Enter\" || e.key === \" \") {\n                  // Space would otherwise scroll the table.\n                  e.preventDefault();\n                  ctx.current.onRowClick!(row);\n                  return;\n                }\n                if (e.shiftKey) return;\n                const move = ctx.current.moveFocus;\n                if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n              }\n            : undefined\n        }\n        className={cn(\n          \"border-t border-subtle\",\n          rowInteractive && \"cursor-pointer hover:bg-hover\",\n          // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n          // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n          // is not painted by every engine, an outline is.\n          rowsFocusable &&\n            \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n          className,\n        )}\n        onClick={\n          rowInteractive\n            ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n                const c = ctx.current;\n                // A click on a control inside the row (a button, a link,\n                // an input the cell renders) is that control's — it must\n                // not also open the row. Cells no longer have to\n                // `stopPropagation` to get that.\n                if (fromOwnControl(e.target, e.currentTarget)) return;\n                if (fromOutside(e.target, e.currentTarget)) return;\n                // Modifier-clicks anywhere in the row drive\n                // selection instead of expanding it (feedback #289):\n                // Ctrl/Cmd toggles a single row, Shift selects the\n                // range from the last-toggled row (inclusive of this\n                // one) — the same as the checkbox, but for the whole\n                // row, which is what the checkbox-only version was\n                // missing.\n                if (c.onToggle && c.canSelect(row)) {\n                  if (e.shiftKey) {\n                    // Drop the text selection a shift-click would\n                    // otherwise smear across the rows.\n                    window.getSelection?.()?.removeAllRanges();\n                    if (c.selectRange(rowIndex)) return;\n                    // No anchor yet: treat it as the first pick.\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                  if (e.metaKey || e.ctrlKey) {\n                    c.setAnchor(key);\n                    c.onToggle(row, !c.isSelected(row));\n                    return;\n                  }\n                }\n                c.onRowClick?.(row);\n              }\n            : undefined\n        }\n      >\n        {selectionColumn && (\n          <td\n            className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n            // Don't let selecting a row also trigger the row click\n            // (which expands/edits it).\n            onClick={(e) => e.stopPropagation()}\n          >\n            {selectable && (\n              <input\n                type=\"checkbox\"\n                className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n                checked={selected}\n                // Shift+click selects the range from the last toggled\n                // row. `preventDefault` puts the box back, but it does NOT\n                // stop React's `onChange`: React derives a checkbox's\n                // change from the `click` itself, after the browser has\n                // already flipped `checked` and before the cancellation\n                // reverts it — so the same click also reported itself as\n                // a single toggle, and the owner got `onToggleMany` and\n                // then `onToggle` for the clicked row. The click is\n                // remembered by identity and its change is dropped; a\n                // boolean flag would outlive a click whose change never\n                // came and swallow the user's next real one.\n                onClick={(e) => {\n                  if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n                    e.preventDefault();\n                    ctx.current.markRangeClick(e.nativeEvent);\n                  }\n                }}\n                onChange={(e) => {\n                  const c = ctx.current;\n                  if (c.takeRangeClick(e.nativeEvent)) return;\n                  c.setAnchor(key);\n                  c.onToggle?.(row, e.target.checked);\n                }}\n                aria-label={selectRowLabel}\n              />\n            )}\n          </td>\n        )}\n        {columns.map((col, colIndex) => {\n          const width = widths[col.key];\n          // The caller's first, the table's over it — see `cellProps`.\n          const own = splitCellProps(col.cellProps?.(row));\n          const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n          return (\n            <td\n              {...own.attrs}\n              key={col.key}\n              data-col={col.key}\n              style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n              className={cn(\n                \"align-top\",\n                compact ? \"px-2 py-1\" : \"px-3 py-2\",\n                width && \"overflow-hidden text-ellipsis\",\n                col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n                logicalAlign(own.className),\n                logicalAlign(col.className),\n              )}\n            >\n              {colIndex === 0 && disclosure}\n              {col === linkColumn && href ? (\n                // No `onActivate`: the click is left to bubble to the\n                // <tr> handler above, which already owns expand-vs-select.\n                // Calling it here as well would toggle the row twice.\n                <RowLink href={href} className=\"block\" data-row-link=\"\">\n                  {col.cell(row)}\n                </RowLink>\n              ) : (\n                col.cell(row)\n              )}\n            </td>\n          );\n        })}\n      </tr>\n      {expansion && (\n        <tr\n          id={hasDisclosure ? detailId : undefined}\n          aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n          data-row-detail={windowed ? rowIndex : undefined}\n          className=\"bg-surface-2 border-t border-subtle\"\n        >\n          {/* The detail panel spans every column. In an `auto` table\n              layout (the default here — columns only get fixed style\n              widths once the user resizes/auto-sizes them) the cell's\n              content preferred-width is redistributed across the\n              spanned columns, so a long expansion visibly re-sizes the\n              columns above it — and one-line content does not, since\n              its preferred width is small (feedback #104). Wrapping the\n              content in `w-0 min-w-full` pins the cell's preferred\n              width to ~0 (the explicit width:0 child), so it can never\n              perturb the columns; the div then fills to the full row\n              width only at paint time, and long text wraps within it.\n              Inside it the content is pinned to what the scroller SHOWS\n              (0.47, keksdose S4): on a table wider than its scroller a\n              table-wide panel put an inline editor's Save/Cancel off-screen.\n              `sticky start-0` holds it at the scroller's start edge (the\n              right one in RTL) as the row scrolls sideways, and\n              `--dt-visible-w` (the scroller's clientWidth, measured above)\n              sizes it; before the first measure, and in a table no wider\n              than its scroller, it is the full width as before. */}\n          <td colSpan={totalColSpan} className=\"p-0\">\n            <div className=\"w-0 min-w-full\">\n              <div\n                className={cn(\n                  \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n                  compact ? \"px-2 py-2\" : \"px-3 py-3\",\n                )}\n              >\n                {expansion}\n              </div>\n            </div>\n          </td>\n        </tr>\n      )}\n    </Fragment>\n  );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n *  file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n  props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T>\n  extends Pick<\n    MobileRowProps<T>,\n    | \"row\"\n    | \"opensRow\"\n    | \"mobileDir\"\n    | \"mobileCardLinkable\"\n    | \"mobileCardStretched\"\n    | \"mobileCard\"\n    | \"mobilePrimaryCol\"\n    | \"mobileStatusColumns\"\n    | \"mobileSecondaryColumns\"\n    | \"mobileActionColumns\"\n    | \"mobileExpandAsDialog\"\n    | \"compact\"\n    | \"large\"\n  > {\n  ctx: RefObject<DataTableRowCtx<T>>;\n  rowKey: string | number;\n  expanded: boolean;\n  /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n  expansion: ReactNode;\n  className: string | undefined;\n  attrs: Record<string, string | undefined> | undefined;\n  /** The table has `onRowClick`. */\n  interactive: boolean;\n  href: string | undefined;\n  /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n  swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n  /** The table has `selection`. */\n  selectionOn: boolean;\n  selectActive: boolean;\n  selectable: boolean;\n  selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n  ctx,\n  rowKey: key,\n  expanded,\n  expansion,\n  className,\n  attrs,\n  interactive,\n  href,\n  selectionOn,\n  selectActive,\n  selectable,\n  selected,\n  ...rest\n}: DataTableMobileRowProps<T>) {\n  const { row } = rest;\n  // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n  // table derived, and the handlers read the latest props through `ctx`.\n  return (\n    <MobileRow\n      {...rest}\n      isExpanded={expanded ? yes : undefined}\n      openedRowContent={() => expansion}\n      rowClassName={() => className}\n      rowAttributes={() => attrs}\n      onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n      rowHref={href !== undefined ? () => href : undefined}\n      select={\n        selectionOn\n          ? {\n              active: selectActive,\n              selectable,\n              selected,\n              onToggle: (checked) => {\n                ctx.current.setAnchor(key);\n                ctx.current.onToggle?.(row, checked);\n              },\n              onLongPress: () => ctx.current.onLongPress(row),\n            }\n          : null\n      }\n    />\n  );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n  props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}

package/dist/components/data-table.js

@@ -390,6 +390,7 @@ function DataTable({
     ] });
   };
   const mobileCardLinkable = (mobileCard ? mobileColumns : [...onCard]).every((c) => !keepsOwnClicks(c));
+  const mobileCardStretched = !mobileCard && !mobileCardLinkable && !!mobilePrimaryCol && !keepsOwnClicks(mobilePrimaryCol);
   const [mobileDir, setMobileDir] = useState("ltr");
   const mobileRootRef = (el) => {
     if (!el) return;
@@ -485,10 +486,11 @@ function DataTable({
         className: rowClassName?.(row),
         attrs: rowAttributes?.(row),
         interactive: !!onRowClick,
-        href: mobileCardLinkable ? rowHref?.(row) : void 0,
+        href: mobileCardLinkable || mobileCardStretched ? rowHref?.(row) : void 0,
         swipeActionsFor,
         mobileDir,
         mobileCardLinkable,
+        mobileCardStretched,
         mobileCard,
         mobilePrimaryCol,
         mobileStatusColumns,