@dxos/react-ui-table 0.8.4-main.c1de068 → 0.8.4-main.f5c0578

package/dist/lib/browser/index.mjs

@@ -16,7 +16,7 @@ import {
   touch,
   useAddRow,
   useTableModel
-} from "./chunk-5XLSHLOG.mjs";
+} from "./chunk-ZAOSIG3L.mjs";
 import "./chunk-L2LSB6KV.mjs";
 
 // src/translations.ts
@@ -29,8 +29,8 @@ var translations = [
         "create object label": "Create table",
         "table name placeholder": "Table name",
         "settings title": "Table settings",
-        "table schema label": "Schema",
-        "new schema": "New schema",
+        "table schema label": "Record type",
+        "new schema": "New record type",
         "continue label": "Continue",
         "create stack section label": "Create table",
         "add row label": "Add row",
@@ -53,270 +53,41 @@ var translations = [
 
 // src/components/Table/Table.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState4, useMemo as useMemo5, useEffect as useEffect4 } from "react";
+import React8, { forwardRef, useCallback as useCallback5, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo5, useState as useState4 } from "react";
 import { Filter } from "@dxos/echo";
 import { getValue } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { getSpace as getSpace2 } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
-import { closestCell, Grid, gridSeparatorInlineEnd, gridSeparatorBlockEnd } from "@dxos/react-ui-grid";
+import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { isNotFalsy, safeParseInt } from "@dxos/util";
 
-// src/components/Table/ColumnActionsMenu.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { DropdownMenu, useTranslation } from "@dxos/react-ui";
-var ColumnActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    const state = modals.state.value;
-    if (state?.type !== "column") {
-      return null;
-    }
-    const currentSort = model.sorting?.sorting;
-    const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-    return /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
-      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.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.sorting?.setSort(state.fieldId, "asc")
-    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-clear-sort",
-      onClick: () => model.sorting?.clearSort()
-    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-delete",
-      onClick: () => model.deleteColumn(state.fieldId)
-    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-settings",
-      onClick: () => modals.openColumnSettings()
-    }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Table/ColumnSettings.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { useCallback, useEffect, useMemo, useState } from "react";
-import { Popover } from "@dxos/react-ui";
-import { FieldEditor } from "@dxos/react-ui-form";
-var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
-  var _effect = _useSignals2();
-  try {
-    const [newField, setNewField] = useState();
-    const state = modals.state.value;
-    useEffect(() => {
-      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
-        setNewField(model.projection.createFieldProjection());
-        requestAnimationFrame(() => {
-          onNewColumn();
-        });
-      } else {
-        setNewField(void 0);
-      }
-    }, [
-      model?.projection,
-      state
-    ]);
-    const existingField = useMemo(() => {
-      if (state?.type === "columnSettings") {
-        const { mode } = state;
-        if (mode.type === "edit") {
-          return model?.projection?.fields.find((f) => f.id === mode.fieldId);
-        }
-      }
-      return void 0;
-    }, [
-      model?.projection?.fields,
-      state
-    ]);
-    const field = existingField ?? newField;
-    const handleSave = useCallback(() => {
-      modals.close();
-    }, [
-      modals
-    ]);
-    const handleCancel = useCallback(() => {
-      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
-        model?.projection.deleteFieldProjection(newField.id);
-      }
-    }, [
-      model?.projection,
-      state,
-      newField
-    ]);
-    if (!model?.projection || !field) {
-      return null;
-    }
-    return /* @__PURE__ */ React2.createElement(Popover.Root, {
-      modal: false,
-      open: state?.type === "columnSettings"
-    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
-      classNames: "md:is-64"
-    }, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
-      projection: model.projection,
-      field,
-      registry,
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Table/CreateRefPanel.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { Schema } from "effect";
-import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { live } from "@dxos/live-object";
-import { getSpace } from "@dxos/react-client/echo";
-import { Popover as Popover2 } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
-import { useGridContext } from "@dxos/react-ui-grid";
-var CreateRefPanel = ({ model, modals, __gridScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const { id: gridId } = useGridContext("TableCellEditor", __gridScope);
-    const space = model && getSpace(model?.view);
-    const state = modals.state.value;
-    const schema = useMemo2(() => {
-      if (!space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      if (schema2) {
-        const omit = Schema.omit("id");
-        return omit(schema2);
-      }
-    }, [
-      space,
-      state
-    ]);
-    const handleSave = useCallback2((values) => {
-      if (!model || !space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      if (schema2) {
-        const obj = space.db.add(live(schema2, values));
-        state.onCreate?.(obj);
-      }
-      void modals.close();
-    }, [
-      modals,
-      space,
-      state
-    ]);
-    const handleCancel = useCallback2(() => {
-      if (model) {
-        modals.close();
-      }
-    }, [
-      modals
-    ]);
-    if (!model?.projection) {
-      return null;
-    }
-    return /* @__PURE__ */ React3.createElement(Popover2.Root, {
-      modal: false,
-      open: state?.type === "createRefPanel" && !!schema,
-      onOpenChange: (nextOpen) => {
-        if (model && !nextOpen) {
-          return modals.close();
-        }
-      }
-    }, /* @__PURE__ */ React3.createElement(Popover2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, {
-      classNames: "md:is-64",
-      "data-grid": gridId
-    }, /* @__PURE__ */ React3.createElement(Popover2.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React3.createElement(Form, {
-      schema,
-      values: state.initialValues ?? {},
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Table/RowActionsMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4 from "react";
-import { DropdownMenu as DropdownMenu2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var RowActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation2(translationKey);
-    const hasSelection = model.selection.hasSelection.value;
-    const state = modals.state.value;
-    if (state?.type !== "row") {
-      return null;
-    }
-    return /* @__PURE__ */ React4.createElement(DropdownMenu2.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React4.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
-      "data-testid": "row-menu-delete",
-      onClick: () => model.deleteRow(state.rowIndex)
-    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
-      key: action.id,
-      "data-testid": `row-action-${action.id}`,
-      onClick: () => {
-        modals.close();
-        model.handleRowAction(action.id, state.rowIndex);
-      }
-    }, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(DropdownMenu2.Arrow, null)));
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/components/TableCellEditor/TableCellEditor.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { FormatEnum, TypeEnum } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { useThemeContext } from "@dxos/react-ui";
 import { createMarkdownExtensions } from "@dxos/react-ui-editor";
-import { cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext4, GridCellEditor } from "@dxos/react-ui-grid";
-import { tagPicker, createLinks } from "@dxos/react-ui-tag-picker";
+import { GridCellEditor, cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
+import { createLinks, tagPicker } from "@dxos/react-ui-tag-picker";
 
 // src/components/TableCellEditor/CellValidationMessage.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
-import { useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useGridContext } from "@dxos/react-ui-grid";
 var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals();
   try {
-    const { editing, editBox: box } = useGridContext2("GridSheetCellEditor", __gridScope);
+    const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
     if (!editing || !validationError) {
       return null;
     }
     const bgClass = variant === "error" ? "bg-errorSurface" : "bg-warningSurface";
     const textClass = variant === "error" ? "text-errorSurfaceText" : "text-warningSurfaceText";
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "none",
       className: `absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`,
       style: {
@@ -334,23 +105,62 @@ var CellValidationMessage = ({ validationError, variant = "error", __gridScope }
   }
 };
 
+// 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);
+        }
+      });
+    })
+  ];
+};
+
 // src/components/TableCellEditor/FormCellEditor.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef, useState as useState2 } from "react";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getSnapshot } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { Popover as Popover3 } from "@dxos/react-ui";
-import { Form as Form2 } from "@dxos/react-ui-form";
-import { parseCellIndex, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
+import { Popover } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
 import { getDeep, setDeep } from "@dxos/util";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals2();
   try {
-    const { editing: contextEditing, setEditing } = useGridContext3("ArrayEditor", __gridScope);
-    const [editing, setLocalEditing] = useState2(false);
+    const { editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+    const [editing, setLocalEditing] = useState(false);
     const anchorRef = useRef(null);
-    useEffect2(() => {
+    useEffect(() => {
       if (contextEditing && contextEditing.cellElement) {
         anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
         setLocalEditing(true);
@@ -361,7 +171,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
     }, [
       contextEditing
     ]);
-    const narrowedSchema = useMemo3(() => {
+    const narrowedSchema = useMemo(() => {
       if (!schema) {
         return void 0;
       }
@@ -372,7 +182,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
       JSON.stringify(schema),
       fieldProjection.field.path
     ]);
-    const originalRow = useMemo3(() => {
+    const originalRow = useMemo(() => {
       if (model && contextEditing) {
         const cell = parseCellIndex(contextEditing.index);
         const row = model.getRowAt(cell.row);
@@ -392,14 +202,14 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
       model,
       contextEditing
     ]);
-    const formValues = useMemo3(() => {
+    const formValues = useMemo(() => {
       if (originalRow) {
         return getSnapshot(originalRow);
       }
     }, [
       originalRow
     ]);
-    const handleSave = useCallback3((values) => {
+    const handleSave = useCallback((values) => {
       const path = fieldProjection.field.path;
       const value = getDeep(values, [
         path
@@ -412,73 +222,34 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
       onSave?.();
     }, [
       fieldProjection.field.path,
-      originalRow
-    ]);
-    const handleOpenChange = useCallback3((nextOpen) => {
-      if (nextOpen === false) {
-        setEditing(null);
-        onSave?.();
-      }
-      setLocalEditing(nextOpen);
-    }, []);
-    if (!editing) {
-      return null;
-    }
-    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
-      open: editing,
-      onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
-      virtualRef: anchorRef
-    }), /* @__PURE__ */ React6.createElement(Popover3.Content, {
-      tabIndex: -1,
-      classNames: "popover-card-width density-fine"
-    }, /* @__PURE__ */ React6.createElement(Popover3.Arrow, null), /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, /* @__PURE__ */ React6.createElement(Form2, {
-      values: formValues,
-      schema: narrowedSchema,
-      onSave: handleSave
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// 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);
-        }
-      });
-    })
-  ];
+      originalRow
+    ]);
+    const handleOpenChange = useCallback((nextOpen) => {
+      if (nextOpen === false) {
+        setEditing(null);
+        onSave?.();
+      }
+      setLocalEditing(nextOpen);
+    }, []);
+    if (!editing) {
+      return null;
+    }
+    return /* @__PURE__ */ React2.createElement(Popover.Root, {
+      open: editing,
+      onOpenChange: handleOpenChange
+    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
+      virtualRef: anchorRef
+    }), /* @__PURE__ */ React2.createElement(Popover.Content, {
+      tabIndex: -1,
+      classNames: "popover-card-width density-fine"
+    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form, {
+      values: formValues,
+      schema: narrowedSchema,
+      onSave: handleSave
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
 
 // src/components/TableCellEditor/TableCellEditor.tsx
@@ -490,10 +261,10 @@ var createOption = (text) => ({
 });
 var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQuery, __gridScope }) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals3();
   try {
-    const { editing } = useGridContext4("TableValueEditor", __gridScope);
-    const fieldProjection = useMemo4(() => {
+    const { editing } = useGridContext3("TableValueEditor", __gridScope);
+    const fieldProjection = useMemo2(() => {
       if (!model || !editing) {
         return;
       }
@@ -515,7 +286,7 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQue
       editing
     ]);
     if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum.SingleSelect) {
-      return /* @__PURE__ */ React7.createElement(FormCellEditor, {
+      return /* @__PURE__ */ React3.createElement(FormCellEditor, {
         fieldProjection,
         model,
         schema,
@@ -523,7 +294,7 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQue
         onSave
       });
     }
-    return /* @__PURE__ */ React7.createElement(TableCellEditor, {
+    return /* @__PURE__ */ React3.createElement(TableCellEditor, {
       model,
       modals,
       onEnter,
@@ -542,14 +313,14 @@ var editorSlots = {
   }
 };
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gridScope }) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals3();
   try {
-    const { id: gridId, editing, setEditing } = useGridContext4("TableCellEditor", __gridScope);
+    const { id: gridId, editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
     const suppressNextBlur = useRef2(false);
     const { themeMode } = useThemeContext();
-    const [_validationError, setValidationError] = useState3(null);
-    const [_validationVariant, setValidationVariant] = useState3("error");
-    const fieldProjection = useMemo4(() => {
+    const [validationError, setValidationError] = useState2(null);
+    const [validationVariant, setValidationVariant] = useState2("error");
+    const fieldProjection = useMemo2(() => {
       if (!model || !editing) {
         return;
       }
@@ -570,7 +341,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       model,
       editing
     ]);
-    useEffect3(() => {
+    useEffect2(() => {
       if (!model || !editing || !fieldProjection) {
         setValidationError(null);
         return;
@@ -584,9 +355,9 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
           const draftRows = model.draftRows.value;
           if (row >= 0 && row < draftRows.length) {
             const draftRow = draftRows[row];
-            const validationError = draftRow.validationErrors?.find((error) => error.path === field.path);
-            if (validationError) {
-              setValidationError(validationError.message);
+            const validationError2 = draftRow.validationErrors?.find((error) => error.path === field.path);
+            if (validationError2) {
+              setValidationError(validationError2.message);
               setValidationVariant("warning");
             }
           }
@@ -601,7 +372,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       editing,
       fieldProjection
     ]);
-    const handleEnter = useCallback4(async (value) => {
+    const handleEnter = useCallback2(async (value) => {
       if (!model || !editing) {
         return;
       }
@@ -625,7 +396,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       onFocus,
       setEditing
     ]);
-    const handleBlur = useCallback4(async (value) => {
+    const handleBlur = useCallback2(async (value) => {
       if (!model || !editing) {
         return;
       }
@@ -636,7 +407,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       model,
       editing
     ]);
-    const handleClose = useCallback4(async (value, event) => {
+    const handleClose = useCallback2(async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
@@ -650,7 +421,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
           onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
@@ -673,7 +444,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       setEditing,
       onSave
     ]);
-    const extension = useMemo4(() => {
+    const extension = useMemo2(() => {
       if (!fieldProjection) {
         return [];
       }
@@ -754,7 +525,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       handleClose,
       themeMode
     ]);
-    const getCellContent = useCallback4(() => {
+    const getCellContent = useCallback2(() => {
       if (model && editing) {
         const cell = parseCellIndex2(editing.index);
         const { col } = cell;
@@ -800,11 +571,11 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       model,
       editing
     ]);
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(CellValidationMessage, {
-      validationError: _validationError,
-      variant: _validationVariant,
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
+      validationError,
+      variant: validationVariant,
       __gridScope
-    }), /* @__PURE__ */ React7.createElement(GridCellEditor, {
+    }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
       extension,
       getCellContent,
       onBlur: handleBlur,
@@ -839,6 +610,235 @@ var determineNavigationDelta = ({ key, shift }) => {
   return shift ? -1 : 1;
 };
 
+// src/components/Table/ColumnActionsMenu.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4 from "react";
+import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+var ColumnActionsMenu = ({ model, modals }) => {
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation(translationKey);
+    const state = modals.state.value;
+    if (state?.type !== "column") {
+      return null;
+    }
+    const currentSort = model.sorting?.sorting;
+    const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+    return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-sort-descending",
+      onClick: () => model.sorting?.setSort(state.fieldId, "desc")
+    }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-sort-ascending",
+      onClick: () => model.sorting?.setSort(state.fieldId, "asc")
+    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-clear-sort",
+      onClick: () => model.sorting?.clearSort()
+    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-delete",
+      onClick: () => model.deleteColumn(state.fieldId)
+    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-settings",
+      onClick: () => modals.openColumnSettings()
+    }, t("column action settings"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Table/ColumnSettings.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+import { Popover as Popover2 } from "@dxos/react-ui";
+import { FieldEditor } from "@dxos/react-ui-form";
+var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
+  var _effect = _useSignals5();
+  try {
+    const [newField, setNewField] = useState3();
+    const state = modals.state.value;
+    useEffect3(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+        setNewField(model.projection.createFieldProjection());
+        requestAnimationFrame(() => {
+          onNewColumn();
+        });
+      } else {
+        setNewField(void 0);
+      }
+    }, [
+      model?.projection,
+      state
+    ]);
+    const existingField = useMemo3(() => {
+      if (state?.type === "columnSettings") {
+        const { mode } = state;
+        if (mode.type === "edit") {
+          return model?.projection?.fields.find((f) => f.id === mode.fieldId);
+        }
+      }
+      return void 0;
+    }, [
+      model?.projection?.fields,
+      state
+    ]);
+    const field = existingField ?? newField;
+    const handleSave = useCallback3(() => {
+      modals.close();
+    }, [
+      modals
+    ]);
+    const handleCancel = useCallback3(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+        model?.projection.deleteFieldProjection(newField.id);
+      }
+    }, [
+      model?.projection,
+      state,
+      newField
+    ]);
+    if (!model?.projection || !field) {
+      return null;
+    }
+    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+      modal: false,
+      open: state?.type === "columnSettings"
+    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
+      classNames: "md:is-64"
+    }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
+      projection: model.projection,
+      field,
+      registry,
+      onSave: handleSave,
+      onCancel: handleCancel
+    })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Table/CreateRefPanel.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import { Schema } from "effect";
+import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { live } from "@dxos/live-object";
+import { getSpace } from "@dxos/react-client/echo";
+import { Popover as Popover3 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
+import { useGridContext as useGridContext4 } from "@dxos/react-ui-grid";
+var CreateRefPanel = ({ model, modals, __gridScope }) => {
+  var _effect = _useSignals6();
+  try {
+    const { id: gridId } = useGridContext4("TableCellEditor", __gridScope);
+    const space = model && getSpace(model?.view);
+    const state = modals.state.value;
+    const schema = useMemo4(() => {
+      if (!space || state?.type !== "createRefPanel") {
+        return;
+      }
+      const [schema2] = space.db.schemaRegistry.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const omit = Schema.omit("id");
+        return omit(schema2);
+      }
+    }, [
+      space,
+      state
+    ]);
+    const handleSave = useCallback4((values) => {
+      if (!model || !space || state?.type !== "createRefPanel") {
+        return;
+      }
+      const [schema2] = space.db.schemaRegistry.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const obj = space.db.add(live(schema2, values));
+        state.onCreate?.(obj);
+      }
+      void modals.close();
+    }, [
+      modals,
+      space,
+      state
+    ]);
+    const handleCancel = useCallback4(() => {
+      if (model) {
+        modals.close();
+      }
+    }, [
+      modals
+    ]);
+    if (!model?.projection) {
+      return null;
+    }
+    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
+      modal: false,
+      open: state?.type === "createRefPanel" && !!schema,
+      onOpenChange: (nextOpen) => {
+        if (model && !nextOpen) {
+          return modals.close();
+        }
+      }
+    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React6.createElement(Popover3.Portal, null, /* @__PURE__ */ React6.createElement(Popover3.Content, {
+      classNames: "md:is-64",
+      "data-grid": gridId
+    }, /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React6.createElement(Form2, {
+      schema,
+      values: state.initialValues ?? {},
+      onSave: handleSave,
+      onCancel: handleCancel
+    })), /* @__PURE__ */ React6.createElement(Popover3.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Table/RowActionsMenu.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7 from "react";
+import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var RowActionsMenu = ({ model, modals }) => {
+  var _effect = _useSignals7();
+  try {
+    const { t } = useTranslation2(translationKey);
+    const hasSelection = model.selection.hasSelection.value;
+    const state = modals.state.value;
+    if (state?.type !== "row") {
+      return null;
+    }
+    return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu2.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+      "data-testid": "row-menu-delete",
+      onClick: () => model.deleteRow(state.rowIndex)
+    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+      key: action.id,
+      "data-testid": `row-action-${action.id}`,
+      onClick: () => {
+        modals.close();
+        model.handleRowAction(action.id, state.rowIndex);
+      }
+    }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Arrow, null)));
+  } finally {
+    _effect.f();
+  }
+};
+
 // src/components/Table/Table.tsx
 var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var TableRoot = ({ children, role = "article" }) => {
@@ -904,12 +904,35 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
             dxGrid.updateCells(true);
             dxGrid.requestUpdate();
           }
+        },
+        focusDraft: () => {
+          requestAnimationFrame(() => {
+            dxGrid.setFocus({
+              plane: "frozenRowsEnd",
+              col: 0,
+              row: 0
+            });
+            dxGrid.refocus();
+          });
         }
       };
     }, [
       presentation,
       dxGrid
     ]);
+    const handleSaveDraftRow = useCallback5((rowIndex = 0) => {
+      if (model && dxGrid) {
+        const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+        if (didCommitSuccessfully) {
+          requestAnimationFrame(() => {
+            dxGrid.scrollToEndRow();
+          });
+        }
+      }
+    }, [
+      model,
+      dxGrid
+    ]);
     const handleGridClick = useCallback5((event) => {
       const rowIndex = safeParseInt(event.target.closest("[aria-rowindex]")?.ariaRowIndex ?? "");
       if (rowIndex != null) {
@@ -951,14 +974,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
             break;
           }
           case "saveDraftRow": {
-            if (model) {
-              const didCommitSuccessfully = model.commitDraftRow(data.rowIndex);
-              if (dxGrid && didCommitSuccessfully) {
-                requestAnimationFrame(() => {
-                  dxGrid.scrollToEndRow();
-                });
-              }
-            }
+            handleSaveDraftRow();
             break;
           }
         }
@@ -997,29 +1013,32 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       modals,
       dxGrid
     ]);
-    const handleFocus = useCallback5((increment, delta) => {
-      if (dxGrid) {
-        dxGrid.refocus(increment, delta);
-      }
-    }, [
-      dxGrid
-    ]);
-    const handleEnter = useCallback5((cell) => {
-      if (!model?.features.dataEditable) {
-        return;
-      }
-      if (model && cell.row === model.getRowCount() - 1) {
-        model.insertRow();
-        if (dxGrid) {
-          requestAnimationFrame(() => {
-            dxGrid?.scrollToRow(cell.row + 1);
-            dxGrid?.refocus("row", 1);
+    const handleFocus = useCallback5((increment, delta, cell) => {
+      if (dxGrid && model) {
+        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1) {
+          if (draftRowCount < 1) {
+            model.insertRow();
+          }
+          dxGrid.setFocus({
+            plane: "frozenRowsEnd",
+            col: 0,
+            row: 0
+          });
+        } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
+          handleSaveDraftRow(cell.row);
+          model.insertRow();
+          dxGrid.setFocus({
+            plane: "frozenRowsEnd",
+            col: 0,
+            row: 0
           });
+        } else {
+          dxGrid.refocus(increment, delta);
         }
       }
     }, [
-      model,
-      dxGrid
+      dxGrid,
+      model
     ]);
     const handleKeyDown = useCallback5((event) => {
       if (!model?.features.dataEditable) {
@@ -1032,7 +1051,11 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       switch (event.key) {
         case "Backspace":
         case "Delete": {
-          model.setCellData(cell, void 0);
+          try {
+            model.setCellData(cell, void 0);
+            event.preventDefault();
+          } catch {
+          }
           break;
         }
       }
@@ -1069,7 +1092,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
         const space = getSpace2(model.view);
         invariant3(space, void 0, {
           F: __dxlog_file3,
-          L: 325,
+          L: 336,
           S: void 0,
           A: [
             "space",
@@ -1114,6 +1137,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     ]);
     const handleSave = useCallback5(() => {
       dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
     }, [
       dxGrid
     ]);
@@ -1129,7 +1153,6 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       modals,
       schema,
-      onEnter: handleEnter,
       onFocus: handleFocus,
       onQuery: handleQuery,
       onSave: handleSave
@@ -1142,7 +1165,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       overscroll: "trap",
       onAxisResize: handleAxisResize,
       onClick: handleGridClick,
-      onKeyDown: handleKeyDown,
+      onKeyDownCapture: handleKeyDown,
       onWheelCapture: handleWheel,
       ref: setDxGrid
     }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
@@ -1170,7 +1193,7 @@ var Table = {
 
 // src/components/Table/DynamicTable.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } from "react";
+import React9, { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef3 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
@@ -1250,7 +1273,7 @@ import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking
 import { Rx } from "@effect-rx/rx-react";
 import React10, { useMemo as useMemo7 } from "react";
 import { live as live2 } from "@dxos/live-object";
-import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
+import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
 import { rxFromSignal } from "@dxos/react-ui-menu";
 var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
   const add = createMenuAction("add-row", onAdd, {