@revisium/schema-toolkit-ui 0.5.0 → 0.6.0

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,29 @@ 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 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 +7187,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(`--cw-${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(--cw-${field}, ${field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH}px)`;
 	}
 	getPinState(field) {
 		return this._pinnedColumns.get(field);
@@ -7237,7 +7274,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 +7287,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 +7353,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 +7436,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[`--cw-${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[`--cw-${field}`] = `${width}px`;
+			}
+			return vars;
+		});
+	}
 	_notifyChange() {
 		if (this._onChange) this._onChange();
 	}
@@ -9782,15 +9871,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 +10034,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 +10087,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 +10110,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 +10164,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 +10451,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();
 	}
@@ -10763,34 +10879,52 @@ function useDeferredMenuEdit(editFn) {
 	};
 }
 
+//#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/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 SELECTION_BORDER_COLOR = "#3b82f6";
+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;
 }
 const stateStyles = {
 	display: {
 		cursor: "cell",
-		_hover: { bg: "gray.50" }
+		_hover: {
+			bg: "gray.50",
+			boxShadow: BOTTOM_BORDER_SHADOW
+		}
 	},
 	focused: {
 		cursor: "cell",
@@ -10824,11 +10958,14 @@ const stateStyles = {
 		_focusVisible: FOCUS_RING_RESET
 	},
 	readonly: {
-		cursor: "default",
-		color: "gray.500"
+		cursor: "cell",
+		_hover: {
+			bg: "gray.50",
+			boxShadow: BOTTOM_BORDER_SHADOW
+		}
 	},
 	readonlyFocused: {
-		cursor: "default",
+		cursor: "cell",
 		bg: "gray.50",
 		_before: {
 			content: "\"\"",
@@ -10872,7 +11009,10 @@ function handleArrowKey(cell, e, shiftAction, moveAction) {
 	else moveAction();
 }
 function handleEditableKeys(cell, e, onStartEdit, onDoubleClick, onTypeChar, onDelete) {
-	if (cell.isReadOnly) return;
+	if (cell.isReadOnly) {
+		if (e.key === "Enter" || e.key === "Delete" || e.key === "Backspace" || isPrintableKey(e)) cell.notifyReadonlyEditAttempt();
+		return;
+	}
 	const hasRange = cell.hasRangeSelection;
 	if (!hasRange && e.key === "Enter") {
 		e.preventDefault();
@@ -10920,8 +11060,16 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 		if (e.buttons === 1) cell.dragExtend();
 	}, [cell]);
 	const handleDoubleClick = useCallback((e) => {
-		if (state !== "readonly" && state !== "readonlyFocused") onDoubleClick?.(e.clientX);
-	}, [state, onDoubleClick]);
+		if (state === "readonly" || state === "readonlyFocused") {
+			cell.notifyReadonlyEditAttempt();
+			return;
+		}
+		onDoubleClick?.(e.clientX);
+	}, [
+		state,
+		cell,
+		onDoubleClick
+	]);
 	const handleKeyDown = useCallback((e) => {
 		if (!(state === "focused" || state === "readonlyFocused" || isAnchorInRange)) return;
 		const isMod = e.ctrlKey || e.metaKey;
@@ -10952,7 +11100,7 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 		onTypeChar,
 		onDelete
 	]);
-	const afterStyle = selectionEdges ? buildSelectionBorderStyle(selectionEdges) : void 0;
+	const selectionShadow = selectionEdges ? buildSelectionBoxShadow(selectionEdges) : null;
 	const needsFocus = state === "focused" || state === "editing" || state === "readonlyFocused" || isAnchorInRange;
 	const handleBlur = useCallback((e) => {
 		if (!cell.isFocused || cell.isEditing) return;
@@ -10980,8 +11128,7 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 			border: "2px solid",
 			borderColor: "blue.400",
 			borderRadius: "1px",
-			pointerEvents: "none",
-			zIndex: 3
+			pointerEvents: "none"
 		};
 		extraStyles._focus = FOCUS_RING_RESET;
 		extraStyles._focusVisible = FOCUS_RING_RESET;
@@ -10990,12 +11137,12 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 		onOpenChange: handleMenuOpenChange,
 		children: [/* @__PURE__ */ jsx(Menu.ContextTrigger, {
 			asChild: true,
-			children: /* @__PURE__ */ jsxs(Box, {
+			children: /* @__PURE__ */ jsx(Box, {
 				ref: cellRef,
 				height: "40px",
 				px: "8px",
 				position: "relative",
-				overflow: selectionEdges ? "visible" : "hidden",
+				overflow: "hidden",
 				onClick: handleClick,
 				onMouseDown: handleMouseDown,
 				onMouseEnter: handleMouseEnter,
@@ -11008,8 +11155,8 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 				"data-testid": `cell-${cell.rowId}-${cell.field}`,
 				...stateStyles[state],
 				...extraStyles,
-				_after: afterStyle,
-				children: [/* @__PURE__ */ jsx(Box, {
+				boxShadow: selectionShadow || void 0,
+				children: /* @__PURE__ */ jsx(Box, {
 					display: "flex",
 					alignItems: "center",
 					height: "100%",
@@ -11017,21 +11164,7 @@ const CellWrapper = observer(({ cell, children, onDoubleClick, onStartEdit, onTy
 					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,
@@ -11315,7 +11448,6 @@ const ForeignKeyCell = observer(({ cell, onSearchForeignKey }) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				fontWeight: "300",
-				color: "blue.500",
 				flex: 1,
 				minWidth: 0,
 				children: cell.displayValue
@@ -11523,8 +11655,8 @@ const ReadonlyCell = observer(({ cell }) => {
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis",
 			overflow: "hidden",
-			fontWeight: "300",
-			color: "gray.400",
+			fontSize: "14px",
+			color: "text/primary",
 			children: cell.displayValue
 		})
 	});
@@ -11698,7 +11830,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 +12189,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 +12199,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 +12209,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 +12232,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 +12328,7 @@ const AddColumnButton = observer(({ columnsModel }) => {
 						bg: "gray.100",
 						color: "gray.600"
 					},
+					focusRing: "none",
 					"data-testid": "add-column-button",
 					children: /* @__PURE__ */ jsx(PiPlus, {})
 				})
@@ -12243,8 +12374,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 +12391,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 +12400,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 +12570,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 +12590,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 +12600,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 +12610,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 +12621,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 +12662,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 +12670,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 +12701,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 +12842,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 +12907,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 +12928,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 +12937,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 +12965,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 +12986,20 @@ 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 wrapperRefCallback = useCallback((el) => {
+		columnsModel.setWrapperElement(el);
+		if (useWindowScrollProp) setScrollerRef(el);
+	}, [
+		columnsModel,
+		useWindowScrollProp,
+		setScrollerRef
+	]);
 	const handleSelectRow = useCallback((rowId) => {
 		selection.enterSelectionMode(rowId);
 	}, [selection]);
@@ -12892,7 +13097,6 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 		row,
 		columnsModel,
 		showSelection,
-		scrollShadow,
 		onSearchForeignKey,
 		onUploadFile,
 		onOpenFile,
@@ -12903,7 +13107,6 @@ const TableWidget = observer(({ rows, columnsModel, cellFSM, selection, sortMode
 	}), [
 		columnsModel,
 		showSelection,
-		scrollShadow,
 		onSearchForeignKey,
 		onUploadFile,
 		onOpenFile,
@@ -12920,18 +13123,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 +13159,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 +13204,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 +13497,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 +13525,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 +13675,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 +13688,6 @@ var TableEditorCore = class {
 	}
 	_handleSearch(_query) {
 		this._reloadRows();
-		this._checkViewChanges();
 	}
 	async _handleViewSave() {
 		try {
@@ -13732,14 +13934,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 +14002,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 })]
 			})
 		]