@mathscan/math-exercise-engine 1.2.14 → 1.2.15

package/dist/{index-Daj5xH0X.mjs → index-BLrnKegW.mjs}

@@ -24,6 +24,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) */
@@ -111,6 +113,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 */
@@ -216,8 +220,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 */
@@ -240,6 +248,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";
@@ -255,6 +264,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
@@ -354,6 +364,10 @@ const STRING_INPUT = createToken({
   name: "STRING_INPUT",
   pattern: /STRING_INPUT/
 });
+const DROP_INPUT = createToken({
+  name: "DROP_INPUT",
+  pattern: /DROP_INPUT/
+});
 const INLINE_DRAG_OPTION = createToken({
   name: "INLINE_DRAG_OPTION",
   pattern: /INLINE_DRAG_OPTION/
@@ -362,6 +376,18 @@ const DRAGABLE_BUTTONS_OPTIONS = createToken({
   name: "DRAGABLE_BUTTONS_OPTIONS",
   pattern: /DRAGABLE_BUTTONS_OPTIONS/
 });
+const DRAGGABLE_OPTIONS = createToken({
+  name: "DRAGGABLE_OPTIONS",
+  pattern: /DRAGGABLE_OPTIONS/
+});
+const OPTION = 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 = createToken({
   name: "RADIO_BUTTONS_OPTIONS",
   pattern: /RADIO_BUTTONS_OPTIONS/
@@ -672,8 +698,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,
@@ -1445,6 +1474,8 @@ class MathExerciseParser extends 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)
@@ -1536,6 +1567,12 @@ class MathExerciseParser extends 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);
@@ -1544,6 +1581,7 @@ class MathExerciseParser extends 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) },
@@ -1551,6 +1589,44 @@ class MathExerciseParser extends 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);
@@ -2108,6 +2184,14 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     answer: z.union([z.string(), z.number()]).optional()
   })
 ]);
