@mirasen/chessboard 0.1.0

package/dist/extensions/first-party/last-move/factory.js

@@ -0,0 +1,106 @@
+import assert from '@ktarmyshov/assert';
+import { toMerged } from 'es-toolkit';
+import { createSvgElement, updateElementAttributes } from '../../../render/svg/helpers';
+import { isUpdateContextRenderable } from '../../types/context/update';
+import { extensionCreateInternalBase, extensionDestroy, extensionMount, extensionUnmount } from '../common/helpers';
+import { DEFAULT_CONFIG, EXTENSION_ID, EXTENSION_SLOTS } from './types';
+export function createLastMove(config = {}) {
+    const mergedConfig = toMerged(DEFAULT_CONFIG, config);
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance() {
+            return createLastMoveInstance(mergedConfig);
+        }
+    };
+}
+function createLastMoveInternal(config) {
+    return {
+        ...extensionCreateInternalBase(),
+        svgRectFrom: null,
+        svgRectTo: null,
+        config
+    };
+}
+function extensionClean(state) {
+    state.svgRectFrom = null;
+    state.svgRectTo = null;
+}
+function createLastMoveInstance(config) {
+    const internalState = createLastMoveInternal(config);
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMount(internalState, env.slotRoots);
+        },
+        onUpdate(context) {
+            const needsRender = context.mutation.hasMutation({
+                causes: ['state.change.setLastMove', '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');
+            const fromSq = context.currentFrame.state.change.lastMove?.from;
+            const toSq = context.currentFrame.state.change.lastMove?.to;
+            if (fromSq === undefined || fromSq === null || toSq === undefined || toSq === null) {
+                if (internalState.svgRectFrom !== null) {
+                    internalState.svgRectFrom.remove();
+                    internalState.svgRectFrom = null;
+                    assert(internalState.svgRectTo, 'svgRectTo should be available if svgRectFrom is available');
+                    internalState.svgRectTo.remove();
+                    internalState.svgRectTo = null;
+                }
+                return;
+            }
+            const geometry = context.currentFrame.layout.geometry;
+            const rFrom = geometry.squareRect(fromSq);
+            const rTo = geometry.squareRect(toSq);
+            const rectFromAttributes = {
+                x: rFrom.x.toString(),
+                y: rFrom.y.toString(),
+                width: rFrom.size.toString(),
+                height: rFrom.size.toString(),
+                fill: internalState.config.color,
+                'fill-opacity': internalState.config.opacity.toString(),
+                'shape-rendering': 'crispEdges'
+            };
+            const rectToAttributes = {
+                x: rTo.x.toString(),
+                y: rTo.y.toString(),
+                width: rTo.size.toString(),
+                height: rTo.size.toString(),
+                fill: internalState.config.color,
+                'fill-opacity': internalState.config.opacity.toString(),
+                'shape-rendering': 'crispEdges'
+            };
+            if (internalState.svgRectFrom === null) {
+                assert(internalState.slotRoots, 'Slot roots should be available when render is called');
+                internalState.svgRectFrom = createSvgElement(internalState.slotRoots.underPieces, 'rect', {
+                    'data-chessboard-id': 'last-move-square-from-highlight',
+                    ...rectFromAttributes
+                });
+                internalState.svgRectTo = createSvgElement(internalState.slotRoots.underPieces, 'rect', {
+                    'data-chessboard-id': 'last-move-square-to-highlight',
+                    ...rectToAttributes
+                });
+            }
+            else {
+                updateElementAttributes(internalState.svgRectFrom, rectFromAttributes);
+                assert(internalState.svgRectTo, 'svgRectTo should be available if svgRectFrom is available');
+                updateElementAttributes(internalState.svgRectTo, rectToAttributes);
+            }
+        },
+        unmount() {
+            extensionUnmount(internalState);
+            extensionClean(internalState);
+        },
+        destroy() {
+            extensionDestroy(internalState);
+            extensionClean(internalState);
+        }
+    };
+}

package/dist/extensions/first-party/last-move/types.d.ts

