@mathscan/math-exercise-engine 1.2.14 → 1.2.15

package/dist/{index-gCvC2wRR.js → index-C9OHpy2h.js}

@@ -25,6 +25,8 @@ const AST_TYPES = {
   BOLD_TEXT: "BoldText",
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "InlineInput",
+  /** Drop-only inline input; stores the selected option name */
+  DROP_INPUT: "DropInput",
   /** Single inline draggable option (appears in-flow with text) */
   INLINE_DRAG_OPTION: "InlineDragOption",
   /** Inline fraction widget (numerator/denominator with optional inputs) */
@@ -112,6 +114,8 @@ const AST_TYPES = {
   // ═══════════════════════════════════════════════════════════════════════════
   /** Drag-and-drop options tool */
   DRAG_OPTIONS: "DragOptions",
+  /** Rich draggable options tool */
+  DRAGGABLE_OPTIONS: "DraggableOptions",
   /** Radio button options tool */
   RADIO_OPTIONS: "RadioOptions",
   /** Numeric keypad input tool */
@@ -217,8 +221,12 @@ const JSON_TYPES = {
   // ═══════════════════════════════════════════════════════════════════════════
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "inline-input",
+  /** Drop-only inline input; stores the selected option name */
+  DROP_INPUT: "drop-input",
   /** Drag-and-drop options widget */
   DRAG_OPTIONS: "drag-options",
+  /** Rich draggable options widget */
+  DRAGGABLE_OPTIONS: "draggable-options",
   /** Single inline draggable option (appears in-flow with text) */
   INLINE_DRAG_OPTION: "inline-drag-option",
   /** Radio button options widget */
@@ -241,6 +249,7 @@ const JSON_TYPES = {
   GEOMETRY: "geometry"
 };
 const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
+const DRAGGABLE_OPTIONS_WIDGET_ID = "_draggable_options";
 const NUMERIC_KEYPAD_WIDGET_ID = "_numeric_keypad";
 const RULER_WIDGET_ID = "_ruler";
 const PROTRACTOR_WIDGET_ID = "_protractor";
@@ -256,6 +265,7 @@ const GRID_SYMMETRY_WIDGET_PREFIX = "_grid_symmetry_";
 const GEOMETRY_WIDGET_PREFIX = "_geometry_";
 const RTL_INLINE_WIDGET_TYPES = /* @__PURE__ */ new Set([
   JSON_TYPES.INLINE_INPUT,
+  JSON_TYPES.DROP_INPUT,
   JSON_TYPES.INLINE_DRAG_OPTION,
   JSON_TYPES.FRACTION,
   JSON_TYPES.VISUAL_FRACTION
@@ -355,6 +365,10 @@ const STRING_INPUT = chevrotain.createToken({
   name: "STRING_INPUT",
   pattern: /STRING_INPUT/
 });
+const DROP_INPUT = chevrotain.createToken({
+  name: "DROP_INPUT",
+  pattern: /DROP_INPUT/
+});
 const INLINE_DRAG_OPTION = chevrotain.createToken({
   name: "INLINE_DRAG_OPTION",
   pattern: /INLINE_DRAG_OPTION/
@@ -363,6 +377,18 @@ const DRAGABLE_BUTTONS_OPTIONS = chevrotain.createToken({
   name: "DRAGABLE_BUTTONS_OPTIONS",
   pattern: /DRAGABLE_BUTTONS_OPTIONS/
 });
+const DRAGGABLE_OPTIONS = chevrotain.createToken({
+  name: "DRAGGABLE_OPTIONS",
+  pattern: /DRAGGABLE_OPTIONS/
+});
+const OPTION = chevrotain.createToken({
+  name: "OPTION",
+  // Only a keyword when immediately followed by `[` (which the grammar always
+  // requires: `OPTION[name=...]`). Without the lookahead, the bare common word
+  // "OPTION"/"OPTIONS" in exercise prose would tokenize as a keyword and break
+  // parsing.
+  pattern: /OPTION(?=\[)/
+});
 const RADIO_BUTTONS_OPTIONS = chevrotain.createToken({
   name: "RADIO_BUTTONS_OPTIONS",
   pattern: /RADIO_BUTTONS_OPTIONS/
@@ -673,8 +699,11 @@ const allTokens = [
   HIGHLIGHT_TEXT,
   W_S_I,
   STRING_INPUT,
+  DROP_INPUT,
   INLINE_DRAG_OPTION,
+  DRAGGABLE_OPTIONS,
   DRAGABLE_BUTTONS_OPTIONS,
+  OPTION,
   RADIO_BUTTONS_OPTIONS,
   NUMERIC_KEYPAD,
   WIDGET_ANSWER,
@@ -1446,6 +1475,8 @@ class MathExerciseParser extends chevrotain.CstParser {
         { ALT: () => this.SUBRULE(this.visualFraction) },
         // W_S_I (inline input widget) — excluded in display-only contexts (e.g. MATCHER ITEM)
         { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineInput) },
+        // DROP_INPUT (drop-only inline answer widget) — excluded in display-only contexts
+        { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.dropInput) },
         // INLINE_DRAG_OPTION (single draggable option inline with text) — excluded in display-only
         { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineDragOption) },
         // CLOCK (inline clock widget)
@@ -1537,6 +1568,12 @@ class MathExerciseParser extends chevrotain.CstParser {
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
     });
+    this.dropInput = this.RULE("dropInput", () => {
+      this.CONSUME(DROP_INPUT);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+    });
     this.inlineDragOption = this.RULE("inlineDragOption", () => {
       this.CONSUME(INLINE_DRAG_OPTION);
       this.CONSUME(LBracket);
@@ -1545,6 +1582,7 @@ class MathExerciseParser extends chevrotain.CstParser {
     });
     this.tool = this.RULE("tool", () => {
       this.OR([
+        { ALT: () => this.SUBRULE(this.draggableOptions) },
         { ALT: () => this.SUBRULE(this.dragableButtons) },
         { ALT: () => this.SUBRULE(this.numericKeypad) },
         { ALT: () => this.SUBRULE(this.rulerTool) },
@@ -1552,6 +1590,44 @@ class MathExerciseParser extends chevrotain.CstParser {
         { ALT: () => this.SUBRULE(this.setSquareTool) }
       ]);
     });
+    this.draggableOptions = this.RULE("draggableOptions", () => {
+      this.CONSUME(DRAGGABLE_OPTIONS);
+      this.CONSUME(LBracket);
+      this.OPTION(() => this.SUBRULE(this.parameterList));
+      this.CONSUME(RBracket);
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.AT_LEAST_ONE(() => this.SUBRULE(this.draggableOption));
+      this.CONSUME(RBrace);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+    });
+    this.draggableOption = this.RULE("draggableOption", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(OPTION);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([
+          { ALT: () => this.SUBRULE(this.inlineElement, { ARGS: [true] }) },
+          { ALT: () => this.CONSUME3(Newline) }
+        ]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+    });
     this.dragableButtons = this.RULE("dragableButtons", () => {
       this.CONSUME(DRAGABLE_BUTTONS_OPTIONS);
       this.CONSUME(LBracket);
@@ -2109,6 +2185,14 @@ const InlineInputWidgetSchema = zod.z.discriminatedUnion("inputType", [
     answer: zod.z.union([zod.z.string(), zod.z.number()]).optional()
   })
 ]);
+const DropInputSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.DROP_INPUT),
+  name: zod.z.string().min(1),
+  answer: zod.z.string().min(1),
+  /** Box width in characters: the answer is an option name, so nothing else implies a size. */
+  width: InlineInputWidthSchema,
+  placeholder: zod.z.string().max(32).optional()
+});
 const FractionInlineSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.FRACTION),
   name: zod.z.string(),
@@ -2222,6 +2306,7 @@ const InlineNodeSchema = zod.z.union([
   ColorTextInlineSchema,
   BoldTextInlineSchema,
   InlineInputWidgetSchema,
+  DropInputSchema,
   FractionInlineSchema,
   ImageInlineSchema,
   VisualFractionInlineSchema,
@@ -2297,6 +2382,19 @@ function createNumericInput(name, digits, answer, placeholder, disabled, width,
     "NUMERIC_INPUT"
   );
 }
+function createDropInput(name, answer, placeholder, width) {
+  return parseOrThrow(
+    DropInputSchema,
+    {
+      type: AST_TYPES.DROP_INPUT,
+      name,
+      answer,
+      placeholder,
+      width
+    },
+    "DROP_INPUT"
+  );
+}
 function createImage(name, src, alt, options = {}) {
   return ImageInlineSchema.parse({
     type: AST_TYPES.IMAGE,
@@ -2351,6 +2449,9 @@ function isSpace(value) {
 function isInlineInput(value) {
   return InlineInputWidgetSchema.safeParse(value).success;
 }
+function isDropInput(value) {
+  return DropInputSchema.safeParse(value).success;
+}
 function isFraction(value) {
   return FractionInlineSchema.safeParse(value).success;
 }
@@ -2405,7 +2506,7 @@ function createNumberLinePosition(value, inlines) {
   if (!hasRealContent) {
     throw new Error(`POSITION[value=${value}]: content cannot be empty or whitespace only`);
   }
-  const inputs = inlines.filter((i) => i.type === AST_TYPES.INLINE_INPUT);
+  const inputs = inlines.filter((i) => i.type === AST_TYPES.INLINE_INPUT || i.type === AST_TYPES.DROP_INPUT);
   if (inputs.length > 1) {
     throw new Error(
       `POSITION[value=${value}]: only one input widget is allowed, got ${inputs.length}`
@@ -3118,6 +3219,45 @@ const DragOptionsToolSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.DRAG_OPTIONS),
   options: zod.z.array(zod.z.string()).min(1)
 });
+function hasOptionContent(content, spaceType = AST_TYPES.SPACE) {
+  return content.some((node) => node.type !== spaceType && !(typeof node.value === "string" && node.value.trim() === ""));
+}
+function isAnsweredFraction(node) {
+  return node.type === AST_TYPES.FRACTION && node.answer !== void 0;
+}
+function isOptionContentNode(node) {
+  const parsed = DisplayInlineNodeSchema.safeParse(node);
+  return parsed.success && !isAnsweredFraction(parsed.data);
+}
+const DraggableOptionSchema = zod.z.object({
+  name: zod.z.string().min(1),
+  content: zod.z.array(DisplayInlineNodeSchema).min(1).refine((content) => hasOptionContent(content), { message: "OPTION content cannot be empty or whitespace only" }).refine(
+    (content) => !content.some(isAnsweredFraction),
+    { message: "FRACTION inside OPTION must be display-only (no answer)" }
+  )
+});
+function addDuplicateOptionNameIssues(options, ctx, pathPrefix = []) {
+  const seen = /* @__PURE__ */ new Set();
+  options.forEach((option, index) => {
+    const key2 = normalize(option.name);
+    if (seen.has(key2)) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `Duplicate option name "${option.name}" (names are compared ignoring case and number format)`,
+        path: [...pathPrefix, "options", index, "name"]
+      });
+    }
+    seen.add(key2);
+  });
+}
+const DraggableOptionsToolObjectSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.DRAGGABLE_OPTIONS),
+  reusable: zod.z.boolean().default(false),
+  options: zod.z.array(DraggableOptionSchema).min(1)
+});
+const DraggableOptionsToolSchema = DraggableOptionsToolObjectSchema.superRefine((tool, ctx) => {
+  addDuplicateOptionNameIssues(tool.options, ctx);
+});
 const NumericKeypadToolSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.NUMERIC_KEYPAD),
   includeOperators: zod.z.boolean().optional(),
@@ -3138,6 +3278,7 @@ const SetSquareToolSchema = zod.z.object({
 });
 const ToolNodeSchema = zod.z.discriminatedUnion("type", [
   DragOptionsToolSchema,
+  DraggableOptionsToolObjectSchema,
   NumericKeypadToolSchema,
   RulerToolSchema,
   ProtractorToolSchema,
@@ -3149,6 +3290,19 @@ function createDragOptions(options) {
     options
   });
 }
+function createDraggableOptions(options, reusable = false) {
+  const result = DraggableOptionsToolSchema.safeParse({
+    type: AST_TYPES.DRAGGABLE_OPTIONS,
+    reusable,
+    options
+  });
+  if (result.success) return result.data;
+  const issue = result.error.issues[0];
+  throw new Error(`DRAGGABLE_OPTIONS: ${issue ? issue.message : "validation failed"}`);
+}
+function createDraggableOption(name, content) {
+  return DraggableOptionSchema.parse({ name, content });
+}
 function createNumericKeypad(includeOperators, includeDecimal, style) {
   return NumericKeypadToolSchema.parse({
     type: AST_TYPES.NUMERIC_KEYPAD,
@@ -3169,6 +3323,9 @@ function createSetSquareTool(size) {
 function isDragOptions(value) {
   return DragOptionsToolSchema.safeParse(value).success;
 }
+function isDraggableOptions(value) {
+  return DraggableOptionsToolSchema.safeParse(value).success;
+}
 function isNumericKeypad(value) {
   return NumericKeypadToolSchema.safeParse(value).success;
 }
@@ -3727,9 +3884,13 @@ const ExerciseDocumentSchema = zod.z.object({
       seen.add(name);
     }
   };
+  const dropInputs = [];
   const visitInlines = (inlines, basePath) => {
     inlines.forEach((inline, i) => {
-      if (inline.type === AST_TYPES.INLINE_INPUT || inline.type === AST_TYPES.FRACTION || inline.type === AST_TYPES.IMAGE || inline.type === AST_TYPES.VISUAL_FRACTION) {
+      if (inline.type === AST_TYPES.DROP_INPUT) {
+        dropInputs.push({ name: inline.name, answer: inline.answer, path: [...basePath, i] });
+      }
+      if (inline.type === AST_TYPES.INLINE_INPUT || inline.type === AST_TYPES.DROP_INPUT || inline.type === AST_TYPES.FRACTION || inline.type === AST_TYPES.IMAGE || inline.type === AST_TYPES.VISUAL_FRACTION) {
         record(inline.name, [...basePath, i, "name"]);
       } else if (inline.type === AST_TYPES.CLOCK && inline.mode === "interactive") {
         record(inline.name, [...basePath, i, "name"]);
@@ -3746,9 +3907,13 @@ const ExerciseDocumentSchema = zod.z.object({
         });
       });
     } else if (block.type === AST_TYPES.NUMBER_LINE_BLOCK) {
-      block.positions.forEach((pos, pi) => {
+      const numberLine = block;
+      numberLine.positions.forEach((pos, pi) => {
         visitInlines(pos.inlines, ["lines", bi, "positions", pi, "inlines"]);
       });
+      numberLine.arrows?.forEach((arrow, ai) => {
+        visitInlines(arrow.inlines, ["lines", bi, "arrows", ai, "inlines"]);
+      });
     } else if (block.type === AST_TYPES.MATCHER_BLOCK) {
       const m = block;
       record(m.name, ["lines", bi, "name"]);
@@ -3791,15 +3956,78 @@ const ExerciseDocumentSchema = zod.z.object({
       record(block.name, ["lines", bi, "name"]);
     }
   });
+  const richBanks = (doc.tools ?? []).map((tool, toolIndex) => ({ tool, toolIndex })).filter((entry) => entry.tool.type === AST_TYPES.DRAGGABLE_OPTIONS);
+  richBanks.forEach(({ tool: bank, toolIndex }) => {
+    if (bank.type !== AST_TYPES.DRAGGABLE_OPTIONS) return;
+    bank.options.forEach((option, optionIndex) => {
+      visitInlines(option.content, ["tools", toolIndex, "options", optionIndex, "content"]);
+    });
+    addDuplicateOptionNameIssues(bank.options, ctx, ["tools", toolIndex]);
+    if (dropInputs.length === 0) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: "DRAGGABLE_OPTIONS needs at least one DROP_INPUT: its cards can only be dropped there",
+        path: ["tools", toolIndex]
+      });
+    }
+  });
+  if (richBanks.length > 1) {
+    ctx.addIssue({
+      code: zod.z.ZodIssueCode.custom,
+      message: "Only one DRAGGABLE_OPTIONS tool is allowed",
+      path: ["tools"]
+    });
+  }
+  const optionNames = new Set(
+    richBanks.flatMap(({ tool }) => (tool.type === AST_TYPES.DRAGGABLE_OPTIONS ? tool.options : []).map((o) => o.name))
+  );
+  dropInputs.forEach(({ name, answer, path }) => {
+    if (richBanks.length === 0) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `DROP_INPUT "${name}" needs a DRAGGABLE_OPTIONS bank to draw from`,
+        path
+      });
+    } else if (!optionNames.has(answer)) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `DROP_INPUT "${name}": answer "${answer}" does not match any OPTION name`,
+        path: [...path, "answer"]
+      });
+    }
+  });
+  const isSingleUseBank = richBanks.some(({ tool }) => tool.type === AST_TYPES.DRAGGABLE_OPTIONS && !tool.reusable);
+  if (isSingleUseBank) {
+    const firstInputByAnswer = /* @__PURE__ */ new Map();
+    dropInputs.forEach(({ name, answer, path }) => {
+      if (!optionNames.has(answer)) return;
+      const firstInput = firstInputByAnswer.get(answer);
+      if (firstInput === void 0) {
+        firstInputByAnswer.set(answer, name);
+        return;
+      }
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `DROP_INPUT "${name}": answer "${answer}" is also the answer of "${firstInput}", but its card can only be placed once. Add a second option or use DRAGGABLE_OPTIONS[reusable=true]`,
+        path: [...path, "answer"]
+      });
+    });
+  }
 });
 function createExerciseDocument(question, lines, validation2, tools) {
-  return ExerciseDocumentSchema.parse({
+  const result = ExerciseDocumentSchema.safeParse({
     type: AST_TYPES.EXERCISE_DOCUMENT,
     question,
     lines,
     tools,
     validation: validation2
   });
+  if (result.success) return result.data;
+  const { issues } = result.error;
+  if (issues.every((issue) => issue.code === zod.z.ZodIssueCode.custom)) {
+    throw new Error(issues.map((issue) => issue.message).join("\n"));
+  }
+  throw result.error;
 }
 function isExerciseDocument(value) {
   return ExerciseDocumentSchema.safeParse(value).success;
@@ -4199,6 +4427,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.inlineInput) {
       return this.visit(ctx.inlineInput);
     }
+    if (ctx.dropInput) {
+      return this.visit(ctx.dropInput);
+    }
     if (ctx.inlineDragOption) {
       return this.visit(ctx.inlineDragOption);
     }
@@ -4353,6 +4584,18 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const digits = params.digits;
     return createNumericInput(name, digits, answer, placeholder, disabled, width, prefill);
   }
+  dropInput(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (typeof params.name === "string" && params.name.startsWith("_")) {
+      throw new Error(`DROP_INPUT: name "${params.name}" is reserved (names cannot start with "_")`);
+    }
+    return createDropInput(
+      params.name,
+      params.answer,
+      params.placeholder,
+      params.width
+    );
+  }
   inlineDragOption(ctx) {
     const valueToken = ctx.StringLiteral[0];
     const value = this.extractString(valueToken.image);
@@ -4491,6 +4734,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
   tool(ctx) {
+    if (ctx.draggableOptions) {
+      return this.visit(ctx.draggableOptions);
+    }
     if (ctx.dragableButtons) {
       return this.visit(ctx.dragableButtons);
     }
@@ -4508,6 +4754,33 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     throw new Error("Unknown tool");
   }
+  draggableOptions(ctx) {
+    const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
+    if (params.reusable !== void 0 && !["true", "false"].includes(String(params.reusable))) {
+      throw new Error("DRAGGABLE_OPTIONS: reusable must be true or false");
+    }
+    const reusable = params.reusable === true || params.reusable === "true";
+    const options = ctx.draggableOption.map((option) => this.visit(option));
+    return createDraggableOptions(options, reusable);
+  }
+  draggableOption(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const rawContent = ctx.inlineElement ? ctx.inlineElement.map((element) => this.visit(element)) : [];
+    const name = params.name;
+    if (typeof name !== "string" || name === "") {
+      throw new Error("DRAGGABLE_OPTIONS: OPTION requires a non-empty string name");
+    }
+    if (!hasOptionContent(rawContent)) {
+      throw new Error(`DRAGGABLE_OPTIONS: OPTION "${name}" content cannot be empty or whitespace only`);
+    }
+    const invalid = rawContent.find((node) => !isOptionContentNode(node));
+    if (invalid) {
+      throw new Error(
+        `DRAGGABLE_OPTIONS: OPTION "${name}" cannot contain ${invalid.type} here. Content must be display-only: text, styled text, images, and fractions or visual fractions without an answer`
+      );
+    }
+    return createDraggableOption(name, rawContent);
+  }
   dragableButtons(ctx) {
     const strings = this.visit(ctx.stringList);
     return createDragOptions(strings);
@@ -5115,10 +5388,30 @@ const InlineInputJSONSchema = zod.z.discriminatedUnion("inputType", [
   StringInputJSONSchema,
   NumericInputJSONSchema
 ]);
+const DropInputJSONSchema = zod.z.object({
+  type: zod.z.literal(JSON_TYPES.DROP_INPUT),
+  /** Box width in characters; absent means the default input size. */
+  width: InlineInputWidthSchema,
+  placeholder: zod.z.string().max(32).optional()
+});
 const DragOptionsJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.DRAG_OPTIONS),
   options: zod.z.array(zod.z.string())
 });
