@dxos/plugin-chess 0.7.4 → 0.7.5-labs.5f04cf6

package/dist/types/src/types/schema.d.ts

@@ -8,20 +8,24 @@ export declare const MoveSchema: S.mutable<S.SchemaClass<{
     readonly target?: string | undefined;
     readonly piece?: string | undefined;
 }, never>>;
-declare const GameType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    playerWhite?: string | undefined;
-    playerBlack?: string | undefined;
-    moves?: string[] | undefined;
-    pgn?: string | undefined;
-} & {
-    id: string;
-}, S.Struct.Encoded<{
+declare const ChessType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectFields<{
+    name: S.optional<typeof S.String>;
     playerWhite: typeof S.String;
     playerBlack: typeof S.String;
     moves: S.mutable<S.Array$<typeof S.String>>;
     pgn: typeof S.String;
+    fen: typeof S.String;
+}, {
+    partial: true;
+}>, S.Struct.Encoded<{
+    name: S.optional<typeof S.String>;
+    playerWhite: typeof S.String;
+    playerBlack: typeof S.String;
+    moves: S.mutable<S.Array$<typeof S.String>>;
+    pgn: typeof S.String;
+    fen: typeof S.String;
 }>>;
-export declare class GameType extends GameType_base {
+export declare class ChessType extends ChessType_base {
 }
 export {};
 //# sourceMappingURL=schema.d.ts.map

package/dist/types/src/types/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;;;UAQtB,CAAC;;;;;;;;;;;;;;AAEF,qBAAa,QAAS,SAAQ,aAQ7B;CAAG"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,UAAU;;;;;;;;UAQtB,CAAC;;;;;;;;;;;;;;;;;;AAEF,qBAAa,SAAU,SAAQ,cAW9B;CAAG"}

package/dist/types/src/types/types.d.ts

@@ -1,10 +1,20 @@
-import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-space';
-import { GameType } from './schema';
-export declare enum ChessAction {
-    CREATE = "dxos.org/plugin/chess/action/create"
+import { S } from '@dxos/echo-schema';
+import { ChessType } from './schema';
+export declare namespace ChessAction {
+    const Create_base: S.TaggedClass<Create, "dxos.org/plugin/chess/action/create", {
+        readonly _tag: S.tag<"dxos.org/plugin/chess/action/create">;
+    } & {
+        input: S.Struct<{
+            name: S.optional<typeof S.String>;
+            fen: S.optional<typeof S.String>;
+        }>;
+        output: S.Struct<{
+            object: typeof ChessType;
+        }>;
+    }>;
+    export class Create extends Create_base {
+    }
+    export {};
 }
-export type ChessProvides = {};
-export type ChessPluginProvides = SurfaceProvides & IntentResolverProvides & GraphBuilderProvides & MetadataRecordsProvides & TranslationsProvides & SchemaProvides;
-export declare const isObject: (object: unknown) => object is GameType;
+export declare const isObject: (object: unknown) => object is typeof ChessType;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAKpC,oBAAY,WAAW;IACrB,MAAM,wCAA2B;CAClC;AAED,MAAM,MAAM,aAAa,GAAG,EAAE,CAAC;AAE/B,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,CAAC;AAEjB,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,QAEpD,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,yBAAiB,WAAW,CAAC;;;;;;;;;;;;IAG3B,MAAM,OAAO,MAAO,SAAQ,WAQ1B;KAAG;;CACN;AAED,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,OAAO,SAE3D,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.5f04cf6",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,11 +13,6 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -27,9 +22,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -42,37 +34,43 @@
   "dependencies": {
     "@effect/schema": "^0.75.5",
     "@preact/signals-core": "^1.6.0",
-    "chess.js": "^1.0.0-beta.8",
-    "react-chessboard": "^4.7.1",
+    "chess.js": "^1.0.0",
+    "react-chessboard": "^4.7.2",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.4",
-    "@dxos/async": "0.7.4",
-    "@dxos/invariant": "0.7.4",
-    "@dxos/display-name": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/plugin-client": "0.7.4",
-    "@dxos/plugin-graph": "0.7.4",
-    "@dxos/live-object": "0.7.4",
-    "@dxos/react-client": "0.7.4",
-    "@dxos/plugin-space": "0.7.4"
+    "@dxos/app-framework": "0.7.5-labs.5f04cf6",
+    "@dxos/artifact": "0.7.5-labs.5f04cf6",
+    "@dxos/assistant": "0.7.5-labs.5f04cf6",
+    "@dxos/echo-schema": "0.7.5-labs.5f04cf6",
+    "@dxos/display-name": "0.7.5-labs.5f04cf6",
+    "@dxos/async": "0.7.5-labs.5f04cf6",
+    "@dxos/invariant": "0.7.5-labs.5f04cf6",
+    "@dxos/live-object": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-client": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-graph": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-space": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-stack": "0.7.5-labs.5f04cf6",
+    "@dxos/react-client": "0.7.5-labs.5f04cf6"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
+    "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4"
+    "@dxos/react-ui-theme": "0.7.5-labs.5f04cf6",
+    "@dxos/storybook-utils": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui": "0.7.5-labs.5f04cf6"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.12.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-theme": "0.7.5-labs.5f04cf6"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -2,98 +2,60 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  defineModule,
+  definePlugin,
+  Events,
+  oneOf,
+} from '@dxos/app-framework';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { NavigationAction, parseIntentPlugin, type PluginDefinition, resolvePlugin } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
-import { SpaceAction } from '@dxos/plugin-space';
-
-import ChessContainer from './components/ChessContainer';
-import meta, { CHESS_PLUGIN } from './meta';
+import { Artifact, IntentResolver, ReactSurface } from './capabilities';
+import { CHESS_PLUGIN, meta } from './meta';
 import translations from './translations';
-import { ChessAction, type ChessPluginProvides, GameType, isObject } from './types';
+import { ChessAction, ChessType } from './types';
 
-export const ChessPlugin = (): PluginDefinition<ChessPluginProvides> => {
-  return {
-    meta,
-    provides: {
-      metadata: {
-        records: {
-          [GameType.typename]: {
-            createObject: ChessAction.CREATE,
+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: oneOf(Events.Startup, Events.SetupAppGraph),
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: ChessType.typename,
+          metadata: {
+            createObject: (props: { name?: string }) => createIntent(ChessAction.Create, props),
             placeholder: ['game title placeholder', { ns: CHESS_PLUGIN }],
             icon: 'ph--shield-chevron--regular',
           },
-        },
-      },
-      echo: {
-        schema: [GameType],
-      },
-      graph: {
-        builder: (plugins) => {
-          const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-          if (!client || !dispatch) {
-            return [];
-          }
-
-          return createExtension({
-            id: ChessAction.CREATE,
-            filter: (node): node is ActionGroup => isActionGroup(node) && node.id.startsWith(SpaceAction.ADD_OBJECT),
-            actions: ({ node }) => {
-              const id = node.id.split('/').at(-1);
-              const [spaceId, objectId] = id?.split(':') ?? [];
-              const space = client.spaces.get().find((space) => space.id === spaceId);
-              const object = objectId && space?.db.getObjectById(objectId);
-              const target = objectId ? object : space;
-              if (!target) {
-                return;
-              }
-
-              return [
-                {
-                  id: `${CHESS_PLUGIN}/create/${node.id}`,
-                  data: async () => {
-                    await dispatch([
-                      { plugin: CHESS_PLUGIN, action: ChessAction.CREATE },
-                      { action: SpaceAction.ADD_OBJECT, data: { target } },
-                      { action: NavigationAction.OPEN },
-                    ]);
-                  },
-                  properties: {
-                    label: ['create game label', { ns: CHESS_PLUGIN }],
-                    icon: 'ph--shield-chevron--regular',
-                    testId: 'chessPlugin.createObject',
-                  },
-                },
-              ];
-            },
-          });
-        },
-      },
-      translations,
-      surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case 'article':
-            case 'section':
-              return isObject(data.object) ? <ChessContainer game={data.object} role={role} /> : null;
-            default:
-              return null;
-          }
-        },
-      },
-      intent: {
-        resolver: (intent) => {
-          switch (intent.action) {
-            case ChessAction.CREATE: {
-              return { data: create(GameType, {}) };
-            }
-          }
-        },
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupClient,
+      activate: () => contributes(ClientCapabilities.Schema, [ChessType]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.Startup,
+      activate: IntentResolver,
+    }),
+    defineModule({
+      id: `${meta.id}/module/artifact`,
+      activatesOn: Events.Startup,
+      activate: Artifact,
+    }),
+  ]);

package/src/capabilities/artifact.ts

@@ -0,0 +1,109 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+import { pipe } from 'effect';
+
+import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
+import { createArtifactElement } from '@dxos/assistant';
+import { isInstanceOf, ObjectId, S } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { Filter, type Space } from '@dxos/react-client/echo';
+
+import { ChessAction, ChessType } from '../types';
+
+// TODO(burdon): Factor out.
+declare global {
+  interface ToolContextExtensions {
+    space?: Space;
+    dispatch?: PromiseIntentDispatcher;
+  }
+}
+
+export default () => {
+  const definition = defineArtifact({
+    id: 'plugin-chess',
+    instructions: `
+  Chess:
+  - 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.
+  `,
+    schema: ChessType,
+    tools: [
+      defineTool({
+        name: 'chess_new',
+        description: 'Create a new chess game. Returns the artifact definition for the game',
+        schema: S.Struct({
+          fen: S.String.annotations({ description: 'The state of the chess game in the FEN format.' }),
+        }),
+        execute: async ({ fen }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          invariant(extensions?.dispatch, 'No intent dispatcher');
+          const intent = pipe(
+            createIntent(ChessAction.Create, { fen }),
+            chain(SpaceAction.AddObject, { target: extensions.space }),
+          );
+          const { data, error } = await extensions.dispatch(intent);
+          if (!data || error) {
+            return ToolResult.Error(error?.message ?? 'Failed to create chess game');
+          }
+
+          return ToolResult.Success(createArtifactElement(data.id));
+        },
+      }),
+      defineTool({
+        name: 'chess_query',
+        description: 'Query all active chess games.',
+        schema: S.Struct({}),
+        execute: async (_, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          const { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          invariant(games.length > 0, 'No chess games found');
+          return ToolResult.Success(games);
+        },
+      }),
+      defineTool({
+        name: 'chess_inspect',
+        description: 'Get the current state of the chess game.',
+        schema: S.Struct({ id: ObjectId }),
+        execute: async ({ id }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          const { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          const game = games.find((game) => game.id === id);
+          invariant(isInstanceOf(ChessType, game));
+          return ToolResult.Success(game.fen);
+        },
+      }),
+      defineTool({
+        name: 'chess_move',
+        description: 'Make a move in the chess game.',
+        schema: S.Struct({
+          id: ObjectId,
+          move: S.String.annotations({
+            description: 'The move to make in the chess game.',
+            examples: ['e4', 'Bf3'],
+          }),
+        }),
+        execute: async ({ id, move }, { extensions }) => {
+          invariant(extensions?.space, 'No space');
+          const { objects: games } = await extensions.space.db.query(Filter.schema(ChessType)).run();
+          const game = games.find((game) => game.id === id);
+          invariant(isInstanceOf(ChessType, game));
+          const board = new Chess(game.fen);
+          try {
+            board.move(move);
+          } catch (error: any) {
+            return ToolResult.Error(error.message);
+          }
+          game.pgn = board.pgn();
+          game.fen = board.fen();
+          return ToolResult.Success(game.fen);
+        },
+      }),
+    ],
+  });
+
+  return contributes(Capabilities.ArtifactDefinition, definition);
+};

package/src/capabilities/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const Artifact = lazy(() => import('./artifact'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+
+import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
+import { create } from '@dxos/live-object';
+
+import { ChessAction, ChessType } from '../types';
+
+export default () =>
+  contributes(
+    Capabilities.IntentResolver,
+    createResolver(ChessAction.Create, ({ name, fen }) => {
+      const pgn = fen ? new Chess(fen).pgn() : undefined;
+
+      return {
+        data: {
+          object: create(ChessType, { name, fen, pgn }),
+        },
+      };
+    }),
+  );

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess } from 'chess.js';
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
+
+import { Chessboard, ChessContainer } from '../components';
+import { CHESS_PLUGIN } from '../meta';
+import { ChessType, isObject } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: CHESS_PLUGIN,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: ChessType } => isObject(data.subject),
+      component: ({ data, role }) => <ChessContainer game={data.subject} role={role} />,
+    }),
+    createSurface({
+      id: 'plugin-chess',
+      role: 'canvas-node',
+      filter: (data): data is any => isInstanceOf(ChessType, data),
+      component: ({ data }) => (
+        <Chessboard
+          model={{ chess: new Chess(data.fen) }}
+          onUpdate={(move) => {
+            const board = new Chess(data.fen);
+            board.move(move);
+            data.value = board.fen();
+          }}
+        />
+      ),
+    }),
+  ]);

