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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.4a85c3132b",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -68,31 +68,31 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "lodash.orderby": "^4.6.0",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/context": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-atom": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/effect": "0.8.4-main.3eb6e50203",
-    "@dxos/keys": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/invariant": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/lit-grid": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-components": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-grid": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-menu": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/debug": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-searchlist": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-types": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203"
+    "@dxos/async": "0.8.4-main.4a85c3132b",
+    "@dxos/context": "0.8.4-main.4a85c3132b",
+    "@dxos/debug": "0.8.4-main.4a85c3132b",
+    "@dxos/echo": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-atom": "0.8.4-main.4a85c3132b",
+    "@dxos/effect": "0.8.4-main.4a85c3132b",
+    "@dxos/invariant": "0.8.4-main.4a85c3132b",
+    "@dxos/random": "0.8.4-main.4a85c3132b",
+    "@dxos/log": "0.8.4-main.4a85c3132b",
+    "@dxos/react-client": "0.8.4-main.4a85c3132b",
+    "@dxos/keys": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-components": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-editor": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-form": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-searchlist": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-grid": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/types": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-types": "0.8.4-main.4a85c3132b",
+    "@dxos/util": "0.8.4-main.4a85c3132b",
+    "@dxos/lit-grid": "0.8.4-main.4a85c3132b"
   },
   "devDependencies": {
     "@effect/platform": "0.94.4",
@@ -103,14 +103,14 @@
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/lit-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/test-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/lit-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/random": "0.8.4-main.4a85c3132b",
+    "@dxos/react-client": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
+    "@dxos/test-utils": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -118,8 +118,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnSettings.tsx

@@ -5,10 +5,9 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type SchemaRegistry } from '@dxos/echo';
+import { type SchemaRegistry, type View } from '@dxos/echo';
 import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
-import { type FieldType } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
 
