@dxos/plugin-preview 0.8.4-main.406dc2a → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.548089c",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,38 +24,39 @@
     "src"
   ],
   "dependencies": {
-    "@effect-rx/rx-react": "0.42.4",
+    "@effect-atom/atom-react": "^0.3.4",
     "@preact-signals/safe-react": "^0.9.0",
-    "@dxos/async": "0.8.4-main.406dc2a",
-    "@dxos/app-framework": "0.8.4-main.406dc2a",
-    "@dxos/client": "0.8.4-main.406dc2a",
-    "@dxos/echo": "0.8.4-main.406dc2a",
-    "@dxos/app-graph": "0.8.4-main.406dc2a",
-    "@dxos/keys": "0.8.4-main.406dc2a",
-    "@dxos/log": "0.8.4-main.406dc2a",
-    "@dxos/plugin-attention": "0.8.4-main.406dc2a",
-    "@dxos/lit-ui": "0.8.4-main.406dc2a",
-    "@dxos/plugin-client": "0.8.4-main.406dc2a",
-    "@dxos/plugin-deck": "0.8.4-main.406dc2a",
-    "@dxos/plugin-space": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-client": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-editor": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-menu": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-table": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/schema": "0.8.4-main.406dc2a",
-    "@dxos/util": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-stack": "0.8.4-main.406dc2a"
+    "@dxos/app-framework": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/app-graph": "0.8.4-main.548089c",
+    "@dxos/keys": "0.8.4-main.548089c",
+    "@dxos/lit-ui": "0.8.4-main.548089c",
+    "@dxos/client": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/plugin-attention": "0.8.4-main.548089c",
+    "@dxos/plugin-deck": "0.8.4-main.548089c",
+    "@dxos/plugin-client": "0.8.4-main.548089c",
+    "@dxos/plugin-space": "0.8.4-main.548089c",
+    "@dxos/react-ui-editor": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/react-ui-menu": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-ui-table": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "devDependencies": {
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a",
-    "@dxos/random": "0.8.4-main.406dc2a"
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
     "effect": "^3.13.3",

package/src/PreviewPlugin.tsx

@@ -4,7 +4,7 @@
 
 import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
-import { DataType } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
 import { PreviewPopover, ReactSurface } from './capabilities';
 import { meta } from './meta';
@@ -19,7 +19,7 @@ export const PreviewPlugin = definePlugin(meta, () => [
   defineModule({
     id: `${meta.id}/module/schema`,
     activatesOn: ClientEvents.SetupSchema,
-    activate: () => [contributes(ClientCapabilities.Schema, [DataType.Person, DataType.Organization])],
+    activate: () => [contributes(ClientCapabilities.Schema, [Person.Person, Organization.Organization])],
   }),
   defineModule({
     id: `${meta.id}/module/preview-popover`,

package/src/capabilities/react-surface.tsx

@@ -4,16 +4,9 @@
 
 import React, { useCallback } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  Surface,
-  contributes,
-  createIntent,
-  createSurface,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { fullyQualifiedId, getSchema, getSpace } from '@dxos/client/echo';
+import { Capabilities, LayoutAction, contributes, createIntent, createSurface } from '@dxos/app-framework';
+import { Surface, useIntentDispatcher } from '@dxos/app-framework/react';
+import { getSchema, getSpace } from '@dxos/client/echo';
 import { Obj } from '@dxos/echo';
 import { type JsonPath, setValue } from '@dxos/echo/internal';
 import { useActiveSpace } from '@dxos/plugin-space';
@@ -21,31 +14,34 @@ import { useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { Card } from '@dxos/react-ui-stack';
 import { descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { DataType, type ProjectionModel } from '@dxos/schema';
+import { type ProjectionModel } from '@dxos/schema';
+import { Organization, Person, Project, Task } from '@dxos/types';
 
-import { ContactCard, OrganizationCard, ProjectCard } from '../components';
-import { TaskCard } from '../components/TaskCard';
+import { OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../cards';
 import { meta } from '../meta';
+import { type PreviewProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     //
     // Specific schema types.
+    // TODO(burdon): Create helpers and factor out.
     //
+
     createSurface({
       id: `${meta.id}/schema-popover--contact`,
       role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
-      filter: (data): data is { subject: DataType.Person } => Obj.instanceOf(DataType.Person, data.subject),
+      filter: (data): data is { subject: Person.Person } => Obj.instanceOf(Person.Person, data.subject),
       component: ({ data, role }) => {
         const { dispatchPromise: dispatch } = useIntentDispatcher();
         const space = getSpace(data.subject);
-        const activeSpace = useActiveSpace();
-        const handleOrgClick = useCallback(
-          (org: DataType.Organization) =>
+        const activeSpace = useActiveSpace(); // TODO(burdon): Disambiguate with space?
+        const handleSelect = useCallback<NonNullable<PreviewProps['onSelect']>>(
+          (object) =>
             dispatch(
               createIntent(LayoutAction.Open, {
                 part: 'main',
-                subject: [fullyQualifiedId(org)],
+                subject: [Obj.getDXN(object).toString()],
                 options: {
                   workspace: space?.id,
                 },
@@ -55,19 +51,19 @@ export default () =>
         );
 
         return (
-          <ContactCard role={role} subject={data.subject} activeSpace={activeSpace} onOrgClick={handleOrgClick}>
+          <PersonCard role={role} subject={data.subject} activeSpace={activeSpace} onSelect={handleSelect}>
             {role === 'card--popover' && <Surface role='related' data={data} />}
-          </ContactCard>
+          </PersonCard>
         );
       },
     }),
     createSurface({
       id: `${meta.id}/schema-popover--organization`,
       role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
-      filter: (data): data is { subject: DataType.Organization } => Obj.instanceOf(DataType.Organization, data.subject),
+      filter: (data): data is { subject: Organization.Organization } =>
+        Obj.instanceOf(Organization.Organization, data.subject),
       component: ({ data, role }) => {
         const activeSpace = useActiveSpace();
-
         return (
           <OrganizationCard role={role} subject={data.subject} activeSpace={activeSpace}>
             {role === 'card--popover' && <Surface role='related' data={data} />}
@@ -78,23 +74,25 @@ export default () =>
     createSurface({
       id: `${meta.id}/schema-popover--project`,
       role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
-      filter: (data): data is { subject: DataType.Project } => Obj.instanceOf(DataType.Project, data.subject),
+      filter: (data): data is { subject: Project.Project } => Obj.instanceOf(Project.Project, data.subject),
       component: ({ data, role }) => {
         const activeSpace = useActiveSpace();
-
         return <ProjectCard subject={data.subject} role={role} activeSpace={activeSpace} />;
       },
     }),
     createSurface({
       id: `${meta.id}/schema-popover--task`,
       role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
-      filter: (data): data is { subject: DataType.Task } => Obj.instanceOf(DataType.Task, data.subject),
-      component: ({ data, role }) => <TaskCard subject={data.subject} role={role} />,
+      filter: (data): data is { subject: Task.Task } => Obj.instanceOf(Task.Task, data.subject),
+      component: ({ data, role }) => {
+        return <TaskCard subject={data.subject} role={role} />;
+      },
     }),
 
     //
     // Fallback for any object.
     //
+
     createSurface({
       id: `${meta.id}/fallback-popover`,
       role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
@@ -119,16 +117,35 @@ export default () =>
         return (
           <Card.SurfaceRoot role={role}>
             <Form
+              id={data.subject.id}
               schema={schema}
               projection={data.projection}
               values={data.subject}
               readonly={role === 'card--popover' ? 'static' : false}
               onSave={handleSave}
               autoSave
-              {...(role === 'card--intrinsic' && { outerSpacing: 'blockStart-0' })}
+              {...(role === 'card--intrinsic' && {
+                outerSpacing: 'blockStart-0',
+              })}
             />
           </Card.SurfaceRoot>
         );
       },
     }),
+
+    createSurface({
+      id: `${meta.id}/section`,
+      role: ['section'],
+      position: 'fallback',
+      filter: (data): data is { subject: Obj.Any } => 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'>
+              <Surface role='card' data={data} limit={1} />
+            </div>
+          </div>
+        );
+      },
+    }),
   ]);

package/src/cards/OrganizationCard.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Card } from '@dxos/react-ui-stack';
+import { type Organization } from '@dxos/types';
+
+import { CardHeader, CardLink } from '../components';
+import { type PreviewProps } from '../types';
+
+export const OrganizationCard = ({ children, subject, role, activeSpace }: PreviewProps<Organization.Organization>) => {
+  const { name, image, description, website } = subject;
+
+  return (
+    <Card.SurfaceRoot id={subject.id} role={role}>
+      <Card.Poster
+        alt={name ?? ''}
+        {...(image ? { image } : { icon: 'ph--building-office--regular' })}
+        classNames={!image && 'opacity-50'}
+      />
+      <CardHeader label={name} subject={subject} activeSpace={activeSpace} />
+      {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
+      {website && <CardLink label={website} href={website} />}
+      {children}
+    </Card.SurfaceRoot>
+  );
+};

package/src/cards/PersonCard.tsx

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment } from 'react';
+
+import { Avatar, Icon } from '@dxos/react-ui';
+import { Card, cardHeading, cardText } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
+import { type Person } from '@dxos/types';
+
+import { CardRow, CardSubjectMenu, gridRow } from '../components';
+import { type PreviewProps } from '../types';
+
+export const PersonCard = ({ children, role, subject, activeSpace, onSelect }: PreviewProps<Person.Person>) => {
+  const { fullName, image, organization: { target: organization } = {}, emails = [] } = subject;
+
+  return (
+    <Card.SurfaceRoot id={subject.id} role={role}>
+      <Avatar.Root>
+        <Card.Text role='group' classNames={mx('grid gap-2 grid-cols-[1fr_min-content]')}>
+          <div role='none' className={mx(gridRow, 'grid-rows-2')}>
+            {activeSpace ? <CardSubjectMenu subject={subject} activeSpace={activeSpace} /> : <div />}
+            <Avatar.Label asChild>
+              <h2 className={mx(cardHeading, 'grow truncate')}>{fullName}</h2>
+            </Avatar.Label>
+          </div>
+          <Avatar.Content
+            imgSrc={image}
+            icon='ph--user--regular'
+            size={16}
+            classNames={['text-subdued', !image && 'opacity-50']}
+            hue='neutral'
+            variant='square'
+          />
+        </Card.Text>
+      </Avatar.Root>
+      {organization?.name && (
+        <CardRow
+          icon='ph--buildings--regular'
+          label={organization.name}
+          onClick={onSelect ? () => onSelect(organization) : undefined}
+        />
+      )}
+      {emails.length > 0 && (
+        <dl className={mx(cardText, gridRow, '[&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0')}>
+          {emails.map(({ label, value }) => (
+            <Fragment key={value}>
+              <dt>
+                <span className='sr-only'>{label}</span>
+                <Icon icon='ph--at--regular' size={5} />
+              </dt>
+              <dd key={value} className='col-span-2 break-words'>
+                {value}
+              </dd>
+            </Fragment>
+          ))}
+        </dl>
+      )}
+      {children}
+    </Card.SurfaceRoot>
+  );
+};

package/src/cards/ProjectCard.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Obj } from '@dxos/echo';
+import { Card } from '@dxos/react-ui-stack';
+import { type Project } from '@dxos/types';
+
+import { CardHeader } from '../components';
+import { type PreviewProps } from '../types';
+
+export const ProjectCard = ({ subject, role, activeSpace }: PreviewProps<Project.Project>) => {
+  const { name, image, description } = subject;
+
+  return (
+    <Card.SurfaceRoot id={subject.id} role={role}>
+      {image && <Card.Poster image={image} alt={Obj.getLabel(subject) ?? ''} aspect='auto' />}
+      <CardHeader label={name} subject={subject} activeSpace={activeSpace} />
+      {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
+    </Card.SurfaceRoot>
+  );
+};

package/src/{components → cards}/TaskCard.tsx

@@ -8,15 +8,14 @@ import React from 'react';
 import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
 import { Card, cardNoSpacing, cardSpacing } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
-import { DataType } from '@dxos/schema';
+import { Task } from '@dxos/types';
 
+import { CardSubjectMenu } from '../components';
 import { type PreviewProps } from '../types';
 
-import { CardSubjectMenu } from './CardSubjectMenu';
-
 // TODO(thure): Should this move upstream as a helper? Is there an easier way to get options?
 const getActiveStatusOption = (status?: string) => {
-  const properties = SchemaAST.getPropertySignatures(DataType.Task.ast);
+  const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
   const statusProperty = properties.find((p) => p.name === 'status');
   const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
     // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
@@ -27,11 +26,12 @@ const getActiveStatusOption = (status?: string) => {
   return options.find(({ id }) => id === status);
 };
 
-export const TaskCard = ({ subject, role, activeSpace }: PreviewProps<DataType.Task>) => {
+export const TaskCard = ({ subject, role, activeSpace }: PreviewProps<Task.Task>) => {
   const { title, status } = subject;
   const statusOption = getActiveStatusOption(status);
+
   return (
-    <Card.SurfaceRoot role={role}>
+    <Card.SurfaceRoot id={subject.id} role={role}>
       <div role='none' className={mx('flex items-center gap-2', cardSpacing)}>
         <Card.Heading classNames={[cardNoSpacing, 'min-is-0 flex-1 truncate']}>{title}</Card.Heading>
         {statusOption && (

package/src/cards/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './OrganizationCard';
+export * from './PersonCard';
+export * from './ProjectCard';
+export * from './TaskCard';

package/src/components/CardComponents.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Button, Icon } from '@dxos/react-ui';
+import { Card, cardNoSpacing, cardSpacing } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type PreviewProps } from '../types';
+
+import { CardSubjectMenu } from './CardSubjectMenu';
+
+export const gridRow = 'is-full grid grid-cols-[1.5rem_1fr_min-content] gap-2 items-center';
+
+// TODO(burdon): Standardize card grid for common rows.
+
+export const CardHeader = ({ label, subject, activeSpace }: { label?: string } & PreviewProps) => {
+  return (
+    <div role='none' className={mx('flex items-center gap-2', cardSpacing)}>
+      <Card.Heading classNames={cardNoSpacing}>{label}</Card.Heading>
+      <CardSubjectMenu subject={subject} activeSpace={activeSpace} />
+    </div>
+  );
+};
+
+export const CardRow = ({ icon, label, onClick }: { icon: string; label: string; onClick?: () => void }) => {
+  if (!onClick) {
+    return (
+      <Card.Chrome>
+        <p data-variant='ghost' className={mx(gridRow, 'dx-button')}>
+          <Icon icon={icon} size={5} classNames='text-subdued' />
+          <span className='min-is-0 flex-1 truncate col-span-2'>{label}</span>
+        </p>
+      </Card.Chrome>
+    );
+  }
+
+  return (
+    <Card.Chrome>
+      <Button variant='ghost' classNames={mx(gridRow, 'text-start')} onClick={onClick}>
+        <Icon icon={icon} size={5} classNames='text-subdued' />
+        <span className='min-is-0 flex-1 truncate'>{label}</span>
+        <Icon icon='ph--arrow-right--regular' />
+      </Button>
+    </Card.Chrome>
+  );
+};
+
+export const CardLink = ({ label, href }: { label: string; href: string }) => {
+  return (
+    <Card.Chrome>
+      <a
+        className={mx(gridRow, 'dx-button dx-focus-ring')}
+        data-variant='ghost'
+        href={href}
+        target='_blank'
+        rel='noreferrer'
+      >
+        <Icon icon='ph--link--regular' size={5} classNames='text-subdued' />
+        <span className='min-is-0 flex-1 truncate'>{label}</span>
+        <Icon icon='ph--arrow-square-out--regular' />
+      </a>
+    </Card.Chrome>
+  );
+};

package/src/components/CardSubjectMenu.tsx

@@ -2,27 +2,73 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { ACTION_TYPE } from '@dxos/app-graph';
 import { Obj } from '@dxos/echo';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { type Space, fullyQualifiedId } from '@dxos/react-client/echo';
 import { IconButton, type IconButtonProps, useTranslation } from '@dxos/react-ui';
-import { type ActionGraphProps, DropdownMenu, MenuProvider, useMenuActions } from '@dxos/react-ui-menu';
+import {
+  type ActionGraphProps,
+  DropdownMenu,
+  type MenuActions,
+  MenuProvider,
+  useMenuActions,
+} from '@dxos/react-ui-menu';
 
 import { meta } from '../meta';
+import { type PreviewProps } from '../types';
 
-const useSubjectMenuGroupItems = (subject: Obj.Any, activeSpace?: Space) => {
+/**
+ * Generic menu for objects; builds menu with common actions.
+ */
+// TODO(burdon): Reconcile title and menu with main Card header.
+export const CardSubjectMenu = ({
+  subject,
+  activeSpace,
+  ...props
+}: PreviewProps & Omit<IconButtonProps, 'icon' | 'label'>) => {
+  const { t } = useTranslation(meta.id);
+  const menuProps = useSubjectMenuGroupItems({ subject, activeSpace });
+
+  if (!activeSpace) {
+    return null;
+  }
+
+  return (
+    <MenuProvider {...menuProps}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <IconButton
+            variant='ghost'
+            icon='ph--dots-three-vertical--bold'
+            iconOnly
+            label={t('more options label')}
+            {...props}
+          />
+        </DropdownMenu.Trigger>
+      </DropdownMenu.Root>
+    </MenuProvider>
+  );
+};
+
+const useSubjectMenuGroupItems = ({ subject, activeSpace }: PreviewProps): MenuActions => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const result: ActionGraphProps = { edges: [], nodes: [] };
 
   result.nodes.push({
     type: ACTION_TYPE,
     id: `${subject.id}/open`,
-    data: () => dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [fullyQualifiedId(subject)] })),
+    data: () =>
+      dispatch(
+        createIntent(LayoutAction.Open, {
+          part: 'main',
+          subject: [Obj.getDXN(subject).toString()],
+        }),
+      ),
     properties: {
       label: ['open object label', { ns: meta.id }],
       icon: 'ph--arrow-right--regular',
@@ -34,7 +80,14 @@ const useSubjectMenuGroupItems = (subject: Obj.Any, activeSpace?: Space) => {
       type: ACTION_TYPE,
       id: `${subject.id}/add-to-space`,
       // TODO(wittjosiah): Update reference to point to db object when adding?
-      data: () => dispatch(createIntent(SpaceAction.AddObject, { object: subject, target: activeSpace, hidden: true })),
+      data: () =>
+        dispatch(
+          createIntent(SpaceAction.AddObject, {
+            object: subject,
+            target: activeSpace,
+            hidden: true,
+          }),
+        ),
       properties: {
         label: ['add object to space label', { ns: meta.id }],
         icon: 'ph--file-plus--regular',
@@ -46,37 +99,5 @@ const useSubjectMenuGroupItems = (subject: Obj.Any, activeSpace?: Space) => {
     result.edges.push({ source: 'root', target });
   });
 
-  return useMenuActions(Rx.make(result));
-};
-
-/**
- * This is a generic menu for objects that tries to infer common actions.
- */
-export const CardSubjectMenu = ({
-  subject,
-  activeSpace,
-  ...props
-}: Omit<IconButtonProps, 'icon' | 'label'> & { subject: Obj.Any; activeSpace?: Space }) => {
-  const { t } = useTranslation(meta.id);
-  const menuProps = useSubjectMenuGroupItems(subject, activeSpace);
-
-  if (!activeSpace) {
-    return null;
-  }
-
-  return (
-    <MenuProvider {...menuProps}>
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger asChild>
-          <IconButton
-            iconOnly
-            variant='ghost'
-            icon='ph--dots-three-vertical--bold'
-            label={t('more options label')}
-            {...props}
-          />
-        </DropdownMenu.Trigger>
-      </DropdownMenu.Root>
-    </MenuProvider>
-  );
+  return useMenuActions(Atom.make(result));
 };

package/src/components/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ContactCard';
-export * from './OrganizationCard';
-export * from './ProjectCard';
+export * from './CardComponents';
+export * from './CardSubjectMenu';

package/src/meta.ts

@@ -3,10 +3,15 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
   id: 'dxos.org/plugin/preview',
   name: 'Preview',
+  description: trim`
+    Rich preview panel for viewing object content without opening full editors.
+    Quick peek at documents, images, and data with inline rendering.
+  `,
   icon: 'ph--eye--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-preview',
 };

package/src/stories/Card.stories.tsx

@@ -6,21 +6,24 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 
 import { Defaultstory, createCards } from './testing';
 
+faker.seed(999);
+
 const meta = {
   title: 'plugins/plugin-preview/Card',
   render: Defaultstory,
   decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withTheme,
+    // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
     withPluginManager({ plugins: [IntentPlugin()] }),
   ],
   parameters: {
-    layout: 'column',
     translations,
   },
   tags: ['cards'],