@dxos/plugin-space 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/containers/CollectionArticle/CollectionArticle.tsx

@@ -4,34 +4,24 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCollectionObjectPath, getObjectPathFromObject } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { type Collection } from '@dxos/echo';
+import { type Collection, Obj } from '@dxos/echo';
 import { ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui';
+import { Card, Toolbar } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchPanel, useSearchListResults } from '@dxos/react-ui-search';
 import { getStyles } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-/**
- * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
- */
-const useMetadataResolver = () => {
-  const allMetadata = useCapabilities(AppCapabilities.Metadata);
-  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
-};
-
 /**
  * Article view for collections.
  */
 export const CollectionArticle = ({ subject, attendableId }: AppSurface.ObjectArticleProps<Collection.Collection>) => {
   const { t } = useTranslation(meta.id);
-  const resolveMetadata = useMetadataResolver();
-  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata, attendableId);
+  const { items, handleSearch } = useCollectionItems(subject, attendableId);
 
   return (
     <SearchPanel onSearch={handleSearch}>
@@ -77,31 +67,19 @@ const ObjectTile: MosaicStackTileComponent<ObjectItem> = ({ data: item }) => {
 
   return (
     <Card.Root fullWidth role='button' classNames='cursor-pointer' onClick={handleClick}>
-      <Card.Toolbar>
-        <Card.ToolbarIconButton
-          variant='ghost'
-          label={label}
-          icon={item.icon}
-          iconOnly
-          iconClassNames={styles?.surfaceText}
-        />
+      <Card.Header>
+        <Toolbar.IconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.fg} />
         <Card.Title>{label}</Card.Title>
         <Card.Menu />
-      </Card.Toolbar>
+      </Card.Header>
     </Card.Root>
   );
 };
 
-type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
-
 /**
  * Combined hook to get collection items with search/filter support.
  */
