@mathscan/math-exercise-engine 1.2.13 → 1.2.15

package/dist/{index-CAvdtiDQ.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);
@@ -2091,6 +2167,8 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     width: InlineInputWidthSchema,
     placeholder: z.string().max(32).optional(),
     disabled: z.boolean().optional(),
+    /** Starting value the student can edit (shown read-only when disabled). */
+    prefill: z.string().optional(),
     answer: z.union([z.string(), z.number()]).optional()
   }),
   z.object({
@@ -2101,9 +2179,19 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     width: InlineInputWidthSchema,
     placeholder: z.string().max(32).optional(),
     disabled: z.boolean().optional(),
+    /** Starting value the student can edit (shown read-only when disabled). */
+    prefill: z.string().optional(),
     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(),
@@ -2217,6 +2305,7 @@ const InlineNodeSchema = z.union([
   ColorTextInlineSchema,
   BoldTextInlineSchema,
   InlineInputWidgetSchema,
+  DropInputSchema,
   FractionInlineSchema,
   ImageInlineSchema,
   VisualFractionInlineSchema,
@@ -2256,7 +2345,7 @@ function createBoldText(value, highlight) {
     highlight
   });
 }
-function createStringInput(name, length, answer, placeholder, disabled, width) {
+function createStringInput(name, length, answer, placeholder, disabled, width, prefill) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2267,13 +2356,14 @@ function createStringInput(name, length, answer, placeholder, disabled, width) {
       width,
       placeholder,
       disabled,
+      prefill,
       // A disabled input is never graded, so its answer is dropped.
       answer: disabled ? void 0 : answer
     },
     "STRING_INPUT"
   );
 }
-function createNumericInput(name, digits, answer, placeholder, disabled, width) {
+function createNumericInput(name, digits, answer, placeholder, disabled, width, prefill) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2284,12 +2374,26 @@ function createNumericInput(name, digits, answer, placeholder, disabled, width)
       width,
       placeholder,
       disabled,
+      prefill,
       // A disabled input is never graded, so its answer is dropped.
       answer: disabled ? void 0 : answer
     },
     "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,
@@ -2344,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;
 }
