@dxos/react-ui-table 0.8.4-main.2e9d522 → 0.8.4-main.3c1ae3b

package/dist/lib/browser/index.mjs

@@ -7,7 +7,6 @@ import {
   TableModel,
   TablePresentation,
   cellClassesForRowSelection,
-  createTable,
   getBaseSchema,
   makeDynamicTable,
   narrowSchema,
@@ -15,9 +14,10 @@ import {
   tableControls,
   touch,
   useAddRow,
+  useProjectionModel,
   useTableModel
-} from "./chunk-5XLSHLOG.mjs";
-import "./chunk-L2LSB6KV.mjs";
+} from "./chunk-V7A7ZA5E.mjs";
+import "./chunk-CJQ6T4LL.mjs";
 
 // src/translations.ts
 var translationKey = "react-ui-table";
@@ -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": "Type",
+        "new schema": "New type",
         "continue label": "Continue",
         "create stack section label": "Create table",
         "add row label": "Add row",
@@ -52,271 +52,37 @@ 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 { 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 { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import * as String2 from "effect/String";
+import React7, { forwardRef, useCallback as useCallback4, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo4, useState as useState4 } from "react";
 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 { DxEditRequest } 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 { FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import { EditorView } from "@codemirror/view";
+import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { debounce } from "@dxos/async";
+import { Format as Format2, TypeEnum } from "@dxos/echo/internal";
 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, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
 
 // 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";
-var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
-  var _effect = _useSignals5();
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useGridContext } from "@dxos/react-ui-grid";
+var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }) => {
+  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: {
@@ -335,22 +101,31 @@ var CellValidationMessage = ({ validationError, variant = "error", __gridScope }
 };
 
 // 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 { getSnapshot } from "@dxos/echo-schema";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Filter, Obj } from "@dxos/echo";
+import { Format, Ref, getValue } from "@dxos/echo/internal";
 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 { getDeep, setDeep } from "@dxos/util";
+import { getSnapshot } from "@dxos/live-object";
+import { getSpace } from "@dxos/react-client/echo";
+import { Popover } from "@dxos/react-ui";
+import { Form, omitId } from "@dxos/react-ui-form";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { getDeep, isTruthy, 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 createOptionLabel = [
+  "create new object label",
+  {
+    ns: translationKey
+  }
+];
+var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onCreate, ...formProps }) => {
+  var _effect = _useSignals2();
   try {
-    const { editing: contextEditing, setEditing } = useGridContext3("ArrayEditor", __gridScope);
-    const [editing, setLocalEditing] = useState2(false);
     const anchorRef = useRef(null);
-    useEffect2(() => {
+    const { id: _gridId, editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+    const [editing, setLocalEditing] = useState(false);
+    useEffect(() => {
       if (contextEditing && contextEditing.cellElement) {
         anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
         setLocalEditing(true);
@@ -361,7 +136,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
     }, [
       contextEditing
     ]);
-    const narrowedSchema = useMemo3(() => {
+    const narrowedSchema = useMemo(() => {
       if (!schema) {
         return void 0;
       }
@@ -372,34 +147,92 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
       JSON.stringify(schema),
       fieldProjection.field.path
     ]);
-    const originalRow = useMemo3(() => {
+    const getSchema = useCallback(({ typename }) => {
+      const space = getSpace(model.view);
+      invariant(space, void 0, {
+        F: __dxlog_file,
+        L: 73,
+        S: void 0,
+        A: [
+          "space",
+          ""
+        ]
+      });
+      const schema2 = space.db.schemaRegistry.query({
+        typename,
+        location: [
+          "database",
+          "runtime"
+        ]
+      }).runSync()[0];
+      return {
+        space,
+        schema: schema2
+      };
+    }, [
+      model
+    ]);
+    const refSchema = useMemo(() => {
+      if (fieldProjection.props.format === Format.TypeFormat.Ref && fieldProjection.props.referenceSchema) {
+        const { schema: schema2 } = getSchema({
+          typename: fieldProjection.props.referenceSchema
+        });
+        return schema2;
+      }
+      return null;
+    }, [
+      fieldProjection.props.format,
+      fieldProjection.props.referenceSchema,
+      getSchema
+    ]);
+    const createSchema = useMemo(() => refSchema ? omitId(refSchema) : null, [
+      refSchema
+    ]);
+    const originalRow = useMemo(() => {
       if (model && contextEditing) {
         const cell = parseCellIndex(contextEditing.index);
-        const row = model.getRowAt(cell.row);
-        invariant(row, void 0, {
-          F: __dxlog_file,
-          L: 55,
-          S: void 0,
-          A: [
-            "row",
-            ""
-          ]
-        });
-        return row;
+        if (model.isDraftCell(cell)) {
+          const draftRow = model.draftRows.value[cell.row];
+          invariant(draftRow, void 0, {
+            F: __dxlog_file,
+            L: 97,
+            S: void 0,
+            A: [
+              "draftRow",
+              ""
+            ]
+          });
+          return draftRow.data;
+        } else {
+          const row = model.getRowAt(cell.row);
+          invariant(row, void 0, {
+            F: __dxlog_file,
+            L: 101,
+            S: void 0,
+            A: [
+              "row",
+              ""
+            ]
+          });
+          return row;
+        }
       }
       return void 0;
     }, [
       model,
       contextEditing
     ]);
-    const formValues = useMemo3(() => {
-      if (originalRow) {
-        return getSnapshot(originalRow);
-      }
-    }, [
+    const formValues = useMemo(() => originalRow ? getSnapshot(originalRow) : {}, [
       originalRow
     ]);
-    const handleSave = useCallback3((values) => {
+    const handleOpenChange = useCallback((nextOpen) => {
+      if (nextOpen === false) {
+        setEditing(null);
+        onSave?.();
+      }
+      setLocalEditing(nextOpen);
+    }, []);
+    const handleSave = useCallback((values) => {
       const path = fieldProjection.field.path;
       const value = getDeep(values, [
         path
@@ -407,93 +240,99 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) =
       setDeep(originalRow, [
         path
       ], value);
+      contextEditing?.cellElement?.focus();
       setEditing(null);
       setLocalEditing(false);
       onSave?.();
     }, [
       fieldProjection.field.path,
+      onSave,
+      contextEditing,
       originalRow
     ]);
-    const handleOpenChange = useCallback3((nextOpen) => {
-      if (nextOpen === false) {
-        setEditing(null);
-        onSave?.();
+    const handleCreate = useCallback((values) => {
+      if (refSchema && onCreate) {
+        const objectWithId = onCreate(refSchema, values);
+        if (objectWithId) {
+          const ref = Ref.make(objectWithId);
+          const path = fieldProjection.field.path;
+          setDeep(originalRow, [
+            path
+          ], ref);
+        }
       }
-      setLocalEditing(nextOpen);
-    }, []);
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    }, [
+      fieldProjection.field.path,
+      onSave,
+      contextEditing,
+      originalRow,
+      refSchema,
+      onCreate
+    ]);
+    const handleQueryRefOptions = useCallback(async ({ typename }) => {
+      const { schema: schema2, space } = getSchema({
+        typename
+      });
+      if (model && schema2 && space) {
+        const objects = await space.db.query(Filter.type(schema2)).run();
+        return objects.map((obj) => {
+          return {
+            dxn: Obj.getDXN(obj),
+            label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
+          };
+        }).filter(isTruthy);
+      }
+      return [];
+    }, [
+      model
+    ]);
     if (!editing) {
       return null;
     }
-    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
+    return /* @__PURE__ */ React2.createElement(Popover.Root, {
       open: editing,
       onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
+    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
       virtualRef: anchorRef
-    }), /* @__PURE__ */ React6.createElement(Popover3.Content, {
+    }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.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,
+    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Root, {
+      ...formProps,
+      autoFocus: true,
       schema: narrowedSchema,
-      onSave: handleSave
-    }))));
+      values: formValues,
+      onSave: handleSave,
+      onQueryRefOptions: handleQueryRefOptions,
+      ...createSchema && {
+        createSchema,
+        createInitialValuePath: fieldProjection.field.referencePath,
+        createOptionIcon: "ph--plus--regular",
+        createOptionLabel,
+        onCreate: handleCreate
+      }
+    }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Actions, null))))))));
   } 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);
-        }
-      });
-    })
-  ];
-};
-
 // src/components/TableCellEditor/TableCellEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var newValue = Symbol.for("newValue");
