@mirasen/chessboard 1.3.5 → 1.5.0

package/CHANGELOG.md

@@ -1,6 +1,25 @@
 # @mirasen/chessboard
 
-## 1.3.5
+## 1.5.0
+
+### Minor Changes
+
+- 5c12439: Extend the check extension's `square` input to accept a color (`ColorInput`) in addition to a `SquareString`. When a color is provided, the highlight is placed on that color's king square.
+
+## 1.4.0
+
+### Minor Changes
+
+- 63415ac: feat: add first-party `check` extension for king-in-check square highlighting
+
+  Adds a built-in `check` extension that renders a red radial glow on a consumer-supplied square to indicate a king in check. The board remains rules-agnostic — the highlighted square is entirely determined by the caller.
+
+  ```ts
+  board.extensions.check.square = 'e1'; // highlight
+  board.extensions.check.square = null; // clear
+  ```
+
+  The extension is included in the default built-in set, so no extra registration is needed. The default visual is a red radial gradient (center-to-transparent) rendered below pieces in the `underPieces` slot. Color and opacity are configurable via `createCheck({ color, opacity })`.
 
 ### Patch Changes
 
@@ -18,19 +37,23 @@
 - 4a6f1d3: dependabot: directory '/', update eslint
 - 4a6f1d3: dependabot: directory '/', update publint
 - 4a6f1d3: dependabot: directory '/', update svelte-check
-- 4a6f1d3: dependabot: directory '/', update typescript-eslint
-- 4a6f1d3: dependabot: directory '/', update vite
+- 2c8eea7: dependabot: directory '/', update typescript-eslint
+- 2c8eea7: dependabot: directory '/', update vite
 - 6bf7293: dependabot: directory '/', update es-toolkit
 - 6bf7293: dependabot: directory '/', update eslint-plugin-svelte
-- 6bf7293: dependabot: directory '/', update globals
-- 6bf7293: dependabot: directory '/', update svelte-check
+- 2c8eea7: dependabot: directory '/', update globals
+- 4a6f1d3: dependabot: directory '/', update svelte-check
 - 6bf7293: dependabot: directory '/', update svelte
-- ae1574c: dependabot: directory '/', update @sveltejs/kit
+- 2c8eea7: dependabot: directory '/', update @sveltejs/kit
 - ae1574c: dependabot: directory '/', update @vitest/browser-playwright
-- ae1574c: dependabot: directory '/', update eslint
-- ae1574c: dependabot: directory '/', update publint
-- ae1574c: dependabot: directory '/', update svelte
-- ae1574c: dependabot: directory '/', update vite
+- 4a6f1d3: dependabot: directory '/', update eslint
+- 4a6f1d3: dependabot: directory '/', update publint
+- 6bf7293: dependabot: directory '/', update svelte
+- 2c8eea7: dependabot: directory '/', update vite
+- dee1c04: dependabot: directory '/', update @changesets/cli from 2.31.1 to 3.0.1
+- 4a6f1d3: dependabot: directory '/', update @types/node
+- 4a6f1d3: dependabot: directory '/', update eslint
+- 2c8eea7: dependabot: directory '/', update typescript-eslint
 
 ## 1.3.4
 

package/README.md

@@ -45,7 +45,7 @@ This is not just a board renderer. It is a chessboard platform designed for real
 
 ## What you get out of the box
 
-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.
+The default first-party extension baseline includes rendering, events, selection, active target feedback, legal move hints, last move feedback, check square highlight, annotations, promotion UI, and optional auto-promotion.
 
 - `renderer` — the first-party rendering extension that validates the same extension architecture used for board features
 - `events`
@@ -53,6 +53,7 @@ The default first-party extension baseline includes rendering, events, selection
 - `activeTarget`
 - `legalMoves`
 - `lastMove`
+- `check`
 - `annotations`
 - `promotion`
 - `autoPromote`

package/dist/extensions/first-party/check/factory.d.ts

@@ -0,0 +1,2 @@
+import { CheckDefinition, CheckInitConfig } from './types.js';
+export declare function createCheck(config?: CheckInitConfig): CheckDefinition;

