@dxos/react-ui-gameboard 0.7.5-labs.071a3e2

package/src/Board/types.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ReadonlySignal } from '@preact/signals-core';
+
+export type Player = 'black' | 'white';
+
+export type Location = [number, number];
+
+export type PieceType = string;
+
+export type PieceRecord<T extends PieceType = PieceType> = {
+  id: string;
+  type: T;
+  side: Player;
+  location: Location;
+};
+
+/**
+ * Map of pieces by location.
+ */
+export type PieceMap<T extends PieceType = PieceType> = Record<string, PieceRecord<T>>;
+
+export type Move = {
+  from: Location;
+  to: Location;
+  piece: PieceType;
+  promotion?: PieceType;
+};
+
+export const locationToString = (location: Location): string => location.join('-');
+export const stringToLocation = (str: string): Location => str.split('-').map(Number) as Location;
+
+// Type guard.
+export const isPiece = (piece: unknown): piece is PieceRecord =>
+  piece != null &&
+  typeof piece === 'object' &&
+  'id' in piece &&
+  'type' in piece &&
+  'location' in piece &&
+  isLocation(piece.location);
+
+// Type guard.
+export const isLocation = (token: unknown): token is Location =>
+  Array.isArray(token) && token.length === 2 && token.every((val) => typeof val === 'number');
+
+export const isEqualLocation = (l1: Location, l2: Location): boolean => l1[0] === l2[0] && l1[1] === l2[1];
+
+/**
+ * Generic board model.
+ */
+export interface BoardModel<T extends PieceType = PieceType> {
+  turn: Player;
+  pieces: ReadonlySignal<PieceMap<T>>;
+  isValidMove: (move: Move) => boolean;
+  canPromote?: (move: Move) => boolean;
+}

package/src/Board/util.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export type DOMRectBounds = Pick<DOMRect, 'top' | 'left' | 'width' | 'height'>;
+
+export const getRelativeBounds = (container: HTMLElement, element: HTMLElement): DOMRectBounds => {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  return {
+    top: elementRect.top - containerRect.top,
+    left: elementRect.left - containerRect.left,
+    width: elementRect.width,
+    height: elementRect.height,
+  };
+};

