@framesquared/grid 0.1.0

package/dist/index.js

@@ -0,0 +1,1868 @@
+// src/grid/Grid.ts
+import { Panel } from "@framesquared/ui";
+
+// src/grid/column/Column.ts
+var Column = class {
+  text;
+  dataIndex;
+  width;
+  flex;
+  minWidth;
+  maxWidth;
+  sortable;
+  hidden;
+  align;
+  config;
+  _renderer;
+  constructor(config = {}) {
+    this.config = config;
+    this.text = config.text ?? "";
+    this.dataIndex = config.dataIndex ?? "";
+    this.width = config.width ?? 0;
+    this.flex = config.flex ?? 0;
+    this.minWidth = config.minWidth ?? 40;
+    this.maxWidth = config.maxWidth ?? 0;
+    this.sortable = config.sortable ?? true;
+    this.hidden = config.hidden ?? false;
+    this.align = config.align ?? "left";
+    this._renderer = config.renderer ?? null;
+  }
+  getCellValue(record) {
+    return record.get ? record.get(this.dataIndex) : record.data?.[this.dataIndex];
+  }
+  renderCell(value, metaData, record, rowIndex, colIndex) {
+    if (this._renderer) {
+      return this._renderer(value, metaData, record, rowIndex, colIndex);
+    }
+    return this.formatValue(value);
+  }
+  formatValue(value) {
+    if (value === null || value === void 0) return "";
+    return String(value);
+  }
+  /** Create the TD content — override in special columns. */
+  renderCellHtml(value, _metaData, record, rowIndex, colIndex) {
+    return this.renderCell(value, _metaData, record, rowIndex, colIndex);
+  }
+};
+var NumberColumn = class extends Column {
+  _format;
+  constructor(config = {}) {
+    super({ ...config, xtype: "numbercolumn" });
+    this._format = config.format ?? "0";
+  }
+  formatValue(value) {
+    if (value === null || value === void 0) return "";
+    const n = Number(value);
+    if (isNaN(n)) return String(value);
+    const match = this._format.match(/0\.(0+)/);
+    if (match) {
+      return n.toFixed(match[1].length);
+    }
+    return String(n);
+  }
+};
+var DateColumn = class extends Column {
+  _format;
+  constructor(config = {}) {
+    super({ ...config, xtype: "datecolumn" });
+    this._format = config.format ?? "Y-m-d";
+  }
+  formatValue(value) {
+    if (!value) return "";
+    const d = value instanceof Date ? value : new Date(String(value));
+    if (isNaN(d.getTime())) return String(value);
+    const Y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return this._format.replace("Y", String(Y)).replace("m", m).replace("d", day);
+  }
+};
+var BooleanColumn = class extends Column {
+  _trueText;
+  _falseText;
+  constructor(config = {}) {
+    super({ ...config, xtype: "booleancolumn" });
+    this._trueText = config.trueText ?? "true";
+    this._falseText = config.falseText ?? "false";
+  }
+  formatValue(value) {
+    return value ? this._trueText : this._falseText;
+  }
+};
+var CheckColumn = class extends Column {
+  constructor(config = {}) {
+    super({ ...config, xtype: "checkcolumn" });
+  }
+  renderCellHtml(value, _metaData, _record, _rowIndex, _colIndex) {
+    const checked = value ? " checked" : "";
+    return `<input type="checkbox"${checked} class="x-check-col-input" />`;
+  }
+};
+var ActionColumn = class extends Column {
+  _actions;
+  constructor(config = {}) {
+    super({ ...config, xtype: "actioncolumn", sortable: false });
+    this._actions = config.actions ?? [];
+  }
+  get actions() {
+    return this._actions;
+  }
+  renderCellHtml(_value, _metaData, _record, rowIndex, _colIndex) {
+    return this._actions.map(
+      (a, ai) => `<span class="x-action-col-icon ${a.iconCls ?? ""}" title="${a.tooltip ?? ""}" data-action="${ai}" data-row="${rowIndex}"></span>`
+    ).join("");
+  }
+};
+var RowNumbererColumn = class extends Column {
+  constructor(config = {}) {
+    super({ text: "#", width: 40, sortable: false, ...config, xtype: "rownumberer", dataIndex: "" });
+  }
+  renderCellHtml(_value, _metaData, _record, rowIndex, _colIndex) {
+    return String(rowIndex + 1);
+  }
+};
+function createColumn(config) {
+  switch (config.xtype) {
+    case "numbercolumn":
+      return new NumberColumn(config);
+    case "datecolumn":
+      return new DateColumn(config);
+    case "booleancolumn":
+      return new BooleanColumn(config);
+    case "checkcolumn":
+      return new CheckColumn(config);
+    case "actioncolumn":
+      return new ActionColumn(config);
+    case "rownumberer":
+      return new RowNumbererColumn(config);
+    default:
+      return new Column(config);
+  }
+}
+
+// src/grid/HeaderContainer.ts
+var HeaderContainer = class {
+  columns;
+  headerRow = null;
+  thElements = [];
+  constructor(config) {
+    this.columns = config.columns;
+  }
+  render() {
+    this.headerRow = document.createElement("tr");
+    this.headerRow.classList.add("x-grid-header-row");
+    this.thElements = [];
+    for (const col of this.columns) {
+      const th = document.createElement("th");
+      th.classList.add("x-column-header");
+      th.textContent = col.text;
+      if (col.width > 0) th.style.width = `${col.width}px`;
+      if (col.hidden) th.style.display = "none";
+      if (col.align) th.style.textAlign = col.align;
+      th.setAttribute("data-dataindex", col.dataIndex);
+      this.thElements.push(th);
+      this.headerRow.appendChild(th);
+    }
+    return this.headerRow;
+  }
+  getColumns() {
+    return this.columns;
+  }
+  getThElements() {
+    return this.thElements;
+  }
+  setColumnHidden(index, hidden) {
+    const th = this.thElements[index];
+    if (th) th.style.display = hidden ? "none" : "";
+  }
+  setSortIndicator(index, direction) {
+    for (const th of this.thElements) {
+      th.classList.remove("x-column-header-sort-ASC", "x-column-header-sort-DESC");
+    }
+    if (direction !== null && this.thElements[index]) {
+      this.thElements[index].classList.add(`x-column-header-sort-${direction}`);
+    }
+  }
+};
+
+// src/grid/GridView.ts
+var GridView = class {
+  store;
+  columns;
+  emptyText;
+  tableEl = null;
+  tbodyEl = null;
+  theadEl = null;
+  headerContainer;
+  /** Event listeners set by Grid */
+  onItemClick;
+  onItemDblClick;
+  /** Set by RowSelectionModel so selection classes survive refresh() */
+  isSelected;
+  constructor(config) {
+    this.store = config.store;
+    this.columns = config.columns;
+    this.emptyText = config.emptyText ?? "";
+    this.headerContainer = new HeaderContainer({ columns: this.columns });
+  }
+  render() {
+    this.tableEl = document.createElement("table");
+    this.tableEl.classList.add("x-grid-table");
+    this.tableEl.style.width = "100%";
+    this.tableEl.style.borderCollapse = "collapse";
+    this.theadEl = document.createElement("thead");
+    const headerRow = this.headerContainer.render();
+    this.theadEl.appendChild(headerRow);
+    this.tableEl.appendChild(this.theadEl);
+    this.tbodyEl = document.createElement("tbody");
+    this.tableEl.appendChild(this.tbodyEl);
+    this.renderRows();
+    return this.tableEl;
+  }
+  refresh() {
+    this.renderRows();
+  }
+  renderRows() {
+    if (!this.tbodyEl) return;
+    this.tbodyEl.innerHTML = "";
+    const records = this.store.getRange();
+    if (records.length === 0 && this.emptyText) {
+      const emptyRow = document.createElement("tr");
+      const emptyTd = document.createElement("td");
+      emptyTd.colSpan = this.columns.length;
+      emptyTd.classList.add("x-grid-empty");
+      emptyTd.textContent = this.emptyText;
+      emptyRow.appendChild(emptyTd);
+      this.tbodyEl.appendChild(emptyRow);
+      return;
+    }
+    for (let rowIdx = 0; rowIdx < records.length; rowIdx++) {
+      const record = records[rowIdx];
+      const tr = this.createRow(record, rowIdx);
+      this.tbodyEl.appendChild(tr);
+    }
+  }
+  createRow(record, rowIndex) {
+    const tr = document.createElement("tr");
+    tr.classList.add("x-grid-row");
+    if (rowIndex % 2 === 1) tr.classList.add("x-grid-row-alt");
+    if (this.isSelected?.(record)) tr.classList.add("x-grid-row-selected");
+    tr.setAttribute("data-rowindex", String(rowIndex));
+    for (let colIdx = 0; colIdx < this.columns.length; colIdx++) {
+      const col = this.columns[colIdx];
+      const td = document.createElement("td");
+      td.classList.add("x-grid-cell");
+      if (col.hidden) td.style.display = "none";
+      if (col.align) td.style.textAlign = col.align;
+      if (col.config.tdCls) td.classList.add(col.config.tdCls);
+      const value = col.getCellValue(record);
+      const html = col.renderCellHtml(value, {}, record, rowIndex, colIdx);
+      td.innerHTML = html;
+      if (col instanceof ActionColumn) {
+        td.addEventListener("click", (e) => {
+          const target = e.target.closest(".x-action-col-icon");
+          if (!target) return;
+          const actionIdx = parseInt(target.getAttribute("data-action") ?? "0", 10);
+          const action = col.actions[actionIdx];
+          if (action?.handler) action.handler(record, rowIndex);
+        });
+      }
+      if (col.config.xtype === "checkcolumn") {
+        const input = td.querySelector('input[type="checkbox"]');
+        if (input) {
+          input.addEventListener("change", () => {
+            record.set?.(col.dataIndex, input.checked);
+          });
+        }
+      }
+      tr.appendChild(td);
+    }
+    tr.addEventListener("click", (e) => {
+      this.onItemClick?.(record, rowIndex, e);
+    });
+    tr.addEventListener("dblclick", (e) => {
+      this.onItemDblClick?.(record, rowIndex, e);
+    });
+    return tr;
+  }
+  setColumnHidden(index, hidden) {
+    this.headerContainer.setColumnHidden(index, hidden);
+    if (this.tbodyEl) {
+      for (const row of this.tbodyEl.rows) {
+        if (row.cells[index]) {
+          row.cells[index].style.display = hidden ? "none" : "";
+        }
+      }
+    }
+  }
+  getTable() {
+    return this.tableEl;
+  }
+};
+
+// src/grid/Grid.ts
+var Grid = class extends Panel {
+  static $className = "Ext.grid.Grid";
+  constructor(config = {}) {
+    super({ xtype: "grid", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._store = cfg.store ?? null;
+    this._columns = (cfg.columns ?? []).map((c) => c instanceof Column ? c : createColumn(c));
+    this._gridView = null;
+    this._sortableColumns = cfg.sortableColumns ?? true;
+    this._sortDirection = "ASC";
+    this._sortColumnIndex = -1;
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this.el.classList.add("x-grid");
+    if (!this._store) return;
+    this._gridView = new GridView({
+      store: this._store,
+      columns: this._columns,
+      emptyText: cfg.emptyText
+    });
+    this._gridView.onItemClick = (record, rowIndex, event) => {
+      this.fire("itemclick", this, record, rowIndex, event);
+    };
+    this._gridView.onItemDblClick = (record, rowIndex, event) => {
+      this.fire("itemdblclick", this, record, rowIndex, event);
+    };
+    const body = this.getBodyEl();
+    const table = this._gridView.render();
+    body.appendChild(table);
+    if (this._sortableColumns) {
+      this.setupSortableHeaders();
+    }
+    if (this._store?.on) {
+      this._store.on("datachanged", () => this.onStoreDataChanged());
+      this._store.on("sort", () => this.onStoreDataChanged());
+      this._store.on("filter", () => this.onStoreDataChanged());
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Sorting
+  // -----------------------------------------------------------------------
+  setupSortableHeaders() {
+    const ths = this._gridView.headerContainer.getThElements();
+    for (let i = 0; i < ths.length; i++) {
+      const col = this._columns[i];
+      if (!col.sortable) continue;
+      ths[i].style.cursor = "pointer";
+      ths[i].addEventListener("click", () => {
+        this.onHeaderClick(i);
+      });
+    }
+  }
+  onHeaderClick(colIndex) {
+    const col = this._columns[colIndex];
+    if (!col.sortable || !col.dataIndex) return;
+    if (this._sortColumnIndex === colIndex) {
+      this._sortDirection = this._sortDirection === "ASC" ? "DESC" : "ASC";
+    } else {
+      this._sortDirection = "ASC";
+      this._sortColumnIndex = colIndex;
+    }
+    this._gridView.headerContainer.setSortIndicator(colIndex, this._sortDirection);
+    if (this._store?.sort) {
+      this._store.sort(col.dataIndex, this._sortDirection);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Column visibility
+  // -----------------------------------------------------------------------
+  hideColumn(index) {
+    if (this._gridView) {
+      this._gridView.setColumnHidden(index, true);
+    }
+  }
+  showColumn(index) {
+    if (this._gridView) {
+      this._gridView.setColumnHidden(index, false);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Store data changed
+  // -----------------------------------------------------------------------
+  onStoreDataChanged() {
+    if (this._gridView) {
+      this._gridView.refresh();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Accessors
+  // -----------------------------------------------------------------------
+  getStore() {
+    return this._store;
+  }
+  getColumns() {
+    return [...this._columns];
+  }
+  getView() {
+    return this._gridView;
+  }
+};
+
+// src/grid/feature/Grouping.ts
+var Grouping = class {
+  grid = null;
+  groupField;
+  startCollapsed;
+  collapsedGroups = /* @__PURE__ */ new Set();
+  groupHeaderTpl;
+  constructor(config) {
+    this.groupField = config.groupField;
+    this.startCollapsed = config.startCollapsed ?? false;
+    this.groupHeaderTpl = config.groupHeaderTpl ?? ((gv) => gv);
+  }
+  init(grid) {
+    this.grid = grid;
+    this.rebuildGroupedView();
+  }
+  collapse(groupValue) {
+    this.collapsedGroups.add(groupValue);
+    this.setGroupRowsVisible(groupValue, false);
+    this.grid?.fire?.("groupcollapse", this.grid, groupValue);
+  }
+  expand(groupValue) {
+    this.collapsedGroups.delete(groupValue);
+    this.setGroupRowsVisible(groupValue, true);
+    this.grid?.fire?.("groupexpand", this.grid, groupValue);
+  }
+  isCollapsed(groupValue) {
+    return this.collapsedGroups.has(groupValue);
+  }
+  rebuildGroupedView() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const tbody = table.querySelector("tbody");
+    if (!tbody) return;
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const groups = this.groupRecords(records);
+    tbody.innerHTML = "";
+    for (const [groupValue, groupRecords] of groups) {
+      if (this.startCollapsed) this.collapsedGroups.add(groupValue);
+      const groupEl = document.createElement("tbody");
+      groupEl.classList.add("x-grid-group");
+      groupEl.setAttribute("data-group", groupValue);
+      const headerRow = document.createElement("tr");
+      headerRow.classList.add("x-grid-group-hd");
+      const headerTd = document.createElement("td");
+      headerTd.colSpan = columns.length;
+      headerTd.classList.add("x-grid-group-title");
+      headerTd.textContent = this.groupHeaderTpl(groupValue, groupRecords);
+      headerRow.appendChild(headerTd);
+      headerRow.style.cursor = "pointer";
+      headerRow.addEventListener("click", () => {
+        if (this.isCollapsed(groupValue)) this.expand(groupValue);
+        else this.collapse(groupValue);
+      });
+      groupEl.appendChild(headerRow);
+      for (let i = 0; i < groupRecords.length; i++) {
+        const rec = groupRecords[i];
+        const tr = document.createElement("tr");
+        tr.classList.add("x-grid-row");
+        if (this.collapsedGroups.has(groupValue)) tr.style.display = "none";
+        for (let ci = 0; ci < columns.length; ci++) {
+          const col = columns[ci];
+          const td = document.createElement("td");
+          td.classList.add("x-grid-cell");
+          const val = col.getCellValue(rec);
+          td.innerHTML = col.renderCellHtml(val, {}, rec, i, ci);
+          tr.appendChild(td);
+        }
+        groupEl.appendChild(tr);
+      }
+      table.appendChild(groupEl);
+    }
+    tbody.remove();
+  }
+  groupRecords(records) {
+    const groups = /* @__PURE__ */ new Map();
+    for (const rec of records) {
+      const val = String(rec.get(this.groupField));
+      if (!groups.has(val)) groups.set(val, []);
+      groups.get(val).push(rec);
+    }
+    return groups;
+  }
+  setGroupRowsVisible(groupValue, visible) {
+    const groupEl = this.grid?.el?.querySelector(`.x-grid-group[data-group="${groupValue}"]`);
+    if (!groupEl) return;
+    const rows = groupEl.querySelectorAll(".x-grid-row");
+    for (const row of rows) {
+      row.style.display = visible ? "" : "none";
+    }
+  }
+};
+
+// src/grid/feature/Summary.ts
+var Summary = class {
+  grid = null;
+  summaryTypes;
+  constructor(config) {
+    this.summaryTypes = config.summaryTypes;
+  }
+  init(grid) {
+    this.grid = grid;
+    this.renderSummary();
+  }
+  renderSummary() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const tr = this.buildSummaryRow(records, columns);
+    const tbody = table.querySelector("tbody");
+    if (tbody) tbody.appendChild(tr);
+  }
+  buildSummaryRow(records, columns) {
+    const tr = document.createElement("tr");
+    tr.classList.add("x-grid-summary-row");
+    for (const col of columns) {
+      const td = document.createElement("td");
+      td.classList.add("x-grid-cell", "x-grid-summary-cell");
+      const type = this.summaryTypes[col.dataIndex];
+      if (type) {
+        td.textContent = String(this.calculate(records, col.dataIndex, type));
+      }
+      tr.appendChild(td);
+    }
+    return tr;
+  }
+  calculate(records, field, type) {
+    if (typeof type === "function") return type(records);
+    const values = records.map((r) => Number(r.get(field))).filter((n) => !isNaN(n));
+    switch (type) {
+      case "sum":
+        return values.reduce((a, b) => a + b, 0);
+      case "count":
+        return records.length;
+      case "average":
+        return values.length ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : 0;
+      case "min":
+        return values.length ? Math.min(...values) : 0;
+      case "max":
+        return values.length ? Math.max(...values) : 0;
+      default:
+        return "";
+    }
+  }
+};
+
+// src/grid/feature/GroupingSummary.ts
+var GroupingSummary = class {
+  grid = null;
+  groupField;
+  summaryTypes;
+  constructor(config) {
+    this.groupField = config.groupField;
+    this.summaryTypes = config.summaryTypes;
+  }
+  init(grid) {
+    this.grid = grid;
+    this.rebuild();
+  }
+  rebuild() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const tbody = table.querySelector("tbody");
+    if (!tbody) return;
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const groups = this.groupRecords(records);
+    tbody.innerHTML = "";
+    for (const [groupValue, groupRecords] of groups) {
+      const groupEl = document.createElement("tbody");
+      groupEl.classList.add("x-grid-group");
+      groupEl.setAttribute("data-group", groupValue);
+      const headerRow = document.createElement("tr");
+      headerRow.classList.add("x-grid-group-hd");
+      const headerTd = document.createElement("td");
+      headerTd.colSpan = columns.length;
+      headerTd.textContent = groupValue;
+      headerRow.appendChild(headerTd);
+      groupEl.appendChild(headerRow);
+      for (let i = 0; i < groupRecords.length; i++) {
+        const rec = groupRecords[i];
+        const tr = document.createElement("tr");
+        tr.classList.add("x-grid-row");
+        for (let ci = 0; ci < columns.length; ci++) {
+          const col = columns[ci];
+          const td = document.createElement("td");
+          td.classList.add("x-grid-cell");
+          td.innerHTML = col.renderCellHtml(col.getCellValue(rec), {}, rec, i, ci);
+          tr.appendChild(td);
+        }
+        groupEl.appendChild(tr);
+      }
+      const sumRow = document.createElement("tr");
+      sumRow.classList.add("x-grid-group-summary");
+      for (const col of columns) {
+        const td = document.createElement("td");
+        td.classList.add("x-grid-cell");
+        const type = this.summaryTypes[col.dataIndex];
+        if (type) td.textContent = String(this.calculate(groupRecords, col.dataIndex, type));
+        sumRow.appendChild(td);
+      }
+      groupEl.appendChild(sumRow);
+      table.appendChild(groupEl);
+    }
+    tbody.remove();
+  }
+  groupRecords(records) {
+    const groups = /* @__PURE__ */ new Map();
+    for (const rec of records) {
+      const val = String(rec.get(this.groupField));
+      if (!groups.has(val)) groups.set(val, []);
+      groups.get(val).push(rec);
+    }
+    return groups;
+  }
+  calculate(records, field, type) {
+    if (typeof type === "function") return type(records);
+    const values = records.map((r) => Number(r.get(field))).filter((n) => !isNaN(n));
+    switch (type) {
+      case "sum":
+        return values.reduce((a, b) => a + b, 0);
+      case "count":
+        return records.length;
+      case "average":
+        return values.length ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : 0;
+      case "min":
+        return values.length ? Math.min(...values) : 0;
+      case "max":
+        return values.length ? Math.max(...values) : 0;
+      default:
+        return "";
+    }
+  }
+};
+
+// src/grid/feature/RowBody.ts
+var RowBody = class {
+  grid = null;
+  getAdditionalData;
+  constructor(config) {
+    this.getAdditionalData = config.getAdditionalData;
+  }
+  init(grid) {
+    this.grid = grid;
+    this.addRowBodies();
+  }
+  addRowBodies() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const tbody = table.querySelector("tbody");
+    if (!tbody) return;
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const rows = Array.from(tbody.querySelectorAll("tr.x-grid-row"));
+    for (let i = 0; i < rows.length && i < records.length; i++) {
+      const rec = records[i];
+      const result = this.getAdditionalData(rec.data, i, rec);
+      const bodyRow = document.createElement("tr");
+      bodyRow.classList.add("x-grid-rowbody");
+      if (result.rowBodyCls) bodyRow.classList.add(result.rowBodyCls);
+      const td = document.createElement("td");
+      td.colSpan = columns.length;
+      td.innerHTML = result.rowBody;
+      bodyRow.appendChild(td);
+      rows[i].after(bodyRow);
+    }
+  }
+};
+
+// src/grid/plugin/CellEditing.ts
+var CellEditing = class {
+  grid = null;
+  activeEditor = null;
+  activeInput = null;
+  activeRecord = null;
+  activeColumn = null;
+  activeCell = null;
+  originalValue = "";
+  init(grid) {
+    this.grid = grid;
+    this.attachCellListeners();
+  }
+  attachCellListeners() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    table.addEventListener("dblclick", (e) => {
+      const td = e.target.closest("td.x-grid-cell");
+      if (!td) return;
+      const tr = td.closest("tr.x-grid-row");
+      if (!tr) return;
+      const rowIdx = parseInt(tr.getAttribute("data-rowindex") ?? "0", 10);
+      const colIdx = Array.from(tr.children).indexOf(td);
+      const columns = this.grid.getColumns();
+      const col = columns[colIdx];
+      if (!col?.config?.editor) return;
+      const store = this.grid.getStore();
+      const record = store.getAt(rowIdx);
+      if (!record) return;
+      this.startEdit(record, col, td);
+    });
+  }
+  startEdit(record, column, cell) {
+    if (this.activeEditor) this.cancelEdit();
+    this.grid?.fire?.("beforeedit", this.grid, { record, column });
+    this.activeRecord = record;
+    this.activeColumn = column;
+    this.activeCell = cell;
+    this.originalValue = String(record.get(column.dataIndex) ?? "");
+    const editor = document.createElement("div");
+    editor.classList.add("x-grid-cell-editor");
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = this.originalValue;
+    input.classList.add("x-grid-editor-input");
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.completeEdit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.cancelEdit();
+      }
+    });
+    editor.appendChild(input);
+    cell.innerHTML = "";
+    cell.appendChild(editor);
+    this.activeEditor = editor;
+    this.activeInput = input;
+    input.focus();
+    input.select();
+  }
+  completeEdit() {
+    if (!this.activeInput || !this.activeRecord || !this.activeColumn || !this.activeCell) return;
+    const newValue = this.activeInput.value;
+    this.activeRecord.set(this.activeColumn.dataIndex, newValue);
+    this.activeCell.innerHTML = newValue;
+    this.grid?.fire?.("edit", this.grid, {
+      record: this.activeRecord,
+      column: this.activeColumn,
+      value: newValue,
+      originalValue: this.originalValue
+    });
+    this.cleanup();
+  }
+  cancelEdit() {
+    if (!this.activeCell) return;
+    this.activeCell.innerHTML = this.originalValue;
+    this.grid?.fire?.("canceledit", this.grid);
+    this.cleanup();
+  }
+  cleanup() {
+    this.activeEditor = null;
+    this.activeInput = null;
+    this.activeRecord = null;
+    this.activeColumn = null;
+    this.activeCell = null;
+    this.originalValue = "";
+  }
+};
+
+// src/grid/plugin/RowEditing.ts
+var RowEditing = class {
+  grid = null;
+  activeRowIndex = -1;
+  editorRow = null;
+  inputs = /* @__PURE__ */ new Map();
+  originalValues = /* @__PURE__ */ new Map();
+  init(grid) {
+    this.grid = grid;
+  }
+  startEdit(rowIndex) {
+    if (this.editorRow) this.cancelEdit();
+    const store = this.grid.getStore();
+    const record = store.getAt(rowIndex);
+    if (!record) return;
+    this.activeRowIndex = rowIndex;
+    const columns = this.grid.getColumns();
+    const table = this.grid.getView()?.getTable?.();
+    if (!table) return;
+    const rows = table.querySelectorAll("tbody tr.x-grid-row");
+    const targetRow = rows[rowIndex];
+    if (!targetRow) return;
+    this.editorRow = document.createElement("tr");
+    this.editorRow.classList.add("x-grid-row-editor");
+    this.inputs.clear();
+    this.originalValues.clear();
+    for (const col of columns) {
+      const td = document.createElement("td");
+      td.classList.add("x-grid-cell");
+      if (col.config?.editor) {
+        const input = document.createElement("input");
+        input.type = "text";
+        const val = String(record.get(col.dataIndex) ?? "");
+        input.value = val;
+        this.inputs.set(col.dataIndex, input);
+        this.originalValues.set(col.dataIndex, val);
+        td.appendChild(input);
+      } else {
+        td.textContent = String(col.getCellValue(record) ?? "");
+      }
+      this.editorRow.appendChild(td);
+    }
+    targetRow.style.display = "none";
+    targetRow.after(this.editorRow);
+    this.grid?.fire?.("beforeedit", this.grid, { record, rowIndex });
+  }
+  completeEdit() {
+    if (this.activeRowIndex < 0 || !this.grid) return;
+    const store = this.grid.getStore();
+    const record = store.getAt(this.activeRowIndex);
+    if (!record) return;
+    for (const [field, input] of this.inputs) {
+      record.set(field, input.value);
+    }
+    this.grid.fire?.("edit", this.grid, { record, rowIndex: this.activeRowIndex });
+    this.teardown();
+    this.grid.getView()?.refresh?.();
+  }
+  cancelEdit() {
+    this.grid?.fire?.("canceledit", this.grid);
+    this.teardown();
+  }
+  teardown() {
+    if (this.editorRow?.parentNode) {
+      const prev = this.editorRow.previousElementSibling;
+      if (prev) prev.style.display = "";
+      this.editorRow.remove();
+    }
+    this.editorRow = null;
+    this.inputs.clear();
+    this.originalValues.clear();
+    this.activeRowIndex = -1;
+  }
+};
+
+// src/grid/plugin/RowExpander.ts
+var RowExpander = class {
+  grid = null;
+  rowBodyTpl;
+  singleExpand;
+  expandedRows = /* @__PURE__ */ new Set();
+  constructor(config) {
+    this.rowBodyTpl = config.rowBodyTpl;
+    this.singleExpand = config.singleExpand ?? false;
+  }
+  init(grid) {
+    this.grid = grid;
+    this.addExpanders();
+  }
+  addExpanders() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const rows = table.querySelectorAll("tbody tr.x-grid-row");
+    for (let i = 0; i < rows.length && i < records.length; i++) {
+      const row = rows[i];
+      const record = records[i];
+      const expanderTd = document.createElement("td");
+      expanderTd.classList.add("x-grid-cell");
+      const btn = document.createElement("span");
+      btn.classList.add("x-grid-row-expander");
+      btn.textContent = "+";
+      btn.style.cursor = "pointer";
+      expanderTd.appendChild(btn);
+      row.insertBefore(expanderTd, row.firstChild);
+      btn.addEventListener("click", () => {
+        this.toggle(i, record, row, columns.length + 1);
+      });
+    }
+  }
+  toggle(rowIndex, record, row, colSpan) {
+    if (this.expandedRows.has(rowIndex)) {
+      this.collapseRow(rowIndex, row);
+    } else {
+      if (this.singleExpand) this.collapseAll();
+      this.expandRow(rowIndex, record, row, colSpan);
+    }
+  }
+  expandRow(rowIndex, record, row, colSpan) {
+    this.expandedRows.add(rowIndex);
+    const bodyRow = document.createElement("tr");
+    bodyRow.classList.add("x-grid-rowexpand-body");
+    bodyRow.setAttribute("data-expand-row", String(rowIndex));
+    const td = document.createElement("td");
+    td.colSpan = colSpan;
+    td.innerHTML = this.rowBodyTpl(record);
+    bodyRow.appendChild(td);
+    row.after(bodyRow);
+  }
+  collapseRow(rowIndex, _row) {
+    this.expandedRows.delete(rowIndex);
+    const table = this.grid?.getView?.()?.getTable?.();
+    if (!table) return;
+    const bodyRow = table.querySelector(`tr[data-expand-row="${rowIndex}"]`);
+    bodyRow?.remove();
+  }
+  collapseAll() {
+    const table = this.grid?.getView?.()?.getTable?.();
+    if (!table) return;
+    for (const idx of this.expandedRows) {
+      const bodyRow = table.querySelector(`tr[data-expand-row="${idx}"]`);
+      bodyRow?.remove();
+    }
+    this.expandedRows.clear();
+  }
+};
+
+// src/grid/plugin/Clipboard.ts
+var GridClipboard = class {
+  grid = null;
+  init(grid) {
+    this.grid = grid;
+  }
+  getGridText() {
+    if (!this.grid) return "";
+    const store = this.grid.getStore();
+    const records = store.getRange();
+    const columns = this.grid.getColumns();
+    const lines = [];
+    lines.push(columns.map((c) => c.text).join("	"));
+    for (const rec of records) {
+      const cells = columns.map((c) => {
+        const val = c.getCellValue(rec);
+        return val === null || val === void 0 ? "" : String(val);
+      });
+      lines.push(cells.join("	"));
+    }
+    return lines.join("\n");
+  }
+  async doCopy() {
+    const text = this.getGridText();
+    this.grid?.fire?.("beforecopy", this.grid, text);
+    try {
+      if (navigator?.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      }
+    } catch {
+    }
+    this.grid?.fire?.("copy", this.grid, text);
+  }
+};
+
+// src/grid/plugin/DragDrop.ts
+var GridDragDrop = class {
+  grid = null;
+  init(grid) {
+    this.grid = grid;
+    this.setupDrag();
+  }
+  setupDrag() {
+    const view = this.grid?.getView?.();
+    if (!view) return;
+    const table = view.getTable?.();
+    if (!table) return;
+    const rows = table.querySelectorAll("tbody tr.x-grid-row");
+    for (const row of rows) {
+      row.setAttribute("draggable", "true");
+      row.addEventListener("dragstart", (e) => {
+        const idx = row.getAttribute("data-rowindex");
+        e.dataTransfer?.setData("text/plain", idx ?? "");
+        this.grid?.fire?.("beforedrop", this.grid, parseInt(idx ?? "0", 10));
+      });
+      row.addEventListener("dragover", (e) => {
+        e.preventDefault();
+      });
+      row.addEventListener("drop", (e) => {
+        e.preventDefault();
+        const fromIdx = parseInt(e.dataTransfer?.getData("text/plain") ?? "0", 10);
+        const toIdx = parseInt(row.getAttribute("data-rowindex") ?? "0", 10);
+        if (fromIdx !== toIdx) this.moveRow(fromIdx, toIdx);
+      });
+    }
+  }
+  moveRow(fromIndex, toIndex) {
+    const store = this.grid?.getStore?.();
+    if (!store) return;
+    const records = store.data?.items;
+    if (!records || fromIndex >= records.length) return;
+    const [moved] = records.splice(fromIndex, 1);
+    records.splice(toIndex, 0, moved);
+    this.grid?.fire?.("drop", this.grid, moved, fromIndex, toIndex);
+    this.grid?.getView?.()?.refresh?.();
+  }
+};
+
+// src/grid/selection/RowSelectionModel.ts
+var RowSelectionModel = class {
+  grid = null;
+  mode;
+  checkboxSelect;
+  selected = /* @__PURE__ */ new Set();
+  listeners = {};
+  constructor(config = {}) {
+    this.mode = config.mode ?? "SINGLE";
+    this.checkboxSelect = config.checkboxSelect ?? false;
+  }
+  on(event, fn) {
+    (this.listeners[event] ??= []).push(fn);
+  }
+  fire(event, ...args) {
+    (this.listeners[event] ?? []).forEach((fn) => fn(...args));
+  }
+  init(grid) {
+    this.grid = grid;
+    this.attachRowListeners();
+    const view = grid.getView();
+    if (view) view.isSelected = (record) => this.selected.has(record);
+    if (this.checkboxSelect) this.addCheckboxColumn();
+  }
+  // -----------------------------------------------------------------------
+  // Selection API
+  // -----------------------------------------------------------------------
+  select(record, keepExisting = false) {
+    if (!record) return;
+    this.fire("beforeselect", this, record);
+    if (this.mode === "SINGLE") {
+      for (const r of this.selected) {
+        if (r !== record) this.doDeselect(r);
+      }
+      if (this.selected.has(record)) return;
+      this.doSelect(record);
+    } else if (this.mode === "SIMPLE") {
+      if (this.selected.has(record)) {
+        this.doDeselect(record);
+      } else {
+        this.doSelect(record);
+      }
+    } else {
+      if (keepExisting) {
+        if (this.selected.has(record)) {
+          this.doDeselect(record);
+          return;
+        }
+        this.doSelect(record);
+      } else {
+        for (const r of this.selected) {
+          if (r !== record) this.doDeselect(r);
+        }
+        this.doSelect(record);
+      }
+    }
+  }
+  deselect(record) {
+    if (this.selected.has(record)) {
+      this.doDeselect(record);
+    }
+  }
+  selectRange(start, end) {
+    const store = this.grid?.getStore();
+    if (!store) return;
+    const records = store.getRange();
+    const startIdx = records.indexOf(start);
+    const endIdx = records.indexOf(end);
+    if (startIdx < 0 || endIdx < 0) return;
+    const low = Math.min(startIdx, endIdx);
+    const high = Math.max(startIdx, endIdx);
+    for (let i = low; i <= high; i++) {
+      this.doSelect(records[i]);
+    }
+  }
+  selectAll() {
+    const store = this.grid?.getStore();
+    if (!store) return;
+    for (const rec of store.getRange()) {
+      this.doSelect(rec);
+    }
+  }
+  deselectAll() {
+    for (const rec of [...this.selected]) {
+      this.doDeselect(rec);
+    }
+  }
+  getSelection() {
+    return [...this.selected];
+  }
+  isSelected(record) {
+    return this.selected.has(record);
+  }
+  getCount() {
+    return this.selected.size;
+  }
+  // -----------------------------------------------------------------------
+  // Internal
+  // -----------------------------------------------------------------------
+  doSelect(record) {
+    if (this.selected.has(record)) return;
+    this.selected.add(record);
+    this.updateRowClass(record, true);
+    this.fire("select", this, record);
+    this.fire("selectionchange", this, this.getSelection());
+  }
+  doDeselect(record) {
+    this.selected.delete(record);
+    this.updateRowClass(record, false);
+    this.fire("deselect", this, record);
+    this.fire("selectionchange", this, this.getSelection());
+  }
+  updateRowClass(record, selected) {
+    const store = this.grid?.getStore();
+    if (!store) return;
+    const records = store.getRange();
+    const idx = records.indexOf(record);
+    if (idx < 0) return;
+    const view = this.grid.getView();
+    const table = view?.getTable();
+    if (!table) return;
+    const row = table.querySelector(`tbody tr[data-rowindex="${idx}"]`);
+    if (row) {
+      row.classList.toggle("x-grid-row-selected", selected);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Row click listener
+  // -----------------------------------------------------------------------
+  attachRowListeners() {
+    const view = this.grid?.getView();
+    const table = view?.getTable();
+    if (!table) return;
+    table.addEventListener("click", (e) => {
+      const tr = e.target.closest("tr.x-grid-row");
+      if (!tr) return;
+      if (e.target.closest(".x-grid-row-checker")) return;
+      const rowIdx = parseInt(tr.getAttribute("data-rowindex") ?? "-1", 10);
+      const store = this.grid.getStore();
+      if (!store) return;
+      const record = store.getAt(rowIdx);
+      if (!record) return;
+      if (this.mode === "MULTI" && e.ctrlKey) {
+        this.select(record, true);
+      } else if (this.mode === "MULTI" && e.shiftKey) {
+        const sel = this.getSelection();
+        const anchor = sel.length > 0 ? sel[sel.length - 1] : record;
+        this.deselectAll();
+        this.selectRange(anchor, record);
+      } else if (this.mode === "SIMPLE") {
+        this.select(record);
+      } else {
+        this.select(record);
+      }
+    });
+  }
+  // -----------------------------------------------------------------------
+  // Checkbox column
+  // -----------------------------------------------------------------------
+  addCheckboxColumn() {
+    const view = this.grid?.getView();
+    const table = view?.getTable();
+    if (!table) return;
+    const store = this.grid.getStore();
+    if (!store) return;
+    const records = store.getRange();
+    const thead = table.querySelector("thead tr");
+    if (thead) {
+      const th = document.createElement("th");
+      th.classList.add("x-column-header");
+      const headerCb = document.createElement("input");
+      headerCb.type = "checkbox";
+      headerCb.classList.add("x-grid-header-checker");
+      headerCb.addEventListener("click", () => {
+        if (headerCb.checked) this.selectAll();
+        else this.deselectAll();
+      });
+      th.appendChild(headerCb);
+      thead.insertBefore(th, thead.firstChild);
+    }
+    const rows = table.querySelectorAll("tbody tr.x-grid-row");
+    for (let i = 0; i < rows.length && i < records.length; i++) {
+      const row = rows[i];
+      const record = records[i];
+      const td = document.createElement("td");
+      td.classList.add("x-grid-cell");
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.classList.add("x-grid-row-checker");
+      cb.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (cb.checked) {
+          this.doSelect(record);
+        } else {
+          this.doDeselect(record);
+        }
+      });
+      td.appendChild(cb);
+      row.insertBefore(td, row.firstChild);
+    }
+  }
+};
+
+// src/grid/selection/CellSelectionModel.ts
+var CellSelectionModel = class {
+  grid = null;
+  position = null;
+  listeners = {};
+  maxRow = 0;
+  maxCol = 0;
+  on(event, fn) {
+    (this.listeners[event] ??= []).push(fn);
+  }
+  fire(event, ...args) {
+    (this.listeners[event] ?? []).forEach((fn) => fn(...args));
+  }
+  init(grid) {
+    this.grid = grid;
+    const store = grid.getStore();
+    this.maxRow = (store?.getCount() ?? 1) - 1;
+    this.maxCol = grid.getColumns().length - 1;
+    this.attachListeners();
+  }
+  getCurrentPosition() {
+    return this.position ? { ...this.position } : null;
+  }
+  // -----------------------------------------------------------------------
+  // Internal
+  // -----------------------------------------------------------------------
+  selectCell(row, col) {
+    this.clearSelection();
+    row = Math.max(0, Math.min(row, this.maxRow));
+    col = Math.max(0, Math.min(col, this.maxCol));
+    this.position = { row, column: col };
+    const cell = this.getCellElement(row, col);
+    if (cell) cell.classList.add("x-grid-cell-selected");
+    this.fire("selectionchange", this, this.position);
+  }
+  clearSelection() {
+    if (!this.grid) return;
+    const table = this.grid.getView()?.getTable();
+    if (!table) return;
+    const selected = table.querySelectorAll(".x-grid-cell-selected");
+    for (const el of selected) el.classList.remove("x-grid-cell-selected");
+  }
+  getCellElement(row, col) {
+    const table = this.grid?.getView()?.getTable();
+    if (!table) return null;
+    const tr = table.querySelector(`tbody tr[data-rowindex="${row}"]`);
+    if (!tr) return null;
+    return tr.children[col] ?? null;
+  }
+  attachListeners() {
+    const view = this.grid?.getView();
+    const table = view?.getTable();
+    if (!table) return;
+    table.addEventListener("click", (e) => {
+      const td = e.target.closest("td.x-grid-cell");
+      if (!td) return;
+      const tr = td.closest("tr.x-grid-row");
+      if (!tr) return;
+      const rowIdx = parseInt(tr.getAttribute("data-rowindex") ?? "0", 10);
+      const colIdx = Array.from(tr.children).indexOf(td);
+      this.selectCell(rowIdx, colIdx);
+    });
+    if (this.grid.el) {
+      this.grid.el.setAttribute("tabindex", "0");
+      this.grid.el.addEventListener("keydown", (e) => {
+        if (!this.position) return;
+        let { row, column } = this.position;
+        switch (e.key) {
+          case "ArrowRight":
+            column++;
+            break;
+          case "ArrowLeft":
+            column--;
+            break;
+          case "ArrowDown":
+            row++;
+            break;
+          case "ArrowUp":
+            row--;
+            break;
+          case "Tab":
+            e.preventDefault();
+            if (e.shiftKey) column--;
+            else column++;
+            break;
+          default:
+            return;
+        }
+        this.selectCell(row, column);
+      });
+    }
+  }
+};
+
+// src/grid/selection/SpreadsheetSelectionModel.ts
+var SpreadsheetSelectionModel = class {
+  grid = null;
+  range = null;
+  listeners = {};
+  on(event, fn) {
+    (this.listeners[event] ??= []).push(fn);
+  }
+  fire(event, ...args) {
+    (this.listeners[event] ?? []).forEach((fn) => fn(...args));
+  }
+  init(grid) {
+    this.grid = grid;
+    this.attachListeners();
+  }
+  getSelectedRange() {
+    return this.range ? { ...this.range } : null;
+  }
+  // -----------------------------------------------------------------------
+  // Internal
+  // -----------------------------------------------------------------------
+  attachListeners() {
+    const view = this.grid?.getView?.();
+    const table = view?.getTable?.();
+    if (!table) return;
+    table.addEventListener("click", (e) => {
+      const td = e.target.closest("td.x-grid-cell");
+      if (!td) return;
+      const tr = td.closest("tr.x-grid-row");
+      if (!tr) return;
+      const rowIdx = parseInt(tr.getAttribute("data-rowindex") ?? "0", 10);
+      const colIdx = Array.from(tr.children).indexOf(td);
+      if (e.shiftKey && this.range) {
+        this.range = {
+          startRow: this.range.startRow,
+          startCol: this.range.startCol,
+          endRow: rowIdx,
+          endCol: colIdx
+        };
+      } else {
+        this.range = {
+          startRow: rowIdx,
+          startCol: colIdx,
+          endRow: rowIdx,
+          endCol: colIdx
+        };
+      }
+      this.highlightRange();
+      this.fire("selectionchange", this, this.range);
+    });
+  }
+  highlightRange() {
+    const table = this.grid?.getView()?.getTable?.();
+    if (!table || !this.range) return;
+    const prev = table.querySelectorAll(".x-grid-cell-selected");
+    for (const el of prev) el.classList.remove("x-grid-cell-selected");
+    const { startRow, startCol, endRow, endCol } = this.range;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+    const rows = table.querySelectorAll("tbody tr.x-grid-row");
+    for (let r = minRow; r <= maxRow && r < rows.length; r++) {
+      const row = rows[r];
+      for (let c = minCol; c <= maxCol && c < row.children.length; c++) {
+        row.children[c].classList.add("x-grid-cell-selected");
+      }
+    }
+  }
+};
+
+// src/grid/Lockable.ts
+var Lockable = class {
+  grid = null;
+  init(grid) {
+    this.grid = grid;
+    this.rebuild();
+  }
+  rebuild() {
+    const grid = this.grid;
+    const view = grid?.getView?.();
+    const table = view?.getTable?.();
+    if (!table || !grid.el) return;
+    const store = grid.getStore();
+    const records = store.getRange();
+    const columns = grid.getColumns();
+    const lockedCols = columns.filter((c) => c.config?.locked);
+    const normalCols = columns.filter((c) => !c.config?.locked);
+    if (lockedCols.length === 0) return;
+    const body = grid.getBodyEl();
+    table.remove();
+    const container = document.createElement("div");
+    container.classList.add("x-grid-lock-container");
+    container.style.display = "flex";
+    container.style.width = "100%";
+    container.style.overflow = "hidden";
+    const lockedPanel = document.createElement("div");
+    lockedPanel.classList.add("x-grid-locked");
+    lockedPanel.style.overflowX = "hidden";
+    lockedPanel.style.overflowY = "auto";
+    lockedPanel.style.flexShrink = "0";
+    lockedPanel.appendChild(this.buildTable(lockedCols, records));
+    const normalPanel = document.createElement("div");
+    normalPanel.classList.add("x-grid-normal");
+    normalPanel.style.overflowX = "auto";
+    normalPanel.style.overflowY = "auto";
+    normalPanel.style.flexGrow = "1";
+    normalPanel.appendChild(this.buildTable(normalCols, records));
+    lockedPanel.addEventListener("scroll", () => {
+      normalPanel.scrollTop = lockedPanel.scrollTop;
+    });
+    normalPanel.addEventListener("scroll", () => {
+      lockedPanel.scrollTop = normalPanel.scrollTop;
+    });
+    container.appendChild(lockedPanel);
+    container.appendChild(normalPanel);
+    body.appendChild(container);
+  }
+  buildTable(columns, records) {
+    const table = document.createElement("table");
+    table.classList.add("x-grid-table");
+    table.style.width = "100%";
+    table.style.borderCollapse = "collapse";
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    for (const col of columns) {
+      const th = document.createElement("th");
+      th.classList.add("x-column-header");
+      th.textContent = col.text;
+      if (col.width > 0) th.style.width = `${col.width}px`;
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    for (let ri = 0; ri < records.length; ri++) {
+      const rec = records[ri];
+      const tr = document.createElement("tr");
+      tr.classList.add("x-grid-row");
+      tr.setAttribute("data-rowindex", String(ri));
+      if (ri % 2 === 1) tr.classList.add("x-grid-row-alt");
+      for (let ci = 0; ci < columns.length; ci++) {
+        const col = columns[ci];
+        const td = document.createElement("td");
+        td.classList.add("x-grid-cell");
+        const val = col.getCellValue(rec);
+        td.innerHTML = col.renderCellHtml(val, {}, rec, ri, ci);
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    return table;
+  }
+};
+
+// src/grid/state/GridState.ts
+var GridState = class {
+  grid = null;
+  stateId;
+  constructor(config) {
+    this.stateId = config.stateId;
+  }
+  init(grid) {
+    this.grid = grid;
+  }
+  get storageKey() {
+    return `ext-grid-state-${this.stateId}`;
+  }
+  save() {
+    if (!this.grid) return;
+    const columns = this.grid.getColumns();
+    const view = this.grid.getView?.();
+    const ths = view?.headerContainer?.getThElements?.() ?? [];
+    const colState = columns.map((col, i) => ({
+      dataIndex: col.dataIndex,
+      width: col.width,
+      hidden: ths[i] ? ths[i].style.display === "none" : col.hidden
+    }));
+    const state = { columns: colState };
+    const sortIdx = this.grid._sortColumnIndex;
+    const sortDir = this.grid._sortDirection;
+    if (sortIdx >= 0 && columns[sortIdx]) {
+      state.sort = {
+        field: columns[sortIdx].dataIndex,
+        direction: sortDir
+      };
+    }
+    localStorage.setItem(this.storageKey, JSON.stringify(state));
+  }
+  restore() {
+    if (!this.grid) return;
+    const raw = localStorage.getItem(this.storageKey);
+    if (!raw) return;
+    let state;
+    try {
+      state = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    const columns = this.grid.getColumns();
+    if (state.columns) {
+      for (const saved of state.columns) {
+        const idx = columns.findIndex((c) => c.dataIndex === saved.dataIndex);
+        if (idx < 0) continue;
+        if (saved.hidden) {
+          this.grid.hideColumn(idx);
+        } else {
+          this.grid.showColumn(idx);
+        }
+      }
+    }
+  }
+  clear() {
+    localStorage.removeItem(this.storageKey);
+  }
+};
+
+// src/tree/TreePanel.ts
+import { Panel as Panel2 } from "@framesquared/ui";
+var TreePanel = class extends Panel2 {
+  static $className = "Ext.tree.Panel";
+  constructor(config = {}) {
+    super({ xtype: "treepanel", ...config });
+  }
+  initialize() {
+    super.initialize();
+    const cfg = this._config;
+    this._treeStore = cfg.store;
+    this._rootVisible = cfg.rootVisible ?? true;
+    this._singleExpand = cfg.singleExpand ?? false;
+    this._checkable = cfg.checkable ?? false;
+    this._cascadeCheck = cfg.cascadeCheck ?? false;
+    this._treeBody = null;
+    this._checkedSet = /* @__PURE__ */ new Set();
+  }
+  afterRender() {
+    super.afterRender();
+    const cfg = this._config;
+    this.el.classList.add("x-treepanel");
+    if (cfg.useArrows) this.el.classList.add("x-tree-arrows");
+    if (cfg.lines) this.el.classList.add("x-tree-lines");
+    this._treeBody = document.createElement("div");
+    this._treeBody.classList.add("x-tree-body");
+    this.getBodyEl().appendChild(this._treeBody);
+    this.renderTree();
+  }
+  // -----------------------------------------------------------------------
+  // Rendering
+  // -----------------------------------------------------------------------
+  refresh() {
+    this.renderTree();
+  }
+  renderTree() {
+    if (!this._treeBody || !this._treeStore) return;
+    this._treeBody.innerHTML = "";
+    const nodes = this._treeStore.getVisibleNodes(this._rootVisible);
+    for (const node of nodes) {
+      this._treeBody.appendChild(this.createNodeElement(node));
+    }
+  }
+  createNodeElement(node) {
+    const row = document.createElement("div");
+    row.classList.add("x-tree-node");
+    row.setAttribute("data-node-id", node.id);
+    const indent = document.createElement("span");
+    indent.classList.add("x-tree-indent");
+    const indentLevel = this._rootVisible ? node.depth : Math.max(0, node.depth - 1);
+    indent.style.paddingLeft = `${indentLevel * 20}px`;
+    row.appendChild(indent);
+    if (!node.leaf) {
+      const expander = document.createElement("span");
+      expander.classList.add("x-tree-expander");
+      expander.textContent = node.expanded ? "\u25BE" : "\u25B8";
+      expander.style.cursor = "pointer";
+      expander.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleNode(node);
+      });
+      row.appendChild(expander);
+    } else {
+      const spacer = document.createElement("span");
+      spacer.classList.add("x-tree-expander-spacer");
+      spacer.textContent = " ";
+      row.appendChild(spacer);
+    }
+    if (this._checkable) {
+      const cb = document.createElement("input");
+      cb.type = "checkbox";
+      cb.classList.add("x-tree-checkbox");
+      cb.checked = node.checked;
+      cb.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const checked = cb.checked;
+        node.checked = checked;
+        if (this._cascadeCheck) {
+          this._treeStore.cascadeCheck(node, checked);
+        }
+        this.fire("checkchange", this, node, checked);
+        this.renderTree();
+      });
+      row.appendChild(cb);
+    }
+    const icon = document.createElement("span");
+    icon.classList.add("x-tree-icon", node.leaf ? "x-tree-icon-leaf" : "x-tree-icon-folder");
+    row.appendChild(icon);
+    const text = document.createElement("span");
+    text.classList.add("x-tree-node-text");
+    text.textContent = node.text;
+    row.appendChild(text);
+    return row;
+  }
+  // -----------------------------------------------------------------------
+  // Expand / Collapse
+  // -----------------------------------------------------------------------
+  toggleNode(node) {
+    if (node.expanded) {
+      this.collapseNode(node);
+    } else {
+      this.expandNode(node);
+    }
+  }
+  expandNode(node) {
+    this.fire("beforeitemexpand", this, node);
+    if (this._singleExpand && node.parent) {
+      for (const sibling of node.parent.children) {
+        if (sibling !== node && sibling.expanded) {
+          this._treeStore.collapseAll(sibling);
+        }
+      }
+    }
+    node.expanded = true;
+    this.fire("itemexpand", this, node);
+    this.renderTree();
+  }
+  collapseNode(node) {
+    this.fire("beforeitemcollapse", this, node);
+    node.expanded = false;
+    this.fire("itemcollapse", this, node);
+    this.renderTree();
+  }
+  expandAll() {
+    this._treeStore.expandAll();
+    this.renderTree();
+  }
+  collapseAll() {
+    this._treeStore.collapseAll();
+    this.renderTree();
+  }
+  async expandPath(path) {
+    const node = this._treeStore.findByPath(path);
+    if (!node) return;
+    this._treeStore.expandToNode(node);
+    this.renderTree();
+  }
+  // -----------------------------------------------------------------------
+  // Checkbox
+  // -----------------------------------------------------------------------
+  getChecked() {
+    return this._treeStore.getChecked();
+  }
+  // -----------------------------------------------------------------------
+  // Accessors
+  // -----------------------------------------------------------------------
+  getStore() {
+    return this._treeStore;
+  }
+};
+
+// src/tree/TreeStore.ts
+var nodeCounter = 0;
+function buildNode(cfg, parent, depth) {
+  const node = {
+    id: cfg.id ?? `tree-node-${nodeCounter++}`,
+    text: cfg.text,
+    leaf: cfg.leaf ?? (!cfg.children || cfg.children.length === 0),
+    expanded: cfg.expanded ?? false,
+    checked: cfg.checked ?? false,
+    children: [],
+    parent,
+    depth,
+    data: { ...cfg }
+  };
+  if (cfg.children) {
+    node.children = cfg.children.map((c) => buildNode(c, node, depth + 1));
+  }
+  return node;
+}
+var TreeStore = class {
+  root;
+  nodeMap = /* @__PURE__ */ new Map();
+  constructor(config) {
+    nodeCounter = 0;
+    this.root = buildNode(config.root, null, 0);
+    this.buildMap(this.root);
+  }
+  buildMap(node) {
+    this.nodeMap.set(node.id, node);
+    for (const child of node.children) this.buildMap(child);
+  }
+  getRoot() {
+    return this.root;
+  }
+  getNodeById(id) {
+    return this.nodeMap.get(id) ?? null;
+  }
+  /**
+   * Returns visible nodes in display order (respecting expanded state).
+   * If rootVisible is true, the root is included.
+   */
+  getVisibleNodes(rootVisible = true) {
+    const result = [];
+    const walk = (node, include) => {
+      if (include) result.push(node);
+      if (node.expanded || node === this.root && !include) {
+      }
+      if (node.expanded) {
+        for (const child of node.children) walk(child, true);
+      }
+    };
+    if (rootVisible) {
+      walk(this.root, true);
+    } else {
+      for (const child of this.root.children) walk(child, true);
+    }
+    return result;
+  }
+  appendChild(parent, childCfg) {
+    const child = buildNode(childCfg, parent, parent.depth + 1);
+    parent.children.push(child);
+    parent.leaf = false;
+    this.buildMap(child);
+    return child;
+  }
+  removeNode(id) {
+    const node = this.nodeMap.get(id);
+    if (!node || !node.parent) return false;
+    const parent = node.parent;
+    const idx = parent.children.indexOf(node);
+    if (idx >= 0) parent.children.splice(idx, 1);
+    this.removeFromMap(node);
+    return true;
+  }
+  removeFromMap(node) {
+    this.nodeMap.delete(node.id);
+    for (const child of node.children) this.removeFromMap(child);
+  }
+  getPath(node) {
+    const parts = [];
+    let current = node;
+    while (current) {
+      parts.unshift(current.text);
+      current = current.parent;
+    }
+    return "/" + parts.join("/");
+  }
+  findByPath(path) {
+    const parts = path.split("/").filter(Boolean);
+    let current = this.root;
+    if (parts[0] !== current.text) return null;
+    for (let i = 1; i < parts.length; i++) {
+      const child = current.children.find((c) => c.text === parts[i]);
+      if (!child) return null;
+      current = child;
+    }
+    return current;
+  }
+  /** Expand all ancestors of a node so it becomes visible. */
+  expandToNode(node) {
+    let current = node.parent;
+    while (current) {
+      current.expanded = true;
+      current = current.parent;
+    }
+  }
+  /** Set expanded=true on all non-leaf nodes. */
+  expandAll(node) {
+    const target = node ?? this.root;
+    if (!target.leaf) target.expanded = true;
+    for (const child of target.children) this.expandAll(child);
+  }
+  /** Set expanded=false on all nodes. */
+  collapseAll(node) {
+    const target = node ?? this.root;
+    target.expanded = false;
+    for (const child of target.children) this.collapseAll(child);
+  }
+  /** Cascade checked state to all descendants. */
+  cascadeCheck(node, checked) {
+    node.checked = checked;
+    for (const child of node.children) this.cascadeCheck(child, checked);
+  }
+  /** Get all checked nodes. */
+  getChecked(node) {
+    const result = [];
+    const walk = (n) => {
+      if (n.checked) result.push(n);
+      for (const child of n.children) walk(child);
+    };
+    walk(node ?? this.root);
+    return result;
+  }
+  // Store-like interface for Grid compatibility
+  getRange() {
+    return this.getVisibleNodes(true);
+  }
+  getCount() {
+    return this.getRange().length;
+  }
+  getAt(i) {
+    return this.getRange()[i];
+  }
+  get(field) {
+    return this.root[field];
+  }
+  on(_evt, _fn) {
+  }
+  sort() {
+  }
+  isLoading() {
+    return false;
+  }
+  getTotalCount() {
+    return this.getCount();
+  }
+};
+export {
+  ActionColumn,
+  BooleanColumn,
+  CellEditing,
+  CellSelectionModel,
+  CheckColumn,
+  Column,
+  DateColumn,
+  Grid,
+  GridClipboard,
+  GridDragDrop,
+  GridState,
+  GridView,
+  Grouping,
+  GroupingSummary,
+  HeaderContainer,
+  Lockable,
+  NumberColumn,
+  RowBody,
+  RowEditing,
+  RowExpander,
+  RowNumbererColumn,
+  RowSelectionModel,
+  SpreadsheetSelectionModel,
+  Summary,
+  TreePanel,
+  TreeStore,
+  createColumn
+};
+//# sourceMappingURL=index.js.map