@dxos/react-ui-table 0.8.4-main.f5c0578 → 0.8.4-main.fcfe5033a5

package/dist/lib/browser/{chunk-ZAOSIG3L.mjs → chunk-F7Y374KL.mjs}

@@ -1,119 +1,64 @@
-import {
-  TableView
-} from "./chunk-L2LSB6KV.mjs";
-
-// src/util/dynamic-table.ts
-import { Obj } from "@dxos/echo";
-import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { ProjectionModel, createView, getSchemaFromPropertyDefinitions } from "@dxos/schema";
-var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
-  if (typename && properties) {
-    const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
-    return {
-      typename: schema2.typename,
-      jsonSchema: schema2.jsonSchema
-    };
-  } else if (schema) {
-    return {
-      typename: getTypename(schema),
-      jsonSchema: toJsonSchema(schema)
-    };
-  } else if (typename && jsonSchema) {
-    return {
-      typename,
-      jsonSchema
-    };
-  } else {
-    throw new Error("invalid properties");
+// 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;
 };
-var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
-  const table = Obj.make(TableView, {
-    sizes: {}
-  });
-  const view = createView({
-    typename,
-    jsonSchema,
-    presentation: table,
-    ...properties && {
-      fields: properties.map((property) => property.name)
-    }
-  });
-  const projection = new ProjectionModel(jsonSchema, view.projection);
-  if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
-  }
-  return {
-    projection,
-    view
-  };
-};
-var setProperties = (view, projection, table, properties) => {
-  for (const property of properties) {
-    const field = projection.fields.find((field2) => field2.path === property.name);
-    if (field) {
-      if (property.size !== void 0) {
-        table.sizes[field.path] = property.size;
-      }
-      if (property.title !== void 0) {
-        const fieldProjection = projection.getFieldProjection(field.id);
-        projection.setFieldProjection({
-          ...fieldProjection,
-          props: {
-            ...fieldProjection.props,
-            title: property.title
-          }
-        });
-      }
-      if (property.sort) {
-        const fieldId = field.id;
-        view.query.sort = [
-          {
-            fieldId,
-            direction: property.sort
-          }
-        ];
-      }
+
+// 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);
 };
-
-// src/util/signals.ts
-var touch = (value) => value;
-
-// src/util/table.ts
-import { Match } from "effect";
-import { Obj as Obj2 } from "@dxos/echo";
-import { toEffectSchema } from "@dxos/echo-schema";
-import { createViewFromSpace, getSchemaProperties } from "@dxos/schema";
-var createTable = async ({ sizes, ...props }) => {
-  const table = Obj2.make(TableView, {
-    sizes: {}
-  });
-  const { jsonSchema, view } = await createViewFromSpace({
-    ...props,
-    presentation: table
-  });
-  const schema = toEffectSchema(jsonSchema);
-  const shouldIncludeId = props.fields?.find((field) => field === "id") !== void 0;
-  const properties = getSchemaProperties(schema.ast, {}, shouldIncludeId);
-  for (const property of properties) {
-    if (sizes?.[property.name]) {
-      table.sizes[property.name] = sizes[property.name];
-      continue;
-    }
-    Match.type().pipe(Match.when("boolean", () => {
-      table.sizes[property.name] = 100;
-    }), Match.when("number", () => {
-      table.sizes[property.name] = 100;
-    }), Match.orElse(() => {
-    }))(property.type);
-  }
-  return {
-    jsonSchema,
-    schema,
-    view
-  };
+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
@@ -125,10 +70,9 @@ var BUTTON_IDENTIFIERS = {
   saveDraftRow: "data-table-save-draft-row-button",
   sort: "data-table-sort-button"
 };
-var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
+var createButton = ({ attr, data, disabled = false, icon, testId, type: _type = "primary" }) => {
   const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-  const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  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,
@@ -154,7 +98,8 @@ var columnSettingsButton = {
       attr: BUTTON_IDENTIFIERS.columnSettings,
       icon: columnSettingsButton.icon,
       data: {
-        "data-field-id": fieldId
+        "data-field-id": fieldId,
+        "data-variant": "ghost"
       },
       testId: "table-column-settings-button"
     });
@@ -240,8 +185,8 @@ var CONTROL_IDENTIFIERS = {
   switch: "data-table-switch"
 };
 var BASE_CLASSES = {
-  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
-  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
+  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(" ");
@@ -289,32 +234,17 @@ var tableControls = {
   }
 };
 
-// src/util/schema.ts
-import { Schema } from "effect";
-import { TypeLiteral, isTypeLiteral } from "effect/SchemaAST";
-var narrowSchema = (schema, paths) => {
-  const ast = schema?.ast;
-  if (isTypeLiteral(ast)) {
-    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
-    if (propertySignatures.length > 0) {
-      const narrowType = new TypeLiteral(propertySignatures, []);
-      return Schema.make(narrowType);
-    }
-  }
-  return void 0;
-};
-
 // src/model/table-model.ts
-import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
+import { Atom as Atom2 } from "@effect-atom/atom-react";
 import { Resource as Resource2 } from "@dxos/context";
-import { Obj as Obj3, Ref } from "@dxos/echo";
-import { FormatEnum as FormatEnum2, getSchema, getSnapshot, getValue as getValue2, setValue, toEffectSchema as toEffectSchema2 } from "@dxos/echo-schema";
+import { Format as Format2, Obj, Order, Query, Ref } from "@dxos/echo";
+import { toEffectSchema } from "@dxos/echo/internal";
+import { getSnapshot } from "@dxos/echo/internal";
+import { getValue, setValue } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
-import { 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";
+import { validateSchema } from "@dxos/schema";
 
 // src/util/tag.ts
 var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
@@ -333,273 +263,139 @@ var extractTagIds = (value) => {
 };
 
 // src/model/selection-model.ts
-import { computed, effect, signal } from "@preact/signals-core";
+import { Atom } from "@effect-atom/atom-react";
 import { Resource } from "@dxos/context";
 var SelectionModel = class extends Resource {
+  _registry;
   _rows;
-  _selectionMode;
-  _initialSelection;
-  _onSelectionChanged;
   _selection;
   _validSelectedIds;
   _hasSelection;
   _allSelected;
-  constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
-    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, this._validSelectedIds = computed(() => {
-      const rows = this._rows.value;
-      if (!rows) {
+  _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(rows.map((row) => row.id));
+      const validIds = new Set(rows2.map((row) => row.id));
+      const selection = get(this._selection);
       return new Set([
-        ...this._selection.value
+        ...selection
       ].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) {
+    });
+    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;
       }
-      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);
-      }
-      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;
-        }
-      }
-    };
-    this._selection = signal(new Set(this._initialSelection));
+      const selection = get(this._selection);
+      return rows2.every((row) => selection.has(row.id));
+    });
   }
   async _open() {
-    const selectionWatcher = effect(() => {
-      touch(this._selection.value);
+    const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
       this._onSelectionChanged?.();
     });
-    this._ctx.onDispose(selectionWatcher);
+    this._ctx.onDispose(selectionUnsubscribe);
   }
   //
   // Getters
   //
