@iyulab/data-components 0.3.0 → 0.4.1

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

@@ -1,1034 +0,0 @@
-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;
-    this._dropdownItems = [];
-    this._dropdownIndex = -1;
-    this._isDropdownClick = 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) {
-        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();
-    };
-    // ──────────────────────────────────────────
-    // 클립보드 (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._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);
-  }
-  // ──────────────────────────────────────────
-  // 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._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 }, (_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 isColReadonly = this._isColReadonly(c);
-    const isComputed = this._isColComputed(c);
-    const hasIntlFormat = this.columns?.[c]?.format && typeof this.columns[c].format !== "function";
-    const isNumeric = hasIntlFormat || 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();
-  }
-  // ──────────────────────────────────────────
-  // 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._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 !== "") {
-      const allOptions = this._getColOptions(row, col) ?? [];
-      if (!allOptions.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(() => {
-      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) || 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.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._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;
-  }
-};
-__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");
-__decorateClass([
-  state()
-], _USimpleSheet.prototype, "_dropdownItems");
-__decorateClass([
-  state()
-], _USimpleSheet.prototype, "_dropdownIndex");
-let USimpleSheet = _USimpleSheet;
-
-export { USimpleSheet };