@hackersheet/next-document-content-kifu 0.1.0-alpha.16 → 0.1.0-alpha.18

package/dist/cjs/components/shogi-player/shogi-board-canvas.d.ts

@@ -1,17 +1,24 @@
-import { IMoveMoveFormat } from 'json-kifu-format/dist/src/Formats';
 import React from 'react';
-import { Piece } from 'shogi.js';
+import { ShogiBoardCanvasProps } from './types.js';
+import 'shogi.js';
 
-type Props = {
-    size?: number;
-    boardColor?: string;
-    lineColor?: string;
-    fontFamily?: string;
-    fontSizeRatio?: number;
-    pieces: Piece[][];
-    isSente?: boolean;
-    currentMove?: IMoveMoveFormat;
-};
-declare const ShogiBoardCanvas: React.FC<Props>;
+/**
+ * Canvas component for rendering the shogi board with pieces
+ *
+ * @component
+ * @param props - Component props
+ * @returns Canvas element displaying the shogi board
+ *
+ * @example
+ * ```tsx
+ * <ShogiBoardCanvas
+ *   size={360}
+ *   pieces={boardState}
+ *   isSente={true}
+ *   currentMove={lastMove}
+ * />
+ * ```
+ */
+declare const ShogiBoardCanvas: React.FC<ShogiBoardCanvasProps>;
 
 export { ShogiBoardCanvas as default };

package/dist/cjs/components/shogi-player/shogi-board-canvas.js

@@ -32,119 +32,9 @@ __export(shogi_board_canvas_exports, {
   default: () => shogi_board_canvas_default
 });
 module.exports = __toCommonJS(shogi_board_canvas_exports);
-var import_json_kifu_format = require("json-kifu-format");
 var import_react = __toESM(require("react"));
