@dxos/react-ui-table 0.8.4-main.5ea62a8 → 0.8.4-main.60689f5b1c

package/dist/lib/browser/index.mjs

@@ -2,602 +2,607 @@ import {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,
   CheckboxStory,
-  ModalController,
   SwitchStory,
   TableModel,
   TablePresentation,
   cellClassesForRowSelection,
-  getBaseSchema,
-  makeDynamicTable,
-  narrowSchema,
+  compareValues,
+  createDirectChangeCallback,
+  createEchoChangeCallback,
+  extractOrder,
+  getSortValue,
   tableButtons,
   tableControls,
-  touch,
   useAddRow,
+  useProjectionModel,
   useTableModel
-} from "./chunk-RQYXNWWN.mjs";
-import "./chunk-63UUF4IG.mjs";
-
-// src/translations.ts
-var translationKey = "react-ui-table";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "object placeholder": "New table",
-        "create object label": "Create table",
-        "table name placeholder": "Table name",
-        "settings title": "Table settings",
-        "table schema label": "Record type",
-        "new schema": "New record type",
-        "continue label": "Continue",
-        "create stack section label": "Create table",
-        "add row label": "Add row",
-        "create comment": "Create thread",
-        "column action sort descending": "Sort Descending",
-        "column action sort ascending": "Sort Ascending",
-        "column action clear sorting": "Clear Sorting",
-        "column action settings": "Column Settings",
-        "column action delete": "Delete Column",
-        "delete row label": "Delete row",
-        "bulk delete row label": "Delete selected rows",
-        "column deleted label": "Column deleted",
-        "new column button label": "Create column",
-        "create new object label": "Create new object \u201C{{text}}\u201D",
-        "save view label": "Save changes to view"
-      }
-    }
-  }
-];
+} from "./chunk-YDXPC7HA.mjs";
+import {
+  Table_exports
+} from "./chunk-4URYOFDL.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
 // src/components/Table/Table.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { forwardRef, useCallback as useCallback5, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo5, useState as useState4 } from "react";
