@dxos/plugin-preview 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.c351d160a8",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,47 +28,48 @@
     "src"
   ],
   "dependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/app-graph": "0.8.4-main.bc674ce",
-    "@dxos/client": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/effect": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/keys": "0.8.4-main.bc674ce",
-    "@dxos/lit-ui": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-deck": "0.8.4-main.bc674ce",
-    "@dxos/plugin-attention": "0.8.4-main.bc674ce",
-    "@dxos/plugin-space": "0.8.4-main.bc674ce",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-menu": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-table": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/schema": "0.8.4-main.bc674ce",
-    "@dxos/ui-editor": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/types": "0.8.4-main.bc674ce"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@dxos/app-framework": "0.8.4-main.c351d160a8",
+    "@dxos/app-toolkit": "0.8.4-main.c351d160a8",
+    "@dxos/app-graph": "0.8.4-main.c351d160a8",
+    "@dxos/async": "0.8.4-main.c351d160a8",
+    "@dxos/client": "0.8.4-main.c351d160a8",
+    "@dxos/effect": "0.8.4-main.c351d160a8",
+    "@dxos/keys": "0.8.4-main.c351d160a8",
+    "@dxos/echo": "0.8.4-main.c351d160a8",
+    "@dxos/lit-ui": "0.8.4-main.c351d160a8",
+    "@dxos/log": "0.8.4-main.c351d160a8",
+    "@dxos/operation": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-attention": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-client": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-space": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-deck": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-menu": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-form": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-table": "0.8.4-main.c351d160a8",
+    "@dxos/react-client": "0.8.4-main.c351d160a8",
+    "@dxos/types": "0.8.4-main.c351d160a8",
+    "@dxos/schema": "0.8.4-main.c351d160a8",
+    "@dxos/ui-editor": "0.8.4-main.c351d160a8",
+    "@dxos/ui-theme": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-editor": "0.8.4-main.c351d160a8",
+    "@dxos/util": "0.8.4-main.c351d160a8"
   },
   "devDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/echo-db": "0.8.4-main.bc674ce",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-components": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.c351d160a8",
+    "@dxos/echo-db": "0.8.4-main.c351d160a8",
+    "@dxos/plugin-testing": "0.8.4-main.c351d160a8",
+    "@dxos/react-ui-components": "0.8.4-main.c351d160a8",
+    "@dxos/storybook-utils": "0.8.4-main.c351d160a8"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3"
   },

package/src/PreviewPlugin.tsx

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { Organization, Person } from '@dxos/types';
 
 import { PreviewPopover, ReactSurface } from './capabilities';
@@ -10,12 +11,12 @@ import { meta } from './meta';
 import { translations } from './translations';
 
 export const PreviewPlugin = Plugin.define(meta).pipe(
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addSchemaModule({ schema: [Person.Person, Organization.Organization], id: 'schema' }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addSchemaModule({ schema: [Person.Person, Organization.Organization], id: 'schema' }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
     id: 'preview-popover',
-    activatesOn: Common.ActivationEvent.Startup,
+    activatesOn: ActivationEvents.Startup,
     activate: PreviewPopover,
   }),
   Plugin.make,

package/src/capabilities/preview-popover/preview-popover.ts

@@ -4,10 +4,12 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation, getSpaceIdFromPath } from '@dxos/app-toolkit';
 import { addEventListener } from '@dxos/async';
 import { type Client } from '@dxos/client';
-import { type Space, parseId } from '@dxos/client/echo';
+import { type Space } from '@dxos/client/echo';
+import { Obj } from '@dxos/echo';
 import { DXN } from '@dxos/keys';
 import { log } from '@dxos/log';
 import { ClientCapabilities } from '@dxos/plugin-client';
