@mirasen/chessboard 1.2.2 → 1.2.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @mirasen/chessboard
 
+## 1.2.4
+
+### Patch Changes
+
+- eccb340: Fix fast drag-and-drop reliability in Chrome and other browsers that may dispatch `lostpointercapture` before or instead of `pointerup`.
+
+  Active drag gestures now remember the pointer button that started them. When that button is released during `lostpointercapture`, the board resolves the gesture through the same terminal release path as `pointerup` instead of cancelling it prematurely.
+
+  This fixes fast drops that could previously return a piece to its source square even when the target was valid, while preserving proper cleanup for fast releases outside the board and for extension-owned drag gestures such as annotations.
+
+## 1.2.3
+
+### Patch Changes
+
+- d8df60e: Fix stale lifted-piece drag cleanup when pointer capture is lost.
+
+  Fast drag gestures released outside the board could leave an active lifted-piece drag session alive if the browser delivered `lostpointercapture` instead of a normal `pointerup`. The input adapter now handles `lostpointercapture`, clears stale pointer tracking, and routes the event through the interaction controller so active drag sessions are cancelled cleanly.
+
+  This prevents dragged pieces from remaining visually attached to the pointer after an outside-board release.
+
 ## 1.2.2
 
 ### Patch Changes

package/README.md

