@qti-editor/interaction-select-point 0.1.0

package/dist/components/qti-select-point-interaction/img-select-point.schema.d.ts

@@ -0,0 +1,3 @@
+import type { NodeSpec } from 'prosemirror-model';
+export declare const imgSelectPointNodeSpec: NodeSpec;
+//# sourceMappingURL=img-select-point.schema.d.ts.map

package/dist/components/qti-select-point-interaction/img-select-point.schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"img-select-point.schema.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/img-select-point.schema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAYjE,eAAO,MAAM,sBAAsB,EAAE,QAgCpC,CAAC"}

package/dist/components/qti-select-point-interaction/img-select-point.schema.js

@@ -0,0 +1,47 @@
+function parseNumberAttribute(value) {
+    if (value == null || value === '')
+        return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function isElementLike(node) {
+    return typeof node === 'object' && node !== null && 'getAttribute' in node && typeof node.getAttribute === 'function';
+}
+export const imgSelectPointNodeSpec = {
+    group: 'block qtiMedia',
+    atom: true,
+    selectable: true,
+    attrs: {
+        imageSrc: { default: null },
+        imageAlt: { default: null },
+        imageWidth: { default: null },
+        imageHeight: { default: null }
+    },
+    parseDOM: [
+        {
+            tag: 'img',
+            getAttrs: (node) => {
+                if (!isElementLike(node))
+                    return {};
+                return {
+                    imageSrc: node.getAttribute('src'),
+                    imageAlt: node.getAttribute('alt'),
+                    imageWidth: parseNumberAttribute(node.getAttribute('width')),
+                    imageHeight: parseNumberAttribute(node.getAttribute('height'))
+                };
+            }
+        }
+    ],
+    toDOM(node) {
+        const attrs = {};
+        if (node.attrs.imageSrc)
+            attrs.src = String(node.attrs.imageSrc);
+        if (node.attrs.imageAlt)
+            attrs.alt = String(node.attrs.imageAlt);
+        if (node.attrs.imageWidth != null)
+            attrs.width = String(node.attrs.imageWidth);
+        if (node.attrs.imageHeight != null)
+            attrs.height = String(node.attrs.imageHeight);
+        return ['img', attrs];
+    }
+};

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.commands.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from 'prosemirror-state';
+/**
+ * Command to insert a select point interaction at the current selection.
+ */
+export declare const insertSelectPointInteraction: Command;
+//# sourceMappingURL=qti-select-point-interaction.commands.d.ts.map

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.commands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qti-select-point-interaction.commands.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.commands.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,OA0B1C,CAAC"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.commands.js

@@ -0,0 +1,26 @@
+import { createInsertBlockInteractionCommand } from '@qti-editor/interaction-shared/commands/insert.js';
+/**
+ * Command to insert a select point interaction at the current selection.
+ */
+export const insertSelectPointInteraction = (state, dispatch) => {
+    return createInsertBlockInteractionCommand({
+        createNode: currentState => {
+            const { schema } = currentState;
+            const interactionType = schema.nodes.qtiSelectPointInteraction;
+            const promptType = schema.nodes.qtiPrompt;
+            const promptParagraphType = schema.nodes.qtiPromptParagraph;
+            const imgSelectPointType = schema.nodes.imgSelectPoint;
+            if (!interactionType || !promptType || !promptParagraphType || !imgSelectPointType)
+                return null;
+            const prompt = promptType.create(null, promptParagraphType.create(null, schema.text('Mark the correct point on the image.')));
+            const imgSelectPoint = imgSelectPointType.create();
+            return interactionType.create({
+                responseIdentifier: `RESPONSE_${crypto.randomUUID()}`,
+                maxChoices: 0,
+                minChoices: 0,
+                areaMappings: '[]',
+            }, [prompt, imgSelectPoint]);
+        },
+        selectionOffset: 2,
+    })(state, dispatch);
+};

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.compose.d.ts

@@ -0,0 +1,3 @@
+import type { InteractionComposeResult } from '@qti-editor/interaction-shared/composer/types.js';
+export declare function composeSelectPointInteractionElement(sourceElement: Element, xmlDoc: Document): InteractionComposeResult;
+//# sourceMappingURL=qti-select-point-interaction.compose.d.ts.map

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.compose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qti-select-point-interaction.compose.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.compose.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAmB,wBAAwB,EAAmD,MAAM,kDAAkD,CAAC;AA8FnK,wBAAgB,oCAAoC,CAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAG,wBAAwB,CAkFvH"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.compose.js

@@ -0,0 +1,154 @@
+import { selectPointInteractionComposerMetadata, SELECT_POINT_INTERACTION_TAG } from '../../composer/metadata.js';
+function toFiniteNumber(value, fallback) {
+    if (value == null || value.trim().length === 0)
+        return fallback;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function toNonEmptyString(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : null;
+}
+function parseAreaMappings(raw) {
+    const warnings = [];
+    if (!raw || raw.trim().length === 0) {
+        return { warnings };
+    }
+    let parsed;
+    try {
+        parsed = JSON.parse(raw);
+    }
+    catch {
+        warnings.push({
+            code: 'INVALID_AREA_MAPPINGS_JSON',
+            message: 'qti-select-point-interaction has invalid area-mappings JSON; skipping qti-area-mapping.',
+            tagName: SELECT_POINT_INTERACTION_TAG,
+        });
+        return { warnings };
+    }
+    if (!Array.isArray(parsed)) {
+        warnings.push({
+            code: 'INVALID_AREA_MAPPINGS_JSON',
+            message: 'qti-select-point-interaction area-mappings is not an array; skipping qti-area-mapping.',
+            tagName: SELECT_POINT_INTERACTION_TAG,
+        });
+        return { warnings };
+    }
+    const entries = [];
+    let defaultValue = 0;
+    parsed.forEach((entry, index) => {
+        const asRecord = typeof entry === 'object' && entry != null ? entry : null;
+        const shape = asRecord?.shape;
+        const coords = asRecord?.coords;
+        if ((shape !== 'circle' && shape !== 'rect') || typeof coords !== 'string' || coords.trim().length === 0) {
+            warnings.push({
+                code: 'INVALID_AREA_MAPPING_ENTRY',
+                message: `Invalid area-mappings entry at index ${index}; expected shape (circle|rect) and coords string.`,
+                tagName: SELECT_POINT_INTERACTION_TAG,
+            });
+            return;
+        }
+        const mappedValueRaw = asRecord?.mappedValue;
+        const mappedValue = Number.isFinite(Number(mappedValueRaw)) ? Number(mappedValueRaw) : 0;
+        const defaultValueRaw = asRecord?.defaultValue;
+        if (Number.isFinite(Number(defaultValueRaw))) {
+            defaultValue = Number(defaultValueRaw);
+        }
+        entries.push({
+            shape,
+            coords: coords.trim(),
+            mappedValue,
+        });
+    });
+    if (entries.length === 0) {
+        return { warnings };
+    }
+    return {
+        areaMapping: {
+            defaultValue,
+            entries,
+        },
+        warnings,
+    };
+}
+function removeChildrenByTagName(element, tagName) {
+    Array.from(element.children)
+        .filter(child => child.tagName.toLowerCase() === tagName)
+        .forEach(child => child.remove());
+}
+export function composeSelectPointInteractionElement(sourceElement, xmlDoc) {
+    const metadata = selectPointInteractionComposerMetadata;
+    const warnings = [];
+    const responseIdentifier = toNonEmptyString(sourceElement.getAttribute('response-identifier'));
+    const maxChoices = toFiniteNumber(sourceElement.getAttribute('max-choices'), 1);
+    const minChoices = toFiniteNumber(sourceElement.getAttribute('min-choices'), 0);
+    const promptFromChild = sourceElement.querySelector('qti-prompt')?.textContent;
+    const prompt = toNonEmptyString(promptFromChild ?? null);
+    const imageElement = sourceElement.querySelector('img');
+    const imageSrc = toNonEmptyString(imageElement?.getAttribute('src') ?? null);
+    const imageAlt = toNonEmptyString(imageElement?.getAttribute('alt') ?? null);
+    const imageWidth = toNonEmptyString(imageElement?.getAttribute('width') ?? null);
+    const imageHeight = toNonEmptyString(imageElement?.getAttribute('height') ?? null);
+    const normalizedElement = xmlDoc.importNode(sourceElement, true);
+    const editorOnlyAttributes = [...metadata.editorOnlyAttributes];
+    editorOnlyAttributes.forEach(attr => normalizedElement.removeAttribute(attr));
+    normalizedElement.setAttribute('max-choices', String(maxChoices > 0 ? maxChoices : 1));
+    if (minChoices > 0) {
+        normalizedElement.setAttribute('min-choices', String(minChoices));
+    }
+    else {
+        normalizedElement.removeAttribute('min-choices');
+    }
+    removeChildrenByTagName(normalizedElement, 'img');
+    removeChildrenByTagName(normalizedElement, 'qti-prompt');
+    if (prompt) {
+        const qtiPrompt = xmlDoc.createElementNS(normalizedElement.namespaceURI || null, 'qti-prompt');
+        const paragraph = xmlDoc.createElementNS(normalizedElement.namespaceURI || null, 'p');
+        paragraph.textContent = prompt;
+        qtiPrompt.appendChild(paragraph);
+        normalizedElement.appendChild(qtiPrompt);
+    }
+    if (imageSrc) {
+        const image = xmlDoc.createElementNS(normalizedElement.namespaceURI || null, 'img');
+        image.setAttribute('src', imageSrc);
+        if (imageAlt)
+            image.setAttribute('alt', imageAlt);
+        if (imageWidth)
+            image.setAttribute('width', imageWidth);
+        if (imageHeight)
+            image.setAttribute('height', imageHeight);
+        normalizedElement.appendChild(image);
+    }
+    const areaMappingsRaw = sourceElement.getAttribute('area-mappings');
+    const areaMappingResult = parseAreaMappings(areaMappingsRaw);
+    warnings.push(...areaMappingResult.warnings);
+    let responseDeclaration;
+    if (!responseIdentifier) {
+        warnings.push({
+            code: 'MISSING_RESPONSE_IDENTIFIER',
+            message: 'qti-select-point-interaction is missing response-identifier; declaration will be skipped.',
+            tagName: metadata.tagName,
+        });
+    }
+    else {
+        const correctResponse = toNonEmptyString(sourceElement.getAttribute('correct-response'));
+        responseDeclaration = {
+            identifier: responseIdentifier,
+            cardinality: maxChoices > 1 ? 'multiple' : 'single',
+            baseType: 'point',
+            correctResponse: correctResponse ?? undefined,
+            areaMapping: areaMappingResult.areaMapping,
+            sourceTag: metadata.tagName,
+        };
+    }
+    return {
+        normalizedElement,
+        responseDeclaration,
+        responseProcessingTemplate: metadata.responseProcessingTemplate,
+        responseProcessingKind: metadata.responseProcessing.internalKind,
+        editorOnlyAttributes,
+        warnings,
+    };
+}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.d.ts

@@ -0,0 +1,38 @@
+import { Interaction } from '@qti-editor/interaction-shared/components/interaction.js';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+type DrawMode = 'select' | 'circle' | 'rect';
+type AreaShape = 'circle' | 'rect';
+type AreaMappingEntry = {
+    id: string;
+    shape: AreaShape;
+    coords: string;
+    mappedValue: number;
+    defaultValue: number;
+};
+type DraftShape = {
+    shape: AreaShape;
+    startX: number;
+    startY: number;
+    currentX: number;
+    currentY: number;
+};
+export declare class QtiSelectPointInteractionEdit extends Interaction {
+    #private;
+    static styles: CSSResultGroup;
+    areaMappings: string;
+    protected drawMode: DrawMode;
+    protected imageReady: boolean;
+    protected imageSrc: string | null;
+    protected imageAlt: string | null;
+    protected imageWidth: number | null;
+    protected imageHeight: number | null;
+    protected areaEntries: AreaMappingEntry[];
+    protected draft: DraftShape | null;
+    protected sourceError: string | null;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=qti-select-point-interaction.d.ts.map

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qti-select-point-interaction.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,0DAA0D,CAAC;AAEvF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1D,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnC,KAAK,gBAAgB,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAsBF,qBAAa,6BAA8B,SAAQ,WAAW;;IAC5D,OAAgB,MAAM,EAAE,cAAc,CAsFpC;IAGF,YAAY,SAAQ;IAGpB,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAY;IAGxC,SAAS,CAAC,UAAU,UAAS;IAG7B,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGzC,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG3C,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAG5C,SAAS,CAAC,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAG/C,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAQ;IAG1C,SAAS,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQnC,iBAAiB,IAAI,IAAI;IAKzB,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA6fxE,MAAM;CA8DhB"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.js

@@ -0,0 +1,650 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _QtiSelectPointInteractionEdit_instances, _QtiSelectPointInteractionEdit_imageElement, _QtiSelectPointInteractionEdit_dragging, _QtiSelectPointInteractionEdit_activePointerId, _QtiSelectPointInteractionEdit_shapeDrag, _QtiSelectPointInteractionEdit_fileInputRef, _QtiSelectPointInteractionEdit_syncImageFromDom, _QtiSelectPointInteractionEdit_ensureChildSlots, _QtiSelectPointInteractionEdit_parseDimension, _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute, _QtiSelectPointInteractionEdit_persistAreaEntries, _QtiSelectPointInteractionEdit_onFileChange, _QtiSelectPointInteractionEdit_openFilePicker, _QtiSelectPointInteractionEdit_isValidHttpUrl, _QtiSelectPointInteractionEdit_pasteImageFromClipboard, _QtiSelectPointInteractionEdit_applyImageSource, _QtiSelectPointInteractionEdit_removeImage, _QtiSelectPointInteractionEdit_toDataUrl, _QtiSelectPointInteractionEdit_loadImageDimensions, _QtiSelectPointInteractionEdit_onImageLoad, _QtiSelectPointInteractionEdit_toOriginalCoords, _QtiSelectPointInteractionEdit_onPointerDown, _QtiSelectPointInteractionEdit_onPointerMove, _QtiSelectPointInteractionEdit_onPointerUp, _QtiSelectPointInteractionEdit_onPointerCancel, _QtiSelectPointInteractionEdit_parseCoords, _QtiSelectPointInteractionEdit_findHitShapeIndex, _QtiSelectPointInteractionEdit_moveShape, _QtiSelectPointInteractionEdit_draftToEntry, _QtiSelectPointInteractionEdit_renderAreaShape, _QtiSelectPointInteractionEdit_renderDraft, _QtiSelectPointInteractionEdit_setDrawMode, _QtiSelectPointInteractionEdit_clearMappings, _QtiSelectPointInteractionEdit_emitWrapperAttrsChange, _QtiSelectPointInteractionEdit_emitImageAttrsChange;
+import { css, html, nothing, svg } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { property, state } from 'lit/decorators.js';
+import { Interaction } from '@qti-editor/interaction-shared/components/interaction.js';
+export class QtiSelectPointInteractionEdit extends Interaction {
+    constructor() {
+        super(...arguments);
+        _QtiSelectPointInteractionEdit_instances.add(this);
+        this.areaMappings = '[]';
+        this.drawMode = 'select';
+        this.imageReady = false;
+        this.imageSrc = null;
+        this.imageAlt = null;
+        this.imageWidth = null;
+        this.imageHeight = null;
+        this.areaEntries = [];
+        this.draft = null;
+        this.sourceError = null;
+        _QtiSelectPointInteractionEdit_imageElement.set(this, null);
+        _QtiSelectPointInteractionEdit_dragging.set(this, false);
+        _QtiSelectPointInteractionEdit_activePointerId.set(this, null);
+        _QtiSelectPointInteractionEdit_shapeDrag.set(this, null);
+        _QtiSelectPointInteractionEdit_fileInputRef.set(this, createRef());
+        _QtiSelectPointInteractionEdit_onImageLoad.set(this, (event) => {
+            const img = event.currentTarget;
+            __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_imageElement, img, "f");
+            if (!this.imageWidth || !this.imageHeight) {
+                this.imageWidth = img.naturalWidth;
+                this.imageHeight = img.naturalHeight;
+                __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_emitImageAttrsChange).call(this);
+            }
+            this.imageReady = true;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute).call(this);
+    }
+    firstUpdated() {
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_ensureChildSlots).call(this);
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_syncImageFromDom).call(this);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('areaMappings')) {
+            __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute).call(this);
+        }
+    }
+    render() {
+        const viewWidth = this.imageWidth || 100;
+        const viewHeight = this.imageHeight || 100;
+        return html `
+      <slot name="prompt"></slot>
+
+      <div class="toolbar">
+        ${this.imageSrc
+            ? html `
+              <button
+                type="button"
+                aria-pressed=${this.drawMode === 'select'}
+                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'select')}
+              >
+                Select
+              </button>
+              <button
+                type="button"
+                aria-pressed=${this.drawMode === 'circle'}
+                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'circle')}
+              >
+                Circle
+              </button>
+              <button
+                type="button"
+                aria-pressed=${this.drawMode === 'rect'}
+                @click=${() => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_setDrawMode).call(this, 'rect')}
+              >
+                Rect
+              </button>
+              <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_clearMappings)}>Clear mappings</button>
+              <button type="button" class="danger" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_removeImage)}>Remove image</button>
+            `
+            : html `
+              <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_pasteImageFromClipboard)}>Paste URL</button>
+              <button type="button" @click=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_openFilePicker)}>Upload image</button>
+              <input ${ref(__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_fileInputRef, "f"))} type="file" accept="image/*" @change=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onFileChange)} />
+            `}
+      </div>
+
+      ${this.sourceError ? html `<p class="meta" style="color:#b91c1c; margin-top:0;">${this.sourceError}</p>` : nothing}
+
+      <div
+        class="surface"
+        @pointerdown=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onPointerDown)}
+        @pointermove=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onPointerMove)}
+        @pointerup=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onPointerUp)}
+        @pointercancel=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_onPointerCancel)}
+      >
+        <slot @slotchange=${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_syncImageFromDom)}></slot>
+        ${this.imageSrc
+            ? html `<svg viewBox="0 0 ${viewWidth} ${viewHeight}" preserveAspectRatio="none">
+              ${this.areaEntries.map(entry => __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_renderAreaShape).call(this, entry))} ${__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_renderDraft).call(this)}
+              </svg>
+            `
+            : nothing}
+      </div>
+
+      <div class="meta">Mappings: ${this.areaEntries.length} | mode: ${this.drawMode}</div>
+    `;
+    }
+}
+_QtiSelectPointInteractionEdit_imageElement = new WeakMap(), _QtiSelectPointInteractionEdit_dragging = new WeakMap(), _QtiSelectPointInteractionEdit_activePointerId = new WeakMap(), _QtiSelectPointInteractionEdit_shapeDrag = new WeakMap(), _QtiSelectPointInteractionEdit_fileInputRef = new WeakMap(), _QtiSelectPointInteractionEdit_onImageLoad = new WeakMap(), _QtiSelectPointInteractionEdit_instances = new WeakSet(), _QtiSelectPointInteractionEdit_syncImageFromDom = function _QtiSelectPointInteractionEdit_syncImageFromDom() {
+    if (__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_imageElement, "f")) {
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_imageElement, "f").removeEventListener('load', __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_onImageLoad, "f"));
+    }
+    const image = this.querySelector(':scope > img');
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_imageElement, image, "f");
+    if (!image) {
+        this.imageSrc = null;
+        this.imageAlt = null;
+        this.imageWidth = null;
+        this.imageHeight = null;
+        this.imageReady = false;
+        return;
+    }
+    image.addEventListener('load', __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_onImageLoad, "f"));
+    this.imageSrc = image.getAttribute('src') || null;
+    this.imageAlt = image.getAttribute('alt') || null;
+    this.imageWidth = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_parseDimension).call(this, image.getAttribute('width'));
+    this.imageHeight = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_parseDimension).call(this, image.getAttribute('height'));
+    this.imageReady = image.complete && !!this.imageSrc;
+}, _QtiSelectPointInteractionEdit_ensureChildSlots = function _QtiSelectPointInteractionEdit_ensureChildSlots() {
+    const prompt = this.querySelector(':scope > qti-prompt');
+    if (prompt && prompt.getAttribute('slot') !== 'prompt') {
+        prompt.setAttribute('slot', 'prompt');
+    }
+}, _QtiSelectPointInteractionEdit_parseDimension = function _QtiSelectPointInteractionEdit_parseDimension(value) {
+    if (!value)
+        return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}, _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute = function _QtiSelectPointInteractionEdit_syncAreaEntriesFromAttribute() {
+    try {
+        const raw = JSON.parse(this.areaMappings || '[]');
+        if (!Array.isArray(raw)) {
+            this.areaEntries = [];
+            return;
+        }
+        this.areaEntries = raw
+            .filter(entry => entry && (entry.shape === 'circle' || entry.shape === 'rect') && typeof entry.coords === 'string')
+            .map((entry, index) => ({
+            id: String(entry.id || `A${index + 1}`),
+            shape: entry.shape,
+            coords: String(entry.coords),
+            mappedValue: Number(entry.mappedValue ?? 1),
+            defaultValue: Number(entry.defaultValue ?? 0),
+        }));
+    }
+    catch {
+        this.areaEntries = [];
+    }
+}, _QtiSelectPointInteractionEdit_persistAreaEntries = function _QtiSelectPointInteractionEdit_persistAreaEntries(entries) {
+    this.areaEntries = entries;
+    this.areaMappings = JSON.stringify(entries);
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_emitWrapperAttrsChange).call(this);
+}, _QtiSelectPointInteractionEdit_onFileChange = async function _QtiSelectPointInteractionEdit_onFileChange(event) {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    if (!file)
+        return;
+    const dataUrl = await __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_toDataUrl).call(this, file);
+    await __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_applyImageSource).call(this, dataUrl, file.name);
+    input.value = '';
+}, _QtiSelectPointInteractionEdit_openFilePicker = function _QtiSelectPointInteractionEdit_openFilePicker(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_fileInputRef, "f").value?.click();
+}, _QtiSelectPointInteractionEdit_isValidHttpUrl = function _QtiSelectPointInteractionEdit_isValidHttpUrl(value) {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}, _QtiSelectPointInteractionEdit_pasteImageFromClipboard = async function _QtiSelectPointInteractionEdit_pasteImageFromClipboard(event) {
+    event.preventDefault();
+    if (!navigator.clipboard?.readText) {
+        this.sourceError = 'Clipboard API is unavailable in this context.';
+        return;
+    }
+    const value = (await navigator.clipboard.readText()).trim();
+    if (!value) {
+        this.sourceError = 'Clipboard does not contain text.';
+        return;
+    }
+    if (!__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_isValidHttpUrl).call(this, value)) {
+        this.sourceError = 'Clipboard text is not a valid URL.';
+        return;
+    }
+    await __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_applyImageSource).call(this, value, null);
+}, _QtiSelectPointInteractionEdit_applyImageSource = async function _QtiSelectPointInteractionEdit_applyImageSource(source, fallbackAlt) {
+    try {
+        const dimensions = await __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_loadImageDimensions).call(this, source);
+        this.imageSrc = source;
+        this.imageAlt = this.imageAlt || fallbackAlt || 'image';
+        if (!this.imageWidth || !this.imageHeight) {
+            this.imageWidth = dimensions.width;
+            this.imageHeight = dimensions.height;
+        }
+        this.imageReady = false;
+        this.sourceError = null;
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_emitImageAttrsChange).call(this);
+    }
+    catch {
+        this.sourceError = 'Could not load image from that source.';
+    }
+}, _QtiSelectPointInteractionEdit_removeImage = function _QtiSelectPointInteractionEdit_removeImage() {
+    this.imageSrc = null;
+    this.imageAlt = null;
+    this.imageWidth = null;
+    this.imageHeight = null;
+    this.imageReady = false;
+    this.draft = null;
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_persistAreaEntries).call(this, []);
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_emitImageAttrsChange).call(this);
+}, _QtiSelectPointInteractionEdit_toDataUrl = function _QtiSelectPointInteractionEdit_toDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result || ''));
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(file);
+    });
+}, _QtiSelectPointInteractionEdit_loadImageDimensions = function _QtiSelectPointInteractionEdit_loadImageDimensions(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        img.onerror = reject;
+        img.src = src;
+    });
+}, _QtiSelectPointInteractionEdit_toOriginalCoords = function _QtiSelectPointInteractionEdit_toOriginalCoords(clientX, clientY) {
+    const img = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_imageElement, "f");
+    if (!img)
+        return null;
+    const rect = img.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0)
+        return null;
+    const originalWidth = this.imageWidth || img.naturalWidth || rect.width;
+    const originalHeight = this.imageHeight || img.naturalHeight || rect.height;
+    const x = ((clientX - rect.left) / rect.width) * originalWidth;
+    const y = ((clientY - rect.top) / rect.height) * originalHeight;
+    return {
+        x: Math.max(0, Math.min(originalWidth, x)),
+        y: Math.max(0, Math.min(originalHeight, y)),
+    };
+}, _QtiSelectPointInteractionEdit_onPointerDown = function _QtiSelectPointInteractionEdit_onPointerDown(event) {
+    if (!this.imageReady || !this.imageSrc)
+        return;
+    const point = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_toOriginalCoords).call(this, event.clientX, event.clientY);
+    if (!point)
+        return;
+    if (this.drawMode === 'select') {
+        const shapeIndex = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_findHitShapeIndex).call(this, point.x, point.y);
+        if (shapeIndex < 0)
+            return;
+        const entry = this.areaEntries[shapeIndex];
+        const originCoords = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_parseCoords).call(this, entry.coords);
+        if (!originCoords)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const surface = event.currentTarget;
+        surface?.setPointerCapture(event.pointerId);
+        __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_dragging, true, "f");
+        __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_activePointerId, event.pointerId, "f");
+        __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_shapeDrag, {
+            index: shapeIndex,
+            startX: point.x,
+            startY: point.y,
+            originCoords,
+            shape: entry.shape,
+        }, "f");
+        return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const surface = event.currentTarget;
+    surface?.setPointerCapture(event.pointerId);
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_dragging, true, "f");
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_activePointerId, event.pointerId, "f");
+    this.draft = {
+        shape: this.drawMode,
+        startX: point.x,
+        startY: point.y,
+        currentX: point.x,
+        currentY: point.y,
+    };
+}, _QtiSelectPointInteractionEdit_onPointerMove = function _QtiSelectPointInteractionEdit_onPointerMove(event) {
+    if (!__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_dragging, "f") || __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_activePointerId, "f") !== event.pointerId)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    const point = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_toOriginalCoords).call(this, event.clientX, event.clientY);
+    if (!point)
+        return;
+    if (__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_shapeDrag, "f")) {
+        const moved = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_moveShape).call(this, __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_shapeDrag, "f"), point.x, point.y);
+        if (!moved)
+            return;
+        const nextEntries = [...this.areaEntries];
+        nextEntries[__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_shapeDrag, "f").index] = moved;
+        this.areaEntries = nextEntries;
+        return;
+    }
+    if (!this.draft)
+        return;
+    this.draft = {
+        ...this.draft,
+        currentX: point.x,
+        currentY: point.y,
+    };
+}, _QtiSelectPointInteractionEdit_onPointerUp = function _QtiSelectPointInteractionEdit_onPointerUp(event) {
+    if (!__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_dragging, "f") || __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_activePointerId, "f") !== event.pointerId)
+        return;
+    event.preventDefault();
+    event.stopPropagation();
+    const point = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_toOriginalCoords).call(this, event.clientX, event.clientY);
+    const surface = event.currentTarget;
+    if (surface?.hasPointerCapture(event.pointerId)) {
+        surface.releasePointerCapture(event.pointerId);
+    }
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_dragging, false, "f");
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_activePointerId, null, "f");
+    if (__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_shapeDrag, "f")) {
+        __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_shapeDrag, null, "f");
+        __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_persistAreaEntries).call(this, [...this.areaEntries]);
+        return;
+    }
+    if (!this.draft)
+        return;
+    if (!point) {
+        this.draft = null;
+        return;
+    }
+    const completedDraft = {
+        ...this.draft,
+        currentX: point.x,
+        currentY: point.y,
+    };
+    const entry = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_draftToEntry).call(this, completedDraft);
+    this.draft = null;
+    if (!entry)
+        return;
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_persistAreaEntries).call(this, [...this.areaEntries, entry]);
+}, _QtiSelectPointInteractionEdit_onPointerCancel = function _QtiSelectPointInteractionEdit_onPointerCancel(event) {
+    if (__classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_activePointerId, "f") !== event.pointerId)
+        return;
+    const surface = event.currentTarget;
+    if (surface?.hasPointerCapture(event.pointerId)) {
+        surface.releasePointerCapture(event.pointerId);
+    }
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_dragging, false, "f");
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_activePointerId, null, "f");
+    __classPrivateFieldSet(this, _QtiSelectPointInteractionEdit_shapeDrag, null, "f");
+    this.draft = null;
+}, _QtiSelectPointInteractionEdit_parseCoords = function _QtiSelectPointInteractionEdit_parseCoords(coords) {
+    const values = coords.split(',').map(v => Number(v));
+    if (values.some(v => Number.isNaN(v)))
+        return null;
+    return values;
+}, _QtiSelectPointInteractionEdit_findHitShapeIndex = function _QtiSelectPointInteractionEdit_findHitShapeIndex(x, y) {
+    for (let i = this.areaEntries.length - 1; i >= 0; i -= 1) {
+        const entry = this.areaEntries[i];
+        const values = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_parseCoords).call(this, entry.coords);
+        if (!values)
+            continue;
+        if (entry.shape === 'circle' && values.length >= 3) {
+            const [cx, cy, r] = values;
+            const dx = x - cx;
+            const dy = y - cy;
+            if (dx * dx + dy * dy <= r * r)
+                return i;
+        }
+        if (entry.shape === 'rect' && values.length >= 4) {
+            const [x1, y1, x2, y2] = values;
+            const minX = Math.min(x1, x2);
+            const maxX = Math.max(x1, x2);
+            const minY = Math.min(y1, y2);
+            const maxY = Math.max(y1, y2);
+            if (x >= minX && x <= maxX && y >= minY && y <= maxY)
+                return i;
+        }
+    }
+    return -1;
+}, _QtiSelectPointInteractionEdit_moveShape = function _QtiSelectPointInteractionEdit_moveShape(state, x, y) {
+    const deltaX = x - state.startX;
+    const deltaY = y - state.startY;
+    const source = this.areaEntries[state.index];
+    if (!source)
+        return null;
+    if (state.shape === 'circle' && state.originCoords.length >= 3) {
+        const [cx, cy, r] = state.originCoords;
+        return {
+            ...source,
+            coords: `${Math.round(cx + deltaX)},${Math.round(cy + deltaY)},${Math.round(r)}`,
+        };
+    }
+    if (state.shape === 'rect' && state.originCoords.length >= 4) {
+        const [x1, y1, x2, y2] = state.originCoords;
+        return {
+            ...source,
+            coords: `${Math.round(x1 + deltaX)},${Math.round(y1 + deltaY)},${Math.round(x2 + deltaX)},${Math.round(y2 + deltaY)}`,
+        };
+    }
+    return null;
+}, _QtiSelectPointInteractionEdit_draftToEntry = function _QtiSelectPointInteractionEdit_draftToEntry(draft) {
+    const epsilon = 1;
+    if (draft.shape === 'circle') {
+        const dx = draft.currentX - draft.startX;
+        const dy = draft.currentY - draft.startY;
+        const radius = Math.round(Math.sqrt(dx * dx + dy * dy));
+        if (radius < epsilon)
+            return null;
+        return {
+            id: `A${Date.now()}`,
+            shape: 'circle',
+            coords: `${Math.round(draft.startX)},${Math.round(draft.startY)},${radius}`,
+            mappedValue: 1,
+            defaultValue: 0,
+        };
+    }
+    const x1 = Math.round(Math.min(draft.startX, draft.currentX));
+    const y1 = Math.round(Math.min(draft.startY, draft.currentY));
+    const x2 = Math.round(Math.max(draft.startX, draft.currentX));
+    const y2 = Math.round(Math.max(draft.startY, draft.currentY));
+    if (Math.abs(x2 - x1) < epsilon || Math.abs(y2 - y1) < epsilon)
+        return null;
+    return {
+        id: `A${Date.now()}`,
+        shape: 'rect',
+        coords: `${x1},${y1},${x2},${y2}`,
+        mappedValue: 1,
+        defaultValue: 0,
+    };
+}, _QtiSelectPointInteractionEdit_renderAreaShape = function _QtiSelectPointInteractionEdit_renderAreaShape(entry) {
+    const values = entry.coords.split(',').map(Number);
+    if (entry.shape === 'circle' && values.length >= 3) {
+        const [cx, cy, r] = values;
+        return svg `<circle
+        cx="${cx}"
+        cy="${cy}"
+        r="${r}"
+        fill="rgba(37,99,235,0.2)"
+        stroke="#1d4ed8"
+        stroke-width="2"
+      />`;
+    }
+    if (entry.shape === 'rect' && values.length >= 4) {
+        const [x1, y1, x2, y2] = values;
+        return svg `<rect
+        x="${Math.min(x1, x2)}"
+        y="${Math.min(y1, y2)}"
+        width="${Math.abs(x2 - x1)}"
+        height="${Math.abs(y2 - y1)}"
+        fill="rgba(37,99,235,0.2)"
+        stroke="#1d4ed8"
+        stroke-width="2"
+      />`;
+    }
+    return nothing;
+}, _QtiSelectPointInteractionEdit_renderDraft = function _QtiSelectPointInteractionEdit_renderDraft() {
+    if (!this.draft)
+        return nothing;
+    const draftEntry = __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_draftToEntry).call(this, this.draft);
+    if (!draftEntry)
+        return nothing;
+    return __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_renderAreaShape).call(this, draftEntry);
+}, _QtiSelectPointInteractionEdit_setDrawMode = function _QtiSelectPointInteractionEdit_setDrawMode(mode) {
+    this.drawMode = mode;
+}, _QtiSelectPointInteractionEdit_clearMappings = function _QtiSelectPointInteractionEdit_clearMappings() {
+    __classPrivateFieldGet(this, _QtiSelectPointInteractionEdit_instances, "m", _QtiSelectPointInteractionEdit_persistAreaEntries).call(this, []);
+}, _QtiSelectPointInteractionEdit_emitWrapperAttrsChange = function _QtiSelectPointInteractionEdit_emitWrapperAttrsChange() {
+    const detail = {
+        nodeType: 'qtiSelectPointInteraction',
+        tagName: 'qti-select-point-interaction',
+        attrs: {
+            areaMappings: this.areaMappings ?? '[]',
+        },
+    };
+    this.dispatchEvent(new CustomEvent('qti-prosemirror-node-attrs-change', {
+        bubbles: true,
+        composed: true,
+        detail,
+    }));
+}, _QtiSelectPointInteractionEdit_emitImageAttrsChange = function _QtiSelectPointInteractionEdit_emitImageAttrsChange() {
+    const image = this.querySelector(':scope > img');
+    if (!image)
+        return;
+    const detail = {
+        nodeType: 'imgSelectPoint',
+        tagName: 'img',
+        attrs: {
+            imageSrc: this.imageSrc ?? null,
+            imageAlt: this.imageAlt ?? null,
+            imageWidth: this.imageWidth ?? null,
+            imageHeight: this.imageHeight ?? null,
+        },
+    };
+    image.dispatchEvent(new CustomEvent('qti-prosemirror-node-attrs-change', {
+        bubbles: true,
+        composed: true,
+        detail,
+    }));
+};
+QtiSelectPointInteractionEdit.styles = [
+    css `
+      :host {
+        display: block;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        padding: 12px;
+        background: #ffffff;
+        white-space: normal;
+      }
+
+      ::slotted(qti-prompt) {
+        display: block;
+        margin-bottom: 10px;
+      }
+
+      ::slotted(img) {
+        display: block;
+        max-width: 100%;
+        height: auto;
+      }
+
+      ::slotted(img:not([src])) {
+        min-width: 240px;
+        min-height: 160px;
+        border: 1px dashed #d1d5db;
+        background: #f9fafb;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 10px;
+        flex-wrap: wrap;
+      }
+
+      .toolbar button,
+      .toolbar input {
+        font: inherit;
+        font-size: 12px;
+      }
+
+      .toolbar button {
+        border: 1px solid #9ca3af;
+        background: #f9fafb;
+        border-radius: 4px;
+        padding: 4px 8px;
+        cursor: pointer;
+      }
+
+      .toolbar button[aria-pressed='true'] {
+        background: #2563eb;
+        border-color: #2563eb;
+        color: #ffffff;
+      }
+
+      .toolbar .danger {
+        border-color: #b91c1c;
+        color: #b91c1c;
+      }
+
+      .surface {
+        position: relative;
+        display: inline-block;
+        max-width: 100%;
+        line-height: 0;
+      }
+
+      svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .meta {
+        margin-top: 8px;
+        font-size: 12px;
+        color: #4b5563;
+      }
+
+      input[type='file'] {
+        display: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, attribute: 'area-mappings' })
+], QtiSelectPointInteractionEdit.prototype, "areaMappings", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "drawMode", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "imageReady", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "imageSrc", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "imageAlt", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "imageWidth", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "imageHeight", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "areaEntries", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "draft", void 0);
+__decorate([
+    state()
+], QtiSelectPointInteractionEdit.prototype, "sourceError", void 0);
+if (!customElements.get('qti-select-point-interaction')) {
+    customElements.define('qti-select-point-interaction', QtiSelectPointInteractionEdit);
+}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.schema.d.ts

@@ -0,0 +1,3 @@
+import type { NodeSpec } from 'prosemirror-model';
+export declare const qtiSelectPointInteractionNodeSpec: NodeSpec;
+//# sourceMappingURL=qti-select-point-interaction.schema.d.ts.map

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qti-select-point-interaction.schema.d.ts","sourceRoot":"","sources":["../../../src/components/qti-select-point-interaction/qti-select-point-interaction.schema.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAA0C,QAAQ,EAAU,MAAM,mBAAmB,CAAC;AAqElG,eAAO,MAAM,iCAAiC,EAAE,QA2C/C,CAAC"}

package/dist/components/qti-select-point-interaction/qti-select-point-interaction.schema.js

@@ -0,0 +1,98 @@
+import { Fragment } from 'prosemirror-model';
+function parseNumberAttribute(value) {
+    if (value == null || value === '')
+        return null;
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function isElementLike(node) {
+    return (typeof node === 'object' &&
+        node !== null &&
+        'getAttribute' in node &&
+        typeof node.getAttribute === 'function' &&
+        'querySelector' in node &&
+        typeof node.querySelector === 'function');
+}
+function parseWrapperAttrs(node) {
+    return {
+        responseIdentifier: node.getAttribute('response-identifier'),
+        maxChoices: parseNumberAttribute(node.getAttribute('max-choices')) ?? 0,
+        minChoices: parseNumberAttribute(node.getAttribute('min-choices')) ?? 0,
+        class: node.getAttribute('class') || null,
+        areaMappings: node.getAttribute('area-mappings') || '[]',
+        correctResponse: node.getAttribute('correct-response') || null,
+    };
+}
+function buildPromptNode(schema, node) {
+    const qtiPromptType = schema.nodes.qtiPrompt;
+    const promptParagraphType = schema.nodes.qtiPromptParagraph;
+    if (!qtiPromptType || !promptParagraphType)
+        return null;
+    const promptElement = node.querySelector('qti-prompt');
+    const promptText = promptElement?.textContent?.trim() || 'Mark the correct point on the image.';
+    const paragraph = promptParagraphType.create(null, promptText ? schema.text(promptText) : null);
+    return qtiPromptType.create(null, paragraph);
+}
+function buildImgSelectPointNode(schema, node) {
+    const imgSelectPointType = schema.nodes.imgSelectPoint;
+    if (!imgSelectPointType)
+        return null;
+    const image = node.querySelector('img');
+    const imageSrc = image?.getAttribute('src') || null;
+    const imageAlt = image?.getAttribute('alt') || null;
+    const imageWidth = parseNumberAttribute(image?.getAttribute('width') || null);
+    const imageHeight = parseNumberAttribute(image?.getAttribute('height') || null);
+    return imgSelectPointType.create({
+        imageSrc,
+        imageAlt,
+        imageWidth,
+        imageHeight,
+    });
+}
+export const qtiSelectPointInteractionNodeSpec = {
+    group: 'block',
+    content: 'qtiPrompt imgSelectPoint',
+    selectable: true,
+    isolating: true,
+    attrs: {
+        responseIdentifier: { default: null },
+        maxChoices: { default: 0 },
+        minChoices: { default: 0 },
+        class: { default: null },
+        areaMappings: { default: '[]' },
+        correctResponse: { default: null },
+    },
+    parseDOM: [
+        {
+            tag: 'qti-select-point-interaction',
+            getAttrs: (node) => {
+                if (!isElementLike(node))
+                    return {};
+                return parseWrapperAttrs(node);
+            },
+            getContent: (node, schema) => {
+                if (!isElementLike(node))
+                    return Fragment.empty;
+                const promptNode = buildPromptNode(schema, node);
+                const imageNode = buildImgSelectPointNode(schema, node);
+                const children = [promptNode, imageNode].filter(Boolean);
+                return Fragment.fromArray(children);
+            },
+        },
+    ],
+    toDOM(node) {
+        const attrs = {
+            'max-choices': String(node.attrs.maxChoices ?? 0),
+            'min-choices': String(node.attrs.minChoices ?? 0),
+        };
+        if (node.attrs.responseIdentifier)
+            attrs['response-identifier'] = String(node.attrs.responseIdentifier);
+        if (node.attrs.class)
+            attrs.class = String(node.attrs.class);
+        if (node.attrs.areaMappings)
+            attrs['area-mappings'] = String(node.attrs.areaMappings);
+        if (node.attrs.correctResponse)
+            attrs['correct-response'] = String(node.attrs.correctResponse);
+        return ['qti-select-point-interaction', attrs, 0];
+    },
+};

package/dist/composer/handler.d.ts

@@ -0,0 +1,3 @@
+import type { InteractionComposerHandler } from '@qti-editor/interaction-shared/composer/types.js';
+export declare const selectPointComposerHandler: InteractionComposerHandler;
+//# sourceMappingURL=handler.d.ts.map

package/dist/composer/handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../src/composer/handler.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAC;AAEnG,eAAO,MAAM,0BAA0B,EAAE,0BAGxC,CAAC"}

package/dist/composer/handler.js

@@ -0,0 +1,6 @@
+import { composeSelectPointInteractionElement } from '../components/qti-select-point-interaction/qti-select-point-interaction.compose.js';
+import { SELECT_POINT_INTERACTION_TAG } from './metadata.js';
+export const selectPointComposerHandler = {
+    tagName: SELECT_POINT_INTERACTION_TAG,
+    compose: composeSelectPointInteractionElement,
+};

package/dist/composer/metadata.d.ts

@@ -0,0 +1,22 @@
+export declare const MAP_RESPONSE_POINT_TEMPLATE = "https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/map_response_point.xml";
+export declare const SELECT_POINT_INTERACTION_TAG: "qti-select-point-interaction";
+export declare const SELECT_POINT_INTERACTION_NODE_TYPE: "qtiSelectPointInteraction";
+export declare const selectPointInteractionComposerMetadata: {
+    tagName: "qti-select-point-interaction";
+    nodeTypeName: "qtiSelectPointInteraction";
+    responseProcessingTemplate: string;
+    responseProcessing: {
+        templateUri: string;
+        internalKind: "map_response_point";
+        internalSourceXml: string;
+    };
+    editorOnlyAttributes: string[];
+    userEditableAttributes: string[];
+};
+export declare const selectPointNodeAttributePanelMetadataByNodeTypeName: {
+    [x: string]: {
+        nodeTypeName: "qtiSelectPointInteraction";
+        editableAttributes: string[];
+    };
+};
+//# sourceMappingURL=metadata.d.ts.map

package/dist/composer/metadata.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../src/composer/metadata.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,gFACuC,CAAC;AAWhF,eAAO,MAAM,4BAA4B,EAAG,8BAAuC,CAAC;AACpF,eAAO,MAAM,kCAAkC,EAAG,2BAAoC,CAAC;AAEvF,eAAO,MAAM,sCAAsC;;;;;;;;;;;CAWZ,CAAC;AAExC,eAAO,MAAM,mDAAmD;;;;;CAKV,CAAC"}

package/dist/composer/metadata.js

@@ -0,0 +1,29 @@
+export const MAP_RESPONSE_POINT_TEMPLATE = 'https://purl.imsglobal.org/spec/qti/v3p0/rptemplates/map_response_point.xml';
+const MAP_RESPONSE_POINT_INTERNAL_TEMPLATE = `
+  <qti-set-outcome-value identifier="SCORE">
+    <qti-sum>
+      <qti-variable identifier="SCORE"/>
+      <qti-map-response-point identifier="$responseIdentifier"/>
+    </qti-sum>
+  </qti-set-outcome-value>
+`;
+export const SELECT_POINT_INTERACTION_TAG = 'qti-select-point-interaction';
+export const SELECT_POINT_INTERACTION_NODE_TYPE = 'qtiSelectPointInteraction';
+export const selectPointInteractionComposerMetadata = {
+    tagName: SELECT_POINT_INTERACTION_TAG,
+    nodeTypeName: SELECT_POINT_INTERACTION_NODE_TYPE,
+    responseProcessingTemplate: MAP_RESPONSE_POINT_TEMPLATE,
+    responseProcessing: {
+        templateUri: MAP_RESPONSE_POINT_TEMPLATE,
+        internalKind: 'map_response_point',
+        internalSourceXml: MAP_RESPONSE_POINT_INTERNAL_TEMPLATE,
+    },
+    editorOnlyAttributes: ['class', 'area-mappings', 'correct-response'],
+    userEditableAttributes: ['maxChoices', 'minChoices'],
+};
+export const selectPointNodeAttributePanelMetadataByNodeTypeName = {
+    [SELECT_POINT_INTERACTION_NODE_TYPE.toLowerCase()]: {
+        nodeTypeName: SELECT_POINT_INTERACTION_NODE_TYPE,
+        editableAttributes: selectPointInteractionComposerMetadata.userEditableAttributes,
+    },
+};

package/dist/descriptor.d.ts

@@ -0,0 +1,30 @@
+export declare const selectPointInteractionDescriptor: {
+    tagName: string;
+    nodeTypeName: string;
+    nodeSpecs: {
+        name: string;
+        spec: import("prosemirror-model").NodeSpec;
+    }[];
+    insertCommand: import("prosemirror-state").Command;
+    keyboardShortcut: string;
+    composerMetadata: {
+        tagName: "qti-select-point-interaction";
+        nodeTypeName: "qtiSelectPointInteraction";
+        responseProcessingTemplate: string;
+        responseProcessing: {
+            templateUri: string;
+            internalKind: "map_response_point";
+            internalSourceXml: string;
+        };
+        editorOnlyAttributes: string[];
+        userEditableAttributes: string[];
+    };
+    composerHandler: import("@qti-editor/interfaces").InteractionComposerHandler;
+    attributePanelMetadata: {
+        [x: string]: {
+            nodeTypeName: "qtiSelectPointInteraction";
+            editableAttributes: string[];
+        };
+    };
+};
+//# sourceMappingURL=descriptor.d.ts.map

package/dist/descriptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"descriptor.d.ts","sourceRoot":"","sources":["../src/descriptor.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYZ,CAAC"}

package/dist/descriptor.js

@@ -0,0 +1,18 @@
+import { insertSelectPointInteraction } from './components/qti-select-point-interaction/qti-select-point-interaction.commands.js';
+import { qtiSelectPointInteractionNodeSpec } from './components/qti-select-point-interaction/qti-select-point-interaction.schema.js';
+import { imgSelectPointNodeSpec } from './components/qti-select-point-interaction/img-select-point.schema.js';
+import { selectPointInteractionComposerMetadata, selectPointNodeAttributePanelMetadataByNodeTypeName } from './composer/metadata.js';
+import { selectPointComposerHandler } from './composer/handler.js';
+export const selectPointInteractionDescriptor = {
+    tagName: 'qti-select-point-interaction',
+    nodeTypeName: 'qtiSelectPointInteraction',
+    nodeSpecs: [
+        { name: 'qtiSelectPointInteraction', spec: qtiSelectPointInteractionNodeSpec },
+        { name: 'imgSelectPoint', spec: imgSelectPointNodeSpec },
+    ],
+    insertCommand: insertSelectPointInteraction,
+    keyboardShortcut: 'Mod-Shift-p',
+    composerMetadata: selectPointInteractionComposerMetadata,
+    composerHandler: selectPointComposerHandler,
+    attributePanelMetadata: selectPointNodeAttributePanelMetadataByNodeTypeName,
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.schema.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.commands.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.compose.js';
+export * from './components/qti-select-point-interaction/img-select-point.schema.js';
+export * from './composer/metadata.js';
+export * from './composer/handler.js';
+export * from './descriptor.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,2EAA2E,CAAC;AAC1F,cAAc,kFAAkF,CAAC;AACjG,cAAc,oFAAoF,CAAC;AACnG,cAAc,mFAAmF,CAAC;AAClG,cAAc,sEAAsE,CAAC;AAErF,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.schema.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.commands.js';
+export * from './components/qti-select-point-interaction/qti-select-point-interaction.compose.js';
+export * from './components/qti-select-point-interaction/img-select-point.schema.js';
+export * from './composer/metadata.js';
+export * from './composer/handler.js';
+export * from './descriptor.js';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@qti-editor/interaction-select-point",
+  "description": "QTI select-point interaction schemas, components, commands, and composer",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*",
+      "default": "./dist/*"
+    }
+  },
+  "dependencies": {
+    "@qti-components/select-point-interaction": "^1.0.1",
+    "@qti-editor/interfaces": "0.1.0",
+    "@qti-editor/interaction-shared": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.3.1"
+  },
+  "devDependencies": {
+    "lit": "^3.3.1",
+    "prosemirror-model": "^1.25.4",
+    "prosemirror-state": "^1.4.4"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "tsc",
+    "clean": "rm -rf dist"
+  }
+}