-const useCollectionItems = (
-  collection: Collection.Collection,
-  resolveMetadata: MetadataResolver,
-  attendableId?: string,
-) => {
+const useCollectionItems = (collection: Collection.Collection, attendableId?: string) => {
   const objects = useMemo(
     () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
     [collection.objects],
@@ -110,19 +88,18 @@ const useCollectionItems = (
   const items = useMemo(
     () =>
       objects.map((obj) => {
-        const typename = Obj.getTypename(obj);
-        const metadata = typename ? resolveMetadata(typename) : {};
+        const iconAnnotation = Obj.getIcon(obj);
         const targetPath = attendableId ? getCollectionObjectPath(attendableId, obj.id) : getObjectPathFromObject(obj);
 
         return {
-          id: Obj.getDXN(obj).toString(),
+          id: Obj.getURI(obj),
           object: obj,
           targetPath,
-          icon: metadata.icon ?? 'ph--placeholder--regular',
-          iconHue: metadata.iconHue,
+          icon: iconAnnotation?.icon ?? 'ph--circle-dashed--regular',
+          iconHue: iconAnnotation?.hue,
         } satisfies ObjectItem;
       }),
-    [objects, resolveMetadata, attendableId],
+    [objects, attendableId],
   );
 
   const { results, handleSearch } = useSearchListResults({

package/src/containers/CreateObjectDialog/CreateObjectDialog.stories.tsx

@@ -14,8 +14,7 @@ import { Dialog } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type CreateObjectOption, type Metadata, CreateObjectPanel } from '#components';
-
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 const mockOptions: CreateObjectOption[] = [
   { id: 'org.dxos.type.document', label: 'Document', icon: 'ph--file-text--regular' },
@@ -60,9 +59,9 @@ const mockInputSchema = Schema.Struct({
 });
 
 const mockMetadata: Metadata = {
+  id: 'org.dxos.type.document',
   createObject: () => Effect.succeed({ id: 'mock-id', subject: [], object: {} as any }),
   inputSchema: mockInputSchema,
-  icon: 'ph--file-text--regular',
 };
 
 const meta = {

package/src/containers/CreateObjectDialog/CreateObjectDialog.tsx

@@ -2,25 +2,27 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { Capability } from '@dxos/app-framework';
 import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
-import { AppCapabilities, getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
-import { useLayout } from '@dxos/app-toolkit/ui';
-import { Collection, Database, Obj, Type } from '@dxos/echo';
+import { getPersonalSpace, LayoutOperation } from '@dxos/app-toolkit';
+import { PluginRegistryButton, useLayout } from '@dxos/app-toolkit/ui';
+import { Operation } from '@dxos/compute';
+import { Annotation, Collection, Database, Obj, Type } from '@dxos/echo';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { ViewAnnotation } from '@dxos/schema';
 
-import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from '#components';
+import { type CreateObjectOption, CreateObjectPanel, type CreateObjectPanelProps } from '#components';
 import { meta } from '#meta';
+import { SpaceCapabilities } from '#types';
 
 export const CREATE_OBJECT_DIALOG = `${meta.id}.CreateObjectDialog`;
 
@@ -43,6 +45,7 @@ export const CreateObjectDialog = ({
   const { t } = useTranslation(meta.id);
   const manager = usePluginManager();
   const operationInvoker = useOperationInvoker();
+  const { invoke } = operationInvoker;
   const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const client = useClient();
@@ -52,22 +55,43 @@ export const CreateObjectDialog = ({
 
   const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
   // TODO(wittjosiah): Support database schemas.
-  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
+  const schemas = db
+    ? db.graph.registry
+        .list()
+        .filter(Type.isType)
+        .filter((t) => !Type.isTypeKind(t))
+    : undefined;
+
+  const entriesByModule = useAtomValue(manager.capabilities.atomByModule(SpaceCapabilities.CreateObjectEntry));
+
+  const { createObjectEntries, pluginNameByEntryId } = useMemo(() => {
+    const entries: SpaceCapabilities.CreateObjectEntry[] = [];
+    const pluginByEntryId = new Map<string, string>();
+    const plugins = manager.getPlugins();
+    for (const [moduleId, contributions] of Object.entries(entriesByModule)) {
+      const owningPlugin = plugins.find((plugin) => plugin.modules.some((module) => module.id === moduleId));
+      for (const entry of contributions) {
+        entries.push(entry);
+        if (owningPlugin) {
+          pluginByEntryId.set(entry.id, owningPlugin.meta.name);
+        }
+      }
+    }
+    return { createObjectEntries: entries, pluginNameByEntryId: pluginByEntryId };
+  }, [entriesByModule, manager]);
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
-    (id) => {
-      const metadata = manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .find(({ id: entryId }) => entryId === id)?.metadata;
-      return metadata?.createObject ? (metadata as Metadata) : undefined;
-    },
-    [manager],
+    (id) => createObjectEntries.find((entry) => entry.id === id),
+    [createObjectEntries],
   );
 
+  // The type selector is shown while no type has been resolved; the registry button is only relevant then.
+  const showTypeSelector = !(typename && resolve(typename));
+
   const viewTypenames = useMemo(() => {
     const set = new Set<string>();
     for (const schema of schemas ?? []) {
-      if (ViewAnnotation.get(schema).pipe(Option.getOrElse(() => false))) {
+      if (ViewAnnotation.has(schema)) {
         set.add(Type.getTypename(schema));
       }
     }
@@ -76,16 +100,21 @@ export const CreateObjectDialog = ({
 
   const options = useMemo<CreateObjectOption[]>(
     () =>
-      manager.capabilities
-        .getAll(AppCapabilities.Metadata)
-        .filter((entry) => entry.metadata?.createObject)
+      createObjectEntries
         .filter((entry) => (views === true ? viewTypenames.has(entry.id) : true))
-        .map((entry) => ({
-          id: entry.id,
-          label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
-          icon: entry.metadata?.icon,
-        })),
-    [manager, views, viewTypenames, t],
+        .map((entry) => {
+          const type = schemas?.find((s) => Type.getTypename(s) === entry.id);
+          const schema = type && Type.getSchema(type);
+          const iconAnnotation = schema ? Annotation.IconAnnotation.get(schema).pipe(Option.getOrUndefined) : undefined;
+          return {
+            id: entry.id,
+            label: t('typename.label', { ns: entry.id, defaultValue: entry.id }),
+            icon: iconAnnotation?.icon,
+            iconHue: iconAnnotation?.hue,
+            plugin: pluginNameByEntryId.get(entry.id),
+          };
+        }),
+    [createObjectEntries, views, viewTypenames, schemas, t, pluginNameByEntryId],
   );
 
   const handleCreateObject = useCallback<NonNullable<CreateObjectPanelProps['onCreateObject']>>(
@@ -101,22 +130,18 @@ export const CreateObjectDialog = ({
 
         const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
         invariant(db, 'Missing database');
-        const result = yield* metadata.createObject(data, {
-          db,
-          target,
-          targetNodeId,
-        });
+        const result = yield* metadata.createObject(data, { db, target, targetNodeId });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (result.subject.length > 0 && shouldNavigate(result.object)) {
           if (layout.mode === 'multi') {
-            yield* operationInvoker.invoke(LayoutOperation.Set, {
+            yield* invoke(LayoutOperation.Set, {
               subject: [...result.subject],
             });
-            yield* operationInvoker.invoke(LayoutOperation.Expose, {
+            yield* invoke(LayoutOperation.Expose, {
               subject: result.subject[0],
             });
           } else {
-            yield* operationInvoker.invoke(LayoutOperation.Open, {
+            yield* invoke(LayoutOperation.Open, {
               subject: [...result.subject],
               navigation: 'immediate',
             });
@@ -129,7 +154,7 @@ export const CreateObjectDialog = ({
         Effect.provideService(Operation.Service, operationInvoker),
         runAndForwardErrors,
       ),
-    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker, layout.mode],
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, invoke, layout.mode],
   );
 
   return (
@@ -141,7 +166,7 @@ export const CreateObjectDialog = ({
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
-          <Dialog.CloseIconButton ref={closeRef} />
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
       <Dialog.Body>
@@ -158,6 +183,13 @@ export const CreateObjectDialog = ({
           onTypenameChange={setTypename}
         />
       </Dialog.Body>
+      {showTypeSelector && (
+        <Dialog.ActionBar>
+          <Dialog.Close asChild>
+            <PluginRegistryButton />
+          </Dialog.Close>
+        </Dialog.ActionBar>
+      )}
     </Dialog.Content>
   );
 };

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.stories.tsx

@@ -5,13 +5,14 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { CreateSpaceDialog } from './CreateSpaceDialog';
 
 const DefaultStory = () => (
@@ -29,7 +30,7 @@ const meta = {
   decorators: [
     withTheme(),
     withPluginManager({
-      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+      plugins: [ProcessManagerPlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {

package/src/containers/CreateSpaceDialog/CreateSpaceDialog.tsx

@@ -50,7 +50,7 @@ export const CreateSpaceDialog = () => {
       <Dialog.Header>
         <Dialog.Title>{t('create-space-dialog.title')}</Dialog.Title>
         <Dialog.Close asChild>
-          <Dialog.CloseIconButton ref={closeRef} />
+          <Dialog.ActionIconButton action='close' ref={closeRef} />
         </Dialog.Close>
       </Dialog.Header>
       <Dialog.Body>

package/src/containers/{ObjectRenamePopover/ObjectRenamePopover.tsx → EntityRenamePopover/EntityRenamePopover.tsx}

@@ -6,33 +6,33 @@ import React, { useCallback, useRef, useState } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { Obj } from '@dxos/echo';
+import { Entity } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { Button, Input, useTranslation } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-export const OBJECT_RENAME_POPOVER = `${meta.id}.ObjectRenamePopover`;
+export const ENTITY_RENAME_POPOVER = `${meta.id}.EntityRenamePopover`;
 
-export const ObjectRenamePopover = ({ object }: { object: Obj.Unknown }) => {
+export const EntityRenamePopover = ({ entity }: { entity: Entity.Unknown }) => {
   const { t } = useTranslation(meta.id);
   const doneButton = useRef<HTMLButtonElement>(null);
-  const [name, setName] = useState(Obj.getLabel(object));
+  const [name, setName] = useState(Entity.getLabel(entity));
   const { invokePromise } = useOperationInvoker();
 
   const handleDone = useCallback(() => {
     try {
-      name && Obj.change(object, () => Obj.setLabel(object, name));
+      name && Entity.update(entity, () => Entity.setLabel(entity, name));
     } catch (err) {
-      log.error('Failed to rename object', { err });
+      log.error('Failed to rename entity', { err });
     }
     void invokePromise(LayoutOperation.UpdatePopover, { anchorId: '', state: false });
-  }, [object, name, invokePromise]);
+  }, [entity, name, invokePromise]);
 
   return (
-    <div role='none' className='p-2 flex gap-2'>
-      <div role='none' className='flex-1'>
+    <div className='p-2 flex gap-2'>
+      <div className='flex-1'>
         <Input.Root>
           <Input.Label srOnly>{t('object-name.label')}</Input.Label>
           <Input.TextInput

package/src/containers/EntityRenamePopover/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { EntityRenamePopover as default } from './EntityRenamePopover';

package/src/containers/ImportSpaceDialog/ImportSpaceDialog.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+import { FileUploader } from 'react-drag-drop-files';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
+import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+import { SpaceOperation } from '#operations';
+
+export const ImportSpaceDialog = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      const contents = new Uint8Array(await file.arrayBuffer());
+      const { data: result } = await invokePromise(SpaceOperation.ImportSpace, {
+        archive: { filename: file.name, contents },
+      });
+      await invokePromise(LayoutOperation.UpdateDialog, { state: false });
+      if (result?.space) {
+        await invokePromise(LayoutOperation.SwitchWorkspace, { subject: getSpacePath(result.space.id) });
+      }
+    },
+    [invokePromise],
+  );
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('import-space-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.ActionIconButton action='close' />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        <p className='my-4'>{t('import-space-dialog.description')}</p>
+        <FileUploader
+          types={['json', 'tar']}
+          classes='block my-4 p-8 border-2 border-dashed border-neutral-500/50 rounded-sm flex items-center justify-center gap-2 cursor-pointer'
+          dropMessageStyle={{ border: 'none', backgroundColor: '#EEE' }}
+          handleChange={(file: File) => {
+            void handleFile(file);
+          }}
+        >
+          <Icon icon='ph--file-plus--duotone' size={8} />
+          <span>{t('import-space-dialog.upload.label')}</span>
+        </FileUploader>
+      </Dialog.Body>
+      <Dialog.ActionBar>
+        <Dialog.Close asChild>
+          <Button variant='primary'>{t('cancel.label')}</Button>
+        </Dialog.Close>
+      </Dialog.ActionBar>
+    </Dialog.Content>
+  );
+};

package/src/containers/ImportSpaceDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ImportSpaceDialog as default } from './ImportSpaceDialog';

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -6,11 +6,12 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { JoinDialog } from './JoinDialog';
 
 const DefaultStory = () => (

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -9,7 +9,7 @@ import { LayoutOperation, getSpacePath } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Trigger } from '@dxos/async';
 import { Graph } from '@dxos/plugin-graph';
-import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';

package/src/containers/MembersContainer/MembersContainer.tsx

@@ -2,12 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Option from 'effect/Option';
 import React, { type Dispatch, type SetStateAction, useMemo, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { RootCollectionAnnotation } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Collection, Obj } from '@dxos/echo';
+import { Annotation, Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useConfig } from '@dxos/react-client';
 import { useSpaceInvitations } from '@dxos/react-client/echo';
@@ -62,7 +64,8 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
   };
 
   // TODO(wittjosiah): Track which was the most recently viewed object.
-  const target = space.properties[Collection.Collection.typename]?.target?.objects[0]?.target;
+  const target = Annotation.get(space.properties, RootCollectionAnnotation).pipe(Option.getOrUndefined)?.target
+    ?.objects[0]?.target;
 
   const inviteActions = useMemo(
     (): Record<string, ActionMenuItem> => ({
@@ -77,7 +80,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
             type: Invitation.Type.INTERACTIVE,
             authMethod: Invitation.AuthMethod.SHARED_SECRET,
             multiUse: false,
-            target: target && Obj.getDXN(target).toString(),
+            target: target && Obj.getURI(target),
           });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(
@@ -97,7 +100,7 @@ export const MembersContainer = ({ space, createInvitationUrl }: MembersContaine
             type: Invitation.Type.DELEGATED,
             authMethod: Invitation.AuthMethod.KNOWN_PUBLIC_KEY,
             multiUse: true,
-            target: target && Obj.getDXN(target).toString(),
+            target: target && Obj.getURI(target),
           });
           if (invitation && config.values.runtime?.app?.env?.DX_ENVIRONMENT !== 'production') {
             const subscription: ZenObservable.Subscription = (invitation as CancellableInvitationObservable).subscribe(
@@ -209,7 +212,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
     <>
       <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content] my-2 gap-2'>
-        <div role='none' className='w-full aspect-square relative text-description'>
+        <div className='w-full aspect-square relative text-description'>
           <QR
             rounding={100}
             backgroundColor='transparent'

package/src/containers/ObjectCardStack/ObjectCardStack.tsx

@@ -4,9 +4,8 @@
 
 import React, { forwardRef, useState } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { type View } from '@dxos/echo';
-import { Filter, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, Obj, type View } from '@dxos/echo';
+import { useQuery, useType } from '@dxos/react-client/echo';
 import { Card, Message, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { useSelected } from '@dxos/react-ui-attention';
 import { ObjectForm } from '@dxos/react-ui-form';
@@ -28,15 +27,15 @@ export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
   const { t } = useTranslation(meta.id);
   const db = Obj.getDatabase(view);
   const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-  const schema = useSchema(db, typename);
+  const type = useType(db, typename);
 
-  const queriedObjects = useQuery(db, schema ? Filter.type(schema) : Filter.nothing());
+  const queriedObjects = useQuery(db, type ? Filter.type(type) : Filter.nothing());
   const selectedRows = useSelected(objectId, 'multi');
   const selectedObjects = selectedRows.map((id) => queriedObjects.find((obj) => obj.id === id)).filter(isNonNullable);
 
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
 
-  if (!schema) {
+  if (!type) {
     return null;
   }
 
@@ -66,7 +65,7 @@ export const ObjectCardStack = forwardRef<HTMLDivElement, ObjectCardStackProps>(
                     Tile={({ ...props }) => (
                       <Mosaic.Tile {...props}>
                         <Card.Root>
-                          <ObjectForm object={props.data} schema={schema} />
+                          <ObjectForm object={props.data} type={type} />
                         </Card.Root>
                       </Mosaic.Tile>
                     )}

package/src/containers/RecordArticle/RecordArticle.stories.tsx

@@ -9,16 +9,18 @@ import React from 'react';
 import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { PreviewPlugin } from '@dxos/plugin-preview';
+import { Filter } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Organization, Person } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { RecordArticle } from './RecordArticle';
 
 random.seed(0);