@dxos/react-ui-table 0.8.4-main.9735255 → 0.8.4-main.9be5663bfe

package/dist/lib/node-esm/index.mjs

@@ -17,10 +17,10 @@ import {
   useAddRow,
   useProjectionModel,
   useTableModel
-} from "./chunk-DDJKYJFY.mjs";
+} from "./chunk-CCJ4LOVM.mjs";
 import {
   Table_exports
-} from "./chunk-WNZSKIRF.mjs";
+} from "./chunk-SIRDIPHZ.mjs";
 
 // src/translations.ts
 var translationKey = "@dxos/react-ui-table";
@@ -28,56 +28,59 @@ 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"
+        "object.placeholder": "New table",
+        "create-object.label": "Create table",
+        "table-name.placeholder": "Table name",
+        "settings.title": "Table settings",
+        "table-schema.label": "Type",
+        "continue.label": "Continue",
+        "create-stack-section.label": "Create table",
+        "add-row.label": "Add row",
+        "column-action-sort-descending.menu": "Sort Descending",
+        "column-action-sort-ascending.menu": "Sort Ascending",
+        "column-action-clear-sorting.menu": "Clear Sorting",
+        "column-action-settings.menu": "Column Settings",
+        "column-action-delete.menu": "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"
       }
     }
   }
 ];
 
 // src/components/Table/Table.tsx
+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, { forwardRef, useCallback as useCallback4, useContext, useEffect as useEffect3, useImperativeHandle, useMemo as useMemo4, 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 } from "@dxos/ui-theme";
+import { composable, composableProps, mx } from "@dxos/ui-theme";
 
 // src/util/dynamic-table.ts
