@dxos/plugin-preview 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/lib/browser/{chunk-CEWM5LJG.mjs → chunk-XLN6KTHK.mjs} +1 -1
  2. package/dist/lib/browser/chunk-XLN6KTHK.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +25 -35
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/preview-popover-Y67LE6TV.mjs +78 -0
  7. package/dist/lib/browser/preview-popover-Y67LE6TV.mjs.map +7 -0
  8. package/dist/lib/browser/react-surface-YCDD5VZC.mjs +263 -0
  9. package/dist/lib/browser/react-surface-YCDD5VZC.mjs.map +7 -0
  10. package/dist/lib/node-esm/{chunk-Q5MUNELK.mjs → chunk-2G4FUGDA.mjs} +1 -1
  11. package/dist/lib/node-esm/chunk-2G4FUGDA.mjs.map +7 -0
  12. package/dist/lib/node-esm/index.mjs +25 -35
  13. package/dist/lib/node-esm/index.mjs.map +4 -4
  14. package/dist/lib/node-esm/meta.json +1 -1
  15. package/dist/lib/node-esm/preview-popover-BGV2P6UX.mjs +80 -0
  16. package/dist/lib/node-esm/preview-popover-BGV2P6UX.mjs.map +7 -0
  17. package/dist/lib/node-esm/react-surface-MYZZR7AQ.mjs +264 -0
  18. package/dist/lib/node-esm/react-surface-MYZZR7AQ.mjs.map +7 -0
  19. package/dist/types/src/PreviewPlugin.d.ts +2 -1
  20. package/dist/types/src/PreviewPlugin.d.ts.map +1 -1
  21. package/dist/types/src/capabilities/index.d.ts +2 -2
  22. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  23. package/dist/types/src/capabilities/preview-popover/index.d.ts +3 -0
  24. package/dist/types/src/capabilities/preview-popover/index.d.ts.map +1 -0
  25. package/dist/types/src/capabilities/preview-popover/preview-popover.d.ts +5 -0
  26. package/dist/types/src/capabilities/preview-popover/preview-popover.d.ts.map +1 -0
  27. package/dist/types/src/capabilities/react-surface/index.d.ts +3 -0
  28. package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -0
  29. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +5 -0
  30. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -0
  31. package/dist/types/src/cards/FormCard.d.ts +7 -0
  32. package/dist/types/src/cards/FormCard.d.ts.map +1 -0
  33. package/dist/types/src/cards/OrganizationCard.d.ts +3 -3
  34. package/dist/types/src/cards/OrganizationCard.d.ts.map +1 -1
  35. package/dist/types/src/cards/PersonCard.d.ts +5 -0
  36. package/dist/types/src/cards/PersonCard.d.ts.map +1 -0
  37. package/dist/types/src/cards/ProjectCard.d.ts +3 -3
  38. package/dist/types/src/cards/ProjectCard.d.ts.map +1 -1
  39. package/dist/types/src/cards/TaskCard.d.ts +3 -3
  40. package/dist/types/src/cards/TaskCard.d.ts.map +1 -1
  41. package/dist/types/src/cards/index.d.ts +2 -1
  42. package/dist/types/src/cards/index.d.ts.map +1 -1
  43. package/dist/types/src/index.d.ts +0 -1
  44. package/dist/types/src/index.d.ts.map +1 -1
  45. package/dist/types/src/meta.d.ts +2 -2
  46. package/dist/types/src/meta.d.ts.map +1 -1
  47. package/dist/types/src/stories/Card.stories.d.ts +8 -7
  48. package/dist/types/src/stories/Card.stories.d.ts.map +1 -1
  49. package/dist/types/src/stories/testing.d.ts +13 -12
  50. package/dist/types/src/stories/testing.d.ts.map +1 -1
  51. package/dist/types/tsconfig.tsbuildinfo +1 -1
  52. package/package.json +43 -33
  53. package/src/PreviewPlugin.tsx +11 -23
  54. package/src/capabilities/index.ts +2 -4
  55. package/src/capabilities/preview-popover/index.ts +7 -0
  56. package/src/capabilities/preview-popover/preview-popover.ts +77 -0
  57. package/src/capabilities/react-surface/index.ts +7 -0
  58. package/src/capabilities/react-surface/react-surface.tsx +97 -0
  59. package/src/cards/FormCard.tsx +63 -0
  60. package/src/cards/OrganizationCard.tsx +18 -14
  61. package/src/cards/PersonCard.tsx +47 -0
  62. package/src/cards/ProjectCard.tsx +8 -10
  63. package/src/cards/TaskCard.tsx +19 -25
  64. package/src/cards/index.ts +2 -1
  65. package/src/index.ts +0 -1
  66. package/src/meta.ts +2 -2
  67. package/src/stories/Card.stories.tsx +28 -22
  68. package/src/stories/testing.tsx +41 -70
  69. package/dist/lib/browser/chunk-CEWM5LJG.mjs.map +0 -7
  70. package/dist/lib/browser/preview-popover-RKHENTFP.mjs +0 -65
  71. package/dist/lib/browser/preview-popover-RKHENTFP.mjs.map +0 -7
  72. package/dist/lib/browser/react-surface-3AR3BFLF.mjs +0 -515
  73. package/dist/lib/browser/react-surface-3AR3BFLF.mjs.map +0 -7
  74. package/dist/lib/node-esm/chunk-Q5MUNELK.mjs.map +0 -7
  75. package/dist/lib/node-esm/preview-popover-TZKX67EY.mjs +0 -67
  76. package/dist/lib/node-esm/preview-popover-TZKX67EY.mjs.map +0 -7
  77. package/dist/lib/node-esm/react-surface-L37JR7U2.mjs +0 -516
  78. package/dist/lib/node-esm/react-surface-L37JR7U2.mjs.map +0 -7
  79. package/dist/types/src/capabilities/preview-popover.d.ts +0 -4
  80. package/dist/types/src/capabilities/preview-popover.d.ts.map +0 -1
  81. package/dist/types/src/capabilities/react-surface.d.ts +0 -4
  82. package/dist/types/src/capabilities/react-surface.d.ts.map +0 -1
  83. package/dist/types/src/cards/ContactCard.d.ts +0 -5
  84. package/dist/types/src/cards/ContactCard.d.ts.map +0 -1
  85. package/dist/types/src/components/CardComponents.d.ts +0 -16
  86. package/dist/types/src/components/CardComponents.d.ts.map +0 -1
  87. package/dist/types/src/components/CardSubjectMenu.d.ts +0 -8
  88. package/dist/types/src/components/CardSubjectMenu.d.ts.map +0 -1
  89. package/dist/types/src/components/index.d.ts +0 -3
  90. package/dist/types/src/components/index.d.ts.map +0 -1
  91. package/dist/types/src/types.d.ts +0 -10
  92. package/dist/types/src/types.d.ts.map +0 -1
  93. package/src/capabilities/preview-popover.ts +0 -69
  94. package/src/capabilities/react-surface.tsx +0 -149
  95. package/src/cards/ContactCard.tsx +0 -65
  96. package/src/components/CardComponents.tsx +0 -67
  97. package/src/components/CardSubjectMenu.tsx +0 -91
  98. package/src/components/index.ts +0 -6
  99. package/src/types.ts +0 -15
