@dxos/plugin-board 0.8.4-main.c4373fc → 0.8.4-main.d9fc60f731

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 (114) hide show
  1. package/LICENSE +102 -5
  2. package/PLUGIN.mdl +337 -0
  3. package/README.md +1 -1
  4. package/dist/lib/neutral/BoardArticle-XCMTXRNW.mjs +168 -0
  5. package/dist/lib/neutral/BoardArticle-XCMTXRNW.mjs.map +7 -0
  6. package/dist/lib/neutral/BoardPlugin.mjs +42 -0
  7. package/dist/lib/neutral/BoardPlugin.mjs.map +7 -0
  8. package/dist/lib/neutral/capabilities/index.mjs +11 -0
  9. package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
  10. package/dist/lib/neutral/chunk-CY5X6YV4.mjs +34 -0
  11. package/dist/lib/neutral/chunk-CY5X6YV4.mjs.map +7 -0
  12. package/dist/lib/neutral/chunk-HUBZKCPA.mjs +32 -0
  13. package/dist/lib/neutral/chunk-HUBZKCPA.mjs.map +7 -0
  14. package/dist/lib/neutral/chunk-J5LGTIGS.mjs +10 -0
  15. package/dist/lib/neutral/components/index.mjs +1 -0
  16. package/dist/lib/neutral/containers/index.mjs +9 -0
  17. package/dist/lib/neutral/containers/index.mjs.map +7 -0
  18. package/dist/lib/neutral/create-object-BRISOU7F.mjs +28 -0
  19. package/dist/lib/neutral/create-object-BRISOU7F.mjs.map +7 -0
  20. package/dist/lib/neutral/index.mjs +12 -0
  21. package/dist/lib/neutral/index.mjs.map +7 -0
  22. package/dist/lib/neutral/meta.json +1 -0
  23. package/dist/lib/neutral/meta.mjs +8 -0
  24. package/dist/lib/neutral/meta.mjs.map +7 -0
  25. package/dist/lib/neutral/plugin.mjs +12 -0
  26. package/dist/lib/neutral/plugin.mjs.map +7 -0
  27. package/dist/lib/neutral/react-surface-M5JHK3ZQ.mjs +26 -0
  28. package/dist/lib/neutral/react-surface-M5JHK3ZQ.mjs.map +7 -0
  29. package/dist/lib/neutral/translations.mjs +30 -0
  30. package/dist/lib/neutral/translations.mjs.map +7 -0
  31. package/dist/lib/{browser → neutral}/types/index.mjs +2 -1
  32. package/dist/lib/neutral/types/index.mjs.map +7 -0
  33. package/dist/types/src/BoardPlugin.d.ts +3 -1
  34. package/dist/types/src/BoardPlugin.d.ts.map +1 -1
  35. package/dist/types/src/BoardPlugin.test.d.ts +2 -0
  36. package/dist/types/src/BoardPlugin.test.d.ts.map +1 -0
  37. package/dist/types/src/capabilities/create-object.d.ts +11 -0
  38. package/dist/types/src/capabilities/create-object.d.ts.map +1 -0
  39. package/dist/types/src/capabilities/index.d.ts +8 -2
  40. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  41. package/dist/types/src/capabilities/react-surface.d.ts +3 -2
  42. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  43. package/dist/types/src/components/index.d.ts +0 -1
  44. package/dist/types/src/components/index.d.ts.map +1 -1
  45. package/dist/types/src/containers/BoardArticle/BoardArticle.d.ts +6 -0
  46. package/dist/types/src/containers/BoardArticle/BoardArticle.d.ts.map +1 -0
  47. package/dist/types/src/containers/BoardArticle/BoardArticle.stories.d.ts +54 -0
  48. package/dist/types/src/containers/BoardArticle/BoardArticle.stories.d.ts.map +1 -0
  49. package/dist/types/src/containers/BoardArticle/index.d.ts +2 -0
  50. package/dist/types/src/containers/BoardArticle/index.d.ts.map +1 -0
  51. package/dist/types/src/containers/index.d.ts +3 -0
  52. package/dist/types/src/containers/index.d.ts.map +1 -0
  53. package/dist/types/src/index.d.ts +0 -2
  54. package/dist/types/src/index.d.ts.map +1 -1
  55. package/dist/types/src/meta.d.ts +2 -2
  56. package/dist/types/src/meta.d.ts.map +1 -1
  57. package/dist/types/src/plugin.d.ts +3 -0
  58. package/dist/types/src/plugin.d.ts.map +1 -0
  59. package/dist/types/src/translations.d.ts +22 -13
  60. package/dist/types/src/translations.d.ts.map +1 -1
  61. package/dist/types/src/types/Board.d.ts +27 -70
  62. package/dist/types/src/types/Board.d.ts.map +1 -1
  63. package/dist/types/tsconfig.tsbuildinfo +1 -1
  64. package/package.json +96 -59
  65. package/src/BoardPlugin.test.ts +27 -0
  66. package/src/BoardPlugin.tsx +21 -49
  67. package/src/capabilities/create-object.ts +31 -0
  68. package/src/capabilities/index.ts +3 -3
  69. package/src/capabilities/react-surface.tsx +23 -14
  70. package/src/components/index.ts +0 -2
  71. package/src/containers/BoardArticle/BoardArticle.stories.tsx +122 -0
  72. package/src/containers/BoardArticle/BoardArticle.tsx +186 -0
  73. package/src/containers/BoardArticle/index.ts +5 -0
  74. package/src/containers/index.ts +7 -0
  75. package/src/index.ts +0 -3
  76. package/src/meta.ts +20 -6
  77. package/src/plugin.ts +9 -0
  78. package/src/translations.ts +14 -11
  79. package/src/types/Board.ts +8 -24
  80. package/src/vite-env.d.ts +10 -0
  81. package/dist/lib/browser/chunk-RHMZXTJ7.mjs +0 -129
  82. package/dist/lib/browser/chunk-RHMZXTJ7.mjs.map +0 -7
  83. package/dist/lib/browser/chunk-Z6L4ZVCB.mjs +0 -59
  84. package/dist/lib/browser/chunk-Z6L4ZVCB.mjs.map +0 -7
  85. package/dist/lib/browser/index.mjs +0 -89
  86. package/dist/lib/browser/index.mjs.map +0 -7
  87. package/dist/lib/browser/intent-resolver-H6OF7V77.mjs +0 -33
  88. package/dist/lib/browser/intent-resolver-H6OF7V77.mjs.map +0 -7
  89. package/dist/lib/browser/meta.json +0 -1
  90. package/dist/lib/browser/react-surface-37LEVBKY.mjs +0 -30
  91. package/dist/lib/browser/react-surface-37LEVBKY.mjs.map +0 -7
  92. package/dist/lib/node-esm/chunk-AWLY252W.mjs +0 -60
  93. package/dist/lib/node-esm/chunk-AWLY252W.mjs.map +0 -7
  94. package/dist/lib/node-esm/chunk-XZA5WICX.mjs +0 -131
  95. package/dist/lib/node-esm/chunk-XZA5WICX.mjs.map +0 -7
  96. package/dist/lib/node-esm/index.mjs +0 -90
  97. package/dist/lib/node-esm/index.mjs.map +0 -7
  98. package/dist/lib/node-esm/intent-resolver-L534P6FM.mjs +0 -34
  99. package/dist/lib/node-esm/intent-resolver-L534P6FM.mjs.map +0 -7
  100. package/dist/lib/node-esm/meta.json +0 -1
  101. package/dist/lib/node-esm/react-surface-GVHSH2W2.mjs +0 -31
  102. package/dist/lib/node-esm/react-surface-GVHSH2W2.mjs.map +0 -7
  103. package/dist/lib/node-esm/types/index.mjs +0 -8
  104. package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
  105. package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
  106. package/dist/types/src/components/BoardContainer.d.ts +0 -8
  107. package/dist/types/src/components/BoardContainer.d.ts.map +0 -1
  108. package/dist/types/src/components/BoardContainer.stories.d.ts +0 -45
  109. package/dist/types/src/components/BoardContainer.stories.d.ts.map +0 -1
  110. package/src/capabilities/intent-resolver.ts +0 -34
  111. package/src/components/BoardContainer.stories.tsx +0 -125
  112. package/src/components/BoardContainer.tsx +0 -136
  113. /package/dist/lib/{browser/types/index.mjs.map → neutral/chunk-J5LGTIGS.mjs.map} +0 -0
  114. /package/dist/lib/{node-esm/types → neutral/components}/index.mjs.map +0 -0
