@dxos/react-ui-table 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/dist/lib/browser/{chunk-OZTXLZGM.mjs → chunk-GS2UNGJK.mjs}

@@ -1,11 +1,11 @@
 import {
   schema_exports
-} from "./chunk-4K7JPALT.mjs";
+} from "./chunk-2PFAPQL4.mjs";
 
 // src/util/dynamic-table.ts
 import { Filter, Obj, Query } from "@dxos/echo";
 import { getTypename, toJsonSchema } from "@dxos/echo/internal";
-import { ProjectionModel, createView, getSchemaFromPropertyDefinitions } from "@dxos/schema";
+import { ProjectionModel, View, getSchemaFromPropertyDefinitions } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
@@ -31,7 +31,7 @@ var makeDynamicTable = ({ jsonSchema, properties }) => {
   const table = Obj.make(schema_exports.Table, {
     sizes: {}
   });
-  const view = createView({
+  const view = View.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
     presentation: table,
@@ -278,7 +278,6 @@ import { FormatEnum as FormatEnum2, getSchema, getValue as getValue2, setValue,
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
 import { getSnapshot, isLiveObject } from "@dxos/live-object";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 import { ProjectionModel as ProjectionModel2, validateSchema } from "@dxos/schema";
 
@@ -301,20 +300,34 @@ var extractTagIds = (value) => {
 // src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var SelectionModel = class extends Resource {
+  _rows;
+  _selectionMode;
+  _initialSelection;
+  _onSelectionChanged;
+  _selection;
+  _validSelectedIds = computed(() => {
+    const rows = this._rows.value;
+    if (!rows) {
+      return /* @__PURE__ */ new Set();
+    }
+    const validIds = new Set(rows.map((row) => row.id));
+    return new Set([
+      ...this._selection.value
+    ].filter((id) => validIds.has(id)));
+  });
+  _hasSelection = computed(() => this._validSelectedIds.value.size > 0);
+  _allSelected = computed(() => {
+    const rows = this._rows.value;
+    if (rows.length === 0) {
+      return false;
+    }
+    return rows.every((row) => this._selection.value.has(row.id));
+  });
+  constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
+    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged;
+    this._selection = signal(new Set(this._initialSelection));
+  }
   async _open() {
     const selectionWatcher = effect(() => {
       touch(this._selection.value);
@@ -337,59 +350,45 @@ var SelectionModel = class extends Resource {
   get selectionMode() {
     return this._selectionMode;
   }
-  constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
-    super(), _define_property(this, "_rows", void 0), _define_property(this, "_selectionMode", void 0), _define_property(this, "_initialSelection", void 0), _define_property(this, "_onSelectionChanged", void 0), _define_property(this, "_selection", void 0), _define_property(this, "_validSelectedIds", void 0), _define_property(this, "_hasSelection", void 0), _define_property(this, "_allSelected", void 0), _define_property(this, "getSelectedRows", void 0), _define_property(this, "isRowIndexSelected", void 0), _define_property(this, "isObjectSelected", void 0), //
-    // Manipulation
-    //
-    _define_property(this, "toggleSelectionForRowIndex", void 0), _define_property(this, "setSelection", void 0), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, this._validSelectedIds = computed(() => {
-      const rows = this._rows.value;
-      if (!rows) {
-        return /* @__PURE__ */ new Set();
-      }
-      const validIds = new Set(rows.map((row) => row.id));
-      return new Set([
-        ...this._selection.value
-      ].filter((id) => validIds.has(id)));
-    }), this._hasSelection = computed(() => this._validSelectedIds.value.size > 0), this._allSelected = computed(() => {
-      const rows = this._rows.value;
-      if (rows.length === 0) {
-        return false;
+  getSelectedRows = () => {
+    const selectedIds = this._validSelectedIds.value;
+    return this._rows.value.filter((row) => selectedIds.has(row.id));
+  };
+  isRowIndexSelected = (rowIndex) => {
+    const row = this._rows.value[rowIndex];
+    return this._selection.value.has(row.id);
+  };
+  isObjectSelected = (object) => {
+    return this._selection.value.has(object.id);
+  };
+  //
+  // Manipulation
+  //
+  toggleSelectionForRowIndex = (rowIndex) => {
+    const row = this._rows.value[rowIndex];
+    const newSelection = new Set(this._selection.value);
+    if (newSelection.has(row.id)) {
+      newSelection.delete(row.id);
+    } else {
+      if (this._selectionMode === "single") {
+        newSelection.clear();
       }
-      return rows.every((row) => this._selection.value.has(row.id));
-    }), this.getSelectedRows = () => {
-      const selectedIds = this._validSelectedIds.value;
-      return this._rows.value.filter((row) => selectedIds.has(row.id));
-    }, this.isRowIndexSelected = (rowIndex) => {
-      const row = this._rows.value[rowIndex];
-      return this._selection.value.has(row.id);
-    }, this.isObjectSelected = (object) => {
-      return this._selection.value.has(object.id);
-    }, this.toggleSelectionForRowIndex = (rowIndex) => {
-      const row = this._rows.value[rowIndex];
-      const newSelection = new Set(this._selection.value);
-      if (newSelection.has(row.id)) {
-        newSelection.delete(row.id);
-      } else {
-        if (this._selectionMode === "single") {
-          newSelection.clear();
-        }
-        newSelection.add(row.id);
+      newSelection.add(row.id);
+    }
+    this._selection.value = newSelection;
+  };
+  setSelection = (mode) => {
+    switch (mode) {
+      case "all": {
+        this._selection.value = new Set(this._rows.value.map((row) => row.id));
+        break;
       }
-      this._selection.value = newSelection;
-    }, this.setSelection = (mode) => {
-      switch (mode) {
-        case "all": {
-          this._selection.value = new Set(this._rows.value.map((row) => row.id));
-          break;
-        }
-        case "none": {
-          this._selection.value = /* @__PURE__ */ new Set();
-          break;
-        }
+      case "none": {
+        this._selection.value = /* @__PURE__ */ new Set();
+        break;
       }
-    };
-    this._selection = signal(new Set(this._initialSelection));
-  }
+    }
+  };
 };
 
 // src/model/table-sorting.ts
@@ -397,20 +396,34 @@ import { computed as computed2, signal as signal2 } from "@preact/signals-core";
 import orderBy from "lodash.orderby";
 import { FormatEnum, TypeEnum, getValue } from "@dxos/echo/internal";
 import { formatForDisplay } from "@dxos/react-ui-form";
-function _define_property2(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+var TableSorting = class {
+  _view;
+  _projection;
+  _displayToDataIndex = /* @__PURE__ */ new Map();
+  _rows;
+  _localSort = signal2(void 0);
+  _isDirty;
+  sortedRows;
+  constructor(rows, _view, _projection) {
+    this._view = _view;
+    this._projection = _projection;
+    this._rows = rows;
+    this._isDirty = computed2(() => {
+      const local = this._localSort.value;
+      const viewSort = this._view.sort?.[0];
+      if (local?.type === "cleared") {
+        return viewSort !== void 0;
+      }
+      if (local?.type === "active") {
+        if (!viewSort) {
+          return true;
+        }
+        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
+      }
+      return false;
     });
-  } else {
-    obj[key] = value;
+    this.sortedRows = this.initialiseSortedRows();
   }
-  return obj;
-}
-var TableSorting = class {
   /**
   * @reactive
   * @returns Local sort if present, falls back to view sort.
@@ -546,51 +559,9 @@ var TableSorting = class {
       value
     });
   }
-  constructor(rows, _view, _projection) {
-    _define_property2(this, "_view", void 0);
-    _define_property2(this, "_projection", void 0);
-    _define_property2(this, "_displayToDataIndex", void 0);
-    _define_property2(this, "_rows", void 0);
-    _define_property2(this, "_localSort", void 0);
-    _define_property2(this, "_isDirty", void 0);
-    _define_property2(this, "sortedRows", void 0);
-    this._view = _view;
-    this._projection = _projection;
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._localSort = signal2(void 0);
-    this._rows = rows;
-    this._isDirty = computed2(() => {
-      const local = this._localSort.value;
-      const viewSort = this._view.sort?.[0];
-      if (local?.type === "cleared") {
-        return viewSort !== void 0;
-      }
-      if (local?.type === "active") {
-        if (!viewSort) {
-          return true;
-        }
-        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
-      }
-      return false;
-    });
-    this.sortedRows = this.initialiseSortedRows();
-  }
 };
 
 // src/model/table-model.ts
-function _define_property3(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
   selection: {
@@ -601,8 +572,71 @@ var defaultFeatures = {
   schemaEditable: false
 };
 var TableModel = class extends Resource2 {
+  _view;
+  _projection;
+  _table;
+  _visibleRange = signal3({
+    start: {
+      row: 0,
+      col: 0
+    },
+    end: {
+      row: 0,
+      col: 0
+    }
+  });
+  _onInsertRow;
+  _onDeleteRows;
+  _onDeleteColumn;
+  _onCellUpdate;
+  _onRowOrderChange;
+  _onRowAction;
+  _rowActions;
+  _features;
+  _rows = signal3([]);
+  _draftRows = signal3([]);
+  _sorting;
+  _pinnedRows;
+  _selection;
+  _columnMeta;
+  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
+    top: [],
+    bottom: []
+  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
+    super();
+    this._view = view;
+    this._projection = projection ?? new ProjectionModel2(schema, view.projection);
+    this._projection.normalizeView();
+    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.", {
+      F: __dxlog_file,
+      L: 148,
+      S: this,
+      A: [
+        "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
+        "'Single selection is not compatible with editable tables.'"
+      ]
+    });
+    this._sorting = new TableSorting(this._rows, this._view, this._projection);
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
+    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
+    this._pinnedRows = pinnedRows;
+    this._rowActions = rowActions;
+    this._onInsertRow = onInsertRow;
+    this._onDeleteRows = onDeleteRows;
+    this._onDeleteColumn = onDeleteColumn;
+    this._onCellUpdate = onCellUpdate;
+    this._onRowOrderChange = onRowOrderChange;
+    this._onRowAction = onRowAction;
+  }
   get id() {
-    return fullyQualifiedId(this._view);
+    return Obj2.getDXN(this._view).toString();
   }
   get view() {
     return this._view;
@@ -610,7 +644,7 @@ var TableModel = class extends Resource2 {
   get table() {
     invariant(this._table, "Model not initialized", {
       F: __dxlog_file,
-      L: 187,
+      L: 186,
       S: this,
       A: [
         "this._table",
@@ -649,7 +683,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 226,
+      L: 225,
       S: this,
       A: [
         "this._columnMeta",
@@ -675,7 +709,7 @@ var TableModel = class extends Resource2 {
     const presentation = this._view.presentation.target ?? await this._view.presentation.load();
     invariant(Obj2.instanceOf(schema_exports.Table, presentation), void 0, {
       F: __dxlog_file,
-      L: 249,
+      L: 248,
       S: this,
       A: [
         "Obj.instanceOf(Table.Table, presentation)",
@@ -743,6 +777,17 @@ var TableModel = class extends Resource2 {
     });
     this._ctx.onDispose(draftRowsWatcher);
   }
+  //
+  // Data
+  //
+  setRows = (obj) => {
+    this._rows.value = obj;
+  };
+  getRowCount = () => this._rows.value.length;
+  /**
+  * @reactive
+  */
+  getDraftRowCount = () => this._draftRows.value.length;
   // TODO(ZaymonFC): Return .value instead of exposing the signal.
   get draftRows() {
     return this._draftRows;
@@ -761,6 +806,14 @@ var TableModel = class extends Resource2 {
     const validationErrors = draftRow.validationErrors || [];
     return validationErrors.some((error) => error.path === fieldPath);
   }
+  getColumnCount = () => this._projection?.fields.length ?? 0;
+  insertRow = () => {
+    const result = this._onInsertRow?.();
+    if (result === "draft" && this._draftRows.value.length === 0) {
+      this.createDraftRow();
+    }
+    return result ?? "final";
+  };
   createDraftRow() {
     if (!this._projection) {
       return;
@@ -800,6 +853,187 @@ var TableModel = class extends Resource2 {
     const schema = toEffectSchema(this._projection.baseSchema);
     return validateSchema(schema, data) || [];
   }
+  commitDraftRow = (draftRowIndex) => {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return false;
+    }
+    const draftRow = this._draftRows.value[draftRowIndex];
+    if (!draftRow.valid) {
+      return false;
+    }
+    const insertRowResult = this._onInsertRow?.(draftRow.data);
+    if (insertRowResult === "final") {
+      const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
+      this._draftRows.value = newDraftRows;
+    }
+    return insertRowResult === "final";
+  };
+  deleteRow = (rowIndex) => {
+    const row = this._sorting.getDataIndex(rowIndex);
+    const obj = this._rows.value[row];
+    const objectsToDelete = [];
+    if (this.features.selection.enabled && this._selection.hasSelection.value) {
+      const selectedRows = this._selection.getSelectedRows();
+      objectsToDelete.push(...selectedRows);
+    } else {
+      objectsToDelete.push(obj);
+    }
+    this._onDeleteRows?.(row, objectsToDelete);
+  };
+  handleRowAction = (actionId, rowIndex) => {
+    if (!this._onRowAction) {
+      return;
+    }
+    const row = this._sorting.getDataIndex(rowIndex);
+    const data = this._rows.value[row];
+    if (data) {
+      this._onRowAction(actionId, data);
+    }
+  };
+  getCellData = (cell) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return void 0;
+    }
+    const field = fields[col];
+    let value;
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._draftRows.value.length) {
+        value = getValue2(this._draftRows.value[row].data, field.path);
+      } else {
+        return void 0;
+      }
+    } else {
+      const dataIndex = this._sorting.getDataIndex(row);
+      value = getValue2(this._rows.value[dataIndex], field.path);
+    }
+    if (value == null) {
+      return "";
+    }
+    const { props } = this._projection.getFieldProjection(field.id);
+    switch (props.format) {
+      case FormatEnum2.Ref: {
+        if (!field.referencePath) {
+          return "";
+        }
+        return getValue2(value.target, field.referencePath);
+      }
+      default: {
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          value
+        });
+      }
+    }
+  };
+  validateCellData = async ({ col, row, plane }, value) => {
+    const fields = this._projection?.fields ?? [];
+    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._draftRows.value.length;
+      if (isInvalidDraftRowIndex) {
+        return {
+          valid: false,
+          error: "Invalid draft row index"
+        };
+      }
+      const draftRow = this._draftRows.value[row];
+      const snapshot = {
+        ...draftRow.data
+      };
+      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 rowIdx = this._sorting.getDataIndex(row);
+      const currentRow = this._rows.value[rowIdx];
+      invariant(currentRow, "Invalid row index", {
+        F: __dxlog_file,
+        L: 525,
+        S: this,
+        A: [
+          "currentRow",
+          "'Invalid row index'"
+        ]
+      });
+      const snapshot = getSnapshot(currentRow);
+      setValue(snapshot, field.path, transformedValue);
+      const schema = getSchema(currentRow);
+      invariant(schema, void 0, {
+        F: __dxlog_file,
+        L: 531,
+        S: this,
+        A: [
+          "schema",
+          ""
+        ]
+      });
+      const validationResult = validateSchema(schema, snapshot);
+      if (validationResult && validationResult.length > 0) {
+        const error = validationResult[0];
+        invariant(error.path === field.path, void 0, {
+          F: __dxlog_file,
+          L: 536,
+          S: this,
+          A: [
+            "error.path === field.path",
+            ""
+          ]
+        });
+        return {
+          valid: false,
+          error: error.message
+        };
+      }
+      return {
+        valid: true
+      };
+    }
+  };
+  setCellData = (cell, value) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
+    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 === FormatEnum2.Ref && !isLiveObject(value)) {
+      return;
+    }
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._draftRows.value.length) {
+        setValue(this._draftRows.value[row].data, field.path, transformedValue);
+        this.validateDraftRow(row);
+      }
+    } else {
+      const rowIdx = this._sorting.getDataIndex(row);
+      setValue(this._rows.value[rowIdx], field.path, transformedValue);
+    }
+  };
   /**
   * Updates a cell's value using a transform function.
   * @param {DxGridPlanePosition} position - The position of the cell to update.
@@ -880,240 +1114,6 @@ var TableModel = class extends Resource2 {
   saveView() {
     this._sorting.save();
   }
-  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
-    top: [],
-    bottom: []
-  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
-    super(), _define_property3(this, "_view", void 0), _define_property3(this, "_projection", void 0), _define_property3(this, "_table", void 0), _define_property3(this, "_visibleRange", signal3({
-      start: {
-        row: 0,
-        col: 0
-      },
-      end: {
-        row: 0,
-        col: 0
-      }
-    })), _define_property3(this, "_onInsertRow", void 0), _define_property3(this, "_onDeleteRows", void 0), _define_property3(this, "_onDeleteColumn", void 0), _define_property3(this, "_onCellUpdate", void 0), _define_property3(this, "_onRowOrderChange", void 0), _define_property3(this, "_onRowAction", void 0), _define_property3(this, "_rowActions", void 0), _define_property3(this, "_features", void 0), _define_property3(this, "_rows", signal3([])), _define_property3(this, "_draftRows", signal3([])), _define_property3(this, "_sorting", void 0), _define_property3(this, "_pinnedRows", void 0), _define_property3(this, "_selection", void 0), _define_property3(this, "_columnMeta", void 0), //
-    // Data
-    //
-    _define_property3(this, "setRows", (obj) => {
-      this._rows.value = obj;
-    }), _define_property3(this, "getRowCount", () => this._rows.value.length), /**
-    * @reactive
-    */
-    _define_property3(this, "getDraftRowCount", () => this._draftRows.value.length), _define_property3(this, "getColumnCount", () => this._projection?.fields.length ?? 0), _define_property3(this, "insertRow", () => {
-      const result = this._onInsertRow?.();
-      if (result === "draft" && this._draftRows.value.length === 0) {
-        this.createDraftRow();
-      }
-      return result ?? "final";
-    }), _define_property3(this, "commitDraftRow", (draftRowIndex) => {
-      if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
-        return false;
-      }
-      const draftRow = this._draftRows.value[draftRowIndex];
-      if (!draftRow.valid) {
-        return false;
-      }
-      const insertRowResult = this._onInsertRow?.(draftRow.data);
-      if (insertRowResult === "final") {
-        const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
-        this._draftRows.value = newDraftRows;
-      }
-      return insertRowResult === "final";
-    }), _define_property3(this, "deleteRow", (rowIndex) => {
-      const row = this._sorting.getDataIndex(rowIndex);
-      const obj = this._rows.value[row];
-      const objectsToDelete = [];
-      if (this.features.selection.enabled && this._selection.hasSelection.value) {
-        const selectedRows = this._selection.getSelectedRows();
-        objectsToDelete.push(...selectedRows);
-      } else {
-        objectsToDelete.push(obj);
-      }
-      this._onDeleteRows?.(row, objectsToDelete);
-    }), _define_property3(this, "handleRowAction", (actionId, rowIndex) => {
-      if (!this._onRowAction) {
-        return;
-      }
-      const row = this._sorting.getDataIndex(rowIndex);
-      const data = this._rows.value[row];
-      if (data) {
-        this._onRowAction(actionId, data);
-      }
-    }), _define_property3(this, "getCellData", (cell) => {
-      const { col, row, plane } = cell;
-      const fields = this._projection?.fields ?? [];
-      if (col < 0 || col >= fields.length) {
-        return void 0;
-      }
-      const field = fields[col];
-      let value;
-      if (plane === "frozenRowsEnd") {
-        if (row >= 0 && row < this._draftRows.value.length) {
-          value = getValue2(this._draftRows.value[row].data, field.path);
-        } else {
-          return void 0;
-        }
-      } else {
-        const dataIndex = this._sorting.getDataIndex(row);
-        value = getValue2(this._rows.value[dataIndex], field.path);
-      }
-      if (value == null) {
-        return "";
-      }
-      const { props } = this._projection.getFieldProjection(field.id);
-      switch (props.format) {
-        case FormatEnum2.Ref: {
-          if (!field.referencePath) {
-            return "";
-          }
-          return getValue2(value.target, field.referencePath);
-        }
-        default: {
-          return formatForEditing({
-            type: props.type,
-            format: props.format,
-            value
-          });
-        }
-      }
-    }), _define_property3(this, "validateCellData", async ({ col, row, plane }, value) => {
-      const fields = this._projection?.fields ?? [];
-      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._draftRows.value.length;
-        if (isInvalidDraftRowIndex) {
-          return {
-            valid: false,
-            error: "Invalid draft row index"
-          };
-        }
-        const draftRow = this._draftRows.value[row];
-        const snapshot = {
-          ...draftRow.data
-        };
-        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 rowIdx = this._sorting.getDataIndex(row);
-        const currentRow = this._rows.value[rowIdx];
-        invariant(currentRow, "Invalid row index", {
-          F: __dxlog_file,
-          L: 522,
-          S: this,
-          A: [
-            "currentRow",
-            "'Invalid row index'"
-          ]
-        });
-        const snapshot = getSnapshot(currentRow);
-        setValue(snapshot, field.path, transformedValue);
-        const schema2 = getSchema(currentRow);
-        invariant(schema2, void 0, {
-          F: __dxlog_file,
-          L: 528,
-          S: this,
-          A: [
-            "schema",
-            ""
-          ]
-        });
-        const validationResult = validateSchema(schema2, snapshot);
-        if (validationResult && validationResult.length > 0) {
-          const error = validationResult[0];
-          invariant(error.path === field.path, void 0, {
-            F: __dxlog_file,
-            L: 533,
-            S: this,
-            A: [
-              "error.path === field.path",
-              ""
-            ]
-          });
-          return {
-            valid: false,
-            error: error.message
-          };
-        }
-        return {
-          valid: true
-        };
-      }
-    }), _define_property3(this, "setCellData", (cell, value) => {
-      const { col, row, plane } = cell;
-      const fields = this._projection?.fields ?? [];
-      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 === FormatEnum2.Ref && !isLiveObject(value)) {
-        return;
-      }
-      if (plane === "frozenRowsEnd") {
-        if (row >= 0 && row < this._draftRows.value.length) {
-          setValue(this._draftRows.value[row].data, field.path, transformedValue);
-          this.validateDraftRow(row);
-        }
-      } else {
-        const rowIdx = this._sorting.getDataIndex(row);
-        setValue(this._rows.value[rowIdx], field.path, transformedValue);
-      }
-    });
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel2(schema, view.projection);
-    this._projection.normalizeView();
-    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.", {
-      F: __dxlog_file,
-      L: 149,
-      S: this,
-      A: [
-        "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
-        "'Single selection is not compatible with editable tables.'"
-      ]
-    });
-    this._sorting = new TableSorting(this._rows, this._view, this._projection);
-    if (sorting.length > 0) {
-      const [sort] = sorting;
-      this._sorting.setSort(sort.fieldId, sort.direction);
-    }
-    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
-    this._pinnedRows = pinnedRows;
-    this._rowActions = rowActions;
-    this._onInsertRow = onInsertRow;
-    this._onDeleteRows = onDeleteRows;
-    this._onDeleteColumn = onDeleteColumn;
-    this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChange = onRowOrderChange;
-    this._onRowAction = onRowAction;
-  }
 };
 var editorTextToCellValue = (props, value) => {
   switch (props.format) {
@@ -1148,83 +1148,68 @@ var editorTextToCellValue = (props, value) => {
 
 // src/model/modal-controller.ts
 import { signal as signal4 } from "@preact/signals-core";
-function _define_property4(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var ModalController = class {
+  _state = signal4({
+    type: "closed"
+  });
+  _triggerRef = {
+    current: null
+  };
   get state() {
     return this._state;
   }
   get trigger() {
     return this._triggerRef;
   }
-  constructor() {
-    _define_property4(this, "_state", signal4({
-      type: "closed"
-    }));
-    _define_property4(this, "_triggerRef", {
-      current: null
-    });
-    _define_property4(this, "setTrigger", (trigger) => {
-      this._triggerRef.current = trigger;
-    });
-    _define_property4(this, "showRowMenu", (rowIndex) => {
-      this._state.value = {
-        type: "row",
-        rowIndex
-      };
-    });
-    _define_property4(this, "showColumnMenu", (fieldId) => {
-      this._state.value = {
-        type: "column",
-        fieldId
-      };
-    });
-    _define_property4(this, "showColumnCreator", () => {
-      this._state.value = {
-        type: "columnSettings",
-        mode: {
-          type: "create"
-        }
-      };
-    });
-    _define_property4(this, "showReferencePanel", (targetId, schemaId) => {
-      this._state.value = {
-        type: "refPanel",
-        targetId,
-        typename: schemaId
-      };
-    });
-    _define_property4(this, "openColumnSettings", () => {
-      if (this._state.value.type === "column") {
-        const fieldId = this._state.value.fieldId;
-        requestAnimationFrame(() => {
-          this._state.value = {
-            type: "columnSettings",
-            mode: {
-              type: "edit",
-              fieldId
-            }
-          };
-        });
+  setTrigger = (trigger) => {
+    this._triggerRef.current = trigger;
+  };
+  showRowMenu = (rowIndex) => {
+    this._state.value = {
+      type: "row",
+      rowIndex
+    };
+  };
+  showColumnMenu = (fieldId) => {
+    this._state.value = {
+      type: "column",
+      fieldId
+    };
+  };
+  showColumnCreator = () => {
+    this._state.value = {
+      type: "columnSettings",
+      mode: {
+        type: "create"
       }
-    });
-    _define_property4(this, "close", () => {
-      this._state.value = {
-        type: "closed"
-      };
-    });
-  }
+    };
+  };
+  showReferencePanel = (targetId, schemaId) => {
+    this._state.value = {
+      type: "refPanel",
+      targetId,
+      typename: schemaId
+    };
+  };
+  openColumnSettings = () => {
+    if (this._state.value.type === "column") {
+      const fieldId = this._state.value.fieldId;
+      requestAnimationFrame(() => {
+        this._state.value = {
+          type: "columnSettings",
+          mode: {
+            type: "edit",
+            fieldId
+          }
+        };
+      });
+    }
+  };
+  close = () => {
+    this._state.value = {
+      type: "closed"
+    };
+  };
 };
 
 // src/model/table-presentation.ts
@@ -1236,20 +1221,23 @@ import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
-function _define_property5(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var TablePresentation = class {
+  model;
+  _visibleRange;
+  fieldProjectionCache = /* @__PURE__ */ new Map();
+  constructor(model, _visibleRange = signal5({
+    start: {
+      row: 0,
+      col: 0
+    },
+    end: {
+      row: 0,
+      col: 0
+    }
+  })) {
+    this.model = model;
+    this._visibleRange = _visibleRange;
+  }
   getCells(range, plane) {
     this.fieldProjectionCache.clear();
     let cells;
@@ -1635,23 +1623,6 @@ var TablePresentation = class {
     }
     return cells;
   }
-  constructor(model, _visibleRange = signal5({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  })) {
-    _define_property5(this, "model", void 0);
-    _define_property5(this, "_visibleRange", void 0);
-    _define_property5(this, "fieldProjectionCache", void 0);
-    this.model = model;
-    this._visibleRange = _visibleRange;
-    this.fieldProjectionCache = /* @__PURE__ */ new Map();
-  }
 };
 var cellClassesForRowSelection = (selected, selectionMode) => {
   if (!selected) {
@@ -1680,13 +1651,13 @@ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { effect as effect3 } from "@preact/signals-core";
 import orderBy2 from "lodash.orderby";
 import { useEffect, useMemo, useState } from "react";
-import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { Obj as Obj4 } from "@dxos/echo";
 import { useSelected, useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
 var useTableModel = ({ view, schema, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   var _effect = _useSignals();
   try {
-    const selected = useSelected(view && fullyQualifiedId2(view), "multi");
+    const selected = useSelected(view && Obj4.getDXN(view).toString(), "multi");
     const initialSelection = useMemo(() => selected, [
       view
     ]);
@@ -1765,12 +1736,12 @@ var useTableModel = ({ view, schema, projection, rows, rowActions, features, onS
 
 // src/hooks/useAddRow.ts
 import { useCallback } from "react";
-import { Obj as Obj4 } from "@dxos/echo";
+import { Obj as Obj5 } from "@dxos/echo";
 var useAddRow = ({ space, schema }) => {
   return useCallback((data) => {
     if (space && schema) {
       try {
-        space.db.add(Obj4.make(schema, data ?? {}));
+        space.db.add(Obj5.make(schema, data ?? {}));
         return "final";
       } catch (error) {
         return "draft";
@@ -1801,4 +1772,4 @@ export {
   useTableModel,
   useAddRow
 };
-//# sourceMappingURL=chunk-OZTXLZGM.mjs.map
+//# sourceMappingURL=chunk-GS2UNGJK.mjs.map