@dxos/react-ui-gameboard 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@dxos/react-ui-gameboard",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "Game board.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
   "exports": {
@@ -16,45 +20,41 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@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",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
-    "chess.js": "^1.4.0",
+    "chess.js": "^1.0.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/debug": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/node-std": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/invariant": "0.8.4-staging.60fe92afc8",
+    "@dxos/debug": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8",
+    "@dxos/node-std": "0.8.4-staging.60fe92afc8",
+    "@dxos/log": "0.8.4-staging.60fe92afc8"
   },
   "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.7",
+    "@types/react-dom": "~19.2.3",
     "lodash.defaultsdeep": "^4.6.1",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.16",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,16 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useContext, 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 { withRegistry } from '@dxos/storybook-utils';
 
 import { Gameboard, type GameboardRootProps, type Move, type Player } from '../Gameboard';
-
 import { ChessModel } from './chess';
 import { Chessboard, type ChessboardProps } from './Chessboard';
 
@@ -20,7 +19,8 @@ type DefaultStoryProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'd
 };
 
 const DefaultStory = ({ orientation: _orientation, pgn, ...props }: DefaultStoryProps) => {
-  const model = useMemo(() => new ChessModel(pgn), [pgn]);
+  const registry = useContext(RegistryContext);
+  const model = useMemo(() => new ChessModel(registry, pgn), [registry, pgn]);
   const [orientation, setOrientation] = useState<Player | undefined>(_orientation);
 
   const handleDrop = useCallback<NonNullable<GameboardRootProps<ChessModel>['onDrop']>>(
@@ -54,7 +54,8 @@ const DefaultStory = ({ orientation: _orientation, pgn, ...props }: DefaultStory
 };
 
 const GridStory = () => {
-  const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel()), []);
+  const registry = useContext(RegistryContext);
+  const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel(registry)), [registry]);
   useEffect(() => {
     const i = setInterval(() => {
       const model = models[Math.floor(Math.random() * models.length)];
@@ -78,34 +79,35 @@ const GridStory = () => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-gameboard/Chessboard',
   component: Chessboard,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
-};
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof Chessboard>;
 
 export default meta;
 
-type Story = StoryObj<typeof DefaultStory>;
+type Story = StoryObj<typeof meta>;
 
-export const Default = {} satisfies Story;
+export const Default: Story = {};
 
-export const Promotion = {
+export const Promotion: Story = {
   args: {
     pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 14. d5 Qg5 15. dxe6 Kf8 16. e7+ Kg8 *',
   },
-} satisfies Story;
+};
 
-export const Debug = {
+export const Debug: Story = {
   args: {
     pgn: '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
     orientation: 'black',
     showLabels: true,
     debug: true,
   },
-} satisfies Story;
+};
 
 export const Grid = {
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   render: GridStory,
-} satisfies Story;
+};

package/src/components/Chessboard/Chessboard.tsx

@@ -2,26 +2,35 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { Fragment, type PropsWithChildren, memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Atom, useAtomValue } from '@effect-atom/atom-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 { mx } from '@dxos/react-ui-theme';
-import { isNotFalsy } from '@dxos/util';
+import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
 
 import {
   type DOMRectBounds,
   Gameboard,
   type Location,
+  type PieceMap,
   type PieceRecord,
   type Player,
   getRelativeBounds,
   locationToString,
   useGameboardContext,
 } from '../Gameboard';
-
 import { type ChessModel, type ChessPiece, ChessPieces, boardStyles, getSquareColor, locationToPos } from './chess';
 
+/** Fallback atom for when model is undefined. */
+const EMPTY_PIECES_ATOM = Atom.make<PieceMap<ChessPiece>>({});
+
+/**
+ * Chessboard layout.
+ */
+const CHESSBOARD_NAME = 'Chessboard';
+
 export type ChessboardProps = ThemedClassName<
   PropsWithChildren<{
     orientation?: Player;
@@ -32,16 +41,15 @@ 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 { model, promoting, onPromotion } = useGameboardContext<ChessModel>(Chessboard.displayName!);
+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_NAME);
+    const pieces = useAtomValue(model?.pieces ?? EMPTY_PIECES_ATOM);
 
-    const locations = useMemo<Location[]>(() => {
+    // Board squares.
+    const squares = 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),
       );
@@ -49,24 +57,24 @@ export const Chessboard = memo(
 
     // Use DOM grid layout to position squares.
     const layout = useMemo(() => {
-      return locations.map((location) => {
+      return squares.map((location) => {
         return (
           <div
             key={locationToString(location)}
             {...{
-              ['data-location' as const]: locationToString(location),
+              'data-location': locationToString(location),
             }}
           />
         );
       });
-    }, [locations]);
+    }, [squares]);
 
     // Build map of square locations to bounds.
     const [grid, setGrid] = useState<Record<string, DOMRectBounds>>({});
     const gridRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
       setGrid(
-        locations.reduce(
+        squares.reduce(
           (acc, location) => {
             const square = getSquareLocation(gridRef.current!, location)!;
             const bounds = getRelativeBounds(gridRef.current!, square);
@@ -75,7 +83,7 @@ export const Chessboard = memo(
           {} as Record<string, DOMRectBounds>,
         ),
       );
-    }, [locations, width, height]);
+    }, [squares, width, height]);
 
     // Get the bounds of each square and piece.
     const positions = useMemo<{ piece: PieceRecord; bounds: DOMRectBounds }[]>(() => {
@@ -83,7 +91,7 @@ export const Chessboard = memo(
         return [];
       }
 
-      return Object.values(model?.pieces.value ?? {})
+      return Object.values(pieces)
         .map((piece) => {
           if (piece.id === promoting?.id) {
             return null;
@@ -92,16 +100,18 @@ export const Chessboard = memo(
           const bounds = grid[locationToString(piece.location)];
           return { piece, bounds };
         })
-        .filter(isNotFalsy);
-    }, [grid, model?.pieces.value, promoting]);
+        .filter(isNonNullable);
+    }, [grid, pieces, promoting]);
 
     return (
-      <div ref={containerRef} className={mx('relative', classNames)}>
+      <div ref={targetRef} tabIndex={0} className={mx('dx-expander relative outline-hidden', classNames)}>
+        {/* DOM Layout. */}
         <div ref={gridRef} className='grid grid-rows-8 grid-cols-8 aspect-square select-none'>
           {layout}
         </div>
+        {/* Squares. */}
         <div>
-          {locations.map((location) => (
+          {squares.map((location) => (
             <Gameboard.Square
               key={locationToString(location)}
               location={location}
@@ -111,6 +121,7 @@ export const Chessboard = memo(
             />
           ))}
         </div>
+        {/* Pieces. */}
         <div className={mx(promoting && 'opacity-50')}>
           {positions.map(({ bounds, piece }) => (
             <Gameboard.Piece
@@ -123,13 +134,14 @@ export const Chessboard = memo(
             />
           ))}
         </div>
+        {/* Promotion selector. */}
         {promoting && (
           <PromotionSelector
             grid={grid}
             piece={promoting}
             onSelect={(piece) => {
               onPromotion({
-                from: Object.values(model!.pieces.value).find((p) => p.id === promoting.id)!.location,
+                from: Object.values(pieces).find((p) => p.id === promoting.id)!.location,
                 to: piece.location,
                 piece: promoting.type,
                 promotion: piece.type,
@@ -142,11 +154,9 @@ export const Chessboard = memo(
   },
 );
 
-Chessboard.displayName = 'Chessboard';
+ChessboardComponent.displayName = CHESSBOARD_NAME;
 
-const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
-  return container.querySelector(`[data-location="${locationToString(location)}"]`);
-};
+export const Chessboard = memo(ChessboardComponent);
 
 const PromotionSelector = ({
   grid,
@@ -179,13 +189,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.test.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Chess as ChessJS } from 'chess.js';
+import { describe, it } from 'vitest';
+
+import { createPieceMap } from './chess';
+
+describe('ChessModel', () => {
+  it('should update pieces', ({ expect }) => {
+    const chess = new ChessJS();
+    chess.loadPgn(
+      '1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. c3 Nf6 5. d4 exd4 6. cxd4 Bb4+ 7. Nc3 d5 8. exd5 Nxd5 9. O-O Be6 10. Qb3 Na5 11. Qa4+ c6 12. Bxd5 Bxc3 13. Bxe6 fxe6 *',
+    );
+    const pieces = createPieceMap(chess);
+    expect(pieces).to.exist;
+  });
+});

package/src/components/Chessboard/chess.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ReadonlySignal, signal } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { Chess as ChessJS } from 'chess.js';
 import { type FC, type SVGProps } from 'react';
 
+import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 
 import * as Alpha from '../../gen/pieces/chess/alpha';
@@ -33,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',
@@ -62,7 +67,7 @@ export const getSquareColor = ([row, col]: Location) => {
   return (col + row) % 2 === 0 ? boardStyles.black : boardStyles.white;
 };
 
-export const createChess = (pgn?: string) => {
+export const createChess = (pgn?: string): ChessJS => {
   const chess = new ChessJS();
   if (pgn) {
     try {
@@ -75,43 +80,43 @@ export const createChess = (pgn?: string) => {
   return chess;
 };
 
-/**
- * Attempt move.
- */
-const tryMove = (chess: ChessJS, move: Move): ChessJS | null => {
-  const from = locationToPos(move.from);
-  const to = locationToPos(move.to);
-  try {
-    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
-    chess.move({ from, to, promotion }, { strict: false });
-    return chess;
-  } catch {
-    // Ignore.
-    return null;
-  }
-};
-
 /**
  * Chess model.
  */
 export class ChessModel implements GameboardModel<ChessPiece> {
   private readonly _chess = new ChessJS();
-  private readonly _pieces = signal<PieceMap<ChessPiece>>({});
+  private readonly _pieces = Atom.make<PieceMap<ChessPiece>>({});
+  private readonly _moveIndex = Atom.make(0);
 
-  constructor(pgn?: string) {
+  constructor(
+    private readonly _registry: Registry.Registry,
+    pgn?: string,
+  ) {
     this.update(pgn);
   }
 
+  get readonly(): boolean {
+    return this._registry.get(this._moveIndex) !== this._chess.history().length;
+  }
+
   get turn(): Player {
     return this._chess.turn() === 'w' ? 'white' : 'black';
   }
 
-  get pieces(): ReadonlySignal<PieceMap<ChessPiece>> {
+  get game(): ChessJS {
+    return this._chess;
+  }
+
+  get pieces(): Atom.Atom<PieceMap<ChessPiece>> {
     return this._pieces;
   }
 
-  get game(): ChessJS {
-    return this._chess;
+  get moveIndex(): Atom.Atom<number> {
+    return this._moveIndex;
+  }
+
+  get fen() {
+    return this._chess.fen();
   }
 
   /**
@@ -127,11 +132,16 @@ export class ChessModel implements GameboardModel<ChessPiece> {
    */
   // TODO(burdon): Update headers.
   get pgn(): string {
-    return this._chess.pgn();
+    return getRawPgn(this._chess.pgn());
   }
 
-  get fen(): string {
-    return this._chess.fen();
+  setMoveIndex(index: number) {
+    const temp = new ChessJS();
+    const history = this._chess.history({ verbose: true });
+    for (let i = 0; i < index && i < history.length; i++) {
+      temp.move(history[i]);
+    }
+    this._updateBoard(temp);
   }
 
   update(pgn = ''): void {
@@ -151,10 +161,10 @@ export class ChessModel implements GameboardModel<ChessPiece> {
 
     const current = this._chess.history();
     if (!isValidNextMove(previous, current)) {
-      this._pieces.value = {};
+      this._registry.set(this._pieces, {});
     }
 
-    this._update();
+    this._updateBoard(this._chess);
   }
 
   isValidMove(move: Move): boolean {
@@ -173,7 +183,7 @@ export class ChessModel implements GameboardModel<ChessPiece> {
       return false;
     }
 
-    this._update();
+    this._updateBoard(this._chess);
     return true;
   }
 
@@ -185,37 +195,35 @@ export class ChessModel implements GameboardModel<ChessPiece> {
 
     const move = moves[Math.floor(Math.random() * moves.length)];
     this._chess.move(move);
-    this._update();
+
+    this._updateBoard(this._chess);
     return true;
   }
 
   /**
    * Update pieces preserving identity.
    */
-  private _update(): void {
-    const pieces: PieceMap<ChessPiece> = {};
-    this._chess.board().flatMap((row) =>
-      row.forEach((record) => {
-        if (!record) {
-          return;
-        }
-
-        const { square, type, color } = record;
-        const pieceType = `${color.toUpperCase()}${type.toUpperCase()}` as ChessPiece;
-        const location = posToLocation(square);
-        pieces[locationToString(location)] = {
-          id: `${square}-${pieceType}`,
-          type: pieceType,
-          side: color === 'w' ? 'white' : 'black',
-          location,
-        };
-      }),
-    );
-
-    this._pieces.value = mapPieces(this._pieces.value, pieces);
+  private _updateBoard(chess: ChessJS): void {
+    this._registry.set(this._pieces, createPieceMap(chess));
+    this._registry.set(this._moveIndex, chess.history().length);
   }
 }
 
+/**
+ * Attempt move.
+ */
+const tryMove = (chess: ChessJS, move: Move): ChessJS | null => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
+  try {
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
+    chess.move({ from, to, promotion }, { strict: false });
+    return chess;
+  } catch {
+    return null;
+  }
+};
+
 const isValidNextMove = (previous: string[], current: string[]) => {
   if (current.length > previous.length + 1) {
     return false;
@@ -230,21 +238,71 @@ const isValidNextMove = (previous: string[], current: string[]) => {
   return true;
 };
 
+/**
+ * Starting from a new game, assign piece IDs based on their starting position.
+ * Then iterate through the history of the provided game and update the piece map.
+ */
+export const createPieceMap = (chess: ChessJS): PieceMap<ChessPiece> => {
+  const temp = new ChessJS();
+  let pieces = _createPieceMap(temp);
+  const history = chess.history({ verbose: true });
+  for (let i = 0; i < history.length; i++) {
+    const move = history[i];
+    temp.move(move);
+    pieces = _diffPieces(pieces, _createPieceMap(temp));
+    const test = new Set();
+    Object.values(pieces).forEach((piece) => {
+      invariant(!test.has(piece.id), 'Duplicate: ' + piece.id);
+      test.add(piece.id);
+    });
+  }
+
+  return pieces;
+};
+
+/**
+ * Create a map of pieces from the board positions; assign each piece the ID of the current square.
+ */
+const _createPieceMap = (chess: ChessJS): PieceMap<ChessPiece> => {
+  const pieces: PieceMap<ChessPiece> = {};
+  chess.board().flatMap((row) =>
+    row.forEach((record) => {
+      if (!record) {
+        return;
+      }
+
+      const { square, type, color } = record;
+      const pieceType = `${color.toUpperCase()}${type.toUpperCase()}` as ChessPiece;
+      const location = posToLocation(square);
+      pieces[locationToString(location)] = {
+        id: `${square}-${pieceType}`,
+        type: pieceType,
+        side: color === 'w' ? 'white' : 'black',
+        location,
+      };
+    }),
+  );
+
+  return pieces;
+};
+
 /**
  * Preserve the original piece objects (and IDs).
  */
-export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>): PieceMap<T> => {
+const _diffPieces = <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>): PieceMap<T> => {
   const difference: { added: PieceMap; removed: PieceMap } = {
     removed: {},
     added: {},
   };
 
+  // Removed.
   (Object.keys(before) as Array<keyof typeof before>).forEach((square) => {
     if (after[square]?.type !== before[square]?.type) {
       difference.removed[square] = before[square];
     }
   });
 
+  // Added.
   (Object.keys(after) as Array<keyof typeof after>).forEach((square) => {
     if (before[square]?.type !== after[square]?.type) {
       difference.added[square] = after[square];
@@ -253,6 +311,7 @@ export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: Piece
     }
   });
 
+  // Preserve IDs.
   for (const piece of Object.values(difference.added)) {
     const previous = Object.values(difference.removed).find((p) => p.type === piece.type);
     if (previous) {
@@ -260,13 +319,6 @@ export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: Piece
     }
   }
 
-  log('delta', {
-    before: Object.keys(before).length,
-    after: Object.keys(after).length,
-    removed: Object.keys(difference.removed).length,
-    added: Object.keys(difference.added).length,
-  });
-
   return after;
 };