gigaboard 1.5.0 → 1.5.2

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, RefObject, ReactNode } from 'react';
+import react, { CSSProperties, RefObject, ReactNode } from 'react';
 import { S as SquareIndex, u as BoardCell, v as BoardModel, x as BoardSnapshot, w as BoardModelOptions, P as PackedMove } from './board-model-BIVxSCWC.cjs';
 export { D as Color, E as EngineAdapter, W as NULL_MOVE_SAN, X as NULL_MOVE_SANS, Y as NULL_MOVE_UCI, Z as NULL_MOVE_WORD, a as PieceType, a1 as ZobristKey, a2 as createBoardModel, a8 as isNullMove, a9 as isNullMoveSan, aa as isNullMoveUci, ac as packMove, ae as unpackMove } from './board-model-BIVxSCWC.cjs';
 import { O as Orientation, T as Theme, P as PieceRenderer, C as ChessboardProps, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions } from './types-Dox7oLof.cjs';
@@ -41,14 +41,20 @@ interface BoardEditorProps {
     focusedSquare?: SquareIndex;
     /** Square focus callback. */
     onSquareFocus?: (square: SquareIndex, cell: BoardCell, algebraic: string) => void;
+    /** Optional container element id. */
+    id?: string;
     /** Clear board callback. */
     onClear?: () => void;
     /** Set starting position callback. */
     onSetStartingPosition?: () => void;
     /** Toggle side to move callback. */
     onToggleSideToMove?: () => void;
+    /** Callback when editor receives container focus. */
+    onFocus?: (e: react.FocusEvent<HTMLDivElement>) => void;
+    /** Callback when editor loses container focus. */
+    onBlur?: (e: react.FocusEvent<HTMLDivElement>) => void;
 }
-declare function BoardEditor({ fen, onChange, onPieceChange, selectedPiece, onSelectPiece, orientation, theme, pieces, showCoordinates, style, className, ariaLabel, onAnnounce, getSquareAriaLabel, focusedSquare: propFocusedSquare, onSquareFocus, onClear, onSetStartingPosition, onToggleSideToMove, }: BoardEditorProps): react_jsx_runtime.JSX.Element;
+declare function BoardEditor({ fen, onChange, onPieceChange, selectedPiece, onSelectPiece, orientation, theme, pieces, showCoordinates, style, className, ariaLabel, onAnnounce, getSquareAriaLabel, focusedSquare: propFocusedSquare, onSquareFocus, id, onClear, onSetStartingPosition, onToggleSideToMove, onFocus, onBlur, }: BoardEditorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Interactive chess board.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties, RefObject, ReactNode } from 'react';
+import react, { CSSProperties, RefObject, ReactNode } from 'react';
 import { S as SquareIndex, u as BoardCell, v as BoardModel, x as BoardSnapshot, w as BoardModelOptions, P as PackedMove } from './board-model-BIVxSCWC.js';
 export { D as Color, E as EngineAdapter, W as NULL_MOVE_SAN, X as NULL_MOVE_SANS, Y as NULL_MOVE_UCI, Z as NULL_MOVE_WORD, a as PieceType, a1 as ZobristKey, a2 as createBoardModel, a8 as isNullMove, a9 as isNullMoveSan, aa as isNullMoveUci, ac as packMove, ae as unpackMove } from './board-model-BIVxSCWC.js';
 import { O as Orientation, T as Theme, P as PieceRenderer, C as ChessboardProps, A as AnimationOptions, R as ResolvedArrowPalette, U as UseChessGameOptions } from './types-4W8ULiE2.js';
@@ -41,14 +41,20 @@ interface BoardEditorProps {
     focusedSquare?: SquareIndex;
     /** Square focus callback. */
     onSquareFocus?: (square: SquareIndex, cell: BoardCell, algebraic: string) => void;
+    /** Optional container element id. */
+    id?: string;
     /** Clear board callback. */
     onClear?: () => void;
     /** Set starting position callback. */
     onSetStartingPosition?: () => void;
     /** Toggle side to move callback. */
     onToggleSideToMove?: () => void;
+    /** Callback when editor receives container focus. */
+    onFocus?: (e: react.FocusEvent<HTMLDivElement>) => void;
+    /** Callback when editor loses container focus. */
+    onBlur?: (e: react.FocusEvent<HTMLDivElement>) => void;
 }