@@ -0,0 +1,186 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { useAtomValue } from '@effect-atom/atom-react';
6
+ import * as Atom from '@effect-atom/atom/Atom';
7
+ import React, { useCallback, useMemo, useRef, useState } from 'react';
8
+
9
+ import { Surface } from '@dxos/app-framework/ui';
10
+ import { AppSurface } from '@dxos/app-toolkit/ui';
11
+ import { Filter, Obj, Ref } from '@dxos/echo';
12
+ import { AtomObj } from '@dxos/echo-atom';
13
+ import { useObject } from '@dxos/echo-react';
14
+ import { invariant } from '@dxos/invariant';
15
+ import { EID } from '@dxos/keys';
16
+ import { Markdown } from '@dxos/plugin-markdown';
17
+ import { useQuery } from '@dxos/react-client/echo';
18
+ import { Panel } from '@dxos/react-ui';
19
+ import { useAttention } from '@dxos/react-ui-attention';
20
+ import { Board, type BoardController, type BoardRootProps, type Position } from '@dxos/react-ui-board';
21
+ import { ObjectPicker, type ObjectPickerContentProps } from '@dxos/react-ui-form';
22
+ import { isNonNullable } from '@dxos/util';
23
+
24
+ import { type Board as BoardType } from '#types';
25
+
26
+ const DEFAULT_POSITION = { x: 0, y: 0 } satisfies Position;
27
+
28
+ type PickerState = {
29
+ position: Position;
30
+ };
31
+
32
+ export type BoardArticleProps = AppSurface.ObjectArticleProps<BoardType.Board>;
33
+
34
+ export const BoardArticle = ({ role, subject: board, attendableId }: BoardArticleProps) => {
35
+ const { hasAttention } = useAttention(attendableId);
36
+ const db = Obj.getDatabase(board);
37
+ const [boardItems] = useObject(board, 'items');
38
+ const itemsAtom = useMemo(
39
+ () =>
40
+ Atom.make((get) => {
41
+ const result: Obj.Unknown[] = [];
42
+ for (const ref of boardItems ?? []) {
43
+ const obj = get(AtomObj.makeWithReactive(ref));
44
+ if (obj) {
45
+ result.push(obj);
46
+ }
47
+ }
48
+ return result;
49
+ }),
50
+ [boardItems],
51
+ );
52
+ const items = useAtomValue(itemsAtom);
53
+
54
+ const controller = useRef<BoardController>(null);
55
+ const addTriggerRef = useRef<HTMLButtonElement | null>(null);
56
+ const [pickerState, setPickerState] = useState<PickerState | null>(null);
57
+
58
+ // TODO(burdon): Use search.
59
+ const objects = useQuery(db, Filter.everything());
60
+ const options = useMemo<ObjectPickerContentProps['options']>(
61
+ () =>
62
+ objects
63
+ .filter((obj) => obj.id !== board.id)
64
+ .map((obj) => {
65
+ const label = Obj.getLabel(obj);
66
+ if (label) {
67
+ return {
68
+ id: obj.id,
69
+ label,
70
+ hue: 'neutral' as const,
71
+ };
72
+ }
73
+ })
74
+ .filter(isNonNullable)
75
+ .sort(({ label: a }, { label: b }) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase())),
76
+ [objects],
77
+ );
78
+
79
+ const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
80
+ async (anchor, position) => {
81
+ const db = Obj.getDatabase(board);
82
+ invariant(db);
83
+ // Grid backdrop "+" supplies a position → create a new Markdown document directly.
84
+ // Toolbar "+" omits position → fall back to the picker over existing objects.
85
+ if (position) {
86
+ const doc = db.add(Markdown.make());
87
+ Obj.update(board, (board) => {
88
+ board.items.push(Ref.make(doc));
89
+ board.layout.cells[doc.id.toString()] = position;
90
+ });
91
+ return;
92
+ }
93
+
94
+ addTriggerRef.current = anchor;
95
+ setPickerState({ position: DEFAULT_POSITION });
96
+ },
97
+ [board],
98
+ );
99
+
100
+ // TODO(burdon): Use intents so can be undone.
101
+ const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(
102
+ (id) => {
103
+ // TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.
104
+ const idx = board.items.findIndex((ref) => {
105
+ const echoUri = EID.tryParse(ref.uri);
106
+ return (echoUri ? EID.getEntityId(echoUri) : undefined) === id;
107
+ });
108
+ Obj.update(board, (board) => {
109
+ if (idx !== -1) {
110
+ board.items.splice(idx, 1);
111
+ }
112
+ delete board.layout.cells[id];
113
+ });
114
+ },
115
+ [board],
116
+ );
117
+
118
+ const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
119
+ (id, position) => {
120
+ const layout = board.layout.cells[id];
121
+ Obj.update(board, (board) => {
122
+ board.layout.cells[id] = { ...layout, ...position };
123
+ });
124
+ },
125
+ [board],
126
+ );
127
+
128
+ const handleSelect = useCallback<NonNullable<ObjectPickerContentProps['onSelect']>>(
129
+ (id) => {
130
+ if (!pickerState) {
131
+ return;
132
+ }
133
+
134
+ // Find the selected object by id from the space.
135
+ const selectedObject = objects.find((obj) => obj.id === id);
136
+ if (!Obj.isObject(selectedObject)) {
137
+ return;
138
+ }
139
+
140
+ // Create a reference to the selected object and add it to the board.
141
+ Obj.update(board, (board) => {
142
+ board.items.push(Ref.make(selectedObject));
143
+
144
+ // Set the layout position for the new item.
145
+ board.layout.cells[selectedObject.id.toString()] = pickerState.position;
146
+ });
147
+
148
+ // Close the picker.
149
+ setPickerState(null);
150
+ },
151
+ [pickerState, objects, board],
152
+ );
153
+
154
+ return (
155
+ <Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>
156
+ <ObjectPicker.Root
157
+ open={!!pickerState}
158
+ onOpenChange={(nextOpen: boolean) => {
159
+ setPickerState(nextOpen ? { position: DEFAULT_POSITION } : null);
160
+ }}
161
+ >
162
+ <Panel.Root role={role}>
163
+ <Panel.Toolbar asChild>
164
+ <Board.Toolbar disabled={!hasAttention} />
165
+ </Panel.Toolbar>
166
+ <Panel.Content asChild>
167
+ <Board.Container>
168
+ <Board.Viewport classNames='border-none'>
169
+ <Board.Backdrop />
170
+ <Board.Content>
171
+ {items?.map((item, index) => (
172
+ <Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>
173
+ <Surface.Surface type={AppSurface.Card} data={{ subject: item, editable: true }} limit={1} />
174
+ </Board.Cell>
175
+ ))}
176
+ </Board.Content>
177
+ </Board.Viewport>
178
+ </Board.Container>
179
+ </Panel.Content>
180
+ </Panel.Root>
181
+ <ObjectPicker.Content options={options} onSelect={handleSelect} classNames='dx-card-popover-width' />
182
+ <ObjectPicker.VirtualTrigger virtualRef={addTriggerRef} />
183
+ </ObjectPicker.Root>
184
+ </Board.Root>
185
+ );
186
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ export { BoardArticle as default } from './BoardArticle';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const BoardArticle: ComponentType<any> = lazy(() => import('./BoardArticle'));
package/src/index.ts CHANGED
@@ -2,8 +2,5 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- export * from './components';
6
5
  export * from './meta';
