@coldsmirk/ledger-mantine 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -52,30 +52,74 @@ let _mantine_dates = require("@mantine/dates");
 */
 const [DataTableProvider, useDataTableContext] = (0, _mantine_core.createSafeContext)("DataTable parts must be rendered inside <DataTable>");
 //#endregion
+//#region src/size.ts
+const SIZES = {
+	xs: {
+		verticalSpacing: 5,
+		horizontalSpacing: 8,
+		rowHeight: 31,
+		control: "xs",
+		glyph: 12,
+		injectedWidth: 36
+	},
+	sm: {
+		verticalSpacing: 7,
+		horizontalSpacing: 10,
+		rowHeight: 37,
+		control: "xs",
+		glyph: 14,
+		injectedWidth: 40
+	},
+	md: {
+		verticalSpacing: 8,
+		horizontalSpacing: 12,
+		rowHeight: 43,
+		control: "sm",
+		glyph: 16,
+		injectedWidth: 48
+	},
+	lg: {
+		verticalSpacing: 10,
+		horizontalSpacing: 16,
+		rowHeight: 51,
+		control: "md",
+		glyph: 18,
+		injectedWidth: 62
+	},
+	xl: {
+		verticalSpacing: 14,
+		horizontalSpacing: 20,
+		rowHeight: 61,
+		control: "lg",
+		glyph: 20,
+		injectedWidth: 76
+	}
+};
+//#endregion
 //#region src/expander.tsx
 /**
 * The injected expander column: a per-row chevron (detail panels and sub-row trees share it)
 * and an expand-all header affordance for trees. Clicks never reach `onRowClick`.
 */
 function ExpanderHeaderCell({ table }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	if (!table.options.getSubRows) return null;
 	const allExpanded = table.getIsAllRowsExpanded();
 	const canSomeExpand = table.getCanSomeRowsExpand();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
 		"aria-label": allExpanded ? labels.collapseAll : labels.expandAll,
 		"data-expanded": allExpanded || void 0,
-		size: "sm",
+		size: SIZES[size].control,
 		variant: "subtle",
 		onClick: (event) => {
 			event.stopPropagation();
 			expansion?.toggleAll(!allExpanded, canSomeExpand);
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: SIZES[size].glyph })
 	});
 }
 function ExpanderCell({ row }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	const canExpand = row.getCanExpand();
 	if (!canExpand) return null;
 	const expanded = row.getIsExpanded();
@@ -83,13 +127,13 @@ function ExpanderCell({ row }) {
 		"aria-expanded": expanded,
 		"aria-label": expanded ? labels.collapseRow : labels.expandRow,
 		"data-expanded": expanded || void 0,
-		size: "sm",
+		size: SIZES[size].control,
 		variant: "subtle",
 		onClick: (event) => {
 			event.stopPropagation();
 			expansion?.toggle(row.id, expanded, canExpand);
 		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, {})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: SIZES[size].glyph })
 	});
 }
 //#endregion
@@ -516,7 +560,7 @@ function RowReorderOverlay({ session }) {
 * why (docs/rows.md#row-ordering).
 */
 function RowDragCell({ row, table }) {
-	const { labels, icons, rowReorderKeyboard } = useDataTableContext();
+	const { labels, icons, rowReorderKeyboard, size } = useDataTableContext();
 	const orderable = table.options.meta?.ledger?.rowOrdering.orderable === true;
 	const pinned = table.options.enableRowPinning === true && row.getIsPinned() !== false;
 	const { ref, isDragSource } = (0, _dnd_kit_react.useDraggable)({
@@ -574,13 +618,13 @@ function RowDragCell({ row, table }) {
 			"aria-label": labels.reorderRow,
 			"aria-pressed": lifted || void 0,
 			color: "gray",
-			size: "sm",
+			size: SIZES[size].control,
 			variant: "subtle",
 			onBlur: () => {
 				if (lifted) rowReorderKeyboard?.cancel();
 			},
 			onKeyDown: handleKeyDown,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.reorderRow, { size: 14 })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.reorderRow, { size: SIZES[size].glyph })
 		})
 	});
 }
