@dxos/plugin-preview 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

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 AnyLiveObject,
-  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 { 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, [
@@ -76,139 +25,11 @@ export const PreviewPlugin = () =>
     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.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, 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: 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`,
-            role: ['popover', 'card--kanban'],
-            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`,
-            role: ['popover', 'card--kanban'],
-            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'],
-            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>;
-              }
-
-              return (
-                <Form
-                  schema={schema}
-                  values={data.subject}
-                  readonly={role === 'popover'}
-                  {...(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/OrganizationCard.tsx

@@ -21,7 +21,7 @@ export const OrganizationCard = ({
       {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/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';