@dxos/react-ui-table 0.7.2-staging.6d26b2a → 0.7.3-main.2dd075e

package/dist/lib/browser/index.mjs

@@ -1,6 +1,7 @@
 import {
+  TableSchema,
   TableType
-} from "./chunk-EWGUNGJC.mjs";
+} from "./chunk-IYCSJDMB.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -26,17 +27,19 @@ 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"
       }
     }
   }
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React5, { forwardRef, useCallback as useCallback3, useImperativeHandle, useState as useState2 } from "react";
+import React7, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2 } from "react";
 import { getValue } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { Filter, getSpace as getSpace2, fullyQualifiedId } from "@dxos/react-client/echo";
+import { Filter, getSpace as getSpace4, fullyQualifiedId } from "@dxos/react-client/echo";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
@@ -82,13 +85,16 @@ import React2, { useCallback, useEffect, useMemo, useState } from "react";
 import { getSpace } from "@dxos/react-client/echo";
 import { DropdownMenu as DropdownMenu2 } from "@dxos/react-ui";
 import { FieldEditor } from "@dxos/react-ui-form";
-var ColumnSettings = ({ model }) => {
+var ColumnSettings = ({ model, onNewColumn }) => {
   const [newField, setNewField] = useState();
   const state = model?.modalController.state.value;
   const space = getSpace(model?.table);
   useEffect(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
+      requestAnimationFrame(() => {
+        onNewColumn();
+      });
     } else {
       setNewField(void 0);
     }
@@ -109,7 +115,7 @@ var ColumnSettings = ({ model }) => {
     state
   ]);
   const field = existingField ?? newField;
-  const handleClose = useCallback(() => {
+  const handleSave = useCallback(() => {
     model?.modalController.close();
   }, [
     model?.modalController
@@ -138,43 +144,152 @@ var ColumnSettings = ({ model }) => {
     projection: model.projection,
     field,
     registry: space?.db.schemaRegistry,
-    onClose: handleClose,
+    onSave: handleSave,
     onCancel: handleCancel
   })), /* @__PURE__ */ React2.createElement(DropdownMenu2.Arrow, null))));
 };
 
+// packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
+import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { S } from "@dxos/echo-schema";
+import { create, getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { Popover } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { useGridContext } from "@dxos/react-ui-grid";
+var CreateRefPanel = ({ model, __gridScope }) => {
+  const { id: gridId } = useGridContext("TableCellEditor", __gridScope);
+  const space = getSpace2(model?.table);
+  const state = model?.modalController.state.value;
+  const schema = useMemo2(() => {
+    if (!space || state?.type !== "createRefPanel") {
+      return;
+    }
+    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    if (schema2) {
+      const omit = S.omit("id");
+      return omit(schema2);
+    }
+  }, [
+    space,
+    state
+  ]);
+  const handleSave = useCallback2((values) => {
+    if (!model || !space || state?.type !== "createRefPanel") {
+      return;
+    }
+    const schema2 = space.db.schemaRegistry.getSchema(state.typename)?.schema;
+    if (schema2) {
+      const obj = space.db.add(create(schema2, values));
+      state.onCreate?.(obj);
+    }
+    void model.modalController.close();
+  }, [
+    model?.modalController,
+    space,
+    state
+  ]);
+  const handleCancel = useCallback2(() => {
+    if (model) {
+      model.modalController.close();
+    }
+  }, [
+    model?.modalController
+  ]);
+  if (!model?.table?.view || !model.projection) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Popover.Root, {
+    modal: false,
+    open: state?.type === "createRefPanel" && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (model && !nextOpen) {
+        return model.modalController.close();
+      }
+    }
+  }, /* @__PURE__ */ React3.createElement(Popover.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React3.createElement(Popover.Portal, null, /* @__PURE__ */ React3.createElement(Popover.Content, {
+    classNames: "md:is-64",
+    "data-grid": gridId
+  }, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React3.createElement(Form, {
+    schema,
+    values: state.initialValues ?? {},
+    onSave: handleSave,
+    onCancel: handleCancel
+  }), /* @__PURE__ */ React3.createElement(Popover.Arrow, null))));
+};
+
+// packages/ui/react-ui-table/src/components/Table/RefPanel.tsx
+import React4 from "react";
+import { getSpace as getSpace3 } from "@dxos/react-client/echo";
+import { Popover as Popover2 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
+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 = getSpace3(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__ */ React4.createElement(Popover2.Root, {
+    modal: false,
+    open: state?.type === "refPanel" && !!targetObj && !!schema,
+    onOpenChange: (nextOpen) => {
+      if (model && !nextOpen) {
+        return model.modalController.close();
+      }
+    }
+  }, /* @__PURE__ */ React4.createElement(Popover2.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, {
+    classNames: "md:is-64"
+  }, targetObj && schema && /* @__PURE__ */ React4.createElement(Form2, {
+    readonly: true,
+    values: targetObj,
+    schema
+  }), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))));
+};
+
 // packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
