@schukai/monster 4.108.0 → 4.110.0

package/source/components/form/sheet.mjs

@@ -0,0 +1,1346 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { isArray, isObject, isString } from "../../types/is.mjs";
+import { ID } from "../../types/id.mjs";
+import { clone } from "../../util/clone.mjs";
+
+import { SheetStyleSheet } from "./stylesheet/sheet.mjs";
+
+export { Sheet };
+
+const gridElementSymbol = Symbol("sheetGrid");
+const gridWrapperSymbol = Symbol("sheetGridWrapper");
+const spacerElementSymbol = Symbol("sheetGridSpacer");
+const addRowButtonSymbol = Symbol("sheetAddRowButton");
+const addColumnButtonSymbol = Symbol("sheetAddColumnButton");
+const lastSnapshotSymbol = Symbol("sheetLastSnapshot");
+const resizeStateSymbol = Symbol("sheetResizeState");
+const skipRenderSymbol = Symbol("sheetSkipRender");
+const lastViewportSymbol = Symbol("sheetLastViewport");
+const scrollFrameSymbol = Symbol("sheetScrollFrame");
+const forceRenderSymbol = Symbol("sheetForceRender");
+const resizeFrameSymbol = Symbol("sheetResizeFrame");
+
+class Sheet extends CustomControl {
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/sheet@@instance");
+	}
+
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initOptionObserver.call(this);
+		updateControl.call(this);
+		return this;
+	}
+
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: { main: getTemplate() },
+			labels: getTranslations(),
+			classes: {
+				button: "monster-button-outline-primary",
+			},
+			features: {
+				addRows: false,
+				addColumns: false,
+				editable: true,
+				resizeRows: true,
+				resizeColumns: true,
+				virtualize: false,
+			},
+			virtualization: {
+				rowBuffer: 4,
+				columnBuffer: 2,
+			},
+			columns: defaultColumns(3),
+			rows: defaultRows(3),
+			sizes: {
+				columns: {},
+				rows: {},
+				rowHeaderWidth: 56,
+				headerHeight: 32,
+			},
+			constraints: {
+				minColumnWidth: 64,
+				maxColumnWidth: 360,
+				minRowHeight: 28,
+				maxRowHeight: 120,
+			},
+			value: { cells: {}, formulas: {} },
+			disabled: false,
+			cell: {
+				placeholder: "",
+			},
+		});
+	}
+
+	static getTag() {
+		return "monster-sheet";
+	}
+
+	static getCSSStyleSheet() {
+		return [SheetStyleSheet];
+	}
+
+	get value() {
+		return this.getOption("value");
+	}
+
+	set value(value) {
+		this.setOption("value", value);
+		this[forceRenderSymbol] = true;
+		setFormValueSafe.call(this);
+		updateControl.call(this);
+	}
+}
+
+function initControlReferences() {
+	const root = this.shadowRoot;
+	this[gridElementSymbol] = root.querySelector(`[${ATTRIBUTE_ROLE}=grid]`);
+	this[gridWrapperSymbol] = root.querySelector(
+		`[${ATTRIBUTE_ROLE}=grid-wrapper]`,
+	);
+	if (this[gridWrapperSymbol]) {
+		let spacer = this[gridWrapperSymbol].querySelector(
+			`[${ATTRIBUTE_ROLE}=spacer]`,
+		);
+		if (!spacer) {
+			spacer = document.createElement("div");
+			spacer.setAttribute(ATTRIBUTE_ROLE, "spacer");
+			spacer.setAttribute("part", "spacer");
+			this[gridWrapperSymbol].prepend(spacer);
+		}
+		this[spacerElementSymbol] = spacer;
+	}
+	this[addRowButtonSymbol] = root.querySelector(`[${ATTRIBUTE_ROLE}=add-row]`);
+	this[addColumnButtonSymbol] = root.querySelector(
+		`[${ATTRIBUTE_ROLE}=add-column]`,
+	);
+}
+
+function initEventHandler() {
+	this[addRowButtonSymbol].addEventListener("click", () => {
+		if (!canAddRows.call(this)) return;
+		addRow.call(this);
+	});
+
+	this[addColumnButtonSymbol].addEventListener("click", () => {
+		if (!canAddColumns.call(this)) return;
+		addColumn.call(this);
+	});
+
+	this[gridElementSymbol].addEventListener("input", (event) => {
+		const input = event.target;
+		if (!(input instanceof HTMLInputElement)) return;
+		const cell = input.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (!rowId || !colId) return;
+		setCellValue.call(this, rowId, colId, input.value);
+	});
+
+	this[gridElementSymbol].addEventListener("focusin", (event) => {
+		const input = event.target;
+		if (!(input instanceof HTMLInputElement)) return;
+		const cell = input.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (!rowId || !colId) return;
+		const data = normalizeValue.call(this);
+		const formula = data.formulas?.[rowId]?.[colId];
+		if (isString(formula)) {
+			input.value = formula;
+		}
+	});
+
+	this[gridElementSymbol].addEventListener("focusout", (event) => {
+		const input = event.target;
+		if (!(input instanceof HTMLInputElement)) return;
+		const cell = input.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (!rowId || !colId) return;
+		refreshDisplayValues.call(this);
+	});
+
+	this[gridElementSymbol].addEventListener("pointerdown", (event) => {
+		const columnHandle = event.target.closest(
+			`[${ATTRIBUTE_ROLE}=column-resize]`,
+		);
+		if (columnHandle) {
+			if (!this.getOption("features.resizeColumns", true)) return;
+			startColumnResize.call(this, event, columnHandle);
+			return;
+		}
+
+		const rowHandle = event.target.closest(`[${ATTRIBUTE_ROLE}=row-resize]`);
+		if (rowHandle) {
+			if (!this.getOption("features.resizeRows", true)) return;
+			startRowResize.call(this, event, rowHandle);
+		}
+	});
+
+	if (this[gridWrapperSymbol]) {
+		this[gridWrapperSymbol].addEventListener("scroll", () => {
+			if (!this.getOption("features.virtualize", false)) return;
+			if (this[scrollFrameSymbol]) return;
+			this[scrollFrameSymbol] = requestAnimationFrame(() => {
+				this[scrollFrameSymbol] = null;
+				updateControl.call(this);
+			});
+		});
+	}
+}
+
+function initOptionObserver() {
+	this[lastSnapshotSymbol] = "";
+	this.attachObserver(
+		new Observer(() => {
+			const snapshot = JSON.stringify({
+				value: this.getOption("value"),
+				columns: this.getOption("columns"),
+				rows: this.getOption("rows"),
+				sizes: this.getOption("sizes"),
+				features: this.getOption("features"),
+				disabled: this.getOption("disabled"),
+				classes: this.getOption("classes"),
+				labels: this.getOption("labels"),
+				cell: this.getOption("cell"),
+			});
+			if (this[skipRenderSymbol]) {
+				this[lastSnapshotSymbol] = snapshot;
+				this[skipRenderSymbol] = false;
+				return;
+			}
+			if (snapshot === this[lastSnapshotSymbol]) return;
+			this[lastSnapshotSymbol] = snapshot;
+			updateControl.call(this);
+		}),
+	);
+}
+
+function updateControl() {
+	const normalized = normalizeValue.call(this);
+	const current = this.getOption("value");
+	if (!isSameValue(current, normalized)) {
+		this.setOption("value", normalized);
+		setFormValueSafe.call(this);
+	}
+
+	const virtualize = this.getOption("features.virtualize", false) === true;
+	if (virtualize) {
+		this.setAttribute("data-virtualized", "");
+		if (this[forceRenderSymbol]) {
+			this[lastViewportSymbol] = null;
+			this[forceRenderSymbol] = false;
+		}
+		renderVirtual.call(this, normalized);
+	} else {
+		if (this.hasAttribute("data-virtualized")) {
+			this.removeAttribute("data-virtualized");
+		}
+		if (this[spacerElementSymbol]) {
+			this[spacerElementSymbol].style.width = "0px";
+			this[spacerElementSymbol].style.height = "0px";
+		}
+		this[lastViewportSymbol] = null;
+		const displayCells = buildDisplayCells.call(this, normalized);
+		renderGrid.call(this, normalized, displayCells);
+	}
+	syncToolbarState.call(this);
+	applyDisabledState.call(this);
+}
+
+function syncToolbarState() {
+	const addRow = canAddRows.call(this);
+	const addCol = canAddColumns.call(this);
+	const labels = this.getOption("labels", {});
+	const buttonClass = this.getOption("classes.button", "");
+
+	this[addRowButtonSymbol].hidden = !addRow;
+	this[addColumnButtonSymbol].hidden = !addCol;
+	this[addRowButtonSymbol].disabled =
+		this.getOption("disabled", false) || !addRow;
+	this[addColumnButtonSymbol].disabled =
+		this.getOption("disabled", false) || !addCol;
+
+	this[addRowButtonSymbol].className = buttonClass;
+	this[addColumnButtonSymbol].className = buttonClass;
+	if (isString(labels.addRow)) {
+		this[addRowButtonSymbol].textContent = labels.addRow;
+	}
+	if (isString(labels.addColumn)) {
+		this[addColumnButtonSymbol].textContent = labels.addColumn;
+	}
+}
+
+function applyDisabledState() {
+	const disabled = this.getOption("disabled", false);
+	const editable = this.getOption("features.editable", true);
+	const inputs = this.shadowRoot.querySelectorAll(
+		`[${ATTRIBUTE_ROLE}=cell-input]`,
+	);
+	inputs.forEach((input) => {
+		input.disabled = disabled || !editable;
+	});
+}
+
+function renderGrid(value, displayCells) {
+	const grid = this[gridElementSymbol];
+	if (!grid) return;
+	grid.style.position = "";
+	grid.style.left = "";
+	grid.style.top = "";
+	grid.style.transform = "";
+	grid.textContent = "";
+
+	const fragment = document.createDocumentFragment();
+	fragment.appendChild(buildCornerCell.call(this));
+
+	const lastColumnId =
+		value.columns.length > 0
+			? value.columns[value.columns.length - 1].id
+			: null;
+
+	for (const col of value.columns) {
+		fragment.appendChild(
+			buildColumnHeader.call(this, col, col.id === lastColumnId),
+		);
+	}
+
+	for (const row of value.rows) {
+		fragment.appendChild(buildRowHeader.call(this, row));
+		for (const col of value.columns) {
+			fragment.appendChild(
+				buildCell.call(this, row, col, displayCells, col.id === lastColumnId),
+			);
+		}
+	}
+
+	grid.appendChild(fragment);
+	applyGridTemplate.call(this, value);
+}
+
+function renderVirtual(value) {
+	const grid = this[gridElementSymbol];
+	const wrapper = this[gridWrapperSymbol];
+	const spacer = this[spacerElementSymbol];
+	if (!grid || !wrapper || !spacer) return;
+
+	const sizes = getVirtualSizes.call(this, value);
+	const viewportWidth = wrapper.clientWidth;
+	const viewportHeight = wrapper.clientHeight;
+	if (viewportWidth === 0 || viewportHeight === 0) {
+		if (!this[scrollFrameSymbol]) {
+			this[scrollFrameSymbol] = requestAnimationFrame(() => {
+				this[scrollFrameSymbol] = null;
+				updateControl.call(this);
+			});
+		}
+		return;
+	}
+	const scrollLeft = wrapper.scrollLeft;
+	const scrollTop = wrapper.scrollTop;
+	const bufferCols = getSizeNumber(
+		this.getOption("virtualization.columnBuffer"),
+		2,
+	);
+	const bufferRows = getSizeNumber(
+		this.getOption("virtualization.rowBuffer"),
+		4,
+	);
+
+	const visible = getVisibleRange(
+		sizes.columnOffsets,
+		sizes.rowOffsets,
+		scrollLeft - sizes.rowHeaderWidth,
+		scrollTop - sizes.headerHeight,
+		viewportWidth,
+		viewportHeight,
+	);
+
+	const colStart = Math.max(0, visible.colStart - bufferCols);
+	const colEnd = Math.min(
+		value.columns.length - 1,
+		visible.colEnd + bufferCols,
+	);
+	const rowStart = Math.max(0, visible.rowStart - bufferRows);
+	const rowEnd = Math.min(value.rows.length - 1, visible.rowEnd + bufferRows);
+
+	const viewportKey = `${colStart}-${colEnd}-${rowStart}-${rowEnd}-${sizes.totalWidth}-${sizes.totalHeight}`;
+	if (this[lastViewportSymbol] === viewportKey) return;
+	this[lastViewportSymbol] = viewportKey;
+
+	spacer.style.width = `${sizes.totalWidth}px`;
+	spacer.style.height = `${sizes.totalHeight}px`;
+
+	const offsetX = sizes.rowHeaderWidth + sizes.columnOffsets[colStart];
+	const offsetY = sizes.headerHeight + sizes.rowOffsets[rowStart];
+
+	grid.style.position = "absolute";
+	grid.style.left = "0";
+	grid.style.top = "0";
+	grid.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+
+	const visibleColumns = value.columns.slice(colStart, colEnd + 1);
+	const visibleRows = value.rows.slice(rowStart, rowEnd + 1);
+
+	const visibleWidths = visibleColumns.map(
+		(col, index) => `${sizes.columnWidths[colStart + index]}px`,
+	);
+	const visibleHeights = visibleRows.map(
+		(row, index) => `${sizes.rowHeights[rowStart + index]}px`,
+	);
+
+	grid.style.gridTemplateColumns = `${sizes.rowHeaderWidth}px ${visibleWidths.join(" ")}`;
+	grid.style.gridTemplateRows = `${sizes.headerHeight}px ${visibleHeights.join(" ")}`;
+
+	grid.textContent = "";
+	const fragment = document.createDocumentFragment();
+	fragment.appendChild(buildCornerCell.call(this));
+
+	const lastVisibleColumnId =
+		visibleColumns.length > 0
+			? visibleColumns[visibleColumns.length - 1].id
+			: null;
+
+	for (const col of visibleColumns) {
+		fragment.appendChild(
+			buildColumnHeader.call(this, col, col.id === lastVisibleColumnId),
+		);
+	}
+
+	const errors = [];
+	const getDisplayValue = (rowId, colId) => {
+		const formula = value.formulas?.[rowId]?.[colId];
+		if (isString(formula)) {
+			const evaluated = evaluateFormula.call(this, value, formula);
+			if (Number.isFinite(evaluated)) return evaluated;
+			errors.push({ rowId, colId, formula });
+			return "#ERR";
+		}
+		const raw = value.cells?.[rowId]?.[colId];
+		return raw === undefined || raw === null ? "" : raw;
+	};
+
+	for (const row of visibleRows) {
+		fragment.appendChild(buildRowHeader.call(this, row));
+		for (const col of visibleColumns) {
+			fragment.appendChild(
+				buildCell.call(
+					this,
+					row,
+					col,
+					getDisplayValue,
+					col.id === lastVisibleColumnId,
+				),
+			);
+		}
+	}
+
+	if (errors.length > 0) {
+		fireCustomEvent(this, "monster-sheet-formula-error", { errors });
+	}
+
+	grid.appendChild(fragment);
+}
+
+function buildCornerCell() {
+	const labels = this.getOption("labels", {});
+	const cell = document.createElement("div");
+	cell.setAttribute(ATTRIBUTE_ROLE, "corner");
+	cell.setAttribute("part", "corner");
+	cell.textContent = isString(labels.corner) ? labels.corner : "";
+	return cell;
+}
+
+function buildColumnHeader(column, isLastColumn) {
+	const cell = document.createElement("div");
+	cell.setAttribute(ATTRIBUTE_ROLE, "column-header");
+	cell.setAttribute("part", "column-header");
+	cell.dataset.colId = column.id;
+	if (isLastColumn) {
+		cell.dataset.lastColumn = "true";
+	}
+	cell.textContent = column.label ?? column.id;
+
+	if (this.getOption("features.resizeColumns", true)) {
+		const handle = document.createElement("span");
+		handle.setAttribute(ATTRIBUTE_ROLE, "column-resize");
+		handle.setAttribute("part", "column-resize");
+		handle.dataset.colId = column.id;
+		cell.appendChild(handle);
+	}
+	return cell;
+}
+
+function buildRowHeader(row) {
+	const cell = document.createElement("div");
+	cell.setAttribute(ATTRIBUTE_ROLE, "row-header");
+	cell.setAttribute("part", "row-header");
+	cell.dataset.rowId = row.id;
+	cell.textContent = row.label ?? row.id;
+
+	if (this.getOption("features.resizeRows", true)) {
+		const handle = document.createElement("span");
+		handle.setAttribute(ATTRIBUTE_ROLE, "row-resize");
+		handle.setAttribute("part", "row-resize");
+		handle.dataset.rowId = row.id;
+		cell.appendChild(handle);
+	}
+	return cell;
+}
+
+function buildCell(row, column, cells, isLastColumn) {
+	const wrapper = document.createElement("div");
+	wrapper.setAttribute(ATTRIBUTE_ROLE, "cell");
+	wrapper.setAttribute("part", "cell");
+	wrapper.dataset.rowId = row.id;
+	wrapper.dataset.colId = column.id;
+	if (isLastColumn) {
+		wrapper.dataset.lastColumn = "true";
+	}
+
+	const input = document.createElement("input");
+	input.setAttribute(ATTRIBUTE_ROLE, "cell-input");
+	input.setAttribute("part", "cell-input");
+	input.type = "text";
+	input.autocomplete = "off";
+	input.inputMode = "text";
+	input.placeholder = this.getOption("cell.placeholder", "");
+	const value =
+		typeof cells === "function"
+			? cells(row.id, column.id)
+			: cells?.[row.id]?.[column.id];
+	input.value = value === undefined || value === null ? "" : String(value);
+	input.disabled =
+		this.getOption("disabled", false) ||
+		!this.getOption("features.editable", true);
+
+	wrapper.appendChild(input);
+	return wrapper;
+}
+
+function applyGridTemplate(value) {
+	const sizes = this.getOption("sizes", {});
+	const rowHeaderWidth = getRowHeaderWidthNumber.call(
+		this,
+		sizes.rowHeaderWidth,
+		value.rows,
+	);
+	const headerHeight = getSizeNumber(sizes.headerHeight, 32);
+
+	const columnSizes = value.columns.map((col) =>
+		getColumnWidth.call(this, col.id),
+	);
+	const rowSizes = value.rows.map((row) => getRowHeight.call(this, row.id));
+
+	this[gridElementSymbol].style.gridTemplateColumns =
+		`${rowHeaderWidth}px ${columnSizes.join(" ")}`;
+	this[gridElementSymbol].style.gridTemplateRows =
+		`${headerHeight}px ${rowSizes.join(" ")}`;
+}
+
+function getVirtualSizes(value) {
+	const sizes = this.getOption("sizes", {});
+	const rowHeaderWidth = getRowHeaderWidthNumber.call(
+		this,
+		sizes.rowHeaderWidth,
+		value.rows,
+	);
+	const headerHeight = getSizeNumber(sizes.headerHeight, 32);
+	const columnWidths = value.columns.map((col) =>
+		getColumnWidthNumber.call(this, col.id),
+	);
+	const rowHeights = value.rows.map((row) =>
+		getRowHeightNumber.call(this, row.id),
+	);
+
+	const columnOffsets = buildOffsets(columnWidths);
+	const rowOffsets = buildOffsets(rowHeights);
+
+	const totalWidth =
+		rowHeaderWidth +
+		(columnWidths.length > 0
+			? columnOffsets[columnOffsets.length - 1] +
+				columnWidths[columnWidths.length - 1]
+			: 0);
+	const totalHeight =
+		headerHeight +
+		(rowHeights.length > 0
+			? rowOffsets[rowOffsets.length - 1] + rowHeights[rowHeights.length - 1]
+			: 0);
+
+	return {
+		rowHeaderWidth,
+		headerHeight,
+		columnWidths,
+		rowHeights,
+		columnOffsets,
+		rowOffsets,
+		totalWidth,
+		totalHeight,
+	};
+}
+
+function buildOffsets(values) {
+	const offsets = [];
+	let current = 0;
+	for (const value of values) {
+		offsets.push(current);
+		current += value;
+	}
+	return offsets;
+}
+
+function getVisibleRange(
+	columnOffsets,
+	rowOffsets,
+	scrollLeft,
+	scrollTop,
+	viewportWidth,
+	viewportHeight,
+) {
+	const colStart = findStartIndex(columnOffsets, Math.max(0, scrollLeft));
+	const colEnd = findEndIndex(
+		columnOffsets,
+		Math.max(0, scrollLeft) + viewportWidth,
+	);
+	const rowStart = findStartIndex(rowOffsets, Math.max(0, scrollTop));
+	const rowEnd = findEndIndex(
+		rowOffsets,
+		Math.max(0, scrollTop) + viewportHeight,
+	);
+	return { colStart, colEnd, rowStart, rowEnd };
+}
+
+function findStartIndex(offsets, value) {
+	let low = 0;
+	let high = offsets.length - 1;
+	let result = 0;
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		if (offsets[mid] <= value) {
+			result = mid;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+	return result;
+}
+
+function findEndIndex(offsets, value) {
+	let low = 0;
+	let high = offsets.length - 1;
+	let result = offsets.length - 1;
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		if (offsets[mid] < value) {
+			low = mid + 1;
+		} else {
+			result = mid;
+			high = mid - 1;
+		}
+	}
+	return Math.max(0, result);
+}
+
+function normalizeValue() {
+	const optionsValue = this.getOption("value");
+	const columns = normalizeColumns(
+		optionsValue?.columns ?? this.getOption("columns"),
+	);
+	const rows = normalizeRows(optionsValue?.rows ?? this.getOption("rows"));
+	const cells = isObject(optionsValue?.cells) ? clone(optionsValue.cells) : {};
+	const formulas = isObject(optionsValue?.formulas)
+		? clone(optionsValue.formulas)
+		: {};
+
+	return { columns, rows, cells, formulas };
+}
+
+function normalizeColumns(columns) {
+	const list = isArray(columns) ? columns : [];
+	return list.map((col, index) => {
+		if (isString(col)) {
+			return { id: col, label: col };
+		}
+		if (isObject(col)) {
+			const id = isString(col.id) ? col.id : nextColumnLabel(index);
+			return { id, label: col.label ?? id };
+		}
+		const id = nextColumnLabel(index);
+		return { id, label: id };
+	});
+}
+
+function normalizeRows(rows) {
+	const list = isArray(rows) ? rows : [];
+	return list.map((row, index) => {
+		if (isString(row)) {
+			return { id: row, label: row };
+		}
+		if (isObject(row)) {
+			const id = isString(row.id) ? row.id : nextRowLabel(index);
+			return { id, label: row.label ?? id };
+		}
+		const id = nextRowLabel(index);
+		return { id, label: id };
+	});
+}
+
+function setCellValue(rowId, colId, value) {
+	const data = normalizeValue.call(this);
+	if (!data.cells[rowId]) data.cells[rowId] = {};
+	if (!data.formulas[rowId]) data.formulas[rowId] = {};
+	const next = isString(value) ? value : 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] = value;
+	}
+	this.setOption("value", data);
+	this[skipRenderSymbol] = true;
+	this[forceRenderSymbol] = true;
+	setFormValueSafe.call(this);
+	fireCustomEvent(this, "monster-sheet-change", {
+		value: data,
+		cell: { rowId, colId, value },
+	});
+}
+
+function addRow() {
+	const data = normalizeValue.call(this);
+	const newRow = createRow(data.rows.length, data.rows);
+	data.rows.push(newRow);
+	this.setOption("value", data);
+	this[skipRenderSymbol] = true;
+	setFormValueSafe.call(this);
+	fireCustomEvent(this, "monster-sheet-add-row", { row: newRow, value: data });
+	updateControl.call(this);
+}
+
+function addColumn() {
+	const data = normalizeValue.call(this);
+	const newColumn = createColumn(data.columns.length, data.columns);
+	data.columns.push(newColumn);
+	this.setOption("value", data);
+	this[skipRenderSymbol] = true;
+	setFormValueSafe.call(this);
+	fireCustomEvent(this, "monster-sheet-add-column", {
+		column: newColumn,
+		value: data,
+	});
+	updateControl.call(this);
+}
+
+function canAddRows() {
+	return this.getOption("features.addRows", false) === true;
+}
+
+function canAddColumns() {
+	return this.getOption("features.addColumns", false) === true;
+}
+
+function createColumn(index, columns) {
+	const label = nextColumnLabel(index);
+	const existing = new Set(columns.map((col) => col.id));
+	const id = existing.has(label) ? new ID("column-").toString() : label;
+	return { id, label };
+}
+
+function createRow(index, rows) {
+	const label = nextRowLabel(index);
+	const existing = new Set(rows.map((row) => row.id));
+	const id = existing.has(label) ? new ID("row-").toString() : label;
+	return { id, label };
+}
+
+function nextColumnLabel(index) {
+	let value = index + 1;
+	let label = "";
+	while (value > 0) {
+		const mod = (value - 1) % 26;
+		label = String.fromCharCode(65 + mod) + label;
+		value = Math.floor((value - 1) / 26);
+	}
+	return label;
+}
+
+function nextRowLabel(index) {
+	return String(index + 1);
+}
+
+function defaultColumns(count) {
+	return Array.from({ length: count }, (_, i) => {
+		const label = nextColumnLabel(i);
+		return { id: label, label };
+	});
+}
+
+function defaultRows(count) {
+	return Array.from({ length: count }, (_, i) => {
+		const label = nextRowLabel(i);
+		return { id: label, label };
+	});
+}
+
+function getSizeNumber(value, fallback) {
+	const n = Number(value);
+	return Number.isFinite(n) ? n : fallback;
+}
+
+function getColumnWidth(columnId) {
+	const sizes = this.getOption("sizes.columns", {});
+	const width = getSizeNumber(sizes?.[columnId], 120);
+	const min = getSizeNumber(this.getOption("constraints.minColumnWidth"), 64);
+	const max = getSizeNumber(this.getOption("constraints.maxColumnWidth"), 360);
+	return `${clamp(width, min, max)}px`;
+}
+
+function getColumnWidthNumber(columnId) {
+	const sizes = this.getOption("sizes.columns", {});
+	const width = getSizeNumber(sizes?.[columnId], 120);
+	const min = getSizeNumber(this.getOption("constraints.minColumnWidth"), 64);
+	const max = getSizeNumber(this.getOption("constraints.maxColumnWidth"), 360);
+	return clamp(width, min, max);
+}
+
+function getRowHeight(rowId) {
+	const sizes = this.getOption("sizes.rows", {});
+	const height = getSizeNumber(sizes?.[rowId], 32);
+	const min = getSizeNumber(this.getOption("constraints.minRowHeight"), 28);
+	const max = getSizeNumber(this.getOption("constraints.maxRowHeight"), 120);
+	return `${clamp(height, min, max)}px`;
+}
+
+function getRowHeightNumber(rowId) {
+	const sizes = this.getOption("sizes.rows", {});
+	const height = getSizeNumber(sizes?.[rowId], 32);
+	const min = getSizeNumber(this.getOption("constraints.minRowHeight"), 28);
+	const max = getSizeNumber(this.getOption("constraints.maxRowHeight"), 120);
+	return clamp(height, min, max);
+}
+
+function getRowHeaderWidthNumber(value, rows) {
+	if (value === "auto" || value === null || value === undefined) {
+		const maxLen = getMaxRowLabelLength(rows);
+		const base = 16;
+		const charWidth = 8;
+		return Math.max(56, base + maxLen * charWidth);
+	}
+	return getSizeNumber(value, 56);
+}
+
+function getMaxRowLabelLength(rows) {
+	if (!isArray(rows) || rows.length === 0) return 1;
+	const last = rows[rows.length - 1];
+	const label = isString(last?.label) ? last.label : last?.id;
+	const text = label === undefined || label === null ? "" : String(label);
+	if (/^\d+$/.test(text)) {
+		return String(rows.length).length;
+	}
+	return text.length;
+}
+
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+
+function startColumnResize(event, handle) {
+	const colId = handle.dataset.colId;
+	if (!colId) return;
+	event.preventDefault();
+	event.stopPropagation();
+	const grid = this[gridElementSymbol];
+	const headerCell = handle.parentElement;
+	if (!headerCell) return;
+	const startWidth = headerCell.getBoundingClientRect().width;
+	this.setAttribute("data-resizing", "");
+	this[resizeStateSymbol] = {
+		kind: "column",
+		id: colId,
+		start: event.clientX,
+		startSize: startWidth,
+	};
+	grid.setPointerCapture(event.pointerId);
+	grid.addEventListener("pointermove", handleResizeMove);
+	grid.addEventListener("pointerup", handleResizeEnd);
+	grid.addEventListener("pointercancel", handleResizeEnd);
+}
+
+function startRowResize(event, handle) {
+	const rowId = handle.dataset.rowId;
+	if (!rowId) return;
+	event.preventDefault();
+	event.stopPropagation();
+	const headerCell = handle.parentElement;
+	if (!headerCell) return;
+	const startHeight = headerCell.getBoundingClientRect().height;
+	const grid = this[gridElementSymbol];
+	this.setAttribute("data-resizing", "");
+	this[resizeStateSymbol] = {
+		kind: "row",
+		id: rowId,
+		start: event.clientY,
+		startSize: startHeight,
+	};
+	grid.setPointerCapture(event.pointerId);
+	grid.addEventListener("pointermove", handleResizeMove);
+	grid.addEventListener("pointerup", handleResizeEnd);
+	grid.addEventListener("pointercancel", handleResizeEnd);
+}
+
+function handleResizeMove(event) {
+	const grid = event.currentTarget;
+	const sheet = grid.getRootNode().host;
+	if (!sheet || !sheet[resizeStateSymbol]) return;
+	const state = sheet[resizeStateSymbol];
+	if (state.kind === "column") {
+		const delta = event.clientX - state.start;
+		const size = state.startSize + delta;
+		setColumnSize.call(sheet, state.id, size);
+	} else if (state.kind === "row") {
+		const delta = event.clientY - state.start;
+		const size = state.startSize + delta;
+		setRowSize.call(sheet, state.id, size);
+	}
+}
+
+function handleResizeEnd(event) {
+	const grid = event.currentTarget;
+	const sheet = grid.getRootNode().host;
+	if (!sheet) return;
+	if (sheet.hasAttribute("data-resizing")) {
+		sheet.removeAttribute("data-resizing");
+	}
+	grid.releasePointerCapture(event.pointerId);
+	grid.removeEventListener("pointermove", handleResizeMove);
+	grid.removeEventListener("pointerup", handleResizeEnd);
+	grid.removeEventListener("pointercancel", handleResizeEnd);
+	sheet[resizeStateSymbol] = null;
+}
+
+function setColumnSize(columnId, size) {
+	const min = getSizeNumber(this.getOption("constraints.minColumnWidth"), 64);
+	const max = getSizeNumber(this.getOption("constraints.maxColumnWidth"), 360);
+	const next = clamp(size, min, max);
+	this.setOption(`sizes.columns.${columnId}`, next);
+	this[skipRenderSymbol] = true;
+	if (this.getOption("features.virtualize", false) === true) {
+		scheduleVirtualResizeRender.call(this);
+	} else {
+		applyGridTemplate.call(this, normalizeValue.call(this));
+	}
+	fireCustomEvent(this, "monster-sheet-resize-column", {
+		columnId,
+		width: next,
+	});
+}
+
+function setRowSize(rowId, size) {
+	const min = getSizeNumber(this.getOption("constraints.minRowHeight"), 28);
+	const max = getSizeNumber(this.getOption("constraints.maxRowHeight"), 120);
+	const next = clamp(size, min, max);
+	this.setOption(`sizes.rows.${rowId}`, next);
+	this[skipRenderSymbol] = true;
+	if (this.getOption("features.virtualize", false) === true) {
+		scheduleVirtualResizeRender.call(this);
+	} else {
+		applyGridTemplate.call(this, normalizeValue.call(this));
+	}
+	fireCustomEvent(this, "monster-sheet-resize-row", {
+		rowId,
+		height: next,
+	});
+}
+
+function setFormValueSafe() {
+	try {
+		this.setFormValue(this.value);
+	} catch (e) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+	}
+}
+
+function isSameValue(a, b) {
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch (e) {
+		return false;
+	}
+}
+
+function refreshDisplayValues() {
+	const data = normalizeValue.call(this);
+	const virtualize = this.getOption("features.virtualize", false) === true;
+	const displayCells = virtualize ? null : buildDisplayCells.call(this, data);
+	const active = this.shadowRoot?.activeElement;
+	const inputs = this.shadowRoot.querySelectorAll(
+		`[${ATTRIBUTE_ROLE}=cell-input]`,
+	);
+
+	inputs.forEach((input) => {
+		if (!(input instanceof HTMLInputElement)) return;
+		if (input === active) return;
+		const cell = input.closest(`[${ATTRIBUTE_ROLE}=cell]`);
+		if (!cell) return;
+		const rowId = cell.dataset.rowId;
+		const colId = cell.dataset.colId;
+		if (!rowId || !colId) return;
+		const value = virtualize
+			? getCellDisplayValue.call(this, data, rowId, colId)
+			: displayCells?.[rowId]?.[colId];
+		input.value = value === undefined || value === null ? "" : String(value);
+	});
+}
+
+function scheduleVirtualResizeRender() {
+	if (this[resizeFrameSymbol]) return;
+	this[resizeFrameSymbol] = requestAnimationFrame(() => {
+		this[resizeFrameSymbol] = null;
+		this[forceRenderSymbol] = true;
+		updateControl.call(this);
+	});
+}
+
+function getCellDisplayValue(data, rowId, colId) {
+	const formula = data.formulas?.[rowId]?.[colId];
+	if (isString(formula)) {
+		const evaluated = evaluateFormula.call(this, data, formula);
+		return Number.isFinite(evaluated) ? evaluated : "#ERR";
+	}
+	const raw = data.cells?.[rowId]?.[colId];
+	return raw === undefined || raw === null ? "" : raw;
+}
+
+function buildDisplayCells(data) {
+	const result = clone(data.cells);
+	const errors = [];
+
+	for (const rowId of Object.keys(data.formulas || {})) {
+		for (const colId of Object.keys(data.formulas[rowId] || {})) {
+			const formula = data.formulas[rowId][colId];
+			if (!isString(formula)) continue;
+			const value = evaluateFormula.call(this, data, formula);
+			if (!result[rowId]) result[rowId] = {};
+			if (Number.isFinite(value)) {
+				result[rowId][colId] = value;
+			} else {
+				result[rowId][colId] = "#ERR";
+				errors.push({ rowId, colId, formula });
+			}
+		}
+	}
+
+	if (errors.length > 0) {
+		fireCustomEvent(this, "monster-sheet-formula-error", { errors });
+	}
+
+	return result;
+}
+
+function evaluateFormula(data, formula, stack = []) {
+	const expr = formula.trim().startsWith("=")
+		? formula.trim().slice(1)
+		: formula.trim();
+	if (expr === "") return NaN;
+	try {
+		const tokens = tokenizeFormula(expr);
+		const rpn = toRpn(tokens);
+		const value = evalRpn.call(this, data, rpn, stack);
+		return Number.isFinite(value) ? value : NaN;
+	} catch (e) {
+		return NaN;
+	}
+}
+
+function tokenizeFormula(expr) {
+	const tokens = [];
+	const pattern = /\s*([A-Za-z]+[0-9]+|\d+(?:\.\d+)?|[()+\-*/])\s*/g;
+	let match;
+	while ((match = pattern.exec(expr)) !== null) {
+		tokens.push(match[1]);
+	}
+	return tokens;
+}
+
+function toRpn(tokens) {
+	const output = [];
+	const ops = [];
+	const precedence = { "+": 1, "-": 1, "*": 2, "/": 2 };
+
+	for (const token of tokens) {
+		if (isNumberToken(token) || isRefToken(token)) {
+			output.push(token);
+			continue;
+		}
+
+		if (token === "(") {
+			ops.push(token);
+			continue;
+		}
+		if (token === ")") {
+			while (ops.length > 0 && ops[ops.length - 1] !== "(") {
+				output.push(ops.pop());
+			}
+			ops.pop();
+			continue;
+		}
+
+		while (
+			ops.length > 0 &&
+			ops[ops.length - 1] !== "(" &&
+			precedence[ops[ops.length - 1]] >= precedence[token]
+		) {
+			output.push(ops.pop());
+		}
+		ops.push(token);
+	}
+
+	while (ops.length > 0) {
+		output.push(ops.pop());
+	}
+
+	return output;
+}
+
+function evalRpn(data, rpn, stack) {
+	const s = [];
+	for (const token of rpn) {
+		if (isNumberToken(token)) {
+			s.push(Number(token));
+			continue;
+		}
+		if (isRefToken(token)) {
+			const { rowId, colId } = parseRefToken(token);
+			const value = getCellNumericValue.call(this, data, rowId, colId, stack);
+			s.push(value);
+			continue;
+		}
+		const b = s.pop();
+		const a = s.pop();
+		if (!Number.isFinite(a) || !Number.isFinite(b)) return NaN;
+		switch (token) {
+			case "+":
+				s.push(a + b);
+				break;
+			case "-":
+				s.push(a - b);
+				break;
+			case "*":
+				s.push(a * b);
+				break;
+			case "/":
+				s.push(b === 0 ? NaN : a / b);
+				break;
+			default:
+				return NaN;
+		}
+	}
+	return s.length === 1 ? s[0] : NaN;
+}
+
+function getCellNumericValue(data, rowId, colId, stack) {
+	const key = `${rowId}:${colId}`;
+	if (stack.includes(key)) return NaN;
+
+	const formula = data.formulas?.[rowId]?.[colId];
+	if (isString(formula)) {
+		const nextStack = [...stack, key];
+		return evaluateFormula.call(this, data, formula, nextStack);
+	}
+
+	const raw = data.cells?.[rowId]?.[colId];
+	const number = Number(raw);
+	return Number.isFinite(number) ? number : NaN;
+}
+
+function isNumberToken(token) {
+	return /^-?\d+(?:\.\d+)?$/.test(token);
+}
+
+function isRefToken(token) {
+	return /^[A-Za-z]+[0-9]+$/.test(token);
+}
+
+function parseRefToken(token) {
+	const match = /^([A-Za-z]+)([0-9]+)$/.exec(token);
+	return { colId: match[1].toUpperCase(), rowId: match[2] };
+}
+
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				addRow: "Zeile hinzufügen",
+				addColumn: "Spalte hinzufügen",
+				corner: "",
+			};
+		case "fr":
+			return {
+				addRow: "Ajouter une ligne",
+				addColumn: "Ajouter une colonne",
+				corner: "",
+			};
+		case "es":
+			return {
+				addRow: "Agregar fila",
+				addColumn: "Agregar columna",
+				corner: "",
+			};
+		case "zh":
+			return {
+				addRow: "添加行",
+				addColumn: "添加列",
+				corner: "",
+			};
+		case "hi":
+			return {
+				addRow: "पंक्ति जोड़ें",
+				addColumn: "स्तंभ जोड़ें",
+				corner: "",
+			};
+		case "bn":
+			return {
+				addRow: "সারি যোগ করুন",
+				addColumn: "কলাম যোগ করুন",
+				corner: "",
+			};
+		case "pt":
+			return {
+				addRow: "Adicionar linha",
+				addColumn: "Adicionar coluna",
+				corner: "",
+			};
+		case "ru":
+			return {
+				addRow: "Добавить строку",
+				addColumn: "Добавить столбец",
+				corner: "",
+			};
+		case "ja":
+			return {
+				addRow: "行を追加",
+				addColumn: "列を追加",
+				corner: "",
+			};
+		case "pa":
+			return {
+				addRow: "ਕਤਾਰ ਸ਼ਾਮਲ ਕਰੋ",
+				addColumn: "ਕਾਲਮ ਸ਼ਾਮਲ ਕਰੋ",
+				corner: "",
+			};
+		case "mr":
+			return {
+				addRow: "ओळ जोडा",
+				addColumn: "स्तंभ जोडा",
+				corner: "",
+			};
+		case "it":
+			return {
+				addRow: "Aggiungi riga",
+				addColumn: "Aggiungi colonna",
+				corner: "",
+			};
+		case "nl":
+			return {
+				addRow: "Rij toevoegen",
+				addColumn: "Kolom toevoegen",
+				corner: "",
+			};
+		case "sv":
+			return {
+				addRow: "Lägg till rad",
+				addColumn: "Lägg till kolumn",
+				corner: "",
+			};
+		case "pl":
+			return {
+				addRow: "Dodaj wiersz",
+				addColumn: "Dodaj kolumnę",
+				corner: "",
+			};
+		case "da":
+			return {
+				addRow: "Tilføj række",
+				addColumn: "Tilføj kolonne",
+				corner: "",
+			};
+		case "fi":
+			return {
+				addRow: "Lisää rivi",
+				addColumn: "Lisää sarake",
+				corner: "",
+			};
+		case "no":
+			return {
+				addRow: "Legg til rad",
+				addColumn: "Legg til kolonne",
+				corner: "",
+			};
+		case "cs":
+			return {
+				addRow: "Přidat řádek",
+				addColumn: "Přidat sloupec",
+				corner: "",
+			};
+		default:
+			return {
+				addRow: "Add row",
+				addColumn: "Add column",
+				corner: "",
+			};
+	}
+}
+
+function getTemplate() {
+	return `
+    <div data-monster-role="control" part="control">
+      <div data-monster-role="toolbar" part="toolbar">
+        <button type="button" data-monster-role="add-row" part="add-row"></button>
+        <button type="button" data-monster-role="add-column" part="add-column"></button>
+      </div>
+      <div data-monster-role="grid-wrapper" part="grid-wrapper">
+        <div data-monster-role="grid" part="grid"></div>
+      </div>
+    </div>
+  `;
+}
+
+registerCustomElement(Sheet);