@conform-ed/qti-react 0.0.13 → 0.0.14

package/dist/capability.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Capability Report types (ADR-0003): the runtime's answer to "can this content be
+ * delivered, and if not, why". In their own module so the RP interpreter can report
+ * issues without importing the React runtime.
+ */
+export type CapabilityIssueType = "unsupported-interaction" | "invalid-interaction" | "unsupported-element" | "unsupported-rp";
+export interface CapabilityIssue {
+    readonly type: CapabilityIssueType;
+    /** The interaction kind, element name, or RP rule/operator/template at issue. */
+    readonly name: string;
+    readonly responseIdentifier?: string;
+    readonly detail?: string;
+}
+export interface CapabilityReport {
+    readonly deliverable: boolean;
+    readonly issues: readonly CapabilityIssue[];
+}

package/dist/content-model.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The single source of truth for what may appear inside an item/stimulus body.
+ *
+ * Both the renderer's allowlist tree-walk and (later) the authoring editor schema
+ * derive from this definition. QTI 3 bodies are validated for *structure* by
+ * `@conform-ed/contracts`, but their embedded HTML flow content is modelled as a
+ * generic node tree — so validation does not sanitize. This allowlist is the
+ * sanitizer: the renderer emits React only for elements/attributes named here and
+ * drops everything else. It never injects HTML strings.
+ *
+ * v0 scope: the minimal flow/inline vocabulary plus the language-critical bits
+ * (ruby/furigana, MathML). It grows incrementally with the renderer — never "all of
+ * HTML5 at once".
+ */
+/** Interaction node kinds conform-ed ships descriptors and Reference Skins for. */
+export declare const v0InteractionKinds: readonly ["associateInteraction", "choiceInteraction", "drawingInteraction", "endAttemptInteraction", "extendedTextInteraction", "gapMatchInteraction", "graphicAssociateInteraction", "graphicGapMatchInteraction", "graphicOrderInteraction", "hotspotInteraction", "hottextInteraction", "inlineChoiceInteraction", "matchInteraction", "mediaInteraction", "orderInteraction", "positionObjectStage", "selectPointInteraction", "sliderInteraction", "textEntryInteraction", "uploadInteraction"];
+export type V0InteractionKind = (typeof v0InteractionKinds)[number];
+export interface ContentModel {
+    readonly interactionKinds: ReadonlySet<string>;
+    readonly flowElements: ReadonlySet<string>;
+    readonly mathRoot: string;
+    readonly globalAttributes: ReadonlySet<string>;
+    /** Per-element attribute allowlists, additive to `globalAttributes`. */
+    readonly elementAttributes: ReadonlyMap<string, ReadonlySet<string>>;
+    /** Attributes whose values are asset references, routed through the Asset Resolver. */
+    readonly urlAttributes: ReadonlySet<string>;
+}
+export declare const v0ContentModel: ContentModel;
+export declare function isAllowedFlowElement(model: ContentModel, name: string): boolean;
+export declare function isInteractionKind(model: ContentModel, kind: string): boolean;
+/**
+ * Reduce a raw attribute bag to the safe, allowlisted subset for one element. Used by
+ * the body walk so a node that validates against QTI structure still cannot carry
+ * script or handlers. The allowlist is the global set plus the element's own entries.
+ */
+export declare function sanitizeAttributes(model: ContentModel, elementName: string, attributes: Record<string, unknown> | undefined): Record<string, string>;
+/**
+ * Attribute hardening for MathML subtrees: presentation attributes (mathvariant,
+ * linethickness, …) are not individually allowlisted — MathML has no scripting surface
+ * once event handlers and javascript: URLs are stripped.
+ */
+export declare function sanitizeMathAttributes(attributes: Record<string, unknown> | undefined): Record<string, string>;

