@dxos/plugin-chess 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

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

@@ -1,7 +1,6 @@
-import React from 'react';
-import { type ChessType } from '../types';
-declare const ChessContainer: ({ game }: {
-    game: ChessType;
+import React, { type ComponentProps } from 'react';
+import { Chess } from './Chess';
+declare const ChessContainer: ({ game, role }: Pick<ComponentProps<typeof Chess>, "game"> & {
     role?: string;
 }) => React.JSX.Element | null;
 export default ChessContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"ChessContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ChessContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,cAAc,aAAc;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,6BAmBnE,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ChessContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/ChessContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,cAAc,mBAAoB,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,6BAWrG,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,37 @@
+import { Chess, type Color } from 'chess.js';
+import React, { type FC } from 'react';
+export declare enum ChessPieces {
+    STANDARD = 0,
+    CUSTOM = 1,
+    FUTURE = 2,
+    RIOHACHA = 3
+}
+export type BoardStyle = 'default' | 'blue' | 'dark';
+export declare const boardStyles: Record<BoardStyle, any>;
+export type ChessModel = {
+    chess: Chess;
+};
+export type ChessMove = {
+    from: string;
+    to: string;
+    promotion?: string;
+};
+export type ChessboardProps = {
+    model: ChessModel;
+    orientation?: Color;
+    readonly?: boolean;
+    boardStyle?: BoardStyle;
+    pieces?: ChessPieces;
+    onUpdate?: (move: ChessMove) => void;
+};
+/**
+ * https://www.npmjs.com/package/chess.js
+ * https://www.npmjs.com/package/react-chessboard
+ */
+export declare const Chessboard: ({ model: { chess }, orientation, readonly, boardStyle, pieces, onUpdate, }: ChessboardProps) => React.JSX.Element;
+export declare const ChessPanel: FC<{
+    model: ChessModel;
+    orientation?: Color;
+    onFlip?: () => void;
+}>;
+//# sourceMappingURL=Chessboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chessboard.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chessboard/Chessboard.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQvC,oBAAY,WAAW;IACrB,QAAQ,IAAI;IACZ,MAAM,IAAI;IACV,MAAM,IAAI;IACV,QAAQ,IAAI;CACb;AAcD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,GAAG,CAa/C,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,+EAOpB,eAAe,sBAoCjB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IAC1B,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CA+CA,CAAC"}

package/dist/types/src/components/Chessboard/Chessboard.stories.d.ts

@@ -0,0 +1,13 @@
+import '@dxos-theme';
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: ({ model: { chess }, orientation, readonly, boardStyle, pieces, onUpdate, }: import("./Chessboard").ChessboardProps) => React.JSX.Element;
+    render: () => React.JSX.Element;
+    decorators: import("@storybook/react/*").Decorator[];
+};
+export default _default;
+export declare const Default: {
+    component: ({ model: { chess }, orientation, readonly, boardStyle, pieces, onUpdate, }: import("./Chessboard").ChessboardProps) => React.JSX.Element;
+};
+//# sourceMappingURL=Chessboard.stories.d.ts.map

package/dist/types/src/components/Chessboard/Chessboard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chessboard.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chessboard/Chessboard.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;AA0BxC,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/components/Chessboard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chessboard';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Chessboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Chessboard/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/components/Chessboard/pieces/custom.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+export declare const customPieces: Record<string, ReactNode>;
+//# sourceMappingURL=custom.d.ts.map

package/dist/types/src/components/Chessboard/pieces/custom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chessboard/pieces/custom.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA+D9C,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAclD,CAAC"}

package/dist/types/src/components/Chessboard/pieces/index.d.ts

@@ -0,0 +1,4 @@
+export * from './custom';
+export * from './phosphor';
+export * from './riohacha';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Chessboard/pieces/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chessboard/pieces/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/dist/types/src/components/Chessboard/pieces/phosphor.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+export declare const phosphorPieces: Record<string, ReactNode>;
+//# sourceMappingURL=phosphor.d.ts.map

package/dist/types/src/components/Chessboard/pieces/phosphor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"phosphor.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chessboard/pieces/phosphor.tsx"],"names":[],"mappings":"AAKA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmD9C,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAcpD,CAAC"}