+const DraggableOptionJSONSchema = zod.z.object({
+  name: zod.z.string().min(1),
+  content: zod.z.array(LayoutItemSchema).min(1).refine(
+    (content) => hasOptionContent(content, JSON_TYPES.SPACE),
+    { message: "Option content cannot be empty or whitespace only" }
+  )
+});
+const DraggableOptionsJSONSchema = zod.z.object({
+  type: zod.z.literal(JSON_TYPES.DRAGGABLE_OPTIONS),
+  reusable: zod.z.boolean(),
+  options: zod.z.array(DraggableOptionJSONSchema).min(1)
+}).superRefine((widget, ctx) => {
+  addDuplicateOptionNameIssues(widget.options, ctx);
+});
 const InlineDragOptionJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.INLINE_DRAG_OPTION),
   value: zod.z.string().min(1)
@@ -5228,7 +5521,9 @@ const GeometryJSONSchema = zod.z.object({
 });
 const WidgetJSONSchema = zod.z.union([
   InlineInputJSONSchema,
+  DropInputJSONSchema,
   DragOptionsJSONSchema,
+  DraggableOptionsJSONSchema,
   InlineDragOptionJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
@@ -5345,9 +5640,15 @@ function isInlineInputJSON(widget) {
 function isDisabledInputJSON(widget) {
   return isInlineInputJSON(widget) && widget.disabled === true;
 }
+function isDropInputJSON(widget) {
+  return widget.type === JSON_TYPES.DROP_INPUT;
+}
 function isDragOptionsJSON(widget) {
   return widget.type === JSON_TYPES.DRAG_OPTIONS;
 }
+function isDraggableOptionsJSON(widget) {
+  return widget.type === JSON_TYPES.DRAGGABLE_OPTIONS;
+}
 function isInlineDragOptionJSON(widget) {
   return widget.type === JSON_TYPES.INLINE_DRAG_OPTION;
 }
@@ -10881,7 +11182,16 @@ function toJSON(ast) {
   const answers = {};
   let gridSymmetryCounter = 0;
   let geometryCounter = 0;
-  const allInlines = collectAllInlines(ast.lines);
+  const richOptionsTool = ast.tools?.find(
+    (tool) => tool.type === AST_TYPES.DRAGGABLE_OPTIONS
+  );
+  const allInlines = [
+    ...collectAllInlines(ast.lines),
+    ...richOptionsTool?.options.flatMap((option) => option.content) ?? []
+  ];
+  const matcherCardInlines = new Set(collectAllInlines(ast.lines.filter(
+    (block) => block.type === AST_TYPES.MATCHER_BLOCK || block.type === AST_TYPES.PAIR_MATCHER_BLOCK
+  )));
   const inlineDragIds = /* @__PURE__ */ new Map();
   {
     let counter = 0;
@@ -11007,7 +11317,7 @@ function toJSON(ast) {
   const hasDragBank = ast.tools?.some((tool) => tool.type === AST_TYPES.DRAG_OPTIONS) ?? false;
   for (const inline of allInlines) {
     if (inline.type === AST_TYPES.INLINE_INPUT) {
-      const disabled = inline.disabled || hasDragBank && inline.prefill !== void 0;
+      const disabled = inline.disabled || hasDragBank && !!inline.prefill;
       if (inline.inputType === INPUT_TYPES.STRING) {
         widgets[inline.name] = {
           type: JSON_TYPES.INLINE_INPUT,
@@ -11032,6 +11342,13 @@ function toJSON(ast) {
       if (inline.answer !== void 0 && !disabled) {
         answers[inline.name] = inline.answer;
       }
+    } else if (inline.type === AST_TYPES.DROP_INPUT) {
+      widgets[inline.name] = {
+        type: JSON_TYPES.DROP_INPUT,
+        ...inline.width !== void 0 && { width: inline.width },
+        placeholder: inline.placeholder
+      };
+      answers[inline.name] = inline.answer;
     } else if (inline.type === AST_TYPES.CLOCK && inline.mode === "interactive") {
       answers[inline.name] = inline.answer;
     }
@@ -11043,7 +11360,7 @@ function toJSON(ast) {
         simplified: inline.simplified ?? true,
         placeholder: inline.placeholder
       };
-      if (inline.answer !== void 0) {
+      if (inline.answer !== void 0 && !matcherCardInlines.has(inline)) {
         answers[inline.name] = inline.answer;
       }
     }
@@ -11119,6 +11436,15 @@ function toJSON(ast) {
           // Randomise chip order per compile so the answer position isn't fixed.
           options: lodashExports.shuffle(tool.options)
         };
+      } else if (tool.type === AST_TYPES.DRAGGABLE_OPTIONS) {
+        widgets[DRAGGABLE_OPTIONS_WIDGET_ID] = {
+          type: JSON_TYPES.DRAGGABLE_OPTIONS,
+          reusable: tool.reusable,
+          options: tool.options.map((option) => ({
+            name: option.name,
+            content: option.content.map((inline) => transformInline(inline, idGenerator, inlineDragIds))
+          }))
+        };
       } else if (tool.type === AST_TYPES.NUMERIC_KEYPAD) {
         widgets[NUMERIC_KEYPAD_WIDGET_ID] = {
           type: JSON_TYPES.NUMERIC_KEYPAD,
@@ -11584,6 +11910,12 @@ function transformInline(inline, idGenerator, inlineDragIds) {
         type: JSON_TYPES.WIDGET_REF,
         widgetId: inline.name
       };
+    case AST_TYPES.DROP_INPUT:
+      return {
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId: inline.name
+      };
     case AST_TYPES.FRACTION:
       return {
         id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
@@ -11640,6 +11972,7 @@ function transformValidation(validation2, answers, widgets) {
     };
   } else if (validation2.type === AST_TYPES.EXPRESSION_VALIDATION) {
     assertNoDisabledInExpression(validation2.expression, widgets);
+    assertNoDropInputs(Object.keys(widgets), widgets);
     const validVariableNames = getEnabledWidgetNames(widgets);
     const variables = extractVariables$1(validation2.expression, validVariableNames);
     return {
@@ -11649,6 +11982,7 @@ function transformValidation(validation2, answers, widgets) {
     };
   } else if (validation2.type === AST_TYPES.MIXED_VALIDATION) {
     assertNoDisabledInExpression(validation2.expression, widgets);
+    assertNoDropInputs(extractVariables$1(validation2.expression, Object.keys(widgets)), widgets);
     const validVariableNames = getEnabledWidgetNames(widgets);
     const variables = extractVariables$1(validation2.expression, validVariableNames);
     const inExpression = new Set(variables);
@@ -11687,6 +12021,14 @@ function assertNoDisabledInExpression(expression, widgets) {
     );
   }
 }
+function assertNoDropInputs(names, widgets) {
+  const dropInputs = names.filter((name) => widgets[name]?.type === JSON_TYPES.DROP_INPUT);
+  if (dropInputs.length > 0) {
+    throw new Error(
+      `WIDGET_ANSWER: DROP_INPUT ${dropInputs.map((n) => `"${n}"`).join(", ")} cannot be used in expression validation — its value is an option name, not a number. Use type="simple"`
+    );
+  }
+}
 function getEnabledWidgetNames(widgets) {
   return Object.entries(widgets).filter(([, widget]) => !isDisabledInputJSON(widget)).map(([name]) => name);
 }
@@ -12260,7 +12602,7 @@ function withDisabledPrefilledInputs(exercise) {
   const widgets = { ...exercise.widgets };
   let changed = false;
   for (const [id, widget] of Object.entries(widgets)) {
-    if (widget.type === JSON_TYPES.INLINE_INPUT && widget.prefill !== void 0 && !widget.disabled) {
+    if (widget.type === JSON_TYPES.INLINE_INPUT && widget.prefill && !widget.disabled) {
       widgets[id] = { ...widget, disabled: true };
       changed = true;
     }
@@ -12433,11 +12775,13 @@ function getMissingInputs(exercise, userInputs) {
 }
 function validateInputFormats(exercise, userInputs) {
   const errors = {};
-  for (const [widgetId, widget] of Object.entries(exercise.widgets)) {
+  const { widgets } = withDisabledPrefilledInputs(exercise);
+  for (const [widgetId, widget] of Object.entries(widgets)) {
     const value = userInputs[widgetId];
     if (value === void 0 || value === "") {
       continue;
     }
+    if (isDisabledInputJSON(widget)) continue;
     if (widget.type === JSON_TYPES.INLINE_INPUT && widget.inputType === INPUT_TYPES.NUMERIC) {
       const numValue = typeof value === "number" ? value : parseFloat(String(value));
       if (!Number.isFinite(numValue)) {
@@ -12455,6 +12799,8 @@ function validateInputFormats(exercise, userInputs) {
 const DragItemTypeSchema = zod.z.enum([
   "drag-option",
   // Draggable answer options
+  "rich-drag-option",
+  // Rich option from DRAGGABLE_OPTIONS or DROP_INPUT
   "placed-chip",
   // Chip already placed on a number-line axis (re-drag)
   "ruler-handle",
@@ -12468,6 +12814,16 @@ const DragOptionDataSchema = zod.z.object({
   value: zod.z.string(),
   label: zod.z.string()
 });
+const RichDragOptionDataSchema = zod.z.object({
+  optionName: zod.z.string().min(1),
+  origin: zod.z.discriminatedUnion("kind", [
+    zod.z.object({ kind: zod.z.literal("bank") }),
+    zod.z.object({
+      kind: zod.z.literal("drop-input"),
+      inputName: zod.z.string().min(1)
+    })
+  ])
+});
 const DragItemSchema = (dataSchema) => zod.z.object({
   id: zod.z.union([zod.z.string(), zod.z.number()]),
   // UniqueIdentifier from dnd-kit
@@ -12475,6 +12831,7 @@ const DragItemSchema = (dataSchema) => zod.z.object({
   data: dataSchema
 });
 DragItemSchema(DragOptionDataSchema);
+DragItemSchema(RichDragOptionDataSchema);
 zod.z.object({
   targetId: zod.z.string(),
   item: zod.z.discriminatedUnion("type", [
@@ -16255,12 +16612,16 @@ function useExerciseDnd() {
   }
   return ctx;
 }
+function useExerciseDndOptional() {
+  return React.useContext(ExerciseDndContext);
+}
 const NO_EXERCISE = Symbol("no-exercise");
 const ExerciseDndProvider = ({
   children,
   droppedSources,
   onDragEnd,
-  exerciseKey
+  exerciseKey,
+  renderOverlay
 }) => {
   const [activeItem, setActiveItem] = React.useState(null);
   const [draggedExerciseKey, setDraggedExerciseKey] = React.useState(NO_EXERCISE);
@@ -16296,7 +16657,9 @@ const ExerciseDndProvider = ({
     const raw = active.data.current;
     const item = raw?.type === "placed-chip" ? { type: "placed-chip", widgetId: raw.widgetId, label: raw.label, sourceOptionId: raw.sourceOptionId } : raw;
     setActiveItem(item);
-    if (item.type === "drag-option") setDraggedExerciseKey(exerciseKey);
+    if (item.type === "drag-option" || item.type === "rich-drag-option") {
+      setDraggedExerciseKey(exerciseKey);
+    }
     playSound("drag-start");
   };
   const handleDragEnd = (event) => {
@@ -16339,14 +16702,16 @@ const ExerciseDndProvider = ({
           onDragCancel: handleDragCancel,
           children: [
             children,
-            /* @__PURE__ */ jsxRuntime.jsx(DragOverlay, { dropAnimation: null, children: activeItem && /* @__PURE__ */ jsxRuntime.jsx(DragOverlayContent, { item: activeItem }) })
+            /* @__PURE__ */ jsxRuntime.jsx(DragOverlay, { dropAnimation: null, children: activeItem && /* @__PURE__ */ jsxRuntime.jsx(DragOverlayContent, { item: activeItem, renderOverlay }) })
           ]
         }
       )
     }
   );
 };
-const DragOverlayContent = ({ item }) => {
+const DragOverlayContent = ({ item, renderOverlay }) => {
+  const customOverlay = renderOverlay?.(item);
+  if (customOverlay != null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: customOverlay });
   switch (item.type) {
     case "drag-option": {
       const data = item.data;
@@ -16365,7 +16730,8 @@ const Draggable = ({
   data,
   disabled = false,
   children,
-  className = ""
+  className = "",
+  behavior = "move"
 }) => {
   const dragItem = { id, type, data };
   const {
@@ -16378,6 +16744,7 @@ const Draggable = ({
     data: dragItem,
     disabled
   });
+  const isCopy = behavior === "copy";
   const style = {
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
@@ -16387,7 +16754,7 @@ const Draggable = ({
     {
       ref: setNodeRef,
       style,
-      className: `draggable ${isDragging ? "dragging" : ""} ${className}`,
+      className: `draggable ${isDragging && !isCopy ? "dragging" : ""} ${className}`,
       ...listeners,
       ...attributes,
       children
@@ -17179,6 +17546,9 @@ const PlacedInputChip = ({
     }
   );
 };
+function getInputBoxWidth(chars) {
+  return `${chars * 0.8 + 1}em`;
+}
 function getMaxInputLength(exercise, inputKey) {
   const widget = exercise.widgets[inputKey];
   if (widget?.type !== JSON_TYPES.INLINE_INPUT) return void 0;
@@ -17235,7 +17605,7 @@ const InlineInput = ({
     return applyDropToInput(widgetId, item, onChange);
   }, [onChange, widgetId]);
   const expectedLength = inputType === INPUT_TYPES.NUMERIC ? digits : length;
-  const dynamicWidth = `${(width ?? expectedLength ?? 5) * 0.8 + 1}em`;
+  const dynamicWidth = getInputBoxWidth(width ?? expectedLength ?? 5);
   const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
   const disabledClass = disabled ? " inline-input--disabled" : "";
   const isFixedChip = hasDragBank && disabled && value !== "";
@@ -17439,42 +17809,418 @@ const InlineDragOption = ({
     }
   ) });
 };
-const NumericKeypad = ({
-  value,
-  includeOperators = false,
-  includeDecimal = false,
-  onChange
-}) => {
-  const playSound = useSound();
-  const locked = useExerciseLocked();
-  const handleDigit = (digit) => {
-    if (locked) return;
-    playSound("keypad-press");
-    onChange(value + digit);
-  };
-  const handleBackspace = () => {
-    if (locked) return;
-    playSound("keypad-press");
-    onChange(value.slice(0, -1));
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, "data-tutorial": "keypad", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "1", onClick: () => handleDigit("1"), children: "1" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "2", onClick: () => handleDigit("2"), children: "2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "3", onClick: () => handleDigit("3"), children: "3" }),
-    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "+", onClick: () => handleDigit("+"), children: "+" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "4", onClick: () => handleDigit("4"), children: "4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "5", onClick: () => handleDigit("5"), children: "5" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "6", onClick: () => handleDigit("6"), children: "6" }),
-    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "-", onClick: () => handleDigit("-"), children: "-" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "7", onClick: () => handleDigit("7"), children: "7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "8", onClick: () => handleDigit("8"), children: "8" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "9", onClick: () => handleDigit("9"), children: "9" }),
-    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "×", onClick: () => handleDigit("×"), children: "×" }),
-    includeDecimal ? /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", "data-key": ",", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "0", onClick: () => handleDigit("0"), children: "0" }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", "data-key": "backspace", onClick: handleBackspace, children: "⌫" }),
-    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "÷", onClick: () => handleDigit("÷"), children: "÷" })
-  ] });
+function isArabic(text) {
+  return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
+}
+function hasLatinChars(text) {
+  return /[A-Za-z]/.test(text);
+}
+function getTextValue(item) {
+  if ((item.type === JSON_TYPES.TEXT || item.type === JSON_TYPES.HIGHLIGHTED_TEXT || item.type === JSON_TYPES.BOLD_TEXT || item.type === JSON_TYPES.COLOR_TEXT) && "value" in item) {
+    return item.value;
+  }
+  return void 0;
+}
+function itemContainsArabic(item) {
+  const text = getTextValue(item);
+  if (text !== void 0) {
+    return isArabic(text);
+  }
+  if (item.type === JSON_TYPES.GROUP && "items" in item) {
+    return item.items.some((subItem) => itemContainsArabic(subItem));
+  }
+  return false;
+}
+function itemContainsLatin(item) {
+  const text = getTextValue(item);
+  if (text !== void 0) {
+    return hasLatinChars(text);
+  }
+  if (item.type === JSON_TYPES.GROUP && "items" in item) {
+    return item.items.some((subItem) => itemContainsLatin(subItem));
+  }
+  return false;
+}
+function shouldItemsUseRTL(items) {
+  const hasArabic = items.some(itemContainsArabic);
+  const hasLatin = items.some(itemContainsLatin);
+  return hasArabic && !hasLatin;
+}
+function isTextItem(item) {
+  return item.type === JSON_TYPES.TEXT || item.type === JSON_TYPES.HIGHLIGHTED_TEXT || item.type === JSON_TYPES.BOLD_TEXT || item.type === JSON_TYPES.COLOR_TEXT || item.type === JSON_TYPES.OPERATOR || item.type === JSON_TYPES.SPACE || item.type === JSON_TYPES.GROUP;
+}
+function groupLineItems(items) {
+  const groups = [];
+  let currentTextGroup = [];
+  for (const item of items) {
+    if (isTextItem(item)) {
+      currentTextGroup.push(item);
+    } else {
+      if (currentTextGroup.length > 0) {
+        const hasArabic = currentTextGroup.some(itemContainsArabic);
+        const hasLatin = currentTextGroup.some(itemContainsLatin);
+        const shouldApplyRTL = hasArabic && !hasLatin;
+        groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
+        currentTextGroup = [];
+      }
+      groups.push({ items: [item], isTextGroup: false, hasArabic: false, hasLatin: false, shouldApplyRTL: false });
+    }
+  }
+  if (currentTextGroup.length > 0) {
+    const hasArabic = currentTextGroup.some(itemContainsArabic);
+    const hasLatin = currentTextGroup.some(itemContainsLatin);
+    const shouldApplyRTL = hasArabic && !hasLatin;
+    groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
+  }
+  return groups;
+}
+const EPSILON = 10 ** -INTERNAL_PRECISION;
+const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
+const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
+const almostEqual = (a, b) => Math.abs(a - b) <= EPSILON;
+const NUMBER_LINE_AXIS_ENDS = {
+  "arrow-right": { left: "tick", right: "arrow" },
+  "arrow-left": { left: "arrow", right: "tick" },
+  "arrow-both": { left: "arrow", right: "arrow" },
+  "line": { left: "line", right: "line" },
+  "line-left": { left: "line", right: "arrow" }
+};
+const toPercent = (value, min, max) => {
+  const raw = SIDE_PAD + (value - min) / (max - min) * (100 - 2 * SIDE_PAD);
+  return Math.max(SIDE_PAD, Math.min(100 - SIDE_PAD, raw));
+};
+const pixelToValue = (chipCenterX, axisLeft, axisWidth, min, max) => {
+  const relX = (chipCenterX - axisLeft) / axisWidth;
+  const fraction = (relX - SIDE_PAD / 100) / (1 - 2 * SIDE_PAD / 100);
+  const clamped = Math.max(0, Math.min(1, fraction));
+  return min + clamped * (max - min);
+};
+const getMajorTicks = (min, max, step) => {
+  if (step <= 0 || max <= min) return [min, max];
+  const count = Math.floor((max - min) / step);
+  const ticks = Array.from({ length: count + 1 }, (_, i) => cleanFloat(min + i * step));
+  const lastTick = ticks[ticks.length - 1];
+  if (roundTick(lastTick) !== roundTick(max)) {
+    ticks.push(max);
+  } else {
+    ticks[ticks.length - 1] = max;
+  }
+  return ticks;
+};
+const getMinorTickValues = (majorTicks, minorTicks) => {
+  if (minorTicks <= 0 || majorTicks.length < 2) return [];
+  const result = [];
+  for (let i = 0; i < majorTicks.length - 1; i++) {
+    const from = majorTicks[i];
+    const to = majorTicks[i + 1];
+    const interval = to - from;
+    for (let j = 1; j <= minorTicks; j++) {
+      result.push(cleanFloat(from + j / (minorTicks + 1) * interval));
+    }
+  }
+  return result;
+};
+const getSnapTicks = (majorTicks, minorTicks) => [
+  ...majorTicks,
+  ...getMinorTickValues(majorTicks, minorTicks)
+];
+const snapToNearest = (raw, ticks) => {
+  if (ticks.length === 0) return cleanFloat(raw);
+  return ticks.reduce((best, t) => Math.abs(t - raw) < Math.abs(best - raw) ? t : best);
+};
+const getPositionWidgetId = (content) => {
+  for (const item of content) {
+    if (isWidgetRef(item)) return item.widgetId;
+  }
+  return null;
+};
+const toHighlightColor = (color) => color.startsWith("#") ? color : `var(--nl-highlight-${color})`;
+function placeTableCells(rows, cols) {
+  const placements = /* @__PURE__ */ new Map();
+  const occupied = rows.map(() => []);
+  const totalRows = rows.length;
+  rows.forEach((row, rowIndex) => {
+    const taken = occupied[rowIndex] ?? [];
+    let col = 0;
+    for (const cell of row.cells) {
+      while (taken[col]) col++;
+      const colspan = cell.colspan || 1;
+      const rowspan = Math.min(cell.rowspan || 1, totalRows - rowIndex);
+      for (let r = rowIndex; r < rowIndex + rowspan; r++) {
+        const line = occupied[r];
+        if (!line) continue;
+        for (let c = col; c < col + colspan; c++) line[c] = true;
+      }
+      placements.set(cell.id, {
+        column: col + 1,
+        row: rowIndex + 1,
+        colspan,
+        rowspan,
+        isLastColumn: col + colspan >= cols,
+        isLastRow: rowIndex + rowspan >= totalRows
+      });
+      col += colspan;
+    }
+  });
+  return placements;
+}
+const EMPTY_VALUES$2 = {};
+const EMPTY_DROPPED_INPUTS = /* @__PURE__ */ new Set();
+const ignoreChange = () => {
+};
+const PLAIN_TEXT_TYPES = /* @__PURE__ */ new Set([JSON_TYPES.TEXT, JSON_TYPES.SPACE, JSON_TYPES.BOLD_TEXT]);
+function isPlainTextContent(content) {
+  return content.every((item) => PLAIN_TEXT_TYPES.has(item.type));
+}
+const RichOptionContent = ({ content, widgets }) => {
+  const renderItem = (item) => /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutRenderer,
+    {
+      item: item.type === JSON_TYPES.IMAGE ? { ...item, fullscreen: false } : item,
+      widgets,
+      values: EMPTY_VALUES$2,
+      droppedInputs: EMPTY_DROPPED_INPUTS,
+      onChange: ignoreChange
+    },
+    item.id
+  );
+  const hasRTLInlineWidget = content.some((item) => {
+    if (item.type !== JSON_TYPES.WIDGET_REF) return false;
+    const widget = widgets[item.widgetId];
+    return !!widget && RTL_INLINE_WIDGET_TYPES.has(widget.type);
+  });
+  const isRTL = hasRTLInlineWidget && content.some(itemContainsArabic);
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rich-option-content", dir: isRTL ? "rtl" : "ltr", children: groupLineItems(content).map((group, index) => group.isTextGroup ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-group", dir: group.shouldApplyRTL ? "rtl" : void 0, children: group.items.map(renderItem) }, index) : group.items.map(renderItem)) });
+};
+const DraggableOptions = ({
+  widget,
+  widgets,
+  usedOptionNames
+}) => {
+  const { exerciseKey } = useExerciseDnd();
+  return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options draggable-options", children: widget.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+    RichDragOption,
+    {
+      option,
+      widgets,
+      reusable: widget.reusable,
+      used: !widget.reusable && usedOptionNames.has(option.name)
+    },
+    `${exerciseKey ?? ""}:${option.name}`
+  )) }) });
+};
+const RichDragOption = ({ option, widgets, reusable, used }) => {
+  const { activeItem, hasDraggedOption, playHintSound } = useExerciseDnd();
+  const locked = useExerciseLocked();
+  const { jiggling: hinting, onAnimationEnd: onHintEnd } = useJiggle(hasDraggedOption, {
+    ignoreBubbledAnimationEnd: true
+  });
+  const optionId = `rich-drag-option:${option.name}`;
+  const data = { optionName: option.name, origin: { kind: "bank" } };
+  const isPickedUp = !reusable && activeItem?.type === "rich-drag-option" && activeItem.id === optionId;
+  const surfaceClass = isPlainTextContent(option.content) ? "drag-option" : "drag-option drag-option--rich";
+  const emptySlot = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-empty", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: surfaceClass, disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(RichOptionContent, { content: option.content, widgets }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-slot rich-drag-option-slot", children: used ? emptySlot : /* @__PURE__ */ jsxRuntime.jsx(
+    Draggable,
+    {
+      id: optionId,
+      type: "rich-drag-option",
+      data,
+      disabled: locked,
+      behavior: reusable ? "copy" : "move",
+      className: "drag-option-wrapper rich-drag-option-wrapper",
+      children: isPickedUp ? emptySlot : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `${surfaceClass} rich-drag-option${hinting && !locked ? " drag-option--hint" : ""}`,
+          onAnimationStart: (event) => {
+            if (hinting && event.target === event.currentTarget) playHintSound();
+          },
+          onAnimationEnd: onHintEnd,
+          "aria-disabled": locked ? "true" : void 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(RichOptionContent, { content: option.content, widgets })
+        }
+      )
+    }
+  ) });
+};
+const PlacedRichOption = ({
+  inputName,
+  option,
+  widgets,
+  onRemove,
+  className = ""
+}) => {
+  const locked = useExerciseLocked();
+  const dragId = `${inputName}__rich-option`;
+  const data = {
+    optionName: option.name,
+    origin: { kind: "drop-input", inputName }
+  };
+  const dragItem = { id: dragId, type: "rich-drag-option", data };
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: dragId,
+    data: dragItem,
+    disabled: locked
+  });
+  useDndMonitor({
+    onDragEnd(event) {
+      if (isUndoDrop(event, dragId)) onRemove();
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: setNodeRef,
+      type: "button",
+      className: `inline-input-chip placed-rich-option ${className}${isDragging ? " dragging" : ""}`.trim(),
+      onClick: (event) => {
+        if (!locked && event.detail !== 0) onRemove();
+      },
+      title: locked ? void 0 : "Drag to move, or click to remove",
+      style: {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        maxWidth: "none",
+        margin: 0,
+        boxSizing: "border-box",
+        touchAction: "none",
+        cursor: locked ? "default" : "grab"
+      },
+      ...listeners,
+      ...attributes,
+      children: /* @__PURE__ */ jsxRuntime.jsx(RichOptionContent, { content: option.content, widgets })
+    }
+  );
+};
+const dropSourceId = (optionName) => `rich-drag-option:${optionName}`;
+function applyRichDropToInput(targetInputName, item, onChange) {
+  if (item.type !== "rich-drag-option") return false;
+  const data = item.data;
+  if (data.origin.kind === "drop-input") {
+    if (data.origin.inputName === targetInputName) return false;
+    onChange(data.origin.inputName, "", false);
+  }
+  onChange(targetInputName, data.optionName, true, dropSourceId(data.optionName));
+  return true;
+}
+const ACCEPTED_DRAG_TYPES = ["rich-drag-option"];
+const DropInput = ({
+  widgetId,
+  value,
+  width,
+  placeholder,
+  validationStatus = null,
+  option,
+  widgets = {},
+  onChange = () => {
+  }
+}) => {
+  const locked = useExerciseLocked();
+  const dnd = useExerciseDndOptional();
+  const isEmpty = value === "";
+  const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
+  const hasChip = !isEmpty && Boolean(option) && Boolean(dnd);
+  const boxStyle = width !== void 0 ? { width: getInputBoxWidth(width) } : void 0;
+  const handleDrop = React.useCallback(
+    (item) => applyRichDropToInput(widgetId, item, onChange),
+    [widgetId, onChange]
+  );
+  const handleRemove = React.useCallback(
+    () => onChange(widgetId, "", false),
+    [widgetId, onChange]
+  );
+  const placeholderText = placeholder ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "drop-input-placeholder", children: placeholder }) : null;
+  const input = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `inline-widget drop-input${hasChip ? " drop-input--filled" : ` inline-input${statusClass}`}${isEmpty ? " drop-input--empty" : ""}${locked ? " drop-input--locked" : ""}`,
+      style: hasChip ? void 0 : boxStyle,
+      role: "group",
+      "aria-label": placeholder ?? widgetId,
+      "aria-disabled": locked ? "true" : void 0,
+      "data-widget-id": widgetId,
+      children: isEmpty ? placeholderText : option ? dnd ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-input drop-input-sizer", style: boxStyle, "aria-hidden": "true", children: placeholderText }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PlacedRichOption,
+          {
+            inputName: widgetId,
+            option,
+            widgets,
+            onRemove: handleRemove,
+            className: statusClass.trim()
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(RichOptionContent, { content: option.content, widgets }) : dnd && !locked ? (
+        // Value that resolves to no bank option (author answer/option-name
+        // mismatch, legacy JSON). Keep it clearable so the field is not stuck.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "drop-input-unresolved",
+            onClick: (event) => {
+              if (event.detail !== 0) handleRemove();
+            },
+            title: "Click to clear",
+            children: value
+          }
+        )
+      ) : value
+    }
+  );
+  if (!dnd) return input;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Droppable,
+    {
+      id: widgetId,
+      accepts: ACCEPTED_DRAG_TYPES,
+      onDrop: handleDrop,
+      disabled: locked,
+      className: "drop-input-droppable",
+      children: input
+    }
+  );
+};
+const NumericKeypad = ({
+  value,
+  includeOperators = false,
+  includeDecimal = false,
+  onChange
+}) => {
+  const playSound = useSound();
+  const locked = useExerciseLocked();
+  const handleDigit = (digit) => {
+    if (locked) return;
+    playSound("keypad-press");
+    onChange(value + digit);
+  };
+  const handleBackspace = () => {
+    if (locked) return;
+    playSound("keypad-press");
+    onChange(value.slice(0, -1));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, "data-tutorial": "keypad", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "1", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "2", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "3", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "+", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "4", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "5", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "6", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "-", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "7", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "8", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "9", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "×", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", "data-key": ",", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "0", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", "data-key": "backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "÷", onClick: () => handleDigit("÷"), children: "÷" })
+  ] });
 };
 const FractionInput = ({
   widgetId,
@@ -19277,41 +20023,6 @@ const MatcherWidget = ({
   );
 };
 MatcherWidget.displayName = "MatcherWidget";
-function isArabic(text) {
-  return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
-}
-function hasLatinChars(text) {
-  return /[A-Za-z]/.test(text);
-}
-function itemContainsArabic(item) {
-  if (item.type === JSON_TYPES.TEXT && "value" in item) {
-    return isArabic(item.value);
-  }
-  if (item.type === JSON_TYPES.HIGHLIGHTED_TEXT && "value" in item) {
-    return isArabic(item.value);
-  }
-  if (item.type === JSON_TYPES.GROUP && "items" in item) {
-    return item.items.some((subItem) => itemContainsArabic(subItem));
-  }
-  return false;
-}
-function itemContainsLatin(item) {
-  if (item.type === JSON_TYPES.TEXT && "value" in item) {
-    return hasLatinChars(item.value);
-  }
-  if (item.type === JSON_TYPES.HIGHLIGHTED_TEXT && "value" in item) {
-    return hasLatinChars(item.value);
-  }
-  if (item.type === JSON_TYPES.GROUP && "items" in item) {
-    return item.items.some((subItem) => itemContainsLatin(subItem));
-  }
-  return false;
-}
-function shouldItemsUseRTL(items) {
-  const hasArabic = items.some(itemContainsArabic);
-  const hasLatin = items.some(itemContainsLatin);
-  return hasArabic && !hasLatin;
-}
 function usePairLines({
   containerRef,
   pairs,
@@ -19725,9 +20436,15 @@ PairMatcherWidget.displayName = "PairMatcherWidget";
 function isInlineInputWidget(widget) {
   return widget.type === "inline-input";
 }
+function isDropInputWidget(widget) {
+  return widget.type === "drop-input";
+}
 function isDragOptionsWidget(widget) {
   return widget.type === "drag-options";
 }
+function isDraggableOptionsWidget(widget) {
+  return widget.type === "draggable-options";
+}
 function isInlineDragOptionWidget(widget) {
   return widget.type === "inline-drag-option";
 }
@@ -19756,7 +20473,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await Promise.resolve().then(() => require("./GeometryWidget-D6_DlxhZ.js"))).GeometryWidget
+  default: (await Promise.resolve().then(() => require("./GeometryWidget-CTTLw871.js"))).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -19794,6 +20511,23 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isDropInputWidget(widget)) {
+    const optionsWidget = widgets?.[DRAGGABLE_OPTIONS_WIDGET_ID];
+    const option = optionsWidget && isDraggableOptionsWidget(optionsWidget) ? optionsWidget.options.find((candidate) => candidate.name === strValue) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DropInput,
+      {
+        widgetId,
+        value: strValue,
+        width: widget.width,
+        placeholder: widget.placeholder,
+        validationStatus,
+        option,
+        widgets,
+        onChange
+      }
+    );
+  }
   if (isDragOptionsWidget(widget)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DragOptions,
@@ -19804,6 +20538,25 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isDraggableOptionsWidget(widget)) {
+    const usedOptionNames = /* @__PURE__ */ new Set();
+    if (!widget.reusable) {
+      for (const [id, candidate] of Object.entries(widgets ?? {})) {
+        const candidateValue = values[id];
+        if (isDropInputWidget(candidate) && typeof candidateValue === "string" && candidateValue !== "") {
+          usedOptionNames.add(candidateValue);
+        }
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DraggableOptions,
+      {
+        widget,
+        widgets: widgets ?? { [widgetId]: widget },
+        usedOptionNames
+      }
+    );
+  }
   if (isInlineDragOptionWidget(widget)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       InlineDragOption,
@@ -20145,75 +20898,14 @@ const ImageItem = ({
         ref: triggerRef,
         type: "button",
         className: "image-zoom-btn",
-        "aria-label": alt ? `View "${alt}" fullscreen` : "View image fullscreen",
-        onClick: open,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ExpandDiamondIcon, {})
-      }
-    ),
-    overlay
-  ] });
-};
-const EPSILON = 10 ** -INTERNAL_PRECISION;
-const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
-const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
-const almostEqual = (a, b) => Math.abs(a - b) <= EPSILON;
-const NUMBER_LINE_AXIS_ENDS = {
-  "arrow-right": { left: "tick", right: "arrow" },
-  "arrow-left": { left: "arrow", right: "tick" },
-  "arrow-both": { left: "arrow", right: "arrow" },
-  "line": { left: "line", right: "line" },
-  "line-left": { left: "line", right: "arrow" }
-};
-const toPercent = (value, min, max) => {
-  const raw = SIDE_PAD + (value - min) / (max - min) * (100 - 2 * SIDE_PAD);
-  return Math.max(SIDE_PAD, Math.min(100 - SIDE_PAD, raw));
-};
-const pixelToValue = (chipCenterX, axisLeft, axisWidth, min, max) => {
-  const relX = (chipCenterX - axisLeft) / axisWidth;
-  const fraction = (relX - SIDE_PAD / 100) / (1 - 2 * SIDE_PAD / 100);
-  const clamped = Math.max(0, Math.min(1, fraction));
-  return min + clamped * (max - min);
-};
-const getMajorTicks = (min, max, step) => {
-  if (step <= 0 || max <= min) return [min, max];
-  const count = Math.floor((max - min) / step);
-  const ticks = Array.from({ length: count + 1 }, (_, i) => cleanFloat(min + i * step));
-  const lastTick = ticks[ticks.length - 1];
-  if (roundTick(lastTick) !== roundTick(max)) {
-    ticks.push(max);
-  } else {
-    ticks[ticks.length - 1] = max;
-  }
-  return ticks;
-};
-const getMinorTickValues = (majorTicks, minorTicks) => {
-  if (minorTicks <= 0 || majorTicks.length < 2) return [];
-  const result = [];
-  for (let i = 0; i < majorTicks.length - 1; i++) {
-    const from = majorTicks[i];
-    const to = majorTicks[i + 1];
-    const interval = to - from;
-    for (let j = 1; j <= minorTicks; j++) {
-      result.push(cleanFloat(from + j / (minorTicks + 1) * interval));
-    }
-  }
-  return result;
-};
-const getSnapTicks = (majorTicks, minorTicks) => [
-  ...majorTicks,
-  ...getMinorTickValues(majorTicks, minorTicks)
-];
-const snapToNearest = (raw, ticks) => {
-  if (ticks.length === 0) return cleanFloat(raw);
-  return ticks.reduce((best, t) => Math.abs(t - raw) < Math.abs(best - raw) ? t : best);
-};
-const getPositionWidgetId = (content) => {
-  for (const item of content) {
-    if (isWidgetRef(item)) return item.widgetId;
-  }
-  return null;
+        "aria-label": alt ? `View "${alt}" fullscreen` : "View image fullscreen",
+        onClick: open,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ExpandDiamondIcon, {})
+      }
+    ),
+    overlay
+  ] });
 };