package/dist/extensions/first-party/check/factory.js

@@ -0,0 +1,168 @@
+import assert from '@ktarmyshov/assert';
+import { toMerged } from 'es-toolkit';
+import { createSvgElement, updateSvgElementAttributes } from '../../../render/svg/helpers.js';
+import { isColorInput, isSquareString } from '../../../state/board/check.js';
+import { normalizeColor, normalizeSquare } from '../../../state/board/normalize.js';
+import { toPieceCode } from '../../../state/board/piece.js';
+import { SQUARE_COUNT } from '../../../state/board/types/internal.js';
+import { isUpdateContextRenderable } from '../../types/context/update.js';
+import { extensionCreateInternalBase, extensionDestroyBase, extensionMountBase, extensionUnmountBase } from '../common/helpers.js';
+import { markHighlightDirtyAndRequestRender } from './invalidation.js';
+import { DEFAULT_CONFIG, EXTENSION_ID, EXTENSION_SLOTS, GRADIENT_STOPS } from './types.js';
+export function createCheck(config = {}) {
+    const mergedConfig = toMerged(DEFAULT_CONFIG, config);
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance(options) {
+            return createCheckInstance(options, mergedConfig);
+        }
+    };
+}
+function createCheckInternal(options, config) {
+    return {
+        ...extensionCreateInternalBase(options),
+        square: null,
+        inputSquare: null,
+        svgRect: null,
+        svgGradient: null,
+        runtimeSurface: options.runtimeSurface,
+        config
+    };
+}
+function extensionClean(state) {
+    state.svgRect = null;
+    state.svgGradient = null;
+}
+function createCheckInstancePublic(state) {
+    return {
+        get square() {
+            return state.inputSquare;
+        },
+        set square(value) {
+            let next;
+            if (value === null) {
+                next = null;
+            }
+            else if (isSquareString(value)) {
+                next = normalizeSquare(value);
+            }
+            else if (isColorInput(value)) {
+                next = findKing(state, value);
+            }
+            else {
+                throw new TypeError(`Invalid check square: ${String(value)}`);
+            }
+            state.inputSquare = value;
+            if (next === state.square) {
+                return; // no-op: same square (or both null)
+            }
+            state.square = next;
+            markHighlightDirtyAndRequestRender(state);
+        }
+    };
+}
+function findKing(state, color) {
+    const snapshot = state.runtimeSurface.commands.getSnapshot();
+    const pieces = snapshot.state.board.pieces;
+    const colorCode = normalizeColor(color);
+    const kingPieceCode = toPieceCode(6 /* RoleCode.King */, colorCode);
+    for (let sq = 0; sq < SQUARE_COUNT; sq++) {
+        const piece = pieces[sq];
+        if (piece === kingPieceCode) {
+            return sq;
+        }
+    }
+    throw new Error("King of color '" + color + "' not found");
+}
+function removeHighlight(state) {
+    if (state.svgRect !== null) {
+        state.svgRect.remove();
+        state.svgRect = null;
+        assert(state.svgGradient, 'svgGradient should be available if svgRect is available');
+        state.svgGradient.remove();
+        state.svgGradient = null;
+    }
+}
+function gradientId(state) {
+    return state.svgIds.makeId(EXTENSION_ID, 'highlight-gradient');
+}
+function createGradient(state) {
+    assert(state.slotRoots, 'Slot roots should be available when render is called');
+    const gradient = createSvgElement(state.slotRoots.defs, 'radialGradient', {
+        'data-chessboard-id': 'check-highlight-gradient',
+        id: gradientId(state),
+        cx: '0.5',
+        cy: '0.5',
+        r: '0.707'
+    });
+    for (const stop of GRADIENT_STOPS) {
+        createSvgElement(gradient, 'stop', {
+            'data-chessboard-id': `check-highlight-gradient-stop-${stop.offset}`,
+            offset: stop.offset,
+            'stop-color': state.config.color,
+            'stop-opacity': (Number(state.config.opacity) * stop.opacityRatio).toString()
+        });
+    }
+    return gradient;
+}
+function createCheckInstance(options, config) {
+    const internalState = createCheckInternal(options, config);
+    const publicInterface = createCheckInstancePublic(internalState);
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMountBase(internalState, env.slotRoots);
+        },
+        onUpdate(context) {
+            const needsRender = context.mutation.hasMutation({ causes: ['layout.refreshGeometry'] }) &&
+                isUpdateContextRenderable(context);
+            if (!needsRender) {
+                return; // no-op
+            }
+            context.invalidation.markDirty(1 /* DirtyLayer.Highlight */);
+        },
+        render(context) {
+            assert(context.invalidation.dirtyLayers !== 0, 'Render should only be called when there are dirty layers');
+            if (internalState.square === null) {
+                removeHighlight(internalState);
+                return;
+            }
+            const geometry = context.currentFrame.layout.geometry;
+            const rect = geometry.getSquareRect(internalState.square);
+            const rectAttributes = {
+                x: rect.x.toString(),
+                y: rect.y.toString(),
+                width: rect.width.toString(),
+                height: rect.height.toString(),
+                fill: `url(#${gradientId(internalState)})`
+            };
+            if (internalState.svgRect === null) {
+                // The gradient is static (config-driven) and created exactly once,
+                // alongside the rect. It is never updated on subsequent renders and is
+                // removed together with the rect so <defs> keeps no orphans.
+                internalState.svgGradient = createGradient(internalState);
+                assert(internalState.slotRoots, 'Slot roots should be available when render is called');
+                internalState.svgRect = createSvgElement(internalState.slotRoots.underPieces, 'rect', {
+                    'data-chessboard-id': 'check-square-highlight',
+                    ...rectAttributes
+                });
+            }
+            else {
+                // Square changed or geometry refreshed: only the rect moves.
+                updateSvgElementAttributes(internalState.svgRect, rectAttributes);
+            }
+        },
+        unmount() {
+            extensionUnmountBase(internalState);
+            extensionClean(internalState);
+        },
+        destroy() {
+            extensionDestroyBase(internalState);
+            extensionClean(internalState);
+        },
+        getPublic() {
+            return publicInterface;
+        }
+    };
+}

