@dxos/react-ui-table 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

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

@@ -1,11 +1,11 @@
 import {
-  TableView
-} from "./chunk-L2LSB6KV.mjs";
+  schema_exports
+} from "./chunk-2PFAPQL4.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";
+import { Filter, Obj, Query } from "@dxos/echo";
+import { getTypename, toJsonSchema } from "@dxos/echo/internal";
+import { ProjectionModel, View, getSchemaFromPropertyDefinitions } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
@@ -27,12 +27,12 @@ var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
     throw new Error("invalid properties");
   }
 };
-var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
-  const table = Obj.make(TableView, {
+var makeDynamicTable = ({ jsonSchema, properties }) => {
+  const table = Obj.make(schema_exports.Table, {
     sizes: {}
   });
-  const view = createView({
-    typename,
+  const view = View.make({
+    query: Query.select(Filter.everything()),
     jsonSchema,
     presentation: table,
     ...properties && {
@@ -40,6 +40,7 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
     }
   });
   const projection = new ProjectionModel(jsonSchema, view.projection);
+  projection.normalizeView();
   if (properties && projection.fields) {
     setProperties(view, projection, table, properties);
   }
@@ -67,7 +68,7 @@ var setProperties = (view, projection, table, properties) => {
       }
       if (property.sort) {
         const fieldId = field.id;
-        view.query.sort = [
+        view.sort = [
           {
             fieldId,
             direction: property.sort
@@ -81,41 +82,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,
-    schema,
-    view
-  };
-};
-
 // src/util/table-buttons.ts
 var BUTTON_IDENTIFIERS = {
   columnSettings: "data-table-column-settings-button",
@@ -125,10 +91,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 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,
@@ -154,7 +119,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"
     });
@@ -290,14 +256,14 @@ var tableControls = {
 };
 
 // src/util/schema.ts
-import { Schema } from "effect";
-import { TypeLiteral, isTypeLiteral } from "effect/SchemaAST";
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
 var narrowSchema = (schema, paths) => {
   const ast = schema?.ast;
-  if (isTypeLiteral(ast)) {
+  if (SchemaAST.isTypeLiteral(ast)) {
     const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
     if (propertySignatures.length > 0) {
-      const narrowType = new TypeLiteral(propertySignatures, []);
+      const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
       return Schema.make(narrowType);
     }
   }
@@ -307,12 +273,11 @@ 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, getSchema, getSnapshot, getValue as getValue2, setValue, 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/internal";
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
-import { isLiveObject } from "@dxos/live-object";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { getSnapshot, isLiveObject } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 import { ProjectionModel as ProjectionModel2, validateSchema } from "@dxos/schema";
 
@@ -341,57 +306,26 @@ var SelectionModel = class extends Resource {
   _initialSelection;
   _onSelectionChanged;
   _selection;
-  _validSelectedIds;
-  _hasSelection;
-  _allSelected;
+  _validSelectedIds = computed(() => {
+    const rows = this._rows.value;
+    if (!rows) {
+      return /* @__PURE__ */ new Set();
+    }
+    const validIds = new Set(rows.map((row) => row.id));
+    return new Set([
+      ...this._selection.value
+    ].filter((id) => validIds.has(id)));
+  });
+  _hasSelection = computed(() => this._validSelectedIds.value.size > 0);
+  _allSelected = computed(() => {
+    const rows = this._rows.value;
+    if (rows.length === 0) {
+      return false;
+    }
+    return rows.every((row) => this._selection.value.has(row.id));
+  });
   constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
-    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, this._validSelectedIds = computed(() => {
-      const rows = this._rows.value;
-      if (!rows) {
-        return /* @__PURE__ */ new Set();
-      }
-      const validIds = new Set(rows.map((row) => row.id));
-      return new Set([
-        ...this._selection.value
-      ].filter((id) => validIds.has(id)));
-    }), this._hasSelection = computed(() => this._validSelectedIds.value.size > 0), this._allSelected = computed(() => {
-      const rows = this._rows.value;
-      if (rows.length === 0) {
-        return false;
-      }
-      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;
-        }
-      }
-    };
+    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged;
     this._selection = signal(new Set(this._initialSelection));
   }
   async _open() {
@@ -416,38 +350,67 @@ var SelectionModel = class extends Resource {
   get selectionMode() {
     return this._selectionMode;
   }
-  getSelectedRows;
-  isRowIndexSelected;
-  isObjectSelected;
+  getSelectedRows = () => {
+    const selectedIds = this._validSelectedIds.value;
+    return this._rows.value.filter((row) => selectedIds.has(row.id));
+  };
+  isRowIndexSelected = (rowIndex) => {
+    const row = this._rows.value[rowIndex];
+    return this._selection.value.has(row.id);
+  };
+  isObjectSelected = (object) => {
+    return this._selection.value.has(object.id);
+  };
   //
   // Manipulation
   //
-  toggleSelectionForRowIndex;
-  setSelection;
+  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;
+  };
+  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;
+      }
+    }
+  };
 };
 
 // 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 { FormatEnum, TypeEnum, getValue } from "@dxos/echo/internal";
 import { formatForDisplay } from "@dxos/react-ui-form";
 var TableSorting = class {
   _view;
   _projection;
-  _displayToDataIndex;
+  _displayToDataIndex = /* @__PURE__ */ new Map();
   _rows;
-  _localSort;
+  _localSort = signal2(void 0);
   _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];
+      const viewSort = this._view.sort?.[0];
       if (local?.type === "cleared") {
         return viewSort !== void 0;
       }
@@ -473,7 +436,7 @@ var TableSorting = class {
     if (local?.type === "active") {
       return local.sort;
     }
-    return this._view.query.sort?.[0];
+    return this._view.sort?.[0];
   }
   /**
   * @reactive
@@ -517,11 +480,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;
     }
@@ -643,13 +606,14 @@ var TableModel = class extends Resource2 {
     super();
     this._view = view;
     this._projection = projection ?? new ProjectionModel2(schema, view.projection);
+    this._projection.normalizeView();
     this._features = {
       ...defaultFeatures,
       ...features
     };
     invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
       F: __dxlog_file,
-      L: 141,
+      L: 148,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -672,7 +636,7 @@ var TableModel = class extends Resource2 {
     this._onRowAction = onRowAction;
   }
   get id() {
-    return fullyQualifiedId(this._view);
+    return Obj2.getDXN(this._view).toString();
   }
   get view() {
     return this._view;
@@ -680,7 +644,7 @@ var TableModel = class extends Resource2 {
   get table() {
     invariant(this._table, "Model not initialized", {
       F: __dxlog_file,
-      L: 179,
+      L: 186,
       S: this,
       A: [
         "this._table",
@@ -719,7 +683,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 218,
+      L: 225,
       S: this,
       A: [
         "this._columnMeta",
@@ -743,12 +707,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: 241,
+      L: 248,
       S: this,
       A: [
-        "Obj.instanceOf(TableView, presentation)",
+        "Obj.instanceOf(Table.Table, presentation)",
         ""
       ]
     });
@@ -777,7 +741,7 @@ var TableModel = class extends Resource2 {
         },
         frozenColsEnd: {
           0: {
-            size: 40,
+            size: 32,
             resizeable: false
           }
         }
@@ -845,9 +809,10 @@ var TableModel = class extends Resource2 {
   getColumnCount = () => this._projection?.fields.length ?? 0;
   insertRow = () => {
     const result = this._onInsertRow?.();
-    if (result === false && this._draftRows.value.length === 0) {
+    if (result === "draft" && this._draftRows.value.length === 0) {
       this.createDraftRow();
     }
+    return result ?? "final";
   };
   createDraftRow() {
     if (!this._projection) {
@@ -885,7 +850,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) || [];
   }
   commitDraftRow = (draftRowIndex) => {
@@ -896,12 +861,12 @@ var TableModel = class extends Resource2 {
     if (!draftRow.valid) {
       return false;
     }
-    const success = this._onInsertRow?.(draftRow.data);
-    if (success) {
+    const insertRowResult = this._onInsertRow?.(draftRow.data);
+    if (insertRowResult === "final") {
       const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
       this._draftRows.value = newDraftRows;
     }
-    return success ?? false;
+    return insertRowResult === "final";
   };
   deleteRow = (rowIndex) => {
     const row = this._sorting.getDataIndex(rowIndex);
@@ -1006,7 +971,7 @@ var TableModel = class extends Resource2 {
       const currentRow = this._rows.value[rowIdx];
       invariant(currentRow, "Invalid row index", {
         F: __dxlog_file,
-        L: 513,
+        L: 525,
         S: this,
         A: [
           "currentRow",
@@ -1018,7 +983,7 @@ var TableModel = class extends Resource2 {
       const schema = getSchema(currentRow);
       invariant(schema, void 0, {
         F: __dxlog_file,
-        L: 519,
+        L: 531,
         S: this,
         A: [
           "schema",
@@ -1030,7 +995,7 @@ var TableModel = class extends Resource2 {
         const error = validationResult[0];
         invariant(error.path === field.path, void 0, {
           F: __dxlog_file,
-          L: 524,
+          L: 536,
           S: this,
           A: [
             "error.path === field.path",
@@ -1183,8 +1148,6 @@ 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"
@@ -1242,24 +1205,6 @@ var ModalController = class {
       });
     }
   };
-  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"
@@ -1269,9 +1214,9 @@ var ModalController = class {
 
 // 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 * as Predicate from "effect/Predicate";
+import { Obj as Obj3 } from "@dxos/echo";
+import { FormatEnum as FormatEnum3, TypeEnum as TypeEnum2, getValue as getValue3 } from "@dxos/echo/internal";
 import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
@@ -1279,7 +1224,7 @@ import { VIEW_FIELD_LIMIT } from "@dxos/schema";
 var TablePresentation = class {
   model;
   _visibleRange;
-  fieldProjectionCache;
+  fieldProjectionCache = /* @__PURE__ */ new Map();
   constructor(model, _visibleRange = signal5({
     start: {
       row: 0,
@@ -1292,7 +1237,6 @@ var TablePresentation = class {
   })) {
     this.model = model;
     this._visibleRange = _visibleRange;
-    this.fieldProjectionCache = /* @__PURE__ */ new Map();
   }
   getCells(range, plane) {
     this.fieldProjectionCache.clear();
@@ -1321,7 +1265,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);
@@ -1381,10 +1325,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,9 +1333,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)) {
@@ -1416,7 +1355,7 @@ 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>`;
@@ -1425,8 +1364,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-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+        const dxn = Obj3.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<div role="none" class="absolute inline-end-0 inset-block-0 p-[--dx-grid-cell-content-padding-block]"><dx-anchor refId=${dxn} class="dx-button is-6 aspect-square min-bs-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
       }
     }
     if (props.format === FormatEnum3.Boolean) {
@@ -1488,27 +1427,39 @@ 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 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;
@@ -1525,10 +1476,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
@@ -1537,7 +1488,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-toolbarSurface"
+        className: "!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch"
       };
     }
     return cells;
@@ -1628,35 +1579,46 @@ 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
+        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++) {
+    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;
@@ -1689,13 +1651,13 @@ import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { effect as effect3 } from "@preact/signals-core";
 import orderBy2 from "lodash.orderby";
 import { useEffect, useMemo, useState } from "react";
-import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
+import { Obj as Obj4 } from "@dxos/echo";
 import { useSelected, useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
 var useTableModel = ({ view, schema, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   var _effect = _useSignals();
   try {
-    const selected = useSelected(view && fullyQualifiedId2(view), "multi");
+    const selected = useSelected(view && Obj4.getDXN(view).toString(), "multi");
     const initialSelection = useMemo(() => selected, [
       view
     ]);
@@ -1780,12 +1742,12 @@ var useAddRow = ({ space, schema }) => {
     if (space && schema) {
       try {
         space.db.add(Obj5.make(schema, data ?? {}));
-        return true;
+        return "final";
       } catch (error) {
-        return false;
+        return "draft";
       }
     }
-    return false;
+    return "final";
   }, [
     space,
     schema
@@ -1796,7 +1758,6 @@ export {
   getBaseSchema,
   makeDynamicTable,
   touch,
-  createTable,
   BUTTON_IDENTIFIERS,
   tableButtons,
   CONTROL_IDENTIFIERS,
@@ -1811,4 +1772,4 @@ export {
   useTableModel,
   useAddRow
 };
-//# sourceMappingURL=chunk-ZAOSIG3L.mjs.map
+//# sourceMappingURL=chunk-GS2UNGJK.mjs.map