@dxos/react-ui-table 0.8.4-main.67995b8 → 0.8.4-main.dedc0f3

package/dist/lib/browser/{chunk-5XLSHLOG.mjs → chunk-GPZSXPSA.mjs}

@@ -1,11 +1,11 @@
 import {
-  TableView
-} from "./chunk-L2LSB6KV.mjs";
+  schema_exports
+} from "./chunk-63UUF4IG.mjs";
 
 // src/util/dynamic-table.ts
 import { Obj } from "@dxos/echo";
 import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { createView, getSchemaFromPropertyDefinitions, ProjectionModel } from "@dxos/schema";
+import { ProjectionModel, createView, getSchemaFromPropertyDefinitions } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
@@ -28,7 +28,7 @@ var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   }
 };
 var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
-  const table = Obj.make(TableView, {
+  const table = Obj.make(schema_exports.Table, {
     sizes: {}
   });
   const view = createView({
@@ -67,7 +67,7 @@ var setProperties = (view, projection, table, properties) => {
       }
       if (property.sort) {
         const fieldId = field.id;
-        view.query.sort = [
+        view.sort = [
           {
             fieldId,
             direction: property.sort
@@ -81,40 +81,6 @@ var setProperties = (view, projection, table, properties) => {
 // 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,
-    view
-  };
-};
-
 // src/util/table-buttons.ts
 var BUTTON_IDENTIFIERS = {
   columnSettings: "data-table-column-settings-button",
@@ -124,10 +90,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" : ""}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 aspect-square pli-0.5 min-bs-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,
@@ -153,7 +118,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"
     });
@@ -213,7 +179,8 @@ var saveDraftRowButton = {
       icon: saveDraftRowButton.icon,
       disabled,
       data: {
-        "data-row-index": rowIndex.toString()
+        "data-row-index": rowIndex.toString(),
+        "data-variant": "primary"
       },
       testId: "table-save-draft-row-button"
     });
@@ -232,6 +199,7 @@ var tableButtons = {
 };
 
 // src/util/table-controls.ts
+import { accessoryHandlesPointerdownAttrs } from "@dxos/lit-grid";
 var CONTROL_IDENTIFIERS = {
   checkbox: "data-table-checkbox",
   switch: "data-table-switch"
@@ -244,7 +212,7 @@ var renderAttributes = (data) => {
   return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
 };
 var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}"/>`;
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}" data-dx-grid-action="accessory"/>`;
 };
 var CheckboxStory = ({ rowIndex, header = false, checked = false, disabled = false }) => {
   const attrs = {
@@ -260,7 +228,8 @@ var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) =>
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: "",
     "data-row-index": rowIndex.toString(),
-    "data-col-index": colIndex.toString()
+    "data-col-index": colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs
   };
   return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
 };
@@ -287,7 +256,7 @@ var tableControls = {
 
 // src/util/schema.ts
 import { Schema } from "effect";
-import { isTypeLiteral, TypeLiteral } from "effect/SchemaAST";
+import { TypeLiteral, isTypeLiteral } from "effect/SchemaAST";
 var narrowSchema = (schema, paths) => {
   const ast = schema?.ast;
   if (isTypeLiteral(ast)) {
@@ -303,21 +272,75 @@ var narrowSchema = (schema, paths) => {
 // src/model/table-model.ts
 import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
 import { Resource as Resource2 } from "@dxos/context";
-import { Obj as Obj3, Ref } from "@dxos/echo";
-import { FormatEnum as FormatEnum2, getValue as getValue2, setValue, getSnapshot, getSchema, toEffectSchema as toEffectSchema2 } from "@dxos/echo-schema";
+import { Obj as Obj2, Ref } from "@dxos/echo";
+import { FormatEnum as FormatEnum2, getSchema, getValue as getValue2, setValue, toEffectSchema } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
-import { isLiveObject } from "@dxos/live-object";
+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";
 
+// src/util/tag.ts
+var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var extractTagIds = (value) => {
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const ids = [];
+  let match;
+  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
+    if (match[2]) {
+      ids.push(match[2]);
+    }
+  }
+  return ids.length > 0 ? ids : void 0;
+};
+
 // src/model/selection-model.ts
 import { 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 {
+  async _open() {
+    const selectionWatcher = effect(() => {
+      touch(this._selection.value);
+      this._onSelectionChanged?.();
+    });
+    this._ctx.onDispose(selectionWatcher);
+  }
+  //
+  // Getters
+  //
+  get selection() {
+    return this._selection;
+  }
+  get hasSelection() {
+    return this._hasSelection;
+  }
+  get allRowsSeleted() {
+    return this._allSelected;
+  }
+  get selectionMode() {
+    return this._selectionMode;
+  }
   constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
-    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, this._validSelectedIds = computed(() => {
+    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();
@@ -366,58 +389,27 @@ var SelectionModel = class extends Resource {
     };
     this._selection = signal(new Set(this._initialSelection));
   }
-  async _open() {
-    const selectionWatcher = effect(() => {
-      touch(this._selection.value);
-      this._onSelectionChanged?.();
-    });
-    this._ctx.onDispose(selectionWatcher);
-  }
-  //
-  // Getters
-  //
-  get selection() {
-    return this._selection;
-  }
-  get hasSelection() {
-    return this._hasSelection;
-  }
-  get allRowsSeleted() {
-    return this._allSelected;
-  }
-  get selectionMode() {
-    return this._selectionMode;
-  }
 };
 
 // src/model/table-sorting.ts
 import { computed as computed2, signal as signal2 } from "@preact/signals-core";
 import orderBy from "lodash.orderby";
-import { getValue, FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { FormatEnum, TypeEnum, getValue } from "@dxos/echo-schema";
 import { formatForDisplay } from "@dxos/react-ui-form";
-var TableSorting = class {
-  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;
+function _define_property2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
     });
-    this.sortedRows = this.initialiseSortedRows();
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+var TableSorting = class {
   /**
   * @reactive
   * @returns Local sort if present, falls back to view sort.
@@ -430,7 +422,7 @@ var TableSorting = class {
     if (local?.type === "active") {
       return local.sort;
     }
-    return this._view.query.sort?.[0];
+    return this._view.sort?.[0];
   }
   /**
   * @reactive
@@ -474,11 +466,11 @@ var TableSorting = class {
   save() {
     if (this._localSort.value !== void 0) {
       if (this._localSort.value.type === "active") {
-        this._view.query.sort = [
+        this._view.sort = [
           this._localSort.value.sort
         ];
       } else {
-        this._view.query.sort = [];
+        this._view.sort = [];
       }
       this._localSort.value = void 0;
     }
@@ -553,25 +545,51 @@ var TableSorting = class {
       value
     });
   }
-};
-
-// src/util/tag.ts
-var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-var extractTagIds = (value) => {
-  if (typeof value !== "string") {
-    return void 0;
-  }
-  const ids = [];
-  let match;
-  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
-    if (match[2]) {
-      ids.push(match[2]);
-    }
+  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();
   }
-  return ids.length > 0 ? ids : void 0;
 };
 
 // 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: {
@@ -582,252 +600,6 @@ var defaultFeatures = {
   schemaEditable: false
 };
 var TableModel = class extends Resource2 {
-  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
-    top: [],
-    bottom: []
-  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
-    super();
-    this._visibleRange = signal3({
-      start: {
-        row: 0,
-        col: 0
-      },
-      end: {
-        row: 0,
-        col: 0
-      }
-    });
-    this._rows = signal3([]);
-    this._draftRows = signal3([]);
-    //
-    // Data
-    //
-    this.setRows = (obj) => {
-      this._rows.value = obj;
-    };
-    this.getRowCount = () => this._rows.value.length;
-    /**
-    * @reactive
-    */
-    this.getDraftRowCount = () => this._draftRows.value.length;
-    this.getColumnCount = () => this._projection?.fields.length ?? 0;
-    this.insertRow = () => {
-      const result = this._onInsertRow?.();
-      if (result === false && this._draftRows.value.length === 0) {
-        this.createDraftRow();
-      }
-    };
-    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 success = this._onInsertRow?.(draftRow.data);
-      if (success) {
-        const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
-        this._draftRows.value = newDraftRows;
-      }
-      return success ?? false;
-    };
-    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);
-    };
-    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);
-      }
-    };
-    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
-          });
-        }
-      }
-    };
-    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: 510,
-          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: 516,
-          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: 521,
-            S: this,
-            A: [
-              "error.path === field.path",
-              ""
-            ]
-          });
-          return {
-            valid: false,
-            error: error.message
-          };
-        }
-        return {
-          valid: true
-        };
-      }
-    };
-    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._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: 139,
-      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);
   }
