@dxos/react-ui-gameboard 0.7.5-labs.35b4b42

package/dist/types/src/gen/pieces/chess/alpha/wN.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wN.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/alpha/wN.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/alpha/wP.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWP: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWP;
+//# sourceMappingURL=wP.d.ts.map

package/dist/types/src/gen/pieces/chess/alpha/wP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wP.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/alpha/wP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/alpha/wQ.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWQ: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWQ;
+//# sourceMappingURL=wQ.d.ts.map

package/dist/types/src/gen/pieces/chess/alpha/wQ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wQ.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/alpha/wQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/alpha/wR.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWR: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWR;
+//# sourceMappingURL=wR.d.ts.map

package/dist/types/src/gen/pieces/chess/alpha/wR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wR.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/alpha/wR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bB.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBB: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBB;
+//# sourceMappingURL=bB.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bB.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bK.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBK: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBK;
+//# sourceMappingURL=bK.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bK.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bK.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bK.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAsB5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bN.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBN: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBN;
+//# sourceMappingURL=bN.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bN.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bN.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bN.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAoB5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bP.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBP: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBP;
+//# sourceMappingURL=bP.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bP.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAS5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bQ.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBQ: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBQ;
+//# sourceMappingURL=bQ.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bQ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bQ.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBA0B5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/bR.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgBR: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgBR;
+//# sourceMappingURL=bR.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/bR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bR.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/bR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAe5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/index.d.ts

@@ -0,0 +1,13 @@
+export { default as BB } from './bB';
+export { default as BK } from './bK';
+export { default as BN } from './bN';
+export { default as BP } from './bP';
+export { default as BQ } from './bQ';
+export { default as BR } from './bR';
+export { default as WB } from './wB';
+export { default as WK } from './wK';
+export { default as WN } from './wN';
+export { default as WP } from './wP';
+export { default as WQ } from './wQ';
+export { default as WR } from './wR';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,MAAM,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wB.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWB: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWB;
+//# sourceMappingURL=wB.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wB.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wB.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAW5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wK.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWK: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWK;
+//# sourceMappingURL=wK.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wK.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wK.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wK.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAiB5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wN.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWN: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWN;
+//# sourceMappingURL=wN.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wN.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wN.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wN.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAc5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wP.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWP: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWP;
+//# sourceMappingURL=wP.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wP.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wP.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wP.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAU5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wQ.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWQ: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWQ;
+//# sourceMappingURL=wQ.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wQ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wQ.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wQ.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAY5C,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/types/src/gen/pieces/chess/cburnett/wR.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgWR: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgWR;
+//# sourceMappingURL=wR.d.ts.map

package/dist/types/src/gen/pieces/chess/cburnett/wR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wR.d.ts","sourceRoot":"","sources":["../../../../../../../src/gen/pieces/chess/cburnett/wR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,QAAA,MAAM,KAAK,UAAW,QAAQ,CAAC,aAAa,CAAC,sBAU5C,CAAC;AACF,eAAe,KAAK,CAAC"}

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

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

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

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

package/dist/types/tsconfig.tsbuildinfo

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

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@dxos/react-ui-gameboard",
+  "version": "0.7.5-labs.35b4b42",
+  "description": "Game board.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@preact/signals-core": "^1.6.0",
+    "chess.js": "^1.0.0",
+    "react-resize-detector": "^11.0.1",
+    "@dxos/debug": "0.7.5-labs.35b4b42",
+    "@dxos/node-std": "0.7.5-labs.35b4b42",
+    "@dxos/invariant": "0.7.5-labs.35b4b42",
+    "@dxos/log": "0.7.5-labs.35b4b42",
+    "@dxos/util": "0.7.5-labs.35b4b42"
+  },
+  "devDependencies": {
+    "@svgr/cli": "^8.1.0",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "lodash.defaultsdeep": "^4.6.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/react-ui": "0.7.5-labs.35b4b42",
+    "@dxos/react-ui-theme": "0.7.5-labs.35b4b42",
+    "@dxos/storybook-utils": "0.7.5-labs.35b4b42"
+  },
+  "peerDependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.7.5-labs.35b4b42",
+    "@dxos/react-ui-theme": "0.7.5-labs.35b4b42"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "gen:pieces": "pnpm gen:pieces:chess",
+    "gen:pieces:chess": "pnpm gen:pieces:chess:alpha && pnpm gen:pieces:chess:cburnett",
+    "gen:pieces:chess:alpha": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/alpha ./assets/pieces/chess/alpha",
+    "gen:pieces:chess:cburnett": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/cburnett ./assets/pieces/chess/cburnett"
+  }
+}

