@dxos/plugin-preview 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-preview",
-  "version": "0.8.2-main.f11618f",
+  "version": "0.8.2-staging.42af850",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,32 +23,35 @@
     "src"
   ],
   "dependencies": {
-    "@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"
+    "@preact-signals/safe-react": "^0.9.0",
+    "effect": "3.14.21",
+    "@dxos/app-framework": "0.8.2-staging.42af850",
+    "@dxos/async": "0.8.2-staging.42af850",
+    "@dxos/client": "0.8.2-staging.42af850",
+    "@dxos/echo": "0.8.2-staging.42af850",
+    "@dxos/echo-schema": "0.8.2-staging.42af850",
+    "@dxos/keys": "0.8.2-staging.42af850",
+    "@dxos/lit-ui": "0.8.2-staging.42af850",
+    "@dxos/plugin-client": "0.8.2-staging.42af850",
+    "@dxos/log": "0.8.2-staging.42af850",
+    "@dxos/react-client": "0.8.2-staging.42af850",
+    "@dxos/react-ui": "0.8.2-staging.42af850",
+    "@dxos/react-ui-form": "0.8.2-staging.42af850",
+    "@dxos/react-ui-editor": "0.8.2-staging.42af850",
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
+    "@dxos/schema": "0.8.2-staging.42af850",
+    "@dxos/react-ui-table": "0.8.2-staging.42af850",
+    "@dxos/util": "0.8.2-staging.42af850"
   },
   "devDependencies": {
-    "effect": "3.13.3",
+    "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.2-main.f11618f"
+    "@dxos/random": "0.8.2-staging.42af850"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0"
   },

package/src/Preview.stories.tsx

@@ -11,7 +11,7 @@ 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 { DataType } from '@dxos/schema';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { ContactCard, OrganizationCard, ProjectCard } from './components';
@@ -40,7 +40,7 @@ const meta: Meta<StoryProps> = {
       </Popover.Root>
     );
   },
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   parameters: {
     layout: 'centered',
     translations,
@@ -52,7 +52,7 @@ export default meta;
 const omitImage = ({ image, ...rest }: any) => rest;
 
 const data = (() => {
-  const organization = create(Organization, {
+  const organization = create(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',
@@ -60,7 +60,7 @@ const data = (() => {
     description: faker.lorem.paragraph(),
   });
 
-  const contact = create(Contact, {
+  const contact = create(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',
@@ -81,7 +81,7 @@ const data = (() => {
     ],
   });
 
-  const project = create(Project, {
+  const project = create(DataType.Project, {
     name: faker.person.fullName(),
     image: 'https://dxos.network/dxos-logotype-blue.png',
     description: faker.lorem.paragraph(),
@@ -95,6 +95,7 @@ export const ContactWithImage = {
     Component: ContactCard,
     icon: 'ph--user--regular',
     subject: data.contact,
+    role: 'popover',
   },
 };
 
@@ -103,6 +104,7 @@ export const ContactNoImage = {
     Component: ContactCard,
     icon: 'ph--user--regular',
     subject: omitImage(data.contact),
+    role: 'popover',
   },
 };
 
@@ -111,6 +113,7 @@ export const OrganizationWithImage = {
     Component: OrganizationCard,
     icon: 'ph--building-office--regular',
     subject: data.organization,
+    role: 'popover',
   },
 };
 
@@ -119,6 +122,7 @@ export const OrganizationNoImage = {
     Component: OrganizationCard,
     icon: 'ph--building-office--regular',
     subject: omitImage(data.organization),
+    role: 'popover',
   },
 };
 
@@ -127,6 +131,7 @@ export const ProjectWithImage = {
     Component: ProjectCard,
     icon: 'ph--building--regular',
     subject: data.project,
+    role: 'popover',
   },
 };
 
@@ -135,5 +140,6 @@ export const ProjectNoImage = {
     Component: ProjectCard,
     icon: 'ph--building--regular',
     subject: omitImage(data.project),
+    role: 'popover',
   },
 };

package/src/PreviewPlugin.tsx

@@ -2,64 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
-
-import {
-  Capabilities,
-  Events,
-  LayoutAction,
-  Surface,
-  contributes,
-  createIntent,
-  createSurface,
-  defineModule,
-  definePlugin,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { addEventListener } from '@dxos/async';
-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 { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
 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 { DataType } from '@dxos/schema';
 
-import { ContactCard, OrganizationCard, ProjectCard } from './components';
-import { meta, PREVIEW_PLUGIN } from './meta';
+import { PreviewPopover, ReactSurface } from './capabilities';
+import { meta } from './meta';
 import translations from './translations';
-import { kanbanCardWithoutPoster } from './types';
-
-const customEventOptions = { capture: true, passive: false };
-
-const handlePreviewLookup = async (
-  client: Client,
-  defaultSpace: Space,
-  { ref, label }: PreviewLinkRef,
-): Promise<PreviewLinkTarget | null> => {
-  const dxn = DXN.parse(ref);
-  if (!dxn) {
-    return null;
-  }
-
-  const object = await resolveRef(client, dxn, defaultSpace);
-  return { label, object };
-};
 
 export const PreviewPlugin = () =>
   definePlugin(meta, [
@@ -71,143 +20,16 @@ export const PreviewPlugin = () =>
     defineModule({
       id: `${meta.id}/module/schema`,
       activatesOn: ClientEvents.SetupSchema,
-      activate: () => [contributes(ClientCapabilities.Schema, [Contact, Organization])],
+      activate: () => [contributes(ClientCapabilities.Schema, [DataType.Person, DataType.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.
-        const handleDxRefTagActivate = async ({ ref, label, trigger }: DxRefTagActivate) => {
-          const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-          const client = context.requestCapability(ClientCapabilities.Client);
-          const [layout] = context.requestCapabilities(Capabilities.Layout);
-          const { spaceId } = parseId(layout.workspace);
-          const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
-          const result = await handlePreviewLookup(client, space, { ref, label });
-          if (!result) {
-            return;
-          }
-
-          await dispatch(
-            createIntent(LayoutAction.UpdatePopover, {
-              part: 'popover',
-              subject: result.object,
-              options: {
-                state: true,
-                variant: 'virtual',
-                anchor: trigger,
-              },
-            }),
-          );
-        };
-
-        if (!document.defaultView) {
-          log.warn('No default view found');
-          return [];
-        }
-
-        const cleanup = addEventListener(
-          document.defaultView,
-          'dx-ref-tag-activate',
-          handleDxRefTagActivate,
-          customEventOptions,
-        );
-        return contributes(Capabilities.Null, null, () => cleanup());
-      },
+      activate: PreviewPopover,
     }),
     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 })}
-                />
-              );
-            },
-          }),
-        ]),
+      activate: ReactSurface,
     }),
   ]);