@@ -19,10 +21,10 @@ const customEventOptions = { capture: true, passive: false };
 const handlePreviewLookup = async (
   client: Client,
   defaultSpace: Space,
-  { ref, label }: PreviewLinkRef,
+  { dxn, label }: PreviewLinkRef,
 ): Promise<PreviewLinkTarget | null> => {
   try {
-    const object = await defaultSpace.db.makeRef(DXN.parse(ref)).load();
+    const object = await defaultSpace.db.makeRef(DXN.parse(dxn)).load();
     return { label, object };
   } catch {
     return null;
@@ -35,20 +37,31 @@ export default Capability.makeModule(
     const capabilities = yield* Capability.Service;
 
     // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.
-    const handleAnchorActivate = async ({ refId, label, trigger, kind, title, side, props }: DxAnchorActivate) => {
-      const { invokePromise } = capabilities.get(Common.Capability.OperationInvoker);
+    const handleAnchorActivate = async ({
+      dxn,
+      label,
+      trigger,
+      kind = 'card',
+      title: titleProp,
+      side,
+      props,
+    }: DxAnchorActivate) => {
+      const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
       const client = capabilities.get(ClientCapabilities.Client);
-      const registry = capabilities.get(Common.Capability.AtomRegistry);
-      const [layoutAtom] = capabilities.getAll(Common.Capability.Layout);
+      const registry = capabilities.get(Capabilities.AtomRegistry);
+      const [layoutAtom] = capabilities.getAll(AppCapabilities.Layout);
       const layout = registry.get(layoutAtom);
-      const { spaceId } = parseId(layout.workspace);
+      const spaceId = getSpaceIdFromPath(layout.workspace);
       const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
-      const result = await handlePreviewLookup(client, space, { ref: refId, label });
+      const result = await handlePreviewLookup(client, space, { dxn, label });
       if (!result) {
         return;
       }
 
-      await invokePromise(Common.LayoutOperation.UpdatePopover, {
+      const title = titleProp ?? Obj.getLabel(result.object);
+
+      await invokePromise(LayoutOperation.UpdatePopover, {
+        subjectRef: dxn,
         subject: result.object,
         state: true,
         variant: 'virtual',
@@ -69,9 +82,9 @@ export default Capability.makeModule(
         customEventOptions,
       );
     } else {
-      log.warn('No default view found');
+      log.warn('no default view found');
     }
 
-    return Capability.contributes(Common.Capability.Null, null, () => Effect.sync(() => cleanup?.()));
+    return Capability.contributes(Capabilities.Null, null, () => Effect.sync(() => cleanup?.()));
   }),
 );

package/src/capabilities/react-surface/react-surface.tsx

@@ -5,54 +5,64 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { Surface } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
-import { Organization, Person, Project, Task } from '@dxos/types';
+import { Organization, Person, Pipeline, Task } from '@dxos/types';
 
 import { FormCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../../cards';
 import { meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
+    Capability.contributes(Capabilities.ReactSurface, [
       //
       // Specific schema types.
       // TODO(burdon): Create helpers and factor out.
       //
 
-      Common.createSurface<{ subject: Person.Person }>({
-        id: `${meta.id}/schema-popover--contact`,
+      Surface.create<{ subject: Person.Person }>({
+        id: `${meta.id}.schema-popover--contact`,
         role: 'card--content',
         position: 'hoist',
         filter: (data): data is { subject: Person.Person } => Obj.instanceOf(Person.Person, data.subject),
         component: ({ data, role }) => {
-          return <PersonCard role={role} subject={data.subject} />;
+          return (
+            <>
+              <PersonCard role={role} subject={data.subject} />
+              <Surface.Surface role='related' data={data} limit={1} />
+            </>
+          );
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/schema-popover--organization`,
+      Surface.create({
+        id: `${meta.id}.schema-popover--organization`,
         role: 'card--content',
         position: 'hoist',
         filter: (data): data is { subject: Organization.Organization } =>
           Obj.instanceOf(Organization.Organization, data.subject),
         component: ({ data, role }) => {
-          return <OrganizationCard role={role} subject={data.subject} />;
+          return (
+            <>
+              <OrganizationCard role={role} subject={data.subject} />
+              <Surface.Surface role='related' data={data} limit={1} />
+            </>
+          );
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/schema-popover--project`,
+      Surface.create({
+        id: `${meta.id}.schema-popover--project`,
         role: 'card--content',
         position: 'hoist',
-        filter: (data): data is { subject: Project.Project } => Obj.instanceOf(Project.Project, data.subject),
+        filter: (data): data is { subject: Pipeline.Pipeline } => Obj.instanceOf(Pipeline.Pipeline, data.subject),
         component: ({ data, role }) => {
           return <ProjectCard role={role} subject={data.subject} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/schema-popover--task`,
+      Surface.create({
+        id: `${meta.id}.schema-popover--task`,
         role: 'card--content',
         position: 'hoist',
         filter: (data): data is { subject: Task.Task } => Obj.instanceOf(Task.Task, data.subject),
@@ -65,8 +75,8 @@ export default Capability.makeModule(() =>
       // Fallback for any object.
       //
 
-      Common.createSurface({
-        id: `${meta.id}/fallback-popover`,
+      Surface.create({
+        id: `${meta.id}.fallback-popover`,
         role: 'card--content',
         position: 'fallback',
         filter: (data): data is { subject: Obj.Unknown; projection?: ProjectionModel } => Obj.isObject(data.subject),
@@ -75,17 +85,17 @@ export default Capability.makeModule(() =>
         },
       }),
 
-      Common.createSurface({
-        id: `${meta.id}/section`,
+      Surface.create({
+        id: `${meta.id}.section`,
         role: ['section'],
         position: 'fallback',
         filter: (data): data is { subject: Obj.Unknown } => Obj.isObject(data.subject),
         component: ({ data }) => {
           return (
-            <div role='none' className='flex is-full justify-center'>
-              <div role='none' className='pbs-2 pbe-2 card-min-width card-max-width'>
+            <div role='none' className='flex w-full justify-center'>
+              <div role='none' className='pt-2 pb-2 dx-card-min-width dx-card-max-width'>
                 <Card.Root>
-                  <Surface role='card--content' data={data} limit={1} />
+                  <Surface.Surface role='card--content' data={data} limit={1} />
                 </Card.Root>
               </div>
             </div>

package/src/cards/FormCard.tsx

@@ -2,34 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { type SurfaceComponentProps, useOperationInvoker } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { type JsonPath, splitJsonPath } from '@dxos/effect';
-import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Card, useTranslation } from '@dxos/react-ui';
 import { Form, omitId } from '@dxos/react-ui-form';
-import { Card } from '@dxos/react-ui-mosaic';
 import { type ProjectionModel } from '@dxos/schema';
 import { descriptionMessage, mx } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 
 export const FormCard = ({ subject, projection }: SurfaceComponentProps & { projection?: ProjectionModel }) => {
-  const { invokePromise } = useOperationInvoker();
-  const schema = Obj.getSchema(subject);
   const { t } = useTranslation(meta.id);
-
-  const handleNavigate = useCallback(async () => {
-    await invokePromise(Common.LayoutOperation.UpdatePopover, { state: false, anchorId: '' });
-    await invokePromise(Common.LayoutOperation.Open, { subject: [Obj.getDXN(subject).toString()] });
-  }, [invokePromise, subject]);
-
-  if (!schema) {
-    // TODO(burdon): Use Alert.
-    return <p className={mx(descriptionMessage)}>{t('unable to create preview message')}</p>;
-  }
+  const echoSchema = Obj.getSchema(subject);
+  const schema = useMemo(() => echoSchema && omitId(echoSchema), [echoSchema]);
 
   const handleSave = useCallback((values: any, { changed }: { changed: Record<string, boolean> }) => {
     const paths = Object.keys(changed).filter((path) => changed[path]);
@@ -42,22 +30,19 @@ export const FormCard = ({ subject, projection }: SurfaceComponentProps & { proj
     });
   }, []);
 
-  const label = Obj.getLabel(subject) ?? Obj.getTypename(subject) ?? t('unable to create preview message');
+  if (!schema) {
+    return <p className={mx(descriptionMessage)}>{t('unable to create preview message')}</p>;
+  }
 
   return (
-    <Card.Root id={subject.id}>
-      <Card.Heading classNames='flex items-center'>
-        {label}
-        <span className='grow' />
-        <IconButton iconOnly icon='ph--arrow-right--regular' label={t('open object label')} onClick={handleNavigate} />
-      </Card.Heading>
-      <Form.Root schema={omitId(schema)} projection={projection} values={subject} autoSave onSave={handleSave}>
+    <Card.Content>
+      <Form.Root schema={schema} projection={projection} values={subject} autoSave onSave={handleSave}>
         <Form.Viewport>
           <Form.Content>
             <Form.FieldSet />
           </Form.Content>
         </Form.Viewport>
       </Form.Root>
-    </Card.Root>
+    </Card.Content>
   );
 };

package/src/cards/OrganizationCard.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { Card } from '@dxos/react-ui-mosaic';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Card } from '@dxos/react-ui';
 import { type Organization } from '@dxos/types';
 
 export const OrganizationCard = ({ subject }: SurfaceComponentProps<Organization.Organization>) => {

package/src/cards/PersonCard.tsx

@@ -4,19 +4,19 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Avatar } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 import { type Person } from '@dxos/types';
 
 export const PersonCard = ({ subject }: SurfaceComponentProps<Person.Person>) => {
   const { image, organization: { target: organization } = {}, emails = [] } = subject;
 
   return (
-    <Avatar.Root>
-      <Card.Content>
+    <Card.Content>
+      <Avatar.Root>
         {image && (
-          <Card.Row className='plb-1'>
+          <Card.Row className='py-1'>
             <Avatar.Content
               imgSrc={image}
               icon='ph--user--regular'
@@ -36,12 +36,12 @@ export const PersonCard = ({ subject }: SurfaceComponentProps<Person.Person>) =>
         )}
         {emails.map(({ value }) => (
           <Card.Row key={value} icon='ph--at--regular'>
-            <Card.Text truncate className='text-primaryText'>
+            <Card.Text truncate className='text-primary-text'>
               {value}
             </Card.Text>
           </Card.Row>
         ))}
-      </Card.Content>
-    </Avatar.Root>
+      </Avatar.Root>
+    </Card.Content>
   );
 };

package/src/cards/ProjectCard.tsx

@@ -4,13 +4,13 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
-import { Card } from '@dxos/react-ui-mosaic';
-import { type Project } from '@dxos/types';
+import { Card } from '@dxos/react-ui';
+import { type Pipeline } from '@dxos/types';
 
-export const ProjectCard = ({ subject }: SurfaceComponentProps<Project.Project>) => {
-  const { name, image, description } = subject;
+export const ProjectCard = ({ subject }: SurfaceComponentProps<Pipeline.Pipeline>) => {
+  const { image, description } = subject;
 
   return (
     <Card.Content>

package/src/cards/TaskCard.tsx

@@ -5,9 +5,9 @@
 import * as SchemaAST from 'effect/SchemaAST';
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 import { Task } from '@dxos/types';
 
 export const TaskCard = ({ subject }: SurfaceComponentProps<Task.Task>) => {
@@ -16,7 +16,7 @@ export const TaskCard = ({ subject }: SurfaceComponentProps<Task.Task>) => {
 
   return (
     <Card.Content>
-      <Card.Heading classNames='min-is-0 flex-1 truncate'>{title}</Card.Heading>
+      <Card.Heading classNames='min-w-0 flex-1 truncate'>{title}</Card.Heading>
       {statusOption && (
         <span className='dx-tag' data-hue={statusOption.color}>
           {statusOption.title}

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/preview',
+  id: 'org.dxos.plugin.preview',
   name: 'Preview',
   description: trim`
     Rich preview panel for viewing object content without opening full editors.

package/src/stories/Card.stories.tsx

@@ -8,9 +8,9 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { type Organization, type Person, type Project, type Task } from '@dxos/types';
+import { type Organization, type Person, type Pipeline, type Task } from '@dxos/types';
 
-import { OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
+import { FormCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
 import { translations } from '../translations';
 
 import { DefaultStory, createOrganization, createPerson, createProject, createTask } from './testing';
@@ -18,23 +18,31 @@ import { DefaultStory, createOrganization, createPerson, createProject, createTa
 faker.seed(999);
 
 const meta = {
-  title: 'plugins/plugin-preview/Card',
+  title: 'plugins/plugin-preview/cards/Card',
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ layout: 'column', scroll: true }),
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({ plugins: corePlugins() }),
   ],
   parameters: {
-    translations,
     layout: 'fullscreen',
+    translations,
   },
   tags: ['cards'],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
+export const _Form: StoryObj<typeof DefaultStory<Person.Person>> = {
+  args: {
+    Component: FormCard,
+    createObject: createPerson,
+    image: true,
+  },
+};
+
 export const _Person: StoryObj<typeof DefaultStory<Person.Person>> = {
   args: {
     Component: PersonCard,
@@ -51,7 +59,7 @@ export const _Organization: StoryObj<typeof DefaultStory<Organization.Organizati
   },
 };
 
-export const _Project: StoryObj<typeof DefaultStory<Project.Project>> = {
+export const _Project: StoryObj<typeof DefaultStory<Pipeline.Pipeline>> = {
   args: {
     Component: ProjectCard,
     createObject: createProject,

package/src/stories/testing.tsx

@@ -4,12 +4,12 @@
 
 import React, { type FC, useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Obj, Ref } from '@dxos/echo';
 import { faker } from '@dxos/random';
-import { Card } from '@dxos/react-ui-mosaic';
-import { CardContainer } from '@dxos/react-ui-mosaic/testing';
-import { Organization, Person, Project, Task } from '@dxos/types';
+import { Card } from '@dxos/react-ui';
+import { CardContainer, type CardContainerProps } from '@dxos/react-ui-mosaic/testing';
+import { Organization, Person, Pipeline, Task } from '@dxos/types';
 
 export type DefaultStoryProps<T extends Obj.Any> = {
   Component: FC<SurfaceComponentProps<T>>;
@@ -18,18 +18,22 @@ export type DefaultStoryProps<T extends Obj.Any> = {
 };
 
 export const DefaultStory = <T extends Obj.Any>({ Component, createObject, image }: DefaultStoryProps<T>) => {
-  // TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
   const object = useMemo(() => createObject(), [createObject]);
-  const roles: SurfaceComponentProps['role'][] = ['card--popover', 'card--intrinsic'];
+  const roles: CardContainerProps['role'][] = ['intrinsic', 'popover'];
 
   return (
-    <div className='grid grid-rows-4 gap-16 plb-8'>
+    <div className='w-full h-full grid grid-cols-2 py-16 gap-8'>
       {roles.map((role, i) => (
-        <div key={i} className='flex justify-center'>
-          <div className='flex flex-col gap-4 is-full items-center'>
-            <label className='text-sm text-description'>{role}</label>
+        <div key={i} className='flex h-full justify-center overflow-hidden'>
+          <div className='flex flex-col gap-4 w-full items-center'>
+            <span className='text-sm text-description'>{role}</span>
             <CardContainer role={role}>
-              <Card.Root>
+              <Card.Root border={false}>
+                <Card.Toolbar>
+                  <Card.DragHandle />
+                  <Card.Title>{Obj.getLabel(object)}</Card.Title>
+                  <Card.Menu />
+                </Card.Toolbar>
                 <Component role={role} subject={image ? object : omitImage(object)} />
               </Card.Root>
             </CardContainer>
@@ -45,14 +49,15 @@ export const omitImage = ({ image: _, ...rest }: any) => rest;
 /**
  * Factory functions for creating test objects at render time.
  */
-export const createOrganization = (): Organization.Organization =>
-  Obj.make(Organization.Organization, {
+export const createOrganization = (): Organization.Organization => {
+  return Obj.make(Organization.Organization, {
     name: faker.company.name(),
     image:
       'https://plus.unsplash.com/premium_photo-1672116452571-896980a801c8?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
     website: faker.internet.url(),
     description: faker.lorem.paragraph(),
   });
+};
 
 export const createPerson = (): Person.Person => {
   const organization = createOrganization();
@@ -69,16 +74,18 @@ export const createPerson = (): Person.Person => {
   });
 };
 
-export const createProject = (): Project.Project =>
-  Obj.make(Project.Project, {
+export const createProject = (): Pipeline.Pipeline => {
+  return Obj.make(Pipeline.Pipeline, {
     name: faker.person.fullName(),
     image: 'https://dxos.network/dxos-logotype-blue.png',
     description: faker.lorem.paragraph(),
     columns: [],
   });
+};
 
-export const createTask = (): Task.Task =>
-  Obj.make(Task.Task, {
+export const createTask = (): Task.Task => {
+  return Obj.make(Task.Task, {
     title: faker.lorem.sentence(),
     status: faker.helpers.arrayElement(['todo', 'in-progress', 'done'] as const),
   });
+};