package/dist/types/src/components/Chessboard/pieces/riohacha.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from 'react';
+export declare const riohachaPieces: Record<string, ReactNode>;
+//# sourceMappingURL=riohacha.d.ts.map

package/dist/types/src/components/Chessboard/pieces/riohacha.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"riohacha.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Chessboard/pieces/riohacha.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmJ9C,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAcpD,CAAC"}

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

@@ -1,6 +1,4 @@
-export * from './ChessComponent';
-export declare const ChessContainer: import("react").LazyExoticComponent<({ game }: {
-    game: import("../types").ChessType;
+export declare const ChessContainer: import("react").LazyExoticComponent<({ game, role }: Pick<import("react").ComponentProps<typeof import("./Chess").Chess>, "game"> & {
     role?: string;
 }) => import("react").JSX.Element | null>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,cAAc,kBAAkB,CAAC;AAEjC,eAAO,MAAM,cAAc;;QAC2K,CAAC;yCADnI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc;QACyJ,CAAC;yCADjH,CAAC"}

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

@@ -1,5 +1,3 @@
-export * from './capabilities';
-export * from './components';
-export * from './meta';
 export * from './ChessPlugin';
+export * from './meta';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}

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

@@ -8,13 +8,12 @@ export declare const MoveSchema: S.mutable<S.SchemaClass<{
     readonly target?: string | undefined;
     readonly piece?: string | undefined;
 }, never>>;
-declare const ChessType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("packages/core/echo/echo-schema/dist/types/src/object/common").TypedObjectFields<{
+declare const GameType_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<{
@@ -23,9 +22,8 @@ declare const ChessType_base: import("@dxos/echo-schema").TypedObjectPrototype<i
     playerBlack: typeof S.String;
     moves: S.mutable<S.Array$<typeof S.String>>;
     pgn: typeof S.String;
-    fen: typeof S.String;
 }>>;
-export declare class ChessType extends ChessType_base {
+export declare class GameType extends GameType_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,SAAU,SAAQ,cAW9B;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,QAAS,SAAQ,aAS7B;CAAG"}

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

@@ -1,20 +1,19 @@
 import { S } from '@dxos/echo-schema';
-import { ChessType } from './schema';
+import { GameType } 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;
+            object: typeof GameType;
         }>;
     }>;
     export class Create extends Create_base {
     }
     export {};
 }
-export declare const isObject: (object: unknown) => object is typeof ChessType;
+export declare const isObject: (object: unknown) => object is GameType;
 //# 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,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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,yBAAiB,WAAW,CAAC;;;;;;;;;;;IAG3B,MAAM,OAAO,MAAO,SAAQ,WAO1B;KAAG;;CACN;AAED,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,QAEpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-chess",