-import { Filter, Obj, Order, Query, Ref, Type } from "@dxos/echo";
-import { ProjectionModel, View, createDirectChangeCallback as createDirectChangeCallback2, getSchemaFromPropertyDefinitions } from "@dxos/schema";
+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: schema2.jsonSchema
+      jsonSchema: JsonSchema.toJsonSchema(schema2)
     };
   } else if (schema) {
     return {
       typename: Type.getTypename(schema),
-      jsonSchema: Type.toJsonSchema(schema)
+      jsonSchema: JsonSchema.toJsonSchema(schema)
     };
   } else if (typename && jsonSchema) {
     return {
@@ -89,7 +92,7 @@ var getBaseSchema = ({ schema, typename, properties, jsonSchema }) => {
   }
 };
 var makeDynamicTable = ({ registry, jsonSchema, properties }) => {
-  const view = View.make({
+  const view = ViewModel.make({
     query: Query.select(Filter.everything()),
     jsonSchema,
     ...properties && {
@@ -104,7 +107,7 @@ var makeDynamicTable = ({ registry, jsonSchema, properties }) => {
     registry,
     view,
     baseSchema: jsonSchema,
-    change: createDirectChangeCallback2(view.projection, jsonSchema)
+    change: createEchoChangeCallback2(view, jsonSchema)
   });
   projection.normalizeView();
   if (properties && projection.getFields()) {
@@ -120,8 +123,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.change(table, (table2) => {
+          table2.sizes[field.path] = property.size;
         });
       }
       if (property.title !== void 0) {
@@ -137,8 +140,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.change(view, (view2) => {
+          view2.query.ast = newQuery.ast;
         });
       }
     }
@@ -254,14 +257,14 @@ var CellValidationMessage = ({ __gridScope, validationError, variant = "error" }
   if (!editing || !validationError) {
     return null;
   }
-  const bgClass = variant === "error" ? "bg-errorSurface" : "bg-warningSurface";
-  const textClass = variant === "error" ? "text-errorSurfaceText" : "text-warningSurfaceText";
+  const bgClass = variant === "error" ? "bg-error-surface" : "bg-warning-surface";
+  const textClass = variant === "error" ? "text-error-surface-text" : "text-warning-surface-text";
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: `absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`,
+    className: `absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`,
     style: {
       ...{
-        "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
+        "--dx-grid-cell-width": `${box?.inlineSize ?? 200}px`
       },
       zIndex: 10,
       insetBlockEnd: `calc(100% - ${box.insetBlockStart}px)`,
@@ -282,7 +285,7 @@ import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-u
 import { getDeep, isTruthy, setDeep } from "@dxos/util";
 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
   }
@@ -347,9 +350,13 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
     model,
     contextEditing
   ]);
-  const formValues = useMemo(() => originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}, [
+  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);
@@ -434,12 +441,14 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
     virtualRef: anchorRef
   }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
     tabIndex: -1,
-    classNames: "popover-card-width density-fine"
+    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,
@@ -452,11 +461,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: "!plb-[--dx-grid-cell-editor-padding-block]"
-  }
-};
 var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
   const { editing } = useGridContext3("TableValueEditor", __gridScope);
   const fieldProjection = useMemo2(() => {
@@ -468,7 +472,7 @@ var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, o
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     invariant2(fieldProjection2, void 0, {
       F: __dxlog_file2,
-      L: 73,
+      L: 66,
       S: void 0,
       A: [
         "fieldProjection",
@@ -513,7 +517,7 @@ var TableCellEditor = ({ __gridScope, model, modals, onFocus, onSave }) => {
     const fieldProjection2 = model.projection.getFieldProjection(field.id);
     invariant2(fieldProjection2, void 0, {
       F: __dxlog_file2,
-      L: 120,
+      L: 113,
       S: void 0,
       A: [
         "fieldProjection",
@@ -653,9 +657,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 }) => {
@@ -704,19 +712,19 @@ var ColumnActionsMenu = ({ model, modals }) => {
   }), /* @__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__ */ React4.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__ */ React4.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__ */ React4.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__ */ React4.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__ */ React4.createElement(DropdownMenu.Arrow, null))));
+  }, t("column-action-settings.menu"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
 };
 
 // src/components/Table/ColumnSettings.tsx
@@ -776,7 +784,7 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
   }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
     virtualRef: modals.trigger
   }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
-    classNames: "md:is-64"
+    classNames: "md:w-64"
   }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
     projection: model.projection,
     field,
@@ -816,8 +824,8 @@ var RowActionsMenu = ({ model, modals }) => {
   }, 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,
@@ -833,22 +841,10 @@ var rowDefault = {
 var emptyColumnMeta = Atom2.make({
   grid: {}
 });
-var TableRoot = ({ children, role = "article" }) => {
-  return /* @__PURE__ */ React7.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);
-};
 var emptyRowsAtom = Atom2.make([]);
 var emptyCellUpdateAtom = Atom2.make(0);
-var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }, forwardedRef) => {
+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");
@@ -1058,7 +1054,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
           } catch (error) {
             log.catch(error, void 0, {
               F: __dxlog_file3,
-              L: 322,
+              L: 278,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -1136,7 +1132,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 {};
     }
@@ -1159,10 +1156,15 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
   if (!model || !modals) {
     return /* @__PURE__ */ React7.createElement("span", {
       role: "none",
-      className: "attention-surface"
+      className: "dx-attention-surface"
     });
   }
-  return /* @__PURE__ */ React7.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__ */ React7.createElement(TableValueEditor, {
     model,
@@ -1172,7 +1174,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     onSave: handleSave,
     onCreate
   }), /* @__PURE__ */ React7.createElement(Grid.Content, {
-    className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+    className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
     frozen,
     columns: columnMeta,
     columnDefault,
@@ -1198,94 +1200,15 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     model,
     modals,
     onNewColumn: handleNewColumn
-  }));
-};
-var TableMain = /* @__PURE__ */ forwardRef(TableMainInner);
-var Table = {
-  Root: TableRoot,
-  Main: TableMain
-};
-
-// src/components/Table/DynamicTable.tsx
-import { RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
-import React8, { useCallback as useCallback5, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef3, 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: _jsonSchema, rowActions, onRowClick, onRowAction, ...props }) => {
-  const registry = useContext2(RegistryContext2);
-  const [dynamicTable, setDynamicTable] = useState5();
-  const { jsonSchema } = useMemo5(() => getBaseSchema({
-    typename: name,
-    properties,
-    jsonSchema: _jsonSchema,
-    schema
-  }), [
-    name,
-    properties,
-    _jsonSchema,
-    schema
-  ]);
-  useEffect4(() => {
-    setDynamicTable(makeDynamicTable({
-      registry,
-      jsonSchema,
-      properties
-    }));
-  }, [
-    registry,
-    jsonSchema,
-    properties
-  ]);
-  const tableRef = useRef3(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 = useMemo5(() => {
-    if (model) {
-      return new TablePresentation(registry, model);
-    }
-  }, [
-    registry,
-    model
-  ]);
-  return /* @__PURE__ */ React8.createElement("div", {
-    role: "none",
-    className: mx2("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ React8.createElement("div", {
-    role: "none",
-    className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
-    ref: tableRef,
-    model,
-    presentation,
-    ignoreAttention: true,
-    onRowClick
-  }))));
-};
+  })));
+});
+TableContent.displayName = TABLE_CONTENT_NAME;
 
