@mirasen/chessboard 1.1.5 → 1.2.0

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

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

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

@@ -6,5 +6,5 @@ export interface MainRendererBoardInternal {
 }
 export interface MainRendererBoard {
     onUpdate(context: ExtensionUpdateContext): void;
-    render(context: ExtensionRenderContext, layer: SVGElement): void;
+    render(context: ExtensionRenderContext, slot: SVGGElement): void;
 }

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

@@ -2,8 +2,8 @@ import { rendererCoordinatesRender } from './render.js';
 export function createMainRendererCoordinates(config) {
     const internalState = { config };
     return {
-        render(context, layer) {
-            rendererCoordinatesRender(internalState, context, layer);
+        render(context, slot) {
+            rendererCoordinatesRender(internalState, context, slot);
         }
     };
 }

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

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

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

@@ -1,15 +1,15 @@
-import { clearElementChildren, createSvgElement, isLightSquare } from '../../../../render/svg/helpers.js';
+import { clearSvgElementChildren, createSvgElement, isLightSquare } from '../../../../render/svg/helpers.js';
 import { squareOf } from '../../../../state/board/coords.js';
 import { DirtyLayer } from '../types/extension.js';
 function labelColorForSquare(sq, coordColors) {
     return isLightSquare(sq) ? coordColors.dark : coordColors.light;
 }
-export function rendererCoordinatesRender(state, context, layer) {
+export function rendererCoordinatesRender(state, context, slot) {
     if ((context.invalidation.dirtyLayers & DirtyLayer.Coordinates) === 0) {
         return;
     }
     const geometry = context.currentFrame.layout.geometry;
-    clearElementChildren(layer);
+    clearSvgElementChildren(slot);
     const coords = state.config;
     const fontSize = geometry.squareSize * 0.12;
     const offset = 3;
@@ -21,7 +21,7 @@ export function rendererCoordinatesRender(state, context, layer) {
         const label = geometry.orientation === 0 /* ColorCode.White */ ? String(8 - visualRank) : String(1 + visualRank);
         const r = geometry.getSquareRect(sq);
         const color = labelColorForSquare(sq, coords);
-        const text = createSvgElement(layer, 'text', {
+        const text = createSvgElement(slot, 'text', {
             'data-chessboard-id': `coord-rank-${label}`,
             x: (r.x + offset).toString(),
             y: (r.y + offset).toString(),
@@ -44,7 +44,7 @@ export function rendererCoordinatesRender(state, context, layer) {
             : String.fromCharCode('h'.charCodeAt(0) - visualFile);
         const r = geometry.getSquareRect(sq);
         const color = labelColorForSquare(sq, coords);
-        const text = createSvgElement(layer, 'text', {
+        const text = createSvgElement(slot, 'text', {
             'data-chessboard-id': `coord-file-${label}`,
             x: (r.x + r.width - offset).toString(),
             y: (r.y + r.height - offset).toString(),

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

@@ -4,5 +4,5 @@ export interface MainRendererCoordinatesInternal {
     readonly config: ConfigColorPair;
 }
 export interface MainRendererCoordinates {
-    render(context: ExtensionRenderContext, layer: SVGElement): void;
+    render(context: ExtensionRenderContext, slot: SVGGElement): void;
 }

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

@@ -1,4 +1,4 @@
 import { ExtensionRuntimeSurface } from '../../../types/surface/main.js';
-import { PieceUrls } from '../types/internal.js';
+import type { PieceSymbolResolver } from '../piece-symbols.js';
 import { MainRendererDrag } from './types.js';
-export declare function createMainRendererDrag(config: PieceUrls, runtimeSurface: ExtensionRuntimeSurface): MainRendererDrag;
+export declare function createMainRendererDrag(runtimeSurface: ExtensionRuntimeSurface, resolver: PieceSymbolResolver): MainRendererDrag;

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

@@ -1,21 +1,24 @@
 import { rendererDragRenderTransientVisuals } from './render.js';
 import { rendererDragOnUpdate } from './update.js';
-function createMainRendererDragInternal(config, runtimeSurface) {
-    return { config, runtimeSurface, isDragActive: false, pieceUrl: null, pieceNode: null };
-}
-export function createMainRendererDrag(config, runtimeSurface) {
-    const internalState = createMainRendererDragInternal(config, runtimeSurface);
+export function createMainRendererDrag(runtimeSurface, resolver) {
+    const internalState = {
+        runtimeSurface,
+        resolver,
+        isDragActive: false,
+        pieceCode: null,
+        pieceNode: null
+    };
     return {
         onUpdate(context) {
             rendererDragOnUpdate(internalState, context);
         },
-        renderTransientVisuals(context, layer) {
-            rendererDragRenderTransientVisuals(internalState, context, layer);
+        renderTransientVisuals(context, slot) {
+            rendererDragRenderTransientVisuals(internalState, context, slot);
         },
         unmount() {
             internalState.pieceNode?.remove();
             internalState.pieceNode = null;
-            internalState.pieceUrl = null;
+            internalState.pieceCode = null;
             internalState.isDragActive = false;
             internalState.runtimeSurface.transientVisuals.unsubscribe();
         }

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

@@ -1,3 +1,3 @@
 import { ExtensionRenderTransientVisualsContext } from '../../../types/context/transient-visuals.js';
 import { MainRendererDragInternal } from './types.js';
-export declare function rendererDragRenderTransientVisuals(state: MainRendererDragInternal, context: ExtensionRenderTransientVisualsContext, layer: SVGElement): void;
+export declare function rendererDragRenderTransientVisuals(state: MainRendererDragInternal, context: ExtensionRenderTransientVisualsContext, slot: SVGGElement): void;

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

@@ -1,23 +1,24 @@
-import { createSvgElement, updateElementAttributes } from '../../../../render/svg/helpers.js';
-export function rendererDragRenderTransientVisuals(state, context, layer) {
+import { createSvgElement, updateSvgElementAttributes } from '../../../../render/svg/helpers.js';
+export function rendererDragRenderTransientVisuals(state, context, slot) {
     const geometry = context.currentFrame.layout.geometry;
     const point = context.transientInput.boardClampedPoint;
     const squareSize = geometry.squareSize.toString();
     const x = (point.x - geometry.squareSize / 2).toString();
     const y = (point.y - geometry.squareSize / 2).toString();
-    if (state.isDragActive && state.pieceUrl && !state.pieceNode) {
+    if (state.isDragActive && state.pieceCode && !state.pieceNode) {
         // Ok this is first render pass, let's create the piece node
-        state.pieceNode = createSvgElement(layer, 'image', {
+        const href = state.resolver.getHref(state.pieceCode);
+        state.pieceNode = createSvgElement(slot, 'use', {
             'data-chessboard-id': 'dragged-piece',
             width: squareSize,
             height: squareSize,
             x,
             y,
-            href: state.pieceUrl
+            href
         });
     }
     else if (state.isDragActive && state.pieceNode) {
-        updateElementAttributes(state.pieceNode, {
+        updateSvgElementAttributes(state.pieceNode, {
             width: squareSize,
             height: squareSize,
             x,

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

@@ -1,16 +1,17 @@
+import { NonEmptyPieceCode } from '../../../../state/board/types/internal.js';
 import { ExtensionRenderTransientVisualsContext } from '../../../types/context/transient-visuals.js';
 import { ExtensionUpdateContext } from '../../../types/context/update.js';
 import { ExtensionRuntimeSurface } from '../../../types/surface/main.js';
-import { PieceUrls } from '../types/internal.js';
+import type { PieceSymbolResolver } from '../piece-symbols.js';
 export interface MainRendererDragInternal {
-    readonly config: PieceUrls;
     readonly runtimeSurface: ExtensionRuntimeSurface;
+    readonly resolver: PieceSymbolResolver;
     isDragActive: boolean;
-    pieceUrl: string | null;
-    pieceNode: SVGImageElement | null;
+    pieceCode: NonEmptyPieceCode | null;
+    pieceNode: SVGUseElement | null;
 }
 export interface MainRendererDrag {
     onUpdate(context: ExtensionUpdateContext): void;
-    renderTransientVisuals(context: ExtensionRenderTransientVisualsContext, layer: SVGElement): void;
+    renderTransientVisuals(context: ExtensionRenderTransientVisualsContext, slot: SVGGElement): void;
     unmount(): void;
 }

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

@@ -6,7 +6,7 @@ export function rendererDragOnUpdate(state, context) {
         if (!state.isDragActive) {
             const pieceCode = context.currentFrame.state.interaction.dragSession.sourcePieceCode;
             assert(isNonEmptyPieceCode(pieceCode), 'Invalid piece code in drag session');
-            state.pieceUrl = state.config[pieceCode];
+            state.pieceCode = pieceCode;
             state.runtimeSurface.transientVisuals.subscribe();
         }
         state.isDragActive = true;
@@ -16,7 +16,7 @@ export function rendererDragOnUpdate(state, context) {
             state.runtimeSurface.transientVisuals.unsubscribe();
             state.pieceNode?.remove();
             state.pieceNode = null;
-            state.pieceUrl = null;
+            state.pieceCode = null;
         }
         state.isDragActive = false;
     }

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

@@ -5,6 +5,7 @@ import { createMainRendererBoard } from './board/factory.js';
 import { createMainRendererCoordinates } from './coordinates/factory.js';
 import { createMainRendererDrag } from './drag/factory.js';
 import { normalizeMainRendererConfig } from './normalize.js';
+import { createPieceSymbolResolver, ensurePieceSymbolsDefined } from './piece-symbols.js';
 import { createMainRendererPieces } from './pieces/factory.js';
 import { EXTENSION_ID, EXTENSION_SLOTS } from './types/extension.js';
 import { DEFAULT_MAIN_RENDERER_CONFIG } from './types/internal.js';
@@ -19,19 +20,21 @@ export function createMainRenderer(options = {}) {
     };
 }
 function createMainRendererInternal(options, config) {
+    const pieceSymbolResolver = createPieceSymbolResolver(options.svgIds);
     const board = createMainRendererBoard(config.colors.board);
     const coordinates = createMainRendererCoordinates(config.colors.coordinates);
-    const pieces = createMainRendererPieces(config.pieceUrls);
-    const drag = createMainRendererDrag(config.pieceUrls, options.runtimeSurface);
-    const animation = createMainRendererAnimation(config.pieceUrls, options.runtimeSurface);
+    const pieces = createMainRendererPieces(pieceSymbolResolver);
+    const drag = createMainRendererDrag(options.runtimeSurface, pieceSymbolResolver);
+    const animation = createMainRendererAnimation(options.runtimeSurface, pieceSymbolResolver);
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         board,
         coordinates,
         pieces,
         drag,
         animation,
-        runtimeSurface: options.runtimeSurface
+        runtimeSurface: options.runtimeSurface,
+        pieceSymbolResolver
     };
 }
 function extensionUnmountLocal(state) {
@@ -52,6 +55,7 @@ function createMainRendererInstance(options, config) {
         id: EXTENSION_ID,
         mount(env) {
             extensionMountBase(internalState, env.slotRoots);
+            ensurePieceSymbolsDefined(env.slotRoots.defs, config.pieceUrls, internalState.pieceSymbolResolver);
         },
         onUpdate(context) {
             internalState.board.onUpdate(context);

package/dist/extensions/first-party/main-renderer/piece-symbols.d.ts

@@ -0,0 +1,19 @@
+import type { SvgIdResolver } from '../../../render/svg/ids.js';
+import { NonEmptyPieceCode } from '../../../state/board/types/internal.js';
+import type { PieceUrls } from './types/internal.js';
+export interface PieceSymbolResolver {
+    /** Returns the DOM id for a piece symbol (e.g., "cb0-renderer-p6") */
+    getId(pieceCode: NonEmptyPieceCode): string;
+    /** Returns the href suitable for <use href="..."> (e.g., "#cb0-renderer-p6") */
+    getHref(pieceCode: NonEmptyPieceCode): string;
+}
+/**
+ * Creates a PieceSymbolResolver backed by the shared SvgIdResolver.
+ * All ids use the "renderer" scope with a "p{pieceCode}" local id.
+ */
+export declare function createPieceSymbolResolver(svgIds: SvgIdResolver): PieceSymbolResolver;
+/**
+ * Ensures all 12 piece symbols exist in the defs element.
+ * Idempotent: checks the actual DOM for each symbol id before creating.
+ */
+export declare function ensurePieceSymbolsDefined(defs: SVGDefsElement, config: PieceUrls, resolver: PieceSymbolResolver): void;

package/dist/extensions/first-party/main-renderer/piece-symbols.js

@@ -0,0 +1,45 @@
+import { createSvgElement } from '../../../render/svg/helpers.js';
+import { ALL_NON_EMPTY_PIECE_CODES } from '../../../state/board/types/internal.js';
+/**
+ * Creates a PieceSymbolResolver backed by the shared SvgIdResolver.
+ * All ids use the "renderer" scope with a "p{pieceCode}" local id.
+ */
+export function createPieceSymbolResolver(svgIds) {
+    const getId = (pieceCode) => {
+        return svgIds.makeId('renderer', `p${pieceCode}`);
+    };
+    const getHref = (pieceCode) => {
+        return svgIds.makeHref('renderer', `p${pieceCode}`);
+    };
+    return { getId, getHref };
+}
+// ─── Symbol DOM creation ──────────────────────────────────────────────────────
+function getSymbolDataId(pieceCode) {
+    return `piece-symbol-${pieceCode}`;
+}
+/**
+ * Ensures all 12 piece symbols exist in the defs element.
+ * Idempotent: checks the actual DOM for each symbol id before creating.
+ */
+export function ensurePieceSymbolsDefined(defs, config, resolver) {
+    for (const pieceCode of ALL_NON_EMPTY_PIECE_CODES) {
+        const symbolId = resolver.getId(pieceCode);
+        // Idempotency: check if this symbol already exists in the DOM
+        if (defs.querySelector(`#${symbolId}`)) {
+            continue;
+        }
+        const symbol = createSvgElement(defs, 'symbol', {
+            id: symbolId,
+            'data-chessboard-id': getSymbolDataId(pieceCode),
+            viewBox: '0 0 1 1'
+        });
+        createSvgElement(symbol, 'image', {
+            'data-chessboard-id': `piece-symbol-image-${pieceCode}`,
+            href: config[pieceCode],
+            x: '0',
+            y: '0',
+            width: '1',
+            height: '1'
+        });
+    }
+}

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

@@ -1,3 +1,3 @@
-import { PieceUrls } from '../types/internal.js';
+import type { PieceSymbolResolver } from '../piece-symbols.js';
 import { MainRendererPieces } from './types.js';
-export declare function createMainRendererPieces(config: PieceUrls): MainRendererPieces;
+export declare function createMainRendererPieces(resolver: PieceSymbolResolver): MainRendererPieces;

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

@@ -1,8 +1,8 @@
 import { rendererPiecesRender } from './render.js';
 import { rendererPiecesOnUpdate, rendererPiecesRefreshSuppressedSquares } from './update.js';
-export function createMainRendererPieces(config) {
+export function createMainRendererPieces(resolver) {
     const state = {
-        config,
+        resolver,
         pieceNodes: new Map(),
         suppressedSquares: new Set()
     };
@@ -13,8 +13,8 @@ export function createMainRendererPieces(config) {
         refreshSuppressedSquares(context, animationSuppressedSquares) {
             rendererPiecesRefreshSuppressedSquares(state, context, animationSuppressedSquares);
         },
-        render(context, layer) {
-            rendererPiecesRender(state, context, layer);
+        render(context, slot) {
+            rendererPiecesRender(state, context, slot);
         },
         unmount() {
             for (const nodeRecord of state.pieceNodes.values()) {

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

@@ -1,3 +1,3 @@
 import { ExtensionRenderContext } from '../../../types/context/render.js';
 import { MainRendererPiecesInternal } from './types.js';
-export declare function rendererPiecesRender(state: MainRendererPiecesInternal, context: ExtensionRenderContext, layer: SVGElement): void;
+export declare function rendererPiecesRender(state: MainRendererPiecesInternal, context: ExtensionRenderContext, slot: SVGGElement): void;

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

@@ -1,8 +1,8 @@
-import { createSvgElement, updateElementAttributes } from '../../../../render/svg/helpers.js';
+import { createSvgElement, updateSvgElementAttributes } from '../../../../render/svg/helpers.js';
 import { isNonEmptyPieceCode } from '../../../../state/board/check.js';
 import { SQUARE_COUNT } from '../../../../state/board/types/internal.js';
 import { DirtyLayer } from '../types/extension.js';
-export function rendererPiecesRender(state, context, layer) {
+export function rendererPiecesRender(state, context, slot) {
     if ((context.invalidation.dirtyLayers & DirtyLayer.Pieces) === 0) {
         return;
     }
@@ -13,22 +13,22 @@ export function rendererPiecesRender(state, context, layer) {
         const existing = state.pieceNodes.get(sq) || null;
         const suppressed = state.suppressedSquares.has(sq);
         if (isNonEmptyPieceCode(pieceCode) && !suppressed) {
-            const url = state.config[pieceCode];
+            const href = state.resolver.getHref(pieceCode);
             const r = geometry.getSquareRect(sq);
             if (existing !== null) {
-                updateElementAttributes(existing.root, {
+                updateSvgElementAttributes(existing.root, {
                     x: r.x.toString(),
                     y: r.y.toString(),
                     width: r.width.toString(),
                     height: r.height.toString(),
-                    href: url
+                    href
                 });
             }
             else {
                 state.pieceNodes.set(sq, {
-                    root: createSvgElement(layer, 'image', {
+                    root: createSvgElement(slot, 'use', {
                         'data-chessboard-id': `piece-${pieceCode}-${sq}`,
-                        href: url,
+                        href,
                         x: r.x.toString(),
                         y: r.y.toString(),
                         width: r.width.toString(),
@@ -38,7 +38,7 @@ export function rendererPiecesRender(state, context, layer) {
             }
         }
         else if (existing !== null) {
-            layer.removeChild(existing.root);
+            slot.removeChild(existing.root);
             state.pieceNodes.delete(sq);
         }
     }

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

@@ -2,19 +2,19 @@ import { Square } from '../../../../state/board/types/internal.js';
 import { ExtensionCleanAnimationContext } from '../../../types/context/animation.js';
 import { ExtensionRenderContext } from '../../../types/context/render.js';
 import { ExtensionUpdateContext } from '../../../types/context/update.js';
-import { PieceUrls } from '../types/internal.js';
+import type { PieceSymbolResolver } from '../piece-symbols.js';
 type PieceNodeRecord = {
-    root: SVGImageElement;
+    root: SVGUseElement;
 };
 export interface MainRendererPiecesInternal {
-    readonly config: PieceUrls;
+    readonly resolver: PieceSymbolResolver;
     readonly pieceNodes: Map<Square, PieceNodeRecord>;
     suppressedSquares: ReadonlySet<Square>;
 }
 export interface MainRendererPieces {
     onUpdate(context: ExtensionUpdateContext, animationSuppressedSquares: ReadonlySet<Square>): void;
     refreshSuppressedSquares(context: ExtensionCleanAnimationContext, animationSuppressedSquares: ReadonlySet<Square>): void;
-    render(context: ExtensionRenderContext, layer: SVGElement): void;
+    render(context: ExtensionRenderContext, slot: SVGGElement): void;
     unmount(): void;
 }
 export {};

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

@@ -1,7 +1,7 @@
 import { ExtensionDefinition, ExtensionInstance } from '../../../types/extension.js';
 import { MainRendererConfigInput } from './input.js';
 export type MainRendererInitOptions = Partial<MainRendererConfigInput>;
-export declare const EXTENSION_SLOTS: readonly ["board", "coordinates", "pieces", "animation", "drag"];
+export declare const EXTENSION_SLOTS: readonly ["defs", "board", "coordinates", "pieces", "animation", "drag"];
 export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
 export declare const EXTENSION_ID: "renderer";
 export type MainRendererDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;

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

@@ -1,4 +1,11 @@
-export const EXTENSION_SLOTS = ['board', 'coordinates', 'pieces', 'animation', 'drag'];
+export const EXTENSION_SLOTS = [
+    'defs',
+    'board',
+    'coordinates',
+    'pieces',
+    'animation',
+    'drag'
+];
 export const EXTENSION_ID = 'renderer';
 export var DirtyLayer;
 (function (DirtyLayer) {

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

@@ -4,6 +4,7 @@ import { MainRendererAnimation } from '../animation/types.js';
 import { MainRendererBoard } from '../board/types.js';
 import { MainRendererCoordinates } from '../coordinates/types.js';
 import { MainRendererDrag } from '../drag/types.js';
+import type { PieceSymbolResolver } from '../piece-symbols.js';
 import { MainRendererPieces } from '../pieces/types.js';
 import { ExtensionSlotsType } from './extension.js';
 export interface MainRendererInstanceInternal extends ExtensionInternalBase<ExtensionSlotsType> {
@@ -13,4 +14,5 @@ export interface MainRendererInstanceInternal extends ExtensionInternalBase<Exte
     readonly drag: MainRendererDrag;
     readonly animation: MainRendererAnimation;
     readonly runtimeSurface: ExtensionRuntimeSurface;
+    readonly pieceSymbolResolver: PieceSymbolResolver;
 }

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

@@ -1,5 +1,5 @@
 import assert from '@ktarmyshov/assert';
-import { createSvgElement, updateElementAttributes } from '../../../render/svg/helpers.js';
+import { createSvgElement, updateSvgElementAttributes } from '../../../render/svg/helpers.js';
 import { fileOf, rankOf, squareOf } from '../../../state/board/coords.js';
 import { toPieceCode } from '../../../state/board/piece.js';
 import { isUpdateContextRenderable } from '../../types/context/update.js';
@@ -18,7 +18,7 @@ export function createPromotion(config = {}) {
 }
 function createPromotionInternal(options, config) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         svgPromotionPieces: new Map(),
         activePromotionSquares: new Map(),
         svgHoverRect: null,
@@ -117,7 +117,7 @@ function createPromotionInstance(options, config) {
             }
             // Create or update a node for each promotion role
             assert(internalState.slotRoots, 'Slot roots should be available when render is called');
-            const layer = internalState.slotRoots.animation;
+            const slot = internalState.slotRoots.animation;
             for (let i = 0; i < promotedToSorted.length; i++) {
                 const roleCode = promotedToSorted[i];
                 const displayRank = (targetRank + i * rankStep);
@@ -144,15 +144,15 @@ function createPromotionInstance(options, config) {
                 internalState.activePromotionSquares.set(displaySquare, roleCode);
                 const existing = internalState.svgPromotionPieces.get(roleCode) ?? null;
                 if (existing !== null) {
-                    updateElementAttributes(existing.rect, rectAttrs);
-                    updateElementAttributes(existing.svg, imageAttrs);
+                    updateSvgElementAttributes(existing.rect, rectAttrs);
+                    updateSvgElementAttributes(existing.svg, imageAttrs);
                 }
                 else {
-                    const rect = createSvgElement(layer, 'rect', {
+                    const rect = createSvgElement(slot, 'rect', {
                         'data-chessboard-id': `promotion-bg-${roleCode}`,
                         ...rectAttrs
                     });
-                    const svg = createSvgElement(layer, 'image', {
+                    const svg = createSvgElement(slot, 'image', {
                         'data-chessboard-id': `promotion-piece-${roleCode}`,
                         ...imageAttrs
                     });
@@ -176,12 +176,12 @@ function createPromotionInstance(options, config) {
                     'shape-rendering': 'crispEdges'
                 };
                 if (internalState.svgHoverRect) {
-                    updateElementAttributes(internalState.svgHoverRect, attrs);
+                    updateSvgElementAttributes(internalState.svgHoverRect, attrs);
                 }
                 else {
                     assert(internalState.slotRoots, 'Slot roots should be available when renderTransientVisuals is called');
-                    const layer = internalState.slotRoots.animation;
-                    internalState.svgHoverRect = createSvgElement(layer, 'rect', {
+                    const slot = internalState.slotRoots.animation;
+                    internalState.svgHoverRect = createSvgElement(slot, 'rect', {
                         'data-chessboard-id': 'promotion-hover',
                         ...attrs
                     });

package/dist/extensions/first-party/selected-square/factory.js

@@ -1,6 +1,6 @@
 import assert from '@ktarmyshov/assert';
 import { toMerged } from 'es-toolkit';
-import { createSvgElement, updateElementAttributes } from '../../../render/svg/helpers.js';
+import { createSvgElement, updateSvgElementAttributes } from '../../../render/svg/helpers.js';
 import { isUpdateContextRenderable } from '../../types/context/update.js';
 import { extensionCreateInternalBase, extensionDestroyBase, extensionMountBase, extensionUnmountBase } from '../common/helpers.js';
 import { DEFAULT_CONFIG, EXTENSION_ID, EXTENSION_SLOTS } from './types.js';
@@ -9,14 +9,14 @@ export function createSelectedSquare(config = {}) {
     return {
         id: EXTENSION_ID,
         slots: EXTENSION_SLOTS,
-        createInstance() {
-            return createSelectedSquareInstance(mergedConfig);
+        createInstance(options) {
+            return createSelectedSquareInstance(options, mergedConfig);
         }
     };
 }
-function createSelectedSquareInternal(config) {
+function createSelectedSquareInternal(options, config) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         svgRect: null,
         config
     };
@@ -24,8 +24,8 @@ function createSelectedSquareInternal(config) {
 function extensionClean(state) {
     state.svgRect = null;
 }
-function createSelectedSquareInstance(config) {
-    const internalState = createSelectedSquareInternal(config);
+function createSelectedSquareInstance(options, config) {
+    const internalState = createSelectedSquareInternal(options, config);
     return {
         id: EXTENSION_ID,
         mount(env) {
@@ -73,7 +73,7 @@ function createSelectedSquareInstance(config) {
                 });
             }
             else {
-                updateElementAttributes(internalState.svgRect, rectAttributes);
+                updateSvgElementAttributes(internalState.svgRect, rectAttributes);
             }
         },
         unmount() {

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

@@ -1,5 +1,5 @@
 import assert from '@ktarmyshov/assert';
-import { createSvgElement, updateElementAttributes } from '../../../render/svg/helpers.js';
+import { createSvgElement, updateSvgElementAttributes } from '../../../render/svg/helpers.js';
 import { isUpdateContextRenderable } from '../../types/context/update.js';
 import { extensionCreateInternalBase, extensionDestroyBase, extensionMountBase, extensionUnmountBase } from '../common/helpers.js';
 import { EXTENSION_ID, EXTENSION_SLOTS } from './types.js';
@@ -7,14 +7,14 @@ export function createWatermark() {
     return {
         id: EXTENSION_ID,
         slots: EXTENSION_SLOTS,
-        createInstance() {
-            return createWatermarkInstance();
+        createInstance(options) {
+            return createWatermarkInstance(options);
         }
     };
 }
-function createWatermarkInternal() {
+function createWatermarkInternal(options) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         svgWatermark: null
     };
 }
@@ -24,8 +24,8 @@ function extensionClean(state) {
 const watermarkUrl = new URL('../../../../assets/watermark/mirasen.svg', import.meta.url).toString();
 const squareRatio = 0.8; // watermark size relative to square size
 const opacity = '0.3';
-function createWatermarkInstance() {
-    const internalState = createWatermarkInternal();
+function createWatermarkInstance(options) {
+    const internalState = createWatermarkInternal(options);
     return {
         id: EXTENSION_ID,
         mount(env) {
@@ -67,7 +67,7 @@ function createWatermarkInstance() {
                 });
             }
             else {
-                updateElementAttributes(internalState.svgWatermark, watermarkAttributes);
+                updateSvgElementAttributes(internalState.svgWatermark, watermarkAttributes);
             }
         },
         unmount() {