-  "version": "0.7.5-labs.e27f9b9",
+  "version": "0.7.5-main.2567c87",
   "description": "Chess for new plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -34,22 +34,20 @@
   "dependencies": {
     "@effect/schema": "^0.75.5",
     "@preact/signals-core": "^1.6.0",
-    "chess.js": "^1.0.0",
-    "effect": "^3.12.3",
-    "@dxos/artifact": "0.7.5-labs.e27f9b9",
-    "@dxos/app-framework": "0.7.5-labs.e27f9b9",
-    "@dxos/assistant": "0.7.5-labs.e27f9b9",
-    "@dxos/echo-schema": "0.7.5-labs.e27f9b9",
-    "@dxos/display-name": "0.7.5-labs.e27f9b9",
-    "@dxos/async": "0.7.5-labs.e27f9b9",
-    "@dxos/invariant": "0.7.5-labs.e27f9b9",
-    "@dxos/live-object": "0.7.5-labs.e27f9b9",
-    "@dxos/plugin-graph": "0.7.5-labs.e27f9b9",
-    "@dxos/plugin-space": "0.7.5-labs.e27f9b9",
-    "@dxos/plugin-client": "0.7.5-labs.e27f9b9",
-    "@dxos/react-client": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-stack": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-gameboard": "0.7.5-labs.e27f9b9"
+    "chess.js": "^1.0.0-beta.8",
+    "react-chessboard": "^4.7.1",
+    "react-resize-detector": "^11.0.1",
+    "@dxos/app-framework": "0.7.5-main.2567c87",
+    "@dxos/display-name": "0.7.5-main.2567c87",
+    "@dxos/async": "0.7.5-main.2567c87",
+    "@dxos/echo-schema": "0.7.5-main.2567c87",
+    "@dxos/invariant": "0.7.5-main.2567c87",
+    "@dxos/live-object": "0.7.5-main.2567c87",
+    "@dxos/plugin-client": "0.7.5-main.2567c87",
+    "@dxos/plugin-graph": "0.7.5-main.2567c87",
+    "@dxos/plugin-space": "0.7.5-main.2567c87",
+    "@dxos/react-ui-stack": "0.7.5-main.2567c87",
+    "@dxos/react-client": "0.7.5-main.2567c87"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -58,16 +56,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9",
-    "@dxos/storybook-utils": "0.7.5-labs.e27f9b9"
+    "@dxos/react-ui": "0.7.5-main.2567c87",
+    "@dxos/react-ui-theme": "0.7.5-main.2567c87",
+    "@dxos/storybook-utils": "0.7.5-main.2567c87"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.e27f9b9",
-    "@dxos/react-ui-theme": "0.7.5-labs.e27f9b9"
+    "@dxos/react-ui": "0.7.5-main.2567c87",
+    "@dxos/react-ui-theme": "0.7.5-main.2567c87"
   },
   "publishConfig": {
     "access": "public"

package/src/ChessPlugin.tsx

@@ -2,13 +2,21 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  defineModule,
+  definePlugin,
+  Events,
+  oneOf,
+} from '@dxos/app-framework';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 
-import { Artifact, IntentResolver, ReactSurface } from './capabilities';
+import { IntentResolver, ReactSurface } from './capabilities';
 import { CHESS_PLUGIN, meta } from './meta';
 import translations from './translations';
-import { ChessAction, ChessType } from './types';
+import { ChessAction, GameType } from './types';
 
 export const ChessPlugin = () =>
   definePlugin(meta, [
@@ -19,10 +27,10 @@ export const ChessPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
       activate: () =>
         contributes(Capabilities.Metadata, {
-          id: ChessType.typename,
+          id: GameType.typename,
           metadata: {
             createObject: (props: { name?: string }) => createIntent(ChessAction.Create, props),
             placeholder: ['game title placeholder', { ns: CHESS_PLUGIN }],
@@ -32,22 +40,17 @@ export const ChessPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/schema`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () => contributes(ClientCapabilities.Schema, [ChessType]),
+      activatesOn: ClientEvents.SetupClient,
+      activate: () => contributes(ClientCapabilities.Schema, [GameType]),
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupSurfaces,
+      activatesOn: Events.Startup,
       activate: ReactSurface,
     }),
     defineModule({
       id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntents,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/artifact`,
       activatesOn: Events.Startup,
-      activate: Artifact,
+      activate: IntentResolver,
     }),
   ]);

package/src/capabilities/index.ts

@@ -4,6 +4,5 @@
 
 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

@@ -2,25 +2,17 @@
 // 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';
+import { ChessAction, GameType } from '../types';
 
 export default () =>
   contributes(
     Capabilities.IntentResolver,
-    createResolver({
-      intent: ChessAction.Create,
-      resolve: ({ name, fen }) => {
-        const pgn = fen ? new Chess(fen).pgn() : undefined;
-        return {
-          data: {
-            object: create(ChessType, { name, fen, pgn }),
-          },
-        };
+    createResolver(ChessAction.Create, ({ name }) => ({
+      data: {
+        object: create(GameType, { name }),
       },
-    }),
+    })),
   );

package/src/capabilities/react-surface.tsx

@@ -5,25 +5,18 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { isInstanceOf } from '@dxos/echo-schema';
 
 import { ChessContainer } from '../components';
-import { ChessComponent } from '../components/ChessComponent';
 import { CHESS_PLUGIN } from '../meta';
-import { ChessType, isObject } from '../types';
+import { isObject, type GameType } from '../types';
 
 export default () =>
-  contributes(Capabilities.ReactSurface, [
+  contributes(
+    Capabilities.ReactSurface,
     createSurface({
       id: CHESS_PLUGIN,
       role: ['article', 'section'],
-      filter: (data): data is { subject: ChessType } => isObject(data.subject),
+      filter: (data): data is { subject: GameType } => 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 }) => <ChessComponent game={data} />,
-    }),
-  ]);
+  );

