@revisium/schema-toolkit-ui 0.5.0 → 0.6.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as mobx from "mobx";
-import { comparer, computed, makeAutoObservable, observable, reaction, runInAction } from "mobx";
+import { comparer, computed, makeAutoObservable, observable, reaction, runInAction, untracked } from "mobx";
 import { FIELD_NAME_ERROR_MESSAGE, SchemaParser, SystemSchemaIds, arr, createRowModel, createTableModel, fileSchema, generateDefaultValue, isForeignKeyValueNode, isValidFieldName, jsonPointerToSimplePath, num, obj, rowCreatedAtSchema, rowCreatedIdSchema, rowHashSchema, rowIdSchema, rowPublishedAtSchema, rowSchemaHashSchema, rowUpdatedAtSchema, rowVersionIdSchema, str, validateFormulaAgainstSchema } from "@revisium/schema-toolkit";
 import { createMobxProvider, setReactivityProvider } from "@revisium/schema-toolkit/core";
 import { ActionBar, Badge, Box, Button, Checkbox, Flex, HStack, HoverCard, Icon, IconButton, Image, Input, Kbd, Menu, Popover, Portal, SegmentGroup, Spinner, Text, Textarea, Tooltip as Tooltip$1, VStack } from "@chakra-ui/react";
@@ -2918,6 +2918,7 @@ const PlusButton = ({ onClick, tooltip, disabled, dataTestId }) => {
 		variant: "ghost",
 		color: "gray.400",
 		disabled,
+		focusRing: "none",
 		_hover: {
 			bg: "gray.100",
 			color: "gray.600"
@@ -7005,12 +7006,32 @@ function selectDefaultColumns(columns, maxVisible = 4) {
 //#endregion
 //#region src/table-editor/Columns/model/ColumnsModel.ts
 const DEFAULT_COLUMN_WIDTH = 150;
+const DEFAULT_ID_COLUMN_WIDTH = 240;
+function fieldToCssVar(field) {
+	return `--cw-${field.replaceAll(".", "-")}`;
+}
+function isValidPinZoneOrder(fields, pins) {
+	let zone = "left";
+	for (const field of fields) {
+		const pin = pins.get(field);
+		if (zone === "left") {
+			if (pin === "right") zone = "right";
+			else if (pin === void 0) zone = "none";
+		} else if (zone === "none") {
+			if (pin === "left") return false;
+			if (pin === "right") zone = "right";
+		} else if (pin !== "right") return false;
+	}
+	return true;
+}
 var ColumnsModel = class {
 	_allColumns = [];
 	_visibleFields = [];
 	_columnWidths = observable.map();
 	_pinnedColumns = observable.map();
 	_onChange = null;
+	_isResizing = false;
+	_wrapperElement = null;
 	constructor() {
 		makeAutoObservable(this, {}, { autoBind: true });
 	}
@@ -7169,17 +7190,36 @@ var ColumnsModel = class {
 		this._visibleFields = fields;
 		this._notifyChange();
 	}
+	get isResizing() {
+		return this._isResizing;
+	}
+	setWrapperElement(el) {
+		this._wrapperElement = el;
+	}
 	setColumnWidth(field, width) {
+		this._isResizing = true;
 		this._columnWidths.set(field, width);
+		if (this._wrapperElement) this._wrapperElement.style.setProperty(fieldToCssVar(field), `${width}px`);
 	}
 	commitColumnWidth() {
+		this._isResizing = false;
 		this._notifyChange();
 	}
 	getColumnWidth(field) {
 		return this._columnWidths.get(field);
 	}
 	resolveColumnWidth(field) {
-		return this._columnWidths.get(field) ?? DEFAULT_COLUMN_WIDTH;
+		return this._resolveWidthUntracked(field);
+	}
+	get columnWidthCssVars() {
+		if (this._isResizing) return this._buildCssVarsUntracked();
+		return this._buildCssVarsTracked();
+	}
+	getWidthCssVarsDuringResize() {
+		return this._buildCssVarsUntracked();
+	}
+	columnWidthCssVar(field) {
+		return `var(${fieldToCssVar(field)}, ${field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH}px)`;
 	}
 	getPinState(field) {
 		return this._pinnedColumns.get(field);
@@ -7237,7 +7277,7 @@ var ColumnsModel = class {
 		let offset = selectionWidth;
 		for (const f of this._visibleFields) {
 			if (f === field) break;
-			if (this._pinnedColumns.get(f) === "left") offset += this.resolveColumnWidth(f);
+			if (this._pinnedColumns.get(f) === "left") offset += this._resolveWidthUntracked(f);
 		}
 		return offset;
 	}
@@ -7250,10 +7290,37 @@ var ColumnsModel = class {
 				found = true;
 				continue;
 			}
-			if (found && this._pinnedColumns.get(f) === "right") offset += this.resolveColumnWidth(f);
+			if (found && this._pinnedColumns.get(f) === "right") offset += this._resolveWidthUntracked(f);
 		}
 		return offset;
 	}
+	getColumnStickyLeftCss(field, selectionWidth) {
+		if (this._pinnedColumns.get(field) !== "left") return;
+		const parts = [];
+		if (selectionWidth > 0) parts.push(`${selectionWidth}px`);
+		for (const f of this._visibleFields) {
+			if (f === field) break;
+			if (this._pinnedColumns.get(f) === "left") parts.push(this.columnWidthCssVar(f));
+		}
+		if (parts.length === 0) return "0px";
+		if (parts.length === 1) return parts[0];
+		return `calc(${parts.join(" + ")})`;
+	}
+	getColumnStickyRightCss(field) {
+		if (this._pinnedColumns.get(field) !== "right") return;
+		const parts = [];
+		let found = false;
+		for (const f of this._visibleFields) {
+			if (f === field) {
+				found = true;
+				continue;
+			}
+			if (found && this._pinnedColumns.get(f) === "right") parts.push(this.columnWidthCssVar(f));
+		}
+		if (parts.length === 0) return "0px";
+		if (parts.length === 1) return parts[0];
+		return `calc(${parts.join(" + ")})`;
+	}
 	isStickyLeftBoundary(field) {
 		if (this._pinnedColumns.get(field) !== "left") return false;
 		const index = this.getColumnIndex(field);
@@ -7289,16 +7356,20 @@ var ColumnsModel = class {
 	applyViewColumns(viewColumns) {
 		const lookup = this._columnLookup;
 		const fields = [];
-		this._columnWidths.clear();
-		this._pinnedColumns.clear();
+		const widths = /* @__PURE__ */ new Map();
+		const pins = /* @__PURE__ */ new Map();
 		for (const vc of viewColumns) {
 			const field = this._fromViewField(vc.field);
 			if (lookup.has(field)) {
 				fields.push(field);
-				if (vc.width !== void 0) this._columnWidths.set(field, vc.width);
-				if (vc.pinned !== void 0) this._pinnedColumns.set(field, vc.pinned);
+				if (vc.width !== void 0) widths.set(field, vc.width);
+				if (vc.pinned !== void 0) pins.set(field, vc.pinned);
 			}
 		}
+		this._columnWidths.clear();
+		this._pinnedColumns.clear();
+		for (const [field, width] of widths) this._columnWidths.set(field, width);
+		if (isValidPinZoneOrder(fields, pins)) for (const [field, side] of pins) this._pinnedColumns.set(field, side);
 		if (fields.length === 0) this._visibleFields = selectDefaultColumns(this._allColumns).map((col) => col.field);
 		else this._visibleFields = fields;
 	}
@@ -7368,6 +7439,27 @@ var ColumnsModel = class {
 		if (viewField.startsWith("data.")) return viewField.slice(5);
 		return viewField;
 	}
+	_resolveWidthUntracked(field) {
+		return untracked(() => this._columnWidths.get(field) ?? (field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH));
+	}
+	_buildCssVarsTracked() {
+		const vars = {};
+		for (const field of this._visibleFields) {
+			const width = this._columnWidths.get(field) ?? (field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH);
+			vars[fieldToCssVar(field)] = `${width}px`;
+		}
+		return vars;
+	}
+	_buildCssVarsUntracked() {
+		return untracked(() => {
+			const vars = {};
+			for (const field of this._visibleFields) {
+				const width = this._columnWidths.get(field) ?? (field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH);
+				vars[fieldToCssVar(field)] = `${width}px`;
+			}
+			return vars;
+		});
+	}
 	_notifyChange() {
 		if (this._onChange) this._onChange();
 	}
@@ -9782,15 +9874,6 @@ function cellAt(ctx, colIndex, rowIndex) {
 		field
 	};
 }
-function cellPosition(ctx, cell) {
-	const colIndex = ctx.columns.indexOf(cell.field);
-	const rowIndex = ctx.rowIds.indexOf(cell.rowId);
-	if (colIndex === -1 || rowIndex === -1) return null;
-	return {
-		colIndex,
-		rowIndex
-	};
-}
 function createConfig() {
 	return {
 		initial: "idle",
@@ -9954,11 +10037,37 @@ function createConfig() {
 
 //#endregion
 //#region src/table-editor/Table/model/CellFSM.ts
+const READONLY_TOAST_THROTTLE_MS = 2e3;
+function buildIndexMap(arr) {
+	const map = /* @__PURE__ */ new Map();
+	arr.forEach((value, i) => {
+		map.set(value, i);
+	});
+	return map;
+}
+function selectedRangeEquals(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	return a.startCol === b.startCol && a.endCol === b.endCol && a.startRow === b.startRow && a.endRow === b.endRow;
+}
 var CellFSM = class {
 	_fsm;
+	_onReadonlyEditAttempt = null;
+	_lastReadonlyToastAt = 0;
+	_columnIndexMap = /* @__PURE__ */ new Map();
+	_rowIndexMap = /* @__PURE__ */ new Map();
 	constructor() {
 		this._fsm = new ObservableFSM(createConfig());
-		makeAutoObservable(this, {}, { autoBind: true });
+		makeAutoObservable(this, { selectedRange: computed({ equals: selectedRangeEquals }) }, { autoBind: true });
+	}
+	setOnReadonlyEditAttempt(cb) {
+		this._onReadonlyEditAttempt = cb;
+	}
+	notifyReadonlyEditAttempt() {
+		const now = Date.now();
+		if (now - this._lastReadonlyToastAt < READONLY_TOAST_THROTTLE_MS) return;
+		this._lastReadonlyToastAt = now;
+		this._onReadonlyEditAttempt?.();
 	}
 	get state() {
 		return this._fsm.state;
@@ -9981,8 +10090,14 @@ var CellFSM = class {
 	get navigationVersion() {
 		return this._fsm.context.navigationVersion;
 	}
+	get columnIndexMap() {
+		return this._columnIndexMap;
+	}
+	get rowIndexMap() {
+		return this._rowIndexMap;
+	}
 	get hasSelection() {
-		return this.getSelectedRange() !== null;
+		return this.selectedRange !== null;
 	}
 	isCellFocused(rowId, field) {
 		const cell = this._fsm.context.focusedCell;
@@ -9998,54 +10113,53 @@ var CellFSM = class {
 		return this._fsm.matches("editing") && this.isCellFocused(rowId, field);
 	}
 	isCellInSelection(rowId, field) {
-		const range = this.getSelectedRange();
+		const range = this.selectedRange;
 		if (!range) return false;
-		const pos = this._getCellPosition(rowId, field);
-		if (!pos) return false;
-		return pos.colIndex >= range.startCol && pos.colIndex <= range.endCol && pos.rowIndex >= range.startRow && pos.rowIndex <= range.endRow;
+		const colIndex = this._columnIndexMap.get(field);
+		const rowIndex = this._rowIndexMap.get(rowId);
+		if (colIndex === void 0 || rowIndex === void 0) return false;
+		return colIndex >= range.startCol && colIndex <= range.endCol && rowIndex >= range.startRow && rowIndex <= range.endRow;
 	}
 	getCellSelectionEdges(rowId, field) {
-		const range = this.getSelectedRange();
+		const range = this.selectedRange;
 		if (!range) return null;
-		const pos = this._getCellPosition(rowId, field);
-		if (!pos) return null;
-		if (pos.colIndex < range.startCol || pos.colIndex > range.endCol || pos.rowIndex < range.startRow || pos.rowIndex > range.endRow) return null;
+		const colIndex = this._columnIndexMap.get(field);
+		const rowIndex = this._rowIndexMap.get(rowId);
+		if (colIndex === void 0 || rowIndex === void 0) return null;
+		if (colIndex < range.startCol || colIndex > range.endCol || rowIndex < range.startRow || rowIndex > range.endRow) return null;
 		return {
-			top: pos.rowIndex === range.startRow,
-			bottom: pos.rowIndex === range.endRow,
-			left: pos.colIndex === range.startCol,
-			right: pos.colIndex === range.endCol
+			top: rowIndex === range.startRow,
+			bottom: rowIndex === range.endRow,
+			left: colIndex === range.startCol,
+			right: colIndex === range.endCol
 		};
 	}
-	_getCellPosition(rowId, field) {
-		const ctx = this._fsm.context;
-		const colIndex = ctx.columns.indexOf(field);
-		const rowIndex = ctx.rowIds.indexOf(rowId);
-		if (colIndex === -1 || rowIndex === -1) return null;
-		return {
-			colIndex,
-			rowIndex
-		};
-	}
-	getSelectedRange() {
+	get selectedRange() {
 		const ctx = this._fsm.context;
 		if (!ctx.anchorCell || !ctx.focusedCell) return null;
 		if (ctx.anchorCell.rowId === ctx.focusedCell.rowId && ctx.anchorCell.field === ctx.focusedCell.field) return null;
-		const anchorPos = cellPosition(ctx, ctx.anchorCell);
-		const focusPos = cellPosition(ctx, ctx.focusedCell);
-		if (!anchorPos || !focusPos) return null;
+		const anchorCol = this._columnIndexMap.get(ctx.anchorCell.field);
+		const anchorRow = this._rowIndexMap.get(ctx.anchorCell.rowId);
+		const focusCol = this._columnIndexMap.get(ctx.focusedCell.field);
+		const focusRow = this._rowIndexMap.get(ctx.focusedCell.rowId);
+		if (anchorCol === void 0 || anchorRow === void 0 || focusCol === void 0 || focusRow === void 0) return null;
 		return {
-			startCol: Math.min(anchorPos.colIndex, focusPos.colIndex),
-			endCol: Math.max(anchorPos.colIndex, focusPos.colIndex),
-			startRow: Math.min(anchorPos.rowIndex, focusPos.rowIndex),
-			endRow: Math.max(anchorPos.rowIndex, focusPos.rowIndex)
+			startCol: Math.min(anchorCol, focusCol),
+			endCol: Math.max(anchorCol, focusCol),
+			startRow: Math.min(anchorRow, focusRow),
+			endRow: Math.max(anchorRow, focusRow)
 		};
 	}
+	getSelectedRange() {
+		return this.selectedRange;
+	}
 	setNavigationContext(columns, rowIds) {
 		Object.assign(this._fsm.context, {
 			columns,
 			rowIds
 		});
+		this._columnIndexMap = buildIndexMap(columns);
+		this._rowIndexMap = buildIndexMap(rowIds);
 	}
 	updateNavigationContext(columns, rowIds) {
 		const ctx = this._fsm.context;
@@ -10053,8 +10167,10 @@ var CellFSM = class {
 		ctx.columns = columns;
 		ctx.rowIds = rowIds;
 		ctx.navigationVersion++;
+		this._columnIndexMap = buildIndexMap(columns);
+		this._rowIndexMap = buildIndexMap(rowIds);
 		if (!focused) return;
-		if (columns.includes(focused.field) && rowIds.includes(focused.rowId)) ctx.anchorCell = null;
+		if (this._columnIndexMap.has(focused.field) && this._rowIndexMap.has(focused.rowId)) ctx.anchorCell = null;
 		else this.blur();
 	}
 	focusCell(cell) {
@@ -10338,6 +10454,9 @@ var CellVM = class {
 		const newValue = node.getPlainValue();
 		if (newValue !== previousValue) this._onCommit?.(this._rowId, this._column.field, newValue, previousValue);
 	}
+	notifyReadonlyEditAttempt() {
+		this._cellFSM.notifyReadonlyEditAttempt();
+	}
 	blur() {
 		this._cellFSM.blur();
 	}
@@ -10709,6 +10828,242 @@ const CellContextMenu = observer(({ cell, onEditPointerDown }) => {
 	}) }) });
 });
 
+//#endregion
+//#region src/table-editor/Table/ui/Cell/cellStyles.ts
+const SELECTION_BORDER_COLOR = "#3b82f6";
+function getCellState(cell) {
+	if (cell.isReadOnly) {
+		if (cell.isFocused && !cell.isInSelection) return "readonlyFocused";
+		if (cell.isInSelection) return "selected";
+		return "readonly";
+	}
+	if (cell.isEditing) return "editing";
+	if (cell.isFocused && !cell.isInSelection) return "focused";
+	if (cell.isInSelection) return "selected";
+	return "display";
+}
+function isPrintableKey(e) {
+	if (e.ctrlKey || e.metaKey || e.altKey) return false;
+	return e.key.length === 1;
+}
+
+//#endregion
+//#region src/table-editor/Table/ui/Cell/cellCss.ts
+const CLS = "cw";
+const CLS_DISPLAY = `${CLS} cw-display`;
+const CLS_READONLY = `${CLS} cw-readonly`;
+const CLS_FOCUSED = `${CLS} cw-focused`;
+const CLS_EDITING = `${CLS} cw-editing`;
+const CLS_READONLY_FOCUSED = `${CLS} cw-readonlyFocused`;
+const CLS_SELECTED = `${CLS} cw-selected`;
+const CLS_ANCHOR = "cw-anchor";
+const STATE_CLASS = {
+	display: CLS_DISPLAY,
+	readonly: CLS_READONLY,
+	focused: CLS_FOCUSED,
+	editing: CLS_EDITING,
+	readonlyFocused: CLS_READONLY_FOCUSED,
+	selected: CLS_SELECTED
+};
+const CELL_STYLE_ID = "cell-wrapper-styles";
+function ensureCellStyles() {
+	if (typeof document === "undefined") return;
+	if (document.getElementById(CELL_STYLE_ID)) return;
+	const style = document.createElement("style");
+	style.id = CELL_STYLE_ID;
+	style.textContent = [
+		".cw{height:40px;padding:0 8px;position:relative;overflow:hidden;cursor:cell;box-shadow:var(--cw-shadow,none)}",
+		".cw:focus,.cw:focus-visible{outline:none;box-shadow:var(--cw-shadow,none)}",
+		".cw-display:hover,.cw-readonly:hover{background-color:var(--chakra-colors-gray-50);box-shadow:inset 0 -1px 0 0 #ededed}",
+		".cw-focused{background-color:var(--chakra-colors-blue-50)}",
+		".cw-focused::before,.cw-editing::before,.cw-readonlyFocused::before,.cw-anchor::before{content:\"\";position:absolute;inset:1px;border-radius:1px;pointer-events:none}",
+		".cw-focused::before{border:2px solid var(--chakra-colors-blue-400)}",
+		".cw-editing{cursor:text;background-color:white;z-index:1}",
+		".cw-editing::before{border:2px solid var(--chakra-colors-blue-500)}",
+		".cw-readonlyFocused{background-color:var(--chakra-colors-gray-50)}",
+		".cw-readonlyFocused::before{border:2px solid var(--chakra-colors-gray-400)}",
+		".cw-selected{background-color:var(--chakra-colors-blue-100);user-select:none}",
+		".cw-anchor::before{border:2px solid var(--chakra-colors-blue-400)}"
+	].join("");
+	document.head.appendChild(style);
+}
+const INNER_STYLE = {
+	display: "flex",
+	alignItems: "center",
+	height: "100%",
+	width: "100%",
+	minWidth: 0,
+	overflow: "hidden"
+};
+function buildSelectionBoxShadow(edges) {
+	const shadows = [];
+	if (edges.top) shadows.push(`inset 0 2px 0 0 ${SELECTION_BORDER_COLOR}`);
+	if (edges.bottom) shadows.push(`inset 0 -2px 0 0 ${SELECTION_BORDER_COLOR}`);
+	if (edges.left) shadows.push(`inset 2px 0 0 0 ${SELECTION_BORDER_COLOR}`);
+	if (edges.right) shadows.push(`inset -2px 0 0 0 ${SELECTION_BORDER_COLOR}`);
+	return shadows.length > 0 ? shadows.join(", ") : null;
+}
+
+//#endregion
+//#region src/table-editor/Table/ui/Cell/useCellContextMenu.ts
+let pendingContextMenu = null;
+function clearPendingContextMenu() {
+	const pending = pendingContextMenu;
+	pendingContextMenu = null;
+	return pending;
+}
+function setPendingContextMenu(value) {
+	pendingContextMenu = value;
+}
+const cellMenuRegistry = /* @__PURE__ */ new WeakMap();
+function useCellContextMenu(cell, cellRef, deferredEdit) {
+	const [menuAnchor, setMenuAnchor] = useState(null);
+	const menuOpen = menuAnchor !== null;
+	const openContextMenuAt = useCallback((clientX, clientY) => {
+		if (!cell.isFocused && !cell.isInSelection) cell.focus();
+		setMenuAnchor(new DOMRect(clientX, clientY, 0, 0));
+	}, [cell]);
+	useEffect(() => {
+		const el = cellRef.current;
+		if (el) cellMenuRegistry.set(el, openContextMenuAt);
+		return () => {
+			if (el) cellMenuRegistry.delete(el);
+		};
+	}, [cellRef, openContextMenuAt]);
+	const menuCloseRef = useRef(null);
+	const handleMenuClose = useCallback(() => {
+		const pending = clearPendingContextMenu();
+		const didTriggerEdit = deferredEdit.triggerIfRequested();
+		if (!pending && !didTriggerEdit && !cell.isEditing) if (cell.isAnchor || cell.isFocused && !cell.hasRangeSelection) cellRef.current?.focus();
+		else ((cellRef.current?.closest("[data-testid=\"table-widget\"]"))?.querySelector("[data-testid^=\"cell-\"][tabindex=\"0\"]"))?.focus();
+		setMenuAnchor(null);
+		if (pending) {
+			const openFn = cellMenuRegistry.get(pending.target);
+			if (openFn) setTimeout(() => {
+				openFn(pending.clientX, pending.clientY);
+			}, 0);
+		}
+	}, [
+		cell,
+		cellRef,
+		deferredEdit
+	]);
+	menuCloseRef.current = handleMenuClose;
+	return {
+		menuAnchor,
+		menuOpen,
+		openContextMenuAt,
+		handleMenuClose,
+		menuCloseRef
+	};
+}
+
+//#endregion
+//#region src/table-editor/Table/ui/Cell/useCellFocus.ts
+function useCellFocus(cellRef, state, isAnchorInRange, navVersion) {
+	useEffect(() => {
+		if (!cellRef.current) return;
+		if (state === "focused" || state === "readonlyFocused" || isAnchorInRange) cellRef.current.focus();
+		else if (state === "display" || state === "readonly" || state === "selected") cellRef.current.blur();
+	}, [
+		cellRef,
+		state,
+		isAnchorInRange,
+		navVersion
+	]);
+}
+
+//#endregion
+//#region src/table-editor/Table/ui/Cell/useCellKeyboard.ts
+function handleArrowKey(cell, e, shiftAction, moveAction) {
+	e.preventDefault();
+	if (e.shiftKey) shiftAction();
+	else if (cell.hasRangeSelection) cell.focus();
+	else moveAction();
+}
+function handleEditableKeys(cell, e, callbacks) {
+	if (cell.isReadOnly) {
+		if (e.key === "Enter" || e.key === "Delete" || e.key === "Backspace" || isPrintableKey(e)) {
+			e.preventDefault();
+			cell.notifyReadonlyEditAttempt();
+		}
+		return;
+	}
+	const hasRange = cell.hasRangeSelection;
+	if (!hasRange && e.key === "Enter") {
+		e.preventDefault();
+		if (callbacks.onStartEdit) callbacks.onStartEdit();
+		else if (callbacks.onDoubleClick) callbacks.onDoubleClick();
+	} else if (!hasRange && (e.key === "Delete" || e.key === "Backspace") && callbacks.onDelete) {
+		e.preventDefault();
+		callbacks.onDelete();
+	} else if (isPrintableKey(e) && callbacks.onTypeChar) {
+		e.preventDefault();
+		callbacks.onTypeChar(e.key);
+	}
+}
+function useCellKeyboard(cell, state, isAnchorInRange, menuOpen, menuCloseRef, callbacks) {
+	const { onStartEdit, onDoubleClick, onTypeChar, onDelete } = callbacks;
+	return {
+		handleKeyDown: useCallback((e) => {
+			if (menuOpen && e.key === "Escape") {
+				e.preventDefault();
+				menuCloseRef.current?.();
+				return;
+			}
+			if (!(state === "focused" || state === "readonlyFocused" || isAnchorInRange)) return;
+			const isMod = e.ctrlKey || e.metaKey;
+			if (isMod && e.key === "c" && !cell.hasRangeSelection) {
+				e.preventDefault();
+				cell.copyToClipboard();
+				return;
+			}
+			if (isMod && e.key === "v") return;
+			const arrow = {
+				ArrowUp: [cell.shiftMoveUp, cell.moveUp],
+				ArrowDown: [cell.shiftMoveDown, cell.moveDown],
+				ArrowLeft: [cell.shiftMoveLeft, cell.moveLeft],
+				ArrowRight: [cell.shiftMoveRight, cell.moveRight]
+			}[e.key];
+			if (e.key === "Escape") {
+				e.preventDefault();
+				if (cell.hasRangeSelection) cell.focus();
+				else cell.blur();
+			} else if (arrow) handleArrowKey(cell, e, arrow[0], arrow[1]);
+			else if (e.key === "Tab") {
+				e.preventDefault();
+				cell.handleTab(e.shiftKey);
+			} else handleEditableKeys(cell, e, {
+				onStartEdit,
+				onDoubleClick,
+				onTypeChar,
+				onDelete
+			});
+		}, [
+			state,
+			cell,
+			isAnchorInRange,
+			menuOpen,
+			menuCloseRef,
+			onStartEdit,
+			onDoubleClick,
+			onTypeChar,
+			onDelete
+		]),
+		handleDoubleClick: useCallback((e) => {
+			if (state === "readonly" || state === "readonlyFocused") {
+				cell.notifyReadonlyEditAttempt();
+				return;
+			}
+			onDoubleClick?.(e.clientX);
+		}, [
+			state,
+			cell,
+			onDoubleClick
+		])
+	};
+}
+
 //#endregion
 //#region src/table-editor/Table/ui/Cell/useDeferredMenuEdit.ts
 /**
@@ -10763,282 +11118,117 @@ function useDeferredMenuEdit(editFn) {
 	};
 }
 
-//#endregion
-//#region src/table-editor/Table/ui/Cell/cellStyles.ts
-const FOCUS_RING_RESET = {
-	outline: "none",
-	boxShadow: "none"
-};
-const RANGE_BORDER_COLOR = "blue.400";
-function buildSelectionBorderStyle(edges) {
-	return {
-		content: "\"\"",
-		position: "absolute",
-		top: edges.top ? "-1px" : 0,
-		bottom: edges.bottom ? "-1px" : 0,
-		left: edges.left ? "-1px" : 0,
-		right: edges.right ? "-1px" : 0,
-		borderTop: edges.top ? "2px solid" : "none",
-		borderBottom: edges.bottom ? "2px solid" : "none",
-		borderLeft: edges.left ? "2px solid" : "none",
-		borderRight: edges.right ? "2px solid" : "none",
-		borderColor: RANGE_BORDER_COLOR,
-		pointerEvents: "none",
-		zIndex: 2
-	};
-}
-const stateStyles = {
-	display: {
-		cursor: "cell",
-		_hover: { bg: "gray.50" }
-	},
-	focused: {
-		cursor: "cell",
-		bg: "blue.50",
-		_before: {
-			content: "\"\"",
-			position: "absolute",
-			inset: "1px",
-			border: "2px solid",
-			borderColor: "blue.400",
-			borderRadius: "1px",
-			pointerEvents: "none"
-		},
-		_focus: FOCUS_RING_RESET,
-		_focusVisible: FOCUS_RING_RESET
-	},
-	editing: {
-		cursor: "text",
-		bg: "white",
-		zIndex: 1,
-		_before: {
-			content: "\"\"",
-			position: "absolute",
-			inset: "1px",
-			border: "2px solid",
-			borderColor: "blue.500",
-			borderRadius: "1px",
-			pointerEvents: "none"
-		},
-		_focus: FOCUS_RING_RESET,
-		_focusVisible: FOCUS_RING_RESET
-	},
-	readonly: {
-		cursor: "default",
-		color: "gray.500"
-	},
-	readonlyFocused: {
-		cursor: "default",
-		bg: "gray.50",
-		_before: {
-			content: "\"\"",
-			position: "absolute",
-			inset: "1px",
-			border: "2px solid",
-			borderColor: "gray.400",
-			borderRadius: "1px",
-			pointerEvents: "none"
-		},
-		_focus: FOCUS_RING_RESET,
-		_focusVisible: FOCUS_RING_RESET
-	},
-	selected: {
-		cursor: "cell",
-		bg: "blue.100"
-	}
-};
-function getCellState(cell) {
-	if (cell.isReadOnly) {
-		if (cell.isFocused && !cell.isInSelection) return "readonlyFocused";
-		if (cell.isInSelection) return "selected";
-		return "readonly";
-	}
-	if (cell.isEditing) return "editing";
-	if (cell.isFocused && !cell.isInSelection) return "focused";
-	if (cell.isInSelection) return "selected";
-	return "display";
-}
-function isPrintableKey(e) {
-	if (e.ctrlKey || e.metaKey || e.altKey) return false;
-	return e.key.length === 1;
-}
-
 //#endregion
 //#region src/table-editor/Table/ui/Cell/CellWrapper.tsx
-function handleArrowKey(cell, e, shiftAction, moveAction) {
-	e.preventDefault();
-	if (e.shiftKey) shiftAction();
-	else if (cell.hasRangeSelection) cell.focus();
-	else moveAction();
-}
-function handleEditableKeys(cell, e, onStartEdit, onDoubleClick, onTypeChar, onDelete) {
-	if (cell.isReadOnly) return;
-	const hasRange = cell.hasRangeSelection;
-	if (!hasRange && e.key === "Enter") {
-		e.preventDefault();
-		if (onStartEdit) onStartEdit();
-		else if (onDoubleClick) onDoubleClick();
-	} else if (!hasRange && (e.key === "Delete" || e.key === "Backspace") && onDelete) {
-		e.preventDefault();
-		onDelete();
-	} else if (isPrintableKey(e) && onTypeChar) {
-		e.preventDefault();
-		onTypeChar(e.key);
-	}
-}
+const LazyContextMenu = observer(({ cell, cellRef, anchorRect, onClose, onEditPointerDown }) => {
+	const handleOpenChange = useCallback((details) => {
+		if (!details.open) onClose();
+	}, [onClose]);
+	const handleInteractOutside = useCallback((e) => {
+		const originalEvent = e.detail?.originalEvent;
+		if (!originalEvent || originalEvent.button !== 2) return;
+		const targetCell = originalEvent.target?.closest("[data-testid^=\"cell-\"]");
+		if (targetCell) setPendingContextMenu({
+			target: targetCell,
+			clientX: originalEvent.clientX,
+			clientY: originalEvent.clientY
+		});
+	}, []);
+	const getAnchorRect = useCallback(() => {
+		return anchorRect ?? (cellRef.current?.getBoundingClientRect() || null);
+	}, [anchorRect, cellRef]);
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		open: true,
+		onOpenChange: handleOpenChange,
+		onInteractOutside: handleInteractOutside,
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect
+		},
+		children: /* @__PURE__ */ jsx(CellContextMenu, {
+			cell,
+			onEditPointerDown
+		})
+	});
+});
 const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTypeChar, onDelete }) => {
+	ensureCellStyles();
 	const cellRef = useRef(null);
-	const menuOpenRef = useRef(false);
-	const deferredEdit = useDeferredMenuEdit(onStartEdit ?? onDoubleClick);
 	const state = getCellState(cell);
 	const selectionEdges = cell.selectionEdges;
 	const isAnchorInRange = cell.isAnchor && cell.isInSelection;
 	const navVersion = cell.navigationVersion;
-	useEffect(() => {
-		if (!cellRef.current) return;
-		if (state === "focused" || state === "readonlyFocused" || isAnchorInRange) cellRef.current.focus();
-		else if (state === "display" || state === "readonly" || state === "selected") cellRef.current.blur();
-	}, [
-		state,
-		isAnchorInRange,
-		navVersion
-	]);
-	const handleClick = useCallback((e) => {
-		if (state === "editing") return;
-		if (e.shiftKey) cell.selectTo();
-		else cell.focus();
-	}, [state, cell]);
+	const isActive = state === "focused" || state === "editing" || state === "readonlyFocused" || isAnchorInRange;
+	const deferredEdit = useDeferredMenuEdit(onStartEdit ?? onDoubleClick);
+	const { menuAnchor, menuOpen, openContextMenuAt, handleMenuClose, menuCloseRef } = useCellContextMenu(cell, cellRef, deferredEdit);
+	useCellFocus(cellRef, state, isAnchorInRange, navVersion);
+	const { handleKeyDown, handleDoubleClick } = useCellKeyboard(cell, state, isAnchorInRange, menuOpen, menuCloseRef, {
+		onStartEdit,
+		onDoubleClick,
+		onTypeChar,
+		onDelete
+	});
 	const handleMouseDown = useCallback((e) => {
 		if (e.detail === 2 && state !== "readonly" && state !== "readonlyFocused") e.preventDefault();
+		if (e.button === 2) {
+			openContextMenuAt(e.clientX, e.clientY);
+			return;
+		}
 		if (!e.shiftKey && e.button === 0 && state !== "editing") {
 			e.preventDefault();
 			cell.dragStart();
 			cellRef.current?.focus();
 		}
-	}, [state, cell]);
-	const handleMouseEnter = useCallback((e) => {
-		if (e.buttons === 1) cell.dragExtend();
-	}, [cell]);
-	const handleDoubleClick = useCallback((e) => {
-		if (state !== "readonly" && state !== "readonlyFocused") onDoubleClick?.(e.clientX);
-	}, [state, onDoubleClick]);
-	const handleKeyDown = useCallback((e) => {
-		if (!(state === "focused" || state === "readonlyFocused" || isAnchorInRange)) return;
-		const isMod = e.ctrlKey || e.metaKey;
-		if (isMod && e.key === "c" && !cell.hasRangeSelection) {
-			e.preventDefault();
-			cell.copyToClipboard();
-			return;
-		}
-		if (isMod && e.key === "v") return;
-		if (e.key === "Escape") {
-			e.preventDefault();
-			if (cell.hasRangeSelection) cell.focus();
-			else cell.blur();
-		} else if (e.key === "ArrowUp") handleArrowKey(cell, e, cell.shiftMoveUp, cell.moveUp);
-		else if (e.key === "ArrowDown") handleArrowKey(cell, e, cell.shiftMoveDown, cell.moveDown);
-		else if (e.key === "ArrowLeft") handleArrowKey(cell, e, cell.shiftMoveLeft, cell.moveLeft);
-		else if (e.key === "ArrowRight") handleArrowKey(cell, e, cell.shiftMoveRight, cell.moveRight);
-		else if (e.key === "Tab") {
-			e.preventDefault();
-			cell.handleTab(e.shiftKey);
-		} else handleEditableKeys(cell, e, onStartEdit, onDoubleClick, onTypeChar, onDelete);
 	}, [
 		state,
 		cell,
-		isAnchorInRange,
-		onStartEdit,
-		onDoubleClick,
-		onTypeChar,
-		onDelete
+		openContextMenuAt
 	]);
-	const afterStyle = selectionEdges ? buildSelectionBorderStyle(selectionEdges) : void 0;
-	const needsFocus = state === "focused" || state === "editing" || state === "readonlyFocused" || isAnchorInRange;
+	const handleClick = useCallback((e) => {
+		if (state === "editing") return;
+		if (e.shiftKey) cell.selectTo();
+		else cell.focus();
+	}, [state, cell]);
+	const handleMouseEnter = useCallback((e) => {
+		if (e.buttons === 1) cell.dragExtend();
+	}, [cell]);
 	const handleBlur = useCallback((e) => {
 		if (!cell.isFocused || cell.isEditing) return;
-		if (menuOpenRef.current) return;
+		if (menuOpen) return;
 		if (e.relatedTarget?.closest("[data-testid^=\"cell-\"]")) return;
 		cell.blur();
-	}, [cell]);
-	const handleContextMenu = useCallback(() => {
-		if (!cell.isFocused && !cell.isInSelection) cell.focus();
-	}, [cell]);
-	const handleMenuOpenChange = useCallback((details) => {
-		menuOpenRef.current = details.open;
-		if (details.open) return;
-		if (deferredEdit.triggerIfRequested()) return;
-		if (cell.isEditing) return;
-		if (cell.isAnchor || cell.isFocused && !cell.hasRangeSelection) cellRef.current?.focus();
-		else ((cellRef.current?.closest("[data-testid=\"table-widget\"]"))?.querySelector("[data-testid^=\"cell-\"][tabindex=\"0\"]"))?.focus();
-	}, [cell, deferredEdit]);
-	const extraStyles = {};
-	if (isAnchorInRange) {
-		extraStyles._before = {
-			content: "\"\"",
-			position: "absolute",
-			inset: "1px",
-			border: "2px solid",
-			borderColor: "blue.400",
-			borderRadius: "1px",
-			pointerEvents: "none",
-			zIndex: 3
-		};
-		extraStyles._focus = FOCUS_RING_RESET;
-		extraStyles._focusVisible = FOCUS_RING_RESET;
-	}
-	return /* @__PURE__ */ jsxs(Menu.Root, {
-		onOpenChange: handleMenuOpenChange,
-		children: [/* @__PURE__ */ jsx(Menu.ContextTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsxs(Box, {
-				ref: cellRef,
-				height: "40px",
-				px: "8px",
-				position: "relative",
-				overflow: selectionEdges ? "visible" : "hidden",
-				onClick: handleClick,
-				onMouseDown: handleMouseDown,
-				onMouseEnter: handleMouseEnter,
-				onDoubleClick: handleDoubleClick,
-				onKeyDown: handleKeyDown,
-				onBlur: handleBlur,
-				onContextMenu: handleContextMenu,
-				tabIndex: needsFocus ? 0 : -1,
-				userSelect: state === "selected" ? "none" : void 0,
-				"data-testid": `cell-${cell.rowId}-${cell.field}`,
-				...stateStyles[state],
-				...extraStyles,
-				_after: afterStyle,
-				children: [/* @__PURE__ */ jsx(Box, {
-					display: "flex",
-					alignItems: "center",
-					height: "100%",
-					width: "100%",
-					minWidth: 0,
-					overflow: "hidden",
-					children
-				}), state === "readonlyFocused" && /* @__PURE__ */ jsx(Box, {
-					position: "absolute",
-					top: "1px",
-					right: "4px",
-					fontSize: "9px",
-					lineHeight: "1",
-					color: "gray.500",
-					bg: "gray.100",
-					px: "3px",
-					py: "1px",
-					borderRadius: "2px",
-					userSelect: "none",
-					pointerEvents: "none",
-					children: "readonly"
-				})]
-			})
-		}), /* @__PURE__ */ jsx(CellContextMenu, {
-			cell,
-			onEditPointerDown: deferredEdit.requestEdit
-		})]
-	});
+	}, [cell, menuOpen]);
+	const selectionShadow = selectionEdges ? buildSelectionBoxShadow(selectionEdges) : null;
+	let className = STATE_CLASS[state];
+	if (isAnchorInRange) className += ` ${CLS_ANCHOR}`;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: cellRef,
+		className,
+		style: selectionShadow ? { "--cw-shadow": selectionShadow } : void 0,
+		tabIndex: isActive ? 0 : -1,
+		onClick: handleClick,
+		onMouseDown: handleMouseDown,
+		onMouseEnter: handleMouseEnter,
+		onDoubleClick: isActive ? handleDoubleClick : void 0,
+		onKeyDown: isActive ? handleKeyDown : void 0,
+		onBlur: isActive ? handleBlur : void 0,
+		onContextMenu: preventContextMenu,
+		"data-testid": `cell-${cell.rowId}-${cell.field}`,
+		children: /* @__PURE__ */ jsx("div", {
+			style: INNER_STYLE,
+			children
+		})
+	}), menuOpen && /* @__PURE__ */ jsx(LazyContextMenu, {
+		cell,
+		cellRef,
+		anchorRect: menuAnchor,
+		onClose: handleMenuClose,
+		onEditPointerDown: deferredEdit.requestEdit
+	})] });
 });
