@dxos/react-ui-table 0.7.4-staging.f7e8224 → 0.7.5-labs.071a3e2

package/dist/lib/node/index.cjs

@@ -28,19 +28,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
+  BUTTON_IDENTIFIERS: () => BUTTON_IDENTIFIERS,
+  CONTROL_IDENTIFIERS: () => CONTROL_IDENTIFIERS,
+  ModalController: () => ModalController,
   Table: () => Table,
-  TableSchema: () => import_chunk_MHBMVCFZ.TableSchema,
-  TableType: () => import_chunk_MHBMVCFZ.TableType,
-  Toolbar: () => Toolbar,
+  TableModel: () => TableModel,
+  TablePresentation: () => TablePresentation,
+  TableSchema: () => import_chunk_NB3SFHGA.TableSchema,
+  TableToolbar: () => TableToolbar,
+  TableType: () => import_chunk_NB3SFHGA.TableType,
   initializeTable: () => initializeTable,
+  renderCheckbox: () => renderCheckbox,
+  renderSwitch: () => renderSwitch,
   tableButtons: () => tableButtons,
+  tableControls: () => tableControls,
   touch: () => touch,
   translations: () => translations_default,
-  useTableModel: () => useTableModel,
-  useToolbarContext: () => useToolbarContext
+  useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_MHBMVCFZ = require("./chunk-MHBMVCFZ.cjs");
+var import_chunk_NB3SFHGA = require("./chunk-NB3SFHGA.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -68,37 +75,41 @@ var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_form3 = require("@dxos/react-ui-form");
 var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
-var import_react7 = __toESM(require("react"));
-var import_echo_schema3 = require("@dxos/echo-schema");
-var import_invariant2 = require("@dxos/invariant");
-var import_react_ui_grid3 = require("@dxos/react-ui-grid");
-var import_autocomplete = require("@codemirror/autocomplete");
-var import_view = require("@codemirror/view");
-var import_react_context = require("@radix-ui/react-context");
-var import_react8 = __toESM(require("react"));
-var import_react_ui7 = require("@dxos/react-ui");
-var import_react9 = __toESM(require("react"));
-var import_react_ui8 = require("@dxos/react-ui");
-var import_react10 = require("react");
 var import_signals_core = require("@preact/signals-core");
-var import_lodash = __toESM(require("lodash.orderby"));
 var import_context = require("@dxos/context");
-var import_echo_schema4 = require("@dxos/echo-schema");
-var import_invariant3 = require("@dxos/invariant");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_invariant2 = require("@dxos/invariant");
+var import_live_object = require("@dxos/live-object");
 var import_react_client = require("@dxos/react-client");
 var import_react_ui_form4 = require("@dxos/react-ui-form");
-var import_react_ui_grid4 = require("@dxos/react-ui-grid");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_schema = require("@dxos/schema");
 var import_signals_core2 = require("@preact/signals-core");
-var import_log = require("@dxos/log");
-var import_echo_schema5 = require("@dxos/echo-schema");
-var import_log2 = require("@dxos/log");
+var import_context2 = require("@dxos/context");
+var import_echo_schema4 = require("@dxos/echo-schema");
 var import_react_client2 = require("@dxos/react-client");
 var import_echo5 = require("@dxos/react-client/echo");
-var import_schema2 = require("@dxos/schema");
+var import_schema = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
-var import_context2 = require("@dxos/context");
+var import_lodash = __toESM(require("lodash.orderby"));
+var import_echo_schema5 = require("@dxos/echo-schema");
+var import_react_ui_form5 = require("@dxos/react-ui-form");
+var import_signals_core4 = require("@preact/signals-core");
+var import_log = require("@dxos/log");
+var import_signals_core5 = require("@preact/signals-core");
+var import_echo_schema6 = require("@dxos/echo-schema");
+var import_react_ui_form6 = require("@dxos/react-ui-form");
+var import_react_ui_grid3 = require("@dxos/react-ui-grid");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_schema2 = require("@dxos/schema");
+var import_react7 = __toESM(require("react"));
+var import_echo_schema7 = require("@dxos/echo-schema");
+var import_invariant3 = require("@dxos/invariant");
+var import_react_ui_grid4 = require("@dxos/react-ui-grid");
+var import_autocomplete = require("@codemirror/autocomplete");
+var import_view = require("@codemirror/view");
+var import_react8 = __toESM(require("react"));
+var import_live_object2 = require("@dxos/live-object");
+var import_react_ui_menu = require("@dxos/react-ui-menu");
+var import_react9 = require("react");
 var translationKey = "table";
 var translations_default = [
   {
@@ -112,7 +123,7 @@ var translations_default = [
         "new schema": "New schema",
         "continue label": "Continue",
         "create stack section label": "Create table",
-        "add row": "Add row",
+        "add row label": "Add row",
         "create comment": "Create thread",
         "column action sort descending": "Sort Descending",
         "column action sort ascending": "Sort Ascending",
@@ -123,45 +134,46 @@ var translations_default = [
         "bulk delete row label": "Delete selected rows",
         "column deleted label": "Column deleted",
         "new column button label": "Create column",
-        "create new object label": "Create new object \u201C{{text}}\u201D"
+        "create new object label": "Create new object \u201C{{text}}\u201D",
+        "save view label": "Save changes to view"
       }
     }
   }
 ];
-var ColumnActionsMenu = ({ model }) => {
+var ColumnActionsMenu = ({ model, modals }) => {
   const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  const state = model?.modalController.state.value;
-  if (!model || state?.type !== "column") {
+  const state = modals.state.value;
+  if (state?.type !== "column") {
     return null;
   }
-  const currentSort = model.sorting;
+  const currentSort = model.sorting?.sorting;
   const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
   return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Root, {
     modal: false,
-    open: state?.type === "column",
-    onOpenChange: model.modalController.close
+    open: true,
+    onOpenChange: modals.close
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-descending",
-    onClick: () => model.setSort(state.fieldId, "desc")
+    onClick: () => model.sorting?.setSort(state.fieldId, "desc")
   }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-ascending",
-    onClick: () => model.setSort(state.fieldId, "asc")
+    onClick: () => model.sorting?.setSort(state.fieldId, "asc")
   }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
-    onClick: () => model.clearSort()
+    onClick: () => model.sorting?.clearSort()
   }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
   }, t("column action delete")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-settings",
-    onClick: () => model.modalController.openColumnSettings()
+    onClick: () => modals.openColumnSettings()
   }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
 };
