@dxos/react-ui-table 0.8.4-main.72ec0f3 → 0.8.4-main.8360d9e660

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.72ec0f3",
+  "version": "0.8.4-main.8360d9e660",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     "./deprecated": {
@@ -56,71 +60,66 @@
     "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@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.72ec0f3",
-    "@dxos/debug": "0.8.4-main.72ec0f3",
-    "@dxos/echo": "0.8.4-main.72ec0f3",
-    "@dxos/effect": "0.8.4-main.72ec0f3",
-    "@dxos/invariant": "0.8.4-main.72ec0f3",
-    "@dxos/lit-grid": "0.8.4-main.72ec0f3",
-    "@dxos/echo-db": "0.8.4-main.72ec0f3",
-    "@dxos/keys": "0.8.4-main.72ec0f3",
-    "@dxos/live-object": "0.8.4-main.72ec0f3",
-    "@dxos/log": "0.8.4-main.72ec0f3",
-    "@dxos/plugin-search": "0.8.4-main.72ec0f3",
-    "@dxos/react-client": "0.8.4-main.72ec0f3",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-components": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-editor": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-form": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-grid": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-searchlist": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.72ec0f3",
-    "@dxos/context": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-types": "0.8.4-main.72ec0f3",
-    "@dxos/types": "0.8.4-main.72ec0f3",
-    "@dxos/util": "0.8.4-main.72ec0f3",
-    "@dxos/schema": "0.8.4-main.72ec0f3"
+    "@dxos/async": "0.8.4-main.8360d9e660",
+    "@dxos/context": "0.8.4-main.8360d9e660",
+    "@dxos/debug": "0.8.4-main.8360d9e660",
+    "@dxos/echo": "0.8.4-main.8360d9e660",
+    "@dxos/echo-atom": "0.8.4-main.8360d9e660",
+    "@dxos/effect": "0.8.4-main.8360d9e660",
+    "@dxos/invariant": "0.8.4-main.8360d9e660",
+    "@dxos/keys": "0.8.4-main.8360d9e660",
+    "@dxos/lit-grid": "0.8.4-main.8360d9e660",
+    "@dxos/log": "0.8.4-main.8360d9e660",
+    "@dxos/random": "0.8.4-main.8360d9e660",
+    "@dxos/react-client": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-components": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-form": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-editor": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-grid": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-searchlist": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-attention": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-menu": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-stack": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.8360d9e660",
+    "@dxos/types": "0.8.4-main.8360d9e660",
+    "@dxos/ui-types": "0.8.4-main.8360d9e660",
+    "@dxos/schema": "0.8.4-main.8360d9e660",
+    "@dxos/util": "0.8.4-main.8360d9e660"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "0.92.1",
+    "@effect/platform": "0.94.4",
     "@types/lodash.orderby": "^4.6.9",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "effect": "3.18.3",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
     "fast-check": "^3.19.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/echo-signals": "0.8.4-main.72ec0f3",
-    "@dxos/lit-ui": "0.8.4-main.72ec0f3",
-    "@dxos/plugin-search": "0.8.4-main.72ec0f3",
-    "@dxos/random": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3",
-    "@dxos/test-utils": "0.8.4-main.72ec0f3",
-    "@dxos/storybook-utils": "0.8.4-main.72ec0f3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.8360d9e660",
+    "@dxos/lit-ui": "0.8.4-main.8360d9e660",
+    "@dxos/react-client": "0.8.4-main.8360d9e660",
+    "@dxos/react-ui": "0.8.4-main.8360d9e660",
+    "@dxos/storybook-utils": "0.8.4-main.8360d9e660",
+    "@dxos/test-utils": "0.8.4-main.8360d9e660",
+    "@dxos/ui-theme": "0.8.4-main.8360d9e660"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.72ec0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.8360d9e660",
+    "@dxos/ui-theme": "0.8.4-main.8360d9e660"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
@@ -9,16 +10,19 @@ import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 
-type ColumnActionsMenuProps = { model: TableModel; modals: ModalController };
+export type ColumnActionsMenuProps = {
+  model: TableModel;
+  modals: ModalController;
+};
 
 export const ColumnActionsMenu = ({ model, modals }: ColumnActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
-  const state = modals.state.value;
+  const state = useAtomValue(modals.state);
   if (state?.type !== 'column') {
     return null;
   }
 
-  const currentSort = model.sorting?.sorting;
+  const currentSort = model.getSorting();
   const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
 
   return (
@@ -30,7 +34,7 @@ export const ColumnActionsMenu = ({ model, modals }: ColumnActionsMenuProps) =>
             {(!isCurrentColumnSorted || currentSort?.direction === 'asc') && (
               <DropdownMenu.Item
                 data-testid='column-sort-descending'
-                onClick={() => model.sorting?.setSort(state.fieldId, 'desc')}
+                onClick={() => model.setSort(state.fieldId, 'desc')}
               >
                 {t('column action sort descending')}
               </DropdownMenu.Item>
@@ -38,13 +42,13 @@ export const ColumnActionsMenu = ({ model, modals }: ColumnActionsMenuProps) =>
             {(!isCurrentColumnSorted || currentSort?.direction === 'desc') && (
               <DropdownMenu.Item
                 data-testid='column-sort-ascending'
-                onClick={() => model.sorting?.setSort(state.fieldId, 'asc')}
+                onClick={() => model.setSort(state.fieldId, 'asc')}
               >
                 {t('column action sort ascending')}
               </DropdownMenu.Item>
             )}
             {isCurrentColumnSorted && (
-              <DropdownMenu.Item data-testid='column-clear-sort' onClick={() => model.sorting?.clearSort()}>
+              <DropdownMenu.Item data-testid='column-clear-sort' onClick={() => model.clearSort()}>
                 {t('column action clear sorting')}
               </DropdownMenu.Item>
             )}

package/src/components/Table/ColumnSettings.tsx

@@ -2,26 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-// TODO(burdon): Remove dependency on echo-db.
-import { type SchemaRegistry } from '@dxos/echo-db';
+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';
 
 type ColumnSettingsProps = {
-  registry?: SchemaRegistry;
+  registry?: SchemaRegistry.SchemaRegistry;
   model?: TableModel;
   modals: ModalController;
   onNewColumn: () => void;
 };
 
 export const ColumnSettings = ({ registry, model, modals, onNewColumn }: ColumnSettingsProps) => {
-  const [newField, setNewField] = useState<FieldType>();
-  const state = modals.state.value;
+  const [newField, setNewField] = useState<View.FieldType>();
+  const state = useAtomValue(modals.state);
 
   useEffect(() => {
     if (state?.type === 'columnSettings' && state.mode.type === 'create' && model?.projection) {
@@ -38,11 +37,11 @@ export const ColumnSettings = ({ registry, model, modals, onNewColumn }: ColumnS
     if (state?.type === 'columnSettings') {
       const { mode } = state;
       if (mode.type === 'edit') {
-        return model?.projection?.fields.find((f) => f.id === mode.fieldId);
+        return model?.projection?.getFields().find((f) => f.id === mode.fieldId);
       }
     }
     return undefined;
-  }, [model?.projection?.fields, state]);
+  }, [model?.projection, state]);
 
   const field = existingField ?? newField;
 
@@ -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

@@ -3,17 +3,18 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import type * as Types from 'effect/Types';
 import React, { useMemo, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { FormatEnum, type JsonSchemaType } from '@dxos/echo/internal';
+import { type JsonSchema, Obj } from '@dxos/echo';
+import { Format } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
-import { Testing } from '@dxos/schema/testing';
+import { TestSchema } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { type TableFeatures } from '../../model';
 import { translations } from '../../translations';
@@ -25,8 +26,8 @@ faker.seed(0);
 const useTestPropertiesAndObjects = () => {
   const properties = useMemo<SchemaPropertyDefinition[]>(
     () => [
-      { name: 'name', format: FormatEnum.String },
-      { name: 'age', format: FormatEnum.Number },
+      { name: 'name', format: Format.TypeFormat.String },
+      { name: 'age', format: Format.TypeFormat.Number },
     ],
     [],
   );
@@ -58,7 +59,7 @@ const DynamicTableStory = () => {
 const meta = {
   title: 'ui/react-ui-table/DynamicTable',
   component: DynamicTable,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -101,7 +102,7 @@ export const WithClickToSelect: StoryObj = {
 
 export const WithJsonSchema: StoryObj = {
   render: () => {
-    const schema = useMemo<JsonSchemaType>(
+    const schema = useMemo<Types.DeepMutable<JsonSchema.JsonSchema>>(
       () => ({
         type: 'object',
         properties: {
@@ -130,10 +131,9 @@ export const WithJsonSchema: StoryObj = {
 
 export const WithEchoSchema: StoryObj = {
   render: () => {
-    const client = useClient();
-    const { space } = useClientProvider();
-    const schema = useSchema(client, space, Testing.Person.typename);
-    const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+    const { space } = useClientStory();
+    const schema = useSchema(space?.db, TestSchema.Person.typename);
+    const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
     if (!schema) {
       return <div>Loading schema...</div>;
     }
@@ -142,13 +142,13 @@ export const WithEchoSchema: StoryObj = {
   },
   decorators: [
     withClientProvider({
-      types: [Testing.Person],
+      types: [TestSchema.Person],
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(Testing.Person, {
+            Obj.make(TestSchema.Person, {
               name: faker.person.fullName(),
               email: faker.internet.email(),
             }),

package/src/components/Table/DynamicTable.tsx

@@ -2,25 +2,29 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
-import React, { useCallback, useMemo, useRef } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import type * as Types from 'effect/Types';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
-import { type JsonSchemaType } from '@dxos/echo/internal';
+import { type Type } from '@dxos/echo';
+import { type JsonSchema } from '@dxos/echo';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { type ProjectionModel } from '@dxos/schema';
+import { mx } from '@dxos/ui-theme';
 
 import { useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRowAction } from '../../model';
+import { type Table as TableType } from '../../types';
 import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '../../util';
 
 import { Table, type TableController } from './Table';
 
-type DynamicTableProps = ThemedClassName<{
+export type DynamicTableProps<T extends Type.AnyEntity = Type.AnyEntity> = ThemedClassName<{
+  schema?: T;
   name?: string; // TODO(burdon): Remove?
   rows: any[];
   properties?: TablePropertyDefinition[];
-  jsonSchema?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
+  jsonSchema?: Types.DeepMutable<JsonSchema.JsonSchema>;
   features?: Partial<TableFeatures>;
   rowActions?: TableRowAction[];
   onRowClick?: (row: any) => void;
@@ -32,25 +36,30 @@ type DynamicTableProps = ThemedClassName<{
  */
 // 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 = ({
+export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   classNames,
-  name = 'example.com/dynamic-table', // Rmove default or make random; this will lead to type collisions.
+  schema,
+  name = 'com.example.dynamic-table', // Remove default or make random; this will lead to type collisions.
   rows,
   properties,
-  jsonSchema: _jsonSchema,
-  schema,
+  jsonSchema: jsonSchemaProp,
   rowActions,
   onRowClick,
   onRowAction,
   ...props
-}: DynamicTableProps) => {
+}: DynamicTableProps<T>) => {
+  const registry = useContext(RegistryContext);
+  const [dynamicTable, setDynamicTable] = useState<{ object: TableType.Table; projection: ProjectionModel }>();
+
   // 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],
   );
 
-  const { projection, view } = useMemo(() => makeDynamicTable({ jsonSchema, properties }), [jsonSchema, properties]);
+  useEffect(() => {
+    setDynamicTable(makeDynamicTable({ registry, jsonSchema, properties }));
+  }, [registry, jsonSchema, properties]);
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {
@@ -72,9 +81,8 @@ export const DynamicTable = ({
 
   const model = useTableModel({
     rows,
-    view,
-    schema: jsonSchema,
-    projection,
+    object: dynamicTable?.object,
+    projection: dynamicTable?.projection,
     features,
     rowActions,
     onCellUpdate: handleCellUpdate,
@@ -84,14 +92,14 @@ export const DynamicTable = ({
 
   const presentation = useMemo(() => {
     if (model) {
-      return new TablePresentation(model);
+      return new TablePresentation(registry, model);
     }
-  }, [model]);
+  }, [registry, model]);
 
   // 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

@@ -2,26 +2,27 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import type * as Schema from 'effect/Schema';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { Obj, Type } from '@dxos/echo';
-import { type JsonSchemaType } from '@dxos/echo/internal';
+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';
 import { faker } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+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';
 
-import { useTableModel } from '../../hooks';
+import { useProjectionModel, useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import { translations } from '../../translations';
 import { Table } from '../../types';
@@ -35,11 +36,10 @@ 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 client = useClient();
-  const { space } = useClientProvider();
-  const [view, setView] = useState<View.View>();
-  const [jsonSchema, setJsonSchema] = useState<JsonSchemaType>();
+const useTestModel = <S extends Type.AnyObj>(schema: S, count: number) => {
+  const registry = useContext(RegistryContext);
+  const { space } = useClientStory();
+  const [object, setObject] = useState<Table.Table>();
 
   const features = useMemo<TableFeatures>(
     () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
@@ -51,18 +51,14 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    const {
-      jsonSchema,
-      schema: effectSchema,
-      view,
-    } = await Table.makeView({ client, space, typename: Type.getTypename(schema) });
-    setJsonSchema(jsonSchema);
-    setView(view);
-    space.db.add(view);
-    await space.db.schemaRegistry.register([effectSchema]);
-  }, [client, space, 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);
+  }, [space, schema]);
 
-  const model = useTableModel<TableRow>({ view, schema: jsonSchema, rows: [], features });
+  const projection = useProjectionModel(schema, object, registry);
+  const model = useTableModel<TableRow>({ object, projection, db: space?.db, features });
 
   useEffect(() => {
     if (!model || !space) {
@@ -80,34 +76,34 @@ const useTestModel = <S extends Type.Obj.Any>(schema: S, count: number) => {
       return;
     }
 
-    return new TablePresentation(model);
-  }, [model]);
+    return new TablePresentation(registry, model);
+  }, [registry, model]);
 
   return { model, presentation };
 };
 
 const DefaultStory = () => {
-  const client = useClient();
   const { model: orgModel, presentation: orgPresentation } = useTestModel(Organization.Organization, 50);
   const { model: contactModel, presentation: contactPresentation } = useTestModel(Person.Person, 50);
-  const { space } = useClientProvider();
+  const { space } = useClientStory();
 
   const handleCreate = useCallback(
-    (schema: Schema.Schema.AnyNoContext, values: any) => {
-      return client.spaces.default.db.add(Obj.make(schema, values));
+    (schema: Type.AnyEntity, values: any) => {
+      invariant(Type.isObjectSchema(schema));
+      invariant(space);
+      return space.db.add(Obj.make(schema, values));
     },
     [space],
   );
 
   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}
           schema={Organization.Organization}
           presentation={orgPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-0'
         />
@@ -118,7 +114,6 @@ const DefaultStory = () => {
           schema={Person.Person}
           presentation={contactPresentation}
           onCreate={handleCreate}
-          client={client}
           ignoreAttention
           testId='relations-1'
         />
@@ -131,8 +126,9 @@ const meta = {
   title: 'ui/react-ui-table/Relations',
   render: DefaultStory,
   decorators: [
-    withTheme,
-    // TODO(thure): Shouldn’t `layout: 'fullscreen'` below make this unnecessary?
+    withTheme(),
+    withRegistry,
+    // TODO(thure): Shouldn't `layout: 'fullscreen'` below make this unnecessary?
     withLayout({ classNames: 'fixed inset-0' }),
     withClientProvider({
       types: [View.View, Organization.Organization, Person.Person, Table.Table],
@@ -200,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)
@@ -224,9 +221,9 @@ export const Default: Story = {
     const newOrgName = 'Salieri LLC';
     await userEvent.type(newSearchField, newOrgName);
 
-    // Look for an option to select (should be the create new option)
-    const newOption = await body.findAllByRole('option');
-    await expect(newOption[0]).toBeVisible();
+    // Wait for the create option to appear (debounce is 200ms, allow time for render)
+    const createOption = await body.findByRole('option', undefined, { timeout: 500 });
+    await expect(createOption).toBeVisible();
 
     // Press Enter to select/create
     await userEvent.keyboard('{Enter}');
@@ -236,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/RowActionsMenu.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -13,8 +14,8 @@ type RowActionsMenuProps = { model: TableModel; modals: ModalController };
 
 export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
   const { t } = useTranslation(translationKey);
-  const hasSelection = model.selection.hasSelection.value;
-  const state = modals.state.value;
+  const hasSelection = model.selection.hasSelection;
+  const state = useAtomValue(modals.state);
   if (state?.type !== 'row') {
     return null;
   }