@dxos/react-ui-table 0.6.14-staging.e15392e → 0.7.1-staging.599df14

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

@@ -0,0 +1,1399 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  TableType
+} from "./chunk-DWQ4KGLD.mjs";
+
+// packages/ui/react-ui-table/src/translations.ts
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "object placeholder": "New table",
+        "create object label": "Create table",
+        "table name placeholder": "Table name",
+        "settings title": "Table settings",
+        "table schema label": "Schema",
+        "new schema": "New schema",
+        "continue label": "Continue",
+        "create stack section label": "Create table",
+        "add row": "Add row",
+        "create comment": "Create thread",
+        "column action sort descending": "Sort Descending",
+        "column action sort ascending": "Sort Ascending",
+        "column action clear sorting": "Clear Sorting",
+        "column action settings": "Column Settings",
+        "column action delete": "Delete Column",
+        "delete row label": "Delete row",
+        "bulk delete row label": "Delete selected rows",
+        "column deleted label": "Column deleted",
+        "new column button label": "Create column"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+import React5, { forwardRef, useCallback as useCallback3, useImperativeHandle, useState as useState2 } from "react";
+import { getValue } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { Filter, getSpace as getSpace2, fullyQualifiedId } from "@dxos/react-client/echo";
+import { useAttention } from "@dxos/react-ui-attention";
+import { Grid, closestCell } from "@dxos/react-ui-grid";
+import { mx } 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 }) => {
+  const { t } = useTranslation(translationKey);
+  const state = model?.modalController.state.value;
+  if (!model || state?.type !== "column") {
+    return null;
+  }
+  const currentSort = model.sorting;
+  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: state?.type === "column",
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
+    virtualRef: model.modalController.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, {
+    onClick: () => model.setSort(state.fieldId, "desc")
+  }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.setSort(state.fieldId, "asc")
+  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.clearSort()
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.deleteColumn(state.fieldId)
+  }, t("column action delete")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.modalController.openColumnSettings()
+  }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
+};
+
+// packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
+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 }) => {
+  const [newField, setNewField] = useState();
+  const state = model?.modalController.state.value;
+  const space = getSpace(model?.table);
+  useEffect(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+      setNewField(model.projection.createFieldProjection());
+    } else {
+      setNewField(void 0);
+    }
+  }, [
+    model?.projection,
+    state
+  ]);
+  const existingField = useMemo(() => {
+    if (state?.type === "columnSettings") {
+      const { mode } = state;
+      if (mode.type === "edit") {
+        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
+      }
+    }
+    return void 0;
+  }, [
+    model?.table?.view?.fields,
+    state
+  ]);
+  const field = existingField ?? newField;
+  const handleClose = useCallback(() => {
+    model?.modalController.close();
+  }, [
+    model?.modalController
+  ]);
+  const handleCancel = useCallback(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+      model?.projection?.deleteFieldProjection(newField.id);
+    }
+  }, [
+    model?.projection,
+    state,
+    newField
+  ]);
+  if (!model?.table?.view || !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
+  }), /* @__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,
+    projection: model.projection,
+    field,
+    registry: space?.db.schemaRegistry,
+    onClose: handleClose,
+    onCancel: handleCancel
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu2.Arrow, null))));
+};
+
+// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
+import React3 from "react";
+import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var RowActionsMenu = ({ model }) => {
+  const { t } = useTranslation2(translationKey);
+  const state = model.modalController.state.value;
+  const hasSelection = model.selection.hasSelection.value;
+  if (state?.type !== "row") {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(DropdownMenu3.Root, {
+    modal: false,
+    open: true,
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu3.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React3.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Item, {
+    onClick: () => model.deleteRow(state.rowIndex)
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React3.createElement(DropdownMenu3.Arrow, null)));
+};
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+import React4, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { FormatEnum as FormatEnum2 } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+import { editorKeys, GridCellEditor, useGridContext } 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 = ({ onQuery, onMatch }) => {
+  return [
+    EditorView.theme({
+      ".cm-completionDialog": {
+        width: "var(--dx-gridCellWidth)"
+      }
+    }),
+    autocompletion({
+      icons: false,
+      activateOnTyping: true,
+      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/util/grid.ts
+var fromGridCell = ({ col, row }) => {
+  return `${col},${row}`;
+};
+var toGridCell = (cell) => {
+  const [col, row] = cell.split(",").map(Number);
+  return {
+    row,
+    col
+  };
+};
+
+// 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, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { log } from "@dxos/log";
+import { PublicKey } from "@dxos/react-client";
+import { create } 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 = ({ space, table }) => {
+  log.info("initializeTable", {
+    table
+  }, {
+    F: __dxlog_file,
+    L: 26,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  const ContactSchema = TypedObject({
+    typename: `example.com/type/${PublicKey.random().truncate()}`,
+    version: "0.1.0"
+  })({
+    name: S.optional(S.String).annotations({
+      [AST.TitleAnnotationId]: "Name"
+    }),
+    email: S.optional(Format.Email),
+    salary: S.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: FormatEnum.Ref,
+      referenceSchema: contactSchema.typename,
+      title: "Manager"
+    }
+  });
+  space.db.add(create(contactSchema, {}));
+  return contactSchema;
+};
+
+// packages/ui/react-ui-table/src/util/table-buttons.ts
+var TABLE_ATTRS = {
+  columnSettings: "data-table-column-settings-button",
+  rowMenu: "data-table-row-menu-button",
+  newColumn: "data-table-new-column-button"
+};
+var ICONS = {
+  columnSettings: "ph--caret-down--regular",
+  rowMenu: "ph--dots-three--regular",
+  newColumn: "ph--plus--regular"
+};
+var createButtonHtml = ({ button, value = "", disabled = false }) => {
+  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}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+};
+var tableButtons = {
+  columnSettings: {
+    attr: TABLE_ATTRS.columnSettings,
+    icon: ICONS.columnSettings,
+    render: ({ fieldId }) => createButtonHtml({
+      button: "columnSettings",
+      value: fieldId
+    })
+  },
+  rowMenu: {
+    attr: TABLE_ATTRS.rowMenu,
+    icon: ICONS.rowMenu,
+    render: ({ rowIndex }) => createButtonHtml({
+      button: "rowMenu",
+      value: rowIndex.toString()
+    })
+  },
+  addColumn: {
+    attr: TABLE_ATTRS.newColumn,
+    icon: ICONS.newColumn,
+    render: ({ disabled } = {}) => createButtonHtml({
+      button: "newColumn",
+      disabled
+    })
+  }
+};
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
+  const { editing } = useGridContext("TableCellEditor", __gridScope);
+  const fieldProjection = useMemo2(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = toGridCell(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant(fieldProjection2, void 0, {
+      F: __dxlog_file2,
+      L: 49,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  const handleClose = useCallback2((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const handleBlur = useCallback2((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    if (value !== void 0) {
+      model.setCellData(cell, value);
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const extension = useMemo2(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extension2 = [
+      editorKeys({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case FormatEnum2.Ref: {
+          extension2.push([
+            completion({
+              onQuery: (text) => onQuery(fieldProjection, text),
+              onMatch: (data) => {
+                if (model && editing) {
+                  const cell = toGridCell(editing.index);
+                  model.setCellData(cell, data);
+                  onEnter?.(cell);
+                  onFocus?.();
+                }
+              }
+            })
+          ]);
+          break;
+        }
+      }
+    }
+    return extension2;
+  }, [
+    model,
+    editing,
+    fieldProjection,
+    handleClose
+  ]);
+  const getCellContent = useCallback2(() => {
+    if (model && editing) {
+      const value = model.getCellData(toGridCell(editing.index));
+      return value !== void 0 ? String(value) : "";
+    }
+  }, [
+    model,
+    editing
+  ]);
+  return /* @__PURE__ */ React4.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_file3 = "/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__ */ React5.createElement("div", {
+    role: "none",
+    className: mx("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-max" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-max [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-max")
+  }, children);
+};
+var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = useState2(null);
+  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
+  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 = (increment, delta) => {
+    dxGrid?.refocus(increment, delta);
+  };
+  const handleEnter = useCallback3((cell) => {
+    if (model && cell.row === model.getRowCount() - 1) {
+      model.insertRow(cell.row);
+    }
+  }, [
+    model
+  ]);
+  const handleKeyDown = useCallback3((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 = useCallback3((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
+  ]);
+  const handleWheel = useCallback3((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const handleQuery = useCallback3(async ({ field, props }, _text) => {
+    if (model && props.referenceSchema && field.referencePath) {
+      const space = getSpace2(model.table);
+      invariant2(space, void 0, {
+        F: __dxlog_file3,
+        L: 158,
+        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();
+        return 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 [];
+  }, [
+    model
+  ]);
+  if (!model) {
+    return /* @__PURE__ */ React5.createElement("span", {
+      role: "none",
+      className: "attention-surface"
+    });
+  }
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Grid.Root, {
+    id: model.table.id ?? "table-grid"
+  }, /* @__PURE__ */ React5.createElement(TableCellEditor, {
+    model,
+    onEnter: handleEnter,
+    onFocus: handleFocus,
+    onQuery: handleQuery
+  }), /* @__PURE__ */ React5.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__ */ React5.createElement(RowActionsMenu, {
+    model
+  }), /* @__PURE__ */ React5.createElement(ColumnActionsMenu, {
+    model
+  }), /* @__PURE__ */ React5.createElement(ColumnSettings, {
+    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 React7 from "react";
+import { Toolbar as NaturalToolbar2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+
+// packages/ui/react-ui-table/src/components/Toolbar/common.tsx
+import React6 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__ */ React6.createElement("div", {
+  role: "separator",
+  className: "grow"
+});
+var ToolbarButton = ({ icon, children, ...props }) => {
+  return /* @__PURE__ */ React6.createElement(Tooltip.Root, null, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React6.createElement(Icon, {
+    icon,
+    size: 5
+  }), /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React6.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__ */ React7.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React7.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 } = useTranslation3(translationKey);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+    value: "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 } = useTranslation3(translationKey);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+    value: "comment",
+    icon: "ph--chat-text--regular",
+    "data-testid": "table.toolbar.comment",
+    onClick: () => onAction?.({
+      type: "comment"
+    })
+  }, t("create comment")));
+};
+var Toolbar = {
+  Root: ToolbarRoot,
+  Editing,
+  Actions,
+  Separator: ToolbarSeparator
+};
+
+// 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 { 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";
+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;
+      }
+      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.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;
+      }
+      return rows.every((row) => this._selection.value.has(row.id));
+    });
+    this.getSelectedRows = () => {
+      const selectedIds = this._validSelectedIds.value;
+      return this._rows.value.filter((row) => selectedIds.has(row.id));
+    };
+    this.isRowIndexSelected = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      return this._selection.value.has(row.id);
+    };
+    this.isObjectSelected = (object) => {
+      return this._selection.value.has(object.id);
+    };
+    this.toggleSelectionForRowIndex = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      const newSelection = new Set(this._selection.value);
+      if (newSelection.has(row.id)) {
+        newSelection.delete(row.id);
+      } else {
+        newSelection.add(row.id);
+      }
+      this._selection.value = newSelection;
+    };
+    this.setSelection = (mode) => {
+      this._selection.value = mode === "all" ? new Set(this._rows.value.map((row) => row.id)) : /* @__PURE__ */ new Set();
+    };
+  }
+  async _open() {
+    const selectionWatcher = effect(() => {
+      touch(this._selection.value);
+      this._onSelectionChanged?.();
+    });
+    this._ctx.onDispose(selectionWatcher);
+  }
+  //
+  // Getters
+  //
+  get selection() {
+    return this._selection;
+  }
+  get hasSelection() {
+    return this._hasSelection;
+  }
+  get allRowsSeleted() {
+    return this._allSelected;
+  }
+};
+
+// 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" : ""}/>`;
+};
+var tableControls = {
+  checkbox: {
+    attributes: checkboxAttributes,
+    render: renderCheckbox
+  }
+};
+
+// packages/ui/react-ui-table/src/model/table-model.ts
+var __dxlog_file4 = "/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: [],
+    bottom: []
+  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
+    super();
+    this.id = `table-model-${PublicKey2.random().truncate()}`;
+    this._visibleRange = signal3({
+      start: {
+        row: 0,
+        col: 0
+      },
+      end: {
+        row: 0,
+        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 values = {};
+      const fields = this._table.view?.fields ?? [];
+      const addCell = (obj, field, colIndex, displayIndex) => {
+        const { props } = this._projection.getFieldProjection(field.id);
+        const value = {
+          get value() {
+            const value2 = getValue2(obj, field.path);
+            if (value2 == null) {
+              return "";
+            }
+            switch (props.format) {
+              case FormatEnum3.Ref: {
+                if (!field.referencePath) {
+                  return "";
+                }
+                return getValue2(value2, field.referencePath);
+              }
+              default: {
+                return formatForDisplay({
+                  type: props.type,
+                  format: props.format,
+                  value: value2
+                });
+              }
+            }
+          }
+        };
+        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) {
+          value.className = mx2(classes.flat());
+        }
+        const idx = fromGridCell({
+          col: colIndex,
+          row: displayIndex
+        });
+        values[idx] = value;
+      };
+      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 values;
+    };
+    this.getHeaderCells = (range) => {
+      const values = {};
+      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);
+        values[fromGridCell({
+          col,
+          row: 0
+        })] = {
+          value: props.title ?? field.path,
+          readonly: true,
+          resizeHandle: "col",
+          accessoryHtml: tableButtons.columnSettings.render({
+            fieldId: field.id
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectionColumnCells = (range) => {
+      const values = {};
+      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);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? mx2(classes) : void 0,
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: row,
+            checked: isSelected
+          })
+        };
+      }
+      return values;
+    };
+    this.getActionColumnCells = (range) => {
+      const values = {};
+      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);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? mx2(classes) : void 0,
+          accessoryHtml: tableButtons.rowMenu.render({
+            rowIndex: row
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectAllCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: 0,
+            header: true,
+            checked: this._selection.allRowsSeleted.value
+          }),
+          readonly: true
+        }
+      };
+    };
+    this.getNewColumnCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableButtons.addColumn.render({
+            disabled: (this._table.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
+          }),
+          readonly: true
+        }
+      };
+    };
+    //
+    // Data
+    //
+    this.setRows = (obj) => {
+      this._rows.value = obj;
+    };
+    this.getRowCount = () => this._rows.value.length;
+    this.getColumnCount = () => this.table.view?.fields.length ?? 0;
+    this.insertRow = (rowIndex) => {
+      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      this._onInsertRow?.(row);
+    };
+    this.deleteRow = (rowIndex) => {
+      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const obj = this._rows.value[row];
+      const objectsToDelete = [];
+      if (this._selection.hasSelection.value) {
+        const selectedRows = this._selection.getSelectedRows();
+        objectsToDelete.push(...selectedRows);
+      } else {
+        objectsToDelete.push(obj);
+      }
+      this._onDeleteRows?.(row, objectsToDelete);
+    };
+    this.getCellData = ({ col, row }) => {
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return void 0;
+      }
+      const field = fields[col];
+      const dataIndex = this._displayToDataIndex.get(row) ?? 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 FormatEnum3.Ref: {
+          if (!field.referencePath) {
+            return "";
+          }
+          return getValue2(value, field.referencePath);
+        }
+        default: {
+          return formatForEditing({
+            type: props.type,
+            format: props.format,
+            value
+          });
+        }
+      }
+    };
+    this.setCellData = ({ col, row }, value) => {
+      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return;
+      }
+      const field = fields[col];
+      const { props } = this._projection.getFieldProjection(field.id);
+      switch (props.format) {
+        case FormatEnum3.Ref: {
+          setValue(this._rows.value[rowIdx], field.path, value);
+          break;
+        }
+        default: {
+          setValue(this._rows.value[rowIdx], field.path, parseValue({
+            type: props.type,
+            format: props.format,
+            value
+          }));
+          break;
+        }
+      }
+    };
+    //
+    // 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._pinnedRows = pinnedRows;
+    this._onInsertRow = onInsertRow;
+    this._onDeleteRows = onDeleteRows;
+    this._onDeleteColumn = onDeleteColumn;
+    this._onCellUpdate = onCellUpdate;
+    this._onRowOrderChanged = onRowOrderChanged;
+  }
+  get table() {
+    return this._table;
+  }
+  get projection() {
+    return this._projection;
+  }
+  get pinnedRows() {
+    return this._pinnedRows;
+  }
+  get columnMeta() {
+    invariant3(this._columnMeta, void 0, {
+      F: __dxlog_file4,
+      L: 124,
+      S: this,
+      A: [
+        "this._columnMeta",
+        ""
+      ]
+    });
+    return this._columnMeta;
+  }
+  get sorting() {
+    return this._sorting.value;
+  }
+  get modalController() {
+    return this._modalController;
+  }
+  get selection() {
+    return this._selection;
+  }
+  //
+  // Initialisation
+  //
+  async _open() {
+    this.initializeColumnMeta();
+    this.initializeSorting();
+    this.initializeEffects();
+    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    await this._selection.open(this._ctx);
+  }
+  initializeColumnMeta() {
+    this._columnMeta = computed2(() => {
+      const fields = this._table.view?.fields ?? [];
+      const meta = Object.fromEntries(fields.map((field, index) => [
+        index,
+        {
+          size: field?.size ?? 256,
+          resizeable: true
+        }
+      ]));
+      return {
+        grid: meta,
+        frozenColsStart: {
+          0: {
+            size: 30,
+            resizeable: false
+          }
+        },
+        frozenColsEnd: {
+          0: {
+            size: 40,
+            resizeable: false
+          }
+        }
+      };
+    });
+  }
+  initializeSorting() {
+    this._sortedRows = computed2(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
+      }
+      const field = this._table.view?.fields.find((field2) => field2.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
+      }
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const value = 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);
+        }
+      }
+      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
+          });
+        }));
+      }
+      return () => rowEffects.forEach((cleanup) => cleanup());
+    });
+    this._ctx.onDispose(rowEffectManager);
+  }
+  //
+  // Column Operations
+  //
+  deleteColumn(fieldId) {
+    if (!this.table.view) {
+      return;
+    }
+    const field = this.table.view.fields.find((field2) => field2.id === fieldId);
+    if (field && this._onDeleteColumn) {
+      if (this._sorting.value?.fieldId === fieldId) {
+        this.clearSort();
+      }
+      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;
+      }
+    }
+  }
+  //
+  // 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);
+  }
+};
+
+// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+var useTableModel = ({ objects, table, projection, ...props }) => {
+  const [model, setModel] = useState3();
+  useEffect2(() => {
+    if (!table || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        table,
+        projection,
+        ...props
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    table,
+    projection
+  ]);
+  useEffect2(() => {
+    if (objects) {
+      model?.setRows(objects);
+    }
+  }, [
+    model,
+    objects
+  ]);
+  return model;
+};
+export {
+  Table,
+  TableType,
+  Toolbar,
+  fromGridCell,
+  initializeTable,
+  tableButtons,
+  toGridCell,
+  touch,
+  translations_default as translations,
+  useTableModel,
+  useToolbarContext
+};
+//# sourceMappingURL=index.mjs.map