-var import_shogi = require("shogi.js");
-const getCanvasDimensions = (size) => {
-  const dpr = window.devicePixelRatio || 1;
-  return { width: size * dpr, height: size * dpr, dpr };
-};
-const getBoardLayout = (size) => {
-  const margin = size * 0.06;
-  const boardSize = size - margin * 2;
-  const cell = boardSize / 9;
-  return { margin, boardSize, cell };
-};
-const drawBackground = (ctx, size, boardColor) => {
-  ctx.fillStyle = boardColor;
-  ctx.fillRect(0, 0, size, size);
-};
-const drawBoard = (ctx, margin, boardSize, lineColor) => {
-  ctx.strokeStyle = lineColor;
-  ctx.lineWidth = 2;
-  ctx.strokeRect(margin, margin, boardSize, boardSize);
-  ctx.lineWidth = 1;
-  Array.from({ length: 8 }).forEach((_, i) => {
-    const offset = (i + 1) * (boardSize / 9);
-    ctx.beginPath();
-    ctx.moveTo(margin + offset, margin);
-    ctx.lineTo(margin + offset, margin + boardSize);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(margin, margin + offset);
-    ctx.lineTo(margin + boardSize, margin + offset);
-    ctx.stroke();
-  });
-};
-const drawPieces = (ctx, pieces, margin, cell, fontFamily, fontSizeRatio, isSente) => {
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  pieces.forEach((row, rowIndex) => {
-    row.forEach((piece, colIndex) => {
-      if (!piece) return;
-      const x = isSente ? 8 - rowIndex : rowIndex;
-      const y = isSente ? colIndex : 8 - colIndex;
-      const px = margin + x * cell + cell / 2;
-      const py = margin + y * cell + cell / 2;
-      ctx.save();
-      ctx.translate(px, py);
-      if (isSente && piece.color === import_shogi.Color.White) {
-        ctx.rotate(Math.PI);
-      } else if (!isSente && piece.color === import_shogi.Color.Black) {
-        ctx.rotate(Math.PI);
-      }
-      const kan = import_json_kifu_format.JKFPlayer.kindToKan(piece.kind);
-      ctx.fillStyle = "#000";
-      if (kan.length === 2) {
-        const baseFontSize = cell * fontSizeRatio * 0.5;
-        ctx.font = `${baseFontSize}px ${fontFamily}`;
-        const scaleX = 2;
-        const scaleY = 1;
-        const offsetY = cell * 0.18;
-        ctx.save();
-        ctx.scale(scaleX, scaleY);
-        ctx.fillText(kan[0], 0 / scaleX, -offsetY / scaleY);
-        ctx.restore();
-        ctx.save();
-        ctx.scale(scaleX, scaleY);
-        ctx.fillText(kan[1], 0 / scaleX, offsetY / scaleY);
-        ctx.restore();
-      } else {
-        const fontSize = cell * fontSizeRatio;
-        ctx.font = `${fontSize}px ${fontFamily}`;
-        ctx.fillText(kan, 0, 0);
-      }
-      ctx.restore();
-    });
-  });
-};
-const drawCoordinates = (ctx, margin, boardSize, cell, fontFamily, isSente) => {
-  ctx.fillStyle = "#000";
-  ctx.font = `${cell * 0.35}px ${fontFamily}`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  Array.from({ length: 9 }).forEach((_, i) => {
-    const x = margin + i * cell + cell / 2;
-    const y = margin / 2;
-    const label = isSente ? import_json_kifu_format.JKFPlayer.numToZen(9 - i) : import_json_kifu_format.JKFPlayer.numToZen(i + 1);
-    ctx.fillText(label, x, y);
-  });
-  Array.from({ length: 9 }).forEach((_, i) => {
-    const x = margin + boardSize + margin / 2;
-    const y = margin + i * cell + cell / 2;
-    const label = isSente ? import_json_kifu_format.JKFPlayer.numToKan(i + 1) : import_json_kifu_format.JKFPlayer.numToKan(9 - i);
-    ctx.fillText(label, x, y);
-  });
-};
-const drawHighlightedCell = (ctx, margin, cell, isSente, currentMove) => {
-  if (!currentMove) return;
-  if (currentMove.to) {
-    const toRow = currentMove.to.x - 1;
-    const toCol = currentMove.to.y - 1;
-    const toX = isSente ? 8 - toRow : toRow;
-    const toY = isSente ? toCol : 8 - toCol;
-    ctx.fillStyle = "rgba(255,0,0,0.1)";
-    ctx.fillRect(margin + toX * cell, margin + toY * cell, cell, cell);
-  }
-  if (currentMove.from) {
-    const fromRow = currentMove.from.x - 1;
-    const fromCol = currentMove.from.y - 1;
-    const fromX = isSente ? 8 - fromRow : fromRow;
-    const fromY = isSente ? fromCol : 8 - fromCol;
-    ctx.fillStyle = "rgba(255,0,0,0.1)";
-    ctx.fillRect(margin + fromX * cell, margin + fromY * cell, cell, cell);
-  }
-};
+var import_board_renderer = require("./board-renderer");
+var import_canvas_utils = require("./canvas-utils");
 const ShogiBoardCanvas = ({
   size = 360,
   boardColor = "#f9d27a",
@@ -161,19 +51,19 @@ const ShogiBoardCanvas = ({
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const { width, height, dpr } = getCanvasDimensions(size);
+    const { width, height, dpr } = (0, import_canvas_utils.getCanvasDimensions)(size);
     canvas.width = width;
     canvas.height = height;
     canvas.style.width = `${size}px`;
     canvas.style.height = `${size}px`;
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, size, size);
-    const { margin, boardSize, cell } = getBoardLayout(size);
-    drawBackground(ctx, size, boardColor);
-    drawBoard(ctx, margin, boardSize, lineColor);
-    drawHighlightedCell(ctx, margin, cell, isSente, currentMove);
-    drawPieces(ctx, pieces, margin, cell, fontFamily, fontSizeRatio, isSente);
-    drawCoordinates(ctx, margin, boardSize, cell, fontFamily, isSente);
+    const { margin, boardSize, cell } = (0, import_canvas_utils.getBoardLayout)(size);
+    (0, import_board_renderer.drawBoardBackground)(ctx, size, boardColor);
+    (0, import_board_renderer.drawBoardGrid)(ctx, margin, boardSize, lineColor);
+    (0, import_board_renderer.drawHighlightedCell)(ctx, margin, cell, isSente, currentMove);
+    (0, import_board_renderer.drawBoardPieces)(ctx, pieces, margin, cell, fontFamily, fontSizeRatio, isSente);
+    (0, import_board_renderer.drawBoardCoordinates)(ctx, margin, boardSize, cell, fontFamily, isSente);
   }, [size, boardColor, lineColor, fontFamily, fontSizeRatio, pieces, isSente, currentMove]);
   return /* @__PURE__ */ import_react.default.createElement("canvas", { ref: canvasRef, width: size, height: size });
 };