@@ -597,7 +641,7 @@ function RowDragCell({ row, table }) {
 */
 function noop() {}
 function SelectionHeaderCell({ table }) {
-	const { labels, selection } = useDataTableContext();
+	const { labels, selection, size } = useDataTableContext();
 	if (table.options.enableMultiRowSelection === false) return null;
 	const scope = table.options.meta?.ledger?.selectAllScope ?? "all";
 	const allSelected = scope === "page" ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected();
@@ -606,7 +650,7 @@ function SelectionHeaderCell({ table }) {
 		"aria-label": labels.selectAllRows,
 		checked: allSelected,
 		indeterminate: !allSelected && someSelected,
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: (event) => {
 			event.stopPropagation();
@@ -615,7 +659,7 @@ function SelectionHeaderCell({ table }) {
 	});
 }
 function SelectionCell({ row }) {
-	const { labels, instanceId, selection } = useDataTableContext();
+	const { labels, instanceId, selection, size } = useDataTableContext();
 	const selected = row.getIsSelected();
 	const select = (event) => {
 		event.stopPropagation();
@@ -626,7 +670,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		name: `${instanceId}-selection`,
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -635,7 +679,7 @@ function SelectionCell({ row }) {
 		checked: selected,
 		disabled: !row.getCanSelect(),
 		indeterminate: !selected && row.getIsSomeSelected(),
-		size: "xs",
+		size: SIZES[size].control,
 		onChange: noop,
 		onClick: select
 	});
@@ -687,9 +731,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	const result = [];
 	if (withRowDrag) result.push(injectedColumn({
 		id: ROW_DRAG_COLUMN_ID,
-		size: 36,
-		minSize: 36,
-		maxSize: 36,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -704,9 +745,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	}, rowDragColumn));
 	if (withSelection) result.push(injectedColumn({
 		id: SELECTION_COLUMN_ID,
-		size: 40,
-		minSize: 40,
-		maxSize: 40,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -718,9 +756,6 @@ function buildColumns({ columns, withRowDrag, withSelection, withExpander, rowDr
 	}, selectionColumn));
 	if (withExpander) result.push(injectedColumn({
 		id: EXPANDER_COLUMN_ID,
-		size: 36,
-		minSize: 36,
-		maxSize: 36,
 		enableSorting: false,
 		enableHiding: false,
 		enableResizing: false,
@@ -1052,6 +1087,10 @@ function resolveIcons(icons) {
 const defaultLabels = {
 	paginationSummary: (from, to, total) => `${from}–${to} of ${total}`,
 	rowsPerPage: "Rows per page",
+	firstPage: "First page",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	lastPage: "Last page",
 	selectAllRows: "Select all rows",
 	selectRow: "Select row",
 	selectedCount: (count) => `${count} selected`,
@@ -1080,6 +1119,12 @@ const defaultLabels = {
 	filterPlaceholder: "Filter…",
 	filterRangeMin: "Min",
 	filterRangeMax: "Max",
+	previousMonth: "Previous month",
+	nextMonth: "Next month",
+	previousYear: "Previous year",
+	nextYear: "Next year",
+	previousDecade: "Previous decade",
+	nextDecade: "Next decade",
 	searchPlaceholder: "Search…",
 	loading: "Loading",
 	empty: "No data",
@@ -1565,7 +1610,13 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [
 	50,
 	100
 ];
-function PaginationBarCore({ table, labels, pageSizeOptions, className, style }) {
+const CONTROL_LABELS = {
+	first: "firstPage",
+	previous: "previousPage",
+	next: "nextPage",
+	last: "lastPage"
+};
+function PaginationBarCore({ table, labels, pageSizeOptions, size, className, style }) {
 	const pageSizeLabelId = (0, react.useId)();
 	const { pageIndex, pageSize } = table.atoms.pagination.get();
 	const total = table.getRowCount();
@@ -1580,8 +1631,8 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 		style,
 		wrap: "wrap",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
-			c: "dimmed",
-			size: "sm",
+			c: "var(--ledger-color-dimmed)",
+			size,
 			children: labels.paginationSummary(from, to, total)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Group, {
 			gap: "md",
@@ -1590,21 +1641,24 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 				gap: "xs",
 				wrap: "nowrap",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Text, {
-					c: "dimmed",
+					c: "var(--ledger-color-dimmed)",
 					id: pageSizeLabelId,
-					size: "sm",
+					size,
 					children: labels.rowsPerPage
 				}, "label"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Select, {
 					allowDeselect: false,
 					"aria-labelledby": pageSizeLabelId,
 					data: sizeOptions.map(String),
-					size: "xs",
+					size: SIZES[size].control,
 					value: String(pageSize),
 					w: 84,
 					onChange: (value) => value !== null && table.setPageSize(Number(value))
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Pagination, {
-				size: "sm",
+				getControlProps: (control) => {
+					return { "aria-label": labels[CONTROL_LABELS[control]] };
+				},
+				size: SIZES[size].control,
 				total: pageCount,
 				value: pageIndex + 1,
 				onChange: (page) => table.setPageIndex(page - 1)
@@ -1616,26 +1670,28 @@ function PaginationBarCore({ table, labels, pageSizeOptions, className, style })
 * The built-in bar rendered by <DataTable> (context-styled).
 */
 function PaginationBar({ table, pageSizeOptions }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { className, style } = getStyles("paginationBar");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationBarCore, {
 		className,
 		labels,
 		pageSizeOptions,
+		size,
 		style,
 		table
 	});
 }
-const paginationDefaultProps = {};
+const paginationDefaultProps = { size: "sm" };
 /**
 * Standalone compound (`DataTable.Pagination`) — place it anywhere, theme it via defaultProps.
 */
 function DataTablePagination(props) {
-	const { table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, labels, className, style } = (0, _mantine_core.useProps)("DataTablePagination", paginationDefaultProps, props);
+	const { table, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, labels, size, className, style } = (0, _mantine_core.useProps)("DataTablePagination", paginationDefaultProps, props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationBarCore, {
 		className: (0, clsx.default)("ledger-pagination-bar", className),
 		labels: resolveLabels(labels),
 		pageSizeOptions,
+		size,
 		style,
 		table
 	});
@@ -1793,7 +1849,7 @@ function canEditCell(cell, row) {
 * commit, and the pending presentation around it.
 */
 function CellEditor({ cell }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const editing = table.options.meta?.ledger?.editing;
 	const normalized = normalizeEdit(cell.column.columnDef.meta?.edit);
@@ -1842,7 +1898,8 @@ function CellEditor({ cell }) {
 		pending,
 		mode: "cell",
 		autoFocus: true,
-		label: labels.editColumn(columnHeaderText(cell.column))
+		label: labels.editColumn(columnHeaderText(cell.column)),
+		size: SIZES[size].control
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"aria-busy": pending || void 0,
@@ -1864,7 +1921,7 @@ function CellEditor({ cell }) {
 * a virtualized unmount), blur never commits, and Enter/Escape commit or cancel the whole row.
 */
 function RowCellEditor({ cell }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const editing = table.options.meta?.ledger?.editing;
 	const rowApi = editing?.row;
@@ -1922,7 +1979,8 @@ function RowCellEditor({ cell }) {
 		},
 		error: editError,
 		pending,
-		label
+		label,
+		size: SIZES[size].control
 	}) : normalized.render({
 		row: cell.row,
 		column: cell.column,
@@ -1934,7 +1992,8 @@ function RowCellEditor({ cell }) {
 		pending,
 		mode: "row",
 		autoFocus,
-		label
+		label,
+		size: SIZES[size].control
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
@@ -2327,7 +2386,7 @@ function usePinnedRowOffsets(topCount, bottomCount) {
 * variables).
 */
 const TREE_INDENT_PX = 20;
-const DEFAULT_ESTIMATED_ROW_HEIGHT = 44;
+const DEFAULT_ESTIMATED_ROW_HEIGHT = SIZES.sm.rowHeight;
 const DEFAULT_OVERSCAN = 8;
 /**
 * Whether any leaf definition declares a merge — the gate that keeps span-index reads (and the
@@ -2375,7 +2434,7 @@ function countDisplayRows(rows, withDetailPanels) {
 * Grouped cell: expander, the grouped value, and the group size.
 */
 function GroupCell({ cell }) {
-	const { labels, icons, expansion } = useDataTableContext();
+	const { labels, icons, expansion, size } = useDataTableContext();
 	const { row } = cell;
 	const expandedGroup = row.getIsExpanded();
 	const canExpandGroup = row.getCanExpand();
@@ -2386,13 +2445,13 @@ function GroupCell({ cell }) {
 				"aria-expanded": expandedGroup,
 				"aria-label": expandedGroup ? labels.collapseRow : labels.expandRow,
 				"data-expanded": expandedGroup || void 0,
-				size: "xs",
+				size: SIZES[size].control,
 				variant: "subtle",
 				onClick: (event) => {
 					event.stopPropagation();
 					expansion?.toggle(row.id, expandedGroup, canExpandGroup);
 				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: 12 })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.expandRow, { size: SIZES[size].glyph })
 			}),
 			(0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -2416,7 +2475,7 @@ function GroupCell({ cell }) {
 * `onRowClick` out.
 */
 function InstantCell({ cell, render }) {
-	const { labels, getStyles } = useDataTableContext();
+	const { labels, getStyles, size } = useDataTableContext();
 	const { table } = cell.getContext();
 	const instant = table.options.meta?.ledger?.editing.instant;
 	const rowId = cell.row.id;
@@ -2448,7 +2507,8 @@ function InstantCell({ cell, render }) {
 				commit: (next) => instant.commit(rowId, columnId, next),
 				pending,
 				error,
-				label: labels.editColumn(columnHeaderText(cell.column))
+				label: labels.editColumn(columnHeaderText(cell.column)),
+				size: SIZES[size].control
 			}),
 			pending && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Loader, {
 				"aria-label": labels.editPending,
@@ -3019,8 +3079,16 @@ function autosizeColumn(setColumnSizing, { columnId, minSize, maxSize, hasFilter
 * a black box that may ship no clear of its own — keeps the popover-level fallback.
 */
 const FACETED_OPTIONS_CAP = 100;
+/**
+* The smallest pointer target WCAG 2.2 AA accepts without spacing around it, in px.
+*/
+const MIN_TARGET_SIZE = 24;
+/**
+* The calendar's weekend color, as the variable Mantine's day rule reads (see DateRangeFilter).
+*/
+const WEEKEND_COLOR = { "--mantine-color-red-6": "color-mix(in srgb, var(--mantine-color-red-text), var(--mantine-color-text) 30%)" };
 function FilterPopover({ column }) {
-	const { labels, icons, getStyles, filterMode } = useDataTableContext();
+	const { labels, icons, getStyles, filterMode, size } = useDataTableContext();
 	const filter = column.columnDef.meta?.filter;
 	if (!filter || !column.getCanFilter()) return null;
 	const active = column.getFilterValue() !== void 0;
@@ -3032,7 +3100,9 @@ function FilterPopover({ column }) {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Popover.Target, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ActionIcon, {
 			"aria-label": name,
 			"data-active": active || void 0,
-			size: "sm",
+			mih: MIN_TARGET_SIZE,
+			miw: MIN_TARGET_SIZE,
+			size: SIZES[size].control,
 			variant: active ? "light" : "subtle",
 			onClick: (event) => event.stopPropagation(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.filterColumn, {})
@@ -3213,11 +3283,21 @@ function DateRangeFilter({ column, name }) {
 	const filterValue = column.getFilterValue();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_dates.DatePicker, {
 		allowSingleDateInRange: true,
+		hideOutsideDates: true,
 		highlightToday: true,
 		"aria-label": name,
 		size: "xs",
+		style: WEEKEND_COLOR,
 		type: "range",
 		value: filterValue ?? [null, null],
+		ariaLabels: {
+			previousMonth: labels.previousMonth,
+			nextMonth: labels.nextMonth,
+			previousYear: labels.previousYear,
+			nextYear: labels.nextYear,
+			previousDecade: labels.previousDecade,
+			nextDecade: labels.nextDecade
+		},
 		onChange: (next) => column.setFilterValue(!next[0] && !next[1] ? void 0 : next)
 	}), filterValue !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Group, {
 		justify: "flex-end",
@@ -3474,8 +3554,9 @@ function TableHeader({ table, columnWidths, columnSizing, columnWindow }) {
 	});
 }
 function HeaderCell({ header, table, reorder, resize, columnWidths, columnSizing, colSpan, ariaColIndex }) {
-	const { getStyles, labels, icons } = useDataTableContext();
+	const { getStyles, labels, icons, size } = useDataTableContext();
 	const { column } = header;
+	const { glyph } = SIZES[size];
 	const { meta } = column.columnDef;
 	const internal = isInternalColumn(column.id);
 	const canSort = column.getCanSort();
@@ -3551,9 +3632,9 @@ function HeaderCell({ header, table, reorder, resize, columnWidths, columnSizing
 					...getStyles("sortIndicator"),
 					"data-sorted": sorted || void 0,
 					children: [
-						sorted === "asc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortAsc, { size: 14 }),
-						sorted === "desc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortDesc, { size: 14 }),
-						sorted === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortable, { size: 14 }),
+						sorted === "asc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortAsc, { size: glyph }),
+						sorted === "desc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortDesc, { size: glyph }),
+						sorted === false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.sortable, { size: glyph }),
 						sorted !== false && sortCount > 1 && sortIndex >= 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("sup", { children: sortIndex + 1 })
 					]
 				})]
@@ -3706,7 +3787,7 @@ function minWidthPx(tableMinWidth, viewport) {
 	if (!tableElement) return Number.parseFloat(tableMinWidth) || 0;
 	return Number.parseFloat(getComputedStyle(tableElement).minWidth) || 0;
 }
-function useColumnWidths(table, columns, viewport, tableMinWidth) {
+function useColumnWidths(table, columns, viewport, tableMinWidth, injectedWidth) {
 	const [availableWidth, setAvailableWidth] = (0, react.useState)(0);
 	const measure = (0, react.useCallback)(() => {
 		if (!viewport) return;
@@ -3725,6 +3806,12 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 	const resolved = (0, react.useMemo)(() => {
 		return resolveColumnWidths(columns.map((column) => {
 			const raw = rawColumnSizing(column.columnDef);
+			if (isInternalColumn(column.id)) return {
+				id: column.id,
+				size: raw?.size ?? injectedWidth,
+				minSize: raw?.minSize ?? injectedWidth,
+				maxSize: raw?.maxSize ?? injectedWidth
+			};
 			return {
 				id: column.id,
 				size: raw ? raw.size ?? defaultColumn?.size : column.columnDef.size,
@@ -3736,7 +3823,8 @@ function useColumnWidths(table, columns, viewport, tableMinWidth) {
 		columns,
 		columnSizing,
 		availableWidth,
-		defaultColumn
+		defaultColumn,
+		injectedWidth
 	]);
 	const signature = JSON.stringify([resolved.total, Object.entries(resolved.byId)]);
 	return (0, react.useMemo)(() => resolved, [signature]);
@@ -3787,6 +3875,24 @@ const builtInFilterFns = {
 	startsWith: _tanstack_react_table.filterFn_startsWith,
 	weakEquals: _tanstack_react_table.filterFn_weakEquals
 };
+/**
+* Typed through the exported definitions on purpose: since 9.2 several of their value types
+* name an alias TanStack does not export, and an inferred registry would carry that alias into
+* ledger's declaration files, where no consumer can resolve it.
+*/
+const builtInAggregationFns = {
+	count: _tanstack_react_table.aggregationFn_count,
+	extent: _tanstack_react_table.aggregationFn_extent,
+	first: _tanstack_react_table.aggregationFn_first,
+	last: _tanstack_react_table.aggregationFn_last,
+	max: _tanstack_react_table.aggregationFn_max,
+	mean: _tanstack_react_table.aggregationFn_mean,
+	median: _tanstack_react_table.aggregationFn_median,
+	min: _tanstack_react_table.aggregationFn_min,
+	sum: _tanstack_react_table.aggregationFn_sum,
+	unique: _tanstack_react_table.aggregationFn_unique,
+	uniqueCount: _tanstack_react_table.aggregationFn_uniqueCount
+};
 const ledgerFeatures = (0, _tanstack_react_table.tableFeatures)({
 	cellSpanningFeature: _tanstack_react_table.cellSpanningFeature,
 	columnFacetingFeature: _tanstack_react_table.columnFacetingFeature,
@@ -3811,19 +3917,7 @@ const ledgerFeatures = (0, _tanstack_react_table.tableFeatures)({
 	groupedRowModel: (0, _tanstack_react_table.createGroupedRowModel)(),
 	paginatedRowModel: (0, _tanstack_react_table.createPaginatedRowModel)(),
 	sortedRowModel: (0, _tanstack_react_table.createSortedRowModel)(),
-	aggregationFns: {
-		count: _tanstack_react_table.aggregationFn_count,
-		extent: _tanstack_react_table.aggregationFn_extent,
-		first: _tanstack_react_table.aggregationFn_first,
-		last: _tanstack_react_table.aggregationFn_last,
-		max: _tanstack_react_table.aggregationFn_max,
-		mean: _tanstack_react_table.aggregationFn_mean,
-		median: _tanstack_react_table.aggregationFn_median,
-		min: _tanstack_react_table.aggregationFn_min,
-		sum: _tanstack_react_table.aggregationFn_sum,
-		unique: _tanstack_react_table.aggregationFn_unique,
-		uniqueCount: _tanstack_react_table.aggregationFn_uniqueCount
-	},
+	aggregationFns: builtInAggregationFns,
 	filterFns: {
 		...builtInFilterFns,
 		...ledgerFilterFns
@@ -6344,6 +6438,33 @@ function useStylesRevision(getStyles, selectors) {
 	return revision;
 }
 //#endregion
+//#region src/use-viewport-overflow.ts
+/**
+* Whether the body viewport scrolls on either axis. A scroll container has to be reachable by
+* keyboard to be scrolled by it (WCAG 2.1.1), while a focus stop over content that fits is a
+* Tab press spent on nothing — so the viewport's focus stop follows this.
+*
+* Measured whenever the viewport or its content resizes: rows arriving, columns widening, or
+* the host resizing the table each change the answer without a scroll event. A 1px tolerance
+* absorbs fractional layout rounding, which would otherwise flicker the stop on and off.
+*/
+function useViewportOverflow(viewport) {
+	const [overflowing, setOverflowing] = (0, react.useState)(false);
+	(0, react.useLayoutEffect)(() => {
+		if (!viewport) return;
+		const measure = () => {
+			const next = viewport.scrollHeight - viewport.clientHeight > 1 || viewport.scrollWidth - viewport.clientWidth > 1;
+			setOverflowing(next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(viewport);
+		if (viewport.firstElementChild) observer.observe(viewport.firstElementChild);
+		return () => observer.disconnect();
+	}, [viewport]);
+	return overflowing;
+}
+//#endregion
 //#region src/data-table.tsx
 /**
 * The root component (docs/api.md): a generic Mantine factory with full Styles API,
@@ -6401,7 +6522,7 @@ const STYLE_SELECTORS = Object.keys(classes);
 */
 const NO_ARIA_ROWS = [];
 const EMPTY_STATE_STYLES = { title: {
-	color: "var(--mantine-color-dimmed)",
+	color: "var(--ledger-color-dimmed)",
 	fontWeight: 500
 } };
 const defaultProps = {
@@ -6411,8 +6532,7 @@ const defaultProps = {
 	withColumnBorders: false,
 	withRowBorders: true,
 	withBottomBorder: false,
-	verticalSpacing: "xs",
-	horizontalSpacing: "xs",
+	size: "sm",
 	tabularNums: false,
 	virtualizedRows: false,
 	virtualizedColumns: false,
@@ -6426,12 +6546,13 @@ const defaultProps = {
 function leafCol(column) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { style: { width: `var(${columnWidthVar(column.id)})` } }, column.id);
 }
-const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { stripedColor, highlightOnHoverColor, borderColor, radius }) => {
+const varsResolver = (0, _mantine_core.createVarsResolver)((theme, { stripedColor, highlightOnHoverColor, borderColor, radius, size }) => {
 	return { root: {
 		"--ledger-striped-color": stripedColor ? (0, _mantine_core.getThemeColor)(stripedColor, theme) : void 0,
 		"--ledger-hover-color": highlightOnHoverColor ? (0, _mantine_core.getThemeColor)(highlightOnHoverColor, theme) : void 0,
 		"--ledger-border-color": borderColor ? (0, _mantine_core.getThemeColor)(borderColor, theme) : void 0,
-		"--ledger-radius": radius === void 0 ? void 0 : (0, _mantine_core.getRadius)(radius)
+		"--ledger-radius": radius === void 0 ? void 0 : (0, _mantine_core.getRadius)(radius),
+		"--ledger-font-size": (0, _mantine_core.getFontSize)(size)
 	} };
 });
 const OPTION_KEY_SET = /* @__PURE__ */ new Set([
@@ -6552,7 +6673,7 @@ function DataTableFromOptions({ props }) {
 	});
 }
 function DataTableCore({ presentation, stylesProps, table }) {
-	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, withBottomBorder, borderColor: _borderColor, radius: _radius, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
+	const { striped, stripedColor: _stripedColor, highlightOnHover, highlightOnHoverColor: _highlightOnHoverColor, withTableBorder, withColumnBorders, withRowBorders, withBottomBorder, borderColor: _borderColor, radius: _radius, size: sizeProp, verticalSpacing, horizontalSpacing, tabularNums, tableMinWidth, virtualizedRows, virtualizedColumns, onEndReached, endReachedOffset, loadingMore, loadMoreError, loading, emptyState, error, onRetry, withColumnHeaders, withPaginationBar, pageSizeOptions, onRowClick, onRowActivate, onRowDoubleClick, onRowContextMenu, rowProps, headerRowProps, footerRowProps, viewportProps, labels: labelsProp, icons: iconsProp, handleRef, ref: rootRef, classNames, styles, unstyled, vars, className, style, attributes, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...others } = presentation;
 	const getStyles = (0, _mantine_core.useStyles)({
 		name: "DataTable",
 		classes,
@@ -6593,6 +6714,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		viewportRef.current = element;
 		setViewport(element);
 	}, []);
+	const viewportOverflows = useViewportOverflow(viewport);
 	const startLeafColumns = table.getStartVisibleLeafColumns();
 	const endLeafColumns = table.getEndVisibleLeafColumns();
 	const displayColumns = [
@@ -6605,9 +6727,11 @@ function DataTableCore({ presentation, stylesProps, table }) {
 	const displayOrderSignature = JSON.stringify(displayColumns.map((column) => column.id));
 	const ledgerColumns = table.options.meta?.ledger?.columns;
 	const visibleLeafColumns = (0, react.useMemo)(() => displayColumns, [displayOrderSignature, ledgerColumns]);
-	const columnWidths = useColumnWidths(table, visibleLeafColumns, viewport, tableMinWidth);
+	const size = sizeProp ?? "sm";
+	const scale = SIZES[size];
+	const columnWidths = useColumnWidths(table, visibleLeafColumns, viewport, tableMinWidth, scale.injectedWidth);
 	const virtualization = virtualizedRows ? {
-		estimateHeight: typeof virtualizedRows === "object" && virtualizedRows.estimateHeight !== void 0 ? virtualizedRows.estimateHeight : 44,
+		estimateHeight: typeof virtualizedRows === "object" && virtualizedRows.estimateHeight !== void 0 ? virtualizedRows.estimateHeight : scale.rowHeight,
 		overscan: typeof virtualizedRows === "object" && virtualizedRows.overscan !== void 0 ? virtualizedRows.overscan : 8
 	} : null;
 	const virtualEnabled = virtualization !== null;
@@ -6806,7 +6930,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		rowPinningActive,
 		withDetailPanels
 	]);
-	const bodyAriaRowCount = loading && logicalDisplayRowCount === 0 ? skeletonRowCount : logicalDisplayRowCount + (loadMoreError || loadingMore ? 1 : 0);
+	const bodyAriaRowCount = loading && logicalDisplayRowCount === 0 ? skeletonRowCount : logicalDisplayRowCount + (loadMoreError || loadingMore ? 1 : 0) + (isEmpty || errorActive ? 1 : 0);
 	const footerRowCount = visibleFooterGroups(table).length;
 	const ariaRowCount = headerRowCount + bodyAriaRowCount + footerRowCount;
 	const footerAriaRowIndexStart = headerRowCount + bodyAriaRowCount + 1;
@@ -7037,11 +7161,11 @@ function DataTableCore({ presentation, stylesProps, table }) {
 	]);
 	const stripedMode = striped === true ? "odd" : striped || void 0;
 	const sharedTableProps = {
-		horizontalSpacing,
+		horizontalSpacing: horizontalSpacing ?? scale.horizontalSpacing,
 		layout: "fixed",
 		role: "presentation",
 		tabularNums,
-		verticalSpacing
+		verticalSpacing: verticalSpacing ?? scale.verticalSpacing
 	};
 	const tableStyleProps = () => getStyles("table", { style: {
 		width: columnWidths.total > 0 ? columnWidths.total : void 0,
@@ -7077,6 +7201,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 			getStyles: stylesRevision,
 			labels,
 			icons,
+			size,
 			filterMode,
 			virtualizedRows: virtualEnabled,
 			withColumnHeaders: columnHeadersVisible,
@@ -7100,6 +7225,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 		stylesRevision,
 		labels,
 		icons,
+		size,
 		filterMode,
 		virtualEnabled,
 		columnHeadersVisible,
@@ -7123,6 +7249,7 @@ function DataTableCore({ presentation, stylesProps, table }) {
 				"data-loading": loading || void 0,
 				"data-scrolled-end": scrollEdges.end || void 0,
 				"data-scrolled-start": scrollEdges.start || void 0,
+				"data-size": size,
 				"data-striped": stripedMode,
 				"data-virtualized-columns": columnWindow !== null || void 0,
 				"data-virtualized-rows": virtualEnabled || void 0,
@@ -7177,11 +7304,10 @@ function DataTableCore({ presentation, stylesProps, table }) {
 								},
 								viewportProps: mergeElementProps(viewportProps, {
 									style: { overscrollBehavior: "none" },
+									role: "rowgroup",
 									"aria-describedby": viewportDescribedBy,
-									...activeRowEnabled && {
-										tabIndex: 0,
-										onKeyDown: handleActiveRowKeyDown
-									}
+									tabIndex: activeRowEnabled || viewportOverflows ? 0 : void 0,
+									...activeRowEnabled && { onKeyDown: handleActiveRowKeyDown }
 								}),
 								onScrollPositionChange: handleScrollPositionChange,
 								children: [
@@ -7204,43 +7330,59 @@ function DataTableCore({ presentation, stylesProps, table }) {
 										})]
 									}),
 									isEmpty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										...getStyles("empty"),
-										"data-variant": filtersActive ? "no-results" : "no-data",
-										role: "status",
-										children: emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
-											withIndicatorBackground: true,
-											size: "sm",
-											styles: EMPTY_STATE_STYLES,
-											title: filtersActive ? labels.noResults : labels.empty,
-											icon: filtersActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.noResults, {
-												size: 40,
-												strokeWidth: 1.5
-											}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.empty, {
-												size: 40,
-												strokeWidth: 1.5
+										"aria-rowindex": virtualEnabled ? headerRowCount + bodyAriaRowCount : void 0,
+										role: "row",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											...getStyles("empty"),
+											"aria-colspan": visibleLeafColumns.length,
+											"data-variant": filtersActive ? "no-results" : "no-data",
+											role: "cell",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												role: "status",
+												children: emptyState ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
+													withIndicatorBackground: true,
+													size: "sm",
+													styles: EMPTY_STATE_STYLES,
+													title: filtersActive ? labels.noResults : labels.empty,
+													icon: filtersActive ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.noResults, {
+														size: 40,
+														strokeWidth: 1.5
+													}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.empty, {
+														size: 40,
+														strokeWidth: 1.5
+													})
+												})
 											})
 										})
 									}),
 									errorActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										...getStyles("empty"),
-										"data-over-rows": rowsLength > 0 || void 0,
-										"data-variant": "error",
-										role: "alert",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
-											withIndicatorBackground: true,
-											icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.error, {
-												size: 40,
-												strokeWidth: 1.5
-											}),
-											size: "sm",
-											styles: EMPTY_STATE_STYLES,
-											title: error === true ? labels.error : error,
-											children: onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Button, {
-												leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.retry, { size: 14 }),
-												size: "xs",
-												variant: "light",
-												onClick: onRetry,
-												children: labels.retry
+										"aria-rowindex": virtualEnabled ? headerRowCount + bodyAriaRowCount : void 0,
+										role: "row",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											...getStyles("empty"),
+											"aria-colspan": visibleLeafColumns.length,
+											"data-over-rows": rowsLength > 0 || void 0,
+											"data-variant": "error",
+											role: "cell",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												role: "alert",
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.EmptyState, {
+													withIndicatorBackground: true,
+													icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.error, {
+														size: 40,
+														strokeWidth: 1.5
+													}),
+													size: "sm",
+													styles: EMPTY_STATE_STYLES,
+													title: error === true ? labels.error : error,
+													children: onRetry && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Button, {
+														leftSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icons.retry, { size: 14 }),
+														size: "xs",
+														variant: "light",
+														onClick: onRetry,
+														children: labels.retry
+													})
+												})
 											})
 										})
 									})
@@ -7287,14 +7429,15 @@ DataTable.SelectionBar = DataTableSelectionBar;
 * The shipped editor renderers — conveniences, never the mechanism. Each is an ordinary
 * renderer over the public editing contexts (docs/editing.md#editors), which is the proof the
 * contexts suffice: anything these do, an application's own renderer can do the same way.
-* All are default-variant Mantine inputs — the border marks the cell as an open editor.
+* All are default-variant Mantine inputs at the context's `size` — the border marks the cell as an
+* open editor, and the size keeps it inside the row.
 */
-const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.TextInput, {
+const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.TextInput, {
 	"aria-label": label,
 	autoFocus,
 	disabled: pending,
 	error,
-	size: "xs",
+	size,
 	value: value === null || value === void 0 ? "" : String(value),
 	onChange: (event) => setValue(event.currentTarget.value)
 });
@@ -7304,13 +7447,13 @@ const renderTextEditor = ({ value, setValue, error, pending, autoFocus, label })
 function textEditor() {
 	return renderTextEditor;
 }
-const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.NumberInput, {
+const renderNumberEditor = ({ value, setValue, error, pending, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.NumberInput, {
 	hideControls: true,
 	"aria-label": label,
 	autoFocus,
 	disabled: pending,
 	error,
-	size: "xs",
+	size,
 	value: typeof value === "number" || typeof value === "string" ? value : "",
 	onChange: (next) => setValue(next === "" ? null : next)
 });
@@ -7326,7 +7469,7 @@ function numberEditor() {
 * draft-bound field among the row's others, and the row's own commit decides.
 */
 function selectEditor(options) {
-	return ({ value, setValue, commit, error, pending, mode, autoFocus, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Select, {
+	return ({ value, setValue, commit, error, pending, mode, autoFocus, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Select, {
 		"aria-label": label,
 		autoFocus,
 		comboboxProps: { withinPortal: true },
@@ -7334,7 +7477,7 @@ function selectEditor(options) {
 		defaultDropdownOpened: mode === "cell",
 		disabled: pending,
 		error,
-		size: "xs",
+		size,
 		value: value === null || value === void 0 ? null : String(value),
 		onChange: (next) => {
 			setValue(next);
@@ -7342,12 +7485,12 @@ function selectEditor(options) {
 		}
 	});
 }
-const renderCheckboxEditor = ({ value, commit, pending, error, label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Checkbox, {
+const renderCheckboxEditor = ({ value, commit, pending, error, label, size }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.Checkbox, {
 	"aria-label": label,
 	checked: Boolean(value),
 	disabled: pending,
 	error: Boolean(error),
-	size: "xs",
+	size,
 	onChange: (event) => void commit(event.currentTarget.checked)
 });
 /**