-var createOption = (text) => ({
-  [newValue]: true,
-  text
-});
-var isCreateOption = (data) => typeof data === "object" && data[newValue];
-var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQuery, __gridScope }) => {
-  var _effect = _useSignals7();
+var editorSlots = {
+  scroll: {
+    className: "!plb-[--dx-grid-cell-editor-padding-block]"
+  }
+};
+var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
+  var _effect = _useSignals3();
   try {
-    const { editing } = useGridContext4("TableValueEditor", __gridScope);
-    const fieldProjection = useMemo4(() => {
+    const { editing } = useGridContext3("TableValueEditor", __gridScope);
+    const fieldProjection = useMemo2(() => {
       if (!model || !editing) {
         return;
       }
@@ -502,7 +341,7 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQue
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant2(fieldProjection2, void 0, {
         F: __dxlog_file2,
-        L: 76,
+        L: 73,
         S: void 0,
         A: [
           "fieldProjection",
@@ -514,21 +353,21 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQue
       model,
       editing
     ]);
-    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum.SingleSelect) {
-      return /* @__PURE__ */ React7.createElement(FormCellEditor, {
-        fieldProjection,
-        model,
-        schema,
+    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === Format2.TypeFormat.SingleSelect || fieldProjection?.props.format === Format2.TypeFormat.Ref) {
+      return /* @__PURE__ */ React3.createElement(FormCellEditor, {
         __gridScope,
-        onSave
+        schema,
+        model,
+        fieldProjection,
+        modals,
+        onSave,
+        onCreate
       });
     }
-    return /* @__PURE__ */ React7.createElement(TableCellEditor, {
+    return /* @__PURE__ */ React3.createElement(TableCellEditor, {
       model,
       modals,
-      onEnter,
       onFocus,
-      onQuery,
       onSave,
       __gridScope
     });
@@ -536,20 +375,14 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQue
     _effect.f();
   }
 };
-var editorSlots = {
-  scroller: {
-    className: "!plb-[--dx-grid-cell-editor-padding-block]"
-  }
-};
-var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gridScope }) => {
-  var _effect = _useSignals7();
+var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
+  var _effect = _useSignals3();
   try {
-    const { id: gridId, editing, setEditing } = useGridContext4("TableCellEditor", __gridScope);
+    const { 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;
       }
@@ -558,7 +391,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant2(fieldProjection2, void 0, {
         F: __dxlog_file2,
-        L: 135,
+        L: 120,
         S: void 0,
         A: [
           "fieldProjection",
@@ -570,38 +403,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       model,
       editing
     ]);
-    useEffect3(() => {
-      if (!model || !editing || !fieldProjection) {
-        setValidationError(null);
-        return;
-      }
-      const cell = parseCellIndex2(editing.index);
-      const { row, col } = cell;
-      if (model.isDraftCell(cell)) {
-        const field = model.projection.fields[col];
-        const hasValidationError = model.hasDraftRowValidationError(row, field.path);
-        if (hasValidationError) {
-          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);
-              setValidationVariant("warning");
-            }
-          }
-        } else {
-          setValidationError(null);
-        }
-      } else {
-        setValidationError(null);
-      }
-    }, [
-      model,
-      editing,
-      fieldProjection
-    ]);
-    const handleEnter = useCallback4(async (value) => {
+    const handleEnter = useCallback2(async (value) => {
       if (!model || !editing) {
         return;
       }
@@ -610,7 +412,6 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
-        onEnter?.(cell);
         onFocus?.();
         setEditing(null);
         onSave?.();
@@ -621,22 +422,29 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
     }, [
       model,
       editing,
-      onEnter,
       onFocus,
       setEditing
     ]);
-    const handleBlur = useCallback4(async (value) => {
-      if (!model || !editing) {
-        return;
-      }
+    const handleBlur = useCallback2(async (value) => {
       if (suppressNextBlur.current) {
         suppressNextBlur.current = false;
+      } else if (model && editing) {
+        const cell = parseCellIndex2(editing.index);
+        if (value !== void 0) {
+          const result = await model.validateCellData(cell, value);
+          if (result.valid) {
+            setValidationError(null);
+            model.setCellData(cell, value);
+            setEditing(null);
+            onSave?.();
+          }
+        }
       }
     }, [
       model,
       editing
     ]);
-    const handleClose = useCallback4(async (value, event) => {
+    const handleClose = useCallback2(async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
@@ -644,19 +452,20 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
       if (value !== void 0) {
         const result = await model.validateCellData(cell, value);
         if (result.valid) {
+          suppressNextBlur.current = true;
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
           onSave?.();
-          onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
           setValidationVariant("error");
         }
       } else {
+        suppressNextBlur.current = true;
         setValidationError(null);
         setEditing(null);
         onSave?.();
@@ -665,186 +474,261 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gri
         }
       }
     }, [
-      model,
-      editing,
-      onFocus,
-      onEnter,
-      fieldProjection,
-      setEditing,
-      onSave
+      model,
+      editing,
+      onFocus,
+      fieldProjection,
+      setEditing,
+      onSave
+    ]);
+    const extensions = useMemo2(() => {
+      if (!fieldProjection) {
+        return [];
+      }
+      const extensions2 = [
+        editorKeys({
+          onClose: handleClose,
+          ...editing?.initialContent && {
+            onNav: handleClose
+          }
+        })
+      ];
+      if (model && editing) {
+        extensions2.push(EditorView.updateListener.of(debounce((update) => {
+          const content = update.state.doc.toString();
+          const cell = parseCellIndex2(editing.index);
+          void model.validateCellData(cell, content).then((result) => {
+            if (result.valid) {
+              setValidationError(null);
+            } else {
+              setValidationError(result.error);
+              setValidationVariant("error");
+            }
+          });
+        }, 10)));
+      }
+      return extensions2;
+    }, [
+      model,
+      modals,
+      editing,
+      fieldProjection,
+      handleClose
+    ]);
+    const getCellContent = useCallback2(() => {
+      if (model && editing) {
+        const cell = parseCellIndex2(editing.index);
+        const value = model.getCellData(cell);
+        return value !== void 0 ? String(value) : "";
+      }
+    }, [
+      model,
+      editing
+    ]);
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
+      validationError,
+      variant: validationVariant,
+      __gridScope
+    }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
+      extensions,
+      getCellContent,
+      onBlur: handleBlur,
+      slots: editorSlots
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+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;
+};
+
+// 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 useEffect2, 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;
+    useEffect2(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+        setNewField(model.projection.createFieldProjection());
+        requestAnimationFrame(() => {
+          onNewColumn();
+        });
+      } else {
+        setNewField(void 0);
+      }
+    }, [
+      model?.projection,
+      state
     ]);
-    const extension = useMemo4(() => {
-      if (!fieldProjection) {
-        return [];
-      }
-      const extension2 = [
-        editorKeys({
-          onClose: handleClose,
-          ...editing?.initialContent && {
-            onNav: handleClose
-          }
-        })
-      ];
-      const format = fieldProjection.props.format;
-      if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-        extension2.push(createMarkdownExtensions({
-          themeMode
-        }));
-        const options = fieldProjection.props.options || [];
-        const mode = format === FormatEnum.SingleSelect ? "single-select" : "multi-select";
-        extension2.push(tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
-              id: option.id,
-              label: option.title,
-              hue: option.color
-            }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === "single-select") {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          }
-        }));
-      }
-      if (onQuery) {
-        switch (fieldProjection.props.format) {
-          case FormatEnum.Ref: {
-            extension2.push([
-              completion({
-                onQuery: (text) => onQuery(fieldProjection, text),
-                onMatch: (data) => {
-                  if (model && editing && modals) {
-                    if (isCreateOption(data)) {
-                      const { field, props } = fieldProjection;
-                      if (props.referenceSchema) {
-                        suppressNextBlur.current = true;
-                        modals.openCreateRef(props.referenceSchema, document.querySelector(cellQuery(editing.index, gridId)), {
-                          [field.referencePath]: data.text
-                        }, (data2) => {
-                          void handleEnter(data2);
-                        });
-                      }
-                    } else {
-                      void handleEnter(data);
-                    }
-                  }
-                }
-              })
-            ]);
-            break;
-          }
+    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 extension2;
+      return void 0;
     }, [
-      model,
-      modals,
-      editing,
-      fieldProjection,
-      handleClose,
-      themeMode
+      model?.projection?.fields,
+      state
     ]);
-    const getCellContent = useCallback4(() => {
-      if (model && editing) {
-        const cell = parseCellIndex2(editing.index);
-        const { col } = cell;
-        const field = model.projection.fields[col];
-        const fieldProjection2 = model.projection.getFieldProjection(field.id);
-        if (fieldProjection2?.props.format === FormatEnum.SingleSelect || fieldProjection2?.props.format === FormatEnum.MultiSelect) {
-          const value2 = model.getCellData(cell);
-          if (value2 !== void 0) {
-            const options = fieldProjection2.props.options || [];
-            if (fieldProjection2.props.format === FormatEnum.MultiSelect) {
-              const tagItems = value2.split(",").map((id) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color
-                  };
-                }
-                return void 0;
-              }).filter((item) => item !== void 0);
-              return createLinks(tagItems);
-            } else {
-              const option = options.find((o) => o.id === value2);
-              if (option) {
-                const tagItem = {
-                  id: value2,
-                  label: option.title,
-                  hue: option.color
-                };
-                return createLinks([
-                  tagItem
-                ]);
-              }
-            }
-          }
-          return "";
-        }
-        const value = model.getCellData(cell);
-        return value !== void 0 ? String(value) : "";
+    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,
-      editing
+      model?.projection,
+      state,
+      newField
     ]);
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(CellValidationMessage, {
-      validationError: _validationError,
-      variant: _validationVariant,
-      __gridScope
-    }), /* @__PURE__ */ React7.createElement(GridCellEditor, {
-      extension,
-      getCellContent,
-      onBlur: handleBlur,
-      slots: editorSlots
-    }));
+    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();
   }
 };
