@ankhorage/zora 25.11.1 → 26.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ankhorage/zora",
   "type": "module",
-  "version": "25.11.1",
+  "version": "26.0.1",
   "description": "Opinionated React Native and React Native Web UI kit built on @ankhorage/surface.",
   "homepage": "https://github.com/ankhorage/zora#readme",
   "bugs": {
@@ -51,7 +51,6 @@
     "@ankhorage/runtime": "^5.2.4",
     "@ankhorage/surface": "^9.4.15",
     "@ankhorage/utility": "^1.10.0",
-    "chess.js": "^1.4.0",
     "expo-document-picker": "~57.0.3",
     "expo-image-picker": "~57.0.20"
   },
@@ -155,6 +154,7 @@
     "format:check": "ankhorage-prettier --check .",
     "prepack": "bun run build",
     "test": "bun run build && bun test src examples/grid-workspaces/time examples/grid-workspaces/plugins --isolate",
+    "test:graph-view:chromium": "bun scripts/test-graph-view-chromium.ts",
     "typecheck": "bun x tsc --noEmit -p tsconfig.json && bun x tsc --noEmit -p tsconfig.scripts.json && bun x tsc -p tsconfig.typecheck.json",
     "version-packages": "ankhorage-changeset version"
   },
@@ -171,8 +171,8 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/react-native-web": "^0.19.3",
-    "cytoscape": "^3.34.4",
-    "cytoscape-elk": "^2.3.0",
+    "cytoscape": "^3.35.0",
+    "cytoscape-elk": "^2.4.0",
     "happy-dom": "^21.0.4",
     "react": "19.2.3",
     "react-dom": "19.2.3",
@@ -529,7 +529,7 @@
         }
       },
       {
-        "id": "chess.invalidMove",
+        "id": "chess.cellPress",
         "owner": "@ankhorage/zora",
         "access": [
           "emit"
@@ -540,67 +540,18 @@
             "source"
           ]
         },
-        "label": "Invalid move",
+        "label": "Cell press",
         "output": {
           "schema": {
             "type": "object",
             "properties": {
-              "from": {
-                "type": "string",
-                "title": "From"
-              },
-              "to": {
-                "type": "string",
-                "title": "To"
-              },
-              "promotion": {
-                "type": "string",
-                "title": "Promotion"
-              }
-            }
-          }
-        }
-      },
-      {
-        "id": "chess.legalMove",
-        "owner": "@ankhorage/zora",
-        "access": [
-          "emit"
-        ],
-        "binding": {
-          "kind": "event",
-          "bindableAs": [
-            "source"
-          ]
-        },
-        "label": "Legal move",
-        "output": {
-          "schema": {
-            "type": "object",
-            "properties": {
-              "from": {
-                "type": "string",
-                "title": "From"
-              },
-              "to": {
-                "type": "string",
-                "title": "To"
-              },
-              "fen": {
-                "type": "string",
-                "title": "Position"
-              },
-              "san": {
-                "type": "string",
-                "title": "SAN"
-              },
-              "lan": {
-                "type": "string",
-                "title": "LAN"
+              "column": {
+                "type": "number",
+                "title": "Column"
               },
-              "promotion": {
-                "type": "string",
-                "title": "Promotion"
+              "row": {
+                "type": "number",
+                "title": "Row"
               }
             }
           }
@@ -624,16 +575,30 @@
             "type": "object",
             "properties": {
               "from": {
-                "type": "string",
-                "title": "From"
+                "type": "object",
+                "properties": {
+                  "column": {
+                    "type": "number",
+                    "title": "From column"
+                  },
+                  "row": {
+                    "type": "number",
+                    "title": "From row"
+                  }
+                }
               },
               "to": {
-                "type": "string",
-                "title": "To"
-              },
-              "promotion": {
-                "type": "string",
-                "title": "Promotion"
+                "type": "object",
+                "properties": {
+                  "column": {
+                    "type": "number",
+                    "title": "To column"
+                  },
+                  "row": {
+                    "type": "number",
+                    "title": "To row"
+                  }
+                }
               }
             }
           }
@@ -672,31 +637,6 @@
           }
         }
       },
-      {
-        "id": "chess.squarePress",
-        "owner": "@ankhorage/zora",
-        "access": [
-          "emit"
-        ],
-        "binding": {
-          "kind": "event",
-          "bindableAs": [
-            "source"
-          ]
-        },
-        "label": "Square press",
-        "output": {
-          "schema": {
-            "type": "object",
-            "properties": {
-              "square": {
-                "type": "string",
-                "title": "Square"
-              }
-            }
-          }
-        }
-      },
       {
         "id": "chip.press",
         "owner": "@ankhorage/zora",

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' },
 });