@@ -0,0 +1,19 @@
+import { PartialDeep } from 'type-fest';
+import { ExtensionDefinition, ExtensionInstance } from '../../types/extension';
+import { ExtensionInternal, OpaqueColor } from '../common/types';
+export declare const EXTENSION_SLOTS: readonly ["underPieces"];
+export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
+export declare const EXTENSION_ID: "lastMove";
+export type LastMoveConfig = OpaqueColor;
+export declare const DEFAULT_CONFIG: LastMoveConfig;
+export type LastMoveInitConfig = PartialDeep<LastMoveConfig>;
+export type LastMoveDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export type LastMoveInstance = ExtensionInstance<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export interface LastMoveInstanceInternal extends ExtensionInternal<ExtensionSlotsType> {
+    svgRectFrom: SVGRectElement | null;
+    svgRectTo: SVGRectElement | null;
+    readonly config: LastMoveConfig;
+}
+export declare const enum DirtyLayer {
+    Highlight = 1
+}

package/dist/extensions/first-party/last-move/types.js

@@ -0,0 +1,6 @@
+export const EXTENSION_SLOTS = ['underPieces'];
+export const EXTENSION_ID = 'lastMove';
+export const DEFAULT_CONFIG = {
+    color: 'rgba(255, 255, 0)',
+    opacity: 0.4
+};

package/dist/extensions/first-party/legal-moves/factory.d.ts

@@ -0,0 +1,2 @@
+import { LegalMovesDefinition, LegalMovesInitConfig } from './types';
+export declare function createLegalMoves(config?: LegalMovesInitConfig): LegalMovesDefinition;

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

@@ -0,0 +1,101 @@
+import assert from '@ktarmyshov/assert';
+import { toMerged } from 'es-toolkit';
+import { clearElementChildren, createSvgElement } from '../../../render/svg/helpers';
+import { isNonEmptyPieceCode } from '../../../state/board/check';
+import { fromPieceCode } from '../../../state/board/piece';
+import { isUpdateContextRenderable } from '../../types/context/update';
+import { extensionCreateInternalBase, extensionDestroy, extensionMount, extensionUnmount } from '../common/helpers';
+import { DEFAULT_CONFIG, EXTENSION_ID, EXTENSION_SLOTS } from './types';
+export function createLegalMoves(config = {}) {
+    const mergedConfig = toMerged(DEFAULT_CONFIG, config);
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance() {
+            return createLegalMovesInstance(mergedConfig);
+        }
+    };
+}
+function createLegalMovesInternal(config) {
+    return {
+        ...extensionCreateInternalBase(),
+        svgCircles: [],
+        config
+    };
+}
+function extensionClean(state) {
+    state.svgCircles = [];
+}
+function createLegalMovesInstance(config) {
+    const internalState = createLegalMovesInternal(config);
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMount(internalState, env.slotRoots);
+        },
+        onUpdate(context) {
+            const needsRender = context.mutation.hasMutation({
+                causes: ['layout.refreshGeometry'],
+                // we really need almost all: setDrag, updateTarget, clear, clearActive, setMovability, so just take all interaction mutations
+                prefixes: ['state.interaction.']
+            }) && 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');
+            assert(internalState.slotRoots, 'Slot roots should be available when render is called');
+            clearElementChildren(internalState.slotRoots.overPieces);
+            internalState.svgCircles = [];
+            const interaction = context.currentFrame.state.interaction;
+            const needsRender = interaction.movability.mode === 2 /* MovabilityModeCode.Strict */ &&
+                interaction.activeDestinations.size > 0 &&
+                interaction.selected !== null;
+            if (!needsRender) {
+                return; // no-op
+            }
+            const geometry = context.currentFrame.layout.geometry;
+            const commonAttributesEmpty = {
+                r: (geometry.squareSize * internalState.config.emptySquare.radiusRatio).toString(),
+                fill: internalState.config.emptySquare.color.color,
+                'fill-opacity': internalState.config.emptySquare.color.opacity.toString()
+            };
+            const commonAttributesCapture = {
+                r: (geometry.squareSize * internalState.config.captureTarget.radiusRatio).toString(),
+                stroke: internalState.config.captureTarget.color.color,
+                '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.squareRect(square);
+                const circleX = rect.x + geometry.squareSize / 2;
+                const circleY = rect.y + geometry.squareSize / 2;
+                const selectedPieceCode = context.currentFrame.state.board.pieces[interaction.selected.square];
+                const targetPieceCode = context.currentFrame.state.board.pieces[destination.to];
+                const isCapture = isNonEmptyPieceCode(targetPieceCode) &&
+                    fromPieceCode(targetPieceCode).color !== fromPieceCode(selectedPieceCode).color;
+                const attributes = {
+                    cx: circleX.toString(),
+                    cy: circleY.toString(),
+                    ...(!isCapture ? commonAttributesEmpty : commonAttributesCapture)
+                };
+                const circle = createSvgElement(internalState.slotRoots.overPieces, 'circle', {
+                    'data-chessboard-id': `legal-move-from-${square}-to-${destination.to}`,
+                    ...attributes
+                });
+                internalState.svgCircles.push(circle);
+            }
+        },
+        unmount() {
+            extensionUnmount(internalState);
+            extensionClean(internalState);
+        },
+        destroy() {
+            extensionDestroy(internalState);
+            extensionClean(internalState);
+        }
+    };
+}

