@mirasen/chessboard 1.1.4 → 1.2.0

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

@@ -0,0 +1,82 @@
+import assert from '@ktarmyshov/assert';
+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';
+export function createWatermark() {
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance(options) {
+            return createWatermarkInstance(options);
+        }
+    };
+}
+function createWatermarkInternal(options) {
+    return {
+        ...extensionCreateInternalBase(options),
+        svgWatermark: null
+    };
+}
+function extensionClean(state) {
+    state.svgWatermark = null;
+}
+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(options) {
+    const internalState = createWatermarkInternal(options);
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMountBase(internalState, env.slotRoots);
+        },
+        onUpdate(context) {
+            const needsRender = context.mutation.hasMutation({
+                causes: ['layout.refreshGeometry']
+            }) && isUpdateContextRenderable(context);
+            if (!needsRender) {
+                return;
+            }
+            context.invalidation.markDirty(1 /* DirtyLayer.Watermark */);
+        },
+        render(context) {
+            assert(context.invalidation.dirtyLayers !== 0, 'Render should only be called when there are dirty layers');
+            const watermarkSquare = context.currentFrame.state.view.orientation === 0 /* ColorCode.White */ ? 7 : 56;
+            const geometry = context.currentFrame.layout.geometry;
+            const r = geometry.getSquareRect(watermarkSquare);
+            const centerX = r.x + r.width / 2;
+            const centerY = r.y + r.height / 2;
+            const size = Math.min(r.width, r.height) * squareRatio;
+            const x = centerX - size / 2;
+            const y = centerY - size / 2;
+            const watermarkAttributes = {
+                opacity: opacity,
+                x: x.toString(),
+                y: y.toString(),
+                width: size.toString(),
+                height: size.toString(),
+                href: watermarkUrl,
+                'pointer-events': 'none'
+            };
+            if (internalState.svgWatermark === null) {
+                assert(internalState.slotRoots, 'Slot roots should be available when render is called');
+                internalState.svgWatermark = createSvgElement(internalState.slotRoots.board, 'image', {
+                    'data-chessboard-id': 'watermark',
+                    ...watermarkAttributes
+                });
+            }
+            else {
+                updateSvgElementAttributes(internalState.svgWatermark, watermarkAttributes);
+            }
+        },
+        unmount() {
+            extensionUnmountBase(internalState);
+            extensionClean(internalState);
+        },
+        destroy() {
+            extensionDestroyBase(internalState);
+            extensionClean(internalState);
+        }
+    };
+}

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

@@ -0,0 +1,13 @@
+import { ExtensionDefinition, ExtensionInstance } from '../../types/extension.js';
+import { ExtensionInternalBase } from '../common/types.js';
+export declare const EXTENSION_SLOTS: readonly ["board"];
+export type ExtensionSlotsType = typeof EXTENSION_SLOTS;
+export declare const EXTENSION_ID: "watermark";
+export type WatermarkDefinition = ExtensionDefinition<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export type WatermarkInstance = ExtensionInstance<typeof EXTENSION_ID, typeof EXTENSION_SLOTS, never>;
+export interface WatermarkInstanceInternal extends ExtensionInternalBase<ExtensionSlotsType> {
+    svgWatermark: SVGImageElement | null;
+}
+export declare const enum DirtyLayer {
+    Watermark = 1
+}

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

@@ -0,0 +1,2 @@
+export const EXTENSION_SLOTS = ['board'];
+export const EXTENSION_ID = 'watermark';

package/dist/extensions/types/basic/events.d.ts

