@ankhorage/zora 25.11.0 → 26.0.0

package/src/types/chess.ts

@@ -4,33 +4,36 @@ import type { ZoraBaseProps } from './base';
 
 export type ChessBoardOrientation = 'white' | 'black';
 export type ChessPieceCode = string;
-export type ChessSquareId =
-  `${'a' | 'b' | 'c' | 'd' | 'e' | 'f' | 'g' | 'h'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}`;
-export type ChessPromotionPiece = 'q' | 'r' | 'b' | 'n';
 
-export interface ChessMoveAttempt {
-  readonly from: ChessSquareId;
-  readonly to: ChessSquareId;
-  readonly promotion?: ChessPromotionPiece;
+/** A caller-owned cell location in a rectangular chess presentation board. */
+export interface ChessBoardCell {
+  readonly column: number;
+  readonly row: number;
 }
 
-export interface ChessMoveResult extends Omit<ChessMoveAttempt, 'promotion'> {
-  readonly fen: string;
-  readonly lan: string;
-  readonly promotion?: ChessPromotionPiece;
-  readonly san: string;
+/** The bounded presentation dimensions supported by ChessBoard. */
+export interface ChessBoardDimensions {
+  readonly columns: number;
+  readonly rows: number;
+}
+
+export interface ChessMoveAttempt {
+  readonly from: ChessBoardCell;
+  readonly to: ChessBoardCell;
 }
 
 export interface ChessPieceState {
   readonly color: 'black' | 'white';
   readonly piece: ChessPieceCode;
-  readonly square: ChessSquareId;
+  readonly cell: ChessBoardCell;
 }
 
 export interface ChessPieceRenderContext {
   readonly color: string;
   readonly piece: ChessPieceCode;
-  readonly square: ChessSquareId;
+  readonly cell: ChessBoardCell;
+  /** Available cell edge length in pixels. */
+  readonly size: number;
 }
 
 export type ChessPieceRenderer = (context: ChessPieceRenderContext) => React.ReactNode;
@@ -65,20 +68,24 @@ export interface OpeningBookColorScheme {
 export type OpeningBookColorOverrides = Partial<OpeningBookColorScheme>;
 
 export interface ChessBoardProps extends ZoraBaseProps {
-  readonly fen?: string;
+  /** Number of displayed columns, from 2 through 24. */
+  readonly columns?: number;
+  /** Number of displayed rows, from 2 through 24. */
+  readonly rows?: number;
   readonly pieces?: readonly ChessPieceState[];
   readonly orientation?: ChessBoardOrientation;
-  readonly selectedSquare?: ChessSquareId | null;
-  readonly legalTargets?: readonly ChessSquareId[];
+  readonly selectedCell?: ChessBoardCell | null;
+  readonly legalTargets?: readonly ChessBoardCell[];
   readonly lastMove?: ChessMoveAttempt | null;
   readonly disabled?: boolean;
   readonly showCoordinates?: boolean;
-  readonly validateMoves?: boolean;
+  /** Enables explicit editor resize controls when a dimensions callback is supplied. */
+  readonly resizable?: boolean;
   readonly colorScheme?: ChessBoardColorOverrides;
-  readonly onSquarePress?: (square: ChessSquareId) => void;
+  readonly onCellPress?: (cell: ChessBoardCell) => void;
   readonly onMoveAttempt?: (move: ChessMoveAttempt) => void;
-  readonly onLegalMove?: (move: ChessMoveResult) => void;
-  readonly onInvalidMove?: (move: ChessMoveAttempt) => void;
+  /** Receives a caller-owned resize proposal; ZORA never mutates board dimensions. */
+  readonly onDimensionsChange?: (dimensions: ChessBoardDimensions) => void;
   readonly renderPiece?: ChessPieceRenderer;
 }
 

package/web-dist/chunks/Accordion-91sjb3zh.js

@@ -0,0 +1,453 @@
+'use client';
+import {
+  GridView2
+} from "./Accordion-t0k1cjca.js";
+import {
+  withZoraThemeScope
+} from "./Accordion-vj1m2wck.js";
+import {
+  useZoraTheme2
+} from "./Accordion-srjya6dz.js";
+import {
+  require_cjs
+} from "./Accordion-xgpzh4wq.js";
+import {
+  __toESM
+} from "./Accordion-nh0cs9hq.js";
+
+// src/features/chess/adapters/inbound/ChessBoard.tsx
+var import_react_native = __toESM(require_cjs(), 1);
+import React from "react";
+
+// src/features/chess/utils/createChessBoardCellPressHandler.ts
+function createChessBoardCellPressHandler({
+  disabled,
+  interactionPolicy,
+  onCellPress,
+  onMoveAttempt,
+  selectedCell
+}) {
+  return (cell) => {
+    if (disabled || interactionPolicy === "passive")
+      return;
+    onCellPress?.(cell);
+    if (selectedCell === null || selectedCell === undefined || cellsEqual(selectedCell, cell)) {
+      return;
+    }
+    onMoveAttempt?.({ from: selectedCell, to: cell });
+  };
+}
+function cellsEqual(left, right) {
+  return left.column === right.column && left.row === right.row;
+}
+
+// src/features/chess/utils/createChessBoardCells.ts
+var minimumDimension = 2;
+var maximumDimension = 24;
+function createChessBoardCells(columns, rows, orientation) {
+  validateChessBoardDimensions(columns, rows);
+  return Array.from({ length: rows }, (_, rowIndex) => Array.from({ length: columns }, (_, columnIndex) => {
+    const column = columnIndex + 1;
+    const row = rowIndex + 1;
+    return {
+      column,
+      height: 1,
+      id: `${column}:${row}`,
+      row,
+      width: 1,
+      x: orientation === "white" ? columnIndex : columns - column,
+      y: orientation === "white" ? rows - row : rowIndex
+    };
+  })).flat();
+}
+function validateChessBoardDimensions(columns, rows) {
+  if (![columns, rows].every((dimension) => Number.isInteger(dimension) && dimension >= minimumDimension && dimension <= maximumDimension)) {
+    throw new RangeError(`ChessBoard dimensions must be whole numbers from ${minimumDimension} through ${maximumDimension}.`);
+  }
+}
+
+// src/features/chess/utils/createChessBoardColorScheme.ts
+function createChessBoardColorScheme(theme, overrides) {
+  return {
+    border: theme.semantics.neutral.divider,
+    coordinateText: theme.semantics.content.muted,
+    darkPiece: theme.semantics.content.default,
+    darkSquare: theme.semantics.neutral.surfaceHover,
+    darkSquareText: theme.semantics.content.muted,
+    lastMoveFrom: theme.semantics.warning.softBg,
+    lastMoveTo: theme.semantics.warning.softBg,
+    legalTarget: theme.semantics.success.softBg,
+    lightPiece: theme.semantics.content.default,
+    lightSquare: theme.semantics.neutral.surface,
+    lightSquareText: theme.semantics.content.muted,
+    selectedSquare: theme.semantics.action.primary.softBg,
+    ...overrides
+  };
+}
+
+// src/features/chess/adapters/inbound/ChessBoard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var symbols = new Map([
+  ["white:p", "♙"],
+  ["white:n", "♘"],
+  ["white:b", "♗"],
+  ["white:r", "♖"],
+  ["white:q", "♕"],
+  ["white:k", "♔"],
+  ["black:p", "♟"],
+  ["black:n", "♞"],
+  ["black:b", "♝"],
+  ["black:r", "♜"],
+  ["black:q", "♛"],
+  ["black:k", "♚"]
+]);
+var minimumDimension2 = 2;
+var maximumDimension2 = 24;
+var ChessBoard2 = withZoraThemeScope(ChessBoardInner);
+function ChessBoardInner({
+  columns = 8,
+  rows = 8,
+  pieces,
+  orientation = "white",
+  selectedCell = null,
+  legalTargets = [],
+  lastMove = null,
+  disabled = false,
+  showCoordinates = false,
+  resizable = false,
+  colorScheme,
+  onCellPress,
+  onMoveAttempt,
+  onDimensionsChange,
+  renderPiece,
+  interactionPolicy,
+  testID
+}) {
+  const { theme } = useZoraTheme2();
+  const colors = createChessBoardColorScheme(theme, colorScheme);
+  const dimensions = React.useMemo(() => ({ columns, rows }), [columns, rows]);
+  const [width, setWidth] = React.useState(0);
+  const cells = React.useMemo(() => createChessBoardCells(columns, rows, orientation), [columns, orientation, rows]);
+  const piecesByCell = React.useMemo(() => new Map((pieces ?? []).map((piece) => [getCellKey(piece.cell), piece])), [pieces]);
+  const cellById = React.useMemo(() => new Map(cells.map((cell) => [cell.id, cell])), [cells]);
+  const legalTargetSet = React.useMemo(() => new Set(legalTargets.map(getCellKey)), [legalTargets]);
+  const pressCell = createChessBoardCellPressHandler({
+    disabled,
+    interactionPolicy,
+    onCellPress,
+    onMoveAttempt,
+    selectedCell
+  });
+  const canResize = resizable && onDimensionsChange !== undefined && !disabled && interactionPolicy !== "passive";
+  const height = width * (dimensions.rows / dimensions.columns);
+  const cellSize = width / dimensions.columns;
+  return /* @__PURE__ */ jsxs(import_react_native.View, {
+    accessibilityLabel: "Chess board",
+    onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+    style: [
+      styles.board,
+      {
+        aspectRatio: dimensions.columns / dimensions.rows,
+        borderColor: colors.border,
+        opacity: disabled ? 0.56 : 1
+      }
+    ],
+    testID,
+    children: [
+      width > 0 ? /* @__PURE__ */ jsx(GridView2, {
+        contentHeight: dimensions.rows,
+        contentWidth: dimensions.columns,
+        defaultViewport: { pixelsPerUnitX: cellSize, pixelsPerUnitY: cellSize },
+        height,
+        interactionPolicy: "passive",
+        items: cells,
+        overscanPixels: 0,
+        renderItem: (item) => {
+          const cell = cellById.get(item.id);
+          return cell === undefined ? null : renderChessBoardCell({
+            cell,
+            cellSize,
+            colors,
+            disabled: disabled || interactionPolicy === "passive",
+            lastMove,
+            legalTargetSet,
+            onPress: pressCell,
+            piece: piecesByCell.get(item.id),
+            renderPiece,
+            selectedCell,
+            showCoordinates,
+            testID
+          });
+        },
+        width
+      }) : null,
+      canResize ? renderChessBoardResizeActions(dimensions, onDimensionsChange, testID) : null
+    ]
+  });
+}
+function renderChessBoardCell({
+  cell,
+  cellSize,
+  colors,
+  disabled,
+  lastMove,
+  legalTargetSet,
+  onPress,
+  piece,
+  renderPiece,
+  selectedCell,
+  showCoordinates,
+  testID
+}) {
+  const light = (cell.column + cell.row) % 2 === 1;
+  const key = getCellKey(cell);
+  const backgroundColor = cellsEqual2(selectedCell, cell) ? colors.selectedSquare : legalTargetSet.has(key) ? colors.legalTarget : cellsEqual2(lastMove?.from, cell) ? colors.lastMoveFrom : cellsEqual2(lastMove?.to, cell) ? colors.lastMoveTo : light ? colors.lightSquare : colors.darkSquare;
+  const pieceContent = piece === undefined ? null : renderPiece ? renderPiece({
+    cell,
+    color: piece.color === "white" ? colors.lightPiece : colors.darkPiece,
+    piece: piece.piece,
+    size: cellSize
+  }) : symbols.get(`${piece.color}:${piece.piece.toLowerCase()}`) ?? piece.piece;
+  const coordinate = formatCellCoordinate(cell);
+  return /* @__PURE__ */ jsxs(import_react_native.Pressable, {
+    accessibilityLabel: coordinate,
+    accessibilityRole: "button",
+    accessibilityState: { disabled },
+    disabled,
+    onPress: () => onPress(cell),
+    style: [styles.square, { backgroundColor }],
+    testID: testID === undefined ? undefined : `${testID}-cell-${coordinate}`,
+    children: [
+      showCoordinates ? /* @__PURE__ */ jsx(import_react_native.Text, {
+        style: [
+          styles.coordinate,
+          { color: light ? colors.lightSquareText : colors.darkSquareText }
+        ],
+        children: coordinate
+      }) : null,
+      piece === undefined ? null : /* @__PURE__ */ jsx(import_react_native.View, {
+        pointerEvents: "none",
+        style: styles.pieceContainer,
+        children: renderPiece ? pieceContent : /* @__PURE__ */ jsx(import_react_native.Text, {
+          style: [
+            styles.piece,
+            {
+              color: piece.color === "white" ? colors.lightPiece : colors.darkPiece,
+              fontSize: cellSize * 0.58,
+              lineHeight: cellSize * 0.7
+            }
+          ],
+          children: pieceContent
+        })
+      })
+    ]
+  }, key);
+}
+function renderChessBoardResizeActions(dimensions, onDimensionsChange, testID) {
+  return /* @__PURE__ */ jsxs(import_react_native.View, {
+    accessibilityLabel: "Chess board dimensions",
+    style: styles.resizeActions,
+    children: [
+      renderResizeAction("Add row", { ...dimensions, rows: dimensions.rows + 1 }, onDimensionsChange, dimensions.rows < maximumDimension2, testID),
+      renderResizeAction("Remove row", { ...dimensions, rows: dimensions.rows - 1 }, onDimensionsChange, dimensions.rows > minimumDimension2, testID),
+      renderResizeAction("Add column", { ...dimensions, columns: dimensions.columns + 1 }, onDimensionsChange, dimensions.columns < maximumDimension2, testID),
+      renderResizeAction("Remove column", { ...dimensions, columns: dimensions.columns - 1 }, onDimensionsChange, dimensions.columns > minimumDimension2, testID)
+    ]
+  });
+}
+function renderResizeAction(label, dimensions, onDimensionsChange, enabled, testID) {
+  return /* @__PURE__ */ jsx(import_react_native.Pressable, {
+    accessibilityLabel: label,
+    accessibilityRole: "button",
+    disabled: !enabled,
+    onPress: () => onDimensionsChange(dimensions),
+    testID: testID === undefined ? undefined : `${testID}-${label.toLowerCase().replace(" ", "-")}`,
+    children: /* @__PURE__ */ jsx(import_react_native.Text, {
+      children: label
+    })
+  });
+}
+function cellsEqual2(left, right) {
+  if (!left || !right)
+    return false;
+  return left.column === right.column && left.row === right.row;
+}
+function formatCellCoordinate(cell) {
+  return `${String.fromCharCode(96 + cell.column)}${cell.row}`;
+}
+function getCellKey(cell) {
+  return `${cell.column}:${cell.row}`;
+}
+var styles = import_react_native.StyleSheet.create({
+  board: {
+    borderRadius: 12,
+    borderWidth: import_react_native.StyleSheet.hairlineWidth,
+    overflow: "hidden",
+    width: "100%"
+  },
+  coordinate: {
+    fontSize: 9,
+    fontWeight: "600",
+    left: 3,
+    opacity: 0.72,
+    position: "absolute",
+    top: 2,
+    zIndex: 2
+  },
+  piece: { fontWeight: "600" },
+  pieceContainer: {
+    alignItems: "center",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  resizeActions: { flexDirection: "row", gap: 8, padding: 8 },
+  square: { alignItems: "center", justifyContent: "center", position: "relative" }
+});
+
+// src/features/chess/adapters/inbound/OpeningBook.tsx
+var import_react_native2 = __toESM(require_cjs(), 1);
+
+// src/features/chess/utils/createOpeningBookColorScheme.ts
+function createOpeningBookColorScheme(theme, overrides) {
+  return {
+    border: theme.semantics.neutral.divider,
+    metricSurface: theme.semantics.neutral.surface,
+    primaryText: theme.semantics.content.default,
+    secondaryText: theme.semantics.content.muted,
+    selectedSurface: theme.semantics.action.primary.softBg,
+    surface: theme.semantics.neutral.surface,
+    surfaceHover: theme.semantics.neutral.surfaceHover,
+    titleText: theme.semantics.content.default,
+    ...overrides
+  };
+}
+
+// src/features/chess/adapters/inbound/OpeningBook.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OpeningBook2 = withZoraThemeScope(OpeningBookInner);
+function rate(label, value) {
+  if (value === undefined || !Number.isFinite(value))
+    return;
+  return `${label} ${Math.round(value <= 1 ? value * 100 : value)}%`;
+}
+function moveKey(move) {
+  return move.uci ?? move.fen ?? move.san;
+}
+function OpeningBookInner({
+  moves = [],
+  title = "Opening book",
+  loading = false,
+  errorText,
+  emptyText = "No book moves for this position.",
+  selectedMove = null,
+  colorScheme,
+  onMovePress,
+  interactionPolicy,
+  testID
+}) {
+  const { theme } = useZoraTheme2();
+  const colors = createOpeningBookColorScheme(theme, colorScheme);
+  const stateText = loading ? "Loading opening moves…" : errorText ?? emptyText;
+  const showState = loading || errorText !== undefined || moves.length === 0;
+  return /* @__PURE__ */ jsxs2(import_react_native2.View, {
+    accessibilityLabel: title,
+    style: [
+      styles2.root,
+      {
+        borderColor: colors.border,
+        backgroundColor: colors.surface
+      }
+    ],
+    testID,
+    children: [
+      /* @__PURE__ */ jsx2(import_react_native2.Text, {
+        style: [styles2.title, { color: colors.titleText }],
+        children: title
+      }),
+      !showState ? /* @__PURE__ */ jsx2(import_react_native2.View, {
+        style: styles2.moves,
+        children: moves.map((move) => {
+          const selected = selectedMove !== null && (selectedMove === move.san || selectedMove === move.uci || selectedMove === move.fen);
+          const details = [
+            move.eco,
+            move.name,
+            move.games === undefined ? undefined : `${move.games} games`
+          ].filter((part) => typeof part === "string" && part.length > 0);
+          const stats = [
+            rate("W", move.whiteWinRate),
+            rate("D", move.drawRate),
+            rate("B", move.blackWinRate)
+          ].filter((part) => part !== undefined);
+          return /* @__PURE__ */ jsxs2(import_react_native2.Pressable, {
+            accessibilityRole: "button",
+            disabled: onMovePress === undefined || interactionPolicy === "passive",
+            onPress: () => {
+              if (interactionPolicy === "passive")
+                return;
+              onMovePress?.(move);
+            },
+            style: [
+              styles2.move,
+              {
+                backgroundColor: selected ? colors.selectedSurface : colors.surfaceHover,
+                borderColor: colors.border
+              }
+            ],
+            testID: testID ? `${testID}-move-${move.san}` : undefined,
+            children: [
+              /* @__PURE__ */ jsxs2(import_react_native2.View, {
+                style: styles2.moveMain,
+                children: [
+                  /* @__PURE__ */ jsx2(import_react_native2.Text, {
+                    style: [styles2.san, { color: colors.primaryText }],
+                    children: move.san
+                  }),
+                  /* @__PURE__ */ jsx2(import_react_native2.Text, {
+                    style: [styles2.meta, { color: colors.secondaryText }],
+                    children: details.length > 0 ? details.join(" · ") : "Book move"
+                  })
+                ]
+              }),
+              stats.length > 0 ? /* @__PURE__ */ jsx2(import_react_native2.View, {
+                style: [styles2.metric, { backgroundColor: colors.metricSurface }],
+                children: /* @__PURE__ */ jsx2(import_react_native2.Text, {
+                  style: [styles2.metricText, { color: colors.secondaryText }],
+                  children: stats.join(" ")
+                })
+              }) : null
+            ]
+          }, moveKey(move));
+        })
+      }) : /* @__PURE__ */ jsx2(import_react_native2.Text, {
+        style: [styles2.stateText, { color: colors.secondaryText }],
+        children: stateText
+      })
+    ]
+  });
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  root: { borderRadius: 12, borderWidth: import_react_native2.StyleSheet.hairlineWidth, gap: 10, padding: 12 },
+  title: { fontSize: 15, fontWeight: "700", lineHeight: 20 },
+  stateText: { fontSize: 13, lineHeight: 18 },
+  moves: { gap: 8 },
+  move: {
+    alignItems: "center",
+    borderRadius: 10,
+    borderWidth: import_react_native2.StyleSheet.hairlineWidth,
+    flexDirection: "row",
+    gap: 10,
+    justifyContent: "space-between",
+    paddingHorizontal: 10,
+    paddingVertical: 8
+  },
+  moveMain: { flex: 1, gap: 2 },
+  san: { fontSize: 16, fontWeight: "700", lineHeight: 20 },
+  meta: { fontSize: 12, lineHeight: 16 },
+  metric: { borderRadius: 999, paddingHorizontal: 8, paddingVertical: 4 },
+  metricText: { fontSize: 11, fontWeight: "600" }
+});
+export { ChessBoard2, OpeningBook2 };

package/web-dist/components/chess-board/ChessBoard.js

@@ -1,10 +1,11 @@
 'use client';
+import"../../chunks/Accordion-t0k1cjca.js";
 import"../../chunks/Accordion-6wrr910w.js";
 import"../../chunks/Accordion-vj1m2wck.js";
 import {
   ChessBoard2,
   OpeningBook2
-} from "../../chunks/Accordion-xcm1qc39.js";
+} from "../../chunks/Accordion-91sjb3zh.js";
 import"../../chunks/Accordion-srjya6dz.js";
 import"../../chunks/Accordion-xgpzh4wq.js";
 export {