@bysages/svelte 0.2.2 → 0.3.0

package/dist/table-BnNK4_su.mjs

@@ -0,0 +1,975 @@
+import { Pagination } from "./components/pagination/index.mjs";
+import { n as Select$1 } from "./select-rkY0qJKI.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { createListCollection } from "@ark-ui/svelte/select";
+import { FlexRender, FlexRender as FlexRender$1, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTable, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures } from "@tanstack/svelte-table";
+import { createVirtualizer } from "@tanstack/svelte-virtual";
+import { get } from "svelte/store";
+//#region src/components/table/table-utils.ts
+/** The list holding `id` and the index inside it, or null when absent. */
+function findNode(rows, id) {
+	for (let index = 0; index < rows.length; index++) {
+		const row = rows[index];
+		if (String(row.id) === id) return {
+			list: rows,
+			index
+		};
+		if (row.subRows) {
+			const hit = findNode(row.subRows, id);
+			if (hit) return hit;
+		}
+	}
+	return null;
+}
+/** True when `id` sits anywhere in the node's subtree — dropping a node
+* into its own descendants would orphan it. */
+function containsNode(node, id) {
+	return !!node.subRows?.some((child) => String(child.id) === id || containsNode(child, id));
+}
+/** Rebuild every array along the path to `id`, leaving sibling branches
+* untouched by reference (TanStack's memoization keeps their rows). */
+function removeById(rows, id) {
+	const next = [];
+	for (const row of rows) {
+		if (String(row.id) === id) continue;
+		next.push(row.subRows ? {
+			...row,
+			subRows: removeById(row.subRows, id)
+		} : row);
+	}
+	return next;
+}
+/** Rebuild the path to `id` and swap the node for `patch(node)`. */
+function replaceById(rows, id, patch) {
+	return rows.map((row) => {
+		if (String(row.id) === id) return patch(row);
+		return row.subRows ? {
+			...row,
+			subRows: replaceById(row.subRows, id, patch)
+		} : row;
+	});
+}
+/** Toggle one drop-indicator attribute without rewriting it every event. */
+function mark(el, attr, on) {
+	if (on) el.setAttribute(attr, "");
+	else el.removeAttribute(attr);
+}
+//#endregion
+//#region src/components/table/DataTable.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"data",
+	"columns",
+	"selectable",
+	"sortable",
+	"filterable",
+	"showToolbar",
+	"tree",
+	"merge",
+	"pinStart",
+	"pinEnd",
+	"virtual",
+	"rowHeight",
+	"paginated",
+	"pageSize",
+	"pageSizeOptions",
+	"stickyFooter",
+	"initialSorting",
+	"globalFilterPlaceholder",
+	"emptyText",
+	"reorderable",
+	"onRowReorder",
+	"onColumnReorder"
+]);
+var root = $.from_html(`<input type="checkbox" aria-label="Select row"/>`);
+var root_1 = $.from_html(`<div data-scope="table" data-part="cell-main"><button type="button" data-scope="table" data-part="expander"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg></button> <!></div>`);
+var root_2 = $.from_html(`<div><!></div>`);
+var root_3 = $.from_html(`<div role="row" data-scope="table" data-part="row"></div>`);
+var root_4 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter" aria-label="Filter all columns"/></div>`);
+var root_5 = $.from_html(`<div><input type="checkbox" aria-label="Select all rows"/></div>`);
+var root_6 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter" placeholder="Filter"/>`);
+var root_7 = $.from_html(`<div><!> <!></div>`);
+var root_8 = $.from_html(`<div data-scope="table" data-part="empty"> </div>`);
+var root_9 = $.from_html(`<div role="rowgroup" data-scope="table" data-part="footer"></div>`);
+var root_10 = $.from_svg(`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>`);
+var root_11 = $.from_html(`<!> <!>`, 1);
+var root_12 = $.from_svg(`<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path></path></svg>`);
+var root_13 = $.from_html(`<!> <!> <!>`, 1);
+var root_14 = $.from_html(`<div data-scope="table" data-part="pagination"><span data-scope="table" data-part="page-status"> </span> <div data-scope="table" data-part="page-nav"><!> <!></div></div>`);
+var root_15 = $.from_html(`<div><!> <div data-scope="table" data-part="viewport"><div role="table" data-scope="table" data-part="table"><div role="rowgroup" data-scope="table" data-part="header"></div> <div role="rowgroup" data-scope="table" data-part="body"><!> <!></div> <!></div></div> <!></div>`);
+function DataTable$1($$anchor, $$props) {
+	$.push($$props, true);
+	const $virtualizer = () => $.store_get(virtualizer, "$virtualizer", $$stores);
+	const [$$stores, $$cleanup] = $.setup_stores();
+	const renderRow = ($$anchor, row = $.noop, item = $.noop) => {
+		var div = root_3();
+		$.each(div, 21, () => row().getVisibleCells(), (cell) => cell.column.id, ($$anchor, cell) => {
+			var fragment = $.comment();
+			var node_1 = $.first_child(fragment);
+			var consequent_2 = ($$anchor) => {
+				const column = $.derived(() => $.get(cell).column);
+				const rowSpan = $.derived(() => $.get(cell).getRowSpan());
+				const isExpandHost = $.derived(() => $.get(column).id === $.get(expandHostId));
+				var div_1 = root_2();
+				$.attribute_effect(div_1, ($0, $1) => ({
+					role: "cell",
+					"data-scope": "table",
+					"data-part": "cell",
+					"data-numeric": $.get(column).columnDef.meta?.numeric ? "" : void 0,
+					"data-spanned": $.get(rowSpan) > 1 ? "" : void 0,
+					...$0,
+					style: $1
+				}), [() => pinAttrs($.get(column)), () => cellStyle($.get(column), $.get(rowSpan))]);
+				var node_2 = $.child(div_1);
+				var consequent = ($$anchor) => {
+					var input = root();
+					$.remove_input_defaults(input);
+					input.indeterminate = false;
+					$.template_effect(($0) => $.set_checked(input, $0), [() => row().getIsSelected()]);
+					$.delegated("change", input, () => row().toggleSelected(!row().getIsSelected()));
+					$.append($$anchor, input);
+				};
+				var consequent_1 = ($$anchor) => {
+					var div_2 = root_1();
+					let styles;
+					var button = $.child(div_2);
+					var node_3 = $.sibling(button, 2);
+					FlexRender(node_3, { get cell() {
+						return $.get(cell);
+					} });
+					$.reset(div_2);
+					$.template_effect(($0, $1, $2, $3) => {
+						styles = $.set_style(div_2, "", styles, { "--bs-table-depth": $0 });
+						$.set_attribute(button, "data-expanded", $1);
+						$.set_attribute(button, "data-leaf", $2);
+						$.set_attribute(button, "aria-label", $3);
+					}, [
+						() => String(row().depth),
+						() => row().getIsExpanded() || void 0,
+						() => !row().getCanExpand() || void 0,
+						() => row().getIsExpanded() ? "Collapse row" : "Expand row"
+					]);
+					$.delegated("click", button, () => row().toggleExpanded());
+					$.append($$anchor, div_2);
+				};
+				var alternate = ($$anchor) => {
+					FlexRender($$anchor, { get cell() {
+						return $.get(cell);
+					} });
+				};
+				$.if(node_2, ($$render) => {
+					if ($.get(column).id === SELECT_COL_ID) $$render(consequent);
+					else if ($.get(isExpandHost)) $$render(consequent_1, 1);
+					else $$render(alternate, -1);
+				});
+				$.reset(div_1);
+				$.append($$anchor, div_1);
+			};
+			var d_1 = $.derived(() => !$.get(cell).getIsCovered());
+			$.if(node_1, ($$render) => {
+				if ($.get(d_1)) $$render(consequent_2);
+			});
+			$.append($$anchor, fragment);
+		});
+		$.reset(div);
+		$.template_effect(($0) => {
+			$.set_attribute(div, "data-selected", $0);
+			$.set_attribute(div, "draggable", $.get(rowDraggable) || void 0);
+			$.set_style(div, item() ? {
+				position: "absolute",
+				"inset-inline-start": "0",
+				"inline-size": "100%",
+				transform: `translateY(${item().start}px)`,
+				"block-size": `${item().size}px`
+			} : void 0);
+		}, [() => row().getIsSelected() || void 0]);
+		$.event("dragstart", div, (e) => onRowDragStart(row(), e));
+		$.event("dragover", div, (e) => onRowDragOver(row(), e));
+		$.event("dragleave", div, onRowDragLeave);
+		$.event("drop", div, (e) => onRowDrop(row(), e));
+		$.event("dragend", div, onRowDragEnd);
+		$.append($$anchor, div);
+	};
+	injectComponentStyle("table");
+	let selectable = $.prop($$props, "selectable", 3, false), sortable = $.prop($$props, "sortable", 3, true), filterable = $.prop($$props, "filterable", 3, false), showToolbar = $.prop($$props, "showToolbar", 3, true), tree = $.prop($$props, "tree", 3, false), virtual = $.prop($$props, "virtual", 3, false), rowHeight = $.prop($$props, "rowHeight", 3, 40), paginated = $.prop($$props, "paginated", 3, false), pageSize = $.prop($$props, "pageSize", 3, 10), pageSizeOptions = $.prop($$props, "pageSizeOptions", 19, () => [
+		10,
+		20,
+		50
+	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), globalFilterPlaceholder = $.prop($$props, "globalFilterPlaceholder", 3, "Filter rows"), emptyText = $.prop($$props, "emptyText", 3, "No rows"), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const SELECT_COL_ID = "__select";
+	const SELECT_COL_WIDTH = 48;
+	if (virtual() && $$props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
+	/** Features follow the construction-time switches: sorting, selection,
+	* expansion, pinning, and spanning are always part of the one-stop
+	* shape; filtering and pagination ride their own render paths. */
+	const features = tableFeatures({
+		rowSortingFeature,
+		sortedRowModel: createSortedRowModel(),
+		sortFns: {
+			alphanumeric: sortFn_alphanumeric,
+			alphanumericCaseSensitive: sortFn_alphanumericCaseSensitive,
+			basic: sortFn_basic,
+			datetime: sortFn_datetime,
+			text: sortFn_text,
+			textCaseSensitive: sortFn_textCaseSensitive
+		},
+		rowSelectionFeature,
+		rowExpandingFeature,
+		expandedRowModel: createExpandedRowModel(),
+		columnPinningFeature,
+		columnOrderingFeature,
+		columnSizingFeature,
+		columnVisibilityFeature,
+		cellSpanningFeature,
+		...filterable() ? {
+			columnFilteringFeature,
+			globalFilteringFeature,
+			filteredRowModel: createFilteredRowModel(),
+			filterFns: {
+				arrIncludes: filterFn_arrIncludes,
+				equals: filterFn_equals,
+				includesString: filterFn_includesString,
+				inDateRange: filterFn_inDateRange,
+				inNumberRange: filterFn_inNumberRange,
+				weakEquals: filterFn_weakEquals
+			}
+		} : {},
+		...paginated() ? {
+			rowPaginationFeature,
+			paginatedRowModel: createPaginatedRowModel()
+		} : {}
+	});
+	/** The select column leads; merged columns opt into value-based row
+	* spanning at the model level. Built once: column inputs stay stable
+	* for the life of the instance, like the features above. */
+	const mergeIds = new Set($$props.merge ?? []);
+	const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
+	const cols = $$props.columns.map((def) => mergeIds.has(defId(def)) ? {
+		...def,
+		spanRows: true
+	} : def);
+	if (selectable()) cols.unshift({
+		id: SELECT_COL_ID,
+		size: SELECT_COL_WIDTH,
+		enableSorting: false,
+		header: () => "",
+		cell: () => ""
+	});
+	const table = createTable({
+		features,
+		columns: cols,
+		get data() {
+			return $$props.data;
+		},
+		enableSorting: sortable() !== false,
+		getRowId: (row) => String(row.id),
+		getSubRows: (row) => row.subRows,
+		autoResetExpanded: false,
+		initialState: {
+			...$$props.initialSorting ? { sorting: $$props.initialSorting } : {},
+			...paginated() ? { pagination: {
+				pageIndex: 0,
+				pageSize: pageSize()
+			} } : {},
+			...$$props.pinStart || $$props.pinEnd ? { columnPinning: {
+				start: $$props.pinStart ?? [],
+				end: $$props.pinEnd ?? []
+			} } : {}
+		}
+	});
+	/** Instance-shaped aliases for the helpers below. */
+	const rows = $.derived(() => table.getRowModel().rows);
+	const virtualMode = $.derived(() => virtual() && !$$props.merge);
+	const mergeMode = $.derived(() => !virtual() && !!$$props.merge);
+	/** The declared row height is the density-scale baseline; the live
+	* scale comes off the document so the virtual window matches what CSS
+	* actually renders. */
+	const baseRowHeight = () => rowHeight() ?? 40;
+	function densityScale() {
+		const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
+		return Number.isFinite(value) && value > 0 ? value : 1;
+	}
+	let viewportEl = $.state(null);
+	const virtualizer = createVirtualizer({
+		get count() {
+			return $.get(rows).length;
+		},
+		getScrollElement: () => $.get(viewportEl),
+		estimateSize: () => baseRowHeight() * densityScale(),
+		getItemKey: (index) => $.get(rows)[index]?.id ?? index,
+		overscan: 8
+	});
+	$.user_effect(() => {
+		$.get(rows).length;
+		get(virtualizer).measure();
+	});
+	$.user_effect(() => {
+		if (typeof MutationObserver === "undefined") return;
+		const densityObserver = new MutationObserver(() => get(virtualizer).measure());
+		densityObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-density", "data-scene"]
+		});
+		return () => densityObserver.disconnect();
+	});
+	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
+	const leafIds = $.derived(() => table.getAllLeafColumns().map((c) => c.id));
+	const expandHostId = $.derived(() => {
+		const id = $.get(leafIds).find((id) => id !== SELECT_COL_ID);
+		return tree() ? id : void 0;
+	});
+	/** Track list for every grid in the table; explicit sizes pin to px,
+	* everything else flexes. */
+	const colsTemplate = $.derived(() => table.getAllLeafColumns().map((column) => {
+		if (column.id === SELECT_COL_ID) return `${SELECT_COL_WIDTH}px`;
+		const def = $$props.columns.find((d) => d.id === column.id || "accessorKey" in d && String(d.accessorKey) === column.id);
+		return def?.size != null ? `${def.size}px` : def?.minSize != null ? `minmax(${def.minSize}px, 1fr)` : "1fr";
+	}).join(" "));
+	/** Seam attributes the stylesheet reads; the pin offset rides a style
+	* directive so it merges with the per-cell grid styles. */
+	function pinAttrs(column) {
+		const pinned = column.getIsPinned();
+		if (!pinned) return { "data-pinned": void 0 };
+		const siblings = $.get(leafIds);
+		const index = siblings.indexOf(column.id);
+		const prev = index > 0 ? table.getColumn(siblings[index - 1]) : void 0;
+		const next = index < siblings.length - 1 ? table.getColumn(siblings[index + 1]) : void 0;
+		return {
+			"data-pinned": pinned,
+			"data-last-pinned": pinned === "start" && next?.getIsPinned() !== "start" ? "" : void 0,
+			"data-first-pinned": pinned === "end" && prev?.getIsPinned() !== "end" ? "" : void 0
+		};
+	}
+	function pinOffset(column) {
+		const pinned = column.getIsPinned();
+		if (!pinned) return void 0;
+		return `${pinned === "start" ? column.getStart("start") : column.getAfter("end")}px`;
+	}
+	let dragColId = null;
+	let dragRowId = null;
+	let lastColDrop = null;
+	let lastRowDrop = null;
+	function clearColDrop() {
+		if (lastColDrop) {
+			lastColDrop.removeAttribute("data-drop-before-col");
+			lastColDrop.removeAttribute("data-drop-after-col");
+			lastColDrop = null;
+		}
+	}
+	function clearRowDrop() {
+		if (lastRowDrop) {
+			lastRowDrop.removeAttribute("data-drop-before");
+			lastRowDrop.removeAttribute("data-drop-inside");
+			lastRowDrop.removeAttribute("data-drop-after");
+			lastRowDrop.style.removeProperty("--bs-drop-indent");
+			lastRowDrop = null;
+		}
+	}
+	function onColDragStart(e) {
+		dragColId = e.currentTarget.dataset.id;
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", dragColId);
+		e.currentTarget.setAttribute("data-dragging", "");
+	}
+	/** Header cells answer drops on either side of their midpoint; pinned
+	* columns and the drag source themselves never light up. */
+	function onColDragOver(column, e) {
+		if (!dragColId || dragColId === column.id || column.getIsPinned()) return;
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+		const el = e.currentTarget;
+		if (lastColDrop !== el) clearColDrop();
+		const before = e.clientX < el.getBoundingClientRect().left + el.getBoundingClientRect().width / 2;
+		mark(el, "data-drop-before-col", before);
+		mark(el, "data-drop-after-col", !before);
+		lastColDrop = el;
+	}
+	function onColDragLeave(e) {
+		if (e.currentTarget === lastColDrop) clearColDrop();
+	}
+	function onColDrop(column, e) {
+		e.preventDefault();
+		if (!dragColId || dragColId === column.id) return;
+		const el = e.currentTarget;
+		const before = e.clientX < el.getBoundingClientRect().left + el.getBoundingClientRect().width / 2;
+		const state = table.atoms.columnOrder.get();
+		const order = (state.length ? [...state] : table.getAllLeafColumns().map((c) => c.id)).filter((id) => id !== dragColId);
+		const at = order.indexOf(column.id);
+		order.splice(before ? at : at + 1, 0, dragColId);
+		const selectAt = order.indexOf(SELECT_COL_ID);
+		if (selectAt > 0) {
+			order.splice(selectAt, 1);
+			order.unshift(SELECT_COL_ID);
+		}
+		table.setColumnOrder(order);
+		$$props.onColumnReorder?.(order);
+		clearColDrop();
+	}
+	function onColDragEnd(e) {
+		dragColId = null;
+		e.currentTarget.removeAttribute("data-dragging");
+		clearColDrop();
+	}
+	/** Row dragging rests while any view (sorting, filtering, pagination
+	* past the first page) stands between the display order and the data
+	* order — a drop there would lie about what it reordered. */
+	const rowDraggable = $.derived(() => {
+		if (!reorderable() || $.get(mergeMode)) return false;
+		if (table.atoms.sorting.get().length) return false;
+		if (filterable() && (table.atoms.columnFilters.get().length || table.atoms.globalFilter.get())) return false;
+		if (paginated() && table.atoms.pagination.get().pageIndex !== 0) return false;
+		return true;
+	});
+	function onRowDragStart(row, e) {
+		dragRowId = String(row.id);
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", dragRowId);
+		e.currentTarget.setAttribute("data-dragging", "");
+	}
+	/** Where a tree drop lands: the outer bands of the target row read as
+	* sibling slots (40% each, so the insertion line answers the hand
+	* everywhere and indents to the reference row's own depth — cross a
+	* boundary and the level flips from the row above's to the row
+	* below's); the narrow middle band reads as "make child". A node
+	* never drops into its own subtree. */
+	function rowZone(row, e) {
+		const box = e.currentTarget.getBoundingClientRect();
+		const pos = (e.clientY - box.top) / box.height;
+		return pos < .4 ? "before" : pos > .6 ? "after" : "inside";
+	}
+	function onRowDragOver(row, e) {
+		if (!dragRowId || dragRowId === String(row.id)) return;
+		const el = e.currentTarget;
+		let zone;
+		if (tree()) {
+			const hit = findNode($$props.data, dragRowId);
+			const dragged = hit?.list[hit.index];
+			if (!dragged || containsNode(dragged, String(row.id))) return;
+			zone = rowZone(row, e);
+		} else {
+			const box = el.getBoundingClientRect();
+			zone = e.clientY - box.top < box.height / 2 ? "before" : "after";
+		}
+		e.preventDefault();
+		e.dataTransfer.dropEffect = "move";
+		if (lastRowDrop !== el) clearRowDrop();
+		mark(el, "data-drop-before", zone === "before");
+		mark(el, "data-drop-inside", zone === "inside");
+		mark(el, "data-drop-after", zone === "after");
+		el.style.setProperty("--bs-drop-indent", String(tree() ? row.depth : 0));
+		lastRowDrop = el;
+	}
+	function onRowDragLeave(e) {
+		if (e.currentTarget === lastRowDrop) clearRowDrop();
+	}
+	function onRowDrop(row, e) {
+		e.preventDefault();
+		if (!dragRowId || dragRowId === String(row.id)) return;
+		const box = e.currentTarget.getBoundingClientRect();
+		const targetId = String(row.id);
+		if (tree()) {
+			const zone = rowZone(row, e);
+			const hit = findNode($$props.data, dragRowId);
+			const dragged = hit?.list[hit.index];
+			if (!dragged || containsNode(dragged, targetId)) return;
+			let next = removeById($$props.data, dragRowId);
+			if (zone === "inside") next = replaceById(next, targetId, (node) => ({
+				...node,
+				subRows: [...node.subRows ?? [], dragged]
+			}));
+			else {
+				const slot = findNode(next, targetId);
+				if (!slot) return;
+				slot.list.splice(slot.index + (zone === "after" ? 1 : 0), 0, dragged);
+			}
+			$$props.onRowReorder?.(next);
+		} else {
+			const pos = (e.clientY - box.top) / box.height;
+			const from = $$props.data.findIndex((r) => String(r.id) === dragRowId);
+			const to = $$props.data.findIndex((r) => String(r.id) === targetId);
+			if (from < 0 || to < 0) return;
+			const next = [...$$props.data];
+			const [moved] = next.splice(from, 1);
+			const slot = to > from ? to - 1 : to;
+			next.splice(pos < .5 ? slot : slot + 1, 0, moved);
+			$$props.onRowReorder?.(next);
+		}
+		clearRowDrop();
+	}
+	function onRowDragEnd(e) {
+		dragRowId = null;
+		e.currentTarget.removeAttribute("data-dragging");
+		clearRowDrop();
+	}
+	const hasFooters = $.derived(() => table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer)));
+	function cellStyle(column, span) {
+		return {
+			...pinOffset(column) ? { "--pin-offset": pinOffset(column) } : {},
+			...span > 1 ? { "grid-row": `span ${span}` } : {}
+		};
+	}
+	var div_3 = root_15();
+	$.attribute_effect(div_3, ($0) => ({
+		...rest,
+		"data-scope": "table",
+		"data-part": "root",
+		"data-reorderable": reorderable() || void 0,
+		[$.STYLE]: { "--bs-table-row-height": $0 }
+	}), [() => `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`]);
+	var node_4 = $.child(div_3);
+	var consequent_3 = ($$anchor) => {
+		var div_4 = root_4();
+		var input_1 = $.child(div_4);
+		$.remove_input_defaults(input_1);
+		$.reset(div_4);
+		$.template_effect(($0) => {
+			$.set_attribute(input_1, "placeholder", globalFilterPlaceholder());
+			$.set_value(input_1, $0);
+		}, [() => table.atoms.globalFilter.get() ?? ""]);
+		$.delegated("input", input_1, (e) => table.setGlobalFilter(e.currentTarget.value));
+		$.append($$anchor, div_4);
+	};
+	$.if(node_4, ($$render) => {
+		if (filterable() && showToolbar()) $$render(consequent_3);
+	});
+	var div_5 = $.sibling(node_4, 2);
+	var div_6 = $.child(div_5);
+	let styles_1;
+	var div_7 = $.child(div_6);
+	$.each(div_7, 21, () => table.getHeaderGroups(), (group) => group.id, ($$anchor, group) => {
+		var div_8 = root_3();
+		$.each(div_8, 21, () => $.get(group).headers, (header) => header.column.id, ($$anchor, header) => {
+			const column = $.derived(() => $.get(header).column);
+			var fragment_2 = $.comment();
+			var node_5 = $.first_child(fragment_2);
+			var consequent_4 = ($$anchor) => {
+				const all = $.derived(() => table.getIsAllRowsSelected());
+				var div_9 = root_5();
+				$.attribute_effect(div_9, ($0, $1) => ({
+					role: "columnheader",
+					"data-scope": "table",
+					"data-part": "header-cell",
+					...$0,
+					[$.STYLE]: { "--pin-offset": $1 }
+				}), [() => pinAttrs($.get(column)), () => pinOffset($.get(column))]);
+				var input_2 = $.child(div_9);
+				$.remove_input_defaults(input_2);
+				$.reset(div_9);
+				$.template_effect(($0) => {
+					$.set_checked(input_2, $.get(all));
+					input_2.indeterminate = $0;
+				}, [() => table.getIsSomeRowsSelected() && !$.get(all)]);
+				$.delegated("change", input_2, () => table.toggleAllRowsSelected(!$.get(all)));
+				$.append($$anchor, div_9);
+			};
+			var alternate_1 = ($$anchor) => {
+				const sorted = $.derived(() => $.get(column).getIsSorted());
+				const canSort = $.derived(() => $.get(column).getCanSort());
+				const canFilter = $.derived(() => filterable() && $.get(column).getCanFilter());
+				const canDrag = $.derived(() => !!reorderable() && $.get(column).id !== SELECT_COL_ID && !$.get(column).getIsPinned());
+				var div_10 = root_7();
+				$.attribute_effect(div_10, ($0, $1) => ({
+					role: "columnheader",
+					"data-scope": "table",
+					"data-part": "header-cell",
+					"data-sortable": $.get(canSort) || void 0,
+					"data-sort": $.get(sorted) || void 0,
+					"data-numeric": $.get(column).columnDef.meta?.numeric ? "" : void 0,
+					"data-draggable": $.get(canDrag) || void 0,
+					"data-id": $.get(column).id,
+					draggable: $.get(canDrag) || void 0,
+					"aria-sort": $.get(sorted) === "asc" ? "ascending" : $.get(sorted) === "desc" ? "descending" : void 0,
+					...$0,
+					onclick: $.get(canSort) ? () => $.get(column).toggleSorting() : void 0,
+					ondragstart: $.get(canDrag) ? onColDragStart : void 0,
+					ondragover: $.get(canDrag) ? (e) => onColDragOver($.get(column), e) : void 0,
+					ondragleave: $.get(canDrag) ? onColDragLeave : void 0,
+					ondrop: $.get(canDrag) ? (e) => onColDrop($.get(column), e) : void 0,
+					ondragend: $.get(canDrag) ? onColDragEnd : void 0,
+					[$.STYLE]: { "--pin-offset": $1 }
+				}), [() => pinAttrs($.get(column)), () => pinOffset($.get(column))]);
+				var node_6 = $.child(div_10);
+				var consequent_5 = ($$anchor) => {
+					FlexRender($$anchor, { get header() {
+						return $.get(header);
+					} });
+				};
+				$.if(node_6, ($$render) => {
+					if (!$.get(header).isPlaceholder && $.get(header).column.columnDef.header !== "") $$render(consequent_5);
+				});
+				var node_7 = $.sibling(node_6, 2);
+				var consequent_6 = ($$anchor) => {
+					var input_3 = root_6();
+					$.remove_input_defaults(input_3);
+					$.set_attribute(input_3, "draggable", false);
+					$.template_effect(($0) => {
+						$.set_attribute(input_3, "aria-label", `Filter ${$.get(column).id}`);
+						$.set_value(input_3, $0);
+					}, [() => $.get(column).getFilterValue() ?? ""]);
+					$.delegated("click", input_3, (e) => e.stopPropagation());
+					$.event("dragstart", input_3, (e) => e.stopPropagation());
+					$.delegated("input", input_3, (e) => $.get(column).setFilterValue(e.currentTarget.value));
+					$.append($$anchor, input_3);
+				};
+				$.if(node_7, ($$render) => {
+					if ($.get(canFilter)) $$render(consequent_6);
+				});
+				$.reset(div_10);
+				$.append($$anchor, div_10);
+			};
+			$.if(node_5, ($$render) => {
+				if ($.get(column).id === SELECT_COL_ID) $$render(consequent_4);
+				else $$render(alternate_1, -1);
+			});
+			$.append($$anchor, fragment_2);
+		});
+		$.reset(div_8);
+		$.append($$anchor, div_8);
+	});
+	$.reset(div_7);
+	var div_11 = $.sibling(div_7, 2);
+	var node_8 = $.child(div_11);
+	var consequent_7 = ($$anchor) => {
+		var fragment_4 = $.comment();
+		var node_9 = $.first_child(fragment_4);
+		$.each(node_9, 1, () => $virtualizer().getVirtualItems(), (item) => item.key, ($$anchor, item) => {
+			const row = $.derived(() => $.get(rows)[$.get(item).index]);
+			renderRow($$anchor, () => $.get(row), () => $.get(item));
+		});
+		$.append($$anchor, fragment_4);
+	};
+	var alternate_2 = ($$anchor) => {
+		var fragment_6 = $.comment();
+		var node_10 = $.first_child(fragment_6);
+		$.each(node_10, 17, () => $.get(rows), (row) => row.id, ($$anchor, row) => {
+			renderRow($$anchor, () => $.get(row));
+		});
+		$.append($$anchor, fragment_6);
+	};
+	$.if(node_8, ($$render) => {
+		if ($.get(virtualMode)) $$render(consequent_7);
+		else $$render(alternate_2, -1);
+	});
+	var node_11 = $.sibling(node_8, 2);
+	var consequent_8 = ($$anchor) => {
+		var div_12 = root_8();
+		var text = $.only_child(div_12, true);
+		$.template_effect(() => $.set_text(text, emptyText()));
+		$.append($$anchor, div_12);
+	};
+	$.if(node_11, ($$render) => {
+		if ($.get(rows).length === 0) $$render(consequent_8);
+	});
+	$.reset(div_11);
+	var node_12 = $.sibling(div_11, 2);
+	var consequent_10 = ($$anchor) => {
+		var div_13 = root_9();
+		$.each(div_13, 21, () => table.getFooterGroups(), (group) => group.id, ($$anchor, group) => {
+			var div_14 = root_3();
+			$.each(div_14, 21, () => $.get(group).headers, (header) => header.column.id, ($$anchor, header) => {
+				var div_15 = root_2();
+				$.attribute_effect(div_15, ($0, $1) => ({
+					role: "columnheader",
+					"data-scope": "table",
+					"data-part": "footer-cell",
+					"data-numeric": $.get(header).column.columnDef.meta?.numeric ? "" : void 0,
+					...$0,
+					[$.STYLE]: { "--pin-offset": $1 }
+				}), [() => pinAttrs($.get(header).column), () => pinOffset($.get(header).column)]);
+				var node_13 = $.child(div_15);
+				var consequent_9 = ($$anchor) => {
+					FlexRender($$anchor, { get footer() {
+						return $.get(header);
+					} });
+				};
+				$.if(node_13, ($$render) => {
+					if (!$.get(header).isPlaceholder) $$render(consequent_9);
+				});
+				$.reset(div_15);
+				$.append($$anchor, div_15);
+			});
+			$.reset(div_14);
+			$.append($$anchor, div_14);
+		});
+		$.reset(div_13);
+		$.append($$anchor, div_13);
+	};
+	$.if(node_12, ($$render) => {
+		if (stickyFooter() && $.get(hasFooters)) $$render(consequent_10);
+	});
+	$.reset(div_6);
+	$.reset(div_5);
+	$.bind_this(div_5, ($$value) => $.set(viewportEl, $$value), () => $.get(viewportEl));
+	var node_14 = $.sibling(div_5, 2);
+	var consequent_12 = ($$anchor) => {
+		const pagination = $.derived(() => table.atoms.pagination.get());
+		const sizeItems = $.derived(() => createListCollection({ items: pageSizeOptions().map((size) => ({
+			label: `${size} / page`,
+			value: String(size)
+		})) }));
+		var div_16 = root_14();
+		var span_1 = $.child(div_16);
+		var text_1 = $.only_child(span_1, true);
+		var div_17 = $.sibling(span_1, 2);
+		var node_15 = $.child(div_17);
+		{
+			let $0 = $.derived(() => [String($.get(pagination).pageSize)]);
+			$.component(node_15, () => Select$1.Root, ($$anchor, ArkSelect_Root) => {
+				ArkSelect_Root($$anchor, {
+					get collection() {
+						return $.get(sizeItems);
+					},
+					get value() {
+						return $.get($0);
+					},
+					onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+					positioning: { placement: "top-start" },
+					children: ($$anchor, $$slotProps) => {
+						var fragment_9 = root_11();
+						var node_16 = $.first_child(fragment_9);
+						$.component(node_16, () => Select$1.Control, ($$anchor, ArkSelect_Control) => {
+							ArkSelect_Control($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_10 = $.comment();
+									var node_17 = $.first_child(fragment_10);
+									$.component(node_17, () => Select$1.Trigger, ($$anchor, ArkSelect_Trigger) => {
+										ArkSelect_Trigger($$anchor, {
+											"aria-label": "Rows per page",
+											children: ($$anchor, $$slotProps) => {
+												var fragment_11 = root_11();
+												var node_18 = $.first_child(fragment_11);
+												$.component(node_18, () => Select$1.ValueText, ($$anchor, ArkSelect_ValueText) => {
+													ArkSelect_ValueText($$anchor, {});
+												});
+												var node_19 = $.sibling(node_18, 2);
+												$.component(node_19, () => Select$1.Indicator, ($$anchor, ArkSelect_Indicator) => {
+													ArkSelect_Indicator($$anchor, {
+														children: ($$anchor, $$slotProps) => {
+															var svg = root_10();
+															$.append($$anchor, svg);
+														},
+														$$slots: { default: true }
+													});
+												});
+												$.append($$anchor, fragment_11);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_10);
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_20 = $.sibling(node_16, 2);
+						$.component(node_20, () => Select$1.Positioner, ($$anchor, ArkSelect_Positioner) => {
+							ArkSelect_Positioner($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_12 = $.comment();
+									var node_21 = $.first_child(fragment_12);
+									$.component(node_21, () => Select$1.Content, ($$anchor, ArkSelect_Content) => {
+										ArkSelect_Content($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												var fragment_13 = $.comment();
+												var node_22 = $.first_child(fragment_13);
+												$.each(node_22, 17, () => $.get(sizeItems).items, (item) => item.value, ($$anchor, item) => {
+													var fragment_14 = $.comment();
+													var node_23 = $.first_child(fragment_14);
+													$.component(node_23, () => Select$1.Item, ($$anchor, ArkSelect_Item) => {
+														ArkSelect_Item($$anchor, {
+															get item() {
+																return $.get(item);
+															},
+															get value() {
+																return $.get(item).value;
+															},
+															children: ($$anchor, $$slotProps) => {
+																var fragment_15 = root_11();
+																var node_24 = $.first_child(fragment_15);
+																$.component(node_24, () => Select$1.ItemText, ($$anchor, ArkSelect_ItemText) => {
+																	ArkSelect_ItemText($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_2 = $.text();
+																			$.template_effect(() => $.set_text(text_2, $.get(item).label));
+																			$.append($$anchor, text_2);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																var node_25 = $.sibling(node_24, 2);
+																$.component(node_25, () => Select$1.ItemIndicator, ($$anchor, ArkSelect_ItemIndicator) => {
+																	ArkSelect_ItemIndicator($$anchor, {
+																		children: ($$anchor, $$slotProps) => {
+																			$.next();
+																			var text_3 = $.text("✓");
+																			$.append($$anchor, text_3);
+																		},
+																		$$slots: { default: true }
+																	});
+																});
+																$.append($$anchor, fragment_15);
+															},
+															$$slots: { default: true }
+														});
+													});
+													$.append($$anchor, fragment_14);
+												});
+												$.append($$anchor, fragment_13);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_12);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_9);
+					},
+					$$slots: { default: true }
+				});
+			});
+		}
+		var node_26 = $.sibling(node_15, 2);
+		{
+			const glyph = ($$anchor, direction = $.noop) => {
+				var svg_1 = root_12();
+				var path = $.only_child(svg_1);
+				$.template_effect(() => $.set_attribute(path, "d", direction() === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"));
+				$.append($$anchor, svg_1);
+			};
+			let $0 = $.derived(() => table.getRowCount());
+			let $1 = $.derived(() => $.get(pagination).pageIndex + 1);
+			$.component(node_26, () => Pagination.Root, ($$anchor, ArkPagination_Root) => {
+				ArkPagination_Root($$anchor, {
+					get count() {
+						return $.get($0);
+					},
+					get pageSize() {
+						return $.get(pagination).pageSize;
+					},
+					get page() {
+						return $.get($1);
+					},
+					onPageChange: (details) => table.setPageIndex(details.page - 1),
+					glyph,
+					children: ($$anchor, $$slotProps) => {
+						var fragment_17 = root_13();
+						var node_27 = $.first_child(fragment_17);
+						$.component(node_27, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
+							ArkPagination_PrevTrigger($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									glyph($$anchor, () => "start");
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_28 = $.sibling(node_27, 2);
+						{
+							const children = ($$anchor, scope = $.noop) => {
+								var fragment_19 = $.comment();
+								var node_29 = $.first_child(fragment_19);
+								$.each(node_29, 19, () => scope().pages, (page, index) => page.type === "ellipsis" ? `e${index}` : page.value, ($$anchor, page, index) => {
+									var fragment_20 = $.comment();
+									var node_30 = $.first_child(fragment_20);
+									var consequent_11 = ($$anchor) => {
+										var fragment_21 = $.comment();
+										var node_31 = $.first_child(fragment_21);
+										$.component(node_31, () => Pagination.Ellipsis, ($$anchor, ArkPagination_Ellipsis) => {
+											ArkPagination_Ellipsis($$anchor, { get index() {
+												return $.get(index);
+											} });
+										});
+										$.append($$anchor, fragment_21);
+									};
+									var alternate_3 = ($$anchor) => {
+										var fragment_22 = $.comment();
+										var node_32 = $.first_child(fragment_22);
+										$.component(node_32, () => Pagination.Item, ($$anchor, ArkPagination_Item) => {
+											ArkPagination_Item($$anchor, {
+												get value() {
+													return $.get(page).value;
+												},
+												children: ($$anchor, $$slotProps) => {
+													$.next();
+													var text_4 = $.text();
+													$.template_effect(($0) => $.set_text(text_4, $0), [() => String($.get(page).value)]);
+													$.append($$anchor, text_4);
+												},
+												$$slots: { default: true }
+											});
+										});
+										$.append($$anchor, fragment_22);
+									};
+									$.if(node_30, ($$render) => {
+										if ($.get(page).type === "ellipsis") $$render(consequent_11);
+										else $$render(alternate_3, -1);
+									});
+									$.append($$anchor, fragment_20);
+								});
+								$.append($$anchor, fragment_19);
+							};
+							$.component(node_28, () => Pagination.Context, ($$anchor, ArkPagination_Context) => {
+								ArkPagination_Context($$anchor, {
+									children,
+									$$slots: { default: true }
+								});
+							});
+						}
+						var node_33 = $.sibling(node_28, 2);
+						$.component(node_33, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
+							ArkPagination_NextTrigger($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									glyph($$anchor, () => "end");
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_17);
+					},
+					$$slots: {
+						glyph: true,
+						default: true
+					}
+				});
+			});
+		}
+		$.reset(div_17);
+		$.reset(div_16);
+		$.template_effect(($0) => $.set_text(text_1, $0), [() => `${table.getRowCount()} rows`]);
+		$.append($$anchor, div_16);
+	};
+	$.if(node_14, ($$render) => {
+		if (paginated()) $$render(consequent_12);
+	});
+	$.reset(div_3);
+	$.template_effect(($0) => {
+		styles_1 = $.set_style(div_6, "", styles_1, { "--bs-table-cols": $.get(colsTemplate) });
+		$.set_attribute(div_11, "data-merge", $.get(mergeMode) || void 0);
+		$.set_style(div_11, $0);
+	}, [() => $.get(virtualMode) ? {
+		position: "relative",
+		"block-size": `${$virtualizer().getTotalSize()}px`
+	} : void 0]);
+	$.append($$anchor, div_3);
+	$.pop();
+	$$cleanup();
+}
+$.delegate([
+	"change",
+	"click",
+	"input"
+]);
+//#endregion
+//#region src/components/table/index.ts
+/** The control recipe as a one-stop data table: sorting, filtering,
+* pinning, merging, virtualization, and drag-to-reorder behind one
+* component. The API is TanStack's own — columns ride `ColumnDef`. */
+const DataTable = DataTable$1;
+//#endregion
+export { FlexRender$1 as n, createColumnHelper as r, DataTable as t };