@iyulab/data-components 0.3.0 → 0.3.1

package/dist/components/simple-sheet/USimpleSheet.js

@@ -1,5 +1,935 @@
-import { USimpleSheet } from './USimpleSheet.component.js';
-
-USimpleSheet.define("u-simple-sheet");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./USimpleSheet.styles.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { ref } from "lit/directives/ref.js";
+//#region src/components/simple-sheet/USimpleSheet.ts
+var _USimpleSheet;
+function normalizeRange(sel) {
+	return {
+		minRow: Math.min(sel.anchor.row, sel.focus.row),
+		maxRow: Math.max(sel.anchor.row, sel.focus.row),
+		minCol: Math.min(sel.anchor.col, sel.focus.col),
+		maxCol: Math.max(sel.anchor.col, sel.focus.col)
+	};
+}
+var USimpleSheet = class USimpleSheet extends UElement {
+	static {
+		_USimpleSheet = this;
+	}
+	constructor(..._args) {
+		super(..._args);
+		this.data = [];
+		this.rows = 20;
+		this.cols = 10;
+		this.readonly = false;
+		this._sel = null;
+		this._editing = null;
+		this._editVal = "";
+		this._replaceOnEdit = false;
+		this._dropdownItems = [];
+		this._dropdownIndex = -1;
+		this._isDropdownClick = false;
+		this._data = [];
+		this._colWidths = [];
+		this._isMouseSelecting = false;
+		this._containerEl = null;
+		this._resizing = null;
+		this._history = [];
+		this._historyIndex = -1;
+		this._refContainer = (el) => {
+			this._containerEl = el ?? null;
+		};
+		this._onContainerFocus = () => {
+			if (!this._sel) this._select(0, 0);
+		};
+		this._onContainerKeyDown = (e) => {
+			if (this._editing) return;
+			const anchor = this._sel?.anchor ?? {
+				row: 0,
+				col: 0
+			};
+			if (e.ctrlKey || e.metaKey) {
+				if (e.key === "z" || e.key === "Z") {
+					e.preventDefault();
+					if (!this.readonly) if (e.shiftKey) this._redo();
+					else this._undo();
+					return;
+				}
+				if (e.key === "y" || e.key === "Y") {
+					e.preventDefault();
+					if (!this.readonly) this._redo();
+					return;
+				}
+				if (e.key === "a" || e.key === "A") {
+					e.preventDefault();
+					this._sel = {
+						anchor: {
+							row: 0,
+							col: 0
+						},
+						focus: {
+							row: this._rowCount - 1,
+							col: this._colCount - 1
+						}
+					};
+					this.requestUpdate();
+					return;
+				}
+				if (e.key === "d" || e.key === "D") {
+					e.preventDefault();
+					if (!this.readonly && this._sel) this._fillDown();
+					return;
+				}
+				if (e.key === "r" || e.key === "R") {
+					e.preventDefault();
+					if (!this.readonly && this._sel) this._fillRight();
+					return;
+				}
+			}
+			if (e.key === "Delete" || e.key === "Backspace") {
+				e.preventDefault();
+				if (!this.readonly) this._clearSelection();
+				return;
+			}
+			if (e.key === "F2") {
+				e.preventDefault();
+				if (!this.readonly && !this._isColReadonly(anchor.col)) this._startEdit(anchor.row, anchor.col);
+				return;
+			}
+			if (e.key === "Enter") {
+				e.preventDefault();
+				if (e.shiftKey) this._select(Math.max(0, anchor.row - 1), anchor.col);
+				else this._select(Math.min(this._rowCount - 1, anchor.row + 1), anchor.col);
+				return;
+			}
+			if (e.key === "Tab") {
+				e.preventDefault();
+				if (e.shiftKey) if (anchor.col === 0 && anchor.row > 0) this._select(anchor.row - 1, this._colCount - 1);
+				else this._select(anchor.row, Math.max(0, anchor.col - 1));
+				else if (anchor.col === this._colCount - 1) {
+					if (anchor.row < this._rowCount - 1) this._select(anchor.row + 1, 0);
+				} else this._select(anchor.row, anchor.col + 1);
+				return;
+			}
+			const arrowMoves = {
+				ArrowUp: [-1, 0],
+				ArrowDown: [1, 0],
+				ArrowLeft: [0, -1],
+				ArrowRight: [0, 1]
+			};
+			if (arrowMoves[e.key]) {
+				e.preventDefault();
+				const [dr, dc] = arrowMoves[e.key];
+				if (e.shiftKey && this._sel) {
+					const curFocus = this._sel.focus;
+					const nextFocus = {
+						row: Math.max(0, Math.min(this._rowCount - 1, curFocus.row + dr)),
+						col: Math.max(0, Math.min(this._colCount - 1, curFocus.col + dc))
+					};
+					this._sel = {
+						anchor: this._sel.anchor,
+						focus: nextFocus
+					};
+					this.requestUpdate();
+				} else {
+					const newRow = Math.max(0, Math.min(this._rowCount - 1, anchor.row + dr));
+					const newCol = Math.max(0, Math.min(this._colCount - 1, anchor.col + dc));
+					this._select(newRow, newCol);
+				}
+				return;
+			}
+			if (e.key === "Home") {
+				e.preventDefault();
+				if (e.ctrlKey) this._select(0, 0);
+				else this._select(anchor.row, 0);
+				return;
+			}
+			if (e.key === "End") {
+				e.preventDefault();
+				if (e.ctrlKey) this._select(this._rowCount - 1, this._colCount - 1);
+				else this._select(anchor.row, this._colCount - 1);
+				return;
+			}
+			if (e.key === "PageUp") {
+				e.preventDefault();
+				this._select(Math.max(0, anchor.row - 10), anchor.col);
+				return;
+			}
+			if (e.key === "PageDown") {
+				e.preventDefault();
+				this._select(Math.min(this._rowCount - 1, anchor.row + 10), anchor.col);
+				return;
+			}
+			if (!this.readonly && !this._isColReadonly(anchor.col) && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+				e.preventDefault();
+				this._startEdit(anchor.row, anchor.col, e.key);
+			}
+		};
+		this._onInputChange = (e) => {
+			this._editVal = e.target.value;
+			if (this._editing) {
+				const options = this._getColOptions(this._editing.row, this._editing.col);
+				if (options) {
+					const filtered = this._filterOptions(options, this._editVal);
+					this._dropdownItems = filtered;
+					this._dropdownIndex = filtered.length > 0 ? 0 : -1;
+				}
+			}
+		};
+		this._onInputKeyDown = (e) => {
+			e.stopPropagation();
+			const hasDropdown = this._dropdownItems.length > 0;
+			if (e.key === "Escape") {
+				e.preventDefault();
+				this._cancelEdit();
+				return;
+			}
+			if (hasDropdown && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+				e.preventDefault();
+				const len = this._dropdownItems.length;
+				if (e.key === "ArrowDown") this._dropdownIndex = (this._dropdownIndex + 1) % len;
+				else this._dropdownIndex = (this._dropdownIndex - 1 + len) % len;
+				this.updateComplete.then(() => {
+					const dropdown = this.renderRoot.querySelector(".cell-dropdown");
+					const highlighted = this.renderRoot.querySelector(".dropdown-item.highlighted");
+					if (dropdown && highlighted) {
+						const dRect = dropdown.getBoundingClientRect();
+						const hRect = highlighted.getBoundingClientRect();
+						if (hRect.bottom > dRect.bottom) dropdown.scrollTop += hRect.bottom - dRect.bottom;
+						else if (hRect.top < dRect.top) dropdown.scrollTop -= dRect.top - hRect.top;
+					}
+				});
+				return;
+			}
+			if (hasDropdown && this._dropdownIndex >= 0 && (e.key === "Enter" || e.key === "Tab")) this._editVal = this._dropdownItems[this._dropdownIndex];
+			if (e.key === "Enter") {
+				e.preventDefault();
+				const pos = this._editing;
+				this._commitEdit();
+				if (e.ctrlKey) this._select(pos.row, pos.col);
+				else if (e.shiftKey) this._select(Math.max(0, pos.row - 1), pos.col);
+				else this._select(Math.min(this._rowCount - 1, pos.row + 1), pos.col);
+				return;
+			}
+			if (e.key === "Tab") {
+				e.preventDefault();
+				const pos = this._editing;
+				this._commitEdit();
+				if (e.shiftKey) if (pos.col === 0 && pos.row > 0) this._select(pos.row - 1, this._colCount - 1);
+				else this._select(pos.row, Math.max(0, pos.col - 1));
+				else if (pos.col === this._colCount - 1) if (pos.row < this._rowCount - 1) this._select(pos.row + 1, 0);
+				else this._select(pos.row, pos.col);
+				else this._select(pos.row, pos.col + 1);
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				const pos = this._editing;
+				this._commitEdit();
+				this._select(Math.max(0, pos.row - 1), pos.col);
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				const pos = this._editing;
+				this._commitEdit();
+				this._select(Math.min(this._rowCount - 1, pos.row + 1), pos.col);
+				return;
+			}
+		};
+		this._onInputBlur = () => {
+			if (this._isDropdownClick) {
+				this._isDropdownClick = false;
+				return;
+			}
+			if (this._editing) this._commitEdit();
+		};
+		this._onDropdownItemMouseDown = (e, value) => {
+			e.preventDefault();
+			this._isDropdownClick = true;
+			this._editVal = value;
+			this._commitEdit();
+		};
+		this._onTableMouseDown = (e) => {
+			const cell = this._getCellFromEvent(e);
+			if (!cell) return;
+			e.preventDefault();
+			if (this._editing) this._commitEdit();
+			const { row, col } = cell;
+			if (e.shiftKey && this._sel) {
+				this._sel = {
+					anchor: this._sel.anchor,
+					focus: {
+						row,
+						col
+					}
+				};
+				this.requestUpdate();
+			} else this._select(row, col);
+			this._isMouseSelecting = true;
+			this._containerEl?.focus();
+		};
+		this._onTableMouseOver = (e) => {
+			if (!this._isMouseSelecting || !this._sel) return;
+			const cell = this._getCellFromEvent(e);
+			if (!cell) return;
+			this._sel = {
+				anchor: this._sel.anchor,
+				focus: cell
+			};
+			this.requestUpdate();
+		};
+		this._onTableDblClick = (e) => {
+			const cell = this._getCellFromEvent(e);
+			if (!cell || this.readonly || this._isColReadonly(cell.col)) return;
+			this._startEdit(cell.row, cell.col);
+		};
+		this._onDocMouseUp = () => {
+			this._isMouseSelecting = false;
+		};
+		this._onResizeStart = (e, col) => {
+			e.preventDefault();
+			e.stopPropagation();
+			this._resizing = {
+				col,
+				startX: e.clientX,
+				startWidth: this._colWidths[col] ?? _USimpleSheet.DEFAULT_COL_WIDTH,
+				current: this._colWidths[col] ?? _USimpleSheet.DEFAULT_COL_WIDTH
+			};
+			document.addEventListener("mousemove", this._onResizeMove);
+			document.addEventListener("mouseup", this._onResizeEnd);
+		};
+		this._onResizeMove = (e) => {
+			if (!this._resizing) return;
+			const dx = e.clientX - this._resizing.startX;
+			const newWidth = Math.max(_USimpleSheet.MIN_COL_WIDTH, this._resizing.startWidth + dx);
+			this._resizing.current = newWidth;
+			const th = this.renderRoot.querySelector(`th.col-header:nth-child(${this._resizing.col + 2})`);
+			if (th) {
+				th.style.width = `${newWidth}px`;
+				th.style.minWidth = `${newWidth}px`;
+			}
+		};
+		this._onResizeEnd = () => {
+			if (this._resizing) {
+				this._colWidths[this._resizing.col] = this._resizing.current;
+				this._resizing = null;
+				this.requestUpdate();
+			}
+			document.removeEventListener("mousemove", this._onResizeMove);
+			document.removeEventListener("mouseup", this._onResizeEnd);
+		};
+		this._onSelectAll = (e) => {
+			e.preventDefault();
+			this._sel = {
+				anchor: {
+					row: 0,
+					col: 0
+				},
+				focus: {
+					row: this._rowCount - 1,
+					col: this._colCount - 1
+				}
+			};
+			this.requestUpdate();
+			this._containerEl?.focus();
+		};
+		this._onColHeaderMouseDown = (e, col) => {
+			e.preventDefault();
+			if (this._editing) this._commitEdit();
+			if (e.shiftKey && this._sel) this._sel = {
+				anchor: {
+					row: 0,
+					col: this._sel.anchor.col
+				},
+				focus: {
+					row: this._rowCount - 1,
+					col
+				}
+			};
+			else this._sel = {
+				anchor: {
+					row: 0,
+					col
+				},
+				focus: {
+					row: this._rowCount - 1,
+					col
+				}
+			};
+			this.requestUpdate();
+			this._containerEl?.focus();
+		};
+		this._onRowHeaderMouseDown = (e, row) => {
+			e.preventDefault();
+			if (this._editing) this._commitEdit();
+			if (e.shiftKey && this._sel) this._sel = {
+				anchor: {
+					row: this._sel.anchor.row,
+					col: 0
+				},
+				focus: {
+					row,
+					col: this._colCount - 1
+				}
+			};
+			else this._sel = {
+				anchor: {
+					row,
+					col: 0
+				},
+				focus: {
+					row,
+					col: this._colCount - 1
+				}
+			};
+			this.requestUpdate();
+			this._containerEl?.focus();
+		};
+		this._onCopy = (e) => {
+			if (!this._sel || this._editing) return;
+			e.preventDefault();
+			const tsv = this._selectionToTSV();
+			e.clipboardData?.setData("text/plain", tsv);
+		};
+		this._onPaste = (e) => {
+			if (this.readonly || !this._sel) return;
+			e.preventDefault();
+			const text = e.clipboardData?.getData("text/plain") ?? "";
+			this._pasteFromText(text);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	static {
+		this.MIN_COL_WIDTH = 30;
+	}
+	static {
+		this.DEFAULT_COL_WIDTH = 80;
+	}
+	static {
+		this.HISTORY_LIMIT = 100;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._syncData();
+		document.addEventListener("mouseup", this._onDocMouseUp);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener("mouseup", this._onDocMouseUp);
+		document.removeEventListener("mousemove", this._onResizeMove);
+		document.removeEventListener("mouseup", this._onResizeEnd);
+	}
+	willUpdate(changed) {
+		if ([
+			"data",
+			"rows",
+			"cols",
+			"columns"
+		].some((k) => changed.has(k))) this._syncDataFromProps();
+	}
+	_syncDataFromProps() {
+		const rowCount = Math.max(this.rows, this.data?.length ?? 0);
+		const colCount = Math.max(this.columns?.length ?? this.cols, ...this.data?.map((r) => r?.length ?? 0) ?? [0]);
+		const newData = [];
+		for (let r = 0; r < rowCount; r++) {
+			const row = [];
+			for (let c = 0; c < colCount; c++) row.push(this.data?.[r]?.[c] ?? "");
+			newData.push(row);
+		}
+		this._data = newData;
+		this._recompute();
+		this._history = [this._data.map((r) => [...r])];
+		this._historyIndex = 0;
+		const prevWidths = this._colWidths;
+		this._colWidths = Array.from({ length: colCount }, (_, c) => this.columns?.[c]?.width ?? prevWidths[c] ?? _USimpleSheet.DEFAULT_COL_WIDTH);
+	}
+	_syncData() {
+		this._syncDataFromProps();
+	}
+	get _rowCount() {
+		return this._data.length;
+	}
+	get _colCount() {
+		return this._data[0]?.length ?? this.columns?.length ?? this.cols;
+	}
+	_pushHistory() {
+		this._history.splice(this._historyIndex + 1);
+		this._history.push(this._data.map((r) => [...r]));
+		if (this._history.length > _USimpleSheet.HISTORY_LIMIT) this._history.shift();
+		else this._historyIndex++;
+	}
+	_undo() {
+		if (this._historyIndex <= 0) return;
+		this._historyIndex--;
+		this._data = this._history[this._historyIndex].map((r) => [...r]);
+		this._recompute();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	_redo() {
+		if (this._historyIndex >= this._history.length - 1) return;
+		this._historyIndex++;
+		this._data = this._history[this._historyIndex].map((r) => [...r]);
+		this._recompute();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	/** 열 인덱스를 A, B, ..., Z, AA, AB, ... 형태로 변환 */
+	_colLabel(c) {
+		if (this.columns?.[c]?.label) return this.columns[c].label;
+		let label = "";
+		let n = c;
+		do {
+			label = String.fromCharCode(65 + n % 26) + label;
+			n = Math.floor(n / 26) - 1;
+		} while (n >= 0);
+		return label;
+	}
+	_colWidthStyle(c) {
+		const w = this._colWidths[c] ?? _USimpleSheet.DEFAULT_COL_WIDTH;
+		return `width:${w}px;min-width:${w}px;`;
+	}
+	_inSel(r, c) {
+		if (!this._sel) return false;
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(this._sel);
+		return r >= minRow && r <= maxRow && c >= minCol && c <= maxCol;
+	}
+	_isAnchor(r, c) {
+		return this._sel?.anchor.row === r && this._sel?.anchor.col === c;
+	}
+	_isColSelected(c) {
+		if (!this._sel) return false;
+		const { minCol, maxCol } = normalizeRange(this._sel);
+		return c >= minCol && c <= maxCol;
+	}
+	_isRowSelected(r) {
+		if (!this._sel) return false;
+		const { minRow, maxRow } = normalizeRange(this._sel);
+		return r >= minRow && r <= maxRow;
+	}
+	render() {
+		return html`
+      <div
+        class="sheet-container${this._resizing ? " is-resizing" : ""}"
+        tabindex="0"
+        ${ref(this._refContainer)}
+        @keydown=${this._onContainerKeyDown}
+        @focus=${this._onContainerFocus}
+        @copy=${this._onCopy}
+        @paste=${this._onPaste}
+      >
+        <div class="sheet-scroll">
+          <table
+            class="sheet-table"
+            @mousedown=${this._onTableMouseDown}
+            @mouseover=${this._onTableMouseOver}
+            @dblclick=${this._onTableDblClick}
+          >
+            <thead>
+              <tr>
+                <th class="corner" @click=${this._onSelectAll}></th>
+                ${Array.from({ length: this._colCount }, (_, c) => html`
+                  <th
+                    class="col-header ${this._isColSelected(c) ? "col-selected" : ""}"
+                    style=${this._colWidthStyle(c)}
+                    @mousedown=${(e) => this._onColHeaderMouseDown(e, c)}
+                  >
+                    ${this._colLabel(c)}
+                    <span
+                      class="resize-handle"
+                      @mousedown=${(e) => this._onResizeStart(e, c)}
+                    ></span>
+                  </th>
+                `)}
+              </tr>
+            </thead>
+            <tbody>
+              ${Array.from({ length: this._rowCount }, (_, r) => html`
+                <tr>
+                  <td
+                    class="row-num ${this._isRowSelected(r) ? "row-selected" : ""}"
+                    @mousedown=${(e) => this._onRowHeaderMouseDown(e, r)}
+                  >${r + 1}</td>
+                  ${Array.from({ length: this._colCount }, (_, c) => this._renderCell(r, c))}
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+	}
+	_renderCell(r, c) {
+		const isEditing = this._editing?.row === r && this._editing?.col === c;
+		const isSelected = this._inSel(r, c);
+		const isAnchor = this._isAnchor(r, c);
+		const value = this._data[r]?.[c] ?? "";
+		const isColReadonly = this._isColReadonly(c);
+		const isComputed = this._isColComputed(c);
+		const isNumeric = this.columns?.[c]?.format && typeof this.columns[c].format !== "function" || this._isNumeric(value);
+		const classes = [
+			"cell",
+			isSelected ? "selected" : "",
+			isAnchor ? "anchor" : "",
+			isEditing ? "editing" : "",
+			isColReadonly ? "cell-readonly" : "",
+			isComputed ? "cell-computed" : "",
+			isNumeric ? "cell-numeric" : ""
+		].filter(Boolean).join(" ");
+		const hasOptions = isEditing && this._getColOptions(r, c) !== null;
+		const showDropdown = isEditing && this._dropdownItems.length > 0;
+		const isStrict = this.columns?.[c]?.strict ?? false;
+		const noMatch = isEditing && hasOptions && this._dropdownItems.length === 0 && this._editVal !== "";
+		return html`
+      <td
+        class=${classes}
+        data-row=${r}
+        data-col=${c}
+      >
+        ${isEditing ? html`
+          <input
+            class="cell-input"
+            .value=${this._editVal}
+            @input=${this._onInputChange}
+            @keydown=${this._onInputKeyDown}
+            @blur=${this._onInputBlur}
+          />
+          ${showDropdown ? html`
+            <div class="cell-dropdown">
+              ${this._dropdownItems.map((item, i) => html`
+                <div
+                  class="dropdown-item ${i === this._dropdownIndex ? "highlighted" : ""}"
+                  @mousedown=${(e) => this._onDropdownItemMouseDown(e, item)}
+                >${item}</div>
+              `)}
+            </div>
+          ` : noMatch && isStrict ? html`
+            <div class="cell-dropdown">
+              <div class="dropdown-empty">일치하는 항목 없음</div>
+            </div>
+          ` : ""}
+        ` : this._formatValue(value, c, r)}
+      </td>
+    `;
+	}
+	_selectionToTSV() {
+		if (!this._sel) return "";
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(this._sel);
+		const rows = [];
+		for (let r = minRow; r <= maxRow; r++) {
+			const cells = [];
+			for (let c = minCol; c <= maxCol; c++) cells.push(this._data[r]?.[c] ?? "");
+			rows.push(cells.join("	"));
+		}
+		return rows.join("\n");
+	}
+	_pasteFromText(text) {
+		if (!this._sel) return;
+		const { anchor } = this._sel;
+		const pasteRows = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n$/, "").split("\n").map((row) => row.split("	"));
+		const newData = this._data.map((r) => [...r]);
+		const neededRows = anchor.row + pasteRows.length;
+		const rawNeededCols = anchor.col + Math.max(...pasteRows.map((r) => r.length));
+		const neededCols = this.columns?.length ? Math.min(rawNeededCols, this.columns.length) : rawNeededCols;
+		while (newData.length < neededRows) newData.push(Array(newData[0]?.length ?? this._colCount).fill(""));
+		for (let r = 0; r < newData.length; r++) while (newData[r].length < neededCols) newData[r].push("");
+		for (let ri = 0; ri < pasteRows.length; ri++) for (let ci = 0; ci < pasteRows[ri].length; ci++) {
+			const r = anchor.row + ri;
+			const c = anchor.col + ci;
+			if (r < newData.length && c < (newData[r]?.length ?? 0) && !this._isColComputed(c)) newData[r][c] = pasteRows[ri][ci];
+		}
+		this._data = newData;
+		this._recompute();
+		this._pushHistory();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	/** Ctrl+D: 선택 영역 첫 행 값을 아래로 채우기 */
+	_fillDown() {
+		if (!this._sel) return;
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(this._sel);
+		if (minRow === maxRow) return;
+		const newData = this._data.map((r) => [...r]);
+		for (let c = minCol; c <= maxCol; c++) {
+			const fillVal = newData[minRow]?.[c] ?? "";
+			for (let r = minRow + 1; r <= maxRow; r++) if (newData[r] && c < newData[r].length && !this._isColReadonly(c)) newData[r][c] = fillVal;
+		}
+		this._data = newData;
+		this._recompute();
+		this._pushHistory();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	/** Ctrl+R: 선택 영역 첫 열 값을 오른쪽으로 채우기 */
+	_fillRight() {
+		if (!this._sel) return;
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(this._sel);
+		if (minCol === maxCol) return;
+		const newData = this._data.map((r) => [...r]);
+		for (let r = minRow; r <= maxRow; r++) {
+			const fillVal = newData[r]?.[minCol] ?? "";
+			for (let c = minCol + 1; c <= maxCol; c++) if (newData[r] && c < newData[r].length && !this._isColReadonly(c)) newData[r][c] = fillVal;
+		}
+		this._data = newData;
+		this._recompute();
+		this._pushHistory();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	/**
+	* @param typedChar - 타이핑으로 시작할 경우 첫 글자. 미제공시 기존 값 유지.
+	*/
+	_startEdit(row, col, typedChar) {
+		this._replaceOnEdit = typedChar !== void 0;
+		this._editVal = typedChar !== void 0 ? typedChar : this._data[row]?.[col] ?? "";
+		this._editing = {
+			row,
+			col
+		};
+		this._select(row, col);
+		const options = this._getColOptions(row, col);
+		if (options) {
+			const filtered = this._filterOptions(options, this._editVal);
+			this._dropdownItems = filtered;
+			this._dropdownIndex = filtered.length > 0 ? 0 : -1;
+		} else {
+			this._dropdownItems = [];
+			this._dropdownIndex = -1;
+		}
+		this.updateComplete.then(() => {
+			const input = this.renderRoot.querySelector(".cell-input");
+			if (input) {
+				input.focus();
+				if (this._replaceOnEdit) {
+					const len = input.value.length;
+					input.setSelectionRange(len, len);
+				} else input.select();
+			}
+		});
+	}
+	_commitEdit() {
+		if (!this._editing) return;
+		const { row, col } = this._editing;
+		const colDef = this.columns?.[col];
+		if (colDef?.strict && colDef?.options && this._editVal !== "") {
+			if (!(this._getColOptions(row, col) ?? []).includes(this._editVal)) {
+				this._editing = null;
+				this._dropdownItems = [];
+				this._dropdownIndex = -1;
+				this._isDropdownClick = false;
+				this.requestUpdate();
+				this._containerEl?.focus();
+				return;
+			}
+		}
+		const prevVal = this._data[row]?.[col] ?? "";
+		const newData = this._data.map((r) => [...r]);
+		newData[row][col] = this._editVal;
+		this._data = newData;
+		this._editing = null;
+		this._dropdownItems = [];
+		this._dropdownIndex = -1;
+		if (this._editVal !== prevVal) {
+			this._recompute();
+			this._pushHistory();
+			this._emitChange();
+		}
+		this.requestUpdate();
+		this._containerEl?.focus();
+	}
+	_cancelEdit() {
+		this._editing = null;
+		this._dropdownItems = [];
+		this._dropdownIndex = -1;
+		this.requestUpdate();
+		this._containerEl?.focus();
+	}
+	_clearSelection() {
+		if (!this._sel) return;
+		const { minRow, maxRow, minCol, maxCol } = normalizeRange(this._sel);
+		const newData = this._data.map((r) => [...r]);
+		for (let r = minRow; r <= maxRow; r++) for (let c = minCol; c <= maxCol; c++) if (!this._isColReadonly(c)) newData[r][c] = "";
+		this._data = newData;
+		this._recompute();
+		this._pushHistory();
+		this._emitChange();
+		this.requestUpdate();
+	}
+	_select(row, col) {
+		this._sel = {
+			anchor: {
+				row,
+				col
+			},
+			focus: {
+				row,
+				col
+			}
+		};
+		this.requestUpdate();
+		this._scrollCellIntoView(row, col);
+	}
+	_scrollCellIntoView(row, col) {
+		this.updateComplete.then(() => {
+			this.renderRoot.querySelector(`td[data-row="${row}"][data-col="${col}"]`)?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+	}
+	_getCellFromEvent(e) {
+		const target = e.target.closest("td[data-row]");
+		if (!target) return null;
+		const row = parseInt(target.dataset.row ?? "-1");
+		const col = parseInt(target.dataset.col ?? "-1");
+		if (row < 0 || col < 0) return null;
+		return {
+			row,
+			col
+		};
+	}
+	_isColReadonly(col) {
+		return (this.columns?.[col]?.readonly ?? false) || this._isColComputed(col);
+	}
+	_isColComputed(col) {
+		return typeof this.columns?.[col]?.compute === "function";
+	}
+	_isNumeric(value) {
+		if (!value || !value.trim()) return false;
+		return !isNaN(Number(value.replace(/,/g, "")));
+	}
+	/** 열의 format 설정에 따라 표시값을 반환. format 미설정 시 원본 반환. */
+	_formatValue(value, col, row) {
+		const fmt = this.columns?.[col]?.format;
+		if (!fmt || !value) return value;
+		try {
+			if (typeof fmt === "function") return fmt(value, row);
+			const num = Number(value.replace(/,/g, ""));
+			if (isNaN(num)) return value;
+			return new Intl.NumberFormat("ko-KR", fmt).format(num);
+		} catch {
+			return value;
+		}
+	}
+	/** compute 열을 재계산 (열 순서 좌→우, 행 순서 위→아래) */
+	_recompute() {
+		if (!this.columns?.some((c) => c.compute)) return;
+		for (let c = 0; c < this._colCount; c++) {
+			const fn = this.columns?.[c]?.compute;
+			if (!fn) continue;
+			for (let r = 0; r < this._rowCount; r++) try {
+				this._data[r][c] = fn(r, this._data);
+			} catch {
+				this._data[r][c] = "";
+			}
+		}
+	}
+	_getColOptions(row, col) {
+		const colDef = this.columns?.[col];
+		if (!colDef?.options) return null;
+		return typeof colDef.options === "function" ? colDef.options(row, col) : colDef.options;
+	}
+	_filterOptions(options, query) {
+		if (!query) return options;
+		const lower = query.toLowerCase();
+		return options.filter((o) => o.toLowerCase().includes(lower));
+	}
+	_emitChange() {
+		this.fire("change", { detail: { data: this._data } });
+	}
+	/** 현재 데이터를 2D 배열로 반환 */
+	getData() {
+		return this._data.map((r) => [...r]);
+	}
+	/**
+	* 정의된 columns의 key를 기준으로 객체 배열로 반환.
+	* columns 미설정시 A, B, C... 키를 사용.
+	*/
+	getDataAsObjects() {
+		if (!this.columns?.length) return this._data.map((row) => Object.fromEntries(row.map((v, i) => [this._colLabel(i), v])));
+		return this._data.map((row) => Object.fromEntries(this.columns.map((col, i) => [col.key ?? this._colLabel(i), row[i] ?? ""])));
+	}
+	/** 데이터를 직접 설정하고 재렌더링 */
+	setData(data) {
+		this.data = data;
+		this._syncData();
+		this.requestUpdate();
+	}
+	/** 특정 셀 값 설정 */
+	setCell(row, col, value) {
+		if (row >= 0 && row < this._data.length && col >= 0 && col < this._colCount) {
+			const newData = this._data.map((r) => [...r]);
+			newData[row][col] = value;
+			this._data = newData;
+			this._recompute();
+			this._pushHistory();
+			this._emitChange();
+			this.requestUpdate();
+		}
+	}
+	/** 현재 선택 영역 반환 */
+	getSelection() {
+		if (!this._sel) return null;
+		return normalizeRange(this._sel);
+	}
+	/** 선택 영역을 프로그래밍 방식으로 설정 */
+	setSelection(range) {
+		const minRow = Math.max(0, Math.min(range.minRow, this._rowCount - 1));
+		const maxRow = Math.max(0, Math.min(range.maxRow, this._rowCount - 1));
+		const minCol = Math.max(0, Math.min(range.minCol, this._colCount - 1));
+		const maxCol = Math.max(0, Math.min(range.maxCol, this._colCount - 1));
+		this._sel = {
+			anchor: {
+				row: minRow,
+				col: minCol
+			},
+			focus: {
+				row: maxRow,
+				col: maxCol
+			}
+		};
+		this.requestUpdate();
+	}
+	/** 전체 셀 선택 */
+	selectAll() {
+		this._sel = {
+			anchor: {
+				row: 0,
+				col: 0
+			},
+			focus: {
+				row: this._rowCount - 1,
+				col: this._colCount - 1
+			}
+		};
+		this.requestUpdate();
+	}
+	/** Undo 가능 여부 */
+	get canUndo() {
+		return this._historyIndex > 0;
+	}
+	/** Redo 가능 여부 */
+	get canRedo() {
+		return this._historyIndex < this._history.length - 1;
+	}
+};
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], USimpleSheet.prototype, "data", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], USimpleSheet.prototype, "columns", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "rows", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "cols", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "readonly", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_sel", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_editing", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_editVal", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_replaceOnEdit", void 0);
+__decorate([state(), __decorateMetadata("design:type", Array)], USimpleSheet.prototype, "_dropdownItems", void 0);
+__decorate([state(), __decorateMetadata("design:type", Object)], USimpleSheet.prototype, "_dropdownIndex", void 0);
+USimpleSheet = _USimpleSheet = __decorate([customElement("u-simple-sheet")], USimpleSheet);
+//#endregion
 export { USimpleSheet };