@hackersheet/next-document-content-kifu 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/cjs/components/kifu/kifu.d.ts

@@ -1,6 +1,6 @@
 import { KifuComponentProps } from '@hackersheet/react-document-content';
 import React from 'react';
 
-declare function Kifu({ code, language }: KifuComponentProps): React.JSX.Element | null;
+declare function Kifu({ code, language }: KifuComponentProps): React.JSX.Element;
 
 export { Kifu as default };

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

@@ -32,36 +32,19 @@ __export(kifu_exports, {
   default: () => Kifu
 });
 module.exports = __toCommonJS(kifu_exports);
-var import_kifu_for_js = require("kifu-for-js");
 var import_navigation = require("next/navigation");
 var import_react = __toESM(require("react"));
+var import_shogi_player = require("../shogi-player");
 function Kifu({ code, language }) {
   const [, filename] = language.split(":");
   const searchParams = (0, import_navigation.useSearchParams)();
   const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = (0, import_react.useState)(() => new import_kifu_for_js.KifuStore({ kifu: code }));
-  (0, import_react.useEffect)(() => {
-    initKifuUserSettings();
-  }, []);
   (0, import_react.useEffect)(() => {
     const newPly = Number(searchParams.get("ply") ?? 0);
     const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
     if (hash === id) {
-      kifuStore.player.goto(newPly);
+      console.log(newPly);
     }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_kifu_for_js.KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
+  }, [searchParams, id]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ import_react.default.createElement(import_shogi_player.ShogiPlayer, { kifuText: code }));
 }

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

@@ -0,0 +1,8 @@
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
+
+type ButtonProps = {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+} & PropsWithChildren;
+declare function Button({ children, onClick }: ButtonProps): React.JSX.Element;
+
+export { type ButtonProps, Button as default };

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

@@ -0,0 +1,44 @@
+"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)
+    __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 __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 button_exports = {};
+__export(button_exports, {
+  default: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_react = __toESM(require("react"));
+function Button({ children, onClick }) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      className: "border-2 text-black p-2 border-black rounded-lg hover:bg-amber-100 cursor-pointer",
+      onClick
+    },
+    children
+  );
+}

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

@@ -0,0 +1,2 @@
+export { default as ShogiPlayer } from './shogi-player.js';
+import 'react';

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

@@ -0,0 +1,38 @@
+"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)
+    __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 __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
+});
+module.exports = __toCommonJS(shogi_player_exports);
+var import_shogi_player = __toESM(require("./shogi-player"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShogiPlayer
+});

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

@@ -0,0 +1,11 @@
+import { IMoveFormat } from 'json-kifu-format/dist/src/Formats';
+import React from 'react';
+
+type MovesAreaProps = {
+    moves: IMoveFormat[];
+    tesuu: number;
+    onTesuuChange?: (tesuu: number) => void;
+};
+declare function MovesArea(props: MovesAreaProps): React.JSX.Element;
+
+export { MovesArea, type MovesAreaProps };

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

@@ -0,0 +1,74 @@
+"use strict";
+"use client";
+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)
+    __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 __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 moves_area_exports = {};
+__export(moves_area_exports, {
+  MovesArea: () => MovesArea
+});
+module.exports = __toCommonJS(moves_area_exports);
+var import_json_kifu_format = require("json-kifu-format");
+var import_react = __toESM(require("react"));
+function MovesArea(props) {
+  const moves = props.moves;
+  const scrollRef = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (scrollRef.current && containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const scrollRect = scrollRef.current.getBoundingClientRect();
+      const offset = scrollRect.top - containerRect.top + containerRef.current.scrollTop - 72;
+      containerRef.current.scrollTo({
+        top: offset,
+        behavior: "auto"
+      });
+    }
+  }, [props.tesuu]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: "w-full text-xs grid" }, 0 === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef }), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      onClick: () => props.onTesuuChange && props.onTesuuChange(0),
+      className: 0 === props.tesuu ? "bg-yellow-100 cursor-pointer flex p-2" : "cursor-pointer hover:bg-amber-300 flex p-2"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, "\u958B\u59CB\u5C40\u9762")
+  ), moves.map(
+    (move, index) => index > 0 && /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, { key: index }, index === props.tesuu && /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollRef }), /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: index === props.tesuu ? "bg-yellow-100 border-t border-black/60 cursor-pointer grid-rows-1 p-2" : "border-t border-black/60 cursor-pointer hover:bg-amber-300 grid-rows-1 p-2",
+        onClick: () => props.onTesuuChange && props.onTesuuChange(index)
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, index)),
+      /* @__PURE__ */ import_react.default.createElement("div", null, import_json_kifu_format.JKFPlayer.moveToReadableKifu(move))
+    ))
+  )));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MovesArea
+});

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

