@hackersheet/next-document-content-kifu 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/cjs/components/kifu/kifu.js

@@ -34,7 +34,7 @@ __export(kifu_exports, {
 module.exports = __toCommonJS(kifu_exports);
 var import_navigation = require("next/navigation");
 var import_react = __toESM(require("react"));
-var import_shogi_player = require("../shogi-player");
+var import_shogi_player = __toESM(require("../shogi-player/shogi-player"));
 function Kifu({ code, language }) {
   const [ply, setPly] = (0, import_react.useState)(0);
   const [, filename] = language.split(":");
@@ -47,5 +47,5 @@ function Kifu({ code, language }) {
       setPly(newPly);
     }
   }, [searchParams, id]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_shogi_player.ShogiPlayer, { kifuText: code, tesuu: ply, size: 320 }));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_shogi_player.default, { kifuText: code, tesuu: ply, size: 320 }));
 }

package/dist/cjs/components/shogi-player/adapters/kifu-adapter.d.ts

@@ -0,0 +1,11 @@
+import { KifuAdapter } from '../types.js';
+import 'shogi.js';
+
+/**
+ * Factory function to create a KifuAdapter from KIF text
+ * @param kifuText - KIF format game record text
+ * @returns KifuAdapter instance
+ */
+declare function createKifuAdapter(kifuText: string): KifuAdapter;
+
+export { createKifuAdapter };

package/dist/cjs/components/shogi-player/adapters/kifu-adapter.js

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var kifu_adapter_exports = {};
+__export(kifu_adapter_exports, {
+  createKifuAdapter: () => createKifuAdapter
+});
+module.exports = __toCommonJS(kifu_adapter_exports);
+var import_json_kifu_format = require("json-kifu-format");
+function convertToMove(move) {
+  if (!move?.move) {
+    return void 0;
+  }
+  const m = move.move;
+  return {
+    from: m.from ? { x: m.from.x, y: m.from.y } : void 0,
+    to: m.to ? { x: m.to.x, y: m.to.y } : void 0,
+    color: m.color,
+    piece: m.piece,
+    same: m.same,
+    promote: m.promote,
+    capture: m.capture,
+    relative: m.relative
+  };
+}
+class JKFPlayerAdapter {
+  player;
+  readableMoves;
+  constructor(kifuText) {
+    this.player = import_json_kifu_format.JKFPlayer.parse(kifuText.trim());
+    this.readableMoves = this.buildReadableMoves();
+  }
+  /**
+   * Pre-compute readable move strings for all moves
+   */
+  buildReadableMoves() {
+    const moves = this.player.kifu.moves;
+    return moves.map((move, index) => {
+      if (index === 0) {
+        return "\u958B\u59CB\u5C40\u9762";
+      }
+      return import_json_kifu_format.JKFPlayer.moveToReadableKifu(move);
+    });
+  }
+  /**
+   * Extract current game state from JKFPlayer
+   */
+  extractState() {
+    const header = this.player.kifu.header;
+    return {
+      board: [...this.player.shogi.board],
+      hands: [...this.player.shogi.hands],
+      currentMoveIndex: this.player.tesuu,
+      maxMoveIndex: this.player.getMaxTesuu(),
+      currentMove: convertToMove(this.player.kifu.moves[this.player.tesuu]),
+      header: {
+        senteName: header["\u5148\u624B"] || header["\u4E0B\u624B"] || "",
+        goteName: header["\u5F8C\u624B"] || header["\u4E0A\u624B"] || "",
+        ...header
+      },
+      comments: this.player.getComments(),
+      readableMoves: this.readableMoves
+    };
+  }
+  forward() {
+    this.player.forward();
+    return this.extractState();
+  }
+  backward() {
+    this.player.backward();
+    return this.extractState();
+  }
+  goto(moveIndex) {
+    this.player.goto(moveIndex);
+    return this.extractState();
+  }
+  getState() {
+    return this.extractState();
+  }
+  dispose() {
+  }
+}
+function createKifuAdapter(kifuText) {
+  return new JKFPlayerAdapter(kifuText);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createKifuAdapter
+});

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