package/src/Chessboard/Chessboard.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { log } from '@dxos/log';
+import { Button, Toolbar } from '@dxos/react-ui';
+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';
+
+type RenderProps = Pick<ChessboardProps, 'orientation' | 'showLabels' | 'debug'> & {
+  fen: string;
+};
+
+const Render = ({ 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']>>(
+    (move: Move) => {
+      log.info('handleDrop', { move });
+      return model.makeMove(move);
+    },
+    [model],
+  );
+
+  return (
+    <div className='flex flex-col grow gap-2 overflow-hidden'>
+      <Toolbar.Root>
+        <Button onClick={() => model.initialize()}>Reset</Button>
+        <Button onClick={() => model.makeRandomMove()}>Move</Button>
+        <div className='grow'></div>
+        <Button
+          onClick={() => setOrientation((orientation) => (!orientation || orientation === 'white' ? 'black' : 'white'))}
+        >
+          Toggle
+        </Button>
+      </Toolbar.Root>
+      <Board.Root model={model} onDrop={handleDrop}>
+        <Chessboard orientation={orientation} {...props} />
+      </Board.Root>
+    </div>
+  );
+};
+
+const Grid = (props: RenderProps) => {
+  const models = useMemo(() => Array.from({ length: 9 }).map(() => new ChessModel()), []);
+  useEffect(() => {
+    const i = setInterval(() => {
+      const model = models[Math.floor(Math.random() * models.length)];
+      model.makeRandomMove();
+    }, 100);
+    return () => clearInterval(i);
+  }, []);
+
+  return (
+    <div className='h-full aspect-square mx-auto'>
+      <div className='grid grid-cols-3 gap-2'>
+        {models.map((model, i) => (
+          <div key={i} className='aspect-square'>
+            <Board.Root model={model}>
+              <Chessboard />
+            </Board.Root>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof Render> = {
+  title: 'ui/react-ui-gameboard/Chessboard',
+  component: Chessboard,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: '' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Render>;
+
+export const Default: Story = {};
+
+export const Promotion: Story = {
+  args: {
+    fen: '4k3/7P/8/8/8/8/1p6/4K3 w - - 0 1',
+  },
+};
+
+export const Debug: Story = {
+  args: {
+    debug: true,
+    showLabels: true,
+    orientation: 'black',
+    fen: 'q3k1nr/1pp1nQpp/3p4/1P2p3/4P3/B1PP1b2/B5PP/5K2 b k - 0 17',
+  },
+};
+
+export const Nine: Story = {
+  render: Grid,
+};

package/src/Chessboard/Chessboard.tsx

@@ -0,0 +1,190 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren, useRef, useMemo, useEffect, useState, memo } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { useTrackProps } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { isNotFalsy } from '@dxos/util';
+
+import { boardStyles, type ChessPiece, ChessPieces, getSquareColor, locationToPos } from './chess';
+import {
+  type DOMRectBounds,
+  type Location,
+  type PieceRecord,
+  type Player,
+  Piece,
+  Square,
+  getRelativeBounds,
+  locationToString,
+} from '../Board';
+import { useBoardContext } from '../Board';
+
+export type ChessboardProps = 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),
+          }}
+        />
+      );
+    });
+  }, [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='relative'>
+      <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>
+  );
+});
+
+Chessboard.displayName = 'Chessboard';
+
+const getSquareLocation = (container: HTMLElement, location: Location): HTMLElement | null => {
+  return container.querySelector(`[data-location="${locationToString(location)}"]`);
+};
+
+const PromotionSelector = ({
+  grid,
+  piece,
+  onSelect,
+}: {
+  grid: Record<string, DOMRectBounds>;
+  piece: PieceRecord;
+  onSelect: (piece: PieceRecord) => void;
+}) => {
+  const positions = ['Q', 'N', 'R', 'B'].map((pieceType, i) => {
+    const location = [piece.location[0] + (piece.location[0] === 0 ? i : -i), piece.location[1]] as Location;
+    return {
+      piece: {
+        id: `promotion-${pieceType}`,
+        type: (piece.side === 'black' ? 'B' : 'W') + pieceType,
+        side: piece.side,
+        location,
+      },
+      bounds: grid[locationToString(location)],
+    };
+  });
+
+  const handleSelect = (selected: PieceRecord) => {
+    onSelect({ ...piece, type: selected.type });
+  };
+
+  // TODO(burdon): Circle.
+  return (
+    <div>
+      {positions.map(({ piece, bounds }) => (
+        <div key={piece.id} style={bounds} onClick={() => handleSelect(piece)}>
+          <Piece
+            piece={piece}
+            bounds={bounds}
+            Component={ChessPieces[piece.type as ChessPiece]}
+            classNames={mx('border-2 border-neutral-700 rounded-full', boardStyles.promotion)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/Chessboard/chess.ts

@@ -0,0 +1,213 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ReadonlySignal, signal } from '@preact/signals-core';
+import { Chess, validateFen } from 'chess.js';
+import { type FC, type SVGProps } from 'react';
+
+import { log } from '@dxos/log';
+
+import {
+  type Move,
+  type Location,
+  type PieceMap,
+  locationToString,
+  type PieceType,
+  type BoardModel,
+  type Player,
+} from '../Board';
+import * as Alpha from '../gen/pieces/chess/alpha';
+
+export type ChessPiece = 'BK' | 'BQ' | 'BR' | 'BB' | 'BN' | 'BP' | 'WK' | 'WQ' | 'WR' | 'WB' | 'WN' | 'WP';
+
+export const ChessPieces: Record<ChessPiece, FC<SVGProps<SVGSVGElement>>> = Alpha;
+
+export const posToLocation = (pos: string): Location => {
+  const col = pos.charCodeAt(0) - 'a'.charCodeAt(0);
+  const row = parseInt(pos[1]) - 1;
+  return [row, col];
+};
+
+export const locationToPos = ([row, col]: Location): string => {
+  return String.fromCharCode(col + 'a'.charCodeAt(0)) + (row + 1);
+};
+
+const styles = {
+  neutral: {
+    black: 'bg-neutral-50',
+    white: 'bg-neutral-200',
+    promotion: 'bg-neutral-200 hover:bg-neutral-300 opacity-70 hover:opacity-100',
+  },
+  original: {
+    black: 'bg-[#6C95B9]',
+    white: 'bg-[#CCD3DB]',
+    promotion: 'duration-500 bg-[#CCD3DB] opacity-70 hover:opacity-100',
+  },
+  blue: {
+    black: 'bg-[#608BC1]',
+    white: 'bg-[#CBDCEB]',
+    promotion: 'duration-500 bg-[#CBDCEB] opacity-70 hover:opacity-100',
+  },
+  green: {
+    black: 'bg-[#8EB486]',
+    white: 'bg-[#FDF7F4]',
+    promotion: 'duration-500 bg-[#FDF7F4] opacity-70 hover:opacity-100',
+  },
+};
+
+export const boardStyles = styles.original;
+
+export const getSquareColor = ([row, col]: Location) => {
+  return (col + row) % 2 === 0 ? boardStyles.white : boardStyles.black;
+};
+
+/**
+ * Attempt move.
+ */
+const makeMove = (game: Chess, move: Move): Chess | null => {
+  const from = locationToPos(move.from);
+  const to = locationToPos(move.to);
+  try {
+    log('makeMove', { move });
+    const promotion = move.promotion ? move.promotion[1].toLowerCase() : 'q';
+    game.move({ from, to, promotion }, { strict: false });
+    return game;
+  } catch (err) {
+    // Ignore.
+    return null;
+  }
+};
+
+/**
+ * Chess model.
+ */
+export class ChessModel implements BoardModel<ChessPiece> {
+  private _game!: Chess;
+  private readonly _pieces = signal<PieceMap<ChessPiece>>({});
+
+  constructor(fen?: string) {
+    this.initialize(fen);
+  }
+
+  get turn(): Player {
+    return this._game.turn() === 'w' ? 'white' : 'black';
+  }
+
+  get pieces(): ReadonlySignal<PieceMap<ChessPiece>> {
+    return this._pieces;
+  }
+
+  get game(): Chess {
+    return this._game;
+  }
+
+  get fen(): string {
+    return this._game.fen();
+  }
+
+  initialize(fen?: string) {
+    this._pieces.value = {};
+    this._game = new Chess(fen ? (validateFen(fen).ok ? fen : undefined) : undefined);
+    this._update();
+  }
+
+  isValidMove(move: Move): boolean {
+    return makeMove(new Chess(this._game.fen()), move) !== null;
+  }
+
+  canPromote(move: Move): boolean {
+    const isPawnMove = move.piece === 'BP' || move.piece === 'WP';
+    const isToLastRank = move.to[0] === 0 || move.to[0] === 7;
+    return isPawnMove && isToLastRank;
+  }
+
+  makeMove(move: Move): boolean {
+    const game = makeMove(this._game, move);
+    if (!game) {
+      return false;
+    }
+
+    this._game = game;
+    this._update();
+    return true;
+  }
+
+  makeRandomMove(): boolean {
+    const moves = this._game.moves();
+    if (!moves.length) {
+      return false;
+    }
+
+    const move = moves[Math.floor(Math.random() * moves.length)];
+    this._game.move(move);
+    this._update();
+    return true;
+  }
+
+  /**
+   * Update pieces preserving identity.
+   */
+  private _update() {
+    const pieces: PieceMap<ChessPiece> = {};
+    this._game.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);
+  }
+}
+
+/**
+ * Preserve the original piece objects (and IDs).
+ */
+export const mapPieces = <T extends PieceType>(before: PieceMap<T>, after: PieceMap<T>): PieceMap<T> => {
+  const difference: { added: PieceMap; removed: PieceMap } = {
+    removed: {},
+    added: {},
+  };
+
+  (Object.keys(before) as Array<keyof typeof before>).forEach((square) => {
+    if (after[square]?.type !== before[square]?.type) {
+      difference.removed[square] = before[square];
+    }
+  });
+
+  (Object.keys(after) as Array<keyof typeof after>).forEach((square) => {
+    if (before[square]?.type !== after[square]?.type) {
+      difference.added[square] = after[square];
+    } else {
+      after[square] = before[square];
+    }
+  });
+
+  for (const piece of Object.values(difference.added)) {
+    const previous = Object.values(difference.removed).find((p) => p.type === piece.type);
+    if (previous) {
+      piece.id = previous.id;
+    }
+  }
+
+  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;
+};

package/src/Chessboard/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './chess';
+
+export * from './Chessboard';

package/src/gen/pieces/chess/alpha/bB.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBB = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path fill='#f9f9f9' d='M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z' />
+    <path
+      fill='#101010'
+      d='M768 1365q-5 39-26 82h564q-18-36-26-82zm495-73 46-73q-142-49-285-47-144-2-285 47l46 73q118-40 239-38 120-2 239 38m-432 227H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-207l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60zm146-701h-95v89h95v165h94V907h95v-89h-95V714h-94z'
+    />
+  </svg>
+);
+export default SvgBB;

package/src/gen/pieces/chess/alpha/bK.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBK = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path
+      fill='#f9f9f9'
+      d='m553 1485-55 320 1048 5-48-335s324-313 330-467c7-153-35-331-241-406-183-67-372 121-372 121l-182-161-190 160S658 586 587 592a373 373 0 0 0-362 333c10 331 328 560 328 560'
+    />
+    <path
+      fill='#101010'
+      d='M1024 1769h489l-12-73H547l-12 73zm0-921q-25-60-62-111 31-48 62-65 30 17 62 65-38 51-62 111m-97 454q-154 11-303 58-123-108-200-213t-77-202q0-89 74-159t148-70q67 0 135 63t102 130q30 54 75 175t46 218m-350 217-26 156 145-84zm447-907q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m0 775q-1-126-42-267t-84-227l-14-27-12-23q-28-43-48-69-51-63-120-105t-134-42q-103 0-208 93T257 949q0 120 99 255t249 259q201-74 419-76m0 456H448l61-365q-325-280-326-535-1-159 125-274t267-116q78 0 159 47t142 119q61 74 99 165t49 150q12-60 49-150t99-165q61-72 142-119t159-47q140 0 266 116t126 274q-2 255-326 535l61 365zm97-541q0-97 45-218t76-175q34-68 102-130t135-63q74 0 148 70t74 159q0 96-77 202t-200 213q-150-47-303-58m350 217-119 72 145 84zm-447-132q217 2 419 76 150-125 249-259t99-255q0-136-105-229t-208-93q-66 0-135 42t-119 105q-21 26-48 69l-12 23-14 27q-44 85-85 227t-41 267m-139 159 139 86 139-84-139-86zm92-1248v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95z'
+    />
+  </svg>
+);
+export default SvgBK;

package/src/gen/pieces/chess/alpha/bN.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBN = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path
+      fill='#f9f9f9'
+      d='M1658 1806c-408-301-71-920-452-1343l60-16s296 167 320 257c182 468 41 691 135 1077zM972 523l120 176-312-3zM498 981l-93-41 42-93 127 28z'
+    />
+    <path
+      fill='#101010'
+      d='m502 868-52 1-26 64 69 21 46-55zm536-187q34 1-16-68t-80-42L826 680zm-338-98q6-39 116-107t220-144l115-154 96 217q342 172 433 418t47 603q-18 128 5 236t57 190l-1242 1q-9-178 39-301t183-238q50-11 83-39t53-59l63-1 138-29 139-97 66-207q0-17-8-34t-12-37q-62 228-161 289t-191 58q-236-42-292 60l-56 102-217-121 115-82-51-50-122 86-12-297zm981 1192q-102-130-85-308t27-363-50-351-316-276q220 164 253 342t16 351-12 329 167 276'
+    />
+  </svg>
+);
+export default SvgBN;

package/src/gen/pieces/chess/alpha/bP.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBP = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path
+      fill='#101010'
+      d='M1024 1843H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74z'
+    />
+  </svg>
+);
+export default SvgBP;

package/src/gen/pieces/chess/alpha/bQ.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBQ = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path fill='#f9f9f9' d='m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z' />
+    <path
+      fill='#101010'
+      d='M590 1519q4 72-15 158l134-86zm434 324H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zm0-450q109 0 222 28.5t213 67.5q2-41 11-89-108-42-221.5-68t-224.5-26-225 26-221 68q8 48 11 89 99-39 212-67.5t223-28.5m0 376h478q-15-34-24-73H570q-10 39-24 73zm434-250-119 72 134 86q-20-86-15-158m-573 47 139 87 139-84-139-86z'
+    />
+  </svg>
+);
+export default SvgBQ;

package/src/gen/pieces/chess/alpha/bR.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgBR = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048' {...props}>
+    <path fill='#f9f9f9' d='m674 732-76 807 851 14-75-833z' />
+    <path
+      fill='#101010'
+      d='M1024 1843H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-989h333l-6-88H697l-6 88zm0 647h381l-6-87H649l-6 87z'
+    />
+  </svg>
+);
+export default SvgBR;