@mirasen/chessboard 1.1.5 → 1.2.1

package/dist/extensions/first-party/board-events/factory.js

@@ -5,14 +5,14 @@ export function createBoardEvents() {
     return {
         id: EXTENSION_ID,
         slots: EXTENSION_SLOTS,
-        createInstance() {
-            return createBoardEventsInstance();
+        createInstance(options) {
+            return createBoardEventsInstance(options);
         }
     };
 }
-function createBoardEventsInternal() {
+function createBoardEventsInternal(options) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         onUIMove: null,
         onRawUpdate: null
     };
@@ -27,8 +27,8 @@ function createBoardEventsInstancePublic(state) {
         }
     };
 }
-function createBoardEventsInstance() {
-    const internalState = createBoardEventsInternal();
+function createBoardEventsInstance(options) {
+    const internalState = createBoardEventsInternal(options);
     const publicInterface = createBoardEventsInstancePublic(internalState);
     return {
         id: EXTENSION_ID,

package/dist/extensions/first-party/common/helpers.d.ts

@@ -1,6 +1,7 @@
 import { ExtensionSlotName } from '../../types/basic/mount.js';
+import type { ExtensionCreateInstanceOptions } from '../../types/extension.js';
 import { ExtensionInternalBase } from './types.js';
-export declare function extensionCreateInternalBase<TSlots extends readonly ExtensionSlotName[]>(): ExtensionInternalBase<TSlots>;
+export declare function extensionCreateInternalBase<TSlots extends readonly ExtensionSlotName[]>(options: ExtensionCreateInstanceOptions): ExtensionInternalBase<TSlots>;
 export declare function extensionIsMountedBase<TSlots extends readonly ExtensionSlotName[]>(state: ExtensionInternalBase<TSlots>): boolean;
 export declare function extensionIsDestroyedBase<TSlots extends readonly ExtensionSlotName[]>(state: ExtensionInternalBase<TSlots>): boolean;
 export declare function extensionMountBase<TSlots extends readonly ExtensionSlotName[]>(state: ExtensionInternalBase<TSlots>, slotRoots: NonNullable<ExtensionInternalBase<TSlots>['slotRoots']>): void;

package/dist/extensions/first-party/common/helpers.js

@@ -1,9 +1,10 @@
 import assert from '@ktarmyshov/assert';
-import { clearElementChildren } from '../../../render/svg/helpers.js';
-export function extensionCreateInternalBase() {
+import { clearSvgElementChildren } from '../../../render/svg/helpers.js';
+export function extensionCreateInternalBase(options) {
     return {
         slotRoots: null,
-        destroyed: false
+        destroyed: false,
+        svgIds: options.svgIds
     };
 }
 export function extensionIsMountedBase(state) {
@@ -19,8 +20,8 @@ export function extensionMountBase(state, slotRoots) {
 }
 export function extensionUnmountBase(state) {
     assert(extensionIsMountedBase(state), 'Extension is not mounted');
-    for (const slotRoot of Object.values(state.slotRoots ?? {})) {
-        clearElementChildren(slotRoot);
+    for (const [, slotRoot] of Object.entries(state.slotRoots ?? {})) {
+        clearSvgElementChildren(slotRoot);
     }
     state.slotRoots = null;
 }

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

@@ -1,7 +1,9 @@
+import type { SvgIdResolver } from '../../../render/svg/ids.js';
 import { ExtensionSlotName, ExtensionSlotSvgRoots } from '../../types/basic/mount.js';
 export interface ExtensionInternalBase<TSlots extends readonly ExtensionSlotName[]> {
     slotRoots: ExtensionSlotSvgRoots<TSlots> | null;
     destroyed: boolean;
+    readonly svgIds: SvgIdResolver;
 }
 export interface OpaqueColor {
     color: string;

package/dist/extensions/first-party/last-move/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 createLastMove(config = {}) {
     return {
         id: EXTENSION_ID,
         slots: EXTENSION_SLOTS,
-        createInstance() {
-            return createLastMoveInstance(mergedConfig);
+        createInstance(options) {
+            return createLastMoveInstance(options, mergedConfig);
         }
     };
 }
-function createLastMoveInternal(config) {
+function createLastMoveInternal(options, config) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         svgRectFrom: null,
         svgRectTo: null,
         config
@@ -26,8 +26,8 @@ function extensionClean(state) {
     state.svgRectFrom = null;
     state.svgRectTo = null;
 }
-function createLastMoveInstance(config) {
-    const internalState = createLastMoveInternal(config);
+function createLastMoveInstance(options, config) {
+    const internalState = createLastMoveInternal(options, config);
     return {
         id: EXTENSION_ID,
         mount(env) {
@@ -89,9 +89,9 @@ function createLastMoveInstance(config) {
                 });
             }
             else {
-                updateElementAttributes(internalState.svgRectFrom, rectFromAttributes);
+                updateSvgElementAttributes(internalState.svgRectFrom, rectFromAttributes);
                 assert(internalState.svgRectTo, 'svgRectTo should be available if svgRectFrom is available');
-                updateElementAttributes(internalState.svgRectTo, rectToAttributes);
+                updateSvgElementAttributes(internalState.svgRectTo, rectToAttributes);
             }
         },
         unmount() {

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

@@ -1,6 +1,6 @@
 import assert from '@ktarmyshov/assert';
 import { toMerged } from 'es-toolkit';
-import { clearElementChildren, createSvgElement } from '../../../render/svg/helpers.js';
+import { clearSvgElementChildren, createSvgElement } from '../../../render/svg/helpers.js';
 import { isNonEmptyPieceCode } from '../../../state/board/check.js';
 import { fromPieceCode } from '../../../state/board/piece.js';
 import { isUpdateContextRenderable } from '../../types/context/update.js';
@@ -11,14 +11,14 @@ export function createLegalMoves(config = {}) {
     return {
         id: EXTENSION_ID,
         slots: EXTENSION_SLOTS,
-        createInstance() {
-            return createLegalMovesInstance(mergedConfig);
+        createInstance(options) {
+            return createLegalMovesInstance(options, mergedConfig);
         }
     };
 }
-function createLegalMovesInternal(config) {
+function createLegalMovesInternal(options, config) {
     return {
-        ...extensionCreateInternalBase(),
+        ...extensionCreateInternalBase(options),
         svgCircles: [],
         config
     };
@@ -26,8 +26,8 @@ function createLegalMovesInternal(config) {
 function extensionClean(state) {
     state.svgCircles = [];
 }
-function createLegalMovesInstance(config) {
-    const internalState = createLegalMovesInternal(config);
+function createLegalMovesInstance(options, config) {
+    const internalState = createLegalMovesInternal(options, config);
     return {
         id: EXTENSION_ID,
         mount(env) {
@@ -47,7 +47,7 @@ function createLegalMovesInstance(config) {
         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);
+            clearSvgElementChildren(internalState.slotRoots.overPieces);
             internalState.svgCircles = [];
             const interaction = context.currentFrame.state.interaction;
             const needsRender = interaction.movability.mode === 2 /* MovabilityModeCode.Strict */ &&

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

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

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

@@ -1,18 +1,18 @@
 import { cleanAnimationPlan } from '../../../../animation/render/plan.js';
 import { getAnimationSuppressedSquares, rendererAnimationClean, rendererAnimationPrepare, rendererAnimationRender } from './render.js';
 import { rendererAnimationOnUpdate } from './update.js';
-export function createMainRendererAnimation(config, runtimeSurface) {
+export function createMainRendererAnimation(runtimeSurface, resolver) {
     const state = {
-        config,
         runtimeSurface,
+        resolver,
         entries: new Map()
     };
     return {
         onUpdate(context) {
             rendererAnimationOnUpdate(state, context);
         },
-        prepareAnimation(context, layer) {
-            rendererAnimationPrepare(state, context, layer);
+        prepareAnimation(context, slot) {
+            rendererAnimationPrepare(state, context, slot);
         },
         renderAnimation(context) {
             rendererAnimationRender(state, context);

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

@@ -1,7 +1,7 @@
 import type { Square } from '../../../../state/board/types/internal.js';
 import type { ExtensionCleanAnimationContext, ExtensionPrepareAnimationContext, ExtensionRenderAnimationContext } from '../../../types/context/animation.js';
 import type { MainRendererAnimationInternal } from './types.js';
-export declare function rendererAnimationPrepare(state: MainRendererAnimationInternal, context: ExtensionPrepareAnimationContext, layer: SVGElement): void;
+export declare function rendererAnimationPrepare(state: MainRendererAnimationInternal, context: ExtensionPrepareAnimationContext, slot: SVGGElement): 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

@@ -1,10 +1,10 @@
 import { cleanAnimationPlan, prepareAnimationPlan, renderAnimationPlan } from '../../../../animation/render/plan.js';
 const EMPTY_SQUARES = new Set();
-export function rendererAnimationPrepare(state, context, layer) {
+export function rendererAnimationPrepare(state, context, slot) {
     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);
+            entry.nodes = prepareAnimationPlan(entry.plan, context.currentFrame.layout.geometry, state.resolver.getHref, slot);
         }
     }
 }

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

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

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

@@ -9,8 +9,8 @@ export function createMainRendererBoard(config) {
         onUpdate(context) {
             rendererBoardOnUpdate(internalState, context);
         },
-        render(context, layer) {
-            rendererBoardRender(internalState, context, layer);
+        render(context, slot) {
+            rendererBoardRender(internalState, context, slot);
         }
     };
 }

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

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

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()) {