velox-grid 0.11.0

package/dist/vue/index.esm.js

@@ -0,0 +1,3754 @@
+import { defineComponent as mt, ref as P, onMounted as _, onUnmounted as W, watch as O, openBlock as gt, createElementBlock as Ct, normalizeClass as xt } from "vue";
+function p(c, e, i) {
+  const s = document.createElement(c);
+  return e && (s.className = e), s;
+}
+function w(c, ...e) {
+  c.classList.add(...e);
+}
+function k(c, ...e) {
+  c.classList.remove(...e);
+}
+function yt(c, e) {
+  let i = !1;
+  return function(...s) {
+    i || (c.apply(this, s), i = !0, setTimeout(() => i = !1, e));
+  };
+}
+function vt(c = "velox") {
+  return `${c}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function H(c, e = "text") {
+  if (c == null)
+    return "";
+  switch (e) {
+    case "number":
+      return typeof c == "number" ? c.toLocaleString() : String(c);
+    case "boolean":
+      return c ? "Yes" : "No";
+    case "date":
+      return c instanceof Date ? c.toLocaleDateString() : String(c);
+    case "datetime":
+      return c instanceof Date ? c.toLocaleString() : String(c);
+    case "text":
+    default:
+      return String(c);
+  }
+}
+function wt(c, e, i = "text") {
+  if (c == null) return e == null ? 0 : -1;
+  if (e == null) return 1;
+  switch (i) {
+    case "number":
+      return c - e;
+    case "boolean":
+      return c === e ? 0 : c ? 1 : -1;
+    case "date":
+    case "datetime":
+      const s = c instanceof Date ? c : new Date(c), o = e instanceof Date ? e : new Date(e);
+      return s.getTime() - o.getTime();
+    case "text":
+    default:
+      return String(c).localeCompare(String(e));
+  }
+}
+function V(c, e, i) {
+  return e.length ? [...c].sort((s, o) => {
+    for (const { field: n, direction: t } of e) {
+      if (!t) continue;
+      const l = i[n] || "text", a = wt(s[n], o[n], l);
+      if (a !== 0)
+        return t === "asc" ? a : -a;
+    }
+    return 0;
+  }) : c;
+}
+function bt(c, e) {
+  const { operator: i, value: s, value2: o } = e;
+  if (i === "isEmpty")
+    return c == null || c === "";
+  if (i === "isNotEmpty")
+    return c != null && c !== "";
+  const n = String(c ?? "").toLowerCase(), t = String(s ?? "").toLowerCase();
+  switch (i) {
+    case "equals":
+      return n === t;
+    case "notEquals":
+      return n !== t;
+    case "contains":
+      return n.includes(t);
+    case "notContains":
+      return !n.includes(t);
+    case "startsWith":
+      return n.startsWith(t);
+    case "endsWith":
+      return n.endsWith(t);
+    case "greaterThan":
+      return Number(c) > Number(s);
+    case "lessThan":
+      return Number(c) < Number(s);
+    case "greaterThanOrEqual":
+      return Number(c) >= Number(s);
+    case "lessThanOrEqual":
+      return Number(c) <= Number(s);
+    case "between":
+      const l = Number(c);
+      return l >= Number(s) && l <= Number(o);
+    default:
+      return !0;
+  }
+}
+function A(c, e) {
+  if (!e || !e.conditions.length)
+    return c;
+  const { conditions: i, logic: s } = e;
+  return c.filter((o) => {
+    const n = i.map(
+      (t) => bt(o[t.field], t)
+    );
+    return s === "and" ? n.every(Boolean) : n.some(Boolean);
+  });
+}
+function K(c) {
+  const { data: e, displayData: i, columns: s, selectedRows: o, options: n } = c, t = n.columns ? s.filter((r) => n.columns.includes(r.field) && r.visible !== !1) : s.filter((r) => r.visible !== !1);
+  let l;
+  if (n.selectedOnly && o.length > 0) {
+    const r = n.filteredOnly ? i : e;
+    l = o.map((h) => r[h]).filter(Boolean);
+  } else n.filteredOnly ? l = i : l = e;
+  const a = [];
+  if (n.includeHeader !== !1) {
+    const r = t.map((h) => z(h.header));
+    a.push(r.join(","));
+  }
+  return l.forEach((r) => {
+    const h = t.map((g) => {
+      const d = r[g.field];
+      return z(kt(d, g.type));
+    });
+    a.push(h.join(","));
+  }), a.join(`\r
+`);
+}
+function z(c) {
+  if (c == null) return "";
+  const e = String(c);
+  return e.includes(",") || e.includes('"') || e.includes(`
+`) || e.includes("\r") ? `"${e.replace(/"/g, '""')}"` : e;
+}
+function q(c) {
+  const { data: e, displayData: i, columns: s, selectedRows: o, options: n } = c, t = n.columns ? s.filter((r) => n.columns.includes(r.field) && r.visible !== !1) : s.filter((r) => r.visible !== !1);
+  let l;
+  if (n.selectedOnly && o.length > 0) {
+    const r = n.filteredOnly ? i : e;
+    l = o.map((h) => r[h]).filter(Boolean);
+  } else n.filteredOnly ? l = i : l = e;
+  const a = l.map((r) => {
+    const h = {};
+    return t.forEach((g) => {
+      h[g.field] = r[g.field];
+    }), h;
+  });
+  return JSON.stringify(a, null, 2);
+}
+function U() {
+  return typeof window.XLSX < "u";
+}
+function j() {
+  const c = window.XLSX;
+  if (!c)
+    throw new Error(
+      'SheetJS (xlsx) library is not loaded. Please include it via CDN: <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"><\/script>'
+    );
+  return c;
+}
+function St(c) {
+  const e = j(), { data: i, displayData: s, columns: o, selectedRows: n, options: t } = c, l = t.columns ? o.filter((x) => t.columns.includes(x.field) && x.visible !== !1) : o.filter((x) => x.visible !== !1);
+  let a;
+  if (t.selectedOnly && n.length > 0) {
+    const x = t.filteredOnly ? s : i;
+    a = n.map((b) => x[b]).filter(Boolean);
+  } else t.filteredOnly ? a = s : a = i;
+  const r = [];
+  t.includeHeader !== !1 && r.push(l.map((x) => x.header)), a.forEach((x) => {
+    const b = l.map((y) => {
+      const S = x[y.field];
+      return Et(S, y.type);
+    });
+    r.push(b);
+  });
+  const h = e.utils.aoa_to_sheet(r), g = l.map((x) => ({
+    wch: Math.max(
+      x.header.length,
+      ...a.slice(0, 100).map((b) => {
+        const y = b[x.field];
+        return String(y ?? "").length;
+      })
+    ) + 2
+  }));
+  h["!cols"] = g;
+  const d = e.utils.book_new(), f = t.sheetName || "Sheet1";
+  e.utils.book_append_sheet(d, h, f);
+  const C = (t.filename || "export") + ".xlsx";
+  e.writeFile(d, C);
+}
+function Et(c, e) {
+  if (c == null) return "";
+  switch (e) {
+    case "number":
+      return typeof c == "number" ? c : parseFloat(String(c)) || 0;
+    case "boolean":
+      return !!c;
+    case "date":
+    case "datetime":
+      if (c instanceof Date) return c;
+      if (typeof c == "string" || typeof c == "number") {
+        const i = new Date(c);
+        return isNaN(i.getTime()) ? String(c) : i;
+      }
+      return String(c);
+    default:
+      return String(c);
+  }
+}
+function kt(c, e) {
+  if (c == null) return "";
+  switch (e) {
+    case "date":
+      return c instanceof Date ? c.toISOString().split("T")[0] : String(c);
+    case "datetime":
+      return c instanceof Date ? c.toISOString() : String(c);
+    default:
+      return String(c);
+  }
+}
+function Rt(c, e = !0) {
+  var s;
+  const i = {
+    data: [],
+    headers: [],
+    errors: []
+  };
+  try {
+    const o = Dt(c);
+    if (o.length === 0)
+      return i.errors.push("CSV file is empty"), i;
+    let n = 0;
+    if (e)
+      i.headers = o[0], n = 1;
+    else {
+      const t = ((s = o[0]) == null ? void 0 : s.length) || 0;
+      i.headers = Array.from({ length: t }, (l, a) => `Column${a + 1}`);
+    }
+    for (let t = n; t < o.length; t++) {
+      const l = o[t], a = {};
+      i.headers.forEach((r, h) => {
+        a[r] = l[h] ?? "";
+      }), i.data.push(a);
+    }
+  } catch (o) {
+    i.errors.push(`CSV parsing error: ${o instanceof Error ? o.message : "Unknown error"}`);
+  }
+  return i;
+}
+function Dt(c) {
+  const e = [];
+  let i = [], s = "", o = !1;
+  for (let n = 0; n < c.length; n++) {
+    const t = c[n], l = c[n + 1];
+    if (o)
+      t === '"' ? l === '"' ? (s += '"', n++) : o = !1 : s += t;
+    else if (t === '"')
+      o = !0;
+    else if (t === ",")
+      i.push(s), s = "";
+    else {
+      if (t === "\r")
+        continue;
+      t === `
+` ? (i.push(s), i.some((a) => a.trim() !== "") && e.push(i), i = [], s = "") : s += t;
+    }
+  }
+  return (s !== "" || i.length > 0) && (i.push(s), i.some((n) => n.trim() !== "") && e.push(i)), e;
+}
+function Lt(c, e = 0) {
+  return new Promise((i) => {
+    const s = {
+      data: [],
+      headers: [],
+      errors: []
+    };
+    if (!U()) {
+      s.errors.push(
+        'SheetJS (xlsx) library is not loaded. Please include it via CDN: <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"><\/script>'
+      ), i(s);
+      return;
+    }
+    const o = j(), n = new FileReader();
+    n.onload = (t) => {
+      var l;
+      try {
+        const a = (l = t.target) == null ? void 0 : l.result, r = o.read(a, { type: "array" }), h = r.SheetNames;
+        if (e >= h.length) {
+          s.errors.push(`Sheet index ${e} not found. Available sheets: ${h.join(", ")}`), i(s);
+          return;
+        }
+        const g = h[e], d = r.Sheets[g], f = o.utils.sheet_to_json(d, { header: 1 });
+        if (f.length === 0) {
+          s.errors.push("Excel sheet is empty"), i(s);
+          return;
+        }
+        s.headers = f[0].map((C) => String(C ?? ""));
+        for (let C = 1; C < f.length; C++) {
+          const x = {}, b = f[C];
+          s.headers.forEach((y, S) => {
+            const E = b[S];
+            x[y] = E ?? "";
+          }), Object.values(x).some((y) => y !== "") && s.data.push(x);
+        }
+        i(s);
+      } catch (a) {
+        s.errors.push(`Excel parsing error: ${a instanceof Error ? a.message : "Unknown error"}`), i(s);
+      }
+    }, n.onerror = () => {
+      s.errors.push("Failed to read file"), i(s);
+    }, n.readAsArrayBuffer(c);
+  });
+}
+function X(c, e, i = "text/plain") {
+  const s = c instanceof Blob ? c : new Blob([c], { type: i }), o = URL.createObjectURL(s), n = document.createElement("a");
+  n.href = o, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(o);
+}
+function Tt(c) {
+  const e = K(c), i = (c.options.filename || "export") + ".csv";
+  X(e, i, "text/csv;charset=utf-8");
+}
+function Bt(c) {
+  const e = q(c), i = (c.options.filename || "export") + ".json";
+  X(e, i, "application/json");
+}
+const Mt = {
+  enabled: !0,
+  maxSize: 50
+};
+class Pt {
+  constructor(e = {}) {
+    this.undoStack = [], this.redoStack = [], this.options = { ...Mt, ...e };
+  }
+  /**
+   * Check if history tracking is enabled
+   */
+  isEnabled() {
+    return this.options.enabled;
+  }
+  /**
+   * Set enabled state
+   */
+  setEnabled(e) {
+    this.options.enabled = e;
+  }
+  /**
+   * Set maximum stack size
+   */
+  setMaxSize(e) {
+    this.options.maxSize = e, this.trimStack();
+  }
+  /**
+   * Push an action to the undo stack
+   */
+  push(e) {
+    this.options.enabled && (this.undoStack.push(e), this.trimStack(), this.redoStack = []);
+  }
+  /**
+   * Create and push a cell edit action
+   */
+  pushCellEdit(e, i, s, o) {
+    this.push({
+      type: "cell_edit",
+      timestamp: Date.now(),
+      data: { rowIndex: e, field: i, oldValue: s, newValue: o }
+    });
+  }
+  /**
+   * Create and push a bulk edit action (paste, cut, delete)
+   */
+  pushBulkEdit(e, i) {
+    i.length !== 0 && this.push({
+      type: e,
+      timestamp: Date.now(),
+      data: { changes: i }
+    });
+  }
+  /**
+   * Create and push a row add action
+   */
+  pushRowAdd(e, i) {
+    this.push({
+      type: "row_add",
+      timestamp: Date.now(),
+      data: { row: { ...e }, index: i }
+    });
+  }
+  /**
+   * Create and push a row remove action
+   */
+  pushRowRemove(e, i) {
+    this.push({
+      type: "row_remove",
+      timestamp: Date.now(),
+      data: { row: { ...e }, index: i }
+    });
+  }
+  /**
+   * Pop from undo stack and push to redo stack
+   * Returns the action to be undone
+   */
+  popUndo() {
+    if (!this.options.enabled || this.undoStack.length === 0)
+      return null;
+    const e = this.undoStack.pop();
+    return this.redoStack.push(e), e;
+  }
+  /**
+   * Pop from redo stack and push to undo stack
+   * Returns the action to be redone
+   */
+  popRedo() {
+    if (!this.options.enabled || this.redoStack.length === 0)
+      return null;
+    const e = this.redoStack.pop();
+    return this.undoStack.push(e), e;
+  }
+  /**
+   * Check if undo is available
+   */
+  canUndo() {
+    return this.options.enabled && this.undoStack.length > 0;
+  }
+  /**
+   * Check if redo is available
+   */
+  canRedo() {
+    return this.options.enabled && this.redoStack.length > 0;
+  }
+  /**
+   * Get undo stack size
+   */
+  getUndoCount() {
+    return this.undoStack.length;
+  }
+  /**
+   * Get redo stack size
+   */
+  getRedoCount() {
+    return this.redoStack.length;
+  }
+  /**
+   * Clear all history
+   */
+  clear() {
+    this.undoStack = [], this.redoStack = [];
+  }
+  /**
+   * Trim undo stack to max size
+   */
+  trimStack() {
+    for (; this.undoStack.length > this.options.maxSize; )
+      this.undoStack.shift();
+  }
+}
+class Ht {
+  /**
+   * 단일 값에 대한 유효성 검사
+   * @param value - 검사할 값
+   * @param rules - 유효성 규칙 배열
+   * @param row - 전체 행 데이터 (custom validator용)
+   * @returns 검사 결과
+   */
+  static validate(e, i, s) {
+    const o = [];
+    for (const n of i) {
+      const t = this.validateRule(e, n, s);
+      t && o.push({ field: "", message: t });
+    }
+    return {
+      valid: o.length === 0,
+      errors: o
+    };
+  }
+  /**
+   * 단일 규칙 검사
+   * @param value - 검사할 값
+   * @param rule - 유효성 규칙
+   * @param row - 전체 행 데이터
+   * @returns 에러 메시지 또는 null
+   */
+  static validateRule(e, i, s) {
+    switch (i.type) {
+      case "required":
+        return this.validateRequired(e) ? null : i.message;
+      case "min":
+        return this.validateMin(e, i.value) ? null : i.message;
+      case "max":
+        return this.validateMax(e, i.value) ? null : i.message;
+      case "minLength":
+        return this.validateMinLength(e, i.value) ? null : i.message;
+      case "maxLength":
+        return this.validateMaxLength(e, i.value) ? null : i.message;
+      case "pattern":
+        return this.validatePattern(e, i.value) ? null : i.message;
+      case "custom":
+        if (i.validator) {
+          const o = i.validator(e, s || {});
+          return typeof o == "boolean" ? o ? null : i.message : o || null;
+        }
+        return null;
+      default:
+        return null;
+    }
+  }
+  /**
+   * Required 검사 - null, undefined, 빈 문자열 체크
+   */
+  static validateRequired(e) {
+    return !(e == null || typeof e == "string" && e.trim() === "");
+  }
+  /**
+   * Min 검사 - 숫자 최소값
+   */
+  static validateMin(e, i) {
+    if (e == null)
+      return !0;
+    const s = typeof e == "number" ? e : parseFloat(String(e));
+    return !isNaN(s) && s >= i;
+  }
+  /**
+   * Max 검사 - 숫자 최대값
+   */
+  static validateMax(e, i) {
+    if (e == null)
+      return !0;
+    const s = typeof e == "number" ? e : parseFloat(String(e));
+    return !isNaN(s) && s <= i;
+  }
+  /**
+   * MinLength 검사 - 문자열 최소 길이
+   */
+  static validateMinLength(e, i) {
+    return e == null ? !0 : String(e).length >= i;
+  }
+  /**
+   * MaxLength 검사 - 문자열 최대 길이
+   */
+  static validateMaxLength(e, i) {
+    return e == null ? !0 : String(e).length <= i;
+  }
+  /**
+   * Pattern 검사 - 정규식 매칭
+   */
+  static validatePattern(e, i) {
+    return e == null ? !0 : (typeof i == "string" ? new RegExp(i) : i).test(String(e));
+  }
+  /**
+   * 전체 행 유효성 검사
+   * @param row - 검사할 행 데이터
+   * @param columns - 컬럼 정의 (validation 규칙 포함)
+   * @returns 검사 결과
+   */
+  static validateRow(e, i) {
+    const s = [];
+    for (const o of i)
+      if (o.validation && o.validation.length > 0) {
+        const n = e[o.field], t = this.validate(n, o.validation, e);
+        if (!t.valid)
+          for (const l of t.errors)
+            s.push({
+              field: o.field,
+              message: l.message
+            });
+      }
+    return {
+      valid: s.length === 0,
+      errors: s
+    };
+  }
+  /**
+   * 전체 데이터 유효성 검사
+   * @param data - 검사할 데이터 배열
+   * @param columns - 컬럼 정의
+   * @returns 행별 검사 결과 배열
+   */
+  static validateAll(e, i) {
+    return e.map((s) => this.validateRow(s, i));
+  }
+}
+class Ft {
+  /**
+   * Create an editor element based on type
+   */
+  static createEditor(e, i, s, o, n) {
+    const { type: t } = i;
+    switch (t) {
+      case "text":
+      case "number":
+        return this.createTextEditor(e, i, s, o, n);
+      case "select":
+        return this.createSelectEditor(e, i, s, o, n);
+      case "date":
+        return this.createDateEditor(e, i, s, o, n);
+      case "checkbox":
+        return this.createCheckboxEditor(e, i, s, o, n);
+      case "custom":
+        return this.createCustomEditor(e, i, s, o, n);
+      default:
+        return this.createTextEditor(e, i, s, o, n);
+    }
+  }
+  /**
+   * Create text/number input editor
+   */
+  static createTextEditor(e, i, s, o, n) {
+    const t = document.createElement("input");
+    return t.className = "velox-edit-input", t.type = i.type === "number" ? "number" : "text", t.value = e != null ? String(e) : "", i.placeholder && (t.placeholder = i.placeholder), i.type === "number" && (i.min !== void 0 && (t.min = String(i.min)), i.max !== void 0 && (t.max = String(i.max)), i.step !== void 0 && (t.step = String(i.step))), t.addEventListener("blur", () => {
+      const l = i.type === "number" ? parseFloat(t.value) : t.value;
+      s(l);
+    }), t.addEventListener("keydown", (l) => {
+      if (l.key === "Enter") {
+        l.preventDefault(), l.stopPropagation();
+        const a = i.type === "number" ? parseFloat(t.value) : t.value;
+        s(a), n && n(l.shiftKey ? "up" : "down");
+      } else if (l.key === "Tab") {
+        l.preventDefault(), l.stopPropagation();
+        const a = i.type === "number" ? parseFloat(t.value) : t.value;
+        s(a), n && n(l.shiftKey ? "left" : "right");
+      } else l.key === "Escape" && (l.preventDefault(), l.stopPropagation(), o());
+    }), t;
+  }
+  /**
+   * Create select dropdown editor
+   */
+  static createSelectEditor(e, i, s, o, n) {
+    const t = document.createElement("select");
+    return t.className = "velox-edit-select", i.options && i.options.length > 0 && i.options.forEach((l) => {
+      const a = document.createElement("option");
+      a.value = String(l.value ?? ""), a.textContent = l.label, l.value === e && (a.selected = !0), t.appendChild(a);
+    }), t.addEventListener("change", () => {
+      console.log("📦 Select change event", t.value), s(t.value);
+    }), t.addEventListener("keydown", (l) => {
+      l.key === "Enter" ? (l.preventDefault(), l.stopPropagation(), s(t.value), n && n(l.shiftKey ? "up" : "down")) : l.key === "Tab" ? (l.preventDefault(), l.stopPropagation(), s(t.value), n && n(l.shiftKey ? "left" : "right")) : l.key === "Escape" && (l.preventDefault(), l.stopPropagation(), o());
+    }), t;
+  }
+  /**
+   * Create date input editor
+   */
+  static createDateEditor(e, i, s, o, n) {
+    const t = document.createElement("input");
+    if (t.className = "velox-edit-input velox-edit-date", t.type = "date", e instanceof Date)
+      t.value = e.toISOString().split("T")[0];
+    else if (typeof e == "string" && e) {
+      const l = new Date(e);
+      isNaN(l.getTime()) || (t.value = l.toISOString().split("T")[0]);
+    }
+    return t.addEventListener("blur", () => {
+      s(t.value ? new Date(t.value) : null);
+    }), t.addEventListener("keydown", (l) => {
+      l.key === "Enter" ? (l.preventDefault(), l.stopPropagation(), s(t.value ? new Date(t.value) : null), n && n(l.shiftKey ? "up" : "down")) : l.key === "Tab" ? (l.preventDefault(), l.stopPropagation(), s(t.value ? new Date(t.value) : null), n && n(l.shiftKey ? "left" : "right")) : l.key === "Escape" && (l.preventDefault(), l.stopPropagation(), o());
+    }), t;
+  }
+  /**
+   * Create checkbox editor
+   */
+  static createCheckboxEditor(e, i, s, o, n) {
+    const t = document.createElement("div");
+    t.className = "velox-edit-checkbox-container";
+    const l = document.createElement("input");
+    return l.className = "velox-edit-checkbox", l.type = "checkbox", l.checked = !!e, t.appendChild(l), l.addEventListener("change", () => {
+      console.log("📦 Checkbox change event", l.checked), s(l.checked);
+    }), l.addEventListener("keydown", (a) => {
+      a.key === "Enter" || a.key === " " ? (a.preventDefault(), a.stopPropagation(), l.checked = !l.checked, s(l.checked), a.key === "Enter" && n && n(a.shiftKey ? "up" : "down")) : a.key === "Tab" ? (a.preventDefault(), a.stopPropagation(), s(l.checked), n && n(a.shiftKey ? "left" : "right")) : a.key === "Escape" && (a.preventDefault(), a.stopPropagation(), o());
+    }), t;
+  }
+  /**
+   * Create custom editor using renderer function
+   */
+  static createCustomEditor(e, i, s, o, n) {
+    const t = document.createElement("div");
+    if (t.className = "velox-edit-custom", i.renderer)
+      i.renderer(t, e, s, o);
+    else
+      return this.createTextEditor(e, { type: "text" }, s, o, n);
+    return t;
+  }
+}
+class Ot {
+  // ms
+  constructor(e) {
+    this.container = e, this.tooltip = null, this.currentCell = null, this.hideTimeout = null, this.HIDE_DELAY = 100, this.createTooltipElement();
+  }
+  /**
+   * Create tooltip element
+   */
+  createTooltipElement() {
+    this.tooltip = document.createElement("div"), this.tooltip.className = "velox-tooltip", this.tooltip.style.display = "none", this.tooltip.style.position = "absolute", this.tooltip.style.pointerEvents = "none", this.container.appendChild(this.tooltip);
+  }
+  /**
+   * Show tooltip for a cell
+   */
+  show(e, i, s, o) {
+    this.hideTimeout && (clearTimeout(this.hideTimeout), this.hideTimeout = null), this.currentCell = e;
+    let n = null;
+    if (o.tooltip === !0 ? n = this.getAutoTooltipContent(e, i) : typeof o.tooltip == "function" && (n = o.tooltip(i, s)), !n || !this.tooltip) {
+      this.hide();
+      return;
+    }
+    this.tooltip.textContent = n, this.tooltip.style.display = "block", this.positionTooltip(e);
+  }
+  /**
+   * Get auto tooltip content for truncated text
+   */
+  getAutoTooltipContent(e, i) {
+    const s = e.querySelector(".velox-cell-content");
+    return s && (s.scrollWidth > s.clientWidth || s.scrollHeight > s.clientHeight) ? String(i ?? "") : null;
+  }
+  /**
+   * Position tooltip relative to cell
+   */
+  positionTooltip(e) {
+    if (!this.tooltip) return;
+    const i = e.getBoundingClientRect(), s = this.container.getBoundingClientRect(), o = this.tooltip.getBoundingClientRect();
+    let n = i.bottom - s.top + 5, t = i.left - s.left;
+    const l = window.innerWidth, a = window.innerHeight;
+    i.left + o.width > l && (t = i.right - s.left - o.width), i.bottom + o.height + 5 > a && (n = i.top - s.top - o.height - 5), this.tooltip.style.top = `${n}px`, this.tooltip.style.left = `${t}px`;
+  }
+  /**
+   * Hide tooltip
+   */
+  hide() {
+    this.hideTimeout && clearTimeout(this.hideTimeout), this.hideTimeout = window.setTimeout(() => {
+      this.tooltip && (this.tooltip.style.display = "none", this.tooltip.textContent = ""), this.currentCell = null, this.hideTimeout = null;
+    }, this.HIDE_DELAY);
+  }
+  /**
+   * Update tooltip position (for scroll events)
+   */
+  update() {
+    this.currentCell && this.tooltip && this.tooltip.style.display !== "none" && this.positionTooltip(this.currentCell);
+  }
+  /**
+   * Destroy tooltip
+   */
+  destroy() {
+    this.hideTimeout && clearTimeout(this.hideTimeout), this.tooltip && (this.tooltip.remove(), this.tooltip = null), this.currentCell = null;
+  }
+}
+class Vt {
+  constructor(e) {
+    this.ctx = e;
+  }
+  /**
+   * 전체 그리드 렌더링
+   */
+  render() {
+    const e = this.ctx.getState();
+    console.log("🎨 GridRenderer.render() called", { editing: e.edit.editing }), this.renderHeader(), this.renderBody(), this.renderFooter(), this.updateLoadingState(), console.log("🎨 GridRenderer.render() completed", { editing: e.edit.editing });
+  }
+  /**
+   * 헤더 렌더링 (Phase 14: Fixed Right 지원)
+   */
+  renderHeader() {
+    const e = this.ctx;
+    if (e.fixedLeftHeader) {
+      e.fixedLeftHeader.innerHTML = "";
+      const s = p("div", "velox-header-row");
+      e.getFixedLeftColumns().forEach((o) => {
+        if (o.field === "__drag") {
+          const n = p("div", "velox-row-drag-handle");
+          n.style.visibility = "hidden", s.appendChild(n);
+        } else if (o.field === "__checkbox")
+          s.appendChild(this.createHeaderCheckbarCell());
+        else if (o.field === "__rownum") {
+          const n = p("div", "velox-header-cell velox-rownumber-cell");
+          n.textContent = "#", s.appendChild(n);
+        } else
+          s.appendChild(this.createHeaderCell(o));
+      }), e.fixedLeftHeader.appendChild(s);
+    }
+    const i = p("div", "velox-header-row");
+    if (e.getScrollableColumns().forEach((s) => {
+      if (s.field === "__drag") {
+        const o = p("div", "velox-row-drag-handle");
+        o.style.visibility = "hidden", i.appendChild(o);
+      } else if (s.field === "__checkbox")
+        i.appendChild(this.createHeaderCheckbarCell());
+      else if (s.field === "__rownum") {
+        const o = p("div", "velox-header-cell velox-rownumber-cell");
+        o.textContent = "#", i.appendChild(o);
+      } else
+        i.appendChild(this.createHeaderCell(s));
+    }), e.headerElement.innerHTML = "", e.headerElement.appendChild(i), e.fixedRightHeader) {
+      e.fixedRightHeader.innerHTML = "";
+      const s = p("div", "velox-header-row");
+      e.getFixedRightColumns().forEach(
+        (o) => s.appendChild(this.createHeaderCell(o))
+      ), e.fixedRightHeader.appendChild(s), this.updateFixedRightWidth();
+    }
+  }
+  /**
+   * CheckBar 헤더 셀 생성
+   */
+  createHeaderCheckbarCell() {
+    const e = this.ctx, i = e.getOptions(), s = e.getState(), o = p("div", "velox-header-cell velox-checkbox-cell"), n = i.checkBar;
+    if (n.showAll && !n.exclusive) {
+      const t = p("input", "velox-checkbox");
+      t.type = "checkbox";
+      const l = s.checkBar.checkableRows.size, a = s.checkBar.checkedRows.size, r = l > 0 && a === l, h = a > 0 && !r;
+      t.checked = r, t.indeterminate = h, t.addEventListener("change", () => e.checkAll(t.checked)), o.appendChild(t);
+    } else if (n.exclusive) {
+      const t = p("span", "velox-checkbox-label");
+      t.textContent = "선택", o.appendChild(t);
+    }
+    return o;
+  }
+  /**
+   * 헤더 셀 생성
+   */
+  createHeaderCell(e) {
+    var g;
+    const i = this.ctx, s = i.getOptions(), o = i.getState(), n = p("div", "velox-header-cell");
+    n.dataset.field = e.field;
+    const t = e.headerAlign || e.align || "left";
+    if (w(n, `velox-header-cell--align-${t}`), e.width ? (n.style.width = `${e.width}px`, n.style.minWidth = `${e.minWidth || e.width}px`, n.style.maxWidth = `${e.width}px`, n.style.flexShrink = "0") : (n.style.flex = "1", n.style.minWidth = `${e.minWidth || 100}px`), e.headerClass && w(n, e.headerClass), s.sortable && e.sortable !== !1) {
+      w(n, "velox-header-cell--sortable");
+      const d = o.sort.find((f) => f.field === e.field);
+      d != null && d.direction && w(n, "velox-header-cell--sorted");
+    }
+    const l = p("div", "velox-header-content"), a = p("span", "velox-column-drag-handle");
+    a.innerHTML = "⋮⋮", a.title = "드래그하여 컬럼 순서 변경", a.addEventListener("mousedown", (d) => i.startColumnDrag(d, e)), l.appendChild(a);
+    const r = p("span", "velox-header-text");
+    if (r.textContent = e.header, l.appendChild(r), n.appendChild(l), s.sortable && e.sortable !== !1) {
+      const d = p("button", "velox-sort-btn"), f = o.sort.find((C) => C.field === e.field);
+      (f == null ? void 0 : f.direction) === "asc" ? (w(d, "velox-sort-btn--asc"), d.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12" /></svg>') : ((f == null ? void 0 : f.direction) === "desc" && w(d, "velox-sort-btn--desc"), d.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0-3.75-3.75M17.25 21 21 17.25" /></svg>'), f != null && f.direction && w(d, "velox-sort-btn--active"), d.title = "정렬", d.addEventListener("click", (C) => {
+        C.stopPropagation(), i.handleSort(e.field);
+      }), n.appendChild(d);
+    }
+    if (s.filterable && e.filterable !== !1) {
+      const d = p("button", "velox-filter-btn");
+      d.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" /></svg>', ((g = o.filter) == null ? void 0 : g.conditions.some((C) => C.field === e.field)) && w(d, "velox-filter-btn--active"), d.addEventListener("click", (C) => {
+        C.stopPropagation(), i.showFilterPopup(e, d);
+      }), n.appendChild(d);
+    }
+    const h = p("button", "velox-column-menu-btn");
+    if (h.innerHTML = "⋯", h.title = "컬럼 메뉴", h.addEventListener("click", (d) => {
+      d.stopPropagation(), i.showColumnMenu(e, h);
+    }), n.appendChild(h), s.resizable && e.resizable !== !1) {
+      const d = p("div", "velox-resize-handle");
+      d.addEventListener("mousedown", (f) => i.startResize(f, e)), n.appendChild(d);
+    }
+    return n;
+  }
+  /**
+   * 바디 렌더링 (Phase 14: Fixed Right 지원)
+   */
+  renderBody() {
+    const e = this.ctx, i = e.getOptions(), s = e.getVisibleRows(), o = e.getVirtualState(), n = i.rowHeight || 40;
+    if (e.fixedLeftBodyInner && (e.fixedLeftBodyInner.innerHTML = "", i.virtualScroll ? (e.fixedLeftBodyInner.style.height = `${o.totalHeight}px`, e.fixedLeftBodyInner.style.position = "relative") : (e.fixedLeftBodyInner.style.height = "", e.fixedLeftBodyInner.style.position = ""), s.forEach(({ data: t, index: l }) => {
+      const a = this.createRowBase(t, l, "fixedLeft");
+      i.virtualScroll && (a.style.position = "absolute", a.style.top = `${l * n}px`, a.style.left = "0", a.style.right = "0"), e.fixedLeftBodyInner.appendChild(a);
+    })), e.bodyInner.innerHTML = "", i.virtualScroll ? (e.bodyInner.style.height = `${o.totalHeight}px`, e.bodyInner.style.position = "relative") : (e.bodyInner.style.height = "", e.bodyInner.style.position = ""), s.length === 0) {
+      const t = p("div", "velox-empty");
+      t.textContent = i.emptyMessage || "데이터가 없습니다.", e.bodyInner.appendChild(t);
+      return;
+    }
+    s.forEach(({ data: t, index: l }) => {
+      const a = this.createRowBase(t, l, "scrollable");
+      i.virtualScroll && (a.style.position = "absolute", a.style.top = `${l * n}px`, a.style.left = "0", a.style.right = "0"), e.bodyInner.appendChild(a);
+    }), e.fixedRightBodyInner && (e.fixedRightBodyInner.innerHTML = "", i.virtualScroll ? (e.fixedRightBodyInner.style.height = `${o.totalHeight}px`, e.fixedRightBodyInner.style.position = "relative") : (e.fixedRightBodyInner.style.height = "", e.fixedRightBodyInner.style.position = ""), s.forEach(({ data: t, index: l }) => {
+      const a = this.createRowBase(t, l, "fixedRight");
+      i.virtualScroll && (a.style.position = "absolute", a.style.top = `${l * n}px`, a.style.left = "0", a.style.right = "0"), e.fixedRightBodyInner.appendChild(a);
+    }), this.updateFixedRightWidth());
+  }
+  /**
+   * Update Fixed Right container width based on columns
+   * Phase 14: Ensure header and body alignment
+   */
+  updateFixedRightWidth() {
+    const e = this.ctx;
+    if (!e.fixedRightContainer) return;
+    const i = e.getFixedRightColumns();
+    if (i.length === 0) return;
+    let s = 0;
+    i.forEach((n) => {
+      s += n.width || n.minWidth || 100;
+    });
+    const o = this.getScrollbarWidth(e.fixedRightBody);
+    e.fixedRightContainer.style.width = `${s + o}px`, e.fixedRightContainer.style.minWidth = `${s + o}px`, e.fixedRightContainer.style.maxWidth = `${s + o}px`, e.fixedRightHeader && o > 0 && (e.fixedRightHeader.style.paddingRight = `${o}px`), e.fixedRightFooter && o > 0 && (e.fixedRightFooter.style.paddingRight = `${o}px`);
+  }
+  /**
+   * Get scrollbar width of an element
+   * Phase 14: For Fixed Right alignment
+   */
+  getScrollbarWidth(e) {
+    return e ? e.offsetWidth - e.clientWidth : 0;
+  }
+  /**
+   * Row 생성 (통합 메서드)
+   * @param area - 'fixedLeft' | 'scrollable' | 'fixedRight' (Phase 14)
+   */
+  createRowBase(e, i, s) {
+    const o = this.ctx, n = o.getOptions(), t = o.getState(), l = p("div", "velox-row");
+    return l.dataset.rowIndex = String(i), i % 2 === 1 && w(l, "velox-row--alt"), n.selectionStyle === "row" && t.selection.selectedRows.has(i) && w(l, "velox-row--selected"), s === "fixedLeft" && t.checkBar.checkedRows.has(i) && w(l, "velox-row--checked"), l.addEventListener("click", (a) => {
+      const r = a.target;
+      r.classList.contains("velox-checkbox") || r.classList.contains("velox-row-drag-handle") || o.handleRowClick(i, a);
+    }), s !== "fixedLeft" && l.addEventListener("dblclick", (a) => o.handleRowDoubleClick(i, a)), s === "fixedLeft" ? o.getFixedLeftColumns().forEach((a) => {
+      if (a.field === "__drag") {
+        const r = p("div", "velox-row-drag-handle");
+        r.innerHTML = "☰", r.title = "드래그하여 행 순서 변경", r.addEventListener("mousedown", (h) => o.startRowDrag(h, i, l)), l.appendChild(r);
+      } else if (a.field === "__checkbox")
+        l.appendChild(this.createCheckbarCell(i));
+      else if (a.field === "__rownum") {
+        const r = p("div", "velox-cell velox-rownumber-cell");
+        r.textContent = String(i + 1), l.appendChild(r);
+      } else
+        l.appendChild(this.createCell(e, i, a));
+    }) : s === "scrollable" ? o.getScrollableColumns().forEach((a) => {
+      if (a.field === "__drag") {
+        const r = p("div", "velox-row-drag-handle");
+        r.innerHTML = "☰", r.title = "드래그하여 행 순서 변경", r.addEventListener("mousedown", (h) => o.startRowDrag(h, i, l)), l.appendChild(r);
+      } else if (a.field === "__checkbox")
+        l.appendChild(this.createCheckbarCell(i));
+      else if (a.field === "__rownum") {
+        const r = p("div", "velox-cell velox-rownumber-cell");
+        r.textContent = String(i + 1), l.appendChild(r);
+      } else
+        l.appendChild(this.createCell(e, i, a));
+    }) : s === "fixedRight" && o.getFixedRightColumns().forEach(
+      (a) => l.appendChild(this.createCell(e, i, a))
+    ), l;
+  }
+  /**
+   * CheckBar 셀 생성
+   */
+  createCheckbarCell(e) {
+    const i = this.ctx, s = i.getOptions(), o = i.getState(), n = p("div", "velox-cell velox-checkbox-cell"), t = s.checkBar, l = o.checkBar.checkableRows.has(e), a = o.checkBar.checkedRows.has(e), r = p("input", "velox-checkbox");
+    return r.type = t.exclusive ? "radio" : "checkbox", r.name = t.exclusive ? `${i.getGridId()}-check` : "", r.checked = a, r.disabled = !l, l || w(n, "velox-checkbox-cell--disabled"), r.addEventListener("click", (h) => {
+      console.log("✅ Checkbox clicked", { rowIndex: e, checked: r.checked }), h.stopPropagation();
+    }), r.addEventListener("change", () => {
+      if (console.log("🔄 Checkbox changed", { rowIndex: e, checked: r.checked }), t.exclusive) {
+        const h = { ...i.getState().edit };
+        o.checkBar.checkedRows.clear(), r.checked && o.checkBar.checkedRows.add(e), this.render(), h.editing && h.rowIndex !== null && h.field !== null && (i.getState().edit = h, i.renderEditCell(h.rowIndex, h.field, h.originalValue)), i.emitEvent("onCheckChange", e, r.checked);
+      } else
+        i.checkItem(e, r.checked);
+    }), n.appendChild(r), n;
+  }
+  /**
+   * Cell 생성
+   */
+  createCell(e, i, s) {
+    const o = this.ctx, n = o.getOptions(), t = o.getState(), l = p("div", "velox-cell");
+    l.dataset.field = s.field, l.dataset.rowIndex = String(i);
+    const a = s.align || "left";
+    if (w(l, `velox-cell--align-${a}`), s.width ? (l.style.width = `${s.width}px`, l.style.minWidth = `${s.minWidth || s.width}px`, l.style.maxWidth = `${s.width}px`, l.style.flexShrink = "0") : (l.style.flex = "1", l.style.minWidth = `${s.minWidth || 100}px`), s.cellClass) {
+      const f = typeof s.cellClass == "function" ? s.cellClass(e[s.field], e) : s.cellClass;
+      f && w(l, f);
+    }
+    const r = `${i}:${s.field}`;
+    t.selection.selectedCells.has(r) && w(l, "velox-cell--selected");
+    const h = t.selection.focusedCell;
+    h && h.rowIndex === i && h.field === s.field && w(l, "velox-cell--focused"), n.editable && s.editable !== !1 && (w(l, "velox-cell--editable"), l.addEventListener("dblclick", (f) => {
+      if (l.classList.contains("velox-cell--editing")) {
+        console.log("🚫 Double click ignored - already editing"), f.stopPropagation(), f.preventDefault();
+        return;
+      }
+      console.log("🖱️🖱️ Double click detected", { rowIndex: i, field: s.field }), f.stopPropagation(), o.startEdit(i, s.field);
+    }));
+    const g = e[s.field], d = p("span", "velox-cell-content");
+    return s.renderer ? d.innerHTML = s.renderer(g, e, s) : s.formatter ? d.textContent = s.formatter(g, e, s) : d.textContent = H(g, s.type), l.appendChild(d), l.addEventListener("click", (f) => {
+      if (l.classList.contains("velox-cell--editing")) {
+        const C = f.target;
+        if (C.tagName === "INPUT" || C.tagName === "SELECT" || C.tagName === "BUTTON" || C.tagName === "TEXTAREA") {
+          console.log("✅ Interactive element click allowed during edit"), f.stopPropagation();
+          return;
+        }
+        console.log("🚫 Cell click ignored - editing mode (cell background)"), f.stopPropagation(), f.preventDefault();
+        return;
+      }
+      o.handleCellClick(i, s.field, g, f);
+    }), l.addEventListener("mousedown", (f) => {
+      if (l.classList.contains("velox-cell--editing")) {
+        console.log("🔒 Cell mousedown - editing mode (ignored in renderer)");
+        return;
+      }
+      n.selectionStyle === "block" && f.button === 0 && o.startBlockSelection(i, s.field);
+    }), l.addEventListener("mouseenter", () => {
+      o.isBlockSelecting() && o.updateBlockSelection(i, s.field);
+    }), s.tooltip && (w(l, "velox-cell--has-tooltip"), l.addEventListener("mouseenter", () => o.showTooltip(l, g, e, s)), l.addEventListener("mouseleave", () => o.hideTooltip())), l;
+  }
+  /**
+   * Footer Summary 렌더링 (Phase 13, Phase 14: Fixed Right 지원)
+   */
+  renderFooter() {
+    var s, o;
+    const e = this.ctx, i = e.getOptions();
+    if ((s = i.footerSummary) != null && s.visible) {
+      if (e.fixedLeftFooter) {
+        e.fixedLeftFooter.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        if (i.rowDraggable) {
+          const t = p("div", "velox-row-drag-handle");
+          t.style.visibility = "hidden", n.appendChild(t);
+        }
+        if ((o = i.checkBar) != null && o.visible) {
+          const t = p("div", "velox-footer-cell velox-checkbox-cell");
+          n.appendChild(t);
+        }
+        e.getFixedLeftColumns().forEach(
+          (t) => n.appendChild(this.createFooterCell(t))
+        ), e.fixedLeftFooter.appendChild(n);
+      }
+      if (e.footerElement) {
+        e.footerElement.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        if (i.showRowNumbers) {
+          const t = p("div", "velox-footer-cell velox-rownumber-cell");
+          n.appendChild(t);
+        }
+        e.getScrollableColumns().forEach(
+          (t) => n.appendChild(this.createFooterCell(t))
+        ), e.footerElement.appendChild(n);
+      }
+      if (e.fixedRightFooter) {
+        e.fixedRightFooter.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        e.getFixedRightColumns().forEach(
+          (t) => n.appendChild(this.createFooterCell(t))
+        ), e.fixedRightFooter.appendChild(n);
+      }
+    }
+  }
+  /**
+   * Footer 셀 생성 (Phase 13)
+   */
+  createFooterCell(e) {
+    var l, a;
+    const i = this.ctx, s = i.getOptions(), o = p("div", "velox-footer-cell");
+    o.dataset.field = e.field;
+    const n = e.align || "left";
+    w(o, `velox-footer-cell--align-${n}`), e.width ? (o.style.width = `${e.width}px`, o.style.minWidth = `${e.minWidth || e.width}px`) : (o.style.flex = "1", o.style.minWidth = `${e.minWidth || 100}px`);
+    const t = ((a = (l = s.footerSummary) == null ? void 0 : l.columns) == null ? void 0 : a[e.field]) || e.summary;
+    if (t) {
+      const r = i.getSummaryValue(e.field), h = p("span", "velox-footer-content");
+      if (t.label) {
+        const d = p("span", "velox-footer-label");
+        d.textContent = t.label, h.appendChild(d);
+      }
+      const g = p("span", "velox-footer-value");
+      t.formatter ? g.textContent = t.formatter(r) : g.textContent = H(r, e.type), h.appendChild(g), o.appendChild(h), t.className && w(o, t.className);
+    }
+    return o;
+  }
+  /**
+   * Loading 상태 업데이트
+   */
+  updateLoadingState() {
+    const e = this.ctx, i = e.getOptions();
+    e.loadingOverlay && (e.loadingOverlay.style.display = i.loading ? "flex" : "none");
+  }
+  /**
+   * Row validation 상태 업데이트
+   */
+  updateRowValidationState(e) {
+    const i = this.ctx, s = i.getState(), o = i.rootElement.querySelector(`[data-row-index="${e}"]`);
+    if (!o) return;
+    o.querySelectorAll(".velox-cell").forEach((t) => {
+      const a = t.dataset.field;
+      if (!a) return;
+      const r = s.columns.find((h) => h.field === a);
+      r != null && r.validation;
+    });
+  }
+}
+class At {
+  constructor(e) {
+    this.ctx = e, this.filterPopup = null, this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+  /**
+   * Filter 팝업 표시
+   */
+  showFilterPopup(e, i) {
+    var b;
+    this.closeFilterPopup();
+    const s = this.ctx, o = s.getState(), n = p("div", "velox-filter-popup"), t = i.getBoundingClientRect(), l = s.rootElement.getBoundingClientRect();
+    n.style.top = `${t.bottom - l.top + 5}px`, n.style.left = `${Math.max(0, t.left - l.left - 100)}px`;
+    const a = [...new Set(o.data.map((y) => y[e.field]))].filter((y) => y != null).sort(), r = (b = o.filter) == null ? void 0 : b.conditions.find((y) => y.field === e.field), h = p("select", "velox-filter-operator");
+    [
+      { value: "contains", label: "포함" },
+      { value: "equals", label: "같음" },
+      { value: "notEquals", label: "같지 않음" },
+      { value: "startsWith", label: "시작" },
+      { value: "endsWith", label: "끝" },
+      { value: "greaterThan", label: ">" },
+      { value: "lessThan", label: "<" },
+      { value: "greaterThanOrEqual", label: ">=" },
+      { value: "lessThanOrEqual", label: "<=" },
+      { value: "isEmpty", label: "비어있음" },
+      { value: "isNotEmpty", label: "비어있지 않음" }
+    ].forEach((y) => {
+      const S = p("option");
+      S.value = y.value, S.textContent = y.label, (r == null ? void 0 : r.operator) === y.value && (S.selected = !0), h.appendChild(S);
+    }), n.appendChild(h);
+    const d = p("input", "velox-filter-input");
+    if (d.type = e.type === "number" ? "number" : "text", d.placeholder = "값 입력...", (r == null ? void 0 : r.value) !== void 0 && (d.value = String(r.value)), n.appendChild(d), a.length > 0 && a.length <= 15) {
+      const y = p("div", "velox-filter-list"), S = p("div", "velox-filter-list-label");
+      S.textContent = "빠른 선택:", y.appendChild(S), a.slice(0, 10).forEach((E) => {
+        const R = p("div", "velox-filter-list-item");
+        R.textContent = H(E, e.type), R.addEventListener("click", () => {
+          this.applyColumnFilter(e.field, "equals", E), this.closeFilterPopup();
+        }), y.appendChild(R);
+      }), n.appendChild(y);
+    }
+    const f = p("div", "velox-filter-buttons"), C = p("button", "velox-filter-apply");
+    C.textContent = "적용", C.addEventListener("click", () => {
+      const y = h.value, S = e.type === "number" ? parseFloat(d.value) : d.value;
+      this.applyColumnFilter(e.field, y, S), this.closeFilterPopup();
+    }), f.appendChild(C);
+    const x = p("button", "velox-filter-clear");
+    x.textContent = "해제", x.addEventListener("click", () => {
+      this.removeColumnFilter(e.field), this.closeFilterPopup();
+    }), f.appendChild(x), n.appendChild(f), this.filterPopup = n, s.rootElement.appendChild(n), setTimeout(() => document.addEventListener("click", this.boundHandleOutsideClick), 0), d.focus();
+  }
+  /**
+   * Filter 팝업 닫기
+   */
+  closeFilterPopup() {
+    this.filterPopup && (this.filterPopup.remove(), this.filterPopup = null, document.removeEventListener("click", this.boundHandleOutsideClick));
+  }
+  /**
+   * 외부 클릭 핸들러
+   */
+  handleOutsideClick(e) {
+    this.filterPopup && !this.filterPopup.contains(e.target) && this.closeFilterPopup();
+  }
+  /**
+   * Column filter 적용
+   */
+  applyColumnFilter(e, i, s) {
+    const o = this.ctx, n = o.getState(), t = { field: e, operator: i, value: s };
+    if (n.filter) {
+      const l = n.filter.conditions.filter((a) => a.field !== e);
+      l.push(t), n.filter = { conditions: l, logic: "and" };
+    } else
+      n.filter = { conditions: [t], logic: "and" };
+    o.clearSelectionState(), o.applyDataTransformations(), o.render(), o.emitEvent("onFilter", n.filter);
+  }
+  /**
+   * Column filter 제거
+   */
+  removeColumnFilter(e) {
+    const i = this.ctx, s = i.getState();
+    if (s.filter) {
+      const o = s.filter.conditions.filter((n) => n.field !== e);
+      s.filter = o.length === 0 ? null : { conditions: o, logic: "and" }, i.clearSelectionState(), i.applyDataTransformations(), i.render(), s.filter && i.emitEvent("onFilter", s.filter);
+    }
+  }
+  /**
+   * Filter 팝업이 열려있는지 확인
+   */
+  isOpen() {
+    return this.filterPopup !== null;
+  }
+}
+class Nt {
+  constructor(e) {
+    this.ctx = e, this.columnMenuPopup = null, this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+  /**
+   * Column 메뉴 표시
+   */
+  showColumnMenu(e, i) {
+    this.closeColumnMenu();
+    const s = this.ctx, o = s.getOptions(), n = p("div", "velox-column-menu"), t = i.getBoundingClientRect(), l = s.rootElement.getBoundingClientRect();
+    n.style.top = `${t.bottom - l.top + 5}px`, n.style.left = `${t.left - l.left}px`;
+    const a = {
+      field: e.field,
+      column: e,
+      selectedRows: s.getSelectedRows(),
+      selectedCells: s.getSelectedCells(),
+      grid: s
+    }, r = o.contextMenu, h = (r == null ? void 0 : r.showDefaultItems) !== !1, g = (r == null ? void 0 : r.headerItems) || [], d = [
+      {
+        id: "sort-asc",
+        label: "오름차순 정렬",
+        icon: "↑",
+        action: () => s.sort(e.field, "asc")
+      },
+      {
+        id: "sort-desc",
+        label: "내림차순 정렬",
+        icon: "↓",
+        action: () => s.sort(e.field, "desc")
+      },
+      {
+        id: "sort-clear",
+        label: "정렬 해제",
+        icon: "✕",
+        action: () => s.clearSort()
+      },
+      { type: "separator" },
+      {
+        id: "hide",
+        label: "컬럼 숨기기",
+        icon: "👁",
+        action: () => s.hideColumn(e.field)
+      },
+      {
+        id: "autofit",
+        label: "컬럼 너비 자동",
+        icon: "↔",
+        action: () => s.autoFitColumn(e.field)
+      },
+      {
+        id: "autofit-all",
+        label: "모든 컬럼 자동",
+        icon: "⇔",
+        action: () => s.autoFitAllColumns()
+      },
+      { type: "separator" },
+      {
+        id: "fix-left",
+        label: "왼쪽에 고정",
+        icon: "◀",
+        action: () => s.fixColumn(e.field, "left")
+      },
+      {
+        id: "unfix",
+        label: "고정 해제",
+        icon: "◇",
+        action: () => s.fixColumn(e.field, !1)
+      }
+    ];
+    let f = [];
+    h ? (f = [...d], g.length > 0 && (f.push({ type: "separator" }), f.push(...g))) : f = g, f.forEach((C) => {
+      if (typeof C.visible == "function" ? C.visible(a) : C.visible !== !1)
+        if (C.type === "separator") {
+          const b = p("div", "velox-column-menu-separator");
+          n.appendChild(b);
+        } else {
+          const b = p("div", "velox-column-menu-item");
+          C.className && w(b, C.className);
+          const y = typeof C.disabled == "function" ? C.disabled(a) : C.disabled === !0;
+          y && w(b, "velox-column-menu-item--disabled");
+          let S = "";
+          C.icon && (S += `<span class="velox-column-menu-icon">${C.icon}</span>`), S += `<span class="velox-column-menu-label">${C.label || ""}</span>`, C.shortcut && (S += `<span class="velox-column-menu-shortcut">${C.shortcut}</span>`), b.innerHTML = S, y || b.addEventListener("click", () => {
+            var E;
+            (E = C.action) == null || E.call(C, a), this.closeColumnMenu();
+          }), n.appendChild(b);
+        }
+    }), this.columnMenuPopup = n, s.rootElement.appendChild(n), setTimeout(() => document.addEventListener("click", this.boundHandleOutsideClick), 0);
+  }
+  /**
+   * Column 메뉴 닫기
+   */
+  closeColumnMenu() {
+    this.columnMenuPopup && (this.columnMenuPopup.remove(), this.columnMenuPopup = null, document.removeEventListener("click", this.boundHandleOutsideClick));
+  }
+  /**
+   * 외부 클릭 핸들러
+   */
+  handleOutsideClick(e) {
+    this.columnMenuPopup && !this.columnMenuPopup.contains(e.target) && this.closeColumnMenu();
+  }
+  /**
+   * Column 메뉴가 열려있는지 확인
+   */
+  isOpen() {
+    return this.columnMenuPopup !== null;
+  }
+}
+class $t {
+  constructor(e) {
+    this.ctx = e, this.columnDragging = null, this.rowDragging = null, this.resizing = null, this.boundHandleColumnDragMove = this.handleColumnDragMove.bind(this), this.boundHandleColumnDragEnd = this.handleColumnDragEnd.bind(this), this.boundHandleRowDragMove = this.handleRowDragMove.bind(this), this.boundHandleRowDragEnd = this.handleRowDragEnd.bind(this), this.boundHandleResizeMove = this.handleResizeMove.bind(this), this.boundHandleResizeEnd = this.handleResizeEnd.bind(this);
+  }
+  // ============================================
+  // Column Drag & Drop
+  // ============================================
+  /**
+   * Column 드래그 시작
+   */
+  startColumnDrag(e, i) {
+    e.preventDefault(), e.stopPropagation(), this.columnDragging = {
+      field: i.field,
+      startX: e.clientX,
+      element: null
+    };
+    const s = p("div", "velox-column-drag-indicator");
+    s.textContent = i.header, s.style.position = "fixed", s.style.left = `${e.clientX}px`, s.style.top = `${e.clientY}px`, document.body.appendChild(s), this.columnDragging.element = s, document.addEventListener("mousemove", this.boundHandleColumnDragMove), document.addEventListener("mouseup", this.boundHandleColumnDragEnd), w(document.body, "velox-no-select");
+  }
+  /**
+   * Column 드래그 이동
+   */
+  handleColumnDragMove(e) {
+    var n;
+    const i = this.ctx;
+    if (!((n = this.columnDragging) != null && n.element)) return;
+    this.columnDragging.element.style.left = `${e.clientX + 10}px`, this.columnDragging.element.style.top = `${e.clientY + 10}px`;
+    const s = document.elementFromPoint(e.clientX, e.clientY), o = s == null ? void 0 : s.closest(".velox-header-cell");
+    i.headerElement.querySelectorAll(".velox-header-cell--drop-target").forEach((t) => {
+      k(t, "velox-header-cell--drop-target");
+    }), o && o.dataset.field !== this.columnDragging.field && w(o, "velox-header-cell--drop-target");
+  }
+  /**
+   * Column 드래그 종료
+   */
+  handleColumnDragEnd(e) {
+    const i = this.ctx;
+    if (!this.columnDragging) return;
+    const s = this.columnDragging.field, o = document.elementFromPoint(e.clientX, e.clientY), n = o == null ? void 0 : o.closest(".velox-header-cell"), t = n == null ? void 0 : n.dataset.field;
+    this.columnDragging.element && this.columnDragging.element.remove(), i.headerElement.querySelectorAll(".velox-header-cell--drop-target").forEach((l) => {
+      k(l, "velox-header-cell--drop-target");
+    }), document.removeEventListener("mousemove", this.boundHandleColumnDragMove), document.removeEventListener("mouseup", this.boundHandleColumnDragEnd), k(document.body, "velox-no-select"), t && t !== s && i.reorderColumn(s, t), this.columnDragging = null;
+  }
+  /**
+   * Column 드래그 중인지 확인
+   */
+  isColumnDragging() {
+    return this.columnDragging !== null;
+  }
+  // ============================================
+  // Row Drag & Drop
+  // ============================================
+  /**
+   * Row 드래그 시작
+   */
+  startRowDrag(e, i, s) {
+    e.preventDefault(), e.stopPropagation(), this.rowDragging = {
+      index: i,
+      startY: e.clientY,
+      element: null
+    };
+    const o = p("div", "velox-row-drag-indicator");
+    o.textContent = `행 ${i + 1}`, o.style.position = "fixed", o.style.left = `${e.clientX}px`, o.style.top = `${e.clientY}px`, document.body.appendChild(o), this.rowDragging.element = o, w(s, "velox-row--dragging"), document.addEventListener("mousemove", this.boundHandleRowDragMove), document.addEventListener("mouseup", this.boundHandleRowDragEnd), w(document.body, "velox-no-select");
+  }
+  /**
+   * Row 드래그 이동
+   */
+  handleRowDragMove(e) {
+    var n, t;
+    const i = this.ctx;
+    if (!((n = this.rowDragging) != null && n.element)) return;
+    this.rowDragging.element.style.left = `${e.clientX + 10}px`, this.rowDragging.element.style.top = `${e.clientY + 10}px`;
+    const s = document.elementFromPoint(e.clientX, e.clientY), o = s == null ? void 0 : s.closest(".velox-row");
+    if (i.bodyInner.querySelectorAll(".velox-row--drop-target").forEach((l) => {
+      k(l, "velox-row--drop-target");
+    }), (t = i.fixedLeftBodyInner) == null || t.querySelectorAll(".velox-row--drop-target").forEach((l) => {
+      k(l, "velox-row--drop-target");
+    }), o) {
+      const l = parseInt(o.dataset.rowIndex || "-1", 10);
+      l !== -1 && l !== this.rowDragging.index && w(o, "velox-row--drop-target");
+    }
+  }
+  /**
+   * Row 드래그 종료
+   */
+  handleRowDragEnd(e) {
+    var l;
+    const i = this.ctx;
+    if (!this.rowDragging) return;
+    const s = this.rowDragging.index, o = document.elementFromPoint(e.clientX, e.clientY), n = o == null ? void 0 : o.closest(".velox-row"), t = n ? parseInt(n.dataset.rowIndex || "-1", 10) : -1;
+    this.rowDragging.element && this.rowDragging.element.remove(), i.bodyInner.querySelectorAll(".velox-row--dragging, .velox-row--drop-target").forEach((a) => {
+      k(a, "velox-row--dragging"), k(a, "velox-row--drop-target");
+    }), (l = i.fixedLeftBodyInner) == null || l.querySelectorAll(".velox-row--dragging, .velox-row--drop-target").forEach((a) => {
+      k(a, "velox-row--dragging"), k(a, "velox-row--drop-target");
+    }), document.removeEventListener("mousemove", this.boundHandleRowDragMove), document.removeEventListener("mouseup", this.boundHandleRowDragEnd), k(document.body, "velox-no-select"), t !== -1 && t !== s && i.moveRow(s, t), this.rowDragging = null;
+  }
+  /**
+   * Row 드래그 중인지 확인
+   */
+  isRowDragging() {
+    return this.rowDragging !== null;
+  }
+  // ============================================
+  // Column Resize
+  // ============================================
+  /**
+   * Column 리사이즈 시작
+   */
+  startResize(e, i) {
+    const s = this.ctx;
+    e.preventDefault(), e.stopPropagation();
+    const o = s.headerElement.querySelector(`[data-field="${i.field}"]`);
+    o && (this.resizing = {
+      column: i,
+      startX: e.clientX,
+      startWidth: o.offsetWidth
+    }, document.addEventListener("mousemove", this.boundHandleResizeMove), document.addEventListener("mouseup", this.boundHandleResizeEnd), w(document.body, "velox-no-select"));
+  }
+  /**
+   * Column 리사이즈 이동
+   */
+  handleResizeMove(e) {
+    const i = this.ctx;
+    if (!this.resizing) return;
+    const s = e.clientX - this.resizing.startX, o = Math.max(50, this.resizing.startWidth + s);
+    this.resizing.column.width = o, i.invalidateColumnCache(), i.render();
+  }
+  /**
+   * Column 리사이즈 종료
+   */
+  handleResizeEnd() {
+    const e = this.ctx;
+    this.resizing && (document.removeEventListener("mousemove", this.boundHandleResizeMove), document.removeEventListener("mouseup", this.boundHandleResizeEnd), k(document.body, "velox-no-select"), e.emitEvent("onColumnResize", this.resizing.column.field, this.resizing.column.width || 0), this.resizing = null);
+  }
+  /**
+   * 리사이즈 중인지 확인
+   */
+  isResizing() {
+    return this.resizing !== null;
+  }
+  /**
+   * 모든 드래그 상태 초기화
+   */
+  cleanup() {
+    this.columnDragging && (this.columnDragging.element && this.columnDragging.element.remove(), document.removeEventListener("mousemove", this.boundHandleColumnDragMove), document.removeEventListener("mouseup", this.boundHandleColumnDragEnd), this.columnDragging = null), this.rowDragging && (this.rowDragging.element && this.rowDragging.element.remove(), document.removeEventListener("mousemove", this.boundHandleRowDragMove), document.removeEventListener("mouseup", this.boundHandleRowDragEnd), this.rowDragging = null), this.resizing && (document.removeEventListener("mousemove", this.boundHandleResizeMove), document.removeEventListener("mouseup", this.boundHandleResizeEnd), this.resizing = null), k(document.body, "velox-no-select");
+  }
+  /**
+   * 리소스 정리 (destroy 별칭)
+   */
+  destroy() {
+    this.cleanup();
+  }
+}
+class zt {
+  constructor(e) {
+    this.context = e, this.summaryCache = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Footer Summary 값 계산
+   * @param field 컬럼 필드명
+   * @returns 계산된 집계 값
+   */
+  calculateFooterSummary(e) {
+    var g, d;
+    const i = this.context.getOptions(), s = this.context.getState().columns.find((f) => f.field === e);
+    if (!s) return null;
+    const o = s.summary || ((d = (g = i.footerSummary) == null ? void 0 : g.columns) == null ? void 0 : d[e]);
+    if (!o) return null;
+    const n = `footer:${e}`;
+    if (this.summaryCache.has(n))
+      return this.summaryCache.get(n);
+    const t = this.context.getDisplayData(), l = t.map((f) => f[e]), a = this.executeAggregation(o, l, t), r = this.formatSummaryValue(a, o, s), h = {
+      field: e,
+      function: o.function,
+      value: a,
+      formattedValue: r
+    };
+    return this.summaryCache.set(n, h), h;
+  }
+  /**
+   * 모든 Footer Summary 값 계산
+   * @returns field -> SummaryResult 맵
+   */
+  calculateAllFooterSummaries() {
+    var o;
+    const e = this.context.getOptions(), i = /* @__PURE__ */ new Map();
+    return (o = e.footerSummary) != null && o.visible && this.context.getVisibleColumns().forEach((n) => {
+      const t = this.calculateFooterSummary(n.field);
+      t && i.set(n.field, t);
+    }), i;
+  }
+  /**
+   * Group Summary 값 계산
+   * @param field 컬럼 필드명
+   * @param _groupValue 그룹 값 (reserved for future use)
+   * @param groupData 그룹 데이터
+   * @returns 계산된 집계 값
+   */
+  calculateGroupSummary(e, i, s) {
+    var h, g;
+    const o = this.context.getOptions(), n = this.context.getState().columns.find((d) => d.field === e);
+    if (!n || !((h = o.groupSummary) != null && h.enabled)) return null;
+    const t = (g = o.groupSummary.columns) == null ? void 0 : g[e];
+    if (!t) return null;
+    const l = s.map((d) => d[e]), a = this.executeAggregation(t, l, s), r = this.formatSummaryValue(a, t, n);
+    return {
+      field: e,
+      function: t.function,
+      value: a,
+      formattedValue: r
+    };
+  }
+  /**
+   * 집계 함수 실행
+   * @param config Summary 설정
+   * @param values 값 배열
+   * @param data 원본 데이터 배열
+   * @returns 집계된 값
+   */
+  executeAggregation(e, i, s) {
+    const o = i.filter((n) => n != null);
+    switch (e.function) {
+      case "sum":
+        return this.calculateSum(o);
+      case "avg":
+        return this.calculateAverage(o);
+      case "count":
+        return this.calculateCount(o);
+      case "min":
+        return this.calculateMin(o);
+      case "max":
+        return this.calculateMax(o);
+      case "custom":
+        return e.customFunction ? e.customFunction(i, s) : null;
+      default:
+        return null;
+    }
+  }
+  /**
+   * 합계 계산
+   */
+  calculateSum(e) {
+    return e.reduce((i, s) => {
+      const o = this.toNumber(s);
+      return i + (o !== null ? o : 0);
+    }, 0);
+  }
+  /**
+   * 평균 계산
+   */
+  calculateAverage(e) {
+    if (e.length === 0) return null;
+    const i = this.calculateSum(e), s = e.filter((o) => this.toNumber(o) !== null).length;
+    return s > 0 ? i / s : null;
+  }
+  /**
+   * 개수 계산
+   */
+  calculateCount(e) {
+    return e.length;
+  }
+  /**
+   * 최소값 계산
+   */
+  calculateMin(e) {
+    const i = e.map((s) => this.toNumber(s)).filter((s) => s !== null);
+    return i.length > 0 ? Math.min(...i) : null;
+  }
+  /**
+   * 최대값 계산
+   */
+  calculateMax(e) {
+    const i = e.map((s) => this.toNumber(s)).filter((s) => s !== null);
+    return i.length > 0 ? Math.max(...i) : null;
+  }
+  /**
+   * CellValue를 숫자로 변환
+   */
+  toNumber(e) {
+    if (typeof e == "number") return e;
+    if (typeof e == "string") {
+      const i = e.replace(/,/g, ""), s = parseFloat(i);
+      return isNaN(s) ? null : s;
+    }
+    return typeof e == "boolean" ? e ? 1 : 0 : null;
+  }
+  /**
+   * Summary 값 포맷팅
+   */
+  formatSummaryValue(e, i, s) {
+    return i.formatter ? i.formatter(e) : s.formatter ? s.formatter(e, {}, s) : e == null ? "" : typeof e == "number" ? i.format ? this.applyNumberFormat(e, i.format) : this.formatNumber(e) : String(e);
+  }
+  /**
+   * 숫자 포맷 적용
+   * @param value 숫자 값
+   * @param format 포맷 문자열 (예: '0,0.00')
+   */
+  applyNumberFormat(e, i) {
+    const s = i.includes(","), o = i.match(/\.(\d+)/), n = o ? o[1].length : 0;
+    let t = e.toFixed(n);
+    if (s) {
+      const l = t.split(".");
+      l[0] = l[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), t = l.join(".");
+    }
+    return t;
+  }
+  /**
+   * 기본 숫자 포맷팅
+   */
+  formatNumber(e) {
+    return Number.isInteger(e) ? e.toLocaleString("en-US") : e.toLocaleString("en-US", {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+  }
+  /**
+   * 캐시 무효화
+   */
+  invalidateCache() {
+    this.summaryCache.clear();
+  }
+  /**
+   * 특정 필드의 캐시만 무효화
+   */
+  invalidateFieldCache(e) {
+    this.summaryCache.delete(`footer:${e}`);
+  }
+  /**
+   * Summary 값 가져오기 (캐시 우선)
+   */
+  getSummaryValue(e) {
+    const i = this.calculateFooterSummary(e);
+    return (i == null ? void 0 : i.value) ?? null;
+  }
+  /**
+   * 모든 Summary 값 가져오기
+   */
+  getAllSummaryValues() {
+    const e = this.calculateAllFooterSummaries(), i = {};
+    return e.forEach((s, o) => {
+      i[o] = s.value;
+    }), i;
+  }
+}
+const _t = {
+  rowHeight: 40,
+  headerHeight: 44,
+  showRowNumbers: !1,
+  rowDraggable: !1,
+  selectable: !0,
+  selectionMode: "multiple",
+  selectionStyle: "row",
+  showCheckbox: !1,
+  sortable: !0,
+  filterable: !1,
+  editable: !1,
+  resizable: !0,
+  virtualScroll: !1,
+  bufferSize: 5,
+  theme: "default",
+  locale: "ko-KR",
+  emptyMessage: "데이터가 없습니다.",
+  loading: !1,
+  loadingMessage: "로딩 중...",
+  undoable: !0,
+  undoStackSize: 50
+}, N = {
+  visible: !1,
+  exclusive: !1,
+  showAll: !0
+};
+class G {
+  constructor(e, i, s = {}) {
+    var o, n, t, l, a;
+    if (this.footerElement = null, this.fixedLeftFooter = null, this.loadingOverlay = null, this.fixedLeftContainer = null, this.fixedLeftHeader = null, this.fixedLeftBody = null, this.fixedLeftBodyInner = null, this.fixedRightContainer = null, this.fixedRightHeader = null, this.fixedRightBody = null, this.fixedRightBodyInner = null, this.fixedRightFooter = null, this.paginationContainer = null, this.infiniteScrollLoading = !1, this.infiniteScrollAllLoaded = !1, this.blockSelecting = null, this.measureCanvas = null, this.measureContext = null, this.virtualState = {
+      startIndex: 0,
+      endIndex: 0,
+      visibleCount: 0,
+      totalHeight: 0
+    }, this.dataIndexMap = /* @__PURE__ */ new Map(), this.columnCache = {
+      visible: null,
+      fixedLeft: null,
+      scrollable: null,
+      fixedRight: null,
+      // Phase 14: Columns fixed to right
+      dirty: !0
+    }, this.tooltip = null, this.editModeCleanup = null, this.scrollHandlers = [], this.wheelHandler = null, typeof e == "string") {
+      const r = document.querySelector(e);
+      if (!r) throw new Error(`Container not found: ${e}`);
+      this.container = r;
+    } else
+      this.container = e;
+    this.options = { ..._t, ...i }, this.options.checkBar ? this.options.checkBar = { ...N, ...this.options.checkBar } : this.options.showCheckbox && (this.options.checkBar = { ...N, visible: !0 }), this.events = s, this.gridId = vt("velox-grid"), this.boundHandleBlockSelectionEnd = this.handleBlockSelectionEnd.bind(this), this.boundHandleKeyDown = this.handleKeyDown.bind(this), this.history = new Pt({
+      enabled: this.options.undoable ?? !0,
+      maxSize: this.options.undoStackSize ?? 50
+    }), this.renderer = new Vt(this), this.filterPopupManager = new At(this), this.columnMenuManager = new Nt(this), this.dragManager = new $t(this), this.summary = new zt(this), this.state = {
+      data: [],
+      displayData: [],
+      columns: this.options.columns.map((r) => ({ ...r })),
+      selection: {
+        selectedRows: /* @__PURE__ */ new Set(),
+        selectedCells: /* @__PURE__ */ new Set(),
+        focusedCell: null,
+        selections: [],
+        lastSelectedRow: null
+      },
+      checkBar: {
+        checkedRows: /* @__PURE__ */ new Set(),
+        checkableRows: /* @__PURE__ */ new Set()
+      },
+      rowStates: /* @__PURE__ */ new Map(),
+      // Phase 15: Row state tracking
+      sort: [],
+      filter: null,
+      edit: {
+        editing: !1,
+        rowIndex: null,
+        field: null,
+        originalValue: null
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: ((o = this.options.pagination) == null ? void 0 : o.pageSize) || 20,
+        totalCount: ((n = this.options.dataSource) == null ? void 0 : n.totalCount) || 0,
+        totalPages: 0,
+        loading: !1
+      },
+      scroll: { top: 0, left: 0 }
+    }, this.options.data && (this.state.data = this.options.data.map((r) => ({ ...r })), this.rebuildDataIndexMap(), this.state.displayData = [...this.state.data], this.initCheckableRows(), this.state.data.forEach((r) => {
+      this.state.rowStates.set(r, "none");
+    })), this.build(), this.tooltip = new Ot(this.rootElement), (t = this.options.pagination) != null && t.enabled ? this.isRemoteDataSource() ? (this.render(), this.fetchData()) : (this.state.pagination.totalCount = this.state.data.length, this.updateTotalPages(), this.options.pagination.mode === "infinite" ? this.applyLocalInfiniteScroll() : this.applyLocalPagination(), this.render()) : this.render(), this.attachEvents(), (a = (l = this.events).onReady) == null || a.call(l, this);
+  }
+  // GridContext: Data index methods (public for module access)
+  rebuildDataIndexMap() {
+    this.dataIndexMap.clear(), this.state.data.forEach((e, i) => {
+      this.dataIndexMap.set(e, i);
+    });
+  }
+  initCheckableRows() {
+    this.state.checkBar.checkableRows.clear();
+    const e = this.options.checkBar;
+    this.state.displayData.forEach((i, s) => {
+      e != null && e.checkableCallback ? e.checkableCallback(i, s) && this.state.checkBar.checkableRows.add(s) : this.state.checkBar.checkableRows.add(s);
+    });
+  }
+  // GridContext: Column cache methods (public for module access)
+  invalidateColumnCache() {
+    this.columnCache.dirty = !0, this.columnCache.visible = null, this.columnCache.fixedLeft = null, this.columnCache.scrollable = null, this.columnCache.fixedRight = null;
+  }
+  /**
+   * Get special columns with displayOrder
+   * Phase 14.1: Helper method to generate special columns sorted by displayOrder
+   */
+  getSpecialColumnsWithOrder() {
+    var i;
+    const e = [];
+    if (typeof this.options.rowDraggable == "object" && this.options.rowDraggable.enabled) {
+      const s = this.options.rowDraggable.displayOrder ?? 0;
+      e.push({
+        col: { field: "__drag", header: "", width: 44, visible: !0 },
+        order: s
+      });
+    } else this.options.rowDraggable === !0 && e.push({
+      col: { field: "__drag", header: "", width: 44, visible: !0 },
+      order: 0
+      // default order
+    });
+    if ((i = this.options.checkBar) != null && i.visible) {
+      const s = this.options.checkBar.displayOrder ?? 10;
+      e.push({
+        col: { field: "__checkbox", header: "", width: 44, visible: !0 },
+        order: s
+      });
+    }
+    if (typeof this.options.showRowNumbers == "object" && this.options.showRowNumbers.visible) {
+      const s = this.options.showRowNumbers.displayOrder ?? 20;
+      e.push({
+        col: { field: "__rownum", header: "#", width: 50, visible: !0 },
+        order: s
+      });
+    } else this.options.showRowNumbers === !0 && e.push({
+      col: { field: "__rownum", header: "#", width: 50, visible: !0 },
+      order: 20
+      // default order
+    });
+    return e.sort((s, o) => s.order - o.order), e.map((s) => s.col);
+  }
+  /**
+   * Get fixed left columns
+   * Phase 14: Only include special columns when fixedOptions.colCount > 0
+   * Phase 14.1: Sort special columns by displayOrder
+   * 
+   * Logic:
+   * - If colCount = 0: Fixed left is empty (special columns go to scrollable)
+   * - If colCount > 0: Fixed left = special columns (sorted by displayOrder) + first N data columns
+   */
+  getFixedLeftColumns() {
+    if (this.columnCache.dirty || !this.columnCache.fixedLeft) {
+      const { colCount: e = 0 } = this.options.fixedOptions || {};
+      if (e > 0) {
+        const i = this.getSpecialColumnsWithOrder(), o = this.getDataColumns().slice(0, e);
+        this.columnCache.fixedLeft = [...i, ...o];
+      } else
+        this.columnCache.fixedLeft = [];
+    }
+    return this.columnCache.fixedLeft;
+  }
+  /**
+   * Get columns fixed to right (based on fixedOptions.rightCount)
+   * Phase 14: New method for right fixed columns
+   */
+  getFixedRightColumns() {
+    if (this.columnCache.dirty || !this.columnCache.fixedRight) {
+      const { rightCount: e = 0 } = this.options.fixedOptions || {}, i = this.getDataColumns(), s = i.length;
+      this.columnCache.fixedRight = e > 0 ? i.slice(s - e) : [];
+    }
+    return this.columnCache.fixedRight;
+  }
+  /**
+   * Get scrollable columns (middle area between fixed left and fixed right)
+   * Phase 14: Include special columns when colCount = 0
+   * Phase 14.1: Sort special columns by displayOrder
+   * 
+   * Logic:
+   * - If colCount = 0: Scrollable = special columns (sorted by displayOrder) + all data columns (except fixed right)
+   * - If colCount > 0: Scrollable = middle data columns only (between fixed left and fixed right)
+   */
+  getScrollableColumns() {
+    if (this.columnCache.dirty || !this.columnCache.scrollable) {
+      const { colCount: e = 0, rightCount: i = 0 } = this.options.fixedOptions || {}, s = this.getDataColumns(), o = s.length;
+      if (e === 0) {
+        const n = this.getSpecialColumnsWithOrder(), t = o - i, l = t > 0 ? s.slice(0, t) : [];
+        this.columnCache.scrollable = [...n, ...l];
+      } else {
+        const n = e, t = o - i;
+        this.columnCache.scrollable = n < t ? s.slice(n, t) : [];
+      }
+      this.columnCache.dirty = !1;
+    }
+    return this.columnCache.scrollable;
+  }
+  /**
+   * Get data columns (exclude special columns)
+   * Phase 14: Helper method to filter out special columns
+   */
+  getDataColumns() {
+    return this.state.columns.filter(
+      (e) => e.visible !== !1 && !this.isSpecialColumn(e)
+    );
+  }
+  /**
+   * Check if column is special (CheckBar, RowNumbers, DragHandle)
+   * Phase 14: Helper method to identify special columns
+   */
+  isSpecialColumn(e) {
+    return e.field === "__checkbox" || e.field === "__rownum" || e.field === "__drag";
+  }
+  getVisibleColumns() {
+    return (this.columnCache.dirty || !this.columnCache.visible) && (this.columnCache.visible = this.state.columns.filter((e) => e.visible !== !1)), this.columnCache.visible;
+  }
+  /**
+   * Check if grid has fixed left columns
+   * Phase 14: Only true when fixedOptions.colCount > 0
+   */
+  hasFixedLeft() {
+    const { colCount: e = 0 } = this.options.fixedOptions || {};
+    return e > 0;
+  }
+  /**
+   * Check if grid has fixed right columns
+   * Phase 14: New method for hasFixedRight
+   */
+  hasFixedRight() {
+    const { rightCount: e = 0 } = this.options.fixedOptions || {};
+    return e > 0;
+  }
+  build() {
+    var s, o, n, t;
+    this.rootElement = p("div", "velox-grid"), this.rootElement.id = this.gridId, this.rootElement.tabIndex = 0, this.options.className && w(this.rootElement, this.options.className), this.hasFixedRight() && w(this.rootElement, "has-fixed-right"), this.options.width && (this.rootElement.style.width = typeof this.options.width == "number" ? `${this.options.width}px` : this.options.width), this.options.height && (this.rootElement.style.height = typeof this.options.height == "number" ? `${this.options.height}px` : this.options.height);
+    const e = p("div", "velox-wrapper");
+    this.hasFixedLeft() && (this.fixedLeftContainer = p("div", "velox-fixed-left"), this.fixedLeftHeader = p("div", "velox-header velox-header--fixed"), this.fixedLeftBody = p("div", "velox-body--fixed"), this.fixedLeftBodyInner = p("div", "velox-body-inner"), this.fixedLeftBody.appendChild(this.fixedLeftBodyInner), this.fixedLeftContainer.appendChild(this.fixedLeftHeader), this.fixedLeftContainer.appendChild(this.fixedLeftBody), (s = this.options.footerSummary) != null && s.visible && (this.fixedLeftFooter = p("div", "velox-footer velox-footer--fixed"), this.fixedLeftContainer.appendChild(this.fixedLeftFooter)), e.appendChild(this.fixedLeftContainer));
+    const i = p("div", "velox-main");
+    this.headerElement = p("div", "velox-header"), this.bodyElement = p("div", "velox-body"), this.bodyInner = p("div", "velox-body-inner"), this.bodyElement.appendChild(this.bodyInner), i.appendChild(this.headerElement), i.appendChild(this.bodyElement), (o = this.options.footerSummary) != null && o.visible && (this.footerElement = p("div", "velox-footer"), i.appendChild(this.footerElement)), e.appendChild(i), this.hasFixedRight() && (this.fixedRightContainer = p("div", "velox-fixed-right"), this.fixedRightHeader = p("div", "velox-header velox-header--fixed-right"), this.fixedRightBody = p("div", "velox-body--fixed"), this.fixedRightBodyInner = p("div", "velox-body-inner"), this.fixedRightBody.appendChild(this.fixedRightBodyInner), this.fixedRightContainer.appendChild(this.fixedRightHeader), this.fixedRightContainer.appendChild(this.fixedRightBody), (n = this.options.footerSummary) != null && n.visible && (this.fixedRightFooter = p("div", "velox-footer velox-footer--fixed-right"), this.fixedRightContainer.appendChild(this.fixedRightFooter)), e.appendChild(this.fixedRightContainer)), this.rootElement.appendChild(e), (t = this.options.pagination) != null && t.enabled && (this.paginationContainer = p("div", "velox-pagination"), this.rootElement.appendChild(this.paginationContainer)), this.container.innerHTML = "", this.container.appendChild(this.rootElement), this.buildLoadingOverlay();
+  }
+  buildLoadingOverlay() {
+    this.loadingOverlay = p("div", "velox-loading-overlay"), this.loadingOverlay.style.display = "none";
+    const e = p("div", "velox-loading-spinner"), i = p("div", "velox-loading-message");
+    i.textContent = this.options.loadingMessage || "로딩 중...", this.loadingOverlay.appendChild(e), this.loadingOverlay.appendChild(i), this.rootElement.appendChild(this.loadingOverlay);
+  }
+  // GridContext: Virtual scroll methods (public for module access)
+  calculateVirtualState() {
+    if (!this.options.virtualScroll) return;
+    const e = this.options.rowHeight || 40, i = this.bodyElement.clientHeight, s = this.bodyElement.scrollTop, o = this.options.bufferSize || 5;
+    this.virtualState.visibleCount = Math.ceil(i / e), this.virtualState.startIndex = Math.max(0, Math.floor(s / e) - o), this.virtualState.endIndex = Math.min(
+      this.state.displayData.length,
+      this.virtualState.startIndex + this.virtualState.visibleCount + o * 2
+    ), this.virtualState.totalHeight = this.state.displayData.length * e;
+  }
+  getVisibleRows() {
+    if (!this.options.virtualScroll)
+      return this.state.displayData.map((i, s) => ({ data: i, index: s }));
+    this.calculateVirtualState();
+    const e = [];
+    for (let i = this.virtualState.startIndex; i < this.virtualState.endIndex; i++)
+      this.state.displayData[i] && e.push({ data: this.state.displayData[i], index: i });
+    return e;
+  }
+  // GridContext: Rendering methods - delegated to GridRenderer
+  render() {
+    console.log("🔄 render() called", { editing: this.state.edit.editing, rowIndex: this.state.edit.rowIndex, field: this.state.edit.field }), this.renderer.render(), this.paginationContainer && this.renderPagination();
+  }
+  renderHeader() {
+    this.renderer.renderHeader();
+  }
+  renderBody() {
+    this.renderer.renderBody();
+  }
+  updateLoadingState() {
+    this.renderer.updateLoadingState();
+  }
+  // GridContext: Filter popup methods - delegated to GridFilterPopup
+  showFilterPopup(e, i) {
+    this.filterPopupManager.showFilterPopup(e, i);
+  }
+  closeFilterPopup() {
+    this.filterPopupManager.closeFilterPopup();
+  }
+  applyColumnFilter(e, i, s) {
+    this.filterPopupManager.applyColumnFilter(e, i, s);
+  }
+  removeColumnFilter(e) {
+    this.filterPopupManager.removeColumnFilter(e);
+  }
+  detachEvents() {
+    this.scrollHandlers.forEach((e) => {
+      this.bodyElement.removeEventListener("scroll", e), this.fixedRightBody && this.fixedRightBody.removeEventListener("scroll", e);
+    }), this.scrollHandlers = [], this.wheelHandler && (this.bodyElement.removeEventListener("wheel", this.wheelHandler), this.wheelHandler = null);
+  }
+  attachEvents() {
+    this.detachEvents();
+    let e = !1, i = null;
+    const s = (n) => {
+      var a, r;
+      if (e || i !== null) return;
+      i = window.setTimeout(() => {
+        i = null;
+      }, 16), e = !0;
+      const t = n === "fixedRight" && this.fixedRightBody ? this.fixedRightBody.scrollTop : this.bodyElement.scrollTop, l = this.bodyElement.scrollLeft;
+      this.state.scroll.top = t, this.state.scroll.left = l, this.fixedLeftBody && this.fixedLeftBody.scrollTop !== t && (this.fixedLeftBody.scrollTop = t), n !== "fixedRight" && this.fixedRightBody && this.fixedRightBody.scrollTop !== t && (this.fixedRightBody.scrollTop = t), n !== "body" && this.bodyElement.scrollTop !== t && (this.bodyElement.scrollTop = t), this.headerElement.scrollLeft !== l && (this.headerElement.scrollLeft = l), this.footerElement && this.footerElement.scrollLeft !== l && (this.footerElement.scrollLeft = l), this.options.virtualScroll && this.renderBody(), (r = (a = this.events).onScroll) == null || r.call(a, this.state.scroll.top, this.state.scroll.left), (n === "body" || n === "fixedRight") && this.checkInfiniteScroll(), e = !1;
+    }, o = yt(() => {
+      const n = this.headerElement.scrollLeft;
+      this.bodyElement.scrollLeft = n, this.footerElement && (this.footerElement.scrollLeft = n);
+    }, 16);
+    if (this.hasFixedRight()) {
+      this.wheelHandler = (l) => {
+        l.preventDefault(), this.fixedRightBody && (this.fixedRightBody.scrollTop += l.deltaY);
+      }, this.bodyElement.addEventListener("wheel", this.wheelHandler, { passive: !1 });
+      const n = () => s("fixedRight");
+      this.fixedRightBody.addEventListener("scroll", n), this.scrollHandlers.push(n);
+      const t = () => s("body");
+      this.bodyElement.addEventListener("scroll", t), this.scrollHandlers.push(t);
+    } else {
+      const n = () => s("body");
+      this.bodyElement.addEventListener("scroll", n), this.scrollHandlers.push(n);
+    }
+    this.headerElement.addEventListener("scroll", o), this.scrollHandlers.push(o), document.addEventListener("mouseup", this.boundHandleBlockSelectionEnd), this.rootElement.addEventListener("keydown", this.boundHandleKeyDown);
+  }
+  handleSort(e) {
+    var o, n, t;
+    const i = this.state.sort.findIndex((l) => l.field === e);
+    let s = "asc";
+    if (i >= 0) {
+      const l = this.state.sort[i].direction;
+      l === "asc" ? s = "desc" : l === "desc" && (s = null);
+    }
+    this.state.sort = s ? [{ field: e, direction: s }] : [], this.clearSelectionState(), this.applyDataTransformations(), (!this.isRemoteDataSource() || !((o = this.options.pagination) != null && o.enabled)) && this.render(), (t = (n = this.events).onSort) == null || t.call(n, this.state.sort);
+  }
+  // GridContext: Event handlers (public for module access)
+  handleRowClick(e, i) {
+    var o, n;
+    if (!this.options.selectable) return;
+    (this.options.selectionStyle || "row") === "row" && this.handleRowSelection(e, i), (n = (o = this.events).onRowClick) == null || n.call(o, e, this.state.displayData[e]);
+  }
+  handleRowSelection(e, i) {
+    var o, n;
+    const s = this.options.selectionMode || "multiple";
+    if (s !== "none")
+      if (s === "multiple" && (i.ctrlKey || i.metaKey)) {
+        const t = this.state.selection.selectedRows.has(e);
+        this.selectRow(e, !t);
+      } else if (s === "multiple" && i.shiftKey) {
+        const t = Array.from(this.state.selection.selectedRows);
+        if (t.length > 0) {
+          const l = t[t.length - 1], a = Math.min(l, e), r = Math.max(l, e);
+          for (let h = a; h <= r; h++) this.state.selection.selectedRows.add(h);
+          this.render(), (n = (o = this.events).onSelectionChange) == null || n.call(o, this.getSelectedRows());
+        } else
+          this.selectRow(e, !0);
+      } else if (s === "extended" && (i.ctrlKey || i.metaKey)) {
+        const t = this.state.selection.selectedRows.has(e);
+        this.selectRow(e, !t);
+      } else
+        this.state.selection.selectedRows.clear(), this.selectRow(e, !0);
+  }
+  handleCellClick(e, i, s, o) {
+    var t, l;
+    if (console.log("🔍 handleCellClick", { rowIndex: e, field: i, editing: this.state.edit.editing, editRow: this.state.edit.rowIndex, editField: this.state.edit.field }), this.state.edit.editing && this.state.edit.rowIndex === e && this.state.edit.field === i) {
+      console.log("✅ Same cell clicked - maintaining edit mode");
+      return;
+    }
+    const n = this.options.selectionStyle || "row";
+    n === "cell" || n === "block" ? this.handleCellSelection(e, i, o) : n === "row" && (this.state.selection.focusedCell = { rowIndex: e, field: i }), (l = (t = this.events).onCellClick) == null || l.call(t, e, i, s);
+  }
+  handleCellSelection(e, i, s) {
+    var t, l;
+    const o = this.options.selectionMode || "multiple", n = `${e}:${i}`;
+    if (o !== "none") {
+      if (this.state.selection.focusedCell = { rowIndex: e, field: i }, o === "multiple" && (s.ctrlKey || s.metaKey))
+        this.state.selection.selectedCells.has(n) ? this.state.selection.selectedCells.delete(n) : this.state.selection.selectedCells.add(n);
+      else if (o === "multiple" && s.shiftKey) {
+        const a = this.state.selection.focusedCell;
+        a && this.selectCellRange(a.rowIndex, a.field, e, i);
+      } else
+        this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(n);
+      this.render(), (l = (t = this.events).onCellSelectionChange) == null || l.call(t, this.getSelectedCells());
+    }
+  }
+  selectCellRange(e, i, s, o) {
+    const n = this.getVisibleColumns(), t = n.findIndex((d) => d.field === i), l = n.findIndex((d) => d.field === o), a = Math.min(e, s), r = Math.max(e, s), h = Math.min(t, l), g = Math.max(t, l);
+    this.state.selection.selectedCells.clear();
+    for (let d = a; d <= r; d++)
+      for (let f = h; f <= g; f++) {
+        const C = n[f].field;
+        this.state.selection.selectedCells.add(`${d}:${C}`);
+      }
+  }
+  // GridContext: Block selection methods (public for module access)
+  startBlockSelection(e, i) {
+    this.options.selectionStyle === "block" && (this.blockSelecting = { startRow: e, startField: i }, this.state.selection.focusedCell = { rowIndex: e, field: i }, this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${e}:${i}`), this.render());
+  }
+  updateBlockSelection(e, i) {
+    this.blockSelecting && (this.selectCellRange(
+      this.blockSelecting.startRow,
+      this.blockSelecting.startField,
+      e,
+      i
+    ), this.render());
+  }
+  handleBlockSelectionEnd() {
+    var e, i;
+    this.blockSelecting && (this.blockSelecting = null, (i = (e = this.events).onCellSelectionChange) == null || i.call(e, this.getSelectedCells()));
+  }
+  handleRowDoubleClick(e, i) {
+    var s, o;
+    (o = (s = this.events).onRowDoubleClick) == null || o.call(s, e, this.state.displayData[e]);
+  }
+  handleKeyDown(e) {
+    var a, r, h, g;
+    if (this.state.edit.editing) {
+      e.key === "Escape" ? this.cancelEdit() : e.key === "Enter" ? (e.preventDefault(), this.endEditAndMove(e.shiftKey ? "up" : "down")) : e.key === "Tab" && (e.preventDefault(), this.endEditAndMove(e.shiftKey ? "left" : "right"));
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "z") {
+      e.preventDefault(), this.undo();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "y") {
+      e.preventDefault(), this.redo();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+      e.preventDefault(), this.copy();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      e.preventDefault(), this.paste();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "x") {
+      e.preventDefault(), this.cut();
+      return;
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && this.options.editable) {
+      e.preventDefault(), this.deleteSelectedCells();
+      return;
+    }
+    const i = this.state.selection.focusedCell;
+    if (!this.state.edit.editing && this.options.editable && i) {
+      const d = this.state.columns.find((f) => f.field === i.field);
+      if ((d == null ? void 0 : d.editable) !== !1 && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault(), this.startEdit(i.rowIndex, i.field), setTimeout(() => {
+          const f = document.querySelector(".velox-edit-input");
+          f && (f.value = e.key, f.setSelectionRange(1, 1));
+        }, 0);
+        return;
+      }
+    }
+    if ((r = (a = this.events).onKeyDown) == null || r.call(a, e, i), !i) return;
+    const s = this.getVisibleColumns(), o = s.findIndex((d) => d.field === i.field);
+    let n = i.rowIndex, t = o, l = !1;
+    switch (e.key) {
+      case "ArrowUp":
+        n > 0 && (n--, l = !0);
+        break;
+      case "ArrowDown":
+        n < this.state.displayData.length - 1 && (n++, l = !0);
+        break;
+      case "ArrowLeft":
+        t > 0 && (t--, l = !0);
+        break;
+      case "ArrowRight":
+        t < s.length - 1 && (t++, l = !0);
+        break;
+      case "Tab":
+        e.shiftKey ? t > 0 ? t-- : n > 0 && (n--, t = s.length - 1) : t < s.length - 1 ? t++ : n < this.state.displayData.length - 1 && (n++, t = 0), l = !0;
+        break;
+      case "Home":
+        e.ctrlKey && (n = 0), t = 0, l = !0;
+        break;
+      case "End":
+        e.ctrlKey && (n = this.state.displayData.length - 1), t = s.length - 1, l = !0;
+        break;
+      case "PageUp":
+        n = Math.max(0, n - this.virtualState.visibleCount), l = !0;
+        break;
+      case "PageDown":
+        n = Math.min(this.state.displayData.length - 1, n + this.virtualState.visibleCount), l = !0;
+        break;
+      case "Enter":
+      case "F2":
+        this.options.editable && (this.startEdit(i.rowIndex, i.field), l = !0);
+        break;
+      case " ":
+        (h = this.options.checkBar) != null && h.visible && (this.checkItem(i.rowIndex, !this.isItemChecked(i.rowIndex)), l = !0);
+        break;
+      case "a":
+      case "A":
+        (e.ctrlKey || e.metaKey) && (this.selectAllCells(), l = !0);
+        break;
+    }
+    if (l) {
+      e.preventDefault();
+      const d = (g = s[t]) == null ? void 0 : g.field;
+      d && (n !== i.rowIndex || d !== i.field) && (this.setFocusedCell(n, d), e.shiftKey && (this.options.selectionStyle === "cell" || this.options.selectionStyle === "block") ? this.selectCellRange(i.rowIndex, i.field, n, d) : !e.shiftKey && !e.ctrlKey && (this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${n}:${d}`), this.options.selectionStyle === "row" && (this.state.selection.selectedRows.clear(), this.state.selection.selectedRows.add(n))), this.render(), this.scrollToCell(n, d));
+    }
+  }
+  selectAllCells() {
+    var i, s;
+    const e = this.getVisibleColumns();
+    this.state.selection.selectedCells.clear();
+    for (let o = 0; o < this.state.displayData.length; o++)
+      for (const n of e)
+        this.state.selection.selectedCells.add(`${o}:${n.field}`);
+    this.render(), (s = (i = this.events).onCellSelectionChange) == null || s.call(i, this.getSelectedCells());
+  }
+  // GridContext: Resize methods - delegated to GridDragManager
+  startResize(e, i) {
+    this.dragManager.startResize(e, i);
+  }
+  // GridContext: Data transformation (public for module access)
+  applyDataTransformations() {
+    var i;
+    if ((i = this.options.pagination) != null && i.enabled)
+      if (this.infiniteScrollLoading = !1, this.infiniteScrollAllLoaded = !1, this.state.pagination.currentPage = 1, this.isRemoteDataSource()) {
+        this.options.pagination.mode === "infinite" && (this.state.data = [], this.state.displayData = []), this.fetchData();
+        return;
+      } else {
+        this.options.pagination.mode === "infinite" ? this.applyLocalInfiniteScroll() : this.applyLocalPagination();
+        return;
+      }
+    let e = [...this.state.data];
+    if (this.state.filter && (e = A(e, this.state.filter)), this.state.sort.length > 0) {
+      const s = {};
+      this.state.columns.forEach((o) => {
+        s[o.field] = o.type || "text";
+      }), e = V(e, this.state.sort, s);
+    }
+    this.state.displayData = e, this.initCheckableRows();
+  }
+  /**
+   * Clear all selection state (rows, cells, focused cell)
+   * Extracted to reduce code duplication
+   */
+  // GridContext: Selection state clearing (public for module access)
+  clearSelectionState() {
+    this.state.selection.selectedRows.clear(), this.state.selection.selectedCells.clear(), this.state.selection.focusedCell = null;
+  }
+  // --- Public API: Data Methods ---
+  getData() {
+    return this.state.data.map((e) => ({ ...e }));
+  }
+  setData(e) {
+    var i, s, o;
+    this.state.data = e.map((n) => ({ ...n })), this.rebuildDataIndexMap(), this.clearSelectionState(), this.state.checkBar.checkedRows.clear(), this.state.rowStates.clear(), this.state.data.forEach((n) => {
+      this.state.rowStates.set(n, "none");
+    }), (i = this.options.pagination) != null && i.enabled && !this.isRemoteDataSource() && (this.state.pagination.totalCount = this.state.data.length, this.state.pagination.currentPage = 1, this.updateTotalPages()), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (o = (s = this.events).onDataChange) == null || o.call(s, this.state.data);
+  }
+  getRow(e) {
+    return this.state.displayData[e] ? { ...this.state.displayData[e] } : null;
+  }
+  getRowCount() {
+    return this.state.data.length;
+  }
+  getVisibleRowCount() {
+    return this.state.displayData.length;
+  }
+  addRow(e, i) {
+    var n, t, l, a;
+    const s = { ...e }, o = i !== void 0 ? i : this.state.data.length;
+    this.state.data.splice(o, 0, s), this.rebuildDataIndexMap(), this.state.rowStates.set(s, "created"), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (t = (n = this.events).onRowAdd) == null || t.call(n, s, o), (a = (l = this.events).onDataChange) == null || a.call(l, this.state.data);
+  }
+  updateRow(e, i) {
+    var n, t, l, a;
+    const s = this.state.displayData[e];
+    if (!s) return;
+    const o = this.state.data.indexOf(s);
+    o >= 0 && (Object.assign(this.state.data[o], i), (this.state.rowStates.get(this.state.data[o]) || "none") === "none" && this.state.rowStates.set(this.state.data[o], "updated"), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (t = (n = this.events).onRowUpdate) == null || t.call(n, this.state.data[o], e, i), (a = (l = this.events).onDataChange) == null || a.call(l, this.state.data));
+  }
+  removeRow(e) {
+    var o, n, t, l;
+    const i = this.state.displayData[e];
+    if (!i) return;
+    const s = this.state.data.indexOf(i);
+    if (s >= 0) {
+      const a = this.state.data[s];
+      (this.state.rowStates.get(a) || "none") === "created" ? this.state.rowStates.set(a, "createAndDeleted") : this.state.rowStates.set(a, "deleted"), this.state.data.splice(s, 1), this.rebuildDataIndexMap(), this.state.selection.selectedRows.delete(e);
+      const h = /* @__PURE__ */ new Set();
+      this.state.selection.selectedRows.forEach((d) => {
+        d > e ? h.add(d - 1) : d < e && h.add(d);
+      }), this.state.selection.selectedRows = h, this.state.checkBar.checkedRows.delete(e);
+      const g = /* @__PURE__ */ new Set();
+      this.state.checkBar.checkedRows.forEach((d) => {
+        d > e ? g.add(d - 1) : d < e && g.add(d);
+      }), this.state.checkBar.checkedRows = g, this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (n = (o = this.events).onRowRemove) == null || n.call(o, a, e), (l = (t = this.events).onDataChange) == null || l.call(t, this.state.data);
+    }
+  }
+  clearData() {
+    var e, i;
+    this.state.data = [], this.state.displayData = [], this.dataIndexMap.clear(), this.state.selection.selectedRows.clear(), this.state.selection.selectedCells.clear(), this.state.selection.focusedCell = null, this.state.checkBar.checkedRows.clear(), this.state.checkBar.checkableRows.clear(), this.summary.invalidateCache(), this.render(), (i = (e = this.events).onDataChange) == null || i.call(e, []);
+  }
+  // --- Public API: Row Selection ---
+  getSelectedRows() {
+    return Array.from(this.state.selection.selectedRows).sort((e, i) => e - i);
+  }
+  getSelectedData() {
+    return this.getSelectedRows().map((e) => this.state.displayData[e]).filter(Boolean).map((e) => ({ ...e }));
+  }
+  selectRow(e, i = !0) {
+    var s, o, n, t;
+    i ? (this.options.selectionMode === "single" && this.state.selection.selectedRows.clear(), this.state.selection.selectedRows.add(e)) : this.state.selection.selectedRows.delete(e), this.render(), (o = (s = this.events).onRowSelect) == null || o.call(s, e, i), (t = (n = this.events).onSelectionChange) == null || t.call(n, this.getSelectedRows());
+  }
+  selectAll(e = !0) {
+    var i, s, o, n;
+    if (e)
+      for (let t = 0; t < this.state.displayData.length; t++)
+        this.state.selection.selectedRows.add(t);
+    else
+      this.state.selection.selectedRows.clear();
+    this.render(), (s = (i = this.events).onAllSelect) == null || s.call(i, e), (n = (o = this.events).onSelectionChange) == null || n.call(o, this.getSelectedRows());
+  }
+  clearSelection() {
+    var e, i, s, o;
+    this.clearSelectionState(), this.render(), (i = (e = this.events).onSelectionChange) == null || i.call(e, []), (o = (s = this.events).onCellSelectionChange) == null || o.call(s, []);
+  }
+  isRowSelected(e) {
+    return this.state.selection.selectedRows.has(e);
+  }
+  // --- Public API: Cell Selection ---
+  selectCell(e, i, s = !0) {
+    var n, t, l, a;
+    const o = `${e}:${i}`;
+    s ? this.state.selection.selectedCells.add(o) : this.state.selection.selectedCells.delete(o), this.render(), (t = (n = this.events).onCellSelect) == null || t.call(n, { rowIndex: e, field: i }, s), (a = (l = this.events).onCellSelectionChange) == null || a.call(l, this.getSelectedCells());
+  }
+  getSelectedCells() {
+    return Array.from(this.state.selection.selectedCells).map((e) => {
+      const [i, s] = e.split(":");
+      return { rowIndex: parseInt(i, 10), field: s };
+    });
+  }
+  setFocusedCell(e, i) {
+    this.state.selection.focusedCell = { rowIndex: e, field: i }, this.render();
+  }
+  getFocusedCell() {
+    return this.state.selection.focusedCell;
+  }
+  setSelection(e) {
+    if (this.state.selection.selectedCells.clear(), this.state.selection.selectedRows.clear(), e.style === "row")
+      for (let i = e.startRow; i <= e.endRow; i++)
+        this.state.selection.selectedRows.add(i);
+    else (e.style === "cell" || e.style === "block") && e.startColumn && e.endColumn && this.selectCellRange(e.startRow, e.startColumn, e.endRow, e.endColumn);
+    this.state.selection.selections = [e], this.render();
+  }
+  getSelection() {
+    const e = this.state.selection.selections;
+    return e.length > 0 ? e[0] : null;
+  }
+  getSelectionData() {
+    const e = this.getSelectedCells();
+    if (e.length === 0) return [];
+    const i = [...new Set(e.map((l) => l.rowIndex))].sort((l, a) => l - a), s = [...new Set(e.map((l) => l.field))], n = this.getVisibleColumns().filter((l) => s.includes(l.field)).map((l) => l.field), t = [];
+    for (const l of i) {
+      const a = this.state.displayData[l];
+      if (a) {
+        const r = n.map((h) => a[h]);
+        t.push(r);
+      }
+    }
+    return t;
+  }
+  // --- Public API: CheckBar ---
+  checkItem(e, i = !0) {
+    var n, t;
+    if (console.log("🔵 checkItem START", { index: e, checked: i, currentEditState: this.state.edit }), !this.state.checkBar.checkableRows.has(e)) return;
+    const s = this.options.checkBar;
+    s != null && s.exclusive && i && this.state.checkBar.checkedRows.clear(), i ? this.state.checkBar.checkedRows.add(e) : this.state.checkBar.checkedRows.delete(e);
+    const o = { ...this.state.edit };
+    console.log("💾 Saved edit state before render", o), this.render(), console.log("🔄 Render complete, edit state after render", this.state.edit), o.editing && o.rowIndex !== null && o.field !== null && (console.log("♻️ Restoring edit state", o), this.state.edit = o, this.renderEditCell(o.rowIndex, o.field, o.originalValue)), (t = (n = this.events).onCheckChange) == null || t.call(n, e, i), console.log("🔵 checkItem END");
+  }
+  checkItems(e, i = !0) {
+    e.forEach((s) => {
+      this.state.checkBar.checkableRows.has(s) && (i ? this.state.checkBar.checkedRows.add(s) : this.state.checkBar.checkedRows.delete(s));
+    }), this.render();
+  }
+  checkAll(e = !0) {
+    var i, s, o;
+    (i = this.options.checkBar) != null && i.exclusive || (e ? this.state.checkBar.checkableRows.forEach((n) => {
+      this.state.checkBar.checkedRows.add(n);
+    }) : this.state.checkBar.checkedRows.clear(), this.render(), (o = (s = this.events).onCheckAllChange) == null || o.call(s, e));
+  }
+  uncheckAll() {
+    this.checkAll(!1);
+  }
+  getCheckedItems() {
+    return Array.from(this.state.checkBar.checkedRows).sort((e, i) => e - i);
+  }
+  getCheckedData() {
+    return this.getCheckedItems().map((e) => this.state.displayData[e]).filter(Boolean).map((e) => ({ ...e }));
+  }
+  isItemChecked(e) {
+    return this.state.checkBar.checkedRows.has(e);
+  }
+  isItemCheckable(e) {
+    return this.state.checkBar.checkableRows.has(e);
+  }
+  checkRow(e, i = !0) {
+    this.checkItem(e, i);
+  }
+  getCheckedRows() {
+    return this.getCheckedItems();
+  }
+  // --- Public API: Sort ---
+  sort(e, i = "asc") {
+    var s, o;
+    this.state.sort = i ? [{ field: e, direction: i }] : [], this.clearSelectionState(), this.applyDataTransformations(), this.render(), (o = (s = this.events).onSort) == null || o.call(s, this.state.sort);
+  }
+  clearSort() {
+    var e, i;
+    this.state.sort = [], this.applyDataTransformations(), this.render(), (i = (e = this.events).onSort) == null || i.call(e, []);
+  }
+  getSortState() {
+    return [...this.state.sort];
+  }
+  // --- Public API: Filter ---
+  filter(e) {
+    var s, o;
+    const i = Array.isArray(e) ? e : [e];
+    this.state.filter = { conditions: i, logic: "and" }, this.clearSelectionState(), this.applyDataTransformations(), this.render(), (o = (s = this.events).onFilter) == null || o.call(s, this.state.filter);
+  }
+  clearFilter() {
+    this.state.filter = null, this.clearSelectionState(), this.applyDataTransformations(), this.render();
+  }
+  getFilterState() {
+    return this.state.filter ? { ...this.state.filter } : null;
+  }
+  // --- Public API: Edit ---
+  startEdit(e, i) {
+    var n, t, l;
+    if (console.log("🎬 startEdit called", { rowIndex: e, field: i, editable: this.options.editable }), !this.options.editable) return;
+    if (this.state.edit.editing && this.state.edit.rowIndex === e && this.state.edit.field === i) {
+      console.log("⚠️ Already editing this cell - ignoring startEdit");
+      return;
+    }
+    const s = this.state.columns.find((a) => a.field === i);
+    if (console.log("📋 Column found", { column: s == null ? void 0 : s.field, editable: s == null ? void 0 : s.editable }), !s || s.editable === !1) return;
+    this.state.edit.editing && this.endEdit(!0);
+    const o = (n = this.state.displayData[e]) == null ? void 0 : n[i];
+    this.state.edit = { editing: !0, rowIndex: e, field: i, originalValue: o }, console.log("✅ Edit state updated", this.state.edit), (l = (t = this.events).onCellEditStart) == null || l.call(t, e, i, o), this.renderEditCell(e, i, o);
+  }
+  renderEditCell(e, i, s) {
+    console.log("🎨 renderEditCell START", { rowIndex: e, field: i, value: s, currentEditState: this.state.edit }), this.editModeCleanup && (console.log("🧹 Cleaning up previous edit mode listener"), this.editModeCleanup(), this.editModeCleanup = null);
+    const o = this.bodyInner.querySelector(`[data-row-index="${e}"]`), n = o == null ? void 0 : o.querySelector(`[data-field="${i}"]`);
+    if (console.log("🔍 Cell element found", { cell: !!n, hasClass: n == null ? void 0 : n.classList.contains("velox-cell--editing") }), !n) return;
+    const t = this.state.columns.find((a) => a.field === i);
+    if (!t) return;
+    w(n, "velox-cell--editing"), console.log("✅ Added velox-cell--editing class", { classList: Array.from(n.classList) });
+    const l = (a) => {
+      const r = a.target;
+      n.contains(r) ? console.log("📦 Inside cell click - maintaining edit mode") : (console.log("🌍 Outside click detected - ending edit"), this.editModeCleanup = null, document.removeEventListener("mousedown", l), this.endEdit(!0));
+    };
+    if (this.editModeCleanup = () => {
+      document.removeEventListener("mousedown", l);
+    }, setTimeout(() => {
+      document.addEventListener("mousedown", l);
+    }, 0), t.editor) {
+      const a = Ft.createEditor(
+        s,
+        t.editor,
+        (r) => {
+          var g;
+          if (console.log("💾 Editor save callback", { newValue: r, editing: this.state.edit.editing }), this.setCellValue(e, i, r), ((g = t.editor) == null ? void 0 : g.type) === "checkbox") {
+            console.log("✅ Checkbox editor - maintaining edit mode, new value:", r), this.state.edit.originalValue = r;
+            const d = { ...this.state.edit };
+            d.editing && (this.state.edit = d, this.renderEditCell(d.rowIndex, d.field, r));
+          } else
+            console.log("🛑 Other editor - ending edit mode"), this.state.edit.editing = !1, this.applyDataTransformations(), this.render();
+          const h = this.events;
+          h.onCellEditEnd && h.onCellEditEnd({
+            rowIndex: e,
+            field: i,
+            oldValue: s,
+            newValue: r,
+            row: this.state.displayData[e]
+          });
+        },
+        () => {
+          this.cancelEdit();
+        },
+        (r) => {
+          this.endEditAndMove(r);
+        }
+      );
+      n.innerHTML = "", n.appendChild(a), a.addEventListener("mousedown", () => {
+        console.log("🖱️ Editor mousedown");
+      }), setTimeout(() => {
+        (a instanceof HTMLInputElement || a instanceof HTMLSelectElement) && (a.focus(), a instanceof HTMLInputElement && a.type === "text" && a.select());
+      }, 0);
+    } else {
+      const a = p("input", "velox-edit-input");
+      a.type = t.type === "number" ? "number" : "text", a.value = s != null ? String(s) : "", n.innerHTML = "", n.appendChild(a), a.focus(), a.select(), a.addEventListener("mousedown", () => {
+        console.log("🖱️ Input mousedown");
+      }), a.addEventListener("keydown", (r) => {
+        console.log("⌨️ Input keydown:", r.key, { shiftKey: r.shiftKey }), r.key === "Enter" ? (r.preventDefault(), r.stopPropagation(), console.log("✅ Enter detected - calling endEditAndMove"), this.endEditAndMove(r.shiftKey ? "up" : "down")) : r.key === "Tab" ? (r.preventDefault(), r.stopPropagation(), console.log("✅ Tab detected - calling endEditAndMove"), this.endEditAndMove(r.shiftKey ? "left" : "right")) : r.key === "Escape" && (r.preventDefault(), r.stopPropagation(), console.log("✅ Escape detected - calling cancelEdit"), this.cancelEdit());
+      });
+    }
+  }
+  endEdit(e = !0) {
+    var l, a, r, h, g, d;
+    if (console.log("🛑 endEdit called", { save: e, editing: this.state.edit.editing }), this.editModeCleanup && (console.log("🧹 Cleaning up edit mode listener on endEdit"), this.editModeCleanup(), this.editModeCleanup = null), !this.state.edit.editing) return;
+    const { rowIndex: i, field: s, originalValue: o } = this.state.edit;
+    if (i === null || s === null) return;
+    const n = this.bodyInner.querySelector(`[data-row-index="${i}"]`), t = n == null ? void 0 : n.querySelector(`[data-field="${s}"]`);
+    if (e && t) {
+      const f = this.state.columns.find((D) => D.field === s), C = this.state.displayData[i];
+      let x = o;
+      const b = t.querySelector(".velox-edit-input"), y = t.querySelector(".velox-editor--select"), S = t.querySelector('.velox-editor--checkbox input[type="checkbox"]'), E = t.querySelector(".velox-editor--date"), R = t.querySelector(".velox-editor--number");
+      if (S ? x = S.checked : y ? y.multiple ? x = Array.from(y.selectedOptions).map((D) => D.value) : x = y.value : E ? x = E.value : R ? x = R.value === "" ? null : Number(R.value) : b && (x = b.value), JSON.stringify(x) !== JSON.stringify(o)) {
+        if (f != null && f.validation && f.validation.length > 0) {
+          const B = f.type === "number" && typeof x == "string" ? parseFloat(x) : x, L = Ht.validate(B, f.validation, C);
+          if (!L.valid) {
+            if (t) {
+              w(t, "velox-cell--invalid");
+              const T = L.errors.map((F) => F.message).join(", ");
+              t.title = T;
+            }
+            (a = (l = this.events).onValidationError) == null || a.call(l, {
+              rowIndex: i,
+              field: s,
+              value: B,
+              errors: L.errors.map((T) => T.message)
+            }), b ? b.focus() : y ? y.focus() : E ? E.focus() : R && R.focus();
+            return;
+          }
+        }
+        const D = (f == null ? void 0 : f.type) === "number" && typeof x == "string" ? parseFloat(x) : x;
+        this.setCellValue(i, s, D), (h = (r = this.events).onCellEditEnd) == null || h.call(r, {
+          rowIndex: i,
+          field: s,
+          oldValue: o,
+          newValue: D,
+          row: this.state.displayData[i]
+        });
+      }
+    } else
+      (d = (g = this.events).onCellEditCancel) == null || d.call(g, i, s);
+    this.state.edit = { editing: !1, rowIndex: null, field: null, originalValue: null }, this.applyDataTransformations(), this.render();
+  }
+  cancelEdit() {
+    this.endEdit(!1);
+  }
+  isEditing() {
+    return this.state.edit.editing;
+  }
+  /**
+   * End edit and move to adjacent cell (Phase 9)
+   */
+  endEditAndMove(e) {
+    var r;
+    const { rowIndex: i, field: s } = this.state.edit;
+    if (i === null || s === null) return;
+    this.endEdit(!0);
+    const o = this.getVisibleColumns(), n = o.findIndex((h) => h.field === s);
+    let t = i, l = n;
+    switch (e) {
+      case "up":
+        t > 0 && t--;
+        break;
+      case "down":
+        t < this.state.displayData.length - 1 && t++;
+        break;
+      case "left":
+        l > 0 ? l-- : t > 0 && (t--, l = o.length - 1);
+        break;
+      case "right":
+        l < o.length - 1 ? l++ : t < this.state.displayData.length - 1 && (t++, l = 0);
+        break;
+    }
+    const a = (r = o[l]) == null ? void 0 : r.field;
+    a && (this.setFocusedCell(t, a), this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${t}:${a}`), this.scrollToCell(t, a), this.render(), this.rootElement.focus());
+  }
+  // --- Public API: Column ---
+  getColumn(e) {
+    return this.state.columns.find((i) => i.field === e) || null;
+  }
+  setColumnWidth(e, i) {
+    var o, n;
+    const s = this.state.columns.find((t) => t.field === e);
+    s && (s.width = i, this.invalidateColumnCache(), this.render(), (n = (o = this.events).onColumnResize) == null || n.call(o, e, i));
+  }
+  showColumn(e) {
+    const i = this.state.columns.find((s) => s.field === e);
+    i && (i.visible = !0, this.invalidateColumnCache(), this.render());
+  }
+  hideColumn(e) {
+    const i = this.state.columns.find((s) => s.field === e);
+    i && (i.visible = !1, this.invalidateColumnCache(), this.render());
+  }
+  setColumns(e) {
+    this.state.columns = e.map((i) => ({ ...i })), this.invalidateColumnCache(), this.render();
+  }
+  autoFitColumn(e) {
+    var n, t;
+    const i = this.state.columns.find((l) => l.field === e);
+    if (!i) return;
+    let s = 100;
+    const o = i.header || "";
+    s = Math.max(s, this.measureTextWidth(o) + 40), this.state.displayData.forEach((l) => {
+      const a = l[i.field], r = H(a, i.type), h = this.measureTextWidth(r) + 20;
+      s = Math.max(s, h);
+    }), i.width = Math.min(s, 500), this.invalidateColumnCache(), this.render(), (t = (n = this.events).onColumnResize) == null || t.call(n, e, i.width);
+  }
+  autoFitAllColumns() {
+    this.getVisibleColumns().forEach((e) => this.autoFitColumn(e.field));
+  }
+  // GridContext: Text measurement (public for module access)
+  measureTextWidth(e, i) {
+    return this.measureCanvas || (this.measureCanvas = document.createElement("canvas"), this.measureContext = this.measureCanvas.getContext("2d")), this.measureContext ? (this.measureContext.font = i || "14px sans-serif", this.measureContext.measureText(e).width) : 100;
+  }
+  // --- Public API: Scroll ---
+  scrollToRow(e) {
+    const i = this.options.rowHeight || 40;
+    this.bodyElement.scrollTop = e * i, this.fixedLeftBody && (this.fixedLeftBody.scrollTop = e * i);
+  }
+  scrollToTop() {
+    this.bodyElement.scrollTop = 0, this.fixedLeftBody && (this.fixedLeftBody.scrollTop = 0);
+  }
+  scrollToBottom() {
+    this.bodyElement.scrollTop = this.bodyElement.scrollHeight, this.fixedLeftBody && (this.fixedLeftBody.scrollTop = this.fixedLeftBody.scrollHeight);
+  }
+  scrollToCell(e, i) {
+    const s = this.options.rowHeight || 40, o = this.bodyElement.clientHeight, n = this.bodyElement.scrollTop, t = e * s, l = t + s;
+    t < n ? this.bodyElement.scrollTop = t : l > n + o && (this.bodyElement.scrollTop = l - o), this.fixedLeftBody && (this.fixedLeftBody.scrollTop = this.bodyElement.scrollTop);
+    const a = this.bodyInner.querySelector(`[data-field="${i}"]`);
+    if (a) {
+      const r = a.offsetLeft, h = r + a.offsetWidth, g = this.bodyElement.clientWidth, d = this.bodyElement.scrollLeft;
+      r < d ? this.bodyElement.scrollLeft = r : h > d + g && (this.bodyElement.scrollLeft = h - g);
+    }
+  }
+  // --- Public API: Clipboard ---
+  copy() {
+    const e = this.getSelectionData();
+    if (e.length === 0) return;
+    const i = e.map((s) => s.join("	")).join(`
+`);
+    navigator.clipboard.writeText(i).then(() => {
+      var s, o;
+      (o = (s = this.events).onCopy) == null || o.call(s, e.map((n) => n.map((t) => String(t ?? ""))));
+    });
+  }
+  paste() {
+    const e = this.state.selection.focusedCell;
+    e && navigator.clipboard.readText().then((i) => {
+      var t, l, a, r;
+      const s = i.split(`
+`).map((h) => h.split("	"));
+      (l = (t = this.events).onPaste) == null || l.call(t, s, e);
+      const o = this.getVisibleColumns(), n = o.findIndex((h) => h.field === e.field);
+      s.forEach((h, g) => {
+        const d = e.rowIndex + g;
+        d >= this.state.displayData.length || h.forEach((f, C) => {
+          const x = n + C;
+          if (x >= o.length) return;
+          const b = o[x].field, y = o[x];
+          if (y.editable !== !1) {
+            const S = this.state.displayData[d], E = this.state.data.indexOf(S);
+            E >= 0 && (this.state.data[E][b] = y.type === "number" ? parseFloat(f) : f);
+          }
+        });
+      }), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (r = (a = this.events).onDataChange) == null || r.call(a, this.state.data);
+    });
+  }
+  cut() {
+    var o, n, t, l;
+    const e = this.getSelectionData();
+    if (e.length === 0) return;
+    this.copy();
+    const i = [];
+    this.getSelectedCells().forEach((a) => {
+      const r = this.state.columns.find((h) => h.field === a.field);
+      if ((r == null ? void 0 : r.editable) !== !1) {
+        const h = this.state.displayData[a.rowIndex], g = this.state.data.indexOf(h);
+        if (g >= 0) {
+          const d = this.state.data[g][a.field];
+          i.push({
+            rowIndex: a.rowIndex,
+            field: a.field,
+            oldValue: d,
+            newValue: ""
+          }), this.state.data[g][a.field] = "";
+        }
+      }
+    }), i.length > 0 && this.pushUndo({ type: "cut", timestamp: Date.now(), data: { changes: i } }), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (n = (o = this.events).onCut) == null || n.call(o, e.map((a) => a.map((r) => String(r ?? "")))), (l = (t = this.events).onDataChange) == null || l.call(t, this.state.data);
+  }
+  // --- Public API: Undo/Redo ---
+  pushUndo(e) {
+    this.history.push(e);
+  }
+  undo() {
+    var i, s, o, n;
+    const e = this.history.popUndo();
+    if (!e) return !1;
+    switch (e.type) {
+      case "cell_edit": {
+        const t = e.data, l = this.state.displayData[t.rowIndex], a = this.state.data.indexOf(l);
+        a >= 0 && (this.state.data[a][t.field] = t.oldValue);
+        break;
+      }
+      case "bulk_edit":
+      case "paste":
+      case "cut":
+      case "delete": {
+        e.data.changes.forEach((l) => {
+          const a = this.state.displayData[l.rowIndex], r = this.state.data.indexOf(a);
+          r >= 0 && (this.state.data[r][l.field] = l.oldValue);
+        });
+        break;
+      }
+      case "row_add": {
+        const t = e.data;
+        this.state.data.splice(t.index, 1), this.rebuildDataIndexMap();
+        break;
+      }
+      case "row_remove": {
+        const t = e.data;
+        this.state.data.splice(t.index, 0, { ...t.row }), this.rebuildDataIndexMap();
+        break;
+      }
+    }
+    return this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (s = (i = this.events).onUndo) == null || s.call(i, e), (n = (o = this.events).onDataChange) == null || n.call(o, this.state.data), !0;
+  }
+  redo() {
+    var i, s, o, n;
+    const e = this.history.popRedo();
+    if (!e) return !1;
+    switch (e.type) {
+      case "cell_edit": {
+        const t = e.data, l = this.state.displayData[t.rowIndex], a = this.state.data.indexOf(l);
+        a >= 0 && (this.state.data[a][t.field] = t.newValue);
+        break;
+      }
+      case "bulk_edit":
+      case "paste":
+      case "cut":
+      case "delete": {
+        e.data.changes.forEach((l) => {
+          const a = this.state.displayData[l.rowIndex], r = this.state.data.indexOf(a);
+          r >= 0 && (this.state.data[r][l.field] = l.newValue);
+        });
+        break;
+      }
+      case "row_add": {
+        const t = e.data;
+        this.state.data.splice(t.index, 0, { ...t.row }), this.rebuildDataIndexMap();
+        break;
+      }
+      case "row_remove": {
+        const t = e.data;
+        this.state.data.splice(t.index, 1), this.rebuildDataIndexMap();
+        break;
+      }
+    }
+    return this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (s = (i = this.events).onRedo) == null || s.call(i, e), (n = (o = this.events).onDataChange) == null || n.call(o, this.state.data), !0;
+  }
+  canUndo() {
+    return this.history.canUndo();
+  }
+  canRedo() {
+    return this.history.canRedo();
+  }
+  clearHistory() {
+    this.history.clear();
+  }
+  // --- Public API: Delete ---
+  deleteSelectedCells() {
+    var s, o;
+    if (!this.options.editable) return;
+    const e = this.getSelectedCells();
+    if (e.length === 0) return;
+    const i = [];
+    e.forEach((n) => {
+      const t = this.state.columns.find((l) => l.field === n.field);
+      if ((t == null ? void 0 : t.editable) !== !1) {
+        const l = this.state.displayData[n.rowIndex], a = this.state.data.indexOf(l);
+        if (a >= 0) {
+          const r = this.state.data[a][n.field];
+          r !== "" && r !== null && r !== void 0 && (i.push({
+            rowIndex: n.rowIndex,
+            field: n.field,
+            oldValue: r,
+            newValue: ""
+          }), this.state.data[a][n.field] = "");
+        }
+      }
+    }), i.length > 0 && (this.pushUndo({ type: "delete", timestamp: Date.now(), data: { changes: i } }), this.applyDataTransformations(), this.summary.invalidateCache(), this.render(), (o = (s = this.events).onDataChange) == null || o.call(s, this.state.data));
+  }
+  deleteSelectedRows() {
+    const e = this.getSelectedRows();
+    if (e.length === 0) return;
+    [...e].sort((s, o) => o - s).forEach((s) => {
+      this.removeRow(s);
+    });
+  }
+  // --- Public API: Export/Import ---
+  createExportContext(e = {}) {
+    return {
+      data: this.state.data,
+      displayData: this.state.displayData,
+      columns: this.state.columns,
+      selectedRows: this.getSelectedRows(),
+      options: e
+    };
+  }
+  /**
+   * Export grid data to Excel (.xlsx) file
+   * Requires SheetJS library to be loaded via CDN:
+   * <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"><\/script>
+   */
+  exportToExcel(e = {}) {
+    const i = this.createExportContext(e);
+    St(i);
+  }
+  /**
+   * Export grid data to CSV format
+   * @returns CSV string
+   */
+  exportToCSV(e = {}) {
+    const i = this.createExportContext(e);
+    return K(i);
+  }
+  /**
+   * Export grid data to JSON format
+   * @returns JSON string
+   */
+  exportToJSON(e = {}) {
+    const i = this.createExportContext(e);
+    return q(i);
+  }
+  /**
+   * Download grid data as CSV file
+   */
+  downloadCSV(e = {}) {
+    const i = this.createExportContext(e);
+    Tt(i);
+  }
+  /**
+   * Download grid data as JSON file
+   */
+  downloadJSON(e = {}) {
+    const i = this.createExportContext(e);
+    Bt(i);
+  }
+  /**
+   * Import data from CSV string
+   * @param csvString CSV content
+   * @param hasHeader Whether first row is header (default: true)
+   */
+  importFromCSV(e, i = !0) {
+    const s = Rt(e, i);
+    return s.errors.length === 0 && s.data.length > 0 && this.setData(s.data), s;
+  }
+  /**
+   * Import data from Excel file
+   * Requires SheetJS library to be loaded via CDN
+   * @param file Excel file (File object)
+   * @param sheetIndex Sheet index to import (default: 0)
+   */
+  async importFromExcel(e, i = 0) {
+    const s = await Lt(e, i);
+    return s.errors.length === 0 && s.data.length > 0 && this.setData(s.data), s;
+  }
+  /**
+   * Check if SheetJS library is available for Excel operations
+   */
+  static isExcelSupported() {
+    return U();
+  }
+  // ============================================
+  // Public API - Utility Methods
+  // ============================================
+  getCellValue(e, i) {
+    var s;
+    return (s = this.state.displayData[e]) == null ? void 0 : s[i];
+  }
+  setCellValue(e, i, s) {
+    var t, l;
+    const o = this.state.displayData[e];
+    if (!o) return;
+    const n = this.state.data.indexOf(o);
+    n >= 0 && (this.state.data[n][i] = s, (this.state.rowStates.get(this.state.data[n]) || "none") === "none" && this.state.rowStates.set(this.state.data[n], "updated"), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (l = (t = this.events).onDataChange) == null || l.call(t, this.state.data));
+  }
+  // ============================================
+  // Phase 13: Summary Methods
+  // ============================================
+  /**
+   * Get summary value for a specific field
+   * @param field Column field name
+   * @returns Calculated summary value
+   */
+  getSummaryValue(e) {
+    return this.summary.getSummaryValue(e);
+  }
+  /**
+   * Get all summary values
+   * @returns Object with field names as keys and summary values
+   */
+  getSummaryValues() {
+    return this.summary.getAllSummaryValues();
+  }
+  /**
+   * Refresh summary calculations (clear cache)
+   */
+  refreshSummary() {
+    this.summary.invalidateCache(), this.render();
+  }
+  setOptions(e) {
+    this.options = { ...this.options, ...e }, e.checkBar && (this.options.checkBar = { ...N, ...e.checkBar }), e.columns && (this.state.columns = e.columns.map((i) => ({ ...i }))), e.loading !== void 0 && this.updateLoadingState(), this.render();
+  }
+  getOptions() {
+    return { ...this.options };
+  }
+  setLoading(e) {
+    this.options.loading = e, this.updateLoadingState();
+  }
+  refresh() {
+    this.applyDataTransformations(), this.render();
+  }
+  // ============================================
+  // Phase 10: Column Reorder & Menu
+  // ============================================
+  /**
+   * Fix/unfix column to a position
+   */
+  fixColumn(e, i) {
+    const s = this.state.columns.find((o) => o.field === e);
+    s && (s.fixed = i, this.invalidateColumnCache(), this.render());
+  }
+  /**
+   * Reorder column to new position
+   */
+  reorderColumn(e, i) {
+    var t, l;
+    const s = this.state.columns.findIndex((a) => a.field === e), o = this.state.columns.findIndex((a) => a.field === i);
+    if (s === -1 || o === -1) return;
+    const [n] = this.state.columns.splice(s, 1);
+    this.state.columns.splice(o, 0, n), this.invalidateColumnCache(), this.render(), (l = (t = this.events).onColumnReorder) == null || l.call(t, e, s, o);
+  }
+  // GridContext: Column menu methods - delegated to GridColumnMenu
+  showColumnMenu(e, i) {
+    this.closeFilterPopup(), this.columnMenuManager.showColumnMenu(e, i);
+  }
+  closeColumnMenu() {
+    this.columnMenuManager.closeColumnMenu();
+  }
+  // GridContext: Column drag methods - delegated to GridDragManager
+  startColumnDrag(e, i) {
+    this.dragManager.startColumnDrag(e, i);
+  }
+  // ============================================
+  // Phase 11: Row Drag & Drop
+  // ============================================
+  /**
+   * Move row to new position
+   */
+  moveRow(e, i) {
+    var r, h;
+    const s = this.state.displayData[e];
+    if (!s) return;
+    const o = this.state.data.indexOf(s);
+    if (o === -1) return;
+    const n = this.state.displayData[i], t = n ? this.state.data.indexOf(n) : this.state.data.length, [l] = this.state.data.splice(o, 1), a = t > o ? t - 1 : t;
+    this.state.data.splice(a, 0, l), this.rebuildDataIndexMap(), this.applyDataTransformations(), this.render(), (h = (r = this.events).onDataChange) == null || h.call(r, this.state.data);
+  }
+  // GridContext: Row drag methods - delegated to GridDragManager
+  startRowDrag(e, i, s) {
+    this.dragManager.startRowDrag(e, i, s);
+  }
+  // ============================================
+  // GridContext Implementation
+  // ============================================
+  /** GridContext: 그리드 상태 반환 */
+  getState() {
+    return this.state;
+  }
+  /** GridContext: 이벤트 핸들러 반환 */
+  getEvents() {
+    return this.events;
+  }
+  /** GridContext: 그리드 고유 ID 반환 */
+  getGridId() {
+    return this.gridId;
+  }
+  /** GridContext: 표시 데이터 반환 */
+  getDisplayData() {
+    return this.state.displayData;
+  }
+  /** GridContext: 가상 스크롤 상태 반환 */
+  getVirtualState() {
+    return this.virtualState;
+  }
+  /** GridContext: 이벤트 발행 헬퍼 */
+  emitEvent(e, ...i) {
+    const s = this.events[e];
+    s && s(...i);
+  }
+  // ============================================
+  // GridContext: Internal Handlers
+  // ============================================
+  /** GridContext: Block selection 상태 확인 */
+  isBlockSelecting() {
+    return this.blockSelecting !== null;
+  }
+  /** GridContext: Tooltip 표시 */
+  showTooltip(e, i, s, o) {
+    this.tooltip && this.tooltip.show(e, i, s, o);
+  }
+  /** GridContext: Tooltip 숨기기 */
+  hideTooltip() {
+    this.tooltip && this.tooltip.hide();
+  }
+  // ============================================
+  // Phase 14: Fixed Columns
+  // ============================================
+  /**
+   * Set fixed columns options
+   * @param options - Fixed options (colCount, rightCount)
+   */
+  setFixedOptions(e) {
+    var n, t;
+    const i = this.options.fixedOptions || { colCount: 0, rightCount: 0 }, s = {
+      colCount: e.colCount ?? ((n = this.options.fixedOptions) == null ? void 0 : n.colCount) ?? 0,
+      rightCount: e.rightCount ?? ((t = this.options.fixedOptions) == null ? void 0 : t.rightCount) ?? 0
+    }, o = (
+      // Left fixed changes
+      (i.colCount || 0) === 0 && s.colCount > 0 || // Left 추가
+      (i.colCount || 0) > 0 && s.colCount === 0 || // Left 제거
+      // Right fixed changes
+      (i.rightCount || 0) === 0 && s.rightCount > 0 || // Right 추가
+      (i.rightCount || 0) > 0 && s.rightCount === 0
+    );
+    this.options.fixedOptions = s, this.invalidateColumnCache(), o && this.rebuildDOM(), this.render();
+  }
+  /**
+   * Rebuild DOM structure and re-attach events
+   * Phase 14: For dynamic fixed columns
+   */
+  rebuildDOM() {
+    var s, o;
+    const e = ((s = this.bodyElement) == null ? void 0 : s.scrollTop) || 0, i = ((o = this.bodyElement) == null ? void 0 : o.scrollLeft) || 0;
+    this.detachEvents(), this.build(), this.attachEvents(), this.bodyElement && (this.bodyElement.scrollTop = e, this.bodyElement.scrollLeft = i), this.fixedRightBody && (this.fixedRightBody.scrollTop = e);
+  }
+  /**
+   * Get current fixed columns options
+   * @returns Fixed options
+   */
+  getFixedOptions() {
+    return this.options.fixedOptions || { colCount: 0, rightCount: 0 };
+  }
+  // ============================================
+  // Phase 15: Row State Management
+  // ============================================
+  /**
+   * Get row state by display index
+   * @param index - Display index (in displayData array)
+   * @returns Row state type
+   */
+  getRowState(e) {
+    const i = this.state.displayData[e];
+    return i && this.state.rowStates.get(i) || "none";
+  }
+  /**
+   * Get row state by row data object
+   * @param row - Row data object
+   * @returns Row state type
+   */
+  getRowStateByData(e) {
+    return this.state.rowStates.get(e) || "none";
+  }
+  /**
+   * Set row state manually
+   * @param index - Display index
+   * @param state - New state
+   */
+  setRowState(e, i) {
+    const s = this.state.displayData[e];
+    s && (this.state.rowStates.set(s, i), this.render());
+  }
+  /**
+   * Get all changes (created, updated, deleted rows)
+   * @returns Changes result with separated arrays
+   */
+  getChanges() {
+    const e = [], i = [], s = [];
+    return this.state.rowStates.forEach((o, n) => {
+      o === "created" ? e.push(n) : o === "updated" ? i.push(n) : o === "deleted" && s.push(n);
+    }), { created: e, updated: i, deleted: s };
+  }
+  /**
+   * Get newly created rows
+   * @returns Array of created rows
+   */
+  getCreatedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((i, s) => {
+      i === "created" && e.push(s);
+    }), e;
+  }
+  /**
+   * Get updated rows
+   * @returns Array of updated rows
+   */
+  getUpdatedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((i, s) => {
+      i === "updated" && e.push(s);
+    }), e;
+  }
+  /**
+   * Get deleted rows (marked for deletion)
+   * @returns Array of deleted rows
+   */
+  getDeletedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((i, s) => {
+      i === "deleted" && e.push(s);
+    }), e;
+  }
+  /**
+   * Clear all row states (reset to 'none')
+   */
+  clearRowStates() {
+    this.state.rowStates.clear(), this.state.data.forEach((e) => {
+      this.state.rowStates.set(e, "none");
+    }), this.render();
+  }
+  /**
+   * Commit changes (mark all rows as 'none')
+   * This is typically called after successfully saving changes to server
+   */
+  commit() {
+    const e = [];
+    this.state.rowStates.forEach((i, s) => {
+      i === "createAndDeleted" && e.push(s);
+    }), e.forEach((i) => {
+      const s = this.state.data.indexOf(i);
+      s >= 0 && this.state.data.splice(s, 1);
+    }), this.state.rowStates.clear(), this.state.data.forEach((i) => {
+      this.state.rowStates.set(i, "none");
+    }), this.rebuildDataIndexMap(), this.applyDataTransformations(), this.render();
+  }
+  // ============================================
+  // Phase 18: Data Source & Pagination
+  // ============================================
+  /**
+   * Remote 데이터 소스 여부 확인
+   */
+  isRemoteDataSource() {
+    var e;
+    return ((e = this.options.dataSource) == null ? void 0 : e.type) === "remote";
+  }
+  /**
+   * 페이지네이션 상태 조회
+   */
+  getPaginationState() {
+    return { ...this.state.pagination };
+  }
+  /**
+   * 특정 페이지로 이동
+   * @param page - 이동할 페이지 번호 (1-based)
+   */
+  goToPage(e) {
+    var o, n;
+    const { totalPages: i } = this.state.pagination, s = Math.max(1, Math.min(e, i || 1));
+    s === this.state.pagination.currentPage && this.state.displayData.length > 0 || (this.state.pagination.currentPage = s, this.isRemoteDataSource() ? this.fetchData() : (this.applyLocalPagination(), this.render()), (n = (o = this.events).onPageChange) == null || n.call(o, s, this.state.pagination.pageSize));
+  }
+  /**
+   * 페이지 크기 변경
+   * @param pageSize - 새 페이지 크기
+   */
+  setPageSize(e) {
+    var i, s;
+    e < 1 || e === this.state.pagination.pageSize || (this.state.pagination.pageSize = e, this.state.pagination.currentPage = 1, this.updateTotalPages(), this.isRemoteDataSource() ? this.fetchData() : (this.applyLocalPagination(), this.render()), (s = (i = this.events).onPageSizeChange) == null || s.call(i, e));
+  }
+  /**
+   * 서버에서 데이터 가져오기 (remote 모드)
+   */
+  async fetchData() {
+    const e = this.options.dataSource;
+    if (!(e != null && e.fetch)) return;
+    const i = {
+      page: this.state.pagination.currentPage,
+      pageSize: this.state.pagination.pageSize,
+      sort: this.state.sort.length > 0 ? this.state.sort : void 0,
+      filter: this.state.filter
+    };
+    this.state.pagination.loading = !0, this.setLoading(!0);
+    try {
+      const s = await e.fetch(i);
+      this.state.data = s.data.map((o) => ({ ...o })), this.state.displayData = this.state.data, this.state.pagination.totalCount = s.totalCount, this.updateTotalPages(), this.state.rowStates.clear(), this.state.data.forEach((o) => {
+        this.state.rowStates.set(o, "none");
+      }), this.rebuildDataIndexMap(), this.summary.invalidateCache(), this.clearSelectionState();
+    } catch (s) {
+      console.error("VeloxGrid: fetchData error", s);
+    } finally {
+      this.state.pagination.loading = !1, this.setLoading(!1), this.render();
+    }
+  }
+  /**
+   * 전체 페이지 수 재계산
+   */
+  updateTotalPages() {
+    const { pageSize: e, totalCount: i } = this.state.pagination;
+    this.state.pagination.totalPages = Math.max(1, Math.ceil(i / e));
+  }
+  /**
+   * 로컬 데이터에 페이지네이션 적용
+   * sort/filter 적용 후 현재 페이지 데이터만 displayData에 설정
+   */
+  applyLocalPagination() {
+    let e = [...this.state.data];
+    if (this.state.filter && (e = A(e, this.state.filter)), this.state.sort.length > 0) {
+      const n = {};
+      this.state.columns.forEach((t) => {
+        n[t.field] = t.type || "text";
+      }), e = V(e, this.state.sort, n);
+    }
+    this.state.pagination.totalCount = e.length, this.updateTotalPages();
+    const { currentPage: i, pageSize: s } = this.state.pagination, o = (i - 1) * s;
+    this.state.displayData = e.slice(o, o + s), this.initCheckableRows();
+  }
+  /**
+   * Infinite Scroll: 스크롤 바닥 감지 (Phase 18)
+   */
+  checkInfiniteScroll() {
+    const e = this.options.pagination;
+    if (!(e != null && e.enabled) || e.mode !== "infinite" || this.infiniteScrollLoading || this.infiniteScrollAllLoaded) return;
+    const i = e.infiniteScrollThreshold || 100, { scrollTop: s, scrollHeight: o, clientHeight: n } = this.bodyElement;
+    o - s - n <= i && this.loadNextPage();
+  }
+  /**
+   * Infinite Scroll: 다음 페이지 로드 (Phase 18)
+   */
+  async loadNextPage() {
+    const { currentPage: e, totalPages: i } = this.state.pagination;
+    if (e >= i) {
+      this.infiniteScrollAllLoaded = !0, this.renderInfiniteScrollStatus();
+      return;
+    }
+    if (this.infiniteScrollLoading = !0, this.state.pagination.currentPage++, this.renderInfiniteScrollStatus(), this.isRemoteDataSource()) {
+      const s = this.options.dataSource;
+      if (!(s != null && s.fetch)) return;
+      const o = {
+        page: this.state.pagination.currentPage,
+        pageSize: this.state.pagination.pageSize,
+        sort: this.state.sort.length > 0 ? this.state.sort : void 0,
+        filter: this.state.filter
+      };
+      try {
+        const n = await s.fetch(o), t = n.data.map((l) => ({ ...l }));
+        this.state.data.push(...t), this.state.displayData = [...this.state.data], this.state.pagination.totalCount = n.totalCount, this.updateTotalPages(), t.forEach((l) => this.state.rowStates.set(l, "none")), this.rebuildDataIndexMap(), this.summary.invalidateCache(), this.state.pagination.currentPage >= this.state.pagination.totalPages && (this.infiniteScrollAllLoaded = !0);
+      } catch (n) {
+        console.error("VeloxGrid: infinite scroll fetch error", n), this.state.pagination.currentPage--;
+      }
+    } else
+      this.applyLocalInfiniteScroll();
+    this.infiniteScrollLoading = !1, this.render();
+  }
+  /**
+   * Local Infinite Scroll: 다음 페이지 데이터 추가 (Phase 18)
+   */
+  applyLocalInfiniteScroll() {
+    let e = [...this.state.data];
+    if (this.state.filter && (e = A(e, this.state.filter)), this.state.sort.length > 0) {
+      const n = {};
+      this.state.columns.forEach((t) => {
+        n[t.field] = t.type || "text";
+      }), e = V(e, this.state.sort, n);
+    }
+    const { currentPage: i, pageSize: s } = this.state.pagination, o = i * s;
+    this.state.displayData = e.slice(0, o), o >= e.length && (this.infiniteScrollAllLoaded = !0), this.initCheckableRows();
+  }
+  /**
+   * Infinite Scroll 상태 표시 렌더링 (Phase 18)
+   */
+  renderInfiniteScrollStatus() {
+    if (this.paginationContainer) {
+      if (this.paginationContainer.innerHTML = "", this.infiniteScrollLoading) {
+        const e = p("div", "velox-infinite-status");
+        e.textContent = "Loading...", this.paginationContainer.appendChild(e);
+      } else if (this.infiniteScrollAllLoaded) {
+        const e = p("div", "velox-infinite-status velox-infinite-status--done"), { totalCount: i } = this.state.pagination;
+        e.textContent = `All ${i.toLocaleString()} items loaded`, this.paginationContainer.appendChild(e);
+      }
+    }
+  }
+  /**
+   * Pagination UI 렌더링 (Phase 18)
+   */
+  renderPagination() {
+    var g;
+    if (!this.paginationContainer) return;
+    if (((g = this.options.pagination) == null ? void 0 : g.mode) === "infinite") {
+      this.renderInfiniteScrollStatus();
+      return;
+    }
+    const { currentPage: e, totalPages: i, totalCount: s, pageSize: o } = this.state.pagination, n = this.options.pagination, t = (n == null ? void 0 : n.maxPageButtons) || 5;
+    if (this.paginationContainer.innerHTML = "", (n == null ? void 0 : n.showInfo) !== !1) {
+      const d = p("div", "velox-pagination-info"), f = (e - 1) * o + 1, C = Math.min(e * o, s);
+      d.textContent = s > 0 ? `${f}-${C} / ${s.toLocaleString()}` : "0 items", this.paginationContainer.appendChild(d);
+    }
+    const l = p("div", "velox-pagination-nav");
+    l.appendChild(this.createPageButton("«", 1, e === 1)), l.appendChild(this.createPageButton("‹", e - 1, e === 1));
+    const a = Math.floor(t / 2);
+    let r = Math.max(1, e - a);
+    const h = Math.min(i, r + t - 1);
+    if (h - r + 1 < t && (r = Math.max(1, h - t + 1)), r > 1 && (l.appendChild(this.createPageButton("1", 1, !1)), r > 2)) {
+      const d = p("span", "velox-pagination-ellipsis");
+      d.textContent = "…", l.appendChild(d);
+    }
+    for (let d = r; d <= h; d++) {
+      const f = this.createPageButton(String(d), d, !1);
+      d === e && w(f, "velox-pagination-btn--active"), l.appendChild(f);
+    }
+    if (h < i) {
+      if (h < i - 1) {
+        const d = p("span", "velox-pagination-ellipsis");
+        d.textContent = "…", l.appendChild(d);
+      }
+      l.appendChild(this.createPageButton(String(i), i, !1));
+    }
+    if (l.appendChild(this.createPageButton("›", e + 1, e === i)), l.appendChild(this.createPageButton("»", i, e === i)), this.paginationContainer.appendChild(l), n != null && n.showSizeChanger) {
+      const d = p("div", "velox-pagination-sizer"), f = document.createElement("select");
+      f.className = "velox-pagination-select", (n.pageSizeOptions || [10, 20, 50, 100]).forEach((x) => {
+        const b = document.createElement("option");
+        b.value = String(x), b.textContent = `${x} / page`, x === o && (b.selected = !0), f.appendChild(b);
+      }), f.addEventListener("change", () => {
+        this.setPageSize(Number(f.value));
+      }), d.appendChild(f), this.paginationContainer.appendChild(d);
+    }
+  }
+  /**
+   * 페이지 버튼 생성 헬퍼 (Phase 18)
+   */
+  createPageButton(e, i, s) {
+    const o = p("button", "velox-pagination-btn");
+    return o.textContent = e, s ? (o.setAttribute("disabled", "true"), w(o, "velox-pagination-btn--disabled")) : o.addEventListener("click", () => this.goToPage(i)), o;
+  }
+  destroy() {
+    var e, i;
+    this.dragManager.destroy(), this.detachEvents(), document.removeEventListener("mouseup", this.boundHandleBlockSelectionEnd), this.closeFilterPopup(), this.closeColumnMenu(), this.rootElement.removeEventListener("keydown", this.boundHandleKeyDown), this.measureCanvas = null, this.measureContext = null, this.tooltip && (this.tooltip.destroy(), this.tooltip = null), this.container.innerHTML = "", (i = (e = this.events).onDestroy) == null || i.call(e);
+  }
+}
+const Kt = /* @__PURE__ */ mt({
+  __name: "VeloxGridVue",
+  props: {
+    columns: {},
+    data: { default: () => [] },
+    width: {},
+    height: {},
+    rowHeight: { default: 40 },
+    headerHeight: { default: 44 },
+    showRowNumbers: { type: [Boolean, Object], default: !1 },
+    rowDraggable: { type: [Boolean, Object], default: !1 },
+    selectable: { type: Boolean, default: !0 },
+    selectionMode: {},
+    selectionStyle: {},
+    showCheckbox: { type: Boolean },
+    checkBar: {},
+    sortable: { type: Boolean, default: !0 },
+    filterable: { type: Boolean, default: !1 },
+    editable: { type: Boolean, default: !1 },
+    resizable: { type: Boolean, default: !0 },
+    virtualScroll: { type: Boolean, default: !0 },
+    bufferSize: { default: 10 },
+    theme: { default: "default" },
+    locale: {},
+    emptyMessage: { default: "No data" },
+    loading: { type: Boolean, default: !1 },
+    loadingMessage: {},
+    className: {},
+    undoable: { type: Boolean },
+    undoStackSize: {},
+    contextMenu: {},
+    footerSummary: {},
+    groupSummary: {},
+    fixedOptions: {},
+    dataSource: {},
+    pagination: {},
+    wrapperClass: {}
+  },
+  emits: ["data-change", "row-add", "row-remove", "row-update", "selection-change", "row-select", "all-select", "cell-click", "cell-double-click", "row-click", "row-double-click", "cell-select", "cell-selection-change", "check-change", "check-all-change", "sort", "filter", "cell-edit-start", "cell-edit-end", "cell-edit-cancel", "validation-error", "copy", "paste", "cut", "key-down", "undo", "redo", "scroll", "column-resize", "column-reorder", "ready", "destroy", "page-change", "page-size-change"],
+  setup(c, { expose: e, emit: i }) {
+    const s = c, o = i, n = P(null);
+    let t = null;
+    function l() {
+      const { wrapperClass: u, ...v } = s;
+      return {
+        ...v,
+        ...{
+          onDataChange: (...m) => o("data-change", ...m),
+          onRowAdd: (...m) => o("row-add", ...m),
+          onRowRemove: (...m) => o("row-remove", ...m),
+          onRowUpdate: (...m) => o("row-update", ...m),
+          onSelectionChange: (...m) => o("selection-change", ...m),
+          onRowSelect: (...m) => o("row-select", ...m),
+          onAllSelect: (...m) => o("all-select", ...m),
+          onCellClick: (...m) => o("cell-click", ...m),
+          onCellDoubleClick: (...m) => o("cell-double-click", ...m),
+          onRowClick: (...m) => o("row-click", ...m),
+          onRowDoubleClick: (...m) => o("row-double-click", ...m),
+          onCellSelect: (...m) => o("cell-select", ...m),
+          onCellSelectionChange: (...m) => o("cell-selection-change", ...m),
+          onCheckChange: (...m) => o("check-change", ...m),
+          onCheckAllChange: (...m) => o("check-all-change", ...m),
+          onSort: (...m) => o("sort", ...m),
+          onFilter: (...m) => o("filter", ...m),
+          onCellEditStart: (...m) => o("cell-edit-start", ...m),
+          onCellEditEnd: (...m) => o("cell-edit-end", ...m),
+          onCellEditCancel: (...m) => o("cell-edit-cancel", ...m),
+          onValidationError: (...m) => o("validation-error", ...m),
+          onCopy: (...m) => o("copy", ...m),
+          onPaste: (...m) => o("paste", ...m),
+          onCut: (...m) => o("cut", ...m),
+          onKeyDown: (...m) => o("key-down", ...m),
+          onUndo: (...m) => o("undo", ...m),
+          onRedo: (...m) => o("redo", ...m),
+          onScroll: (...m) => o("scroll", ...m),
+          onColumnResize: (...m) => o("column-resize", ...m),
+          onColumnReorder: (...m) => o("column-reorder", ...m),
+          onReady: (...m) => o("ready", ...m),
+          onDestroy: () => o("destroy"),
+          onPageChange: (...m) => o("page-change", ...m),
+          onPageSizeChange: (...m) => o("page-size-change", ...m)
+        }
+      };
+    }
+    _(() => {
+      n.value && (t = new G(n.value, l()));
+    }), W(() => {
+      t && (t.destroy(), t = null);
+    }), O(() => s.data, (u) => {
+      t && u && t.setData(u);
+    }), O(() => s.columns, (u) => {
+      t && u && t.setColumns(u);
+    }), O(() => s.loading, (u) => {
+      t && u !== void 0 && t.setOptions({ loading: u });
+    });
+    function a() {
+      return t;
+    }
+    function r() {
+      t == null || t.destroy();
+    }
+    function h() {
+      t == null || t.refresh();
+    }
+    function g() {
+      return (t == null ? void 0 : t.getData()) ?? [];
+    }
+    function d(u) {
+      t == null || t.setData(u);
+    }
+    function f(u) {
+      return (t == null ? void 0 : t.getRow(u)) ?? null;
+    }
+    function C(u, v) {
+      t == null || t.addRow(u, v);
+    }
+    function x(u, v) {
+      t == null || t.updateRow(u, v);
+    }
+    function b(u) {
+      t == null || t.removeRow(u);
+    }
+    function y() {
+      t == null || t.clearData();
+    }
+    function S() {
+      return (t == null ? void 0 : t.getSelectedRows()) ?? [];
+    }
+    function E() {
+      return (t == null ? void 0 : t.getSelectedData()) ?? [];
+    }
+    function R(u, v) {
+      t == null || t.selectRow(u, v);
+    }
+    function $(u) {
+      t == null || t.selectAll(u);
+    }
+    function D() {
+      t == null || t.clearSelection();
+    }
+    function B(u) {
+      return (t == null ? void 0 : t.isRowSelected(u)) ?? !1;
+    }
+    function L(u, v, M) {
+      t == null || t.selectCell(u, v, M);
+    }
+    function T() {
+      return (t == null ? void 0 : t.getSelectedCells()) ?? [];
+    }
+    function F(u, v) {
+      t == null || t.setFocusedCell(u, v);
+    }
+    function J() {
+      return (t == null ? void 0 : t.getFocusedCell()) ?? null;
+    }
+    function Y(u) {
+      t == null || t.setSelection(u);
+    }
+    function Q() {
+      return (t == null ? void 0 : t.getSelection()) ?? null;
+    }
+    function Z() {
+      return (t == null ? void 0 : t.getSelectionData()) ?? [];
+    }
+    function I(u, v) {
+      t == null || t.checkItem(u, v);
+    }
+    function ee(u, v) {
+      t == null || t.checkItems(u, v);
+    }
+    function te(u) {
+      t == null || t.checkAll(u);
+    }
+    function ie() {
+      t == null || t.uncheckAll();
+    }
+    function se() {
+      return (t == null ? void 0 : t.getCheckedItems()) ?? [];
+    }
+    function oe() {
+      return (t == null ? void 0 : t.getCheckedData()) ?? [];
+    }
+    function ne(u) {
+      return (t == null ? void 0 : t.isItemChecked(u)) ?? !1;
+    }
+    function le(u) {
+      return (t == null ? void 0 : t.isItemCheckable(u)) ?? !1;
+    }
+    function ae(u, v) {
+      t == null || t.checkRow(u, v);
+    }
+    function re() {
+      return (t == null ? void 0 : t.getCheckedRows()) ?? [];
+    }
+    function de(u, v) {
+      t == null || t.sort(u, v);
+    }
+    function ce() {
+      t == null || t.clearSort();
+    }
+    function he() {
+      return (t == null ? void 0 : t.getSortState()) ?? [];
+    }
+    function ue(u) {
+      t == null || t.filter(u);
+    }
+    function fe() {
+      t == null || t.clearFilter();
+    }
+    function pe() {
+      return (t == null ? void 0 : t.getFilterState()) ?? null;
+    }
+    function me(u, v) {
+      t == null || t.startEdit(u, v);
+    }
+    function ge(u) {
+      t == null || t.endEdit(u);
+    }
+    function Ce() {
+      t == null || t.cancelEdit();
+    }
+    function xe() {
+      return (t == null ? void 0 : t.isEditing()) ?? !1;
+    }
+    function ye(u) {
+      return (t == null ? void 0 : t.getColumn(u)) ?? null;
+    }
+    function ve(u, v) {
+      t == null || t.setColumnWidth(u, v);
+    }
+    function we(u) {
+      t == null || t.showColumn(u);
+    }
+    function be(u) {
+      t == null || t.hideColumn(u);
+    }
+    function Se(u) {
+      t == null || t.setColumns(u);
+    }
+    function Ee(u) {
+      t == null || t.autoFitColumn(u);
+    }
+    function ke() {
+      t == null || t.autoFitAllColumns();
+    }
+    function Re(u) {
+      t == null || t.scrollToRow(u);
+    }
+    function De() {
+      t == null || t.scrollToTop();
+    }
+    function Le() {
+      t == null || t.scrollToBottom();
+    }
+    function Te(u, v) {
+      t == null || t.scrollToCell(u, v);
+    }
+    function Be() {
+      t == null || t.copy();
+    }
+    function Me() {
+      t == null || t.paste();
+    }
+    function Pe() {
+      t == null || t.cut();
+    }
+    function He() {
+      return (t == null ? void 0 : t.undo()) ?? !1;
+    }
+    function Fe() {
+      return (t == null ? void 0 : t.redo()) ?? !1;
+    }
+    function Oe() {
+      return (t == null ? void 0 : t.canUndo()) ?? !1;
+    }
+    function Ve() {
+      return (t == null ? void 0 : t.canRedo()) ?? !1;
+    }
+    function Ae() {
+      t == null || t.clearHistory();
+    }
+    function Ne() {
+      t == null || t.deleteSelectedCells();
+    }
+    function $e() {
+      t == null || t.deleteSelectedRows();
+    }
+    function ze(u) {
+      t == null || t.exportToExcel(u);
+    }
+    function _e(u) {
+      return (t == null ? void 0 : t.exportToCSV(u)) ?? "";
+    }
+    function We(u) {
+      t == null || t.downloadCSV(u);
+    }
+    function Ke(u) {
+      return (t == null ? void 0 : t.exportToJSON(u)) ?? "[]";
+    }
+    function qe(u) {
+      t == null || t.downloadJSON(u);
+    }
+    function Ue(u, v) {
+      return (t == null ? void 0 : t.importFromCSV(u, v)) ?? { data: [], headers: [], errors: [] };
+    }
+    function je(u, v) {
+      return (t == null ? void 0 : t.importFromExcel(u, v)) ?? Promise.resolve({ data: [], headers: [], errors: [] });
+    }
+    function Xe() {
+      return (t == null ? void 0 : t.getRowCount()) ?? 0;
+    }
+    function Ge() {
+      return (t == null ? void 0 : t.getVisibleRowCount()) ?? 0;
+    }
+    function Je(u, v) {
+      return t == null ? void 0 : t.getCellValue(u, v);
+    }
+    function Ye(u, v, M) {
+      t == null || t.setCellValue(u, v, M);
+    }
+    function Qe(u) {
+      return t == null ? void 0 : t.getSummaryValue(u);
+    }
+    function Ze() {
+      return (t == null ? void 0 : t.getSummaryValues()) ?? {};
+    }
+    function Ie() {
+      t == null || t.refreshSummary();
+    }
+    function et(u) {
+      return (t == null ? void 0 : t.getRowState(u)) ?? "none";
+    }
+    function tt(u) {
+      return (t == null ? void 0 : t.getRowStateByData(u)) ?? "none";
+    }
+    function it(u, v) {
+      t == null || t.setRowState(u, v);
+    }
+    function st() {
+      return (t == null ? void 0 : t.getChanges()) ?? { created: [], updated: [], deleted: [] };
+    }
+    function ot() {
+      return (t == null ? void 0 : t.getCreatedRows()) ?? [];
+    }
+    function nt() {
+      return (t == null ? void 0 : t.getUpdatedRows()) ?? [];
+    }
+    function lt() {
+      return (t == null ? void 0 : t.getDeletedRows()) ?? [];
+    }
+    function at() {
+      t == null || t.clearRowStates();
+    }
+    function rt() {
+      t == null || t.commit();
+    }
+    function dt(u) {
+      t == null || t.setOptions(u);
+    }
+    function ct() {
+      return t == null ? void 0 : t.getOptions();
+    }
+    function ht(u) {
+      t == null || t.goToPage(u);
+    }
+    function ut(u) {
+      t == null || t.setPageSize(u);
+    }
+    function ft() {
+      return (t == null ? void 0 : t.getPaginationState()) ?? {
+        currentPage: 1,
+        pageSize: 20,
+        totalCount: 0,
+        totalPages: 0,
+        loading: !1
+      };
+    }
+    function pt() {
+      return (t == null ? void 0 : t.fetchData()) ?? Promise.resolve();
+    }
+    return e({
+      getGridInstance: a,
+      destroy: r,
+      refresh: h,
+      getData: g,
+      setData: d,
+      getRow: f,
+      addRow: C,
+      updateRow: x,
+      removeRow: b,
+      clearData: y,
+      getSelectedRows: S,
+      getSelectedData: E,
+      selectRow: R,
+      selectAll: $,
+      clearSelection: D,
+      isRowSelected: B,
+      selectCell: L,
+      getSelectedCells: T,
+      setFocusedCell: F,
+      getFocusedCell: J,
+      setSelection: Y,
+      getSelection: Q,
+      getSelectionData: Z,
+      checkItem: I,
+      checkItems: ee,
+      checkAll: te,
+      uncheckAll: ie,
+      getCheckedItems: se,
+      getCheckedData: oe,
+      isItemChecked: ne,
+      isItemCheckable: le,
+      checkRow: ae,
+      getCheckedRows: re,
+      sort: de,
+      clearSort: ce,
+      getSortState: he,
+      filter: ue,
+      clearFilter: fe,
+      getFilterState: pe,
+      startEdit: me,
+      endEdit: ge,
+      cancelEdit: Ce,
+      isEditing: xe,
+      getColumn: ye,
+      setColumnWidth: ve,
+      showColumn: we,
+      hideColumn: be,
+      setColumns: Se,
+      autoFitColumn: Ee,
+      autoFitAllColumns: ke,
+      scrollToRow: Re,
+      scrollToTop: De,
+      scrollToBottom: Le,
+      scrollToCell: Te,
+      copy: Be,
+      paste: Me,
+      cut: Pe,
+      undo: He,
+      redo: Fe,
+      canUndo: Oe,
+      canRedo: Ve,
+      clearHistory: Ae,
+      deleteSelectedCells: Ne,
+      deleteSelectedRows: $e,
+      exportToExcel: ze,
+      exportToCSV: _e,
+      downloadCSV: We,
+      exportToJSON: Ke,
+      downloadJSON: qe,
+      importFromCSV: Ue,
+      importFromExcel: je,
+      getRowCount: Xe,
+      getVisibleRowCount: Ge,
+      getCellValue: Je,
+      setCellValue: Ye,
+      getSummaryValue: Qe,
+      getSummaryValues: Ze,
+      refreshSummary: Ie,
+      getRowState: et,
+      getRowStateByData: tt,
+      setRowState: it,
+      getChanges: st,
+      getCreatedRows: ot,
+      getUpdatedRows: nt,
+      getDeletedRows: lt,
+      clearRowStates: at,
+      commit: rt,
+      setOptions: dt,
+      getOptions: ct,
+      goToPage: ht,
+      setPageSize: ut,
+      getPaginationState: ft,
+      fetchData: pt
+    }), (u, v) => (gt(), Ct("div", {
+      ref_key: "containerRef",
+      ref: n,
+      class: xt(c.wrapperClass)
+    }, null, 2));
+  }
+});
+function qt(c) {
+  const e = P(null), i = P(null), s = P(!1);
+  return _(() => {
+    e.value && (i.value = new G(e.value, c), s.value = !0);
+  }), W(() => {
+    i.value && (i.value.destroy(), i.value = null, s.value = !1);
+  }), {
+    containerRef: e,
+    grid: i,
+    isReady: s
+  };
+}
+export {
+  Kt as VeloxGridVue,
+  qt as useVeloxGrid
+};
+//# sourceMappingURL=index.esm.js.map