@adapttable/mantine 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,1952 +1,1900 @@
-import { usePrefersReducedMotion, pageSizeOptions, useTableChrome, ACTIONS_COLUMN_KEY, useChromeBodyData, useFilterTriggerToggle, useChromeScrollReset, filterLabel, useTableData, resolveLabels, isDeclarativeFilters, resolveDisabledReason, rowClickProps, tableRenderModel, headerGroupRow, useHorizontalOverflow, PIN_Z, edgePinStyle, tableMinWidth, useSavedViews, useBulkActionRunner, RANGE_SUFFIXES, readRangeWidget, RANGE_OP_LABEL_KEYS, RANGE_OPS, useFilterOptions, runRowAction, pinnedCellStyle, columnResizeHandleProps, pinnedColumnWidth, useColumnDragState, columnMenuRows, GripIcon, columnReorderKeyProps, nextPinSide, pinActionLabel, EyeIcon, PinIcon, writeRangeWidget } from '@adapttable/core';
-export { createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, getHistoryAdapter, useBackendData, useDataTable, useFrontendData, useSavedViews, useTableUrlState } from '@adapttable/core';
-import { Group, Pill, Anchor, Stack, Text, Alert, Button, Select, Pagination, Menu, Box, ActionIcon, TextInput, Table, Skeleton, VisuallyHidden, Paper, Progress, Card, Checkbox, Tooltip, Badge, Drawer, Input, Loader, NativeSelect, Popover, NumberInput } from '@mantine/core';
-import { useElementSize } from '@mantine/hooks';
-import { useEffect, useState, useRef, useMemo, useCallback, memo } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-// src/DataTable.tsx
+import { ACTIONS_COLUMN_KEY, EyeIcon, GripIcon, PIN_Z, PinIcon, RANGE_OPS, RANGE_OP_LABEL_KEYS, RANGE_SUFFIXES, columnMenuRows, columnReorderKeyProps, columnResizeHandleProps, createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, edgePinStyle, filterLabel, getHistoryAdapter, headerGroupRow, isDeclarativeFilters, nextPinSide, pageSizeOptions, pinActionLabel, pinnedCellStyle, pinnedColumnWidth, readRangeWidget, resolveDisabledReason, resolveLabels, rowClickProps, runRowAction, tableMinWidth, tableRenderModel, useBackendData, useBulkActionRunner, useChromeBodyData, useChromeScrollReset, useColumnDragState, useDataTable, useFilterOptions, useFilterTriggerToggle, useFrontendData, useHorizontalOverflow, usePrefersReducedMotion, useSavedViews, useSavedViews as useSavedViews$1, useTableChrome, useTableData, useTableUrlState, writeRangeWidget } from "@adapttable/core";
+import { ActionIcon, Alert, Anchor, Badge, Box, Button, Card, Checkbox, Drawer, Group, Input, Loader, Menu, NativeSelect, NumberInput, Pagination, Paper, Pill, Popover, Progress, Select, Skeleton, Stack, Table, Text, TextInput, Tooltip, VisuallyHidden } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/animation/useMountStagger.ts
+/**
+* Dependency-free entrance stagger using the Web Animations API. Animates
+* descendants marked with `data-stagger` once on mount (and whenever
+* `deps` change), honoring `prefers-reduced-motion`. Works without GSAP;
+* GSAP fans can swap in their own hook of the same shape.
+*
+* @param ref - Ref to the container whose `[data-stagger]` items animate.
+* @param deps - Re-run the stagger when these change (e.g. the row set).
+* @param options - See {@link MountStaggerOptions}.
+*/
 function useMountStagger(ref, deps, options) {
-  const reduced = usePrefersReducedMotion();
-  const { enabled, step = 40, duration = 320 } = options;
-  const depsKey = deps.map(String).join("|");
-  useEffect(() => {
-    if (!enabled || reduced) return;
-    const root = ref.current;
-    if (!root) return;
-    const items = root.querySelectorAll("[data-stagger]");
-    items.forEach((el, index) => {
-      if (typeof el.animate !== "function") return;
-      el.animate(
-        [
-          { opacity: 0, transform: "translateY(8px)" },
-          { opacity: 1, transform: "translateY(0)" }
-        ],
-        {
-          duration,
-          delay: index * step,
-          easing: "cubic-bezier(0.16, 1, 0.3, 1)",
-          fill: "both"
-        }
-      );
-    });
-  }, [enabled, reduced, step, duration, ref, depsKey]);
+	const reduced = usePrefersReducedMotion();
+	const { enabled, step = 40, duration = 320 } = options;
+	useEffect(() => {
+		if (!enabled || reduced) return;
+		const root = ref.current;
+		if (!root) return;
+		root.querySelectorAll("[data-stagger]").forEach((el, index) => {
+			if (typeof el.animate !== "function") return;
+			el.animate([{
+				opacity: 0,
+				transform: "translateY(8px)"
+			}, {
+				opacity: 1,
+				transform: "translateY(0)"
+			}], {
+				duration,
+				delay: index * step,
+				easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+				fill: "both"
+			});
+		});
+	}, [
+		enabled,
+		reduced,
+		step,
+		duration,
+		ref,
+		deps.map(String).join("|")
+	]);
 }
-function ActiveFilterChips({
-  chips,
-  onClearAll,
-  label,
-  clearAllLabel
-}) {
-  if (chips.length === 0) return null;
-  return /* @__PURE__ */ jsxs(
-    Group,
-    {
-      gap: 6,
-      "aria-label": label,
-      component: "ul",
-      style: { listStyle: "none", padding: 0, margin: 0 },
-      children: [
-        chips.map((chip) => /* @__PURE__ */ jsx(
-          Pill,
-          {
-            component: "li",
-            withRemoveButton: true,
-            onRemove: chip.onRemove,
-            removeButtonProps: {
-              "aria-label": `${clearAllLabel}: ${chip.label}`
-            },
-            children: chip.label
-          },
-          chip.key
-        )),
-        onClearAll && /* @__PURE__ */ jsx(
-          Anchor,
-          {
-            component: "button",
-            type: "button",
-            fz: "xs",
-            fw: 600,
-            onClick: onClearAll,
-            children: clearAllLabel
-          }
-        )
-      ]
-    }
-  );
+//#endregion
+//#region src/components/ActiveFilterChips.tsx
+/** A wrapping strip of removable filter chips. Renders nothing when empty. */
+function ActiveFilterChips({ chips, onClearAll, label, clearAllLabel }) {
+	if (chips.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: 6,
+		"aria-label": label,
+		component: "ul",
+		style: {
+			listStyle: "none",
+			padding: 0,
+			margin: 0
+		},
+		children: [chips.map((chip) => /* @__PURE__ */ jsx(Pill, {
+			component: "li",
+			withRemoveButton: true,
+			onRemove: chip.onRemove,
+			removeButtonProps: { "aria-label": `${clearAllLabel}: ${chip.label}` },
+			children: chip.label
+		}, chip.key)), onClearAll && /* @__PURE__ */ jsx(Anchor, {
+			component: "button",
+			type: "button",
+			fz: "xs",
+			fw: 600,
+			onClick: onClearAll,
+			children: clearAllLabel
+		})]
+	});
 }
-var asText = (value) => value == null ? "" : String(value);
-var asList = (value) => {
-  if (value == null || value === "") return [];
-  return Array.isArray(value) ? value : [String(value)];
+//#endregion
+//#region src/components/AutoFilterForm.tsx
+/** A scalar filter value as input text (`""` when unset). */
+const asText = (value) => value == null ? "" : String(value);
+/** A multi-select value as an array, tolerating a scalar from the URL. */
+const asList = (value) => {
+	if (value == null || value === "") return [];
+	return Array.isArray(value) ? value : [String(value)];
+};
+/** The select's raw option value parsed back to a known operator. */
+const asOp = (value) => RANGE_OPS.find((op) => op === value);
+/** Which operator label set each range type reads. */
+const RANGE_FLAVOUR = {
+	numberRange: "number",
+	dateRange: "date"
 };
-var asOp = (value) => RANGE_OPS.find((op) => op === value);
-var RANGE_FLAVOUR = { numberRange: "number", dateRange: "date" };
-function RangeField({
-  def,
-  source,
-  kind,
-  labels
-}) {
-  const label = filterLabel(def);
-  const lowKey = def.key + RANGE_SUFFIXES[kind].start;
-  const highKey = def.key + RANGE_SUFFIXES[kind].end;
-  const derived = readRangeWidget(source.extra, lowKey, highKey);
-  const [chosen, setChosen] = useState(null);
-  const op = chosen ?? derived.op ?? null;
-  const low = asText(source.extra[lowKey]);
-  const high = asText(source.extra[highKey]);
-  const single = op === "lte" ? high : low;
-  const write = (nextOp, a, b) => source.setExtras(writeRangeWidget(nextOp, a, b, lowKey, highKey));
-  const handleOp = (value) => {
-    const next = asOp(value);
-    setChosen(next ?? null);
-    write(next, single, "");
-  };
-  const flavour = RANGE_FLAVOUR[kind];
-  const opLabelKeys = RANGE_OP_LABEL_KEYS[flavour];
-  const data = RANGE_OPS.map((value) => ({
-    value,
-    label: labels[opLabelKeys[value]]
-  }));
-  const valueInput = (text, value, commit) => flavour === "number" ? /* @__PURE__ */ jsx(
-    NumberInput,
-    {
-      size: "sm",
-      hideControls: true,
-      style: { flex: "1 1 6rem", minWidth: "6rem" },
-      "aria-label": `${label} ${text}`,
-      placeholder: text,
-      value,
-      onChange: (next) => commit(String(next))
-    }
-  ) : /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      type: "date",
-      size: "sm",
-      style: { flex: "1 1 8.5rem", minWidth: "8.5rem" },
-      "aria-label": `${label} ${text}`,
-      placeholder: text,
-      value,
-      onChange: (e) => commit(e.currentTarget.value)
-    }
-  );
-  let values = null;
-  if (op === "between") {
-    values = /* @__PURE__ */ jsxs(Fragment, { children: [
-      valueInput(labels.from, low, (next) => write("between", next, high)),
-      valueInput(labels.to, high, (next) => write("between", low, next))
-    ] });
-  } else if (op) {
-    values = valueInput(labels.value, single, (next) => write(op, next, ""));
-  }
-  return /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-    /* @__PURE__ */ jsx(Input.Label, { size: "sm", children: label }),
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "flex-start", children: [
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          size: "sm",
-          clearable: true,
-          style: { flex: "0 0 8.5rem", width: "8.5rem" },
-          "aria-label": `${label} ${labels.operator}`,
-          placeholder: labels.operator,
-          data,
-          value: op,
-          onChange: handleOp,
-          comboboxProps: { withinPortal: false }
-        }
-      ),
-      values
-    ] })
-  ] });
+/**
+* The operator-first control shared by the `numberRange` / `dateRange`
+* types: pick a comparison (Equal / At least / …), then fill ONE value —
+* or From/To when "Between". The persisted state stays the inclusive
+* `Min`/`Max` (`From`/`To`) pair via {@link readRangeWidget} /
+* {@link writeRangeWidget}, so URLs, chips and predicates are unchanged.
+*/
+function RangeField({ def, source, kind, labels }) {
+	const label = filterLabel(def);
+	const lowKey = def.key + RANGE_SUFFIXES[kind].start;
+	const highKey = def.key + RANGE_SUFFIXES[kind].end;
+	const derived = readRangeWidget(source.extra, lowKey, highKey);
+	const [chosen, setChosen] = useState(null);
+	const op = chosen ?? derived.op ?? null;
+	const low = asText(source.extra[lowKey]);
+	const high = asText(source.extra[highKey]);
+	/** The one visible value outside "Between" (`lte` stores the upper bound). */
+	const single = op === "lte" ? high : low;
+	const write = (nextOp, a, b) => source.setExtras(writeRangeWidget(nextOp, a, b, lowKey, highKey));
+	const handleOp = (value) => {
+		const next = asOp(value);
+		setChosen(next ?? null);
+		write(next, single, "");
+	};
+	const flavour = RANGE_FLAVOUR[kind];
+	const opLabelKeys = RANGE_OP_LABEL_KEYS[flavour];
+	const data = RANGE_OPS.map((value) => ({
+		value,
+		label: labels[opLabelKeys[value]]
+	}));
+	const valueInput = (text, value, commit) => flavour === "number" ? /* @__PURE__ */ jsx(NumberInput, {
+		size: "sm",
+		hideControls: true,
+		style: {
+			flex: "1 1 6rem",
+			minWidth: "6rem"
+		},
+		"aria-label": `${label} ${text}`,
+		placeholder: text,
+		value,
+		onChange: (next) => commit(String(next))
+	}) : /* @__PURE__ */ jsx(TextInput, {
+		type: "date",
+		size: "sm",
+		style: {
+			flex: "1 1 8.5rem",
+			minWidth: "8.5rem"
+		},
+		"aria-label": `${label} ${text}`,
+		placeholder: text,
+		value,
+		onChange: (e) => commit(e.currentTarget.value)
+	});
+	let values = null;
+	if (op === "between") values = /* @__PURE__ */ jsxs(Fragment, { children: [valueInput(labels.from, low, (next) => write("between", next, high)), valueInput(labels.to, high, (next) => write("between", low, next))] });
+	else if (op) values = valueInput(labels.value, single, (next) => write(op, next, ""));
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 4,
+		children: [/* @__PURE__ */ jsx(Input.Label, {
+			size: "sm",
+			children: label
+		}), /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			align: "flex-start",
+			children: [/* @__PURE__ */ jsx(Select, {
+				size: "sm",
+				clearable: true,
+				style: {
+					flex: "0 0 8.5rem",
+					width: "8.5rem"
+				},
+				"aria-label": `${label} ${labels.operator}`,
+				placeholder: labels.operator,
+				data,
+				value: op,
+				onChange: handleOp,
+				comboboxProps: { withinPortal: false }
+			}), values]
+		})]
+	});
 }
-function SelectControl({
-  def,
-  source
-}) {
-  const label = filterLabel(def);
-  const { options, loading } = useFilterOptions(def);
-  const data = loading ? [{ value: "", label: "\u2026", disabled: true }] : [{ value: "", label: "All" }, ...options];
-  return /* @__PURE__ */ jsx(
-    NativeSelect,
-    {
-      size: "sm",
-      label,
-      data,
-      value: asText(source.extra[def.key]),
-      onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
-    }
-  );
+/**
+* Single-choice control. Options resolve through {@link useFilterOptions}
+* (static array, async loader, or none); while a loader is in flight the
+* select shows one disabled placeholder option.
+*/
+function SelectControl({ def, source }) {
+	const label = filterLabel(def);
+	const { options, loading } = useFilterOptions(def);
+	return /* @__PURE__ */ jsx(NativeSelect, {
+		size: "sm",
+		label,
+		data: loading ? [{
+			value: "",
+			label: "…",
+			disabled: true
+		}] : [{
+			value: "",
+			label: "All"
+		}, ...options],
+		value: asText(source.extra[def.key]),
+		onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
+	});
 }
-function MultiSelectControl({
-  def,
-  source
-}) {
-  const label = filterLabel(def);
-  const { options, loading } = useFilterOptions(def);
-  return /* @__PURE__ */ jsx(
-    Checkbox.Group,
-    {
-      label,
-      value: asList(source.extra[def.key]),
-      onChange: (values) => source.setExtra(def.key, values),
-      children: /* @__PURE__ */ jsx(Group, { gap: "sm", mt: 4, children: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : options.map((option) => /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          size: "sm",
-          value: option.value,
-          label: option.label
-        },
-        option.value
-      )) })
-    }
-  );
+/**
+* Multi-choice control. Options resolve through {@link useFilterOptions};
+* while a loader is in flight the group shows a small spinner instead of
+* checkboxes.
+*/
+function MultiSelectControl({ def, source }) {
+	const label = filterLabel(def);
+	const { options, loading } = useFilterOptions(def);
+	return /* @__PURE__ */ jsx(Checkbox.Group, {
+		label,
+		value: asList(source.extra[def.key]),
+		onChange: (values) => source.setExtra(def.key, values),
+		children: /* @__PURE__ */ jsx(Group, {
+			gap: "sm",
+			mt: 4,
+			children: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : options.map((option) => /* @__PURE__ */ jsx(Checkbox, {
+				size: "sm",
+				value: option.value,
+				label: option.label
+			}, option.value))
+		})
+	});
 }