-const toHighlightColor = (color) => color.startsWith("#") ? color : `var(--nl-highlight-${color})`;
 const getBandGeometry = (h, min, max) => {
   const leftPct = toPercent(Math.min(h.from, h.to), min, max);
   const rightPct = toPercent(Math.max(h.from, h.to), min, max);
@@ -21670,63 +22362,6 @@ const ClockRenderer = ({
     format === "12h" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "clock-period-badge", children: hours >= 12 ? "PM" : "AM" })
   ] });
 };
-function isTextItem(item) {
-  return item.type === JSON_TYPES.TEXT || item.type === JSON_TYPES.HIGHLIGHTED_TEXT || item.type === JSON_TYPES.BOLD_TEXT || item.type === JSON_TYPES.COLOR_TEXT || item.type === JSON_TYPES.OPERATOR || item.type === JSON_TYPES.SPACE || item.type === JSON_TYPES.GROUP;
-}
-function groupLineItems(items) {
-  const groups = [];
-  let currentTextGroup = [];
-  for (const item of items) {
-    if (isTextItem(item)) {
-      currentTextGroup.push(item);
-    } else {
-      if (currentTextGroup.length > 0) {
-        const hasArabic = currentTextGroup.some(itemContainsArabic);
-        const hasLatin = currentTextGroup.some(itemContainsLatin);
-        const shouldApplyRTL = hasArabic && !hasLatin;
-        groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
-        currentTextGroup = [];
-      }
-      groups.push({ items: [item], isTextGroup: false, hasArabic: false, hasLatin: false, shouldApplyRTL: false });
-    }
-  }
-  if (currentTextGroup.length > 0) {
-    const hasArabic = currentTextGroup.some(itemContainsArabic);
-    const hasLatin = currentTextGroup.some(itemContainsLatin);
-    const shouldApplyRTL = hasArabic && !hasLatin;
-    groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
-  }
-  return groups;
-}
-function placeTableCells(rows, cols) {
-  const placements = /* @__PURE__ */ new Map();
-  const occupied = rows.map(() => []);
-  const totalRows = rows.length;
-  rows.forEach((row, rowIndex) => {
-    const taken = occupied[rowIndex] ?? [];
-    let col = 0;
-    for (const cell of row.cells) {
-      while (taken[col]) col++;
-      const colspan = cell.colspan || 1;
-      const rowspan = Math.min(cell.rowspan || 1, totalRows - rowIndex);
-      for (let r = rowIndex; r < rowIndex + rowspan; r++) {
-        const line = occupied[r];
-        if (!line) continue;
-        for (let c = col; c < col + colspan; c++) line[c] = true;
-      }
-      placements.set(cell.id, {
-        column: col + 1,
-        row: rowIndex + 1,
-        colspan,
-        rowspan,
-        isLastColumn: col + colspan >= cols,
-        isLastRow: rowIndex + rowspan >= totalRows
-      });
-      col += colspan;
-    }
-  });
-  return placements;
-}
 const toValidationStatus = (v) => v === true ? "correct" : v === false ? "incorrect" : null;
 const isNumericText = (value) => /^[\d.,\s]+$/.test(value);
 const numberClass = (value) => isNumericText(value) ? "text-item-number" : "";