package/package.json CHANGED
@@ -1,9 +1,13 @@
1
1
  {
2
2
  "name": "@dxos/plugin-preview",
3
- "version": "0.8.4-main.ae835ea",
3
+ "version": "0.8.4-main.bc674ce",
4
4
  "description": "Preview plugin",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/dxos/dxos"
10
+ },
7
11
  "license": "MIT",
8
12
  "author": "DXOS.org",
9
13
  "sideEffects": true,
@@ -24,43 +28,49 @@
24
28
  "src"
25
29
  ],
26
30
  "dependencies": {
27
- "@effect-rx/rx-react": "0.42.4",
28
- "@preact-signals/safe-react": "^0.9.0",
29
- "@dxos/app-graph": "0.8.4-main.ae835ea",
30
- "@dxos/app-framework": "0.8.4-main.ae835ea",
31
- "@dxos/async": "0.8.4-main.ae835ea",
32
- "@dxos/echo": "0.8.4-main.ae835ea",
33
- "@dxos/keys": "0.8.4-main.ae835ea",
34
- "@dxos/lit-ui": "0.8.4-main.ae835ea",
35
- "@dxos/plugin-attention": "0.8.4-main.ae835ea",
36
- "@dxos/client": "0.8.4-main.ae835ea",
37
- "@dxos/plugin-client": "0.8.4-main.ae835ea",
38
- "@dxos/plugin-deck": "0.8.4-main.ae835ea",
39
- "@dxos/log": "0.8.4-main.ae835ea",
40
- "@dxos/react-client": "0.8.4-main.ae835ea",
41
- "@dxos/react-ui": "0.8.4-main.ae835ea",
42
- "@dxos/plugin-space": "0.8.4-main.ae835ea",
43
- "@dxos/react-ui-editor": "0.8.4-main.ae835ea",
44
- "@dxos/react-ui-menu": "0.8.4-main.ae835ea",
45
- "@dxos/react-ui-table": "0.8.4-main.ae835ea",
46
- "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
47
- "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
48
- "@dxos/schema": "0.8.4-main.ae835ea",
49
- "@dxos/util": "0.8.4-main.ae835ea",
50
- "@dxos/react-ui-form": "0.8.4-main.ae835ea"
31
+ "@effect-atom/atom-react": "^0.4.6",
32
+ "@dxos/app-framework": "0.8.4-main.bc674ce",
33
+ "@dxos/app-graph": "0.8.4-main.bc674ce",
34
+ "@dxos/client": "0.8.4-main.bc674ce",
35
+ "@dxos/echo": "0.8.4-main.bc674ce",
36
+ "@dxos/effect": "0.8.4-main.bc674ce",
37
+ "@dxos/async": "0.8.4-main.bc674ce",
38
+ "@dxos/keys": "0.8.4-main.bc674ce",
39
+ "@dxos/lit-ui": "0.8.4-main.bc674ce",
40
+ "@dxos/log": "0.8.4-main.bc674ce",
41
+ "@dxos/operation": "0.8.4-main.bc674ce",
42
+ "@dxos/plugin-deck": "0.8.4-main.bc674ce",
43
+ "@dxos/plugin-attention": "0.8.4-main.bc674ce",
44
+ "@dxos/plugin-space": "0.8.4-main.bc674ce",
45
+ "@dxos/plugin-client": "0.8.4-main.bc674ce",
46
+ "@dxos/react-client": "0.8.4-main.bc674ce",
47
+ "@dxos/react-ui": "0.8.4-main.bc674ce",
48
+ "@dxos/react-ui-editor": "0.8.4-main.bc674ce",
49
+ "@dxos/react-ui-form": "0.8.4-main.bc674ce",
50
+ "@dxos/react-ui-menu": "0.8.4-main.bc674ce",
51
+ "@dxos/react-ui-table": "0.8.4-main.bc674ce",
52
+ "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
53
+ "@dxos/schema": "0.8.4-main.bc674ce",
54
+ "@dxos/ui-editor": "0.8.4-main.bc674ce",
55
+ "@dxos/util": "0.8.4-main.bc674ce",
56
+ "@dxos/ui-theme": "0.8.4-main.bc674ce",
57
+ "@dxos/types": "0.8.4-main.bc674ce"
51
58
  },
