@mirasen/chessboard 1.1.5 → 1.2.0

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';
@@ -17,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", "watermark", "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';
@@ -25,7 +27,8 @@ export const builtInExtensionFactoryMap = {
     [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,
@@ -36,5 +39,6 @@ export const DefaultBuiltinChessboardExtensions = [
     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 {

package/dist/render/types.js

@@ -1 +1,2 @@
-export {};
+import { ALL_EXTENSION_SLOTS } from '../extensions/types/basic/mount.js';
+export const ROOT_EXTENSION_SLOTS = ALL_EXTENSION_SLOTS.filter((slot) => slot !== 'defs');

package/dist/runtime/factory/input.d.ts

@@ -1,3 +1,5 @@
+import { DragSessionSnapshot } from '../../state/interaction/types/internal.js';
 import { RuntimeInteractionSurface } from '../input/controller/types.js';
-import { GetInternalState } from '../types/main.js';
+import { GetInternalState, RuntimeInternal } from '../types/main.js';
+export declare function notifyExtensionCancelDragIfOwned(internalState: RuntimeInternal, dragSession: DragSessionSnapshot | null): void;
 export declare function createRuntimeInteractionSurface(state: GetInternalState): RuntimeInteractionSurface;

package/dist/runtime/factory/input.js

@@ -3,6 +3,11 @@ import { isEmptyPieceCode } from '../../state/board/check.js';
 import { isDragSessionCoreOwned } from '../../state/interaction/helpers.js';
 import { runtimeRunMutationPipeline } from '../mutation/run.js';
 import { uiMoveCompleteTo } from './helpers.js';
+export function notifyExtensionCancelDragIfOwned(internalState, dragSession) {
+    if (dragSession && !isDragSessionCoreOwned(dragSession)) {
+        internalState.extensionSystem.cancelDrag(dragSession);
+    }
+}
 export function createRuntimeInteractionSurface(state) {
     return {
         getInteractionStateSnapshot() {
@@ -80,13 +85,17 @@ export function createRuntimeInteractionSurface(state) {
         cancelActiveInteraction() {
             const internalState = state();
             const mutationSession = internalState.mutation.getSession();
-            internalState.state.interaction.clearActive(mutationSession);
+            const interaction = internalState.state.interaction;
+            notifyExtensionCancelDragIfOwned(internalState, interaction.dragSession);
+            interaction.clearActive(mutationSession);
             runtimeRunMutationPipeline(internalState);
         },
         cancelInteraction() {
             const internalState = state();
             const mutationSession = internalState.mutation.getSession();
-            internalState.state.interaction.clear(mutationSession);
+            const interaction = internalState.state.interaction;
+            notifyExtensionCancelDragIfOwned(internalState, interaction.dragSession);
+            interaction.clear(mutationSession);
             runtimeRunMutationPipeline(internalState);
         },
         updateDragSessionCurrentTarget(target) {

package/dist/runtime/factory/main.js

@@ -1,6 +1,6 @@
 import assert from '@ktarmyshov/assert';
 import { createExtensionSystem } from '../../extensions/factory/main.js';
-import { assertFrameRenderable } from '../../extensions/types/basic/update.js';
+import { isFrameRenderable } from '../../extensions/types/basic/update.js';
 import { createLayout } from '../../layout/factory.js';
 import { createRenderSystem } from '../../render/factory.js';
 import { isNonEmptyPieceCode } from '../../state/board/check.js';
@@ -11,11 +11,11 @@ import { runtimeDestroy, runtimeMount, runtimeUnmount } from '../lifecycle.js';
 import { createRuntimeMutationPipeline } from '../mutation/factory.js';
 import { runtimeRunMutationPipeline } from '../mutation/run.js';
 import { createExtensionRuntimeSurfaceEvents } from './events.js';
-import { createRuntimeInteractionSurface } from './input.js';
+import { createRuntimeInteractionSurface, notifyExtensionCancelDragIfOwned } from './input.js';
 function createRuntimeInternal(options) {
     const extensionSystem = createExtensionSystem(options);
     const render = createRenderSystem({
-        doc: options.doc,
+        element: options.element,
         sharedDataFromExtensionSystem: extensionSystem.getSharedDataForRenderSystem()
     });
     return {
@@ -69,9 +69,13 @@ function createExtensionRuntimeSurfaceCommandsInternalSurface(getInternalState)
                     state: state.state.getSnapshot(),
                     layout: state.layout.getSnapshot()
                 };
-                assertFrameRenderable(renderRequest);
+                if (!isFrameRenderable(renderRequest)) {
+                    return false;
+                }
                 state.renderSystem.requestRender(renderRequest);
+                return true;
             }
+            return false;
         },
         setOrientation(orientation) {
             const state = getInternalState();
@@ -114,6 +118,7 @@ function createExtensionRuntimeSurfaceCommandsInternalSurface(getInternalState)
         clearActiveInteraction() {
             const state = getInternalState();
             const mutationSession = state.mutation.getSession();
+            notifyExtensionCancelDragIfOwned(state, state.state.interaction.dragSession);
             const changed = state.state.interaction.clearActive(mutationSession);
             runtimeRunMutationPipeline(state);
             return changed;
@@ -121,6 +126,7 @@ function createExtensionRuntimeSurfaceCommandsInternalSurface(getInternalState)
         clearInteraction() {
             const state = getInternalState();
             const mutationSession = state.mutation.getSession();
+            notifyExtensionCancelDragIfOwned(state, state.state.interaction.dragSession);
             const changed = state.state.interaction.clear(mutationSession);
             runtimeRunMutationPipeline(state);
             return changed;

package/dist/runtime/input/adapter/event.js

@@ -1,11 +1,11 @@
 import { ALL_SCENE_POINTER_EVENT_TYPES } from '../../../extensions/types/basic/events.js';
 import { pointerEventDestroy, pointerEventHandler } from './pointer.js';
 export function eventHandler(state, e) {
-    let context = null;
+    let context;
     if (ALL_SCENE_POINTER_EVENT_TYPES.has(e.type)) {
         context = pointerEventHandler(state, e);
     }
-    if (!context) {
+    else {
         context = {
             rawEvent: e,
             sceneEvent: null