@@ -2398,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}`
@@ -3111,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(),
@@ -3131,6 +3277,7 @@ const SetSquareToolSchema = z.object({
 });
 const ToolNodeSchema = z.discriminatedUnion("type", [
   DragOptionsToolSchema,
+  DraggableOptionsToolObjectSchema,
   NumericKeypadToolSchema,
   RulerToolSchema,
   ProtractorToolSchema,
@@ -3142,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,
@@ -3162,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;
 }
@@ -3720,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"]);
@@ -3739,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"]);
@@ -3784,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;
@@ -4192,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);
     }
@@ -4323,6 +4560,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const name = params.name;
     const answer = params.answer;
     const placeholder = params.placeholder;
+    const prefill = params.prefill === void 0 ? void 0 : String(params.prefill);
     let disabled;
     if (params.disabled === true || params.disabled === "true") disabled = true;
     else if (params.disabled === false || params.disabled === "false") disabled = false;
@@ -4340,10 +4578,22 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     if (ctx.stringInput) {
       const length = params.length;
-      return createStringInput(name, length, answer, placeholder, disabled, width);
+      return createStringInput(name, length, answer, placeholder, disabled, width, prefill);
     }
     const digits = params.digits;
-    return createNumericInput(name, digits, answer, placeholder, disabled, width);
+    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];
@@ -4483,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);
     }
@@ -4500,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);
@@ -5087,7 +5367,9 @@ const StringInputJSONSchema = z.object({
   width: InlineInputWidthSchema,
   placeholder: z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
-  disabled: z.boolean().optional()
+  disabled: z.boolean().optional(),
+  /** Starting value the student can edit (shown read-only when disabled). */
+  prefill: z.string().optional()
 });
 const NumericInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
@@ -5097,16 +5379,38 @@ const NumericInputJSONSchema = z.object({
   width: InlineInputWidthSchema,
   placeholder: z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
-  disabled: z.boolean().optional()
+  disabled: z.boolean().optional(),
+  /** Starting value the student can edit (shown read-only when disabled). */
+  prefill: z.string().optional()
 });
 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)
@@ -5216,7 +5520,9 @@ const GeometryJSONSchema = z.object({
 });
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
+  DropInputJSONSchema,
   DragOptionsJSONSchema,
+  DraggableOptionsJSONSchema,
   InlineDragOptionJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
@@ -5333,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;
 }
@@ -10869,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;
@@ -10992,8 +11313,10 @@ function toJSON(ast) {
       layout.push(...lineItems);
     }
   }
+  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;
       if (inline.inputType === INPUT_TYPES.STRING) {
         widgets[inline.name] = {
           type: JSON_TYPES.INLINE_INPUT,
@@ -11001,7 +11324,8 @@ function toJSON(ast) {
           length: inline.length,
           ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
-          ...inline.disabled && { disabled: true }
+          ...disabled && { disabled: true },
+          ...inline.prefill !== void 0 && { prefill: inline.prefill }
         };
       } else {
         widgets[inline.name] = {
@@ -11010,12 +11334,20 @@ function toJSON(ast) {
           digits: inline.digits,
           ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
-          ...inline.disabled && { disabled: true }
+          ...disabled && { disabled: true },
+          ...inline.prefill !== void 0 && { prefill: inline.prefill }
         };
       }
-      if (inline.answer !== void 0) {
+      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;
     }
@@ -11027,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;
       }
     }
@@ -11103,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,
@@ -11568,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),
@@ -11624,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 {
@@ -11633,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);
@@ -11671,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);
 }
@@ -12239,7 +12596,20 @@ function revealGeometryWidget(json) {
   if (!revealAnswer(store, loaded.data).success) return null;
   return serializeGeometryState(store.getState().geometry);
 }
+function withDisabledPrefilledInputs(exercise) {
+  if (exercise.widgets[DRAG_OPTIONS_WIDGET_ID]?.type !== JSON_TYPES.DRAG_OPTIONS) return 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 && !widget.disabled) {
+      widgets[id] = { ...widget, disabled: true };
+      changed = true;
+    }
+  }
+  return changed ? { ...exercise, widgets } : exercise;
+}
 function withoutDisabledWidgets(exercise) {
+  exercise = withDisabledPrefilledInputs(exercise);
   const validation = exercise.validation;
   if (!validation) return exercise;
   const disabled = new Set(
@@ -12262,6 +12632,7 @@ function withoutDisabledWidgets(exercise) {
   };
 }
 function findDisabledInExpression(exercise) {
+  exercise = withDisabledPrefilledInputs(exercise);
   const expression = exercise.validation?.expression;
   if (!expression) return [];
   return extractVariables(expression, Object.keys(exercise.widgets)).filter((name) => exercise.widgets[name] && isDisabledInputJSON(exercise.widgets[name]));
@@ -12403,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)) {
@@ -12425,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",
@@ -12438,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
@@ -12445,6 +12830,7 @@ const DragItemSchema = (dataSchema) => z.object({
   data: dataSchema
 });
 DragItemSchema(DragOptionDataSchema);
+DragItemSchema(RichDragOptionDataSchema);
 z.object({
   targetId: z.string(),
   item: z.discriminatedUnion("type", [
@@ -16225,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);
@@ -16266,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) => {
@@ -16309,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;
@@ -16335,22 +16729,22 @@ const Draggable = ({
   data,
   disabled = false,
   children,
-  className = ""
+  className = "",
+  behavior = "move"
 }) => {
   const dragItem = { id, type, data };
   const {
     attributes,
     listeners,
     setNodeRef,
-    transform,
     isDragging
   } = useDraggable({
     id,
     data: dragItem,
     disabled
   });
+  const isCopy = behavior === "copy";
   const style = {
-    transform: CSS$1.Translate.toString(transform),
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
   };
@@ -16359,7 +16753,7 @@ const Draggable = ({
     {
       ref: setNodeRef,
       style,
-      className: `draggable ${isDragging ? "dragging" : ""} ${className}`,
+      className: `draggable ${isDragging && !isCopy ? "dragging" : ""} ${className}`,
       ...listeners,
       ...attributes,
       children
@@ -17101,6 +17495,16 @@ const SlotSizer = ({
     style: { ...style, visibility: "hidden" }
   }
 );
+const FixedInputChip = ({ value }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: "inline-input-chip",
+    disabled: true,
+    style: OVERLAY_STYLE,
+    children: value
+  }
+);
 const PlacedInputChip = ({
   widgetId,
   value,
@@ -17141,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;
@@ -17170,6 +17577,8 @@ function findNextInput(container, currentKey) {
 }
 const KeypadContext = createContext(false);
 const useHasKeypad = () => useContext(KeypadContext);
+const DragBankContext = createContext(false);
+const useHasDragBank = () => useContext(DragBankContext);
 const InlineInput = ({
   widgetId,
   value,
@@ -17187,6 +17596,7 @@ const InlineInput = ({
   const playSound = useSound();
   const locked = useExerciseLocked();
   const hasKeypad = useHasKeypad();
+  const hasDragBank = useHasDragBank();
   const handleChange = useCallback((newValue, fromDrop = false, sourceOptionId) => {
     onChange(widgetId, newValue, fromDrop, sourceOptionId);
   }, [onChange, widgetId]);
@@ -17194,9 +17604,10 @@ 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 !== "";
   return /* @__PURE__ */ jsx(
     Droppable,
     {
@@ -17205,7 +17616,10 @@ const InlineInput = ({
       onDrop: handleDrop,
       disabled: locked || disabled,
       className: "inline-widget inline-input-droppable",
-      children: isDropped && value !== "" ? (
+      children: isFixedChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SlotSizer, { className: "inline-input", style: { width: dynamicWidth }, placeholder }),
+        /* @__PURE__ */ jsx(FixedInputChip, { value })
+      ] }) : isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
         /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
@@ -17262,11 +17676,13 @@ const DragOptionChip = ({
   onOptionClick,
   className = ""
 }) => {
-  const { usedOptionIds, hasDraggedOption, playHintSound } = useExerciseDnd();
+  const { activeItem, usedOptionIds, hasDraggedOption, playHintSound } = useExerciseDnd();
   const locked = useExerciseLocked();
   const isUsed = usedOptionIds.has(optionId);
+  const isPickedUp = activeItem?.type === "drag-option" && activeItem.id === optionId;
   const { jiggling: hinting, onAnimationEnd: onHintEnd } = useJiggle(hasDraggedOption);
-  return /* @__PURE__ */ jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+  const emptySlot = /* @__PURE__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true", children: /* @__PURE__ */ jsx("button", { className: "drag-option", disabled: true, children: value }) });
+  return /* @__PURE__ */ jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? emptySlot : /* @__PURE__ */ jsx(
     Draggable,
     {
       id: optionId,
@@ -17274,7 +17690,7 @@ const DragOptionChip = ({
       data: { value, label: value },
       disabled: locked,
       className: "drag-option-wrapper",
-      children: /* @__PURE__ */ jsx(
+      children: isPickedUp ? emptySlot : /* @__PURE__ */ jsx(
         "button",
         {
           className: hinting && !locked ? "drag-option drag-option--hint" : "drag-option",
@@ -17392,100 +17808,476 @@ 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: "÷" })
-  ] });
-};
-const FractionInput = ({
-  widgetId,
-  numerator,
-  denominator,
-  values,
-  droppedInputs,
-  validationStatus = null,
-  numValidationStatus = null,
-  denValidationStatus = null,
-  onChange,
-  onFocus,
-  placeholder
-}) => {
-  const playSound = useSound();
-  const locked = useExerciseLocked();
-  const hasKeypad = useHasKeypad();
-  const numKey = getFractionKey(widgetId, "num");
-  const denKey = getFractionKey(widgetId, "den");
-  const numValue = values[numKey] ?? "";
-  const denValue = values[denKey] ?? "";
-  const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
-  const handleDrop = useCallback((subKey) => (item) => {
-    return applyDropToInput(subKey, item, onChange);
-  }, [onChange]);
-  const renderSlot = (subKey, fixedValue, currentValue, label, slotStatus) => {
-    if (fixedValue !== null) {
-      return /* @__PURE__ */ jsx("span", { className: "fraction-fixed", children: fixedValue });
-    }
-    const isDroppedHere = droppedInputs.has(subKey);
-    const slotClass = slotStatus ? ` widget--${slotStatus}` : statusClass;
-    return /* @__PURE__ */ jsx(
-      Droppable,
-      {
-        id: subKey,
-        accepts: ["drag-option", "placed-chip"],
-        onDrop: handleDrop(subKey),
-        disabled: locked,
-        className: "fraction-slot-droppable",
-        children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            SlotSizer,
-            {
-              className: "inline-input fraction-input",
-              size: placeholder ? placeholder.length : void 0,
-              placeholder
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            PlacedInputChip,
-            {
-              widgetId: subKey,
-              value: currentValue,
-              className: `fraction-chip${slotClass}`,
-              onRemove: () => onChange(subKey, "", false)
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
+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,
+  numerator,
+  denominator,
+  values,
+  droppedInputs,
+  validationStatus = null,
+  numValidationStatus = null,
+  denValidationStatus = null,
+  onChange,
+  onFocus,
+  placeholder
+}) => {
+  const playSound = useSound();
+  const locked = useExerciseLocked();
+  const hasKeypad = useHasKeypad();
+  const numKey = getFractionKey(widgetId, "num");
+  const denKey = getFractionKey(widgetId, "den");
+  const numValue = values[numKey] ?? "";
+  const denValue = values[denKey] ?? "";
+  const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
+  const handleDrop = useCallback((subKey) => (item) => {
+    return applyDropToInput(subKey, item, onChange);
+  }, [onChange]);
+  const renderSlot = (subKey, fixedValue, currentValue, label, slotStatus) => {
+    if (fixedValue !== null) {
+      return /* @__PURE__ */ jsx("span", { className: "fraction-fixed", children: fixedValue });
+    }
+    const isDroppedHere = droppedInputs.has(subKey);
+    const slotClass = slotStatus ? ` widget--${slotStatus}` : statusClass;
+    return /* @__PURE__ */ jsx(
+      Droppable,
+      {
+        id: subKey,
+        accepts: ["drag-option", "placed-chip"],
+        onDrop: handleDrop(subKey),
+        disabled: locked,
+        className: "fraction-slot-droppable",
+        children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SlotSizer,
+            {
+              className: "inline-input fraction-input",
+              size: placeholder ? placeholder.length : void 0,
+              placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlacedInputChip,
+            {
+              widgetId: subKey,
+              value: currentValue,
+              className: `fraction-chip${slotClass}`,
+              onRemove: () => onChange(subKey, "", false)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
           "input",
           {
             id: getInputElementId(subKey),
@@ -19230,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,
@@ -19678,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";
 }
@@ -19709,7 +20472,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await import("./GeometryWidget-h2yNZsas.mjs")).GeometryWidget
+  default: (await import("./GeometryWidget-DZWM4LcD.mjs")).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -19747,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,
@@ -19757,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,
@@ -20106,67 +20905,6 @@ const ImageItem = ({
     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;
-};
-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);
@@ -21623,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" : "";
@@ -22011,7 +22692,7 @@ const LayoutRenderer = ({
       return null;
   }
 };
-function LionHand({ className }) {
+function ChameleonHand({ className }) {
   const id = useId();
   const shadowId = `${id}-shadow`;
   const maskId = `${id}-mask`;
@@ -22038,34 +22719,100 @@ function LionHand({ className }) {
               y: "19",
               width: "49",
               height: "42",
-              children: /* @__PURE__ */ jsx("path", { d: "M49.7484 33.9668C58.158 45.6281 37.9572 61.4399 28.1745 60.1051C17.1397 58.5995 5.03802 42.2474 10.4349 38.3224C15.8318 34.3974 18.9715 32.4031 23.1181 30.1278C24.1486 29.5624 25.1742 29.0263 26.1947 28.5358C33.7314 24.764 52.8138 16.0308 57.0969 21.97C59.9201 25.8848 54.8651 28.9522 48.1097 31.8806C48.658 32.518 49.2042 33.2123 49.7484 33.9668Z", fill: "#FCD592" })
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M49.7484 33.9668C58.158 45.6281 37.9572 61.4399 28.1745 60.1051C17.1397 58.5995 5.03802 42.2474 10.4349 38.3224C15.8318 34.3974 18.9715 32.4031 23.1181 30.1278C24.1486 29.5624 25.1742 29.0263 26.1947 28.5358C33.7314 24.764 52.8138 16.0308 57.0969 21.97C59.9201 25.8848 54.8651 28.9522 48.1097 31.8806C48.658 32.518 49.2042 33.2123 49.7484 33.9668Z",
+                  fill: "#B7DB4E"
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxs("g", { mask: `url(#${maskId})`, children: [
-            /* @__PURE__ */ jsx("path", { d: "M49.7484 33.9672C58.158 45.6285 38.3118 60.3151 32.1037 64.7332C22.6672 71.4486 2.68204 43.9969 12.2424 37.1926C15.1884 35.0959 18.9716 32.4035 23.1182 30.1282C24.7308 29.2433 26.3314 28.4303 27.9195 27.7514C36.611 23.6398 54.4269 16.1501 58.4471 21.7248C61.34 25.7362 55.5686 28.9294 48.2024 31.9893C48.7196 32.5968 49.2349 33.2552 49.7484 33.9672Z", fill: "#FCD592" }),
-            /* @__PURE__ */ jsx("path", { d: "M12.2426 37.1924C2.68223 43.9967 22.6674 71.4485 32.1039 64.733C31.3434 63.6785 26.4317 61.1668 25.3134 59.6161C24.1951 58.0654 22.794 50.5211 22.123 49.5907C21.4521 48.6603 16.3219 45.7409 15.5637 44.4032C14.8055 43.0655 13.8979 39.4877 14.7258 35.4253L12.2426 37.1924Z", fill: "#6B291E" }),
-            /* @__PURE__ */ jsx("path", { d: "M50.4102 36.1737C50.6823 37.524 52.0035 38.4016 53.3614 38.1339C54.7192 37.8662 55.5994 36.5546 55.3274 35.2043L52.8688 35.689L50.4102 36.1737ZM38.8014 26.9523C37.4241 27.0934 36.425 28.3178 36.5697 29.6872C36.7144 31.0565 37.9482 32.0522 39.3255 31.9111L39.0634 29.4317L38.8014 26.9523ZM52.8688 35.689C55.3274 35.2043 55.327 35.2023 55.3266 35.2004C55.3265 35.1997 55.326 35.1977 55.3258 35.1963C55.3252 35.1935 55.3246 35.1906 55.324 35.1875C55.3227 35.1815 55.3213 35.1749 55.3198 35.1679C55.3168 35.1539 55.3133 35.1379 55.3092 35.1201C55.3011 35.0845 55.2907 35.0415 55.2779 34.9916C55.2522 34.8918 55.2163 34.764 55.1676 34.6127C55.0703 34.3106 54.9205 33.911 54.6961 33.4507C54.247 32.5296 53.4925 31.3535 52.2552 30.241C49.7078 27.9508 45.5021 26.2658 38.8014 26.9523L39.0634 29.4317L39.3255 31.9111C44.9159 31.3384 47.6128 32.782 48.8954 33.9352C49.5731 34.5445 49.9653 35.1687 50.1842 35.6177C50.2938 35.8424 50.3584 36.0201 50.3919 36.1242C50.4086 36.1759 50.4172 36.2084 50.4197 36.2181C50.4209 36.223 50.4206 36.222 50.419 36.2148C50.4181 36.2111 50.417 36.2059 50.4155 36.1991C50.4148 36.1957 50.414 36.1919 50.4131 36.1876C50.4127 36.1855 50.4122 36.1833 50.4117 36.181C50.4115 36.1798 50.4111 36.178 50.411 36.1774C50.4106 36.1755 50.4102 36.1737 52.8688 35.689Z", fill: "#A2634A" }),
-            /* @__PURE__ */ jsx("path", { d: "M54.7526 47.3947C55.5602 48.5146 57.1269 48.7734 58.2518 47.9729C59.3767 47.1723 59.634 45.6155 58.8264 44.4956L56.7895 45.9452L54.7526 47.3947ZM38.1539 36.5617C36.7805 36.7357 35.8113 37.9837 35.9891 39.3493C36.1669 40.7148 37.4244 41.6808 38.7978 41.5068L38.4758 39.0342L38.1539 36.5617ZM56.7895 45.9452L58.8264 44.4956C57.4277 42.5562 55.3182 40.1317 51.9378 38.4204C48.5385 36.6995 44.0772 35.8112 38.1539 36.5617L38.4758 39.0342L38.7978 41.5068C43.8796 40.863 47.3003 41.6624 49.6691 42.8616C52.0569 44.0704 53.6015 45.7985 54.7526 47.3947L56.7895 45.9452Z", fill: "#A2634A" })
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M49.7484 33.9672C58.158 45.6285 38.3118 60.3151 32.1037 64.7332C22.6672 71.4486 2.68204 43.9969 12.2424 37.1926C15.1884 35.0959 18.9716 32.4035 23.1182 30.1282C24.7308 29.2433 26.3314 28.4303 27.9195 27.7514C36.611 23.6398 54.4269 16.1501 58.4471 21.7248C61.34 25.7362 55.5686 28.9294 48.2024 31.9893C48.7196 32.5968 49.2349 33.2552 49.7484 33.9672Z",
+                fill: "#B7DB4E"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M50.4102 36.1737C50.6823 37.524 52.0035 38.4016 53.3614 38.1339C54.7192 37.8662 55.5994 36.5546 55.3274 35.2043L52.8688 35.689L50.4102 36.1737ZM38.8014 26.9523C37.4241 27.0934 36.425 28.3178 36.5697 29.6872C36.7144 31.0565 37.9482 32.0522 39.3255 31.9111L39.0634 29.4317L38.8014 26.9523ZM52.8688 35.689C55.3274 35.2043 55.327 35.2023 55.3266 35.2004C55.3265 35.1997 55.326 35.1977 55.3258 35.1963C55.3252 35.1935 55.3246 35.1906 55.324 35.1875C55.3227 35.1815 55.3213 35.1749 55.3198 35.1679C55.3168 35.1539 55.3133 35.1379 55.3092 35.1201C55.3011 35.0845 55.2907 35.0415 55.2779 34.9916C55.2522 34.8918 55.2163 34.764 55.1676 34.6127C55.0703 34.3106 54.9205 33.911 54.6961 33.4507C54.247 32.5296 53.4925 31.3535 52.2552 30.241C49.7078 27.9508 45.5021 26.2658 38.8014 26.9523L39.0634 29.4317L39.3255 31.9111C44.9159 31.3384 47.6128 32.782 48.8954 33.9352C49.5731 34.5445 49.9653 35.1687 50.1842 35.6177C50.2938 35.8424 50.3584 36.0201 50.3919 36.1242C50.4086 36.1759 50.4172 36.2084 50.4197 36.2181C50.4209 36.223 50.4206 36.222 50.419 36.2148C50.4181 36.2111 50.417 36.2059 50.4155 36.1991C50.4148 36.1957 50.414 36.1919 50.4131 36.1876C50.4127 36.1855 50.4122 36.1833 50.4117 36.181C50.4115 36.1798 50.4111 36.178 50.411 36.1774C50.4106 36.1755 50.4102 36.1737 52.8688 35.689Z",
+                fill: "#9CAF63"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M54.7526 47.3947C55.5602 48.5146 57.1269 48.7734 58.2518 47.9729C59.3767 47.1723 59.634 45.6155 58.8264 44.4956L56.7895 45.9452L54.7526 47.3947ZM38.1539 36.5617C36.7805 36.7357 35.8113 37.9837 35.9891 39.3493C36.1669 40.7148 37.4244 41.6808 38.7978 41.5068L38.4758 39.0342L38.1539 36.5617ZM56.7895 45.9452L58.8264 44.4956C57.4277 42.5562 55.3182 40.1317 51.9378 38.4204C48.5385 36.6995 44.0772 35.8112 38.1539 36.5617L38.4758 39.0342L38.7978 41.5068C43.8796 40.863 47.3003 41.6624 49.6691 42.8616C52.0569 44.0704 53.6015 45.7985 54.7526 47.3947L56.7895 45.9452Z",
+                fill: "#9CAF63"
+              }
+            )
           ] })
         ] }),
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: shadowId, x: "-1.99995", y: "0", width: "78.3658", height: "81.8518", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
-          /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
-          /* @__PURE__ */ jsx("feOffset", { dy: "2" }),
-          /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1" }),
-          /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
-          /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
-          /* @__PURE__ */ jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }),
-          /* @__PURE__ */ jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })
-        ] }) })
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: shadowId,
+            x: "-1.99995",
+            y: "0",
+            width: "78.3658",
+            height: "81.8518",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+              /* @__PURE__ */ jsx(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  type: "matrix",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                  result: "hardAlpha"
+                }
+              ),
+              /* @__PURE__ */ jsx("feOffset", { dy: "2" }),
+              /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1" }),
+              /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ jsx(
+                "feColorMatrix",
+                {
+                  type: "matrix",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        ) })
       ]
     }
   );
 }
 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;