package/dist/cjs/components/shogi-player/shogi-hands-canvas.d.ts

@@ -1,16 +1,24 @@
 import React from 'react';
-import { Piece } from 'shogi.js';
+import { ShogiHandsCanvasProps } from './types.js';
+import 'shogi.js';
 
-type Props = {
-    size?: number;
-    boardColor?: string;
-    lineColor?: string;
-    fontFamily?: string;
-    fontSizeRatio?: number;
-    hands: Piece[][];
-    isSente?: boolean;
-    isTop?: boolean;
-};
-declare const ShogiHandsCanvas: React.FC<Props>;
+/**
+ * Canvas component for rendering captured pieces (hands)
+ *
+ * @component
+ * @param props - Component props
+ * @returns Canvas element displaying the hands (captured pieces area)
+ *
+ * @example
+ * ```tsx
+ * <ShogiHandsCanvas
+ *   size={360}
+ *   hands={capturedPieces}
+ *   isSente={true}
+ *   isTop={true}
+ * />
+ * ```
+ */
+declare const ShogiHandsCanvas: React.FC<ShogiHandsCanvasProps>;
 
 export { ShogiHandsCanvas as default };

package/dist/cjs/components/shogi-player/shogi-hands-canvas.js

@@ -32,80 +32,9 @@ __export(shogi_hands_canvas_exports, {
   default: () => shogi_hands_canvas_default
 });
 module.exports = __toCommonJS(shogi_hands_canvas_exports);
-var import_json_kifu_format = require("json-kifu-format");
 var import_react = __toESM(require("react"));
