@mirasen/chessboard 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @mirasen/chessboard
 
+## 1.3.2
+
+### Patch Changes
+
+- 41c2799: dependabot: directory '/', update @sveltejs/kit
+- 41c2799: dependabot: directory '/', update es-toolkit
+- 41c2799: dependabot: directory '/', update eslint-plugin-svelte
+- 41c2799: dependabot: directory '/', update svelte
+- 41c2799: dependabot: directory '/', update typescript-eslint
+- 00b1e4f: dependabot: directory '/', update vite
+- 857a1b5: dependabot: directory '/examples/sveltekit', update prettier-plugin-svelte from 3.5.2 to 4.0.1
+- 1226db9: Fix mobile lifted-piece drag clipping near board edges.
+
+  Scaled mobile drag visuals can intentionally extend outside the board viewport so the dragged piece stays visible under the user's finger. The root SVG and SvelteKit example container now allow those board-local overlay visuals to remain visible without changing layout geometry, pointer mapping, or drag behavior.
+
+## 1.3.1
+
+### Patch Changes
+
+- be0386f: Calibrate the default mobile drag piece scale and add board-level desktop/mobile config presets.
+
+  The mobile main-renderer drag preset now uses a larger lifted piece scale while preserving the existing bottom anchor and offset.
+
+  The root package now also exports `DefaultChessboardDesktopConfig` and `DefaultChessboardMobileConfig`, which combine the matching interaction defaults with the matching main-renderer defaults for easier desktop/mobile preset usage.
+
+- be0386f: Calibrate the default mobile drag piece scale.
+
+  The mobile main-renderer drag preset now uses a larger lifted piece scale, making touch dragging feel closer to common mobile chessboard behavior while keeping the existing bottom anchor and offset.
+
 ## 1.3.0
 
 ### Minor Changes

package/README.md

@@ -6,7 +6,7 @@
 
 # @mirasen/chessboard
 
-A framework-agnostic TypeScript chessboard platform with real chess interaction built in and an extension-driven architecture.
+A production-grade, framework-agnostic TypeScript chessboard platform with real chess interaction built in and an extension-driven architecture.
 
 ## Try it live (including annotations)
 
@@ -74,7 +74,7 @@ Rules and legality still belong to your game layer. Use the built-in `chess.js`
 - Real built-in chess interaction
 - Built-in circles and arrows with live add/remove previews
 - **Easy game/rules integration** — connect your own game model, or use the built-in `chess.js` adapter
-- Works on desktop and mobile out of the box, with pointer-based mouse and touch interaction
+- Works on desktop and mobile out of the box, with pointer-based mouse/touch interaction and tunable drag behavior
 - State-diff animation beyond simple move events
 - Extension-driven architecture
 - First-party baseline extensions
@@ -266,6 +266,68 @@ Movability controls how the board accepts user-initiated moves.
 - `free` — user moves are accepted without legal destination filtering
 - `strict` — user moves are accepted only when the target is allowed by the destinations provided by your app/rules layer
 
+### Desktop and mobile drag tuning
+
+The board exposes interaction-level and renderer-level drag configuration so you can tune mouse-first and touch-first surfaces without replacing the built-in interaction model.
+
+Interaction config controls when lifted-piece drag becomes active:
+
+```ts
+const board = createBoard({
+	element
+});
+
+board.setInteractionConfig({
+	drag: {
+		liftedActivation: {
+			thresholdPx: 5
+		}
+	}
+});
+```
+
+Use `thresholdPx: 0` for immediate desktop-style drag activation, or a small threshold for mobile/touch UIs where the piece should not jump on the first tiny pointer movement.
+
+The first-party renderer controls how the lifted piece looks while dragging:
+
+```ts
+board.extensions.renderer.setConfig({
+	drag: {
+		pieceScale: 2,
+		pieceAnchor: 'bottom',
+		pieceAnchorOffsetY: 0.14
+	}
+});
+```
+
+For convenience, the root package ships board-level presets that combine the interaction feel and renderer visuals for a desktop- or mobile-style board. Apply both parts together:
+
+```ts
+import { DefaultChessboardMobileConfig } from '@mirasen/chessboard';
+
+board.setInteractionConfig(DefaultChessboardMobileConfig.interaction);
+
+board.extensions.renderer.setConfig({
+	drag: DefaultChessboardMobileConfig.renderer.drag
+});
+```
+
+`DefaultChessboardDesktopConfig` is the matching desktop preset. If you only want the renderer half, the lower-level `DefaultMainRendererDesktopConfig` and `DefaultMainRendererMobileConfig` building blocks are still exported from `@mirasen/chessboard/extensions`.
+
+### Animation tuning
+
+The first-party renderer exposes animation duration config:
+
+```ts
+board.extensions.renderer.setConfig({
+	animation: {
+		durationMs: 0
+	}
+});
+```
+
+Set `animation.durationMs` to `0` when you want position updates to render instantly without creating movement animations.
+
 ### Advanced: explicit extension lists
 
 Most users can rely on the default first-party extension baseline. Use an explicit extension list only when you want to control which built-in or custom extensions are installed.

