@dxos/react-ui-table 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

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_VREQOYRW.TableSchema,
   TableToolbar: () => TableToolbar,
-  TableType: () => import_chunk_TGG6OZ54.TableType,
+  TableType: () => import_chunk_VREQOYRW.TableType,
   cellClassesForRowSelection: () => cellClassesForRowSelection,
-  getBaseSchems: () => getBaseSchems,
+  getBaseSchema: () => getBaseSchema,
   initializeTable: () => initializeTable,
   makeDynamicTable: () => makeDynamicTable,
+  narrowSchema: () => narrowSchema,
   tableButtons: () => tableButtons,
   tableControls: () => tableControls,
   touch: () => touch,
@@ -51,7 +52,7 @@ __export(node_exports, {
   useTableModel: () => useTableModel
 });
 module.exports = __toCommonJS(node_exports);
-var import_chunk_TGG6OZ54 = require("./chunk-TGG6OZ54.cjs");
+var import_chunk_VREQOYRW = require("./chunk-VREQOYRW.cjs");
 var import_react = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant = require("@dxos/invariant");
@@ -66,8 +67,8 @@ var import_react_ui2 = require("@dxos/react-ui");
 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_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");
@@ -76,18 +77,22 @@ var import_react5 = __toESM(require("react"));
 var import_react_ui5 = 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_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");
@@ -95,6 +100,7 @@ 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_form5 = require("@dxos/react-ui-form");
 var import_react_ui_grid3 = require("@dxos/react-ui-grid");
@@ -107,17 +113,24 @@ 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_autocomplete = require("@codemirror/autocomplete");
-var import_view = require("@codemirror/view");
 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_react8 = __toESM(require("react"));
+var import_react_ui8 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_signals_core6 = require("@preact/signals-core");
-var import_react8 = require("react");
+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_react9 = __toESM(require("react"));
+var import_util3 = require("@dxos/util");
+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 translationKey = "table";
@@ -256,7 +269,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const omit = import_echo_schema2.S.omit("id");
+      const omit = import_effect.Schema.omit("id");
       return omit(schema2);
     }
   }, [
@@ -335,7 +348,7 @@ var RowActionsMenu = ({ model, modals }) => {
     }
   }, t(action.translationKey)))), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.DropdownMenu.Arrow, null)));
 };
-var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = (0, import_schema.getSchemaFromPropertyDefinitions)(typename, properties);
     return {
@@ -344,8 +357,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 {
@@ -365,7 +378,7 @@ var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
       fields: properties.map((property) => property.name)
     }
   });