52
59
  "devDependencies": {
53
- "effect": "3.18.3",
54
- "react": "~19.2.0",
55
- "react-dom": "~19.2.0",
60
+ "effect": "3.19.11",
61
+ "react": "~19.2.3",
62
+ "react-dom": "~19.2.3",
56
63
  "vite": "7.1.9",
57
- "@dxos/storybook-utils": "0.8.4-main.ae835ea",
58
- "@dxos/random": "0.8.4-main.ae835ea"
64
+ "@dxos/echo-db": "0.8.4-main.bc674ce",
65
+ "@dxos/random": "0.8.4-main.bc674ce",
66
+ "@dxos/plugin-testing": "0.8.4-main.bc674ce",
67
+ "@dxos/react-ui-components": "0.8.4-main.bc674ce",
68
+ "@dxos/storybook-utils": "0.8.4-main.bc674ce"
59
69
  },
60
70
  "peerDependencies": {
61
- "effect": "^3.13.3",
62
- "react": "^19.0.0",
63
- "react-dom": "^19.0.0"
71
+ "effect": "3.19.11",
72
+ "react": "~19.2.3",
73
+ "react-dom": "~19.2.3"
64
74
  },
65
75
  "publishConfig": {
66
76
  "access": "public"
@@ -2,33 +2,21 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { Capabilities, Events, contributes, defineModule, definePlugin } from '@dxos/app-framework';
6
- import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
7
- import { DataType } from '@dxos/schema';
5
+ import { Common, Plugin } from '@dxos/app-framework';
6
+ import { Organization, Person } from '@dxos/types';
8
7
 
9
8
  import { PreviewPopover, ReactSurface } from './capabilities';
10
9
  import { meta } from './meta';
11
10
  import { translations } from './translations';
12
11
 
13
- export const PreviewPlugin = definePlugin(meta, () => [
14
- defineModule({
15
- id: `${meta.id}/module/translations`,
16
- activatesOn: Events.SetupTranslations,
17
- activate: () => contributes(Capabilities.Translations, translations),
18
- }),
19
- defineModule({
20
- id: `${meta.id}/module/schema`,
21
- activatesOn: ClientEvents.SetupSchema,
22
- activate: () => [contributes(ClientCapabilities.Schema, [DataType.Person, DataType.Organization])],
23
- }),
24
- defineModule({
25
- id: `${meta.id}/module/preview-popover`,
26
- activatesOn: Events.Startup,
12
+ export const PreviewPlugin = Plugin.define(meta).pipe(
13
+ Common.Plugin.addTranslationsModule({ translations }),
14
+ Common.Plugin.addSchemaModule({ schema: [Person.Person, Organization.Organization], id: 'schema' }),
15
+ Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
16
+ Plugin.addModule({
17
+ id: 'preview-popover',
18
+ activatesOn: Common.ActivationEvent.Startup,
27
19
  activate: PreviewPopover,
28
20
  }),
29
- defineModule({
30
- id: `${meta.id}/module/react-surface`,
31
- activatesOn: Events.SetupReactSurface,
32
- activate: ReactSurface,
33
- }),
34
- ]);
21
+ Plugin.make,
22
+ );
@@ -2,7 +2,5 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from '@dxos/app-framework';
6
-
7
- export const PreviewPopover = lazy(() => import('./preview-popover'));
8
- export const ReactSurface = lazy(() => import('./react-surface'));
5
+ export * from './preview-popover';
6
+ export * from './react-surface';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { Capability } from '@dxos/app-framework';
6
+
7
+ export const PreviewPopover = Capability.lazy('PreviewPopover', () => import('./preview-popover'));
@@ -0,0 +1,77 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import * as Effect from 'effect/Effect';
6
+
7
+ import { Capability, Common } from '@dxos/app-framework';
8
+ import { addEventListener } from '@dxos/async';
9
+ import { type Client } from '@dxos/client';
10
+ import { type Space, parseId } from '@dxos/client/echo';
11
+ import { DXN } from '@dxos/keys';
12
+ import { log } from '@dxos/log';
13
+ import { ClientCapabilities } from '@dxos/plugin-client';
14
+ import { DX_ANCHOR_ACTIVATE, type DxAnchorActivate } from '@dxos/react-ui';
15
+ import { type PreviewLinkRef, type PreviewLinkTarget } from '@dxos/ui-editor';
16
+
17
+ const customEventOptions = { capture: true, passive: false };
18
+
19
+ const handlePreviewLookup = async (
20
+ client: Client,
21
+ defaultSpace: Space,
22
+ { ref, label }: PreviewLinkRef,
23
+ ): Promise<PreviewLinkTarget | null> => {
24
+ try {
25
+ const object = await defaultSpace.db.makeRef(DXN.parse(ref)).load();
26
+ return { label, object };
27
+ } catch {
28
+ return null;
29
+ }
30
+ };
31
+
32
+ export default Capability.makeModule(
33
+ Effect.fnUntraced(function* () {
34
+ // Get context for lazy capability access in callbacks.
35
+ const capabilities = yield* Capability.Service;
36
+
37
+ // TODO(wittjosiah): Factor out lookup handlers to other plugins to make not ECHO-specific.
38
+ const handleAnchorActivate = async ({ refId, label, trigger, kind, title, side, props }: DxAnchorActivate) => {
39
+ const { invokePromise } = capabilities.get(Common.Capability.OperationInvoker);
40
+ const client = capabilities.get(ClientCapabilities.Client);
41
+ const registry = capabilities.get(Common.Capability.AtomRegistry);
42
+ const [layoutAtom] = capabilities.getAll(Common.Capability.Layout);
43
+ const layout = registry.get(layoutAtom);
44
+ const { spaceId } = parseId(layout.workspace);
45
+ const space = (spaceId && client.spaces.get(spaceId)) ?? client.spaces.default;
46
+ const result = await handlePreviewLookup(client, space, { ref: refId, label });
47
+ if (!result) {
48
+ return;
49
+ }
50
+
51
+ await invokePromise(Common.LayoutOperation.UpdatePopover, {
52
+ subject: result.object,
53
+ state: true,
54
+ variant: 'virtual',
55
+ anchor: trigger,
56
+ ...(kind && { kind }),
57
+ ...(title && { title }),
58
+ ...(side && { side }),
59
+ ...(props && { props }),
60
+ });
61
+ };
62
+
63
+ let cleanup: () => void;
64
+ if (document.defaultView) {
65
+ cleanup = addEventListener(
66
+ document.defaultView,
67
+ DX_ANCHOR_ACTIVATE as any,
68
+ handleAnchorActivate,
69
+ customEventOptions,
70
+ );
71
+ } else {
72
+ log.warn('No default view found');
73
+ }
74
+
75
+ return Capability.contributes(Common.Capability.Null, null, () => Effect.sync(() => cleanup?.()));
76
+ }),
77
+ );
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { Capability } from '@dxos/app-framework';
6
+
7
+ export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
@@ -0,0 +1,97 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import * as Effect from 'effect/Effect';
6
+ import React from 'react';
7
+
8
+ import { Capability, Common } from '@dxos/app-framework';
9
+ import { Surface } from '@dxos/app-framework/react';
10
+ import { Obj } from '@dxos/echo';
11
+ import { Card } from '@dxos/react-ui-mosaic';
12
+ import { type ProjectionModel } from '@dxos/schema';
13
+ import { Organization, Person, Project, Task } from '@dxos/types';
14
+
15
+ import { FormCard, OrganizationCard, PersonCard, ProjectCard, TaskCard } from '../../cards';
16
+ import { meta } from '../../meta';
17
+
18
+ export default Capability.makeModule(() =>
19
+ Effect.succeed(
20
+ Capability.contributes(Common.Capability.ReactSurface, [
21
+ //
22
+ // Specific schema types.
23
+ // TODO(burdon): Create helpers and factor out.
24
+ //
25
+
26
+ Common.createSurface<{ subject: Person.Person }>({
27
+ id: `${meta.id}/schema-popover--contact`,
28
+ role: 'card--content',
29
+ position: 'hoist',
30
+ filter: (data): data is { subject: Person.Person } => Obj.instanceOf(Person.Person, data.subject),
31
+ component: ({ data, role }) => {
32
+ return <PersonCard role={role} subject={data.subject} />;
33
+ },
34
+ }),
35
+ Common.createSurface({
36
+ id: `${meta.id}/schema-popover--organization`,
37
+ role: 'card--content',
38
+ position: 'hoist',
39
+ filter: (data): data is { subject: Organization.Organization } =>
40
+ Obj.instanceOf(Organization.Organization, data.subject),
41
+ component: ({ data, role }) => {
42
+ return <OrganizationCard role={role} subject={data.subject} />;
43
+ },
44
+ }),
45
+ Common.createSurface({
46
+ id: `${meta.id}/schema-popover--project`,
47
+ role: 'card--content',
48
+ position: 'hoist',
49
+ filter: (data): data is { subject: Project.Project } => Obj.instanceOf(Project.Project, data.subject),
50
+ component: ({ data, role }) => {
51
+ return <ProjectCard role={role} subject={data.subject} />;
52
+ },
53
+ }),
54
+ Common.createSurface({
55
+ id: `${meta.id}/schema-popover--task`,
56
+ role: 'card--content',
57
+ position: 'hoist',
58
+ filter: (data): data is { subject: Task.Task } => Obj.instanceOf(Task.Task, data.subject),
59
+ component: ({ data, role }) => {
60
+ return <TaskCard role={role} subject={data.subject} />;
61
+ },
62
+ }),
63
+
64
+ //
65
+ // Fallback for any object.
66
+ //
67
+
68
+ Common.createSurface({
69
+ id: `${meta.id}/fallback-popover`,
70
+ role: 'card--content',
71
+ position: 'fallback',
72
+ filter: (data): data is { subject: Obj.Unknown; projection?: ProjectionModel } => Obj.isObject(data.subject),
73
+ component: ({ data, role }) => {
74
+ return <FormCard role={role} subject={data.subject} projection={data.projection} />;
75
+ },
76
+ }),
77
+
78
+ Common.createSurface({
79
+ id: `${meta.id}/section`,
80
+ role: ['section'],
81
+ position: 'fallback',
82
+ filter: (data): data is { subject: Obj.Unknown } => Obj.isObject(data.subject),
83
+ component: ({ data }) => {
84
+ return (
85
+ <div role='none' className='flex is-full justify-center'>
86
+ <div role='none' className='pbs-2 pbe-2 card-min-width card-max-width'>
87
+ <Card.Root>
88
+ <Surface role='card--content' data={data} limit={1} />
89
+ </Card.Root>
90
+ </div>
91
+ </div>
92
+ );
93
+ },
94
+ }),
95
+ ]),
96
+ ),
97
+ );
@@ -0,0 +1,63 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import React, { useCallback } from 'react';
6
+
7
+ import { Common } from '@dxos/app-framework';
8
+ import { type SurfaceComponentProps, useOperationInvoker } from '@dxos/app-framework/react';
9
+ import { Obj } from '@dxos/echo';
10
+ import { type JsonPath, splitJsonPath } from '@dxos/effect';
11
+ import { IconButton, useTranslation } from '@dxos/react-ui';
12
+ import { Form, omitId } from '@dxos/react-ui-form';
13
+ import { Card } from '@dxos/react-ui-mosaic';
14
+ import { type ProjectionModel } from '@dxos/schema';
15
+ import { descriptionMessage, mx } from '@dxos/ui-theme';
16
+
17
+ import { meta } from '../meta';
18
+
19
+ export const FormCard = ({ subject, projection }: SurfaceComponentProps & { projection?: ProjectionModel }) => {
20
+ const { invokePromise } = useOperationInvoker();
21
+ const schema = Obj.getSchema(subject);
22
+ const { t } = useTranslation(meta.id);
23
+
24
+ const handleNavigate = useCallback(async () => {
25
+ await invokePromise(Common.LayoutOperation.UpdatePopover, { state: false, anchorId: '' });
26
+ await invokePromise(Common.LayoutOperation.Open, { subject: [Obj.getDXN(subject).toString()] });
27
+ }, [invokePromise, subject]);
28
+
29
+ if (!schema) {
30
+ // TODO(burdon): Use Alert.
31
+ return <p className={mx(descriptionMessage)}>{t('unable to create preview message')}</p>;
32
+ }
33
+
34
+ const handleSave = useCallback((values: any, { changed }: { changed: Record<string, boolean> }) => {
35
+ const paths = Object.keys(changed).filter((path) => changed[path]);
36
+ Obj.change(subject, () => {
37
+ for (const path of paths) {
38
+ const value = values[path];
39
+ const parts = splitJsonPath(path as JsonPath);
40
+ Obj.setValue(subject, parts, value);
41
+ }
42
+ });
43
+ }, []);
44
+
45
+ const label = Obj.getLabel(subject) ?? Obj.getTypename(subject) ?? t('unable to create preview message');
46
+
47
+ return (
48
+ <Card.Root id={subject.id}>
49
+ <Card.Heading classNames='flex items-center'>
50
+ {label}
51
+ <span className='grow' />
52
+ <IconButton iconOnly icon='ph--arrow-right--regular' label={t('open object label')} onClick={handleNavigate} />
53
+ </Card.Heading>
54
+ <Form.Root schema={omitId(schema)} projection={projection} values={subject} autoSave onSave={handleSave}>
55
+ <Form.Viewport>
56
+ <Form.Content>
57
+ <Form.FieldSet />
58
+ </Form.Content>
59
+ </Form.Viewport>
60
+ </Form.Root>
61
+ </Card.Root>
62
+ );
63
+ };
@@ -4,22 +4,26 @@
4
4
 
5
5
  import React from 'react';
6
6
 
7
- import { Card } from '@dxos/react-ui-stack';
8
- import { type DataType } from '@dxos/schema';
7
+ import { type SurfaceComponentProps } from '@dxos/app-framework/react';
8
+ import { Card } from '@dxos/react-ui-mosaic';
9
+ import { type Organization } from '@dxos/types';
9
10
 
10
- import { CardHeader, CardLink } from '../components';
11
- import { type PreviewProps } from '../types';
12
-
13
- export const OrganizationCard = ({ children, subject, role, activeSpace }: PreviewProps<DataType.Organization>) => {
14
- const { name, image, description, website } = subject;
11
+ export const OrganizationCard = ({ subject }: SurfaceComponentProps<Organization.Organization>) => {
12
+ const { image, description, website } = subject;
15
13
 
16
14
  return (
17
- <Card.SurfaceRoot role={role}>
18
- <Card.Poster alt={name ?? ''} {...(image ? { image } : { icon: 'ph--building-office--regular' })} />
19
- <CardHeader label={name} subject={subject} activeSpace={activeSpace} />
20
- {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
21
- {website && <CardLink label={website} href={website} />}
22
- {children}
23
- </Card.SurfaceRoot>
15
+ <Card.Content>
16
+ <Card.Poster
17
+ alt={name ?? ''}
18
+ {...(image ? { image } : { icon: 'ph--building-office--regular' })}
19
+ classNames={!image && 'opacity-50'}
20
+ />
21
+ {description && (
22
+ <Card.Row>
23
+ <Card.Text variant='description'>{description}</Card.Text>
24
+ </Card.Row>
25
+ )}
26
+ {website && <Card.Link label={website} href={website} />}
27
+ </Card.Content>
24
28
  );
25
29
  };
@@ -0,0 +1,47 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import React from 'react';
6
+
7
+ import { type SurfaceComponentProps } from '@dxos/app-framework/react';
8
+ import { Avatar } from '@dxos/react-ui';
9
+ import { Card } from '@dxos/react-ui-mosaic';
10
+ import { type Person } from '@dxos/types';
11
+
12
+ export const PersonCard = ({ subject }: SurfaceComponentProps<Person.Person>) => {
13
+ const { image, organization: { target: organization } = {}, emails = [] } = subject;
14
+
15
+ return (
16
+ <Avatar.Root>
17
+ <Card.Content>
18
+ {image && (
19
+ <Card.Row className='plb-1'>
20
+ <Avatar.Content
21
+ imgSrc={image}
22
+ icon='ph--user--regular'
23
+ size={16}
24
+ classNames={!image && 'opacity-50'}
25
+ hue='neutral'
26
+ variant='square'
27
+ />
28
+ </Card.Row>
29
+ )}
30
+ {organization?.name && (
31
+ <Card.Action
32
+ icon='ph--buildings--regular'
33
+ label={organization.name}
34
+ // onClick={onSelect ? () => onSelect(organization) : undefined}
35
+ />
36
+ )}
37
+ {emails.map(({ value }) => (
38
+ <Card.Row key={value} icon='ph--at--regular'>
39
+ <Card.Text truncate className='text-primaryText'>
40
+ {value}
41
+ </Card.Text>
42
+ </Card.Row>
43
+ ))}
44
+ </Card.Content>
45
+ </Avatar.Root>
46
+ );
47
+ };
@@ -4,21 +4,19 @@
4
4
 
5
5
  import React from 'react';
6
6
 
7
+ import { type SurfaceComponentProps } from '@dxos/app-framework/react';
7
8
  import { Obj } from '@dxos/echo';
8
- import { Card } from '@dxos/react-ui-stack';
9
- import { type DataType } from '@dxos/schema';
9
+ import { Card } from '@dxos/react-ui-mosaic';
10
+ import { type Project } from '@dxos/types';
10
11
 
11
- import { CardHeader } from '../components';
12
- import { type PreviewProps } from '../types';
13
-
14
- export const ProjectCard = ({ subject, role, activeSpace }: PreviewProps<DataType.Project>) => {
12
+ export const ProjectCard = ({ subject }: SurfaceComponentProps<Project.Project>) => {
15
13
  const { name, image, description } = subject;
16
14
 
17
15
  return (
18
- <Card.SurfaceRoot role={role}>
16
+ <Card.Content>
19
17
  {image && <Card.Poster image={image} alt={Obj.getLabel(subject) ?? ''} aspect='auto' />}
20
- <CardHeader label={name} subject={subject} activeSpace={activeSpace} />
21
- {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
22
- </Card.SurfaceRoot>
18
+ {/* <CardHeader label={name} subject={subject} db={db} /> */}
19
+ {description && <Card.Text variant='description'>{description}</Card.Text>}
20
+ </Card.Content>
23
21
  );
24
22
  };
@@ -5,17 +5,30 @@
5
5
  import * as SchemaAST from 'effect/SchemaAST';
6
6
  import React from 'react';
7
7
 
8
+ import { type SurfaceComponentProps } from '@dxos/app-framework/react';
8
9
  import { type PropertyMetaAnnotation, PropertyMetaAnnotationId } from '@dxos/echo/internal';
9
- import { Card, cardNoSpacing, cardSpacing } from '@dxos/react-ui-stack';
10
- import { mx } from '@dxos/react-ui-theme';
11
- import { DataType } from '@dxos/schema';
10
+ import { Card } from '@dxos/react-ui-mosaic';
11
+ import { Task } from '@dxos/types';
12
12
 
13
- import { CardSubjectMenu } from '../components';
14
- import { type PreviewProps } from '../types';
13
+ export const TaskCard = ({ subject }: SurfaceComponentProps<Task.Task>) => {
14
+ const { title, status } = subject;
15
+ const statusOption = getActiveStatusOption(status);
16
+
17
+ return (
18
+ <Card.Content>
19
+ <Card.Heading classNames='min-is-0 flex-1 truncate'>{title}</Card.Heading>
20
+ {statusOption && (
21
+ <span className='dx-tag' data-hue={statusOption.color}>
22
+ {statusOption.title}
23
+ </span>
24
+ )}
25
+ </Card.Content>
26
+ );
27
+ };
15
28
 
16
29
  // TODO(thure): Should this move upstream as a helper? Is there an easier way to get options?
17
30
  const getActiveStatusOption = (status?: string) => {
18
- const properties = SchemaAST.getPropertySignatures(DataType.Task.ast);
31
+ const properties = SchemaAST.getPropertySignatures(Task.Task.ast);
19
32
  const statusProperty = properties.find((p) => p.name === 'status');
20
33
  const statusMeta = SchemaAST.getAnnotation<PropertyMetaAnnotation>(PropertyMetaAnnotationId)(
21
34
  // TODO(thure): Typescript asserts `.type` doesn’t have `.types`, but in runtime it does.
@@ -25,22 +38,3 @@ const getActiveStatusOption = (status?: string) => {
25
38
  (statusMeta as any).value.singleSelect.options as { id: string; title: string; color: string }[];
26
39
  return options.find(({ id }) => id === status);
27
40
  };
28
-
29
- export const TaskCard = ({ subject, role, activeSpace }: PreviewProps<DataType.Task>) => {
30
- const { title, status } = subject;
31
- const statusOption = getActiveStatusOption(status);
32
-
33
- return (
34
- <Card.SurfaceRoot role={role}>
35
- <div role='none' className={mx('flex items-center gap-2', cardSpacing)}>
36
- <Card.Heading classNames={[cardNoSpacing, 'min-is-0 flex-1 truncate']}>{title}</Card.Heading>
37
- {statusOption && (
38
- <span className='dx-tag' data-hue={statusOption.color}>
39
- {statusOption.title}
40
- </span>
41
- )}
42
- <CardSubjectMenu subject={subject} activeSpace={activeSpace} />
43
- </div>
44
- </Card.SurfaceRoot>
45
- );
46
- };
@@ -2,7 +2,8 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './ContactCard';
5
+ export * from './FormCard';
6
6
  export * from './OrganizationCard';
7
+ export * from './PersonCard';
7
8
  export * from './ProjectCard';
8
9
  export * from './TaskCard';
package/src/index.ts CHANGED
@@ -3,6 +3,5 @@
3
3
  //
4
4
 
5
5
  export * from './meta';
6
- export type * from './types';
7
6
 
8
7
  export * from './PreviewPlugin';
package/src/meta.ts CHANGED
@@ -2,10 +2,10 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { type Plugin } from '@dxos/app-framework';
6
6
  import { trim } from '@dxos/util';
7
7
 
8
- export const meta: PluginMeta = {
8
+ export const meta: Plugin.Meta = {
9
9
  id: 'dxos.org/plugin/preview',
10
10
  name: 'Preview',
11
11
  description: trim`