@dxos/plugin-board 0.8.4-main.f9ba587

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@dxos/plugin-board",
+  "version": "0.8.4-main.f9ba587",
+  "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": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./types": {
+      "types": "./dist/types/src/types.d.ts",
+      "browser": "./dist/lib/browser/types.mjs",
+      "node": "./dist/lib/node-esm/types.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "dist/types/src/types.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.16.13",
+    "@dxos/ai": "0.8.4-main.f9ba587",
+    "@dxos/artifact": "0.8.4-main.f9ba587",
+    "@dxos/app-framework": "0.8.4-main.f9ba587",
+    "@dxos/assistant": "0.8.4-main.f9ba587",
+    "@dxos/async": "0.8.4-main.f9ba587",
+    "@dxos/echo": "0.8.4-main.f9ba587",
+    "@dxos/echo-schema": "0.8.4-main.f9ba587",
+    "@dxos/effect": "0.8.4-main.f9ba587",
+    "@dxos/client": "0.8.4-main.f9ba587",
+    "@dxos/invariant": "0.8.4-main.f9ba587",
+    "@dxos/log": "0.8.4-main.f9ba587",
+    "@dxos/plugin-client": "0.8.4-main.f9ba587",
+    "@dxos/plugin-graph": "0.8.4-main.f9ba587",
+    "@dxos/plugin-search": "0.8.4-main.f9ba587",
+    "@dxos/plugin-space": "0.8.4-main.f9ba587",
+    "@dxos/random": "0.8.4-main.f9ba587",
+    "@dxos/react-client": "0.8.4-main.f9ba587",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-board": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-form": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
+    "@dxos/schema": "0.8.4-main.f9ba587",
+    "@dxos/util": "0.8.4-main.f9ba587"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/plugin-preview": "0.8.4-main.f9ba587",
+    "@dxos/plugin-theme": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
+    "@dxos/storybook-utils": "0.8.4-main.f9ba587",
+    "@dxos/test-utils": "0.8.4-main.f9ba587"
+  },
+  "peerDependencies": {
+    "effect": "^3.13.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.8.4-main.f9ba587",
+    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BoardPlugin.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } 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 { contributes, Capabilities, type PluginContext, 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.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { getSpace } from '@dxos/client/echo';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { Board as BoardComponent, type BoardController, type BoardRootProps } from '@dxos/react-ui-board';
+import { StackItem } from '@dxos/react-ui-stack';
+import { isNonNullable } from '@dxos/util';
+
+import { type Board } from '../types';
+
+export type BoardContainerProps = {
+  role: string;
+  board: Board.Board;
+};
+
+export const BoardContainer = ({ role, board }: BoardContainerProps) => {
+  const controller = useRef<BoardController>(null);
+
+  // TODO(burdon): Create effect utility for reactive arrays.
+  const [items, setItems] = useState<Type.Expando[]>([]);
+  useEffect(() => {
+    let t: NodeJS.Timeout;
+    effect(() => {
+      const refs = [...board.items];
+      t = setTimeout(async () => {
+        const items = await Ref.Array.loadAll(refs);
+        setItems(items.filter(isNonNullable));
+      });
+    });
+
+    return () => clearTimeout(t);
+  }, [board.items]);
+
+  const handleAdd = useCallback<NonNullable<BoardRootProps['onAdd']>>(
+    (position = { x: 0, y: 0 }) => {
+      const space = getSpace(board);
+      invariant(space);
+      // TODO(burdon): Create from menu/intent?
+      const obj = space.db.add(Obj.make(Type.Expando, {}));
+      board.items.push(Ref.make(obj));
+      board.layout.cells[obj.id] = { ...position, width: 1, height: 1 };
+      controller.current?.center(position);
+    },
+    [board, controller],
+  );
+
+  // 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];
+      setItems((items) => items.filter((item) => item.id !== id));
+    },
+    [board],
+  );
+
+  const handleMove = useCallback<NonNullable<BoardRootProps['onMove']>>(
+    (id, position) => {
+      const layout = board.layout.cells[id];
+      board.layout.cells[id] = { ...layout, ...position };
+    },
+    [board],
+  );
+
+  return (
+    <BoardComponent.Root
+      ref={controller}
+      layout={board.layout}
+      onAdd={handleAdd}
+      onDelete={handleDelete}
+      onMove={handleMove}
+    >
+      <StackItem.Content role={role} toolbar>
+        <BoardComponent.Controls />
+        <BoardComponent.Container>
+          <BoardComponent.Viewport classNames='border-none'>
+            <BoardComponent.Background />
+            <BoardComponent.Content items={items} getTitle={(item) => Obj.getLabel(item) ?? item.id} />
+          </BoardComponent.Viewport>
+        </BoardComponent.Container>
+      </StackItem.Content>
+    </BoardComponent.Root>
+  );
+};

package/src/components/index.ts

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

package/src/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './meta';
+
+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,25 @@
+//
+// 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',
+      },
+      [meta.id]: {
+        'plugin name': 'Board',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/index.ts

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

package/src/types/schema.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Schema } from 'effect';
+
+import { Type } from '@dxos/echo';
+import { LabelAnnotation } from '@dxos/echo-schema';
+import { BoardLayout } from '@dxos/react-ui-board';
+
+import { meta } from '../meta';
+
+export namespace Board {
+  //
+  // Types
+  //
+
+  // TODO(burdon): View?
+  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> {}
+
+  //
+  // Actions
+  //
+
+  export class Create extends Schema.TaggedClass<Create>()(`${meta.id}/action/create`, {
+    input: Schema.Struct({
+      name: Schema.optional(Schema.String),
+    }),
+    output: Schema.Struct({
+      object: Board,
+    }),
+  }) {}
+}