@shiguri/solid-grid 0.0.1 → 0.1.0

package/dist/index.js

@@ -1,11 +1,14 @@
-import { className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { className, createComponent, delegateEvents, effect, insert, memo, setAttribute, style, template, use } from "solid-js/web";
 import { For, Index, batch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
-//#region src/index.tsx
+//#region src/gridsheet.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<table data-slot=gridsheet tabindex=-1><thead data-slot=gridsheet-header><tr data-slot=gridsheet-row><th data-slot=gridsheet-corner></th></tr></thead><tbody data-slot=gridsheet-body>`), _tmpl$2 = /* @__PURE__ */ template(`<tr data-slot=gridsheet-row>`), _tmpl$3 = /* @__PURE__ */ template(`<th data-slot=gridsheet-rowheader>`), _tmpl$4 = /* @__PURE__ */ template(`<th data-slot=gridsheet-colheader>`), _tmpl$5 = /* @__PURE__ */ template(`<td data-slot=gridsheet-cell tabindex=-1>`);
+/** Zero-based cell position. */
+/** Inclusive range of cells. */
 function isPositionInRange(pos, range) {
 	return pos.row >= range.min.row && pos.row <= range.max.row && pos.col >= range.min.col && pos.col <= range.max.col;
 }
+/** Normalize two positions into an inclusive range. */
 function normalizeRange(pos1, pos2) {
 	return {
 		min: {
@@ -18,296 +21,144 @@ function normalizeRange(pos1, pos2) {
 		}
 	};
 }
-const DEFAULT_SELECTION_MODE = "cell";
-function Gridsheet(props) {
-	const numRows = createMemo(() => props.data.length);
-	const numCols = createMemo(() => props.data[0] ? props.data[0].length : 0);
-	const [innerActiveCell, setInnerActiveCell] = createSignal(null);
-	const activeCell = createMemo(() => props.activeCell === void 0 ? innerActiveCell() : props.activeCell);
-	const setActiveCell = (pos) => {
-		setInnerActiveCell(pos);
-		if (props.onActiveCellChange) props.onActiveCellChange(pos);
-	};
-	const isCellActive = (pos) => {
-		const ac = activeCell();
-		return ac !== null && ac.row === pos.row && ac.col === pos.col;
+/** Render-time context for a single cell. */
+/** Events emitted from Gridsheet to plugins/handlers. */
+/** Return true to stop further handling. */
+/** Props for the Gridsheet component. */
+function createControllable(propsValue, onChange, initial) {
+	const [inner, setInner] = createSignal(initial);
+	const value = createMemo(() => propsValue() === void 0 ? inner() : propsValue());
+	const set = (v) => {
+		setInner(() => v);
+		onChange?.(v);
 	};
-	const [innerSelection, setInnerSelection] = createSignal(null);
-	const selection = createMemo(() => props.selection === void 0 ? innerSelection() : props.selection);
+	return [value, set];
+}
+/** Patch for a single cell update. */
+/** API exposed to plugins and external handlers. */
+function createGridApi(props) {
+	const numRows = createMemo(() => props.data.length);
+	const numCols = createMemo(() => props.data[0]?.length ?? 0);
+	const [activeCell, setActiveCell] = createControllable(() => props.activeCell, props.onActiveCellChange, null);
+	const [selection, setSelectionRaw] = createControllable(() => props.selection, props.onSelectionChange, null);
 	const setSelection = (range) => {
-		const normalizedRange = range ? normalizeRange(range.min, range.max) : null;
-		setInnerSelection(normalizedRange);
-		if (props.onSelectionChange) props.onSelectionChange(normalizedRange);
-	};
-	const isCellSelected = (pos) => {
-		const sel = selection();
-		return sel !== null && isPositionInRange(pos, sel);
-	};
-	const isRowHeaderSelected = (rowIndex) => {
-		const sel = selection();
-		return sel !== null && rowIndex >= sel.min.row && rowIndex <= sel.max.row;
-	};
-	const isColHeaderSelected = (colIndex) => {
-		const sel = selection();
-		return sel !== null && colIndex >= sel.min.col && colIndex <= sel.max.col;
-	};
-	const [innerIsEditing, setInnerIsEditing] = createSignal(false);
-	const isEditing = createMemo(() => props.isEditing === void 0 ? innerIsEditing() : props.isEditing);
-	const setIsEditing = (editing) => {
-		setInnerIsEditing(editing);
-		if (props.onIsEditingChange) props.onIsEditingChange(editing);
+		setSelectionRaw(range ? normalizeRange(range.min, range.max) : null);
 	};
-	const isCellEditing = (pos) => {
-		return isEditing() && isCellActive(pos);
+	const [isEditing, setIsEditing] = createControllable(() => props.isEditing, props.onIsEditingChange, false);
+	const updateCells = (patches) => {
+		props.onCellsChange?.(patches);
 	};
-	const beginCellEdit = (pos) => {
+	const beginEdit = (pos) => {
 		batch(() => {
 			setIsEditing(true);
 			setActiveCell(pos);
 			setSelection(normalizeRange(pos, pos));
 		});
 	};
-	const commitCellEdit = (pos, value) => {
-		const nextData = props.data.map((row) => row.slice());
-		const targetRow = nextData[pos.row];
-		if (targetRow && pos.col >= 0 && pos.col < targetRow.length) {
-			targetRow[pos.col] = value;
-			if (props.onDataChange) props.onDataChange(nextData);
-		}
-		setIsEditing(false);
-	};
-	const cancelCellEdit = () => {
+	const cancelEdit = () => setIsEditing(false);
+	const commitEdit = (pos, value) => {
+		updateCells([{
+			pos,
+			value
+		}]);
 		setIsEditing(false);
 	};
-	const [isMouseDown, setIsMouseDown] = createSignal(false);
-	const [selectionMode, setSelectionMode] = createSignal(DEFAULT_SELECTION_MODE);
-	const [selectionAnchor, setSelectionAnchor] = createSignal(null);
-	let previousBodyUserSelect = null;
-	const disableTextSelectionDuringDrag = () => {
-		if (typeof document === "undefined" || previousBodyUserSelect !== null) return;
-		const body = document.body;
-		if (!body) return;
-		previousBodyUserSelect = body.style.userSelect;
-		body.style.userSelect = "none";
-	};
-	const restoreTextSelectionAfterDrag = () => {
-		if (typeof document === "undefined" || previousBodyUserSelect === null) return;
-		const body = document.body;
-		if (body) body.style.userSelect = previousBodyUserSelect;
-		previousBodyUserSelect = null;
-	};
-	const handleMouseUp = () => {
-		setIsMouseDown(false);
-		setSelectionMode(DEFAULT_SELECTION_MODE);
-		setSelectionAnchor(null);
-		restoreTextSelectionAfterDrag();
-	};
-	onMount(() => {
-		window.addEventListener("mouseup", handleMouseUp);
-	});
-	onCleanup(() => {
-		window.removeEventListener("mouseup", handleMouseUp);
-		restoreTextSelectionAfterDrag();
-	});
-	const handleMouseDownOnCell = (pos, e) => {
-		if (e.button !== 0) return;
-		if (isCellEditing(pos)) return;
-		if (e.detail === 2) {
-			e.preventDefault();
-			beginCellEdit(pos);
-			return;
-		}
-		e.preventDefault();
-		batch(() => {
-			disableTextSelectionDuringDrag();
-			setIsMouseDown(true);
-			setSelectionMode("cell");
-			setSelectionAnchor(pos);
-			setIsEditing(false);
-			setSelection(normalizeRange(pos, pos));
-			setActiveCell(pos);
-		});
-	};
-	const handleMouseOverOnCell = (pos, e) => {
-		if ((e.buttons & 1) === 0) return;
-		batch(() => {
-			if (!isMouseDown() || selectionMode() !== "cell") return;
-			const start = selectionAnchor();
-			if (start) setSelection(normalizeRange(start, pos));
-			else console.warn("selectionAnchor is null during mouse drag selection");
-		});
+	return {
+		numRows,
+		numCols,
+		activeCell,
+		selection,
+		isEditing,
+		setActiveCell,
+		setSelection,
+		beginEdit,
+		cancelEdit,
+		commitEdit,
+		updateCells
 	};
-	const handleMouseDownOnRowHeader = (rowIndex) => {
-		if (numCols() === 0) return;
-		batch(() => {
-			disableTextSelectionDuringDrag();
-			setIsMouseDown(true);
-			setSelectionMode("row");
-			const start = {
-				row: rowIndex,
-				col: 0
-			};
-			const end = {
-				row: rowIndex,
-				col: numCols() - 1
-			};
-			setSelectionAnchor(start);
-			setIsEditing(false);
-			setSelection(normalizeRange(start, end));
-			setActiveCell(start);
-		});
+}
+function Gridsheet(props) {
+	const api = createGridApi(props);
+	const emit = (ev) => {
+		props.onEvent?.(ev, api);
 	};
-	const handleMouseOverOnRowHeader = (rowIndex) => {
-		batch(() => {
-			if (!isMouseDown() || selectionMode() !== "row") return;
-			const start = selectionAnchor();
-			if (start) setSelection(normalizeRange(start, {
-				row: rowIndex,
-				col: numCols() - 1
-			}));
-			else console.warn("selectionAnchor is null during mouse drag selection");
-		});
+	const isCellActive = (pos) => {
+		const ac = api.activeCell();
+		return ac !== null && ac.row === pos.row && ac.col === pos.col;
 	};
-	const handleMouseDownOnColHeader = (colIndex) => {
-		if (numRows() === 0) return;
-		batch(() => {
-			disableTextSelectionDuringDrag();
-			setIsMouseDown(true);
-			setSelectionMode("col");
-			const start = {
-				row: 0,
-				col: colIndex
-			};
-			const end = {
-				row: numRows() - 1,
-				col: colIndex
-			};
-			setSelectionAnchor(start);
-			setIsEditing(false);
-			setSelection(normalizeRange(start, end));
-			setActiveCell(start);
-		});
+	const isCellSelected = (pos) => {
+		const sel = api.selection();
+		return sel !== null && isPositionInRange(pos, sel);
 	};
-	const handleMouseOverOnColHeader = (colIndex) => {
-		batch(() => {
-			if (!isMouseDown() || selectionMode() !== "col") return;
-			const start = selectionAnchor();
-			if (start) setSelection(normalizeRange(start, {
-				row: numRows() - 1,
-				col: colIndex
-			}));
-			else console.warn("selectionAnchor is null during mouse drag selection");
-		});
+	const isRowHeaderSelected = (rowIndex) => {
+		const sel = api.selection();
+		return sel !== null && rowIndex >= sel.min.row && rowIndex <= sel.max.row;
 	};
-	const handleClickOnCorner = () => {
-		if (numCols() === 0 || numRows() === 0) return;
-		batch(() => {
-			setIsEditing(false);
-			setSelection(normalizeRange({
-				row: 0,
-				col: 0
-			}, {
-				row: numRows() - 1,
-				col: numCols() - 1
-			}));
-			setActiveCell({
-				row: 0,
-				col: 0
-			});
-		});
+	const isColHeaderSelected = (colIndex) => {
+		const sel = api.selection();
+		return sel !== null && colIndex >= sel.min.col && colIndex <= sel.max.col;
 	};
-	const navigate = (deltaRow, deltaCol, isSelection) => {
-		const ac = activeCell();
+	const renderRowHeader = props.renderRowHeader ?? defaultRenderRowHeader;
+	const renderColHeader = props.renderColHeader ?? defaultRenderColHeader;
+	const isCellEditing = (pos) => api.isEditing() && isCellActive(pos);
+	const cellRefs = /* @__PURE__ */ new Map();
+	const getCellKey = (pos) => `${pos.row}:${pos.col}`;
+	createEffect(() => {
+		if (api.isEditing()) return;
+		const ac = api.activeCell();
 		if (!ac) return;
-		if (isSelection) {
-			let anchor = selectionAnchor();
-			if (!anchor) {
-				anchor = ac;
-				setSelectionAnchor(anchor);
-			}
-			const sel = selection();
-			let headRow = anchor.row;
-			let headCol = anchor.col;
-			if (sel) {
-				headRow = sel.min.row === anchor.row ? sel.max.row : sel.min.row;
-				headCol = sel.min.col === anchor.col ? sel.max.col : sel.min.col;
-			}
-			const nextHeadRow = Math.max(0, Math.min(numRows() - 1, headRow + deltaRow));
-			const nextHeadCol = Math.max(0, Math.min(numCols() - 1, headCol + deltaCol));
-			setSelection(normalizeRange(anchor, {
-				row: nextHeadRow,
-				col: nextHeadCol
-			}));
-		} else {
-			const nextPos = {
-				row: Math.max(0, Math.min(numRows() - 1, ac.row + deltaRow)),
-				col: Math.max(0, Math.min(numCols() - 1, ac.col + deltaCol))
-			};
-			setActiveCell(nextPos);
-			setSelection(normalizeRange(nextPos, nextPos));
-			setSelectionAnchor(null);
-		}
-	};
+		cellRefs.get(getCellKey(ac))?.focus();
+	});
 	const handleKeyDown = (e) => {
 		if (e.isComposing) return;
-		if (isEditing()) return;
-		const ac = activeCell();
-		if (!ac) return;
-		switch (e.key) {
-			case "ArrowUp":
-				e.preventDefault();
-				navigate(-1, 0, e.shiftKey);
-				break;
-			case "ArrowDown":
-				e.preventDefault();
-				navigate(1, 0, e.shiftKey);
-				break;
-			case "ArrowLeft":
-				e.preventDefault();
-				navigate(0, -1, e.shiftKey);
-				break;
-			case "ArrowRight":
-				e.preventDefault();
-				navigate(0, 1, e.shiftKey);
-				break;
-			case "Tab":
-				e.preventDefault();
-				navigate(0, e.shiftKey ? -1 : 1, false);
-				break;
-			case "Enter":
-				e.preventDefault();
-				beginCellEdit(ac);
-				break;
-			default: break;
-		}
+		if (api.isEditing()) return;
+		emit({
+			type: "key:down",
+			e
+		});
 	};
-	const cellRefs = /* @__PURE__ */ new Map();
-	const getCellKey = (pos) => `${pos.row}:${pos.col}`;
-	createEffect(() => {
-		if (isEditing()) return;
-		const ac = activeCell();
-		if (ac) cellRefs.get(getCellKey(ac))?.focus();
+	const onUp = (e) => emit({
+		type: "pointer:up",
+		e
+	});
+	onMount(() => {
+		window.addEventListener("pointerup", onUp);
+	});
+	onCleanup(() => {
+		window.removeEventListener("pointerup", onUp);
 	});
 	return (() => {
 		var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$2.nextSibling;
 		var _ref$ = props.ref;
 		typeof _ref$ === "function" ? use(_ref$, _el$) : props.ref = _el$;
 		_el$.$$keydown = handleKeyDown;
-		_el$4.$$click = handleClickOnCorner;
+		_el$4.$$click = (e) => emit({
+			type: "corner:click",
+			e
+		});
 		insert(_el$3, createComponent(Index, {
 			get each() {
-				return Array.from({ length: numCols() });
+				return Array.from({ length: api.numCols() });
 			},
 			children: (_, colIndex) => createComponent(ColHeader, {
 				index: colIndex,
 				get isSelected() {
 					return isColHeaderSelected(colIndex);
 				},
-				onMouseDown: handleMouseDownOnColHeader,
-				onMouseOver: handleMouseOverOnColHeader,
+				onMouseDown: (col, e) => emit({
+					type: "colheader:pointerdown",
+					col,
+					e
+				}),
+				onMouseOver: (col, e) => emit({
+					type: "colheader:pointerover",
+					col,
+					e
+				}),
 				get ["class"]() {
 					return props.classes?.colHeader;
-				}
+				},
+				renderHeader: renderColHeader
 			})
 		}), null);
 		insert(_el$5, createComponent(For, {
@@ -323,11 +174,20 @@ function Gridsheet(props) {
 					get isSelected() {
 						return isRowHeaderSelected(rowIndex());
 					},
-					onMouseDown: handleMouseDownOnRowHeader,
-					onMouseOver: handleMouseOverOnRowHeader,
+					onMouseDown: (r, e) => emit({
+						type: "rowheader:pointerdown",
+						row: r,
+						e
+					}),
+					onMouseOver: (r, e) => emit({
+						type: "rowheader:pointerover",
+						row: r,
+						e
+					}),
 					get ["class"]() {
 						return props.classes?.rowHeader;
-					}
+					},
+					renderHeader: renderRowHeader
 				}), null);
 				insert(_el$6, createComponent(For, {
 					each: row,
@@ -357,20 +217,31 @@ function Gridsheet(props) {
 								col: colIndex()
 							});
 						},
-						beginEdit: beginCellEdit,
-						commitEdit: commitCellEdit,
-						cancelEditing: cancelCellEdit,
-						setActiveCell,
-						setSelection,
+						beginEdit: (pos) => api.beginEdit(pos),
+						commitEdit: (pos, value) => api.commitEdit(pos, value),
+						cancelEditing: () => api.cancelEdit(),
 						get renderCell() {
 							return props.renderCell;
 						},
-						onMouseDown: handleMouseDownOnCell,
-						onMouseOver: handleMouseOverOnCell,
-						registerCellRef: (rowPos, colPos, el) => {
+						onMouseDown: (pos, e) => emit({
+							type: "cell:pointerdown",
+							pos,
+							e
+						}),
+						onMouseOver: (pos, e) => emit({
+							type: "cell:pointerover",
+							pos,
+							e
+						}),
+						onDoubleClick: (pos, e) => emit({
+							type: "cell:dblclick",
+							pos,
+							e
+						}),
+						registerCellRef: (r, c, el) => {
 							cellRefs.set(getCellKey({
-								row: rowPos,
-								col: colPos
+								row: r,
+								col: c
 							}), el);
 						},
 						get ["class"]() {
@@ -403,12 +274,18 @@ function Gridsheet(props) {
 function getRowLabel(rowIndex) {
 	return `${rowIndex + 1}`;
 }
+function defaultRenderRowHeader(ctx) {
+	return memo(() => getRowLabel(ctx.index));
+}
 function RowHeader(props) {
 	return (() => {
 		var _el$7 = _tmpl$3();
-		_el$7.$$mouseover = () => props.onMouseOver(props.index);
-		_el$7.$$mousedown = () => props.onMouseDown(props.index);
-		insert(_el$7, () => getRowLabel(props.index));
+		_el$7.$$mouseover = (e) => props.onMouseOver(props.index, e);
+		_el$7.$$mousedown = (e) => props.onMouseDown(props.index, e);
+		insert(_el$7, () => props.renderHeader({
+			index: props.index,
+			isSelected: props.isSelected
+		}));
 		effect((_p$) => {
 			var _v$6 = typeof props.class === "function" ? props.class({
 				rowIndex: props.index,
@@ -434,12 +311,18 @@ function getColLabel(colIndex) {
 	}
 	return label;
 }
+function defaultRenderColHeader(ctx) {
+	return memo(() => getColLabel(ctx.index));
+}
 function ColHeader(props) {
 	return (() => {
 		var _el$8 = _tmpl$4();
-		_el$8.$$mouseover = () => props.onMouseOver(props.index);
-		_el$8.$$mousedown = () => props.onMouseDown(props.index);
-		insert(_el$8, () => getColLabel(props.index));
+		_el$8.$$mouseover = (e) => props.onMouseOver(props.index, e);
+		_el$8.$$mousedown = (e) => props.onMouseDown(props.index, e);
+		insert(_el$8, () => props.renderHeader({
+			index: props.index,
+			isSelected: props.isSelected
+		}));
 		effect((_p$) => {
 			var _v$8 = typeof props.class === "function" ? props.class({
 				colIndex: props.index,
@@ -461,30 +344,11 @@ function Cell(props) {
 		row: props.row,
 		col: props.col
 	});
-	const commitEdit = (value) => {
-		props.commitEdit({
-			row: props.row,
-			col: props.col
-		}, value);
-	};
+	const commitEdit = (value) => props.commitEdit({
+		row: props.row,
+		col: props.col
+	}, value);
 	const cancelEditing = () => props.cancelEditing();
-	const handleMouseDown = (e) => {
-		props.onMouseDown({
-			row: props.row,
-			col: props.col
-		}, e);
-	};
-	const handleMouseOver = (e) => {
-		props.onMouseOver({
-			row: props.row,
-			col: props.col
-		}, e);
-	};
-	const handleDoubleClick = (e) => {
-		if (e.button !== 0) return;
-		e.preventDefault();
-		if (!props.isEditing) beginEdit();
-	};
 	const className$1 = createMemo(() => {
 		if (typeof props.class === "function") return props.class({
 			row: props.row,
@@ -498,13 +362,22 @@ function Cell(props) {
 			commitEdit,
 			cancelEditing
 		});
-		else return props.class;
+		return props.class;
 	});
 	return (() => {
 		var _el$9 = _tmpl$5();
-		_el$9.$$dblclick = handleDoubleClick;
-		_el$9.$$mouseover = handleMouseOver;
-		_el$9.$$mousedown = handleMouseDown;
+		_el$9.$$dblclick = (e) => props.onDoubleClick({
+			row: props.row,
+			col: props.col
+		}, e);
+		_el$9.$$mouseover = (e) => props.onMouseOver({
+			row: props.row,
+			col: props.col
+		}, e);
+		_el$9.$$mousedown = (e) => props.onMouseDown({
+			row: props.row,
+			col: props.col
+		}, e);
 		use((el) => {
 			cellRef = el;
 			props.registerCellRef(props.row, props.col, el);
@@ -550,5 +423,504 @@ delegateEvents([
 ]);
 
 //#endregion
-export { Gridsheet };
+//#region src/plugin.ts
+/** Compose multiple plugins into a single event handler. */
+function createPluginHost(plugins) {
+	const onEvent = (ev, api) => {
+		for (const p of plugins) if (p.onEvent?.(ev, api) === true) return true;
+		return false;
+	};
+	return { onEvent };
+}
+
+//#endregion
+//#region src/plugins/utils.ts
+function buildClearPatches(range, getEmptyValue) {
+	const patches = [];
+	for (let r = range.min.row; r <= range.max.row; r++) for (let c = range.min.col; c <= range.max.col; c++) {
+		const pos = {
+			row: r,
+			col: c
+		};
+		patches.push({
+			pos,
+			value: getEmptyValue(pos)
+		});
+	}
+	return patches;
+}
+
+//#endregion
+//#region src/plugins/clipboard-memory.ts
+function extractSelection(data, range) {
+	const result = [];
+	for (let r = range.min.row; r <= range.max.row; r++) {
+		const row = [];
+		for (let c = range.min.col; c <= range.max.col; c++) {
+			const rowData = data[r];
+			if (rowData && c < rowData.length) {
+				const value = rowData[c];
+				if (value !== void 0) row.push(value);
+			}
+		}
+		result.push(row);
+	}
+	return result;
+}
+function buildPastePatches(data, start, rows, cols) {
+	const patches = [];
+	for (let r = 0; r < data.length; r++) {
+		const row = data[r];
+		if (!row) continue;
+		for (let c = 0; c < row.length; c++) {
+			const targetRow = start.row + r;
+			const targetCol = start.col + c;
+			if (targetRow < 0 || targetCol < 0) continue;
+			if (targetRow >= rows || targetCol >= cols) continue;
+			const value = row[c];
+			if (value === void 0) continue;
+			patches.push({
+				pos: {
+					row: targetRow,
+					col: targetCol
+				},
+				value
+			});
+		}
+	}
+	return patches;
+}
+/** In-memory clipboard with optional cut clearing. */
+function clipboardMemoryPlugin(options) {
+	let clipboard = null;
+	const copyKeys = options.copyKeys ?? ["c"];
+	const cutKeys = options.cutKeys ?? ["x"];
+	const pasteKeys = options.pasteKeys ?? ["v"];
+	const getEmptyValue = options.getEmptyValue ?? (options.emptyValue !== void 0 ? () => options.emptyValue : null);
+	const setClipboard = (next) => {
+		clipboard = next;
+		options.onClipboardChange?.(next);
+	};
+	return {
+		name: "clipboard-memory",
+		onEvent(ev, api) {
+			if (ev.type !== "key:down") return;
+			const e = ev.e;
+			if (e.isComposing || api.isEditing()) return;
+			const key = e.key.toLowerCase();
+			const isCopy = (e.ctrlKey || e.metaKey) && copyKeys.includes(key);
+			const isCut = (e.ctrlKey || e.metaKey) && cutKeys.includes(key);
+			const isPaste = (e.ctrlKey || e.metaKey) && pasteKeys.includes(key);
+			if (!isCopy && !isCut && !isPaste) return;
+			const sel = api.selection();
+			const ac = api.activeCell();
+			if (isCopy || isCut) {
+				if (!sel) return true;
+				e.preventDefault();
+				(async () => {
+					const copiedData = extractSelection(options.getData(), sel);
+					if ((isCopy ? await options.onCopy?.(copiedData, sel) : await options.onCut?.(copiedData, sel)) === false) return;
+					setClipboard({
+						data: copiedData,
+						range: sel
+					});
+					if (isCut && getEmptyValue) {
+						const patches = buildClearPatches(sel, getEmptyValue);
+						if (patches.length > 0) api.updateCells(patches);
+					}
+				})();
+				return true;
+			}
+			if (isPaste) {
+				if (!ac || !clipboard) return true;
+				e.preventDefault();
+				(async () => {
+					const result = await options.onPaste?.(clipboard.data, ac);
+					if (result === false) return;
+					const patches = result ?? buildPastePatches(clipboard.data, ac, api.numRows(), api.numCols());
+					if (patches.length > 0) api.updateCells(patches);
+				})();
+				return true;
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/clipboard-text.ts
+const DEFAULT_COPY_KEYS = ["c"];
+const DEFAULT_CUT_KEYS = ["x"];
+const DEFAULT_PASTE_KEYS = ["v"];
+function defaultReadText() {
+	if (typeof navigator === "undefined" || !navigator.clipboard) return Promise.resolve("");
+	return navigator.clipboard.readText();
+}
+function defaultWriteText(text) {
+	if (typeof navigator === "undefined" || !navigator.clipboard) return Promise.resolve();
+	return navigator.clipboard.writeText(text);
+}
+function serializeTsv(data, formatCell) {
+	return data.map((row) => row.map(formatCell).join("	")).join("\n");
+}
+function parseTsv(text, target, parseCell) {
+	const rows = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n");
+	const patches = [];
+	for (let r = 0; r < rows.length; r++) {
+		const cols = rows[r]?.split("	") ?? [];
+		for (let c = 0; c < cols.length; c++) patches.push({
+			pos: {
+				row: target.row + r,
+				col: target.col + c
+			},
+			value: parseCell(cols[c] ?? "")
+		});
+	}
+	return patches;
+}
+/** System clipboard integration with TSV defaults. */
+function clipboardTextPlugin(options) {
+	const copyKeys = options.copyKeys ?? DEFAULT_COPY_KEYS;
+	const cutKeys = options.cutKeys ?? DEFAULT_CUT_KEYS;
+	const pasteKeys = options.pasteKeys ?? DEFAULT_PASTE_KEYS;
+	const parseCell = options.parseCell ?? ((raw) => raw);
+	const formatCell = options.formatCell ?? ((value) => String(value));
+	const toText = options.toText ?? ((data) => serializeTsv(data, formatCell));
+	const fromText = options.fromText ?? ((text, target) => parseTsv(text, target, parseCell));
+	const readText = options.readText ?? defaultReadText;
+	const writeText = options.writeText ?? defaultWriteText;
+	const getEmptyValue = options.getEmptyValue ?? (options.emptyValue !== void 0 ? () => options.emptyValue : null);
+	return {
+		name: "clipboard-text",
+		onEvent(ev, api) {
+			if (ev.type !== "key:down") return;
+			const e = ev.e;
+			if (e.isComposing || api.isEditing()) return;
+			const key = e.key.toLowerCase();
+			const isCopy = (e.ctrlKey || e.metaKey) && copyKeys.includes(key);
+			const isCut = (e.ctrlKey || e.metaKey) && cutKeys.includes(key);
+			const isPaste = (e.ctrlKey || e.metaKey) && pasteKeys.includes(key);
+			if (!isCopy && !isCut && !isPaste) return;
+			if (isCopy || isCut) {
+				const sel = api.selection();
+				if (!sel) return true;
+				e.preventDefault();
+				(async () => {
+					await writeText(toText(options.getData().slice(sel.min.row, sel.max.row + 1).map((row) => row.slice(sel.min.col, sel.max.col + 1))));
+					if (isCut && getEmptyValue) {
+						const patches = buildClearPatches(sel, getEmptyValue);
+						if (patches.length > 0) api.updateCells(patches);
+					}
+				})();
+				return true;
+			}
+			if (isPaste) {
+				const ac = api.activeCell();
+				if (!ac) return true;
+				e.preventDefault();
+				(async () => {
+					const text = await readText();
+					if (!text) return;
+					const patches = fromText(text, ac);
+					if (patches === false) return;
+					if (patches.length > 0) api.updateCells(patches);
+				})();
+				return true;
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/delete.ts
+/** Clears selected range with provided empty values. */
+function deletePlugin(options) {
+	const keys = options.keys ?? ["Delete", "Backspace"];
+	const getEmptyValue = options.getEmptyValue ?? (options.emptyValue !== void 0 ? () => options.emptyValue : null);
+	return {
+		name: "delete",
+		onEvent(ev, api) {
+			if (ev.type !== "key:down") return;
+			const e = ev.e;
+			if (e.isComposing || api.isEditing()) return;
+			if (!keys.includes(e.key)) return;
+			const range = api.selection();
+			if (!range) {
+				e.preventDefault();
+				return true;
+			}
+			const result = options.onDelete?.(range);
+			if (result === false) {
+				e.preventDefault();
+				return true;
+			}
+			if (Array.isArray(result)) {
+				api.updateCells(result);
+				e.preventDefault();
+				return true;
+			}
+			if (getEmptyValue) {
+				const patches = buildClearPatches(range, getEmptyValue);
+				if (patches.length > 0) api.updateCells(patches);
+				e.preventDefault();
+				return true;
+			}
+			return true;
+		}
+	};
+}
+
+//#endregion
+//#region src/plugins/editing.ts
+/** Starts editing via double click or configured keys. */
+function editingPlugin(options = {}) {
+	const triggerKeys = options.triggerKeys ?? ["Enter"];
+	return {
+		name: "editing",
+		onEvent(ev, api) {
+			if (ev.type === "cell:dblclick") {
+				if (api.isEditing()) return true;
+				api.beginEdit(ev.pos);
+				return true;
+			}
+			if (ev.type === "key:down") {
+				const e = ev.e;
+				if (e.isComposing || api.isEditing()) return;
+				if (!triggerKeys.includes(e.key)) return;
+				const ac = api.activeCell();
+				if (!ac) return true;
+				e.preventDefault();
+				api.beginEdit(ac);
+				return true;
+			}
+		}
+	};
+}
+
+//#endregion
+//#region src/utils.ts
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+
+//#endregion
+//#region src/plugins/selection.ts
+function moveBy(pos, dr, dc, rows, cols) {
+	return {
+		row: clamp(pos.row + dr, 0, rows - 1),
+		col: clamp(pos.col + dc, 0, cols - 1)
+	};
+}
+/** Selection, drag, and arrow-key navigation. */
+function selectionPlugin() {
+	let anchor = null;
+	let head = null;
+	let dragging = false;
+	let headerMode = null;
+	let previousBodyUserSelect = null;
+	const disableTextSelectionDuringDrag = () => {
+		if (typeof document === "undefined" || previousBodyUserSelect !== null) return;
+		const body = document.body;
+		if (!body) return;
+		previousBodyUserSelect = body.style.userSelect;
+		body.style.userSelect = "none";
+	};
+	const restoreTextSelectionAfterDrag = () => {
+		if (typeof document === "undefined" || previousBodyUserSelect === null) return;
+		const body = document.body;
+		if (body) body.style.userSelect = previousBodyUserSelect;
+		previousBodyUserSelect = null;
+	};
+	const setSingle = (pos, api) => {
+		anchor = pos;
+		head = pos;
+		batch(() => {
+			api.setActiveCell(pos);
+			api.setSelection(normalizeRange(pos, pos));
+		});
+	};
+	const setRange = (rangeAnchor, rangeHead, api) => {
+		anchor = rangeAnchor;
+		head = rangeHead;
+		api.setSelection(normalizeRange(rangeAnchor, rangeHead));
+	};
+	return {
+		name: "selection",
+		onEvent(ev, api) {
+			switch (ev.type) {
+				case "cell:pointerdown":
+					if (api.isEditing()) return true;
+					if (ev.e.button !== 0) return;
+					ev.e.preventDefault();
+					dragging = true;
+					headerMode = null;
+					disableTextSelectionDuringDrag();
+					setSingle(ev.pos, api);
+					return true;
+				case "cell:pointerover":
+					if (!dragging) return;
+					if ((ev.e.buttons & 1) === 0) return;
+					if (!anchor) anchor = ev.pos;
+					setRange(anchor, ev.pos, api);
+					return true;
+				case "pointer:up":
+					if (dragging) dragging = false;
+					headerMode = null;
+					restoreTextSelectionAfterDrag();
+					return;
+				case "corner:click": {
+					const rows = api.numRows();
+					const cols = api.numCols();
+					if (rows <= 0 || cols <= 0) return true;
+					const min = {
+						row: 0,
+						col: 0
+					};
+					const max = {
+						row: rows - 1,
+						col: cols - 1
+					};
+					dragging = false;
+					anchor = min;
+					head = max;
+					batch(() => {
+						api.setActiveCell(min);
+						api.setSelection(normalizeRange(min, max));
+					});
+					return true;
+				}
+				case "rowheader:pointerdown": {
+					const cols = api.numCols();
+					if (cols <= 0) return true;
+					const min = {
+						row: ev.row,
+						col: 0
+					};
+					const max = {
+						row: ev.row,
+						col: cols - 1
+					};
+					dragging = false;
+					headerMode = "row";
+					disableTextSelectionDuringDrag();
+					anchor = min;
+					head = max;
+					batch(() => {
+						api.setActiveCell(min);
+						api.setSelection(normalizeRange(min, max));
+					});
+					return true;
+				}
+				case "rowheader:pointerover": {
+					if (headerMode !== "row") return;
+					if ((ev.e.buttons & 1) === 0) return;
+					const cols = api.numCols();
+					if (cols <= 0) return true;
+					const startRow = anchor?.row ?? ev.row;
+					const min = {
+						row: Math.min(startRow, ev.row),
+						col: 0
+					};
+					const max = {
+						row: Math.max(startRow, ev.row),
+						col: cols - 1
+					};
+					head = max;
+					api.setSelection(normalizeRange(min, max));
+					return true;
+				}
+				case "colheader:pointerdown": {
+					const rows = api.numRows();
+					if (rows <= 0) return true;
+					const min = {
+						row: 0,
+						col: ev.col
+					};
+					const max = {
+						row: rows - 1,
+						col: ev.col
+					};
+					dragging = false;
+					headerMode = "col";
+					disableTextSelectionDuringDrag();
+					anchor = min;
+					head = max;
+					batch(() => {
+						api.setActiveCell(min);
+						api.setSelection(normalizeRange(min, max));
+					});
+					return true;
+				}
+				case "colheader:pointerover": {
+					if (headerMode !== "col") return;
+					if ((ev.e.buttons & 1) === 0) return;
+					const rows = api.numRows();
+					if (rows <= 0) return true;
+					const startCol = anchor?.col ?? ev.col;
+					const min = {
+						row: 0,
+						col: Math.min(startCol, ev.col)
+					};
+					const max = {
+						row: rows - 1,
+						col: Math.max(startCol, ev.col)
+					};
+					head = max;
+					api.setSelection(normalizeRange(min, max));
+					return true;
+				}
+				case "key:down": {
+					const e = ev.e;
+					if (e.isComposing) return;
+					if (api.isEditing()) return;
+					const ac = api.activeCell();
+					if (!ac) return;
+					const key = e.key;
+					const isArrow = key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight";
+					const isTab = key === "Tab";
+					if (!isArrow && !isTab) return;
+					e.preventDefault();
+					const rows = api.numRows();
+					const cols = api.numCols();
+					if (rows <= 0 || cols <= 0) return true;
+					if (isTab) {
+						let next = ac;
+						if (e.shiftKey) {
+							if (ac.col > 0) next = {
+								row: ac.row,
+								col: ac.col - 1
+							};
+							else if (ac.row > 0) next = {
+								row: ac.row - 1,
+								col: cols - 1
+							};
+						} else if (ac.col < cols - 1) next = {
+							row: ac.row,
+							col: ac.col + 1
+						};
+						else if (ac.row < rows - 1) next = {
+							row: ac.row + 1,
+							col: 0
+						};
+						dragging = false;
+						setSingle(next, api);
+						return true;
+					}
+					const dr = key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : 0;
+					const dc = key === "ArrowLeft" ? -1 : key === "ArrowRight" ? 1 : 0;
+					if (e.shiftKey) setRange(anchor ?? ac, moveBy(head ?? ac, dr, dc, rows, cols), api);
+					else {
+						const next = moveBy(ac, dr, dc, rows, cols);
+						dragging = false;
+						setSingle(next, api);
+					}
+					return true;
+				}
+				default: return;
+			}
+		}
+	};
+}
+
+//#endregion
+export { Gridsheet, clipboardMemoryPlugin, clipboardTextPlugin, createPluginHost, deletePlugin, editingPlugin, normalizeRange, selectionPlugin };
 //# sourceMappingURL=index.js.map