package/src/components/{PlayerSelector.tsx → Chess.tsx}

@@ -3,16 +3,63 @@
 //
 
 import { CrownCross } from '@phosphor-icons/react';
-import React from 'react';
+import { Chess as ChessJs } from 'chess.js';
+import React, { useEffect, useState } from 'react';
 
 import { generateName } from '@dxos/display-name';
+import { invariant } from '@dxos/invariant';
 import { useMembers, type Space, type SpaceMember } from '@dxos/react-client/echo';
 import { Input, Select, useThemeContext } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { type ChessType } from '../types';
+import { Chessboard, type ChessModel, type ChessMove } from './Chessboard';
+import { type GameType } from '../types';
 
-export const PlayerSelector = ({ space, game }: { space: Space; game: ChessType }) => {
+const useChessModel = (game: GameType) => {
+  const [model, setModel] = useState<ChessModel>();
+
+  useEffect(() => {
+    if (!model || game.pgn !== model?.chess.pgn()) {
+      const chess = new ChessJs();
+      if (game.pgn) {
+        chess.loadPgn(game.pgn);
+      }
+
+      setModel({ chess });
+    }
+  }, [game.pgn]);
+
+  const handleUpdate = (move: ChessMove) => {
+    invariant(model);
+    if (model.chess.move(move)) {
+      game!.pgn = model.chess.pgn();
+      setModel({ ...model });
+    }
+  };
+
+  return { model, handleUpdate };
+};
+
+export const Chess = ({ space, game, playerSelector }: { space: Space; game: GameType; playerSelector?: boolean }) => {
+  const { model, handleUpdate } = useChessModel(game);
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
+      <div />
+      <div className='flex grow justify-center overflow-hidden'>
+        <div className='flex grow max-w-[600px] items-center overflow-hidden'>
+          <Chessboard model={model} onUpdate={handleUpdate} />
+        </div>
+      </div>
+      {playerSelector && <PlayerSelector game={game} space={space} />}
+    </div>
+  );
+};
+
+const PlayerSelector = ({ game, space }: { game: GameType; space: Space }) => {
   const members = useMembers(space.key);
 
   return (

package/src/components/ChessContainer.tsx

@@ -2,16 +2,14 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { ChessComponent } from './ChessComponent';
-import { PlayerSelector } from './PlayerSelector';
-import { type ChessType } from '../types';
+import { Chess } from './Chess';
 
-const ChessContainer = ({ game }: { game: ChessType; role?: string }) => {
+const ChessContainer = ({ game, role }: Pick<ComponentProps<typeof Chess>, 'game'> & { role?: string }) => {
   const space = getSpace(game);
   if (!space) {
     return null;
@@ -19,15 +17,7 @@ const ChessContainer = ({ game }: { game: ChessType; role?: string }) => {
 
   return (
     <StackItem.Content toolbar={false}>
-      <div role='none' className='grid grid-rows-[60px_1fr_60px] grow overflow-hidden'>
-        <div />
-
-        <div className='flex m-4 overflow-hidden'>
-          <ChessComponent game={game} />
-        </div>
-
-        <PlayerSelector space={space} game={game} />
-      </div>
+      <Chess game={game} space={space} playerSelector={role === 'article'} />
     </StackItem.Content>
   );
 };

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

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { Chess } from 'chess.js';
+import React, { useState } from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { Chessboard, type ChessModel, type ChessMove, ChessPanel } from './Chessboard';
+
+const Story = () => {
+  const [model, setModel] = useState<ChessModel>({ chess: new Chess() });
+  const handleUpdate = (move: ChessMove) => {
+    if (model.chess.move(move)) {
+      setModel({ ...model });
+    }
+  };
+
+  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>
+    </div>
+  );
+};
+
+export default {
+  title: 'plugins/plugin-chess/Chessboard',
+  component: Chessboard,
+  render: Story,
+  decorators: [withTheme],
+};
+
+export const Default = {
+  component: Chessboard,
+};