+function preventContextMenu(e) {
+	e.preventDefault();
+}
 
 //#endregion
 //#region src/table-editor/Table/ui/Cell/useTextareaCell.ts
@@ -11315,7 +11505,6 @@ const ForeignKeyCell = observer(({ cell, onSearchForeignKey }) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				fontWeight: "300",
-				color: "blue.500",
 				flex: 1,
 				minWidth: 0,
 				children: cell.displayValue
@@ -11523,8 +11712,8 @@ const ReadonlyCell = observer(({ cell }) => {
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis",
 			overflow: "hidden",
-			fontWeight: "300",
-			color: "gray.400",
+			fontSize: "14px",
+			color: "text/primary",
 			children: cell.displayValue
 		})
 	});
@@ -11672,6 +11861,30 @@ function clearRange(range, rows, cols) {
 	}
 }
 
+//#endregion
+//#region src/table-editor/Table/ui/borderConstants.ts
+const CELL_BORDER_COLOR = "#ededed";
+const BOTTOM_BORDER_SHADOW = `inset 0 -1px 0 0 ${CELL_BORDER_COLOR}`;
+function buildAddColumnShadowCss() {
+	return { "&::after": {
+		content: "\"\"",
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		width: "8px",
+		left: "-8px",
+		pointerEvents: "none",
+		transition: "opacity 0.15s",
+		opacity: "var(--shadow-right-opacity, 0)",
+		boxShadow: "inset -8px 0 12px -8px rgba(0,0,0,0.1)"
+	} };
+}
+function adjustRightOffsetCss(rightCss, addColOffset) {
+	if (addColOffset <= 0) return rightCss;
+	if (rightCss === "0px") return `${addColOffset}px`;
+	return `calc(${rightCss} + ${addColOffset}px)`;
+}
+
 //#endregion
 //#region src/table-editor/Table/ui/ResizeHandle.tsx
 const MIN_COLUMN_WIDTH = 40;
