@dxos/react-ui-table 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

package/src/components/Table/Table.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type Schema } from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
+import * as String from 'effect/String';
 import React, {
   type MouseEvent,
   type PropsWithChildren,
@@ -15,8 +16,8 @@ import React, {
   useState,
 } from 'react';
 
-import { type Client } from '@dxos/react-client';
 // TODO(wittjosiah): Remove dependency on react-client.
+import { type Client } from '@dxos/react-client';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
   type DxGridElement,
@@ -34,11 +35,10 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { type InsertRowResult, ModalController, type TableModel, type TablePresentation } from '../../model';
 import { tableButtons, tableControls } from '../../util';
-import { type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
+import { type OnCreateHandler, type TableCellEditorProps, TableValueEditor } from '../TableCellEditor';
 
 import { ColumnActionsMenu } from './ColumnActionsMenu';
 import { ColumnSettings } from './ColumnSettings';
-import { CreateRefPanel } from './CreateRefPanel';
 import { RowActionsMenu } from './RowActionsMenu';
 
 const columnDefault = { grid: { minSize: 80, maxSize: 640 } };
@@ -80,15 +80,17 @@ export type TableController = {
 export type TableMainProps = {
   model?: TableModel;
   presentation?: TablePresentation;
-  schema?: Schema.AnyNoContext;
+  schema?: Schema.Schema.AnyNoContext;
   client?: Client;
   // TODO(burdon): Rename since attention isn't a useful concept here? Standardize across other components. Pass property into useAttention.
   ignoreAttention?: boolean;
+  onCreate?: OnCreateHandler;
   onRowClick?: (row: any) => void;
+  testId?: string;
 };
 
 const TableMain = forwardRef<TableController, TableMainProps>(
-  ({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
+  ({ model, presentation, ignoreAttention, schema, client, onCreate, onRowClick, testId }, forwardedRef) => {
     const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
     const { hasAttention } = useAttention(model?.id ?? 'table');
     const modals = useMemo(() => new ModalController(), []);
@@ -275,7 +277,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
     const handleFocus = useCallback<NonNullable<TableCellEditorProps['onFocus']>>(
       (increment, delta, cell) => {
         if (dxGrid && model) {
-          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1) {
+          if (cell?.plane === 'grid' && cell?.row >= model.getRowCount() - 1 && increment !== 'col') {
             handleInsertRowResult(draftRowCount < 1 ? model.insertRow() : 'final');
           } else if (cell?.plane === 'frozenRowsEnd' && increment === 'row') {
             handleSaveDraftRow(cell.row);
@@ -320,7 +322,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
               void navigator.clipboard.readText().then((clipboardText) => {
                 try {
                   // Attempt to set the cell's content to clipboard content
-                  model.setCellData(cell, clipboardText);
+                  model.setCellData(cell, String.trim(clipboardText).replace(/[\n\r]+/, ' '));
                   handleSave();
                 } catch {
                   // If validation fails, emit a DxEditRequest event with initialContent from clipboard
@@ -356,6 +358,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
             try {
               model.setCellData(cell, undefined);
               event.preventDefault();
+              handleSave();
             } catch {
               // Delete results in a validation error; don’t prevent default so dx-grid can emit an edit request.
             }
@@ -404,6 +407,7 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           schema={schema}
           onFocus={handleFocus}
           onSave={handleSave}
+          onCreate={onCreate}
           client={client}
         />
         <Grid.Content
@@ -419,12 +423,12 @@ const TableMain = forwardRef<TableController, TableMainProps>(
           onClick={handleGridClick}
           onKeyDownCapture={handleKeyDown}
           onWheelCapture={handleWheel}
+          {...(testId && { 'data-testid': testId })}
           ref={setDxGrid}
         />
         <RowActionsMenu model={model} modals={modals} />
         <ColumnActionsMenu model={model} modals={modals} />
         <ColumnSettings model={model} modals={modals} onNewColumn={handleNewColumn} />
-        <CreateRefPanel model={model} modals={modals} />
       </Grid.Root>
     );
   },

package/src/components/TableCellEditor/FormCellEditor.tsx

@@ -2,34 +2,37 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Filter, Obj } from '@dxos/echo';
-import { Ref, type TypeAnnotation, getValue } from '@dxos/echo-schema';
+import { FormatEnum, Ref, type TypeAnnotation, getValue } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { getSnapshot } from '@dxos/live-object';
 import { type Client } from '@dxos/react-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { Popover } from '@dxos/react-ui';
 import { Form, type FormProps } from '@dxos/react-ui-form';
-import { cellQuery, parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
+import { parseCellIndex, useGridContext } from '@dxos/react-ui-grid';
 import { type FieldProjection } from '@dxos/schema';
-import { getDeep, isNotFalsy, setDeep } from '@dxos/util';
+import { getDeep, isTruthy, setDeep } from '@dxos/util';
 
 import { type ModalController, type TableModel } from '../../model';
 import { translationKey } from '../../translations';
 import { narrowSchema } from '../../util';
 
-type FormCellEditorProps = {
+export type OnCreateHandler = (schema: Schema.Schema.AnyNoContext, values: any) => Parameters<typeof Ref.make>[0];
+
+export type FormCellEditorProps = {
   fieldProjection: FieldProjection;
   model?: TableModel;
   schema?: Schema.Schema.AnyNoContext;
   onSave?: () => void;
+  onCreate?: OnCreateHandler;
   client?: Client;
   modals?: ModalController;
   __gridScope: any;
-} & Omit<FormProps<any>, 'values' | 'schema'>;
+} & Omit<FormProps<any>, 'values' | 'schema' | 'onCreate'>;
 
 const createOptionLabel = ['create new object label', { ns: translationKey }] as [string, { ns: string }];
 
@@ -40,6 +43,7 @@ export const FormCellEditor = ({
   onSave,
   client,
   modals,
+  onCreate,
   __gridScope,
   ...formProps
 }: FormCellEditorProps) => {
@@ -48,7 +52,7 @@ export const FormCellEditor = ({
   const anchorRef = useRef<HTMLButtonElement | null>(null);
 
   const getSchema = useCallback(
-    (typeAnnotation: TypeAnnotation) => {
+    (typeAnnotation: Pick<TypeAnnotation, 'typename'>) => {
       const space = getSpace(model!.view);
       invariant(space);
 
@@ -76,7 +80,7 @@ export const FormCellEditor = ({
               label: getValue(obj, fieldProjection.field.referencePath!) || obj.id.toString(),
             };
           })
-          .filter(isNotFalsy);
+          .filter(isTruthy);
       }
 
       return [];
@@ -116,36 +120,6 @@ export const FormCellEditor = ({
     [fieldProjection.field.path, onSave, contextEditing, originalRow],
   );
 
-  const handleCreate = useCallback(
-    (object: any) => {
-      const ref = Ref.make(object);
-      const path = fieldProjection.field.path;
-      setDeep(originalRow, [path], ref);
-      contextEditing?.cellElement?.focus();
-      setEditing(null);
-      setLocalEditing(false);
-      onSave?.();
-    },
-    [fieldProjection.field.path, onSave, contextEditing, originalRow],
-  );
-
-  const handleCreateFromQuery = useCallback(
-    async (typeAnnotation: TypeAnnotation, query: string) => {
-      if (model && modals && contextEditing?.index) {
-        setLocalEditing(false);
-        modals.openCreateRef(
-          typeAnnotation.typename,
-          document.querySelector(cellQuery(contextEditing.index, gridId)),
-          {
-            [fieldProjection.field.referencePath!]: query,
-          },
-          handleCreate,
-        );
-      }
-    },
-    [model, modals, client, contextEditing?.index, gridId, fieldProjection, handleSave],
-  );
-
   useEffect(() => {
     if (contextEditing && contextEditing.cellElement) {
       anchorRef.current = (contextEditing.cellElement as HTMLElement).querySelector(
@@ -176,6 +150,38 @@ export const FormCellEditor = ({
     setLocalEditing(nextOpen);
   }, []);
 
+  const createSchema = useMemo(() => {
+    if (fieldProjection.props.format === FormatEnum.Ref && fieldProjection.props.referenceSchema) {
+      const { schema: refSchema } = getSchema({
+        typename: fieldProjection.props.referenceSchema,
+      });
+      if (!refSchema) {
+        return null;
+      }
+      const omit = Schema.omit<any, any, ['id']>('id');
+      return omit(refSchema);
+    }
+    return null;
+  }, [fieldProjection.props.format, fieldProjection.props.referenceSchema, getSchema]);
+
+  const handleCreate = useCallback(
+    (values: any) => {
+      if (schema && onCreate) {
+        const objectWithId = onCreate(schema, values);
+        if (objectWithId) {
+          const ref = Ref.make(objectWithId);
+          const path = fieldProjection.field.path;
+          setDeep(originalRow, [path], ref);
+        }
+      }
+      contextEditing?.cellElement?.focus();
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    },
+    [fieldProjection.field.path, onSave, contextEditing, originalRow, createSchema, onCreate],
+  );
+
   if (!editing) {
     return null;
   }
@@ -194,9 +200,13 @@ export const FormCellEditor = ({
               onSave={handleSave}
               {...formProps}
               onQueryRefOptions={handleQueryRefOptions}
-              onCreateFromQuery={handleCreateFromQuery}
-              createOptionIcon='ph--plus--regular'
-              createOptionLabel={createOptionLabel}
+              {...(createSchema && {
+                onCreate: handleCreate,
+                createSchema,
+                createInitialValuePath: fieldProjection.field.referencePath,
+                createOptionIcon: 'ph--plus--regular',
+                createOptionLabel,
+              })}
             />
           </Popover.Viewport>
         </Popover.Content>

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

@@ -2,23 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useMemo, useState } from 'react';
+import React from 'react';
 
 import { Obj } from '@dxos/echo';
-import { type EchoSchema, isMutable } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
-import { Filter, useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Grid, type GridEditing, defaultRowSize } from '@dxos/react-ui-grid';
-import { DataType, createDefaultSchema } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { DataType } from '@dxos/schema';
 
-import { useTableModel } from '../../hooks';
-import { type TableFeatures } from '../../model';
+import { useTestTableModel } from '../../testing';
 import { translations } from '../../translations';
 import { Table } from '../../types';
 
@@ -29,39 +23,16 @@ type StoryProps = {
 };
 
 const DefaultStory = ({ editing }: StoryProps) => {
-  const { space } = useClientProvider();
-  invariant(space);
-
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
-  const [schema, setSchema] = useState<EchoSchema>();
-  useEffect(() => {
-    if (space && views.length && !view) {
-      const view = views[0];
-      setView(view);
-      setSchema(space.db.schemaRegistry.getSchema(view.query.typename!));
-    }
-  }, [space, views, view]);
-
-  const features: Partial<TableFeatures> = useMemo(
-    () => ({
-      selection: { enabled: true, mode: 'multiple' },
-      dataEditable: true,
-      schemaEditable: schema && isMutable(schema),
-    }),
-    [schema],
-  );
+  const { model, view } = useTestTableModel();
 
-  const model = useTableModel({ view, schema: schema?.jsonSchema, features });
-
-  if (!model || !schema || !view) {
+  if (!model || !view) {
     return <div />;
   }
 
   return (
     <div className='flex w-[300px] border border-separator' style={{ height: defaultRowSize }}>
       <Grid.Root id='test' editing={editing}>
-        <TableCellEditor model={model} schema={schema} />
+        <TableCellEditor model={model} schema={DataType.Task} />
       </Grid.Root>
     </div>
   );
@@ -71,19 +42,18 @@ const meta = {
   title: 'ui/react-ui-table/TableCellEditor',
   component: DefaultStory,
   render: DefaultStory,
-  parameters: { translations, layout: 'centered' },
   decorators: [
+    withTheme,
     withClientProvider({
-      types: [DataType.View, Table.Table],
+      types: [DataType.View, DataType.Task, Table.Table],
       createIdentity: true,
       createSpace: true,
-      onSpaceCreated: async ({ client, space }) => {
-        const schema = createDefaultSchema();
-        const { view } = await Table.makeView({ client, space, typename: schema.typename });
+      onCreateSpace: async ({ client, space }) => {
+        const { view } = await Table.makeView({ client, space, typename: DataType.Task.typename });
         space.db.add(view);
         Array.from({ length: 10 }).forEach(() => {
           space.db.add(
-            Obj.make(schema, {
+            Obj.make(DataType.Task, {
               title: faker.person.fullName(),
               status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
               description: faker.lorem.sentence(),
@@ -92,9 +62,11 @@ const meta = {
         });
       },
     }),
-    withTheme,
-    withLayout(),
   ],
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/TableCellEditor/TableCellEditor.tsx

@@ -4,16 +4,14 @@
 
 import { type Completion } from '@codemirror/autocomplete';
 import { EditorView } from '@codemirror/view';
-import { type Schema } from 'effect/Schema';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { debounce } from '@dxos/async';
 import type { Client } from '@dxos/client';
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { type DxGridAxis, type DxGridPosition } from '@dxos/lit-grid';
-import { useThemeContext } from '@dxos/react-ui';
-import { createMarkdownExtensions } from '@dxos/react-ui-editor';
 import {
   type EditorBlurHandler,
   type EditorKeyEvent,
@@ -25,13 +23,12 @@ import {
   parseCellIndex,
   useGridContext,
 } from '@dxos/react-ui-grid';
-import { createLinks, tagPicker } from '@dxos/react-ui-tag-picker';
 import { type FieldProjection } from '@dxos/schema';
 
 import { type ModalController, type TableModel } from '../../model';
 
 import { CellValidationMessage } from './CellValidationMessage';
-import { FormCellEditor } from './FormCellEditor';
+import { FormCellEditor, type OnCreateHandler } from './FormCellEditor';
 
 /**
  * Option to create new object/value.
@@ -41,8 +38,9 @@ export type QueryResult = Pick<Completion, 'label'> & { data: any };
 export type TableCellEditorProps = {
   model?: TableModel;
   modals?: ModalController;
-  schema?: Schema.AnyNoContext;
+  schema?: Schema.Schema.AnyNoContext;
   onFocus?: (axis?: DxGridAxis, delta?: -1 | 0 | 1, cell?: DxGridPosition) => void;
+  onCreate?: OnCreateHandler;
   onSave?: () => void;
   client?: Client;
 };
@@ -56,6 +54,7 @@ export const TableValueEditor = ({
   schema,
   onFocus,
   onSave,
+  onCreate,
   client,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
@@ -86,6 +85,7 @@ export const TableValueEditor = ({
         schema={schema}
         __gridScope={__gridScope}
         onSave={onSave}
+        onCreate={onCreate}
         client={client}
         modals={modals}
       />
@@ -96,7 +96,7 @@ export const TableValueEditor = ({
   return <TableCellEditor model={model} modals={modals} onFocus={onFocus} onSave={onSave} __gridScope={__gridScope} />;
 };
 
-const editorSlots = { scroller: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
+const editorSlots = { scroll: { className: '!plb-[--dx-grid-cell-editor-padding-block]' } };
 
 export const TableCellEditor = ({
   model,
@@ -105,9 +105,8 @@ export const TableCellEditor = ({
   onSave,
   __gridScope,
 }: GridScopedProps<TableCellEditorProps>) => {
-  const { id: gridId, editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
+  const { editing, setEditing } = useGridContext('TableCellEditor', __gridScope);
   const suppressNextBlur = useRef(false);
-  const { themeMode } = useThemeContext();
   const [validationError, setValidationError] = useState<string | null>(null);
   const [validationVariant, setValidationVariant] = useState<'error' | 'warning'>('error');
 
@@ -174,7 +173,6 @@ export const TableCellEditor = ({
       }
 
       const cell = parseCellIndex(editing.index);
-
       if (value !== undefined) {
         // Pre-commit validation check.
         const result = await model.validateCellData(cell, value);
@@ -205,71 +203,26 @@ export const TableCellEditor = ({
     [model, editing, onFocus, fieldProjection, setEditing, onSave],
   );
 
-  const extension = useMemo(() => {
+  const extensions = useMemo(() => {
     if (!fieldProjection) {
       return [];
     }
 
-    const extension = [
+    const extensions = [
       editorKeys({
         onClose: handleClose,
         ...(editing?.initialContent && { onNav: handleClose }),
       }),
     ];
-
-    const format = fieldProjection.props.format;
-
-    if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
-      // TODO(ZaymonFC): Reconcile this with the TagPicker component?
-      // Add markdown extensions needed by tag picker.
-      extension.push(createMarkdownExtensions({ themeMode }));
-
-      const options = fieldProjection.props.options || [];
-
-      const mode = format === FormatEnum.SingleSelect ? ('single-select' as const) : ('multi-select' as const);
-
-      extension.push(
-        tagPicker({
-          mode,
-          keymap: false,
-          onSearch: (text, selectedIds) => {
-            return options
-              .filter(
-                (option) =>
-                  selectedIds.indexOf(option.id) === -1 &&
-                  (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase())),
-              )
-              .map((option) => ({
-                id: option.id,
-                label: option.title,
-                hue: option.color as any,
-              }));
-          },
-          onUpdate: (ids) => {
-            if (model && editing) {
-              if (ids.length === 0) {
-                return;
-              }
-              if (mode === 'single-select') {
-                void handleEnter(ids[0]);
-              } else {
-                void handleEnter(ids);
-              }
-            }
-          },
-        }),
-      );
-    }
-
-    // Add validation extension to handle content changes
+    // Add validation extension to handle content changes.
     if (model && editing) {
-      extension.push(
+      extensions.push(
         EditorView.updateListener.of(
           debounce((update) => {
             const content = update.state.doc.toString();
             const cell = parseCellIndex(editing.index);
 
-            // Perform validation on content change
+            // Perform validation on content change.
             void model.validateCellData(cell, content).then((result) => {
               if (result.valid) {
                 setValidationError(null);
@@ -283,60 +236,12 @@ export const TableCellEditor = ({
       );
     }
 
-    return extension;
-  }, [model, modals, editing, fieldProjection, handleClose, themeMode]);
+    return extensions;
+  }, [model, modals, editing, fieldProjection, handleClose]);
 
   const getCellContent = useCallback<GridCellEditorProps['getCellContent']>(() => {
     if (model && editing) {
       const cell = parseCellIndex(editing.index);
-      const { col } = cell;
-      const field = model.projection.fields[col];
-      const fieldProjection = model.projection.getFieldProjection(field.id);
-
-      if (
-        fieldProjection?.props.format === FormatEnum.SingleSelect ||
-        fieldProjection?.props.format === FormatEnum.MultiSelect
-      ) {
-        const value = model.getCellData(cell);
-
-        if (value !== undefined) {
-          const options = fieldProjection.props.options || [];
-
-          if (fieldProjection.props.format === FormatEnum.MultiSelect) {
-            const tagItems = value
-              .split(',')
-              .map((id: string) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color as any,
-                  };
-                }
-                return undefined;
-              })
-              .filter((item: any): item is { id: any; label: string; hue: any } => item !== undefined);
-
-            return createLinks(tagItems);
-          } else {
-            const option = options.find((o) => o.id === value);
-
-            if (option) {
-              const tagItem = {
-                id: value,
-                label: option.title,
-                hue: option.color as any,
-              };
-
-              return createLinks([tagItem]);
-            }
-          }
-        }
-
-        return '';
-      }
-
       const value = model.getCellData(cell);
       return value !== undefined ? String(value) : '';
     }
@@ -345,7 +250,7 @@ export const TableCellEditor = ({
   return (
     <>
       <CellValidationMessage validationError={validationError} variant={validationVariant} __gridScope={__gridScope} />
-      <GridCellEditor extension={extension} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
+      <GridCellEditor extensions={extensions} getCellContent={getCellContent} onBlur={handleBlur} slots={editorSlots} />
     </>
   );
 };

package/src/components/TableCellEditor/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './TableCellEditor';
+export { type OnCreateHandler } from './FormCellEditor';

package/src/components/TableToolbar/TableToolbar.tsx

@@ -30,6 +30,8 @@ export type TableToolbarActionType = 'add-row' | 'comment' | 'save-view';
 
 type TableToolbarState = Partial<{ viewDirty: boolean }>;
 
+// TODO(burdon): Radix style layout.
+
 export type TableToolbarProps = ThemedClassName<
   TableToolbarState & {
     onAdd: () => void;
@@ -73,6 +75,7 @@ const createTableToolbarActions = ({
       nodes.push(...custom.nodes);
       edges.push(...custom.edges);
     }
+
     return {
       nodes,
       edges,

package/src/components/testing.ts

@@ -2,10 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import { useEffect } from 'react';
 
-import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo-schema';
+import { FormatEnum, ObjectId, TypeEnum, TypedObject, setValue } from '@dxos/echo/internal';
 import { live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { type ProjectionModel } from '@dxos/schema';

package/src/hooks/useAddRow.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import { useCallback } from 'react';
 
 import { type Space } from '@dxos/client/echo';

package/src/hooks/useTableModel.ts

@@ -6,7 +6,7 @@ import { effect } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 import { useEffect, useMemo, useState } from 'react';
 
-import { type JsonSchemaType } from '@dxos/echo-schema';
+import { type JsonSchemaType } from '@dxos/echo/internal';
 import { type Live } from '@dxos/live-object';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useSelected, useSelectionActions } from '@dxos/react-ui-attention';