@@ -0,0 +1,17 @@
+import { IMoveMoveFormat } from 'json-kifu-format/dist/src/Formats';
+import React from 'react';
+import { Piece } from '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>;
+
+export { ShogiBoardCanvas as default };

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

@@ -0,0 +1,167 @@
+"use strict";
+"use client";
+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)
+    __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 __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_board_canvas_exports = {};
+__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, currentMove) => {
+  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 (currentMove) {
+        const to = currentMove.to;
+        if (to && to.x === rowIndex + 1 && to.y === colIndex + 1) {
+          ctx.fillStyle = "red";
+        }
+      }
+      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 ? (9 - i).toString() : (i + 1).toString();
+    ctx.fillText(label, x, y);
+  });
+  const kanji = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u4E03", "\u516B", "\u4E5D"];
+  kanji.forEach((k, i) => {
+    const x = margin + boardSize + margin / 2;
+    const y = margin + i * cell + cell / 2;
+    const label = isSente ? k : kanji[8 - i];
+    ctx.fillText(label, x, y);
+  });
+};
+const ShogiBoardCanvas = ({
+  size = 360,
+  boardColor = "#f9d27a",
+  lineColor = "#000",
+  fontFamily = "serif",
+  fontSizeRatio = 0.7,
+  pieces,
+  isSente = true,
+  currentMove
+}) => {
+  const canvasRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height, dpr } = 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);
+    drawPieces(ctx, pieces, margin, cell, fontFamily, fontSizeRatio, isSente, currentMove);
+    drawCoordinates(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 });
+};
+var shogi_board_canvas_default = ShogiBoardCanvas;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Piece } from '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>;
+
+export { ShogiHandsCanvas as default };

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

@@ -0,0 +1,121 @@
+"use strict";
+"use client";
+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)
+    __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 __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_hands_canvas_exports = {};
+__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, 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];
+  pieces.forEach((piece, index) => {
+    if (!piece) return;
+    const px = margin + index * cell + cell / 2;
+    const py = isTop ? margin + cell / 2 : cell / 2 + 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 fontSize = cell * fontSizeRatio;
+    const kan = import_json_kifu_format.JKFPlayer.kindToKan(piece.kind);
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.fillText(kan, 0, 0);
+    ctx.restore();
+  });
+};
+const ShogiHandsCanvas = ({
+  size = 360,
+  boardColor = "#f9d27a",
+  lineColor = "#000",
+  fontFamily = "serif",
+  fontSizeRatio = 0.7,
+  hands,
+  isSente = true,
+  isTop = false
+}) => {
+  const canvasRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { margin, handsHeight, boardSize, cellSize } = getHandsLayout(size);
+    const { width: canvasWidth, dpr } = 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, cellSize, fontFamily, fontSizeRatio, isSente, isTop);
+  }, [size, boardColor, lineColor, fontFamily, fontSizeRatio, isSente, hands, isTop]);
+  return /* @__PURE__ */ import_react.default.createElement("canvas", { ref: canvasRef });
+};
+var shogi_hands_canvas_default = ShogiHandsCanvas;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+
+type ShogiPlayerProps = {
+    kifuText: string;
+};
+declare function ShogiPlayer(props: ShogiPlayerProps): React.JSX.Element;
+
+export { type ShogiPlayerProps, ShogiPlayer as default };

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

@@ -0,0 +1,78 @@
+"use strict";
+"use client";
+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)
+    __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 __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, {
+  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_button = __toESM(require("./button"));
+var import_moves_area = 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 [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 = 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();
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-fit", tabIndex: 1 }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col" }, /* @__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: "flex flex-col w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex-1 relative w-full" }, /* @__PURE__ */ import_react.default.createElement(import_moves_area.MovesArea, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-black border-black border-2 p-1 text-xs" }, comments.map((comment, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index }, comment)), comments.length === 0 && /* @__PURE__ */ import_react.default.createElement("div", null, "\xA0")), /* @__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"))));
+}

package/dist/cjs/index.js

@@ -13,9 +13,9 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./components"), module.exports);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./components"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ...require("./components")

package/dist/esm/components/kifu/kifu.d.mts

@@ -1,6 +1,6 @@
 import { KifuComponentProps } from '@hackersheet/react-document-content';
 import React from 'react';
 
