@ornery/ui-grid-vanilla 0.1.7

package/dist/index.mjs

@@ -0,0 +1,1495 @@
+// src/index.ts
+import { registerRustWasmGridEngine } from "@ornery/ui-grid-core";
+
+// src/ui-grid-standalone.element.ts
+import {
+  GRID_CORE_CSS,
+  SORT_DIRECTIONS as SORT_DIRECTIONS2,
+  canGridMoveColumns as canGridMoveColumns2,
+  downloadGridCsvFile,
+  exportCsvRows,
+  getCellValue as getCellValue2,
+  sanitizeDownloadFilename
+} from "@ornery/ui-grid-core";
+
+// src/grid-controller.ts
+import {
+  SORT_DIRECTIONS,
+  beginGridCellEditCommand,
+  buildGridRows,
+  buildGridCellContext,
+  cancelGridCellEditCommand,
+  canGridExpandRows,
+  canGridMoveColumns,
+  clearGridFiltersCommand,
+  clearGridGroupingCommand,
+  commitGridCellEditCommand,
+  computePinnedOffset,
+  createGridApi,
+  defaultGridEngine,
+  expandAllGridRowsCommand,
+  expandAllGridTreeRowsCommand,
+  findGridRowById as coreFindGridRowById,
+  formatGridCellDisplayValue,
+  getCellValue,
+  getCurrentPageValue,
+  getEffectivePageSize,
+  getFirstRowIndexValue,
+  getLastRowIndexValue,
+  getTotalPagesValue,
+  gridCellIndent,
+  gridColumnWidth,
+  gridEditorInputType,
+  gridExpandToggleLabelForRow,
+  gridFilterPlaceholder,
+  gridGroupingButtonLabel,
+  gridSortButtonLabel,
+  gridTreeToggleLabelForRow,
+  headerLabel,
+  isGridColumnFilterable,
+  isGridColumnGrouped,
+  isGridColumnSortable,
+  isGridFilteringEnabled,
+  isGridGroupingEnabled,
+  isGridPaginationEnabled,
+  isGridSortingEnabled,
+  isGridTreeEnabled,
+  isGridTreeRowExpanded,
+  isPinningEnabled,
+  isColumnPinnable,
+  gridGroupDisclosureLabel,
+  moveGridVisibleColumnCommand,
+  parseGridEditedValue,
+  pinGridColumnCommand,
+  resolveGridLabels,
+  resolveGridRowId as coreResolveGridRowId,
+  seekGridPaginationCommand,
+  setGridPaginationPageSizeCommand,
+  setPathValue,
+  shouldShowGridExpandToggle,
+  shouldShowGridPaginationControls,
+  shouldShowGridTreeToggle,
+  sortGridColumnCommand,
+  toggleGridGroupingCommand,
+  toggleGridRowExpansionCommand,
+  toggleGridTreeRowCommand,
+  updateGridFilterCommand
+} from "@ornery/ui-grid-core";
+function orderVisibleColumns(columns, order) {
+  return [...columns].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
+}
+function buildGridTemplateColumns(columns) {
+  return columns.map((column) => gridColumnWidth(column)).join(" ");
+}
+var VanillaGridController = class {
+  options;
+  activeFilters = {};
+  sortState = {
+    columnName: null,
+    direction: SORT_DIRECTIONS.none
+  };
+  groupByColumns = [];
+  collapsedGroups = {};
+  hiddenRowReasons = {};
+  expandedRows = {};
+  expandedTreeRows = {};
+  pinnedColumns = {};
+  columnOrder = [];
+  currentPage = 1;
+  pageSize = 0;
+  editingCell = null;
+  editingValue = "";
+  pipeline;
+  labels;
+  visibleColumns = [];
+  apiRegistered = false;
+  subscribers = /* @__PURE__ */ new Set();
+  gridApi;
+  constructor(options) {
+    this.options = options;
+    this.labels = resolveGridLabels(options.labels);
+    this.columnOrder = options.columnDefs.map((column) => column.name);
+    this.pipeline = {
+      visibleRows: [],
+      displayItems: [],
+      virtualizationEnabled: false,
+      pipelineMs: 0,
+      totalItems: 0
+    };
+    this.gridApi = createGridApi({
+      refresh: () => this.refresh(),
+      getVisibleRows: () => this.pipeline.visibleRows,
+      setRowInvisible: (row, reason) => this.setRowInvisible(row, reason),
+      clearRowInvisible: (row, reason) => this.clearRowInvisible(row, reason),
+      setFilter: (columnName, value) => this.setFilter(columnName, value),
+      clearAllFilters: () => this.clearAllFilters(),
+      sortColumn: (columnName, direction) => this.sortColumn(columnName, direction),
+      moveColumn: (fromIndex, toIndex) => {
+        const visibleNames = this.visibleColumns.map((column) => column.name);
+        const source = visibleNames[fromIndex];
+        const target = visibleNames[toIndex];
+        if (source && target) {
+          this.moveVisibleColumn(source, target);
+        }
+      },
+      pinColumn: (columnName, direction) => this.pinColumn(columnName, direction),
+      toggleGrouping: (columnName) => this.toggleGrouping(columnName),
+      clearGrouping: () => this.clearGrouping(),
+      benchmark: (iterations) => this.benchmark(iterations),
+      exportCsv: () => {
+      },
+      paginationGetPage: () => this.getCurrentPage(),
+      paginationGetTotalPages: () => this.getTotalPages(),
+      paginationGetFirstRowIndex: () => this.getFirstRowIndex(),
+      paginationGetLastRowIndex: () => this.getLastRowIndex(),
+      paginationNextPage: () => this.seekPage(this.currentPage + 1),
+      paginationPreviousPage: () => this.seekPage(this.currentPage - 1),
+      paginationSeek: (page) => this.seekPage(page),
+      paginationSetPageSize: (pageSize) => this.setPageSize(pageSize),
+      toggleRowExpansion: (row) => this.toggleRowExpansion(row),
+      expandAllRows: () => this.expandAllRows(),
+      collapseAllRows: () => this.collapseAllRows(),
+      toggleAllRows: () => {
+        if (Object.keys(this.expandedRows).length > 0) {
+          this.collapseAllRows();
+          return;
+        }
+        this.expandAllRows();
+      },
+      treeToggleRow: (row) => this.toggleTreeRow(row),
+      treeExpandAllRows: () => this.expandAllTreeRows(),
+      treeCollapseAllRows: () => this.collapseAllTreeRows(),
+      treeExpandRow: (row) => this.setTreeRowExpanded(row, true),
+      treeCollapseRow: (row) => this.setTreeRowExpanded(row, false),
+      treeGetRowChildren: (row) => {
+        const rowId = this.resolveRowId(row);
+        return this.pipeline.visibleRows.filter((candidate) => candidate.parentId === rowId);
+      },
+      treeGetState: () => ({ ...this.expandedTreeRows }),
+      treeSetState: (state) => {
+        this.expandedTreeRows = { ...state };
+        this.refresh();
+      },
+      beginCellEdit: (row, columnName, triggerEvent) => this.beginCellEdit(row, columnName, triggerEvent),
+      endCellEdit: () => {
+        this.commitCellEdit();
+      },
+      cancelCellEdit: () => {
+        this.cancelCellEdit();
+      },
+      getEditingCell: () => this.editingCell
+    });
+    this.refresh();
+  }
+  setOptions(options) {
+    this.options = options;
+    this.labels = resolveGridLabels(options.labels);
+    if (this.columnOrder.length === 0) {
+      this.columnOrder = options.columnDefs.map((column) => column.name);
+    } else {
+      const names = new Set(options.columnDefs.map((column) => column.name));
+      this.columnOrder = this.columnOrder.filter((name) => names.has(name));
+      for (const column of options.columnDefs) {
+        if (!this.columnOrder.includes(column.name)) {
+          this.columnOrder.push(column.name);
+        }
+      }
+    }
+    this.apiRegistered = false;
+    this.refresh();
+  }
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    subscriber(this.getSnapshot());
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+  getSnapshot() {
+    const totalPages = this.getTotalPages();
+    return {
+      options: this.options,
+      labels: this.labels,
+      rowSize: this.getRowSize(),
+      visibleColumns: this.visibleColumns,
+      gridTemplateColumns: buildGridTemplateColumns(this.visibleColumns),
+      pipeline: this.pipeline,
+      activeFilters: this.activeFilters,
+      sortState: this.sortState,
+      groupByColumns: this.groupByColumns,
+      pinnedColumns: this.pinnedColumns,
+      currentPage: this.getCurrentPage(),
+      totalPages,
+      firstRowIndex: this.getFirstRowIndex(),
+      lastRowIndex: this.getLastRowIndex(),
+      pageSize: this.getEffectivePageSize(),
+      editingCell: this.editingCell,
+      editingValue: this.editingValue
+    };
+  }
+  getDisplayItems() {
+    return this.pipeline.displayItems;
+  }
+  setCollapsedGroup(groupId, collapsed) {
+    this.collapsedGroups = {
+      ...this.collapsedGroups,
+      [groupId]: collapsed
+    };
+    this.refresh();
+  }
+  toggleSort(columnName) {
+    const current = this.sortState.columnName === columnName ? this.sortState.direction : SORT_DIRECTIONS.none;
+    if (current === SORT_DIRECTIONS.none) {
+      this.sortColumn(columnName, SORT_DIRECTIONS.asc);
+      return;
+    }
+    if (current === SORT_DIRECTIONS.asc) {
+      this.sortColumn(columnName, SORT_DIRECTIONS.desc);
+      return;
+    }
+    this.sortColumn(columnName, SORT_DIRECTIONS.none);
+  }
+  sortColumn(columnName, direction = SORT_DIRECTIONS.none) {
+    sortGridColumnCommand(
+      this.gridApi,
+      (next) => {
+        this.sortState = next;
+      },
+      columnName,
+      direction
+    );
+    this.refresh();
+  }
+  setFilter(columnName, value) {
+    updateGridFilterCommand(
+      this.gridApi,
+      (updater) => {
+        this.activeFilters = updater(this.activeFilters);
+      },
+      () => this.activeFilters,
+      columnName,
+      value
+    );
+    this.currentPage = 1;
+    this.refresh();
+  }
+  clearAllFilters() {
+    clearGridFiltersCommand(this.gridApi, (next) => {
+      this.activeFilters = next;
+    });
+    this.currentPage = 1;
+    this.refresh();
+  }
+  toggleGrouping(columnName) {
+    toggleGridGroupingCommand(
+      this.gridApi,
+      isGridGroupingEnabled(this.options),
+      (updater) => {
+        this.groupByColumns = updater(this.groupByColumns);
+      },
+      () => this.groupByColumns,
+      columnName
+    );
+    this.refresh();
+  }
+  clearGrouping() {
+    clearGridGroupingCommand(this.gridApi, (next) => {
+      this.groupByColumns = next;
+    });
+    this.refresh();
+  }
+  seekPage(page) {
+    seekGridPaginationCommand(
+      this.gridApi,
+      (next) => {
+        this.currentPage = next;
+      },
+      () => this.getTotalPages(),
+      () => this.getEffectivePageSize(),
+      page
+    );
+    this.refresh();
+  }
+  setPageSize(pageSize) {
+    setGridPaginationPageSizeCommand(
+      this.gridApi,
+      (next) => {
+        this.pageSize = next;
+      },
+      (next) => {
+        this.currentPage = next;
+      },
+      pageSize
+    );
+    this.refresh();
+  }
+  pinColumn(columnName, direction) {
+    pinGridColumnCommand(
+      this.gridApi,
+      isPinningEnabled(this.options),
+      (next) => {
+        this.pinnedColumns = next;
+      },
+      () => this.pinnedColumns,
+      columnName,
+      direction
+    );
+    this.refresh();
+  }
+  moveVisibleColumn(columnName, targetColumnName) {
+    moveGridVisibleColumnCommand(
+      this.gridApi,
+      canGridMoveColumns(this.options),
+      this.columnOrder,
+      this.visibleColumns.map((column) => column.name),
+      columnName,
+      targetColumnName,
+      (next) => {
+        this.columnOrder = next;
+      }
+    );
+    this.refresh();
+  }
+  toggleRowExpansion(row) {
+    const rowId = this.resolveRowId(row);
+    toggleGridRowExpansionCommand(
+      this.gridApi,
+      canGridExpandRows(this.options),
+      this.expandedRows,
+      rowId,
+      (next) => {
+        this.expandedRows = next;
+      },
+      (candidateRowId) => this.findRowById(candidateRowId)
+    );
+    this.refresh();
+  }
+  expandAllRows() {
+    expandAllGridRowsCommand(
+      (data) => this.buildRowsFromData(data),
+      this.options.data,
+      (next) => {
+        this.expandedRows = next;
+      }
+    );
+    this.refresh();
+  }
+  collapseAllRows() {
+    this.expandedRows = {};
+    this.refresh();
+  }
+  toggleTreeRow(row) {
+    const rowId = this.resolveRowId(row);
+    toggleGridTreeRowCommand(
+      this.gridApi,
+      this.expandedTreeRows,
+      rowId,
+      (next) => {
+        this.expandedTreeRows = next;
+      },
+      (candidateRowId) => this.findRowById(candidateRowId)
+    );
+    this.refresh();
+  }
+  expandAllTreeRows() {
+    expandAllGridTreeRowsCommand(
+      (data) => this.buildRowsFromData(data),
+      this.options.data,
+      (next) => {
+        this.expandedTreeRows = next;
+      }
+    );
+    this.refresh();
+  }
+  collapseAllTreeRows() {
+    this.expandedTreeRows = {};
+    this.refresh();
+  }
+  setTreeRowExpanded(row, expanded) {
+    const rowId = this.resolveRowId(row);
+    if (expanded) {
+      this.expandedTreeRows = {
+        ...this.expandedTreeRows,
+        [rowId]: true
+      };
+    } else {
+      const nextState = { ...this.expandedTreeRows };
+      delete nextState[rowId];
+      this.expandedTreeRows = nextState;
+    }
+    this.refresh();
+  }
+  beginCellEdit(row, columnName, triggerEvent) {
+    const rowId = this.resolveRowId(row);
+    const gridRow = this.findRowById(rowId);
+    const column = this.findColumnByName(columnName);
+    if (!gridRow || !column) {
+      return;
+    }
+    beginGridCellEditCommand(
+      this.gridApi,
+      {
+        setFocusedCell: () => {
+        },
+        setEditingCell: (next) => {
+          this.editingCell = next;
+        },
+        setEditingValue: (next) => {
+          this.editingValue = next;
+        }
+      },
+      gridRow,
+      column,
+      getCellValue(gridRow.entity, column),
+      triggerEvent
+    );
+    this.refresh();
+  }
+  updateEditingValue(value) {
+    this.editingValue = value;
+    this.emit();
+  }
+  commitCellEdit() {
+    commitGridCellEditCommand(this.gridApi, {
+      getEditingCell: () => this.editingCell,
+      getEditingValue: () => this.editingValue,
+      setEditingCell: (next) => {
+        this.editingCell = next;
+      },
+      setEditingValue: (next) => {
+        this.editingValue = next;
+      },
+      findRowById: (rowId) => this.findRowById(rowId),
+      findColumnByName: (columnName) => this.findColumnByName(columnName),
+      parseEditedValue: (column, value, oldValue) => parseGridEditedValue(column, value, oldValue),
+      setCellValue: (rowEntity, column, value) => setPathValue(rowEntity, column.field ?? column.name, value)
+    });
+    this.refresh();
+  }
+  cancelCellEdit() {
+    cancelGridCellEditCommand(this.gridApi, {
+      getEditingCell: () => this.editingCell,
+      setEditingCell: (next) => {
+        this.editingCell = next;
+      },
+      setEditingValue: (next) => {
+        this.editingValue = next;
+      },
+      findRowById: (rowId) => this.findRowById(rowId),
+      findColumnByName: (columnName) => this.findColumnByName(columnName)
+    });
+    this.refresh();
+  }
+  isGroupingEnabled() {
+    return isGridGroupingEnabled(this.options);
+  }
+  isSortingEnabled() {
+    return isGridSortingEnabled(this.options);
+  }
+  isFilteringEnabled() {
+    return isGridFilteringEnabled(this.options);
+  }
+  isPaginationEnabled() {
+    return isGridPaginationEnabled(this.options);
+  }
+  shouldShowPaginationControls() {
+    return shouldShowGridPaginationControls(this.options);
+  }
+  isTreeEnabled() {
+    return isGridTreeEnabled(this.options);
+  }
+  isExpandableEnabled() {
+    return canGridExpandRows(this.options);
+  }
+  isColumnSortable(column) {
+    return isGridColumnSortable(this.options, column);
+  }
+  isColumnFilterable(column) {
+    return isGridColumnFilterable(this.options, column);
+  }
+  isColumnGrouped(column) {
+    return isGridColumnGrouped(this.groupByColumns, column);
+  }
+  sortButtonLabel(column) {
+    return gridSortButtonLabel(this.getSortDirection(column), this.labels);
+  }
+  groupingButtonLabel(column) {
+    return gridGroupingButtonLabel(this.isColumnGrouped(column), this.labels);
+  }
+  filterPlaceholder(column) {
+    return gridFilterPlaceholder(this.isColumnFilterable(column), this.labels);
+  }
+  getSortDirection(column) {
+    return this.sortState.columnName === column.name ? this.sortState.direction : SORT_DIRECTIONS.none;
+  }
+  isPinningEnabled() {
+    return isPinningEnabled(this.options);
+  }
+  isColumnPinnable(column) {
+    return isColumnPinnable(this.options, column);
+  }
+  isPinned(column) {
+    return this.pinnedColumns[column.name] !== void 0;
+  }
+  isPinnedLeftLast(column) {
+    const leftPinned = this.visibleColumns.filter((c) => this.pinnedColumns[c.name] === "left");
+    return leftPinned.length > 0 && leftPinned[leftPinned.length - 1].name === column.name;
+  }
+  isPinnedRightFirst(column) {
+    const rightPinned = this.visibleColumns.filter((c) => this.pinnedColumns[c.name] === "right");
+    return rightPinned.length > 0 && rightPinned[0].name === column.name;
+  }
+  groupDisclosureLabel(group) {
+    return gridGroupDisclosureLabel(group.collapsed, this.labels);
+  }
+  pinnedOffset(column) {
+    return computePinnedOffset(this.visibleColumns, this.pinnedColumns, column);
+  }
+  displayValue(row, column) {
+    return formatGridCellDisplayValue(buildGridCellContext(row, column));
+  }
+  headerLabel(column) {
+    return headerLabel(column);
+  }
+  cellIndent(row, column) {
+    return gridCellIndent(this.options, this.visibleColumns, row, column);
+  }
+  showTreeToggle(row, column) {
+    return shouldShowGridTreeToggle(this.options, this.visibleColumns, row, column);
+  }
+  showExpandToggle(_row, column) {
+    return shouldShowGridExpandToggle(this.options, this.visibleColumns, column);
+  }
+  isTreeRowExpanded(row) {
+    return isGridTreeRowExpanded(this.expandedTreeRows, row);
+  }
+  treeToggleLabel(row) {
+    return gridTreeToggleLabelForRow(this.expandedTreeRows, row, this.labels);
+  }
+  expandToggleLabel(row) {
+    return gridExpandToggleLabelForRow(row, this.labels);
+  }
+  editorInputType(column) {
+    return gridEditorInputType(column);
+  }
+  isEditingCell(rowId, columnName) {
+    return this.editingCell?.rowId === rowId && this.editingCell?.columnName === columnName;
+  }
+  getState() {
+    return {
+      sortState: { ...this.sortState },
+      activeFilters: { ...this.activeFilters },
+      groupByColumns: [...this.groupByColumns],
+      pinnedColumns: { ...this.pinnedColumns },
+      columnOrder: [...this.columnOrder],
+      currentPage: this.currentPage,
+      pageSize: this.pageSize
+    };
+  }
+  setState(state) {
+    if (state.sortState !== void 0) this.sortState = { ...state.sortState };
+    if (state.activeFilters !== void 0) this.activeFilters = { ...state.activeFilters };
+    if (state.groupByColumns !== void 0) this.groupByColumns = [...state.groupByColumns];
+    if (state.pinnedColumns !== void 0) this.pinnedColumns = { ...state.pinnedColumns };
+    if (state.columnOrder !== void 0) this.columnOrder = [...state.columnOrder];
+    if (state.currentPage !== void 0) this.currentPage = state.currentPage;
+    if (state.pageSize !== void 0) this.pageSize = state.pageSize;
+    this.refresh();
+  }
+  refresh() {
+    const orderedColumns = orderVisibleColumns(this.options.columnDefs, this.columnOrder);
+    const pinnedEntries = Object.entries(this.pinnedColumns);
+    if (pinnedEntries.length === 0) {
+      this.visibleColumns = orderedColumns;
+    } else {
+      const byName = new Map(orderedColumns.map((column) => [column.name, column]));
+      const pinnedLeft = pinnedEntries.filter((entry) => entry[1] === "left").map((entry) => byName.get(entry[0])).filter((column) => column !== void 0);
+      const pinnedRight = pinnedEntries.filter((entry) => entry[1] === "right").map((entry) => byName.get(entry[0])).filter((column) => column !== void 0);
+      const middleColumns = orderedColumns.filter(
+        (column) => this.pinnedColumns[column.name] === void 0
+      );
+      this.visibleColumns = [...pinnedLeft, ...middleColumns, ...pinnedRight];
+    }
+    this.pipeline = defaultGridEngine.buildPipeline({
+      options: this.options,
+      columns: this.visibleColumns,
+      activeFilters: this.activeFilters,
+      sortState: this.sortState,
+      groupByColumns: this.groupByColumns,
+      collapsedGroups: this.collapsedGroups,
+      hiddenRowReasons: this.hiddenRowReasons,
+      expandedRows: this.expandedRows,
+      expandedTreeRows: this.expandedTreeRows,
+      currentPage: this.currentPage,
+      pageSize: this.pageSize,
+      rowSize: this.getRowSize()
+    });
+    if (!this.apiRegistered) {
+      this.options.onRegisterApi?.(this.gridApi);
+      this.apiRegistered = true;
+    }
+    this.emit();
+  }
+  emit() {
+    const snapshot = this.getSnapshot();
+    for (const subscriber of this.subscribers) {
+      subscriber(snapshot);
+    }
+  }
+  findRowById(rowId) {
+    return coreFindGridRowById(this.buildRowsFromData(this.options.data), rowId);
+  }
+  buildRowsFromData(data) {
+    return buildGridRows(
+      { ...this.options, data },
+      this.getRowSize(),
+      this.hiddenRowReasons,
+      this.expandedRows
+    );
+  }
+  findColumnByName(columnName) {
+    return this.visibleColumns.find((column) => column.name === columnName);
+  }
+  resolveRowId(row) {
+    return coreResolveGridRowId(this.options, row);
+  }
+  getRowSize() {
+    return this.options.rowHeight ?? 44;
+  }
+  getTotalPages() {
+    return getTotalPagesValue(this.options, this.pipeline.totalItems, this.pageSize);
+  }
+  getEffectivePageSize() {
+    return getEffectivePageSize(this.options, this.pageSize, this.pipeline.totalItems);
+  }
+  getCurrentPage() {
+    return getCurrentPageValue(
+      this.options,
+      this.currentPage,
+      this.pipeline.totalItems,
+      this.pageSize
+    );
+  }
+  getFirstRowIndex() {
+    return getFirstRowIndexValue(
+      this.options,
+      this.currentPage,
+      this.pipeline.totalItems,
+      this.pageSize
+    );
+  }
+  getLastRowIndex() {
+    return getLastRowIndexValue(
+      this.options,
+      this.currentPage,
+      this.pipeline.totalItems,
+      this.pageSize
+    );
+  }
+  setRowInvisible(row, reason) {
+    const rowId = this.resolveRowId(row);
+    const next = { ...this.hiddenRowReasons };
+    const reasonValue = reason ?? "api";
+    next[rowId] = [...next[rowId] ?? [], reasonValue];
+    this.hiddenRowReasons = next;
+    this.refresh();
+  }
+  clearRowInvisible(row, reason) {
+    const rowId = this.resolveRowId(row);
+    const existing = this.hiddenRowReasons[rowId] ?? [];
+    if (existing.length === 0) {
+      return;
+    }
+    if (!reason) {
+      const next2 = { ...this.hiddenRowReasons };
+      delete next2[rowId];
+      this.hiddenRowReasons = next2;
+      this.refresh();
+      return;
+    }
+    const filtered = existing.filter((entry) => entry !== reason);
+    const next = { ...this.hiddenRowReasons };
+    if (filtered.length > 0) {
+      next[rowId] = filtered;
+    } else {
+      delete next[rowId];
+    }
+    this.hiddenRowReasons = next;
+    this.refresh();
+  }
+  benchmark(iterations) {
+    const now = () => typeof performance === "undefined" ? Date.now() : performance.now();
+    const loops = Math.max(1, iterations ?? this.options.benchmark?.iterations ?? 25);
+    const started = now();
+    let lastResult = this.pipeline;
+    for (let index = 0; index < loops; index += 1) {
+      lastResult = defaultGridEngine.buildPipeline({
+        options: this.options,
+        columns: this.visibleColumns,
+        activeFilters: this.activeFilters,
+        sortState: this.sortState,
+        groupByColumns: this.groupByColumns,
+        collapsedGroups: this.collapsedGroups,
+        hiddenRowReasons: this.hiddenRowReasons,
+        expandedRows: this.expandedRows,
+        expandedTreeRows: this.expandedTreeRows,
+        currentPage: this.currentPage,
+        pageSize: this.pageSize,
+        rowSize: this.getRowSize()
+      });
+    }
+    const elapsedMs = now() - started;
+    const result = {
+      iterations: loops,
+      totalMs: elapsedMs,
+      averageMs: elapsedMs / loops,
+      visibleRows: lastResult.visibleRows.length,
+      renderedItems: lastResult.displayItems.length
+    };
+    this.gridApi.core.raise.benchmarkComplete(result);
+    return result;
+  }
+};
+function createVanillaGridController(options) {
+  return new VanillaGridController(options);
+}
+
+// src/ui-grid-standalone.element.ts
+function escapeHtml(value) {
+  const text = String(value ?? "");
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function asGroupItem(item) {
+  return item;
+}
+function isRowItem(item) {
+  return item.kind === "row";
+}
+var DEFAULT_ICONS = {
+  sortNone: { path: "M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z" },
+  sortAsc: { path: "M12 5l-6 6h4v8h4v-8h4z" },
+  sortDesc: { path: "M12 19l6-6h-4V5h-4v8H6z" },
+  group: { path: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" },
+  groupExpanded: { path: "M7 10l5 5 5-5z" },
+  groupCollapsed: { path: "M10 7l5 5-5 5z" },
+  treeExpanded: { path: "M7 10l5 5 5-5z" },
+  treeCollapsed: { path: "M10 7l5 5-5 5z" },
+  expandExpanded: { path: "M7 10l5 5 5-5z" },
+  expandCollapsed: { path: "M10 7l5 5-5 5z" },
+  pin: { path: "M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" },
+  pinLeft: { path: "M10 6 4 12l6 6v-4h10v-4H10V6z" },
+  pinRight: { path: "M14 6v4H4v4h10v4l6-6-6-6z" },
+  paginationPrev: { path: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" },
+  paginationNext: { path: "M8.59 16.59 10 18l6-6-6-6-1.41 1.41L13.17 12z" }
+};
+var UiGridStandaloneElement = class extends HTMLElement {
+  controller = null;
+  snapshot = null;
+  unsubscribe = null;
+  activeOptions = null;
+  iconOverrides = {};
+  templateObserver = null;
+  openPinMenuColumn = null;
+  focusedCell = null;
+  draggedColumnName = null;
+  dropTargetColumnName = null;
+  scrollPosition = 0;
+  scrollFrame = null;
+  suppressScrollEvent = false;
+  lastVirtualStartIndex = -1;
+  measuredHeaderStickyHeight = 0;
+  measuredFilterStickyHeight = 0;
+  stickyHeightRelayoutQueued = false;
+  benchmarkAverage = "\u2014";
+  get options() {
+    return this.activeOptions ?? {
+      id: "__ui-grid-pending__",
+      data: [],
+      columnDefs: []
+    };
+  }
+  set options(value) {
+    this.activeOptions = value;
+    this.iconOverrides = this.activeOptions.iconOverrides ?? {};
+    this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+  }
+  get controlIcons() {
+    return this.iconOverrides;
+  }
+  set controlIcons(value) {
+    this.iconOverrides = { ...value };
+    this.render();
+  }
+  getState() {
+    return this.controller?.getState() ?? null;
+  }
+  setState(state) {
+    this.controller?.setState(state);
+  }
+  connectedCallback() {
+    this.ensureShadowRoot();
+    this.bindEvents();
+    this.observeTemplateSlots();
+    if (this.activeOptions) {
+      this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+    } else {
+      this.render();
+    }
+  }
+  disconnectedCallback() {
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+    this.templateObserver?.disconnect();
+    this.templateObserver = null;
+    if (this.scrollFrame !== null) {
+      cancelAnimationFrame(this.scrollFrame);
+      this.scrollFrame = null;
+    }
+  }
+  ensureShadowRoot() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: "open" });
+    }
+    return this.shadowRoot;
+  }
+  ensureController(options) {
+    if (this.controller) {
+      this.controller.setOptions(options);
+      return;
+    }
+    this.controller = createVanillaGridController(options);
+    this.unsubscribe = this.controller.subscribe((snapshot) => {
+      this.snapshot = snapshot;
+      this.render();
+    });
+  }
+  observeTemplateSlots() {
+    if (this.templateObserver) {
+      return;
+    }
+    this.templateObserver = new MutationObserver(() => {
+      if (this.activeOptions) {
+        this.ensureController(this.buildEffectiveOptions(this.activeOptions));
+      } else {
+        this.render();
+      }
+    });
+    this.templateObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["slot"]
+    });
+  }
+  buildEffectiveOptions(options) {
+    const hasExpandableSlot = this.getTemplateMarkup("expandable-row") !== null;
+    if (options.enableExpandable && hasExpandableSlot && !options.expandableRowTemplate) {
+      return {
+        ...options,
+        expandableRowTemplate: {
+          createEmbeddedView: () => void 0
+        }
+      };
+    }
+    return options;
+  }
+  bindEvents() {
+    const root = this.ensureShadowRoot();
+    if (root.__uiGridBound) {
+      return;
+    }
+    root.addEventListener("click", (event) => {
+      const target = event.target;
+      if (!target || !this.controller || !this.snapshot) {
+        return;
+      }
+      const actionNode = target.closest("[data-action]");
+      if (!actionNode) {
+        return;
+      }
+      const action = actionNode.dataset["action"];
+      if (!action) {
+        return;
+      }
+      if (this.openPinMenuColumn && !target.closest(".pin-control")) {
+        this.openPinMenuColumn = null;
+        this.render();
+        return;
+      }
+      if (action === "sort") {
+        const columnName = actionNode.dataset["column"];
+        if (columnName) {
+          this.controller.toggleSort(columnName);
+        }
+        return;
+      }
+      if (action === "group") {
+        const columnName = actionNode.dataset["column"];
+        if (columnName) {
+          this.controller.toggleGrouping(columnName);
+        }
+        return;
+      }
+      if (action === "toggle-group") {
+        const groupId = actionNode.dataset["group"];
+        if (groupId) {
+          const collapsed = actionNode.dataset["collapsed"] !== "true";
+          this.controller.setCollapsedGroup(groupId, collapsed);
+        }
+        return;
+      }
+      if (action === "pin-trigger") {
+        const columnName = actionNode.dataset["column"];
+        const column = columnName ? this.snapshot.visibleColumns.find((candidate) => candidate.name === columnName) : void 0;
+        if (columnName && column) {
+          if (this.controller.isPinned(column)) {
+            this.openPinMenuColumn = null;
+            this.controller.pinColumn(columnName, "none");
+            return;
+          }
+          this.openPinMenuColumn = this.openPinMenuColumn === columnName ? null : columnName;
+          this.render();
+        }
+        return;
+      }
+      if (action === "pin-left" || action === "pin-right") {
+        const columnName = actionNode.dataset["column"];
+        if (columnName) {
+          this.openPinMenuColumn = null;
+          this.controller.pinColumn(columnName, action === "pin-left" ? "left" : "right");
+        }
+        return;
+      }
+      if (action === "toggle-tree") {
+        const rowId = actionNode.dataset["row"];
+        if (rowId) {
+          this.controller.toggleTreeRow(rowId);
+        }
+        return;
+      }
+      if (action === "toggle-expand") {
+        const rowId = actionNode.dataset["row"];
+        if (rowId) {
+          this.controller.toggleRowExpansion(rowId);
+        }
+        return;
+      }
+      if (action === "page-prev") {
+        this.controller.seekPage(this.snapshot.currentPage - 1);
+        return;
+      }
+      if (action === "page-next") {
+        this.controller.seekPage(this.snapshot.currentPage + 1);
+        return;
+      }
+      if (action === "benchmark") {
+        const result = this.controller.gridApi.core.benchmark();
+        this.benchmarkAverage = result.averageMs.toFixed(2);
+        this.render();
+        return;
+      }
+      if (action === "export-csv") {
+        this.downloadCsv();
+      }
+    });
+    root.addEventListener("focusin", (event) => {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const cell = target.closest(".body-cell[data-row][data-column]");
+      const rowId = cell?.dataset["row"];
+      const columnName = cell?.dataset["column"];
+      if (rowId && columnName) {
+        this.focusedCell = { rowId, columnName };
+      }
+    });
+    root.addEventListener("focusout", (event) => {
+      const relatedTarget = event.relatedTarget;
+      if (!relatedTarget?.closest(".body-cell[data-row][data-column]")) {
+        this.focusedCell = null;
+      }
+    });
+    root.addEventListener("input", (event) => {
+      const target = event.target;
+      if (!target || !this.controller) {
+        return;
+      }
+      if (target instanceof HTMLInputElement && target.dataset["role"] === "filter") {
+        const columnName = target.dataset["column"];
+        if (columnName) {
+          this.controller.setFilter(columnName, target.value);
+        }
+      }
+      if (target instanceof HTMLInputElement && target.dataset["role"] === "editor") {
+        this.controller.updateEditingValue(target.value);
+      }
+    });
+    root.addEventListener("change", (event) => {
+      const target = event.target;
+      if (!target || !this.controller) {
+        return;
+      }
+      if (target instanceof HTMLSelectElement && target.dataset["role"] === "page-size") {
+        const value = Number.parseInt(target.value, 10);
+        this.controller.setPageSize(value);
+      }
+    });
+    root.addEventListener("dblclick", (event) => {
+      const target = event.target;
+      if (!target || !this.controller) {
+        return;
+      }
+      const cell = target.closest(".body-cell");
+      if (!cell) {
+        return;
+      }
+      const rowId = cell.dataset["row"];
+      const columnName = cell.dataset["column"];
+      if (rowId && columnName) {
+        this.controller.beginCellEdit(rowId, columnName, event);
+      }
+    });
+    root.addEventListener("keydown", (event) => {
+      const keyboardEvent = event;
+      const target = event.target;
+      if (!target || !this.controller) {
+        return;
+      }
+      if (target instanceof HTMLInputElement && target.dataset["role"] === "editor") {
+        if (keyboardEvent.key === "Enter") {
+          event.preventDefault();
+          this.controller.commitCellEdit();
+          return;
+        }
+        if (keyboardEvent.key === "Escape") {
+          event.preventDefault();
+          this.controller.cancelCellEdit();
+        }
+        return;
+      }
+      const cell = target.closest(".body-cell");
+      if (!cell) {
+        return;
+      }
+      const rowId = cell.dataset["row"];
+      const columnName = cell.dataset["column"];
+      if (!rowId || !columnName) {
+        return;
+      }
+      if (keyboardEvent.key === "Enter" || keyboardEvent.key === "F2") {
+        event.preventDefault();
+        this.controller.beginCellEdit(rowId, columnName, event);
+        return;
+      }
+      if (keyboardEvent.key.length === 1 && !keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey) {
+        event.preventDefault();
+        this.controller.beginCellEdit(rowId, columnName, event);
+        this.controller.updateEditingValue(keyboardEvent.key);
+      }
+    });
+    root.addEventListener(
+      "blur",
+      (event) => {
+        const target = event.target;
+        if (!target || !this.controller) {
+          return;
+        }
+        if (target instanceof HTMLInputElement && target.dataset["role"] === "editor") {
+          this.controller.commitCellEdit();
+        }
+      },
+      true
+    );
+    root.addEventListener("dragstart", (event) => {
+      const dragEvent = event;
+      const target = event.target;
+      const headerCell = target?.closest(".header-cell[data-column]");
+      if (!headerCell || !this.snapshot || !canGridMoveColumns2(this.snapshot.options)) {
+        event.preventDefault();
+        return;
+      }
+      const columnName = headerCell.dataset["column"];
+      if (!columnName || !dragEvent.dataTransfer) {
+        event.preventDefault();
+        return;
+      }
+      this.draggedColumnName = columnName;
+      this.dropTargetColumnName = null;
+      dragEvent.dataTransfer.effectAllowed = "move";
+      dragEvent.dataTransfer.setData("text/plain", columnName);
+      headerCell.classList.add("is-dragging");
+    });
+    root.addEventListener("dragover", (event) => {
+      const dragEvent = event;
+      const target = event.target;
+      const headerCell = target?.closest(".header-cell[data-column]");
+      if (!headerCell || !this.draggedColumnName || !dragEvent.dataTransfer) {
+        return;
+      }
+      const columnName = headerCell.dataset["column"];
+      if (!columnName || columnName === this.draggedColumnName) {
+        return;
+      }
+      event.preventDefault();
+      dragEvent.dataTransfer.dropEffect = "move";
+      if (this.dropTargetColumnName !== columnName) {
+        root.querySelectorAll(".header-cell.is-drag-target").forEach((element) => element.classList.remove("is-drag-target"));
+        this.dropTargetColumnName = columnName;
+        headerCell.classList.add("is-drag-target");
+      }
+    });
+    root.addEventListener("dragleave", (event) => {
+      const target = event.target;
+      const headerCell = target?.closest(".header-cell[data-column]");
+      if (headerCell && headerCell.dataset["column"] === this.dropTargetColumnName) {
+        headerCell.classList.remove("is-drag-target");
+      }
+    });
+    root.addEventListener("drop", (event) => {
+      event.preventDefault();
+      const dragEvent = event;
+      const target = event.target;
+      const headerCell = target?.closest(".header-cell[data-column]");
+      const targetColumn = headerCell?.dataset["column"];
+      const sourceColumn = this.draggedColumnName ?? dragEvent.dataTransfer?.getData("text/plain") ?? null;
+      this.draggedColumnName = null;
+      this.dropTargetColumnName = null;
+      root.querySelectorAll(".header-cell.is-dragging, .header-cell.is-drag-target").forEach((element) => element.classList.remove("is-dragging", "is-drag-target"));
+      if (!sourceColumn || !targetColumn || sourceColumn === targetColumn || !this.controller) {
+        return;
+      }
+      this.controller.moveVisibleColumn(sourceColumn, targetColumn);
+    });
+    root.addEventListener("dragend", () => {
+      this.draggedColumnName = null;
+      this.dropTargetColumnName = null;
+      root.querySelectorAll(".header-cell.is-dragging, .header-cell.is-drag-target").forEach((element) => element.classList.remove("is-dragging", "is-drag-target"));
+    });
+    root.addEventListener(
+      "scroll",
+      (event) => {
+        const target = event.target;
+        if (!target?.classList.contains("grid-table") || this.suppressScrollEvent) {
+          return;
+        }
+        this.scrollPosition = target.scrollTop;
+        if (!this.snapshot?.pipeline.virtualizationEnabled) {
+          return;
+        }
+        const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+        const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+        const overscan = 4;
+        const nextStartIndex = Math.max(
+          0,
+          Math.floor(bodyScrollTop / this.snapshot.rowSize) - overscan
+        );
+        if (nextStartIndex === this.lastVirtualStartIndex) {
+          return;
+        }
+        if (this.scrollFrame !== null) {
+          cancelAnimationFrame(this.scrollFrame);
+        }
+        this.scrollFrame = requestAnimationFrame(() => {
+          this.scrollFrame = null;
+          this.render();
+        });
+      },
+      true
+    );
+    root.__uiGridBound = true;
+  }
+  render() {
+    const root = this.ensureShadowRoot();
+    const snapshot = this.snapshot;
+    const previousGridTable = root.querySelector(".grid-table");
+    if (previousGridTable && !this.suppressScrollEvent) {
+      this.scrollPosition = previousGridTable.scrollTop;
+    }
+    if (!snapshot) {
+      root.innerHTML = `<style>${GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell"><div class="empty-state ui-grid-no-row-overlay"><strong>No grid options provided.</strong></div></section>`;
+      return;
+    }
+    const controller = this.controller;
+    const options = snapshot.options;
+    const labels = snapshot.labels;
+    const templateColumns = snapshot.gridTemplateColumns;
+    const sortEnabled = controller.isSortingEnabled();
+    const filterEnabled = controller.isFilteringEnabled();
+    const groupingEnabled = controller.isGroupingEnabled();
+    const pinningEnabled = controller.isPinningEnabled();
+    const paginationEnabled = controller.isPaginationEnabled();
+    const showPagination = controller.shouldShowPaginationControls();
+    const virtualizationEnabled = snapshot.pipeline.virtualizationEnabled;
+    const viewportHeight = options.viewportHeight ?? 560;
+    const headerStickyTop = this.measuredHeaderStickyHeight || options.headerRowHeight || 50;
+    const stickyChromeHeight = this.measuredHeaderStickyHeight + this.measuredFilterStickyHeight;
+    const bodyViewportHeight = Math.max(snapshot.rowSize, viewportHeight - stickyChromeHeight);
+    const visibleRowCount = snapshot.pipeline.visibleRows.length;
+    const totalRows = options.data.length;
+    const pinnedCount = Object.keys(snapshot.pinnedColumns).length;
+    let startIndex = 0;
+    let itemsToRender = snapshot.pipeline.displayItems;
+    let virtualOffset = 0;
+    const totalVirtualHeight = snapshot.pipeline.displayItems.length * snapshot.rowSize;
+    if (virtualizationEnabled) {
+      const bodyScrollTop = Math.max(0, this.scrollPosition - stickyChromeHeight);
+      const overscan = 4;
+      startIndex = Math.max(0, Math.floor(bodyScrollTop / snapshot.rowSize) - overscan);
+      this.lastVirtualStartIndex = startIndex;
+      const visibleCount = Math.ceil(bodyViewportHeight / snapshot.rowSize) + overscan * 2;
+      itemsToRender = snapshot.pipeline.displayItems.slice(
+        startIndex,
+        Math.min(snapshot.pipeline.displayItems.length, startIndex + visibleCount)
+      );
+      virtualOffset = startIndex * snapshot.rowSize;
+    } else {
+      this.lastVirtualStartIndex = -1;
+    }
+    const slotRegistry = this.renderSlotRegistry(snapshot.visibleColumns);
+    const header = snapshot.visibleColumns.map(
+      (column) => this.renderHeaderCell(column, sortEnabled, groupingEnabled, pinningEnabled, options)
+    ).join("");
+    const filterRow = filterEnabled ? `<div class="filter-grid ui-grid-header" style="grid-template-columns:${templateColumns}">${snapshot.visibleColumns.map((column) => this.renderFilterCell(column)).join("")}</div>` : "";
+    const bodyContent = itemsToRender.map((item, index) => this.renderDisplayItem(item, startIndex + index)).join("");
+    const body = snapshot.pipeline.displayItems.length > 0 ? virtualizationEnabled ? `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>` : `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>` : `<div class="empty-state ui-grid-no-row-overlay"><strong>${escapeHtml(options.emptyMessage ?? labels.emptyHeading)}</strong><p>${escapeHtml(labels.emptyDescription)}</p></div>`;
+    const pagination = paginationEnabled && showPagination ? this.renderPagination(snapshot) : "";
+    const hero = `<header class="grid-hero"><div><p class="eyebrow">Vanilla web component</p><h1>${escapeHtml(options.title ?? "UI Grid")}</h1><p class="deck">Framework-neutral custom element with Shadow DOM styling, slot templates, pinning, virtualization, editing, tree view, grouping, and state restore.</p></div><div class="hero-actions"><button type="button" class="action action-secondary" data-action="benchmark">Benchmark</button><button type="button" class="action action-secondary" data-action="export-csv">Export CSV</button><div class="stats-card"><span>${visibleRowCount}</span><small>${escapeHtml(labels.statsVisibleRows)}</small></div></div></header>`;
+    const metrics = `<section class="metrics-strip" aria-label="Grid metrics"><article><strong>${snapshot.pipeline.pipelineMs.toFixed(2)} ms</strong><span>pipeline</span></article><article><strong>${virtualizationEnabled ? "On" : "Off"}</strong><span>virtualization</span></article><article><strong>${pinnedCount}</strong><span>pinned columns</span></article><article><strong>${escapeHtml(this.benchmarkAverage)}</strong><span>benchmark avg</span></article></section>`;
+    const toolbar = `<div class="grid-toolbar"><div><strong>${visibleRowCount}</strong><span>${escapeHtml(labels.toolbarOf)} ${totalRows} ${escapeHtml(labels.toolbarRows)}</span></div><p>${escapeHtml(options.id)}</p></div>`;
+    const gridTableStyle = `${virtualizationEnabled ? `height:${viewportHeight}px;overflow-y:auto;` : ""}--ui-grid-header-sticky-top:${headerStickyTop}px;`;
+    root.innerHTML = `<style>${GRID_CORE_CSS}</style><section class="grid-shell ui-grid-shell">${slotRegistry}${hero}${metrics}<section class="grid-frame ui-grid" role="grid" aria-label="${escapeHtml(options.title ?? "Data grid")}">${toolbar}<div class="grid-table ui-grid-contents-wrapper" style="${gridTableStyle}"><div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${templateColumns}">${header}</div>${filterRow}${body}</div>${pagination}</section></section>`;
+    const gridTable = root.querySelector(".grid-table");
+    if (gridTable && this.scrollPosition > 0 && virtualizationEnabled) {
+      this.suppressScrollEvent = true;
+      gridTable.scrollTop = this.scrollPosition;
+      requestAnimationFrame(() => {
+        this.suppressScrollEvent = false;
+      });
+    }
+    const headerGrid = root.querySelector(".header-grid");
+    const filterGrid = root.querySelector(".filter-grid");
+    const nextHeaderStickyHeight = headerGrid?.offsetHeight ?? 0;
+    const nextFilterStickyHeight = filterGrid?.offsetHeight ?? 0;
+    const stickyHeightsChanged = nextHeaderStickyHeight !== this.measuredHeaderStickyHeight || nextFilterStickyHeight !== this.measuredFilterStickyHeight;
+    this.measuredHeaderStickyHeight = nextHeaderStickyHeight;
+    this.measuredFilterStickyHeight = nextFilterStickyHeight;
+    if (stickyHeightsChanged && !this.stickyHeightRelayoutQueued) {
+      this.stickyHeightRelayoutQueued = true;
+      requestAnimationFrame(() => {
+        this.stickyHeightRelayoutQueued = false;
+        if (!this.snapshot) {
+          return;
+        }
+        this.render();
+      });
+    }
+  }
+  renderHeaderCell(column, sortEnabled, groupingEnabled, pinningEnabled, options) {
+    const controller = this.controller;
+    const sortDirection = controller.getSortDirection(column);
+    const sortLabel = controller.sortButtonLabel(column);
+    const groupingLabel = controller.groupingButtonLabel(column);
+    const canSort = sortEnabled && controller.isColumnSortable(column);
+    const canGroup = groupingEnabled && column.enableGrouping !== false;
+    const canPin = pinningEnabled && controller.isColumnPinnable(column);
+    const isPinned = controller.isPinned(column);
+    const pinOffset = isPinned ? controller.pinnedOffset(column) : null;
+    const isPinnedLeftLast = controller.isPinnedLeftLast(column);
+    const isPinnedRightFirst = controller.isPinnedRightFirst(column);
+    const isDragTarget = this.dropTargetColumnName === column.name;
+    const isDragging = this.draggedColumnName === column.name;
+    const classes = [
+      "header-cell",
+      sortDirection !== SORT_DIRECTIONS2.none ? "is-active" : "",
+      isPinned ? "is-pinned" : "",
+      isPinnedLeftLast ? "is-pinned-left-last" : "",
+      isPinnedRightFirst ? "is-pinned-right-first" : "",
+      this.openPinMenuColumn === column.name ? "is-pin-menu-open" : "",
+      isDragTarget ? "is-drag-target" : "",
+      isDragging ? "is-dragging" : ""
+    ].filter(Boolean).join(" ");
+    const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
+    const sortIconKey = sortDirection === SORT_DIRECTIONS2.asc ? "sortAsc" : sortDirection === SORT_DIRECTIONS2.desc ? "sortDesc" : "sortNone";
+    const draggable = canGridMoveColumns2(options) ? 'draggable="true"' : "";
+    const pinLabel = isPinned ? this.snapshot?.labels.unpin ?? "Unpin" : this.snapshot?.labels.pinColumn ?? "Pin";
+    return `<div class="${classes}" data-column="${escapeHtml(column.name)}" ${draggable} style="${stickyStyle}"><span class="header-label">${escapeHtml(controller.headerLabel(column))}</span><span class="header-actions">${sortEnabled ? `<button type="button" class="header-action" data-action="sort" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(sortLabel)}" ${canSort ? "" : "disabled"}>${this.renderControlIcon(sortIconKey)}<span class="sr-only">${escapeHtml(sortLabel)}</span></button>` : ""}${groupingEnabled ? `<button type="button" class="chip-action${controller.isColumnGrouped(column) ? " chip-action-active" : ""}" data-action="group" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(groupingLabel)}" ${canGroup ? "" : "disabled"}>${this.renderControlIcon("group")}<span class="sr-only">${escapeHtml(groupingLabel)}</span></button>` : ""}${canPin ? `<div class="pin-control${this.openPinMenuColumn === column.name ? " pin-control-open" : ""}"><button type="button" class="chip-action pin-trigger${isPinned ? " chip-action-active" : ""}" data-action="pin-trigger" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(pinLabel)}">${this.renderControlIcon("pin")}<span class="sr-only">${escapeHtml(pinLabel)}</span></button><div class="pin-menu" role="menu" aria-label="${escapeHtml(pinLabel)}"><button type="button" class="pin-menu-action" data-action="pin-left" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinLeft ?? "Pin left")}">${this.renderIconWithClass("control-icon", "pinLeft")}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinLeft ?? "Pin left")}</span></button><button type="button" class="pin-menu-action" data-action="pin-right" data-column="${escapeHtml(column.name)}" aria-label="${escapeHtml(this.snapshot?.labels.pinRight ?? "Pin right")}">${this.renderIconWithClass("control-icon", "pinRight")}<span class="sr-only">${escapeHtml(this.snapshot?.labels.pinRight ?? "Pin right")}</span></button></div></div>` : ""}</span></div>`;
+  }
+  renderFilterCell(column) {
+    const value = this.snapshot?.activeFilters[column.name] ?? "";
+    const controller = this.controller;
+    const canFilter = controller.isColumnFilterable(column);
+    const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+    const classes = [
+      "filter-cell",
+      controller.isPinned(column) ? "is-pinned" : "",
+      controller.isPinnedLeftLast(column) ? "is-pinned-left-last" : "",
+      controller.isPinnedRightFirst(column) ? "is-pinned-right-first" : ""
+    ].filter(Boolean).join(" ");
+    const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
+    return `<label class="${classes}" style="${stickyStyle}"><input class="ui-grid-filter-input" data-role="filter" data-column="${escapeHtml(column.name)}" placeholder="${escapeHtml(controller.filterPlaceholder(column))}" value="${escapeHtml(value)}" ${canFilter ? "" : "disabled"}></label>`;
+  }
+  renderDisplayItem(item, displayIndex) {
+    if (!this.snapshot || !this.controller) {
+      return "";
+    }
+    if (item.kind === "group") {
+      const group = asGroupItem(item);
+      const iconKey = group.collapsed ? "groupCollapsed" : "groupExpanded";
+      const disclosureLabel = this.controller.groupDisclosureLabel(group);
+      return `<button type="button" class="group-row ui-grid-row ui-grid-group-row" data-action="toggle-group" data-group="${escapeHtml(group.id)}" data-collapsed="${group.collapsed ? "true" : "false"}" style="grid-column: 1 / -1; padding-inline-start:${group.depth * 20 + 10}px">${this.renderIconWithClass("toggle-icon group-disclosure-icon", iconKey)}<span class="sr-only">${escapeHtml(disclosureLabel)}</span><strong>${escapeHtml(group.field)}: ${escapeHtml(group.label)}</strong><span>${group.count} ${escapeHtml(this.snapshot.labels.groupRowsSuffix)}</span></button>`;
+    }
+    if (item.kind === "expandable") {
+      const row = item.row;
+      return `<div class="expandable-row ui-grid-row ui-grid-expandable-row" style="grid-column:1 / -1">${this.renderExpandableTemplate(row)}</div>`;
+    }
+    if (!isRowItem(item)) {
+      return "";
+    }
+    return this.snapshot.visibleColumns.map((column) => this.renderBodyCell(item.row, column, displayIndex)).join("");
+  }
+  renderBodyCell(row, column, displayIndex) {
+    if (!this.snapshot || !this.controller) {
+      return "";
+    }
+    const controller = this.controller;
+    const rowId = row.id;
+    const columnName = column.name;
+    const editing = controller.isEditingCell(rowId, columnName);
+    const pinOffset = controller.isPinned(column) ? controller.pinnedOffset(column) : null;
+    const treeToggle = controller.showTreeToggle(row, column) ? `<button type="button" class="row-toggle" data-action="toggle-tree" data-row="${escapeHtml(rowId)}" aria-label="${escapeHtml(controller.treeToggleLabel(row))}">${this.renderIconWithClass("toggle-icon", controller.isTreeRowExpanded(row) ? "treeExpanded" : "treeCollapsed")}<span class="sr-only">${escapeHtml(controller.treeToggleLabel(row))}</span></button>` : "";
+    const expandToggle = controller.showExpandToggle(row, column) ? `<button type="button" class="row-toggle row-toggle-expand" data-action="toggle-expand" data-row="${escapeHtml(rowId)}" aria-label="${escapeHtml(controller.expandToggleLabel(row))}">${this.renderIconWithClass("toggle-icon", row.expanded ? "expandExpanded" : "expandCollapsed")}<span class="sr-only">${escapeHtml(controller.expandToggleLabel(row))}</span></button>` : "";
+    const content = editing ? `<input class="cell-editor" data-role="editor" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" type="${escapeHtml(controller.editorInputType(column))}" value="${escapeHtml(this.snapshot.editingValue)}">` : this.renderCellTemplate(row, column, displayIndex);
+    const classes = [
+      "body-cell",
+      "ui-grid-cell",
+      displayIndex % 2 !== 0 ? "body-cell-odd" : "",
+      column.align === "center" ? "align-center" : "",
+      column.align === "end" ? "align-end" : "",
+      controller.isPinned(column) ? "is-pinned" : "",
+      controller.isPinnedLeftLast(column) ? "is-pinned-left-last" : "",
+      controller.isPinnedRightFirst(column) ? "is-pinned-right-first" : "",
+      this.focusedCell?.rowId === rowId && this.focusedCell.columnName === columnName ? "cell-focused" : "",
+      editing ? "cell-editing" : ""
+    ].filter(Boolean).join(" ");
+    const stickyStyle = pinOffset ? `${pinOffset.side}:${pinOffset.offset};` : "";
+    return `<div class="${classes}" tabindex="0" data-row="${escapeHtml(rowId)}" data-column="${escapeHtml(columnName)}" style="${stickyStyle}"><div class="cell-shell" style="padding-inline-start:${escapeHtml(controller.cellIndent(row, column))}">${treeToggle}${expandToggle}${content}</div></div>`;
+  }
+  renderPagination(snapshot) {
+    const pageSizes = snapshot.options.paginationPageSizes ?? [10, 25, 50, 100];
+    return `<footer class="pagination-bar ui-grid-pagination"><p>${snapshot.firstRowIndex + 1}-${snapshot.lastRowIndex + 1} of ${snapshot.pipeline.totalItems}</p><div class="pagination-controls"><button type="button" class="action action-secondary pagination-button" data-action="page-prev" aria-label="${escapeHtml(snapshot.labels.paginationPrevious)}" ${snapshot.currentPage <= 1 ? "disabled" : ""}>${this.renderIconWithClass("pagination-icon", "paginationPrev")}<span class="sr-only">${escapeHtml(snapshot.labels.paginationPrevious)}</span></button><span>${escapeHtml(snapshot.labels.paginationPage)} ${snapshot.currentPage} ${escapeHtml(snapshot.labels.paginationOf)} ${snapshot.totalPages}</span><button type="button" class="action action-secondary pagination-button" data-action="page-next" aria-label="${escapeHtml(snapshot.labels.paginationNext)}" ${snapshot.currentPage >= snapshot.totalPages ? "disabled" : ""}>${this.renderIconWithClass("pagination-icon", "paginationNext")}<span class="sr-only">${escapeHtml(snapshot.labels.paginationNext)}</span></button><label class="pagination-size"><span class="sr-only">${escapeHtml(snapshot.labels.paginationRows)}</span><select class="page-size" data-role="page-size">${pageSizes.map(
+      (size) => `<option value="${size}" ${size === snapshot.pageSize ? "selected" : ""}>${size}</option>`
+    ).join("")}</select></label></div></footer>`;
+  }
+  renderSlotRegistry(columns) {
+    const cellSlots = columns.map((column) => `<slot name="${escapeHtml(this.cellSlotName(column))}"></slot>`).join("");
+    return `<div hidden class="slot-registry">${cellSlots}<slot name="expandable-row"></slot></div>`;
+  }
+  renderCellTemplate(row, column, displayIndex) {
+    const templateMarkup = this.getTemplateMarkup(this.cellSlotName(column));
+    if (!templateMarkup) {
+      return `<span class="cell-value">${escapeHtml(this.controller?.displayValue(row, column) ?? "")}</span>`;
+    }
+    const rawRow = row.entity;
+    const rawValue = getCellValue2(rawRow, column);
+    const valueText = rawValue == null ? "" : String(rawValue);
+    return this.interpolateTemplate(templateMarkup, {
+      $implicit: rawValue,
+      value: rawValue,
+      valueText,
+      valueLower: valueText.toLowerCase(),
+      row: rawRow,
+      column,
+      rowIndex: this.rowIndexFor(row, displayIndex)
+    });
+  }
+  renderExpandableTemplate(row) {
+    const templateMarkup = this.getTemplateMarkup("expandable-row");
+    if (!templateMarkup) {
+      return `<p>${escapeHtml(String(row.entity["name"] ?? row.id))}</p>`;
+    }
+    return this.interpolateTemplate(templateMarkup, {
+      $implicit: row.entity,
+      row: row.entity,
+      expanded: row.expanded,
+      rowIndex: this.rowIndexFor(row)
+    });
+  }
+  getTemplateMarkup(slotName) {
+    const template = this.querySelector(`template[slot="${slotName}"]`);
+    return template?.innerHTML ?? null;
+  }
+  interpolateTemplate(templateMarkup, context) {
+    return templateMarkup.replace(/{{\s*([^}]+?)\s*}}/g, (_match, expression) => {
+      const value = this.resolveTemplateValue(context, String(expression).trim());
+      return escapeHtml(value);
+    });
+  }
+  resolveTemplateValue(context, expression) {
+    const segments = expression.split(".").filter(Boolean);
+    let current = context;
+    for (const segment of segments) {
+      if (current == null || typeof current !== "object") {
+        return "";
+      }
+      current = current[segment];
+    }
+    return current ?? "";
+  }
+  rowIndexFor(row, fallback = 0) {
+    return this.snapshot?.pipeline.visibleRows.findIndex((candidate) => candidate.id === row.id) ?? fallback;
+  }
+  cellSlotName(column) {
+    return `cell-${column.name}`;
+  }
+  downloadCsv() {
+    if (!this.snapshot) {
+      return;
+    }
+    const csv = exportCsvRows(this.snapshot.visibleColumns, this.snapshot.pipeline.visibleRows);
+    const filename = sanitizeDownloadFilename(`${this.snapshot.options.id}.csv`);
+    downloadGridCsvFile(csv, filename);
+  }
+  renderControlIcon(key) {
+    return this.renderIconWithClass("control-icon", key);
+  }
+  renderIconWithClass(svgClass, key) {
+    const icon = this.iconOverrides[key] ?? DEFAULT_ICONS[key];
+    const viewBox = escapeHtml(icon.viewBox ?? "0 0 24 24");
+    const path = escapeHtml(icon.path);
+    return `<svg class="${svgClass}" viewBox="${viewBox}" aria-hidden="true" focusable="false"><path d="${path}"></path></svg>`;
+  }
+};
+async function defineStandaloneUiGridElement(tagName = "ui-grid-element") {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, UiGridStandaloneElement);
+  }
+}
+
+// src/index.ts
+async function registerVanillaUiGridRustModule(module, input) {
+  await module.default(input);
+  registerRustWasmGridEngine({
+    buildPipeline(context) {
+      return module.build_pipeline_js(context);
+    }
+  });
+}
+async function mountVanillaUiGrid(target, options, rustModule, tagName = "ui-grid-element") {
+  if (rustModule) {
+    await registerVanillaUiGridRustModule(rustModule);
+  }
+  await defineStandaloneUiGridElement(tagName);
+  const grid = document.createElement(tagName);
+  grid.options = options;
+  target.replaceChildren(grid);
+  return grid;
+}
+export {
+  UiGridStandaloneElement,
+  createVanillaGridController,
+  defineStandaloneUiGridElement,
+  defineStandaloneUiGridElement as defineUiGridElement,
+  mountVanillaUiGrid,
+  registerVanillaUiGridRustModule
+};