@dxos/react-ui-table 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

package/dist/lib/browser/index.mjs

@@ -16,52 +16,26 @@ import {
   useAddRow,
   useProjectionModel,
   useTableModel
-} from "./chunk-PTHMYAAM.mjs";
+} from "./chunk-YGC7LZJN.mjs";
 import {
   Table_exports
-} from "./chunk-DSR2MRZB.mjs";
-
-// src/translations.ts
-var translationKey = "@dxos/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": "Type",
-        "new schema": "New 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-FBURZBPH.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
 // src/components/Table/Table.tsx
-import { Atom as Atom3, RegistryContext as RegistryContext2, useAtomValue as useAtomValue4 } from "@effect-atom/atom-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 React8, { forwardRef, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo5, useState as useState4 } from "react";
+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, useComposableProps } from "@dxos/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";
@@ -119,8 +93,8 @@ var setProperties = (view, projection, table, properties) => {
     const field = projection.getFields().find((field2) => field2.path === property.name);
     if (field) {
       if (property.size !== void 0) {
-        Obj.change(table, (t) => {
-          t.sizes[field.path] = property.size;
+        Obj.update(table, (table2) => {
+          table2.sizes[field.path] = property.size;
         });
       }
       if (property.title !== void 0) {
@@ -136,8 +110,8 @@ var setProperties = (view, projection, table, properties) => {
       if (property.sort) {
         const currentQuery = Query.fromAst(Obj.getSnapshot(view).query.ast);
         const newQuery = currentQuery.orderBy(Order.property(field.path, property.sort));
-        Obj.change(view, (v) => {
-          v.query.ast = newQuery.ast;
+        Obj.update(view, (view2) => {
+          view2.query.ast = newQuery.ast;
         });
       }
     }
@@ -279,9 +253,10 @@ import { Popover } from "@dxos/react-ui";
 import { Form } from "@dxos/react-ui-form";
 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
   }
@@ -317,27 +292,11 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
       const cell = parseCellIndex(contextEditing.index);
       if (model.isDraftCell(cell)) {
         const draftRow = model.getDraftRows()[cell.row];
-        invariant(draftRow, void 0, {
-          F: __dxlog_file,
-          L: 74,
-          S: void 0,
-          A: [
-            "draftRow",
-            ""
-          ]
-        });
+        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, {
-          F: __dxlog_file,
-          L: 78,
-          S: void 0,
-          A: [
-            "row",
-            ""
-          ]
-        });
+        invariant(row, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 56, S: void 0, A: ["row", ""] });
         return row;
       }
     }
@@ -457,11 +416,6 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
 
 // src/components/TableCellEditor/TableCellEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
-var editorSlots = {
-  scroll: {
-    className: "!py-(--dx-grid-cell-editor-padding-block)"
-  }
-};
 var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
   const { editing } = useGridContext3("TableValueEditor", __gridScope);
   const fieldProjection = useMemo2(() => {
@@ -471,15 +425,7 @@ var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, o
     const { col } = parseCellIndex2(editing.index);
     const field = model.projection.getFields()[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 73,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
-      ]
-    });
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 21, S: void 0, A: ["fieldProjection", ""] });
     return fieldProjection2;
   }, [
     model,
@@ -516,15 +462,7 @@ var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
     const { col } = parseCellIndex2(editing.index);
     const field = model.projection.getFields()[col];
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
-    invariant2(fieldProjection2, void 0, {
-      F: __dxlog_file2,
-      L: 120,
-      S: void 0,
-      A: [
-        "fieldProjection",
-        ""
-      ]
-    });
+    invariant2(fieldProjection2, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 59, S: void 0, A: ["fieldProjection", ""] });
     return fieldProjection2;
   }, [
     model,
@@ -658,9 +596,13 @@ var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
     __gridScope
   }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
     extensions,
+    slots: {
+      content: {
+        className: "!py-(--dx-grid-cell-editor-padding-block)"
+      }
+    },
     getCellContent,
