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

package/package.json

@@ -1,87 +1,147 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.9.0",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#blueprints": {
+      "source": "./src/blueprints/index.ts",
+      "types": "./dist/types/src/blueprints/index.d.ts",
+      "default": "./dist/lib/neutral/blueprints/index.mjs"
+    },
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "default": "./dist/lib/neutral/operations/index.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "workerd": "./src/ChessPlugin.workerd.ts",
+        "node": "./src/ChessPlugin.node.ts",
+        "default": "./src/ChessPlugin.tsx"
+      },
+      "types": "./dist/types/src/ChessPlugin.d.ts",
+      "workerd": "./dist/lib/neutral/ChessPlugin.workerd.mjs",
+      "node": "./dist/lib/neutral/ChessPlugin.node.mjs",
+      "default": "./dist/lib/neutral/ChessPlugin.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
   "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"
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./blueprints": {
+      "source": "./src/blueprints/index.ts",
+      "types": "./dist/types/src/blueprints/index.d.ts",
+      "default": "./dist/lib/neutral/blueprints/index.mjs"
+    },
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./testing": {
+      "source": "./src/testing.ts",
+      "types": "./dist/types/src/testing.d.ts",
+      "default": "./dist/lib/neutral/testing.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.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"
+      "default": "./dist/lib/neutral/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@effect-atom/atom-react": "^0.5.0",
     "chess.js": "^1.0.0",
-    "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"
+    "effect": "3.21.3",
+    "@dxos/async": "0.9.0",
+    "@dxos/app-framework": "0.9.0",
+    "@dxos/compute": "0.9.0",
+    "@dxos/app-toolkit": "0.9.0",
+    "@dxos/echo-react": "0.9.0",
+    "@dxos/echo": "0.9.0",
+    "@dxos/keys": "0.9.0",
+    "@dxos/log": "0.9.0",
+    "@dxos/invariant": "0.9.0",
+    "@dxos/plugin-client": "0.9.0",
+    "@dxos/plugin-game": "0.9.0",
+    "@dxos/react-ui-audio": "0.9.0",
+    "@dxos/react-client": "0.9.0",
+    "@dxos/react-ui-gameboard": "0.9.0",
+    "@dxos/util": "0.9.0",
+    "@dxos/react-ui-mosaic": "0.9.0"
   },
   "devDependencies": {
-    "@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"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.16",
+    "@dxos/plugin-testing": "0.9.0",
+    "@dxos/plugin-theme": "0.9.0",
+    "@dxos/storybook-utils": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/react-ui": "0.9.0"
   },
   "peerDependencies": {
-    "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"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/ui-theme": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.node.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { BlueprintDefinition, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+import { Chess } from '#types';
+
+/**
+ * Headless variant of ChessPlugin (no React surfaces / GameVariant).
+ * Used in node contexts (CLI, agents) where rendering is unavailable.
+ */
+export const ChessPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addSchemaModule({ schema: [Chess.State] }),
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  Plugin.make,
+);
+
+export default ChessPlugin;

package/src/ChessPlugin.test.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ActivationEvents } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { GamePlugin } from '@dxos/plugin-game/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { ChessPlugin } from '#plugin';
+
+import { meta } from './meta';
+import { ChessOperation } from './types';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('ChessPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), GamePlugin(), ChessPlugin()],
+    });
+
+    // Modules expected to be active after a normal startup (headless/node variant).
+    expect(harness.manager.getActive()).toEqual(expect.arrayContaining([moduleId('schema')]));
+
+    // SetupArtifactDefinition is fired by AssistantPlugin, which can't be included here due to a workspace cycle.
+    await harness.fire(AppActivationEvents.SetupArtifactDefinition);
+    expect(harness.manager.getActive()).toContain(moduleId('BlueprintDefinition'));
+
+    // Operation handlers are not loaded on startup — SetupProcessManager fires lazily when an operation is invoked.
+    await harness.fire(ActivationEvents.SetupProcessManager);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+
+  test('invokes the Print operation via the invoker capability', async ({ expect }) => {
+    await using harness = await createComposerTestApp({ plugins: [GamePlugin(), ChessPlugin()] });
+    const result = await harness.invoke(ChessOperation.Print, {});
+    // Empty input returns empty ASCII (handler swallows errors for malformed FEN).
+    expect(typeof result.ascii).toBe('string');
+  });
+
+  test('Print renders a PGN to ASCII board', async ({ expect }) => {
+    await using harness = await createComposerTestApp({ plugins: [GamePlugin(), ChessPlugin()] });
+    const { ascii } = await harness.invoke(ChessOperation.Print, { pgn: '1. e4 e5' });
+    expect(ascii).toContain('a  b  c  d  e  f  g  h');
+  });
+});

