@dxos/plugin-chess 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.8.4-main.4a85c3132b",
+  "version": "0.8.4-main.4f23b4e393",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,94 +12,126 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "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"
-    },
-    "./blueprints": {
+  "imports": {
+    "#blueprints": {
       "source": "./src/blueprints/index.ts",
       "types": "./dist/types/src/blueprints/index.d.ts",
-      "browser": "./dist/lib/browser/blueprints/index.mjs",
-      "node": "./dist/lib/node-esm/blueprints/index.mjs"
+      "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"
     },
-    "./cli": {
-      "source": "./src/cli/index.ts",
-      "types": "./dist/types/src/cli/index.d.ts",
-      "browser": "./dist/lib/browser/cli/index.mjs",
-      "node": "./dist/lib/node-esm/cli/index.mjs"
+    "#plugin": {
+      "source": {
+        "node": "./src/ChessPlugin.node.ts",
+        "default": "./src/ChessPlugin.tsx"
+      },
+      "types": "./dist/types/src/ChessPlugin.d.ts",
+      "node": "./dist/lib/neutral/ChessPlugin.node.mjs",
+      "default": "./dist/lib/neutral/ChessPlugin.mjs"
     },
-    "./types": {
+    "#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"
+      "default": "./dist/lib/neutral/types/index.mjs"
     }
   },
-  "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
+  "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@automerge/automerge": "3.2.3",
+    "@automerge/automerge": "3.2.6",
     "@effect-atom/atom-react": "^0.5.0",
     "chess.js": "^1.0.0",
-    "effect": "3.19.16",
-    "@dxos/ai": "0.8.4-main.4a85c3132b",
-    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
-    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
-    "@dxos/blueprints": "0.8.4-main.4a85c3132b",
-    "@dxos/async": "0.8.4-main.4a85c3132b",
-    "@dxos/display-name": "0.8.4-main.4a85c3132b",
-    "@dxos/echo": "0.8.4-main.4a85c3132b",
-    "@dxos/echo-db": "0.8.4-main.4a85c3132b",
-    "@dxos/echo-react": "0.8.4-main.4a85c3132b",
-    "@dxos/functions": "0.8.4-main.4a85c3132b",
-    "@dxos/invariant": "0.8.4-main.4a85c3132b",
-    "@dxos/assistant": "0.8.4-main.4a85c3132b",
-    "@dxos/operation": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-markdown": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
-    "@dxos/react-client": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-gameboard": "0.8.4-main.4a85c3132b",
-    "@dxos/schema": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
-    "@dxos/types": "0.8.4-main.4a85c3132b",
-    "@dxos/log": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-sfx": "0.8.4-main.4a85c3132b",
-    "@dxos/util": "0.8.4-main.4a85c3132b"
+    "effect": "3.20.0",
+    "@dxos/ai": "0.8.4-main.4f23b4e393",
+    "@dxos/app-toolkit": "0.8.4-main.4f23b4e393",
+    "@dxos/assistant": "0.8.4-main.4f23b4e393",
+    "@dxos/async": "0.8.4-main.4f23b4e393",
+    "@dxos/compute": "0.8.4-main.4f23b4e393",
+    "@dxos/display-name": "0.8.4-main.4f23b4e393",
+    "@dxos/echo": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-db": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-react": "0.8.4-main.4f23b4e393",
+    "@dxos/invariant": "0.8.4-main.4f23b4e393",
+    "@dxos/log": "0.8.4-main.4f23b4e393",
+    "@dxos/app-framework": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-client": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-game": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-graph": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-markdown": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-space": "0.8.4-main.4f23b4e393",
+    "@dxos/react-client": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-gameboard": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-sfx": "0.8.4-main.4f23b4e393",
+    "@dxos/schema": "0.8.4-main.4f23b4e393",
+    "@dxos/types": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-stack": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-theme": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/plugin-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/storybook-utils": "0.8.4-main.4f23b4e393"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393"
   }
 }

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,49 @@
+//
+// 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 { 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({}), 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 — SetupOperationHandler fires lazily when an operation is invoked.
+    await harness.fire(ActivationEvents.SetupOperationHandler);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+
+  test('invokes the Print operation via the invoker capability', async ({ expect }) => {
+    await using harness = await createComposerTestApp({ plugins: [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: [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,34 +2,25 @@
 // Copyright 2023 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
-
 import { Plugin } from '@dxos/app-framework';
-import { AppPlugin } from '@dxos/app-toolkit';
-import { type CreateObject } from '@dxos/plugin-space/types';
+import { AppPlugin, AppActivationEvents } from '@dxos/app-toolkit';
 
-import { ChessBlueprint } from './blueprints';
-import { BlueprintDefinition, ReactSurface } from './capabilities';
-import { meta } from './meta';
-import { translations } from './translations';
-import { Chess } from './types';
+import { BlueprintDefinition, GameVariant, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { Chess } from '#types';
 
 export const ChessPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
-  AppPlugin.addMetadataModule({
-    metadata: {
-      id: Chess.Game.typename,
-      metadata: {
-        icon: 'ph--shield-chevron--regular',
-        iconHue: 'amber',
-        blueprints: [ChessBlueprint.key],
-        createObject: ((props) => Effect.sync(() => Chess.make(props))) satisfies CreateObject,
-        addToCollectionOnCreate: true,
-      },
-    },
+  Plugin.addModule({
+    id: 'game-variant',
+    activatesOn: AppActivationEvents.SetupSchema,
+    activate: GameVariant,
   }),
-  AppPlugin.addSchemaModule({ schema: [Chess.Game] }),
-  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSchemaModule({ schema: [Chess.State] }),
   AppPlugin.addTranslationsModule({ translations }),
   Plugin.make,
 );
+
+export default ChessPlugin;

package/src/blueprints/chess-blueprint.ts

@@ -2,21 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
-import { ChessFunctions } from './functions';
+import { Chess, ChessOperation } from '#types';
 
-const BLUEPRINT_KEY = 'dxos.org/blueprint/chess';
-
-const functions = Object.values(ChessFunctions);
+const operations = [ChessOperation.Move, ChessOperation.Play, ChessOperation.Print];
 
 const make = () =>
   Blueprint.make({
-    key: BLUEPRINT_KEY,
+    key: Chess.BLUEPRINT_KEY,
     name: 'Chess',
-    tools: Blueprint.toolDefinitions({ functions }),
+    tools: Blueprint.toolDefinitions({ operations }),
     instructions: Template.make({
       source: trim`
         You are an expert chess player.
@@ -27,9 +24,8 @@ const make = () =>
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
-  key: BLUEPRINT_KEY,
-  functions,
+const blueprint: Blueprint.Definition = {
+  key: Chess.BLUEPRINT_KEY,
   make,
 };
 

package/src/blueprints/index.ts

@@ -3,4 +3,3 @@
 //
 
 export { default as ChessBlueprint } from './chess-blueprint';
-export * as ChessFunctions from './functions';

package/src/capabilities/{blueprint-definition/blueprint-definition.ts → blueprint-definition.ts}

@@ -6,8 +6,10 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
-import { ChessBlueprint } from '../../blueprints';
+import { ChessBlueprint } from '#blueprints';
 
 const blueprintDefinition = Capability.makeModule<
   [],

package/src/capabilities/game-variant.ts

@@ -0,0 +1,42 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { GameCapabilities, type GameVariant } from '@dxos/plugin-game';
+
+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: Chess.State.typename,
+  label: 'Chess',
+  icon: 'ph--shield-chevron--regular',
+  variantSchema: 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.Variant, variant)));

package/src/capabilities/index.ts

@@ -2,5 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './blueprint-definition';
-export * from './react-surface';
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const 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,
+  },
+};

package/src/components/Chessboard/Chessboard.tsx

@@ -27,9 +27,8 @@ import {
   useGameboardContext,
 } from '@dxos/react-ui-gameboard';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
-import { mx } from '@dxos/ui-theme';
 
-import { type Chess } from '../../types';
+import { type Chess } from '#types';
 
 import { Info, type InfoProps } from './Info';
 import { ExtendedChessModel } from './types';
@@ -43,14 +42,14 @@ export interface ChessboardController {
 //
 
 type RootProps = PropsWithChildren<{
-  game: Chess.Game;
+  state: Chess.State;
 }>;
 
-const Root = forwardRef<ChessboardController, RootProps>(({ game, children }, forwardedRef) => {
+const Root = forwardRef<ChessboardController, RootProps>(({ state, children }, forwardedRef) => {
   const registry = useContext(RegistryContext);
-  const model = useMemo(() => new ExtendedChessModel(registry, game), [registry]);
+  const model = useMemo(() => new ExtendedChessModel(registry, state), [registry]);
   const click = useSoundEffect('Click');
-  const [pgn, updatePgn] = useObject(game, 'pgn');
+  const [pgn, updatePgn] = useObject(state, 'pgn');
 
   // Controller.
   useImperativeHandle(forwardedRef, () => {
@@ -104,14 +103,9 @@ type Role = 'card--content';
 
 type ContentProps = ThemedClassName<PropsWithChildren<{ role?: Role }>>;
 
-const Content = ({ classNames, children, role }: ContentProps) => {
+const Content = ({ classNames, children }: ContentProps) => {
   return (
-    <Gameboard.Content
-      classNames={mx(
-        classNames,
-        role === 'card--content' ? 'dx-size-container dx-card-square' : 'flex flex-col justify-center',
-      )}
-    >
+    <Gameboard.Content grow contain classNames={classNames}>
       {children}
     </Gameboard.Content>
   );