@@ -22174,9 +22809,11 @@ function ChameleonHand({ className }) {
   );
 }
 const TUTORIAL_HAND_TIP = { x: 56 / 75, y: 22 / 78 };
+const centerOf = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
 const CYCLE_MS = 1400;
 const PRESS_AT_MS = 650;
 const PRESS_HOLD_MS = 220;
+const MAX_SPEECH_MS = 3e4;
 const HOLE_PAD = 10;
 const HOLE_RADIUS = 18;
 const HAND_W = 72;
@@ -22194,7 +22831,6 @@ function toRect(t) {
   if (r.width <= 0 || r.height <= 0) return null;
   return { x: Math.round(r.x), y: Math.round(r.y), width: Math.round(r.width), height: Math.round(r.height) };
 }
-const centerOf = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
 const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
   const { steps } = tutorial;
   const [stepIndex, setStepIndex] = React.useState(
@@ -22270,7 +22906,9 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
   const [completedStep, setCompletedStep] = React.useState(null);
   React.useEffect(() => {
     optionsRef.current.onStep?.(stepIndex, step.id);
-    const speech = Promise.resolve(optionsRef.current.onSpeak?.(step.id, textRef.current)).catch(() => {
+    const speech = new Promise((resolve2) => {
+      resolve2(optionsRef.current.onSpeak?.(step.id, textRef.current));
+    }).catch(() => {
     });
     if (!autoAdvance) return;
     const duration = Math.max(2, step.taps(ctxRef.current).length) * CYCLE_MS;
@@ -22279,7 +22917,11 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     const animation = new Promise((resolve2) => {
       timer = setTimeout(resolve2, duration);
     });
-    void Promise.all([speech, animation]).then(() => {
+    let speechTimer;
+    const speechLimit = new Promise((resolve2) => {
+      speechTimer = setTimeout(resolve2, MAX_SPEECH_MS);
+    });
+    void Promise.all([Promise.race([speech, speechLimit]), animation]).then(() => {
       if (cancelled) return;
       if (isLast) {
         if (showBubble) setCompletedStep(stepIndex);
@@ -22289,6 +22931,7 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     return () => {
       cancelled = true;
       clearTimeout(timer);
+      clearTimeout(speechTimer);
     };
   }, [stepIndex, step, autoAdvance, isLast, showBubble]);
   const showNext = !autoAdvance || isLast && completedStep === stepIndex;
@@ -22444,7 +23087,7 @@ function key(ctx, k) {
 }
 function answerBox(ctx) {
   const inputs = getTextInputs(ctx.root);
-  return inputs.find(canTakeInput) ?? inputs[0] ?? null;
+  return inputs.find(canTakeInput) ?? inputs.find(canAdvanceTo) ?? null;
 }
 function answerDigits(ctx) {
   const id = answerBox(ctx)?.id.replace(/-input$/, "");
@@ -22481,7 +23124,6 @@ const StandInFill = ({ box, slots, filled, digits }) => /* @__PURE__ */ jsxRunti
     children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: i < filled ? "met-tutorial-fill-dot" : "met-tutorial-fill-slot", children: i < filled ? digits?.[i] ?? "●" : "_" }, i))
   }
 );
-const center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
 const HopScene = ({ ctx, spotlight, taps, tapCount }) => {
   const box = spotlight[1];
   if (!box) return null;
@@ -22491,8 +23133,8 @@ const HopScene = ({ ctx, spotlight, taps, tapCount }) => {
   const from = tapCount > 0 ? taps[(tapCount - 1) % taps.length] : null;
   let arc = null;
   if (from) {
-    const a = center(from);
-    const b = center(box);
+    const a = centerOf(from);
+    const b = centerOf(box);
     const lift = Math.max(40, Math.hypot(b.x - a.x, b.y - a.y) * 0.35);
     arc = `M ${a.x} ${a.y} Q ${(a.x + b.x) / 2} ${Math.min(a.y, b.y) - lift} ${b.x} ${b.y}`;
   }
@@ -22555,29 +23197,72 @@ const WIDGET_TUTORIALS = [keypadTutorial];
 function findWidgetTutorial(json) {
   return WIDGET_TUTORIALS.find((t) => t.appliesTo(json)) ?? null;
 }
+function hasMatchingLength(value, expected) {
+  return (typeof expected === "string" || typeof expected === "number") && (typeof value === "string" || typeof value === "number") && String(value).length > 0 && String(value).length === String(expected).length;
+}
+function isSelectionGroups(value) {
+  return Array.isArray(value) && value.every(
+    (group) => Array.isArray(group) && group.length > 0 && group.every((id) => typeof id === "string")
+  );
+}
+function hasMatchingSelectionCount(value, expected, itemIds, pairsOnly) {
+  if (!isSelectionGroups(value) || !isSelectionGroups(expected)) return false;
+  if (pairsOnly && (value.some((group) => group.length !== 2) || expected.some((group) => group.length !== 2)))
+    return false;
+  const selected = value.flat();
+  const requiredCount = expected.flat().length;
+  const declared = new Set(itemIds);
+  return requiredCount > 0 && selected.length === requiredCount && new Set(selected).size === selected.length && selected.every((id) => declared.has(id));
+}
 function getAnswerLengthCompletion(json, answerable, values, touched) {
   const fields = [];
+  const addTypedField = (id, widgetId, expected) => {
+    const value = values[id];
+    const hasKnownLength = typeof expected === "string" || typeof expected === "number";
+    const hasScalarValue = typeof value === "string" || typeof value === "number";
+    fields.push({
+      id,
+      widgetId,
+      matches: hasMatchingLength(value, expected),
+      // Unknown answer lengths use normal completion; known ones use grading's normalization.
+      guideMatches: !hasKnownLength || touched.has(widgetId) && hasScalarValue && hasMatchingLength(normalize(value), normalize(expected))
+    });
+  };
   for (const widgetId of answerable) {
     const widget = json.widgets[widgetId];
     const expected = json.validation?.answers?.[widgetId];
     if (widget?.type === JSON_TYPES.INLINE_INPUT && !widget.disabled) {
-      fields.push({ id: widgetId, widgetId, expected });
+      addTypedField(widgetId, widgetId, expected);
     } else if (widget?.type === JSON_TYPES.FRACTION) {
       const parts = typeof expected === "string" ? expected.split("/") : [];
       const validParts = parts.length === 2;
       if (widget.numerator === null) {
-        fields.push({ id: getFractionKey(widgetId, "num"), widgetId, expected: validParts ? parts[0] : void 0 });
+        const id = getFractionKey(widgetId, "num");
+        addTypedField(id, widgetId, validParts ? parts[0] : void 0);
       }
       if (widget.denominator === null) {
-        fields.push({ id: getFractionKey(widgetId, "den"), widgetId, expected: validParts ? parts[1] : void 0 });
+        const id = getFractionKey(widgetId, "den");
+        addTypedField(id, widgetId, validParts ? parts[1] : void 0);
       }
+    } else if (widget?.type === JSON_TYPES.MATCHER || widget?.type === JSON_TYPES.PAIR_MATCHER) {
+      const itemIds = widget.type === JSON_TYPES.MATCHER ? widget.rows.flatMap((row) => row.items.map((item) => item.itemId)) : widget.groups.flatMap((group) => group.map((item) => item.itemId));
+      const matches = hasMatchingSelectionCount(
+        values[widgetId],
+        expected,
+        itemIds,
+        widget.type === JSON_TYPES.PAIR_MATCHER
+      );
+      fields.push({
+        id: widgetId,
+        widgetId,
+        matches,
+        guideMatches: expected == null || touched.has(widgetId) && matches
+      });
     }
   }
-  const answerLengthMatchedIds = fields.filter(({ id, widgetId, expected }) => {
-    const value = values[id];
-    return touched.has(widgetId) && (typeof expected === "string" || typeof expected === "number") && (typeof value === "string" || typeof value === "number") && String(value).length > 0 && String(value).length === String(expected).length;
-  }).map(({ id }) => id);
+  const answerLengthMatchedIds = fields.filter(({ widgetId, matches }) => touched.has(widgetId) && matches).map(({ id }) => id);
   return {
+    areSubmitGuideCountsMatched: fields.every(({ guideMatches }) => guideMatches),
     isAnswerLengthMatched: fields.length > 0 && answerLengthMatchedIds.length === fields.length,
     answerLengthMatchedIds
   };
@@ -22603,12 +23288,9 @@ function buildInitialValues(json) {
     if (widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.PAIR_MATCHER) {
       initial[id] = [];
     } else if (widget.type === JSON_TYPES.GRID_SYMMETRY) {
-      initial[id] = widget.cells.filter((cell) => isCellInInteractiveArea(
-        cell,
-        widget.rows,
-        widget.cols,
-        widget.interactiveArea
-      ));
+      initial[id] = widget.cells.filter(
+        (cell) => isCellInInteractiveArea(cell, widget.rows, widget.cols, widget.interactiveArea)
+      );
     } else if (widget.type === JSON_TYPES.CHART_BAR || widget.type === JSON_TYPES.CHART_PICTO) {
       initial[id] = String(widget.value);
     } else if (widget.type === JSON_TYPES.GEOMETRY) {
@@ -22647,8 +23329,10 @@ function buildRevealedValues(json) {
     const widget = json.widgets[widgetId];
     if (widget?.type === JSON_TYPES.FRACTION && typeof expected === "string") {
       const [num, den] = expected.split("/", 2);
-      if (widget.numerator === null && num !== void 0) revealed[getFractionKey(widgetId, "num")] = num;
-      if (widget.denominator === null && den !== void 0) revealed[getFractionKey(widgetId, "den")] = den;
+      if (widget.numerator === null && num !== void 0)
+        revealed[getFractionKey(widgetId, "num")] = num;
+      if (widget.denominator === null && den !== void 0)
+        revealed[getFractionKey(widgetId, "den")] = den;
       continue;
     }
     revealed[widgetId] = typeof expected === "number" ? String(expected) : expected;
@@ -22680,449 +23364,571 @@ function buildRevealedDropSources(json, revealedValues) {
   const pool = [];
   const bank = json.widgets[DRAG_OPTIONS_WIDGET_ID];
   if (bank?.type === JSON_TYPES.DRAG_OPTIONS) {
-    bank.options.forEach((value, idx) => pool.push({ optionId: `drag-option-${idx}`, value: String(value) }));
+    bank.options.forEach(
+      (value, idx) => pool.push({ optionId: `drag-option-${idx}`, value: String(value) })
+    );
   }
   for (const [widgetId, widget] of Object.entries(json.widgets)) {
-    if (widget.type === JSON_TYPES.INLINE_DRAG_OPTION) pool.push({ optionId: widgetId, value: widget.value });
+    if (widget.type === JSON_TYPES.INLINE_DRAG_OPTION)
+      pool.push({ optionId: widgetId, value: widget.value });
   }
   const sources = /* @__PURE__ */ new Map();
   if (pool.length === 0) return sources;
   const used = /* @__PURE__ */ new Set();
   for (const [inputId, value] of Object.entries(revealedValues)) {
     if (typeof value !== "string" || value === "") continue;
-    const match = pool.find((o) => !used.has(o.optionId) && normalize(o.value) === normalize(value));
+    if (json.widgets[inputId]?.type !== JSON_TYPES.INLINE_INPUT && !isFractionKey(inputId))
+      continue;
+    const match = pool.find(
+      (o) => !used.has(o.optionId) && normalize(o.value) === normalize(value)
+    );
     if (!match) continue;
     used.add(match.optionId);
     sources.set(inputId, match.optionId);
   }
   return sources;
 }
-const ExerciseRenderer = React.forwardRef(({
-  json: suppliedJson,
-  onSubmit,
-  onChange,
-  showSubmitButton = false,
-  className = "",
-  soundEnabled = true,
-  sounds,
-  theme
-}, ref) => {
-  const json = React.useMemo(() => withDisabledPrefilledInputs(suppliedJson), [suppliedJson]);
-  const initialValuesSignature = React.useMemo(() => buildInitialValuesSignature(json), [json]);
-  const [values, setValues] = React.useState(() => buildInitialValues(json));
-  const valuesRef = React.useRef(values);
-  valuesRef.current = values;
-  const touchedRef = React.useRef(/* @__PURE__ */ new Set());
-  const [loadedValuesSignature, setLoadedValuesSignature] = React.useState(initialValuesSignature);
-  const [droppedSources, setDroppedSources] = React.useState(/* @__PURE__ */ new Map());
-  const [focusedInputId, setFocusedInputId] = React.useState(null);
-  const [validationDetails, setValidationDetails] = React.useState(null);
-  const rootRef = React.useRef(null);
-  const [resetKey, setResetKey] = React.useState(0);
-  const [revealed, setRevealed] = React.useState(false);
-  const tutorial = React.useMemo(() => findWidgetTutorial(json), [json]);
-  const [tutorialRun, setTutorialRun] = React.useState(null);
-  const themeStyle = React.useMemo(() => {
-    const style = {};
-    if (theme?.correct) style["--exercise-correct"] = theme.correct;
-    if (theme?.incorrect) style["--exercise-incorrect"] = theme.incorrect;
-    return Object.keys(style).length > 0 ? style : void 0;
-  }, [theme?.correct, theme?.incorrect]);
-  React.useEffect(() => {
-    warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
-  }, [theme?.correct, theme?.incorrect]);
-  const playSound = useSoundPlayer(soundEnabled, sounds);
-  const externallyLocked = useExerciseLocked();
-  React.useLayoutEffect(() => {
-    if (loadedValuesSignature === initialValuesSignature) return;
-    setValues(buildInitialValues(json));
-    setDroppedSources(/* @__PURE__ */ new Map());
-    setFocusedInputId(null);
-    setValidationDetails(null);
-    setResetKey((k) => k + 1);
-    setLoadedValuesSignature(initialValuesSignature);
-    touchedRef.current = /* @__PURE__ */ new Set();
-    setTutorialRun(null);
-  }, [json, initialValuesSignature, loadedValuesSignature]);
-  const locked = validationDetails !== null || externallyLocked;
-  const lastResultRef = React.useRef(null);
-  const runSubmit = () => {
-    if (locked) return lastResultRef.current ?? validate(json, values);
-    const result = validate(json, values);
-    playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
-    const details = { ...result.details };
-    const slotValidation = (id, raw, expected) => ({
-      widgetId: id,
-      userValue: typeof raw === "string" ? raw : void 0,
-      isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
-    });
-    for (const [widgetId, widget] of Object.entries(json.widgets)) {
-      if (widget.type !== JSON_TYPES.FRACTION) continue;
-      if (!(widgetId in details)) continue;
-      const answer = json.validation?.answers?.[widgetId];
-      if (!answer) continue;
-      const [expectedNum, expectedDen] = answer.split("/", 2);
-      if (!expectedNum || !expectedDen) continue;
-      if (details[widgetId]?.isCorrect) {
-        if (widget.numerator === null) details[`${widgetId}__num`] = { widgetId: `${widgetId}__num`, userValue: void 0, isCorrect: true };
-        if (widget.denominator === null) details[`${widgetId}__den`] = { widgetId: `${widgetId}__den`, userValue: void 0, isCorrect: true };
-      } else {
-        if (widget.numerator === null) details[`${widgetId}__num`] = slotValidation(`${widgetId}__num`, values[`${widgetId}__num`], expectedNum);
-        if (widget.denominator === null) details[`${widgetId}__den`] = slotValidation(`${widgetId}__den`, values[`${widgetId}__den`], expectedDen);
-      }
-    }
-    setValidationDetails(details);
-    onSubmit?.(values);
-    lastResultRef.current = result;
-    return result;
-  };
-  React.useImperativeHandle(ref, () => ({
-    submit: runSubmit,
-    getValues: () => values,
-    getCompletion: () => {
-      const answerable = getAnswerableInputs(json);
-      const missingSet = new Set(getMissingInputs(json, valuesRef.current));
-      for (const id of answerable) {
-        if (!touchedRef.current.has(id)) missingSet.add(id);
-      }
-      const missing = [...missingSet];
-      const filledIds = answerable.filter((id) => !missingSet.has(id));
-      return {
-        total: answerable.length,
-        filled: filledIds.length,
-        missing,
-        filledIds,
-        isComplete: answerable.length > 0 && missing.length === 0,
-        isAnyFilled: filledIds.length > 0,
-        ...getAnswerLengthCompletion(json, answerable, valuesRef.current, touchedRef.current)
-      };
-    },
-    reset: () => {
-      const initial = buildInitialValues(json);
-      valuesRef.current = initial;
-      setValues(initial);
+const ExerciseRenderer = React.forwardRef(
+  ({
+    json: suppliedJson,
+    onSubmit,
+    onChange,
+    showSubmitButton = false,
+    className = "",
+    soundEnabled = true,
+    sounds,
+    theme
+  }, ref) => {
+    const json = React.useMemo(() => withDisabledPrefilledInputs(suppliedJson), [suppliedJson]);
+    const initialValuesSignature = React.useMemo(() => buildInitialValuesSignature(json), [json]);
+    const [values, setValues] = React.useState(
+      () => buildInitialValues(json)
+    );
+    const valuesRef = React.useRef(values);
+    valuesRef.current = values;
+    const touchedRef = React.useRef(/* @__PURE__ */ new Set());
+    const [loadedValuesSignature, setLoadedValuesSignature] = React.useState(initialValuesSignature);
+    const [droppedSources, setDroppedSources] = React.useState(/* @__PURE__ */ new Map());
+    const [focusedInputId, setFocusedInputId] = React.useState(null);
+    const [validationDetails, setValidationDetails] = React.useState(null);
+    const rootRef = React.useRef(null);
+    const [resetKey, setResetKey] = React.useState(0);
+    const [revealed, setRevealed] = React.useState(false);
+    const tutorial = React.useMemo(() => findWidgetTutorial(json), [json]);
+    const [tutorialRun, setTutorialRun] = React.useState(null);
+    const themeStyle = React.useMemo(() => {
+      const style = {};
+      if (theme?.correct) style["--exercise-correct"] = theme.correct;
+      if (theme?.incorrect) style["--exercise-incorrect"] = theme.incorrect;
+      return Object.keys(style).length > 0 ? style : void 0;
+    }, [theme?.correct, theme?.incorrect]);
+    React.useEffect(() => {
+      warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
+    }, [theme?.correct, theme?.incorrect]);
+    const playSound = useSoundPlayer(soundEnabled, sounds);
+    const externallyLocked = useExerciseLocked();
+    React.useLayoutEffect(() => {
+      if (loadedValuesSignature === initialValuesSignature) return;
+      setValues(buildInitialValues(json));
       setDroppedSources(/* @__PURE__ */ new Map());
       setFocusedInputId(null);
       setValidationDetails(null);
       setResetKey((k) => k + 1);
-      setRevealed(false);
       setLoadedValuesSignature(initialValuesSignature);
       touchedRef.current = /* @__PURE__ */ new Set();
-    },
-    revealAnswers: () => {
-      const revealedValues = buildRevealedValues(json);
-      if (Object.keys(revealedValues).length === 0) return;
-      playSound("answer-reveal");
-      const details = {};
-      for (const [widgetId, userValue] of Object.entries(revealedValues)) {
-        const widget = json.widgets[widgetId];
-        if (widget?.type === JSON_TYPES.GEOMETRY) {
-          const { isCorrect, result } = checkGeometryWidget(widget.json, userValue, widgetId);
-          details[widgetId] = { widgetId, userValue, isCorrect, geometryFeedback: result };
+      setTutorialRun(null);
+    }, [json, initialValuesSignature, loadedValuesSignature]);
+    const locked = validationDetails !== null || externallyLocked;
+    const lastResultRef = React.useRef(null);
+    const runSubmit = () => {
+      if (locked) return lastResultRef.current ?? validate(json, values);
+      const result = validate(json, values);
+      playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
+      const details = { ...result.details };
+      const slotValidation = (id, raw, expected) => ({
+        widgetId: id,
+        userValue: typeof raw === "string" ? raw : void 0,
+        isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
+      });
+      for (const [widgetId, widget] of Object.entries(json.widgets)) {
+        if (widget.type !== JSON_TYPES.FRACTION) continue;
+        if (!(widgetId in details)) continue;
+        const answer = json.validation?.answers?.[widgetId];
+        if (!answer) continue;
+        const [expectedNum, expectedDen] = answer.split("/", 2);
+        if (!expectedNum || !expectedDen) continue;
+        if (details[widgetId]?.isCorrect) {
+          if (widget.numerator === null)
+            details[`${widgetId}__num`] = {
+              widgetId: `${widgetId}__num`,
+              userValue: void 0,
+              isCorrect: true
+            };
+          if (widget.denominator === null)
+            details[`${widgetId}__den`] = {
+              widgetId: `${widgetId}__den`,
+              userValue: void 0,
+              isCorrect: true
+            };
         } else {
-          details[widgetId] = { widgetId, userValue, isCorrect: true };
+          if (widget.numerator === null)
+            details[`${widgetId}__num`] = slotValidation(
+              `${widgetId}__num`,
+              values[`${widgetId}__num`],
+              expectedNum
+            );
+          if (widget.denominator === null)
+            details[`${widgetId}__den`] = slotValidation(
+              `${widgetId}__den`,
+              values[`${widgetId}__den`],
+              expectedDen
+            );
         }
+      }
+      setValidationDetails(details);
+      onSubmit?.(values);
+      lastResultRef.current = result;
+      return result;
+    };
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        submit: runSubmit,
+        getValues: () => values,
+        getCompletion: () => {
+          const answerable = getAnswerableInputs(json);
+          const missingSet = new Set(getMissingInputs(json, valuesRef.current));
+          for (const id of answerable) {
+            if (!touchedRef.current.has(id)) missingSet.add(id);
+          }
+          const missing = [...missingSet];
+          const filledIds = answerable.filter((id) => !missingSet.has(id));
+          const isComplete = answerable.length > 0 && missing.length === 0;
+          const { areSubmitGuideCountsMatched, ...answerLengthCompletion } = getAnswerLengthCompletion(json, answerable, valuesRef.current, touchedRef.current);
+          return {
+            total: answerable.length,
+            filled: filledIds.length,
+            missing,
+            filledIds,
+            isComplete,
+            isSubmitGuideReady: isComplete && areSubmitGuideCountsMatched,
+            isAnyFilled: filledIds.length > 0,
+            ...answerLengthCompletion
+          };
+        },
+        reset: () => {
+          const initial = buildInitialValues(json);
+          valuesRef.current = initial;
+          setValues(initial);
+          setDroppedSources(/* @__PURE__ */ new Map());
+          setFocusedInputId(null);
+          setValidationDetails(null);
+          setResetKey((k) => k + 1);
+          setRevealed(false);
+          setLoadedValuesSignature(initialValuesSignature);
+          touchedRef.current = /* @__PURE__ */ new Set();
+        },
+        revealAnswers: () => {
+          const revealedValues = buildRevealedValues(json);
+          if (Object.keys(revealedValues).length === 0) return;
+          playSound("answer-reveal");
+          const details = {};
+          for (const [widgetId, userValue] of Object.entries(revealedValues)) {
+            const widget = json.widgets[widgetId];
+            if (widget?.type === JSON_TYPES.GEOMETRY) {
+              const { isCorrect, result } = checkGeometryWidget(widget.json, userValue, widgetId);
+              details[widgetId] = { widgetId, userValue, isCorrect, geometryFeedback: result };
+            } else {
+              details[widgetId] = { widgetId, userValue, isCorrect: true };
+            }
+            touchedRef.current.add(toBaseId(widgetId));
+          }
+          const next = { ...valuesRef.current, ...revealedValues };
+          valuesRef.current = next;
+          setValues(next);
+          setDroppedSources(buildRevealedDropSources(json, revealedValues));
+          setValidationDetails(details);
+          setRevealed(true);
+          setResetKey((k) => k + 1);
+        },
+        focusFirstInput: () => {
+          const container = rootRef.current ?? document.querySelector(".math-exercise-renderer");
+          if (!container) return;
+          const candidates = getTextInputs(container);
+          const target = candidates.find(canTakeInput) ?? // A locked exercise is read-only on purpose — nothing to focus until
+          // reset(). Unlocked, a read-only field is not the lock, so refusing to
+          // focus it would strand the student with no caret; take the first one
+          // that isn't disabled or a chip's invisible SlotSizer.
+          (locked ? void 0 : candidates.find(canAdvanceTo));
+          target?.focus();
+        },
+        hasTutorial: () => tutorial !== null,
+        tutorialId: () => tutorial?.id ?? null,
+        startTutorial: (options = {}) => {
+          if (!tutorial || !rootRef.current) return false;
+          setTutorialRun((prev) => ({ options, run: (prev?.run ?? 0) + 1 }));
+          return true;
+        },
+        stopTutorial: () => setTutorialRun(null)
+      }),
+      [json, values, onSubmit, playSound, locked, initialValuesSignature, tutorial]
+    );
+    const focusNextInput = (currentKey) => {
+      if (!rootRef.current) return;
+      findNextInput(rootRef.current, currentKey)?.focus();
+    };
+    const handleChange = (widgetId, value, fromDrop = false, sourceOptionId, silent = false) => {
+      if (locked) return;
+      if (!silent) {
+        setRevealed(false);
         touchedRef.current.add(toBaseId(widgetId));
       }
-      const next = { ...valuesRef.current, ...revealedValues };
+      const previous = valuesRef.current[widgetId];
+      const next = { ...valuesRef.current, [widgetId]: value };
       valuesRef.current = next;
       setValues(next);
-      setDroppedSources(buildRevealedDropSources(json, revealedValues));
-      setValidationDetails(details);
-      setRevealed(true);
-      setResetKey((k) => k + 1);
-    },
-    focusFirstInput: () => {
-      const container = rootRef.current ?? document.querySelector(".math-exercise-renderer");
-      if (!container) return;
-      const candidates = getTextInputs(container);
-      const target = candidates.find(canTakeInput) ?? (locked ? void 0 : candidates.find(canAdvanceTo));
-      target?.focus();
-    },
-    hasTutorial: () => tutorial !== null,
-    tutorialId: () => tutorial?.id ?? null,
-    startTutorial: (options = {}) => {
-      if (!tutorial || !rootRef.current) return false;
-      setTutorialRun((prev) => ({ options, run: (prev?.run ?? 0) + 1 }));
-      return true;
-    },
-    stopTutorial: () => setTutorialRun(null)
-  }), [json, values, onSubmit, playSound, locked, initialValuesSignature, tutorial]);
-  const focusNextInput = (currentKey) => {
-    if (!rootRef.current) return;
-    findNextInput(rootRef.current, currentKey)?.focus();
-  };
-  const handleChange = (widgetId, value, fromDrop = false, sourceOptionId, silent = false) => {
-    if (locked) return;
-    if (!silent) {
-      setRevealed(false);
-      touchedRef.current.add(toBaseId(widgetId));
-    }
-    const previous = valuesRef.current[widgetId];
-    const next = { ...valuesRef.current, [widgetId]: value };
-    valuesRef.current = next;
-    setValues(next);
-    setDroppedSources((prev) => {
-      const next2 = new Map(prev);
-      if (fromDrop && typeof value === "string" && value !== "" && sourceOptionId) {
-        next2.set(widgetId, sourceOptionId);
-      } else {
-        next2.delete(widgetId);
-      }
-      return next2;
-    });
-    onChange?.(next);
-    if (!fromDrop && !silent && hasJustFilledBox(json, widgetId, previous, value)) {
-      focusNextInput(widgetId);
-    }
-  };
-  const handleSubmit = () => {
-    runSubmit();
-  };
-  const lineGroups = React.useMemo(() => {
-    const isRTLInlineWidget = (item) => {
-      if (item.type === JSON_TYPES.WIDGET_REF) {
-        const widget = json.widgets[item.widgetId];
-        return !!widget && RTL_INLINE_WIDGET_TYPES.has(widget.type);
+      setDroppedSources((prev) => {
+        const next2 = new Map(prev);
+        if (fromDrop && typeof value === "string" && value !== "" && sourceOptionId) {
+          next2.set(widgetId, sourceOptionId);
+        } else {
+          next2.delete(widgetId);
+        }
+        return next2;
+      });
+      onChange?.(next);
+      if (!fromDrop && !silent && hasJustFilledBox(json, widgetId, previous, value)) {
+        focusNextInput(widgetId);
       }
-      return RTL_INLINE_WIDGET_TYPES.has(item.type);
     };
-    const groups = [];
-    let currentGroup = [];
-    for (const item of json.layout) {
-      if (item.type === JSON_TYPES.QUESTION_TEXT) {
-        groups.push({
-          items: [item],
-          hasArabic: itemContainsArabic(item),
-          hasRTLInlineWidget: false,
-          subGroups: []
-          // Question text doesn't need sub-grouping
-        });
-        continue;
-      }
-      if (item.type === JSON_TYPES.TABLE) {
-        if (currentGroup.length > 0) {
-          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-          const subGroups = groupLineItems(currentGroup);
-          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-          currentGroup = [];
-        }
-        groups.push({
-          items: [item],
-          hasArabic: false,
-          hasRTLInlineWidget: false,
-          subGroups: []
-        });
-        continue;
-      }
-      if (item.type === JSON_TYPES.NUMBER_LINE) {
-        if (currentGroup.length > 0) {
-          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-          const subGroups = groupLineItems(currentGroup);
-          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-          currentGroup = [];
-        }
-        groups.push({
-          items: [item],
-          hasArabic: false,
-          hasRTLInlineWidget: false,
-          subGroups: []
-        });
-        continue;
-      }
-      if (item.type === JSON_TYPES.VERTICAL_OPERATION) {
-        if (currentGroup.length > 0) {
-          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-          const subGroups = groupLineItems(currentGroup);
-          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-          currentGroup = [];
-        }
-        groups.push({
-          items: [item],
-          hasArabic: false,
-          hasRTLInlineWidget: false,
-          subGroups: []
-        });
-        continue;
-      }
-      if (item.type === JSON_TYPES.CHART) {
-        if (currentGroup.length > 0) {
-          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-          const subGroups = groupLineItems(currentGroup);
-          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-          currentGroup = [];
-        }
-        groups.push({
-          items: [item],
-          hasArabic: false,
-          hasRTLInlineWidget: false,
-          subGroups: []
-        });
-        continue;
-      }
-      if (item.type === JSON_TYPES.LINEBREAK) {
-        if (currentGroup.length > 0) {
-          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-          const subGroups = groupLineItems(currentGroup);
-          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-          currentGroup = [];
-        }
-      } else {
-        currentGroup.push(item);
-      }
-    }
-    if (currentGroup.length > 0) {
-      const hasArabic = currentGroup.some((item) => itemContainsArabic(item));
-      const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
-      const subGroups = groupLineItems(currentGroup);
-      groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
-    }
-    return groups;
-  }, [json.layout, json.widgets]);
-  const droppedInputs = React.useMemo(() => new Set(droppedSources.keys()), [droppedSources]);
-  const dragOptionsWidget = json.widgets["_drag_options"];
-  const rulerWidget = json.widgets[RULER_WIDGET_ID];
-  const protractorWidget = json.widgets[PROTRACTOR_WIDGET_ID];
-  const setSquareWidget = json.widgets[SET_SQUARE_WIDGET_ID];
-  const numericKeypadWidget = json.widgets[NUMERIC_KEYPAD_WIDGET_ID];
-  const { tools, toolsMinHeight } = React.useMemo(() => {
-    const list = [];
-    const PAD = 12;
-    const STAGGER = 24;
-    let maxH = 0;
-    const getSize = (w) => typeof w === "object" && w !== null && "size" in w && typeof w.size === "number" ? w.size : 1;
-    const add2 = (id, type, width) => {
-      const offset = list.length * STAGGER;
-      list.push({ id, type, width, initialPosition: { x: PAD + offset, y: PAD + offset } });
-      const extra = type === "set-square" ? FLIP_BTN_EXTRA : 0;
-      const h = PAD + Math.ceil(width * (TOOL_ASPECT_RATIO[type] ?? 0)) + extra + PAD;
-      if (h > maxH) maxH = h;
+    const handleSubmit = () => {
+      runSubmit();
     };
-    if (rulerWidget) add2("ruler-1", "ruler", Math.round(getSize(rulerWidget) * 240));
-    if (protractorWidget) add2("protractor-1", "protractor", Math.round(getSize(protractorWidget) * 180));
-    if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
-    return { tools: list, toolsMinHeight: maxH };
-  }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxRuntime.jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsxRuntime.jsx(DragBankContext.Provider, { value: json.widgets[DRAG_OPTIONS_WIDGET_ID] !== void 0, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    const lineGroups = React.useMemo(() => {
+      const isRTLInlineWidget = (item) => {
+        if (item.type === JSON_TYPES.WIDGET_REF) {
+          const widget = json.widgets[item.widgetId];
+          return !!widget && RTL_INLINE_WIDGET_TYPES.has(widget.type);
+        }
+        return RTL_INLINE_WIDGET_TYPES.has(item.type);
+      };
+      const groups = [];
+      let currentGroup = [];
+      for (const item of json.layout) {
+        if (item.type === JSON_TYPES.QUESTION_TEXT) {
+          groups.push({
+            items: [item],
+            hasArabic: itemContainsArabic(item),
+            hasRTLInlineWidget: false,
+            subGroups: []
+            // Question text doesn't need sub-grouping
+          });
+          continue;
+        }
+        if (item.type === JSON_TYPES.TABLE) {
+          if (currentGroup.length > 0) {
+            const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+            const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+            const subGroups = groupLineItems(currentGroup);
+            groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+            currentGroup = [];
+          }
+          groups.push({
+            items: [item],
+            hasArabic: false,
+            hasRTLInlineWidget: false,
+            subGroups: []
+          });
+          continue;
+        }
+        if (item.type === JSON_TYPES.NUMBER_LINE) {
+          if (currentGroup.length > 0) {
+            const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+            const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+            const subGroups = groupLineItems(currentGroup);
+            groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+            currentGroup = [];
+          }
+          groups.push({
+            items: [item],
+            hasArabic: false,
+            hasRTLInlineWidget: false,
+            subGroups: []
+          });
+          continue;
+        }
+        if (item.type === JSON_TYPES.VERTICAL_OPERATION) {
+          if (currentGroup.length > 0) {
+            const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+            const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+            const subGroups = groupLineItems(currentGroup);
+            groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+            currentGroup = [];
+          }
+          groups.push({
+            items: [item],
+            hasArabic: false,
+            hasRTLInlineWidget: false,
+            subGroups: []
+          });
+          continue;
+        }
+        if (item.type === JSON_TYPES.CHART) {
+          if (currentGroup.length > 0) {
+            const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+            const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+            const subGroups = groupLineItems(currentGroup);
+            groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+            currentGroup = [];
+          }
+          groups.push({
+            items: [item],
+            hasArabic: false,
+            hasRTLInlineWidget: false,
+            subGroups: []
+          });
+          continue;
+        }
+        if (item.type === JSON_TYPES.LINEBREAK) {
+          if (currentGroup.length > 0) {
+            const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+            const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+            const subGroups = groupLineItems(currentGroup);
+            groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+            currentGroup = [];
+          }
+        } else {
+          currentGroup.push(item);
+        }
+      }
+      if (currentGroup.length > 0) {
+        const hasArabic = currentGroup.some((item) => itemContainsArabic(item));
+        const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+        const subGroups = groupLineItems(currentGroup);
+        groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+      }
+      return groups;
+    }, [json.layout, json.widgets]);
+    const droppedInputs = React.useMemo(() => new Set(droppedSources.keys()), [droppedSources]);
+    const dragOptionsWidget = json.widgets["_drag_options"];
+    const draggableOptionsWidget = json.widgets[DRAGGABLE_OPTIONS_WIDGET_ID];
+    const rulerWidget = json.widgets[RULER_WIDGET_ID];
+    const protractorWidget = json.widgets[PROTRACTOR_WIDGET_ID];
+    const setSquareWidget = json.widgets[SET_SQUARE_WIDGET_ID];
+    const numericKeypadWidget = json.widgets[NUMERIC_KEYPAD_WIDGET_ID];
+    const { tools, toolsMinHeight } = React.useMemo(() => {
+      const list = [];
+      const PAD = 12;
+      const STAGGER = 24;
+      let maxH = 0;
+      const getSize = (w) => typeof w === "object" && w !== null && "size" in w && typeof w.size === "number" ? w.size : 1;
+      const add2 = (id, type, width) => {
+        const offset = list.length * STAGGER;
+        list.push({ id, type, width, initialPosition: { x: PAD + offset, y: PAD + offset } });
+        const extra = type === "set-square" ? FLIP_BTN_EXTRA : 0;
+        const h = PAD + Math.ceil(width * (TOOL_ASPECT_RATIO[type] ?? 0)) + extra + PAD;
+        if (h > maxH) maxH = h;
+      };
+      if (rulerWidget) add2("ruler-1", "ruler", Math.round(getSize(rulerWidget) * 240));
+      if (protractorWidget)
+        add2("protractor-1", "protractor", Math.round(getSize(protractorWidget) * 180));
+      if (setSquareWidget)
+        add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
+      return { tools: list, toolsMinHeight: maxH };
+    }, [rulerWidget, protractorWidget, setSquareWidget]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ExerciseDndProvider,
       {
-        className: `exercise-layout-container ${numericKeypadWidget ? "has-keypad" : ""}`,
-        style: toolsMinHeight > 0 ? { minHeight: toolsMinHeight } : void 0,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "exercise-line",
-              dir: group.hasArabic && group.hasRTLInlineWidget ? "rtl" : void 0,
-              children: group.subGroups.length > 0 ? (
-                // Render sub-groups for regular lines
-                group.subGroups.map((subGroup, subIdx) => subGroup.isTextGroup ? (
-                  // Text group - only apply RTL for pure Arabic (no mixed languages)
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-group", dir: subGroup.shouldApplyRTL ? "rtl" : void 0, children: subGroup.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-                    LayoutRenderer,
-                    {
-                      item,
-                      widgets: json.widgets,
-                      values,
-                      droppedInputs,
-                      validationDetails,
-                      onChange: handleChange,
-                      onInputFocus: setFocusedInputId,
-                      resetKey
-                    },
-                    item.id
-                  )) }, subIdx)
-                ) : (
-                  // Widget group - no dir wrapper, render directly
-                  subGroup.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-                    LayoutRenderer,
-                    {
-                      item,
-                      widgets: json.widgets,
-                      values,
-                      droppedInputs,
-                      validationDetails,
-                      onChange: handleChange,
-                      onInputFocus: setFocusedInputId,
-                      resetKey
-                    },
-                    item.id
-                  ))
-                ))
-              ) : (
-                // For QUESTION_TEXT items (no sub-groups)
-                group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-                  LayoutRenderer,
+        droppedSources,
+        exerciseKey: loadedValuesSignature,
+        renderOverlay: (item) => {
+          if (item.type !== "rich-drag-option" || draggableOptionsWidget?.type !== JSON_TYPES.DRAGGABLE_OPTIONS) {
+            return null;
+          }
+          const data = item.data;
+          const option = draggableOptionsWidget.options.find(
+            (candidate) => candidate.name === data.optionName
+          );
+          return option ? (
+            // The overlay renders outside the root below, so it needs the root's class
+            // and theme style for nested widgets to resolve the --exercise-* variables.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `math-exercise-renderer rich-drag-overlay-root ${className}`,
+                style: themeStyle,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    item,
-                    widgets: json.widgets,
-                    values,
-                    droppedInputs,
-                    validationDetails,
-                    onChange: handleChange,
-                    onInputFocus: setFocusedInputId,
-                    resetKey
-                  },
-                  item.id
-                ))
-              )
-            },
-            groupIdx
-          )) }),
-          numericKeypadWidget && numericKeypadWidget.type === "numeric-keypad" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "numeric-keypad-container", children: /* @__PURE__ */ jsxRuntime.jsx(
-            WidgetRenderer,
-            {
-              widget: numericKeypadWidget,
-              widgetId: "_numeric_keypad",
-              value: focusedInputId ? values[focusedInputId] || "" : "",
-              onChange: () => {
-              },
-              onKeypadChange: (newValue) => {
-                if (!focusedInputId) return;
-                const maxLength = getMaxInputLength(json, focusedInputId);
-                if (maxLength !== void 0 && newValue.length > maxLength) return;
-                handleChange(focusedInputId, newValue, false);
+                    className: `drag-overlay-option rich-drag-overlay-option${isPlainTextContent(option.content) ? "" : " drag-overlay-option--rich"}`,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(RichOptionContent, { content: option.content, widgets: json.widgets })
+                  }
+                )
               }
-            }
-          ) }),
-          tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToolsOverlay, { tools, resetKey })
-        ]
-      }
-    ),
-    dragOptionsWidget && dragOptionsWidget.type === "drag-options" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options-container", children: /* @__PURE__ */ jsxRuntime.jsx(
-      WidgetRenderer,
-      {
-        widget: dragOptionsWidget,
-        widgetId: "_drag_options",
-        value: "",
-        onChange: () => {
-        }
+            )
+          ) : null;
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsxRuntime.jsx(DragBankContext.Provider, { value: json.widgets[DRAG_OPTIONS_WIDGET_ID] !== void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: rootRef,
+            className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`,
+            style: themeStyle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `exercise-layout-container ${numericKeypadWidget ? "has-keypad" : ""}`,
+                  style: toolsMinHeight > 0 ? { minHeight: toolsMinHeight } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "exercise-line",
+                        dir: group.hasArabic && group.hasRTLInlineWidget ? "rtl" : void 0,
+                        children: group.subGroups.length > 0 ? (
+                          // Render sub-groups for regular lines
+                          group.subGroups.map(
+                            (subGroup, subIdx) => subGroup.isTextGroup ? (
+                              // Text group - only apply RTL for pure Arabic (no mixed languages)
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  className: "text-group",
+                                  dir: subGroup.shouldApplyRTL ? "rtl" : void 0,
+                                  children: subGroup.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                                    LayoutRenderer,
+                                    {
+                                      item,
+                                      widgets: json.widgets,
+                                      values,
+                                      droppedInputs,
+                                      validationDetails,
+                                      onChange: handleChange,
+                                      onInputFocus: setFocusedInputId,
+                                      resetKey
+                                    },
+                                    item.id
+                                  ))
+                                },
+                                subIdx
+                              )
+                            ) : (
+                              // Widget group - no dir wrapper, render directly
+                              subGroup.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                                LayoutRenderer,
+                                {
+                                  item,
+                                  widgets: json.widgets,
+                                  values,
+                                  droppedInputs,
+                                  validationDetails,
+                                  onChange: handleChange,
+                                  onInputFocus: setFocusedInputId,
+                                  resetKey
+                                },
+                                item.id
+                              ))
+                            )
+                          )
+                        ) : (
+                          // For QUESTION_TEXT items (no sub-groups)
+                          group.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                            LayoutRenderer,
+                            {
+                              item,
+                              widgets: json.widgets,
+                              values,
+                              droppedInputs,
+                              validationDetails,
+                              onChange: handleChange,
+                              onInputFocus: setFocusedInputId,
+                              resetKey
+                            },
+                            item.id
+                          ))
+                        )
+                      },
+                      groupIdx
+                    )) }),
+                    numericKeypadWidget && numericKeypadWidget.type === "numeric-keypad" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "numeric-keypad-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      WidgetRenderer,
+                      {
+                        widget: numericKeypadWidget,
+                        widgetId: "_numeric_keypad",
+                        value: focusedInputId ? values[focusedInputId] || "" : "",
+                        onChange: () => {
+                        },
+                        onKeypadChange: (newValue) => {
+                          if (!focusedInputId) return;
+                          const maxLength = getMaxInputLength(json, focusedInputId);
+                          const currentLength = String(values[focusedInputId] ?? "").length;
+                          if (maxLength !== void 0 && newValue.length > maxLength && newValue.length > currentLength)
+                            return;
+                          handleChange(focusedInputId, newValue, false);
+                        }
+                      }
+                    ) }),
+                    tools.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToolsOverlay, { tools, resetKey })
+                  ]
+                }
+              ),
+              dragOptionsWidget && dragOptionsWidget.type === "drag-options" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+                WidgetRenderer,
+                {
+                  widget: dragOptionsWidget,
+                  widgetId: "_drag_options",
+                  value: "",
+                  onChange: () => {
+                  }
+                }
+              ) }),
+              draggableOptionsWidget && draggableOptionsWidget.type === JSON_TYPES.DRAGGABLE_OPTIONS && // Keeps the legacy class too: host CSS uses :has(.drag-options-container) to
+              // tell drag exercises from typed ones.
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options-container draggable-options-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+                WidgetRenderer,
+                {
+                  widget: draggableOptionsWidget,
+                  widgetId: DRAGGABLE_OPTIONS_WIDGET_ID,
+                  value: "",
+                  values,
+                  widgets: json.widgets,
+                  onChange: () => {
+                  }
+                }
+              ) }),
+              showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: "exercise-submit-btn",
+                  disabled: locked,
+                  onClick: handleSubmit,
+                  children: "Check Answer"
+                }
+              ),
+              tutorial && tutorialRun && rootRef.current && /* @__PURE__ */ jsxRuntime.jsx(
+                TutorialOverlay,
+                {
+                  tutorial,
+                  root: rootRef.current,
+                  json,
+                  options: tutorialRun.options,
+                  onClose: (finished) => {
+                    setTutorialRun(null);
+                    tutorialRun.options.onClose?.();
+                    if (finished) tutorialRun.options.onDone?.();
+                  }
+                },
+                tutorialRun.run
+              )
+            ]
+          }
+        ) }) })
       }
-    ) }),
-    showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" }),
-    tutorial && tutorialRun && rootRef.current && /* @__PURE__ */ jsxRuntime.jsx(
-      TutorialOverlay,
-      {
-        tutorial,
-        root: rootRef.current,
-        json,
-        options: tutorialRun.options,
-        onClose: (finished) => {
-          setTutorialRun(null);
-          tutorialRun.options.onClose?.();
-          if (finished) tutorialRun.options.onDone?.();
-        }
-      },
-      tutorialRun.run
-    )
-  ] }) }) }) }) }) });
-});
+    ) }) });
+  }
+);
 ExerciseRenderer.displayName = "ExerciseRenderer";
 function renderExercise(options) {
   const container = typeof options.container === "string" ? document.querySelector(options.container) : options.container;
@@ -23195,6 +24001,12 @@ exports.DEFAULT_TABLE_BORDER_COLOR = DEFAULT_TABLE_BORDER_COLOR;
 exports.DisplayInlineNodeSchema = DisplayInlineNodeSchema;
 exports.DragOptionsJSONSchema = DragOptionsJSONSchema;
 exports.DragOptionsToolSchema = DragOptionsToolSchema;
+exports.DraggableOptionJSONSchema = DraggableOptionJSONSchema;
+exports.DraggableOptionSchema = DraggableOptionSchema;
+exports.DraggableOptionsJSONSchema = DraggableOptionsJSONSchema;
+exports.DraggableOptionsToolSchema = DraggableOptionsToolSchema;
+exports.DropInputJSONSchema = DropInputJSONSchema;
+exports.DropInputSchema = DropInputSchema;
 exports.EngineError = EngineError;
 exports.ExerciseDocumentSchema = ExerciseDocumentSchema;
 exports.ExerciseJSONSchema = ExerciseJSONSchema;
@@ -23303,6 +24115,7 @@ exports.WIDGET_TUTORIALS = WIDGET_TUTORIALS;
 exports.WidgetJSONSchema = WidgetJSONSchema;
 exports.WidgetRefSchema = WidgetRefSchema;
 exports.WidgetRenderer = WidgetRenderer;
+exports.addDuplicateOptionNameIssues = addDuplicateOptionNameIssues;
 exports.alignGroupBarsToSeries = alignGroupBarsToSeries;
 exports.compile = compile;
 exports.compileWithAST = compileWithAST;
@@ -23319,6 +24132,9 @@ exports.createChartSeriesBar = createChartSeriesBar;
 exports.createColorText = createColorText;
 exports.createDisplayClock = createDisplayClock;
 exports.createDragOptions = createDragOptions;
+exports.createDraggableOption = createDraggableOption;
+exports.createDraggableOptions = createDraggableOptions;
+exports.createDropInput = createDropInput;
 exports.createExerciseDocument = createExerciseDocument;
 exports.createExpressionValidation = createExpressionValidation;
 exports.createFraction = createFraction;
@@ -23363,6 +24179,7 @@ exports.findWidgetTutorial = findWidgetTutorial;
 exports.getAnswerableInputs = getAnswerableInputs;
 exports.getFractionKey = getFractionKey;
 exports.getMissingInputs = getMissingInputs;
+exports.hasOptionContent = hasOptionContent;
 exports.isBoldText = isBoldText;
 exports.isCellInInteractiveArea = isCellInInteractiveArea;
 exports.isChartAxis = isChartAxis;
@@ -23380,6 +24197,10 @@ exports.isClockItem = isClockItem;
 exports.isColorText = isColorText;
 exports.isDragOptions = isDragOptions;
 exports.isDragOptionsJSON = isDragOptionsJSON;
+exports.isDraggableOptions = isDraggableOptions;
+exports.isDraggableOptionsJSON = isDraggableOptionsJSON;
+exports.isDropInput = isDropInput;
+exports.isDropInputJSON = isDropInputJSON;
 exports.isExerciseDocument = isExerciseDocument;
 exports.isExpressionValidation = isExpressionValidation;
 exports.isFraction = isFraction;
@@ -23409,6 +24230,7 @@ exports.isMixedValidation = isMixedValidation;
 exports.isNumericKeypad = isNumericKeypad;
 exports.isNumericKeypadJSON = isNumericKeypadJSON;
 exports.isOperatorItem = isOperatorItem;
+exports.isOptionContentNode = isOptionContentNode;
 exports.isPairMatcherBlock = isPairMatcherBlock;
 exports.isPairMatcherWidget = isPairMatcherWidget;
 exports.isProtractorTool = isProtractorTool;
@@ -23465,4 +24287,4 @@ exports.validateUniqueIds = validateUniqueIds;
 exports.validateVisualFractionCapacity = validateVisualFractionCapacity;
 exports.validateWidgetJSON = validateWidgetJSON;
 exports.validateWidgetJSONSafe = validateWidgetJSONSafe;
-//# sourceMappingURL=index-gCvC2wRR.js.map
+//# sourceMappingURL=index-C9OHpy2h.js.map