gigaboard 1.4.2 → 1.5.1

package/dist/index.js

@@ -1,13 +1,71 @@
-import { PieceType, Color, createDragController, createGigachessAdapter, createBoardModel, isEmptyCell, pieceTypeOf, colorOf, encodeBoardCell, decodePackedMove } from './chunk-SO6AOEFF.js';
-export { Color, PieceType, createBoardModel, createGigachessAdapter, packMove, preloadGigachessAdapter, unpackMove } from './chunk-SO6AOEFF.js';
-import { CSS_VARS, defaultTheme, defaultPieces, parseFenPlacement, defaultArrowColors, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT } from './chunk-EJUGH25P.js';
-export { CSS_VARS, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT, defaultArrowColors, defaultPieces, defaultTheme } from './chunk-EJUGH25P.js';
+import { PieceType, Color, createDragController, createGigachessAdapter, createBoardModel, BOARD_CELL_BK, BOARD_CELL_BQ, BOARD_CELL_BR, BOARD_CELL_BB, BOARD_CELL_BN, BOARD_CELL_BP, BOARD_CELL_WK, BOARD_CELL_WQ, BOARD_CELL_WR, BOARD_CELL_WB, BOARD_CELL_WN, BOARD_CELL_WP, isEmptyCell, pieceTypeOf, colorOf, encodeBoardCell, isNullMove, decodePackedMove, isNullMoveUci } from './chunk-6F3FZAG7.js';
+export { Color, NULL_MOVE_SAN, NULL_MOVE_SANS, NULL_MOVE_UCI, NULL_MOVE_WORD, PieceType, createBoardModel, createGigachessAdapter, isNullMove, isNullMoveSan, isNullMoveUci, packMove, preloadGigachessAdapter, unpackMove } from './chunk-6F3FZAG7.js';
+import { CSS_VARS, parseFenPlacement, STARTING_FEN, defaultTheme, defaultPieces, defaultArrowColors, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT } from './chunk-53XWDREK.js';
+export { CSS_VARS, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT, defaultArrowColors, defaultPieces, defaultTheme } from './chunk-53XWDREK.js';
 import './chunk-OQLY5GJF.js';
 import './chunk-U6WAD322.js';
 import './chunk-44YKPXXT.js';
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle, useLayoutEffect, useEffect, useCallback, useSyncExternalStore, useState } from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+var FILE_LETTERS = ["a", "b", "c", "d", "e", "f", "g", "h"];
+function Coordinates({ orientation, ranksPosition = "left" }) {
+  const ranksOnRight = ranksPosition === "right";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        fontSize: "min(1.6vmin, 11px)",
+        fontWeight: 600,
+        fontFamily: "system-ui, -apple-system, sans-serif"
+      },
+      children: [
+        FILE_LETTERS.map((letter, idx) => {
+          const col = orientation === "white" ? idx : 7 - idx;
+          const bottomRank = orientation === "white" ? 0 : 7;
+          const isLightSquare = (col + bottomRank) % 2 === 1;
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                left: `${col * 12.5 + 10}%`,
+                bottom: "1%",
+                color: `var(${isLightSquare ? CSS_VARS.COORDINATE_LIGHT : CSS_VARS.COORDINATE_DARK})`
+              },
+              children: letter
+            },
+            `file-${letter}`
+          );
+        }),
+        FILE_LETTERS.map((_, idx) => {
+          const rank = idx;
+          const row = orientation === "white" ? 7 - rank : rank;
+          const edgeFile = ranksOnRight ? orientation === "white" ? 7 : 0 : orientation === "white" ? 0 : 7;
+          const isLightSquare = (edgeFile + rank) % 2 === 1;
+          const sideStyle = ranksOnRight ? { right: "1%" } : { left: "1%" };
+          return /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: `${row * 12.5 + 1}%`,
+                ...sideStyle,
+                color: `var(${isLightSquare ? CSS_VARS.COORDINATE_LIGHT : CSS_VARS.COORDINATE_DARK})`
+              },
+              children: rank + 1
+            },
+            `rank-${rank}`
+          );
+        })
+      ]
+    }
+  );
+}
 function useBoardSnapshot(model) {
   return useSyncExternalStore(model.subscribe, model.getSnapshot, model.getSnapshot);
 }
@@ -21,12 +79,738 @@ function useSquareCell(model, index) {
     },
     [model, index]
   );