-function FilterControl({
-  def,
-  source,
-  labels
-}) {
-  switch (def.type) {
-    case "text":
-      return /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          size: "sm",
-          label: filterLabel(def),
-          placeholder: def.placeholder,
-          value: asText(source.extra[def.key]),
-          onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
-        }
-      );
-    case "select":
-      return /* @__PURE__ */ jsx(SelectControl, { def, source });
-    case "multiSelect":
-      return /* @__PURE__ */ jsx(MultiSelectControl, { def, source });
-    case "dateRange":
-    case "numberRange":
-      return /* @__PURE__ */ jsx(RangeField, { def, source, kind: def.type, labels });
-  }
+/** One labeled, kit-native control for a single filter definition. */
+function FilterControl({ def, source, labels }) {
+	switch (def.type) {
+		case "text": return /* @__PURE__ */ jsx(TextInput, {
+			size: "sm",
+			label: filterLabel(def),
+			placeholder: def.placeholder,
+			value: asText(source.extra[def.key]),
+			onChange: (e) => source.setExtra(def.key, e.currentTarget.value)
+		});
+		case "select": return /* @__PURE__ */ jsx(SelectControl, {
+			def,
+			source
+		});
+		case "multiSelect": return /* @__PURE__ */ jsx(MultiSelectControl, {
+			def,
+			source
+		});
+		case "dateRange":
+		case "numberRange": return /* @__PURE__ */ jsx(RangeField, {
+			def,
+			source,
+			kind: def.type,
+			labels
+		});
+	}
 }
-function AutoFilterForm({
-  defs,
-  source,
-  labels
-}) {
-  return /* @__PURE__ */ jsx(Stack, { gap: "sm", children: defs.map((def) => /* @__PURE__ */ jsx(
-    FilterControl,
-    {
-      def,
-      source,
-      labels
-    },
-    def.key
-  )) });
+/**
+* The auto-built filter form: one labeled, Mantine-native control per
+* declarative {@link FilterDef}. Values live in the source's `extra` bag
+* (so the URL, chips and — on frontend data — the predicate all follow);
+* clearing a control writes the empty value, which drops the URL param.
+* Range types render operator-first: an operator select plus one value
+* input (two for "Between"), persisted as the inclusive pair.
+*
+* @typeParam TRow - The row type.
+*/
+function AutoFilterForm({ defs, source, labels }) {
+	return /* @__PURE__ */ jsx(Stack, {
+		gap: "sm",
+		children: defs.map((def) => /* @__PURE__ */ jsx(FilterControl, {
+			def,
+			source,
+			labels
+		}, def.key))
+	});
 }
-function BulkActionBar({
-  selection,
-  total,
-  bulkActions,
-  confirm,
-  labels
-}) {
-  const { selectedIds, selectedCount, clear, allMatching } = selection;
-  const { pending, run } = useBulkActionRunner({
-    confirm,
-    cancelLabel: labels.cancel,
-    onComplete: clear
-  });
-  if (selectedCount === 0) return null;
-  const ids = [...selectedIds];
-  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "wrap", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.selectedCount(selectedCount) }),
-      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "xs",
-            variant: "subtle",
-            onClick: clear,
-            disabled: pending !== null,
-            children: labels.clearAll
-          }
-        ),
-        bulkActions.map((action) => /* @__PURE__ */ jsx(
-          BulkButton,
-          {
-            action,
-            ids,
-            pending,
-            onRun: (a) => {
-              if (allMatching) run(a, ids, { allMatching: true, total });
-              else run(a, ids);
-            }
-          },
-          action.key
-        ))
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(ScopeBanner, { selection, total, labels })
-  ] });
+//#endregion
+//#region src/components/BulkActionBar.tsx
+/** Selection toolbar: count, clear, and the configured bulk-action buttons. */
+function BulkActionBar({ selection, total, bulkActions, confirm, labels }) {
+	const { selectedIds, selectedCount, clear, allMatching } = selection;
+	const { pending, run } = useBulkActionRunner({
+		confirm,
+		cancelLabel: labels.cancel,
+		onComplete: clear
+	});
+	if (selectedCount === 0) return null;
+	const ids = [...selectedIds];
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		children: [/* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			wrap: "wrap",
+			gap: "sm",
+			children: [/* @__PURE__ */ jsx(Text, {
+				fz: "sm",
+				children: labels.selectedCount(selectedCount)
+			}), /* @__PURE__ */ jsxs(Group, {
+				gap: "xs",
+				wrap: "wrap",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					variant: "subtle",
+					onClick: clear,
+					disabled: pending !== null,
+					children: labels.clearAll
+				}), bulkActions.map((action) => /* @__PURE__ */ jsx(BulkButton, {
+					action,
+					ids,
+					pending,
+					onRun: (a) => {
+						if (allMatching) run(a, ids, {
+							allMatching: true,
+							total
+						});
+						else run(a, ids);
+					}
+				}, action.key))]
+			})]
+		}), /* @__PURE__ */ jsx(ScopeBanner, {
+			selection,
+			total,
+			labels
+		})]
+	});
 }
-function ScopeBanner({
-  selection,
-  total,
-  labels
-}) {
-  if (selection.headerState !== "all" || total <= selection.visibleIds.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Group, { role: "status", gap: "xs", wrap: "wrap", children: selection.allMatching ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.allMatchingSelected(total) }),
-    /* @__PURE__ */ jsx(Button, { size: "xs", variant: "subtle", onClick: selection.clear, children: labels.clearAll })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { fz: "sm", children: labels.pageSelected(selection.selectedCount) }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "xs",
-        variant: "light",
-        onClick: selection.selectAllMatching,
-        children: labels.selectAllMatching(total)
-      }
-    )
-  ] }) });
+/**
+* Gmail-style scope banner. When every row on the page is selected but more
+* rows match elsewhere, offer to widen the selection to all matching rows;
+* once widened, announce the scope and offer to clear it.
+*/
+function ScopeBanner({ selection, total, labels }) {
+	if (selection.headerState !== "all" || total <= selection.visibleIds.length) return null;
+	return /* @__PURE__ */ jsx(Group, {
+		role: "status",
+		gap: "xs",
+		wrap: "wrap",
+		children: selection.allMatching ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+			fz: "sm",
+			children: labels.allMatchingSelected(total)
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "subtle",
+			onClick: selection.clear,
+			children: labels.clearAll
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Text, {
+			fz: "sm",
+			children: labels.pageSelected(selection.selectedCount)
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "xs",
+			variant: "light",
+			onClick: selection.selectAllMatching,
+			children: labels.selectAllMatching(total)
+		})] })
+	});
 }
-function BulkButton({
-  action,
-  ids,
-  pending,
-  onRun
-}) {
-  const reason = resolveDisabledReason(action.disabledReason?.(ids));
-  const ineligible = reason !== void 0;
-  const button = /* @__PURE__ */ jsx(
-    Button,
-    {
-      size: "xs",
-      color: action.color,
-      leftSection: action.icon,
-      onClick: () => onRun(action),
-      loading: pending === action.key,
-      disabled: ineligible || pending !== null && pending !== action.key,
-      children: action.label
-    }
-  );
-  if (reason !== void 0) {
-    return /* @__PURE__ */ jsx(Tooltip, { label: reason, withArrow: true, openDelay: 150, children: /* @__PURE__ */ jsx("div", { children: button }) });
-  }
-  return button;
+function BulkButton({ action, ids, pending, onRun }) {
+	const reason = resolveDisabledReason(action.disabledReason?.(ids));
+	const ineligible = reason !== void 0;
+	const button = /* @__PURE__ */ jsx(Button, {
+		size: "xs",
+		color: action.color,
+		leftSection: action.icon,
+		onClick: () => onRun(action),
+		loading: pending === action.key,
+		disabled: ineligible || pending !== null && pending !== action.key,
+		children: action.label
+	});
+	if (reason !== void 0) return /* @__PURE__ */ jsx(Tooltip, {
+		label: reason,
+		withArrow: true,
+		openDelay: 150,
+		children: /* @__PURE__ */ jsx("div", { children: button })
+	});
+	return button;
 }
-function RowVisibility({
-  hidden,
-  name,
-  labels,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: hidden ? "subtle" : "light",
-        color: hidden ? "gray" : "blue",
-        size: "sm",
-        "aria-label": `${hidden ? labels.showColumn : labels.hideColumn}: ${name}`,
-        "aria-pressed": !hidden,
-        onClick: onToggle,
-        children: /* @__PURE__ */ jsx(EyeIcon, { off: hidden })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text,
-      {
-        size: "sm",
-        style: { flex: 1 },
-        c: hidden ? "dimmed" : void 0,
-        td: hidden ? "line-through" : void 0,
-        children: name
-      }
-    )
-  ] });
+//#endregion
+//#region src/components/ColumnMenu.tsx
+/** The eye toggle + struck-through name shared by data and actions rows. */
+function RowVisibility({ hidden, name, labels, onToggle }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ActionIcon, {
+		variant: hidden ? "subtle" : "light",
+		color: hidden ? "gray" : "blue",
+		size: "sm",
+		"aria-label": `${hidden ? labels.showColumn : labels.hideColumn}: ${name}`,
+		"aria-pressed": !hidden,
+		onClick: onToggle,
+		children: /* @__PURE__ */ jsx(EyeIcon, { off: hidden })
+	}), /* @__PURE__ */ jsx(Text, {
+		size: "sm",
+		style: { flex: 1 },
+		c: hidden ? "dimmed" : void 0,
+		td: hidden ? "line-through" : void 0,
+		children: name
+	})] });
 }
-function PinToggle({
-  pinned,
-  label,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      variant: pinned ? "filled" : "subtle",
-      color: pinned ? "blue" : "gray",
-      size: "sm",
-      "aria-label": label,
-      onClick,
-      children: /* @__PURE__ */ jsx(PinIcon, {})
-    }
-  );
+/** The pin control shared by data and actions rows. */
+function PinToggle({ pinned, label, onClick }) {
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		variant: pinned ? "filled" : "subtle",
+		color: pinned ? "blue" : "gray",
+		size: "sm",
+		"aria-label": label,
+		onClick,
+		children: /* @__PURE__ */ jsx(PinIcon, {})
+	});
 }
-function ActionsRow({
-  layout,
-  labels
-}) {
-  const hidden = layout.isHidden(ACTIONS_COLUMN_KEY);
-  const pinned = layout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
-  return /* @__PURE__ */ jsxs(Group, { justify: "flex-start", wrap: "nowrap", gap: 6, px: 4, py: 2, children: [
-    /* @__PURE__ */ jsx(Box, { w: 22 }),
-    /* @__PURE__ */ jsx(
-      RowVisibility,
-      {
-        hidden,
-        name: labels.actions,
-        labels,
-        onToggle: () => layout.toggleVisible(ACTIONS_COLUMN_KEY)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PinToggle,
-      {
-        pinned,
-        label: `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`,
-        onClick: () => layout.setPinned(ACTIONS_COLUMN_KEY, pinned ? void 0 : "right")
-      }
-    )
-  ] });
+/**
+* The injected actions column's menu row: the same eye toggle as data
+* columns plus a pin toggle that flips right ↔ unpinned in one click. No
+* drag grip (the column always trails) and no left pin.
+*/
+function ActionsRow({ layout, labels }) {
+	const hidden = layout.isHidden(ACTIONS_COLUMN_KEY);
+	const pinned = layout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+	return /* @__PURE__ */ jsxs(Group, {
+		justify: "flex-start",
+		wrap: "nowrap",
+		gap: 6,
+		px: 4,
+		py: 2,
+		children: [
+			/* @__PURE__ */ jsx(Box, { w: 22 }),
+			/* @__PURE__ */ jsx(RowVisibility, {
+				hidden,
+				name: labels.actions,
+				labels,
+				onToggle: () => layout.toggleVisible(ACTIONS_COLUMN_KEY)
+			}),
+			/* @__PURE__ */ jsx(PinToggle, {
+				pinned,
+				label: `${pinned ? labels.unpin : labels.pinRight}: ${labels.actions}`,
+				onClick: () => layout.setPinned(ACTIONS_COLUMN_KEY, pinned ? void 0 : "right")
+			})
+		]
+	});
 }
-function ColumnMenu({
-  allColumns,
-  layout,
-  labels,
-  hasRowActions = false
-}) {
-  const drag = useColumnDragState();
-  return /* @__PURE__ */ jsxs(Menu, { closeOnItemClick: false, position: "bottom-end", withinPortal: true, children: [
-    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", children: labels.columns }) }),
-    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, { p: 4, miw: 250, children: [
-      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", px: 4, pb: 6, children: labels.columns }),
-      columnMenuRows(allColumns, layout).map((r) => {
-        const indicator = drag.rowAttrs(r.key, r.index);
-        const edge = indicator["data-drop"];
-        const edgeOffset = edge === "before" ? "2px" : "-2px";
-        return /* @__PURE__ */ jsxs(
-          Group,
-          {
-            justify: "flex-start",
-            wrap: "nowrap",
-            gap: 6,
-            px: 4,
-            py: 2,
-            style: {
-              cursor: "grab",
-              opacity: "data-dragging" in indicator ? 0.4 : void 0,
-              boxShadow: edge ? `inset 0 ${edgeOffset} 0 0 var(--mantine-primary-color-filled)` : void 0
-            },
-            ...drag.rowDragProps(r.key, r.index),
-            ...drag.dropProps(r.index, layout.move),
-            ...indicator,
-            children: [
-              /* @__PURE__ */ jsx(
-                ActionIcon,
-                {
-                  variant: "subtle",
-                  color: "gray",
-                  size: "sm",
-                  style: { cursor: "grab" },
-                  ...columnReorderKeyProps(
-                    r.key,
-                    r.index,
-                    layout.move,
-                    `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`
-                  ),
-                  children: /* @__PURE__ */ jsx(GripIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                RowVisibility,
-                {
-                  hidden: r.hidden,
-                  name: r.name,
-                  labels,
-                  onToggle: () => layout.toggleVisible(r.key)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PinToggle,
-                {
-                  pinned: r.pinned !== void 0,
-                  label: `${pinActionLabel(r.pinned, labels)}: ${r.name}`,
-                  onClick: () => layout.setPinned(r.key, nextPinSide(r.pinned))
-                }
-              )
-            ]
-          },
-          r.key
-        );
-      }),
-      hasRowActions && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Menu.Divider, {}),
-        /* @__PURE__ */ jsx(ActionsRow, { layout, labels })
-      ] }),
-      /* @__PURE__ */ jsx(Menu.Divider, {}),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "subtle",
-          size: "xs",
-          fullWidth: true,
-          justify: "flex-start",
-          onClick: () => layout.reset(),
-          children: labels.resetColumns
-        }
-      )
-    ] }) })
-  ] });
+/**
+* Column-management popover: per-column drag grip (reorder), eye (show/hide),
+* and pin toggle. Keyboard users focus a grip and use arrow keys.
+*/
+function ColumnMenu({ allColumns, layout, labels, hasRowActions = false }) {
+	const drag = useColumnDragState();
+	return /* @__PURE__ */ jsxs(Menu, {
+		closeOnItemClick: false,
+		position: "bottom-end",
+		withinPortal: true,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "default",
+			size: "sm",
+			children: labels.columns
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, {
+			p: 4,
+			miw: 250,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					fw: 600,
+					tt: "uppercase",
+					px: 4,
+					pb: 6,
+					children: labels.columns
+				}),
+				columnMenuRows(allColumns, layout).map((r) => {
+					const indicator = drag.rowAttrs(r.key, r.index);
+					const edge = indicator["data-drop"];
+					const edgeOffset = edge === "before" ? "2px" : "-2px";
+					return /* @__PURE__ */ jsxs(Group, {
+						justify: "flex-start",
+						wrap: "nowrap",
+						gap: 6,
+						px: 4,
+						py: 2,
+						style: {
+							cursor: "grab",
+							opacity: "data-dragging" in indicator ? .4 : void 0,
+							boxShadow: edge ? `inset 0 ${edgeOffset} 0 0 var(--mantine-primary-color-filled)` : void 0
+						},
+						...drag.rowDragProps(r.key, r.index),
+						...drag.dropProps(r.index, layout.move),
+						...indicator,
+						children: [
+							/* @__PURE__ */ jsx(ActionIcon, {
+								variant: "subtle",
+								color: "gray",
+								size: "sm",
+								style: { cursor: "grab" },
+								...columnReorderKeyProps(r.key, r.index, layout.move, `${labels.moveLeft} / ${labels.moveRight}: ${r.name}`),
+								children: /* @__PURE__ */ jsx(GripIcon, {})
+							}),
+							/* @__PURE__ */ jsx(RowVisibility, {
+								hidden: r.hidden,
+								name: r.name,
+								labels,
+								onToggle: () => layout.toggleVisible(r.key)
+							}),
+							/* @__PURE__ */ jsx(PinToggle, {
+								pinned: r.pinned !== void 0,
+								label: `${pinActionLabel(r.pinned, labels)}: ${r.name}`,
+								onClick: () => layout.setPinned(r.key, nextPinSide(r.pinned))
+							})
+						]
+					}, r.key);
+				}),
+				hasRowActions && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu.Divider, {}), /* @__PURE__ */ jsx(ActionsRow, {
+					layout,
+					labels
+				})] }),
+				/* @__PURE__ */ jsx(Menu.Divider, {}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "subtle",
+					size: "xs",
+					fullWidth: true,
+					justify: "flex-start",
+					onClick: () => layout.reset(),
+					children: labels.resetColumns
+				})
+			]
+		}) })]
+	});
 }