-var ColumnSettings = ({ model, onNewColumn }) => {
+var ColumnSettings = ({ model, modals, onNewColumn }) => {
   const [newField, setNewField] = (0, import_react3.useState)();
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
   const space = (0, import_echo2.getSpace)(model?.table);
   (0, import_react3.useEffect)(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
@@ -180,19 +192,19 @@ var ColumnSettings = ({ model, onNewColumn }) => {
     if (state?.type === "columnSettings") {
       const { mode } = state;
       if (mode.type === "edit") {
-        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+        return model?.table?.view?.target?.fields.find((f) => f.id === mode.fieldId);
       }
     }
     return void 0;
   }, [
-    model?.table?.view?.fields,
+    model?.table?.view?.target?.fields,
     state
   ]);
   const field = existingField ?? newField;
   const handleSave = (0, import_react3.useCallback)(() => {
-    model?.modalController.close();
+    modals.close();
   }, [
-    model?.modalController
+    modals
   ]);
   const handleCancel = (0, import_react3.useCallback)(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
@@ -203,18 +215,18 @@ var ColumnSettings = ({ model, onNewColumn }) => {
     state,
     newField
   ]);
-  if (!model?.table?.view || !model.projection || !field) {
+  if (!model?.table?.view?.target || !model.projection || !field) {
     return null;
   }
   return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Root, {
     modal: false,
     open: state?.type === "columnSettings"
   }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Content, {
     classNames: "md:is-64"
   }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
-    view: model.table.view,
+    view: model.table.view.target,
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
@@ -222,15 +234,17 @@ var ColumnSettings = ({ model, onNewColumn }) => {
     onCancel: handleCancel
   })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
 };
-var CreateRefPanel = ({ model, __gridScope }) => {
+var CreateRefPanel = ({ model, modals, __gridScope }) => {
   const { id: gridId } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
   const space = (0, import_echo3.getSpace)(model?.table);
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
   const schema = (0, import_react4.useMemo)(() => {
     if (!space || state?.type !== "createRefPanel") {
       return;
     }
-    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    const [schema2] = space.db.schemaRegistry.query({
+      typename: state.typename
+    }).runSync();
     if (schema2) {
       const omit = import_echo_schema2.S.omit("id");
       return omit(schema2);
@@ -243,23 +257,25 @@ var CreateRefPanel = ({ model, __gridScope }) => {
     if (!model || !space || state?.type !== "createRefPanel") {
       return;
     }
-    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    const [schema2] = space.db.schemaRegistry.query({
+      typename: state.typename
+    }).runSync();
     if (schema2) {
       const obj = space.db.add((0, import_echo3.create)(schema2, values));
       state.onCreate?.(obj);
     }
-    void model.modalController.close();
+    void modals.close();
   }, [
-    model?.modalController,
+    modals,
     space,
     state
   ]);
   const handleCancel = (0, import_react4.useCallback)(() => {
     if (model) {
-      model.modalController.close();
+      modals.close();
     }
   }, [
-    model?.modalController
+    modals
   ]);
   if (!model?.table?.view || !model.projection) {
     return null;
@@ -269,11 +285,11 @@ var CreateRefPanel = ({ model, __gridScope }) => {
     open: state?.type === "createRefPanel" && !!schema,
     onOpenChange: (nextOpen) => {
       if (model && !nextOpen) {
-        return model.modalController.close();
+        return modals.close();
       }
     }
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Content, {
     classNames: "md:is-64",
     "data-grid": gridId
@@ -291,24 +307,24 @@ var getRefTargetObj = (space, id) => {
     return void 0;
   }
 };
-var RefPanel = ({ model }) => {
-  const state = model?.modalController.state.value;
-  const space = (0, import_echo4.getSpace)(model?.table);
+var RefPanel = ({ model, modals }) => {
+  const state = modals.state.value;
+  const space = (0, import_echo4.getSpace)(model.table);
   const targetObj = getRefTargetObj(space, state?.type === "refPanel" ? state.targetId : void 0);
   const schema = space && state?.type === "refPanel" ? space.db.schemaRegistry.getSchema(state.typename) : void 0;
-  if (!model?.table?.view || !model.projection) {
+  if (!model.table?.view || !model.projection) {
     return null;
   }
   return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Root, {
     modal: false,
     open: state?.type === "refPanel" && !!targetObj && !!schema,
     onOpenChange: (nextOpen) => {
-      if (model && !nextOpen) {
-        return model.modalController.close();
+      if (!nextOpen) {
+        return modals.close();
       }
     }
   }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Content, {
     classNames: "md:is-64"
   }, targetObj && schema && /* @__PURE__ */ import_react5.default.createElement(import_react_ui_form3.Form, {
@@ -317,731 +333,331 @@ var RefPanel = ({ model }) => {
     schema
   }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Arrow, null))));
 };
-var RowActionsMenu = ({ model }) => {
+var RowActionsMenu = ({ model, modals }) => {
   const { t } = (0, import_react_ui6.useTranslation)(translationKey);
   const hasSelection = model.selection.hasSelection.value;
-  const state = model.modalController.state.value;
+  const state = modals.state.value;
   if (state?.type !== "row") {
     return null;
   }
   return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Root, {
     modal: false,
     open: true,
-    onOpenChange: model.modalController.close
+    onOpenChange: modals.close
   }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
   }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
 };
-var completion = ({ debug, onQuery, onMatch }) => {
-  return [
-    import_view.EditorView.theme({
-      ".cm-completionDialog": {
-        width: "var(--dx-gridCellWidth)"
-      }
-    }),
-    (0, import_autocomplete.autocompletion)({
-      icons: false,
-      activateOnTyping: true,
-      closeOnBlur: !debug,
-      override: [
-        async (context) => {
-          const text = context.state.doc.toString();
-          return {
-            from: 0,
-            options: await onQuery(text)
-          };
-        }
-      ],
-      // TODO(burdon): Consts from grid (to line-up with grid).
-      tooltipClass: () => "cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]",
-      optionClass: () => "flex h-[33px] items-center"
-    }),
-    // Check for accepted completion metadata in the transaction.
-    import_view.EditorView.updateListener.of((update) => {
-      update.transactions.forEach((tr) => {
-        const completion2 = tr.annotation(import_autocomplete.pickedCompletion);
-        if (completion2) {
-          onMatch(completion2.data);
-        }
-      });
-    })
-  ];
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var newValue = Symbol.for("newValue");
-var createOption = (text) => ({
-  [newValue]: true,
-  text
-});
-var isCreateOption = (data) => typeof data === "object" && data[newValue];
-var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
-  const { id: gridId, editing, setEditing } = (0, import_react_ui_grid3.useGridContext)("TableCellEditor", __gridScope);
-  const suppressNextBlur = (0, import_react7.useRef)(false);
-  const fieldProjection = (0, import_react7.useMemo)(() => {
-    if (!model || !editing) {
-      return;
+var touch = (value) => value;
+var initializeTable = async ({ space, table, initialRow = true, initialSchema }) => {
+  if (initialSchema) {
+    const schema = await space.db.schemaRegistry.query({
+      typename: initialSchema
+    }).firstOrUndefined();
+    if (!schema) {
+      throw new Error(`Schema not found: ${initialSchema}`);
     }
-    const { col } = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
-    const field = model.projection.view.fields[col];
-    const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    (0, import_invariant2.invariant)(fieldProjection2, void 0, {
-      F: __dxlog_file,
-      L: 65,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
+    const fields = (0, import_schema.getSchemaProperties)(schema.ast).filter((prop) => prop.type !== "object" || prop.format === import_echo_schema4.FormatEnum.Ref).map((prop) => prop.name);
+    table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
+      // TODO(ZaymonFC): Don't hardcode name?
+      name: "View",
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema,
+      fields
+    }));
+    return schema;
+  } else {
+    const ContactSchema = (0, import_echo_schema4.TypedObject)({
+      typename: `example.com/type/${import_react_client2.PublicKey.random().truncate()}`,
+      version: "0.1.0"
+    })({
+      name: import_echo_schema4.S.optional(import_echo_schema4.S.String).annotations({
+        [import_echo_schema4.AST.TitleAnnotationId]: "Name"
+      }),
+      active: import_echo_schema4.S.optional(import_echo_schema4.S.Boolean),
+      email: import_echo_schema4.S.optional(import_echo_schema4.Format.Email),
+      salary: import_echo_schema4.S.optional(import_echo_schema4.Format.Currency()).annotations({
+        [import_echo_schema4.AST.TitleAnnotationId]: "Salary"
+      })
+    });
+    const [contactSchema] = await space.db.schemaRegistry.register([
+      ContactSchema
+    ]);
+    table.view = (0, import_echo5.makeRef)((0, import_schema.createView)({
+      name: "View",
+      typename: contactSchema.typename,
+      jsonSchema: contactSchema.jsonSchema,
+      fields: [
+        "name",
+        "email",
+        "salary",
+        "active"
       ]
+    }));
+    const projection = new import_schema.ViewProjection(contactSchema, table.view.target);
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target.fields.find((f) => f.path === "salary").id,
+        path: "salary",
+        size: 150
+      }
     });
-    return fieldProjection2;
-  }, [
-    model,
-    editing
-  ]);
-  const handleEnter = (0, import_react7.useCallback)((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
-    model.setCellData(cell, value);
-    onEnter?.(cell);
-    onFocus?.();
-    setEditing(null);
-  }, [
-    model,
-    editing
-  ]);
-  const handleBlur = (0, import_react7.useCallback)((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    if (suppressNextBlur.current) {
-      suppressNextBlur.current = false;
-      return;
-    }
-    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
-    if (value !== void 0) {
-      model.setCellData(cell, value);
-    }
-  }, [
-    model,
-    editing
-  ]);
-  const handleClose = (0, import_react7.useCallback)((value, event) => {
-    if (!model || !editing || !fieldProjection) {
-      return;
-    }
-    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
-    onEnter?.(cell);
-    if (event && onFocus) {
-      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
-    }
-  }, [
-    model,
-    editing,
-    onFocus,
-    onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
-  ]);
-  const extension = (0, import_react7.useMemo)(() => {
-    if (!fieldProjection) {
-      return [];
-    }
-    const extension2 = [
-      (0, import_react_ui_grid3.editorKeys)({
-        onClose: handleClose,
-        ...editing?.initialContent && {
-          onNav: handleClose
-        }
-      })
-    ];
-    if (onQuery) {
-      switch (fieldProjection.props.format) {
-        case import_echo_schema3.FormatEnum.Ref: {
-          extension2.push([
-            completion({
-              onQuery: (text) => onQuery(fieldProjection, text),
-              onMatch: (data) => {
-                if (model && editing) {
-                  if (isCreateOption(data)) {
-                    const { field, props } = fieldProjection;
-                    if (props.referenceSchema) {
-                      suppressNextBlur.current = true;
-                      model.modalController.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid3.cellQuery)(editing.index, gridId)), {
-                        [field.referencePath]: data.text
-                      }, (data2) => {
-                        handleEnter(data2);
-                      });
-                    }
-                  } else {
-                    handleEnter(data);
-                  }
-                }
-              }
-            })
-          ]);
-          break;
-        }
+    projection.setFieldProjection({
+      field: {
+        id: table.view.target.fields.find((f) => f.path === "active").id,
+        path: "active",
+        size: 100
       }
+    });
+    projection.setFieldProjection({
+      field: {
+        id: (0, import_schema.createFieldId)(),
+        path: "manager",
+        referencePath: "name"
+      },
+      props: {
+        property: "manager",
+        type: import_echo_schema4.TypeEnum.Ref,
+        format: import_echo_schema4.FormatEnum.Ref,
+        referenceSchema: contactSchema.typename,
+        title: "Manager"
+      }
+    });
+    if (initialRow) {
+      space.db.add((0, import_echo5.create)(contactSchema, {}));
     }
-    return extension2;
-  }, [
-    model,
-    editing,
-    fieldProjection,
-    handleClose
-  ]);
-  const getCellContent = (0, import_react7.useCallback)(() => {
-    if (model && editing) {
-      const value = model.getCellData((0, import_react_ui_grid3.parseCellIndex)(editing.index));
-      return value !== void 0 ? String(value) : "";
-    }
-  }, [
-    model,
-    editing
-  ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid3.GridCellEditor, {
-    extension,
-    getCellContent,
-    onBlur: handleBlur
-  });
-};
-var determineNavigationAxis = ({ key }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowDown":
-    case "Enter": {
-      return "row";
-    }
-    case "ArrowLeft":
-    case "ArrowRight":
-    case "Tab":
-      return "col";
+    return contactSchema;
   }
 };
-var determineNavigationDelta = ({ key, shift }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowLeft":
-      return -1;
-    case "ArrowDown":
-    case "ArrowRight":
-      return 1;
-  }
-  return shift ? -1 : 1;
+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",
+  sort: "data-table-sort-button"
 };
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
-var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
-var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
-var frozen = {
-  frozenRowsStart: 1,
-  frozenColsStart: 1,
-  frozenColsEnd: 1
+var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
+  const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
+  const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
 };
-var TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("relative border-bs !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);
+var addColumnButton = {
+  attr: BUTTON_IDENTIFIERS.newColumn,
+  icon: "ph--plus--regular",
+  render: ({ disabled }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.newColumn,
+      icon: addColumnButton.icon,
+      disabled,
+      data: {},
+      testId: "table-new-column-button"
+    });
+  },
+  getData: (_el) => ({
+    type: "newColumn"
+  })
 };
-var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAttention }, forwardedRef) => {
-  const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
-  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.table ? (0, import_echo.fullyQualifiedId)(model.table) : "table");
-  const { t } = (0, import_react_ui.useTranslation)(translationKey);
-  (0, import_react.useImperativeHandle)(forwardedRef, () => {
-    if (!model || !dxGrid) {
-      return {};
-    }
-    dxGrid.getCells = model.getCells.bind(model);
-    return {
-      update: (cell) => {
-        if (cell) {
-          dxGrid.updateIfWithinBounds(cell);
-        } else {
-          dxGrid.updateCells(true);
-        }
-      }
-    };
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleFocus = (0, import_react.useCallback)((increment, delta) => {
-    if (dxGrid) {
-      dxGrid.refocus(increment, delta);
-    }
-  }, [
-    dxGrid
-  ]);
-  const handleEnter = (0, import_react.useCallback)((cell) => {
-    if (model && cell.row === model.getRowCount() - 1) {
-      model.insertRow(cell.row);
-      if (dxGrid) {
-        requestAnimationFrame(() => {
-          dxGrid?.scrollToRow(cell.row + 1);
-          dxGrid?.refocus("row", 1);
-        });
-      }
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleKeyDown = (0, import_react.useCallback)((event) => {
-    const cell = (0, import_react_ui_grid.closestCell)(event.target);
-    if (!model || !cell) {
-      return;
-    }
-    switch (event.key) {
-      case "Backspace":
-      case "Delete": {
-        model.setCellData(cell, void 0);
-        break;
-      }
-    }
-  }, [
-    model
-  ]);
-  const handleAxisResize = (0, import_react.useCallback)((event) => {
-    if (event.axis === "col") {
-      const columnIndex = parseInt(event.index, 10);
-      model?.setColumnWidth(columnIndex, event.size);
-    }
-  }, [
-    model
-  ]);
-  const handleWheel = (0, import_react.useCallback)((event) => {
-    if (!ignoreAttention && !hasAttention) {
-      event.stopPropagation();
-    }
-  }, [
-    hasAttention,
-    ignoreAttention
-  ]);
-  const handleNewColumn = (0, import_react.useCallback)(() => {
-    const columns = model?.getColumnCount();
-    if (dxGrid && columns) {
-      dxGrid.scrollToColumn(columns - 1);
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleQuery = (0, import_react.useCallback)(async ({ field, props }, text) => {
-    if (model && props.referenceSchema && field.referencePath) {
-      const space = (0, import_echo.getSpace)(model.table);
-      (0, import_invariant.invariant)(space, void 0, {
-        F: __dxlog_file2,
-        L: 180,
-        S: void 0,
-        A: [
-          "space",
-          ""
-        ]
-      });
-      const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
-      if (schema) {
-        const { objects } = await space.db.query(import_echo.Filter.schema(schema)).run();
-        const options = objects.map((obj) => {
-          const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
-          if (!value || typeof value !== "string") {
-            return void 0;
-          }
-          return {
-            label: value,
-            data: obj
-          };
-        }).filter(import_util.isNotFalsy);
-        return [
-          ...options,
-          {
-            label: t("create new object label", {
-              text
-            }),
-            data: createOption(text)
-          }
-        ];
-      }
-    }
-    return [];
-  }, [
-    model
-  ]);
-  if (!model) {
-    return /* @__PURE__ */ import_react.default.createElement("span", {
-      role: "none",
-      className: "attention-surface"
+var columnSettingsButton = {
+  attr: BUTTON_IDENTIFIERS.columnSettings,
+  icon: "ph--caret-down--regular",
+  render: ({ fieldId }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.columnSettings,
+      icon: columnSettingsButton.icon,
+      data: {
+        "data-field-id": fieldId
+      },
+      testId: "table-column-settings-button"
     });
-  }
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
-    id: model.table.id ?? "table-grid"
-  }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
-    model,
-    onEnter: handleEnter,
-    onFocus: handleFocus,
-    onQuery: handleQuery
-  }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
-    onWheelCapture: handleWheel,
-    className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
-    frozen,
-    columns: model.columnMeta.value,
-    limitRows: model.getRowCount() ?? 0,
-    limitColumns: model.table.view?.fields?.length ?? 0,
-    onAxisResize: handleAxisResize,
-    onClick: model?.handleGridClick,
-    onKeyDown: handleKeyDown,
-    overscroll: "trap",
-    ref: setDxGrid
-  }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
-    model
-  }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
-    model
-  }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
-    model,
-    onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
-    model
-  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
-    model
-  }));
-});
-var Table = {
-  Root: TableRoot,
-  Main: TableMain
+  },
+  getData: (el) => ({
+    type: "columnSettings",
+    fieldId: el.getAttribute("data-field-id")
+  })
 };
-var buttonStyles = "min-bs-0 p-2";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
+var referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: "ph--link-simple-horizontal--regular",
+  render: ({ targetId, schemaId }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        "data-target-id": targetId,
+        "data-schema-id": schemaId
+      },
+      testId: "table-ref-cell-button"
+    });
+  },
+  getData: (el) => ({
+    type: "referencedCell",
+    targetId: el.getAttribute("data-target-id"),
+    schemaId: el.getAttribute("data-schema-id")
+  })
 };