package/dist/extensions/first-party/legal-moves/types.d.ts

@@ -0,0 +1,29 @@
+import { PartialDeep } from 'type-fest';
+import { ExtensionDefinition, ExtensionInstance } from '../../types/extension';
+import { ExtensionInternal, OpaqueColor } from '../common/types';
+export declare const EXTENSION_SLOTS: readonly ["overPieces"];
+export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
+export declare const EXTENSION_ID: "legalMoves";
+export interface LegalMovesConfig {
+    emptySquare: {
+        color: OpaqueColor;
+        radiusRatio: number;
+    };
+    captureTarget: {
+        color: OpaqueColor;
+        radiusRatio: number;
+        strokeWidthRatio: number;
+    };
+}
+export declare const DEFAULT_CONFIG: LegalMovesConfig;
+export type LegalMovesInitConfig = PartialDeep<LegalMovesConfig>;
+export type LegalMovesDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export type LegalMovesInstance = ExtensionInstance<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export interface LegalMovesInstanceInternal extends ExtensionInternal<ExtensionSlotsType> {
+    destroyed: boolean;
+    svgCircles: SVGCircleElement[];
+    readonly config: LegalMovesConfig;
+}
+export declare const enum DirtyLayer {
+    Highlight = 1
+}

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

@@ -0,0 +1,19 @@
+export const EXTENSION_SLOTS = ['overPieces'];
+export const EXTENSION_ID = 'legalMoves';
+export const DEFAULT_CONFIG = {
+    emptySquare: {
+        color: {
+            color: 'rgb(0, 0, 0)',
+            opacity: 0.14
+        },
+        radiusRatio: 0.125
+    }, // semi-transparent black
+    captureTarget: {
+        color: {
+            color: 'rgb(0, 0, 0)',
+            opacity: 0.14
+        },
+        radiusRatio: 0.45,
+        strokeWidthRatio: 0.1
+    }
+};

package/dist/extensions/first-party/main-renderer/animation/factory.d.ts

@@ -0,0 +1,4 @@
+import type { ExtensionRuntimeSurface } from '../../../types/surface/main';
+import type { PieceUrls } from '../types/internal';
+import type { MainRendererAnimation } from './types';
+export declare function createMainRendererAnimation(config: PieceUrls, runtimeSurface: ExtensionRuntimeSurface): MainRendererAnimation;

package/dist/extensions/first-party/main-renderer/animation/factory.js

