@dxos/plugin-chess 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.5ea62a8",
+  "version": "0.8.4-main.66e292d",
   "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,46 +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.5ea62a8",
-    "@dxos/app-framework": "0.8.4-main.5ea62a8",
-    "@dxos/assistant": "0.8.4-main.5ea62a8",
-    "@dxos/display-name": "0.8.4-main.5ea62a8",
-    "@dxos/blueprints": "0.8.4-main.5ea62a8",
-    "@dxos/async": "0.8.4-main.5ea62a8",
-    "@dxos/echo": "0.8.4-main.5ea62a8",
-    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
-    "@dxos/functions": "0.8.4-main.5ea62a8",
-    "@dxos/live-object": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-client": "0.8.4-main.5ea62a8",
-    "@dxos/log": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-graph": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-space": "0.8.4-main.5ea62a8",
-    "@dxos/react-client": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-gameboard": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-stack": "0.8.4-main.5ea62a8",
-    "@dxos/schema": "0.8.4-main.5ea62a8",
-    "@dxos/util": "0.8.4-main.5ea62a8",
-    "@dxos/invariant": "0.8.4-main.5ea62a8"
+    "effect": "3.18.3",
+    "@dxos/ai": "0.8.4-main.66e292d",
+    "@dxos/assistant": "0.8.4-main.66e292d",
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/blueprints": "0.8.4-main.66e292d",
+    "@dxos/display-name": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/functions": "0.8.4-main.66e292d",
+    "@dxos/live-object": "0.8.4-main.66e292d",
+    "@dxos/plugin-client": "0.8.4-main.66e292d",
+    "@dxos/plugin-graph": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/plugin-space": "0.8.4-main.66e292d",
+    "@dxos/react-client": "0.8.4-main.66e292d",
+    "@dxos/react-ui-gameboard": "0.8.4-main.66e292d",
+    "@dxos/react-ui-sfx": "0.8.4-main.66e292d",
+    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
+    "@dxos/schema": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d",
+    "@dxos/app-framework": "0.8.4-main.66e292d"
   },
   "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-theme": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8"
