@dxos/react-ui-table 0.7.2 → 0.7.3-staging.0905f03

package/dist/lib/node/index.cjs

@@ -29,62 +29,74 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var node_exports = {};
 __export(node_exports, {
   Table: () => Table,
-  TableType: () => import_chunk_A2N7XWW6.TableType,
+  TableSchema: () => import_chunk_MHBMVCFZ.TableSchema,
+  TableType: () => import_chunk_MHBMVCFZ.TableType,
   Toolbar: () => Toolbar,
-  fromGridCell: () => fromGridCell,
   initializeTable: () => initializeTable,
   tableButtons: () => tableButtons,
-  toGridCell: () => toGridCell,
   touch: () => touch,
   translations: () => translations_default,
   useTableModel: () => useTableModel,
   useToolbarContext: () => useToolbarContext
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_A2N7XWW6 = require("./chunk-A2N7XWW6.cjs");
+var import_chunk_MHBMVCFZ = require("./chunk-MHBMVCFZ.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
 var import_echo = require("@dxos/react-client/echo");
+var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_attention = require("@dxos/react-ui-attention");
 var import_react_ui_grid = require("@dxos/react-ui-grid");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_util = require("@dxos/util");
 var import_react2 = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
+var import_react_ui2 = require("@dxos/react-ui");
 var import_react3 = __toESM(require("react"));
 var import_echo2 = require("@dxos/react-client/echo");
-var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_form = require("@dxos/react-ui-form");
 var import_react4 = __toESM(require("react"));
-var import_react_ui3 = require("@dxos/react-ui");
-var import_react5 = __toESM(require("react"));
 var import_echo_schema2 = require("@dxos/echo-schema");
-var import_invariant2 = require("@dxos/invariant");
+var import_echo3 = require("@dxos/react-client/echo");
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_form2 = require("@dxos/react-ui-form");
 var import_react_ui_grid2 = require("@dxos/react-ui-grid");
+var import_react5 = __toESM(require("react"));
+var import_echo4 = require("@dxos/react-client/echo");
+var import_react_ui5 = require("@dxos/react-ui");
+var import_react_ui_form3 = require("@dxos/react-ui-form");
+var import_react6 = __toESM(require("react"));
+var import_react_ui6 = require("@dxos/react-ui");
+var import_react7 = __toESM(require("react"));
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_invariant2 = require("@dxos/invariant");
+var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
-var import_echo_schema3 = require("@dxos/echo-schema");
-var import_log = require("@dxos/log");
-var import_react_client = require("@dxos/react-client");
-var import_echo3 = require("@dxos/react-client/echo");
-var import_schema = require("@dxos/schema");
 var import_react_context = require("@radix-ui/react-context");
-var import_react6 = __toESM(require("react"));
-var import_react_ui4 = require("@dxos/react-ui");
-var import_react7 = __toESM(require("react"));
-var import_react_ui5 = require("@dxos/react-ui");
-var import_react8 = require("react");
+var import_react8 = __toESM(require("react"));
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react9 = __toESM(require("react"));
+var import_react_ui8 = require("@dxos/react-ui");
+var import_react10 = require("react");
 var import_signals_core = require("@preact/signals-core");
 var import_lodash = __toESM(require("lodash.orderby"));
 var import_context = require("@dxos/context");
 var import_echo_schema4 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
-var import_react_client2 = require("@dxos/react-client");
-var import_react_ui_form2 = require("@dxos/react-ui-form");
+var import_react_client = require("@dxos/react-client");
+var import_react_ui_form4 = require("@dxos/react-ui-form");
+var import_react_ui_grid4 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_schema2 = require("@dxos/schema");
+var import_schema = require("@dxos/schema");
 var import_signals_core2 = require("@preact/signals-core");
+var import_log = require("@dxos/log");
+var import_echo_schema5 = require("@dxos/echo-schema");
+var import_log2 = require("@dxos/log");
+var import_react_client2 = require("@dxos/react-client");
+var import_echo5 = require("@dxos/react-client/echo");
+var import_schema2 = require("@dxos/schema");
 var import_signals_core3 = require("@preact/signals-core");
 var import_context2 = require("@dxos/context");
 var translationKey = "table";
@@ -110,49 +122,53 @@ var translations_default = [
         "delete row label": "Delete row",
         "bulk delete row label": "Delete selected rows",
         "column deleted label": "Column deleted",
-        "new column button label": "Create column"
+        "new column button label": "Create column",
+        "create new object label": "Create new object \u201C{{text}}\u201D"
       }
     }
   }
 ];
 var ColumnActionsMenu = ({ model }) => {
-  const { t } = (0, import_react_ui.useTranslation)(translationKey);
+  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
   const state = model?.modalController.state.value;
   if (!model || state?.type !== "column") {
     return null;
   }
   const currentSort = model.sorting;
   const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Root, {
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Root, {
     modal: false,
     open: state?.type === "column",
     onOpenChange: model.modalController.close
-  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
     virtualRef: model.modalController.trigger
-  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-descending",
     onClick: () => model.setSort(state.fieldId, "desc")
-  }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+  }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-sort-ascending",
     onClick: () => model.setSort(state.fieldId, "asc")
-  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-clear-sort",
     onClick: () => model.clearSort()
-  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-delete",
     onClick: () => model.deleteColumn(state.fieldId)
-  }, t("column action delete")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Item, {
+  }, t("column action delete")), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
     "data-testid": "column-settings",
     onClick: () => model.modalController.openColumnSettings()