-var ToolbarSeparator = () => /* @__PURE__ */ import_react9.default.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarButton = ({ icon, children, ...props }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Root, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Toolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Icon, {
-    icon,
-    size: 5
-  }), /* @__PURE__ */ import_react9.default.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Arrow, null))));
+var rowMenuButton = {
+  attr: BUTTON_IDENTIFIERS.rowMenu,
+  icon: "ph--dots-three--regular",
+  render: ({ rowIndex }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.rowMenu,
+      icon: rowMenuButton.icon,
+      data: {
+        "data-row-index": rowIndex.toString()
+      },
+      testId: "table-row-menu-button"
+    });
+  },
+  getData: (el) => ({
+    type: "rowMenu",
+    rowIndex: Number(el.getAttribute("data-row-index"))
+  })
 };
-var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.createContext)("Toolbar");
-var ToolbarRoot = ({ classNames, children, onAction }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Toolbar.Root, {
-    classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
-      classNames
-    ]
-  }, children));
+var sortButton = {
+  attr: BUTTON_IDENTIFIERS.sort,
+  icon: "ph--sort-ascending--regular",
+  render: ({ fieldId, direction }) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.sort,
+      icon: direction === "desc" ? "ph--sort-descending--regular" : "ph--sort-ascending--regular",
+      data: {
+        "data-field-id": fieldId,
+        "data-direction": direction ?? ""
+      },
+      testId: "table-sort-button",
+      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
+      // This is a bit hacky.
+      type: "secondary"
+    });
+  },
+  getData: (el) => ({
+    type: "sort",
+    fieldId: el.getAttribute("data-field-id"),
+    direction: el.getAttribute("data-direction")
+  })
 };
-var Editing = () => {
-  const { onAction } = useToolbarContext("Editing");
-  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
-    value: "add-row",
-    icon: "ph--plus--regular",
-    "data-testid": "table.toolbar.add-row",
-    onClick: () => onAction?.({
-      type: "add-row"
-    })
-  }, t("add row")));
+var tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
+  rowMenu: rowMenuButton,
+  sort: sortButton
 };
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
-    value: "comment",
-    icon: "ph--chat-text--regular",
-    "data-testid": "table.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    })
-  }, t("create comment")));
+var CONTROL_IDENTIFIERS = {
+  checkbox: "data-table-checkbox",
+  switch: "data-table-switch"
 };
-var Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator
+var BASE_CLASSES = {
+  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
+  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
 };