package/src/components/Chess.tsx

@@ -13,14 +13,14 @@ import { Input, Select, useThemeContext } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
 import { Chessboard, type ChessModel, type ChessMove } from './Chessboard';
-import { type GameType } from '../types';
+import { type ChessType } from '../types';
 
-const useChessModel = (game: GameType) => {
+const useChessModel = (game: ChessType) => {
   const [model, setModel] = useState<ChessModel>();
 
   useEffect(() => {
     if (!model || game.pgn !== model?.chess.pgn()) {
-      const chess = new ChessJs();
+      const chess = new ChessJs(game.pgn ? undefined : game.fen);
       if (game.pgn) {
         chess.loadPgn(game.pgn);
       }
@@ -32,7 +32,8 @@ const useChessModel = (game: GameType) => {
   const handleUpdate = (move: ChessMove) => {
     invariant(model);
     if (model.chess.move(move)) {
-      game!.pgn = model.chess.pgn();
+      game.pgn = model.chess.pgn();
+      game.fen = model.chess.fen();
       setModel({ ...model });
     }
   };
@@ -40,7 +41,7 @@ const useChessModel = (game: GameType) => {
   return { model, handleUpdate };
 };
 
-export const Chess = ({ space, game, playerSelector }: { space: Space; game: GameType; playerSelector?: boolean }) => {
+export const Chess = ({ space, game, playerSelector }: { space: Space; game: ChessType; playerSelector?: boolean }) => {
   const { model, handleUpdate } = useChessModel(game);
   if (!model) {
     return null;
@@ -59,7 +60,7 @@ export const Chess = ({ space, game, playerSelector }: { space: Space; game: Gam
   );
 };
 
-const PlayerSelector = ({ game, space }: { game: GameType; space: Space }) => {
+const PlayerSelector = ({ game, space }: { game: ChessType; space: Space }) => {
   const members = useMembers(space.key);
 
   return (

package/src/components/ChessContainer.tsx

@@ -5,6 +5,7 @@
 import React, { type ComponentProps } from 'react';
 
 import { getSpace } from '@dxos/react-client/echo';
+import { StackItem } from '@dxos/react-ui-stack';
 
 import { Chess } from './Chess';
 
@@ -15,9 +16,9 @@ const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game
   }
 
   return (
-    <div role='none' className='flex flex-col row-span-2 is-full overflow-hidden'>
+    <StackItem.Content toolbar={false}>
       <Chess game={game} space={space} playerSelector={role === 'article'} />
-    </div>
+    </StackItem.Content>
   );
 };
 

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

@@ -7,11 +7,12 @@ import '@dxos-theme';
 import { Chess } from 'chess.js';
 import React, { useState } from 'react';
 
+import { mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Chessboard, type ChessModel, type ChessMove, ChessPanel } from './Chessboard';
 
-const Story = () => {
+const Story = ({ size, panel = false }: { size?: 'large' | 'small'; panel: boolean }) => {
   const [model, setModel] = useState<ChessModel>({ chess: new Chess() });
   const handleUpdate = (move: ChessMove) => {
     if (model.chess.move(move)) {
@@ -21,12 +22,14 @@ const Story = () => {
 
   return (
     <div className='flex flex-row'>
-      <div className='w-[600px]'>
-        <Chessboard model={model} boardStyle='default' onUpdate={handleUpdate} />
-      </div>
-      <div className='w-[160px] ml-8'>
-        <ChessPanel model={model} />
+      <div className={mx(size === 'small' ? 'w-[320px]' : 'w-[640px]')}>
+        <Chessboard model={model} onUpdate={handleUpdate} />
       </div>
+      {panel && (
+        <div className='w-[160px] ml-8'>
+          <ChessPanel model={model} />
+        </div>
+      )}
     </div>
   );
 };
@@ -38,6 +41,16 @@ export default {
   decorators: [withTheme],
 };
 
-export const Default = {
-  component: Chessboard,
+export const Default = {};
+
+export const Panel = {
+  args: {
+    panel: true,
+  },
+};
+
+export const Micro = {
+  args: {
+    size: 'small',
+  },
 };