package/dist/extensions/first-party/check/invalidation.d.ts

@@ -0,0 +1,2 @@
+import type { CheckInstanceInternal } from './types.js';
+export declare function markHighlightDirtyAndRequestRender(state: CheckInstanceInternal): void;

package/dist/extensions/first-party/check/invalidation.js

@@ -0,0 +1,4 @@
+export function markHighlightDirtyAndRequestRender(state) {
+    state.runtimeSurface.invalidation.markDirty(1 /* DirtyLayer.Highlight */);
+    state.runtimeSurface.commands.requestRender({ state: true });
+}

package/dist/extensions/first-party/check/types.d.ts

@@ -0,0 +1,41 @@
+import { PartialDeep } from 'type-fest';
+import type { ColorInput, SquareString } from '../../../state/board/types/input.js';
+import type { Square } from '../../../state/board/types/internal.js';
+import { ExtensionDefinition, ExtensionInstance } from '../../types/extension.js';
+import type { ExtensionRuntimeSurface } from '../../types/surface/main.js';
+import { ExtensionInternalBase, OpaqueColor } from '../common/types.js';
+export declare const EXTENSION_SLOTS: readonly ["defs", "underPieces"];
+export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
+export declare const EXTENSION_ID: "check";
+export type CheckConfig = OpaqueColor;
+export declare const DEFAULT_CONFIG: CheckConfig;
+export declare const GRADIENT_STOPS: readonly [{
+    readonly offset: "0%";
+    readonly opacityRatio: 1;
+}, {
+    readonly offset: "25%";
+    readonly opacityRatio: 1;
+}, {
+    readonly offset: "89%";
+    readonly opacityRatio: 0;
+}, {
+    readonly offset: "100%";
+    readonly opacityRatio: 0;
+}];
+export type CheckInitConfig = PartialDeep<CheckConfig>;
+export type CheckPublic = {
+    square: SquareString | ColorInput | null;
+};
+export type CheckDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, CheckPublic>;
+export type CheckInstance = ExtensionInstance<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, CheckPublic>;
+export interface CheckInstanceInternal extends ExtensionInternalBase<ExtensionSlotsType> {
+    square: Square | null;
+    inputSquare: SquareString | ColorInput | null;
+    svgRect: SVGRectElement | null;
+    svgGradient: SVGRadialGradientElement | null;
+    readonly runtimeSurface: ExtensionRuntimeSurface;
+    readonly config: CheckConfig;
+}
+export declare const enum DirtyLayer {
+    Highlight = 1
+}

