@dxos/plugin-chess 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.dedc0f3",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,14 +10,22 @@
   "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"
+    },
+    "./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,41 +44,45 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
     "chess.js": "^1.0.0",
-    "effect": "3.17.0",
-    "@dxos/ai": "0.8.4-main.c1de068",
-    "@dxos/app-framework": "0.8.4-main.c1de068",
-    "@dxos/assistant": "0.8.4-main.c1de068",
-    "@dxos/display-name": "0.8.4-main.c1de068",
-    "@dxos/blueprints": "0.8.4-main.c1de068",
-    "@dxos/echo": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/async": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/plugin-client": "0.8.4-main.c1de068",
-    "@dxos/plugin-space": "0.8.4-main.c1de068",
-    "@dxos/plugin-graph": "0.8.4-main.c1de068",
-    "@dxos/react-ui-gameboard": "0.8.4-main.c1de068",
-    "@dxos/react-client": "0.8.4-main.c1de068",
-    "@dxos/react-ui-stack": "0.8.4-main.c1de068"
+    "effect": "3.17.7",
+    "@dxos/ai": "0.8.4-main.dedc0f3",
+    "@dxos/app-framework": "0.8.4-main.dedc0f3",
+    "@dxos/assistant": "0.8.4-main.dedc0f3",
+    "@dxos/async": "0.8.4-main.dedc0f3",
+    "@dxos/display-name": "0.8.4-main.dedc0f3",
+    "@dxos/echo": "0.8.4-main.dedc0f3",
+    "@dxos/blueprints": "0.8.4-main.dedc0f3",
+    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
+    "@dxos/functions": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/live-object": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-client": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-graph": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-space": "0.8.4-main.dedc0f3",
+    "@dxos/react-client": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-gameboard": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-sfx": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
+    "@dxos/schema": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3"
   },
   "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.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "vite": "7.1.1",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/plugin-theme": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -2,15 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+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 { ArtifactDefinition, IntentResolver, ReactSurface } from './capabilities';
+import { BLUEPRINT_KEY, BlueprintDefinition, IntentResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
-import { ChessAction, ChessType } from './types';
+import { Chess, ChessAction } from './types';
 
 export const ChessPlugin = () =>
   definePlugin(meta, [
@@ -24,9 +24,10 @@ export const ChessPlugin = () =>
       activatesOn: Events.SetupMetadata,
       activate: () =>
         contributes(Capabilities.Metadata, {
-          id: ChessType.typename,
+          id: Chess.Game.typename,
           metadata: {
             icon: 'ph--shield-chevron--regular',
+            blueprints: [BLUEPRINT_KEY],
           },
         }),
     }),
@@ -37,7 +38,7 @@ export const ChessPlugin = () =>
         contributes(
           SpaceCapabilities.ObjectForm,
           defineObjectForm({
-            objectSchema: ChessType,
+            objectSchema: Chess.Game,
             getIntent: () => createIntent(ChessAction.Create),
           }),
         ),
@@ -53,8 +54,8 @@ export const ChessPlugin = () =>
       activate: IntentResolver,
     }),
     defineModule({
-      id: `${meta.id}/module/artifact-definition`,
+      id: `${meta.id}/module/blueprint`,
       activatesOn: Events.SetupArtifactDefinition,
-      activate: ArtifactDefinition,
+      activate: BlueprintDefinition,
     }),
   ]);

package/src/capabilities/artifact-definition.ts

@@ -2,20 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Chess } from 'chess.js';
-import { pipe, Schema } from 'effect';
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
 
-import { createTool, ToolResult } from '@dxos/ai';
-import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { createArtifactElement, VersionPin, ArtifactId } from '@dxos/assistant';
+import { Chess as ChessJS } from 'chess.js';
+import { Schema, pipe } from 'effect';
+
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capabilities, type PromiseIntentDispatcher, chain, contributes, createIntent } from '@dxos/app-framework';
+import { ArtifactId, VersionPin, createArtifactElement } from '@dxos/assistant';
 import { defineArtifact } from '@dxos/blueprints';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { Filter, type Space } from '@dxos/react-client/echo';
+import { trim } from '@dxos/util';
 
 import { meta } from '../meta';