@@ -22083,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(
@@ -22119,6 +22865,8 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     tick();
     return () => cancelAnimationFrame(raf);
   }, [step]);
+  const showBubble = options.showBubble !== false;
+  const autoAdvance = options.autoAdvance === true || !showBubble;
   const [tapIndex, setTapIndex] = useState(0);
   const [tapCount, setTapCount] = useState(0);
   const [shownStep, setShownStep] = useState(stepIndex);
@@ -22128,11 +22876,13 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
     setTapCount(0);
   }
   useEffect(() => {
+    const targets = step.taps(ctxRef.current);
+    if (autoAdvance && tapIndex >= targets.length) return;
     let release;
     const press = setTimeout(() => {
       setTapCount((n) => n + 1);
-      const targets = step.taps(ctxRef.current);
-      const el = targets[tapIndex % Math.max(1, targets.length)];
+      const targets2 = step.taps(ctxRef.current);
+      const el = targets2[tapIndex % Math.max(1, targets2.length)];
       if (el instanceof Element) {
         el.classList.add("met-tutorial-pressed");
         release = setTimeout(() => el.classList.remove("met-tutorial-pressed"), PRESS_HOLD_MS);
@@ -22145,23 +22895,51 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
       if (release) clearTimeout(release);
       root.querySelectorAll(".met-tutorial-pressed").forEach((el) => el.classList.remove("met-tutorial-pressed"));
     };
-  }, [step, tapIndex, root]);
+  }, [step, tapIndex, root, autoAdvance]);
   const text = options.texts?.[step.id] ?? step.text;
   const textRef = useRef(text);
   textRef.current = text;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const isLast = stepIndex === steps.length - 1;