-
-// src/density.ts
-var DENSITY_SPACING = {
-  comfortable: { verticalSpacing: "sm", horizontalSpacing: "md" },
-  compact: { verticalSpacing: 4, horizontalSpacing: "sm" }
+//#endregion
+//#region src/density.ts
+/**
+* Maps each {@link Density} to the Mantine `<Table>` spacing props.
+* `comfortable` keeps the original `sm`/`md` rhythm; `compact` tightens
+* rows with a 4px vertical gap and `sm` horizontal padding.
+*/
+const DENSITY_SPACING = {
+	comfortable: {
+		verticalSpacing: "sm",
+		horizontalSpacing: "md"
+	},
+	compact: {
+		verticalSpacing: 4,
+		horizontalSpacing: "sm"
+	}
 };
-function Svg({
-  size = 16,
-  className,
-  style,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      style,
-      "aria-hidden": "true",
-      focusable: "false",
-      children
-    }
-  );
+//#endregion
+//#region src/icons.tsx
+function Svg({ size = 16, className, style, children }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className,
+		style,
+		"aria-hidden": "true",
+		focusable: "false",
+		children
+	});
 }
-var SearchIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
-  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
-] });
-var ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" }) });
-var ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
-var ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
-var SelectorIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m8 9 4-4 4 4M8 15l4 4 4-4" }) });
-var CloseIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
-var FiltersIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M7 12h10M10 18h4" }) });
-var AlertIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
-  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
-] });
-var RefreshIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-3-6.7L21 8" }),
-  /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
-] });
-var InboxIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }),
-  /* @__PURE__ */ jsx("path", { d: "M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1Z" })
-] });
-function ExpandToggle({
-  expanded,
-  expandLabel,
-  collapseLabel,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsx(
-    ActionIcon,
-    {
-      variant: "subtle",
-      color: "gray",
-      size: "sm",
-      "aria-expanded": expanded,
-      "aria-label": expanded ? collapseLabel : expandLabel,
-      onClick: onToggle,
-      children: /* @__PURE__ */ jsx(
-        ChevronRightIcon,
-        {
-          size: 14,
-          style: {
-            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-            transition: "transform 150ms ease"
-          }
-        }
-      )
-    }
-  );
+/** Magnifying-glass search icon. */
+const SearchIcon = (p) => /* @__PURE__ */ jsxs(Svg, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "11",
+		cy: "11",
+		r: "7"
+	}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })]
+});
+/** Up chevron (active ascending sort). */
+const ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 15 6-6 6 6" })
+});
+/** Down chevron (active descending sort). */
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+/** Right chevron (collapsed row-detail toggle; rotates 90° when expanded). */
+const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+});
+/** Up/down selector (inactive sortable column). */
+const SelectorIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m8 9 4-4 4 4M8 15l4 4 4-4" })
+});
+/** Small ✕ used on chips. */
+const CloseIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+});
+/** Sliders icon for the Filters button. */
+const FiltersIcon = (p) => /* @__PURE__ */ jsx(Svg, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M7 12h10M10 18h4" })
+});
+/** Triangle alert icon for the error state. */
+const AlertIcon = (p) => /* @__PURE__ */ jsxs(Svg, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }), /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })]
+});
+/** Refresh icon for retry. */
+const RefreshIcon = (p) => /* @__PURE__ */ jsxs(Svg, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-3-6.7L21 8" }), /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })]
+});
+/** Inbox icon for the empty state. */
+const InboxIcon = (p) => /* @__PURE__ */ jsxs(Svg, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1Z" })]
+});
+//#endregion
+//#region src/components/ExpandToggle.tsx
+/**
+* The chevron that toggles a row's detail panel — shared by the desktop
+* table's leading cell and the mobile card. It is a real button, so the
+* row-click interactive-child guard already keeps it from activating
+* `onRowClick`.
+*/
+function ExpandToggle({ expanded, expandLabel, collapseLabel, onToggle }) {
+	return /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "subtle",
+		color: "gray",
+		size: "sm",
+		"aria-expanded": expanded,
+		"aria-label": expanded ? collapseLabel : expandLabel,
+		onClick: onToggle,
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+			size: 14,
+			style: {
+				transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+				transition: "transform 150ms ease"
+			}
+		})
+	});
 }
-var RESIZE_HANDLE_STYLE = {
-  position: "absolute",
-  insetInlineEnd: 0,
-  top: 0,
-  height: "100%",
-  width: 8,
-  cursor: "col-resize",
-  touchAction: "none",
-  userSelect: "none"
+//#endregion
+//#region src/components/DesktopTable.tsx
+/** Inline style for an absolutely-positioned column-resize handle. */
+const RESIZE_HANDLE_STYLE = {
+	position: "absolute",
+	insetInlineEnd: 0,
+	top: 0,
+	height: "100%",
+	width: 8,
+	cursor: "col-resize",
+	touchAction: "none",
+	userSelect: "none"
 };
-function SortIcon({
-  active,
-  dir
-}) {
-  if (!active) return /* @__PURE__ */ jsx(SelectorIcon, { size: 12 });
-  return dir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 });
+function SortIcon({ active, dir }) {
+	if (!active) return /* @__PURE__ */ jsx(SelectorIcon, { size: 12 });
+	return dir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 });
 }
-function HeaderCell({
-  table,
-  column,
-  stickyStyle,
-  resizeHandle
-}) {
-  const cellProps = table.getHeaderCellProps(column);
-  const headerStyle = {
-    ...cellProps.style,
-    ...stickyStyle
-  };
-  if (!column.sortable) {
-    return /* @__PURE__ */ jsxs(Table.Th, { ...cellProps, style: headerStyle, children: [
-      column.header,
-      resizeHandle
-    ] });
-  }
-  const buttonProps = table.getSortButtonProps(column);
-  const sortIndex = buttonProps["data-sort-index"];
-  const level = table.source.sortLevels.find((l) => l.key === column.key);
-  const active = level !== void 0 || table.sortBy === column.key;
-  return /* @__PURE__ */ jsxs(Table.Th, { ...cellProps, style: headerStyle, children: [
-    /* @__PURE__ */ jsxs(
-      Group,
-      {
-        component: "button",
-        gap: 6,
-        wrap: "nowrap",
-        display: "inline-flex",
-        style: {
-          background: "none",
-          border: 0,
-          cursor: "pointer",
-          font: "inherit",
-          padding: 0,
-          color: active ? "var(--mantine-primary-color-filled)" : "inherit"
-        },
-        ...buttonProps,
-        children: [
-          /* @__PURE__ */ jsx("span", { children: column.header }),
-          /* @__PURE__ */ jsx(SortIcon, { active, dir: level?.dir ?? table.sortDir }),
-          typeof sortIndex === "number" && /* @__PURE__ */ jsx(Badge, { component: "span", size: "xs", variant: "light", children: sortIndex })
-        ]
-      }
-    ),
-    resizeHandle
-  ] });
+function HeaderCell({ table, column, stickyStyle, resizeHandle }) {
+	const cellProps = table.getHeaderCellProps(column);
+	const headerStyle = {
+		...cellProps.style,
+		...stickyStyle
+	};
+	if (!column.sortable) return /* @__PURE__ */ jsxs(Table.Th, {
+		...cellProps,
+		style: headerStyle,
+		children: [column.header, resizeHandle]
+	});
+	const buttonProps = table.getSortButtonProps(column);
+	const sortIndex = buttonProps["data-sort-index"];
+	const level = table.source.sortLevels.find((l) => l.key === column.key);
+	const active = level !== void 0 || table.sortBy === column.key;
+	return /* @__PURE__ */ jsxs(Table.Th, {
+		...cellProps,
+		style: headerStyle,
+		children: [/* @__PURE__ */ jsxs(Group, {
+			component: "button",
+			gap: 6,
+			wrap: "nowrap",
+			display: "inline-flex",
+			style: {
+				background: "none",
+				border: 0,
+				cursor: "pointer",
+				font: "inherit",
+				padding: 0,
+				color: active ? "var(--mantine-primary-color-filled)" : "inherit"
+			},
+			...buttonProps,
+			children: [
+				/* @__PURE__ */ jsx("span", { children: column.header }),
+				/* @__PURE__ */ jsx(SortIcon, {
+					active,
+					dir: level?.dir ?? table.sortDir
+				}),
+				typeof sortIndex === "number" && /* @__PURE__ */ jsx(Badge, {
+					component: "span",
+					size: "xs",
+					variant: "light",
+					children: sortIndex
+				})
+			]
+		}), resizeHandle]
+	});
 }
-function RowActions({
-  row,
-  actions,
-  confirm,
-  cancelLabel
-}) {
-  return /* @__PURE__ */ jsx(Group, { gap: 4, justify: "flex-end", wrap: "nowrap", children: actions.map((action) => {
-    if (action.isHidden?.(row)) return null;
-    const reason = resolveDisabledReason(action.disabledReason?.(row));
-    const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
-    const handleClick = disabled ? void 0 : (e) => {
-      e.stopPropagation();
-      runRowAction(action, row, confirm, cancelLabel);
-    };
-    return action.icon ? /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        label: reason ?? action.label,
-        withArrow: true,
-        openDelay: 200,
-        children: /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "subtle",
-            color: action.color,
-            size: "sm",
-            disabled,
-            "aria-label": action.label,
-            onClick: handleClick,
-            children: action.icon
-          }
-        )
-      },
-      action.key
-    ) : /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "subtle",
-        color: action.color,
-        size: "compact-sm",
-        disabled,
-        onClick: handleClick,
-        children: action.label
-      },
-      action.key
-    );
-  }) });
+function RowActions({ row, actions, confirm, cancelLabel }) {
+	return /* @__PURE__ */ jsx(Group, {
+		gap: 4,
+		justify: "flex-end",
+		wrap: "nowrap",
+		children: actions.map((action) => {
+			if (action.isHidden?.(row)) return null;
+			const reason = resolveDisabledReason(action.disabledReason?.(row));
+			const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
+			const handleClick = disabled ? void 0 : (e) => {
+				e.stopPropagation();
+				runRowAction(action, row, confirm, cancelLabel);
+			};
+			return action.icon ? /* @__PURE__ */ jsx(Tooltip, {
+				label: reason ?? action.label,
+				withArrow: true,
+				openDelay: 200,
+				children: /* @__PURE__ */ jsx(ActionIcon, {
+					variant: "subtle",
+					color: action.color,
+					size: "sm",
+					disabled,
+					"aria-label": action.label,
+					onClick: handleClick,
+					children: action.icon
+				})
+			}, action.key) : /* @__PURE__ */ jsx(Button, {
+				variant: "subtle",
+				color: action.color,
+				size: "compact-sm",
+				disabled,
+				onClick: handleClick,
+				children: action.label
+			}, action.key);
+		})
+	});
 }
