@dxos/react-ui-table 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/dist/lib/node/index.cjs

@@ -37,13 +37,14 @@ __export(node_exports, {
   Table: () => Table,
   TableModel: () => TableModel,
   TablePresentation: () => TablePresentation,
-  TableSchema: () => import_chunk_TGG6OZ54.TableSchema,
+  TableSchema: () => import_chunk_CXDGXPM6.TableSchema,
   TableToolbar: () => TableToolbar,
-  TableType: () => import_chunk_TGG6OZ54.TableType,
+  TableType: () => import_chunk_CXDGXPM6.TableType,
   cellClassesForRowSelection: () => cellClassesForRowSelection,
-  getBaseSchems: () => getBaseSchems,
+  getBaseSchema: () => getBaseSchema,
   initializeTable: () => initializeTable,
   makeDynamicTable: () => makeDynamicTable,
+  narrowSchema: () => narrowSchema,
   tableButtons: () => tableButtons,
   tableControls: () => tableControls,
   touch: () => touch,
@@ -51,7 +52,8 @@ __export(node_exports, {
   useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_TGG6OZ54 = require("./chunk-TGG6OZ54.cjs");
+var import_chunk_CXDGXPM6 = require("./chunk-CXDGXPM6.cjs");
+var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -61,68 +63,88 @@ 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_tracking2 = require("@preact-signals/safe-react/tracking");
 var import_react2 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
+var import_tracking3 = require("@preact-signals/safe-react/tracking");
 var import_react3 = __toESM(require("react"));
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_form = require("@dxos/react-ui-form");
+var import_tracking4 = require("@preact-signals/safe-react/tracking");
+var import_effect = require("effect");
 var import_react4 = __toESM(require("react"));
-var import_echo_schema2 = require("@dxos/echo-schema");
 var import_echo2 = 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_tracking5 = require("@preact-signals/safe-react/tracking");
 var import_react5 = __toESM(require("react"));
 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_signals_core = require("@preact/signals-core");
 var import_context = require("@dxos/context");
-var import_echo_schema3 = require("@dxos/echo-schema");
+var import_echo_schema2 = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_live_object = require("@dxos/live-object");
-var import_react_ui_form4 = require("@dxos/react-ui-form");
+var import_react_ui_form3 = require("@dxos/react-ui-form");
 var import_signals_core2 = require("@preact/signals-core");
 var import_context2 = require("@dxos/context");
+var import_echo_schema3 = require("@dxos/echo-schema");
 var import_live_object2 = require("@dxos/live-object");
 var import_schema = require("@dxos/schema");
+var import_effect2 = require("effect");
 var import_echo_schema4 = require("@dxos/echo-schema");
 var import_react_client = require("@dxos/react-client");
 var import_echo3 = require("@dxos/react-client/echo");
 var import_schema2 = require("@dxos/schema");
+var import_effect3 = require("effect");
+var import_SchemaAST = require("effect/SchemaAST");
 var import_signals_core3 = require("@preact/signals-core");
 var import_lodash = __toESM(require("lodash.orderby"));
 var import_echo_schema5 = require("@dxos/echo-schema");
-var import_react_ui_form5 = require("@dxos/react-ui-form");
+var import_react_ui_form4 = require("@dxos/react-ui-form");
 var import_signals_core4 = require("@preact/signals-core");
 var import_log = require("@dxos/log");
 var import_signals_core5 = require("@preact/signals-core");
+var import_Predicate = require("effect/Predicate");
 var import_echo_schema6 = require("@dxos/echo-schema");
-var import_react_ui_form6 = require("@dxos/react-ui-form");
+var import_react_ui_form5 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_schema3 = require("@dxos/schema");
-var import_react7 = __toESM(require("react"));
+var import_tracking6 = require("@preact-signals/safe-react/tracking");
+var import_react6 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
 var import_invariant3 = require("@dxos/invariant");
-var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui6 = require("@dxos/react-ui");
 var import_react_ui_editor = require("@dxos/react-ui-editor");
 var import_react_ui_grid4 = require("@dxos/react-ui-grid");
 var import_react_ui_tag_picker = require("@dxos/react-ui-tag-picker");
+var import_tracking7 = require("@preact-signals/safe-react/tracking");
+var import_react7 = __toESM(require("react"));
+var import_echo_schema8 = require("@dxos/echo-schema");
+var import_invariant4 = require("@dxos/invariant");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_form6 = require("@dxos/react-ui-form");
+var import_react_ui_grid5 = require("@dxos/react-ui-grid");
+var import_util2 = require("@dxos/util");
 var import_autocomplete = require("@codemirror/autocomplete");
 var import_view = require("@codemirror/view");
+var import_tracking8 = require("@preact-signals/safe-react/tracking");
 var import_react8 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_tracking9 = require("@preact-signals/safe-react/tracking");
 var import_signals_core6 = require("@preact/signals-core");
 var import_react9 = require("react");
 var import_echo4 = require("@dxos/react-client/echo");
 var import_react_ui_attention2 = require("@dxos/react-ui-attention");
-var import_util2 = require("@dxos/util");
+var import_util3 = require("@dxos/util");
+var import_tracking10 = require("@preact-signals/safe-react/tracking");
+var import_rx_react = require("@effect-rx/rx-react");
 var import_react10 = __toESM(require("react"));
 var import_live_object3 = require("@dxos/live-object");
 var import_react_ui_menu = require("@dxos/react-ui-menu");
+var import_react_ui_menu2 = require("@dxos/react-ui-menu");
 var translationKey = "table";
 var translations_default = [
   {
@@ -154,224 +176,211 @@ var translations_default = [
   }
 ];
 var ColumnActionsMenu = ({ model, modals }) => {
-  const { t } = (0, import_react_ui2.useTranslation)(translationKey);
-  const state = modals.state.value;
-  if (state?.type !== "column") {
-    return null;
-  }
-  const currentSort = model.sorting?.sorting;
-  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Root, {
-    modal: false,
-    open: true,
-    onOpenChange: modals.close
-  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__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.sorting?.setSort(state.fieldId, "desc")
-  }, 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.sorting?.setSort(state.fieldId, "asc")
-  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    "data-testid": "column-clear-sort",
-    onClick: () => model.sorting?.clearSort()
-  }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    "data-testid": "column-delete",
-    onClick: () => model.deleteColumn(state.fieldId)
-  }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    "data-testid": "column-settings",
-    onClick: () => modals.openColumnSettings()
-  }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
+  var _effect = (0, import_tracking2.useSignals)();
+  try {
+    const { t } = (0, import_react_ui2.useTranslation)(translationKey);
+    const state = modals.state.value;
+    if (state?.type !== "column") {
+      return null;
+    }
+    const currentSort = model.sorting?.sorting;
+    const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__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.sorting?.setSort(state.fieldId, "desc")
+    }, 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.sorting?.setSort(state.fieldId, "asc")
+    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
+      "data-testid": "column-clear-sort",
+      onClick: () => model.sorting?.clearSort()
+    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
+      "data-testid": "column-delete",
+      onClick: () => model.deleteColumn(state.fieldId)
+    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Item, {
+      "data-testid": "column-settings",
+      onClick: () => modals.openColumnSettings()
+    }, t("column action settings"))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 };
 var ColumnSettings = ({ model, modals, onNewColumn }) => {
-  const [newField, setNewField] = (0, import_react3.useState)();
-  const state = modals.state.value;
-  const space = model?.space;
-  (0, import_react3.useEffect)(() => {
-    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
-      setNewField(model.projection.createFieldProjection());
-      requestAnimationFrame(() => {
-        onNewColumn();
-      });
-    } else {
-      setNewField(void 0);
-    }
-  }, [
-    model?.projection,
-    state
-  ]);
-  const existingField = (0, import_react3.useMemo)(() => {
-    if (state?.type === "columnSettings") {
-      const { mode } = state;
-      if (mode.type === "edit") {
-        return model?.view?.fields.find((f) => f.id === mode.fieldId);
+  var _effect = (0, import_tracking3.useSignals)();
+  try {
+    const [newField, setNewField] = (0, import_react3.useState)();
+    const state = modals.state.value;
+    const space = model?.space;
+    (0, import_react3.useEffect)(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+        setNewField(model.projection.createFieldProjection());
+        requestAnimationFrame(() => {
+          onNewColumn();
+        });
+      } else {
+        setNewField(void 0);
       }
-    }
-    return void 0;
-  }, [
-    model?.view?.fields,
-    state
-  ]);
-  const field = existingField ?? newField;
-  const handleSave = (0, import_react3.useCallback)(() => {
-    modals.close();
-  }, [
-    modals
-  ]);
-  const handleCancel = (0, import_react3.useCallback)(() => {
-    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
-      model?.projection?.deleteFieldProjection(newField.id);
-    }
-  }, [
-    model?.projection,
-    state,
-    newField
-  ]);
-  if (!model?.view || !model.projection || !field) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Root, {
-    modal: false,
-    open: state?.type === "columnSettings"
-  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__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_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
-    view: model.view,
-    projection: model.projection,
-    field,
-    registry: space?.db.schemaRegistry,
-    onSave: handleSave,
-    onCancel: handleCancel
-  })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
-};
-var CreateRefPanel = ({ model, modals, __gridScope }) => {
-  const { id: gridId } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
-  const space = model?.space;
-  const state = modals.state.value;
-  const schema = (0, import_react4.useMemo)(() => {
-    if (!space || state?.type !== "createRefPanel") {
-      return;
-    }
-    const [schema2] = space.db.schemaRegistry.query({
-      typename: state.typename
-    }).runSync();
-    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.query({
-      typename: state.typename
-    }).runSync();
-    if (schema2) {
-      const obj = space.db.add((0, import_echo2.create)(schema2, values));
-      state.onCreate?.(obj);
-    }
-    void modals.close();
-  }, [
-    modals,
-    space,
-    state
-  ]);
-  const handleCancel = (0, import_react4.useCallback)(() => {
-    if (model) {
+    }, [
+      model?.projection,
+      state
+    ]);
+    const existingField = (0, import_react3.useMemo)(() => {
+      if (state?.type === "columnSettings") {
+        const { mode } = state;
+        if (mode.type === "edit") {
+          return model?.view?.fields.find((f) => f.id === mode.fieldId);
+        }
+      }
+      return void 0;
+    }, [
+      model?.view?.fields,
+      state
+    ]);
+    const field = existingField ?? newField;
+    const handleSave = (0, import_react3.useCallback)(() => {
       modals.close();
-    }
-  }, [
-    modals
-  ]);
-  if (!model?.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 modals.close();
+    }, [
+      modals
+    ]);
+    const handleCancel = (0, import_react3.useCallback)(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+        model?.projection?.deleteFieldProjection(newField.id);
       }
