@dxos/react-ui-gameboard 0.8.3 → 0.8.4-main.2e9d522

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.3",
+  "version": "0.8.4-main.2e9d522",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,6 +15,9 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
   "files": [
     "dist",
     "src"
@@ -26,11 +29,11 @@
     "@preact/signals-core": "^1.9.0",
     "chess.js": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/node-std": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/debug": "0.8.4-main.2e9d522",
+    "@dxos/invariant": "0.8.4-main.2e9d522",
+    "@dxos/log": "0.8.4-main.2e9d522",
+    "@dxos/node-std": "0.8.4-main.2e9d522",
+    "@dxos/util": "0.8.4-main.2e9d522"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
@@ -41,15 +44,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.2e9d522",
+    "@dxos/react-ui-theme": "0.8.4-main.2e9d522",
+    "@dxos/storybook-utils": "0.8.4-main.2e9d522"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.2e9d522",
+    "@dxos/react-ui-theme": "0.8.4-main.2e9d522"
   },
   "publishConfig": {
     "access": "public"
@@ -57,7 +60,7 @@
   "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"
+    "gen:pieces:chess:alpha": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/alpha ./assets/pieces/chess/alpha > /dev/null",
+    "gen:pieces:chess:cburnett": "pnpm svgr --typescript --filename-case=camel --out-dir ./src/gen/pieces/chess/cburnett ./assets/pieces/chess/cburnett > /dev/null"
   }
 }

package/src/Chessboard/Chessboard.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { log } from '@dxos/log';
@@ -13,7 +13,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Chessboard, type ChessboardProps } from './Chessboard';
 import { ChessModel } from './chess';
-import { Board, type BoardRootProps, type Player, type Move } from '../Board';
+import { Gameboard, type GameboardRootProps, type Player, type Move } from '../Gameboard';
 
 type RenderProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
   fen: string;
@@ -23,7 +23,7 @@ const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps)
   const model = useMemo(() => new ChessModel(fen), [fen]);
   const [orientation, setOrientation] = useState<Player | undefined>(_orientation);
 