-declare function BoardEditor({ fen, onChange, onPieceChange, selectedPiece, onSelectPiece, orientation, theme, pieces, showCoordinates, style, className, ariaLabel, onAnnounce, getSquareAriaLabel, focusedSquare: propFocusedSquare, onSquareFocus, onClear, onSetStartingPosition, onToggleSideToMove, }: BoardEditorProps): react_jsx_runtime.JSX.Element;
+declare function BoardEditor({ fen, onChange, onPieceChange, selectedPiece, onSelectPiece, orientation, theme, pieces, showCoordinates, style, className, ariaLabel, onAnnounce, getSquareAriaLabel, focusedSquare: propFocusedSquare, onSquareFocus, id, onClear, onSetStartingPosition, onToggleSideToMove, onFocus, onBlur, }: BoardEditorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Interactive chess board.

package/dist/index.js

@@ -346,9 +346,12 @@ function BoardEditor({
   getSquareAriaLabel,
   focusedSquare: propFocusedSquare,
   onSquareFocus,
+  id,
   onClear,
   onSetStartingPosition,
-  onToggleSideToMove
+  onToggleSideToMove,
+  onFocus,
+  onBlur
 }) {
   const containerRef = useRef(null);
   const liveRegionRef = useRef(null);
@@ -634,6 +637,7 @@ function BoardEditor({
     "div",
     {
       ref: containerRef,
+      id,
       role: "application",
       tabIndex: 0,
       "aria-label": ariaLabel,
@@ -644,8 +648,14 @@ function BoardEditor({
           setHasKeyboardFocus(true);
           announceSquare(focusedSquare);
         }
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (e.target === e.currentTarget) {
+          setHasKeyboardFocus(false);
+        }
+        onBlur?.(e);
       },
-      onBlur: () => setHasKeyboardFocus(false),
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       onPointerUp: handlePointerUp,
@@ -727,6 +737,39 @@ function BoardEditor({
             })
           }
         ),
+        hasKeyboardFocus && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gridTemplateRows: "repeat(8, 1fr)",
+              pointerEvents: "none",
+              zIndex: 10
+            },
+            children: (() => {
+              const { col, row } = gridCoord(focusedSquare, orientation);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-gb-editor-focus-square": algebraicOf2(focusedSquare),
+                  style: {
+                    gridColumnStart: col,
+                    gridRowStart: row,
+                    outline: "3px solid var(--gb-editor-sq-focus, #f59e0b)",
+                    outlineOffset: "-3px",
+                    boxShadow: "inset 0 0 0 1.5px rgba(0, 0, 0, 0.75), 0 0 8px rgba(245, 158, 11, 0.7)",
+                    borderRadius: "2px",
+                    pointerEvents: "none"
+                  }
+                }
+              );
+            })()
+          }
+        ),
         dragging && containerRef.current ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -3087,16 +3130,19 @@ function injectSelectionStyles() {
   background: var(--gb-selected);
 }
 [data-gb-square][data-gb-selection="legal-quiet"]::before {
-  background-image: radial-gradient(var(--gb-legal-target) 22%, transparent 24%);
+  background-image: radial-gradient(var(--gb-legal-target) 19%, transparent 21%);
 }
 [data-gb-square][data-gb-selection="legal-capture"]::before {
-  background-image: radial-gradient(transparent 0 75%, var(--gb-legal-target-capture) 77% 83%, transparent 85%);
+  background-image: radial-gradient(transparent 0 78%, var(--gb-legal-target-capture) 80%);
+}
+[data-gb-target-style="rings"] [data-gb-square][data-gb-selection="legal-capture"]::before {
+  background-image: radial-gradient(transparent 0 70%, var(--gb-legal-target-capture) 72% 84%, transparent 86%);
 }
 [data-gb-target-style="dots"] [data-gb-square][data-gb-selection="legal-quiet"]::before {
-  background-image: radial-gradient(var(--gb-legal-target) 14%, transparent 16%);
+  background-image: radial-gradient(var(--gb-legal-target) 19%, transparent 21%);
 }
 [data-gb-target-style="dots"] [data-gb-square][data-gb-selection="legal-capture"]::before {
-  background-image: radial-gradient(var(--gb-legal-target-capture) 20%, transparent 22%);
+  background-image: radial-gradient(transparent 0 78%, var(--gb-legal-target-capture) 80%);
 }
 `;
   document.head.appendChild(style);