@@ -0,0 +1,60 @@
+import { Piece } from 'shogi.js';
+import { Move } from './types.js';
+
+/**
+ * Draw the board background
+ * Fills the entire canvas with the board color
+ *
+ * @param ctx - Canvas rendering context
+ * @param size - Canvas size in CSS pixels
+ * @param boardColor - Background color hex code
+ */
+declare function drawBoardBackground(ctx: CanvasRenderingContext2D, size: number, boardColor: string): void;
+/**
+ * Draw the board grid (lines and outer frame)
+ * Creates the 9x9 grid structure with outer border
+ *
+ * @param ctx - Canvas rendering context
+ * @param margin - Margin from canvas edge
+ * @param boardSize - Total size of the board area
+ * @param lineColor - Color of the lines
+ */
+declare function drawBoardGrid(ctx: CanvasRenderingContext2D, margin: number, boardSize: number, lineColor: string): void;
+/**
+ * Draw all pieces on the board
+ * Renders pieces with proper rotation based on perspective
+ *
+ * @param ctx - Canvas rendering context
+ * @param pieces - 2D array of pieces on the board
+ * @param margin - Margin from canvas edge
+ * @param cell - Size of a single cell
+ * @param fontFamily - Font family for piece characters
+ * @param fontSizeRatio - Font size ratio relative to cell size
+ * @param isSente - Whether rendering from black player's perspective
+ */
+declare function drawBoardPieces(ctx: CanvasRenderingContext2D, pieces: (Piece | null)[][], margin: number, cell: number, fontFamily: string, fontSizeRatio: number, isSente: boolean): void;
+/**
+ * Draw board coordinates (row and column labels)
+ * Displays numbers and kanji labels around the board
+ *
+ * @param ctx - Canvas rendering context
+ * @param margin - Margin from canvas edge
+ * @param boardSize - Total size of the board area
+ * @param cell - Size of a single cell
+ * @param fontFamily - Font family for labels
+ * @param isSente - Whether rendering from black player's perspective
+ */
+declare function drawBoardCoordinates(ctx: CanvasRenderingContext2D, margin: number, boardSize: number, cell: number, fontFamily: string, isSente: boolean): void;
+/**
+ * Highlight the destination and source cells of the current move
+ * Uses red semi-transparent rectangles to indicate move locations
+ *
+ * @param ctx - Canvas rendering context
+ * @param margin - Margin from canvas edge
+ * @param cell - Size of a single cell
+ * @param isSente - Whether rendering from black player's perspective
+ * @param currentMove - Current move data, undefined means no highlight
+ */
+declare function drawHighlightedCell(ctx: CanvasRenderingContext2D, margin: number, cell: number, isSente: boolean, currentMove?: Move): void;
+
+export { drawBoardBackground, drawBoardCoordinates, drawBoardGrid, drawBoardPieces, drawHighlightedCell };

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

@@ -0,0 +1,137 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var board_renderer_exports = {};
+__export(board_renderer_exports, {
+  drawBoardBackground: () => drawBoardBackground,
+  drawBoardCoordinates: () => drawBoardCoordinates,
+  drawBoardGrid: () => drawBoardGrid,
+  drawBoardPieces: () => drawBoardPieces,
+  drawHighlightedCell: () => drawHighlightedCell
+});
+module.exports = __toCommonJS(board_renderer_exports);
+var import_json_kifu_format = require("json-kifu-format");
+var import_shogi = require("shogi.js");
+function drawBoardBackground(ctx, size, boardColor) {
+  ctx.fillStyle = boardColor;
+  ctx.fillRect(0, 0, size, size);
+}
+function drawBoardGrid(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();
+  });
+}
+function drawBoardPieces(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();
+    });
+  });
+}
+function drawBoardCoordinates(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);
+  });
+}
+function 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);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  drawBoardBackground,
+  drawBoardCoordinates,
+  drawBoardGrid,
+  drawBoardPieces,
+  drawHighlightedCell
+});

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