package/dist/extensions/first-party/check/types.js

@@ -0,0 +1,18 @@
+export const EXTENSION_SLOTS = ['defs', 'underPieces'];
+export const EXTENSION_ID = 'check';
+// A recognizable check glow: a solid red core fading to transparent toward the
+// square edges. The center color/opacity are configurable; the edge fade is
+// fixed by GRADIENT_STOPS below.
+export const DEFAULT_CONFIG = {
+    color: 'rgb(255, 0, 0)',
+    opacity: 1
+};
+// Radial gradient stops with fixed offsets. Each stop's stop-color comes from
+// config.color; stop-opacity multiplies config.opacity by the ratio here so the
+// glow is opaque at the center and transparent at the edges.
+export const GRADIENT_STOPS = [
+    { offset: '0%', opacityRatio: 1 },
+    { offset: '25%', opacityRatio: 1 },
+    { offset: '89%', opacityRatio: 0 },
+    { offset: '100%', opacityRatio: 0 }
+];

package/dist/extensions/types/wrapper.d.ts

@@ -2,6 +2,7 @@ import { createActiveTarget } from '../first-party/active-target/factory.js';
 import { createAnnotations } from '../first-party/annotations/factory.js';
 import { createAutoPromote } from '../first-party/auto-promote/factory.js';
 import { createBoardEvents } from '../first-party/board-events/factory.js';
+import { createCheck } from '../first-party/check/factory.js';
 import { createLastMove } from '../first-party/last-move/factory.js';
 import { createLegalMoves } from '../first-party/legal-moves/factory.js';
 import { createMainRenderer } from '../first-party/main-renderer/factory.js';
@@ -19,10 +20,11 @@ export declare const builtInExtensionFactoryMap: {
     autoPromote: typeof createAutoPromote;
     promotion: typeof createPromotion;
     annotations: typeof createAnnotations;
+    check: typeof createCheck;
 };
 export type BuiltInExtensionId = keyof typeof builtInExtensionFactoryMap;
 export type BuiltInExtensionDefinitionMap = {
     [Id in BuiltInExtensionId]: ReturnType<(typeof builtInExtensionFactoryMap)[Id]>;
 };
-export declare const DefaultBuiltinChessboardExtensions: readonly ["renderer", "watermark", "selectedSquare", "lastMove", "activeTarget", "legalMoves", "events", "autoPromote", "promotion", "annotations"];
+export declare const DefaultBuiltinChessboardExtensions: readonly ["renderer", "watermark", "selectedSquare", "lastMove", "activeTarget", "legalMoves", "events", "autoPromote", "promotion", "annotations", "check"];
 export type DefaultBuiltinChessboardExtensions = typeof DefaultBuiltinChessboardExtensions;

package/dist/extensions/types/wrapper.js

@@ -6,6 +6,8 @@ import { createAutoPromote } from '../first-party/auto-promote/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_AUTO_PROMOTE } from '../first-party/auto-promote/types.js';
 import { createBoardEvents } from '../first-party/board-events/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_BOARD_EVENTS } from '../first-party/board-events/types.js';