-  get selection() {
+  /** Get the selection atom for reactive access. */
+  get selectionAtom() {
     return this._selection;
   }
-  get hasSelection() {
+  /** 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;
   }
-  get allRowsSeleted() {
+  /** 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;
-  isRowIndexSelected;
-  isObjectSelected;
+  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;
-  setSelection;
-};
-
-// src/model/table-sorting.ts
-import { computed as computed2, signal as signal2 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
-import { FormatEnum, TypeEnum, getValue } from "@dxos/echo-schema";
-import { formatForDisplay } from "@dxos/react-ui-form";
-var TableSorting = class {
-  _view;
-  _projection;
-  _displayToDataIndex;
-  _rows;
-  _localSort;
-  _isDirty;
-  sortedRows;
-  constructor(rows, _view, _projection) {
-    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.query.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();
-  }
-  /**
-  * @reactive
-  * @returns Local sort if present, falls back to view sort.
-  */
-  get sorting() {
-    const local = this._localSort.value;
-    if (local?.type === "cleared") {
-      return void 0;
-    }
-    if (local?.type === "active") {
-      return local.sort;
-    }
-    return this._view.query.sort?.[0];
-  }
-  /**
-  * @reactive
-  * @returns Whether local sort differs from view sort.
-  */
-  get isDirty() {
-    return this._isDirty.value;
-  }
-  getDataIndex(displayIndex) {
-    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
-  }
-  setSort(fieldId, direction) {
-    this._localSort.value = {
-      type: "active",
-      sort: {
-        fieldId,
-        direction
+  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();
       }
-    };
-  }
-  toggleSort(fieldId) {
-    if (!this.sorting || this.sorting.fieldId !== fieldId) {
-      return;
+      newSelection.add(row.id);
     }
-    switch (this.sorting.direction) {
-      case "asc": {
-        this.setSort(fieldId, "desc");
+    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 "desc": {
-        this.setSort(fieldId, "asc");
+      case "none": {
+        this._registry.set(this._selection, /* @__PURE__ */ new Set());
         break;
       }
     }
-  }
-  clearSort() {
-    this._localSort.value = {
-      type: "cleared"
-    };
-  }
-  save() {
-    if (this._localSort.value !== void 0) {
-      if (this._localSort.value.type === "active") {
-        this._view.query.sort = [
-          this._localSort.value.sort
-        ];
-      } else {
-        this._view.query.sort = [];
-      }
-      this._localSort.value = void 0;
-    }
-  }
-  //
-  // Initialisation.
-  //
-  initialiseSortedRows() {
-    return computed2(() => {
-      this._displayToDataIndex.clear();
-      const sort = this.sorting;
-      if (!sort) {
-        return this._rows.value;
-      }
-      const field = this._projection.fields.find((f) => f.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-      const { props } = this._projection.getFieldProjection(field.id);
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const sortValue = this.getSortValue(props, field, item);
-        const isEmpty = !(props.type === TypeEnum.Boolean) && (sortValue == null || sortValue === "");
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty
-        };
-      });
-      const ordered = orderBy(dataWithIndices, [
-        "isEmpty",
-        "value"
-      ], [
-        "asc",
-        sort.direction
-      ]);
-      ordered.forEach(({ index: dataIndex }, displayIndex) => {
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      });
-      return ordered.map(({ item }) => item);
-    });
-  }
-  getSortValue(props, field, item) {
-    const { type, format } = props;
-    const value = getValue(item, field.path);
-    if (type === TypeEnum.Boolean) {
-      return !!value;
-    }
-    if (type === TypeEnum.Number) {
-      return value;
-    }
-    if (value == null) {
-      return value;
-    }
-    if (format === FormatEnum.SingleSelect) {
-      const options = props.options;
-      if (!options) {
-        return void 0;
-      }
-      const option = options.find((option2) => option2.id === value);
-      return option ? options.indexOf(option) : void 0;
-    }
-    if (format === FormatEnum.Ref && field.referencePath) {
-      const refValue = getValue(value.target, field.referencePath);
-      return refValue;
-    }
-    return formatForDisplay({
-      type,
-      format,
-      value
-    });
-  }
+  };
 };
 
 // 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.change(table, (table2) => mutate(table2)),
