@mirasen/chessboard 1.1.5 → 1.2.1

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

package/dist/runtime/input/adapter/pointer.d.ts

@@ -1,6 +1,6 @@
-import { ExtensionOnEventContext } from '../../../extensions/types/context/events.js';
+import { InteractionControllerOnEventContext } from '../controller/types.js';
 import { InputAdapterInternal } from './types.js';
-export declare function pointerEventHandler(state: InputAdapterInternal, e: PointerEvent): ExtensionOnEventContext;
+export declare function pointerEventHandler(state: InputAdapterInternal, e: PointerEvent): InteractionControllerOnEventContext;
 /** Release capture for the currently tracked pointer and clear tracking state. */
 export declare function releaseCapture(state: InputAdapterInternal): void;
 export declare function adapterOnPointerDown(state: InputAdapterInternal, e: PointerEvent): void;

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

@@ -1,2 +1,2 @@
-import { InteractionController, InteractionControllerInitOptions } from './types.js';
+import type { InteractionController, InteractionControllerInitOptions } from './types.js';
 export declare function createInteractionController(options: InteractionControllerInitOptions): InteractionController;

package/dist/runtime/input/controller/factory.js

@@ -1,4 +1,4 @@
-import { handlePointerCancel, handlePointerDown, handlePointerMove, handlePointerUp } from './pointer.js';
+import { determineRuntimeInteractionAction } from './interaction.js';
 import { transmitTransientInput } from './transient-visuals.js';
 function createInteractionControllerInternal(options) {
     return {
@@ -9,24 +9,44 @@ export function createInteractionController(options) {
     const internalState = createInteractionControllerInternal(options);
     return {
         onEvent(context) {
-            internalState.surface.onEvent(context);
+            const action = determineRuntimeInteractionAction(internalState, context);
+            const extensionContext = {
+                ...context,
+                runtimeInteractionActionPreview: action
+            };
+            internalState.surface.onEvent(extensionContext);
             if (context.rawEvent.defaultPrevented) {
                 transmitTransientInput(internalState, context);
                 return; // The event has been handled by the surface (extensions)
             }
-            switch (context.rawEvent.type) {
-                case 'pointerdown':
-                    handlePointerDown(internalState, context);
-                    break;
-                case 'pointermove':
-                    handlePointerMove(internalState, context);
-                    break;
-                case 'pointerup':
-                    handlePointerUp(internalState, context);
-                    break;
-                case 'pointercancel':
-                    handlePointerCancel(internalState, context);
-                    break;
+            if (action) {
+                switch (action.type) {
+                    case 'startLiftedDrag':
+                        internalState.surface.startLiftedDrag(action.source, action.target);
+                        break;
+                    case 'startReleaseTargetingDrag':
+                        internalState.surface.startReleaseTargetingDrag(action.source, action.target);
+                        break;
+                    case 'completeCoreDragTo':
+                        internalState.surface.completeCoreDragTo(action.target);
+                        break;
+                    case 'completeExtensionDrag':
+                        internalState.surface.completeExtensionDrag(action.target);
+                        break;
+                    case 'updateDragSessionCurrentTarget':
+                        internalState.surface.updateDragSessionCurrentTarget(action.target);
+                        break;
+                    case 'cancelActiveInteraction':
+                        internalState.surface.cancelActiveInteraction();
+                        break;
+                    case 'cancelInteraction':
+                        internalState.surface.cancelInteraction();
+                        break;
+                    default:
+                        throw new Error(
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        `Unhandled RuntimeInteractionAction type: ${String(action.type)}`);
+                }
             }
             transmitTransientInput(internalState, context);
         }

package/dist/runtime/input/controller/helpers.d.ts

@@ -1,3 +1,3 @@
 import type { Square } from '../../../state/board/types/internal.js';
-import { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
+import type { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
 export declare function canMoveTo(snapshot: InteractionStateSnapshot, target: Square): boolean;

package/dist/runtime/input/controller/interaction.d.ts

@@ -0,0 +1,3 @@
+import type { RuntimeInteractionAction } from '../../../extensions/types/basic/events.js';
+import type { InteractionControllerInternal, InteractionControllerOnEventContext } from './types.js';
+export declare function determineRuntimeInteractionAction(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;

package/dist/runtime/input/controller/interaction.js

@@ -0,0 +1,14 @@
+import { determineActionPointerCancel, determineActionPointerDown, determineActionPointerMove, determineActionPointerUp } from './pointer.js';
+export function determineRuntimeInteractionAction(state, context) {
+    switch (context.rawEvent.type) {
+        case 'pointerdown':
+            return determineActionPointerDown(state, context);
+        case 'pointermove':
+            return determineActionPointerMove(state, context);
+        case 'pointerup':
+            return determineActionPointerUp(state, context);
+        case 'pointercancel':
+            return determineActionPointerCancel(state, context);
+    }
+    return null;
+}

package/dist/runtime/input/controller/pointer.d.ts

@@ -1,6 +1,6 @@
-import { ExtensionOnEventContext } from '../../../extensions/types/context/events.js';
-import { InteractionControllerInternal } from './types.js';
-export declare function handlePointerDown(state: InteractionControllerInternal, context: ExtensionOnEventContext): void;
-export declare function handlePointerMove(state: InteractionControllerInternal, context: ExtensionOnEventContext): void;
-export declare function handlePointerUp(state: InteractionControllerInternal, context: ExtensionOnEventContext): void;
-export declare function handlePointerCancel(state: InteractionControllerInternal, context: ExtensionOnEventContext): void;
+import type { RuntimeInteractionAction } from '../../../extensions/types/basic/events.js';
+import type { InteractionControllerInternal, InteractionControllerOnEventContext } from './types.js';
+export declare function determineActionPointerDown(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
+export declare function determineActionPointerMove(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
+export declare function determineActionPointerUp(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;
+export declare function determineActionPointerCancel(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): RuntimeInteractionAction | null;

package/dist/runtime/input/controller/pointer.js

@@ -3,19 +3,19 @@ import { isEmptyPieceCode, isNonEmptyPieceCode } from '../../../state/board/chec
 import { fromPieceCode } from '../../../state/board/piece.js';
 import { isDragSessionCoreOwned } from '../../../state/interaction/helpers.js';
 import { canMoveTo } from './helpers.js';
-export function handlePointerDown(state, context) {
-    assert(context.rawEvent.type === 'pointerdown', 'handlePointerDown should only be called for pointerdown events');
+export function determineActionPointerDown(state, context) {
+    assert(context.rawEvent.type === 'pointerdown', 'determineActionPointerDown should only be called for pointerdown events');
     const rawEvent = context.rawEvent;
     if (rawEvent.button !== 0) {
         // Only handle left-click for now
-        return;
+        return null;
     }
     const sceneEvent = context.sceneEvent;
     assert(sceneEvent, 'Scene event should be present for pointer events');
     const interaction = state.surface.getInteractionStateSnapshot();
     if (interaction.dragSession) {
         // Ignore pointer down events if there's already an active drag session
-        return;
+        return null;
     }
     if (sceneEvent.targetSquare !== null) {
         /**
@@ -28,16 +28,22 @@ export function handlePointerDown(state, context) {
             assert(isNonEmptyPieceCode(selectedPieceCode), 'Selected piece code must be non-zero');
             const targetPieceCode = state.surface.getPieceCodeAt(sceneEvent.targetSquare);
             if (isEmptyPieceCode(targetPieceCode)) {
-                state.surface.startReleaseTargetingDrag(interaction.selected.square, sceneEvent.targetSquare);
-                return;
+                return {
+                    type: 'startReleaseTargetingDrag',
+                    source: interaction.selected.square,
+                    target: sceneEvent.targetSquare
+                };
             }
             const isLegalMoveTarget = interaction.movability.mode === 1 /* MovabilityModeCode.Free */ ||
                 (interaction.movability.mode === 2 /* MovabilityModeCode.Strict */ &&
                     interaction.activeDestinations.has(sceneEvent.targetSquare));
             if (fromPieceCode(targetPieceCode).color !== fromPieceCode(selectedPieceCode).color &&
                 isLegalMoveTarget) {
-                state.surface.startReleaseTargetingDrag(interaction.selected.square, sceneEvent.targetSquare);
-                return;
+                return {
+                    type: 'startReleaseTargetingDrag',
+                    source: interaction.selected.square,
+                    target: sceneEvent.targetSquare
+                };
             }
         }
         /**
@@ -46,60 +52,80 @@ export function handlePointerDown(state, context) {
          */
         const pieceCode = state.surface.getPieceCodeAt(sceneEvent.targetSquare);
         if (!isEmptyPieceCode(pieceCode)) {
-            state.surface.startLiftedDrag(sceneEvent.targetSquare, sceneEvent.targetSquare);
+            return {
+                type: 'startLiftedDrag',
+                source: sceneEvent.targetSquare,
+                target: sceneEvent.targetSquare
+            };
         }
     }
+    return null;
 }
-export function handlePointerMove(state, context) {
-    assert(context.rawEvent.type === 'pointermove', 'handlePointerMove should only be called for pointermove events');
+export function determineActionPointerMove(state, context) {
+    assert(context.rawEvent.type === 'pointermove', 'determineActionPointerMove should only be called for pointermove events');
     const interaction = state.surface.getInteractionStateSnapshot();
     if (interaction.dragSession) {
-        state.surface.updateDragSessionCurrentTarget(context.sceneEvent?.targetSquare ?? null);
+        return {
+            type: 'updateDragSessionCurrentTarget',
+            target: context.sceneEvent?.targetSquare ?? null
+        };
     }
+    return null;
 }
-export function handlePointerUp(state, context) {
-    assert(context.rawEvent.type === 'pointerup', 'handlePointerUp should only be called for pointerup events');
+export function determineActionPointerUp(state, context) {
+    assert(context.rawEvent.type === 'pointerup', 'determineActionPointerUp should only be called for pointerup events');
     const interaction = state.surface.getInteractionStateSnapshot();
     const dragSession = interaction.dragSession;
     if (!dragSession) {
         // No active drag session, so nothing to do on pointer up
-        return;
+        return null;
     }
     const sceneEvent = context.sceneEvent;
     assert(sceneEvent, 'Scene event should be present for pointer events');
     if (!isDragSessionCoreOwned(dragSession)) {
         // For extension-owned drag sessions, we simply end the session without attempting to make a move,
         // since the runtime doesn't have enough information about the semantics of the drag session.
-        state.surface.completeExtensionDrag(sceneEvent.targetSquare);
-        return;
+        return {
+            type: 'completeExtensionDrag',
+            target: sceneEvent.targetSquare
+        };
     }
     // Check if the square is the same as the source square of the drag session.
     // If it is, then we can end the drag session without making a move.
     if (sceneEvent.targetSquare === dragSession.sourceSquare) {
-        state.surface.cancelActiveInteraction();
-        return;
+        return {
+            type: 'cancelActiveInteraction'
+        };
     }
     // Check if the target square is a valid destination for the selected piece.
     if (sceneEvent.targetSquare !== null && canMoveTo(interaction, sceneEvent.targetSquare)) {
-        state.surface.completeCoreDragTo(sceneEvent.targetSquare);
-        return;
+        return {
+            type: 'completeCoreDragTo',
+            target: sceneEvent.targetSquare
+        };
     }
     // Invalid target: piece returns to source for lifted drag (selection preserved),
     // or selection is cleared for release targeting.
     if (dragSession.type === 'lifted-piece-drag') {
-        state.surface.cancelActiveInteraction();
+        return {
+            type: 'cancelActiveInteraction'
+        };
     }
     else {
-        state.surface.cancelInteraction();
+        return {
+            type: 'cancelInteraction'
+        };
     }
 }
-export function handlePointerCancel(state, context) {
-    assert(context.rawEvent.type === 'pointercancel', 'handlePointerCancel should only be called for pointercancel events');
+export function determineActionPointerCancel(state, context) {
+    assert(context.rawEvent.type === 'pointercancel', 'determineActionPointerCancel should only be called for pointercancel events');
     const interaction = state.surface.getInteractionStateSnapshot();
     if (!interaction.dragSession) {
         // No active drag session, so nothing to do on pointer cancel
-        return;
+        return null;
     }
     // Cancel the active interaction on pointer cancel
-    state.surface.cancelActiveInteraction();
+    return {
+        type: 'cancelActiveInteraction'
+    };
 }

package/dist/runtime/input/controller/transient-visuals.d.ts

@@ -1,3 +1,2 @@
-import { ExtensionOnEventContext } from '../../../extensions/types/context/events.js';
-import { InteractionControllerInternal } from './types.js';
-export declare function transmitTransientInput(state: InteractionControllerInternal, context: ExtensionOnEventContext): void;
+import type { InteractionControllerInternal, InteractionControllerOnEventContext } from './types.js';
+export declare function transmitTransientInput(state: InteractionControllerInternal, context: InteractionControllerOnEventContext): void;

package/dist/runtime/input/controller/types.d.ts

@@ -1,7 +1,7 @@
-import { TransientInput } from '../../../extensions/types/basic/transient-visuals.js';
-import { ExtensionOnEventContext } from '../../../extensions/types/context/events.js';
-import { PieceCode, Square } from '../../../state/board/types/internal.js';
-import { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
+import type { TransientInput } from '../../../extensions/types/basic/transient-visuals.js';
+import type { ExtensionOnEventContext } from '../../../extensions/types/context/events.js';
+import type { PieceCode, Square } from '../../../state/board/types/internal.js';
+import type { InteractionStateSnapshot } from '../../../state/interaction/types/main.js';
 export interface RuntimeInteractionSurface {
     getInteractionStateSnapshot(): InteractionStateSnapshot;
     getPieceCodeAt(square: Square): PieceCode;
@@ -21,6 +21,7 @@ export interface InteractionControllerInternal {
 export interface InteractionControllerInitOptions {
     surface: RuntimeInteractionSurface;
 }
+export type InteractionControllerOnEventContext = Omit<ExtensionOnEventContext, 'runtimeInteractionActionPreview'>;
 export interface InteractionController {
-    onEvent(context: ExtensionOnEventContext): void;
+    onEvent(context: InteractionControllerOnEventContext): void;
 }

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

@@ -14,7 +14,7 @@ export interface RuntimeInternal extends RuntimeMutationPipelineContext {
 }
 export type GetInternalState = () => RuntimeInternal;
 export interface RuntimeInitOptions {
-    doc: Document;
+    element: HTMLElement;
     state?: RuntimeStateInitOptions;
     extensions?: readonly AnyExtensionDefinition[];
 }