package/src/ChessPlugin.tsx

@@ -2,60 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-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 { Plugin } from '@dxos/app-framework';
+import { AppPlugin, AppActivationEvents } from '@dxos/app-toolkit';
 
-import { BlueprintDefinition, CHESS_BLUEPRINT_KEY, IntentResolver, ReactSurface } from './capabilities';
-import { meta } from './meta';
-import { translations } from './translations';
-import { Chess, ChessAction } from './types';
+import { BlueprintDefinition, GameVariant, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { Chess } 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',
-          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/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
-  }),
-  defineModule({
-    id: `${meta.id}/module/intent-resolver`,
-    activatesOn: Events.SetupIntentResolver,
-    activate: IntentResolver,
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
+
+export const ChessPlugin = Plugin.define(meta).pipe(
+  Plugin.addModule({
+    id: 'game-variant',
+    activatesOn: AppActivationEvents.SetupSchema,
+    activate: GameVariant,
   }),
-  defineModule({
-    id: `${meta.id}/module/blueprint`,
-    activatesOn: Events.SetupArtifactDefinition,
-    activate: BlueprintDefinition,
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
-]);
+  AppPlugin.addSchemaModule({ schema: [Chess.State] }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);
+
+export default ChessPlugin;

package/src/ChessPlugin.workerd.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+import { Chess } from '#types';
+
+export const ChessPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({ schema: [Chess.State] }),
+  Plugin.make,
+);
+
+export default ChessPlugin;

package/src/blueprints/chess-blueprint.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Blueprint, Template } from '@dxos/compute';
+import { trim } from '@dxos/util';
+
+import { Chess, ChessOperation } from '#types';
+
+const operations = [ChessOperation.Move, ChessOperation.Play, ChessOperation.Print];
+
+const make = () =>
+  Blueprint.make({
+    key: Chess.BLUEPRINT_KEY,
+    name: 'Chess',
+    tools: Blueprint.toolDefinitions({ operations }),
+    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.
+      `,
+    }),
+  });
+
+const blueprint: Blueprint.Definition = {
+  key: Chess.BLUEPRINT_KEY,
+  make,
+};
+
+export default blueprint;

package/src/blueprints/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { default as ChessBlueprint } from './chess-blueprint';

package/src/capabilities/blueprint-definition.ts

@@ -2,35 +2,18 @@
 // 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 * as Effect from 'effect/Effect';
 
-import { create, move, play } from '../functions';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 
-const functions: FunctionDefinition[] = [create, move, play];
+import { ChessBlueprint } from '#blueprints';
 
-export const CHESS_BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
+// NOTE: Explicit annotation required: d.ts emit cannot portably name the inferred @dxos/compute types (TS2883).
+const blueprintDefinition: () => Effect.Effect<
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[],
+  never,
+  Capability.Service
+> = () => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, ChessBlueprint)]);
 
-export default () => {
-  return [
-    contributes(Capabilities.Functions, functions),
-    contributes(
-      Capabilities.BlueprintDefinition,
-      Blueprint.make({
-        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.
-          `,
-        }),
-      }),
-    ),
-  ];
-};
+export default blueprintDefinition;