-var COMPARED_ROW_PROPS = [
-  "row",
-  "index",
-  "id",
-  "columns",
-  "getCellProps",
-  "selected",
-  "selectLabel",
-  "onToggleSelect",
-  "expanded",
-  "expandLabel",
-  "collapseLabel",
-  "onToggleExpand",
-  "renderRowDetail",
-  "columnSpan",
-  "rowActions",
-  "confirm",
-  "cancelLabel",
-  "onRowClick",
-  "prefetch",
-  "className",
-  "measureElement",
-  "pinSignature"
+/** Every row prop the memo comparator checks with `Object.is`. */
+const COMPARED_ROW_PROPS = [
+	"row",
+	"index",
+	"id",
+	"columns",
+	"getCellProps",
+	"selected",
+	"selectLabel",
+	"onToggleSelect",
+	"expanded",
+	"expandLabel",
+	"collapseLabel",
+	"onToggleExpand",
+	"renderRowDetail",
+	"columnSpan",
+	"rowActions",
+	"confirm",
+	"cancelLabel",
+	"onRowClick",
+	"prefetch",
+	"className",
+	"measureElement",
+	"pinSignature"
 ];
+/**
+* Row memo comparator: `Object.is` over every prop except the per-render
+* style derivations excluded above. All event handlers passed to the row
+* are identity-stable (or compared here, so a changed handler re-renders
+* the row and is captured fresh) — a held row can never fire a stale
+* closure.
+*/
 function desktopRowPropsEqual(prev, next) {
-  return COMPARED_ROW_PROPS.every((key) => Object.is(prev[key], next[key]));
+	return COMPARED_ROW_PROPS.every((key) => Object.is(prev[key], next[key]));
 }
+/**
+* Sticky style for a leading chrome cell (chevron / checkbox) pinned
+* `inset` px past the inline-start edge, active only while a data column is
+* pinned on that side. Body cells pass a `background` so scrolled data
+* never shows through.
+*/
 function leadingPinStyle(active, inset, zIndex, background) {
-  if (!active) return void 0;
-  const style = pinnedCellStyle({ side: "left", inset }, zIndex);
-  return background ? { ...style, background } : style;
+	if (!active) return void 0;
+	const style = pinnedCellStyle({
+		side: "left",
+		inset
+	}, zIndex);
+	return background ? {
+		...style,
+		background
+	} : style;
 }
+/**
+* Visual fingerprint of the pin layout (sides, insets, edge-pinned chrome
+* columns). Memoized rows compare this one string instead of the per-render
+* style objects derived from it.
+*/
 function pinLayoutSignature(columns, pinOffset, hasLeftPin, actionsEdgePinned) {
-  const perColumn = columns.map((column) => {
-    const pin = pinOffset?.(column.key);
-    return pin ? `${column.key}:${pin.side}${pin.inset}` : column.key;
-  });
-  return `${perColumn.join("|")}|${String(hasLeftPin)}|${String(actionsEdgePinned)}`;
+	return `${columns.map((column) => {
+		const pin = pinOffset?.(column.key);
+		return pin ? `${column.key}:${pin.side}${pin.inset}` : column.key;
+	}).join("|")}|${String(hasLeftPin)}|${String(actionsEdgePinned)}`;
 }
-function DesktopRowBase({
-  row,
-  index,
-  id,
-  columns,
-  getCellProps,
-  selected,
-  selectLabel,
-  onToggleSelect,
-  expanded,
-  expandLabel,
-  collapseLabel,
-  onToggleExpand,
-  renderRowDetail,
-  columnSpan,
-  rowActions,
-  confirm,
-  cancelLabel,
-  onRowClick,
-  prefetch,
-  className,
-  measureElement,
-  pinStyleFor,
-  selectionCellStyle,
-  expansionCellStyle,
-  actionsCellStyle
-}) {
-  const showActions = (rowActions?.length ?? 0) > 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Table.Tr,
-      {
-        role: "row",
-        "data-index": index,
-        "aria-selected": selected,
-        ...rowClickProps(row, onRowClick),
-        className,
-        ref: measureElement,
-        "data-stagger": "",
-        onMouseEnter: prefetch ? () => prefetch(row) : void 0,
-        children: [
-          expanded !== void 0 && /* @__PURE__ */ jsx(Table.Td, { ta: "center", style: expansionCellStyle, children: /* @__PURE__ */ jsx(
-            ExpandToggle,
-            {
-              expanded,
-              expandLabel,
-              collapseLabel,
-              onToggle: () => onToggleExpand(id)
-            }
-          ) }),
-          selected !== void 0 && /* @__PURE__ */ jsx(Table.Td, { ta: "center", style: selectionCellStyle, children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              "aria-label": selectLabel,
-              checked: selected,
-              onChange: () => onToggleSelect(id)
-            }
-          ) }),
-          columns.map((column) => /* @__PURE__ */ jsx(
-            Table.Td,
-            {
-              ...getCellProps(column),
-              style: pinStyleFor(column.key),
-              children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row)
-            },
-            column.key
-          )),
-          showActions && /* @__PURE__ */ jsx(Table.Td, { ta: "end", style: actionsCellStyle, children: /* @__PURE__ */ jsx(
-            RowActions,
-            {
-              row,
-              actions: rowActions,
-              confirm,
-              cancelLabel
-            }
-          ) })
-        ]
-      }
-    ),
-    expanded === true && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, { colSpan: columnSpan, children: renderRowDetail(row) }) })
-  ] });
+/**
+* One desktop row (plus its detail row when expanded), extracted so it can
+* be memoized: typing in the search box or toggling another row's checkbox
+* re-renders the table chrome but leaves untouched rows alone.
+*/
+function DesktopRowBase({ row, index, id, columns, getCellProps, selected, selectLabel, onToggleSelect, expanded, expandLabel, collapseLabel, onToggleExpand, renderRowDetail, columnSpan, rowActions, confirm, cancelLabel, onRowClick, prefetch, className, measureElement, pinStyleFor, selectionCellStyle, expansionCellStyle, actionsCellStyle }) {
+	const showActions = (rowActions?.length ?? 0) > 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Table.Tr, {
+		role: "row",
+		"data-index": index,
+		"aria-selected": selected,
+		...rowClickProps(row, onRowClick),
+		className,
+		ref: measureElement,
+		"data-stagger": "",
+		onMouseEnter: prefetch ? () => prefetch(row) : void 0,
+		children: [
+			expanded !== void 0 && /* @__PURE__ */ jsx(Table.Td, {
+				ta: "center",
+				style: expansionCellStyle,
+				children: /* @__PURE__ */ jsx(ExpandToggle, {
+					expanded,
+					expandLabel,
+					collapseLabel,
+					onToggle: () => onToggleExpand(id)
+				})
+			}),
+			selected !== void 0 && /* @__PURE__ */ jsx(Table.Td, {
+				ta: "center",
+				style: selectionCellStyle,
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					"aria-label": selectLabel,
+					checked: selected,
+					onChange: () => onToggleSelect(id)
+				})
+			}),
+			columns.map((column) => /* @__PURE__ */ jsx(Table.Td, {
+				...getCellProps(column),
+				style: pinStyleFor(column.key),
+				children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, {
+					row,
+					rowIndex: index
+				}) : column.accessor?.(row)
+			}, column.key)),
+			showActions && /* @__PURE__ */ jsx(Table.Td, {
+				ta: "end",
+				style: actionsCellStyle,
+				children: /* @__PURE__ */ jsx(RowActions, {
+					row,
+					actions: rowActions,
+					confirm,
+					cancelLabel
+				})
+			})
+		]
+	}), expanded === true && /* @__PURE__ */ jsx(Table.Tr, { children: /* @__PURE__ */ jsx(Table.Td, {
+		colSpan: columnSpan,
+		children: renderRowDetail(row)
+	}) })] });
 }
-function DesktopTable({
-  table,
-  rows,
-  rowActions,
-  confirm,
-  prefetch,
-  onRowClick,
-  rowClassName,
-  renderRowDetail,
-  summaryRow,
-  expansion,
-  getRowId,
-  bodyRef,
-  className,
-  rowEntries,
-  paddingTop = 0,
-  paddingBottom = 0,
-  measureElement,
-  stickyHeaderOffset = 0,
-  stickyHeader = false,
-  pinOffset,
-  maxHeight,
-  virtualScrollRef,
-  setWidth,
-  columnWidths,
-  resizeLabel = "Resize column",
-  actionsPinned = false,
-  density = "comfortable"
-}) {
-  const { columns, selection, labels, showActions, entries, columnSpan } = tableRenderModel({
-    table,
-    rows,
-    rowActions,
-    getRowId,
-    rowEntries,
-    renderRowDetail,
-    expansion
-  });
-  const expandable = expansion !== void 0;
-  const groupCells = headerGroupRow(columns);
-  const summaryCells = summaryRow?.(rows);
-  const hasRightPin = table.columns.some(
-    (c) => pinOffset?.(c.key)?.side === "right"
-  );
-  const actionsEdgePinned = showActions && (hasRightPin || actionsPinned);
-  const hasPinned = table.columns.some((c) => pinOffset?.(c.key) != null) || actionsEdgePinned;
-  const { ref: wrapperRef, overflowing } = useHorizontalOverflow();
-  const inScrollBox = maxHeight != null || hasPinned || overflowing;
-  const headerCellStyle = stickyHeader ? {
-    position: "sticky",
-    top: inScrollBox ? 0 : stickyHeaderOffset,
-    zIndex: PIN_Z.header,
-    background: "var(--mantine-color-body)",
-    boxShadow: "0 1px 0 var(--mantine-color-default-border)"
-  } : { background: "var(--mantine-color-body)" };
-  const expansionWidth = 36;
-  const selectionWidth = 40;
-  const actionsWidth = 120;
-  const expansionLead = expandable ? expansionWidth : 0;
-  const leads = {
-    left: expansionLead + (selection ? selectionWidth : 0),
-    right: showActions ? actionsWidth : 0
-  };
-  const hasLeftPin = table.columns.some(
-    (c) => pinOffset?.(c.key)?.side === "left"
-  );
-  const pinBg = "var(--mantine-color-body)";
-  const headerStyleFor = (column) => {
-    const key = column.key;
-    const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.headerPinned, leads);
-    const merged = {
-      ...headerCellStyle,
-      ...pin,
-      // A pinned column renders at the same width its sticky inset assumed,
-      // so stacked pins stay flush even with no declared width.
-      width: pin ? pinnedColumnWidth(column, columnWidths) : columnWidths?.[key]
-    };
-    if (setWidth && !merged.position) merged.position = "relative";
-    return merged;
-  };
-  const expansionHeaderStyle = {
-    ...headerCellStyle,
-    ...leadingPinStyle(hasLeftPin, 0, PIN_Z.headerPinned)
-  };
-  const selectionHeaderStyle = {
-    ...headerCellStyle,
-    ...leadingPinStyle(hasLeftPin, expansionLead, PIN_Z.headerPinned)
-  };
-  const actionsHeaderStyle = {
-    ...headerCellStyle,
-    ...edgePinStyle("right", actionsEdgePinned, PIN_Z.headerPinned)
-  };
-  const edgeBodyStyle = (side, active) => {
-    const pin = edgePinStyle(side, active, PIN_Z.body);
-    return pin ? { ...pin, background: pinBg } : void 0;
-  };
-  const expansionCellStyle = leadingPinStyle(hasLeftPin, 0, PIN_Z.body, pinBg);
-  const selectionCellStyle = leadingPinStyle(
-    hasLeftPin,
-    expansionLead,
-    PIN_Z.body,
-    pinBg
-  );
-  const actionsCellStyle = edgeBodyStyle("right", actionsEdgePinned);
-  const columnName = (column) => typeof column.header === "string" ? column.header : column.key;
-  const resizeHandleFor = (column) => setWidth ? /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...columnResizeHandleProps(
-        column.key,
-        setWidth,
-        `${resizeLabel}: ${columnName(column)}`
-      ),
-      style: RESIZE_HANDLE_STYLE
-    }
-  ) : void 0;
-  const bodyPinStyle = (key) => {
-    const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.body, leads);
-    return pin ? { ...pin, background: pinBg } : void 0;
-  };
-  const { verticalSpacing, horizontalSpacing } = DENSITY_SPACING[density];
-  const minWidth = tableMinWidth(columns, {
-    widths: columnWidths,
-    extra: expansionLead + (selection ? 40 : 0) + (showActions ? 120 : 0)
-  });
-  const selectionRef = useRef(selection);
-  selectionRef.current = selection;
-  const toggleSelect = useCallback(
-    (id) => selectionRef.current.toggle(id),
-    []
-  );
-  const Row = useMemo(
-    () => memo(DesktopRowBase, desktopRowPropsEqual),
-    []
-  );
-  const pinSignature = pinLayoutSignature(
-    columns,
-    pinOffset,
-    hasLeftPin,
-    actionsEdgePinned
-  );
-  const wrapperStyle = maxHeight == null ? {
-    width: "100%",
-    ...hasPinned || overflowing ? { overflowX: "auto" } : {}
-  } : { width: "100%", maxHeight, overflow: "auto" };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: (node) => {
-        wrapperRef(node);
-        virtualScrollRef?.(node);
-      },
-      style: wrapperStyle,
-      children: /* @__PURE__ */ jsxs(
-        Table,
-        {
-          ...table.getTableProps(),
-          className,
-          highlightOnHover: true,
-          verticalSpacing,
-          horizontalSpacing,
-          miw: Math.max(480, minWidth),
-          style: stickyHeader ? { borderCollapse: "separate", borderSpacing: 0 } : void 0,
-          children: [
-            /* @__PURE__ */ jsxs(Table.Thead, { style: { background: "var(--mantine-color-body)" }, children: [
-              groupCells && /* @__PURE__ */ jsxs(Table.Tr, { children: [
-                expandable && /* @__PURE__ */ jsx(Table.Th, {}),
-                selection && /* @__PURE__ */ jsx(Table.Th, {}),
-                groupCells.map((cell) => /* @__PURE__ */ jsx(
-                  Table.Th,
-                  {
-                    colSpan: cell.span,
-                    ta: "center",
-                    fw: 600,
-                    style: {
-                      borderBottom: "1px solid var(--mantine-color-default-border)"
-                    },
-                    children: cell.label
-                  },
-                  cell.key
-                )),
-                showActions && /* @__PURE__ */ jsx(Table.Th, {})
-              ] }),
-              /* @__PURE__ */ jsxs(Table.Tr, { ...table.getHeaderRowProps(), children: [
-                expandable && /* @__PURE__ */ jsx(
-                  Table.Th,
-                  {
-                    w: expansionWidth,
-                    ta: "center",
-                    style: expansionHeaderStyle,
-                    children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.expandRow })
-                  }
-                ),
-                selection && /* @__PURE__ */ jsx(
-                  Table.Th,
-                  {
-                    w: selectionWidth,
-                    ta: "center",
-                    style: selectionHeaderStyle,
-                    children: /* @__PURE__ */ jsx(
-                      Checkbox,
-                      {
-                        "aria-label": labels.selectAll,
-                        checked: selection.headerState === "all",
-                        indeterminate: selection.headerState === "some",
-                        onChange: selection.toggleAll
-                      }
-                    )
-                  }
-                ),
-                columns.map((column) => /* @__PURE__ */ jsx(
-                  HeaderCell,
-                  {
-                    table,
-                    column,
-                    stickyStyle: headerStyleFor(column),
-                    resizeHandle: resizeHandleFor(column)
-                  },
-                  column.key
-                )),
-                showActions && /* @__PURE__ */ jsx(Table.Th, { ta: "end", w: actionsWidth, style: actionsHeaderStyle, children: labels.actions })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Table.Tbody, { ref: bodyRef, children: [
-              paddingTop > 0 && /* @__PURE__ */ jsx(Table.Tr, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
-                Table.Td,
-                {
-                  colSpan: columnSpan,
-                  style: { height: paddingTop, padding: 0 }
-                }
-              ) }),
-              entries.map(({ row, index, key }) => {
-                const id = getRowId(row);
-                return /* @__PURE__ */ jsx(
-                  Row,
-                  {
-                    row,
-                    index,
-                    id,
-                    columns,
-                    getCellProps: table.getCellProps,
-                    selected: selection?.isSelected(id),
-                    selectLabel: labels.selectRow,
-                    onToggleSelect: toggleSelect,
-                    expanded: expansion?.isExpanded(id),
-                    expandLabel: labels.expandRow,
-                    collapseLabel: labels.collapseRow,
-                    onToggleExpand: expansion?.toggle,
-                    renderRowDetail,
-                    columnSpan,
-                    rowActions,
-                    confirm,
-                    cancelLabel: labels.cancel,
-                    onRowClick,
-                    prefetch,
-                    className: rowClassName?.(row, index),
-                    measureElement,
-                    pinStyleFor: bodyPinStyle,
-                    selectionCellStyle,
-                    expansionCellStyle,
-                    actionsCellStyle,
-                    pinSignature
-                  },
-                  key
-                );
-              }),
-              paddingBottom > 0 && /* @__PURE__ */ jsx(Table.Tr, { "aria-hidden": true, children: /* @__PURE__ */ jsx(
-                Table.Td,
-                {
-                  colSpan: columnSpan,
-                  style: { height: paddingBottom, padding: 0 }
-                }
-              ) })
-            ] }),
-            summaryCells && /* @__PURE__ */ jsx(Table.Tfoot, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
-              expandable && /* @__PURE__ */ jsx(Table.Td, {}),
-              selection && /* @__PURE__ */ jsx(Table.Td, {}),
-              columns.map((column) => /* @__PURE__ */ jsx(
-                Table.Td,
-                {
-                  ...table.getCellProps(column),
-                  fw: 600,
-                  c: "dimmed",
-                  children: summaryCells[column.key]
-                },
-                column.key
-              )),
-              showActions && /* @__PURE__ */ jsx(Table.Td, {})
-            ] }) })
-          ]
-        }
-      )
-    }
-  );
+/** Desktop table rendering driven by core prop-getters. */
+function DesktopTable({ table, rows, rowActions, confirm, prefetch, onRowClick, rowClassName, renderRowDetail, summaryRow, expansion, getRowId, bodyRef, className, rowEntries, paddingTop = 0, paddingBottom = 0, measureElement, stickyHeaderOffset = 0, stickyHeader = false, pinOffset, maxHeight, virtualScrollRef, setWidth, columnWidths, resizeLabel = "Resize column", actionsPinned = false, density = "comfortable" }) {
+	const { columns, selection, labels, showActions, entries, columnSpan } = tableRenderModel({
+		table,
+		rows,
+		rowActions,
+		getRowId,
+		rowEntries,
+		renderRowDetail,
+		expansion
+	});
+	const expandable = expansion !== void 0;
+	const groupCells = headerGroupRow(columns);
+	const summaryCells = summaryRow?.(rows);
+	const hasRightPin = table.columns.some((c) => pinOffset?.(c.key)?.side === "right");
+	const actionsEdgePinned = showActions && (hasRightPin || actionsPinned);
+	const hasPinned = table.columns.some((c) => pinOffset?.(c.key) != null) || actionsEdgePinned;
+	const { ref: wrapperRef, overflowing } = useHorizontalOverflow();
+	const headerCellStyle = stickyHeader ? {
+		position: "sticky",
+		top: maxHeight != null || hasPinned || overflowing ? 0 : stickyHeaderOffset,
+		zIndex: PIN_Z.header,
+		background: "var(--mantine-color-body)",
+		boxShadow: "0 1px 0 var(--mantine-color-default-border)"
+	} : { background: "var(--mantine-color-body)" };
+	const expansionWidth = 36;
+	const selectionWidth = 40;
+	const actionsWidth = 120;
+	const expansionLead = expandable ? expansionWidth : 0;
+	const leads = {
+		left: expansionLead + (selection ? selectionWidth : 0),
+		right: showActions ? actionsWidth : 0
+	};
+	const hasLeftPin = table.columns.some((c) => pinOffset?.(c.key)?.side === "left");
+	const pinBg = "var(--mantine-color-body)";
+	const headerStyleFor = (column) => {
+		const key = column.key;
+		const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.headerPinned, leads);
+		const merged = {
+			...headerCellStyle,
+			...pin,
+			width: pin ? pinnedColumnWidth(column, columnWidths) : columnWidths?.[key]
+		};
+		if (setWidth && !merged.position) merged.position = "relative";
+		return merged;
+	};
+	const expansionHeaderStyle = {
+		...headerCellStyle,
+		...leadingPinStyle(hasLeftPin, 0, PIN_Z.headerPinned)
+	};
+	const selectionHeaderStyle = {
+		...headerCellStyle,
+		...leadingPinStyle(hasLeftPin, expansionLead, PIN_Z.headerPinned)
+	};
+	const actionsHeaderStyle = {
+		...headerCellStyle,
+		...edgePinStyle("right", actionsEdgePinned, PIN_Z.headerPinned)
+	};
+	const edgeBodyStyle = (side, active) => {
+		const pin = edgePinStyle(side, active, PIN_Z.body);
+		return pin ? {
+			...pin,
+			background: pinBg
+		} : void 0;
+	};
+	const expansionCellStyle = leadingPinStyle(hasLeftPin, 0, PIN_Z.body, pinBg);
+	const selectionCellStyle = leadingPinStyle(hasLeftPin, expansionLead, PIN_Z.body, pinBg);
+	const actionsCellStyle = edgeBodyStyle("right", actionsEdgePinned);
+	const columnName = (column) => typeof column.header === "string" ? column.header : column.key;
+	const resizeHandleFor = (column) => setWidth ? /* @__PURE__ */ jsx("span", {
+		...columnResizeHandleProps(column.key, setWidth, `${resizeLabel}: ${columnName(column)}`),
+		style: RESIZE_HANDLE_STYLE
+	}) : void 0;
+	const bodyPinStyle = (key) => {
+		const pin = pinnedCellStyle(pinOffset?.(key), PIN_Z.body, leads);
+		return pin ? {
+			...pin,
+			background: pinBg
+		} : void 0;
+	};
+	const { verticalSpacing, horizontalSpacing } = DENSITY_SPACING[density];
+	const minWidth = tableMinWidth(columns, {
+		widths: columnWidths,
+		extra: expansionLead + (selection ? 40 : 0) + (showActions ? 120 : 0)
+	});
+	const selectionRef = useRef(selection);
+	selectionRef.current = selection;
+	const toggleSelect = useCallback((id) => selectionRef.current.toggle(id), []);
+	const Row = useMemo(() => memo(DesktopRowBase, desktopRowPropsEqual), []);
+	const pinSignature = pinLayoutSignature(columns, pinOffset, hasLeftPin, actionsEdgePinned);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			wrapperRef(node);
+			virtualScrollRef?.(node);
+		},
+		style: maxHeight == null ? {
+			width: "100%",
+			...hasPinned || overflowing ? { overflowX: "auto" } : {}
+		} : {
+			width: "100%",
+			maxHeight,
+			overflow: "auto"
+		},
+		children: /* @__PURE__ */ jsxs(Table, {
+			...table.getTableProps(),
+			className,
+			highlightOnHover: true,
+			verticalSpacing,
+			horizontalSpacing,
+			miw: Math.max(480, minWidth),
+			style: stickyHeader ? {
+				borderCollapse: "separate",
+				borderSpacing: 0
+			} : void 0,
+			children: [
+				/* @__PURE__ */ jsxs(Table.Thead, {
+					style: { background: "var(--mantine-color-body)" },
+					children: [groupCells && /* @__PURE__ */ jsxs(Table.Tr, { children: [
+						expandable && /* @__PURE__ */ jsx(Table.Th, {}),
+						selection && /* @__PURE__ */ jsx(Table.Th, {}),
+						groupCells.map((cell) => /* @__PURE__ */ jsx(Table.Th, {
+							colSpan: cell.span,
+							ta: "center",
+							fw: 600,
+							style: { borderBottom: "1px solid var(--mantine-color-default-border)" },
+							children: cell.label
+						}, cell.key)),
+						showActions && /* @__PURE__ */ jsx(Table.Th, {})
+					] }), /* @__PURE__ */ jsxs(Table.Tr, {
+						...table.getHeaderRowProps(),
+						children: [
+							expandable && /* @__PURE__ */ jsx(Table.Th, {
+								w: expansionWidth,
+								ta: "center",
+								style: expansionHeaderStyle,
+								children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.expandRow })
+							}),
+							selection && /* @__PURE__ */ jsx(Table.Th, {
+								w: selectionWidth,
+								ta: "center",
+								style: selectionHeaderStyle,
+								children: /* @__PURE__ */ jsx(Checkbox, {
+									"aria-label": labels.selectAll,
+									checked: selection.headerState === "all",
+									indeterminate: selection.headerState === "some",
+									onChange: selection.toggleAll
+								})
+							}),
+							columns.map((column) => /* @__PURE__ */ jsx(HeaderCell, {
+								table,
+								column,
+								stickyStyle: headerStyleFor(column),
+								resizeHandle: resizeHandleFor(column)
+							}, column.key)),
+							showActions && /* @__PURE__ */ jsx(Table.Th, {
+								ta: "end",
+								w: actionsWidth,
+								style: actionsHeaderStyle,
+								children: labels.actions
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Table.Tbody, {
+					ref: bodyRef,
+					children: [
+						paddingTop > 0 && /* @__PURE__ */ jsx(Table.Tr, {
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx(Table.Td, {
+								colSpan: columnSpan,
+								style: {
+									height: paddingTop,
+									padding: 0
+								}
+							})
+						}),
+						entries.map(({ row, index, key }) => {
+							const id = getRowId(row);
+							return /* @__PURE__ */ jsx(Row, {
+								row,
+								index,
+								id,
+								columns,
+								getCellProps: table.getCellProps,
+								selected: selection?.isSelected(id),
+								selectLabel: labels.selectRow,
+								onToggleSelect: toggleSelect,
+								expanded: expansion?.isExpanded(id),
+								expandLabel: labels.expandRow,
+								collapseLabel: labels.collapseRow,
+								onToggleExpand: expansion?.toggle,
+								renderRowDetail,
+								columnSpan,
+								rowActions,
+								confirm,
+								cancelLabel: labels.cancel,
+								onRowClick,
+								prefetch,
+								className: rowClassName?.(row, index),
+								measureElement,
+								pinStyleFor: bodyPinStyle,
+								selectionCellStyle,
+								expansionCellStyle,
+								actionsCellStyle,
+								pinSignature
+							}, key);
+						}),
+						paddingBottom > 0 && /* @__PURE__ */ jsx(Table.Tr, {
+							"aria-hidden": true,
+							children: /* @__PURE__ */ jsx(Table.Td, {
+								colSpan: columnSpan,
+								style: {
+									height: paddingBottom,
+									padding: 0
+								}
+							})
+						})
+					]
+				}),
+				summaryCells && /* @__PURE__ */ jsx(Table.Tfoot, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+					expandable && /* @__PURE__ */ jsx(Table.Td, {}),
+					selection && /* @__PURE__ */ jsx(Table.Td, {}),
+					columns.map((column) => /* @__PURE__ */ jsx(Table.Td, {
+						...table.getCellProps(column),
+						fw: 600,
+						c: "dimmed",
+						children: summaryCells[column.key]
+					}, column.key)),
+					showActions && /* @__PURE__ */ jsx(Table.Td, {})
+				] }) })
+			]
+		})
+	});
 }
