@dxos/react-ui-table 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/components/TableToolbar/TableToolbar.tsx

@@ -4,12 +4,13 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   createGapSeparator,
   createMenuAction,
   type MenuAction,
+  type MenuActionHandler,
   MenuProvider,
   ToolbarMenu,
   useMenuActions,
@@ -26,18 +27,18 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
 export type TableToolbarProps = ThemedClassName<
-  TableToolbarState & { onAction: (action: TableToolbarAction) => void; attendableId?: string }
+  TableToolbarState & { onAction?: MenuActionHandler<TableToolbarAction>; attendableId?: string }
 >;
 
-const createTableToolbarActions = (state: TableToolbarState, onAction: (action: TableToolbarAction) => void) => {
-  const add = createMenuAction<TableToolbarActionProperties>('add-row', () => onAction(add), {
-    type: 'add-row' as const,
+const createTableToolbarActions = (state: TableToolbarState) => {
+  const add = createMenuAction<TableToolbarActionProperties>('add-row', {
+    type: 'add-row',
     icon: 'ph--plus--regular',
     label: ['add row', { ns: translationKey }],
     testId: 'table.toolbar.add-row',
   });
-  const save = createMenuAction<TableToolbarActionProperties>('save-view', () => onAction(save), {
-    type: 'save-view' as const,
+  const save = createMenuAction<TableToolbarActionProperties>('save-view', {
+    type: 'save-view',
     icon: 'ph--floppy-disk--regular',
     label: ['save view label', { ns: translationKey }],
     testId: 'table.toolbar.save-view',
@@ -45,8 +46,8 @@ const createTableToolbarActions = (state: TableToolbarState, onAction: (action:
     hidden: !state.viewDirty,
   });
   const gap = createGapSeparator();
-  const comment = createMenuAction('comment', () => onAction(comment), {
-    type: 'comment' as const,
+  const comment = createMenuAction('comment', {
+    type: 'comment',
     icon: 'ph--chat-text--regular',
     label: ['create comment', { ns: translationKey }],
     testId: 'table.toolbar.comment',
@@ -59,12 +60,12 @@ const createTableToolbarActions = (state: TableToolbarState, onAction: (action:
 };
 
 export const TableToolbar = ({ classNames, viewDirty, attendableId, onAction }: TableToolbarProps) => {
-  const state = useMemo(() => live<TableToolbarState>({ viewDirty }), []);
-  const actionsCreator = useCallback(() => createTableToolbarActions(state, onAction), [state, onAction]);
+  const state = useMemo(() => create<TableToolbarState>({ viewDirty }), []);
+  const actionsCreator = useCallback(() => createTableToolbarActions(state), [state]);
   const menu = useMenuActions(actionsCreator);
 
   return (
-    <MenuProvider {...menu} attendableId={attendableId}>
+    <MenuProvider {...menu} attendableId={attendableId} onAction={onAction as MenuActionHandler}>
       <ToolbarMenu classNames={classNames} />
     </MenuProvider>
   );

package/src/components/testing.ts

@@ -2,26 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
 import { useEffect } from 'react';
 
-import { setValue, toJsonSchema, TypeEnum, TypedObject, FormatEnum, ObjectId } from '@dxos/echo-schema';
+import { setValue, toJsonSchema, S, TypeEnum, TypedObject, FormatEnum } from '@dxos/echo-schema';
 import { faker } from '@dxos/random';
-import { live, makeRef } from '@dxos/react-client/echo';
+import { create, 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: ObjectId,
-  name: Schema.optional(Schema.String),
-  age: Schema.optional(Schema.Number),
-  active: Schema.optional(Schema.Boolean),
-  netWorth: Schema.optional(Schema.Number),
+  id: S.String,
+  name: S.optional(S.String),
+  age: S.optional(S.Number),
+  active: S.optional(S.Boolean),
+  netWorth: S.optional(S.Number),
 });
 
 export const createTable = (schema = TestSchema) => {
-  return live(TableType, {
+  return create(TableType, {
     view: makeRef(
       createView({
         name: 'Test',
@@ -33,7 +32,7 @@ export const createTable = (schema = TestSchema) => {
 };
 
 export const createItems = (n: number) => {
-  const { data } = live({
+  const { data } = create({
     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 Live } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, type ReactiveObject } 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?: Live<T>[];
+  rows?: ReactiveObject<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 Live } from '@dxos/live-object';
+import { type ReactiveObject } 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: Live<any>) => void;
+      onCreate?: (obj: ReactiveObject<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: Live<any>) => void,
+    onCreate?: (obj: ReactiveObject<any>) => void,
   ) => {
     if (anchorCell) {
       this._triggerRef.current = anchorCell as HTMLElement;

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

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

package/src/model/table-model.ts

@@ -8,7 +8,7 @@ import { type Space } from '@dxos/client/echo';
 import { Resource } from '@dxos/context';
 import { type FieldSortType, FormatEnum, getValue, setValue, type JsonProp } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { isLiveObject, makeRef } from '@dxos/live-object';
+import { isReactiveObject, makeRef } from '@dxos/live-object';
 import { formatForEditing, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -21,7 +21,6 @@ import { type ViewType, type ViewProjection } from '@dxos/schema';
 import { type SelectionMode, SelectionModel } from './selection-model';
 import { TableSorting } from './table-sorting';
 import { touch } from '../util';
-import { extractTagIds } from '../util/tag';
 
 // TODO(burdon): Use schema types.
 export type TableRow = Record<JsonProp, any> & { id: string };
@@ -343,28 +342,12 @@ export class TableModel<T extends TableRow = TableRow> extends Resource {
       case FormatEnum.Ref: {
         // TODO(ZaymonFC): This get's called an additional time by the cell editor onBlur, but with the cell editors
         //   plain string value. Maybe onBlur should be called with the actual value?
-        if (isLiveObject(value)) {
+        if (isReactiveObject(value)) {
           setValue(this._rows.value[rowIdx], field.path, makeRef(value));
         }
         break;
       }
 
-      case FormatEnum.SingleSelect: {
-        const ids = extractTagIds(value);
-        if (ids && ids.length > 0) {
-          setValue(this._rows.value[rowIdx], field.path, ids[0]);
-        }
-        break;
-      }
-
-      case FormatEnum.MultiSelect: {
-        const ids = extractTagIds(value);
-        if (ids) {
-          setValue(this._rows.value[rowIdx], field.path, ids);
-        }
-        break;
-      }
-
       default: {
         setValue(
           this._rows.value[rowIdx],

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

@@ -2,11 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
 import { describe, expect, it, beforeEach } from 'vitest';
 
-import { TypedObject } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import { S, TypedObject } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
 import { createView, ViewProjection } from '@dxos/schema';
 
@@ -23,7 +22,7 @@ describe('TablePresentation', () => {
 
     beforeEach(async () => {
       updateCount = 0;
-      ({ data } = live({
+      ({ data } = create({
         data: [
           { col1: 'A', col2: 1, col3: true },
           { col1: 'B', col2: 2, col3: false },
@@ -90,14 +89,14 @@ describe('TablePresentation', () => {
 });
 
 class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
-  title: Schema.String,
-  completed: Schema.Boolean,
+  title: S.String,
+  completed: S.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 = live(TableType, { view: makeRef(view) });
+  const table = create(TableType, { view: makeRef(view) });
   return new TableModel({ id: table.id, view, projection, ...props });
 };

package/src/model/table-presentation.ts

@@ -3,9 +3,8 @@
 //
 
 import { signal } from '@preact/signals-core';
-import { isNotNullable } from 'effect/Predicate';
 
-import { FormatEnum, getDXN, getValue, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
   type DxGridPlane,
@@ -85,10 +84,6 @@ export class TablePresentation<T extends TableRow = TableRow> {
             return '';
           }
 
-          if (props.type === 'array') {
-            return '';
-          }
-
           switch (props.format) {
             case FormatEnum.Boolean:
             case FormatEnum.SingleSelect:
@@ -126,52 +121,13 @@ export class TablePresentation<T extends TableRow = TableRow> {
         cell.className = mx(classes.flat());
       }
 
-      if (props.type === TypeEnum.Array) {
-        const targetArray = getValue(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
-          // that can be used to render tags.
-          // TODO(ZaymonFC): Move to util.
-          const getLabel = (value: any) => {
-            // If the value is falsy, return undefined
-            // If the object is an array, check for 'name' property
-            // If the object is a primitive type (string, number, boolean) stringify
-            // If the object is an array return 'Array'
-            if (!value) {
-              return undefined;
-            }
-            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return 'Array';
-            }
-            if (typeof value === 'object' && value.name) {
-              return value.name;
-            }
-            if (typeof value === 'object' && value.value) {
-              return `${value.value}`;
-            }
-            return 'Object';
-          };
-
-          const tags = targetArray
-            .map(getLabel)
-            .filter(isNotNullable)
-            .map((title) => {
-              return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
-            })
-            .join('');
-
-          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-        }
-      }
-
       if (props.format === FormatEnum.Ref && props.referenceSchema) {
         const targetObj = getValue(obj, field.path)?.target;
         if (targetObj) {
-          const dxn = getDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag ref=${dxn} class="dx-button block is-6 pli-[3px] plb-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
+          cell.accessoryHtml = tableButtons.referencedCell.render({
+            targetId: targetObj.id as any as string,
+            schemaId: props.referenceSchema,
+          });
         }
       }
 
@@ -212,7 +168,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
             .join(' ');
 
           if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
+            cell.accessoryHtml = tags;
           }
         }
       }
@@ -252,7 +208,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface',
+        className: '!bg-gridHeader',
       };
     }
 
@@ -295,7 +251,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
     if (!this.model.features.selection.enabled || this.model.selection.selectionMode === 'single') {
       return {
         [toPlaneCellIndex({ col: 0, row: 0 })]: {
-          className: '!bg-toolbarSurface',
+          className: '!bg-gridHeader',
           readonly: true,
           value: '',
         },
@@ -309,7 +265,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
           header: true,
           checked: this.model.selection.allRowsSeleted.value,
         }),
-        className: '!bg-toolbarSurface',
+        className: '!bg-gridHeader',
         readonly: true,
         value: '',
       },
@@ -324,7 +280,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
               disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
-        className: '!bg-toolbarSurface',
+        className: '!bg-gridHeader',
         readonly: true,
         value: '',
       },

package/src/types/table.ts

@@ -2,28 +2,20 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
-
+import { EchoObject, Expando, LabelAnnotationId, ObjectId, Ref, S } from '@dxos/echo-schema';
 // import { ThreadType } from '@dxos/plugin-space/types';
-import { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';
 import { ViewType } from '@dxos/schema';
 
-export const TableSchema = Schema.Struct({
+export const TableSchema = S.Struct({
   id: ObjectId,
-  name: Schema.optional(Schema.String),
-  view: Schema.optional(Ref(ViewType)),
+  name: S.optional(S.String),
+  view: S.optional(Ref(ViewType)),
   // TODO(burdon): Document why threads is included here?
-  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),
+  threads: S.optional(S.Array(Ref(Expando /* ThreadType */))),
 }).annotations({
   // TODO(burdon): Move annotation to property.
   [LabelAnnotationId]: 'name',
 });
 
-// TODO(burdon): Move out of react-ui-xxx.
-export const TableType = TableSchema.pipe(
-  EchoObject({
-    typename: 'dxos.org/type/Table',
-    version: '0.1.0',
-  }),
-);
-export interface TableType extends Schema.Schema.Type<typeof TableType> {}
+export const TableType = TableSchema.pipe(EchoObject({ typename: 'dxos.org/type/Table', version: '0.1.0' }));
+export interface TableType extends S.Schema.Type<typeof TableType> {}

package/src/util/dynamic-table.ts

@@ -2,11 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
-
-import { getTypename, toJsonSchema } from '@dxos/echo-schema';
-import type { JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
-import { live, makeRef } from '@dxos/live-object';
+import type { BaseSchema, JsonSchemaType, SortDirectionType } from '@dxos/echo-schema';
+import { create, makeRef } from '@dxos/live-object';
 import {
   createView,
   getSchemaFromPropertyDefinitions,
@@ -30,7 +27,7 @@ export type TablePropertyDefinition = SchemaPropertyDefinition & Partial<Propert
  * @deprecated
  */
 // TODO(burdon): Remove variance.
-export const getBaseSchema = ({
+export const getBaseSchems = ({
   typename,
   properties,
   jsonSchema,
@@ -39,13 +36,13 @@ export const getBaseSchema = ({
   typename?: string;
   properties?: TablePropertyDefinition[];
   jsonSchema?: JsonSchemaType;
-  schema?: Schema.Schema.AnyNoContext;
+  schema?: BaseSchema;
 }): { typename: string; jsonSchema: JsonSchemaType } => {
   if (typename && properties) {
     const schema = getSchemaFromPropertyDefinitions(typename, properties);
     return { typename: schema.typename, jsonSchema: schema.jsonSchema };
   } else if (schema) {
-    return { typename: getTypename(schema)!, jsonSchema: toJsonSchema(schema) };
+    return { typename: schema.typename, jsonSchema: schema.jsonSchema };
   } else if (typename && jsonSchema) {
     return { typename, jsonSchema };
   } else {
@@ -69,7 +66,7 @@ export const makeDynamicTable = ({
     ...(properties && { fields: properties.map((property) => property.name) }),
   });
 
-  const table = live(TableType, { name: 'dynamic-table', view: makeRef(view) });
+  const table = create(TableType, { name: 'dynamic-table', view: makeRef(view) });
   const projection = new ViewProjection(jsonSchema, view);
   if (properties && view.fields) {
     setProperties(view, projection, properties);

package/src/util/index.ts

@@ -7,4 +7,3 @@ export * from './signals';
 export * from './table';
 export * from './table-buttons';
 export * from './table-controls';
-export * from './schema';

package/src/util/table-buttons.ts

@@ -15,6 +15,7 @@ export const BUTTON_IDENTIFIERS: { [K in TableButton]: string } = {
 type ButtonData =
   | { type: 'columnSettings'; fieldId: string }
   | { type: 'newColumn'; disabled?: boolean }
+  | { type: 'referencedCell'; schemaId: string; targetId: string }
   | { type: 'rowMenu'; rowIndex: number }
   | { type: 'sort'; fieldId: string; direction?: 'asc' | 'desc' };
 
@@ -75,6 +76,27 @@ const columnSettingsButton = {
   }),
 } as const;
 
+const referencedCellButton = {
+  attr: BUTTON_IDENTIFIERS.referencedCell,
+  icon: 'ph--link-simple-horizontal--regular',
+  render: ({ targetId, schemaId }: Omit<Extract<ButtonData, { type: 'referencedCell' }>, 'type'>) => {
+    return createButton({
+      attr: BUTTON_IDENTIFIERS.referencedCell,
+      icon: referencedCellButton.icon,
+      data: {
+        'data-target-id': targetId,
+        'data-schema-id': schemaId,
+      },
+      testId: 'table-ref-cell-button',
+    });
+  },
+  getData: (el: HTMLElement): Extract<ButtonData, { type: 'referencedCell' }> => ({
+    type: 'referencedCell',
+    targetId: el.getAttribute('data-target-id')!,
+    schemaId: el.getAttribute('data-schema-id')!,
+  }),
+} as const;
+
 const rowMenuButton = {
   attr: BUTTON_IDENTIFIERS.rowMenu,
   icon: 'ph--dots-three--regular',
@@ -121,6 +143,7 @@ const sortButton = {
 export const tableButtons = {
   addColumn: addColumnButton,
   columnSettings: columnSettingsButton,
+  referencedCell: referencedCellButton,
   rowMenu: rowMenuButton,
   sort: sortButton,
 } as const;

package/src/util/table.ts

@@ -2,20 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, SchemaAST } from 'effect';
-
 import {
+  AST,
   type EchoSchema,
   Format,
   FormatEnum,
   type JsonPath,
   type JsonProp,
-  Ref,
+  S,
   TypedObject,
   TypeEnum,
 } from '@dxos/echo-schema';
 import { type Client, PublicKey } from '@dxos/react-client';
-import { live, type Space } from '@dxos/react-client/echo';
+import { create, makeRef, type Space } from '@dxos/react-client/echo';
 import { createFieldId, createView, getSchemaProperties, ViewProjection, type ViewType } from '@dxos/schema';
 
 import { type TableType } from '../types';
@@ -35,16 +34,20 @@ export const initializeTable = async ({
   table,
   typename,
   initialRow = true,
-}: InitialiseTableProps): Promise<Schema.Schema.AnyNoContext> => {
+}: InitialiseTableProps): Promise<S.Schema.AnyNoContext> => {
   if (typename) {
     const schema = await space.db.graph.getSchemaByTypename(typename, space.db);
     if (!schema) {
       throw new Error(`Schema not found: ${typename}`);
     }
 
-    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
+    // We need to get the schema properties here.
+    // For now, only simple types and refs, not compound types are going to be supported.
+    const fields = getSchemaProperties(schema.ast)
+      .filter((prop) => prop.format !== FormatEnum.Ref)
+      .map((prop) => prop.name);
 
-    table.view = Ref.make(
+    table.view = makeRef(
       createView({
         // TODO(ZaymonFC): Don't hardcode name?
         name: 'View',
@@ -59,7 +62,7 @@ export const initializeTable = async ({
     const [schema] = await space.db.schemaRegistry.register([ContactSchema]);
     const fields = ContactFields;
 
-    table.view = Ref.make(
+    table.view = makeRef(
       createView({
         name: 'View',
         typename: schema.typename,
@@ -72,7 +75,7 @@ export const initializeTable = async ({
 
     if (initialRow) {
       // TODO(burdon): Last (first) row should not be in db and should be managed by the model.
-      space.db.add(live(schema, {}));
+      space.db.add(create(schema, {}));
     }
 
     return schema;
@@ -83,10 +86,10 @@ const ContactSchema = TypedObject({
   typename: `example.com/type/${PublicKey.random().truncate()}`,
   version: '0.1.0',
 })({
-  name: Schema.optional(Schema.String).annotations({ [SchemaAST.TitleAnnotationId]: 'Name' }),
-  active: Schema.optional(Schema.Boolean),
-  email: Schema.optional(Format.Email),
-  salary: Schema.optional(Format.Currency()).annotations({ [SchemaAST.TitleAnnotationId]: 'Salary' }),
+  name: S.optional(S.String).annotations({ [AST.TitleAnnotationId]: 'Name' }),
+  active: S.optional(S.Boolean),
+  email: S.optional(Format.Email),
+  salary: S.optional(Format.Currency()).annotations({ [AST.TitleAnnotationId]: 'Salary' }),
 });
 
 const ContactFields = ['name', 'email', 'salary', 'active'];

package/dist/lib/browser/chunk-PFFO5LYM.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";AAIA,SAASA,cAAc;AAGvB,SAASC,mBAAmBC,UAAUC,KAAKC,SAASC,kBAAkB;AACtE,SAASC,gBAAgB;AAElB,IAAMC,cAAcC,OAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,OAAOK,SAASL,OAAOM,MAAM;EACnCC,MAAMP,OAAOK,SAASG,IAAIC,QAAAA,CAAAA;;EAE1BC,SAASV,OAAOK,SAASL,OAAOW,MAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,YAAY;;EAEb,CAACC,iBAAAA,GAAoB;AACvB,CAAA;AAGO,IAAMC,YAAYhB,YAAYiB,KACnCC,WAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["Schema", "LabelAnnotationId", "ObjectId", "Ref", "Expando", "EchoObject", "ViewType", "TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "EchoObject", "typename", "version"]
-}

package/dist/lib/node/chunk-VREQOYRW.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/table.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\n// import { ThreadType } from '@dxos/plugin-space/types';\nimport { LabelAnnotationId, ObjectId, Ref, Expando, EchoObject } from '@dxos/echo-schema';\nimport { ViewType } from '@dxos/schema';\n\nexport const TableSchema = Schema.Struct({\n  id: ObjectId,\n  name: Schema.optional(Schema.String),\n  view: Schema.optional(Ref(ViewType)),\n  // TODO(burdon): Document why threads is included here?\n  threads: Schema.optional(Schema.Array(Ref(Expando /* ThreadType */))),\n}).annotations({\n  // TODO(burdon): Move annotation to property.\n  [LabelAnnotationId]: 'name',\n});\n\n// TODO(burdon): Move out of react-ui-xxx.\nexport const TableType = TableSchema.pipe(\n  EchoObject({\n    typename: 'dxos.org/type/Table',\n    version: '0.1.0',\n  }),\n);\nexport interface TableType extends Schema.Schema.Type<typeof TableType> {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAIA,oBAAuB;AAGvB,yBAAsE;AACtE,oBAAyB;AAElB,IAAMA,cAAcC,qBAAOC,OAAO;EACvCC,IAAIC;EACJC,MAAMJ,qBAAOK,SAASL,qBAAOM,MAAM;EACnCC,MAAMP,qBAAOK,aAASG,wBAAIC,sBAAAA,CAAAA;;EAE1BC,SAASV,qBAAOK,SAASL,qBAAOW,UAAMH;IAAII;;EAAsB,CAAA,CAAA;AAClE,CAAA,EAAGC,YAAY;;EAEb,CAACC,oCAAAA,GAAoB;AACvB,CAAA;AAGO,IAAMC,YAAYhB,YAAYiB,SACnCC,+BAAW;EACTC,UAAU;EACVC,SAAS;AACX,CAAA,CAAA;",
-  "names": ["TableSchema", "Schema", "Struct", "id", "ObjectId", "name", "optional", "String", "view", "Ref", "ViewType", "threads", "Array", "Expando", "annotations", "LabelAnnotationId", "TableType", "pipe", "EchoObject", "typename", "version"]
-}