@dxos/react-ui-table 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.4-main.422d1c7879",
+  "version": "0.8.4-main.43cb759274",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,17 +8,14 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
-    "./deprecated": {
-      "source": "./src/deprecated/index.ts",
-      "types": "./dist/types/src/deprecated/index.d.ts",
-      "browser": "./dist/lib/browser/deprecated/index.mjs",
-      "node": "./dist/lib/node-esm/deprecated/index.mjs"
-    },
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
@@ -31,6 +28,12 @@
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
@@ -44,9 +47,9 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.19.0",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/autocomplete": "^6.20.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
@@ -55,58 +58,59 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "lodash.orderby": "^4.6.0",
-    "@dxos/context": "0.8.4-main.422d1c7879",
-    "@dxos/async": "0.8.4-main.422d1c7879",
-    "@dxos/debug": "0.8.4-main.422d1c7879",
-    "@dxos/echo": "0.8.4-main.422d1c7879",
-    "@dxos/effect": "0.8.4-main.422d1c7879",
-    "@dxos/invariant": "0.8.4-main.422d1c7879",
-    "@dxos/keys": "0.8.4-main.422d1c7879",
-    "@dxos/echo-atom": "0.8.4-main.422d1c7879",
-    "@dxos/lit-grid": "0.8.4-main.422d1c7879",
-    "@dxos/log": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-attention": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/random": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-components": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-form": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-editor": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-grid": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-search": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-menu": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-stack": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.422d1c7879",
-    "@dxos/schema": "0.8.4-main.422d1c7879",
-    "@dxos/ui-types": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879",
-    "@dxos/types": "0.8.4-main.422d1c7879"
+    "@dxos/async": "0.8.4-main.43cb759274",
+    "@dxos/context": "0.8.4-main.43cb759274",
+    "@dxos/debug": "0.8.4-main.43cb759274",
+    "@dxos/effect": "0.8.4-main.43cb759274",
+    "@dxos/echo-atom": "0.8.4-main.43cb759274",
+    "@dxos/lit-grid": "0.8.4-main.43cb759274",
+    "@dxos/invariant": "0.8.4-main.43cb759274",
+    "@dxos/echo": "0.8.4-main.43cb759274",
+    "@dxos/keys": "0.8.4-main.43cb759274",
+    "@dxos/log": "0.8.4-main.43cb759274",
+    "@dxos/random": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-attention": "0.8.4-main.43cb759274",
+    "@dxos/react-client": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-components": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-editor": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-grid": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-form": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-list": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-menu": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-search": "0.8.4-main.43cb759274",
+    "@dxos/types": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.43cb759274",
+    "@dxos/schema": "0.8.4-main.43cb759274",
+    "@dxos/react-ui-stack": "0.8.4-main.43cb759274",
+    "@dxos/ui-types": "0.8.4-main.43cb759274",
+    "@dxos/util": "0.8.4-main.43cb759274"
   },
   "devDependencies": {
-    "@effect/platform": "0.94.4",
+    "@effect/platform": "0.96.1",
     "@types/lodash.orderby": "^4.6.9",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.20.0",
+    "effect": "3.21.2",
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
-    "@dxos/random": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/storybook-utils": "0.8.4-main.422d1c7879",
-    "@dxos/test-utils": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "vite": "^8.0.14",
+    "@dxos/lit-ui": "0.8.4-main.43cb759274",
+    "@dxos/random": "0.8.4-main.43cb759274",
+    "@dxos/react-client": "0.8.4-main.43cb759274",
+    "@dxos/react-ui": "0.8.4-main.43cb759274",
+    "@dxos/test-utils": "0.8.4-main.43cb759274",
+    "@dxos/storybook-utils": "0.8.4-main.43cb759274",
+    "@dxos/ui-theme": "0.8.4-main.43cb759274"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.94.4",
-    "effect": "3.20.0",
+    "@effect/platform": "0.96.1",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879"
+    "@dxos/ui-theme": "0.8.4-main.43cb759274",
+    "@dxos/react-ui": "0.8.4-main.43cb759274"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/ColumnActionsMenu.tsx

@@ -7,8 +7,9 @@ import React from 'react';
 
 import { DropdownMenu, useTranslation } from '@dxos/react-ui';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel } from '../../model';