@@ -11698,7 +11911,7 @@ const ResizeHandle = observer(({ field, columnsModel }) => {
 		onMouseDown: useCallback((e) => {
 			e.preventDefault();
 			e.stopPropagation();
-			const currentWidth = columnsModel.getColumnWidth(field) ?? 150;
+			const currentWidth = columnsModel.resolveColumnWidth(field);
 			startXRef.current = e.clientX;
 			startWidthRef.current = currentWidth;
 			setIsResizing(true);
@@ -12057,7 +12270,8 @@ const ColumnHeaderMenu = observer(({ column, columnsModel, sortModel, filterMode
 
 //#endregion
 //#region src/table-editor/Table/ui/Header/ColumnHeader.tsx
-function buildHeaderShadowCss(position, showShadow) {
+function buildHeaderShadowCss(position) {
+	const cssVar = position.side === "left" ? "var(--shadow-left-opacity, 0)" : "var(--shadow-right-opacity, 0)";
 	return { "&::after": {
 		content: "\"\"",
 		position: "absolute",
@@ -12066,7 +12280,7 @@ function buildHeaderShadowCss(position, showShadow) {
 		width: "8px",
 		pointerEvents: "none",
 		transition: "opacity 0.15s",
-		opacity: showShadow ? 1 : 0,
+		opacity: cssVar,
 		...position.side === "left" ? {
 			right: "-8px",
 			boxShadow: "inset 8px 0 12px -8px rgba(0,0,0,0.1)"
@@ -12076,22 +12290,19 @@ function buildHeaderShadowCss(position, showShadow) {
 		}
 	} };
 }
-const BOTTOM_BORDER_SHADOW$2 = "inset 0 -1px 0 0 var(--chakra-colors-gray-100)";
 function getHeaderBoxShadow(stickyPosition) {
-	if (!stickyPosition) return BOTTOM_BORDER_SHADOW$2;
-	return `${BOTTOM_BORDER_SHADOW$2}, ${stickyPosition.side === "left" ? "inset -1px 0 0 0 var(--chakra-colors-gray-100)" : "inset 1px 0 0 0 var(--chakra-colors-gray-100)"}`;
+	if (!stickyPosition) return BOTTOM_BORDER_SHADOW;
+	return `${BOTTOM_BORDER_SHADOW}, ${stickyPosition.side === "left" ? `inset -1px 0 0 0 ${CELL_BORDER_COLOR}` : `inset 1px 0 0 0 ${CELL_BORDER_COLOR}`}`;
 }
-const ColumnHeader = observer(({ column, columnsModel, sortModel, filterModel, onCopyPath, stickyPosition, showLeftShadow, showRightShadow }) => {
+const ColumnHeader = observer(({ column, columnsModel, sortModel, filterModel, onCopyPath, stickyPosition }) => {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	const width = columnsModel.getColumnWidth(column.field);
-	const w = width ? `${width}px` : "150px";
+	const w = columnsModel.columnWidthCssVar(column.field);
 	const isSticky = Boolean(stickyPosition);
-	const showShadow = stickyPosition?.isBoundary ? stickyPosition.side === "left" && Boolean(showLeftShadow) || stickyPosition.side === "right" && Boolean(showRightShadow) : false;
 	return /* @__PURE__ */ jsxs(Box, {
 		as: "th",
 		position: isSticky ? "sticky" : "relative",
-		left: stickyPosition?.side === "left" ? `${stickyPosition.offset}px` : void 0,
-		right: stickyPosition?.side === "right" ? `${stickyPosition.offset}px` : void 0,
+		left: stickyPosition?.side === "left" ? stickyPosition.offsetCss : void 0,
+		right: stickyPosition?.side === "right" ? stickyPosition.offsetCss : void 0,
 		zIndex: isSticky ? 2 : void 0,
 		width: w,
 		minWidth: w,
@@ -12102,7 +12313,7 @@ const ColumnHeader = observer(({ column, columnsModel, sortModel, filterModel, o
 		textAlign: "left",
 		fontWeight: "normal",
 		p: 0,
-		css: stickyPosition?.isBoundary ? buildHeaderShadowCss(stickyPosition, showShadow) : void 0,
+		css: stickyPosition?.isBoundary ? buildHeaderShadowCss(stickyPosition) : void 0,
 		children: [/* @__PURE__ */ jsxs(Menu.Root, {
 			positioning: { placement: "bottom-end" },
 			lazyMount: true,
@@ -12198,6 +12409,7 @@ const AddColumnButton = observer(({ columnsModel }) => {
 						bg: "gray.100",
 						color: "gray.600"
 					},
+					focusRing: "none",
 					"data-testid": "add-column-button",
 					children: /* @__PURE__ */ jsx(PiPlus, {})
 				})
@@ -12243,8 +12455,7 @@ const AddColumnButton = observer(({ columnsModel }) => {
 //#region src/table-editor/Table/ui/HeaderRow.tsx
 const SELECTION_COLUMN_WIDTH$1 = 40;
 const ADD_COLUMN_BUTTON_WIDTH$1 = 40;
-const BOTTOM_BORDER_SHADOW$1 = "inset 0 -1px 0 0 var(--chakra-colors-gray-100)";
-const HeaderRow = observer(({ columnsModel, sortModel, filterModel, onCopyPath, showSelection, scrollShadow }) => {
+const HeaderRow = observer(({ columnsModel, sortModel, filterModel, onCopyPath, showSelection }) => {
 	const selectionWidth = showSelection ? SELECTION_COLUMN_WIDTH$1 : 0;
 	const addColumnStickyRight = columnsModel.hasHiddenColumns;
 	return /* @__PURE__ */ jsxs(Box, {
@@ -12261,7 +12472,7 @@ const HeaderRow = observer(({ columnsModel, sortModel, filterModel, onCopyPath,
 				position: "sticky",
 				left: 0,
 				zIndex: 2,
-				boxShadow: BOTTOM_BORDER_SHADOW$1
+				boxShadow: BOTTOM_BORDER_SHADOW
 			}),
 			columnsModel.visibleColumns.map((col) => {
 				return /* @__PURE__ */ jsx(ColumnHeader, {
@@ -12270,42 +12481,42 @@ const HeaderRow = observer(({ columnsModel, sortModel, filterModel, onCopyPath,
 					sortModel,
 					filterModel,
 					onCopyPath,
-					stickyPosition: getStickyPosition(col.field, columnsModel, selectionWidth, addColumnStickyRight),
-					showLeftShadow: scrollShadow?.showLeftShadow,
-					showRightShadow: scrollShadow?.showRightShadow
+					stickyPosition: getStickyPosition(col.field, columnsModel, selectionWidth, addColumnStickyRight)
 				}, col.field);
 			}),
-			/* @__PURE__ */ jsx(Box, {
+			addColumnStickyRight ? /* @__PURE__ */ jsx(Box, {
 				as: "th",
 				width: "100%",
+				minWidth: `${ADD_COLUMN_BUTTON_WIDTH$1}px`,
 				bg: "white",
 				p: 0,
-				boxShadow: BOTTOM_BORDER_SHADOW$1
-			}),
-			/* @__PURE__ */ jsx(Box, {
+				position: "sticky",
+				right: 0,
+				zIndex: 2,
+				boxShadow: BOTTOM_BORDER_SHADOW,
+				css: columnsModel.pinnedRightCount === 0 ? buildAddColumnShadowCss() : void 0,
+				children: /* @__PURE__ */ jsx(AddColumnButton, { columnsModel })
+			}) : /* @__PURE__ */ jsx(Box, {
 				as: "th",
+				width: "100%",
 				bg: "white",
 				p: 0,
-				position: addColumnStickyRight ? "sticky" : void 0,
-				right: addColumnStickyRight ? 0 : void 0,
-				zIndex: addColumnStickyRight ? 2 : void 0,
-				boxShadow: BOTTOM_BORDER_SHADOW$1,
-				children: /* @__PURE__ */ jsx(AddColumnButton, { columnsModel })
+				boxShadow: BOTTOM_BORDER_SHADOW
 			})
 		]
 	});
 });
 function getStickyPosition(field, columnsModel, selectionWidth, addColumnStickyRight) {
-	const leftOffset = columnsModel.getColumnStickyLeft(field, selectionWidth);
-	if (leftOffset !== void 0) return {
+	const leftCss = columnsModel.getColumnStickyLeftCss(field, selectionWidth);
+	if (leftCss !== void 0) return {
 		side: "left",
-		offset: leftOffset,
+		offsetCss: leftCss,
 		isBoundary: columnsModel.isStickyLeftBoundary(field)
 	};
-	const rightBase = columnsModel.getColumnStickyRight(field);
-	if (rightBase !== void 0) return {
+	const rightCss = columnsModel.getColumnStickyRightCss(field);
+	if (rightCss !== void 0) return {
 		side: "right",
-		offset: rightBase + (addColumnStickyRight ? ADD_COLUMN_BUTTON_WIDTH$1 : 0),
+		offsetCss: adjustRightOffsetCss(rightCss, addColumnStickyRight ? ADD_COLUMN_BUTTON_WIDTH$1 : 0),
 		isBoundary: columnsModel.isStickyRightBoundary(field)
 	};
 }
@@ -12440,7 +12651,7 @@ const SelectionCheckboxCell = ({ rowId, isSelected, onToggleSelection }) => {
 		left: 0,
 		zIndex: 1,
 		bg: "white",
-		boxShadow: "inset 0 -1px 0 0 var(--chakra-colors-gray-100), inset -1px 0 0 0 var(--chakra-colors-gray-100)",
+		boxShadow: `inset 0 -1px 0 0 ${CELL_BORDER_COLOR}, inset -1px 0 0 0 ${CELL_BORDER_COLOR}`,
 		children: /* @__PURE__ */ jsx(Flex, {
 			alignItems: "center",
 			justifyContent: "center",
@@ -12460,7 +12671,8 @@ const SelectionCheckboxCell = ({ rowId, isSelected, onToggleSelection }) => {
 //#region src/table-editor/Table/ui/DataRow.tsx
 const SELECTION_COLUMN_WIDTH = 40;
 const ADD_COLUMN_BUTTON_WIDTH = 40;
-function buildShadowCss(side, showShadow) {
+function buildShadowCss(side) {
+	const cssVar = side === "left" ? "var(--shadow-left-opacity, 0)" : "var(--shadow-right-opacity, 0)";
 	return { "&::after": {
 		content: "\"\"",
 		position: "absolute",
@@ -12469,7 +12681,7 @@ function buildShadowCss(side, showShadow) {
 		width: "8px",
 		pointerEvents: "none",
 		transition: "opacity 0.15s",
-		opacity: showShadow ? 1 : 0,
+		opacity: cssVar,
 		...side === "left" ? {
 			right: "-8px",
 			boxShadow: "inset 8px 0 12px -8px rgba(0,0,0,0.1)"
@@ -12479,7 +12691,7 @@ function buildShadowCss(side, showShadow) {
 		}
 	} };
 }
-function buildCellCss(isBoundary, boundarySide, showShadow, hasRowActions, isFirstColumn) {
+function buildCellCss(isBoundary, boundarySide, hasRowActions, isFirstColumn) {
 	const needsHover = isFirstColumn && hasRowActions;
 	const hoverCss = needsHover ? {
 		"& .row-action-buttons": { opacity: 0 },
@@ -12490,34 +12702,33 @@ function buildCellCss(isBoundary, boundarySide, showShadow, hasRowActions, isFir
 	} : {};
 	if (isBoundary) return {
 		...hoverCss,
-		...buildShadowCss(boundarySide, showShadow)
+		...buildShadowCss(boundarySide)
 	};
 	if (needsHover) return hoverCss;
 }
-function computeStickyProps(col, columnsModel, selectionWidth, addColOffset, showLeftShadow, showRightShadow) {
-	const leftOffset = columnsModel.getColumnStickyLeft(col.field, selectionWidth);
-	const rightBase = columnsModel.getColumnStickyRight(col.field);
-	const isStickyLeft = leftOffset !== void 0;
-	const isStickyRight = rightBase !== void 0;
+function computeStickyProps(col, columnsModel, selectionWidth, addColOffset) {
+	const leftCss = columnsModel.getColumnStickyLeftCss(col.field, selectionWidth);
+	const rightCss = columnsModel.getColumnStickyRightCss(col.field);
+	const isStickyLeft = leftCss !== void 0;
+	const isStickyRight = rightCss !== void 0;
 	const isSticky = isStickyLeft || isStickyRight;
 	const isLeftBoundary = columnsModel.isStickyLeftBoundary(col.field);
 	const isRightBoundary = columnsModel.isStickyRightBoundary(col.field);
+	const finalRightCss = isStickyRight && rightCss !== void 0 ? adjustRightOffsetCss(rightCss, addColOffset) : rightCss;
 	return {
 		isSticky,
 		isBoundary: isLeftBoundary || isRightBoundary,
 		boundarySide: isStickyLeft ? "left" : "right",
-		showShadow: isLeftBoundary && Boolean(showLeftShadow) || isRightBoundary && Boolean(showRightShadow),
-		leftOffset: isStickyLeft ? leftOffset : void 0,
-		rightOffset: isStickyRight ? rightBase + addColOffset : void 0,
-		colWidth: isSticky ? `${columnsModel.resolveColumnWidth(col.field)}px` : void 0
+		leftCss: isStickyLeft ? leftCss : void 0,
+		rightCss: isStickyRight ? finalRightCss : void 0,
+		colWidth: isSticky ? columnsModel.columnWidthCssVar(col.field) : void 0
 	};
 }
-const BOTTOM_BORDER_SHADOW = "inset 0 -1px 0 0 var(--chakra-colors-gray-100)";
 function getCellBoxShadow(isSticky, side) {
 	if (!isSticky) return BOTTOM_BORDER_SHADOW;
-	return `${BOTTOM_BORDER_SHADOW}, ${side === "left" ? "inset -1px 0 0 0 var(--chakra-colors-gray-100)" : "inset 1px 0 0 0 var(--chakra-colors-gray-100)"}`;
+	return `${BOTTOM_BORDER_SHADOW}, ${side === "left" ? `inset -1px 0 0 0 ${CELL_BORDER_COLOR}` : `inset 1px 0 0 0 ${CELL_BORDER_COLOR}`}`;
 }
-const DataRow = observer(({ row, columnsModel, showSelection, scrollShadow, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onSelectRow, onDuplicateRow, onDeleteRow }) => {
+const DataRow = observer(({ row, columnsModel, showSelection, onSearchForeignKey, onUploadFile, onOpenFile, onOpenRow, onSelectRow, onDuplicateRow, onDeleteRow }) => {
 	const hasRowActions = Boolean(onOpenRow || onSelectRow || onDuplicateRow || onDeleteRow);
 	const selectionWidth = showSelection ? SELECTION_COLUMN_WIDTH : 0;
 	const addColumnStickyRight = columnsModel.hasHiddenColumns;
@@ -12532,7 +12743,7 @@ const DataRow = observer(({ row, columnsModel, showSelection, scrollShadow, onSe
 			const cellVM = row.getCellVM(col);
 			const isFirstColumn = index === 0;
 			const showOverlay = isFirstColumn && hasRowActions && !cellVM.isEditing;
-			const sticky = computeStickyProps(col, columnsModel, selectionWidth, addColOffset, scrollShadow?.showLeftShadow, scrollShadow?.showRightShadow);
+			const sticky = computeStickyProps(col, columnsModel, selectionWidth, addColOffset);
 			return /* @__PURE__ */ jsxs(Box, {
 				as: "td",
 				width: sticky.colWidth,
@@ -12540,15 +12751,15 @@ const DataRow = observer(({ row, columnsModel, showSelection, scrollShadow, onSe
 				maxWidth: sticky.isSticky ? sticky.colWidth : "0",
 				overflow: sticky.isBoundary ? "visible" : "hidden",
 				borderRight: sticky.isSticky ? void 0 : "1px solid",
-				borderColor: sticky.isSticky ? void 0 : "gray.100",
+				borderColor: sticky.isSticky ? void 0 : CELL_BORDER_COLOR,
 				p: 0,
 				position: sticky.isSticky ? "sticky" : "relative",
-				left: sticky.leftOffset !== void 0 ? `${sticky.leftOffset}px` : void 0,
-				right: sticky.rightOffset !== void 0 ? `${sticky.rightOffset}px` : void 0,
+				left: sticky.leftCss,
+				right: sticky.rightCss,
 				zIndex: sticky.isSticky ? 1 : void 0,
 				bg: sticky.isSticky ? "white" : void 0,
 				boxShadow: getCellBoxShadow(sticky.isSticky, sticky.boundarySide),
-				css: buildCellCss(sticky.isBoundary, sticky.boundarySide, sticky.showShadow, hasRowActions, isFirstColumn),
+				css: buildCellCss(sticky.isBoundary, sticky.boundarySide, hasRowActions, isFirstColumn),
 				children: [sticky.isBoundary ? /* @__PURE__ */ jsx(Box, {
 					overflow: "hidden",
 					children: /* @__PURE__ */ jsx(CellRenderer, {
@@ -12571,23 +12782,22 @@ const DataRow = observer(({ row, columnsModel, showSelection, scrollShadow, onSe
 				})]
 			}, col.field);
 		}),
-		/* @__PURE__ */ jsx(Box, {
+		addColumnStickyRight ? /* @__PURE__ */ jsx(Box, {
 			as: "td",
 			width: "100%",
-			p: 0,
-			boxShadow: BOTTOM_BORDER_SHADOW
-		}),
-		addColumnStickyRight && /* @__PURE__ */ jsx(Box, {
-			as: "td",
-			width: `${ADD_COLUMN_BUTTON_WIDTH}px`,
 			minWidth: `${ADD_COLUMN_BUTTON_WIDTH}px`,
-			maxWidth: `${ADD_COLUMN_BUTTON_WIDTH}px`,
 			p: 0,
 			position: "sticky",
 			right: 0,
 			zIndex: 1,
 			bg: "white",
-			boxShadow: `${BOTTOM_BORDER_SHADOW}, inset 1px 0 0 0 var(--chakra-colors-gray-100)`
+			boxShadow: BOTTOM_BORDER_SHADOW,
+			css: columnsModel.pinnedRightCount === 0 ? buildAddColumnShadowCss() : void 0
+		}) : /* @__PURE__ */ jsx(Box, {
+			as: "td",
+			width: "100%",
+			p: 0,
+			boxShadow: BOTTOM_BORDER_SHADOW
 		})
 	] });
 });
@@ -12713,19 +12923,61 @@ const TableRowComponent = ({ "data-index": index, context, style, children, ...p
 
 //#endregion
 //#region src/table-editor/Table/ui/hooks/useScrollShadow.ts
+const INITIAL_SHADOW = {
+	left: false,
+	right: false
+};
 var ScrollShadowModel = class {
-	showLeftShadow = false;
-	showRightShadow = false;
-	constructor() {
-		makeAutoObservable(this);
+	_left = false;
+	_right = false;
+	_paused = false;
+	_dirty = false;
+	_onChange = null;
+	get showLeftShadow() {
+		return this._left;
+	}
+	get showRightShadow() {
+		return this._right;
+	}
+	setOnChange(cb) {
+		this._onChange = cb;
+	}
+	pause() {
+		this._paused = true;
+		this._dirty = false;
+	}
+	resume() {
+		this._paused = false;
+		if (this._dirty) {
+			this._dirty = false;
+			this._notify();
+		}
 	}
 	update(left, right) {
-		this.showLeftShadow = left;
-		this.showRightShadow = right;
+		if (this._left === left && this._right === right) return;
+		this._left = left;
+		this._right = right;
+		if (this._paused) {
+			this._dirty = true;
+			return;
+		}
+		this._notify();
 	}
 	reset() {
-		this.showLeftShadow = false;
-		this.showRightShadow = false;
+		if (!this._left && !this._right) return;
+		this._left = false;
+		this._right = false;
+		if (this._paused) {
+			this._dirty = true;
+			return;
+		}
+		this._notify();
+	}
+	_notify() {
+		if (this._onChange) this._onChange({
+			left: this._left,
+			right: this._right
+		});
 	}
 };
 function getScrollElement(target) {
@@ -12736,8 +12988,20 @@ function useScrollShadow() {
 	const modelRef = useRef(null);
 	if (!modelRef.current) modelRef.current = new ScrollShadowModel();
 	const model = modelRef.current;
+	const [shadow, setShadow] = useState(INITIAL_SHADOW);
+	model.setOnChange(setShadow);
+	useEffect(() => {
+		return () => {
+			model.setOnChange(null);
+		};
+	}, [model]);
+	const shadowCssVars = {
+		"--shadow-left-opacity": shadow.left ? "1" : "0",
+		"--shadow-right-opacity": shadow.right ? "1" : "0"
+	};
 	const targetRef = useRef(null);
 	const rafRef = useRef(0);
+	const roRef = useRef(null);
 	const update = useCallback(() => {
 		const target = targetRef.current;
 		if (!target) return;
@@ -12745,9 +13009,7 @@ function useScrollShadow() {
 		if (!el) return;
 		const scrollLeft = el.scrollLeft;
 		const maxScroll = el.scrollWidth - el.clientWidth;
-		runInAction(() => {
-			model.update(scrollLeft > 0, maxScroll > 1 && scrollLeft < maxScroll - 1);
-		});
+		model.update(scrollLeft > 0, maxScroll > 1 && scrollLeft < maxScroll - 1);
 	}, [model]);
 	const handleScroll = useCallback(() => {
 		if (rafRef.current) cancelAnimationFrame(rafRef.current);
@@ -12756,15 +13018,24 @@ function useScrollShadow() {
 	const setScrollerRef = useCallback((el) => {
 		const prev = targetRef.current;
 		if (prev) prev.removeEventListener("scroll", handleScroll);
+		if (roRef.current) {
+			roRef.current.disconnect();
+			roRef.current = null;
+		}
 		if (el) {
 			targetRef.current = el;
 			el.addEventListener("scroll", handleScroll, { passive: true });
 			rafRef.current = requestAnimationFrame(update);
+			const scrollEl = getScrollElement(el);
+			if (scrollEl) {
+				const ro = new ResizeObserver(handleScroll);
+				const table = scrollEl.querySelector("table");
+				if (table) ro.observe(table);
+				roRef.current = ro;
+			}
 		} else {
 			targetRef.current = null;
-			runInAction(() => {
-				model.reset();
-			});
+			model.reset();
 		}
 	}, [
 		handleScroll,
@@ -12775,11 +13046,13 @@ function useScrollShadow() {
 		return () => {
 			const prev = targetRef.current;
 			if (prev) prev.removeEventListener("scroll", handleScroll);
+			if (roRef.current) roRef.current.disconnect();
 			if (rafRef.current) cancelAnimationFrame(rafRef.current);
 		};
 	}, [handleScroll]);
 	return {
-		model,
+		shadowCssVars,
+		shadowModel: model,
 		setScrollerRef
 	};
 }
@@ -12794,7 +13067,28 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 	const showSelection = selection.isSelectionMode;
 	const allRowIds = rows.map((r) => r.rowId);
 	const [deleteConfirm, setDeleteConfirm] = useState(null);
-	const { model: scrollShadow, setScrollerRef } = useScrollShadow();
+	const { shadowCssVars, shadowModel, setScrollerRef } = useScrollShadow();
+	const isResizing = columnsModel.isResizing;
+	useEffect(() => {
+		if (isResizing) shadowModel.pause();
+		else shadowModel.resume();
+	}, [isResizing, shadowModel]);
+	const [wrapperEl, setWrapperEl] = useState(null);
+	const wrapperRefCallback = useCallback((el) => {
+		setWrapperEl(el);
+		columnsModel.setWrapperElement(el);
+	}, [columnsModel]);
+	useEffect(() => {
+		if (!useWindowScrollProp || !wrapperEl) return;
+		setScrollerRef(wrapperEl);
+		return () => {
+			setScrollerRef(null);
+		};
+	}, [
+		useWindowScrollProp,
+		wrapperEl,
+		setScrollerRef
+	]);
 	const handleSelectRow = useCallback((rowId) => {
 		selection.enterSelectionMode(rowId);
 	}, [selection]);
@@ -12892,7 +13186,6 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 		row,
 		columnsModel,
 		showSelection,
-		scrollShadow,
 		onSearchForeignKey,
 		onUploadFile,
 		onOpenFile,
@@ -12903,7 +13196,6 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 	}), [
 		columnsModel,
 		showSelection,
-		scrollShadow,
 		onSearchForeignKey,
 		onUploadFile,
 		onOpenFile,
@@ -12920,18 +13212,16 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 		sortModel,
 		filterModel,
 		onCopyPath,
-		showSelection,
-		scrollShadow
+		showSelection
 	}), [
 		columnsModel,
 		sortModel,
 		filterModel,
 		onCopyPath,
-		showSelection,
-		scrollShadow
+		showSelection
 	]);
 	const virtuosoContext = useMemo(() => ({ rows }), [rows]);
-	const totalColumns = columnsModel.visibleColumns.length + (showSelection ? 4 : 3);
+	const totalColumns = columnsModel.visibleColumns.length + (showSelection ? 2 : 1);
 	const LoadingMoreFooter = useCallback(() => isLoadingMore ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
 		colSpan: totalColumns,
 		style: {
@@ -12958,10 +13248,17 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 	return /* @__PURE__ */ jsxs(CellContextActionsContext.Provider, {
 		value: cellFSM ? contextActions : null,
 		children: [/* @__PURE__ */ jsxs(Box, {
+			ref: wrapperRefCallback,
 			position: "relative",
 			height: useWindowScrollProp ? void 0 : "100%",
+			overflowX: "auto",
+			overflowY: useWindowScrollProp ? "clip" : void 0,
 			"data-testid": "table-widget",
 			onKeyDown: handleKeyDown,
+			style: {
+				...columnsModel.columnWidthCssVars,
+				...shadowCssVars
+			},
 			children: [rows.length === 0 ? /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx("table", {
 				style: {
 					width: "max-content",
@@ -12996,7 +13293,7 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 				fixedHeaderContent,
 				itemContent,
 				components: tableComponents,
-				scrollerRef: setScrollerRef
+				scrollerRef: useWindowScrollProp ? void 0 : setScrollerRef
 			}), /* @__PURE__ */ jsx(SelectionToolbar, {
 				selection,
 				allRowIds,
@@ -13289,6 +13586,7 @@ var TableEditorCore = class {
 		this.sorts.setOnApply((_sorts) => this._handleSortApply());
 		this.viewBadge.setOnSave(() => this._handleViewSave());
 		this.viewBadge.setOnRevert(() => this._handleViewRevert());
+		this.cellFSM.setOnReadonlyEditAttempt(this._callbacks.onReadonlyEditAttempt ?? null);
 		makeAutoObservable(this, {}, { autoBind: true });
 		queueMicrotask(() => void this._bootstrap());
 	}
@@ -13316,17 +13614,14 @@ var TableEditorCore = class {
 	getViewState() {
 		return {
 			columns: this.columns.serializeToViewColumns(),
-			filters: this.filters.hasActiveFilters ? JSON.stringify(this.filters.serializeRootGroup()) : null,
+			filters: null,
 			sorts: this.sorts.serializeToViewSorts(),
-			search: this.search.debouncedQuery
+			search: ""
 		};
 	}
 	applyViewState(state) {
 		this.columns.applyViewColumns(state.columns);
 		this.sorts.applyViewSorts(state.sorts);
-		if (state.filters) this.filters.applySnapshot(state.filters);
-		else this.filters.clearAll();
-		this.search.setQuery(state.search);
 	}
 	async loadMore() {
 		if (!this._hasNextPage || this._isLoadingMore) return;
@@ -13469,12 +13764,9 @@ var TableEditorCore = class {
 		this.cellFSM.updateNavigationContext(this.columns.visibleColumns.map((c) => c.field), this.cellFSM.rowIds);
 		this._checkViewChanges();
 	}
-	_handleFilterChange() {
-		this._checkViewChanges();
-	}
+	_handleFilterChange() {}
 	_handleFilterApply() {
 		this._reloadRows();
-		this._checkViewChanges();
 	}
 	_handleSortChange() {
 		this._checkViewChanges();
@@ -13485,7 +13777,6 @@ var TableEditorCore = class {
 	}
 	_handleSearch(_query) {
 		this._reloadRows();
-		this._checkViewChanges();
 	}
 	async _handleViewSave() {
 		try {
@@ -13732,14 +14023,21 @@ const TableEditor = observer(({ viewModel, useWindowScroll }) => {
 	return /* @__PURE__ */ jsxs(Box, {
 		display: "flex",
 		flexDirection: "column",
-		height: "100%",
+		height: useWindowScroll ? void 0 : "100%",
+		flex: useWindowScroll ? 1 : void 0,
 		children: [
 			/* @__PURE__ */ jsxs(Flex, {
 				px: 3,
-				pt: 2,
-				mb: "48px",
+				pt: "32px",
+				pb: "48px",
 				alignItems: "center",
 				justifyContent: "space-between",
+				...useWindowScroll && {
+					position: "sticky",
+					top: 0,
+					zIndex: 3,
+					bg: "white"
+				},
 				children: [breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, {
 					segments: breadcrumbs,
 					highlightLast: false,
@@ -13793,6 +14091,12 @@ const TableEditor = observer(({ viewModel, useWindowScroll }) => {
 				px: 3,
 				py: 2,
 				justifyContent: "space-between",
+				...useWindowScroll && {
+					position: "sticky",
+					bottom: 0,
+					bg: "white",
+					zIndex: 3
+				},
 				children: [/* @__PURE__ */ jsx(RowCountWidget, { model: viewModel.rowCount }), /* @__PURE__ */ jsx(ViewSettingsBadge, { model: viewModel.viewBadge })]
 			})
 		]