@mirasen/chessboard 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @mirasen/chessboard
2
2
 
3
+ ## 1.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 6adedbe: dependabot: directory '/', update @sveltejs/kit
8
+ - 6adedbe: dependabot: directory '/', update @types/node
9
+ - 6adedbe: dependabot: directory '/', update svelte
10
+ - 8b28f59: fix: graceful teardown in events extension unsubscribe during board.destroy()
11
+
12
+ `unsubscribeEvent` no longer asserts that the input adapter is alive — if it's already destroyed, unsubscription is a no-op since subscriptions are gone with the adapter.
13
+
14
+ ## 1.2.1
15
+
16
+ ### Patch Changes
17
+
18
+ - 7f5649f: Update README and documentation entry points for the built-in annotations release.
19
+
20
+ The README now describes annotations as part of the default first-party extension baseline, adds a short annotations section, updates the explicit extension-list example, and links to the new documentation hub.
21
+
3
22
  ## 1.2.0
4
23
 
5
24
  ### Minor Changes
package/README.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  A framework-agnostic TypeScript chessboard platform with real chess interaction built in and an extension-driven architecture.
10
10
 
11
- ## Try it live
11
+ ## Try it live (including annotations)
12
12
 
13
13
  - [Play a chess.js game](https://mirasen.io/chessboard/examples/chessjs.html)
14
14
  - [Try the promotion flow](https://mirasen.io/chessboard/examples/promotion.html)
@@ -16,7 +16,7 @@ A framework-agnostic TypeScript chessboard platform with real chess interaction
16
16
 
17
17
  ## Using React?
18
18
 
19
- Use [`@mirasen/react-chessboard`](https://www.npmjs.com/package/@mirasen/react-chessboard) for a React component with the same built-in interaction, promotion, animation, and chess.js integration.
19
+ Use [`@mirasen/react-chessboard`](https://www.npmjs.com/package/@mirasen/react-chessboard) for a React component with the same built-in interaction, annotations, promotion, animation, and chess.js integration.
20
20
 
21
21
  ## Why this exists
22
22
 
@@ -36,7 +36,7 @@ This is not just a board renderer. It is a chessboard platform designed for real
36
36
 
37
37
  ## What you get out of the box
38
38
 
39
- The default first-party extension baseline includes rendering, events, selection, active target feedback, legal move hints, last move feedback, promotion UI, and optional auto-promotion.
39
+ The default first-party extension baseline includes rendering, events, selection, active target feedback, legal move hints, last move feedback, annotations, promotion UI, and optional auto-promotion.
40
40
 
41
41
  - `renderer` — the first-party rendering extension that validates the same extension architecture used for board features
42
42
  - `events`
@@ -44,16 +44,17 @@ The default first-party extension baseline includes rendering, events, selection
44
44
  - `activeTarget`
45
45
  - `legalMoves`
46
46
  - `lastMove`
47
+ - `annotations`
47
48
  - `promotion`
48
49
  - `autoPromote`
49
50
 
50
51
  The package also includes `chess.js` adapter helpers for connecting legal destinations, UI moves, external moves, promotion, castling, and en passant without writing special-move glue code by hand.
51
52
 
52
- That means the board already covers a meaningful baseline chess UX instead of stopping at “draw squares and pieces”.
53
+ That means the board already covers a meaningful baseline chess UX instead of stopping at “draw squares and pieces”: users can move pieces, see legal targets, promote naturally, animate state changes, and draw circles and arrows without rebuilding common board behavior in app code.
53
54
 
54
55
  ### Built-in chessboard behavior
55
56
 
56
- Mirasen Chessboard provides a complete modern interaction and visual baseline out of the box: selection, deselection, reselection, drag-to-move, release targeting, legal destinations, promotion, auto-promotion, and state-diff animation.
57
+ Mirasen Chessboard provides a complete modern interaction and visual baseline out of the box: selection, deselection, reselection, drag-to-move, release targeting, legal destinations, circles and arrows, promotion, auto-promotion, and state-diff animation.
57
58
 
58
59
  Moves are resolved on release rather than committed immediately on press, giving users a more forgiving interaction flow. Because animation is driven by board-state transitions, pieces can move, appear, disappear, promote, castle, or return smoothly without app-level rendering glue code.
59
60
 
@@ -62,6 +63,7 @@ Rules and legality still belong to your game layer. Use the built-in `chess.js`
62
63
  ## Highlights
63
64
 
64
65
  - Real built-in chess interaction
66
+ - Built-in circles and arrows with live add/remove previews
65
67
  - **Easy game/rules integration** — connect your own game model, or use the built-in `chess.js` adapter
66
68
  - Works on desktop and mobile out of the box, with pointer-based mouse and touch interaction
67
69
  - State-diff animation beyond simple move events
@@ -104,7 +106,7 @@ board.setMovability({
104
106
 
105
107
  ### Connect to chess.js
106
108
 
107
- `@mirasen/chessboard` owns board interaction, rendering, promotion UI, and animation.
109
+ `@mirasen/chessboard` owns board interaction, rendering, annotations, promotion UI, and animation.
108
110
  Your game/rules layer owns legality and game state.
109
111
 
110
112
  For `chess.js`, use the built-in adapter:
@@ -193,7 +195,7 @@ The adapter exposes three small conversion helpers:
193
195
  This keeps the boundary explicit:
194
196
 
195
197
  - `chess.js` decides which moves are legal.
196
- - The board handles interaction, legal targets, promotion UI, castling/en-passant board updates, and animation.
198
+ - The board handles interaction, legal targets, annotations, promotion UI, castling/en-passant board updates, and animation.
197
199
  - User moves flow from the board into `chess.js`.
198
200
  - External moves flow from `chess.js` back into the board.
199
201
 
@@ -237,6 +239,16 @@ const board = createBoard({
237
239
  board.extensions.autoPromote.toQueen = true;
238
240
  ```
239
241
 
242
+ ### Annotations
243
+
244
+ The default extension baseline includes built-in board annotations.
245
+
246
+ Users can draw circles and arrows directly on the board. Desktop users can right-click to annotate by default, while touch or mobile-style UIs can switch annotation drawing to the primary pointer button with `drawButton`.
247
+
248
+ Annotation gestures show live previews before commit. Repeating the same-color circle or arrow removes it, with a low-opacity remove preview so users can see that release will delete the existing annotation.
249
+
250
+ Color selection can come from keyboard modifiers, or be forced through `drawModifier` for on-screen controls.
251
+
240
252
  ### Movability modes
241
253
 
242
254
  Movability controls how the board accepts user-initiated moves.
@@ -251,14 +263,44 @@ Most users can rely on the default first-party extension baseline. Use an explic
251
263
 
252
264
  ```ts
253
265
  import { createBoard, type Chessboard, type ChessboardExtensionInput } from '@mirasen/chessboard';
266
+ import { builtInExtensionFactoryMap } from '@mirasen/chessboard/extensions';
267
+
268
+ const pieceUrls = {
269
+ wK: '/pieces/wK.svg',
270
+ wQ: '/pieces/wQ.svg',
271
+ wR: '/pieces/wR.svg',
272
+ wB: '/pieces/wB.svg',
273
+ wN: '/pieces/wN.svg',
274
+ wP: '/pieces/wP.svg',
275
+ bK: '/pieces/bK.svg',
276
+ bQ: '/pieces/bQ.svg',
277
+ bR: '/pieces/bR.svg',
278
+ bB: '/pieces/bB.svg',
279
+ bN: '/pieces/bN.svg',
280
+ bP: '/pieces/bP.svg'
281
+ };
254
282
 
255
283
  const extensionList = [
256
- // Always add renderer first, otherwise nothing will be rendered
257
- 'renderer',
284
+ // Always add renderer first, otherwise nothing will be rendered.
285
+ {
286
+ builtin: 'renderer',
287
+ options: {
288
+ pieceUrls,
289
+ colors: {
290
+ board: {
291
+ light: '#d7dde5',
292
+ dark: '#707a8a'
293
+ }
294
+ }
295
+ }
296
+ },
258
297
  'lastMove',
259
- // Keep autoPromote before promotion, otherwise promotion may defer the move first
298
+ 'annotations',
299
+ // Keep autoPromote before promotion, otherwise promotion may defer the move first.
260
300
  'autoPromote',
261
- 'promotion'
301
+ builtInExtensionFactoryMap.promotion({
302
+ pieceUrls
303
+ })
262
304
  // customExtensionDefinition
263
305
  ] as const satisfies readonly ChessboardExtensionInput[];
264
306
  let board: Chessboard<typeof extensionList> | null = null;
@@ -275,12 +317,18 @@ board = createBoard({
275
317
  });
276
318
  ```
277
319
 
320
+ 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.
321
+
278
322
  ### Default visual identity
279
323
 
280
324
  The default first-party extension baseline includes a subtle Mirasen board watermark.
281
325
 
282
326
  If you want full control over the visual baseline, use an explicit extension list and omit the `watermark` extension.
283
327
 
328
+ ## Documentation
329
+
330
+ See [Documentation](./documentation.md) for the documentation hub.
331
+
284
332
  ## Architecture
285
333
 
286
334
  `@mirasen/chessboard` is built around explicit boundaries:
@@ -304,7 +352,7 @@ A board that only renders pieces and leaves everything else to app code often fo
304
352
 
305
353
  A board that handles everything internally without clean boundaries becomes difficult to evolve, customize, or extend.
306
354
 
307
- ### Opt out, not build up
355
+ ### Opt out, don’t build up, focus on your app
308
356
 
309
357
  `@mirasen/chessboard` aims for a middle path:
310
358
 
@@ -312,7 +360,7 @@ A board that handles everything internally without clean boundaries becomes diff
312
360
  - clean internal architecture
313
361
  - extension-driven feature growth
314
362
 
315
- Common chessboard behavior is included by default: rendering, interaction, selection, legal target feedback, promotion, and animation. You start from a working interaction baseline and remove or replace extensions only when you want less or need something different.
363
+ Common chessboard behavior is included by default: rendering, interaction, selection, legal target feedback, annotations, promotion, and animation. You start from a working interaction baseline, remove or replace extensions only when you need something different, and keep your own code focused on your application domain.
316
364
 
317
365
  ## Project direction
318
366
 
@@ -9,7 +9,8 @@ export function createExtensionRuntimeSurfaceEvents(getInternalState) {
9
9
  },
10
10
  unsubscribeEvent(type) {
11
11
  const internalState = getInternalState();
12
- assert(internalState.inputAdapter, 'Input adapter not available in the current runtime state');
12
+ if (!internalState.inputAdapter)
13
+ return;
13
14
  if (!NEED_EVENT_TYPES.has(type)) {
14
15
  internalState.inputAdapter.unsubscribeEvent(type);
15
16
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mirasen/chessboard",
3
3
  "description": "Framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
4
- "version": "1.2.0",
4
+ "version": "1.2.2",
5
5
  "license": "MIT",
6
6
  "author": {
7
7
  "name": "Mirasen",
@@ -54,6 +54,7 @@
54
54
  "scripts": {
55
55
  "build": "rimraf ./dist && tsc --project tsconfig.json && npm run prepack",
56
56
  "build:release": "rimraf ./dist && tsc --project tsconfig-release.json && npm run prepack",
57
+ "prepare": "bash ./scripts/npm-link.sh",
57
58
  "prepack": "publint",
58
59
  "format": "prettier --write .",
59
60
  "lint": "prettier --check . && eslint .",