+import { createCheck } from '../first-party/check/factory.js';
+import { EXTENSION_ID as EXTENSION_ID_CHECK } from '../first-party/check/types.js';
 import { createLastMove } from '../first-party/last-move/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_LAST_MOVE } from '../first-party/last-move/types.js';
 import { createLegalMoves } from '../first-party/legal-moves/factory.js';
@@ -28,7 +30,8 @@ export const builtInExtensionFactoryMap = {
     [EXTENSION_ID_BOARD_EVENTS]: createBoardEvents,
     [EXTENSION_ID_AUTO_PROMOTE]: createAutoPromote,
     [EXTENSION_ID_PROMOTION]: createPromotion,
-    [EXTENSION_ID_ANNOTATIONS]: createAnnotations
+    [EXTENSION_ID_ANNOTATIONS]: createAnnotations,
+    [EXTENSION_ID_CHECK]: createCheck
 };
 export const DefaultBuiltinChessboardExtensions = [
     EXTENSION_ID_RENDERER,
@@ -40,5 +43,6 @@ export const DefaultBuiltinChessboardExtensions = [
     EXTENSION_ID_BOARD_EVENTS,
     EXTENSION_ID_AUTO_PROMOTE,
     EXTENSION_ID_PROMOTION,
-    EXTENSION_ID_ANNOTATIONS
+    EXTENSION_ID_ANNOTATIONS,
+    EXTENSION_ID_CHECK
 ];

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 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 { ColorInput, MoveRequestInput, PiecePositionRecordString, PositionInput, SquareString } 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';

package/dist/state/board/check.d.ts

@@ -1,4 +1,4 @@
-import { Color, ColorShort, MoveRequestInput, Piece, PiecePositionInput, PiecePositionRecord, PiecePositionRecordShort, PiecePositionRecordString, PieceShort, PieceString, Role, RoleShort, SquareString } from './types/input.js';
+import { Color, ColorInput, ColorShort, MoveRequestInput, Piece, PiecePositionInput, PiecePositionRecord, PiecePositionRecordShort, PiecePositionRecordString, PieceShort, PieceString, Role, RoleShort, SquareString } from './types/input.js';
 import { EmptyPieceCode, MoveRequest, NonEmptyPieceCode, PieceCode, PiecePositionSnapshot, PositionSnapshot, RolePromotionCode, Square, SquareFile, SquareRank } from './types/internal.js';
 import type { BoardStateSnapshot } from './types/main.js';
 export declare function isWhitePieceCode(code: NonEmptyPieceCode): boolean;
@@ -17,6 +17,7 @@ export declare function isPieceString(value: unknown): value is PieceString;
 export declare function isSquareString(value: unknown): value is SquareString;
 export declare function isPositionMapString(pos: PiecePositionInput): pos is PiecePositionRecordString;
 export declare function isColorShort(value: unknown): value is ColorShort;
+export declare function isColorInput(value: unknown): value is ColorInput;
 export declare function isRoleShort(value: unknown): value is RoleShort;
 export declare function isPieceShort(value: unknown): value is PieceShort;
 export declare function isPositionMapShort(pos: PiecePositionInput): pos is PiecePositionRecordShort;

package/dist/state/board/check.js

@@ -74,6 +74,9 @@ export function isPositionMapString(pos) {
 export function isColorShort(value) {
     return value === 'w' || value === 'b';
 }
+export function isColorInput(value) {
+    return isColor(value) || isColorShort(value);
+}
 export function isRoleShort(value) {
     return (value === 'K' ||
         value === 'Q' ||

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@mirasen/chessboard",
 	"description": "Production-grade framework-agnostic TypeScript chessboard platform with real chess interaction built in.",
-	"version": "1.3.5",
+	"version": "1.5.0",
 	"license": "MIT",
 	"author": {
 		"name": "Mirasen"
@@ -82,7 +82,7 @@
 		"!benchmarks"
 	],
 	"devDependencies": {
-		"@changesets/cli": "^2.28.1",
+		"@changesets/cli": "^3.0.1",
 		"@eslint/compat": "^2.0.2",
 		"@eslint/js": "^10.0.1",
 		"@types/node": "^26.0.1",