-  const table = (0, import_live_object2.live)(import_chunk_TGG6OZ54.TableType, {
+  const table = (0, import_live_object2.live)(import_chunk_VREQOYRW.TableType, {
     name: "dynamic-table",
     view: (0, import_live_object2.makeRef)(view)
   });
@@ -415,7 +428,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
       throw new Error(`Schema not found: ${typename}`);
     }
     const fields = (0, import_schema2.getSchemaProperties)(schema.ast).map((prop) => prop.name);
-    table.view = (0, import_echo3.makeRef)((0, import_schema2.createView)({
+    table.view = import_echo_schema4.Ref.make((0, import_schema2.createView)({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -428,7 +441,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,
@@ -445,13 +458,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({
+    [import_effect2.SchemaAST.TitleAnnotationId]: "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({
+    [import_effect2.SchemaAST.TitleAnnotationId]: "Salary"
   })
 });
 var ContactFields = [
@@ -637,6 +650,17 @@ 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();
@@ -959,17 +983,17 @@ 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_form3.formatForEditing)({
@@ -989,28 +1013,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: {
+        case import_echo_schema2.FormatEnum.Ref: {
           if ((0, import_live_object.isLiveObject)(value)) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
+            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, (0, import_live_object.makeRef)(value));
           }
           break;
         }
-        case import_echo_schema3.FormatEnum.SingleSelect: {
+        case import_echo_schema2.FormatEnum.SingleSelect: {
           const ids = extractTagIds(value);
           if (ids && ids.length > 0) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, ids[0]);
+            (0, import_echo_schema2.setValue)(this._rows.value[rowIdx], field.path, ids[0]);
           }
           break;
         }
-        case import_echo_schema3.FormatEnum.MultiSelect: {
+        case import_echo_schema2.FormatEnum.MultiSelect: {
           const ids = extractTagIds(value);
           if (ids) {
-            (0, import_echo_schema3.setValue)(this._rows.value[rowIdx], field.path, 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_form3.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
@@ -1156,7 +1180,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,
@@ -1177,9 +1201,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
@@ -1365,6 +1389,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:
@@ -1402,6 +1429,33 @@ 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) {
@@ -1440,7 +1494,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>`;
           }
         }
       }
@@ -1485,7 +1539,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-gridHeader"
+        className: "!bg-toolbarSurface"
       };
     }
     return cells;
@@ -1536,7 +1590,7 @@ var TablePresentation = class {
           col: 0,
           row: 0
         })]: {
-          className: "!bg-gridHeader",
+          className: "!bg-toolbarSurface",
           readonly: true,
           value: ""
         }
@@ -1552,7 +1606,7 @@ var TablePresentation = class {
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        className: "!bg-gridHeader",
+        className: "!bg-toolbarSurface",
         readonly: true,
         value: ""
       }
@@ -1567,7 +1621,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: ""
       }
@@ -1596,6 +1650,92 @@ 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 }) => {
+  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-consistent-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
+  })));
+};
 var completion = ({ debug, onQuery, onMatch }) => {
   return [
     import_view.EditorView.theme({
@@ -1631,13 +1771,53 @@ 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 TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gridScope }) => {
+  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
+    });
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(TableCellEditor, {
+    model,
+    modals,
+    onEnter,
+    onFocus,
+    onQuery,
+    __gridScope
+  });
+};
 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_react6.useRef)(false);
@@ -1650,8 +1830,8 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     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,
+      F: __dxlog_file4,
+      L: 114,
       S: void 0,
       A: [
         "fieldProjection",
@@ -1868,14 +2048,14 @@ 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 __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 TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentation, ignoreAttention, schema, 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);
@@ -2067,17 +2247,17 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
     if (model && props.referenceSchema && field.referencePath) {
       const space = model.space;
       (0, import_invariant.invariant)(space, void 0, {
-        F: __dxlog_file4,
-        L: 307,
+        F: __dxlog_file5,
+        L: 309,
         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 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") {
@@ -2112,14 +2292,15 @@ var TableMain = /* @__PURE__ */ (0, import_react.forwardRef)(({ model, presentat
   }
   return /* @__PURE__ */ import_react.default.createElement(import_react_ui_grid.Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ import_react.default.createElement(TableCellEditor, {
+  }, /* @__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(--surface-bg)]", import_react_ui_grid.gridSeparatorInlineEnd, import_react_ui_grid.gridSeparatorBlockEnd),
+    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,
@@ -2151,8 +2332,8 @@ var Table = {
   Main: TableMain
 };
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  const [model, setModel] = (0, import_react8.useState)();
-  (0, import_react8.useEffect)(() => {
+  const [model, setModel] = (0, import_react9.useState)();
+  (0, import_react9.useEffect)(() => {
     if (!table || !projection) {
       return;
     }
@@ -2182,7 +2363,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     features,
     rowActions
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (rows) {
       model?.setRows(rows);
     }
@@ -2193,8 +2374,8 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   const { select, clear } = (0, import_react_ui_attention2.useSelectionActions)([
     table?.id,
     table?.view?.target?.query.typename
-  ].filter(import_util2.isNonNullable));
-  (0, import_react8.useEffect)(() => {
+  ].filter(import_util3.isNonNullable));
+  (0, import_react9.useEffect)(() => {
     if (!model) {
       return;
     }
@@ -2216,8 +2397,8 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
   return model;
 };
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  const { table, projection } = (0, import_react7.useMemo)(() => {
-    const props2 = getBaseSchems({
+  const { table, projection } = (0, import_react8.useMemo)(() => {
+    const props2 = getBaseSchema({
       typename: name,
       properties,
       jsonSchema,
@@ -2233,14 +2414,14 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     schema,
     jsonSchema
   ]);
-  const tableRef = (0, import_react7.useRef)(null);
-  const handleCellUpdate = (0, import_react7.useCallback)((cell) => {
+  const tableRef = (0, import_react8.useRef)(null);
+  const handleCellUpdate = (0, import_react8.useCallback)((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
-  const handleRowOrderChange = (0, import_react7.useCallback)(() => {
+  const handleRowOrderChange = (0, import_react8.useCallback)(() => {
     tableRef.current?.update?.();
   }, []);
-  const features = (0, import_react_ui7.useDefaultValue)(props.features, () => ({
+  const features = (0, import_react_ui8.useDefaultValue)(props.features, () => ({
     selection: {
       enabled: false
     },
@@ -2256,20 +2437,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     onRowOrderChange: handleRowOrderChange,
     onRowAction
   });
-  const presentation = (0, import_react7.useMemo)(() => {
+  const presentation = (0, import_react8.useMemo)(() => {
     if (model) {
       return new TablePresentation(model);
     }
   }, [
     model
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
+  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_react7.default.createElement("div", {
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
     role: "none",
     className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ import_react7.default.createElement(Table.Root, null, /* @__PURE__ */ import_react7.default.createElement(Table.Main, {
+  }, /* @__PURE__ */ import_react8.default.createElement(Table.Root, null, /* @__PURE__ */ import_react8.default.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -2277,8 +2458,8 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     onRowClick
   }))));
 };
-var createTableToolbarActions = (state) => {
-  const add = (0, import_react_ui_menu.createMenuAction)("add-row", {
+var createTableToolbarActions = (state, onAction) => {
+  const add = (0, import_react_ui_menu.createMenuAction)("add-row", () => onAction(add), {
     type: "add-row",
     icon: "ph--plus--regular",
     label: [
@@ -2289,7 +2470,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", () => onAction(save), {
     type: "save-view",
     icon: "ph--floppy-disk--regular",
     label: [
@@ -2303,7 +2484,7 @@ var createTableToolbarActions = (state) => {
     hidden: !state.viewDirty
   });
   const gap = (0, import_react_ui_menu.createGapSeparator)();
-  const comment = (0, import_react_ui_menu.createMenuAction)("comment", {
+  const comment = (0, import_react_ui_menu.createMenuAction)("comment", () => onAction(comment), {
     type: "comment",
     icon: "ph--chat-text--regular",
     label: [
@@ -2329,18 +2510,18 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = (0, import_react9.useMemo)(() => (0, import_live_object3.live)({
+  const state = (0, import_react10.useMemo)(() => (0, import_live_object3.live)({
     viewDirty
   }), []);
-  const actionsCreator = (0, import_react9.useCallback)(() => createTableToolbarActions(state), [
-    state
+  const actionsCreator = (0, import_react10.useCallback)(() => createTableToolbarActions(state, onAction), [
+    state,
+    onAction
   ]);
   const menu = (0, import_react_ui_menu.useMenuActions)(actionsCreator);
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui_menu.MenuProvider, {
+  return /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.MenuProvider, {
     ...menu,
-    attendableId,
-    onAction
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui_menu.ToolbarMenu, {
+    attendableId
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui_menu.ToolbarMenu, {
     classNames
   }));
 };
@@ -2359,9 +2540,10 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
   TableToolbar,
   TableType,
   cellClassesForRowSelection,
-  getBaseSchems,
+  getBaseSchema,
   initializeTable,
   makeDynamicTable,
+  narrowSchema,
   tableButtons,
   tableControls,
   touch,