7
6
  export * from './types';
8
-
9
- export * from './BoardPlugin';
package/src/meta.ts CHANGED
@@ -2,14 +2,28 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { Plugin } from '@dxos/app-framework';
6
+ import { DXN } from '@dxos/keys';
7
+ import { trim } from '@dxos/util';
6
8
 
7
- export const meta: PluginMeta = {
8
- id: 'dxos.org/plugin/board',
9
+ export const meta = Plugin.makeMeta({
10
+ key: DXN.make('org.dxos.plugin.board'),
9
11
  name: 'Board',
10
- description:
11
- 'A spatial, infinite canvas app combining notes, media, and whiteboarding in a tactile, visual interface.',
12
+ author: 'DXOS',
13
+ description: trim`
14
+ Board is an infinite spatial canvas that lets you place any ECHO object — documents, tasks, notes, or rich media — anywhere on a two-dimensional grid.
15
+ Items are arranged by dragging, resized freely, and removed from the canvas without deleting the underlying data, so the same object can appear on multiple boards simultaneously.
16
+
17
+ Each board is itself an ECHO object, making it fully collaborative and conflict-free: all participants see live updates as peers add, move, or remove items in real time.
18
+ The canvas scales to any resolution, supports nested surfaces through the Composer slot system, and integrates naturally with other plugins via the shared ObjectPicker.
19
+
20
+ Board is designed as a lightweight composition layer: it imposes no schema on the objects it hosts and delegates rendering to each object's own Card surface, so every plugin contributes its own card representation automatically.
21
+ This makes it ideal for dashboards, mood boards, project overviews, or any context where spatial relationships between heterogeneous objects carry meaning.
22
+ `,
12
23
  icon: 'ph--squares-four--regular',
24
+ iconHue: 'green',
13
25
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-board',
26
+ spec: 'PLUGIN.mdl',
14
27
  screenshots: [],
15
- };
28
+ tags: ['labs'],
29
+ });
package/src/plugin.ts ADDED
@@ -0,0 +1,9 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { Plugin } from '@dxos/app-framework';
6
+
7
+ import { meta } from './meta';
8
+
9
+ export const BoardPlugin = Plugin.lazy(meta, () => import('#plugin'));
@@ -2,25 +2,28 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
+ import { Type } from '@dxos/echo';
5
6
  import { type Resource } from '@dxos/react-ui';
