@dxos/react-ui-table 0.8.1 → 0.8.2-main.2f9c567

package/dist/types/src/util/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/util/table.ts"],"names":[],"mappings":"AAIA,OAAO,EAOL,CAAC,EAGF,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,MAAM,EAAa,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAmB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,oDAMzB,oBAAoB,KAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CA8CtD,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/util/table.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAa,MAAM,QAAQ,CAAC;AAW3C,OAAO,EAAE,KAAK,MAAM,EAAa,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAiB,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,oDAMzB,oBAAoB,KAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,YAAY,CA0C3D,CAAC"}

package/dist/types/src/util/tag.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Regex pattern for matching tags in the format [Label](id)
+ */
+export declare const TAG_PATTERN_REGEX: RegExp;
+/**
+ * Extracts tag IDs from a string in the format [Label](id)
+ * @param value The string to extract IDs from
+ * @returns Array of extracted IDs or undefined if no matches or value is not a string
+ */
+export declare const extractTagIds: (value: unknown) => string[] | undefined;
+//# sourceMappingURL=tag.d.ts.map

package/dist/types/src/util/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/util/tag.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAA6B,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAW,OAAO,KAAG,MAAM,EAAE,GAAG,SAgBzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-table",
-  "version": "0.8.1",
+  "version": "0.8.2-main.2f9c567",
   "description": "A table component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -51,31 +51,33 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
+    "effect": "3.14.21",
     "lodash.orderby": "^4.6.0",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/context": "0.8.1",
-    "@dxos/effect": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/keys": "0.8.1",
-    "@dxos/lit-grid": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-search": "0.8.1",
-    "@dxos/react-ui-attention": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-ui-editor": "0.8.1",
-    "@dxos/debug": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-grid": "0.8.1",
-    "@dxos/react-ui-menu": "0.8.1",
-    "@dxos/react-ui-searchlist": "0.8.1",
-    "@dxos/react-ui-tag-picker": "0.8.1",
-    "@dxos/react-ui-types": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/react-ui-syntax-highlighter": "0.8.1",
-    "@dxos/schema": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@dxos/debug": "0.8.2-main.2f9c567",
+    "@dxos/echo-schema": "0.8.2-main.2f9c567",
+    "@dxos/effect": "0.8.2-main.2f9c567",
+    "@dxos/context": "0.8.2-main.2f9c567",
+    "@dxos/invariant": "0.8.2-main.2f9c567",
+    "@dxos/lit-grid": "0.8.2-main.2f9c567",
+    "@dxos/echo": "0.8.2-main.2f9c567",
+    "@dxos/keys": "0.8.2-main.2f9c567",
+    "@dxos/live-object": "0.8.2-main.2f9c567",
+    "@dxos/log": "0.8.2-main.2f9c567",
+    "@dxos/plugin-search": "0.8.2-main.2f9c567",
+    "@dxos/plugin-space": "0.8.2-main.2f9c567",
+    "@dxos/react-client": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-attention": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-editor": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-form": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-grid": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-menu": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-stack": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-searchlist": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-tag-picker": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-types": "0.8.2-main.2f9c567",
+    "@dxos/schema": "0.8.2-main.2f9c567",
+    "@dxos/util": "0.8.2-main.2f9c567"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -86,19 +88,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/test-utils": "0.8.1"
+    "@dxos/echo-signals": "0.8.2-main.2f9c567",
+    "@dxos/random": "0.8.2-main.2f9c567",
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567",
+    "@dxos/storybook-utils": "0.8.2-main.2f9c567",
+    "@dxos/test-utils": "0.8.2-main.2f9c567"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.1",
-    "@dxos/react-ui": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.2f9c567",
+    "@dxos/react-ui-theme": "0.8.2-main.2f9c567"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Table/CreateRefPanel.tsx

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import React, { useCallback, useMemo } from 'react';
 
-import { S } from '@dxos/echo-schema';
-import { create } from '@dxos/react-client/echo';
+import { live } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { type GridScopedProps, useGridContext } from '@dxos/react-ui-grid';
@@ -20,14 +20,14 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
   const space = model?.space;
   const state = modals.state.value;
 