-  const handleDrop = useCallback<NonNullable<BoardRootProps['onDrop']>>(
+  const handleDrop = useCallback<NonNullable<GameboardRootProps['onDrop']>>(
     (move: Move) => {
       log.info('handleDrop', { move });
       return model.makeMove(move);
@@ -43,9 +43,11 @@ const DefaultStory = ({ fen, orientation: _orientation, ...props }: RenderProps)
           Toggle
         </Button>
       </Toolbar.Root>
-      <Board.Root model={model} onDrop={handleDrop}>
-        <Chessboard orientation={orientation} {...props} />
-      </Board.Root>
+      <Gameboard.Root model={model} onDrop={handleDrop}>
+        <Gameboard.Content>
+          <Chessboard orientation={orientation} {...props} />
+        </Gameboard.Content>
+      </Gameboard.Root>
     </div>
   );
 };
@@ -65,9 +67,9 @@ const Grid = (props: RenderProps) => {
       <div className='grid grid-cols-3 gap-2'>
         {models.map((model, i) => (
           <div key={i} className='aspect-square'>
-            <Board.Root model={model}>
+            <Gameboard.Root model={model}>
               <Chessboard />
-            </Board.Root>
+            </Gameboard.Root>
           </div>
         ))}
       </div>

package/src/Chessboard/Chessboard.tsx

@@ -5,7 +5,7 @@
 import React, { type PropsWithChildren, useRef, useMemo, useEffect, useState, memo } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { useTrackProps } from '@dxos/react-ui';
+import { type ThemedClassName, useTrackProps } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { isNotFalsy } from '@dxos/util';
 
@@ -19,126 +19,130 @@ import {
   Square,
   getRelativeBounds,
   locationToString,
-} from '../Board';
-import { useBoardContext } from '../Board';
-
-export type ChessboardProps = PropsWithChildren<{
-  orientation?: Player;
-  showLabels?: boolean;
-  debug?: boolean;
-  rows?: number;
-  cols?: number;
-}>;
+  useBoardContext,
+} from '../Gameboard';
+
+export type ChessboardProps = ThemedClassName<
+  PropsWithChildren<{
+    orientation?: Player;
+    showLabels?: boolean;
+    debug?: boolean;
+    rows?: number;
+    cols?: number;
+  }>
+>;
 
 /**
  * Chessboard layout.
  */
-export const Chessboard = memo(({ orientation, showLabels, debug, rows = 8, cols = 8 }: ChessboardProps) => {
-  useTrackProps({ orientation, showLabels, debug }, Chessboard.displayName, false);
-  const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
-  const { model, promoting, onPromotion } = useBoardContext();
-
-  const locations = useMemo<Location[]>(() => {
-    return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
-      Array.from({ length: cols }).map((_, col) => [row, col] as Location),
-    );
-  }, [orientation, rows, cols]);
-
-  // Use DOM grid layout to position squares.
-  const layout = useMemo(() => {
-    return locations.map((location) => {
-      return (
-        <div
-          key={locationToString(location)}
-          {...{
-            ['data-location' as const]: locationToString(location),
-          }}
-        />
+export const Chessboard = memo(
+  ({ orientation, showLabels, debug, rows = 8, cols = 8, classNames }: ChessboardProps) => {
+    useTrackProps({ orientation, showLabels, debug }, Chessboard.displayName, false);
+    const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
+    const { model, promoting, onPromotion } = useBoardContext();
+
+    const locations = useMemo<Location[]>(() => {
+      return Array.from({ length: rows }, (_, i) => (orientation === 'black' ? i : rows - 1 - i)).flatMap((row) =>
+        Array.from({ length: cols }).map((_, col) => [row, col] as Location),
       );
-    });
-  }, [locations]);
-
-  // Build map of square locations to bounds.
-  const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
-  const gridRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    setGrid(
-      locations.reduce(
-        (acc, location) => {
-          const square = getSquareLocation(gridRef.current!, location)!;
-          const bounds = getRelativeBounds(gridRef.current!, square);
-          return { ...acc, [locationToString(location)]: bounds };
-        },
-        {} as Record<string, DOMRectBounds>,
-      ),
-    );
-  }, [locations, width, height]);
-
-  // Get the bounds of each square and piece.
-  const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
-    if (!gridRef.current) {
-      return [];
-    }
-
-    return Object.values(model?.pieces.value ?? {})
-      .map((piece) => {
-        if (piece.id === promoting?.id) {
-          return null;
-        }
-
-        const bounds = grid[locationToString(piece.location)];
-        return { piece, bounds };
-      })
-      .filter(isNotFalsy);
-  }, [grid, model?.pieces.value, promoting]);
+    }, [orientation, rows, cols]);
 
-  return (
-    <div ref={containerRef} className='relative'>
-      <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
-        {layout}
-      </div>
-      <div>
-        {locations.map((location) => (
-          <Square
+    // Use DOM grid layout to position squares.
+    const layout = useMemo(() => {
+      return locations.map((location) => {
+        return (
+          <div
             key={locationToString(location)}
-            location={location}
-            label={showLabels ? locationToPos(location) : undefined}
-            bounds={grid[locationToString(location)]}
-            classNames={getSquareColor(location)}
-          />
-        ))}
-      </div>
-      <div className={mx(promoting && 'opacity-50')}>
-        {positions.map(({ bounds, piece }) => (
-          <Piece
-            key={piece.id}
-            piece={piece}
-            bounds={bounds}
-            label={debug ? piece.id : undefined}
-            orientation={orientation}
-            Component={ChessPieces[piece.type as ChessPiece]}
-          />
-        ))}
-      </div>
-      <div>
-        {promoting && (
-          <PromotionSelector
-            grid={grid}
-            piece={promoting}
-            onSelect={(piece) => {
-              onPromotion({
-                from: Object.values(model!.pieces.value).find((p) => p.id === promoting.id)!.location,
-                to: piece.location,
-                piece: promoting.type,
-                promotion: piece.type,
-              });
+            {...{
+              ['data-location' as const]: locationToString(location),
             }}
           />
-        )}
+        );
+      });
+    }, [locations]);
+
+    // Build map of square locations to bounds.
+    const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
+    const gridRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      setGrid(
+        locations.reduce(
+          (acc, location) => {
+            const square = getSquareLocation(gridRef.current!, location)!;
+            const bounds = getRelativeBounds(gridRef.current!, square);
+            return { ...acc, [locationToString(location)]: bounds };
+          },
+          {} as Record<string, DOMRectBounds>,
+        ),
+      );
+    }, [locations, width, height]);
+
+    // Get the bounds of each square and piece.
+    const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
+      if (!gridRef.current) {
+        return [];
+      }
+
+      return Object.values(model?.pieces.value ?? {})
+        .map((piece) => {
+          if (piece.id === promoting?.id) {
+            return null;
+          }
+
+          const bounds = grid[locationToString(piece.location)];
+          return { piece, bounds };
+        })
+        .filter(isNotFalsy);
+    }, [grid, model?.pieces.value, promoting]);
+
+    return (
+      <div ref={containerRef} className={mx('relative', classNames)}>
+        <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
+          {layout}
+        </div>
+        <div>
+          {locations.map((location) => (
+            <Square
+              key={locationToString(location)}
+              location={location}
+              label={showLabels ? locationToPos(location) : undefined}
+              bounds={grid[locationToString(location)]}
+              classNames={getSquareColor(location)}
+            />
+          ))}
+        </div>
+        <div className={mx(promoting && 'opacity-50')}>
+          {positions.map(({ bounds, piece }) => (
+            <Piece
+              key={piece.id}
+              piece={piece}
+              bounds={bounds}
+              label={debug ? piece.id : undefined}
+              orientation={orientation}
+              Component={ChessPieces[piece.type as ChessPiece]}
+            />
+          ))}
+        </div>
+        <div>
+          {promoting && (
+            <PromotionSelector
+              grid={grid}
+              piece={promoting}
+              onSelect={(piece) => {
+                onPromotion({
+                  from: Object.values(model!.pieces.value).find((p) => p.id === promoting.id)!.location,
+                  to: piece.location,
+                  piece: promoting.type,
+                  promotion: piece.type,
+                });
+              }}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 Chessboard.displayName = 'Chessboard';
 

package/src/Chessboard/chess.ts

@@ -14,9 +14,9 @@ import {
   type PieceMap,
   locationToString,
   type PieceType,
-  type BoardModel,
+  type GameboardModel,
   type Player,
-} from '../Board';
+} from '../Gameboard';
 import * as Alpha from '../gen/pieces/chess/alpha';
 
 export type ChessPiece = 'BK' | 'BQ' | 'BR' | 'BB' | 'BN' | 'BP' | 'WK' | 'WQ' | 'WR' | 'WB' | 'WN' | 'WP';
@@ -82,7 +82,7 @@ const makeMove = (game: Chess, move: Move): Chess | null => {
 /**
  * Chess model.
  */
-export class ChessModel implements BoardModel<ChessPiece> {
+export class ChessModel implements GameboardModel<ChessPiece> {
   private _game!: Chess;
   private readonly _pieces = signal<PieceMap<ChessPiece>>({});
 

package/src/{Board/Board.tsx → Gameboard/Gameboard.tsx}

@@ -3,32 +3,29 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import React, { type PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import React, { type CSSProperties, forwardRef, 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';
+import { GameboardContext, type GameboardContextType } from './context';
+import { type GameboardModel, isLocation, isPiece, type Move, type PieceRecord } from './types';
 
-type RootProps = ThemedClassName<
-  PropsWithChildren<{
-    model?: BoardModel;
-    onDrop?: (move: Move) => boolean;
-  }>
->;
+type GameboardRootProps = PropsWithChildren<{
+  model?: GameboardModel;
+  onDrop?: (move: Move) => boolean;
+}>;
 
 /**
  * Generic board container.
  */
-const Root = ({ children, classNames, model, onDrop }: RootProps) => {
+const GameboardRoot = ({ children, model, onDrop }: GameboardRootProps) => {
   const [dragging, setDragging] = useState(false);
   const [promoting, setPromoting] = useState<PieceRecord | undefined>();
 
   // Handle promotion.
-  const onPromotion = useCallback<BoardContextType['onPromotion']>((move) => {
+  const onPromotion = useCallback<GameboardContextType['onPromotion']>((move) => {
     log('onPromotion', { move });
     setPromoting(undefined);
     onDrop?.(move);
@@ -71,16 +68,36 @@ const Root = ({ children, classNames, model, onDrop }: RootProps) => {
   }, [model]);
 
   return (
-    <BoardContext.Provider value={{ model, dragging, promoting, onPromotion }}>
-      <Container classNames={mx('aspect-square', classNames)}>{children}</Container>
-    </BoardContext.Provider>
+    <GameboardContext.Provider value={{ model, dragging, promoting, onPromotion }}>
+      {children}
+    </GameboardContext.Provider>
   );
 };
 
-Root.displayName = 'Board.Root';
+GameboardRoot.displayName = 'Gameboard.Root';
+
+type GameboardContentsProps = ThemedClassName<
+  PropsWithChildren<{
+    style?: CSSProperties;
+  }>
+>;
+
+/**
+ * Container centers the board.
+ */
+const GameboardContent = forwardRef<HTMLDivElement, GameboardContentsProps>(
+  ({ 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 aspect-square', classNames)}>{children}</div>
+      </div>
+    );
+  },
+);
 
-export const Board = {
-  Root,
+export const Gameboard = {
+  Root: GameboardRoot,
+  Content: GameboardContent,
 };
 
-export type { RootProps as BoardRootProps };
+export type { GameboardRootProps, GameboardContentsProps };

package/src/Gameboard/context.ts

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

package/src/{Board → Gameboard}/index.ts

@@ -6,7 +6,6 @@ export * from './context';
 export * from './types';
 export * from './util';
 
-export * from './Board';
-export * from './Container';
+export * from './Gameboard';
 export * from './Square';
 export * from './Piece';

package/src/{Board → Gameboard}/types.ts

@@ -50,7 +50,7 @@ export const isEqualLocation = (l1: Location, l2: Location): boolean => l1[0] ==
 /**
  * Generic board model.
  */
-export interface BoardModel<T extends PieceType = PieceType> {
+export interface GameboardModel<T extends PieceType = PieceType> {
   turn: Player;
   pieces: ReadonlySignal<PieceMap<T>>;
   isValidMove: (move: Move) => boolean;

package/src/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Board';
+export * from './Gameboard';
 export * from './Chessboard';