package/src/Board/Board.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import React, { type PropsWithChildren, useCallback, useEffect, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { Container } from './Container';
+import { BoardContext, type BoardContextType } from './context';
+import { type BoardModel, isLocation, isPiece, type Move, type PieceRecord } from './types';
+
+type RootProps = ThemedClassName<
+  PropsWithChildren<{
+    model?: BoardModel;
+    onDrop?: (move: Move) => boolean;
+  }>
+>;
+
+/**
+ * Generic board container.
+ */
+const Root = ({ children, classNames, model, onDrop }: RootProps) => {
+  const [dragging, setDragging] = useState(false);
+  const [promoting, setPromoting] = useState<PieceRecord | undefined>();
+
+  // Handle promotion.
+  const onPromotion = useCallback<BoardContextType['onPromotion']>((move) => {
+    log('onPromotion', { move });
+    setPromoting(undefined);
+    onDrop?.(move);
+  }, []);
+
+  useEffect(() => {
+    if (!model) {
+      return;
+    }
+
+    // TODO(burdon): Should target specific container.
+    return monitorForElements({
+      onDragStart: ({ source }) => {
+        log('onDragStart', { source });
+        setDragging(true);
+      },
+      onDrop: ({ source, location }) => {
+        log('onDrop', { source, location });
+        const target = location.current.dropTargets[0];
+        if (!target) {
+          return;
+        }
+
+        const targetLocation = target.data.location;
+        const piece = source.data.piece;
+        if (!isLocation(targetLocation) || !isPiece(piece)) {
+          return;
+        }
+
+        const move: Move = { from: piece.location, to: targetLocation, piece: piece.type };
+        if (model.canPromote?.(move)) {
+          setPromoting({ ...piece, location: targetLocation });
+        } else {
+          onDrop?.(move);
+        }
+
+        setDragging(false);
+      },
+    });
+  }, [model]);
+
+  return (
+    <BoardContext.Provider value={{ model, dragging, promoting, onPromotion }}>
+      <Container classNames={mx('aspect-square', classNames)}>{children}</Container>
+    </BoardContext.Provider>
+  );
+};
+
+Root.displayName = 'Board.Root';
+
+export const Board = {
+  Root,
+};
+
+export type { RootProps as BoardRootProps };

package/src/Board/Container.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, type PropsWithChildren } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ContainerProps = ThemedClassName<
+  PropsWithChildren<{
+    style?: React.CSSProperties;
+  }>
+>;
+
+/**
+ * Container centers the board.
+ */
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(({ children, classNames, style }, forwardedRef) => {
+  return (
+    <div ref={forwardedRef} style={style} className='flex w-full h-full justify-center overflow-hidden'>
+      <div className={mx('max-w-full max-h-full content-center', classNames)}>{children}</div>
+    </div>
+  );
+});

package/src/Board/Piece.tsx

