@revisium/schema-toolkit-ui 0.6.0 → 0.6.1

package/dist/index.cjs

@@ -7033,6 +7033,9 @@ function selectDefaultColumns(columns, maxVisible = 4) {
 //#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) {
@@ -7222,7 +7225,7 @@ var ColumnsModel = class {
 	setColumnWidth(field, width) {
 		this._isResizing = true;
 		this._columnWidths.set(field, width);
-		if (this._wrapperElement) this._wrapperElement.style.setProperty(`--cw-${field}`, `${width}px`);
+		if (this._wrapperElement) this._wrapperElement.style.setProperty(fieldToCssVar(field), `${width}px`);
 	}
 	commitColumnWidth() {
 		this._isResizing = false;
@@ -7242,7 +7245,7 @@ var ColumnsModel = class {
 		return this._buildCssVarsUntracked();
 	}
 	columnWidthCssVar(field) {
-		return `var(--cw-${field}, ${field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH}px)`;
+		return `var(${fieldToCssVar(field)}, ${field === "id" ? DEFAULT_ID_COLUMN_WIDTH : DEFAULT_COLUMN_WIDTH}px)`;
 	}
 	getPinState(field) {
 		return this._pinnedColumns.get(field);
@@ -7469,7 +7472,7 @@ var ColumnsModel = class {
 		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`;
+			vars[fieldToCssVar(field)] = `${width}px`;
 		}
 		return vars;
 	}
@@ -7478,7 +7481,7 @@ var ColumnsModel = class {
 			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`;
+				vars[fieldToCssVar(field)] = `${width}px`;
 			}
 			return vars;
 		});
@@ -10851,6 +10854,242 @@ const CellContextMenu = (0, mobx_react_lite.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] = (0, react.useState)(null);
+	const menuOpen = menuAnchor !== null;
+	const openContextMenuAt = (0, react.useCallback)((clientX, clientY) => {
+		if (!cell.isFocused && !cell.isInSelection) cell.focus();
+		setMenuAnchor(new DOMRect(clientX, clientY, 0, 0));
+	}, [cell]);
+	(0, react.useEffect)(() => {
+		const el = cellRef.current;
+		if (el) cellMenuRegistry.set(el, openContextMenuAt);
+		return () => {
+			if (el) cellMenuRegistry.delete(el);
+		};
+	}, [cellRef, openContextMenuAt]);
+	const menuCloseRef = (0, react.useRef)(null);
+	const handleMenuClose = (0, react.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) {
+	(0, react.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: (0, react.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: (0, react.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
 /**
@@ -10905,299 +11144,117 @@ 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 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",
-			boxShadow: BOTTOM_BORDER_SHADOW
-		}
-	},
-	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: "cell",
-		_hover: {
-			bg: "gray.50",
-			boxShadow: BOTTOM_BORDER_SHADOW
-		}
-	},
-	readonlyFocused: {
-		cursor: "cell",
-		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) {
-		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();
-		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 = (0, mobx_react_lite.observer)(({ cell, cellRef, anchorRect, onClose, onEditPointerDown }) => {
+	const handleOpenChange = (0, react.useCallback)((details) => {
+		if (!details.open) onClose();
+	}, [onClose]);
+	const handleInteractOutside = (0, react.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 = (0, react.useCallback)(() => {
+		return anchorRect ?? (cellRef.current?.getBoundingClientRect() || null);
+	}, [anchorRect, cellRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.Root, {
+		open: true,
+		onOpenChange: handleOpenChange,
+		onInteractOutside: handleInteractOutside,
+		positioning: {
+			placement: "bottom-start",
+			getAnchorRect
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CellContextMenu, {
+			cell,
+			onEditPointerDown
+		})
+	});
+});
 const CellWrapper = (0, mobx_react_lite.observer)(({ cell, children, onDoubleClick, onStartEdit, onTypeChar, onDelete }) => {
+	ensureCellStyles();
 	const cellRef = (0, react.useRef)(null);
-	const menuOpenRef = (0, react.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;
-	(0, react.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 = (0, react.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 = (0, react.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 = (0, react.useCallback)((e) => {
-		if (e.buttons === 1) cell.dragExtend();
-	}, [cell]);
-	const handleDoubleClick = (0, react.useCallback)((e) => {
-		if (state === "readonly" || state === "readonlyFocused") {
-			cell.notifyReadonlyEditAttempt();
-			return;
-		}
-		onDoubleClick?.(e.clientX);
 	}, [
 		state,
 		cell,
-		onDoubleClick
+		openContextMenuAt
 	]);
-	const handleKeyDown = (0, react.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
-	]);
-	const selectionShadow = selectionEdges ? buildSelectionBoxShadow(selectionEdges) : null;
-	const needsFocus = state === "focused" || state === "editing" || state === "readonlyFocused" || isAnchorInRange;
+	const handleClick = (0, react.useCallback)((e) => {
+		if (state === "editing") return;
+		if (e.shiftKey) cell.selectTo();
+		else cell.focus();
+	}, [state, cell]);
+	const handleMouseEnter = (0, react.useCallback)((e) => {
+		if (e.buttons === 1) cell.dragExtend();
+	}, [cell]);
 	const handleBlur = (0, react.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 = (0, react.useCallback)(() => {
-		if (!cell.isFocused && !cell.isInSelection) cell.focus();
-	}, [cell]);
-	const handleMenuOpenChange = (0, react.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"
-		};
-		extraStyles._focus = FOCUS_RING_RESET;
-		extraStyles._focusVisible = FOCUS_RING_RESET;
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_chakra_ui_react.Menu.Root, {
-		onOpenChange: handleMenuOpenChange,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Menu.ContextTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
-				ref: cellRef,
-				height: "40px",
-				px: "8px",
-				position: "relative",
-				overflow: "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,
-				boxShadow: selectionShadow || void 0,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_chakra_ui_react.Box, {
-					display: "flex",
-					alignItems: "center",
-					height: "100%",
-					width: "100%",
-					minWidth: 0,
-					overflow: "hidden",
-					children
-				})
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: INNER_STYLE,
+			children
+		})
+	}), menuOpen && /* @__PURE__ */ (0, react_jsx_runtime.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
@@ -11830,6 +11887,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;
@@ -13018,12 +13099,20 @@ const TableWidget = (0, mobx_react_lite.observer)(({ rows, columnsModel, cellFSM
 		if (isResizing) shadowModel.pause();
 		else shadowModel.resume();
 	}, [isResizing, shadowModel]);
+	const [wrapperEl, setWrapperEl] = (0, react.useState)(null);
 	const wrapperRefCallback = (0, react.useCallback)((el) => {
+		setWrapperEl(el);
 		columnsModel.setWrapperElement(el);
-		if (useWindowScrollProp) setScrollerRef(el);
+	}, [columnsModel]);
+	(0, react.useEffect)(() => {
+		if (!useWindowScrollProp || !wrapperEl) return;
+		setScrollerRef(wrapperEl);
+		return () => {
+			setScrollerRef(null);
+		};
 	}, [
-		columnsModel,
 		useWindowScrollProp,
+		wrapperEl,
 		setScrollerRef
 	]);
 	const handleSelectRow = (0, react.useCallback)((rowId) => {