-var touch = (value) => value;
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = ({ space, table, initialRow = true }) => {
-  import_log2.log.info("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file3,
-    L: 32,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
-  const ContactSchema = (0, import_echo_schema5.TypedObject)({
-    typename: `example.com/type/${import_react_client2.PublicKey.random().truncate()}`,
-    version: "0.1.0"
-  })({
-    name: import_echo_schema5.S.optional(import_echo_schema5.S.String).annotations({
-      [import_echo_schema5.AST.TitleAnnotationId]: "Name"
-    }),
-    email: import_echo_schema5.S.optional(import_echo_schema5.Format.Email),
-    salary: import_echo_schema5.S.optional(import_echo_schema5.Format.Currency()).annotations({
-      [import_echo_schema5.AST.TitleAnnotationId]: "Salary"
-    })
-  });
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = (0, import_schema2.createView)({
-    name: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "email",
-      "salary"
-    ]
-  });
-  const projection = new import_schema2.ViewProjection(contactSchema, table.view);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.fields[2].id,
-      path: "salary",
-      size: 150
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: (0, import_schema2.createFieldId)(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: import_echo_schema5.TypeEnum.Ref,
-      format: import_echo_schema5.FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: "Manager"
-    }
-  });
-  if (initialRow) {
-    space.db.add((0, import_echo5.create)(contactSchema, {}));
-  }
-  return contactSchema;
+var renderAttributes = (data) => {
+  return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
 };
-var TABLE_ATTRS = {
-  referencedCell: "data-table-ref-cell-button",
-  columnSettings: "data-table-column-settings-button",
-  rowMenu: "data-table-row-menu-button",
-  newColumn: "data-table-new-column-button"
+var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
+  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}"/>`;
 };
-var ICONS = {
-  referencedCell: "ph--link-simple-horizontal--regular",
-  columnSettings: "ph--caret-down--regular",
-  rowMenu: "ph--dots-three--regular",
-  newColumn: "ph--plus--regular"
+var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.checkbox]: "",
+    "data-row-index": rowIndex.toString(),
+    ...header && {
+      "data-header": ""
+    }
+  };
+  return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
 };
-var createButtonHtml = ({ button, value = "", disabled = false, testId }) => {
-  const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+var renderSwitch = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
+  const attrs = {
+    [CONTROL_IDENTIFIERS.switch]: "",
+    "data-row-index": rowIndex.toString(),
+    "data-col-index": colIndex.toString()
+  };
+  return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
 };
