@schukai/monster 4.110.0 → 4.111.0

package/source/components/form/sheet.mjs

@@ -46,6 +46,16 @@ const lastViewportSymbol = Symbol("sheetLastViewport");
 const scrollFrameSymbol = Symbol("sheetScrollFrame");
 const forceRenderSymbol = Symbol("sheetForceRender");
 const resizeFrameSymbol = Symbol("sheetResizeFrame");
+const selectionSymbol = Symbol("sheetSelection");
+const selectionBoxSymbol = Symbol("sheetSelectionBox");
+const fillHandleSymbol = Symbol("sheetFillHandle");
+const statusSymbol = Symbol("sheetStatus");
+const statusTimeoutSymbol = Symbol("sheetStatusTimeout");
+const contextMenuSymbol = Symbol("sheetContextMenu");
+const menuStateSymbol = Symbol("sheetMenuState");
+const dragFillSymbol = Symbol("sheetDragFill");
+const lastCopySymbol = Symbol("sheetLastCopy");
+const dragSelectSymbol = Symbol("sheetDragSelect");
 
 class Sheet extends CustomControl {
 	static get [instanceSymbol]() {
@@ -144,6 +154,16 @@ function initControlReferences() {
 	this[addColumnButtonSymbol] = root.querySelector(
 		`[${ATTRIBUTE_ROLE}=add-column]`,
 	);
+	this[selectionBoxSymbol] = root.querySelector(
+		`[${ATTRIBUTE_ROLE}=selection]`,
+	);
+	this[fillHandleSymbol] = root.querySelector(
+		`[${ATTRIBUTE_ROLE}=fill-handle]`,
+	);
+	this[statusSymbol] = root.querySelector(`[${ATTRIBUTE_ROLE}=status]`);
+	this[contextMenuSymbol] = root.querySelector(
+		`[${ATTRIBUTE_ROLE}=context-menu]`,
+	);
 }
 
 function initEventHandler() {
@@ -181,6 +201,14 @@ function initEventHandler() {
 		if (isString(formula)) {
 			input.value = formula;
 		}
+		const selection = this[selectionSymbol];
+		const isMulti =
+			selection?.anchor &&
+			selection?.focus &&
+			(selection.anchor.rowId !== selection.focus.rowId ||
+				selection.anchor.colId !== selection.focus.colId);
+		if (!event.shiftKey && isMulti) return;
+		setSelectionFromCell.call(this, rowId, colId, event.shiftKey);
 	});
 
 	this[gridElementSymbol].addEventListener("focusout", (event) => {
@@ -195,6 +223,7 @@ function initEventHandler() {
 	});
 
 	this[gridElementSymbol].addEventListener("pointerdown", (event) => {
+		if (event.button !== 0) return;
 		const columnHandle = event.target.closest(
 			`[${ATTRIBUTE_ROLE}=column-resize]`,
 		);
@@ -208,9 +237,55 @@ function initEventHandler() {
 		if (rowHandle) {
 			if (!this.getOption("features.resizeRows", true)) return;
 			startRowResize.call(this, event, rowHandle);
+			return;
+		}
+
+		const cell = event.target.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (!rowId || !colId) return;
+		setSelectionFromCell.call(this, rowId, colId, event.shiftKey);
+		startSelectionDrag.call(this, event);
+	});
+
+	this[gridElementSymbol].addEventListener("keydown", (event) => {
+		if (!(event.ctrlKey || event.metaKey)) return;
+		if (event.key === "c" || event.key === "C") {
+			event.preventDefault();
+			void copySelectionToClipboard.call(this);
+			return;
+		}
+		if (event.key === "x" || event.key === "X") {
+			event.preventDefault();
+			void cutSelectionToClipboard.call(this);
+			return;
+		}
+		if (event.key === "v" || event.key === "V") {
+			event.preventDefault();
+			void pasteFromClipboard.call(this);
 		}
 	});
 
+	this[gridElementSymbol].addEventListener("contextmenu", (event) => {
+		const cell = event.target.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		event.preventDefault();
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (rowId && colId) {
+			setSelectionFromCell.call(this, rowId, colId, false);
+		}
+		showContextMenu.call(this, event.clientX, event.clientY);
+	});
+
+	this.shadowRoot.addEventListener("pointerdown", (event) => {
+		const menu = this[contextMenuSymbol];
+		if (!menu || menu.hidden) return;
+		if (menu.contains(event.target)) return;
+		hideContextMenu.call(this);
+	});
+
 	if (this[gridWrapperSymbol]) {
 		this[gridWrapperSymbol].addEventListener("scroll", () => {
 			if (!this.getOption("features.virtualize", false)) return;
@@ -221,6 +296,20 @@ function initEventHandler() {
 			});
 		});
 	}
+
+	if (this[gridWrapperSymbol]) {
+		this[gridWrapperSymbol].addEventListener("scroll", () => {
+			hideContextMenu.call(this);
+		});
+	}
+
+	if (this[fillHandleSymbol]) {
+		this[fillHandleSymbol].addEventListener("pointerdown", (event) => {
+			startFillDrag.call(this, event);
+		});
+	}
+
+	wireContextMenuActions.call(this);
 }
 
 function initOptionObserver() {
@@ -280,6 +369,7 @@ function updateControl() {
 	}
 	syncToolbarState.call(this);
 	applyDisabledState.call(this);
+	updateSelectionDisplay.call(this);
 }
 
 function syncToolbarState() {
@@ -303,6 +393,7 @@ function syncToolbarState() {
 	if (isString(labels.addColumn)) {
 		this[addColumnButtonSymbol].textContent = labels.addColumn;
 	}
+	syncContextMenuLabels.call(this);
 }
 
 function applyDisabledState() {
@@ -1029,6 +1120,802 @@ function refreshDisplayValues() {
 	});
 }
 
+function setSelectionFromCell(rowId, colId, expand) {
+	hideContextMenu.call(this);
+	const selection = this[selectionSymbol] || {};
+	if (expand && selection.anchor) {
+		selection.focus = { rowId, colId };
+	} else {
+		selection.anchor = { rowId, colId };
+		selection.focus = { rowId, colId };
+	}
+	this[selectionSymbol] = selection;
+	updateSelectionDisplay.call(this);
+}
+
+function setSelectionFocus(rowId, colId) {
+	const selection = this[selectionSymbol] || {};
+	if (!selection.anchor) {
+		selection.anchor = { rowId, colId };
+	}
+	selection.focus = { rowId, colId };
+	this[selectionSymbol] = selection;
+	updateSelectionDisplay.call(this);
+}
+
+function startSelectionDrag(event) {
+	if (event.button !== 0) return;
+	const cell = event.target.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+	if (!cell) return;
+	const state = {
+		active: true,
+		startX: event.clientX,
+		startY: event.clientY,
+		moved: false,
+	};
+	this[dragSelectSymbol] = state;
+	this.setAttribute("data-selecting", "");
+	const move = (moveEvent) => {
+		handleSelectionDragMove.call(this, moveEvent);
+	};
+	const end = () => {
+		handleSelectionDragEnd.call(this);
+	};
+	window.addEventListener("pointermove", move);
+	window.addEventListener("pointerup", end, { once: true });
+	window.addEventListener("pointercancel", end, { once: true });
+	state.cleanup = () => {
+		window.removeEventListener("pointermove", move);
+	};
+}
+
+function handleSelectionDragMove(event) {
+	const state = this[dragSelectSymbol];
+	if (!state?.active) return;
+	if (!state.moved) {
+		const dx = event.clientX - state.startX;
+		const dy = event.clientY - state.startY;
+		if (Math.abs(dx) < 3 && Math.abs(dy) < 3) return;
+		state.moved = true;
+	}
+	const cell = getCellFromPoint.call(this, event.clientX, event.clientY);
+	if (!cell) return;
+	const rowId = cell.dataset.rowId;
+	const colId = cell.dataset.colId;
+	if (!rowId || !colId) return;
+	setSelectionFocus.call(this, rowId, colId);
+}
+
+function handleSelectionDragEnd() {
+	const state = this[dragSelectSymbol];
+	if (!state) return;
+	if (state.cleanup) state.cleanup();
+	this[dragSelectSymbol] = null;
+	this.removeAttribute("data-selecting");
+}
+
+function updateSelectionDisplay() {
+	const grid = this[gridElementSymbol];
+	if (!grid) return;
+	const data = normalizeValue.call(this);
+	const selection = this[selectionSymbol];
+	const range = selection ? getSelectionRange(selection, data) : null;
+	const virtualize = this.getOption("features.virtualize", false) === true;
+
+	const cells = grid.querySelectorAll(`[${ATTRIBUTE_ROLE}=cell]`);
+	let overlay = null;
+	const wrapper = this[gridWrapperSymbol];
+	const wrapperRect = wrapper?.getBoundingClientRect() ?? null;
+	let minLeft = Infinity;
+	let minTop = Infinity;
+	let maxRight = -Infinity;
+	let maxBottom = -Infinity;
+
+	cells.forEach((cell) => {
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		let selected = false;
+		if (range && rowId && colId) {
+			const { rowIndexById, colIndexById } = range;
+			const rowIndex = rowIndexById.get(rowId);
+			const colIndex = colIndexById.get(colId);
+			if (
+				rowIndex !== undefined &&
+				colIndex !== undefined &&
+				rowIndex >= range.rowStart &&
+				rowIndex <= range.rowEnd &&
+				colIndex >= range.colStart &&
+				colIndex <= range.colEnd
+			) {
+				selected = true;
+			}
+		}
+
+		if (selected) {
+			cell.dataset.selected = "true";
+			if (wrapperRect) {
+				const rect = cell.getBoundingClientRect();
+				minLeft = Math.min(minLeft, rect.left);
+				minTop = Math.min(minTop, rect.top);
+				maxRight = Math.max(maxRight, rect.right);
+				maxBottom = Math.max(maxBottom, rect.bottom);
+			}
+		} else {
+			delete cell.dataset.selected;
+		}
+
+		if (
+			selection?.focus?.rowId === rowId &&
+			selection?.focus?.colId === colId
+		) {
+			cell.dataset.active = "true";
+		} else {
+			delete cell.dataset.active;
+		}
+	});
+
+	if (Number.isFinite(minLeft) && Number.isFinite(maxRight) && wrapperRect) {
+		overlay = {
+			left: minLeft - wrapperRect.left + wrapper.scrollLeft,
+			top: minTop - wrapperRect.top + wrapper.scrollTop,
+			width: Math.max(0, maxRight - minLeft),
+			height: Math.max(0, maxBottom - minTop),
+		};
+	} else if (range && virtualize) {
+		const sizes = getVirtualSizes.call(this, data);
+		const colStart = range.colStart;
+		const colEnd = range.colEnd;
+		const rowStart = range.rowStart;
+		const rowEnd = range.rowEnd;
+		const left = sizes.rowHeaderWidth + sizes.columnOffsets[colStart];
+		const top = sizes.headerHeight + sizes.rowOffsets[rowStart];
+		const width =
+			sizes.columnOffsets[colEnd] +
+			sizes.columnWidths[colEnd] -
+			sizes.columnOffsets[colStart];
+		const height =
+			sizes.rowOffsets[rowEnd] +
+			sizes.rowHeights[rowEnd] -
+			sizes.rowOffsets[rowStart];
+		overlay = { left, top, width, height };
+	}
+
+	updateSelectionOverlay.call(this, overlay);
+}
+
+function updateSelectionOverlay(bounds) {
+	const box = this[selectionBoxSymbol];
+	const wrapper = this[gridWrapperSymbol];
+	const handle = this[fillHandleSymbol];
+	if (!box || !wrapper || !handle) return;
+	if (!bounds) {
+		box.style.display = "none";
+		handle.style.display = "none";
+		return;
+	}
+	box.style.display = "block";
+	box.style.left = `${bounds.left}px`;
+	box.style.top = `${bounds.top}px`;
+	box.style.width = `${bounds.width}px`;
+	box.style.height = `${bounds.height}px`;
+	handle.style.display = "block";
+	handle.style.left = `${bounds.left + bounds.width - 4}px`;
+	handle.style.top = `${bounds.top + bounds.height - 4}px`;
+}
+
+function getSelectionRange(selection, data) {
+	if (!selection?.anchor || !selection?.focus) return null;
+	const { rowIndexById, colIndexById } = getIndexMaps(data);
+	const startRow = rowIndexById.get(selection.anchor.rowId);
+	const endRow = rowIndexById.get(selection.focus.rowId);
+	const startCol = colIndexById.get(selection.anchor.colId);
+	const endCol = colIndexById.get(selection.focus.colId);
+	if (
+		startRow === undefined ||
+		endRow === undefined ||
+		startCol === undefined ||
+		endCol === undefined
+	) {
+		return null;
+	}
+	return {
+		rowStart: Math.min(startRow, endRow),
+		rowEnd: Math.max(startRow, endRow),
+		colStart: Math.min(startCol, endCol),
+		colEnd: Math.max(startCol, endCol),
+		rowIndexById,
+		colIndexById,
+	};
+}
+
+function getIndexMaps(data) {
+	const rowIndexById = new Map();
+	const colIndexById = new Map();
+	data.rows.forEach((row, index) => {
+		if (row?.id) rowIndexById.set(row.id, index);
+	});
+	data.columns.forEach((col, index) => {
+		if (col?.id) colIndexById.set(col.id, index);
+	});
+	return { rowIndexById, colIndexById };
+}
+
+function getActiveCell() {
+	const active = this.shadowRoot?.activeElement;
+	if (!(active instanceof HTMLInputElement)) return null;
+	const cell = active.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+	if (!cell) return null;
+	const rowId = cell.dataset.rowId;
+	const colId = cell.dataset.colId;
+	if (!rowId || !colId) return null;
+	return { rowId, colId };
+}
+
+async function copySelectionToClipboard() {
+	const data = normalizeValue.call(this);
+	const range = getSelectionRange.call(this, this[selectionSymbol], data);
+	const resolvedRange = range ?? getRangeFromActiveCell.call(this, data);
+	if (!resolvedRange) return;
+
+	const text = buildClipboardText(data, resolvedRange);
+	this[lastCopySymbol] = {
+		text,
+		range: {
+			rowStart: resolvedRange.rowStart,
+			rowEnd: resolvedRange.rowEnd,
+			colStart: resolvedRange.colStart,
+			colEnd: resolvedRange.colEnd,
+		},
+		values: buildClipboardMatrix(data, resolvedRange),
+	};
+	const success = await writeClipboardText(text);
+	if (success) {
+		showStatus.call(this, this.getOption("labels.copied") || "Copied");
+	}
+}
+
+async function cutSelectionToClipboard() {
+	const data = normalizeValue.call(this);
+	const range = getSelectionRange.call(this, this[selectionSymbol], data);
+	const resolvedRange = range ?? getRangeFromActiveCell.call(this, data);
+	if (!resolvedRange) return;
+
+	const text = buildClipboardText(data, resolvedRange);
+	const success = await writeClipboardText(text);
+	if (!success) return;
+
+	const next = clearRange(data, resolvedRange);
+	this.value = next;
+	showStatus.call(this, this.getOption("labels.cutDone") || "Cut");
+}
+
+async function pasteFromClipboard() {
+	const text = await readClipboardText();
+	if (text === null) return;
+	const data = normalizeValue.call(this);
+	const range = getSelectionRange.call(this, this[selectionSymbol], data);
+	const startRange = range ?? getRangeFromActiveCell.call(this, data);
+	if (!startRange) return;
+
+	const { startRow, startCol } = {
+		startRow: startRange.rowStart,
+		startCol: startRange.colStart,
+	};
+	const cached = this[lastCopySymbol];
+	const next =
+		cached && cached.text === text
+			? applyPasteCached(data, cached, startRow, startCol)
+			: applyPasteText(data, text, startRow, startCol);
+	this.value = next.value;
+	setSelectionByRange.call(this, next.range, next.value);
+	showStatus.call(this, this.getOption("labels.pasted") || "Pasted");
+}
+
+function buildClipboardText(data, range) {
+	const rows = [];
+	for (let r = range.rowStart; r <= range.rowEnd; r += 1) {
+		const rowId = data.rows[r]?.id;
+		if (!rowId) continue;
+		const cols = [];
+		for (let c = range.colStart; c <= range.colEnd; c += 1) {
+			const colId = data.columns[c]?.id;
+			if (!colId) continue;
+			const value = getCellRawValue(data, rowId, colId);
+			cols.push(value);
+		}
+		rows.push(cols.join("\t"));
+	}
+	return rows.join("\n");
+}
+
+function buildClipboardMatrix(data, range) {
+	const rows = [];
+	for (let r = range.rowStart; r <= range.rowEnd; r += 1) {
+		const rowId = data.rows[r]?.id;
+		if (!rowId) continue;
+		const cols = [];
+		for (let c = range.colStart; c <= range.colEnd; c += 1) {
+			const colId = data.columns[c]?.id;
+			if (!colId) continue;
+			cols.push(getCellRawValue(data, rowId, colId));
+		}
+		rows.push(cols);
+	}
+	return rows;
+}
+
+function getCellRawValue(data, rowId, colId) {
+	const formula = data.formulas?.[rowId]?.[colId];
+	if (isString(formula)) return formula;
+	const raw = data.cells?.[rowId]?.[colId];
+	return raw === undefined || raw === null ? "" : String(raw);
+}
+
+function clearRange(data, range) {
+	const next = {
+		...data,
+		cells: data.cells ? { ...data.cells } : {},
+		formulas: data.formulas ? { ...data.formulas } : {},
+	};
+	for (let r = range.rowStart; r <= range.rowEnd; r += 1) {
+		const rowId = data.rows[r]?.id;
+		if (!rowId) continue;
+		for (let c = range.colStart; c <= range.colEnd; c += 1) {
+			const colId = data.columns[c]?.id;
+			if (!colId) continue;
+			if (next.cells[rowId]) delete next.cells[rowId][colId];
+			if (next.formulas[rowId]) delete next.formulas[rowId][colId];
+		}
+	}
+	return next;
+}
+
+function getRangeFromActiveCell(data) {
+	const active = getActiveCell.call(this);
+	if (!active) return null;
+	const { rowIndexById, colIndexById } = getIndexMaps(data);
+	const rowIndex = rowIndexById.get(active.rowId);
+	const colIndex = colIndexById.get(active.colId);
+	if (rowIndex === undefined || colIndex === undefined) return null;
+	return {
+		rowStart: rowIndex,
+		rowEnd: rowIndex,
+		colStart: colIndex,
+		colEnd: colIndex,
+		rowIndexById,
+		colIndexById,
+	};
+}
+
+function applyPasteText(data, text, startRowIndex, startColIndex) {
+	const rows = normalizeClipboardRows(text);
+	const next = {
+		...data,
+		cells: data.cells ? { ...data.cells } : {},
+		formulas: data.formulas ? { ...data.formulas } : {},
+	};
+	let rowEnd = startRowIndex;
+	let colEnd = startColIndex;
+
+	rows.forEach((rowText, rowOffset) => {
+		const rowIndex = startRowIndex + rowOffset;
+		if (rowIndex >= data.rows.length) return;
+		const rowId = data.rows[rowIndex]?.id;
+		if (!rowId) return;
+		const cols = rowText.split("\t");
+		cols.forEach((cellText, colOffset) => {
+			const colIndex = startColIndex + colOffset;
+			if (colIndex >= data.columns.length) return;
+			const colId = data.columns[colIndex]?.id;
+			if (!colId) return;
+			setCellData(next, rowId, colId, cellText);
+			rowEnd = Math.max(rowEnd, rowIndex);
+			colEnd = Math.max(colEnd, colIndex);
+		});
+	});
+
+	return {
+		value: next,
+		range: {
+			rowStart: startRowIndex,
+			rowEnd,
+			colStart: startColIndex,
+			colEnd,
+		},
+	};
+}
+
+function applyPasteCached(data, cached, startRowIndex, startColIndex) {
+	const next = {
+		...data,
+		cells: data.cells ? { ...data.cells } : {},
+		formulas: data.formulas ? { ...data.formulas } : {},
+	};
+	const deltaRow = startRowIndex - cached.range.rowStart;
+	const deltaCol = startColIndex - cached.range.colStart;
+	let rowEnd = startRowIndex;
+	let colEnd = startColIndex;
+
+	cached.values.forEach((rowValues, rowOffset) => {
+		const rowIndex = startRowIndex + rowOffset;
+		if (rowIndex >= data.rows.length) return;
+		const rowId = data.rows[rowIndex]?.id;
+		if (!rowId) return;
+		rowValues.forEach((cellValue, colOffset) => {
+			const colIndex = startColIndex + colOffset;
+			if (colIndex >= data.columns.length) return;
+			const colId = data.columns[colIndex]?.id;
+			if (!colId) return;
+			let nextValue = cellValue;
+			if (isFormulaString(cellValue)) {
+				nextValue = adjustFormulaReferences(cellValue, deltaRow, deltaCol);
+			}
+			setCellData(next, rowId, colId, nextValue);
+			rowEnd = Math.max(rowEnd, rowIndex);
+			colEnd = Math.max(colEnd, colIndex);
+		});
+	});
+
+	return {
+		value: next,
+		range: {
+			rowStart: startRowIndex,
+			rowEnd,
+			colStart: startColIndex,
+			colEnd,
+		},
+	};
+}
+
+function normalizeClipboardRows(text) {
+	const normalized = String(text).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+	const rows = normalized.split("\n");
+	while (rows.length > 1 && rows[rows.length - 1] === "") {
+		rows.pop();
+	}
+	return rows;
+}
+
+function setCellData(data, rowId, colId, value) {
+	if (!data.cells) data.cells = {};
+	if (!data.formulas) data.formulas = {};
+	if (!data.cells[rowId]) data.cells[rowId] = {};
+	if (!data.formulas[rowId]) data.formulas[rowId] = {};
+	const next = String(value ?? "");
+	if (next.trim().startsWith("=")) {
+		data.formulas[rowId][colId] = next.trim();
+		delete data.cells[rowId][colId];
+	} else {
+		delete data.formulas[rowId][colId];
+		data.cells[rowId][colId] = next;
+	}
+}
+
+function isFormulaString(value) {
+	return isString(value) && value.trim().startsWith("=");
+}
+
+function adjustFormulaReferences(formula, deltaRow, deltaCol) {
+	const expr = formula.trim();
+	if (!expr.startsWith("=")) return formula;
+	const body = expr.slice(1);
+	const adjusted = body.replace(/([A-Za-z]+)([0-9]+)/g, (match, col, row) => {
+		const colIndex = columnLabelToIndex(col);
+		if (colIndex === null) return match;
+		const rowIndex = Number(row) - 1;
+		if (!Number.isFinite(rowIndex)) return match;
+		const nextCol = colIndex + deltaCol;
+		const nextRow = rowIndex + deltaRow;
+		if (nextCol < 0 || nextRow < 0) return match;
+		return `${indexToColumnLabel(nextCol)}${nextRow + 1}`;
+	});
+	return `=${adjusted}`;
+}
+
+function columnLabelToIndex(label) {
+	const text = String(label || "").toUpperCase();
+	if (!/^[A-Z]+$/.test(text)) return null;
+	let index = 0;
+	for (let i = 0; i < text.length; i += 1) {
+		index = index * 26 + (text.charCodeAt(i) - 64);
+	}
+	return index - 1;
+}
+
+function indexToColumnLabel(index) {
+	if (!Number.isFinite(index) || index < 0) return "A";
+	return nextColumnLabel(index);
+}
+
+function setSelectionByRange(range, data) {
+	if (!range) return;
+	const rows = data.rows;
+	const cols = data.columns;
+	if (
+		range.rowStart < 0 ||
+		range.colStart < 0 ||
+		range.rowEnd >= rows.length ||
+		range.colEnd >= cols.length
+	) {
+		return;
+	}
+	this[selectionSymbol] = {
+		anchor: {
+			rowId: rows[range.rowStart].id,
+			colId: cols[range.colStart].id,
+		},
+		focus: {
+			rowId: rows[range.rowEnd].id,
+			colId: cols[range.colEnd].id,
+		},
+	};
+	updateSelectionDisplay.call(this);
+}
+
+async function writeClipboardText(text) {
+	try {
+		if (navigator.clipboard?.writeText) {
+			await navigator.clipboard.writeText(text);
+			return true;
+		}
+	} catch (e) {
+		return false;
+	}
+	return false;
+}
+
+async function readClipboardText() {
+	try {
+		if (navigator.clipboard?.readText) {
+			return await navigator.clipboard.readText();
+		}
+	} catch (e) {
+		return null;
+	}
+	return null;
+}
+
+function showStatus(message) {
+	const status = this[statusSymbol];
+	if (!status) return;
+	status.textContent = message;
+	status.dataset.show = "true";
+	if (this[statusTimeoutSymbol]) {
+		clearTimeout(this[statusTimeoutSymbol]);
+	}
+	this[statusTimeoutSymbol] = setTimeout(() => {
+		status.dataset.show = "false";
+	}, 1200);
+}
+
+function syncContextMenuLabels() {
+	const menu = this[contextMenuSymbol];
+	if (!menu) return;
+	const labels = this.getOption("labels", {});
+	const copy = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-copy]`);
+	const paste = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-paste]`);
+	const cut = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-cut]`);
+	if (copy && isString(labels.copy)) copy.textContent = labels.copy;
+	if (paste && isString(labels.paste)) paste.textContent = labels.paste;
+	if (cut && isString(labels.cut)) cut.textContent = labels.cut;
+}
+
+function wireContextMenuActions() {
+	const menu = this[contextMenuSymbol];
+	if (!menu) return;
+	const copy = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-copy]`);
+	const paste = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-paste]`);
+	const cut = menu.querySelector(`[${ATTRIBUTE_ROLE}=menu-cut]`);
+	const labels = this.getOption("labels", {});
+	if (copy) copy.textContent = labels.copy || "Copy";
+	if (paste) paste.textContent = labels.paste || "Paste";
+	if (cut) cut.textContent = labels.cut || "Cut";
+
+	if (copy) {
+		copy.addEventListener("click", async () => {
+			await copySelectionToClipboard.call(this);
+			hideContextMenu.call(this);
+		});
+	}
+	if (paste) {
+		paste.addEventListener("click", async () => {
+			await pasteFromClipboard.call(this);
+			hideContextMenu.call(this);
+		});
+	}
+	if (cut) {
+		cut.addEventListener("click", async () => {
+			await cutSelectionToClipboard.call(this);
+			hideContextMenu.call(this);
+		});
+	}
+}
+
+function showContextMenu(clientX, clientY) {
+	const menu = this[contextMenuSymbol];
+	const wrapper = this[gridWrapperSymbol];
+	if (!menu || !wrapper) return;
+	menu.hidden = false;
+	menu.style.display = "block";
+	const wrapperRect = wrapper.getBoundingClientRect();
+	const offsetX = clientX - wrapperRect.left + wrapper.scrollLeft;
+	const offsetY = clientY - wrapperRect.top + wrapper.scrollTop;
+	const menuWidth = menu.offsetWidth || 160;
+	const menuHeight = menu.offsetHeight || 96;
+	const maxLeft = wrapper.scrollLeft + wrapper.clientWidth - menuWidth;
+	const maxTop = wrapper.scrollTop + wrapper.clientHeight - menuHeight;
+	menu.style.left = `${Math.max(wrapper.scrollLeft, Math.min(offsetX, maxLeft))}px`;
+	menu.style.top = `${Math.max(wrapper.scrollTop, Math.min(offsetY, maxTop))}px`;
+	this[menuStateSymbol] = { open: true };
+}
+
+function hideContextMenu() {
+	const menu = this[contextMenuSymbol];
+	if (!menu || menu.hidden) return;
+	menu.hidden = true;
+	menu.style.display = "none";
+	this[menuStateSymbol] = { open: false };
+}
+
+function startFillDrag(event) {
+	if (event.button !== 0) return;
+	const data = normalizeValue.call(this);
+	const range = getSelectionRange.call(this, this[selectionSymbol], data);
+	if (!range) return;
+	event.preventDefault();
+	event.stopPropagation();
+	if (event.target?.setPointerCapture) {
+		event.target.setPointerCapture(event.pointerId);
+	}
+	const state = {
+		origin: {
+			rowStart: range.rowStart,
+			rowEnd: range.rowEnd,
+			colStart: range.colStart,
+			colEnd: range.colEnd,
+		},
+		current: null,
+		startX: event.clientX,
+		startY: event.clientY,
+		moved: false,
+	};
+	this[dragFillSymbol] = state;
+	this.setAttribute("data-filling", "");
+
+	const move = (moveEvent) => {
+		handleFillMove.call(this, moveEvent);
+	};
+	const end = (endEvent) => {
+		handleFillEnd.call(this, endEvent);
+	};
+	window.addEventListener("pointermove", move);
+	window.addEventListener("pointerup", end, { once: true });
+	window.addEventListener("pointercancel", end, { once: true });
+	state.cleanup = () => {
+		window.removeEventListener("pointermove", move);
+	};
+}
+
+function handleFillMove(event) {
+	const state = this[dragFillSymbol];
+	if (!state) return;
+	if (!state.moved) {
+		const dx = event.clientX - state.startX;
+		const dy = event.clientY - state.startY;
+		if (Math.abs(dx) < 3 && Math.abs(dy) < 3) return;
+		state.moved = true;
+	}
+	const data = normalizeValue.call(this);
+	const cell = getCellFromPoint.call(this, event.clientX, event.clientY);
+	if (!cell) return;
+	const rowId = cell.dataset.rowId;
+	const colId = cell.dataset.colId;
+	if (!rowId || !colId) return;
+	const { rowIndexById, colIndexById } = getIndexMaps(data);
+	const rowIndex = rowIndexById.get(rowId);
+	const colIndex = colIndexById.get(colId);
+	if (rowIndex === undefined || colIndex === undefined) return;
+
+	const nextRange = {
+		rowStart: Math.min(state.origin.rowStart, rowIndex),
+		rowEnd: Math.max(state.origin.rowEnd, rowIndex),
+		colStart: Math.min(state.origin.colStart, colIndex),
+		colEnd: Math.max(state.origin.colEnd, colIndex),
+	};
+	state.current = nextRange;
+	setSelectionByRange.call(this, nextRange, data);
+}
+
+function handleFillEnd() {
+	const state = this[dragFillSymbol];
+	if (!state) return;
+	if (state.cleanup) state.cleanup();
+	this.removeAttribute("data-filling");
+	const data = normalizeValue.call(this);
+	const target = state.current;
+	const origin = state.origin;
+	this[dragFillSymbol] = null;
+	if (!state.moved || !target) return;
+	const next = applyFillRange(data, origin, target);
+	this.value = next;
+	setSelectionByRange.call(this, target, next);
+}
+
+function getCellFromPoint(clientX, clientY) {
+	if (!this.shadowRoot) return null;
+	const elements = document.elementsFromPoint(clientX, clientY);
+	for (const el of elements) {
+		if (!this.shadowRoot.contains(el)) continue;
+		const cell = el.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (cell) return cell;
+	}
+	const virtualize = this.getOption("features.virtualize", false) === true;
+	if (!virtualize) return null;
+	const wrapper = this[gridWrapperSymbol];
+	if (!wrapper) return null;
+	const rect = wrapper.getBoundingClientRect();
+	const data = normalizeValue.call(this);
+	const sizes = getVirtualSizes.call(this, data);
+	const x = clientX - rect.left + wrapper.scrollLeft - sizes.rowHeaderWidth;
+	const y = clientY - rect.top + wrapper.scrollTop - sizes.headerHeight;
+	if (x < 0 || y < 0) return null;
+	const colIndex = findStartIndex(sizes.columnOffsets, x);
+	const rowIndex = findStartIndex(sizes.rowOffsets, y);
+	if (
+		colIndex < 0 ||
+		rowIndex < 0 ||
+		colIndex >= data.columns.length ||
+		rowIndex >= data.rows.length
+	) {
+		return null;
+	}
+	return {
+		dataset: {
+			rowId: data.rows[rowIndex].id,
+			colId: data.columns[colIndex].id,
+		},
+	};
+}
+
+function applyFillRange(data, origin, target) {
+	const next = {
+		...data,
+		cells: data.cells ? { ...data.cells } : {},
+		formulas: data.formulas ? { ...data.formulas } : {},
+	};
+	const originRows = origin.rowEnd - origin.rowStart + 1;
+	const originCols = origin.colEnd - origin.colStart + 1;
+	for (let r = target.rowStart; r <= target.rowEnd; r += 1) {
+		const rowId = data.rows[r]?.id;
+		if (!rowId) continue;
+		for (let c = target.colStart; c <= target.colEnd; c += 1) {
+			if (
+				r >= origin.rowStart &&
+				r <= origin.rowEnd &&
+				c >= origin.colStart &&
+				c <= origin.colEnd
+			) {
+				continue;
+			}
+			const colId = data.columns[c]?.id;
+			if (!colId) continue;
+			const sourceRow = origin.rowStart + ((r - origin.rowStart) % originRows);
+			const sourceCol = origin.colStart + ((c - origin.colStart) % originCols);
+			const sourceRowId = data.rows[sourceRow]?.id;
+			const sourceColId = data.columns[sourceCol]?.id;
+			if (!sourceRowId || !sourceColId) continue;
+			let value = getCellRawValue(data, sourceRowId, sourceColId);
+			if (isFormulaString(value)) {
+				const deltaRow = r - sourceRow;
+				const deltaCol = c - sourceCol;
+				value = adjustFormulaReferences(value, deltaRow, deltaCol);
+			}
+			setCellData(next, rowId, colId, value);
+		}
+	}
+	return next;
+}
+
 function scheduleVirtualResizeRender() {
 	if (this[resizeFrameSymbol]) return;
 	this[resizeFrameSymbol] = requestAnimationFrame(() => {
@@ -1211,120 +2098,240 @@ function getTranslations() {
 				addRow: "Zeile hinzufügen",
 				addColumn: "Spalte hinzufügen",
 				corner: "",
+				copy: "Kopieren",
+				paste: "Einfügen",
+				cut: "Ausschneiden",
+				copied: "Kopiert",
+				pasted: "Eingefügt",
+				cutDone: "Ausgeschnitten",
 			};
 		case "fr":
 			return {
 				addRow: "Ajouter une ligne",
 				addColumn: "Ajouter une colonne",
 				corner: "",
+				copy: "Copier",
+				paste: "Coller",
+				cut: "Couper",
+				copied: "Copié",
+				pasted: "Collé",
+				cutDone: "Coupé",
 			};
 		case "es":
 			return {
 				addRow: "Agregar fila",
 				addColumn: "Agregar columna",
 				corner: "",
+				copy: "Copiar",
+				paste: "Pegar",
+				cut: "Cortar",
+				copied: "Copiado",
+				pasted: "Pegado",
+				cutDone: "Cortado",
 			};
 		case "zh":
 			return {
 				addRow: "添加行",
 				addColumn: "添加列",
 				corner: "",
+				copy: "复制",
+				paste: "粘贴",
+				cut: "剪切",
+				copied: "已复制",
+				pasted: "已粘贴",
+				cutDone: "已剪切",
 			};
 		case "hi":
 			return {
 				addRow: "पंक्ति जोड़ें",
 				addColumn: "स्तंभ जोड़ें",
 				corner: "",
+				copy: "कॉपी करें",
+				paste: "पेस्ट करें",
+				cut: "कट करें",
+				copied: "कॉपी हो गया",
+				pasted: "पेस्ट हो गया",
+				cutDone: "कट हो गया",
 			};
 		case "bn":
 			return {
 				addRow: "সারি যোগ করুন",
 				addColumn: "কলাম যোগ করুন",
 				corner: "",
+				copy: "কপি",
+				paste: "পেস্ট",
+				cut: "কাট",
+				copied: "কপি করা হয়েছে",
+				pasted: "পেস্ট করা হয়েছে",
+				cutDone: "কাট করা হয়েছে",
 			};
 		case "pt":
 			return {
 				addRow: "Adicionar linha",
 				addColumn: "Adicionar coluna",
 				corner: "",
+				copy: "Copiar",
+				paste: "Colar",
+				cut: "Recortar",
+				copied: "Copiado",
+				pasted: "Colado",
+				cutDone: "Recortado",
 			};
 		case "ru":
 			return {
 				addRow: "Добавить строку",
 				addColumn: "Добавить столбец",
 				corner: "",
+				copy: "Копировать",
+				paste: "Вставить",
+				cut: "Вырезать",
+				copied: "Скопировано",
+				pasted: "Вставлено",
+				cutDone: "Вырезано",
 			};
 		case "ja":
 			return {
 				addRow: "行を追加",
 				addColumn: "列を追加",
 				corner: "",
+				copy: "コピー",
+				paste: "貼り付け",
+				cut: "切り取り",
+				copied: "コピーしました",
+				pasted: "貼り付けました",
+				cutDone: "切り取りました",
 			};
 		case "pa":
 			return {
 				addRow: "ਕਤਾਰ ਸ਼ਾਮਲ ਕਰੋ",
 				addColumn: "ਕਾਲਮ ਸ਼ਾਮਲ ਕਰੋ",
 				corner: "",
+				copy: "ਕਾਪੀ",
+				paste: "ਪੇਸਟ",
+				cut: "ਕੱਟੋ",
+				copied: "ਕਾਪੀ ਹੋਇਆ",
+				pasted: "ਪੇਸਟ ਹੋਇਆ",
+				cutDone: "ਕੱਟਿਆ ਗਿਆ",
 			};
 		case "mr":
 			return {
 				addRow: "ओळ जोडा",
 				addColumn: "स्तंभ जोडा",
 				corner: "",
+				copy: "कॉपी",
+				paste: "पेस्ट",
+				cut: "कट",
+				copied: "कॉपी झाले",
+				pasted: "पेस्ट झाले",
+				cutDone: "कट झाले",
 			};
 		case "it":
 			return {
 				addRow: "Aggiungi riga",
 				addColumn: "Aggiungi colonna",
 				corner: "",
+				copy: "Copia",
+				paste: "Incolla",
+				cut: "Taglia",
+				copied: "Copiato",
+				pasted: "Incollato",
+				cutDone: "Tagliato",
 			};
 		case "nl":
 			return {
 				addRow: "Rij toevoegen",
 				addColumn: "Kolom toevoegen",
 				corner: "",
+				copy: "Kopiëren",
+				paste: "Plakken",
+				cut: "Knippen",
+				copied: "Gekopieerd",
+				pasted: "Geplakt",
+				cutDone: "Geknipt",
 			};
 		case "sv":
 			return {
 				addRow: "Lägg till rad",
 				addColumn: "Lägg till kolumn",
 				corner: "",
+				copy: "Kopiera",
+				paste: "Klistra in",
+				cut: "Klipp ut",
+				copied: "Kopierad",
+				pasted: "Inklistrad",
+				cutDone: "Urklippt",
 			};
 		case "pl":
 			return {
 				addRow: "Dodaj wiersz",
 				addColumn: "Dodaj kolumnę",
 				corner: "",
+				copy: "Kopiuj",
+				paste: "Wklej",
+				cut: "Wytnij",
+				copied: "Skopiowano",
+				pasted: "Wklejono",
+				cutDone: "Wycięto",
 			};
 		case "da":
 			return {
 				addRow: "Tilføj række",
 				addColumn: "Tilføj kolonne",
 				corner: "",
+				copy: "Kopier",
+				paste: "Indsæt",
+				cut: "Klip",
+				copied: "Kopieret",
+				pasted: "Indsat",
+				cutDone: "Klippet",
 			};
 		case "fi":
 			return {
 				addRow: "Lisää rivi",
 				addColumn: "Lisää sarake",
 				corner: "",
+				copy: "Kopioi",
+				paste: "Liitä",
+				cut: "Leikkaa",
+				copied: "Kopioitu",
+				pasted: "Liitetty",
+				cutDone: "Leikattu",
 			};
 		case "no":
 			return {
 				addRow: "Legg til rad",
 				addColumn: "Legg til kolonne",
 				corner: "",
+				copy: "Kopier",
+				paste: "Lim inn",
+				cut: "Klipp ut",
+				copied: "Kopiert",
+				pasted: "Limt inn",
+				cutDone: "Klippet",
 			};
 		case "cs":
 			return {
 				addRow: "Přidat řádek",
 				addColumn: "Přidat sloupec",
 				corner: "",
+				copy: "Kopírovat",
+				paste: "Vložit",
+				cut: "Vyjmout",
+				copied: "Zkopírováno",
+				pasted: "Vloženo",
+				cutDone: "Vyjmuto",
 			};
 		default:
 			return {
 				addRow: "Add row",
 				addColumn: "Add column",
 				corner: "",
+				copy: "Copy",
+				paste: "Paste",
+				cut: "Cut",
+				copied: "Copied",
+				pasted: "Pasted",
+				cutDone: "Cut",
 			};
 	}
 }
@@ -1338,6 +2345,14 @@ function getTemplate() {
       </div>
       <div data-monster-role="grid-wrapper" part="grid-wrapper">
         <div data-monster-role="grid" part="grid"></div>
+        <div data-monster-role="selection" part="selection" aria-hidden="true"></div>
+        <span data-monster-role="fill-handle" part="fill-handle" aria-hidden="true"></span>
+        <div data-monster-role="status" part="status" role="status" aria-live="polite"></div>
+        <div data-monster-role="context-menu" part="context-menu" role="menu" hidden>
+          <button type="button" data-monster-role="menu-copy" part="menu-item" role="menuitem"></button>
+          <button type="button" data-monster-role="menu-paste" part="menu-item" role="menuitem"></button>
+          <button type="button" data-monster-role="menu-cut" part="menu-item" role="menuitem"></button>
+        </div>
       </div>
     </div>
   `;