+  const [completedStep, setCompletedStep] = useState(null);
   useEffect(() => {
     optionsRef.current.onStep?.(stepIndex, step.id);
-    optionsRef.current.onSpeak?.(step.id, textRef.current);
-  }, [stepIndex, step]);
-  const isLast = stepIndex === steps.length - 1;
+    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;
+    let cancelled = false;
+    let timer;
+    const animation = new Promise((resolve2) => {
+      timer = setTimeout(resolve2, duration);
+    });
+    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);
+        else onCloseRef.current(true);
+      } else setStepIndex((i) => i + 1);
+    });
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+      clearTimeout(speechTimer);
+    };
+  }, [stepIndex, step, autoAdvance, isLast, showBubble]);
+  const showNext = !autoAdvance || isLast && completedStep === stepIndex;
   const next = () => {
     if (isLast) onClose(true);
     else setStepIndex((i) => i + 1);
   };
   const overlayRef = useRef(null);
   const nextRef = useRef(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
   useEffect(() => {
     const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     previous?.blur();
@@ -22194,15 +22972,15 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
   }, []);
   const bubbleShown = layout !== null;
   useEffect(() => {
-    nextRef.current?.focus({ focusVisible: false });
-  }, [stepIndex, bubbleShown]);
+    (nextRef.current ?? overlayRef.current)?.focus({ focusVisible: false });
+  }, [stepIndex, bubbleShown, showNext]);
   const maskId = `met-tutorial-mask-${useId()}`;
   if (typeof document === "undefined") return null;
   const holes = (layout?.spotlight ?? []).filter((r) => r !== null);