+import { Atom as Atom4 } from "@effect-atom/atom-react";
+import { createContext } from "@radix-ui/react-context";
+import React9, { forwardRef, useImperativeHandle, useRef as useRef3 } from "react";
+
+// src/components/Table/TableContent.tsx
+import { Atom as Atom2, RegistryContext, useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
+import * as String2 from "effect/String";
+import React7, { useCallback as useCallback4, useContext, useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
+import { log } from "@dxos/log";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
 import { DxEditRequest } from "@dxos/react-ui-grid";
-import { mx } from "@dxos/react-ui-theme";
+import { composable, composableProps, mx } from "@dxos/ui-theme";
+
+// src/util/dynamic-table.ts
+import { Filter, JsonSchema, Obj, Order, Query, Ref, Type } from "@dxos/echo";
+import { ProjectionModel, ViewModel, createEchoChangeCallback as createEchoChangeCallback2, getSchemaFromPropertyDefinitions } from "@dxos/schema";
+var getBaseSchema = ({ schema, typename, properties, jsonSchema }) => {
+  if (typename && properties) {
+    const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
+    return {
+      typename: schema2.typename,
+      jsonSchema: JsonSchema.toJsonSchema(schema2)
+    };
+  } else if (schema) {
+    return {
+      typename: Type.getTypename(schema),
+      jsonSchema: JsonSchema.toJsonSchema(schema)
+    };
+  } else if (typename && jsonSchema) {
+    return {
+      typename,
+      jsonSchema
+    };
+  } else {
+    throw new Error("invalid properties");
+  }
+};
+var makeDynamicTable = ({ registry, jsonSchema, properties }) => {
+  const view = ViewModel.make({
+    query: Query.select(Filter.everything()),
+    jsonSchema,
+    ...properties && {
+      fields: properties.map((property) => property.name)
+    }
+  });
+  const object = Obj.make(Table_exports.Table, {
+    view: Ref.make(view),
+    sizes: {}
+  });
+  const projection = new ProjectionModel({
+    registry,
+    view,
+    baseSchema: jsonSchema,
+    change: createEchoChangeCallback2(view, jsonSchema)
+  });
+  projection.normalizeView();
+  if (properties && projection.getFields()) {
+    setProperties(view, projection, object, properties);
+  }
+  return {
+    projection,
+    object
+  };
+};
+var setProperties = (view, projection, table, properties) => {
+  for (const property of properties) {
+    const field = projection.getFields().find((field2) => field2.path === property.name);
+    if (field) {
+      if (property.size !== void 0) {
+        Obj.update(table, (table2) => {
+          table2.sizes[field.path] = property.size;
+        });
+      }
+      if (property.title !== void 0) {
+        const fieldProjection = projection.getFieldProjection(field.id);
+        projection.setFieldProjection({
+          ...fieldProjection,
+          props: {
+            ...fieldProjection.props,
+            title: property.title
+          }
+        });
+      }
+      if (property.sort) {
+        const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
+        const newQuery = currentQuery.orderBy(Order.property(field.path, property.sort));
+        Obj.update(view, (view2) => {
+          view2.query.ast = newQuery.ast;
+        });
+      }
+    }
+  }
+};
+
+// src/util/signals.ts
+var touch = (value) => value;
+
+// src/util/schema.ts
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
+var narrowSchema = (schema, paths) => {
+  const ast = schema?.ast;
+  if (SchemaAST.isTypeLiteral(ast)) {
+    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
+    if (propertySignatures.length > 0) {
+      const narrowType = new SchemaAST.TypeLiteral(propertySignatures, []);
+      return Schema.make(narrowType);
+    }
+  }
+  return void 0;
+};
+
+// src/model/modal-controller.ts
+import { Atom } from "@effect-atom/atom-react";
+var ModalController = class {
+  _registry;
+  _state;
+  _triggerRef = {
+    current: null
+  };
+  constructor(registry) {
+    this._registry = registry;
+    this._state = Atom.make({
+      type: "closed"
+    });
+  }
+  get state() {
+    return this._state;
+  }
+  get stateValue() {
+    return this._registry.get(this._state);
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
+  setTrigger = (trigger) => {
+    this._triggerRef.current = trigger;
+  };
+  showRowMenu = (rowIndex) => {
+    this._registry.set(this._state, {
+      type: "row",
+      rowIndex
+    });
+  };
+  showColumnMenu = (fieldId) => {
+    this._registry.set(this._state, {
+      type: "column",
+      fieldId
+    });
+  };
+  showColumnCreator = () => {
+    this._registry.set(this._state, {
+      type: "columnSettings",
+      mode: {
+        type: "create"
+      }
+    });
+  };
+  showReferencePanel = (targetId, schemaId) => {
+    this._registry.set(this._state, {
+      type: "refPanel",
+      targetId,
+      typename: schemaId
+    });
+  };
+  openColumnSettings = () => {
+    const currentState = this._registry.get(this._state);
+    if (currentState.type === "column") {
+      const fieldId = currentState.fieldId;
+      requestAnimationFrame(() => {
+        this._registry.set(this._state, {
+          type: "columnSettings",
+          mode: {
+            type: "edit",
+            fieldId
+          }
+        });
+      });
+    }
+  };
+  close = () => {
+    this._registry.set(this._state, {
+      type: "closed"
+    });
+  };
+};
 
 // src/components/TableCellEditor/TableCellEditor.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { EditorView } from "@codemirror/view";
 import React3, { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
-import { FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { Format, TypeEnum } from "@dxos/echo/internal";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { useThemeContext } from "@dxos/react-ui";
-import { createMarkdownExtensions } from "@dxos/react-ui-editor";
 import { GridCellEditor, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
-import { createLinks, tagPicker } from "@dxos/react-ui-tag-picker";
 
 // src/components/TableCellEditor/CellValidationMessage.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { useGridContext } from "@dxos/react-ui-grid";
-var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
-  var _effect = _useSignals();
-  try {
-    const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
-    if (!editing || !validationError) {
-      return null;
-    }
-    const bgClass = variant === "error" ? "bg-errorSurface" : "bg-warningSurface";
-    const textClass = variant === "error" ? "text-errorSurfaceText" : "text-warningSurfaceText";
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: `absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`,
-      style: {
-        ...{
-          "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
-        },
-        zIndex: 10,
-        insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
-        insetInlineStart: box.insetInlineStart,
-        inlineSize: box.inlineSize
-      }
-    }, validationError);
-  } finally {
-    _effect.f();
+var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }) => {
+  const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
+  if (!editing || !validationError) {
+    return null;
   }
+  const bgClass = variant === "error" ? "bg-error-surface" : "bg-warning-surface";
+  const textClass = variant === "error" ? "text-error-foreground" : "text-warning-foreground";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`,
+    style: {
+      ...{
+        "--dx-grid-cell-width": `${box?.inlineSize ?? 200}px`
+      },
+      zIndex: 10,
+      insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
+      insetInlineStart: box.insetInlineStart,
+      inlineSize: box.inlineSize
+    }
+  }, validationError);
 };
 
 // src/components/TableCellEditor/FormCellEditor.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Filter, Obj } from "@dxos/echo";
-import { Ref, getValue } from "@dxos/echo-schema";
+import { Entity } from "@dxos/echo";
+import { Ref as Ref2, getValue } from "@dxos/echo/internal";
 import { invariant } from "@dxos/invariant";
-import { getSnapshot } from "@dxos/live-object";
-import { getSpace } from "@dxos/react-client/echo";
 import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
-import { cellQuery, parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
-import { getDeep, isNotFalsy, setDeep } from "@dxos/util";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { getDeep, isTruthy, setDeep } from "@dxos/util";
+import { translationKey } from "#translations";
 var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
 var createOptionLabel = [
-  "create new object label",
+  "create-new-object.label",
   {
     ns: translationKey
   }
 ];
-var FormCellEditor = ({ fieldProjection, model, schema, onSave, client, modals, __gridScope, ...formProps }) => {
-  var _effect = _useSignals2();
-  try {
-    const { editing: contextEditing, setEditing, id: gridId } = useGridContext2("ArrayEditor", __gridScope);
-    const [editing, setLocalEditing] = useState(false);
-    const anchorRef = useRef(null);
-    const getSchema = useCallback((typeAnnotation) => {
-      const space = getSpace(model.view);
-      invariant(space, void 0, {
-        F: __dxlog_file,
-        L: 53,
-        S: void 0,
-        A: [
-          "space",
-          ""
-        ]
-      });
-      let schema2;
-      if (client) {
-        schema2 = client.graph.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      if (!schema2) {
-        schema2 = space.db.schemaRegistry.getSchema(typeAnnotation.typename);
-      }
-      return {
-        space,
-        schema: schema2
-      };
-    }, [
-      client,
-      model
-    ]);
-    const handleQueryRefOptions = useCallback(async (typeAnnotation) => {
-      const { schema: schema2, space } = getSchema(typeAnnotation);
-      if (model && schema2 && space) {
-        const { objects } = await space.db.query(Filter.type(schema2)).run();
-        return objects.map((obj) => {
-          return {
-            dxn: Obj.getDXN(obj),
-            label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
-          };
-        }).filter(isNotFalsy);
-      }
-      return [];
-    }, [
-      client,
-      model
-    ]);
-    const originalRow = useMemo(() => {
-      if (model && contextEditing) {
-        const cell = parseCellIndex(contextEditing.index);
-        if (model.isDraftCell(cell)) {
-          const draftRow = model.draftRows.value[cell.row];
-          invariant(draftRow, void 0, {
-            F: __dxlog_file,
-            L: 94,
-            S: void 0,
-            A: [
-              "draftRow",
-              ""
-            ]
-          });
-          return draftRow.data;
-        } else {
-          const row = model.getRowAt(cell.row);
-          invariant(row, void 0, {
-            F: __dxlog_file,
-            L: 98,
-            S: void 0,
-            A: [
-              "row",
-              ""
-            ]
-          });
-          return row;
-        }
-      }
+var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onCreate, ...formProps }) => {
+  const anchorRef = useRef(null);
+  const { id: _gridId, editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+  const [editing, setLocalEditing] = useState(false);
+  useEffect(() => {
+    if (contextEditing && contextEditing.cellElement) {
+      anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
+      setLocalEditing(true);
+    } else {
+      anchorRef.current = null;
+      setLocalEditing(false);
+    }
+  }, [
+    contextEditing
+  ]);
+  const narrowedSchema = useMemo(() => {
+    if (!schema) {
       return void 0;
-    }, [
-      model,
-      contextEditing
+    }
+    return narrowSchema(schema, [
+      fieldProjection.field.path
     ]);
-    const handleSave = useCallback((values) => {
-      const path = fieldProjection.field.path;
-      const value = getDeep(values, [
-        path
-      ]);
-      setDeep(originalRow, [
-        path
-      ], value);
-      contextEditing?.cellElement?.focus();
+  }, [
+    JSON.stringify(schema),
+    fieldProjection.field.path
+  ]);
+  const originalRow = useMemo(() => {
+    if (model && contextEditing) {
+      const cell = parseCellIndex(contextEditing.index);
+      if (model.isDraftCell(cell)) {
+        const draftRow = model.getDraftRows()[cell.row];
+        invariant(draftRow, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 52, S: void 0, A: ["draftRow", ""] });
+        return draftRow.data;
+      } else {
+        const row = model.getRowAt(cell.row);
+        invariant(row, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["row", ""] });
+        return row;
+      }
+    }
+    return void 0;
+  }, [
+    model,
+    contextEditing
+  ]);
+  const initialFormValues = useMemo(() => originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}, [
+    originalRow
+  ]);
+  const [formValues, setFormValues] = useState(initialFormValues);
+  const handleValuesChanged = useCallback((values) => {
+    setFormValues(values);
+  }, []);
+  const handleOpenChange = useCallback((nextOpen) => {
+    if (nextOpen === false) {
       setEditing(null);
-      setLocalEditing(false);
       onSave?.();
-    }, [
-      fieldProjection.field.path,
-      onSave,
-      contextEditing,
-      originalRow
+    }
+    setLocalEditing(nextOpen);
+  }, []);
+  const handleSave = useCallback((values) => {
+    if (!originalRow) {
+      return;
+    }
+    const path = fieldProjection.field.path;
+    const value = getDeep(values, [
+      path
     ]);
-    const handleCreate = useCallback((object) => {
-      const ref = Ref.make(object);
-      const path = fieldProjection.field.path;
+    if (model) {
+      model.changeRow(originalRow, (mutableRow) => {
+        setDeep(mutableRow, [
+          path
+        ], value);
+      });
+    } else {
       setDeep(originalRow, [
         path
-      ], ref);
-      contextEditing?.cellElement?.focus();
-      setEditing(null);
-      setLocalEditing(false);
-      onSave?.();
-    }, [
-      fieldProjection.field.path,
-      onSave,
-      contextEditing,
-      originalRow
-    ]);
-    const handleCreateFromQuery = useCallback(async (typeAnnotation, query) => {
-      if (model && modals && contextEditing?.index) {
-        setLocalEditing(false);
-        modals.openCreateRef(typeAnnotation.typename, document.querySelector(cellQuery(contextEditing.index, gridId)), {
-          [fieldProjection.field.referencePath]: query
-        }, handleCreate);
-      }
-    }, [
-      model,
-      modals,
-      client,
-      contextEditing?.index,
-      gridId,
-      fieldProjection,
-      handleSave
-    ]);
-    useEffect(() => {
-      if (contextEditing && contextEditing.cellElement) {
-        anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
-        setLocalEditing(true);
+      ], value);
+    }
+    contextEditing?.cellElement?.focus();
+    setEditing(null);
+    setLocalEditing(false);
+    onSave?.();
+  }, [
+    fieldProjection.field.path,
+    onSave,
+    contextEditing,
+    originalRow,
+    model
+  ]);
+  const handleCreate = useCallback((schema2, values) => {
+    const objectWithId = onCreate?.(schema2, values);
+    if (objectWithId && originalRow) {
+      const ref = Ref2.make(objectWithId);
+      const path = fieldProjection.field.path;
+      if (model) {
+        model.changeRow(originalRow, (mutableRow) => {
+          setDeep(mutableRow, [
+            path
+          ], ref);
+        });
       } else {
-        anchorRef.current = null;
-        setLocalEditing(false);
+        setDeep(originalRow, [
+          path
+        ], ref);
       }
-    }, [
-      contextEditing
-    ]);
-    const narrowedSchema = useMemo(() => {
-      if (!schema) {
-        return void 0;
-      }
-      return narrowSchema(schema, [
-        fieldProjection.field.path
-      ]);
-    }, [
-      JSON.stringify(schema),
-      fieldProjection.field.path
-    ]);
-    const formValues = useMemo(() => originalRow ? getSnapshot(originalRow) : {}, [
-      originalRow
-    ]);
-    const handleOpenChange = useCallback((nextOpen) => {
-      if (nextOpen === false) {
-        setEditing(null);
-        onSave?.();
-      }
-      setLocalEditing(nextOpen);
-    }, []);
-    if (!editing) {
-      return null;
     }
-    return /* @__PURE__ */ React2.createElement(Popover.Root, {
-      open: editing,
-      onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
-      virtualRef: anchorRef
-    }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
-      tabIndex: -1,
-      classNames: "popover-card-width density-fine"
-    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form, {
-      autoFocus: true,
-      values: formValues,
-      schema: narrowedSchema,
-      onSave: handleSave,
-      ...formProps,
-      onQueryRefOptions: handleQueryRefOptions,
-      onCreateFromQuery: handleCreateFromQuery,
-      createOptionIcon: "ph--plus--regular",
-      createOptionLabel
-    })))));
-  } finally {
-    _effect.f();
+    contextEditing?.cellElement?.focus();
+    setEditing(null);
+    setLocalEditing(false);
+    onSave?.();
+  }, [
+    fieldProjection.field.path,
+    onSave,
+    contextEditing,
+    originalRow,
+    onCreate,
+    model
+  ]);
+  const getOptions = useCallback((results) => results.map((obj) => {
+    return {
+      id: Entity.getDXN(obj).toString(),
+      label: getValue(obj, fieldProjection.field.referencePath) || obj.id.toString()
+    };
+  }).filter(isTruthy), [
+    fieldProjection
+  ]);
+  if (!editing) {
+    return null;
   }
+  return /* @__PURE__ */ React2.createElement(Popover.Root, {
+    open: editing,
+    onOpenChange: handleOpenChange
+  }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
+    virtualRef: anchorRef
+  }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
+    tabIndex: -1,
+    classNames: "dx-card-popover-width dx-density-fine"
+  }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Root, {
+    ...formProps,
+    autoFocus: true,
+    schema: narrowedSchema,
+    values: formValues,
+    onValuesChanged: handleValuesChanged,
+    projection: model?.projection,
+    createInitialValuePath: fieldProjection.field.referencePath,
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel,
+    db: model?.db,
+    getOptions,
+    onCreate: handleCreate,
+    onSave: handleSave
+  }, /* @__PURE__ */ React2.createElement(Form.Viewport, null, /* @__PURE__ */ React2.createElement(Form.Content, null, /* @__PURE__ */ React2.createElement(Form.FieldSet, null), /* @__PURE__ */ React2.createElement(Form.Actions, null))))))));
 };
 
 // src/components/TableCellEditor/TableCellEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var adaptValidationMessage = (message) => message ? message.endsWith("is missing") ? "Can\u2019t be blank" : message : null;
-var TableValueEditor = ({ model, modals, schema, onFocus, onSave, client, __gridScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const { editing } = useGridContext3("TableValueEditor", __gridScope);
-    const fieldProjection = useMemo2(() => {
-      if (!model || !editing) {
-        return;
-      }
-      const { col } = parseCellIndex2(editing.index);
-      const field = model.projection.fields[col];
-      const fieldProjection2 = model.projection.getFieldProjection(field.id);
-      invariant2(fieldProjection2, void 0, {
-        F: __dxlog_file2,
-        L: 72,
-        S: void 0,
-        A: [
-          "fieldProjection",
-          ""
-        ]
-      });
-      return fieldProjection2;
-    }, [
-      model,
-      editing
-    ]);
-    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum.SingleSelect || fieldProjection?.props.format === FormatEnum.Ref) {
-      return /* @__PURE__ */ React3.createElement(FormCellEditor, {
-        fieldProjection,
-        model,
-        schema,
-        __gridScope,
-        onSave,
-        client,
-        modals
-      });
+var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
+  const { editing } = useGridContext3("TableValueEditor", __gridScope);
+  const fieldProjection = useMemo2(() => {
+    if (!model || !editing) {
+      return;
     }
-    return /* @__PURE__ */ React3.createElement(TableCellEditor, {
+    const { col } = parseCellIndex2(editing.index);
+    const field = model.projection.getFields()[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 21, S: void 0, A: ["fieldProjection", ""] });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === Format.TypeFormat.SingleSelect || fieldProjection?.props.format === Format.TypeFormat.Ref) {
+    return /* @__PURE__ */ React3.createElement(FormCellEditor, {
+      __gridScope,
+      schema,
       model,
+      fieldProjection,
       modals,
-      onFocus,
       onSave,
-      __gridScope
+      onCreate
     });
-  } finally {
-    _effect.f();
-  }
-};
-var editorSlots = {
-  scroller: {
-    className: "!plb-[--dx-grid-cell-editor-padding-block]"
   }
+  return /* @__PURE__ */ React3.createElement(TableCellEditor, {
+    model,
+    modals,
+    onFocus,
+    onSave,
+    __gridScope
+  });
 };
-var TableCellEditor = ({ model, modals, onFocus, onSave, __gridScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const { id: gridId, editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
-    const suppressNextBlur = useRef2(false);
-    const { themeMode } = useThemeContext();
-    const [validationError, setValidationError] = useState2(null);
-    const [validationVariant, setValidationVariant] = useState2("error");
-    const fieldProjection = useMemo2(() => {
-      if (!model || !editing) {
-        return;
-      }
-      const { col } = parseCellIndex2(editing.index);
-      const field = model.projection.fields[col];
-      const fieldProjection2 = model.projection.getFieldProjection(field.id);
-      invariant2(fieldProjection2, void 0, {
-        F: __dxlog_file2,
-        L: 122,
-        S: void 0,
-        A: [
-          "fieldProjection",
-          ""
-        ]
-      });
-      return fieldProjection2;
-    }, [
-      model,
-      editing
-    ]);
-    const handleEnter = useCallback2(async (value) => {
-      if (!model || !editing) {
-        return;
-      }
-      const cell = parseCellIndex2(editing.index);
-      const validationResult = await model.validateCellData(cell, value);
-      if (validationResult.valid) {
-        setValidationError(null);
-        model.setCellData(cell, value);
-        onFocus?.();
-        setEditing(null);
-        onSave?.();
-      } else {
-        setValidationError(adaptValidationMessage(validationResult.error));
-        setValidationVariant("error");
-      }
-    }, [
-      model,
-      editing,
-      onFocus,
-      setEditing
-    ]);
-    const handleBlur = useCallback2(async (value) => {
-      if (suppressNextBlur.current) {
-        suppressNextBlur.current = false;
-      } else if (model && editing) {
-        const cell = parseCellIndex2(editing.index);
-        if (value !== void 0) {
-          const result = await model.validateCellData(cell, value);
-          if (result.valid) {
-            setValidationError(null);
-            model.setCellData(cell, value);
-            setEditing(null);
-            onSave?.();
-          }
-        }
-      }
-    }, [
-      model,
-      editing
-    ]);
-    const handleClose = useCallback2(async (value, event) => {
-      if (!model || !editing || !fieldProjection) {
-        return;
-      }
+var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
+  const { editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
+  const suppressNextBlur = useRef2(false);
+  const [validationError, setValidationError] = useState2(null);
+  const [validationVariant, setValidationVariant] = useState2("error");
+  const fieldProjection = useMemo2(() => {
+    if (!model || !editing) {
+      return;
+    }
+    const { col } = parseCellIndex2(editing.index);
+    const field = model.projection.getFields()[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 59, S: void 0, A: ["fieldProjection", ""] });
+    return fieldProjection2;
+  }, [
+    model,
+    editing
+  ]);
+  const handleEnter = useCallback2(async (value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = parseCellIndex2(editing.index);
+    const validationResult = await model.validateCellData(cell, value);
+    if (validationResult.valid) {
+      setValidationError(null);
+      model.setCellData(cell, value);
+      onFocus?.();
+      setEditing(null);
+      onSave?.();
+    } else {
+      setValidationError(validationResult.error);
+      setValidationVariant("error");
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    setEditing
+  ]);
+  const handleBlur = useCallback2(async (value) => {
+    if (suppressNextBlur.current) {
+      suppressNextBlur.current = false;
+    } else if (model && editing) {
       const cell = parseCellIndex2(editing.index);
       if (value !== void 0) {
         const result = await model.validateCellData(cell, value);
         if (result.valid) {
-          suppressNextBlur.current = true;
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
           onSave?.();
-          if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
-          }
-        } else {
-          setValidationError(result.error);
-          setValidationVariant("error");
         }
-      } else {
+      }
+    }
+  }, [
+    model,
+    editing
+  ]);
+  const handleClose = useCallback2(async (value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = parseCellIndex2(editing.index);
+    if (value !== void 0) {
+      const result = await model.validateCellData(cell, value);
+      if (result.valid) {
         suppressNextBlur.current = true;
         setValidationError(null);
+        model.setCellData(cell, value);
         setEditing(null);
         onSave?.();
         if (event && onFocus) {
-          onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+          onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
         }
+      } else {
+        setValidationError(result.error);
+        setValidationVariant("error");
       }
-    }, [
-      model,
-      editing,
-      onFocus,
-      fieldProjection,
-      setEditing,
-      onSave
-    ]);
-    const extension = useMemo2(() => {
-      if (!fieldProjection) {
-        return [];
-      }
-      const extension2 = [
-        editorKeys({
-          onClose: handleClose,
-          ...editing?.initialContent && {
-            onNav: handleClose
-          }
-        })
-      ];
-      const format = fieldProjection.props.format;
-      if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-        extension2.push(createMarkdownExtensions({
-          themeMode
-        }));
-        const options = fieldProjection.props.options || [];
-        const mode = format === FormatEnum.SingleSelect ? "single-select" : "multi-select";
-        extension2.push(tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
-              id: option.id,
-              label: option.title,
-              hue: option.color
-            }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === "single-select") {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          }
-        }));
-      }
-      if (model && editing) {
-        extension2.push(EditorView.updateListener.of(debounce((update) => {
-          const content = update.state.doc.toString();
-          const cell = parseCellIndex2(editing.index);
-          void model.validateCellData(cell, content).then((result) => {
-            if (result.valid) {
-              setValidationError(null);
-            } else {
-              setValidationError(result.error);
-              setValidationVariant("error");
-            }
-          });
-        }, 10)));
+    } else {
+      suppressNextBlur.current = true;
+      setValidationError(null);
+      setEditing(null);
+      onSave?.();
+      if (event && onFocus) {
+        onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
       }
-      return extension2;
-    }, [
-      model,
-      modals,
-      editing,
-      fieldProjection,
-      handleClose,
-      themeMode
-    ]);
-    const getCellContent = useCallback2(() => {
-      if (model && editing) {
+    }
+  }, [
+    model,
+    editing,
+    onFocus,
+    fieldProjection,
+    setEditing,
+    onSave
+  ]);
+  const extensions = useMemo2(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extensions2 = [
+      editorKeys({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (model && editing) {
+      extensions2.push(EditorView.updateListener.of(debounce((update) => {
+        const content = update.state.doc.toString();
         const cell = parseCellIndex2(editing.index);
-        const { col } = cell;
-        const field = model.projection.fields[col];
-        const fieldProjection2 = model.projection.getFieldProjection(field.id);
-        if (fieldProjection2?.props.format === FormatEnum.SingleSelect || fieldProjection2?.props.format === FormatEnum.MultiSelect) {
-          const value2 = model.getCellData(cell);
-          if (value2 !== void 0) {
-            const options = fieldProjection2.props.options || [];
-            if (fieldProjection2.props.format === FormatEnum.MultiSelect) {
-              const tagItems = value2.split(",").map((id) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color
-                  };
-                }
-                return void 0;
-              }).filter((item) => item !== void 0);
-              return createLinks(tagItems);
-            } else {
-              const option = options.find((o) => o.id === value2);
-              if (option) {
-                const tagItem = {
-                  id: value2,
-                  label: option.title,
-                  hue: option.color
-                };
-                return createLinks([
-                  tagItem
-                ]);
-              }
-            }
+        void model.validateCellData(cell, content).then((result) => {
+          if (result.valid) {
+            setValidationError(null);
+          } else {
+            setValidationError(result.error);
+            setValidationVariant("error");
           }
-          return "";
-        }
-        const value = model.getCellData(cell);
-        return value !== void 0 ? String(value) : "";
+        });
+      }, 10)));
+    }
+    return extensions2;
+  }, [
+    model,
+    modals,
+    editing,
+    fieldProjection,
+    handleClose
+  ]);
+  const getCellContent = useCallback2(() => {
+    if (model && editing) {
+      const cell = parseCellIndex2(editing.index);
+      const value = model.getCellData(cell);
+      return value !== void 0 ? String(value) : "";
+    }
+  }, [
+    model,
+    editing
+  ]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
+    validationError,
+    variant: validationVariant,
+    __gridScope
+  }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
+    extensions,
+    slots: {
+      content: {
+        className: "!py-(--dx-grid-cell-editor-padding-block)"
       }
-    }, [
-      model,
-      editing
-    ]);
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
-      validationError,
-      variant: validationVariant,
-      __gridScope
-    }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
-      extension,
-      getCellContent,
-      onBlur: handleBlur,
-      slots: editorSlots
-    }));
-  } finally {
-    _effect.f();
-  }
+    },
+    getCellContent,
+    onBlur: handleBlur
+  }));
 };
 var determineNavigationAxis = ({ key }) => {
   switch (key) {
@@ -625,248 +630,142 @@ var determineNavigationDelta = ({ key, shift }) => {
 };
 
 // src/components/Table/ColumnActionsMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import { useAtomValue } from "@effect-atom/atom-react";
 import React4 from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+import { translationKey as translationKey2 } from "#translations";
 var ColumnActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = 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__ */ React4.createElement(DropdownMenu.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      "data-testid": "column-sort-descending",
-      onClick: () => model.sorting?.setSort(state.fieldId, "desc")
-    }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      "data-testid": "column-sort-ascending",
-      onClick: () => model.sorting?.setSort(state.fieldId, "asc")
-    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      "data-testid": "column-clear-sort",
-      onClick: () => model.sorting?.clearSort()
-    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      "data-testid": "column-delete",
-      onClick: () => model.deleteColumn(state.fieldId)
-    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-      "data-testid": "column-settings",
-      onClick: () => modals.openColumnSettings()
-    }, t("column action settings"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
+  const { t } = useTranslation(translationKey2);
+  const state = useAtomValue(modals.state);
+  if (state?.type !== "column") {
+    return null;
   }
+  const currentSort = model.getSorting();
+  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: true,
+    onOpenChange: modals.close
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
+    virtualRef: modals.trigger
+  }), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    "data-testid": "column-sort-descending",
+    onClick: () => model.setSort(state.fieldId, "desc")
+  }, t("column-action-sort-descending.menu")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    "data-testid": "column-sort-ascending",
+    onClick: () => model.setSort(state.fieldId, "asc")
+  }, t("column-action-sort-ascending.menu")), isCurrentColumnSorted && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    "data-testid": "column-clear-sort",
+    onClick: () => model.clearSort()
+  }, t("column-action-clear-sorting.menu")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    "data-testid": "column-delete",
+    onClick: () => model.deleteColumn(state.fieldId)
+  }, t("column-action-delete.menu")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    "data-testid": "column-settings",
+    onClick: () => modals.openColumnSettings()
+  }, t("column-action-settings.menu"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
 };
 
 // src/components/Table/ColumnSettings.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
 import React5, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useState as useState3 } from "react";
 import { Popover as Popover2 } from "@dxos/react-ui";
 import { FieldEditor } from "@dxos/react-ui-form";
 var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
-  var _effect = _useSignals5();
-  try {
-    const [newField, setNewField] = useState3();
-    const state = modals.state.value;
-    useEffect2(() => {
-      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 = useMemo3(() => {
-      if (state?.type === "columnSettings") {
-        const { mode } = state;
-        if (mode.type === "edit") {
-          return model?.projection?.fields.find((f) => f.id === mode.fieldId);
-        }
-      }
-      return void 0;
-    }, [
-      model?.projection?.fields,
-      state
-    ]);
-    const field = existingField ?? newField;
-    const handleSave = useCallback3(() => {
-      modals.close();
-    }, [
-      modals
-    ]);
-    const handleCancel = useCallback3(() => {
-      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
-        model?.projection.deleteFieldProjection(newField.id);
-      }
-    }, [
-      model?.projection,
-      state,
-      newField
-    ]);
-    if (!model?.projection || !field) {
-      return null;
+  const [newField, setNewField] = useState3();
+  const state = useAtomValue2(modals.state);
+  useEffect2(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+      setNewField(model.projection.createFieldProjection());
+      requestAnimationFrame(() => {
+        onNewColumn();
+      });
+    } else {
+      setNewField(void 0);
     }
-    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
-      modal: false,
-      open: state?.type === "columnSettings"
-    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
-      classNames: "md:is-64"
-    }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
-      projection: model.projection,
-      field,
-      registry,
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Table/CreateRefPanel.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import { Schema } from "effect";
-import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
-import { Type } from "@dxos/echo";
-import { live } from "@dxos/live-object";
-import { useClient } from "@dxos/react-client";
-import { getSpace as getSpace2 } from "@dxos/react-client/echo";
-import { Popover as Popover3 } from "@dxos/react-ui";
-import { Form as Form2 } from "@dxos/react-ui-form";
-import { useGridContext as useGridContext4 } from "@dxos/react-ui-grid";
-var CreateRefPanel = ({ model, modals, __gridScope }) => {
-  var _effect = _useSignals6();
-  try {
-    const { id: gridId } = useGridContext4("TableCellEditor", __gridScope);
-    const client = useClient();
-    const space = model && getSpace2(model?.view);
-    const state = modals.state.value;
-    const getSchema = useCallback4(() => {
-      if (!space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const staticSchema = client.graph.schemaRegistry.schemas.find((schema3) => Type.getTypename(schema3) === state.typename);
-      if (staticSchema) {
-        return staticSchema;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      return schema2;
-    }, [
-      space,
-      state
-    ]);
-    const schema = useMemo4(() => {
-      const schema2 = getSchema();
-      if (!schema2) {
-        return;
+  }, [
+    model?.projection,
+    state
+  ]);
+  const existingField = useMemo3(() => {
+    if (state?.type === "columnSettings") {
+      const { mode } = state;
+      if (mode.type === "edit") {
+        return model?.projection?.getFields().find((f) => f.id === mode.fieldId);
       }
-      const omit = Schema.omit("id");
-      return omit(schema2);
-    }, [
-      getSchema
-    ]);
-    const handleSave = useCallback4((values) => {
-      if (!model || !space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const schema2 = getSchema();
-      if (schema2) {
-        const obj = space.db.add(live(schema2, values));
-        state.onCreate?.(obj);
-      }
-      void modals.close();
-    }, [
-      model,
-      modals,
-      space,
-      state
-    ]);
-    const handleCancel = useCallback4(() => {
-      if (model) {
-        modals.close();
-      }
-    }, [
-      modals
-    ]);
-    if (!model?.projection) {
-      return null;
     }
-    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
-      modal: false,
-      open: state?.type === "createRefPanel" && !!schema,
-      onOpenChange: (nextOpen) => {
-        if (model && !nextOpen) {
-          return modals.close();
-        }
-      }
-    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React6.createElement(Popover3.Portal, null, /* @__PURE__ */ React6.createElement(Popover3.Content, {
-      classNames: "md:is-64",
-      "data-grid": gridId
-    }, /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React6.createElement(Form2, {
-      schema,
-      values: state.initialValues ?? {},
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React6.createElement(Popover3.Arrow, null))));
-  } finally {
-    _effect.f();
+    return void 0;
+  }, [
+    model?.projection,
+    state
+  ]);
+  const field = existingField ?? newField;
+  const handleSave = useCallback3(() => {
+    modals.close();
+  }, [
+    modals
+  ]);
+  const handleCancel = useCallback3(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+      model?.projection.deleteFieldProjection(newField.id);
+    }
+  }, [
+    model?.projection,
+    state,
+    newField
+  ]);
+  if (!model?.projection || !field) {
+    return null;
   }
+  return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+    modal: false,
+    open: state?.type === "columnSettings"
+  }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+    virtualRef: modals.trigger
+  }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
+    classNames: "md:w-64"
+  }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
+    projection: model.projection,
+    field,
+    registry,
+    onSave: handleSave,
+    onCancel: handleCancel
+  })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
 };
 
 // src/components/Table/RowActionsMenu.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7 from "react";
+import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
+import React6 from "react";
 import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { translationKey as translationKey3 } from "#translations";
 var RowActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals7();
-  try {
-    const { t } = useTranslation2(translationKey);
-    const hasSelection = model.selection.hasSelection.value;
-    const state = modals.state.value;
-    if (state?.type !== "row") {
-      return null;
-    }
-    return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React7.createElement(DropdownMenu2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
-      "data-testid": "row-menu-delete",
-      onClick: () => model.deleteRow(state.rowIndex)
-    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
-      key: action.id,
-      "data-testid": `row-action-${action.id}`,
-      onClick: () => {
-        modals.close();
-        model.handleRowAction(action.id, state.rowIndex);
-      }
-    }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Arrow, null)));
-  } finally {
-    _effect.f();
+  const { t } = useTranslation2(translationKey3);
+  const hasSelection = model.selection.hasSelection;
+  const state = useAtomValue3(modals.state);
+  if (state?.type !== "row") {
+    return null;
   }
+  return /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
+    modal: false,
+    open: true,
+    onOpenChange: modals.close
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
+    virtualRef: modals.trigger
+  }), /* @__PURE__ */ React6.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Viewport, null, model.rowActions?.length > 0 && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(DropdownMenu2.Group, null, model.rowActions?.map((action) => /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
+    key: action.id,
+    "data-testid": `row-action-${action.id}`,
+    onClick: () => {
+      modals.close();
+      model.handleRowAction(action.id, state.rowIndex);
+    }
+  }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Separator, null)), model.features.dataEditable !== false && /* @__PURE__ */ React6.createElement(DropdownMenu2.Item, {
+    "data-testid": "row-menu-delete",
+    onClick: () => model.deleteRow(state.rowIndex)
+  }, t(hasSelection ? "bulk-delete-row.label" : "delete-row.label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
 };
 
-// src/components/Table/Table.tsx
+// src/components/Table/TableContent.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/TableContent.tsx";
 var columnDefault = {
   grid: {
     minSize: 80,
@@ -879,480 +778,412 @@ var rowDefault = {
     focusUnfurl: false
   }
 };
-var TableRoot = ({ children, role = "article" }) => {
-  var _effect = _useSignals8();
-  try {
-    return /* @__PURE__ */ React8.createElement("div", {
-      role: "none",
-      className: mx("relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]", role === "card--popover" && "popover-card-height", role === "section" && "attention-surface", role === "card--intrinsic" && "[&_.dx-grid]:bs-[--dx-grid-content-block-size]", [
-        "card--popover",
-        "section",
-        "card--extrinsic"
-      ].includes(role) && "overflow-hidden", [
-        "article",
-        "slide"
-      ].includes(role) && "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:bs-0")
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
-  var _effect = _useSignals8();
-  try {
-    const [dxGrid, setDxGrid] = useState4(null);
-    const { hasAttention } = useAttention(model?.id ?? "table");
-    const modals = useMemo5(() => new ModalController(), []);
-    const draftRowCount = model?.getDraftRowCount() ?? 0;
-    const handleSave = useCallback5(() => {
-      dxGrid?.updateCells(true);
-      dxGrid?.requestUpdate();
-    }, [
-      dxGrid
-    ]);
-    const frozen = useMemo5(() => {
-      const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
-      return {
-        frozenRowsStart: 1,
-        frozenRowsEnd: Math.max(1, draftRowCount),
-        frozenColsStart: model?.features.selection.enabled ? 1 : 0,
-        frozenColsEnd: noActionColumn ? 0 : 1
-      };
-    }, [
-      model,
-      draftRowCount
-    ]);
-    const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
-      presentation
-    ]);
-    useEffect3(() => {
-      if (!presentation || !dxGrid) {
-        return;
-      }
-      dxGrid.getCells = getCells;
-    }, [
-      presentation,
-      dxGrid,
-      getCells
-    ]);
-    const handleInsertRowResult = useCallback5((insertResult) => {
-      if (insertResult === "draft") {
-        requestAnimationFrame(() => {
-          dxGrid?.setFocus({
-            plane: "frozenRowsEnd",
-            col: 0,
-            row: 0
-          });
-          dxGrid?.refocus();
+var emptyColumnMeta = Atom2.make({
+  grid: {}
+});
+var emptyRowsAtom = Atom2.make([]);
+var emptyCellUpdateAtom = Atom2.make(0);
+var TABLE_CONTENT_NAME = "Table.Content";
+var TableContent = composable(({ schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+  const registry = useContext(RegistryContext);
+  const [dxGrid, setDxGrid] = useState4(null);
+  const { hasAttention } = useAttention(attendableId ?? model?.id ?? "table");
+  const modals = useMemo4(() => new ModalController(registry), [
+    registry
+  ]);
+  const columnMeta = useAtomValue4(model?.columnMeta ?? emptyColumnMeta);
+  const rows = useAtomValue4(model?.rows ?? emptyRowsAtom);
+  const cellUpdateCounter = useAtomValue4(model?.cellUpdate ?? emptyCellUpdateAtom);
+  const columnCount = Object.keys(columnMeta.grid).length || model?.projection.getFields().length || 0;
+  const draftRowCount = model?.getDraftRowCount() ?? 0;
+  const frozen = useMemo4(() => {
+    const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
+    return {
+      frozenRowsStart: 1,
+      frozenRowsEnd: Math.max(1, draftRowCount),
+      frozenColsStart: model?.features.selection.enabled ? 1 : 0,
+      frozenColsEnd: noActionColumn ? 0 : 1
+    };
+  }, [
+    model,
+    draftRowCount
+  ]);
+  const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
+    presentation
+  ]);
+  useEffect3(() => {
+    if (!dxGrid || !presentation) {
+      return;
+    }
+    dxGrid.getCells = getCells;
+  }, [
+    dxGrid,
+    presentation,
+    getCells
+  ]);
+  useEffect3(() => {
+    if (!dxGrid) {
+      return;
+    }
+    dxGrid.updateCells(true);
+    dxGrid.requestUpdate();
+  }, [
+    dxGrid,
+    rows,
+    cellUpdateCounter
+  ]);
+  const handleInsertRowResult = useCallback4((insertResult) => {
+    if (insertResult === "draft") {
+      requestAnimationFrame(() => {
+        dxGrid?.setFocus({
+          plane: "frozenRowsEnd",
+          col: 0,
+          row: 0
         });
-      } else {
+        dxGrid?.refocus();
+      });
+    } else {
+      requestAnimationFrame(() => {
+        dxGrid?.setFocus({
+          plane: "grid",
+          col: 0,
+          row: model ? model.getRowCount() - 1 : 0
+        });
+        dxGrid?.refocus();
+      });
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleSave = useCallback4(() => {
+    dxGrid?.updateCells(true);
+    dxGrid?.requestUpdate();
+  }, [
+    dxGrid
+  ]);
+  const handleSaveDraftRow = useCallback4((rowIndex = 0) => {
+    if (model && dxGrid) {
+      const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+      if (didCommitSuccessfully) {
         requestAnimationFrame(() => {
-          dxGrid?.setFocus({
-            plane: "grid",
-            col: 0,
-            row: model ? model.getRowCount() - 1 : 0
-          });
-          dxGrid?.refocus();
+          dxGrid.scrollToEndRow();
         });
       }
-    }, [
-      model,
-      dxGrid
-    ]);
-    useImperativeHandle(forwardedRef, () => {
-      if (!presentation || !dxGrid) {
-        return {};
-      }
-      return {
-        update: (cell) => {
-          if (cell) {
-            dxGrid.updateIfWithinBounds(cell, true);
-          } else {
-            dxGrid.updateCells(true);
-            dxGrid.requestUpdate();
-          }
-        },
-        handleInsertRowResult
-      };
-    }, [
-      presentation,
-      dxGrid,
-      model
-    ]);
-    const handleSaveDraftRow = useCallback5((rowIndex = 0) => {
-      if (model && dxGrid) {
-        const didCommitSuccessfully = model.commitDraftRow(rowIndex);
-        if (didCommitSuccessfully) {
-          requestAnimationFrame(() => {
-            dxGrid.scrollToEndRow();
-          });
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const handleGridClick = useCallback4((event) => {
+    const cell = closestCell(event.target);
+    if (cell) {
+      const { row: rowIndex, plane } = cell;
+      if (onRowClick) {
+        if (plane === "grid") {
+          const row = model?.getRowAt(rowIndex);
+          row && onRowClick(row);
+        } else {
+          onRowClick(cell);
         }
       }
-    }, [
-      model,
-      dxGrid
-    ]);
-    const handleGridClick = useCallback5((event) => {
-      const cell = closestCell(event.target);
-      if (cell) {
-        const { row: rowIndex, plane } = cell;
-        if (onRowClick) {
-          if (plane === "grid") {
-            const row = model?.getRowAt(rowIndex);
-            row && onRowClick(row);
-          } else {
-            onRowClick(cell);
-          }
-        }
-        if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
-          model.selection.toggleSelectionForRowIndex(rowIndex);
-        }
+      if (model?.features.selection.enabled && model?.selection.selectionMode === "single") {
+        model.selection.toggleSelectionForRowIndex(rowIndex);
       }
-      if (!modals) {
+    }
+    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;
       }
-      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;
+      modals.setTrigger(tableButtonElement);
+      const data = button.getData(tableButtonElement);
+      switch (data.type) {
+        case "rowMenu": {
+          modals.showRowMenu(data.rowIndex);
+          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 "saveDraftRow": {
-            handleSaveDraftRow();
-            break;
-          }
+        case "columnSettings": {
+          modals.showColumnMenu(data.fieldId);
+          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 "newColumn": {
+          modals.showColumnCreator();
+          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;
-          }
+        case "sort": {
+          model?.toggleSort(data.fieldId);
+          break;
         }
-      }
-    }, [
-      model,
-      modals,
-      dxGrid
-    ]);
-    const handleFocus = useCallback5((increment, delta, cell) => {
-      if (dxGrid && model) {
-        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1) {
-          handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
-        } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
-          handleSaveDraftRow(cell.row);
-          handleInsertRowResult(model.insertRow());
-        } else {
-          dxGrid.refocus(increment, delta);
+        case "saveDraftRow": {
+          handleSaveDraftRow();
+          break;
         }
       }
-    }, [
-      dxGrid,
-      model
-    ]);
-    const handleKeyDown = useCallback5((event) => {
-      if (!model?.features.dataEditable) {
-        return;
-      }
-      const cell = closestCell(event.target);
-      if (!model || !cell) {
+      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;
       }
-      if (event.metaKey || event.ctrlKey) {
-        switch (event.key) {
-          case "c": {
-            try {
-              const cellData = model.getCellData(cell);
-              const textContent = cellData?.toString() ?? "";
-              void navigator.clipboard.writeText(textContent);
-              event.preventDefault();
-            } catch (error) {
-              console.warn("Failed to copy cell content:", error);
-            }
-            break;
+      const data = control.getData(controlElement);
+      switch (data.type) {
+        case "checkbox": {
+          if (data.header) {
+            model?.selection.setSelection(model.selection.allRowsSelected ? "none" : "all");
+          } else {
+            model?.selection.toggleSelectionForRowIndex(data.rowIndex);
           }
-          case "v": {
-            event.preventDefault();
-            void navigator.clipboard.readText().then((clipboardText) => {
-              try {
-                model.setCellData(cell, clipboardText);
-                handleSave();
-              } catch {
-                const cellElement = event.target.closest('[data-dx-grid-action="cell"]');
-                if (cellElement) {
-                  const rect = cellElement.getBoundingClientRect();
-                  const editRequest = new DxEditRequest({
-                    cellIndex: `${cell.plane},${cell.col},${cell.row}`,
-                    cellBox: {
-                      insetInlineStart: rect.left,
-                      insetBlockStart: rect.top,
-                      inlineSize: rect.width,
-                      blockSize: rect.height
-                    },
-                    cellElement,
-                    initialContent: clipboardText
-                  });
-                  cellElement.dispatchEvent(editRequest);
-                }
-              }
-            });
-            break;
+          break;
+        }
+        case "switch": {
+          if (model) {
+            model.updateCellData({
+              row: data.rowIndex,
+              col: data.colIndex
+            }, (value) => !value);
           }
+          break;
         }
       }
+    }
+  }, [
+    model,
+    modals,
+    dxGrid
+  ]);
+  const handleFocus = useCallback4((increment, delta, cell) => {
+    if (dxGrid && model) {
+      if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1 && increment !== "col") {
+        handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : "final");
+      } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
+        handleSaveDraftRow(cell.row);
+        handleInsertRowResult(model.insertRow());
+      } else {
+        dxGrid.refocus(increment, delta);
+      }
+    }
+  }, [
+    dxGrid,
+    model
+  ]);
+  const handleKeyDown = useCallback4((event) => {
+    if (!model?.features.dataEditable) {
+      return;
+    }
+    const cell = closestCell(event.target);
+    if (!model || !cell) {
+      return;
+    }
+    if (event.metaKey || event.ctrlKey) {
       switch (event.key) {
-        case "Backspace":
-        case "Delete": {
+        case "c": {
           try {
-            model.setCellData(cell, void 0);
+            const cellData = model.getCellData(cell);
+            const textContent = cellData?.toString() ?? "";
+            void navigator.clipboard.writeText(textContent);
             event.preventDefault();
-          } catch {
+          } catch (error) {
+            log.catch(error, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 262, S: void 0 });
           }
           break;
         }
+        case "v": {
+          event.preventDefault();
+          void navigator.clipboard.readText().then((clipboardText) => {
+            try {
+              model.setCellData(cell, String2.trim(clipboardText).replace(/[\n\r]+/, " "));
+              handleSave();
+            } catch {
+              const cellElement = event.target.closest('[data-dx-grid-action="cell"]');
+              if (cellElement) {
+                const rect = cellElement.getBoundingClientRect();
+                const editRequest = new DxEditRequest({
+                  cellIndex: `${cell.plane},${cell.col},${cell.row}`,
+                  cellBox: {
+                    insetInlineStart: rect.left,
+                    insetBlockStart: rect.top,
+                    inlineSize: rect.width,
+                    blockSize: rect.height
+                  },
+                  cellElement,
+                  initialContent: clipboardText
+                });
+                cellElement.dispatchEvent(editRequest);
+              }
+            }
+          });
+          break;
+        }
       }
-    }, [
-      model,
-      dxGrid,
-      handleSave
-    ]);
-    const handleAxisResize = useCallback5((event) => {
-      if (event.axis === "col") {
-        const columnIndex = parseInt(event.index, 10);
-        model?.setColumnWidth(columnIndex, event.size);
-      }
-    }, [
-      model
-    ]);
-    const handleWheel = useCallback5((event) => {
-      if (!ignoreAttention && !hasAttention) {
-        event.stopPropagation();
-      }
-    }, [
-      hasAttention,
-      ignoreAttention
-    ]);
-    const handleNewColumn = useCallback5(() => {
-      const columns = model?.getColumnCount();
-      if (dxGrid && columns) {
-        dxGrid.scrollToColumn(columns - 1);
+    }
+    switch (event.key) {
+      case "Backspace":
+      case "Delete": {
+        try {
+          model.setCellData(cell, void 0);
+          event.preventDefault();
+          handleSave();
+        } catch {
+        }
+        break;
       }
-    }, [
-      model,
-      dxGrid
-    ]);
-    if (!model || !modals) {
-      return /* @__PURE__ */ React8.createElement("span", {
-        role: "none",
-        className: "attention-surface"
-      });
     }
-    return /* @__PURE__ */ React8.createElement(Grid.Root, {
-      id: model.id ?? "table-grid"
-    }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
-      model,
-      modals,
-      schema,
-      onFocus: handleFocus,
-      onSave: handleSave,
-      client
-    }), /* @__PURE__ */ React8.createElement(Grid.Content, {
-      className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
-      frozen,
-      columns: model.columnMeta.value,
-      columnDefault,
-      rowDefault,
-      limitRows: model.getRowCount() ?? 0,
-      limitColumns: model.projection.fields.length,
-      overscroll: "trap",
-      onAxisResize: handleAxisResize,
-      onClick: handleGridClick,
-      onKeyDownCapture: handleKeyDown,
-      onWheelCapture: handleWheel,
-      ref: setDxGrid
-    }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
-      model,
-      modals
-    }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
-      model,
-      modals
-    }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
-      model,
-      modals,
-      onNewColumn: handleNewColumn
-    }), /* @__PURE__ */ React8.createElement(CreateRefPanel, {
-      model,
-      modals
-    }));
-  } finally {
-    _effect.f();
+  }, [
+    model,
+    dxGrid,
+    handleSave
+  ]);
+  const handleAxisResize = useCallback4((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
+  ]);
+  const handleWheel = useCallback4((event) => {
+    if (!ignoreAttention && !hasAttention) {
+      event.stopPropagation();
+    }
+  }, [
+    hasAttention,
+    ignoreAttention
+  ]);
+  const handleNewColumn = useCallback4(() => {
+    const columns = model?.getColumnCount();
+    if (dxGrid && columns) {
+      dxGrid.scrollToColumn(columns - 1);
+    }
+  }, [
+    model,
+    dxGrid
+  ]);
+  const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
+  controllerRef.current = useMemo4(() => {
+    if (!dxGrid || !presentation) {
+      return {};
+    }
+    return {
+      update: (cell) => {
+        if (cell) {
+          dxGrid.updateIfWithinBounds(cell, true);
+        } else {
+          dxGrid.updateCells(true);
+          dxGrid.requestUpdate();
+        }
+      },
+      handleInsertRowResult
+    };
+  }, [
+    dxGrid,
+    model,
+    presentation
+  ]);
+  if (!model || !modals) {
+    return /* @__PURE__ */ React7.createElement("span", {
+      role: "none",
+      className: "dx-attention-surface"
+    });
   }
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...composableProps(props, {
+      classNames: "dx-container relative"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React7.createElement(Grid.Root, {
+    id: model.id ?? "table-grid"
+  }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
+    model,
+    modals,
+    schema,
+    onFocus: handleFocus,
+    onSave: handleSave,
+    onCreate
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
+    className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+    frozen,
+    columns: columnMeta,
+    columnDefault,
+    rowDefault,
+    limitRows: rows.length,
+    limitColumns: columnCount,
+    overscroll: "trap",
+    onAxisResize: handleAxisResize,
+    onClick: handleGridClick,
+    onKeyDownCapture: handleKeyDown,
+    onWheelCapture: handleWheel,
+    ...testId && {
+      "data-testid": testId
+    },
+    ref: setDxGrid
+  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
+    model,
+    modals
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+    model,
+    modals,
+    onNewColumn: handleNewColumn
+  })));
 });
-var Table = {
-  Root: TableRoot,
-  Main: TableMain
-};
+TableContent.displayName = TABLE_CONTENT_NAME;
 
-// src/components/Table/DynamicTable.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9, { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { useDefaultValue } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  var _effect = _useSignals9();
-  try {
-    const { typename, jsonSchema } = useMemo6(() => getBaseSchema({
-      typename: name,
-      properties,
-      jsonSchema: _jsonSchema,
-      schema
-    }), [
-      name,
-      properties,
-      _jsonSchema,
-      schema
-    ]);
-    const { projection, view } = useMemo6(() => makeDynamicTable({
-      typename,
-      jsonSchema,
-      properties
-    }), [
-      typename,
-      jsonSchema,
-      properties
-    ]);
-    const tableRef = useRef3(null);
-    const handleCellUpdate = useCallback6((cell) => {
-      tableRef.current?.update?.(cell);
-    }, []);
-    const handleRowOrderChange = useCallback6(() => {
-      tableRef.current?.update?.();
-    }, []);
-    const features = useDefaultValue(props.features, () => ({
-      selection: {
-        enabled: false
-      },
-      dataEditable: false
-    }));
-    const model = useTableModel({
-      rows,
-      view,
-      schema: jsonSchema,
-      projection,
-      features,
-      rowActions,
-      onCellUpdate: handleCellUpdate,
-      onRowOrderChange: handleRowOrderChange,
-      onRowAction
+// src/components/Table/TableToolbar.tsx
+import { Atom as Atom3, RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
+import React8, { useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5 } from "react";
+import { Menu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { translationKey as translationKey4 } from "#translations";
+var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) => Atom3.make((get) => {
+  const nodes = [];
+  if (onAdd) {
+    const add = createMenuAction("add-row", onAdd, {
+      type: "add-row",
+      icon: "ph--plus--regular",
+      label: [
+        "add-row.label",
+        {
+          ns: translationKey4
+        }
+      ],
+      testId: "table.toolbar.add-row"
     });
-    const presentation = useMemo6(() => {
-      if (model) {
-        return new TablePresentation(model);
-      }
-    }, [
-      model
-    ]);
-    return /* @__PURE__ */ React9.createElement("div", {
-      role: "none",
-      className: mx2("is-full bs-full grow grid", classNames)
-    }, /* @__PURE__ */ React9.createElement("div", {
-      role: "none",
-      className: "grid min-bs-0 overflow-hidden"
-    }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
-      ref: tableRef,
-      model,
-      presentation,
-      ignoreAttention: true,
-      onRowClick
-    }))));
-  } finally {
-    _effect.f();
+    nodes.push(add);
+  }
+  if (onSave) {
+    const state = get(stateAtom);
+    const save = createMenuAction("save-view", onSave, {
+      type: "save-view",
+      icon: "ph--floppy-disk--regular",
+      label: [
+        "save-view.label",
+        {
+          ns: translationKey4
+        }
+      ],
+      testId: "table.toolbar.save-view",
+      iconOnly: false,
+      hidden: !state.viewDirty
+    });
+    nodes.push(save);
   }
-};
-
-// src/components/TableToolbar/TableToolbar.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import { Rx } from "@effect-rx/rx-react";
-import React10, { useMemo as useMemo7 } from "react";
-import { live as live2 } from "@dxos/live-object";
-import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
-import { rxFromSignal } from "@dxos/react-ui-menu";
-var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
-  const add = createMenuAction("add-row", onAdd, {
-    type: "add-row",
-    icon: "ph--plus--regular",
-    label: [
-      "add row",
-      {
-        ns: translationKey
-      }
-    ],
-    testId: "table.toolbar.add-row"
-  });
-  const save = createMenuAction("save-view", onSave, {
-    type: "save-view",
-    icon: "ph--floppy-disk--regular",
-    label: [
-      "save view label",
-      {
-        ns: translationKey
-      }
-    ],
-    testId: "table.toolbar.save-view",
-    iconOnly: false,
-    hidden: get(rxFromSignal(() => !state.viewDirty))
-  });
   const gap = createGapSeparator();
-  const nodes = [
-    add,
-    save,
-    ...gap.nodes
-  ];
+  nodes.push(...gap.nodes);
   const edges = nodes.map(({ id: target }) => ({
     source: "root",
-    target
+    target,
+    relation: "child"
   }));
   if (customActions) {
     const custom = get(customActions);
@@ -1364,33 +1195,138 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.
     edges
   };
 });
-var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = _useSignals10();
-  try {
-    const state = useMemo7(() => live2({
+var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+  const registry = useContext2(RegistryContext2);
+  const stateAtom = useMemo5(() => Atom3.make({
+    viewDirty
+  }), []);
+  useEffect4(() => {
+    registry.set(stateAtom, {
       viewDirty
-    }), []);
-    const actionsCreator = useMemo7(() => createTableToolbarActions({
-      state,
-      onAdd,
-      onSave,
-      customActions
-    }), [
-      state,
-      onAdd,
-      onSave,
-      customActions
-    ]);
-    const menu = useMenuActions(actionsCreator);
-    return /* @__PURE__ */ React10.createElement(MenuProvider, {
-      ...menu,
-      attendableId
-    }, /* @__PURE__ */ React10.createElement(ToolbarMenu, {
-      classNames
+    });
+  }, [
+    registry,
+    stateAtom,
+    viewDirty
+  ]);
+  const actionsCreator = useMemo5(() => createTableToolbarActions({
+    stateAtom,
+    onAdd,
+    onSave,
+    customActions
+  }), [
+    stateAtom,
+    onAdd,
+    onSave,
+    customActions
+  ]);
+  const menuActions = useMenuActions(actionsCreator);
+  return /* @__PURE__ */ React8.createElement(Menu.Root, {
+    ...menuActions,
+    attendableId
+  }, /* @__PURE__ */ React8.createElement(Menu.Toolbar, {
+    ...composableProps2(props),
+    ref: forwardedRef
+  }));
+});
+TableToolbar.displayName = "TableToolbar";
+
+// src/components/Table/Table.tsx
+var emptyColumnMeta2 = Atom4.make({
+  grid: {}
+});
+var [TableContextProvider, useTableContext] = createContext("Table");
+var TABLE_ROOT_NAME = "Table.Root";
+var TableRoot = /* @__PURE__ */ forwardRef(({ children }, forwardedRef) => {
+  const controllerRef = useRef3({});
+  useImperativeHandle(forwardedRef, () => ({
+    update: (cell) => controllerRef.current?.update?.(cell),
+    handleInsertRowResult: (result) => controllerRef.current?.handleInsertRowResult?.(result)
+  }), []);
+  return /* @__PURE__ */ React9.createElement(TableContextProvider, {
+    controllerRef
+  }, children);
+});
+TableRoot.displayName = TABLE_ROOT_NAME;
+var Table = {
+  Root: TableRoot,
+  Toolbar: TableToolbar,
+  Content: TableContent
+};
+
+// src/components/Table/DynamicTable.tsx
+import { RegistryContext as RegistryContext3 } from "@effect-atom/atom-react";
+import React10, { useCallback as useCallback5, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef4, useState as useState5 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+var DynamicTable = ({ classNames, schema, name = "com.example.dynamicTable", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
+  const registry = useContext3(RegistryContext3);
+  const [dynamicTable, setDynamicTable] = useState5();
+  const { jsonSchema } = useMemo6(() => getBaseSchema({
+    typename: name,
+    properties,
+    jsonSchema: jsonSchemaProp,
+    schema
+  }), [
+    name,
+    properties,
+    jsonSchemaProp,
+    schema
+  ]);
+  useEffect5(() => {
+    setDynamicTable(makeDynamicTable({
+      registry,
+      jsonSchema,
+      properties
     }));
-  } finally {
-    _effect.f();
-  }
+  }, [
+    registry,
+    jsonSchema,
+    properties
+  ]);
+  const tableRef = useRef4(null);
+  const handleCellUpdate = useCallback5((cell) => {
+    tableRef.current?.update?.(cell);
+  }, []);
+  const handleRowOrderChange = useCallback5(() => {
+    tableRef.current?.update?.();
+  }, []);
+  const features = useDefaultValue(props.features, () => ({
+    selection: {
+      enabled: false
+    },
+    dataEditable: false
+  }));
+  const model = useTableModel({
+    rows,
+    object: dynamicTable?.object,
+    projection: dynamicTable?.projection,
+    features,
+    rowActions,
+    onCellUpdate: handleCellUpdate,
+    onRowOrderChange: handleRowOrderChange,
+    onRowAction
+  });
+  const presentation = useMemo6(() => {
+    if (model) {
+      return new TablePresentation(registry, model);
+    }
+  }, [
+    registry,
+    model
+  ]);
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: mx2("dx-expander grid", classNames)
+  }, /* @__PURE__ */ React10.createElement("div", {
+    className: "grid min-h-0 overflow-hidden"
+  }, /* @__PURE__ */ React10.createElement(Table.Root, {
+    ref: tableRef
+  }, /* @__PURE__ */ React10.createElement(Table.Content, {
+    model,
+    presentation,
+    ignoreAttention: true,
+    onRowClick
+  }))));
 };
 export {
   BUTTON_IDENTIFIERS,
@@ -1402,16 +1338,21 @@ export {
   Table,
   TableModel,
   TablePresentation,
-  TableToolbar,
   cellClassesForRowSelection,
+  compareValues,
+  createDirectChangeCallback,
+  createEchoChangeCallback,
+  extractOrder,
   getBaseSchema,
+  getSortValue,
   makeDynamicTable,
   narrowSchema,
   tableButtons,
   tableControls,
   touch,
-  translations,
   useAddRow,
+  useProjectionModel,
+  useTableContext,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map