-declare function Kifu({ code, language }: KifuComponentProps): React.JSX.Element | null;
+declare function Kifu({ code, language }: KifuComponentProps): React.JSX.Element;
 
 export { Kifu as default };

package/dist/esm/components/kifu/kifu.mjs

@@ -1,36 +1,19 @@
 "use client";
-import { KifuLite, KifuStore } from "kifu-for-js";
 import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { ShogiPlayer } from "../shogi-player";
 function Kifu({ code, language }) {
   const [, filename] = language.split(":");
   const searchParams = useSearchParams();
   const id = filename ? `user-content-${filename}` : void 0;
-  const [kifuStore] = useState(() => new KifuStore({ kifu: code }));
-  useEffect(() => {
-    initKifuUserSettings();
-  }, []);
   useEffect(() => {
     const newPly = Number(searchParams.get("ply") ?? 0);
     const hash = typeof window !== "undefined" ? window.location.hash.replace(/^#!?/, "") : "";
     if (hash === id) {
-      kifuStore.player.goto(newPly);
+      console.log(newPly);
     }
-  }, [searchParams, kifuStore, id]);
-  if (!kifuStore) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ React.createElement(KifuLite, { style: { width: "100%" }, kifuStore }));
-}
-function initKifuUserSettings() {
-  const LOCALSTORAGE_KEY = "kifuforjs";
-  const defaultSettings = {
-    hapticFeedback: false
-  };
-  const settings = localStorage.getItem(LOCALSTORAGE_KEY);
-  if (!settings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(defaultSettings));
-  }
+  }, [searchParams, id]);
+  return /* @__PURE__ */ React.createElement("div", { className: "kifu-block", id }, /* @__PURE__ */ React.createElement(ShogiPlayer, { kifuText: code }));
 }
 export {
   Kifu as default

package/dist/esm/components/shogi-player/button.d.mts

@@ -0,0 +1,8 @@
+import React, { MouseEventHandler, PropsWithChildren } from 'react';
+
+type ButtonProps = {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+} & PropsWithChildren;
+declare function Button({ children, onClick }: ButtonProps): React.JSX.Element;
+
+export { type ButtonProps, Button as default };

package/dist/esm/components/shogi-player/button.mjs

@@ -0,0 +1,14 @@
+import React from "react";
+function Button({ children, onClick }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "border-2 text-black p-2 border-black rounded-lg hover:bg-amber-100 cursor-pointer",
+      onClick
+    },
+    children
+  );
+}
+export {
+  Button as default
+};

package/dist/esm/components/shogi-player/index.d.mts

@@ -0,0 +1,2 @@
+export { default as ShogiPlayer } from './shogi-player.mjs';
+import 'react';

package/dist/esm/components/shogi-player/index.mjs

@@ -0,0 +1,4 @@
+import ShogiPlayer from "./shogi-player";
+export {
+  ShogiPlayer
+};

package/dist/esm/components/shogi-player/moves-area.d.mts

@@ -0,0 +1,11 @@
+import { IMoveFormat } from 'json-kifu-format/dist/src/Formats';
+import React from 'react';
+
+type MovesAreaProps = {
+    moves: IMoveFormat[];
+    tesuu: number;
+    onTesuuChange?: (tesuu: number) => void;
+};
+declare function MovesArea(props: MovesAreaProps): React.JSX.Element;
+
+export { MovesArea, type MovesAreaProps };

package/dist/esm/components/shogi-player/moves-area.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { JKFPlayer } from "json-kifu-format";
+import React, { Fragment, useEffect, useRef } from "react";
+function MovesArea(props) {
+  const moves = props.moves;
+  const scrollRef = useRef(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (scrollRef.current && containerRef.current) {
+      const containerRect = containerRef.current.getBoundingClientRect();
+      const scrollRect = scrollRef.current.getBoundingClientRect();
+      const offset = scrollRect.top - containerRect.top + containerRef.current.scrollTop - 72;
+      containerRef.current.scrollTo({
+        top: offset,
+        behavior: "auto"
+      });
+    }
+  }, [props.tesuu]);
+  return /* @__PURE__ */ React.createElement("div", { className: "absolute overflow-y-auto h-full w-full border-2 border-black text-black", ref: containerRef }, /* @__PURE__ */ React.createElement("div", { className: "w-full text-xs grid" }, 0 === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef }), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => props.onTesuuChange && props.onTesuuChange(0),
+      className: 0 === props.tesuu ? "bg-yellow-100 cursor-pointer flex p-2" : "cursor-pointer hover:bg-amber-300 flex p-2"
+    },
+    /* @__PURE__ */ React.createElement("div", null, "\u958B\u59CB\u5C40\u9762")
+  ), moves.map(
+    (move, index) => index > 0 && /* @__PURE__ */ React.createElement(Fragment, { key: index }, index === props.tesuu && /* @__PURE__ */ React.createElement("div", { ref: scrollRef }), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: index === props.tesuu ? "bg-yellow-100 border-t border-black/60 cursor-pointer grid-rows-1 p-2" : "border-t border-black/60 cursor-pointer hover:bg-amber-300 grid-rows-1 p-2",
+        onClick: () => props.onTesuuChange && props.onTesuuChange(index)
+      },
+      /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, index)),
+      /* @__PURE__ */ React.createElement("div", null, JKFPlayer.moveToReadableKifu(move))
+    ))
+  )));
+}
+export {
+  MovesArea
+};

