@dxos/plugin-preview 0.8.3 → 0.8.4-main.28f8d3d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.3",
+  "version": "0.8.4-main.28f8d3d",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -24,33 +25,34 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "effect": "3.14.21",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/lit-ui": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/keys": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-editor": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-table": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/schema": "0.8.3"
+    "@dxos/app-framework": "0.8.4-main.28f8d3d",
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/client": "0.8.4-main.28f8d3d",
+    "@dxos/echo": "0.8.4-main.28f8d3d",
+    "@dxos/keys": "0.8.4-main.28f8d3d",
+    "@dxos/lit-ui": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d",
+    "@dxos/echo-schema": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-attention": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-deck": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-editor": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-form": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-stack": "0.8.4-main.28f8d3d",
+    "@dxos/schema": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-table": "0.8.4-main.28f8d3d",
+    "@dxos/util": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/random": "0.8.4-main.28f8d3d",
+    "@dxos/storybook-utils": "0.8.4-main.28f8d3d"
   },
   "peerDependencies": {
     "effect": "^3.13.3",

package/src/PreviewPlugin.tsx

@@ -8,7 +8,7 @@ import { DataType } from '@dxos/schema';
 
 import { PreviewPopover, ReactSurface } from './capabilities';
 import { meta } from './meta';
-import translations from './translations';
+import { translations } from './translations';
 
 export const PreviewPlugin = () =>
   definePlugin(meta, [

package/src/capabilities/preview-popover.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, LayoutAction, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { addEventListener } from '@dxos/async';
 import { type Client, resolveRef } from '@dxos/client';
-import { parseId, type Space } from '@dxos/client/echo';
+import { type Space, parseId } from '@dxos/client/echo';
 import { DXN } from '@dxos/keys';
 import { type DxRefTagActivate } from '@dxos/lit-ui';
 import { log } from '@dxos/log';

package/src/capabilities/react-surface.tsx

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Effect } from 'effect';
 import React, { useCallback } from 'react';
 
 import {
@@ -14,12 +15,15 @@ import {
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { fullyQualifiedId, getSchema, getSpace } from '@dxos/client/echo';
-import { Obj, Filter } from '@dxos/echo';
+import { Filter, Obj } from '@dxos/echo';
 import { type JsonPath, setValue } from '@dxos/echo-schema';
+import { AttentionAction } from '@dxos/plugin-attention/types';
+import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
+import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 import { Card } from '@dxos/react-ui-stack';
-import { TableType } from '@dxos/react-ui-table';
+import { TableView } from '@dxos/react-ui-table/types';
 import { descriptionMessage, mx } from '@dxos/react-ui-theme';
 import { DataType } from '@dxos/schema';
 
@@ -33,58 +37,87 @@ export default () =>
     //
     createSurface({
       id: `${PREVIEW_PLUGIN}/schema-popover--contact`,
-      role: ['popover', 'card--kanban', 'card--document', 'card'],
+      role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
       filter: (data): data is { subject: DataType.Person } => Obj.instanceOf(DataType.Person, data.subject),
       component: ({ data, role }) => {
-        const { dispatchPromise: dispatch } = useIntentDispatcher();
+        const { dispatch } = useIntentDispatcher();
+        const space = getSpace(data.subject);
+        const defaultSpace = useSpace();
+
+        const currentSpaceOrgs = useQuery(space, Filter.type(DataType.Organization));
+        const currentSpaceViews = useQuery(space, Filter.type(DataType.View));
+        const defaultSpaceViews = useQuery(defaultSpace, Filter.type(DataType.View));
+        const currentSpaceOrgTable = currentSpaceViews.find(
+          (view) =>
+            view.query.typename === DataType.Organization.typename &&
+            Obj.instanceOf(TableView, view.presentation.target),
+        );
+        const defaultSpaceOrgTable = defaultSpaceViews.find(
+          (view) =>
+            view.query.typename === DataType.Organization.typename &&
+            Obj.instanceOf(TableView, view.presentation.target),
+        );
+
+        // TODO(wittjosiah): Generalized way of handling related objects navigation.
         const handleOrgClick = useCallback(
-          async (org: DataType.Organization) => {
-            const space = getSpace(org);
-            const tablesQuery = await space?.db.query(Filter.type(TableType)).run();
-            const currentSpaceOrgTable = tablesQuery?.objects.find((table) => {
-              return table.view?.target?.query?.typename === DataType.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 },
+          (org: DataType.Organization) =>
+            Effect.gen(function* () {
+              const view = currentSpaceOrgs.includes(org) ? currentSpaceOrgTable : defaultSpaceOrgTable;
+              yield* dispatch(
+                createIntent(LayoutAction.UpdatePopover, {
+                  part: 'popover',
+                  options: {
+                    state: false,
+                    anchorId: '',
+                  },
                 }),
               );
-            }
-          },
-          [dispatch],
+              if (view) {
+                const id = fullyQualifiedId(view);
+                yield* dispatch(
+                  createIntent(LayoutAction.Open, {
+                    part: 'main',
+                    subject: [id],
+                    options: { workspace: space?.id },
+                  }),
+                );
+                yield* dispatch(
+                  createIntent(DeckAction.ChangeCompanion, {
+                    primary: id,
+                    companion: [id, 'selected-objects'].join(ATTENDABLE_PATH_SEPARATOR),
+                  }),
+                );
+                yield* dispatch(
+                  createIntent(AttentionAction.Select, {
+                    contextId: id,
+                    selection: { mode: 'multi', ids: [org.id] },
+                  }),
+                );
+              }
+            }).pipe(Effect.runPromise),
+          [dispatch, currentSpaceOrgs, currentSpaceOrgTable, defaultSpaceOrgTable],
         );
+
         return (
           <ContactCard role={role} subject={data.subject} onOrgClick={handleOrgClick}>
-            {role === 'popover' && <Surface role='related' data={data} />}
+            {role === 'card--popover' && <Surface role='related' data={data} />}
           </ContactCard>
         );
       },
     }),
     createSurface({
       id: `${PREVIEW_PLUGIN}/schema-popover--organization`,
-      role: ['popover', 'card--kanban', 'card--document', 'card'],
+      role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
       filter: (data): data is { subject: DataType.Organization } => Obj.instanceOf(DataType.Organization, data.subject),
       component: ({ data, role }) => (
         <OrganizationCard role={role} subject={data.subject}>
-          {role === 'popover' && <Surface role='related' data={data} />}
+          {role === 'card--popover' && <Surface role='related' data={data} />}
         </OrganizationCard>
       ),
     }),
     createSurface({
       id: `${PREVIEW_PLUGIN}/schema-popover--project`,
-      role: ['popover', 'card--kanban', 'card--document', 'card'],
+      role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
       filter: (data): data is { subject: DataType.Project } => Obj.instanceOf(DataType.Project, data.subject),
       component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,
     }),
@@ -94,7 +127,7 @@ export default () =>
     //
     createSurface({
       id: `${PREVIEW_PLUGIN}/fallback-popover`,
-      role: ['popover', 'card--kanban', 'card--document', 'card'],
+      role: ['card--popover', 'card--intrinsic', 'card--transclusion', 'card--extrinsic', 'card'],
       position: 'fallback',
       filter: (data): data is { subject: Obj.Any } => Obj.isObject(data.subject),
       component: ({ data, role }) => {
@@ -114,16 +147,16 @@ export default () =>
         }, []);
 
         return (
-          <Card.Container role={role}>
+          <Card.SurfaceRoot role={role}>
             <Form
               schema={schema}
               values={data.subject}
-              readonly={role === 'popover'}
+              readonly={role === 'card--popover'}
               onSave={handleSave}
               autoSave
-              {...(role === 'card--kanban' && { outerSpacing: 'blockStart-0' })}
+              {...(role === 'card--intrinsic' && { outerSpacing: 'blockStart-0' })}
             />
-          </Card.Container>
+          </Card.SurfaceRoot>
         );
       },
     }),

package/src/components/ContactCard.tsx

@@ -4,7 +4,7 @@
 
 import React, { Fragment } from 'react';
 
-import { Icon, Avatar, Button } from '@dxos/react-ui';
+import { Avatar, Button, Icon } from '@dxos/react-ui';
 import { Card, cardHeading, cardText } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 import { type DataType } from '@dxos/schema';
@@ -19,7 +19,7 @@ export const ContactCard = ({
 }: PreviewProps<DataType.Person> & { onOrgClick?: (org: DataType.Organization) => void }) => {
   const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;
   return (
-    <Card.Container role={role}>
+    <Card.SurfaceRoot role={role}>
       <Avatar.Root>
         <Card.Text role='group' classNames='grid gap-3 grid-cols-[min-content_1fr]'>
           <Avatar.Content imgSrc={image} icon='ph--user--regular' size={16} hue='neutral' />
@@ -46,25 +46,27 @@ export const ContactCard = ({
           )}
         </Card.Chrome>
       )}
-      <dl
-        className={mx(
-          cardText,
-          '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>
+      {emails?.length && (
+        <dl
+          className={mx(
+            cardText,
+            '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}
-    </Card.Container>
+    </Card.SurfaceRoot>
   );
 };

package/src/components/OrganizationCard.tsx

@@ -16,7 +16,7 @@ export const OrganizationCard = ({
   role,
 }: PreviewProps<DataType.Organization>) => {
   return (
-    <Card.Container role={role}>
+    <Card.SurfaceRoot role={role}>
       <Card.Poster alt={name!} {...(image ? { image } : { icon: 'ph--building-office--regular' })} />
       <Card.Heading>{name}</Card.Heading>
       {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
@@ -36,6 +36,6 @@ export const OrganizationCard = ({
         </Card.Chrome>
       )}
       {children}
-    </Card.Container>
+    </Card.SurfaceRoot>
   );
 };

package/src/components/ProjectCard.tsx

@@ -11,10 +11,10 @@ import { type PreviewProps } from '../types';
 
 export const ProjectCard = ({ subject: { name, image, description }, role }: PreviewProps<DataType.Project>) => {
   return (
-    <Card.Container role={role}>
+    <Card.SurfaceRoot role={role}>
       {image && <Card.Poster image={image} alt={name} aspect='auto' />}
       <Card.Heading>{name}</Card.Heading>
       {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
-    </Card.Container>
+    </Card.SurfaceRoot>
   );
 };

package/src/index.ts

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

package/src/stories/Card.stories.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
+
+import { Defaultstory, type DefaultstoryProps, createCards } from './testing';
+
+const meta: Meta<DefaultstoryProps> = {
+  title: 'plugins/plugin-preview/Card',
+  render: Defaultstory,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'flex flex-col justify-center' })],
+  parameters: { translations },
+  tags: ['cards'],
+};
+
+export default meta;
+
+type Story = StoryObj<DefaultstoryProps>;
+
+export const Popover = {
+  args: {
+    role: 'card--popover',
+    cards: createCards(),
+  },
+} satisfies Story;
+
+export const Intrinsic = {
+  args: {
+    role: 'card--intrinsic',
+    cards: createCards(),
+  },
+} satisfies Story;
+
+export const Extrinsic = {
+  args: {
+    role: 'card--extrinsic',
+    cards: createCards(),
+  },
+} satisfies Story;
+
+export const ExtrinsicNoImage = {
+  args: {
+    role: 'card--extrinsic',
+    cards: createCards(false),
+  },
+} satisfies Story;

package/src/stories/testing.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { Meta } from '@storybook/react-vite';
+import React, { type FC } from 'react';
+
+import { Obj, Ref } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { CardContainer } from '@dxos/react-ui-stack/testing';
+import { DataType } from '@dxos/schema';
+
+import { ContactCard, OrganizationCard, ProjectCard } from '../components';
+import { type PreviewProps } from '../types';
+
+faker.seed(1234);
+
+type CardProps<T extends object> = {
+  Component: FC<PreviewProps<T>>;
+  subject: T;
+  icon?: string;
+  image?: boolean;
+};
+
+export type DefaultstoryProps = {
+  role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic' | 'card--transclusion';
+  cards: CardProps<any>[];
+};
+
+export const Defaultstory: Meta<DefaultstoryProps>['render'] = ({ role, cards }) => {
+  return (
+    <div className='grid grid-cols-3'>
+      {cards.map(({ Component, icon, image, subject }, i) => (
+        <div key={i} className='flex justify-center'>
+          <CardContainer icon={icon} role={role}>
+            <Component role={role} subject={image ? subject : omitImage(subject)} />
+          </CardContainer>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const omitImage = ({ image: _, ...rest }: any) => rest;
+
+// TODO(burdon): Test data should exercise the standard data generators.
+export const createCards = (image = true): CardProps<any>[] => {
+  const organization = Obj.make(DataType.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 = Obj.make(DataType.Person, {
+    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: Ref.make(organization),
+    emails: [
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+      {
+        label: 'Work',
+        value: faker.internet.email(),
+      },
+    ],
+  });
+
+  const project = Obj.make(DataType.Project, {
+    name: faker.person.fullName(),
+    image: 'https://dxos.network/dxos-logotype-blue.png',
+    description: faker.lorem.paragraph(),
+  });
+
+  return [
+    {
+      Component: OrganizationCard,
+      subject: organization,
+      icon: 'ph--building-office--regular',
+      image,
+    },
+    {
+      Component: ContactCard,
+      subject: contact,
+      icon: 'ph--user--regular',
+      image,
+    },
+    {
+      Component: ProjectCard,
+      subject: project,
+      icon: 'ph--building--regular',
+      image,
+    },
+  ];
+};

package/src/translations.ts

@@ -2,14 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { PREVIEW_PLUGIN } from './meta';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+import { meta } from './meta';
+
+export const translations = [
   {
     'en-US': {
-      [PREVIEW_PLUGIN]: {
+      [meta.id]: {
         'unable to create preview message': 'No preview',
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/types.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Schema } from 'effect';
 import { type PropsWithChildren } from 'react';
 
-// TODO(burdon): Better place for these defs?
-export type PreviewProps<T extends object> = PropsWithChildren<{
+export type PreviewProps<T extends Schema.Schema.Type<any>> = PropsWithChildren<{
   subject: T;
   role?: string;
 }>;

package/dist/lib/browser/react-surface-J2R6Q33B.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/react-surface.tsx", "../../../src/components/ContactCard.tsx", "../../../src/components/OrganizationCard.tsx", "../../../src/components/ProjectCard.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport {\n  Capabilities,\n  LayoutAction,\n  Surface,\n  contributes,\n  createIntent,\n  createSurface,\n  useIntentDispatcher,\n} from '@dxos/app-framework';\nimport { fullyQualifiedId, getSchema, getSpace } from '@dxos/client/echo';\nimport { Obj, Filter } from '@dxos/echo';\nimport { type JsonPath, setValue } from '@dxos/echo-schema';\nimport { useTranslation } from '@dxos/react-ui';\nimport { Form } from '@dxos/react-ui-form';\nimport { Card } from '@dxos/react-ui-stack';\nimport { TableType } from '@dxos/react-ui-table';\nimport { descriptionMessage, mx } from '@dxos/react-ui-theme';\nimport { DataType } from '@dxos/schema';\n\nimport { ContactCard, OrganizationCard, ProjectCard } from '../components';\nimport { PREVIEW_PLUGIN } from '../meta';\n\nexport default () =>\n  contributes(Capabilities.ReactSurface, [\n    //\n    // Specific schema types.\n    //\n    createSurface({\n      id: `${PREVIEW_PLUGIN}/schema-popover--contact`,\n      role: ['popover', 'card--kanban', 'card--document', 'card'],\n      filter: (data): data is { subject: DataType.Person } => Obj.instanceOf(DataType.Person, data.subject),\n      component: ({ data, role }) => {\n        const { dispatchPromise: dispatch } = useIntentDispatcher();\n        const handleOrgClick = useCallback(\n          async (org: DataType.Organization) => {\n            const space = getSpace(org);\n            const tablesQuery = await space?.db.query(Filter.type(TableType)).run();\n            const currentSpaceOrgTable = tablesQuery?.objects.find((table) => {\n              return table.view?.target?.query?.typename === DataType.Organization.typename;\n            });\n            await dispatch(\n              createIntent(LayoutAction.UpdatePopover, {\n                part: 'popover',\n                options: {\n                  state: false,\n                  anchorId: '',\n                },\n              }),\n            );\n            if (currentSpaceOrgTable) {\n              return dispatch(\n                createIntent(LayoutAction.Open, {\n                  part: 'main',\n                  subject: [fullyQualifiedId(currentSpaceOrgTable)],\n                  options: { workspace: space?.id },\n                }),\n              );\n            }\n          },\n          [dispatch],\n        );\n        return (\n          <ContactCard role={role} subject={data.subject} onOrgClick={handleOrgClick}>\n            {role === 'popover' && <Surface role='related' data={data} />}\n          </ContactCard>\n        );\n      },\n    }),\n    createSurface({\n      id: `${PREVIEW_PLUGIN}/schema-popover--organization`,\n      role: ['popover', 'card--kanban', 'card--document', 'card'],\n      filter: (data): data is { subject: DataType.Organization } => Obj.instanceOf(DataType.Organization, data.subject),\n      component: ({ data, role }) => (\n        <OrganizationCard role={role} subject={data.subject}>\n          {role === 'popover' && <Surface role='related' data={data} />}\n        </OrganizationCard>\n      ),\n    }),\n    createSurface({\n      id: `${PREVIEW_PLUGIN}/schema-popover--project`,\n      role: ['popover', 'card--kanban', 'card--document', 'card'],\n      filter: (data): data is { subject: DataType.Project } => Obj.instanceOf(DataType.Project, data.subject),\n      component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,\n    }),\n\n    //\n    // Fallback for any object.\n    //\n    createSurface({\n      id: `${PREVIEW_PLUGIN}/fallback-popover`,\n      role: ['popover', 'card--kanban', 'card--document', 'card'],\n      position: 'fallback',\n      filter: (data): data is { subject: Obj.Any } => Obj.isObject(data.subject),\n      component: ({ data, role }) => {\n        const schema = getSchema(data.subject);\n        const { t } = useTranslation(PREVIEW_PLUGIN);\n        if (!schema) {\n          // TODO(burdon): Use Alert.\n          return <p className={mx(descriptionMessage)}>{t('unable to create preview message')}</p>;\n        }\n\n        const handleSave = useCallback((values: any, { changed }: { changed: Record<string, boolean> }) => {\n          const changedPaths = Object.keys(changed).filter((path) => changed[path]);\n          for (const path of changedPaths) {\n            const value = values[path];\n            setValue(data.subject, path as JsonPath, value);\n          }\n        }, []);\n\n        return (\n          <Card.Container role={role}>\n            <Form\n              schema={schema}\n              values={data.subject}\n              readonly={role === 'popover'}\n              onSave={handleSave}\n              autoSave\n              {...(role === 'card--kanban' && { outerSpacing: 'blockStart-0' })}\n            />\n          </Card.Container>\n        );\n      },\n    }),\n  ]);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { Fragment } from 'react';\n\nimport { Icon, Avatar, Button } from '@dxos/react-ui';\nimport { Card, cardHeading, cardText } from '@dxos/react-ui-stack';\nimport { mx } from '@dxos/react-ui-theme';\nimport { type DataType } from '@dxos/schema';\n\nimport { type PreviewProps } from '../types';\n\nexport const ContactCard = ({\n  children,\n  subject: { fullName, image, organization, emails },\n  onOrgClick,\n  role,\n}: PreviewProps<DataType.Person> & { onOrgClick?: (org: DataType.Organization) => void }) => {\n  const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;\n  return (\n    <Card.Container role={role}>\n      <Avatar.Root>\n        <Card.Text role='group' classNames='grid gap-3 grid-cols-[min-content_1fr]'>\n          <Avatar.Content imgSrc={image} icon='ph--user--regular' size={16} hue='neutral' />\n          <div role='none' className='bs-min self-center'>\n            <Avatar.Label asChild>\n              <h2 className={cardHeading}>{fullName}</h2>\n            </Avatar.Label>\n          </div>\n        </Card.Text>\n      </Avatar.Root>\n      {organizationName && (\n        <Card.Chrome>\n          {typeof organization === 'object' && onOrgClick ? (\n            <Button variant='ghost' classNames='gap-2 text-start' onClick={() => onOrgClick(organization.target!)}>\n              <Icon icon='ph--buildings--regular' size={5} classNames='text-subdued' />\n              <span className='min-is-0 flex-1 truncate'>{organizationName}</span>\n              <Icon icon='ph--arrow-right--regular' />\n            </Button>\n          ) : (\n            <p className='dx-button gap-2' data-variant='ghost'>\n              <Icon icon='ph--buildings--regular' size={5} classNames='text-subdued' />\n              <span className='min-is-0 flex-1 truncate'>{organizationName}</span>\n            </p>\n          )}\n        </Card.Chrome>\n      )}\n      <dl\n        className={mx(\n          cardText,\n          'grid gap-2 grid-cols-[min-content_1fr] [&_dt]:text-subdued [&_dt]:pbs-0.5 [&_dd]:min-is-0',\n        )}\n      >\n        {emails?.length &&\n          emails.map(({ label, value }) => (\n            <Fragment key={value}>\n              <dt>\n                <Icon icon='ph--at--regular' size={5} />\n              </dt>\n              <dd key={value} className='break-words'>\n                {value}\n              </dd>\n            </Fragment>\n          ))}\n      </dl>\n      {children}\n    </Card.Container>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Icon } from '@dxos/react-ui';\nimport { Card } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { type PreviewProps } from '../types';\n\nexport const OrganizationCard = ({\n  children,\n  subject: { name, image, description, website },\n  role,\n}: PreviewProps<DataType.Organization>) => {\n  return (\n    <Card.Container role={role}>\n      <Card.Poster alt={name!} {...(image ? { image } : { icon: 'ph--building-office--regular' })} />\n      <Card.Heading>{name}</Card.Heading>\n      {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}\n      {website && (\n        <Card.Chrome>\n          <a\n            className='dx-button dx-focus-ring gap-2'\n            data-variant='ghost'\n            href={website}\n            target='_blank'\n            rel='noreferrer'\n          >\n            <Icon icon='ph--link--regular' size={5} classNames='text-subdued' />\n            <span className='grow'>{website}</span>\n            <Icon icon='ph--arrow-square-out--regular' />\n          </a>\n        </Card.Chrome>\n      )}\n      {children}\n    </Card.Container>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Card } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { type PreviewProps } from '../types';\n\nexport const ProjectCard = ({ subject: { name, image, description }, role }: PreviewProps<DataType.Project>) => {\n  return (\n    <Card.Container role={role}>\n      {image && <Card.Poster image={image} alt={name} aspect='auto' />}\n      <Card.Heading>{name}</Card.Heading>\n      {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}\n    </Card.Container>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "useCallback", "Capabilities", "LayoutAction", "Surface", "contributes", "createIntent", "createSurface", "useIntentDispatcher", "fullyQualifiedId", "getSchema", "getSpace", "Obj", "Filter", "setValue", "useTranslation", "Form", "Card", "TableType", "descriptionMessage", "mx", "DataType", "React", "Fragment", "Icon", "Avatar", "Button", "Card", "cardHeading", "cardText", "mx", "ContactCard", "children", "subject", "fullName", "image", "organization", "emails", "onOrgClick", "role", "organizationName", "target", "name", "Card", "Container", "Avatar", "Root", "Text", "classNames", "Content", "imgSrc", "icon", "size", "hue", "div", "className", "Label", "asChild", "h2", "cardHeading", "Chrome", "Button", "variant", "onClick", "Icon", "span", "p", "data-variant", "dl", "mx", "cardText", "length", "map", "label", "value", "Fragment", "key", "dt", "dd", "React", "Icon", "Card", "OrganizationCard", "children", "subject", "name", "image", "description", "website", "role", "React", "Card", "Container", "Poster", "alt", "icon", "Heading", "Text", "classNames", "Chrome", "a", "className", "data-variant", "href", "target", "rel", "Icon", "size", "span", "React", "Card", "ProjectCard", "subject", "name", "image", "description", "role", "React", "Card", "Container", "Poster", "alt", "aspect", "Heading", "Text", "classNames", "contributes", "Capabilities", "ReactSurface", "createSurface", "id", "PREVIEW_PLUGIN", "role", "filter", "data", "Obj", "instanceOf", "DataType", "Person", "subject", "component", "dispatchPromise", "dispatch", "useIntentDispatcher", "handleOrgClick", "useCallback", "org", "space", "getSpace", "tablesQuery", "db", "query", "Filter", "type", "TableType", "run", "currentSpaceOrgTable", "objects", "find", "table", "view", "target", "typename", "Organization", "createIntent", "LayoutAction", "UpdatePopover", "part", "options", "state", "anchorId", "Open", "fullyQualifiedId", "workspace", "React", "ContactCard", "onOrgClick", "Surface", "OrganizationCard", "Project", "ProjectCard", "position", "isObject", "schema", "getSchema", "t", "useTranslation", "p", "className", "mx", "descriptionMessage", "handleSave", "values", "changed", "changedPaths", "Object", "keys", "path", "value", "setValue", "Card", "Container", "Form", "readonly", "onSave", "autoSave", "outerSpacing"]
-}