@@ -319,16 +319,35 @@ board = createBoard({
 
 Configured built-in extensions can be provided either as declarative `{ builtin, options }` objects or through the built-in extension factory map. If you use custom piece assets, pass the same `pieceUrls` map to renderer and promotion when you want the board and promotion UI to use the same piece set.
 
-### Default visual identity
+### Default visual identity and attribution
 
 The default first-party extension baseline includes a subtle Mirasen board watermark.
 
 If you want full control over the visual baseline, use an explicit extension list and omit the `watermark` extension.
 
+Attribution is not required by the MIT license, but it is appreciated. If Mirasen Chessboard helps your project, please consider keeping the default watermark or linking to `@mirasen/chessboard`.
+
 ## Documentation
 
 See [Documentation](./documentation.md) for the documentation hub.
 
+## Versioning and breaking changes
+
+`@mirasen/chessboard` follows semantic versioning for public API changes.
+
+Breaking public API changes are released as major versions.
+
+We do not add backward-compatibility aliases or runtime compatibility bridges by default. When a public contract changes, the new API is kept explicit and clean, and the required migration is documented in the release notes / changelog.
+
+Migration notes for breaking changes are included directly in the corresponding changelog entry, so users can see:
+
+- what changed
+- why it changed
+- what old usage looked like
+- what new usage should look like
+
+See the [CHANGELOG](./CHANGELOG.md) for release history and migration notes.
+
 ## Architecture
 
 `@mirasen/chessboard` is built around explicit boundaries:

package/dist/extensions/first-party/annotations/interaction.js

@@ -41,7 +41,8 @@ export function handleAnnotationsEvent(state, context) {
             type: ANNOTATIONS_DRAW_DRAG_TYPE,
             sourceSquare: targetSquare,
             sourcePieceCode: null,
-            targetSquare: targetSquare
+            targetSquare: targetSquare,
+            startButton: rawEvent.button
         });
         if (success) {
             rawEvent.preventDefault();
@@ -68,7 +69,8 @@ export function handleAnnotationsEvent(state, context) {
         type: ANNOTATIONS_IDLE_CLEAR_DRAG_TYPE,
         sourceSquare: targetSquare,
         sourcePieceCode: null,
-        targetSquare: targetSquare
+        targetSquare: targetSquare,
+        startButton: rawEvent.button
     });
     if (success) {
         rawEvent.preventDefault();

package/dist/extensions/first-party/legal-moves/factory.js

@@ -68,7 +68,7 @@ function createLegalMovesInstance(options, config) {
                 'stroke-opacity': internalState.config.captureTarget.color.opacity.toString(),
                 'stroke-width': (geometry.squareSize * internalState.config.captureTarget.strokeWidthRatio).toString(),
                 fill: 'none'
-            }; // TODO: Remove, this is just for visual test
+            };
             for (const [square, destination] of interaction.activeDestinations) {
                 const rect = geometry.getSquareRect(square);
                 const circleX = rect.x + geometry.squareSize / 2;

package/dist/extensions/types/basic/events.d.ts

@@ -1,23 +1,27 @@
 import type { Square } from '../../../state/board/types/internal.js';
 import type { ScenePoint } from '../basic/transient-visuals.js';
+declare const ALL_SCENE_POINTER_EVENT_TYPES_ARRAY: readonly ["pointercancel", "pointerdown", "pointerenter", "pointerleave", "pointermove", "pointerout", "pointerover", "pointerrawupdate", "pointerup", "contextmenu", "lostpointercapture"];
+export type ScenePointerEventType = (typeof ALL_SCENE_POINTER_EVENT_TYPES_ARRAY)[number];
+export declare const ALL_SCENE_POINTER_EVENT_TYPES: ReadonlySet<string>;
 export interface ScenePointerEvent {
-    readonly type: 'pointercancel' | 'pointerdown' | 'pointerenter' | 'pointerleave' | 'pointermove' | 'pointerout' | 'pointerover' | 'pointerrawupdate' | 'pointerup' | 'contextmenu';
+    readonly type: ScenePointerEventType;
     readonly point: ScenePoint;
     readonly clampedPoint: ScenePoint;
     readonly boardClampedPoint: ScenePoint | null;
     readonly targetSquare: Square | null;
 }
-export declare const ALL_SCENE_POINTER_EVENT_TYPES: ReadonlySet<string>;
 export type SceneEvent = ScenePointerEvent;
 export type RuntimeInteractionActionStartLiftedDrag = {
     type: 'startLiftedDrag';
     source: Square;
     target: Square;
+    startButton: number;
 };
 export type RuntimeInteractionActionStartReleaseTargetingDrag = {
     type: 'startReleaseTargetingDrag';
     source: Square;
     target: Square;
+    startButton: number;
 };
 export type RuntimeInteractionActionCompleteCoreDrag = {
     type: 'completeCoreDragTo';
@@ -38,3 +42,4 @@ export type RuntimeInteractionActionCancelInteraction = {
     type: 'cancelInteraction';
 };
 export type RuntimeInteractionAction = RuntimeInteractionActionStartLiftedDrag | RuntimeInteractionActionStartReleaseTargetingDrag | RuntimeInteractionActionCompleteCoreDrag | RuntimeInteractionActionCompleteExtensionDrag | RuntimeInteractionActionUpdateDragSessionCurrentTarget | RuntimeInteractionActionCancelActiveInteraction | RuntimeInteractionActionCancelInteraction;
+export {};

package/dist/extensions/types/basic/events.js

@@ -1,4 +1,4 @@
-export const ALL_SCENE_POINTER_EVENT_TYPES = new Set([
+const ALL_SCENE_POINTER_EVENT_TYPES_ARRAY = [
     'pointercancel',
     'pointerdown',
     'pointerenter',
@@ -8,5 +8,7 @@ export const ALL_SCENE_POINTER_EVENT_TYPES = new Set([
     'pointerover',
     'pointerrawupdate',
     'pointerup',
-    'contextmenu'
-]);
+    'contextmenu',
+    'lostpointercapture'
+];
+export const ALL_SCENE_POINTER_EVENT_TYPES = new Set(ALL_SCENE_POINTER_EVENT_TYPES_ARRAY);

package/dist/extensions/types/basic/interaction.d.ts

@@ -4,6 +4,7 @@ export interface ExtensionDragSessionBase {
     sourceSquare: Square | null;
     sourcePieceCode: PieceCode | null;
     targetSquare: Square | null;
+    startButton: number;
 }
 export interface ExtensionDragSessionLiftedPiece extends ExtensionDragSessionBase {
     type: 'lifted-piece-drag';

package/dist/runtime/factory/input.js

@@ -18,7 +18,7 @@ export function createRuntimeInteractionSurface(state) {
             const internalState = state();
             return internalState.state.board.getPieceCodeAt(square);
         },
-        startLiftedDrag(source, target) {
+        startLiftedDrag(source, target, startButton) {
             const internalState = state();
             const interactionMutationSession = internalState.mutation.getSession();
             const interaction = internalState.state.interaction;
@@ -34,7 +34,8 @@ export function createRuntimeInteractionSurface(state) {
                 type: 'lifted-piece-drag',
                 sourceSquare: interactionSource.square,
                 sourcePieceCode: interactionSource.pieceCode,
-                targetSquare: target
+                targetSquare: target,
+                startButton
             };
             interaction.setDragSession(dragSession, interactionMutationSession);
             runtimeRunMutationPipeline(internalState);
@@ -66,7 +67,7 @@ export function createRuntimeInteractionSurface(state) {
             mutationSession.addMutation('runtime.interaction.completeExtensionDragTo', true, dragSession);
             runtimeRunMutationPipeline(internalState);
         },
-        startReleaseTargetingDrag(source, target) {
+        startReleaseTargetingDrag(source, target, startButton) {
             const internalState = state();
             const mutationSession = internalState.mutation.getSession();
             const interaction = internalState.state.interaction;
@@ -77,7 +78,8 @@ export function createRuntimeInteractionSurface(state) {
                 type: 'release-targeting',
                 sourceSquare: source,
                 sourcePieceCode: interaction.selected.pieceCode,
-                targetSquare: target
+                targetSquare: target,
+                startButton
             };
             interaction.setDragSession(dragSession, mutationSession);
             runtimeRunMutationPipeline(internalState);

package/dist/runtime/factory/main.js

@@ -195,11 +195,6 @@ export function createRuntime(options) {
     internalState = createRuntimeInternal(optionsInternal);
     // Initial creation, so we mark board position as mutated to trigger mutation pipeline
     internalState.mutation.addMutation('state.board.setPosition', true);
-    // We will have two different interfaces here
-    // One is returned, one is for controller - with different methods
-    // At the moment our assumption that controller will use Runtime but not opposite direction
-    // So we can construct these two objects separately so they would not be huge!
-    // TODO: const inputControllerSurface = createRuntimeInputControllerSurface(internalState);
     // Initial run to process initial mutations and set up previousContext for the next runs
     internalStatus = 'unmounted';
     internalState.mutation.run(internalState);

package/dist/runtime/input/adapter/pointer.d.ts

@@ -6,4 +6,5 @@ export declare function releaseCapture(state: InputAdapterInternal): void;
 export declare function adapterOnPointerDown(state: InputAdapterInternal, e: PointerEvent): void;
 export declare function adapterOnPointerUp(state: InputAdapterInternal, e: PointerEvent): void;
 export declare function adapterOnPointerCancel(state: InputAdapterInternal, e: PointerEvent): void;
+export declare function adapterOnLostPointerCapture(state: InputAdapterInternal, e: PointerEvent): void;
 export declare function pointerEventDestroy(state: InputAdapterInternal): void;

package/dist/runtime/input/adapter/pointer.js

@@ -24,6 +24,9 @@ function pointerEventAdapterHandler(state, e) {
         case 'pointercancel':
             adapterOnPointerCancel(state, e);
             break;
+        case 'lostpointercapture':
+            adapterOnLostPointerCapture(state, e);
+            break;
     }
 }
 /** Release capture for the currently tracked pointer and clear tracking state. */
@@ -56,6 +59,12 @@ export function adapterOnPointerCancel(state, e) {
         return;
     releaseCapture(state);
 }
+export function adapterOnLostPointerCapture(state, e) {
+    assert(e.type === 'lostpointercapture', `Expected lostpointercapture event, got ${e.type}`);
+    if (e.pointerId !== state.activePointerId)
+        return;
+    releaseCapture(state);
+}
 export function pointerEventDestroy(state) {
     if (state.activePointerId !== null) {
         releaseCapture(state);

package/dist/runtime/input/adapter/types.js

@@ -2,5 +2,6 @@ export const NEED_EVENT_TYPES = new Set([
     'pointerdown',
     'pointermove',
     'pointerup',
-    'pointercancel'
+    'pointercancel',
+    'lostpointercapture'
 ]);

package/dist/runtime/input/controller/factory.js

@@ -22,10 +22,10 @@ export function createInteractionController(options) {
             if (action) {
                 switch (action.type) {
                     case 'startLiftedDrag':
-                        internalState.surface.startLiftedDrag(action.source, action.target);
+                        internalState.surface.startLiftedDrag(action.source, action.target, action.startButton);
                         break;
                     case 'startReleaseTargetingDrag':
-                        internalState.surface.startReleaseTargetingDrag(action.source, action.target);
+                        internalState.surface.startReleaseTargetingDrag(action.source, action.target, action.startButton);
                         break;
                     case 'completeCoreDragTo':
                         internalState.surface.completeCoreDragTo(action.target);

package/dist/runtime/input/controller/helpers.d.ts

@@ -1,3 +1,4 @@
 import type { Square } from '../../../state/board/types/internal.js';
 import type { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
+export declare function buttonToButtonsMask(button: number): number | null;
 export declare function canMoveTo(snapshot: InteractionStateSnapshot, target: Square): boolean;

package/dist/runtime/input/controller/helpers.js

@@ -1,3 +1,19 @@
+export function buttonToButtonsMask(button) {
+    switch (button) {
+        case 0:
+            return 1;
+        case 1:
+            return 4;
+        case 2:
+            return 2;
+        case 3:
+            return 8;
+        case 4:
+            return 16;
+        default:
+            return null;
+    }
+}
 export function canMoveTo(snapshot, target) {
     const { movability } = snapshot;
     if (movability.mode === 0 /* MovabilityModeCode.Disabled */) {

package/dist/runtime/input/controller/interaction.js

@@ -1,4 +1,4 @@
-import { determineActionPointerCancel, determineActionPointerDown, determineActionPointerMove, determineActionPointerUp } from './pointer.js';
+import { determineActionLostPointerCapture, determineActionPointerCancel, determineActionPointerDown, determineActionPointerMove, determineActionPointerUp } from './pointer.js';
 export function determineRuntimeInteractionAction(state, context) {
     switch (context.rawEvent.type) {
         case 'pointerdown':
@@ -9,6 +9,8 @@ export function determineRuntimeInteractionAction(state, context) {
             return determineActionPointerUp(state, context);
         case 'pointercancel':
             return determineActionPointerCancel(state, context);
+        case 'lostpointercapture':
+            return determineActionLostPointerCapture(state, context);
     }
     return null;
 }

package/dist/runtime/input/controller/pointer.d.ts

@@ -4,3 +4,4 @@ export declare function determineActionPointerDown(state: InteractionControllerI
 export declare function determineActionPointerMove(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
 export declare function determineActionPointerUp(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
 export declare function determineActionPointerCancel(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
+export declare function determineActionLostPointerCapture(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;

package/dist/runtime/input/controller/pointer.js

@@ -2,7 +2,7 @@ import assert from '@ktarmyshov/assert';
 import { isEmptyPieceCode, isNonEmptyPieceCode } from '../../../state/board/check.js';
 import { fromPieceCode } from '../../../state/board/piece.js';
 import { isDragSessionCoreOwned } from '../../../state/interaction/helpers.js';
-import { canMoveTo } from './helpers.js';
+import { buttonToButtonsMask, canMoveTo } from './helpers.js';
 export function determineActionPointerDown(state, context) {
     assert(context.rawEvent.type === 'pointerdown', 'determineActionPointerDown should only be called for pointerdown events');
     const rawEvent = context.rawEvent;
@@ -31,7 +31,8 @@ export function determineActionPointerDown(state, context) {
                 return {
                     type: 'startReleaseTargetingDrag',
                     source: interaction.selected.square,
-                    target: sceneEvent.targetSquare
+                    target: sceneEvent.targetSquare,
+                    startButton: rawEvent.button
                 };
             }
             const isLegalMoveTarget = interaction.movability.mode === 1 /* MovabilityModeCode.Free */ ||
@@ -42,7 +43,8 @@ export function determineActionPointerDown(state, context) {
                 return {
                     type: 'startReleaseTargetingDrag',
                     source: interaction.selected.square,
-                    target: sceneEvent.targetSquare
+                    target: sceneEvent.targetSquare,
+                    startButton: rawEvent.button
                 };
             }
         }
@@ -55,7 +57,8 @@ export function determineActionPointerDown(state, context) {
             return {
                 type: 'startLiftedDrag',
                 source: sceneEvent.targetSquare,
-                target: sceneEvent.targetSquare
+                target: sceneEvent.targetSquare,
+                startButton: rawEvent.button
             };
         }
     }
@@ -72,60 +75,61 @@ export function determineActionPointerMove(state, context) {
     }
     return null;
 }
-export function determineActionPointerUp(state, context) {
-    assert(context.rawEvent.type === 'pointerup', 'determineActionPointerUp should only be called for pointerup events');
+function determineActionTerminalRelease(state, context) {
     const interaction = state.surface.getInteractionStateSnapshot();
     const dragSession = interaction.dragSession;
     if (!dragSession) {
-        // No active drag session, so nothing to do on pointer up
         return null;
     }
     const sceneEvent = context.sceneEvent;
-    assert(sceneEvent, 'Scene event should be present for pointer events');
+    assert(sceneEvent, 'Scene event should be present for terminal release');
     if (!isDragSessionCoreOwned(dragSession)) {
-        // For extension-owned drag sessions, we simply end the session without attempting to make a move,
-        // since the runtime doesn't have enough information about the semantics of the drag session.
         return {
             type: 'completeExtensionDrag',
             target: sceneEvent.targetSquare
         };
     }
-    // Check if the square is the same as the source square of the drag session.
-    // If it is, then we can end the drag session without making a move.
     if (sceneEvent.targetSquare === dragSession.sourceSquare) {
-        return {
-            type: 'cancelActiveInteraction'
-        };
+        return { type: 'cancelActiveInteraction' };
     }
-    // Check if the target square is a valid destination for the selected piece.
     if (sceneEvent.targetSquare !== null && canMoveTo(interaction, sceneEvent.targetSquare)) {
-        return {
-            type: 'completeCoreDragTo',
-            target: sceneEvent.targetSquare
-        };
+        return { type: 'completeCoreDragTo', target: sceneEvent.targetSquare };
     }
-    // Invalid target: piece returns to source for lifted drag (selection preserved),
-    // or selection is cleared for release targeting.
     if (dragSession.type === 'lifted-piece-drag') {
-        return {
-            type: 'cancelActiveInteraction'
-        };
+        return { type: 'cancelActiveInteraction' };
     }
     else {
-        return {
-            type: 'cancelInteraction'
-        };
+        return { type: 'cancelInteraction' };
     }
 }
+export function determineActionPointerUp(state, context) {
+    assert(context.rawEvent.type === 'pointerup', 'determineActionPointerUp should only be called for pointerup events');
+    return determineActionTerminalRelease(state, context);
+}
 export function determineActionPointerCancel(state, context) {
     assert(context.rawEvent.type === 'pointercancel', 'determineActionPointerCancel should only be called for pointercancel events');
     const interaction = state.surface.getInteractionStateSnapshot();
     if (!interaction.dragSession) {
-        // No active drag session, so nothing to do on pointer cancel
         return null;
     }
-    // Cancel the active interaction on pointer cancel
     return {
         type: 'cancelActiveInteraction'
     };
 }
+export function determineActionLostPointerCapture(state, context) {
+    assert(context.rawEvent.type === 'lostpointercapture', 'determineActionLostPointerCapture should only be called for lostpointercapture events');
+    const interaction = state.surface.getInteractionStateSnapshot();
+    const dragSession = interaction.dragSession;
+    if (!dragSession) {
+        return null;
+    }
+    const rawEvent = context.rawEvent;
+    const mask = buttonToButtonsMask(dragSession.startButton);
+    if (mask === null) {
+        return { type: 'cancelActiveInteraction' };
+    }
+    if ((rawEvent.buttons & mask) === 0) {
+        return determineActionTerminalRelease(state, context);
+    }
+    return { type: 'cancelActiveInteraction' };
+}

package/dist/runtime/input/controller/types.d.ts

@@ -5,8 +5,8 @@ import type { InteractionStateSnapshot } from '../../../state/interaction/types/
 export interface RuntimeInteractionSurface {
     getInteractionStateSnapshot(): InteractionStateSnapshot;
     getPieceCodeAt(square: Square): PieceCode;
-    startLiftedDrag(source: Square, target: Square): void;
-    startReleaseTargetingDrag(source: Square, target: Square): void;
+    startLiftedDrag(source: Square, target: Square, startButton: number): void;
+    startReleaseTargetingDrag(source: Square, target: Square, startButton: number): void;
     completeCoreDragTo(target: Square): void;
     completeExtensionDrag(target: Square | null): void;
     updateDragSessionCurrentTarget(target: Square | null): void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mirasen/chessboard",
 	"description": "Framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
-	"version": "1.2.2",
+	"version": "1.2.4",
 	"license": "MIT",
 	"author": {
 		"name": "Mirasen",
@@ -16,8 +16,13 @@
 		"typescript",
 		"framework-agnostic",
 		"svg",
-		"extensions",
-		"chessboard-platform"
+		"drag-and-drop",
+		"click-to-move",
+		"animation",
+		"annotations",
+		"chessjs",
+		"legal-moves",
+		"touch"
 	],
 	"homepage": "https://mirasen.io/chessboard",
 	"repository": {

package/dist/runtime/mutation/invalidation.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/runtime/mutation/invalidation.js

@@ -1,2 +0,0 @@
-export {};
-// TODO: Mark dirty layers based on upstream changes.