@ankhorage/zora 25.11.0 → 26.0.0

package/src/features/chess/adapters/inbound/ChessBoard.tsx

@@ -2,17 +2,18 @@ import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type {
+  ChessBoardCell,
+  ChessBoardDimensions,
   ChessBoardProps,
   ChessMoveAttempt,
   ChessPieceState,
-  ChessSquareId,
 } from '../../../../types/chess';
+import { GridView } from '../../../grid-view/public';
 import { withZoraThemeScope } from '../../../theme/adapters/inbound/withZoraThemeScope';
 import { useZoraTheme } from '../../../theme/composition/useZoraTheme';
-import { getLegalTargets, readChessPieces, tryMove } from '../../utils/chessEngine';
-import { createBoardSquares } from '../../utils/createBoardSquares';
+import { createChessBoardCellPressHandler } from '../../utils/createChessBoardCellPressHandler';
+import { createChessBoardCells } from '../../utils/createChessBoardCells';
 import { createChessBoardColorScheme } from '../../utils/createChessBoardColorScheme';
-import { isLightSquare } from '../../utils/isLightSquare';
 
 const symbols = new Map<string, string>([
   ['white:p', '♙'],
@@ -28,138 +29,293 @@ const symbols = new Map<string, string>([
   ['black:q', '♛'],
   ['black:k', '♚'],
 ]);
+const minimumDimension = 2;
+const maximumDimension = 24;
 
-/*** Renders caller-owned or FEN-backed chess state with optional legal-move validation. */
+/*** Renders a configurable caller-owned chess presentation through the shared GridView surface. */
 export const ChessBoard = withZoraThemeScope(ChessBoardInner);
 
-/*** Renders the current presentation state and delegates FEN validation to the core chess engine. */
+/*** Renders board state and emits caller-owned cell and move intents without applying chess rules. */
 function ChessBoardInner({
-  fen,
+  columns = 8,
+  rows = 8,
   pieces,
   orientation = 'white',
-  selectedSquare = null,
-  legalTargets,
+  selectedCell = null,
+  legalTargets = [],
   lastMove = null,
   disabled = false,
   showCoordinates = false,
-  validateMoves = true,
+  resizable = false,
   colorScheme,
-  onSquarePress,
+  onCellPress,
   onMoveAttempt,
-  onLegalMove,
-  onInvalidMove,
+  onDimensionsChange,
   renderPiece,
   interactionPolicy,
   testID,
 }: ChessBoardProps) {
   const { theme } = useZoraTheme();
   const colors = createChessBoardColorScheme(theme, colorScheme);
-  const squares = createBoardSquares(orientation);
-  const piecesBySquare =
-    pieces === undefined
-      ? fen === undefined
-        ? new Map<ChessSquareId, ChessPieceState>()
-        : new Map(readChessPieces(fen))
-      : new Map<ChessSquareId, ChessPieceState>(pieces.map((piece) => [piece.square, piece]));
-  const resolvedLegalTargets =
-    legalTargets ??
-    (fen !== undefined && selectedSquare !== null ? getLegalTargets(fen, selectedSquare) : []);
-  const legalTargetSet = new Set(resolvedLegalTargets);
-  const pressSquare = (square: ChessSquareId) => {
-    if (disabled || interactionPolicy === 'passive') return;
-    onSquarePress?.(square);
-    if (selectedSquare === null || selectedSquare === square) return;
-
-    const attempt: ChessMoveAttempt = { from: selectedSquare, to: square };
-    onMoveAttempt?.(attempt);
-    if (!validateMoves || fen === undefined) return;
+  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;
 
-    const result = tryMove(fen, attempt);
-    if (result) onLegalMove?.(result);
-    else onInvalidMove?.(attempt);
-  };
   return (
     <View
       accessibilityLabel="Chess board"
-      style={[styles.board, { borderColor: colors.border, opacity: disabled ? 0.56 : 1 }]}
+      onLayout={(event) => setWidth(event.nativeEvent.layout.width)}
+      style={[
+        styles.board,
+        {
+          aspectRatio: dimensions.columns / dimensions.rows,
+          borderColor: colors.border,
+          opacity: disabled ? 0.56 : 1,
+        },
+      ]}
       testID={testID}
     >
-      {squares.map((square) => {
-        const piece = piecesBySquare.get(square);
-        const light = isLightSquare(square);
-        const isTarget = legalTargetSet.has(square);
-        const backgroundColor =
-          selectedSquare === square
-            ? colors.selectedSquare
-            : isTarget
-              ? colors.legalTarget
-              : lastMove?.from === square
-                ? colors.lastMoveFrom
-                : lastMove?.to === square
-                  ? colors.lastMoveTo
-                  : light
-                    ? colors.lightSquare
-                    : colors.darkSquare;
-        const pieceContent =
-          piece === undefined
-            ? null
-            : renderPiece
-              ? renderPiece({
+      {width > 0 ? (
+        <GridView
+          contentHeight={dimensions.rows}
+          contentWidth={dimensions.columns}
+          defaultViewport={{ pixelsPerUnitX: cellSize, pixelsPerUnitY: cellSize }}
+          height={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={width}
+        />
+      ) : null}
+      {canResize ? renderChessBoardResizeActions(dimensions, onDimensionsChange, testID) : null}
+    </View>
+  );
+}
+
+/*** Render one accessible, caller-controlled rectangular board cell. */
+function renderChessBoardCell({
+  cell,
+  cellSize,
+  colors,
+  disabled,
+  lastMove,
+  legalTargetSet,
+  onPress,
+  piece,
+  renderPiece,
+  selectedCell,
+  showCoordinates,
+  testID,
+}: {
+  readonly cell: ChessBoardCell & { readonly id: string };
+  readonly cellSize: number;
+  readonly colors: ReturnType<typeof createChessBoardColorScheme>;
+  readonly disabled: boolean;
+  readonly lastMove: ChessMoveAttempt | null;
+  readonly legalTargetSet: ReadonlySet<string>;
+  readonly onPress: (cell: ChessBoardCell) => void;
+  readonly piece: ChessPieceState | undefined;
+  readonly renderPiece: ChessBoardProps['renderPiece'];
+  readonly selectedCell: ChessBoardCell | null;
+  readonly showCoordinates: boolean;
+  readonly testID: string | undefined;
+}) {
+  const light = (cell.column + cell.row) % 2 === 1;
+  const key = getCellKey(cell);
+  const backgroundColor = cellsEqual(selectedCell, cell)
+    ? colors.selectedSquare
+    : legalTargetSet.has(key)
+      ? colors.legalTarget
+      : cellsEqual(lastMove?.from, cell)
+        ? colors.lastMoveFrom
+        : cellsEqual(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 (
+    <Pressable
+      accessibilityLabel={coordinate}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      disabled={disabled}
+      key={key}
+      onPress={() => onPress(cell)}
+      style={[styles.square, { backgroundColor }]}
+      testID={testID === undefined ? undefined : `${testID}-cell-${coordinate}`}
+    >
+      {showCoordinates ? (
+        <Text
+          style={[
+            styles.coordinate,
+            { color: light ? colors.lightSquareText : colors.darkSquareText },
+          ]}
+        >
+          {coordinate}
+        </Text>
+      ) : null}
+      {piece === undefined ? null : (
+        <View pointerEvents="none" style={styles.pieceContainer}>
+          {renderPiece ? (
+            pieceContent
+          ) : (
+            <Text
+              style={[
+                styles.piece,
+                {
                   color: piece.color === 'white' ? colors.lightPiece : colors.darkPiece,
-                  piece: piece.piece,
-                  square,
-                })
-              : (symbols.get(`${piece.color}:${piece.piece.toLowerCase()}`) ?? piece.piece);
-        return (
-          <Pressable
-            accessibilityLabel={square}
-            accessibilityRole="button"
-            disabled={disabled || interactionPolicy === 'passive'}
-            key={square}
-            onPress={() => pressSquare(square)}
-            style={[styles.square, { backgroundColor }]}
-            testID={testID ? `${testID}-square-${square}` : undefined}
-          >
-            {showCoordinates ? (
-              <Text
-                style={[
-                  styles.coordinate,
-                  { color: light ? colors.lightSquareText : colors.darkSquareText },
-                ]}
-              >
-                {square}
-              </Text>
-            ) : null}
-            {piece === undefined ? null : (
-              <View pointerEvents="none" style={styles.pieceContainer}>
-                {renderPiece ? (
-                  pieceContent
-                ) : (
-                  <Text
-                    style={[
-                      styles.piece,
-                      { color: piece.color === 'white' ? colors.lightPiece : colors.darkPiece },
-                    ]}
-                  >
-                    {pieceContent}
-                  </Text>
-                )}
-              </View>
-            )}
-          </Pressable>
-        );
-      })}
+                  fontSize: cellSize * 0.58,
+                  lineHeight: cellSize * 0.7,
+                },
+              ]}
+            >
+              {pieceContent}
+            </Text>
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+/*** Render bounded editor actions only when the caller explicitly enables dimension editing. */
+function renderChessBoardResizeActions(
+  dimensions: ChessBoardDimensions,
+  onDimensionsChange: (dimensions: ChessBoardDimensions) => void,
+  testID: string | undefined,
+) {
+  return (
+    <View accessibilityLabel="Chess board dimensions" style={styles.resizeActions}>
+      {renderResizeAction(
+        'Add row',
+        { ...dimensions, rows: dimensions.rows + 1 },
+        onDimensionsChange,
+        dimensions.rows < maximumDimension,
+        testID,
+      )}
+      {renderResizeAction(
+        'Remove row',
+        { ...dimensions, rows: dimensions.rows - 1 },
+        onDimensionsChange,
+        dimensions.rows > minimumDimension,
+        testID,
+      )}
+      {renderResizeAction(
+        'Add column',
+        { ...dimensions, columns: dimensions.columns + 1 },
+        onDimensionsChange,
+        dimensions.columns < maximumDimension,
+        testID,
+      )}
+      {renderResizeAction(
+        'Remove column',
+        { ...dimensions, columns: dimensions.columns - 1 },
+        onDimensionsChange,
+        dimensions.columns > minimumDimension,
+        testID,
+      )}
     </View>
   );
 }
 
+/*** Render one caller-controlled dimension-change action. */
+function renderResizeAction(
+  label: string,
+  dimensions: ChessBoardDimensions,
+  onDimensionsChange: (dimensions: ChessBoardDimensions) => void,
+  enabled: boolean,
+  testID: string | undefined,
+) {
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      disabled={!enabled}
+      onPress={() => onDimensionsChange(dimensions)}
+      testID={
+        testID === undefined ? undefined : `${testID}-${label.toLowerCase().replace(' ', '-')}`
+      }
+    >
+      <Text>{label}</Text>
+    </Pressable>
+  );
+}
+
+/*** Compares optional cell coordinates without attaching chess-rule meaning to them. */
+function cellsEqual(
+  left: ChessBoardCell | undefined | null,
+  right: ChessBoardCell | undefined | null,
+): boolean {
+  if (!left || !right) return false;
+  return left.column === right.column && left.row === right.row;
+}
+
+/*** Format a stable display label for a bounded board cell. */
+function formatCellCoordinate(cell: ChessBoardCell): string {
+  return `${String.fromCharCode(96 + cell.column)}${cell.row}`;
+}
+
+/*** Create a stable generic identity from caller-owned row and column values. */
+function getCellKey(cell: ChessBoardCell): string {
+  return `${cell.column}:${cell.row}`;
+}
+
 const styles = StyleSheet.create({
   board: {
-    aspectRatio: 1,
     borderRadius: 12,
     borderWidth: StyleSheet.hairlineWidth,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
     overflow: 'hidden',
     width: '100%',
   },
@@ -172,7 +328,7 @@ const styles = StyleSheet.create({
     top: 2,
     zIndex: 2,
   },
-  piece: { fontSize: 32, fontWeight: '600', lineHeight: 38 },
+  piece: { fontWeight: '600' },
   pieceContainer: {
     alignItems: 'center',
     bottom: 0,
@@ -182,11 +338,6 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
   },
-  square: {
-    alignItems: 'center',
-    aspectRatio: 1,
-    width: '12.5%',
-    justifyContent: 'center',
-    position: 'relative',
-  },
+  resizeActions: { flexDirection: 'row', gap: 8, padding: 8 },
+  square: { alignItems: 'center', justifyContent: 'center', position: 'relative' },
 });

package/src/features/chess/meta.ts

@@ -9,42 +9,31 @@ export const chessBoardMeta = {
   allowedChildren: [],
   blueprint: {
     label: 'Chess board',
-    defaultProps: { pieces: [], orientation: 'white', showCoordinates: true, validateMoves: true },
+    defaultProps: {
+      columns: 8,
+      pieces: [],
+      orientation: 'white',
+      rows: 8,
+      showCoordinates: true,
+    },
   },
   events: {
-    squarePress: {
-      label: 'Square press',
-      eventType: 'chess.squarePress',
-      payloadFields: [{ path: 'square', type: 'string', label: 'Square' }],
+    cellPress: {
+      label: 'Cell press',
+      eventType: 'chess.cellPress',
+      payloadFields: [
+        { path: 'column', type: 'number', label: 'Column' },
+        { path: 'row', type: 'number', label: 'Row' },
+      ],
     },
     moveAttempt: {
       label: 'Move attempt',
       eventType: 'chess.moveAttempt',
       payloadFields: [
-        { path: 'from', type: 'string', label: 'From' },
-        { path: 'to', type: 'string', label: 'To' },
-        { path: 'promotion', type: 'string', label: 'Promotion' },
-      ],
-    },
-    legalMove: {
-      label: 'Legal move',
-      eventType: 'chess.legalMove',
-      payloadFields: [
-        { path: 'from', type: 'string', label: 'From' },
-        { path: 'to', type: 'string', label: 'To' },
-        { path: 'fen', type: 'string', label: 'Position' },
-        { path: 'san', type: 'string', label: 'SAN' },
-        { path: 'lan', type: 'string', label: 'LAN' },
-        { path: 'promotion', type: 'string', label: 'Promotion' },
-      ],
-    },
-    invalidMove: {
-      label: 'Invalid move',
-      eventType: 'chess.invalidMove',
-      payloadFields: [
-        { path: 'from', type: 'string', label: 'From' },
-        { path: 'to', type: 'string', label: 'To' },
-        { path: 'promotion', type: 'string', label: 'Promotion' },
+        { path: 'from.column', type: 'number', label: 'From column' },
+        { path: 'from.row', type: 'number', label: 'From row' },
+        { path: 'to.column', type: 'number', label: 'To column' },
+        { path: 'to.row', type: 'number', label: 'To row' },
       ],
     },
   },
@@ -56,19 +45,46 @@ export const chessBoardMeta = {
         acceptsFallback: true,
         acceptsTransforms: true,
       },
+      selectedCell: {
+        label: 'Selected cell',
+        value: {
+          type: 'object',
+          fields: [
+            { path: 'column', type: 'number', label: 'Column' },
+            { path: 'row', type: 'number', label: 'Row' },
+          ],
+        },
+        acceptsFallback: true,
+        acceptsTransforms: true,
+      },
       legalTargets: {
         label: 'Legal targets',
-        value: { type: 'array', itemType: 'string' },
+        value: {
+          type: 'array',
+          itemType: 'object',
+          fields: [
+            { path: '[].column', type: 'number', label: 'Column' },
+            { path: '[].row', type: 'number', label: 'Row' },
+          ],
+        },
         acceptsFallback: true,
         acceptsTransforms: true,
       },
     },
   },
   props: {
-    fen: {
-      type: 'string',
-      category: 'Position',
-      label: 'FEN',
+    columns: {
+      type: 'number',
+      category: 'Board',
+      label: 'Columns',
+      default: 8,
+      authoring: { authority: 'instance' },
+    },
+    rows: {
+      type: 'number',
+      category: 'Board',
+      label: 'Rows',
+      default: 8,
       authoring: { authority: 'instance' },
     },
     pieces: {
@@ -86,10 +102,14 @@ export const chessBoardMeta = {
       default: 'white',
       authoring: { authority: 'instance' },
     },
-    selectedSquare: {
-      type: 'string',
+    selectedCell: {
+      type: 'object',
       category: 'Board',
-      label: 'Selected square',
+      label: 'Selected cell',
+      itemSchema: [
+        { key: 'column', schema: { type: 'number', category: 'Cell' } },
+        { key: 'row', schema: { type: 'number', category: 'Cell' } },
+      ],
       authoring: { authority: 'instance' },
     },
     legalTargets: {
@@ -97,6 +117,10 @@ export const chessBoardMeta = {
       category: 'Board',
       label: 'Legal targets',
       default: [],
+      itemSchema: [
+        { key: 'column', schema: { type: 'number', category: 'Cell' } },
+        { key: 'row', schema: { type: 'number', category: 'Cell' } },
+      ],
       authoring: { authority: 'instance' },
     },
     showCoordinates: {
@@ -106,11 +130,11 @@ export const chessBoardMeta = {
       default: false,
       authoring: { authority: 'instance' },
     },
-    validateMoves: {
+    resizable: {
       type: 'boolean',
       category: 'Behavior',
-      label: 'Validate moves',
-      default: true,
+      label: 'Resizable',
+      default: false,
       authoring: { authority: 'instance' },
     },
     disabled: {