-import { translationKey } from '../../translations';
 
 export type ColumnActionsMenuProps = {
   model: TableModel;

package/src/components/Table/ColumnSettings.tsx

@@ -5,14 +5,14 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { type SchemaRegistry, type View } from '@dxos/echo';
+import { type Registry, type View } from '@dxos/echo';
 import { Popover } from '@dxos/react-ui';
 import { FieldEditor } from '@dxos/react-ui-form';
 
 import { type ModalController, type TableModel } from '../../model';
 
 type ColumnSettingsProps = {
-  registry?: SchemaRegistry.SchemaRegistry;
+  registry?: Registry.Registry;
   model?: TableModel;
   modals: ModalController;
   onNewColumn: () => void;

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

@@ -6,18 +6,19 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import type * as Types from 'effect/Types';
 import React, { useMemo, useState } from 'react';
 
-import { type JsonSchema, Obj } from '@dxos/echo';
+import { Filter, type JsonSchema, Obj, Type } from '@dxos/echo';
 import { Format } from '@dxos/echo/internal';
 import { random } from '@dxos/random';
-import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { useQuery, useType } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/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';
 
+import { translations } from '#translations';
+
 import { type TableFeatures } from '../../model';
-import { translations } from '../../translations';
 import { DynamicTable } from './DynamicTable';
 
 random.seed(0);
@@ -131,13 +132,13 @@ export const WithJsonSchema: StoryObj = {
 export const WithEchoSchema: StoryObj = {
   render: () => {
     const { space } = useClientStory();
-    const schema = useSchema(space?.db, TestSchema.Person.typename);
-    const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
-    if (!schema) {
+    const type = useType(space?.db, Type.getTypename(TestSchema.Person));
+    const objects = useQuery(space?.db, type ? Filter.type(type) : Filter.nothing());
+    if (!type) {
       return <div>Loading schema...</div>;
     }
 
-    return <DynamicTable schema={schema} rows={objects} />;
+    return <DynamicTable type={type} rows={objects} />;
   },
   decorators: [
     withClientProvider({

package/src/components/Table/DynamicTable.tsx

@@ -6,8 +6,7 @@ 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 Type } from '@dxos/echo';
-import { type JsonSchema } from '@dxos/echo';
+import { type JsonSchema, type Type } from '@dxos/echo';
 import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
 import { mx } from '@dxos/ui-theme';
@@ -19,7 +18,7 @@ import { type TablePropertyDefinition, getBaseSchema, makeDynamicTable } from '.
 import { Table, type TableController } from './Table';
 
 export type DynamicTableProps<T extends Type.AnyEntity = Type.AnyEntity> = ThemedClassName<{
-  schema?: T;
+  type?: T;
   name?: string; // TODO(burdon): Remove?
   rows: any[];
   properties?: TablePropertyDefinition[];
@@ -37,7 +36,7 @@ export type DynamicTableProps<T extends Type.AnyEntity = Type.AnyEntity> = Theme
 // TODO(burdon): Warning: Cannot update a component (`DynamicTable`) while rendering a different component (`DynamicTable`).
 export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   classNames,
-  schema,
+  type: typeProp,
   name = 'com.example.dynamicTable', // Remove default or make random; this will lead to type collisions.
   rows,
   properties,
@@ -51,14 +50,14 @@ export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   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: jsonSchemaProp, schema }),
-    [name, properties, jsonSchemaProp, schema],
+  const { type } = useMemo(
+    () => getBaseSchema({ typename: name, properties, jsonSchema: jsonSchemaProp, type: typeProp }),
+    [name, properties, jsonSchemaProp, typeProp],
   );
 
   useEffect(() => {
-    setDynamicTable(makeDynamicTable({ registry, jsonSchema, properties }));
-  }, [registry, jsonSchema, properties]);
+    setDynamicTable(makeDynamicTable({ registry, type, properties }));
+  }, [registry, type, properties]);
 
   const tableRef = useRef<TableController>(null);
   const handleCellUpdate = useCallback((cell: any) => {
@@ -96,8 +95,8 @@ export const DynamicTable = <T extends Type.AnyEntity = Type.AnyEntity>({
   }, [registry, model]);
 
   return (
-    <div role='none' className={mx('dx-expander grid', classNames)}>
-      <div role='none' className='grid min-h-0 overflow-hidden'>
+    <div className={mx('dx-expander grid', classNames)}>
+      <div className='grid min-h-0 overflow-hidden'>
         <Table.Root ref={tableRef}>
           <Table.Content model={model} presentation={presentation} ignoreAttention onRowClick={onRowClick} />
         </Table.Root>

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

@@ -7,14 +7,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { Obj, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Obj, Type, View } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { type DxGrid } from '@dxos/lit-grid';
 import { random } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { translations as formTranslations } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewModel } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
@@ -22,9 +21,10 @@ import { withRegistry } from '@dxos/storybook-utils';
 import { Organization, Person } from '@dxos/types';
 import '@dxos/lit-ui/dx-tag-picker.pcss';
 
+import { translations } from '#translations';
+
 import { useProjectionModel, useTableModel } from '../../hooks';
 import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
-import { translations } from '../../translations';
 import { Table } from '../../types';
 import { Table as TableComponent } from './Table';
 
@@ -66,7 +66,9 @@ const useTestModel = <S extends Type.AnyObj>(schema: S, count: number) => {
 
     const objectGenerator = createAsyncGenerator(generator, schema, { db: space?.db, force: true });
     void objectGenerator.createObjects(count).then((objects) => {
-      model.setRows(objects);
+      // TODO(wittjosiah): Remove cast. Type.InstanceType is now strict (no index signature),
+      //  so it isn't assignable to TableRow (Record<JsonProp, any>); reconcile the row model type.
+      model.setRows(objects as unknown as TableRow[]);
     });
   }, [model, space]);
 
@@ -88,7 +90,7 @@ const DefaultStory = () => {
 
   const handleCreate = useCallback(
     (schema: Type.AnyEntity, values: any) => {
-      invariant(Type.isObjectSchema(schema));
+      invariant(Type.isObject(schema));
       invariant(space);
       return space.db.add(Obj.make(schema, values));
     },

package/src/components/Table/RowActionsMenu.tsx

@@ -7,8 +7,9 @@ import React from 'react';
 
 import { DropdownMenu, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel } from '../../model';
-import { translationKey } from '../../translations';
 
 type RowActionsMenuProps = { model: TableModel; modals: ModalController };
 
@@ -47,7 +48,7 @@ export const RowActionsMenu = ({ model, modals }: RowActionsMenuProps) => {
           {/* Default actions */}
           {model.features.dataEditable !== false && (
             <DropdownMenu.Item data-testid='row-menu-delete' onClick={() => model.deleteRow(state.rowIndex)}>
-              {t(hasSelection ? 'bulk delete row label' : 'delete row label')}
+              {t(hasSelection ? 'bulk-delete-row.label' : 'delete-row.label')}
             </DropdownMenu.Item>
           )}
         </DropdownMenu.Viewport>

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

@@ -6,23 +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, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { DXN, Annotation, type Database, Format, Obj, type QueryAST, Ref, Type, View } from '@dxos/echo';
 import { type Mutable, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
 import { PublicKey } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Panel, ScrollArea } from '@dxos/react-ui';
-import { ViewEditor, translations as formTranslations } from '@dxos/react-ui-form';
+import { ViewEditor } from '@dxos/react-ui-form';
+import { translations as formTranslations } from '@dxos/react-ui-form/translations';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ViewModel, getSchemaFromPropertyDefinitions, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getSchemaFromPropertyDefinitions } from '@dxos/schema';
 import { TestSchema, createObjectFactory } from '@dxos/schema/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
+import { translations } from '#translations';
+
 import { useTestTableModel } from '../../testing';
-import { translations } from '../../translations';
 import { Table } from '../../types';
 import { Table as TableComponent } from './Table';
 
@@ -51,10 +52,11 @@ const Example = Schema.Struct({
     title: 'Parent',
   }),
 }).pipe(
-  Type.object({ typename: `com.example.type.${PublicKey.random().truncate()}`, version: '0.1.0' }),
   Annotation.LabelAnnotation.set(['name']),
+  // NSID last segment must start with a letter (DXN spec), so prefix the random hex.
+  Type.makeObject(DXN.make(`com.example.type.example${PublicKey.random().truncate()}`, '0.1.0')),
 );
-interface Example extends Schema.Schema.Type<typeof Example> {}
+interface Example extends Type.InstanceType<typeof Example> {}
 
 const StoryViewEditor = ({
   view,
@@ -63,17 +65,16 @@ const StoryViewEditor = ({
   handleDeleteColumn,
 }: {
   view?: View.View;
-  schema?: Schema.Schema.AnyNoContext;
+  schema?: Type.AnyEntity;
   db?: Database.Database;
   handleDeleteColumn: (fieldId: string) => void;
 }) => {
   const handleQueryChanged = useCallback(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
-      invariant(Type.isMutable(schema));
-      schema.updateTypename(getTypenameFromQuery(newQuery));
+      invariant(Type.getDatabase(schema) != null);
       invariant(view);
-      Obj.change(view, (view) => {
+      Obj.update(view, (view) => {
         view.query.ast = newQuery as Mutable<typeof newQuery>;
       });
     },
@@ -86,8 +87,8 @@ const StoryViewEditor = ({
 
   return (
     <ViewEditor
-      registry={db?.schemaRegistry}
-      schema={schema}
+      registry={db?.graph.registry}
+      type={schema}
       view={view}
       onQueryChanged={handleQueryChanged}
       onDelete={handleDeleteColumn}
@@ -168,10 +169,13 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: async ({ space }) => {
-        const [schema] = await space.db.schemaRegistry.register([Example]);
-        const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename: schema.typename });
+        const type = await space.db.addType(Example);
+        const { view, jsonSchema } = await ViewModel.makeFromDatabase({
+          db: space.db,
+          typename: Type.getTypename(type),
+        });
         const table = Table.make({ view, jsonSchema });
-        Obj.change(view, (view) => {
+        Obj.update(view, (view) => {
           view.projection.fields = [
             view.projection.fields.find((field) => field.path === 'name')!,
             ...view.projection.fields.filter((field) => field.path !== 'name'),
@@ -182,7 +186,7 @@ const meta = {
 
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(schema, {
+            Obj.make(type, {
               name: random.lorem.sentence(),
               status: random.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: random.lorem.paragraph(),
@@ -217,7 +221,7 @@ export const StaticSchema: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: TestSchema.Person.typename,
+          typename: Type.getTypename(TestSchema.Person),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
@@ -246,12 +250,7 @@ const ContactWithArrayOfEmails = Schema.Struct({
       }),
     ),
   ),
-}).pipe(
-  Type.object({
-    typename: 'org.dxos.type.contactWithArrayOfEmails',
-    version: '0.1.0',
-  }),
-);
+}).pipe(Type.makeObject(DXN.make('org.dxos.type.contactWithArrayOfEmails', '0.1.0')));
 
 export const ArrayOfObjects: StoryObj = {
   render: DefaultStory,
@@ -263,7 +262,7 @@ export const ArrayOfObjects: StoryObj = {
       onCreateSpace: async ({ space }) => {
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({
           db: space.db,
-          typename: ContactWithArrayOfEmails.typename,
+          typename: Type.getTypename(ContactWithArrayOfEmails),
         });
         const table = Table.make({ view, jsonSchema });
         space.db.add(table);
@@ -293,7 +292,7 @@ export const Tags: Meta<DefaultStoryProps> = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Configure schema.
-        const typename = 'com.example.type.single-select';
+        const typename = 'com.example.type.singleSelect';
         const selectOptions = [
           { id: 'one', title: 'One', color: 'emerald' },
           { id: 'two', title: 'Two', color: 'blue' },
@@ -304,7 +303,7 @@ export const Tags: Meta<DefaultStoryProps> = {
 
         const selectOptionIds = selectOptions.map((o) => o.id);
 
-        const schema = getSchemaFromPropertyDefinitions(typename, [
+        const type = getSchemaFromPropertyDefinitions(typename, [
           {
             name: 'single',
             format: Format.TypeFormat.SingleSelect,
@@ -316,7 +315,7 @@ export const Tags: Meta<DefaultStoryProps> = {
             config: { options: selectOptions },
           },
         ]);
-        const [storedSchema] = await space.db.schemaRegistry.register([schema]);
+        const storedType = await space.db.addType(type);
 
         // Initialize table.
         const { view, jsonSchema } = await ViewModel.makeFromDatabase({ db: space.db, typename });
@@ -326,7 +325,7 @@ export const Tags: Meta<DefaultStoryProps> = {
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            Obj.make(storedSchema, {
+            Obj.make(Type.assertObject(storedType), {
               single: random.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: random.helpers.randomSubset(selectOptionIds),
             }),

package/src/components/Table/TableContent.tsx

@@ -8,6 +8,7 @@ import React, { type MouseEvent, type WheelEvent, useCallback, useContext, useEf
 
 import { type Type } from '@dxos/echo';
 import { log } from '@dxos/log';
+import { composable, composableProps } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridAxisMeta,
@@ -21,7 +22,7 @@ import {
   gridSeparatorInlineEnd,
 } from '@dxos/react-ui-grid';
 import { DxEditRequest } from '@dxos/react-ui-grid';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
@@ -49,16 +50,20 @@ export type TableContentProps = {
   presentation?: TablePresentation;
   // TODO(burdon): Factor out attention.
   ignoreAttention?: boolean;
+  attendableId?: string;
   onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
   testId?: string;
 };
 
 export const TableContent = composable<HTMLDivElement, TableContentProps>(
-  ({ schema, model, presentation, ignoreAttention, onCreate, onRowClick, testId, ...props }, forwardedRef) => {
+  (
+    { schema, model, presentation, ignoreAttention, attendableId, onCreate, onRowClick, testId, ...props },
+    forwardedRef,
+  ) => {
     const registry = useContext(RegistryContext);
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
-    const { hasAttention } = useAttention(model?.id ?? 'table');
+    const { hasAttention } = useAttention(attendableId ?? model?.id ?? 'table');
     const modals = useMemo(() => new ModalController(registry), [registry]);
     const columnMeta = useAtomValue(model?.columnMeta ?? emptyColumnMeta);
     // Subscribe to rows atom to trigger re-render when rows change.

package/src/components/Table/TableToolbar.tsx

@@ -5,6 +5,7 @@
 import { Atom, RegistryContext } from '@effect-atom/atom-react';
 import React, { useContext, useEffect, useMemo } from 'react';
 
+import { composable, composableProps } from '@dxos/react-ui';
 import {
   type ActionGraphEdges,
   type ActionGraphNodes,
@@ -16,9 +17,8 @@ import {
   createMenuAction,
   useMenuActions,
 } from '@dxos/react-ui-menu';
-import { composable, composableProps } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
 
 export type TableToolbarActionProperties = { type: TableToolbarActionType };
 

package/src/components/TableCellEditor/CellValidationMessage.tsx

@@ -23,11 +23,10 @@ export const CellValidationMessage = ({
   }
 
   const bgClass = variant === 'error' ? 'bg-error-surface' : 'bg-warning-surface';
-  const textClass = variant === 'error' ? 'text-error-surface-text' : 'text-warning-surface-text';
+  const textClass = variant === 'error' ? 'text-error-fg' : 'text-warning-fg';
 
   return (
     <div
-      role='none'
       className={`absolute ${bgClass} ${textClass} rounded-h-sm text-xs p-1`}
       style={{
         ...{ '--dx-grid-cell-width': `${box?.inlineSize ?? 200}px` },

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -5,7 +5,7 @@
 import type * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Entity, type Type } from '@dxos/echo';
+import { Entity, Type } from '@dxos/echo';
 import { Ref, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type Label, Popover } from '@dxos/react-ui';
@@ -14,8 +14,9 @@ import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
 import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
 import { type ModalController, type TableModel, type TableRow } from '../../model';
-import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
 const createOptionLabel: Label = ['create-new-object.label', { ns: translationKey }];
@@ -62,7 +63,7 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
       return undefined;
     }
 
-    return narrowSchema(schema, [fieldProjection.field.path]);
+    return narrowSchema(Type.getSchema(schema), [fieldProjection.field.path]);
   }, [JSON.stringify(schema), fieldProjection.field.path]); // TODO(burdon): Avoid stringify.
 
   const originalRow = useMemo<TableRow | undefined>(() => {
@@ -150,7 +151,7 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
       results
         .map((obj) => {
           return {
-            id: Entity.getDXN(obj).toString(),
+            id: Entity.getURI(obj),
             label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
           };
         })
@@ -166,7 +167,7 @@ export const FormCellEditor = <T extends Type.AnyEntity = Type.AnyEntity>({
     <Popover.Root open={editing} onOpenChange={handleOpenChange}>
       <Popover.VirtualTrigger virtualRef={anchorRef} />
       <Popover.Portal>
-        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-fine'>
+        <Popover.Content tabIndex={-1} classNames='dx-card-popover-width dx-density-md'>
           <Popover.Arrow />
           <Popover.Viewport>
             <Form.Root