6
7
 
7
- import { meta } from './meta';
8
- import { Board } from './types';
8
+ import { meta } from '#meta';
9
+ import { Board } from '#types';
9
10
 
10
11
  export const translations = [
11
12
  {
12
13
  'en-US': {
13
- [Board.Board.typename]: {
14
- 'typename label': 'Board',
15
- 'typename label_zero': 'Boards',
16
- 'typename label_one': 'Board',
17
- 'typename label_other': 'Boards',
18
- 'object name placeholder': 'New board',
19
- 'rename object label': 'Rename board',
20
- 'delete object label': 'Delete board',
14
+ [Type.getTypename(Board.Board)]: {
15
+ 'typename.label': 'Board',
16
+ 'typename.label_zero': 'Boards',
17
+ 'typename.label_one': 'Board',
18
+ 'typename.label_other': 'Boards',
19
+ 'object-name.placeholder': 'New board',
20
+ 'add-object.label': 'Add board',
21
+ 'rename-object.label': 'Rename board',
22
+ 'delete-object.label': 'Delete board',
23
+ 'object-deleted.label': 'Board deleted',
21
24
  },
22
25
  [meta.id]: {
23
- 'plugin name': 'Board',
26
+ 'plugin.name': 'Board',
24
27
  },
25
28
  },
26
29
  },
@@ -4,28 +4,24 @@
4
4
 
5
5
  import * as Schema from 'effect/Schema';
6
6
 
7
- import { Obj, Type } from '@dxos/echo';
8
- import { LabelAnnotation } from '@dxos/echo/internal';
7
+ import { DXN, Annotation, Obj, Ref, Type } from '@dxos/echo';
8
+ import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
9
9
  import { BoardLayout, defaultLayout } from '@dxos/react-ui-board';
10
10
 
11
- import { meta } from '../meta';
12
-
13
11
  /**
14
12
  * Board and layout.
15
13
  */
16
14
  export const Board = Schema.Struct({
17
- name: Schema.optional(Schema.String),
18
- items: Schema.mutable(Schema.Array(Type.Ref(Type.Expando))),
19
- layout: Schema.mutable(BoardLayout),
15
+ name: Schema.String.pipe(Schema.optional),
16
+ items: Ref.Ref(Obj.Unknown).pipe(Schema.Array, FormInputAnnotation.set(false)),
17
+ layout: BoardLayout.pipe(FormInputAnnotation.set(false)),
20
18
  }).pipe(
21
- Type.Obj({
22
- typename: 'dxos.org/type/Board',
23
- version: '0.1.0',
24
- }),
25
19
  LabelAnnotation.set(['name']),
20
+ Annotation.IconAnnotation.set({ icon: 'ph--squares-four--regular', hue: 'green' }),
21
+ Type.makeObject(DXN.make('org.dxos.type.board', '0.1.0')),
26
22
  );
27
23
 
28
- export interface Board extends Schema.Schema.Type<typeof Board> {}
24
+ export type Board = Type.InstanceType<typeof Board>;
29
25
 
30
26
  export const makeBoard = (props: Partial<Obj.MakeProps<typeof Board>> = {}) =>
31
27
  Obj.make(Board, {
@@ -33,15 +29,3 @@ export const makeBoard = (props: Partial<Obj.MakeProps<typeof Board>> = {}) =>
33
29
  layout: defaultLayout,
34
30
  ...props,
35
31
  });
36
-
37
- /**
38
- * Create board.
39
- */
40
- export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
41
- input: Schema.Struct({
42
- name: Schema.optional(Schema.String),
43
- }),
44
- output: Schema.Struct({
45
- object: Board,
46
- }),
47
- }) {}
@@ -0,0 +1,10 @@
1
+ /// <reference types="vite/client" />
2
+
3
+ //
4
+ // Copyright 2026 DXOS.org
5
+ //
6
+
7
+ declare module '*.mdl?raw' {
8
+ const content: string;
9
+ export default content;
10
+ }
@@ -1,129 +0,0 @@
1
- // src/components/BoardContainer.tsx
2
- import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
3
- import React, { useCallback, useMemo, useRef, useState } from "react";
4
- import { Surface } from "@dxos/app-framework";
5
- import { Filter, Ref, getSpace } from "@dxos/client/echo";
6
- import { invariant } from "@dxos/invariant";
7
- import { useQuery } from "@dxos/react-client/echo";
8
- import { useSignalsMemo } from "@dxos/react-ui";
9
- import { Board } from "@dxos/react-ui-board";
10
- import { ObjectPicker } from "@dxos/react-ui-form";
11
- import { StackItem } from "@dxos/react-ui-stack";
12
- import { isNonNullable } from "@dxos/util";
13
- var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-board/src/components/BoardContainer.tsx";
14
- var DEFAULT_POSITION = {
15
- x: 0,
16
- y: 0
17
- };
18
- var BoardContainer = ({ board }) => {
19
- var _effect = _useSignals();
20
- try {
21
- const controller = useRef(null);
22
- const items = useSignalsMemo(() => board.items.map((ref) => ref.target).filter(isNonNullable), [
23
- board
24
- ]);
25
- const addTriggerRef = useRef(null);
26
- const [pickerState, setPickerState] = useState(null);
27
- const allObjects = useQuery(getSpace(board), Filter.everything());
28
- const options = useMemo(() => allObjects.map((obj) => ({
29
- id: obj.id,
30
- label: obj.name || obj.title || obj.id,
31
- hue: "neutral"
32
- })), [
33
- allObjects
34
- ]);
35
- const handleAdd = useCallback(async (anchor, position = DEFAULT_POSITION) => {
36
- const space = getSpace(board);
37
- invariant(space, void 0, {
38
- F: __dxlog_file,
39
- L: 51,
40
- S: void 0,
41
- A: [
42
- "space",
43
- ""
44
- ]
45
- });
46
- addTriggerRef.current = anchor;
47
- setPickerState({
48
- position
49
- });
50
- }, [
51
- board
52
- ]);
53
- const handleSelect = useCallback((id) => {
54
- if (!pickerState) return;
55
- const selectedObject = allObjects.find((obj) => obj.id === id);
56
- if (!selectedObject) return;
57
- const ref = Ref.make(selectedObject);
58
- board.items.push(ref);
59
- board.layout.cells[selectedObject.id.toString()] = pickerState.position;
60
- setPickerState(null);
61
- }, [
62
- pickerState,
63
- allObjects,
64
- board
65
- ]);
66
- const handleDelete = useCallback((id) => {
67
- const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);
68
- if (idx !== -1) {
69
- board.items.splice(idx, 1);
70
- }
71
- delete board.layout.cells[id];
72
- }, [
73
- board
74
- ]);
75
- const handleMove = useCallback((id, position) => {
76
- const layout = board.layout.cells[id];
77
- board.layout.cells[id] = {
78
- ...layout,
79
- ...position
80
- };
81
- }, [
82
- board
83
- ]);
84
- return /* @__PURE__ */ React.createElement(Board.Root, {
85
- ref: controller,
86
- layout: board.layout,
87
- onAdd: handleAdd,
88
- onDelete: handleDelete,
89
- onMove: handleMove
90
- }, /* @__PURE__ */ React.createElement(ObjectPicker.Root, {
91
- open: !!pickerState,
92
- onOpenChange: (nextOpen) => {
93
- setPickerState(nextOpen ? {
94
- position: DEFAULT_POSITION
95
- } : null);
96
- }
97
- }, /* @__PURE__ */ React.createElement(StackItem.Content, {
98
- toolbar: true
99
- }, /* @__PURE__ */ React.createElement(Board.Toolbar, null), /* @__PURE__ */ React.createElement(Board.Container, null, /* @__PURE__ */ React.createElement(Board.Viewport, {
100
- classNames: "border-none"
101
- }, /* @__PURE__ */ React.createElement(Board.Backdrop, null), /* @__PURE__ */ React.createElement(Board.Content, null, items?.map((item, index) => /* @__PURE__ */ React.createElement(Board.Cell, {
102
- item,
103
- key: index,
104
- layout: board.layout?.cells[item.id] ?? {
105
- x: 0,
106
- y: 0
107
- }
108
- }, /* @__PURE__ */ React.createElement(Surface, {
109
- role: "card--extrinsic",
110
- data: {
111
- subject: item
112
- },
113
- limit: 1
114
- }))))))), /* @__PURE__ */ React.createElement(ObjectPicker.Content, {
115
- options,
116
- onSelect: handleSelect,
117
- classNames: "popover-card-width"
118
- }), /* @__PURE__ */ React.createElement(ObjectPicker.VirtualTrigger, {
119
- virtualRef: addTriggerRef
120
- })));
121
- } finally {
122
- _effect.f();
123
- }
124
- };
125
-
126
- export {
127
- BoardContainer
128
- };
129
- //# sourceMappingURL=chunk-RHMZXTJ7.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/components/BoardContainer.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework';\nimport { Filter, Ref, getSpace } from '@dxos/client/echo';\nimport { invariant } from '@dxos/invariant';\nimport { useQuery } from '@dxos/react-client/echo';\nimport { useSignalsMemo } from '@dxos/react-ui';\nimport { Board, type BoardController, type BoardRootProps, type Position } from '@dxos/react-ui-board';\nimport { ObjectPicker } from '@dxos/react-ui-form';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { isNonNullable } from '@dxos/util';\n\nimport { type Board as BoardType } from '../types';\n\nexport type BoardContainerProps = {\n role?: string;\n board: BoardType.Board;\n};\n\nconst DEFAULT_POSITION = { x: 0, y: 0 } satisfies Position;\n\ntype PickerState = {\n position: Position;\n};\n\nexport const BoardContainer = ({ board }: BoardContainerProps) => {\n const controller = useRef<BoardController>(null);\n const items = useSignalsMemo(() => board.items.map((ref) => ref.target).filter(isNonNullable), [board]);\n const addTriggerRef = useRef<HTMLButtonElement | null>(null);\n const [pickerState, setPickerState] = useState<PickerState | null>(null);\n\n // Memoize options for ObjectPicker containing all ECHO objects in the same space as the Board.\n const allObjects = useQuery(getSpace(board), Filter.everything());\n const options = useMemo(\n () =>\n allObjects.map((obj) => ({\n id: obj.id,\n label: obj.name || obj.title || obj.id,\n hue: 'neutral' as const,\n })),\n [allObjects],\n );\n\n const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(\n async (anchor, position = DEFAULT_POSITION) => {\n const space = getSpace(board);\n invariant(space);\n addTriggerRef.current = anchor;\n setPickerState({\n position,\n });\n },\n [board],\n );\n\n const handleSelect = useCallback(\n (id: string) => {\n if (!pickerState) return;\n\n // Find the selected object by id from the space.\n const selectedObject = allObjects.find((obj) => obj.id === id);\n if (!selectedObject) return;\n\n // Create a reference to the selected object and add it to the board.\n const ref = Ref.make(selectedObject);\n board.items.push(ref);\n\n // Set the layout position for the new item.\n board.layout.cells[selectedObject.id.toString()] = pickerState.position;\n\n // Close the picker.\n setPickerState(null);\n },\n [pickerState, allObjects, board],\n );\n\n // TODO(burdon): Use intents so can be undone.\n const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(\n (id) => {\n // TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.\n const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);\n if (idx !== -1) {\n board.items.splice(idx, 1);\n }\n delete board.layout.cells[id];\n },\n [board],\n );\n\n const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(\n (id, position) => {\n const layout = board.layout.cells[id];\n board.layout.cells[id] = { ...layout, ...position };\n },\n [board],\n );\n\n return (\n <Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>\n <ObjectPicker.Root\n open={!!pickerState}\n onOpenChange={(nextOpen: boolean) => {\n setPickerState(\n nextOpen\n ? {\n position: DEFAULT_POSITION,\n }\n : null,\n );\n }}\n >\n <StackItem.Content toolbar>\n <Board.Toolbar />\n <Board.Container>\n <Board.Viewport classNames='border-none'>\n <Board.Backdrop />\n <Board.Content>\n {items?.map((item, index) => (\n <Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>\n <Surface role='card--extrinsic' data={{ subject: item }} limit={1} />\n </Board.Cell>\n ))}\n </Board.Content>\n </Board.Viewport>\n </Board.Container>\n </StackItem.Content>\n <ObjectPicker.Content options={options} onSelect={handleSelect} classNames='popover-card-width' />\n <ObjectPicker.VirtualTrigger virtualRef={addTriggerRef} />\n </ObjectPicker.Root>\n </Board.Root>\n );\n};\n"],
5
- "mappings": "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",
6
- "names": ["React", "useCallback", "useMemo", "useRef", "useState", "Surface", "Filter", "Ref", "getSpace", "invariant", "useQuery", "useSignalsMemo", "Board", "ObjectPicker", "StackItem", "isNonNullable", "DEFAULT_POSITION", "x", "y", "BoardContainer", "board", "controller", "items", "map", "ref", "target", "filter", "addTriggerRef", "pickerState", "setPickerState", "allObjects", "everything", "options", "obj", "id", "label", "name", "title", "hue", "handleAdd", "anchor", "position", "space", "current", "handleSelect", "selectedObject", "find", "make", "push", "layout", "cells", "toString", "handleDelete", "idx", "findIndex", "dxn", "asEchoDXN", "echoId", "splice", "handleMove", "Root", "onAdd", "onDelete", "onMove", "open", "onOpenChange", "nextOpen", "Content", "toolbar", "Toolbar", "Container", "Viewport", "classNames", "Backdrop", "item", "index", "Cell", "key", "role", "data", "subject", "limit", "onSelect", "VirtualTrigger", "virtualRef"]
7
- }
@@ -1,59 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __export = (target, all) => {
3
- for (var name in all)
4
- __defProp(target, name, { get: all[name], enumerable: true });
5
- };
6
-
7
- // src/types/Board.ts
8
- var Board_exports = {};
9
- __export(Board_exports, {
10
- Board: () => Board,
11
- Create: () => Create,
12
- makeBoard: () => makeBoard
13
- });
14
- import * as Schema from "effect/Schema";
15
- import { Obj, Type } from "@dxos/echo";
16
- import { LabelAnnotation } from "@dxos/echo/internal";
17
- import { BoardLayout, defaultLayout } from "@dxos/react-ui-board";
18
-
19
- // src/meta.ts
20
- var meta = {
21
- id: "dxos.org/plugin/board",
22
- name: "Board",
23
- description: "A spatial, infinite canvas app combining notes, media, and whiteboarding in a tactile, visual interface.",
24
- icon: "ph--squares-four--regular",
25
- source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-board",
26
- screenshots: []
27
- };
28
-
29
- // src/types/Board.ts
30
- var Board = Schema.Struct({
31
- name: Schema.optional(Schema.String),
32
- items: Schema.mutable(Schema.Array(Type.Ref(Type.Expando))),
33
- layout: Schema.mutable(BoardLayout)
34
- }).pipe(Type.Obj({
35
- typename: "dxos.org/type/Board",
36
- version: "0.1.0"
37
- }), LabelAnnotation.set([
38
- "name"
39
- ]));
40
- var makeBoard = (props = {}) => Obj.make(Board, {
41
- items: [],
42
- layout: defaultLayout,
43
- ...props
44
- });
45
- var Create = class extends Schema.TaggedClass()(`${meta.id}/action/create`, {
46
- input: Schema.Struct({
47
- name: Schema.optional(Schema.String)
48
- }),
49
- output: Schema.Struct({
50
- object: Board
51
- })
52
- }) {
53
- };
54
-
55
- export {
56
- meta,
57
- Board_exports
58
- };
59
- //# sourceMappingURL=chunk-Z6L4ZVCB.mjs.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/types/Board.ts", "../../../src/meta.ts"],
4
- "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Obj, Type } from '@dxos/echo';\nimport { LabelAnnotation } from '@dxos/echo/internal';\nimport { BoardLayout, defaultLayout } from '@dxos/react-ui-board';\n\nimport { meta } from '../meta';\n\n/**\n * Board and layout.\n */\nexport const Board = Schema.Struct({\n name: Schema.optional(Schema.String),\n items: Schema.mutable(Schema.Array(Type.Ref(Type.Expando))),\n layout: Schema.mutable(BoardLayout),\n}).pipe(\n Type.Obj({\n typename: 'dxos.org/type/Board',\n version: '0.1.0',\n }),\n LabelAnnotation.set(['name']),\n);\n\nexport interface Board extends Schema.Schema.Type<typeof Board> {}\n\nexport const makeBoard = (props: Partial<Obj.MakeProps<typeof Board>> = {}) =>\n Obj.make(Board, {\n items: [],\n layout: defaultLayout,\n ...props,\n });\n\n/**\n * Create board.\n */\nexport class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {\n input: Schema.Struct({\n name: Schema.optional(Schema.String),\n }),\n output: Schema.Struct({\n object: Board,\n }),\n}) {}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const meta: PluginMeta = {\n id: 'dxos.org/plugin/board',\n name: 'Board',\n description:\n 'A spatial, infinite canvas app combining notes, media, and whiteboarding in a tactile, visual interface.',\n icon: 'ph--squares-four--regular',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-board',\n screenshots: [],\n};\n"],
5
- "mappings": ";;;;;;;AAAA;;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,KAAKC,YAAY;AAC1B,SAASC,uBAAuB;AAChC,SAASC,aAAaC,qBAAqB;;;ACFpC,IAAMC,OAAmB;EAC9BC,IAAI;EACJC,MAAM;EACNC,aACE;EACFC,MAAM;EACNC,QAAQ;EACRC,aAAa,CAAA;AACf;;;ADCO,IAAMC,QAAeC,cAAO;EACjCC,MAAaC,gBAAgBC,aAAM;EACnCC,OAAcC,eAAeC,aAAMC,KAAKC,IAAID,KAAKE,OAAO,CAAA,CAAA;EACxDC,QAAeL,eAAQM,WAAAA;AACzB,CAAA,EAAGC,KACDL,KAAKM,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBC,IAAI;EAAC;CAAO,CAAA;AAKvB,IAAMC,YAAY,CAACC,QAA8C,CAAC,MACvEN,IAAIO,KAAKrB,OAAO;EACdK,OAAO,CAAA;EACPM,QAAQW;EACR,GAAGF;AACL,CAAA;AAKK,IAAMG,SAAN,cAA4BC,mBAAW,EAAW,GAAGC,KAAKC,EAAE,kBAAkB;EACnFC,OAAc1B,cAAO;IACnBC,MAAaC,gBAAgBC,aAAM;EACrC,CAAA;EACAwB,QAAe3B,cAAO;IACpB4B,QAAQ7B;EACV,CAAA;AACF,CAAA,EAAA;AAAI;",
6
- "names": ["Schema", "Obj", "Type", "LabelAnnotation", "BoardLayout", "defaultLayout", "meta", "id", "name", "description", "icon", "source", "screenshots", "Board", "Struct", "name", "optional", "String", "items", "mutable", "Array", "Type", "Ref", "Expando", "layout", "BoardLayout", "pipe", "Obj", "typename", "version", "LabelAnnotation", "set", "makeBoard", "props", "make", "defaultLayout", "Create", "TaggedClass", "meta", "id", "input", "output", "object"]
7
- }