-function EmptyState({
-  title,
-  description,
-  icon,
-  action
-}) {
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      role: "status",
-      align: "center",
-      justify: "center",
-      gap: 6,
-      py: 48,
-      px: 16,
-      children: [
-        /* @__PURE__ */ jsx(Text, { c: "dimmed", "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx(InboxIcon, { size: 40 }) }),
-        /* @__PURE__ */ jsx(Text, { fw: 600, fz: "md", children: title }),
-        description && /* @__PURE__ */ jsx(Text, { c: "dimmed", fz: "sm", ta: "center", maw: 360, children: description }),
-        action
-      ]
-    }
-  );
+//#endregion
+//#region src/components/EmptyState.tsx
+/** Centred "nothing to show" placeholder. */
+function EmptyState({ title, description, icon, action }) {
+	return /* @__PURE__ */ jsxs(Stack, {
+		role: "status",
+		align: "center",
+		justify: "center",
+		gap: 6,
+		py: 48,
+		px: 16,
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				"aria-hidden": true,
+				children: icon ?? /* @__PURE__ */ jsx(InboxIcon, { size: 40 })
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fw: 600,
+				fz: "md",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				c: "dimmed",
+				fz: "sm",
+				ta: "center",
+				maw: 360,
+				children: description
+			}),
+			action
+		]
+	});
 }
-function ErrorState({
-  error,
-  title,
-  message,
-  retryLabel,
-  onRetry,
-  isRetrying
-}) {
-  return /* @__PURE__ */ jsx(
-    Alert,
-    {
-      icon: /* @__PURE__ */ jsx(AlertIcon, { size: 16 }),
-      color: "red",
-      variant: "light",
-      title,
-      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "nowrap", gap: "md", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { fz: "sm", children: message }),
-          /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", mt: 2, children: error.message })
-        ] }),
-        onRetry && /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "xs",
-            variant: "light",
-            color: "red",
-            leftSection: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
-            onClick: onRetry,
-            loading: isRetrying,
-            children: retryLabel
-          }
-        )
-      ] })
-    }
-  );
+//#endregion
+//#region src/components/ErrorState.tsx
+/** Inline error alert with an optional retry button. */
+function ErrorState({ error, title, message, retryLabel, onRetry, isRetrying }) {
+	return /* @__PURE__ */ jsx(Alert, {
+		icon: /* @__PURE__ */ jsx(AlertIcon, { size: 16 }),
+		color: "red",
+		variant: "light",
+		title,
+		children: /* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			align: "center",
+			wrap: "nowrap",
+			gap: "md",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+				fz: "sm",
+				children: message
+			}), /* @__PURE__ */ jsx(Text, {
+				fz: "xs",
+				c: "dimmed",
+				mt: 2,
+				children: error.message
+			})] }), onRetry && /* @__PURE__ */ jsx(Button, {
+				size: "xs",
+				variant: "light",
+				color: "red",
+				leftSection: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 }),
+				onClick: onRetry,
+				loading: isRetrying,
+				children: retryLabel
+			})]
+		})
+	});
 }
-function FilterDrawer({
-  opened,
-  onClose,
-  filters,
-  activeFilterCount,
-  onClearFilters,
-  labels,
-  dir = "ltr"
-}) {
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      opened,
-      onClose,
-      position: dir === "rtl" ? "left" : "right",
-      size: 380,
-      title: labels.filters,
-      overlayProps: { opacity: 0.4, blur: 2 },
-      closeButtonProps: { "aria-label": labels.cancel },
-      children: /* @__PURE__ */ jsxs(Stack, { gap: "md", mih: "60vh", justify: "space-between", children: [
-        /* @__PURE__ */ jsx(Stack, { gap: "md", children: filters }),
-        /* @__PURE__ */ jsxs(Group, { justify: "space-between", pt: "md", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "subtle",
-              onClick: onClearFilters,
-              disabled: activeFilterCount === 0,
-              children: labels.clearAll
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { onClick: onClose, children: labels.applyFilters })
-        ] })
-      ] })
-    }
-  );
+//#endregion
+//#region src/components/FilterDrawer.tsx
+/** Right-side drawer holding the caller's filter widgets + apply/clear. */
+function FilterDrawer({ opened, onClose, filters, activeFilterCount, onClearFilters, labels, dir = "ltr" }) {
+	return /* @__PURE__ */ jsx(Drawer, {
+		opened,
+		onClose,
+		position: dir === "rtl" ? "left" : "right",
+		size: 380,
+		title: labels.filters,
+		overlayProps: {
+			opacity: .4,
+			blur: 2
+		},
+		closeButtonProps: { "aria-label": labels.cancel },
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			mih: "60vh",
+			justify: "space-between",
+			children: [/* @__PURE__ */ jsx(Stack, {
+				gap: "md",
+				children: filters
+			}), /* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				pt: "md",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "subtle",
+					onClick: onClearFilters,
+					disabled: activeFilterCount === 0,
+					children: labels.clearAll
+				}), /* @__PURE__ */ jsx(Button, {
+					onClick: onClose,
+					children: labels.applyFilters
+				})]
+			})]
+		})
+	});
 }
+//#endregion
+//#region src/components/MobileCards.tsx
 function mobileLabel(column) {
-  return column.mobileLabel ?? (typeof column.header === "string" ? column.header : column.key);
+	return column.mobileLabel ?? (typeof column.header === "string" ? column.header : column.key);
 }
