@dxos/plugin-preview 0.8.2-main.f081794 → 0.8.2-main.f11618f

package/dist/types/src/Preview.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.stories.d.ts","sourceRoot":"","sources":["../../../src/Preview.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQ9D,KAAK,UAAU,GAAG;IAChB,SAAS,EAAE,EAAE,CAAC;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,GAAG,CAAC;CACd,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,UAAU,CAoB1B,CAAC;AAEF,eAAe,IAAI,CAAC;AA2CpB,eAAO,MAAM,gBAAgB;;;sBA3E7B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DA0H23+M,KAAM,qBAAqB;+BAlFzx+M,KAAM,eAAe,YAAW,KAAM,qBACjK;;;;4DAiF2+/M,KAAM,qBAAqB;+BA7D5+/M,KAAM,eAEjC,YAGC,KAAE,qBAAqB;;;;4DAwDukhN,KAAM,qBAAqB;+BA3BrnhN,KAAO,eAAc,YAE1B,KAEE,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAlBvB,CAAC;AAEF,eAAO,MAAM,cAAc;;;sBAnF3B,CAAA;;;;;CAyFC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;CAMjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;CAM/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;CAM5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;CAM1B,CAAC"}

package/dist/types/src/PreviewPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa,4CA6CtB,CAAC"}
+{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AA+DA,eAAO,MAAM,aAAa,4CAqJtB,CAAC"}

package/dist/types/src/components/ContactCard.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type Contact, type Organization } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const ContactCard: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: PreviewProps<Contact> & {
+    onOrgClick?: (org: Organization) => void;
+}) => React.JSX.Element;
+//# sourceMappingURL=ContactCard.d.ts.map

package/dist/types/src/components/ContactCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ContactCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,KAAK,YAAY,EAAuE,MAAM,UAAU,CAAC;AAElH,eAAO,MAAM,WAAW,oGAMrB,YAAY,CAAC,OAAO,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,sBAmDtE,CAAC"}

package/dist/types/src/components/OrganizationCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type Organization } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const OrganizationCard: ({ children, classNames, subject: { name, image, description, website }, role, }: PreviewProps<Organization>) => React.JSX.Element;
+//# sourceMappingURL=OrganizationCard.d.ts.map

package/dist/types/src/components/OrganizationCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationCard.d.ts","sourceRoot":"","sources":["../../../../src/components/OrganizationCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,KAAK,YAAY,EAAuE,MAAM,UAAU,CAAC;AAElH,eAAO,MAAM,gBAAgB,oFAK1B,YAAY,CAAC,YAAY,CAAC,sBAwB5B,CAAC"}

package/dist/types/src/components/ProjectCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type Project } from '@dxos/schema';
+import { type PreviewProps } from '../types';
+export declare const ProjectCard: ({ classNames, role, subject: { name, image, description } }: PreviewProps<Project>) => React.JSX.Element;
+//# sourceMappingURL=ProjectCard.d.ts.map

package/dist/types/src/components/ProjectCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ProjectCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,KAAK,YAAY,EAA0C,MAAM,UAAU,CAAC;AAErF,eAAO,MAAM,WAAW,gEAAiE,YAAY,CAAC,OAAO,CAAC,sBAQ7G,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ContactCard';
+export * from './OrganizationCard';
+export * from './ProjectCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,3 +1,4 @@
 export * from './meta';
+export * from './types';
 export * from './PreviewPlugin';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,cAAc,iBAAiB,CAAC"}

