@dxos/react-ui-gameboard 0.8.4-main.c1de068 → 0.8.4-main.fd6878d

package/dist/lib/node-esm/index.mjs

@@ -5,22 +5,14 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/Gameboard/context.ts
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var GameboardContext = createContext(void 0);
-var useBoardContext = () => {
-  return useContext(GameboardContext) ?? raise(new Error("Missing BoardContext"));
-};
-
-// src/Gameboard/types.ts
+// src/components/Gameboard/types.ts
 var locationToString = (location) => location.join("-");
 var stringToLocation = (str) => str.split("-").map(Number);
 var isPiece = (piece) => piece != null && typeof piece === "object" && "id" in piece && "type" in piece && "location" in piece && isLocation(piece.location);
 var isLocation = (token) => Array.isArray(token) && token.length === 2 && token.every((val) => typeof val === "number");
 var isEqualLocation = (l1, l2) => l1[0] === l2[0] && l1[1] === l2[1];
 
-// src/Gameboard/util.ts
+// src/components/Gameboard/util.ts
 var getRelativeBounds = (container, element) => {
   const containerRect = container.getBoundingClientRect();
   const elementRect = element.getBoundingClientRect();
@@ -32,133 +24,170 @@ var getRelativeBounds = (container, element) => {
   };
 };
 
