@dxos/react-ui-table 0.7.5-main.9d26e3a → 0.7.5-main.e9bb01b

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-AT7O4RAD.mjs";
+} from "./chunk-T7CTRLHA.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,7 +28,8 @@ 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"
       }
     }
   }
@@ -36,7 +37,7 @@ var translations_default = [
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4 } from "react";
-import { getValue as getValue3 } from "@dxos/echo-schema";
+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";
@@ -54,7 +55,7 @@ var ColumnActionsMenu = ({ model, modals }) => {
   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,
@@ -64,13 +65,13 @@ var ColumnActionsMenu = ({ model, modals }) => {
     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)
@@ -285,14 +286,13 @@ var RowActionsMenu = ({ model, modals }) => {
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
-import { computed as computed2, effect as effect2, signal as signal2 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
+import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
 import { Resource as Resource2 } from "@dxos/context";
-import { getValue, setValue, FormatEnum as FormatEnum2 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum3, getValue as getValue2, setValue } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
 import { isReactiveObject, makeRef as makeRef2 } from "@dxos/live-object";
 import { PublicKey as PublicKey2 } from "@dxos/react-client";
-import { formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-form";
+import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
@@ -303,73 +303,81 @@ 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 { log } from "@dxos/log";
 import { PublicKey } from "@dxos/react-client";
 import { create as create2, makeRef } from "@dxos/react-client/echo";
-import { createFieldId, createView, ViewProjection } from "@dxos/schema";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = async ({ space, table, initialRow = true }) => {
-  log("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file,
-    L: 36,
-    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"
-    }),
-    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: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "active",
-      "email",
-      "salary"
-    ]
-  }));
-  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
+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}`);
     }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: "Manager"
+    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",
+        "active",
+        "email",
+        "salary"
+      ]
+    }));
+    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
+      }
+    });
+    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, {}));
     }
-  });
-  if (initialRow) {
-    space.db.add(create2(contactSchema, {}));
+    return contactSchema;
   }
-  return contactSchema;
 };
 
 // packages/ui/react-ui-table/src/util/table-buttons.ts
@@ -377,11 +385,13 @@ 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"
+  rowMenu: "data-table-row-menu-button",
+  sort: "data-table-sort-button"
 };
-var createButton = ({ attr, data, disabled = false, icon, testId }) => {
+var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
   const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-  return `<button ${attr} data-testid="${testId}" class="ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  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 addColumnButton = {
   attr: BUTTON_IDENTIFIERS.newColumn,
@@ -455,11 +465,35 @@ var rowMenuButton = {
     rowIndex: Number(el.getAttribute("data-row-index"))
   })
 };
+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 tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
   referencedCell: referencedCellButton,
-  rowMenu: rowMenuButton
+  rowMenu: rowMenuButton,
+  sort: sortButton
 };
 
 // packages/ui/react-ui-table/src/util/table-controls.ts
@@ -468,8 +502,8 @@ var CONTROL_IDENTIFIERS = {
   switch: "data-table-switch"
 };
 var BASE_CLASSES = {
-  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] ch-checkbox",
-  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] ch-checkbox--switch"
+  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
+  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
 };
 var renderAttributes = (data) => {
   return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
@@ -596,8 +630,173 @@ var SelectionModel = class extends Resource {
   }
 };
 
+// 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_file2 = "/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: [],
@@ -605,7 +804,7 @@ var TableModel = class extends Resource2 {
   }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
     super();
     this.id = `table-model-${PublicKey2.random().truncate()}`;