package/dist/types/src/translations.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    'en-US': {
+        "dxos.org/plugin/preview": {
+            'unable to create preview message': string;
+        };
+    };
+}[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

package/dist/types/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;AAMA,wBAQE"}

package/dist/types/src/types.d.ts

@@ -0,0 +1,25 @@
+import { type PropsWithChildren } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type PreviewProps<T extends object> = PropsWithChildren<ThemedClassName<{
+    subject: T;
+    role: string;
+}>>;
+/**
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>
+ *     <Card.Action>
+ *   </Card.Header>
+ *   <Card.Body>
+ *     <Card.Image>
+ *     <Form />
+ *   </Card.Body>
+ * </Card.Root>
+ */
+export declare const popoverCard = "popover-consistent-width rounded-lg overflow-hidden";
+export declare const defaultCard = "";
+export declare const kanbanCardWithoutPoster = "pbs-[--rail-action]";
+export declare const previewTitle = "text-lg font-medium line-clamp-2";
+export declare const previewProse = "pli-3 mlb-3";
+export declare const previewChrome = "pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full";
+//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,IAAI,iBAAiB,CAC5D,eAAe,CAAC;IACd,OAAO,EAAE,CAAC,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CACH,CAAC;AAQF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,wDAAwD,CAAC;AACjF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,uBAAuB,wBAAwB,CAAC;AAC7D,eAAO,MAAM,YAAY,qCAAqC,CAAC;AAC/D,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,aAAa,4FAA4F,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.2-main.f081794",
+  "version": "0.8.2-main.f11618f",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,21 +23,32 @@
     "src"
   ],
   "dependencies": {
-    "@dxos/app-framework": "0.8.2-main.f081794",
-    "@dxos/async": "0.8.2-main.f081794",
-    "@dxos/keys": "0.8.2-main.f081794",
-    "@dxos/client": "0.8.2-main.f081794",
-    "@dxos/lit-ui": "0.8.2-main.f081794",
-    "@dxos/log": "0.8.2-main.f081794",
-    "@dxos/plugin-client": "0.8.2-main.f081794",
-    "@dxos/react-ui-editor": "0.8.2-main.f081794"
+    "@dxos/app-framework": "0.8.2-main.f11618f",
+    "@dxos/client": "0.8.2-main.f11618f",
+    "@dxos/echo-schema": "0.8.2-main.f11618f",
+    "@dxos/async": "0.8.2-main.f11618f",
+    "@dxos/lit-ui": "0.8.2-main.f11618f",
+    "@dxos/log": "0.8.2-main.f11618f",
+    "@dxos/plugin-client": "0.8.2-main.f11618f",
+    "@dxos/react-client": "0.8.2-main.f11618f",
+    "@dxos/keys": "0.8.2-main.f11618f",
+    "@dxos/react-ui": "0.8.2-main.f11618f",
+    "@dxos/react-ui-editor": "0.8.2-main.f11618f",
+    "@dxos/react-ui-table": "0.8.2-main.f11618f",
+    "@dxos/react-ui-form": "0.8.2-main.f11618f",
+    "@dxos/schema": "0.8.2-main.f11618f",
+    "@dxos/util": "0.8.2-main.f11618f",
+    "@dxos/react-ui-theme": "0.8.2-main.f11618f"
   },
   "devDependencies": {
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7"
+    "vite": "5.4.7",
+    "@dxos/random": "0.8.2-main.f11618f"
   },
   "peerDependencies": {
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },

