velox-grid 0.11.0

package/dist/react/index.esm.js

@@ -0,0 +1,3757 @@
+import { jsx as W } from "react/jsx-runtime";
+import { forwardRef as K, useRef as R, useEffect as k, useImperativeHandle as q, useState as U, useCallback as j } from "react";
+function p(u, e, t) {
+  const i = document.createElement(u);
+  return e && (i.className = e), i;
+}
+function x(u, ...e) {
+  u.classList.add(...e);
+}
+function b(u, ...e) {
+  u.classList.remove(...e);
+}
+function X(u, e) {
+  let t = !1;
+  return function(...i) {
+    t || (u.apply(this, i), t = !0, setTimeout(() => t = !1, e));
+  };
+}
+function G(u = "velox") {
+  return `${u}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function D(u, e = "text") {
+  if (u == null)
+    return "";
+  switch (e) {
+    case "number":
+      return typeof u == "number" ? u.toLocaleString() : String(u);
+    case "boolean":
+      return u ? "Yes" : "No";
+    case "date":
+      return u instanceof Date ? u.toLocaleDateString() : String(u);
+    case "datetime":
+      return u instanceof Date ? u.toLocaleString() : String(u);
+    case "text":
+    default:
+      return String(u);
+  }
+}
+function Y(u, e, t = "text") {
+  if (u == null) return e == null ? 0 : -1;
+  if (e == null) return 1;
+  switch (t) {
+    case "number":
+      return u - e;
+    case "boolean":
+      return u === e ? 0 : u ? 1 : -1;
+    case "date":
+    case "datetime":
+      const i = u instanceof Date ? u : new Date(u), s = e instanceof Date ? e : new Date(e);
+      return i.getTime() - s.getTime();
+    case "text":
+    default:
+      return String(u).localeCompare(String(e));
+  }
+}
+function M(u, e, t) {
+  return e.length ? [...u].sort((i, s) => {
+    for (const { field: n, direction: o } of e) {
+      if (!o) continue;
+      const a = t[n] || "text", r = Y(i[n], s[n], a);
+      if (r !== 0)
+        return o === "asc" ? r : -r;
+    }
+    return 0;
+  }) : u;
+}
+function J(u, e) {
+  const { operator: t, value: i, value2: s } = e;
+  if (t === "isEmpty")
+    return u == null || u === "";
+  if (t === "isNotEmpty")
+    return u != null && u !== "";
+  const n = String(u ?? "").toLowerCase(), o = String(i ?? "").toLowerCase();
+  switch (t) {
+    case "equals":
+      return n === o;
+    case "notEquals":
+      return n !== o;
+    case "contains":
+      return n.includes(o);
+    case "notContains":
+      return !n.includes(o);
+    case "startsWith":
+      return n.startsWith(o);
+    case "endsWith":
+      return n.endsWith(o);
+    case "greaterThan":
+      return Number(u) > Number(i);
+    case "lessThan":
+      return Number(u) < Number(i);
+    case "greaterThanOrEqual":
+      return Number(u) >= Number(i);
+    case "lessThanOrEqual":
+      return Number(u) <= Number(i);
+    case "between":
+      const a = Number(u);
+      return a >= Number(i) && a <= Number(s);
+    default:
+      return !0;
+  }
+}
+function B(u, e) {
+  if (!e || !e.conditions.length)
+    return u;
+  const { conditions: t, logic: i } = e;
+  return u.filter((s) => {
+    const n = t.map(
+      (o) => J(s[o.field], o)
+    );
+    return i === "and" ? n.every(Boolean) : n.some(Boolean);
+  });
+}
+function F(u) {
+  const { data: e, displayData: t, columns: i, selectedRows: s, options: n } = u, o = n.columns ? i.filter((d) => n.columns.includes(d.field) && d.visible !== !1) : i.filter((d) => d.visible !== !1);
+  let a;
+  if (n.selectedOnly && s.length > 0) {
+    const d = n.filteredOnly ? t : e;
+    a = s.map((l) => d[l]).filter(Boolean);
+  } else n.filteredOnly ? a = t : a = e;
+  const r = [];
+  if (n.includeHeader !== !1) {
+    const d = o.map((l) => H(l.header));
+    r.push(d.join(","));
+  }
+  return a.forEach((d) => {
+    const l = o.map((c) => {
+      const h = d[c.field];
+      return H(ee(h, c.type));
+    });
+    r.push(l.join(","));
+  }), r.join(`\r
+`);
+}
+function H(u) {
+  if (u == null) return "";
+  const e = String(u);
+  return e.includes(",") || e.includes('"') || e.includes(`
+`) || e.includes("\r") ? `"${e.replace(/"/g, '""')}"` : e;
+}
+function O(u) {
+  const { data: e, displayData: t, columns: i, selectedRows: s, options: n } = u, o = n.columns ? i.filter((d) => n.columns.includes(d.field) && d.visible !== !1) : i.filter((d) => d.visible !== !1);
+  let a;
+  if (n.selectedOnly && s.length > 0) {
+    const d = n.filteredOnly ? t : e;
+    a = s.map((l) => d[l]).filter(Boolean);
+  } else n.filteredOnly ? a = t : a = e;
+  const r = a.map((d) => {
+    const l = {};
+    return o.forEach((c) => {
+      l[c.field] = d[c.field];
+    }), l;
+  });
+  return JSON.stringify(r, null, 2);
+}
+function V() {
+  return typeof window.XLSX < "u";
+}
+function A() {
+  const u = window.XLSX;
+  if (!u)
+    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 u;
+}
+function Q(u) {
+  const e = A(), { data: t, displayData: i, columns: s, selectedRows: n, options: o } = u, a = o.columns ? s.filter((m) => o.columns.includes(m.field) && m.visible !== !1) : s.filter((m) => m.visible !== !1);
+  let r;
+  if (o.selectedOnly && n.length > 0) {
+    const m = o.filteredOnly ? i : t;
+    r = n.map((y) => m[y]).filter(Boolean);
+  } else o.filteredOnly ? r = i : r = t;
+  const d = [];
+  o.includeHeader !== !1 && d.push(a.map((m) => m.header)), r.forEach((m) => {
+    const y = a.map((C) => {
+      const v = m[C.field];
+      return Z(v, C.type);
+    });
+    d.push(y);
+  });
+  const l = e.utils.aoa_to_sheet(d), c = a.map((m) => ({
+    wch: Math.max(
+      m.header.length,
+      ...r.slice(0, 100).map((y) => {
+        const C = y[m.field];
+        return String(C ?? "").length;
+      })
+    ) + 2
+  }));
+  l["!cols"] = c;
+  const h = e.utils.book_new(), f = o.sheetName || "Sheet1";
+  e.utils.book_append_sheet(h, l, f);
+  const g = (o.filename || "export") + ".xlsx";
+  e.writeFile(h, g);
+}
+function Z(u, e) {
+  if (u == null) return "";
+  switch (e) {
+    case "number":
+      return typeof u == "number" ? u : parseFloat(String(u)) || 0;
+    case "boolean":
+      return !!u;
+    case "date":
+    case "datetime":
+      if (u instanceof Date) return u;
+      if (typeof u == "string" || typeof u == "number") {
+        const t = new Date(u);
+        return isNaN(t.getTime()) ? String(u) : t;
+      }
+      return String(u);
+    default:
+      return String(u);
+  }
+}
+function ee(u, e) {
+  if (u == null) return "";
+  switch (e) {
+    case "date":
+      return u instanceof Date ? u.toISOString().split("T")[0] : String(u);
+    case "datetime":
+      return u instanceof Date ? u.toISOString() : String(u);
+    default:
+      return String(u);
+  }
+}
+function te(u, e = !0) {
+  var i;
+  const t = {
+    data: [],
+    headers: [],
+    errors: []
+  };
+  try {
+    const s = ie(u);
+    if (s.length === 0)
+      return t.errors.push("CSV file is empty"), t;
+    let n = 0;
+    if (e)
+      t.headers = s[0], n = 1;
+    else {
+      const o = ((i = s[0]) == null ? void 0 : i.length) || 0;
+      t.headers = Array.from({ length: o }, (a, r) => `Column${r + 1}`);
+    }
+    for (let o = n; o < s.length; o++) {
+      const a = s[o], r = {};
+      t.headers.forEach((d, l) => {
+        r[d] = a[l] ?? "";
+      }), t.data.push(r);
+    }
+  } catch (s) {
+    t.errors.push(`CSV parsing error: ${s instanceof Error ? s.message : "Unknown error"}`);
+  }
+  return t;
+}
+function ie(u) {
+  const e = [];
+  let t = [], i = "", s = !1;
+  for (let n = 0; n < u.length; n++) {
+    const o = u[n], a = u[n + 1];
+    if (s)
+      o === '"' ? a === '"' ? (i += '"', n++) : s = !1 : i += o;
+    else if (o === '"')
+      s = !0;
+    else if (o === ",")
+      t.push(i), i = "";
+    else {
+      if (o === "\r")
+        continue;
+      o === `
+` ? (t.push(i), t.some((r) => r.trim() !== "") && e.push(t), t = [], i = "") : i += o;
+    }
+  }
+  return (i !== "" || t.length > 0) && (t.push(i), t.some((n) => n.trim() !== "") && e.push(t)), e;
+}
+function se(u, e = 0) {
+  return new Promise((t) => {
+    const i = {
+      data: [],
+      headers: [],
+      errors: []
+    };
+    if (!V()) {
+      i.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>'
+      ), t(i);
+      return;
+    }
+    const s = A(), n = new FileReader();
+    n.onload = (o) => {
+      var a;
+      try {
+        const r = (a = o.target) == null ? void 0 : a.result, d = s.read(r, { type: "array" }), l = d.SheetNames;
+        if (e >= l.length) {
+          i.errors.push(`Sheet index ${e} not found. Available sheets: ${l.join(", ")}`), t(i);
+          return;
+        }
+        const c = l[e], h = d.Sheets[c], f = s.utils.sheet_to_json(h, { header: 1 });
+        if (f.length === 0) {
+          i.errors.push("Excel sheet is empty"), t(i);
+          return;
+        }
+        i.headers = f[0].map((g) => String(g ?? ""));
+        for (let g = 1; g < f.length; g++) {
+          const m = {}, y = f[g];
+          i.headers.forEach((C, v) => {
+            const w = y[v];
+            m[C] = w ?? "";
+          }), Object.values(m).some((C) => C !== "") && i.data.push(m);
+        }
+        t(i);
+      } catch (r) {
+        i.errors.push(`Excel parsing error: ${r instanceof Error ? r.message : "Unknown error"}`), t(i);
+      }
+    }, n.onerror = () => {
+      i.errors.push("Failed to read file"), t(i);
+    }, n.readAsArrayBuffer(u);
+  });
+}
+function N(u, e, t = "text/plain") {
+  const i = u instanceof Blob ? u : new Blob([u], { type: t }), s = URL.createObjectURL(i), n = document.createElement("a");
+  n.href = s, n.download = e, n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(s);
+}
+function ne(u) {
+  const e = F(u), t = (u.options.filename || "export") + ".csv";
+  N(e, t, "text/csv;charset=utf-8");
+}
+function oe(u) {
+  const e = O(u), t = (u.options.filename || "export") + ".json";
+  N(e, t, "application/json");
+}
+const le = {
+  enabled: !0,
+  maxSize: 50
+};
+class ae {
+  constructor(e = {}) {
+    this.undoStack = [], this.redoStack = [], this.options = { ...le, ...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, t, i, s) {
+    this.push({
+      type: "cell_edit",
+      timestamp: Date.now(),
+      data: { rowIndex: e, field: t, oldValue: i, newValue: s }
+    });
+  }
+  /**
+   * Create and push a bulk edit action (paste, cut, delete)
+   */
+  pushBulkEdit(e, t) {
+    t.length !== 0 && this.push({
+      type: e,
+      timestamp: Date.now(),
+      data: { changes: t }
+    });
+  }
+  /**
+   * Create and push a row add action
+   */
+  pushRowAdd(e, t) {
+    this.push({
+      type: "row_add",
+      timestamp: Date.now(),
+      data: { row: { ...e }, index: t }
+    });
+  }
+  /**
+   * Create and push a row remove action
+   */
+  pushRowRemove(e, t) {
+    this.push({
+      type: "row_remove",
+      timestamp: Date.now(),
+      data: { row: { ...e }, index: t }
+    });
+  }
+  /**
+   * 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 re {
+  /**
+   * 단일 값에 대한 유효성 검사
+   * @param value - 검사할 값
+   * @param rules - 유효성 규칙 배열
+   * @param row - 전체 행 데이터 (custom validator용)
+   * @returns 검사 결과
+   */
+  static validate(e, t, i) {
+    const s = [];
+    for (const n of t) {
+      const o = this.validateRule(e, n, i);
+      o && s.push({ field: "", message: o });
+    }
+    return {
+      valid: s.length === 0,
+      errors: s
+    };
+  }
+  /**
+   * 단일 규칙 검사
+   * @param value - 검사할 값
+   * @param rule - 유효성 규칙
+   * @param row - 전체 행 데이터
+   * @returns 에러 메시지 또는 null
+   */
+  static validateRule(e, t, i) {
+    switch (t.type) {
+      case "required":
+        return this.validateRequired(e) ? null : t.message;
+      case "min":
+        return this.validateMin(e, t.value) ? null : t.message;
+      case "max":
+        return this.validateMax(e, t.value) ? null : t.message;
+      case "minLength":
+        return this.validateMinLength(e, t.value) ? null : t.message;
+      case "maxLength":
+        return this.validateMaxLength(e, t.value) ? null : t.message;
+      case "pattern":
+        return this.validatePattern(e, t.value) ? null : t.message;
+      case "custom":
+        if (t.validator) {
+          const s = t.validator(e, i || {});
+          return typeof s == "boolean" ? s ? null : t.message : s || null;
+        }
+        return null;
+      default:
+        return null;
+    }
+  }
+  /**
+   * Required 검사 - null, undefined, 빈 문자열 체크
+   */
+  static validateRequired(e) {
+    return !(e == null || typeof e == "string" && e.trim() === "");
+  }
+  /**
+   * Min 검사 - 숫자 최소값
+   */
+  static validateMin(e, t) {
+    if (e == null)
+      return !0;
+    const i = typeof e == "number" ? e : parseFloat(String(e));
+    return !isNaN(i) && i >= t;
+  }
+  /**
+   * Max 검사 - 숫자 최대값
+   */
+  static validateMax(e, t) {
+    if (e == null)
+      return !0;
+    const i = typeof e == "number" ? e : parseFloat(String(e));
+    return !isNaN(i) && i <= t;
+  }
+  /**
+   * MinLength 검사 - 문자열 최소 길이
+   */
+  static validateMinLength(e, t) {
+    return e == null ? !0 : String(e).length >= t;
+  }
+  /**
+   * MaxLength 검사 - 문자열 최대 길이
+   */
+  static validateMaxLength(e, t) {
+    return e == null ? !0 : String(e).length <= t;
+  }
+  /**
+   * Pattern 검사 - 정규식 매칭
+   */
+  static validatePattern(e, t) {
+    return e == null ? !0 : (typeof t == "string" ? new RegExp(t) : t).test(String(e));
+  }
+  /**
+   * 전체 행 유효성 검사
+   * @param row - 검사할 행 데이터
+   * @param columns - 컬럼 정의 (validation 규칙 포함)
+   * @returns 검사 결과
+   */
+  static validateRow(e, t) {
+    const i = [];
+    for (const s of t)
+      if (s.validation && s.validation.length > 0) {
+        const n = e[s.field], o = this.validate(n, s.validation, e);
+        if (!o.valid)
+          for (const a of o.errors)
+            i.push({
+              field: s.field,
+              message: a.message
+            });
+      }
+    return {
+      valid: i.length === 0,
+      errors: i
+    };
+  }
+  /**
+   * 전체 데이터 유효성 검사
+   * @param data - 검사할 데이터 배열
+   * @param columns - 컬럼 정의
+   * @returns 행별 검사 결과 배열
+   */
+  static validateAll(e, t) {
+    return e.map((i) => this.validateRow(i, t));
+  }
+}
+class de {
+  /**
+   * Create an editor element based on type
+   */
+  static createEditor(e, t, i, s, n) {
+    const { type: o } = t;
+    switch (o) {
+      case "text":
+      case "number":
+        return this.createTextEditor(e, t, i, s, n);
+      case "select":
+        return this.createSelectEditor(e, t, i, s, n);
+      case "date":
+        return this.createDateEditor(e, t, i, s, n);
+      case "checkbox":
+        return this.createCheckboxEditor(e, t, i, s, n);
+      case "custom":
+        return this.createCustomEditor(e, t, i, s, n);
+      default:
+        return this.createTextEditor(e, t, i, s, n);
+    }
+  }
+  /**
+   * Create text/number input editor
+   */
+  static createTextEditor(e, t, i, s, n) {
+    const o = document.createElement("input");
+    return o.className = "velox-edit-input", o.type = t.type === "number" ? "number" : "text", o.value = e != null ? String(e) : "", t.placeholder && (o.placeholder = t.placeholder), t.type === "number" && (t.min !== void 0 && (o.min = String(t.min)), t.max !== void 0 && (o.max = String(t.max)), t.step !== void 0 && (o.step = String(t.step))), o.addEventListener("blur", () => {
+      const a = t.type === "number" ? parseFloat(o.value) : o.value;
+      i(a);
+    }), o.addEventListener("keydown", (a) => {
+      if (a.key === "Enter") {
+        a.preventDefault(), a.stopPropagation();
+        const r = t.type === "number" ? parseFloat(o.value) : o.value;
+        i(r), n && n(a.shiftKey ? "up" : "down");
+      } else if (a.key === "Tab") {
+        a.preventDefault(), a.stopPropagation();
+        const r = t.type === "number" ? parseFloat(o.value) : o.value;
+        i(r), n && n(a.shiftKey ? "left" : "right");
+      } else a.key === "Escape" && (a.preventDefault(), a.stopPropagation(), s());
+    }), o;
+  }
+  /**
+   * Create select dropdown editor
+   */
+  static createSelectEditor(e, t, i, s, n) {
+    const o = document.createElement("select");
+    return o.className = "velox-edit-select", t.options && t.options.length > 0 && t.options.forEach((a) => {
+      const r = document.createElement("option");
+      r.value = String(a.value ?? ""), r.textContent = a.label, a.value === e && (r.selected = !0), o.appendChild(r);
+    }), o.addEventListener("change", () => {
+      console.log("📦 Select change event", o.value), i(o.value);
+    }), o.addEventListener("keydown", (a) => {
+      a.key === "Enter" ? (a.preventDefault(), a.stopPropagation(), i(o.value), n && n(a.shiftKey ? "up" : "down")) : a.key === "Tab" ? (a.preventDefault(), a.stopPropagation(), i(o.value), n && n(a.shiftKey ? "left" : "right")) : a.key === "Escape" && (a.preventDefault(), a.stopPropagation(), s());
+    }), o;
+  }
+  /**
+   * Create date input editor
+   */
+  static createDateEditor(e, t, i, s, n) {
+    const o = document.createElement("input");
+    if (o.className = "velox-edit-input velox-edit-date", o.type = "date", e instanceof Date)
+      o.value = e.toISOString().split("T")[0];
+    else if (typeof e == "string" && e) {
+      const a = new Date(e);
+      isNaN(a.getTime()) || (o.value = a.toISOString().split("T")[0]);
+    }
+    return o.addEventListener("blur", () => {
+      i(o.value ? new Date(o.value) : null);
+    }), o.addEventListener("keydown", (a) => {
+      a.key === "Enter" ? (a.preventDefault(), a.stopPropagation(), i(o.value ? new Date(o.value) : null), n && n(a.shiftKey ? "up" : "down")) : a.key === "Tab" ? (a.preventDefault(), a.stopPropagation(), i(o.value ? new Date(o.value) : null), n && n(a.shiftKey ? "left" : "right")) : a.key === "Escape" && (a.preventDefault(), a.stopPropagation(), s());
+    }), o;
+  }
+  /**
+   * Create checkbox editor
+   */
+  static createCheckboxEditor(e, t, i, s, n) {
+    const o = document.createElement("div");
+    o.className = "velox-edit-checkbox-container";
+    const a = document.createElement("input");
+    return a.className = "velox-edit-checkbox", a.type = "checkbox", a.checked = !!e, o.appendChild(a), a.addEventListener("change", () => {
+      console.log("📦 Checkbox change event", a.checked), i(a.checked);
+    }), a.addEventListener("keydown", (r) => {
+      r.key === "Enter" || r.key === " " ? (r.preventDefault(), r.stopPropagation(), a.checked = !a.checked, i(a.checked), r.key === "Enter" && n && n(r.shiftKey ? "up" : "down")) : r.key === "Tab" ? (r.preventDefault(), r.stopPropagation(), i(a.checked), n && n(r.shiftKey ? "left" : "right")) : r.key === "Escape" && (r.preventDefault(), r.stopPropagation(), s());
+    }), o;
+  }
+  /**
+   * Create custom editor using renderer function
+   */
+  static createCustomEditor(e, t, i, s, n) {
+    const o = document.createElement("div");
+    if (o.className = "velox-edit-custom", t.renderer)
+      t.renderer(o, e, i, s);
+    else
+      return this.createTextEditor(e, { type: "text" }, i, s, n);
+    return o;
+  }
+}
+class ce {
+  // 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, t, i, s) {
+    this.hideTimeout && (clearTimeout(this.hideTimeout), this.hideTimeout = null), this.currentCell = e;
+    let n = null;
+    if (s.tooltip === !0 ? n = this.getAutoTooltipContent(e, t) : typeof s.tooltip == "function" && (n = s.tooltip(t, i)), !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, t) {
+    const i = e.querySelector(".velox-cell-content");
+    return i && (i.scrollWidth > i.clientWidth || i.scrollHeight > i.clientHeight) ? String(t ?? "") : null;
+  }
+  /**
+   * Position tooltip relative to cell
+   */
+  positionTooltip(e) {
+    if (!this.tooltip) return;
+    const t = e.getBoundingClientRect(), i = this.container.getBoundingClientRect(), s = this.tooltip.getBoundingClientRect();
+    let n = t.bottom - i.top + 5, o = t.left - i.left;
+    const a = window.innerWidth, r = window.innerHeight;
+    t.left + s.width > a && (o = t.right - i.left - s.width), t.bottom + s.height + 5 > r && (n = t.top - i.top - s.height - 5), this.tooltip.style.top = `${n}px`, this.tooltip.style.left = `${o}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 he {
+  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 i = p("div", "velox-header-row");
+      e.getFixedLeftColumns().forEach((s) => {
+        if (s.field === "__drag") {
+          const n = p("div", "velox-row-drag-handle");
+          n.style.visibility = "hidden", i.appendChild(n);
+        } else if (s.field === "__checkbox")
+          i.appendChild(this.createHeaderCheckbarCell());
+        else if (s.field === "__rownum") {
+          const n = p("div", "velox-header-cell velox-rownumber-cell");
+          n.textContent = "#", i.appendChild(n);
+        } else
+          i.appendChild(this.createHeaderCell(s));
+      }), e.fixedLeftHeader.appendChild(i);
+    }
+    const t = p("div", "velox-header-row");
+    if (e.getScrollableColumns().forEach((i) => {
+      if (i.field === "__drag") {
+        const s = p("div", "velox-row-drag-handle");
+        s.style.visibility = "hidden", t.appendChild(s);
+      } else if (i.field === "__checkbox")
+        t.appendChild(this.createHeaderCheckbarCell());
+      else if (i.field === "__rownum") {
+        const s = p("div", "velox-header-cell velox-rownumber-cell");
+        s.textContent = "#", t.appendChild(s);
+      } else
+        t.appendChild(this.createHeaderCell(i));
+    }), e.headerElement.innerHTML = "", e.headerElement.appendChild(t), e.fixedRightHeader) {
+      e.fixedRightHeader.innerHTML = "";
+      const i = p("div", "velox-header-row");
+      e.getFixedRightColumns().forEach(
+        (s) => i.appendChild(this.createHeaderCell(s))
+      ), e.fixedRightHeader.appendChild(i), this.updateFixedRightWidth();
+    }
+  }
+  /**
+   * CheckBar 헤더 셀 생성
+   */
+  createHeaderCheckbarCell() {
+    const e = this.ctx, t = e.getOptions(), i = e.getState(), s = p("div", "velox-header-cell velox-checkbox-cell"), n = t.checkBar;
+    if (n.showAll && !n.exclusive) {
+      const o = p("input", "velox-checkbox");
+      o.type = "checkbox";
+      const a = i.checkBar.checkableRows.size, r = i.checkBar.checkedRows.size, d = a > 0 && r === a, l = r > 0 && !d;
+      o.checked = d, o.indeterminate = l, o.addEventListener("change", () => e.checkAll(o.checked)), s.appendChild(o);
+    } else if (n.exclusive) {
+      const o = p("span", "velox-checkbox-label");
+      o.textContent = "선택", s.appendChild(o);
+    }
+    return s;
+  }
+  /**
+   * 헤더 셀 생성
+   */
+  createHeaderCell(e) {
+    var c;
+    const t = this.ctx, i = t.getOptions(), s = t.getState(), n = p("div", "velox-header-cell");
+    n.dataset.field = e.field;
+    const o = e.headerAlign || e.align || "left";
+    if (x(n, `velox-header-cell--align-${o}`), 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 && x(n, e.headerClass), i.sortable && e.sortable !== !1) {
+      x(n, "velox-header-cell--sortable");
+      const h = s.sort.find((f) => f.field === e.field);
+      h != null && h.direction && x(n, "velox-header-cell--sorted");
+    }
+    const a = p("div", "velox-header-content"), r = p("span", "velox-column-drag-handle");
+    r.innerHTML = "⋮⋮", r.title = "드래그하여 컬럼 순서 변경", r.addEventListener("mousedown", (h) => t.startColumnDrag(h, e)), a.appendChild(r);
+    const d = p("span", "velox-header-text");
+    if (d.textContent = e.header, a.appendChild(d), n.appendChild(a), i.sortable && e.sortable !== !1) {
+      const h = p("button", "velox-sort-btn"), f = s.sort.find((g) => g.field === e.field);
+      (f == null ? void 0 : f.direction) === "asc" ? (x(h, "velox-sort-btn--asc"), h.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" && x(h, "velox-sort-btn--desc"), h.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 && x(h, "velox-sort-btn--active"), h.title = "정렬", h.addEventListener("click", (g) => {
+        g.stopPropagation(), t.handleSort(e.field);
+      }), n.appendChild(h);
+    }
+    if (i.filterable && e.filterable !== !1) {
+      const h = p("button", "velox-filter-btn");
+      h.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>', ((c = s.filter) == null ? void 0 : c.conditions.some((g) => g.field === e.field)) && x(h, "velox-filter-btn--active"), h.addEventListener("click", (g) => {
+        g.stopPropagation(), t.showFilterPopup(e, h);
+      }), n.appendChild(h);
+    }
+    const l = p("button", "velox-column-menu-btn");
+    if (l.innerHTML = "⋯", l.title = "컬럼 메뉴", l.addEventListener("click", (h) => {
+      h.stopPropagation(), t.showColumnMenu(e, l);
+    }), n.appendChild(l), i.resizable && e.resizable !== !1) {
+      const h = p("div", "velox-resize-handle");
+      h.addEventListener("mousedown", (f) => t.startResize(f, e)), n.appendChild(h);
+    }
+    return n;
+  }
+  /**
+   * 바디 렌더링 (Phase 14: Fixed Right 지원)
+   */
+  renderBody() {
+    const e = this.ctx, t = e.getOptions(), i = e.getVisibleRows(), s = e.getVirtualState(), n = t.rowHeight || 40;
+    if (e.fixedLeftBodyInner && (e.fixedLeftBodyInner.innerHTML = "", t.virtualScroll ? (e.fixedLeftBodyInner.style.height = `${s.totalHeight}px`, e.fixedLeftBodyInner.style.position = "relative") : (e.fixedLeftBodyInner.style.height = "", e.fixedLeftBodyInner.style.position = ""), i.forEach(({ data: o, index: a }) => {
+      const r = this.createRowBase(o, a, "fixedLeft");
+      t.virtualScroll && (r.style.position = "absolute", r.style.top = `${a * n}px`, r.style.left = "0", r.style.right = "0"), e.fixedLeftBodyInner.appendChild(r);
+    })), e.bodyInner.innerHTML = "", t.virtualScroll ? (e.bodyInner.style.height = `${s.totalHeight}px`, e.bodyInner.style.position = "relative") : (e.bodyInner.style.height = "", e.bodyInner.style.position = ""), i.length === 0) {
+      const o = p("div", "velox-empty");
+      o.textContent = t.emptyMessage || "데이터가 없습니다.", e.bodyInner.appendChild(o);
+      return;
+    }
+    i.forEach(({ data: o, index: a }) => {
+      const r = this.createRowBase(o, a, "scrollable");
+      t.virtualScroll && (r.style.position = "absolute", r.style.top = `${a * n}px`, r.style.left = "0", r.style.right = "0"), e.bodyInner.appendChild(r);
+    }), e.fixedRightBodyInner && (e.fixedRightBodyInner.innerHTML = "", t.virtualScroll ? (e.fixedRightBodyInner.style.height = `${s.totalHeight}px`, e.fixedRightBodyInner.style.position = "relative") : (e.fixedRightBodyInner.style.height = "", e.fixedRightBodyInner.style.position = ""), i.forEach(({ data: o, index: a }) => {
+      const r = this.createRowBase(o, a, "fixedRight");
+      t.virtualScroll && (r.style.position = "absolute", r.style.top = `${a * n}px`, r.style.left = "0", r.style.right = "0"), e.fixedRightBodyInner.appendChild(r);
+    }), 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 t = e.getFixedRightColumns();
+    if (t.length === 0) return;
+    let i = 0;
+    t.forEach((n) => {
+      i += n.width || n.minWidth || 100;
+    });
+    const s = this.getScrollbarWidth(e.fixedRightBody);
+    e.fixedRightContainer.style.width = `${i + s}px`, e.fixedRightContainer.style.minWidth = `${i + s}px`, e.fixedRightContainer.style.maxWidth = `${i + s}px`, e.fixedRightHeader && s > 0 && (e.fixedRightHeader.style.paddingRight = `${s}px`), e.fixedRightFooter && s > 0 && (e.fixedRightFooter.style.paddingRight = `${s}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, t, i) {
+    const s = this.ctx, n = s.getOptions(), o = s.getState(), a = p("div", "velox-row");
+    return a.dataset.rowIndex = String(t), t % 2 === 1 && x(a, "velox-row--alt"), n.selectionStyle === "row" && o.selection.selectedRows.has(t) && x(a, "velox-row--selected"), i === "fixedLeft" && o.checkBar.checkedRows.has(t) && x(a, "velox-row--checked"), a.addEventListener("click", (r) => {
+      const d = r.target;
+      d.classList.contains("velox-checkbox") || d.classList.contains("velox-row-drag-handle") || s.handleRowClick(t, r);
+    }), i !== "fixedLeft" && a.addEventListener("dblclick", (r) => s.handleRowDoubleClick(t, r)), i === "fixedLeft" ? s.getFixedLeftColumns().forEach((r) => {
+      if (r.field === "__drag") {
+        const d = p("div", "velox-row-drag-handle");
+        d.innerHTML = "☰", d.title = "드래그하여 행 순서 변경", d.addEventListener("mousedown", (l) => s.startRowDrag(l, t, a)), a.appendChild(d);
+      } else if (r.field === "__checkbox")
+        a.appendChild(this.createCheckbarCell(t));
+      else if (r.field === "__rownum") {
+        const d = p("div", "velox-cell velox-rownumber-cell");
+        d.textContent = String(t + 1), a.appendChild(d);
+      } else
+        a.appendChild(this.createCell(e, t, r));
+    }) : i === "scrollable" ? s.getScrollableColumns().forEach((r) => {
+      if (r.field === "__drag") {
+        const d = p("div", "velox-row-drag-handle");
+        d.innerHTML = "☰", d.title = "드래그하여 행 순서 변경", d.addEventListener("mousedown", (l) => s.startRowDrag(l, t, a)), a.appendChild(d);
+      } else if (r.field === "__checkbox")
+        a.appendChild(this.createCheckbarCell(t));
+      else if (r.field === "__rownum") {
+        const d = p("div", "velox-cell velox-rownumber-cell");
+        d.textContent = String(t + 1), a.appendChild(d);
+      } else
+        a.appendChild(this.createCell(e, t, r));
+    }) : i === "fixedRight" && s.getFixedRightColumns().forEach(
+      (r) => a.appendChild(this.createCell(e, t, r))
+    ), a;
+  }
+  /**
+   * CheckBar 셀 생성
+   */
+  createCheckbarCell(e) {
+    const t = this.ctx, i = t.getOptions(), s = t.getState(), n = p("div", "velox-cell velox-checkbox-cell"), o = i.checkBar, a = s.checkBar.checkableRows.has(e), r = s.checkBar.checkedRows.has(e), d = p("input", "velox-checkbox");
+    return d.type = o.exclusive ? "radio" : "checkbox", d.name = o.exclusive ? `${t.getGridId()}-check` : "", d.checked = r, d.disabled = !a, a || x(n, "velox-checkbox-cell--disabled"), d.addEventListener("click", (l) => {
+      console.log("✅ Checkbox clicked", { rowIndex: e, checked: d.checked }), l.stopPropagation();
+    }), d.addEventListener("change", () => {
+      if (console.log("🔄 Checkbox changed", { rowIndex: e, checked: d.checked }), o.exclusive) {
+        const l = { ...t.getState().edit };
+        s.checkBar.checkedRows.clear(), d.checked && s.checkBar.checkedRows.add(e), this.render(), l.editing && l.rowIndex !== null && l.field !== null && (t.getState().edit = l, t.renderEditCell(l.rowIndex, l.field, l.originalValue)), t.emitEvent("onCheckChange", e, d.checked);
+      } else
+        t.checkItem(e, d.checked);
+    }), n.appendChild(d), n;
+  }
+  /**
+   * Cell 생성
+   */
+  createCell(e, t, i) {
+    const s = this.ctx, n = s.getOptions(), o = s.getState(), a = p("div", "velox-cell");
+    a.dataset.field = i.field, a.dataset.rowIndex = String(t);
+    const r = i.align || "left";
+    if (x(a, `velox-cell--align-${r}`), i.width ? (a.style.width = `${i.width}px`, a.style.minWidth = `${i.minWidth || i.width}px`, a.style.maxWidth = `${i.width}px`, a.style.flexShrink = "0") : (a.style.flex = "1", a.style.minWidth = `${i.minWidth || 100}px`), i.cellClass) {
+      const f = typeof i.cellClass == "function" ? i.cellClass(e[i.field], e) : i.cellClass;
+      f && x(a, f);
+    }
+    const d = `${t}:${i.field}`;
+    o.selection.selectedCells.has(d) && x(a, "velox-cell--selected");
+    const l = o.selection.focusedCell;
+    l && l.rowIndex === t && l.field === i.field && x(a, "velox-cell--focused"), n.editable && i.editable !== !1 && (x(a, "velox-cell--editable"), a.addEventListener("dblclick", (f) => {
+      if (a.classList.contains("velox-cell--editing")) {
+        console.log("🚫 Double click ignored - already editing"), f.stopPropagation(), f.preventDefault();
+        return;
+      }
+      console.log("🖱️🖱️ Double click detected", { rowIndex: t, field: i.field }), f.stopPropagation(), s.startEdit(t, i.field);
+    }));
+    const c = e[i.field], h = p("span", "velox-cell-content");
+    return i.renderer ? h.innerHTML = i.renderer(c, e, i) : i.formatter ? h.textContent = i.formatter(c, e, i) : h.textContent = D(c, i.type), a.appendChild(h), a.addEventListener("click", (f) => {
+      if (a.classList.contains("velox-cell--editing")) {
+        const g = f.target;
+        if (g.tagName === "INPUT" || g.tagName === "SELECT" || g.tagName === "BUTTON" || g.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;
+      }
+      s.handleCellClick(t, i.field, c, f);
+    }), a.addEventListener("mousedown", (f) => {
+      if (a.classList.contains("velox-cell--editing")) {
+        console.log("🔒 Cell mousedown - editing mode (ignored in renderer)");
+        return;
+      }
+      n.selectionStyle === "block" && f.button === 0 && s.startBlockSelection(t, i.field);
+    }), a.addEventListener("mouseenter", () => {
+      s.isBlockSelecting() && s.updateBlockSelection(t, i.field);
+    }), i.tooltip && (x(a, "velox-cell--has-tooltip"), a.addEventListener("mouseenter", () => s.showTooltip(a, c, e, i)), a.addEventListener("mouseleave", () => s.hideTooltip())), a;
+  }
+  /**
+   * Footer Summary 렌더링 (Phase 13, Phase 14: Fixed Right 지원)
+   */
+  renderFooter() {
+    var i, s;
+    const e = this.ctx, t = e.getOptions();
+    if ((i = t.footerSummary) != null && i.visible) {
+      if (e.fixedLeftFooter) {
+        e.fixedLeftFooter.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        if (t.rowDraggable) {
+          const o = p("div", "velox-row-drag-handle");
+          o.style.visibility = "hidden", n.appendChild(o);
+        }
+        if ((s = t.checkBar) != null && s.visible) {
+          const o = p("div", "velox-footer-cell velox-checkbox-cell");
+          n.appendChild(o);
+        }
+        e.getFixedLeftColumns().forEach(
+          (o) => n.appendChild(this.createFooterCell(o))
+        ), e.fixedLeftFooter.appendChild(n);
+      }
+      if (e.footerElement) {
+        e.footerElement.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        if (t.showRowNumbers) {
+          const o = p("div", "velox-footer-cell velox-rownumber-cell");
+          n.appendChild(o);
+        }
+        e.getScrollableColumns().forEach(
+          (o) => n.appendChild(this.createFooterCell(o))
+        ), e.footerElement.appendChild(n);
+      }
+      if (e.fixedRightFooter) {
+        e.fixedRightFooter.innerHTML = "";
+        const n = p("div", "velox-footer-row");
+        e.getFixedRightColumns().forEach(
+          (o) => n.appendChild(this.createFooterCell(o))
+        ), e.fixedRightFooter.appendChild(n);
+      }
+    }
+  }
+  /**
+   * Footer 셀 생성 (Phase 13)
+   */
+  createFooterCell(e) {
+    var a, r;
+    const t = this.ctx, i = t.getOptions(), s = p("div", "velox-footer-cell");
+    s.dataset.field = e.field;
+    const n = e.align || "left";
+    x(s, `velox-footer-cell--align-${n}`), e.width ? (s.style.width = `${e.width}px`, s.style.minWidth = `${e.minWidth || e.width}px`) : (s.style.flex = "1", s.style.minWidth = `${e.minWidth || 100}px`);
+    const o = ((r = (a = i.footerSummary) == null ? void 0 : a.columns) == null ? void 0 : r[e.field]) || e.summary;
+    if (o) {
+      const d = t.getSummaryValue(e.field), l = p("span", "velox-footer-content");
+      if (o.label) {
+        const h = p("span", "velox-footer-label");
+        h.textContent = o.label, l.appendChild(h);
+      }
+      const c = p("span", "velox-footer-value");
+      o.formatter ? c.textContent = o.formatter(d) : c.textContent = D(d, e.type), l.appendChild(c), s.appendChild(l), o.className && x(s, o.className);
+    }
+    return s;
+  }
+  /**
+   * Loading 상태 업데이트
+   */
+  updateLoadingState() {
+    const e = this.ctx, t = e.getOptions();
+    e.loadingOverlay && (e.loadingOverlay.style.display = t.loading ? "flex" : "none");
+  }
+  /**
+   * Row validation 상태 업데이트
+   */
+  updateRowValidationState(e) {
+    const t = this.ctx, i = t.getState(), s = t.rootElement.querySelector(`[data-row-index="${e}"]`);
+    if (!s) return;
+    s.querySelectorAll(".velox-cell").forEach((o) => {
+      const r = o.dataset.field;
+      if (!r) return;
+      const d = i.columns.find((l) => l.field === r);
+      d != null && d.validation;
+    });
+  }
+}
+class ue {
+  constructor(e) {
+    this.ctx = e, this.filterPopup = null, this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+  /**
+   * Filter 팝업 표시
+   */
+  showFilterPopup(e, t) {
+    var y;
+    this.closeFilterPopup();
+    const i = this.ctx, s = i.getState(), n = p("div", "velox-filter-popup"), o = t.getBoundingClientRect(), a = i.rootElement.getBoundingClientRect();
+    n.style.top = `${o.bottom - a.top + 5}px`, n.style.left = `${Math.max(0, o.left - a.left - 100)}px`;
+    const r = [...new Set(s.data.map((C) => C[e.field]))].filter((C) => C != null).sort(), d = (y = s.filter) == null ? void 0 : y.conditions.find((C) => C.field === e.field), l = 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((C) => {
+      const v = p("option");
+      v.value = C.value, v.textContent = C.label, (d == null ? void 0 : d.operator) === C.value && (v.selected = !0), l.appendChild(v);
+    }), n.appendChild(l);
+    const h = p("input", "velox-filter-input");
+    if (h.type = e.type === "number" ? "number" : "text", h.placeholder = "값 입력...", (d == null ? void 0 : d.value) !== void 0 && (h.value = String(d.value)), n.appendChild(h), r.length > 0 && r.length <= 15) {
+      const C = p("div", "velox-filter-list"), v = p("div", "velox-filter-list-label");
+      v.textContent = "빠른 선택:", C.appendChild(v), r.slice(0, 10).forEach((w) => {
+        const S = p("div", "velox-filter-list-item");
+        S.textContent = D(w, e.type), S.addEventListener("click", () => {
+          this.applyColumnFilter(e.field, "equals", w), this.closeFilterPopup();
+        }), C.appendChild(S);
+      }), n.appendChild(C);
+    }
+    const f = p("div", "velox-filter-buttons"), g = p("button", "velox-filter-apply");
+    g.textContent = "적용", g.addEventListener("click", () => {
+      const C = l.value, v = e.type === "number" ? parseFloat(h.value) : h.value;
+      this.applyColumnFilter(e.field, C, v), this.closeFilterPopup();
+    }), f.appendChild(g);
+    const m = p("button", "velox-filter-clear");
+    m.textContent = "해제", m.addEventListener("click", () => {
+      this.removeColumnFilter(e.field), this.closeFilterPopup();
+    }), f.appendChild(m), n.appendChild(f), this.filterPopup = n, i.rootElement.appendChild(n), setTimeout(() => document.addEventListener("click", this.boundHandleOutsideClick), 0), h.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, t, i) {
+    const s = this.ctx, n = s.getState(), o = { field: e, operator: t, value: i };
+    if (n.filter) {
+      const a = n.filter.conditions.filter((r) => r.field !== e);
+      a.push(o), n.filter = { conditions: a, logic: "and" };
+    } else
+      n.filter = { conditions: [o], logic: "and" };
+    s.clearSelectionState(), s.applyDataTransformations(), s.render(), s.emitEvent("onFilter", n.filter);
+  }
+  /**
+   * Column filter 제거
+   */
+  removeColumnFilter(e) {
+    const t = this.ctx, i = t.getState();
+    if (i.filter) {
+      const s = i.filter.conditions.filter((n) => n.field !== e);
+      i.filter = s.length === 0 ? null : { conditions: s, logic: "and" }, t.clearSelectionState(), t.applyDataTransformations(), t.render(), i.filter && t.emitEvent("onFilter", i.filter);
+    }
+  }
+  /**
+   * Filter 팝업이 열려있는지 확인
+   */
+  isOpen() {
+    return this.filterPopup !== null;
+  }
+}
+class fe {
+  constructor(e) {
+    this.ctx = e, this.columnMenuPopup = null, this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+  }
+  /**
+   * Column 메뉴 표시
+   */
+  showColumnMenu(e, t) {
+    this.closeColumnMenu();
+    const i = this.ctx, s = i.getOptions(), n = p("div", "velox-column-menu"), o = t.getBoundingClientRect(), a = i.rootElement.getBoundingClientRect();
+    n.style.top = `${o.bottom - a.top + 5}px`, n.style.left = `${o.left - a.left}px`;
+    const r = {
+      field: e.field,
+      column: e,
+      selectedRows: i.getSelectedRows(),
+      selectedCells: i.getSelectedCells(),
+      grid: i
+    }, d = s.contextMenu, l = (d == null ? void 0 : d.showDefaultItems) !== !1, c = (d == null ? void 0 : d.headerItems) || [], h = [
+      {
+        id: "sort-asc",
+        label: "오름차순 정렬",
+        icon: "↑",
+        action: () => i.sort(e.field, "asc")
+      },
+      {
+        id: "sort-desc",
+        label: "내림차순 정렬",
+        icon: "↓",
+        action: () => i.sort(e.field, "desc")
+      },
+      {
+        id: "sort-clear",
+        label: "정렬 해제",
+        icon: "✕",
+        action: () => i.clearSort()
+      },
+      { type: "separator" },
+      {
+        id: "hide",
+        label: "컬럼 숨기기",
+        icon: "👁",
+        action: () => i.hideColumn(e.field)
+      },
+      {
+        id: "autofit",
+        label: "컬럼 너비 자동",
+        icon: "↔",
+        action: () => i.autoFitColumn(e.field)
+      },
+      {
+        id: "autofit-all",
+        label: "모든 컬럼 자동",
+        icon: "⇔",
+        action: () => i.autoFitAllColumns()
+      },
+      { type: "separator" },
+      {
+        id: "fix-left",
+        label: "왼쪽에 고정",
+        icon: "◀",
+        action: () => i.fixColumn(e.field, "left")
+      },
+      {
+        id: "unfix",
+        label: "고정 해제",
+        icon: "◇",
+        action: () => i.fixColumn(e.field, !1)
+      }
+    ];
+    let f = [];
+    l ? (f = [...h], c.length > 0 && (f.push({ type: "separator" }), f.push(...c))) : f = c, f.forEach((g) => {
+      if (typeof g.visible == "function" ? g.visible(r) : g.visible !== !1)
+        if (g.type === "separator") {
+          const y = p("div", "velox-column-menu-separator");
+          n.appendChild(y);
+        } else {
+          const y = p("div", "velox-column-menu-item");
+          g.className && x(y, g.className);
+          const C = typeof g.disabled == "function" ? g.disabled(r) : g.disabled === !0;
+          C && x(y, "velox-column-menu-item--disabled");
+          let v = "";
+          g.icon && (v += `<span class="velox-column-menu-icon">${g.icon}</span>`), v += `<span class="velox-column-menu-label">${g.label || ""}</span>`, g.shortcut && (v += `<span class="velox-column-menu-shortcut">${g.shortcut}</span>`), y.innerHTML = v, C || y.addEventListener("click", () => {
+            var w;
+            (w = g.action) == null || w.call(g, r), this.closeColumnMenu();
+          }), n.appendChild(y);
+        }
+    }), this.columnMenuPopup = n, i.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 pe {
+  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, t) {
+    e.preventDefault(), e.stopPropagation(), this.columnDragging = {
+      field: t.field,
+      startX: e.clientX,
+      element: null
+    };
+    const i = p("div", "velox-column-drag-indicator");
+    i.textContent = t.header, i.style.position = "fixed", i.style.left = `${e.clientX}px`, i.style.top = `${e.clientY}px`, document.body.appendChild(i), this.columnDragging.element = i, document.addEventListener("mousemove", this.boundHandleColumnDragMove), document.addEventListener("mouseup", this.boundHandleColumnDragEnd), x(document.body, "velox-no-select");
+  }
+  /**
+   * Column 드래그 이동
+   */
+  handleColumnDragMove(e) {
+    var n;
+    const t = 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 i = document.elementFromPoint(e.clientX, e.clientY), s = i == null ? void 0 : i.closest(".velox-header-cell");
+    t.headerElement.querySelectorAll(".velox-header-cell--drop-target").forEach((o) => {
+      b(o, "velox-header-cell--drop-target");
+    }), s && s.dataset.field !== this.columnDragging.field && x(s, "velox-header-cell--drop-target");
+  }
+  /**
+   * Column 드래그 종료
+   */
+  handleColumnDragEnd(e) {
+    const t = this.ctx;
+    if (!this.columnDragging) return;
+    const i = this.columnDragging.field, s = document.elementFromPoint(e.clientX, e.clientY), n = s == null ? void 0 : s.closest(".velox-header-cell"), o = n == null ? void 0 : n.dataset.field;
+    this.columnDragging.element && this.columnDragging.element.remove(), t.headerElement.querySelectorAll(".velox-header-cell--drop-target").forEach((a) => {
+      b(a, "velox-header-cell--drop-target");
+    }), document.removeEventListener("mousemove", this.boundHandleColumnDragMove), document.removeEventListener("mouseup", this.boundHandleColumnDragEnd), b(document.body, "velox-no-select"), o && o !== i && t.reorderColumn(i, o), this.columnDragging = null;
+  }
+  /**
+   * Column 드래그 중인지 확인
+   */
+  isColumnDragging() {
+    return this.columnDragging !== null;
+  }
+  // ============================================
+  // Row Drag & Drop
+  // ============================================
+  /**
+   * Row 드래그 시작
+   */
+  startRowDrag(e, t, i) {
+    e.preventDefault(), e.stopPropagation(), this.rowDragging = {
+      index: t,
+      startY: e.clientY,
+      element: null
+    };
+    const s = p("div", "velox-row-drag-indicator");
+    s.textContent = `행 ${t + 1}`, s.style.position = "fixed", s.style.left = `${e.clientX}px`, s.style.top = `${e.clientY}px`, document.body.appendChild(s), this.rowDragging.element = s, x(i, "velox-row--dragging"), document.addEventListener("mousemove", this.boundHandleRowDragMove), document.addEventListener("mouseup", this.boundHandleRowDragEnd), x(document.body, "velox-no-select");
+  }
+  /**
+   * Row 드래그 이동
+   */
+  handleRowDragMove(e) {
+    var n, o;
+    const t = 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 i = document.elementFromPoint(e.clientX, e.clientY), s = i == null ? void 0 : i.closest(".velox-row");
+    if (t.bodyInner.querySelectorAll(".velox-row--drop-target").forEach((a) => {
+      b(a, "velox-row--drop-target");
+    }), (o = t.fixedLeftBodyInner) == null || o.querySelectorAll(".velox-row--drop-target").forEach((a) => {
+      b(a, "velox-row--drop-target");
+    }), s) {
+      const a = parseInt(s.dataset.rowIndex || "-1", 10);
+      a !== -1 && a !== this.rowDragging.index && x(s, "velox-row--drop-target");
+    }
+  }
+  /**
+   * Row 드래그 종료
+   */
+  handleRowDragEnd(e) {
+    var a;
+    const t = this.ctx;
+    if (!this.rowDragging) return;
+    const i = this.rowDragging.index, s = document.elementFromPoint(e.clientX, e.clientY), n = s == null ? void 0 : s.closest(".velox-row"), o = n ? parseInt(n.dataset.rowIndex || "-1", 10) : -1;
+    this.rowDragging.element && this.rowDragging.element.remove(), t.bodyInner.querySelectorAll(".velox-row--dragging, .velox-row--drop-target").forEach((r) => {
+      b(r, "velox-row--dragging"), b(r, "velox-row--drop-target");
+    }), (a = t.fixedLeftBodyInner) == null || a.querySelectorAll(".velox-row--dragging, .velox-row--drop-target").forEach((r) => {
+      b(r, "velox-row--dragging"), b(r, "velox-row--drop-target");
+    }), document.removeEventListener("mousemove", this.boundHandleRowDragMove), document.removeEventListener("mouseup", this.boundHandleRowDragEnd), b(document.body, "velox-no-select"), o !== -1 && o !== i && t.moveRow(i, o), this.rowDragging = null;
+  }
+  /**
+   * Row 드래그 중인지 확인
+   */
+  isRowDragging() {
+    return this.rowDragging !== null;
+  }
+  // ============================================
+  // Column Resize
+  // ============================================
+  /**
+   * Column 리사이즈 시작
+   */
+  startResize(e, t) {
+    const i = this.ctx;
+    e.preventDefault(), e.stopPropagation();
+    const s = i.headerElement.querySelector(`[data-field="${t.field}"]`);
+    s && (this.resizing = {
+      column: t,
+      startX: e.clientX,
+      startWidth: s.offsetWidth
+    }, document.addEventListener("mousemove", this.boundHandleResizeMove), document.addEventListener("mouseup", this.boundHandleResizeEnd), x(document.body, "velox-no-select"));
+  }
+  /**
+   * Column 리사이즈 이동
+   */
+  handleResizeMove(e) {
+    const t = this.ctx;
+    if (!this.resizing) return;
+    const i = e.clientX - this.resizing.startX, s = Math.max(50, this.resizing.startWidth + i);
+    this.resizing.column.width = s, t.invalidateColumnCache(), t.render();
+  }
+  /**
+   * Column 리사이즈 종료
+   */
+  handleResizeEnd() {
+    const e = this.ctx;
+    this.resizing && (document.removeEventListener("mousemove", this.boundHandleResizeMove), document.removeEventListener("mouseup", this.boundHandleResizeEnd), b(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), b(document.body, "velox-no-select");
+  }
+  /**
+   * 리소스 정리 (destroy 별칭)
+   */
+  destroy() {
+    this.cleanup();
+  }
+}
+class ge {
+  constructor(e) {
+    this.context = e, this.summaryCache = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Footer Summary 값 계산
+   * @param field 컬럼 필드명
+   * @returns 계산된 집계 값
+   */
+  calculateFooterSummary(e) {
+    var c, h;
+    const t = this.context.getOptions(), i = this.context.getState().columns.find((f) => f.field === e);
+    if (!i) return null;
+    const s = i.summary || ((h = (c = t.footerSummary) == null ? void 0 : c.columns) == null ? void 0 : h[e]);
+    if (!s) return null;
+    const n = `footer:${e}`;
+    if (this.summaryCache.has(n))
+      return this.summaryCache.get(n);
+    const o = this.context.getDisplayData(), a = o.map((f) => f[e]), r = this.executeAggregation(s, a, o), d = this.formatSummaryValue(r, s, i), l = {
+      field: e,
+      function: s.function,
+      value: r,
+      formattedValue: d
+    };
+    return this.summaryCache.set(n, l), l;
+  }
+  /**
+   * 모든 Footer Summary 값 계산
+   * @returns field -> SummaryResult 맵
+   */
+  calculateAllFooterSummaries() {
+    var s;
+    const e = this.context.getOptions(), t = /* @__PURE__ */ new Map();
+    return (s = e.footerSummary) != null && s.visible && this.context.getVisibleColumns().forEach((n) => {
+      const o = this.calculateFooterSummary(n.field);
+      o && t.set(n.field, o);
+    }), t;
+  }
+  /**
+   * Group Summary 값 계산
+   * @param field 컬럼 필드명
+   * @param _groupValue 그룹 값 (reserved for future use)
+   * @param groupData 그룹 데이터
+   * @returns 계산된 집계 값
+   */
+  calculateGroupSummary(e, t, i) {
+    var l, c;
+    const s = this.context.getOptions(), n = this.context.getState().columns.find((h) => h.field === e);
+    if (!n || !((l = s.groupSummary) != null && l.enabled)) return null;
+    const o = (c = s.groupSummary.columns) == null ? void 0 : c[e];
+    if (!o) return null;
+    const a = i.map((h) => h[e]), r = this.executeAggregation(o, a, i), d = this.formatSummaryValue(r, o, n);
+    return {
+      field: e,
+      function: o.function,
+      value: r,
+      formattedValue: d
+    };
+  }
+  /**
+   * 집계 함수 실행
+   * @param config Summary 설정
+   * @param values 값 배열
+   * @param data 원본 데이터 배열
+   * @returns 집계된 값
+   */
+  executeAggregation(e, t, i) {
+    const s = t.filter((n) => n != null);
+    switch (e.function) {
+      case "sum":
+        return this.calculateSum(s);
+      case "avg":
+        return this.calculateAverage(s);
+      case "count":
+        return this.calculateCount(s);
+      case "min":
+        return this.calculateMin(s);
+      case "max":
+        return this.calculateMax(s);
+      case "custom":
+        return e.customFunction ? e.customFunction(t, i) : null;
+      default:
+        return null;
+    }
+  }
+  /**
+   * 합계 계산
+   */
+  calculateSum(e) {
+    return e.reduce((t, i) => {
+      const s = this.toNumber(i);
+      return t + (s !== null ? s : 0);
+    }, 0);
+  }
+  /**
+   * 평균 계산
+   */
+  calculateAverage(e) {
+    if (e.length === 0) return null;
+    const t = this.calculateSum(e), i = e.filter((s) => this.toNumber(s) !== null).length;
+    return i > 0 ? t / i : null;
+  }
+  /**
+   * 개수 계산
+   */
+  calculateCount(e) {
+    return e.length;
+  }
+  /**
+   * 최소값 계산
+   */
+  calculateMin(e) {
+    const t = e.map((i) => this.toNumber(i)).filter((i) => i !== null);
+    return t.length > 0 ? Math.min(...t) : null;
+  }
+  /**
+   * 최대값 계산
+   */
+  calculateMax(e) {
+    const t = e.map((i) => this.toNumber(i)).filter((i) => i !== null);
+    return t.length > 0 ? Math.max(...t) : null;
+  }
+  /**
+   * CellValue를 숫자로 변환
+   */
+  toNumber(e) {
+    if (typeof e == "number") return e;
+    if (typeof e == "string") {
+      const t = e.replace(/,/g, ""), i = parseFloat(t);
+      return isNaN(i) ? null : i;
+    }
+    return typeof e == "boolean" ? e ? 1 : 0 : null;
+  }
+  /**
+   * Summary 값 포맷팅
+   */
+  formatSummaryValue(e, t, i) {
+    return t.formatter ? t.formatter(e) : i.formatter ? i.formatter(e, {}, i) : e == null ? "" : typeof e == "number" ? t.format ? this.applyNumberFormat(e, t.format) : this.formatNumber(e) : String(e);
+  }
+  /**
+   * 숫자 포맷 적용
+   * @param value 숫자 값
+   * @param format 포맷 문자열 (예: '0,0.00')
+   */
+  applyNumberFormat(e, t) {
+    const i = t.includes(","), s = t.match(/\.(\d+)/), n = s ? s[1].length : 0;
+    let o = e.toFixed(n);
+    if (i) {
+      const a = o.split(".");
+      a[0] = a[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","), o = a.join(".");
+    }
+    return o;
+  }
+  /**
+   * 기본 숫자 포맷팅
+   */
+  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 t = this.calculateFooterSummary(e);
+    return (t == null ? void 0 : t.value) ?? null;
+  }
+  /**
+   * 모든 Summary 값 가져오기
+   */
+  getAllSummaryValues() {
+    const e = this.calculateAllFooterSummaries(), t = {};
+    return e.forEach((i, s) => {
+      t[s] = i.value;
+    }), t;
+  }
+}
+const me = {
+  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
+}, I = {
+  visible: !1,
+  exclusive: !1,
+  showAll: !0
+};
+class $ {
+  constructor(e, t, i = {}) {
+    var s, n, o, a, r;
+    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 d = document.querySelector(e);
+      if (!d) throw new Error(`Container not found: ${e}`);
+      this.container = d;
+    } else
+      this.container = e;
+    this.options = { ...me, ...t }, this.options.checkBar ? this.options.checkBar = { ...I, ...this.options.checkBar } : this.options.showCheckbox && (this.options.checkBar = { ...I, visible: !0 }), this.events = i, this.gridId = G("velox-grid"), this.boundHandleBlockSelectionEnd = this.handleBlockSelectionEnd.bind(this), this.boundHandleKeyDown = this.handleKeyDown.bind(this), this.history = new ae({
+      enabled: this.options.undoable ?? !0,
+      maxSize: this.options.undoStackSize ?? 50
+    }), this.renderer = new he(this), this.filterPopupManager = new ue(this), this.columnMenuManager = new fe(this), this.dragManager = new pe(this), this.summary = new ge(this), this.state = {
+      data: [],
+      displayData: [],
+      columns: this.options.columns.map((d) => ({ ...d })),
+      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: ((s = this.options.pagination) == null ? void 0 : s.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((d) => ({ ...d })), this.rebuildDataIndexMap(), this.state.displayData = [...this.state.data], this.initCheckableRows(), this.state.data.forEach((d) => {
+      this.state.rowStates.set(d, "none");
+    })), this.build(), this.tooltip = new ce(this.rootElement), (o = this.options.pagination) != null && o.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(), (r = (a = this.events).onReady) == null || r.call(a, this);
+  }
+  // GridContext: Data index methods (public for module access)
+  rebuildDataIndexMap() {
+    this.dataIndexMap.clear(), this.state.data.forEach((e, t) => {
+      this.dataIndexMap.set(e, t);
+    });
+  }
+  initCheckableRows() {
+    this.state.checkBar.checkableRows.clear();
+    const e = this.options.checkBar;
+    this.state.displayData.forEach((t, i) => {
+      e != null && e.checkableCallback ? e.checkableCallback(t, i) && this.state.checkBar.checkableRows.add(i) : this.state.checkBar.checkableRows.add(i);
+    });
+  }
+  // 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 t;
+    const e = [];
+    if (typeof this.options.rowDraggable == "object" && this.options.rowDraggable.enabled) {
+      const i = this.options.rowDraggable.displayOrder ?? 0;
+      e.push({
+        col: { field: "__drag", header: "", width: 44, visible: !0 },
+        order: i
+      });
+    } else this.options.rowDraggable === !0 && e.push({
+      col: { field: "__drag", header: "", width: 44, visible: !0 },
+      order: 0
+      // default order
+    });
+    if ((t = this.options.checkBar) != null && t.visible) {
+      const i = this.options.checkBar.displayOrder ?? 10;
+      e.push({
+        col: { field: "__checkbox", header: "", width: 44, visible: !0 },
+        order: i
+      });
+    }
+    if (typeof this.options.showRowNumbers == "object" && this.options.showRowNumbers.visible) {
+      const i = this.options.showRowNumbers.displayOrder ?? 20;
+      e.push({
+        col: { field: "__rownum", header: "#", width: 50, visible: !0 },
+        order: i
+      });
+    } else this.options.showRowNumbers === !0 && e.push({
+      col: { field: "__rownum", header: "#", width: 50, visible: !0 },
+      order: 20
+      // default order
+    });
+    return e.sort((i, s) => i.order - s.order), e.map((i) => i.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 t = this.getSpecialColumnsWithOrder(), s = this.getDataColumns().slice(0, e);
+        this.columnCache.fixedLeft = [...t, ...s];
+      } 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 || {}, t = this.getDataColumns(), i = t.length;
+      this.columnCache.fixedRight = e > 0 ? t.slice(i - 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: t = 0 } = this.options.fixedOptions || {}, i = this.getDataColumns(), s = i.length;
+      if (e === 0) {
+        const n = this.getSpecialColumnsWithOrder(), o = s - t, a = o > 0 ? i.slice(0, o) : [];
+        this.columnCache.scrollable = [...n, ...a];
+      } else {
+        const n = e, o = s - t;
+        this.columnCache.scrollable = n < o ? i.slice(n, o) : [];
+      }
+      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 i, s, n, o;
+    this.rootElement = p("div", "velox-grid"), this.rootElement.id = this.gridId, this.rootElement.tabIndex = 0, this.options.className && x(this.rootElement, this.options.className), this.hasFixedRight() && x(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), (i = this.options.footerSummary) != null && i.visible && (this.fixedLeftFooter = p("div", "velox-footer velox-footer--fixed"), this.fixedLeftContainer.appendChild(this.fixedLeftFooter)), e.appendChild(this.fixedLeftContainer));
+    const t = 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), t.appendChild(this.headerElement), t.appendChild(this.bodyElement), (s = this.options.footerSummary) != null && s.visible && (this.footerElement = p("div", "velox-footer"), t.appendChild(this.footerElement)), e.appendChild(t), 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), (o = this.options.pagination) != null && o.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"), t = p("div", "velox-loading-message");
+    t.textContent = this.options.loadingMessage || "로딩 중...", this.loadingOverlay.appendChild(e), this.loadingOverlay.appendChild(t), 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, t = this.bodyElement.clientHeight, i = this.bodyElement.scrollTop, s = this.options.bufferSize || 5;
+    this.virtualState.visibleCount = Math.ceil(t / e), this.virtualState.startIndex = Math.max(0, Math.floor(i / e) - s), this.virtualState.endIndex = Math.min(
+      this.state.displayData.length,
+      this.virtualState.startIndex + this.virtualState.visibleCount + s * 2
+    ), this.virtualState.totalHeight = this.state.displayData.length * e;
+  }
+  getVisibleRows() {
+    if (!this.options.virtualScroll)
+      return this.state.displayData.map((t, i) => ({ data: t, index: i }));
+    this.calculateVirtualState();
+    const e = [];
+    for (let t = this.virtualState.startIndex; t < this.virtualState.endIndex; t++)
+      this.state.displayData[t] && e.push({ data: this.state.displayData[t], index: t });
+    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, t) {
+    this.filterPopupManager.showFilterPopup(e, t);
+  }
+  closeFilterPopup() {
+    this.filterPopupManager.closeFilterPopup();
+  }
+  applyColumnFilter(e, t, i) {
+    this.filterPopupManager.applyColumnFilter(e, t, i);
+  }
+  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, t = null;
+    const i = (n) => {
+      var r, d;
+      if (e || t !== null) return;
+      t = window.setTimeout(() => {
+        t = null;
+      }, 16), e = !0;
+      const o = n === "fixedRight" && this.fixedRightBody ? this.fixedRightBody.scrollTop : this.bodyElement.scrollTop, a = this.bodyElement.scrollLeft;
+      this.state.scroll.top = o, this.state.scroll.left = a, this.fixedLeftBody && this.fixedLeftBody.scrollTop !== o && (this.fixedLeftBody.scrollTop = o), n !== "fixedRight" && this.fixedRightBody && this.fixedRightBody.scrollTop !== o && (this.fixedRightBody.scrollTop = o), n !== "body" && this.bodyElement.scrollTop !== o && (this.bodyElement.scrollTop = o), this.headerElement.scrollLeft !== a && (this.headerElement.scrollLeft = a), this.footerElement && this.footerElement.scrollLeft !== a && (this.footerElement.scrollLeft = a), this.options.virtualScroll && this.renderBody(), (d = (r = this.events).onScroll) == null || d.call(r, this.state.scroll.top, this.state.scroll.left), (n === "body" || n === "fixedRight") && this.checkInfiniteScroll(), e = !1;
+    }, s = X(() => {
+      const n = this.headerElement.scrollLeft;
+      this.bodyElement.scrollLeft = n, this.footerElement && (this.footerElement.scrollLeft = n);
+    }, 16);
+    if (this.hasFixedRight()) {
+      this.wheelHandler = (a) => {
+        a.preventDefault(), this.fixedRightBody && (this.fixedRightBody.scrollTop += a.deltaY);
+      }, this.bodyElement.addEventListener("wheel", this.wheelHandler, { passive: !1 });
+      const n = () => i("fixedRight");
+      this.fixedRightBody.addEventListener("scroll", n), this.scrollHandlers.push(n);
+      const o = () => i("body");
+      this.bodyElement.addEventListener("scroll", o), this.scrollHandlers.push(o);
+    } else {
+      const n = () => i("body");
+      this.bodyElement.addEventListener("scroll", n), this.scrollHandlers.push(n);
+    }
+    this.headerElement.addEventListener("scroll", s), this.scrollHandlers.push(s), document.addEventListener("mouseup", this.boundHandleBlockSelectionEnd), this.rootElement.addEventListener("keydown", this.boundHandleKeyDown);
+  }
+  handleSort(e) {
+    var s, n, o;
+    const t = this.state.sort.findIndex((a) => a.field === e);
+    let i = "asc";
+    if (t >= 0) {
+      const a = this.state.sort[t].direction;
+      a === "asc" ? i = "desc" : a === "desc" && (i = null);
+    }
+    this.state.sort = i ? [{ field: e, direction: i }] : [], this.clearSelectionState(), this.applyDataTransformations(), (!this.isRemoteDataSource() || !((s = this.options.pagination) != null && s.enabled)) && this.render(), (o = (n = this.events).onSort) == null || o.call(n, this.state.sort);
+  }
+  // GridContext: Event handlers (public for module access)
+  handleRowClick(e, t) {
+    var s, n;
+    if (!this.options.selectable) return;
+    (this.options.selectionStyle || "row") === "row" && this.handleRowSelection(e, t), (n = (s = this.events).onRowClick) == null || n.call(s, e, this.state.displayData[e]);
+  }
+  handleRowSelection(e, t) {
+    var s, n;
+    const i = this.options.selectionMode || "multiple";
+    if (i !== "none")
+      if (i === "multiple" && (t.ctrlKey || t.metaKey)) {
+        const o = this.state.selection.selectedRows.has(e);
+        this.selectRow(e, !o);
+      } else if (i === "multiple" && t.shiftKey) {
+        const o = Array.from(this.state.selection.selectedRows);
+        if (o.length > 0) {
+          const a = o[o.length - 1], r = Math.min(a, e), d = Math.max(a, e);
+          for (let l = r; l <= d; l++) this.state.selection.selectedRows.add(l);
+          this.render(), (n = (s = this.events).onSelectionChange) == null || n.call(s, this.getSelectedRows());
+        } else
+          this.selectRow(e, !0);
+      } else if (i === "extended" && (t.ctrlKey || t.metaKey)) {
+        const o = this.state.selection.selectedRows.has(e);
+        this.selectRow(e, !o);
+      } else
+        this.state.selection.selectedRows.clear(), this.selectRow(e, !0);
+  }
+  handleCellClick(e, t, i, s) {
+    var o, a;
+    if (console.log("🔍 handleCellClick", { rowIndex: e, field: t, 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 === t) {
+      console.log("✅ Same cell clicked - maintaining edit mode");
+      return;
+    }
+    const n = this.options.selectionStyle || "row";
+    n === "cell" || n === "block" ? this.handleCellSelection(e, t, s) : n === "row" && (this.state.selection.focusedCell = { rowIndex: e, field: t }), (a = (o = this.events).onCellClick) == null || a.call(o, e, t, i);
+  }
+  handleCellSelection(e, t, i) {
+    var o, a;
+    const s = this.options.selectionMode || "multiple", n = `${e}:${t}`;
+    if (s !== "none") {
+      if (this.state.selection.focusedCell = { rowIndex: e, field: t }, s === "multiple" && (i.ctrlKey || i.metaKey))
+        this.state.selection.selectedCells.has(n) ? this.state.selection.selectedCells.delete(n) : this.state.selection.selectedCells.add(n);
+      else if (s === "multiple" && i.shiftKey) {
+        const r = this.state.selection.focusedCell;
+        r && this.selectCellRange(r.rowIndex, r.field, e, t);
+      } else
+        this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(n);
+      this.render(), (a = (o = this.events).onCellSelectionChange) == null || a.call(o, this.getSelectedCells());
+    }
+  }
+  selectCellRange(e, t, i, s) {
+    const n = this.getVisibleColumns(), o = n.findIndex((h) => h.field === t), a = n.findIndex((h) => h.field === s), r = Math.min(e, i), d = Math.max(e, i), l = Math.min(o, a), c = Math.max(o, a);
+    this.state.selection.selectedCells.clear();
+    for (let h = r; h <= d; h++)
+      for (let f = l; f <= c; f++) {
+        const g = n[f].field;
+        this.state.selection.selectedCells.add(`${h}:${g}`);
+      }
+  }
+  // GridContext: Block selection methods (public for module access)
+  startBlockSelection(e, t) {
+    this.options.selectionStyle === "block" && (this.blockSelecting = { startRow: e, startField: t }, this.state.selection.focusedCell = { rowIndex: e, field: t }, this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${e}:${t}`), this.render());
+  }
+  updateBlockSelection(e, t) {
+    this.blockSelecting && (this.selectCellRange(
+      this.blockSelecting.startRow,
+      this.blockSelecting.startField,
+      e,
+      t
+    ), this.render());
+  }
+  handleBlockSelectionEnd() {
+    var e, t;
+    this.blockSelecting && (this.blockSelecting = null, (t = (e = this.events).onCellSelectionChange) == null || t.call(e, this.getSelectedCells()));
+  }
+  handleRowDoubleClick(e, t) {
+    var i, s;
+    (s = (i = this.events).onRowDoubleClick) == null || s.call(i, e, this.state.displayData[e]);
+  }
+  handleKeyDown(e) {
+    var r, d, l, c;
+    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 t = this.state.selection.focusedCell;
+    if (!this.state.edit.editing && this.options.editable && t) {
+      const h = this.state.columns.find((f) => f.field === t.field);
+      if ((h == null ? void 0 : h.editable) !== !1 && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        e.preventDefault(), this.startEdit(t.rowIndex, t.field), setTimeout(() => {
+          const f = document.querySelector(".velox-edit-input");
+          f && (f.value = e.key, f.setSelectionRange(1, 1));
+        }, 0);
+        return;
+      }
+    }
+    if ((d = (r = this.events).onKeyDown) == null || d.call(r, e, t), !t) return;
+    const i = this.getVisibleColumns(), s = i.findIndex((h) => h.field === t.field);
+    let n = t.rowIndex, o = s, a = !1;
+    switch (e.key) {
+      case "ArrowUp":
+        n > 0 && (n--, a = !0);
+        break;
+      case "ArrowDown":
+        n < this.state.displayData.length - 1 && (n++, a = !0);
+        break;
+      case "ArrowLeft":
+        o > 0 && (o--, a = !0);
+        break;
+      case "ArrowRight":
+        o < i.length - 1 && (o++, a = !0);
+        break;
+      case "Tab":
+        e.shiftKey ? o > 0 ? o-- : n > 0 && (n--, o = i.length - 1) : o < i.length - 1 ? o++ : n < this.state.displayData.length - 1 && (n++, o = 0), a = !0;
+        break;
+      case "Home":
+        e.ctrlKey && (n = 0), o = 0, a = !0;
+        break;
+      case "End":
+        e.ctrlKey && (n = this.state.displayData.length - 1), o = i.length - 1, a = !0;
+        break;
+      case "PageUp":
+        n = Math.max(0, n - this.virtualState.visibleCount), a = !0;
+        break;
+      case "PageDown":
+        n = Math.min(this.state.displayData.length - 1, n + this.virtualState.visibleCount), a = !0;
+        break;
+      case "Enter":
+      case "F2":
+        this.options.editable && (this.startEdit(t.rowIndex, t.field), a = !0);
+        break;
+      case " ":
+        (l = this.options.checkBar) != null && l.visible && (this.checkItem(t.rowIndex, !this.isItemChecked(t.rowIndex)), a = !0);
+        break;
+      case "a":
+      case "A":
+        (e.ctrlKey || e.metaKey) && (this.selectAllCells(), a = !0);
+        break;
+    }
+    if (a) {
+      e.preventDefault();
+      const h = (c = i[o]) == null ? void 0 : c.field;
+      h && (n !== t.rowIndex || h !== t.field) && (this.setFocusedCell(n, h), e.shiftKey && (this.options.selectionStyle === "cell" || this.options.selectionStyle === "block") ? this.selectCellRange(t.rowIndex, t.field, n, h) : !e.shiftKey && !e.ctrlKey && (this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${n}:${h}`), this.options.selectionStyle === "row" && (this.state.selection.selectedRows.clear(), this.state.selection.selectedRows.add(n))), this.render(), this.scrollToCell(n, h));
+    }
+  }
+  selectAllCells() {
+    var t, i;
+    const e = this.getVisibleColumns();
+    this.state.selection.selectedCells.clear();
+    for (let s = 0; s < this.state.displayData.length; s++)
+      for (const n of e)
+        this.state.selection.selectedCells.add(`${s}:${n.field}`);
+    this.render(), (i = (t = this.events).onCellSelectionChange) == null || i.call(t, this.getSelectedCells());
+  }
+  // GridContext: Resize methods - delegated to GridDragManager
+  startResize(e, t) {
+    this.dragManager.startResize(e, t);
+  }
+  // GridContext: Data transformation (public for module access)
+  applyDataTransformations() {
+    var t;
+    if ((t = this.options.pagination) != null && t.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 = B(e, this.state.filter)), this.state.sort.length > 0) {
+      const i = {};
+      this.state.columns.forEach((s) => {
+        i[s.field] = s.type || "text";
+      }), e = M(e, this.state.sort, i);
+    }
+    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 t, i, s;
+    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");
+    }), (t = this.options.pagination) != null && t.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(), (s = (i = this.events).onDataChange) == null || s.call(i, 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, t) {
+    var n, o, a, r;
+    const i = { ...e }, s = t !== void 0 ? t : this.state.data.length;
+    this.state.data.splice(s, 0, i), this.rebuildDataIndexMap(), this.state.rowStates.set(i, "created"), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (o = (n = this.events).onRowAdd) == null || o.call(n, i, s), (r = (a = this.events).onDataChange) == null || r.call(a, this.state.data);
+  }
+  updateRow(e, t) {
+    var n, o, a, r;
+    const i = this.state.displayData[e];
+    if (!i) return;
+    const s = this.state.data.indexOf(i);
+    s >= 0 && (Object.assign(this.state.data[s], t), (this.state.rowStates.get(this.state.data[s]) || "none") === "none" && this.state.rowStates.set(this.state.data[s], "updated"), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (o = (n = this.events).onRowUpdate) == null || o.call(n, this.state.data[s], e, t), (r = (a = this.events).onDataChange) == null || r.call(a, this.state.data));
+  }
+  removeRow(e) {
+    var s, n, o, a;
+    const t = this.state.displayData[e];
+    if (!t) return;
+    const i = this.state.data.indexOf(t);
+    if (i >= 0) {
+      const r = this.state.data[i];
+      (this.state.rowStates.get(r) || "none") === "created" ? this.state.rowStates.set(r, "createAndDeleted") : this.state.rowStates.set(r, "deleted"), this.state.data.splice(i, 1), this.rebuildDataIndexMap(), this.state.selection.selectedRows.delete(e);
+      const l = /* @__PURE__ */ new Set();
+      this.state.selection.selectedRows.forEach((h) => {
+        h > e ? l.add(h - 1) : h < e && l.add(h);
+      }), this.state.selection.selectedRows = l, this.state.checkBar.checkedRows.delete(e);
+      const c = /* @__PURE__ */ new Set();
+      this.state.checkBar.checkedRows.forEach((h) => {
+        h > e ? c.add(h - 1) : h < e && c.add(h);
+      }), this.state.checkBar.checkedRows = c, this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (n = (s = this.events).onRowRemove) == null || n.call(s, r, e), (a = (o = this.events).onDataChange) == null || a.call(o, this.state.data);
+    }
+  }
+  clearData() {
+    var e, t;
+    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(), (t = (e = this.events).onDataChange) == null || t.call(e, []);
+  }
+  // --- Public API: Row Selection ---
+  getSelectedRows() {
+    return Array.from(this.state.selection.selectedRows).sort((e, t) => e - t);
+  }
+  getSelectedData() {
+    return this.getSelectedRows().map((e) => this.state.displayData[e]).filter(Boolean).map((e) => ({ ...e }));
+  }
+  selectRow(e, t = !0) {
+    var i, s, n, o;
+    t ? (this.options.selectionMode === "single" && this.state.selection.selectedRows.clear(), this.state.selection.selectedRows.add(e)) : this.state.selection.selectedRows.delete(e), this.render(), (s = (i = this.events).onRowSelect) == null || s.call(i, e, t), (o = (n = this.events).onSelectionChange) == null || o.call(n, this.getSelectedRows());
+  }
+  selectAll(e = !0) {
+    var t, i, s, n;
+    if (e)
+      for (let o = 0; o < this.state.displayData.length; o++)
+        this.state.selection.selectedRows.add(o);
+    else
+      this.state.selection.selectedRows.clear();
+    this.render(), (i = (t = this.events).onAllSelect) == null || i.call(t, e), (n = (s = this.events).onSelectionChange) == null || n.call(s, this.getSelectedRows());
+  }
+  clearSelection() {
+    var e, t, i, s;
+    this.clearSelectionState(), this.render(), (t = (e = this.events).onSelectionChange) == null || t.call(e, []), (s = (i = this.events).onCellSelectionChange) == null || s.call(i, []);
+  }
+  isRowSelected(e) {
+    return this.state.selection.selectedRows.has(e);
+  }
+  // --- Public API: Cell Selection ---
+  selectCell(e, t, i = !0) {
+    var n, o, a, r;
+    const s = `${e}:${t}`;
+    i ? this.state.selection.selectedCells.add(s) : this.state.selection.selectedCells.delete(s), this.render(), (o = (n = this.events).onCellSelect) == null || o.call(n, { rowIndex: e, field: t }, i), (r = (a = this.events).onCellSelectionChange) == null || r.call(a, this.getSelectedCells());
+  }
+  getSelectedCells() {
+    return Array.from(this.state.selection.selectedCells).map((e) => {
+      const [t, i] = e.split(":");
+      return { rowIndex: parseInt(t, 10), field: i };
+    });
+  }
+  setFocusedCell(e, t) {
+    this.state.selection.focusedCell = { rowIndex: e, field: t }, 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 t = e.startRow; t <= e.endRow; t++)
+        this.state.selection.selectedRows.add(t);
+    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 t = [...new Set(e.map((a) => a.rowIndex))].sort((a, r) => a - r), i = [...new Set(e.map((a) => a.field))], n = this.getVisibleColumns().filter((a) => i.includes(a.field)).map((a) => a.field), o = [];
+    for (const a of t) {
+      const r = this.state.displayData[a];
+      if (r) {
+        const d = n.map((l) => r[l]);
+        o.push(d);
+      }
+    }
+    return o;
+  }
+  // --- Public API: CheckBar ---
+  checkItem(e, t = !0) {
+    var n, o;
+    if (console.log("🔵 checkItem START", { index: e, checked: t, currentEditState: this.state.edit }), !this.state.checkBar.checkableRows.has(e)) return;
+    const i = this.options.checkBar;
+    i != null && i.exclusive && t && this.state.checkBar.checkedRows.clear(), t ? this.state.checkBar.checkedRows.add(e) : this.state.checkBar.checkedRows.delete(e);
+    const s = { ...this.state.edit };
+    console.log("💾 Saved edit state before render", s), this.render(), console.log("🔄 Render complete, edit state after render", this.state.edit), s.editing && s.rowIndex !== null && s.field !== null && (console.log("♻️ Restoring edit state", s), this.state.edit = s, this.renderEditCell(s.rowIndex, s.field, s.originalValue)), (o = (n = this.events).onCheckChange) == null || o.call(n, e, t), console.log("🔵 checkItem END");
+  }
+  checkItems(e, t = !0) {
+    e.forEach((i) => {
+      this.state.checkBar.checkableRows.has(i) && (t ? this.state.checkBar.checkedRows.add(i) : this.state.checkBar.checkedRows.delete(i));
+    }), this.render();
+  }
+  checkAll(e = !0) {
+    var t, i, s;
+    (t = this.options.checkBar) != null && t.exclusive || (e ? this.state.checkBar.checkableRows.forEach((n) => {
+      this.state.checkBar.checkedRows.add(n);
+    }) : this.state.checkBar.checkedRows.clear(), this.render(), (s = (i = this.events).onCheckAllChange) == null || s.call(i, e));
+  }
+  uncheckAll() {
+    this.checkAll(!1);
+  }
+  getCheckedItems() {
+    return Array.from(this.state.checkBar.checkedRows).sort((e, t) => e - t);
+  }
+  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, t = !0) {
+    this.checkItem(e, t);
+  }
+  getCheckedRows() {
+    return this.getCheckedItems();
+  }
+  // --- Public API: Sort ---
+  sort(e, t = "asc") {
+    var i, s;
+    this.state.sort = t ? [{ field: e, direction: t }] : [], this.clearSelectionState(), this.applyDataTransformations(), this.render(), (s = (i = this.events).onSort) == null || s.call(i, this.state.sort);
+  }
+  clearSort() {
+    var e, t;
+    this.state.sort = [], this.applyDataTransformations(), this.render(), (t = (e = this.events).onSort) == null || t.call(e, []);
+  }
+  getSortState() {
+    return [...this.state.sort];
+  }
+  // --- Public API: Filter ---
+  filter(e) {
+    var i, s;
+    const t = Array.isArray(e) ? e : [e];
+    this.state.filter = { conditions: t, logic: "and" }, this.clearSelectionState(), this.applyDataTransformations(), this.render(), (s = (i = this.events).onFilter) == null || s.call(i, 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, t) {
+    var n, o, a;
+    if (console.log("🎬 startEdit called", { rowIndex: e, field: t, editable: this.options.editable }), !this.options.editable) return;
+    if (this.state.edit.editing && this.state.edit.rowIndex === e && this.state.edit.field === t) {
+      console.log("⚠️ Already editing this cell - ignoring startEdit");
+      return;
+    }
+    const i = this.state.columns.find((r) => r.field === t);
+    if (console.log("📋 Column found", { column: i == null ? void 0 : i.field, editable: i == null ? void 0 : i.editable }), !i || i.editable === !1) return;
+    this.state.edit.editing && this.endEdit(!0);
+    const s = (n = this.state.displayData[e]) == null ? void 0 : n[t];
+    this.state.edit = { editing: !0, rowIndex: e, field: t, originalValue: s }, console.log("✅ Edit state updated", this.state.edit), (a = (o = this.events).onCellEditStart) == null || a.call(o, e, t, s), this.renderEditCell(e, t, s);
+  }
+  renderEditCell(e, t, i) {
+    console.log("🎨 renderEditCell START", { rowIndex: e, field: t, value: i, currentEditState: this.state.edit }), this.editModeCleanup && (console.log("🧹 Cleaning up previous edit mode listener"), this.editModeCleanup(), this.editModeCleanup = null);
+    const s = this.bodyInner.querySelector(`[data-row-index="${e}"]`), n = s == null ? void 0 : s.querySelector(`[data-field="${t}"]`);
+    if (console.log("🔍 Cell element found", { cell: !!n, hasClass: n == null ? void 0 : n.classList.contains("velox-cell--editing") }), !n) return;
+    const o = this.state.columns.find((r) => r.field === t);
+    if (!o) return;
+    x(n, "velox-cell--editing"), console.log("✅ Added velox-cell--editing class", { classList: Array.from(n.classList) });
+    const a = (r) => {
+      const d = r.target;
+      n.contains(d) ? console.log("📦 Inside cell click - maintaining edit mode") : (console.log("🌍 Outside click detected - ending edit"), this.editModeCleanup = null, document.removeEventListener("mousedown", a), this.endEdit(!0));
+    };
+    if (this.editModeCleanup = () => {
+      document.removeEventListener("mousedown", a);
+    }, setTimeout(() => {
+      document.addEventListener("mousedown", a);
+    }, 0), o.editor) {
+      const r = de.createEditor(
+        i,
+        o.editor,
+        (d) => {
+          var c;
+          if (console.log("💾 Editor save callback", { newValue: d, editing: this.state.edit.editing }), this.setCellValue(e, t, d), ((c = o.editor) == null ? void 0 : c.type) === "checkbox") {
+            console.log("✅ Checkbox editor - maintaining edit mode, new value:", d), this.state.edit.originalValue = d;
+            const h = { ...this.state.edit };
+            h.editing && (this.state.edit = h, this.renderEditCell(h.rowIndex, h.field, d));
+          } else
+            console.log("🛑 Other editor - ending edit mode"), this.state.edit.editing = !1, this.applyDataTransformations(), this.render();
+          const l = this.events;
+          l.onCellEditEnd && l.onCellEditEnd({
+            rowIndex: e,
+            field: t,
+            oldValue: i,
+            newValue: d,
+            row: this.state.displayData[e]
+          });
+        },
+        () => {
+          this.cancelEdit();
+        },
+        (d) => {
+          this.endEditAndMove(d);
+        }
+      );
+      n.innerHTML = "", n.appendChild(r), r.addEventListener("mousedown", () => {
+        console.log("🖱️ Editor mousedown");
+      }), setTimeout(() => {
+        (r instanceof HTMLInputElement || r instanceof HTMLSelectElement) && (r.focus(), r instanceof HTMLInputElement && r.type === "text" && r.select());
+      }, 0);
+    } else {
+      const r = p("input", "velox-edit-input");
+      r.type = o.type === "number" ? "number" : "text", r.value = i != null ? String(i) : "", n.innerHTML = "", n.appendChild(r), r.focus(), r.select(), r.addEventListener("mousedown", () => {
+        console.log("🖱️ Input mousedown");
+      }), r.addEventListener("keydown", (d) => {
+        console.log("⌨️ Input keydown:", d.key, { shiftKey: d.shiftKey }), d.key === "Enter" ? (d.preventDefault(), d.stopPropagation(), console.log("✅ Enter detected - calling endEditAndMove"), this.endEditAndMove(d.shiftKey ? "up" : "down")) : d.key === "Tab" ? (d.preventDefault(), d.stopPropagation(), console.log("✅ Tab detected - calling endEditAndMove"), this.endEditAndMove(d.shiftKey ? "left" : "right")) : d.key === "Escape" && (d.preventDefault(), d.stopPropagation(), console.log("✅ Escape detected - calling cancelEdit"), this.cancelEdit());
+      });
+    }
+  }
+  endEdit(e = !0) {
+    var a, r, d, l, c, h;
+    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: t, field: i, originalValue: s } = this.state.edit;
+    if (t === null || i === null) return;
+    const n = this.bodyInner.querySelector(`[data-row-index="${t}"]`), o = n == null ? void 0 : n.querySelector(`[data-field="${i}"]`);
+    if (e && o) {
+      const f = this.state.columns.find((E) => E.field === i), g = this.state.displayData[t];
+      let m = s;
+      const y = o.querySelector(".velox-edit-input"), C = o.querySelector(".velox-editor--select"), v = o.querySelector('.velox-editor--checkbox input[type="checkbox"]'), w = o.querySelector(".velox-editor--date"), S = o.querySelector(".velox-editor--number");
+      if (v ? m = v.checked : C ? C.multiple ? m = Array.from(C.selectedOptions).map((E) => E.value) : m = C.value : w ? m = w.value : S ? m = S.value === "" ? null : Number(S.value) : y && (m = y.value), JSON.stringify(m) !== JSON.stringify(s)) {
+        if (f != null && f.validation && f.validation.length > 0) {
+          const P = f.type === "number" && typeof m == "string" ? parseFloat(m) : m, L = re.validate(P, f.validation, g);
+          if (!L.valid) {
+            if (o) {
+              x(o, "velox-cell--invalid");
+              const T = L.errors.map((_) => _.message).join(", ");
+              o.title = T;
+            }
+            (r = (a = this.events).onValidationError) == null || r.call(a, {
+              rowIndex: t,
+              field: i,
+              value: P,
+              errors: L.errors.map((T) => T.message)
+            }), y ? y.focus() : C ? C.focus() : w ? w.focus() : S && S.focus();
+            return;
+          }
+        }
+        const E = (f == null ? void 0 : f.type) === "number" && typeof m == "string" ? parseFloat(m) : m;
+        this.setCellValue(t, i, E), (l = (d = this.events).onCellEditEnd) == null || l.call(d, {
+          rowIndex: t,
+          field: i,
+          oldValue: s,
+          newValue: E,
+          row: this.state.displayData[t]
+        });
+      }
+    } else
+      (h = (c = this.events).onCellEditCancel) == null || h.call(c, t, i);
+    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 d;
+    const { rowIndex: t, field: i } = this.state.edit;
+    if (t === null || i === null) return;
+    this.endEdit(!0);
+    const s = this.getVisibleColumns(), n = s.findIndex((l) => l.field === i);
+    let o = t, a = n;
+    switch (e) {
+      case "up":
+        o > 0 && o--;
+        break;
+      case "down":
+        o < this.state.displayData.length - 1 && o++;
+        break;
+      case "left":
+        a > 0 ? a-- : o > 0 && (o--, a = s.length - 1);
+        break;
+      case "right":
+        a < s.length - 1 ? a++ : o < this.state.displayData.length - 1 && (o++, a = 0);
+        break;
+    }
+    const r = (d = s[a]) == null ? void 0 : d.field;
+    r && (this.setFocusedCell(o, r), this.state.selection.selectedCells.clear(), this.state.selection.selectedCells.add(`${o}:${r}`), this.scrollToCell(o, r), this.render(), this.rootElement.focus());
+  }
+  // --- Public API: Column ---
+  getColumn(e) {
+    return this.state.columns.find((t) => t.field === e) || null;
+  }
+  setColumnWidth(e, t) {
+    var s, n;
+    const i = this.state.columns.find((o) => o.field === e);
+    i && (i.width = t, this.invalidateColumnCache(), this.render(), (n = (s = this.events).onColumnResize) == null || n.call(s, e, t));
+  }
+  showColumn(e) {
+    const t = this.state.columns.find((i) => i.field === e);
+    t && (t.visible = !0, this.invalidateColumnCache(), this.render());
+  }
+  hideColumn(e) {
+    const t = this.state.columns.find((i) => i.field === e);
+    t && (t.visible = !1, this.invalidateColumnCache(), this.render());
+  }
+  setColumns(e) {
+    this.state.columns = e.map((t) => ({ ...t })), this.invalidateColumnCache(), this.render();
+  }
+  autoFitColumn(e) {
+    var n, o;
+    const t = this.state.columns.find((a) => a.field === e);
+    if (!t) return;
+    let i = 100;
+    const s = t.header || "";
+    i = Math.max(i, this.measureTextWidth(s) + 40), this.state.displayData.forEach((a) => {
+      const r = a[t.field], d = D(r, t.type), l = this.measureTextWidth(d) + 20;
+      i = Math.max(i, l);
+    }), t.width = Math.min(i, 500), this.invalidateColumnCache(), this.render(), (o = (n = this.events).onColumnResize) == null || o.call(n, e, t.width);
+  }
+  autoFitAllColumns() {
+    this.getVisibleColumns().forEach((e) => this.autoFitColumn(e.field));
+  }
+  // GridContext: Text measurement (public for module access)
+  measureTextWidth(e, t) {
+    return this.measureCanvas || (this.measureCanvas = document.createElement("canvas"), this.measureContext = this.measureCanvas.getContext("2d")), this.measureContext ? (this.measureContext.font = t || "14px sans-serif", this.measureContext.measureText(e).width) : 100;
+  }
+  // --- Public API: Scroll ---
+  scrollToRow(e) {
+    const t = this.options.rowHeight || 40;
+    this.bodyElement.scrollTop = e * t, this.fixedLeftBody && (this.fixedLeftBody.scrollTop = e * t);
+  }
+  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, t) {
+    const i = this.options.rowHeight || 40, s = this.bodyElement.clientHeight, n = this.bodyElement.scrollTop, o = e * i, a = o + i;
+    o < n ? this.bodyElement.scrollTop = o : a > n + s && (this.bodyElement.scrollTop = a - s), this.fixedLeftBody && (this.fixedLeftBody.scrollTop = this.bodyElement.scrollTop);
+    const r = this.bodyInner.querySelector(`[data-field="${t}"]`);
+    if (r) {
+      const d = r.offsetLeft, l = d + r.offsetWidth, c = this.bodyElement.clientWidth, h = this.bodyElement.scrollLeft;
+      d < h ? this.bodyElement.scrollLeft = d : l > h + c && (this.bodyElement.scrollLeft = l - c);
+    }
+  }
+  // --- Public API: Clipboard ---
+  copy() {
+    const e = this.getSelectionData();
+    if (e.length === 0) return;
+    const t = e.map((i) => i.join("	")).join(`
+`);
+    navigator.clipboard.writeText(t).then(() => {
+      var i, s;
+      (s = (i = this.events).onCopy) == null || s.call(i, e.map((n) => n.map((o) => String(o ?? ""))));
+    });
+  }
+  paste() {
+    const e = this.state.selection.focusedCell;
+    e && navigator.clipboard.readText().then((t) => {
+      var o, a, r, d;
+      const i = t.split(`
+`).map((l) => l.split("	"));
+      (a = (o = this.events).onPaste) == null || a.call(o, i, e);
+      const s = this.getVisibleColumns(), n = s.findIndex((l) => l.field === e.field);
+      i.forEach((l, c) => {
+        const h = e.rowIndex + c;
+        h >= this.state.displayData.length || l.forEach((f, g) => {
+          const m = n + g;
+          if (m >= s.length) return;
+          const y = s[m].field, C = s[m];
+          if (C.editable !== !1) {
+            const v = this.state.displayData[h], w = this.state.data.indexOf(v);
+            w >= 0 && (this.state.data[w][y] = C.type === "number" ? parseFloat(f) : f);
+          }
+        });
+      }), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (d = (r = this.events).onDataChange) == null || d.call(r, this.state.data);
+    });
+  }
+  cut() {
+    var s, n, o, a;
+    const e = this.getSelectionData();
+    if (e.length === 0) return;
+    this.copy();
+    const t = [];
+    this.getSelectedCells().forEach((r) => {
+      const d = this.state.columns.find((l) => l.field === r.field);
+      if ((d == null ? void 0 : d.editable) !== !1) {
+        const l = this.state.displayData[r.rowIndex], c = this.state.data.indexOf(l);
+        if (c >= 0) {
+          const h = this.state.data[c][r.field];
+          t.push({
+            rowIndex: r.rowIndex,
+            field: r.field,
+            oldValue: h,
+            newValue: ""
+          }), this.state.data[c][r.field] = "";
+        }
+      }
+    }), t.length > 0 && this.pushUndo({ type: "cut", timestamp: Date.now(), data: { changes: t } }), this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (n = (s = this.events).onCut) == null || n.call(s, e.map((r) => r.map((d) => String(d ?? "")))), (a = (o = this.events).onDataChange) == null || a.call(o, this.state.data);
+  }
+  // --- Public API: Undo/Redo ---
+  pushUndo(e) {
+    this.history.push(e);
+  }
+  undo() {
+    var t, i, s, n;
+    const e = this.history.popUndo();
+    if (!e) return !1;
+    switch (e.type) {
+      case "cell_edit": {
+        const o = e.data, a = this.state.displayData[o.rowIndex], r = this.state.data.indexOf(a);
+        r >= 0 && (this.state.data[r][o.field] = o.oldValue);
+        break;
+      }
+      case "bulk_edit":
+      case "paste":
+      case "cut":
+      case "delete": {
+        e.data.changes.forEach((a) => {
+          const r = this.state.displayData[a.rowIndex], d = this.state.data.indexOf(r);
+          d >= 0 && (this.state.data[d][a.field] = a.oldValue);
+        });
+        break;
+      }
+      case "row_add": {
+        const o = e.data;
+        this.state.data.splice(o.index, 1), this.rebuildDataIndexMap();
+        break;
+      }
+      case "row_remove": {
+        const o = e.data;
+        this.state.data.splice(o.index, 0, { ...o.row }), this.rebuildDataIndexMap();
+        break;
+      }
+    }
+    return this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (i = (t = this.events).onUndo) == null || i.call(t, e), (n = (s = this.events).onDataChange) == null || n.call(s, this.state.data), !0;
+  }
+  redo() {
+    var t, i, s, n;
+    const e = this.history.popRedo();
+    if (!e) return !1;
+    switch (e.type) {
+      case "cell_edit": {
+        const o = e.data, a = this.state.displayData[o.rowIndex], r = this.state.data.indexOf(a);
+        r >= 0 && (this.state.data[r][o.field] = o.newValue);
+        break;
+      }
+      case "bulk_edit":
+      case "paste":
+      case "cut":
+      case "delete": {
+        e.data.changes.forEach((a) => {
+          const r = this.state.displayData[a.rowIndex], d = this.state.data.indexOf(r);
+          d >= 0 && (this.state.data[d][a.field] = a.newValue);
+        });
+        break;
+      }
+      case "row_add": {
+        const o = e.data;
+        this.state.data.splice(o.index, 0, { ...o.row }), this.rebuildDataIndexMap();
+        break;
+      }
+      case "row_remove": {
+        const o = e.data;
+        this.state.data.splice(o.index, 1), this.rebuildDataIndexMap();
+        break;
+      }
+    }
+    return this.summary.invalidateCache(), this.applyDataTransformations(), this.render(), (i = (t = this.events).onRedo) == null || i.call(t, e), (n = (s = this.events).onDataChange) == null || n.call(s, this.state.data), !0;
+  }
+  canUndo() {
+    return this.history.canUndo();
+  }
+  canRedo() {
+    return this.history.canRedo();
+  }
+  clearHistory() {
+    this.history.clear();
+  }
+  // --- Public API: Delete ---
+  deleteSelectedCells() {
+    var i, s;
+    if (!this.options.editable) return;
+    const e = this.getSelectedCells();
+    if (e.length === 0) return;
+    const t = [];
+    e.forEach((n) => {
+      const o = this.state.columns.find((a) => a.field === n.field);
+      if ((o == null ? void 0 : o.editable) !== !1) {
+        const a = this.state.displayData[n.rowIndex], r = this.state.data.indexOf(a);
+        if (r >= 0) {
+          const d = this.state.data[r][n.field];
+          d !== "" && d !== null && d !== void 0 && (t.push({
+            rowIndex: n.rowIndex,
+            field: n.field,
+            oldValue: d,
+            newValue: ""
+          }), this.state.data[r][n.field] = "");
+        }
+      }
+    }), t.length > 0 && (this.pushUndo({ type: "delete", timestamp: Date.now(), data: { changes: t } }), this.applyDataTransformations(), this.summary.invalidateCache(), this.render(), (s = (i = this.events).onDataChange) == null || s.call(i, this.state.data));
+  }
+  deleteSelectedRows() {
+    const e = this.getSelectedRows();
+    if (e.length === 0) return;
+    [...e].sort((i, s) => s - i).forEach((i) => {
+      this.removeRow(i);
+    });
+  }
+  // --- 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 t = this.createExportContext(e);
+    Q(t);
+  }
+  /**
+   * Export grid data to CSV format
+   * @returns CSV string
+   */
+  exportToCSV(e = {}) {
+    const t = this.createExportContext(e);
+    return F(t);
+  }
+  /**
+   * Export grid data to JSON format
+   * @returns JSON string
+   */
+  exportToJSON(e = {}) {
+    const t = this.createExportContext(e);
+    return O(t);
+  }
+  /**
+   * Download grid data as CSV file
+   */
+  downloadCSV(e = {}) {
+    const t = this.createExportContext(e);
+    ne(t);
+  }
+  /**
+   * Download grid data as JSON file
+   */
+  downloadJSON(e = {}) {
+    const t = this.createExportContext(e);
+    oe(t);
+  }
+  /**
+   * Import data from CSV string
+   * @param csvString CSV content
+   * @param hasHeader Whether first row is header (default: true)
+   */
+  importFromCSV(e, t = !0) {
+    const i = te(e, t);
+    return i.errors.length === 0 && i.data.length > 0 && this.setData(i.data), i;
+  }
+  /**
+   * 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, t = 0) {
+    const i = await se(e, t);
+    return i.errors.length === 0 && i.data.length > 0 && this.setData(i.data), i;
+  }
+  /**
+   * Check if SheetJS library is available for Excel operations
+   */
+  static isExcelSupported() {
+    return V();
+  }
+  // ============================================
+  // Public API - Utility Methods
+  // ============================================
+  getCellValue(e, t) {
+    var i;
+    return (i = this.state.displayData[e]) == null ? void 0 : i[t];
+  }
+  setCellValue(e, t, i) {
+    var o, a;
+    const s = this.state.displayData[e];
+    if (!s) return;
+    const n = this.state.data.indexOf(s);
+    n >= 0 && (this.state.data[n][t] = i, (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(), (a = (o = this.events).onDataChange) == null || a.call(o, 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 = { ...I, ...e.checkBar }), e.columns && (this.state.columns = e.columns.map((t) => ({ ...t }))), 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, t) {
+    const i = this.state.columns.find((s) => s.field === e);
+    i && (i.fixed = t, this.invalidateColumnCache(), this.render());
+  }
+  /**
+   * Reorder column to new position
+   */
+  reorderColumn(e, t) {
+    var o, a;
+    const i = this.state.columns.findIndex((r) => r.field === e), s = this.state.columns.findIndex((r) => r.field === t);
+    if (i === -1 || s === -1) return;
+    const [n] = this.state.columns.splice(i, 1);
+    this.state.columns.splice(s, 0, n), this.invalidateColumnCache(), this.render(), (a = (o = this.events).onColumnReorder) == null || a.call(o, e, i, s);
+  }
+  // GridContext: Column menu methods - delegated to GridColumnMenu
+  showColumnMenu(e, t) {
+    this.closeFilterPopup(), this.columnMenuManager.showColumnMenu(e, t);
+  }
+  closeColumnMenu() {
+    this.columnMenuManager.closeColumnMenu();
+  }
+  // GridContext: Column drag methods - delegated to GridDragManager
+  startColumnDrag(e, t) {
+    this.dragManager.startColumnDrag(e, t);
+  }
+  // ============================================
+  // Phase 11: Row Drag & Drop
+  // ============================================
+  /**
+   * Move row to new position
+   */
+  moveRow(e, t) {
+    var d, l;
+    const i = this.state.displayData[e];
+    if (!i) return;
+    const s = this.state.data.indexOf(i);
+    if (s === -1) return;
+    const n = this.state.displayData[t], o = n ? this.state.data.indexOf(n) : this.state.data.length, [a] = this.state.data.splice(s, 1), r = o > s ? o - 1 : o;
+    this.state.data.splice(r, 0, a), this.rebuildDataIndexMap(), this.applyDataTransformations(), this.render(), (l = (d = this.events).onDataChange) == null || l.call(d, this.state.data);
+  }
+  // GridContext: Row drag methods - delegated to GridDragManager
+  startRowDrag(e, t, i) {
+    this.dragManager.startRowDrag(e, t, i);
+  }
+  // ============================================
+  // 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, ...t) {
+    const i = this.events[e];
+    i && i(...t);
+  }
+  // ============================================
+  // GridContext: Internal Handlers
+  // ============================================
+  /** GridContext: Block selection 상태 확인 */
+  isBlockSelecting() {
+    return this.blockSelecting !== null;
+  }
+  /** GridContext: Tooltip 표시 */
+  showTooltip(e, t, i, s) {
+    this.tooltip && this.tooltip.show(e, t, i, s);
+  }
+  /** 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, o;
+    const t = this.options.fixedOptions || { colCount: 0, rightCount: 0 }, i = {
+      colCount: e.colCount ?? ((n = this.options.fixedOptions) == null ? void 0 : n.colCount) ?? 0,
+      rightCount: e.rightCount ?? ((o = this.options.fixedOptions) == null ? void 0 : o.rightCount) ?? 0
+    }, s = (
+      // Left fixed changes
+      (t.colCount || 0) === 0 && i.colCount > 0 || // Left 추가
+      (t.colCount || 0) > 0 && i.colCount === 0 || // Left 제거
+      // Right fixed changes
+      (t.rightCount || 0) === 0 && i.rightCount > 0 || // Right 추가
+      (t.rightCount || 0) > 0 && i.rightCount === 0
+    );
+    this.options.fixedOptions = i, this.invalidateColumnCache(), s && this.rebuildDOM(), this.render();
+  }
+  /**
+   * Rebuild DOM structure and re-attach events
+   * Phase 14: For dynamic fixed columns
+   */
+  rebuildDOM() {
+    var i, s;
+    const e = ((i = this.bodyElement) == null ? void 0 : i.scrollTop) || 0, t = ((s = this.bodyElement) == null ? void 0 : s.scrollLeft) || 0;
+    this.detachEvents(), this.build(), this.attachEvents(), this.bodyElement && (this.bodyElement.scrollTop = e, this.bodyElement.scrollLeft = t), 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 t = this.state.displayData[e];
+    return t && this.state.rowStates.get(t) || "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, t) {
+    const i = this.state.displayData[e];
+    i && (this.state.rowStates.set(i, t), this.render());
+  }
+  /**
+   * Get all changes (created, updated, deleted rows)
+   * @returns Changes result with separated arrays
+   */
+  getChanges() {
+    const e = [], t = [], i = [];
+    return this.state.rowStates.forEach((s, n) => {
+      s === "created" ? e.push(n) : s === "updated" ? t.push(n) : s === "deleted" && i.push(n);
+    }), { created: e, updated: t, deleted: i };
+  }
+  /**
+   * Get newly created rows
+   * @returns Array of created rows
+   */
+  getCreatedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((t, i) => {
+      t === "created" && e.push(i);
+    }), e;
+  }
+  /**
+   * Get updated rows
+   * @returns Array of updated rows
+   */
+  getUpdatedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((t, i) => {
+      t === "updated" && e.push(i);
+    }), e;
+  }
+  /**
+   * Get deleted rows (marked for deletion)
+   * @returns Array of deleted rows
+   */
+  getDeletedRows() {
+    const e = [];
+    return this.state.rowStates.forEach((t, i) => {
+      t === "deleted" && e.push(i);
+    }), 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((t, i) => {
+      t === "createAndDeleted" && e.push(i);
+    }), e.forEach((t) => {
+      const i = this.state.data.indexOf(t);
+      i >= 0 && this.state.data.splice(i, 1);
+    }), this.state.rowStates.clear(), this.state.data.forEach((t) => {
+      this.state.rowStates.set(t, "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 s, n;
+    const { totalPages: t } = this.state.pagination, i = Math.max(1, Math.min(e, t || 1));
+    i === this.state.pagination.currentPage && this.state.displayData.length > 0 || (this.state.pagination.currentPage = i, this.isRemoteDataSource() ? this.fetchData() : (this.applyLocalPagination(), this.render()), (n = (s = this.events).onPageChange) == null || n.call(s, i, this.state.pagination.pageSize));
+  }
+  /**
+   * 페이지 크기 변경
+   * @param pageSize - 새 페이지 크기
+   */
+  setPageSize(e) {
+    var t, i;
+    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()), (i = (t = this.events).onPageSizeChange) == null || i.call(t, e));
+  }
+  /**
+   * 서버에서 데이터 가져오기 (remote 모드)
+   */
+  async fetchData() {
+    const e = this.options.dataSource;
+    if (!(e != null && e.fetch)) return;
+    const t = {
+      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 i = await e.fetch(t);
+      this.state.data = i.data.map((s) => ({ ...s })), this.state.displayData = this.state.data, this.state.pagination.totalCount = i.totalCount, this.updateTotalPages(), this.state.rowStates.clear(), this.state.data.forEach((s) => {
+        this.state.rowStates.set(s, "none");
+      }), this.rebuildDataIndexMap(), this.summary.invalidateCache(), this.clearSelectionState();
+    } catch (i) {
+      console.error("VeloxGrid: fetchData error", i);
+    } finally {
+      this.state.pagination.loading = !1, this.setLoading(!1), this.render();
+    }
+  }
+  /**
+   * 전체 페이지 수 재계산
+   */
+  updateTotalPages() {
+    const { pageSize: e, totalCount: t } = this.state.pagination;
+    this.state.pagination.totalPages = Math.max(1, Math.ceil(t / e));
+  }
+  /**
+   * 로컬 데이터에 페이지네이션 적용
+   * sort/filter 적용 후 현재 페이지 데이터만 displayData에 설정
+   */
+  applyLocalPagination() {
+    let e = [...this.state.data];
+    if (this.state.filter && (e = B(e, this.state.filter)), this.state.sort.length > 0) {
+      const n = {};
+      this.state.columns.forEach((o) => {
+        n[o.field] = o.type || "text";
+      }), e = M(e, this.state.sort, n);
+    }
+    this.state.pagination.totalCount = e.length, this.updateTotalPages();
+    const { currentPage: t, pageSize: i } = this.state.pagination, s = (t - 1) * i;
+    this.state.displayData = e.slice(s, s + i), 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 t = e.infiniteScrollThreshold || 100, { scrollTop: i, scrollHeight: s, clientHeight: n } = this.bodyElement;
+    s - i - n <= t && this.loadNextPage();
+  }
+  /**
+   * Infinite Scroll: 다음 페이지 로드 (Phase 18)
+   */
+  async loadNextPage() {
+    const { currentPage: e, totalPages: t } = this.state.pagination;
+    if (e >= t) {
+      this.infiniteScrollAllLoaded = !0, this.renderInfiniteScrollStatus();
+      return;
+    }
+    if (this.infiniteScrollLoading = !0, this.state.pagination.currentPage++, this.renderInfiniteScrollStatus(), this.isRemoteDataSource()) {
+      const i = this.options.dataSource;
+      if (!(i != null && i.fetch)) return;
+      const s = {
+        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 i.fetch(s), o = n.data.map((a) => ({ ...a }));
+        this.state.data.push(...o), this.state.displayData = [...this.state.data], this.state.pagination.totalCount = n.totalCount, this.updateTotalPages(), o.forEach((a) => this.state.rowStates.set(a, "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 = B(e, this.state.filter)), this.state.sort.length > 0) {
+      const n = {};
+      this.state.columns.forEach((o) => {
+        n[o.field] = o.type || "text";
+      }), e = M(e, this.state.sort, n);
+    }
+    const { currentPage: t, pageSize: i } = this.state.pagination, s = t * i;
+    this.state.displayData = e.slice(0, s), s >= 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: t } = this.state.pagination;
+        e.textContent = `All ${t.toLocaleString()} items loaded`, this.paginationContainer.appendChild(e);
+      }
+    }
+  }
+  /**
+   * Pagination UI 렌더링 (Phase 18)
+   */
+  renderPagination() {
+    var c;
+    if (!this.paginationContainer) return;
+    if (((c = this.options.pagination) == null ? void 0 : c.mode) === "infinite") {
+      this.renderInfiniteScrollStatus();
+      return;
+    }
+    const { currentPage: e, totalPages: t, totalCount: i, pageSize: s } = this.state.pagination, n = this.options.pagination, o = (n == null ? void 0 : n.maxPageButtons) || 5;
+    if (this.paginationContainer.innerHTML = "", (n == null ? void 0 : n.showInfo) !== !1) {
+      const h = p("div", "velox-pagination-info"), f = (e - 1) * s + 1, g = Math.min(e * s, i);
+      h.textContent = i > 0 ? `${f}-${g} / ${i.toLocaleString()}` : "0 items", this.paginationContainer.appendChild(h);
+    }
+    const a = p("div", "velox-pagination-nav");
+    a.appendChild(this.createPageButton("«", 1, e === 1)), a.appendChild(this.createPageButton("‹", e - 1, e === 1));
+    const r = Math.floor(o / 2);
+    let d = Math.max(1, e - r);
+    const l = Math.min(t, d + o - 1);
+    if (l - d + 1 < o && (d = Math.max(1, l - o + 1)), d > 1 && (a.appendChild(this.createPageButton("1", 1, !1)), d > 2)) {
+      const h = p("span", "velox-pagination-ellipsis");
+      h.textContent = "…", a.appendChild(h);
+    }
+    for (let h = d; h <= l; h++) {
+      const f = this.createPageButton(String(h), h, !1);
+      h === e && x(f, "velox-pagination-btn--active"), a.appendChild(f);
+    }
+    if (l < t) {
+      if (l < t - 1) {
+        const h = p("span", "velox-pagination-ellipsis");
+        h.textContent = "…", a.appendChild(h);
+      }
+      a.appendChild(this.createPageButton(String(t), t, !1));
+    }
+    if (a.appendChild(this.createPageButton("›", e + 1, e === t)), a.appendChild(this.createPageButton("»", t, e === t)), this.paginationContainer.appendChild(a), n != null && n.showSizeChanger) {
+      const h = p("div", "velox-pagination-sizer"), f = document.createElement("select");
+      f.className = "velox-pagination-select", (n.pageSizeOptions || [10, 20, 50, 100]).forEach((m) => {
+        const y = document.createElement("option");
+        y.value = String(m), y.textContent = `${m} / page`, m === s && (y.selected = !0), f.appendChild(y);
+      }), f.addEventListener("change", () => {
+        this.setPageSize(Number(f.value));
+      }), h.appendChild(f), this.paginationContainer.appendChild(h);
+    }
+  }
+  /**
+   * 페이지 버튼 생성 헬퍼 (Phase 18)
+   */
+  createPageButton(e, t, i) {
+    const s = p("button", "velox-pagination-btn");
+    return s.textContent = e, i ? (s.setAttribute("disabled", "true"), x(s, "velox-pagination-btn--disabled")) : s.addEventListener("click", () => this.goToPage(t)), s;
+  }
+  destroy() {
+    var e, t;
+    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 = "", (t = (e = this.events).onDestroy) == null || t.call(e);
+  }
+}
+const z = [
+  "onDataChange",
+  "onRowAdd",
+  "onRowRemove",
+  "onRowUpdate",
+  "onSelectionChange",
+  "onRowSelect",
+  "onAllSelect",
+  "onCellClick",
+  "onCellDoubleClick",
+  "onRowClick",
+  "onRowDoubleClick",
+  "onCellSelect",
+  "onCellSelectionChange",
+  "onCheckChange",
+  "onCheckAllChange",
+  "onSort",
+  "onFilter",
+  "onCellEditStart",
+  "onCellEditEnd",
+  "onCellEditCancel",
+  "onValidationError",
+  "onCopy",
+  "onPaste",
+  "onCut",
+  "onKeyDown",
+  "onUndo",
+  "onRedo",
+  "onScroll",
+  "onColumnResize",
+  "onColumnReorder",
+  "onReady",
+  "onDestroy",
+  "onPageChange",
+  "onPageSizeChange"
+];
+function Ce(u) {
+  const e = {}, t = {};
+  let i, s;
+  for (const [n, o] of Object.entries(u))
+    n === "wrapperClassName" ? i = o : n === "wrapperStyle" ? s = o : z.includes(n) ? e[n] = o : t[n] = o;
+  return {
+    options: t,
+    events: e,
+    wrapperClassName: i,
+    wrapperStyle: s
+  };
+}
+const we = K(
+  function(e, t) {
+    const i = R(null), s = R(null), n = R({}), { options: o, events: a, wrapperClassName: r, wrapperStyle: d } = Ce(e);
+    return n.current = a, k(() => {
+      if (!i.current) return;
+      const l = {};
+      for (const h of z)
+        l[h] = (...f) => {
+          const g = n.current[h];
+          g && g(...f);
+        };
+      const c = {
+        ...o,
+        ...l
+      };
+      return s.current = new $(i.current, c), () => {
+        s.current && (s.current.destroy(), s.current = null);
+      };
+    }, []), k(() => {
+      s.current && o.data && s.current.setData(o.data);
+    }, [o.data]), k(() => {
+      s.current && o.columns && s.current.setColumns(o.columns);
+    }, [o.columns]), k(() => {
+      s.current && o.loading !== void 0 && s.current.setOptions({ loading: o.loading });
+    }, [o.loading]), q(t, () => ({
+      // Lifecycle
+      destroy: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.destroy();
+      },
+      refresh: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.refresh();
+      },
+      // Data methods
+      getData: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getData()) ?? [];
+      },
+      setData: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.setData(l);
+      },
+      getRow: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.getRow(l)) ?? null;
+      },
+      addRow: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.addRow(l, c);
+      },
+      updateRow: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.updateRow(l, c);
+      },
+      removeRow: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.removeRow(l);
+      },
+      clearData: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearData();
+      },
+      // Row Selection methods
+      getSelectedRows: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSelectedRows()) ?? [];
+      },
+      getSelectedData: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSelectedData()) ?? [];
+      },
+      selectRow: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.selectRow(l, c);
+      },
+      selectAll: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.selectAll(l);
+      },
+      clearSelection: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearSelection();
+      },
+      isRowSelected: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.isRowSelected(l)) ?? !1;
+      },
+      // Cell Selection methods
+      selectCell: (l, c, h) => {
+        var f;
+        return (f = s.current) == null ? void 0 : f.selectCell(l, c, h);
+      },
+      getSelectedCells: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSelectedCells()) ?? [];
+      },
+      setFocusedCell: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.setFocusedCell(l, c);
+      },
+      getFocusedCell: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getFocusedCell()) ?? null;
+      },
+      setSelection: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.setSelection(l);
+      },
+      getSelection: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSelection()) ?? null;
+      },
+      getSelectionData: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSelectionData()) ?? [];
+      },
+      // CheckBar methods
+      checkItem: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.checkItem(l, c);
+      },
+      checkItems: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.checkItems(l, c);
+      },
+      checkAll: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.checkAll(l);
+      },
+      uncheckAll: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.uncheckAll();
+      },
+      getCheckedItems: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getCheckedItems()) ?? [];
+      },
+      getCheckedData: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getCheckedData()) ?? [];
+      },
+      isItemChecked: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.isItemChecked(l)) ?? !1;
+      },
+      isItemCheckable: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.isItemCheckable(l)) ?? !1;
+      },
+      // Legacy checkbox aliases
+      checkRow: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.checkRow(l, c);
+      },
+      getCheckedRows: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getCheckedRows()) ?? [];
+      },
+      // Sort methods
+      sort: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.sort(l, c);
+      },
+      clearSort: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearSort();
+      },
+      getSortState: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSortState()) ?? [];
+      },
+      // Filter methods
+      filter: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.filter(l);
+      },
+      clearFilter: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearFilter();
+      },
+      getFilterState: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getFilterState()) ?? null;
+      },
+      // Edit methods
+      startEdit: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.startEdit(l, c);
+      },
+      endEdit: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.endEdit(l);
+      },
+      cancelEdit: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.cancelEdit();
+      },
+      isEditing: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.isEditing()) ?? !1;
+      },
+      // Column methods
+      getColumn: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.getColumn(l)) ?? null;
+      },
+      setColumnWidth: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.setColumnWidth(l, c);
+      },
+      showColumn: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.showColumn(l);
+      },
+      hideColumn: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.hideColumn(l);
+      },
+      setColumns: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.setColumns(l);
+      },
+      autoFitColumn: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.autoFitColumn(l);
+      },
+      autoFitAllColumns: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.autoFitAllColumns();
+      },
+      // Scroll methods
+      scrollToRow: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.scrollToRow(l);
+      },
+      scrollToTop: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.scrollToTop();
+      },
+      scrollToBottom: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.scrollToBottom();
+      },
+      scrollToCell: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.scrollToCell(l, c);
+      },
+      // Clipboard methods
+      copy: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.copy();
+      },
+      paste: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.paste();
+      },
+      cut: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.cut();
+      },
+      // Undo/Redo methods
+      undo: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.undo()) ?? !1;
+      },
+      redo: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.redo()) ?? !1;
+      },
+      canUndo: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.canUndo()) ?? !1;
+      },
+      canRedo: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.canRedo()) ?? !1;
+      },
+      clearHistory: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearHistory();
+      },
+      // Delete methods
+      deleteSelectedCells: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.deleteSelectedCells();
+      },
+      deleteSelectedRows: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.deleteSelectedRows();
+      },
+      // Export methods
+      exportToExcel: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.exportToExcel(l);
+      },
+      exportToCSV: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.exportToCSV(l)) ?? "";
+      },
+      downloadCSV: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.downloadCSV(l);
+      },
+      exportToJSON: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.exportToJSON(l)) ?? "[]";
+      },
+      downloadJSON: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.downloadJSON(l);
+      },
+      // Import methods
+      importFromCSV: (l, c) => {
+        var h;
+        return ((h = s.current) == null ? void 0 : h.importFromCSV(l, c)) ?? { data: [], headers: [], errors: [] };
+      },
+      importFromExcel: (l, c) => {
+        var h;
+        return ((h = s.current) == null ? void 0 : h.importFromExcel(l, c)) ?? Promise.resolve({ data: [], headers: [], errors: [] });
+      },
+      // Utility methods
+      getRowCount: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getRowCount()) ?? 0;
+      },
+      getVisibleRowCount: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getVisibleRowCount()) ?? 0;
+      },
+      getCellValue: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.getCellValue(l, c);
+      },
+      setCellValue: (l, c, h) => {
+        var f;
+        return (f = s.current) == null ? void 0 : f.setCellValue(l, c, h);
+      },
+      // Summary methods
+      getSummaryValue: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.getSummaryValue(l);
+      },
+      getSummaryValues: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getSummaryValues()) ?? {};
+      },
+      refreshSummary: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.refreshSummary();
+      },
+      // Row State methods
+      getRowState: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.getRowState(l)) ?? "none";
+      },
+      getRowStateByData: (l) => {
+        var c;
+        return ((c = s.current) == null ? void 0 : c.getRowStateByData(l)) ?? "none";
+      },
+      setRowState: (l, c) => {
+        var h;
+        return (h = s.current) == null ? void 0 : h.setRowState(l, c);
+      },
+      getChanges: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getChanges()) ?? { created: [], updated: [], deleted: [] };
+      },
+      getCreatedRows: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getCreatedRows()) ?? [];
+      },
+      getUpdatedRows: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getUpdatedRows()) ?? [];
+      },
+      getDeletedRows: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getDeletedRows()) ?? [];
+      },
+      clearRowStates: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.clearRowStates();
+      },
+      commit: () => {
+        var l;
+        return (l = s.current) == null ? void 0 : l.commit();
+      },
+      // Options
+      setOptions: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.setOptions(l);
+      },
+      getOptions: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getOptions()) ?? {};
+      },
+      // Pagination methods
+      goToPage: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.goToPage(l);
+      },
+      setPageSize: (l) => {
+        var c;
+        return (c = s.current) == null ? void 0 : c.setPageSize(l);
+      },
+      getPaginationState: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.getPaginationState()) ?? {
+          currentPage: 1,
+          pageSize: 20,
+          totalCount: 0,
+          totalPages: 0,
+          loading: !1
+        };
+      },
+      fetchData: () => {
+        var l;
+        return ((l = s.current) == null ? void 0 : l.fetchData()) ?? Promise.resolve();
+      },
+      // 내부 인스턴스 직접 접근
+      getGridInstance: () => s.current
+    }), []), /* @__PURE__ */ W(
+      "div",
+      {
+        ref: i,
+        className: r,
+        style: d
+      }
+    );
+  }
+);
+function be(u) {
+  const e = R(null), t = R(null), i = R(u), [s, n] = U(!1);
+  i.current = u;
+  const o = j(() => t.current, []);
+  return k(() => {
+    if (e.current)
+      return t.current = new $(e.current, i.current), n(!0), () => {
+        t.current && (t.current.destroy(), t.current = null, n(!1));
+      };
+  }, []), {
+    containerRef: e,
+    grid: o(),
+    isReady: s
+  };
+}
+export {
+  we as VeloxGridReact,
+  be as useVeloxGrid
+};
+//# sourceMappingURL=index.esm.js.map