@dxos/plugin-board 0.8.4-main.1da679c

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@dxos/plugin-board",
+  "version": "0.8.4-main.1da679c",
+  "description": "Surface plugin for card baords",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-react": "^3.2.0",
+    "effect": "3.17.7",
+    "@dxos/app-framework": "0.8.4-main.1da679c",
+    "@dxos/assistant": "0.8.4-main.1da679c",
+    "@dxos/async": "0.8.4-main.1da679c",
+    "@dxos/blueprints": "0.8.4-main.1da679c",
+    "@dxos/ai": "0.8.4-main.1da679c",
+    "@dxos/echo": "0.8.4-main.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/effect": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/client": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/plugin-client": "0.8.4-main.1da679c",
+    "@dxos/plugin-search": "0.8.4-main.1da679c",
+    "@dxos/plugin-graph": "0.8.4-main.1da679c",
+    "@dxos/plugin-space": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-board": "0.8.4-main.1da679c",
+    "@dxos/react-ui-form": "0.8.4-main.1da679c",
+    "@dxos/react-ui-stack": "0.8.4-main.1da679c",
+    "@dxos/schema": "0.8.4-main.1da679c",
+    "@dxos/react-client": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "7.1.1",
+    "@dxos/plugin-preview": "0.8.4-main.1da679c",
+    "@dxos/plugin-theme": "0.8.4-main.1da679c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/test-utils": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
+  },
+  "peerDependencies": {
+    "effect": "^3.13.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BoardPlugin.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
+import { ClientEvents } from '@dxos/plugin-client';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { defineObjectForm } from '@dxos/plugin-space/types';
+import { translations as boardTranslations } from '@dxos/react-ui-board';
+
+import { IntentResolver, ReactSurface } from './capabilities';
+import { meta } from './meta';
+import { translations } from './translations';
+import { Board } from './types';
+
+export const BoardPlugin = () => {
+  return definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, [...translations, ...boardTranslations]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: Events.SetupMetadata,
+      activate: () =>
+        // TODO(burdon): "Metadata" here seems non-descriptive; is this specifically for the type? ObjectMetadata?
+        contributes(Capabilities.Metadata, {
+          id: Board.Board.typename,
+          metadata: {
+            icon: 'ph--squares-four--regular',
+          },
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/object-form`,
+      activatesOn: ClientEvents.SetupSchema,
+      activate: () =>
+        contributes(
+          SpaceCapabilities.ObjectForm,
+          defineObjectForm({
+            objectSchema: Board.Board,
+            getIntent: () => createIntent(Board.Create),
+          }),
+        ),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupReactSurface,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntentResolver,
+      activate: IntentResolver,
+    }),
+  ]);
+};

package/src/capabilities/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+
+import { Board } from '../types';
+
+export default () => [
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver({
+      intent: Board.Create,
+      resolve: ({ name }) => {
+        return {
+          data: {
+            object: Obj.make(Board.Board, {
+              name,
+              items: [],
+              layout: {
+                size: {
+                  width: 5,
+                  height: 5,
+                },
+                cells: {},
+              },
+            }),
+          },
+        };
+      },
+    }),
+  ),
+];

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, type PluginContext, contributes, createSurface } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+
+import { BoardContainer } from '../components';
+import { meta } from '../meta';
+import { Board } from '../types';
+
+export default (context: PluginContext) =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: meta.id,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: Board.Board } => Obj.instanceOf(Board.Board, data.subject),
+      component: ({ data, role }) => <BoardContainer board={data.subject} role={role} />,
+    }),
+  ]);

package/src/components/BoardContainer.stories.tsx

@@ -0,0 +1,122 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { Filter, Ref, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { translations as stackTranslations } from '@dxos/react-ui-stack';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+import { withLayout } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
+import { Board } from '../types';
+
+import { BoardContainer } from './BoardContainer';
+
+faker.seed(0);
+
+const createBoard = () =>
+  Obj.make(Board.Board, {
+    name: 'Test Board',
+    items: [],
+    layout: {
+      size: { width: 7, height: 5 },
+      cells: {},
+    },
+  });
+
+const createOrg = () =>
+  Obj.make(DataType.Organization, {
+    name: faker.commerce.productName(),
+    description: faker.lorem.paragraph(),
+    image: faker.image.url(),
+    website: faker.internet.url(),
+    // TODO(burdon): Fix.
+    // status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
+  });
+
+const DefaultStory = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const boards = useQuery(space, Filter.type(Board.Board));
+  const [board, setBoard] = useState<Board.Board>();
+
+  useEffect(() => {
+    if (boards.length && !board) {
+      const board = boards[0];
+      setBoard(board);
+    }
+  }, [boards]);
+
+  if (!board) {
+    return null;
+  }
+
+  return <BoardContainer role='board' board={board} />;
+};
+
+//
+// Story definitions
+//
+
+const meta = {
+  title: 'plugins/plugin-board/Board',
+  render: DefaultStory,
+  parameters: { translations: [...translations, ...stackTranslations] },
+  decorators: [
+    withLayout({ fullscreen: true }),
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        ClientPlugin({
+          types: [DataType.Organization, DataType.Person, Board.Board],
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+            const space = await client.spaces.create();
+            await space.waitUntilReady();
+            const board = space.db.add(createBoard());
+
+            // Add some sample items
+            Array.from({ length: 10 }).map(() => {
+              const org = createOrg();
+              space.db.add(org);
+              board.items.push(Ref.make(org));
+              board.layout.cells[org.id] = {
+                x: Math.floor(Math.random() * 5) - 2,
+                y: Math.floor(Math.random() * 5) - 2,
+                width: 1,
+                height: 1,
+              };
+              return org;
+            });
+          },
+        }),
+        StorybookLayoutPlugin(),
+        PreviewPlugin(),
+        SpacePlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/BoardContainer.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useRef } from 'react';
+
+import { Surface, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { getSpace } from '@dxos/client/echo';
+import { type Obj, Ref } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { useSignalsMemo } from '@dxos/react-ui';
+import { Board, type BoardController, type BoardRootProps } from '@dxos/react-ui-board';
+import { StackItem } from '@dxos/react-ui-stack';
+import { isNonNullable } from '@dxos/util';
+
+import { type Board as BoardType } from '../types';
+
+export type BoardContainerProps = {
+  role?: string;
+  board: BoardType.Board;
+};
+
+export const BoardContainer = ({ board }: BoardContainerProps) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const controller = useRef<BoardController>(null);
+  const items = useSignalsMemo(() => board.items.map((ref) => ref.target).filter(isNonNullable), [board]);
+
+  const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
+    async (position = { x: 0, y: 0 }) => {
+      const space = getSpace(board);
+      invariant(space);
+      await dispatch(
+        createIntent(SpaceAction.OpenCreateObject, {
+          target: space,
+          navigable: false,
+          onCreateObject: (object: Obj.Any) => {
+            board.items.push(Ref.make(object));
+            console.log(board.items.length);
+            board.layout.cells[object.id] = { ...position, width: 1, height: 1 };
+            controller.current?.center(position);
+          },
+        }),
+      );
+    },
+    [board, controller, dispatch],
+  );
+
+  // TODO(burdon): Use intents so can be undone.
+  const handleDelete = useCallback<NonNullable<BoardRootProps['onDelete']>>(
+    (id) => {
+      // TODO(burdon): Impl. DXN.equals and pass in DXN from `id`.
+      const idx = board.items.findIndex((ref) => ref.dxn.asEchoDXN()?.echoId === id);
+      if (idx !== -1) {
+        board.items.splice(idx, 1);
+      }
+      delete board.layout.cells[id];
+    },
+    [board],
+  );
+
+  const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
+    (id, position) => {
+      const layout = board.layout.cells[id];
+      board.layout.cells[id] = { ...layout, ...position };
+    },
+    [board],
+  );
+
+  return (
+    <Board.Root ref={controller} layout={board.layout} onAdd={handleAdd} onDelete={handleDelete} onMove={handleMove}>
+      <StackItem.Content toolbar classNames='overflow-hidden'>
+        <Board.Toolbar />
+        <Board.Container>
+          <Board.Viewport classNames='border-none'>
+            <Board.Backdrop />
+            <Board.Content>
+              {items?.map((item, index) => (
+                <Board.Cell item={item} key={index} layout={board.layout?.cells[item.id] ?? { x: 0, y: 0 }}>
+                  <Surface role='card--extrinsic' data={{ subject: item }} limit={1} />
+                </Board.Cell>
+              ))}
+            </Board.Content>
+          </Board.Viewport>
+        </Board.Container>
+      </StackItem.Content>
+    </Board.Root>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './BoardContainer';

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './components';
+export * from './meta';
+export * from './types';
+
+export * from './BoardPlugin';

package/src/meta.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/board',
+  name: 'Board',
+  description:
+    'A spatial, infinite canvas app combining notes, media, and whiteboarding in a tactile, visual interface.',
+  icon: 'ph--squares-four--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-board',
+  screenshots: [],
+};

package/src/translations.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+import { meta } from './meta';
+import { Board } from './types';
+
+export const translations = [
+  {
+    'en-US': {
+      [Board.Board.typename]: {
+        'typename label': 'Board',
+        'typename label_zero': 'Boards',
+        'typename label_one': 'Board',
+        'typename label_other': 'Boards',
+        'object name placeholder': 'New board',
+        'rename object label': 'Rename board',
+        'delete object label': 'Delete board',
+      },
+      [meta.id]: {
+        'plugin name': 'Board',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/Board.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { Obj, Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo-schema';
+import { BoardLayout, defaultLayout } from '@dxos/react-ui-board';
+
+import { meta } from '../meta';
+
+/**
+ * Board and layout.
+ */
+export const Board = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  items: Schema.mutable(Schema.Array(Type.Ref(Type.Expando))),
+  layout: Schema.mutable(BoardLayout),
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Board',
+    version: '0.1.0',
+  }),
+  LabelAnnotation.set(['name']),
+);
+
+export interface Board extends Schema.Schema.Type<typeof Board> {}
+
+export const makeBoard = (props: Partial<Obj.MakeProps<typeof Board>> = {}) =>
+  Obj.make(Board, {
+    items: [],
+    layout: defaultLayout,
+    ...props,
+  });
+
+/**
+ * Create board.
+ */
+export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
+  input: Schema.Struct({
+    name: Schema.optional(Schema.String),
+  }),
+  output: Schema.Struct({
+    object: Board,
+  }),
+}) {}

package/src/types/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * as Board from './Board';