-    onBlur: handleBlur,
-    slots: editorSlots
+    onBlur: handleBlur
   }));
 };
 var determineNavigationAxis = ({ key }) => {
@@ -688,140 +630,52 @@ var determineNavigationDelta = ({ key, shift }) => {
   return shift ? -1 : 1;
 };
 
-// src/components/TableToolbar/TableToolbar.tsx
-import { Atom as Atom2, RegistryContext } from "@effect-atom/atom-react";
-import React4, { useContext, useEffect as useEffect2, useMemo as useMemo3 } from "react";
-import { Menu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
-var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) => Atom2.make((get) => {
-  const nodes = [];
-  if (onAdd) {
-    const add = createMenuAction("add-row", onAdd, {
-      type: "add-row",
-      icon: "ph--plus--regular",
-      label: [
-        "add row label",
-        {
-          ns: translationKey
-        }
-      ],
-      testId: "table.toolbar.add-row"
-    });
-    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: translationKey
-        }
-      ],
-      testId: "table.toolbar.save-view",
-      iconOnly: false,
-      hidden: !state.viewDirty
-    });
-    nodes.push(save);
-  }
-  const gap = createGapSeparator();
-  nodes.push(...gap.nodes);
-  const edges = nodes.map(({ id: target }) => ({
-    source: "root",
-    target,
-    relation: "child"
-  }));
-  if (customActions) {
-    const custom = get(customActions);
-    nodes.push(...custom.nodes);
-    edges.push(...custom.edges);
-  }
-  return {
-    nodes,
-    edges
-  };
-});
-var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions, ...props }) => {
-  const registry = useContext(RegistryContext);
-  const stateAtom = useMemo3(() => Atom2.make({
-    viewDirty
-  }), []);
-  useEffect2(() => {
-    registry.set(stateAtom, {
-      viewDirty
-    });
-  }, [
-    registry,
-    stateAtom,
-    viewDirty
-  ]);
-  const actionsCreator = useMemo3(() => createTableToolbarActions({
-    stateAtom,
-    onAdd,
-    onSave,
-    customActions
-  }), [
-    stateAtom,
-    onAdd,
-    onSave,
-    customActions
-  ]);
-  const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React4.createElement(Menu.Root, {
-    ...menu,
-    attendableId
-  }, /* @__PURE__ */ React4.createElement(Menu.Toolbar, {
-    ...props,
-    classNames
-  }));
-};
-
 // src/components/Table/ColumnActionsMenu.tsx
 import { useAtomValue } from "@effect-atom/atom-react";
-import React5 from "react";
+import React4 from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+import { translationKey as translationKey2 } from "#translations";
 var ColumnActionsMenu = ({ model, modals }) => {
-  const { t } = useTranslation(translationKey);
+  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__ */ React5.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React5.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React5.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }), /* @__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")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }, 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")), isCurrentColumnSorted && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }, 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")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }, 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")), model.features.schemaEditable && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
+  }, t("column-action-delete.menu")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     "data-testid": "column-settings",
     onClick: () => modals.openColumnSettings()
-  }, t("column action settings"))), /* @__PURE__ */ React5.createElement(DropdownMenu.Arrow, null))));
+  }, t("column-action-settings.menu"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
 };
 
 // src/components/Table/ColumnSettings.tsx
 import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import React6, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, useState as useState3 } from "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 }) => {
   const [newField, setNewField] = useState3();
   const state = useAtomValue2(modals.state);