+const DropInputSchema = z.object({
+  type: z.literal(AST_TYPES.DROP_INPUT),
+  name: z.string().min(1),
+  answer: z.string().min(1),
+  /** Box width in characters: the answer is an option name, so nothing else implies a size. */
+  width: InlineInputWidthSchema,
+  placeholder: z.string().max(32).optional()
+});
 const FractionInlineSchema = z.object({
   type: z.literal(AST_TYPES.FRACTION),
   name: z.string(),
@@ -2221,6 +2305,7 @@ const InlineNodeSchema = z.union([
   ColorTextInlineSchema,
   BoldTextInlineSchema,
   InlineInputWidgetSchema,
+  DropInputSchema,
   FractionInlineSchema,
   ImageInlineSchema,
   VisualFractionInlineSchema,
@@ -2296,6 +2381,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,
@@ -2350,6 +2448,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;
 }
@@ -2404,7 +2505,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}`
@@ -3117,6 +3218,45 @@ const DragOptionsToolSchema = z.object({
   type: z.literal(AST_TYPES.DRAG_OPTIONS),
   options: z.array(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 = z.object({
+  name: z.string().min(1),
+  content: 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: 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 = z.object({
+  type: z.literal(AST_TYPES.DRAGGABLE_OPTIONS),
+  reusable: z.boolean().default(false),
+  options: z.array(DraggableOptionSchema).min(1)
+});
+const DraggableOptionsToolSchema = DraggableOptionsToolObjectSchema.superRefine((tool, ctx) => {
+  addDuplicateOptionNameIssues(tool.options, ctx);
+});
 const NumericKeypadToolSchema = z.object({
   type: z.literal(AST_TYPES.NUMERIC_KEYPAD),
   includeOperators: z.boolean().optional(),
@@ -3137,6 +3277,7 @@ const SetSquareToolSchema = z.object({
 });
 const ToolNodeSchema = z.discriminatedUnion("type", [
   DragOptionsToolSchema,
+  DraggableOptionsToolObjectSchema,
   NumericKeypadToolSchema,
   RulerToolSchema,
   ProtractorToolSchema,
@@ -3148,6 +3289,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,
@@ -3168,6 +3322,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;
 }
@@ -3726,9 +3883,13 @@ const ExerciseDocumentSchema = 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"]);
@@ -3745,9 +3906,13 @@ const ExerciseDocumentSchema = 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"]);
@@ -3790,15 +3955,78 @@ const ExerciseDocumentSchema = 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: 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: 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: z.ZodIssueCode.custom,
+        message: `DROP_INPUT "${name}" needs a DRAGGABLE_OPTIONS bank to draw from`,
+        path
+      });
+    } else if (!optionNames.has(answer)) {
+      ctx.addIssue({
+        code: 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: 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, validation, tools) {
-  return ExerciseDocumentSchema.parse({
+  const result = ExerciseDocumentSchema.safeParse({
     type: AST_TYPES.EXERCISE_DOCUMENT,
     question,
     lines,
     tools,
     validation
   });
+  if (result.success) return result.data;
+  const { issues } = result.error;
+  if (issues.every((issue) => issue.code === z.ZodIssueCode.custom)) {
+    throw new Error(issues.map((issue) => issue.message).join("\n"));
+  }
+  throw result.error;
 }
 function isExerciseDocument(value) {
   return ExerciseDocumentSchema.safeParse(value).success;
@@ -4198,6 +4426,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);
     }
@@ -4352,6 +4583,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);
@@ -4490,6 +4733,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
   tool(ctx) {
+    if (ctx.draggableOptions) {
+      return this.visit(ctx.draggableOptions);
+    }
     if (ctx.dragableButtons) {
       return this.visit(ctx.dragableButtons);
     }
@@ -4507,6 +4753,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);
@@ -5114,10 +5387,30 @@ const InlineInputJSONSchema = z.discriminatedUnion("inputType", [
   StringInputJSONSchema,
   NumericInputJSONSchema
 ]);
+const DropInputJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.DROP_INPUT),
+  /** Box width in characters; absent means the default input size. */
+  width: InlineInputWidthSchema,
+  placeholder: z.string().max(32).optional()
+});
 const DragOptionsJSONSchema = z.object({
   type: z.literal(JSON_TYPES.DRAG_OPTIONS),
   options: z.array(z.string())
 });
+const DraggableOptionJSONSchema = z.object({
+  name: z.string().min(1),
+  content: z.array(LayoutItemSchema).min(1).refine(
+    (content) => hasOptionContent(content, JSON_TYPES.SPACE),
+    { message: "Option content cannot be empty or whitespace only" }
+  )
+});
+const DraggableOptionsJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.DRAGGABLE_OPTIONS),
+  reusable: z.boolean(),
+  options: z.array(DraggableOptionJSONSchema).min(1)
+}).superRefine((widget, ctx) => {
+  addDuplicateOptionNameIssues(widget.options, ctx);
+});
 const InlineDragOptionJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_DRAG_OPTION),
   value: z.string().min(1)
@@ -5227,7 +5520,9 @@ const GeometryJSONSchema = z.object({
 });
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
+  DropInputJSONSchema,
   DragOptionsJSONSchema,
+  DraggableOptionsJSONSchema,
   InlineDragOptionJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
@@ -5344,9 +5639,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;
 }
@@ -10880,7 +11181,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;
@@ -11006,7 +11316,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,
@@ -11031,6 +11341,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;
     }
@@ -11042,7 +11359,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;
       }
     }
@@ -11118,6 +11435,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,
@@ -11583,6 +11909,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),
@@ -11639,6 +11971,7 @@ function transformValidation(validation, answers, widgets) {
     };
   } else if (validation.type === AST_TYPES.EXPRESSION_VALIDATION) {
     assertNoDisabledInExpression(validation.expression, widgets);
+    assertNoDropInputs(Object.keys(widgets), widgets);
     const validVariableNames = getEnabledWidgetNames(widgets);
     const variables = extractVariables$1(validation.expression, validVariableNames);
     return {
@@ -11648,6 +11981,7 @@ function transformValidation(validation, answers, widgets) {
     };
   } else if (validation.type === AST_TYPES.MIXED_VALIDATION) {
     assertNoDisabledInExpression(validation.expression, widgets);
+    assertNoDropInputs(extractVariables$1(validation.expression, Object.keys(widgets)), widgets);
     const validVariableNames = getEnabledWidgetNames(widgets);
     const variables = extractVariables$1(validation.expression, validVariableNames);
     const inExpression = new Set(variables);
@@ -11686,6 +12020,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);
 }
@@ -12259,7 +12601,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;
     }
@@ -12432,11 +12774,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)) {
@@ -12454,6 +12798,8 @@ function validateInputFormats(exercise, userInputs) {
 const DragItemTypeSchema = 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",
@@ -12467,6 +12813,16 @@ const DragOptionDataSchema = z.object({
   value: z.string(),
   label: z.string()
 });
+const RichDragOptionDataSchema = z.object({
+  optionName: z.string().min(1),
+  origin: z.discriminatedUnion("kind", [
+    z.object({ kind: z.literal("bank") }),
+    z.object({
+      kind: z.literal("drop-input"),
+      inputName: z.string().min(1)
+    })
+  ])
+});
 const DragItemSchema = (dataSchema) => z.object({
   id: z.union([z.string(), z.number()]),
   // UniqueIdentifier from dnd-kit
@@ -12474,6 +12830,7 @@ const DragItemSchema = (dataSchema) => z.object({
   data: dataSchema
 });
 DragItemSchema(DragOptionDataSchema);
+DragItemSchema(RichDragOptionDataSchema);
 z.object({
   targetId: z.string(),
   item: z.discriminatedUnion("type", [
@@ -16254,12 +16611,16 @@ function useExerciseDnd() {
   }
   return ctx;
 }
+function useExerciseDndOptional() {
+  return useContext(ExerciseDndContext);
+}
 const NO_EXERCISE = Symbol("no-exercise");
 const ExerciseDndProvider = ({
   children,
   droppedSources,
   onDragEnd,
-  exerciseKey
+  exerciseKey,
+  renderOverlay
 }) => {
   const [activeItem, setActiveItem] = useState(null);
   const [draggedExerciseKey, setDraggedExerciseKey] = useState(NO_EXERCISE);
@@ -16295,7 +16656,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) => {
@@ -16338,14 +16701,16 @@ const ExerciseDndProvider = ({
           onDragCancel: handleDragCancel,
           children: [
             children,
-            /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeItem && /* @__PURE__ */ jsx(DragOverlayContent, { item: activeItem }) })
+            /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeItem && /* @__PURE__ */ jsx(DragOverlayContent, { item: activeItem, renderOverlay }) })
           ]
         }
       )
     }
   );
 };
-const DragOverlayContent = ({ item }) => {
+const DragOverlayContent = ({ item, renderOverlay }) => {
+  const customOverlay = renderOverlay?.(item);
+  if (customOverlay != null) return /* @__PURE__ */ jsx(Fragment, { children: customOverlay });
   switch (item.type) {
     case "drag-option": {
       const data = item.data;
@@ -16364,7 +16729,8 @@ const Draggable = ({
   data,
   disabled = false,
   children,
-  className = ""
+  className = "",
+  behavior = "move"
 }) => {
   const dragItem = { id, type, data };
   const {
@@ -16377,6 +16743,7 @@ const Draggable = ({
     data: dragItem,
     disabled
   });
+  const isCopy = behavior === "copy";
   const style = {
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
@@ -16386,7 +16753,7 @@ const Draggable = ({
     {
       ref: setNodeRef,
       style,
-      className: `draggable ${isDragging ? "dragging" : ""} ${className}`,
+      className: `draggable ${isDragging && !isCopy ? "dragging" : ""} ${className}`,
       ...listeners,
       ...attributes,
       children
@@ -17178,6 +17545,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;
@@ -17234,7 +17604,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 !== "";
@@ -17438,42 +17808,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__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, "data-tutorial": "keypad", children: [
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "1", onClick: () => handleDigit("1"), children: "1" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "2", onClick: () => handleDigit("2"), children: "2" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "3", onClick: () => handleDigit("3"), children: "3" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "+", onClick: () => handleDigit("+"), children: "+" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "4", onClick: () => handleDigit("4"), children: "4" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "5", onClick: () => handleDigit("5"), children: "5" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "6", onClick: () => handleDigit("6"), children: "6" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "-", onClick: () => handleDigit("-"), children: "-" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "7", onClick: () => handleDigit("7"), children: "7" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "8", onClick: () => handleDigit("8"), children: "8" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "9", onClick: () => handleDigit("9"), children: "9" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "×", onClick: () => handleDigit("×"), children: "×" }),
-    includeDecimal ? /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", "data-key": ",", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "0", onClick: () => handleDigit("0"), children: "0" }),
-    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", "data-key": "backspace", onClick: handleBackspace, children: "⌫" }),
-    includeOperators && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "rich-option-content", dir: isRTL ? "rtl" : "ltr", children: groupLineItems(content).map((group, index) => group.isTextGroup ? /* @__PURE__ */ 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__ */ jsx(PillBackground, { children: /* @__PURE__ */ jsx("div", { className: "drag-options draggable-options", children: widget.options.map((option) => /* @__PURE__ */ 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__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true", children: /* @__PURE__ */ jsx("button", { type: "button", className: surfaceClass, disabled: true, children: /* @__PURE__ */ jsx(RichOptionContent, { content: option.content, widgets }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "drag-option-slot rich-drag-option-slot", children: used ? emptySlot : /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = useCallback(
+    (item) => applyRichDropToInput(widgetId, item, onChange),
+    [widgetId, onChange]
+  );
+  const handleRemove = useCallback(
+    () => onChange(widgetId, "", false),
+    [widgetId, onChange]
+  );
+  const placeholderText = placeholder ? /* @__PURE__ */ jsx("span", { className: "drop-input-placeholder", children: placeholder }) : null;
+  const input = /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-input drop-input-sizer", style: boxStyle, "aria-hidden": "true", children: placeholderText }),
+        /* @__PURE__ */ jsx(
+          PlacedRichOption,
+          {
+            inputName: widgetId,
+            option,
+            widgets,
+            onRemove: handleRemove,
+            className: statusClass.trim()
+          }
+        )
+      ] }) : /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, "data-tutorial": "keypad", children: [
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "1", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "2", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "3", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "+", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "4", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "5", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "6", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "-", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "7", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "8", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "9", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "×", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", "data-key": ",", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "0", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", "data-key": "backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "÷", onClick: () => handleDigit("÷"), children: "÷" })
+  ] });
 };
 const FractionInput = ({
   widgetId,
@@ -19276,41 +20022,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,
@@ -19724,9 +20435,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";
 }
@@ -19755,7 +20472,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await import("./GeometryWidget-B-EQ53jz.mjs")).GeometryWidget
+  default: (await import("./GeometryWidget-DZWM4LcD.mjs")).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -19793,6 +20510,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__ */ jsx(
+      DropInput,
+      {
+        widgetId,
+        value: strValue,
+        width: widget.width,
+        placeholder: widget.placeholder,
+        validationStatus,
+        option,
+        widgets,
+        onChange
+      }
+    );
+  }
   if (isDragOptionsWidget(widget)) {
     return /* @__PURE__ */ jsx(
       DragOptions,
@@ -19803,6 +20537,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__ */ jsx(
+      DraggableOptions,
+      {
+        widget,
+        widgets: widgets ?? { [widgetId]: widget },
+        usedOptionNames
+      }
+    );
+  }
   if (isInlineDragOptionWidget(widget)) {
     return /* @__PURE__ */ jsx(
       InlineDragOption,
@@ -20144,75 +20897,14 @@ const ImageItem = ({
         ref: triggerRef,
         type: "button",
         className: "image-zoom-btn",
-        "aria-label": alt ? `View "${alt}" fullscreen` : "View image fullscreen",
-        onClick: open,
-        children: /* @__PURE__ */ 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__ */ 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);
@@ -21669,63 +22361,6 @@ const ClockRenderer = ({
     format === "12h" && /* @__PURE__ */ 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" : "";
@@ -22173,9 +22808,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;
@@ -22193,7 +22830,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] = useState(
@@ -22269,7 +22905,9 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
   const [completedStep, setCompletedStep] = useState(null);
   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;
@@ -22278,7 +22916,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);
@@ -22288,6 +22930,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;
@@ -22443,7 +23086,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$/, "");
@@ -22480,7 +23123,6 @@ const StandInFill = ({ box, slots, filled, digits }) => /* @__PURE__ */ jsx(
     children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ 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;
@@ -22490,8 +23132,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}`;
   }
@@ -22554,29 +23196,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
   };