package/src/Preview.stories.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { type FC } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { makeRef } from '@dxos/react-client/echo';
+import { Icon, Popover } from '@dxos/react-ui';
+import { Contact, Organization, Project } from '@dxos/schema';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ContactCard, OrganizationCard, ProjectCard } from './components';
+import translations from './translations';
+
+faker.seed(1234);
+
+type StoryProps = {
+  Component: FC<{ subject: any }>;
+  icon: string;
+  subject: any;
+};
+
+const meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-preview/Preview',
+  render: ({ Component, icon, ...args }) => {
+    return (
+      <Popover.Root open>
+        <Popover.Content>
+          <Component {...args} />
+          <Popover.Arrow />
+        </Popover.Content>
+        <Popover.Trigger>
+          <Icon icon={icon} size={5} />
+        </Popover.Trigger>
+      </Popover.Root>
+    );
+  },
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+};
+
+export default meta;
+
+const omitImage = ({ image, ...rest }: any) => rest;
+
+const data = (() => {
+  const organization = create(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(),
+  });
+
+  const contact = create(Contact, {
+    fullName: faker.person.fullName(),
+    image:
+      'https://plus.unsplash.com/premium_photo-1664536392779-049ba8fde933?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    organization: makeRef(organization),
+    emails: [
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+    ],
+  });
+
+  const project = create(Project, {
+    name: faker.person.fullName(),
+    image: 'https://dxos.network/dxos-logotype-blue.png',
+    description: faker.lorem.paragraph(),
+  });
+
+  return { organization, contact, project };
+})();
+
+export const ContactWithImage = {
+  args: {
+    Component: ContactCard,
+    icon: 'ph--user--regular',
+    subject: data.contact,
+  },
+};
+
+export const ContactNoImage = {
+  args: {
+    Component: ContactCard,
+    icon: 'ph--user--regular',
+    subject: omitImage(data.contact),
+  },
+};
+
+export const OrganizationWithImage = {
+  args: {
+    Component: OrganizationCard,
+    icon: 'ph--building-office--regular',
+    subject: data.organization,
+  },
+};
+
+export const OrganizationNoImage = {
+  args: {
+    Component: OrganizationCard,
+    icon: 'ph--building-office--regular',
+    subject: omitImage(data.organization),
+  },
+};
+
+export const ProjectWithImage = {
+  args: {
+    Component: ProjectCard,
+    icon: 'ph--building--regular',
+    subject: data.project,
+  },
+};
+
+export const ProjectNoImage = {
+  args: {
+    Component: ProjectCard,
+    icon: 'ph--building--regular',
+    subject: omitImage(data.project),
+  },
+};

package/src/PreviewPlugin.tsx

@@ -2,26 +2,48 @@
 // Copyright 2023 DXOS.org
 //
 
+import React, { useCallback } from 'react';
+
 import {
-  createIntent,
   Capabilities,
-  contributes,
   Events,
+  LayoutAction,
+  Surface,
+  contributes,
+  createIntent,
+  createSurface,
   defineModule,
   definePlugin,
-  LayoutAction,
+  useIntentDispatcher,
 } from '@dxos/app-framework';
 import { addEventListener } from '@dxos/async';
-import { type Client } from '@dxos/client';
-import { resolveRef } from '@dxos/client';
-import { parseId, type Space } from '@dxos/client/echo';
+import { type Client, resolveRef } from '@dxos/client';
+import {
+  Filter,
+  fullyQualifiedId,
+  getSchema,
+  getSpace,
+  isEchoObject,
+  parseId,
+  type ReactiveEchoObject,
+  type Space,
+} from '@dxos/client/echo';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { DXN } from '@dxos/keys';
 import { type DxRefTagActivate } from '@dxos/lit-ui';
 import { log } from '@dxos/log';
-import { ClientCapabilities } from '@dxos/plugin-client';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { useTranslation } from '@dxos/react-ui';
 import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-ui-editor';
+import { Form } from '@dxos/react-ui-form';
+import { TableType } from '@dxos/react-ui-table';
+import { descriptionMessage } from '@dxos/react-ui-theme';
+import { Contact, Organization, Project } from '@dxos/schema';
 
-import { meta } from './meta';
+import { ContactCard, OrganizationCard, ProjectCard } from './components';
+import { meta, PREVIEW_PLUGIN } from './meta';
+import translations from './translations';
+import { kanbanCardWithoutPoster } from './types';
 
 const customEventOptions = { capture: true, passive: false };
 