@@ -0,0 +1,35 @@
+import { cleanAnimationPlan } from '../../../../animation/render/plan';
+import { getAnimationSuppressedSquares, rendererAnimationClean, rendererAnimationPrepare, rendererAnimationRender } from './render';
+import { rendererAnimationOnUpdate } from './update';
+export function createMainRendererAnimation(config, runtimeSurface) {
+    const state = {
+        config,
+        runtimeSurface,
+        entries: new Map()
+    };
+    return {
+        onUpdate(context) {
+            rendererAnimationOnUpdate(state, context);
+        },
+        prepareAnimation(context, layer) {
+            rendererAnimationPrepare(state, context, layer);
+        },
+        renderAnimation(context) {
+            rendererAnimationRender(state, context);
+        },
+        cleanAnimation(context) {
+            rendererAnimationClean(state, context);
+        },
+        getSuppressedSquares() {
+            return getAnimationSuppressedSquares(state);
+        },
+        unmount() {
+            for (const entry of state.entries.values()) {
+                if (entry.nodes !== null) {
+                    cleanAnimationPlan(entry.nodes);
+                }
+            }
+            state.entries.clear();
+        }
+    };
+}

package/dist/extensions/first-party/main-renderer/animation/render.d.ts

@@ -0,0 +1,7 @@
+import type { Square } from '../../../../state/board/types/internal';
+import type { ExtensionCleanAnimationContext, ExtensionPrepareAnimationContext, ExtensionRenderAnimationContext } from '../../../types/context/animation';
+import type { MainRendererAnimationInternal } from './types';
+export declare function rendererAnimationPrepare(state: MainRendererAnimationInternal, context: ExtensionPrepareAnimationContext, layer: SVGElement): void;
+export declare function rendererAnimationRender(state: MainRendererAnimationInternal, context: ExtensionRenderAnimationContext): void;
+export declare function rendererAnimationClean(state: MainRendererAnimationInternal, context: ExtensionCleanAnimationContext): void;
+export declare function getAnimationSuppressedSquares(state: MainRendererAnimationInternal): ReadonlySet<Square>;

package/dist/extensions/first-party/main-renderer/animation/render.js

@@ -0,0 +1,46 @@
+import { collectSuppressedSquares } from '../../../../animation/planner';
+import { cleanAnimationPlan, prepareAnimationPlan, renderAnimationPlan } from '../../../../animation/render/plan';
+const EMPTY_SQUARES = new Set();
+export function rendererAnimationPrepare(state, context, layer) {
+    for (const session of context.submittedSessions) {
+        const entry = state.entries.get(session.id);
+        if (entry && entry.nodes === null) {
+            entry.nodes = prepareAnimationPlan(entry.plan, context.currentFrame.layout.geometry, state.config, layer);
+        }
+    }
+}
+export function rendererAnimationRender(state, context) {
+    for (const session of context.activeSessions) {
+        const entry = state.entries.get(session.id);
+        if (entry && entry.nodes !== null) {
+            renderAnimationPlan(entry.nodes, context.currentFrame.layout.geometry, session.progress);
+        }
+    }
+}
+export function rendererAnimationClean(state, context) {
+    for (const session of context.finishedSessions) {
+        const entry = state.entries.get(session.id);
+        if (entry) {
+            if (entry.nodes !== null) {
+                cleanAnimationPlan(entry.nodes);
+            }
+            state.entries.delete(session.id);
+        }
+    }
+}
+export function getAnimationSuppressedSquares(state) {
+    // get submitted and active animation sessions
+    const sessions = state.runtimeSurface.animation.getAll(['submitted', 'active']);
+    if (sessions.length === 0)
+        return EMPTY_SQUARES;
+    const result = new Set();
+    for (const session of sessions) {
+        const entry = state.entries.get(session.id);
+        if (!entry)
+            continue;
+        for (const sq of collectSuppressedSquares(entry.plan.tracks)) {
+            result.add(sq);
+        }
+    }
+    return result;
+}

package/dist/extensions/first-party/main-renderer/animation/types.d.ts