@@ -1,7 +1,7 @@
-import { Square } from '../../../state/board/types/internal.js';
-import { ScenePoint } from '../basic/transient-visuals.js';
+import type { Square } from '../../../state/board/types/internal.js';
+import type { ScenePoint } from '../basic/transient-visuals.js';
 export interface ScenePointerEvent {
-    readonly type: 'pointercancel' | 'pointerdown' | 'pointerenter' | 'pointerleave' | 'pointermove' | 'pointerout' | 'pointerover' | 'pointerrawupdate' | 'pointerup';
+    readonly type: 'pointercancel' | 'pointerdown' | 'pointerenter' | 'pointerleave' | 'pointermove' | 'pointerout' | 'pointerover' | 'pointerrawupdate' | 'pointerup' | 'contextmenu';
     readonly point: ScenePoint;
     readonly clampedPoint: ScenePoint;
     readonly boardClampedPoint: ScenePoint | null;
@@ -9,3 +9,32 @@ export interface ScenePointerEvent {
 }
 export declare const ALL_SCENE_POINTER_EVENT_TYPES: ReadonlySet<string>;
 export type SceneEvent = ScenePointerEvent;
+export type RuntimeInteractionActionStartLiftedDrag = {
+    type: 'startLiftedDrag';
+    source: Square;
+    target: Square;
+};
+export type RuntimeInteractionActionStartReleaseTargetingDrag = {
+    type: 'startReleaseTargetingDrag';
+    source: Square;
+    target: Square;
+};
+export type RuntimeInteractionActionCompleteCoreDrag = {
+    type: 'completeCoreDragTo';
+    target: Square;
+};
+export type RuntimeInteractionActionCompleteExtensionDrag = {
+    type: 'completeExtensionDrag';
+    target: Square | null;
+};
+export type RuntimeInteractionActionUpdateDragSessionCurrentTarget = {
+    type: 'updateDragSessionCurrentTarget';
+    target: Square | null;
+};
+export type RuntimeInteractionActionCancelActiveInteraction = {
+    type: 'cancelActiveInteraction';
+};
+export type RuntimeInteractionActionCancelInteraction = {
+    type: 'cancelInteraction';
+};
+export type RuntimeInteractionAction = RuntimeInteractionActionStartLiftedDrag | RuntimeInteractionActionStartReleaseTargetingDrag | RuntimeInteractionActionCompleteCoreDrag | RuntimeInteractionActionCompleteExtensionDrag | RuntimeInteractionActionUpdateDragSessionCurrentTarget | RuntimeInteractionActionCancelActiveInteraction | RuntimeInteractionActionCancelInteraction;

package/dist/extensions/types/basic/events.js

@@ -7,5 +7,6 @@ export const ALL_SCENE_POINTER_EVENT_TYPES = new Set([
     'pointerout',
     'pointerover',
     'pointerrawupdate',
-    'pointerup'
+    'pointerup',
+    'contextmenu'
 ]);

package/dist/extensions/types/basic/mount.d.ts

@@ -1,6 +1,9 @@
-export type ExtensionSlotName = 'defs' | 'board' | 'coordinates' | 'underPieces' | 'pieces' | 'overPieces' | 'animation' | 'underDrag' | 'drag' | 'overDrag';
 export declare const ALL_EXTENSION_SLOTS: readonly ["defs", "board", "coordinates", "underPieces", "pieces", "overPieces", "animation", "underDrag", "drag", "overDrag"];
-export type ExtensionSlotSvgRoots<TSlots extends readonly ExtensionSlotName[]> = Readonly<Record<TSlots[number], SVGGElement>>;
+export type ExtensionSlotName = (typeof ALL_EXTENSION_SLOTS)[number];
+export type ExtensionSlotSvgRoot<TSlot extends ExtensionSlotName> = TSlot extends 'defs' ? SVGDefsElement : SVGGElement;
+export type ExtensionSlotSvgRoots<TSlots extends readonly ExtensionSlotName[]> = Readonly<{
+    [TSlot in TSlots[number]]: ExtensionSlotSvgRoot<TSlot>;
+}>;
 export type ExtensionAllocatedSlotsInternal = Partial<ExtensionSlotSvgRoots<readonly ExtensionSlotName[]>>;
 export interface ExtensionInstanceMountOptions<TSlots extends readonly ExtensionSlotName[]> {
     slotRoots: ExtensionSlotSvgRoots<TSlots>;

package/dist/extensions/types/basic/mount.js

@@ -10,5 +10,3 @@ export const ALL_EXTENSION_SLOTS = [
     'drag',
     'overDrag'
 ];
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _checkAllExtensionSlotsExact = true;

package/dist/extensions/types/basic/transient-visuals.d.ts

@@ -1,4 +1,4 @@
-import { Square } from '../../../state/board/types/internal.js';
+import type { Square } from '../../../state/board/types/internal.js';
 export interface ScenePoint {
     readonly x: number;
     readonly y: number;

package/dist/extensions/types/context/animation.d.ts

@@ -1,6 +1,6 @@
-import { ExtensionInvalidationState } from '../../invalidation/types.js';
-import { ExtensionAnimationSession } from '../basic/animation.js';
-import { ExtensionRenderContext } from './render.js';
+import type { ExtensionInvalidationState } from '../../invalidation/types.js';
+import type { ExtensionAnimationSession } from '../basic/animation.js';
+import type { ExtensionRenderContext } from './render.js';
 export interface ExtensionSubmittedAnimationSession extends ExtensionAnimationSession {
     readonly status: 'submitted';
 }

package/dist/extensions/types/context/events.d.ts

@@ -1,5 +1,6 @@
-import { SceneEvent } from '../basic/events.js';
+import type { RuntimeInteractionAction, SceneEvent } from '../basic/events.js';
 export interface ExtensionOnEventContext {
     rawEvent: Event;
     sceneEvent: SceneEvent | null;
+    runtimeInteractionActionPreview: RuntimeInteractionAction | null;
 }

package/dist/extensions/types/context/update.d.ts

@@ -1,11 +1,12 @@
-import { RuntimeReadonlyMutationSession } from '../../../runtime/mutation/types.js';
-import { ExtensionInvalidationState } from '../../invalidation/types.js';
-import { RenderFrameSnapshot } from '../basic/render.js';
-import { UpdateFrameSnapshot, UpdateFrameSnapshotMounted, UpdateFrameSnapshotUnmounted } from '../basic/update.js';
+import type { RuntimeReadonlyMutationSession } from '../../../runtime/mutation/types.js';
+import type { ExtensionInvalidationState } from '../../invalidation/types.js';
+import type { RenderFrameSnapshot } from '../basic/render.js';
+import type { UpdateFrameSnapshot, UpdateFrameSnapshotMounted, UpdateFrameSnapshotUnmounted } from '../basic/update.js';
 export interface ExtensionUpdateContextCommon {
     readonly previousFrame: UpdateFrameSnapshot | null;
     readonly mutation: RuntimeReadonlyMutationSession;
     readonly currentFrame: UpdateFrameSnapshot;
+    readonly invalidation: ExtensionInvalidationState;
 }
 export interface ExtensionUpdateContextCommonUnmounted extends ExtensionUpdateContextCommon {
     readonly currentFrame: UpdateFrameSnapshotUnmounted;
@@ -14,9 +15,7 @@ export interface ExtensionUpdateContextCommonMounted extends ExtensionUpdateCont
     readonly currentFrame: UpdateFrameSnapshotMounted;
 }
 export type ExtensionUpdateContextUnmounted = ExtensionUpdateContextCommonUnmounted;
-export interface ExtensionUpdateContextMounted extends ExtensionUpdateContextCommonMounted {
-    readonly invalidation: ExtensionInvalidationState;
-}
+export type ExtensionUpdateContextMounted = ExtensionUpdateContextCommonMounted;
 export type ExtensionUpdateContext = ExtensionUpdateContextUnmounted | ExtensionUpdateContextMounted;
 export declare function isUpdateContextCommonMounted<T extends ExtensionUpdateContextCommon>(context: T): context is T & ExtensionUpdateContextCommonMounted;
 export declare function isUpdateContextMounted<T extends ExtensionUpdateContext>(context: T): context is T & ExtensionUpdateContextMounted;

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

@@ -1,3 +1,4 @@
+import type { SvgIdResolver } from '../../render/svg/ids.js';
 import { ExtensionDragSessionSnapshot } from './basic/interaction.js';
 import { ExtensionInstanceMountOptions, ExtensionSlotName } from './basic/mount.js';
 import { ExtensionAnimationFinishedContext, ExtensionCleanAnimationContext, ExtensionPrepareAnimationContext, ExtensionRenderAnimationContext } from './context/animation.js';
@@ -19,6 +20,7 @@ interface ExtensionInstanceBase<TId extends string, TSlots extends readonly Exte
     onAnimationFinished?(context: ExtensionAnimationFinishedContext): void;
     cleanAnimation?(context: ExtensionCleanAnimationContext): void;
     completeDrag?(session: ExtensionDragSessionSnapshot): void;
+    cancelDrag?(session: ExtensionDragSessionSnapshot): void;
     renderTransientVisuals?(context: ExtensionRenderTransientVisualsContext): void;
     onUIMoveRequest?(context: ExtensionPendingUIMoveRequestContext): void;
     onEvent?(context: ExtensionOnEventContext): void;
@@ -30,6 +32,7 @@ export type ExtensionInstance<TId extends string, TSlots extends readonly Extens
 export type AnyExtensionInstance = ExtensionInstance<string, readonly ExtensionSlotName[], unknown>;
 export interface ExtensionCreateInstanceOptions {
     runtimeSurface: ExtensionRuntimeSurface;
+    svgIds: SvgIdResolver;
 }
 export interface ExtensionDefinition<TId extends string, TSlots extends readonly ExtensionSlotName[], TPublic> {
     readonly id: TId;

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

@@ -43,6 +43,7 @@ export interface ExtensionSystem {
     onUIMoveRequest(context: ExtensionPendingUIMoveRequestContext): void;
     onEvent(context: ExtensionOnEventContext): void;
     completeDrag(session: DragSessionExtensionOwned): void;
+    cancelDrag(session: DragSessionExtensionOwned): void;
     onUnmount(): void;
     onDestroy(): void;
 }

package/dist/extensions/types/surface/commands.d.ts

@@ -27,7 +27,7 @@ export interface ExtensionRuntimeSurfaceCommands {
     clearInteraction(): boolean;
     resolveDeferredUIMoveRequest(details: DeferredUIMoveResolutionDetails): Move;
     cancelDeferredUIMoveRequest(): boolean;
-    requestRender(request: ExtensionRuntimeSurfaceCommandsRenderRequest): void;
+    requestRender(request: ExtensionRuntimeSurfaceCommandsRenderRequest): boolean;
     getSnapshot(): ExtensionRuntimeSurfaceCommandsSnapshot;
 }
 export interface ExtensionRuntimeSurfaceCommandsInternalSurface extends ExtensionRuntimeSurfaceCommands {

package/dist/extensions/types/surface/main.d.ts

@@ -1,10 +1,12 @@
-import { ExtensionAnimationController } from '../basic/animation.js';
-import { ExtensionRuntimeSurfaceCommands } from './commands.js';
-import { ExtensionRuntimeSurfaceEvents } from './events.js';
-import { ExtensionRuntimeSurfaceTransientVisuals } from './transient-visuals.js';
+import type { ExtensionInvalidationState } from '../../invalidation/types.js';
+import type { ExtensionAnimationController } from '../basic/animation.js';
+import type { ExtensionRuntimeSurfaceCommands } from './commands.js';
+import type { ExtensionRuntimeSurfaceEvents } from './events.js';
+import type { ExtensionRuntimeSurfaceTransientVisuals } from './transient-visuals.js';
 export interface ExtensionRuntimeSurface {
     readonly commands: ExtensionRuntimeSurfaceCommands;
     readonly animation: ExtensionAnimationController;
     readonly events: ExtensionRuntimeSurfaceEvents;
     readonly transientVisuals: ExtensionRuntimeSurfaceTransientVisuals;
+    readonly invalidation: ExtensionInvalidationState;
 }

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

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

package/dist/extensions/types/wrapper.js

@@ -1,5 +1,7 @@
 import { createActiveTarget } from '../first-party/active-target/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_ACTIVE_TARGET } from '../first-party/active-target/types.js';
+import { createAnnotations } from '../first-party/annotations/factory.js';
+import { EXTENSION_ID as EXTENSION_ID_ANNOTATIONS } from '../first-party/annotations/types/main.js';
 import { createAutoPromote } from '../first-party/auto-promote/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_AUTO_PROMOTE } from '../first-party/auto-promote/types.js';
 import { createBoardEvents } from '../first-party/board-events/factory.js';
@@ -14,23 +16,29 @@ import { createPromotion } from '../first-party/promotion/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_PROMOTION } from '../first-party/promotion/types/main.js';
 import { createSelectedSquare } from '../first-party/selected-square/factory.js';
 import { EXTENSION_ID as EXTENSION_ID_SELECTED_SQUARE } from '../first-party/selected-square/types.js';
+import { createWatermark } from '../first-party/watermark/factory.js';
+import { EXTENSION_ID as EXTENSION_ID_WATERMARK } from '../first-party/watermark/types.js';
 export const builtInExtensionFactoryMap = {
     [EXTENSION_ID_RENDERER]: createMainRenderer,
+    [EXTENSION_ID_WATERMARK]: createWatermark,
     [EXTENSION_ID_SELECTED_SQUARE]: createSelectedSquare,
     [EXTENSION_ID_LAST_MOVE]: createLastMove,
     [EXTENSION_ID_ACTIVE_TARGET]: createActiveTarget,
     [EXTENSION_ID_LEGAL_MOVES]: createLegalMoves,
     [EXTENSION_ID_BOARD_EVENTS]: createBoardEvents,
     [EXTENSION_ID_AUTO_PROMOTE]: createAutoPromote,
-    [EXTENSION_ID_PROMOTION]: createPromotion
+    [EXTENSION_ID_PROMOTION]: createPromotion,
+    [EXTENSION_ID_ANNOTATIONS]: createAnnotations
 };
 export const DefaultBuiltinChessboardExtensions = [
     EXTENSION_ID_RENDERER,
+    EXTENSION_ID_WATERMARK,
     EXTENSION_ID_SELECTED_SQUARE,
     EXTENSION_ID_LAST_MOVE,
     EXTENSION_ID_ACTIVE_TARGET,
     EXTENSION_ID_LEGAL_MOVES,
     EXTENSION_ID_BOARD_EVENTS,
     EXTENSION_ID_AUTO_PROMOTE,
-    EXTENSION_ID_PROMOTION
+    EXTENSION_ID_PROMOTION,
+    EXTENSION_ID_ANNOTATIONS
 ];

package/dist/extensions/update.js

@@ -1,21 +1,17 @@
-import { isUpdateContextCommonMounted } from './types/context/update.js';
 export function extensionSystemUpdateState(state, request) {
     // Prepare base context
-    const contextCommon = {
+    const contextCommonPart = {
         previousFrame: state.currentFrame,
         mutation: request.mutation,
         currentFrame: request.state
     };
     // Update invalidation state based on the new request
     for (const extension of state.extensions.values()) {
-        const context = isUpdateContextCommonMounted(contextCommon)
-            ? {
-                ...contextCommon,
-                invalidation: extension.invalidation
-            }
-            : {
-                ...contextCommon
-            };
+        const contextCommon = {
+            ...contextCommonPart,
+            invalidation: extension.invalidation
+        };
+        const context = contextCommon;
         extension.instance.onUpdate?.(context);
     }
     state.currentFrame = request.state;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export type { MoveOutput } from './extensions/build/index.js';
 export type { ColorInput, MoveRequestInput, PiecePositionRecordString, PositionInput } from './state/board/types/input.js';
+export type { MoveOutput } from './state/board/types/output.js';
 export type { MovabilityInput, MoveDestinationInput } from './state/interaction/types/input.js';
 export { createBoard } from './wrapper/factory.js';
 export type { Chessboard, ChessboardExtensionInput, ChessboardInitOptions } from './wrapper/types.js';

package/dist/render/mount.js

@@ -1,5 +1,5 @@
 import { validateIsMounted, validateIsNotMounted } from './rendering/helpers.js';
-import { clearElementChildren } from './svg/helpers.js';
+import { clearSvgElementChildren } from './svg/helpers.js';
 export function renderMount(state, element) {
     validateIsNotMounted(state);
     state.container = element;
@@ -16,8 +16,8 @@ export function renderUnmount(state) {
     for (const extensionRec of state.extensions.values()) {
         extensionRec.extension.instance.unmount?.();
         // clear the slot roots
-        for (const slotRoot of Object.values(extensionRec.render.slots)) {
-            clearElementChildren(slotRoot);
+        for (const [, slotRoot] of Object.entries(extensionRec.render.slots)) {
+            clearSvgElementChildren(slotRoot);
         }
     }
     // remove our svg root from the container

package/dist/render/rendering/state.js

@@ -1,5 +1,5 @@
 import { sceneSizesEqual } from '../../layout/geometry/helpers.js';
-import { updateElementAttributes } from '../svg/helpers.js';
+import { updateSvgElementAttributes } from '../svg/helpers.js';
 import { validateIsMounted } from './helpers.js';
 export function checkNeedsRender(state) {
     for (const extensionRec of state.extensions.values()) {
@@ -20,7 +20,7 @@ export function performRenderPass(state, request) {
     const currentSize = request.layout.geometry.sceneSize;
     const prevSize = state.currentFrame?.layout.geometry?.sceneSize ?? null;
     if (!sceneSizesEqual(currentSize, prevSize)) {
-        updateElementAttributes(state.svgRoots.svgRoot, {
+        updateSvgElementAttributes(state.svgRoots.svgRoot, {
             width: currentSize.width.toString(),
             height: currentSize.height.toString(),
             viewBox: `0 0 ${currentSize.width} ${currentSize.height}`

package/dist/render/svg/factory.js

@@ -1,43 +1,58 @@
-import { createSvgElement } from './helpers.js';
+import { createSvgDefsElement, createSvgElement, createSvgRootElement } from './helpers.js';
 export function createSvgRoots(options) {
-    const { doc } = options;
-    const svgRoot = createSvgElement(doc, 'svg', { 'data-chessboard-id': 'svg-root' });
+    const { element } = options;
+    const svgRoot = createSvgRootElement(element, { 'data-chessboard-id': 'svg-root' });
     svgRoot.style.setProperty('user-select', 'none');
     svgRoot.style.setProperty('-webkit-user-select', 'none');
     svgRoot.style.setProperty('touch-action', 'pinch-zoom');
     svgRoot.style.setProperty('-webkit-touch-callout', 'none');
     svgRoot.style.setProperty('-webkit-tap-highlight-color', 'transparent');
+    // Create children in the correct order
+    const board = createSvgElement(svgRoot, 'g', { 'data-chessboard-id': 'board-root' });
+    const coordinates = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'coordinates-root'
+    });
+    const underPieces = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'under-pieces-root'
+    });
+    const pieces = createSvgElement(svgRoot, 'g', { 'data-chessboard-id': 'pieces-root' });
+    const overPieces = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'over-pieces-root'
+    });
+    const animation = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'animation-root'
+    });
+    const underDrag = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'under-drag-root'
+    });
+    const drag = createSvgElement(svgRoot, 'g', { 'data-chessboard-id': 'drag-root' });
+    const overDrag = createSvgElement(svgRoot, 'g', {
+        'data-chessboard-id': 'over-drag-root'
+    });
     const result = {
         svgRoot,
-        defs: createSvgElement(doc, 'defs', { 'data-chessboard-id': 'defs-root' }),
-        board: createSvgElement(doc, 'g', { 'data-chessboard-id': 'board-root' }),
-        coordinates: createSvgElement(doc, 'g', { 'data-chessboard-id': 'coordinates-root' }),
-        underPieces: createSvgElement(doc, 'g', { 'data-chessboard-id': 'under-pieces-root' }),
-        pieces: createSvgElement(doc, 'g', { 'data-chessboard-id': 'pieces-root' }),
-        overPieces: createSvgElement(doc, 'g', { 'data-chessboard-id': 'over-pieces-root' }),
-        animation: createSvgElement(doc, 'g', { 'data-chessboard-id': 'animation-root' }),
-        underDrag: createSvgElement(doc, 'g', { 'data-chessboard-id': 'under-drag-root' }),
-        drag: createSvgElement(doc, 'g', { 'data-chessboard-id': 'drag-root' }),
-        overDrag: createSvgElement(doc, 'g', { 'data-chessboard-id': 'over-drag-root' })
+        board,
+        coordinates,
+        underPieces,
+        pieces,
+        overPieces,
+        animation,
+        underDrag,
+        drag,
+        overDrag
     };
-    // Attach layers in the correct order
-    svgRoot.appendChild(result.defs);
-    svgRoot.appendChild(result.board);
-    svgRoot.appendChild(result.coordinates);
-    svgRoot.appendChild(result.underPieces);
-    svgRoot.appendChild(result.pieces);
-    svgRoot.appendChild(result.overPieces);
-    svgRoot.appendChild(result.animation);
-    svgRoot.appendChild(result.underDrag);
-    svgRoot.appendChild(result.drag);
-    svgRoot.appendChild(result.overDrag);
     return result;
 }
 export function allocateExtensionSlotRoots(svgRoots, extensionId, slots) {
     const result = {};
     for (const slot of slots) {
         const id = `extension-slot-root-${slot}-${extensionId}`;
-        result[slot] = createSvgElement(svgRoots[slot], 'g', { 'data-chessboard-id': id });
+        if (slot === 'defs') {
+            result[slot] = createSvgDefsElement(svgRoots.svgRoot, { 'data-chessboard-id': id });
+        }
+        else {
+            result[slot] = createSvgElement(svgRoots[slot], 'g', { 'data-chessboard-id': id });
+        }
     }
     return result;
 }

package/dist/render/svg/helpers.d.ts

@@ -9,10 +9,14 @@ export declare const SVG_NS = "http://www.w3.org/2000/svg";
 export declare function isLightSquare(sq: Square): boolean;
 export type SvgElementNames = keyof SVGElementTagNameMap;
 export type SvgElementAttributes = Record<string, string>;
-export type SvgElementOtherAttributes = SvgElementAttributes;
 export type SvgElementWithIdAttributes = SvgElementAttributes & {
     'data-chessboard-id': string;
 };
-export declare function createSvgElement<K extends SvgElementNames>(parentOrDoc: Element | Document, name: K, attrs: SvgElementWithIdAttributes): SVGElementTagNameMap[K];
-export declare function updateElementAttributes(element: Element, attrs: SvgElementOtherAttributes): void;
-export declare function clearElementChildren(element: Element): void;
+export type SvgElementOtherAttributes = SvgElementAttributes & {
+    'data-chessboard-id'?: never;
+};
+export declare function createSvgRootElement(parent: HTMLElement, attrs: SvgElementWithIdAttributes): SVGSVGElement;
+export declare function createSvgDefsElement(parent: SVGSVGElement, attrs: SvgElementWithIdAttributes): SVGDefsElement;
+export declare function createSvgElement<K extends Exclude<SvgElementNames, 'svg' | 'defs'>>(parent: SVGElement, name: K, attrs: SvgElementWithIdAttributes): SVGElementTagNameMap[K];
+export declare function updateSvgElementAttributes(element: SVGElement, attrs: SvgElementOtherAttributes): void;
+export declare function clearSvgElementChildren(element: SVGElement): void;

package/dist/render/svg/helpers.js

@@ -11,23 +11,38 @@ export function isLightSquare(sq) {
     const r = rankOf(sq);
     return ((f + r) & 1) === 1;
 }
-export function createSvgElement(parentOrDoc, name, attrs) {
-    const doc = parentOrDoc instanceof Document ? parentOrDoc : parentOrDoc.ownerDocument;
-    const el = doc.createElementNS(SVG_NS, name);
+function _updateElementAttributes(element, attrs) {
     for (const [key, value] of Object.entries(attrs)) {
-        el.setAttribute(key, value);
-    }
-    if (parentOrDoc instanceof Element) {
-        parentOrDoc.appendChild(el);
+        element.setAttribute(key, value);
     }
+}
+export function createSvgRootElement(parent, attrs) {
+    const doc = parent.ownerDocument;
+    const el = doc.createElementNS(SVG_NS, 'svg');
+    _updateElementAttributes(el, attrs);
+    parent.appendChild(el);
     return el;
 }
-export function updateElementAttributes(element, attrs) {
-    for (const [key, value] of Object.entries(attrs)) {
-        element.setAttribute(key, value);
-    }
+export function createSvgDefsElement(parent, attrs) {
+    const doc = parent.ownerDocument;
+    const el = doc.createElementNS(SVG_NS, 'defs');
+    _updateElementAttributes(el, attrs);
+    // Keep extension-owned defs roots before visual roots.
+    const firstNonDefsChild = Array.from(parent.children).find((child) => child.tagName.toLowerCase() !== 'defs');
+    parent.insertBefore(el, firstNonDefsChild ?? null);
+    return el;
+}
+export function createSvgElement(parent, name, attrs) {
+    const doc = parent.ownerDocument;
+    const el = doc.createElementNS(SVG_NS, name);
+    _updateElementAttributes(el, attrs);
+    parent.appendChild(el);
+    return el;
+}
+export function updateSvgElementAttributes(element, attrs) {
+    _updateElementAttributes(element, attrs);
 }
-export function clearElementChildren(element) {
+export function clearSvgElementChildren(element) {
     while (element.firstChild) {
         element.removeChild(element.firstChild);
     }

package/dist/render/svg/ids.d.ts

@@ -0,0 +1,6 @@
+export interface SvgIdResolver {
+    readonly prefix: string;
+    makeId(scope: string, localId: string): string;
+    makeHref(scope: string, localId: string): string;
+}
+export declare function createSvgIdResolver(): SvgIdResolver;

package/dist/render/svg/ids.js

@@ -0,0 +1,11 @@
+let nextId = 0;
+export function createSvgIdResolver() {
+    const prefix = `cb${nextId++}`;
+    function makeId(scope, localId) {
+        return `${prefix}-${scope}-${localId}`;
+    }
+    function makeHref(scope, localId) {
+        return `#${makeId(scope, localId)}`;
+    }
+    return { prefix, makeId, makeHref };
+}

package/dist/render/types.d.ts

@@ -3,9 +3,10 @@ import { RenderFrameSnapshot } from '../extensions/types/basic/render.js';
 import { TransientInput } from '../extensions/types/basic/transient-visuals.js';
 import { ExtensionSystemExtensionRecord, ExtensionSystemSharedDataForRenderSystem } from '../extensions/types/main.js';
 import { Scheduler } from './scheduler/types.js';
-export interface SvgRoots extends ExtensionSlotSvgRoots<typeof ALL_EXTENSION_SLOTS> {
+export type RootExtensionSlotName = Exclude<(typeof ALL_EXTENSION_SLOTS)[number], 'defs'>;
+export declare const ROOT_EXTENSION_SLOTS: readonly RootExtensionSlotName[];
+export interface SvgRoots extends ExtensionSlotSvgRoots<typeof ROOT_EXTENSION_SLOTS> {
     readonly svgRoot: SVGSVGElement;
-    readonly defs: SVGDefsElement;
 }
 export interface RenderExtensionRecordRender {
     readonly slots: ExtensionAllocatedSlotsInternal;
@@ -24,7 +25,7 @@ export interface RenderSystemInternal {
     readonly transientVisualsSubscribers: ReadonlySet<string>;
 }
 export interface RenderSystemInitOptions {
-    doc: Document;
+    element: HTMLElement;
     sharedDataFromExtensionSystem: ExtensionSystemSharedDataForRenderSystem;
 }
 export interface RenderSystemInitOptionsInternal extends RenderSystemInitOptions {