package/src/capabilities/game-variant.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
+import { GameCapabilities, type GameVariant } from '@dxos/plugin-game/types';
+
+import { ChessArticle, ChessCard } from '#containers';
+import { Chess } from '#types';
+
+const CreateChessInput = Schema.Struct({
+  name: Schema.optional(
+    Schema.String.annotations({
+      title: 'Name',
+      description: 'Optional name for the game.',
+    }),
+  ),
+  pgn: Schema.optional(
+    Schema.String.annotations({
+      title: 'PGN',
+      description: 'Optional Portable Game Notation to start from.',
+    }),
+  ),
+});
+
+const variant: GameVariant = {
+  id: Type.getTypename(Chess.State),
+  label: 'Chess',
+  icon: 'ph--shield-chevron--regular',
+  variantType: Chess.State,
+  inputSchema: CreateChessInput,
+  roles: ['white', 'black'] as const,
+  createVariant: (input) =>
+    Effect.sync(() => Chess.make({ pgn: typeof input.pgn === 'string' ? input.pgn : undefined })),
+  card: ChessCard,
+  article: ChessArticle,
+};
+
+export default Capability.makeModule(() =>
+  Effect.succeed(Capability.contributes(GameCapabilities.VariantProvider, variant)),
+);

package/src/capabilities/index.ts

@@ -2,10 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import type { OperationHandlerSet } from '@dxos/compute';
 
-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';
+// The contributed capability type references Blueprint types from @dxos/compute, so the lazy
+// wrapper needs an explicit annotation to keep the inferred type portable (TS2883).
+export const BlueprintDefinition: Capability.LazyCapability<
+  void,
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+> = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const GameVariant = Capability.lazy('GameVariant', () => import('./game-variant'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,14 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { ChessOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, ChessOperationHandlerSet);
+  }),
+);

package/src/components/Chessboard/Chessboard.stories.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { type Player } from '@dxos/react-ui-gameboard';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+import { Chess } from '#types';
+
+import { Chessboard, type ChessboardController, type ChessboardInfoProps } from './Chessboard';
+
+const SAMPLE_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 *';
+
+const PROMOTION_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 Kf8 16. e7+ Kg8 *';
+
+type DefaultStoryProps = {
+  pgn?: string;
+};
+
+const DefaultStory = ({ pgn }: DefaultStoryProps) => {
+  const state = useMemo(() => Chess.make(pgn ? { pgn } : undefined), [pgn]);
+  const [orientation, setOrientation] = useState<Player>('white');
+  const [showInfo, setShowInfo] = useState(true);
+  const controller = useRef<ChessboardController>(null);
+
+  const handleSelect = useCallback<NonNullable<ChessboardInfoProps['onSelect']>>((index) => {
+    controller.current?.setMoveNumber(index);
+  }, []);
+
+  return (
+    <Chessboard.Root state={state} ref={controller}>
+      <div className='flex h-full w-full gap-4 p-4 overflow-hidden'>
+        <Chessboard.Content classNames='grow'>
+          <Chessboard.Board classNames='border rounded-xs' orientation={orientation} />
+        </Chessboard.Content>
+        {showInfo && (
+          <div className='flex flex-col justify-center items-center overflow-hidden'>
+            <Chessboard.Info
+              orientation={orientation}
+              min={8}
+              max={8}
+              onOrientationChange={setOrientation}
+              onClose={() => setShowInfo(false)}
+              onSelect={handleSelect}
+            />
+          </div>
+        )}
+      </div>
+    </Chessboard.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-chess/components/Chessboard',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithPgn: Story = {
+  args: {
+    pgn: SAMPLE_PGN,
+  },
+};
+
+export const Promotion: Story = {
+  args: {
+    pgn: PROMOTION_PGN,
+  },
+};
+
+export const NewGame: Story = {
+  args: {
+    pgn: undefined,
+  },
+};