-// src/components/TableToolbar/TableToolbar.tsx
-import { Atom as Atom3, RegistryContext as RegistryContext3 } from "@effect-atom/atom-react";
-import React9, { useContext as useContext3, useEffect as useEffect5, useMemo as useMemo6 } from "react";
-import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
+// 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";
 var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) => Atom3.make((get) => {
   const nodes = [];
   if (onAdd) {
@@ -1293,7 +1216,7 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       type: "add-row",
       icon: "ph--plus--regular",
       label: [
-        "add row label",
+        "add-row.label",
         {
           ns: translationKey
         }
@@ -1308,7 +1231,7 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
       type: "save-view",
       icon: "ph--floppy-disk--regular",
       label: [
-        "save view label",
+        "save-view.label",
         {
           ns: translationKey
         }
@@ -1323,7 +1246,8 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
   nodes.push(...gap.nodes);
   const edges = nodes.map(({ id: target }) => ({
     source: "root",
-    target
+    target,
+    relation: "child"
   }));
   if (customActions) {
     const custom = get(customActions);
@@ -1335,12 +1259,12 @@ var createTableToolbarActions = ({ stateAtom, onAdd, onSave, customActions }) =>
     edges
   };
 });
-var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  const registry = useContext3(RegistryContext3);
-  const stateAtom = useMemo6(() => Atom3.make({
+var TableToolbar = composable2(({ attendableId, viewDirty, onAdd, onSave, customActions, ...props }, forwardedRef) => {
+  const registry = useContext2(RegistryContext2);
+  const stateAtom = useMemo5(() => Atom3.make({
     viewDirty
   }), []);
-  useEffect5(() => {
+  useEffect4(() => {
     registry.set(stateAtom, {
       viewDirty
     });
@@ -1349,7 +1273,7 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
     stateAtom,
     viewDirty
   ]);
-  const actionsCreator = useMemo6(() => createTableToolbarActions({
+  const actionsCreator = useMemo5(() => createTableToolbarActions({
     stateAtom,
     onAdd,
     onSave,
@@ -1360,13 +1284,115 @@ var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, custom
     onSave,
     customActions
   ]);
-  const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React9.createElement(MenuProvider, {
-    ...menu,
+  const menuActions = useMenuActions(actionsCreator);
+  return /* @__PURE__ */ React8.createElement(Menu.Root, {
+    ...menuActions,
     attendableId
-  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
-    classNames
+  }, /* @__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.dynamic-table", 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
+    }));
+  }, [
+    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", {
+    role: "none",
+    className: mx2("dx-expander grid", classNames)
+  }, /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    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,
@@ -1378,7 +1404,6 @@ export {
   Table,
   TableModel,
   TablePresentation,
-  TableToolbar,
   cellClassesForRowSelection,
   compareValues,
   createDirectChangeCallback,
@@ -1394,6 +1419,7 @@ export {
   translations,
   useAddRow,
   useProjectionModel,
+  useTableContext,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map