-function MobileCards({
-  table,
-  rows,
-  rowActions,
-  confirm,
-  getRowId,
-  bodyRef,
-  className,
-  rowEntries,
-  paddingTop = 0,
-  paddingBottom = 0,
-  measureElement,
-  density = "comfortable",
-  onRowClick,
-  rowClassName,
-  renderRowDetail,
-  summaryRow,
-  expansion
-}) {
-  const { columns, selection, labels } = table;
-  const compact = density === "compact";
-  const cardPadding = compact ? "sm" : "md";
-  const cardGap = compact ? 4 : "xs";
-  const entries = rowEntries ?? rows.map((row, index) => ({
-    row,
-    index,
-    key: getRowId(row)
-  }));
-  const summaryCells = summaryRow?.(rows);
-  return /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      gap: compact ? "xs" : "sm",
-      ref: bodyRef,
-      className,
-      ...table.getTableProps({ role: "list" }),
-      children: [
-        paddingTop > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: paddingTop } }),
-        entries.map(({ row, index, key }) => {
-          const id = getRowId(row);
-          return /* @__PURE__ */ jsx(
-            Card,
-            {
-              ...rowClickProps(row, onRowClick),
-              className: rowClassName?.(row, index),
-              ref: measureElement,
-              "data-index": index,
-              withBorder: true,
-              radius: "md",
-              padding: cardPadding,
-              role: "listitem",
-              "data-stagger": "",
-              children: /* @__PURE__ */ jsxs(Stack, { gap: cardGap, children: [
-                selection && /* @__PURE__ */ jsx(
-                  Checkbox,
-                  {
-                    "aria-label": labels.selectRow,
-                    checked: selection.isSelected(id),
-                    onChange: () => selection.toggle(id)
-                  }
-                ),
-                expansion && /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(
-                  ExpandToggle,
-                  {
-                    expanded: expansion.isExpanded(id),
-                    expandLabel: labels.expandRow,
-                    collapseLabel: labels.collapseRow,
-                    onToggle: () => expansion.toggle(id)
-                  }
-                ) }),
-                columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", tt: "uppercase", fw: 500, children: mobileLabel(column) }),
-                  /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, { row, rowIndex: index }) : column.accessor?.(row) })
-                ] }, column.key)),
-                expansion?.isExpanded(id) === true && /* @__PURE__ */ jsx("div", { children: renderRowDetail(row) }),
-                rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx(Group, { gap: 4, justify: "flex-end", pt: 4, children: rowActions.map((action) => {
-                  if (action.isHidden?.(row)) return null;
-                  const reason = resolveDisabledReason(
-                    action.disabledReason?.(row)
-                  );
-                  const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
-                  const run = disabled ? void 0 : () => runRowAction(action, row, confirm, labels.cancel);
-                  return action.icon ? /* @__PURE__ */ jsx(
-                    Tooltip,
-                    {
-                      label: reason ?? action.label,
-                      withArrow: true,
-                      openDelay: 200,
-                      children: /* @__PURE__ */ jsx(
-                        ActionIcon,
-                        {
-                          variant: "subtle",
-                          color: action.color,
-                          size: "sm",
-                          disabled,
-                          "aria-label": action.label,
-                          onClick: run,
-                          children: action.icon
-                        }
-                      )
-                    },
-                    action.key
-                  ) : /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "subtle",
-                      color: action.color,
-                      size: "compact-sm",
-                      disabled,
-                      onClick: run,
-                      children: action.label
-                    },
-                    action.key
-                  );
-                }) })
-              ] })
-            },
-            key
-          );
-        }),
-        paddingBottom > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: paddingBottom } }),
-        summaryCells && /* @__PURE__ */ jsx(Card, { withBorder: true, radius: "md", padding: cardPadding, role: "listitem", children: /* @__PURE__ */ jsx(Stack, { gap: cardGap, children: columns.filter((column) => summaryCells[column.key] !== void 0).map((column) => /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", tt: "uppercase", fw: 500, children: mobileLabel(column) }),
-          /* @__PURE__ */ jsx(Text, { component: "div", fz: "sm", fw: 600, children: summaryCells[column.key] })
-        ] }, column.key)) }) })
-      ]
-    }
-  );
+/** Mobile rendering: one Mantine Card per row with labelled key/value rows. */
+function MobileCards({ table, rows, rowActions, confirm, getRowId, bodyRef, className, rowEntries, paddingTop = 0, paddingBottom = 0, measureElement, density = "comfortable", onRowClick, rowClassName, renderRowDetail, summaryRow, expansion }) {
+	const { columns, selection, labels } = table;
+	const compact = density === "compact";
+	const cardPadding = compact ? "sm" : "md";
+	const cardGap = compact ? 4 : "xs";
+	const entries = rowEntries ?? rows.map((row, index) => ({
+		row,
+		index,
+		key: getRowId(row)
+	}));
+	const summaryCells = summaryRow?.(rows);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: compact ? "xs" : "sm",
+		ref: bodyRef,
+		className,
+		...table.getTableProps({ role: "list" }),
+		children: [
+			paddingTop > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				style: { height: paddingTop }
+			}),
+			entries.map(({ row, index, key }) => {
+				const id = getRowId(row);
+				return /* @__PURE__ */ jsx(Card, {
+					...rowClickProps(row, onRowClick),
+					className: rowClassName?.(row, index),
+					ref: measureElement,
+					"data-index": index,
+					withBorder: true,
+					radius: "md",
+					padding: cardPadding,
+					role: "listitem",
+					"data-stagger": "",
+					children: /* @__PURE__ */ jsxs(Stack, {
+						gap: cardGap,
+						children: [
+							selection && /* @__PURE__ */ jsx(Checkbox, {
+								"aria-label": labels.selectRow,
+								checked: selection.isSelected(id),
+								onChange: () => selection.toggle(id)
+							}),
+							expansion && /* @__PURE__ */ jsx(Group, {
+								justify: "flex-end",
+								children: /* @__PURE__ */ jsx(ExpandToggle, {
+									expanded: expansion.isExpanded(id),
+									expandLabel: labels.expandRow,
+									collapseLabel: labels.collapseRow,
+									onToggle: () => expansion.toggle(id)
+								})
+							}),
+							columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+								fz: "xs",
+								c: "dimmed",
+								tt: "uppercase",
+								fw: 500,
+								children: mobileLabel(column)
+							}), /* @__PURE__ */ jsx(Text, {
+								component: "div",
+								fz: "sm",
+								children: column.Cell ? /* @__PURE__ */ jsx(column.Cell, {
+									row,
+									rowIndex: index
+								}) : column.accessor?.(row)
+							})] }, column.key)),
+							expansion?.isExpanded(id) === true && /* @__PURE__ */ jsx("div", { children: renderRowDetail(row) }),
+							rowActions && rowActions.length > 0 && /* @__PURE__ */ jsx(Group, {
+								gap: 4,
+								justify: "flex-end",
+								pt: 4,
+								children: rowActions.map((action) => {
+									if (action.isHidden?.(row)) return null;
+									const reason = resolveDisabledReason(action.disabledReason?.(row));
+									const disabled = reason !== void 0 || (action.isDisabled?.(row) ?? false);
+									const run = disabled ? void 0 : () => runRowAction(action, row, confirm, labels.cancel);
+									return action.icon ? /* @__PURE__ */ jsx(Tooltip, {
+										label: reason ?? action.label,
+										withArrow: true,
+										openDelay: 200,
+										children: /* @__PURE__ */ jsx(ActionIcon, {
+											variant: "subtle",
+											color: action.color,
+											size: "sm",
+											disabled,
+											"aria-label": action.label,
+											onClick: run,
+											children: action.icon
+										})
+									}, action.key) : /* @__PURE__ */ jsx(Button, {
+										variant: "subtle",
+										color: action.color,
+										size: "compact-sm",
+										disabled,
+										onClick: run,
+										children: action.label
+									}, action.key);
+								})
+							})
+						]
+					})
+				}, key);
+			}),
+			paddingBottom > 0 && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				style: { height: paddingBottom }
+			}),
+			summaryCells && /* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				radius: "md",
+				padding: cardPadding,
+				role: "listitem",
+				children: /* @__PURE__ */ jsx(Stack, {
+					gap: cardGap,
+					children: columns.filter((column) => summaryCells[column.key] !== void 0).map((column) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+						fz: "xs",
+						c: "dimmed",
+						tt: "uppercase",
+						fw: 500,
+						children: mobileLabel(column)
+					}), /* @__PURE__ */ jsx(Text, {
+						component: "div",
+						fz: "sm",
+						fw: 600,
+						children: summaryCells[column.key]
+					})] }, column.key))
+				})
+			})
+		]
+	});
 }
-function PaginationFooter({
-  page,
-  totalPages,
-  limit,
-  total,
-  fromIndex,
-  toIndex,
-  onPageChange,
-  onLimitChange,
-  labels
-}) {
-  const safeTotalPages = Math.max(totalPages, 1);
-  const safePage = Math.min(Math.max(page, 1), safeTotalPages);
-  const options = pageSizeOptions(limit).map((n) => ({
-    value: String(n),
-    label: String(n)
-  }));
-  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "md", pt: "xs", children: [
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.rowsPerPage }),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          "aria-label": labels.rowsPerPage,
-          data: options,
-          value: String(limit),
-          onChange: (v) => onLimitChange(Number(v)),
-          size: "xs",
-          w: 76,
-          allowDeselect: false,
-          comboboxProps: { withinPortal: false }
-        }
-      ),
-      total > 0 && /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.showing({ from: fromIndex, to: toIndex, total }) })
-    ] }),
-    /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "center", wrap: "nowrap", children: [
-      /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.pageOf({ page: safePage, total: safeTotalPages }) }),
-      /* @__PURE__ */ jsx(
-        Pagination,
-        {
-          total: safeTotalPages,
-          value: safePage,
-          onChange: onPageChange,
-          size: "sm",
-          siblings: 1,
-          boundaries: 1,
-          getControlProps: (control) => ({
-            "aria-label": control === "previous" ? labels.previousPage : labels.nextPage
-          })
-        }
-      )
-    ] })
-  ] });
+//#endregion
+//#region src/components/PaginationFooter.tsx
+/** Desktop pagination bar: page-size + range on the left, pager on the right. */
+function PaginationFooter({ page, totalPages, limit, total, fromIndex, toIndex, onPageChange, onLimitChange, labels }) {
+	const safeTotalPages = Math.max(totalPages, 1);
+	const safePage = Math.min(Math.max(page, 1), safeTotalPages);
+	const options = pageSizeOptions(limit).map((n) => ({
+		value: String(n),
+		label: String(n)
+	}));
+	return /* @__PURE__ */ jsxs(Group, {
+		justify: "space-between",
+		align: "center",
+		wrap: "wrap",
+		gap: "md",
+		pt: "xs",
+		children: [/* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			align: "center",
+			wrap: "nowrap",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					fz: "xs",
+					c: "dimmed",
+					children: labels.rowsPerPage
+				}),
+				/* @__PURE__ */ jsx(Select, {
+					"aria-label": labels.rowsPerPage,
+					data: options,
+					value: String(limit),
+					onChange: (v) => onLimitChange(Number(v)),
+					size: "xs",
+					w: 76,
+					allowDeselect: false,
+					comboboxProps: { withinPortal: false }
+				}),
+				total > 0 && /* @__PURE__ */ jsx(Text, {
+					fz: "xs",
+					c: "dimmed",
+					children: labels.showing({
+						from: fromIndex,
+						to: toIndex,
+						total
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsxs(Group, {
+			gap: "sm",
+			align: "center",
+			wrap: "nowrap",
+			children: [/* @__PURE__ */ jsx(Text, {
+				fz: "xs",
+				c: "dimmed",
+				children: labels.pageOf({
+					page: safePage,
+					total: safeTotalPages
+				})
+			}), /* @__PURE__ */ jsx(Pagination, {
+				total: safeTotalPages,
+				value: safePage,
+				onChange: onPageChange,
+				size: "sm",
+				siblings: 1,
+				boundaries: 1,
+				getControlProps: (control) => ({ "aria-label": control === "previous" ? labels.previousPage : labels.nextPage })
+			})]
+		})]
+	});
 }
-function SavedViewsMenu({
-  views,
-  labels
-}) {
-  const [name, setName] = useState("");
-  const trimmed = name.trim();
-  const handleSave = () => {
-    views.save(trimmed);
-    setName("");
-  };
-  return /* @__PURE__ */ jsxs(Menu, { closeOnItemClick: false, position: "bottom-end", withinPortal: true, children: [
-    /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: "sm", children: labels.savedViews }) }),
-    /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, { p: 4, miw: 220, children: [
-      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", px: 4, pb: 6, children: labels.savedViews }),
-      views.views.map((view) => /* @__PURE__ */ jsxs(Group, { gap: 6, px: 4, py: 2, wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "subtle",
-            size: "compact-sm",
-            justify: "flex-start",
-            style: { flex: 1 },
-            onClick: () => views.apply(view.name),
-            children: view.name
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIcon,
-          {
-            variant: "subtle",
-            color: "gray",
-            size: "sm",
-            "aria-label": `${labels.deleteView}: ${view.name}`,
-            onClick: () => views.remove(view.name),
-            children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
-          }
-        )
-      ] }, view.name)),
-      /* @__PURE__ */ jsx(Menu.Divider, {}),
-      /* @__PURE__ */ jsxs(Group, { gap: 6, p: 4, wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            size: "xs",
-            style: { flex: 1 },
-            placeholder: labels.viewName,
-            value: name,
-            onChange: (e) => setName(e.currentTarget.value)
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { size: "xs", disabled: trimmed === "", onClick: handleSave, children: labels.saveView })
-      ] })
-    ] }) })
-  ] });
+//#endregion
+//#region src/components/SavedViewsMenu.tsx
+/**
+* Saved-views menu: lists every captured view (click a name to apply it, the
+* trailing ✕ to delete it) above a save row that captures the table's
+* CURRENT URL state under the typed name. Pairs with core's `useSavedViews`
+* and composes into the `toolbar` slot — or let `<DataTable savedViews>`
+* mount it for you next to the Columns menu.
+*/
+function SavedViewsMenu({ views, labels }) {
+	const [name, setName] = useState("");
+	const trimmed = name.trim();
+	const handleSave = () => {
+		views.save(trimmed);
+		setName("");
+	};
+	return /* @__PURE__ */ jsxs(Menu, {
+		closeOnItemClick: false,
+		position: "bottom-end",
+		withinPortal: true,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "default",
+			size: "sm",
+			children: labels.savedViews
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: /* @__PURE__ */ jsxs(Box, {
+			p: 4,
+			miw: 220,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					fw: 600,
+					tt: "uppercase",
+					px: 4,
+					pb: 6,
+					children: labels.savedViews
+				}),
+				views.views.map((view) => /* @__PURE__ */ jsxs(Group, {
+					gap: 6,
+					px: 4,
+					py: 2,
+					wrap: "nowrap",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "subtle",
+						size: "compact-sm",
+						justify: "flex-start",
+						style: { flex: 1 },
+						onClick: () => views.apply(view.name),
+						children: view.name
+					}), /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "subtle",
+						color: "gray",
+						size: "sm",
+						"aria-label": `${labels.deleteView}: ${view.name}`,
+						onClick: () => views.remove(view.name),
+						children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
+					})]
+				}, view.name)),
+				/* @__PURE__ */ jsx(Menu.Divider, {}),
+				/* @__PURE__ */ jsxs(Group, {
+					gap: 6,
+					p: 4,
+					wrap: "nowrap",
+					children: [/* @__PURE__ */ jsx(TextInput, {
+						size: "xs",
+						style: { flex: 1 },
+						placeholder: labels.viewName,
+						value: name,
+						onChange: (e) => setName(e.currentTarget.value)
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						disabled: trimmed === "",
+						onClick: handleSave,
+						children: labels.saveView
+					})]
+				})
+			]
+		}) })]
+	});
 }