package/dist/extensions/first-party/main-renderer/types/internal.js

@@ -43,7 +43,7 @@ export const DefaultMainRendererDesktopConfig = {
 export const DefaultMainRendererMobileConfig = {
     ...cloneDeep(DefaultMainRendererConfigPart),
     drag: {
-        pieceScale: 1.5,
+        pieceScale: 2,
         pieceAnchor: 'bottom',
         pieceAnchorOffsetY: 0.14
     },

package/dist/index.d.ts

@@ -1,5 +1,15 @@
+import type { MainRendererConfigPublic } from './extensions/first-party/main-renderer/types/public.js';
+import { DefaultInteractionDesktopConfig, DefaultInteractionMobileConfig } from './state/interaction/config.js';
+import type { InteractionConfig } from './state/interaction/types/config.js';
 export type { ColorInput, MoveRequestInput, PiecePositionRecordString, PositionInput } from './state/board/types/input.js';
 export type { MoveOutput } from './state/board/types/output.js';
 export type { MovabilityInput, MoveDestinationInput } from './state/interaction/types/input.js';
 export { createBoard } from './wrapper/factory.js';
 export type { Chessboard, ChessboardExtensionInput, ChessboardInitOptions } from './wrapper/types.js';
+export interface ChessboardConfig {
+    readonly interaction: InteractionConfig;
+    readonly renderer: MainRendererConfigPublic;
+}
+export { DefaultInteractionDesktopConfig, DefaultInteractionMobileConfig };
+export declare const DefaultChessboardDesktopConfig: ChessboardConfig;
+export declare const DefaultChessboardMobileConfig: ChessboardConfig;

package/dist/index.js

@@ -1 +1,12 @@
+import { DefaultMainRendererDesktopConfig, DefaultMainRendererMobileConfig } from './extensions/index.js';
+import { DefaultInteractionDesktopConfig, DefaultInteractionMobileConfig } from './state/interaction/config.js';
 export { createBoard } from './wrapper/factory.js';
+export { DefaultInteractionDesktopConfig, DefaultInteractionMobileConfig };
+export const DefaultChessboardDesktopConfig = {
+    interaction: DefaultInteractionDesktopConfig,
+    renderer: DefaultMainRendererDesktopConfig
+};
+export const DefaultChessboardMobileConfig = {
+    interaction: DefaultInteractionMobileConfig,
+    renderer: DefaultMainRendererMobileConfig
+};

package/dist/render/svg/factory.js

@@ -7,6 +7,9 @@ export function createSvgRoots(options) {
     svgRoot.style.setProperty('touch-action', 'pinch-zoom');
     svgRoot.style.setProperty('-webkit-touch-callout', 'none');
     svgRoot.style.setProperty('-webkit-tap-highlight-color', 'transparent');
+    // Don't clip board-local overlay visuals (e.g. mobile lifted drag piece
+    // scaled above the top rank) at the SVG viewport.
+    svgRoot.style.setProperty('overflow', 'visible');
     // Create children in the correct order
     const board = createSvgElement(svgRoot, 'g', { 'data-chessboard-id': 'board-root' });
     const coordinates = createSvgElement(svgRoot, 'g', {

package/dist/state/interaction/types/config.d.ts

@@ -1,9 +1,9 @@
 export interface InteractionConfigDragLiftedActivation {
-    thresholdPx: number;
+    readonly thresholdPx: number;
 }
 export interface InteractionConfigDrag {
-    liftedActivation: InteractionConfigDragLiftedActivation;
+    readonly liftedActivation: InteractionConfigDragLiftedActivation;
 }
 export interface InteractionConfig {
-    drag: InteractionConfigDrag;
+    readonly drag: InteractionConfigDrag;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mirasen/chessboard",
-	"description": "Framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
-	"version": "1.3.0",
+	"description": "Production-grade framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
+	"version": "1.3.2",
 	"license": "MIT",
 	"author": {
 		"name": "Mirasen"
@@ -97,7 +97,7 @@
 		"rimraf": "^6.0.1",
 		"serve": "^14.2.6",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.57.0",
+		"typescript-eslint": "^8.60.0",
 		"vitest": "^4.0.18"
 	},
 	"engines": {
@@ -105,7 +105,7 @@
 	},
 	"dependencies": {
 		"@ktarmyshov/assert": "^0.1.9",
-		"es-toolkit": "^1.45.1",
+		"es-toolkit": "^1.47.0",
 		"type-fest": "^5.5.0"
 	},
 	"peerDependencies": {