@@ -1,8 +1,29 @@
 import React, { MouseEventHandler, PropsWithChildren } from 'react';
 
+/**
+ * Props for the Button component
+ * @property onClick - Click event handler
+ * @property type - HTML button type attribute
+ * @property children - Button content/label
+ */
 type ButtonProps = {
     onClick?: MouseEventHandler<HTMLButtonElement>;
+    type?: 'button' | 'submit' | 'reset';
 } & PropsWithChildren;
-declare function Button({ children, onClick }: ButtonProps): React.JSX.Element;
+/**
+ * A styled button component for the shogi player interface
+ *
+ * @component
+ * @param props - Component props
+ * @returns A button element with consistent styling
+ *
+ * @example
+ * ```tsx
+ * <Button onClick={handleClick} type="button">
+ *   Click me
+ * </Button>
+ * ```
+ */
+declare function Button({ children, onClick, type }: ButtonProps): React.JSX.Element;
 
 export { type ButtonProps, Button as default };

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

@@ -32,10 +32,11 @@ __export(button_exports, {
 });
 module.exports = __toCommonJS(button_exports);
 var import_react = __toESM(require("react"));
-function Button({ children, onClick }) {
+function Button({ children, onClick, type = "button" }) {
   return /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
+      type,
       className: "border-2 text-xs text-black p-2 border-black rounded-lg hover:bg-amber-100 cursor-pointer",
       onClick
     },

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

@@ -0,0 +1,29 @@
+import { CanvasDimensions, BoardLayout, HandsLayout } from './types.js';
+import 'shogi.js';
+
+/**
+ * Calculate canvas dimensions based on device pixel ratio
+ * Adjusts canvas resolution for crisp rendering on HiDPI displays
+ *
+ * @param size - Base size in CSS pixels
+ * @returns Canvas dimensions with DPR applied for high-quality rendering
+ */
+declare function getCanvasDimensions(size: number): CanvasDimensions;
+/**
+ * Calculate board layout dimensions
+ * Computes margins and cell size based on canvas size
+ *
+ * @param size - Base size in CSS pixels
+ * @returns Layout object containing margin, total board size, and individual cell size
+ */
+declare function getBoardLayout(size: number): BoardLayout;
+/**
+ * Calculate hands (captured pieces) layout dimensions
+ * Computes layout for the area displaying captured pieces
+ *
+ * @param size - Base size in CSS pixels
+ * @returns Layout object with margins, height, and cell size for the hands area
+ */
+declare function getHandsLayout(size: number): HandsLayout;
+
+export { getBoardLayout, getCanvasDimensions, getHandsLayout };

package/dist/cjs/components/shogi-player/{index.js → canvas-utils.js}

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,22 +15,34 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var shogi_player_exports = {};
-__export(shogi_player_exports, {
-  ShogiPlayer: () => import_shogi_player.default
+var canvas_utils_exports = {};
+__export(canvas_utils_exports, {
+  getBoardLayout: () => getBoardLayout,
+  getCanvasDimensions: () => getCanvasDimensions,
+  getHandsLayout: () => getHandsLayout
 });
-module.exports = __toCommonJS(shogi_player_exports);
-var import_shogi_player = __toESM(require("./shogi-player"));
+module.exports = __toCommonJS(canvas_utils_exports);
+function getCanvasDimensions(size) {
+  const dpr = window.devicePixelRatio || 1;
+  return { width: size * dpr, height: size * dpr, dpr };
+}
+function getBoardLayout(size) {
+  const margin = size * 0.06;
+  const boardSize = size - margin * 2;
+  const cell = boardSize / 9;
+  return { margin, boardSize, cell };
+}
+function 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 };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ShogiPlayer
+  getBoardLayout,
+  getCanvasDimensions,
+  getHandsLayout
 });

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