@@ -42,7 +64,17 @@ const handlePreviewLookup = async (
 export const PreviewPlugin = () =>
   definePlugin(meta, [
     defineModule({
-      id: `${meta.id}/module/preview-popoevr`,
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () => [contributes(ClientCapabilities.Schema, [Contact, Organization])],
+    }),
+    defineModule({
+      id: `${meta.id}/module/preview-popover`,
       activatesOn: Events.Startup,
       activate: (context) => {
         // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.
@@ -84,4 +116,98 @@ export const PreviewPlugin = () =>
         return contributes(Capabilities.Null, null, () => cleanup());
       },
     }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupReactSurface,
+      activate: () =>
+        // TODO(wittjosiah): Factor out to lazy capabilities like other plugins.
+        contributes(Capabilities.ReactSurface, [
+          //
+          // Specific schema types.
+          //
+          createSurface({
+            id: `${PREVIEW_PLUGIN}/schema-popover`,
+            role: ['popover', 'card--kanban'],
+            filter: (data): data is { subject: Contact } => isInstanceOf(Contact, data.subject),
+            component: ({ data, role }) => {
+              const { dispatchPromise: dispatch } = useIntentDispatcher();
+              const handleOrgClick = useCallback(
+                async (org: Organization) => {
+                  const space = getSpace(org);
+                  const tablesQuery = await space?.db.query(Filter.schema(TableType)).run();
+                  const currentSpaceOrgTable = tablesQuery?.objects.find((table) => {
+                    return table.view?.target?.query?.typename === Organization.typename;
+                  });
+                  await dispatch(
+                    createIntent(LayoutAction.UpdatePopover, {
+                      part: 'popover',
+                      options: {
+                        state: false,
+                        anchorId: '',
+                      },
+                    }),
+                  );
+                  if (currentSpaceOrgTable) {
+                    return dispatch(
+                      createIntent(LayoutAction.Open, {
+                        part: 'main',
+                        subject: [fullyQualifiedId(currentSpaceOrgTable)],
+                        options: { workspace: space?.id },
+                      }),
+                    );
+                  }
+                },
+                [dispatch],
+              );
+              return (
+                <ContactCard subject={data.subject} onOrgClick={handleOrgClick} role={role}>
+                  {role === 'popover' && <Surface role='related' data={data} />}
+                </ContactCard>
+              );
+            },
+          }),
+          createSurface({
+            id: `${PREVIEW_PLUGIN}/schema-popover`,
+            role: ['popover', 'card--kanban'],
+            filter: (data): data is { subject: Organization } => isInstanceOf(Organization, data.subject),
+            component: ({ data, role }) => (
+              <OrganizationCard subject={data.subject} role={role}>
+                {role === 'popover' && <Surface role='related' data={data} />}
+              </OrganizationCard>
+            ),
+          }),
+          createSurface({
+            id: `${PREVIEW_PLUGIN}/schema-popover`,
+            role: ['popover', 'card--kanban'],
+            filter: (data): data is { subject: Project } => isInstanceOf(Project, data.subject),
+            component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,
+          }),
+
+          //
+          // Fallback for any object.
+          //
+          createSurface({
+            id: `${PREVIEW_PLUGIN}/fallback-popover`,
+            role: ['popover', 'card--kanban'],
+            position: 'fallback',
+            filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
+            component: ({ data, role }) => {
+              const schema = getSchema(data.subject);
+              const { t } = useTranslation(PREVIEW_PLUGIN);
+              if (!schema) {
+                return <p className={descriptionMessage}>{t('unable to create preview message')}</p>;
+              }
+
+              return (
+                <Form
+                  schema={schema}
+                  values={data.subject}
+                  readonly
+                  {...(role === 'card--kanban' && { classNames: kanbanCardWithoutPoster })}
+                />
+              );
+            },
+          }),
+        ]),
+    }),
   ]);