-  useEffect3(() => {
+  useEffect2(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
       requestAnimationFrame(() => {
@@ -834,7 +688,7 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
     model?.projection,
     state
   ]);
-  const existingField = useMemo4(() => {
+  const existingField = useMemo3(() => {
     if (state?.type === "columnSettings") {
       const { mode } = state;
       if (mode.type === "edit") {
@@ -864,54 +718,55 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
   if (!model?.projection || !field) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Popover2.Root, {
+  return /* @__PURE__ */ React5.createElement(Popover2.Root, {
     modal: false,
     open: state?.type === "columnSettings"
-  }, /* @__PURE__ */ React6.createElement(Popover2.VirtualTrigger, {
+  }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React6.createElement(Popover2.Portal, null, /* @__PURE__ */ React6.createElement(Popover2.Content, {
+  }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
     classNames: "md:w-64"
-  }, /* @__PURE__ */ React6.createElement(Popover2.Viewport, null, /* @__PURE__ */ React6.createElement(FieldEditor, {
+  }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
     projection: model.projection,
     field,
     registry,
     onSave: handleSave,
     onCancel: handleCancel
-  })), /* @__PURE__ */ React6.createElement(Popover2.Arrow, null))));
+  })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
 };
 
 // src/components/Table/RowActionsMenu.tsx
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
-import React7 from "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 }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey3);
   const hasSelection = model.selection.hasSelection;
   const state = useAtomValue3(modals.state);
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
+  return /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React7.createElement(DropdownMenu2.VirtualTrigger, {
+  }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
     virtualRef: modals.trigger
-  }), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, model.rowActions?.length > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Group, null, model.rowActions?.map((action) => /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+  }), /* @__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__ */ React7.createElement(DropdownMenu2.Separator, null)), model.features.dataEditable !== false && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+  }, 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__ */ React7.createElement(DropdownMenu2.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
 };
 
-// src/components/Table/Table.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/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,
@@ -924,19 +779,17 @@ var rowDefault = {
     focusUnfurl: false
   }
 };
-var emptyColumnMeta = Atom3.make({
+var emptyColumnMeta = Atom2.make({
   grid: {}
 });
-var TableRoot = ({ children }) => {
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
-};
-var emptyRowsAtom = Atom3.make([]);
-var emptyCellUpdateAtom = Atom3.make(0);
-var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
-  const registry = useContext2(RegistryContext2);
+var emptyRowsAtom = Atom2.make([]);
+var emptyCellUpdateAtom = Atom2.make(0);
+var TABLE_CONTENT_NAME = "Table.Content";
+var TableContent = composable(({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+  const registry = useContext(RegistryContext);
   const [dxGrid, setDxGrid] = useState4(null);
   const { hasAttention } = useAttention(model?.id ?? "table");
-  const modals = useMemo5(() => new ModalController(registry), [
+  const modals = useMemo4(() => new ModalController(registry), [
     registry
   ]);
   const columnMeta = useAtomValue4(model?.columnMeta ?? emptyColumnMeta);
@@ -944,7 +797,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
   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 = useMemo5(() => {
+  const frozen = useMemo4(() => {
     const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
     return {
       frozenRowsStart: 1,
@@ -959,7 +812,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
   const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
     presentation
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!dxGrid || !presentation) {
       return;
     }
@@ -969,7 +822,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     presentation,
     getCells
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!dxGrid) {
       return;
     }
@@ -1140,12 +993,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
             void navigator.clipboard.writeText(textContent);
             event.preventDefault();
           } catch (error) {
-            log.catch(error, void 0, {
-              F: __dxlog_file3,
-              L: 310,
-              S: void 0,
-              C: (f, a) => f(...a)
-            });
+            log.catch(error, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 262, S: void 0 });
           }
           break;
         }
@@ -1220,7 +1068,8 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     model,
     dxGrid
   ]);
-  useImperativeHandle(forwardedRef, () => {
+  const { controllerRef } = useTableContext(TABLE_CONTENT_NAME);
+  controllerRef.current = useMemo4(() => {
     if (!dxGrid || !presentation) {
       return {};
     }
@@ -1241,26 +1090,26 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     presentation
   ]);
   if (!model || !modals) {
-    return /* @__PURE__ */ React8.createElement("span", {
+    return /* @__PURE__ */ React7.createElement("span", {
       role: "none",
       className: "dx-attention-surface"
     });
   }
-  const { className, ...rest } = useComposableProps(props);
-  return /* @__PURE__ */ React8.createElement("div", {
-    ...rest,
-    role: "none",
-    className: mx("dx-container relative", className)
-  }, /* @__PURE__ */ React8.createElement(Grid.Root, {
+  return /* @__PURE__ */ React7.createElement("div", {
+    ...composableProps(props, {
+      classNames: "dx-container relative"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React7.createElement(Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
+  }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
     model,
     modals,
     schema,
     onFocus: handleFocus,
     onSave: handleSave,
     onCreate
-  }), /* @__PURE__ */ React8.createElement(Grid.Content, {
+  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
     className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
     frozen,
     columns: columnMeta,
@@ -1277,31 +1126,141 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
       "data-testid": testId
     },
     ref: setDxGrid
-  }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
     model,
     modals,
     onNewColumn: handleNewColumn
   })));
-};
-var TableMain = /* @__PURE__ */ forwardRef(TableMainInner);
+});
+TableContent.displayName = TABLE_CONTENT_NAME;
+
+// 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"
+    });
+    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);
+  }
+  const gap = createGapSeparator();
+  nodes.push(...gap.nodes);
+  const edges = nodes.map(({ id: target }) => ({
+    source: "root",
+    target,
+    relation: "child"
+  }));
+  if (customActions) {
+    const custom = get(customActions);
+    nodes.push(...custom.nodes);
+    edges.push(...custom.edges);
+  }
+  return {
+    nodes,
+    edges
+  };
+});
+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
+    });
+  }, [
+    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,
-  Main: TableMain,
-  Toolbar: TableToolbar
+  Toolbar: TableToolbar,
+  Content: TableContent
 };
 
 // src/components/Table/DynamicTable.tsx
 import { RegistryContext as RegistryContext3 } from "@effect-atom/atom-react";
-import React9, { useCallback as useCallback5, useContext as useContext3, useEffect as useEffect5, useMemo as useMemo6, useRef as useRef3, useState as useState5 } from "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 = "example.com/dynamic-table", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
+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({
@@ -1326,7 +1285,7 @@ var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", ro
     jsonSchema,
     properties
   ]);
-  const tableRef = useRef3(null);
+  const tableRef = useRef4(null);
   const handleCellUpdate = useCallback5((cell) => {
     tableRef.current?.update?.(cell);
   }, []);
@@ -1357,14 +1316,15 @@ var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", ro
     registry,
     model
   ]);
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
-    className: mx2("w-full h-full grow grid", classNames)
-  }, /* @__PURE__ */ React9.createElement("div", {
+    className: mx2("dx-expander grid", classNames)
+  }, /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "grid min-h-0 overflow-hidden"
-  }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
-    ref: tableRef,
+  }, /* @__PURE__ */ React10.createElement(Table.Root, {
+    ref: tableRef
+  }, /* @__PURE__ */ React10.createElement(Table.Content, {
     model,
     presentation,
     ignoreAttention: true,
@@ -1381,7 +1341,6 @@ export {
   Table,
   TableModel,
   TablePresentation,
-  TableToolbar,
   cellClassesForRowSelection,
   compareValues,
   createDirectChangeCallback,
@@ -1394,9 +1353,9 @@ export {
   tableButtons,
   tableControls,
   touch,
-  translations,
   useAddRow,
   useProjectionModel,
+  useTableContext,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map