-import { ChessAction, ChessType } from '../types';
+import { Chess, ChessAction } from '../types';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -30,24 +34,24 @@ export default () => {
     id: `artifact:${meta.id}`,
     name: meta.name,
     description: 'Provides a simple chess engine.',
-    instructions: `
+    instructions: trim`
       - If the user's message relates to a chess game, you must return the chess game inside the artifact tag as a valid FEN string with no additional text.
       - Always inspect the chess game at the start of every prompt realting to a chess game, as it might have changed since the interaction.
    `,
-    schema: ChessType,
+    schema: Chess.Game,
     tools: [
       createTool(meta.id, {
         name: 'create',
         description: 'Create a new chess game. Returns the artifact definition for the game.',
         caption: 'Creating chess game...',
         schema: Schema.Struct({
-          fen: Schema.String.annotations({ description: 'The state of the chess game in the FEN format.' }),
+          pgn: Schema.String.annotations({ description: 'The state of the chess game in the PGN format.' }),
         }),
-        execute: async ({ fen }, { extensions }) => {
+        execute: async ({ pgn }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           invariant(extensions?.dispatch, 'No intent dispatcher');
           const intent = pipe(
-            createIntent(ChessAction.Create, { fen }),
+            createIntent(ChessAction.Create, { pgn }),
             chain(SpaceAction.AddObject, { target: extensions.space }),
           );
           const { data, error } = await extensions.dispatch(intent);
@@ -67,7 +71,7 @@ export default () => {
         schema: Schema.Struct({}),
         execute: async (_, { extensions }) => {
           invariant(extensions?.space, 'No space');
-          const { objects: games } = await extensions.space.db.query(Filter.type(ChessType)).run();
+          const { objects: games } = await extensions.space.db.query(Filter.type(Chess.Game)).run();
           invariant(games.length > 0, 'No chess games found');
 
           return ToolResult.Success(games);
@@ -83,9 +87,9 @@ export default () => {
           const game = await extensions.space.db
             .query(Filter.ids(ArtifactId.toDXN(id, extensions.space.id).toString()))
             .first();
-          invariant(Obj.instanceOf(ChessType, game));
+          invariant(Obj.instanceOf(Chess.Game, game));
 
-          return ToolResult.Success(game.fen);
+          return ToolResult.Success(game.pgn);
         },
       }),
       createTool(meta.id, {
@@ -104,17 +108,17 @@ export default () => {
           const game = await extensions.space.db
             .query(Filter.ids(ArtifactId.toDXN(id, extensions.space.id).toString()))
             .first();
-          invariant(Obj.instanceOf(ChessType, game));
+          invariant(Obj.instanceOf(Chess.Game, game));
 
-          const board = new Chess(game.fen);
+          const chess = new ChessJS(game.pgn);
           try {
-            board.move(move);
+            chess.move(move);
           } catch (error: any) {
             return ToolResult.Error(error.message);
           }
-          game.pgn = board.pgn();
-          game.fen = board.fen();
-          return ToolResult.Success(game.fen);
+
+          game.pgn = chess.pgn();
+          return ToolResult.Success(game.pgn);
         },
       }),
     ],

package/src/capabilities/blueprint-definition.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { create, move, play } from '../functions';
+
+export const BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
+
+const functions: FunctionDefinition[] = [create, move, play];
+
+export default () => {
+  return [
+    contributes(Capabilities.Functions, functions),
+    contributes(
+      Capabilities.BlueprintDefinition,
+      Blueprint.make({
+        key: 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.
+          `,
+        }),
+      }),
+    ),
+  ];
+};

package/src/capabilities/index.ts

@@ -4,6 +4,8 @@
 
 import { lazy } from '@dxos/app-framework';
 
-export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
+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/capabilities/intent-resolver.ts

@@ -2,23 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Chess } from 'chess.js';
-
 import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
 
-import { ChessAction, ChessType } from '../types';
+import { Chess, ChessAction } from '../types';
 
 export default () =>
   contributes(
     Capabilities.IntentResolver,
     createResolver({
       intent: ChessAction.Create,
-      resolve: ({ name, fen }) => {
-        const pgn = fen ? new Chess(fen).pgn() : undefined;
+      resolve: ({ name, pgn }) => {
         return {
           data: {
-            object: Obj.make(ChessType, { name, fen, pgn }),
+            object: Chess.makeGame({ name, pgn }),
           },
         };
       },

package/src/capabilities/react-surface.tsx

@@ -7,17 +7,17 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 
-import { ChessContainer } from '../components';
+import { ChessboardContainer } from '../components';
 import { meta } from '../meta';
-import { ChessType } from '../types';
+import { Chess } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: meta.id,
       role: ['article', 'section', 'card--intrinsic', 'card--extrinsic', 'card--popover', 'card--transclusion'],
-      // TODO(burdon): Could this be standardized so that we don't require a subject property (like below)?
-      filter: (data): data is { subject: ChessType } => Obj.instanceOf(ChessType, data.subject),
-      component: ({ data, role }) => <ChessContainer game={data.subject} role={role} />,
+      // TODO(burdon): Could this be standardized so that we don't require a subject property.
+      filter: (data): data is { subject: Chess.Game } => Obj.instanceOf(Chess.Game, data.subject),
+      component: ({ data, role }) => <ChessboardContainer game={data.subject} role={role} />,
     }),
   ]);