-  const tapTarget = layout?.taps.length ? layout.taps[tapIndex % layout.taps.length] ?? null : null;
+  const tapTarget = layout?.taps.length && (!autoAdvance || tapIndex < layout.taps.length) ? layout.taps[tapIndex % layout.taps.length] ?? null : null;
   const Scene = step.Scene;
   return createPortal(
-    /* @__PURE__ */ jsxs("div", { ref: overlayRef, className: "met-tutorial", role: "dialog", "aria-modal": "true", "aria-label": text, children: [
+    /* @__PURE__ */ jsxs("div", { ref: overlayRef, className: "met-tutorial", tabIndex: -1, role: "dialog", "aria-modal": "true", "aria-label": text, children: [
       /* @__PURE__ */ jsxs("svg", { className: "met-tutorial-dim", "aria-hidden": "true", children: [
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
           /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
@@ -22237,7 +23015,7 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
       )),
       Scene && layout && /* @__PURE__ */ jsx(Scene, { ctx, spotlight: layout.spotlight, taps: layout.taps, tapCount }),
       tapTarget && /* @__PURE__ */ jsx(Hand, { target: tapTarget, tapKey: `${stepIndex}-${tapIndex}` }),
-      layout && /* @__PURE__ */ jsx(
+      layout && showBubble && /* @__PURE__ */ jsx(
         Bubble,
         {
           layout,
@@ -22245,7 +23023,8 @@ const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
           stepIndex,
           stepCount: steps.length,
           nextLabel: options.nextLabel ?? DEFAULT_NEXT_LABEL,
-          onSpeak: options.onSpeak && (options.canSpeak?.(step.id) ?? true) ? () => optionsRef.current.onSpeak?.(step.id, textRef.current) : void 0,
+          showNext,
+          onSpeak: !autoAdvance && options.onSpeak && (options.canSpeak?.(step.id) ?? true) ? () => optionsRef.current.onSpeak?.(step.id, textRef.current) : void 0,
           onNext: next,
           nextRef
         }
@@ -22273,12 +23052,12 @@ const Hand = ({ target, tapKey }) => {
             style: { left: TUTORIAL_HAND_TIP.x * HAND_W, top: TUTORIAL_HAND_TIP.y * HAND_H }
           }
         ),
-        /* @__PURE__ */ jsx(LionHand, {})
+        /* @__PURE__ */ jsx(ChameleonHand, {})
       ] }, tapKey)
     }
   );
 };
-const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, onSpeak, onNext, nextRef }) => {
+const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, showNext, onSpeak, onNext, nextRef }) => {
   const { anchor, root, vw, vh } = layout;
   const clampLeft = (x) => Math.min(Math.max(EDGE, x), Math.max(EDGE, vw - BUBBLE_W - EDGE));
   const style = anchor ? { left: clampLeft(anchor.x), bottom: Math.max(EDGE, vh - anchor.y + BUBBLE_GAP), width: BUBBLE_W } : { left: clampLeft((root?.x ?? 0) + EDGE * 2), top: (root?.y ?? 0) + EDGE * 2, width: BUBBLE_W };
@@ -22289,7 +23068,7 @@ const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, onSpeak, onNext
         /* @__PURE__ */ jsx("path", { d: "M4 9v6h4l5 4V5L8 9H4z", fill: "currentColor" }),
         /* @__PURE__ */ jsx("path", { d: "M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
       ] }) }),