@@ -0,0 +1,42 @@
+import { Piece } from 'shogi.js';
+
+/**
+ * Draw the background of the hands area
+ * Fills the canvas with a solid color
+ *
+ * @param ctx - Canvas rendering context
+ * @param width - Width of the canvas
+ * @param height - Height of the canvas
+ * @param color - Background color hex code
+ */
+declare function drawHandsBackground(ctx: CanvasRenderingContext2D, width: number, height: number, color: string): void;
+/**
+ * Draw the frame border for the hands area
+ * Creates a bordered rectangle around the hands display
+ *
+ * @param ctx - Canvas rendering context
+ * @param x - X coordinate of the frame
+ * @param y - Y coordinate of the frame
+ * @param width - Width of the frame
+ * @param height - Height of the frame
+ * @param lineColor - Color of the border lines
+ * @param isTop - Whether this is the top hands area (affects positioning)
+ */
+declare function drawHandsFrame(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, lineColor: string, isTop: boolean): void;
+/**
+ * Draw captured pieces (hands) on the canvas
+ * Displays pieces grouped by type with counts for multiple captures
+ *
+ * @param ctx - Canvas rendering context
+ * @param hands - 2D array of captured pieces
+ * @param margin - Margin from canvas edge
+ * @param boardSize - Width of the hands area
+ * @param cell - Size of a single cell
+ * @param fontFamily - Font family for piece names
+ * @param fontSizeRatio - Font size ratio relative to cell size
+ * @param isSente - Whether rendering from black player's perspective
+ * @param isTop - Whether this is the top hands area
+ */
+declare function drawHandsPieces(ctx: CanvasRenderingContext2D, hands: Piece[][], margin: number, boardSize: number, cell: number, fontFamily: string, fontSizeRatio: number, isSente: boolean, isTop: boolean): void;
+
+export { drawHandsBackground, drawHandsFrame, drawHandsPieces };

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

@@ -0,0 +1,86 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hands_renderer_exports = {};
+__export(hands_renderer_exports, {
+  drawHandsBackground: () => drawHandsBackground,
+  drawHandsFrame: () => drawHandsFrame,
+  drawHandsPieces: () => drawHandsPieces
+});
+module.exports = __toCommonJS(hands_renderer_exports);
+var import_json_kifu_format = require("json-kifu-format");
+var import_shogi = require("shogi.js");
+function drawHandsBackground(ctx, width, height, color) {
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, width, height);
+}
+function 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);
+  }
+}
+function drawHandsPieces(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 countOffsetY = cell * 0.8;
+      ctx.fillText(String(count), 0, countOffsetY);
+    }
+    ctx.restore();
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  drawHandsBackground,
+  drawHandsFrame,
+  drawHandsPieces
+});

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

@@ -1,11 +1,32 @@
-import { IMoveFormat } from 'json-kifu-format/dist/src/Formats';
 import React from 'react';
 
+/**
+ * Props for the MovesArea component
+ * @property readableMoves - Array of human-readable move strings (e.g., "☗７六歩")
+ * @property tesuu - Current move number
+ * @property onTesuuChange - Callback when the user selects a different move
+ */
 type MovesAreaProps = {
-    moves: IMoveFormat[];
+    readableMoves: string[];
     tesuu: number;
     onTesuuChange?: (tesuu: number) => void;
 };
+/**
+ * Scrollable list of moves showing the game record with current position highlighting
+ *
+ * @component
+ * @param props - Component props
+ * @returns A scrollable moves list with keyboard navigation support
+ *
+ * @example
+ * ```tsx
+ * <MovesArea
+ *   readableMoves={['開始局面', '☗７六歩', '☖３四歩']}
+ *   tesuu={1}
+ *   onTesuuChange={(move) => setCurrentMove(move)}
+ * />
+ * ```
+ */
 declare function MovesArea(props: MovesAreaProps): React.JSX.Element;
 
-export { MovesArea, type MovesAreaProps };
+export { type MovesAreaProps, MovesArea as default };