@@ -22602,12 +23287,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) {
@@ -22646,8 +23328,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;
@@ -22679,449 +23363,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 = forwardRef(({
-  json: suppliedJson,
-  onSubmit,
-  onChange,
-  showSubmitButton = false,
-  className = "",
-  soundEnabled = true,
-  sounds,
-  theme
-}, ref) => {
-  const json = useMemo(() => withDisabledPrefilledInputs(suppliedJson), [suppliedJson]);
-  const initialValuesSignature = useMemo(() => buildInitialValuesSignature(json), [json]);
-  const [values, setValues] = useState(() => buildInitialValues(json));
-  const valuesRef = useRef(values);
-  valuesRef.current = values;
-  const touchedRef = useRef(/* @__PURE__ */ new Set());
-  const [loadedValuesSignature, setLoadedValuesSignature] = useState(initialValuesSignature);
-  const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
-  const [focusedInputId, setFocusedInputId] = useState(null);
-  const [validationDetails, setValidationDetails] = useState(null);
-  const rootRef = useRef(null);
-  const [resetKey, setResetKey] = useState(0);
-  const [revealed, setRevealed] = useState(false);
-  const tutorial = useMemo(() => findWidgetTutorial(json), [json]);
-  const [tutorialRun, setTutorialRun] = useState(null);
-  const themeStyle = 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]);
-  useEffect(() => {
-    warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
-  }, [theme?.correct, theme?.incorrect]);
-  const playSound = useSoundPlayer(soundEnabled, sounds);
-  const externallyLocked = useExerciseLocked();
-  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 = 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;
-  };
-  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 = forwardRef(
+  ({
+    json: suppliedJson,
+    onSubmit,
+    onChange,
+    showSubmitButton = false,
+    className = "",
+    soundEnabled = true,
+    sounds,
+    theme
+  }, ref) => {
+    const json = useMemo(() => withDisabledPrefilledInputs(suppliedJson), [suppliedJson]);
+    const initialValuesSignature = useMemo(() => buildInitialValuesSignature(json), [json]);
+    const [values, setValues] = useState(
+      () => buildInitialValues(json)
+    );
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const touchedRef = useRef(/* @__PURE__ */ new Set());
+    const [loadedValuesSignature, setLoadedValuesSignature] = useState(initialValuesSignature);
+    const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
+    const [focusedInputId, setFocusedInputId] = useState(null);
+    const [validationDetails, setValidationDetails] = useState(null);
+    const rootRef = useRef(null);
+    const [resetKey, setResetKey] = useState(0);
+    const [revealed, setRevealed] = useState(false);
+    const tutorial = useMemo(() => findWidgetTutorial(json), [json]);
+    const [tutorialRun, setTutorialRun] = useState(null);
+    const themeStyle = 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]);
+    useEffect(() => {
+      warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
+    }, [theme?.correct, theme?.incorrect]);
+    const playSound = useSoundPlayer(soundEnabled, sounds);
+    const externallyLocked = useExerciseLocked();
+    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 = 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;
+    };
+    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 = 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 = 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 } = 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__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsx(DragBankContext.Provider, { value: json.widgets[DRAG_OPTIONS_WIDGET_ID] !== void 0, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
+    const lineGroups = 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 = 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 } = 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__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(
+      ExerciseDndProvider,
       {
-        className: `exercise-layout-container ${numericKeypadWidget ? "has-keypad" : ""}`,
-        style: toolsMinHeight > 0 ? { minHeight: toolsMinHeight } : void 0,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ 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__ */ jsx("span", { className: "text-group", dir: subGroup.shouldApplyRTL ? "rtl" : void 0, children: subGroup.items.map((item) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+              "div",
+              {
+                className: `math-exercise-renderer rich-drag-overlay-root ${className}`,
+                style: themeStyle,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    item,
-                    widgets: json.widgets,
-                    values,
-                    droppedInputs,
-                    validationDetails,
-                    onChange: handleChange,
-                    onInputFocus: setFocusedInputId,
-                    resetKey
-                  },
-                  item.id
-                ))
-              )
-            },
-            groupIdx
-          )) }),
-          numericKeypadWidget && numericKeypadWidget.type === "numeric-keypad" && /* @__PURE__ */ jsx("div", { className: "numeric-keypad-container", children: /* @__PURE__ */ 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__ */ jsx(RichOptionContent, { content: option.content, widgets: json.widgets })
+                  }
+                )
               }
