@dxos/plugin-board 0.8.4-main.406dc2a → 0.8.4-main.52d7546f51

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 (71) hide show
  1. package/dist/lib/browser/chunk-7VKDDGS7.mjs +36 -0
  2. package/dist/lib/browser/chunk-7VKDDGS7.mjs.map +7 -0
  3. package/dist/lib/browser/chunk-DCLJ4HOC.mjs +159 -0
  4. package/dist/lib/browser/chunk-DCLJ4HOC.mjs.map +7 -0
  5. package/dist/lib/browser/index.mjs +35 -55
  6. package/dist/lib/browser/index.mjs.map +4 -4
  7. package/dist/lib/browser/meta.json +1 -1
  8. package/dist/lib/browser/react-surface-3ECZMYLQ.mjs +32 -0
  9. package/dist/lib/browser/react-surface-3ECZMYLQ.mjs.map +7 -0
  10. package/dist/lib/browser/types/index.mjs +1 -1
  11. package/dist/lib/node-esm/chunk-HICZFU5T.mjs +161 -0
  12. package/dist/lib/node-esm/chunk-HICZFU5T.mjs.map +7 -0
  13. package/dist/lib/node-esm/chunk-UGVRNKWV.mjs +37 -0
  14. package/dist/lib/node-esm/chunk-UGVRNKWV.mjs.map +7 -0
  15. package/dist/lib/node-esm/index.mjs +35 -55
  16. package/dist/lib/node-esm/index.mjs.map +4 -4
  17. package/dist/lib/node-esm/meta.json +1 -1
  18. package/dist/lib/node-esm/react-surface-W7FPI7BR.mjs +33 -0
  19. package/dist/lib/node-esm/react-surface-W7FPI7BR.mjs.map +7 -0
  20. package/dist/lib/node-esm/types/index.mjs +1 -1
  21. package/dist/types/src/BoardPlugin.d.ts +2 -1
  22. package/dist/types/src/BoardPlugin.d.ts.map +1 -1
  23. package/dist/types/src/capabilities/index.d.ts +1 -2
  24. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  25. package/dist/types/src/capabilities/react-surface/index.d.ts +3 -0
  26. package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -0
  27. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +5 -0
  28. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -0
  29. package/dist/types/src/components/BoardContainer.d.ts +3 -5
  30. package/dist/types/src/components/BoardContainer.d.ts.map +1 -1
  31. package/dist/types/src/components/BoardContainer.stories.d.ts +3 -3
  32. package/dist/types/src/components/BoardContainer.stories.d.ts.map +1 -1
  33. package/dist/types/src/meta.d.ts +2 -2
  34. package/dist/types/src/meta.d.ts.map +1 -1
  35. package/dist/types/src/translations.d.ts +1 -0
  36. package/dist/types/src/translations.d.ts.map +1 -1
  37. package/dist/types/src/types/Board.d.ts +25 -67
  38. package/dist/types/src/types/Board.d.ts.map +1 -1
  39. package/dist/types/tsconfig.tsbuildinfo +1 -1
  40. package/package.json +56 -48
  41. package/src/BoardPlugin.tsx +22 -45
  42. package/src/capabilities/index.ts +1 -4
  43. package/src/capabilities/react-surface/index.ts +7 -0
  44. package/src/capabilities/react-surface/react-surface.tsx +27 -0
  45. package/src/components/BoardContainer.stories.tsx +34 -38
  46. package/src/components/BoardContainer.tsx +75 -60
  47. package/src/meta.ts +8 -4
  48. package/src/translations.ts +1 -0
  49. package/src/types/Board.ts +5 -19
  50. package/dist/lib/browser/chunk-RHMZXTJ7.mjs +0 -129
  51. package/dist/lib/browser/chunk-RHMZXTJ7.mjs.map +0 -7
  52. package/dist/lib/browser/chunk-Z6L4ZVCB.mjs +0 -59
  53. package/dist/lib/browser/chunk-Z6L4ZVCB.mjs.map +0 -7
  54. package/dist/lib/browser/intent-resolver-H6OF7V77.mjs +0 -33
  55. package/dist/lib/browser/intent-resolver-H6OF7V77.mjs.map +0 -7
  56. package/dist/lib/browser/react-surface-37LEVBKY.mjs +0 -30
  57. package/dist/lib/browser/react-surface-37LEVBKY.mjs.map +0 -7
  58. package/dist/lib/node-esm/chunk-AWLY252W.mjs +0 -60
  59. package/dist/lib/node-esm/chunk-AWLY252W.mjs.map +0 -7
  60. package/dist/lib/node-esm/chunk-XZA5WICX.mjs +0 -131
  61. package/dist/lib/node-esm/chunk-XZA5WICX.mjs.map +0 -7
  62. package/dist/lib/node-esm/intent-resolver-L534P6FM.mjs +0 -34
  63. package/dist/lib/node-esm/intent-resolver-L534P6FM.mjs.map +0 -7
  64. package/dist/lib/node-esm/react-surface-GVHSH2W2.mjs +0 -31
  65. package/dist/lib/node-esm/react-surface-GVHSH2W2.mjs.map +0 -7
  66. package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
  67. package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
  68. package/dist/types/src/capabilities/react-surface.d.ts +0 -4
  69. package/dist/types/src/capabilities/react-surface.d.ts.map +0 -1
  70. package/src/capabilities/intent-resolver.ts +0 -34
  71. package/src/capabilities/react-surface.tsx +0 -22
