@dxos/react-ui-table 0.7.4 → 0.7.5-labs.401163d

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-IYCSJDMB.mjs";
+} from "./chunk-3FR6NHPD.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -17,7 +17,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",
@@ -28,55 +28,56 @@ 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"
       }
     }
   }
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2 } from "react";
-import { getValue } from "@dxos/echo-schema";
-import { invariant as invariant2 } from "@dxos/invariant";
+import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4 } from "react";
+import { getValue as getValue4 } from "@dxos/echo-schema";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { Filter, getSpace as getSpace4, fullyQualifiedId } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell } from "@dxos/react-ui-grid";
-import { mx } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 import { isNotFalsy } from "@dxos/util";
 
 // packages/ui/react-ui-table/src/components/Table/ColumnActionsMenu.tsx
 import React from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
-var ColumnActionsMenu = ({ model }) => {
+var ColumnActionsMenu = ({ model, modals }) => {
   const { t } = 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__ */ React.createElement(DropdownMenu.Root, {
     modal: false,
-    open: state?.type === "column",
-    onOpenChange: model.modalController.close
+    open: true,
+    onOpenChange: modals.close
   }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React.createElement(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__ */ React.createElement(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__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
-    onClick: () => model.clearSort()
+    onClick: () => model.sorting?.clearSort()
   }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
   }, t("column action delete")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
     "data-testid": "column-settings",
-    onClick: () => model.modalController.openColumnSettings()
+    onClick: () => modals.openColumnSettings()
   }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
 };
 
@@ -85,9 +86,9 @@ import React2, { useCallback, useEffect, useMemo, useState } from "react";
 import { getSpace } from "@dxos/react-client/echo";
 import { DropdownMenu as DropdownMenu2 } from "@dxos/react-ui";
 import { FieldEditor } from "@dxos/react-ui-form";
-var ColumnSettings = ({ model, onNewColumn }) => {
+var ColumnSettings = ({ model, modals, onNewColumn }) => {
   const [newField, setNewField] = useState();
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
   const space = getSpace(model?.table);
   useEffect(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
@@ -106,19 +107,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 = useCallback(() => {
-    model?.modalController.close();
+    modals.close();
   }, [
-    model?.modalController
+    modals
   ]);
   const handleCancel = useCallback(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
@@ -129,18 +130,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__ */ React2.createElement(DropdownMenu2.Root, {
     modal: false,
     open: state?.type === "columnSettings"
   }, /* @__PURE__ */ React2.createElement(DropdownMenu2.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ React2.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu2.Content, {
     classNames: "md:is-64"
   }, /* @__PURE__ */ React2.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
-    view: model.table.view,
+    view: model.table.view.target,
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
@@ -156,15 +157,17 @@ import { create, getSpace as getSpace2 } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
 import { useGridContext } from "@dxos/react-ui-grid";
-var CreateRefPanel = ({ model, __gridScope }) => {
+var CreateRefPanel = ({ model, modals, __gridScope }) => {
   const { id: gridId } = useGridContext("TableCellEditor", __gridScope);
   const space = getSpace2(model?.table);
-  const state = model?.modalController.state.value;
+  const state = modals.state.value;
   const schema = useMemo2(() => {
     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 = S.omit("id");
       return omit(schema2);
@@ -177,23 +180,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(create(schema2, values));
       state.onCreate?.(obj);
     }
-    void model.modalController.close();
+    void modals.close();
   }, [
-    model?.modalController,
+    modals,
     space,
     state
   ]);
   const handleCancel = useCallback2(() => {
     if (model) {
-      model.modalController.close();
+      modals.close();
     }
   }, [
-    model?.modalController
+    modals
   ]);
   if (!model?.table?.view || !model.projection) {
     return null;
@@ -203,11 +208,11 @@ var CreateRefPanel = ({ model, __gridScope }) => {
     open: state?.type === "createRefPanel" && !!schema,
     onOpenChange: (nextOpen) => {
       if (model && !nextOpen) {
-        return model.modalController.close();
+        return modals.close();
       }
     }
   }, /* @__PURE__ */ React3.createElement(Popover.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(Popover.Content, {
     classNames: "md:is-64",
     "data-grid": gridId
@@ -231,24 +236,24 @@ var getRefTargetObj = (space, id) => {
     return void 0;
   }
 };
-var RefPanel = ({ model }) => {
-  const state = model?.modalController.state.value;
-  const space = getSpace3(model?.table);
+var RefPanel = ({ model, modals }) => {
+  const state = modals.state.value;
+  const space = getSpace3(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__ */ React4.createElement(Popover2.Root, {
     modal: false,
     open: state?.type === "refPanel" && !!targetObj && !!schema,
     onOpenChange: (nextOpen) => {
-      if (model && !nextOpen) {
-        return model.modalController.close();
+      if (!nextOpen) {
+        return modals.close();
       }
     }
   }, /* @__PURE__ */ React4.createElement(Popover2.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, {
     classNames: "md:is-64"
   }, targetObj && schema && /* @__PURE__ */ React4.createElement(Form2, {
@@ -261,762 +266,319 @@ var RefPanel = ({ model }) => {
 // packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
 import React5 from "react";
 import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var RowActionsMenu = ({ model }) => {
+var RowActionsMenu = ({ model, modals }) => {
   const { t } = useTranslation2(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__ */ React5.createElement(DropdownMenu3.Root, {
     modal: false,
     open: true,
-    onOpenChange: model.modalController.close
+    onOpenChange: modals.close
   }, /* @__PURE__ */ React5.createElement(DropdownMenu3.VirtualTrigger, {
-    virtualRef: model.modalController.trigger
+    virtualRef: modals.trigger
   }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
   }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React5.createElement(DropdownMenu3.Arrow, null)));
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
-import { FormatEnum } from "@dxos/echo-schema";
+// packages/ui/react-ui-table/src/model/table-model.ts
+import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
+import { Resource as Resource2 } from "@dxos/context";
+import { FormatEnum as FormatEnum3, getValue as getValue2, setValue } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
+import { isReactiveObject, makeRef as makeRef2 } from "@dxos/live-object";
+import { PublicKey as PublicKey2 } from "@dxos/react-client";
+import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
-import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
-import { EditorView } from "@codemirror/view";
-var completion = ({ debug, onQuery, onMatch }) => {
-  return [
-    EditorView.theme({
-      ".cm-completionDialog": {
-        width: "var(--dx-gridCellWidth)"
-      }
-    }),
-    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.
-    EditorView.updateListener.of((update) => {
-      update.transactions.forEach((tr) => {
-        const completion2 = tr.annotation(pickedCompletion);
-        if (completion2) {
-          onMatch(completion2.data);
-        }
-      });
-    })
-  ];
-};
+// packages/ui/react-ui-table/src/model/selection-model.ts
+import { computed, effect, signal } from "@preact/signals-core";
+import { Resource } from "@dxos/context";
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-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 } = useGridContext2("TableCellEditor", __gridScope);
-  const suppressNextBlur = useRef(false);
-  const fieldProjection = useMemo3(() => {
-    if (!model || !editing) {
-      return;
+// packages/ui/react-ui-table/src/util/signals.ts
+var touch = (value) => value;
+
+// packages/ui/react-ui-table/src/util/table.ts
+import { AST, Format, FormatEnum, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { PublicKey } from "@dxos/react-client";
+import { create as create2, makeRef } from "@dxos/react-client/echo";
+import { createFieldId, createView, getSchemaProperties, ViewProjection } from "@dxos/schema";
+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 } = parseCellIndex(editing.index);
-    const field = model.projection.view.fields[col];
-    const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant(fieldProjection2, void 0, {
-      F: __dxlog_file,
-      L: 65,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
+    const fields = getSchemaProperties(schema.ast).filter((prop) => prop.type !== "object" || prop.format === FormatEnum.Ref).map((prop) => prop.name);
+    table.view = makeRef(createView({
+      // TODO(ZaymonFC): Don't hardcode name?
+      name: "View",
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema,
+      fields
+    }));
+    return schema;
+  } else {
+    const ContactSchema = TypedObject({
+      typename: `example.com/type/${PublicKey.random().truncate()}`,
+      version: "0.1.0"
+    })({
+      name: S2.optional(S2.String).annotations({
+        [AST.TitleAnnotationId]: "Name"
+      }),
+      active: S2.optional(S2.Boolean),
+      email: S2.optional(Format.Email),
+      salary: S2.optional(Format.Currency()).annotations({
+        [AST.TitleAnnotationId]: "Salary"
+      })
+    });
+    const [contactSchema] = await space.db.schemaRegistry.register([
+      ContactSchema
+    ]);
+    table.view = makeRef(createView({
+      name: "View",
+      typename: contactSchema.typename,
+      jsonSchema: contactSchema.jsonSchema,
+      fields: [
+        "name",
+        "email",
+        "salary",
+        "active"
       ]
+    }));
+    const projection = new 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 = useCallback3((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    const cell = parseCellIndex(editing.index);
-    model.setCellData(cell, value);
-    onEnter?.(cell);
-    onFocus?.();
-    setEditing(null);
-  }, [
-    model,
-    editing
-  ]);
-  const handleBlur = useCallback3((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    if (suppressNextBlur.current) {
-      suppressNextBlur.current = false;
-      return;
-    }
-    const cell = parseCellIndex(editing.index);
-    if (value !== void 0) {
-      model.setCellData(cell, value);
-    }
-  }, [
-    model,
-    editing
-  ]);
-  const handleClose = useCallback3((value, event) => {
-    if (!model || !editing || !fieldProjection) {
-      return;
-    }
-    const cell = parseCellIndex(editing.index);
-    onEnter?.(cell);
-    if (event && onFocus) {
-      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
-    }
-  }, [
-    model,
-    editing,
-    onFocus,
-    onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
-  ]);
-  const extension = useMemo3(() => {
-    if (!fieldProjection) {
-      return [];
-    }
-    const extension2 = [
-      editorKeys({
-        onClose: handleClose,
-        ...editing?.initialContent && {
-          onNav: handleClose
-        }
-      })
-    ];
-    if (onQuery) {
-      switch (fieldProjection.props.format) {
-        case 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(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: createFieldId(),
+        path: "manager",
+        referencePath: "name"
+      },
+      props: {
+        property: "manager",
+        type: TypeEnum.Ref,
+        format: FormatEnum.Ref,
+        referenceSchema: contactSchema.typename,
+        title: "Manager"
+      }
+    });
+    if (initialRow) {
+      space.db.add(create2(contactSchema, {}));
     }
-    return extension2;
-  }, [
-    model,
-    editing,
-    fieldProjection,
-    handleClose
-  ]);
-  const getCellContent = useCallback3(() => {
-    if (model && editing) {
-      const value = model.getCellData(parseCellIndex(editing.index));
-      return value !== void 0 ? String(value) : "";
-    }
-  }, [
-    model,
-    editing
-  ]);
-  return /* @__PURE__ */ React6.createElement(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 contactSchema;
   }
-  return shift ? -1 : 1;
 };
 
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
-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
+// packages/ui/react-ui-table/src/util/table-buttons.ts
+var BUTTON_IDENTIFIERS = {
+  columnSettings: "data-table-column-settings-button",
+  newColumn: "data-table-new-column-button",
+  referencedCell: "data-table-ref-cell-button",
+  rowMenu: "data-table-row-menu-button",
+  sort: "data-table-sort-button"
 };
-var TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: 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 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 TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwardedRef) => {
-  const [dxGrid, setDxGrid] = useState2(null);
-  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
-  const { t } = useTranslation3(translationKey);
-  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 = useCallback4((increment, delta) => {
-    if (dxGrid) {
-      dxGrid.refocus(increment, delta);
-    }
-  }, [
-    dxGrid
-  ]);
-  const handleEnter = useCallback4((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 = useCallback4((event) => {
-    const cell = closestCell(event.target);
-    if (!model || !cell) {
-      return;
-    }
-    switch (event.key) {
-      case "Backspace":
-      case "Delete": {
-        model.setCellData(cell, void 0);
-        break;
-      }
-    }
-  }, [
-    model
-  ]);
-  const handleAxisResize = useCallback4((event) => {
-    if (event.axis === "col") {
-      const columnIndex = parseInt(event.index, 10);
-      model?.setColumnWidth(columnIndex, event.size);
-    }
-  }, [
-    model
-  ]);
-  const handleWheel = useCallback4((event) => {
-    if (!ignoreAttention && !hasAttention) {
-      event.stopPropagation();
-    }
-  }, [
-    hasAttention,
-    ignoreAttention
-  ]);
-  const handleNewColumn = useCallback4(() => {
-    const columns = model?.getColumnCount();
-    if (dxGrid && columns) {
-      dxGrid.scrollToColumn(columns - 1);
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleQuery = useCallback4(async ({ field, props }, text) => {
-    if (model && props.referenceSchema && field.referencePath) {
-      const space = getSpace4(model.table);
-      invariant2(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(Filter.schema(schema)).run();
-        const options = objects.map((obj) => {
-          const value = getValue(obj, field.referencePath);
-          if (!value || typeof value !== "string") {
-            return void 0;
-          }
-          return {
-            label: value,
-            data: obj
-          };
-        }).filter(isNotFalsy);
-        return [
-          ...options,
-          {
-            label: t("create new object label", {
-              text
-            }),
-            data: createOption(text)
-          }
-        ];
-      }
-    }
-    return [];
-  }, [
-    model
-  ]);
-  if (!model) {
-    return /* @__PURE__ */ React7.createElement("span", {
-      role: "none",
-      className: "attention-surface"
+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"
     });
-  }
-  return /* @__PURE__ */ React7.createElement(Grid.Root, {
-    id: model.table.id ?? "table-grid"
-  }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
-    model,
-    onEnter: handleEnter,
-    onFocus: handleFocus,
-    onQuery: handleQuery
-  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
-    onWheelCapture: handleWheel,
-    className: 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__ */ React7.createElement(RowActionsMenu, {
-    model
-  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
-    model
-  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
-    model,
-    onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ React7.createElement(RefPanel, {
-    model
-  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
-    model
-  }));
-});
-var Table = {
-  Root: TableRoot,
-  Main: TableMain
-};
-
-// packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
-import { createContext } from "@radix-ui/react-context";
-import React9 from "react";
-import { Toolbar as NaturalToolbar2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-
-// packages/ui/react-ui-table/src/components/Toolbar/common.tsx
-import React8 from "react";
-import { Icon, Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
-var buttonStyles = "min-bs-0 p-2";
-var tooltipProps = {
-  side: "top",
-  classNames: "z-10"
+  },
+  getData: (_el) => ({
+    type: "newColumn"
+  })
 };
-var ToolbarSeparator = () => /* @__PURE__ */ React8.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarButton = ({ icon, children, ...props }) => {
-  return /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React8.createElement(NaturalToolbar.Button, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React8.createElement(Icon, {
-    icon,
-    size: 5
-  }), /* @__PURE__ */ React8.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null))));
+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"
+    });
+  },
+  getData: (el) => ({
+    type: "columnSettings",
+    fieldId: el.getAttribute("data-field-id")
+  })
 };
-
-// packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
-var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ classNames, children, onAction }) => {
-  return /* @__PURE__ */ React9.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ React9.createElement(NaturalToolbar2.Root, {
-    classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
-      classNames
-    ]
-  }, children));
+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 Editing = () => {
-  const { onAction } = useToolbarContext("Editing");
-  const { t } = useTranslation4(translationKey);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
-    value: "add-row",
-    icon: "ph--plus--regular",
-    "data-testid": "table.toolbar.add-row",
-    onClick: () => onAction?.({
-      type: "add-row"
-    })
-  }, t("add row")));
+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 Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { t } = useTranslation4(translationKey);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
-    value: "comment",
-    icon: "ph--chat-text--regular",
-    "data-testid": "table.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    })
-  }, t("create comment")));
+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 Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator
+var tableButtons = {
+  addColumn: addColumnButton,
+  columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
+  rowMenu: rowMenuButton,
+  sort: sortButton
 };
 
-// packages/ui/react-ui-table/src/hooks/useTableModel.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
-
-// packages/ui/react-ui-table/src/model/table-model.ts
-import { computed as computed2, effect as effect2, signal as signal3 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
-import { Resource as Resource2 } from "@dxos/context";
-import { getValue as getValue2, setValue, FormatEnum as FormatEnum3 } from "@dxos/echo-schema";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { PublicKey as PublicKey2 } from "@dxos/react-client";
-import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-form";
-import { toPlaneCellIndex } from "@dxos/react-ui-grid";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-import { VIEW_FIELD_LIMIT } from "@dxos/schema";
-
-// packages/ui/react-ui-table/src/model/modal-controller.ts
-import { signal } from "@preact/signals-core";
-import { log as log2 } from "@dxos/log";
-
-// packages/ui/react-ui-table/src/util/signals.ts
-var touch = (value) => value;
-
-// packages/ui/react-ui-table/src/util/table.ts
-import { AST, Format, FormatEnum as FormatEnum2, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
-import { log } from "@dxos/log";
-import { PublicKey } from "@dxos/react-client";
-import { create as create2 } from "@dxos/react-client/echo";
-import { createFieldId, createView, ViewProjection } from "@dxos/schema";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = ({ space, table, initialRow = true }) => {
-  log.info("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file3,
-    L: 32,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
-  const ContactSchema = TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: "0.1.0"
-  })({
-    name: S2.optional(S2.String).annotations({
-      [AST.TitleAnnotationId]: "Name"
-    }),
-    email: S2.optional(Format.Email),
-    salary: S2.optional(Format.Currency()).annotations({
-      [AST.TitleAnnotationId]: "Salary"
-    })
-  });
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = createView({
-    name: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "email",
-      "salary"
-    ]
-  });
-  const projection = new ViewProjection(contactSchema, table.view);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.fields[2].id,
-      path: "salary",
-      size: 150
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: TypeEnum.Ref,
-      format: FormatEnum2.Ref,
-      referenceSchema: contactSchema.typename,
-      title: "Manager"
-    }
-  });
-  if (initialRow) {
-    space.db.add(create2(contactSchema, {}));
-  }
-  return contactSchema;
+// packages/ui/react-ui-table/src/util/table-controls.ts
+var CONTROL_IDENTIFIERS = {
+  checkbox: "data-table-checkbox",
+  switch: "data-table-switch"
 };
-
-// packages/ui/react-ui-table/src/util/table-buttons.ts
-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 BASE_CLASSES = {
+  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
+  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
 };
-var ICONS = {
-  referencedCell: "ph--link-simple-horizontal--regular",
-  columnSettings: "ph--caret-down--regular",
-  rowMenu: "ph--dots-three--regular",
-  newColumn: "ph--plus--regular"
+var renderAttributes = (data) => {
+  return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
 };
-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 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 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 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 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 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"))
     })
   }
 };
 
-// packages/ui/react-ui-table/src/model/modal-controller.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
-var ModalController = class {
-  constructor() {
-    this._state = 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;
-      }
-      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 addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
-      if (addColumnButton) {
-        this._triggerRef.current = addColumnButton;
-        this._state.value = {
-          type: "columnSettings",
-          mode: {
-            type: "create"
-          }
-        };
-        return true;
+// packages/ui/react-ui-table/src/model/selection-model.ts
+var SelectionModel = class extends Resource {
+  constructor(_rows, _onSelectionChanged) {
+    super();
+    this._rows = _rows;
+    this._onSelectionChanged = _onSelectionChanged;
+    this._selection = signal(/* @__PURE__ */ new Set());
+    this._validSelectedIds = computed(() => {
+      const rows = this._rows.value;
+      if (!rows) {
+        return /* @__PURE__ */ new Set();
       }
-      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
-        };
-      }
-      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 {
-        log2.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;
-  }
-};
-
-// packages/ui/react-ui-table/src/model/selection-model.ts
-import { computed, effect, signal as signal2 } from "@preact/signals-core";
-import { Resource } from "@dxos/context";
-var SelectionModel = class extends Resource {
-  constructor(_rows, _onSelectionChanged) {
-    super();
-    this._rows = _rows;
-    this._onSelectionChanged = _onSelectionChanged;
-    this._selection = signal2(/* @__PURE__ */ new Set());
-    this._validSelectedIds = computed(() => {
-      const rows = this._rows.value;
-      if (!rows) {
-        return /* @__PURE__ */ new Set();
-      }
-      const validIds = new Set(rows.map((row) => row.id));
-      return new Set([
-        ...this._selection.value
-      ].filter((id) => validIds.has(id)));
-    });
-    this._hasSelection = computed(() => this._validSelectedIds.value.size > 0);
-    this._allSelected = computed(() => {
-      const rows = this._rows.value;
-      if (rows.length === 0) {
-        return false;
+      const validIds = new Set(rows.map((row) => row.id));
+      return new Set([
+        ...this._selection.value
+      ].filter((id) => validIds.has(id)));
+    });
+    this._hasSelection = computed(() => this._validSelectedIds.value.size > 0);
+    this._allSelected = computed(() => {
+      const rows = this._rows.value;
+      if (rows.length === 0) {
+        return false;
       }
       return rows.every((row) => this._selection.value.has(row.id));
     });
@@ -1042,7 +604,16 @@ var SelectionModel = class extends Resource {
       this._selection.value = newSelection;
     };
     this.setSelection = (mode) => {
-      this._selection.value = mode === "all" ? new Set(this._rows.value.map((row) => row.id)) : /* @__PURE__ */ new Set();
+      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;
+        }
+      }
     };
   }
   async _open() {
@@ -1066,25 +637,173 @@ var SelectionModel = class extends Resource {
   }
 };
 
-// packages/ui/react-ui-table/src/util/table-controls.ts
-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
+// packages/ui/react-ui-table/src/model/table-sorting.ts
+import { computed as computed2, signal as signal2 } from "@preact/signals-core";
+import orderBy from "lodash.orderby";
+import { getValue, FormatEnum as FormatEnum2, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+import { formatForDisplay } from "@dxos/react-ui-form";
+var TableSorting = class {
+  constructor(rows, _view, _projection) {
+    this._view = _view;
+    this._projection = _projection;
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._localSort = signal2(void 0);
+    this._rows = rows;
+    this._isDirty = computed2(() => {
+      const local = this._localSort.value;
+      const viewSort = this._view?.query.sort?.[0];
+      if (local?.type === "cleared") {
+        return viewSort !== void 0;
+      }
+      if (local?.type === "active") {
+        if (!viewSort) {
+          return true;
+        }
+        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
+      }
+      return false;
+    });
+    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 computed2(() => {
+      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 === TypeEnum2.Boolean) && (sortValue == null || sortValue === "");
+        return {
+          item,
+          index,
+          value: sortValue,
+          isEmpty
+        };
+      });
+      const ordered = orderBy(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 = getValue(item, field.path);
+    if (type === TypeEnum2.Boolean) {
+      return !!value;
+    }
+    if (type === TypeEnum2.Number) {
+      return value;
+    }
+    if (value == null) {
+      return value;
+    }
+    if (format === FormatEnum2.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 === FormatEnum2.Ref && field.referencePath) {
+      const refValue = getValue(value.target, field.referencePath);
+      return refValue;
+    }
+    return formatForDisplay({
+      type,
+      format,
+      value
+    });
   }
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
-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 Resource2 {
   constructor({ table, projection, sorting = [], pinnedRows = {
     top: [],
@@ -1102,200 +821,7 @@ var TableModel = class extends Resource2 {
         col: 0
       }
     });
-    /**
-    * Maps display indices to data indices.
-    * Used for translating between sorted/displayed order and original data order.
-    * Keys are display indices, values are corresponding data indices.
-    */
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._sorting = signal3(void 0);
     this._rows = signal3([]);
-    this._modalController = new ModalController();
-    //
-    // Get Cells
-    //
-    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 = getValue2(obj, field.path);
-            if (value == null) {
-              return "";
-            }
-            switch (props.format) {
-              case FormatEnum3.Ref: {
-                if (!field.referencePath) {
-                  return "";
-                }
-                return getValue2(value, field.referencePath);
-              }
-              default: {
-                return formatForDisplay({
-                  type: props.type,
-                  format: props.format,
-                  value
-                });
-              }
-            }
-          }
-        };
-        const classes = [];
-        const formatClasses = cellClassesForFieldType({
-          type: props.type,
-          format: props.format
-        });
-        if (formatClasses) {
-          classes.push(formatClasses);
-        }
-        const rowSelectionClasses = cellClassesForRowSelection(this._selection.isObjectSelected(obj));
-        if (rowSelectionClasses) {
-          classes.push(rowSelectionClasses);
-        }
-        if (classes.length > 0) {
-          cell.className = mx2(classes.flat());
-        }
-        if (cell.value && props.format === FormatEnum3.Ref && props.referenceSchema) {
-          const targetObj = getValue2(obj, field.path);
-          cell.accessoryHtml = tableButtons.referencedCell.render({
-            targetId: targetObj.id,
-            schemaId: props.referenceSchema
-          });
-        }
-        const idx = 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[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 = cellClassesForRowSelection(isSelected);
-        cells[toPlaneCellIndex({
-          col: 0,
-          row
-        })] = {
-          value: "",
-          readonly: true,
-          className: classes ? mx2(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 = cellClassesForRowSelection(isSelected);
-        cells[toPlaneCellIndex({
-          col: 0,
-          row
-        })] = {
-          value: "",
-          readonly: true,
-          className: classes ? mx2(classes) : void 0,
-          accessoryHtml: tableButtons.rowMenu.render({
-            rowIndex: row
-          })
-        };
-      }
-      return cells;
-    };
-    this.getSelectAllCell = () => {
-      return {
-        [toPlaneCellIndex({
-          col: 0,
-          row: 0
-        })]: {
-          value: "",
-          accessoryHtml: tableControls.checkbox.render({
-            rowIndex: 0,
-            header: true,
-            checked: this._selection.allRowsSeleted.value
-          }),
-          readonly: true
-        }
-      };
-    };
-    this.getNewColumnCell = () => {
-      return {
-        [toPlaneCellIndex({
-          col: 0,
-          row: 0
-        })]: {
-          value: "",
-          accessoryHtml: tableButtons.addColumn.render({
-            disabled: (this._table.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
-          }),
-          readonly: true
-        }
-      };
-    };
     //
     // Data
     //
@@ -1303,13 +829,13 @@ var TableModel = class extends Resource2 {
       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) {
@@ -1321,12 +847,12 @@ var TableModel = class extends Resource2 {
       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 dataIndex = this._sorting.getDataIndex(row);
       const value = getValue2(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
@@ -1337,7 +863,7 @@ var TableModel = class extends Resource2 {
           if (!field.referencePath) {
             return "";
           }
-          return getValue2(value, field.referencePath);
+          return getValue2(value.target, field.referencePath);
         }
         default: {
           return formatForEditing({
@@ -1349,8 +875,8 @@ var TableModel = class extends Resource2 {
       }
     };
     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;
       }
@@ -1358,7 +884,9 @@ var TableModel = class extends Resource2 {
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
         case FormatEnum3.Ref: {
-          setValue(this._rows.value[rowIdx], field.path, value);
+          if (isReactiveObject(value)) {
+            setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
+          }
           break;
         }
         default: {
@@ -1371,31 +899,13 @@ var TableModel = class extends Resource2 {
         }
       }
     };
-    //
-    // Interactions
-    //
-    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;
@@ -1409,13 +919,22 @@ var TableModel = class extends Resource2 {
   get projection() {
     return this._projection;
   }
+  get rows() {
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting;
+  }
   get pinnedRows() {
     return this._pinnedRows;
   }
   get columnMeta() {
-    invariant3(this._columnMeta, void 0, {
-      F: __dxlog_file5,
-      L: 126,
+    invariant(this._columnMeta, void 0, {
+      F: __dxlog_file,
+      L: 117,
       S: this,
       A: [
         "this._columnMeta",
@@ -1424,28 +943,25 @@ var TableModel = class extends Resource2 {
     });
     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 = computed2(() => {
-      const fields = this._table.view?.fields ?? [];
+    this._columnMeta = computed3(() => {
+      const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
         {
@@ -1467,123 +983,959 @@ var TableModel = class extends Resource2 {
             resizeable: false
           }
         }
-      };
-    });
-  }
-  initializeSorting() {
-    this._sortedRows = computed2(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
+      };
+    });
+  }
+  initializeEffects() {
+    const rowOrderWatcher = effect2(() => {
+      touch(this._sorting.sortedRows.value);
+      this._onRowOrderChanged?.();
+    });
+    this._ctx.onDispose(rowOrderWatcher);
+    const rowEffectManager = effect2(() => {
+      const { start, end } = touch(this._visibleRange.value);
+      const rowEffects = [];
+      for (let row = start.row; row <= end.row; row++) {
+        rowEffects.push(effect2(() => {
+          const obj = this._sorting.sortedRows.value[row];
+          this?._table?.view?.target?.fields.forEach((field) => touch(getValue2(obj, field.path)));
+          this._onCellUpdate?.({
+            row,
+            col: start.col,
+            plane: "grid"
+          });
+        }));
+      }
+      return () => rowEffects.forEach((cleanup) => cleanup());
+    });
+    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 = getValue2(this._rows.value[dataRow], field.path);
+    const updatedValue = update(value);
+    setValue(this._rows.value[dataRow], field.path, updatedValue);
+  }
+  //
+  // Column Operations
+  //
+  deleteColumn(fieldId) {
+    if (!this.table.view) {
+      return;
+    }
+    const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
+    if (field && this._onDeleteColumn) {
+      this._onDeleteColumn(field.id);
+    }
+  }
+  //
+  // Resize
+  //
+  setColumnWidth(columnIndex, width) {
+    const fields = this.table.view?.target?.fields ?? [];
+    if (columnIndex < fields.length) {
+      const newWidth = Math.max(0, width);
+      const field = fields[columnIndex];
+      if (field) {
+        field.size = newWidth;
+      }
+    }
+  }
+  //
+  // Pinning
+  //
+  // TODO(burdon): Change to setPinned(on/off).
+  pinRow(rowIndex, side) {
+    this._pinnedRows[side].push(rowIndex);
+  }
+  unpinRow(rowIndex) {
+    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+  }
+  //
+  // View operations
+  //
+  saveView() {
+    this._sorting.save();
+  }
+};
+
+// packages/ui/react-ui-table/src/model/modal-controller.ts
+import { signal as signal4 } from "@preact/signals-core";
+import { log } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
+var ModalController = class {
+  constructor() {
+    this._state = signal4({
+      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 {
+        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;
+  }
+};
+
+// packages/ui/react-ui-table/src/model/table-presentation.ts
+import { signal as signal5 } from "@preact/signals-core";
+import { FormatEnum as FormatEnum4, getValue as getValue3 } from "@dxos/echo-schema";
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
+import { toPlaneCellIndex } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/react-ui-theme";
+import { VIEW_FIELD_LIMIT } from "@dxos/schema";
+var TablePresentation = class {
+  constructor(model, _visibleRange = signal5({
+    start: {
+      row: 0,
+      col: 0
+    },
+    end: {
+      row: 0,
+      col: 0
+    }
+  })) {
+    this.model = model;
+    this._visibleRange = _visibleRange;
+  }
+  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 = getValue3(obj, field.path);
+          if (value == null) {
+            return "";
+          }
+          switch (props.format) {
+            case FormatEnum4.Boolean:
+            case FormatEnum4.SingleSelect: {
+              return "";
+            }
+            case FormatEnum4.Ref: {
+              if (!field.referencePath) {
+                return "";
+              }
+              return getValue3(value.target, field.referencePath);
+            }
+            default: {
+              return formatForDisplay2({
+                type: props.type,
+                format: props.format,
+                value
+              });
+            }
+          }
+        }
+      };
+      const classes = [];
+      const formatClasses = cellClassesForFieldType({
+        type: props.type,
+        format: props.format
+      });
+      if (formatClasses) {
+        classes.push(formatClasses);
+      }
+      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj));
+      if (rowSelectionClasses) {
+        classes.push(rowSelectionClasses);
+      }
+      if (classes.length > 0) {
+        cell.className = mx(classes.flat());
+      }
+      if (props.format === FormatEnum4.Ref && props.referenceSchema) {
+        const targetObj = getValue3(obj, field.path)?.target;
+        if (targetObj) {
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
+        }
+      }
+      if (props.format === FormatEnum4.Boolean) {
+        const value = getValue3(obj, field.path);
+        cell.accessoryHtml = tableControls.switch.render({
+          colIndex,
+          rowIndex: displayIndex,
+          checked: value ?? false
+        });
+        cell.readonly = true;
+      }
+      if (props.format === FormatEnum4.SingleSelect) {
+        const value = getValue3(obj, field.path);
+        const options = this.model.projection.getFieldProjection(field.id).props.options;
+        if (options) {
+          const option = options.find((o) => o.id === value);
+          if (option) {
+            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+          }
+        }
+      }
+      const idx = toPlaneCellIndex({
+        col: colIndex,
+        row: displayIndex
+      });
+      cells[idx] = cell;
+    };
+    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
+      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[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 = cellClassesForRowSelection(isSelected);
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: classes ? 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 = cellClassesForRowSelection(isSelected);
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: classes ? mx(classes) : void 0,
+        accessoryHtml: tableButtons.rowMenu.render({
+          rowIndex: row
+        })
+      };
+    }
+    return cells;
+  }
+  getSelectAllCell() {
+    return {
+      [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 {
+      [toPlaneCellIndex({
+        col: 0,
+        row: 0
+      })]: {
+        accessoryHtml: tableButtons.addColumn.render({
+          disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
+        }),
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
+      }
+    };
+  }
+};
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
+import { FormatEnum as FormatEnum5 } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
+import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+var completion = ({ debug, onQuery, onMatch }) => {
+  return [
+    EditorView.theme({
+      ".cm-completionDialog": {
+        width: "var(--dx-gridCellWidth)"
+      }
+    }),
+    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.
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((tr) => {
+        const completion2 = tr.annotation(pickedCompletion);
+        if (completion2) {
+          onMatch(completion2.data);
+        }
+      });
+    })
+  ];
+};
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+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 } = useGridContext2("TableCellEditor", __gridScope);
+  const suppressNextBlur = useRef(false);
+  const fieldProjection = useMemo3(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = parseCellIndex(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant2(fieldProjection2, void 0, {
+      F: __dxlog_file3,
+      L: 67,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  const handleEnter = useCallback3((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = parseCellIndex(editing.index);
+    model.setCellData(cell, value);
+    onEnter?.(cell);
+    onFocus?.();
+    setEditing(null);
+  }, [
+    model,
+    editing
+  ]);
+  const handleBlur = useCallback3((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    if (suppressNextBlur.current) {
+      suppressNextBlur.current = false;
+      return;
+    }
+    const cell = parseCellIndex(editing.index);
+    if (value !== void 0) {
+      model.setCellData(cell, value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const handleClose = useCallback3((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = parseCellIndex(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const extension = useMemo3(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extension2 = [
+      editorKeys({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case FormatEnum5.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(cellQuery(editing.index, gridId)), {
+                        [field.referencePath]: data.text
+                      }, (data2) => {
+                        handleEnter(data2);
+                      });
+                    }
+                  } else {
+                    handleEnter(data);
+                  }
+                }
+              }
+            })
+          ]);
+          break;
+        }
+      }
+    }
+    return extension2;
+  }, [
+    model,
+    modals,
+    editing,
+    fieldProjection,
+    handleClose
+  ]);
+  const getCellContent = useCallback3(() => {
+    if (model && editing) {
+      const value = model.getCellData(parseCellIndex(editing.index));
+      return value !== void 0 ? String(value) : "";
+    }
+  }, [
+    model,
+    editing
+  ]);
+  return /* @__PURE__ */ React6.createElement(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;
+};
+
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+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__ */ React7.createElement("div", {
+    role: "none",
+    className: mx2("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__ */ forwardRef(({ model, presentation, ignoreAttention }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = useState2(null);
+  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
+  const { t } = useTranslation3(translationKey);
+  const modals = useMemo4(() => new ModalController(), []);
+  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 = useCallback4((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;
+        }
       }
-      const field = this._table.view?.fields.find((field2) => field2.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
+      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 dataWithIndices = this._rows.value.map((item, index) => {
-        const value = getValue2(item, field.path);
-        return {
-          item,
-          index,
-          value,
-          isEmpty: value == null || value === ""
-        };
-      });
-      const sorted = orderBy(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);
+      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;
         }
       }
-      return sorted.map(({ item }) => item);
-    });
-  }
-  initializeEffects() {
-    const rowOrderWatcher = effect2(() => {
-      touch(this._sortedRows.value);
-      this._onRowOrderChanged?.();
-    });
-    this._ctx.onDispose(rowOrderWatcher);
-    const rowEffectManager = effect2(() => {
-      const { start, end } = touch(this._visibleRange.value);
-      const rowEffects = [];
-      for (let row = start.row; row <= end.row; row++) {
-        rowEffects.push(effect2(() => {
-          const obj = this._sortedRows.value[row];
-          this?._table?.view?.fields.forEach((field) => touch(getValue2(obj, field.path)));
-          this._onCellUpdate?.({
-            row,
-            col: start.col,
-            plane: "grid"
-          });
-        }));
+    }
+  }, [
+    model,
+    modals
+  ]);
+  const handleFocus = useCallback4((increment, delta) => {
+    if (dxGrid) {
+      dxGrid.refocus(increment, delta);
+    }
+  }, [
+    dxGrid
+  ]);
+  const handleEnter = useCallback4((cell) => {
+    if (model && cell.row === model.getRowCount() - 1) {
+      model.insertRow(cell.row);
+      if (dxGrid) {
+        requestAnimationFrame(() => {
+          dxGrid?.scrollToRow(cell.row + 1);
+          dxGrid?.refocus("row", 1);
+        });
       }
-      return () => rowEffects.forEach((cleanup) => cleanup());
-    });
-    this._ctx.onDispose(rowEffectManager);
-  }
-  //
-  // Column Operations
-  //
-  deleteColumn(fieldId) {
-    if (!this.table.view) {
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleKeyDown = useCallback4((event) => {
+    const cell = closestCell(event.target);
+    if (!model || !cell) {
       return;
     }
-    const field = this.table.view.fields.find((field2) => field2.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
+    switch (event.key) {
+      case "Backspace":
+      case "Delete": {
+        model.setCellData(cell, void 0);
+        break;
       }
-      this._onDeleteColumn(field.id);
     }
-  }
-  //
-  // Resize
-  //
-  setColumnWidth(columnIndex, width) {
-    const fields = this.table.view?.fields ?? [];
-    if (columnIndex < fields.length) {
-      const newWidth = Math.max(0, width);
-      const field = fields[columnIndex];
-      if (field) {
-        field.size = newWidth;
+  }, [
+    model
+  ]);
+  const handleAxisResize = useCallback4((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
+  ]);
+  const handleWheel = useCallback4((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const handleNewColumn = useCallback4(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleQuery = useCallback4(async ({ field, props }, text) => {
+    if (model && props.referenceSchema && field.referencePath) {
+      const space = getSpace4(model.table);
+      invariant3(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(Filter.schema(schema)).run();
+        const options = objects.map((obj) => {
+          const value = getValue4(obj, field.referencePath);
+          if (!value || typeof value !== "string") {
+            return void 0;
+          }
+          return {
+            label: value,
+            data: obj
+          };
+        }).filter(isNotFalsy);
+        return [
+          ...options,
+          {
+            label: t("create new object label", {
+              text
+            }),
+            data: createOption(text)
+          }
+        ];
       }
     }
+    return [];
+  }, [
+    model
+  ]);
+  if (!model || !modals) {
+    return /* @__PURE__ */ React7.createElement("span", {
+      role: "none",
+      className: "attention-surface"
+    });
   }
-  //
-  // Sorting
-  //
-  setSort(fieldId, direction) {
-    this._sorting.value = {
-      fieldId,
-      direction
-    };
-  }
-  clearSort() {
-    this._sorting.value = void 0;
-  }
-  //
-  // Pinning
-  //
-  // TODO(burdon): Change to setPinned(on/off).
-  pinRow(rowIndex, side) {
-    this._pinnedRows[side].push(rowIndex);
-  }
-  unpinRow(rowIndex) {
-    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
-    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
-  }
+  return /* @__PURE__ */ React7.createElement(Grid.Root, {
+    id: model.table.id ?? "table-grid"
+  }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
+    model,
+    modals,
+    onEnter: handleEnter,
+    onFocus: handleFocus,
+    onQuery: handleQuery
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+    onWheelCapture: handleWheel,
+    className: mx2("[--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__ */ React7.createElement(RowActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+    model,
+    modals,
+    onNewColumn: handleNewColumn
+  }), /* @__PURE__ */ React7.createElement(RefPanel, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
+    model,
+    modals
+  }));
+});
+var Table = {
+  Root: TableRoot,
+  Main: TableMain
+};
+
+// packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
+import React8, { useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { create as create3 } from "@dxos/live-object";
+import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
+var createTableToolbarActions = (state) => {
+  const add = createMenuAction("add-row", {
+    type: "add-row",
+    icon: "ph--plus--regular",
+    label: [
+      "add row",
+      {
+        ns: translationKey
+      }
+    ],
+    testId: "table.toolbar.add-row"
+  });
+  const save = 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 = createGapSeparator();
+  const comment = 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 = useMemo5(() => create3({
+    viewDirty
+  }), []);
+  const actionsCreator = useCallback5(() => createTableToolbarActions(state), [
+    state
+  ]);
+  const menu = useMenuActions(actionsCreator);
+  return /* @__PURE__ */ React8.createElement(MenuProvider, {
+    ...menu,
+    attendableId,
+    onAction
+  }, /* @__PURE__ */ React8.createElement(ToolbarMenu, {
+    classNames
+  }));
 };
 
 // packages/ui/react-ui-table/src/hooks/useTableModel.ts
+import { effect as effect3 } from "@preact/signals-core";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useSelectionActions } from "@dxos/react-ui-attention";
 var useTableModel = ({ objects, table, projection, ...props }) => {
   const [model, setModel] = useState3();
   useEffect2(() => {
@@ -1616,18 +1968,42 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     model,
     objects
   ]);
+  const { select, clear } = useSelectionActions(table?.id);
+  useEffect2(() => {
+    if (!model) {
+      return;
+    }
+    const unsubscribe = effect3(() => {
+      select([
+        ...model.selection.selection.value
+      ]);
+    });
+    return () => {
+      clear();
+      unsubscribe();
+    };
+  }, [
+    model
+  ]);
   return model;
 };
 export {
+  BUTTON_IDENTIFIERS,
+  CONTROL_IDENTIFIERS,
+  ModalController,
   Table,
+  TableModel,
+  TablePresentation,
   TableSchema,
+  TableToolbar,
   TableType,
-  Toolbar,
   initializeTable,
+  renderCheckbox,
+  renderSwitch,
   tableButtons,
+  tableControls,
   touch,
   translations_default as translations,
-  useTableModel,
-  useToolbarContext
+  useTableModel
 };
 //# sourceMappingURL=index.mjs.map