cm-chessboard 8.11.4 → 8.12.0

package/.claude/settings.local.json

@@ -1,7 +1,8 @@
 {
   "permissions": {
     "allow": [
-      "Bash(tree:*)"
+      "Bash(tree:*)",
+      "Bash(gh pr:*)"
     ],
     "deny": [],
     "ask": []

package/assets/chessboard.css

@@ -32,6 +32,12 @@
   white-space: nowrap;
   border: 0; }
 
+.cm-chessboard-accessibility button:disabled,
+.cm-chessboard-accessibility button:disabled:hover {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none; }
+
 .cm-chessboard.default .board .square.white {
   fill: #ecdab9; }
 
@@ -291,4 +297,22 @@
     .cm-chessboard.black-and-white .coordinates .coordinate.white {
       fill: #909090; }
 
+/* Keyboard focus indicator for accessibility */
+.cm-chessboard .keyboard-focus-indicator .keyboard-focus {
+  fill: none;
+  stroke: #0066cc;
+  stroke-width: 3px;
+  pointer-events: none; }
+
+.cm-chessboard .keyboard-focus-indicator .keyboard-from-square {
+  fill: rgba(0, 102, 204, 0.3);
+  stroke: #0066cc;
+  stroke-width: 2px;
+  pointer-events: none; }
+
+/* High contrast focus indicator */
+.cm-chessboard:focus {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px; }
+
 /*# sourceMappingURL=chessboard.css.map */

package/assets/extensions/promotion-dialog/promotion-dialog.css

@@ -1,30 +1,37 @@
 svg.cm-chessboard .promotion-dialog-group rect, svg.cm-chessboard .promotion-dialog-group g[data-piece] {
-  animation: fade-in 0.25s ease-in; }
-
+  animation: fade-in 0.25s ease-in;
+}
 svg.cm-chessboard .promotion-dialog-group .promotion-dialog {
   fill: white;
   fill-opacity: 0.7;
-  stroke: rgba(0, 0, 0, 0.4); }
-
+  stroke: rgba(0, 0, 0, 0.4);
+}
+svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group {
+  outline: none;
+}
+svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group:focus .promotion-dialog-button {
+  stroke: rgba(0, 0, 0, 0.3);
+  stroke-width: 1px;
+}
 svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button {
   fill: transparent;
-  cursor: pointer; }
-  svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover {
-    fill: rgba(0, 0, 0, 0.2); }
-
-svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group {
-  outline: none; }
-  svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group:focus .promotion-dialog-button {
-    stroke: rgba(0, 0, 0, 0.3);
-    stroke-width: 2px; }
-
+  cursor: pointer;
+  outline: none;
+}
+svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover {
+  fill: rgba(0, 0, 0, 0.2);
+}
 svg.cm-chessboard .promotion-dialog-group .piece {
-  pointer-events: none; }
+  pointer-events: none;
+}
 
 @keyframes fade-in {
   0% {
-    opacity: 0; }
+    opacity: 0;
+  }
   100% {
-    opacity: 1; } }
+    opacity: 1;
+  }
+}
 
-/*# sourceMappingURL=promotion-dialog.css.map */
+/*# sourceMappingURL=promotion-dialog.css.map */

package/assets/extensions/promotion-dialog/promotion-dialog.css.map

@@ -1,9 +1 @@
-{
-	"version": 3,
-	"file": "promotion-dialog.css",
-	"sources": [
-		"promotion-dialog.scss"
-	],
-	"names": [],
-	"mappings": "AAAA,AAGI,GAHD,AAAA,cAAc,CACf,uBAAuB,CAErB,IAAI,EAHR,GAAG,AAAA,cAAc,CACf,uBAAuB,CAEf,CAAC,CAAA,AAAA,UAAC,AAAA,EAAY;EAClB,SAAS,EAAE,qBAAqB,GACjC;;AALL,AAOI,GAPD,AAAA,cAAc,CACf,uBAAuB,CAMrB,iBAAiB,CAAC;EAChB,IAAI,EAAE,KAAK;EACX,YAAY,EAAE,GAAG;EACjB,MAAM,EAAE,kBAAkB,GAC3B;;AAXL,AAaI,GAbD,AAAA,cAAc,CACf,uBAAuB,CAYrB,wBAAwB,CAAC;EACvB,IAAI,EAAE,WAAW;EACjB,MAAM,EAAE,OAAO,GAKhB;EApBL,AAiBM,GAjBH,AAAA,cAAc,CACf,uBAAuB,CAYrB,wBAAwB,CAIpB,KAAK,CAAC;IACN,IAAI,EAAE,kBAAkB,GACzB;;AAnBP,AAsBI,GAtBD,AAAA,cAAc,CACf,uBAAuB,CAqBrB,MAAM,CAAC;EACL,cAAc,EAAE,IAAI,GACrB;;AAIL,UAAU,CAAV,OAAU;EACR,EAAE;IACA,OAAO,EAAE,CAAC;EAEZ,IAAI;IACF,OAAO,EAAE,CAAC"
-}
+{"version":3,"sourceRoot":"","sources":["promotion-dialog.scss"],"names":[],"mappings":"AAGI;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EAMA;;AAJA;EACE;;AAOJ;EACE;;;AAON;EACE;IACE;;EAEF;IACE","file":"promotion-dialog.css"}

package/assets/extensions/promotion-dialog/promotion-dialog.scss

@@ -11,6 +11,13 @@ svg.cm-chessboard {
       stroke: rgba(0, 0, 0, 0.4);
     }
 