package/package.json CHANGED
@@ -1,25 +1,29 @@
1
1
  {
2
2
  "name": "@dxos/plugin-board",
3
- "version": "0.8.4-main.406dc2a",
3
+ "version": "0.8.4-main.52d7546f51",
4
4
  "description": "Surface plugin for card baords",
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,
10
14
  "type": "module",
11
15
  "exports": {
12
16
  ".": {
13
- "source": "./src/index.ts",
14
- "types": "./dist/types/src/index.d.ts",
15
17
  "browser": "./dist/lib/browser/index.mjs",
16
- "node": "./dist/lib/node-esm/index.mjs"
18
+ "node": "./dist/lib/node-esm/index.mjs",
19
+ "source": "./src/index.ts",
20
+ "types": "./dist/types/src/index.d.ts"
17
21
  },
18
22
  "./types": {
19
- "source": "./src/types/index.ts",
20
- "types": "./dist/types/src/types/index.d.ts",
21
23
  "browser": "./dist/lib/browser/types/index.mjs",
22
- "node": "./dist/lib/node-esm/types/index.mjs"
24
+ "node": "./dist/lib/node-esm/types/index.mjs",
25
+ "source": "./src/types/index.ts",
26
+ "types": "./dist/types/src/types/index.d.ts"
23
27
  }
24
28
  },
25
29
  "types": "dist/types/src/index.d.ts",
@@ -35,52 +39,56 @@
35
39
  "src"
36
40
  ],