-var import_shogi = require("shogi.js");
-const getCanvasDimensions = (size) => {
-  const dpr = window.devicePixelRatio || 1;
-  return { width: size * dpr, height: size * dpr, dpr };
-};
-const getHandsLayout = (size) => {
-  const margin = size * 0.06;
-  const boardSize = size - margin * 2;
-  const cellSize = boardSize / 9;
-  const handsHeight = cellSize + margin + 2;
-  return { margin, handsHeight, boardSize, cellSize };
-};
-const drawBackground = (ctx, width, height, color) => {
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, width, height);
-};
-const drawHandsFrame = (ctx, x, y, width, height, lineColor, isTop) => {
-  ctx.strokeStyle = lineColor;
-  ctx.lineWidth = 2;
-  if (isTop) {
-    ctx.strokeRect(x, y, width, height);
-  } else {
-    ctx.strokeRect(x, 2, width, height);
-  }
-};
-const drawCoordinates = (ctx, fontSize, fontFamily) => {
-  ctx.fillStyle = "#000";
-  ctx.font = `${fontSize}px ${fontFamily}`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-};
-const drawPieces = (ctx, hands, margin, boardSize, cell, fontFamily, fontSizeRatio, isSente, isTop) => {
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-  const pieces = isSente && isTop || !isSente && !isTop ? hands[import_shogi.Color.White] : hands[import_shogi.Color.Black];
-  if (!pieces || pieces.length === 0) return;
-  const grouped = pieces.reduce(
-    (acc, piece) => {
-      if (!piece) return acc;
-      const key = piece.kind;
-      if (!acc[key]) acc[key] = { count: 0, color: piece.color };
-      acc[key].count += 1;
-      return acc;
-    },
-    {}
-  );
-  const order = ["OU", "HI", "KA", "KI", "GI", "KE", "KY", "FU"];
-  const kinds = order.filter((kind) => grouped[kind]);
-  kinds.forEach((kind, index) => {
-    const { count, color } = grouped[kind];
-    const px = isTop ? margin + boardSize - (index * cell + cell / 2) : margin + index * cell + cell / 2;
-    const py = isTop ? margin + cell / 2 : cell / 2 + 2;
-    ctx.save();
-    ctx.translate(px, py);
-    if (isSente && color === import_shogi.Color.White) {
-      ctx.rotate(Math.PI);
-    } else if (!isSente && color === import_shogi.Color.Black) {
-      ctx.rotate(Math.PI);
-    }
-    const fontSize = cell * fontSizeRatio;
-    const kan = import_json_kifu_format.JKFPlayer.kindToKan(kind);
-    ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.fillText(kan, 0, 0);
-    if (count > 1) {
-      ctx.font = `${fontSize * 0.5}px ${fontFamily}`;
-      const countOffsetX = cell * 0;
-      const countOffsetY = cell * 0.8;
-      ctx.fillText(String(count), countOffsetX, countOffsetY);
-    }
-    ctx.restore();
-  });
-};
+var import_canvas_utils = require("./canvas-utils");
+var import_hands_renderer = require("./hands-renderer");
 const ShogiHandsCanvas = ({
   size = 360,
   boardColor = "#f9d27a",
@@ -122,18 +51,17 @@ const ShogiHandsCanvas = ({
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const { margin, handsHeight, boardSize, cellSize } = getHandsLayout(size);
-    const { width: canvasWidth, dpr } = getCanvasDimensions(size);
+    const { margin, handsHeight, boardSize, cellSize } = (0, import_canvas_utils.getHandsLayout)(size);
+    const { width: canvasWidth, dpr } = (0, import_canvas_utils.getCanvasDimensions)(size);
     canvas.width = canvasWidth;
     canvas.height = handsHeight * dpr;
     canvas.style.width = `${size}px`;
     canvas.style.height = `${handsHeight}px`;
     ctx.scale(dpr, dpr);
     ctx.clearRect(0, 0, size, handsHeight);
-    drawBackground(ctx, size, handsHeight, boardColor);
-    drawHandsFrame(ctx, margin, margin, boardSize, cellSize, lineColor, isTop);
-    drawCoordinates(ctx, cellSize * 0.35, fontFamily);
-    drawPieces(ctx, hands, margin, boardSize, cellSize, fontFamily, fontSizeRatio, isSente, isTop);
+    (0, import_hands_renderer.drawHandsBackground)(ctx, size, handsHeight, boardColor);
+    (0, import_hands_renderer.drawHandsFrame)(ctx, margin, margin, boardSize, cellSize, lineColor, isTop);
+    (0, import_hands_renderer.drawHandsPieces)(ctx, hands, margin, boardSize, cellSize, fontFamily, fontSizeRatio, isSente, isTop);
   }, [size, boardColor, lineColor, fontFamily, fontSizeRatio, isSente, hands, isTop]);
   return /* @__PURE__ */ import_react.default.createElement("canvas", { ref: canvasRef });
 };

package/dist/cjs/components/shogi-player/shogi-player.d.ts

@@ -1,10 +1,32 @@
 import React from 'react';
+import { KifuAdapterFactory } from './types.js';
+import 'shogi.js';
 
+/**
+ * Props for the ShogiPlayer component
+ * @property kifuText - KIF format kifu (game record) text
+ * @property size - Canvas size in CSS pixels (default: 360)
+ * @property tesuu - Initial move number to display
+ * @property adapterFactory - Factory function for creating KifuAdapter (for DI/testing)
+ */
 type ShogiPlayerProps = {
     kifuText: string;
     size?: number;
     tesuu?: number;
+    adapterFactory?: KifuAdapterFactory;
 };
+/**
+ * Shogi game viewer component with board, hands, and move navigation
+ *
+ * @component
+ * @param props - Component props
+ * @returns Interactive shogi player with keyboard and button navigation
+ *
+ * @example
+ * ```tsx
+ * <ShogiPlayer kifuText={kifString} tesuu={10} />
+ * ```
+ */
 declare function ShogiPlayer(props: ShogiPlayerProps): React.JSX.Element;
 
 export { type ShogiPlayerProps, ShogiPlayer as default };

package/dist/cjs/components/shogi-player/shogi-player.js

@@ -32,48 +32,33 @@ __export(shogi_player_exports, {
   default: () => ShogiPlayer
 });
 module.exports = __toCommonJS(shogi_player_exports);
-var import_json_kifu_format = require("json-kifu-format");
 var import_react = __toESM(require("react"));
+var import_kifu_adapter = require("./adapters/kifu-adapter");
 var import_button = __toESM(require("./button"));
 var import_moves_area = __toESM(require("./moves-area"));
 var import_shogi_board_canvas = __toESM(require("./shogi-board-canvas"));
 var import_shogi_hands_canvas = __toESM(require("./shogi-hands-canvas"));
 function ShogiPlayer(props) {
-  const [player] = (0, import_react.useState)(import_json_kifu_format.JKFPlayer.parse(props.kifuText.trim()));
-  const [pieces, setPieces] = (0, import_react.useState)(player.shogi.board);
-  const [hands, setHands] = (0, import_react.useState)(player.shogi.hands);
-  const [moves, setMoves] = (0, import_react.useState)(player.kifu.moves);
-  const [tesuu, setTesuu] = (0, import_react.useState)(player.tesuu);
-  const [currentMove, setCurrentMove] = (0, import_react.useState)(player.getMove());
+  const factory = props.adapterFactory ?? import_kifu_adapter.createKifuAdapter;
+  const adapterRef = (0, import_react.useRef)(factory(props.kifuText));
+  const [gameState, setGameState] = (0, import_react.useState)(() => adapterRef.current.getState());
   const [isSente, setIsSente] = (0, import_react.useState)(true);
-  const [maxTesuu, setMaxTesuu] = (0, import_react.useState)(player.getMaxTesuu());
-  const [comments, setComments] = (0, import_react.useState)(player.getComments());
-  const size = props.size ? props.size : 360;
-  const updateState = () => {
-    setPieces([...player.shogi.board]);
-    setHands([...player.shogi.hands]);
-    setMoves([...player.kifu.moves]);
-    setCurrentMove(player.getMove());
-    setMaxTesuu(player.getMaxTesuu());
-    setComments(player.getComments());
-    setTesuu(player.tesuu);
-  };
-  const handleForward = () => {
-    player.forward();
-    updateState();
-  };
-  const handleBackward = () => {
-    player.backward();
-    updateState();
-  };
-  const handleGoto = (tesuu2) => {
-    player.goto(tesuu2);
-    updateState();
-  };
-  const handeleToggle = () => {
-    setIsSente(!isSente);
-    updateState();
-  };
+  const size = props.size ?? 360;
+  const handleForward = (0, import_react.useCallback)(() => {
+    const newState = adapterRef.current.forward();
+    setGameState(newState);
+  }, []);
+  const handleBackward = (0, import_react.useCallback)(() => {
+    const newState = adapterRef.current.backward();
+    setGameState(newState);
+  }, []);
+  const handleGoto = (0, import_react.useCallback)((tesuu) => {
+    const newState = adapterRef.current.goto(tesuu);
+    setGameState(newState);
+  }, []);
+  const handleToggle = (0, import_react.useCallback)(() => {
+    setIsSente((prev) => !prev);
+  }, []);
   const handleKeydown = (0, import_react.useCallback)(
     (event) => {
       event.preventDefault();
@@ -85,7 +70,7 @@ function ShogiPlayer(props) {
           break;
         case "Down":
         case "ArrowDown":
-          handleGoto(maxTesuu);
+          handleGoto(gameState.maxMoveIndex);
           break;
         case "Left":
         case "ArrowLeft":
@@ -97,16 +82,41 @@ function ShogiPlayer(props) {
           handleForward();
           break;
         case "r":
-          handeleToggle();
+          handleToggle();
           break;
       }
     },
-    [maxTesuu, isSente]
+    [gameState.maxMoveIndex, handleGoto, handleBackward, handleForward, handleToggle]
   );
   (0, import_react.useEffect)(() => {
     if (props.tesuu !== void 0) {
       handleGoto(props.tesuu);
     }
-  }, [props.tesuu]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col sm:flex-row w-fit", tabIndex: 1, onKeyDown: handleKeydown }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-[#f9d27a] text-black text-xs text-right p-1" }, isSente ? "\u2616 " + player.kifu.header["\u5F8C\u624B"] : "\u2617 " + player.kifu.header["\u5148\u624B"]), /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands, isSente, isTop: true }), /* @__PURE__ */ import_react.default.createElement(import_shogi_board_canvas.default, { size, pieces, isSente, currentMove }), /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands, isSente, isTop: false }), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-[#f9d27a] text-black text-xs p-1" }, isSente ? "\u2617 " + player.kifu.header["\u5148\u624B"] : "\u2616 " + player.kifu.header["\u5F8C\u624B"])), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col sm:w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hidden sm:block flex-1 relative w-full" }, /* @__PURE__ */ import_react.default.createElement(import_moves_area.default, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ import_react.default.createElement("div", { className: "hidden sm:block text-black border-black border-2 p-1 text-xs max-h-40 w-0 min-w-full overflow-auto" }, comments.map((comment, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index }, comment)), comments.length === 0 && tesuu !== 0 && /* @__PURE__ */ import_react.default.createElement("div", null, "\xA0"), tesuu === 0 && Object.entries(player.kifu.header).map(([key, value], i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, className: "whitespace-nowrap" }, key, ": ", value))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(0) }, "\u6700\u521D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleBackward }, "\u524D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleForward }, "\u6B21"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(maxTesuu) }, "\u6700\u5F8C"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handeleToggle }, "\u53CD\u8EE2"))));
+  }, [props.tesuu, handleGoto]);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      adapterRef.current.dispose();
+    };
+  }, []);
+  const topPlayerName = isSente ? `\u2616 ${gameState.header.goteName}` : `\u2617 ${gameState.header.senteName}`;
+  const bottomPlayerName = isSente ? `\u2617 ${gameState.header.senteName}` : `\u2616 ${gameState.header.goteName}`;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "flex flex-col sm:flex-row w-fit",
+      tabIndex: 0,
+      role: "application",
+      "aria-label": "Shogi player - use arrow keys to navigate, space or right arrow to move forward, left arrow to move backward, 'r' to flip board",
+      onKeyDown: handleKeydown
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-[#f9d27a] text-black text-xs text-right p-1" }, topPlayerName), /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands: gameState.hands, isSente, isTop: true }), /* @__PURE__ */ import_react.default.createElement(import_shogi_board_canvas.default, { size, pieces: gameState.board, isSente, currentMove: gameState.currentMove }), /* @__PURE__ */ import_react.default.createElement(import_shogi_hands_canvas.default, { size, hands: gameState.hands, isSente, isTop: false }), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-[#f9d27a] text-black text-xs p-1" }, bottomPlayerName)),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col sm:w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "hidden sm:block flex-1 relative w-full" }, /* @__PURE__ */ import_react.default.createElement(
+      import_moves_area.default,
+      {
+        readableMoves: gameState.readableMoves,
+        tesuu: gameState.currentMoveIndex,
+        onTesuuChange: handleGoto
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "hidden sm:block text-black border-black border-2 p-1 text-xs max-h-40 w-0 min-w-full overflow-auto" }, gameState.comments.map((comment, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index }, comment)), gameState.comments.length === 0 && gameState.currentMoveIndex !== 0 && /* @__PURE__ */ import_react.default.createElement("div", null, "\xA0"), gameState.currentMoveIndex === 0 && Object.entries(gameState.header).map(([key, value], i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, className: "whitespace-nowrap" }, key, ": ", value))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(0) }, "\u6700\u521D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleBackward }, "\u524D"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleForward }, "\u6B21"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: () => handleGoto(gameState.maxMoveIndex) }, "\u6700\u5F8C"), /* @__PURE__ */ import_react.default.createElement(import_button.default, { onClick: handleToggle }, "\u53CD\u8EE2")))
+  );
 }