@@ -0,0 +1,24 @@
+import { PreparedNodeMap } from '../../../../animation/render/types';
+import { AnimationPlan } from '../../../../animation/types';
+import { Square } from '../../../../state/board/types/internal';
+import { ExtensionCleanAnimationContext, ExtensionPrepareAnimationContext, ExtensionRenderAnimationContext } from '../../../types/context/animation';
+import { ExtensionUpdateContext } from '../../../types/context/update';
+import { ExtensionRuntimeSurface } from '../../../types/surface/main';
+import type { PieceUrls } from '../types/internal';
+export interface MainRendererAnimationEntry {
+    plan: AnimationPlan;
+    nodes: PreparedNodeMap | null;
+}
+export interface MainRendererAnimationInternal {
+    readonly config: PieceUrls;
+    readonly runtimeSurface: ExtensionRuntimeSurface;
+    readonly entries: Map<number, MainRendererAnimationEntry>;
+}
+export interface MainRendererAnimation {
+    onUpdate(context: ExtensionUpdateContext): void;
+    prepareAnimation(context: ExtensionPrepareAnimationContext, layer: SVGElement): void;
+    renderAnimation(context: ExtensionRenderAnimationContext): void;
+    cleanAnimation(context: ExtensionCleanAnimationContext): void;
+    getSuppressedSquares(): ReadonlySet<Square>;
+    unmount(): void;
+}

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

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

package/dist/extensions/first-party/main-renderer/animation/update.d.ts

@@ -0,0 +1,3 @@
+import { ExtensionUpdateContext } from '../../../types/context/update';
+import type { MainRendererAnimationInternal } from './types';
+export declare function rendererAnimationOnUpdate(state: MainRendererAnimationInternal, context: ExtensionUpdateContext): void;

package/dist/extensions/first-party/main-renderer/animation/update.js

@@ -0,0 +1,40 @@
+import { calculateAnimationPlan } from '../../../../animation/planner';
+import { piecePositionsEqual } from '../../../../state/board/check';
+import { isUpdateContextRenderable } from '../../../types/context/update';
+const DEFAULT_ANIMATION_DURATION_MS = 180;
+export function rendererAnimationOnUpdate(state, context) {
+    if (!isUpdateContextRenderable(context) ||
+        !context.mutation.hasMutation({ prefixes: ['state.board.'] }) ||
+        !context.previousFrame) {
+        return;
+    }
+    const previousBoard = context.previousFrame.state.board;
+    const currentBoard = context.currentFrame.state.board;
+    if (piecePositionsEqual(previousBoard, currentBoard))
+        return;
+    // On DropTo exclude the move that user did from the animation plan
+    const exclude = [];
+    if (context.mutation.hasMutation({ causes: ['runtime.interaction.dropTo'] }) &&
+        context.currentFrame.state.change.lastMove) {
+        exclude.push({
+            fromSq: context.currentFrame.state.change.lastMove.from,
+            toSq: context.currentFrame.state.change.lastMove.to
+        });
+        exclude.push({
+            sq: context.currentFrame.state.change.lastMove.from
+        });
+        exclude.push({
+            sq: context.currentFrame.state.change.lastMove.to
+        });
+    }
+    const plan = calculateAnimationPlan(previousBoard, currentBoard, 0 /* placeholder session id for draft plan */, {
+        exclude
+    });
+    if (plan.tracks.length === 0)
+        return;
+    const session = state.runtimeSurface.animation.submit({
+        duration: DEFAULT_ANIMATION_DURATION_MS
+    });
+    plan.sessionId = session.id;
+    state.entries.set(plan.sessionId, { plan, nodes: null });
+}

package/dist/extensions/first-party/main-renderer/board/factory.d.ts

@@ -0,0 +1,3 @@
+import { ConfigColorPair } from '../types/internal';
+import { MainRendererBoard } from './types';
+export declare function createMainRendererBoard(config: ConfigColorPair): MainRendererBoard;

package/dist/extensions/first-party/main-renderer/board/factory.js

@@ -0,0 +1,16 @@
+import { rendererBoardRender } from './render';
+import { rendererBoardOnUpdate } from './update';
+function createMainRendererBoardInternal(config) {
+    return { config };
+}
+export function createMainRendererBoard(config) {
+    const internalState = createMainRendererBoardInternal(config);
+    return {
+        onUpdate(context) {
+            rendererBoardOnUpdate(internalState, context);
+        },
+        render(context, layer) {
+            rendererBoardRender(internalState, context, layer);
+        }
+    };
+}

