@conform-ed/qti-react 0.0.13 → 0.0.15

package/dist/index.js

@@ -743,11 +743,7 @@ function fromResponse(declaration, response) {
   if (raw.length === 0) {
     return null;
   }
-  return {
-    cardinality: declaration.cardinality,
-    baseType: declaration.baseType,
-    values: raw.map((value) => coerceScalar(value, declaration.baseType))
-  };
+  return rpValue(declaration.cardinality, raw.map((value) => coerceScalar(value, declaration.baseType)), declaration.baseType);
 }
 function singleNumber(value) {
   if (value === null || value.values.length !== 1) {
@@ -763,6 +759,13 @@ function singleBoolean(value) {
   const member = value.values[0];
   return typeof member === "boolean" ? member : null;
 }
+function rpValue(cardinality, values, baseType) {
+  return {
+    cardinality,
+    values,
+    ...baseType !== undefined ? { baseType } : {}
+  };
+}
 function booleanValue(value) {
   return { cardinality: "single", baseType: "boolean", values: [value] };
 }
@@ -826,7 +829,7 @@ function fromFlatValue(value, cardinality, baseType) {
   if (values.length === 0) {
     return null;
   }
-  return { cardinality, baseType, values: values.map((member) => coerceScalar(member, baseType)) };
+  return rpValue(cardinality, values.map((member) => coerceScalar(member, baseType)), baseType);
 }
 function toOutcomeValue(value) {
   if (value === null || value.values.length === 0) {
@@ -979,7 +982,7 @@ function evaluateExpression(expression, env) {
     case "baseValue": {
       const baseType = expression.baseType;
       const value = expression.value;
-      return value === undefined ? null : { cardinality: "single", baseType, values: [coerceScalar(value, baseType)] };
+      return value === undefined ? null : rpValue("single", [coerceScalar(value, baseType)], baseType);
     }
     case "variable":
       return env.lookupVariable(expression.identifier ?? "");
@@ -988,11 +991,7 @@ function evaluateExpression(expression, env) {
       if (!declaration?.correctResponse) {
         return null;
       }
-      return {
-        cardinality: declaration.cardinality,
-        baseType: declaration.baseType,
-        values: declaration.correctResponse.values.map((entry) => coerceScalar(entry.value, declaration.baseType))
-      };
+      return rpValue(declaration.cardinality, declaration.correctResponse.values.map((entry) => coerceScalar(entry.value, declaration.baseType)), declaration.baseType);
     }
     case "mapResponse": {
       const identifier = expression.identifier ?? "";
@@ -1030,7 +1029,7 @@ function evaluateExpression(expression, env) {
       const operand = expression.expressions?.[0];
       const value = operand === undefined ? null : evaluate(operand);
       const field = value?.fields?.find((entry) => entry.name === expression.fieldIdentifier);
-      return field === undefined ? null : { cardinality: "single", ...field.baseType ? { baseType: field.baseType } : {}, values: [field.value] };
+      return field === undefined ? null : rpValue("single", [field.value], field.baseType);
     }
     case "and":
     case "or": {
@@ -1119,7 +1118,7 @@ function evaluateExpression(expression, env) {
       if (member === undefined) {
         return null;
       }
-      return { cardinality: "single", baseType: container.baseType, values: [member] };
+      return rpValue("single", [member], container.baseType);
     }
     case "mathConstant": {
       const constant = expression.name === undefined ? undefined : mathConstants[expression.name];
@@ -1270,7 +1269,7 @@ function evaluateExpression(expression, env) {
       }
       const baseType = container.baseType ?? value.baseType;
       const remaining = container.values.filter((member) => !scalarsEqual(member, scalar, baseType, env.normalization));
-      return remaining.length === 0 ? null : { cardinality: container.cardinality, baseType: container.baseType, values: remaining };
+      return remaining.length === 0 ? null : rpValue(container.cardinality, remaining, container.baseType);
     }
     case "repeat": {
       if (typeof expression.numberRepeats !== "number") {
@@ -1291,7 +1290,7 @@ function evaluateExpression(expression, env) {
           members.push(...value.values);
         }
       }
-      return members.length === 0 ? null : { cardinality: "ordered", baseType, values: members };
+      return members.length === 0 ? null : rpValue("ordered", members, baseType);
     }
     case "stringMatch":
     case "substring": {
@@ -1359,7 +1358,7 @@ function evaluateExpression(expression, env) {
       if (members.length === 0) {
         return null;
       }
-      return { cardinality: expression.kind, baseType, values: members };
+      return rpValue(expression.kind, members, baseType);
     }
     case "randomInteger": {
       if (!env.random) {
@@ -1411,7 +1410,7 @@ function evaluateExpression(expression, env) {
         return null;
       }
       const pick = container.values[Math.floor(env.random() * container.values.length)];
-      return { cardinality: "single", baseType: container.baseType, values: [pick] };
+      return rpValue("single", [pick], container.baseType);
     }
     default:
       throw new RpUnsupportedError(expression.kind);
@@ -1608,11 +1607,7 @@ function defaultOutcomes(declarations) {
   const outcomes = new Map;
   for (const declaration of declarations) {
     if (declaration.defaultValue) {
-      outcomes.set(declaration.identifier, {
-        cardinality: declaration.cardinality,
-        baseType: declaration.baseType,
-        values: declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType))
-      });
+      outcomes.set(declaration.identifier, rpValue(declaration.cardinality, declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType)), declaration.baseType));
       continue;
     }
     outcomes.set(declaration.identifier, isNumericBaseType(declaration.baseType) ? floatValue(0) : null);
@@ -1780,11 +1775,7 @@ function executeTemplateProcessing(view, context) {
   function initialValues() {
     const values = new Map;
     for (const declaration of context.templateDeclarations) {
-      values.set(declaration.identifier, declaration.defaultValue ? {
-        cardinality: declaration.cardinality,
-        baseType: declaration.baseType,
-        values: declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType))
-      } : null);
+      values.set(declaration.identifier, declaration.defaultValue ? rpValue(declaration.cardinality, declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType)), declaration.baseType) : null);
     }
     return values;
   }
@@ -1815,11 +1806,7 @@ function executeTemplateProcessing(view, context) {
         if (rule.identifier !== undefined && rule.expression !== undefined) {
           const declaration = declarationsById.get(rule.identifier);
           const value = evaluateExpression(rule.expression, env);
-          templateValues.set(rule.identifier, value === null || !declaration ? value : {
-            cardinality: declaration.cardinality,
-            baseType: declaration.baseType ?? value.baseType,
-            values: value.values
-          });
+          templateValues.set(rule.identifier, value === null || !declaration ? value : rpValue(declaration.cardinality, value.values, declaration.baseType ?? value.baseType));
         }
         continue;
       }
@@ -2192,11 +2179,7 @@ function createTestController(view, options) {
     const outcomes = new Map;
     for (const declaration of view.outcomeDeclarations ?? []) {
       if (declaration.defaultValue) {
-        outcomes.set(declaration.identifier, {
-          cardinality: declaration.cardinality,
-          baseType: declaration.baseType,
-          values: declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType))
-        });
+        outcomes.set(declaration.identifier, rpValue(declaration.cardinality, declaration.defaultValue.values.map((entry) => coerceScalar(entry.value, declaration.baseType)), declaration.baseType));
         continue;
       }
       outcomes.set(declaration.identifier, isNumericBaseType(declaration.baseType) ? floatValue(0) : null);
@@ -2244,7 +2227,7 @@ function createTestController(view, options) {
           baseType ??= lifted.baseType;
           members.push(...lifted.values);
         }
-        return members.length === 0 ? null : { cardinality: "multiple", baseType, values: members };
+        return members.length === 0 ? null : rpValue("multiple", members, baseType);
       },
       testAggregate: (expression) => {
         const subset = subsetItems(expression);
@@ -3021,11 +3004,12 @@ function createQtiRuntime(config) {
         }
         const parsed = descriptor.schema.safeParse(node);
         if (!parsed.success) {
+          const detail = parsed.error.issues[0]?.message;
           report({
             type: "invalid-interaction",
             name: node.kind,
             responseIdentifier: node.responseIdentifier,
-            detail: parsed.error.issues[0]?.message
+            ...detail !== undefined ? { detail } : {}
           });
         }
         return;
@@ -3370,10 +3354,13 @@ async function resolveModule(node, registry) {
 async function mountPci(options) {
   const { container, node, registry } = options;
   const module = await resolveModule(node, registry);
+  const mountRoot = container.ownerDocument.createElement("div");
+  mountRoot.setAttribute("data-qti-pci-mount", "");
+  container.appendChild(mountRoot);
   const markupHost = container.ownerDocument.createElement("div");
   markupHost.className = "qti-interaction-markup";
   markupHost.innerHTML = serializePciMarkup(node.interactionMarkup?.content);
-  container.appendChild(markupHost);
+  mountRoot.appendChild(markupHost);
   let resolveReady;
   const ready = new Promise((resolve) => {
     resolveReady = resolve;
@@ -3384,9 +3371,9 @@ async function mountPci(options) {
     ...options.declaration ? { boundTo: { [node.responseIdentifier]: valueToPciResponse(options.boundValue ?? null, options.declaration) } } : {},
     status: "interacting",
     onready: (instance2) => resolveReady(instance2),
-    ondone: (instance2, response, state) => options.ondone?.(pciResponseToValue(response), state)
+    ondone: (_instance, response, state) => options.ondone?.(pciResponseToValue(response), state)
   };
-  const returned = module.getInstance(container, configuration, options.state);
+  const returned = module.getInstance(mountRoot, configuration, options.state);
   if (returned) {
     resolveReady(returned);
   }
@@ -3397,7 +3384,7 @@ async function mountPci(options) {
     getState: () => instance.getState?.(),
     unmount: () => {
       instance.oncompleted?.();
-      container.replaceChildren();
+      mountRoot.remove();
     }
   };
 }
@@ -3919,7 +3906,12 @@ function ChoiceReferenceSkin(props) {
 }
 
 // src/reference-skin/drawing.ts
-import { createElement as createElement5, useEffect as useEffect2, useRef as useRef2 } from "react";
+import {
+  createElement as createElement5,
+  useCallback,
+  useEffect as useEffect2,
+  useRef as useRef2
+} from "react";
 var strokeStyle = "#c2410c";
 var strokeWidth = 3;
 function DrawingReferenceSkin(props) {
@@ -3930,7 +3922,8 @@ function DrawingReferenceSkin(props) {
   const drawingRef = useRef2(false);
   const propsRef = useRef2(props);
   propsRef.current = props;
-  const paintBackground = (canvas) => {
+  const stageData = node.object.data;
+  const paintBackground = useCallback((canvas) => {
     const context = canvas.getContext("2d");
     if (!context) {
       return;
@@ -3940,13 +3933,13 @@ function DrawingReferenceSkin(props) {
     image.onload = () => {
       context.drawImage(image, 0, 0, canvas.width, canvas.height);
     };
-    image.src = propsRef.current.resolveAsset(node.object.data);
-  };
+    image.src = propsRef.current.resolveAsset(stageData);
+  }, [stageData]);
   useEffect2(() => {
     if (canvasRef.current) {
       paintBackground(canvasRef.current);
     }
-  }, [node.object.data]);
+  }, [paintBackground]);
   const pointerPosition = (event) => {
     const canvas = event.currentTarget;
     const rect = canvas.getBoundingClientRect();
@@ -4359,124 +4352,27 @@ function HotspotReferenceSkin(props) {
   });
 }
 
-// src/reference-skin/position-object.ts
-import { createElement as createElement14 } from "react";
-function PositionObjectReferenceSkin(props) {
-  const node = props.node;
-  const maxChoices = node.maxChoices ?? 1;
-  const points = props.value === null ? [] : typeof props.value === "string" ? [props.value] : Array.isArray(props.value) ? [...props.value] : [];
-  if (!node.stageObject || !node.object) {
-    return null;
-  }
-  const movable = node.object;
-  function stageClick(point) {
-    if (props.disabled) {
-      return;
-    }
-    const formatted = formatPoint(point);
-    if (maxChoices === 1) {
-      props.setValue(formatted);
-      return;
-    }
-    if (points.length < maxChoices) {
-      props.setValue([...points, formatted]);
-    }
-  }
-  return createElement14(GraphicStage, {
-    object: node.stageObject,
-    resolveAsset: props.resolveAsset,
-    interaction: "positionObjectStage",
-    status: props.status,
-    onStageClick: stageClick,
-    prompt: node.prompt ? createElement14("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
-    overlay: points.map((value, index) => {
-      const point = parsePoint(value);
-      if (!point) {
-        return null;
-      }
-      return createElement14("image", {
-        key: `${value}-${index}`,
-        href: props.resolveAsset(movable.data),
-        x: point.x - (movable.width ?? 0) / 2,
-        y: point.y - (movable.height ?? 0) / 2,
-        width: movable.width,
-        height: movable.height,
-        "data-qti-point": value,
-        style: { pointerEvents: "none" }
-      });
-    })
-  });
-}
-
-// src/reference-skin/select-point.ts
-import { Fragment as Fragment5, createElement as createElement15 } from "react";
-function SelectPointReferenceSkin(props) {
-  const node = props.node;
-  const maxChoices = node.maxChoices ?? 1;
-  const points = props.value === null ? [] : typeof props.value === "string" ? [props.value] : Array.isArray(props.value) ? [...props.value] : [];
-  if (!node.object) {
-    return null;
-  }
-  function stageClick(point) {
-    if (props.disabled) {
-      return;
-    }
-    const formatted = formatPoint(point);
-    if (maxChoices === 1) {
-      props.setValue(formatted);
-      return;
-    }
-    if (points.length < maxChoices) {
-      props.setValue([...points, formatted]);
-    }
-  }
-  return createElement15(GraphicStage, {
-    object: node.object,
-    resolveAsset: props.resolveAsset,
-    interaction: "selectPointInteraction",
-    status: props.status,
-    onStageClick: stageClick,
-    prompt: node.prompt ? createElement15("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
-    overlay: points.map((value, index) => {
-      const [x, y] = value.split(/\s+/u).map(Number);
-      return createElement15(Fragment5, { key: `${value}-${index}` }, createElement15("circle", {
-        cx: x,
-        cy: y,
-        r: 5,
-        fill: "currentColor",
-        "data-qti-point": value,
-        style: { pointerEvents: "none" }
-      }));
-    }),
-    after: createElement15("button", {
-      type: "button",
-      disabled: props.disabled || points.length === 0,
-      onClick: () => props.setValue(null)
-    }, "Clear points")
-  });
-}
-
 // src/reference-skin/hottext.ts
-import { createElement as createElement16 } from "react";
+import { createElement as createElement14 } from "react";
 function HottextReferenceSkin(props) {
   const node = props.node;
-  return createElement16("div", { "data-qti-interaction": "hottextInteraction", "data-status": props.status }, node.prompt ? createElement16("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, props.renderContent(node.content, {
+  return createElement14("div", { "data-qti-interaction": "hottextInteraction", "data-status": props.status }, node.prompt ? createElement14("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, props.renderContent(node.content, {
     hottext: (child, key) => {
       const view = child;
       const identifier = view.identifier ?? "";
       const optionProps = props.getOptionProps(identifier);
-      return createElement16("button", { key, type: "button", disabled: props.disabled, "data-qti-hottext": identifier, ...optionProps }, props.renderContent(view.content) ?? identifier);
+      return createElement14("button", { key, type: "button", disabled: props.disabled, "data-qti-hottext": identifier, ...optionProps }, props.renderContent(view.content) ?? identifier);
     }
   }));
 }
 
 // src/reference-skin/inline-choice.ts
-import { createElement as createElement17 } from "react";
+import { createElement as createElement15 } from "react";
 function InlineChoiceReferenceSkin(props) {
   const node = props.node;
   const choices = node.inlineChoices ?? [];
   const value = typeof props.value === "string" ? props.value : "";
-  return createElement17("select", {
+  return createElement15("select", {
     value,
     disabled: props.disabled,
     "aria-disabled": props.disabled,
@@ -4485,11 +4381,11 @@ function InlineChoiceReferenceSkin(props) {
     onChange: (event) => {
       props.setValue(event.target.value === "" ? null : event.target.value);
     }
-  }, createElement17("option", { key: "", value: "" }, ""), choices.map((choice) => createElement17("option", { key: choice.identifier, value: choice.identifier }, textOf(choice.content))));
+  }, createElement15("option", { key: "", value: "" }, ""), choices.map((choice) => createElement15("option", { key: choice.identifier, value: choice.identifier }, textOf(choice.content))));
 }
 
 // src/reference-skin/match.ts
-import { createElement as createElement18 } from "react";
+import { createElement as createElement16 } from "react";
 function MatchReferenceSkin(props) {
   const node = props.node;
   const rows = node.simpleMatchSets?.[0]?.simpleAssociableChoices ?? [];
@@ -4498,9 +4394,9 @@ function MatchReferenceSkin(props) {
   function togglePair(pair) {
     props.setValue(pairs.includes(pair) ? pairs.filter((entry) => entry !== pair) : [...pairs, pair]);
   }
-  return createElement18("div", { "data-qti-interaction": "matchInteraction", "data-status": props.status }, node.prompt ? createElement18("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement18("table", null, createElement18("thead", null, createElement18("tr", null, createElement18("td", null), columns.map((column) => createElement18("th", { key: column.identifier, scope: "col" }, textOf(column.content) || column.identifier)))), createElement18("tbody", null, rows.map((row) => createElement18("tr", { key: row.identifier }, createElement18("th", { scope: "row" }, textOf(row.content) || row.identifier), columns.map((column) => {
+  return createElement16("div", { "data-qti-interaction": "matchInteraction", "data-status": props.status }, node.prompt ? createElement16("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement16("table", null, createElement16("thead", null, createElement16("tr", null, createElement16("td", null), columns.map((column) => createElement16("th", { key: column.identifier, scope: "col" }, textOf(column.content) || column.identifier)))), createElement16("tbody", null, rows.map((row) => createElement16("tr", { key: row.identifier }, createElement16("th", { scope: "row" }, textOf(row.content) || row.identifier), columns.map((column) => {
     const pair = `${row.identifier} ${column.identifier}`;
-    return createElement18("td", { key: column.identifier }, createElement18("input", {
+    return createElement16("td", { key: column.identifier }, createElement16("input", {
       type: "checkbox",
       checked: pairs.includes(pair),
       disabled: props.disabled,
@@ -4512,7 +4408,7 @@ function MatchReferenceSkin(props) {
 }
 
 // src/reference-skin/media.ts
-import { createElement as createElement19 } from "react";
+import { createElement as createElement17 } from "react";
 function findMediaElement(nodes) {
   for (const node of nodes ?? []) {
     if (node.kind === "xml") {
@@ -4534,10 +4430,10 @@ function MediaReferenceSkin(props) {
   const plays = typeof props.value === "string" ? Number(props.value) || 0 : 0;
   const playsExhausted = node.maxPlays !== undefined && node.maxPlays > 0 && plays >= node.maxPlays;
   if (!media) {
-    return createElement19("div", { "data-qti-interaction": "mediaInteraction", "data-status": props.status }, "No media element.");
+    return createElement17("div", { "data-qti-interaction": "mediaInteraction", "data-status": props.status }, "No media element.");
   }
   const src = typeof media.attributes?.["src"] === "string" ? props.resolveAsset(media.attributes["src"]) : undefined;
-  return createElement19("div", { "data-qti-interaction": "mediaInteraction", "data-status": props.status, "data-qti-plays": plays }, node.prompt ? createElement19("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement19(media.name, {
+  return createElement17("div", { "data-qti-interaction": "mediaInteraction", "data-status": props.status, "data-qti-plays": plays }, node.prompt ? createElement17("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement17(media.name, {
     src,
     controls: true,
     loop: node.loop ?? false,
@@ -4548,11 +4444,11 @@ function MediaReferenceSkin(props) {
       }
       props.setValue(String(plays + 1));
     }
-  }), playsExhausted ? createElement19("p", { role: "status" }, "No plays remaining.") : null);
+  }), playsExhausted ? createElement17("p", { role: "status" }, "No plays remaining.") : null);
 }
 
 // src/reference-skin/order.ts
-import { createElement as createElement20 } from "react";
+import { createElement as createElement18 } from "react";
 function OrderReferenceSkin(props) {
   const node = props.node;
   const choices = node.simpleChoices ?? [];
@@ -4570,12 +4466,12 @@ function OrderReferenceSkin(props) {
     next[target] = moved;
     props.setValue(next);
   }
-  return createElement20("div", { "data-qti-interaction": "orderInteraction", "data-status": props.status }, node.prompt ? createElement20("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement20("ol", null, order.map((identifier, index) => createElement20("li", { key: identifier }, props.renderContent(choicesById.get(identifier)?.content) ?? identifier, createElement20("button", {
+  return createElement18("div", { "data-qti-interaction": "orderInteraction", "data-status": props.status }, node.prompt ? createElement18("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null, createElement18("ol", null, order.map((identifier, index) => createElement18("li", { key: identifier }, props.renderContent(choicesById.get(identifier)?.content) ?? identifier, createElement18("button", {
     type: "button",
     "aria-label": `Move ${identifier} up`,
     disabled: props.disabled || index === 0,
     onClick: () => move(index, -1)
-  }, "↑"), createElement20("button", {
+  }, "↑"), createElement18("button", {
     type: "button",
     "aria-label": `Move ${identifier} down`,
     disabled: props.disabled || index === order.length - 1,
@@ -4583,6 +4479,103 @@ function OrderReferenceSkin(props) {
   }, "↓")))));
 }
 
+// src/reference-skin/position-object.ts
+import { createElement as createElement19 } from "react";
+function PositionObjectReferenceSkin(props) {
+  const node = props.node;
+  const maxChoices = node.maxChoices ?? 1;
+  const points = props.value === null ? [] : typeof props.value === "string" ? [props.value] : Array.isArray(props.value) ? [...props.value] : [];
+  if (!node.stageObject || !node.object) {
+    return null;
+  }
+  const movable = node.object;
+  function stageClick(point) {
+    if (props.disabled) {
+      return;
+    }
+    const formatted = formatPoint(point);
+    if (maxChoices === 1) {
+      props.setValue(formatted);
+      return;
+    }
+    if (points.length < maxChoices) {
+      props.setValue([...points, formatted]);
+    }
+  }
+  return createElement19(GraphicStage, {
+    object: node.stageObject,
+    resolveAsset: props.resolveAsset,
+    interaction: "positionObjectStage",
+    status: props.status,
+    onStageClick: stageClick,
+    prompt: node.prompt ? createElement19("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    overlay: points.map((value, index) => {
+      const point = parsePoint(value);
+      if (!point) {
+        return null;
+      }
+      return createElement19("image", {
+        key: `${value}-${index}`,
+        href: props.resolveAsset(movable.data),
+        x: point.x - (movable.width ?? 0) / 2,
+        y: point.y - (movable.height ?? 0) / 2,
+        width: movable.width,
+        height: movable.height,
+        "data-qti-point": value,
+        style: { pointerEvents: "none" }
+      });
+    })
+  });
+}
+
+// src/reference-skin/select-point.ts
+import { Fragment as Fragment5, createElement as createElement20 } from "react";
+function SelectPointReferenceSkin(props) {
+  const node = props.node;
+  const maxChoices = node.maxChoices ?? 1;
+  const points = props.value === null ? [] : typeof props.value === "string" ? [props.value] : Array.isArray(props.value) ? [...props.value] : [];
+  if (!node.object) {
+    return null;
+  }
+  function stageClick(point) {
+    if (props.disabled) {
+      return;
+    }
+    const formatted = formatPoint(point);
+    if (maxChoices === 1) {
+      props.setValue(formatted);
+      return;
+    }
+    if (points.length < maxChoices) {
+      props.setValue([...points, formatted]);
+    }
+  }
+  return createElement20(GraphicStage, {
+    object: node.object,
+    resolveAsset: props.resolveAsset,
+    interaction: "selectPointInteraction",
+    status: props.status,
+    onStageClick: stageClick,
+    prompt: node.prompt ? createElement20("div", { "data-qti-prompt": true }, props.renderContent(node.prompt.content)) : null,
+    overlay: points.map((value, index) => {
+      const [x, y] = value.split(/\s+/u).map(Number);
+      return createElement20(Fragment5, { key: `${value}-${index}` }, createElement20("circle", {
+        cx: x,
+        cy: y,
+        r: 5,
+        fill: "currentColor",
+        "data-qti-point": value,
+        style: { pointerEvents: "none" }
+      }));
+    }),
+    after: createElement20("button", {
+      type: "button",
+      disabled: props.disabled || points.length === 0,
+      onClick: () => props.setValue(null)
+    }, "Clear points")
+  });
+}
+
 // src/reference-skin/slider.ts
 import { createElement as createElement21 } from "react";
 function SliderReferenceSkin(props) {

package/dist/interactions/associate.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const associateInteraction: InteractionDescriptor<"associateInteraction">;

package/dist/interactions/choice.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const choiceInteraction: InteractionDescriptor<"choiceInteraction">;

package/dist/interactions/drawing.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const drawingInteraction: InteractionDescriptor<"drawingInteraction">;

package/dist/interactions/end-attempt.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const endAttemptInteraction: InteractionDescriptor<"endAttemptInteraction">;

package/dist/interactions/extended-text.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const extendedTextInteraction: InteractionDescriptor<"extendedTextInteraction">;

package/dist/interactions/gap-match.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const gapMatchInteraction: InteractionDescriptor<"gapMatchInteraction">;

package/dist/interactions/graphic.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The graphic interaction family: descriptors share the object (stage image) and
+ * hotspot (shape/coords) schemas. Coordinates are numbers in image space, normalized
+ * upstream from the QTI coords attribute.
+ */
+import { type InteractionDescriptor } from "../runtime";
+export declare const hotspotInteraction: InteractionDescriptor<"hotspotInteraction">;
+export declare const graphicOrderInteraction: InteractionDescriptor<"graphicOrderInteraction">;
+export declare const graphicAssociateInteraction: InteractionDescriptor<"graphicAssociateInteraction">;
+export declare const graphicGapMatchInteraction: InteractionDescriptor<"graphicGapMatchInteraction">;
+export declare const selectPointInteraction: InteractionDescriptor<"selectPointInteraction">;
+/** The common single-interaction stage; multi-interaction stages fail validation. */
+export declare const positionObjectStage: InteractionDescriptor<"positionObjectStage">;

package/dist/interactions/hottext.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const hottextInteraction: InteractionDescriptor<"hottextInteraction">;

package/dist/interactions/index.d.ts

@@ -0,0 +1,18 @@
+import type { InteractionDescriptor } from "../runtime";
+export { associateInteraction } from "./associate";
+export { choiceInteraction } from "./choice";
+export { drawingInteraction } from "./drawing";
+export { endAttemptInteraction } from "./end-attempt";
+export { extendedTextInteraction } from "./extended-text";
+export { gapMatchInteraction } from "./gap-match";
+export { graphicAssociateInteraction, graphicGapMatchInteraction, graphicOrderInteraction, hotspotInteraction, positionObjectStage, selectPointInteraction, } from "./graphic";
+export { hottextInteraction } from "./hottext";
+export { inlineChoiceInteraction } from "./inline-choice";
+export { matchInteraction } from "./match";
+export { mediaInteraction } from "./media";
+export { orderInteraction } from "./order";
+export { sliderInteraction } from "./slider";
+export { textEntryInteraction } from "./text-entry";
+export { uploadInteraction } from "./upload";
+/** The interaction set conform-ed ships; consumers assemble these plus their extensions. */
+export declare const qtiCoreInteractions: readonly InteractionDescriptor[];

package/dist/interactions/inline-choice.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const inlineChoiceInteraction: InteractionDescriptor<"inlineChoiceInteraction">;

package/dist/interactions/match.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const matchInteraction: InteractionDescriptor<"matchInteraction">;

package/dist/interactions/media.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const mediaInteraction: InteractionDescriptor<"mediaInteraction">;

package/dist/interactions/order.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const orderInteraction: InteractionDescriptor<"orderInteraction">;

package/dist/interactions/slider.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const sliderInteraction: InteractionDescriptor<"sliderInteraction">;

package/dist/interactions/text-entry.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const textEntryInteraction: InteractionDescriptor<"textEntryInteraction">;

package/dist/interactions/upload.d.ts

@@ -0,0 +1,2 @@
+import { type InteractionDescriptor } from "../runtime";
+export declare const uploadInteraction: InteractionDescriptor<"uploadInteraction">;