@dxos/react-ui-table 0.10.0 → 0.11.1

package/dist/lib/chunk-useTableModel.mjs

@@ -0,0 +1,1595 @@
+import { Atom } from "@effect-atom/atom";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { RegistryContext } from "@effect-atom/atom-react";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { ViewState, useManagerOptional, useSelection, useSelectionActions } from "@dxos/react-ui-attention";
+import { toPlaneCellIndex } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/ui-theme";
+import { Resource } from "@dxos/context";
+import { Format, Obj, Order, Query, QueryAST, Ref, Type } from "@dxos/echo";
+import { toEffectSchema } from "@dxos/echo/JsonSchema";
+import { getSnapshot } from "@dxos/echo/Obj";
+import { SchemaEx } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { EntityId } from "@dxos/keys";
+import { cellClassesForFieldType, parseValue } from "@dxos/react-ui-form";
+import { ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, formatForDisplay, formatForEditing, validateSchema } from "@dxos/schema";
+import * as Schema from "effect/Schema";
+import { accessoryHandlesPointerdownAttrs } from "@dxos/lit-grid";
+import * as Predicate from "effect/Predicate";
+import { Format as Format$1, TypeEnum } from "@dxos/echo/Format";
+//#region src/util/query-ast.ts
+/**
+* Extracts order clauses from a query AST.
+* Handles nested structures (options, order, etc.).
+*/
+var extractOrder = (queryAst) => {
+	if (queryAst.type === "order") return queryAst.order;
+	if (queryAst.type === "options") return extractOrder(queryAst.query);
+	if (queryAst.type === "from") return extractOrder(queryAst.query);
+};
+//#endregion
+//#region src/util/sort.ts
+/**
+* Gets a normalized sort value for a given value and format.
+* This ensures consistent sorting behavior across different data types.
+*/
+var getSortValue = (value, format) => {
+	if (value === void 0 || value === null) return null;
+	if (format === Format.TypeFormat.DateTime || format === Format.TypeFormat.Date) {
+		const date = new Date(value);
+		if (!isNaN(date.getTime())) return date.getTime();
+		return String(value);
+	}
+	if (format === Format.TypeFormat.Number || format === Format.TypeFormat.Integer || format === Format.TypeFormat.Currency || format === Format.TypeFormat.Percent || format === Format.TypeFormat.Duration) {
+		const num = typeof value === "number" ? value : Number(value);
+		if (!isNaN(num)) return num;
+		return String(value);
+	}
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return value;
+	return String(value);
+};
+/**
+* Compares two values for sorting based on the field format.
+* Handles dates, numbers, and strings appropriately.
+*/
+var compareValues = (aValue, bValue, format, direction) => {
+	if (aValue === void 0 || aValue === null) return bValue === void 0 || bValue === null ? 0 : 1;
+	if (bValue === void 0 || bValue === null) return -1;
+	const aSortValue = getSortValue(aValue, format);
+	const bSortValue = getSortValue(bValue, format);
+	let comparison = 0;
+	if (typeof aSortValue === "number" && typeof bSortValue === "number") comparison = aSortValue - bSortValue;
+	else if (typeof aSortValue === "string" && typeof bSortValue === "string") comparison = aSortValue.localeCompare(bSortValue);
+	else comparison = String(aSortValue).localeCompare(String(bSortValue));
+	return direction === "desc" ? -comparison : comparison;
+};
+//#endregion
+//#region src/util/table-buttons.ts
+var BUTTON_IDENTIFIERS = {
+	columnSettings: "data-table-column-settings-button",
+	newColumn: "data-table-new-column-button",
+	referencedCell: "data-table-ref-cell-button",
+	rowMenu: "data-table-row-menu-button",
+	saveDraftRow: "data-table-save-draft-row-button",
+	sort: "data-table-sort-button"
+};
+var createButton = ({ attr, data, disabled = false, icon, testId, type: _type = "primary" }) => {
+	return `<div role="none" class="dx-grid__cell__block"><button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ")} ${disabled ? "disabled" : ""} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button></div>`;
+};
+var addColumnButton = {
+	attr: BUTTON_IDENTIFIERS.newColumn,
+	icon: "ph--plus--regular",
+	render: ({ disabled }) => {
+		return createButton({
+			attr: BUTTON_IDENTIFIERS.newColumn,
+			icon: addColumnButton.icon,
+			disabled,
+			data: {},
+			testId: "table-new-column-button"
+		});
+	},
+	getData: (_el) => ({ type: "newColumn" })
+};
+var columnSettingsButton = {
+	attr: BUTTON_IDENTIFIERS.columnSettings,
+	icon: "ph--caret-down--regular",
+	render: ({ fieldId }) => {
+		return createButton({
+			attr: BUTTON_IDENTIFIERS.columnSettings,
+			icon: columnSettingsButton.icon,
+			data: {
+				"data-field-id": fieldId,
+				"data-variant": "ghost"
+			},
+			testId: "table-column-settings-button"
+		});
+	},
+	getData: (el) => ({
+		type: "columnSettings",
+		fieldId: el.getAttribute("data-field-id")
+	})
+};
+var rowMenuButton = {
+	attr: BUTTON_IDENTIFIERS.rowMenu,
+	icon: "ph--dots-three--regular",
+	render: ({ rowIndex }) => {
+		return createButton({
+			attr: BUTTON_IDENTIFIERS.rowMenu,
+			icon: rowMenuButton.icon,
+			data: { "data-row-index": rowIndex.toString() },
+			testId: "table-row-menu-button"
+		});
+	},
+	getData: (el) => ({
+		type: "rowMenu",
+		rowIndex: Number(el.getAttribute("data-row-index"))
+	})
+};
+var sortButton = {
+	attr: BUTTON_IDENTIFIERS.sort,
+	icon: "ph--sort-ascending--regular",
+	render: ({ fieldId, direction }) => {
+		return createButton({
+			attr: BUTTON_IDENTIFIERS.sort,
+			icon: direction === "desc" ? "ph--sort-descending--regular" : "ph--sort-ascending--regular",
+			data: {
+				"data-field-id": fieldId,
+				"data-direction": direction ?? ""
+			},
+			testId: "table-sort-button",
+			type: "secondary"
+		});
+	},
+	getData: (el) => ({
+		type: "sort",
+		fieldId: el.getAttribute("data-field-id"),
+		direction: el.getAttribute("data-direction")
+	})
+};
+var saveDraftRowButton = {
+	attr: BUTTON_IDENTIFIERS.saveDraftRow,
+	icon: "ph--floppy-disk--regular",
+	render: ({ rowIndex, disabled }) => {
+		return createButton({
+			attr: BUTTON_IDENTIFIERS.saveDraftRow,
+			icon: saveDraftRowButton.icon,
+			disabled,
+			data: {
+				"data-row-index": rowIndex.toString(),
+				"data-variant": "primary"
+			},
+			testId: "table-save-draft-row-button"
+		});
+	},
+	getData: (el) => ({
+		type: "saveDraftRow",
+		rowIndex: Number(el.getAttribute("data-row-index"))
+	})
+};
+var tableButtons = {
+	addColumn: addColumnButton,
+	columnSettings: columnSettingsButton,
+	rowMenu: rowMenuButton,
+	saveDraftRow: saveDraftRowButton,
+	sort: sortButton
+};
+//#endregion
+//#region src/util/table-controls.ts
+var CONTROL_IDENTIFIERS = {
+	checkbox: "data-table-checkbox",
+	switch: "data-table-switch"
+};
+var BASE_CLASSES = {
+	checkbox: "dx-checkbox",
+	switch: "dx-checkbox--switch"
+};
+var renderAttributes = (data) => {
+	return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
+};
+var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
+	return `<div role="none" class="dx-grid__cell__block"><input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? "onclick=\"return false\"" : ""} ${disabled ? "disabled" : ""} data-testid="${testId}" data-dx-grid-action="accessory"/></div>`;
+};
+var CheckboxComponent = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+	const attrs = {
+		[CONTROL_IDENTIFIERS.checkbox]: "",
+		"data-row-index": rowIndex.toString(),
+		...header && { "data-header": "" }
+	};
+	return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
+};
+var SwitchComponent = ({ colIndex, rowIndex, plane, checked = false, disabled = false }) => {
+	const attrs = {
+		[CONTROL_IDENTIFIERS.switch]: "",
+		"data-row-index": rowIndex.toString(),
+		"data-col-index": colIndex.toString(),
+		"data-plane": plane,
+		...accessoryHandlesPointerdownAttrs
+	};
+	return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
+};
+var tableControls = {
+	checkbox: {
+		attr: CONTROL_IDENTIFIERS.checkbox,
+		render: CheckboxComponent,
+		getData: (el) => ({
+			type: "checkbox",
+			rowIndex: Number(el.getAttribute("data-row-index")),
+			header: el.hasAttribute("data-header")
+		})
+	},
+	switch: {
+		attr: CONTROL_IDENTIFIERS.switch,
+		render: SwitchComponent,
+		getData: (el) => ({
+			type: "switch",
+			rowIndex: Number(el.getAttribute("data-row-index")),
+			colIndex: Number(el.getAttribute("data-col-index")),
+			plane: el.getAttribute("data-plane") ?? "grid"
+		})
+	}
+};
+//#endregion
+//#region src/util/tag.ts
+/**
+* Regex pattern for matching tags in the format [Label](id)
+*/
+var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+/**
+* Extracts tag IDs from a string in the format [Label](id)
+* @param value The string to extract IDs from
+* @returns Array of extracted IDs or undefined if no matches or value is not a string
+*/
+var extractTagIds = (value) => {
+	if (typeof value !== "string") return;
+	const ids = [];
+	let match;
+	while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) if (match[2]) ids.push(match[2]);
+	return ids.length > 0 ? ids : void 0;
+};
+//#endregion
+//#region src/model/selection-model.ts
+var SelectionModel = class extends Resource {
+	_registry;
+	_rows;
+	_selection;
+	_validSelectedIds;
+	_hasSelection;
+	_allSelected;
+	_selectionMode;
+	_onSelectionChanged;
+	constructor(registry, rows, selectionMode, initialSelection, onSelectionChanged) {
+		super();
+		this._registry = registry;
+		this._rows = rows;
+		this._selectionMode = selectionMode;
+		this._onSelectionChanged = onSelectionChanged;
+		this._selection = Atom.make(new Set(initialSelection));
+		this._validSelectedIds = Atom.make((get) => {
+			const rows = get(this._rows);
+			if (!rows) return /* @__PURE__ */ new Set();
+			const validIds = new Set(rows.map((row) => row.id));
+			const selection = get(this._selection);
+			return new Set([...selection].filter((id) => validIds.has(id)));
+		});
+		this._hasSelection = Atom.make((get) => get(this._validSelectedIds).size > 0);
+		this._allSelected = Atom.make((get) => {
+			const rows = get(this._rows);
+			if (rows.length === 0) return false;
+			const selection = get(this._selection);
+			return rows.every((row) => selection.has(row.id));
+		});
+	}
+	async _open() {
+		const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
+			this._onSelectionChanged?.();
+		});
+		this._ctx.onDispose(selectionUnsubscribe);
+	}
+	/** Get the selection atom for reactive access. */
+	get selectionAtom() {
+		return this._selection;
+	}
+	/** Get the current selection value. */
+	get selection() {
+		return this._registry.get(this._selection);
+	}
+	/** Get the hasSelection atom for reactive access. */
+	get hasSelectionAtom() {
+		return this._hasSelection;
+	}
+	/** Check if there is any selection. */
+	get hasSelection() {
+		return this._registry.get(this._hasSelection);
+	}
+	/** Get the allRowsSelected atom for reactive access. */
+	get allRowsSelectedAtom() {
+		return this._allSelected;
+	}
+	/** Check if all rows are selected. */
+	get allRowsSelected() {
+		return this._registry.get(this._allSelected);
+	}
+	get selectionMode() {
+		return this._selectionMode;
+	}
+	getSelectedRows = () => {
+		const selectedIds = this._registry.get(this._validSelectedIds);
+		return this._registry.get(this._rows).filter((row) => selectedIds.has(row.id));
+	};
+	isRowIndexSelected = (rowIndex) => {
+		const row = this._registry.get(this._rows)[rowIndex];
+		return this._registry.get(this._selection).has(row.id);
+	};
+	isObjectSelected = (object) => {
+		return this._registry.get(this._selection).has(object.id);
+	};
+	toggleSelectionForRowIndex = (rowIndex) => {
+		const row = this._registry.get(this._rows)[rowIndex];
+		const currentSelection = this._registry.get(this._selection);
+		const newSelection = new Set(currentSelection);
+		if (newSelection.has(row.id)) newSelection.delete(row.id);
+		else {
+			if (this._selectionMode === "single") newSelection.clear();
+			newSelection.add(row.id);
+		}
+		this._registry.set(this._selection, newSelection);
+	};
+	setSelection = (mode) => {
+		switch (mode) {
+			case "all":
+				this._registry.set(this._selection, new Set(this._registry.get(this._rows).map((row) => row.id)));
+				break;
+			case "none":
+				this._registry.set(this._selection, /* @__PURE__ */ new Set());
+				break;
+		}
+	};
+};
+//#endregion
+//#region src/model/table-view-state.ts
+/**
+* Field sort configuration.
+*/
+var FieldSortSchema = Schema.Struct({
+	fieldId: Schema.String,
+	direction: QueryAST.OrderDirection
+});
+/**
+* Per-user column sort, scoped to a table by its object URI. Stored in the `local` backend so a
+* viewer's chosen sort survives remounts and reloads without writing to the shared view query
+* (which `TableModel.saveView` does explicitly).
+*/
+var tableSortAspect = ViewState.define({
+	key: "table-sort",
+	backend: "local",
+	schema: Schema.UndefinedOr(FieldSortSchema),
+	defaultValue: () => void 0
+});
+//#endregion
+//#region src/model/table-model.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+/**
+* Creates a change callback for ECHO-backed table and rows.
+* Use this when the table and rows are stored in the ECHO database.
+*/
+var createEchoChangeCallback$1 = (table) => ({
+	table: (mutate) => Obj.update(table, (table) => mutate(table)),
+	row: (row, mutate) => {
+		if (Obj.isObject(row)) Obj.update(row, (row) => mutate(row));
+		else mutate(row);
+	}
+});
+/**
+* Creates a change callback that directly mutates objects without wrapping.
+* Use this for plain JavaScript objects (tests, non-ECHO scenarios).
+*/
+var createDirectChangeCallback = (table) => ({
+	table: (mutate) => mutate(table),
+	row: (row, mutate) => mutate(row)
+});
+var defaultFeatures = {
+	selection: {
+		enabled: true,
+		mode: "multiple"
+	},
+	dataEditable: false,
+	schemaEditable: false,
+	pinColumns: 0
+};
+var TableModel = class extends Resource {
+	_registry;
+	_object;
+	_projection;
+	_db;
+	_change;
+	_visibleRange;
+	_onInsertRow;
+	_onDeleteRows;
+	_onColumnDelete;
+	_onCellUpdate;
+	_onRowOrderChange;
+	_onRowAction;
+	_rowActions;
+	_features;
+	_rows;
+	_draftRows;
+	_viewState;
+	_inMemorySort;
+	_persistedSort;
+	_sorting;
+	_sortedRows;
+	_viewDirty;
+	_pinnedRows;
+	_selection;
+	_columnMeta;
+	_cellUpdateCounter;
+	constructor({ registry, object, projection, db, viewState, change, features = {}, initialSelection = [], pinnedRows = {
+		top: [],
+		bottom: []
+	}, rowActions = [], onCellUpdate, onColumnDelete, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
+		super();
+		this._registry = registry;
+		this._object = object;
+		this._viewState = viewState;
+		this._projection = projection;
+		this._projection.normalizeView();
+		this._db = db;
+		this._change = change ?? createEchoChangeCallback$1(object);
+		this._features = {
+			...defaultFeatures,
+			...features
+		};
+		invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 208,
+			S: this,
+			A: ["!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')", "'Single selection is not compatible with editable tables.'"]
+		});
+		this._visibleRange = Atom.make({
+			start: {
+				row: 0,
+				col: 0
+			},
+			end: {
+				row: 0,
+				col: 0
+			}
+		});
+		this._rows = Atom.make([]);
+		this._draftRows = Atom.make([]);
+		this._inMemorySort = this._viewState ? this._viewState.atom(tableSortAspect, this.id) : Atom.make(void 0);
+		this._cellUpdateCounter = Atom.make(0);
+		this._persistedSort = Atom.make((get) => {
+			const view = get(this._object.view.atom);
+			if (!view) return;
+			const ast = Obj.getSnapshot(view).query.ast;
+			const orders = extractOrder(ast);
+			if (orders && orders.length > 0) {
+				const firstOrder = orders[0];
+				if (firstOrder.kind === "property") {
+					const field = this._projection.getFields().find((f) => f.path === firstOrder.property);
+					if (field) return {
+						fieldId: field.id,
+						direction: firstOrder.direction
+					};
+				}
+			}
+		});
+		this._sorting = Atom.make((get) => {
+			return get(this._inMemorySort) ?? get(this._persistedSort);
+		});
+		this._sortedRows = Atom.make((get) => {
+			const rows = get(this._rows);
+			const sort = get(this._sorting);
+			if (!sort || rows.length === 0) return rows;
+			const field = this._projection.getFields().find((f) => f.id === sort.fieldId);
+			if (!field) return rows;
+			const fieldProjection = this._projection.getFieldProjection(field.id);
+			return [...rows].sort((a, b) => {
+				return compareValues(SchemaEx.getValue(a, field.path), SchemaEx.getValue(b, field.path), fieldProjection.props.format, sort.direction);
+			});
+		});
+		this._selection = new SelectionModel(this._registry, this._sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
+		this._viewDirty = Atom.make((get) => {
+			const inMemorySort = get(this._inMemorySort);
+			if (!inMemorySort) return false;
+			const persisted = get(this._persistedSort);
+			if (!persisted) return true;
+			return inMemorySort.fieldId !== persisted.fieldId || inMemorySort.direction !== persisted.direction;
+		});
+		this._pinnedRows = pinnedRows;
+		this._rowActions = rowActions;
+		this._onInsertRow = onInsertRow;
+		this._onDeleteRows = onDeleteRows;
+		this._onColumnDelete = onColumnDelete;
+		this._onCellUpdate = onCellUpdate;
+		this._onRowOrderChange = onRowOrderChange;
+		this._onRowAction = onRowAction;
+	}
+	get id() {
+		return Obj.getURI(this._object);
+	}
+	get view() {
+		const view = this._object.view.target;
+		invariant(view, "Table model not initialized", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 328,
+			S: this,
+			A: ["view", "'Table model not initialized'"]
+		});
+		return view;
+	}
+	get table() {
+		return this._object;
+	}
+	get projection() {
+		return this._projection;
+	}
+	get db() {
+		return this._db;
+	}
+	/**
+	* Atom for reactive access to rows with in-memory sorting applied.
+	*/
+	get rows() {
+		return this._sortedRows;
+	}
+	/**
+	* Gets rows with in-memory sorting applied.
+	* In-memory sort is local to this instance until saved.
+	*/
+	getRows() {
+		return this._registry.get(this._sortedRows);
+	}
+	/** Atom for reactive access to cell changes. */
+	get cellUpdate() {
+		return this._cellUpdateCounter;
+	}
+	/**
+	* Reports the grid's currently-visible cell range (called by the presentation from `getCells`). Drives the
+	* per-row subscriptions that keep cells reactive to external mutations, so it must be wired for the grid to
+	* reflect edits made outside it. Guarded so identical ranges don't churn the subscriptions.
+	*/
+	setVisibleRange(range) {
+		const current = this._registry.get(this._visibleRange);
+		if (current.start.row === range.start.row && current.end.row === range.end.row && current.start.col === range.start.col && current.end.col === range.end.col) return;
+		this._registry.set(this._visibleRange, range);
+	}
+	/**
+	* Change a row using the configured change callback.
+	* Use this instead of directly mutating to ensure consistent mutation handling.
+	*/
+	changeRow(row, mutate) {
+		this._change.row(row, mutate);
+	}
+	get features() {
+		return this._features;
+	}
+	/**
+	* Number of leading data columns pinned (frozen), clamped to the available field count.
+	*/
+	get pinColumns() {
+		const fieldCount = this.getColumnCount();
+		return Math.max(0, Math.min(this._features.pinColumns, fieldCount));
+	}
+	/**
+	* Number of frozen-start columns preceding the pinned data columns (the selection column, if enabled).
+	*/
+	get selectionColumns() {
+		return this._features.selection.enabled ? 1 : 0;
+	}
+	/**
+	* Total number of columns rendered in the `frozenColsStart` plane: the selection column (if enabled)
+	* plus the pinned data columns. Single source of truth for the frozen-start boundary.
+	*/
+	get frozenColsStart() {
+		return this.selectionColumns + this.pinColumns;
+	}
+	/**
+	* Maps a plane-local column index to a field index for the data-bearing planes.
+	* Returns undefined for non-data columns (e.g. the selection or action columns).
+	*
+	* Column layout across planes:
+	* - `frozenColsStart`: [selection?] then the first `pinColumns` data fields.
+	* - `grid` / `frozenRowsStart` / `frozenRowsEnd`: data fields starting at index `pinColumns`.
+	*/
+	getFieldIndex(plane, planeCol) {
+		switch (plane) {
+			case "frozenColsStart":
+			case "fixedStartStart":
+			case "fixedEndStart": {
+				const dataCol = planeCol - this.selectionColumns;
+				if (dataCol < 0 || dataCol >= this.pinColumns) return;
+				return dataCol;
+			}
+			case "grid":
+			case "frozenRowsStart":
+			case "frozenRowsEnd": return this.pinColumns + planeCol;
+			default: return;
+		}
+	}
+	/**
+	* Gets the current sort state.
+	* Priority: in-memory sort (local changes) > persisted sort (from query AST).
+	*/
+	getSorting() {
+		return this._registry.get(this._sorting);
+	}
+	/**
+	* Gets the row data at the specified display index.
+	*/
+	getRowAt(displayIndex) {
+		const sortedRows = this._registry.get(this._sortedRows);
+		if (displayIndex < 0 || displayIndex >= sortedRows.length) return;
+		return sortedRows[displayIndex];
+	}
+	get pinnedRows() {
+		return this._pinnedRows;
+	}
+	get columnMeta() {
+		invariant(this._columnMeta, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 470,
+			S: this,
+			A: ["this._columnMeta", ""]
+		});
+		return this._columnMeta;
+	}
+	get selection() {
+		return this._selection;
+	}
+	get rowActions() {
+		return this._rowActions;
+	}
+	async _open() {
+		await this._object.view.load();
+		this.initializeColumnMeta();
+		this.initializeEffects();
+		await this._selection.open(this._ctx);
+	}
+	initializeColumnMeta() {
+		invariant(this._object.view.target, "View must be loaded before initializing column meta", {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 494,
+			S: this,
+			A: ["this._object.view.target", "'View must be loaded before initializing column meta'"]
+		});
+		this._columnMeta = Atom.make((get) => {
+			const fields = get(this._projection.fields);
+			const pin = this.pinColumns;
+			const selectionColumns = this.selectionColumns;
+			const fieldSize = (field) => ({
+				size: this.table.sizes[field.path] ?? 256,
+				resizeable: true
+			});
+			const grid = Object.fromEntries(fields.slice(pin).map((field, index) => [index, fieldSize(field)]));
+			const frozenColsStart = {};
+			if (selectionColumns > 0) frozenColsStart[0] = {
+				size: 32,
+				resizeable: false
+			};
+			fields.slice(0, pin).forEach((field, index) => {
+				frozenColsStart[selectionColumns + index] = fieldSize(field);
+			});
+			return {
+				grid,
+				frozenColsStart,
+				frozenColsEnd: { 0: {
+					size: 32,
+					resizeable: false
+				} }
+			};
+		});
+	}
+	initializeEffects() {
+		const rowsUnsubscribe = this._registry.subscribe(this._rows, () => {
+			this._onRowOrderChange?.();
+		});
+		this._ctx.onDispose(rowsUnsubscribe);
+		const rowSubscriptions = /* @__PURE__ */ new Map();
+		const subscribeVisibleRows = () => {
+			for (const [id, unsub] of rowSubscriptions) {
+				unsub();
+				rowSubscriptions.delete(id);
+			}
+			const { start, end } = this._registry.get(this._visibleRange);
+			const sortedRows = this._registry.get(this._sortedRows);
+			for (let row = start.row; row <= end.row && row < sortedRows.length; row++) {
+				const obj = sortedRows[row];
+				if (Obj.isObject(obj) && !rowSubscriptions.has(obj.id)) {
+					const cell = {
+						row,
+						col: start.col,
+						plane: "grid"
+					};
+					const unsub = Obj.subscribe(obj, () => {
+						this._registry.set(this._cellUpdateCounter, this._registry.get(this._cellUpdateCounter) + 1);
+						this._onCellUpdate?.(cell);
+					});
+					rowSubscriptions.set(obj.id, unsub);
+				}
+			}
+		};
+		const visibleRangeUnsubscribe = this._registry.subscribe(this._visibleRange, subscribeVisibleRows);
+		const sortedRowsUnsubscribe = this._registry.subscribe(this._sortedRows, subscribeVisibleRows);
+		this._ctx.onDispose(() => {
+			visibleRangeUnsubscribe();
+			sortedRowsUnsubscribe();
+			for (const unsub of rowSubscriptions.values()) unsub();
+		});
+		const draftRowsUnsubscribe = this._registry.subscribe(this._draftRows, () => {
+			this._onRowOrderChange?.();
+		});
+		this._ctx.onDispose(draftRowsUnsubscribe);
+	}
+	setRows = (obj) => {
+		this._registry.set(this._rows, obj);
+	};
+	getRowCount = () => this._registry.get(this._sortedRows).length;
+	getDraftRowCount() {
+		return this._registry.get(this._draftRows).length;
+	}
+	/** Atom for reactive access to draft rows. */
+	get draftRows() {
+		return this._draftRows;
+	}
+	/** Gets the current draft rows. */
+	getDraftRows() {
+		return this._registry.get(this._draftRows);
+	}
+	/**
+	* Checks if a specific field path has validation errors for a given draft row.
+	* @param draftRowIndex - The index of the draft row to check
+	* @param fieldPath - The path of the field to check for validation errors
+	* @returns true if the field has validation errors, false otherwise
+	*/
+	hasDraftRowValidationError(draftRowIndex, fieldPath) {
+		if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) return false;
+		return (this._registry.get(this._draftRows)[draftRowIndex].validationErrors || []).some((error) => error.path === fieldPath);
+	}
+	getColumnCount = () => this._projection?.getFields().length ?? 0;
+	insertRow = () => {
+		const result = this._onInsertRow?.();
+		if (result === "draft" && this._registry.get(this._draftRows).length === 0) this.createDraftRow();
+		return result ?? "final";
+	};
+	createDraftRow() {
+		if (!this._projection) return;
+		const draftData = { id: EntityId.random() };
+		const validationErrors = this.validateDraftRowData(draftData);
+		const draftRow = {
+			data: draftData,
+			valid: validationErrors.length === 0,
+			validationErrors
+		};
+		this._registry.set(this._draftRows, [...this._registry.get(this._draftRows), draftRow]);
+	}
+	validateDraftRow(draftRowIndex) {
+		if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) return;
+		const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
+		const validationErrors = this.validateDraftRowData(draftRow.data);
+		const updatedDraftRow = {
+			...draftRow,
+			valid: validationErrors.length === 0,
+			validationErrors
+		};
+		const newDraftRows = [...this._registry.get(this._draftRows)];
+		newDraftRows[draftRowIndex] = updatedDraftRow;
+		this._registry.set(this._draftRows, newDraftRows);
+	}
+	validateDraftRowData(data) {
+		return validateSchema(toEffectSchema(this._projection.baseSchema), data) || [];
+	}
+	commitDraftRow = (draftRowIndex) => {
+		if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) return false;
+		const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
+		if (!draftRow.valid) return false;
+		const insertRowResult = this._onInsertRow?.(draftRow.data);
+		if (insertRowResult === "final") {
+			const newDraftRows = this._registry.get(this._draftRows).filter((_, index) => index !== draftRowIndex);
+			this._registry.set(this._draftRows, newDraftRows);
+		}
+		return insertRowResult === "final";
+	};
+	deleteRow = (rowIndex) => {
+		const obj = this._registry.get(this._sortedRows)[rowIndex];
+		const objectsToDelete = [];
+		if (this.features.selection.enabled && this._selection.hasSelection) {
+			const selectedRows = this._selection.getSelectedRows();
+			objectsToDelete.push(...selectedRows);
+		} else if (obj) objectsToDelete.push(obj);
+		if (objectsToDelete.length > 0) this._onDeleteRows?.(rowIndex, objectsToDelete);
+	};
+	handleRowAction = (actionId, rowIndex) => {
+		if (!this._onRowAction) return;
+		const data = this._registry.get(this._sortedRows)[rowIndex];
+		if (data) this._onRowAction(actionId, data);
+	};
+	getCellData = (cell) => {
+		const { col, row, plane } = cell;
+		const fields = this._projection?.getFields() ?? [];
+		const fieldIndex = this.getFieldIndex(plane, col);
+		if (fieldIndex === void 0 || fieldIndex < 0 || fieldIndex >= fields.length) return;
+		const field = fields[fieldIndex];
+		let value;
+		if (plane === "frozenRowsEnd") if (row >= 0 && row < this._registry.get(this._draftRows).length) value = SchemaEx.getValue(this._registry.get(this._draftRows)[row].data, field.path);
+		else return;
+		else {
+			const sortedRows = this._registry.get(this._sortedRows);
+			value = SchemaEx.getValue(sortedRows[row], field.path);
+		}
+		if (value == null) return "";
+		const { props } = this._projection.getFieldProjection(field.id);
+		switch (props.format) {
+			case Format.TypeFormat.Ref:
+				if (!field.referencePath) return "";
+				return SchemaEx.getValue(value.target, field.referencePath);
+			default: return formatForEditing({
+				type: props.type,
+				format: props.format,
+				value
+			});
+		}
+	};
+	validateCellData = async ({ col, row, plane }, value) => {
+		const fields = this._projection?.getFields() ?? [];
+		const fieldIndex = this.getFieldIndex(plane, col);
+		if (fieldIndex === void 0 || fieldIndex < 0 || fieldIndex >= fields.length) return {
+			valid: false,
+			error: "Invalid column index"
+		};
+		const field = fields[fieldIndex];
+		const { props } = this._projection.getFieldProjection(field.id);
+		const transformedValue = editorTextToCellValue(props, value);
+		if (plane === "frozenRowsEnd") {
+			if (row < 0 || row >= this._registry.get(this._draftRows).length) return {
+				valid: false,
+				error: "Invalid draft row index"
+			};
+			const snapshot = { ...this._registry.get(this._draftRows)[row].data };
+			SchemaEx.setValue(snapshot, field.path, transformedValue);
+			const validationErrors = this.validateDraftRowData(snapshot);
+			if (validationErrors.length > 0) {
+				const error = validationErrors.find((err) => err.path === field.path);
+				if (error) return {
+					valid: false,
+					error: error.message
+				};
+			}
+			return { valid: true };
+		} else {
+			const currentRow = this._registry.get(this._rows)[row];
+			invariant(currentRow, "Invalid row index", {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 813,
+				S: this,
+				A: ["currentRow", "'Invalid row index'"]
+			});
+			const snapshot = { ...getSnapshot(currentRow) };
+			SchemaEx.setValue(snapshot, field.path, transformedValue);
+			const type = Obj.getType(currentRow);
+			invariant(type, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 820,
+				S: this,
+				A: ["type", ""]
+			});
+			const validationResult = validateSchema(Type.getSchema(type), snapshot);
+			if (validationResult && validationResult.length > 0) {
+				const error = validationResult.find((err) => err.path === field.path);
+				if (error) return {
+					valid: false,
+					error: error.message
+				};
+			}
+			return { valid: true };
+		}
+	};
+	setCellData = (cell, value) => {
+		const { col, row, plane } = cell;
+		const fields = this._projection?.getFields() ?? [];
+		const fieldIndex = this.getFieldIndex(plane, col);
+		if (fieldIndex === void 0 || fieldIndex < 0 || fieldIndex >= fields.length) return;
+		const field = fields[fieldIndex];
+		const { props } = this._projection.getFieldProjection(field.id);
+		const transformedValue = editorTextToCellValue(props, value);
+		if (props.format === Format.TypeFormat.Ref && !Obj.isObject(value)) return;
+		if (plane === "frozenRowsEnd") {
+			if (row >= 0 && row < this._registry.get(this._draftRows).length) {
+				SchemaEx.setValue(this._registry.get(this._draftRows)[row].data, field.path, transformedValue);
+				this.validateDraftRow(row);
+			}
+		} else {
+			const rowData = this._registry.get(this._sortedRows)[row];
+			this._change.row(rowData, (mutableRow) => {
+				SchemaEx.setValue(mutableRow, field.path, transformedValue);
+			});
+		}
+	};
+	/**
+	* Updates a cell's value using a transform function.
+	* @param {DxGridPlanePosition} position - The position of the cell to update.
+	* @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
+	*/
+	updateCellData({ col, row, plane = "grid" }, update) {
+		const fields = this._projection?.getFields() ?? [];
+		const fieldIndex = this.getFieldIndex(plane, col);
+		if (fieldIndex === void 0 || fieldIndex < 0 || fieldIndex >= fields.length) return;
+		const field = fields[fieldIndex];
+		const rowData = this._registry.get(this._sortedRows)[row];
+		const updatedValue = update(SchemaEx.getValue(rowData, field.path));
+		this._change.row(rowData, (mutableRow) => {
+			SchemaEx.setValue(mutableRow, field.path, updatedValue);
+		});
+	}
+	/**
+	* Gets the domain-appropriate cell type for a given cell position.
+	* This abstracts away the low-level grid plane concepts and provides domain-specific types.
+	* @param cell - The cell position to classify
+	* @returns The domain-appropriate cell type
+	*/
+	getCellType(cell) {
+		switch (cell.plane) {
+			case "frozenRowsEnd": return "draft";
+			case "frozenRowsStart": return "header";
+			default: return "standard";
+		}
+	}
+	/**
+	* Convenience method to check if a cell is a draft cell.
+	* @param cell - The cell position to check
+	* @returns true if the cell is a draft cell, false otherwise
+	*/
+	isDraftCell(cell) {
+		return this.getCellType(cell) === "draft";
+	}
+	deleteColumn(fieldId) {
+		if (!this._projection) return;
+		const field = this._projection?.getFields().find((field) => field.id === fieldId);
+		if (field && this._onColumnDelete) this._onColumnDelete(field.id);
+	}
+	setColumnWidth(columnIndex, width, plane = "grid") {
+		const fields = this._projection?.getFields() ?? [];
+		const fieldIndex = this.getFieldIndex(plane, columnIndex);
+		if (fieldIndex !== void 0 && fieldIndex < fields.length) {
+			const newWidth = Math.max(0, width);
+			const field = fields[fieldIndex];
+			if (field) this._change.table((mutableTable) => {
+				mutableTable.sizes[field.path] = newWidth;
+			});
+		}
+	}
+	pinRow(rowIndex, side) {
+		this._pinnedRows[side].push(rowIndex);
+	}
+	unpinRow(rowIndex) {
+		this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+		this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+	}
+	/**
+	* Sets the sort order for a field in-memory (local to this instance).
+	* Use saveView() to persist the sort to the view query.
+	*/
+	setSort(fieldId, direction) {
+		if (!this._projection.getFields().find((f) => f.id === fieldId)) return;
+		this._writeSort({
+			fieldId,
+			direction
+		});
+	}
+	/**
+	* Writes the per-user sort, routing through the ViewState.Manager (so the `local` backend persists)
+	* when one is configured, otherwise updating the ephemeral atom directly.
+	*/
+	_writeSort(value) {
+		if (this._viewState) this._viewState.set(tableSortAspect, this.id, value);
+		else this._registry.set(this._inMemorySort, value);
+	}
+	/**
+	* Toggles the sort direction for a field in-memory.
+	*/
+	toggleSort(fieldId) {
+		const currentSort = this.getSorting();
+		if (!currentSort || currentSort.fieldId !== fieldId) {
+			this.setSort(fieldId, "asc");
+			return;
+		}
+		const newDirection = currentSort.direction === "asc" ? "desc" : "asc";
+		this.setSort(fieldId, newDirection);
+	}
+	/**
+	* Clears the in-memory sort order.
+	*/
+	clearSort() {
+		this._writeSort(void 0);
+	}
+	/**
+	* Saves the current in-memory sort to the view query AST.
+	* This persists the sort so it becomes the default for all viewers.
+	*/
+	saveView() {
+		const view = this.view;
+		const inMemorySort = this._registry.get(this._inMemorySort);
+		const viewSnapshot = Obj.getSnapshot(view);
+		const currentQuery = Query.fromAst(viewSnapshot.query.ast);
+		const baseQuery = this._getBaseQuery(currentQuery);
+		if (inMemorySort) {
+			const field = this._projection.getFields().find((f) => f.id === inMemorySort.fieldId);
+			if (field) {
+				const newQuery = baseQuery.orderBy(Order.property(field.path, inMemorySort.direction));
+				Obj.update(view, (view) => {
+					view.query.ast = newQuery.ast;
+				});
+			}
+		} else Obj.update(view, (view) => {
+			view.query.ast = baseQuery.ast;
+		});
+		this._writeSort(void 0);
+	}
+	/**
+	* Extracts the base query without order clauses.
+	*/
+	_getBaseQuery(query) {
+		const ast = query.ast;
+		if (ast.type === "order") return Query.fromAst(ast.query);
+		return query;
+	}
+	/**
+	* Checks if the view has unsaved changes (in-memory sort differs from persisted sort).
+	*/
+	getViewDirty() {
+		return this._registry.get(this._viewDirty);
+	}
+};
+var editorTextToCellValue = (props, value) => {
+	switch (props.format) {
+		case Format.TypeFormat.Ref: if (Obj.isObject(value)) return Ref.make(value);
+		else return value;
+		case Format.TypeFormat.SingleSelect: {
+			const ids = extractTagIds(value);
+			if (ids && ids.length > 0) return ids[0];
+			else return value;
+		}
+		case Format.TypeFormat.MultiSelect: return extractTagIds(value) || value;
+		default: return parseValue({
+			type: props.type,
+			format: props.format,
+			value
+		});
+	}
+};
+//#endregion
+//#region src/model/table-presentation.ts
+/**
+* Presentation layer for a table component, handling cell rendering and grid display logic.
+* Manages rendering of table cells, headers, selection columns, and action columns across
+* different grid planes.
+*/
+var TablePresentation = class {
+	model;
+	_registry;
+	fieldProjectionCache = /* @__PURE__ */ new Map();
+	constructor(registry, model) {
+		this.model = model;
+		this._registry = registry;
+	}
+	getCells(range, plane) {
+		this.fieldProjectionCache.clear();
+		let cells;
+		switch (plane) {
+			case "grid":
+				this.model.setVisibleRange(range);
+				cells = this.getMainGridCells(range);
+				break;
+			case "frozenRowsStart":
+				cells = this.getHeaderCells(range);
+				break;
+			case "frozenColsStart":
+				cells = this.getFrozenColsStartCells(range);
+				break;
+			case "frozenColsEnd":
+				cells = this.getActionColumnCells(range);
+				break;
+			case "fixedStartStart":
+				cells = this.getFixedStartStartCells();
+				break;
+			case "fixedStartEnd":
+				cells = this.getNewColumnCell();
+				break;
+			case "frozenRowsEnd":
+				cells = this.getDraftRowCells(range);
+				break;
+			case "fixedEndStart":
+				cells = this.getFixedEndStartCells(range);
+				break;
+			case "fixedEndEnd":
+				cells = this.getDraftActionCells(range);
+				break;
+			default: cells = {};
+		}
+		if (plane === "grid" && this.model.features.dataEditable === false) Object.values(cells).forEach((cell) => {
+			cell.readonly = "text-select";
+		});
+		return cells;
+	}
+	/**
+	* Gets a field projection, using cache if available within the current render pass.
+	*/
+	getFieldProjection(fieldId) {
+		let projection = this.fieldProjectionCache.get(fieldId);
+		if (!projection) {
+			projection = this.model.projection.getFieldProjection(fieldId);
+			this.fieldProjectionCache.set(fieldId, projection);
+		}
+		return projection;
+	}
+	createDataCell(cells, obj, field, colIndex, displayIndex, plane = "grid") {
+		const { props } = this.getFieldProjection(field.id);
+		const cell = { get value() {
+			const value = SchemaEx.getValue(obj, field.path);
+			if (value == null) return "";
+			if (props.type === "array") return "";
+			switch (props.format) {
+				case Format$1.TypeFormat.Boolean:
+				case Format$1.TypeFormat.SingleSelect:
+				case Format$1.TypeFormat.MultiSelect: return "";
+				case Format$1.TypeFormat.Ref:
+					if (!field.referencePath) return "";
+					return SchemaEx.getValue(value.target, field.referencePath);
+				default: return formatForDisplay({
+					type: props.type,
+					format: props.format,
+					value
+				});
+			}
+		} };
+		const classes = [];
+		const formatClasses = cellClassesForFieldType(props);
+		if (formatClasses) classes.push(formatClasses);
+		const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
+		if (rowSelectionClasses) classes.push(rowSelectionClasses);
+		cell.className = mx(classes);
+		if (props.type === TypeEnum.Array) {
+			const targetArray = SchemaEx.getValue(obj, field.path);
+			if (targetArray && Array.isArray(targetArray)) {
+				const getLabel = (value) => {
+					if (!value) return;
+					if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
+					if (Array.isArray(value)) return "Array";
+					if (typeof value === "object" && value.name) return value.name;
+					if (typeof value === "object" && value.value) return `${value.value}`;
+					return "Object";
+				};
+				cell.accessoryHtml = `<div class="flex flex-row gap-1 overflow-x-auto">${targetArray.map(getLabel).filter(Predicate.isNotNullable).map((title) => {
+					return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
+				}).join("")}</div>`;
+			}
+		}
+		if (props.format === Format$1.TypeFormat.Ref && props.referenceSchema) {
+			const targetObj = SchemaEx.getValue(obj, field.path)?.target;
+			if (targetObj) cell.accessoryHtml = `<div role="none" class="dx-grid__cell__block"><dx-anchor uri=${Obj.getURI(targetObj)} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
+		}
+		if (props.format === Format$1.TypeFormat.URL) {
+			const value = SchemaEx.getValue(obj, field.path);
+			const href = typeof value === "string" ? safeHttpUrl(value) : void 0;
+			if (href) cell.accessoryHtml = `<div role="none" class="dx-grid__cell__block"><a href="${escapeHtmlAttribute(href)}" target="_blank" rel="noopener noreferrer" class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--arrow-square-out--regular"/></a></div>`;
+		}
+		if (props.format === Format$1.TypeFormat.Boolean) {
+			const value = SchemaEx.getValue(obj, field.path);
+			cell.accessoryHtml = tableControls.switch.render({
+				colIndex,
+				rowIndex: displayIndex,
+				plane,
+				checked: value ?? false
+			});
+			cell.readonly = "no-text-select";
+		}
+		if (props.format === Format$1.TypeFormat.SingleSelect) {
+			const value = SchemaEx.getValue(obj, field.path);
+			const options = this.model.projection.getFieldProjection(field.id).props.options;
+			if (options) {
+				const option = options.find((o) => o.id === value);
+				if (option) cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+			}
+		}
+		if (props.format === Format$1.TypeFormat.MultiSelect) {
+			const values = SchemaEx.getValue(obj, field.path);
+			const options = this.model.projection.getFieldProjection(field.id).props.options;
+			if (options && values && values.length > 0) {
+				const tags = values.map((value) => {
+					const option = options.find((o) => o.id === value);
+					if (option) return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+					return null;
+				}).filter(Boolean).join("");
+				if (tags) cell.accessoryHtml = tags;
+			}
+		}
+		const idx = toPlaneCellIndex({
+			col: colIndex,
+			row: displayIndex
+		});
+		cells[idx] = cell;
+	}
+	getMainGridCells(range) {
+		const cells = {};
+		const fields = this.model.projection?.getFields() ?? [];
+		const pin = this.model.pinColumns;
+		const scrollingFields = fields.length - pin;
+		for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
+			const field = fields[pin + col];
+			if (!field) continue;
+			this.createDataCell(cells, this.model.getRows()[row], field, col, row, "grid");
+		}
+		return cells;
+	}
+	getDraftRowCells(range) {
+		const cells = {};
+		const fields = this.model.projection?.getFields() ?? [];
+		const draftRows = this.model.getDraftRows();
+		const pin = this.model.pinColumns;
+		const scrollingFields = fields.length - pin;
+		if (draftRows.length === 0) for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) cells[toPlaneCellIndex({
+			col,
+			row: 0
+		})] = {
+			value: "",
+			readonly: true,
+			className: "dx-grid__row--cta__cell"
+		};
+		else for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+			const draftRow = draftRows[row];
+			for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) {
+				const field = fields[pin + col];
+				if (!field) continue;
+				this.createDraftDataCell(cells, draftRow.data, field, col, row, "frozenRowsEnd");
+			}
+		}
+		return cells;
+	}
+	/**
+	* Renders a draft-row data cell and applies the validation-error flag when the field is invalid.
+	*/
+	createDraftDataCell(cells, obj, field, planeCol, rowIndex, plane) {
+		const cellIndex = toPlaneCellIndex({
+			col: planeCol,
+			row: rowIndex
+		});
+		this.createDataCell(cells, obj, field, planeCol, rowIndex, plane);
+		if (this.model.hasDraftRowValidationError(rowIndex, field.path)) {
+			const cellValue = cells[cellIndex];
+			if (cellValue) {
+				const existingClasses = cellValue.className || "";
+				const draftClasses = "dx-grid__cell--flagged";
+				cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+			}
+		}
+	}
+	getHeaderCells(range) {
+		const cells = {};
+		const fields = this.model.projection?.getFields() ?? [];
+		const pin = this.model.pinColumns;
+		const scrollingFields = fields.length - pin;
+		for (let col = range.start.col; col <= range.end.col && col < scrollingFields; col++) this.createHeaderCell(cells, fields[pin + col].id, col);
+		return cells;
+	}
+	createHeaderCell(cells, fieldId, planeCol) {
+		const currentSort = this.model.getSorting();
+		const { field, props } = this.model.projection.getFieldProjection(fieldId);
+		const direction = currentSort?.fieldId === field.id ? currentSort.direction : void 0;
+		cells[toPlaneCellIndex({
+			col: planeCol,
+			row: 0
+		})] = {
+			value: "",
+			resizeHandle: "col",
+			accessoryHtml: `
+        <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
+        ${direction !== void 0 ? tableButtons.sort.render({
+				fieldId: field.id,
+				direction
+			}) : ""}
+        ${tableButtons.columnSettings.render({ fieldId: field.id })}
+      `,
+			className: "bg-axis-surface! text-axis-text! [&>div]:flex [&>div]:items-stretch"
+		};
+	}
+	/**
+	* Renders the frozenColsStart plane: the selection column (if enabled) followed by the pinned data columns.
+	*/
+	getFrozenColsStartCells(range) {
+		const cells = {};
+		const selectionColumns = this.model.selectionColumns;
+		const fields = this.model.projection?.getFields() ?? [];
+		const pin = this.model.pinColumns;
+		for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+			if (selectionColumns > 0) {
+				const isSelected = this.model.selection.isRowIndexSelected(row);
+				const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
+				cells[toPlaneCellIndex({
+					col: 0,
+					row
+				})] = {
+					value: "",
+					readonly: "no-text-select",
+					className: classes ? mx(classes) : void 0,
+					accessoryHtml: tableControls.checkbox.render({
+						rowIndex: row,
+						checked: isSelected
+					})
+				};
+			}
+			for (let dataCol = 0; dataCol < pin; dataCol++) {
+				const field = fields[dataCol];
+				if (!field) continue;
+				this.createDataCell(cells, this.model.getRows()[row], field, selectionColumns + dataCol, row, "frozenColsStart");
+			}
+		}
+		return cells;
+	}
+	getActionColumnCells(range) {
+		const cells = {};
+		for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+			const classes = cellClassesForRowSelection(this.model.selection.isRowIndexSelected(row), this.model.selection.selectionMode);
+			cells[toPlaneCellIndex({
+				col: 0,
+				row
+			})] = {
+				value: "",
+				readonly: true,
+				className: classes ? mx(classes) : void 0,
+				accessoryHtml: tableButtons.rowMenu.render({ rowIndex: row })
+			};
+		}
+		return cells;
+	}
+	/**
+	* Renders the fixedStartStart corner (frozen header row x frozen columns): the select-all cell (if the
+	* selection column is enabled) followed by the pinned columns' header cells.
+	*/
+	getFixedStartStartCells() {
+		const cells = {};
+		const selectionColumns = this.model.selectionColumns;
+		if (selectionColumns > 0) {
+			const showSelectAll = this.model.features.selection.enabled && this.model.selection.selectionMode !== "single";
+			cells[toPlaneCellIndex({
+				col: 0,
+				row: 0
+			})] = {
+				accessoryHtml: showSelectAll ? tableControls.checkbox.render({
+					rowIndex: 0,
+					header: true,
+					checked: this.model.selection.allRowsSelected
+				}) : void 0,
+				className: "bg-axis-surface!",
+				readonly: true,
+				value: ""
+			};
+		}
+		const fields = this.model.projection?.getFields() ?? [];
+		const pin = this.model.pinColumns;
+		for (let dataCol = 0; dataCol < pin; dataCol++) {
+			const field = fields[dataCol];
+			if (!field) continue;
+			this.createHeaderCell(cells, field.id, selectionColumns + dataCol);
+		}
+		return cells;
+	}
+	getNewColumnCell() {
+		return { [toPlaneCellIndex({
+			col: 0,
+			row: 0
+		})]: {
+			accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({ disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT }) : void 0,
+			className: "bg-axis-surface!",
+			readonly: true,
+			value: ""
+		} };
+	}
+	getDraftActionCells(range) {
+		const cells = {};
+		const draftRows = this.model.getDraftRows();
+		if (draftRows.length === 0) cells[toPlaneCellIndex({
+			col: 0,
+			row: 0
+		})] = {
+			value: "",
+			className: "dx-grid__row--cta__cell",
+			readonly: true
+		};
+		else for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+			const disabled = !draftRows[row].valid;
+			cells[toPlaneCellIndex({
+				col: 0,
+				row
+			})] = {
+				value: "",
+				readonly: true,
+				accessoryHtml: tableButtons.saveDraftRow.render({
+					rowIndex: row,
+					disabled
+				})
+			};
+		}
+		return cells;
+	}
+	/**
+	* Renders the fixedEndStart corner (draft row x frozen columns): the draft "+" icon (if the selection
+	* column is enabled) followed by the pinned columns' draft cells.
+	*/
+	getFixedEndStartCells(range) {
+		const cells = {};
+		const draftRows = this.model.getDraftRows();
+		const selectionColumns = this.model.selectionColumns;
+		const fields = this.model.projection?.getFields() ?? [];
+		const pin = this.model.pinColumns;
+		for (let row = range.start.row; row <= range.end.row; row++) {
+			if (selectionColumns > 0) cells[toPlaneCellIndex({
+				col: 0,
+				row
+			})] = {
+				value: "",
+				readonly: true,
+				accessoryHtml: "<div role=\"none\" class=\"dx-grid__cell__block\"><dx-icon icon=\"ph--plus--regular\" class=\"contents\"></dx-icon></div>",
+				className: mx(draftRows.length < 1 && "dx-grid__row--cta__cell")
+			};
+			for (let dataCol = 0; dataCol < pin; dataCol++) {
+				const field = fields[dataCol];
+				if (!field) continue;
+				const planeCol = selectionColumns + dataCol;
+				if (draftRows.length === 0) cells[toPlaneCellIndex({
+					col: planeCol,
+					row
+				})] = {
+					value: "",
+					readonly: true,
+					className: "dx-grid__row--cta__cell"
+				};
+				else if (row < draftRows.length) this.createDraftDataCell(cells, draftRows[row].data, field, planeCol, row, "fixedEndStart");
+			}
+		}
+		return cells;
+	}
+};
+/**
+* Parses a cell value as an HTTP(S) URL, returning the normalized href or `undefined`.
+* Restricting to http/https keeps `javascript:`/`data:` URLs out of the rendered anchor.
+*/
+var safeHttpUrl = (value) => {
+	try {
+		const normalized = /^https?:\/\//i.test(value) ? value : `https://${value}`;
+		const url = new URL(normalized);
+		return url.protocol === "http:" || url.protocol === "https:" ? url.href : void 0;
+	} catch {
+		return;
+	}
+};
+/**
+* Escapes a string for safe interpolation into a double-quoted HTML attribute, since
+* `accessoryHtml` is injected into the grid via `unsafeStatic`.
+*/
+var escapeHtmlAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var cellClassesForRowSelection = (selected, selectionMode) => {
+	if (!selected) if (selectionMode === "single") return ["cursor-pointer!"];
+	else return;
+	switch (selectionMode) {
+		case "single": return ["dx-grid__cell--no-focus-unfurl bg-current-surface! hover:bg-hover-surface cursor-pointer!"];
+		case "multiple": return ["bg-grid-cell-selected!"];
+	}
+};
+//#endregion
+//#region src/hooks/useAddRow.ts
+/**
+* Hook that provides a safe row creation function that handles schema validation failures.
+* Returns a callback that attempts to create an object and returns boolean success/failure.
+* Can accept optional data to create objects with specific content (used for committing draft rows).
+*/
+var useAddRow = ({ db, schema }) => {
+	return useCallback((data) => {
+		if (db && schema) try {
+			db.add(Obj.make(schema, data ?? {}));
+			return "final";
+		} catch (error) {
+			return "draft";
+		}
+		return "final";
+	}, [db, schema]);
+};
+//#endregion
+//#region src/hooks/useProjectionModel.ts
+var useProjectionModel = (schema, table, registry) => {
+	const [projection, setProjection] = useState();
+	useAsyncEffect(async () => {
+		if (schema && table) {
+			const view = await table.view.load();
+			const jsonSchema = schema.jsonSchema;
+			const projection = new ProjectionModel({
+				registry,
+				view,
+				baseSchema: jsonSchema,
+				change: createEchoChangeCallback(view, Type.getDatabase(schema) != null ? schema : void 0)
+			});
+			projection.normalizeView();
+			setProjection(projection);
+		}
+	}, [
+		schema,
+		table,
+		registry
+	]);
+	return projection;
+};
+//#endregion
+//#region src/hooks/useTableModel.ts
+var useTableModel = ({ object, projection, db, rows, rowActions, features, selection, onSelectionChanged, onRowAction, ...props }) => {
+	const registry = useContext(RegistryContext);
+	const viewState = useManagerOptional();
+	const selected = useSelection(object && Obj.getURI(object), "multi");
+	const initialSelection = useRef(selection ?? selected);
+	initialSelection.current = selection ?? selected;
+	const [model, setModel] = useState();
+	useEffect(() => {
+		if (!object || !projection) return;
+		let model;
+		const t = setTimeout(async () => {
+			model = new TableModel({
+				registry,
+				object,
+				projection,
+				db,
+				viewState,
+				change: createEchoChangeCallback$1(object),
+				features,
+				rowActions,
+				initialSelection: [...initialSelection.current],
+				onRowAction,
+				...props
+			});
+			await model.open();
+			setModel(model);
+		});
+		return () => {
+			clearTimeout(t);
+			model?.close();
+		};
+	}, [
+		registry,
+		viewState,
+		object,
+		projection,
+		features,
+		rowActions
+	]);
+	useEffect(() => {
+		if (rows && model) model.setRows(rows);
+	}, [model, rows]);
+	const { multi, clear } = useSelectionActions(model?.id);
+	useEffect(() => {
+		if (!model) return;
+		const unsubscribe = registry.subscribe(model.selection.selectionAtom, () => {
+			const selectedItems = [...model.selection.selection];
+			multi(selectedItems);
+			onSelectionChanged?.(selectedItems);
+		});
+		return () => {
+			clear();
+			unsubscribe();
+		};
+	}, [
+		registry,
+		model,
+		onSelectionChanged
+	]);
+	return model;
+};
+//#endregion
+export { compareValues as _, cellClassesForRowSelection as a, createEchoChangeCallback$1 as c, CONTROL_IDENTIFIERS as d, CheckboxComponent as f, tableButtons as g, BUTTON_IDENTIFIERS as h, TablePresentation as i, FieldSortSchema as l, tableControls as m, useProjectionModel as n, TableModel as o, SwitchComponent as p, useAddRow as r, createDirectChangeCallback as s, useTableModel as t, tableSortAspect as u, getSortValue as v, extractOrder as y };
+
+//# sourceMappingURL=chunk-useTableModel.mjs.map