package/dist/extensions/first-party/main-renderer/board/render.d.ts

@@ -0,0 +1,3 @@
+import { ExtensionRenderContext } from '../../../types/context/render';
+import { MainRendererBoardInternal } from './types';
+export declare function rendererBoardRender(state: MainRendererBoardInternal, context: ExtensionRenderContext, layer: SVGElement): void;

package/dist/extensions/first-party/main-renderer/board/render.js

@@ -0,0 +1,24 @@
+import { clearElementChildren, createSvgElement, isLightSquare } from '../../../../render/svg/helpers';
+import { SQUARE_COUNT } from '../../../../state/board/types/internal';
+import { DirtyLayer } from '../types/extension';
+export function rendererBoardRender(state, context, layer) {
+    // Check if we need to render
+    if ((context.invalidation.dirtyLayers & DirtyLayer.Board) === 0) {
+        return; // no-op
+    }
+    const geometry = context.currentFrame.layout.geometry;
+    clearElementChildren(layer);
+    const { light, dark } = state.config;
+    for (let sq = 0; sq < SQUARE_COUNT; sq++) {
+        const r = geometry.squareRect(sq);
+        createSvgElement(layer, 'rect', {
+            'data-chessboard-id': `square-${sq}`,
+            x: r.x.toString(),
+            y: r.y.toString(),
+            width: r.size.toString(),
+            height: r.size.toString(),
+            fill: isLightSquare(sq) ? light : dark,
+            'shape-rendering': 'crispEdges'
+        });
+    }
+}

package/dist/extensions/first-party/main-renderer/board/types.d.ts

@@ -0,0 +1,10 @@
+import { ExtensionRenderContext } from '../../../types/context/render';
+import { ExtensionUpdateContext } from '../../../types/context/update';
+import { ConfigColorPair } from '../types/internal';
+export interface MainRendererBoardInternal {
+    readonly config: ConfigColorPair;
+}
+export interface MainRendererBoard {
+    onUpdate(context: ExtensionUpdateContext): void;
+    render(context: ExtensionRenderContext, layer: SVGElement): void;
+}

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

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

package/dist/extensions/first-party/main-renderer/board/update.d.ts

@@ -0,0 +1,3 @@
+import { ExtensionUpdateContext } from '../../../types/context/update';
+import { MainRendererBoardInternal } from './types';
+export declare function rendererBoardOnUpdate(_state: MainRendererBoardInternal, context: ExtensionUpdateContext): void;

package/dist/extensions/first-party/main-renderer/board/update.js

@@ -0,0 +1,27 @@
+import { isFrameRenderable } from '../../../types/basic/update';
+import { isUpdateContextRenderable } from '../../../types/context/update';
+import { DirtyLayer } from '../types/extension';
+export function rendererBoardOnUpdate(_state, context) {
+    // Check if geometry changed
+    const mutationSession = context.mutation;
+    if (!isUpdateContextRenderable(context) ||
+        !mutationSession.hasMutation({
+            causes: ['layout.refreshGeometry']
+        })) {
+        return; // no-op
+    }
+    // Ok geometry changed, let's check the board size
+    const currentGeometry = context.currentFrame.layout.geometry;
+    const currentBoardSize = currentGeometry.boardSize;
+    const currentOrientation = currentGeometry.orientation;
+    const previousGeometry = context.previousFrame && isFrameRenderable(context.previousFrame)
+        ? context.previousFrame.layout.geometry
+        : null;
+    const previousBoardSize = previousGeometry?.boardSize;
+    const previousOrientation = previousGeometry?.orientation;
+    const needsRender = currentBoardSize !== previousBoardSize || currentOrientation !== previousOrientation;
+    if (!needsRender) {
+        return; // no-op
+    }
+    context.invalidation.markDirty(DirtyLayer.Board | DirtyLayer.Coordinates);
+}

package/dist/extensions/first-party/main-renderer/coordinates/factory.d.ts