-function TableSkeleton({
-  columns,
-  rows = 5,
-  loadingLabel
-}) {
-  const colKeys = Array.from({ length: Math.max(columns, 1) }, (_, i) => i);
-  const rowKeys = Array.from({ length: rows }, (_, i) => i);
-  return /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          height: 12,
-          radius: "sm",
-          width: c === 0 ? "55%" : "40%"
-        }
-      ) }, c)) }) }),
-      /* @__PURE__ */ jsx(Table.Tbody, { children: rowKeys.map((r) => /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-        Skeleton,
-        {
-          height: 14,
-          radius: "sm",
-          width: c === 0 ? "70%" : "55%"
-        }
-      ) }, c)) }, r)) })
-    ] }),
-    loadingLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel }) : null
-  ] });
+//#endregion
+//#region src/components/TableSkeleton.tsx
+/** Loading placeholder that mirrors the table shape to avoid layout shift. */
+function TableSkeleton({ columns, rows = 5, loadingLabel }) {
+	const colKeys = Array.from({ length: Math.max(columns, 1) }, (_, i) => i);
+	const rowKeys = Array.from({ length: rows }, (_, i) => i);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Th, { children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 12,
+			radius: "sm",
+			width: c === 0 ? "55%" : "40%"
+		}) }, c)) }) }), /* @__PURE__ */ jsx(Table.Tbody, { children: rowKeys.map((r) => /* @__PURE__ */ jsx(Table.Tr, { children: colKeys.map((c) => /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Skeleton, {
+			height: 14,
+			radius: "sm",
+			width: c === 0 ? "70%" : "55%"
+		}) }, c)) }, r)) })] }), loadingLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel }) : null]
+	});
 }
-function FilterPopover({
-  open,
-  onClose,
-  filters,
-  activeFilterCount,
-  onClearFilters,
-  labels,
-  dir = "ltr",
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      opened: open,
-      onDismiss: onClose,
-      position: dir === "rtl" ? "bottom-start" : "bottom-end",
-      withinPortal: true,
-      shadow: "md",
-      radius: "md",
-      width: 340,
-      children: [
-        /* @__PURE__ */ jsx(Popover.Target, { children }),
-        /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [
-          /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", mb: "sm", children: [
-            /* @__PURE__ */ jsx(Text, { fw: 600, fz: "sm", children: labels.filters }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "subtle",
-                size: "compact-xs",
-                onClick: onClearFilters,
-                disabled: activeFilterCount === 0,
-                children: labels.clearAll
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(Stack, { gap: "md", children: filters })
-        ] })
-      ]
-    }
-  );
+//#endregion
+//#region src/components/FilterPopover.tsx
+/**
+* Anchored filter card (the default filter container). Opens under the Filters
+* button and tracks it on scroll. No backdrop — the background stays visible
+* and interactive; clicking outside or pressing Escape closes it. Pair with
+* `filtersMode="drawer"` for the slide-in panel instead.
+*/
+function FilterPopover({ open, onClose, filters, activeFilterCount, onClearFilters, labels, dir = "ltr", children }) {
+	return /* @__PURE__ */ jsxs(Popover, {
+		opened: open,
+		onDismiss: onClose,
+		position: dir === "rtl" ? "bottom-start" : "bottom-end",
+		withinPortal: true,
+		shadow: "md",
+		radius: "md",
+		width: 340,
+		children: [/* @__PURE__ */ jsx(Popover.Target, { children }), /* @__PURE__ */ jsxs(Popover.Dropdown, { children: [/* @__PURE__ */ jsxs(Group, {
+			justify: "space-between",
+			align: "center",
+			mb: "sm",
+			children: [/* @__PURE__ */ jsx(Text, {
+				fw: 600,
+				fz: "sm",
+				children: labels.filters
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "subtle",
+				size: "compact-xs",
+				onClick: onClearFilters,
+				disabled: activeFilterCount === 0,
+				children: labels.clearAll
+			})]
+		}), /* @__PURE__ */ jsx(Stack, {
+			gap: "md",
+			children: filters
+		})] })]
+	});
 }
-function Toolbar({
-  table,
-  hideSearch,
-  searchPlaceholder,
-  sortByOptions,
-  customToolbar,
-  hasFilters,
-  activeFilterCount,
-  onToggleFilters,
-  onFiltersTriggerPointerDown,
-  onCloseFilters,
-  filtersOpen,
-  filtersMode,
-  filters,
-  onClearFilters,
-  dir,
-  columnMenu,
-  showRowsPerPage,
-  className
-}) {
-  const { labels, source } = table;
-  const searchProps = table.getSearchInputProps(
-    searchPlaceholder ? { placeholder: searchPlaceholder } : void 0
-  );
-  const sortOptions = sortByOptions ?? (table.isMobile ? table.sortByOptions : void 0);
-  const filtersButton = /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "default",
-      size: "sm",
-      "aria-expanded": filtersMode === "popover" ? filtersOpen : void 0,
-      "data-active": filtersOpen || void 0,
-      leftSection: /* @__PURE__ */ jsx(FiltersIcon, { size: 16 }),
-      rightSection: activeFilterCount > 0 ? /* @__PURE__ */ jsx(Badge, { size: "sm", circle: true, children: activeFilterCount }) : void 0,
-      onPointerDown: onFiltersTriggerPointerDown,
-      onClick: onToggleFilters,
-      children: labels.filters
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    Group,
-    {
-      gap: "sm",
-      justify: "space-between",
-      align: "center",
-      className,
-      children: [
-        !hideSearch && /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            ...searchProps,
-            leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }),
-            size: "sm",
-            style: { flex: 1, minWidth: 160, maxWidth: 360 }
-          }
-        ),
-        /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
-          sortOptions && sortOptions.length > 0 && /* @__PURE__ */ jsx(
-            Select,
-            {
-              "aria-label": labels.sortBy,
-              placeholder: labels.sortBy,
-              data: sortOptions,
-              value: source.sortBy ?? null,
-              onChange: (v) => source.setSort(v ?? void 0, source.sortDir ?? "asc"),
-              clearable: true,
-              size: "sm",
-              w: 160,
-              comboboxProps: { withinPortal: false }
-            }
-          ),
-          customToolbar,
-          hasFilters && (filtersMode === "popover" ? /* @__PURE__ */ jsx(
-            FilterPopover,
-            {
-              open: filtersOpen,
-              onClose: onCloseFilters,
-              filters,
-              activeFilterCount,
-              onClearFilters,
-              labels,
-              dir,
-              children: filtersButton
-            }
-          ) : filtersButton),
-          columnMenu,
-          showRowsPerPage && /* @__PURE__ */ jsxs(Group, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsx(Text, { fz: "xs", c: "dimmed", children: labels.rowsPerPage }),
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                "aria-label": labels.rowsPerPage,
-                data: pageSizeOptions(source.limit).map((n) => ({
-                  value: String(n),
-                  label: String(n)
-                })),
-                value: String(source.limit),
-                onChange: (v) => source.setLimit(Number(v)),
-                size: "sm",
-                w: 80,
-                allowDeselect: false,
-                comboboxProps: { withinPortal: false }
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
+//#endregion
+//#region src/components/Toolbar.tsx
+/** Sticky toolbar: search, optional sort select, custom slot, filters, size. */
+function Toolbar({ table, hideSearch, searchPlaceholder, sortByOptions, customToolbar, hasFilters, activeFilterCount, onToggleFilters, onFiltersTriggerPointerDown, onCloseFilters, filtersOpen, filtersMode, filters, onClearFilters, dir, columnMenu, showRowsPerPage, className }) {
+	const { labels, source } = table;
+	const searchProps = table.getSearchInputProps(searchPlaceholder ? { placeholder: searchPlaceholder } : void 0);
+	const sortOptions = sortByOptions ?? (table.isMobile ? table.sortByOptions : void 0);
+	const filtersButton = /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		size: "sm",
+		"aria-expanded": filtersMode === "popover" ? filtersOpen : void 0,
+		"data-active": filtersOpen || void 0,
+		leftSection: /* @__PURE__ */ jsx(FiltersIcon, { size: 16 }),
+		rightSection: activeFilterCount > 0 ? /* @__PURE__ */ jsx(Badge, {
+			size: "sm",
+			circle: true,
+			children: activeFilterCount
+		}) : void 0,
+		onPointerDown: onFiltersTriggerPointerDown,
+		onClick: onToggleFilters,
+		children: labels.filters
+	});
+	return /* @__PURE__ */ jsxs(Group, {
+		gap: "sm",
+		justify: "space-between",
+		align: "center",
+		className,
+		children: [!hideSearch && /* @__PURE__ */ jsx(TextInput, {
+			...searchProps,
+			leftSection: /* @__PURE__ */ jsx(SearchIcon, { size: 14 }),
+			size: "sm",
+			style: {
+				flex: 1,
+				minWidth: 160,
+				maxWidth: 360
+			}
+		}), /* @__PURE__ */ jsxs(Group, {
+			gap: "xs",
+			align: "center",
+			children: [
+				sortOptions && sortOptions.length > 0 && /* @__PURE__ */ jsx(Select, {
+					"aria-label": labels.sortBy,
+					placeholder: labels.sortBy,
+					data: sortOptions,
+					value: source.sortBy ?? null,
+					onChange: (v) => source.setSort(v ?? void 0, source.sortDir ?? "asc"),
+					clearable: true,
+					size: "sm",
+					w: 160,
+					comboboxProps: { withinPortal: false }
+				}),
+				customToolbar,
+				hasFilters && (filtersMode === "popover" ? /* @__PURE__ */ jsx(FilterPopover, {
+					open: filtersOpen,
+					onClose: onCloseFilters,
+					filters,
+					activeFilterCount,
+					onClearFilters,
+					labels,
+					dir,
+					children: filtersButton
+				}) : filtersButton),
+				columnMenu,
+				showRowsPerPage && /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Text, {
+						fz: "xs",
+						c: "dimmed",
+						children: labels.rowsPerPage
+					}), /* @__PURE__ */ jsx(Select, {
+						"aria-label": labels.rowsPerPage,
+						data: pageSizeOptions(source.limit).map((n) => ({
+							value: String(n),
+							label: String(n)
+						})),
+						value: String(source.limit),
+						onChange: (v) => source.setLimit(Number(v)),
+						size: "sm",
+						w: 80,
+						allowDeselect: false,
+						comboboxProps: { withinPortal: false }
+					})]
+				})
+			]
+		})]
+	});
 }