+    "@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/plugin-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -3,59 +3,53 @@
 //
 
 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 { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { type CreateObjectIntent } from '@dxos/plugin-space/types';
 
-import { BLUEPRINT_KEY, 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',
-            blueprints: [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/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,
-    }),
-  ]);
+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],
+          createObjectIntent: (() => createIntent(ChessAction.Create)) satisfies CreateObjectIntent,
+          addToCollectionOnCreate: true,
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/schema`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () => contributes(ClientCapabilities.Schema, [Chess.Game]),
+  }),
+  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

@@ -9,17 +9,17 @@ import { trim } from '@dxos/util';
 
 import { create, move, play } from '../functions';
 
-export const BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
-
 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: BLUEPRINT_KEY,
+        key: CHESS_BLUEPRINT_KEY,
         name: 'Chess',
         tools: Blueprint.toolDefinitions({ functions }),
         instructions: Template.make({

package/src/components/Card.stories.tsx

@@ -2,13 +2,11 @@
 // 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 as pluginMeta } from '../meta';
 import { Chess } from '../types';
@@ -20,7 +18,7 @@ type DefaultStoryProps = {
   game: Chess.Game;
 };
 
-const meta: Meta<DefaultStoryProps> = {
+const meta = {
   title: 'plugins/plugin-chess/Card',
   render: ({ role, game }) => (
     <CardContainer icon={pluginMeta.icon} role={role}>
@@ -36,7 +34,7 @@ const meta: Meta<DefaultStoryProps> = {
     layout: 'centered',
   },
   tags: ['cards'],
-};
+} satisfies Meta<DefaultStoryProps>;
 
 export default meta;
 

package/src/components/Chessboard.stories.tsx

@@ -2,12 +2,10 @@
 // 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';
@@ -17,8 +15,9 @@ import { ChessboardArticle } from './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,
   },
 } satisfies Meta<typeof ChessboardArticle>;

package/src/components/Chessboard.tsx

@@ -18,15 +18,17 @@ 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;
@@ -42,12 +44,13 @@ export class ExtendedChessModel extends ChessModel {
 // Root
 //
 
-type ChessboardRootProps = PropsWithChildren<{
+type RootProps = PropsWithChildren<{
   game: Chess.Game;
 }>;
 
-const ChessboardRoot = forwardRef<ChessboardController, ChessboardRootProps>(({ game, children }, forwardedRef) => {
+const Root = forwardRef<ChessboardController, RootProps>(({ game, children }, forwardedRef) => {
   const model = useMemo(() => new ExtendedChessModel(game), []);
+  const click = useSoundEffect('Click');
 
   // Controller.
   useImperativeHandle(forwardedRef, () => {
@@ -57,57 +60,34 @@ const ChessboardRoot = forwardRef<ChessboardController, ChessboardRootProps>(({
   }, [model]);
 
   // External change.
+  // NOTE: Warning if user has not interacted with the board.
   useEffect(() => {
-    model.update(game.pgn);
-  }, [game.pgn]);
-
-  // Keyboard navigation.
-  const ref = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    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;
+    if (model.pgn !== getRawPgn(game.pgn ?? '')) {
+      const silent = model.pgn === '*';
+      model.update(game.pgn);
+      if (!silent) {
+        void click.play();
       }
-    });
-  }, [model]);
+    }
+  }, [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],
   );
 
   return (
     <Gameboard.Root model={model} onDrop={handleDrop}>
-      <div ref={ref} role='none' tabIndex={0} className='grid grow outline-none'>
-        {children}
-      </div>
+      {children}
     </Gameboard.Root>
   );
 });
@@ -118,9 +98,9 @@ const ChessboardRoot = forwardRef<ChessboardController, 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')}
@@ -132,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,
 };

package/src/components/ChessboardArticle.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 
-import { IconButton, useTranslation } from '@dxos/react-ui';
+import { Toolbar, useTranslation } from '@dxos/react-ui';
 import { type Player } from '@dxos/react-ui-gameboard';
 import { StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
@@ -14,7 +14,7 @@ import { type Chess } from '../types';
 
 import { Chessboard, type ChessboardController, type ChessboardInfoProps } from './Chessboard';
 
-export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
+export const ChessboardArticle = ({ game, role }: { game: Chess.Game; role?: string }) => {
   const { t } = useTranslation(meta.id);
   const [orientation, setOrientation] = useState<Player>('white');
   const [open, setOpen] = useState(true);
@@ -26,11 +26,28 @@ export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
   }, []);
 
   return (
-    <StackItem.Content classNames='@container bs-full is-full overflow-hidden'>
+    <StackItem.Content toolbar classNames='@container'>
       <Chessboard.Root game={game} ref={controller}>
-        <div className={mx('grid grid-rows-[1fr_4rem] bs-full is-full gap-2', open && '@3xl:grid-cols-[1fr_320px]')}>
+        <Toolbar.Root>
+          <Toolbar.IconButton
+            icon='ph--info--regular'
+            iconOnly
+            label={t('toggle info button')}
+            disabled={open}
+            classNames={mx('invisible @3xl:visible')}
+            onClick={() => setOpen((open) => !open)}
+          />
+        </Toolbar.Root>
+        <div
+          className={mx(
+            'grid bs-full is-full gap-2',
+            open && '@3xl:grid-cols-[1fr_320px]',
+            role === 'section' && 'aspect-square',
+            role === 'section' && open && '@3xl:aspect-auto',
+          )}
+        >
           <Chessboard.Content>
-            <Chessboard.Board orientation={orientation} />
+            <Chessboard.Board classNames='m-4 rounded-sm overflow-hidden' orientation={orientation} />
           </Chessboard.Content>
           {open && (
             <div className='hidden @3xl:flex flex-col p-8 justify-center items-center overflow-hidden'>
@@ -44,19 +61,6 @@ export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
               />
             </div>
           )}
-          <div className='flex justify-center items-center'>
-            <Chessboard.Players>
-              <IconButton
-                variant='ghost'
-                icon='ph--info--regular'
-                iconOnly
-                label={t('button toggle info')}
-                size={6}
-                classNames={mx('invisible', !open && '@3xl:visible')}
-                onClick={() => setOpen((open) => !open)}
-              />
-            </Chessboard.Players>
-          </div>
         </div>
       </Chessboard.Root>
     </StackItem.Content>

package/src/components/ChessboardContainer.tsx

@@ -36,7 +36,7 @@ export const ChessboardContainer = ({ game, role }: ChessboardContainerProps) =>
     }
 
     default: {
-      return <ChessboardArticle game={game} />;
+      return <ChessboardArticle game={game} role={role} />;
     }
   }
 };