@iyulab/data-components 0.1.0 → 0.1.2

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

@@ -0,0 +1,855 @@
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ref } from 'lit/directives/ref.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { styles } from './USimpleSheet.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+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)
+  };
+}
+const _USimpleSheet = class _USimpleSheet extends UElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.rows = 20;
+    this.cols = 10;
+    this.readonly = false;
+    this._sel = null;
+    this._editing = null;
+    this._editVal = "";
+    this._replaceOnEdit = false;
+    // @state() 없음 — 직접 requestUpdate() 호출
+    this._data = [];
+    this._colWidths = [];
+    this._isMouseSelecting = false;
+    this._containerEl = null;
+    // 열 너비 조절
+    this._resizing = null;
+    // Undo/Redo 히스토리
+    this._history = [];
+    this._historyIndex = -1;
+    // ──────────────────────────────────────────
+    // ref 콜백
+    // ──────────────────────────────────────────
+    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) {
+        this._startEdit(anchor.row, anchor.col, e.key);
+      }
+    };
+    // ──────────────────────────────────────────
+    // 입력 이벤트
+    // ──────────────────────────────────────────
+    this._onInputChange = (e) => {
+      this._editVal = e.target.value;
+    };
+    this._onInputKeyDown = (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this._cancelEdit();
+        return;
+      }
+      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._editing) {
+        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();
+    };
+    // ──────────────────────────────────────────
+    // 클립보드 (copy/paste)
+    // ──────────────────────────────────────────
+    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) {
+    const dataRelated = ["data", "rows", "cols", "columns"].some((k) => changed.has(k));
+    if (dataRelated) {
+      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._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);
+  }
+  // ──────────────────────────────────────────
+  // Undo/Redo
+  // ──────────────────────────────────────────
+  _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._emitChange();
+    this.requestUpdate();
+  }
+  _redo() {
+    if (this._historyIndex >= this._history.length - 1) return;
+    this._historyIndex++;
+    this._data = this._history[this._historyIndex].map((r) => [...r]);
+    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 }, (_2, 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 classes = [
+      "cell",
+      isSelected ? "selected" : "",
+      isAnchor ? "anchor" : "",
+      isEditing ? "editing" : ""
+    ].filter(Boolean).join(" ");
+    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}
+          />
+        ` : value}
+      </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)) {
+          newData[r][c] = pasteRows[ri][ci];
+        }
+      }
+    }
+    this._data = newData;
+    this._pushHistory();
+    this._emitChange();
+    this.requestUpdate();
+  }
+  // ──────────────────────────────────────────
+  // Fill 기능
+  // ──────────────────────────────────────────
+  /** 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._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._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);
+    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 prevVal = this._data[row]?.[col] ?? "";
+    const newData = this._data.map((r) => [...r]);
+    newData[row][col] = this._editVal;
+    this._data = newData;
+    this._editing = null;
+    if (this._editVal !== prevVal) {
+      this._pushHistory();
+      this._emitChange();
+    }
+    this.requestUpdate();
+    this._containerEl?.focus();
+  }
+  _cancelEdit() {
+    this._editing = null;
+    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._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(() => {
+      const td = this.renderRoot.querySelector(
+        `td[data-row="${row}"][data-col="${col}"]`
+      );
+      td?.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;
+  }
+  _emitChange() {
+    this.emit("change", { data: this._data });
+  }
+  // ──────────────────────────────────────────
+  // 공개 API
+  // ──────────────────────────────────────────
+  /** 현재 데이터를 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._pushHistory();
+      this._emitChange();
+      this.requestUpdate();
+    }
+  }
+  /** 현재 선택 영역 반환 */
+  getSelection() {
+    if (!this._sel) return null;
+    return normalizeRange(this._sel);
+  }
+  /** Undo 가능 여부 */
+  get canUndo() {
+    return this._historyIndex > 0;
+  }
+  /** Redo 가능 여부 */
+  get canRedo() {
+    return this._historyIndex < this._history.length - 1;
+  }
+};
+__decorateClass([
+  property({ type: Array })
+], _USimpleSheet.prototype, "data");
+__decorateClass([
+  property({ type: Array })
+], _USimpleSheet.prototype, "columns");
+__decorateClass([
+  property({ type: Number })
+], _USimpleSheet.prototype, "rows");
+__decorateClass([
+  property({ type: Number })
+], _USimpleSheet.prototype, "cols");
+__decorateClass([
+  property({ type: Boolean })
+], _USimpleSheet.prototype, "readonly");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_sel");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_editing");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_editVal");
+__decorateClass([
+  state()
+], _USimpleSheet.prototype, "_replaceOnEdit");
+let USimpleSheet = _USimpleSheet;
+
+export { USimpleSheet };