-var stickyToolbarStyle = (top) => ({
-  position: "sticky",
-  top,
-  zIndex: 3,
-  background: "var(--mantine-color-body)",
-  paddingBottom: "var(--mantine-spacing-xs)"
+//#endregion
+//#region src/DataTable.tsx
+const stickyToolbarStyle = (top) => ({
+	position: "sticky",
+	top,
+	zIndex: 3,
+	background: "var(--mantine-color-body)",
+	paddingBottom: "var(--mantine-spacing-xs)"
 });
-function ColumnMenuSlot({
-  enabled,
-  ...props
-}) {
-  if (!enabled) return null;
-  return /* @__PURE__ */ jsx(ColumnMenu, { ...props });
+/** The Columns menu, rendered inline in the toolbar — or nothing when off. */
+function ColumnMenuSlot({ enabled, ...props }) {
+	if (!enabled) return null;
+	return /* @__PURE__ */ jsx(ColumnMenu, { ...props });
 }
-function SavedViewsSlot({
-  options,
-  labels
-}) {
-  const views = useSavedViews(options);
-  return /* @__PURE__ */ jsx(SavedViewsMenu, { views, labels });
+/**
+* The Saved-views menu in the toolbar. A component (not inline JSX) so
+* `useSavedViews` only runs when the `savedViews` prop is set.
+*/
+function SavedViewsSlot({ options, labels }) {
+	return /* @__PURE__ */ jsx(SavedViewsMenu, {
+		views: useSavedViews$1(options),
+		labels
+	});
 }
+/**
+* Resolve the data tier (source ▸ server ▸ frontend) and the declarative
+* filter runtime into the full chrome prop set: the RESOLVED source, the
+* filters node (auto-built form for the declarative array, JSX as-is) and
+* the chip-label resolvers (derived under the caller's — the user wins
+* per key). Everything downstream consumes these.
+*/
 function useResolvedTableProps(props) {
-  const { source, runtime } = useTableData({
-    locale: props.locale,
-    source: props.source,
-    data: props.data,
-    total: props.total,
-    loading: props.loading,
-    onQueryChange: props.onQueryChange,
-    columns: props.columns,
-    filters: props.filters,
-    urlKey: props.urlKey,
-    adapter: props.urlSync === false ? void 0 : props.urlAdapter,
-    enabled: props.urlSync
-  });
-  const labels = useMemo(() => resolveLabels(props.labels), [props.labels]);
-  let filters;
-  if (isDeclarativeFilters(props.filters) || props.filters === void 0) {
-    filters = runtime.defs.length > 0 ? /* @__PURE__ */ jsx(AutoFilterForm, { defs: runtime.defs, source, labels }) : void 0;
-  } else {
-    filters = props.filters;
-  }
-  const filterLabels = useMemo(
-    () => ({ ...runtime.filterLabels, ...props.filterLabels }),
-    [runtime.filterLabels, props.filterLabels]
-  );
-  return { ...props, source, filters, filterLabels };
+	const { source, runtime } = useTableData({
+		locale: props.locale,
+		source: props.source,
+		data: props.data,
+		total: props.total,
+		loading: props.loading,
+		onQueryChange: props.onQueryChange,
+		columns: props.columns,
+		filters: props.filters,
+		urlKey: props.urlKey,
+		adapter: props.urlSync === false ? void 0 : props.urlAdapter,
+		enabled: props.urlSync
+	});
+	const labels = useMemo(() => resolveLabels(props.labels), [props.labels]);
+	let filters;
+	if (isDeclarativeFilters(props.filters) || props.filters === void 0) filters = runtime.defs.length > 0 ? /* @__PURE__ */ jsx(AutoFilterForm, {
+		defs: runtime.defs,
+		source,
+		labels
+	}) : void 0;
+	else filters = props.filters;
+	const filterLabels = useMemo(() => ({
+		...runtime.filterLabels,
+		...props.filterLabels
+	}), [runtime.filterLabels, props.filterLabels]);
+	return {
+		...props,
+		source,
+		filters,
+		filterLabels
+	};
 }
+/**
+* Batteries-included Mantine data table. Drop in `columns`, a `rowKey`,
+* and a data tier — raw `data` (frontend), `data` + `onQueryChange`
+* (server), or a prebuilt `source` — to get a fully styled, sortable,
+* filterable, paginated table with selection, bulk actions, RTL, dark
+* mode, and optional entrance animation.
+*
+* @typeParam TRow - The row type.
+*/
 function DataTable(props) {
-  const chromeProps = useResolvedTableProps(props);
-  const {
-    source,
-    rowActions,
-    searchPlaceholder,
-    sortByOptions,
-    dir,
-    prefetch,
-    hideSearch,
-    filters,
-    filtersMode = "popover",
-    bulkActions,
-    slots,
-    classNames,
-    toolbar: customToolbar,
-    skeletonRows,
-    stickyTop = 0,
-    animate = false,
-    stickyHeader = false,
-    enableColumnMenu = false,
-    savedViews
-  } = chromeProps;
-  const density = chromeProps.density ?? "comfortable";
-  const chrome = useTableChrome(chromeProps);
-  const { table, isMobile, confirm, getRowId } = chrome;
-  const hasRowActions = (rowActions?.length ?? 0) > 0;
-  const visibleRowActions = chrome.columnLayout.isHidden(ACTIONS_COLUMN_KEY) ? void 0 : rowActions;
-  const actionsPinned = chrome.columnLayout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
-  const { virtualization, loadMoreRef, canLoadMore, virtualScrollRef } = useChromeBodyData(chrome, chromeProps);
-  const [drawerOpened, setDrawerOpened] = useState(false);
-  const filtersTrigger = useFilterTriggerToggle(drawerOpened, setDrawerOpened);
-  const rootRef = useRef(null);
-  const { ref: toolbarRef, height: toolbarHeight } = useElementSize();
-  const desktopBodyRef = useRef(null);
-  const mobileBodyRef = useRef(null);
-  useChromeScrollReset(rootRef, chrome, chromeProps);
-  useMountStagger(
-    isMobile ? mobileBodyRef : desktopBodyRef,
-    [virtualization.rows.length, isMobile],
-    { enabled: animate }
-  );
-  let body;
-  if (chrome.body === "skeleton") {
-    body = slots?.skeleton ?? /* @__PURE__ */ jsx(
-      TableSkeleton,
-      {
-        columns: table.columns.length || 1,
-        rows: skeletonRows ?? source.limit,
-        loadingLabel: table.labels.loading
-      }
-    );
-  } else if (chrome.body === "empty") {
-    body = slots?.empty ?? (chrome.emptyVariant === "noResults" ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: table.labels.noResults,
-        action: /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", onClick: chrome.clearFilters, children: table.labels.clearAll })
-      }
-    ) : /* @__PURE__ */ jsx(EmptyState, { title: table.labels.noData }));
-  } else if (chrome.body === "mobile") {
-    body = /* @__PURE__ */ jsx(
-      MobileCards,
-      {
-        table,
-        rows: source.rows,
-        rowActions: visibleRowActions,
-        confirm,
-        getRowId,
-        onRowClick: props.onRowClick,
-        rowClassName: props.rowClassName,
-        renderRowDetail: props.renderRowDetail,
-        summaryRow: props.summaryRow,
-        expansion: chrome.detail?.expansion,
-        bodyRef: mobileBodyRef,
-        className: classNames?.card,
-        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
-        paddingTop: virtualization.paddingTop,
-        paddingBottom: virtualization.paddingBottom,
-        measureElement: virtualization.measureElement,
-        density
-      }
-    );
-  } else {
-    body = /* @__PURE__ */ jsx(
-      DesktopTable,
-      {
-        table,
-        rows: source.rows,
-        rowActions: visibleRowActions,
-        confirm,
-        prefetch,
-        onRowClick: props.onRowClick,
-        rowClassName: props.rowClassName,
-        renderRowDetail: props.renderRowDetail,
-        summaryRow: props.summaryRow,
-        expansion: chrome.detail?.expansion,
-        getRowId,
-        bodyRef: desktopBodyRef,
-        className: classNames?.table,
-        rowEntries: virtualization.enabled ? virtualization.rows : void 0,
-        paddingTop: virtualization.paddingTop,
-        paddingBottom: virtualization.paddingBottom,
-        measureElement: virtualization.measureElement,
-        stickyHeaderOffset: stickyTop + toolbarHeight,
-        stickyHeader,
-        pinOffset: chrome.columnLayout.pinOffset,
-        actionsPinned,
-        maxHeight: props.maxHeight,
-        virtualScrollRef,
-        setWidth: props.resizableColumns ? chrome.columnLayout.setWidth : void 0,
-        columnWidths: chrome.columnLayout.state.widths,
-        resizeLabel: table.labels.resizeColumn,
-        density
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Paper,
-    {
-      ref: rootRef,
-      p: "xs",
-      radius: "md",
-      withBorder: true,
-      dir,
-      "aria-busy": chrome.isRefreshing || void 0,
-      className: classNames?.root,
-      children: [
-        /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              ref: toolbarRef,
-              style: stickyToolbarStyle(stickyTop),
-              className: classNames?.toolbar,
-              children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-                /* @__PURE__ */ jsx(
-                  Toolbar,
-                  {
-                    table,
-                    hideSearch,
-                    searchPlaceholder,
-                    sortByOptions,
-                    customToolbar,
-                    hasFilters: Boolean(filters),
-                    activeFilterCount: chrome.activeFilterCount,
-                    filtersMode,
-                    filters,
-                    filtersOpen: drawerOpened,
-                    onToggleFilters: filtersTrigger.onClick,
-                    onFiltersTriggerPointerDown: filtersTrigger.onPointerDown,
-                    onCloseFilters: () => setDrawerOpened(false),
-                    onClearFilters: chrome.clearFilters,
-                    dir,
-                    columnMenu: /* @__PURE__ */ jsxs(Fragment, { children: [
-                      savedViews && /* @__PURE__ */ jsx(
-                        SavedViewsSlot,
-                        {
-                          options: {
-                            adapter: chromeProps.urlAdapter,
-                            urlKey: chromeProps.urlKey,
-                            ...savedViews
-                          },
-                          labels: table.labels
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        ColumnMenuSlot,
-                        {
-                          enabled: enableColumnMenu && !isMobile,
-                          allColumns: chrome.allColumns,
-                          layout: chrome.columnLayout,
-                          labels: table.labels,
-                          hasRowActions
-                        }
-                      )
-                    ] }),
-                    showRowsPerPage: canLoadMore
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  ActiveFilterChips,
-                  {
-                    chips: chrome.mergedChips,
-                    onClearAll: chrome.clearFilters,
-                    label: table.labels.filters,
-                    clearAllLabel: table.labels.clearAll
-                  }
-                ),
-                table.selection && bulkActions && /* @__PURE__ */ jsx(
-                  BulkActionBar,
-                  {
-                    selection: table.selection,
-                    total: source.total,
-                    bulkActions,
-                    confirm,
-                    labels: table.labels
-                  }
-                )
-              ] })
-            }
-          ),
-          chrome.isRefreshing && /* @__PURE__ */ jsx(
-            Progress,
-            {
-              size: "xs",
-              animated: true,
-              value: 100,
-              "aria-label": table.labels.loading
-            }
-          ),
-          source.error && /* @__PURE__ */ jsx(
-            ErrorState,
-            {
-              error: source.error,
-              title: table.labels.errorTitle,
-              message: table.labels.errorMessage,
-              retryLabel: table.labels.retry,
-              onRetry: source.refetch ? () => void source.refetch?.() : void 0,
-              isRetrying: source.isFetching
-            }
-          ),
-          !source.error && body,
-          canLoadMore && source.hasNextPage && /* @__PURE__ */ jsx(Group, { ref: loadMoreRef, justify: "center", py: "xs", children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "default",
-              size: "sm",
-              loading: source.isFetchingNextPage,
-              onClick: () => source.fetchNextPage(),
-              children: table.labels.loadMore
-            }
-          ) }),
-          chrome.showFooter && /* @__PURE__ */ jsx(Box, { className: classNames?.footer, children: /* @__PURE__ */ jsx(
-            PaginationFooter,
-            {
-              page: table.pagination.safePage,
-              totalPages: table.pagination.totalPages,
-              limit: source.limit,
-              total: source.total,
-              fromIndex: table.pagination.fromIndex,
-              toIndex: table.pagination.toIndex,
-              onPageChange: source.setPage,
-              onLimitChange: source.setLimit,
-              labels: table.labels
-            }
-          ) })
-        ] }),
-        filters && filtersMode === "drawer" && /* @__PURE__ */ jsx(
-          FilterDrawer,
-          {
-            opened: drawerOpened,
-            onClose: () => setDrawerOpened(false),
-            filters,
-            activeFilterCount: chrome.activeFilterCount,
-            onClearFilters: chrome.clearFilters,
-            labels: table.labels,
-            dir
-          }
-        )
-      ]
-    }
-  );
+	const chromeProps = useResolvedTableProps(props);
+	const { source, rowActions, searchPlaceholder, sortByOptions, dir, prefetch, hideSearch, filters, filtersMode = "popover", bulkActions, slots, classNames, toolbar: customToolbar, skeletonRows, stickyTop = 0, animate = false, stickyHeader = false, enableColumnMenu = false, savedViews } = chromeProps;
+	const density = chromeProps.density ?? "comfortable";
+	const chrome = useTableChrome(chromeProps);
+	const { table, isMobile, confirm, getRowId } = chrome;
+	const hasRowActions = (rowActions?.length ?? 0) > 0;
+	const visibleRowActions = chrome.columnLayout.isHidden(ACTIONS_COLUMN_KEY) ? void 0 : rowActions;
+	const actionsPinned = chrome.columnLayout.state.pinned[ACTIONS_COLUMN_KEY] === "right";
+	const { virtualization, loadMoreRef, canLoadMore, virtualScrollRef } = useChromeBodyData(chrome, chromeProps);
+	const [drawerOpened, setDrawerOpened] = useState(false);
+	const filtersTrigger = useFilterTriggerToggle(drawerOpened, setDrawerOpened);
+	const rootRef = useRef(null);
+	const { ref: toolbarRef, height: toolbarHeight } = useElementSize();
+	const desktopBodyRef = useRef(null);
+	const mobileBodyRef = useRef(null);
+	useChromeScrollReset(rootRef, chrome, chromeProps);
+	useMountStagger(isMobile ? mobileBodyRef : desktopBodyRef, [virtualization.rows.length, isMobile], { enabled: animate });
+	let body;
+	if (chrome.body === "skeleton") body = slots?.skeleton ?? /* @__PURE__ */ jsx(TableSkeleton, {
+		columns: table.columns.length || 1,
+		rows: skeletonRows ?? source.limit,
+		loadingLabel: table.labels.loading
+	});
+	else if (chrome.body === "empty") body = slots?.empty ?? (chrome.emptyVariant === "noResults" ? /* @__PURE__ */ jsx(EmptyState, {
+		title: table.labels.noResults,
+		action: /* @__PURE__ */ jsx(Button, {
+			variant: "light",
+			size: "sm",
+			onClick: chrome.clearFilters,
+			children: table.labels.clearAll
+		})
+	}) : /* @__PURE__ */ jsx(EmptyState, { title: table.labels.noData }));
+	else if (chrome.body === "mobile") body = /* @__PURE__ */ jsx(MobileCards, {
+		table,
+		rows: source.rows,
+		rowActions: visibleRowActions,
+		confirm,
+		getRowId,
+		onRowClick: props.onRowClick,
+		rowClassName: props.rowClassName,
+		renderRowDetail: props.renderRowDetail,
+		summaryRow: props.summaryRow,
+		expansion: chrome.detail?.expansion,
+		bodyRef: mobileBodyRef,
+		className: classNames?.card,
+		rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+		paddingTop: virtualization.paddingTop,
+		paddingBottom: virtualization.paddingBottom,
+		measureElement: virtualization.measureElement,
+		density
+	});
+	else body = /* @__PURE__ */ jsx(DesktopTable, {
+		table,
+		rows: source.rows,
+		rowActions: visibleRowActions,
+		confirm,
+		prefetch,
+		onRowClick: props.onRowClick,
+		rowClassName: props.rowClassName,
+		renderRowDetail: props.renderRowDetail,
+		summaryRow: props.summaryRow,
+		expansion: chrome.detail?.expansion,
+		getRowId,
+		bodyRef: desktopBodyRef,
+		className: classNames?.table,
+		rowEntries: virtualization.enabled ? virtualization.rows : void 0,
+		paddingTop: virtualization.paddingTop,
+		paddingBottom: virtualization.paddingBottom,
+		measureElement: virtualization.measureElement,
+		stickyHeaderOffset: stickyTop + toolbarHeight,
+		stickyHeader,
+		pinOffset: chrome.columnLayout.pinOffset,
+		actionsPinned,
+		maxHeight: props.maxHeight,
+		virtualScrollRef,
+		setWidth: props.resizableColumns ? chrome.columnLayout.setWidth : void 0,
+		columnWidths: chrome.columnLayout.state.widths,
+		resizeLabel: table.labels.resizeColumn,
+		density
+	});
+	return /* @__PURE__ */ jsxs(Paper, {
+		ref: rootRef,
+		p: "xs",
+		radius: "md",
+		withBorder: true,
+		dir,
+		"aria-busy": chrome.isRefreshing || void 0,
+		className: classNames?.root,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			gap: "xs",
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					ref: toolbarRef,
+					style: stickyToolbarStyle(stickyTop),
+					className: classNames?.toolbar,
+					children: /* @__PURE__ */ jsxs(Stack, {
+						gap: "xs",
+						children: [
+							/* @__PURE__ */ jsx(Toolbar, {
+								table,
+								hideSearch,
+								searchPlaceholder,
+								sortByOptions,
+								customToolbar,
+								hasFilters: Boolean(filters),
+								activeFilterCount: chrome.activeFilterCount,
+								filtersMode,
+								filters,
+								filtersOpen: drawerOpened,
+								onToggleFilters: filtersTrigger.onClick,
+								onFiltersTriggerPointerDown: filtersTrigger.onPointerDown,
+								onCloseFilters: () => setDrawerOpened(false),
+								onClearFilters: chrome.clearFilters,
+								dir,
+								columnMenu: /* @__PURE__ */ jsxs(Fragment, { children: [savedViews && /* @__PURE__ */ jsx(SavedViewsSlot, {
+									options: {
+										adapter: chromeProps.urlAdapter,
+										urlKey: chromeProps.urlKey,
+										...savedViews
+									},
+									labels: table.labels
+								}), /* @__PURE__ */ jsx(ColumnMenuSlot, {
+									enabled: enableColumnMenu && !isMobile,
+									allColumns: chrome.allColumns,
+									layout: chrome.columnLayout,
+									labels: table.labels,
+									hasRowActions
+								})] }),
+								showRowsPerPage: canLoadMore
+							}),
+							/* @__PURE__ */ jsx(ActiveFilterChips, {
+								chips: chrome.mergedChips,
+								onClearAll: chrome.clearFilters,
+								label: table.labels.filters,
+								clearAllLabel: table.labels.clearAll
+							}),
+							table.selection && bulkActions && /* @__PURE__ */ jsx(BulkActionBar, {
+								selection: table.selection,
+								total: source.total,
+								bulkActions,
+								confirm,
+								labels: table.labels
+							})
+						]
+					})
+				}),
+				chrome.isRefreshing && /* @__PURE__ */ jsx(Progress, {
+					size: "xs",
+					animated: true,
+					value: 100,
+					"aria-label": table.labels.loading
+				}),
+				source.error && /* @__PURE__ */ jsx(ErrorState, {
+					error: source.error,
+					title: table.labels.errorTitle,
+					message: table.labels.errorMessage,
+					retryLabel: table.labels.retry,
+					onRetry: source.refetch ? () => void source.refetch?.() : void 0,
+					isRetrying: source.isFetching
+				}),
+				!source.error && body,
+				canLoadMore && source.hasNextPage && /* @__PURE__ */ jsx(Group, {
+					ref: loadMoreRef,
+					justify: "center",
+					py: "xs",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "default",
+						size: "sm",
+						loading: source.isFetchingNextPage,
+						onClick: () => source.fetchNextPage(),
+						children: table.labels.loadMore
+					})
+				}),
+				chrome.showFooter && /* @__PURE__ */ jsx(Box, {
+					className: classNames?.footer,
+					children: /* @__PURE__ */ jsx(PaginationFooter, {
+						page: table.pagination.safePage,
+						totalPages: table.pagination.totalPages,
+						limit: source.limit,
+						total: source.total,
+						fromIndex: table.pagination.fromIndex,
+						toIndex: table.pagination.toIndex,
+						onPageChange: source.setPage,
+						onLimitChange: source.setLimit,
+						labels: table.labels
+					})
+				})
+			]
+		}), filters && filtersMode === "drawer" && /* @__PURE__ */ jsx(FilterDrawer, {
+			opened: drawerOpened,
+			onClose: () => setDrawerOpened(false),
+			filters,
+			activeFilterCount: chrome.activeFilterCount,
+			onClearFilters: chrome.clearFilters,
+			labels: table.labels,
+			dir
+		})]
+	});
 }
+//#endregion
+export { ActiveFilterChips, AutoFilterForm, DataTable, EmptyState, ErrorState, PaginationFooter, SavedViewsMenu, TableSkeleton, createHistoryAdapter, createMemoryAdapter, defaultConfirm, defaultLabels, deriveSortByOptions, getHistoryAdapter, useBackendData, useDataTable, useFrontendData, useMountStagger, useSavedViews, useTableUrlState };
 
-export { ActiveFilterChips, AutoFilterForm, DataTable, EmptyState, ErrorState, PaginationFooter, SavedViewsMenu, TableSkeleton, useMountStagger };
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map