@dxos/react-ui-table 0.8.3 → 0.8.4-main.f9ba587

package/dist/lib/node-esm/index.mjs

@@ -2,11 +2,11 @@ import { createRequire } from 'node:module';const require = createRequire(import
 import {
   TableSchema,
   TableType
-} from "./chunk-GBT6GD4G.mjs";
+} from "./chunk-ZNOU6LHG.mjs";
 
-// packages/ui/react-ui-table/src/translations.ts
-var translationKey = "table";
-var translations_default = [
+// src/translations.ts
+var translationKey = "react-ui-table";
+var translations = [
   {
     "en-US": {
       [translationKey]: {
@@ -36,9 +36,9 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
+// src/components/Table/Table.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState3, useMemo as useMemo5, useEffect as useEffect3 } from "react";
+import React8, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState3, useMemo as useMemo5, useEffect as useEffect4 } from "react";
 import { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { Filter } from "@dxos/react-client/echo";
@@ -48,7 +48,7 @@ import { closestCell, Grid, gridSeparatorInlineEnd, gridSeparatorBlockEnd } from
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { isNotFalsy, safeParseInt } from "@dxos/util";
 
-// packages/ui/react-ui-table/src/components/Table/ColumnActionsMenu.tsx
+// src/components/Table/ColumnActionsMenu.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
@@ -89,7 +89,7 @@ var ColumnActionsMenu = ({ model, modals }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
+// src/components/Table/ColumnSettings.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { useCallback, useEffect, useMemo, useState } from "react";
 import { Popover } from "@dxos/react-ui";
@@ -163,7 +163,7 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
+// src/components/Table/CreateRefPanel.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { Schema } from "effect";
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
@@ -243,7 +243,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
+// src/components/Table/RowActionsMenu.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4 from "react";
 import { DropdownMenu as DropdownMenu2, useTranslation as useTranslation2 } from "@dxos/react-ui";
@@ -278,20 +278,22 @@ var RowActionsMenu = ({ model, modals }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/model/table-model.ts
+// 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 { FormatEnum as FormatEnum3, getValue as getValue2, setValue, getSnapshot, getSchema } from "@dxos/echo-schema";
+import { Ref as Ref3 } from "@dxos/echo";
+import { FormatEnum as FormatEnum3, getValue as getValue2, setValue, getSnapshot, getSchema, toEffectSchema } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { isLiveObject, makeRef } from "@dxos/live-object";
+import { ObjectId } from "@dxos/keys";
+import { isLiveObject } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 import { validateSchema } from "@dxos/schema";
 
-// packages/ui/react-ui-table/src/model/selection-model.ts
+// src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 
-// packages/ui/react-ui-table/src/util/dynamic-table.ts
+// src/util/dynamic-table.ts
 import { Obj, Ref } from "@dxos/echo";
 import { getTypename, toJsonSchema } from "@dxos/echo-schema";
 import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
@@ -368,10 +370,10 @@ var setProperties = (view, projection, properties) => {
   }
 };
 
-// packages/ui/react-ui-table/src/util/signals.ts
+// src/util/signals.ts
 var touch = (value) => value;
 
-// packages/ui/react-ui-table/src/util/table.ts
+// src/util/table.ts
 import { Schema as Schema2 } from "effect";
 import { Format, FormatEnum, Ref as Ref2, TypedObject, TypeEnum } from "@dxos/echo-schema";
 import { PublicKey } from "@dxos/react-client";
@@ -464,12 +466,13 @@ var createProjection = (schema, view) => {
   return projection;
 };
 
-// packages/ui/react-ui-table/src/util/table-buttons.ts
+// src/util/table-buttons.ts
 var BUTTON_IDENTIFIERS = {
   columnSettings: "data-table-column-settings-button",
   newColumn: "data-table-new-column-button",
   referencedCell: "data-table-ref-cell-button",
   rowMenu: "data-table-row-menu-button",
+  saveDraftRow: "data-table-save-draft-row-button",
   sort: "data-table-sort-button"
 };
 var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
@@ -552,14 +555,34 @@ var sortButton = {
     direction: el.getAttribute("data-direction")
   })
 };
+var saveDraftRowButton = {
+  attr: BUTTON_IDENTIFIERS.saveDraftRow,
+  icon: "ph--floppy-disk--regular",
+  render: ({ rowIndex, disabled }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.saveDraftRow,
+      icon: saveDraftRowButton.icon,
+      disabled,
+      data: {
+        "data-row-index": rowIndex.toString()
+      },
+      testId: "table-save-draft-row-button"
+    });
+  },
+  getData: (el) => ({
+    type: "saveDraftRow",
+    rowIndex: Number(el.getAttribute("data-row-index"))
+  })
+};
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   rowMenu: rowMenuButton,
+  saveDraftRow: saveDraftRowButton,
   sort: sortButton
 };
 
-// packages/ui/react-ui-table/src/util/table-controls.ts
+// src/util/table-controls.ts
 var CONTROL_IDENTIFIERS = {
   checkbox: "data-table-checkbox",
   switch: "data-table-switch"
@@ -613,7 +636,7 @@ var tableControls = {
   }
 };
 
-// packages/ui/react-ui-table/src/util/schema.ts
+// src/util/schema.ts
 import { Schema as Schema3 } from "effect";
 import { isTypeLiteral, TypeLiteral } from "effect/SchemaAST";
 var narrowSchema = (schema, paths) => {
@@ -628,7 +651,7 @@ var narrowSchema = (schema, paths) => {
   return void 0;
 };
 
-// packages/ui/react-ui-table/src/model/selection-model.ts
+// src/model/selection-model.ts
 var SelectionModel = class extends Resource {
   constructor(_rows, _selectionMode, _onSelectionChanged) {
     super(), this._rows = _rows, this._selectionMode = _selectionMode, this._onSelectionChanged = _onSelectionChanged, this._selection = signal(/* @__PURE__ */ new Set()), this._validSelectedIds = computed(() => {
@@ -703,7 +726,7 @@ var SelectionModel = class extends Resource {
   }
 };
 
-// packages/ui/react-ui-table/src/model/table-sorting.ts
+// src/model/table-sorting.ts
 import { computed as computed2, signal as signal2 } from "@preact/signals-core";
 import orderBy from "lodash.orderby";
 import { getValue, FormatEnum as FormatEnum2, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
@@ -868,7 +891,7 @@ var TableSorting = class {
   }
 };
 
-// packages/ui/react-ui-table/src/util/tag.ts
+// src/util/tag.ts
 var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
 var extractTagIds = (value) => {
   if (typeof value !== "string") {
@@ -884,8 +907,8 @@ var extractTagIds = (value) => {
   return ids.length > 0 ? ids : void 0;
 };
 
-// packages/ui/react-ui-table/src/model/table-model.ts
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+// src/model/table-model.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
   selection: {
     enabled: true,
@@ -911,6 +934,7 @@ var TableModel = class extends Resource2 {
       }
     });
     this._rows = signal3([]);
+    this._draftRows = signal3([]);
     //
     // Data
     //
@@ -918,10 +942,31 @@ var TableModel = class extends Resource2 {
       this._rows.value = obj;
     };
     this.getRowCount = () => this._rows.value.length;
+    /**
+    * @reactive
+    */
+    this.getDraftRowCount = () => this._draftRows.value.length;
     this.getColumnCount = () => this._view?.fields.length ?? 0;
-    this.insertRow = (rowIndex) => {
-      const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
-      this._onInsertRow?.(row);
+    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);
@@ -945,14 +990,24 @@ var TableModel = class extends Resource2 {
         this._onRowAction(actionId, data);
       }
     };
-    this.getCellData = ({ col, row }) => {
+    this.getCellData = (cell) => {
+      const { col, row, plane } = cell;
       const fields = this._view?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._sorting.getDataIndex(row);
-      const value = getValue2(this._rows.value[dataIndex], field.path);
+      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 "";
       }
@@ -973,8 +1028,7 @@ var TableModel = class extends Resource2 {
         }
       }
     };
-    this.validateCellData = async ({ col, row }, value) => {
-      const rowIdx = this._sorting.getDataIndex(row);
+    this.validateCellData = async ({ col, row, plane }, value) => {
       const fields = this._view?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return {
@@ -984,52 +1038,82 @@ var TableModel = class extends Resource2 {
       }
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
-      const currentRow = this._rows.value[rowIdx];
-      invariant(currentRow, "Invalid row index", {
-        F: __dxlog_file,
-        L: 355,
-        S: this,
-        A: [
-          "currentRow",
-          "'Invalid row index'"
-        ]
-      });
-      const snapshot = getSnapshot(currentRow);
       const transformedValue = editorTextToCellValue(props, value);
-      setValue(snapshot, field.path, transformedValue);
-      const schema = getSchema(currentRow);
-      invariant(schema, void 0, {
-        F: __dxlog_file,
-        L: 365,
-        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, {
+      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: 370,
+          L: 507,
           S: this,
           A: [
-            "error.path === field.path",
+            "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: 513,
+          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: 518,
+            S: this,
+            A: [
+              "error.path === field.path",
+              ""
+            ]
+          });
+          return {
+            valid: false,
+            error: error.message
+          };
+        }
         return {
-          valid: false,
-          error: error.message
+          valid: true
         };
       }
-      return {
-        valid: true
-      };
     };
-    this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._sorting.getDataIndex(row);
+    this.setCellData = (cell, value) => {
+      const { col, row, plane } = cell;
       const fields = this._view?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return;
@@ -1040,7 +1124,15 @@ var TableModel = class extends Resource2 {
       if (props.format === FormatEnum3.Ref && !isLiveObject(value)) {
         return;
       }
-      setValue(this._rows.value[rowIdx], field.path, transformedValue);
+      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._id = id;
     this._space = space;
@@ -1052,7 +1144,7 @@ var TableModel = class extends Resource2 {
     };
     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: 126,
+      L: 145,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1112,7 +1204,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 195,
+      L: 214,
       S: this,
       A: [
         "this._columnMeta",
@@ -1190,6 +1282,68 @@ var TableModel = class extends Resource2 {
       return () => rowEffects.forEach((cleanup) => cleanup());
     });
     this._ctx.onDispose(rowEffectManager);
+    const draftRowsWatcher = effect2(() => {
+      touch(this._draftRows.value);
+      this._onRowOrderChange?.();
+    });
+    this._ctx.onDispose(draftRowsWatcher);
+  }
+  // TODO(ZaymonFC): Return .value instead of exposing the signal.
+  get draftRows() {
+    return this._draftRows;
+  }
+  /**
+  * Checks if a specific field path has validation errors for a given draft row.
+  * @param draftRowIndex - The index of the draft row to check
+  * @param fieldPath - The path of the field to check for validation errors
+  * @returns true if the field has validation errors, false otherwise
+  */
+  hasDraftRowValidationError(draftRowIndex, fieldPath) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return false;
+    }
+    const draftRow = this._draftRows.value[draftRowIndex];
+    const validationErrors = draftRow.validationErrors || [];
+    return validationErrors.some((error) => error.path === fieldPath);
+  }
+  createDraftRow() {
+    if (!this._view) {
+      return;
+    }
+    const draftData = {
+      id: ObjectId.random()
+    };
+    const validationErrors = this.validateDraftRowData(draftData);
+    const draftRow = {
+      data: draftData,
+      valid: validationErrors.length === 0,
+      validationErrors
+    };
+    this._draftRows.value = [
+      ...this._draftRows.value,
+      draftRow
+    ];
+  }
+  validateDraftRow(draftRowIndex) {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return;
+    }
+    const draftRow = this._draftRows.value[draftRowIndex];
+    const validationErrors = this.validateDraftRowData(draftRow.data);
+    const updatedDraftRow = {
+      ...draftRow,
+      valid: validationErrors.length === 0,
+      validationErrors
+    };
+    const newDraftRows = [
+      ...this._draftRows.value
+    ];
+    newDraftRows[draftRowIndex] = updatedDraftRow;
+    this._draftRows.value = newDraftRows;
+  }
+  validateDraftRowData(data) {
+    const schema = toEffectSchema(this._projection.schema);
+    return validateSchema(schema, data) || [];
   }
   /**
   * Updates a cell's value using a transform function.
@@ -1204,6 +1358,31 @@ var TableModel = class extends Resource2 {
     const updatedValue = update(value);
     setValue(this._rows.value[dataRow], field.path, updatedValue);
   }
+  /**
+  * Gets the domain-appropriate cell type for a given cell position.
+  * This abstracts away the low-level grid plane concepts and provides domain-specific types.
+  * @param cell - The cell position to classify
+  * @returns The domain-appropriate cell type
+  */
+  getCellType(cell) {
+    switch (cell.plane) {
+      case "frozenRowsEnd":
+        return "draft";
+      case "frozenRowsStart":
+        return "header";
+      case "grid":
+      default:
+        return "standard";
+    }
+  }
+  /**
+  * Convenience method to check if a cell is a draft cell.
+  * @param cell - The cell position to check
+  * @returns true if the cell is a draft cell, false otherwise
+  */
+  isDraftCell(cell) {
+    return this.getCellType(cell) === "draft";
+  }
   //
   // Column Operations
   //
@@ -1251,7 +1430,7 @@ var editorTextToCellValue = (props, value) => {
   switch (props.format) {
     case FormatEnum3.Ref: {
       if (isLiveObject(value)) {
-        return makeRef(value);
+        return Ref3.make(value);
       } else {
         return value;
       }
@@ -1278,10 +1457,10 @@ var editorTextToCellValue = (props, value) => {
   }
 };
 
-// packages/ui/react-ui-table/src/model/modal-controller.ts
+// src/model/modal-controller.ts
 import { signal as signal4 } from "@preact/signals-core";
 import { log } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
     this._state = signal4({
@@ -1366,10 +1545,11 @@ var ModalController = class {
   }
 };
 
-// packages/ui/react-ui-table/src/model/table-presentation.ts
+// src/model/table-presentation.ts
 import { signal as signal5 } from "@preact/signals-core";
 import { isNotNullable } from "effect/Predicate";
-import { FormatEnum as FormatEnum4, getObjectDXN, getValue as getValue3, TypeEnum as TypeEnum3 } from "@dxos/echo-schema";
+import { Obj as Obj2 } from "@dxos/echo";
+import { FormatEnum as FormatEnum4, getValue as getValue3, TypeEnum as TypeEnum3 } 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";
@@ -1387,8 +1567,10 @@ var TablePresentation = class {
   })) {
     this.model = model;
     this._visibleRange = _visibleRange;
+    this.fieldProjectionCache = /* @__PURE__ */ new Map();
   }
   getCells(range, plane) {
+    this.fieldProjectionCache.clear();
     let cells;
     switch (plane) {
       case "grid":
@@ -1410,6 +1592,12 @@ var TablePresentation = class {
       case "fixedStartEnd":
         cells = this.getNewColumnCell();
         break;
+      case "frozenRowsEnd":
+        cells = this.getDraftRowCells(range);
+        break;
+      case "fixedEndEnd":
+        cells = this.getDraftActionCells(range);
+        break;
       default:
         cells = {};
     }
@@ -1420,139 +1608,178 @@ var TablePresentation = class {
     }
     return cells;
   }
-  getMainGridCells(range) {
-    const cells = {};
-    const fields = this.model.view?.fields ?? [];
-    const addCell = (obj, field, colIndex, displayIndex) => {
-      const { props } = this.model.projection.getFieldProjection(field.id);
-      const cell = {
-        get value() {
-          const value = getValue3(obj, field.path);
-          if (value == null) {
-            return "";
-          }
-          if (props.type === "array") {
+  /**
+  * Gets a field projection, using cache if available within the current render pass.
+  */
+  getFieldProjection(fieldId) {
+    let projection = this.fieldProjectionCache.get(fieldId);
+    if (!projection) {
+      projection = this.model.projection.getFieldProjection(fieldId);
+      this.fieldProjectionCache.set(fieldId, projection);
+    }
+    return projection;
+  }
+  createDataCell(cells, obj, field, colIndex, displayIndex) {
+    const { props } = this.getFieldProjection(field.id);
+    const cell = {
+      get value() {
+        const value = getValue3(obj, field.path);
+        if (value == null) {
+          return "";
+        }
+        if (props.type === "array") {
+          return "";
+        }
+        switch (props.format) {
+          case FormatEnum4.Boolean:
+          case FormatEnum4.SingleSelect:
+          case FormatEnum4.MultiSelect: {
             return "";
           }
-          switch (props.format) {
-            case FormatEnum4.Boolean:
-            case FormatEnum4.SingleSelect:
-            case FormatEnum4.MultiSelect: {
+          case FormatEnum4.Ref: {
+            if (!field.referencePath) {
               return "";
             }
-            case FormatEnum4.Ref: {
-              if (!field.referencePath) {
-                return "";
-              }
-              return getValue3(value.target, field.referencePath);
-            }
-            default: {
-              return formatForDisplay2({
-                type: props.type,
-                format: props.format,
-                value
-              });
-            }
+            return getValue3(value.target, field.referencePath);
+          }
+          default: {
+            return formatForDisplay2({
+              type: props.type,
+              format: props.format,
+              value
+            });
           }
         }
-      };
-      const classes = [];
-      const formatClasses = cellClassesForFieldType({
-        type: props.type,
-        format: props.format
-      });
-      if (formatClasses) {
-        classes.push(formatClasses);
       }
-      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
+    };
+    const classes = [];
+    const formatClasses = cellClassesForFieldType({
+      type: props.type,
+      format: props.format
+    });
+    if (formatClasses) {
+      classes.push(formatClasses);
+    }
+    const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
+    if (rowSelectionClasses) {
+      classes.push(rowSelectionClasses);
+    }
+    if (classes.length > 0) {
+      cell.className = mx(classes.flat());
+    }
+    if (props.type === TypeEnum3.Array) {
+      const targetArray = getValue3(obj, field.path);
+      if (targetArray && Array.isArray(targetArray)) {
+        const getLabel = (value) => {
+          if (!value) {
+            return void 0;
+          }
+          if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+            return String(value);
+          }
+          if (Array.isArray(value)) {
+            return "Array";
+          }
+          if (typeof value === "object" && value.name) {
+            return value.name;
+          }
+          if (typeof value === "object" && value.value) {
+            return `${value.value}`;
+          }
+          return "Object";
+        };
+        const tags = targetArray.map(getLabel).filter(isNotNullable).map((title) => {
+          return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
+        }).join("");
+        cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
       }
-      if (props.type === TypeEnum3.Array) {
-        const targetArray = getValue3(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          const getLabel = (value) => {
-            if (!value) {
-              return void 0;
-            }
-            if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return "Array";
-            }
-            if (typeof value === "object" && value.name) {
-              return value.name;
-            }
-            if (typeof value === "object" && value.value) {
-              return `${value.value}`;
-            }
-            return "Object";
-          };
-          const tags = targetArray.map(getLabel).filter(isNotNullable).map((title) => {
-            return `<span class="dx-tag rounded-xl" 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 === FormatEnum4.Ref && props.referenceSchema) {
+      const targetObj = getValue3(obj, field.path)?.target;
+      if (targetObj) {
+        const dxn = Obj2.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>`;
       }
-      if (props.format === FormatEnum4.Ref && props.referenceSchema) {
-        const targetObj = getValue3(obj, field.path)?.target;
-        if (targetObj) {
-          const dxn = getObjectDXN(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>`;
+    }
+    if (props.format === FormatEnum4.Boolean) {
+      const value = getValue3(obj, field.path);
+      cell.accessoryHtml = tableControls.switch.render({
+        colIndex,
+        rowIndex: displayIndex,
+        checked: value ?? false
+      });
+      cell.readonly = "no-text-select";
+    }
+    if (props.format === FormatEnum4.SingleSelect) {
+      const value = getValue3(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options) {
+        const option = options.find((o) => o.id === value);
+        if (option) {
+          cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
         }
       }
-      if (props.format === FormatEnum4.Boolean) {
-        const value = getValue3(obj, field.path);
-        cell.accessoryHtml = tableControls.switch.render({
-          colIndex,
-          rowIndex: displayIndex,
-          checked: value ?? false
-        });
-        cell.readonly = "no-text-select";
-      }
-      if (props.format === FormatEnum4.SingleSelect) {
-        const value = getValue3(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options) {
+    }
+    if (props.format === FormatEnum4.MultiSelect) {
+      const values = getValue3(obj, field.path);
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options && values && values.length > 0) {
+        const tags = values.map((value) => {
           const option = options.find((o) => o.id === value);
           if (option) {
-            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
           }
+          return null;
+        }).filter(Boolean).join("");
+        if (tags) {
+          cell.accessoryHtml = tags;
         }
       }
-      if (props.format === FormatEnum4.MultiSelect) {
-        const values = getValue3(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options && values && values.length > 0) {
-          const tags = values.map((value) => {
-            const option = options.find((o) => o.id === value);
-            if (option) {
-              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-            }
-            return null;
-          }).filter(Boolean).join(" ");
-          if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
-          }
+    }
+    const idx = toPlaneCellIndex({
+      col: colIndex,
+      row: displayIndex
+    });
+    cells[idx] = cell;
+  }
+  getMainGridCells(range) {
+    const cells = {};
+    const fields = this.model.view?.fields ?? [];
+    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);
       }
-      const idx = toPlaneCellIndex({
-        col: colIndex,
-        row: displayIndex
-      });
-      cells[idx] = cell;
-    };
-    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+    }
+    return cells;
+  }
+  getDraftRowCells(range) {
+    const cells = {};
+    const fields = this.model.view?.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];
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
         const field = fields[col];
         if (!field) {
           continue;
         }
-        addCell(this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, draftRow.data, field, col, row);
+        if (this.model.hasDraftRowValidationError(row, field.path)) {
+          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;
+          }
+        }
       }
     }
     return cells;
@@ -1561,7 +1788,7 @@ var TablePresentation = class {
     const cells = {};
     const fields = this.model.view?.fields ?? [];
     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 { field, props } = this.getFieldProjection(fields[col].id);
       const sorting = this.model.sorting?.sorting;
       const direction = sorting?.fieldId === field.id ? sorting.direction : void 0;
       cells[toPlaneCellIndex({
@@ -1669,6 +1896,26 @@ 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;
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        accessoryHtml: tableButtons.saveDraftRow.render({
+          rowIndex: row,
+          disabled
+        })
+      };
+    }
+    return cells;
+  }
 };
 var cellClassesForRowSelection = (selected, selectionMode) => {
   if (!selected) {
@@ -1693,30 +1940,32 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+// src/components/TableCellEditor/TableCellEditor.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React7, { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { FormatEnum as FormatEnum5, TypeEnum as TypeEnum4 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { useThemeContext } from "@dxos/react-ui";
 import { createMarkdownExtensions } from "@dxos/react-ui-editor";
 import { cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext4, GridCellEditor } from "@dxos/react-ui-grid";
-import { tagPickerExtension, createLinks } from "@dxos/react-ui-tag-picker";
+import { tagPicker, createLinks } from "@dxos/react-ui-tag-picker";
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/CellValidationMessage.tsx
+// src/components/TableCellEditor/CellValidationMessage.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5 from "react";
 import { useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
-var CellValidationMessage = ({ validationError, __gridScope }) => {
+var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
   var _effect = _useSignals5();
   try {
     const { editing, editBox: box } = useGridContext2("GridSheetCellEditor", __gridScope);
     if (!editing || !validationError) {
       return null;
     }
+    const bgClass = variant === "error" ? "bg-errorSurface" : "bg-warningSurface";
+    const textClass = variant === "error" ? "text-errorSurfaceText" : "text-warningSurfaceText";
     return /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: "absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1",
+      className: `absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`,
       style: {
         ...{
           "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
@@ -1732,7 +1981,7 @@ var CellValidationMessage = ({ validationError, __gridScope }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx
+// src/components/TableCellEditor/FormCellEditor.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
 import { getSnapshot as getSnapshot2 } from "@dxos/echo-schema";
@@ -1741,7 +1990,7 @@ import { Popover as Popover3 } from "@dxos/react-ui";
 import { Form as Form2 } from "@dxos/react-ui-form";
 import { parseCellIndex, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
 import { getDeep, setDeep } from "@dxos/util";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
   var _effect = _useSignals6();
   try {
@@ -1833,7 +2082,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
+// src/components/TableCellEditor/extension.ts
 import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 var completion = ({ debug, onQuery, onMatch }) => {
@@ -1872,8 +2121,8 @@ var completion = ({ debug, onQuery, onMatch }) => {
   ];
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+// src/components/TableCellEditor/TableCellEditor.tsx
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
 var newValue = Symbol.for("newValue");
 var createOption = (text) => ({
   [newValue]: true,
@@ -1925,6 +2174,11 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
     _effect.f();
   }
 };
+var editorSlots = {
+  scroller: {
+    className: "!plb-[--dx-grid-cell-editor-padding-block]"
+  }
+};
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
   var _effect = _useSignals7();
   try {
@@ -1932,6 +2186,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const suppressNextBlur = useRef2(false);
     const { themeMode } = useThemeContext();
     const [_validationError, setValidationError] = useState2(null);
+    const [_validationVariant, setValidationVariant] = useState2("error");
     const fieldProjection = useMemo4(() => {
       if (!model || !editing) {
         return;
@@ -1941,7 +2196,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant3(fieldProjection2, void 0, {
         F: __dxlog_file4,
-        L: 116,
+        L: 119,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1953,20 +2208,52 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
+    useEffect3(() => {
+      if (!model || !editing || !fieldProjection) {
+        setValidationError(null);
+        return;
+      }
+      const cell = parseCellIndex2(editing.index);
+      const { row, col } = cell;
+      if (model.isDraftCell(cell)) {
+        const field = model.projection.view.fields[col];
+        const hasValidationError = model.hasDraftRowValidationError(row, field.path);
+        if (hasValidationError) {
+          const draftRows = model.draftRows.value;
+          if (row >= 0 && row < draftRows.length) {
+            const draftRow = draftRows[row];
+            const validationError = draftRow.validationErrors?.find((error) => error.path === field.path);
+            if (validationError) {
+              setValidationError(validationError.message);
+              setValidationVariant("warning");
+            }
+          }
+        } else {
+          setValidationError(null);
+        }
+      } else {
+        setValidationError(null);
+      }
+    }, [
+      model,
+      editing,
+      fieldProjection
+    ]);
     const handleEnter = useCallback4(async (value) => {
       if (!model || !editing) {
         return;
       }
       const cell = parseCellIndex2(editing.index);
-      const result = await model.validateCellData(cell, value);
-      if (result.valid) {
+      const validationResult = await model.validateCellData(cell, value);
+      if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
         onEnter?.(cell);
         onFocus?.();
         setEditing(null);
       } else {
-        setValidationError(result.error);
+        setValidationError(validationResult.error);
+        setValidationVariant("error");
       }
     }, [
       model,
@@ -2003,6 +2290,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
           }
         } else {
           setValidationError(result.error);
+          setValidationVariant("error");
         }
       } else {
         setValidationError(null);
@@ -2038,9 +2326,9 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
         }));
         const options = fieldProjection.props.options || [];
         const mode = format === FormatEnum5.SingleSelect ? "single-select" : "multi-select";
-        extension2.push(tagPickerExtension({
+        extension2.push(tagPicker({
           mode,
-          inGrid: true,
+          keymap: false,
           onSearch: (text, selectedIds) => {
             return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
               id: option.id,
@@ -2110,8 +2398,8 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
           const value2 = model.getCellData(cell);
           if (value2 !== void 0) {
             const options = fieldProjection2.props.options || [];
-            if (fieldProjection2.props.format === FormatEnum5.MultiSelect && Array.isArray(value2)) {
-              const tagItems = value2.map((id) => {
+            if (fieldProjection2.props.format === FormatEnum5.MultiSelect) {
+              const tagItems = value2.split(",").map((id) => {
                 const option = options.find((o) => o.id === id);
                 if (option) {
                   return {
@@ -2148,11 +2436,13 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     ]);
     return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(CellValidationMessage, {
       validationError: _validationError,
+      variant: _validationVariant,
       __gridScope
     }), /* @__PURE__ */ React7.createElement(GridCellEditor, {
       extension,
       getCellContent,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      slots: editorSlots
     }));
   } finally {
     _effect.f();
@@ -2183,8 +2473,8 @@ var determineNavigationDelta = ({ key, shift }) => {
   return shift ? -1 : 1;
 };
 
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+// src/components/Table/Table.tsx
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var TableRoot = ({ children, role }) => {
   var _effect = _useSignals8();
   try {
@@ -2203,20 +2493,23 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     const { hasAttention } = useAttention(model?.id ?? "table");
     const { t } = useTranslation3(translationKey);
     const modals = useMemo5(() => new ModalController(), []);
+    const draftRowCount = model?.getDraftRowCount() ?? 0;
     const frozen = useMemo5(() => {
       const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
       return {
         frozenRowsStart: 1,
+        frozenRowsEnd: draftRowCount,
         frozenColsStart: model?.features.selection.enabled ? 1 : 0,
         frozenColsEnd: noActionColumn ? 0 : 1
       };
     }, [
-      model
+      model,
+      draftRowCount
     ]);
     const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
       presentation
     ]);
-    useEffect3(() => {
+    useEffect4(() => {
       if (!presentation || !dxGrid) {
         return;
       }
@@ -2284,6 +2577,17 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
             model?.sorting?.toggleSort(data.fieldId);
             break;
           }
+          case "saveDraftRow": {
+            if (model) {
+              const didCommitSuccessfully = model.commitDraftRow(data.rowIndex);
+              if (dxGrid && didCommitSuccessfully) {
+                requestAnimationFrame(() => {
+                  dxGrid.scrollToEndRow();
+                });
+              }
+            }
+            break;
+          }
         }
         return;
       }
@@ -2317,7 +2621,8 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       }
     }, [
       model,
-      modals
+      modals,
+      dxGrid
     ]);
     const handleFocus = useCallback5((increment, delta) => {
       if (dxGrid) {
@@ -2331,7 +2636,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
         return;
       }
       if (model && cell.row === model.getRowCount() - 1) {
-        model.insertRow(cell.row);
+        model.insertRow();
         if (dxGrid) {
           requestAnimationFrame(() => {
             dxGrid?.scrollToRow(cell.row + 1);
@@ -2391,7 +2696,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
         const space = model.space;
         invariant4(space, void 0, {
           F: __dxlog_file5,
-          L: 311,
+          L: 325,
           S: void 0,
           A: [
             "space",
@@ -2452,7 +2757,6 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     }), /* @__PURE__ */ React8.createElement(Grid.Content, {
       className: mx2("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
-      // getCells={getCells}
       columns: model.columnMeta.value,
       limitRows: model.getRowCount() ?? 0,
       limitColumns: model.view?.fields?.length ?? 0,
@@ -2485,17 +2789,17 @@ var Table = {
   Main: TableMain
 };
 
-// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
+// src/components/Table/DynamicTable.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import React9, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } from "react";
+import React9, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback7 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+// src/hooks/useTableModel.ts
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import { effect as effect3 } from "@preact/signals-core";
 import orderBy2 from "lodash.orderby";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState4 } from "react";
 import { fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
 import { useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
@@ -2503,7 +2807,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   var _effect = _useSignals9();
   try {
     const [model, setModel] = useState4();
-    useEffect4(() => {
+    useEffect5(() => {
       if (!table || !projection) {
         return;
       }
@@ -2533,7 +2837,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
       features,
       rowActions
     ]);
-    useEffect4(() => {
+    useEffect5(() => {
       if (rows) {
         const sortedRows = orderBy2(rows, [
           (row) => String(row.id)
@@ -2550,7 +2854,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
       table?.id,
       table?.view?.target?.query.typename
     ].filter(isNonNullable));
-    useEffect4(() => {
+    useEffect5(() => {
       if (!model) {
         return;
       }
@@ -2575,7 +2879,27 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   }
 };
 
-// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
+// src/hooks/useAddRow.ts
+import { useCallback as useCallback6 } from "react";
+import { Obj as Obj3 } from "@dxos/echo";
+var useAddRow = ({ space, schema }) => {
+  return useCallback6((data) => {
+    if (space && schema) {
+      try {
+        space.db.add(Obj3.make(schema, data ?? {}));
+        return true;
+      } catch (error) {
+        return false;
+      }
+    }
+    return false;
+  }, [
+    space,
+    schema
+  ]);
+};
+
+// src/components/Table/DynamicTable.tsx
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
   var _effect = _useSignals10();
   try {
@@ -2597,10 +2921,10 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       jsonSchema
     ]);
     const tableRef = useRef3(null);
-    const handleCellUpdate = useCallback6((cell) => {
+    const handleCellUpdate = useCallback7((cell) => {
       tableRef.current?.update?.(cell);
     }, []);
-    const handleRowOrderChange = useCallback6(() => {
+    const handleRowOrderChange = useCallback7(() => {
       tableRef.current?.update?.();
     }, []);
     const features = useDefaultValue(props.features, () => ({
@@ -2644,7 +2968,7 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
+// src/components/TableToolbar/TableToolbar.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import { Rx } from "@effect-rx/rx-react";
 import React10, { useMemo as useMemo7 } from "react";
@@ -2745,7 +3069,8 @@ export {
   tableButtons,
   tableControls,
   touch,
-  translations_default as translations,
+  translations,
+  useAddRow,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map