react-chess-core 0.1.0 → 0.1.2

package/dist/index.esm.js

@@ -1,9 +1,83 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useMemo, Component } from 'react';
-import { Chessboard, ChessboardDnDProvider } from 'react-chessboard';
+import { createContext, useContext, useRef, useCallback, useEffect, useMemo, useState, useLayoutEffect, Component } from 'react';
+import { ChessboardDnDProvider as ChessboardDnDProvider$1, Chessboard } from 'react-chessboard';
 import { Chess } from 'chess.js';
 import { createPortal } from 'react-dom';
 
+const BOARD_THEME_IDS = [
+    'classic',
+    'forest',
+    'marine',
+    'marble',
+    'ivory',
+    'ocean',
+    'copper',
+    'bubblegum',
+    'sunset',
+];
+const DEFAULT_BOARD_THEME = 'classic';
+const BOARD_THEMES = {
+    classic: {
+        label: 'Classic',
+        darkSquare: '#b58863',
+        lightSquare: '#f0d9b5',
+    },
+    forest: {
+        label: 'Forest',
+        darkSquare: '#769656',
+        lightSquare: '#eeeed2',
+    },
+    marine: {
+        label: 'Marine',
+        darkSquare: '#5b7c99',
+        lightSquare: '#d6e4f0',
+    },
+    marble: {
+        label: 'Marble',
+        darkSquare: '#a8a8a8',
+        lightSquare: '#ffffff',
+    },
+    ivory: {
+        label: 'Ivory',
+        darkSquare: '#c9a66b',
+        lightSquare: '#fff8e7',
+    },
+    ocean: {
+        label: 'Ocean',
+        darkSquare: '#2d6a7e',
+        lightSquare: '#a8dadc',
+    },
+    copper: {
+        label: 'Copper',
+        darkSquare: '#9c6644',
+        lightSquare: '#f4e4d4',
+    },
+    bubblegum: {
+        label: 'Bubblegum',
+        darkSquare: '#c77dff',
+        lightSquare: '#ffd6ff',
+    },
+    sunset: {
+        label: 'Sunset',
+        darkSquare: '#e76f51',
+        lightSquare: '#ffe8d6',
+    },
+};
+function isBoardThemeId(value) {
+    return (typeof value === 'string' &&
+        BOARD_THEME_IDS.includes(value));
+}
+function boardThemeFromLegacyUiTheme(_theme) {
+    return DEFAULT_BOARD_THEME;
+}
+function getBoardThemeStyles(boardTheme) {
+    const { darkSquare, lightSquare } = BOARD_THEMES[boardTheme];
+    return {
+        customDarkSquareStyle: { backgroundColor: darkSquare },
+        customLightSquareStyle: { backgroundColor: lightSquare },
+    };
+}
+
 const ChessboardThemeContext = createContext(undefined);
 const useChessboardTheme = () => {
     const context = useContext(ChessboardThemeContext);
@@ -14,23 +88,1607 @@ const useChessboardTheme = () => {
 };
 /** @deprecated Use {@link useChessboardTheme}. */
 const useTheme = useChessboardTheme;
-const getStylesForTheme = (theme) => {
-    if (theme === 'dark') {
+/** @deprecated Use {@link getBoardThemeStyles}. */
+const getStylesForTheme = (theme) => getBoardThemeStyles(boardThemeFromLegacyUiTheme());
+const ThemeProvider = ({ children, theme = 'dark', boardTheme, }) => {
+    const resolvedBoardTheme = boardTheme !== null && boardTheme !== void 0 ? boardTheme : boardThemeFromLegacyUiTheme();
+    const { customDarkSquareStyle, customLightSquareStyle } = getBoardThemeStyles(resolvedBoardTheme);
+    return (jsx(ChessboardThemeContext.Provider, { value: { customDarkSquareStyle, customLightSquareStyle }, children: children }));
+};
+
+var E=r=>{throw TypeError(r)};var P=(r,n,e)=>n.has(r)||E("Cannot "+e);var t=(r,n,e)=>(P(r,n,"read from private field"),e?e.call(r):n.get(r)),s=(r,n,e)=>n.has(r)?E("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(r):n.set(r,e),p=(r,n,e,i)=>(P(r,n,"write to private field"),n.set(r,e),e);var h,B=class{constructor(){s(this,h);this.register=n=>{t(this,h).push(n);};this.unregister=n=>{for(;t(this,h).indexOf(n)!==-1;)t(this,h).splice(t(this,h).indexOf(n),1);};this.backendChanged=n=>{for(let e of t(this,h))e.backendChanged(n);};p(this,h,[]);}};h=new WeakMap;var c$1,l,a,d,k,x,T,D,m,v,f,w=class w{constructor(n,e,i){s(this,c$1);s(this,l);s(this,a);s(this,d);s(this,k);s(this,x,(n,e,i)=>{if(!i.backend)throw new Error(`You must specify a 'backend' property in your Backend entry: ${JSON.stringify(i)}`);let u=i.backend(n,e,i.options),o=i.id,g=!i.id&&u&&u.constructor;if(g&&(o=u.constructor.name),!o)throw new Error(`You must specify an 'id' property in your Backend entry: ${JSON.stringify(i)}
+        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-5xx`);if(g&&console.warn(`Deprecation notice: You are using a pipeline which doesn't include backends' 'id'.
+        This might be unsupported in the future, please specify 'id' explicitely for every backend.`),t(this,a)[o])throw new Error(`You must specify a unique 'id' property in your Backend entry:
+        ${JSON.stringify(i)} (conflicts with: ${JSON.stringify(t(this,a)[o])})`);return {id:o,instance:u,preview:i.preview??false,transition:i.transition,skipDispatchOnTransition:i.skipDispatchOnTransition??false}});this.setup=()=>{if(!(typeof window>"u")){if(w.isSetUp)throw new Error("Cannot have two MultiBackends at the same time.");w.isSetUp=true,t(this,T).call(this,window),t(this,a)[t(this,c$1)].instance.setup();}};this.teardown=()=>{typeof window>"u"||(w.isSetUp=false,t(this,D).call(this,window),t(this,a)[t(this,c$1)].instance.teardown());};this.connectDragSource=(n,e,i)=>t(this,f).call(this,"connectDragSource",n,e,i);this.connectDragPreview=(n,e,i)=>t(this,f).call(this,"connectDragPreview",n,e,i);this.connectDropTarget=(n,e,i)=>t(this,f).call(this,"connectDropTarget",n,e,i);this.profile=()=>t(this,a)[t(this,c$1)].instance.profile();this.previewEnabled=()=>t(this,a)[t(this,c$1)].preview;this.previewsList=()=>t(this,l);this.backendsList=()=>t(this,d);s(this,T,n=>{for(let e of t(this,d))e.transition&&n.addEventListener(e.transition.event,t(this,m));});s(this,D,n=>{for(let e of t(this,d))e.transition&&n.removeEventListener(e.transition.event,t(this,m));});s(this,m,n=>{let e=t(this,c$1);if(t(this,d).some(i=>i.id!==t(this,c$1)&&i.transition&&i.transition.check(n)?(p(this,c$1,i.id),true):false),t(this,c$1)!==e){t(this,a)[e].instance.teardown();for(let[g,b]of Object.entries(t(this,k)))b.unsubscribe(),b.unsubscribe=t(this,v).call(this,b.func,...b.args);t(this,l).backendChanged(this);let i=t(this,a)[t(this,c$1)];if(i.instance.setup(),i.skipDispatchOnTransition)return;let u=n.constructor,o=new u(n.type,n);n.target?.dispatchEvent(o);}});s(this,v,(n,e,i,u)=>t(this,a)[t(this,c$1)].instance[n](e,i,u));s(this,f,(n,e,i,u)=>{let o=`${n}_${e}`,g=t(this,v).call(this,n,e,i,u);return t(this,k)[o]={func:n,args:[e,i,u],unsubscribe:g},()=>{t(this,k)[o].unsubscribe(),delete t(this,k)[o];}});if(!i||!i.backends||i.backends.length<1)throw new Error(`You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)
+        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx`);p(this,l,new B),p(this,a,{}),p(this,d,[]);for(let u of i.backends){let o=t(this,x).call(this,n,e,u);t(this,a)[o.id]=o,t(this,d).push(o);}p(this,c$1,t(this,d)[0].id),p(this,k,{});}};c$1=new WeakMap,l=new WeakMap,a=new WeakMap,d=new WeakMap,k=new WeakMap,x=new WeakMap,T=new WeakMap,D=new WeakMap,m=new WeakMap,v=new WeakMap,f=new WeakMap,w.isSetUp=false;var M=w;var S=(r,n,e)=>new M(r,n,e);var y=(r,n)=>({event:r,check:n});var L=y("touchstart",r=>{let n=r;return n.touches!==null&&n.touches!==void 0}),U=y("pointerdown",r=>r.pointerType==="mouse");
+
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */ function invariant(condition, format, ...args) {
+    if (isProduction()) ;
+    if (!condition) {
+        let error;
+        {
+            let argIndex = 0;
+            error = new Error(format.replace(/%s/g, function() {
+                return args[argIndex++];
+            }));
+            error.name = 'Invariant Violation';
+        }
+        error.framesToPop = 1 // we don't care about invariant's own frame
+        ;
+        throw error;
+    }
+}
+function isProduction() {
+    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
+}
+
+// cheap lodash replacements
+function memoize(fn) {
+    let result = null;
+    const memoized = ()=>{
+        if (result == null) {
+            result = fn();
+        }
+        return result;
+    };
+    return memoized;
+}
+/**
+ * drop-in replacement for _.without
+ */ function without(items, item) {
+    return items.filter((i)=>i !== item
+    );
+}
+function union(itemsA, itemsB) {
+    const set = new Set();
+    const insertItem = (item)=>set.add(item)
+    ;
+    itemsA.forEach(insertItem);
+    itemsB.forEach(insertItem);
+    const result = [];
+    set.forEach((key)=>result.push(key)
+    );
+    return result;
+}
+
+class EnterLeaveCounter {
+    enter(enteringNode) {
+        const previousLength = this.entered.length;
+        const isNodeEntered = (node)=>this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode))
+        ;
+        this.entered = union(this.entered.filter(isNodeEntered), [
+            enteringNode
+        ]);
+        return previousLength === 0 && this.entered.length > 0;
+    }
+    leave(leavingNode) {
+        const previousLength = this.entered.length;
+        this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
+        return previousLength > 0 && this.entered.length === 0;
+    }
+    reset() {
+        this.entered = [];
+    }
+    constructor(isNodeInDocument){
+        this.entered = [];
+        this.isNodeInDocument = isNodeInDocument;
+    }
+}
+
+class NativeDragSource {
+    initializeExposedProperties() {
+        Object.keys(this.config.exposeProperties).forEach((property)=>{
+            Object.defineProperty(this.item, property, {
+                configurable: true,
+                enumerable: true,
+                get () {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
+                    return null;
+                }
+            });
+        });
+    }
+    loadDataTransfer(dataTransfer) {
+        if (dataTransfer) {
+            const newProperties = {};
+            Object.keys(this.config.exposeProperties).forEach((property)=>{
+                const propertyFn = this.config.exposeProperties[property];
+                if (propertyFn != null) {
+                    newProperties[property] = {
+                        value: propertyFn(dataTransfer, this.config.matchesTypes),
+                        configurable: true,
+                        enumerable: true
+                    };
+                }
+            });
+            Object.defineProperties(this.item, newProperties);
+        }
+    }
+    canDrag() {
+        return true;
+    }
+    beginDrag() {
+        return this.item;
+    }
+    isDragging(monitor, handle) {
+        return handle === monitor.getSourceId();
+    }
+    endDrag() {
+    // empty
+    }
+    constructor(config){
+        this.config = config;
+        this.item = {};
+        this.initializeExposedProperties();
+    }
+}
+
+const FILE = '__NATIVE_FILE__';
+const URL$1 = '__NATIVE_URL__';
+const TEXT = '__NATIVE_TEXT__';
+const HTML = '__NATIVE_HTML__';
+
+var NativeTypes = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FILE: FILE,
+    HTML: HTML,
+    TEXT: TEXT,
+    URL: URL$1
+});
+
+function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
+    const result = typesToTry.reduce((resultSoFar, typeToTry)=>resultSoFar || dataTransfer.getData(typeToTry)
+    , '');
+    return result != null ? result : defaultValue;
+}
+
+const nativeTypesConfig = {
+    [FILE]: {
+        exposeProperties: {
+            files: (dataTransfer)=>Array.prototype.slice.call(dataTransfer.files)
+            ,
+            items: (dataTransfer)=>dataTransfer.items
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Files'
+        ]
+    },
+    [HTML]: {
+        exposeProperties: {
+            html: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Html',
+            'text/html'
+        ]
+    },
+    [URL$1]: {
+        exposeProperties: {
+            urls: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Url',
+            'text/uri-list'
+        ]
+    },
+    [TEXT]: {
+        exposeProperties: {
+            text: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Text',
+            'text/plain'
+        ]
+    }
+};
+
+function createNativeDragSource(type, dataTransfer) {
+    const config = nativeTypesConfig[type];
+    if (!config) {
+        throw new Error(`native type ${type} has no configuration`);
+    }
+    const result = new NativeDragSource(config);
+    result.loadDataTransfer(dataTransfer);
+    return result;
+}
+function matchNativeItemType(dataTransfer) {
+    if (!dataTransfer) {
+        return null;
+    }
+    const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
+    return Object.keys(nativeTypesConfig).filter((nativeItemType)=>{
+        const typeConfig = nativeTypesConfig[nativeItemType];
+        if (!(typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.matchesTypes)) {
+            return false;
+        }
+        return typeConfig.matchesTypes.some((t)=>dataTransferTypes.indexOf(t) > -1
+        );
+    })[0] || null;
+}
+
+const isFirefox = memoize(()=>/firefox/i.test(navigator.userAgent)
+);
+const isSafari = memoize(()=>Boolean(window.safari)
+);
+
+class MonotonicInterpolant {
+    interpolate(x) {
+        const { xs , ys , c1s , c2s , c3s  } = this;
+        // The rightmost point in the dataset should give an exact result
+        let i = xs.length - 1;
+        if (x === xs[i]) {
+            return ys[i];
+        }
+        // Search for the interval x is in, returning the corresponding y if x is one of the original xs
+        let low = 0;
+        let high = c3s.length - 1;
+        let mid;
+        while(low <= high){
+            mid = Math.floor(0.5 * (low + high));
+            const xHere = xs[mid];
+            if (xHere < x) {
+                low = mid + 1;
+            } else if (xHere > x) {
+                high = mid - 1;
+            } else {
+                return ys[mid];
+            }
+        }
+        i = Math.max(0, high);
+        // Interpolate
+        const diff = x - xs[i];
+        const diffSq = diff * diff;
+        return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
+    }
+    constructor(xs, ys){
+        const { length  } = xs;
+        // Rearrange xs and ys so that xs is sorted
+        const indexes = [];
+        for(let i = 0; i < length; i++){
+            indexes.push(i);
+        }
+        indexes.sort((a, b)=>xs[a] < xs[b] ? -1 : 1
+        );
+        const dxs = [];
+        const ms = [];
+        let dx;
+        let dy;
+        for(let i1 = 0; i1 < length - 1; i1++){
+            dx = xs[i1 + 1] - xs[i1];
+            dy = ys[i1 + 1] - ys[i1];
+            dxs.push(dx);
+            ms.push(dy / dx);
+        }
+        // Get degree-1 coefficients
+        const c1s = [
+            ms[0]
+        ];
+        for(let i2 = 0; i2 < dxs.length - 1; i2++){
+            const m2 = ms[i2];
+            const mNext = ms[i2 + 1];
+            if (m2 * mNext <= 0) {
+                c1s.push(0);
+            } else {
+                dx = dxs[i2];
+                const dxNext = dxs[i2 + 1];
+                const common = dx + dxNext;
+                c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
+            }
+        }
+        c1s.push(ms[ms.length - 1]);
+        // Get degree-2 and degree-3 coefficients
+        const c2s = [];
+        const c3s = [];
+        let m;
+        for(let i3 = 0; i3 < c1s.length - 1; i3++){
+            m = ms[i3];
+            const c1 = c1s[i3];
+            const invDx = 1 / dxs[i3];
+            const common = c1 + c1s[i3 + 1] - m - m;
+            c2s.push((m - c1 - common) * invDx);
+            c3s.push(common * invDx * invDx);
+        }
+        this.xs = xs;
+        this.ys = ys;
+        this.c1s = c1s;
+        this.c2s = c2s;
+        this.c3s = c3s;
+    }
+}
+
+const ELEMENT_NODE$1 = 1;
+function getNodeClientOffset$1(node) {
+    const el = node.nodeType === ELEMENT_NODE$1 ? node : node.parentElement;
+    if (!el) {
+        return null;
+    }
+    const { top , left  } = el.getBoundingClientRect();
+    return {
+        x: left,
+        y: top
+    };
+}
+function getEventClientOffset$1(e) {
+    return {
+        x: e.clientX,
+        y: e.clientY
+    };
+}
+function isImageNode(node) {
+    var ref;
+    return node.nodeName === 'IMG' && (isFirefox() || !((ref = document.documentElement) === null || ref === void 0 ? void 0 : ref.contains(node)));
+}
+function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
+    let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
+    let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
+    // Work around @2x coordinate discrepancies in browsers
+    if (isSafari() && isImage) {
+        dragPreviewHeight /= window.devicePixelRatio;
+        dragPreviewWidth /= window.devicePixelRatio;
+    }
+    return {
+        dragPreviewWidth,
+        dragPreviewHeight
+    };
+}
+function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
+    // The browsers will use the image intrinsic size under different conditions.
+    // Firefox only cares if it's an image, but WebKit also wants it to be detached.
+    const isImage = isImageNode(dragPreview);
+    const dragPreviewNode = isImage ? sourceNode : dragPreview;
+    const dragPreviewNodeOffsetFromClient = getNodeClientOffset$1(dragPreviewNode);
+    const offsetFromDragPreview = {
+        x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
+        y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
+    };
+    const { offsetWidth: sourceWidth , offsetHeight: sourceHeight  } = sourceNode;
+    const { anchorX , anchorY  } = anchorPoint;
+    const { dragPreviewWidth , dragPreviewHeight  } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
+    const calculateYOffset = ()=>{
+        const interpolantY = new MonotonicInterpolant([
+            0,
+            0.5,
+            1
+        ], [
+            // Dock to the top
+            offsetFromDragPreview.y,
+            // Align at the center
+            (offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
+            // Dock to the bottom
+            offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, 
+        ]);
+        let y = interpolantY.interpolate(anchorY);
+        // Work around Safari 8 positioning bug
+        if (isSafari() && isImage) {
+            // We'll have to wait for @3x to see if this is entirely correct
+            y += (window.devicePixelRatio - 1) * dragPreviewHeight;
+        }
+        return y;
+    };
+    const calculateXOffset = ()=>{
+        // Interpolate coordinates depending on anchor point
+        // If you know a simpler way to do this, let me know
+        const interpolantX = new MonotonicInterpolant([
+            0,
+            0.5,
+            1
+        ], [
+            // Dock to the left
+            offsetFromDragPreview.x,
+            // Align at the center
+            (offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
+            // Dock to the right
+            offsetFromDragPreview.x + dragPreviewWidth - sourceWidth, 
+        ]);
+        return interpolantX.interpolate(anchorX);
+    };
+    // Force offsets if specified in the options.
+    const { offsetX , offsetY  } = offsetPoint;
+    const isManualOffsetX = offsetX === 0 || offsetX;
+    const isManualOffsetY = offsetY === 0 || offsetY;
+    return {
+        x: isManualOffsetX ? offsetX : calculateXOffset(),
+        y: isManualOffsetY ? offsetY : calculateYOffset()
+    };
+}
+
+let OptionsReader$1 = class OptionsReader {
+    get window() {
+        if (this.globalContext) {
+            return this.globalContext;
+        } else if (typeof window !== 'undefined') {
+            return window;
+        }
+        return undefined;
+    }
+    get document() {
+        var ref;
+        if ((ref = this.globalContext) === null || ref === void 0 ? void 0 : ref.document) {
+            return this.globalContext.document;
+        } else if (this.window) {
+            return this.window.document;
+        } else {
+            return undefined;
+        }
+    }
+    get rootElement() {
+        var ref;
+        return ((ref = this.optionsArgs) === null || ref === void 0 ? void 0 : ref.rootElement) || this.window;
+    }
+    constructor(globalContext, options){
+        this.ownerDocument = null;
+        this.globalContext = globalContext;
+        this.optionsArgs = options;
+    }
+};
+
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    }
+    return target;
+}
+class HTML5BackendImpl {
+    /**
+	 * Generate profiling statistics for the HTML5Backend.
+	 */ profile() {
+        var ref, ref1;
         return {
-            customDarkSquareStyle: { backgroundColor: '#838387' },
-            customLightSquareStyle: { backgroundColor: '#e1e1e3' },
+            sourcePreviewNodes: this.sourcePreviewNodes.size,
+            sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
+            sourceNodeOptions: this.sourceNodeOptions.size,
+            sourceNodes: this.sourceNodes.size,
+            dragStartSourceIds: ((ref = this.dragStartSourceIds) === null || ref === void 0 ? void 0 : ref.length) || 0,
+            dropTargetIds: this.dropTargetIds.length,
+            dragEnterTargetIds: this.dragEnterTargetIds.length,
+            dragOverTargetIds: ((ref1 = this.dragOverTargetIds) === null || ref1 === void 0 ? void 0 : ref1.length) || 0
+        };
+    }
+    // public for test
+    get window() {
+        return this.options.window;
+    }
+    get document() {
+        return this.options.document;
+    }
+    /**
+	 * Get the root element to use for event subscriptions
+	 */ get rootElement() {
+        return this.options.rootElement;
+    }
+    setup() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        if (root.__isReactDndBackendSetUp) {
+            throw new Error('Cannot have two HTML5 backends at the same time.');
+        }
+        root.__isReactDndBackendSetUp = true;
+        this.addEventListeners(root);
+    }
+    teardown() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        root.__isReactDndBackendSetUp = false;
+        this.removeEventListeners(this.rootElement);
+        this.clearCurrentDragSourceNode();
+        if (this.asyncEndDragFrameId) {
+            var ref;
+            (ref = this.window) === null || ref === void 0 ? void 0 : ref.cancelAnimationFrame(this.asyncEndDragFrameId);
+        }
+    }
+    connectDragPreview(sourceId, node, options) {
+        this.sourcePreviewNodeOptions.set(sourceId, options);
+        this.sourcePreviewNodes.set(sourceId, node);
+        return ()=>{
+            this.sourcePreviewNodes.delete(sourceId);
+            this.sourcePreviewNodeOptions.delete(sourceId);
+        };
+    }
+    connectDragSource(sourceId, node, options) {
+        this.sourceNodes.set(sourceId, node);
+        this.sourceNodeOptions.set(sourceId, options);
+        const handleDragStart = (e)=>this.handleDragStart(e, sourceId)
+        ;
+        const handleSelectStart = (e)=>this.handleSelectStart(e)
+        ;
+        node.setAttribute('draggable', 'true');
+        node.addEventListener('dragstart', handleDragStart);
+        node.addEventListener('selectstart', handleSelectStart);
+        return ()=>{
+            this.sourceNodes.delete(sourceId);
+            this.sourceNodeOptions.delete(sourceId);
+            node.removeEventListener('dragstart', handleDragStart);
+            node.removeEventListener('selectstart', handleSelectStart);
+            node.setAttribute('draggable', 'false');
+        };
+    }
+    connectDropTarget(targetId, node) {
+        const handleDragEnter = (e)=>this.handleDragEnter(e, targetId)
+        ;
+        const handleDragOver = (e)=>this.handleDragOver(e, targetId)
+        ;
+        const handleDrop = (e)=>this.handleDrop(e, targetId)
+        ;
+        node.addEventListener('dragenter', handleDragEnter);
+        node.addEventListener('dragover', handleDragOver);
+        node.addEventListener('drop', handleDrop);
+        return ()=>{
+            node.removeEventListener('dragenter', handleDragEnter);
+            node.removeEventListener('dragover', handleDragOver);
+            node.removeEventListener('drop', handleDrop);
+        };
+    }
+    addEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.addEventListener) {
+            return;
+        }
+        target.addEventListener('dragstart', this.handleTopDragStart);
+        target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.addEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.addEventListener('dragenter', this.handleTopDragEnter);
+        target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.addEventListener('dragover', this.handleTopDragOver);
+        target.addEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.addEventListener('drop', this.handleTopDrop);
+        target.addEventListener('drop', this.handleTopDropCapture, true);
+    }
+    removeEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.removeEventListener) {
+            return;
+        }
+        target.removeEventListener('dragstart', this.handleTopDragStart);
+        target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.removeEventListener('dragenter', this.handleTopDragEnter);
+        target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.removeEventListener('dragover', this.handleTopDragOver);
+        target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.removeEventListener('drop', this.handleTopDrop);
+        target.removeEventListener('drop', this.handleTopDropCapture, true);
+    }
+    getCurrentSourceNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
+        return _objectSpread({
+            dropEffect: this.altKeyPressed ? 'copy' : 'move'
+        }, sourceNodeOptions || {});
+    }
+    getCurrentDropEffect() {
+        if (this.isDraggingNativeItem()) {
+            // It makes more sense to default to 'copy' for native resources
+            return 'copy';
+        }
+        return this.getCurrentSourceNodeOptions().dropEffect;
+    }
+    getCurrentSourcePreviewNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
+        return _objectSpread({
+            anchorX: 0.5,
+            anchorY: 0.5,
+            captureDraggingState: false
+        }, sourcePreviewNodeOptions || {});
+    }
+    isDraggingNativeItem() {
+        const itemType = this.monitor.getItemType();
+        return Object.keys(NativeTypes).some((key)=>NativeTypes[key] === itemType
+        );
+    }
+    beginDragNativeItem(type, dataTransfer) {
+        this.clearCurrentDragSourceNode();
+        this.currentNativeSource = createNativeDragSource(type, dataTransfer);
+        this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
+        this.actions.beginDrag([
+            this.currentNativeHandle
+        ]);
+    }
+    setCurrentDragSourceNode(node) {
+        this.clearCurrentDragSourceNode();
+        this.currentDragSourceNode = node;
+        // A timeout of > 0 is necessary to resolve Firefox issue referenced
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        const MOUSE_MOVE_TIMEOUT = 1000;
+        // Receiving a mouse event in the middle of a dragging operation
+        // means it has ended and the drag source node disappeared from DOM,
+        // so the browser didn't dispatch the dragend event.
+        //
+        // We need to wait before we start listening for mousemove events.
+        // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
+        // immediately in some browsers.
+        //
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        //
+        this.mouseMoveTimeoutTimer = setTimeout(()=>{
+            var ref;
+            return (ref = this.rootElement) === null || ref === void 0 ? void 0 : ref.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+        }, MOUSE_MOVE_TIMEOUT);
+    }
+    clearCurrentDragSourceNode() {
+        if (this.currentDragSourceNode) {
+            this.currentDragSourceNode = null;
+            if (this.rootElement) {
+                var ref;
+                (ref = this.window) === null || ref === void 0 ? void 0 : ref.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
+                this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+            }
+            this.mouseMoveTimeoutTimer = null;
+            return true;
+        }
+        return false;
+    }
+    handleDragStart(e, sourceId) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!this.dragStartSourceIds) {
+            this.dragStartSourceIds = [];
+        }
+        this.dragStartSourceIds.unshift(sourceId);
+    }
+    handleDragEnter(_e, targetId) {
+        this.dragEnterTargetIds.unshift(targetId);
+    }
+    handleDragOver(_e, targetId) {
+        if (this.dragOverTargetIds === null) {
+            this.dragOverTargetIds = [];
+        }
+        this.dragOverTargetIds.unshift(targetId);
+    }
+    handleDrop(_e, targetId) {
+        this.dropTargetIds.unshift(targetId);
+    }
+    constructor(manager, globalContext, options){
+        this.sourcePreviewNodes = new Map();
+        this.sourcePreviewNodeOptions = new Map();
+        this.sourceNodes = new Map();
+        this.sourceNodeOptions = new Map();
+        this.dragStartSourceIds = null;
+        this.dropTargetIds = [];
+        this.dragEnterTargetIds = [];
+        this.currentNativeSource = null;
+        this.currentNativeHandle = null;
+        this.currentDragSourceNode = null;
+        this.altKeyPressed = false;
+        this.mouseMoveTimeoutTimer = null;
+        this.asyncEndDragFrameId = null;
+        this.dragOverTargetIds = null;
+        this.lastClientOffset = null;
+        this.hoverRafId = null;
+        this.getSourceClientOffset = (sourceId)=>{
+            const source = this.sourceNodes.get(sourceId);
+            return source && getNodeClientOffset$1(source) || null;
+        };
+        this.endDragNativeItem = ()=>{
+            if (!this.isDraggingNativeItem()) {
+                return;
+            }
+            this.actions.endDrag();
+            if (this.currentNativeHandle) {
+                this.registry.removeSource(this.currentNativeHandle);
+            }
+            this.currentNativeHandle = null;
+            this.currentNativeSource = null;
+        };
+        this.isNodeInDocument = (node)=>{
+            // Check the node either in the main document or in the current context
+            return Boolean(node && this.document && this.document.body && this.document.body.contains(node));
+        };
+        this.endDragIfSourceWasRemovedFromDOM = ()=>{
+            const node = this.currentDragSourceNode;
+            if (node == null || this.isNodeInDocument(node)) {
+                return;
+            }
+            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.scheduleHover = (dragOverTargetIds)=>{
+            if (this.hoverRafId === null && typeof requestAnimationFrame !== 'undefined') {
+                this.hoverRafId = requestAnimationFrame(()=>{
+                    if (this.monitor.isDragging()) {
+                        this.actions.hover(dragOverTargetIds || [], {
+                            clientOffset: this.lastClientOffset
+                        });
+                    }
+                    this.hoverRafId = null;
+                });
+            }
+        };
+        this.cancelHover = ()=>{
+            if (this.hoverRafId !== null && typeof cancelAnimationFrame !== 'undefined') {
+                cancelAnimationFrame(this.hoverRafId);
+                this.hoverRafId = null;
+            }
+        };
+        this.handleTopDragStartCapture = ()=>{
+            this.clearCurrentDragSourceNode();
+            this.dragStartSourceIds = [];
+        };
+        this.handleTopDragStart = (e)=>{
+            if (e.defaultPrevented) {
+                return;
+            }
+            const { dragStartSourceIds  } = this;
+            this.dragStartSourceIds = null;
+            const clientOffset = getEventClientOffset$1(e);
+            // Avoid crashing if we missed a drop event or our previous drag died
+            if (this.monitor.isDragging()) {
+                this.actions.endDrag();
+                this.cancelHover();
+            }
+            // Don't publish the source just yet (see why below)
+            this.actions.beginDrag(dragStartSourceIds || [], {
+                publishSource: false,
+                getSourceClientOffset: this.getSourceClientOffset,
+                clientOffset
+            });
+            const { dataTransfer  } = e;
+            const nativeType = matchNativeItemType(dataTransfer);
+            if (this.monitor.isDragging()) {
+                if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
+                    // Use custom drag image if user specifies it.
+                    // If child drag source refuses drag but parent agrees,
+                    // use parent's node as drag image. Neither works in IE though.
+                    const sourceId = this.monitor.getSourceId();
+                    const sourceNode = this.sourceNodes.get(sourceId);
+                    const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
+                    if (dragPreview) {
+                        const { anchorX , anchorY , offsetX , offsetY  } = this.getCurrentSourcePreviewNodeOptions();
+                        const anchorPoint = {
+                            anchorX,
+                            anchorY
+                        };
+                        const offsetPoint = {
+                            offsetX,
+                            offsetY
+                        };
+                        const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
+                        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+                    }
+                }
+                try {
+                    // Firefox won't drag without setting data
+                    dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.setData('application/json', {});
+                } catch (err) {
+                // IE doesn't support MIME types in setData
+                }
+                // Store drag source node so we can check whether
+                // it is removed from DOM and trigger endDrag manually.
+                this.setCurrentDragSourceNode(e.target);
+                // Now we are ready to publish the drag source.. or are we not?
+                const { captureDraggingState  } = this.getCurrentSourcePreviewNodeOptions();
+                if (!captureDraggingState) {
+                    // Usually we want to publish it in the next tick so that browser
+                    // is able to screenshot the current (not yet dragging) state.
+                    //
+                    // It also neatly avoids a situation where render() returns null
+                    // in the same tick for the source element, and browser freaks out.
+                    setTimeout(()=>this.actions.publishDragSource()
+                    , 0);
+                } else {
+                    // In some cases the user may want to override this behavior, e.g.
+                    // to work around IE not supporting custom drag previews.
+                    //
+                    // When using a custom drag layer, the only way to prevent
+                    // the default drag preview from drawing in IE is to screenshot
+                    // the dragging state in which the node itself has zero opacity
+                    // and height. In this case, though, returning null from render()
+                    // will abruptly end the dragging, which is not obvious.
+                    //
+                    // This is the reason such behavior is strictly opt-in.
+                    this.actions.publishDragSource();
+                }
+            } else if (nativeType) {
+                // A native item (such as URL) dragged from inside the document
+                this.beginDragNativeItem(nativeType);
+            } else if (dataTransfer && !dataTransfer.types && (e.target && !e.target.hasAttribute || !e.target.hasAttribute('draggable'))) {
+                // Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
+                // Just let it drag. It's a native type (URL or text) and will be picked up in
+                // dragenter handler.
+                return;
+            } else {
+                // If by this time no drag source reacted, tell browser not to drag.
+                e.preventDefault();
+            }
+        };
+        this.handleTopDragEndCapture = ()=>{
+            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+                // Firefox can dispatch this event in an infinite loop
+                // if dragend handler does something like showing an alert.
+                // Only proceed if we have not handled it already.
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.handleTopDragEnterCapture = (e)=>{
+            this.dragEnterTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            }
+            const isFirstEnter = this.enterLeaveCounter.enter(e.target);
+            if (!isFirstEnter || this.monitor.isDragging()) {
+                return;
+            }
+            const { dataTransfer  } = e;
+            const nativeType = matchNativeItemType(dataTransfer);
+            if (nativeType) {
+                // A native item (such as file or URL) dragged from outside the document
+                this.beginDragNativeItem(nativeType, dataTransfer);
+            }
+        };
+        this.handleTopDragEnter = (e)=>{
+            const { dragEnterTargetIds  } = this;
+            this.dragEnterTargetIds = [];
+            if (!this.monitor.isDragging()) {
+                // This is probably a native item type we don't understand.
+                return;
+            }
+            this.altKeyPressed = e.altKey;
+            // If the target changes position as the result of `dragenter`, `dragover` might still
+            // get dispatched despite target being no longer there. The easy solution is to check
+            // whether there actually is a target before firing `hover`.
+            if (dragEnterTargetIds.length > 0) {
+                this.actions.hover(dragEnterTargetIds, {
+                    clientOffset: getEventClientOffset$1(e)
+                });
+            }
+            const canDrop = dragEnterTargetIds.some((targetId)=>this.monitor.canDropOnTarget(targetId)
+            );
+            if (canDrop) {
+                // IE requires this to fire dragover events
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+                }
+            }
+        };
+        this.handleTopDragOverCapture = (e)=>{
+            this.dragOverTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            }
+        };
+        this.handleTopDragOver = (e)=>{
+            const { dragOverTargetIds  } = this;
+            this.dragOverTargetIds = [];
+            if (!this.monitor.isDragging()) {
+                // This is probably a native item type we don't understand.
+                // Prevent default "drop and blow away the whole document" action.
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'none';
+                }
+                return;
+            }
+            this.altKeyPressed = e.altKey;
+            this.lastClientOffset = getEventClientOffset$1(e);
+            this.scheduleHover(dragOverTargetIds);
+            const canDrop = (dragOverTargetIds || []).some((targetId)=>this.monitor.canDropOnTarget(targetId)
+            );
+            if (canDrop) {
+                // Show user-specified drop effect.
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+                }
+            } else if (this.isDraggingNativeItem()) {
+                // Don't show a nice cursor but still prevent default
+                // "drop and blow away the whole document" action.
+                e.preventDefault();
+            } else {
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'none';
+                }
+            }
+        };
+        this.handleTopDragLeaveCapture = (e)=>{
+            if (this.isDraggingNativeItem()) {
+                e.preventDefault();
+            }
+            const isLastLeave = this.enterLeaveCounter.leave(e.target);
+            if (!isLastLeave) {
+                return;
+            }
+            if (this.isDraggingNativeItem()) {
+                setTimeout(()=>this.endDragNativeItem()
+                , 0);
+            }
+            this.cancelHover();
+        };
+        this.handleTopDropCapture = (e)=>{
+            this.dropTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                e.preventDefault();
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            } else if (matchNativeItemType(e.dataTransfer)) {
+                // Dragging some elements, like <a> and <img> may still behave like a native drag event,
+                // even if the current drag event matches a user-defined type.
+                // Stop the default behavior when we're not expecting a native item to be dropped.
+                e.preventDefault();
+            }
+            this.enterLeaveCounter.reset();
         };
+        this.handleTopDrop = (e)=>{
+            const { dropTargetIds  } = this;
+            this.dropTargetIds = [];
+            this.actions.hover(dropTargetIds, {
+                clientOffset: getEventClientOffset$1(e)
+            });
+            this.actions.drop({
+                dropEffect: this.getCurrentDropEffect()
+            });
+            if (this.isDraggingNativeItem()) {
+                this.endDragNativeItem();
+            } else if (this.monitor.isDragging()) {
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.handleSelectStart = (e)=>{
+            const target = e.target;
+            // Only IE requires us to explicitly say
+            // we want drag drop operation to start
+            if (typeof target.dragDrop !== 'function') {
+                return;
+            }
+            // Inputs and textareas should be selectable
+            if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            // For other targets, ask IE
+            // to enable drag and drop
+            e.preventDefault();
+            target.dragDrop();
+        };
+        this.options = new OptionsReader$1(globalContext, options);
+        this.actions = manager.getActions();
+        this.monitor = manager.getMonitor();
+        this.registry = manager.getRegistry();
+        this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
+    }
+}
+
+const HTML5Backend = function createBackend(manager, context, options) {
+    return new HTML5BackendImpl(manager, context, options);
+};
+
+var ListenerType;
+(function(ListenerType) {
+    ListenerType["mouse"] = "mouse";
+    ListenerType["touch"] = "touch";
+    ListenerType["keyboard"] = "keyboard";
+})(ListenerType || (ListenerType = {}));
+
+class OptionsReader {
+    get delay() {
+        var _delay;
+        return (_delay = this.args.delay) !== null && _delay !== void 0 ? _delay : 0;
+    }
+    get scrollAngleRanges() {
+        return this.args.scrollAngleRanges;
+    }
+    get getDropTargetElementsAtPoint() {
+        return this.args.getDropTargetElementsAtPoint;
+    }
+    get ignoreContextMenu() {
+        var _ignoreContextMenu;
+        return (_ignoreContextMenu = this.args.ignoreContextMenu) !== null && _ignoreContextMenu !== void 0 ? _ignoreContextMenu : false;
+    }
+    get enableHoverOutsideTarget() {
+        var _enableHoverOutsideTarget;
+        return (_enableHoverOutsideTarget = this.args.enableHoverOutsideTarget) !== null && _enableHoverOutsideTarget !== void 0 ? _enableHoverOutsideTarget : false;
+    }
+    get enableKeyboardEvents() {
+        var _enableKeyboardEvents;
+        return (_enableKeyboardEvents = this.args.enableKeyboardEvents) !== null && _enableKeyboardEvents !== void 0 ? _enableKeyboardEvents : false;
+    }
+    get enableMouseEvents() {
+        var _enableMouseEvents;
+        return (_enableMouseEvents = this.args.enableMouseEvents) !== null && _enableMouseEvents !== void 0 ? _enableMouseEvents : false;
+    }
+    get enableTouchEvents() {
+        var _enableTouchEvents;
+        return (_enableTouchEvents = this.args.enableTouchEvents) !== null && _enableTouchEvents !== void 0 ? _enableTouchEvents : true;
+    }
+    get touchSlop() {
+        return this.args.touchSlop || 0;
+    }
+    get delayTouchStart() {
+        var ref, ref1;
+        var ref2, ref3;
+        return (ref3 = (ref2 = (ref = this.args) === null || ref === void 0 ? void 0 : ref.delayTouchStart) !== null && ref2 !== void 0 ? ref2 : (ref1 = this.args) === null || ref1 === void 0 ? void 0 : ref1.delay) !== null && ref3 !== void 0 ? ref3 : 0;
+    }
+    get delayMouseStart() {
+        var ref, ref4;
+        var ref5, ref6;
+        return (ref6 = (ref5 = (ref = this.args) === null || ref === void 0 ? void 0 : ref.delayMouseStart) !== null && ref5 !== void 0 ? ref5 : (ref4 = this.args) === null || ref4 === void 0 ? void 0 : ref4.delay) !== null && ref6 !== void 0 ? ref6 : 0;
+    }
+    get window() {
+        if (this.context && this.context.window) {
+            return this.context.window;
+        } else if (typeof window !== 'undefined') {
+            return window;
+        }
+        return undefined;
+    }
+    get document() {
+        var ref;
+        if ((ref = this.context) === null || ref === void 0 ? void 0 : ref.document) {
+            return this.context.document;
+        }
+        if (this.window) {
+            return this.window.document;
+        }
+        return undefined;
+    }
+    get rootElement() {
+        var ref;
+        return ((ref = this.args) === null || ref === void 0 ? void 0 : ref.rootElement) || this.document;
+    }
+    constructor(args, context){
+        this.args = args;
+        this.context = context;
+    }
+}
+
+function distance(x1, y1, x2, y2) {
+    return Math.sqrt(Math.pow(Math.abs(x2 - x1), 2) + Math.pow(Math.abs(y2 - y1), 2));
+}
+function inAngleRanges(x1, y1, x2, y2, angleRanges) {
+    if (!angleRanges) {
+        return false;
+    }
+    const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI + 180;
+    for(let i = 0; i < angleRanges.length; ++i){
+        const ar = angleRanges[i];
+        if (ar && (ar.start == null || angle >= ar.start) && (ar.end == null || angle <= ar.end)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// Used for MouseEvent.buttons (note the s on the end).
+const MouseButtons = {
+    Left: 1};
+// Used for e.button (note the lack of an s on the end).
+const MouseButton = {
+    Left: 0};
+/**
+ * Only touch events and mouse events where the left button is pressed should initiate a drag.
+ * @param {MouseEvent | TouchEvent} e The event
+ */ function eventShouldStartDrag(e) {
+    // For touch events, button will be undefined. If e.button is defined,
+    // then it should be MouseButton.Left.
+    return e.button === undefined || e.button === MouseButton.Left;
+}
+/**
+ * Only touch events and mouse events where the left mouse button is no longer held should end a drag.
+ * It's possible the user mouse downs with the left mouse button, then mouse down and ups with the right mouse button.
+ * We don't want releasing the right mouse button to end the drag.
+ * @param {MouseEvent | TouchEvent} e The event
+ */ function eventShouldEndDrag(e) {
+    // Touch events will have buttons be undefined, while mouse events will have e.buttons's left button
+    // bit field unset if the left mouse button has been released
+    return e.buttons === undefined || (e.buttons & MouseButtons.Left) === 0;
+}
+function isTouchEvent(e) {
+    return !!e.targetTouches;
+}
+
+const ELEMENT_NODE = 1;
+function getNodeClientOffset(node) {
+    const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
+    if (!el) {
+        return undefined;
     }
+    const { top , left  } = el.getBoundingClientRect();
     return {
-        customDarkSquareStyle: { backgroundColor: '#b58863' },
-        customLightSquareStyle: { backgroundColor: '#f0d9b5' },
+        x: left,
+        y: top
     };
+}
+function getEventClientTouchOffset(e, lastTargetTouchFallback) {
+    if (e.targetTouches.length === 1) {
+        return getEventClientOffset(e.targetTouches[0]);
+    } else if (lastTargetTouchFallback && e.touches.length === 1) {
+        if (e.touches[0].target === lastTargetTouchFallback.target) {
+            return getEventClientOffset(e.touches[0]);
+        }
+    }
+    return;
+}
+function getEventClientOffset(e, lastTargetTouchFallback) {
+    if (isTouchEvent(e)) {
+        return getEventClientTouchOffset(e, lastTargetTouchFallback);
+    } else {
+        return {
+            x: e.clientX,
+            y: e.clientY
+        };
+    }
+}
+
+const supportsPassive = (()=>{
+    // simular to jQuery's test
+    let supported = false;
+    try {
+        addEventListener('test', ()=>{
+        // do nothing
+        }, Object.defineProperty({}, 'passive', {
+            get () {
+                supported = true;
+                return true;
+            }
+        }));
+    } catch (e) {
+    // do nothing
+    }
+    return supported;
+})();
+
+const eventNames = {
+    [ListenerType.mouse]: {
+        start: 'mousedown',
+        move: 'mousemove',
+        end: 'mouseup',
+        contextmenu: 'contextmenu'
+    },
+    [ListenerType.touch]: {
+        start: 'touchstart',
+        move: 'touchmove',
+        end: 'touchend'
+    },
+    [ListenerType.keyboard]: {
+        keydown: 'keydown'
+    }
 };
-const ThemeProvider = ({ children, theme }) => {
-    const { customDarkSquareStyle, customLightSquareStyle } = getStylesForTheme(theme);
-    return (jsx(ChessboardThemeContext.Provider, { value: { customDarkSquareStyle, customLightSquareStyle }, children: children }));
+class TouchBackendImpl {
+    /**
+	 * Generate profiling statistics for the HTML5Backend.
+	 */ profile() {
+        var ref;
+        return {
+            sourceNodes: this.sourceNodes.size,
+            sourcePreviewNodes: this.sourcePreviewNodes.size,
+            sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
+            targetNodes: this.targetNodes.size,
+            dragOverTargetIds: ((ref = this.dragOverTargetIds) === null || ref === void 0 ? void 0 : ref.length) || 0
+        };
+    }
+    // public for test
+    get document() {
+        return this.options.document;
+    }
+    setup() {
+        const root = this.options.rootElement;
+        if (!root) {
+            return;
+        }
+        invariant(!TouchBackendImpl.isSetUp, 'Cannot have two Touch backends at the same time.');
+        TouchBackendImpl.isSetUp = true;
+        this.addEventListener(root, 'start', this.getTopMoveStartHandler());
+        this.addEventListener(root, 'start', this.handleTopMoveStartCapture, true);
+        this.addEventListener(root, 'move', this.handleTopMove);
+        this.addEventListener(root, 'move', this.handleTopMoveCapture, true);
+        this.addEventListener(root, 'end', this.handleTopMoveEndCapture, true);
+        if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
+            this.addEventListener(root, 'contextmenu', this.handleTopMoveEndCapture);
+        }
+        if (this.options.enableKeyboardEvents) {
+            this.addEventListener(root, 'keydown', this.handleCancelOnEscape, true);
+        }
+    }
+    teardown() {
+        const root = this.options.rootElement;
+        if (!root) {
+            return;
+        }
+        TouchBackendImpl.isSetUp = false;
+        this._mouseClientOffset = {};
+        this.removeEventListener(root, 'start', this.handleTopMoveStartCapture, true);
+        this.removeEventListener(root, 'start', this.handleTopMoveStart);
+        this.removeEventListener(root, 'move', this.handleTopMoveCapture, true);
+        this.removeEventListener(root, 'move', this.handleTopMove);
+        this.removeEventListener(root, 'end', this.handleTopMoveEndCapture, true);
+        if (this.options.enableMouseEvents && !this.options.ignoreContextMenu) {
+            this.removeEventListener(root, 'contextmenu', this.handleTopMoveEndCapture);
+        }
+        if (this.options.enableKeyboardEvents) {
+            this.removeEventListener(root, 'keydown', this.handleCancelOnEscape, true);
+        }
+        this.uninstallSourceNodeRemovalObserver();
+    }
+    addEventListener(subject, event, handler, capture = false) {
+        const options = supportsPassive ? {
+            capture,
+            passive: false
+        } : capture;
+        this.listenerTypes.forEach(function(listenerType) {
+            const evt = eventNames[listenerType][event];
+            if (evt) {
+                subject.addEventListener(evt, handler, options);
+            }
+        });
+    }
+    removeEventListener(subject, event, handler, capture = false) {
+        const options = supportsPassive ? {
+            capture,
+            passive: false
+        } : capture;
+        this.listenerTypes.forEach(function(listenerType) {
+            const evt = eventNames[listenerType][event];
+            if (evt) {
+                subject.removeEventListener(evt, handler, options);
+            }
+        });
+    }
+    connectDragSource(sourceId, node) {
+        const handleMoveStart = this.handleMoveStart.bind(this, sourceId);
+        this.sourceNodes.set(sourceId, node);
+        this.addEventListener(node, 'start', handleMoveStart);
+        return ()=>{
+            this.sourceNodes.delete(sourceId);
+            this.removeEventListener(node, 'start', handleMoveStart);
+        };
+    }
+    connectDragPreview(sourceId, node, options) {
+        this.sourcePreviewNodeOptions.set(sourceId, options);
+        this.sourcePreviewNodes.set(sourceId, node);
+        return ()=>{
+            this.sourcePreviewNodes.delete(sourceId);
+            this.sourcePreviewNodeOptions.delete(sourceId);
+        };
+    }
+    connectDropTarget(targetId, node) {
+        const root = this.options.rootElement;
+        if (!this.document || !root) {
+            return ()=>{
+            /* noop */ };
+        }
+        const handleMove = (e)=>{
+            if (!this.document || !root || !this.monitor.isDragging()) {
+                return;
+            }
+            let coords;
+            /**
+			 * Grab the coordinates for the current mouse/touch position
+			 */ switch(e.type){
+                case eventNames.mouse.move:
+                    coords = {
+                        x: e.clientX,
+                        y: e.clientY
+                    };
+                    break;
+                case eventNames.touch.move:
+                    var ref, ref1;
+                    coords = {
+                        x: ((ref = e.touches[0]) === null || ref === void 0 ? void 0 : ref.clientX) || 0,
+                        y: ((ref1 = e.touches[0]) === null || ref1 === void 0 ? void 0 : ref1.clientY) || 0
+                    };
+                    break;
+            }
+            /**
+			 * Use the coordinates to grab the element the drag ended on.
+			 * If the element is the same as the target node (or any of it's children) then we have hit a drop target and can handle the move.
+			 */ const droppedOn = coords != null ? this.document.elementFromPoint(coords.x, coords.y) : undefined;
+            const childMatch = droppedOn && node.contains(droppedOn);
+            if (droppedOn === node || childMatch) {
+                return this.handleMove(e, targetId);
+            }
+        };
+        /**
+		 * Attaching the event listener to the body so that touchmove will work while dragging over multiple target elements.
+		 */ this.addEventListener(this.document.body, 'move', handleMove);
+        this.targetNodes.set(targetId, node);
+        return ()=>{
+            if (this.document) {
+                this.targetNodes.delete(targetId);
+                this.removeEventListener(this.document.body, 'move', handleMove);
+            }
+        };
+    }
+    getTopMoveStartHandler() {
+        if (!this.options.delayTouchStart && !this.options.delayMouseStart) {
+            return this.handleTopMoveStart;
+        }
+        return this.handleTopMoveStartDelay;
+    }
+    installSourceNodeRemovalObserver(node) {
+        this.uninstallSourceNodeRemovalObserver();
+        this.draggedSourceNode = node;
+        this.draggedSourceNodeRemovalObserver = new MutationObserver(()=>{
+            if (node && !node.parentElement) {
+                this.resurrectSourceNode();
+                this.uninstallSourceNodeRemovalObserver();
+            }
+        });
+        if (!node || !node.parentElement) {
+            return;
+        }
+        this.draggedSourceNodeRemovalObserver.observe(node.parentElement, {
+            childList: true
+        });
+    }
+    resurrectSourceNode() {
+        if (this.document && this.draggedSourceNode) {
+            this.draggedSourceNode.style.display = 'none';
+            this.draggedSourceNode.removeAttribute('data-reactid');
+            this.document.body.appendChild(this.draggedSourceNode);
+        }
+    }
+    uninstallSourceNodeRemovalObserver() {
+        if (this.draggedSourceNodeRemovalObserver) {
+            this.draggedSourceNodeRemovalObserver.disconnect();
+        }
+        this.draggedSourceNodeRemovalObserver = undefined;
+        this.draggedSourceNode = undefined;
+    }
+    constructor(manager, context, options){
+        this.getSourceClientOffset = (sourceId)=>{
+            const element = this.sourceNodes.get(sourceId);
+            return element && getNodeClientOffset(element);
+        };
+        this.handleTopMoveStartCapture = (e)=>{
+            if (!eventShouldStartDrag(e)) {
+                return;
+            }
+            this.moveStartSourceIds = [];
+        };
+        this.handleMoveStart = (sourceId)=>{
+            // Just because we received an event doesn't necessarily mean we need to collect drag sources.
+            // We only collect start collecting drag sources on touch and left mouse events.
+            if (Array.isArray(this.moveStartSourceIds)) {
+                this.moveStartSourceIds.unshift(sourceId);
+            }
+        };
+        this.handleTopMoveStart = (e)=>{
+            if (!eventShouldStartDrag(e)) {
+                return;
+            }
+            // Don't prematurely preventDefault() here since it might:
+            // 1. Mess up scrolling
+            // 2. Mess up long tap (which brings up context menu)
+            // 3. If there's an anchor link as a child, tap won't be triggered on link
+            const clientOffset = getEventClientOffset(e);
+            if (clientOffset) {
+                if (isTouchEvent(e)) {
+                    this.lastTargetTouchFallback = e.targetTouches[0];
+                }
+                this._mouseClientOffset = clientOffset;
+            }
+            this.waitingForDelay = false;
+        };
+        this.handleTopMoveStartDelay = (e)=>{
+            if (!eventShouldStartDrag(e)) {
+                return;
+            }
+            const delay = e.type === eventNames.touch.start ? this.options.delayTouchStart : this.options.delayMouseStart;
+            this.timeout = setTimeout(this.handleTopMoveStart.bind(this, e), delay);
+            this.waitingForDelay = true;
+        };
+        this.handleTopMoveCapture = ()=>{
+            this.dragOverTargetIds = [];
+        };
+        this.handleMove = (_evt, targetId)=>{
+            if (this.dragOverTargetIds) {
+                this.dragOverTargetIds.unshift(targetId);
+            }
+        };
+        this.handleTopMove = (e1)=>{
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+            if (!this.document || this.waitingForDelay) {
+                return;
+            }
+            const { moveStartSourceIds , dragOverTargetIds  } = this;
+            const enableHoverOutsideTarget = this.options.enableHoverOutsideTarget;
+            const clientOffset = getEventClientOffset(e1, this.lastTargetTouchFallback);
+            if (!clientOffset) {
+                return;
+            }
+            // If the touch move started as a scroll, or is is between the scroll angles
+            if (this._isScrolling || !this.monitor.isDragging() && inAngleRanges(this._mouseClientOffset.x || 0, this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y, this.options.scrollAngleRanges)) {
+                this._isScrolling = true;
+                return;
+            }
+            // If we're not dragging and we've moved a little, that counts as a drag start
+            if (!this.monitor.isDragging() && // eslint-disable-next-line no-prototype-builtins
+            this._mouseClientOffset.hasOwnProperty('x') && moveStartSourceIds && distance(this._mouseClientOffset.x || 0, this._mouseClientOffset.y || 0, clientOffset.x, clientOffset.y) > (this.options.touchSlop ? this.options.touchSlop : 0)) {
+                this.moveStartSourceIds = undefined;
+                this.actions.beginDrag(moveStartSourceIds, {
+                    clientOffset: this._mouseClientOffset,
+                    getSourceClientOffset: this.getSourceClientOffset,
+                    publishSource: false
+                });
+            }
+            if (!this.monitor.isDragging()) {
+                return;
+            }
+            const sourceNode = this.sourceNodes.get(this.monitor.getSourceId());
+            this.installSourceNodeRemovalObserver(sourceNode);
+            this.actions.publishDragSource();
+            if (e1.cancelable) e1.preventDefault();
+            // Get the node elements of the hovered DropTargets
+            const dragOverTargetNodes = (dragOverTargetIds || []).map((key)=>this.targetNodes.get(key)
+            ).filter((e)=>!!e
+            );
+            // Get the a ordered list of nodes that are touched by
+            const elementsAtPoint = this.options.getDropTargetElementsAtPoint ? this.options.getDropTargetElementsAtPoint(clientOffset.x, clientOffset.y, dragOverTargetNodes) : this.document.elementsFromPoint(clientOffset.x, clientOffset.y);
+            // Extend list with parents that are not receiving elementsFromPoint events (size 0 elements and svg groups)
+            const elementsAtPointExtended = [];
+            for(const nodeId in elementsAtPoint){
+                // eslint-disable-next-line no-prototype-builtins
+                if (!elementsAtPoint.hasOwnProperty(nodeId)) {
+                    continue;
+                }
+                let currentNode = elementsAtPoint[nodeId];
+                if (currentNode != null) {
+                    elementsAtPointExtended.push(currentNode);
+                }
+                while(currentNode){
+                    currentNode = currentNode.parentElement;
+                    if (currentNode && elementsAtPointExtended.indexOf(currentNode) === -1) {
+                        elementsAtPointExtended.push(currentNode);
+                    }
+                }
+            }
+            const orderedDragOverTargetIds = elementsAtPointExtended// Filter off nodes that arent a hovered DropTargets nodes
+            .filter((node)=>dragOverTargetNodes.indexOf(node) > -1
+            )// Map back the nodes elements to targetIds
+            .map((node)=>this._getDropTargetId(node)
+            )// Filter off possible null rows
+            .filter((node)=>!!node
+            ).filter((id, index, ids)=>ids.indexOf(id) === index
+            );
+            // Invoke hover for drop targets when source node is still over and pointer is outside
+            if (enableHoverOutsideTarget) {
+                for(const targetId in this.targetNodes){
+                    const targetNode = this.targetNodes.get(targetId);
+                    if (sourceNode && targetNode && targetNode.contains(sourceNode) && orderedDragOverTargetIds.indexOf(targetId) === -1) {
+                        orderedDragOverTargetIds.unshift(targetId);
+                        break;
+                    }
+                }
+            }
+            // Reverse order because dnd-core reverse it before calling the DropTarget drop methods
+            orderedDragOverTargetIds.reverse();
+            this.actions.hover(orderedDragOverTargetIds, {
+                clientOffset: clientOffset
+            });
+        };
+        /**
+	 *
+	 * visible for testing
+	 */ this._getDropTargetId = (node)=>{
+            const keys = this.targetNodes.keys();
+            let next = keys.next();
+            while(next.done === false){
+                const targetId = next.value;
+                if (node === this.targetNodes.get(targetId)) {
+                    return targetId;
+                } else {
+                    next = keys.next();
+                }
+            }
+            return undefined;
+        };
+        this.handleTopMoveEndCapture = (e)=>{
+            this._isScrolling = false;
+            this.lastTargetTouchFallback = undefined;
+            if (!eventShouldEndDrag(e)) {
+                return;
+            }
+            if (!this.monitor.isDragging() || this.monitor.didDrop()) {
+                this.moveStartSourceIds = undefined;
+                return;
+            }
+            if (e.cancelable) e.preventDefault();
+            this._mouseClientOffset = {};
+            this.uninstallSourceNodeRemovalObserver();
+            this.actions.drop();
+            this.actions.endDrag();
+        };
+        this.handleCancelOnEscape = (e)=>{
+            if (e.key === 'Escape' && this.monitor.isDragging()) {
+                this._mouseClientOffset = {};
+                this.uninstallSourceNodeRemovalObserver();
+                this.actions.endDrag();
+            }
+        };
+        this.options = new OptionsReader(options, context);
+        this.actions = manager.getActions();
+        this.monitor = manager.getMonitor();
+        this.sourceNodes = new Map();
+        this.sourcePreviewNodes = new Map();
+        this.sourcePreviewNodeOptions = new Map();
+        this.targetNodes = new Map();
+        this.listenerTypes = [];
+        this._mouseClientOffset = {};
+        this._isScrolling = false;
+        if (this.options.enableMouseEvents) {
+            this.listenerTypes.push(ListenerType.mouse);
+        }
+        if (this.options.enableTouchEvents) {
+            this.listenerTypes.push(ListenerType.touch);
+        }
+        if (this.options.enableKeyboardEvents) {
+            this.listenerTypes.push(ListenerType.keyboard);
+        }
+    }
+}
+
+const TouchBackend = function createBackend(manager, context = {}, options = {}) {
+    return new TouchBackendImpl(manager, context, options);
 };
 
+var c={backends:[{id:"html5",backend:HTML5Backend,transition:U},{id:"touch",backend:TouchBackend,options:{enableMouseEvents:true},preview:true,transition:L}]};
+
+/**
+ * HTML5 for mouse (desktop + Chrome device emulation), touch backend for real
+ * mobile devices. react-chessboard alone picks TouchBackend whenever
+ * `ontouchstart` is in window, which breaks mouse drags in DevTools emulation.
+ */
+const ChessboardDnDProvider = ({ children, }) => (jsx(ChessboardDnDProvider$1, { backend: S, options: c, children: children }));
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -551,23 +2209,215 @@ class StockfishBrowserEngine {
         if (generation !== this.analysisGeneration) {
             return;
         }
-        const withFen = this.analysisFen.length > 0
-            ? Object.assign(Object.assign({}, evaluation), { fen: this.analysisFen }) : evaluation;
-        this.evaluation = withFen;
-        this.listeners.forEach((listener) => listener(withFen));
-    }
-}
+        const withFen = this.analysisFen.length > 0
+            ? Object.assign(Object.assign({}, evaluation), { fen: this.analysisFen }) : evaluation;
+        this.evaluation = withFen;
+        this.listeners.forEach((listener) => listener(withFen));
+    }
+}
+
+const AnalysisEngineContext = createContext(null);
+const useAnalysisEngineContext = () => useContext(AnalysisEngineContext);
+const normalizeSubscriberOptions = (fen, options = {}) => {
+    var _a, _b, _c, _d;
+    return ({
+        fen,
+        enabled: (_a = options.enabled) !== null && _a !== void 0 ? _a : true,
+        depth: (_b = options.depth) !== null && _b !== void 0 ? _b : 16,
+        multiPv: (_c = options.multiPv) !== null && _c !== void 0 ? _c : 2,
+        priority: (_d = options.priority) !== null && _d !== void 0 ? _d : 0,
+    });
+};
+const analyzingForFen = (fen, evaluation) => (Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: evaluation.status === 'error'
+        ? 'error'
+        : evaluation.status === 'loading'
+            ? 'loading'
+            : 'analyzing', error: evaluation.error, fen }));
+const AnalysisEngineProvider = ({ scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, children, }) => {
+    const engineRef = useRef(null);
+    const subscribersRef = useRef(new Map());
+    const nextIdRef = useRef(0);
+    const activeKeyRef = useRef('');
+    const readyRef = useRef(false);
+    const scheduleRef = useRef(null);
+    const lastEvaluationRef = useRef(emptyEngineEvaluation());
+    const pickActive = useCallback(() => {
+        const enabled = [...subscribersRef.current.values()].filter((subscriber) => subscriber.options.enabled);
+        if (enabled.length === 0) {
+            return null;
+        }
+        return enabled.sort((left, right) => right.options.priority - left.options.priority)[0];
+    }, []);
+    const notifyAll = useCallback((evaluation) => {
+        lastEvaluationRef.current = evaluation;
+        const active = pickActive();
+        for (const subscriber of subscribersRef.current.values()) {
+            const { fen, enabled } = subscriber.options;
+            if (!enabled) {
+                subscriber.listener(emptyEngineEvaluation());
+                continue;
+            }
+            if (evaluation.fen && evaluation.fen === fen) {
+                subscriber.listener(evaluation);
+                continue;
+            }
+            if ((active === null || active === void 0 ? void 0 : active.id) === subscriber.id) {
+                subscriber.listener(analyzingForFen(fen, evaluation));
+            }
+        }
+    }, [pickActive]);
+    const syncAnalysis = useCallback(() => {
+        const engine = engineRef.current;
+        if (!engine || !readyRef.current) {
+            return;
+        }
+        const active = pickActive();
+        if (!active) {
+            activeKeyRef.current = '';
+            engine.stop();
+            notifyAll(emptyEngineEvaluation());
+            return;
+        }
+        const { fen, depth, multiPv } = active.options;
+        const key = `${active.id}|${fen}|${depth}|${multiPv}`;
+        if (key === activeKeyRef.current) {
+            return;
+        }
+        activeKeyRef.current = key;
+        if (scheduleRef.current !== null) {
+            window.clearTimeout(scheduleRef.current);
+        }
+        scheduleRef.current = window.setTimeout(() => {
+            scheduleRef.current = null;
+            engine.analyze(fen, depth, multiPv);
+        }, 75);
+    }, [notifyAll, pickActive]);
+    useEffect(() => {
+        if (typeof Worker === 'undefined') {
+            return;
+        }
+        const engine = new StockfishBrowserEngine(scriptUrl);
+        engineRef.current = engine;
+        let cancelled = false;
+        const unsubscribe = engine.subscribe((evaluation) => {
+            if (!cancelled) {
+                notifyAll(evaluation);
+            }
+        });
+        engine
+            .init()
+            .then(() => {
+            if (cancelled) {
+                return;
+            }
+            readyRef.current = true;
+            syncAnalysis();
+        })
+            .catch((error) => {
+            if (cancelled) {
+                return;
+            }
+            const message = error instanceof Error ? error.message : 'Failed to start engine';
+            notifyAll(Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: 'error', error: message }));
+        });
+        return () => {
+            cancelled = true;
+            readyRef.current = false;
+            activeKeyRef.current = '';
+            if (scheduleRef.current !== null) {
+                window.clearTimeout(scheduleRef.current);
+                scheduleRef.current = null;
+            }
+            unsubscribe();
+            engine.dispose();
+            engineRef.current = null;
+        };
+    }, [notifyAll, scriptUrl, syncAnalysis]);
+    const register = useCallback((options, listener) => {
+        const id = ++nextIdRef.current;
+        subscribersRef.current.set(id, { id, options, listener });
+        if (options.enabled) {
+            const active = pickActive();
+            if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+                listener(analyzingForFen(options.fen, lastEvaluationRef.current));
+            }
+        }
+        else {
+            listener(emptyEngineEvaluation());
+        }
+        syncAnalysis();
+        return id;
+    }, [pickActive, syncAnalysis]);
+    const update = useCallback((id, options) => {
+        const subscriber = subscribersRef.current.get(id);
+        if (!subscriber) {
+            return;
+        }
+        subscriber.options = options;
+        if (!options.enabled) {
+            subscriber.listener(emptyEngineEvaluation());
+        }
+        else {
+            const active = pickActive();
+            if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+                subscriber.listener(analyzingForFen(options.fen, lastEvaluationRef.current));
+            }
+        }
+        activeKeyRef.current = '';
+        syncAnalysis();
+    }, [pickActive, syncAnalysis]);
+    const unregister = useCallback((id) => {
+        subscribersRef.current.delete(id);
+        activeKeyRef.current = '';
+        syncAnalysis();
+    }, [syncAnalysis]);
+    const value = useMemo(() => ({
+        register,
+        update,
+        unregister,
+    }), [register, unregister, update]);
+    return (jsx(AnalysisEngineContext.Provider, { value: value, children: children }));
+};
 
 const useAnalysisEngine = (fen, options = {}) => {
-    const { enabled = true, depth = 16, multiPv = 2, scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, } = options;
+    var _a;
+    const context = useAnalysisEngineContext();
+    const useShared = ((_a = options.shared) !== null && _a !== void 0 ? _a : true) && context !== null;
+    const { enabled = true, depth = 16, multiPv = 2, priority = 0, scriptUrl = DEFAULT_STOCKFISH_SCRIPT_URL, } = options;
     const [evaluation, setEvaluation] = useState(emptyEngineEvaluation());
     const [engineReady, setEngineReady] = useState(false);
     const engineRef = useRef(null);
     const mountGenerationRef = useRef(0);
+    const subscriberIdRef = useRef(null);
+    const subscriberOptions = useMemo(() => normalizeSubscriberOptions(fen, options), [fen, enabled, depth, multiPv, priority]);
+    useLayoutEffect(() => {
+        if (!useShared || !context) {
+            return;
+        }
+        if (subscriberIdRef.current === null) {
+            subscriberIdRef.current = context.register(subscriberOptions, setEvaluation);
+            return;
+        }
+        context.update(subscriberIdRef.current, subscriberOptions);
+    }, [context, subscriberOptions, useShared]);
     useEffect(() => {
-        if (!enabled || typeof Worker === 'undefined') {
-            setEvaluation(emptyEngineEvaluation());
-            setEngineReady(false);
+        if (!useShared || !context) {
+            return;
+        }
+        const contextValue = context;
+        return () => {
+            if (subscriberIdRef.current !== null) {
+                contextValue.unregister(subscriberIdRef.current);
+                subscriberIdRef.current = null;
+            }
+        };
+    }, [context, useShared]);
+    useEffect(() => {
+        if (useShared || !enabled || typeof Worker === 'undefined') {
+            if (!useShared && !enabled) {
+                setEvaluation(emptyEngineEvaluation());
+                setEngineReady(false);
+            }
             return;
         }
         const mountGeneration = ++mountGenerationRef.current;
@@ -603,9 +2453,9 @@ const useAnalysisEngine = (fen, options = {}) => {
                 engineRef.current = null;
             }
         };
-    }, [enabled, scriptUrl]);
+    }, [enabled, scriptUrl, useShared]);
     useLayoutEffect(() => {
-        if (!enabled || !engineReady || !engineRef.current) {
+        if (useShared || !enabled || !engineReady || !engineRef.current) {
             return;
         }
         const engine = engineRef.current;
@@ -615,7 +2465,7 @@ const useAnalysisEngine = (fen, options = {}) => {
         return () => {
             window.clearTimeout(timer);
         };
-    }, [enabled, engineReady, fen, depth, multiPv]);
+    }, [useShared, enabled, engineReady, fen, depth, multiPv]);
     return useMemo(() => {
         if (evaluation.fen !== fen) {
             return Object.assign(Object.assign({}, emptyEngineEvaluation()), { status: evaluation.status === 'error'
@@ -700,6 +2550,147 @@ class AnalysisErrorBoundary extends Component {
     }
 }
 
+const navRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+};
+const scrubberInputStyle = {
+    flex: 1,
+};
+const plyLabelStyle = {
+    minWidth: 56,
+    textAlign: 'center',
+    fontSize: 14,
+};
+function palette(theme) {
+    return {
+        text: theme === 'dark' ? '#e8e8e8' : '#1a1a1a',
+        border: theme === 'dark' ? '#3a3a3a' : '#d0d0d0',
+        surface: theme === 'dark' ? '#262626' : '#f5f5f5',
+    };
+}
+function navButtonStyle(colors) {
+    return {
+        padding: '4px 10px',
+        borderRadius: 6,
+        cursor: 'pointer',
+        fontSize: 14,
+        fontWeight: 600,
+        border: `1px solid ${colors.border}`,
+        background: colors.surface,
+        color: colors.text,
+    };
+}
+
+/** Library-default ply navigation (inline styles). */
+const DefaultPlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme, showScrubber, showPlyLabel, }) => {
+    const colors = palette(theme);
+    const buttonStyle = navButtonStyle(colors);
+    return (jsxs("div", { style: navRowStyle, children: [jsx("button", { type: "button", onClick: onGoFirst, disabled: !canPrev, style: buttonStyle, "aria-label": "First move", children: "\u23EE" }), jsx("button", { type: "button", onClick: onGoPrev, disabled: !canPrev, style: buttonStyle, "aria-label": "Previous move", children: "\u25C0" }), showScrubber ? (jsx("input", { type: "range", min: 0, max: totalPly, value: plyIndex, onChange: (e) => onGoTo(Number(e.target.value)), style: scrubberInputStyle, "aria-label": "Scrub through game" })) : showPlyLabel ? (jsxs("span", { style: Object.assign(Object.assign({}, plyLabelStyle), { color: colors.text }), children: [plyIndex, " / ", totalPly] })) : null, jsx("button", { type: "button", onClick: onGoNext, disabled: !canNext, style: buttonStyle, "aria-label": "Next move", children: "\u25B6" }), jsx("button", { type: "button", onClick: onGoLast, disabled: !canNext, style: buttonStyle, "aria-label": "Last move", children: "\u23ED" })] }));
+};
+const defaultRenderPlyNavigation = (props) => (jsx(DefaultPlyNavigation, Object.assign({}, props)));
+
+/** True when the event target is a field where arrow keys should type, not navigate. */
+function isEditableKeyboardTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    const tag = target.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
+
+/**
+ * Global keyboard shortcuts for browsing positions:
+ * - ArrowLeft: previous
+ * - ArrowRight: next
+ * - Home: first (when {@link PositionKeyboardNavOptions.onFirst} is provided)
+ * - End: last (when {@link PositionKeyboardNavOptions.onLast} is provided)
+ *
+ * Ignores keypresses while focus is in an input, textarea, select, or
+ * contenteditable element, and ignores modified keys (Alt/Ctrl/Meta).
+ */
+function usePositionKeyboardNav({ enabled = true, canPrev, canNext, onPrev, onNext, onFirst, onLast, }) {
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        const handleKeyDown = (event) => {
+            if (isEditableKeyboardTarget(event.target)) {
+                return;
+            }
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowLeft':
+                    if (!canPrev) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onPrev();
+                    break;
+                case 'ArrowRight':
+                    if (!canNext) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onNext();
+                    break;
+                case 'Home':
+                    if (!onFirst || !canPrev) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onFirst();
+                    break;
+                case 'End':
+                    if (!onLast || !canNext) {
+                        return;
+                    }
+                    event.preventDefault();
+                    onLast();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [enabled, canPrev, canNext, onPrev, onNext, onFirst, onLast]);
+}
+
+/**
+ * Step through a fixed move list. Omit {@link PlyNavigationProps.renderPlyNavigation}
+ * for the default inline-styled UI, or pass a custom renderer (e.g. MUI controls).
+ */
+const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme = 'dark', keyboardNav = true, showScrubber = true, showPlyLabel, renderPlyNavigation = defaultRenderPlyNavigation, }) => {
+    usePositionKeyboardNav({
+        enabled: keyboardNav,
+        canPrev,
+        canNext,
+        onPrev: onGoPrev,
+        onNext: onGoNext,
+        onFirst: onGoFirst,
+        onLast: onGoLast,
+    });
+    return renderPlyNavigation({
+        plyIndex,
+        totalPly,
+        canPrev,
+        canNext,
+        onGoFirst,
+        onGoPrev,
+        onGoNext,
+        onGoLast,
+        onGoTo,
+        theme,
+        showScrubber,
+        showPlyLabel: showPlyLabel !== null && showPlyLabel !== void 0 ? showPlyLabel : !showScrubber,
+    });
+};
+
 /** Draggable analysis board (no surrounding layout chrome). */
 const AnalysisChessboardView = ({ model }) => {
     var _a;
@@ -1053,12 +3044,28 @@ const useAnalysisBoardModel = ({ analysisContext, onClose, theme, boardWidth, en
  * No layout divs — use {@link renderMain} (e.g. `AnalysisBoardLayout` from `analysis/defaults` or a host layout).
  */
 const AnalysisBoardCore = (_a) => {
-    var { renderContainer, renderMain, renderSidebar, renderEngineEvaluation } = _a, modelArgs = __rest(_a, ["renderContainer", "renderMain", "renderSidebar", "renderEngineEvaluation"]);
+    var { renderContainer, renderMain, renderSidebar, renderEngineEvaluation, keyboardNav = true } = _a, modelArgs = __rest(_a, ["renderContainer", "renderMain", "renderSidebar", "renderEngineEvaluation", "keyboardNav"]);
     const model = useAnalysisBoardModel(modelArgs);
-    return (jsx(AnalysisBoardCoreView, { model: model, renderContainer: renderContainer, renderMain: renderMain, renderSidebar: renderSidebar, renderEngineEvaluation: renderEngineEvaluation }));
+    return (jsx(AnalysisBoardCoreView, { model: model, keyboardNav: keyboardNav, renderContainer: renderContainer, renderMain: renderMain, renderSidebar: renderSidebar, renderEngineEvaluation: renderEngineEvaluation }));
 };
 /** Pure composition (no layout styles) for testing and reuse. */
-const AnalysisBoardCoreView = ({ model, renderContainer, renderMain, renderSidebar, renderEngineEvaluation, }) => {
+const AnalysisBoardCoreView = ({ model, keyboardNav, renderContainer, renderMain, renderSidebar, renderEngineEvaluation, }) => {
+    const { ply, maxPly, onSelectPly } = model;
+    const canPrev = ply > 0;
+    const canNext = ply < maxPly;
+    const goFirst = useCallback(() => onSelectPly(0), [onSelectPly]);
+    const goPrev = useCallback(() => onSelectPly(ply - 1), [onSelectPly, ply]);
+    const goNext = useCallback(() => onSelectPly(ply + 1), [onSelectPly, ply]);
+    const goLast = useCallback(() => onSelectPly(maxPly), [maxPly, onSelectPly]);
+    usePositionKeyboardNav({
+        enabled: keyboardNav,
+        canPrev,
+        canNext,
+        onPrev: goPrev,
+        onNext: goNext,
+        onFirst: goFirst,
+        onLast: goLast,
+    });
     const board = jsx(AnalysisChessboardView, { model: model });
     const engineEvaluationPanel = model.engineEnabled
         ? renderEngineEvaluation({
@@ -1326,66 +3333,6 @@ const closeButtonStyle = {
     fontSize: 14,
 };
 
-const navRowStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6,
-};
-const scrubberInputStyle = {
-    flex: 1,
-};
-const plyLabelStyle = {
-    minWidth: 56,
-    textAlign: 'center',
-    fontSize: 14,
-};
-function palette(theme) {
-    return {
-        text: theme === 'dark' ? '#e8e8e8' : '#1a1a1a',
-        border: theme === 'dark' ? '#3a3a3a' : '#d0d0d0',
-        surface: theme === 'dark' ? '#262626' : '#f5f5f5',
-    };
-}
-function navButtonStyle(colors) {
-    return {
-        padding: '4px 10px',
-        borderRadius: 6,
-        cursor: 'pointer',
-        fontSize: 14,
-        fontWeight: 600,
-        border: `1px solid ${colors.border}`,
-        background: colors.surface,
-        color: colors.text,
-    };
-}
-
-/** Library-default ply navigation (inline styles). */
-const DefaultPlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme, showScrubber, showPlyLabel, }) => {
-    const colors = palette(theme);
-    const buttonStyle = navButtonStyle(colors);
-    return (jsxs("div", { style: navRowStyle, children: [jsx("button", { type: "button", onClick: onGoFirst, disabled: !canPrev, style: buttonStyle, "aria-label": "First move", children: "\u23EE" }), jsx("button", { type: "button", onClick: onGoPrev, disabled: !canPrev, style: buttonStyle, "aria-label": "Previous move", children: "\u25C0" }), showScrubber ? (jsx("input", { type: "range", min: 0, max: totalPly, value: plyIndex, onChange: (e) => onGoTo(Number(e.target.value)), style: scrubberInputStyle, "aria-label": "Scrub through game" })) : showPlyLabel ? (jsxs("span", { style: Object.assign(Object.assign({}, plyLabelStyle), { color: colors.text }), children: [plyIndex, " / ", totalPly] })) : null, jsx("button", { type: "button", onClick: onGoNext, disabled: !canNext, style: buttonStyle, "aria-label": "Next move", children: "\u25B6" }), jsx("button", { type: "button", onClick: onGoLast, disabled: !canNext, style: buttonStyle, "aria-label": "Last move", children: "\u23ED" })] }));
-};
-const defaultRenderPlyNavigation = (props) => (jsx(DefaultPlyNavigation, Object.assign({}, props)));
-
-/**
- * Step through a fixed move list. Omit {@link PlyNavigationProps.renderPlyNavigation}
- * for the default inline-styled UI, or pass a custom renderer (e.g. MUI controls).
- */
-const PlyNavigation = ({ plyIndex, totalPly, canPrev, canNext, onGoFirst, onGoPrev, onGoNext, onGoLast, onGoTo, theme = 'dark', showScrubber = true, showPlyLabel, renderPlyNavigation = defaultRenderPlyNavigation, }) => renderPlyNavigation({
-    plyIndex,
-    totalPly,
-    canPrev,
-    canNext,
-    onGoFirst,
-    onGoPrev,
-    onGoNext,
-    onGoLast,
-    onGoTo,
-    theme,
-    showScrubber,
-    showPlyLabel: showPlyLabel !== null && showPlyLabel !== void 0 ? showPlyLabel : !showScrubber,
-});
-
 const DefaultAnalysisSidebar = ({ historyRows, isHistoryRowSelected, onSelectHistoryRow, ply, maxPly, onSelectPly, theme, engineEvaluationPanel, }) => {
     const rowBands = createSidebarRowBandCounters();
     const baseChipStyle = {
@@ -1393,7 +3340,7 @@ const DefaultAnalysisSidebar = ({ historyRows, isHistoryRowSelected, onSelectHis
         padding: '4px 8px',
         borderRadius: 4,
     };
-    return (jsxs("div", { style: sidebarStyle, children: [jsxs("div", { style: navBlockStyle, children: [jsx(PlyNavigation, { plyIndex: ply, totalPly: maxPly, canPrev: ply > 0, canNext: ply < maxPly, onGoFirst: () => onSelectPly(0), onGoPrev: () => onSelectPly(ply - 1), onGoNext: () => onSelectPly(ply + 1), onGoLast: () => onSelectPly(maxPly), onGoTo: onSelectPly, theme: theme, showScrubber: false }), jsx("p", { style: sectionTitleStyle, children: "Move history" })] }), jsxs("div", { style: contentRowStyle, children: [jsx("ol", { style: moveListStyle, children: historyRows.length === 0 ? (jsx("li", { style: emptyRowStyle, children: "No moves played yet." })) : (historyRows.map((row) => {
+    return (jsxs("div", { style: sidebarStyle, children: [jsxs("div", { style: navBlockStyle, children: [jsx(PlyNavigation, { plyIndex: ply, totalPly: maxPly, canPrev: ply > 0, canNext: ply < maxPly, onGoFirst: () => onSelectPly(0), onGoPrev: () => onSelectPly(ply - 1), onGoNext: () => onSelectPly(ply + 1), onGoLast: () => onSelectPly(maxPly), onGoTo: onSelectPly, theme: theme, keyboardNav: false, showScrubber: false }), jsx("p", { style: sectionTitleStyle, children: "Move history" })] }), jsxs("div", { style: contentRowStyle, children: [jsx("ol", { style: moveListStyle, "aria-label": "Move history", children: historyRows.length === 0 ? (jsx("li", { style: emptyRowStyle, children: "No moves played yet." })) : (historyRows.map((row) => {
                             const isSelected = isHistoryRowSelected(row);
                             const isVariation = row.kind === 'variation';
                             const backgroundColor = isSelected
@@ -1492,4 +3439,374 @@ const AnalysisBoard = (_a) => {
             : () => null) })));
 };
 
-export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisErrorBoundary, AnalysisPosition, ChessboardThemeContext, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, PlyNavigation, StockfishBrowserEngine, ThemeProvider, analysisBoardHighlightColors, analysisSidebarColors, applyUciMove, boardSquareHighlightColors, createSidebarRowBandCounters, defaultRenderPlyNavigation, emptyEngineEvaluation, formatEvaluation, formatPvPreview, getAnalysisModalStyles, getCheckSquareFromChess, getLastMoveSquareStyles, getSidebarRowBackground, getStylesForTheme, isAnalyzableFen, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciPvToSan, useAnalysisBoardModel, useAnalysisEngine, useChessboardTheme, useTheme };
+/** Resolve a board drag into a legal UCI string, or null when illegal. */
+function uciFromDrop(fen, sourceSquare, targetSquare, piece) {
+    var _a, _b;
+    const chess = new Chess(fen);
+    const pieceType = (_a = piece[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const legal = chess
+        .moves({ square: sourceSquare, verbose: true })
+        .find((move) => move.to === targetSquare &&
+        (!move.promotion || move.promotion === pieceType));
+    if (!legal)
+        return null;
+    return `${legal.from}${legal.to}${(_b = legal.promotion) !== null && _b !== void 0 ? _b : ''}`;
+}
+function matchesExpectedUci(uci, expectedUci) {
+    return uci.toLowerCase() === expectedUci.toLowerCase();
+}
+
+/**
+ * Evaluate a training drop without mutating board position.
+ * Returns `false` for incorrect attempts so react-chessboard snaps the piece back.
+ */
+function evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expectedUci, enabled) {
+    if (!enabled || !expectedUci) {
+        return { kind: 'ignored' };
+    }
+    const uci = uciFromDrop(fen, sourceSquare, targetSquare, piece);
+    if (!uci) {
+        return { kind: 'illegal' };
+    }
+    if (matchesExpectedUci(uci, expectedUci)) {
+        return { kind: 'correct', uci };
+    }
+    return { kind: 'incorrect', uci };
+}
+function createExpectedMoveDropHandler({ fen, expectedUci, enabled, onCorrect, onIncorrect, }) {
+    return (sourceSquare, targetSquare, piece) => {
+        const result = evaluateExpectedMoveDrop(fen, sourceSquare, targetSquare, piece, expectedUci, enabled);
+        switch (result.kind) {
+            case 'correct':
+                onCorrect(result.uci);
+                return true;
+            case 'incorrect':
+                onIncorrect(result.uci);
+                return false;
+            default:
+                return false;
+        }
+    };
+}
+
+/**
+ * Bump the revision counter to force a controlled chessboard re-render after a
+ * rejected drop. Pair with returning `false` from `onPieceDrop` so the board
+ * snaps back without changing the controlled `position` FEN.
+ */
+function useBoardRevision() {
+    const [revision, setRevision] = useState(0);
+    const bumpRevision = useCallback(() => {
+        setRevision((current) => current + 1);
+    }, []);
+    return { revision, bumpRevision };
+}
+
+/** Minimum eval loss (pawns) from the wrong move before showing a refutation. */
+const REFUTATION_EVAL_GAP_PAWNS = 0.5;
+const REFUTATION_EVAL_GAP_CP = REFUTATION_EVAL_GAP_PAWNS * 100;
+const refutationEngineOptions = {
+    depth: 14,
+    multiPv: 1,
+};
+function fenAfterUci(fen, uci) {
+    const chess = new Chess(fen);
+    if (!applyUciMove(chess, uci)) {
+        return null;
+    }
+    return chess.fen();
+}
+/** Centipawn score from side to move, comparable across sibling positions. */
+function lineEvalCpForGap(line) {
+    if (!line) {
+        return null;
+    }
+    if (line.mate !== null) {
+        return line.mate > 0 ? 10000 - line.mate : -1e4 + line.mate;
+    }
+    return line.centipawns;
+}
+/** How much better the opponent's eval is after the wrong move vs the correct one. */
+function refutationEvalGapCp(evalAfterWrong, evalAfterCorrect) {
+    const wrongCp = lineEvalCpForGap(evalAfterWrong.lines[0]);
+    const correctCp = lineEvalCpForGap(evalAfterCorrect.lines[0]);
+    if (wrongCp === null || correctCp === null) {
+        return null;
+    }
+    return wrongCp - correctCp;
+}
+function refutationFromEvaluation(fenAfterWrong, evaluation, evalGapCp, evalGapApplies, evalGapLoading) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const loading = evaluation.status === 'loading' ||
+        evaluation.status === 'analyzing' ||
+        evalGapLoading;
+    if (evaluation.status === 'error') {
+        return {
+            refutationUci: null,
+            refutationSan: null,
+            refutationLine: null,
+            loading: false,
+            error: (_a = evaluation.error) !== null && _a !== void 0 ? _a : 'Engine unavailable',
+        };
+    }
+    const meetsThreshold = !evalGapApplies ||
+        (evalGapCp !== null && evalGapCp >= REFUTATION_EVAL_GAP_CP);
+    if (!meetsThreshold) {
+        return {
+            refutationUci: null,
+            refutationSan: null,
+            refutationLine: null,
+            loading,
+            error: null,
+        };
+    }
+    const refutationUci = (_d = (_c = (_b = evaluation.lines[0]) === null || _b === void 0 ? void 0 : _b.pv) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null;
+    const refutationSan = refutationUci
+        ? ((_e = uciPvToSan(fenAfterWrong, [refutationUci])[0]) !== null && _e !== void 0 ? _e : refutationUci)
+        : null;
+    const refutationLine = ((_g = (_f = evaluation.lines[0]) === null || _f === void 0 ? void 0 : _f.pv) === null || _g === void 0 ? void 0 : _g.length)
+        ? formatPvPreview(fenAfterWrong, evaluation.lines[0].pv, 4)
+        : null;
+    return {
+        refutationUci,
+        refutationSan,
+        refutationLine,
+        loading,
+        error: null,
+    };
+}
+
+const MISS_WRONG_PAUSE_MS = 450;
+const MISS_REFUTATION_PAUSE_MS = 900;
+const MISS_REFUTATION_MAX_WAIT_MS = 4000;
+const MISS_MOVE_ANIMATION_MS = 220;
+function moveArrow(uci, color) {
+    if (!uci || uci.length < 4) {
+        return [];
+    }
+    return [[uci.slice(0, 2), uci.slice(2, 4), color]];
+}
+function expectedMoveArrow(expectedUci, color) {
+    return moveArrow(expectedUci, color);
+}
+function getMissDisplay(sequence, expectedUci, refutationUci, answerArrowColor) {
+    var _a;
+    if (!sequence) {
+        return {
+            fen: null,
+            arrows: [],
+            animating: false,
+        };
+    }
+    const { setupFen, attemptedUci, phase } = sequence;
+    const fenAfterWrong = fenAfterUci(setupFen, attemptedUci);
+    switch (phase) {
+        case 'wrong':
+            return {
+                fen: fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : setupFen,
+                arrows: [],
+                animating: false,
+            };
+        case 'refutation': {
+            const fenAfterRefutation = fenAfterWrong && refutationUci
+                ? fenAfterUci(fenAfterWrong, refutationUci)
+                : null;
+            return {
+                fen: (_a = fenAfterRefutation !== null && fenAfterRefutation !== void 0 ? fenAfterRefutation : fenAfterWrong) !== null && _a !== void 0 ? _a : setupFen,
+                arrows: [],
+                animating: Boolean(fenAfterRefutation),
+            };
+        }
+        case 'retry':
+            return {
+                fen: setupFen,
+                arrows: [],
+                animating: false,
+            };
+        case 'answer':
+            return {
+                fen: setupFen,
+                arrows: expectedMoveArrow(expectedUci, answerArrowColor),
+                animating: false,
+            };
+        default:
+            return {
+                fen: setupFen,
+                arrows: [],
+                animating: false,
+            };
+    }
+}
+
+function useMissRefutation(setupFen, attemptedUci, expectedUci, enabled, engineOptions) {
+    const fenAfterWrong = useMemo(() => {
+        if (!setupFen || !attemptedUci) {
+            return null;
+        }
+        return fenAfterUci(setupFen, attemptedUci);
+    }, [setupFen, attemptedUci]);
+    const fenAfterCorrect = useMemo(() => {
+        if (!setupFen || !expectedUci) {
+            return null;
+        }
+        return fenAfterUci(setupFen, expectedUci);
+    }, [setupFen, expectedUci]);
+    const wrongEvaluation = useAnalysisEngine(fenAfterWrong !== null && fenAfterWrong !== void 0 ? fenAfterWrong : '', Object.assign(Object.assign({}, engineOptions), { enabled: enabled && Boolean(fenAfterWrong), shared: false }));
+    const correctEvaluation = useAnalysisEngine(fenAfterCorrect !== null && fenAfterCorrect !== void 0 ? fenAfterCorrect : '', Object.assign(Object.assign({}, engineOptions), { enabled: enabled && Boolean(fenAfterCorrect), shared: false }));
+    return useMemo(() => {
+        if (!fenAfterWrong) {
+            return {
+                fenAfterWrong: null,
+                refutationUci: null,
+                refutationSan: null,
+                refutationLine: null,
+                loading: false,
+                error: null,
+            };
+        }
+        const evalGapApplies = Boolean(fenAfterCorrect);
+        const evalGapCp = evalGapApplies
+            ? refutationEvalGapCp(wrongEvaluation, correctEvaluation)
+            : null;
+        const evalGapLoading = evalGapApplies &&
+            evalGapCp === null &&
+            wrongEvaluation.status !== 'error' &&
+            correctEvaluation.status !== 'error' &&
+            (correctEvaluation.status === 'loading' ||
+                correctEvaluation.status === 'analyzing' ||
+                wrongEvaluation.status === 'loading' ||
+                wrongEvaluation.status === 'analyzing');
+        return Object.assign({ fenAfterWrong }, refutationFromEvaluation(fenAfterWrong, wrongEvaluation, evalGapCp, evalGapApplies, evalGapLoading));
+    }, [fenAfterCorrect, fenAfterWrong, correctEvaluation, wrongEvaluation]);
+}
+
+function useMissSequence(feedback, expectedUci, engineOptions, answerArrowColor, autoShowWrongMoves) {
+    var _a, _b;
+    const [sequence, setSequence] = useState(null);
+    const refutation = useMissRefutation((_a = sequence === null || sequence === void 0 ? void 0 : sequence.setupFen) !== null && _a !== void 0 ? _a : null, (_b = sequence === null || sequence === void 0 ? void 0 : sequence.attemptedUci) !== null && _b !== void 0 ? _b : null, expectedUci, sequence != null, engineOptions);
+    const startSequence = useCallback((setupFen, attemptedUci) => {
+        setSequence({
+            setupFen,
+            attemptedUci,
+            phase: autoShowWrongMoves ? 'wrong' : 'retry',
+        });
+    }, [autoShowWrongMoves]);
+    const clearSequence = useCallback(() => {
+        setSequence(null);
+    }, []);
+    const prevFeedbackRef = useRef(feedback);
+    useEffect(() => {
+        const prevFeedback = prevFeedbackRef.current;
+        prevFeedbackRef.current = feedback;
+        if (prevFeedback === 'incorrect' && feedback !== 'incorrect') {
+            setSequence(null);
+        }
+    }, [feedback]);
+    useEffect(() => {
+        if (!sequence || sequence.phase !== 'wrong' || !autoShowWrongMoves) {
+            return undefined;
+        }
+        if (refutation.loading) {
+            const maxWait = window.setTimeout(() => {
+                setSequence((current) => (current === null || current === void 0 ? void 0 : current.phase) === 'wrong' ? Object.assign(Object.assign({}, current), { phase: 'answer' }) : current);
+            }, MISS_REFUTATION_MAX_WAIT_MS);
+            return () => window.clearTimeout(maxWait);
+        }
+        const delay = window.setTimeout(() => {
+            setSequence((current) => {
+                if (!current || current.phase !== 'wrong') {
+                    return current;
+                }
+                return Object.assign(Object.assign({}, current), { phase: refutation.refutationUci ? 'refutation' : 'answer' });
+            });
+        }, MISS_WRONG_PAUSE_MS);
+        return () => window.clearTimeout(delay);
+    }, [
+        autoShowWrongMoves,
+        refutation.loading,
+        refutation.refutationUci,
+        sequence,
+    ]);
+    useEffect(() => {
+        if (!sequence || sequence.phase !== 'refutation') {
+            return undefined;
+        }
+        const delay = window.setTimeout(() => {
+            setSequence((current) => (current === null || current === void 0 ? void 0 : current.phase) === 'refutation'
+                ? Object.assign(Object.assign({}, current), { phase: 'answer' }) : current);
+        }, MISS_REFUTATION_PAUSE_MS);
+        return () => window.clearTimeout(delay);
+    }, [sequence]);
+    const display = useMemo(() => getMissDisplay(sequence, expectedUci, refutation.refutationUci, answerArrowColor), [
+        answerArrowColor,
+        expectedUci,
+        refutation.refutationUci,
+        sequence,
+    ]);
+    return {
+        sequence,
+        refutation,
+        display,
+        startSequence,
+        clearSequence,
+    };
+}
+
+function useMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, autoShowWrongMoves = true, engineOptions, }) {
+    var _a;
+    const refutationEngine = useMemo(() => (Object.assign(Object.assign({}, refutationEngineOptions), engineOptions)), [engineOptions]);
+    const missSequence = useMissSequence(feedback, expectedUci, refutationEngine, answerArrowColor, autoShowWrongMoves);
+    const customArrows = useMemo(() => {
+        if (feedback !== 'incorrect') {
+            return [];
+        }
+        if (missSequence.sequence) {
+            return missSequence.display.arrows;
+        }
+        if (expectedUci) {
+            return [
+                [
+                    expectedUci.slice(0, 2),
+                    expectedUci.slice(2, 4),
+                    answerArrowColor,
+                ],
+            ];
+        }
+        return [];
+    }, [
+        answerArrowColor,
+        expectedUci,
+        feedback,
+        missSequence.display.arrows,
+        missSequence.sequence,
+    ]);
+    const boardPosition = (_a = missSequence.display.fen) !== null && _a !== void 0 ? _a : positionFen;
+    const wrapDropHandler = useCallback((onDrop, { enabled, dropFen = boardPosition, expectedMoveUci = expectedUci, }) => (source, target, piece) => {
+        if (enabled && expectedMoveUci) {
+            const uci = uciFromDrop(dropFen, source, target, piece);
+            if (uci && uci.toLowerCase() !== expectedMoveUci.toLowerCase()) {
+                missSequence.startSequence(dropFen, uci);
+            }
+            else if (uci &&
+                uci.toLowerCase() === expectedMoveUci.toLowerCase()) {
+                missSequence.clearSequence();
+            }
+        }
+        return onDrop(source, target, piece);
+    }, [
+        boardPosition,
+        expectedUci,
+        missSequence.clearSequence,
+        missSequence.startSequence,
+    ]);
+    return {
+        missSequence,
+        refutation: missSequence.refutation,
+        customArrows,
+        boardPosition,
+        boardAnimating: missSequence.display.animating,
+        wrapDropHandler,
+    };
+}
+
+export { AnalysisBoard, AnalysisBoardCore, AnalysisBoardCoreView, AnalysisBoardLayout, AnalysisChessboardView, AnalysisEngineProvider, AnalysisErrorBoundary, AnalysisPosition, BOARD_THEMES, BOARD_THEME_IDS, ChessboardDnDProvider, ChessboardThemeContext, DEFAULT_ANALYSIS_LAYOUT, DEFAULT_BOARD_THEME, DEFAULT_STOCKFISH_SCRIPT_URL, DefaultAnalysisContainer, DefaultAnalysisSidebar, DefaultPlyNavigation, EngineEvaluationPanel, HighlightChessboard, MISS_MOVE_ANIMATION_MS, MISS_REFUTATION_MAX_WAIT_MS, MISS_REFUTATION_PAUSE_MS, MISS_WRONG_PAUSE_MS, PlyNavigation, REFUTATION_EVAL_GAP_CP, REFUTATION_EVAL_GAP_PAWNS, StockfishBrowserEngine, ThemeProvider, analysisBoardHighlightColors, analysisSidebarColors, applyUciMove, boardSquareHighlightColors, boardThemeFromLegacyUiTheme, createExpectedMoveDropHandler, createSidebarRowBandCounters, defaultRenderPlyNavigation, emptyEngineEvaluation, evaluateExpectedMoveDrop, fenAfterUci, formatEvaluation, formatPvPreview, getAnalysisModalStyles, getBoardThemeStyles, getCheckSquareFromChess, getLastMoveSquareStyles, getMissDisplay, getSidebarRowBackground, getStylesForTheme, isAnalyzableFen, isBoardThemeId, isEditableKeyboardTarget, lineEvalCpForGap, matchesExpectedUci, navButtonStyle, navRowStyle, normalizeEvalForWhite, normalizePvMoves, normalizeSubscriberOptions, parseUciInfoLine, parseUciMove, plyLabelStyle, palette as plyNavigationPalette, refutationEngineOptions, refutationEvalGapCp, refutationFromEvaluation, resolveStockfishScriptUrl, resolveStockfishWasmUrl, resolveStockfishWorkerUrl, scrubberInputStyle, splitWorkerLines, uciFromDrop, uciPvToSan, useAnalysisBoardModel, useAnalysisEngine, useAnalysisEngineContext, useBoardRevision, useChessboardTheme, useMissBoard, useMissRefutation, useMissSequence, usePositionKeyboardNav, useTheme };