@dxos/react-ui-gameboard 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.4-main.5ea62a8",
+  "version": "0.8.4-main.72ec0f3",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,34 +27,34 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "chess.js": "^1.4.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/debug": "0.8.4-main.5ea62a8",
-    "@dxos/invariant": "0.8.4-main.5ea62a8",
-    "@dxos/log": "0.8.4-main.5ea62a8",
-    "@dxos/node-std": "0.8.4-main.5ea62a8",
-    "@dxos/util": "0.8.4-main.5ea62a8"
+    "@dxos/debug": "0.8.4-main.72ec0f3",
+    "@dxos/invariant": "0.8.4-main.72ec0f3",
+    "@dxos/log": "0.8.4-main.72ec0f3",
+    "@dxos/node-std": "0.8.4-main.72ec0f3",
+    "@dxos/util": "0.8.4-main.72ec0f3"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "lodash.defaultsdeep": "^4.6.1",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/storybook-utils": "0.8.4-main.5ea62a8"
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/react-ui": "0.8.4-main.72ec0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3",
+    "@dxos/storybook-utils": "0.8.4-main.72ec0f3"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.72ec0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.72ec0f3"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,13 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Button, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Gameboard, type GameboardRootProps, type Move, type Player } from '../Gameboard';
 
@@ -64,7 +62,7 @@ const GridStory = () => {
   }, []);
 
   return (
-    <div className='h-full aspect-square mx-auto'>
+    <div className='bs-full aspect-square mx-auto'>
       <div className='grid grid-cols-3 gap-2'>
         {models.map((model, i) => (
           <div key={i} className='aspect-square'>
@@ -82,7 +80,7 @@ const meta = {
   title: 'ui/react-ui-gameboard/Chessboard',
   component: Chessboard,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof Chessboard>;
 
 export default meta;

package/src/components/Chessboard/Chessboard.tsx

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, type PropsWithChildren, memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { type PropsWithChildren, forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { type ThemedClassName, useTrackProps } from '@dxos/react-ui';
+import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import {
   type DOMRectBounds,
@@ -35,10 +35,10 @@ export type ChessboardProps = ThemedClassName<
 /**
  * Chessboard layout.
  */
-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 ChessboardComponent = forwardRef<HTMLDivElement, ChessboardProps>(
+  ({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
+    const targetRef = useForwardedRef(forwardedRef);
+    const { width, height } = useResizeDetector({ targetRef, refreshRate: 200 });
     const { model, promoting, onPromotion } = useGameboardContext<ChessModel>(Chessboard.displayName!);
 
     // Board squares.
@@ -93,11 +93,11 @@ export const Chessboard = memo(
           const bounds = grid[locationToString(piece.location)];
           return { piece, bounds };
         })
-        .filter(isNotFalsy);
+        .filter(isNonNullable);
     }, [grid, model?.pieces.value, promoting]);
 
     return (
-      <div ref={containerRef} className={mx('relative', classNames)}>
+      <div ref={targetRef} tabIndex={0} className={mx('relative outline-none', classNames)}>
         {/* DOM Layout. */}
         <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
           {layout}
@@ -147,11 +147,9 @@ export const Chessboard = memo(
   },
 );
 
-Chessboard.displayName = 'Chessboard';
+ChessboardComponent.displayName = 'Chessboard';
 
-const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
-  return container.querySelector(`[data-location="${locationToString(location)}"]`);
-};
+export const Chessboard = memo(ChessboardComponent);
 
 const PromotionSelector = ({
   grid,
@@ -184,13 +182,17 @@ const PromotionSelector = ({
       {positions.map(({ piece, bounds }) => (
         <Gameboard.Piece
           key={piece.id}
+          classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
           piece={piece}
           bounds={bounds}
           Component={ChessPieces[piece.type as ChessPiece]}
-          classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
           onClick={() => handleSelect(piece)}
         />
       ))}
     </>
   );
 };
+
+const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
+  return container.querySelector(`[data-location="${locationToString(location)}"]`);
+};

package/src/components/Chessboard/chess.ts

@@ -34,6 +34,10 @@ export const locationToPos = ([row, col]: Location): string => {
   return String.fromCharCode(col + 'a'.charCodeAt(0)) + (row + 1);
 };
 
+export const getRawPgn = (pgn: string) => {
+  return pgn.replace(/\[.*?\]/g, '').trim();
+};
+
 const styles = {
   neutral: {
     black: 'bg-neutral-50',
@@ -108,6 +112,10 @@ export class ChessModel implements GameboardModel<ChessPiece> {
     return this._moveIndex;
   }
 
+  get fen() {
+    return this._chess.fen();
+  }
+
   /**
    * PGN with headers.
    *
@@ -121,7 +129,7 @@ export class ChessModel implements GameboardModel<ChessPiece> {
    */
   // TODO(burdon): Update headers.
   get pgn(): string {
-    return this._chess.pgn();
+    return getRawPgn(this._chess.pgn());
   }
 
   setMoveIndex(index: number) {

package/src/components/Gameboard/Piece.tsx

@@ -10,7 +10,7 @@ import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { type ThemedClassName, useDynamicRef, useTrackProps } from '@dxos/react-ui';
+import { type ThemedClassName, useDynamicRef } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useGameboardContext } from './Gameboard';
@@ -26,8 +26,7 @@ export type PieceProps = ThemedClassName<{
   onClick?: () => void;
 }>;
 
-export const Piece = memo(({ classNames, Component, piece, orientation, bounds, label, onClick }: PieceProps) => {
-  useTrackProps({ classNames, Component, piece, orientation, bounds, label }, Piece.displayName, false);
+export const Piece = memo(({ classNames, Component, piece, bounds, label, onClick }: PieceProps) => {
   const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName!);
   const promotingRef = useDynamicRef(promoting);
   const [dragging, setDragging] = useState(false);