@@ -20,7 +19,7 @@ type ColumnSettingsProps = {
 };
 
 export const ColumnSettings = ({ registry, model, modals, onNewColumn }: ColumnSettingsProps) => {
-  const [newField, setNewField] = useState<FieldType>();
+  const [newField, setNewField] = useState<View.FieldType>();
   const state = useAtomValue(modals.state);
 
   useEffect(() => {
@@ -64,7 +63,7 @@ export const ColumnSettings = ({ registry, model, modals, onNewColumn }: ColumnS
     <Popover.Root modal={false} open={state?.type === 'columnSettings'}>
       <Popover.VirtualTrigger virtualRef={modals.trigger} />
       <Popover.Portal>
-        <Popover.Content classNames='md:is-64'>
+        <Popover.Content classNames='md:w-64'>
           <Popover.Viewport>
             <FieldEditor
               projection={model.projection}

package/src/components/Table/DynamicTable.stories.tsx

@@ -11,7 +11,7 @@ import { Format } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { TestSchema } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
@@ -59,7 +59,7 @@ const DynamicTableStory = () => {
 const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
-  decorators: [withTheme(), withRegistry],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/Table/DynamicTable.tsx

@@ -19,7 +19,7 @@ import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '.
 
 import { Table, type TableController } from './Table';
 
-export type DynamicTableProps<T extends Type.Entity.Any = Type.Entity.Any> = ThemedClassName<{
+export type DynamicTableProps<T extends Type.AnyEntity = Type.AnyEntity> = ThemedClassName<{
   schema?: T;
   name?: string; // TODO(burdon): Remove?
   rows: any[];
@@ -36,13 +36,13 @@ export type DynamicTableProps<T extends Type.Entity.Any = Type.Entity.Any> = The
  */
 // TODO(burdon): Instead of creating component variants, create helpers/hooks that normalize the props.
 // TODO(burdon): Warning: Cannot update a component (`DynamicTable`) while rendering a different component (`DynamicTable`).
-export const DynamicTable = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   classNames,
   schema,
   name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
   rows,
   properties,
-  jsonSchema: _jsonSchema,
+  jsonSchema: jsonSchemaProp,
   rowActions,
   onRowClick,
   onRowAction,
@@ -53,8 +53,8 @@ export const DynamicTable = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   // TODO(burdon): Remove variance from the props (should be normalized externally; possibly via hooks).
   const { jsonSchema } = useMemo(
-    () => getBaseSchema({ typename: name, properties, jsonSchema: _jsonSchema, schema }),
-    [name, properties, _jsonSchema, schema],
+    () => getBaseSchema({ typename: name, properties, jsonSchema: jsonSchemaProp, schema }),
+    [name, properties, jsonSchemaProp, schema],
   );
 
   useEffect(() => {
@@ -98,8 +98,8 @@ export const DynamicTable = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   // TODO(burdon): Do we need the outer divs?
   return (
-    <div role='none' className={mx('is-full bs-full grow grid', classNames)}>
-      <div role='none' className='grid min-bs-0 overflow-hidden'>
+    <div role='none' className={mx('w-full h-full grow grid', classNames)}>
+      <div role='none' className='grid min-h-0 overflow-hidden'>
         <Table.Root>
           <Table.Main
             ref={tableRef}

package/src/components/Table/Relations.stories.tsx

@@ -8,6 +8,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { expect, userEvent, within } from 'storybook/test';
 
 import { Obj, Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
 import '@dxos/lit-ui/dx-tag-picker.pcss';
@@ -16,7 +17,7 @@ import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as formTranslations } from '@dxos/react-ui-form';
-import { View } from '@dxos/schema';
+import { ViewModel } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { Organization, Person } from '@dxos/types';
@@ -35,7 +36,7 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Mutable and immutable views.
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
-const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
+const useTestModel = <S extends Type.AnyObj>(schema: S, count: number) => {
   const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const [object, setObject] = useState<Table.Table>();
@@ -50,7 +51,7 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: Type.getTypename(schema) });
+    const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: Type.getTypename(schema) });
     const object = Table.make({ view, jsonSchema });
     setObject(object);
     space.db.add(object);
@@ -87,7 +88,7 @@ const DefaultStory = () => {
   const { space } = useClientStory();
 
   const handleCreate = useCallback(
-    (schema: Type.Entity.Any, values: any) => {
+    (schema: Type.AnyEntity, values: any) => {
       invariant(Type.isObjectSchema(schema));
       invariant(space);
       return space.db.add(Obj.make(schema, values));
@@ -96,7 +97,7 @@ const DefaultStory = () => {
   );
 
   return (
-    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
+    <div className='w-full h-full grid grid-cols-2 divide-x divide-separator'>
       <TableComponent.Root>
         <TableComponent.Main
           model={orgModel}
@@ -195,8 +196,9 @@ export const Default: Story = {
     const saveButton = await body.findByTestId('save-button');
     await userEvent.click(saveButton);
 
-    // Verify the relation was set (cell should now contain the org name)
-    await expect(targetCell).toHaveTextContent(orgName.substring(0, 4));
+    // Verify the relation was set (cell should now contain the org name).
+    const updatedCell = within(secondGrid).getByTestId('grid.4.0');
+    await expect(updatedCell).toHaveTextContent(orgName.substring(0, 4));
 
     // Test object creation (new relations) - equivalent to "new relations work as expected" test
     // Find a different cell to test object creation (second row, relations column)
@@ -231,7 +233,8 @@ export const Default: Story = {
     const saveObjectButton = await within(createReferencedObjectForm).findByTestId('save-button');
     await userEvent.click(saveObjectButton);
 
-    // Verify the new object was created and relation was set
-    await expect(newTargetCell).toHaveTextContent(newOrgName);
+    // Verify the new object was created and relation was set.
+    const updatedNewCell = within(secondGrid).getByTestId('grid.4.1');
+    await expect(updatedNewCell).toHaveTextContent(newOrgName);
   },
 } as any;

package/src/components/Table/Table.stories.tsx

@@ -6,24 +6,24 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
-import { Annotation, type Database, Format, Obj, type QueryAST, Type } from '@dxos/echo';
+import { Annotation, type Database, Format, Obj, type QueryAST, Ref, Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { ScrollArea } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { Panel, ScrollArea } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { View, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
 import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
 import { Table } from '../../types';
-import { TableToolbar } from '../TableToolbar';
 
 import { Table as TableComponent } from './Table';
 
@@ -48,7 +48,7 @@ const Example = Schema.Struct({
       }),
   ),
   description: Schema.optional(Schema.String).annotations({ title: 'Description' }),
-  parent: Schema.optional(Schema.suspend((): Type.Ref<Example> => Type.Ref(Example))).annotations({
+  parent: Schema.optional(Schema.suspend((): Ref.RefSchema<Example> => Ref.Ref(Example))).annotations({
     title: 'Parent',
   }),
 }).pipe(
@@ -119,20 +119,28 @@ const DefaultStory = () => {
 
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
-      <div className='grid grid-rows-[min-content_1fr] min-bs-0 overflow-hidden'>
-        <TableToolbar classNames='border-be border-subduedSeparator' onAdd={handleInsertRow} onSave={handleSaveView} />
-        <TableComponent.Root>
-          <TableComponent.Main
-            ref={tableRef}
-            schema={schema}
-            model={model}
-            presentation={presentation}
-            onRowClick={handleRowClick}
-            ignoreAttention
-          />
-        </TableComponent.Root>
-      </div>
-      <ScrollArea.Root orientation='vertical' classNames='bs-full border-l border-separator'>
+      <TableComponent.Root>
+        <Panel.Root>
+          <Panel.Toolbar asChild>
+            <TableComponent.Toolbar
+              classNames='border-b border-subdued-separator'
+              onAdd={handleInsertRow}
+              onSave={handleSaveView}
+            />
+          </Panel.Toolbar>
+          <Panel.Content asChild>
+            <TableComponent.Main
+              ref={tableRef}
+              schema={schema}
+              model={model}
+              presentation={presentation}
+              onRowClick={handleRowClick}
+              ignoreAttention
+            />
+          </Panel.Content>
+        </Panel.Root>
+      </TableComponent.Root>
+      <ScrollArea.Root orientation='vertical' classNames='border-l border-separator'>
         <ScrollArea.Viewport>
           <StoryViewEditor view={table.view.target} schema={schema} db={db} handleDeleteColumn={handleDeleteColumn} />
           <SyntaxHighlighter language='json' className='text-xs'>
@@ -150,13 +158,14 @@ type StoryProps = { rows?: number };
 // Story definitions.
 //
 
-// TODO(burdon): Need super simple story.
+// TODO(burdon): Need simpler story.
 
 const meta = {
   title: 'ui/react-ui-table/Table',
   render: DefaultStory,
   decorators: [
     withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withRegistry,
     withClientProvider({
       types: [View.View, Table.Table],
@@ -164,7 +173,7 @@ const meta = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename: schema.typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: schema.typename });
         const table = Table.make({ view, jsonSchema });
         Obj.change(view, (v) => {
           v.projection.fields = [
@@ -210,7 +219,7 @@ export const StaticSchema: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromDatabase({
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
           typename: TestSchema.Person.typename,
         });
@@ -256,7 +265,7 @@ export const ArrayOfObjects: StoryObj = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const { view, jsonSchema } = await View.makeFromDatabase({
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
           typename: ContactWithArrayOfEmails.typename,
         });
@@ -314,7 +323,7 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const { view, jsonSchema } = await View.makeFromDatabase({ db: space.db, typename });
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
 

package/src/components/Table/Table.tsx

@@ -35,11 +35,13 @@ import {
   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';
+import { type ComposableProps } from '@dxos/ui-types';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
 import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { TableToolbar } from '../TableToolbar';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
@@ -53,51 +55,37 @@ const emptyColumnMeta = Atom.make<DxGridAxisMeta>({ grid: {} });
 // Table.Root
 //
 
-export type TableRootProps = PropsWithChildren<{ role?: string }>;
+export type TableRootProps = PropsWithChildren;
 
-const TableRoot = ({ children, role = 'article' }: TableRootProps) => {
-  return (
-    <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}
-    </div>
-  );
+const TableRoot = ({ children }: TableRootProps) => {
+  return <>{children}</>;
 };
 
 //
 // Table.Main
 //
 
+const emptyRowsAtom = Atom.make<unknown[]>([]);
+const emptyCellUpdateAtom = Atom.make<number>(0);
+
 export type TableController = {
   update?: (cell?: DxGridPosition) => void;
   handleInsertRowResult?: (insertRowResult?: InsertRowResult) => void;
 };
 
-export type TableMainProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type TableMainProps<T extends Type.AnyEntity = Type.AnyEntity> = ComposableProps<{
   schema?: T;
   model?: TableModel;
   presentation?: TablePresentation;
-  // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
+  // TODO(burdon): Factor out attention.
   ignoreAttention?: boolean;
   onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
   testId?: string;
-};
+}>;
 
-const emptyRowsAtom = Atom.make<unknown[]>([]);
-const emptyCellUpdateAtom = Atom.make<number>(0);
-
-const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
-  { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId }: TableMainProps<T>,
+const TableMainInner = <T extends Type.AnyEntity = Type.AnyEntity>(
+  { schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }: TableMainProps<T>,
   forwardedRef: Ref<TableController>,
 ) => {
   const registry = useContext(RegistryContext);
@@ -424,47 +412,55 @@ const TableMainInner = <T extends Type.Entity.Any = Type.Entity.Any>(
   }, [dxGrid, model, presentation]);
 
   if (!model || !modals) {
-    return <span role='none' className='attention-surface' />;
+    return <span role='none' className='dx-attention-surface' />;
   }
 
+  const { className, ...rest } = useComposableProps(props);
   return (
-    <Grid.Root id={model.id ?? 'table-grid'}>
-      <TableValueEditor<T>
-        model={model}
-        modals={modals}
-        schema={schema}
-        onFocus={handleFocus}
-        onSave={handleSave}
-        onCreate={onCreate}
-      />
-      <Grid.Content
-        className={mx('[--dx-grid-base:var(--baseSurface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
-        frozen={frozen}
-        columns={columnMeta}
-        columnDefault={columnDefault}
-        rowDefault={rowDefault}
-        limitRows={rows.length}
-        limitColumns={columnCount}
-        overscroll='trap'
-        onAxisResize={handleAxisResize}
-        onClick={handleGridClick}
-        onKeyDownCapture={handleKeyDown}
-        onWheelCapture={handleWheel}
-        {...(testId && { 'data-testid': testId })}
-        ref={setDxGrid}
-      />
-      <RowActionsMenu model={model} modals={modals} />
-      <ColumnActionsMenu model={model} modals={modals} />
-      <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
-    </Grid.Root>
+    <div {...rest} role='none' className={mx('dx-container relative', className)}>
+      <Grid.Root id={model.id ?? 'table-grid'}>
+        <TableValueEditor<T>
+          model={model}
+          modals={modals}
+          schema={schema}
+          onFocus={handleFocus}
+          onSave={handleSave}
+          onCreate={onCreate}
+        />
+        <Grid.Content
+          className={mx('[--dx-grid-base:var(--base-surface)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
+          frozen={frozen}
+          columns={columnMeta}
+          columnDefault={columnDefault}
+          rowDefault={rowDefault}
+          limitRows={rows.length}
+          limitColumns={columnCount}
+          overscroll='trap'
+          onAxisResize={handleAxisResize}
+          onClick={handleGridClick}
+          onKeyDownCapture={handleKeyDown}
+          onWheelCapture={handleWheel}
+          {...(testId && { 'data-testid': testId })}
+          ref={setDxGrid}
+        />
+        <RowActionsMenu model={model} modals={modals} />
+        <ColumnActionsMenu model={model} modals={modals} />
+        <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
+      </Grid.Root>
+    </div>
   );
 };
 
-const TableMain = forwardRef(TableMainInner) as <T extends Type.Entity.Any = Type.Entity.Any>(
+const TableMain = forwardRef(TableMainInner) as <T extends Type.AnyEntity = Type.AnyEntity>(
   props: TableMainProps<T> & { ref?: Ref<TableController> },
 ) => JSX.Element;
 
+//
+// Table
+//
+
 export const Table = {
   Root: TableRoot,
   Main: TableMain,
+  Toolbar: TableToolbar,
 };

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -22,15 +22,15 @@ export const CellValidationMessage = ({
     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 (
     <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)`,
         insetInlineStart: box.insetInlineStart,

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -20,9 +20,9 @@ import { narrowSchema } from '../../util';
 
 const createOptionLabel: Label = ['create new object label', { ns: translationKey }];
 
-export type OnCreateHandler = (schema: Type.Entity.Any, values: any) => Parameters<typeof Ref.make>[0];
+export type OnCreateHandler = (schema: Type.AnyEntity, values: any) => Parameters<typeof Ref.make>[0];
 
-export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
+export type FormCellEditorProps<T extends Type.AnyEntity = Type.AnyEntity> = {
   __gridScope: any;
   schema?: T;
   model?: TableModel;
@@ -32,7 +32,7 @@ export type FormCellEditorProps<T extends Type.Entity.Any = Type.Entity.Any> = {
   onCreate?: OnCreateHandler;
 } & Omit<FormRootProps<any>, 'values' | 'schema' | 'onCreate'>;
 
-export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
+export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
   __gridScope,
   schema,
   model,
@@ -85,8 +85,12 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
 
   // NOTE: Important to get a mutable deep clone to eject from the echo object.
   // TODO(wittjosiah): Consider using something like Obj.clone for this use case.
-  const formValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const initialFormValues = useMemo(() => (originalRow ? JSON.parse(JSON.stringify(originalRow)) : {}), [originalRow]);
+  const [formValues, setFormValues] = useState<any>(initialFormValues);
 
+  const handleValuesChanged = useCallback<NonNullable<FormRootProps<any>['onValuesChanged']>>((values) => {
+    setFormValues(values);
+  }, []);
   const handleOpenChange = useCallback((nextOpen: boolean) => {
     if (nextOpen === false) {
       setEditing(null);
@@ -162,7 +166,7 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='popover-card-width density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root
@@ -170,6 +174,8 @@ export const FormCellEditor = <T extends Type.Entity.Any = Type.Entity.Any>({
               autoFocus
               schema={narrowedSchema}
               values={formValues}
+              onValuesChanged={handleValuesChanged}
+              projection={model?.projection}
               createInitialValuePath={fieldProjection.field.referencePath}
               createOptionIcon='ph--plus--regular'
               createOptionLabel={createOptionLabel}