+    .promotion-dialog-button-group {
+      outline: none;
+      &:focus .promotion-dialog-button {
+        stroke: rgba(0, 0, 0, 0.3);
+        stroke-width: 1px; }
+    }
+
     .promotion-dialog-button {
       fill: transparent;
       cursor: pointer;
@@ -18,6 +25,9 @@ svg.cm-chessboard {
       &:hover {
         fill: rgba(0, 0, 0, 0.2)
       }
+
+      outline: none;
+
     }
 
     .piece {
@@ -26,6 +36,8 @@ svg.cm-chessboard {
   }
 }
 
+
+
 @keyframes fade-in {
   0% {
     opacity: 0;

package/examples/extensions/accessibility-extension.html

@@ -26,8 +26,16 @@
     <li>Display the chessboard additionally as HTML table</li>
     <li>Display a form to move a piece (from, to, move)</li>
     <li>Display the pieces additionally as List</li>
+    <li>Keyboard navigation on the board (arrow keys to navigate, Enter/Space to select, Escape to cancel)</li>
     <li>Display these features visually hidden or not</li>
 </ul>
+<h3>Keyboard Navigation</h3>
+<p>Click the board or press Tab to focus it, then use:</p>
+<ul>
+    <li><strong>Arrow keys</strong> - Navigate between squares</li>
+    <li><strong>Enter / Space</strong> - Select a piece (first press) or target square (second press)</li>
+    <li><strong>Escape</strong> - Cancel the current move</li>
+</ul>
 <h3>The chessboard</h3>
 <div class="board" id="board"></div>
 <button style="margin-bottom: 10px"
@@ -53,6 +61,7 @@
                     boardAsTable: true, // display the board additionally as HTML table
                     movePieceForm: true, // display a form to move a piece (from, to, move)
                     piecesAsList: true, // display the pieces additionally as List
+                    keyboardMoveInput: true, // enable keyboard navigation on the board with arrow keys
                     visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
                 }
 

package/examples/extensions/promotion-dialog-extension.html

@@ -20,20 +20,28 @@
         onclick="window.switchOrientation()">Switch Orientation
 </button>
 <script type="module">
-    import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/Chessboard.js"
-    import {PromotionDialog} from "../../src/extensions/promotion-dialog/PromotionDialog.js"
-    import {Markers} from "../../src/extensions/markers/Markers.js"
+    import {Chessboard, COLOR, INPUT_EVENT_TYPE} from "../../src/Chessboard.js?v=1"
+    import {PromotionDialog} from "../../src/extensions/promotion-dialog/PromotionDialog.js?v=1"
+    import {Markers} from "../../src/extensions/markers/Markers.js?v=1"
+    import {Accessibility} from "../../src/extensions/accessibility/Accessibility.js?v=1"
 
-    const position = "4k3/1P6/8/8/6r1/8/8/2R1K3 w - - 0 1"
+    const position = "4k3/1P6/8/8/6r1/8/61p/2R1K3 w - - 0 1"
     const chessboard = new Chessboard(document.getElementById("chessboard"), {
         position: position,
         assetsUrl: "../../assets/",
-        extensions: [{class: PromotionDialog}, {class: Markers}]
+        extensions: [{class: PromotionDialog}, {class: Markers}, {class: Accessibility, props: {
+                brailleNotationInAlt: true, // show the braille notation of the game in the alt attribute of the SVG
+                boardAsTable: true, // display the board additionally as HTML table
+                movePieceForm: true, // display a form to move a piece (from, to, move)
+                piecesAsList: true, // display the pieces additionally as List
+                visuallyHidden: false // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
+            }}]
     })
     chessboard.enableMoveInput((event) => {
         if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-            if (event.squareTo.charAt(1) === "8" && event.piece.charAt(1) === "p") {
-                chessboard.showPromotionDialog(event.squareTo, COLOR.white, (result) => {
+            if ((event.squareTo.charAt(1) === "8" || event.squareTo.charAt(1) === "1") && event.piece.charAt(1) === "p") {
+                const pieceColor = event.piece.charAt(0)
+                chessboard.showPromotionDialog(event.squareTo, pieceColor, (result) => {
                     console.log("Promotion result", result)
                     if (result && result.piece) {
                         chessboard.setPiece(result.square, result.piece, true)

package/index.html

@@ -42,9 +42,9 @@
                 <li><a href="examples/extensions/arrows-extension.html">Arrows extension</a></li>
             </ul>
         </li>
-        <li>Draw HTML over the board with <a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
-        <li>Allow displaying a promotion dialog with <a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
-        <li>Make the board accessible with screen-reader support with <a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
+        <li>Draw HTML over the board with the <a href="examples/extensions/html-layer-extension.html">HTML Layer extension</a></li>
+        <li>Allow displaying a promotion dialog with the <a href="examples/extensions/promotion-dialog-extension.html">PromotionDialog extension</a></li>
+        <li>Make the board accessible, add screen-reader support with the <a href="examples/extensions/accessibility-extension.html">Accessibility extension</a></li>
     </ul>
 </div>
 <h2>Chessboard</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "8.11.4",
+  "version": "8.12.0",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/extensions/accessibility/Accessibility.js

@@ -8,6 +8,8 @@ import {COLOR, INPUT_EVENT_TYPE} from "../../Chessboard.js"
 import {piecesTranslations, renderPieceTitle} from "./I18n.js"
 import {Utils} from "../../lib/Utils.js"
 
+import {Svg} from "../../lib/Svg.js"
+
 const translations = {
     de: {
         chessboard: "Schachbrett",
@@ -21,6 +23,10 @@ const translations = {
         input_black_enabled: "Eingabe Schwarz aktiviert",
         input_disabled: "Eingabe deaktiviert",
         pieces: "Figuren",
+        empty_square: "leer",
+        move_from: "Zug von",
+        move_to: "Zug nach",
+        move_canceled: "Zug abgebrochen"
     },
     en: {
         chessboard: "Chessboard",
@@ -33,7 +39,11 @@ const translations = {
         input_white_enabled: "Input white enabled",
         input_black_enabled: "Input black enabled",
         input_disabled: "Input disabled",
-        pieces: "Pieces"
+        pieces: "Pieces",
+        empty_square: "empty",
+        move_from: "Move from",
+        move_to: "Move to",
+        move_canceled: "Move canceled"
     }
 }
 
@@ -46,6 +56,7 @@ export class Accessibility extends Extension {
             movePieceForm: true, // display a form to move a piece (from, to, move)
             boardAsTable: true, // display the board additionally as HTML table
             piecesAsList: true, // display the pieces additionally as List
+            keyboardMoveInput: true, // enable keyboard navigation on the board with arrow keys
             visuallyHidden: true // hide all those extra outputs visually but keep them accessible for screen readers and braille displays
         }
         Object.assign(this.props, props)
@@ -76,6 +87,9 @@ export class Accessibility extends Extension {
         if (this.props.brailleNotationInAlt) {
             this.components.push(new BrailleNotationInAlt(this))
         }
+        if (this.props.keyboardMoveInput) {
+            this.components.push(new KeyboardMoveInput(this))
+        }
     }
 }
 
@@ -135,6 +149,7 @@ class MovePieceForm {
                     true).then(() => {
                     this.inputFrom.value = ""
                     this.inputTo.value = ""
+                    this.updateButtonState()
                 })
             }
         })
@@ -142,6 +157,13 @@ class MovePieceForm {
         extension.registerExtensionPoint(EXTENSION_POINT.moveInputToggled, () => {
             this.redraw()
         })
+        // Update button state when input values change
+        this.inputFrom.addEventListener("input", () => {
+            this.updateButtonState()
+        })
+        this.inputTo.addEventListener("input", () => {
+            this.updateButtonState()
+        })
         this.keydownListener = (event) => {
             if (event.shiftKey && event.altKey && event.code === 'KeyE') {
                 event.preventDefault()
@@ -152,6 +174,25 @@ class MovePieceForm {
         extension.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
             document.removeEventListener("keydown", this.keydownListener)
         })
+        // Initial button state
+        this.updateButtonState()
+    }
+
+    isValidSquare(value) {
+        const square = value.trim().toLowerCase()
+        if (square.length !== 2) {
+            return false
+        }
+        const file = square.charAt(0)
+        const rank = square.charAt(1)
+        return file >= 'a' && file <= 'h' && rank >= '1' && rank <= '8'
+    }
+
+    updateButtonState() {
+        const inputEnabled = this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled
+        const isValidFrom = this.isValidSquare(this.inputFrom.value)
+        const isValidTo = this.isValidSquare(this.inputTo.value)
+        this.moveButton.disabled = !inputEnabled || !isValidFrom || !isValidTo
     }
 
     redraw() {
@@ -159,12 +200,11 @@ class MovePieceForm {
             if (this.chessboard.state.inputWhiteEnabled || this.chessboard.state.inputBlackEnabled) {
                 this.inputFrom.disabled = false
                 this.inputTo.disabled = false
-                this.moveButton.disabled = false
             } else {
                 this.inputFrom.disabled = true
                 this.inputTo.disabled = true
-                this.moveButton.disabled = true
             }
+            this.updateButtonState()
         }
     }
 }
@@ -248,3 +288,295 @@ class PiecesAsList {
         <ul aria-labelledby="black_${this.chessboard.id}" class="list-inline">${listB}</ul>`
     }
 }
+
+class KeyboardMoveInput {
+    constructor(extension) {
+        this.extension = extension
+        this.chessboard = extension.chessboard
+        this.t = extension.t
+        this.tPieces = extension.tPieces
+
+        // Current focus position (file 0-7, rank 0-7)
+        this.focusedFile = 0 // a-h
+        this.focusedRank = 0 // 1-8 (0 = rank 1)
+
+        // Move selection state
+        this.fromSquare = null
+
+        // Create focus indicator group in SVG
+        this.focusIndicatorGroup = Svg.addElement(
+            this.chessboard.view.markersTopLayer,
+            "g",
+            {class: "keyboard-focus-indicator"}
+        )
+
+        // Create live region for screen reader announcements
+        this.liveRegion = document.createElement("div")
+        this.liveRegion.setAttribute("aria-live", "polite")
+        this.liveRegion.setAttribute("aria-atomic", "true")
+        this.liveRegion.className = "cm-chessboard-keyboard-live-region visually-hidden"
+        this.liveRegion.style.cssText = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+        this.chessboard.context.appendChild(this.liveRegion)
+
+        // Make SVG focusable
+        this.chessboard.view.svg.setAttribute("tabindex", "0")
+        this.chessboard.view.svg.setAttribute("role", "application")
+        this.chessboard.view.svg.setAttribute("aria-label", this.t.chessboard)
+
+        // Bind event handlers
+        this.handleKeyDown = this.handleKeyDown.bind(this)
+        this.handleFocus = this.handleFocus.bind(this)
+        this.handleBlur = this.handleBlur.bind(this)
+
+        this.chessboard.view.svg.addEventListener("keydown", this.handleKeyDown)
+        this.chessboard.view.svg.addEventListener("focus", this.handleFocus)
+        this.chessboard.view.svg.addEventListener("blur", this.handleBlur)
+
+        // Register extension points
+        extension.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
+            this.redrawFocusIndicator()
+        })
+        extension.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.destroy()
+        })
+        extension.registerExtensionPoint(EXTENSION_POINT.moveInputToggled, () => {
+            // Reset move selection when input is toggled
+            this.fromSquare = null
+            this.redrawFocusIndicator()
+        })
+    }
+
+    handleFocus() {
+        this.redrawFocusIndicator()
+        this.announceCurrentSquare()
+    }
+
+    handleBlur() {
+        this.clearFocusIndicator()
+    }
+
+    handleKeyDown(event) {
+        const orientation = this.chessboard.state.orientation
+
+        switch (event.key) {
+            case "ArrowRight":
+                event.preventDefault()
+                if (orientation === COLOR.white) {
+                    this.focusedFile = Math.min(7, this.focusedFile + 1)
+                } else {
+                    this.focusedFile = Math.max(0, this.focusedFile - 1)
+                }
+                this.redrawFocusIndicator()
+                this.announceCurrentSquare()
+                break
+
+            case "ArrowLeft":
+                event.preventDefault()
+                if (orientation === COLOR.white) {
+                    this.focusedFile = Math.max(0, this.focusedFile - 1)
+                } else {
+                    this.focusedFile = Math.min(7, this.focusedFile + 1)
+                }
+                this.redrawFocusIndicator()
+                this.announceCurrentSquare()
+                break
+
+            case "ArrowUp":
+                event.preventDefault()
+                if (orientation === COLOR.white) {
+                    this.focusedRank = Math.min(7, this.focusedRank + 1)
+                } else {
+                    this.focusedRank = Math.max(0, this.focusedRank - 1)
+                }
+                this.redrawFocusIndicator()
+                this.announceCurrentSquare()
+                break
+
+            case "ArrowDown":
+                event.preventDefault()
+                if (orientation === COLOR.white) {
+                    this.focusedRank = Math.max(0, this.focusedRank - 1)
+                } else {
+                    this.focusedRank = Math.min(7, this.focusedRank + 1)
+                }
+                this.redrawFocusIndicator()
+                this.announceCurrentSquare()
+                break
+
+            case "Enter":
+            case " ":
+                event.preventDefault()
+                this.selectSquare()
+                break
+
+            case "Escape":
+                event.preventDefault()
+                if (this.fromSquare) {
+                    this.fromSquare = null
+                    this.redrawFocusIndicator()
+                    this.announce(this.t.move_canceled)
+                }
+                break
+        }
+    }
+
+    selectSquare() {
+        if (!this.chessboard.state.inputWhiteEnabled && !this.chessboard.state.inputBlackEnabled) {
+            return // Input not enabled
+        }
+
+        const square = this.getCurrentSquare()
+        const piece = this.chessboard.getPiece(square)
+
+        if (!this.fromSquare) {
+            // Selecting "from" square
+            if (piece) {
+                const pieceColor = piece.charAt(0)
+                // Check if the piece color matches enabled input
+                if ((pieceColor === "w" && this.chessboard.state.inputWhiteEnabled) ||
+                    (pieceColor === "b" && this.chessboard.state.inputBlackEnabled)) {
+                    // Trigger moveInputStarted callback
+                    const startResult = this.chessboard.state.moveInputCallback({
+                        chessboard: this.chessboard,
+                        type: INPUT_EVENT_TYPE.moveInputStarted,
+                        square: square,
+                        squareFrom: square,
+                        piece: piece
+                    })
+                    if (startResult) {
+                        this.fromSquare = square
+                        this.redrawFocusIndicator()
+                        this.announce(this.t.move_from + " " + square)
+                    }
+                }
+            }
+        } else {
+            // Selecting "to" square
+            if (square === this.fromSquare) {
+                // Clicking same square cancels
+                this.fromSquare = null
+                this.redrawFocusIndicator()
+                this.announce(this.t.move_canceled)
+            } else {
+                // Try to make the move
+                const fromPiece = this.chessboard.getPiece(this.fromSquare)
+                const result = this.chessboard.state.moveInputCallback({
+                    chessboard: this.chessboard,
+                    type: INPUT_EVENT_TYPE.validateMoveInput,
+                    squareFrom: this.fromSquare,
+                    squareTo: square,
+                    piece: fromPiece
+                })
+                if (result) {
+                    const fromSquare = this.fromSquare
+                    this.fromSquare = null
+                    this.chessboard.movePiece(fromSquare, square, true).then(() => {
+                        this.redrawFocusIndicator()
+                    })
+                    this.announce(this.t.move_to + " " + square)
+                } else {
+                    // Invalid move - check if clicking on own piece to start new move
+                    if (piece) {
+                        const pieceColor = piece.charAt(0)
+                        if ((pieceColor === "w" && this.chessboard.state.inputWhiteEnabled) ||
+                            (pieceColor === "b" && this.chessboard.state.inputBlackEnabled)) {
+                            const startResult = this.chessboard.state.moveInputCallback({
+                                chessboard: this.chessboard,
+                                type: INPUT_EVENT_TYPE.moveInputStarted,
+                                square: square,
+                                squareFrom: square,
+                                piece: piece
+                            })
+                            if (startResult) {
+                                this.fromSquare = square
+                                this.redrawFocusIndicator()
+                                this.announce(this.t.move_from + " " + square)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    getCurrentSquare() {
+        const file = String.fromCharCode(97 + this.focusedFile) // 'a' + file
+        const rank = this.focusedRank + 1
+        return `${file}${rank}`
+    }
+
+    announceCurrentSquare() {
+        const square = this.getCurrentSquare()
+        const piece = this.chessboard.getPiece(square)
+        let announcement = square
+        if (piece) {
+            const pieceType = piece.charAt(1)
+            const pieceColor = piece.charAt(0)
+            announcement += " " + renderPieceTitle(this.extension.lang, pieceType, pieceColor)
+        } else {
+            announcement += " " + this.t.empty_square
+        }
+        if (this.fromSquare) {
+            announcement += " (" + this.t.move_from + " " + this.fromSquare + ")"
+        }
+        this.announce(announcement)
+    }
+
+    announce(message) {
+        this.liveRegion.textContent = ""
+        setTimeout(() => {
+            this.liveRegion.textContent = message
+        }, 50)
+    }
+
+    redrawFocusIndicator() {
+        this.clearFocusIndicator()
+
+        // Only show if SVG is focused
+        if (document.activeElement !== this.chessboard.view.svg) {
+            return
+        }
+
+        const square = this.getCurrentSquare()
+        const point = this.chessboard.view.squareToPoint(square)
+        const squareWidth = this.chessboard.view.squareWidth
+        const squareHeight = this.chessboard.view.squareHeight
+
+        // Draw focus indicator
+        Svg.addElement(this.focusIndicatorGroup, "rect", {
+            x: point.x,
+            y: point.y,
+            width: squareWidth,
+            height: squareHeight,
+            class: "keyboard-focus"
+        })
+
+        // If we have a from square selected, also highlight it
+        if (this.fromSquare) {
+            const fromPoint = this.chessboard.view.squareToPoint(this.fromSquare)
+            Svg.addElement(this.focusIndicatorGroup, "rect", {
+                x: fromPoint.x,
+                y: fromPoint.y,
+                width: squareWidth,
+                height: squareHeight,
+                class: "keyboard-from-square"
+            })
+        }
+    }
+
+    clearFocusIndicator() {
+        while (this.focusIndicatorGroup.firstChild) {
+            this.focusIndicatorGroup.removeChild(this.focusIndicatorGroup.firstChild)
+        }
+    }
+
+    destroy() {
+        this.chessboard.view.svg.removeEventListener("keydown", this.handleKeyDown)
+        this.chessboard.view.svg.removeEventListener("focus", this.handleFocus)
+        this.chessboard.view.svg.removeEventListener("blur", this.handleBlur)
+        if (this.liveRegion && this.liveRegion.parentNode) {
+            this.liveRegion.parentNode.removeChild(this.liveRegion)
+        }
+        this.clearFocusIndicator()
+    }
+}

package/src/extensions/arrows/Arrows.js

@@ -25,6 +25,9 @@ export class Arrows extends Extension {
         this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
             this.onRedrawBoard()
         })
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.onDestroy()
+        })
         this.props = {
             sprite: "extensions/arrows/arrows.svg",
             slice: "arrowDefault",
@@ -43,6 +46,16 @@ export class Arrows extends Extension {
         this.arrows = []
     }
 
+    onDestroy() {
+        this.arrows.length = 0
+        if (this.arrowGroup && this.arrowGroup.parentNode) {
+            this.arrowGroup.parentNode.removeChild(this.arrowGroup)
+        }
+        delete this.chessboard.addArrow
+        delete this.chessboard.getArrows
+        delete this.chessboard.removeArrows
+    }
+
     onRedrawBoard() {
         while (this.arrowGroup.firstChild) {
             this.arrowGroup.removeChild(this.arrowGroup.firstChild)
@@ -112,7 +125,7 @@ export class Arrows extends Extension {
 
     addArrow(type, from, to) {
         this.arrows.push(new Arrow(from, to, type))
-        this.chessboard.view.redrawBoard()
+        this.onRedrawBoard()
     }
 
     getArrows(type = undefined, from = undefined, to = undefined) {
@@ -127,7 +140,7 @@ export class Arrows extends Extension {
 
     removeArrows(type = undefined, from = undefined, to = undefined) {
         this.arrows = this.arrows.filter((arrow) => !arrow.matches(from, to, type))
-        this.chessboard.view.redrawBoard()
+        this.onRedrawBoard()
     }
 
     getSpriteUrl() {

package/src/extensions/auto-border-none/AutoBorderNone.js

@@ -8,12 +8,16 @@ import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 export class AutoBorderNone extends Extension {
     constructor(chessboard, props = {}) {
         super(chessboard)
+        this.originalBorderType = chessboard.props.style.borderType
         this.props = {
             chessboardBorderType: chessboard.props.style.borderType,
             borderNoneBelow: 540 // pixels width of the board, where the border is set to none
         }
         Object.assign(this.props, props)
         this.registerExtensionPoint(EXTENSION_POINT.beforeRedrawBoard, this.extensionPointBeforeRedrawBoard.bind(this))
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.chessboard.props.style.borderType = this.originalBorderType
+        })
     }
     extensionPointBeforeRedrawBoard() {
         let newBorderType

package/src/extensions/html-layer/HtmlLayer.js

@@ -3,14 +3,18 @@
  * Repository: https://github.com/shaack/cm-chessboard
  * License: MIT, see file 'LICENSE'
  */
-import {Extension} from "../../model/Extension.js"
+import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
 
 export class HtmlLayer extends Extension {
     /** @constructor */
     constructor(chessboard) {
         super(chessboard)
+        this.layers = []
         chessboard.addHtmlLayer = this.addHtmlLayer.bind(this)
         chessboard.removeHtmlLayer = this.removeHtmlLayer.bind(this)
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.onDestroy()
+        })
     }
     addHtmlLayer(html) {
         const layer = document.createElement("div")
@@ -23,9 +27,26 @@ export class HtmlLayer extends Extension {
         layer.style.bottom = "0"
         layer.style.right = "0"
         layer.innerHTML = html
+        this.layers.push(layer)
         return layer
     }
     removeHtmlLayer(layer) {
-        this.chessboard.context.removeChild(layer)
+        const index = this.layers.indexOf(layer)
+        if (index !== -1) {
+            this.layers.splice(index, 1)
+        }
+        if (layer && layer.parentNode === this.chessboard.context) {
+            this.chessboard.context.removeChild(layer)
+        }
+    }
+    onDestroy() {
+        for (const layer of this.layers) {
+            if (layer.parentNode) {
+                layer.parentNode.removeChild(layer)
+            }
+        }
+        this.layers.length = 0
+        delete this.chessboard.addHtmlLayer
+        delete this.chessboard.removeHtmlLayer
     }
 }

package/src/extensions/markers/Markers.js

@@ -29,6 +29,9 @@ export class Markers extends Extension {
         this.registerExtensionPoint(EXTENSION_POINT.afterRedrawBoard, () => {
             this.onRedrawBoard()
         })
+        this.registerExtensionPoint(EXTENSION_POINT.destroy, () => {
+            this.onDestroy()
+        })
         this.props = {
             autoMarkers: MARKER_TYPE.frame, // set to `null` to disable autoMarkers
             sprite: "extensions/markers/markers.svg" // the sprite file of the markers
@@ -53,6 +56,21 @@ export class Markers extends Extension {
         }
     }
 
+    onDestroy() {
+        this.markers.length = 0
+        if (this.markerGroupDown && this.markerGroupDown.parentNode) {
+            this.markerGroupDown.parentNode.removeChild(this.markerGroupDown)
+        }
+        if (this.markerGroupUp && this.markerGroupUp.parentNode) {
+            this.markerGroupUp.parentNode.removeChild(this.markerGroupUp)
+        }
+        delete this.chessboard.addMarker
+        delete this.chessboard.getMarkers
+        delete this.chessboard.removeMarkers
+        delete this.chessboard.addLegalMovesMarkers
+        delete this.chessboard.removeLegalMovesMarkers
+    }
+
     drawAutoMarkers(event) {
         if(event.type !== INPUT_EVENT_TYPE.moveInputFinished) {
             this.removeMarkers(this.props.autoMarkers)
@@ -86,21 +104,33 @@ export class Markers extends Extension {
     }
 
     addLegalMovesMarkers(moves) {
-        for (const move of moves) {
-            if (move.promotion && move.promotion !== "q") {
-                continue
-            }
-            if (this.chessboard.getPiece(move.to)) {
-                this.chessboard.addMarker(MARKER_TYPE.bevel, move.to)
-            } else {
-                this.chessboard.addMarker(MARKER_TYPE.dot, move.to)
+        this.batchUpdate = true
+        try {
+            for (const move of moves) {
+                if (move.promotion && move.promotion !== "q") {
+                    continue
+                }
+                if (this.chessboard.getPiece(move.to)) {
+                    this.chessboard.addMarker(MARKER_TYPE.bevel, move.to)
+                } else {
+                    this.chessboard.addMarker(MARKER_TYPE.dot, move.to)
+                }
             }
+        } finally {
+            this.batchUpdate = false
+            this.onRedrawBoard()
         }
     }
 
     removeLegalMovesMarkers() {
-        this.chessboard.removeMarkers(MARKER_TYPE.bevel)
-        this.chessboard.removeMarkers(MARKER_TYPE.dot)
+        this.batchUpdate = true
+        try {
+            this.chessboard.removeMarkers(MARKER_TYPE.bevel)
+            this.chessboard.removeMarkers(MARKER_TYPE.dot)
+        } finally {
+            this.batchUpdate = false
+            this.onRedrawBoard()
+        }
     }
 
     drawMarker(marker) {
@@ -130,7 +160,9 @@ export class Markers extends Extension {
             return
         }
         this.markers.push(new Marker(square, type))
-        this.onRedrawBoard()
+        if (!this.batchUpdate) {
+            this.onRedrawBoard()
+        }
     }
 
     getMarkers(type = undefined, square = undefined) {
@@ -153,7 +185,9 @@ export class Markers extends Extension {
             return
         }
         this.markers = this.markers.filter((marker) => !marker.matches(square, type))
-        this.onRedrawBoard()
+        if (!this.batchUpdate) {
+            this.onRedrawBoard()
+        }
     }
 
     getSpriteUrl() {

package/src/extensions/promotion-dialog/PromotionDialog.js

@@ -91,14 +91,16 @@ export class PromotionDialog extends Extension {
         this.state.dialogParams.color = color
         this.state.callback = callback
         this.setDisplayState(DISPLAY_STATE.displayRequested)
-        setTimeout(() => {
-                this.chessboard.view.positionsAnimationTask.then(() => {
-                    this.setDisplayState(DISPLAY_STATE.shown)
-                    this.announce(this.t.choosePromotion + ": " +
-                        this.pieceOrder.map(p => this.t.pieces[p]).join(", "))
-                })
-            }
-        )
+        this.showTimeoutId = setTimeout(() => {
+            this.showTimeoutId = null
+            if (!this.chessboard.view) return // destroyed before timeout fired
+            this.chessboard.view.positionsAnimationTask.then(() => {
+                if (this.state.displayState !== DISPLAY_STATE.displayRequested) return
+                this.setDisplayState(DISPLAY_STATE.shown)
+                this.announce(this.t.choosePromotion + ": " +
+                    this.pieceOrder.map(p => this.t.pieces[p]).join(", "))
+            })
+        })
     }
 
     // public (chessboard.isPromotionDialogShown)
@@ -144,12 +146,13 @@ export class PromotionDialog extends Extension {
             const squareCenterPoint = this.chessboard.view.squareToPoint(this.state.dialogParams.square)
             squareCenterPoint.x = squareCenterPoint.x + squareWidth / 2
             squareCenterPoint.y = squareCenterPoint.y + squareHeight / 2
-            let turned = false
+            this.turned = false
             const rank = parseInt(this.state.dialogParams.square.charAt(1), 10)
             if (this.chessboard.getOrientation() === COLOR.white && rank < 5 ||
                 this.chessboard.getOrientation() === COLOR.black && rank >= 5) {
-                turned = true
+                this.turned = true
             }
+            const turned = this.turned
             const offsetY = turned ? -4 * squareHeight : 0
             const offsetX = squareCenterPoint.x + squareWidth > this.chessboard.view.width ? -squareWidth : 0
             Svg.addElement(this.promotionDialogGroup,
@@ -247,6 +250,7 @@ export class PromotionDialog extends Extension {
     }
 
     setDisplayState(displayState) {
+        const prevState = this.state.displayState
         this.state.displayState = displayState
         if (displayState === DISPLAY_STATE.shown) {
             this.clickDelegate = Utils.delegate(this.chessboard.view.svg,
@@ -258,19 +262,27 @@ export class PromotionDialog extends Extension {
             // Add keyboard listener
             document.addEventListener("keydown", this.handleKeyDown)
         } else if (displayState === DISPLAY_STATE.hidden) {
-            this.clickDelegate.remove()
-            this.chessboard.view.svg.removeEventListener("contextmenu", this.contextMenuListener)
+            if (this.clickDelegate) {
+                this.clickDelegate.remove()
+                this.clickDelegate = null
+            }
+            if (this.contextMenuListener && this.chessboard.view) {
+                this.chessboard.view.svg.removeEventListener("contextmenu", this.contextMenuListener)
+                this.contextMenuListener = null
+            }
             // Remove keyboard listener
             document.removeEventListener("keydown", this.handleKeyDown)
-            // Restore focus
-            if (this.previouslyFocusedElement && this.previouslyFocusedElement.focus) {
+            // Restore focus (only if the dialog was actually shown before)
+            if (prevState === DISPLAY_STATE.shown &&
+                this.previouslyFocusedElement && this.previouslyFocusedElement.focus) {
                 this.previouslyFocusedElement.focus()
             }
         }
         this.redrawDialog()
         // Focus first button after redraw when shown
         if (displayState === DISPLAY_STATE.shown) {
-            setTimeout(() => {
+            this.focusTimeoutId = setTimeout(() => {
+                this.focusTimeoutId = null
                 this.focusButton(0)
             }, 0)
         }
@@ -282,12 +294,28 @@ export class PromotionDialog extends Extension {
         }
         switch (event.key) {
             case "ArrowDown":
+                event.preventDefault()
+                if (this.turned) {
+                    this.focusedIndex = (this.focusedIndex - 1 + 4) % 4
+                } else {
+                    this.focusedIndex = (this.focusedIndex + 1) % 4
+                }
+                this.focusButton(this.focusedIndex)
+                break
             case "ArrowRight":
                 event.preventDefault()
                 this.focusedIndex = (this.focusedIndex + 1) % 4
                 this.focusButton(this.focusedIndex)
                 break
             case "ArrowUp":
+                event.preventDefault()
+                if (this.turned) {
+                    this.focusedIndex = (this.focusedIndex + 1) % 4
+                } else {
+                    this.focusedIndex = (this.focusedIndex - 1 + 4) % 4
+                }
+                this.focusButton(this.focusedIndex)
+                break
             case "ArrowLeft":
                 event.preventDefault()
                 this.focusedIndex = (this.focusedIndex - 1 + 4) % 4
@@ -335,18 +363,45 @@ export class PromotionDialog extends Extension {
     }
 
     announce(message) {
+        if (!this.liveRegion) return
         this.liveRegion.textContent = ""
+        if (this.announceTimeoutId) {
+            clearTimeout(this.announceTimeoutId)
+        }
         // Small delay to ensure screen readers pick up the change
-        setTimeout(() => {
-            this.liveRegion.textContent = message
+        this.announceTimeoutId = setTimeout(() => {
+            this.announceTimeoutId = null
+            if (this.liveRegion) {
+                this.liveRegion.textContent = message
+            }
         }, 50)
     }
 
     destroy() {
+        // Close the dialog first so its listeners are removed
+        if (this.state.displayState === DISPLAY_STATE.shown) {
+            this.setDisplayState(DISPLAY_STATE.hidden)
+        }
+        // Cancel any pending timeouts so callbacks don't fire on a destroyed board
+        if (this.showTimeoutId) {
+            clearTimeout(this.showTimeoutId)
+            this.showTimeoutId = null
+        }
+        if (this.focusTimeoutId) {
+            clearTimeout(this.focusTimeoutId)
+            this.focusTimeoutId = null
+        }
+        if (this.announceTimeoutId) {
+            clearTimeout(this.announceTimeoutId)
+            this.announceTimeoutId = null
+        }
         document.removeEventListener("keydown", this.handleKeyDown)
         if (this.liveRegion && this.liveRegion.parentNode) {
             this.liveRegion.parentNode.removeChild(this.liveRegion)
+            this.liveRegion = null
         }
+        delete this.chessboard.showPromotionDialog
+        delete this.chessboard.isPromotionDialogShown
     }
 
 }

package/src/model/Position.js

@@ -143,7 +143,7 @@ export class Position {
     }
 
     clone() {
-        const cloned = new Position()
+        const cloned = Object.create(Position.prototype)
         cloned.squares = this.squares.slice(0)
         return cloned
     }

package/src/view/ChessboardView.js

@@ -49,7 +49,12 @@ export class ChessboardView {
         if (chessboard.props.responsive) {
             if (typeof ResizeObserver !== "undefined") {
                 this.resizeObserver = new ResizeObserver(() => {
-                    setTimeout(() => { // prevents "ResizeObserver loop completed with undelivered notifications."
+                    // Defer via setTimeout to avoid "ResizeObserver loop
+                    // completed with undelivered notifications." The timeout
+                    // id is tracked so destroy() can cancel a pending call
+                    // and avoid running handleResize on a destroyed board.
+                    this.resizeTimeout = setTimeout(() => {
+                        this.resizeTimeout = null
                         this.handleResize()
                     })
                 })
@@ -76,6 +81,13 @@ export class ChessboardView {
         if (this.resizeObserver) {
             this.resizeObserver.unobserve(this.chessboard.context)
         }
+        // Cancel any pending handleResize that the ResizeObserver callback
+        // has already scheduled via setTimeout. unobserve() stops new
+        // notifications but does not clear timeouts we scheduled ourselves.
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout)
+            this.resizeTimeout = null
+        }
         if (this.resizeListener) {
             window.removeEventListener("resize", this.resizeListener)
         }
@@ -145,6 +157,12 @@ export class ChessboardView {
     }
 
     handleResize() {
+        // Skip if the board has already been destroyed. The resizeObserver
+        // or window resize listener may fire a callback whose deferred work
+        // is still pending when destroy() runs.
+        if (!this.chessboard || !this.chessboard.state) {
+            return
+        }
         this.container.style.width = (this.chessboard.context.clientWidth) + "px"
         this.container.style.height = (this.chessboard.context.clientWidth * this.chessboard.props.style.aspectRatio) + "px"
         if (this.container.clientWidth !== this.width || this.container.clientHeight !== this.height) {

package/test/TestChessboard.js

@@ -69,4 +69,42 @@ describe("TestChessboard", () => {
         chessboard.destroy()
     })
 
+    // Regression for a production crash: the ResizeObserver callback defers
+    // handleResize() via setTimeout to avoid "ResizeObserver loop completed"
+    // warnings. If destroy() is called between the observer firing and the
+    // setTimeout running, handleResize -> redrawBoard hits
+    // `this.chessboard.state.invokeExtensionPoints(...)` where `state` is
+    // now undefined, throwing TypeError.
+    //
+    // We invalidate view.width by zeroing it so that the size-changed branch
+    // of handleResize is guaranteed to enter updateMetrics + redrawBoard.
+    // Otherwise a stable container size would short-circuit the branch and
+    // the bug path wouldn't be exercised.
+    it("should not crash when destroyed while a resize handler is pending", async () => {
+        const chessboard = new Chessboard(document.getElementById("TestBoard"), {
+            assetsUrl: "../assets/",
+            position: FEN.start
+        })
+        const view = chessboard.view
+        // Force the size-changed branch to trigger on the next handleResize
+        view.width = 0
+        view.height = 0
+        // Simulate what the ResizeObserver callback does: defer handleResize
+        // via setTimeout. This path is deterministic.
+        const pending = new Promise((resolve) => {
+            setTimeout(() => {
+                try {
+                    view.handleResize()
+                    resolve(null)
+                } catch (e) {
+                    resolve(e)
+                }
+            })
+        })
+        // Force the race: destroy the board before the setTimeout fires.
+        chessboard.destroy()
+        const error = await pending
+        assert.equal(error, null, error && error.message)
+    })
+
 })

package/CLAUDE.md

@@ -1,207 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-cm-chessboard is a lightweight, dependency-free JavaScript chessboard library. It's ES6 module-based, responsive, SVG-rendered, and used in production on chessmail.eu/chessmail.de.
-
-**Key Philosophy:** The core is intentionally minimal. Functionality is extended through an extension system rather than adding features to the core.
-
-## Development Commands
-
-### Running Tests
-
-```bash
-# Tests use the Teevi framework and must be run in a browser
-# Open test/index.html directly to run the test suite
-```
-
-### No Build Step
-This project has no build process. It uses native ES6 modules that run directly in modern browsers.
-
-## Architecture
-
-### Core Components (MVC Pattern)
-
-The codebase follows a clean MVC architecture:
-
-1. **Model Layer** (`src/model/`)
-   - `Position.js` - Board state representation using FEN notation. Contains 64-square array and FEN parsing/serialization
-   - `ChessboardState.js` - Manages application state (orientation, input flags, extension points)
-   - `Extension.js` - Base class for all extensions. Defines EXTENSION_POINT constants
-
-2. **View Layer** (`src/view/`)
-   - `ChessboardView.js` - SVG rendering, board drawing, piece rendering, coordinate display
-   - `VisualMoveInput.js` - Handles user interaction (drag & drop, click to move)
-   - `PositionAnimationsQueue.js` - Queues and executes piece animations
-
-3. **Controller** (`src/Chessboard.js`)
-   - Main API class that coordinates model and view
-   - Entry point for all public methods
-   - Instantiates extensions from props
-
-4. **Utilities** (`src/lib/`)
-   - `Svg.js` - SVG DOM manipulation helpers
-   - `Utils.js` - General utilities (URL handling, object merging)
-
-### Data Flow
-
-1. User calls API method on `Chessboard` instance
-2. `Chessboard` updates `Position` in `ChessboardState`
-3. Extension points are invoked via `state.invokeExtensionPoints()`
-4. Animation is queued in `PositionAnimationsQueue`
-5. `ChessboardView` renders the changes to SVG
-
-### Extension System
-
-Extensions are the primary way to add functionality. They:
-- Extend the `Extension` base class
-- Register callbacks at extension points using `registerExtensionPoint(EXTENSION_POINT.*, callback)`
-- Can add methods directly to the chessboard instance (e.g., `chessboard.addMarker = this.addMarker.bind(this)`)
-
-**Available Extension Points** (defined in `Extension.js`):
-- `positionChanged` - Piece positions changed
-- `boardChanged` - Board orientation changed
-- `boardResized` - Board was resized
-- `moveInputToggled` - Move input enabled/disabled
-- `moveInput` - Move events (started, validating, canceled, finished)
-- `beforeRedrawBoard` / `afterRedrawBoard` - Board redraw lifecycle
-- `animation` - Animation lifecycle hooks
-- `destroy` - Cleanup before board destruction
-
-**Included Extensions** (`src/extensions/`):
-- `markers/` - Visual markers on squares (frames, circles, dots)
-- `arrows/` - Drawing arrows between squares
-- `right-click-annotator/` - Right-click UI for annotations (uses markers + arrows)
-- `accessibility/` - Screen reader support, braille notation, keyboard input
-- `promotion-dialog/` - UI dialog for pawn promotion
-- `persistence/` - Save/restore board state to localStorage
-- `html-layer/` - Overlay HTML content on the board
-- `auto-border-none/` - Utility extension
-
-## Important Implementation Details
-
-### Coordinate System
-- Squares are represented as strings: "a1", "h8", etc.
-- Internally uses 0-63 index (Position.squareToIndex / indexToSquare)
-- Orientation affects rendering but not internal representation
-
-### FEN Handling
-- Position class only stores the piece placement (first part of full FEN)
-- Full FEN format is supported in setPosition() but only piece positions are stored
-- Use `FEN.start` and `FEN.empty` constants
-
-### Piece Naming
-- Format: `{color}{type}` - e.g., "wp" (white pawn), "bk" (black king)
-- Color: "w" or "b"
-- Type: "p", "n", "b", "r", "q", "k"
-
-### SVG Rendering
-- Pieces are rendered from SVG sprites (40x40px tiles)
-- Sprite can be cached in a hidden div for performance
-- Board uses multiple SVG groups as layers (board, coordinates, markers, pieces, etc.)
-- Responsive sizing via ResizeObserver or window resize events
-
-### Move Input System
-- Implemented in `VisualMoveInput.js`
-- Supports both drag-and-drop and click-to-move
-- Callback receives event objects with types from `INPUT_EVENT_TYPE`
-- Returns true/false to validate moves
-- Move input can be enabled per color (white/black/both)
-
-### Animation Queue
-- All position changes are queued to prevent conflicts
-- Animations return Promises that resolve when complete
-- Queue ensures sequential execution even with rapid API calls
-
-## Writing Extensions
-
-Template for a new extension:
-
-```javascript
-import {Extension, EXTENSION_POINT} from "../../model/Extension.js"
-
-export class MyExtension extends Extension {
-    constructor(chessboard, props = {}) {
-        super(chessboard)
-
-        // Set default props
-        this.props = {
-            myOption: true
-        }
-        Object.assign(this.props, props)
-
-        // Register extension points
-        this.registerExtensionPoint(EXTENSION_POINT.positionChanged, (data) => {
-            // React to position changes
-        })
-
-        // Add methods to chessboard instance
-        chessboard.myMethod = this.myMethod.bind(this)
-    }
-
-    myMethod() {
-        // Implementation
-    }
-}
-```
-
-Enable extension in chessboard props:
-```javascript
-extensions: [{class: MyExtension, props: {myOption: false}}]
-```
-
-## Common Patterns
-
-### Adding a piece
-```javascript
-board.setPiece("e4", "wn", true) // animated
-```
-
-### Moving pieces
-```javascript
-board.movePiece("e2", "e4", true) // animated
-```
-
-### Setting entire position
-```javascript
-board.setPosition(FEN.start, true) // animated
-```
-
-### Enabling move input
-```javascript
-board.enableMoveInput((event) => {
-    if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-        // Validate the move
-        return isLegalMove(event.squareFrom, event.squareTo)
-    }
-}, COLOR.white) // Optional: restrict to one side
-```
-
-### Creating markers (requires Markers extension)
-```javascript
-board.addMarker(MARKER_TYPE.dot, "e4")
-board.removeMarkers(MARKER_TYPE.frame) // Remove by type
-board.removeMarkers() // Remove all
-```
-
-## Assets Structure
-
-- `assets/pieces/` - SVG sprite files for piece sets (standard.svg, staunty.svg)
-- `assets/extensions/` - Assets needed by extensions (markers SVG, arrow SVG, etc.)
-- `assets/chessboard.css` - Core styles
-- Extension-specific CSS must be included separately when using extensions
-
-## Examples
-
-The `examples/` directory contains working examples demonstrating:
-- Simple board creation
-- Move input and validation
-- Different visual styles
-- All included extensions
-- Animation examples
-- Responsive boards
-- Multiple boards on one page
-
-Reference examples when implementing new features or debugging issues.