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

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 import {
   TableSchema,
   TableType
-} from "./chunk-YWNRUF4J.mjs";
+} from "./chunk-PFFO5LYM.mjs";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -36,9 +36,9 @@ var translations_default = [
 ];
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import React6, { forwardRef, useCallback as useCallback4, useImperativeHandle, useState as useState2, useMemo as useMemo4, useEffect as useEffect2 } from "react";
+import React7, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState2, useMemo as useMemo5, useEffect as useEffect3 } from "react";
 import { getValue as getValue4 } from "@dxos/echo-schema";
-import { invariant as invariant3 } from "@dxos/invariant";
+import { invariant as invariant4 } from "@dxos/invariant";
 import { Filter } from "@dxos/react-client/echo";
 import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { useAttention } from "@dxos/react-ui-attention";
@@ -150,8 +150,8 @@ var ColumnSettings = ({ model, modals, onNewColumn }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
+import { Schema } from "effect";
 import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { S } from "@dxos/echo-schema";
 import { live } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
@@ -168,7 +168,7 @@ var CreateRefPanel = ({ model, modals, __gridScope }) => {
       typename: state.typename
     }).runSync();
     if (schema2) {
-      const omit = S.omit("id");
+      const omit = Schema.omit("id");
       return omit(schema2);
     }
   }, [
@@ -257,7 +257,7 @@ import { computed as computed3, effect as effect2, signal as signal3 } from "@pr
 import { Resource as Resource2 } from "@dxos/context";
 import { FormatEnum as FormatEnum3, getValue as getValue2, setValue } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
-import { isLiveObject, makeRef as makeRef3 } from "@dxos/live-object";
+import { isLiveObject, makeRef as makeRef2 } from "@dxos/live-object";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 
 // packages/ui/react-ui-table/src/model/selection-model.ts
@@ -265,9 +265,10 @@ import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 
 // packages/ui/react-ui-table/src/util/dynamic-table.ts
+import { getTypename, toJsonSchema } from "@dxos/echo-schema";
 import { live as live2, makeRef } from "@dxos/live-object";
 import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
-var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
+var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
     return {
@@ -276,8 +277,8 @@ var getBaseSchems = ({ typename, properties, jsonSchema, schema }) => {
     };
   } else if (schema) {
     return {
-      typename: schema.typename,
-      jsonSchema: schema.jsonSchema
+      typename: getTypename(schema),
+      jsonSchema: toJsonSchema(schema)
     };
   } else if (typename && jsonSchema) {
     return {
@@ -344,9 +345,10 @@ var setProperties = (view, projection, properties) => {
 var touch = (value) => value;
 
 // packages/ui/react-ui-table/src/util/table.ts
-import { AST, Format, FormatEnum, S as S2, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { Schema as Schema2, SchemaAST } from "effect";
+import { Format, FormatEnum, Ref, TypedObject, TypeEnum } from "@dxos/echo-schema";
 import { PublicKey } from "@dxos/react-client";
-import { live as live3, makeRef as makeRef2 } from "@dxos/react-client/echo";
+import { live as live3 } from "@dxos/react-client/echo";
 import { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
 var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
   if (typename) {
@@ -355,7 +357,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
       throw new Error(`Schema not found: ${typename}`);
     }
     const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
-    table.view = makeRef2(createView2({
+    table.view = Ref.make(createView2({
       // TODO(ZaymonFC): Don't hardcode name?
       name: "View",
       typename: schema.typename,
@@ -368,7 +370,7 @@ var initializeTable = async ({ client, space, table, typename, initialRow = true
       ContactSchema
     ]);
     const fields = ContactFields;
-    table.view = makeRef2(createView2({
+    table.view = Ref.make(createView2({
       name: "View",
       typename: schema.typename,
       jsonSchema: schema.jsonSchema,
@@ -385,13 +387,13 @@ var ContactSchema = TypedObject({
   typename: `example.com/type/${PublicKey.random().truncate()}`,
   version: "0.1.0"
 })({
-  name: S2.optional(S2.String).annotations({
-    [AST.TitleAnnotationId]: "Name"
+  name: Schema2.optional(Schema2.String).annotations({
+    [SchemaAST.TitleAnnotationId]: "Name"
   }),
-  active: S2.optional(S2.Boolean),
-  email: S2.optional(Format.Email),
-  salary: S2.optional(Format.Currency()).annotations({
-    [AST.TitleAnnotationId]: "Salary"
+  active: Schema2.optional(Schema2.Boolean),
+  email: Schema2.optional(Format.Email),
+  salary: Schema2.optional(Format.Currency()).annotations({
+    [SchemaAST.TitleAnnotationId]: "Salary"
   })
 });
 var ContactFields = [
@@ -582,6 +584,21 @@ var tableControls = {
   }
 };
 
+// packages/ui/react-ui-table/src/util/schema.ts
+import { Schema as Schema3 } from "effect";
+import { isTypeLiteral, TypeLiteral } from "effect/SchemaAST";
+var narrowSchema = (schema, paths) => {
+  const ast = schema?.ast;
+  if (isTypeLiteral(ast)) {
+    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
+    if (propertySignatures.length > 0) {
+      const narrowType = new TypeLiteral(propertySignatures, []);
+      return Schema3.make(narrowType);
+    }
+  }
+  return void 0;
+};
+
 // packages/ui/react-ui-table/src/model/selection-model.ts
 var SelectionModel = class extends Resource {
   constructor(_rows, _selectionMode, _onSelectionChanged) {
@@ -950,7 +967,7 @@ var TableModel = class extends Resource2 {
       switch (props.format) {
         case FormatEnum3.Ref: {
           if (isLiveObject(value)) {
-            setValue(this._rows.value[rowIdx], field.path, makeRef3(value));
+            setValue(this._rows.value[rowIdx], field.path, makeRef2(value));
           }
           break;
         }
@@ -1274,7 +1291,8 @@ var ModalController = class {
 
 // packages/ui/react-ui-table/src/model/table-presentation.ts
 import { signal as signal5 } from "@preact/signals-core";
-import { FormatEnum as FormatEnum4, getDXN, getValue as getValue3 } from "@dxos/echo-schema";
+import { isNotNullable } from "effect/Predicate";
+import { FormatEnum as FormatEnum4, getDXN, getValue as getValue3, TypeEnum as TypeEnum3 } from "@dxos/echo-schema";
 import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
@@ -1336,6 +1354,9 @@ var TablePresentation = class {
           if (value == null) {
             return "";
           }
+          if (props.type === "array") {
+            return "";
+          }
           switch (props.format) {
             case FormatEnum4.Boolean:
             case FormatEnum4.SingleSelect:
@@ -1373,6 +1394,33 @@ var TablePresentation = class {
       if (classes.length > 0) {
         cell.className = mx(classes.flat());
       }
+      if (props.type === TypeEnum3.Array) {
+        const targetArray = getValue3(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(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 === FormatEnum4.Ref && props.referenceSchema) {
         const targetObj = getValue3(obj, field.path)?.target;
         if (targetObj) {
@@ -1411,7 +1459,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>`;
           }
         }
       }
@@ -1456,7 +1504,7 @@ var TablePresentation = class {
           fieldId: field.id
         })}
         `,
-        className: "!bg-gridHeader"
+        className: "!bg-toolbarSurface"
       };
     }
     return cells;
@@ -1507,7 +1555,7 @@ var TablePresentation = class {
           col: 0,
           row: 0
         })]: {
-          className: "!bg-gridHeader",
+          className: "!bg-toolbarSurface",
           readonly: true,
           value: ""
         }
@@ -1523,7 +1571,7 @@ var TablePresentation = class {
           header: true,
           checked: this.model.selection.allRowsSeleted.value
         }),
-        className: "!bg-gridHeader",
+        className: "!bg-toolbarSurface",
         readonly: true,
         value: ""
       }
@@ -1538,7 +1586,7 @@ var TablePresentation = class {
         accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
           disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
         }) : void 0,
-        className: "!bg-gridHeader",
+        className: "!bg-toolbarSurface",
         readonly: true,
         value: ""
       }
@@ -1569,14 +1617,109 @@ var cellClassesForRowSelection = (selected, selectionMode) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import React5, { useCallback as useCallback3, useMemo as useMemo3, useRef } from "react";
-import { FormatEnum as FormatEnum5 } from "@dxos/echo-schema";
-import { invariant as invariant2 } from "@dxos/invariant";
+import React6, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { FormatEnum as FormatEnum5, TypeEnum as TypeEnum4 } from "@dxos/echo-schema";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { useThemeContext } from "@dxos/react-ui";
 import { createMarkdownExtensions } from "@dxos/react-ui-editor";
-import { cellQuery, editorKeys, parseCellIndex, useGridContext as useGridContext2, GridCellEditor } from "@dxos/react-ui-grid";
+import { cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3, GridCellEditor } from "@dxos/react-ui-grid";
 import { tagPickerExtension, createLinks } from "@dxos/react-ui-tag-picker";
 
+// packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx
+import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
+import { getSnapshot } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { Popover as Popover2 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { getDeep, setDeep } from "@dxos/util";
+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 } = useGridContext2("ArrayEditor", __gridScope);
+  const cellRef = useRef(null);
+  useEffect2(() => {
+    if (editing && editing.cellElement) {
+      cellRef.current = editing.cellElement;
+    }
+  }, [
+    editing?.cellElement
+  ]);
+  const narrowedSchema = useMemo3(() => {
+    if (!schema) {
+      return void 0;
+    }
+    return narrowSchema(schema, [
+      fieldProjection.field.path
+    ]);
+  }, [
+    JSON.stringify(schema),
+    fieldProjection.field.path
+  ]);
+  const originalRow = useMemo3(() => {
+    if (model && editing) {
+      const cell = parseCellIndex(editing.index);
+      const row = model.getRowAt(cell.row);
+      invariant2(row, void 0, {
+        F: __dxlog_file3,
+        L: 47,
+        S: void 0,
+        A: [
+          "row",
+          ""
+        ]
+      });
+      return row;
+    }
+    return void 0;
+  }, [
+    model,
+    editing
+  ]);
+  const formValues = useMemo3(() => {
+    if (originalRow) {
+      return getSnapshot(originalRow);
+    }
+  }, [
+    originalRow
+  ]);
+  const handleSave = useCallback3((values) => {
+    const path = fieldProjection.field.path;
+    const value = getDeep(values, [
+      path
+    ]);
+    setDeep(originalRow, [
+      path
+    ], value);
+    setEditing(null);
+  }, [
+    fieldProjection.field.path,
+    originalRow
+  ]);
+  const handleOpenChange = useCallback3((nextOpen) => {
+    if (nextOpen === false) {
+      setEditing(null);
+    }
+  }, [
+    setEditing
+  ]);
+  if (!editing) {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+    open: editing !== null,
+    onOpenChange: handleOpenChange
+  }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+    virtualRef: cellRef
+  }), /* @__PURE__ */ React5.createElement(Popover2.Content, {
+    tabIndex: -1,
+    classNames: "popover-consistent-width"
+  }, /* @__PURE__ */ React5.createElement(Popover2.Arrow, null), /* @__PURE__ */ React5.createElement(Form2, {
+    values: formValues,
+    schema: narrowedSchema,
+    onSave: handleSave
+  })));
+};
+
 // packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
 import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
@@ -1617,27 +1760,67 @@ var completion = ({ debug, onQuery, onMatch }) => {
 };
 
 // packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-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 } = useGridContext3("TableValueEditor", __gridScope);
+  const fieldProjection = useMemo4(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = parseCellIndex2(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant3(fieldProjection2, void 0, {
+      F: __dxlog_file4,
+      L: 73,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  if (fieldProjection?.props.type === TypeEnum4.Array) {
+    return /* @__PURE__ */ React6.createElement(FormCellEditor, {
+      fieldProjection,
+      model,
+      schema,
+      __gridScope
+    });
+  }
+  return /* @__PURE__ */ React6.createElement(TableCellEditor, {
+    model,
+    modals,
+    onEnter,
+    onFocus,
+    onQuery,
+    __gridScope
+  });
+};
 var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
-  const { id: gridId, editing, setEditing } = useGridContext2("TableCellEditor", __gridScope);
-  const suppressNextBlur = useRef(false);
+  const { id: gridId, editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
+  const suppressNextBlur = useRef2(false);
   const { themeMode } = useThemeContext();
-  const fieldProjection = useMemo3(() => {
+  const fieldProjection = useMemo4(() => {
     if (!model || !editing) {
       return;
     }
-    const { col } = parseCellIndex(editing.index);
+    const { col } = parseCellIndex2(editing.index);
     const field = model.projection.view.fields[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file3,
-      L: 71,
+    invariant3(fieldProjection2, void 0, {
+      F: __dxlog_file4,
+      L: 114,
       S: void 0,
       A: [
         "fieldProjection",
@@ -1649,11 +1832,11 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  const handleEnter = useCallback3((value) => {
+  const handleEnter = useCallback4((value) => {
     if (!model || !editing) {
       return;
     }
-    const cell = parseCellIndex(editing.index);
+    const cell = parseCellIndex2(editing.index);
     model.setCellData(cell, value);
     onEnter?.(cell);
     onFocus?.();
@@ -1665,7 +1848,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     onFocus,
     setEditing
   ]);
-  const handleBlur = useCallback3((value) => {
+  const handleBlur = useCallback4((value) => {
     if (!model || !editing) {
       return;
     }
@@ -1673,7 +1856,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       suppressNextBlur.current = false;
       return;
     }
-    const cell = parseCellIndex(editing.index);
+    const cell = parseCellIndex2(editing.index);
     if (value !== void 0) {
       model.setCellData(cell, value);
     }
@@ -1681,11 +1864,11 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  const handleClose = useCallback3((value, event) => {
+  const handleClose = useCallback4((value, event) => {
     if (!model || !editing || !fieldProjection) {
       return;
     }
-    const cell = parseCellIndex(editing.index);
+    const cell = parseCellIndex2(editing.index);
     onEnter?.(cell);
     if (event && onFocus) {
       onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
@@ -1697,7 +1880,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     onEnter,
     fieldProjection
   ]);
-  const extension = useMemo3(() => {
+  const extension = useMemo4(() => {
     if (!fieldProjection) {
       return [];
     }
@@ -1778,9 +1961,9 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     handleClose,
     themeMode
   ]);
-  const getCellContent = useCallback3(() => {
+  const getCellContent = useCallback4(() => {
     if (model && editing) {
-      const cell = parseCellIndex(editing.index);
+      const cell = parseCellIndex2(editing.index);
       const { col } = cell;
       const field = model.projection.view.fields[col];
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
@@ -1824,7 +2007,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
     model,
     editing
   ]);
-  return /* @__PURE__ */ React5.createElement(GridCellEditor, {
+  return /* @__PURE__ */ React6.createElement(GridCellEditor, {
     extension,
     getCellContent,
     onBlur: handleBlur
@@ -1856,19 +2039,19 @@ var determineNavigationDelta = ({ key, shift }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-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__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: mx2("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__ */ forwardRef(({ model, presentation, ignoreAttention, onRowClick }, forwardedRef) => {
+var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, onRowClick }, forwardedRef) => {
   const [dxGrid, setDxGrid] = useState2(null);
   const { hasAttention } = useAttention(model?.id ?? "table");
   const { t } = useTranslation3(translationKey);
-  const modals = useMemo4(() => new ModalController(), []);
-  const frozen = useMemo4(() => {
+  const modals = useMemo5(() => new ModalController(), []);
+  const frozen = useMemo5(() => {
     const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
     return {
       frozenRowsStart: 1,
@@ -1878,10 +2061,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   }, [
     model
   ]);
-  const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
+  const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
     presentation
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!presentation || !dxGrid) {
       return;
     }
@@ -1909,7 +2092,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     presentation,
     dxGrid
   ]);
-  const handleGridClick = useCallback4((event) => {
+  const handleGridClick = useCallback5((event) => {
     const rowIndex = safeParseInt(event.target.ariaRowIndex ?? "");
     if (rowIndex != null) {
       if (onRowClick) {
@@ -1984,14 +2167,14 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     model,
     modals
   ]);
-  const handleFocus = useCallback4((increment, delta) => {
+  const handleFocus = useCallback5((increment, delta) => {
     if (dxGrid) {
       dxGrid.refocus(increment, delta);
     }
   }, [
     dxGrid
   ]);
-  const handleEnter = useCallback4((cell) => {
+  const handleEnter = useCallback5((cell) => {
     if (!model?.features.dataEditable) {
       return;
     }
@@ -2008,7 +2191,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     model,
     dxGrid
   ]);
-  const handleKeyDown = useCallback4((event) => {
+  const handleKeyDown = useCallback5((event) => {
     if (!model?.features.dataEditable) {
       return;
     }
@@ -2026,7 +2209,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   }, [
     model
   ]);
-  const handleAxisResize = useCallback4((event) => {
+  const handleAxisResize = useCallback5((event) => {
     if (event.axis === "col") {
       const columnIndex = parseInt(event.index, 10);
       model?.setColumnWidth(columnIndex, event.size);
@@ -2034,7 +2217,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
   }, [
     model
   ]);
-  const handleWheel = useCallback4((event) => {
+  const handleWheel = useCallback5((event) => {
     if (!ignoreAttention && !hasAttention) {
       event.stopPropagation();
     }
@@ -2042,7 +2225,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     hasAttention,
     ignoreAttention
   ]);
-  const handleNewColumn = useCallback4(() => {
+  const handleNewColumn = useCallback5(() => {
     const columns = model?.getColumnCount();
     if (dxGrid && columns) {
       dxGrid.scrollToColumn(columns - 1);
@@ -2051,21 +2234,21 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     model,
     dxGrid
   ]);
-  const handleQuery = useCallback4(async ({ field, props }, text) => {
+  const handleQuery = useCallback5(async ({ field, props }, text) => {
     if (model && props.referenceSchema && field.referencePath) {
       const space = model.space;
-      invariant3(space, void 0, {
-        F: __dxlog_file4,
-        L: 307,
+      invariant4(space, void 0, {
+        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(Filter.schema(schema)).run();
+      const schema2 = space.db.schemaRegistry.getSchema(props.referenceSchema);
+      if (schema2) {
+        const { objects } = await space.db.query(Filter.type(schema2)).run();
         const options = objects.map((obj) => {
           const value = getValue4(obj, field.referencePath);
           if (!value || typeof value !== "string") {
@@ -2093,21 +2276,22 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     t
   ]);
   if (!model || !modals) {
-    return /* @__PURE__ */ React6.createElement("span", {
+    return /* @__PURE__ */ React7.createElement("span", {
       role: "none",
       className: "attention-surface"
     });
   }
-  return /* @__PURE__ */ React6.createElement(Grid.Root, {
+  return /* @__PURE__ */ React7.createElement(Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React6.createElement(TableCellEditor, {
+  }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
     model,
     modals,
+    schema,
     onEnter: handleEnter,
     onFocus: handleFocus,
     onQuery: handleQuery
-  }), /* @__PURE__ */ React6.createElement(Grid.Content, {
-    className: mx2("[--dx-grid-base:var(--surface-bg)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+    className: mx2("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
     frozen,
     // getCells={getCells}
     columns: model.columnMeta.value,
@@ -2119,17 +2303,17 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     onKeyDown: handleKeyDown,
     onWheelCapture: handleWheel,
     ref: setDxGrid
-  }), /* @__PURE__ */ React6.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React6.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React6.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
     model,
     modals,
     onNewColumn: handleNewColumn
-  }), /* @__PURE__ */ React6.createElement(CreateRefPanel, {
+  }), /* @__PURE__ */ React7.createElement(CreateRefPanel, {
     model,
     modals
   }));
@@ -2140,19 +2324,19 @@ var Table = {
 };
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-import React7, { useRef as useRef2, useMemo as useMemo5, useCallback as useCallback5 } from "react";
+import React8, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/hooks/useTableModel.ts
 import { effect as effect3 } from "@preact/signals-core";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 import { fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
 import { useSelectionActions } from "@dxos/react-ui-attention";
 import { isNonNullable } from "@dxos/util";
 var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
   const [model, setModel] = useState3();
-  useEffect3(() => {
+  useEffect4(() => {
     if (!table || !projection) {
       return;
     }
@@ -2182,7 +2366,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     features,
     rowActions
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (rows) {
       model?.setRows(rows);
     }
@@ -2194,7 +2378,7 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
     table?.id,
     table?.view?.target?.query.typename
   ].filter(isNonNullable));
-  useEffect3(() => {
+  useEffect4(() => {
     if (!model) {
       return;
     }
@@ -2218,8 +2402,8 @@ var useTableModel = ({ table, projection, rows, rowActions, features, onSelectio
 
 // packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
 var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  const { table, projection } = useMemo5(() => {
-    const props2 = getBaseSchems({
+  const { table, projection } = useMemo6(() => {
+    const props2 = getBaseSchema({
       typename: name,
       properties,
       jsonSchema,
@@ -2235,11 +2419,11 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     schema,
     jsonSchema
   ]);
-  const tableRef = useRef2(null);
-  const handleCellUpdate = useCallback5((cell) => {
+  const tableRef = useRef3(null);
+  const handleCellUpdate = useCallback6((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
-  const handleRowOrderChange = useCallback5(() => {
+  const handleRowOrderChange = useCallback6(() => {
     tableRef.current?.update?.();
   }, []);
   const features = useDefaultValue(props.features, () => ({
@@ -2258,20 +2442,20 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     onRowOrderChange: handleRowOrderChange,
     onRowAction
   });
-  const presentation = useMemo5(() => {
+  const presentation = useMemo6(() => {
     if (model) {
       return new TablePresentation(model);
     }
   }, [
     model
   ]);
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: mx3("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ React7.createElement(Table.Root, null, /* @__PURE__ */ React7.createElement(Table.Main, {
+  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -2281,11 +2465,11 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
 };
 
 // packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import React8, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import React9, { useCallback as useCallback7, useMemo as useMemo7 } from "react";
 import { live as live4 } from "@dxos/live-object";
 import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
-var createTableToolbarActions = (state) => {
-  const add = createMenuAction("add-row", {
+var createTableToolbarActions = (state, onAction) => {
+  const add = createMenuAction("add-row", () => onAction(add), {
     type: "add-row",
     icon: "ph--plus--regular",
     label: [
@@ -2296,7 +2480,7 @@ var createTableToolbarActions = (state) => {
     ],
     testId: "table.toolbar.add-row"
   });
-  const save = createMenuAction("save-view", {
+  const save = createMenuAction("save-view", () => onAction(save), {
     type: "save-view",
     icon: "ph--floppy-disk--regular",
     label: [
@@ -2310,7 +2494,7 @@ var createTableToolbarActions = (state) => {
     hidden: !state.viewDirty
   });
   const gap = createGapSeparator();
-  const comment = createMenuAction("comment", {
+  const comment = createMenuAction("comment", () => onAction(comment), {
     type: "comment",
     icon: "ph--chat-text--regular",
     label: [
@@ -2336,18 +2520,18 @@ var createTableToolbarActions = (state) => {
   };
 };
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAction }) => {
-  const state = useMemo6(() => live4({
+  const state = useMemo7(() => live4({
     viewDirty
   }), []);
-  const actionsCreator = useCallback6(() => createTableToolbarActions(state), [
-    state
+  const actionsCreator = useCallback7(() => createTableToolbarActions(state, onAction), [
+    state,
+    onAction
   ]);
   const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React8.createElement(MenuProvider, {
+  return /* @__PURE__ */ React9.createElement(MenuProvider, {
     ...menu,
-    attendableId,
-    onAction
-  }, /* @__PURE__ */ React8.createElement(ToolbarMenu, {
+    attendableId
+  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
     classNames
   }));
 };
@@ -2365,9 +2549,10 @@ export {
   TableToolbar,
   TableType,
   cellClassesForRowSelection,
-  getBaseSchems,
+  getBaseSchema,
   initializeTable,
   makeDynamicTable,
+  narrowSchema,
   tableButtons,
   tableControls,
   touch,