-    this._visibleRange = signal2({
+    this._visibleRange = signal3({
       start: {
         row: 0,
         col: 0
@@ -615,14 +814,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 = signal2(void 0);
-    this._rows = signal2([]);
+    this._rows = signal3([]);
     //
     // Data
     //
@@ -632,11 +824,11 @@ var TableModel = class extends Resource2 {
     this.getRowCount = () => this._rows.value.length;
     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) {
@@ -653,18 +845,18 @@ var TableModel = class extends Resource2 {
         return void 0;
       }
       const field = fields[col];
-      const dataIndex = this._displayToDataIndex.get(row) ?? row;
-      const value = getValue(this._rows.value[dataIndex], field.path);
+      const dataIndex = this._sorting.getDataIndex(row);
+      const value = getValue2(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
       }
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case FormatEnum2.Ref: {
+        case FormatEnum3.Ref: {
           if (!field.referencePath) {
             return "";
           }
-          return getValue(value.target, field.referencePath);
+          return getValue2(value.target, field.referencePath);
         }
         default: {
           return formatForEditing({
@@ -676,7 +868,7 @@ var TableModel = class extends Resource2 {
       }
     };
     this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const rowIdx = this._sorting.getDataIndex(row);
       const fields = this.table.view?.target?.fields ?? [];
       if (col < 0 || col >= fields.length) {
         return;
@@ -684,7 +876,7 @@ var TableModel = class extends Resource2 {
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case FormatEnum2.Ref: {
+        case FormatEnum3.Ref: {
           if (isReactiveObject(value)) {
             setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
           }
@@ -702,7 +894,11 @@ var TableModel = class extends Resource2 {
     };
     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;
@@ -717,14 +913,20 @@ var TableModel = class extends Resource2 {
     return this._projection;
   }
   get rows() {
-    return this._sortedRows;
+    return this._sorting.sortedRows;
+  }
+  /**
+  * @reactive
+  */
+  get sorting() {
+    return this._sorting;
   }
   get pinnedRows() {
     return this._pinnedRows;
   }
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
-      F: __dxlog_file2,
+      F: __dxlog_file,
       L: 117,
       S: this,
       A: [
@@ -734,24 +936,24 @@ var TableModel = class extends Resource2 {
     });
     return this._columnMeta;
   }
-  get sorting() {
-    return this._sorting.value;
-  }
   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(() => {
+    this._columnMeta = computed3(() => {
       const fields = this._table.view?.target?.fields ?? [];
       const meta = Object.fromEntries(fields.map((field, index) => [
         index,
@@ -777,60 +979,9 @@ var TableModel = class extends Resource2 {
       };
     });
   }
-  initializeSorting() {
-    this._sortedRows = computed2(() => {
-      this._displayToDataIndex.clear();
-      const sort = this._sorting.value;
-      if (!sort) {
-        return this._rows.value;
-      }
-      const field = this._table.view?.target?.fields.find((field2) => field2.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 rawValue = getValue(item, field.path);
-        let sortValue = rawValue;
-        if (props.type.startsWith("boolean")) {
-          sortValue = !!rawValue;
-        } else if (rawValue != null) {
-          if (props.format === FormatEnum2.Ref && field.referencePath) {
-            sortValue = getValue(rawValue, field.referencePath);
-          } else {
-            sortValue = formatForDisplay({
-              type: props.type,
-              format: props.format,
-              value: rawValue
-            });
-          }
-        }
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty: !props.type.startsWith("boolean") && (sortValue == null || sortValue === "")
-        };
-      });
-      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);
-        }
-      }
-      return sorted.map(({ item }) => item);
-    });
-  }
   initializeEffects() {
     const rowOrderWatcher = effect2(() => {
-      touch(this._sortedRows.value);
+      touch(this._sorting.sortedRows.value);
       this._onRowOrderChanged?.();
     });
     this._ctx.onDispose(rowOrderWatcher);
@@ -839,8 +990,8 @@ var TableModel = class extends Resource2 {
       const rowEffects = [];
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push(effect2(() => {
-          const obj = this._sortedRows.value[row];
-          this?._table?.view?.target?.fields.forEach((field) => touch(getValue(obj, field.path)));
+          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,
@@ -858,10 +1009,10 @@ var TableModel = class extends Resource2 {
   * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
   */
   updateCellData({ col, row }, update) {
-    const dataRow = this._displayToDataIndex.get(row) ?? row;
+    const dataRow = this._sorting.getDataIndex(row);
     const fields = this.table.view?.target?.fields ?? [];
     const field = fields[col];
-    const value = getValue(this._rows.value[dataRow], field.path);
+    const value = getValue2(this._rows.value[dataRow], field.path);
     const updatedValue = update(value);
     setValue(this._rows.value[dataRow], field.path, updatedValue);
   }
@@ -874,9 +1025,6 @@ var TableModel = class extends Resource2 {
     }
     const field = this.table.view.target?.fields.find((field2) => field2.id === fieldId);
     if (field && this._onDeleteColumn) {
-      if (this._sorting.value?.fieldId === fieldId) {
-        this.clearSort();
-      }
       this._onDeleteColumn(field.id);
     }
   }
@@ -894,18 +1042,6 @@ var TableModel = class extends Resource2 {
     }
   }
   //
-  // Sorting
-  //
-  setSort(fieldId, direction) {
-    this._sorting.value = {
-      fieldId,
-      direction
-    };
-  }
-  clearSort() {
-    this._sorting.value = void 0;
-  }
-  //
   // Pinning
   //
   // TODO(burdon): Change to setPinned(on/off).
@@ -916,15 +1052,21 @@ var TableModel = class extends Resource2 {
     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 signal3 } from "@preact/signals-core";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/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 = signal3({
+    this._state = signal4({
       type: "closed"
     });
     this._triggerRef = {
@@ -984,8 +1126,8 @@ var ModalController = class {
           onCreate
         };
       } else {
-        log2.warn("anchor cell not found while creating new ref", void 0, {
-          F: __dxlog_file3,
+        log.warn("anchor cell not found while creating new ref", void 0, {
+          F: __dxlog_file2,
           L: 86,
           S: this,
           C: (f, a) => f(...a)
@@ -1007,14 +1149,14 @@ var ModalController = class {
 };
 
 // packages/ui/react-ui-table/src/model/table-presentation.ts
-import { signal as signal4 } from "@preact/signals-core";
-import { FormatEnum as FormatEnum3, getValue as getValue2 } from "@dxos/echo-schema";
+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 = signal4({
+  constructor(model, _visibleRange = signal5({
     start: {
       row: 0,
       col: 0
@@ -1053,19 +1195,20 @@ var TablePresentation = class {
       const { props } = this.model.projection.getFieldProjection(field.id);
       const cell = {
         get value() {
-          const value = getValue2(obj, field.path);
+          const value = getValue3(obj, field.path);
           if (value == null) {
             return "";
           }
           switch (props.format) {
-            case FormatEnum3.Boolean: {
+            case FormatEnum4.Boolean:
+            case FormatEnum4.SingleSelect: {
               return "";
             }
-            case FormatEnum3.Ref: {
+            case FormatEnum4.Ref: {
               if (!field.referencePath) {
                 return "";
               }
-              return getValue2(value.target, field.referencePath);
+              return getValue3(value.target, field.referencePath);
             }
             default: {
               return formatForDisplay2({
@@ -1092,8 +1235,8 @@ var TablePresentation = class {
       if (classes.length > 0) {
         cell.className = mx(classes.flat());
       }
-      if (props.format === FormatEnum3.Ref && props.referenceSchema) {
-        const targetObj = getValue2(obj, field.path)?.target;
+      if (props.format === FormatEnum4.Ref && props.referenceSchema) {
+        const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
           cell.accessoryHtml = tableButtons.referencedCell.render({
             targetId: targetObj.id,
@@ -1101,8 +1244,8 @@ var TablePresentation = class {
           });
         }
       }
-      if (props.format === FormatEnum3.Boolean) {
-        const value = getValue2(obj, field.path);
+      if (props.format === FormatEnum4.Boolean) {
+        const value = getValue3(obj, field.path);
         cell.accessoryHtml = tableControls.switch.render({
           colIndex,
           rowIndex: displayIndex,
@@ -1110,6 +1253,16 @@ var TablePresentation = class {
         });
         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
@@ -1132,6 +1285,8 @@ var TablePresentation = class {
     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
@@ -1140,9 +1295,16 @@ var TablePresentation = class {
         value: props.title ?? field.path,
         readonly: true,
         resizeHandle: "col",
-        accessoryHtml: tableButtons.columnSettings.render({
+        accessoryHtml: `
+          ${direction !== void 0 ? tableButtons.sort.render({
+          fieldId: field.id,
+          direction
+        }) : ""}
+          ${tableButtons.columnSettings.render({
           fieldId: field.id
-        })
+        })}
+        `,
+        className: "!bg-gridHeader"
       };
     }
     return cells;
@@ -1192,13 +1354,14 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableControls.checkbox.render({
           rowIndex: 0,
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1208,11 +1371,12 @@ var TablePresentation = class {
         col: 0,
         row: 0
       })]: {
-        value: "",
         accessoryHtml: tableButtons.addColumn.render({
           disabled: (this.model.table.view?.target?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
         }),
-        readonly: true
+        className: "!bg-gridHeader",
+        readonly: true,
+        value: ""
       }
     };
   }
@@ -1220,7 +1384,7 @@ var TablePresentation = class {
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
 import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+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";
 
@@ -1264,7 +1428,7 @@ var completion = ({ debug, onQuery, onMatch }) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+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,
@@ -1282,7 +1446,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     const field = model.projection.view.fields[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file4,
+      F: __dxlog_file3,
       L: 67,
       S: void 0,
       A: [
@@ -1356,7 +1520,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case FormatEnum4.Ref: {
+        case FormatEnum5.Ref: {
           extension2.push([
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),
@@ -1432,7 +1596,7 @@ var determineNavigationDelta = ({ key, shift }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var __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 = {
@@ -1500,6 +1664,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
           modals.showReferencePanel(data.targetId, data.schemaId);
           break;
         }
+        case "sort": {
+          model?.sorting?.toggleSort(data.fieldId);
+          break;
+        }
       }
       return;
     }
@@ -1600,8 +1768,8 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     if (model && props.referenceSchema && field.referencePath) {
       const space = getSpace4(model.table);
       invariant3(space, void 0, {
-        F: __dxlog_file5,
-        L: 260,
+        F: __dxlog_file4,
+        L: 264,
         S: void 0,
         A: [
           "space",
@@ -1612,7 +1780,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       if (schema) {
         const { objects } = await space.db.query(Filter.schema(schema)).run();
         const options = objects.map((obj) => {
-          const value = getValue3(obj, field.referencePath);
+          const value = getValue4(obj, field.referencePath);
           if (!value || typeof value !== "string") {
             return void 0;
           }
@@ -1685,79 +1853,76 @@ var Table = {
   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"
-};
-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))));
-};
-
-// 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 Editing = () => {
-  const { onAction } = useToolbarContext("Editing");
-  const { t } = useTranslation4(translationKey);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
-    value: "add-row",
+// 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",
-    "data-testid": "table.toolbar.add-row",
-    onClick: () => onAction?.({
-      type: "add-row"
-    })
-  }, t("add row")));
-};
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { t } = useTranslation4(translationKey);
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
-    value: "comment",
+    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",
-    "data-testid": "table.toolbar.comment",
-    onClick: () => onAction?.({
-      type: "comment"
-    })
-  }, t("create comment")));
+    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 Toolbar = {
-  Root: ToolbarRoot,
-  Editing,
-  Actions,
-  Separator: ToolbarSeparator
+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
@@ -1804,8 +1969,8 @@ export {
   TableModel,
   TablePresentation,
   TableSchema,
+  TableToolbar,
   TableType,
-  Toolbar,
   initializeTable,
   renderCheckbox,
   renderSwitch,
@@ -1813,7 +1978,6 @@ export {
   tableControls,
   touch,
   translations_default as translations,
-  useTableModel,
-  useToolbarContext
+  useTableModel
 };
 //# sourceMappingURL=index.mjs.map