package/src/capabilities/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const PreviewPopover = lazy(() => import('./preview-popover'));
+export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/preview-popover.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, LayoutAction, contributes, createIntent, type PluginContext } 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 { DXN } from '@dxos/keys';
+import { type DxRefTagActivate } from '@dxos/lit-ui';
+import { log } from '@dxos/log';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/react-ui-editor';
+
+const customEventOptions = { capture: true, passive: false };
+
+const handlePreviewLookup = async (
+  client: Client,
+  defaultSpace: Space,
+  { ref, label }: PreviewLinkRef,
+): Promise<PreviewLinkTarget | null> => {
+  const dxn = DXN.parse(ref);
+  if (!dxn) {
+    return null;
+  }
+
+  const object = await resolveRef(client, dxn, defaultSpace);
+  return { label, object };
+};
+
+export default (context: PluginContext) => {
+  // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.
+  const handleDxRefTagActivate = async ({ refId, label, trigger }: DxRefTagActivate) => {
+    const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+    const client = context.getCapability(ClientCapabilities.Client);
+    const [layout] = context.getCapabilities(Capabilities.Layout);
+    const { spaceId } = parseId(layout.workspace);
+    const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
+    const result = await handlePreviewLookup(client, space, { ref: refId, label });
+    if (!result) {
+      return;
+    }
+
+    await dispatch(
+      createIntent(LayoutAction.UpdatePopover, {
+        part: 'popover',
+        subject: result.object,
+        options: {
+          state: true,
+          variant: 'virtual',
+          anchor: trigger,
+        },
+      }),
+    );
+  };
+
+  let cleanup: () => void;
+  if (document.defaultView) {
+    cleanup = addEventListener(document.defaultView, 'dx-ref-tag-activate', handleDxRefTagActivate, customEventOptions);
+  } else {
+    log.warn('No default view found');
+  }
+
+  return contributes(Capabilities.Null, null, () => cleanup());
+};

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,126 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import {
+  Capabilities,
+  LayoutAction,
+  Surface,
+  contributes,
+  createIntent,
+  createSurface,
+  useIntentDispatcher,
+} from '@dxos/app-framework';
+import { Filter, fullyQualifiedId, getSchema, getSpace, isEchoObject, type AnyLiveObject } from '@dxos/client/echo';
+import { isInstanceOf, type JsonPath, setValue } from '@dxos/echo-schema';
+import { useTranslation } from '@dxos/react-ui';
+import { Form } from '@dxos/react-ui-form';
+import { TableType } from '@dxos/react-ui-table';
+import { descriptionMessage } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+
+import { ContactCard, OrganizationCard, ProjectCard } from '../components';
+import { PREVIEW_PLUGIN } from '../meta';
+import { kanbanCardWithoutPoster } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    //
+    // Specific schema types.
+    //
+    createSurface({
+      id: `${PREVIEW_PLUGIN}/schema-popover--contact`,
+      role: ['popover', 'card--kanban', 'card'],
+      filter: (data): data is { subject: DataType.Person } => isInstanceOf(DataType.Person, data.subject),
+      component: ({ data, role }) => {
+        const { dispatchPromise: dispatch } = useIntentDispatcher();
+        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 },
+                }),
+              );
+            }
+          },
+          [dispatch],
+        );
+        return (
+          <ContactCard subject={data.subject} onOrgClick={handleOrgClick} role={role}>
+            {role === 'popover' && <Surface role='related' data={data} />}
+          </ContactCard>
+        );
+      },
+    }),
+    createSurface({
+      id: `${PREVIEW_PLUGIN}/schema-popover--organization`,
+      role: ['popover', 'card--kanban', 'card'],
+      filter: (data): data is { subject: DataType.Organization } => isInstanceOf(DataType.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--project`,
+      role: ['popover', 'card--kanban', 'card'],
+      filter: (data): data is { subject: DataType.Project } => isInstanceOf(DataType.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', 'card'],
+      position: 'fallback',
+      filter: (data): data is { subject: AnyLiveObject<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>;
+        }
+
+        const handleSave = useCallback((values: any, { changed }: { changed: Record<string, boolean> }) => {
+          const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+          for (const path of changedPaths) {
+            const value = values[path];
+            setValue(data.subject, path as JsonPath, value);
+          }
+        }, []);
+
+        return (
+          <Form
+            schema={schema}
+            values={data.subject}
+            readonly={role === 'popover'}
+            onSave={handleSave}
+            autoSave
+            {...(role === 'card--kanban' && { classNames: kanbanCardWithoutPoster })}
+          />
+        );
+      },
+    }),
+  ]);

package/src/components/ContactCard.tsx

@@ -6,7 +6,7 @@ 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 DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
 
@@ -16,7 +16,7 @@ export const ContactCard = ({
   role,
   subject: { fullName, image, organization, emails },
   onOrgClick,
-}: PreviewProps<Contact> & { onOrgClick?: (org: Organization) => void }) => {
+}: PreviewProps<DataType.Person> & { onOrgClick?: (org: DataType.Organization) => void }) => {
   const organizationName = organization && typeof organization === 'object' ? organization.target?.name : organization;
   return (
     <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>

package/src/components/OrganizationCard.tsx

@@ -6,7 +6,7 @@ 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 DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, previewProse, previewChrome, defaultCard } from '../types';
 
@@ -15,13 +15,13 @@ export const OrganizationCard = ({
   classNames,
   subject: { name, image, description, website },
   role,
-}: PreviewProps<Organization>) => {
+}: PreviewProps<DataType.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'>
+        <div role='image' className='grid aspect-video place-items-center bg-inputSurface text-subdued'>
           <Icon icon='ph--building-office--regular' size={10} />
         </div>
       )}
@@ -29,7 +29,13 @@ export const OrganizationCard = ({
       {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'>
+          <a
+            className='dx-button dx-focus-ring gap-2'
+            data-variant='ghost'
+            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' />

package/src/components/ProjectCard.tsx

@@ -5,11 +5,15 @@
 import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
-import { type Project } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { type PreviewProps, popoverCard, previewTitle, defaultCard } from '../types';
 
-export const ProjectCard = ({ classNames, role, subject: { name, image, description } }: PreviewProps<Project>) => {
+export const ProjectCard = ({
+  classNames,
+  role,
+  subject: { name, image, description },
+}: PreviewProps<DataType.Project>) => {
   return (
     <div role='none' className={mx(role === 'popover' ? popoverCard : defaultCard, classNames)}>
       {image && <img className='is-full bs-auto' src={image} alt={name} />}

package/src/types.ts

@@ -32,7 +32,7 @@ export type PreviewProps<T extends object> = PropsWithChildren<
  *   </Card.Body>
  * </Card.Root>
  */
-export const popoverCard = 'popover-consistent-width rounded-lg overflow-hidden';
+export const popoverCard = 'popover-card-width rounded-lg overflow-hidden';
 export const defaultCard = '';
 export const kanbanCardWithoutPoster = 'pbs-[--rail-action]';
 export const previewTitle = 'text-lg font-medium line-clamp-2';