package/dist/cjs/components/shogi-player/types.d.ts

@@ -0,0 +1,169 @@
+import { Piece } from 'shogi.js';
+
+/**
+ * Library-independent move representation
+ * @property from - Source position (optional for drops)
+ * @property to - Destination position
+ * @property color - Player color (0: sente/black, 1: gote/white)
+ * @property piece - Piece type being moved
+ * @property same - Whether the destination is the same as the previous move
+ * @property promote - Whether the piece promotes
+ * @property capture - Captured piece type (if any)
+ * @property relative - Relative movement direction (for disambiguation)
+ */
+interface Move {
+    from?: {
+        x: number;
+        y: number;
+    };
+    to?: {
+        x: number;
+        y: number;
+    };
+    color?: number;
+    piece?: string;
+    same?: boolean;
+    promote?: boolean;
+    capture?: string;
+    relative?: string;
+}
+/**
+ * Complete game state representation independent of external libraries
+ * @property board - 9x9 board with pieces (or null for empty squares)
+ * @property hands - Captured pieces for each player [sente, gote]
+ * @property currentMoveIndex - Current position in the move sequence
+ * @property maxMoveIndex - Total number of moves in the game
+ * @property currentMove - The move at the current position
+ * @property header - Game metadata (player names, date, etc.)
+ * @property comments - Comments for the current position
+ * @property readableMoves - Human-readable move strings (e.g., "☗７六歩")
+ */
+interface GameState {
+    board: (Piece | null)[][];
+    hands: [Piece[], Piece[]];
+    currentMoveIndex: number;
+    maxMoveIndex: number;
+    currentMove?: Move;
+    header: {
+        senteName: string;
+        goteName: string;
+        [key: string]: string;
+    };
+    comments: string[];
+    readableMoves: string[];
+}
+/**
+ * Adapter interface for kifu parsing libraries
+ * Wraps the underlying library and provides a clean interface for game navigation
+ */
+interface KifuAdapter {
+    /**
+     * Move forward one step in the game
+     * @returns Updated game state after the move
+     */
+    forward(): GameState;
+    /**
+     * Move backward one step in the game
+     * @returns Updated game state after the move
+     */
+    backward(): GameState;
+    /**
+     * Jump to a specific move index
+     * @param moveIndex - Target move index (0 = initial position)
+     * @returns Updated game state after navigation
+     */
+    goto(moveIndex: number): GameState;
+    /**
+     * Get the current game state without navigation
+     * @returns Current game state
+     */
+    getState(): GameState;
+    /**
+     * Clean up resources held by the adapter
+     */
+    dispose(): void;
+}
+/**
+ * Factory function type for creating KifuAdapter instances
+ * Used for dependency injection in tests
+ */
+type KifuAdapterFactory = (kifuText: string) => KifuAdapter;
+/**
+ * Props for ShogiBoardCanvas component
+ * @property size - Canvas size in CSS pixels (default: 360)
+ * @property boardColor - Background color of the board (default: '#f9d27a')
+ * @property lineColor - Color of board lines (default: '#000')
+ * @property fontFamily - Font family for coordinates and pieces (default: 'serif')
+ * @property fontSizeRatio - Font size ratio relative to cell size (default: 0.7)
+ * @property pieces - 2D array of pieces on the board (null for empty squares)
+ * @property isSente - Whether to display from black player's perspective (default: true)
+ * @property currentMove - Current move to highlight on the board
+ */
+type ShogiBoardCanvasProps = {
+    size?: number;
+    boardColor?: string;
+    lineColor?: string;
+    fontFamily?: string;
+    fontSizeRatio?: number;
+    pieces: (Piece | null)[][];
+    isSente?: boolean;
+    currentMove?: Move;
+};
+/**
+ * Props for ShogiHandsCanvas component
+ * @property size - Canvas size in CSS pixels (default: 360)
+ * @property boardColor - Background color (default: '#f9d27a')
+ * @property lineColor - Color of frame lines (default: '#000')
+ * @property fontFamily - Font family for piece names (default: 'serif')
+ * @property fontSizeRatio - Font size ratio relative to cell size (default: 0.7)
+ * @property hands - 2D array of captured pieces
+ * @property isSente - Whether to display from black player's perspective (default: true)
+ * @property isTop - Whether this is the top hands area (default: false)
+ */
+type ShogiHandsCanvasProps = {
+    size?: number;
+    boardColor?: string;
+    lineColor?: string;
+    fontFamily?: string;
+    fontSizeRatio?: number;
+    hands: Piece[][];
+    isSente?: boolean;
+    isTop?: boolean;
+};
+/**
+ * Canvas rendering dimensions including device pixel ratio
+ * @property width - Actual canvas width in device pixels
+ * @property height - Actual canvas height in device pixels
+ * @property dpr - Device pixel ratio for HiDPI displays
+ */
+type CanvasDimensions = {
+    width: number;
+    height: number;
+    dpr: number;
+};
+/**
+ * Layout information for the shogi board
+ * @property margin - Margin from canvas edge
+ * @property boardSize - Total size of the 9x9 board area
+ * @property cell - Size of a single cell in the board
+ */
+type BoardLayout = {
+    margin: number;
+    boardSize: number;
+    cell: number;
+};
+/**
+ * Layout information for the hands (captured pieces) area
+ * @property margin - Margin from canvas edge
+ * @property handsHeight - Total height of the hands canvas
+ * @property boardSize - Width of the hands area (same as board width)
+ * @property cellSize - Size of a single cell in the hands area
+ */
+type HandsLayout = {
+    margin: number;
+    handsHeight: number;
+    boardSize: number;
+    cellSize: number;
+};
+
+export type { BoardLayout, CanvasDimensions, GameState, HandsLayout, KifuAdapter, KifuAdapterFactory, Move, ShogiBoardCanvasProps, ShogiHandsCanvasProps };