-// src/Gameboard/Gameboard.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+// src/components/Gameboard/Gameboard.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import React, { forwardRef, useCallback, useEffect, useState } from "react";
+import { createContext } from "@radix-ui/react-context";
+import React3, { forwardRef, useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+import { log as log3 } from "@dxos/log";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+
+// src/components/Gameboard/Piece.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+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, { memo, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
+import { useDynamicRef, useTrackProps } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/Gameboard/Gameboard.tsx";
-var GameboardRoot = ({ children, model, onDrop }) => {
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Piece.tsx";
+var Piece = /* @__PURE__ */ memo(({ classNames, Component, piece, orientation, bounds, label, onClick }) => {
   var _effect = _useSignals();
   try {
+    useTrackProps({
+      classNames,
+      Component,
+      piece,
+      orientation,
+      bounds,
+      label
+    }, Piece.displayName, false);
+    const { model, dragging: isDragging, promoting } = useGameboardContext(Piece.displayName);
+    const promotingRef = useDynamicRef(promoting);
     const [dragging, setDragging] = useState(false);
-    const [promoting, setPromoting] = useState();
-    const onPromotion = useCallback((move) => {
-      log("onPromotion", {
-        move
-      }, {
+    const [preview, setPreview] = useState();
+    const [current, setCurrent] = useState({});
+    const ref = useRef(null);
+    useEffect(() => {
+      const el = ref.current;
+      invariant(el, void 0, {
         F: __dxlog_file,
-        L: 29,
+        L: 42,
         S: void 0,
-        C: (f, a) => f(...a)
+        A: [
+          "el",
+          ""
+        ]
       });
-      setPromoting(void 0);
-      onDrop?.(move);
-    }, []);
-    useEffect(() => {
-      if (!model) {
-        return;
-      }
-      return monitorForElements({
-        onDragStart: ({ source }) => {
-          log("onDragStart", {
-            source
+      return draggable({
+        element: el,
+        getInitialData: () => ({
+          piece
+        }),
+        onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
+          log("onGenerateDragPreview", {
+            source: source.data
           }, {
             F: __dxlog_file,
-            L: 42,
+            L: 48,
             S: void 0,
             C: (f, a) => f(...a)
           });
-          setDragging(true);
-        },
-        onDrop: ({ source, location }) => {
-          log("onDrop", {
-            source,
-            location
-          }, {
-            F: __dxlog_file,
-            L: 46,
-            S: void 0,
-            C: (f, a) => f(...a)
+          setCustomNativeDragPreview({
+            getOffset: centerUnderPointer,
+            render: ({ container }) => {
+              setPreview(container);
+              const { width, height } = el.getBoundingClientRect();
+              container.style.width = width + "px";
+              container.style.height = height + "px";
+              return () => {
+                setPreview(void 0);
+              };
+            },
+            nativeSetDragImage
           });
-          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 = {
-            from: piece.location,
-            to: targetLocation,
-            piece: piece.type
-          };
-          if (model.canPromote?.(move)) {
-            setPromoting({
-              ...piece,
-              location: targetLocation
-            });
-          } else {
-            onDrop?.(move);
+        },
+        canDrag: () => !promotingRef.current && model?.turn === piece.side,
+        onDragStart: () => setDragging(true),
+        onDrop: ({ location: { current: current2 } }) => {
+          try {
+            const location = current2.dropTargets[0]?.data.location;
+            if (isLocation(location)) {
+              setCurrent((current3) => ({
+                ...current3,
+                location
+              }));
+            }
+          } catch {
           }
           setDragging(false);
         }
       });
     }, [
-      model
+      model,
+      piece
     ]);
-    return /* @__PURE__ */ React.createElement(GameboardContext.Provider, {
-      value: {
-        model,
-        dragging,
-        promoting,
-        onPromotion
-      }
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-GameboardRoot.displayName = "Gameboard.Root";
-var GameboardContent = /* @__PURE__ */ forwardRef(({ children, classNames, style }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: forwardedRef,
-      style,
-      className: "flex w-full h-full justify-center overflow-hidden"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: mx("max-w-full max-h-full content-center aspect-square", classNames)
-    }, children));
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        if (!ref.current || !bounds) {
+          return;
+        }
+        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 /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+      ref,
+      style: {
+        width: bounds?.width,
+        height: bounds?.height
+      },
+      className: mx("absolute", classNames, dragging && "opacity-20", isDragging && "pointer-events-none"),
+      onClick
+    }, /* @__PURE__ */ React.createElement(Component, {
+      className: "grow"
+    }), label && /* @__PURE__ */ React.createElement("div", {
+      className: "absolute inset-1 text-xs text-black"
+    }, label)), preview && /* @__PURE__ */ createPortal(/* @__PURE__ */ React.createElement("div", {
+      className: mx(classNames)
+    }, /* @__PURE__ */ React.createElement(Component, {
+      className: "grow"
+    })), preview));
   } finally {
     _effect.f();
   }
 });
-var Gameboard = {
-  Root: GameboardRoot,
-  Content: GameboardContent
-};
+Piece.displayName = "Piece";
 
-// src/Gameboard/Square.tsx
+// src/components/Gameboard/Square.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import React2, { useRef, useState as useState2, useEffect as useEffect2, memo } from "react";
-import { invariant } from "@dxos/invariant";
+import React2, { memo as memo2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { log as log2 } from "@dxos/log";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/Gameboard/Square.tsx";
-var Square = /* @__PURE__ */ memo(({ location, bounds, label, classNames }) => {
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Square.tsx";
+var Square = /* @__PURE__ */ memo2(({ location, bounds, label, classNames }) => {
   var _effect = _useSignals2();
   try {
-    const ref = useRef(null);
+    const ref = useRef2(null);
     const [state, setState] = useState2("idle");
-    const { model } = useBoardContext();
+    const { model } = useGameboardContext(Square.displayName);
     useEffect2(() => {
       const el = ref.current;
-      invariant(el, void 0, {
+      invariant2(el, void 0, {
         F: __dxlog_file2,
         L: 32,
         S: void 0,
@@ -226,155 +255,121 @@ var Square = /* @__PURE__ */ memo(({ location, bounds, label, classNames }) => {
 });
 Square.displayName = "Square";
 
-// src/Gameboard/Piece.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-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 React3, { useState as useState3, useRef as useRef2, useEffect as useEffect3, memo as memo2 } from "react";
-import { createPortal } from "react-dom";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log3 } from "@dxos/log";
-import { useDynamicRef, useTrackProps } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/Gameboard/Piece.tsx";
-var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, label, Component }) => {
+// src/components/Gameboard/Gameboard.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Gameboard.tsx";
+var [GameboardContextProvider, useRadixGameboardContext] = createContext("Gameboard");
+var useGameboardContext = (consumerName) => {
+  return useRadixGameboardContext(consumerName);
+};
+var GameboardRoot = ({ children, model, onDrop }) => {
   var _effect = _useSignals3();
   try {
-    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] = useState3(false);
-    const [preview, setPreview] = useState3();
-    const [current, setCurrent] = useState3({});
-    const ref = useRef2(null);
-    useEffect3(() => {
-      const el = ref.current;
-      invariant2(el, void 0, {
+    const [promoting, setPromoting] = useState3();
+    const handlePromotion = useCallback((move) => {
+      log3("onPromotion", {
+        move
+      }, {
         F: __dxlog_file3,
-        L: 44,
+        L: 47,
         S: void 0,
-        A: [
-          "el",
-          ""
-        ]
+        C: (f, a) => f(...a)
       });
-      return draggable({
-        element: el,
-        getInitialData: () => ({
-          piece
-        }),
-        onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
-          log3("onGenerateDragPreview", {
-            source: source.data
+      setPromoting(void 0);
+      onDrop?.(move);
+    }, []);
+    useEffect3(() => {
+      if (!model) {
+        return;
+      }
+      return monitorForElements({
+        onDragStart: ({ source }) => {
+          log3("onDragStart", {
+            source
           }, {
             F: __dxlog_file3,
-            L: 50,
+            L: 60,
             S: void 0,
             C: (f, a) => f(...a)
           });
-          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(void 0);
-              };
-            },
-            nativeSetDragImage
-          });
+          setDragging(true);
         },
-        canDrag: () => !promotingRef.current && model?.turn === piece.side,
-        onDragStart: () => setDragging(true),
-        onDrop: ({ location: { current: current2 } }) => {
-          const location = current2.dropTargets[0].data.location;
-          if (isLocation(location)) {
-            setCurrent((current3) => ({
-              ...current3,
-              location
-            }));
+        onDrop: ({ source, location }) => {
+          log3("onDrop", {
+            source,
+            location
+          }, {
+            F: __dxlog_file3,
+            L: 64,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          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 = {
+            from: piece.location,
+            to: targetLocation,
+            piece: piece.type
+          };
+          if (model.isValidMove(move)) {
+            if (model.canPromote?.(move)) {
+              setPromoting({
+                ...piece,
+                location: targetLocation
+              });
+            } else {
+              onDrop?.(move);
+            }
           }
           setDragging(false);
         }
       });
     }, [
-      model,
-      piece
-    ]);
-    useEffect3(() => {
-      requestAnimationFrame(() => {
-        if (!ref.current || !bounds) {
-          return;
-        }
-        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
+      model
     ]);
-    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", {
-      ref,
-      style: {
-        width: bounds?.width,
-        height: bounds?.height
-      },
-      className: mx3(
-        "absolute",
-        classNames,
-        // orientation === 'black' && '_rotate-180',
-        dragging && "opacity-20",
-        isDragging && "pointer-events-none"
-      )
-    }, /* @__PURE__ */ React3.createElement(Component, {
-      className: "grow"
-    }), label && /* @__PURE__ */ React3.createElement("div", {
-      className: "absolute inset-1 text-xs text-black"
-    }, label)), preview && /* @__PURE__ */ createPortal(/* @__PURE__ */ React3.createElement("div", {
-      className: mx3(classNames)
-    }, /* @__PURE__ */ React3.createElement(Component, {
-      className: "grow"
-    })), preview));
+    return /* @__PURE__ */ React3.createElement(GameboardContextProvider, {
+      model,
+      dragging,
+      promoting,
+      onPromotion: handlePromotion
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+GameboardRoot.displayName = "Gameboard.Root";
+var GameboardContent = /* @__PURE__ */ forwardRef(({ children, classNames, grow, contain }, forwardedRef) => {
+  var _effect = _useSignals3();
+  try {
+    return /* @__PURE__ */ React3.createElement("div", {
+      role: "none",
+      className: mx3(grow && "grid is-full bs-full size-container place-content-center", classNames),
+      ref: forwardedRef
+    }, contain ? /* @__PURE__ */ React3.createElement("div", {
+      className: "is-[min(100cqw,100cqh)] bs-[min(100cqw,100cqh)]"
+    }, children) : children);
   } finally {
     _effect.f();
   }
 });
-Piece.displayName = "Piece";
+GameboardContent.displayName = "Gameboard.Content";
+var Gameboard = {
+  Root: GameboardRoot,
+  Content: GameboardContent,
+  Piece,
+  Square
+};
 
-// src/Chessboard/chess.ts
+// src/components/Chessboard/chess.ts
 import { signal } from "@preact/signals-core";
-import { Chess, validateFen } from "chess.js";
+import { Chess as ChessJS } from "chess.js";
 import { log as log4 } from "@dxos/log";
 
 // src/gen/pieces/chess/alpha/index.ts
@@ -667,8 +662,8 @@ var SvgWR = (props) => {
 };
 var wR_default = SvgWR;
 
-// src/Chessboard/chess.ts
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/Chessboard/chess.ts";
+// src/components/Chessboard/chess.ts
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Chessboard/chess.ts";
 var ChessPieces = alpha_exports;
 var posToLocation = (pos) => {
   const col = pos.charCodeAt(0) - "a".charCodeAt(0);
@@ -707,55 +702,88 @@ var boardStyles = styles.original;
 var getSquareColor = ([row, col]) => {
   return (col + row) % 2 === 0 ? boardStyles.black : boardStyles.white;
 };
-var makeMove = (game, move) => {
+var createChess = (pgn) => {
+  const chess = new ChessJS();
+  if (pgn) {
+    try {
+      chess.loadPgn(pgn);
+    } catch {
+      log4.warn(pgn, void 0, {
+        F: __dxlog_file4,
+        L: 71,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
+  }
+  return chess;
+};
+var tryMove = (chess, move) => {
   const from = locationToPos(move.from);
   const to = locationToPos(move.to);
   try {
-    log4("makeMove", {
-      move
-    }, {
-      F: __dxlog_file4,
-      L: 72,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
     const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
-    game.move({
+    chess.move({
       from,
       to,
       promotion
     }, {
       strict: false
     });
-    return game;
-  } catch (err) {
+    return chess;
+  } catch {
     return null;
   }
 };
 var ChessModel = class {
-  constructor(fen) {
-    this._pieces = signal({});
-    this.initialize(fen);
+  _chess = new ChessJS();
+  _pieces = signal({});
+  constructor(pgn) {
+    this.update(pgn);
   }
   get turn() {
-    return this._game.turn() === "w" ? "white" : "black";
+    return this._chess.turn() === "w" ? "white" : "black";
   }
   get pieces() {
     return this._pieces;
   }
   get game() {
-    return this._game;
+    return this._chess;
+  }
+  /**
+  * PGN with headers.
+  *
+  * [Event "?"]
+  * [Site "?"]
+  * [Date "2025.08.05"]
+  * [Round "?"]
+  * [White "?"]
+  * [Black "?"]
+  * [Result "*"]
+  */
+  // TODO(burdon): Update headers.
+  get pgn() {
+    return this._chess.pgn();
   }
   get fen() {
-    return this._game.fen();
+    return this._chess.fen();
   }
-  initialize(fen) {
-    this._pieces.value = {};
-    this._game = new Chess(fen ? validateFen(fen).ok ? fen : void 0 : void 0);
+  update(pgn = "") {
+    const previous = this._chess.history();
+    try {
+      this._chess.loadPgn(pgn);
+      this._chess.setHeader("Date", createDate());
+      this._chess.setHeader("Site", "dxos.org");
+    } catch {
+    }
+    const current = this._chess.history();
+    if (!isValidNextMove(previous, current)) {
+      this._pieces.value = {};
+    }
     this._update();
   }
   isValidMove(move) {
-    return makeMove(new Chess(this._game.fen()), move) !== null;
+    return tryMove(new ChessJS(this._chess.fen()), move) !== null;
   }
   canPromote(move) {
     const isPawnMove = move.piece === "BP" || move.piece === "WP";
@@ -763,21 +791,20 @@ var ChessModel = class {
     return isPawnMove && isToLastRank;
   }
   makeMove(move) {
-    const game = makeMove(this._game, move);
+    const game = tryMove(this._chess, move);
     if (!game) {
       return false;
     }
-    this._game = game;
     this._update();
     return true;
   }
   makeRandomMove() {
-    const moves = this._game.moves();
+    const moves = this._chess.moves();
     if (!moves.length) {
       return false;
     }
     const move = moves[Math.floor(Math.random() * moves.length)];
-    this._game.move(move);
+    this._chess.move(move);
     this._update();
     return true;
   }
@@ -786,7 +813,7 @@ var ChessModel = class {
   */
   _update() {
     const pieces = {};
-    this._game.board().flatMap((row) => row.forEach((record) => {
+    this._chess.board().flatMap((row) => row.forEach((record) => {
       if (!record) {
         return;
       }
@@ -803,6 +830,17 @@ var ChessModel = class {
     this._pieces.value = mapPieces(this._pieces.value, pieces);
   }
 };
+var isValidNextMove = (previous, current) => {
+  if (current.length > previous.length + 1) {
+    return false;
+  }
+  for (let i = 0; i < previous.length; i++) {
+    if (previous[i] !== current[i]) {
+      return false;
+    }
+  }
+  return true;
+};
 var mapPieces = (before, after) => {
   const difference = {
     removed: {},
@@ -833,16 +871,17 @@ var mapPieces = (before, after) => {
     added: Object.keys(difference.added).length
   }, {
     F: __dxlog_file4,
-    L: 205,
+    L: 263,
     S: void 0,
     C: (f, a) => f(...a)
   });
   return after;
 };
+var createDate = (date = /* @__PURE__ */ new Date()) => date.toISOString().slice(0, 10).replace(/-/g, ".");
 
-// src/Chessboard/Chessboard.tsx
+// src/components/Chessboard/Chessboard.tsx
 import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
-import React16, { useRef as useRef3, useMemo, useEffect as useEffect4, useState as useState4, memo as memo3 } from "react";
+import React16, { memo as memo3, useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState4 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useTrackProps as useTrackProps2 } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
@@ -858,7 +897,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     const { ref: containerRef, width, height } = useResizeDetector({
       refreshRate: 200
     });
-    const { model, promoting, onPromotion } = useBoardContext();
+    const { model, promoting, onPromotion } = useGameboardContext(Chessboard.displayName);
     const locations = useMemo(() => {
       return Array.from({
         length: rows
@@ -924,7 +963,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
     }, /* @__PURE__ */ React16.createElement("div", {
       ref: gridRef,
       className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
-    }, layout), /* @__PURE__ */ React16.createElement("div", null, locations.map((location) => /* @__PURE__ */ React16.createElement(Square, {
+    }, layout), /* @__PURE__ */ React16.createElement("div", null, locations.map((location) => /* @__PURE__ */ React16.createElement(Gameboard.Square, {
       key: locationToString(location),
       location,
       label: showLabels ? locationToPos(location) : void 0,
@@ -932,14 +971,14 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
       classNames: getSquareColor(location)
     }))), /* @__PURE__ */ React16.createElement("div", {
       className: mx4(promoting && "opacity-50")
-    }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React16.createElement(Piece, {
+    }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
       key: piece.id,
       piece,
       bounds,
       label: debug ? piece.id : void 0,
       orientation,
       Component: ChessPieces[piece.type]
-    }))), /* @__PURE__ */ React16.createElement("div", null, promoting && /* @__PURE__ */ React16.createElement(PromotionSelector, {
+    }))), promoting && /* @__PURE__ */ React16.createElement(PromotionSelector, {
       grid,
       piece: promoting,
       onSelect: (piece) => {
@@ -950,7 +989,7 @@ var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows =
           promotion: piece.type
         });
       }
-    })));
+    }));
   } finally {
     _effect.f();
   }
@@ -988,16 +1027,14 @@ var PromotionSelector = ({ grid, piece, onSelect }) => {
         type: selected.type
       });
     };
-    return /* @__PURE__ */ React16.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React16.createElement("div", {
+    return /* @__PURE__ */ React16.createElement(React16.Fragment, null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React16.createElement(Gameboard.Piece, {
       key: piece2.id,
-      style: bounds,
-      onClick: () => handleSelect(piece2)
-    }, /* @__PURE__ */ React16.createElement(Piece, {
       piece: piece2,
       bounds,
       Component: ChessPieces[piece2.type],
-      classNames: mx4("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
-    }))));
+      classNames: mx4("border-2 border-neutral-700 rounded-full", boardStyles.promotion),
+      onClick: () => handleSelect(piece2)
+    })));
   } finally {
     _effect.f();
   }
@@ -1007,10 +1044,8 @@ export {
   ChessPieces,
   Chessboard,
   Gameboard,
-  GameboardContext,
-  Piece,
-  Square,
   boardStyles,
+  createChess,
   getRelativeBounds,
   getSquareColor,
   isEqualLocation,
@@ -1021,6 +1056,6 @@ export {
   mapPieces,
   posToLocation,
   stringToLocation,
-  useBoardContext
+  useGameboardContext
 };
 //# sourceMappingURL=index.mjs.map