37
41
  "dependencies": {
38
- "@preact-signals/safe-react": "^0.9.0",
39
- "@preact/signals-core": "^1.12.1",
40
- "@preact/signals-react": "^3.3.0",
41
- "effect": "3.18.3",
42
- "@dxos/ai": "0.8.4-main.406dc2a",
43
- "@dxos/assistant": "0.8.4-main.406dc2a",
44
- "@dxos/app-framework": "0.8.4-main.406dc2a",
45
- "@dxos/client": "0.8.4-main.406dc2a",
46
- "@dxos/echo": "0.8.4-main.406dc2a",
47
- "@dxos/async": "0.8.4-main.406dc2a",
48
- "@dxos/blueprints": "0.8.4-main.406dc2a",
49
- "@dxos/effect": "0.8.4-main.406dc2a",
50
- "@dxos/invariant": "0.8.4-main.406dc2a",
51
- "@dxos/plugin-client": "0.8.4-main.406dc2a",
52
- "@dxos/log": "0.8.4-main.406dc2a",
53
- "@dxos/plugin-search": "0.8.4-main.406dc2a",
54
- "@dxos/plugin-space": "0.8.4-main.406dc2a",
55
- "@dxos/random": "0.8.4-main.406dc2a",
56
- "@dxos/react-client": "0.8.4-main.406dc2a",
57
- "@dxos/plugin-graph": "0.8.4-main.406dc2a",
58
- "@dxos/react-ui": "0.8.4-main.406dc2a",
59
- "@dxos/react-ui-board": "0.8.4-main.406dc2a",
60
- "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
61
- "@dxos/schema": "0.8.4-main.406dc2a",
62
- "@dxos/react-ui-form": "0.8.4-main.406dc2a",
63
- "@dxos/util": "0.8.4-main.406dc2a"
42
+ "effect": "3.19.16",
43
+ "@dxos/ai": "0.8.4-main.52d7546f51",
44
+ "@dxos/app-toolkit": "0.8.4-main.52d7546f51",
45
+ "@dxos/async": "0.8.4-main.52d7546f51",
46
+ "@dxos/app-framework": "0.8.4-main.52d7546f51",
47
+ "@dxos/assistant": "0.8.4-main.52d7546f51",
48
+ "@dxos/blueprints": "0.8.4-main.52d7546f51",
49
+ "@dxos/client": "0.8.4-main.52d7546f51",
50
+ "@dxos/echo-react": "0.8.4-main.52d7546f51",
51
+ "@dxos/echo": "0.8.4-main.52d7546f51",
52
+ "@dxos/invariant": "0.8.4-main.52d7546f51",
53
+ "@dxos/effect": "0.8.4-main.52d7546f51",
54
+ "@dxos/log": "0.8.4-main.52d7546f51",
55
+ "@dxos/plugin-client": "0.8.4-main.52d7546f51",
56
+ "@dxos/operation": "0.8.4-main.52d7546f51",
57
+ "@dxos/plugin-search": "0.8.4-main.52d7546f51",
58
+ "@dxos/plugin-space": "0.8.4-main.52d7546f51",
59
+ "@dxos/random": "0.8.4-main.52d7546f51",
60
+ "@dxos/plugin-graph": "0.8.4-main.52d7546f51",
61
+ "@dxos/react-client": "0.8.4-main.52d7546f51",
62
+ "@dxos/react-ui": "0.8.4-main.52d7546f51",
63
+ "@dxos/react-ui-attention": "0.8.4-main.52d7546f51",
64
+ "@dxos/react-ui-board": "0.8.4-main.52d7546f51",
65
+ "@dxos/react-ui-mosaic": "0.8.4-main.52d7546f51",
66
+ "@dxos/react-ui-stack": "0.8.4-main.52d7546f51",
67
+ "@dxos/schema": "0.8.4-main.52d7546f51",
68
+ "@dxos/types": "0.8.4-main.52d7546f51",
69
+ "@dxos/util": "0.8.4-main.52d7546f51",
70
+ "@dxos/react-ui-form": "0.8.4-main.52d7546f51"
64
71
  },
65
72
  "devDependencies": {
66
- "@types/react": "~19.2.2",
67
- "@types/react-dom": "~19.2.1",
68
- "react": "~19.2.0",
69
- "react-dom": "~19.2.0",
73
+ "@types/react": "~19.2.7",
74
+ "@types/react-dom": "~19.2.3",
75
+ "react": "~19.2.3",
76
+ "react-dom": "~19.2.3",
70
77
  "vite": "7.1.9",
71
- "@dxos/plugin-preview": "0.8.4-main.406dc2a",
72
- "@dxos/react-ui-syntax-highlighter": "0.8.4-main.406dc2a",
73
- "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
74
- "@dxos/plugin-theme": "0.8.4-main.406dc2a",
75
- "@dxos/storybook-utils": "0.8.4-main.406dc2a",
76
- "@dxos/test-utils": "0.8.4-main.406dc2a"
78
+ "@dxos/plugin-preview": "0.8.4-main.52d7546f51",
79
+ "@dxos/plugin-theme": "0.8.4-main.52d7546f51",
80
+ "@dxos/react-ui-syntax-highlighter": "0.8.4-main.52d7546f51",
81
+ "@dxos/plugin-testing": "0.8.4-main.52d7546f51",
82
+ "@dxos/storybook-utils": "0.8.4-main.52d7546f51",
83
+ "@dxos/test-utils": "0.8.4-main.52d7546f51",
84
+ "@dxos/ui-theme": "0.8.4-main.52d7546f51"
77
85
  },