@@ -0,0 +1,135 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+// import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { centerUnderPointer } from '@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import React, { useState, useRef, useEffect, type FC, type SVGProps, memo } from 'react';
+import { createPortal } from 'react-dom';
+
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { useDynamicRef, useTrackProps, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useBoardContext } from './context';
+import { isEqualLocation, isLocation, type Location, type PieceRecord, type Player } from './types';
+import { type DOMRectBounds } from './util';
+
+export type PieceProps = ThemedClassName<{
+  piece: PieceRecord;
+  bounds: DOMRectBounds;
+  label?: string;
+  orientation?: Player;
+  Component: FC<SVGProps<SVGSVGElement>>;
+}>;
+
+export const Piece = memo(({ classNames, piece, orientation, bounds, label, Component }: PieceProps) => {
+  useTrackProps({ classNames, piece, orientation, bounds, label, Component }, Piece.displayName, false);
+  const { model } = useBoardContext();
+
+  const { dragging: isDragging, promoting } = useBoardContext();
+  const promotingRef = useDynamicRef(promoting);
+  const [dragging, setDragging] = useState(false);
+  const [preview, setPreview] = useState<HTMLElement>();
+
+  // Current position.
+  const [current, setCurrent] = useState<{ location?: Location; bounds?: DOMRectBounds }>({});
+
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    invariant(el);
+
+    return draggable({
+      element: el,
+      getInitialData: () => ({ piece }),
+      onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+        log('onGenerateDragPreview', { source: source.data });
+        setCustomNativeDragPreview({
+          getOffset: centerUnderPointer,
+          // getOffset: preserveOffsetOnSource({
+          //   element: source.element,
+          //   input: location.current.input,
+          // }),
+          render: ({ container }) => {
+            setPreview(container);
+            const { width, height } = el.getBoundingClientRect();
+            container.style.width = width + 'px';
+            container.style.height = height + 'px';
+            return () => {
+              setPreview(undefined);
+            };
+          },
+          nativeSetDragImage,
+        });
+      },
+      canDrag: () => !promotingRef.current && model?.turn === piece.side,
+      onDragStart: () => setDragging(true),
+      onDrop: ({ location: { current } }) => {
+        const location = current.dropTargets[0].data.location;
+        if (isLocation(location)) {
+          setCurrent((current) => ({ ...current, location }));
+        }
+
+        setDragging(false);
+      },
+    });
+  }, [model, piece]);
+
+  // Must update position independently of render cycle (otherwise animation is interrupted).
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (!ref.current || !bounds) {
+        return;
+      }
+
+      // Check if piece moved.
+      if (!current.location || !isEqualLocation(current.location, piece.location)) {
+        ref.current.style.transition = 'top 400ms ease-out, left 400ms ease-out';
+        ref.current.style.top = bounds.top + 'px';
+        ref.current.style.left = bounds.left + 'px';
+        setCurrent({ location: piece.location, bounds });
+      } else if (current.bounds !== bounds) {
+        ref.current.style.transition = 'none';
+        ref.current.style.top = bounds.top + 'px';
+        ref.current.style.left = bounds.left + 'px';
+        setCurrent({ location: piece.location, bounds });
+      }
+    });
+  }, [current, piece.location, bounds]);
+
+  return (
+    <>
+      <div
+        ref={ref}
+        style={{
+          width: bounds?.width,
+          height: bounds?.height,
+        }}
+        className={mx(
+          'absolute',
+          classNames,
+          // orientation === 'black' && '_rotate-180',
+          dragging && 'opacity-20', // Must not unmount component while dragging.
+          isDragging && 'pointer-events-none', // Don't block the square's drop target.
+        )}
+      >
+        <Component className='grow' />
+        {label && <div className='absolute inset-1 text-xs text-black'>{label}</div>}
+      </div>
+
+      {preview &&
+        createPortal(
+          <div className={mx(classNames)}>
+            <Component className='grow' />
+          </div>,
+          preview,
+        )}
+    </>
+  );
+});
+
+Piece.displayName = 'Piece';

package/src/Board/Square.tsx

@@ -0,0 +1,74 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import React, { useRef, useState, useEffect, memo } from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useBoardContext } from './context';
+import { isPiece, type Location } from './types';
+import { type DOMRectBounds } from './util';
+
+type HoveredState = 'idle' | 'validMove' | 'invalidMove';
+
+export type SquareProps = ThemedClassName<{
+  location: Location;
+  bounds: DOMRectBounds;
+  label?: string;
+}>;
+
+export const Square = memo(({ location, bounds, label, classNames }: SquareProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<HoveredState>('idle');
+  const { model } = useBoardContext();
+
+  useEffect(() => {
+    const el = ref.current;
+    invariant(el);
+
+    return dropTargetForElements({
+      element: el,
+      getData: () => ({ location }),
+      canDrop: ({ source }) => {
+        log('canDrop', { source: source.data });
+        return true;
+      },
+      onDragEnter: ({ source }) => {
+        log('onDragEnter', { source: source.data });
+        const piece = source.data.piece;
+        if (!isPiece(piece)) {
+          return;
+        }
+
+        if (model?.isValidMove({ from: piece.location, to: location, piece: piece.type })) {
+          setState('validMove');
+        } else {
+          setState('invalidMove');
+        }
+      },
+      onDragLeave: () => setState('idle'),
+      onDrop: () => setState('idle'),
+    });
+  }, [model, location]);
+
+  return (
+    <div
+      ref={ref}
+      style={bounds}
+      className={mx(
+        'absolute flex justify-center items-center border-2 box-border select-none',
+        classNames,
+        state === 'validMove' ? 'border-neutral-800' : 'border-transparent',
+      )}
+    >
+      {label && <div className={mx('absolute bottom-1 left-1 text-xs text-neutral-500')}>{label}</div>}
+    </div>
+  );
+});
+
+Square.displayName = 'Square';

package/src/Board/context.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { type PieceRecord, type BoardModel, type Move } from './types';
+
+export type BoardContextType = {
+  model?: BoardModel;
+  dragging?: boolean; // TODO(burdon): Change to PieceRecord.
+  promoting?: PieceRecord;
+  onPromotion: (move: Move) => void;
+};
+
+export const BoardContext = createContext<BoardContextType | undefined>(undefined);
+
+export const useBoardContext = () => {
+  return useContext(BoardContext) ?? raise(new Error('Missing BoardContext'));
+};

package/src/Board/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './context';
+export * from './types';
+export * from './util';
+
+export * from './Board';
+export * from './Container';
+export * from './Square';
+export * from './Piece';