@eifi1/ui-kit 0.33.0 → 0.34.0

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

@@ -54,18 +54,18 @@ function Pagination({
     {
       "data-density": density,
       className: cn(
-        "flex flex-wrap items-center justify-between gap-2 border-t border-[var(--border)] text-xs text-[var(--text-secondary)]",
+        "flex flex-wrap items-center justify-between gap-2 border-t border-subtle text-xs text-secondary",
         compact ? "px-2 py-1" : "px-3 py-2"
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { children: pageSize === Infinity ? labels.rowCount(total) : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total) }),
+          /* @__PURE__ */ jsx("span", { children: pageSize === Infinity || total === 0 ? labels.rowCount(total) : labels.pageRange(page * pageSize + 1, Math.min(total, (page + 1) * pageSize), total) }),
           onPageSize && /* @__PURE__ */ jsxs(
             "select",
             {
               value: pageSize === Infinity ? "all" : pageSize,
               onChange: (e) => onPageSize(e.target.value === "all" ? Infinity : Number(e.target.value)),
-              className: "rounded border border-[var(--border)] bg-[var(--bg-surface)] px-1 py-0.5 text-xs",
+              className: "rounded border border-subtle bg-surface px-1 py-0.5 text-xs",
               "aria-label": labels.pageSize,
               children: [
                 sizeOptions(pageSize).map((n) => /* @__PURE__ */ jsx("option", { value: n, children: num.format(n) }, n)),
@@ -81,13 +81,13 @@ function Pagination({
               type: "button",
               onClick: () => onPage(Math.max(0, page - 1)),
               disabled: page === 0,
-              className: cn("rounded hover:bg-[var(--bg-hover)] disabled:opacity-40", compact ? "p-0.5" : "p-1"),
+              className: cn("rounded hover:bg-hover disabled:opacity-40", compact ? "p-0.5" : "p-1"),
               "aria-label": labels.prevPage,
               children: /* @__PURE__ */ jsx(ChevronLeft, { className: cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4") })
             }
           ),
           /* @__PURE__ */ jsx("div", { "data-slot": "page-numbers", className: PAGE_NUMBERS, children: items.map(
-            (it, i) => it === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-[var(--text-placeholder)]", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
+            (it, i) => it === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "px-1 text-placeholder", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -96,7 +96,7 @@ function Pagination({
                 className: cn(
                   "rounded",
                   compact ? "min-w-6 px-1.5 py-0" : "min-w-7 px-2 py-0.5",
-                  it === page ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "hover:bg-[var(--bg-hover)]"
+                  it === page ? "bg-inverse text-inverse" : "hover:bg-hover"
                 ),
                 children: num.format(it + 1)
               },
@@ -109,7 +109,7 @@ function Pagination({
               type: "button",
               onClick: () => onPage(Math.min(totalPages - 1, page + 1)),
               disabled: page >= totalPages - 1,
-              className: cn("rounded hover:bg-[var(--bg-hover)] disabled:opacity-40", compact ? "p-0.5" : "p-1"),
+              className: cn("rounded hover:bg-hover disabled:opacity-40", compact ? "p-0.5" : "p-1"),
               "aria-label": labels.nextPage,
               children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("rtl:-scale-x-100", compact ? "size-3.5" : "size-4") })
             }

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

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

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

@@ -0,0 +1,37 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { DataTableColumn } from "./data-table.js";
+/**
+ * The resize handles' pointer handlers, and the column panel's "Auto-size".
+ *
+ * Pointer events with capture, rather than a `mousemove`/`mouseup` pair on `window`.
+ * Three defects in one eleven-line handler (audit 2026-09-22):
+ *
+ *  * a `setWidths` per `mousemove` re-rendered every row of the table on every pixel
+ *    of the drag — on a 500-row table that is the whole body, sixty times a second;
+ *  * the two `window` listeners were added from inside an event handler, so nothing
+ *    removed them if the table unmounted mid-drag (the row beneath opens a route),
+ *    and `document.body.style` stayed at `user-select: none; cursor: col-resize` for
+ *    the rest of the session — the whole page unselectable, with the wrong cursor;
+ *  * `mousedown` is a mouse. Under a finger the handle did nothing at all.
+ *
+ * `setPointerCapture` answers all three: the handle itself receives every move and
+ * the terminating `pointerup`/`pointercancel` wherever the pointer travels, so there
+ * is nothing global to leak, and a touch drag works because a finger is a pointer.
+ * The live width is written straight onto the column's own cells — the same three
+ * properties the render sets, so the drag and the commit cannot disagree — and
+ * `setWidths` is called once, when the drag ends.
+ */
+export declare function useColumnResize<T>({ headRefs, widths, setWidths, columns, hiddenCols, }: {
+    /** The header cells by column key, as the `<th>`s' ref callbacks fill it. */
+    headRefs: Map<string, HTMLTableCellElement>;
+    /** The widths React renders the columns at. */
+    widths: Record<string, number>;
+    setWidths: Dispatch<SetStateAction<Record<string, number>>>;
+    columns: DataTableColumn<T>[];
+    hiddenCols: Set<string>;
+}): {
+    startResize: (e: React.PointerEvent<HTMLElement>, key: string) => void;
+    moveResize: (e: React.PointerEvent<HTMLElement>) => void;
+    finishResize: (e: React.PointerEvent<HTMLElement>, commit: boolean) => void;
+    autoSizeAll: () => void;
+};

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

@@ -0,0 +1,103 @@
+"use client";
+import { useEffect, useRef } from "react";
+import { isRtl } from "../lib/direction.js";
+function useColumnResize({
+  headRefs,
+  widths,
+  setWidths,
+  columns,
+  hiddenCols
+}) {
+  const resizing = useRef(null);
+  const columnCells = (key) => {
+    const th = headRefs.get(key);
+    if (!th) return [];
+    const table = th.closest("table");
+    if (!table) return [th];
+    return [
+      th,
+      ...Array.from(table.querySelectorAll("tbody [data-col], tfoot [data-col]")).filter(
+        (el) => el.dataset.col === key
+      )
+    ];
+  };
+  const applyLiveWidth = (cells, width) => {
+    const px = width == null ? "" : `${width}px`;
+    for (const el of cells) {
+      el.style.width = px;
+      el.style.minWidth = px;
+      el.style.maxWidth = px;
+    }
+  };
+  const releaseResizeChrome = (handle, pointerId) => {
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+    if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture?.(pointerId);
+  };
+  const startResize = (e, key) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const th = headRefs.get(key);
+    const startWidth = th?.getBoundingClientRect().width ?? 100;
+    resizing.current = {
+      key,
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startWidth,
+      sign: isRtl(e.currentTarget) ? -1 : 1,
+      hadWidth: widths[key],
+      cells: columnCells(key),
+      width: startWidth,
+      moved: false
+    };
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+  };
+  const moveResize = (e) => {
+    const drag = resizing.current;
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    drag.width = Math.max(40, Math.round(drag.startWidth + drag.sign * (e.clientX - drag.startX)));
+    drag.moved = true;
+    applyLiveWidth(drag.cells, drag.width);
+  };
+  const finishResize = (e, commit) => {
+    const drag = resizing.current;
+    releaseResizeChrome(e.currentTarget, e.pointerId);
+    if (!drag || drag.pointerId !== e.pointerId) return;
+    resizing.current = null;
+    if (commit && drag.moved) {
+      setWidths((w) => ({ ...w, [drag.key]: drag.width }));
+      return;
+    }
+    applyLiveWidth(drag.cells, drag.hadWidth);
+  };
+  useEffect(
+    () => () => {
+      if (!resizing.current) return;
+      resizing.current = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    },
+    []
+  );
+  const autoSizeAll = () => {
+    setWidths({});
+    requestAnimationFrame(() => {
+      const next = {};
+      const cols = columns.filter((c) => !hiddenCols.has(c.key));
+      cols.forEach((col, idx) => {
+        if (idx === cols.length - 1) return;
+        const th = headRefs.get(col.key);
+        if (th) next[col.key] = Math.ceil(th.getBoundingClientRect().width);
+      });
+      setWidths(next);
+    });
+  };
+  return { startResize, moveResize, finishResize, autoSizeAll };
+}
+export {
+  useColumnResize
+};
+//# sourceMappingURL=data-table-resize.js.map

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

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

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

@@ -0,0 +1,24 @@
+import type { DataTableLabels } from "./data-table-labels.js";
+import type { DataTableColumn, DataTableDensity, DataTableProps, MobileSwipeActions } from "./data-table.js";
+/** The actions column's key. Not a column a caller declares, so it is kept out of the
+ *  column-settings panel. */
+export declare const ROW_ACTIONS_KEY = "__rowActions";
+/**
+ * The caller's columns with the actions column appended, and the same actions as a
+ * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes
+ * `mobileSwipeActions`). Without `rowActions` the columns come back as given.
+ *
+ * The actions column is appended to the caller's columns rather than drawn as a
+ * second special case beside the selection column: it then gets the cell padding,
+ * the widths and the phone rules (`mobileHidden`) every other column gets.
+ */
+export declare function useRowActionColumn<T>({ columns: columnsProp, rowActions, rowName, labels, density, }: {
+    columns: DataTableColumn<T>[];
+    rowActions: DataTableProps<T>["rowActions"];
+    rowName: DataTableProps<T>["rowName"];
+    labels: DataTableLabels;
+    density: DataTableDensity;
+}): {
+    columns: DataTableColumn<T>[];
+    swipesFromActions: (row: T) => MobileSwipeActions | null;
+};

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

@@ -0,0 +1,95 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { isValidElement, useCallback, useMemo } from "react";
+import { Pencil, Trash2 } from "lucide-react";
+import { RowActions } from "./row-actions.js";
+const ROW_ACTIONS_KEY = "__rowActions";
+function resolveRowAction(action, index, labels) {
+  const tone = action.tone ?? (action.kind === "delete" ? "danger" : "default");
+  return {
+    key: action.kind ?? `${index}:${action.label ?? ""}`,
+    label: action.label ?? (action.kind === "edit" ? labels.edit : action.kind === "delete" ? labels.delete : ""),
+    icon: action.icon ?? (action.kind === "edit" ? /* @__PURE__ */ jsx(Pencil, {}) : action.kind === "delete" ? /* @__PURE__ */ jsx(Trash2, {}) : null),
+    tone,
+    swipe: action.swipe ?? (tone === "danger" ? "start" : "end"),
+    action
+  };
+}
+async function runRowAction(action, row) {
+  if (action.confirm && !await action.confirm(row)) return;
+  action.onAction(row);
+}
+function toRowAction(a, row) {
+  return {
+    key: a.key,
+    label: a.label,
+    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? /* @__PURE__ */ jsx(Fragment, { children: a.icon }) : void 0,
+    tone: a.tone,
+    disabledReason: a.action.disabledReason?.(row),
+    onSelect: () => void runRowAction(a.action, row)
+  };
+}
+function useRowActionColumn({
+  columns: columnsProp,
+  rowActions,
+  rowName,
+  labels,
+  density
+}) {
+  const rowActionsFor = useCallback(
+    (row) => rowActions ? (typeof rowActions === "function" ? rowActions(row) : rowActions).filter((a) => !a.hidden?.(row)).map((a, i) => resolveRowAction(a, i, labels)) : [],
+    [rowActions, labels]
+  );
+  const columns = useMemo(
+    () => rowActions ? [
+      ...columnsProp,
+      {
+        key: ROW_ACTIONS_KEY,
+        header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.actions }),
+        // Through RowActions (0.32, §10.8): the icons inline at Normal, one "⋯"
+        // menu at Large once there are two — every label at once does not fit a
+        // row. Each control stops its own click: the row's handler already skips
+        // its controls, and this is for the caller who wraps the table in a
+        // clickable element of their own.
+        cell: (row) => /* @__PURE__ */ jsx(
+          RowActions,
+          {
+            actions: rowActionsFor(row).map((a) => toRowAction(a, row)),
+            name: rowName?.(row),
+            size: density === "compact" ? "2xs" : "xs",
+            labels: { actions: labels.actions },
+            className: "justify-end"
+          }
+        ),
+        className: "w-px whitespace-nowrap text-end",
+        headClassName: "w-px",
+        // On a phone the same actions are the card's swipes.
+        mobileHidden: true,
+        noRowLink: true
+      }
+    ] : columnsProp,
+    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density]
+  );
+  const swipesFromActions = (row) => {
+    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));
+    if (!swipes.length) return null;
+    const toSwipe = (a) => ({
+      label: a.label,
+      icon: a.icon,
+      onCommit: () => void runRowAction(a.action, row),
+      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill
+      // and that fill's foreground armed (0.33).
+      tone: a.tone === "danger" ? "danger" : "brand"
+    });
+    return {
+      start: swipes.filter((a) => a.swipe === "start").map(toSwipe),
+      end: swipes.filter((a) => a.swipe === "end").map(toSwipe)
+    };
+  };
+  return { columns, swipesFromActions };
+}
+export {
+  ROW_ACTIONS_KEY,
+  useRowActionColumn
+};
+//# sourceMappingURL=data-table-row-actions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-row-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Pencil, Trash2 } from \"lucide-react\";\nimport { RowActions, type RowAction } from \"./row-actions\";\nimport type { SwipeAction } from \"./swipeable-row\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport type {\n  DataTableColumn,\n  DataTableDensity,\n  DataTableProps,\n  DataTableRowAction,\n  MobileSwipeActions,\n} from \"./data-table\";\n\n// DataTable's per-row actions (`rowActions`): the actions column on a wide screen and\n// the swipes on a phone card. Moved out of data-table.tsx whole (refactor audit\n// 2026-10, MOD-3 step 1); internal — the public types stay in data-table.tsx.\n\n/** The actions column's key. Not a column a caller declares, so it is kept out of the\n *  column-settings panel. */\nexport const ROW_ACTIONS_KEY = \"__rowActions\";\n\ninterface ResolvedRowAction<T> {\n  key: string;\n  label: string;\n  icon: ReactNode;\n  tone: \"default\" | \"danger\";\n  swipe: \"start\" | \"end\" | false;\n  action: DataTableRowAction<T>;\n}\n\nfunction resolveRowAction<T>(\n  action: DataTableRowAction<T>,\n  index: number,\n  labels: DataTableLabels,\n): ResolvedRowAction<T> {\n  const tone = action.tone ?? (action.kind === \"delete\" ? \"danger\" : \"default\");\n  return {\n    key: action.kind ?? `${index}:${action.label ?? \"\"}`,\n    label: action.label ?? (action.kind === \"edit\" ? labels.edit : action.kind === \"delete\" ? labels.delete : \"\"),\n    icon:\n      action.icon ??\n      (action.kind === \"edit\" ? <Pencil /> : action.kind === \"delete\" ? <Trash2 /> : null),\n    tone,\n    swipe: action.swipe ?? (tone === \"danger\" ? \"start\" : \"end\"),\n    action,\n  };\n}\n\n/** Ask, then act. */\nasync function runRowAction<T>(action: DataTableRowAction<T>, row: T): Promise<void> {\n  if (action.confirm && !(await action.confirm(row))) return;\n  action.onAction(row);\n}\n\n/** A resolved row action as {@link RowActions} takes it. Its `icon` is any node; a\n *  non-element one (a string glyph) is wrapped, since RowAction wants an element. */\nfunction toRowAction<T>(a: ResolvedRowAction<T>, row: T): RowAction {\n  return {\n    key: a.key,\n    label: a.label,\n    icon: isValidElement(a.icon) ? a.icon : a.icon != null && a.icon !== false ? <>{a.icon}</> : undefined,\n    tone: a.tone,\n    disabledReason: a.action.disabledReason?.(row),\n    onSelect: () => void runRowAction(a.action, row),\n  };\n}\n\n/**\n * The caller's columns with the actions column appended, and the same actions as a\n * phone card's swipes (`swipesFromActions`; DataTable uses it unless the caller passes\n * `mobileSwipeActions`). Without `rowActions` the columns come back as given.\n *\n * The actions column is appended to the caller's columns rather than drawn as a\n * second special case beside the selection column: it then gets the cell padding,\n * the widths and the phone rules (`mobileHidden`) every other column gets.\n */\nexport function useRowActionColumn<T>({\n  columns: columnsProp,\n  rowActions,\n  rowName,\n  labels,\n  density,\n}: {\n  columns: DataTableColumn<T>[];\n  rowActions: DataTableProps<T>[\"rowActions\"];\n  rowName: DataTableProps<T>[\"rowName\"];\n  labels: DataTableLabels;\n  density: DataTableDensity;\n}): {\n  columns: DataTableColumn<T>[];\n  swipesFromActions: (row: T) => MobileSwipeActions | null;\n} {\n  const rowActionsFor = useCallback(\n    (row: T): ResolvedRowAction<T>[] =>\n      rowActions\n        ? (typeof rowActions === \"function\" ? rowActions(row) : rowActions)\n            .filter((a) => !a.hidden?.(row))\n            .map((a, i) => resolveRowAction(a, i, labels))\n        : [],\n    [rowActions, labels],\n  );\n  const columns = useMemo<DataTableColumn<T>[]>(\n    () =>\n      rowActions\n        ? [\n            ...columnsProp,\n            {\n              key: ROW_ACTIONS_KEY,\n              header: <span className=\"sr-only\">{labels.actions}</span>,\n              // Through RowActions (0.32, §10.8): the icons inline at Normal, one \"⋯\"\n              // menu at Large once there are two — every label at once does not fit a\n              // row. Each control stops its own click: the row's handler already skips\n              // its controls, and this is for the caller who wraps the table in a\n              // clickable element of their own.\n              cell: (row) => (\n                <RowActions\n                  actions={rowActionsFor(row).map((a) => toRowAction(a, row))}\n                  name={rowName?.(row)}\n                  size={density === \"compact\" ? \"2xs\" : \"xs\"}\n                  labels={{ actions: labels.actions }}\n                  className=\"justify-end\"\n                />\n              ),\n              className: \"w-px whitespace-nowrap text-end\",\n              headClassName: \"w-px\",\n              // On a phone the same actions are the card's swipes.\n              mobileHidden: true,\n              noRowLink: true,\n            },\n          ]\n        : columnsProp,\n    [columnsProp, rowActions, rowActionsFor, rowName, labels.actions, density],\n  );\n  const swipesFromActions = (row: T): MobileSwipeActions | null => {\n    const swipes = rowActionsFor(row).filter((a) => a.swipe && !a.action.disabledReason?.(row));\n    if (!swipes.length) return null;\n    const toSwipe = (a: ResolvedRowAction<T>): SwipeAction => ({\n      label: a.label,\n      icon: a.icon,\n      onCommit: () => void runRowAction(a.action, row),\n      // The row action's tone, painted by SwipeableRow: its soft wash idle, its fill\n      // and that fill's foreground armed (0.33).\n      tone: a.tone === \"danger\" ? \"danger\" : \"brand\",\n    });\n    return {\n      start: swipes.filter((a) => a.swipe === \"start\").map(toSwipe),\n      end: swipes.filter((a) => a.swipe === \"end\").map(toSwipe),\n    };\n  };\n  return { columns, swipesFromActions };\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,21 @@
+import type { DataTableProps } from "./data-table.js";
+/**
+ * The anchor a Shift+click draws its range from, and the range itself.
+ *
+ * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or
+ * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the
+ * `i`th row of `slice`, and answers false when there is no range on screen to draw.
+ * `rangeClick` remembers the checkbox click that drew one, so that click's own
+ * `onChange` can be told apart and dropped.
+ */
+export declare function useRangeSelection<T>({ selection, slice, rowKey, }: {
+    selection: DataTableProps<T>["selection"];
+    /** The rows on screen, in the order shown. */
+    slice: T[];
+    rowKey: (row: T) => string | number;
+}): {
+    selectionAnchor: import("react").RefObject<string | number | null>;
+    rangeClick: import("react").RefObject<Event | null>;
+    canSelect: (row: T) => boolean;
+    selectRange: (toIndex: number) => boolean;
+};

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

@@ -0,0 +1,30 @@
+"use client";
+import { useRef } from "react";
+function useRangeSelection({
+  selection,
+  slice,
+  rowKey
+}) {
+  const selectionAnchor = useRef(null);
+  const rangeClick = useRef(null);
+  const canSelect = (row) => !!selection && (selection.isSelectable?.(row) ?? true);
+  const selectRange = (toIndex) => {
+    if (!selection || selectionAnchor.current === null) return false;
+    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);
+    if (fromIndex < 0) return false;
+    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);
+    const range = [];
+    for (let i = lo; i <= hi; i++) {
+      const r = slice[i];
+      if (r && canSelect(r)) range.push(r);
+    }
+    if (selection.onToggleMany) selection.onToggleMany(range, true);
+    else for (const r of range) selection.onToggle(r, true);
+    return true;
+  };
+  return { selectionAnchor, rangeClick, canSelect, selectRange };
+}
+export {
+  useRangeSelection
+};
+//# sourceMappingURL=data-table-selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/data-table-selection.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport type { DataTableProps } from \"./data-table\";\n\n// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx\n// whole (refactor audit 2026-10, MOD-3 step 3).\n\n/**\n * The anchor a Shift+click draws its range from, and the range itself.\n *\n * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or\n * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the\n * `i`th row of `slice`, and answers false when there is no range on screen to draw.\n * `rangeClick` remembers the checkbox click that drew one, so that click's own\n * `onChange` can be told apart and dropped.\n */\nexport function useRangeSelection<T>({\n  selection,\n  slice,\n  rowKey,\n}: {\n  selection: DataTableProps<T>[\"selection\"];\n  /** The rows on screen, in the order shown. */\n  slice: T[];\n  rowKey: (row: T) => string | number;\n}) {\n  // The row whose selection was last toggled, so Shift+click can select the range up\n  // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is\n  // re-derived from the current sort, filter and page, so an index taken before a\n  // header was clicked addresses a different row afterwards — and the range then ran\n  // from a row the user had never touched.\n  const selectionAnchor = useRef<string | number | null>(null);\n  /** The checkbox click that drew a range, so its `onChange` can be told apart. */\n  const rangeClick = useRef<Event | null>(null);\n  const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);\n  const selectRange = (toIndex: number) => {\n    if (!selection || selectionAnchor.current === null) return false;\n    const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);\n    // The anchor has been filtered, sorted or paged off the screen: there is no range\n    // on display to draw, so the click falls through to the plain single-row toggle.\n    if (fromIndex < 0) return false;\n    const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);\n    const range: T[] = [];\n    for (let i = lo; i <= hi; i++) {\n      const r = slice[i];\n      if (r && canSelect(r)) range.push(r);\n    }\n    // One call where the owner can take one. See `selection.onToggleMany`: the row-by-\n    // row loop below is the fallback for an owner that has not adopted it, not the\n    // shape this should be in.\n    if (selection.onToggleMany) selection.onToggleMany(range, true);\n    else for (const r of range) selection.onToggle(r, true);\n    return true;\n  };\n  return { selectionAnchor, rangeClick, canSelect, selectRange };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAehB,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAMD,QAAM,kBAAkB,OAA+B,IAAI;AAE3D,QAAM,aAAa,OAAqB,IAAI;AAC5C,QAAM,YAAY,CAAC,QAAW,CAAC,CAAC,cAAc,UAAU,eAAe,GAAG,KAAK;AAC/E,QAAM,cAAc,CAAC,YAAoB;AACvC,QAAI,CAAC,aAAa,gBAAgB,YAAY,KAAM,QAAO;AAC3D,UAAM,YAAY,MAAM,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,gBAAgB,OAAO;AAG9E,QAAI,YAAY,EAAG,QAAO;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC1D,UAAM,QAAa,CAAC;AACpB,aAAS,IAAI,IAAI,KAAK,IAAI,KAAK;AAC7B,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,UAAU,CAAC,EAAG,OAAM,KAAK,CAAC;AAAA,IACrC;AAIA,QAAI,UAAU,aAAc,WAAU,aAAa,OAAO,IAAI;AAAA,QACzD,YAAW,KAAK,MAAO,WAAU,SAAS,GAAG,IAAI;AACtD,WAAO;AAAA,EACT;AACA,SAAO,EAAE,iBAAiB,YAAY,WAAW,YAAY;AAC/D;","names":[]}

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

@@ -0,0 +1,77 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { DataTableLabels } from "./data-table-labels.js";
+import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table.js";
+/**
+ * Split a caller's cell attributes into what may reach the element and what the kit
+ * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and
+ * `style` come back separately so the kit can merge rather than replace them.
+ */
+export declare function splitCellProps(props: DataTableCellProps | DataTableHeadProps | undefined): {
+    attrs: Record<string, unknown>;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * A column's `className`/`headClassName` with physical text alignment rewritten to
+ * logical: `text-right` → `text-end`, `text-left` → `text-start`.
+ *
+ * Every numeric column written before 0.7.0 says `text-right`, and that is what it
+ * MEANT: the end of the line, where digits line up. Rendered as written, a
+ * right-to-left table puts those numbers on the far side from their own header's
+ * sort button. Rewriting keeps each existing call site correct in both directions
+ * with no change on its side; a caller who genuinely wants the physical side in RTL
+ * too can say `ltr:text-right rtl:text-right`, which this leaves alone.
+ */
+export declare function logicalAlign(className: string | undefined): string | undefined;
+/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a
+ *  caller can write `{ "data-x": cond ? "y" : undefined }` and get no attribute
+ *  at all rather than the string "undefined" in the DOM. */
+export declare function cleanAttrs(attrs: Record<string, string | undefined> | undefined): Record<string, string> | undefined;
+/**
+ * A column's name as a plain string.
+ *
+ * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and
+ * neither a live region nor the column-settings checklist can speak a React element.
+ * The `key` fallback is the one the settings panel has always used; a column whose
+ * header is not a string and whose key is not human-readable is a call site that
+ * should pass a string header, and that is visible in what gets announced.
+ */
+export declare function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string;
+/**
+ * Whether a click that reached `row`'s handler did not start in the row's own DOM.
+ *
+ * React bubbles an event through the COMPONENT tree, portals included: a popover, a
+ * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but
+ * still reports its clicks to every React ancestor — the row among them. So a click
+ * in a cell's portalled date picker opened the row it came from, and a page wrapped
+ * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's
+ * feedback page did, round its comments). The row owns the clicks on the row.
+ */
+export declare function fromOutside(target: EventTarget | null, row: HTMLElement): boolean;
+/**
+ * The anchor a linkable row is opened through (Keksdose feedback #451).
+ *
+ * The plain left click is OURS: cancelled, then handed to the row's own handler, so
+ * clicking a row still expands it in place instead of reloading the page. Every
+ * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is
+ * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:
+ * that imitation buys back the middle click and still loses ⌘/Ctrl-click, "copy link
+ * address", the status-bar preview and the phone's long-press menu.
+ *
+ * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and
+ * Shift-click on a row mean "select" (feedback #289), and a row must not change its
+ * selection while the browser is opening a tab. The rest of the row still selects —
+ * the link is one cell, not the row.
+ *
+ * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as
+ * a link-drag: that is both drag-to-select-text on the desktop table and the mouse
+ * path through SwipeableRow's gesture on the mobile card.
+ */
+export declare function RowLink({ href, onActivate, className, children, ...rest }: {
+    href: string;
+    /** Runs on a plain left click. Omit it where an ANCESTOR already handles the
+     *  click (the desktop `<tr>`), or the row would toggle twice. */
+    onActivate?: () => void;
+    className?: string;
+    children: ReactNode;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className" | "children" | "onClick" | "onClickCapture">): import("react").JSX.Element;

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

@@ -0,0 +1,77 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ROW_ACTIONS_KEY } from "./data-table-row-actions.js";
+function splitCellProps(props) {
+  if (!props) return { attrs: {} };
+  const {
+    className,
+    style,
+    role: _role,
+    "data-col": _col,
+    ...attrs
+  } = props;
+  return { attrs, className, style };
+}
+const PHYSICAL_ALIGN = /(^|\s)((?:[\w-]+:)*)text-(left|right)(?=\s|$)/g;
+function logicalAlign(className) {
+  return className?.replace(
+    PHYSICAL_ALIGN,
+    (token, lead, variants, side) => (
+      // Already scoped to one direction: that is a caller choosing the physical side.
+      /(^|:)(ltr|rtl):/.test(variants) ? token : `${lead}${variants}text-${side === "right" ? "end" : "start"}`
+    )
+  );
+}
+function cleanAttrs(attrs) {
+  if (!attrs) return void 0;
+  const out = {};
+  for (const [k, v] of Object.entries(attrs)) if (v !== void 0) out[k] = v;
+  return out;
+}
+function columnLabel(col, labels) {
+  if (col.key === ROW_ACTIONS_KEY && labels) return labels.actions;
+  return col.headerText ?? (typeof col.header === "string" ? col.header : col.key);
+}
+function fromOutside(target, row) {
+  return !(target instanceof Node) || !row.contains(target);
+}
+const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+function RowLink({
+  href,
+  onActivate,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href,
+      draggable: false,
+      className,
+      onClickCapture: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (isPlainLeftClick(e)) e.preventDefault();
+      },
+      onClick: (e) => {
+        if (fromOutside(e.target, e.currentTarget)) return;
+        if (!isPlainLeftClick(e)) {
+          e.stopPropagation();
+          return;
+        }
+        onActivate?.();
+      },
+      children
+    }
+  );
+}
+export {
+  RowLink,
+  cleanAttrs,
+  columnLabel,
+  fromOutside,
+  logicalAlign,
+  splitCellProps
+};
+//# sourceMappingURL=data-table-shared.js.map