package/src/components/ContactCard.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment } from 'react';
+
+import { Icon, Avatar, Button } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { type Contact, type Organization } from '@dxos/schema';
+
+import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
+
+export const ContactCard = ({
+  children,
+  classNames,
+  role,
+  subject: { fullName, image, organization, emails },
+  onOrgClick,
+}: PreviewProps<Contact> & { onOrgClick?: (org: Organization) => void }) => {
+  const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;
+  return (
+    <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
+      <Avatar.Root>
+        <div role='group' className={mx(previewProse, 'grid gap-3 grid-cols-[min-content_1fr]')}>
+          <Avatar.Content imgSrc={image} icon='ph--user--regular' size={16} hue='neutral' />
+          <div role='none' className='bs-min self-center'>
+            <Avatar.Label asChild>
+              <h2 className={previewTitle}>{fullName}</h2>
+            </Avatar.Label>
+          </div>
+        </div>
+      </Avatar.Root>
+      {organizationName && (
+        <div role='none' className={previewChrome}>
+          {typeof organization === 'object' && onOrgClick ? (
+            <Button variant='ghost' classNames='gap-2 text-start' onClick={() => onOrgClick(organization.target!)}>
+              <Icon icon='ph--buildings--regular' size={5} classNames='text-subdued' />
+              <span className='min-is-0 flex-1 truncate'>{organizationName}</span>
+              <Icon icon='ph--arrow-right--regular' />
+            </Button>
+          ) : (
+            <p className='dx-button gap-2' data-variant='ghost'>
+              <Icon icon='ph--buildings--regular' size={5} classNames='text-subdued' />
+              <span className='min-is-0 flex-1 truncate'>{organizationName}</span>
+            </p>
+          )}
+        </div>
+      )}
+      <dl
+        className={mx(
+          previewProse,
+          'grid gap-2 grid-cols-[min-content_1fr] [&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0',
+        )}
+      >
+        {emails?.length &&
+          emails.map(({ label, value }) => (
+            <Fragment key={value}>
+              <dt>
+                <Icon icon='ph--at--regular' size={5} />
+              </dt>
+              <dd key={value} className='break-words'>
+                {value}
+              </dd>
+            </Fragment>
+          ))}
+      </dl>
+      {children}
+    </div>
+  );
+};

package/src/components/OrganizationCard.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { type Organization } from '@dxos/schema';
+
+import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
+
+export const OrganizationCard = ({
+  children,
+  classNames,
+  subject: { name, image, description, website },
+  role,
+}: PreviewProps<Organization>) => {
+  return (
+    <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
+      {image ? (
+        <img className='aspect-video object-cover is-full bs-auto' src={image} alt={name} />
+      ) : (
+        <div role='image' className='grid aspect-video place-items-center bg-input text-subdued'>
+          <Icon icon='ph--building-office--regular' size={10} />
+        </div>
+      )}
+      <h2 className={mx(previewTitle, previewProse)}>{name}</h2>
+      {description && <p className={mx(previewProse, 'line-clamp-2')}>{description}</p>}
+      {website && (
+        <div role='none' className={previewChrome}>
+          <a className='dx-button dx-focus-ring gap-2' href={website} target='_blank' rel='noreferrer'>
+            <Icon icon='ph--link--regular' size={5} classNames='text-subdued' />
+            <span className='grow'>{website}</span>
+            <Icon icon='ph--arrow-square-out--regular' />
+          </a>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/ProjectCard.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+import { type Project } from '@dxos/schema';
+
+import { type PreviewProps, popoverCard, previewTitle, defaultCard } from '../types';
+
+export const ProjectCard = ({ classNames, role, subject: { name, image, description } }: PreviewProps<Project>) => {
+  return (
+    <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
+      {image && <img className='is-full bs-auto' src={image} alt={name} />}
+      <h2 className={mx(previewTitle, 'pli-3 mlb-3')}>{name}</h2>
+      {description && <p className='pli-3 line-clamp-2 mlb-3'>{description}</p>}
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './ContactCard';
+export * from './OrganizationCard';
+export * from './ProjectCard';

package/src/index.ts

@@ -3,4 +3,6 @@
 //
 
 export * from './meta';
+export * from './types';
+
 export * from './PreviewPlugin';

package/src/translations.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { PREVIEW_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [PREVIEW_PLUGIN]: {
+        'unable to create preview message': 'No preview',
+      },
+    },
+  },
+];