-      /* @__PURE__ */ jsx("button", { ref: nextRef, type: "button", className: "met-tutorial-next", onClick: onNext, children: nextLabel })
+      showNext && /* @__PURE__ */ jsx("button", { ref: nextRef, type: "button", className: "met-tutorial-next", onClick: onNext, children: nextLabel })
     ] }),
     stepCount > 1 && /* @__PURE__ */ jsx("div", { className: "met-tutorial-dots", "aria-hidden": "true", children: Array.from({ length: stepCount }, (_, i) => /* @__PURE__ */ jsx("span", { className: i === stepIndex ? "is-current" : i < stepIndex ? "is-done" : "" }, i)) })
   ] });
@@ -22307,9 +23086,18 @@ 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$/, "");
+  const expected = id ? ctx.json.validation?.answers?.[id] : void 0;
+  if (typeof expected !== "number" && typeof expected !== "string") return null;
+  const value = String(expected);
+  return /^\d+$/.test(value) ? [...value] : null;
 }
 function answerSlots(ctx) {
+  const digits = answerDigits(ctx);
+  if (digits) return digits.length;
   const id = answerBox(ctx)?.id.replace(/-input$/, "");
   const max = id ? getMaxInputLength(ctx.json, id) : void 0;
   return Math.min(MAX_SLOTS, Math.max(1, max ?? DEFAULT_SLOTS));
@@ -22325,40 +23113,49 @@ function checkTarget(ctx) {
     STAND_IN_CHECK_SIZE
   );
 }
