@dxos/plugin-chess 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,6 +20,12 @@
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
+    },
+    "./functions": {
+      "source": "./src/functions/index.ts",
+      "types": "./dist/types/src/functions/index.d.ts",
+      "browser": "./dist/lib/browser/functions/index.mjs",
+      "node": "./dist/lib/node-esm/functions/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -36,45 +42,46 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "chess.js": "^1.0.0",
-    "effect": "3.17.7",
-    "@dxos/ai": "0.8.4-main.fd6878d",
-    "@dxos/app-framework": "0.8.4-main.fd6878d",
-    "@dxos/assistant": "0.8.4-main.fd6878d",
-    "@dxos/async": "0.8.4-main.fd6878d",
-    "@dxos/blueprints": "0.8.4-main.fd6878d",
-    "@dxos/display-name": "0.8.4-main.fd6878d",
-    "@dxos/echo-schema": "0.8.4-main.fd6878d",
-    "@dxos/functions": "0.8.4-main.fd6878d",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/echo": "0.8.4-main.fd6878d",
-    "@dxos/live-object": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/plugin-client": "0.8.4-main.fd6878d",
-    "@dxos/plugin-graph": "0.8.4-main.fd6878d",
-    "@dxos/plugin-space": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-stack": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d",
-    "@dxos/react-client": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-gameboard": "0.8.4-main.fd6878d"
+    "effect": "3.18.3",
+    "@dxos/ai": "0.8.4-main.fffef41",
+    "@dxos/app-framework": "0.8.4-main.fffef41",
+    "@dxos/assistant": "0.8.4-main.fffef41",
+    "@dxos/display-name": "0.8.4-main.fffef41",
+    "@dxos/blueprints": "0.8.4-main.fffef41",
+    "@dxos/echo": "0.8.4-main.fffef41",
+    "@dxos/functions": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/log": "0.8.4-main.fffef41",
+    "@dxos/plugin-client": "0.8.4-main.fffef41",
+    "@dxos/async": "0.8.4-main.fffef41",
+    "@dxos/live-object": "0.8.4-main.fffef41",
+    "@dxos/plugin-graph": "0.8.4-main.fffef41",
+    "@dxos/plugin-space": "0.8.4-main.fffef41",
+    "@dxos/react-client": "0.8.4-main.fffef41",
+    "@dxos/react-ui-sfx": "0.8.4-main.fffef41",
+    "@dxos/react-ui-stack": "0.8.4-main.fffef41",
+    "@dxos/schema": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41",
+    "@dxos/react-ui-gameboard": "0.8.4-main.fffef41"
   },
   "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-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/plugin-theme": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -7,54 +7,55 @@ import { ClientEvents } from '@dxos/plugin-client';
 import { SpaceCapabilities } from '@dxos/plugin-space';
 import { defineObjectForm } from '@dxos/plugin-space/types';
 