@@ -0,0 +1,3 @@
+import { ConfigColorPair } from '../types/internal';
+import { MainRendererCoordinates } from './types';
+export declare function createMainRendererCoordinates(config: ConfigColorPair): MainRendererCoordinates;

package/dist/extensions/first-party/main-renderer/coordinates/factory.js

@@ -0,0 +1,9 @@
+import { rendererCoordinatesRender } from './render';
+export function createMainRendererCoordinates(config) {
+    const internalState = { config };
+    return {
+        render(context, layer) {
+            rendererCoordinatesRender(internalState, context, layer);
+        }
+    };
+}

package/dist/extensions/first-party/main-renderer/coordinates/render.d.ts

@@ -0,0 +1,3 @@
+import { ExtensionRenderContext } from '../../../types/context/render';
+import { MainRendererCoordinatesInternal } from './types';
+export declare function rendererCoordinatesRender(state: MainRendererCoordinatesInternal, context: ExtensionRenderContext, layer: SVGElement): void;

package/dist/extensions/first-party/main-renderer/coordinates/render.js

@@ -0,0 +1,60 @@
+import { clearElementChildren, createSvgElement, isLightSquare } from '../../../../render/svg/helpers';
+import { squareOf } from '../../../../state/board/coords';
+import { DirtyLayer } from '../types/extension';
+function labelColorForSquare(sq, coordColors) {
+    return isLightSquare(sq) ? coordColors.dark : coordColors.light;
+}
+export function rendererCoordinatesRender(state, context, layer) {
+    if ((context.invalidation.dirtyLayers & DirtyLayer.Coordinates) === 0) {
+        return;
+    }
+    const geometry = context.currentFrame.layout.geometry;
+    clearElementChildren(layer);
+    const coords = state.config;
+    const fontSize = geometry.squareSize * 0.12;
+    const offset = 3;
+    // Rank labels on the visual left edge
+    const rankFile = geometry.orientation === 0 /* ColorCode.White */ ? 0 : 7;
+    for (let visualRank = 0; visualRank < 8; visualRank++) {
+        const logicalRank = (geometry.orientation === 0 /* ColorCode.White */ ? 7 - visualRank : visualRank);
+        const sq = squareOf(rankFile, logicalRank);
+        const label = geometry.orientation === 0 /* ColorCode.White */ ? String(8 - visualRank) : String(1 + visualRank);
+        const r = geometry.squareRect(sq);
+        const color = labelColorForSquare(sq, coords);
+        const text = createSvgElement(layer, 'text', {
+            'data-chessboard-id': `coord-rank-${label}`,
+            x: (r.x + offset).toString(),
+            y: (r.y + offset).toString(),
+            'font-size': fontSize.toString(),
+            'font-family': 'sans-serif',
+            'font-weight': 'bold',
+            fill: color,
+            'text-anchor': 'start',
+            'dominant-baseline': 'hanging'
+        });
+        text.textContent = label;
+    }
+    // File labels on the visual bottom edge
+    const fileRank = geometry.orientation === 0 /* ColorCode.White */ ? 0 : 7;
+    for (let visualFile = 0; visualFile < 8; visualFile++) {
+        const logicalFile = (geometry.orientation === 0 /* ColorCode.White */ ? visualFile : 7 - visualFile);
+        const sq = squareOf(logicalFile, fileRank);
+        const label = geometry.orientation === 0 /* ColorCode.White */
+            ? String.fromCharCode('a'.charCodeAt(0) + visualFile)
+            : String.fromCharCode('h'.charCodeAt(0) - visualFile);
+        const r = geometry.squareRect(sq);
+        const color = labelColorForSquare(sq, coords);
+        const text = createSvgElement(layer, 'text', {
+            'data-chessboard-id': `coord-file-${label}`,
+            x: (r.x + r.size - offset).toString(),
+            y: (r.y + r.size - offset).toString(),
+            'font-size': fontSize.toString(),
+            'font-family': 'sans-serif',
+            'font-weight': 'bold',
+            fill: color,
+            'text-anchor': 'end',
+            'dominant-baseline': 'auto'
+        });
+        text.textContent = label;
+    }
+}