-const demoKeys = (ctx) => DEMO_KEYS.map((k) => key(ctx, k));
-const StandInFill = ({ box, slots, filled }) => /* @__PURE__ */ jsx(
+const demoKeys = (ctx) => (answerDigits(ctx) ?? DEMO_KEYS).map((k) => key(ctx, k));
+const StandInFill = ({ box, slots, filled, digits }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: "met-tutorial-fill",
+    dir: "ltr",
     style: { left: box.x, top: box.y, width: box.width, height: box.height },
-    children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ jsx("span", { className: i < filled ? "met-tutorial-fill-dot" : "met-tutorial-fill-slot", children: i < filled ? "●" : "_" }, i))
+    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;
   const slots = answerSlots(ctx);
-  const filled = tapCount === 0 ? 0 : (tapCount - 1) % slots + 1;
+  const digits = answerDigits(ctx);
+  const filled = digits ? Math.min(tapCount, slots) : tapCount === 0 ? 0 : (tapCount - 1) % slots + 1;
   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}`;
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     arc && /* @__PURE__ */ jsx("svg", { className: "met-tutorial-arc", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: arc }) }),
-    arc && /* @__PURE__ */ jsx("div", { className: "met-tutorial-hop", style: { offsetPath: `path('${arc}')` } }, tapCount),
-    /* @__PURE__ */ jsx(StandInFill, { box, slots, filled })
+    arc && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `met-tutorial-hop${digits ? " met-tutorial-hop--digit" : ""}`,
+        style: { offsetPath: `path('${arc}')` },
+        children: digits?.[(tapCount - 1) % digits.length]
+      },
+      tapCount
+    ),
+    /* @__PURE__ */ jsx(StandInFill, { box, slots, filled, digits })
   ] });
 };
 const CheckScene = ({ ctx, spotlight }) => {
   const box = spotlight[0];
   const check = spotlight[1];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    box && /* @__PURE__ */ jsx(StandInFill, { box, slots: answerSlots(ctx), filled: answerSlots(ctx) }),
+    box && /* @__PURE__ */ jsx(StandInFill, { box, slots: answerSlots(ctx), filled: answerSlots(ctx), digits: answerDigits(ctx) }),
     check && !ctx.submitTarget && /* @__PURE__ */ jsx(
       "div",
       {
@@ -22399,13 +23196,82 @@ 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) {
+      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) {
+        const id = getFractionKey(widgetId, "num");
+        addTypedField(id, widgetId, validParts ? parts[0] : void 0);
+      }
+      if (widget.denominator === null) {
+        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(({ widgetId, matches }) => touched.has(widgetId) && matches).map(({ id }) => id);
+  return {
+    areSubmitGuideCountsMatched: fields.every(({ guideMatches }) => guideMatches),
+    isAnswerLengthMatched: fields.length > 0 && answerLengthMatchedIds.length === fields.length,
+    answerLengthMatchedIds
+  };
+}
 const TOOL_ASPECT_RATIO = {
   ruler: RULER_ASPECT_RATIO,
   protractor: PROTRACTOR_ASPECT_RATIO,
   "set-square": SET_SQUARE_ASPECT_RATIO
 };
 const FLIP_BTN_EXTRA = 44;
-const INPUT_FINISH_IDLE_MS = 1e3;
 function warnOnInvalidThemeColors(theme) {
   if (process.env.NODE_ENV === "production" || !theme) return;
   if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
@@ -22421,16 +23287,15 @@ 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) {
       initial[id] = serializeGeometryState(createEmptyGeometryAttempt());
+    } else if (widget.type === JSON_TYPES.INLINE_INPUT && widget.prefill !== void 0) {
+      initial[id] = widget.prefill;
     }
   }
   return initial;
@@ -22443,9 +23308,6 @@ function hasJustFilledBox(json, key2, previous, value) {
   if (maxLength === void 0) return false;
   return String(previous ?? "").length < maxLength && String(value).length >= maxLength;
 }
-function isTypedInputKey(json, key2) {
-  return json.widgets[key2]?.type === JSON_TYPES.INLINE_INPUT || Boolean(parseFractionKey(key2));
-}
 function buildInitialValuesSignature(json) {
   return JSON.stringify({
     widgets: json.widgets,
@@ -22466,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;
@@ -22499,490 +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,
-  onSubmit,
-  onChange,
-  showSubmitButton = false,
-  className = "",
-  soundEnabled = true,
-  sounds,
-  theme
-}, ref) => {
-  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 pendingRef = useRef(/* @__PURE__ */ new Map());
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const clearPending = (key2) => {
-    const timer = pendingRef.current.get(key2);
-    if (timer === void 0) return false;
-    clearTimeout(timer);
-    pendingRef.current.delete(key2);
-    return true;
-  };
-  const clearAllPending = () => {
-    pendingRef.current.forEach((timer) => clearTimeout(timer));
-    pendingRef.current = /* @__PURE__ */ new Map();
-  };
-  const finishPending = (key2) => {
-    if (clearPending(key2)) onChangeRef.current?.(valuesRef.current);
-  };
-  useEffect(() => clearAllPending, []);
-  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);
-    clearAllPending();
-  }, [json, initialValuesSignature, loadedValuesSignature]);
-  const locked = validationDetails !== null || externallyLocked;
-  const lastResultRef = useRef(null);
-  const runSubmit = () => {
-    if (locked) return lastResultRef.current ?? validate(json, values);
-    clearAllPending();
-    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 isAnyFilled = answerable.some((id) => !missingSet.has(id));
-      for (const key2 of pendingRef.current.keys()) {
-        const id = toBaseId(key2);
-        if (answerable.includes(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
-      };
-    },
-    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();
-      clearAllPending();
-    },
-    revealAnswers: () => {
-      const revealedValues = buildRevealedValues(json);
-      if (Object.keys(revealedValues).length === 0) return;
-      clearAllPending();
-      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[0]);
-      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;
-    });
-    if (!silent && isTypedInputKey(json, widgetId)) {
-      clearPending(widgetId);
-      const maxLength = getMaxInputLength(json, widgetId);
-      const isFull = maxLength !== void 0 && String(value).length >= maxLength;
-      if (!fromDrop && value !== "" && !isFull) {
-        pendingRef.current.set(
-          widgetId,
-          setTimeout(() => finishPending(widgetId), INPUT_FINISH_IDLE_MS)
-        );
-      }
-    }
-    onChange?.(next);
-    if (!fromDrop && !silent && hasJustFilledBox(json, widgetId, previous, value)) {
-      focusNextInput(widgetId);
-    }
-  };
-  const handleInputFocus = (key2) => {
-    for (const pendingKey of [...pendingRef.current.keys()]) {
-      if (pendingKey !== key2) finishPending(pendingKey);
-    }
-    setFocusedInputId(key2);
-  };
-  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__ */ 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: handleInputFocus,
-                      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: handleInputFocus,
-                      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: handleInputFocus,
-                    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);
-          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;
@@ -23020,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,
@@ -23036,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,
@@ -23327,4 +24288,4 @@ export {
   extractVariables as y,
   validateBooleanExpression as z
 };
-//# sourceMappingURL=index-CAvdtiDQ.mjs.map
+//# sourceMappingURL=index-BLrnKegW.mjs.map