-import { BlueprintDefinition, IntentResolver, ReactSurface } from './capabilities';
+import { BlueprintDefinition, CHESS_BLUEPRINT_KEY, IntentResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 import { Chess, ChessAction } from './types';
 
-export const ChessPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: Chess.Game.typename,
-          metadata: {
-            icon: 'ph--shield-chevron--regular',
-          },
+export const ChessPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: Chess.Game.typename,
+        metadata: {
+          icon: 'ph--shield-chevron--regular',
+          iconHue: 'amber',
+          blueprints: [CHESS_BLUEPRINT_KEY],
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/object-form`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () =>
+      contributes(
+        SpaceCapabilities.ObjectForm,
+        defineObjectForm({
+          objectSchema: Chess.Game,
+          getIntent: () => createIntent(ChessAction.Create),
         }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/object-form`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () =>
-        contributes(
-          SpaceCapabilities.ObjectForm,
-          defineObjectForm({
-            objectSchema: Chess.Game,
-            getIntent: () => createIntent(ChessAction.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,
-    }),
-    defineModule({
-      id: `${meta.id}/module/blueprint`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: BlueprintDefinition,
-    }),
-  ]);
+      ),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/blueprint`,
+    activatesOn: Events.SetupArtifactDefinition,
+    activate: BlueprintDefinition,
+  }),
+]);

package/src/capabilities/artifact-definition.ts

@@ -6,7 +6,8 @@
 // @ts-nocheck
 
 import { Chess as ChessJS } from 'chess.js';
-import { Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 
 import { ToolResult, createTool } from '@dxos/ai';
 import { Capabilities, type PromiseIntentDispatcher, chain, contributes, createIntent } from '@dxos/app-framework';
@@ -50,7 +51,7 @@ export default () => {
         execute: async ({ pgn }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           invariant(extensions?.dispatch, 'No intent dispatcher');
-          const intent = pipe(
+          const intent = Function.pipe(
             createIntent(ChessAction.Create, { pgn }),
             chain(SpaceAction.AddObject, { target: extensions.space }),
           );

package/src/capabilities/blueprint-definition.ts

@@ -2,33 +2,35 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ToolId } from '@dxos/ai';
 import { Capabilities, contributes } from '@dxos/app-framework';
 import { Blueprint, Template } from '@dxos/blueprints';
+import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { move, play } from '../functions';
+import { create, move, play } from '../functions';
 
-const functions = [move, play];
+const functions: FunctionDefinition[] = [create, move, play];
+
+export const CHESS_BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
 
 export default () => {
   return [
+    contributes(Capabilities.Functions, functions),
     contributes(
       Capabilities.BlueprintDefinition,
       Blueprint.make({
-        key: 'dxos.org/blueprint/chess',
+        key: CHESS_BLUEPRINT_KEY,
         name: 'Chess',
+        tools: Blueprint.toolDefinitions({ functions }),
         instructions: Template.make({
           source: trim`
             You are an expert chess player.
+            To analyze a game you can access the "pgn" property by loading the context object that represents the current game.
             You could suggest a good next move or offer to play a move.
             Don't actually make a move unless you are asked to.
-            To analyze a game you can retrieve the "pgn" property from the context object.
           `,
         }),
-        tools: functions.map((tool) => ToolId.make(tool.name)),
       }),
     ),
-    contributes(Capabilities.Functions, functions),
   ];
 };

package/src/capabilities/index.ts

@@ -7,3 +7,5 @@ import { lazy } from '@dxos/app-framework';
 export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
+
+export * from './blueprint-definition';

package/src/components/Card.stories.tsx

@@ -2,15 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { withTheme } from '@dxos/react-ui/testing';
 import { CardContainer } from '@dxos/react-ui-stack/testing';
-import { withTheme } from '@dxos/storybook-utils';
 
-import { meta } from '../meta';
+import { meta as pluginMeta } from '../meta';
 import { Chess } from '../types';
 
 import { Chessboard } from './Chessboard';
@@ -20,10 +18,10 @@ type DefaultStoryProps = {
   game: Chess.Game;
 };
 
-const storybook: Meta<DefaultStoryProps> = {
+const meta = {
   title: 'plugins/plugin-chess/Card',
   render: ({ role, game }) => (
-    <CardContainer icon={meta.icon} role={role}>
+    <CardContainer icon={pluginMeta.icon} role={role}>
       <Chessboard.Root game={game}>
         <Chessboard.Content role={role}>
           <Chessboard.Board />
@@ -36,33 +34,33 @@ const storybook: Meta<DefaultStoryProps> = {
     layout: 'centered',
   },
   tags: ['cards'],
-};
+} satisfies Meta<DefaultStoryProps>;
 
-export default storybook;
+export default meta;
 
 const game = Chess.makeGame({
   pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 14. d5 Qg5 15. dxe6 Qg4 16. e7 Kf7 17. bxc3 Kg6 *',
 });
 
-type Story = StoryObj<DefaultStoryProps>;
+type Story = StoryObj<typeof meta>;
 
-export const Popover = {
+export const Popover: Story = {
   args: {
     role: 'card--popover',
     game: game,
   },
-} satisfies Story;
+};
 
-export const Intrinsic = {
+export const Intrinsic: Story = {
   args: {
     role: 'card--intrinsic',
     game: game,
   },
-} satisfies Story;
+};
 
-export const Extrinsic = {
+export const Extrinsic: Story = {
   args: {
     role: 'card--extrinsic',
     game: game,
   },
-} satisfies Story;
+};

package/src/components/Chessboard.stories.tsx

@@ -2,49 +2,48 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 import { Chess } from '../types';
 
 import { ChessboardArticle } from './ChessboardArticle';
 
-const meta: Meta<typeof ChessboardArticle> = {
+const meta = {
   title: 'plugins/plugin-chess/Chessboard',
   component: ChessboardArticle,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ fullscreen: true })],
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
-
-type Story = StoryObj<typeof meta>;
+} satisfies Meta<typeof ChessboardArticle>;
 
 export default meta;
 
-export const Default = {
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     game: Chess.makeGame(),
   },
-} satisfies Story;
+};
 
-export const EndGame = {
+export const EndGame: Story = {
   args: {
     game: Chess.makeGame({
       pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
     }),
   },
-} satisfies Story;
+};
 
-export const Promption = {
+export const Promption: Story = {
   args: {
     game: Chess.makeGame({
       pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 14. d5 Qg5 15. dxe6 Qg4 16. e7 Kf7 17. bxc3 Kg6 *',
     }),
   },
-} satisfies Story;
+};

package/src/components/Chessboard.tsx

@@ -2,23 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
-
-import { log } from '@dxos/log';
+import React, {
+  type PropsWithChildren,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { addEventListener } from '@dxos/async';
 import { type ThemedClassName } from '@dxos/react-ui';
 import {
   ChessModel,
   Gameboard,
   type GameboardRootProps,
-  Chessboard as NativeChessboard,
-  type ChessboardProps as NativeChessboardProps,
+  Chessboard as NaturalChessboard,
+  type ChessboardProps as NaturalChessboardProps,
+  getRawPgn,
+  useGameboardContext,
 } from '@dxos/react-ui-gameboard';
+import { useSoundEffect } from '@dxos/react-ui-sfx';
 import { mx } from '@dxos/react-ui-theme';
 
 import { type Chess } from '../types';
 
-import { ChessboardInfo, type ChessboardInfoProps } from './ChessboardInfo';
-import { ChessboardPlayers, type ChessboardPlayersProps } from './ChessboardPlayers';
+import { Info, type InfoProps } from './Info';
+
+export interface ChessboardController {
+  setMoveNumber(index: number): void;
+}
 
 export class ExtendedChessModel extends ChessModel {
   constructor(readonly object: Chess.Game) {
@@ -30,25 +44,43 @@ export class ExtendedChessModel extends ChessModel {
 // Root
 //
 
-type ChessboardRootProps = PropsWithChildren<{
+type RootProps = PropsWithChildren<{
   game: Chess.Game;
 }>;
 
-const ChessboardRoot = ({ game, children }: ChessboardRootProps) => {
+const Root = forwardRef<ChessboardController, RootProps>(({ game, children }, forwardedRef) => {
   const model = useMemo(() => new ExtendedChessModel(game), []);
+  const click = useSoundEffect('Click');
+
+  // Controller.
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      setMoveNumber: (index) => model.setMoveIndex(index),
+    };
+  }, [model]);
+
+  // External change.
+  // NOTE: Warning if user has not interacted with the board.
   useEffect(() => {
-    model.update(game.pgn);
-    log('update', { pgn: game.pgn });
+    if (model.pgn !== getRawPgn(game.pgn ?? '')) {
+      const silent = model.pgn === '*';
+      model.update(game.pgn);
+      if (!silent) {
+        void click.play();
+      }
+    }
   }, [game.pgn]);
 
+  // Move.
   const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
     (move) => {
-      if (model.makeMove(move)) {
-        game.pgn = model.pgn;
-        return true;
+      if (!model.makeMove(move)) {
+        return false;
       }
 
-      return false;
+      void click.play();
+      game.pgn = model.pgn;
+      return true;
     },
     [model],
   );
@@ -58,7 +90,7 @@ const ChessboardRoot = ({ game, children }: ChessboardRootProps) => {
       {children}
     </Gameboard.Root>
   );
-};
+});
 
 //
 // Content
@@ -66,9 +98,9 @@ const ChessboardRoot = ({ game, children }: ChessboardRootProps) => {
 
 type Role = 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
 
-type ChessboardContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
+type ContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
 
-const ChessboardContent = ({ classNames, children, role }: ChessboardContentProps) => {
+const Content = ({ classNames, children, role }: ContentProps) => {
   return (
     <Gameboard.Content
       classNames={mx(classNames, role === 'card--popover' && 'size-container popover-square')}
@@ -80,22 +112,66 @@ const ChessboardContent = ({ classNames, children, role }: ChessboardContentProp
   );
 };
 
+//
+// Board
+//
+
+type BoardProps = NaturalChessboardProps;
+
+const Board = (props: BoardProps) => {
+  const { model } = useGameboardContext<ChessModel>(Board.displayName);
+
+  // Keyboard navigation.
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    // Participate in keyboard navigation (set tabIndex={0})
+    ref.current.setAttribute('data-arrow-keys', 'all');
+
+    return addEventListener(ref.current, 'keydown', (ev) => {
+      switch (ev.key) {
+        case 'ArrowUp':
+          model.setMoveIndex(0);
+          break;
+        case 'ArrowDown':
+          model.setMoveIndex(model.game.history().length);
+          break;
+        case 'ArrowLeft':
+          if (model.moveIndex.value > 0) {
+            model.setMoveIndex(model.moveIndex.value - 1);
+          }
+          break;
+        case 'ArrowRight':
+          if (model.moveIndex.value < model.game.history().length) {
+            model.setMoveIndex(model.moveIndex.value + 1);
+          }
+          break;
+      }
+    });
+  }, [model]);
+
+  return <NaturalChessboard ref={ref} {...props} />;
+};
+
+Board.displayName = 'Chessboard.Board';
+
 //
 // Chessboard
 //
 
 export const Chessboard = {
-  Root: ChessboardRoot,
-  Content: ChessboardContent,
-  Board: NativeChessboard,
-  Info: ChessboardInfo,
-  Players: ChessboardPlayers,
+  Root: Root,
+  Content: Content,
+  Board: Board,
+  Info: Info,
 };
 
 export type {
-  ChessboardRootProps,
-  ChessboardContentProps,
-  NativeChessboardProps as ChessboardBoardProps,
-  ChessboardInfoProps,
-  ChessboardPlayersProps,
+  RootProps as ChessboardRootProps,
+  ContentProps as ChessboardContentProps,
+  BoardProps as ChessboardBoardProps,
+  InfoProps as ChessboardInfoProps,
 };