@dxos/react-ui-table 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/dist/lib/browser/chunk-4KOQTPFC.mjs

@@ -0,0 +1,1702 @@
+// src/util/query-ast.ts
+var extractOrder = (queryAst) => {
+  if (queryAst.type === "order") {
+    return queryAst.order;
+  }
+  if (queryAst.type === "options") {
+    return extractOrder(queryAst.query);
+  }
+  if (queryAst.type === "from") {
+    return extractOrder(queryAst.query);
+  }
+  return void 0;
+};
+
+// src/util/sort.ts
+import { Format } from "@dxos/echo";
+var getSortValue = (value, format) => {
+  if (value === void 0 || value === null) {
+    return null;
+  }
+  const isDateFormat = format === Format.TypeFormat.DateTime || format === Format.TypeFormat.Date;
+  if (isDateFormat) {
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      return date.getTime();
+    }
+    return String(value);
+  }
+  if (format === Format.TypeFormat.Number || format === Format.TypeFormat.Integer || format === Format.TypeFormat.Currency || format === Format.TypeFormat.Percent || format === Format.TypeFormat.Duration) {
+    const num = typeof value === "number" ? value : Number(value);
+    if (!isNaN(num)) {
+      return num;
+    }
+    return String(value);
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return value;
+  }
+  return String(value);
+};
+var compareValues = (aValue, bValue, format, direction) => {
+  if (aValue === void 0 || aValue === null) {
+    return bValue === void 0 || bValue === null ? 0 : 1;
+  }
+  if (bValue === void 0 || bValue === null) {
+    return -1;
+  }
+  const aSortValue = getSortValue(aValue, format);
+  const bSortValue = getSortValue(bValue, format);
+  let comparison = 0;
+  if (typeof aSortValue === "number" && typeof bSortValue === "number") {
+    comparison = aSortValue - bSortValue;
+  } else if (typeof aSortValue === "string" && typeof bSortValue === "string") {
+    comparison = aSortValue.localeCompare(bSortValue);
+  } else {
+    comparison = String(aSortValue).localeCompare(String(bSortValue));
+  }
+  return direction === "desc" ? -comparison : comparison;
+};
+
+// src/util/table-buttons.ts
+var BUTTON_IDENTIFIERS = {
+  columnSettings: "data-table-column-settings-button",
+  newColumn: "data-table-new-column-button",
+  referencedCell: "data-table-ref-cell-button",
+  rowMenu: "data-table-row-menu-button",
+  saveDraftRow: "data-table-save-draft-row-button",
+  sort: "data-table-sort-button"
+};
+var createButton = ({ attr, data, disabled = false, icon, testId, type: _type = "primary" }) => {
+  const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
+  return `<button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${dataAttrs} ${disabled ? "disabled" : ""} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+};
+var addColumnButton = {
+  attr: BUTTON_IDENTIFIERS.newColumn,
+  icon: "ph--plus--regular",
+  render: ({ disabled }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.newColumn,
+      icon: addColumnButton.icon,
+      disabled,
+      data: {},
+      testId: "table-new-column-button"
+    });
+  },
+  getData: (_el) => ({
+    type: "newColumn"
+  })
+};
+var columnSettingsButton = {
+  attr: BUTTON_IDENTIFIERS.columnSettings,
+  icon: "ph--caret-down--regular",
+  render: ({ fieldId }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.columnSettings,
+      icon: columnSettingsButton.icon,
+      data: {
+        "data-field-id": fieldId,
+        "data-variant": "ghost"
+      },
+      testId: "table-column-settings-button"
+    });
+  },
+  getData: (el) => ({
+    type: "columnSettings",
+    fieldId: el.getAttribute("data-field-id")
+  })
+};
+var rowMenuButton = {
+  attr: BUTTON_IDENTIFIERS.rowMenu,
+  icon: "ph--dots-three--regular",
+  render: ({ rowIndex }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.rowMenu,
+      icon: rowMenuButton.icon,
+      data: {
+        "data-row-index": rowIndex.toString()
+      },
+      testId: "table-row-menu-button"
+    });
+  },
+  getData: (el) => ({
+    type: "rowMenu",
+    rowIndex: Number(el.getAttribute("data-row-index"))
+  })
+};
+var sortButton = {
+  attr: BUTTON_IDENTIFIERS.sort,
+  icon: "ph--sort-ascending--regular",
+  render: ({ fieldId, direction }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.sort,
+      icon: direction === "desc" ? "ph--sort-descending--regular" : "ph--sort-ascending--regular",
+      data: {
+        "data-field-id": fieldId,
+        "data-direction": direction ?? ""
+      },
+      testId: "table-sort-button",
+      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
+      // This is a bit hacky.
+      type: "secondary"
+    });
+  },
+  getData: (el) => ({
+    type: "sort",
+    fieldId: el.getAttribute("data-field-id"),
+    direction: el.getAttribute("data-direction")
+  })
+};
+var saveDraftRowButton = {
+  attr: BUTTON_IDENTIFIERS.saveDraftRow,
+  icon: "ph--floppy-disk--regular",
+  render: ({ rowIndex, disabled }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.saveDraftRow,
+      icon: saveDraftRowButton.icon,
+      disabled,
+      data: {
+        "data-row-index": rowIndex.toString(),
+        "data-variant": "primary"
+      },
+      testId: "table-save-draft-row-button"
+    });
+  },
+  getData: (el) => ({
+    type: "saveDraftRow",
+    rowIndex: Number(el.getAttribute("data-row-index"))
+  })
+};
+var tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  rowMenu: rowMenuButton,
+  saveDraftRow: saveDraftRowButton,
+  sort: sortButton
+};
+
+// src/util/table-controls.ts
+import { accessoryHandlesPointerdownAttrs } from "@dxos/lit-grid";
+var CONTROL_IDENTIFIERS = {
+  checkbox: "data-table-checkbox",
+  switch: "data-table-switch"
+};
+var BASE_CLASSES = {
+  checkbox: "absolute inset-y-[.375rem] end-[.375rem] dx-checkbox",
+  switch: "absolute inset-y-[.25rem] end-[.25rem] dx-checkbox--switch"
+};
+var renderAttributes = (data) => {
+  return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
+};
+var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
+};
+var CheckboxStory = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.checkbox]: "",
+    "data-row-index": rowIndex.toString(),
+    ...header && {
+      "data-header": ""
+    }
+  };
+  return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
+};
+var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.switch]: "",
+    "data-row-index": rowIndex.toString(),
+    "data-col-index": colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs
+  };
+  return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
+};
+var tableControls = {
+  checkbox: {
+    attr: CONTROL_IDENTIFIERS.checkbox,
+    render: CheckboxStory,
+    getData: (el) => ({
+      type: "checkbox",
+      rowIndex: Number(el.getAttribute("data-row-index")),
+      header: el.hasAttribute("data-header")
+    })
+  },
+  switch: {
+    attr: CONTROL_IDENTIFIERS.switch,
+    render: SwitchStory,
+    getData: (el) => ({
+      type: "switch",
+      rowIndex: Number(el.getAttribute("data-row-index")),
+      colIndex: Number(el.getAttribute("data-col-index"))
+    })
+  }
+};
+
+// src/model/table-model.ts
+import { Atom as Atom2 } from "@effect-atom/atom-react";
+import { Resource as Resource2 } from "@dxos/context";
+import { Format as Format2, Obj, Order, Query, Ref, Type } from "@dxos/echo";
+import { toEffectSchema } from "@dxos/echo/JsonSchema";
+import { getSnapshot } from "@dxos/echo/Obj";
+import { SchemaEx } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { EntityId } from "@dxos/keys";
+import { formatForEditing, parseValue } from "@dxos/react-ui-form";
+import { validateSchema } from "@dxos/schema";
+
+// src/util/tag.ts
+var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var extractTagIds = (value) => {
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const ids = [];
+  let match;
+  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
+    if (match[2]) {
+      ids.push(match[2]);
+    }
+  }
+  return ids.length > 0 ? ids : void 0;
+};
+
+// src/model/selection-model.ts
+import { Atom } from "@effect-atom/atom-react";
+import { Resource } from "@dxos/context";
+var SelectionModel = class extends Resource {
+  _registry;
+  _rows;
+  _selection;
+  _validSelectedIds;
+  _hasSelection;
+  _allSelected;
+  _selectionMode;
+  _onSelectionChanged;
+  constructor(registry, rows, selectionMode, initialSelection, onSelectionChanged) {
+    super();
+    this._registry = registry;
+    this._rows = rows;
+    this._selectionMode = selectionMode;
+    this._onSelectionChanged = onSelectionChanged;
+    this._selection = Atom.make(new Set(initialSelection));
+    this._validSelectedIds = Atom.make((get) => {
+      const rows2 = get(this._rows);
+      if (!rows2) {
+        return /* @__PURE__ */ new Set();
+      }
+      const validIds = new Set(rows2.map((row) => row.id));
+      const selection = get(this._selection);
+      return new Set([
+        ...selection
+      ].filter((id) => validIds.has(id)));
+    });
+    this._hasSelection = Atom.make((get) => get(this._validSelectedIds).size > 0);
+    this._allSelected = Atom.make((get) => {
+      const rows2 = get(this._rows);
+      if (rows2.length === 0) {
+        return false;
+      }
+      const selection = get(this._selection);
+      return rows2.every((row) => selection.has(row.id));
+    });
+  }
+  async _open() {
+    const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
+      this._onSelectionChanged?.();
+    });
+    this._ctx.onDispose(selectionUnsubscribe);
+  }
+  //
+  // Getters
+  //
+  /** Get the selection atom for reactive access. */
+  get selectionAtom() {
+    return this._selection;
+  }
+  /** Get the current selection value. */
+  get selection() {
+    return this._registry.get(this._selection);
+  }
+  /** Get the hasSelection atom for reactive access. */
+  get hasSelectionAtom() {
+    return this._hasSelection;
+  }
+  /** Check if there is any selection. */
+  get hasSelection() {
+    return this._registry.get(this._hasSelection);
+  }
+  /** Get the allRowsSelected atom for reactive access. */
+  get allRowsSelectedAtom() {
+    return this._allSelected;
+  }
+  /** Check if all rows are selected. */
+  get allRowsSelected() {
+    return this._registry.get(this._allSelected);
+  }
+  get selectionMode() {
+    return this._selectionMode;
+  }
+  getSelectedRows = () => {
+    const selectedIds = this._registry.get(this._validSelectedIds);
+    return this._registry.get(this._rows).filter((row) => selectedIds.has(row.id));
+  };
+  isRowIndexSelected = (rowIndex) => {
+    const row = this._registry.get(this._rows)[rowIndex];
+    return this._registry.get(this._selection).has(row.id);
+  };
+  isObjectSelected = (object) => {
+    return this._registry.get(this._selection).has(object.id);
+  };
+  //
+  // Manipulation
+  //
+  toggleSelectionForRowIndex = (rowIndex) => {
+    const row = this._registry.get(this._rows)[rowIndex];
+    const currentSelection = this._registry.get(this._selection);
+    const newSelection = new Set(currentSelection);
+    if (newSelection.has(row.id)) {
+      newSelection.delete(row.id);
+    } else {
+      if (this._selectionMode === "single") {
+        newSelection.clear();
+      }
+      newSelection.add(row.id);
+    }
+    this._registry.set(this._selection, newSelection);
+  };
+  setSelection = (mode) => {
+    switch (mode) {
+      case "all": {
+        this._registry.set(this._selection, new Set(this._registry.get(this._rows).map((row) => row.id)));
+        break;
+      }
+      case "none": {
+        this._registry.set(this._selection, /* @__PURE__ */ new Set());
+        break;
+      }
+    }
+  };
+};
+
+// src/model/table-model.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var createEchoChangeCallback = (table) => ({
+  table: (mutate) => Obj.update(table, (table2) => mutate(table2)),
+  row: (row, mutate) => {
+    if (Obj.isObject(row)) {
+      Obj.update(row, (row2) => mutate(row2));
+    } else {
+      mutate(row);
+    }
+  }
+});
+var createDirectChangeCallback = (table) => ({
+  table: (mutate) => mutate(table),
+  row: (row, mutate) => mutate(row)
+});
+var defaultFeatures = {
+  selection: {
+    enabled: true,
+    mode: "multiple"
+  },
+  dataEditable: false,
+  schemaEditable: false
+};
+var TableModel = class extends Resource2 {
+  _registry;
+  _object;
+  _projection;
+  _db;
+  _change;
+  _visibleRange;
+  _onInsertRow;
+  _onDeleteRows;
+  _onColumnDelete;
+  _onCellUpdate;
+  _onRowOrderChange;
+  _onRowAction;
+  _rowActions;
+  _features;
+  _rows;
+  _draftRows;
+  // In-memory sort state - changes are local until saved.
+  _inMemorySort;
+  // Derived atom for persisted sort from view.query.ast.
+  _persistedSort;
+  // Derived atom for current sort (in-memory takes precedence over persisted).
+  _sorting;
+  // Derived atom for sorted rows (used by rows getter and SelectionModel).
+  _sortedRows;
+  // Derived atom for viewDirty state.
+  _viewDirty;
+  _pinnedRows;
+  _selection;
+  _columnMeta;
+  // Counter atom that increments when cells are updated - allows UI to react to cell changes.
+  _cellUpdateCounter;
+  constructor({ registry, object, projection, db, change, features = {}, initialSelection = [], pinnedRows = {
+    top: [],
+    bottom: []
+  }, rowActions = [], onCellUpdate, onColumnDelete, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
+    super();
+    this._registry = registry;
+    this._object = object;
+    this._projection = projection;
+    this._projection.normalizeView();
+    this._db = db;
+    this._change = change ?? createEchoChangeCallback(object);
+    this._features = {
+      ...defaultFeatures,
+      ...features
+    };
+    invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 94, S: this, A: ["!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')", "'Single selection is not compatible with editable tables.'"] });
+    this._visibleRange = Atom2.make({
+      start: {
+        row: 0,
+        col: 0
+      },
+      end: {
+        row: 0,
+        col: 0
+      }
+    });
+    this._rows = Atom2.make([]);
+    this._draftRows = Atom2.make([]);
+    this._inMemorySort = Atom2.make(void 0);
+    this._cellUpdateCounter = Atom2.make(0);
+    this._persistedSort = Atom2.make((get) => {
+      const view = get(this._object.view.atom);
+      if (!view) {
+        return void 0;
+      }
+      const viewSnapshot = Obj.getSnapshot(view);
+      const ast = viewSnapshot.query.ast;
+      const orders = extractOrder(ast);
+      if (orders && orders.length > 0) {
+        const firstOrder = orders[0];
+        if (firstOrder.kind === "property") {
+          const field = this._projection.getFields().find((f) => f.path === firstOrder.property);
+          if (field) {
+            return {
+              fieldId: field.id,
+              direction: firstOrder.direction
+            };
+          }
+        }
+      }
+      return void 0;
+    });
+    this._sorting = Atom2.make((get) => {
+      const inMemorySort = get(this._inMemorySort);
+      return inMemorySort ?? get(this._persistedSort);
+    });
+    this._sortedRows = Atom2.make((get) => {
+      const rows = get(this._rows);
+      const sort = get(this._sorting);
+      if (!sort || rows.length === 0) {
+        return rows;
+      }
+      const field = this._projection.getFields().find((f) => f.id === sort.fieldId);
+      if (!field) {
+        return rows;
+      }
+      const fieldProjection = this._projection.getFieldProjection(field.id);
+      const sorted = [
+        ...rows
+      ].sort((a, b) => {
+        const aValue = SchemaEx.getValue(a, field.path);
+        const bValue = SchemaEx.getValue(b, field.path);
+        return compareValues(aValue, bValue, fieldProjection.props.format, sort.direction);
+      });
+      return sorted;
+    });
+    this._selection = new SelectionModel(this._registry, this._sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
+    this._viewDirty = Atom2.make((get) => {
+      const inMemorySort = get(this._inMemorySort);
+      if (!inMemorySort) {
+        return false;
+      }
+      const persisted = get(this._persistedSort);
+      if (!persisted) {
+        return true;
+      }
+      return inMemorySort.fieldId !== persisted.fieldId || inMemorySort.direction !== persisted.direction;
+    });
+    this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
+    this._onInsertRow = onInsertRow;
+    this._onDeleteRows = onDeleteRows;
+    this._onColumnDelete = onColumnDelete;
+    this._onCellUpdate = onCellUpdate;
+    this._onRowOrderChange = onRowOrderChange;
+    this._onRowAction = onRowAction;
+  }
+  get id() {
+    return Obj.getURI(this._object);
+  }
+  get view() {
+    const view = this._object.view.target;
+    invariant(view, "Table model not initialized", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 190, S: this, A: ["view", "'Table model not initialized'"] });
+    return view;
+  }
+  get table() {
+    return this._object;
+  }
+  get projection() {
+    return this._projection;
+  }
+  get db() {
+    return this._db;
+  }
+  /**
+  * Atom for reactive access to rows with in-memory sorting applied.
+  */
+  get rows() {
+    return this._sortedRows;
+  }
+  /**
+  * Gets rows with in-memory sorting applied.
+  * In-memory sort is local to this instance until saved.
+  */
+  getRows() {
+    return this._registry.get(this._sortedRows);
+  }
+  /** Atom for reactive access to cell changes. */
+  get cellUpdate() {
+    return this._cellUpdateCounter;
+  }
+  /**
+  * Change a row using the configured change callback.
+  * Use this instead of directly mutating to ensure consistent mutation handling.
+  */
+  changeRow(row, mutate) {
+    this._change.row(row, mutate);
+  }
+  get features() {
+    return this._features;
+  }
+  /**
+  * Gets the current sort state.
+  * Priority: in-memory sort (local changes) > persisted sort (from query AST).
+  */
+  getSorting() {
+    return this._registry.get(this._sorting);
+  }
+  /**
+  * Gets the row data at the specified display index.
+  */
+  getRowAt(displayIndex) {
+    const sortedRows = this._registry.get(this._sortedRows);
+    if (displayIndex < 0 || displayIndex >= sortedRows.length) {
+      return void 0;
+    }
+    return sortedRows[displayIndex];
+  }
+  get pinnedRows() {
+    return this._pinnedRows;
+  }
+  get columnMeta() {
+    invariant(this._columnMeta, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 244, S: this, A: ["this._columnMeta", ""] });
+    return this._columnMeta;
+  }
+  get selection() {
+    return this._selection;
+  }
+  get rowActions() {
+    return this._rowActions;
+  }
+  //
+  // Initialisation
+  //
+  async _open() {
+    await this._object.view.load();
+    this.initializeColumnMeta();
+    this.initializeEffects();
+    await this._selection.open(this._ctx);
+  }
+  initializeColumnMeta() {
+    invariant(this._object.view.target, "View must be loaded before initializing column meta", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 263, S: this, A: ["this._object.view.target", "'View must be loaded before initializing column meta'"] });
+    this._columnMeta = Atom2.make((get) => {
+      const fields = get(this._projection.fields);
+      const meta = Object.fromEntries(fields.map((field, index) => [
+        index,
+        {
+          size: this.table.sizes[field.path] ?? 256,
+          resizeable: true
+        }
+      ]));
+      return {
+        grid: meta,
+        frozenColsStart: {
+          0: {
+            size: 30,
+            resizeable: false
+          }
+        },
+        frozenColsEnd: {
+          0: {
+            size: 32,
+            resizeable: false
+          }
+        }
+      };
+    });
+  }
+  initializeEffects() {
+    const rowsUnsubscribe = this._registry.subscribe(this._rows, () => {
+      this._onRowOrderChange?.();
+    });
+    this._ctx.onDispose(rowsUnsubscribe);
+    const rowSubscriptions = /* @__PURE__ */ new Map();
+    const visibleRangeUnsubscribe = this._registry.subscribe(this._visibleRange, () => {
+      for (const [id, unsub] of rowSubscriptions) {
+        unsub();
+        rowSubscriptions.delete(id);
+      }
+      const { start, end } = this._registry.get(this._visibleRange);
+      const sortedRows = this._registry.get(this._sortedRows);
+      for (let row = start.row; row <= end.row && row < sortedRows.length; row++) {
+        const obj = sortedRows[row];
+        if (Obj.isObject(obj) && !rowSubscriptions.has(obj.id)) {
+          const unsub = Obj.subscribe(obj, () => {
+            this._registry.set(this._cellUpdateCounter, this._registry.get(this._cellUpdateCounter) + 1);
+            this._onCellUpdate?.({
+              row,
+              col: start.col,
+              plane: "grid"
+            });
+          });
+          rowSubscriptions.set(obj.id, unsub);
+        }
+      }
+    });
+    this._ctx.onDispose(() => {
+      visibleRangeUnsubscribe();
+      for (const unsub of rowSubscriptions.values()) {
+        unsub();
+      }
+    });
+    const draftRowsUnsubscribe = this._registry.subscribe(this._draftRows, () => {
+      this._onRowOrderChange?.();
+    });
+    this._ctx.onDispose(draftRowsUnsubscribe);
+  }
+  //
+  // Data
+  //
+  setRows = (obj) => {
+    this._registry.set(this._rows, obj);
+  };
+  getRowCount = () => this._registry.get(this._sortedRows).length;
+  getDraftRowCount() {
+    return this._registry.get(this._draftRows).length;
+  }
+  /** Atom for reactive access to draft rows. */
+  get draftRows() {
+    return this._draftRows;
+  }
+  /** Gets the current draft rows. */
+  getDraftRows() {
+    return this._registry.get(this._draftRows);
+  }
+  /**
+  * Checks if a specific field path has validation errors for a given draft row.
+  * @param draftRowIndex - The index of the draft row to check
+  * @param fieldPath - The path of the field to check for validation errors
+  * @returns true if the field has validation errors, false otherwise
+  */
+  hasDraftRowValidationError(draftRowIndex, fieldPath) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
+      return false;
+    }
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
+    const validationErrors = draftRow.validationErrors || [];
+    return validationErrors.some((error) => error.path === fieldPath);
+  }
+  getColumnCount = () => this._projection?.getFields().length ?? 0;
+  insertRow = () => {
+    const result = this._onInsertRow?.();
+    if (result === "draft" && this._registry.get(this._draftRows).length === 0) {
+      this.createDraftRow();
+    }
+    return result ?? "final";
+  };
+  createDraftRow() {
+    if (!this._projection) {
+      return;
+    }
+    const draftData = {
+      id: EntityId.random()
+    };
+    const validationErrors = this.validateDraftRowData(draftData);
+    const draftRow = {
+      data: draftData,
+      valid: validationErrors.length === 0,
+      validationErrors
+    };
+    this._registry.set(this._draftRows, [
+      ...this._registry.get(this._draftRows),
+      draftRow
+    ]);
+  }
+  validateDraftRow(draftRowIndex) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
+      return;
+    }
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
+    const validationErrors = this.validateDraftRowData(draftRow.data);
+    const updatedDraftRow = {
+      ...draftRow,
+      valid: validationErrors.length === 0,
+      validationErrors
+    };
+    const newDraftRows = [
+      ...this._registry.get(this._draftRows)
+    ];
+    newDraftRows[draftRowIndex] = updatedDraftRow;
+    this._registry.set(this._draftRows, newDraftRows);
+  }
+  validateDraftRowData(data) {
+    const schema = toEffectSchema(this._projection.baseSchema);
+    return validateSchema(schema, data) || [];
+  }
+  commitDraftRow = (draftRowIndex) => {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
+      return false;
+    }
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
+    if (!draftRow.valid) {
+      return false;
+    }
+    const insertRowResult = this._onInsertRow?.(draftRow.data);
+    if (insertRowResult === "final") {
+      const newDraftRows = this._registry.get(this._draftRows).filter((_, index) => index !== draftRowIndex);
+      this._registry.set(this._draftRows, newDraftRows);
+    }
+    return insertRowResult === "final";
+  };
+  deleteRow = (rowIndex) => {
+    const sortedRows = this._registry.get(this._sortedRows);
+    const obj = sortedRows[rowIndex];
+    const objectsToDelete = [];
+    if (this.features.selection.enabled && this._selection.hasSelection) {
+      const selectedRows = this._selection.getSelectedRows();
+      objectsToDelete.push(...selectedRows);
+    } else if (obj) {
+      objectsToDelete.push(obj);
+    }
+    if (objectsToDelete.length > 0) {
+      this._onDeleteRows?.(rowIndex, objectsToDelete);
+    }
+  };
+  handleRowAction = (actionId, rowIndex) => {
+    if (!this._onRowAction) {
+      return;
+    }
+    const sortedRows = this._registry.get(this._sortedRows);
+    const data = sortedRows[rowIndex];
+    if (data) {
+      this._onRowAction(actionId, data);
+    }
+  };
+  getCellData = (cell) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.getFields() ?? [];
+    if (col < 0 || col >= fields.length) {
+      return void 0;
+    }
+    const field = fields[col];
+    let value;
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
+        value = SchemaEx.getValue(this._registry.get(this._draftRows)[row].data, field.path);
+      } else {
+        return void 0;
+      }
+    } else {
+      const sortedRows = this._registry.get(this._sortedRows);
+      value = SchemaEx.getValue(sortedRows[row], field.path);
+    }
+    if (value == null) {
+      return "";
+    }
+    const { props } = this._projection.getFieldProjection(field.id);
+    switch (props.format) {
+      case Format2.TypeFormat.Ref: {
+        if (!field.referencePath) {
+          return "";
+        }
+        return SchemaEx.getValue(value.target, field.referencePath);
+      }
+      default: {
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          value
+        });
+      }
+    }
+  };
+  validateCellData = async ({ col, row, plane }, value) => {
+    const fields = this._projection?.getFields() ?? [];
+    if (col < 0 || col >= fields.length) {
+      return {
+        valid: false,
+        error: "Invalid column index"
+      };
+    }
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+    const isDraftRow = plane === "frozenRowsEnd";
+    if (isDraftRow) {
+      const isInvalidDraftRowIndex = row < 0 || row >= this._registry.get(this._draftRows).length;
+      if (isInvalidDraftRowIndex) {
+        return {
+          valid: false,
+          error: "Invalid draft row index"
+        };
+      }
+      const draftRow = this._registry.get(this._draftRows)[row];
+      const snapshot = {
+        ...draftRow.data
+      };
+      SchemaEx.setValue(snapshot, field.path, transformedValue);
+      const validationErrors = this.validateDraftRowData(snapshot);
+      if (validationErrors.length > 0) {
+        const error = validationErrors.find((err) => err.path === field.path);
+        if (error) {
+          return {
+            valid: false,
+            error: error.message
+          };
+        }
+      }
+      return {
+        valid: true
+      };
+    } else {
+      const currentRow = this._registry.get(this._rows)[row];
+      invariant(currentRow, "Invalid row index", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 537, S: this, A: ["currentRow", "'Invalid row index'"] });
+      const snapshot = {
+        ...getSnapshot(currentRow)
+      };
+      SchemaEx.setValue(snapshot, field.path, transformedValue);
+      const type = Obj.getType(currentRow);
+      invariant(type, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 544, S: this, A: ["type", ""] });
+      const schema = Type.getSchema(type);
+      const validationResult = validateSchema(schema, snapshot);
+      if (validationResult && validationResult.length > 0) {
+        const error = validationResult.find((err) => err.path === field.path);
+        if (error) {
+          return {
+            valid: false,
+            error: error.message
+          };
+        }
+      }
+      return {
+        valid: true
+      };
+    }
+  };
+  setCellData = (cell, value) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.getFields() ?? [];
+    if (col < 0 || col >= fields.length) {
+      return;
+    }
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+    if (props.format === Format2.TypeFormat.Ref && !Obj.isObject(value)) {
+      return;
+    }
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
+        SchemaEx.setValue(this._registry.get(this._draftRows)[row].data, field.path, transformedValue);
+        this.validateDraftRow(row);
+      }
+    } else {
+      const sortedRows = this._registry.get(this._sortedRows);
+      const rowData = sortedRows[row];
+      this._change.row(rowData, (mutableRow) => {
+        SchemaEx.setValue(mutableRow, field.path, transformedValue);
+      });
+    }
+  };
+  /**
+  * Updates a cell's value using a transform function.
+  * @param {DxGridPlanePosition} position - The position of the cell to update.
+  * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
+  */
+  updateCellData({ col, row }, update) {
+    const fields = this._projection?.getFields() ?? [];
+    const field = fields[col];
+    const sortedRows = this._registry.get(this._sortedRows);
+    const rowData = sortedRows[row];
+    const value = SchemaEx.getValue(rowData, field.path);
+    const updatedValue = update(value);
+    this._change.row(rowData, (mutableRow) => {
+      SchemaEx.setValue(mutableRow, field.path, updatedValue);
+    });
+  }
+  /**
+  * Gets the domain-appropriate cell type for a given cell position.
+  * This abstracts away the low-level grid plane concepts and provides domain-specific types.
+  * @param cell - The cell position to classify
+  * @returns The domain-appropriate cell type
+  */
+  getCellType(cell) {
+    switch (cell.plane) {
+      case "frozenRowsEnd":
+        return "draft";
+      case "frozenRowsStart":
+        return "header";
+      case "grid":
+      default:
+        return "standard";
+    }
+  }
+  /**
+  * Convenience method to check if a cell is a draft cell.
+  * @param cell - The cell position to check
+  * @returns true if the cell is a draft cell, false otherwise
+  */
+  isDraftCell(cell) {
+    return this.getCellType(cell) === "draft";
+  }
+  //
+  // Column Operations
+  //
+  deleteColumn(fieldId) {
+    if (!this._projection) {
+      return;
+    }
+    const field = this._projection?.getFields().find((field2) => field2.id === fieldId);
+    if (field && this._onColumnDelete) {
+      this._onColumnDelete(field.id);
+    }
+  }
+  //
+  // Resize
+  //
+  setColumnWidth(columnIndex, width) {
+    const fields = this._projection?.getFields() ?? [];
+    if (columnIndex < fields.length) {
+      const newWidth = Math.max(0, width);
+      const field = fields[columnIndex];
+      if (field) {
+        this._change.table((mutableTable) => {
+          mutableTable.sizes[field.path] = newWidth;
+        });
+      }
+    }
+  }
+  //
+  // Pinning
+  //
+  // TODO(burdon): Change to setPinned(on/off).
+  pinRow(rowIndex, side) {
+    this._pinnedRows[side].push(rowIndex);
+  }
+  unpinRow(rowIndex) {
+    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+  }
+  //
+  // Sort operations
+  //
+  /**
+  * Sets the sort order for a field in-memory (local to this instance).
+  * Use saveView() to persist the sort to the view query.
+  */
+  setSort(fieldId, direction) {
+    const field = this._projection.getFields().find((f) => f.id === fieldId);
+    if (!field) {
+      return;
+    }
+    this._registry.set(this._inMemorySort, {
+      fieldId,
+      direction
+    });
+  }
+  /**
+  * Toggles the sort direction for a field in-memory.
+  */
+  toggleSort(fieldId) {
+    const currentSort = this.getSorting();
+    if (!currentSort || currentSort.fieldId !== fieldId) {
+      this.setSort(fieldId, "asc");
+      return;
+    }
+    const newDirection = currentSort.direction === "asc" ? "desc" : "asc";
+    this.setSort(fieldId, newDirection);
+  }
+  /**
+  * Clears the in-memory sort order.
+  */
+  clearSort() {
+    this._registry.set(this._inMemorySort, void 0);
+  }
+  /**
+  * Saves the current in-memory sort to the view query AST.
+  * This persists the sort so it becomes the default for all viewers.
+  */
+  saveView() {
+    const view = this.view;
+    const inMemorySort = this._registry.get(this._inMemorySort);
+    const viewSnapshot = Obj.getSnapshot(view);
+    const currentQuery = Query.fromAst(viewSnapshot.query.ast);
+    const baseQuery = this._getBaseQuery(currentQuery);
+    if (inMemorySort) {
+      const field = this._projection.getFields().find((f) => f.id === inMemorySort.fieldId);
+      if (field) {
+        const newQuery = baseQuery.orderBy(Order.property(field.path, inMemorySort.direction));
+        Obj.update(view, (view2) => {
+          view2.query.ast = newQuery.ast;
+        });
+      }
+    } else {
+      Obj.update(view, (view2) => {
+        view2.query.ast = baseQuery.ast;
+      });
+    }
+    this._registry.set(this._inMemorySort, void 0);
+  }
+  /**
+  * Extracts the base query without order clauses.
+  */
+  _getBaseQuery(query) {
+    const ast = query.ast;
+    if (ast.type === "order") {
+      return Query.fromAst(ast.query);
+    }
+    return query;
+  }
+  /**
+  * Checks if the view has unsaved changes (in-memory sort differs from persisted sort).
+  */
+  getViewDirty() {
+    return this._registry.get(this._viewDirty);
+  }
+};
+var editorTextToCellValue = (props, value) => {
+  switch (props.format) {
+    case Format2.TypeFormat.Ref: {
+      if (Obj.isObject(value)) {
+        return Ref.make(value);
+      } else {
+        return value;
+      }
+    }
+    case Format2.TypeFormat.SingleSelect: {
+      const ids = extractTagIds(value);
+      if (ids && ids.length > 0) {
+        return ids[0];
+      } else {
+        return value;
+      }
+    }
+    case Format2.TypeFormat.MultiSelect: {
+      const ids = extractTagIds(value);
+      return ids || value;
+    }
+    default: {
+      return parseValue({
+        type: props.type,
+        format: props.format,
+        value
+      });
+    }
+  }
+};
+
+// src/model/table-presentation.ts
+import { Atom as Atom3 } from "@effect-atom/atom-react";
+import * as Predicate from "effect/Predicate";
+import { Obj as Obj2 } from "@dxos/echo";
+import { Format as Format3, TypeEnum } from "@dxos/echo/Format";
+import { SchemaEx as SchemaEx2 } from "@dxos/effect";
+import { cellClassesForFieldType, formatForDisplay } from "@dxos/react-ui-form";
+import { toPlaneCellIndex } from "@dxos/react-ui-grid";
+import { VIEW_FIELD_LIMIT } from "@dxos/schema";
+import { mx } from "@dxos/ui-theme";
+var TablePresentation = class {
+  model;
+  _registry;
+  _visibleRange;
+  fieldProjectionCache = /* @__PURE__ */ new Map();
+  constructor(registry, model) {
+    this.model = model;
+    this._registry = registry;
+    this._visibleRange = Atom3.make({
+      start: {
+        row: 0,
+        col: 0
+      },
+      end: {
+        row: 0,
+        col: 0
+      }
+    });
+  }
+  getCells(range, plane) {
+    this.fieldProjectionCache.clear();
+    let cells;
+    switch (plane) {
+      case "grid":
+        this._registry.set(this._visibleRange, range);
+        cells = this.getMainGridCells(range);
+        break;
+      case "frozenRowsStart":
+        cells = this.getHeaderCells(range);
+        break;
+      case "frozenColsStart":
+        cells = this.getSelectionColumnCells(range);
+        break;
+      case "frozenColsEnd":
+        cells = this.getActionColumnCells(range);
+        break;
+      case "fixedStartStart":
+        cells = this.getSelectAllCell();
+        break;
+      case "fixedStartEnd":
+        cells = this.getNewColumnCell();
+        break;
+      case "frozenRowsEnd":
+        cells = this.getDraftRowCells(range);
+        break;
+      case "fixedEndStart":
+        cells = this.getDraftIconCells(range);
+        break;
+      case "fixedEndEnd":
+        cells = this.getDraftActionCells(range);
+        break;
+      default:
+        cells = {};
+    }
+    if (plane === "grid" && this.model.features.dataEditable === false) {
+      Object.values(cells).forEach((cell) => {
+        cell.readonly = "text-select";
+      });
+    }
+    return cells;
+  }
+  /**
+  * Gets a field projection, using cache if available within the current render pass.
+  */
+  getFieldProjection(fieldId) {
+    let projection = this.fieldProjectionCache.get(fieldId);
+    if (!projection) {
+      projection = this.model.projection.getFieldProjection(fieldId);
+      this.fieldProjectionCache.set(fieldId, projection);
+    }
+    return projection;
+  }
+  createDataCell(cells, obj, field, colIndex, displayIndex) {
+    const { props } = this.getFieldProjection(field.id);
+    const cell = {
+      get value() {
+        const value = SchemaEx2.getValue(obj, field.path);
+        if (value == null) {
+          return "";
+        }
+        if (props.type === "array") {
+          return "";
+        }
+        switch (props.format) {
+          case Format3.TypeFormat.Boolean:
+          case Format3.TypeFormat.SingleSelect:
+          case Format3.TypeFormat.MultiSelect: {
+            return "";
+          }
+          case Format3.TypeFormat.Ref: {
+            if (!field.referencePath) {
+              return "";
+            }
+            return SchemaEx2.getValue(value.target, field.referencePath);
+          }
+          default: {
+            return formatForDisplay({
+              type: props.type,
+              format: props.format,
+              value
+            });
+          }
+        }
+      }
+    };
+    const classes = [];
+    const formatClasses = cellClassesForFieldType(props);
+    if (formatClasses) {
+      classes.push(formatClasses);
+    }
+    const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
+    if (rowSelectionClasses) {
+      classes.push(rowSelectionClasses);
+    }
+    cell.className = mx(classes);
+    if (props.type === TypeEnum.Array) {
+      const targetArray = SchemaEx2.getValue(obj, field.path);
+      if (targetArray && Array.isArray(targetArray)) {
+        const getLabel = (value) => {
+          if (!value) {
+            return void 0;
+          }
+          if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+            return String(value);
+          }
+          if (Array.isArray(value)) {
+            return "Array";
+          }
+          if (typeof value === "object" && value.name) {
+            return value.name;
+          }
+          if (typeof value === "object" && value.value) {
+            return `${value.value}`;
+          }
+          return "Object";
+        };
+        const tags = targetArray.map(getLabel).filter(Predicate.isNotNullable).map((title) => {
+          return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
+        }).join("");
+        cell.accessoryHtml = `<div class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
+      }
+    }
+    if (props.format === Format3.TypeFormat.Ref && props.referenceSchema) {
+      const targetObj = SchemaEx2.getValue(obj, field.path)?.target;
+      if (targetObj) {
+        const uri = Obj2.getURI(targetObj);
+        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor uri=${uri} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
+      }
+    }
+    if (props.format === Format3.TypeFormat.Boolean) {
+      const value = SchemaEx2.getValue(obj, field.path);
+      cell.accessoryHtml = tableControls.switch.render({
+        colIndex,
+        rowIndex: displayIndex,
+        checked: value ?? false
+      });
+      cell.readonly = "no-text-select";
+    }
+    if (props.format === Format3.TypeFormat.SingleSelect) {
+      const value = SchemaEx2.getValue(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options) {
+        const option = options.find((o) => o.id === value);
+        if (option) {
+          cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+        }
+      }
+    }
+    if (props.format === Format3.TypeFormat.MultiSelect) {
+      const values = SchemaEx2.getValue(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options && values && values.length > 0) {
+        const tags = values.map((value) => {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+          return null;
+        }).filter(Boolean).join("");
+        if (tags) {
+          cell.accessoryHtml = tags;
+        }
+      }
+    }
+    const idx = toPlaneCellIndex({
+      col: colIndex,
+      row: displayIndex
+    });
+    cells[idx] = cell;
+  }
+  getMainGridCells(range) {
+    const cells = {};
+    const fields = this.model.projection?.getFields() ?? [];
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const field = fields[col];
+        if (!field) {
+          continue;
+        }
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
+      }
+    }
+    return cells;
+  }
+  getDraftRowCells(range) {
+    const cells = {};
+    const fields = this.model.projection?.getFields() ?? [];
+    const draftRows = this.model.getDraftRows();
+    if (draftRows.length === 0) {
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        cells[toPlaneCellIndex({
+          col,
+          row: 0
+        })] = {
+          value: "",
+          readonly: true,
+          className: "dx-grid__row--cta__cell"
+        };
+      }
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const cellIndex = toPlaneCellIndex({
+            col,
+            row
+          });
+          const field = fields[col];
+          if (!field) {
+            continue;
+          }
+          this.createDataCell(cells, draftRow.data, field, col, row);
+          if (this.model.hasDraftRowValidationError(row, field.path)) {
+            const cellValue = cells[cellIndex];
+            if (cellValue) {
+              const existingClasses = cellValue.className || "";
+              const draftClasses = "dx-grid__cell--flagged";
+              cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+            }
+          }
+        }
+      }
+    }
+    return cells;
+  }
+  getHeaderCells(range) {
+    const cells = {};
+    const fields = this.model.projection?.getFields() ?? [];
+    const currentSort = this.model.getSorting();
+    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+      const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
+      const direction = currentSort?.fieldId === field.id ? currentSort.direction : void 0;
+      cells[toPlaneCellIndex({
+        col,
+        row: 0
+      })] = {
+        // TODO(burdon): Use same logic as form for fallback title.
+        value: "",
+        resizeHandle: "col",
+        accessoryHtml: `
+          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
+          ${direction !== void 0 ? tableButtons.sort.render({
+          fieldId: field.id,
+          direction
+        }) : ""}
+          ${tableButtons.columnSettings.render({
+          fieldId: field.id
+        })}
+        `,
+        className: "!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch"
+      };
+    }
+    return cells;
+  }
+  getSelectionColumnCells(range) {
+    const cells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: "no-text-select",
+        className: classes ? mx(classes) : void 0,
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: row,
+          checked: isSelected
+        })
+      };
+    }
+    return cells;
+  }
+  getActionColumnCells(range) {
+    const cells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: classes ? mx(classes) : void 0,
+        accessoryHtml: tableButtons.rowMenu.render({
+          rowIndex: row
+        })
+      };
+    }
+    return cells;
+  }
+  getSelectAllCell() {
+    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === "single") {
+      return {
+        [toPlaneCellIndex({
+          col: 0,
+          row: 0
+        })]: {
+          className: "!bg-toolbar-surface",
+          readonly: true,
+          value: ""
+        }
+      };
+    }
+    return {
+      [toPlaneCellIndex({
+        col: 0,
+        row: 0
+      })]: {
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: 0,
+          header: true,
+          checked: this.model.selection.allRowsSelected
+        }),
+        className: "!bg-toolbar-surface",
+        readonly: true,
+        value: ""
+      }
+    };
+  }
+  getNewColumnCell() {
+    return {
+      [toPlaneCellIndex({
+        col: 0,
+        row: 0
+      })]: {
+        accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
+          disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT
+        }) : void 0,
+        className: "!bg-toolbar-surface",
+        readonly: true,
+        value: ""
+      }
+    };
+  }
+  getDraftActionCells(range) {
+    const cells = {};
+    const draftRows = this.model.getDraftRows();
+    if (draftRows.length === 0) {
+      cells[toPlaneCellIndex({
+        col: 0,
+        row: 0
+      })] = {
+        value: "",
+        className: "dx-grid__row--cta__cell",
+        readonly: true
+      };
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        const disabled = !draftRow.valid;
+        cells[toPlaneCellIndex({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          accessoryHtml: tableButtons.saveDraftRow.render({
+            rowIndex: row,
+            disabled
+          })
+        };
+      }
+    }
+    return cells;
+  }
+  getDraftIconCells(range) {
+    const cells = {};
+    const draftRows = this.model.getDraftRows();
+    for (let row = range.start.row; row <= range.end.row; row++) {
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
+        className: mx("[&>div]:grid [&>div]:place-content-center", draftRows.length < 1 && "dx-grid__row--cta__cell")
+      };
+    }
+    return cells;
+  }
+};
+var cellClassesForRowSelection = (selected, selectionMode) => {
+  if (!selected) {
+    if (selectionMode === "single") {
+      return [
+        "cursor-pointer!"
+      ];
+    } else {
+      return void 0;
+    }
+  }
+  switch (selectionMode) {
+    case "single":
+      return [
+        "dx-grid__cell--no-focus-unfurl bg-current-surface! hover:bg-hover-surface cursor-pointer!"
+      ];
+    case "multiple":
+      return [
+        "bg-grid-cell-selected!"
+      ];
+  }
+};
+
+// src/hooks/useAddRow.ts
+import { useCallback } from "react";
+import { Obj as Obj3 } from "@dxos/echo";
+var useAddRow = ({ db, schema }) => {
+  return useCallback((data) => {
+    if (db && schema) {
+      try {
+        db.add(Obj3.make(schema, data ?? {}));
+        return "final";
+      } catch (error) {
+        return "draft";
+      }
+    }
+    return "final";
+  }, [
+    db,
+    schema
+  ]);
+};
+
+// src/hooks/useProjectionModel.ts
+import { useState } from "react";
+import { Type as Type2 } from "@dxos/echo";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { ProjectionModel, createEchoChangeCallback as createEchoChangeCallback2 } from "@dxos/schema";
+var useProjectionModel = (schema, table, registry) => {
+  const [projection, setProjection] = useState();
+  useAsyncEffect(async () => {
+    if (schema && table) {
+      const view = await table.view.load();
+      const jsonSchema = schema.jsonSchema;
+      const change = createEchoChangeCallback2(view, Type2.getDatabase(schema) != null ? schema : void 0);
+      const projection2 = new ProjectionModel({
+        registry,
+        view,
+        baseSchema: jsonSchema,
+        change
+      });
+      projection2.normalizeView();
+      setProjection(projection2);
+    }
+  }, [
+    schema,
+    table,
+    registry
+  ]);
+  return projection;
+};
+
+// src/hooks/useTableModel.ts
+import { RegistryContext } from "@effect-atom/atom-react";
+import { useContext, useEffect, useMemo, useState as useState2 } from "react";
+import { Obj as Obj4 } from "@dxos/echo";
+import { useSelected, useSelectionActions } from "@dxos/react-ui-attention";
+import { isNonNullable } from "@dxos/util";
+var useTableModel = ({ object, projection, db, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
+  const registry = useContext(RegistryContext);
+  const selected = useSelected(object && Obj4.getURI(object), "multi");
+  const initialSelection = useMemo(() => selected, [
+    object
+  ]);
+  const [model, setModel] = useState2();
+  useEffect(() => {
+    if (!object || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        registry,
+        object,
+        projection,
+        db,
+        change: createEchoChangeCallback(object),
+        features,
+        rowActions,
+        initialSelection,
+        onRowAction,
+        ...props
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    registry,
+    object,
+    projection,
+    features,
+    rowActions,
+    initialSelection
+  ]);
+  useEffect(() => {
+    if (rows && model) {
+      model.setRows(rows);
+    }
+  }, [
+    model,
+    rows
+  ]);
+  const { multiSelect, clear } = useSelectionActions([
+    model?.id
+  ].filter(isNonNullable));
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = registry.subscribe(model.selection.selectionAtom, () => {
+      const selectedItems = [
+        ...model.selection.selection
+      ];
+      multiSelect(selectedItems);
+      onSelectionChanged?.(selectedItems);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    registry,
+    model,
+    onSelectionChanged
+  ]);
+  return model;
+};
+
+export {
+  extractOrder,
+  getSortValue,
+  compareValues,
+  BUTTON_IDENTIFIERS,
+  tableButtons,
+  CONTROL_IDENTIFIERS,
+  CheckboxStory,
+  SwitchStory,
+  tableControls,
+  createEchoChangeCallback,
+  createDirectChangeCallback,
+  TableModel,
+  TablePresentation,
+  cellClassesForRowSelection,
+  useAddRow,
+  useProjectionModel,
+  useTableModel
+};
+//# sourceMappingURL=chunk-4KOQTPFC.mjs.map