-var determineNavigationAxis = ({ key }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowDown":
-    case "Enter": {
-      return "row";
+
+// src/components/Table/RowActionsMenu.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6 from "react";
+import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var RowActionsMenu = ({ model, modals }) => {
+  var _effect = _useSignals6();
+  try {
+    const { t } = useTranslation2(translationKey);
+    const hasSelection = model.selection.hasSelection.value;
+    const state = modals.state.value;
+    if (state?.type !== "row") {
+      return null;
     }
-    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 /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React6.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Viewport, null, model.rowActions?.length > 0 && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Group, null, model.rowActions?.map((action) => /* @__PURE__ */ React6.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__ */ React6.createElement(DropdownMenu2.Separator, null)), model.features.dataEditable !== false && /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
+      "data-testid": "row-menu-delete",
+      onClick: () => model.deleteRow(state.rowIndex)
+    }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
+  } finally {
+    _effect.f();
   }
-  return shift ? -1 : 1;
 };
 
 // src/components/Table/Table.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var columnDefault = {
+  grid: {
+    minSize: 80,
+    maxSize: 640
+  }
+};
+var rowDefault = {
+  frozenRowsStart: {
+    readonly: true,
+    focusUnfurl: false
+  }
+};
 var TableRoot = ({ children, role = "article" }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals7();
   try {
-    return /* @__PURE__ */ React8.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: mx("relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]", role === "card--popover" && "popover-card-height", role === "section" && "attention-surface", role === "card--intrinsic" && "[&_.dx-grid]:bs-[--dx-grid-content-block-size]", [
         "card--popover",
@@ -859,19 +743,18 @@ var TableRoot = ({ children, role = "article" }) => {
     _effect.f();
   }
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
-  var _effect = _useSignals8();
+var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }, forwardedRef) => {
+  var _effect = _useSignals7();
   try {
     const [dxGrid, setDxGrid] = useState4(null);
     const { hasAttention } = useAttention(model?.id ?? "table");
-    const { t } = useTranslation3(translationKey);
-    const modals = useMemo5(() => new ModalController(), []);
+    const modals = useMemo4(() => new ModalController(), []);
     const draftRowCount = model?.getDraftRowCount() ?? 0;
-    const frozen = useMemo5(() => {
+    const frozen = useMemo4(() => {
       const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
       return {
         frozenRowsStart: 1,
-        frozenRowsEnd: draftRowCount,
+        frozenRowsEnd: Math.max(1, draftRowCount),
         frozenColsStart: model?.features.selection.enabled ? 1 : 0,
         frozenColsEnd: noActionColumn ? 0 : 1
       };
@@ -879,43 +762,81 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       draftRowCount
     ]);
-    const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
+    const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
       presentation
     ]);
-    useEffect4(() => {
-      if (!presentation || !dxGrid) {
+    useEffect3(() => {
+      const fieldId = model?.projection?.fields?.[0]?.id;
+      if (fieldId) {
+        model.sorting.setSort(fieldId, "asc");
+      }
+    }, [
+      model
+    ]);
+    useEffect3(() => {
+      if (!dxGrid || !presentation) {
         return;
       }
       dxGrid.getCells = getCells;
     }, [
-      presentation,
       dxGrid,
+      presentation,
       getCells
     ]);
-    useImperativeHandle(forwardedRef, () => {
-      if (!presentation || !dxGrid) {
-        return {};
+    const handleInsertRowResult = useCallback4((insertResult) => {
+      if (insertResult === "draft") {
+        requestAnimationFrame(() => {
+          dxGrid?.setFocus({
+            plane: "frozenRowsEnd",
+            col: 0,
+            row: 0
+          });
+          dxGrid?.refocus();
+        });
+      } else {
+        requestAnimationFrame(() => {
+          dxGrid?.setFocus({
+            plane: "grid",
+            col: 0,
+            row: model ? model.getRowCount() - 1 : 0
+          });
+          dxGrid?.refocus();
+        });
       }
-      return {
-        update: (cell) => {
-          if (cell) {
-            dxGrid.updateIfWithinBounds(cell, true);
-          } else {
-            dxGrid.updateCells(true);
-            dxGrid.requestUpdate();
-          }
+    }, [
+      model,
+      dxGrid
+    ]);
+    const handleSave = useCallback4(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [
+      dxGrid
+    ]);
+    const handleSaveDraftRow = useCallback4((rowIndex = 0) => {
+      if (model && dxGrid) {
+        const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+        if (didCommitSuccessfully) {
+          requestAnimationFrame(() => {
+            dxGrid.scrollToEndRow();
+          });
         }
-      };
+      }
     }, [
-      presentation,
+      model,
       dxGrid
     ]);
-    const handleGridClick = useCallback5((event) => {
-      const rowIndex = safeParseInt(event.target.closest("[aria-rowindex]")?.ariaRowIndex ?? "");
-      if (rowIndex != null) {
+    const handleGridClick = useCallback4((event) => {
+      const cell = closestCell(event.target);
+      if (cell) {
+        const { row: rowIndex, plane } = cell;
         if (onRowClick) {
-          const row = model?.getRowAt(rowIndex);
-          row && onRowClick(row);
+          if (plane === "grid") {
+            const row = model?.getRowAt(rowIndex);
+            row && onRowClick(row);
+          } else {
+            onRowClick(cell);
+          }
         }
         if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
           model.selection.toggleSelectionForRowIndex(rowIndex);
@@ -951,14 +872,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,31 +911,22 @@ 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 = useCallback4((increment, delta, cell) => {
+      if (dxGrid && model) {
+        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1 && increment !== "col") {
+          handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
+        } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
+          handleSaveDraftRow(cell.row);
+          handleInsertRowResult(model.insertRow());
+        } else {
+          dxGrid.refocus(increment, delta);
         }
       }
     }, [
-      model,
-      dxGrid
+      dxGrid,
+      model
     ]);
-    const handleKeyDown = useCallback5((event) => {
+    const handleKeyDown = useCallback4((event) => {
       if (!model?.features.dataEditable) {
         return;
       }
@@ -1029,17 +934,66 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       if (!model || !cell) {
         return;
       }
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key) {
+          case "c": {
+            try {
+              const cellData = model.getCellData(cell);
+              const textContent = cellData?.toString() ?? "";
+              void navigator.clipboard.writeText(textContent);
+              event.preventDefault();
+            } catch (error) {
+              console.warn("Failed to copy cell content:", error);
+            }
+            break;
+          }
+          case "v": {
+            event.preventDefault();
+            void navigator.clipboard.readText().then((clipboardText) => {
+              try {
+                model.setCellData(cell, String2.trim(clipboardText).replace(/[\n\r]+/, " "));
+                handleSave();
+              } catch {
+                const cellElement = event.target.closest('[data-dx-grid-action="cell"]');
+                if (cellElement) {
+                  const rect = cellElement.getBoundingClientRect();
+                  const editRequest = new DxEditRequest({
+                    cellIndex: `${cell.plane},${cell.col},${cell.row}`,
+                    cellBox: {
+                      insetInlineStart: rect.left,
+                      insetBlockStart: rect.top,
+                      inlineSize: rect.width,
+                      blockSize: rect.height
+                    },
+                    cellElement,
+                    initialContent: clipboardText
+                  });
+                  cellElement.dispatchEvent(editRequest);
+                }
+              }
+            });
+            break;
+          }
+        }
+      }
       switch (event.key) {
         case "Backspace":
         case "Delete": {
-          model.setCellData(cell, void 0);
+          try {
+            model.setCellData(cell, void 0);
+            event.preventDefault();
+            handleSave();
+          } catch {
+          }
           break;
         }
       }
     }, [
-      model
+      model,
+      dxGrid,
+      handleSave
     ]);
-    const handleAxisResize = useCallback5((event) => {
+    const handleAxisResize = useCallback4((event) => {
       if (event.axis === "col") {
         const columnIndex = parseInt(event.index, 10);
         model?.setColumnWidth(columnIndex, event.size);
@@ -1047,7 +1001,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     }, [
       model
     ]);
-    const handleWheel = useCallback5((event) => {
+    const handleWheel = useCallback4((event) => {
       if (!ignoreAttention && !hasAttention) {
         event.stopPropagation();
       }
@@ -1055,7 +1009,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       hasAttention,
       ignoreAttention
     ]);
-    const handleNewColumn = useCallback5(() => {
+    const handleNewColumn = useCallback4(() => {
       const columns = model?.getColumnCount();
       if (dxGrid && columns) {
         dxGrid.scrollToColumn(columns - 1);
@@ -1064,119 +1018,89 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       dxGrid
     ]);
-    const handleQuery = useCallback5(async ({ field, props }, text) => {
-      if (model && props.referenceSchema && field.referencePath) {
-        const space = getSpace2(model.view);
-        invariant3(space, void 0, {
-          F: __dxlog_file3,
-          L: 325,
-          S: void 0,
-          A: [
-            "space",
-            ""
-          ]
-        });
-        let schema2;
-        if (client) {
-          schema2 = client.graph.schemaRegistry.getSchema(props.referenceSchema);
-        }
-        if (!schema2) {
-          schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
-        }
-        if (schema2) {
-          const { objects } = await space.db.query(Filter.type(schema2)).run();
-          const options = objects.map((obj) => {
-            const value = getValue(obj, field.referencePath);
-            if (!value || typeof value !== "string") {
-              return void 0;
-            }
-            return {
-              label: value,
-              data: obj
-            };
-          }).filter(isNotFalsy);
-          return [
-            ...options,
-            {
-              label: t("create new object label", {
-                text
-              }),
-              data: createOption(text)
-            }
-          ];
-        }
+    useImperativeHandle(forwardedRef, () => {
+      if (!dxGrid || !presentation) {
+        return {};
       }
-      return [];
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell, true);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        },
+        handleInsertRowResult
+      };
     }, [
+      dxGrid,
       model,
-      client,
-      t
-    ]);
-    const handleSave = useCallback5(() => {
-      dxGrid?.updateCells(true);
-    }, [
-      dxGrid
+      presentation
     ]);
     if (!model || !modals) {
-      return /* @__PURE__ */ React8.createElement("span", {
+      return /* @__PURE__ */ React7.createElement("span", {
         role: "none",
         className: "attention-surface"
       });
     }
-    return /* @__PURE__ */ React8.createElement(Grid.Root, {
+    return /* @__PURE__ */ React7.createElement(Grid.Root, {
       id: model.id ?? "table-grid"
-    }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
+    }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
       model,
       modals,
       schema,
-      onEnter: handleEnter,
       onFocus: handleFocus,
-      onQuery: handleQuery,
-      onSave: handleSave
-    }), /* @__PURE__ */ React8.createElement(Grid.Content, {
+      onSave: handleSave,
+      onCreate
+    }), /* @__PURE__ */ React7.createElement(Grid.Content, {
       className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
       columns: model.columnMeta.value,
+      columnDefault,
+      rowDefault,
       limitRows: model.getRowCount() ?? 0,
       limitColumns: model.projection.fields.length,
       overscroll: "trap",
       onAxisResize: handleAxisResize,
       onClick: handleGridClick,
-      onKeyDown: handleKeyDown,
+      onKeyDownCapture: handleKeyDown,
       onWheelCapture: handleWheel,
+      ...testId && {
+        "data-testid": testId
+      },
       ref: setDxGrid
-    }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
+    }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
+    }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
+    }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
       model,
       modals,
       onNewColumn: handleNewColumn
-    }), /* @__PURE__ */ React8.createElement(CreateRefPanel, {
-      model,
-      modals
     }));
   } finally {
     _effect.f();
   }
-});
+};
+var TableMain = /* @__PURE__ */ forwardRef(TableMainInner);
 var Table = {
   Root: TableRoot,
   Main: TableMain
 };
 
 // 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 { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useCallback as useCallback5, useMemo as useMemo5, 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 }) => {
-  var _effect = _useSignals9();
+import { ProjectionModel } from "@dxos/schema";
+var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, rowActions, onRowClick, onRowAction, ...props }) => {
+  var _effect = _useSignals8();
   try {
-    const { typename, jsonSchema } = useMemo6(() => getBaseSchema({
+    const { jsonSchema } = useMemo5(() => getBaseSchema({
       typename: name,
       properties,
       jsonSchema: _jsonSchema,
@@ -1187,20 +1111,18 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       _jsonSchema,
       schema
     ]);
-    const { projection, view } = useMemo6(() => makeDynamicTable({
-      typename,
+    const { object, projection } = useMemo5(() => makeDynamicTable({
       jsonSchema,
       properties
     }), [
-      typename,
       jsonSchema,
       properties
     ]);
     const tableRef = useRef3(null);
-    const handleCellUpdate = useCallback6((cell) => {
+    const handleCellUpdate = useCallback5((cell) => {
       tableRef.current?.update?.(cell);
     }, []);
-    const handleRowOrderChange = useCallback6(() => {
+    const handleRowOrderChange = useCallback5(() => {
       tableRef.current?.update?.();
     }, []);
     const features = useDefaultValue(props.features, () => ({
@@ -1209,31 +1131,40 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       },
       dataEditable: false
     }));
+    const projectionModel = useMemo5(() => {
+      if (jsonSchema && projection) {
+        const model2 = new ProjectionModel(jsonSchema, projection);
+        model2.normalizeView();
+        return model2;
+      }
+    }, [
+      jsonSchema,
+      projection
+    ]);
     const model = useTableModel({
       rows,
-      view,
-      schema: jsonSchema,
-      projection,
+      object,
+      projection: projectionModel,
       features,
       rowActions,
       onCellUpdate: handleCellUpdate,
       onRowOrderChange: handleRowOrderChange,
       onRowAction
     });
-    const presentation = useMemo6(() => {
+    const presentation = useMemo5(() => {
       if (model) {
         return new TablePresentation(model);
       }
     }, [
       model
     ]);
-    return /* @__PURE__ */ React9.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       role: "none",
       className: mx2("is-full bs-full grow grid", classNames)
-    }, /* @__PURE__ */ React9.createElement("div", {
+    }, /* @__PURE__ */ React8.createElement("div", {
       role: "none",
       className: "grid min-bs-0 overflow-hidden"
-    }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
+    }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
       ref: tableRef,
       model,
       presentation,
@@ -1246,43 +1177,46 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // src/components/TableToolbar/TableToolbar.tsx
-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 { rxFromSignal } from "@dxos/react-ui-menu";
-var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
-  const add = createMenuAction("add-row", onAdd, {
-    type: "add-row",
-    icon: "ph--plus--regular",
-    label: [
-      "add row",
-      {
-        ns: translationKey
-      }
-    ],
-    testId: "table.toolbar.add-row"
-  });
-  const save = createMenuAction("save-view", onSave, {
-    type: "save-view",
-    icon: "ph--floppy-disk--regular",
-    label: [
-      "save view label",
-      {
-        ns: translationKey
-      }
-    ],
-    testId: "table.toolbar.save-view",
-    iconOnly: false,
-    hidden: get(rxFromSignal(() => !state.viewDirty))
-  });
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { Atom } from "@effect-atom/atom-react";
+import React9, { useMemo as useMemo6 } from "react";
+import { live } from "@dxos/live-object";
+import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
+import { atomFromSignal } from "@dxos/react-ui-menu";
+var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Atom.make((get) => {
+  const nodes = [];
+  if (onAdd) {
+    const add = createMenuAction("add-row", onAdd, {
+      type: "add-row",
+      icon: "ph--plus--regular",
+      label: [
+        "add row label",
+        {
+          ns: translationKey
+        }
+      ],
+      testId: "table.toolbar.add-row"
+    });
+    nodes.push(add);
+  }
+  if (onSave) {
+    const save = createMenuAction("save-view", onSave, {
+      type: "save-view",
+      icon: "ph--floppy-disk--regular",
+      label: [
+        "save view label",
+        {
+          ns: translationKey
+        }
+      ],
+      testId: "table.toolbar.save-view",
+      iconOnly: false,
+      hidden: get(atomFromSignal(() => !state.viewDirty))
+    });
+    nodes.push(save);
+  }
   const gap = createGapSeparator();
-  const nodes = [
-    add,
-    save,
-    ...gap.nodes
-  ];
+  nodes.push(...gap.nodes);
   const edges = nodes.map(({ id: target }) => ({
     source: "root",
     target
@@ -1298,12 +1232,12 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.
   };
 });
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals9();
   try {
-    const state = useMemo7(() => live2({
+    const state = useMemo6(() => live({
       viewDirty
     }), []);
-    const actionsCreator = useMemo7(() => createTableToolbarActions({
+    const actionsCreator = useMemo6(() => createTableToolbarActions({
       state,
       onAdd,
       onSave,
@@ -1315,10 +1249,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
       customActions
     ]);
     const menu = useMenuActions(actionsCreator);
-    return /* @__PURE__ */ React10.createElement(MenuProvider, {
+    return /* @__PURE__ */ React9.createElement(MenuProvider, {
       ...menu,
       attendableId
-    }, /* @__PURE__ */ React10.createElement(ToolbarMenu, {
+    }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
       classNames
     }));
   } finally {
@@ -1337,7 +1271,6 @@ export {
   TablePresentation,
   TableToolbar,
   cellClassesForRowSelection,
-  createTable,
   getBaseSchema,
   makeDynamicTable,
   narrowSchema,
@@ -1346,6 +1279,7 @@ export {
   touch,
   translations,
   useAddRow,
+  useProjectionModel,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map