@jayalfredprufrock/mobx-toolbox 0.7.0 → 0.8.0

package/dist/table.mjs

@@ -0,0 +1,1318 @@
+import { t as useResize } from "./useResize-BhJdvtef.mjs";
+import { observer } from "mobx-react-lite";
+import { Fragment, createContext, memo, useContext, useEffect, useRef, useState } from "react";
+import { action, comparer, computed, makeObservable, observable, reaction } from "mobx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/table/util.ts
+const titleCase = (str) => {
+	return str.trim().replace(/([a-z])([A-Z]+)/g, "$1 $2").split(/[-_\s]+/).filter((s) => s.trim()).map((s) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase()).join(" ");
+};
+/**
+* Resolve a column key against a row: a direct property hit wins (so a literal "a.b" property
+* still works), otherwise the key is walked as a dot-path ("owner.name").
+*/
+const getPath = (obj, path) => {
+	if (obj == null) return void 0;
+	const direct = obj[path];
+	if (direct !== void 0 || !path.includes(".")) return direct;
+	let current = obj;
+	for (const segment of path.split(".")) {
+		if (current == null) return void 0;
+		current = current[segment];
+	}
+	return current;
+};
+const asString = (value) => String(value);
+/**
+* Default sort comparator over extracted cell values — nullish first, numbers numerically, Dates
+* chronologically, everything else by locale string.
+*/
+const compareValues = (a, b) => {
+	if (a == null && b == null) return 0;
+	if (a == null) return -1;
+	if (b == null) return 1;
+	if (typeof a === "number" && typeof b === "number") return a - b;
+	if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+	return asString(a).localeCompare(asString(b));
+};
+
+//#endregion
+//#region src/table/column.model.ts
+const DEFAULT_MIN_WIDTH = 120;
+/** Key assigned to a selection column when its def doesn't supply one. */
+const SELECTION_COLUMN_KEY = "__selection__";
+var ColumnModel = class ColumnModel {
+	table;
+	config;
+	pinned = false;
+	hidden = false;
+	manualWidth = void 0;
+	/** Resolved pixel width — distributed across the viewport by the table (see `columnWidths`). */
+	get width() {
+		return this.table.columnWidths.get(this) ?? 0;
+	}
+	/** Fixed pixel width when the column isn't flexible (manual override or an explicit number). */
+	get fixedWidth() {
+		if (this.manualWidth !== void 0) return this.manualWidth;
+		return typeof this.config.width === "number" ? this.config.width : void 0;
+	}
+	/** Flex weight (the `N` in `"Nfr"`); `0` when fixed. An unspecified width means `1fr`. */
+	get grow() {
+		if (this.fixedWidth !== void 0) return 0;
+		if (typeof this.config.width === "string") {
+			const n = Number.parseFloat(this.config.width);
+			return Number.isFinite(n) && n > 0 ? n : 1;
+		}
+		return 1;
+	}
+	get minWidth() {
+		return this.config.minWidth ?? DEFAULT_MIN_WIDTH;
+	}
+	get maxWidth() {
+		return this.config.maxWidth ?? Number.POSITIVE_INFINITY;
+	}
+	get resizable() {
+		return this.config.resizable !== false;
+	}
+	/** Whether header UIs should offer sorting on this column (selection columns never do). */
+	get sortable() {
+		return this.config.sortable !== false && !this.selection;
+	}
+	/** Whether this is the built-in row-selection column. */
+	get selection() {
+		return this.config.selection === true;
+	}
+	/**
+	* True for the innermost pinned column on its side (the one bordering the scrollable area).
+	* Consumers hang the pinned boundary shadow off `[data-pinned-edge]` so a group of pinned
+	* columns shows a single shadow at the seam.
+	*/
+	get isPinnedEdge() {
+		const siblings = this.pinnedSiblings;
+		return siblings ? siblings[siblings.length - 1] === this : false;
+	}
+	/**
+	* True for the outermost pinned column on its side (the one at the viewport edge). Used by the
+	* header to round its outer corners so a pinned column doesn't paint a square over the rounded
+	* header background. Both rendered pinned arrays are ordered outer-edge-first.
+	*/
+	get isPinnedOuterEdge() {
+		const siblings = this.pinnedSiblings;
+		return siblings ? siblings[0] === this : false;
+	}
+	get offset() {
+		const cols = {
+			left: this.table.leftPinnedRenderedColumns,
+			right: this.table.rightPinnedRenderedColumns,
+			unpinned: this.table.unpinnedColumns
+		}[this.pinned || "unpinned"];
+		return cols.slice(0, cols.indexOf(this)).reduce((sum, c) => sum + c.width, 0);
+	}
+	get title() {
+		return this.config.title ?? titleCase(this.config.key);
+	}
+	/** 1-based visual column position (pinned blocks at the edges) — the aria-colindex value. */
+	get ariaColIndex() {
+		return this.table.visualColumns.indexOf(this) + 1;
+	}
+	get key() {
+		return this.config.key;
+	}
+	/** Active sort direction for this column, or undefined when it doesn't participate in the sort. */
+	get sortDirection() {
+		return this.table.sorts.find((s) => s.key === this.key)?.direction;
+	}
+	/** 1-based position in the sort priority (the "1"/"2" badge in multi-sort UIs); undefined when unsorted. */
+	get sortIndex() {
+		const index = this.table.sorts.findIndex((s) => s.key === this.key);
+		return index >= 0 ? index + 1 : void 0;
+	}
+	get pinnedSiblings() {
+		if (this.pinned === "left") return this.table.leftPinnedRenderedColumns;
+		if (this.pinned === "right") return this.table.rightPinnedRenderedColumns;
+	}
+	constructor(table, config) {
+		this.table = table;
+		this.config = config;
+		makeObservable(this, {
+			pinned: observable,
+			hidden: observable,
+			manualWidth: observable,
+			width: computed,
+			fixedWidth: computed,
+			grow: computed,
+			isPinnedEdge: computed,
+			isPinnedOuterEdge: computed,
+			offset: computed,
+			title: computed,
+			ariaColIndex: computed,
+			sortDirection: computed,
+			sortIndex: computed,
+			setPinned: action,
+			setManualWidth: action,
+			setHidden: action
+		});
+		this.setPinned(config.pinned);
+	}
+	setPinned(pinned) {
+		this.pinned = pinned;
+	}
+	setManualWidth(width) {
+		this.manualWidth = width;
+	}
+	setHidden(hidden) {
+		this.hidden = hidden;
+	}
+	/** Sort by this column — replaces the sort list unless `preserve: true` (see TableModel.setSort). */
+	sortBy(direction, opts) {
+		this.table.setSort(this.key, direction, opts);
+	}
+	/** Remove this column from the sort; other columns' sorts are untouched. */
+	clearSort() {
+		this.table.clearSort(this.key);
+	}
+	/** Raw cell value for a row — what sorting compares and the default render displays. */
+	getValue(row) {
+		return this.config.value(row);
+	}
+	/** Ascending comparison of two rows by this column's extracted values (`compare` def or the default). */
+	compareRows(a, b) {
+		return (this.config.compare ?? compareValues)(this.getValue(a), this.getValue(b));
+	}
+	static fromDef(table, def) {
+		const { render, ...config } = typeof def === "string" ? { key: def } : def;
+		const key = config.key ?? (config.selection ? "__selection__" : "");
+		const value = config.value ?? (config.selection ? () => null : (row) => getPath(row, key));
+		return new ColumnModel(table, {
+			...config,
+			key,
+			value,
+			render: render ?? value
+		});
+	}
+};
+
+//#endregion
+//#region src/table/components/cell-slot.tsx
+/**
+* Per-cell reactive boundary. `Table.Header`/`Table.Row` iterate the rendered columns and hand each
+* off to a `CellSlot` rather than calling the consumer's render function inline — so the render runs
+* inside *this* component's MobX reaction. The upshot: a cell re-renders only when the observables
+* *it* reads change (e.g. one field of one row), never because a sibling cell or the row did.
+*
+* It renders a transparent fragment, so whatever the consumer returns (a `<Table.Cell>`) lands
+* directly in the parent grid with no wrapper element.
+*/
+const CellSlot = observer(({ column, render }) => {
+	return /* @__PURE__ */ jsx(Fragment$1, { children: render(column) });
+});
+
+//#endregion
+//#region src/table/components/cell-style.ts
+/**
+* Structural style shared by header and body cells: pinned cells stick to their edge at the
+* column's offset and must be opaque (they overlap scrolling cells). The opaque fill is a CSS var
+* so the consumer owns the color — set `--table-pinned-bg` once (and override it inside the header
+* to match a header background). `Canvas` is a theme-aware system default for zero-config use.
+*
+* These are the *only* styles the library forces on a cell; everything cosmetic (padding, font,
+* borders, hover) is left to the consumer's `className`/`style`.
+*/
+const pinnedCellStyle = (column) => {
+	if (!column.pinned) return { position: "relative" };
+	return {
+		position: "sticky",
+		[column.pinned]: column.offset,
+		background: "var(--table-pinned-bg, Canvas)",
+		zIndex: 1
+	};
+};
+
+//#endregion
+//#region src/table/components/checkbox.tsx
+/**
+* Zero-config fallback used by `<Table.SelectionCell>` / `<Table.SelectAll>` when the consumer
+* neither registers a `checkbox` on `<Table.Root>` nor passes a render-prop. `indeterminate` is a
+* DOM-only property, so it's applied via ref rather than an attribute.
+*/
+const NativeCheckbox = ({ checked, indeterminate = false, onChange, ...rest }) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (ref.current) ref.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "checkbox",
+		checked,
+		onChange,
+		...rest
+	});
+};
+
+//#endregion
+//#region src/table/components/column-resizer.tsx
+/**
+* Drag handle on a header cell's edge that resizes its column. Dragging sets the column's
+* `manualWidth` (treated as a fixed width in the distribution, so the remaining flex columns reflow
+* to fill); double-click resets it to auto. Right-pinned columns are anchored to the right, so their
+* handle sits on the left edge and the drag delta is inverted.
+*
+* Move/up listeners live on the window for the duration of the drag, so the resize tracks and ends
+* wherever the pointer is released — not only over the handle.
+*/
+const TableResizer = observer(({ column }) => {
+	const [resizing, setResizing] = useState(false);
+	const drag = useRef(null);
+	const raf = useRef(void 0);
+	const teardown = useRef(void 0);
+	const onLeftEdge = column.pinned === "right";
+	useEffect(() => () => teardown.current?.(), []);
+	const beginResize = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		drag.current = {
+			startX: e.clientX,
+			startWidth: column.width
+		};
+		setResizing(true);
+		let latestX = e.clientX;
+		const applyFrame = () => {
+			raf.current = void 0;
+			if (!drag.current) return;
+			const delta = latestX - drag.current.startX;
+			const next = drag.current.startWidth + (onLeftEdge ? -delta : delta);
+			column.setManualWidth(Math.max(column.minWidth, next));
+		};
+		const onMove = (ev) => {
+			latestX = ev.clientX;
+			if (raf.current === void 0) raf.current = requestAnimationFrame(applyFrame);
+		};
+		const stop = () => {
+			drag.current = null;
+			setResizing(false);
+			teardown.current?.();
+		};
+		teardown.current = () => {
+			window.removeEventListener("pointermove", onMove);
+			window.removeEventListener("pointerup", stop);
+			window.removeEventListener("pointercancel", stop);
+			if (raf.current !== void 0) {
+				cancelAnimationFrame(raf.current);
+				raf.current = void 0;
+			}
+			document.body.style.userSelect = "";
+			document.body.style.cursor = "";
+			teardown.current = void 0;
+		};
+		window.addEventListener("pointermove", onMove);
+		window.addEventListener("pointerup", stop);
+		window.addEventListener("pointercancel", stop);
+		document.body.style.userSelect = "none";
+		document.body.style.cursor = "col-resize";
+	};
+	const resetWidth = (e) => {
+		e.stopPropagation();
+		column.setManualWidth(void 0);
+	};
+	const style = {
+		position: "absolute",
+		top: 0,
+		...onLeftEdge ? { left: 0 } : { right: 0 },
+		width: "9px",
+		height: "100%",
+		cursor: "col-resize",
+		touchAction: "none",
+		userSelect: "none",
+		zIndex: 1
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		className: "column-resizer",
+		"data-resizing": resizing || void 0,
+		onPointerDown: beginResize,
+		onDoubleClick: resetWidth,
+		style
+	});
+});
+
+//#endregion
+//#region src/table/table.context.ts
+const tableContext = createContext(void 0);
+const useTableContext = () => {
+	const context = useContext(tableContext);
+	if (!context) throw new Error("Table context not available. Are you within the <Table.Root /> component?");
+	return context;
+};
+const TableProvider = tableContext.Provider;
+const defaultSlots = { checkbox: NativeCheckbox };
+const slotsContext = createContext(defaultSlots);
+const TableSlotsProvider = slotsContext.Provider;
+const useTableSlots = () => useContext(slotsContext);
+
+//#endregion
+//#region src/table/components/table-body.tsx
+/**
+* The virtualized body. Owns the scroll-sized spacer and the `translate3d` window offset, then maps
+* the rendered slice of rows through the `children` render-prop. Rows are keyed by their row id
+* (see `rowIds`): by default the original index in the source array — stable under sort/filter/
+* scroll and across `appendRows` — or the consumer's `getRowId`, which stays stable even when a
+* refetch replaces the row objects.
+*/
+const TableBody = observer(({ className, style, children }) => {
+	const table = useTableContext();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width: `${table.virtualWidth}px`,
+			height: `${table.virtualHeight}px`
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				transform: `translate3d(0px, ${table.virtualOffsetY}px, 0px)`
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				role: "rowgroup",
+				className,
+				style: {
+					display: "grid",
+					gridTemplateColumns: table.gridTemplateColumns,
+					...style
+				},
+				children: table.renderedRows.map((row) => /* @__PURE__ */ jsx(Fragment, { children: children(row) }, table.rowIds.get(row)))
+			})
+		})
+	});
+});
+/**
+* A single body row. Mirrors the header's layout ownership (grid subgrid, pinned/spacer ordering)
+* and defers each cell to `children` via a per-cell `CellSlot`. Exposes `data-selected` so the
+* consumer can highlight selected rows in CSS. Reading selection here (not row field data) keeps
+* single-cell content updates from re-rendering the whole row — only a selection toggle does.
+*/
+const TableRowInner = observer(({ row, className, style, children, ...rest }) => {
+	const table = useTableContext();
+	const displayIndex = table.displayRowIndexMap.get(row);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		role: "row",
+		"aria-rowindex": displayIndex !== void 0 ? displayIndex + 2 : void 0,
+		"aria-selected": table.selectable ? table.isRowSelected(row) : void 0,
+		"data-selected": table.isRowSelected(row) || void 0,
+		"data-expanded": table.isRowExpanded(row) || void 0,
+		className,
+		style: {
+			height: `${table.rowHeight}px`,
+			display: "grid",
+			gridColumn: "1 / -1",
+			gridTemplateColumns: "subgrid",
+			alignItems: "stretch",
+			textAlign: "left",
+			...style
+		},
+		children: [
+			table.leftPinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+				column: col,
+				render: children
+			}, col.key)),
+			/* @__PURE__ */ jsx("div", { role: "presentation" }),
+			table.unpinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+				column: col,
+				render: children
+			}, col.key)),
+			table.rightPinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+				column: col,
+				render: children
+			}, col.key))
+		]
+	});
+});
+/**
+* Memoized on identity so scrolling (and filtering) only renders rows that actually entered/changed.
+* `children` (the per-column render-prop) gets a fresh closure on every `TableBody` render, so it is
+* *deliberately excluded* from the comparison — for a row still in the window that closure is
+* equivalent (it closes over the same `row` and reads row/column state live). Every other prop —
+* including pass-through DOM props like `onClick` — is compared shallowly. Layout changes still
+* flow through because the inner `observer` re-renders on the column/width observables it reads, and
+* per-cell data changes flow through each `CellSlot`'s own observer — neither is gated by this memo.
+* (Pass stable `className`/`style`/handlers, not fresh inline values, or the row re-renders every frame.)
+*/
+const TableRow = memo(TableRowInner, (prev, next) => {
+	const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+	for (const key of keys) {
+		if (key === "children") continue;
+		if (prev[key] !== next[key]) return false;
+	}
+	return true;
+});
+/**
+* A single body cell. Owns pinning/offset/`data-pinned*`; cosmetics are the consumer's via
+* `className`/`style`, other DOM props pass through.
+*/
+const TableCell = observer(({ column, children, className, style, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "cell",
+		"aria-colindex": column.ariaColIndex,
+		"data-pinned": column.pinned || void 0,
+		"data-pinned-corner": column.pinned && column.isPinnedOuterEdge && column.pinned || void 0,
+		"data-pinned-edge": column.isPinnedEdge || void 0,
+		className,
+		style: {
+			...pinnedCellStyle(column),
+			...style
+		},
+		children
+	});
+});
+
+//#endregion
+//#region src/table/components/table-header.tsx
+/**
+* The sticky header row group. Owns layout — the grid track template, the left-pinned / spacer /
+* unpinned / right-pinned ordering — and defers each cell's content to the `children` render-prop
+* via a per-cell `CellSlot`.
+*/
+const TableHeader = observer(({ className, style, children }) => {
+	const table = useTableContext();
+	return /* @__PURE__ */ jsx("div", {
+		role: "rowgroup",
+		className: ["table-header", className].filter(Boolean).join(" "),
+		style: {
+			position: "sticky",
+			top: 0,
+			zIndex: 20,
+			width: `${table.virtualWidth}px`,
+			display: "grid",
+			gridTemplateColumns: table.gridTemplateColumns,
+			...style
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			role: "row",
+			"aria-rowindex": 1,
+			style: {
+				gridColumn: "1 / -1",
+				gridRow: "1",
+				height: `${table.rowHeight}px`,
+				display: "grid",
+				gridTemplateColumns: "subgrid",
+				alignItems: "stretch",
+				textAlign: "left"
+			},
+			children: [
+				table.leftPinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+					column: col,
+					render: children
+				}, col.key)),
+				/* @__PURE__ */ jsx("div", { role: "presentation" }),
+				table.unpinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+					column: col,
+					render: children
+				}, col.key)),
+				table.rightPinnedRenderedColumns.map((col) => /* @__PURE__ */ jsx(CellSlot, {
+					column: col,
+					render: children
+				}, col.key))
+			]
+		})
+	});
+});
+/**
+* A single header cell. Owns the structural bits (sticky pinning, offset, `data-pinned*`) and stays
+* cosmetically open — the consumer's `className`/`style` add padding, font, borders, etc.; other
+* DOM props pass through.
+*/
+const TableColumnHeader = observer(({ column, children, className, style, ...rest }) => {
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		role: "columnheader",
+		"aria-colindex": column.ariaColIndex,
+		"aria-sort": column.sortDirection ? column.sortDirection === "asc" ? "ascending" : "descending" : void 0,
+		"data-pinned": column.pinned || void 0,
+		"data-pinned-edge": column.isPinnedEdge || void 0,
+		"data-pinned-corner": column.pinned && column.isPinnedOuterEdge && column.pinned || void 0,
+		className,
+		style: {
+			...pinnedCellStyle(column),
+			scrollSnapAlign: column.pinned ? void 0 : "start",
+			...style
+		},
+		children
+	});
+});
+
+//#endregion
+//#region src/table/components/selection.tsx
+const centerStyle = {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+};
+/** A body cell wired to per-row selection. Renders the registered checkbox unless given a render-prop. */
+const SelectionCell = observer(({ column, row, children }) => {
+	const table = useTableContext();
+	const { checkbox: Checkbox } = useTableSlots();
+	const state = {
+		checked: table.isRowSelected(row),
+		onChange: () => table.toggleRow(row)
+	};
+	return /* @__PURE__ */ jsx(TableCell, {
+		column,
+		style: centerStyle,
+		children: children ? children(state) : /* @__PURE__ */ jsx(Checkbox, {
+			...state,
+			"aria-label": "Select row"
+		})
+	});
+});
+/** The select-all control (checked / indeterminate / none). Place inside a header cell, or use `<Table.SelectionHeaderCell>`. */
+const SelectAll = observer(({ children }) => {
+	const table = useTableContext();
+	const { checkbox: Checkbox } = useTableSlots();
+	const state = {
+		checked: table.allRowsSelected,
+		indeterminate: table.someRowsSelected,
+		onChange: () => table.toggleAllRows()
+	};
+	return children ? /* @__PURE__ */ jsx(Fragment$1, { children: children(state) }) : /* @__PURE__ */ jsx(Checkbox, {
+		...state,
+		"aria-label": "Select all rows"
+	});
+});
+/** A header cell holding the centered select-all control — the header twin of `<Table.SelectionCell>`. */
+const SelectionHeaderCell = observer(({ column, children }) => {
+	return /* @__PURE__ */ jsx(TableColumnHeader, {
+		column,
+		style: centerStyle,
+		children: /* @__PURE__ */ jsx(SelectAll, { children })
+	});
+});
+
+//#endregion
+//#region src/table/components/table-empty.tsx
+/**
+* The empty-state surface. Render it after `<Table.Body>`, gated by the consumer — e.g.
+* `table.displayRows.length === 0 && <Table.Empty>…</Table.Empty>` — the library never decides
+* what "empty" means or what to say about it (no rows vs. filtered-out are different stories,
+* and only the consumer knows the words and recovery actions).
+*
+* Owns placement only: fills the viewport below the sticky header (subtracting the theme-owned
+* header vars, falling back to the row height) and pins horizontally like the header pill, so
+* children center in the visible area at any horizontal scroll offset. Cosmetics are the
+* consumer's; `data-empty` is the styling hook.
+*/
+const TableEmpty = observer(({ children, className, style, ...rest }) => {
+	const table = useTableContext();
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		"data-empty": "",
+		className,
+		style: {
+			position: "sticky",
+			left: 0,
+			width: "var(--table-viewport-width)",
+			height: `calc(${table.height}px - var(--table-header-height, ${table.rowHeight}px) - var(--table-header-gap, 0px))`,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			...style
+		},
+		children
+	});
+});
+
+//#endregion
+//#region src/table/components/table-expansion.tsx
+/**
+* The detail panel below an expanded row. Render it as a sibling immediately after the row's
+* `<Table.Row>` inside `<Table.Body>`'s render-prop, gated on `table.isRowExpanded(row)`.
+*
+* Owns the geometry contract: the block is exactly `expansionHeight` tall (taller content scrolls
+* internally), and the cell pins to the viewport (`sticky` + explicit width — the same trick as
+* the header background) so horizontal scrolling moves the columns underneath the panel, not the
+* panel itself. Cosmetics are the consumer's via `className`/`style`.
+*/
+const TableExpansionInner = observer(({ className, style, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "row",
+		"data-expansion": "",
+		style: {
+			gridColumn: "1 / -1",
+			height: `${useTableContext().expansionHeight}px`,
+			minWidth: 0
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "cell",
+			"data-expansion": "",
+			className,
+			style: {
+				position: "sticky",
+				left: 0,
+				width: "var(--table-viewport-width)",
+				height: "100%",
+				overflowY: "auto",
+				...style
+			},
+			children
+		})
+	});
+});
+/**
+* Memoized on row identity like `TableRow`, with `children` deliberately excluded: the panel's
+* element tree is rebuilt by the body render-prop every window shift, but for the same row it is
+* equivalent. Panel content must derive from `row` (or be an observer reading live state) — not
+* from other values captured in the render-prop closure.
+*/
+const TableExpansion = memo(TableExpansionInner, (prev, next) => prev.row === next.row && prev.className === next.className && prev.style === next.style);
+
+//#endregion
+//#region src/table/use-scroll.ts
+/**
+* Reports a scroll container's offsets on every scroll event.
+*
+* `onScroll` is read through a ref so an inline arrow doesn't re-subscribe on every render — the
+* table's root re-renders as the window shifts, and re-attaching the listener each time would be
+* pure waste.
+*/
+const useScroll = (ref, onScroll) => {
+	const onScrollRef = useRef(onScroll);
+	onScrollRef.current = onScroll;
+	useEffect(() => {
+		const scrollContainer = ref.current;
+		if (!scrollContainer) return;
+		const handleScroll = () => onScrollRef.current(scrollContainer.scrollLeft, scrollContainer.scrollTop);
+		scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+		return () => scrollContainer.removeEventListener("scroll", handleScroll);
+	}, [ref]);
+};
+
+//#endregion
+//#region src/table/components/table-root.tsx
+/**
+* The table skeleton: a non-scrolling viewport wrapper (owns measured size + the shared
+* `--table-row-height` var) around the scroll container that everything else renders into. This is
+* the only structural piece consumers mount directly; header/body compose inside it.
+*/
+const TableRoot = observer(({ table, children, style, className, checkbox }) => {
+	const viewportRef = useRef(null);
+	const scrollContainerRef = useRef(null);
+	useScroll(scrollContainerRef, (x, y) => table.setScroll(x, y));
+	useResize(viewportRef, (_width, height) => table.setHeight(height));
+	useResize(scrollContainerRef, (width) => table.setWidth(width));
+	useEffect(() => reaction(() => table.scrollRequest, (request) => {
+		const container = scrollContainerRef.current;
+		if (!request || !container) return;
+		container.scrollTo({ top: request.y === "end" ? container.scrollHeight : request.y });
+		table.clearScrollRequest();
+	}), [table, scrollContainerRef]);
+	return /* @__PURE__ */ jsx(TableProvider, {
+		value: table,
+		children: /* @__PURE__ */ jsx(TableSlotsProvider, {
+			value: { checkbox: checkbox ?? NativeCheckbox },
+			children: /* @__PURE__ */ jsx("div", {
+				ref: viewportRef,
+				className: "table-viewport",
+				style: {
+					width: "100%",
+					height: "100%",
+					position: "relative",
+					"--table-row-height": `${table.rowHeight}px`
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					ref: scrollContainerRef,
+					role: "table",
+					"aria-rowcount": table.displayRows.length + 1,
+					"aria-colcount": table.orderedColumns.length,
+					"aria-multiselectable": table.selectable || void 0,
+					className,
+					style: {
+						position: "relative",
+						overflow: "auto",
+						containerType: "scroll-state",
+						scrollSnapType: "x proximity",
+						scrollPaddingLeft: `${table.leftPinnedRenderedColumns.reduce((sum, c) => sum + c.width, 0)}px`,
+						width: "100%",
+						maxHeight: `${table.height}px`,
+						"--table-viewport-width": `${table.width}px`,
+						...style
+					},
+					children: table.width > 0 && table.height > 0 && children
+				})
+			})
+		})
+	});
+});
+
+//#endregion
+//#region src/table/components/namespace.tsx
+/**
+* Compound namespace for the table skeleton. Consumers compose these into their own closed
+* component (styles + defaults captured once), e.g. `<Table.Root><Table.Header>…`.
+*/
+const Table = {
+	Root: TableRoot,
+	Header: TableHeader,
+	ColumnHeader: TableColumnHeader,
+	Body: TableBody,
+	Row: TableRow,
+	Cell: TableCell,
+	Empty: TableEmpty,
+	Expansion: TableExpansion,
+	Resizer: TableResizer,
+	SelectionCell,
+	SelectionHeaderCell,
+	SelectAll
+};
+
+//#endregion
+//#region src/table/table.model.ts
+var TableModel = class {
+	config;
+	rows = [];
+	columns = /* @__PURE__ */ new Map();
+	columnOrder = [];
+	filterSources = [];
+	scrollX = 0;
+	scrollY = 0;
+	height = 0;
+	width = 0;
+	sorts = [];
+	selectedIds = /* @__PURE__ */ new Set();
+	expandedIds = /* @__PURE__ */ new Set();
+	scrollRequest = void 0;
+	appliedState;
+	stateReactionDisposer;
+	get rowHeight() {
+		return this.config?.rowHeight ?? 40;
+	}
+	get rowOverscan() {
+		return this.config?.rowOverscan ?? 3;
+	}
+	get expansionHeight() {
+		return this.config?.expansionHeight ?? 320;
+	}
+	get columnOverscan() {
+		return this.config?.columnOverscan ?? 1;
+	}
+	get rowIds() {
+		const getRowId = this.config?.getRowId;
+		return new Map(this.rows.map((row, i) => [row, getRowId ? getRowId(row, i) : i]));
+	}
+	get allColumns() {
+		return this.columnOrder.flatMap((key) => {
+			const col = this.columns.get(key);
+			return col ? [col] : [];
+		});
+	}
+	get orderedColumns() {
+		return this.allColumns.filter((c) => !c.hidden);
+	}
+	/**
+	* Resolved pixel width for every column, distributed across the viewport (`width`).
+	* Fixed columns (explicit px or a manual override) claim their width; the rest are flex
+	* (`"Nfr"`, default `1fr`) and share the remaining space by weight, clamped to
+	* [minWidth, maxWidth] via a freeze-redistribute pass (a column that hits a clamp is frozen
+	* and its share is re-split among the others). Any leftover slack — every flex column capped
+	* at its max — is absorbed by the last column so the columns always fill the viewport (this
+	* also soaks up sub-pixel rounding). When the minimums don't fit, the total exceeds the
+	* viewport and the table scrolls horizontally.
+	*/
+	get columnWidths() {
+		const cols = this.orderedColumns;
+		const result = /* @__PURE__ */ new Map();
+		if (cols.length === 0) return result;
+		const flex = [];
+		let fixedTotal = 0;
+		for (const col of cols) if (col.fixedWidth !== void 0) {
+			result.set(col, col.fixedWidth);
+			fixedTotal += col.fixedWidth;
+		} else flex.push(col);
+		const free = this.width - fixedTotal;
+		const frozen = /* @__PURE__ */ new Set();
+		while (frozen.size < flex.length) {
+			const active = flex.filter((c) => !frozen.has(c));
+			const remaining = free - flex.reduce((sum, c) => sum + (frozen.has(c) ? result.get(c) ?? 0 : 0), 0);
+			const totalGrow = active.reduce((sum, c) => sum + c.grow, 0);
+			if (totalGrow <= 0) {
+				for (const c of active) result.set(c, c.minWidth);
+				break;
+			}
+			let clamped = false;
+			for (const c of active) {
+				const share = remaining * c.grow / totalGrow;
+				if (share < c.minWidth) {
+					result.set(c, c.minWidth);
+					frozen.add(c);
+					clamped = true;
+				} else if (share > c.maxWidth) {
+					result.set(c, c.maxWidth);
+					frozen.add(c);
+					clamped = true;
+				}
+			}
+			if (!clamped) {
+				for (const c of active) result.set(c, remaining * c.grow / totalGrow);
+				break;
+			}
+		}
+		const used = cols.reduce((sum, c) => sum + (result.get(c) ?? 0), 0);
+		const slack = this.width - used;
+		if (slack > 0) {
+			const sink = cols[cols.length - 1];
+			result.set(sink, (result.get(sink) ?? 0) + slack);
+		}
+		return result;
+	}
+	get virtualWidth() {
+		return this.orderedColumns.reduce((sum, col) => sum + col.width, 0);
+	}
+	get virtualHeight() {
+		return this.filteredRows.length * this.rowHeight + this.expandedDisplayIndices.length * this.expansionHeight;
+	}
+	get expandedDisplayIndices() {
+		if (!this.expandedIds.size) return [];
+		const indices = [];
+		this.displayRows.forEach((row, i) => {
+			const id = this.rowIds.get(row);
+			if (id !== void 0 && this.expandedIds.has(id)) indices.push(i);
+		});
+		return indices;
+	}
+	get unpinnedColumns() {
+		return this.orderedColumns.filter((c) => !c.pinned);
+	}
+	get firstUnpinnedRenderedIndex() {
+		const firstVisibleIndex = this.unpinnedColumns.findIndex((col) => col.offset >= this.scrollX);
+		return Math.max(0, firstVisibleIndex - this.columnOverscan);
+	}
+	get lastUnpinnedRenderedIndex() {
+		const first = this.firstUnpinnedRenderedIndex;
+		const maxOffset = this.scrollX + this.width;
+		let lastVisibleIndex = this.unpinnedColumns.length - 1;
+		for (let i = first; i < this.unpinnedColumns.length; i++) if ((this.unpinnedColumns[i]?.offset ?? 0) >= maxOffset) {
+			lastVisibleIndex = i;
+			break;
+		}
+		return Math.min(this.unpinnedColumns.length - 1, lastVisibleIndex + this.columnOverscan);
+	}
+	get unpinnedRenderedColumns() {
+		return this.unpinnedColumns.slice(this.firstUnpinnedRenderedIndex, this.lastUnpinnedRenderedIndex + 1);
+	}
+	get leftPinnedRenderedColumns() {
+		return this.orderedColumns.filter((c) => c.pinned === "left");
+	}
+	get rightPinnedRenderedColumns() {
+		return this.orderedColumns.filter((c) => c.pinned === "right").reverse();
+	}
+	get filteredRows() {
+		const predicates = this.filterSources.flatMap((s) => s.predicate ? [s.predicate] : []);
+		if (!predicates.length) return this.rows;
+		return this.rows.filter((r) => predicates.every((p) => p(r)));
+	}
+	get displayRows() {
+		const rows = this.filteredRows;
+		if (this.config?.sortMode === "manual") return rows;
+		const active = this.sorts.flatMap(({ key, direction }) => {
+			const col = this.columns.get(key);
+			return col ? [{
+				col,
+				dir: direction === "desc" ? -1 : 1
+			}] : [];
+		});
+		if (!active.length) return rows;
+		return [...rows].sort((a, b) => {
+			for (const { col, dir } of active) {
+				const result = col.compareRows(a, b) * dir;
+				if (result !== 0) return result;
+			}
+			return 0;
+		});
+	}
+	get firstRenderedIndex() {
+		return Math.max(0, this.indexAtOffset(this.scrollY) - this.rowOverscan);
+	}
+	get lastRenderedIndex() {
+		const lastVisibleIndex = this.indexAtOffset(this.scrollY + this.height);
+		return Math.min(this.displayRows.length - 1, lastVisibleIndex + this.rowOverscan);
+	}
+	get renderedRows() {
+		return this.displayRows.slice(this.firstRenderedIndex, this.lastRenderedIndex + 1);
+	}
+	get virtualOffsetX() {
+		return this.unpinnedRenderedColumns.at(0)?.offset ?? 0;
+	}
+	get virtualOffsetY() {
+		return this.blockOffset(this.firstRenderedIndex);
+	}
+	get renderedColumns() {
+		return [
+			...this.leftPinnedRenderedColumns,
+			...this.unpinnedRenderedColumns,
+			...this.rightPinnedRenderedColumns
+		];
+	}
+	get visualColumns() {
+		return [
+			...this.leftPinnedRenderedColumns,
+			...this.unpinnedColumns,
+			...this.rightPinnedRenderedColumns.slice().reverse()
+		];
+	}
+	get displayRowIndexMap() {
+		return new Map(this.displayRows.map((row, i) => [row, i]));
+	}
+	/** Whether the table has a selection column (drives aria-multiselectable / aria-selected). */
+	get selectable() {
+		return this.allColumns.some((c) => c.selection);
+	}
+	get gridTemplateColumns() {
+		const cols = [];
+		cols.push(...this.leftPinnedRenderedColumns.map((c) => `${c.width}px`));
+		cols.push(`${this.virtualOffsetX}px`);
+		cols.push(...this.unpinnedRenderedColumns.map((c) => `${c.width}px`));
+		cols.push(...this.rightPinnedRenderedColumns.map((c) => `${c.width}px`));
+		return cols.join(" ");
+	}
+	/** Whether the viewport is scrolled to (within one row of) the end of the content. */
+	get atEnd() {
+		return this.scrollY + this.height >= this.virtualHeight - this.rowHeight;
+	}
+	/** The selected row objects, in source order. Derived from `selectedIds`, so ids without a
+	* matching row (possible only if a consumer mutates `selectedIds` directly) drop out. */
+	get selectedRows() {
+		const selected = [];
+		for (const [row, id] of this.rowIds) if (this.selectedIds.has(id)) selected.push(row);
+		return selected;
+	}
+	get allRowsSelected() {
+		return this.filteredRows.length > 0 && this.selectedRows.length >= this.filteredRows.length;
+	}
+	get someRowsSelected() {
+		return this.selectedRows.length > 0 && !this.allRowsSelected;
+	}
+	constructor(config) {
+		this.config = config;
+		makeObservable(this, {
+			rows: observable.ref,
+			columns: observable,
+			columnOrder: observable.ref,
+			filterSources: observable.ref,
+			scrollX: observable,
+			scrollY: observable,
+			height: observable,
+			width: observable,
+			sorts: observable.ref,
+			selectedIds: observable.shallow,
+			expandedIds: observable.shallow,
+			scrollRequest: observable.ref,
+			rowIds: computed,
+			allColumns: computed,
+			orderedColumns: computed,
+			columnWidths: computed,
+			virtualWidth: computed,
+			virtualHeight: computed,
+			expandedDisplayIndices: computed,
+			unpinnedColumns: computed,
+			firstUnpinnedRenderedIndex: computed,
+			lastUnpinnedRenderedIndex: computed,
+			unpinnedRenderedColumns: computed,
+			leftPinnedRenderedColumns: computed,
+			rightPinnedRenderedColumns: computed,
+			filteredRows: computed,
+			displayRows: computed,
+			firstRenderedIndex: computed,
+			lastRenderedIndex: computed,
+			renderedRows: computed,
+			virtualOffsetX: computed,
+			virtualOffsetY: computed,
+			renderedColumns: computed,
+			visualColumns: computed,
+			displayRowIndexMap: computed,
+			selectable: computed,
+			gridTemplateColumns: computed,
+			atEnd: computed,
+			selectedRows: computed,
+			allRowsSelected: computed,
+			someRowsSelected: computed,
+			applyState: action.bound,
+			setFilter: action.bound,
+			syncColumns: action,
+			moveColumn: action.bound,
+			setRows: action,
+			appendRows: action.bound,
+			setScroll: action.bound,
+			scrollToRow: action.bound,
+			scrollToEnd: action.bound,
+			clearScrollRequest: action.bound,
+			setWidth: action.bound,
+			setHeight: action.bound,
+			setSort: action.bound,
+			setSorts: action.bound,
+			clearSort: action.bound,
+			toggleRow: action.bound,
+			selectAllRows: action.bound,
+			clearSelection: action.bound,
+			toggleRowExpanded: action.bound,
+			collapseAllRows: action.bound,
+			toggleAllRows: action.bound
+		});
+		if (config?.filter) this.setFilter(config.filter);
+		if (config?.rows) this.setRows(config.rows);
+		this.activate();
+	}
+	/**
+	* (Re)start the `onStateChange` reaction. Pairs with `dispose` — `useTable` calls both across
+	* effect cycles, so a StrictMode dev remount (mount → cleanup → mount against the same model)
+	* re-arms the reaction instead of leaving the surviving model deaf. No-op when already active
+	* or when the config has no `onStateChange`.
+	*/
+	activate() {
+		const onStateChange = this.config?.onStateChange;
+		if (onStateChange && !this.stateReactionDisposer) this.stateReactionDisposer = reaction(() => this.getState(), onStateChange, { equals: comparer.structural });
+	}
+	/** Drop the `onStateChange` reaction. Pairs with `activate`. */
+	dispose() {
+		this.stateReactionDisposer?.();
+		this.stateReactionDisposer = void 0;
+	}
+	rowId(row) {
+		return this.rowIds.get(row);
+	}
+	/** Snapshot of the user-curated arrangement (see `TableState`). JSON-serializable. */
+	getState() {
+		const columns = {};
+		for (const col of this.allColumns) {
+			const entry = {
+				hidden: col.hidden,
+				pinned: col.pinned || false
+			};
+			if (col.manualWidth !== void 0) entry.width = col.manualWidth;
+			columns[col.key] = entry;
+		}
+		return {
+			columnOrder: this.columnOrder.slice(),
+			columns,
+			sorts: this.sorts.map((s) => ({ ...s }))
+		};
+	}
+	/**
+	* Restore a (possibly partial) snapshot. Keys with no matching column are kept aside and land
+	* when a matching column appears (see `appliedState`); columns the snapshot doesn't mention are
+	* left as they are, ordered after the snapshot's columns.
+	*/
+	applyState(state) {
+		this.appliedState = {
+			...this.appliedState,
+			...state
+		};
+		if (state.columns) for (const col of this.columns.values()) this.applyColumnState(col);
+		if (state.columnOrder) this.columnOrder = this.mergedOrder(state.columnOrder);
+		if (state.sorts) this.sorts = state.sorts.map((s) => ({ ...s }));
+	}
+	/** Replace the client-side filter source(s). Pass `undefined` to clear. */
+	setFilter(filter) {
+		this.filterSources = filter ? [filter].flat() : [];
+	}
+	/** Move a column to a new index in the display order. */
+	moveColumn(key, toIndex) {
+		const from = this.columnOrder.indexOf(key);
+		if (from < 0) return;
+		const order = this.columnOrder.slice();
+		order.splice(from, 1);
+		order.splice(Math.max(0, Math.min(order.length, toIndex)), 0, key);
+		this.columnOrder = order;
+	}
+	/** Replace the dataset. Row-keyed state (selection, expansion) is reset — ids from the old world
+	* (indices by default) must not silently attach to new rows. Use `appendRows` to add without resetting. */
+	setRows(rows) {
+		this.rows = rows;
+		this.syncColumns();
+		this.selectedIds.clear();
+		this.expandedIds.clear();
+	}
+	/** Append rows without resetting row-keyed state — the "load more" path. Existing rows keep
+	* their positions, so default (index) ids stay stable and selection survives. */
+	appendRows(rows) {
+		this.rows = [...this.rows, ...rows];
+		this.syncColumns();
+	}
+	setScroll(x, y) {
+		this.scrollX = x;
+		this.scrollY = y;
+	}
+	/** Content offset of a display index's block top (row plus any expansion panels above it). */
+	blockOffset(index) {
+		return index * this.rowHeight + this.expandedAbove(index) * this.expansionHeight;
+	}
+	/** Scroll so the row's block top lands at the viewport top, or its block end at the bottom. */
+	scrollToRow(row, align = "top") {
+		const index = this.displayRowIndexMap.get(row);
+		if (index === void 0) return;
+		if (align === "top") {
+			this.scrollRequest = { y: this.blockOffset(index) };
+			return;
+		}
+		const id = this.rowIds.get(row);
+		const expanded = id !== void 0 && this.expandedIds.has(id);
+		const blockEnd = this.blockOffset(index) + this.rowHeight + (expanded ? this.expansionHeight : 0);
+		this.scrollRequest = { y: Math.max(0, blockEnd - this.height) };
+	}
+	/** Scroll to the very end of the content. */
+	scrollToEnd() {
+		this.scrollRequest = { y: "end" };
+	}
+	clearScrollRequest() {
+		this.scrollRequest = void 0;
+	}
+	setWidth(width) {
+		this.width = width;
+	}
+	setHeight(height) {
+		this.height = height;
+	}
+	/**
+	* Set a column's sort. By default the whole sort list is replaced (single-sort behavior).
+	* With `preserve: true` existing sorts are kept: a column already in the list changes
+	* direction in place (keeping its priority), a new column is appended at the lowest priority.
+	*/
+	setSort(key, direction, opts) {
+		if (!opts?.preserve) {
+			this.sorts = [{
+				key,
+				direction
+			}];
+			return;
+		}
+		const sorts = this.sorts.slice();
+		const existing = sorts.findIndex((s) => s.key === key);
+		if (existing >= 0) sorts[existing] = {
+			key,
+			direction
+		};
+		else sorts.push({
+			key,
+			direction
+		});
+		this.sorts = sorts;
+	}
+	/** Replace the whole sort list at once (restoring a saved view); `setSort` covers per-column interactions. */
+	setSorts(sorts) {
+		this.sorts = sorts.map((s) => ({ ...s }));
+	}
+	/** Remove one column from the sort (later entries move up in priority), or all sorts when no key is given. */
+	clearSort(key) {
+		this.sorts = key === void 0 ? [] : this.sorts.filter((s) => s.key !== key);
+	}
+	isRowSelected(row) {
+		const id = this.rowIds.get(row);
+		return id !== void 0 && this.selectedIds.has(id);
+	}
+	toggleRow(row) {
+		const id = this.rowIds.get(row);
+		if (id === void 0) return;
+		if (this.selectedIds.has(id)) this.selectedIds.delete(id);
+		else this.selectedIds.add(id);
+	}
+	selectAllRows() {
+		this.selectedIds.clear();
+		for (const row of this.filteredRows) {
+			const id = this.rowIds.get(row);
+			if (id !== void 0) this.selectedIds.add(id);
+		}
+	}
+	clearSelection() {
+		this.selectedIds.clear();
+	}
+	toggleAllRows() {
+		if (this.allRowsSelected) this.clearSelection();
+		else this.selectAllRows();
+	}
+	isRowExpanded(row) {
+		const id = this.rowIds.get(row);
+		return id !== void 0 && this.expandedIds.has(id);
+	}
+	toggleRowExpanded(row) {
+		const id = this.rowIds.get(row);
+		if (id === void 0) return;
+		if (this.expandedIds.has(id)) this.expandedIds.delete(id);
+		else {
+			if (this.config?.expandMode === "single") this.expandedIds.clear();
+			this.expandedIds.add(id);
+		}
+	}
+	collapseAllRows() {
+		this.expandedIds.clear();
+	}
+	syncColumns() {
+		const firstRow = this.rows?.at(0);
+		const syncedColumns = (this.config?.columns ?? Object.keys(firstRow ?? {})).flatMap((defOrFactory) => {
+			if (typeof defOrFactory === "function") {
+				if (!firstRow) return [];
+				return [defOrFactory(firstRow)].flat().map((def) => ColumnModel.fromDef(this, def));
+			}
+			return ColumnModel.fromDef(this, defOrFactory);
+		});
+		const syncedKeys = new Set(syncedColumns.map((c) => c.config.key));
+		for (const key of this.columns.keys()) if (!syncedKeys.has(key)) this.columns.delete(key);
+		const firstSync = this.columns.size === 0;
+		for (const column of syncedColumns) if (!this.columns.has(column.config.key)) {
+			this.columns.set(column.config.key, column);
+			this.applyColumnState(column);
+		}
+		const keys = syncedColumns.map((c) => c.config.key);
+		this.columnOrder = [...this.columnOrder.filter((k) => keys.includes(k)), ...keys.filter((k) => !this.columnOrder.includes(k))];
+		if (firstSync && this.appliedState?.columnOrder) this.columnOrder = this.mergedOrder(this.appliedState.columnOrder);
+	}
+	applyColumnState(col) {
+		const state = this.appliedState?.columns?.[col.key];
+		if (!state) return;
+		col.setHidden(state.hidden);
+		col.setPinned(state.pinned);
+		col.setManualWidth(state.width);
+	}
+	mergedOrder(order) {
+		const known = order.filter((k) => this.columns.has(k));
+		const rest = this.columnOrder.filter((k) => !known.includes(k));
+		return [...known, ...rest];
+	}
+	expandedAbove(index) {
+		let count = 0;
+		for (const i of this.expandedDisplayIndices) if (i < index) count++;
+		else break;
+		return count;
+	}
+	/**
+	* The display index of the row whose block (row + its expansion panel, if any) contains the
+	* vertical content offset `y`. Walks the expanded indices accumulating their extra height —
+	* a row scrolled past its own top stays "at" `y` while its panel is in view, so expanded rows
+	* render as long as any part of their block does.
+	*/
+	indexAtOffset(y) {
+		const { rowHeight, expansionHeight } = this;
+		let extra = 0;
+		for (const i of this.expandedDisplayIndices) {
+			const panelTop = (i + 1) * rowHeight + extra;
+			if (panelTop > y) break;
+			if (panelTop + expansionHeight > y) return i;
+			extra += expansionHeight;
+		}
+		return Math.floor((y - extra) / rowHeight);
+	}
+};
+
+//#endregion
+//#region src/table/use-table.ts
+const useTable = (config) => {
+	const tableRef = useRef(void 0);
+	if (!tableRef.current) tableRef.current = new TableModel(config);
+	useEffect(() => {
+		tableRef.current?.activate();
+		return () => tableRef.current?.dispose();
+	}, []);
+	return tableRef.current;
+};
+
+//#endregion
+export { CellSlot, ColumnModel, NativeCheckbox, SELECTION_COLUMN_KEY, SelectAll, SelectionCell, SelectionHeaderCell, Table, TableBody, TableCell, TableColumnHeader, TableEmpty, TableExpansion, TableHeader, TableModel, TableProvider, TableResizer, TableRoot, TableRow, TableSlotsProvider, compareValues, getPath, pinnedCellStyle, slotsContext, tableContext, titleCase, useScroll, useTable, useTableContext, useTableSlots };
+//# sourceMappingURL=table.mjs.map