-            }
-          ) }),
-          tools.length > 0 && /* @__PURE__ */ jsx(ToolsOverlay, { tools, resetKey })
-        ]
-      }
-    ),
-    dragOptionsWidget && dragOptionsWidget.type === "drag-options" && /* @__PURE__ */ jsx("div", { className: "drag-options-container", children: /* @__PURE__ */ jsx(
-      WidgetRenderer,
-      {
-        widget: dragOptionsWidget,
-        widgetId: "_drag_options",
-        value: "",
-        onChange: () => {
-        }
+            )
+          ) : null;
+        },
+        children: /* @__PURE__ */ jsx(KeypadContext.Provider, { value: Boolean(numericKeypadWidget), children: /* @__PURE__ */ jsx(DragBankContext.Provider, { value: json.widgets[DRAG_OPTIONS_WIDGET_ID] !== void 0, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: rootRef,
+            className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`,
+            style: themeStyle,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `exercise-layout-container ${numericKeypadWidget ? "has-keypad" : ""}`,
+                  style: toolsMinHeight > 0 ? { minHeight: toolsMinHeight } : void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ 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__ */ jsx(
+                                "span",
+                                {
+                                  className: "text-group",
+                                  dir: subGroup.shouldApplyRTL ? "rtl" : void 0,
+                                  children: subGroup.items.map((item) => /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                            LayoutRenderer,
+                            {
+                              item,
+                              widgets: json.widgets,
+                              values,
+                              droppedInputs,
+                              validationDetails,
+                              onChange: handleChange,
+                              onInputFocus: setFocusedInputId,
+                              resetKey
+                            },
+                            item.id
+                          ))
+                        )
+                      },
+                      groupIdx
+                    )) }),
+                    numericKeypadWidget && numericKeypadWidget.type === "numeric-keypad" && /* @__PURE__ */ jsx("div", { className: "numeric-keypad-container", children: /* @__PURE__ */ 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__ */ jsx(ToolsOverlay, { tools, resetKey })
+                  ]
+                }
+              ),
+              dragOptionsWidget && dragOptionsWidget.type === "drag-options" && /* @__PURE__ */ jsx("div", { className: "drag-options-container", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "drag-options-container draggable-options-container", children: /* @__PURE__ */ jsx(
+                WidgetRenderer,
+                {
+                  widget: draggableOptionsWidget,
+                  widgetId: DRAGGABLE_OPTIONS_WIDGET_ID,
+                  value: "",
+                  values,
+                  widgets: json.widgets,
+                  onChange: () => {
+                  }
+                }
+              ) }),
+              showSubmitButton && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "exercise-submit-btn",
+                  disabled: locked,
+                  onClick: handleSubmit,
+                  children: "Check Answer"
+                }
+              ),
+              tutorial && tutorialRun && rootRef.current && /* @__PURE__ */ 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__ */ jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" }),
-    tutorial && tutorialRun && rootRef.current && /* @__PURE__ */ 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;
@@ -23159,7 +23965,7 @@ function compileWithAST(dsl) {
   return { ast, json };
 }
 export {
-  isImageItem as $,
+  isTableRowItem as $,
   AST_TYPES as A,
   isQuestionText as B,
   isTextItem$1 as C,
@@ -23175,275 +23981,291 @@ export {
   isGroupItem as M,
   isOperatorItem as N,
   isInlineInputJSON as O,
-  isDragOptionsJSON as P,
-  isInlineDragOptionJSON as Q,
-  isRadioOptionsJSON as R,
-  isNumericKeypadJSON as S,
-  isFractionJSON as T,
-  isGridSymmetryJSON as U,
-  isChartItem as V,
-  isChartBarWidgetJSON as W,
-  isChartPictoWidgetJSON as X,
-  isTableItem as Y,
-  isTableRowItem as Z,
-  isTableCellItem as _,
+  isDropInputJSON as P,
+  isDragOptionsJSON as Q,
+  isDraggableOptionsJSON as R,
+  isInlineDragOptionJSON as S,
+  isRadioOptionsJSON as T,
+  isNumericKeypadJSON as U,
+  isFractionJSON as V,
+  isGridSymmetryJSON as W,
+  isChartItem as X,
+  isChartBarWidgetJSON as Y,
+  isChartPictoWidgetJSON as Z,
+  isTableItem as _,
   compileWithAST as a,
-  validateExerciseJSONSafe as a$,
-  isVerticalOperationItem as a0,
-  isClockItem as a1,
-  isRulerWidget as a2,
-  isProtractorWidget as a3,
-  isSetSquareWidget as a4,
-  isGeometryJSON as a5,
-  ExerciseJSONSchema as a6,
-  ExerciseMetaSchema as a7,
-  ValidationJSONSchema as a8,
-  LayoutItemSchema as a9,
-  VopColorCellItemSchema as aA,
-  VopBoldCellItemSchema as aB,
-  VopHighlightCellItemSchema as aC,
-  ClockItemSchema as aD,
-  ChartItemSchema as aE,
-  ChartAxisJSONSchema as aF,
-  ChartBarJSONSchema as aG,
-  ChartPictoJSONSchema as aH,
-  ChartSeriesJSONSchema as aI,
-  ChartSeriesBarJSONSchema as aJ,
-  ChartGroupJSONSchema as aK,
-  WidgetJSONSchema as aL,
-  InlineInputJSONSchema as aM,
-  DragOptionsJSONSchema as aN,
-  RadioOptionsJSONSchema as aO,
-  NumericKeypadJSONSchema as aP,
-  FractionJSONSchema as aQ,
-  MatcherWidgetJSONSchema as aR,
-  PairMatcherWidgetJSONSchema as aS,
-  GridSymmetryJSONSchema as aT,
-  ChartBarWidgetJSONSchema as aU,
-  ChartPictoWidgetJSONSchema as aV,
-  RulerWidgetSchema as aW,
-  ProtractorWidgetSchema as aX,
-  SetSquareWidgetSchema as aY,
-  GeometryJSONSchema as aZ,
-  validateExerciseJSON as a_,
-  QuestionTextSchema as aa,
-  TextItemSchema as ab,
-  WidgetRefSchema as ac,
-  HighlightedTextSchema as ad,
-  ColorTextSchema as ae,
-  BoldTextSchema as af,
-  ImageItemSchema as ag,
-  SpaceItemSchema as ah,
-  LinebreakSchema as ai,
-  GroupItemSchema as aj,
-  OperatorItemSchema as ak,
-  OperatorSchema as al,
-  TableItemSchema as am,
-  TableRowItemSchema as an,
-  TableCellItemSchema as ao,
-  NumberLineItemSchema as ap,
-  NumberLinePositionItemSchema as aq,
-  NumberLineCounterItemSchema as ar,
-  NumberLineHighlightItemSchema as as,
-  NumberLineCursorItemSchema as at,
-  NumberLineArrowItemSchema as au,
-  VerticalOperationItemSchema as av,
-  VopRowItemSchema as aw,
-  VopCarryRowItemSchema as ax,
-  VopSeparatorItemSchema as ay,
-  VopCellItemSchema as az,
+  RulerWidgetSchema as a$,
+  isTableCellItem as a0,
+  isImageItem as a1,
+  isVerticalOperationItem as a2,
+  isClockItem as a3,
+  isRulerWidget as a4,
+  isProtractorWidget as a5,
+  isSetSquareWidget as a6,
+  isGeometryJSON as a7,
+  ExerciseJSONSchema as a8,
+  ExerciseMetaSchema as a9,
+  VopSeparatorItemSchema as aA,
+  VopCellItemSchema as aB,
+  VopColorCellItemSchema as aC,
+  VopBoldCellItemSchema as aD,
+  VopHighlightCellItemSchema as aE,
+  ClockItemSchema as aF,
+  ChartItemSchema as aG,
+  ChartAxisJSONSchema as aH,
+  ChartBarJSONSchema as aI,
+  ChartPictoJSONSchema as aJ,
+  ChartSeriesJSONSchema as aK,
+  ChartSeriesBarJSONSchema as aL,
+  ChartGroupJSONSchema as aM,
+  WidgetJSONSchema as aN,
+  InlineInputJSONSchema as aO,
+  DropInputJSONSchema as aP,
+  DragOptionsJSONSchema as aQ,
+  DraggableOptionJSONSchema as aR,
+  DraggableOptionsJSONSchema as aS,
+  RadioOptionsJSONSchema as aT,
+  NumericKeypadJSONSchema as aU,
+  FractionJSONSchema as aV,
+  MatcherWidgetJSONSchema as aW,
+  PairMatcherWidgetJSONSchema as aX,
+  GridSymmetryJSONSchema as aY,
+  ChartBarWidgetJSONSchema as aZ,
+  ChartPictoWidgetJSONSchema as a_,
+  ValidationJSONSchema as aa,
+  LayoutItemSchema as ab,
+  QuestionTextSchema as ac,
+  TextItemSchema as ad,
+  WidgetRefSchema as ae,
+  HighlightedTextSchema as af,
+  ColorTextSchema as ag,
+  BoldTextSchema as ah,
+  ImageItemSchema as ai,
+  SpaceItemSchema as aj,
+  LinebreakSchema as ak,
+  GroupItemSchema as al,
+  OperatorItemSchema as am,
+  OperatorSchema as an,
+  TableItemSchema as ao,
+  TableRowItemSchema as ap,
+  TableCellItemSchema as aq,
+  NumberLineItemSchema as ar,
+  NumberLinePositionItemSchema as as,
+  NumberLineCounterItemSchema as at,
+  NumberLineHighlightItemSchema as au,
+  NumberLineCursorItemSchema as av,
+  NumberLineArrowItemSchema as aw,
+  VerticalOperationItemSchema as ax,
+  VopRowItemSchema as ay,
+  VopCarryRowItemSchema as az,
   tokenizeSafe as b,
-  TextBlockSchema as b$,
-  validateWidgetJSON as b0,
-  validateWidgetJSONSafe as b1,
-  EngineError as b2,
-  LexerError as b3,
-  ParseError as b4,
-  TransformError as b5,
-  ValidationError as b6,
-  ExerciseRenderer as b7,
-  LayoutRenderer as b8,
-  WidgetRenderer as b9,
-  CLOCK_MODES as bA,
-  CLOCK_FORMATS as bB,
-  CLOCK_TIME_REGEX as bC,
-  ClockInlineSchema as bD,
-  InlineNodeSchema as bE,
-  createFreeText as bF,
-  createSpace as bG,
-  createHighlightedText as bH,
-  createColorText as bI,
-  createBoldText as bJ,
-  createStringInput as bK,
-  createNumericInput as bL,
-  createImage as bM,
-  createFraction as bN,
-  createVisualFraction as bO,
-  createInlineDragOption as bP,
-  createDisplayClock as bQ,
-  createInteractiveClock as bR,
-  isFreeText as bS,
-  isSpace as bT,
-  isInlineInput as bU,
-  isFraction as bV,
-  isImage as bW,
-  isClock as bX,
-  isInlineNode as bY,
-  isVisualFractionInline as bZ,
-  isInlineDragOption as b_,
-  renderExercise as ba,
-  SoundProvider as bb,
-  useSound as bc,
-  ExerciseLockProvider as bd,
-  WIDGET_TUTORIALS as be,
-  findWidgetTutorial as bf,
-  isPairMatcherWidget as bg,
-  isMatcherWidget as bh,
-  VISUAL_FRACTION_SHAPES as bi,
-  VISUAL_FRACTION_SHAPE as bj,
-  VISUAL_FRACTION_DEFAULT_SIZE as bk,
-  VISUAL_FRACTION_MAX_DIVISIONS as bl,
-  INLINE_INPUT_MAX_WIDTH as bm,
-  InlineInputWidthSchema as bn,
-  FreeTextInlineSchema as bo,
-  SpaceInlineSchema as bp,
-  HighlightedTextInlineSchema as bq,
-  ColorTextInlineSchema as br,
-  BoldTextInlineSchema as bs,
-  InlineInputWidgetSchema as bt,
-  FractionInlineSchema as bu,
-  ImageInlineSchema as bv,
-  VisualFractionInlineSchema as bw,
-  validateVisualFractionCapacity as bx,
-  InlineDragOptionSchema as by,
-  CLOCK_TYPES as bz,
+  isInlineInput as b$,
+  ProtractorWidgetSchema as b0,
+  SetSquareWidgetSchema as b1,
+  GeometryJSONSchema as b2,
+  validateExerciseJSON as b3,
+  validateExerciseJSONSafe as b4,
+  validateWidgetJSON as b5,
+  validateWidgetJSONSafe as b6,
+  EngineError as b7,
+  LexerError as b8,
+  ParseError as b9,
+  FractionInlineSchema as bA,
+  ImageInlineSchema as bB,
+  VisualFractionInlineSchema as bC,
+  validateVisualFractionCapacity as bD,
+  InlineDragOptionSchema as bE,
+  CLOCK_TYPES as bF,
+  CLOCK_MODES as bG,
+  CLOCK_FORMATS as bH,
+  CLOCK_TIME_REGEX as bI,
+  ClockInlineSchema as bJ,
+  InlineNodeSchema as bK,
+  createFreeText as bL,
+  createSpace as bM,
+  createHighlightedText as bN,
+  createColorText as bO,
+  createBoldText as bP,
+  createStringInput as bQ,
+  createNumericInput as bR,
+  createDropInput as bS,
+  createImage as bT,
+  createFraction as bU,
+  createVisualFraction as bV,
+  createInlineDragOption as bW,
+  createDisplayClock as bX,
+  createInteractiveClock as bY,
+  isFreeText as bZ,
+  isSpace as b_,
+  TransformError as ba,
+  ValidationError as bb,
+  ExerciseRenderer as bc,
+  LayoutRenderer as bd,
+  WidgetRenderer as be,
+  renderExercise as bf,
+  SoundProvider as bg,
+  useSound as bh,
+  ExerciseLockProvider as bi,
+  WIDGET_TUTORIALS as bj,
+  findWidgetTutorial as bk,
+  isPairMatcherWidget as bl,
+  isMatcherWidget as bm,
+  VISUAL_FRACTION_SHAPES as bn,
+  VISUAL_FRACTION_SHAPE as bo,
+  VISUAL_FRACTION_DEFAULT_SIZE as bp,
+  VISUAL_FRACTION_MAX_DIVISIONS as bq,
+  INLINE_INPUT_MAX_WIDTH as br,
+  InlineInputWidthSchema as bs,
+  FreeTextInlineSchema as bt,
+  SpaceInlineSchema as bu,
+  HighlightedTextInlineSchema as bv,
+  ColorTextInlineSchema as bw,
+  BoldTextInlineSchema as bx,
+  InlineInputWidgetSchema as by,
+  DropInputSchema as bz,
   compile as c,
-  createVopEmptyCell as c$,
-  LineBlockSchema as c0,
-  createTextBlock as c1,
-  createLineBlock as c2,
-  isTextBlock as c3,
-  isLineBlock as c4,
-  DisplayInlineNodeSchema as c5,
-  MatcherItemSchema as c6,
-  createMatcherItem as c7,
-  isMatcherItem as c8,
-  MatcherRowSchema as c9,
-  ExpressionValidationSchema as cA,
-  MixedValidationSchema as cB,
-  ValidationNodeSchema as cC,
-  createSimpleValidation as cD,
-  createExpressionValidation as cE,
-  createMixedValidation as cF,
-  isSimpleValidation as cG,
-  isExpressionValidation as cH,
-  isMixedValidation as cI,
-  isValidationNode as cJ,
-  ContentBlockSchema as cK,
-  ExerciseDocumentSchema as cL,
-  createExerciseDocument as cM,
-  isExerciseDocument as cN,
-  VOP_OPERATORS as cO,
-  normalizeVopOperator as cP,
-  VopDigitCellSchema as cQ,
-  VopLabelCellSchema as cR,
-  VopInputCellSchema as cS,
-  VopEmptyCellSchema as cT,
-  VopColorCellSchema as cU,
-  VopBoldCellSchema as cV,
-  VopHighlightCellSchema as cW,
-  VopCellSchema as cX,
-  createVopDigitCell as cY,
-  createVopInputCell as cZ,
-  createVopLabelCell as c_,
-  createMatcherRow as ca,
-  isMatcherRow as cb,
-  MatcherBlockSchema as cc,
-  createMatcherBlock as cd,
-  isMatcherBlock as ce,
-  PairMatcherBlockSchema as cf,
-  createPairMatcherBlock as cg,
-  isPairMatcherBlock as ch,
-  DragOptionsToolSchema as ci,
-  NumericKeypadToolSchema as cj,
-  RulerToolSchema as ck,
-  ProtractorToolSchema as cl,
-  SetSquareToolSchema as cm,
-  ToolNodeSchema as cn,
-  createDragOptions as co,
-  createNumericKeypad as cp,
-  createRulerTool as cq,
-  createProtractorTool as cr,
-  createSetSquareTool as cs,
-  isDragOptions as ct,
-  isNumericKeypad as cu,
-  isRulerTool as cv,
-  isProtractorTool as cw,
-  isSetSquareTool as cx,
-  isToolNode as cy,
-  SimpleValidationSchema as cz,
+  ExerciseDocumentSchema as c$,
+  isDropInput as c0,
+  isFraction as c1,
+  isImage as c2,
+  isClock as c3,
+  isInlineNode as c4,
+  isVisualFractionInline as c5,
+  isInlineDragOption as c6,
+  TextBlockSchema as c7,
+  LineBlockSchema as c8,
+  createTextBlock as c9,
+  ToolNodeSchema as cA,
+  createDragOptions as cB,
+  createDraggableOptions as cC,
+  createDraggableOption as cD,
+  createNumericKeypad as cE,
+  createRulerTool as cF,
+  createProtractorTool as cG,
+  createSetSquareTool as cH,
+  isDragOptions as cI,
+  isDraggableOptions as cJ,
+  isNumericKeypad as cK,
+  isRulerTool as cL,
+  isProtractorTool as cM,
+  isSetSquareTool as cN,
+  isToolNode as cO,
+  SimpleValidationSchema as cP,
+  ExpressionValidationSchema as cQ,
+  MixedValidationSchema as cR,
+  ValidationNodeSchema as cS,
+  createSimpleValidation as cT,
+  createExpressionValidation as cU,
+  createMixedValidation as cV,
+  isSimpleValidation as cW,
+  isExpressionValidation as cX,
+  isMixedValidation as cY,
+  isValidationNode as cZ,
+  ContentBlockSchema as c_,
+  createLineBlock as ca,
+  isTextBlock as cb,
+  isLineBlock as cc,
+  DisplayInlineNodeSchema as cd,
+  MatcherItemSchema as ce,
+  createMatcherItem as cf,
+  isMatcherItem as cg,
+  MatcherRowSchema as ch,
+  createMatcherRow as ci,
+  isMatcherRow as cj,
+  MatcherBlockSchema as ck,
+  createMatcherBlock as cl,
+  isMatcherBlock as cm,
+  PairMatcherBlockSchema as cn,
+  createPairMatcherBlock as co,
+  isPairMatcherBlock as cp,
+  DragOptionsToolSchema as cq,
+  hasOptionContent as cr,
+  isOptionContentNode as cs,
+  DraggableOptionSchema as ct,
+  addDuplicateOptionNameIssues as cu,
+  DraggableOptionsToolSchema as cv,
+  NumericKeypadToolSchema as cw,
+  RulerToolSchema as cx,
+  ProtractorToolSchema as cy,
+  SetSquareToolSchema as cz,
   parse as d,
-  createVopColorCell as d0,
-  createVopBoldCell as d1,
-  createVopHighlightCell as d2,
-  VopRowSchema as d3,
-  createVopRow as d4,
-  VopCarryRowSchema as d5,
-  createVopCarryRow as d6,
-  VopSeparatorSchema as d7,
-  createVopSeparator as d8,
-  VerticalOperationBlockSchema as d9,
-  isChartAxis as dA,
-  ChartPictoSchema as dB,
-  createChartPicto as dC,
-  isChartPicto as dD,
-  ChartBarSchema as dE,
-  createChartBar as dF,
-  isChartBar as dG,
-  ChartSeriesSchema as dH,
-  createChartSeries as dI,
-  isChartSeries as dJ,
-  ChartSeriesBarSchema as dK,
-  createChartSeriesBar as dL,
-  isChartSeriesBar as dM,
-  ChartGroupSchema as dN,
-  createChartGroup as dO,
-  isChartGroup as dP,
-  alignGroupBarsToSeries as dQ,
-  ChartBlockSchema as dR,
-  resolveChartAxes as dS,
-  validateUniqueIds as dT,
-  createChartBlock as dU,
-  isChartBlock as dV,
-  GeometryBlockSchema as dW,
-  createGeometryBlock as dX,
-  isGeometryBlock as dY,
-  createVerticalOperationBlock as da,
-  isVopCell as db,
-  isVopRow as dc,
-  isVopCarryRow as dd,
-  isVopSeparator as de,
-  isVerticalOperationBlock as df,
-  GRID_SYMMETRY_AXES as dg,
-  GRID_SYMMETRY_INTERACTIVE_AREAS as dh,
-  GRID_SYMMETRY_MAX_ROWS as di,
-  GRID_SYMMETRY_MAX_COLS as dj,
-  GRID_SYMMETRY_MIN_CELL_SIZE as dk,
-  GRID_SYMMETRY_MAX_CELL_SIZE as dl,
-  isCellInInteractiveArea as dm,
-  reflectGridSymmetryCell as dn,
-  computeGridSymmetryExpectedCells as dp,
-  computeGridSymmetryCellsToFill as dq,
-  GridSymmetryBlockSchema as dr,
-  createGridSymmetryBlock as ds,
-  isGridSymmetryBlock as dt,
-  CHART_TYPES as du,
-  CHART_AXIS_DEFAULTS as dv,
-  CHART_MAX_AXIS_TICKS as dw,
-  CHART_MAX_PICTO_SLOTS as dx,
-  ChartAxisSchema as dy,
-  createChartAxis as dz,
+  createChartSeriesBar as d$,
+  createExerciseDocument as d0,
+  isExerciseDocument as d1,
+  VOP_OPERATORS as d2,
+  normalizeVopOperator as d3,
+  VopDigitCellSchema as d4,
+  VopLabelCellSchema as d5,
+  VopInputCellSchema as d6,
+  VopEmptyCellSchema as d7,
+  VopColorCellSchema as d8,
+  VopBoldCellSchema as d9,
+  GRID_SYMMETRY_MAX_COLS as dA,
+  GRID_SYMMETRY_MIN_CELL_SIZE as dB,
+  GRID_SYMMETRY_MAX_CELL_SIZE as dC,
+  isCellInInteractiveArea as dD,
+  reflectGridSymmetryCell as dE,
+  computeGridSymmetryExpectedCells as dF,
+  computeGridSymmetryCellsToFill as dG,
+  GridSymmetryBlockSchema as dH,
+  createGridSymmetryBlock as dI,
+  isGridSymmetryBlock as dJ,
+  CHART_TYPES as dK,
+  CHART_AXIS_DEFAULTS as dL,
+  CHART_MAX_AXIS_TICKS as dM,
+  CHART_MAX_PICTO_SLOTS as dN,
+  ChartAxisSchema as dO,
+  createChartAxis as dP,
+  isChartAxis as dQ,
+  ChartPictoSchema as dR,
+  createChartPicto as dS,
+  isChartPicto as dT,
+  ChartBarSchema as dU,
+  createChartBar as dV,
+  isChartBar as dW,
+  ChartSeriesSchema as dX,
+  createChartSeries as dY,
+  isChartSeries as dZ,
+  ChartSeriesBarSchema as d_,
+  VopHighlightCellSchema as da,
+  VopCellSchema as db,
+  createVopDigitCell as dc,
+  createVopInputCell as dd,
+  createVopLabelCell as de,
+  createVopEmptyCell as df,
+  createVopColorCell as dg,
+  createVopBoldCell as dh,
+  createVopHighlightCell as di,
+  VopRowSchema as dj,
+  createVopRow as dk,
+  VopCarryRowSchema as dl,
+  createVopCarryRow as dm,
+  VopSeparatorSchema as dn,
+  createVopSeparator as dp,
+  VerticalOperationBlockSchema as dq,
+  createVerticalOperationBlock as dr,
+  isVopCell as ds,
+  isVopRow as dt,
+  isVopCarryRow as du,
+  isVopSeparator as dv,
+  isVerticalOperationBlock as dw,
+  GRID_SYMMETRY_AXES as dx,
+  GRID_SYMMETRY_INTERACTIVE_AREAS as dy,
+  GRID_SYMMETRY_MAX_ROWS as dz,
   parseSafe as e,
+  isChartSeriesBar as e0,
+  ChartGroupSchema as e1,
+  createChartGroup as e2,
+  isChartGroup as e3,
+  alignGroupBarsToSeries as e4,
+  ChartBlockSchema as e5,
+  resolveChartAxes as e6,
+  validateUniqueIds as e7,
+  createChartBlock as e8,
+  isChartBlock as e9,
+  GeometryBlockSchema as ea,
+  createGeometryBlock as eb,
+  isGeometryBlock as ec,
   toAST as f,
   getFractionKey as g,
   toJSON as h,
@@ -23466,4 +24288,4 @@ export {
   extractVariables as y,
   validateBooleanExpression as z
 };
-//# sourceMappingURL=index-Daj5xH0X.mjs.map
+//# sourceMappingURL=index-BLrnKegW.mjs.map