package/dist/graphic.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Graphic primitives shared by the graphic interaction family and areaMapping scoring:
+ * QTI shape/coords parsing and point-in-shape hit testing. Pure logic, no React.
+ *
+ * Shapes follow the QTI (HTML image-map) conventions:
+ * - `circle`:  center-x, center-y, radius
+ * - `rect`:    left-x, top-y, right-x, bottom-y
+ * - `poly`:    x1, y1, ..., xn, yn
+ * - `ellipse`: center-x, center-y, radius-x, radius-y
+ * - `default`: the entire image
+ */
+export type QtiShape = "circle" | "rect" | "poly" | "ellipse" | "default";
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+/** Parse a QTI coords attribute ("10,20,30") into numbers. */
+export declare function parseCoords(coords: string): number[];
+/** Parse a QTI point value ("x y") or null when malformed. */
+export declare function parsePoint(value: string): Point | null;
+export declare function formatPoint(point: Point): string;
+/** QTI hit test: is `point` inside the area described by (shape, coords)? */
+export declare function pointInShape(shape: string, coords: readonly number[], point: Point): boolean;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export declare const qtiReactPackageName = "@conform-ed/qti-react";
+export { v0ContentModel, v0InteractionKinds, isAllowedFlowElement, isInteractionKind, sanitizeAttributes, type ContentModel, type V0InteractionKind, } from "./content-model";
+export { foldString, mapResponse, matchCorrect, mapResponsePoint, scoreResponse } from "./response-processing";
+export { assessmentItemViewFromNormalized, assessmentTestViewFromNormalized } from "./normalized-item";
+export { formatPoint, parseCoords, parsePoint, pointInShape, type Point, type QtiShape } from "./graphic";
+export { applyCorrectResponseOverrides, collectRpIssues, collectTemplateIssues, executeResponseProcessing, executeTemplateProcessing, mulberry32, resolveTemplate, } from "./rp";
+export type { CustomOperatorImplementation, MaybeRpValue, OutcomeDeclarationView, OutcomeValue, ResponseNormalization, ResponseProcessingContext, ResponseProcessingResult, ResponseProcessingView, RpConditionBranch, RpExpressionView, RpRecordField, RpRuleView, RpScalar, RpValue, TemplateConditionBranch, TemplateDeclarationView, TemplateProcessingContext, TemplateProcessingResult, TemplateProcessingView, TemplateRuleView, } from "./rp";
+export { createAttemptStore, type AttemptSnapshot, type AttemptStore, type AttemptStoreOptions } from "./store";
+export { createTestController, createTestSessionStore, type TestSessionSnapshot, type TestSessionStore, type TestSessionStoreOptions, type AssessmentItemRefView, type AssessmentSectionView, type AssessmentTestView, type BranchRuleView, type ItemSessionControlView, type OutcomeConditionBranch, type OutcomeRuleView, type TestController, type TestFeedbackView, type TestItemResult, type TestPartView, type TestPlan, type TestPlanItem, type TestPlanPart, type TestSessionState, type TimeLimitsView, } from "./test";
+export { createQtiRuntime, defineInteraction, type AssessmentItemView, type AttemptController, type BodyNode, type CapabilityIssue, type CapabilityIssueType, type CapabilityReport, type ContentRendererProps, type FeedbackView, type InteractionDescriptor, type InteractionNode, type InteractionRenderProps, type InteractionSkin, type InteractionStatus, type ItemRendererProps, type NodeOverrides, type OptionProps, type OptionStatus, type QtiRuntime, type QtiRuntimeConfig, type SkinRegistry, type XmlContentNode, } from "./runtime";
+export { createPciModuleRegistry, createPciSkin, mountPci, pciResponseToValue, portableCustomInteraction, serializePciMarkup, valueToPciResponse, type PciConfiguration, type PciInstance, type PciInteractionNode, type PciModule, type PciModuleRegistry, type PciModuleRegistryOptions, type PciMountHandle, type PciMountOptions, type PciSkinOptions, } from "./pci";
+export { associateInteraction, choiceInteraction, drawingInteraction, endAttemptInteraction, extendedTextInteraction, gapMatchInteraction, graphicAssociateInteraction, graphicGapMatchInteraction, graphicOrderInteraction, hotspotInteraction, hottextInteraction, inlineChoiceInteraction, matchInteraction, mediaInteraction, orderInteraction, positionObjectStage, qtiCoreInteractions, selectPointInteraction, sliderInteraction, textEntryInteraction, uploadInteraction, } from "./interactions";
+export { AssociateReferenceSkin, ChoiceReferenceSkin, DrawingReferenceSkin, EndAttemptReferenceSkin, ExtendedTextReferenceSkin, GapMatchReferenceSkin, GraphicAssociateReferenceSkin, GraphicGapMatchReferenceSkin, GraphicOrderReferenceSkin, GraphicStage, HotspotReferenceSkin, HottextReferenceSkin, InlineChoiceReferenceSkin, MatchReferenceSkin, MediaReferenceSkin, OrderReferenceSkin, PositionObjectReferenceSkin, SelectPointReferenceSkin, SliderReferenceSkin, TextEntryReferenceSkin, UploadReferenceSkin, referenceSkin, textOf, } from "./reference-skin";
+export type { AreaMapEntryView, AreaMappingView, Cardinality, CorrectResponseView, MapEntryView, MappingView, ResponseDeclarationView, ResponseValue, ScoreResult, } from "./types";

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;
@@ -3384,7 +3368,7 @@ 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);
   if (returned) {
@@ -3919,7 +3903,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 +3919,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 +3930,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 +4349,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 +4378,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 +4391,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 +4405,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 +4427,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 +4441,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 +4463,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 +4476,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">;