+  row: (row, mutate) => {
+    if (Obj.isObject(row)) {
+      Obj.change(row, (row2) => mutate(row2));
+    } else {
+      mutate(row);
+    }
+  }
+});
+var createDirectChangeCallback = (table) => ({
+  table: (mutate) => mutate(table),
+  row: (row, mutate) => mutate(row)
+});
 var defaultFeatures = {
   selection: {
     enabled: true,
@@ -609,109 +405,206 @@ var defaultFeatures = {
   schemaEditable: false
 };
 var TableModel = class extends Resource2 {
-  _view;
+  _registry;
+  _object;
   _projection;
-  _table;
-  _visibleRange = signal3({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  });
+  _db;
+  _change;
+  _visibleRange;
   _onInsertRow;
   _onDeleteRows;
-  _onDeleteColumn;
+  _onColumnDelete;
   _onCellUpdate;
   _onRowOrderChange;
   _onRowAction;
   _rowActions;
   _features;
-  _rows = signal3([]);
-  _draftRows = signal3([]);
+  _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;
-  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
+  // 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, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
+  }, rowActions = [], onCellUpdate, onColumnDelete, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
     super();
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel2(schema, view.projection);
+    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.", {
       F: __dxlog_file,
-      L: 141,
+      L: 197,
       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._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 viewSnapshot = Obj.getSnapshot(this.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 = getValue(a, field.path);
+        const bValue = 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._onDeleteColumn = onDeleteColumn;
+    this._onColumnDelete = onColumnDelete;
     this._onCellUpdate = onCellUpdate;
     this._onRowOrderChange = onRowOrderChange;
     this._onRowAction = onRowAction;
   }
   get id() {
-    return fullyQualifiedId(this._view);
+    return Obj.getDXN(this._object).toString();
   }
   get view() {
-    return this._view;
-  }
-  get table() {
-    invariant(this._table, "Model not initialized", {
+    const view = this._object.view.target;
+    invariant(view, "Table model not initialized", {
       F: __dxlog_file,
-      L: 179,
+      L: 308,
       S: this,
       A: [
-        "this._table",
-        "'Model not initialized'"
+        "view",
+        "'Table model not initialized'"
       ]
     });
-    return this._table;
+    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.sorting.sortedRows;
+    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;
   }
   /**
-  * @reactive
+  * Gets the current sort state.
+  * Priority: in-memory sort (local changes) > persisted sort (from query AST).
   */
-  get sorting() {
-    return this._sorting;
+  getSorting() {
+    return this._registry.get(this._sorting);
   }
   /**
   * Gets the row data at the specified display index.
   */
   getRowAt(displayIndex) {
-    if (displayIndex < 0 || displayIndex >= this.sorting.sortedRows.value.length) {
+    const sortedRows = this._registry.get(this._sortedRows);
+    if (displayIndex < 0 || displayIndex >= sortedRows.length) {
       return void 0;
     }
-    return this.sorting.sortedRows.value[displayIndex];
+    return sortedRows[displayIndex];
   }
   get pinnedRows() {
     return this._pinnedRows;
@@ -719,7 +612,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 218,
+      L: 381,
       S: this,
       A: [
         "this._columnMeta",
@@ -731,10 +624,6 @@ var TableModel = class extends Resource2 {
   get selection() {
     return this._selection;
   }
-  /** @reactive */
-  get isViewDirty() {
-    return this.sorting.isDirty;
-  }
   get rowActions() {
     return this._rowActions;
   }
@@ -742,24 +631,23 @@ var TableModel = class extends Resource2 {
   // Initialisation
   //
   async _open() {
-    const presentation = this._view.presentation.target ?? await this._view.presentation.load();
-    invariant(Obj3.instanceOf(TableView, presentation), void 0, {
-      F: __dxlog_file,
-      L: 241,
-      S: this,
-      A: [
-        "Obj.instanceOf(TableView, presentation)",
-        ""
-      ]
-    });
-    this._table = presentation;
+    await this._object.view.load();
     this.initializeColumnMeta();
     this.initializeEffects();
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
-    this._columnMeta = computed3(() => {
-      const fields = this._projection?.fields ?? [];
+    invariant(this._object.view.target, "View must be loaded before initializing column meta", {
+      F: __dxlog_file,
+      L: 405,
+      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,
         {
@@ -777,7 +665,7 @@ var TableModel = class extends Resource2 {
         },
         frozenColsEnd: {
           0: {
-            size: 40,
+            size: 32,
             resizeable: false
           }
         }
@@ -785,49 +673,62 @@ var TableModel = class extends Resource2 {
     });
   }
   initializeEffects() {
-    const rowOrderWatcher = effect2(() => {
-      touch(this.sorting.sortedRows.value);
+    const rowsUnsubscribe = this._registry.subscribe(this._rows, () => {
       this._onRowOrderChange?.();
     });
-    this._ctx.onDispose(rowOrderWatcher);
-    const rowEffectManager = effect2(() => {
-      const { start, end } = touch(this._visibleRange.value);
-      const rowEffects = [];
-      for (let row = start.row; row <= end.row; row++) {
-        rowEffects.push(effect2(() => {
-          const obj = this.sorting.sortedRows.value[row];
-          this._projection?.fields.forEach((field) => touch(getValue2(obj, field.path)));
-          this._onCellUpdate?.({
-            row,
-            col: start.col,
-            plane: "grid"
+    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();
       }
-      return () => rowEffects.forEach((cleanup) => cleanup());
     });
-    this._ctx.onDispose(rowEffectManager);
-    const draftRowsWatcher = effect2(() => {
-      touch(this._draftRows.value);
+    const draftRowsUnsubscribe = this._registry.subscribe(this._draftRows, () => {
       this._onRowOrderChange?.();
     });
-    this._ctx.onDispose(draftRowsWatcher);
+    this._ctx.onDispose(draftRowsUnsubscribe);
   }
   //
   // Data
   //
   setRows = (obj) => {
-    this._rows.value = obj;
+    this._registry.set(this._rows, obj);
   };
-  getRowCount = () => this._rows.value.length;
-  /**
-  * @reactive
-  */
-  getDraftRowCount = () => this._draftRows.value.length;
-  // TODO(ZaymonFC): Return .value instead of exposing the signal.
+  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
@@ -835,19 +736,20 @@ var TableModel = class extends Resource2 {
   * @returns true if the field has validation errors, false otherwise
   */
   hasDraftRowValidationError(draftRowIndex, fieldPath) {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
       return false;
     }
-    const draftRow = this._draftRows.value[draftRowIndex];
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
     const validationErrors = draftRow.validationErrors || [];
     return validationErrors.some((error) => error.path === fieldPath);
   }
-  getColumnCount = () => this._projection?.fields.length ?? 0;
+  getColumnCount = () => this._projection?.getFields().length ?? 0;
   insertRow = () => {
     const result = this._onInsertRow?.();
-    if (result === false && this._draftRows.value.length === 0) {
+    if (result === "draft" && this._registry.get(this._draftRows).length === 0) {
       this.createDraftRow();
     }
+    return result ?? "final";
   };
   createDraftRow() {
     if (!this._projection) {
@@ -862,16 +764,16 @@ var TableModel = class extends Resource2 {
       valid: validationErrors.length === 0,
       validationErrors
     };
-    this._draftRows.value = [
-      ...this._draftRows.value,
+    this._registry.set(this._draftRows, [
+      ...this._registry.get(this._draftRows),
       draftRow
-    ];
+    ]);
   }
   validateDraftRow(draftRowIndex) {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
       return;
     }
-    const draftRow = this._draftRows.value[draftRowIndex];
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
     const validationErrors = this.validateDraftRowData(draftRow.data);
     const updatedDraftRow = {
       ...draftRow,
@@ -879,80 +781,82 @@ var TableModel = class extends Resource2 {
       validationErrors
     };
     const newDraftRows = [
-      ...this._draftRows.value
+      ...this._registry.get(this._draftRows)
     ];
     newDraftRows[draftRowIndex] = updatedDraftRow;
-    this._draftRows.value = newDraftRows;
+    this._registry.set(this._draftRows, newDraftRows);
   }
   validateDraftRowData(data) {
-    const schema = toEffectSchema2(this._projection.baseSchema);
+    const schema = toEffectSchema(this._projection.baseSchema);
     return validateSchema(schema, data) || [];
   }
   commitDraftRow = (draftRowIndex) => {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
       return false;
     }
-    const draftRow = this._draftRows.value[draftRowIndex];
+    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
     if (!draftRow.valid) {
       return false;
     }
-    const success = this._onInsertRow?.(draftRow.data);
-    if (success) {
-      const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
-      this._draftRows.value = newDraftRows;
+    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 success ?? false;
+    return insertRowResult === "final";
   };
   deleteRow = (rowIndex) => {
-    const row = this._sorting.getDataIndex(rowIndex);
-    const obj = this._rows.value[row];
+    const sortedRows = this._registry.get(this._sortedRows);
+    const obj = sortedRows[rowIndex];
     const objectsToDelete = [];
-    if (this.features.selection.enabled && this._selection.hasSelection.value) {
+    if (this.features.selection.enabled && this._selection.hasSelection) {
       const selectedRows = this._selection.getSelectedRows();
       objectsToDelete.push(...selectedRows);
-    } else {
+    } else if (obj) {
       objectsToDelete.push(obj);
     }
-    this._onDeleteRows?.(row, objectsToDelete);
+    if (objectsToDelete.length > 0) {
+      this._onDeleteRows?.(rowIndex, objectsToDelete);
+    }
   };
   handleRowAction = (actionId, rowIndex) => {
     if (!this._onRowAction) {
       return;
     }
-    const row = this._sorting.getDataIndex(rowIndex);
-    const data = this._rows.value[row];
+    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?.fields ?? [];
+    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._draftRows.value.length) {
-        value = getValue2(this._draftRows.value[row].data, field.path);
+      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
+        value = getValue(this._registry.get(this._draftRows)[row].data, field.path);
       } else {
         return void 0;
       }
     } else {
-      const dataIndex = this._sorting.getDataIndex(row);
-      value = getValue2(this._rows.value[dataIndex], field.path);
+      const sortedRows = this._registry.get(this._sortedRows);
+      value = getValue(sortedRows[row], field.path);
     }
     if (value == null) {
       return "";
     }
     const { props } = this._projection.getFieldProjection(field.id);
     switch (props.format) {
-      case FormatEnum2.Ref: {
+      case Format2.TypeFormat.Ref: {
         if (!field.referencePath) {
           return "";
         }
-        return getValue2(value.target, field.referencePath);
+        return getValue(value.target, field.referencePath);
       }
       default: {
         return formatForEditing({
@@ -964,7 +868,7 @@ var TableModel = class extends Resource2 {
     }
   };
   validateCellData = async ({ col, row, plane }, value) => {
-    const fields = this._projection?.fields ?? [];
+    const fields = this._projection?.getFields() ?? [];
     if (col < 0 || col >= fields.length) {
       return {
         valid: false,
@@ -976,14 +880,14 @@ var TableModel = class extends Resource2 {
     const transformedValue = editorTextToCellValue(props, value);
     const isDraftRow = plane === "frozenRowsEnd";
     if (isDraftRow) {
-      const isInvalidDraftRowIndex = row < 0 || row >= this._draftRows.value.length;
+      const isInvalidDraftRowIndex = row < 0 || row >= this._registry.get(this._draftRows).length;
       if (isInvalidDraftRowIndex) {
         return {
           valid: false,
           error: "Invalid draft row index"
         };
       }
-      const draftRow = this._draftRows.value[row];
+      const draftRow = this._registry.get(this._draftRows)[row];
       const snapshot = {
         ...draftRow.data
       };
@@ -1002,23 +906,24 @@ var TableModel = class extends Resource2 {
         valid: true
       };
     } else {
-      const rowIdx = this._sorting.getDataIndex(row);
-      const currentRow = this._rows.value[rowIdx];
+      const currentRow = this._registry.get(this._rows)[row];
       invariant(currentRow, "Invalid row index", {
         F: __dxlog_file,
-        L: 513,
+        L: 693,
         S: this,
         A: [
           "currentRow",
           "'Invalid row index'"
         ]
       });
-      const snapshot = getSnapshot(currentRow);
+      const snapshot = {
+        ...getSnapshot(currentRow)
+      };
       setValue(snapshot, field.path, transformedValue);
-      const schema = getSchema(currentRow);
+      const schema = Obj.getSchema(currentRow);
       invariant(schema, void 0, {
         F: __dxlog_file,
-        L: 519,
+        L: 699,
         S: this,
         A: [
           "schema",
@@ -1030,7 +935,7 @@ var TableModel = class extends Resource2 {
         const error = validationResult[0];
         invariant(error.path === field.path, void 0, {
           F: __dxlog_file,
-          L: 524,
+          L: 704,
           S: this,
           A: [
             "error.path === field.path",
@@ -1049,24 +954,27 @@ var TableModel = class extends Resource2 {
   };
   setCellData = (cell, value) => {
     const { col, row, plane } = cell;
-    const fields = this._projection?.fields ?? [];
+    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 === FormatEnum2.Ref && !isLiveObject(value)) {
+    if (props.format === Format2.TypeFormat.Ref && !Obj.isObject(value)) {
       return;
     }
     if (plane === "frozenRowsEnd") {
-      if (row >= 0 && row < this._draftRows.value.length) {
-        setValue(this._draftRows.value[row].data, field.path, transformedValue);
+      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
+        setValue(this._registry.get(this._draftRows)[row].data, field.path, transformedValue);
         this.validateDraftRow(row);
       }
     } else {
-      const rowIdx = this._sorting.getDataIndex(row);
-      setValue(this._rows.value[rowIdx], field.path, transformedValue);
+      const sortedRows = this._registry.get(this._sortedRows);
+      const rowData = sortedRows[row];
+      this._change.row(rowData, (mutableRow) => {
+        setValue(mutableRow, field.path, transformedValue);
+      });
     }
   };
   /**
@@ -1075,12 +983,15 @@ var TableModel = class extends Resource2 {
   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
   */
   updateCellData({ col, row }, update) {
-    const dataRow = this._sorting.getDataIndex(row);
-    const fields = this._projection?.fields ?? [];
+    const fields = this._projection?.getFields() ?? [];
     const field = fields[col];
-    const value = getValue2(this._rows.value[dataRow], field.path);
+    const sortedRows = this._registry.get(this._sortedRows);
+    const rowData = sortedRows[row];
+    const value = getValue(rowData, field.path);
     const updatedValue = update(value);
-    setValue(this._rows.value[dataRow], field.path, updatedValue);
+    this._change.row(rowData, (mutableRow) => {
+      setValue(mutableRow, field.path, updatedValue);
+    });
   }
   /**
   * Gets the domain-appropriate cell type for a given cell position.
@@ -1114,21 +1025,23 @@ var TableModel = class extends Resource2 {
     if (!this._projection) {
       return;
     }
-    const field = this._projection?.fields.find((field2) => field2.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      this._onDeleteColumn(field.id);
+    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?.fields ?? [];
+    const fields = this._projection?.getFields() ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];
       if (field) {
-        this.table.sizes[field.path] = newWidth;
+        this._change.table((mutableTable) => {
+          mutableTable.sizes[field.path] = newWidth;
+        });
       }
     }
   }
@@ -1144,22 +1057,92 @@ var TableModel = class extends Resource2 {
     this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
   }
   //
-  // View operations
+  // 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() {
-    this._sorting.save();
+    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.change(view, (view2) => {
+          view2.query.ast = newQuery.ast;
+        });
+      }
+    } else {
+      Obj.change(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 FormatEnum2.Ref: {
-      if (isLiveObject(value)) {
+    case Format2.TypeFormat.Ref: {
+      if (Obj.isObject(value)) {
         return Ref.make(value);
       } else {
         return value;
       }
     }
-    case FormatEnum2.SingleSelect: {
+    case Format2.TypeFormat.SingleSelect: {
       const ids = extractTagIds(value);
       if (ids && ids.length > 0) {
         return ids[0];
@@ -1167,7 +1150,7 @@ var editorTextToCellValue = (props, value) => {
         return value;
       }
     }
-    case FormatEnum2.MultiSelect: {
+    case Format2.TypeFormat.MultiSelect: {
       const ids = extractTagIds(value);
       return ids || value;
     }
@@ -1181,125 +1164,40 @@ var editorTextToCellValue = (props, value) => {
   }
 };
 
-// src/model/modal-controller.ts
-import { signal as signal4 } from "@preact/signals-core";
-import { log } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
-var ModalController = class {
-  _state = signal4({
-    type: "closed"
-  });
-  _triggerRef = {
-    current: null
-  };
-  get state() {
-    return this._state;
-  }
-  get trigger() {
-    return this._triggerRef;
-  }
-  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"
-      }
-    };
-  };
-  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
-          }
-        };
-      });
-    }
-  };
-  openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
-    if (anchorCell) {
-      this._triggerRef.current = anchorCell;
-      this._state.value = {
-        type: "createRefPanel",
-        typename,
-        initialValues,
-        onCreate
-      };
-    } else {
-      log.warn("anchor cell not found while creating new ref", void 0, {
-        F: __dxlog_file2,
-        L: 86,
-        S: this,
-        C: (f, a) => f(...a)
-      });
-    }
-  };
-  close = () => {
-    this._state.value = {
-      type: "closed"
-    };
-  };
-};
-
 // src/model/table-presentation.ts
-import { signal as signal5 } from "@preact/signals-core";
-import { isNotNullable } from "effect/Predicate";
-import { Obj as Obj4 } from "@dxos/echo";
-import { FormatEnum as FormatEnum3, TypeEnum as TypeEnum2, getValue as getValue3 } from "@dxos/echo-schema";
-import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
+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, getValue as getValue2 } from "@dxos/echo/internal";
+import { cellClassesForFieldType, formatForDisplay } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
-import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
+import { mx } from "@dxos/ui-theme";
 var TablePresentation = class {
   model;
+  _registry;
   _visibleRange;
-  fieldProjectionCache;
-  constructor(model, _visibleRange = signal5({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  })) {
+  fieldProjectionCache = /* @__PURE__ */ new Map();
+  constructor(registry, model) {
     this.model = model;
-    this._visibleRange = _visibleRange;
-    this.fieldProjectionCache = /* @__PURE__ */ new Map();
+    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._visibleRange.value = range;
+        this._registry.set(this._visibleRange, range);
         cells = this.getMainGridCells(range);
         break;
       case "frozenRowsStart":
@@ -1321,7 +1219,7 @@ var TablePresentation = class {
         cells = this.getDraftRowCells(range);
         break;
       case "fixedEndStart":
-        cells = this.getDraftSelectCells(range);
+        cells = this.getDraftIconCells(range);
         break;
       case "fixedEndEnd":
         cells = this.getDraftActionCells(range);
@@ -1351,7 +1249,7 @@ var TablePresentation = class {
     const { props } = this.getFieldProjection(field.id);
     const cell = {
       get value() {
-        const value = getValue3(obj, field.path);
+        const value = getValue2(obj, field.path);
         if (value == null) {
           return "";
         }
@@ -1359,19 +1257,19 @@ var TablePresentation = class {
           return "";
         }
         switch (props.format) {
-          case FormatEnum3.Boolean:
-          case FormatEnum3.SingleSelect:
-          case FormatEnum3.MultiSelect: {
+          case Format3.TypeFormat.Boolean:
+          case Format3.TypeFormat.SingleSelect:
+          case Format3.TypeFormat.MultiSelect: {
             return "";
           }
-          case FormatEnum3.Ref: {
+          case Format3.TypeFormat.Ref: {
             if (!field.referencePath) {
               return "";
             }
-            return getValue3(value.target, field.referencePath);
+            return getValue2(value.target, field.referencePath);
           }
           default: {
-            return formatForDisplay2({
+            return formatForDisplay({
               type: props.type,
               format: props.format,
               value
@@ -1381,10 +1279,7 @@ var TablePresentation = class {
       }
     };
     const classes = [];
-    const formatClasses = cellClassesForFieldType({
-      type: props.type,
-      format: props.format
-    });
+    const formatClasses = cellClassesForFieldType(props);
     if (formatClasses) {
       classes.push(formatClasses);
     }
@@ -1392,11 +1287,9 @@ var TablePresentation = class {
     if (rowSelectionClasses) {
       classes.push(rowSelectionClasses);
     }
-    if (classes.length > 0) {
-      cell.className = mx(classes.flat());
-    }
-    if (props.type === TypeEnum2.Array) {
-      const targetArray = getValue3(obj, field.path);
+    cell.className = mx(classes);
+    if (props.type === TypeEnum.Array) {
+      const targetArray = getValue2(obj, field.path);
       if (targetArray && Array.isArray(targetArray)) {
         const getLabel = (value) => {
           if (!value) {
@@ -1416,21 +1309,21 @@ var TablePresentation = class {
           }
           return "Object";
         };
-        const tags = targetArray.map(getLabel).filter(isNotNullable).map((title) => {
+        const tags = targetArray.map(getLabel).filter(Predicate.isNotNullable).map((title) => {
           return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
         }).join("");
         cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
       }
     }
-    if (props.format === FormatEnum3.Ref && props.referenceSchema) {
-      const targetObj = getValue3(obj, field.path)?.target;
+    if (props.format === Format3.TypeFormat.Ref && props.referenceSchema) {
+      const targetObj = getValue2(obj, field.path)?.target;
       if (targetObj) {
-        const dxn = Obj4.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        const dxn = Obj2.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor dxn=${dxn} 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 === FormatEnum3.Boolean) {
-      const value = getValue3(obj, field.path);
+    if (props.format === Format3.TypeFormat.Boolean) {
+      const value = getValue2(obj, field.path);
       cell.accessoryHtml = tableControls.switch.render({
         colIndex,
         rowIndex: displayIndex,
@@ -1438,8 +1331,8 @@ var TablePresentation = class {
       });
       cell.readonly = "no-text-select";
     }
-    if (props.format === FormatEnum3.SingleSelect) {
-      const value = getValue3(obj, field.path);
+    if (props.format === Format3.TypeFormat.SingleSelect) {
+      const value = getValue2(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options) {
         const option = options.find((o) => o.id === value);
@@ -1448,8 +1341,8 @@ var TablePresentation = class {
         }
       }
     }
-    if (props.format === FormatEnum3.MultiSelect) {
-      const values = getValue3(obj, field.path);
+    if (props.format === Format3.TypeFormat.MultiSelect) {
+      const values = getValue2(obj, field.path);
       const options = this.model.projection.getFieldProjection(field.id).props.options;
       if (options && values && values.length > 0) {
         const tags = values.map((value) => {
@@ -1472,63 +1365,75 @@ var TablePresentation = class {
   }
   getMainGridCells(range) {
     const cells = {};
-    const fields = this.model.projection?.fields ?? [];
+    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.rows.value[row], field, col, row);
+        this.createDataCell(cells, this.model.getRows()[row], field, col, row);
       }
     }
     return cells;
   }
   getDraftRowCells(range) {
     const cells = {};
-    const fields = this.model.projection?.fields ?? [];
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
+    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++) {
-        const cellIndex = toPlaneCellIndex({
+        cells[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;
+          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;
+            }
           }
         }
-        cells[cellIndex].className += " !bg-toolbarSurface";
       }
     }
     return cells;
   }
   getHeaderCells(range) {
     const cells = {};
-    const fields = this.model.projection?.fields ?? [];
+    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 sorting = this.model.sorting?.sorting;
-      const direction = sorting?.fieldId === field.id ? sorting.direction : void 0;
+      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: props.title ?? field.path,
-        readonly: true,
+        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
@@ -1537,7 +1442,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-toolbarSurface"
+        className: "!bg-toolbar-surface text-description! [&>div]:flex [&>div]:items-stretch"
       };
     }
     return cells;
@@ -1588,7 +1493,7 @@ var TablePresentation = class {
           col: 0,
           row: 0
         })]: {
-          className: "!bg-toolbarSurface",
+          className: "!bg-toolbar-surface",
           readonly: true,
           value: ""
         }
@@ -1602,9 +1507,9 @@ var TablePresentation = class {
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
-          checked: this.model.selection.allRowsSeleted.value
+          checked: this.model.selection.allRowsSelected
         }),
-        className: "!bg-toolbarSurface",
+        className: "!bg-toolbar-surface",
         readonly: true,
         value: ""
       }
@@ -1617,9 +1522,9 @@ var TablePresentation = class {
         row: 0
       })]: {
         accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
-          disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
+          disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT
         }) : void 0,
-        className: "!bg-toolbarSurface",
+        className: "!bg-toolbar-surface",
         readonly: true,
         value: ""
       }
@@ -1627,36 +1532,47 @@ var TablePresentation = class {
   }
   getDraftActionCells(range) {
     const cells = {};
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
-      const disabled = !draftRow.valid;
+    const draftRows = this.model.getDraftRows();
+    if (draftRows.length === 0) {
       cells[toPlaneCellIndex({
         col: 0,
-        row
+        row: 0
       })] = {
         value: "",
-        readonly: true,
-        accessoryHtml: tableButtons.saveDraftRow.render({
-          rowIndex: row,
-          disabled
-        }),
-        className: "!bg-toolbarSurface"
+        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;
   }
-  getDraftSelectCells(range) {
+  getDraftIconCells(range) {
     const cells = {};
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+    const draftRows = this.model.getDraftRows();
+    for (let row = range.start.row; row <= range.end.row; row++) {
       cells[toPlaneCellIndex({
         col: 0,
         row
       })] = {
         value: "",
         readonly: true,
-        className: "!bg-toolbarSurface"
+        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;
@@ -1666,7 +1582,7 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
   if (!selected) {
     if (selectionMode === "single") {
       return [
-        "!cursor-pointer"
+        "cursor-pointer!"
       ];
     } else {
       return void 0;
@@ -1675,140 +1591,161 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
   switch (selectionMode) {
     case "single":
       return [
-        "!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer"
+        "dx-grid__cell--no-focus-unfurl !bg-current-surface hover:bg-hover-surface cursor-pointer!"
       ];
     case "multiple":
       return [
-        "!bg-gridCellSelected"
+        "!bg-grid-cell-selected"
       ];
   }
 };
 
-// src/hooks/useTableModel.ts
-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 { 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 initialSelection = useMemo(() => selected, [
-      view
-    ]);
-    const [model, setModel] = useState();
-    useEffect(() => {
-      if (!view || !schema) {
-        return;
-      }
-      let model2;
-      const t = setTimeout(async () => {
-        model2 = new TableModel({
-          view,
-          schema,
-          projection,
-          features,
-          rowActions,
-          initialSelection,
-          onRowAction,
-          ...props
-        });
-        await model2.open();
-        setModel(model2);
-      });
-      return () => {
-        clearTimeout(t);
-        void model2?.close();
-      };
-    }, [
-      view,
-      schema,
-      projection,
-      features,
-      rowActions,
-      initialSelection
-    ]);
-    useEffect(() => {
-      if (rows) {
-        const sortedRows = orderBy2(rows, [
-          (row) => String(row.id)
-        ], [
-          "asc"
-        ]);
-        model?.setRows(sortedRows);
-      }
-    }, [
-      model,
-      rows
-    ]);
-    const { multiSelect, clear } = useSelectionActions([
-      model?.id
-    ].filter(isNonNullable));
-    useEffect(() => {
-      if (!model) {
-        return;
-      }
-      const unsubscribe = effect3(() => {
-        const selectedItems = [
-          ...model.selection.selection.value
-        ];
-        multiSelect(selectedItems);
-        onSelectionChanged?.(selectedItems);
-      });
-      return () => {
-        clear();
-        unsubscribe();
-      };
-    }, [
-      model,
-      onSelectionChanged
-    ]);
-    return model;
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/hooks/useAddRow.ts
 import { useCallback } from "react";
-import { Obj as Obj5 } from "@dxos/echo";
-var useAddRow = ({ space, schema }) => {
+import { Obj as Obj3 } from "@dxos/echo";
+var useAddRow = ({ db, schema }) => {
   return useCallback((data) => {
-    if (space && schema) {
+    if (db && schema) {
       try {
-        space.db.add(Obj5.make(schema, data ?? {}));
-        return true;
+        db.add(Obj3.make(schema, data ?? {}));
+        return "final";
       } catch (error) {
-        return false;
+        return "draft";
       }
     }
-    return false;
+    return "final";
   }, [
-    space,
+    db,
     schema
   ]);
 };
 
+// src/hooks/useProjectionModel.ts
+import { useState } from "react";
+import { JsonSchema, Type } 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 = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
+      const change = createEchoChangeCallback2(view, Type.isMutable(schema) ? 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.getDXN(object).toString(), "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 {
-  getBaseSchema,
-  makeDynamicTable,
-  touch,
-  createTable,
+  extractOrder,
+  getSortValue,
+  compareValues,
   BUTTON_IDENTIFIERS,
   tableButtons,
   CONTROL_IDENTIFIERS,
   CheckboxStory,
   SwitchStory,
   tableControls,
-  narrowSchema,
+  createEchoChangeCallback,
+  createDirectChangeCallback,
   TableModel,
-  ModalController,
   TablePresentation,
   cellClassesForRowSelection,
-  useTableModel,
-  useAddRow
+  useAddRow,
+  useProjectionModel,
+  useTableModel
 };
-//# sourceMappingURL=chunk-ZAOSIG3L.mjs.map
+//# sourceMappingURL=chunk-F7Y374KL.mjs.map