@dxos/react-ui-table 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/dist/lib/browser/index.mjs

@@ -15,8 +15,8 @@ import {
   touch,
   useAddRow,
   useTableModel
-} from "./chunk-BBXDTWCX.mjs";
-import "./chunk-63UUF4IG.mjs";
+} from "./chunk-OZTXLZGM.mjs";
+import "./chunk-4K7JPALT.mjs";
 
 // src/translations.ts
 var translationKey = "react-ui-table";
@@ -51,8 +51,9 @@ var translations = [
 ];
 
 // src/components/Table/Table.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { forwardRef, useCallback as useCallback5, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo5, useState as useState4 } from "react";
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import * as String2 from "effect/String";
+import React7, { forwardRef, useCallback as useCallback4, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo4, useState as useState4 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
 import { DxEditRequest } from "@dxos/react-ui-grid";
@@ -63,11 +64,9 @@ import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking"
 import { EditorView } from "@codemirror/view";
 import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
-import { FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum2, TypeEnum } from "@dxos/echo/internal";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { createMarkdownExtensions } from "@dxos/react-ui-editor";
 import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
-import { createLinks, tagPicker } from "@dxos/react-ui-tag-picker";
 
 // src/components/TableCellEditor/CellValidationMessage.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
@@ -102,16 +101,17 @@ var CellValidationMessage = ({ validationError, variant = "error", __gridScope }
 
 // src/components/TableCellEditor/FormCellEditor.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import * as Schema from "effect/Schema";
 import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Filter, Obj } from "@dxos/echo";
-import { Ref, getValue } from "@dxos/echo-schema";
+import { FormatEnum, Ref, getValue } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
 import { getSnapshot } from "@dxos/live-object";
 import { getSpace } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
-import { cellQuery, parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
-import { getDeep, isNotFalsy, setDeep } from "@dxos/util";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { getDeep, isTruthy, setDeep } from "@dxos/util";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var createOptionLabel = [
   "create new object label",
@@ -119,7 +119,7 @@ var createOptionLabel = [
     ns: translationKey
   }
 ];
-var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals, __gridScope, ...formProps }) => {
+var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals, onCreate, __gridScope, ...formProps }) => {
   var _effect = _useSignals2();
   try {
     const { editing: contextEditing, setEditing, id: gridId } = useGridContext2("ArrayEditor", __gridScope);
@@ -129,7 +129,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       const space = getSpace(model.view);
       invariant(space, void 0, {
         F: __dxlog_file,
-        L: 53,
+        L: 57,
         S: void 0,
         A: [
           "space",
@@ -160,7 +160,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
             dxn: Obj.getDXN(obj),
             label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
           };
-        }).filter(isNotFalsy);
+        }).filter(isTruthy);
       }
       return [];
     }, [
@@ -174,7 +174,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
           const draftRow = model.draftRows.value[cell.row];
           invariant(draftRow, void 0, {
             F: __dxlog_file,
-            L: 94,
+            L: 98,
             S: void 0,
             A: [
               "draftRow",
@@ -186,7 +186,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
           const row = model.getRowAt(cell.row);
           invariant(row, void 0, {
             F: __dxlog_file,
-            L: 98,
+            L: 102,
             S: void 0,
             A: [
               "row",
@@ -219,38 +219,6 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       contextEditing,
       originalRow
     ]);
-    const handleCreate = useCallback((object) => {
-      const ref = Ref.make(object);
-      const path = fieldProjection.field.path;
-      setDeep(originalRow, [
-        path
-      ], ref);
-      contextEditing?.cellElement?.focus();
-      setEditing(null);
-      setLocalEditing(false);
-      onSave?.();
-    }, [
-      fieldProjection.field.path,
-      onSave,
-      contextEditing,
-      originalRow
-    ]);
-    const handleCreateFromQuery = useCallback(async (typeAnnotation, query) => {
-      if (model && modals && contextEditing?.index) {
-        setLocalEditing(false);
-        modals.openCreateRef(typeAnnotation.typename, document.querySelector(cellQuery(contextEditing.index, gridId)), {
-          [fieldProjection.field.referencePath]: query
-        }, handleCreate);
-      }
-    }, [
-      model,
-      modals,
-      client,
-      contextEditing?.index,
-      gridId,
-      fieldProjection,
-      handleSave
-    ]);
     useEffect(() => {
       if (contextEditing && contextEditing.cellElement) {
         anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
@@ -283,6 +251,46 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       }
       setLocalEditing(nextOpen);
     }, []);
+    const createSchema = useMemo(() => {
+      if (fieldProjection.props.format === FormatEnum.Ref && fieldProjection.props.referenceSchema) {
+        const { schema: refSchema } = getSchema({
+          typename: fieldProjection.props.referenceSchema
+        });
+        if (!refSchema) {
+          return null;
+        }
+        const omit2 = Schema.omit("id");
+        return omit2(refSchema);
+      }
+      return null;
+    }, [
+      fieldProjection.props.format,
+      fieldProjection.props.referenceSchema,
+      getSchema
+    ]);
+    const handleCreate = useCallback((values) => {
+      if (schema && onCreate) {
+        const objectWithId = onCreate(schema, values);
+        if (objectWithId) {
+          const ref = Ref.make(objectWithId);
+          const path = fieldProjection.field.path;
+          setDeep(originalRow, [
+            path
+          ], ref);
+        }
+      }
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    }, [
+      fieldProjection.field.path,
+      onSave,
+      contextEditing,
+      originalRow,
+      createSchema,
+      onCreate
+    ]);
     if (!editing) {
       return null;
     }
@@ -301,9 +309,13 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
       onSave: handleSave,
       ...formProps,
       onQueryRefOptions: handleQueryRefOptions,
-      onCreateFromQuery: handleCreateFromQuery,
-      createOptionIcon: "ph--plus--regular",
-      createOptionLabel
+      ...createSchema && {
+        onCreate: handleCreate,
+        createSchema,
+        createInitialValuePath: fieldProjection.field.referencePath,
+        createOptionIcon: "ph--plus--regular",
+        createOptionLabel
+      }
     })))));
   } finally {
     _effect.f();
@@ -313,7 +325,7 @@ var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals,
 // src/components/TableCellEditor/TableCellEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
 var adaptValidationMessage = (message) => message ? message.endsWith("is missing") ? "Can\u2019t be blank" : message : null;
-var TableValueEditor = ({ model, modals, schema, onFocus, onSave, client, __gridScope }) => {
+var TableValueEditor = ({ model, modals, schema, onFocus, onSave, onCreate, client, __gridScope }) => {
   var _effect = _useSignals3();
   try {
     const { editing } = useGridContext3("TableValueEditor", __gridScope);
@@ -338,13 +350,14 @@ var TableValueEditor = ({ model, modals, schema, onFocus, onSave, client, __grid
       model,
       editing
     ]);
-    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum.SingleSelect || fieldProjection?.props.format === FormatEnum.Ref) {
+    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum2.SingleSelect || fieldProjection?.props.format === FormatEnum2.Ref) {
       return /* @__PURE__ */ React3.createElement(FormCellEditor, {
         fieldProjection,
         model,
         schema,
         __gridScope,
         onSave,
+        onCreate,
         client,
         modals
       });
@@ -381,7 +394,7 @@ var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
       invariant2(fieldProjection2, void 0, {
         F: __dxlog_file2,
-        L: 120,
+        L: 121,
         S: void 0,
         A: [
           "fieldProjection",
@@ -483,35 +496,6 @@ var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
           }
         })
       ];
-      const format = fieldProjection.props.format;
-      if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-        const options = fieldProjection.props.options || [];
-        const mode = format === FormatEnum.SingleSelect ? "single-select" : "multi-select";
-        extensions2.push(createMarkdownExtensions());
-        extensions2.push(tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
-              id: option.id,
-              label: option.title,
-              hue: option.color
-            }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === "single-select") {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          }
-        }));
-      }
       if (model && editing) {
         extensions2.push(EditorView.updateListener.of(debounce((update) => {
           const content = update.state.doc.toString();
@@ -537,42 +521,6 @@ var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
     const getCellContent = useCallback2(() => {
       if (model && editing) {
         const cell = parseCellIndex2(editing.index);
-        const { col } = cell;
-        const field = model.projection.fields[col];
-        const fieldProjection2 = model.projection.getFieldProjection(field.id);
-        if (fieldProjection2?.props.format === FormatEnum.SingleSelect || fieldProjection2?.props.format === FormatEnum.MultiSelect) {
-          const value2 = model.getCellData(cell);
-          if (value2 !== void 0) {
-            const options = fieldProjection2.props.options || [];
-            if (fieldProjection2.props.format === FormatEnum.MultiSelect) {
-              const tagItems = value2.split(",").map((id) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color
-                  };
-                }
-                return void 0;
-              }).filter((item) => item !== void 0);
-              return createLinks(tagItems);
-            } else {
-              const option = options.find((o) => o.id === value2);
-              if (option) {
-                const tagItem = {
-                  id: value2,
-                  label: option.title,
-                  hue: option.color
-                };
-                return createLinks([
-                  tagItem
-                ]);
-              }
-            }
-          }
-          return "";
-        }
         const value = model.getCellData(cell);
         return value !== void 0 ? String(value) : "";
       }
@@ -732,106 +680,12 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
   }
 };
 
-// src/components/Table/CreateRefPanel.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import { Schema } from "effect";
-import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
-import { Type } from "@dxos/echo";
-import { live } from "@dxos/live-object";
-import { useClient } from "@dxos/react-client";
-import { getSpace as getSpace2 } from "@dxos/react-client/echo";
-import { Popover as Popover3 } from "@dxos/react-ui";
-import { Form as Form2 } from "@dxos/react-ui-form";
-import { useGridContext as useGridContext4 } from "@dxos/react-ui-grid";
-var CreateRefPanel = ({ model, modals, __gridScope }) => {
-  var _effect = _useSignals6();
-  try {
-    const { id: gridId } = useGridContext4("TableCellEditor", __gridScope);
-    const client = useClient();
-    const space = model && getSpace2(model?.view);
-    const state = modals.state.value;
-    const getSchema = useCallback4(() => {
-      if (!space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const staticSchema = client.graph.schemaRegistry.schemas.find((schema3) => Type.getTypename(schema3) === state.typename);
-      if (staticSchema) {
-        return staticSchema;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      return schema2;
-    }, [
-      space,
-      state
-    ]);
-    const schema = useMemo4(() => {
-      const schema2 = getSchema();
-      if (!schema2) {
-        return;
-      }
-      const omit = Schema.omit("id");
-      return omit(schema2);
-    }, [
-      getSchema
-    ]);
-    const handleSave = useCallback4((values) => {
-      if (!model || !space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const schema2 = getSchema();
-      if (schema2) {
-        const obj = space.db.add(live(schema2, values));
-        state.onCreate?.(obj);
-      }
-      void modals.close();
-    }, [
-      model,
-      modals,
-      space,
-      state
-    ]);
-    const handleCancel = useCallback4(() => {
-      if (model) {
-        modals.close();
-      }
-    }, [
-      modals
-    ]);
-    if (!model?.projection) {
-      return null;
-    }
-    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
-      modal: false,
-      open: state?.type === "createRefPanel" && !!schema,
-      onOpenChange: (nextOpen) => {
-        if (model && !nextOpen) {
-          return modals.close();
-        }
-      }
-    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React6.createElement(Popover3.Portal, null, /* @__PURE__ */ React6.createElement(Popover3.Content, {
-      classNames: "md:is-64",
-      "data-grid": gridId
-    }, /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React6.createElement(Form2, {
-      schema,
-      values: state.initialValues ?? {},
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React6.createElement(Popover3.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/components/Table/RowActionsMenu.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7 from "react";
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6 from "react";
 import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals6();
   try {
     const { t } = useTranslation2(translationKey);
     const hasSelection = model.selection.hasSelection.value;
@@ -839,23 +693,23 @@ var RowActionsMenu = ({ model, modals }) => {
     if (state?.type !== "row") {
       return null;
     }
-    return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
+    return /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
       modal: false,
       open: true,
       onOpenChange: modals.close
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu2.VirtualTrigger, {
+    }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
       virtualRef: modals.trigger
-    }), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+    }), /* @__PURE__ */ React6.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
       "data-testid": "row-menu-delete",
       onClick: () => model.deleteRow(state.rowIndex)
-    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
       key: action.id,
       "data-testid": `row-action-${action.id}`,
       onClick: () => {
         modals.close();
         model.handleRowAction(action.id, state.rowIndex);
       }
-    }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Arrow, null)));
+    }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
   } finally {
     _effect.f();
   }
@@ -875,9 +729,9 @@ var rowDefault = {
   }
 };
 var TableRoot = ({ children, role = "article" }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals7();
   try {
-    return /* @__PURE__ */ React8.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: mx("relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]", role === "card--popover" && "popover-card-height", role === "section" && "attention-surface", role === "card--intrinsic" && "[&_.dx-grid]:bs-[--dx-grid-content-block-size]", [
         "card--popover",
@@ -892,20 +746,20 @@ var TableRoot = ({ children, role = "article" }) => {
     _effect.f();
   }
 };
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
-  var _effect = _useSignals8();
+var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onCreate, onRowClick, testId }, forwardedRef) => {
+  var _effect = _useSignals7();
   try {
     const [dxGrid, setDxGrid] = useState4(null);
     const { hasAttention } = useAttention(model?.id ?? "table");
-    const modals = useMemo5(() => new ModalController(), []);
+    const modals = useMemo4(() => new ModalController(), []);
     const draftRowCount = model?.getDraftRowCount() ?? 0;
-    const handleSave = useCallback5(() => {
+    const handleSave = useCallback4(() => {
       dxGrid?.updateCells(true);
       dxGrid?.requestUpdate();
     }, [
       dxGrid
     ]);
-    const frozen = useMemo5(() => {
+    const frozen = useMemo4(() => {
       const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
       return {
         frozenRowsStart: 1,
@@ -917,7 +771,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       draftRowCount
     ]);
-    const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
+    const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
       presentation
     ]);
     useEffect3(() => {
@@ -930,7 +784,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       dxGrid,
       getCells
     ]);
-    const handleInsertRowResult = useCallback5((insertResult) => {
+    const handleInsertRowResult = useCallback4((insertResult) => {
       if (insertResult === "draft") {
         requestAnimationFrame(() => {
           dxGrid?.setFocus({
@@ -974,7 +828,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       dxGrid,
       model
     ]);
-    const handleSaveDraftRow = useCallback5((rowIndex = 0) => {
+    const handleSaveDraftRow = useCallback4((rowIndex = 0) => {
       if (model && dxGrid) {
         const didCommitSuccessfully = model.commitDraftRow(rowIndex);
         if (didCommitSuccessfully) {
@@ -987,7 +841,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       dxGrid
     ]);
-    const handleGridClick = useCallback5((event) => {
+    const handleGridClick = useCallback4((event) => {
       const cell = closestCell(event.target);
       if (cell) {
         const { row: rowIndex, plane } = cell;
@@ -1072,9 +926,9 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       modals,
       dxGrid
     ]);
-    const handleFocus = useCallback5((increment, delta, cell) => {
+    const handleFocus = useCallback4((increment, delta, cell) => {
       if (dxGrid && model) {
-        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1) {
+        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1 && increment !== "col") {
           handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
         } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
           handleSaveDraftRow(cell.row);
@@ -1087,7 +941,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       dxGrid,
       model
     ]);
-    const handleKeyDown = useCallback5((event) => {
+    const handleKeyDown = useCallback4((event) => {
       if (!model?.features.dataEditable) {
         return;
       }
@@ -1112,7 +966,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
             event.preventDefault();
             void navigator.clipboard.readText().then((clipboardText) => {
               try {
-                model.setCellData(cell, clipboardText);
+                model.setCellData(cell, String2.trim(clipboardText).replace(/[\n\r]+/, " "));
                 handleSave();
               } catch {
                 const cellElement = event.target.closest('[data-dx-grid-action="cell"]');
@@ -1143,6 +997,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
           try {
             model.setCellData(cell, void 0);
             event.preventDefault();
+            handleSave();
           } catch {
           }
           break;
@@ -1153,7 +1008,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       dxGrid,
       handleSave
     ]);
-    const handleAxisResize = useCallback5((event) => {
+    const handleAxisResize = useCallback4((event) => {
       if (event.axis === "col") {
         const columnIndex = parseInt(event.index, 10);
         model?.setColumnWidth(columnIndex, event.size);
@@ -1161,7 +1016,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     }, [
       model
     ]);
-    const handleWheel = useCallback5((event) => {
+    const handleWheel = useCallback4((event) => {
       if (!ignoreAttention && !hasAttention) {
         event.stopPropagation();
       }
@@ -1169,7 +1024,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       hasAttention,
       ignoreAttention
     ]);
-    const handleNewColumn = useCallback5(() => {
+    const handleNewColumn = useCallback4(() => {
       const columns = model?.getColumnCount();
       if (dxGrid && columns) {
         dxGrid.scrollToColumn(columns - 1);
@@ -1179,21 +1034,22 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       dxGrid
     ]);
     if (!model || !modals) {
-      return /* @__PURE__ */ React8.createElement("span", {
+      return /* @__PURE__ */ React7.createElement("span", {
         role: "none",
         className: "attention-surface"
       });
     }
-    return /* @__PURE__ */ React8.createElement(Grid.Root, {
+    return /* @__PURE__ */ React7.createElement(Grid.Root, {
       id: model.id ?? "table-grid"
-    }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
+    }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
       model,
       modals,
       schema,
       onFocus: handleFocus,
       onSave: handleSave,
+      onCreate,
       client
-    }), /* @__PURE__ */ React8.createElement(Grid.Content, {
+    }), /* @__PURE__ */ React7.createElement(Grid.Content, {
       className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
       columns: model.columnMeta.value,
@@ -1206,20 +1062,20 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       onClick: handleGridClick,
       onKeyDownCapture: handleKeyDown,
       onWheelCapture: handleWheel,
+      ...testId && {
+        "data-testid": testId
+      },
       ref: setDxGrid
-    }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
+    }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
+    }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
       model,
       modals
-    }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
+    }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
       model,
       modals,
       onNewColumn: handleNewColumn
-    }), /* @__PURE__ */ React8.createElement(CreateRefPanel, {
-      model,
-      modals
     }));
   } finally {
     _effect.f();
@@ -1231,14 +1087,14 @@ var Table = {
 };
 
 // src/components/Table/DynamicTable.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9, { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useCallback as useCallback5, useMemo as useMemo5, useRef as useRef3 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals8();
   try {
-    const { typename, jsonSchema } = useMemo6(() => getBaseSchema({
+    const { jsonSchema } = useMemo5(() => getBaseSchema({
       typename: name,
       properties,
       jsonSchema: _jsonSchema,
@@ -1249,20 +1105,18 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       _jsonSchema,
       schema
     ]);
-    const { projection, view } = useMemo6(() => makeDynamicTable({
-      typename,
+    const { projection, view } = useMemo5(() => makeDynamicTable({
       jsonSchema,
       properties
     }), [
-      typename,
       jsonSchema,
       properties
     ]);
     const tableRef = useRef3(null);
-    const handleCellUpdate = useCallback6((cell) => {
+    const handleCellUpdate = useCallback5((cell) => {
       tableRef.current?.update?.(cell);
     }, []);
-    const handleRowOrderChange = useCallback6(() => {
+    const handleRowOrderChange = useCallback5(() => {
       tableRef.current?.update?.();
     }, []);
     const features = useDefaultValue(props.features, () => ({
@@ -1282,20 +1136,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       onRowOrderChange: handleRowOrderChange,
       onRowAction
     });
-    const presentation = useMemo6(() => {
+    const presentation = useMemo5(() => {
       if (model) {
         return new TablePresentation(model);
       }
     }, [
       model
     ]);
-    return /* @__PURE__ */ React9.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       role: "none",
       className: mx2("is-full bs-full grow grid", classNames)
-    }, /* @__PURE__ */ React9.createElement("div", {
+    }, /* @__PURE__ */ React8.createElement("div", {
       role: "none",
       className: "grid min-bs-0 overflow-hidden"
-    }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
+    }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
       ref: tableRef,
       model,
       presentation,
@@ -1308,10 +1162,10 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // src/components/TableToolbar/TableToolbar.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import { Rx } from "@effect-rx/rx-react";
-import React10, { useMemo as useMemo7 } from "react";
-import { live as live2 } from "@dxos/live-object";
+import React9, { useMemo as useMemo6 } from "react";
+import { live } from "@dxos/live-object";
 import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
 import { rxFromSignal } from "@dxos/react-ui-menu";
 var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
@@ -1360,12 +1214,12 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.
   };
 });
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals9();
   try {
-    const state = useMemo7(() => live2({
+    const state = useMemo6(() => live({
       viewDirty
     }), []);
-    const actionsCreator = useMemo7(() => createTableToolbarActions({
+    const actionsCreator = useMemo6(() => createTableToolbarActions({
       state,
       onAdd,
       onSave,
@@ -1377,10 +1231,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
       customActions
     ]);
     const menu = useMenuActions(actionsCreator);
-    return /* @__PURE__ */ React10.createElement(MenuProvider, {
+    return /* @__PURE__ */ React9.createElement(MenuProvider, {
       ...menu,
       attendableId
-    }, /* @__PURE__ */ React10.createElement(ToolbarMenu, {
+    }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
       classNames
     }));
   } finally {