78
86
  "peerDependencies": {
79
- "effect": "^3.13.3",
80
- "react": "^19.0.0",
81
- "react-dom": "^19.0.0",
82
- "@dxos/react-ui": "0.8.4-main.406dc2a",
83
- "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
87
+ "effect": "3.19.16",
88
+ "react": "~19.2.3",
89
+ "react-dom": "~19.2.3",
90
+ "@dxos/react-ui": "0.8.4-main.52d7546f51",
91
+ "@dxos/ui-theme": "0.8.4-main.52d7546f51"
84
92
  },
85
93
  "publishConfig": {
86
94
  "access": "public"
@@ -2,55 +2,32 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
6
- import { ClientEvents } from '@dxos/plugin-client';
7
- import { SpaceCapabilities } from '@dxos/plugin-space';
8
- import { defineObjectForm } from '@dxos/plugin-space/types';
5
+ import * as Effect from 'effect/Effect';
6
+
7
+ import { Plugin } from '@dxos/app-framework';
8
+ import { AppPlugin } from '@dxos/app-toolkit';
9
+ import { type CreateObject } from '@dxos/plugin-space/types';
9
10
  import { translations as boardTranslations } from '@dxos/react-ui-board';
10
11
 
11
- import { IntentResolver, ReactSurface } from './capabilities';
12
+ import { ReactSurface } from './capabilities';
12
13
  import { meta } from './meta';
13
14
  import { translations } from './translations';
14
15
  import { Board } from './types';
15
16
 
16
- export const BoardPlugin = definePlugin(meta, () => [
17
- defineModule({
18
- id: `${meta.id}/module/translations`,
19
- activatesOn: Events.SetupTranslations,
20
- activate: () => contributes(Capabilities.Translations, [...translations, ...boardTranslations]),
21
- }),
22
- defineModule({
23
- id: `${meta.id}/module/metadata`,
24
- activatesOn: Events.SetupMetadata,
25
- activate: () =>
26
- // TODO(burdon): "Metadata" here seems non-descriptive; is this specifically for the type? ObjectMetadata?
27
- contributes(Capabilities.Metadata, {
28
- id: Board.Board.typename,
29
- metadata: {
30
- icon: 'ph--squares-four--regular',
31
- },
32
- }),
33
- }),
34
- defineModule({
35
- id: `${meta.id}/module/object-form`,
36
- activatesOn: ClientEvents.SetupSchema,
37
- activate: () =>
38
- contributes(
39
- SpaceCapabilities.ObjectForm,
40
- defineObjectForm({
41
- objectSchema: Board.Board,
42
- getIntent: () => createIntent(Board.Create),
43
- }),
44
- ),
45
- }),
46
- defineModule({
47
- id: `${meta.id}/module/react-surface`,
48
- activatesOn: Events.SetupReactSurface,
49
- activate: ReactSurface,
50
- }),
51
- defineModule({
52
- id: `${meta.id}/module/intent-resolver`,
53
- activatesOn: Events.SetupIntentResolver,
54
- activate: IntentResolver,
17
+ export const BoardPlugin = Plugin.define(meta).pipe(
18
+ AppPlugin.addMetadataModule({
19
+ metadata: {
20
+ id: Board.Board.typename,
21
+ metadata: {
22
+ icon: 'ph--squares-four--regular',
23
+ iconHue: 'green',
24
+ createObject: ((props) => Effect.sync(() => Board.makeBoard(props))) satisfies CreateObject,
25
+ addToCollectionOnCreate: true,
26
+ },
27
+ },
55
28
  }),
56
- ]);
29
+ AppPlugin.addSchemaModule({ schema: [Board.Board] }),
30
+ AppPlugin.addSurfaceModule({ activate: ReactSurface }),
31
+ AppPlugin.addTranslationsModule({ translations: [...translations, ...boardTranslations] }),
32
+ Plugin.make,
33
+ );
@@ -2,7 +2,4 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from '@dxos/app-framework';
6
-
7
- export const IntentResolver = lazy(() => import('./intent-resolver'));
8
- export const ReactSurface = lazy(() => import('./react-surface'));
5
+ 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 ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
@@ -0,0 +1,27 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import * as Effect from 'effect/Effect';
6
+ import React from 'react';
7
+
8
+ import { Capabilities, Capability } from '@dxos/app-framework';
9
+ import { Surface } from '@dxos/app-framework/ui';
10
+ import { Obj } from '@dxos/echo';
11
+
12
+ import { BoardContainer } from '../../components';
13
+ import { meta } from '../../meta';
14
+ import { Board } from '../../types';
15
+
16
+ export default Capability.makeModule(() =>
17
+ Effect.succeed(
18
+ Capability.contributes(Capabilities.ReactSurface, [
19
+ Surface.create({
20
+ id: meta.id,
21
+ role: ['article', 'section'],
22
+ filter: (data): data is { subject: Board.Board } => Obj.instanceOf(Board.Board, data.subject),
23
+ component: ({ role, data }) => <BoardContainer role={role} subject={data.subject} />,
24
+ }),
25
+ ]),
26
+ ),
27
+ );
@@ -3,22 +3,19 @@
3
3
  //
4
4
 
5
5
  import { type StoryObj } from '@storybook/react-vite';
6
+ import * as Effect from 'effect/Effect';
6
7
  import React, { useEffect, useState } from 'react';
7
8
 
8
- import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
9
9
  import { withPluginManager } from '@dxos/app-framework/testing';
10
10
  import { Obj } from '@dxos/echo';
11
11
  import { ClientPlugin } from '@dxos/plugin-client';
12
12
  import { PreviewPlugin } from '@dxos/plugin-preview';
13
- import { SpacePlugin } from '@dxos/plugin-space';
14
- import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
15
- import { ThemePlugin } from '@dxos/plugin-theme';
13
+ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
16
14
  import { faker } from '@dxos/random';
17
15
  import { Filter, Ref, useQuery, useSpaces } from '@dxos/react-client/echo';
18
16
  import { withTheme } from '@dxos/react-ui/testing';
19
17
  import { translations as stackTranslations } from '@dxos/react-ui-stack';
20
- import { defaultTx } from '@dxos/react-ui-theme';
21
- import { DataType } from '@dxos/schema';
18
+ import { Organization, Person } from '@dxos/types';
22
19
 
23
20
  import { translations } from '../translations';
24
21
  import { Board } from '../types';
@@ -38,19 +35,19 @@ const createBoard = () =>
38
35
  });
39
36
 
40
37
  const createOrg = () =>
41
- Obj.make(DataType.Organization, {
38
+ Obj.make(Organization.Organization, {
42
39
  name: faker.commerce.productName(),
43
40
  description: faker.lorem.paragraph(),
44
41
  image: faker.image.url(),
45
42
  website: faker.internet.url(),
46
43
  // TODO(burdon): Fix.
47
- // status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
44
+ // status: faker.helpers.arrayElement(Organization.StatusOptions).id,
48
45
  });
49
46
 
50
47
  const DefaultStory = () => {
51
48
  const spaces = useSpaces();
52
49
  const space = spaces[spaces.length - 1];
53
- const boards = useQuery(space, Filter.type(Board.Board));
50
+ const boards = useQuery(space?.db, Filter.type(Board.Board));
54
51
  const [board, setBoard] = useState<Board.Board>();
55
52
 
56
53
  useEffect(() => {
@@ -64,7 +61,7 @@ const DefaultStory = () => {
64
61
  return null;
65
62
  }
66
63
 
67
- return <BoardContainer role='board' board={board} />;
64
+ return <BoardContainer role='board' subject={board} />;
68
65
  };
69
66
 
70
67
  //
@@ -75,40 +72,39 @@ const meta = {
75
72
  title: 'plugins/plugin-board/Board',
76
73
  render: DefaultStory,
77
74
  decorators: [
78
- withTheme,
75
+ withTheme(),
79
76
  withPluginManager({
80
77
  plugins: [
78
+ ...corePlugins(),
81
79
  ClientPlugin({
82
- types: [DataType.Organization, DataType.Person, Board.Board],
83
- onClientInitialized: async ({ client }) => {
84
- await client.halo.createIdentity();
85
- const space = await client.spaces.create();
86
- await space.waitUntilReady();
87
- const board = space.db.add(createBoard());
88
-
89
- // Add some sample items
90
- Array.from({ length: 10 }).map(() => {
91
- const org = createOrg();
92
- space.db.add(org);
93
- board.items.push(Ref.make(org));
94
- board.layout.cells[org.id] = {
95
- x: Math.floor(Math.random() * 5) - 2,
96
- y: Math.floor(Math.random() * 5) - 2,
97
- width: 1,
98
- height: 1,
99
- };
100
- return org;
101
- });
102
- },
80
+ types: [Organization.Organization, Person.Person, Board.Board],
81
+ onClientInitialized: ({ client }) =>
82
+ Effect.gen(function* () {
83
+ yield* Effect.promise(() => client.halo.createIdentity());
84
+ const space = yield* Effect.promise(() => client.spaces.create());
85
+ yield* Effect.promise(() => space.waitUntilReady());
86
+ const board = space.db.add(createBoard());
87
+
88
+ Obj.change(board, (b) => {
89
+ // Add some sample items
90
+ Array.from({ length: 10 }).map(() => {
91
+ const org = createOrg();
92
+ space.db.add(org);
93
+ b.items.push(Ref.make(org));
94
+ b.layout.cells[org.id] = {
95
+ x: Math.floor(Math.random() * 5) - 2,
96
+ y: Math.floor(Math.random() * 5) - 2,
97
+ width: 1,
98
+ height: 1,
99
+ };
100
+ return org;
101
+ });
102
+ });
103
+ }),
103
104
  }),
104
- SpacePlugin({}),
105
- IntentPlugin(),
106
- SettingsPlugin(),
107
105
 
108
- // UI
109
- ThemePlugin({ tx: defaultTx }),
106
+ StorybookPlugin({}),
110
107
  PreviewPlugin(),
111
- StorybookLayoutPlugin({}),
112
108
  ],
113
109
  }),
114
110
  ],
@@ -4,51 +4,63 @@
4
4
 
5
5
  import React, { useCallback, useMemo, useRef, useState } from 'react';
6
6
 
7
- import { Surface } from '@dxos/app-framework';
8
- import { Filter, Ref, getSpace } from '@dxos/client/echo';
7
+ import { Surface } from '@dxos/app-framework/ui';
8
+ import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
9
+ import { Filter, Obj, Ref } from '@dxos/echo';
10
+ import { useObject, useObjects } from '@dxos/echo-react';
9
11
  import { invariant } from '@dxos/invariant';
10
12
  import { useQuery } from '@dxos/react-client/echo';
11
- import { useSignalsMemo } from '@dxos/react-ui';
13
+ import { Layout } from '@dxos/react-ui';
14
+ import { useAttention } from '@dxos/react-ui-attention';
12
15
  import { Board, type BoardController, type BoardRootProps, type Position } from '@dxos/react-ui-board';
13
- import { ObjectPicker } from '@dxos/react-ui-form';
14
- import { StackItem } from '@dxos/react-ui-stack';
16
+ import { ObjectPicker, type ObjectPickerContentProps } from '@dxos/react-ui-form';
15
17
  import { isNonNullable } from '@dxos/util';
16
18
 
17
19
  import { type Board as BoardType } from '../types';
18
20
 
19
- export type BoardContainerProps = {
20
- role?: string;
21
- board: BoardType.Board;
22
- };
23
-
24
21
  const DEFAULT_POSITION = { x: 0, y: 0 } satisfies Position;
25
22
 
26
23
  type PickerState = {
27
24
  position: Position;
28
25
  };
29
26
 
30
- export const BoardContainer = ({ board }: BoardContainerProps) => {
27
+ export type BoardContainerProps = SurfaceComponentProps<BoardType.Board>;
28
+
29
+ export const BoardContainer = ({ role, subject: board }: BoardContainerProps) => {
31
30
  const controller = useRef<BoardController>(null);
32
- const items = useSignalsMemo(() => board.items.map((ref) => ref.target).filter(isNonNullable), [board]);
31
+ const [boardItems] = useObject(board, 'items');
32
+ const items = useObjects(boardItems ?? []);
33
33
  const addTriggerRef = useRef<HTMLButtonElement | null>(null);
34
34
  const [pickerState, setPickerState] = useState<PickerState | null>(null);
35
+ const attendableId = Obj.getDXN(board).toString();
36
+ const { hasAttention } = useAttention(attendableId);
35
37
 
36
- // Memoize options for ObjectPicker containing all ECHO objects in the same space as the Board.
37
- const allObjects = useQuery(getSpace(board), Filter.everything());
38
- const options = useMemo(
38
+ const db = Obj.getDatabase(board);
39
+ // TODO(burdon): Use search.
40
+ const objects = useQuery(db, Filter.everything());
41
+ const options = useMemo<ObjectPickerContentProps['options']>(
39
42
  () =>
40
- allObjects.map((obj) => ({
41
- id: obj.id,
42
- label: obj.name || obj.title || obj.id,
43
- hue: 'neutral' as const,
44
- })),
45
- [allObjects],
43
+ objects
44
+ .filter((obj) => obj.id !== board.id)
45
+ .map((obj) => {
46
+ const label = Obj.getLabel(obj);
47
+ if (label) {
48
+ return {
49
+ id: obj.id,
50
+ label,
51
+ hue: 'neutral' as const,
52
+ };
53
+ }
54
+ })
55
+ .filter(isNonNullable)
56
+ .sort(({ label: a }, { label: b }) => a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase())),
57
+ [objects],
46
58
  );
47
59
 
48
60
  const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
49
61
  async (anchor, position = DEFAULT_POSITION) => {
50
- const space = getSpace(board);
51
- invariant(space);
62
+ const db = Obj.getDatabase(board);
63
+ invariant(db);
52
64
  addTriggerRef.current = anchor;
53
65
  setPickerState({
54
66
  position,
@@ -57,36 +69,17 @@ export const BoardContainer = ({ board }: BoardContainerProps) => {
57
69
  [board],
58
70
  );
59
71
 
60
- const handleSelect = useCallback(
61
- (id: string) => {
62
- if (!pickerState) return;
63
-
64
- // Find the selected object by id from the space.
65
- const selectedObject = allObjects.find((obj) => obj.id === id);
66
- if (!selectedObject) return;
67
-
68
- // Create a reference to the selected object and add it to the board.
69
- const ref = Ref.make(selectedObject);
70
- board.items.push(ref);
71
-
72
- // Set the layout position for the new item.
73
- board.layout.cells[selectedObject.id.toString()] = pickerState.position;
74
-
75
- // Close the picker.
76
- setPickerState(null);
77
- },
78
- [pickerState, allObjects, board],
79
- );
80
-
81
72
  // TODO(burdon): Use intents so can be undone.
82
73
  const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(
83
74
  (id) => {
84
75
  // TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.
85
76
  const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);
86
- if (idx !== -1) {
87
- board.items.splice(idx, 1);
88
- }
89
- delete board.layout.cells[id];
77
+ Obj.change(board, (b) => {
78
+ if (idx !== -1) {
79
+ b.items.splice(idx, 1);
80
+ }
81
+ delete b.layout.cells[id];
82
+ });
90
83
  },
91
84
  [board],
92
85
  );
@@ -94,40 +87,62 @@ export const BoardContainer = ({ board }: BoardContainerProps) => {
94
87
  const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
95
88
  (id, position) => {
96
89
  const layout = board.layout.cells[id];
97
- board.layout.cells[id] = { ...layout, ...position };
90
+ Obj.change(board, (b) => {
91
+ b.layout.cells[id] = { ...layout, ...position };
92
+ });
98
93
  },
99
94
  [board],
100
95
  );
101
96
 
97
+ const handleSelect = useCallback<NonNullable<ObjectPickerContentProps['onSelect']>>(
98
+ (id) => {
99
+ if (!pickerState) {
100
+ return;
101
+ }
102
+
103
+ // Find the selected object by id from the space.
104
+ const selectedObject = objects.find((obj) => obj.id === id);
105
+ if (!Obj.isObject(selectedObject)) {
106
+ return;
107
+ }
108
+
109
+ // Create a reference to the selected object and add it to the board.
110
+ Obj.change(board, (b) => {
111
+ b.items.push(Ref.make(selectedObject));
112
+
113
+ // Set the layout position for the new item.
114
+ b.layout.cells[selectedObject.id.toString()] = pickerState.position;
115
+ });
116
+
117
+ // Close the picker.
118
+ setPickerState(null);
119
+ },
120
+ [pickerState, objects, board],
121
+ );
122
+
102
123
  return (
103
124
  <Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>
104
125
  <ObjectPicker.Root
105
126
  open={!!pickerState}
106
127
  onOpenChange={(nextOpen: boolean) => {
107
- setPickerState(
108
- nextOpen
109
- ? {
110
- position: DEFAULT_POSITION,
111
- }
112
- : null,
113
- );
128
+ setPickerState(nextOpen ? { position: DEFAULT_POSITION } : null);
114
129
  }}
115
130
  >
116
- <StackItem.Content toolbar>
117
- <Board.Toolbar />
131
+ <Layout.Main role={role} toolbar>
132
+ <Board.Toolbar disabled={!hasAttention} />
118
133
  <Board.Container>
119
134
  <Board.Viewport classNames='border-none'>
120
135
  <Board.Backdrop />
121
136
  <Board.Content>
122
137
  {items?.map((item, index) => (
123
138
  <Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>
124
- <Surface role='card--extrinsic' data={{ subject: item }} limit={1} />
139
+ <Surface.Surface role='card--content' data={{ subject: item }} limit={1} />
125
140
  </Board.Cell>
126
141
  ))}
127
142
  </Board.Content>
128
143
  </Board.Viewport>
129
144
  </Board.Container>
130
- </StackItem.Content>
145
+ </Layout.Main>
131
146
  <ObjectPicker.Content options={options} onSelect={handleSelect} classNames='popover-card-width' />
132
147
  <ObjectPicker.VirtualTrigger virtualRef={addTriggerRef} />
133
148
  </ObjectPicker.Root>
package/src/meta.ts CHANGED
@@ -2,14 +2,18 @@
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
+ import { trim } from '@dxos/util';
6
7
 
7
- export const meta: PluginMeta = {
8
+ export const meta: Plugin.Meta = {
8
9
  id: 'dxos.org/plugin/board',
9
10
  name: 'Board',
10
- description:
11
- 'A spatial, infinite canvas app combining notes, media, and whiteboarding in a tactile, visual interface.',
11
+ description: trim`
12
+ Infinite canvas workspace that combines sticky notes, media, and whiteboarding tools.
13
+ Arrange and connect ideas freely in a visual space perfect for brainstorming and creative collaboration.
14
+ `,
12
15
  icon: 'ph--squares-four--regular',
16
+ iconHue: 'green',
13
17
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-board',
14
18
  screenshots: [],
15
19
  };
@@ -18,6 +18,7 @@ export const translations = [
18
18
  'object name placeholder': 'New board',
19
19
  'rename object label': 'Rename board',
20
20
  'delete object label': 'Delete board',
21
+ 'object deleted label': 'Board deleted',
21
22
  },
22
23
  [meta.id]: {
23
24
  'plugin name': 'Board',