-  const getSnapshot = useCallback(() => {
-    if (!model) return 0;
-    const snap = model.getSnapshot();
-    return snap.board[index] ?? 0;
-  }, [model, index]);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = useCallback(() => {
+    if (!model) return 0;
+    const snap = model.getSnapshot();
+    return snap.board[index] ?? 0;
+  }, [model, index]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function gridCoord(index, orientation) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const col = orientation === "white" ? file + 1 : 8 - file;
+  const row = orientation === "white" ? 8 - rank : rank + 1;
+  return { col, row };
+}
+function algebraicOf(index) {
+  const file = index & 7;
+  const rank = index >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+var SLOT_BASE_STYLE = Object.freeze({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  containerType: "size"
+});
+function PieceSlotImpl({ index, model, orientation, pieces }) {
+  const cell = useSquareCell(model, index);
+  if (cell === 0) return null;
+  const { col, row } = gridCoord(index, orientation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-piece-square": algebraicOf(index),
+      "data-piece-cell": cell,
+      style: {
+        ...SLOT_BASE_STYLE,
+        gridColumnStart: col,
+        gridRowStart: row,
+        filter: `var(${cell <= 6 ? CSS_VARS.PIECE_FILTER_WHITE : CSS_VARS.PIECE_FILTER_BLACK}, none)`
+      },
+      children: pieces({ cell, square: index })
+    }
+  );
+}
+var PieceSlot = memo(PieceSlotImpl);
+PieceSlot.displayName = "PieceSlot";
+var CONTAINER_STYLE = Object.freeze({
+  position: "absolute",
+  inset: 0,
+  display: "grid",
+  gridTemplateColumns: "repeat(8, 1fr)",
+  gridTemplateRows: "repeat(8, 1fr)",
+  pointerEvents: "none"
+});
+var PieceLayer = memo(function PieceLayer2({
+  model,
+  orientation,
+  pieces
+}) {
+  const slots = [];
+  for (let i = 0; i < 64; i++) {
+    slots.push(
+      /* @__PURE__ */ jsx(
+        PieceSlot,
+        {
+          index: i,
+          model,
+          orientation,
+          pieces
+        },
+        i
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: CONTAINER_STYLE, children: slots });
+});
+
+// src/lib/geometry.ts
+function getSquareAtPoint(container, clientX, clientY, orientation) {
+  const rect = container.getBoundingClientRect();
+  const relX = clientX - rect.left;
+  const relY = clientY - rect.top;
+  if (relX < 0 || relY < 0 || relX >= rect.width || relY >= rect.height) return null;
+  const col = Math.floor(relX / rect.width * 8);
+  const row = Math.floor(relY / rect.height * 8);
+  const file = orientation === "white" ? col : 7 - col;
+  const rank = orientation === "white" ? 7 - row : row;
+  return rank * 8 + file;
+}
+function getPointAtSquareCentre(container, square, orientation) {
+  const rect = container.getBoundingClientRect();
+  const sqW = rect.width / 8;
+  const sqH = rect.height / 8;
+  const file = square & 7;
+  const rank = square >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return {
+    x: rect.left + sqW * col + sqW / 2,
+    y: rect.top + sqH * row + sqH / 2
+  };
+}
+function algebraicOf2(square) {
+  const file = square & 7;
+  const rank = square >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+function squareOf(algebraic) {
+  if (algebraic.length !== 2) return null;
+  const file = algebraic.charCodeAt(0) - 97;
+  const rank = algebraic.charCodeAt(1) - 49;
+  if (file < 0 || file > 7 || rank < 0 || rank > 7) return null;
+  return rank << 3 | file;
+}
+var PIECE_CHARS = ["", "P", "N", "B", "R", "Q", "K", "p", "n", "b", "r", "q", "k"];
+function formatFenPlacement(board) {
+  const rows = [];
+  for (let r = 7; r >= 0; r--) {
+    let empty = 0;
+    let row = "";
+    for (let f = 0; f < 8; f++) {
+      const cell = board[r * 8 + f] ?? 0;
+      if (cell === 0) {
+        empty++;
+      } else {
+        if (empty > 0) {
+          row += String(empty);
+          empty = 0;
+        }
+        row += PIECE_CHARS[cell] ?? "";
+      }
+    }
+    if (empty > 0) {
+      row += String(empty);
+    }
+    rows.push(row);
+  }
+  return rows.join("/");
+}
+function updateFenPlacement(originalFen, newPlacement) {
+  const tokens = originalFen.trim().split(/\s+/);
+  if (tokens.length <= 1) {
+    return newPlacement;
+  }
+  tokens[0] = newPlacement;
+  return tokens.join(" ");
+}
+function pieceNameFromCell(cell) {
+  if (cell === 0) return "empty";
+  const color = cell > 6 ? "black" : "white";
+  const type = (cell - 1) % 6;
+  const names = ["pawn", "knight", "bishop", "rook", "queen", "king"];
+  return `${color} ${names[type] ?? "piece"}`;
+}
+function defaultSquareLabel(square, cell) {
+  const sq = algebraicOf2(square);
+  if (cell === 0) {
+    return `${sq}, empty`;
+  }
+  return `${sq}, ${pieceNameFromCell(cell)}`;
+}
+function cellFromKey(key) {
+  switch (key) {
+    case "P":
+      return BOARD_CELL_WP;
+    case "N":
+      return BOARD_CELL_WN;
+    case "B":
+      return BOARD_CELL_WB;
+    case "R":
+      return BOARD_CELL_WR;
+    case "Q":
+      return BOARD_CELL_WQ;
+    case "K":
+      return BOARD_CELL_WK;
+    case "p":
+      return BOARD_CELL_BP;
+    case "n":
+      return BOARD_CELL_BN;
+    case "b":
+      return BOARD_CELL_BB;
+    case "r":
+      return BOARD_CELL_BR;
+    case "q":
+      return BOARD_CELL_BQ;
+    case "k":
+      return BOARD_CELL_BK;
+    default:
+      return 0;
+  }
+}
+function cellFromPieceString(piece) {
+  if (!piece || piece === "erase") return 0;
+  if (piece.length === 2) {
+    const c0 = piece[0];
+    const c1 = piece[1];
+    if (c0 && c1) {
+      const color = c0.toLowerCase();
+      const type = c1.toUpperCase();
+      if (color === "w") return cellFromKey(type);
+      if (color === "b") return cellFromKey(type.toLowerCase());
+    }
+  }
+  return cellFromKey(piece);
+}
+function getOppositePieceString(piece) {
+  if (!piece || piece === "erase") return null;
+  if (piece.length === 2) {
+    const c0 = piece[0];
+    const c1 = piece[1];
+    if (c0 && c1) {
+      const color = c0 === "w" ? "b" : "w";
+      return `${color}${c1}`;
+    }
+  }
+  return piece === piece.toUpperCase() ? piece.toLowerCase() : piece.toUpperCase();
+}
+function moveSquare(current, direction, orientation) {
+  const file = current & 7;
+  const rank = current >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  let newCol = col;
+  let newRow = row;
+  switch (direction) {
+    case "up":
+      newRow = Math.max(0, row - 1);
+      break;
+    case "down":
+      newRow = Math.min(7, row + 1);
+      break;
+    case "left":
+      newCol = Math.max(0, col - 1);
+      break;
+    case "right":
+      newCol = Math.min(7, col + 1);
+      break;
+  }
+  const newFile = orientation === "white" ? newCol : 7 - newCol;
+  const newRank = orientation === "white" ? 7 - newRow : newRow;
+  return newRank * 8 + newFile & 63;
+}
+function rankEndSquare(current, which, orientation) {
+  const rank = current >> 3;
+  if (orientation === "white") {
+    return rank << 3 | (which === "home" ? 0 : 7);
+  }
+  return rank << 3 | (which === "home" ? 7 : 0);
+}
+function BoardEditor({
+  fen = "8/8/8/8/8/8/8/8 w - - 0 1",
+  onChange,
+  onPieceChange,
+  selectedPiece,
+  onSelectPiece,
+  orientation = "white",
+  theme = defaultTheme,
+  pieces = defaultPieces,
+  showCoordinates = false,
+  style,
+  className,
+  ariaLabel = "Board editor",
+  onAnnounce,
+  getSquareAriaLabel,
+  focusedSquare: propFocusedSquare,
+  onSquareFocus,
+  id,
+  onClear,
+  onSetStartingPosition,
+  onToggleSideToMove,
+  onFocus,
+  onBlur
+}) {
+  const containerRef = useRef(null);
+  const liveRegionRef = useRef(null);
+  const liveCounter = useRef(0);
+  const [board, setBoard] = useState(() => {
+    try {
+      return parseFenPlacement(fen);
+    } catch {
+      return new Uint8Array(64);
+    }
+  });
+  const [internalFocusedSquare, setInternalFocusedSquare] = useState(
+    () => orientation === "white" ? 28 : 36
+    // e4 or e5
+  );
+  const focusedSquare = propFocusedSquare ?? internalFocusedSquare;
+  const setFocusedSquare = setInternalFocusedSquare;
+  const [hasKeyboardFocus, setHasKeyboardFocus] = useState(false);
+  const [dragging, setDragging] = useState(null);
+  useEffect(() => {
+    try {
+      const nextBoard = parseFenPlacement(fen);
+      setBoard(nextBoard);
+    } catch {
+    }
+  }, [fen]);
+  const announce = useCallback(
+    (message) => {
+      onAnnounce?.(message);
+      const region = liveRegionRef.current;
+      if (region) {
+        liveCounter.current++;
+        region.setAttribute("data-live-id", String(liveCounter.current));
+        region.textContent = "";
+        void region.offsetHeight;
+        region.textContent = message;
+      }
+    },
+    [onAnnounce]
+  );
+  const getSquareDescription = useCallback(
+    (square, cell) => {
+      const sq = algebraicOf2(square);
+      if (getSquareAriaLabel) {
+        return getSquareAriaLabel(square, cell, sq);
+      }
+      return defaultSquareLabel(square, cell);
+    },
+    [getSquareAriaLabel]
+  );
+  const announceSquare = useCallback(
+    (square) => {
+      const cell = board[square] ?? 0;
+      const desc = getSquareDescription(square, cell);
+      announce(desc);
+      onSquareFocus?.(square, cell, algebraicOf2(square));
+    },
+    [announce, board, getSquareDescription, onSquareFocus]
+  );
+  const commitBoard = useCallback(
+    (nextBoard) => {
+      setBoard(nextBoard);
+      const newPlacement = formatFenPlacement(nextBoard);
+      const updatedFen = updateFenPlacement(fen, newPlacement);
+      onChange?.(updatedFen);
+    },
+    [fen, onChange]
+  );
+  const placePieceAt = useCallback(
+    (square, cellOrCode) => {
+      const targetCell = typeof cellOrCode === "string" ? cellFromPieceString(cellOrCode) : cellOrCode;
+      const currentCell = board[square] ?? 0;
+      const nextBoard = new Uint8Array(board);
+      if (targetCell !== 0 && currentCell === targetCell) {
+        nextBoard[square] = 0;
+        commitBoard(nextBoard);
+        onPieceChange?.(square, 0, algebraicOf2(square));
+        announce(`Piece removed from ${algebraicOf2(square)}`);
+      } else if (targetCell !== 0) {
+        nextBoard[square] = targetCell;
+        commitBoard(nextBoard);
+        onPieceChange?.(square, targetCell, algebraicOf2(square));
+        const name = pieceNameFromCell(targetCell);
+        announce(`${name} placed on ${algebraicOf2(square)}`);
+        const char = PIECE_CHARS[targetCell] ?? "";
+        const code = targetCell <= 6 ? `w${char}` : `b${char.toUpperCase()}`;
+        onSelectPiece?.(code);
+      } else {
+        nextBoard[square] = 0;
+        commitBoard(nextBoard);
+        onPieceChange?.(square, 0, algebraicOf2(square));
+        announce(`Piece removed from ${algebraicOf2(square)}`);
+      }
+    },
+    [announce, board, commitBoard, onPieceChange, onSelectPiece]
+  );
+  const removePieceAt = useCallback(
+    (square) => {
+      const current = board[square] ?? 0;
+      if (current === 0) {
+        announce(`${algebraicOf2(square)} is empty`);
+        return;
+      }
+      const nextBoard = new Uint8Array(board);
+      nextBoard[square] = 0;
+      commitBoard(nextBoard);
+      onPieceChange?.(square, 0, algebraicOf2(square));
+      announce(`Piece removed from ${algebraicOf2(square)}`);
+    },
+    [announce, board, commitBoard, onPieceChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
+      if (e.key.startsWith("Arrow")) {
+        if (e.shiftKey) return;
+        e.preventDefault();
+        const dir = e.key === "ArrowUp" ? "up" : e.key === "ArrowDown" ? "down" : e.key === "ArrowLeft" ? "left" : "right";
+        const next = moveSquare(focusedSquare, dir, orientation);
+        setFocusedSquare(next);
+        announceSquare(next);
+        return;
+      }
+      if (e.key === "Home" || e.key === "End") {
+        e.preventDefault();
+        const next = rankEndSquare(focusedSquare, e.key === "Home" ? "home" : "end", orientation);
+        setFocusedSquare(next);
+        announceSquare(next);
+        return;
+      }
+      if (e.key === "Backspace" || e.key === "Delete" || e.key === "x" || e.key === "X") {
+        e.preventDefault();
+        removePieceAt(focusedSquare);
+        return;
+      }
+      if (e.key === "c" || e.key === "C") {
+        e.preventDefault();
+        if (onClear) {
+          onClear();
+        } else {
+          commitBoard(new Uint8Array(64));
+          announce("Board cleared");
+        }
+        return;
+      }
+      if (e.key === "s" || e.key === "S") {
+        e.preventDefault();
+        if (onSetStartingPosition) {
+          onSetStartingPosition();
+        } else {
+          commitBoard(parseFenPlacement(STARTING_FEN));
+          announce("Starting position");
+        }
+        return;
+      }
+      if (e.key === "t" || e.key === "T") {
+        e.preventDefault();
+        onToggleSideToMove?.();
+        return;
+      }
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (selectedPiece) {
+          const piece = e.shiftKey ? getOppositePieceString(selectedPiece) : selectedPiece;
+          if (piece) placePieceAt(focusedSquare, piece);
+        }
+        return;
+      }
+      const pieceCell = cellFromKey(e.key);
+      if (pieceCell !== 0) {
+        e.preventDefault();
+        placePieceAt(focusedSquare, pieceCell);
+      }
+    },
+    [
+      announce,
+      announceSquare,
+      commitBoard,
+      focusedSquare,
+      onClear,
+      onSetStartingPosition,
+      onToggleSideToMove,
+      orientation,
+      placePieceAt,
+      removePieceAt,
+      selectedPiece
+    ]
+  );
+  const handlePointerDown = (e) => {
+    if (e.button !== 0) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+    if (sq === null) return;
+    container.focus();
+    setFocusedSquare(sq);
+    onSquareFocus?.(sq, board[sq] ?? 0, algebraicOf2(sq));
+    const cell = board[sq] ?? 0;
+    if (cell === 0) {
+      if (selectedPiece) {
+        placePieceAt(sq, selectedPiece);
+      }
+      return;
+    }
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging({
+      origin: sq,
+      cell,
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const handlePointerMove = (e) => {
+    if (!dragging) return;
+    setDragging((prev) => prev ? { ...prev, x: e.clientX, y: e.clientY } : null);
+  };
+  const handlePointerUp = (e) => {
+    if (!dragging) return;
+    const container = containerRef.current;
+    const originSq = dragging.origin;
+    const movedCell = dragging.cell;
+    setDragging(null);
+    if (!container) return;
+    const targetSq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+    if (targetSq === null) {
+      removePieceAt(originSq);
+      return;
+    }
+    if (targetSq === originSq) {
+      if (selectedPiece) {
+        placePieceAt(originSq, selectedPiece);
+      }
+      return;
+    }
+    const nextBoard = new Uint8Array(board);
+    nextBoard[originSq] = 0;
+    nextBoard[targetSq] = movedCell;
+    commitBoard(nextBoard);
+    announce(`${pieceNameFromCell(movedCell)} moved to ${algebraicOf2(targetSq)}`);
+    setFocusedSquare(targetSq);
+  };
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    const container = containerRef.current;
+    if (!container) return;
+    const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+    if (sq === null) return;
+    setFocusedSquare(sq);
+    if (selectedPiece) {
+      const opp = getOppositePieceString(selectedPiece);
+      if (opp) placePieceAt(sq, opp);
+    }
+  };
+  const squareOrder = useMemo(() => {
+    const squares = [];
+    if (orientation === "white") {
+      for (let rank = 7; rank >= 0; rank--) {
+        for (let file = 0; file < 8; file++) {
+          squares.push(rank * 8 + file);
+        }
+      }
+    } else {
+      for (let rank = 0; rank < 8; rank++) {
+        for (let file = 7; file >= 0; file--) {
+          squares.push(rank * 8 + file);
+        }
+      }
+    }
+    return squares;
+  }, [orientation]);
+  const containerStyle = {
+    position: "relative",
+    aspectRatio: "1 / 1",
+    width: "100%",
+    touchAction: "none",
+    outline: hasKeyboardFocus ? "3px solid var(--gb-editor-focus, #d97706)" : "none",
+    outlineOffset: "2px",
+    borderRadius: "8px",
+    ...theme,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      id,
+      role: "application",
+      tabIndex: 0,
+      "aria-label": ariaLabel,
+      "aria-keyshortcuts": "ArrowUp ArrowDown ArrowLeft ArrowRight Enter Space Backspace Delete p P n N b B r R q Q k K c C s S t T",
+      onKeyDown: handleKeyDown,
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) {
+          setHasKeyboardFocus(true);
+          announceSquare(focusedSquare);
+        }
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (e.target === e.currentTarget) {
+          setHasKeyboardFocus(false);
+        }
+        onBlur?.(e);
+      },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: () => setDragging(null),
+      onContextMenu: handleContextMenu,
+      className,
+      style: containerStyle,
+      "data-gb-editor": "true",
+      "data-gb-orientation": orientation,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gridTemplateRows: "repeat(8, 1fr)",
+              pointerEvents: "none"
+            },
+            children: squareOrder.map((sq) => {
+              const file = sq & 7;
+              const rank = sq >> 3;
+              const isLight = (file + rank & 1) !== 0;
+              const isFocused = hasKeyboardFocus && focusedSquare === sq;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-square": algebraicOf2(sq),
+                  style: {
+                    position: "relative",
+                    backgroundColor: `var(${isLight ? CSS_VARS.SQ_LIGHT : CSS_VARS.SQ_DARK})`,
+                    backgroundImage: `var(${isLight ? CSS_VARS.SQ_LIGHT_IMAGE : CSS_VARS.SQ_DARK_IMAGE},none)`,
+                    backgroundSize: `var(${CSS_VARS.SQ_IMAGE_SIZE},cover)`,
+                    boxShadow: isFocused ? "inset 0 0 0 3px rgba(255, 206, 76, 0.95)" : void 0,
+                    userSelect: "none"
+                  }
+                },
+                sq
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              gridTemplateColumns: "repeat(8, 1fr)",
+              gridTemplateRows: "repeat(8, 1fr)",
+              pointerEvents: "none"
+            },
+            children: squareOrder.map((sq) => {
+              const cell = board[sq] ?? 0;
+              if (cell === 0) return null;
+              const isOrigin = dragging?.origin === sq;
+              const { col, row } = gridCoord(sq, orientation);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-piece-square": algebraicOf2(sq),
+                  style: {
+                    ...SLOT_BASE_STYLE,
+                    gridColumnStart: col,
+                    gridRowStart: row,
+                    opacity: isOrigin ? 0.25 : 1,
+                    filter: `var(${cell <= 6 ? CSS_VARS.PIECE_FILTER_WHITE : CSS_VARS.PIECE_FILTER_BLACK}, none)`,
+                    pointerEvents: "none"
+                  },
+                  children: pieces({ cell, square: sq })
+                },
+                sq
+              );
+            })
+          }
+        ),
+        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",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "fixed",
+              left: dragging.x - 30,
+              top: dragging.y - 30,
+              width: 60,
+              height: 60,
+              pointerEvents: "none",
+              zIndex: 100,
+              filter: `var(${dragging.cell <= 6 ? CSS_VARS.PIECE_FILTER_WHITE : CSS_VARS.PIECE_FILTER_BLACK}, none)`
+            },
+            children: pieces({ cell: dragging.cell, square: dragging.origin })
+          }
+        ) : null,
+        showCoordinates ? /* @__PURE__ */ jsx(Coordinates, { orientation }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: liveRegionRef,
+            role: "status",
+            "aria-live": "assertive",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              padding: 0,
+              margin: -1,
+              overflow: "hidden",
+              clip: "rect(0, 0, 0, 0)",
+              whiteSpace: "nowrap",
+              border: 0
+            }
+          }
+        )
+      ]
+    }
+  );
 }
 function squareCentrePct(index, orientation) {
   const file = index & 7;
@@ -607,7 +1391,7 @@ function injectFocusRingStyles() {
 `;
   document.head.appendChild(style);
 }
-function algebraicOf(index) {
+function algebraicOf3(index) {
   const file = index & 7;
   const rank = index >> 3;
   return `${String.fromCharCode(97 + file)}${rank + 1}`;
@@ -626,7 +1410,7 @@ function SquareImpl({
   const rank = index >> 3;
   const isLight = (file + rank) % 2 === 1;
   const cell = useSquareCell(model, index);
-  const label = getSquareAriaLabel ? getSquareAriaLabel(index, cell) : algebraicOf(index);
+  const label = getSquareAriaLabel ? getSquareAriaLabel(index, cell) : algebraicOf3(index);
   const internalRef = useRef(null);
   const lastReportedFocusRef = useRef(false);
   const setRef = useCallback(
@@ -669,7 +1453,7 @@ function SquareImpl({
       "aria-rowindex": rank + 1,
       "aria-colindex": file + 1,
       tabIndex: isFocused ? 0 : -1,
-      "data-square": algebraicOf(index),
+      "data-square": algebraicOf3(index),
       "data-gb-square": "",
       "data-light": isLight ? "true" : "false",
       onClick: handleClick,
@@ -807,64 +1591,6 @@ function CheckLayerInner({ model, orientation }) {
     }
   );
 }
-var FILE_LETTERS = ["a", "b", "c", "d", "e", "f", "g", "h"];
-function Coordinates({ orientation, ranksPosition = "left" }) {
-  const ranksOnRight = ranksPosition === "right";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "aria-hidden": "true",
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        fontSize: "min(1.6vmin, 11px)",
-        fontWeight: 600,
-        fontFamily: "system-ui, -apple-system, sans-serif"
-      },
-      children: [
-        FILE_LETTERS.map((letter, idx) => {
-          const col = orientation === "white" ? idx : 7 - idx;
-          const bottomRank = orientation === "white" ? 0 : 7;
-          const isLightSquare = (col + bottomRank) % 2 === 1;
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                left: `${col * 12.5 + 10}%`,
-                bottom: "1%",
-                color: `var(${isLightSquare ? CSS_VARS.COORDINATE_LIGHT : CSS_VARS.COORDINATE_DARK})`
-              },
-              children: letter
-            },
-            `file-${letter}`
-          );
-        }),
-        FILE_LETTERS.map((_, idx) => {
-          const rank = idx;
-          const row = orientation === "white" ? 7 - rank : rank;
-          const edgeFile = ranksOnRight ? orientation === "white" ? 7 : 0 : orientation === "white" ? 0 : 7;
-          const isLightSquare = (edgeFile + rank) % 2 === 1;
-          const sideStyle = ranksOnRight ? { right: "1%" } : { left: "1%" };
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                position: "absolute",
-                top: `${row * 12.5 + 1}%`,
-                ...sideStyle,
-                color: `var(${isLightSquare ? CSS_VARS.COORDINATE_LIGHT : CSS_VARS.COORDINATE_DARK})`
-              },
-              children: rank + 1
-            },
-            `rank-${rank}`
-          );
-        })
-      ]
-    }
-  );
-}
 var WRAPPER_STYLE = Object.freeze({
   position: "absolute",
   top: 0,
@@ -1007,7 +1733,7 @@ function IllegalFlashLayer({ at, orientation }) {
     }
   );
 }
-function algebraicOf2(index) {
+function algebraicOf4(index) {
   const file = index & 7;
   const rank = index >> 3;
   return `${String.fromCharCode(97 + file)}${rank + 1}`;
@@ -1035,14 +1761,15 @@ function pieceName(cell) {
 }
 function announcementFor(lastMove, board, wasCapture) {
   const { from, to, kind, promotion } = decodePackedMove(lastMove);
+  if (kind === "pass") return "Passes.";
   if (kind === "castle") {
     const isKingside = (to & 7) > (from & 7);
     return isKingside ? "Castles kingside." : "Castles queenside.";
   }
   const landed = board[to] ?? 0;
   const name = pieceName(landed);
-  const fromSq = algebraicOf2(from);
-  const toSq = algebraicOf2(to);
+  const fromSq = algebraicOf4(from);
+  const toSq = algebraicOf4(to);
   if (kind === "promotion" && promotion !== null) {
     const promoted = promotion === 1 ? "knight" : promotion === 2 ? "bishop" : promotion === 3 ? "rook" : "queen";
     const action = wasCapture ? "captures and promotes" : "promotes";
@@ -1091,76 +1818,6 @@ function LiveRegion({ model }) {
     }
   );
 }
-function gridCoord(index, orientation) {
-  const file = index & 7;
-  const rank = index >> 3;
-  const col = orientation === "white" ? file + 1 : 8 - file;
-  const row = orientation === "white" ? 8 - rank : rank + 1;
-  return { col, row };
-}
-function algebraicOf3(index) {
-  const file = index & 7;
-  const rank = index >> 3;
-  return `${String.fromCharCode(97 + file)}${rank + 1}`;
-}
-var SLOT_BASE_STYLE = Object.freeze({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  pointerEvents: "none",
-  containerType: "size"
-});
-function PieceSlotImpl({ index, model, orientation, pieces }) {
-  const cell = useSquareCell(model, index);
-  if (cell === 0) return null;
-  const { col, row } = gridCoord(index, orientation);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-piece-square": algebraicOf3(index),
-      "data-piece-cell": cell,
-      style: {
-        ...SLOT_BASE_STYLE,
-        gridColumnStart: col,
-        gridRowStart: row,
-        filter: `var(${cell <= 6 ? CSS_VARS.PIECE_FILTER_WHITE : CSS_VARS.PIECE_FILTER_BLACK}, none)`
-      },
-      children: pieces({ cell, square: index })
-    }
-  );
-}
-var PieceSlot = memo(PieceSlotImpl);
-PieceSlot.displayName = "PieceSlot";
-var CONTAINER_STYLE = Object.freeze({
-  position: "absolute",
-  inset: 0,
-  display: "grid",
-  gridTemplateColumns: "repeat(8, 1fr)",
-  gridTemplateRows: "repeat(8, 1fr)",
-  pointerEvents: "none"
-});
-var PieceLayer = memo(function PieceLayer2({
-  model,
-  orientation,
-  pieces
-}) {
-  const slots = [];
-  for (let i = 0; i < 64; i++) {
-    slots.push(
-      /* @__PURE__ */ jsx(
-        PieceSlot,
-        {
-          index: i,
-          model,
-          orientation,
-          pieces
-        },
-        i
-      )
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: CONTAINER_STYLE, children: slots });
-});
 function positionOf3(index, orientation) {
   const file = index & 7;
   const rank = index >> 3;
@@ -1372,7 +2029,7 @@ function PromotionOverlay({
           {
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": `Choose promotion piece at ${algebraicOf4(to)}`,
+            "aria-label": `Choose promotion piece at ${algebraicOf5(to)}`,
             onClick: (e) => e.stopPropagation(),
             style: {
               position: "absolute",
@@ -1452,7 +2109,7 @@ function pieceName2(t) {
       return "Piece";
   }
 }
-function algebraicOf4(index) {
+function algebraicOf5(index) {
   const file = index & 7;
   const rank = index >> 3;
   return `${String.fromCharCode(97 + file)}${rank + 1}`;
@@ -1468,7 +2125,7 @@ function StaticPieceLayer({ board, orientation, pieces }) {
       /* @__PURE__ */ jsx(
         "div",
         {
-          "data-piece-square": algebraicOf3(index),
+          "data-piece-square": algebraicOf(index),
           "data-piece-cell": cell,
           style: {
             ...SLOT_BASE_STYLE,
@@ -1486,7 +2143,7 @@ function StaticPieceLayer({ board, orientation, pieces }) {
 }
 var DEFAULT_DURATION_MS = 60;
 var DEFAULT_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)";
-function algebraicOf5(index) {
+function algebraicOf6(index) {
   const file = index & 7;
   const rank = index >> 3;
   return `${String.fromCharCode(97 + file)}${rank + 1}`;
@@ -1534,7 +2191,7 @@ function runAnimations(descriptors, container, orientation, duration, easing) {
       case "en-passant":
       case "promotion": {
         const toEl = container.querySelector(
-          `[data-piece-square="${algebraicOf5(d.to)}"]`
+          `[data-piece-square="${algebraicOf6(d.to)}"]`
         );
         if (toEl === null) break;
         const { dx, dy } = deltaFromTo(d.from, d.to, sqSize, orientation);
@@ -1543,10 +2200,10 @@ function runAnimations(descriptors, container, orientation, duration, easing) {
       }
       case "castle": {
         const kingEl = container.querySelector(
-          `[data-piece-square="${algebraicOf5(d.kingTo)}"]`
+          `[data-piece-square="${algebraicOf6(d.kingTo)}"]`
         );
         const rookEl = container.querySelector(
-          `[data-piece-square="${algebraicOf5(d.rookTo)}"]`
+          `[data-piece-square="${algebraicOf6(d.rookTo)}"]`
         );
         if (kingEl !== null) {
           const { dx, dy } = deltaFromTo(d.kingFrom, d.kingTo, sqSize, orientation);
@@ -1590,39 +2247,6 @@ function AnimationRunner({
   }, [historyPly, model, containerRef, orientation, duration, easing, skipNextRef]);
   return null;
 }
-
-// src/lib/geometry.ts
-function getSquareAtPoint(container, clientX, clientY, orientation) {
-  const rect = container.getBoundingClientRect();
-  const relX = clientX - rect.left;
-  const relY = clientY - rect.top;
-  if (relX < 0 || relY < 0 || relX >= rect.width || relY >= rect.height) return null;
-  const col = Math.floor(relX / rect.width * 8);
-  const row = Math.floor(relY / rect.height * 8);
-  const file = orientation === "white" ? col : 7 - col;
-  const rank = orientation === "white" ? 7 - row : row;
-  return rank * 8 + file;
-}
-function getPointAtSquareCentre(container, square, orientation) {
-  const rect = container.getBoundingClientRect();
-  const sqW = rect.width / 8;
-  const sqH = rect.height / 8;
-  const file = square & 7;
-  const rank = square >> 3;
-  const col = orientation === "white" ? file : 7 - file;
-  const row = orientation === "white" ? 7 - rank : rank;
-  return {
-    x: rect.left + sqW * col + sqW / 2,
-    y: rect.top + sqH * row + sqH / 2
-  };
-}
-function algebraicOf6(square) {
-  const file = square & 7;
-  const rank = square >> 3;
-  return `${String.fromCharCode(97 + file)}${rank + 1}`;
-}
-
-// src/hooks/use-arrow-gesture.ts
 function colorForModifiers(e, palette) {
   if (e.shiftKey) return palette.shift;
   if (e.altKey) return palette.alt;
@@ -1937,7 +2561,7 @@ function useDrag(options) {
           controller.cancel();
           return;
         }
-        const originLabel = algebraicOf6(evt.from);
+        const originLabel = algebraicOf2(evt.from);
         originEl = container.querySelector(`[data-piece-square="${originLabel}"]`);
         if (originEl !== null) {
           originEl.style.opacity = `var(${GHOST_OPACITY_VAR}, 0.35)`;
@@ -2186,7 +2810,7 @@ function useLastMoveController(model, squareRefs, enabled) {
       const lastMove = snap.lastMove;
       let from = null;
       let to = null;
-      if (lastMove !== null) {
+      if (lastMove !== null && !isNullMove(lastMove)) {
         from = lastMove & 63;
         to = lastMove >> 6 & 63;
       }
@@ -2596,6 +3220,9 @@ var ILLEGAL_FLASH_HOLD_MS = 320;
 var DEFAULT_POSITION_SYNC_DURATION_MS = 60;
 var DEFAULT_POSITION_SYNC_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)";
 var UCI_TRANSITION_RE = /^([a-h][1-8])([a-h][1-8])([nbrq])?$/i;
+function isNullTransition(transition) {
+  return isNullMoveUci(transition.uci);
+}
 function prefersReducedMotion3() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
     return false;
@@ -2643,6 +3270,7 @@ function castleRookTransition(from, to) {
   };
 }
 function transitionSquares(transition) {
+  if (isNullTransition(transition)) return [];
   const parsed = UCI_TRANSITION_RE.exec(transition.uci.trim().toLowerCase());
   if (parsed === null) return [];
   const moveFrom = parsed[1] ?? "";
@@ -2653,6 +3281,7 @@ function transitionSquares(transition) {
   return transition.direction === "forward" ? forward : forward.map((item) => ({ from: item.to, to: item.from }));
 }
 function parseTransitionMove(transition) {
+  if (isNullTransition(transition)) return null;
   const parsed = UCI_TRANSITION_RE.exec(transition.uci.trim().toLowerCase());
   if (parsed === null) return null;
   const from = parsed[1];
@@ -3223,8 +3852,8 @@ function useChessGame(options = {}) {
 }
 
 // src/index.ts
-var PACKAGE_VERSION = "1.3.3";
+var PACKAGE_VERSION = "1.5.0";
 
-export { AnimationRunner, Chessboard, DEFAULT_MOVE_HAPTIC_PATTERNS, DEFAULT_MOVE_SOUND_SOURCES, PACKAGE_VERSION, classifyMoveFeedback, getPointAtSquareCentre, getSquareAtPoint, triggerHaptic, triggerMoveHaptic, useArrowGesture, useBoardSlice, useBoardSnapshot, useChessGame, useClickToMove, useDrag, useHoverSquare, useKeyboardNav, useMoveHaptics, useMoveSound, useSquareCell, warmupHaptics };
+export { AnimationRunner, BoardEditor, Chessboard, DEFAULT_MOVE_HAPTIC_PATTERNS, DEFAULT_MOVE_SOUND_SOURCES, PACKAGE_VERSION, algebraicOf2 as algebraicOf, classifyMoveFeedback, formatFenPlacement, getPointAtSquareCentre, getSquareAtPoint, squareOf, triggerHaptic, triggerMoveHaptic, useArrowGesture, useBoardSlice, useBoardSnapshot, useChessGame, useClickToMove, useDrag, useHoverSquare, useKeyboardNav, useMoveHaptics, useMoveSound, useSquareCell, warmupHaptics };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map