gigaboard 1.2.3

package/dist/index.js

@@ -0,0 +1,2898 @@
+import { PieceType, Color, createDragController, createGigachessAdapter, createBoardModel, isEmptyCell, pieceTypeOf, colorOf, encodeBoardCell, decodePackedMove } from './chunk-J6GGNP5S.js';
+export { Color, PieceType, createBoardModel, createGigachessAdapter, packMove, preloadGigachessAdapter, unpackMove } from './chunk-J6GGNP5S.js';
+import { CSS_VARS, defaultTheme, defaultPieces, parseFenPlacement, defaultArrowColors, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT } from './chunk-CXDGJMYL.js';
+export { CSS_VARS, DEFAULT_ILLEGAL_FLASH_TINT, DEFAULT_PREMOVE_TINT, defaultArrowColors, defaultPieces, defaultTheme } from './chunk-CXDGJMYL.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';
+
+function useBoardSnapshot(model) {
+  return useSyncExternalStore(model.subscribe, model.getSnapshot, model.getSnapshot);
+}
+function useBoardSlice(model, selector) {
+  const getSnapshot = useCallback(() => selector(model.getSnapshot()), [model, selector]);
+  return useSyncExternalStore(model.subscribe, getSnapshot, getSnapshot);
+}
+function useSquareCell(model, index) {
+  const subscribe = useCallback(
+    (listener) => model ? model.subscribeSquare(index, listener) : () => {
+    },
+    [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);
+}
+function squareCentrePct(index, orientation) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return { cx: col * 12.5 + 6.25, cy: row * 12.5 + 6.25 };
+}
+function isKnightMove(fromIndex, toIndex) {
+  const fileDelta = Math.abs((toIndex & 7) - (fromIndex & 7));
+  const rankDelta = Math.abs((toIndex >> 3) - (fromIndex >> 3));
+  return fileDelta === 1 && rankDelta === 2 || fileDelta === 2 && rankDelta === 1;
+}
+function unitVector(from, to) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.hypot(dx, dy);
+  if (len === 0) return null;
+  return { x: dx / len, y: dy / len };
+}
+function arrowPath(fromIndex, toIndex, start, end, startOffset, tipOffset, headLength) {
+  if (!isKnightMove(fromIndex, toIndex)) {
+    const unit = unitVector(start, end);
+    if (unit === null) return null;
+    const tip2 = { x: end.x - unit.x * tipOffset, y: end.y - unit.y * tipOffset };
+    return {
+      start: { x: start.x + unit.x * startOffset, y: start.y + unit.y * startOffset },
+      corner: null,
+      shaftEnd: { x: tip2.x - unit.x * headLength, y: tip2.y - unit.y * headLength },
+      tip: tip2,
+      finalUnit: unit
+    };
+  }
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const corner = Math.abs(dx) > Math.abs(dy) ? { x: end.x, y: start.y } : { x: start.x, y: end.y };
+  const firstUnit = unitVector(start, corner);
+  const finalUnit = unitVector(corner, end);
+  if (firstUnit === null || finalUnit === null) return null;
+  const tip = { x: end.x - finalUnit.x * tipOffset, y: end.y - finalUnit.y * tipOffset };
+  return {
+    start: { x: start.x + firstUnit.x * startOffset, y: start.y + firstUnit.y * startOffset },
+    corner,
+    shaftEnd: { x: tip.x - finalUnit.x * headLength, y: tip.y - finalUnit.y * headLength },
+    tip,
+    finalUnit
+  };
+}
+function resolveColor(arrow, palette) {
+  if (arrow.brush !== void 0 && palette !== void 0) {
+    const brushed = palette[arrow.brush];
+    if (brushed !== void 0) return brushed;
+  }
+  return arrow.color;
+}
+function drawArrow(ctx, fromIndex, toIndex, color, sqSize, orientation, preview) {
+  const a = squareCentrePct(fromIndex, orientation);
+  const b = squareCentrePct(toIndex, orientation);
+  const boardSize = sqSize * 8;
+  const start = { x: a.cx / 100 * boardSize, y: a.cy / 100 * boardSize };
+  const end = { x: b.cx / 100 * boardSize, y: b.cy / 100 * boardSize };
+  if (fromIndex === toIndex) {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = sqSize * 0.08;
+    ctx.globalAlpha = preview ? 0.65 : 1;
+    ctx.beginPath();
+    ctx.arc(start.x, start.y, sqSize * 0.44, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+    return;
+  }
+  const startOffset = sqSize * 0.28;
+  const tipOffset = sqSize * 0.08;
+  const headLength = sqSize * 0.36;
+  const headHalfWidth = sqSize * 0.28;
+  const shaftWidth = sqSize * 0.18;
+  const path = arrowPath(fromIndex, toIndex, start, end, startOffset, tipOffset, headLength);
+  if (path === null) return;
+  ctx.globalAlpha = preview ? 0.65 : 1;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = shaftWidth;
+  ctx.lineCap = "butt";
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  ctx.moveTo(path.start.x, path.start.y);
+  if (path.corner !== null) ctx.lineTo(path.corner.x, path.corner.y);
+  ctx.lineTo(path.shaftEnd.x, path.shaftEnd.y);
+  ctx.stroke();
+  const perpX = -path.finalUnit.y;
+  const perpY = path.finalUnit.x;
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.moveTo(path.tip.x, path.tip.y);
+  ctx.lineTo(path.shaftEnd.x + perpX * headHalfWidth, path.shaftEnd.y + perpY * headHalfWidth);
+  ctx.lineTo(path.shaftEnd.x - perpX * headHalfWidth, path.shaftEnd.y - perpY * headHalfWidth);
+  ctx.closePath();
+  ctx.fill();
+  ctx.globalAlpha = 1;
+}
+function redraw(canvas, arrows, preview, orientation, palette) {
+  const ctx = canvas.getContext("2d");
+  if (ctx === null) return;
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  const rect = canvas.getBoundingClientRect();
+  const cssWidth = rect.width;
+  const cssHeight = rect.height;
+  if (cssWidth <= 0 || cssHeight <= 0) return;
+  const backingWidth = Math.round(cssWidth * dpr);
+  const backingHeight = Math.round(cssHeight * dpr);
+  if (canvas.width !== backingWidth) canvas.width = backingWidth;
+  if (canvas.height !== backingHeight) canvas.height = backingHeight;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, cssWidth, cssHeight);
+  const sqSize = cssWidth / 8;
+  for (const arrow of arrows) {
+    drawArrow(ctx, arrow.from, arrow.to, resolveColor(arrow, palette), sqSize, orientation, false);
+  }
+  if (preview !== null) {
+    drawArrow(ctx, preview.from, preview.to, preview.color, sqSize, orientation, true);
+  }
+}
+function anchorPct(from, to, orientation, center) {
+  const a = squareCentrePct(from, orientation);
+  const b = squareCentrePct(to, orientation);
+  if (center === "orig") return a;
+  if (center === "dest") return b;
+  return { cx: (a.cx + b.cx) / 2, cy: (a.cy + b.cy) / 2 };
+}
+var ArrowsLayer = memo(
+  forwardRef(function ArrowsLayer2({ model, orientation, palette, below = false }, handle) {
+    const canvasRef = useRef(null);
+    const previewRef = useRef(null);
+    const allArrows = useBoardSlice(model, (s) => s.arrows);
+    const arrows = useMemo(
+      () => allArrows.filter((a) => a.below === true === below),
+      [allArrows, below]
+    );
+    const hasDecorations = useMemo(
+      () => arrows.some((a) => a.label !== void 0 || a.customSvg !== void 0),
+      [arrows]
+    );
+    useImperativeHandle(
+      handle,
+      () => ({
+        setPreview(preview) {
+          if (below) return;
+          previewRef.current = preview;
+          const canvas = canvasRef.current;
+          if (canvas !== null) redraw(canvas, arrows, preview, orientation, palette);
+        }
+      }),
+      [arrows, orientation, palette, below]
+    );
+    useLayoutEffect(() => {
+      const canvas = canvasRef.current;
+      if (canvas === null) return;
+      redraw(canvas, arrows, previewRef.current, orientation, palette);
+    }, [arrows, orientation, palette]);
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (canvas === null) return;
+      const parent = canvas.parentElement;
+      if (parent === null || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        redraw(canvas, arrows, previewRef.current, orientation, palette);
+      });
+      observer.observe(parent);
+      return () => observer.disconnect();
+    }, [arrows, orientation, palette]);
+    const layerZIndex = below ? void 0 : 15;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          "data-layer": below ? "arrows-below" : "arrows",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            ...layerZIndex !== void 0 ? { zIndex: layerZIndex } : {}
+          }
+        }
+      ),
+      hasDecorations ? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "data-layer": below ? "arrows-below-decor" : "arrows-decor",
+          viewBox: "0 0 100 100",
+          preserveAspectRatio: "none",
+          "aria-hidden": "true",
+          style: {
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            // Decorations share the z-plane of the canvas they annotate.
+            ...layerZIndex !== void 0 ? { zIndex: layerZIndex } : {}
+          },
+          children: arrows.map((arrow) => {
+            const key = `${arrow.from}-${arrow.to}-${arrow.color}-${arrow.brush ?? ""}`;
+            const color = resolveColor(arrow, palette);
+            const nodes = [];
+            if (arrow.label !== void 0) {
+              const { cx, cy } = anchorPct(arrow.from, arrow.to, orientation, "label");
+              nodes.push(
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: cx,
+                    y: cy,
+                    fill: arrow.label.fill ?? color,
+                    fontSize: "4",
+                    fontWeight: "700",
+                    textAnchor: "middle",
+                    dominantBaseline: "central",
+                    style: { userSelect: "none" },
+                    children: arrow.label.text
+                  },
+                  `${key}-label`
+                )
+              );
+            }
+            if (arrow.customSvg !== void 0) {
+              const { cx, cy } = anchorPct(
+                arrow.from,
+                arrow.to,
+                orientation,
+                arrow.customSvg.center ?? "dest"
+              );
+              nodes.push(
+                /* @__PURE__ */ jsx(
+                  "g",
+                  {
+                    transform: `translate(${cx}, ${cy})`,
+                    dangerouslySetInnerHTML: { __html: arrow.customSvg.html }
+                  },
+                  `${key}-svg`
+                )
+              );
+            }
+            return nodes.length === 0 ? null : /* @__PURE__ */ jsx("g", { children: nodes }, key);
+          })
+        }
+      ) : null
+    ] });
+  })
+);
+var FOCUS_STYLE_ID = "gb-focus-ring-styles";
+function injectFocusRingStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(FOCUS_STYLE_ID) !== null) return;
+  const style = document.createElement("style");
+  style.id = FOCUS_STYLE_ID;
+  style.textContent = `
+[data-gb-square]:focus-visible {
+  box-shadow: inset 0 0 0 3px rgba(255, 206, 76, 0.95);
+}
+`;
+  document.head.appendChild(style);
+}
+function algebraicOf(index) {
+  const file = index & 7;
+  const rank = index >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+function SquareImpl({
+  index,
+  onClick,
+  renderSquare,
+  isFocused,
+  setSquareRef,
+  model,
+  getSquareAriaLabel,
+  onFocus
+}) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const isLight = (file + rank) % 2 === 1;
+  const cell = useSquareCell(model, index);
+  const label = getSquareAriaLabel ? getSquareAriaLabel(index, cell) : algebraicOf(index);
+  const internalRef = useRef(null);
+  const lastReportedFocusRef = useRef(false);
+  const setRef = useCallback(
+    (el) => {
+      internalRef.current = el;
+      setSquareRef?.(index, el);
+    },
+    [index, setSquareRef]
+  );
+  useEffect(() => {
+    injectFocusRingStyles();
+  }, []);
+  useEffect(() => {
+    if (!isFocused) {
+      lastReportedFocusRef.current = false;
+      return;
+    }
+    const el = internalRef.current;
+    if (el === null) return;
+    const grid = el.closest('[role="grid"]');
+    if (grid === null) return;
+    if (!grid.contains(document.activeElement)) return;
+    if (document.activeElement !== el) el.focus();
+    if (!lastReportedFocusRef.current) {
+      lastReportedFocusRef.current = true;
+      onFocus?.(index, cell);
+    }
+  }, [isFocused, index, cell, onFocus]);
+  const handleFocus = useCallback(() => {
+    lastReportedFocusRef.current = true;
+    onFocus?.(index, cell);
+  }, [index, cell, onFocus]);
+  const handleClick = () => onClick(index);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRef,
+      role: "gridcell",
+      "aria-label": label,
+      "aria-rowindex": rank + 1,
+      "aria-colindex": file + 1,
+      tabIndex: isFocused ? 0 : -1,
+      "data-square": algebraicOf(index),
+      "data-gb-square": "",
+      "data-light": isLight ? "true" : "false",
+      onClick: handleClick,
+      onFocus: handleFocus,
+      style: {
+        position: "relative",
+        // `backgroundColor` (not the `background` shorthand) so the
+        // CSS `background-image` set by `useSelectionController` can
+        // layer on top without clobbering this base colour.
+        backgroundColor: `var(${isLight ? CSS_VARS.SQ_LIGHT : CSS_VARS.SQ_DARK})`,
+        // Cursor is managed by `useCursorController` via injected CSS so
+        // it can flip between `pointer` / `grab` / `grabbing` without a
+        // React re-render per hover.
+        userSelect: "none",
+        // Suppress the browser's default focus ring; the keyboard focus
+        // indicator ships via `:focus-visible` (see `injectFocusRingStyles`).
+        outline: "none",
+        // Squares carry the container-query context so pieces inside can
+        // size relative to this cell (85cqh glyph sizing).
+        containerType: "size"
+      },
+      children: renderSquare !== void 0 ? renderSquare({ index, isLight, label }) : null
+    }
+  );
+}
+var Square = memo(SquareImpl);
+Square.displayName = "Square";
+function buildSquareOrder(orientation) {
+  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;
+}
+var BoardGrid = memo(function BoardGrid2({
+  orientation,
+  onSquareClick,
+  renderSquare,
+  ariaLabel,
+  focusedSquare,
+  setSquareRef,
+  readOnly,
+  model,
+  getSquareAriaLabel,
+  onSquareFocus
+}) {
+  const squares = useMemo(() => buildSquareOrder(orientation), [orientation]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "grid",
+      "aria-label": ariaLabel ?? "Chess board",
+      "aria-rowcount": 8,
+      "aria-colcount": 8,
+      ...readOnly === true ? { "aria-readonly": true } : {},
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "grid",
+        gridTemplateColumns: "repeat(8, 1fr)",
+        gridTemplateRows: "repeat(8, 1fr)"
+      },
+      children: squares.map((index) => /* @__PURE__ */ jsx(
+        Square,
+        {
+          index,
+          onClick: onSquareClick,
+          isFocused: focusedSquare === index,
+          model,
+          getSquareAriaLabel,
+          onFocus: onSquareFocus,
+          ...renderSquare !== void 0 ? { renderSquare } : {},
+          ...setSquareRef !== void 0 ? { setSquareRef } : {}
+        },
+        index
+      ))
+    }
+  );
+});
+var WHITE_KING = 6;
+var BLACK_KING = 12;
+function findKing(board, turn) {
+  const code = turn === 0 ? WHITE_KING : BLACK_KING;
+  for (let i = 0; i < 64; i++) {
+    if (board[i] === code) return i;
+  }
+  return null;
+}
+function positionOf(index, orientation) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return { x: col * 12.5, y: row * 12.5 };
+}
+function CheckLayer({ model, orientation }) {
+  const inCheck = useBoardSlice(model, (s) => s.inCheck);
+  if (!inCheck) return null;
+  return /* @__PURE__ */ jsx(CheckLayerInner, { model, orientation });
+}
+function CheckLayerInner({ model, orientation }) {
+  const turn = useBoardSlice(model, (s) => s.turn);
+  const board = useBoardSlice(model, (s) => s.board);
+  const kingSquare = findKing(board, turn);
+  if (kingSquare === null) return null;
+  const { x, y } = positionOf(kingSquare, orientation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-layer": "check",
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: `${x}%`,
+        top: `${y}%`,
+        width: "12.5%",
+        height: "12.5%",
+        background: `var(${CSS_VARS.CHECK})`,
+        pointerEvents: "none",
+        zIndex: 2
+      }
+    }
+  );
+}
+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,
+  left: 0,
+  width: "12.5%",
+  height: "12.5%",
+  pointerEvents: "none",
+  willChange: "transform",
+  zIndex: 20,
+  containerType: "size",
+  opacity: 0,
+  transform: "translate3d(0, 0, 0)"
+});
+var SLOT_STYLE = Object.freeze({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  containerType: "size"
+});
+var DragLayer = forwardRef(function DragLayer2({ pieces }, ref) {
+  const wrapperRef = useRef(null);
+  const slotRefs = useRef(new Array(13).fill(null));
+  const slots = useMemo(() => {
+    const nodes = [];
+    for (let cell = 1; cell <= 12; cell++) {
+      const child = pieces({ cell, square: 0 });
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              slotRefs.current[cell] = el;
+            },
+            "data-drag-cell": cell,
+            style: SLOT_STYLE,
+            children: child
+          },
+          cell
+        )
+      );
+    }
+    return nodes;
+  }, [pieces]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      show(cell) {
+        const wrapper = wrapperRef.current;
+        if (wrapper === null) return;
+        wrapper.style.opacity = "1";
+        wrapper.dataset["active"] = "true";
+        for (let c = 1; c <= 12; c++) {
+          const el = slotRefs.current[c];
+          if (el !== null && el !== void 0) {
+            el.style.opacity = c === cell ? "1" : "0";
+          }
+        }
+      },
+      hide() {
+        const wrapper = wrapperRef.current;
+        if (wrapper === null) return;
+        wrapper.style.opacity = "0";
+        wrapper.dataset["active"] = "false";
+      },
+      setTransform(x, y) {
+        const wrapper = wrapperRef.current;
+        if (wrapper === null) return;
+        wrapper.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      },
+      element() {
+        return wrapperRef.current;
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      "data-layer": "drag",
+      "data-active": "false",
+      "aria-hidden": "true",
+      style: WRAPPER_STYLE,
+      children: slots
+    }
+  );
+});
+function positionOf2(index, orientation) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return { x: col * 12.5, y: row * 12.5 };
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var FLASH_DURATION_MS = 280;
+function IllegalFlashLayer({ at, orientation }) {
+  const elRef = useRef(null);
+  useLayoutEffect(() => {
+    if (at === null) return;
+    const el = elRef.current;
+    if (el === null || typeof el.animate !== "function") return;
+    const duration = prefersReducedMotion() ? 0 : FLASH_DURATION_MS;
+    el.animate(
+      [
+        { opacity: 0, offset: 0 },
+        { opacity: 1, offset: 0.15 },
+        { opacity: 0, offset: 1 }
+      ],
+      { duration, easing: "ease-out", fill: "forwards" }
+    );
+  }, [at]);
+  if (at === null) return null;
+  const { x, y } = positionOf2(at, orientation);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: elRef,
+      "data-layer": "illegal-flash",
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: `${x}%`,
+        top: `${y}%`,
+        width: "12.5%",
+        height: "12.5%",
+        background: DEFAULT_ILLEGAL_FLASH_TINT,
+        opacity: 0,
+        pointerEvents: "none",
+        zIndex: 5
+      }
+    }
+  );
+}
+function algebraicOf2(index) {
+  const file = index & 7;
+  const rank = index >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+function pieceName(cell) {
+  if (cell === 0) return "piece";
+  const color = cell > 6 ? "black" : "white";
+  const type = (cell - 1) % 6;
+  switch (type) {
+    case 0:
+      return `${color} pawn`;
+    case 1:
+      return `${color} knight`;
+    case 2:
+      return `${color} bishop`;
+    case 3:
+      return `${color} rook`;
+    case 4:
+      return `${color} queen`;
+    case 5:
+      return `${color} king`;
+    default:
+      return `${color} piece`;
+  }
+}
+function announcementFor(lastMove, board, wasCapture) {
+  const { from, to, kind, promotion } = decodePackedMove(lastMove);
+  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);
+  if (kind === "promotion" && promotion !== null) {
+    const promoted = promotion === 1 ? "knight" : promotion === 2 ? "bishop" : promotion === 3 ? "rook" : "queen";
+    const action = wasCapture ? "captures and promotes" : "promotes";
+    return `Pawn ${fromSq} ${action} to ${promoted} on ${toSq}.`;
+  }
+  if (kind === "en-passant") {
+    return `${capitalise(name)} ${fromSq} captures en passant on ${toSq}.`;
+  }
+  if (wasCapture) {
+    return `${capitalise(name)} ${fromSq} captures on ${toSq}.`;
+  }
+  return `${capitalise(name)} ${fromSq} to ${toSq}.`;
+}
+function capitalise(s) {
+  return s.length === 0 ? s : s.charAt(0).toUpperCase() + s.slice(1);
+}
+var srOnlyStyle = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function LiveRegion({ model }) {
+  const lastMove = useBoardSlice(model, (s) => s.lastMove);
+  const message = useMemo(() => {
+    if (lastMove === null) return "";
+    const wasCapture = model.lastAnimations.some(
+      (d) => d.kind === "capture" || d.kind === "en-passant"
+    );
+    return announcementFor(lastMove, model.getSnapshot().board, wasCapture);
+  }, [lastMove, model]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "data-layer": "live-region",
+      style: srOnlyStyle,
+      children: message
+    }
+  );
+}
+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 },
+      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;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return { x: col * 12.5, y: row * 12.5 };
+}
+function PremoveLayer({ model, orientation, pieces }) {
+  const premoves = useBoardSlice(model, (s) => s.premoves);
+  if (premoves.length === 0) return null;
+  const head = premoves[0];
+  if (head === void 0) return null;
+  return /* @__PURE__ */ jsx(
+    PremoveLayerInner,
+    {
+      model,
+      orientation,
+      pieces,
+      from: head.from,
+      to: head.to
+    }
+  );
+}
+function PremoveLayerInner({ model, orientation, pieces, from, to }) {
+  const cell = useSquareCell(model, from);
+  if (cell === 0) return null;
+  const origin = positionOf3(from, orientation);
+  const target = positionOf3(to, orientation);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-layer": "premove",
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        zIndex: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${origin.x}%`,
+              top: `${origin.y}%`,
+              width: "12.5%",
+              height: "12.5%",
+              background: DEFAULT_PREMOVE_TINT,
+              opacity: 0.5
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${target.x}%`,
+              top: `${target.y}%`,
+              width: "12.5%",
+              height: "12.5%",
+              background: DEFAULT_PREMOVE_TINT
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-premove-ghost": "true",
+            style: {
+              position: "absolute",
+              left: `${target.x}%`,
+              top: `${target.y}%`,
+              width: "12.5%",
+              height: "12.5%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: 0.55,
+              containerType: "size"
+            },
+            children: pieces({ cell, square: to })
+          }
+        )
+      ]
+    }
+  );
+}
+function positionOf4(index, orientation) {
+  const file = index & 7;
+  const rank = index >> 3;
+  const col = orientation === "white" ? file : 7 - file;
+  const row = orientation === "white" ? 7 - rank : rank;
+  return { x: col * 12.5, y: row * 12.5 };
+}
+var CHOICE_ORDER = [
+  PieceType.Queen,
+  PieceType.Knight,
+  PieceType.Rook,
+  PieceType.Bishop
+];
+var SHORTCUTS = {
+  q: PieceType.Queen,
+  r: PieceType.Rook,
+  b: PieceType.Bishop,
+  n: PieceType.Knight,
+  Q: PieceType.Queen,
+  R: PieceType.Rook,
+  B: PieceType.Bishop,
+  N: PieceType.Knight
+};
+function PromotionOverlay({
+  from: _from,
+  to,
+  color,
+  orientation,
+  pieces,
+  onSelect,
+  onCancel,
+  getPromotionPieceAriaLabel
+}) {
+  const buttonRefs = useRef([]);
+  const getLabel = useCallback(
+    (piece) => getPromotionPieceAriaLabel ? getPromotionPieceAriaLabel(piece, color) : pieceName2(piece),
+    [getPromotionPieceAriaLabel, color]
+  );
+  const [activeAnnouncement, setActiveAnnouncement] = useState(
+    () => getLabel(CHOICE_ORDER[0] ?? PieceType.Queen)
+  );
+  useEffect(() => {
+    buttonRefs.current[0]?.focus();
+  }, []);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const activeEl = document.activeElement;
+        const currentIdx = buttonRefs.current.findIndex((el) => el === activeEl);
+        let nextIdx;
+        if (e.shiftKey) {
+          nextIdx = currentIdx <= 0 ? buttonRefs.current.length - 1 : currentIdx - 1;
+        } else {
+          nextIdx = currentIdx >= buttonRefs.current.length - 1 ? 0 : currentIdx + 1;
+        }
+        buttonRefs.current[nextIdx]?.focus();
+        return;
+      }
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault();
+        const activeEl = document.activeElement;
+        const currentIdx = buttonRefs.current.findIndex((el) => el === activeEl);
+        const nextIdx = currentIdx < 0 ? 0 : (currentIdx + 1) % CHOICE_ORDER.length;
+        buttonRefs.current[nextIdx]?.focus();
+        return;
+      }
+      if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        const activeEl = document.activeElement;
+        const currentIdx = buttonRefs.current.findIndex((el) => el === activeEl);
+        const prevIdx = currentIdx <= 0 ? CHOICE_ORDER.length - 1 : currentIdx - 1;
+        buttonRefs.current[prevIdx]?.focus();
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        buttonRefs.current[0]?.focus();
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        buttonRefs.current[CHOICE_ORDER.length - 1]?.focus();
+        return;
+      }
+      const choice = SHORTCUTS[e.key];
+      if (choice !== void 0) {
+        e.preventDefault();
+        onSelect(choice);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onSelect, onCancel]);
+  const targetPos = positionOf4(to, orientation);
+  const promotingColorIsBlack = color === 1;
+  const stackUpward = orientation === "white" ? promotingColorIsBlack : !promotingColorIsBlack;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "presentation",
+      "data-layer": "promotion-overlay",
+      onClick: onCancel,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.35)",
+        zIndex: 30,
+        cursor: "pointer"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": `Choose promotion piece at ${algebraicOf4(to)}`,
+            onClick: (e) => e.stopPropagation(),
+            style: {
+              position: "absolute",
+              left: `${targetPos.x}%`,
+              top: `${stackUpward ? targetPos.y - 12.5 * 3 : targetPos.y}%`,
+              width: "12.5%",
+              height: `${12.5 * 4}%`,
+              display: "flex",
+              flexDirection: stackUpward ? "column-reverse" : "column",
+              background: "#ffffff",
+              boxShadow: "0 4px 16px rgba(0, 0, 0, 0.28)",
+              borderRadius: "4px",
+              overflow: "hidden"
+            },
+            children: CHOICE_ORDER.map((piece, index) => {
+              const cell = encodeBoardCell(color, piece);
+              const label = getLabel(piece);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: (el) => {
+                    buttonRefs.current[index] = el;
+                  },
+                  type: "button",
+                  onClick: () => onSelect(piece),
+                  onFocus: () => setActiveAnnouncement(label),
+                  "aria-label": label,
+                  style: {
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    border: "none",
+                    background: "transparent",
+                    cursor: "pointer",
+                    padding: 0,
+                    margin: 0,
+                    font: "inherit",
+                    containerType: "size"
+                  },
+                  "data-promotion-piece": pieceName2(piece),
+                  children: pieces({ cell, square: to })
+                },
+                piece
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", style: srOnlyStyle2, children: activeAnnouncement }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", style: srOnlyStyle2, children: "Choose a promotion piece with Q, N, R, or B, or arrow keys. Press Escape to cancel." })
+      ]
+    }
+  );
+}
+var srOnlyStyle2 = {
+  position: "absolute",
+  width: "1px",
+  height: "1px",
+  padding: 0,
+  margin: "-1px",
+  overflow: "hidden",
+  clip: "rect(0, 0, 0, 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+function pieceName2(t) {
+  switch (t) {
+    case PieceType.Queen:
+      return "Queen";
+    case PieceType.Rook:
+      return "Rook";
+    case PieceType.Bishop:
+      return "Bishop";
+    case PieceType.Knight:
+      return "Knight";
+    default:
+      return "Piece";
+  }
+}
+function algebraicOf4(index) {
+  const file = index & 7;
+  const rank = index >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+function StaticPieceLayer({ board, orientation, pieces }) {
+  const slots = [];
+  for (let i = 0; i < 64; i++) {
+    const cell = board[i] ?? 0;
+    if (cell === 0) continue;
+    const index = i;
+    const { col, row } = gridCoord(index, orientation);
+    slots.push(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-piece-square": algebraicOf3(index),
+          "data-piece-cell": cell,
+          style: { ...SLOT_BASE_STYLE, gridColumnStart: col, gridRowStart: row },
+          children: pieces({ cell, square: index })
+        },
+        i
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: CONTAINER_STYLE, children: slots });
+}
+var DEFAULT_DURATION_MS = 60;
+var DEFAULT_EASING = "cubic-bezier(0.22, 0.61, 0.36, 1)";
+function algebraicOf5(index) {
+  const file = index & 7;
+  const rank = index >> 3;
+  return `${String.fromCharCode(97 + file)}${rank + 1}`;
+}
+function deltaFromTo(from, to, squareSize, orientation) {
+  const fromFile = from & 7;
+  const fromRank = from >> 3;
+  const toFile = to & 7;
+  const toRank = to >> 3;
+  const fromCol = orientation === "white" ? fromFile : 7 - fromFile;
+  const fromRow = orientation === "white" ? 7 - fromRank : fromRank;
+  const toCol = orientation === "white" ? toFile : 7 - toFile;
+  const toRow = orientation === "white" ? 7 - toRank : toRank;
+  return {
+    dx: (fromCol - toCol) * squareSize,
+    dy: (fromRow - toRow) * squareSize
+  };
+}
+function cancelAnimations(element) {
+  if (typeof element.getAnimations !== "function") return;
+  for (const anim of element.getAnimations()) anim.cancel();
+}
+function prefersReducedMotion2() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function animateGlide(element, dx, dy, duration, easing) {
+  cancelAnimations(element);
+  if (duration <= 0 || typeof element.animate !== "function") return;
+  element.animate(
+    [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }],
+    { duration, easing, fill: "none" }
+  );
+}
+function runAnimations(descriptors, container, orientation, duration, easing) {
+  const rect = container.getBoundingClientRect();
+  const sqSize = rect.width / 8;
+  if (sqSize <= 0) return;
+  for (const d of descriptors) {
+    switch (d.kind) {
+      case "move":
+      case "capture":
+      case "en-passant":
+      case "promotion": {
+        const toEl = container.querySelector(
+          `[data-piece-square="${algebraicOf5(d.to)}"]`
+        );
+        if (toEl === null) break;
+        const { dx, dy } = deltaFromTo(d.from, d.to, sqSize, orientation);
+        animateGlide(toEl, dx, dy, duration, easing);
+        break;
+      }
+      case "castle": {
+        const kingEl = container.querySelector(
+          `[data-piece-square="${algebraicOf5(d.kingTo)}"]`
+        );
+        const rookEl = container.querySelector(
+          `[data-piece-square="${algebraicOf5(d.rookTo)}"]`
+        );
+        if (kingEl !== null) {
+          const { dx, dy } = deltaFromTo(d.kingFrom, d.kingTo, sqSize, orientation);
+          animateGlide(kingEl, dx, dy, duration, easing);
+        }
+        if (rookEl !== null) {
+          const { dx, dy } = deltaFromTo(d.rookFrom, d.rookTo, sqSize, orientation);
+          animateGlide(rookEl, dx, dy, duration, easing);
+        }
+        break;
+      }
+    }
+  }
+}
+function AnimationRunner({
+  model,
+  containerRef,
+  orientation,
+  options,
+  runtime
+}) {
+  const duration = options?.durationMs ?? DEFAULT_DURATION_MS;
+  const easing = options?.easing ?? DEFAULT_EASING;
+  const skipNextRef = runtime?.skipNextRef;
+  const historyPly = useBoardSlice(model, (s) => s.historyPly);
+  const lastAnimatedPlyRef = useRef(null);
+  useLayoutEffect(() => {
+    if (lastAnimatedPlyRef.current === historyPly) return;
+    lastAnimatedPlyRef.current = historyPly;
+    const container = containerRef.current;
+    if (container === null) return;
+    const descriptors = model.lastAnimations;
+    if (descriptors.length === 0) return;
+    if (skipNextRef?.current) {
+      skipNextRef.current = false;
+      return;
+    }
+    const effectiveDuration = prefersReducedMotion2() ? 0 : duration;
+    if (effectiveDuration <= 0) return;
+    runAnimations(descriptors, container, orientation, effectiveDuration, easing);
+  }, [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;
+  if (e.ctrlKey || e.metaKey) return palette.ctrl;
+  return palette.default;
+}
+function useArrowGesture(options) {
+  const { game, orientation, containerRef, arrowsLayerRef, enabled, palette, snapToValidMove } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (container === null || game === null) return;
+    let origin = null;
+    let activePointerId = null;
+    const clearPreview = () => {
+      arrowsLayerRef.current?.setPreview(null);
+    };
+    const snap = (candidate) => {
+      if (!snapToValidMove) return candidate;
+      if (origin === null) return candidate;
+      if (candidate === origin) return candidate;
+      const legals = game.legalFrom(origin);
+      if (legals.size === 0 || legals.has(candidate)) return candidate;
+      const cf = candidate & 7;
+      const cr = candidate >> 3;
+      let best = candidate;
+      let bestDist = Infinity;
+      for (const t of legals) {
+        const df = (t & 7) - cf;
+        const dr = (t >> 3) - cr;
+        const d = df * df + dr * dr;
+        if (d < bestDist) {
+          bestDist = d;
+          best = t;
+        }
+      }
+      return best;
+    };
+    const setPreview = (to, color) => {
+      if (origin === null) return;
+      arrowsLayerRef.current?.setPreview({ from: origin, to: snap(to), color });
+    };
+    const onContextMenu = (e) => {
+      e.preventDefault();
+    };
+    const onPointerDown = (e) => {
+      if (e.button !== 2) return;
+      const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+      if (sq === null) return;
+      origin = sq;
+      activePointerId = e.pointerId;
+      setPreview(sq, colorForModifiers(e, palette));
+      try {
+        container.setPointerCapture(e.pointerId);
+      } catch {
+      }
+    };
+    const onPointerMove = (e) => {
+      if (origin === null) return;
+      if (activePointerId !== null && e.pointerId !== activePointerId) return;
+      const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+      if (sq === null) {
+        setPreview(origin, colorForModifiers(e, palette));
+        return;
+      }
+      setPreview(sq, colorForModifiers(e, palette));
+    };
+    const onPointerUp = (e) => {
+      if (origin === null) return;
+      if (activePointerId !== null && e.pointerId !== activePointerId) return;
+      const raw = getSquareAtPoint(container, e.clientX, e.clientY, orientation) ?? origin;
+      const target = snap(raw);
+      const color = colorForModifiers(e, palette);
+      game.toggleArrow({ from: origin, to: target, color });
+      origin = null;
+      activePointerId = null;
+      clearPreview();
+    };
+    const onPointerCancel = (e) => {
+      if (origin === null) return;
+      if (activePointerId !== null && e.pointerId !== activePointerId) return;
+      origin = null;
+      activePointerId = null;
+      clearPreview();
+    };
+    container.addEventListener("contextmenu", onContextMenu);
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("pointermove", onPointerMove, { passive: true });
+    container.addEventListener("pointerup", onPointerUp);
+    container.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      container.removeEventListener("contextmenu", onContextMenu);
+      container.removeEventListener("pointerdown", onPointerDown);
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerup", onPointerUp);
+      container.removeEventListener("pointercancel", onPointerCancel);
+      clearPreview();
+    };
+  }, [game, orientation, containerRef, arrowsLayerRef, enabled, palette, snapToValidMove]);
+}
+function wouldPromote(fromCell, toIndex) {
+  if (fromCell === 0) return false;
+  const pieceType = (fromCell - 1) % 6;
+  if (pieceType !== PieceType.Pawn) return false;
+  const toRank = toIndex >> 3;
+  return toRank === 0 || toRank === 7;
+}
+function useClickToMove(model, onMove, onPromotionNeeded, enabled = true) {
+  return useCallback(
+    (index) => {
+      if (!enabled) return;
+      if (model === null) return;
+      const snap = model.getSnapshot();
+      const cell = snap.board[index] ?? 0;
+      const pieceColour = cell === 0 ? -1 : cell > 6 ? Color.Black : Color.White;
+      if (snap.selected === null) {
+        if (pieceColour === snap.turn) model.selectSquare(index);
+        return;
+      }
+      if (snap.selected === index) {
+        model.selectSquare(null);
+        return;
+      }
+      if (snap.legalTargets.has(index)) {
+        const fromCell = snap.board[snap.selected] ?? 0;
+        if (wouldPromote(fromCell, index)) {
+          if (onPromotionNeeded !== void 0) {
+            onPromotionNeeded(snap.selected, index);
+            return;
+          }
+          const played2 = model.tryMove(snap.selected, index, PieceType.Queen);
+          if (played2 !== null && onMove !== void 0) onMove(played2);
+          return;
+        }
+        const played = model.tryMove(snap.selected, index);
+        if (played !== null && onMove !== void 0) onMove(played);
+        return;
+      }
+      if (pieceColour === snap.turn) {
+        model.selectSquare(index);
+        return;
+      }
+      model.selectSquare(null);
+    },
+    [model, onMove, onPromotionNeeded, enabled]
+  );
+}
+var STYLE_ID = "gb-cursor-styles";
+function injectCursorStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID) !== null) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+[data-gb-square] {
+  cursor: pointer;
+}
+[data-gb-turn="white"] [data-piece-cell="1"],
+[data-gb-turn="white"] [data-piece-cell="2"],
+[data-gb-turn="white"] [data-piece-cell="3"],
+[data-gb-turn="white"] [data-piece-cell="4"],
+[data-gb-turn="white"] [data-piece-cell="5"],
+[data-gb-turn="white"] [data-piece-cell="6"],
+[data-gb-turn="black"] [data-piece-cell="7"],
+[data-gb-turn="black"] [data-piece-cell="8"],
+[data-gb-turn="black"] [data-piece-cell="9"],
+[data-gb-turn="black"] [data-piece-cell="10"],
+[data-gb-turn="black"] [data-piece-cell="11"],
+[data-gb-turn="black"] [data-piece-cell="12"] {
+  pointer-events: auto;
+  cursor: grab;
+}
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="7"],
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="8"],
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="9"],
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="10"],
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="11"],
+[data-gb-premove="true"][data-gb-turn="white"] [data-piece-cell="12"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="1"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="2"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="3"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="4"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="5"],
+[data-gb-premove="true"][data-gb-turn="black"] [data-piece-cell="6"] {
+  pointer-events: auto;
+  cursor: grab;
+}
+[data-gb-dragging="true"] [data-gb-square],
+[data-gb-dragging="true"] [data-piece-cell] {
+  cursor: grabbing;
+}
+`;
+  document.head.appendChild(style);
+}
+function useCursorController(model, containerRef, allowDrag, allowPremove) {
+  useEffect(() => {
+    injectCursorStyles();
+  }, []);
+  useEffect(() => {
+    if (model === null) return;
+    let lastTurn = null;
+    let lastPremove = null;
+    const write = () => {
+      const el = containerRef.current;
+      if (el === null) return;
+      if (!allowDrag) {
+        if (lastTurn !== null) {
+          delete el.dataset["gbTurn"];
+          lastTurn = null;
+        }
+        if (lastPremove !== null) {
+          delete el.dataset["gbPremove"];
+          lastPremove = null;
+        }
+        return;
+      }
+      const turn = model.getSnapshot().turn === 0 ? "white" : "black";
+      if (turn !== lastTurn) {
+        el.dataset["gbTurn"] = turn;
+        lastTurn = turn;
+      }
+      if (allowPremove !== lastPremove) {
+        if (allowPremove) {
+          el.dataset["gbPremove"] = "true";
+        } else {
+          delete el.dataset["gbPremove"];
+        }
+        lastPremove = allowPremove;
+      }
+    };
+    write();
+    const unsubscribe = model.subscribe(write);
+    return () => {
+      unsubscribe();
+      const el = containerRef.current;
+      if (el !== null) {
+        delete el.dataset["gbTurn"];
+        delete el.dataset["gbPremove"];
+      }
+    };
+  }, [model, containerRef, allowDrag, allowPremove]);
+}
+var GHOST_OPACITY_VAR = CSS_VARS.DRAG_GHOST_OPACITY;
+function useDrag(options) {
+  const {
+    game,
+    orientation,
+    containerRef,
+    dragLayerRef,
+    enabled,
+    activationDistance,
+    onDragStart,
+    onDragEnd,
+    onDrop,
+    canDragPiece
+  } = options;
+  const canDragPieceRef = useRef(canDragPiece);
+  useEffect(() => {
+    canDragPieceRef.current = canDragPiece;
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (container === null || game === null) return;
+    const controller = createDragController(
+      activationDistance === void 0 ? {} : { activationDistance }
+    );
+    let originEl = null;
+    let active = false;
+    let activePointerId = null;
+    const writeTransform = (clientX, clientY) => {
+      const layer = dragLayerRef.current;
+      if (layer === null) return;
+      const rect = container.getBoundingClientRect();
+      const sqSize = rect.width / 8;
+      const x = clientX - rect.left - sqSize / 2;
+      const y = clientY - rect.top - sqSize / 2;
+      layer.setTransform(x, y);
+    };
+    const restoreOrigin = () => {
+      if (originEl !== null) {
+        originEl.style.opacity = "";
+        originEl = null;
+      }
+    };
+    const cleanup = () => {
+      restoreOrigin();
+      dragLayerRef.current?.hide();
+      active = false;
+      activePointerId = null;
+      onDragEnd();
+    };
+    const onPointerDown = (e) => {
+      if (e.button !== 0) return;
+      const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+      if (sq === null) return;
+      const cell = game.getSnapshot().board[sq] ?? 0;
+      if (cell === 0) return;
+      const canDrag = canDragPieceRef.current;
+      if (canDrag !== void 0 && !canDrag({ square: sq, cell })) {
+        return;
+      }
+      const consumed = controller.pointerDown(sq, e.pointerId, e.clientX, e.clientY);
+      if (consumed) activePointerId = e.pointerId;
+    };
+    const onPointerMove = (e) => {
+      const evt = controller.pointerMove(e.pointerId, e.clientX, e.clientY);
+      if (evt === null) return;
+      if (evt.kind === "drag-start") {
+        const cell = game.getSnapshot().board[evt.from] ?? 0;
+        if (cell === 0) {
+          controller.cancel();
+          return;
+        }
+        const originLabel = algebraicOf6(evt.from);
+        originEl = container.querySelector(`[data-piece-square="${originLabel}"]`);
+        if (originEl !== null) {
+          originEl.style.opacity = `var(${GHOST_OPACITY_VAR}, 0.35)`;
+        }
+        active = true;
+        try {
+          container.setPointerCapture(e.pointerId);
+        } catch {
+        }
+        dragLayerRef.current?.show(cell);
+        writeTransform(e.clientX, e.clientY);
+        onDragStart(evt.from, cell);
+        return;
+      }
+      writeTransform(e.clientX, e.clientY);
+    };
+    const onPointerUp = (e) => {
+      const evt = controller.pointerUp(e.pointerId, e.clientX, e.clientY);
+      if (evt === null) return;
+      if (evt.kind === "drop") {
+        const target = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+        if (target !== null && target !== evt.from) {
+          onDrop(evt.from, target);
+        }
+      }
+      if (active) cleanup();
+      activePointerId = null;
+    };
+    const onPointerCancel = (e) => {
+      if (activePointerId !== null && e.pointerId !== activePointerId) return;
+      controller.cancel();
+      if (active) cleanup();
+      activePointerId = null;
+    };
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("pointermove", onPointerMove, { passive: true });
+    container.addEventListener("pointerup", onPointerUp);
+    container.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      container.removeEventListener("pointerdown", onPointerDown);
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerup", onPointerUp);
+      container.removeEventListener("pointercancel", onPointerCancel);
+      if (active) cleanup();
+    };
+  }, [
+    game,
+    orientation,
+    containerRef,
+    dragLayerRef,
+    enabled,
+    activationDistance,
+    onDragStart,
+    onDragEnd,
+    onDrop
+  ]);
+}
+function useHoverSquare(options) {
+  const { game, orientation, containerRef, enabled, onEnter, onLeave } = options;
+  const onEnterRef = useRef(onEnter);
+  const onLeaveRef = useRef(onLeave);
+  useEffect(() => {
+    onEnterRef.current = onEnter;
+    onLeaveRef.current = onLeave;
+  });
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (container === null) return;
+    let current = null;
+    const cellAt = (sq) => game === null ? 0 : game.getSnapshot().board[sq] ?? 0;
+    const onPointerMove = (e) => {
+      const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+      if (sq === current) return;
+      if (current !== null) onLeaveRef.current?.({ square: current, cell: cellAt(current) });
+      if (sq !== null) onEnterRef.current?.({ square: sq, cell: cellAt(sq) });
+      current = sq;
+    };
+    const onPointerLeave = () => {
+      if (current === null) return;
+      onLeaveRef.current?.({ square: current, cell: cellAt(current) });
+      current = null;
+    };
+    container.addEventListener("pointermove", onPointerMove, { passive: true });
+    container.addEventListener("pointerleave", onPointerLeave);
+    return () => {
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerleave", onPointerLeave);
+      if (current !== null) {
+        onLeaveRef.current?.({ square: current, cell: cellAt(current) });
+        current = null;
+      }
+    };
+  }, [game, orientation, containerRef, enabled]);
+}
+function moveFocus(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;
+}
+function rankEnd(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 boardCorner(which, orientation) {
+  if (orientation === "white") {
+    return which === "home" ? 56 : 7;
+  }
+  return which === "home" ? 7 : 56;
+}
+function useKeyboardNav(options) {
+  const {
+    containerRef,
+    orientation,
+    focusedSquare,
+    setFocusedSquare,
+    onActivate,
+    onEscape,
+    enabled
+  } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    const container = containerRef.current;
+    if (container === null) return;
+    const onKeyDown = (e) => {
+      if (!container.contains(e.target)) return;
+      const current = focusedSquare;
+      if (current === null) return;
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedSquare(moveFocus(current, "up", orientation));
+          return;
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedSquare(moveFocus(current, "down", orientation));
+          return;
+        case "ArrowLeft":
+          e.preventDefault();
+          setFocusedSquare(moveFocus(current, "left", orientation));
+          return;
+        case "ArrowRight":
+          e.preventDefault();
+          setFocusedSquare(moveFocus(current, "right", orientation));
+          return;
+        case "Home":
+          e.preventDefault();
+          setFocusedSquare(
+            e.ctrlKey || e.metaKey ? boardCorner("home", orientation) : rankEnd(current, "home", orientation)
+          );
+          return;
+        case "End":
+          e.preventDefault();
+          setFocusedSquare(
+            e.ctrlKey || e.metaKey ? boardCorner("end", orientation) : rankEnd(current, "end", orientation)
+          );
+          return;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          onActivate(current);
+          return;
+        case "Escape":
+          e.preventDefault();
+          onEscape();
+          return;
+        default:
+          return;
+      }
+    };
+    container.addEventListener("keydown", onKeyDown);
+    return () => container.removeEventListener("keydown", onKeyDown);
+  }, [containerRef, orientation, focusedSquare, setFocusedSquare, onActivate, onEscape, enabled]);
+}
+var STYLE_ID2 = "gb-last-move-styles";
+function injectLastMoveStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID2) !== null) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+[data-gb-square]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  pointer-events: none;
+}
+[data-gb-square][data-gb-last-move]::after {
+  background: var(--gb-last-move);
+}
+`;
+  document.head.appendChild(style);
+}
+function useLastMoveController(model, squareRefs, enabled) {
+  useEffect(() => {
+    injectLastMoveStyles();
+  }, []);
+  useEffect(() => {
+    if (model === null) return;
+    let prevFrom = null;
+    let prevTo = null;
+    const write = (i, val) => {
+      const el = squareRefs.current?.[i];
+      if (el === null || el === void 0) return;
+      if (val === null) {
+        delete el.dataset["gbLastMove"];
+      } else {
+        el.dataset["gbLastMove"] = val;
+      }
+    };
+    const clearAll = () => {
+      if (prevFrom !== null) write(prevFrom, null);
+      if (prevTo !== null) write(prevTo, null);
+      prevFrom = null;
+      prevTo = null;
+    };
+    if (!enabled) {
+      return clearAll;
+    }
+    const update = () => {
+      const snap = model.getSnapshot();
+      const lastMove = snap.lastMove;
+      let from = null;
+      let to = null;
+      if (lastMove !== null) {
+        from = lastMove & 63;
+        to = lastMove >> 6 & 63;
+      }
+      if (from === prevFrom && to === prevTo) return;
+      if (prevFrom !== null && prevFrom !== from && prevFrom !== to) {
+        write(prevFrom, null);
+      }
+      if (prevTo !== null && prevTo !== from && prevTo !== to) {
+        write(prevTo, null);
+      }
+      if (from !== null && from !== to) write(from, "from");
+      if (to !== null) write(to, "to");
+      prevFrom = from;
+      prevTo = to;
+    };
+    update();
+    const unsubscribe = model.subscribe(update);
+    return () => {
+      unsubscribe();
+      clearAll();
+    };
+  }, [model, squareRefs, enabled]);
+}
+
+// src/lib/haptics.ts
+var COARSE_POINTER_QUERY = "(hover: none), (pointer: coarse)";
+var cached;
+var pending = null;
+function isCoarsePointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia(COARSE_POINTER_QUERY).matches;
+}
+function shouldRunHaptics(options) {
+  if (options.enabled === false) return false;
+  if (options.mobileOnly === false) return true;
+  return isCoarsePointer();
+}
+async function getInstance() {
+  if (cached !== void 0) {
+    return cached;
+  }
+  if (pending !== null) {
+    return pending;
+  }
+  if (typeof window === "undefined") {
+    cached = null;
+    return cached;
+  }
+  pending = import('web-haptics').then(({ WebHaptics }) => {
+    try {
+      cached = new WebHaptics();
+    } catch {
+      cached = null;
+    }
+    return cached;
+  }).catch(() => {
+    cached = null;
+    return cached;
+  }).finally(() => {
+    pending = null;
+  });
+  return pending;
+}
+function triggerHaptic(input, options = {}) {
+  if (!shouldRunHaptics(options)) {
+    return;
+  }
+  const { enabled: _enabled, mobileOnly: _mobileOnly, ...triggerOptions } = options;
+  void getInstance().then((instance) => {
+    void instance?.trigger(input, triggerOptions);
+  });
+}
+function warmupHaptics(options = {}) {
+  if (!shouldRunHaptics(options)) {
+    return;
+  }
+  void getInstance();
+}
+
+// src/lib/move-feedback.ts
+var DEFAULT_MOVE_HAPTIC_PATTERNS = Object.freeze({
+  moveSelf: "selection",
+  moveOpponent: "selection",
+  capture: "medium",
+  castle: "medium",
+  moveCheck: "success",
+  promote: "success",
+  gameEnd: "success"
+});
+function classifyMoveFeedback(animations, snapshot, perspective) {
+  if (snapshot.isGameOver) return "gameEnd";
+  let sawPromotion = false;
+  let sawCastle = false;
+  let sawCapture = false;
+  for (const d of animations) {
+    if (d.kind === "promotion") sawPromotion = true;
+    else if (d.kind === "castle") sawCastle = true;
+    else if (d.kind === "capture" || d.kind === "en-passant") sawCapture = true;
+  }
+  if (sawPromotion) return "promote";
+  if (sawCastle) return "castle";
+  if (snapshot.inCheck) return "moveCheck";
+  if (sawCapture) return "capture";
+  if (perspective !== void 0) {
+    const moverWasMe = snapshot.turn !== perspective;
+    return moverWasMe ? "moveSelf" : "moveOpponent";
+  }
+  return "moveSelf";
+}
+
+// src/hooks/use-move-haptics.ts
+var DEFAULT_MIN_INTERVAL_MS = 14;
+function triggerMoveHaptic(key, {
+  enabled = true,
+  patterns,
+  mobileOnly = true,
+  intensity
+} = {}) {
+  if (!enabled) {
+    return;
+  }
+  const input = patterns?.[key] ?? DEFAULT_MOVE_HAPTIC_PATTERNS[key];
+  triggerHaptic(input, {
+    enabled,
+    mobileOnly,
+    ...intensity !== void 0 ? { intensity } : {}
+  });
+}
+function useMoveHaptics(model, options = {}) {
+  const {
+    enabled = true,
+    patterns,
+    perspective,
+    mobileOnly = true,
+    minIntervalMs = DEFAULT_MIN_INTERVAL_MS,
+    warmupOnFirstInteraction = true,
+    intensity
+  } = options;
+  const patternsRef = useRef(patterns);
+  useEffect(() => {
+    patternsRef.current = patterns;
+  });
+  const perspectiveRef = useRef(perspective);
+  useEffect(() => {
+    perspectiveRef.current = perspective;
+  });
+  const mobileOnlyRef = useRef(mobileOnly);
+  useEffect(() => {
+    mobileOnlyRef.current = mobileOnly;
+  });
+  const intensityRef = useRef(intensity);
+  useEffect(() => {
+    intensityRef.current = intensity;
+  });
+  const lastTriggerAtRef = useRef(0);
+  const trigger = useCallback(
+    (key) => {
+      triggerMoveHaptic(key, {
+        enabled,
+        ...patternsRef.current !== void 0 ? { patterns: patternsRef.current } : {},
+        mobileOnly: mobileOnlyRef.current,
+        ...intensityRef.current !== void 0 ? { intensity: intensityRef.current } : {}
+      });
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    if (!enabled || !warmupOnFirstInteraction) {
+      return;
+    }
+    let warmed = false;
+    const warmup = () => {
+      if (warmed) {
+        return;
+      }
+      warmed = true;
+      warmupHaptics({ mobileOnly: mobileOnlyRef.current });
+      window.removeEventListener("pointerdown", warmup, true);
+      window.removeEventListener("touchstart", warmup, true);
+      window.removeEventListener("keydown", warmup, true);
+    };
+    window.addEventListener("pointerdown", warmup, { capture: true, passive: true });
+    window.addEventListener("touchstart", warmup, { capture: true, passive: true });
+    window.addEventListener("keydown", warmup, { capture: true });
+    return () => {
+      window.removeEventListener("pointerdown", warmup, true);
+      window.removeEventListener("touchstart", warmup, true);
+      window.removeEventListener("keydown", warmup, true);
+    };
+  }, [enabled, warmupOnFirstInteraction]);
+  useEffect(() => {
+    if (!enabled || model === null) return;
+    let prevPly = model.getSnapshot().historyPly;
+    return model.subscribe(() => {
+      const snap = model.getSnapshot();
+      if (snap.historyPly <= prevPly) {
+        prevPly = snap.historyPly;
+        return;
+      }
+      prevPly = snap.historyPly;
+      const nowMs = performance.now();
+      if (nowMs - lastTriggerAtRef.current < minIntervalMs) {
+        return;
+      }
+      lastTriggerAtRef.current = nowMs;
+      const key = classifyMoveFeedback(model.lastAnimations, snap, perspectiveRef.current);
+      trigger(key);
+    });
+  }, [enabled, minIntervalMs, model, trigger]);
+  return trigger;
+}
+var DEFAULT_MOVE_SOUND_SOURCES = Object.freeze({
+  moveSelf: typeof import.meta.url === "string" ? new URL("./sounds/move-self.mp3", import.meta.url).href : "./sounds/move-self.mp3",
+  moveOpponent: typeof import.meta.url === "string" ? new URL("./sounds/move-opponent.mp3", import.meta.url).href : "./sounds/move-opponent.mp3",
+  capture: typeof import.meta.url === "string" ? new URL("./sounds/capture.mp3", import.meta.url).href : "./sounds/capture.mp3",
+  castle: typeof import.meta.url === "string" ? new URL("./sounds/castle.mp3", import.meta.url).href : "./sounds/castle.mp3",
+  moveCheck: typeof import.meta.url === "string" ? new URL("./sounds/move-check.mp3", import.meta.url).href : "./sounds/move-check.mp3",
+  promote: typeof import.meta.url === "string" ? new URL("./sounds/promote.mp3", import.meta.url).href : "./sounds/promote.mp3",
+  gameEnd: typeof import.meta.url === "string" ? new URL("./sounds/game-end.mp3", import.meta.url).href : "./sounds/game-end.mp3"
+});
+var POOL_SIZE = 4;
+function createPools(sources, preload) {
+  const pools = {};
+  for (const key of Object.keys(sources)) {
+    const url = sources[key];
+    const elements = [];
+    for (let i = 0; i < POOL_SIZE; i++) {
+      const audio = new Audio(url);
+      audio.preload = preload ?? "none";
+      elements.push(audio);
+    }
+    pools[key] = { elements, cursor: 0 };
+  }
+  return pools;
+}
+function useMoveSound(model, options = {}) {
+  const { enabled = true, volume = 1, preload = "none", sources, perspective } = options;
+  const poolsRef = useRef(null);
+  const sourcesRef = useRef(DEFAULT_MOVE_SOUND_SOURCES);
+  const preloadRef = useRef(preload);
+  const volumeRef = useRef(volume);
+  useEffect(() => {
+    volumeRef.current = volume;
+  });
+  const perspectiveRef = useRef(perspective);
+  useEffect(() => {
+    perspectiveRef.current = perspective;
+  });
+  useEffect(() => {
+    sourcesRef.current = {
+      ...DEFAULT_MOVE_SOUND_SOURCES,
+      ...sources ?? {}
+    };
+    poolsRef.current = null;
+  }, [sources]);
+  useEffect(() => {
+    preloadRef.current = preload;
+    poolsRef.current = null;
+  }, [preload]);
+  useEffect(() => {
+    if (!enabled) {
+      poolsRef.current = null;
+    }
+  }, [enabled]);
+  const triggerMoveSound = useCallback(
+    (key) => {
+      if (!enabled) return;
+      if (typeof window === "undefined") return;
+      if (typeof Audio === "undefined") return;
+      const pools = poolsRef.current ?? createPools(sourcesRef.current, preloadRef.current);
+      poolsRef.current = pools;
+      const pool = pools[key];
+      if (pool === void 0) return;
+      pool.cursor = (pool.cursor + 1) % pool.elements.length;
+      const el = pool.elements[pool.cursor];
+      if (el === void 0) return;
+      el.volume = Math.max(0, Math.min(1, volumeRef.current));
+      el.currentTime = 0;
+      void el.play().catch(() => {
+      });
+    },
+    [enabled]
+  );
+  useEffect(() => {
+    if (!enabled || model === null) return;
+    let prevPly = model.getSnapshot().historyPly;
+    return model.subscribe(() => {
+      const snap = model.getSnapshot();
+      if (snap.historyPly <= prevPly) {
+        prevPly = snap.historyPly;
+        return;
+      }
+      prevPly = snap.historyPly;
+      const key = classifyMoveFeedback(model.lastAnimations, snap, perspectiveRef.current);
+      triggerMoveSound(key);
+    });
+  }, [enabled, model, triggerMoveSound]);
+  return triggerMoveSound;
+}
+var STYLE_ID3 = "gb-selection-styles";
+function injectSelectionStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID3) !== null) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID3;
+  style.textContent = `
+[data-gb-square]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  pointer-events: none;
+}
+[data-gb-square][data-gb-selection="selected"]::before {
+  background: var(--gb-selected);
+}
+[data-gb-square][data-gb-selection="legal-quiet"]::before {
+  background-image: radial-gradient(var(--gb-legal-target) 22%, transparent 24%);
+}
+[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%);
+}
+[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%);
+}
+[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%);
+}
+`;
+  document.head.appendChild(style);
+}
+function useSelectionController(model, squareRefs, style) {
+  useEffect(() => {
+    injectSelectionStyles();
+  }, []);
+  useEffect(() => {
+    if (model === null) return;
+    let prevSelected = null;
+    let prevTargets = /* @__PURE__ */ new Set();
+    const write = (i, val) => {
+      const el = squareRefs.current?.[i];
+      if (el === null || el === void 0) return;
+      if (val === "none") {
+        delete el.dataset["gbSelection"];
+      } else {
+        el.dataset["gbSelection"] = val;
+      }
+    };
+    const clear = () => {
+      if (prevSelected !== null) write(prevSelected, "none");
+      for (const sq of prevTargets) write(sq, "none");
+      prevSelected = null;
+      prevTargets = /* @__PURE__ */ new Set();
+    };
+    const update = () => {
+      const snap = model.getSnapshot();
+      const { selected, legalTargets, board } = snap;
+      if (style === false) {
+        for (const sq of prevTargets) {
+          if (sq !== selected) write(sq, "none");
+        }
+        if (prevSelected !== null && prevSelected !== selected) {
+          write(prevSelected, "none");
+        }
+        if (selected !== null) write(selected, "selected");
+        prevSelected = selected;
+        prevTargets = /* @__PURE__ */ new Set();
+        return;
+      }
+      if (selected === prevSelected && legalTargets === prevTargets) return;
+      if (prevSelected !== null && prevSelected !== selected && !legalTargets.has(prevSelected)) {
+        write(prevSelected, "none");
+      }
+      for (const sq of prevTargets) {
+        if (sq !== selected && !legalTargets.has(sq)) write(sq, "none");
+      }
+      if (selected !== null) write(selected, "selected");
+      for (const sq of legalTargets) {
+        if (sq === selected) continue;
+        const targetCell = board[sq] ?? 0;
+        write(sq, targetCell === 0 ? "legal-quiet" : "legal-capture");
+      }
+      prevSelected = selected;
+      prevTargets = legalTargets;
+    };
+    update();
+    const unsubscribe = model.subscribe(update);
+    return () => {
+      unsubscribe();
+      clear();
+    };
+  }, [model, squareRefs, style]);
+}
+function colorOfCell(cell) {
+  return cell > 6 ? 1 : 0;
+}
+function movePromotesPawn(fromCell, to) {
+  if (fromCell === 0) return false;
+  const pieceType = (fromCell - 1) % 6;
+  if (pieceType !== 0) return false;
+  const toRank = to >> 3;
+  return toRank === 0 || toRank === 7;
+}
+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 prefersReducedMotion3() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function cancelElementAnimations(element) {
+  if (typeof element.getAnimations !== "function") return;
+  for (const anim of element.getAnimations()) anim.cancel();
+}
+function queryPieceAt(container, square) {
+  return container.querySelector(`[data-piece-square="${square}"]`);
+}
+function squareIndexOfName(square) {
+  const file = square.charCodeAt(0) - 97;
+  const rank = Number(square[1]) - 1;
+  return rank << 3 | file;
+}
+function deltaFromSquareNames(from, to, squareSize, orientation) {
+  const fromIndex = squareIndexOfName(from);
+  const toIndex = squareIndexOfName(to);
+  const fromFile = fromIndex & 7;
+  const fromRank = fromIndex >> 3;
+  const toFile = toIndex & 7;
+  const toRank = toIndex >> 3;
+  const fromCol = orientation === "white" ? fromFile : 7 - fromFile;
+  const fromRow = orientation === "white" ? 7 - fromRank : fromRank;
+  const toCol = orientation === "white" ? toFile : 7 - toFile;
+  const toRow = orientation === "white" ? 7 - toRank : toRank;
+  return {
+    dx: (fromCol - toCol) * squareSize,
+    dy: (fromRow - toRow) * squareSize
+  };
+}
+function castleRookTransition(from, to) {
+  const fromFile = from.charCodeAt(0);
+  const toFile = to.charCodeAt(0);
+  if (fromFile !== 101 || Math.abs(toFile - fromFile) !== 2) return null;
+  const rank = from[1];
+  if (rank !== "1" && rank !== "8") return null;
+  const kingSide = toFile > fromFile;
+  return {
+    from: `${kingSide ? "h" : "a"}${rank}`,
+    to: `${kingSide ? "f" : "d"}${rank}`
+  };
+}
+function transitionSquares(transition) {
+  const parsed = UCI_TRANSITION_RE.exec(transition.uci.trim().toLowerCase());
+  if (parsed === null) return [];
+  const moveFrom = parsed[1] ?? "";
+  const moveTo = parsed[2] ?? "";
+  const forward = [{ from: moveFrom, to: moveTo }];
+  const rook = castleRookTransition(moveFrom, moveTo);
+  if (rook !== null) forward.push(rook);
+  return transition.direction === "forward" ? forward : forward.map((item) => ({ from: item.to, to: item.from }));
+}
+function parseTransitionMove(transition) {
+  const parsed = UCI_TRANSITION_RE.exec(transition.uci.trim().toLowerCase());
+  if (parsed === null) return null;
+  const from = parsed[1];
+  const to = parsed[2];
+  if (from === void 0 || to === void 0) return null;
+  return {
+    from: squareIndexOfName(from),
+    to: squareIndexOfName(to),
+    promotion: parsed[3] ?? null
+  };
+}
+function isPawn(cell) {
+  return !isEmptyCell(cell) && pieceTypeOf(cell) === 0;
+}
+function controlledFeedbackDescriptors(transition, previousBoard, nextBoard) {
+  if (transition === null || transition === void 0) return null;
+  const parsed = parseTransitionMove(transition);
+  if (parsed === null) return null;
+  const before = transition.direction === "forward" ? previousBoard : nextBoard;
+  const after = transition.direction === "forward" ? nextBoard : previousBoard;
+  const movingPiece = before[parsed.from] ?? 0;
+  if (isEmptyCell(movingPiece)) return null;
+  const fromFile = parsed.from & 7;
+  const toFile = parsed.to & 7;
+  const targetBefore = before[parsed.to] ?? 0;
+  const targetAfter = after[parsed.to] ?? 0;
+  if (pieceTypeOf(movingPiece) === 5 && Math.abs(toFile - fromFile) === 2) {
+    return [{ kind: "castle" }];
+  }
+  if (parsed.promotion !== null || isPawn(movingPiece) && (parsed.to >> 3 === 0 || parsed.to >> 3 === 7) && !isEmptyCell(targetAfter) && pieceTypeOf(targetAfter) !== 0) {
+    return [{ kind: "promotion" }];
+  }
+  if (!isEmptyCell(targetBefore) && colorOf(targetBefore) !== colorOf(movingPiece)) {
+    return [{ kind: "capture" }];
+  }
+  if (isPawn(movingPiece) && fromFile !== toFile && isEmptyCell(targetBefore)) {
+    const capturedSquare = parsed.from & -8 | toFile;
+    const capturedBefore = before[capturedSquare] ?? 0;
+    const capturedAfter = after[capturedSquare] ?? 0;
+    if (!isEmptyCell(capturedBefore) && colorOf(capturedBefore) !== colorOf(movingPiece) && isEmptyCell(capturedAfter)) {
+      return [{ kind: "en-passant" }];
+    }
+  }
+  return [{ kind: "move" }];
+}
+function schedulePositionAnimation(container, transitions, options, orientation) {
+  const animate = () => {
+    const rect = container.getBoundingClientRect();
+    const squareSize = rect.width / 8;
+    if (squareSize <= 0) return;
+    for (const item of transitions) {
+      const piece = queryPieceAt(container, item.to);
+      if (piece === null || typeof piece.animate !== "function") continue;
+      const { dx, dy } = deltaFromSquareNames(item.from, item.to, squareSize, orientation);
+      if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;
+      cancelElementAnimations(piece);
+      piece.animate(
+        [{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "translate(0, 0)" }],
+        { duration: options.durationMs, easing: options.easing, fill: "none" }
+      );
+    }
+  };
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(animate);
+  } else {
+    window.setTimeout(animate, 0);
+  }
+}
+function syncPositionFen(game, targetFen, transition, managedArrows, preserveUserArrows, container, animation, orientation) {
+  const positionChanged = game.engine.fen() !== targetFen;
+  const durationMs = animation?.durationMs ?? DEFAULT_POSITION_SYNC_DURATION_MS;
+  const easing = animation?.easing ?? DEFAULT_POSITION_SYNC_EASING;
+  const shouldAnimate = positionChanged && transition !== null && transition !== void 0 && container !== null && durationMs > 0 && !prefersReducedMotion3();
+  const transitions = [];
+  if (shouldAnimate) {
+    for (const item of transitionSquares(transition)) {
+      if (queryPieceAt(container, item.from) !== null) transitions.push(item);
+    }
+  }
+  try {
+    if (managedArrows === void 0) {
+      if (!positionChanged) return false;
+      game.load(targetFen);
+    } else {
+      game.syncPosition({
+        fen: targetFen,
+        managedArrows,
+        preserveUserArrows: preserveUserArrows === true
+      });
+    }
+  } catch {
+    return false;
+  }
+  if (transitions.length > 0 && container !== null) {
+    schedulePositionAnimation(container, transitions, { durationMs, easing }, orientation);
+  }
+  return positionChanged;
+}
+function Chessboard(props) {
+  const {
+    game,
+    fallbackFen,
+    positionFen,
+    positionTransition = null,
+    managedArrows,
+    preserveUserArrowsOnPositionSync,
+    orientation = "white",
+    theme = defaultTheme,
+    pieces = defaultPieces,
+    showCoordinates = true,
+    ranksPosition = "left",
+    showLegalTargets = "rings",
+    highlightLastMove = true,
+    onMove,
+    onPromote,
+    renderSquare,
+    style,
+    className,
+    ariaLabel,
+    animation,
+    allowDrag = true,
+    allowDrawingArrows = true,
+    clearArrowsOnMove = true,
+    clearArrowsOnClick = true,
+    arrowColors,
+    snapArrowsToValidMove = false,
+    allowPremove = false,
+    showCheckHighlight = true,
+    showIllegalFlash = true,
+    sound = true,
+    haptics = false,
+    viewOnly = false,
+    canDragPiece,
+    onSquareMouseEnter,
+    onSquareMouseLeave,
+    disableContextMenu = true,
+    getSquareAriaLabel,
+    onSquareFocus,
+    getPromotionPieceAriaLabel
+  } = props;
+  const dragEnabled = allowDrag && !viewOnly;
+  const arrowGestureEnabled = allowDrawingArrows && !viewOnly;
+  const clickToMoveEnabled = !viewOnly;
+  const keyboardNavEnabled = !viewOnly;
+  const fallbackBoard = useMemo(() => {
+    if (fallbackFen === void 0 || fallbackFen === "") return null;
+    try {
+      return parseFenPlacement(fallbackFen);
+    } catch {
+      return null;
+    }
+  }, [fallbackFen]);
+  const soundOptions = useMemo(() => {
+    if (sound === true) return { enabled: true };
+    if (sound === false || sound === void 0) return { enabled: false };
+    return sound;
+  }, [sound]);
+  const hapticOptions = useMemo(() => {
+    if (haptics === true) return { enabled: true };
+    if (haptics === false || haptics === void 0) return { enabled: false };
+    return haptics;
+  }, [haptics]);
+  const containerRef = useRef(null);
+  const dragLayerRef = useRef(null);
+  const arrowsLayerRef = useRef(null);
+  const lastControlledFeedbackFenRef = useRef(null);
+  const squareRefs = useRef(new Array(64).fill(null));
+  const setSquareRef = useCallback((index, el) => {
+    squareRefs.current[index] = el;
+  }, []);
+  const skipNextAnimationRef = useRef(false);
+  const onMoveRef = useRef(onMove);
+  const onPromoteRef = useRef(onPromote);
+  useEffect(() => {
+    onMoveRef.current = onMove;
+    onPromoteRef.current = onPromote;
+  });
+  const triggerMoveSound = useMoveSound(game, soundOptions);
+  const triggerMoveHaptic2 = useMoveHaptics(game, hapticOptions);
+  useLayoutEffect(() => {
+    if (game === null || positionFen === void 0 || positionFen === "") return;
+    const previousFeedbackFen = lastControlledFeedbackFenRef.current;
+    const previousSnapshot = game.getSnapshot();
+    if (game.engine.fen() === positionFen && managedArrows === void 0) {
+      lastControlledFeedbackFenRef.current = positionFen;
+      return;
+    }
+    const positionChanged = syncPositionFen(
+      game,
+      positionFen,
+      positionTransition,
+      managedArrows,
+      preserveUserArrowsOnPositionSync,
+      containerRef.current,
+      animation,
+      orientation
+    );
+    lastControlledFeedbackFenRef.current = positionFen;
+    if (!positionChanged || previousFeedbackFen === null || previousFeedbackFen === positionFen) {
+      return;
+    }
+    const snapshot = game.getSnapshot();
+    const feedbackDescriptors = controlledFeedbackDescriptors(positionTransition, previousSnapshot.board, snapshot.board) ?? game.lastAnimations;
+    const feedbackSnapshot = positionTransition?.direction === "backward" ? previousSnapshot : snapshot;
+    triggerMoveSound(
+      classifyMoveFeedback(feedbackDescriptors, feedbackSnapshot, soundOptions.perspective)
+    );
+    triggerMoveHaptic2(
+      classifyMoveFeedback(feedbackDescriptors, feedbackSnapshot, hapticOptions.perspective)
+    );
+  }, [
+    animation,
+    game,
+    hapticOptions.perspective,
+    positionFen,
+    positionTransition,
+    managedArrows,
+    preserveUserArrowsOnPositionSync,
+    orientation,
+    soundOptions.perspective,
+    triggerMoveHaptic2,
+    triggerMoveSound
+  ]);
+  const palette = useMemo(() => {
+    const merged = {
+      default: defaultArrowColors.default,
+      shift: defaultArrowColors.shift,
+      alt: defaultArrowColors.alt,
+      ctrl: defaultArrowColors.ctrl
+    };
+    if (arrowColors !== void 0) {
+      for (const k in arrowColors) {
+        const v = arrowColors[k];
+        if (v !== void 0) merged[k] = v;
+      }
+    }
+    return merged;
+  }, [arrowColors]);
+  const [pendingPromotion, setPendingPromotion] = useState(null);
+  const [focusedSquare, setFocusedSquare] = useState(null);
+  const defaultKeyboardFocus = useCallback(
+    () => orientation === "white" ? 12 : 52,
+    [orientation]
+  );
+  const [flashSquare, setFlashSquare] = useState(null);
+  const flashTimerRef = useRef(null);
+  const triggerIllegalFlash = useCallback(
+    (square) => {
+      if (!showIllegalFlash) return;
+      setFlashSquare(square);
+      if (flashTimerRef.current !== null) clearTimeout(flashTimerRef.current);
+      flashTimerRef.current = setTimeout(() => {
+        setFlashSquare(null);
+        flashTimerRef.current = null;
+      }, ILLEGAL_FLASH_HOLD_MS);
+    },
+    [showIllegalFlash]
+  );
+  useEffect(
+    () => () => {
+      if (flashTimerRef.current !== null) clearTimeout(flashTimerRef.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (game === null || !clearArrowsOnMove) return;
+    let prevPly = game.getSnapshot().historyPly;
+    return game.subscribe(() => {
+      const snap = game.getSnapshot();
+      if (snap.historyPly > prevPly && snap.arrows.length > 0) {
+        game.clearUserArrows();
+      }
+      prevPly = snap.historyPly;
+    });
+  }, [game, clearArrowsOnMove]);
+  const requestPromotion = useCallback(
+    (from, to) => {
+      if (game === null) return;
+      const fromCell = game.getSnapshot().board[from] ?? 0;
+      const color = colorOfCell(fromCell);
+      const completeMove = (piece) => {
+        const played = game.tryMove(from, to, piece);
+        const cb = onMoveRef.current;
+        if (played !== null && cb !== void 0) cb(played);
+      };
+      const promoteHandler = onPromoteRef.current;
+      if (promoteHandler !== void 0) {
+        Promise.resolve(promoteHandler({ from, to, color })).then(completeMove, () => {
+          skipNextAnimationRef.current = false;
+        });
+        return;
+      }
+      setPendingPromotion({
+        from,
+        to,
+        color,
+        resolve: (piece) => {
+          setPendingPromotion(null);
+          completeMove(piece);
+        },
+        cancel: () => {
+          skipNextAnimationRef.current = false;
+          setPendingPromotion(null);
+        }
+      });
+    },
+    [game]
+  );
+  const clickToMove = useClickToMove(game, onMove, requestPromotion, clickToMoveEnabled);
+  const maybeClearArrows = useCallback(() => {
+    if (!clearArrowsOnClick || game === null) return;
+    if (game.getSnapshot().arrows.length > 0) game.clearUserArrows();
+  }, [clearArrowsOnClick, game]);
+  const handleSquareClick = useCallback(
+    (index) => {
+      if (viewOnly) return;
+      maybeClearArrows();
+      clickToMove(index);
+    },
+    [viewOnly, maybeClearArrows, clickToMove]
+  );
+  useEffect(() => {
+    if (!clearArrowsOnClick || game === null || viewOnly) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") maybeClearArrows();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [clearArrowsOnClick, game, maybeClearArrows, viewOnly]);
+  useEffect(() => {
+    if (viewOnly || clickToMoveEnabled === false || game === null) return;
+    const container = containerRef.current;
+    if (container === null) return;
+    const onContainerClick = (e) => {
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (target === null) return;
+      if (target.closest("[data-piece-square]") === null) return;
+      const sq = getSquareAtPoint(container, e.clientX, e.clientY, orientation);
+      if (sq === null) return;
+      handleSquareClick(sq);
+    };
+    container.addEventListener("click", onContainerClick);
+    return () => container.removeEventListener("click", onContainerClick);
+  }, [viewOnly, clickToMoveEnabled, game, orientation, handleSquareClick]);
+  useEffect(() => {
+    if (!disableContextMenu) return;
+    const container = containerRef.current;
+    if (container === null) return;
+    const onContextMenu = (e) => {
+      e.preventDefault();
+    };
+    container.addEventListener("contextmenu", onContextMenu);
+    return () => container.removeEventListener("contextmenu", onContextMenu);
+  }, [disableContextMenu]);
+  const onDragStart = useCallback(
+    (from, _cell) => {
+      maybeClearArrows();
+      const container = containerRef.current;
+      if (container !== null) container.dataset["gbDragging"] = "true";
+      game?.selectSquare(from);
+    },
+    [game, maybeClearArrows]
+  );
+  const onDragEnd = useCallback(() => {
+    const container = containerRef.current;
+    if (container !== null) delete container.dataset["gbDragging"];
+  }, []);
+  const onDrop = useCallback(
+    (from, to) => {
+      if (game === null) return;
+      const snap = game.getSnapshot();
+      const fromCell = snap.board[from] ?? 0;
+      const pieceColour = colorOfCell(fromCell);
+      if (fromCell !== 0 && pieceColour !== snap.turn) {
+        if (!allowPremove) {
+          triggerIllegalFlash(from);
+          return;
+        }
+        const promotion = movePromotesPawn(fromCell, to) ? 4 : void 0;
+        game.queuePremove(promotion === void 0 ? { from, to } : { from, to, promotion });
+        return;
+      }
+      skipNextAnimationRef.current = true;
+      if (movePromotesPawn(fromCell, to) && game.isLegal(
+        from,
+        to,
+        4
+        /* Queen */
+      )) {
+        requestPromotion(from, to);
+        return;
+      }
+      const played = game.tryMove(from, to);
+      const cb = onMoveRef.current;
+      if (played !== null) {
+        if (cb !== void 0) cb(played);
+      } else {
+        skipNextAnimationRef.current = false;
+        triggerIllegalFlash(from);
+        game.selectSquare(from);
+      }
+    },
+    [game, requestPromotion, allowPremove, triggerIllegalFlash]
+  );
+  useDrag({
+    game,
+    orientation,
+    containerRef,
+    dragLayerRef,
+    enabled: dragEnabled && game !== null,
+    onDragStart,
+    onDragEnd,
+    onDrop,
+    ...canDragPiece !== void 0 ? { canDragPiece } : {}
+  });
+  useEffect(() => {
+    if (!keyboardNavEnabled) {
+      setFocusedSquare(null);
+      return;
+    }
+    setFocusedSquare((current) => current ?? defaultKeyboardFocus());
+  }, [defaultKeyboardFocus, keyboardNavEnabled]);
+  const onKeyboardActivate = useCallback(
+    (index) => {
+      maybeClearArrows();
+      clickToMove(index);
+    },
+    [maybeClearArrows, clickToMove]
+  );
+  const onKeyboardEscape = useCallback(() => {
+    maybeClearArrows();
+    game?.selectSquare(null);
+  }, [maybeClearArrows, game]);
+  useKeyboardNav({
+    containerRef,
+    orientation,
+    focusedSquare,
+    setFocusedSquare,
+    onActivate: onKeyboardActivate,
+    onEscape: onKeyboardEscape,
+    enabled: game !== null && keyboardNavEnabled
+  });
+  useHoverSquare({
+    game,
+    orientation,
+    containerRef,
+    enabled: onSquareMouseEnter !== void 0 || onSquareMouseLeave !== void 0,
+    ...onSquareMouseEnter !== void 0 ? { onEnter: onSquareMouseEnter } : {},
+    ...onSquareMouseLeave !== void 0 ? { onLeave: onSquareMouseLeave } : {}
+  });
+  useArrowGesture({
+    game,
+    orientation,
+    containerRef,
+    arrowsLayerRef,
+    enabled: arrowGestureEnabled && game !== null,
+    palette,
+    snapToValidMove: snapArrowsToValidMove
+  });
+  useSelectionController(game, squareRefs, showLegalTargets);
+  useLastMoveController(game, squareRefs, highlightLastMove);
+  useCursorController(game, containerRef, dragEnabled, allowPremove);
+  const animationRuntime = useMemo(() => ({ skipNextRef: skipNextAnimationRef }), []);
+  const containerStyle = {
+    position: "relative",
+    aspectRatio: "1 / 1",
+    width: "100%",
+    touchAction: "none",
+    // let the drag layer own pan gestures
+    ...theme,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: containerStyle,
+      "data-gb-orientation": orientation,
+      "data-gb-target-style": showLegalTargets === false ? "off" : showLegalTargets,
+      ...viewOnly ? { "data-gb-view-only": "true" } : {},
+      children: [
+        /* @__PURE__ */ jsx(
+          BoardGrid,
+          {
+            orientation,
+            onSquareClick: handleSquareClick,
+            focusedSquare,
+            setSquareRef,
+            readOnly: viewOnly,
+            model: game,
+            getSquareAriaLabel,
+            onSquareFocus,
+            ...renderSquare !== void 0 ? { renderSquare } : {},
+            ...ariaLabel !== void 0 ? { ariaLabel } : {}
+          }
+        ),
+        game !== null && showCheckHighlight ? /* @__PURE__ */ jsx(CheckLayer, { model: game, orientation }) : null,
+        game !== null ? /* @__PURE__ */ jsx(PremoveLayer, { model: game, orientation, pieces }) : null,
+        game !== null ? /* @__PURE__ */ jsx(ArrowsLayer, { model: game, orientation, palette, below: true }) : null,
+        game !== null ? /* @__PURE__ */ jsx(PieceLayer, { model: game, orientation, pieces }) : fallbackBoard !== null ? /* @__PURE__ */ jsx(StaticPieceLayer, { board: fallbackBoard, orientation, pieces }) : null,
+        game !== null ? /* @__PURE__ */ jsx(
+          AnimationRunner,
+          {
+            model: game,
+            containerRef,
+            orientation,
+            ...animation !== void 0 ? { options: animation } : {},
+            runtime: animationRuntime
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(DragLayer, { ref: dragLayerRef, pieces }),
+        game !== null ? /* @__PURE__ */ jsx(
+          ArrowsLayer,
+          {
+            ref: arrowsLayerRef,
+            model: game,
+            orientation,
+            palette
+          }
+        ) : null,
+        showCoordinates ? /* @__PURE__ */ jsx(Coordinates, { orientation, ranksPosition }) : null,
+        /* @__PURE__ */ jsx(IllegalFlashLayer, { at: flashSquare, orientation }),
+        game !== null ? /* @__PURE__ */ jsx(LiveRegion, { model: game }) : null,
+        pendingPromotion !== null ? /* @__PURE__ */ jsx(
+          PromotionOverlay,
+          {
+            from: pendingPromotion.from,
+            to: pendingPromotion.to,
+            color: pendingPromotion.color,
+            orientation,
+            pieces,
+            onSelect: pendingPromotion.resolve,
+            onCancel: pendingPromotion.cancel,
+            getPromotionPieceAriaLabel
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function useChessGame(options = {}) {
+  const { fen, ...modelOptions } = options;
+  const [initialModelOptions] = useState(() => modelOptions);
+  const [model, setModel] = useState(() => {
+    const adapter = createGigachessAdapter(fen);
+    return createBoardModel(adapter, modelOptions);
+  });
+  const prevFenRef = useRef(fen);
+  useEffect(() => {
+    if (prevFenRef.current !== fen) {
+      prevFenRef.current = fen;
+      const adapter = createGigachessAdapter(fen);
+      const nextModel = createBoardModel(adapter, initialModelOptions);
+      setModel((prev) => {
+        prev.dispose();
+        return nextModel;
+      });
+    }
+  }, [fen, initialModelOptions]);
+  useEffect(() => {
+    return () => {
+      model.dispose();
+    };
+  }, [model]);
+  return model;
+}
+
+// src/index.ts
+var PACKAGE_VERSION = "0.1.0-alpha";
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map