@dxos/react-ui-table 0.8.3-main.7f5a14c → 0.8.3-staging.0fa589b

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-U6LL2AVU.mjs";
+} from "./chunk-TL7CKQQV.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -36,8 +36,8 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState2, useMemo as useMemo5, useEffect as useEffect3 } from "react";
+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 { getValue as getValue4 } from "@dxos/echo-schema";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { Filter } from "@dxos/react-client/echo";
@@ -280,18 +280,19 @@ var RowActionsMenu = ({ model, modals }) => {
 // packages/ui/react-ui-table/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 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum3, getValue as getValue2, setValue, getSnapshot, getSchema } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { isLiveObject, makeRef as makeRef2 } from "@dxos/live-object";
+import { isLiveObject, makeRef } 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
 import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 
 // packages/ui/react-ui-table/src/util/dynamic-table.ts
+import { Obj, Ref } from "@dxos/echo";
 import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { live as live2, makeRef } from "@dxos/live-object";
 import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
@@ -323,9 +324,9 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = live2(TableType, {
+  const table = Obj.make(TableType, {
     name: "dynamic-table",
-    view: makeRef(view)
+    view: Ref.make(view)
   });
   const projection = new ViewProjection(jsonSchema, view);
   if (properties && view.fields) {
@@ -371,9 +372,9 @@ var touch = (value) => value;
 
 // packages/ui/react-ui-table/src/util/table.ts
 import { Schema as Schema2 } from "effect";
-import { Format, FormatEnum, Ref, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { Format, FormatEnum, Ref as Ref2, TypedObject, TypeEnum } from "@dxos/echo-schema";
 import { PublicKey } from "@dxos/react-client";
-import { live as live3 } from "@dxos/react-client/echo";
+import { live as live2 } from "@dxos/react-client/echo";
 import { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
 var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
   if (typename) {
@@ -382,7 +383,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
       throw new Error(`Schema not found: ${typename}`);
     }
     const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
-    table.view = Ref.make(createView2({
+    table.view = Ref2.make(createView2({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -392,10 +393,10 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     return schema;
   } else {
     const [schema] = await space.db.schemaRegistry.register([
-      ContactSchema
+      createContactSchema()
     ]);
     const fields = ContactFields;
-    table.view = Ref.make(createView2({
+    table.view = Ref2.make(createView2({
       name: "View",
       typename: schema.typename,
       jsonSchema: schema.jsonSchema,
@@ -403,19 +404,21 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     }));
     createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add(live3(schema, {}));
+      space.db.add(live2(schema, {}));
     }
     return schema;
   }
 };
-var ContactSchema = TypedObject({
+var createContactSchema = () => TypedObject({
   typename: `example.com/type/${PublicKey.random().truncate()}`,
   version: "0.1.0"
 })({
   name: Schema2.optional(Schema2.String).annotations({
     title: "Name"
   }),
-  active: Schema2.optional(Schema2.Boolean),
+  active: Schema2.optional(Schema2.Boolean).annotations({
+    title: "Active"
+  }),
   email: Schema2.optional(Format.Email),
   salary: Schema2.optional(Format.Currency()).annotations({
     title: "Salary"
@@ -969,6 +972,61 @@ var TableModel = class extends Resource2 {
         }
       }
     };
+    this.validateCellData = async ({ col, row }, value) => {
+      const rowIdx = this._sorting.getDataIndex(row);
+      const fields = this._view?.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 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, {
+          F: __dxlog_file,
+          L: 370,
+          S: this,
+          A: [
+            "error.path === field.path",
+            ""
+          ]
+        });
+        return {
+          valid: false,
+          error: error.message
+        };
+      }
+      return {
+        valid: true
+      };
+    };
     this.setCellData = ({ col, row }, value) => {
       const rowIdx = this._sorting.getDataIndex(row);
       const fields = this._view?.fields ?? [];
@@ -977,36 +1035,11 @@ var TableModel = class extends Resource2 {
       }
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
-      switch (props.format) {
-        case FormatEnum3.Ref: {
-          if (isLiveObject(value)) {
-            setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
-          }
-          break;
-        }
-        case FormatEnum3.SingleSelect: {
-          const ids = extractTagIds(value);
-          if (ids && ids.length > 0) {
-            setValue(this._rows.value[rowIdx], field.path, ids[0]);
-          }
-          break;
-        }
-        case FormatEnum3.MultiSelect: {
-          const ids = extractTagIds(value);
-          if (ids) {
-            setValue(this._rows.value[rowIdx], field.path, ids);
-          }
-          break;
-        }
-        default: {
-          setValue(this._rows.value[rowIdx], field.path, parseValue({
-            type: props.type,
-            format: props.format,
-            value
-          }));
-          break;
-        }
+      const transformedValue = editorTextToCellValue(props, value);
+      if (props.format === FormatEnum3.Ref && !isLiveObject(value)) {
+        return;
       }
+      setValue(this._rows.value[rowIdx], field.path, transformedValue);
     };
     this._id = id;
     this._space = space;
@@ -1018,7 +1051,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: 115,
+      L: 126,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1078,7 +1111,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 184,
+      L: 195,
       S: this,
       A: [
         "this._columnMeta",
@@ -1213,6 +1246,36 @@ var TableModel = class extends Resource2 {
     this._sorting.save();
   }
 };
+var editorTextToCellValue = (props, value) => {
+  switch (props.format) {
+    case FormatEnum3.Ref: {
+      if (isLiveObject(value)) {
+        return makeRef(value);
+      } else {
+        return value;
+      }
+    }
+    case FormatEnum3.SingleSelect: {
+      const ids = extractTagIds(value);
+      if (ids && ids.length > 0) {
+        return ids[0];
+      } else {
+        return value;
+      }
+    }
+    case FormatEnum3.MultiSelect: {
+      const ids = extractTagIds(value);
+      return ids || value;
+    }
+    default: {
+      return parseValue({
+        type: props.type,
+        format: props.format,
+        value
+      });
+    }
+  }
+};
 
 // packages/ui/react-ui-table/src/model/modal-controller.ts
 import { signal as signal4 } from "@preact/signals-core";
@@ -1438,7 +1501,7 @@ var TablePresentation = class {
         const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
           const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          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) {
@@ -1630,29 +1693,58 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef2 } from "react";
+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 { 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 useGridContext3, GridCellEditor } from "@dxos/react-ui-grid";
+import { cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext4, GridCellEditor } from "@dxos/react-ui-grid";
 import { tagPickerExtension, createLinks } from "@dxos/react-ui-tag-picker";
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx
+// packages/ui/react-ui-table/src/components/TableCellEditor/CellValidationMessage.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
-import { getSnapshot } from "@dxos/echo-schema";
+import React5 from "react";
+import { useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+var CellValidationMessage = ({ validationError, __gridScope }) => {
+  var _effect = _useSignals5();
+  try {
+    const { editing, editBox: box } = useGridContext2("GridSheetCellEditor", __gridScope);
+    if (!editing || !validationError) {
+      return null;
+    }
+    return /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1",
+      style: {
+        ...{
+          "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
+        },
+        zIndex: 10,
+        insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
+        insetInlineStart: box.insetInlineStart,
+        inlineSize: box.inlineSize
+      }
+    }, validationError);
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/ui/react-ui-table/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";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { Popover as Popover3 } from "@dxos/react-ui";
 import { Form as Form2 } from "@dxos/react-ui-form";
-import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+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 FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals6();
   try {
-    const { editing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+    const { editing, setEditing } = useGridContext3("ArrayEditor", __gridScope);
     const cellRef = useRef(null);
     useEffect2(() => {
       if (editing && editing.cellElement) {
@@ -1694,7 +1786,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
     ]);
     const formValues = useMemo3(() => {
       if (originalRow) {
-        return getSnapshot(originalRow);
+        return getSnapshot2(originalRow);
       }
     }, [
       originalRow
@@ -1722,15 +1814,15 @@ var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
     if (!editing) {
       return null;
     }
-    return /* @__PURE__ */ React5.createElement(Popover3.Root, {
+    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
       open: editing !== null,
       onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ React5.createElement(Popover3.VirtualTrigger, {
+    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
       virtualRef: cellRef
-    }), /* @__PURE__ */ React5.createElement(Popover3.Content, {
+    }), /* @__PURE__ */ React6.createElement(Popover3.Content, {
       tabIndex: -1,
       classNames: "popover-card-width"
-    }, /* @__PURE__ */ React5.createElement(Popover3.Arrow, null), /* @__PURE__ */ React5.createElement(Popover3.Viewport, null, /* @__PURE__ */ React5.createElement(Form2, {
+    }, /* @__PURE__ */ React6.createElement(Popover3.Arrow, null), /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, /* @__PURE__ */ React6.createElement(Form2, {
       values: formValues,
       schema: narrowedSchema,
       onSave: handleSave
@@ -1788,9 +1880,9 @@ var createOption = (text) => ({
 });
 var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gridScope }) => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals7();
   try {
-    const { editing } = useGridContext3("TableValueEditor", __gridScope);
+    const { editing } = useGridContext4("TableValueEditor", __gridScope);
     const fieldProjection = useMemo4(() => {
       if (!model || !editing) {
         return;
@@ -1800,7 +1892,7 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant3(fieldProjection2, void 0, {
         F: __dxlog_file4,
-        L: 73,
+        L: 74,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1813,14 +1905,14 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
       editing
     ]);
     if (fieldProjection?.props.type === TypeEnum4.Array) {
-      return /* @__PURE__ */ React6.createElement(FormCellEditor, {
+      return /* @__PURE__ */ React7.createElement(FormCellEditor, {
         fieldProjection,
         model,
         schema,
         __gridScope
       });
     }
-    return /* @__PURE__ */ React6.createElement(TableCellEditor, {
+    return /* @__PURE__ */ React7.createElement(TableCellEditor, {
       model,
       modals,
       onEnter,
@@ -1833,11 +1925,12 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
   }
 };
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals7();
   try {
-    const { id: gridId, editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
+    const { id: gridId, editing, setEditing } = useGridContext4("TableCellEditor", __gridScope);
     const suppressNextBlur = useRef2(false);
     const { themeMode } = useThemeContext();
+    const [_validationError, setValidationError] = useState2(null);
     const fieldProjection = useMemo4(() => {
       if (!model || !editing) {
         return;
@@ -1847,7 +1940,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant3(fieldProjection2, void 0, {
         F: __dxlog_file4,
-        L: 114,
+        L: 116,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1859,15 +1952,21 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    const handleEnter = useCallback4((value) => {
+    const handleEnter = useCallback4(async (value) => {
       if (!model || !editing) {
         return;
       }
       const cell = parseCellIndex2(editing.index);
-      model.setCellData(cell, value);
-      onEnter?.(cell);
-      onFocus?.();
-      setEditing(null);
+      const result = await model.validateCellData(cell, value);
+      if (result.valid) {
+        setValidationError(null);
+        model.setCellData(cell, value);
+        onEnter?.(cell);
+        onFocus?.();
+        setEditing(null);
+      } else {
+        setValidationError(result.error);
+      }
     }, [
       model,
       editing,
@@ -1875,37 +1974,49 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       onFocus,
       setEditing
     ]);
-    const handleBlur = useCallback4((value) => {
+    const handleBlur = useCallback4(async (value) => {
       if (!model || !editing) {
         return;
       }
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
-        return;
-      }
-      const cell = parseCellIndex2(editing.index);
-      if (value !== void 0) {
-        model.setCellData(cell, value);
       }
     }, [
       model,
       editing
     ]);
-    const handleClose = useCallback4((value, event) => {
+    const handleClose = useCallback4(async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
       const cell = parseCellIndex2(editing.index);
-      onEnter?.(cell);
-      if (event && onFocus) {
-        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+      if (value !== void 0) {
+        const result = await model.validateCellData(cell, value);
+        if (result.valid) {
+          setValidationError(null);
+          model.setCellData(cell, value);
+          setEditing(null);
+          onEnter?.(cell);
+          if (event && onFocus) {
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+          }
+        } else {
+          setValidationError(result.error);
+        }
+      } else {
+        setValidationError(null);
+        setEditing(null);
+        if (event && onFocus) {
+          onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+        }
       }
     }, [
       model,
       editing,
       onFocus,
       onEnter,
-      fieldProjection
+      fieldProjection,
+      setEditing
     ]);
     const extension = useMemo4(() => {
       if (!fieldProjection) {
@@ -1942,9 +2053,9 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
                 return;
               }
               if (mode === "single-select") {
-                handleEnter(ids[0]);
+                void handleEnter(ids[0]);
               } else {
-                handleEnter(ids);
+                void handleEnter(ids);
               }
             }
           }
@@ -1965,11 +2076,11 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
                         modals.openCreateRef(props.referenceSchema, document.querySelector(cellQuery(editing.index, gridId)), {
                           [field.referencePath]: data.text
                         }, (data2) => {
-                          handleEnter(data2);
+                          void handleEnter(data2);
                         });
                       }
                     } else {
-                      handleEnter(data);
+                      void handleEnter(data);
                     }
                   }
                 }
@@ -2034,11 +2145,14 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    return /* @__PURE__ */ React6.createElement(GridCellEditor, {
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(CellValidationMessage, {
+      validationError: _validationError,
+      __gridScope
+    }), /* @__PURE__ */ React7.createElement(GridCellEditor, {
       extension,
       getCellContent,
       onBlur: handleBlur
-    });
+    }));
   } finally {
     _effect.f();
   }
@@ -2071,9 +2185,9 @@ var determineNavigationDelta = ({ key, shift }) => {
 // 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";
 var TableRoot = ({ children, role }) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals8();
   try {
-    return /* @__PURE__ */ React7.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       role: "none",
       className: mx2("relative !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
     }, children);
@@ -2081,10 +2195,10 @@ var TableRoot = ({ children, role }) => {
     _effect.f();
   }
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
-  var _effect = _useSignals7();
+var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
+  var _effect = _useSignals8();
   try {
-    const [dxGrid, setDxGrid] = useState2(null);
+    const [dxGrid, setDxGrid] = useState3(null);
     const { hasAttention } = useAttention(model?.id ?? "table");
     const { t } = useTranslation3(translationKey);
     const modals = useMemo5(() => new ModalController(), []);
@@ -2276,14 +2390,20 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
         const space = model.space;
         invariant4(space, void 0, {
           F: __dxlog_file5,
-          L: 309,
+          L: 311,
           S: void 0,
           A: [
             "space",
             ""
           ]
         });
-        const schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        let schema2;
+        if (client) {
+          schema2 = client.graph.schemaRegistry.getSchema(props.referenceSchema);
+        }
+        if (!schema2) {
+          schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        }
         if (schema2) {
           const { objects } = await space.db.query(Filter.type(schema2)).run();
           const options = objects.map((obj) => {
@@ -2310,24 +2430,25 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       return [];
     }, [
       model,
+      client,
       t
     ]);
     if (!model || !modals) {
-      return /* @__PURE__ */ React7.createElement("span", {
+      return /* @__PURE__ */ React8.createElement("span", {
         role: "none",
         className: "attention-surface"
       });
     }
-    return /* @__PURE__ */ React7.createElement(Grid.Root, {
+    return /* @__PURE__ */ React8.createElement(Grid.Root, {
       id: model.id ?? "table-grid"
-    }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
+    }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
       model,
       modals,
       schema,
       onEnter: handleEnter,
       onFocus: handleFocus,
       onQuery: handleQuery
-    }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+    }), /* @__PURE__ */ React8.createElement(Grid.Content, {
       className: mx2("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
       // getCells={getCells}
@@ -2340,17 +2461,17 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       onKeyDown: handleKeyDown,
       onWheelCapture: handleWheel,
       ref: setDxGrid
-    }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
+    }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
+    }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+    }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
       model,
       modals,
       onNewColumn: handleNewColumn
-    }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
+    }), /* @__PURE__ */ React8.createElement(CreateRefPanel, {
       model,
       modals
     }));
@@ -2364,22 +2485,23 @@ var Table = {
 };
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React8, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } from "react";
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import React9, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } 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
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import { effect as effect3 } from "@preact/signals-core";
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import orderBy2 from "lodash.orderby";
+import { useEffect as useEffect4, 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";
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals9();
   try {
-    const [model, setModel] = useState3();
+    const [model, setModel] = useState4();
     useEffect4(() => {
       if (!table || !projection) {
         return;
@@ -2412,7 +2534,12 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     ]);
     useEffect4(() => {
       if (rows) {
-        model?.setRows(rows);
+        const sortedRows = orderBy2(rows, [
+          (row) => String(row.id)
+        ], [
+          "asc"
+        ]);
+        model?.setRows(sortedRows);
       }
     }, [
       model,
@@ -2449,7 +2576,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
     const { table, projection } = useMemo6(() => {
       const props2 = getBaseSchema({
@@ -2498,13 +2625,13 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     }, [
       model
     ]);
-    return /* @__PURE__ */ React8.createElement("div", {
+    return /* @__PURE__ */ React9.createElement("div", {
       role: "none",
       className: mx3("is-full bs-full grow grid", classNames)
-    }, /* @__PURE__ */ React8.createElement("div", {
+    }, /* @__PURE__ */ React9.createElement("div", {
       role: "none",
       className: "grid min-bs-0 overflow-hidden"
-    }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
+    }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
       ref: tableRef,
       model,
       presentation,
@@ -2517,10 +2644,10 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import { Rx } from "@effect-rx/rx-react";
-import React9, { useMemo as useMemo7 } from "react";
-import { live as live4 } from "@dxos/live-object";
+import React10, { useMemo as useMemo7 } from "react";
+import { live as live3 } from "@dxos/live-object";
 import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
 import { rxFromSignal } from "@dxos/react-ui-menu";
 var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
@@ -2569,9 +2696,9 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.
   };
 });
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals11();
   try {
-    const state = useMemo7(() => live4({
+    const state = useMemo7(() => live3({
       viewDirty
     }), []);
     const actionsCreator = useMemo7(() => createTableToolbarActions({
@@ -2586,10 +2713,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
       customActions
     ]);
     const menu = useMenuActions(actionsCreator);
-    return /* @__PURE__ */ React9.createElement(MenuProvider, {
+    return /* @__PURE__ */ React10.createElement(MenuProvider, {
       ...menu,
       attendableId
-    }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
+    }, /* @__PURE__ */ React10.createElement(ToolbarMenu, {
       classNames
     }));
   } finally {