-var tableButtons = {
-  referencedCell: {
-    attr: TABLE_ATTRS.referencedCell,
-    icon: ICONS.referencedCell,
-    render: ({ targetId, schemaId }) => createButtonHtml({
-      button: "referencedCell",
-      value: `${schemaId}#${targetId}`,
-      testId: "table-ref-cell-button"
-    })
-  },
-  columnSettings: {
-    attr: TABLE_ATTRS.columnSettings,
-    icon: ICONS.columnSettings,
-    render: ({ fieldId }) => createButtonHtml({
-      button: "columnSettings",
-      value: fieldId,
-      testId: "table-column-settings-button"
-    })
-  },
-  rowMenu: {
-    attr: TABLE_ATTRS.rowMenu,
-    icon: ICONS.rowMenu,
-    render: ({ rowIndex }) => createButtonHtml({
-      button: "rowMenu",
-      value: rowIndex.toString(),
-      testId: "table-row-menu-button"
+var tableControls = {
+  checkbox: {
+    attr: CONTROL_IDENTIFIERS.checkbox,
+    render: renderCheckbox,
+    getData: (el) => ({
+      type: "checkbox",
+      rowIndex: Number(el.getAttribute("data-row-index")),
+      header: el.hasAttribute("data-header")
     })
   },
-  addColumn: {
-    attr: TABLE_ATTRS.newColumn,
-    icon: ICONS.newColumn,
-    render: ({ disabled } = {}) => createButtonHtml({
-      button: "newColumn",
-      disabled,
-      testId: "table-new-column-button"
+  switch: {
+    attr: CONTROL_IDENTIFIERS.switch,
+    render: renderSwitch,
+    getData: (el) => ({
+      type: "switch",
+      rowIndex: Number(el.getAttribute("data-row-index")),
+      colIndex: Number(el.getAttribute("data-col-index"))
     })
   }
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
-var ModalController = class {
-  constructor() {
-    this._state = (0, import_signals_core2.signal)({
-      type: "closed"
-    });
-    this._triggerRef = {
-      current: null
-    };
-    this.handleClick = (event) => {
-      const target = event.target;
-      const rowButton = target.closest(`button[${tableButtons.rowMenu.attr}]`);
-      if (rowButton) {
-        this._triggerRef.current = rowButton;
-        this._state.value = {
-          type: "row",
-          rowIndex: Number(rowButton.getAttribute(tableButtons.rowMenu.attr))
-        };
-        return true;
+var SelectionModel = class extends import_context2.Resource {
+  constructor(_rows, _onSelectionChanged) {
+    super();
+    this._rows = _rows;
+    this._onSelectionChanged = _onSelectionChanged;
+    this._selection = (0, import_signals_core2.signal)(/* @__PURE__ */ new Set());
+    this._validSelectedIds = (0, import_signals_core2.computed)(() => {
+      const rows = this._rows.value;
+      if (!rows) {
+        return /* @__PURE__ */ new Set();
       }
-      const columnButton = target.closest(`button[${tableButtons.columnSettings.attr}]`);
-      if (columnButton) {
-        const fieldId = columnButton.getAttribute(tableButtons.columnSettings.attr);
-        this._triggerRef.current = columnButton;
-        this._state.value = {
-          type: "column",
-          fieldId
-        };
-        return true;
+      const validIds = new Set(rows.map((row) => row.id));
+      return new Set([
+        ...this._selection.value
+      ].filter((id) => validIds.has(id)));
+    });
+    this._hasSelection = (0, import_signals_core2.computed)(() => this._validSelectedIds.value.size > 0);
+    this._allSelected = (0, import_signals_core2.computed)(() => {
+      const rows = this._rows.value;
+      if (rows.length === 0) {
+        return false;
       }
-      const addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
-      if (addColumnButton) {
-        this._triggerRef.current = addColumnButton;
-        this._state.value = {
-          type: "columnSettings",
-          mode: {
-            type: "create"
-          }
-        };
-        return true;
+      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 {
+        newSelection.add(row.id);
       }
-      const refButton = target.closest(`button[${tableButtons.referencedCell.attr}]`);
-      if (refButton) {
-        this._triggerRef.current = refButton;
-        const [schemaId, targetId] = refButton.getAttribute(tableButtons.referencedCell.attr).split("#");
-        this._state.value = {
-          type: "refPanel",
-          targetId,
-          typename: schemaId
-        };
+      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;
+        }
       }
-      return false;
-    };
-    this.openColumnSettings = () => {
-      if (this._state.value.type === "column") {
-        const fieldId = this._state.value.fieldId;
-        requestAnimationFrame(() => {
-          this._state.value = {
-            type: "columnSettings",
-            mode: {
-              type: "edit",
-              fieldId
-            }
-          };
-        });
-      }
-    };
-    this.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
-      if (anchorCell) {
-        this._triggerRef.current = anchorCell;
-        this._state.value = {
-          type: "createRefPanel",
-          typename,
-          initialValues,
-          onCreate
-        };
-      } else {
-        import_log.log.warn("anchor cell not found while creating new ref", void 0, {
-          F: __dxlog_file4,
-          L: 119,
-          S: this,
-          C: (f, a) => f(...a)
-        });
-      }
-    };
-    this.close = () => {
-      this._state.value = {
-        type: "closed"
-      };
-    };
-  }
-  get state() {
-    return this._state;
-  }
-  get trigger() {
-    return this._triggerRef;
-  }
-};
-var SelectionModel = class extends import_context2.Resource {
-  constructor(_rows, _onSelectionChanged) {
-    super();
-    this._rows = _rows;
-    this._onSelectionChanged = _onSelectionChanged;
-    this._selection = (0, import_signals_core3.signal)(/* @__PURE__ */ new Set());
-    this._validSelectedIds = (0, import_signals_core3.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 = (0, import_signals_core3.computed)(() => this._validSelectedIds.value.size > 0);
-    this._allSelected = (0, import_signals_core3.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 {
-        newSelection.add(row.id);
-      }
-      this._selection.value = newSelection;
-    };
-    this.setSelection = (mode) => {
-      this._selection.value = mode === "all" ? new Set(this._rows.value.map((row) => row.id)) : /* @__PURE__ */ new Set();
     };
   }
   async _open() {
-    const selectionWatcher = (0, import_signals_core3.effect)(() => {
+    const selectionWatcher = (0, import_signals_core2.effect)(() => {
       touch(this._selection.value);
       this._onSelectionChanged?.();
     });
@@ -1060,22 +676,166 @@ var SelectionModel = class extends import_context2.Resource {
     return this._allSelected;
   }
 };
-var checkboxAttributes = {
-  checkbox: "data-table-checkbox",
-  header: "data-table-header"
-};
-var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
-  const baseClasses = "absolute inset-block-[6px] inline-end-[6px] ch-checkbox";
-  const { attributes } = tableControls.checkbox;
-  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""} data-testid="table-selection"/>`;
-};
-var tableControls = {
-  checkbox: {
-    attributes: checkboxAttributes,
-    render: renderCheckbox
+var TableSorting = class {
+  constructor(rows, _view, _projection) {
+    this._view = _view;
+    this._projection = _projection;
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._localSort = (0, import_signals_core3.signal)(void 0);
+    this._rows = rows;
+    this._isDirty = (0, import_signals_core3.computed)(() => {
+      const local = this._localSort.value;
+      const viewSort = this._view?.query.sort?.[0];
+      if (local?.type === "cleared") {
+        return viewSort !== void 0;
+      }
+      if (local?.type === "active") {
+        if (!viewSort) {
+          return true;
+        }
+        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
+      }
+      return false;
+    });
+    this.sortedRows = this.initialiseSortedRows();
+  }
+  /**
+  * @reactive
+  * @returns Local sort if present, falls back to view sort.
+  */
+  get sorting() {
+    const local = this._localSort.value;
+    if (local?.type === "cleared") {
+      return void 0;
+    }
+    if (local?.type === "active") {
+      return local.sort;
+    }
+    return this._view?.query.sort?.[0];
+  }
+  /**
+  * @reactive
+  * @returns Whether local sort differs from view sort.
+  */
+  get isDirty() {
+    return this._isDirty.value;
+  }
+  getDataIndex(displayIndex) {
+    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
+  }
+  setSort(fieldId, direction) {
+    this._localSort.value = {
+      type: "active",
+      sort: {
+        fieldId,
+        direction
+      }
+    };
+  }
+  toggleSort(fieldId) {
+    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+      return;
+    }
+    switch (this.sorting.direction) {
+      case "asc": {
+        this.setSort(fieldId, "desc");
+        break;
+      }
+      case "desc": {
+        this.setSort(fieldId, "asc");
+        break;
+      }
+    }
+  }
+  clearSort() {
+    this._localSort.value = {
+      type: "cleared"
+    };
+  }
+  save() {
+    if (this._view && this._localSort.value !== void 0) {
+      if (this._localSort.value.type === "active") {
+        this._view.query.sort = [
+          this._localSort.value.sort
+        ];
+      } else {
+        this._view.query.sort = [];
+      }
+      this._localSort.value = void 0;
+    }
+  }
+  //
+  // Initialisation.
+  //
+  initialiseSortedRows() {
+    return (0, import_signals_core3.computed)(() => {
+      this._displayToDataIndex.clear();
+      const sort = this.sorting;
+      if (!sort || !this._view) {
+        return this._rows.value;
+      }
+      const field = this._view.fields.find((f) => f.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+      const { props } = this._projection.getFieldProjection(field.id);
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const sortValue = this.getSortValue(props, field, item);
+        const isEmpty = !(props.type === import_echo_schema5.TypeEnum.Boolean) && (sortValue == null || sortValue === "");
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty
+        };
+      });
+      const ordered = (0, import_lodash.default)(dataWithIndices, [
+        "isEmpty",
+        "value"
+      ], [
+        "asc",
+        sort.direction
+      ]);
+      ordered.forEach(({ index: dataIndex }, displayIndex) => {
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
+      });
+      return ordered.map(({ item }) => item);
+    });
+  }
+  getSortValue(props, field, item) {
+    const { type, format } = props;
+    const value = (0, import_echo_schema5.getValue)(item, field.path);
+    if (type === import_echo_schema5.TypeEnum.Boolean) {
+      return !!value;
+    }
+    if (type === import_echo_schema5.TypeEnum.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+    if (format === import_echo_schema5.FormatEnum.SingleSelect) {
+      const options = props.options;
+      if (!options) {
+        return void 0;
+      }
+      const option = options.find((option2) => option2.id === value);
+      return option ? options.indexOf(option) : void 0;
+    }
+    if (format === import_echo_schema5.FormatEnum.Ref && field.referencePath) {
+      const refValue = (0, import_echo_schema5.getValue)(value.target, field.referencePath);
+      return refValue;
+    }
+    return (0, import_react_ui_form5.formatForDisplay)({
+      type,
+      format,
+      value
+    });
   }
 };
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/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";
 var TableModel = class extends import_context.Resource {
   constructor({ table, projection, sorting = [], pinnedRows = {
     top: [],
@@ -1093,203 +853,18 @@ var TableModel = class extends import_context.Resource {
         col: 0
       }
     });
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._sorting = (0, import_signals_core.signal)(void 0);
     this._rows = (0, import_signals_core.signal)([]);
-    this._modalController = new ModalController();
-    this.getCells = (range, plane) => {
-      switch (plane) {
-        case "grid": {
-          this._visibleRange.value = range;
-          return this.getMainGridCells(range);
-        }
-        case "frozenRowsStart": {
-          return this.getHeaderCells(range);
-        }
-        case "frozenColsStart": {
-          return this.getSelectionColumnCells(range);
-        }
-        case "frozenColsEnd": {
-          return this.getActionColumnCells(range);
-        }
-        case "fixedStartStart": {
-          return this.getSelectAllCell();
-        }
-        case "fixedStartEnd": {
-          return this.getNewColumnCell();
-        }
-        default: {
-          return {};
-        }
-      }
-    };
-    this.getMainGridCells = (range) => {
-      const cells = {};
-      const fields = this._table.view?.fields ?? [];
-      const addCell = (obj, field, colIndex, displayIndex) => {
-        const { props } = this._projection.getFieldProjection(field.id);
-        const cell = {
-          get value() {
-            const value = (0, import_echo_schema4.getValue)(obj, field.path);
-            if (value == null) {
-              return "";
-            }
-            switch (props.format) {
-              case import_echo_schema4.FormatEnum.Ref: {
-                if (!field.referencePath) {
-                  return "";
-                }
-                return (0, import_echo_schema4.getValue)(value, field.referencePath);
-              }
-              default: {
-                return (0, import_react_ui_form4.formatForDisplay)({
-                  type: props.type,
-                  format: props.format,
-                  value
-                });
-              }
-            }
-          }
-        };
-        const classes = [];
-        const formatClasses = (0, import_react_ui_form4.cellClassesForFieldType)({
-          type: props.type,
-          format: props.format
-        });
-        if (formatClasses) {
-          classes.push(formatClasses);
-        }
-        const rowSelectionClasses = (0, import_react_ui_form4.cellClassesForRowSelection)(this._selection.isObjectSelected(obj));
-        if (rowSelectionClasses) {
-          classes.push(rowSelectionClasses);
-        }
-        if (classes.length > 0) {
-          cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
-        }
-        if (cell.value && props.format === import_echo_schema4.FormatEnum.Ref && props.referenceSchema) {
-          const targetObj = (0, import_echo_schema4.getValue)(obj, field.path);
-          cell.accessoryHtml = tableButtons.referencedCell.render({
-            targetId: targetObj.id,
-            schemaId: props.referenceSchema
-          });
-        }
-        const idx = (0, import_react_ui_grid4.toPlaneCellIndex)({
-          col: colIndex,
-          row: displayIndex
-        });
-        cells[idx] = cell;
-      };
-      for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
-        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-          const field = fields[col];
-          if (!field) {
-            continue;
-          }
-          addCell(this._sortedRows.value[row], field, col, row);
-        }
-      }
-      return cells;
-    };
-    this.getHeaderCells = (range) => {
-      const cells = {};
-      const fields = this.table.view?.fields ?? [];
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const { field, props } = this._projection.getFieldProjection(fields[col].id);
-        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
-          col,
-          row: 0
-        })] = {
-          // TODO(burdon): Use same logic as form for fallback title.
-          value: props.title ?? field.path,
-          readonly: true,
-          resizeHandle: "col",
-          accessoryHtml: tableButtons.columnSettings.render({
-            fieldId: field.id
-          })
-        };
-      }
-      return cells;
-    };
-    this.getSelectionColumnCells = (range) => {
-      const cells = {};
-      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-        const isSelected = this._selection.isRowIndexSelected(row);
-        const classes = (0, import_react_ui_form4.cellClassesForRowSelection)(isSelected);
-        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
-          col: 0,
-          row
-        })] = {
-          value: "",
-          readonly: true,
-          className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
-          accessoryHtml: tableControls.checkbox.render({
-            rowIndex: row,
-            checked: isSelected
-          })
-        };
-      }
-      return cells;
-    };
-    this.getActionColumnCells = (range) => {
-      const cells = {};
-      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
-        const isSelected = this._selection.isRowIndexSelected(row);
-        const classes = (0, import_react_ui_form4.cellClassesForRowSelection)(isSelected);
-        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
-          col: 0,
-          row
-        })] = {
-          value: "",
-          readonly: true,
-          className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
-          accessoryHtml: tableButtons.rowMenu.render({
-            rowIndex: row
-          })
-        };
-      }
-      return cells;
-    };
-    this.getSelectAllCell = () => {
-      return {
-        [(0, import_react_ui_grid4.toPlaneCellIndex)({
-          col: 0,
-          row: 0
-        })]: {
-          value: "",
-          accessoryHtml: tableControls.checkbox.render({
-            rowIndex: 0,
-            header: true,
-            checked: this._selection.allRowsSeleted.value
-          }),
-          readonly: true
-        }
-      };
-    };
-    this.getNewColumnCell = () => {
-      return {
-        [(0, import_react_ui_grid4.toPlaneCellIndex)({
-          col: 0,
-          row: 0
-        })]: {
-          value: "",
-          accessoryHtml: tableButtons.addColumn.render({
-            disabled: (this._table.view?.fields?.length ?? 0) >= import_schema.VIEW_FIELD_LIMIT
-          }),
-          readonly: true
-        }
-      };
-    };
     this.setRows = (obj) => {
       this._rows.value = obj;
     };
     this.getRowCount = () => this._rows.value.length;
-    this.getColumnCount = () => this.table.view?.fields.length ?? 0;
+    this.getColumnCount = () => this.table.view?.target?.fields.length ?? 0;
     this.insertRow = (rowIndex) => {
-      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
       this._onInsertRow?.(row);
     };
     this.deleteRow = (rowIndex) => {
-      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const row = this._sorting.getDataIndex(rowIndex);
       const obj = this._rows.value[row];
       const objectsToDelete = [];
       if (this._selection.hasSelection.value) {
@@ -1301,23 +876,23 @@ var TableModel = class extends import_context.Resource {
       this._onDeleteRows?.(row, objectsToDelete);
     };
     this.getCellData = ({ col, row }) => {
-      const fields = this.table.view?.fields ?? [];
+      const fields = this.table.view?.target?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._displayToDataIndex.get(row) ?? row;
-      const value = (0, import_echo_schema4.getValue)(this._rows.value[dataIndex], field.path);
+      const dataIndex = this._sorting.getDataIndex(row);
+      const value = (0, import_echo_schema3.getValue)(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
       }
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case import_echo_schema4.FormatEnum.Ref: {
+        case import_echo_schema3.FormatEnum.Ref: {
           if (!field.referencePath) {
             return "";
           }
-          return (0, import_echo_schema4.getValue)(value, field.referencePath);
+          return (0, import_echo_schema3.getValue)(value.target, field.referencePath);
         }
         default: {
           return (0, import_react_ui_form4.formatForEditing)({
@@ -1329,20 +904,22 @@ var TableModel = class extends import_context.Resource {
       }
     };
     this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._displayToDataIndex.get(row) ?? row;
-      const fields = this.table.view?.fields ?? [];
+      const rowIdx = this._sorting.getDataIndex(row);
+      const fields = this.table.view?.target?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return;
       }
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case import_echo_schema4.FormatEnum.Ref: {
-          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, value);
+        case import_echo_schema3.FormatEnum.Ref: {
+          if ((0, import_live_object.isReactiveObject)(value)) {
+            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
+          }
           break;
         }
         default: {
-          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form4.parseValue)({
+          (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form4.parseValue)({
             type: props.type,
             format: props.format,
             value
@@ -1351,28 +928,13 @@ var TableModel = class extends import_context.Resource {
         }
       }
     };
-    this.handleGridClick = (event) => {
-      if (!this._modalController.handleClick(event)) {
-        const target = event.target;
-        const selectionCheckbox = target.closest(`input[${tableControls.checkbox.attributes.checkbox}]`);
-        if (selectionCheckbox) {
-          const isHeader = selectionCheckbox.hasAttribute(tableControls.checkbox.attributes.header);
-          if (isHeader) {
-            if (this._selection.allRowsSeleted.value) {
-              this._selection.setSelection("none");
-            } else {
-              this._selection.setSelection("all");
-            }
-          } else {
-            const rowIndex = Number(selectionCheckbox.getAttribute(tableControls.checkbox.attributes.checkbox));
-            this._selection.toggleSelectionForRowIndex(rowIndex);
-          }
-        }
-      }
-    };
     this._table = table;
     this._projection = projection;
-    this._sorting.value = sorting.at(0);
+    this._sorting = new TableSorting(this._rows, table.view?.target, projection);
+    if (sorting.length > 0) {
+      const [sort] = sorting;
+      this._sorting.setSort(sort.fieldId, sort.direction);
+    }
     this._pinnedRows = pinnedRows;
     this._onInsertRow = onInsertRow;
     this._onDeleteRows = onDeleteRows;
@@ -1386,13 +948,22 @@ var TableModel = class extends import_context.Resource {
   get projection() {
     return this._projection;
   }
+  get rows() {
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting;
+  }
   get pinnedRows() {
     return this._pinnedRows;
   }
   get columnMeta() {
-    (0, import_invariant3.invariant)(this._columnMeta, void 0, {
-      F: __dxlog_file5,
-      L: 126,
+    (0, import_invariant2.invariant)(this._columnMeta, void 0, {
+      F: __dxlog_file,
+      L: 117,
       S: this,
       A: [
         "this._columnMeta",
@@ -1401,28 +972,25 @@ var TableModel = class extends import_context.Resource {
     });
     return this._columnMeta;
   }
-  get sorting() {
-    return this._sorting.value;
-  }
-  get modalController() {
-    return this._modalController;
-  }
   get selection() {
     return this._selection;
   }
+  /** @reactive */
+  get isViewDirty() {
+    return this._sorting.isDirty;
+  }
   //
   // Initialisation
   //
   async _open() {
     this.initializeColumnMeta();
-    this.initializeSorting();
     this.initializeEffects();
-    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    this._selection = new SelectionModel(this._sorting.sortedRows, () => this._onRowOrderChanged?.());
     await this._selection.open(this._ctx);
   }
   initializeColumnMeta() {
     this._columnMeta = (0, import_signals_core.computed)(() => {
-      const fields = this._table.view?.fields ?? [];
+      const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
         {
@@ -1447,45 +1015,9 @@ var TableModel = class extends import_context.Resource {
       };
     });
   }
-  initializeSorting() {
-    this._sortedRows = (0, import_signals_core.computed)(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-      const field = this._table.view?.fields.find((field2) => field2.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const value = (0, import_echo_schema4.getValue)(item, field.path);
-        return {
-          item,
-          index,
-          value,
-          isEmpty: value == null || value === ""
-        };
-      });
-      const sorted = (0, import_lodash.default)(dataWithIndices, [
-        "isEmpty",
-        "value"
-      ], [
-        "asc",
-        sort.direction
-      ]);
-      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
-        const { index: dataIndex } = sorted[displayIndex];
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      }
-      return sorted.map(({ item }) => item);
-    });
-  }
   initializeEffects() {
     const rowOrderWatcher = (0, import_signals_core.effect)(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -1494,8 +1026,8 @@ var TableModel = class extends import_context.Resource {
       const rowEffects = [];
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push((0, import_signals_core.effect)(() => {
-          const obj = this._sortedRows.value[row];
-          this?._table?.view?.fields.forEach((field) => touch((0, import_echo_schema4.getValue)(obj, field.path)));
+          const obj = this._sorting.sortedRows.value[row];
+          this?._table?.view?.target?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
             col: start.col,
@@ -1507,6 +1039,19 @@ var TableModel = class extends import_context.Resource {
     });
     this._ctx.onDispose(rowEffectManager);
   }
+  /**
+  * Updates a cell's value using a transform function.
+  * @param {DxGridPlanePosition} position - The position of the cell to update.
+  * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
+  */
+  updateCellData({ col, row }, update) {
+    const dataRow = this._sorting.getDataIndex(row);
+    const fields = this.table.view?.target?.fields ?? [];
+    const field = fields[col];
+    const value = (0, import_echo_schema3.getValue)(this._rows.value[dataRow], field.path);
+    const updatedValue = update(value);
+    (0, import_echo_schema3.setValue)(this._rows.value[dataRow], field.path, updatedValue);
+  }
   //
   // Column Operations
   //
@@ -1514,11 +1059,8 @@ var TableModel = class extends import_context.Resource {
     if (!this.table.view) {
       return;
     }
-    const field = this.table.view.fields.find((field2) => field2.id === fieldId);
+    const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
@@ -1526,7 +1068,7 @@ var TableModel = class extends import_context.Resource {
   // Resize
   //
   setColumnWidth(columnIndex, width) {
-    const fields = this.table.view?.fields ?? [];
+    const fields = this.table.view?.target?.fields ?? [];
     if (columnIndex < fields.length) {
       const newWidth = Math.max(0, width);
       const field = fields[columnIndex];
@@ -1536,19 +1078,7 @@ var TableModel = class extends import_context.Resource {
     }
   }
   //
-  // Sorting
-  //
-  setSort(fieldId, direction) {
-    this._sorting.value = {
-      fieldId,
-      direction
-    };
-  }
-  clearSort() {
-    this._sorting.value = void 0;
-  }
-  //
-  // Pinning
+  // Pinning
   //
   // TODO(burdon): Change to setPinned(on/off).
   pinRow(rowIndex, side) {
@@ -1558,10 +1088,850 @@ var TableModel = class extends import_context.Resource {
     this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
     this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
   }
+  //
+  // View operations
+  //
+  saveView() {
+    this._sorting.save();
+  }
+};
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
+var ModalController = class {
+  constructor() {
+    this._state = (0, import_signals_core4.signal)({
+      type: "closed"
+    });
+    this._triggerRef = {
+      current: null
+    };
+    this.setTrigger = (trigger) => {
+      this._triggerRef.current = trigger;
+    };
+    this.showRowMenu = (rowIndex) => {
+      this._state.value = {
+        type: "row",
+        rowIndex
+      };
+    };
+    this.showColumnMenu = (fieldId) => {
+      this._state.value = {
+        type: "column",
+        fieldId
+      };
+    };
+    this.showColumnCreator = () => {
+      this._state.value = {
+        type: "columnSettings",
+        mode: {
+          type: "create"
+        }
+      };
+    };
+    this.showReferencePanel = (targetId, schemaId) => {
+      this._state.value = {
+        type: "refPanel",
+        targetId,
+        typename: schemaId
+      };
+    };
+    this.openColumnSettings = () => {
+      if (this._state.value.type === "column") {
+        const fieldId = this._state.value.fieldId;
+        requestAnimationFrame(() => {
+          this._state.value = {
+            type: "columnSettings",
+            mode: {
+              type: "edit",
+              fieldId
+            }
+          };
+        });
+      }
+    };
+    this.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
+      if (anchorCell) {
+        this._triggerRef.current = anchorCell;
+        this._state.value = {
+          type: "createRefPanel",
+          typename,
+          initialValues,
+          onCreate
+        };
+      } else {
+        import_log.log.warn("anchor cell not found while creating new ref", void 0, {
+          F: __dxlog_file2,
+          L: 86,
+          S: this,
+          C: (f, a) => f(...a)
+        });
+      }
+    };
+    this.close = () => {
+      this._state.value = {
+        type: "closed"
+      };
+    };
+  }
+  get state() {
+    return this._state;
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
+};
+var TablePresentation = class {
+  constructor(model, _visibleRange = (0, import_signals_core5.signal)({
+    start: {
+      row: 0,
+      col: 0
+    },
+    end: {
+      row: 0,
+      col: 0
+    }
+  })) {
+    this.model = model;
+    this._visibleRange = _visibleRange;
+  }
+  getCells(range, plane) {
+    switch (plane) {
+      case "grid":
+        this._visibleRange.value = range;
+        return this.getMainGridCells(range);
+      case "frozenRowsStart":
+        return this.getHeaderCells(range);
+      case "frozenColsStart":
+        return this.getSelectionColumnCells(range);
+      case "frozenColsEnd":
+        return this.getActionColumnCells(range);
+      case "fixedStartStart":
+        return this.getSelectAllCell();
+      case "fixedStartEnd":
+        return this.getNewColumnCell();
+      default:
+        return {};
+    }
+  }
+  getMainGridCells(range) {
+    const cells = {};
+    const fields = this.model.table.view?.target?.fields ?? [];
+    const addCell = (obj, field, colIndex, displayIndex) => {
+      const { props } = this.model.projection.getFieldProjection(field.id);
+      const cell = {
+        get value() {
+          const value = (0, import_echo_schema6.getValue)(obj, field.path);
+          if (value == null) {
+            return "";
+          }
+          switch (props.format) {
+            case import_echo_schema6.FormatEnum.Boolean:
+            case import_echo_schema6.FormatEnum.SingleSelect: {
+              return "";
+            }
+            case import_echo_schema6.FormatEnum.Ref: {
+              if (!field.referencePath) {
+                return "";
+              }
+              return (0, import_echo_schema6.getValue)(value.target, field.referencePath);
+            }
+            default: {
+              return (0, import_react_ui_form6.formatForDisplay)({
+                type: props.type,
+                format: props.format,
+                value
+              });
+            }
+          }
+        }
+      };
+      const classes = [];
+      const formatClasses = (0, import_react_ui_form6.cellClassesForFieldType)({
+        type: props.type,
+        format: props.format
+      });
+      if (formatClasses) {
+        classes.push(formatClasses);
+      }
+      const rowSelectionClasses = (0, import_react_ui_form6.cellClassesForRowSelection)(this.model.selection.isObjectSelected(obj));
+      if (rowSelectionClasses) {
+        classes.push(rowSelectionClasses);
+      }
+      if (classes.length > 0) {
+        cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
+      }
+      if (props.format === import_echo_schema6.FormatEnum.Ref && props.referenceSchema) {
+        const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
+        if (targetObj) {
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
+        }
+      }
+      if (props.format === import_echo_schema6.FormatEnum.Boolean) {
+        const value = (0, import_echo_schema6.getValue)(obj, field.path);
+        cell.accessoryHtml = tableControls.switch.render({
+          colIndex,
+          rowIndex: displayIndex,
+          checked: value ?? false
+        });
+        cell.readonly = true;
+      }
+      if (props.format === import_echo_schema6.FormatEnum.SingleSelect) {
+        const value = (0, import_echo_schema6.getValue)(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>`;
+          }
+        }
+      }
+      const idx = (0, import_react_ui_grid3.toPlaneCellIndex)({
+        col: colIndex,
+        row: displayIndex
+      });
+      cells[idx] = cell;
+    };
+    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;
+        }
+        addCell(this.model.rows.value[row], field, col, row);
+      }
+    }
+    return cells;
+  }
+  getHeaderCells(range) {
+    const cells = {};
+    const fields = this.model.table.view?.target?.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 sorting = this.model.sorting?.sorting;
+      const direction = sorting?.fieldId === field.id ? sorting.direction : void 0;
+      cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
+        col,
+        row: 0
+      })] = {
+        // TODO(burdon): Use same logic as form for fallback title.
+        value: props.title ?? field.path,
+        readonly: true,
+        resizeHandle: "col",
+        accessoryHtml: `
+          ${direction !== void 0 ? tableButtons.sort.render({
+          fieldId: field.id,
+          direction
+        }) : ""}
+          ${tableButtons.columnSettings.render({
+          fieldId: field.id
+        })}
+        `,
+        className: "!bg-gridHeader"
+      };
+    }
+    return cells;
+  }
+  getSelectionColumnCells(range) {
+    const cells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: row,
+          checked: isSelected
+        })
+      };
+    }
+    return cells;
+  }
+  getActionColumnCells(range) {
+    const cells = {};
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      const isSelected = this.model.selection.isRowIndexSelected(row);
+      const classes = (0, import_react_ui_form6.cellClassesForRowSelection)(isSelected);
+      cells[(0, import_react_ui_grid3.toPlaneCellIndex)({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: classes ? (0, import_react_ui_theme2.mx)(classes) : void 0,
+        accessoryHtml: tableButtons.rowMenu.render({
+          rowIndex: row
+        })
+      };
+    }
+    return cells;
+  }
+  getSelectAllCell() {
+    return {
+      [(0, import_react_ui_grid3.toPlaneCellIndex)({
+        col: 0,
+        row: 0
+      })]: {
+        accessoryHtml: tableControls.checkbox.render({
+          rowIndex: 0,
+          header: true,
+          checked: this.model.selection.allRowsSeleted.value
+        }),
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
+      }
+    };
+  }
+  getNewColumnCell() {
+    return {
+      [(0, import_react_ui_grid3.toPlaneCellIndex)({
+        col: 0,
+        row: 0
+      })]: {
+        accessoryHtml: tableButtons.addColumn.render({
+          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
+        }),
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
+      }
+    };
+  }
+};
+var completion = ({ debug, onQuery, onMatch }) => {
+  return [
+    import_view.EditorView.theme({
+      ".cm-completionDialog": {
+        width: "var(--dx-gridCellWidth)"
+      }
+    }),
+    (0, import_autocomplete.autocompletion)({
+      icons: false,
+      activateOnTyping: true,
+      closeOnBlur: !debug,
+      override: [
+        async (context) => {
+          const text = context.state.doc.toString();
+          return {
+            from: 0,
+            options: await onQuery(text)
+          };
+        }
+      ],
+      // TODO(burdon): Consts from grid (to line-up with grid).
+      tooltipClass: () => "cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]",
+      optionClass: () => "flex h-[33px] items-center"
+    }),
+    // Check for accepted completion metadata in the transaction.
+    import_view.EditorView.updateListener.of((update) => {
+      update.transactions.forEach((tr) => {
+        const completion2 = tr.annotation(import_autocomplete.pickedCompletion);
+        if (completion2) {
+          onMatch(completion2.data);
+        }
+      });
+    })
+  ];
+};
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var newValue = Symbol.for("newValue");
+var createOption = (text) => ({
+  [newValue]: true,
+  text
+});
+var isCreateOption = (data) => typeof data === "object" && data[newValue];
+var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
+  const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
+  const suppressNextBlur = (0, import_react7.useRef)(false);
+  const fieldProjection = (0, import_react7.useMemo)(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    (0, import_invariant3.invariant)(fieldProjection2, void 0, {
+      F: __dxlog_file3,
+      L: 67,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  const handleEnter = (0, import_react7.useCallback)((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+    model.setCellData(cell, value);
+    onEnter?.(cell);
+    onFocus?.();
+    setEditing(null);
+  }, [
+    model,
+    editing
+  ]);
+  const handleBlur = (0, import_react7.useCallback)((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    if (suppressNextBlur.current) {
+      suppressNextBlur.current = false;
+      return;
+    }
+    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+    if (value !== void 0) {
+      model.setCellData(cell, value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const handleClose = (0, import_react7.useCallback)((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const extension = (0, import_react7.useMemo)(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extension2 = [
+      (0, import_react_ui_grid4.editorKeys)({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case import_echo_schema7.FormatEnum.Ref: {
+          extension2.push([
+            completion({
+              onQuery: (text) => onQuery(fieldProjection, text),
+              onMatch: (data) => {
+                if (model && editing && modals) {
+                  if (isCreateOption(data)) {
+                    const { field, props } = fieldProjection;
+                    if (props.referenceSchema) {
+                      suppressNextBlur.current = true;
+                      modals.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid4.cellQuery)(editing.index, gridId)), {
+                        [field.referencePath]: data.text
+                      }, (data2) => {
+                        handleEnter(data2);
+                      });
+                    }
+                  } else {
+                    handleEnter(data);
+                  }
+                }
+              }
+            })
+          ]);
+          break;
+        }
+      }
+    }
+    return extension2;
+  }, [
+    model,
+    modals,
+    editing,
+    fieldProjection,
+    handleClose
+  ]);
+  const getCellContent = (0, import_react7.useCallback)(() => {
+    if (model && editing) {
+      const value = model.getCellData((0, import_react_ui_grid4.parseCellIndex)(editing.index));
+      return value !== void 0 ? String(value) : "";
+    }
+  }, [
+    model,
+    editing
+  ]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid4.GridCellEditor, {
+    extension,
+    getCellContent,
+    onBlur: handleBlur
+  });
+};
+var determineNavigationAxis = ({ key }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowDown":
+    case "Enter": {
+      return "row";
+    }
+    case "ArrowLeft":
+    case "ArrowRight":
+    case "Tab":
+      return "col";
+  }
+};
+var determineNavigationDelta = ({ key, shift }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowLeft":
+      return -1;
+    case "ArrowDown":
+    case "ArrowRight":
+      return 1;
+  }
+  return shift ? -1 : 1;
+};
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
+var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
+var frozen = {
+  frozenRowsStart: 1,
+  frozenColsStart: 1,
+  frozenColsEnd: 1
+};
+var TableRoot = ({ children, role }) => {
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme.mx)("relative border-bs !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);
+};
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
+  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.table ? (0, import_echo.fullyQualifiedId)(model.table) : "table");
+  const { t } = (0, import_react_ui.useTranslation)(translationKey);
+  const modals = (0, import_react.useMemo)(() => new ModalController(), []);
+  (0, import_react.useImperativeHandle)(forwardedRef, () => {
+    if (!presentation || !dxGrid) {
+      return {};
+    }
+    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
+    return {
+      update: (cell) => {
+        if (cell) {
+          dxGrid.updateIfWithinBounds(cell);
+        } else {
+          dxGrid.updateCells(true);
+          dxGrid.requestUpdate();
+        }
+      }
+    };
+  }, [
+    presentation,
+    dxGrid
+  ]);
+  const handleGridClick = (0, import_react.useCallback)((event) => {
+    if (!modals) {
+      return;
+    }
+    const buttonSelector = Object.values(tableButtons).map((button) => `button[${button.attr}]`).join(",");
+    const tableButtonElement = event.target.closest(buttonSelector);
+    if (tableButtonElement) {
+      const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+      if (!button) {
+        return;
+      }
+      modals.setTrigger(tableButtonElement);
+      const data = button.getData(tableButtonElement);
+      switch (data.type) {
+        case "rowMenu": {
+          modals.showRowMenu(data.rowIndex);
+          break;
+        }
+        case "columnSettings": {
+          modals.showColumnMenu(data.fieldId);
+          break;
+        }
+        case "newColumn": {
+          modals.showColumnCreator();
+          break;
+        }
+        case "referencedCell": {
+          modals.showReferencePanel(data.targetId, data.schemaId);
+          break;
+        }
+        case "sort": {
+          model?.sorting?.toggleSort(data.fieldId);
+          break;
+        }
+      }
+      return;
+    }
+    const controlSelector = Object.values(tableControls).map((control) => `input[${control.attr}]`).join(",");
+    const controlElement = event.target.closest(controlSelector);
+    if (controlElement) {
+      const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+      if (!control) {
+        return;
+      }
+      const data = control.getData(controlElement);
+      switch (data.type) {
+        case "checkbox": {
+          if (data.header) {
+            model?.selection.setSelection(model.selection.allRowsSeleted.value ? "none" : "all");
+          } else {
+            model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+          }
+          break;
+        }
+        case "switch": {
+          if (model) {
+            model.updateCellData({
+              row: data.rowIndex,
+              col: data.colIndex
+            }, (value) => !value);
+          }
+          break;
+        }
+      }
+    }
+  }, [
+    model,
+    modals
+  ]);
+  const handleFocus = (0, import_react.useCallback)((increment, delta) => {
+    if (dxGrid) {
+      dxGrid.refocus(increment, delta);
+    }
+  }, [
+    dxGrid
+  ]);
+  const handleEnter = (0, import_react.useCallback)((cell) => {
+    if (model && cell.row === model.getRowCount() - 1) {
+      model.insertRow(cell.row);
+      if (dxGrid) {
+        requestAnimationFrame(() => {
+          dxGrid?.scrollToRow(cell.row + 1);
+          dxGrid?.refocus("row", 1);
+        });
+      }
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    const cell = (0, import_react_ui_grid.closestCell)(event.target);
+    if (!model || !cell) {
+      return;
+    }
+    switch (event.key) {
+      case "Backspace":
+      case "Delete": {
+        model.setCellData(cell, void 0);
+        break;
+      }
+    }
+  }, [
+    model
+  ]);
+  const handleAxisResize = (0, import_react.useCallback)((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
+  ]);
+  const handleWheel = (0, import_react.useCallback)((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const handleNewColumn = (0, import_react.useCallback)(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleQuery = (0, import_react.useCallback)(async ({ field, props }, text) => {
+    if (model && props.referenceSchema && field.referencePath) {
+      const space = (0, import_echo.getSpace)(model.table);
+      (0, import_invariant.invariant)(space, void 0, {
+        F: __dxlog_file4,
+        L: 264,
+        S: void 0,
+        A: [
+          "space",
+          ""
+        ]
+      });
+      const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+      if (schema) {
+        const { objects } = await space.db.query(import_echo.Filter.schema(schema)).run();
+        const options = objects.map((obj) => {
+          const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
+          if (!value || typeof value !== "string") {
+            return void 0;
+          }
+          return {
+            label: value,
+            data: obj
+          };
+        }).filter(import_util.isNotFalsy);
+        return [
+          ...options,
+          {
+            label: t("create new object label", {
+              text
+            }),
+            data: createOption(text)
+          }
+        ];
+      }
+    }
+    return [];
+  }, [
+    model
+  ]);
+  if (!model || !modals) {
+    return /* @__PURE__ */ import_react.default.createElement("span", {
+      role: "none",
+      className: "attention-surface"
+    });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
+    id: model.table.id ?? "table-grid"
+  }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
+    model,
+    modals,
+    onEnter: handleEnter,
+    onFocus: handleFocus,
+    onQuery: handleQuery
+  }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
+    onWheelCapture: handleWheel,
+    className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
+    frozen,
+    columns: model.columnMeta.value,
+    limitRows: model.getRowCount() ?? 0,
+    limitColumns: model.table.view?.target?.fields?.length ?? 0,
+    onAxisResize: handleAxisResize,
+    onClick: handleGridClick,
+    onKeyDown: handleKeyDown,
+    overscroll: "trap",
+    ref: setDxGrid
+  }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
+    model,
+    modals,
+    onNewColumn: handleNewColumn
+  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
+    model,
+    modals
+  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
+    model,
+    modals
+  }));
+});
+var Table = {
+  Root: TableRoot,
+  Main: TableMain
+};
+var createTableToolbarActions = (state) => {
+  const add = (0, import_react_ui_menu.createMenuAction)("add-row", {
+    type: "add-row",
+    icon: "ph--plus--regular",
+    label: [
+      "add row",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.add-row"
+  });
+  const save = (0, import_react_ui_menu.createMenuAction)("save-view", {
+    type: "save-view",
+    icon: "ph--floppy-disk--regular",
+    label: [
+      "save view label",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.save-view",
+    iconOnly: false,
+    hidden: !state.viewDirty
+  });
+  const gap = (0, import_react_ui_menu.createGapSeparator)();
+  const comment = (0, import_react_ui_menu.createMenuAction)("comment", {
+    type: "comment",
+    icon: "ph--chat-text--regular",
+    label: [
+      "create comment",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.comment"
+  });
+  const nodes = [
+    add,
+    save,
+    ...gap.nodes,
+    comment
+  ];
+  return {
+    nodes,
+    edges: nodes.map(({ id: target }) => ({
+      source: "root",
+      target
+    }))
+  };
+};
+var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
+  const state = (0, import_react8.useMemo)(() => (0, import_live_object2.create)({
+    viewDirty
+  }), []);
+  const actionsCreator = (0, import_react8.useCallback)(() => createTableToolbarActions(state), [
+    state
+  ]);
+  const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.MenuProvider, {
+    ...menu,
+    attendableId,
+    onAction
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    classNames
+  }));
 };
 var useTableModel = ({ objects, table, projection, ...props }) => {
-  const [model, setModel] = (0, import_react10.useState)();
-  (0, import_react10.useEffect)(() => {
+  const [model, setModel] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
     if (!table || !projection) {
       return;
     }
@@ -1583,7 +1953,7 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     table,
     projection
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (objects) {
       model?.setRows(objects);
     }
@@ -1595,15 +1965,22 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUTTON_IDENTIFIERS,
+  CONTROL_IDENTIFIERS,
+  ModalController,
   Table,
+  TableModel,
+  TablePresentation,
   TableSchema,
+  TableToolbar,
   TableType,
-  Toolbar,
   initializeTable,
+  renderCheckbox,
+  renderSwitch,
   tableButtons,
+  tableControls,
   touch,
   translations,
-  useTableModel,
-  useToolbarContext
+  useTableModel
 });
 //# sourceMappingURL=index.cjs.map