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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.fd6878d",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "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"
@@ -36,24 +38,26 @@
     "@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.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"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -61,16 +65,16 @@
     "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"
+    "@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"
   },
   "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.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "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 { 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,7 +24,7 @@ export const ChessPlugin = () =>
       activatesOn: Events.SetupMetadata,
       activate: () =>
         contributes(Capabilities.Metadata, {
-          id: ChessType.typename,
+          id: Chess.Game.typename,
           metadata: {
             icon: 'ph--shield-chevron--regular',
           },
@@ -37,7 +37,7 @@ export const ChessPlugin = () =>
         contributes(
           SpaceCapabilities.ObjectForm,
           defineObjectForm({
-            objectSchema: ChessType,
+            objectSchema: Chess.Game,
             getIntent: () => createIntent(ChessAction.Create),
           }),
         ),
@@ -53,8 +53,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,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ToolId } from '@dxos/ai';
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { trim } from '@dxos/util';
+
+import { move, play } from '../functions';
+
+const functions = [move, play];
+
+export default () => {
+  return [
+    contributes(
+      Capabilities.BlueprintDefinition,
+      Blueprint.make({
+        key: 'dxos.org/blueprint/chess',
+        name: 'Chess',
+        instructions: Template.make({
+          source: trim`
+            You are an expert chess player.
+            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

@@ -4,6 +4,6 @@
 
 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'));

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 } from '../meta';
+import { Chess } from '../types';
+
+import { Chessboard } from './Chessboard';
+
+type DefaultStoryProps = {
+  role: 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
+  game: Chess.Game;
+};
+
+const storybook: Meta<DefaultStoryProps> = {
+  title: 'plugins/plugin-chess/Card',
+  render: ({ role, game }) => (
+    <CardContainer icon={meta.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 storybook;
+
+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>;
+
+export const Popover = {
+  args: {
+    role: 'card--popover',
+    game: game,
+  },
+} satisfies Story;
+
+export const Intrinsic = {
+  args: {
+    role: 'card--intrinsic',
+    game: game,
+  },
+} satisfies Story;
+
+export const Extrinsic = {
+  args: {
+    role: 'card--extrinsic',
+    game: game,
+  },
+} satisfies Story;

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';
+
+import { ChessboardArticle } from './ChessboardArticle';
 
-const meta: Meta<typeof Chessboard> = {
+const meta: Meta<typeof ChessboardArticle> = {
   title: 'plugins/plugin-chess/Chessboard',
-  component: Chessboard,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
+  component: ChessboardArticle,
+  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout({ fullscreen: true })],
+  parameters: {
+    translations,
+  },
 };
 
-type Story = StoryObj<typeof Chessboard>;
+type Story = StoryObj<typeof meta>;
 
 export default meta;
 
-export const Default: Story = {};
+export const Default = {
+  args: {
+    game: Chess.makeGame(),
+  },
+} satisfies Story;
+
+export const EndGame = {
+  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 = {
+  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

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemedClassName } from '@dxos/react-ui';
+import {
+  ChessModel,
+  Gameboard,
+  type GameboardRootProps,
+  Chessboard as NativeChessboard,
+  type ChessboardProps as NativeChessboardProps,
+} from '@dxos/react-ui-gameboard';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Chess } from '../types';
+
+import { ChessboardInfo, type ChessboardInfoProps } from './ChessboardInfo';
+import { ChessboardPlayers, type ChessboardPlayersProps } from './ChessboardPlayers';
+
+export class ExtendedChessModel extends ChessModel {
+  constructor(readonly object: Chess.Game) {
+    super();
+  }
+}
+
+//
+// Root
+//
+
+type ChessboardRootProps = PropsWithChildren<{
+  game: Chess.Game;
+}>;
+
+const ChessboardRoot = ({ game, children }: ChessboardRootProps) => {
+  const model = useMemo(() => new ExtendedChessModel(game), []);
+  useEffect(() => {
+    model.update(game.pgn);
+    log('update', { pgn: game.pgn });
+  }, [game.pgn]);
+
+  const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
+    (move) => {
+      if (model.makeMove(move)) {
+        game.pgn = model.pgn;
+        return true;
+      }
+
+      return false;
+    },
+    [model],
+  );
+
+  return (
+    <Gameboard.Root model={model} onDrop={handleDrop}>
+      {children}
+    </Gameboard.Root>
+  );
+};
+
+//
+// Content
+//
+
+type Role = 'card--popover' | 'card--intrinsic' | 'card--extrinsic';
+
+type ChessboardContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
+
+const ChessboardContent = ({ classNames, children, role }: ChessboardContentProps) => {
+  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>
+  );
+};
+
+//
+// Chessboard
+//
+
+export const Chessboard = {
+  Root: ChessboardRoot,
+  Content: ChessboardContent,
+  Board: NativeChessboard,
+  Info: ChessboardInfo,
+  Players: ChessboardPlayers,
+};
+
+export type {
+  ChessboardRootProps,
+  ChessboardContentProps,
+  NativeChessboardProps as ChessboardBoardProps,
+  ChessboardInfoProps,
+  ChessboardPlayersProps,
+};

package/src/components/ChessboardArticle.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { IconButton, 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';
+
+import { meta } from '../meta';
+import { type Chess } from '../types';
+
+import { Chessboard } from './Chessboard';
+
+export const ChessboardArticle = ({ game }: { game: Chess.Game }) => {
+  const { t } = useTranslation(meta.id);
+  const [orientation, setOrientation] = useState<Player>('white');
+  const [open, setOpen] = useState(true);
+
+  return (
+    <StackItem.Content classNames='@container bs-full is-full overflow-hidden'>
+      <Chessboard.Root game={game}>
+        <div className={mx('grid grid-rows-[1fr_4rem] bs-full is-full gap-2', open && '@3xl:grid-cols-[1fr_320px]')}>
+          <Chessboard.Content>
+            <Chessboard.Board orientation={orientation} />
+          </Chessboard.Content>
+          {open && (
+            <div className='hidden @3xl:flex flex-col p-8 justify-center items-center overflow-hidden'>
+              <Chessboard.Info
+                orientation={orientation}
+                min={8}
+                max={8}
+                onOrientationChange={setOrientation}
+                onClose={() => setOpen(false)}
+              />
+            </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>
+  );
+};