@dxos/plugin-preview 0.8.2-main.36232bc → 0.8.2-main.5885341

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

@@ -13,7 +13,7 @@ declare const meta: Meta<StoryProps>;
 export default meta;
 export declare const ContactWithImage: {
     args: {
-        Component: ({ children, classNames, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<Contact> & {
+        Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<Contact> & {
             onOrgClick?: (org: Organization) => void;
         }) => React.JSX.Element;
         icon: string;
@@ -27,7 +27,7 @@ export declare const ContactWithImage: {
                 readonly id: string;
                 description?: string | undefined;
                 name?: string | undefined;
-                status?: "first" | "second" | "third" | "fourth" | undefined;
+                status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
                 image?: string | undefined;
                 website?: string | undefined;
             }> | undefined;
@@ -135,45 +135,49 @@ export declare const ContactWithImage: {
         } & {
             id: string;
         };
+        role: string;
     };
 };
 export declare const ContactNoImage: {
     args: {
-        Component: ({ children, classNames, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<Contact> & {
+        Component: ({ children, classNames, role, subject: { fullName, image, organization, emails }, onOrgClick, }: import("./types").PreviewProps<Contact> & {
             onOrgClick?: (org: Organization) => void;
         }) => React.JSX.Element;
         icon: string;
         subject: any;
+        role: string;
     };
 };
 export declare const OrganizationWithImage: {
     args: {
-        Component: ({ children, classNames, subject: { name, image, description, website }, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
+        Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
         icon: string;
         subject: Omit<{
             readonly id: string;
             image?: string | undefined;
             name?: string | undefined;
             description?: string | undefined;
-            status?: "first" | "second" | "third" | "fourth" | undefined;
+            status?: "prospect" | "qualified" | "active" | "commit" | "reject" | undefined;
             website?: string | undefined;
         }, "id"> & {
             id?: string;
         } & {
             id: string;
         };
+        role: string;
     };
 };
 export declare const OrganizationNoImage: {
     args: {
-        Component: ({ children, classNames, subject: { name, image, description, website }, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
+        Component: ({ children, classNames, subject: { name, image, description, website }, role, }: import("./types").PreviewProps<Organization>) => React.JSX.Element;
         icon: string;
         subject: any;
+        role: string;
     };
 };
 export declare const ProjectWithImage: {
     args: {
-        Component: ({ classNames, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
+        Component: ({ classNames, role, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
         icon: string;
         subject: Omit<{
             readonly id: string;
@@ -185,13 +189,15 @@ export declare const ProjectWithImage: {
         } & {
             id: string;
         };
+        role: string;
     };
 };
 export declare const ProjectNoImage: {
     args: {
-        Component: ({ classNames, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
+        Component: ({ classNames, role, subject: { name, image, description } }: import("./types").PreviewProps<Project>) => React.JSX.Element;
         icon: string;
         subject: any;
+        role: string;
     };
 };
 //# sourceMappingURL=Preview.stories.d.ts.map

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

@@ -1 +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;;;sBA5EyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DA2Hq0+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;;;sBApF2B,CAAA;;;;;CA0FrD,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4DAgI6v+M,KAAM,qBAAqB;+BAxF3p+M,KAAM,eAAe,YAAW,KAAM,qBACjK;;;;4DAuF62/M,KAAM,qBAAqB;+BAnE92/M,KAAM,eAEjC,YAGC,KAAE,qBAAqB;;;;4DA8Dy8gN,KAAM,qBAAqB;+BAhCv/gN,KAAM,eAAe,YAAW,KAClC,qBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAftB,CAAC;AAEF,eAAO,MAAM,cAAc;;;sBApF3B,CAAA;;;;;;CA2FC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;CAOjC,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;CAO/B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAO5B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;CAO1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewPlugin.d.ts","sourceRoot":"","sources":["../../../src/PreviewPlugin.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,aAAa,4CA8ItB,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

@@ -1,7 +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, subject: { fullName, image, organization, emails }, onOrgClick, }: PreviewProps<Contact> & {
+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

@@ -1 +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,EAA0D,MAAM,UAAU,CAAC;AAErG,eAAO,MAAM,WAAW,8FAKrB,YAAY,CAAC,OAAO,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAA;CAAE,sBAmDtE,CAAC"}
+{"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

@@ -1,5 +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 }, }: PreviewProps<Organization>) => React.JSX.Element;
+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

@@ -1 +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,EAA0D,MAAM,UAAU,CAAC;AAErG,eAAO,MAAM,gBAAgB,8EAI1B,YAAY,CAAC,YAAY,CAAC,sBAwB5B,CAAC"}
+{"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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type Project } from '@dxos/schema';
 import { type PreviewProps } from '../types';
-export declare const ProjectCard: ({ classNames, subject: { name, image, description } }: PreviewProps<Project>) => React.JSX.Element;
+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

@@ -1 +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,EAA6B,MAAM,UAAU,CAAC;AAExE,eAAO,MAAM,WAAW,0DAA2D,YAAY,CAAC,OAAO,CAAC,sBAQvG,CAAC"}
+{"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/types.d.ts

@@ -2,6 +2,7 @@ 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>
@@ -15,7 +16,9 @@ export type PreviewProps<T extends object> = PropsWithChildren<ThemedClassName<{
  *   </Card.Body>
  * </Card.Root>
  */
-export declare const previewCard = "popover-max-width rounded-lg overflow-hidden";
+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";

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

@@ -1 +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;CACZ,CAAC,CACH,CAAC;AAQF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,iDAAiD,CAAC;AAC1E,eAAO,MAAM,YAAY,qCAAqC,CAAC;AAC/D,eAAO,MAAM,YAAY,gBAAgB,CAAC;AAC1C,eAAO,MAAM,aAAa,4FAA4F,CAAC"}
+{"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.36232bc",
+  "version": "0.8.2-main.5885341",
   "description": "Preview plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,29 +23,29 @@
     "src"
   ],
   "dependencies": {
-    "@dxos/app-framework": "0.8.2-main.36232bc",
-    "@dxos/async": "0.8.2-main.36232bc",
-    "@dxos/client": "0.8.2-main.36232bc",
-    "@dxos/echo-schema": "0.8.2-main.36232bc",
-    "@dxos/keys": "0.8.2-main.36232bc",
-    "@dxos/lit-ui": "0.8.2-main.36232bc",
-    "@dxos/plugin-client": "0.8.2-main.36232bc",
-    "@dxos/log": "0.8.2-main.36232bc",
-    "@dxos/react-client": "0.8.2-main.36232bc",
-    "@dxos/react-ui": "0.8.2-main.36232bc",
-    "@dxos/react-ui-form": "0.8.2-main.36232bc",
-    "@dxos/react-ui-editor": "0.8.2-main.36232bc",
-    "@dxos/react-ui-theme": "0.8.2-main.36232bc",
-    "@dxos/util": "0.8.2-main.36232bc",
-    "@dxos/react-ui-table": "0.8.2-main.36232bc",
-    "@dxos/schema": "0.8.2-main.36232bc"
+    "@dxos/app-framework": "0.8.2-main.5885341",
+    "@dxos/keys": "0.8.2-main.5885341",
+    "@dxos/client": "0.8.2-main.5885341",
+    "@dxos/echo-schema": "0.8.2-main.5885341",
+    "@dxos/async": "0.8.2-main.5885341",
+    "@dxos/log": "0.8.2-main.5885341",
+    "@dxos/lit-ui": "0.8.2-main.5885341",
+    "@dxos/plugin-client": "0.8.2-main.5885341",
+    "@dxos/react-ui": "0.8.2-main.5885341",
+    "@dxos/react-client": "0.8.2-main.5885341",
+    "@dxos/react-ui-table": "0.8.2-main.5885341",
+    "@dxos/react-ui-editor": "0.8.2-main.5885341",
+    "@dxos/react-ui-theme": "0.8.2-main.5885341",
+    "@dxos/schema": "0.8.2-main.5885341",
+    "@dxos/react-ui-form": "0.8.2-main.5885341",
+    "@dxos/util": "0.8.2-main.5885341"
   },
   "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.36232bc"
+    "@dxos/random": "0.8.2-main.5885341"
   },
   "peerDependencies": {
     "effect": "3.13.3",

package/src/Preview.stories.tsx

@@ -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

@@ -43,6 +43,7 @@ import { Contact, Organization, Project } from '@dxos/schema';
 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 };
 
@@ -126,9 +127,9 @@ export const PreviewPlugin = () =>
           //
           createSurface({
             id: `${PREVIEW_PLUGIN}/schema-popover`,
-            role: 'popover',
+            role: ['popover', 'card--kanban'],
             filter: (data): data is { subject: Contact } => isInstanceOf(Contact, data.subject),
-            component: ({ data }) => {
+            component: ({ data, role }) => {
               const { dispatchPromise: dispatch } = useIntentDispatcher();
               const handleOrgClick = useCallback(
                 async (org: Organization) => {
@@ -159,27 +160,27 @@ export const PreviewPlugin = () =>
                 [dispatch],
               );
               return (
-                <ContactCard subject={data.subject} onOrgClick={handleOrgClick}>
-                  <Surface role='related' data={data} />
+                <ContactCard subject={data.subject} onOrgClick={handleOrgClick} role={role}>
+                  {role === 'popover' && <Surface role='related' data={data} />}
                 </ContactCard>
               );
             },
           }),
           createSurface({
             id: `${PREVIEW_PLUGIN}/schema-popover`,
-            role: 'popover',
+            role: ['popover', 'card--kanban'],
             filter: (data): data is { subject: Organization } => isInstanceOf(Organization, data.subject),
-            component: ({ data }) => (
-              <OrganizationCard subject={data.subject}>
-                <Surface role='related' data={data} />
+            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',
+            role: ['popover', 'card--kanban'],
             filter: (data): data is { subject: Project } => isInstanceOf(Project, data.subject),
-            component: ({ data }) => <ProjectCard subject={data.subject} />,
+            component: ({ data, role }) => <ProjectCard subject={data.subject} role={role} />,
           }),
 
           //
@@ -187,17 +188,24 @@ export const PreviewPlugin = () =>
           //
           createSurface({
             id: `${PREVIEW_PLUGIN}/fallback-popover`,
-            role: 'popover',
+            role: ['popover', 'card--kanban'],
             position: 'fallback',
             filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-            component: ({ data }) => {
+            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 />;
+              return (
+                <Form
+                  schema={schema}
+                  values={data.subject}
+                  readonly
+                  {...(role === 'card--kanban' && { classNames: kanbanCardWithoutPoster })}
+                />
+              );
             },
           }),
         ]),

package/src/components/ContactCard.tsx

@@ -8,17 +8,18 @@ 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, previewCard, previewTitle, previewProse, previewChrome } from '../types';
+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(previewCard, classNames)}>
+    <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' />

package/src/components/OrganizationCard.tsx

@@ -8,19 +8,20 @@ import { Icon } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { type Organization } from '@dxos/schema';
 
-import { type PreviewProps, previewCard, previewTitle, previewProse, previewChrome } from '../types';
+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(previewCard, classNames)}>
+    <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-groupSurface text-subdued'>
+        <div role='image' className='grid aspect-video place-items-center bg-input text-subdued'>
           <Icon icon='ph--building-office--regular' size={10} />
         </div>
       )}

package/src/components/ProjectCard.tsx

@@ -7,11 +7,11 @@ import React from 'react';
 import { mx } from '@dxos/react-ui-theme';
 import { type Project } from '@dxos/schema';
 
-import { type PreviewProps, previewCard, previewTitle } from '../types';
+import { type PreviewProps, popoverCard, previewTitle, defaultCard } from '../types';
 
-export const ProjectCard = ({ classNames, subject: { name, image, description } }: PreviewProps<Project>) => {
+export const ProjectCard = ({ classNames, role, subject: { name, image, description } }: PreviewProps<Project>) => {
   return (
-    <div role='none' className={mx(previewCard, classNames)}>
+    <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>}

package/src/types.ts

@@ -10,6 +10,7 @@ import { type ThemedClassName } from '@dxos/react-ui';
 export type PreviewProps<T extends object> = PropsWithChildren<
   ThemedClassName<{
     subject: T;
+    role: string;
   }>
 >;
 
@@ -31,7 +32,9 @@ export type PreviewProps<T extends object> = PropsWithChildren<
  *   </Card.Body>
  * </Card.Root>
  */
-export const previewCard = 'popover-max-width rounded-lg overflow-hidden';
+export const popoverCard = 'popover-consistent-width rounded-lg overflow-hidden';
+export const defaultCard = '';
+export const kanbanCardWithoutPoster = 'pbs-[--rail-action]';
 export const previewTitle = 'text-lg font-medium line-clamp-2';
 export const previewProse = 'pli-3 mlb-3';
 export const previewChrome = 'pli-1.5 mlb-1.5 [&_.dx-button]:pli-1.5 [&_.dx-button]:text-start [&_.dx-button]:is-full';