package/dist/esm/components/shogi-player/shogi-board-canvas.d.mts

@@ -0,0 +1,17 @@
+import { IMoveMoveFormat } from 'json-kifu-format/dist/src/Formats';
+import React from 'react';
+import { Piece } from '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>;
+
+export { ShogiBoardCanvas as default };

package/dist/esm/components/shogi-player/shogi-board-canvas.mjs

@@ -0,0 +1,137 @@
+"use client";
+import { JKFPlayer } from "json-kifu-format";
+import React from "react";
+import { Color } from "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, currentMove) => {
+  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 === Color.White) {
+        ctx.rotate(Math.PI);
+      } else if (!isSente && piece.color === Color.Black) {
+        ctx.rotate(Math.PI);
+      }
+      const kan = JKFPlayer.kindToKan(piece.kind);
+      ctx.fillStyle = "#000";
+      if (currentMove) {
+        const to = currentMove.to;
+        if (to && to.x === rowIndex + 1 && to.y === colIndex + 1) {
+          ctx.fillStyle = "red";
+        }
+      }
+      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 ? (9 - i).toString() : (i + 1).toString();
+    ctx.fillText(label, x, y);
+  });
+  const kanji = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u4E03", "\u516B", "\u4E5D"];
+  kanji.forEach((k, i) => {
+    const x = margin + boardSize + margin / 2;
+    const y = margin + i * cell + cell / 2;
+    const label = isSente ? k : kanji[8 - i];
+    ctx.fillText(label, x, y);
+  });
+};
+const ShogiBoardCanvas = ({
+  size = 360,
+  boardColor = "#f9d27a",
+  lineColor = "#000",
+  fontFamily = "serif",
+  fontSizeRatio = 0.7,
+  pieces,
+  isSente = true,
+  currentMove
+}) => {
+  const canvasRef = React.useRef(null);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { width, height, dpr } = 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);
+    drawPieces(ctx, pieces, margin, cell, fontFamily, fontSizeRatio, isSente, currentMove);
+    drawCoordinates(ctx, margin, boardSize, cell, fontFamily, isSente);
+  }, [size, boardColor, lineColor, fontFamily, fontSizeRatio, pieces, isSente, currentMove]);
+  return /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef, width: size, height: size });
+};
+var shogi_board_canvas_default = ShogiBoardCanvas;
+export {
+  shogi_board_canvas_default as default
+};

package/dist/esm/components/shogi-player/shogi-hands-canvas.d.mts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Piece } from '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>;
+
+export { ShogiHandsCanvas as default };

package/dist/esm/components/shogi-player/shogi-hands-canvas.mjs