-  const schema = useMemo<S.Schema<any> | undefined>(() => {
+  const schema = useMemo<Schema.Schema<any> | undefined>(() => {
     if (!space || state?.type !== 'createRefPanel') {
       return;
     }
 
     const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
     if (schema) {
-      const omit = S.omit<any, any, ['id']>('id');
+      const omit = Schema.omit<any, any, ['id']>('id');
       return omit(schema);
     }
   }, [space, state]);
@@ -40,7 +40,7 @@ export const CreateRefPanel = ({ model, modals, __gridScope }: GridScopedProps<C
 
       const [schema] = space.db.schemaRegistry.query({ typename: state.typename }).runSync();
       if (schema) {
-        const obj = space.db.add(create(schema, values));
+        const obj = space.db.add(live(schema, values));
         state.onCreate?.(obj);
       }
       void modals.close();

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

@@ -10,7 +10,7 @@ import React, { useMemo, useState } from 'react';
 import { FormatEnum, type JsonSchemaType } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { type SchemaPropertyDefinition } from '@dxos/schema';
 import { Testing } from '@dxos/schema/testing';
@@ -143,7 +143,7 @@ export const WithEchoSchema: StoryObj = {
       onSpaceCreated: async ({ space }) => {
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            create(Testing.Contact, {
+            live(Testing.Contact, {
               name: faker.person.fullName(),
               email: faker.internet.email(),
             }),

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

@@ -12,7 +12,7 @@ import { invariant } from '@dxos/invariant';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
-import { Filter, useQuery, useSchema, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -28,8 +28,7 @@ import { TableType } from '../../types';
 import { initializeTable } from '../../util';
 import { TableToolbar } from '../TableToolbar';
 
-// NOTE(ZaymonFC): We rely on this seed being 0 in the smoke tests.
-faker.seed(0);
+faker.seed(0); // NOTE(ZaymonFC): Required for smoke tests.
 
 /**
  * Custom hook to create and manage a test table model for storybook demonstrations.
@@ -73,7 +72,7 @@ const useTestTableModel = () => {
 
   const handleInsertRow = useCallback(() => {
     if (space && schema) {
-      space.db.add(create(schema, {}));
+      space.db.add(live(schema, {}));
     }
   }, [space, schema]);
 
@@ -222,11 +221,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         const schema = await initializeTable({ client, space, table, initialRow: false });
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            create(schema, {
+            live(schema, {
               name: faker.person.fullName(),
             }),
           );
@@ -247,17 +246,17 @@ export const StaticSchema: StoryObj = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Contact, Testing.Org],
+      types: [TableType, ViewType, Testing.Contact, Testing.Organization],
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         await initializeTable({ client, space, table, typename: Testing.Contact.typename });
 
         const factory = createObjectFactory(space.db, faker as any);
         await factory([
           { type: Testing.Contact, count: 10 },
-          { type: Testing.Org, count: 1 },
+          { type: Testing.Organization, count: 1 },
         ]);
       },
     }),
@@ -303,13 +302,13 @@ export const Tags: Meta<StoryProps> = {
         const [storedSchema] = await space.db.schemaRegistry.register([schema]);
 
         // Initialize table.
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         await initializeTable({ client, space, table, initialRow: false, typename });
 
         // Populate.
         Array.from({ length: 10 }).map(() => {
           return space.db.add(
-            create(storedSchema, {
+            live(storedSchema, {
               single: faker.helpers.arrayElement([...selectOptionIds, undefined]),
               multiple: faker.helpers.randomSubset(selectOptionIds),
             }),

package/src/components/Table/Table.tsx

@@ -19,27 +19,29 @@ import { invariant } from '@dxos/invariant';
 import { Filter } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
-import { closestCell, type DxGridElement, type DxGridPosition, type GridContentProps, Grid } from '@dxos/react-ui-grid';
+import {
+  closestCell,
+  type DxGridElement,
+  type DxGridPosition,
+  type GridContentProps,
+  Grid,
+  type DxGridPlane,
+  type DxGridPlaneRange,
+  gridSeparatorInlineEnd,
+  gridSeparatorBlockEnd,
+} from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy, safeParseInt } from '@dxos/util';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
 import { CreateRefPanel } from './CreateRefPanel';
-import { RefPanel } from './RefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 import { ModalController, type TableModel, type TablePresentation } from '../../model';
 import { translationKey } from '../../translations';
 import { tableButtons, tableControls } from '../../util';
 import { createOption, TableCellEditor, type TableCellEditorProps } from '../TableCellEditor';
 
-// NOTE(Zan): These fragments add border to inline-end and block-end of the grid using pseudo-elements.
-// These are offset by 1px to avoid double borders in planks.
-const inlineEndLine =
-  '[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator';
-const blockEndLine =
-  '[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator';
-
 //
 // Table.Root
 //
@@ -98,20 +100,17 @@ const TableMain = forwardRef<TableController, TableMainProps>(
       };
     }, [model]);
 
-    // TODO(burdon): Replace useEffect below.
-    // const getCells = useCallback<GridContentProps['getCells']>(
-    //   (range: DxGridRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
-    //   [presentation],
-    // );
+    const getCells = useCallback<NonNullable<GridContentProps['getCells']>>(
+      (range: DxGridPlaneRange, plane: DxGridPlane) => presentation?.getCells(range, plane) ?? {},
+      [presentation],
+    );
 
     useEffect(() => {
       if (!presentation || !dxGrid) {
         return;
       }
-
-      // TODO(burdon): Pass to Grid.Content?
-      dxGrid.getCells = (range, plane) => presentation.getCells(range, plane);
-    }, [presentation, dxGrid]);
+      dxGrid.getCells = getCells;
+    }, [presentation, dxGrid, getCells]);
 
     /**
      * Provides an external controller that can be called to repaint the table.
@@ -181,10 +180,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               modals.showColumnCreator();
               break;
             }
-            case 'referencedCell': {
-              modals.showReferencePanel(data.targetId, data.schemaId);
-              break;
-            }
             case 'sort': {
               model?.sorting?.toggleSort(data.fieldId);
               break;
@@ -356,7 +351,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onQuery={handleQuery}
         />
         <Grid.Content
-          className={mx('[--dx-grid-base:var(--surface-bg)]', inlineEndLine, blockEndLine)}
+          className={mx('[--dx-grid-base:var(--surface-bg)]', gridSeparatorInlineEnd, gridSeparatorBlockEnd)}
           frozen={frozen}
           // getCells={getCells}
           columns={model.columnMeta.value}
@@ -373,7 +368,6 @@ const TableMain = forwardRef<TableController, TableMainProps>(
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
         <CreateRefPanel model={model} modals={modals} />
-        <RefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },

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

@@ -5,20 +5,21 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
+import { SchemaAST } from 'effect';
 import React, { useEffect, useMemo } from 'react';
 
-import { AST, type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
+import { type BaseObject, ImmutableSchema, type BaseSchema, type HasId } from '@dxos/echo-schema';
 import { getAnnotation } from '@dxos/effect';
 import { faker } from '@dxos/random';
-import { create, makeRef, type ReactiveObject } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { createView, ViewProjection, ViewType } from '@dxos/schema';
-import { createGenerator, Testing, type ValueGenerator } from '@dxos/schema/testing';
+import { live, makeRef } from '@dxos/react-client/echo';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { DataType, createView, ViewProjection, ViewType } from '@dxos/schema';
+import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Table } from './Table';
 import { useTableModel } from '../../hooks';
-import { TablePresentation } from '../../model';
+import { type TableFeatures, TablePresentation, type TableRow } from '../../model';
 import translations from '../../translations';
 import { TableType } from '../../types';
 
@@ -30,12 +31,14 @@ const generator: ValueGenerator = faker as any;
 // TODO(burdon): Reconcile schemas types and utils (see API PR).
 // TODO(burdon): Base type for T (with id); see ECHO API PR?
 const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count: number) => {
+  const { space } = useClientProvider();
+
   const table = useMemo(() => {
-    // const { typename } = pipe(schema.ast, AST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
+    // const { typename } = pipe(schema.ast, SchemaAST.getAnnotation<TypeAnnotation>(TypeAnnotationId), Option.getOrThrow);
     const typename = schema.typename;
-    const name = getAnnotation<string>(AST.TitleAnnotationId)(schema.ast) ?? typename;
+    const name = getAnnotation<string>(SchemaAST.TitleAnnotationId)(schema.ast) ?? typename;
     const view = createView({ name, typename, jsonSchema: schema.jsonSchema });
-    return create(TableType, { view: makeRef(view) });
+    return live(TableType, { view: makeRef(view) });
   }, [schema]);
 
   const projection = useMemo(() => {
@@ -47,16 +50,24 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
     return new ViewProjection(schema.jsonSchema, table.view.target);
   }, [schema, table]);
 
-  const model = useTableModel({ table, projection, rows: [] });
+  const features = useMemo<TableFeatures>(
+    () => ({ schemaEditable: false, dataEditable: true, selection: { enabled: false } }),
+    [],
+  );
+
+  const model = useTableModel<TableRow>({ table, projection, rows: [], features });
   useEffect(() => {
-    if (!model) {
+    if (!model || !space) {
       return;
     }
 
-    const objectGenerator = createGenerator(generator, schema, { optional: true });
-    const objects: ReactiveObject<T>[] = Array.from({ length: count }).map(() => objectGenerator.createObject());
-    model.setRows(objects);
-  }, [model]);
+    const objectGenerator = createAsyncGenerator(generator, schema, { optional: true, db: space?.db });
+    void objectGenerator.createObjects(count).then((objects) => {
+      model.setRows(objects);
+    });
+  }, [model, space]);
+
+  console.log(projection?.getFieldProjections());
 
   const presentation = useMemo(() => {
     if (!model) {
@@ -71,21 +82,20 @@ const useTestModel = <T extends BaseObject & HasId>(schema: BaseSchema<T>, count
 
 const DefaultStory = () => {
   // TODO(burdon): Remove need for ImmutableSchema wrapper at API-level.
-  const orgSchema = useMemo(() => new ImmutableSchema(Testing.Org), []);
-  const { model: orgModel, presentation: orgPresentation } = useTestModel<Testing.Org>(orgSchema, 50);
+  const orgSchema = useMemo(() => new ImmutableSchema(DataType.Organization), []);
+  const { model: orgModel, presentation: orgPresentation } = useTestModel<DataType.Organization>(orgSchema, 50);
 
   // TODO(burdon): Generate links with references.
-  const contactSchema = useMemo(() => new ImmutableSchema(Testing.Contact), []);
-  const { model: contactModel, presentation: contactPresentation } = useTestModel<Testing.Contact>(contactSchema, 50);
+  const contactSchema = useMemo(() => new ImmutableSchema(DataType.Person), []);
+  const { model: contactModel, presentation: contactPresentation } = useTestModel<DataType.Person>(contactSchema, 50);
 
-  // TODO(burdon): Scrolling isn't working.
   return (
-    <div className='grow grid grid-cols-2 divide-x divide-separator'>
+    <div className='is-full bs-full grid grid-cols-2 divide-x divide-separator'>
       <Table.Root>
-        <Table.Main model={orgModel} presentation={orgPresentation} />
+        <Table.Main model={orgModel} presentation={orgPresentation} ignoreAttention />
       </Table.Root>
       <Table.Root>
-        <Table.Main model={contactModel} presentation={contactPresentation} />
+        <Table.Main model={contactModel} presentation={contactPresentation} ignoreAttention />
       </Table.Root>
     </div>
   );
@@ -97,7 +107,7 @@ const meta: Meta<typeof DefaultStory> = {
   parameters: { translations },
   decorators: [
     withClientProvider({
-      types: [TableType, ViewType, Testing.Org, Testing.Contact],
+      types: [TableType, ViewType, DataType.Organization, DataType.Person],
       createIdentity: true,
       createSpace: true,
     }),

package/src/components/TableCellEditor/TableCellEditor.stories.tsx

@@ -10,7 +10,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { ImmutableSchema, type EchoSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, create } from '@dxos/react-client/echo';
+import { Filter, useQuery, live } from '@dxos/react-client/echo';
 import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { defaultSizeRow, Grid, type GridEditing } from '@dxos/react-ui-grid';
 import { ViewProjection, ViewType } from '@dxos/schema';
@@ -95,11 +95,11 @@ const meta: Meta<StoryProps> = {
       createIdentity: true,
       createSpace: true,
       onSpaceCreated: async ({ client, space }) => {
-        const table = space.db.add(create(TableType, {}));
+        const table = space.db.add(live(TableType, {}));
         const schema = await initializeTable({ client, space, table });
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            create(schema, {
+            live(schema, {
               name: faker.person.fullName(),
             }),
           );

package/src/components/TableToolbar/TableToolbar.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   createGapSeparator,
@@ -60,7 +60,7 @@ const createTableToolbarActions = (state: TableToolbarState) => {
 };
 
 export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
-  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
+  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
   const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
   const menu = useMenuActions(actionsCreator);
 

package/src/components/testing.ts

@@ -2,25 +2,26 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
+import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { create, makeRef } from '@dxos/react-client/echo';
+import { live, makeRef } from '@dxos/react-client/echo';
 import { createView, type ViewProjection } from '@dxos/schema';
 
 import { TableType } from '../types';
 
 export const TestSchema = TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  id: S.String,
-  name: S.optional(S.String),
-  age: S.optional(S.Number),
-  active: S.optional(S.Boolean),
-  netWorth: S.optional(S.Number),
+  id: ObjectId,
+  name: Schema.optional(Schema.String),
+  age: Schema.optional(Schema.Number),
+  active: Schema.optional(Schema.Boolean),
+  netWorth: Schema.optional(Schema.Number),
 });
 
 export const createTable = (schema = TestSchema) => {
-  return create(TableType, {
+  return live(TableType, {
     view: makeRef(
       createView({
         name: 'Test',
@@ -32,7 +33,7 @@ export const createTable = (schema = TestSchema) => {
 };
 
 export const createItems = (n: number) => {
-  const { data } = create({
+  const { data } = live({
     data: Array.from({ length: n }, () => ({
       name: faker.person.fullName(),
       age: faker.number.int({ min: 20, max: 70 }),

package/src/hooks/useTableModel.ts

@@ -5,7 +5,7 @@
 import { effect } from '@preact/signals-core';
 import { useEffect, useState } from 'react';
 
-import { fullyQualifiedId, getSpace, type ReactiveObject } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, type Live } from '@dxos/react-client/echo';
 import { useSelectionActions } from '@dxos/react-ui-attention';
 import { type ViewProjection } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
@@ -16,7 +16,7 @@ import { type TableType } from '../types';
 export type UseTableModelParams<T extends TableRow = TableRow> = {
   table?: TableType;
   projection?: ViewProjection;
-  rows?: ReactiveObject<T>[];
+  rows?: Live<T>[];
   rowActions?: TableRowAction[];
   onSelectionChanged?: (selection: string[]) => void;
   onRowAction?: (actionId: string, data: T) => void;

package/src/model/modal-controller.ts

@@ -5,7 +5,7 @@
 import { signal } from '@preact/signals-core';
 import { type RefObject, type MutableRefObject } from 'react';
 
-import { type ReactiveObject } from '@dxos/live-object';
+import { type Live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 
 export type ColumnSettingsMode = { type: 'create' } | { type: 'edit'; fieldId: string };
@@ -18,7 +18,7 @@ export type ModalState =
       type: 'createRefPanel';
       typename: string;
       initialValues?: Record<string, string>;
-      onCreate?: (obj: ReactiveObject<any>) => void;
+      onCreate?: (obj: Live<any>) => void;
     }
   | { type: 'columnSettings'; mode: ColumnSettingsMode }
   | { type: 'closed' };
@@ -72,7 +72,7 @@ export class ModalController {
     typename: string,
     anchorCell: Element | null,
     initialValues?: Record<string, string>,
-    onCreate?: (obj: ReactiveObject<any>) => void,
+    onCreate?: (obj: Live<any>) => void,
   ) => {
     if (anchorCell) {
       this._triggerRef.current = anchorCell as HTMLElement;

package/src/model/table-model.test.ts

@@ -3,13 +3,14 @@
 //
 
 import { computed } from '@preact/signals-core';
+import { Schema } from 'effect';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
-import { S, TypedObject } from '@dxos/echo-schema';
+import { TypedObject } from '@dxos/echo-schema';
 import { updateCounter } from '@dxos/echo-schema/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { create, makeRef } from '@dxos/react-client/echo';
+import { live, makeRef } from '@dxos/react-client/echo';
 import { createView, ViewProjection } from '@dxos/schema';
 
 import { TableModel, type TableModelProps } from './table-model';
@@ -69,7 +70,7 @@ describe('TableModel', () => {
 
   describe('reactivity', () => {
     it('pure signals should nest', () => {
-      const signal$ = create({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
+      const signal$ = live({ arr: [{ thingInside: 1 }, { thingInside: 2 }] });
 
       const computed$ = computed(() => {
         return signal$.arr.map((row) =>
@@ -99,14 +100,14 @@ describe('TableModel', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: S.String,
-  completed: S.Boolean,
+  title: Schema.String,
+  completed: Schema.Boolean,
 }) {}
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
   const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
   const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = create(TableType, { view: makeRef(view) });
+  const table = live(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, space: undefined, view, projection, ...props });
 };