@dxos/react-ui-table 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

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

@@ -17,10 +17,10 @@ import {
   useAddRow,
   useProjectionModel,
   useTableModel
-} from "./chunk-DPNSZHU5.mjs";
+} from "./chunk-GI72MQSG.mjs";
 import {
   Table_exports
-} from "./chunk-WNZSKIRF.mjs";
+} from "./chunk-HTZJSULI.mjs";
 
 // src/translations.ts
 var translationKey = "@dxos/react-ui-table";
@@ -55,29 +55,29 @@ var translations = [
 ];
 
 // src/components/Table/Table.tsx
-import { Atom as Atom2, RegistryContext, useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
+import { Atom as Atom3, RegistryContext as RegistryContext2, 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 React8, { forwardRef, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo5, 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 { mx, useComposableProps } from "@dxos/ui-theme";
 
 // src/util/dynamic-table.ts
-import { Filter, Obj, Order, Query, Ref, Type } from "@dxos/echo";
-import { ProjectionModel, View, createEchoChangeCallback as createEchoChangeCallback2, 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: Type.toJsonSchema(schema2)
+      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 +89,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 && {
@@ -254,14 +254,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)`,
@@ -347,9 +347,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 +438,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,
@@ -454,7 +460,7 @@ var FormCellEditor = ({ __gridScope, schema, model, fieldProjection, onSave, onC
 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]"
+    className: "!py-(--dx-grid-cell-editor-padding-block)"
   }
 };
 var TableValueEditor = ({ __gridScope, schema, model, modals, onFocus, onSave, onCreate }) => {
@@ -683,9 +689,98 @@ 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 React4 from "react";
+import React5 from "react";
 import { DropdownMenu, useTranslation } from "@dxos/react-ui";
 var ColumnActionsMenu = ({ model, modals }) => {
   const { t } = useTranslation(translationKey);
@@ -695,39 +790,39 @@ var ColumnActionsMenu = ({ model, modals }) => {
   }
   const currentSort = model.getSorting();
   const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-  return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
+  }, /* @__PURE__ */ React5.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, {
+  }), /* @__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, {
     "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")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React5.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")), isCurrentColumnSorted && /* @__PURE__ */ React5.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")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React5.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")), model.features.schemaEditable && /* @__PURE__ */ React5.createElement(DropdownMenu.Item, {
     "data-testid": "column-settings",
     onClick: () => modals.openColumnSettings()
-  }, t("column action settings"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
+  }, t("column action settings"))), /* @__PURE__ */ React5.createElement(DropdownMenu.Arrow, null))));
 };
 
 // src/components/Table/ColumnSettings.tsx
 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 React6, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo4, 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);
-  useEffect2(() => {
+  useEffect3(() => {
     if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
       setNewField(model.projection.createFieldProjection());
       requestAnimationFrame(() => {
@@ -740,7 +835,7 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
     model?.projection,
     state
   ]);
-  const existingField = useMemo3(() => {
+  const existingField = useMemo4(() => {
     if (state?.type === "columnSettings") {
       const { mode } = state;
       if (mode.type === "edit") {
@@ -770,25 +865,25 @@ var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
   if (!model?.projection || !field) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+  return /* @__PURE__ */ React6.createElement(Popover2.Root, {
     modal: false,
     open: state?.type === "columnSettings"
-  }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+  }, /* @__PURE__ */ React6.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, {
+  }), /* @__PURE__ */ React6.createElement(Popover2.Portal, null, /* @__PURE__ */ React6.createElement(Popover2.Content, {
+    classNames: "md:w-64"
+  }, /* @__PURE__ */ React6.createElement(Popover2.Viewport, null, /* @__PURE__ */ React6.createElement(FieldEditor, {
     projection: model.projection,
     field,
     registry,
     onSave: handleSave,
     onCancel: handleCancel
-  })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
+  })), /* @__PURE__ */ React6.createElement(Popover2.Arrow, null))));
 };
 
 // src/components/Table/RowActionsMenu.tsx
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
-import React6 from "react";
+import React7 from "react";
 import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var RowActionsMenu = ({ model, modals }) => {
   const { t } = useTranslation2(translationKey);
@@ -797,23 +892,23 @@ var RowActionsMenu = ({ model, modals }) => {
   if (state?.type !== "row") {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(DropdownMenu2.Root, {
+  return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
     modal: false,
     open: true,
     onOpenChange: modals.close
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu2.VirtualTrigger, {
+  }, /* @__PURE__ */ React7.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, {
+  }), /* @__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, {
     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, {
+  }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Separator, 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"))), /* @__PURE__ */ React6.createElement(DropdownMenu2.Arrow, null)));
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Arrow, null)));
 };
 
 // src/components/Table/Table.tsx
@@ -830,29 +925,19 @@ var rowDefault = {
     focusUnfurl: false
   }
 };
-var emptyColumnMeta = Atom2.make({
+var emptyColumnMeta = Atom3.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 TableRoot = ({ children }) => {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
 };
-var emptyRowsAtom = Atom2.make([]);
-var emptyCellUpdateAtom = Atom2.make(0);
-var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }, forwardedRef) => {
-  const registry = useContext(RegistryContext);
+var emptyRowsAtom = Atom3.make([]);
+var emptyCellUpdateAtom = Atom3.make(0);
+var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+  const registry = useContext2(RegistryContext2);
   const [dxGrid, setDxGrid] = useState4(null);
   const { hasAttention } = useAttention(model?.id ?? "table");
-  const modals = useMemo4(() => new ModalController(registry), [
+  const modals = useMemo5(() => new ModalController(registry), [
     registry
   ]);
   const columnMeta = useAtomValue4(model?.columnMeta ?? emptyColumnMeta);
@@ -860,7 +945,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 = useMemo4(() => {
+  const frozen = useMemo5(() => {
     const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
     return {
       frozenRowsStart: 1,
@@ -875,7 +960,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
   const getCells = useCallback4((range, plane) => presentation?.getCells(range, plane) ?? {}, [
     presentation
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!dxGrid || !presentation) {
       return;
     }
@@ -885,7 +970,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     presentation,
     getCells
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!dxGrid) {
       return;
     }
@@ -1058,7 +1143,7 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
           } catch (error) {
             log.catch(error, void 0, {
               F: __dxlog_file3,
-              L: 322,
+              L: 310,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -1157,22 +1242,27 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
     presentation
   ]);
   if (!model || !modals) {
-    return /* @__PURE__ */ React7.createElement("span", {
+    return /* @__PURE__ */ React8.createElement("span", {
       role: "none",
-      className: "attention-surface"
+      className: "dx-attention-surface"
     });
   }
-  return /* @__PURE__ */ React7.createElement(Grid.Root, {
+  const { className, ...rest } = useComposableProps(props);
+  return /* @__PURE__ */ React8.createElement("div", {
+    ...rest,
+    role: "none",
+    className: mx("dx-container relative", className)
+  }, /* @__PURE__ */ React8.createElement(Grid.Root, {
     id: model.id ?? "table-grid"
-  }, /* @__PURE__ */ React7.createElement(TableValueEditor, {
+  }, /* @__PURE__ */ React8.createElement(TableValueEditor, {
     model,
     modals,
     schema,
     onFocus: handleFocus,
     onSave: handleSave,
     onCreate
-  }), /* @__PURE__ */ React7.createElement(Grid.Content, {
-    className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+  }), /* @__PURE__ */ React8.createElement(Grid.Content, {
+    className: mx("[--dx-grid-base:var(--base-surface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
     frozen,
     columns: columnMeta,
     columnDefault,
@@ -1188,44 +1278,45 @@ var TableMainInner = ({ schema, model, presentation, ignoreAttention, onCreate,
       "data-testid": testId
     },
     ref: setDxGrid
-  }), /* @__PURE__ */ React7.createElement(RowActionsMenu, {
+  }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React7.createElement(ColumnActionsMenu, {
+  }), /* @__PURE__ */ React8.createElement(ColumnActionsMenu, {
     model,
     modals
-  }), /* @__PURE__ */ React7.createElement(ColumnSettings, {
+  }), /* @__PURE__ */ React8.createElement(ColumnSettings, {
     model,
     modals,
     onNewColumn: handleNewColumn
-  }));
+  })));
 };
 var TableMain = /* @__PURE__ */ forwardRef(TableMainInner);
 var Table = {
   Root: TableRoot,
-  Main: TableMain
+  Main: TableMain,
+  Toolbar: TableToolbar
 };
 
 // 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 { 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 { 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);
+var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", rows, properties, jsonSchema: jsonSchemaProp, rowActions, onRowClick, onRowAction, ...props }) => {
+  const registry = useContext3(RegistryContext3);
   const [dynamicTable, setDynamicTable] = useState5();
-  const { jsonSchema } = useMemo5(() => getBaseSchema({
+  const { jsonSchema } = useMemo6(() => getBaseSchema({
     typename: name,
     properties,
-    jsonSchema: _jsonSchema,
+    jsonSchema: jsonSchemaProp,
     schema
   }), [
     name,
     properties,
-    _jsonSchema,
+    jsonSchemaProp,
     schema
   ]);
-  useEffect4(() => {
+  useEffect5(() => {
     setDynamicTable(makeDynamicTable({
       registry,
       jsonSchema,
@@ -1259,7 +1350,7 @@ var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", ro
     onRowOrderChange: handleRowOrderChange,
     onRowAction
   });
-  const presentation = useMemo5(() => {
+  const presentation = useMemo6(() => {
     if (model) {
       return new TablePresentation(registry, model);
     }
@@ -1267,13 +1358,13 @@ var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", ro
     registry,
     model
   ]);
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: mx2("is-full bs-full grow grid", classNames)
-  }, /* @__PURE__ */ React8.createElement("div", {
+    className: mx2("w-full h-full grow grid", classNames)
+  }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: "grid min-bs-0 overflow-hidden"
-  }, /* @__PURE__ */ React8.createElement(Table.Root, null, /* @__PURE__ */ React8.createElement(Table.Main, {
+    className: "grid min-h-0 overflow-hidden"
+  }, /* @__PURE__ */ React9.createElement(Table.Root, null, /* @__PURE__ */ React9.createElement(Table.Main, {
     ref: tableRef,
     model,
     presentation,
@@ -1281,93 +1372,6 @@ var DynamicTable = ({ classNames, schema, name = "example.com/dynamic-table", ro
     onRowClick
   }))));
 };
-
-// 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";
-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: 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
-  }));
-  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 }) => {
-  const registry = useContext3(RegistryContext3);
-  const stateAtom = useMemo6(() => Atom3.make({
-    viewDirty
-  }), []);
-  useEffect5(() => {
-    registry.set(stateAtom, {
-      viewDirty
-    });
-  }, [
-    registry,
-    stateAtom,
-    viewDirty
-  ]);
-  const actionsCreator = useMemo6(() => createTableToolbarActions({
-    stateAtom,
-    onAdd,
-    onSave,
-    customActions
-  }), [
-    stateAtom,
-    onAdd,
-    onSave,
-    customActions
-  ]);
-  const menu = useMenuActions(actionsCreator);
-  return /* @__PURE__ */ React9.createElement(MenuProvider, {
-    ...menu,
-    attendableId
-  }, /* @__PURE__ */ React9.createElement(ToolbarMenu, {
-    classNames
-  }));
-};
 export {
   BUTTON_IDENTIFIERS,
   CONTROL_IDENTIFIERS,