@@ -0,0 +1,91 @@
+"use client";
+import { JKFPlayer } from "json-kifu-format";
+import React from "react";
+import { Color } from "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, cell, fontFamily, fontSizeRatio, isSente, isTop) => {
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  const pieces = isSente && isTop || !isSente && !isTop ? hands[Color.White] : hands[Color.Black];
+  pieces.forEach((piece, index) => {
+    if (!piece) return;
+    const px = margin + index * cell + cell / 2;
+    const py = isTop ? margin + cell / 2 : cell / 2 + 2;
+    ctx.save();
+    ctx.translate(px, py);
+    if (isSente && piece.color === Color.White) {
+      ctx.rotate(Math.PI);
+    } else if (!isSente && piece.color === Color.Black) {
+      ctx.rotate(Math.PI);
+    }
+    const fontSize = cell * fontSizeRatio;
+    const kan = JKFPlayer.kindToKan(piece.kind);
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.fillText(kan, 0, 0);
+    ctx.restore();
+  });
+};
+const ShogiHandsCanvas = ({
+  size = 360,
+  boardColor = "#f9d27a",
+  lineColor = "#000",
+  fontFamily = "serif",
+  fontSizeRatio = 0.7,
+  hands,
+  isSente = true,
+  isTop = false
+}) => {
+  const canvasRef = React.useRef(null);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const { margin, handsHeight, boardSize, cellSize } = getHandsLayout(size);
+    const { width: canvasWidth, dpr } = 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, cellSize, fontFamily, fontSizeRatio, isSente, isTop);
+  }, [size, boardColor, lineColor, fontFamily, fontSizeRatio, isSente, hands, isTop]);
+  return /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef });
+};
+var shogi_hands_canvas_default = ShogiHandsCanvas;
+export {
+  shogi_hands_canvas_default as default
+};

package/dist/esm/components/shogi-player/shogi-player.d.mts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+type ShogiPlayerProps = {
+    kifuText: string;
+};
+declare function ShogiPlayer(props: ShogiPlayerProps): React.JSX.Element;
+
+export { type ShogiPlayerProps, ShogiPlayer as default };

package/dist/esm/components/shogi-player/shogi-player.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { JKFPlayer } from "json-kifu-format";
+import React, { useState } from "react";
+import Button from "./button";
+import { MovesArea } from "./moves-area";
+import ShogiBoardCanvas from "./shogi-board-canvas";
+import ShogiHandsCanvas from "./shogi-hands-canvas";
+function ShogiPlayer(props) {
+  const [player] = useState(JKFPlayer.parse(props.kifuText.trim()));
+  const [pieces, setPieces] = useState(player.shogi.board);
+  const [hands, setHands] = useState(player.shogi.hands);
+  const [moves, setMoves] = useState(player.kifu.moves);
+  const [tesuu, setTesuu] = useState(player.tesuu);
+  const [currentMove, setCurrentMove] = useState(player.getMove());
+  const [isSente, setIsSente] = useState(true);
+  const [maxTesuu, setMaxTesuu] = useState(player.getMaxTesuu());
+  const [comments, setComments] = useState(player.getComments());
+  const 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();
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "flex w-fit", tabIndex: 1 }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(ShogiHandsCanvas, { size, hands, isSente, isTop: true }), /* @__PURE__ */ React.createElement(ShogiBoardCanvas, { size, pieces, isSente, currentMove }), /* @__PURE__ */ React.createElement(ShogiHandsCanvas, { size, hands, isSente, isTop: false })), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col w-fit bg-[#f9d27a] p-4 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 relative w-full" }, /* @__PURE__ */ React.createElement(MovesArea, { moves, tesuu, onTesuuChange: handleGoto })), /* @__PURE__ */ React.createElement("div", { className: "text-black border-black border-2 p-1 text-xs" }, comments.map((comment, index) => /* @__PURE__ */ React.createElement("div", { key: index }, comment)), comments.length === 0 && /* @__PURE__ */ React.createElement("div", null, "\xA0")), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(Button, { onClick: () => handleGoto(0) }, "\u6700\u521D"), /* @__PURE__ */ React.createElement(Button, { onClick: handleBackward }, "\u524D"), /* @__PURE__ */ React.createElement(Button, { onClick: handleForward }, "\u6B21"), /* @__PURE__ */ React.createElement(Button, { onClick: () => handleGoto(maxTesuu) }, "\u6700\u5F8C"), /* @__PURE__ */ React.createElement(Button, { onClick: handeleToggle }, "\u53CD\u8EE2"))));
+}
+export {
+  ShogiPlayer as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackersheet/next-document-content-kifu",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Hacker Sheet document content kifu components for Next.js",
   "keywords": [],
   "repository": {
@@ -24,22 +24,22 @@
     "dist"
   ],
   "dependencies": {
-    "@hackersheet/core": "alpha",
-    "@hackersheet/react-document-content": "alpha",
-    "kifu-for-js": "^5.4.1"
+    "shogi.js": "^5.4.1",
+    "json-kifu-format": "^5.4.1",
+    "@hackersheet/core": "0.1.0-alpha.11",
+    "@hackersheet/react-document-content": "0.1.0-alpha.12"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "next": "14.2.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@hackersheet/eslint-config-custom": "0.0.0"
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "next": "^15.5.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "peerDependencies": {
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "scripts": {
     "build": "rm -rf ./dist && pnpm tsup",