-import React3 from "react";
+import React5 from "react";
 import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model }) => {
   const { t } = useTranslation2(translationKey);
-  const state = model.modalController.state.value;
   const hasSelection = model.selection.hasSelection.value;
+  const state = model.modalController.state.value;
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement(DropdownMenu3.Root, {
+  return /* @__PURE__ */ React5.createElement(DropdownMenu3.Root, {
     modal: false,
     open: true,
     onOpenChange: model.modalController.close
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu3.VirtualTrigger, {
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu3.VirtualTrigger, {
     virtualRef: model.modalController.trigger
-  }), /* @__PURE__ */ React3.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Item, {
+  }), /* @__PURE__ */ React5.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React5.createElement(DropdownMenu3.Item, {
     "data-testid": "row-menu-delete",
     onClick: () => model.deleteRow(state.rowIndex)
-  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React3.createElement(DropdownMenu3.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React5.createElement(DropdownMenu3.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import React4, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { FormatEnum as FormatEnum2 } from "@dxos/echo-schema";
+import React6, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
+import { FormatEnum } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { editorKeys, GridCellEditor, useGridContext } from "@dxos/react-ui-grid";
+import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
 import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
-var completion = ({ onQuery, onMatch }) => {
+var completion = ({ debug, onQuery, onMatch }) => {
   return [
     EditorView.theme({
       ".cm-completionDialog": {
@@ -184,6 +299,7 @@ var completion = ({ onQuery, onMatch }) => {
     autocompletion({
       icons: false,
       activateOnTyping: true,
+      closeOnBlur: !debug,
       override: [
         async (context) => {
           const text = context.state.doc.toString();
@@ -209,147 +325,27 @@ var completion = ({ onQuery, onMatch }) => {
   ];
 };
 
-// packages/ui/react-ui-table/src/util/grid.ts
-var fromGridCell = ({ col, row }) => {
-  return `${col},${row}`;
-};
-var toGridCell = (cell) => {
-  const [col, row] = cell.split(",").map(Number);
-  return {
-    row,
-    col
-  };
-};
-
-// packages/ui/react-ui-table/src/util/signals.ts
-var touch = (value) => value;
-
-// packages/ui/react-ui-table/src/util/table.ts
-import { AST, Format, FormatEnum, S, TypedObject, TypeEnum } from "@dxos/echo-schema";
-import { log } from "@dxos/log";
-import { PublicKey } from "@dxos/react-client";
-import { create } from "@dxos/react-client/echo";
-import { createFieldId, createView, ViewProjection } from "@dxos/schema";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
-var initializeTable = ({ space, table, initialRow = true }) => {
-  log.info("initializeTable", {
-    table
-  }, {
-    F: __dxlog_file,
-    L: 32,
-    S: void 0,
-    C: (f, a) => f(...a)
-  });
-  const ContactSchema = TypedObject({
-    typename: `example.com/type/${PublicKey.random().truncate()}`,
-    version: "0.1.0"
-  })({
-    name: S.optional(S.String).annotations({
-      [AST.TitleAnnotationId]: "Name"
-    }),
-    email: S.optional(Format.Email),
-    salary: S.optional(Format.Currency()).annotations({
-      [AST.TitleAnnotationId]: "Salary"
-    })
-  });
-  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
-  table.view = createView({
-    name: "Test",
-    typename: contactSchema.typename,
-    jsonSchema: contactSchema.jsonSchema,
-    fields: [
-      "name",
-      "email",
-      "salary"
-    ]
-  });
-  const projection = new ViewProjection(contactSchema, table.view);
-  projection.setFieldProjection({
-    field: {
-      id: table.view.fields[2].id,
-      path: "salary",
-      size: 150
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: contactSchema.typename,
-      title: "Manager"
-    }
-  });
-  if (initialRow) {
-    space.db.add(create(contactSchema, {}));
-  }
-  return contactSchema;
-};
-
-// packages/ui/react-ui-table/src/util/table-buttons.ts
-var TABLE_ATTRS = {
-  columnSettings: "data-table-column-settings-button",
-  rowMenu: "data-table-row-menu-button",
-  newColumn: "data-table-new-column-button"
-};
-var ICONS = {
-  columnSettings: "ph--caret-down--regular",
-  rowMenu: "ph--dots-three--regular",
-  newColumn: "ph--plus--regular"
-};
-var createButtonHtml = ({ button, value = "", disabled = false, 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"
-    })
-  }
-};
-
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var __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 } = useGridContext("TableCellEditor", __gridScope);
-  const fieldProjection = useMemo2(() => {
+  const { id: gridId, editing, setEditing } = useGridContext2("TableCellEditor", __gridScope);
+  const suppressNextBlur = useRef(false);
+  const fieldProjection = useMemo3(() => {
     if (!model || !editing) {
       return;
     }
-    const { col } = toGridCell(editing.index);
+    const { col } = parseCellIndex(editing.index);
     const field = model.projection.view.fields[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     invariant(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 49,
+      F: __dxlog_file,
+      L: 65,
       S: void 0,
       A: [
         "fieldProjection",
@@ -361,29 +357,28 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     model,
     editing
   ]);
-  const handleClose = useCallback2((value, event) => {
-    if (!model || !editing || !fieldProjection) {
+  const handleEnter = useCallback3((value) => {
+    if (!model || !editing) {
       return;
     }
-    const cell = toGridCell(editing.index);
+    const cell = 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 = useCallback2((value) => {
+  const handleBlur = useCallback3((value) => {
     if (!model || !editing) {
       return;
     }
-    const cell = toGridCell(editing.index);
+    if (suppressNextBlur.current) {
+      suppressNextBlur.current = false;
+      return;
+    }
+    const cell = parseCellIndex(editing.index);
     if (value !== void 0) {
       model.setCellData(cell, value);
     }
@@ -391,7 +386,25 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     model,
     editing
   ]);
-  const extension = useMemo2(() => {
+  const handleClose = useCallback3((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = parseCellIndex(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
+  ]);
+  const extension = useMemo3(() => {
     if (!fieldProjection) {
       return [];
     }
@@ -405,16 +418,25 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     ];
     if (onQuery) {
       switch (fieldProjection.props.format) {
-        case FormatEnum2.Ref: {
+        case 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(cellQuery(editing.index, gridId)), {
+                        [field.referencePath]: data.text
+                      }, (data2) => {
+                        handleEnter(data2);
+                      });
+                    }
+                  } else {
+                    handleEnter(data);
+                  }
                 }
               }
             })
@@ -430,16 +452,16 @@ var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
     fieldProjection,
     handleClose
   ]);
-  const getCellContent = useCallback2(() => {
+  const getCellContent = useCallback3(() => {
     if (model && editing) {
-      const value = model.getCellData(toGridCell(editing.index));
+      const value = model.getCellData(parseCellIndex(editing.index));
       return value !== void 0 ? String(value) : "";
     }
   }, [
     model,
     editing
   ]);
-  return /* @__PURE__ */ React4.createElement(GridCellEditor, {
+  return /* @__PURE__ */ React6.createElement(GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -471,7 +493,7 @@ var determineNavigationDelta = ({ key, shift }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var __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 = {
@@ -480,7 +502,7 @@ var frozen = {
   frozenColsEnd: 1
 };
 var TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: mx("relative border-bs !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
   }, children);
@@ -488,6 +510,7 @@ var TableRoot = ({ children, role }) => {
 var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState2(null);
   const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
+  const { t } = useTranslation3(translationKey);
   useImperativeHandle(forwardedRef, () => {
     if (!model || !dxGrid) {
       return {};
@@ -506,17 +529,28 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
     model,
     dxGrid
   ]);
-  const handleFocus = (increment, delta) => {
-    dxGrid?.refocus(increment, delta);
-  };
-  const handleEnter = useCallback3((cell) => {
+  const handleFocus = useCallback4((increment, delta) => {
+    if (dxGrid) {
+      dxGrid.refocus(increment, delta);
+    }
+  }, [
+    dxGrid
+  ]);
+  const handleEnter = useCallback4((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 = useCallback3((event) => {
+  const handleKeyDown = useCallback4((event) => {
     const cell = closestCell(event.target);
     if (!model || !cell) {
       return;
@@ -531,7 +565,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
   }, [
     model
   ]);
-  const handleAxisResize = useCallback3((event) => {
+  const handleAxisResize = useCallback4((event) => {
     if (event.axis === "col") {
       const columnIndex = parseInt(event.index, 10);
       model?.setColumnWidth(columnIndex, event.size);
@@ -539,7 +573,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
   }, [
     model
   ]);
-  const handleWheel = useCallback3((event) => {
+  const handleWheel = useCallback4((event) => {
     if (!ignoreAttention && !hasAttention) {
       event.stopPropagation();
     }
@@ -547,12 +581,21 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
     hasAttention,
     ignoreAttention
   ]);
-  const handleQuery = useCallback3(async ({ field, props }, _text) => {
+  const handleNewColumn = useCallback4(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleQuery = useCallback4(async ({ field, props }, text) => {
     if (model && props.referenceSchema && field.referencePath) {
-      const space = getSpace2(model.table);
+      const space = getSpace4(model.table);
       invariant2(space, void 0, {
-        F: __dxlog_file3,
-        L: 158,
+        F: __dxlog_file2,
+        L: 180,
         S: void 0,
         A: [
           "space",
@@ -562,7 +605,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
       const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
       if (schema) {
         const { objects } = await space.db.query(Filter.schema(schema)).run();
-        return objects.map((obj) => {
+        const options = objects.map((obj) => {
           const value = getValue(obj, field.referencePath);
           if (!value || typeof value !== "string") {
             return void 0;
@@ -572,6 +615,15 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
             data: obj
           };
         }).filter(isNotFalsy);
+        return [
+          ...options,
+          {
+            label: t("create new object label", {
+              text
+            }),
+            data: createOption(text)
+          }
+        ];
       }
     }
     return [];
@@ -579,19 +631,19 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
     model
   ]);
   if (!model) {
-    return /* @__PURE__ */ React5.createElement("span", {
+    return /* @__PURE__ */ React7.createElement("span", {
       role: "none",
       className: "attention-surface"
     });
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Grid.Root, {
+  return /* @__PURE__ */ React7.createElement(Grid.Root, {
     id: model.table.id ?? "table-grid"
-  }, /* @__PURE__ */ React5.createElement(TableCellEditor, {
+  }, /* @__PURE__ */ React7.createElement(TableCellEditor, {
     model,
     onEnter: handleEnter,
     onFocus: handleFocus,
     onQuery: handleQuery
-  }), /* @__PURE__ */ React5.createElement(Grid.Content, {
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
     onWheelCapture: handleWheel,
     className: mx("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
     frozen,
@@ -603,11 +655,16 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, ignoreAttention }, forwarde
     onKeyDown: handleKeyDown,
     overscroll: "trap",
     ref: setDxGrid
-  })), /* @__PURE__ */ React5.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
+    model
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
     model
-  }), /* @__PURE__ */ React5.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+    model,
+    onNewColumn: handleNewColumn
+  }), /* @__PURE__ */ React7.createElement(RefPanel, {
     model
-  }), /* @__PURE__ */ React5.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
     model
   }));
 });
@@ -618,42 +675,42 @@ var Table = {
 
 // packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
 import { createContext } from "@radix-ui/react-context";
-import React7 from "react";
-import { Toolbar as NaturalToolbar2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import React9 from "react";
+import { Toolbar as NaturalToolbar2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Toolbar/common.tsx
-import React6 from "react";
+import React8 from "react";
 import { Icon, Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
 var buttonStyles = "min-bs-0 p-2";
 var tooltipProps = {
   side: "top",
   classNames: "z-10"
 };
-var ToolbarSeparator = () => /* @__PURE__ */ React6.createElement("div", {
+var ToolbarSeparator = () => /* @__PURE__ */ React8.createElement("div", {
   role: "separator",
   className: "grow"
 });
 var ToolbarButton = ({ icon, children, ...props }) => {
-  return /* @__PURE__ */ React6.createElement(Tooltip.Root, null, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(NaturalToolbar.Button, {
+  }, /* @__PURE__ */ React8.createElement(NaturalToolbar.Button, {
     variant: "ghost",
     ...props,
     classNames: buttonStyles
-  }, /* @__PURE__ */ React6.createElement(Icon, {
+  }, /* @__PURE__ */ React8.createElement(Icon, {
     icon,
     size: 5
-  }), /* @__PURE__ */ React6.createElement("span", {
+  }), /* @__PURE__ */ React8.createElement("span", {
     className: "sr-only"
-  }, children))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React6.createElement(Tooltip.Arrow, null))));
+  }, children))), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null))));
 };
 
 // packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
 var ToolbarRoot = ({ classNames, children, onAction }) => {
-  return /* @__PURE__ */ React7.createElement(ToolbarContextProvider, {
+  return /* @__PURE__ */ React9.createElement(ToolbarContextProvider, {
     onAction
-  }, /* @__PURE__ */ React7.createElement(NaturalToolbar2.Root, {
+  }, /* @__PURE__ */ React9.createElement(NaturalToolbar2.Root, {
     classNames: [
       "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1 attention-surface",
       classNames
@@ -662,8 +719,8 @@ var ToolbarRoot = ({ classNames, children, onAction }) => {
 };
 var Editing = () => {
   const { onAction } = useToolbarContext("Editing");
-  const { t } = useTranslation3(translationKey);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+  const { t } = useTranslation4(translationKey);
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
     value: "add-row",
     icon: "ph--plus--regular",
     "data-testid": "table.toolbar.add-row",
@@ -674,8 +731,8 @@ var Editing = () => {
 };
 var Actions = () => {
   const { onAction } = useToolbarContext("Actions");
-  const { t } = useTranslation3(translationKey);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+  const { t } = useTranslation4(translationKey);
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(ToolbarButton, {
     value: "comment",
     icon: "ph--chat-text--regular",
     "data-testid": "table.toolbar.comment",
@@ -702,11 +759,142 @@ import { getValue as getValue2, setValue, FormatEnum as FormatEnum3 } from "@dxo
 import { invariant as invariant3 } from "@dxos/invariant";
 import { PublicKey as PublicKey2 } from "@dxos/react-client";
 import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-form";
+import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
 
 // packages/ui/react-ui-table/src/model/modal-controller.ts
 import { signal } from "@preact/signals-core";
+import { log as log2 } from "@dxos/log";
+
+// packages/ui/react-ui-table/src/util/signals.ts
+var touch = (value) => value;
+
+// packages/ui/react-ui-table/src/util/table.ts
+import { AST, Format, FormatEnum as FormatEnum2, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { log } from "@dxos/log";
+import { PublicKey } from "@dxos/react-client";
+import { create as create2 } from "@dxos/react-client/echo";
+import { createFieldId, createView, ViewProjection } from "@dxos/schema";
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
+var initializeTable = ({ space, table, initialRow = true }) => {
+  log.info("initializeTable", {
+    table
+  }, {
+    F: __dxlog_file3,
+    L: 32,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  const ContactSchema = TypedObject({
+    typename: `example.com/type/${PublicKey.random().truncate()}`,
+    version: "0.1.0"
+  })({
+    name: S2.optional(S2.String).annotations({
+      [AST.TitleAnnotationId]: "Name"
+    }),
+    email: S2.optional(Format.Email),
+    salary: S2.optional(Format.Currency()).annotations({
+      [AST.TitleAnnotationId]: "Salary"
+    })
+  });
+  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
+  table.view = createView({
+    name: "Test",
+    typename: contactSchema.typename,
+    jsonSchema: contactSchema.jsonSchema,
+    fields: [
+      "name",
+      "email",
+      "salary"
+    ]
+  });
+  const projection = new ViewProjection(contactSchema, table.view);
+  projection.setFieldProjection({
+    field: {
+      id: table.view.fields[2].id,
+      path: "salary",
+      size: 150
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: createFieldId(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: TypeEnum.Ref,
+      format: FormatEnum2.Ref,
+      referenceSchema: contactSchema.typename,
+      title: "Manager"
+    }
+  });
+  if (initialRow) {
+    space.db.add(create2(contactSchema, {}));
+  }
+  return contactSchema;
+};
+
+// packages/ui/react-ui-table/src/util/table-buttons.ts
+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"
+    })
+  }
+};
+
+// packages/ui/react-ui-table/src/model/modal-controller.ts
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
 var ModalController = class {
   constructor() {
     this._state = signal({
@@ -747,6 +935,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 = () => {
@@ -763,6 +961,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 {
+        log2.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"
@@ -868,7 +1084,7 @@ var tableControls = {
 };
 
 // packages/ui/react-ui-table/src/model/table-model.ts
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var TableModel = class extends Resource2 {
   constructor({ table, projection, sorting = [], pinnedRows = {
     top: [],
@@ -925,14 +1141,14 @@ var TableModel = class extends Resource2 {
       }
     };
     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 = getValue2(obj, field.path);
-            if (value2 == null) {
+            const value = getValue2(obj, field.path);
+            if (value == null) {
               return "";
             }
             switch (props.format) {
@@ -940,13 +1156,13 @@ var TableModel = class extends Resource2 {
                 if (!field.referencePath) {
                   return "";
                 }
-                return getValue2(value2, field.referencePath);
+                return getValue2(value, field.referencePath);
               }
               default: {
                 return formatForDisplay({
                   type: props.type,
                   format: props.format,
-                  value: value2
+                  value
                 });
               }
             }
@@ -965,13 +1181,20 @@ var TableModel = class extends Resource2 {
           classes.push(rowSelectionClasses);
         }
         if (classes.length > 0) {
-          value.className = mx2(classes.flat());
+          cell.className = mx2(classes.flat());
+        }
+        if (cell.value && props.format === FormatEnum3.Ref && props.referenceSchema) {
+          const targetObj = getValue2(obj, field.path);
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id,
+            schemaId: props.referenceSchema
+          });
         }
-        const idx = fromGridCell({
+        const idx = 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++) {
@@ -982,17 +1205,18 @@ var TableModel = class extends Resource2 {
           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[toPlaneCellIndex({
           col,
           row: 0
         })] = {
+          // TODO(burdon): Use same logic as form for fallback title.
           value: props.title ?? field.path,
           readonly: true,
           resizeHandle: "col",
@@ -1001,14 +1225,14 @@ var TableModel = class extends Resource2 {
           })
         };
       }
-      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 = cellClassesForRowSelection(isSelected);
-        values[fromGridCell({
+        cells[toPlaneCellIndex({
           col: 0,
           row
         })] = {
@@ -1021,14 +1245,14 @@ var TableModel = class extends Resource2 {
           })
         };
       }
-      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 = cellClassesForRowSelection(isSelected);
-        values[fromGridCell({
+        cells[toPlaneCellIndex({
           col: 0,
           row
         })] = {
@@ -1040,11 +1264,11 @@ var TableModel = class extends Resource2 {
           })
         };
       }
-      return values;
+      return cells;
     };
     this.getSelectAllCell = () => {
       return {
-        [fromGridCell({
+        [toPlaneCellIndex({
           col: 0,
           row: 0
         })]: {
@@ -1060,7 +1284,7 @@ var TableModel = class extends Resource2 {
     };
     this.getNewColumnCell = () => {
       return {
-        [fromGridCell({
+        [toPlaneCellIndex({
           col: 0,
           row: 0
         })]: {
@@ -1190,8 +1414,8 @@ var TableModel = class extends Resource2 {
   }
   get columnMeta() {
     invariant3(this._columnMeta, void 0, {
-      F: __dxlog_file4,
-      L: 124,
+      F: __dxlog_file5,
+      L: 126,
       S: this,
       A: [
         "this._columnMeta",
@@ -1297,7 +1521,8 @@ var TableModel = class extends Resource2 {
           this?._table?.view?.fields.forEach((field) => touch(getValue2(obj, field.path)));
           this._onCellUpdate?.({
             row,
-            col: start.col
+            col: start.col,
+            plane: "grid"
           });
         }));
       }
@@ -1395,12 +1620,11 @@ var useTableModel = ({ objects, table, projection, ...props }) => {
 };
 export {
   Table,
+  TableSchema,
   TableType,
   Toolbar,
-  fromGridCell,
   initializeTable,
   tableButtons,
-  toGridCell,
   touch,
   translations_default as translations,
   useTableModel,