-    }
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
-    virtualRef: modals.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;
+    }, [
+      model?.projection,
+      state,
+      newField
+    ]);
+    if (!model?.view || !model.projection || !field) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Root, {
+      modal: false,
+      open: state?.type === "columnSettings"
+    }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__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_ui3.DropdownMenu.Viewport, null, /* @__PURE__ */ import_react3.default.createElement(import_react_ui_form.FieldEditor, {
+      view: model.view,
+      projection: model.projection,
+      field,
+      registry: space?.db.schemaRegistry,
+      onSave: handleSave,
+      onCancel: handleCancel
+    })), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
   }
 };
-var RefPanel = ({ model, modals }) => {
-  const state = modals.state.value;
-  const space = model?.space;
-  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.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 (!nextOpen) {
-        return modals.close();
+var CreateRefPanel = ({ model, modals, __gridScope }) => {
+  var _effect = (0, import_tracking4.useSignals)();
+  try {
+    const { id: gridId } = (0, import_react_ui_grid2.useGridContext)("TableCellEditor", __gridScope);
+    const space = model?.space;
+    const state = modals.state.value;
+    const schema = (0, import_react4.useMemo)(() => {
+      if (!space || state?.type !== "createRefPanel") {
+        return;
       }
-    }
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Popover.VirtualTrigger, {
-    virtualRef: modals.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))));
+      const [schema2] = space.db.schemaRegistry.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const omit = import_effect.Schema.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.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const obj = space.db.add((0, import_echo2.live)(schema2, values));
+        state.onCreate?.(obj);
+      }
+      void modals.close();
+    }, [
+      modals,
+      space,
+      state
+    ]);
+    const handleCancel = (0, import_react4.useCallback)(() => {
+      if (model) {
+        modals.close();
+      }
+    }, [
+      modals
+    ]);
+    if (!model?.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 modals.close();
+        }
+      }
+    }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Popover.VirtualTrigger, {
+      virtualRef: modals.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))));
+  } finally {
+    _effect.f();
+  }
 };
 var RowActionsMenu = ({ model, modals }) => {
-  const { t } = (0, import_react_ui6.useTranslation)(translationKey);
-  const hasSelection = model.selection.hasSelection.value;
-  const state = modals.state.value;
-  if (state?.type !== "row") {
-    return null;
-  }
-  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Root, {
-    modal: false,
-    open: true,
-    onOpenChange: modals.close
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.VirtualTrigger, {
-    virtualRef: modals.trigger
-  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Viewport, null, model.features.dataEditable !== false && /* @__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")), model.rowActions?.map((action) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Item, {
-    key: action.id,
-    "data-testid": `row-action-${action.id}`,
-    onClick: () => {
-      modals.close();
-      model.handleRowAction(action.id, state.rowIndex);
-    }
-  }, t(action.translationKey)))), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.DropdownMenu.Arrow, null)));
+  var _effect = (0, import_tracking5.useSignals)();
+  try {
+    const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+    const hasSelection = model.selection.hasSelection.value;
+    const state = modals.state.value;
+    if (state?.type !== "row") {
+      return null;
+    }
+    return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Content, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.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__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Item, {
+      key: action.id,
+      "data-testid": `row-action-${action.id}`,
+      onClick: () => {
+        modals.close();
+        model.handleRowAction(action.id, state.rowIndex);
+      }
+    }, t(action.translationKey)))), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Arrow, null)));
+  } finally {
+    _effect.f();
+  }
 };
-var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = (0, import_schema.getSchemaFromPropertyDefinitions)(typename, properties);
     return {
@@ -380,8 +389,8 @@ var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
     };
   } else if (schema) {
     return {
-      typename: schema.typename,
-      jsonSchema: schema.jsonSchema
+      typename: (0, import_echo_schema3.getTypename)(schema),
+      jsonSchema: (0, import_echo_schema3.toJsonSchema)(schema)
     };
   } else if (typename && jsonSchema) {
     return {
@@ -401,7 +410,7 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = (0, import_live_object2.create)(import_chunk_TGG6OZ54.TableType, {
+  const table = (0, import_live_object2.live)(import_chunk_CXDGXPM6.TableType, {
     name: "dynamic-table",
     view: (0, import_live_object2.makeRef)(view)
   });
@@ -450,8 +459,8 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     if (!schema) {
       throw new Error(`Schema not found: ${typename}`);
     }
-    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).filter((prop) => prop.format !== import_echo_schema4.FormatEnum.Ref).map((prop) => prop.name);
-    table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
+    const fields = (0, import_schema2.getSchemaProperties)(schema.ast).map((prop) => prop.name);
+    table.view = import_echo_schema4.Ref.make((0, import_schema2.createView)({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -464,7 +473,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
       ContactSchema
     ]);
     const fields = ContactFields;
-    table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
+    table.view = import_echo_schema4.Ref.make((0, import_schema2.createView)({
       name: "View",
       typename: schema.typename,
       jsonSchema: schema.jsonSchema,
@@ -472,7 +481,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
     }));
     createProjection(schema, table.view.target);
     if (initialRow) {
-      space.db.add((0, import_echo3.create)(schema, {}));
+      space.db.add((0, import_echo3.live)(schema, {}));
     }
     return schema;
   }
@@ -481,13 +490,13 @@ var ContactSchema = (0, import_echo_schema4.TypedObject)({
   typename: `example.com/type/${import_react_client.PublicKey.random().truncate()}`,
   version: "0.1.0"
 })({
-  name: import_echo_schema4.S.optional(import_echo_schema4.S.String).annotations({
-    [import_echo_schema4.AST.TitleAnnotationId]: "Name"
+  name: import_effect2.Schema.optional(import_effect2.Schema.String).annotations({
+    title: "Name"
   }),
-  active: import_echo_schema4.S.optional(import_echo_schema4.S.Boolean),
-  email: import_echo_schema4.S.optional(import_echo_schema4.Format.Email),
-  salary: import_echo_schema4.S.optional(import_echo_schema4.Format.Currency()).annotations({
-    [import_echo_schema4.AST.TitleAnnotationId]: "Salary"
+  active: import_effect2.Schema.optional(import_effect2.Schema.Boolean),
+  email: import_effect2.Schema.optional(import_echo_schema4.Format.Email),
+  salary: import_effect2.Schema.optional(import_echo_schema4.Format.Currency()).annotations({
+    title: "Salary"
   })
 });
 var ContactFields = [
@@ -538,7 +547,7 @@ var BUTTON_IDENTIFIERS = {
 var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
   const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
   const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${icon}"/></svg></button>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 var addColumnButton = {
   attr: BUTTON_IDENTIFIERS.newColumn,
@@ -574,26 +583,6 @@ var columnSettingsButton = {
     fieldId: el.getAttribute("data-field-id")
   })
 };
-var referencedCellButton = {
-  attr: BUTTON_IDENTIFIERS.referencedCell,
-  icon: "ph--link-simple-horizontal--regular",
-  render: ({ targetId, schemaId }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.referencedCell,
-      icon: referencedCellButton.icon,
-      data: {
-        "data-target-id": targetId,
-        "data-schema-id": schemaId
-      },
-      testId: "table-ref-cell-button"
-    });
-  },
-  getData: (el) => ({
-    type: "referencedCell",
-    targetId: el.getAttribute("data-target-id"),
-    schemaId: el.getAttribute("data-schema-id")
-  })
-};
 var rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: "ph--dots-three--regular",
@@ -638,7 +627,6 @@ var sortButton = {
 var tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
-  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton
 };
@@ -694,14 +682,20 @@ var tableControls = {
     })
   }
 };
+var narrowSchema = (schema, paths) => {
+  const ast = schema?.ast;
+  if ((0, import_SchemaAST.isTypeLiteral)(ast)) {
+    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
+    if (propertySignatures.length > 0) {
+      const narrowType = new import_SchemaAST.TypeLiteral(propertySignatures, []);
+      return import_effect3.Schema.make(narrowType);
+    }
+  }
+  return void 0;
+};
 var SelectionModel = class extends import_context2.Resource {
   constructor(_rows, _selectionMode, _onSelectionChanged) {
-    super();
-    this._rows = _rows;
-    this._selectionMode = _selectionMode;
-    this._onSelectionChanged = _onSelectionChanged;
-    this._selection = (0, import_signals_core2.signal)(/* @__PURE__ */ new Set());
-    this._validSelectedIds = (0, import_signals_core2.computed)(() => {
+    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._onSelectionChanged = _onSelectionChanged, this._selection = (0, import_signals_core2.signal)(/* @__PURE__ */ new Set()), this._validSelectedIds = (0, import_signals_core2.computed)(() => {
       const rows = this._rows.value;
       if (!rows) {
         return /* @__PURE__ */ new Set();
@@ -710,27 +704,21 @@ var SelectionModel = class extends import_context2.Resource {
       return new Set([
         ...this._selection.value
       ].filter((id) => validIds.has(id)));
-    });
-    this._hasSelection = (0, import_signals_core2.computed)(() => this._validSelectedIds.value.size > 0);
-    this._allSelected = (0, import_signals_core2.computed)(() => {
+    }), this._hasSelection = (0, import_signals_core2.computed)(() => this._validSelectedIds.value.size > 0), this._allSelected = (0, import_signals_core2.computed)(() => {
       const rows = this._rows.value;
       if (rows.length === 0) {
         return false;
       }
       return rows.every((row) => this._selection.value.has(row.id));
-    });
-    this.getSelectedRows = () => {
+    }), this.getSelectedRows = () => {
       const selectedIds = this._validSelectedIds.value;
       return this._rows.value.filter((row) => selectedIds.has(row.id));
-    };
-    this.isRowIndexSelected = (rowIndex) => {
+    }, this.isRowIndexSelected = (rowIndex) => {
       const row = this._rows.value[rowIndex];
       return this._selection.value.has(row.id);
-    };
-    this.isObjectSelected = (object) => {
+    }, this.isObjectSelected = (object) => {
       return this._selection.value.has(object.id);
-    };
-    this.toggleSelectionForRowIndex = (rowIndex) => {
+    }, this.toggleSelectionForRowIndex = (rowIndex) => {
       const row = this._rows.value[rowIndex];
       const newSelection = new Set(this._selection.value);
       if (newSelection.has(row.id)) {
@@ -742,8 +730,7 @@ var SelectionModel = class extends import_context2.Resource {
         newSelection.add(row.id);
       }
       this._selection.value = newSelection;
-    };
-    this.setSelection = (mode) => {
+    }, this.setSelection = (mode) => {
       switch (mode) {
         case "all": {
           this._selection.value = new Set(this._rows.value.map((row) => row.id));
@@ -931,13 +918,27 @@ var TableSorting = class {
       const refValue = (0, import_echo_schema5.getValue)(value.target, field.referencePath);
       return refValue;
     }
-    return (0, import_react_ui_form5.formatForDisplay)({
+    return (0, import_react_ui_form4.formatForDisplay)({
       type,
       format,
       value
     });
   }
 };
+var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var extractTagIds = (value) => {
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const ids = [];
+  let match;
+  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
+    if (match[2]) {
+      ids.push(match[2]);
+    }
+  }
+  return ids.length > 0 ? ids : void 0;
+};
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
 var defaultFeatures = {
   selection: {
@@ -1002,20 +1003,20 @@ var TableModel = class extends import_context.Resource {
       }
       const field = fields[col];
       const dataIndex = this._sorting.getDataIndex(row);
-      const value = (0, import_echo_schema3.getValue)(this._rows.value[dataIndex], field.path);
+      const value = (0, import_echo_schema2.getValue)(this._rows.value[dataIndex], field.path);
       if (value == null) {
         return "";
       }
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case import_echo_schema3.FormatEnum.Ref: {
+        case import_echo_schema2.FormatEnum.Ref: {
           if (!field.referencePath) {
             return "";
           }
-          return (0, import_echo_schema3.getValue)(value.target, field.referencePath);
+          return (0, import_echo_schema2.getValue)(value.target, field.referencePath);
         }
         default: {
-          return (0, import_react_ui_form4.formatForEditing)({
+          return (0, import_react_ui_form3.formatForEditing)({
             type: props.type,
             format: props.format,
             value
@@ -1032,14 +1033,28 @@ var TableModel = class extends import_context.Resource {
       const field = fields[col];
       const { props } = this._projection.getFieldProjection(field.id);
       switch (props.format) {
-        case import_echo_schema3.FormatEnum.Ref: {
-          if ((0, import_live_object.isReactiveObject)(value)) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
+        case import_echo_schema2.FormatEnum.Ref: {
+          if ((0, import_live_object.isLiveObject)(value)) {
+            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
+          }
+          break;
+        }
+        case import_echo_schema2.FormatEnum.SingleSelect: {
+          const ids = extractTagIds(value);
+          if (ids && ids.length > 0) {
+            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, ids[0]);
+          }
+          break;
+        }
+        case import_echo_schema2.FormatEnum.MultiSelect: {
+          const ids = extractTagIds(value);
+          if (ids) {
+            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, ids);
           }
           break;
         }
         default: {
-          (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form4.parseValue)({
+          (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, (0, import_react_ui_form3.parseValue)({
             type: props.type,
             format: props.format,
             value
@@ -1058,7 +1073,7 @@ var TableModel = class extends import_context.Resource {
     };
     (0, import_invariant2.invariant)(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
       F: __dxlog_file,
-      L: 114,
+      L: 115,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -1118,7 +1133,7 @@ var TableModel = class extends import_context.Resource {
   get columnMeta() {
     (0, import_invariant2.invariant)(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 183,
+      L: 184,
       S: this,
       A: [
         "this._columnMeta",
@@ -1185,7 +1200,7 @@ var TableModel = class extends import_context.Resource {
       for (let row = start.row; row <= end.row; row++) {
         rowEffects.push((0, import_signals_core.effect)(() => {
           const obj = this._sorting.sortedRows.value[row];
-          this._view?.fields.forEach((field) => touch((0, import_echo_schema3.getValue)(obj, field.path)));
+          this._view?.fields.forEach((field) => touch((0, import_echo_schema2.getValue)(obj, field.path)));
           this._onCellUpdate?.({
             row,
             col: start.col,
@@ -1206,9 +1221,9 @@ var TableModel = class extends import_context.Resource {
     const dataRow = this._sorting.getDataIndex(row);
     const fields = this._view?.fields ?? [];
     const field = fields[col];
-    const value = (0, import_echo_schema3.getValue)(this._rows.value[dataRow], field.path);
+    const value = (0, import_echo_schema2.getValue)(this._rows.value[dataRow], field.path);
     const updatedValue = update(value);
-    (0, import_echo_schema3.setValue)(this._rows.value[dataRow], field.path, updatedValue);
+    (0, import_echo_schema2.setValue)(this._rows.value[dataRow], field.path, updatedValue);
   }
   //
   // Column Operations
@@ -1394,6 +1409,9 @@ var TablePresentation = class {
           if (value == null) {
             return "";
           }
+          if (props.type === "array") {
+            return "";
+          }
           switch (props.format) {
             case import_echo_schema6.FormatEnum.Boolean:
             case import_echo_schema6.FormatEnum.SingleSelect:
@@ -1407,7 +1425,7 @@ var TablePresentation = class {
               return (0, import_echo_schema6.getValue)(value.target, field.referencePath);
             }
             default: {
-              return (0, import_react_ui_form6.formatForDisplay)({
+              return (0, import_react_ui_form5.formatForDisplay)({
                 type: props.type,
                 format: props.format,
                 value
@@ -1417,7 +1435,7 @@ var TablePresentation = class {
         }
       };
       const classes = [];
-      const formatClasses = (0, import_react_ui_form6.cellClassesForFieldType)({
+      const formatClasses = (0, import_react_ui_form5.cellClassesForFieldType)({
         type: props.type,
         format: props.format
       });
@@ -1431,13 +1449,38 @@ var TablePresentation = class {
       if (classes.length > 0) {
         cell.className = (0, import_react_ui_theme2.mx)(classes.flat());
       }
+      if (props.type === import_echo_schema6.TypeEnum.Array) {
+        const targetArray = (0, import_echo_schema6.getValue)(obj, field.path);
+        if (targetArray && Array.isArray(targetArray)) {
+          const getLabel = (value) => {
+            if (!value) {
+              return void 0;
+            }
+            if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+              return String(value);
+            }
+            if (Array.isArray(value)) {
+              return "Array";
+            }
+            if (typeof value === "object" && value.name) {
+              return value.name;
+            }
+            if (typeof value === "object" && value.value) {
+              return `${value.value}`;
+            }
+            return "Object";
+          };
+          const tags = targetArray.map(getLabel).filter(import_Predicate.isNotNullable).map((title) => {
+            return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
+          }).join("");
+          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
+        }
+      }
       if (props.format === import_echo_schema6.FormatEnum.Ref && props.referenceSchema) {
         const targetObj = (0, import_echo_schema6.getValue)(obj, field.path)?.target;
         if (targetObj) {
-          cell.accessoryHtml = tableButtons.referencedCell.render({
-            targetId: targetObj.id,
-            schemaId: props.referenceSchema
-          });
+          const dxn = (0, import_echo_schema6.getObjectDXN)(targetObj)?.toString();
+          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
         }
       }
       if (props.format === import_echo_schema6.FormatEnum.Boolean) {
@@ -1471,7 +1514,7 @@ var TablePresentation = class {
             return null;
           }).filter(Boolean).join(" ");
           if (tags) {
-            cell.accessoryHtml = tags;
+            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
           }
         }
       }
@@ -1516,7 +1559,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-gridHeader"
+        className: "!bg-toolbarSurface"
       };
     }
     return cells;
@@ -1567,7 +1610,7 @@ var TablePresentation = class {
           col: 0,
           row: 0
         })]: {
-          className: "!bg-gridHeader",
+          className: "!bg-toolbarSurface",
           readonly: true,
           value: ""
         }
@@ -1583,7 +1626,7 @@ var TablePresentation = class {
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        className: "!bg-gridHeader",
+        className: "!bg-toolbarSurface",
         readonly: true,
         value: ""
       }
@@ -1598,7 +1641,7 @@ var TablePresentation = class {
         accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
           disabled: (this.model.view?.fields?.length ?? 0) >= import_schema3.VIEW_FIELD_LIMIT
         }) : void 0,
-        className: "!bg-gridHeader",
+        className: "!bg-toolbarSurface",
         readonly: true,
         value: ""
       }
@@ -1627,6 +1670,97 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
       ];
   }
 };
+var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
+var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
+  var _effect = (0, import_tracking7.useSignals)();
+  try {
+    const { editing, setEditing } = (0, import_react_ui_grid5.useGridContext)("ArrayEditor", __gridScope);
+    const cellRef = (0, import_react7.useRef)(null);
+    (0, import_react7.useEffect)(() => {
+      if (editing && editing.cellElement) {
+        cellRef.current = editing.cellElement;
+      }
+    }, [
+      editing?.cellElement
+    ]);
+    const narrowedSchema = (0, import_react7.useMemo)(() => {
+      if (!schema) {
+        return void 0;
+      }
+      return narrowSchema(schema, [
+        fieldProjection.field.path
+      ]);
+    }, [
+      JSON.stringify(schema),
+      fieldProjection.field.path
+    ]);
+    const originalRow = (0, import_react7.useMemo)(() => {
+      if (model && editing) {
+        const cell = (0, import_react_ui_grid5.parseCellIndex)(editing.index);
+        const row = model.getRowAt(cell.row);
+        (0, import_invariant4.invariant)(row, void 0, {
+          F: __dxlog_file3,
+          L: 47,
+          S: void 0,
+          A: [
+            "row",
+            ""
+          ]
+        });
+        return row;
+      }
+      return void 0;
+    }, [
+      model,
+      editing
+    ]);
+    const formValues = (0, import_react7.useMemo)(() => {
+      if (originalRow) {
+        return (0, import_echo_schema8.getSnapshot)(originalRow);
+      }
+    }, [
+      originalRow
+    ]);
+    const handleSave = (0, import_react7.useCallback)((values) => {
+      const path = fieldProjection.field.path;
+      const value = (0, import_util2.getDeep)(values, [
+        path
+      ]);
+      (0, import_util2.setDeep)(originalRow, [
+        path
+      ], value);
+      setEditing(null);
+    }, [
+      fieldProjection.field.path,
+      originalRow
+    ]);
+    const handleOpenChange = (0, import_react7.useCallback)((nextOpen) => {
+      if (nextOpen === false) {
+        setEditing(null);
+      }
+    }, [
+      setEditing
+    ]);
+    if (!editing) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Root, {
+      open: editing !== null,
+      onOpenChange: handleOpenChange
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.VirtualTrigger, {
+      virtualRef: cellRef
+    }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Content, {
+      tabIndex: -1,
+      classNames: "popover-card-width"
+    }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Popover.Arrow, null), /* @__PURE__ */ import_react7.default.createElement(import_react_ui_form6.Form, {
+      values: formValues,
+      schema: narrowedSchema,
+      onSave: handleSave
+    })));
+  } finally {
+    _effect.f();
+  }
+};
 var completion = ({ debug, onQuery, onMatch }) => {
   return [
     import_view.EditorView.theme({
@@ -1662,218 +1796,268 @@ var completion = ({ debug, onQuery, onMatch }) => {
     })
   ];
 };
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var __dxlog_file4 = "/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, modals, onEnter, onFocus, onQuery, __gridScope }) => {
-  const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
-  const suppressNextBlur = (0, import_react7.useRef)(false);
-  const { themeMode } = (0, import_react_ui7.useThemeContext)();
-  const fieldProjection = (0, import_react7.useMemo)(() => {
-    if (!model || !editing) {
-      return;
+var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gridScope }) => {
+  var _effect = (0, import_tracking6.useSignals)();
+  try {
+    const { editing } = (0, import_react_ui_grid4.useGridContext)("TableValueEditor", __gridScope);
+    const fieldProjection = (0, import_react6.useMemo)(() => {
+      if (!model || !editing) {
+        return;
+      }
+      const { col } = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      const field = model.projection.view.fields[col];
+      const fieldProjection2 = model.projection.getFieldProjection(field.id);
+      (0, import_invariant3.invariant)(fieldProjection2, void 0, {
+        F: __dxlog_file4,
+        L: 73,
+        S: void 0,
+        A: [
+          "fieldProjection",
+          ""
+        ]
+      });
+      return fieldProjection2;
+    }, [
+      model,
+      editing
+    ]);
+    if (fieldProjection?.props.type === import_echo_schema7.TypeEnum.Array) {
+      return /* @__PURE__ */ import_react6.default.createElement(FormCellEditor, {
+        fieldProjection,
+        model,
+        schema,
+        __gridScope
+      });
     }
-    const { col } = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-    const field = model.projection.view.fields[col];
-    const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    (0, import_invariant3.invariant)(fieldProjection2, void 0, {
-      F: __dxlog_file3,
-      L: 71,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
-      ]
+    return /* @__PURE__ */ import_react6.default.createElement(TableCellEditor, {
+      model,
+      modals,
+      onEnter,
+      onFocus,
+      onQuery,
+      __gridScope
     });
-    return fieldProjection2;
-  }, [
-    model,
-    editing
-  ]);
-  const handleEnter = (0, import_react7.useCallback)((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-    model.setCellData(cell, value);
-    onEnter?.(cell);
-    onFocus?.();
-    setEditing(null);
-  }, [
-    model,
-    editing,
-    onEnter,
-    onFocus,
-    setEditing
-  ]);
-  const handleBlur = (0, import_react7.useCallback)((value) => {
-    if (!model || !editing) {
-      return;
-    }
-    if (suppressNextBlur.current) {
-      suppressNextBlur.current = false;
-      return;
-    }
-    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-    if (value !== void 0) {
+  } finally {
+    _effect.f();
+  }
+};
+var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
+  var _effect = (0, import_tracking6.useSignals)();
+  try {
+    const { id: gridId, editing, setEditing } = (0, import_react_ui_grid4.useGridContext)("TableCellEditor", __gridScope);
+    const suppressNextBlur = (0, import_react6.useRef)(false);
+    const { themeMode } = (0, import_react_ui6.useThemeContext)();
+    const fieldProjection = (0, import_react6.useMemo)(() => {
+      if (!model || !editing) {
+        return;
+      }
+      const { col } = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      const field = model.projection.view.fields[col];
+      const fieldProjection2 = model.projection.getFieldProjection(field.id);
+      (0, import_invariant3.invariant)(fieldProjection2, void 0, {
+        F: __dxlog_file4,
+        L: 114,
+        S: void 0,
+        A: [
+          "fieldProjection",
+          ""
+        ]
+      });
+      return fieldProjection2;
+    }, [
+      model,
+      editing
+    ]);
+    const handleEnter = (0, import_react6.useCallback)((value) => {
+      if (!model || !editing) {
+        return;
+      }
+      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
       model.setCellData(cell, value);
-    }
-  }, [
-    model,
-    editing
-  ]);
-  const handleClose = (0, import_react7.useCallback)((value, event) => {
-    if (!model || !editing || !fieldProjection) {
-      return;
-    }
-    const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-    onEnter?.(cell);
-    if (event && onFocus) {
-      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
-    }
-  }, [
-    model,
-    editing,
-    onFocus,
-    onEnter,
-    fieldProjection
-  ]);
-  const extension = (0, import_react7.useMemo)(() => {
-    if (!fieldProjection) {
-      return [];
-    }
-    const extension2 = [
-      (0, import_react_ui_grid4.editorKeys)({
-        onClose: handleClose,
-        ...editing?.initialContent && {
-          onNav: handleClose
-        }
-      })
-    ];
-    const format = fieldProjection.props.format;
-    if (format === import_echo_schema7.FormatEnum.SingleSelect || format === import_echo_schema7.FormatEnum.MultiSelect) {
-      extension2.push((0, import_react_ui_editor.createMarkdownExtensions)({
-        themeMode
-      }));
-      const options = fieldProjection.props.options || [];
-      const mode = format === import_echo_schema7.FormatEnum.SingleSelect ? "single-select" : "multi-select";
-      extension2.push((0, import_react_ui_tag_picker.tagPickerExtension)({
-        mode,
-        inGrid: true,
-        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") {
-              handleEnter(ids[0]);
-            } else {
-              handleEnter(ids);
+      onEnter?.(cell);
+      onFocus?.();
+      setEditing(null);
+    }, [
+      model,
+      editing,
+      onEnter,
+      onFocus,
+      setEditing
+    ]);
+    const handleBlur = (0, import_react6.useCallback)((value) => {
+      if (!model || !editing) {
+        return;
+      }
+      if (suppressNextBlur.current) {
+        suppressNextBlur.current = false;
+        return;
+      }
+      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      if (value !== void 0) {
+        model.setCellData(cell, value);
+      }
+    }, [
+      model,
+      editing
+    ]);
+    const handleClose = (0, import_react6.useCallback)((value, event) => {
+      if (!model || !editing || !fieldProjection) {
+        return;
+      }
+      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+      onEnter?.(cell);
+      if (event && onFocus) {
+        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+      }
+    }, [
+      model,
+      editing,
+      onFocus,
+      onEnter,
+      fieldProjection
+    ]);
+    const extension = (0, import_react6.useMemo)(() => {
+      if (!fieldProjection) {
+        return [];
+      }
+      const extension2 = [
+        (0, import_react_ui_grid4.editorKeys)({
+          onClose: handleClose,
+          ...editing?.initialContent && {
+            onNav: handleClose
+          }
+        })
+      ];
+      const format = fieldProjection.props.format;
+      if (format === import_echo_schema7.FormatEnum.SingleSelect || format === import_echo_schema7.FormatEnum.MultiSelect) {
+        extension2.push((0, import_react_ui_editor.createMarkdownExtensions)({
+          themeMode
+        }));
+        const options = fieldProjection.props.options || [];
+        const mode = format === import_echo_schema7.FormatEnum.SingleSelect ? "single-select" : "multi-select";
+        extension2.push((0, import_react_ui_tag_picker.tagPickerExtension)({
+          mode,
+          inGrid: true,
+          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") {
+                handleEnter(ids[0]);
+              } else {
+                handleEnter(ids);
+              }
             }
           }
-        }
-      }));
-    }
-    if (onQuery) {
-      switch (fieldProjection.props.format) {
-        case import_echo_schema7.FormatEnum.Ref: {
-          extension2.push([
-            completion({
-              onQuery: (text) => onQuery(fieldProjection, text),
-              onMatch: (data) => {
-                if (model && editing && modals) {
-                  if (isCreateOption(data)) {
-                    const { field, props } = fieldProjection;
-                    if (props.referenceSchema) {
-                      suppressNextBlur.current = true;
-                      modals.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid4.cellQuery)(editing.index, gridId)), {
-                        [field.referencePath]: data.text
-                      }, (data2) => {
-                        handleEnter(data2);
-                      });
+        }));
+      }
+      if (onQuery) {
+        switch (fieldProjection.props.format) {
+          case import_echo_schema7.FormatEnum.Ref: {
+            extension2.push([
+              completion({
+                onQuery: (text) => onQuery(fieldProjection, text),
+                onMatch: (data) => {
+                  if (model && editing && modals) {
+                    if (isCreateOption(data)) {
+                      const { field, props } = fieldProjection;
+                      if (props.referenceSchema) {
+                        suppressNextBlur.current = true;
+                        modals.openCreateRef(props.referenceSchema, document.querySelector((0, import_react_ui_grid4.cellQuery)(editing.index, gridId)), {
+                          [field.referencePath]: data.text
+                        }, (data2) => {
+                          handleEnter(data2);
+                        });
+                      }
+                    } else {
+                      handleEnter(data);
                     }
-                  } else {
-                    handleEnter(data);
                   }
                 }
-              }
-            })
-          ]);
-          break;
+              })
+            ]);
+            break;
+          }
         }
       }
-    }
-    return extension2;
-  }, [
-    model,
-    modals,
-    editing,
-    fieldProjection,
-    handleClose,
-    themeMode
-  ]);
-  const getCellContent = (0, import_react7.useCallback)(() => {
-    if (model && editing) {
-      const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
-      const { col } = cell;
-      const field = model.projection.view.fields[col];
-      const fieldProjection2 = model.projection.getFieldProjection(field.id);
-      if (fieldProjection2?.props.format === import_echo_schema7.FormatEnum.SingleSelect || fieldProjection2?.props.format === import_echo_schema7.FormatEnum.MultiSelect) {
-        const value2 = model.getCellData(cell);
-        if (value2 !== void 0) {
-          const options = fieldProjection2.props.options || [];
-          if (fieldProjection2.props.format === import_echo_schema7.FormatEnum.MultiSelect && Array.isArray(value2)) {
-            const tagItems = value2.map((id) => {
-              const option = options.find((o) => o.id === id);
+      return extension2;
+    }, [
+      model,
+      modals,
+      editing,
+      fieldProjection,
+      handleClose,
+      themeMode
+    ]);
+    const getCellContent = (0, import_react6.useCallback)(() => {
+      if (model && editing) {
+        const cell = (0, import_react_ui_grid4.parseCellIndex)(editing.index);
+        const { col } = cell;
+        const field = model.projection.view.fields[col];
+        const fieldProjection2 = model.projection.getFieldProjection(field.id);
+        if (fieldProjection2?.props.format === import_echo_schema7.FormatEnum.SingleSelect || fieldProjection2?.props.format === import_echo_schema7.FormatEnum.MultiSelect) {
+          const value2 = model.getCellData(cell);
+          if (value2 !== void 0) {
+            const options = fieldProjection2.props.options || [];
+            if (fieldProjection2.props.format === import_echo_schema7.FormatEnum.MultiSelect && Array.isArray(value2)) {
+              const tagItems = value2.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 (0, import_react_ui_tag_picker.createLinks)(tagItems);
+            } else {
+              const option = options.find((o) => o.id === value2);
               if (option) {
-                return {
-                  id,
+                const tagItem = {
+                  id: value2,
                   label: option.title,
                   hue: option.color
                 };
+                return (0, import_react_ui_tag_picker.createLinks)([
+                  tagItem
+                ]);
               }
-              return void 0;
-            }).filter((item) => item !== void 0);
-            return (0, import_react_ui_tag_picker.createLinks)(tagItems);
-          } else {
-            const option = options.find((o) => o.id === value2);
-            if (option) {
-              const tagItem = {
-                id: value2,
-                label: option.title,
-                hue: option.color
-              };
-              return (0, import_react_ui_tag_picker.createLinks)([
-                tagItem
-              ]);
             }
           }
+          return "";
         }
-        return "";
+        const value = model.getCellData(cell);
+        return value !== void 0 ? String(value) : "";
       }
-      const value = model.getCellData(cell);
-      return value !== void 0 ? String(value) : "";
-    }
-  }, [
-    model,
-    editing
-  ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_grid4.GridCellEditor, {
-    extension,
-    getCellContent,
-    onBlur: handleBlur
-  });
+    }, [
+      model,
+      editing
+    ]);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react_ui_grid4.GridCellEditor, {
+      extension,
+      getCellContent,
+      onBlur: handleBlur
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var determineNavigationAxis = ({ key }) => {
   switch (key) {
@@ -1899,422 +2083,438 @@ var determineNavigationDelta = ({ key, shift }) => {
   }
   return shift ? -1 : 1;
 };
-var __dxlog_file4 = "/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 __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var TableRoot = ({ children, role }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme.mx)("relative !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);
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    return /* @__PURE__ */ import_react.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme.mx)("relative !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);
+  } finally {
+    _effect.f();
+  }
 };
-var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
-  const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
-  const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.id ?? "table");
-  const { t } = (0, import_react_ui.useTranslation)(translationKey);
-  const modals = (0, import_react.useMemo)(() => new ModalController(), []);
-  const frozen = (0, import_react.useMemo)(() => {
-    const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
-    return {
-      frozenRowsStart: 1,
-      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
-      frozenColsEnd: noActionColumn ? 0 : 1
-    };
-  }, [
-    model
-  ]);
-  (0, import_react.useEffect)(() => {
-    if (!presentation || !dxGrid) {
-      return;
-    }
-    dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
-  }, [
-    presentation,
-    dxGrid
-  ]);
-  (0, import_react.useImperativeHandle)(forwardedRef, () => {
-    if (!presentation || !dxGrid) {
-      return {};
-    }
-    return {
-      update: (cell) => {
-        if (cell) {
-          dxGrid.updateIfWithinBounds(cell);
-        } else {
-          dxGrid.updateCells(true);
-          dxGrid.requestUpdate();
-        }
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
+  var _effect = (0, import_tracking.useSignals)();
+  try {
+    const [dxGrid, setDxGrid] = (0, import_react.useState)(null);
+    const { hasAttention } = (0, import_react_ui_attention.useAttention)(model?.id ?? "table");
+    const { t } = (0, import_react_ui.useTranslation)(translationKey);
+    const modals = (0, import_react.useMemo)(() => new ModalController(), []);
+    const frozen = (0, import_react.useMemo)(() => {
+      const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
+      return {
+        frozenRowsStart: 1,
+        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+        frozenColsEnd: noActionColumn ? 0 : 1
+      };
+    }, [
+      model
+    ]);
+    const getCells = (0, import_react.useCallback)((range, plane) => presentation?.getCells(range, plane) ?? {}, [
+      presentation
+    ]);
+    (0, import_react.useEffect)(() => {
+      if (!presentation || !dxGrid) {
+        return;
       }
-    };
-  }, [
-    presentation,
-    dxGrid
-  ]);
-  const handleGridClick = (0, import_react.useCallback)((event) => {
-    const rowIndex = (0, import_util.safeParseInt)(event.target.ariaRowIndex ?? "");
-    if (rowIndex != null) {
-      if (onRowClick) {
-        const row = model?.getRowAt(rowIndex);
-        row && onRowClick(row);
-      }
-      if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
-        model.selection.toggleSelectionForRowIndex(rowIndex);
+      dxGrid.getCells = getCells;
+    }, [
+      presentation,
+      dxGrid,
+      getCells
+    ]);
+    (0, import_react.useImperativeHandle)(forwardedRef, () => {
+      if (!presentation || !dxGrid) {
+        return {};
       }
-    }
-    if (!modals) {
-      return;
-    }
-    const buttonSelector = Object.values(tableButtons).map((button) => `button[${button.attr}]`).join(",");
-    const tableButtonElement = event.target.closest(buttonSelector);
-    if (tableButtonElement) {
-      const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
-      if (!button) {
+      return {
+        update: (cell) => {
+          if (cell) {
+            dxGrid.updateIfWithinBounds(cell);
+          } else {
+            dxGrid.updateCells(true);
+            dxGrid.requestUpdate();
+          }
+        }
+      };
+    }, [
+      presentation,
+      dxGrid
+    ]);
+    const handleGridClick = (0, import_react.useCallback)((event) => {
+      const rowIndex = (0, import_util.safeParseInt)(event.target.ariaRowIndex ?? "");
+      if (rowIndex != null) {
+        if (onRowClick) {
+          const row = model?.getRowAt(rowIndex);
+          row && onRowClick(row);
+        }
+        if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
+          model.selection.toggleSelectionForRowIndex(rowIndex);
+        }
+      }
+      if (!modals) {
         return;
       }
-      modals.setTrigger(tableButtonElement);
-      const data = button.getData(tableButtonElement);
-      switch (data.type) {
-        case "rowMenu": {
-          modals.showRowMenu(data.rowIndex);
-          break;
-        }
-        case "columnSettings": {
-          modals.showColumnMenu(data.fieldId);
-          break;
+      const buttonSelector = Object.values(tableButtons).map((button) => `button[${button.attr}]`).join(",");
+      const tableButtonElement = event.target.closest(buttonSelector);
+      if (tableButtonElement) {
+        const button = Object.values(tableButtons).find((btn) => tableButtonElement.hasAttribute(btn.attr));
+        if (!button) {
+          return;
         }
-        case "newColumn": {
-          modals.showColumnCreator();
-          break;
+        modals.setTrigger(tableButtonElement);
+        const data = button.getData(tableButtonElement);
+        switch (data.type) {
+          case "rowMenu": {
+            modals.showRowMenu(data.rowIndex);
+            break;
+          }
+          case "columnSettings": {
+            modals.showColumnMenu(data.fieldId);
+            break;
+          }
+          case "newColumn": {
+            modals.showColumnCreator();
+            break;
+          }
+          case "sort": {
+            model?.sorting?.toggleSort(data.fieldId);
+            break;
+          }
         }
-        case "referencedCell": {
-          modals.showReferencePanel(data.targetId, data.schemaId);
-          break;
+        return;
+      }
+      const controlSelector = Object.values(tableControls).map((control) => `input[${control.attr}]`).join(",");
+      const controlElement = event.target.closest(controlSelector);
+      if (controlElement) {
+        const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
+        if (!control) {
+          return;
         }
-        case "sort": {
-          model?.sorting?.toggleSort(data.fieldId);
-          break;
+        const data = control.getData(controlElement);
+        switch (data.type) {
+          case "checkbox": {
+            if (data.header) {
+              model?.selection.setSelection(model.selection.allRowsSeleted.value ? "none" : "all");
+            } else {
+              model?.selection.toggleSelectionForRowIndex(data.rowIndex);
+            }
+            break;
+          }
+          case "switch": {
+            if (model) {
+              model.updateCellData({
+                row: data.rowIndex,
+                col: data.colIndex
+              }, (value) => !value);
+            }
+            break;
+          }
         }
       }
-      return;
-    }
-    const controlSelector = Object.values(tableControls).map((control) => `input[${control.attr}]`).join(",");
-    const controlElement = event.target.closest(controlSelector);
-    if (controlElement) {
-      const control = Object.values(tableControls).find((ctrl) => controlElement.hasAttribute(ctrl.attr));
-      if (!control) {
+    }, [
+      model,
+      modals
+    ]);
+    const handleFocus = (0, import_react.useCallback)((increment, delta) => {
+      if (dxGrid) {
+        dxGrid.refocus(increment, delta);
+      }
+    }, [
+      dxGrid
+    ]);
+    const handleEnter = (0, import_react.useCallback)((cell) => {
+      if (!model?.features.dataEditable) {
         return;
       }
-      const data = control.getData(controlElement);
-      switch (data.type) {
-        case "checkbox": {
-          if (data.header) {
-            model?.selection.setSelection(model.selection.allRowsSeleted.value ? "none" : "all");
-          } else {
-            model?.selection.toggleSelectionForRowIndex(data.rowIndex);
-          }
-          break;
+      if (model && cell.row === model.getRowCount() - 1) {
+        model.insertRow(cell.row);
+        if (dxGrid) {
+          requestAnimationFrame(() => {
+            dxGrid?.scrollToRow(cell.row + 1);
+            dxGrid?.refocus("row", 1);
+          });
         }
-        case "switch": {
-          if (model) {
-            model.updateCellData({
-              row: data.rowIndex,
-              col: data.colIndex
-            }, (value) => !value);
-          }
+      }
+    }, [
+      model,
+      dxGrid
+    ]);
+    const handleKeyDown = (0, import_react.useCallback)((event) => {
+      if (!model?.features.dataEditable) {
+        return;
+      }
+      const cell = (0, import_react_ui_grid.closestCell)(event.target);
+      if (!model || !cell) {
+        return;
+      }
+      switch (event.key) {
+        case "Backspace":
+        case "Delete": {
+          model.setCellData(cell, void 0);
           break;
         }
       }
-    }
-  }, [
-    model,
-    modals
-  ]);
-  const handleFocus = (0, import_react.useCallback)((increment, delta) => {
-    if (dxGrid) {
-      dxGrid.refocus(increment, delta);
-    }
-  }, [
-    dxGrid
-  ]);
-  const handleEnter = (0, import_react.useCallback)((cell) => {
-    if (!model?.features.dataEditable) {
-      return;
-    }
-    if (model && cell.row === model.getRowCount() - 1) {
-      model.insertRow(cell.row);
-      if (dxGrid) {
-        requestAnimationFrame(() => {
-          dxGrid?.scrollToRow(cell.row + 1);
-          dxGrid?.refocus("row", 1);
-        });
+    }, [
+      model
+    ]);
+    const handleAxisResize = (0, import_react.useCallback)((event) => {
+      if (event.axis === "col") {
+        const columnIndex = parseInt(event.index, 10);
+        model?.setColumnWidth(columnIndex, event.size);
       }
-    }
-  }, [
-    model,
-    dxGrid
-  ]);
-  const handleKeyDown = (0, import_react.useCallback)((event) => {
-    if (!model?.features.dataEditable) {
-      return;
-    }
-    const cell = (0, import_react_ui_grid.closestCell)(event.target);
-    if (!model || !cell) {
-      return;
-    }
-    switch (event.key) {
-      case "Backspace":
-      case "Delete": {
-        model.setCellData(cell, void 0);
-        break;
+    }, [
+      model
+    ]);
+    const handleWheel = (0, import_react.useCallback)((event) => {
+      if (!ignoreAttention && !hasAttention) {
+        event.stopPropagation();
       }
-    }
-  }, [
-    model
-  ]);
-  const handleAxisResize = (0, import_react.useCallback)((event) => {
-    if (event.axis === "col") {
-      const columnIndex = parseInt(event.index, 10);
-      model?.setColumnWidth(columnIndex, event.size);
-    }
-  }, [
-    model
-  ]);
-  const handleWheel = (0, import_react.useCallback)((event) => {
-    if (!ignoreAttention && !hasAttention) {
-      event.stopPropagation();
-    }
-  }, [
-    hasAttention,
-    ignoreAttention
-  ]);
-  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 = model.space;
-      (0, import_invariant.invariant)(space, void 0, {
-        F: __dxlog_file4,
-        L: 312,
-        S: void 0,
-        A: [
-          "space",
-          ""
-        ]
-      });
-      const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
-      if (schema) {
-        const { objects } = await space.db.query(import_echo.Filter.schema(schema)).run();
-        const options = objects.map((obj) => {
-          const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
-          if (!value || typeof value !== "string") {
-            return void 0;
-          }
-          return {
-            label: value,
-            data: obj
-          };
-        }).filter(import_util.isNotFalsy);
-        return [
-          ...options,
-          {
-            label: t("create new object label", {
-              text
-            }),
-            data: createOption(text)
-          }
-        ];
+    }, [
+      hasAttention,
+      ignoreAttention
+    ]);
+    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 = model.space;
+        (0, import_invariant.invariant)(space, void 0, {
+          F: __dxlog_file5,
+          L: 309,
+          S: void 0,
+          A: [
+            "space",
+            ""
+          ]
+        });
+        const schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+        if (schema2) {
+          const { objects } = await space.db.query(import_echo.Filter.type(schema2)).run();
+          const options = objects.map((obj) => {
+            const value = (0, import_echo_schema.getValue)(obj, field.referencePath);
+            if (!value || typeof value !== "string") {
+              return void 0;
+            }
+            return {
+              label: value,
+              data: obj
+            };
+          }).filter(import_util.isNotFalsy);
+          return [
+            ...options,
+            {
+              label: t("create new object label", {
+                text
+              }),
+              data: createOption(text)
+            }
+          ];
+        }
       }
+      return [];
+    }, [
+      model,
+      t
+    ]);
+    if (!model || !modals) {
+      return /* @__PURE__ */ import_react.default.createElement("span", {
+        role: "none",
+        className: "attention-surface"
+      });
     }
-    return [];
-  }, [
-    model,
-    t
-  ]);
-  if (!model || !modals) {
-    return /* @__PURE__ */ import_react.default.createElement("span", {
-      role: "none",
-      className: "attention-surface"
-    });
+    return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
+      id: model.id ?? "table-grid"
+    }, /* @__PURE__ */ import_react.default.createElement(TableValueEditor, {
+      model,
+      modals,
+      schema,
+      onEnter: handleEnter,
+      onFocus: handleFocus,
+      onQuery: handleQuery
+    }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
+      className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--baseSurface)]", import_react_ui_grid.gridSeparatorInlineEnd, import_react_ui_grid.gridSeparatorBlockEnd),
+      frozen,
+      // getCells={getCells}
+      columns: model.columnMeta.value,
+      limitRows: model.getRowCount() ?? 0,
+      limitColumns: model.view?.fields?.length ?? 0,
+      overscroll: "trap",
+      onAxisResize: handleAxisResize,
+      onClick: handleGridClick,
+      onKeyDown: handleKeyDown,
+      onWheelCapture: handleWheel,
+      ref: setDxGrid
+    }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
+      model,
+      modals
+    }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
+      model,
+      modals
+    }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
+      model,
+      modals,
+      onNewColumn: handleNewColumn
+    }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
+      model,
+      modals
+    }));
+  } finally {
+    _effect.f();
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
-    id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
-    model,
-    modals,
-    onEnter: handleEnter,
-    onFocus: handleFocus,
-    onQuery: handleQuery
-  }), /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Content, {
-    className: (0, import_react_ui_theme.mx)("[--dx-grid-base:var(--surface-bg)]", inlineEndLine, blockEndLine),
-    frozen,
-    // getCells={getCells}
-    columns: model.columnMeta.value,
-    limitRows: model.getRowCount() ?? 0,
-    limitColumns: model.view?.fields?.length ?? 0,
-    overscroll: "trap",
-    onAxisResize: handleAxisResize,
-    onClick: handleGridClick,
-    onKeyDown: handleKeyDown,
-    onWheelCapture: handleWheel,
-    ref: setDxGrid
-  }), /* @__PURE__ */ import_react.default.createElement(RowActionsMenu, {
-    model,
-    modals
-  }), /* @__PURE__ */ import_react.default.createElement(ColumnActionsMenu, {
-    model,
-    modals
-  }), /* @__PURE__ */ import_react.default.createElement(ColumnSettings, {
-    model,
-    modals,
-    onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ import_react.default.createElement(CreateRefPanel, {
-    model,
-    modals
-  }), /* @__PURE__ */ import_react.default.createElement(RefPanel, {
-    model,
-    modals
-  }));
 });
 var Table = {
   Root: TableRoot,
   Main: TableMain
 };
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  const [model, setModel] = (0, import_react9.useState)();
-  (0, import_react9.useEffect)(() => {
-    if (!table || !projection) {
-      return;
-    }
-    let model2;
-    const t = setTimeout(async () => {
-      model2 = new TableModel({
-        id: (0, import_echo4.fullyQualifiedId)(table),
-        space: (0, import_echo4.getSpace)(table),
-        view: table.view?.target,
-        projection,
-        features,
-        rowActions,
-        onRowAction,
-        ...props
+  var _effect = (0, import_tracking9.useSignals)();
+  try {
+    const [model, setModel] = (0, import_react9.useState)();
+    (0, import_react9.useEffect)(() => {
+      if (!table || !projection) {
+        return;
+      }
+      let model2;
+      const t = setTimeout(async () => {
+        model2 = new TableModel({
+          id: (0, import_echo4.fullyQualifiedId)(table),
+          space: (0, import_echo4.getSpace)(table),
+          view: table.view?.target,
+          projection,
+          features,
+          rowActions,
+          onRowAction,
+          ...props
+        });
+        await model2.open();
+        setModel(model2);
       });
-      await model2.open();
-      setModel(model2);
-    });
-    return () => {
-      clearTimeout(t);
-      void model2?.close();
-    };
-  }, [
-    table,
-    projection,
-    table?.view?.target,
-    features,
-    rowActions
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (rows) {
-      model?.setRows(rows);
-    }
-  }, [
-    model,
-    rows
-  ]);
-  const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
-    table?.id,
-    table?.view?.target?.query.typename
-  ].filter(import_util2.isNonNullable));
-  (0, import_react9.useEffect)(() => {
-    if (!model) {
-      return;
-    }
-    const unsubscribe = (0, import_signals_core6.effect)(() => {
-      const selectedItems = [
-        ...model.selection.selection.value
-      ];
-      select(selectedItems);
-      onSelectionChanged?.(selectedItems);
-    });
-    return () => {
-      clear();
-      unsubscribe();
-    };
-  }, [
-    model,
-    onSelectionChanged
-  ]);
-  return model;
+      return () => {
+        clearTimeout(t);
+        void model2?.close();
+      };
+    }, [
+      table,
+      projection,
+      table?.view?.target,
+      features,
+      rowActions
+    ]);
+    (0, import_react9.useEffect)(() => {
+      if (rows) {
+        model?.setRows(rows);
+      }
+    }, [
+      model,
+      rows
+    ]);
+    const { multiSelect, clear } = (0, import_react_ui_attention2.useSelectionActions)([
+      table?.id,
+      table?.view?.target?.query.typename
+    ].filter(import_util3.isNonNullable));
+    (0, import_react9.useEffect)(() => {
+      if (!model) {
+        return;
+      }
+      const unsubscribe = (0, import_signals_core6.effect)(() => {
+        const selectedItems = [
+          ...model.selection.selection.value
+        ];
+        multiSelect(selectedItems);
+        onSelectionChanged?.(selectedItems);
+      });
+      return () => {
+        clear();
+        unsubscribe();
+      };
+    }, [
+      model,
+      onSelectionChanged
+    ]);
+    return model;
+  } finally {
+    _effect.f();
+  }
 };
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  const { table, projection } = (0, import_react8.useMemo)(() => {
-    const props2 = getBaseSchems({
-      typename: name,
+  var _effect = (0, import_tracking8.useSignals)();
+  try {
+    const { table, projection } = (0, import_react8.useMemo)(() => {
+      const props2 = getBaseSchema({
+        typename: name,
+        properties,
+        jsonSchema,
+        schema
+      });
+      return makeDynamicTable({
+        ...props2,
+        properties
+      });
+    }, [
+      name,
       properties,
-      jsonSchema,
-      schema
-    });
-    return makeDynamicTable({
-      ...props2,
-      properties
+      schema,
+      jsonSchema
+    ]);
+    const tableRef = (0, import_react8.useRef)(null);
+    const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
+      tableRef.current?.update?.(cell);
+    }, []);
+    const handleRowOrderChange = (0, import_react8.useCallback)(() => {
+      tableRef.current?.update?.();
+    }, []);
+    const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
+      selection: {
+        enabled: false
+      },
+      dataEditable: false
+    }));
+    const model = useTableModel({
+      table,
+      rows,
+      projection,
+      features,
+      rowActions,
+      onCellUpdate: handleCellUpdate,
+      onRowOrderChange: handleRowOrderChange,
+      onRowAction
     });
-  }, [
-    name,
-    properties,
-    schema,
-    jsonSchema
-  ]);
-  const tableRef = (0, import_react8.useRef)(null);
-  const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
-    tableRef.current?.update?.(cell);
-  }, []);
-  const handleRowOrderChange = (0, import_react8.useCallback)(() => {
-    tableRef.current?.update?.();
-  }, []);
-  const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
-    selection: {
-      enabled: false
-    },
-    dataEditable: false
-  }));
-  const model = useTableModel({
-    table,
-    rows,
-    projection,
-    features,
-    rowActions,
-    onCellUpdate: handleCellUpdate,
-    onRowOrderChange: handleRowOrderChange,
-    onRowAction
-  });
-  const presentation = (0, import_react8.useMemo)(() => {
-    if (model) {
-      return new TablePresentation(model);
-    }
-  }, [
-    model
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
-    role: "none",
-    className: (0, import_react_ui_theme3.mx)("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ import_react8.default.createElement("div", {
-    role: "none",
-    className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
-    ref: tableRef,
-    model,
-    presentation,
-    ignoreAttention: true,
-    onRowClick
-  }))));
+    const presentation = (0, import_react8.useMemo)(() => {
+      if (model) {
+        return new TablePresentation(model);
+      }
+    }, [
+      model
+    ]);
+    return /* @__PURE__ */ import_react8.default.createElement("div", {
+      role: "none",
+      className: (0, import_react_ui_theme3.mx)("is-full bs-full grow grid", classNames)
+    }, /* @__PURE__ */ import_react8.default.createElement("div", {
+      role: "none",
+      className: "grid min-bs-0 overflow-hidden"
+    }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
+      ref: tableRef,
+      model,
+      presentation,
+      ignoreAttention: true,
+      onRowClick
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
-var createTableToolbarActions = (state) => {
-  const add = (0, import_react_ui_menu.createMenuAction)("add-row", {
+var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => import_rx_react.Rx.make((get) => {
+  const add = (0, import_react_ui_menu.createMenuAction)("add-row", onAdd, {
     type: "add-row",
     icon: "ph--plus--regular",
     label: [
@@ -2325,7 +2525,7 @@ var createTableToolbarActions = (state) => {
     ],
     testId: "table.toolbar.add-row"
   });
-  const save = (0, import_react_ui_menu.createMenuAction)("save-view", {
+  const save = (0, import_react_ui_menu.createMenuAction)("save-view", onSave, {
     type: "save-view",
     icon: "ph--floppy-disk--regular",
     label: [
@@ -2336,49 +2536,55 @@ var createTableToolbarActions = (state) => {
     ],
     testId: "table.toolbar.save-view",
     iconOnly: false,
-    hidden: !state.viewDirty
+    hidden: get((0, import_react_ui_menu2.rxFromSignal)(() => !state.viewDirty))
   });
   const gap = (0, import_react_ui_menu.createGapSeparator)();
-  const comment = (0, import_react_ui_menu.createMenuAction)("comment", {
-    type: "comment",
-    icon: "ph--chat-text--regular",
-    label: [
-      "create comment",
-      {
-        ns: translationKey
-      }
-    ],
-    testId: "table.toolbar.comment"
-  });
   const nodes = [
     add,
     save,
-    ...gap.nodes,
-    comment
+    ...gap.nodes
   ];
+  const edges = nodes.map(({ id: target }) => ({
+    source: "root",
+    target
+  }));
+  if (customActions) {
+    const custom = get(customActions);
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
   return {
     nodes,
-    edges: nodes.map(({ id: target }) => ({
-      source: "root",
-      target
-    }))
+    edges
   };
-};
-var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = (0, import_react10.useMemo)(() => (0, import_live_object3.create)({
-    viewDirty
-  }), []);
-  const actionsCreator = (0, import_react10.useCallback)(() => createTableToolbarActions(state), [
-    state
-  ]);
-  const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
-    ...menu,
-    attendableId,
-    onAction
-  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
-    classNames
-  }));
+});
+var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
+  var _effect = (0, import_tracking10.useSignals)();
+  try {
+    const state = (0, import_react10.useMemo)(() => (0, import_live_object3.live)({
+      viewDirty
+    }), []);
+    const actionsCreator = (0, import_react10.useMemo)(() => createTableToolbarActions({
+      state,
+      onAdd,
+      onSave,
+      customActions
+    }), [
+      state,
+      onAdd,
+      onSave,
+      customActions
+    ]);
+    const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
+    return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
+      ...menu,
+      attendableId
+    }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
+      classNames
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2395,9 +2601,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
   TableToolbar,
   TableType,
   cellClassesForRowSelection,
-  getBaseSchems,
+  getBaseSchema,
   initializeTable,
   makeDynamicTable,
+  narrowSchema,
   tableButtons,
   tableControls,
   touch,