@superbuilders/incept-renderer 0.1.0

package/dist/components/index.js

@@ -0,0 +1,2495 @@
+import * as React3 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import '@radix-ui/react-separator';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, defaultDropAnimationSideEffects, DndContext, closestCenter, DragOverlay, useDraggable, useDroppable } from '@dnd-kit/core';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy, arrayMove, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+// src/components/qti-renderer.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/html/sanitize.ts
+var DEFAULT_CONFIG = {
+  // HTML content tags
+  allowedTags: /* @__PURE__ */ new Set([
+    // Text content
+    "p",
+    "span",
+    "div",
+    "br",
+    "hr",
+    // Formatting
+    "b",
+    "i",
+    "u",
+    "strong",
+    "em",
+    "mark",
+    "small",
+    "sub",
+    "sup",
+    "code",
+    "pre",
+    "kbd",
+    // Lists
+    "ul",
+    "ol",
+    "li",
+    "dl",
+    "dt",
+    "dd",
+    // Tables
+    "table",
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+    "th",
+    "td",
+    "caption",
+    "colgroup",
+    "col",
+    // Media
+    "img",
+    "audio",
+    "video",
+    "source",
+    "track",
+    // Semantic
+    "article",
+    "section",
+    "nav",
+    "aside",
+    "header",
+    "footer",
+    "main",
+    "figure",
+    "figcaption",
+    "blockquote",
+    "cite",
+    // Links
+    "a",
+    // Forms (for future interactive elements)
+    "label",
+    "button"
+  ]),
+  allowedAttributes: {
+    // Global attributes
+    "*": /* @__PURE__ */ new Set(["class", "id", "lang", "dir", "title", "style"]),
+    // Specific attributes
+    img: /* @__PURE__ */ new Set(["src", "alt", "width", "height", "style"]),
+    a: /* @__PURE__ */ new Set(["href", "target", "rel"]),
+    audio: /* @__PURE__ */ new Set(["src", "controls", "loop", "muted"]),
+    video: /* @__PURE__ */ new Set(["src", "controls", "loop", "muted", "width", "height", "poster"]),
+    source: /* @__PURE__ */ new Set(["src", "type"]),
+    track: /* @__PURE__ */ new Set(["src", "kind", "srclang", "label"])
+  },
+  allowDataAttributes: false,
+  allowMathML: true
+};
+var MATHML_TAGS = /* @__PURE__ */ new Set([
+  // Root
+  "math",
+  // Token elements
+  "mi",
+  "mn",
+  "mo",
+  "mtext",
+  "mspace",
+  "ms",
+  // Layout
+  "mrow",
+  "mfrac",
+  "msqrt",
+  "mroot",
+  "mstyle",
+  "merror",
+  "mpadded",
+  "mphantom",
+  "mfenced",
+  "menclose",
+  // Scripts and limits
+  "msub",
+  "msup",
+  "msubsup",
+  "munder",
+  "mover",
+  "munderover",
+  "mmultiscripts",
+  "mprescripts",
+  "none",
+  // Tables
+  "mtable",
+  "mtr",
+  "mtd",
+  "maligngroup",
+  "malignmark",
+  // Elementary math
+  "mstack",
+  "mlongdiv",
+  "msgroup",
+  "msrow",
+  "mscarries",
+  "mscarry",
+  "msline",
+  // Semantic
+  "semantics",
+  "annotation",
+  "annotation-xml"
+]);
+function sanitizeHtml(html, config = {}) {
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+  const dangerousPatterns = [
+    /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+    /javascript:/gi,
+    /on\w+\s*=/gi,
+    // Event handlers
+    /<iframe\b/gi,
+    /<embed\b/gi,
+    /<object\b/gi,
+    /data:text\/html/gi
+  ];
+  let sanitized = html;
+  for (const pattern of dangerousPatterns) {
+    sanitized = sanitized.replace(pattern, "");
+  }
+  const cleaned = cleanHtml(sanitized, cfg);
+  return cleaned;
+}
+function cleanHtml(html, config) {
+  let cleaned = html;
+  const tagPattern = /<\/?([a-zA-Z][a-zA-Z0-9-]*)([^>]*)>/g;
+  cleaned = cleaned.replace(tagPattern, (match, tagName, _attrs) => {
+    const tag = tagName.toLowerCase();
+    const isMathML = tag === "math" || cleaned.includes("<math");
+    if (isMathML && config.allowMathML && MATHML_TAGS.has(tag)) {
+      return match;
+    }
+    if (config.allowedTags.has(tag)) {
+      return cleanAttributesString(match, tag, config);
+    }
+    return "";
+  });
+  return cleaned;
+}
+function cleanAttributesString(tagString, tagName, config) {
+  const attrPattern = /\s+([a-zA-Z][a-zA-Z0-9-:]*)(?:="([^"]*)"|'([^']*)'|=([^\s>]+)|(?=\s|>))/g;
+  let cleanedTag = `<${tagString.startsWith("</") ? "/" : ""}${tagName}`;
+  let match = attrPattern.exec(tagString);
+  while (match !== null) {
+    const attrName = (match[1] || "").toLowerCase();
+    const attrValue = match[2] || match[3] || match[4] || "";
+    const globalAttrs = config.allowedAttributes["*"] || /* @__PURE__ */ new Set();
+    const tagAttrs = config.allowedAttributes[tagName] || /* @__PURE__ */ new Set();
+    let isAllowed = globalAttrs.has(attrName) || tagAttrs.has(attrName);
+    if (tagName === "img" && (attrName === "width" || attrName === "height" || attrName === "style")) {
+      isAllowed = false;
+    }
+    if (!isAllowed && config.allowDataAttributes && attrName.startsWith("data-")) {
+      isAllowed = true;
+    }
+    if (isAllowed && !isDangerousAttributeValue(attrName, attrValue)) {
+      cleanedTag += ` ${attrName}="${attrValue.replace(/"/g, "&quot;")}"`;
+    }
+    match = attrPattern.exec(tagString);
+  }
+  cleanedTag += ">";
+  return cleanedTag;
+}
+function isDangerousAttributeValue(name, value) {
+  const valueLower = value.toLowerCase().trim();
+  if (name === "href" || name === "src") {
+    if (valueLower.startsWith("javascript:") || valueLower.startsWith("data:text/html")) {
+      return true;
+    }
+  }
+  if (valueLower.includes("javascript:") || valueLower.includes("onerror=")) {
+    return true;
+  }
+  return false;
+}
+function sanitizeForDisplay(html) {
+  const hasMathML = html.toLowerCase().includes("<math");
+  return sanitizeHtml(html, {
+    allowMathML: hasMathML,
+    allowDataAttributes: true
+  });
+}
+function HTMLContent({
+  html,
+  className,
+  inlineEmbeds,
+  textEmbeds,
+  gapEmbeds,
+  renderInline,
+  renderTextEntry,
+  renderGap
+}) {
+  const containerRef = React3.useRef(null);
+  const [targets, setTargets] = React3.useState({});
+  const safeHtml = React3.useMemo(() => sanitizeForDisplay(html), [html]);
+  React3.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.innerHTML = safeHtml;
+    const newTargets = {};
+    if (inlineEmbeds) {
+      const nodes = el.querySelectorAll("[data-qti-inline]");
+      for (const node of nodes) {
+        const responseId = node.getAttribute("data-qti-inline");
+        if (responseId && inlineEmbeds[responseId]) {
+          newTargets[responseId] = node;
+        }
+      }
+    }
+    if (textEmbeds) {
+      const nodes = el.querySelectorAll("[data-qti-text-entry]");
+      for (const node of nodes) {
+        const responseId = node.getAttribute("data-qti-text-entry");
+        if (responseId && textEmbeds[responseId]) {
+          newTargets[responseId] = node;
+        }
+      }
+    }
+    if (gapEmbeds) {
+      const nodes = el.querySelectorAll("[data-qti-gap]");
+      for (const node of nodes) {
+        const gapId = node.getAttribute("data-qti-gap");
+        if (gapId && gapEmbeds[gapId]) {
+          newTargets[`gap-${gapId}`] = node;
+        }
+      }
+    }
+    setTargets(newTargets);
+  }, [safeHtml, inlineEmbeds, textEmbeds, gapEmbeds]);
+  const portals = React3.useMemo(() => {
+    const items = [];
+    if (inlineEmbeds && renderInline) {
+      for (const [id, embed] of Object.entries(inlineEmbeds)) {
+        const target = targets[id];
+        if (target) {
+          items.push(createPortal(renderInline(embed), target, id));
+        }
+      }
+    }
+    if (textEmbeds && renderTextEntry) {
+      for (const [id, embed] of Object.entries(textEmbeds)) {
+        const target = targets[id];
+        if (target) {
+          items.push(createPortal(renderTextEntry(embed), target, id));
+        }
+      }
+    }
+    if (gapEmbeds && renderGap) {
+      for (const [id, gap] of Object.entries(gapEmbeds)) {
+        const target = targets[`gap-${id}`];
+        if (target) {
+          items.push(createPortal(renderGap(gap), target, `gap-${id}`));
+        }
+      }
+    }
+    return items;
+  }, [targets, inlineEmbeds, textEmbeds, gapEmbeds, renderInline, renderTextEntry, renderGap]);
+  React3.useEffect(() => {
+    const checkMathMLSupport = () => {
+      const mml = document.createElement("math");
+      mml.innerHTML = "<mspace/>";
+      const firstChild = mml.firstChild;
+      return firstChild instanceof Element && firstChild.namespaceURI === "http://www.w3.org/1998/Math/MathML";
+    };
+    if (!checkMathMLSupport() && containerRef.current?.querySelector("math")) ;
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(
+          "qti-html-content text-foreground text-lg font-medium leading-relaxed",
+          // Ensure images never stretch or overflow
+          "[&_img]:max-w-full [&_img]:h-auto [&_img]:w-auto [&_img]:object-contain [&_img]:block [&_img]:mx-auto",
+          className
+        )
+      }
+    ),
+    portals
+  ] });
+}
+function FeedbackMessage({
+  responseId,
+  showFeedback,
+  perResponseFeedback
+}) {
+  if (!showFeedback) return null;
+  const entry = perResponseFeedback?.[responseId];
+  const messageHtml = entry?.messageHtml;
+  if (!messageHtml) return null;
+  const isCorrect = entry?.isCorrect === true;
+  return /* @__PURE__ */ jsx("div", { className: "qti-feedback mt-3 p-6", "data-correct": isCorrect, children: /* @__PURE__ */ jsx(HTMLContent, { html: messageHtml }) });
+}
+var choiceIndicatorVariants = cva(
+  [
+    "cursor-pointer shrink-0 rounded-xs size-6 text-xs font-extrabold flex items-center justify-center outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[state=unchecked]:bg-background data-[state=unchecked]:border-2 data-[state=unchecked]:border-input data-[state=unchecked]:text-muted-foreground",
+    "data-[state=checked]:border-2 data-[state=checked]:border-[var(--choice-complement)] data-[state=checked]:text-[var(--choice-foreground)]",
+    "data-[filled=true]:data-[state=checked]:bg-[var(--choice-complement)]",
+    "data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_2px_rgb(255_255_255)] dark:data-[filled=true]:data-[state=checked]:shadow-[inset_0_0_0_2px_rgb(255_255_255)]",
+    "focus-visible:ring-[var(--choice-complement)] focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      palette: {
+        default: [
+          "[--choice-foreground:var(--color-foreground)]",
+          "[--choice-complement:var(--color-muted-foreground)]"
+        ],
+        betta: [
+          "[--choice-foreground:var(--color-betta)]",
+          "[--choice-complement:var(--color-butterfly)]"
+        ],
+        cardinal: [
+          "[--choice-foreground:var(--color-cardinal)]",
+          "[--choice-complement:var(--color-fire-ant)]"
+        ],
+        bee: [
+          "[--choice-foreground:var(--color-bee)]",
+          "[--choice-complement:var(--color-lion)]"
+        ],
+        owl: [
+          "[--choice-foreground:var(--color-owl)]",
+          "[--choice-complement:var(--color-tree-frog)]"
+        ],
+        macaw: [
+          "[--choice-foreground:var(--color-macaw)]",
+          "[--choice-complement:var(--color-whale)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      palette: "default"
+    }
+  }
+);
+function ChoiceIndicator({
+  className,
+  palette = "default",
+  letter,
+  type = "radio",
+  showLetter = true,
+  ...props
+}) {
+  const baseClassName = cn(choiceIndicatorVariants({ palette }), className);
+  if (type === "checkbox") {
+    const checkboxProps = props;
+    return /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        "data-slot": "choice-indicator",
+        "data-palette": palette,
+        "data-filled": !showLetter,
+        className: baseClassName,
+        ...checkboxProps,
+        children: showLetter && /* @__PURE__ */ jsx("span", { className: "data-[state=unchecked]:block data-[state=checked]:hidden", children: letter })
+      }
+    );
+  }
+  const radioProps = props;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      "data-slot": "choice-indicator",
+      "data-palette": palette,
+      className: baseClassName,
+      ...radioProps,
+      children: letter
+    }
+  );
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "data-slot": "field-set",
+      className: cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-group",
+      className: cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation,
+      className: cn(fieldVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-content",
+      className: cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldLabel({
+  className,
+  palette = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      "data-slot": "field-label",
+      "data-palette": palette,
+      className: cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug cursor-pointer",
+        "group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-xs has-[>[data-slot=field]]:p-4",
+        "has-[>[data-slot=field]]:border-2 has-[>[data-slot=field]]:shadow-[0_2px_0_var(--field-complement)]",
+        "has-[>[data-slot=field]]:hover:brightness-90 dark:has-[>[data-slot=field]]:hover:brightness-75",
+        "has-[>[data-slot=field]]:active:shadow-none has-[>[data-slot=field]]:active:translate-y-[2px]",
+        "[--field-background:var(--color-background)]",
+        "[--field-complement:var(--color-accent)]",
+        "has-[>[data-slot=field]]:bg-[var(--field-background)] has-[>[data-slot=field]]:border-accent has-[>[data-slot=field]]:text-foreground",
+        "has-[>[data-slot=field]]:has-data-[state=checked]:bg-[var(--field-foreground)]/10 has-[>[data-slot=field]]:has-data-[state=checked]:border-[var(--field-complement)] has-[>[data-slot=field]]:has-data-[state=checked]:text-[var(--field-foreground)]",
+        "has-data-[state=checked]:[--field-complement:var(--field-shadow)]",
+        "data-[palette=default]:[--field-foreground:var(--color-foreground)] data-[palette=default]:[--field-shadow:var(--color-muted-foreground)]",
+        "data-[palette=betta]:[--field-foreground:var(--color-betta)] data-[palette=betta]:[--field-shadow:var(--color-butterfly)]",
+        "data-[palette=cardinal]:[--field-foreground:var(--color-cardinal)] data-[palette=cardinal]:[--field-shadow:var(--color-fire-ant)]",
+        "data-[palette=bee]:[--field-foreground:var(--color-bee)] data-[palette=bee]:[--field-shadow:var(--color-lion)]",
+        "data-[palette=owl]:[--field-foreground:var(--color-owl)] data-[palette=owl]:[--field-shadow:var(--color-tree-frog)]",
+        "data-[palette=macaw]:[--field-foreground:var(--color-macaw)] data-[palette=macaw]:[--field-shadow:var(--color-whale)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "field-label",
+      className: cn(
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+cva(
+  [
+    "cursor-pointer",
+    "hover:brightness-90 dark:hover:brightness-75",
+    "text-[var(--radio-group-item-foreground)] bg-[var(--radio-group-item-background)] dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[state=unchecked]:border-input",
+    "data-[state=checked]:border-[var(--radio-group-item-complement)]",
+    "focus-visible:ring-[var(--radio-group-item-foreground)] focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      palette: {
+        default: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-foreground)]",
+          "[--radio-group-item-complement:var(--color-foreground)]"
+        ],
+        betta: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-betta)]",
+          "[--radio-group-item-complement:var(--color-butterfly)]"
+        ],
+        cardinal: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-cardinal)]",
+          "[--radio-group-item-complement:var(--color-fire-ant)]"
+        ],
+        bee: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-bee)]",
+          "[--radio-group-item-complement:var(--color-lion)]"
+        ],
+        owl: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-owl)]",
+          "[--radio-group-item-complement:var(--color-tree-frog)]"
+        ],
+        macaw: [
+          "[--radio-group-item-background:var(--color-accent)]",
+          "[--radio-group-item-foreground:var(--color-macaw)]",
+          "[--radio-group-item-complement:var(--color-whale)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      palette: "default"
+    }
+  }
+);
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function ChoiceInteractionRenderer({
+  interaction,
+  response,
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted,
+  palette = "macaw",
+  isCorrect,
+  selectedChoicesCorrectness
+}) {
+  const isMultiple = interaction.maxChoices > 1;
+  const selectedValues = React3.useMemo(() => {
+    if (!response) return [];
+    return Array.isArray(response) ? response : [response];
+  }, [response]);
+  const isImagesOnly = React3.useMemo(() => {
+    const hasImg = (html) => html.toLowerCase().includes("<img");
+    const stripped = (html) => html.replace(/<[^>]*>/g, "").trim();
+    return interaction.choices.length > 0 && interaction.choices.every((c) => hasImg(c.contentHtml) && stripped(c.contentHtml) === "");
+  }, [interaction.choices]);
+  const choiceCount = interaction.choices.length;
+  const gridClass = React3.useMemo(() => {
+    if (!isImagesOnly) return "space-y-2";
+    switch (choiceCount) {
+      case 4:
+        return "grid grid-cols-2 gap-4";
+      case 3:
+        return "grid grid-cols-3 gap-4";
+      case 2:
+        return "max-w-3xl mx-auto grid grid-cols-2 gap-6";
+      default:
+        return "grid grid-cols-2 md:grid-cols-3 gap-4";
+    }
+  }, [isImagesOnly, choiceCount]);
+  const imageCardClass = React3.useMemo(() => {
+    if (!isImagesOnly) return "";
+    return choiceCount === 2 ? "justify-center text-center [&_img]:max-h-52 md:[&_img]:max-h-60 ![&_img]:w-auto ![&_img]:h-auto ![&_img]:max-w-full ![&_img]:block [&_img]:mx-auto min-h-[220px] px-8 py-8" : "justify-center text-center [&_img]:max-h-40 md:[&_img]:max-h-48 ![&_img]:w-auto ![&_img]:h-auto ![&_img]:max-w-full ![&_img]:block [&_img]:mx-auto min-h-[180px]";
+  }, [isImagesOnly, choiceCount]);
+  const handleSingleChoice = (value) => {
+    if (!disabled && onAnswerSelect) {
+      onAnswerSelect(value);
+    }
+  };
+  const promptElement = interaction.promptHtml ? /* @__PURE__ */ jsx(HTMLContent, { html: interaction.promptHtml, className: "mb-4" }) : null;
+  if (!isMultiple) {
+    const submitted2 = hasSubmitted === true;
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      promptElement,
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        {
+          value: selectedValues[0] || "",
+          onValueChange: (value) => handleSingleChoice(value),
+          disabled: disabled || submitted2,
+          children: /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsx(FieldSet, { children: isImagesOnly ? /* @__PURE__ */ jsx("div", { className: gridClass, children: interaction.choices.map((choice, index) => {
+            const isSelected = selectedValues.includes(choice.identifier);
+            const choicePalette = submitted2 && isSelected ? isCorrect ? "owl" : "cardinal" : palette;
+            const domId = `${interaction.responseIdentifier}-${choice.identifier}`;
+            return /* @__PURE__ */ jsx(FieldLabel, { htmlFor: domId, palette: choicePalette, children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", "data-disabled": disabled || submitted2, children: [
+              /* @__PURE__ */ jsx(
+                ChoiceIndicator,
+                {
+                  value: choice.identifier,
+                  id: domId,
+                  letter: String.fromCharCode(65 + index),
+                  palette: choicePalette,
+                  disabled: disabled || submitted2
+                }
+              ),
+              /* @__PURE__ */ jsx(FieldContent, { className: cn(imageCardClass), children: /* @__PURE__ */ jsx(FieldTitle, { children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.contentHtml }) }) })
+            ] }) }, choice.identifier);
+          }) }) : interaction.choices.map((choice, index) => {
+            const isSelected = selectedValues.includes(choice.identifier);
+            const choicePalette = submitted2 && isSelected ? isCorrect ? "owl" : "cardinal" : palette;
+            const domId = `${interaction.responseIdentifier}-${choice.identifier}`;
+            return /* @__PURE__ */ jsx(FieldLabel, { htmlFor: domId, palette: choicePalette, children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", "data-disabled": disabled || submitted2, children: [
+              /* @__PURE__ */ jsx(
+                ChoiceIndicator,
+                {
+                  value: choice.identifier,
+                  id: domId,
+                  "aria-describedby": submitted2 && isSelected && choice.inlineFeedbackHtml ? `${domId}-fb` : void 0,
+                  letter: String.fromCharCode(65 + index),
+                  palette: choicePalette,
+                  disabled: disabled || submitted2
+                }
+              ),
+              /* @__PURE__ */ jsxs(FieldContent, { children: [
+                /* @__PURE__ */ jsx(FieldTitle, { children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.contentHtml }) }),
+                submitted2 && isSelected && choice.inlineFeedbackHtml ? /* @__PURE__ */ jsx(
+                  "output",
+                  {
+                    id: `${domId}-fb`,
+                    "aria-live": "polite",
+                    className: cn(
+                      "mt-2 pl-3 border-l-4 text-sm text-muted-foreground",
+                      isCorrect ? "border-owl" : "border-cardinal"
+                    ),
+                    children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.inlineFeedbackHtml })
+                  }
+                ) : null
+              ] })
+            ] }) }, choice.identifier);
+          }) }) })
+        }
+      )
+    ] });
+  }
+  const submitted = hasSubmitted === true;
+  const atMax = selectedValues.length >= interaction.maxChoices;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    promptElement,
+    /* @__PURE__ */ jsx(FieldGroup, { children: /* @__PURE__ */ jsx(FieldSet, { children: isImagesOnly ? /* @__PURE__ */ jsx("div", { className: gridClass, children: interaction.choices.map((choice, _index) => {
+      const isChecked = selectedValues.includes(choice.identifier);
+      const perSelection = selectedChoicesCorrectness?.find((c) => c.id === choice.identifier)?.isCorrect;
+      const selectedCorrect = perSelection ?? (isChecked ? isCorrect ?? false : false);
+      const choicePalette = submitted && isChecked ? selectedCorrect ? "owl" : "cardinal" : palette;
+      const domId = `${interaction.responseIdentifier}-${choice.identifier}`;
+      return /* @__PURE__ */ jsx(FieldLabel, { htmlFor: domId, palette: choicePalette, children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", "data-disabled": disabled || submitted, children: [
+        /* @__PURE__ */ jsx(
+          ChoiceIndicator,
+          {
+            type: "checkbox",
+            id: domId,
+            showLetter: false,
+            palette: choicePalette,
+            checked: isChecked,
+            onCheckedChange: (checked) => {
+              if (disabled || submitted || !onAnswerSelect) return;
+              if (checked === true && !isChecked && atMax) return;
+              const next = checked === true ? [...selectedValues, choice.identifier] : selectedValues.filter((v) => v !== choice.identifier);
+              onAnswerSelect(next);
+            },
+            disabled: disabled || submitted || !isChecked && atMax,
+            "aria-describedby": submitted && isChecked && choice.inlineFeedbackHtml ? `${domId}-fb` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(FieldContent, { className: cn(imageCardClass), children: [
+          /* @__PURE__ */ jsx(FieldTitle, { children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.contentHtml }) }),
+          submitted && isChecked && choice.inlineFeedbackHtml ? /* @__PURE__ */ jsx(
+            "output",
+            {
+              id: `${domId}-fb`,
+              "aria-live": "polite",
+              className: cn(
+                "mt-2 pl-3 border-l-4 text-sm text-muted-foreground",
+                selectedCorrect ? "border-owl" : "border-cardinal"
+              ),
+              children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.inlineFeedbackHtml })
+            }
+          ) : null
+        ] })
+      ] }) }, choice.identifier);
+    }) }) : interaction.choices.map((choice, _index) => {
+      const isChecked = selectedValues.includes(choice.identifier);
+      const perSelection = selectedChoicesCorrectness?.find((c) => c.id === choice.identifier)?.isCorrect;
+      const selectedCorrect = perSelection ?? (isChecked ? isCorrect ?? false : false);
+      const choicePalette = submitted && isChecked ? selectedCorrect ? "owl" : "cardinal" : palette;
+      const domId = `${interaction.responseIdentifier}-${choice.identifier}`;
+      return /* @__PURE__ */ jsx(FieldLabel, { htmlFor: domId, palette: choicePalette, children: /* @__PURE__ */ jsxs(Field, { orientation: "horizontal", "data-disabled": disabled || submitted, children: [
+        /* @__PURE__ */ jsx(
+          ChoiceIndicator,
+          {
+            type: "checkbox",
+            id: domId,
+            showLetter: false,
+            palette: choicePalette,
+            checked: isChecked,
+            onCheckedChange: (checked) => {
+              if (disabled || submitted || !onAnswerSelect) return;
+              if (checked === true && !isChecked && atMax) return;
+              const next = checked === true ? [...selectedValues, choice.identifier] : selectedValues.filter((v) => v !== choice.identifier);
+              onAnswerSelect(next);
+            },
+            disabled: disabled || submitted || !isChecked && atMax,
+            "aria-describedby": submitted && isChecked && choice.inlineFeedbackHtml ? `${domId}-fb` : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(FieldContent, { children: [
+          /* @__PURE__ */ jsx(FieldTitle, { children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.contentHtml }) }),
+          submitted && isChecked && choice.inlineFeedbackHtml ? /* @__PURE__ */ jsx(
+            "output",
+            {
+              id: `${domId}-fb`,
+              "aria-live": "polite",
+              className: cn(
+                "mt-2 pl-3 border-l-4 text-sm text-muted-foreground",
+                selectedCorrect ? "border-owl" : "border-cardinal"
+              ),
+              children: /* @__PURE__ */ jsx(HTMLContent, { html: choice.inlineFeedbackHtml })
+            }
+          ) : null
+        ] })
+      ] }) }, choice.identifier);
+    }) }) })
+  ] });
+}
+function SafeInlineHTML({ html, className }) {
+  const ref = React3.useRef(null);
+  React3.useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = html;
+    }
+  }, [html]);
+  return /* @__PURE__ */ jsx("span", { ref, className });
+}
+function toQtiResponse(state) {
+  return Object.entries(state).map(([gapId, sourceId]) => `${sourceId} ${gapId}`);
+}
+function fromQtiResponse(response) {
+  const state = {};
+  for (const pair of response) {
+    const parts = pair.split(" ");
+    const sourceId = parts[0];
+    const gapId = parts[1];
+    if (sourceId && gapId) {
+      state[gapId] = sourceId;
+    }
+  }
+  return state;
+}
+var gapSlotVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "min-w-[4rem] min-h-[1.75rem] px-2 mx-1 my-1",
+    "border rounded-xs align-middle",
+    "transition-all duration-150"
+  ],
+  {
+    variants: {
+      state: {
+        empty: "border-muted-foreground/30 bg-muted/20",
+        hover: "border-macaw bg-macaw/10",
+        filled: "border-macaw bg-macaw/10",
+        correct: "border-owl bg-owl/15",
+        incorrect: "border-cardinal bg-cardinal/15"
+      }
+    },
+    defaultVariants: {
+      state: "empty"
+    }
+  }
+);
+var sourceTokenVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "h-7 px-2 rounded-xs border-2",
+    "text-sm font-semibold",
+    "transition-all duration-150",
+    "select-none"
+  ],
+  {
+    variants: {
+      state: {
+        idle: "bg-background border-border shadow-[0_2px_0_var(--color-border)] cursor-grab hover:border-macaw hover:shadow-[0_2px_0_var(--color-macaw)]",
+        selected: "bg-macaw/15 border-macaw shadow-[0_2px_0_var(--color-whale)] ring-2 ring-macaw/30",
+        dragging: "opacity-50 cursor-grabbing",
+        disabled: "opacity-50 cursor-not-allowed bg-muted/50 border-muted shadow-none"
+      }
+    },
+    defaultVariants: {
+      state: "idle"
+    }
+  }
+);
+function SourceToken({ id, contentHtml, disabled, isSelected, onClick, remainingUses }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `source-${id}`,
+    data: { type: "source", sourceId: id },
+    disabled: disabled || remainingUses <= 0
+  });
+  if (remainingUses <= 0) return null;
+  const getState = () => {
+    if (disabled) return "disabled";
+    if (isDragging) return "dragging";
+    if (isSelected) return "selected";
+    return "idle";
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      onClick: disabled ? void 0 : onClick,
+      className: cn(sourceTokenVariants({ state: getState() }), "active:cursor-grabbing"),
+      disabled,
+      ...attributes,
+      ...listeners,
+      children: [
+        /* @__PURE__ */ jsx(SafeInlineHTML, { html: contentHtml }),
+        remainingUses > 1 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-xs text-muted-foreground", children: [
+          "\xD7",
+          remainingUses
+        ] })
+      ]
+    }
+  );
+}
+function GapSlot({ gapId, filledWith, onClear, onClick, disabled, isCorrect, hasSubmitted }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `gap-${gapId}`,
+    data: { type: "gap", gapId },
+    disabled
+  });
+  const getState = () => {
+    if (hasSubmitted && filledWith) {
+      return isCorrect ? "correct" : "incorrect";
+    }
+    if (isOver) return "hover";
+    if (filledWith) return "filled";
+    return "empty";
+  };
+  return /* @__PURE__ */ jsx("span", { ref: setNodeRef, className: cn(gapSlotVariants({ state: getState() })), children: filledWith ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: disabled ? void 0 : onClear,
+      disabled,
+      className: cn(
+        "flex items-center gap-1",
+        !disabled && "hover:text-cardinal cursor-pointer",
+        disabled && "cursor-default"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SafeInlineHTML, { html: filledWith.contentHtml }),
+        !disabled && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-60", children: "\xD7" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className: cn(
+        "w-full h-full min-h-[1.5em] flex items-center justify-center",
+        !disabled && "cursor-pointer hover:bg-macaw/5"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "___" })
+    }
+  ) });
+}
+function GapMatchInteraction({
+  interaction,
+  response = [],
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted = false,
+  gapCorrectness
+}) {
+  const currentPairs = React3.useMemo(() => fromQtiResponse(response), [response]);
+  const [selectedSourceId, setSelectedSourceId] = React3.useState(null);
+  const [activeDragId, setActiveDragId] = React3.useState(null);
+  const activeSource = React3.useMemo(
+    () => interaction.gapTexts.find((gt) => gt.id === activeDragId),
+    [activeDragId, interaction.gapTexts]
+  );
+  const getRemainingUses = (sourceId) => {
+    const source = interaction.gapTexts.find((gt) => gt.id === sourceId);
+    if (!source) return 0;
+    if (source.matchMax === 0) return 999;
+    const usedCount = Object.values(currentPairs).filter((id) => id === sourceId).length;
+    return source.matchMax - usedCount;
+  };
+  const handleSourceClick = (sourceId) => {
+    if (disabled || hasSubmitted) return;
+    setSelectedSourceId((prev) => prev === sourceId ? null : sourceId);
+  };
+  const handleGapClick = (gapId) => {
+    if (disabled || hasSubmitted || !selectedSourceId) return;
+    if (getRemainingUses(selectedSourceId) <= 0) {
+      setSelectedSourceId(null);
+      return;
+    }
+    const newPairs = { ...currentPairs, [gapId]: selectedSourceId };
+    onAnswerSelect?.(toQtiResponse(newPairs));
+    setSelectedSourceId(null);
+  };
+  const handleClearGap = (gapId) => {
+    if (disabled || hasSubmitted) return;
+    const newPairs = { ...currentPairs };
+    delete newPairs[gapId];
+    onAnswerSelect?.(toQtiResponse(newPairs));
+  };
+  const handleDragEnd = (event) => {
+    setActiveDragId(null);
+    const { active, over } = event;
+    if (!over) return;
+    const sourceData = active.data.current;
+    const targetData = over.data.current;
+    if (sourceData?.type === "source" && targetData?.type === "gap") {
+      const sourceId = sourceData.sourceId;
+      const gapId = targetData.gapId;
+      if (typeof sourceId === "string" && typeof gapId === "string") {
+        if (getRemainingUses(sourceId) <= 0) return;
+        const newPairs = { ...currentPairs, [gapId]: sourceId };
+        onAnswerSelect?.(toQtiResponse(newPairs));
+      }
+    }
+  };
+  const gapEmbeds = React3.useMemo(() => {
+    const embeds = {};
+    for (const gap of interaction.gaps) {
+      embeds[gap.id] = gap;
+    }
+    return embeds;
+  }, [interaction.gaps]);
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      onDragStart: (e) => {
+        const id = e.active.id;
+        const sourceId = typeof id === "string" ? id.replace("source-", "") : null;
+        setActiveDragId(sourceId);
+        setSelectedSourceId(null);
+      },
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "p-4 rounded-xl border-2 border-dashed",
+                "flex flex-wrap gap-2 min-h-[3.5rem]",
+                disabled || hasSubmitted ? "bg-muted/30 border-muted" : "bg-muted/10 border-muted-foreground/20"
+              ),
+              children: [
+                interaction.gapTexts.map((source) => /* @__PURE__ */ jsx(
+                  SourceToken,
+                  {
+                    id: source.id,
+                    contentHtml: source.contentHtml,
+                    disabled: disabled || hasSubmitted,
+                    isSelected: selectedSourceId === source.id,
+                    onClick: () => handleSourceClick(source.id),
+                    remainingUses: getRemainingUses(source.id)
+                  },
+                  source.id
+                )),
+                interaction.gapTexts.every((s) => getRemainingUses(s.id) <= 0)
+              ]
+            }
+          ),
+          selectedSourceId && !disabled && !hasSubmitted && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground animate-pulse", children: "Click a gap to place the selected token" }),
+          /* @__PURE__ */ jsx("div", { className: "leading-relaxed text-lg", children: /* @__PURE__ */ jsx(
+            HTMLContent,
+            {
+              html: interaction.contentHtml,
+              gapEmbeds,
+              renderGap: (gap) => {
+                const sourceId = currentPairs[gap.id];
+                const source = interaction.gapTexts.find((gt) => gt.id === sourceId);
+                return /* @__PURE__ */ jsx(
+                  GapSlot,
+                  {
+                    gapId: gap.id,
+                    filledWith: source,
+                    onClear: () => handleClearGap(gap.id),
+                    onClick: () => handleGapClick(gap.id),
+                    disabled: disabled || hasSubmitted,
+                    isCorrect: gapCorrectness?.[gap.id],
+                    hasSubmitted
+                  }
+                );
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeSource ? /* @__PURE__ */ jsx("div", { className: cn(sourceTokenVariants({ state: "selected" }), "shadow-xl cursor-grabbing"), children: /* @__PURE__ */ jsx(SafeInlineHTML, { html: activeSource.contentHtml }) }) : null })
+      ]
+    }
+  );
+}
+var selectTriggerVariants = cva(
+  [
+    "cursor-pointer",
+    "hover:brightness-90 dark:hover:brightness-75",
+    "border-[var(--select-complement)] text-[var(--select-foreground)] bg-[var(--select-background)] inline-flex items-center justify-between gap-2 align-baseline rounded-xs px-3 py-2 text-sm whitespace-nowrap outline-none",
+    "data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+    "[&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      palette: {
+        default: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-foreground)]",
+          "[--select-complement:var(--color-accent)]"
+        ],
+        betta: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-betta)]",
+          "[--select-complement:var(--color-butterfly)]"
+        ],
+        cardinal: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-cardinal)]",
+          "[--select-complement:var(--color-fire-ant)]"
+        ],
+        bee: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-bee)]",
+          "[--select-complement:var(--color-lion)]"
+        ],
+        owl: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-owl)]",
+          "[--select-complement:var(--color-tree-frog)]"
+        ],
+        macaw: [
+          "[--select-background:var(--color-background)]",
+          "[--select-foreground:var(--color-macaw)]",
+          "[--select-complement:var(--color-whale)]"
+        ]
+      },
+      outline: {
+        true: ["border-2 shadow-[0_2px_0_var(--select-complement)]"],
+        false: ["border-none shadow-[0_3px_0_var(--select-complement)]"]
+      }
+    },
+    defaultVariants: {
+      palette: "default",
+      outline: false
+    }
+  }
+);
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Value,
+    {
+      "data-slot": "select-value",
+      className: cn("text-[var(--select-foreground)]", className),
+      ...props
+    }
+  );
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  palette = "default",
+  children,
+  outline = true,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      "data-palette": palette,
+      className: cn(selectTriggerVariants({ palette, outline, className })),
+      style: { color: "var(--select-foreground)", ...style },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xs border border-accent shadow-[0_2px_0_var(--color-accent)]",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/shared/shuffle.ts
+function xmur3(str) {
+  let h = 1779033703 ^ str.length;
+  for (let i = 0; i < str.length; i++) {
+    h = Math.imul(h ^ str.charCodeAt(i), 3432918353);
+    h = h << 13 | h >>> 19;
+  }
+  return () => {
+    h = Math.imul(h ^ h >>> 16, 2246822507);
+    h = Math.imul(h ^ h >>> 13, 3266489909);
+    const shifted = h >>> 16;
+    h = h ^ shifted;
+    return h >>> 0;
+  };
+}
+function mulberry32(seed) {
+  let state = seed;
+  return () => {
+    state = state + 1831565813;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t = t ^ t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function shuffleWithSeed(items, seed) {
+  const out = items.slice();
+  const seedFn = xmur3(seed);
+  const rng = mulberry32(seedFn());
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    const vi = out[i];
+    const vj = out[j];
+    if (vi === void 0 || vj === void 0) continue;
+    out[i] = vj;
+    out[j] = vi;
+  }
+  return out;
+}
+function SafeInlineHTML2({ html, className, style }) {
+  const ref = React3.useRef(null);
+  React3.useEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = sanitizeForDisplay(html);
+    }
+  }, [html]);
+  return /* @__PURE__ */ jsx("span", { ref, className, style });
+}
+function InlineInteraction({
+  embed,
+  response,
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted,
+  palette = "macaw",
+  isCorrect
+}) {
+  const hasValue = typeof response === "string" && response.length > 0;
+  const neutralTriggerClass = hasValue ? "" : "border-border shadow-[0_3px_0_var(--color-border)] focus-visible:ring-0";
+  const items = React3.useMemo(() => {
+    return embed.shuffle ? shuffleWithSeed(embed.choices, embed.responseId) : embed.choices;
+  }, [embed]);
+  const feedbackPalette = hasSubmitted && hasValue ? isCorrect ? "owl" : "cardinal" : palette;
+  const ariaInvalid = hasSubmitted && hasValue && isCorrect === false ? true : void 0;
+  const selectedLabelHtml = React3.useMemo(() => {
+    if (!hasValue) return "";
+    const found = items.find((c) => c.id === response);
+    return found?.contentHtml ?? "";
+  }, [hasValue, items, response]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: hasValue ? response : "",
+      onValueChange: (value) => {
+        if (!disabled && onAnswerSelect) onAnswerSelect(value);
+      },
+      disabled: disabled || hasSubmitted,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            size: "sm",
+            className: neutralTriggerClass,
+            palette: hasValue ? feedbackPalette : "default",
+            "aria-invalid": ariaInvalid,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select...", children: hasValue ? /* @__PURE__ */ jsx(
+              SafeInlineHTML2,
+              {
+                html: selectedLabelHtml,
+                className: "text-[var(--select-foreground)]",
+                style: { color: "var(--select-foreground)" }
+              }
+            ) : null })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { position: "item-aligned", children: items.map((c) => /* @__PURE__ */ jsx(SelectItem, { value: c.id, children: /* @__PURE__ */ jsx(SafeInlineHTML2, { html: c.contentHtml }) }, c.id)) })
+      ]
+    }
+  );
+}
+function SafeInlineHTML3({ html, className }) {
+  const ref = React3.useRef(null);
+  React3.useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.innerHTML = html;
+    }
+  }, [html]);
+  return /* @__PURE__ */ jsx("span", { ref, className });
+}
+function createPairKey(sourceId, targetId) {
+  return `${sourceId} ${targetId}`;
+}
+function toQtiResponse2(state) {
+  const pairs = [];
+  for (const [targetId, sourceIds] of Object.entries(state)) {
+    for (const sourceId of sourceIds) {
+      pairs.push(createPairKey(sourceId, targetId));
+    }
+  }
+  return pairs;
+}
+function fromQtiResponse2(response) {
+  const state = {};
+  for (const pair of response) {
+    const parts = pair.split(" ");
+    const sourceId = parts[0];
+    const targetId = parts[1];
+    if (sourceId && targetId) {
+      if (!state[targetId]) {
+        state[targetId] = [];
+      }
+      state[targetId].push(sourceId);
+    }
+  }
+  return state;
+}
+var targetBoxVariants = cva(
+  ["flex flex-col gap-2 p-3 min-h-[8rem] min-w-[10rem]", "border-2 rounded-xs", "transition-all duration-150"],
+  {
+    variants: {
+      state: {
+        empty: "border-border border-dashed bg-muted/10",
+        hover: "border-macaw border-solid bg-macaw/10 shadow-[0_2px_0_var(--color-macaw)]",
+        filled: "border-macaw border-solid bg-macaw/5 shadow-[0_2px_0_var(--color-whale)]",
+        disabled: "opacity-60 bg-muted/30 border-dashed"
+      }
+    },
+    defaultVariants: {
+      state: "empty"
+    }
+  }
+);
+var sourceTokenVariants2 = cva(
+  [
+    "inline-flex items-center justify-center",
+    "h-7 px-2 rounded-xs border-2",
+    "text-sm font-semibold",
+    "transition-all duration-150",
+    "select-none"
+  ],
+  {
+    variants: {
+      state: {
+        idle: "bg-background border-border shadow-[0_2px_0_var(--color-border)] cursor-grab hover:border-macaw hover:shadow-[0_2px_0_var(--color-macaw)]",
+        dragging: "opacity-50 cursor-grabbing",
+        placed: "bg-macaw/10 border-macaw shadow-[0_2px_0_var(--color-whale)]",
+        correct: "bg-owl/15 border-owl shadow-[0_2px_0_var(--color-tree-frog)]",
+        incorrect: "bg-cardinal/15 border-cardinal shadow-[0_2px_0_var(--color-fire-ant)]",
+        disabled: "opacity-50 cursor-not-allowed bg-muted/50 border-muted shadow-none"
+      }
+    },
+    defaultVariants: {
+      state: "idle"
+    }
+  }
+);
+function PlacedToken({
+  instanceId,
+  sourceId,
+  fromTargetId,
+  fromIndex,
+  contentHtml,
+  disabled,
+  state,
+  onRemove
+}) {
+  const canInteract = !disabled && state !== "correct" && state !== "incorrect";
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: instanceId,
+    data: { type: "placed", sourceId, fromTargetId, fromIndex },
+    disabled: !canInteract
+  });
+  const tokenState = isDragging ? "dragging" : state;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ref: setNodeRef,
+      ...attributes,
+      ...listeners,
+      onClick: canInteract ? onRemove : void 0,
+      "aria-disabled": !canInteract,
+      className: cn(
+        sourceTokenVariants2({ state: tokenState }),
+        canInteract && "cursor-grab hover:bg-muted/50 group",
+        !canInteract && "cursor-default pointer-events-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SafeInlineHTML3, { html: contentHtml }),
+        canInteract && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-40 group-hover:opacity-100 ml-1 transition-opacity", children: "\xD7" })
+      ]
+    }
+  );
+}
+function TargetBox({ target, placedSources, disabled, onRemoveSource, pairCorrectness, hasSubmitted }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `target-${target.id}`,
+    data: { type: "target", targetId: target.id },
+    disabled
+  });
+  const hasSources = placedSources.length > 0;
+  const getState = () => {
+    if (disabled) return "disabled";
+    if (isOver) return "hover";
+    if (hasSources) return "filled";
+    return "empty";
+  };
+  const getTokenState = (sourceId) => {
+    if (hasSubmitted) {
+      const pairKey = createPairKey(sourceId, target.id);
+      const isCorrect = pairCorrectness?.[pairKey];
+      if (isCorrect === true) return "correct";
+      if (isCorrect === false) return "incorrect";
+    }
+    if (disabled) return "disabled";
+    return "placed";
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, className: cn(targetBoxVariants({ state: getState() })), children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-center pb-2 border-b border-border/50 mb-2", children: /* @__PURE__ */ jsx(SafeInlineHTML3, { html: target.contentHtml }) }),
+    placedSources.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground/50 text-sm", children: "Drop here" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: placedSources.map(({ instanceId, source, index }) => /* @__PURE__ */ jsx(
+      PlacedToken,
+      {
+        instanceId,
+        sourceId: source.id,
+        fromTargetId: target.id,
+        fromIndex: index,
+        contentHtml: source.contentHtml,
+        disabled: disabled || hasSubmitted,
+        state: getTokenState(source.id),
+        onRemove: () => onRemoveSource(instanceId)
+      },
+      instanceId
+    )) })
+  ] });
+}
+function SourcePoolToken({ source, remainingUses, disabled }) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `pool-${source.id}`,
+    data: { type: "source", sourceId: source.id },
+    disabled: disabled || remainingUses <= 0
+  });
+  if (remainingUses <= 0) return null;
+  const getState = () => {
+    if (isDragging) return "dragging";
+    if (disabled) return "disabled";
+    return "idle";
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, className: cn(sourceTokenVariants2({ state: getState() })), ...attributes, ...listeners, children: [
+    /* @__PURE__ */ jsx(SafeInlineHTML3, { html: source.contentHtml }),
+    remainingUses > 1 && /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs text-muted-foreground", children: [
+      "\xD7",
+      remainingUses
+    ] })
+  ] });
+}
+function DroppablePool({ disabled, children }) {
+  const { setNodeRef, isOver } = useDroppable({
+    id: "source-pool",
+    data: { type: "pool" },
+    disabled
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      className: cn(
+        "p-4 rounded-xl border-2 border-dashed",
+        "flex flex-wrap justify-center gap-3 min-h-[4rem]",
+        "transition-all duration-150",
+        disabled ? "bg-muted/30 border-muted" : "bg-muted/10 border-muted-foreground/20",
+        isOver && !disabled && "border-macaw bg-macaw/10"
+      ),
+      children
+    }
+  );
+}
+function MatchInteraction({
+  interaction,
+  response = [],
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted = false,
+  pairCorrectness
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    })
+  );
+  const currentState = React3.useMemo(() => fromQtiResponse2(response), [response]);
+  const [activeDragId, setActiveDragId] = React3.useState(null);
+  const activeSource = React3.useMemo(() => {
+    if (!activeDragId) return null;
+    const sourceId = activeDragId.startsWith("pool-") ? activeDragId.replace("pool-", "") : activeDragId.split("-")[0];
+    return interaction.sourceChoices.find((s) => s.id === sourceId);
+  }, [activeDragId, interaction.sourceChoices]);
+  const getSourceUsageCount = (sourceId) => {
+    let count = 0;
+    for (const sources of Object.values(currentState)) {
+      count += sources.filter((id) => id === sourceId).length;
+    }
+    return count;
+  };
+  const getRemainingUses = (source) => {
+    if (source.matchMax === 0) return 999;
+    return source.matchMax - getSourceUsageCount(source.id);
+  };
+  const canTargetAcceptMore = (target) => {
+    const placed = currentState[target.id]?.length ?? 0;
+    if (target.matchMax === 0) return true;
+    return placed < target.matchMax;
+  };
+  const handleDragEnd = (event) => {
+    setActiveDragId(null);
+    const { active, over } = event;
+    if (!over) return;
+    const activeData = active.data.current;
+    const overData = over.data.current;
+    if (overData?.type === "pool" && activeData?.type === "placed") {
+      const fromTargetId = activeData.fromTargetId;
+      const fromIndex = activeData.fromIndex;
+      if (typeof fromTargetId !== "string" || typeof fromIndex !== "number") return;
+      const newState = { ...currentState };
+      const oldSources = newState[fromTargetId];
+      if (oldSources) {
+        newState[fromTargetId] = oldSources.filter((_, i) => i !== fromIndex);
+        if (newState[fromTargetId].length === 0) {
+          delete newState[fromTargetId];
+        }
+      }
+      onAnswerSelect?.(toQtiResponse2(newState));
+      return;
+    }
+    if (overData?.type !== "target") return;
+    const toTargetId = overData.targetId;
+    if (typeof toTargetId !== "string") return;
+    const toTarget = interaction.targetChoices.find((t) => t.id === toTargetId);
+    if (!toTarget) return;
+    if (activeData?.type === "source") {
+      const sourceId = activeData.sourceId;
+      if (typeof sourceId !== "string") return;
+      const source = interaction.sourceChoices.find((s) => s.id === sourceId);
+      if (!source) return;
+      if (getRemainingUses(source) <= 0) return;
+      if (!canTargetAcceptMore(toTarget)) return;
+      const newState = { ...currentState };
+      if (!newState[toTargetId]) {
+        newState[toTargetId] = [];
+      }
+      newState[toTargetId] = [...newState[toTargetId], sourceId];
+      onAnswerSelect?.(toQtiResponse2(newState));
+      return;
+    }
+    if (activeData?.type === "placed") {
+      const sourceId = activeData.sourceId;
+      const fromTargetId = activeData.fromTargetId;
+      const fromIndex = activeData.fromIndex;
+      if (typeof sourceId !== "string" || typeof fromTargetId !== "string" || typeof fromIndex !== "number") return;
+      if (fromTargetId === toTargetId) return;
+      if (!canTargetAcceptMore(toTarget)) return;
+      const newState = { ...currentState };
+      const oldSources = newState[fromTargetId];
+      if (oldSources) {
+        newState[fromTargetId] = oldSources.filter((_, i) => i !== fromIndex);
+        if (newState[fromTargetId].length === 0) {
+          delete newState[fromTargetId];
+        }
+      }
+      if (!newState[toTargetId]) {
+        newState[toTargetId] = [];
+      }
+      newState[toTargetId] = [...newState[toTargetId], sourceId];
+      onAnswerSelect?.(toQtiResponse2(newState));
+    }
+  };
+  const handleRemoveSource = (targetId, index) => {
+    if (disabled || hasSubmitted) return;
+    const newState = { ...currentState };
+    const sources = newState[targetId];
+    if (sources) {
+      newState[targetId] = sources.filter((_, i) => i !== index);
+      if (newState[targetId].length === 0) {
+        delete newState[targetId];
+      }
+    }
+    onAnswerSelect?.(toQtiResponse2(newState));
+  };
+  const getPlacedSources = (targetId) => {
+    const sourceIds = currentState[targetId] ?? [];
+    return sourceIds.map((sourceId, index) => {
+      const source = interaction.sourceChoices.find((s) => s.id === sourceId);
+      return {
+        instanceId: `${sourceId}-${targetId}-${index}`,
+        source: source ?? { id: sourceId, contentHtml: sourceId, matchMax: 1 },
+        index
+      };
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: (e) => {
+        setActiveDragId(String(e.active.id));
+      },
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          interaction.promptHtml && /* @__PURE__ */ jsx("div", { className: "text-center mb-4", children: /* @__PURE__ */ jsx(SafeInlineHTML3, { html: interaction.promptHtml }) }),
+          !hasSubmitted && /* @__PURE__ */ jsxs(DroppablePool, { disabled, children: [
+            interaction.sourceChoices.map((source) => /* @__PURE__ */ jsx(
+              SourcePoolToken,
+              {
+                source,
+                remainingUses: getRemainingUses(source),
+                disabled
+              },
+              source.id
+            )),
+            interaction.sourceChoices.every((s) => getRemainingUses(s) <= 0) && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: "All items placed" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4", children: interaction.targetChoices.map((target) => /* @__PURE__ */ jsx(
+            TargetBox,
+            {
+              target,
+              placedSources: getPlacedSources(target.id),
+              disabled: disabled || hasSubmitted,
+              onRemoveSource: (instanceId) => {
+                const index = getPlacedSources(target.id).findIndex((p) => p.instanceId === instanceId);
+                if (index !== -1) {
+                  handleRemoveSource(target.id, index);
+                }
+              },
+              pairCorrectness,
+              hasSubmitted
+            },
+            target.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeSource ? /* @__PURE__ */ jsx("div", { className: cn(sourceTokenVariants2({ state: "idle" }), "shadow-xl cursor-grabbing"), children: /* @__PURE__ */ jsx(SafeInlineHTML3, { html: activeSource.contentHtml }) }) : null })
+      ]
+    }
+  );
+}
+function DragHandleIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": "true",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Drag handle" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.5 3C5.5 3.27614 5.27614 3.5 5 3.5C4.72386 3.5 4.5 3.27614 4.5 3C4.5 2.72386 4.72386 2.5 5 2.5C5.27614 2.5 5.5 2.72386 5.5 3ZM5.5 7.5C5.5 7.77614 5.27614 8 5 8C4.72386 8 4.5 7.77614 4.5 7.5C4.5 7.22386 4.72386 7 5 7C5.27614 7 5.5 7.22386 5.5 7.5ZM5.5 12C5.5 12.2761 5.27614 12.5 5 12.5C4.72386 12.5 4.5 12.2761 4.5 12C4.5 11.7239 4.72386 11.5 5 11.5C5.27614 11.5 5.5 11.7239 5.5 12ZM9.5 3C9.5 3.27614 9.27614 3.5 9 3.5C8.72386 3.5 8.5 3.27614 8.5 3C8.5 2.72386 8.72386 2.5 9 2.5C9.27614 2.5 9.5 2.72386 9.5 3ZM9.5 7.5C9.5 7.77614 9.27614 8 9 8C8.72386 8 8.5 7.77614 8.5 7.5C8.5 7.22386 8.72386 7 9 7C9.27614 7 9.5 7.22386 9.5 7.5ZM9.5 12C9.5 12.2761 9.27614 12.5 9 12.5C8.72386 12.5 8.5 12.2761 8.5 12C8.5 11.7239 8.72386 11.5 9 11.5C9.27614 11.5 9.5 11.7239 9.5 12Z",
+            fill: "currentColor",
+            fillRule: "evenodd",
+            clipRule: "evenodd"
+          }
+        )
+      ]
+    }
+  );
+}
+function SortableItem({
+  id,
+  contentHtml,
+  disabled,
+  isHorizontal
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    zIndex: isDragging ? 50 : "auto"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "bg-background border rounded-lg shadow-sm touch-none select-none",
+        // Styling differs based on orientation
+        isHorizontal ? "px-4 py-2 min-w-[100px] flex items-center justify-center text-center" : "p-4 w-full flex items-center gap-3",
+        disabled ? "cursor-default opacity-90 bg-muted/50" : "cursor-grab active:cursor-grabbing hover:border-macaw/50 hover:shadow-md"
+      ),
+      children: [
+        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
+        /* @__PURE__ */ jsx(HTMLContent, { html: contentHtml })
+      ]
+    }
+  );
+}
+function DragOverlayItem({ contentHtml, isHorizontal }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-background border-2 border-macaw rounded-lg shadow-xl cursor-grabbing z-50",
+        isHorizontal ? "px-4 py-2 min-w-[100px] flex items-center justify-center" : "p-4 w-full flex items-center gap-3"
+      ),
+      children: [
+        !isHorizontal && /* @__PURE__ */ jsx("div", { className: "text-macaw shrink-0", children: /* @__PURE__ */ jsx(DragHandleIcon, {}) }),
+        /* @__PURE__ */ jsx(HTMLContent, { html: contentHtml })
+      ]
+    }
+  );
+}
+function OrderInteraction({
+  interaction,
+  response,
+  onAnswerSelect,
+  disabled,
+  hasSubmitted,
+  isCorrect
+}) {
+  const items = React3.useMemo(() => {
+    if (response && response.length > 0) {
+      const mapped = [];
+      for (const id of response) {
+        const found = interaction.choices.find((c) => c.id === id);
+        if (found) mapped.push(found);
+      }
+      return mapped;
+    }
+    return interaction.choices;
+  }, [response, interaction.choices]);
+  const [activeId, setActiveId] = React3.useState(null);
+  const activeItem = React3.useMemo(() => items.find((i) => i.id === activeId), [activeId, items]);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    const id = event.active.id;
+    setActiveId(typeof id === "string" ? id : String(id));
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      const newOrder = arrayMove(items, oldIndex, newIndex);
+      onAnswerSelect?.(newOrder.map((item) => item.id));
+    }
+  };
+  const isHorizontal = interaction.orientation === "horizontal";
+  const strategy = isHorizontal ? horizontalListSortingStrategy : verticalListSortingStrategy;
+  const dropAnimation = {
+    sideEffects: defaultDropAnimationSideEffects({
+      styles: { active: { opacity: "0.4" } }
+    })
+  };
+  const getContainerStyles = () => {
+    if (!hasSubmitted) {
+      return "bg-muted/30 border-transparent";
+    }
+    if (isCorrect) {
+      return "bg-owl/10 border-owl";
+    }
+    return "bg-cardinal/10 border-cardinal";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    interaction.promptHtml && /* @__PURE__ */ jsx(HTMLContent, { html: interaction.promptHtml }),
+    /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        children: [
+          /* @__PURE__ */ jsx(SortableContext, { items: items.map((i) => i.id), strategy, disabled: disabled || hasSubmitted, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "rounded-xl p-4 transition-colors border-2",
+                isHorizontal ? "flex flex-wrap gap-3" : "flex flex-col gap-2",
+                getContainerStyles()
+              ),
+              children: items.map((item) => /* @__PURE__ */ jsx(
+                SortableItem,
+                {
+                  id: item.id,
+                  contentHtml: item.contentHtml,
+                  disabled: !!(disabled || hasSubmitted),
+                  isHorizontal
+                },
+                item.id
+              ))
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation, children: activeItem ? /* @__PURE__ */ jsx(DragOverlayItem, { contentHtml: activeItem.contentHtml, isHorizontal }) : null })
+        ]
+      }
+    )
+  ] });
+}
+var textEntryVariants = cva(
+  [
+    // Base styles matching Select trigger
+    "inline-flex items-center justify-center",
+    "h-7 px-2 rounded-xs text-sm font-semibold",
+    "bg-[var(--text-entry-background)] text-[var(--text-entry-foreground)]",
+    "border border-[var(--text-entry-complement)]",
+    // border = 1px width, border-[...] = color
+    "shadow-[0_3px_0_var(--text-entry-complement)]",
+    "transition-all duration-150",
+    "hover:brightness-90 dark:hover:brightness-75",
+    // Placeholder and focus (no ring - matches Select component)
+    "placeholder:text-muted-foreground/60",
+    "focus:outline-none",
+    // Disabled state
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    // Invalid state
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      palette: {
+        default: [
+          "[--text-entry-background:var(--color-background)]",
+          "[--text-entry-foreground:var(--color-foreground)]",
+          "[--text-entry-complement:var(--color-accent)]"
+        ],
+        betta: [
+          "[--text-entry-background:var(--color-background)]",
+          "[--text-entry-foreground:var(--color-betta)]",
+          "[--text-entry-complement:var(--color-butterfly)]"
+        ],
+        cardinal: [
+          "[--text-entry-background:hsl(var(--cardinal)/0.15)]",
+          "[--text-entry-foreground:var(--color-cardinal)]",
+          "[--text-entry-complement:var(--color-fire-ant)]"
+        ],
+        bee: [
+          "[--text-entry-background:var(--color-background)]",
+          "[--text-entry-foreground:var(--color-bee)]",
+          "[--text-entry-complement:var(--color-lion)]"
+        ],
+        owl: [
+          "[--text-entry-background:hsl(var(--owl)/0.15)]",
+          "[--text-entry-foreground:var(--color-owl)]",
+          "[--text-entry-complement:var(--color-tree-frog)]"
+        ],
+        macaw: [
+          "[--text-entry-background:var(--color-background)]",
+          "[--text-entry-foreground:var(--color-macaw)]",
+          "[--text-entry-complement:var(--color-whale)]"
+        ]
+      }
+    },
+    defaultVariants: {
+      palette: "default"
+    }
+  }
+);
+function TextEntryInteraction({
+  interaction,
+  response,
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted,
+  palette = "macaw",
+  isCorrect
+}) {
+  const value = response ?? "";
+  const hasValue = value.length > 0;
+  const getActivePalette = () => {
+    if (hasSubmitted && hasValue) {
+      return isCorrect ? "owl" : "cardinal";
+    }
+    if (hasValue) {
+      return palette;
+    }
+    return "default";
+  };
+  const activePalette = getActivePalette();
+  const charWidth = interaction.expectedLength ?? 10;
+  const inputWidth = `${Math.max(charWidth, 3) + 4}ch`;
+  return /* @__PURE__ */ jsx("div", { className: "my-4 inline-block", children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onAnswerSelect?.(e.target.value),
+      disabled: disabled || hasSubmitted,
+      placeholder: interaction.placeholder ?? "...",
+      pattern: interaction.patternMask,
+      className: cn(textEntryVariants({ palette: activePalette })),
+      style: { width: inputWidth, minWidth: "8ch" },
+      "aria-invalid": hasSubmitted && hasValue && isCorrect === false ? true : void 0
+    }
+  ) });
+}
+function InlineTextEntry({
+  embed,
+  response,
+  onAnswerSelect,
+  disabled = false,
+  hasSubmitted,
+  palette = "macaw",
+  isCorrect
+}) {
+  const value = response ?? "";
+  const hasValue = value.length > 0;
+  const getActivePalette = () => {
+    if (hasSubmitted && hasValue) {
+      return isCorrect ? "owl" : "cardinal";
+    }
+    if (hasValue) {
+      return palette;
+    }
+    return "default";
+  };
+  const activePalette = getActivePalette();
+  const charWidth = embed.expectedLength ?? 4;
+  const inputWidth = `${Math.max(charWidth, 2) + 3}ch`;
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onAnswerSelect?.(e.target.value),
+      disabled: disabled || hasSubmitted,
+      placeholder: "...",
+      pattern: embed.patternMask,
+      className: cn(textEntryVariants({ palette: activePalette }), "align-baseline"),
+      style: { width: inputWidth, minWidth: "6ch" },
+      "aria-invalid": hasSubmitted && hasValue && isCorrect === false ? true : void 0
+    }
+  );
+}
+function OrderInteractionBlock({
+  interaction,
+  responses,
+  onAnswerSelect,
+  disabled,
+  showFeedback,
+  perResponseFeedback
+}) {
+  const response = responses?.[interaction.responseId];
+  const hasInitialized = React3.useRef(false);
+  React3.useEffect(() => {
+    if (hasInitialized.current) return;
+    if (response) return;
+    if (interaction.choices.length === 0) return;
+    if (!onAnswerSelect) return;
+    hasInitialized.current = true;
+    const initialOrder = interaction.choices.map((c) => c.id);
+    onAnswerSelect(interaction.responseId, initialOrder);
+  }, [response, interaction.choices, interaction.responseId, onAnswerSelect]);
+  let responseArray = [];
+  if (Array.isArray(response)) {
+    responseArray = response;
+  } else if (typeof response === "string") {
+    responseArray = [response];
+  }
+  const feedback = perResponseFeedback?.[interaction.responseId];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      OrderInteraction,
+      {
+        interaction,
+        response: responseArray,
+        onAnswerSelect: (val) => onAnswerSelect?.(interaction.responseId, val),
+        disabled,
+        hasSubmitted: showFeedback,
+        isCorrect: feedback?.isCorrect
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FeedbackMessage,
+      {
+        responseId: interaction.responseId,
+        showFeedback,
+        perResponseFeedback
+      }
+    )
+  ] });
+}
+function GapMatchInteractionBlock({
+  interaction,
+  responses,
+  onAnswerSelect,
+  disabled,
+  showFeedback,
+  perResponseFeedback,
+  selectedChoicesByResponse
+}) {
+  const response = responses?.[interaction.responseId];
+  let responseArray = [];
+  if (Array.isArray(response)) {
+    responseArray = response;
+  } else if (typeof response === "string" && response) {
+    responseArray = [response];
+  }
+  const gapCorrectness = React3.useMemo(() => {
+    const entries = selectedChoicesByResponse?.[interaction.responseId];
+    if (!entries || !showFeedback) return void 0;
+    const result = {};
+    for (const entry of entries) {
+      const parts = entry.id.split(" ");
+      const gapId = parts[1];
+      if (gapId) {
+        result[gapId] = entry.isCorrect;
+      }
+    }
+    return result;
+  }, [selectedChoicesByResponse, interaction.responseId, showFeedback]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      GapMatchInteraction,
+      {
+        interaction,
+        response: responseArray,
+        onAnswerSelect: (val) => onAnswerSelect?.(interaction.responseId, val),
+        disabled,
+        hasSubmitted: showFeedback,
+        gapCorrectness
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FeedbackMessage,
+      {
+        responseId: interaction.responseId,
+        showFeedback,
+        perResponseFeedback
+      }
+    )
+  ] });
+}
+function MatchInteractionBlock({
+  interaction,
+  responses,
+  onAnswerSelect,
+  disabled,
+  showFeedback,
+  perResponseFeedback,
+  selectedChoicesByResponse
+}) {
+  const response = responses?.[interaction.responseId];
+  let responseArray = [];
+  if (Array.isArray(response)) {
+    responseArray = response;
+  } else if (typeof response === "string" && response) {
+    responseArray = [response];
+  }
+  const pairCorrectness = React3.useMemo(() => {
+    const entries = selectedChoicesByResponse?.[interaction.responseId];
+    if (!entries || !showFeedback) return void 0;
+    const result = {};
+    for (const entry of entries) {
+      result[entry.id] = entry.isCorrect;
+    }
+    return result;
+  }, [selectedChoicesByResponse, interaction.responseId, showFeedback]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MatchInteraction,
+      {
+        interaction,
+        response: responseArray,
+        onAnswerSelect: (val) => onAnswerSelect?.(interaction.responseId, val),
+        disabled,
+        hasSubmitted: showFeedback,
+        pairCorrectness
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FeedbackMessage,
+      {
+        responseId: interaction.responseId,
+        showFeedback,
+        perResponseFeedback
+      }
+    )
+  ] });
+}
+function ContentBlockRenderer({
+  block,
+  responses,
+  onAnswerSelect,
+  showFeedback,
+  disabled,
+  selectedChoicesByResponse,
+  perResponseFeedback
+}) {
+  if (block.type === "stimulus") {
+    return /* @__PURE__ */ jsx(HTMLContent, { html: block.html, className: "mb-6" });
+  }
+  if (block.type === "richStimulus") {
+    const allResponseIds = [
+      ...Object.values(block.inlineEmbeds).map((e) => e.responseId),
+      ...Object.values(block.textEmbeds).map((e) => e.responseId)
+    ];
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        HTMLContent,
+        {
+          html: block.html,
+          className: "mb-6",
+          inlineEmbeds: block.inlineEmbeds,
+          textEmbeds: block.textEmbeds,
+          renderInline: (embed) => {
+            const currentValue = (() => {
+              const v = responses?.[embed.responseId];
+              return typeof v === "string" ? v : "";
+            })();
+            const perSelectionEntries = selectedChoicesByResponse?.[embed.responseId];
+            const selectedIsCorrect = perSelectionEntries && currentValue ? perSelectionEntries.find((e) => e.id === currentValue)?.isCorrect : void 0;
+            return /* @__PURE__ */ jsx(
+              InlineInteraction,
+              {
+                embed,
+                response: currentValue,
+                onAnswerSelect: (v) => {
+                  if (onAnswerSelect) onAnswerSelect(embed.responseId, v);
+                },
+                disabled: disabled || showFeedback,
+                hasSubmitted: showFeedback,
+                isCorrect: selectedIsCorrect
+              }
+            );
+          },
+          renderTextEntry: (embed) => {
+            const currentValue = (() => {
+              const v = responses?.[embed.responseId];
+              return typeof v === "string" ? v : "";
+            })();
+            const feedback = perResponseFeedback?.[embed.responseId];
+            return /* @__PURE__ */ jsx(
+              InlineTextEntry,
+              {
+                embed,
+                response: currentValue,
+                onAnswerSelect: (v) => {
+                  if (onAnswerSelect) onAnswerSelect(embed.responseId, v);
+                },
+                disabled: disabled || showFeedback,
+                hasSubmitted: showFeedback,
+                isCorrect: feedback?.isCorrect
+              },
+              embed.responseId
+            );
+          }
+        }
+      ),
+      allResponseIds.map((responseId) => /* @__PURE__ */ jsx(
+        FeedbackMessage,
+        {
+          responseId,
+          showFeedback,
+          perResponseFeedback
+        },
+        `fb-${responseId}`
+      ))
+    ] });
+  }
+  if (block.type === "interaction" && block.interaction) {
+    const interaction = block.interaction;
+    if (interaction.type === "text") {
+      const response = responses?.[interaction.responseId];
+      const currentValue = typeof response === "string" ? response : "";
+      const feedback = perResponseFeedback?.[interaction.responseId];
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          TextEntryInteraction,
+          {
+            interaction,
+            response: currentValue,
+            onAnswerSelect: (value) => {
+              if (onAnswerSelect) {
+                onAnswerSelect(interaction.responseId, value);
+              }
+            },
+            disabled,
+            hasSubmitted: showFeedback,
+            isCorrect: feedback?.isCorrect
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FeedbackMessage,
+          {
+            responseId: interaction.responseId,
+            showFeedback,
+            perResponseFeedback
+          }
+        )
+      ] });
+    }
+    if (interaction.type === "choice") {
+      const response = responses?.[interaction.responseId];
+      let selected = [];
+      if (Array.isArray(response)) {
+        selected = response;
+      } else if (typeof response === "string") {
+        selected = [response];
+      }
+      const perSelectionEntries = selectedChoicesByResponse?.[interaction.responseId];
+      const perSelectionTable = perSelectionEntries ? new Map(perSelectionEntries.map((e) => [e.id, e.isCorrect])) : void 0;
+      let singleIsCorrect;
+      if (interaction.cardinality === "single" && selected.length === 1 && perSelectionTable) {
+        const firstCandidate = selected[0];
+        if (typeof firstCandidate === "string") {
+          singleIsCorrect = perSelectionTable.get(firstCandidate) === true;
+        }
+      }
+      const toChoiceInteraction = (d) => {
+        return {
+          type: "choiceInteraction",
+          responseIdentifier: d.responseId,
+          shuffle: false,
+          minChoices: d.minChoices,
+          maxChoices: d.maxChoices,
+          promptHtml: d.promptHtml,
+          choices: d.choices.map((c) => ({
+            identifier: c.id,
+            contentHtml: c.contentHtml,
+            inlineFeedbackHtml: c.inlineFeedbackHtml
+          }))
+        };
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ChoiceInteractionRenderer,
+          {
+            interaction: toChoiceInteraction(interaction),
+            response,
+            onAnswerSelect: (value) => {
+              if (onAnswerSelect) {
+                onAnswerSelect(interaction.responseId, value);
+              }
+            },
+            disabled,
+            hasSubmitted: showFeedback,
+            isCorrect: singleIsCorrect,
+            selectedChoicesCorrectness: (() => {
+              const entries = selectedChoicesByResponse?.[interaction.responseId];
+              if (!entries) return void 0;
+              const table = new Map(entries.map((e) => [e.id, e.isCorrect]));
+              return selected.map((id) => ({ id, isCorrect: table.get(id) === true }));
+            })()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FeedbackMessage,
+          {
+            responseId: interaction.responseId,
+            showFeedback,
+            perResponseFeedback
+          }
+        )
+      ] });
+    }
+    if (interaction.type === "order") {
+      return /* @__PURE__ */ jsx(
+        OrderInteractionBlock,
+        {
+          interaction,
+          responses,
+          onAnswerSelect,
+          disabled,
+          showFeedback,
+          perResponseFeedback
+        }
+      );
+    }
+    if (interaction.type === "gapMatch") {
+      return /* @__PURE__ */ jsx(
+        GapMatchInteractionBlock,
+        {
+          interaction,
+          responses,
+          onAnswerSelect,
+          disabled,
+          showFeedback,
+          perResponseFeedback,
+          selectedChoicesByResponse
+        }
+      );
+    }
+    if (interaction.type === "match") {
+      return /* @__PURE__ */ jsx(
+        MatchInteractionBlock,
+        {
+          interaction,
+          responses,
+          onAnswerSelect,
+          disabled,
+          showFeedback,
+          perResponseFeedback,
+          selectedChoicesByResponse
+        }
+      );
+    }
+  }
+  return null;
+}
+function QTIRenderer({
+  item,
+  responses,
+  onResponseChange,
+  theme = "duolingo",
+  showFeedback = false,
+  disabled = false,
+  choiceCorrectness,
+  responseFeedback,
+  overallFeedback,
+  className
+}) {
+  const themeAttr = theme === "duolingo" ? void 0 : theme;
+  return /* @__PURE__ */ jsxs("div", { className: cn("qti-container", className), "data-qti-theme": themeAttr, children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-6", children: item.contentBlocks.map((block, index) => /* @__PURE__ */ jsx(
+      ContentBlockRenderer,
+      {
+        block,
+        responses,
+        onAnswerSelect: onResponseChange,
+        showFeedback,
+        disabled,
+        selectedChoicesByResponse: choiceCorrectness,
+        perResponseFeedback: responseFeedback
+      },
+      index
+    )) }),
+    showFeedback && overallFeedback?.messageHtml && /* @__PURE__ */ jsx("div", { className: "qti-feedback mt-6 p-6", "data-correct": overallFeedback.isCorrect, children: /* @__PURE__ */ jsx(HTMLContent, { html: overallFeedback.messageHtml }) })
+  ] });
+}
+function QtiFeedbackBlock({ result, item, className }) {
+  const feedbackBlock = React3.useMemo(() => {
+    if (!result.feedbackIdentifier) {
+      return null;
+    }
+    return item.itemBody.feedbackBlocks.find((fb) => fb.identifier === result.feedbackIdentifier);
+  }, [result.feedbackIdentifier, item.itemBody.feedbackBlocks]);
+  if (!feedbackBlock) {
+    return null;
+  }
+  const isCorrect = result.status === "correct";
+  return /* @__PURE__ */ jsxs("div", { className: cn("qti-feedback p-6", className), "data-correct": isCorrect, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "qti-feedback-icon flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center",
+          "data-correct": isCorrect,
+          children: isCorrect ? /* @__PURE__ */ jsxs("svg", { className: "w-8 h-8 text-white", fill: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("title", { children: "Correct" }),
+            /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" })
+          ] }) : /* @__PURE__ */ jsxs("svg", { className: "w-8 h-8 text-white", fill: "currentColor", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx("title", { children: "Incorrect" }),
+            /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            className: "text-xl font-extrabold",
+            style: { color: isCorrect ? "var(--qti-feedback-correct-text)" : "var(--qti-feedback-incorrect-text)" },
+            children: isCorrect ? "Correct!" : "Incorrect"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isCorrect ? "Nice work!" : "Try again" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(HTMLContent, { html: feedbackBlock.contentHtml, className: "text-foreground" })
+  ] });
+}
+
+export { ChoiceInteractionRenderer, ContentBlockRenderer, FeedbackMessage, HTMLContent, QTIRenderer, QtiFeedbackBlock };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map