-  }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Arrow, null))));
+  }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
 };
-var ColumnSettings = ({ model }) => {
+var ColumnSettings = ({ model, onNewColumn }) => {
   const [newField, setNewField] = (0, import_react3.useState)();
   const state = model?.modalController.state.value;
   const space = (0, import_echo2.getSpace)(model?.table);
   (0, import_react3.useEffect)(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
+      requestAnimationFrame(() => {
+        onNewColumn();
+      });
     } else {
       setNewField(void 0);
     }
@@ -173,7 +189,7 @@ var ColumnSettings = ({ model }) => {
     state
   ]);
   const field = existingField ?? newField;
-  const handleClose = (0, import_react3.useCallback)(() => {
+  const handleSave = (0, import_react3.useCallback)(() => {
     model?.modalController.close();
   }, [
     model?.modalController
@@ -190,41 +206,136 @@ var ColumnSettings = ({ model }) => {
   if (!model?.table?.view || !model.projection || !field) {
     return null;
   }
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Root, {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Root, {
     modal: false,
     open: state?.type === "columnSettings"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
     virtualRef: model.modalController.trigger
-  }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Content, {
+  }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Portal, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Content, {
     classNames: "md:is-64"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
     view: model.table.view,
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
-    onClose: handleClose,
+    onSave: handleSave,
     onCancel: handleCancel
-  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
+  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
+};
+var CreateRefPanel = ({ model, __gridScope }) => {
+  const { id: gridId } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
+  const space = (0, import_echo3.getSpace)(model?.table);
+  const state = model?.modalController.state.value;
+  const schema = (0, import_react4.useMemo)(() => {
+    if (!space || state?.type !== "createRefPanel") {
+      return;
+    }
+    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    if (schema2) {
+      const omit = import_echo_schema2.S.omit("id");
+      return omit(schema2);
+    }
+  }, [
+    space,
+    state
+  ]);
+  const handleSave = (0, import_react4.useCallback)((values) => {
+    if (!model || !space || state?.type !== "createRefPanel") {
+      return;
+    }
+    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    if (schema2) {
+      const obj = space.db.add((0, import_echo3.create)(schema2, values));
+      state.onCreate?.(obj);
+    }
+    void model.modalController.close();
+  }, [
+    model?.modalController,
+    space,
+    state
+  ]);
+  const handleCancel = (0, import_react4.useCallback)(() => {
+    if (model) {
+      model.modalController.close();
+    }
+  }, [
+    model?.modalController
+  ]);
+  if (!model?.table?.view || !model.projection) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Root, {
+    modal: false,
+    open: state?.type === "createRefPanel" && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (model && !nextOpen) {
+        return model.modalController.close();
+      }
+    }
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Content, {
+    classNames: "md:is-64",
+    "data-grid": gridId
+  }, state?.type === "createRefPanel" && schema && /* @__PURE__ */ import_react4.default.createElement(import_react_ui_form2.Form, {
+    schema,
+    values: state.initialValues ?? {},
+    onSave: handleSave,
+    onCancel: handleCancel
+  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.Arrow, null))));
+};
+var getRefTargetObj = (space, id) => {
+  if (space && id) {
+    return space?.db.getObjectById(id);
+  } else {
+    return void 0;
+  }
+};
+var RefPanel = ({ model }) => {
+  const state = model?.modalController.state.value;
+  const space = (0, import_echo4.getSpace)(model?.table);
+  const targetObj = getRefTargetObj(space, state?.type === "refPanel" ? state.targetId : void 0);
+  const schema = space && state?.type === "refPanel" ? space.db.schemaRegistry.getSchema(state.typename) : void 0;
+  if (!model?.table?.view || !model.projection) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Root, {
+    modal: false,
+    open: state?.type === "refPanel" && !!targetObj && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (model && !nextOpen) {
+        return model.modalController.close();
+      }
+    }
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Content, {
+    classNames: "md:is-64"
+  }, targetObj && schema && /* @__PURE__ */ import_react5.default.createElement(import_react_ui_form3.Form, {
+    readonly: true,
+    values: targetObj,
+    schema
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.Arrow, null))));
 };
 var RowActionsMenu = ({ model }) => {
-  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const state = model.modalController.state.value;
+  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
   const hasSelection = model.selection.hasSelection.value;
+  const state = model.modalController.state.value;
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Root, {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Root, {
     modal: false,
     open: true,
     onOpenChange: model.modalController.close
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
     virtualRef: model.modalController.trigger
-  }), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Item, {
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui3.DropdownMenu.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
 };
-var completion = ({ onQuery, onMatch }) => {
+var completion = ({ debug, onQuery, onMatch }) => {
   return [
     import_view.EditorView.theme({
       ".cm-completionDialog": {
@@ -234,6 +345,7 @@ var completion = ({ onQuery, onMatch }) => {
     (0, import_autocomplete.autocompletion)({
       icons: false,
       activateOnTyping: true,
+      closeOnBlur: !debug,
       override: [
         async (context) => {
           const text = context.state.doc.toString();
@@ -258,133 +370,26 @@ var completion = ({ onQuery, onMatch }) => {
     })
   ];
 };
-var fromGridCell = ({ col, row }) => {
-  return `${col},${row}`;
-};
-var toGridCell = (cell) => {
-  const [col, row] = cell.split(",").map(Number);
-  return {
-    row,
-    col
-  };
-};
-var touch = (value) => value;
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = ({ space, table, initialRow = true }) => {
-  import_log.log.info("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file,
-    L: 32,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
-  const ContactSchema = (0, import_echo_schema3.TypedObject)({
-    typename: `example.com/type/${import_react_client.PublicKey.random().truncate()}`,
-    version: "0.1.0"
-  })({
-    name: import_echo_schema3.S.optional(import_echo_schema3.S.String).annotations({
-      [import_echo_schema3.AST.TitleAnnotationId]: "Name"
-    }),
-    email: import_echo_schema3.S.optional(import_echo_schema3.Format.Email),
-    salary: import_echo_schema3.S.optional(import_echo_schema3.Format.Currency()).annotations({
-      [import_echo_schema3.AST.TitleAnnotationId]: "Salary"
-    })
-  });
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = (0, import_schema.createView)({
-    name: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "email",
-      "salary"
-    ]
-  });
-  const projection = new import_schema.ViewProjection(contactSchema, table.view);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.fields[2].id,
-      path: "salary",
-      size: 150
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: (0, import_schema.createFieldId)(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: import_echo_schema3.TypeEnum.Ref,
-      format: import_echo_schema3.FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: "Manager"
-    }
-  });
-  if (initialRow) {
-    space.db.add((0, import_echo3.create)(contactSchema, {}));
-  }
-  return contactSchema;
-};
-var TABLE_ATTRS = {
-  columnSettings: "data-table-column-settings-button",
-  rowMenu: "data-table-row-menu-button",
-  newColumn: "data-table-new-column-button"
-};
-var ICONS = {
-  columnSettings: "ph--caret-down--regular",
-  rowMenu: "ph--dots-three--regular",
-  newColumn: "ph--plus--regular"
-};
-var createButtonHtml = ({ button, value = "", disabled = false, testId }) => {
-  const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
-  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
-};
-var tableButtons = {
-  columnSettings: {
-    attr: TABLE_ATTRS.columnSettings,
-    icon: ICONS.columnSettings,
-    render: ({ fieldId }) => createButtonHtml({
-      button: "columnSettings",
-      value: fieldId,
-      testId: "table-column-settings-button"
-    })
-  },
-  rowMenu: {
-    attr: TABLE_ATTRS.rowMenu,
-    icon: ICONS.rowMenu,
-    render: ({ rowIndex }) => createButtonHtml({
-      button: "rowMenu",
-      value: rowIndex.toString(),
-      testId: "table-row-menu-button"
-    })
-  },
-  addColumn: {
-    attr: TABLE_ATTRS.newColumn,
-    icon: ICONS.newColumn,
-    render: ({ disabled } = {}) => createButtonHtml({
-      button: "newColumn",
-      disabled,
-      testId: "table-new-column-button"
-    })
-  }
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var newValue = Symbol.for("newValue");
+var createOption = (text) => ({
+  [newValue]: true,
+  text
+});
+var isCreateOption = (data) => typeof data === "object" && data[newValue];
 var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
-  const { editing } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
-  const fieldProjection = (0, import_react5.useMemo)(() => {
+  const { id: gridId, editing, setEditing } = (0, import_react_ui_grid3.useGridContext)("TableCellEditor", __gridScope);
+  const suppressNextBlur = (0, import_react7.useRef)(false);
+  const fieldProjection = (0, import_react7.useMemo)(() => {
     if (!model || !editing) {
       return;
     }
-    const { col } = toGridCell(editing.index);
+    const { col } = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
     const field = model.projection.view.fields[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     (0, import_invariant2.invariant)(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 49,
+      F: __dxlog_file,
+      L: 65,
       S: void 0,
       A: [
         "fieldProjection",
@@ -396,29 +401,28 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     model,
     editing
   ]);
-  const handleClose = (0, import_react5.useCallback)((value, event) => {
-    if (!model || !editing || !fieldProjection) {
+  const handleEnter = (0, import_react7.useCallback)((value) => {
+    if (!model || !editing) {
       return;
     }
-    const cell = toGridCell(editing.index);
+    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
+    model.setCellData(cell, value);
     onEnter?.(cell);
-    if (event && onFocus) {
-      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
-    }
+    onFocus?.();
+    setEditing(null);
   }, [
     model,
-    editing,
-    onFocus,
-    onEnter,
-    fieldProjection,
-    determineNavigationAxis,
-    determineNavigationDelta
+    editing
   ]);
-  const handleBlur = (0, import_react5.useCallback)((value) => {
+  const handleBlur = (0, import_react7.useCallback)((value) => {
     if (!model || !editing) {
       return;
     }
-    const cell = toGridCell(editing.index);
+    if (suppressNextBlur.current) {
+      suppressNextBlur.current = false;
+      return;
+    }
+    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
     if (value !== void 0) {
       model.setCellData(cell, value);
     }
@@ -426,12 +430,30 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     model,
     editing
   ]);
-  const extension = (0, import_react5.useMemo)(() => {
+  const handleClose = (0, import_react7.useCallback)((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = (0, import_react_ui_grid3.parseCellIndex)(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const extension = (0, import_react7.useMemo)(() => {
     if (!fieldProjection) {
       return [];
     }
     const extension2 = [
-      (0, import_react_ui_grid2.editorKeys)({
+      (0, import_react_ui_grid3.editorKeys)({
         onClose: handleClose,
         ...editing?.initialContent && {
           onNav: handleClose
@@ -440,16 +462,25 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case import_echo_schema2.FormatEnum.Ref: {
+        case import_echo_schema3.FormatEnum.Ref: {
           extension2.push([
             completion({
               onQuery: (text) => onQuery(fieldProjection, text),
               onMatch: (data) => {
                 if (model && editing) {
-                  const cell = toGridCell(editing.index);
-                  model.setCellData(cell, data);
-                  onEnter?.(cell);
-                  onFocus?.();
+                  if (isCreateOption(data)) {
+                    const { field, props } = fieldProjection;
+                    if (props.referenceSchema) {
+                      suppressNextBlur.current = true;
+                      model.modalController.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid3.cellQuery)(editing.index, gridId)), {
+                        [field.referencePath]: data.text
+                      }, (data2) => {
+                        handleEnter(data2);
+                      });
+                    }
+                  } else {
+                    handleEnter(data);
+                  }
                 }
               }
             })
@@ -465,16 +496,16 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     fieldProjection,
     handleClose
   ]);
-  const getCellContent = (0, import_react5.useCallback)(() => {
+  const getCellContent = (0, import_react7.useCallback)(() => {
     if (model && editing) {
-      const value = model.getCellData(toGridCell(editing.index));
+      const value = model.getCellData((0, import_react_ui_grid3.parseCellIndex)(editing.index));
       return value !== void 0 ? String(value) : "";
     }
   }, [
     model,
     editing
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui_grid2.GridCellEditor, {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid3.GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -504,7 +535,7 @@ var determineNavigationDelta = ({ key, shift }) => {
   }
   return shift ? -1 : 1;
 };
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
 var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
 var frozen = {
@@ -521,6 +552,7 @@ var TableRoot = ({ children, role }) => {
 var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAttention }, forwardedRef) => {
   const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
   const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.table ? (0, import_echo.fullyQualifiedId)(model.table) : "table");
+  const { t } = (0, import_react_ui.useTranslation)(translationKey);
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     if (!model || !dxGrid) {
       return {};
@@ -539,15 +571,26 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
     model,
     dxGrid
   ]);
-  const handleFocus = (increment, delta) => {
-    dxGrid?.refocus(increment, delta);
-  };
+  const handleFocus = (0, import_react.useCallback)((increment, delta) => {
+    if (dxGrid) {
+      dxGrid.refocus(increment, delta);
+    }
+  }, [
+    dxGrid
+  ]);
   const handleEnter = (0, import_react.useCallback)((cell) => {
     if (model && cell.row === model.getRowCount() - 1) {
       model.insertRow(cell.row);
+      if (dxGrid) {
+        requestAnimationFrame(() => {
+          dxGrid?.scrollToRow(cell.row + 1);
+          dxGrid?.refocus("row", 1);
+        });
+      }
     }
   }, [
-    model
+    model,
+    dxGrid
   ]);
   const handleKeyDown = (0, import_react.useCallback)((event) => {
     const cell = (0, import_react_ui_grid.closestCell)(event.target);
@@ -580,12 +623,21 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
     hasAttention,
     ignoreAttention
   ]);
-  const handleQuery = (0, import_react.useCallback)(async ({ field, props }, _text) => {
+  const handleNewColumn = (0, import_react.useCallback)(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleQuery = (0, import_react.useCallback)(async ({ field, props }, text) => {
     if (model && props.referenceSchema && field.referencePath) {
       const space = (0, import_echo.getSpace)(model.table);
       (0, import_invariant.invariant)(space, void 0, {
-        F: __dxlog_file3,
-        L: 158,
+        F: __dxlog_file2,
+        L: 180,
         S: void 0,
         A: [
           "space",
@@ -595,7 +647,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
       const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
       if (schema) {
         const { objects } = await space.db.query(import_echo.Filter.schema(schema)).run();
-        return objects.map((obj) => {
+        const options = objects.map((obj) => {
           const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
           if (!value || typeof value !== "string") {
             return void 0;
@@ -605,6 +657,15 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
             data: obj
           };
         }).filter(import_util.isNotFalsy);
+        return [
+          ...options,
+          {
+            label: t("create new object label", {
+              text
+            }),
+            data: createOption(text)
+          }
+        ];
       }
     }
     return [];
@@ -617,7 +678,7 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
       className: "attention-surface"
     });
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
     id: model.table.id ?? "table-grid"
   }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
     model,
@@ -636,11 +697,16 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, ignoreAtt
     onKeyDown: handleKeyDown,
     overscroll: "trap",
     ref: setDxGrid
-  })), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
     model
   }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
     model
   }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
+    model,
+    onNewColumn: handleNewColumn
+  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
+    model
+  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
     model
   }));
 });
@@ -653,29 +719,29 @@ var tooltipProps = {
   side: "top",
   classNames: "z-10"
 };
-var ToolbarSeparator = () => /* @__PURE__ */ import_react7.default.createElement("div", {
+var ToolbarSeparator = () => /* @__PURE__ */ import_react9.default.createElement("div", {
   role: "separator",
   className: "grow"
 });
 var ToolbarButton = ({ icon, children, ...props }) => {
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Root, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Trigger, {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Root, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Toolbar.Button, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Toolbar.Button, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Icon, {
     icon,
     size: 5
-  }), /* @__PURE__ */ import_react7.default.createElement("span", {
+  }), /* @__PURE__ */ import_react9.default.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Content, tooltipProps, children, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.Tooltip.Arrow, null))));
 };
 var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.createContext)("Toolbar");
 var ToolbarRoot = ({ classNames, children, onAction }) => {
-  return /* @__PURE__ */ import_react6.default.createElement(ToolbarContextProvider, {
+  return /* @__PURE__ */ import_react8.default.createElement(ToolbarContextProvider, {
     onAction
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Toolbar.Root, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui7.Toolbar.Root, {
     classNames: [
       "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
       classNames
@@ -684,8 +750,8 @@ var ToolbarRoot = ({ classNames, children, onAction }) => {
 };
 var Editing = () => {
   const { onAction } = useToolbarContext("Editing");
-  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(ToolbarButton, {
+  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
     value: "add-row",
     icon: "ph--plus--regular",
     "data-testid": "table.toolbar.add-row",
@@ -696,8 +762,8 @@ var Editing = () => {
 };
 var Actions = () => {
   const { onAction } = useToolbarContext("Actions");
-  const { t } = (0, import_react_ui4.useTranslation)(translationKey);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(ToolbarButton, {
+  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(ToolbarButton, {
     value: "comment",
     icon: "ph--chat-text--regular",
     "data-testid": "table.toolbar.comment",
@@ -712,6 +778,122 @@ var Toolbar = {
   Actions,
   Separator: ToolbarSeparator
 };
+var touch = (value) => value;
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
+var initializeTable = ({ space, table, initialRow = true }) => {
+  import_log2.log.info("initializeTable", {
+    table
+  }, {
+    F: __dxlog_file3,
+    L: 32,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  const ContactSchema = (0, import_echo_schema5.TypedObject)({
+    typename: `example.com/type/${import_react_client2.PublicKey.random().truncate()}`,
+    version: "0.1.0"
+  })({
+    name: import_echo_schema5.S.optional(import_echo_schema5.S.String).annotations({
+      [import_echo_schema5.AST.TitleAnnotationId]: "Name"
+    }),
+    email: import_echo_schema5.S.optional(import_echo_schema5.Format.Email),
+    salary: import_echo_schema5.S.optional(import_echo_schema5.Format.Currency()).annotations({
+      [import_echo_schema5.AST.TitleAnnotationId]: "Salary"
+    })
+  });
+  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
+  table.view = (0, import_schema2.createView)({
+    name: "Test",
+    typename: contactSchema.typename,
+    jsonSchema: contactSchema.jsonSchema,
+    fields: [
+      "name",
+      "email",
+      "salary"
+    ]
+  });
+  const projection = new import_schema2.ViewProjection(contactSchema, table.view);
+  projection.setFieldProjection({
+    field: {
+      id: table.view.fields[2].id,
+      path: "salary",
+      size: 150
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: (0, import_schema2.createFieldId)(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: import_echo_schema5.TypeEnum.Ref,
+      format: import_echo_schema5.FormatEnum.Ref,
+      referenceSchema: contactSchema.typename,
+      title: "Manager"
+    }
+  });
+  if (initialRow) {
+    space.db.add((0, import_echo5.create)(contactSchema, {}));
+  }
+  return contactSchema;
+};
+var TABLE_ATTRS = {
+  referencedCell: "data-table-ref-cell-button",
+  columnSettings: "data-table-column-settings-button",
+  rowMenu: "data-table-row-menu-button",
+  newColumn: "data-table-new-column-button"
+};
+var ICONS = {
+  referencedCell: "ph--link-simple-horizontal--regular",
+  columnSettings: "ph--caret-down--regular",
+  rowMenu: "ph--dots-three--regular",
+  newColumn: "ph--plus--regular"
+};
+var createButtonHtml = ({ button, value = "", disabled = false, testId }) => {
+  const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
+  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" data-testid="${testId}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+};
+var tableButtons = {
+  referencedCell: {
+    attr: TABLE_ATTRS.referencedCell,
+    icon: ICONS.referencedCell,
+    render: ({ targetId, schemaId }) => createButtonHtml({
+      button: "referencedCell",
+      value: `${schemaId}#${targetId}`,
+      testId: "table-ref-cell-button"
+    })
+  },
+  columnSettings: {
+    attr: TABLE_ATTRS.columnSettings,
+    icon: ICONS.columnSettings,
+    render: ({ fieldId }) => createButtonHtml({
+      button: "columnSettings",
+      value: fieldId,
+      testId: "table-column-settings-button"
+    })
+  },
+  rowMenu: {
+    attr: TABLE_ATTRS.rowMenu,
+    icon: ICONS.rowMenu,
+    render: ({ rowIndex }) => createButtonHtml({
+      button: "rowMenu",
+      value: rowIndex.toString(),
+      testId: "table-row-menu-button"
+    })
+  },
+  addColumn: {
+    attr: TABLE_ATTRS.newColumn,
+    icon: ICONS.newColumn,
+    render: ({ disabled } = {}) => createButtonHtml({
+      button: "newColumn",
+      disabled,
+      testId: "table-new-column-button"
+    })
+  }
+};
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
     this._state = (0, import_signals_core2.signal)({
@@ -752,6 +934,16 @@ var ModalController = class {
         };
         return true;
       }
+      const refButton = target.closest(`button[${tableButtons.referencedCell.attr}]`);
+      if (refButton) {
+        this._triggerRef.current = refButton;
+        const [schemaId, targetId] = refButton.getAttribute(tableButtons.referencedCell.attr).split("#");
+        this._state.value = {
+          type: "refPanel",
+          targetId,
+          typename: schemaId
+        };
+      }
       return false;
     };
     this.openColumnSettings = () => {
@@ -768,6 +960,24 @@ var ModalController = class {
         });
       }
     };
+    this.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
+      if (anchorCell) {
+        this._triggerRef.current = anchorCell;
+        this._state.value = {
+          type: "createRefPanel",
+          typename,
+          initialValues,
+          onCreate
+        };
+      } else {
+        import_log.log.warn("anchor cell not found while creating new ref", void 0, {
+          F: __dxlog_file4,
+          L: 119,
+          S: this,
+          C: (f, a) => f(...a)
+        });
+      }
+    };
     this.close = () => {
       this._state.value = {
         type: "closed"
@@ -865,14 +1075,14 @@ var tableControls = {
     render: renderCheckbox
   }
 };
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var TableModel = class extends import_context.Resource {
   constructor({ table, projection, sorting = [], pinnedRows = {
     top: [],
     bottom: []
   }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
     super();
-    this.id = `table-model-${import_react_client2.PublicKey.random().truncate()}`;
+    this.id = `table-model-${import_react_client.PublicKey.random().truncate()}`;
     this._visibleRange = (0, import_signals_core.signal)({
       start: {
         row: 0,
@@ -914,14 +1124,14 @@ var TableModel = class extends import_context.Resource {
       }
     };
     this.getMainGridCells = (range) => {
-      const values = {};
+      const cells = {};
       const fields = this._table.view?.fields ?? [];
       const addCell = (obj, field, colIndex, displayIndex) => {
         const { props } = this._projection.getFieldProjection(field.id);
-        const value = {
+        const cell = {
           get value() {
-            const value2 = (0, import_echo_schema4.getValue)(obj, field.path);
-            if (value2 == null) {
+            const value = (0, import_echo_schema4.getValue)(obj, field.path);
+            if (value == null) {
               return "";
             }
             switch (props.format) {
@@ -929,38 +1139,45 @@ var TableModel = class extends import_context.Resource {
                 if (!field.referencePath) {
                   return "";
                 }
-                return (0, import_echo_schema4.getValue)(value2, field.referencePath);
+                return (0, import_echo_schema4.getValue)(value, field.referencePath);
               }
               default: {
-                return (0, import_react_ui_form2.formatForDisplay)({
+                return (0, import_react_ui_form4.formatForDisplay)({
                   type: props.type,
                   format: props.format,
-                  value: value2
+                  value
                 });
               }
             }
           }
         };
         const classes = [];
-        const formatClasses = (0, import_react_ui_form2.cellClassesForFieldType)({
+        const formatClasses = (0, import_react_ui_form4.cellClassesForFieldType)({
           type: props.type,
           format: props.format
         });
         if (formatClasses) {
           classes.push(formatClasses);
         }
-        const rowSelectionClasses = (0, import_react_ui_form2.cellClassesForRowSelection)(this._selection.isObjectSelected(obj));
+        const rowSelectionClasses = (0, import_react_ui_form4.cellClassesForRowSelection)(this._selection.isObjectSelected(obj));
         if (rowSelectionClasses) {
           classes.push(rowSelectionClasses);
         }
         if (classes.length > 0) {
-          value.className = (0, import_react_ui_theme2.mx)(classes.flat());
+          cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
+        }
+        if (cell.value && props.format === import_echo_schema4.FormatEnum.Ref && props.referenceSchema) {
+          const targetObj = (0, import_echo_schema4.getValue)(obj, field.path);
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
         }
-        const idx = fromGridCell({
+        const idx = (0, import_react_ui_grid4.toPlaneCellIndex)({
           col: colIndex,
           row: displayIndex
         });
-        values[idx] = value;
+        cells[idx] = cell;
       };
       for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
         for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
@@ -971,17 +1188,18 @@ var TableModel = class extends import_context.Resource {
           addCell(this._sortedRows.value[row], field, col, row);
         }
       }
-      return values;
+      return cells;
     };
     this.getHeaderCells = (range) => {
-      const values = {};
+      const cells = {};
       const fields = this.table.view?.fields ?? [];
       for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
         const { field, props } = this._projection.getFieldProjection(fields[col].id);
-        values[fromGridCell({
+        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
           col,
           row: 0
         })] = {
+          // TODO(burdon): Use same logic as form for fallback title.
           value: props.title ?? field.path,
           readonly: true,
           resizeHandle: "col",
@@ -990,14 +1208,14 @@ var TableModel = class extends import_context.Resource {
           })
         };
       }
-      return values;
+      return cells;
     };
     this.getSelectionColumnCells = (range) => {
-      const values = {};
+      const cells = {};
       for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
         const isSelected = this._selection.isRowIndexSelected(row);
-        const classes = (0, import_react_ui_form2.cellClassesForRowSelection)(isSelected);
-        values[fromGridCell({
+        const classes = (0, import_react_ui_form4.cellClassesForRowSelection)(isSelected);
+        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
           col: 0,
           row
         })] = {
@@ -1010,14 +1228,14 @@ var TableModel = class extends import_context.Resource {
           })
         };
       }
-      return values;
+      return cells;
     };
     this.getActionColumnCells = (range) => {
-      const values = {};
+      const cells = {};
       for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
         const isSelected = this._selection.isRowIndexSelected(row);
-        const classes = (0, import_react_ui_form2.cellClassesForRowSelection)(isSelected);
-        values[fromGridCell({
+        const classes = (0, import_react_ui_form4.cellClassesForRowSelection)(isSelected);
+        cells[(0, import_react_ui_grid4.toPlaneCellIndex)({
           col: 0,
           row
         })] = {
@@ -1029,11 +1247,11 @@ var TableModel = class extends import_context.Resource {
           })
         };
       }
-      return values;
+      return cells;
     };
     this.getSelectAllCell = () => {
       return {
-        [fromGridCell({
+        [(0, import_react_ui_grid4.toPlaneCellIndex)({
           col: 0,
           row: 0
         })]: {
@@ -1049,13 +1267,13 @@ var TableModel = class extends import_context.Resource {
     };
     this.getNewColumnCell = () => {
       return {
-        [fromGridCell({
+        [(0, import_react_ui_grid4.toPlaneCellIndex)({
           col: 0,
           row: 0
         })]: {
           value: "",
           accessoryHtml: tableButtons.addColumn.render({
-            disabled: (this._table.view?.fields?.length ?? 0) >= import_schema2.VIEW_FIELD_LIMIT
+            disabled: (this._table.view?.fields?.length ?? 0) >= import_schema.VIEW_FIELD_LIMIT
           }),
           readonly: true
         }
@@ -1102,7 +1320,7 @@ var TableModel = class extends import_context.Resource {
           return (0, import_echo_schema4.getValue)(value, field.referencePath);
         }
         default: {
-          return (0, import_react_ui_form2.formatForEditing)({
+          return (0, import_react_ui_form4.formatForEditing)({
             type: props.type,
             format: props.format,
             value
@@ -1124,7 +1342,7 @@ var TableModel = class extends import_context.Resource {
           break;
         }
         default: {
-          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form2.parseValue)({
+          (0, import_echo_schema4.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form4.parseValue)({
             type: props.type,
             format: props.format,
             value
@@ -1173,8 +1391,8 @@ var TableModel = class extends import_context.Resource {
   }
   get columnMeta() {
     (0, import_invariant3.invariant)(this._columnMeta, void 0, {
-      F: __dxlog_file4,
-      L: 124,
+      F: __dxlog_file5,
+      L: 126,
       S: this,
       A: [
         "this._columnMeta",
@@ -1280,7 +1498,8 @@ var TableModel = class extends import_context.Resource {
           this?._table?.view?.fields.forEach((field) => touch((0, import_echo_schema4.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
-            col: start.col
+            col: start.col,
+            plane: "grid"
           });
         }));
       }
@@ -1341,8 +1560,8 @@ var TableModel = class extends import_context.Resource {
   }
 };
 var useTableModel = ({ objects, table, projection, ...props }) => {
-  const [model, setModel] = (0, import_react8.useState)();
-  (0, import_react8.useEffect)(() => {
+  const [model, setModel] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
     if (!table || !projection) {
       return;
     }
@@ -1364,7 +1583,7 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
     table,
     projection
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (objects) {
       model?.setRows(objects);
     }
@@ -1377,12 +1596,11 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Table,
+  TableSchema,
   TableType,
   Toolbar,
-  fromGridCell,
   initializeTable,
   tableButtons,
-  toGridCell,
   touch,
   translations,
   useTableModel,