package/src/components/Card.stories.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { CardContainer } from '@dxos/react-ui-stack/testing';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { meta as pluginMeta } from '../meta';
+import { Chess } from '../types';
+
+import { Chessboard } from './Chessboard';
+
+type DefaultStoryProps = {
+  role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
+  game: Chess.Game;
+};
+
+const meta: Meta<DefaultStoryProps> = {
+  title: 'plugins/plugin-chess/Card',
+  render: ({ role, game }) => (
+    <CardContainer icon={pluginMeta.icon} role={role}>
+      <Chessboard.Root game={game}>
+        <Chessboard.Content role={role}>
+          <Chessboard.Board />
+        </Chessboard.Content>
+      </Chessboard.Root>
+    </CardContainer>
+  ),
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['cards'],
+};
+
+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<typeof meta>;
+
+export const Popover: Story = {
+  args: {
+    role: 'card--popover',
+    game: game,
+  },
+};
+
+export const Intrinsic: Story = {
+  args: {
+    role: 'card--intrinsic',
+    game: game,
+  },
+};
+
+export const Extrinsic: Story = {
+  args: {
+    role: 'card--extrinsic',
+    game: game,
+  },
+};

package/src/components/Chessboard.stories.tsx

@@ -5,37 +5,46 @@
 import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
 
-import { Gameboard, Chessboard, ChessModel } from '@dxos/react-ui-gameboard';
+import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ChessPanel } from './ChessPanel';
-
-const DefaultStory = () => {
-  const model = useMemo(() => new ChessModel(), []);
-
-  return (
-    <div className='flex grow mx-8 gap-8 items-center overflow-hidden'>
-      <Gameboard.Root model={model} onDrop={(move) => model.makeMove(move)}>
-        <Gameboard.Content>
-          <Chessboard />
-        </Gameboard.Content>
-      </Gameboard.Root>
-      <ChessPanel model={model} classNames='w-[200px]' />
-    </div>
-  );
-};
+import { translations } from '../translations';
+import { Chess } from '../types';
 
-const meta: Meta<typeof Chessboard> = {
-  title: 'plugins/plugin-chess/Chessboard',
-  component: Chessboard,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+import { ChessboardArticle } from './ChessboardArticle';
 
-type Story = StoryObj<typeof Chessboard>;
+const meta = {
+  title: 'plugins/plugin-chess/Chessboard',
+  component: ChessboardArticle,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof ChessboardArticle>;
 
 export default meta;
 
-export const Default: Story = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    game: Chess.makeGame(),
+  },
+};
+
+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 *',
+    }),
+  },
+};
+
+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 *',
+    }),
+  },
+};

package/src/components/Chessboard.tsx

@@ -0,0 +1,177 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 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 { Info, type InfoProps } from './Info';
+
+export interface ChessboardController {
+  setMoveNumber(index: number): void;
+}
+
+export class ExtendedChessModel extends ChessModel {
+  constructor(readonly object: Chess.Game) {
+    super();
+  }
+}
+
+//
+// Root
+//
+
+type RootProps = PropsWithChildren<{
+  game: Chess.Game;
+}>;
+
+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(() => {
+    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)) {
+        return false;
+      }
+
+      void click.play();
+      game.pgn = model.pgn;
+      return true;
+    },
+    [model],
+  );
+
+  return (
+    <Gameboard.Root model={model} onDrop={handleDrop}>
+      {children}
+    </Gameboard.Root>
+  );
+});
+
+//
+// Content
+//
+
+type Role = 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
+
+type ContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
+
+const Content = ({ classNames, children, role }: ContentProps) => {
+  return (
+    <Gameboard.Content
+      classNames={mx(classNames, role === 'card--popover' && 'size-container popover-square')}
+      grow={!role || role === 'card--extrinsic'}
+      contain={!role || role === 'card--extrinsic' || role === 'card--popover'}
+    >
+      {children}
+    </Gameboard.Content>
+  );
+};
+
+//
+// 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: Root,
+  Content: Content,
+  Board: Board,
+  Info: Info,
+};
+
+export type {
+  RootProps as ChessboardRootProps,
+  ContentProps as ChessboardContentProps,
+  BoardProps as ChessboardBoardProps,
+  InfoProps as ChessboardInfoProps,
+};