@@ -837,7 +609,7 @@ var TableModel = class extends Resource2 {
   get table() {
     invariant(this._table, "Model not initialized", {
       F: __dxlog_file,
-      L: 177,
+      L: 186,
       S: this,
       A: [
         "this._table",
@@ -876,7 +648,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 216,
+      L: 225,
       S: this,
       A: [
         "this._columnMeta",
@@ -900,12 +672,12 @@ var TableModel = class extends Resource2 {
   //
   async _open() {
     const presentation = this._view.presentation.target ?? await this._view.presentation.load();
-    invariant(Obj3.instanceOf(TableView, presentation), void 0, {
+    invariant(Obj2.instanceOf(schema_exports.Table, presentation), void 0, {
       F: __dxlog_file,
-      L: 239,
+      L: 248,
       S: this,
       A: [
-        "Obj.instanceOf(TableView, presentation)",
+        "Obj.instanceOf(Table.Table, presentation)",
         ""
       ]
     });
@@ -934,7 +706,7 @@ var TableModel = class extends Resource2 {
         },
         frozenColsEnd: {
           0: {
-            size: 40,
+            size: 32,
             resizeable: false
           }
         }
@@ -1024,7 +796,7 @@ var TableModel = class extends Resource2 {
     this._draftRows.value = newDraftRows;
   }
   validateDraftRowData(data) {
-    const schema = toEffectSchema2(this._projection.baseSchema);
+    const schema = toEffectSchema(this._projection.baseSchema);
     return validateSchema(schema, data) || [];
   }
   /**
@@ -1089,23 +861,256 @@ var TableModel = class extends Resource2 {
         this.table.sizes[field.path] = newWidth;
       }
     }
-  }
-  //
-  // Pinning
-  //
-  // TODO(burdon): Change to setPinned(on/off).
-  pinRow(rowIndex, side) {
-    this._pinnedRows[side].push(rowIndex);
-  }
-  unpinRow(rowIndex) {
-    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
-    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
-  }
-  //
-  // View operations
-  //
-  saveView() {
-    this._sorting.save();
+  }
+  //
+  // Pinning
+  //
+  // TODO(burdon): Change to setPinned(on/off).
+  pinRow(rowIndex, side) {
+    this._pinnedRows[side].push(rowIndex);
+  }
+  unpinRow(rowIndex) {
+    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+  }
+  //
+  // View operations
+  //
+  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: 521,
+          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: 527,
+          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: 532,
+            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._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;
   }
 };
 var editorTextToCellValue = (props, value) => {
@@ -1142,46 +1147,65 @@ var editorTextToCellValue = (props, value) => {
 // src/model/modal-controller.ts
 import { signal as signal4 } from "@preact/signals-core";
 import { log } from "@dxos/log";
+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 __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
+  get state() {
+    return this._state;
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
   constructor() {
-    this._state = signal4({
+    _define_property4(this, "_state", signal4({
       type: "closed"
-    });
-    this._triggerRef = {
+    }));
+    _define_property4(this, "_triggerRef", {
       current: null
-    };
-    this.setTrigger = (trigger) => {
+    });
+    _define_property4(this, "setTrigger", (trigger) => {
       this._triggerRef.current = trigger;
-    };
-    this.showRowMenu = (rowIndex) => {
+    });
+    _define_property4(this, "showRowMenu", (rowIndex) => {
       this._state.value = {
         type: "row",
         rowIndex
       };
-    };
-    this.showColumnMenu = (fieldId) => {
+    });
+    _define_property4(this, "showColumnMenu", (fieldId) => {
       this._state.value = {
         type: "column",
         fieldId
       };
-    };
-    this.showColumnCreator = () => {
+    });
+    _define_property4(this, "showColumnCreator", () => {
       this._state.value = {
         type: "columnSettings",
         mode: {
           type: "create"
         }
       };
-    };
-    this.showReferencePanel = (targetId, schemaId) => {
+    });
+    _define_property4(this, "showReferencePanel", (targetId, schemaId) => {
       this._state.value = {
         type: "refPanel",
         targetId,
         typename: schemaId
       };
-    };
-    this.openColumnSettings = () => {
+    });
+    _define_property4(this, "openColumnSettings", () => {
       if (this._state.value.type === "column") {
         const fieldId = this._state.value.fieldId;
         requestAnimationFrame(() => {
@@ -1194,8 +1218,8 @@ var ModalController = class {
           };
         });
       }
-    };
-    this.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
+    });
+    _define_property4(this, "openCreateRef", (typename, anchorCell, initialValues, onCreate) => {
       if (anchorCell) {
         this._triggerRef.current = anchorCell;
         this._state.value = {
@@ -1212,45 +1236,38 @@ var ModalController = class {
           C: (f, a) => f(...a)
         });
       }
-    };
-    this.close = () => {
+    });
+    _define_property4(this, "close", () => {
       this._state.value = {
         type: "closed"
       };
-    };
-  }
-  get state() {
-    return this._state;
-  }
-  get trigger() {
-    return this._triggerRef;
+    });
   }
 };
 
 // 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, getValue as getValue3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+import { Obj as Obj3 } 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 { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
-var TablePresentation = class {
-  constructor(model, _visibleRange = signal5({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  })) {
-    this.model = model;
-    this._visibleRange = _visibleRange;
-    this.fieldProjectionCache = /* @__PURE__ */ new Map();
+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 {
   getCells(range, plane) {
     this.fieldProjectionCache.clear();
     let cells;
@@ -1277,6 +1294,9 @@ var TablePresentation = class {
       case "frozenRowsEnd":
         cells = this.getDraftRowCells(range);
         break;
+      case "fixedEndStart":
+        cells = this.getDraftIconCells(range);
+        break;
       case "fixedEndEnd":
         cells = this.getDraftActionCells(range);
         break;
@@ -1335,10 +1355,7 @@ var TablePresentation = class {
       }
     };
     const classes = [];
-    const formatClasses = cellClassesForFieldType({
-      type: props.type,
-      format: props.format
-    });
+    const formatClasses = cellClassesForFieldType(props);
     if (formatClasses) {
       classes.push(formatClasses);
     }
@@ -1346,9 +1363,7 @@ var TablePresentation = class {
     if (rowSelectionClasses) {
       classes.push(rowSelectionClasses);
     }
-    if (classes.length > 0) {
-      cell.className = mx(classes.flat());
-    }
+    cell.className = mx(classes);
     if (props.type === TypeEnum2.Array) {
       const targetArray = getValue3(obj, field.path);
       if (targetArray && Array.isArray(targetArray)) {
@@ -1379,8 +1394,8 @@ var TablePresentation = class {
     if (props.format === FormatEnum3.Ref && props.referenceSchema) {
       const targetObj = getValue3(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-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        const dxn = Obj3.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<dx-anchor 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-anchor>`;
       }
     }
     if (props.format === FormatEnum3.Boolean) {
@@ -1442,24 +1457,37 @@ var TablePresentation = class {
     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];
+    if (draftRows.length === 0) {
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
-        this.createDataCell(cells, draftRow.data, field, col, row);
-        if (this.model.hasDraftRowValidationError(row, field.path)) {
+        cells[toPlaneCellIndex({
+          col,
+          row: 0
+        })] = {
+          value: "",
+          readonly: true,
+          className: "dx-grid__row--cta__cell"
+        };
+      }
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
           const cellIndex = toPlaneCellIndex({
             col,
             row
           });
-          const cellValue = cells[cellIndex];
-          if (cellValue) {
-            const existingClasses = cellValue.className || "";
-            const draftClasses = "dx-grid__cell--flagged";
-            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+          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;
+            }
           }
         }
       }
@@ -1478,10 +1506,10 @@ var TablePresentation = class {
         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-is-0 truncate">${props.title ?? field.path}</span>
           ${direction !== void 0 ? tableButtons.sort.render({
           fieldId: field.id,
           direction
@@ -1490,7 +1518,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-toolbarSurface"
+        className: "!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch"
       };
     }
     return cells;
@@ -1581,23 +1609,67 @@ 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;
+    if (draftRows.length === 0) {
+      cells[toPlaneCellIndex({
+        col: 0,
+        row: 0
+      })] = {
+        value: "",
+        className: "dx-grid__row--cta__cell",
+        readonly: true
+      };
+    } else {
+      for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+        const draftRow = draftRows[row];
+        const disabled = !draftRow.valid;
+        cells[toPlaneCellIndex({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          accessoryHtml: tableButtons.saveDraftRow.render({
+            rowIndex: row,
+            disabled
+          })
+        };
+      }
+    }
+    return cells;
+  }
+  getDraftIconCells(range) {
+    const cells = {};
+    const draftRows = this.model.draftRows.value;
+    for (let row = range.start.row; row <= range.end.row; row++) {
       cells[toPlaneCellIndex({
         col: 0,
         row
       })] = {
         value: "",
         readonly: true,
-        accessoryHtml: tableButtons.saveDraftRow.render({
-          rowIndex: row,
-          disabled
-        })
+        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;
   }
+  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) {
@@ -1711,18 +1783,18 @@ var useTableModel = ({ view, schema, projection, rows, rowActions, features, onS
 
 // src/hooks/useAddRow.ts
 import { useCallback } from "react";
-import { Obj as Obj5 } from "@dxos/echo";
+import { Obj as Obj4 } from "@dxos/echo";
 var useAddRow = ({ space, schema }) => {
   return useCallback((data) => {
     if (space && schema) {
       try {
-        space.db.add(Obj5.make(schema, data ?? {}));
-        return true;
+        space.db.add(Obj4.make(schema, data ?? {}));
+        return "final";
       } catch (error) {
-        return false;
+        return "draft";
       }
     }
-    return false;
+    return "final";
   }, [
     space,
     schema
@@ -1733,7 +1805,6 @@ export {
   getBaseSchema,
   makeDynamicTable,
   touch,
-  createTable,
   BUTTON_IDENTIFIERS,
   tableButtons,
   CONTROL_IDENTIFIERS,
@@ -1748,4 +1819,4 @@ export {
   useTableModel,
   useAddRow
 };
-//# sourceMappingURL=chunk-5XLSHLOG.mjs.map
+//# sourceMappingURL=chunk-GPZSXPSA.mjs.map