@mathscan/math-exercise-engine 1.1.1 → 1.1.3

package/dist/index.mjs

@@ -21,6 +21,8 @@ const AST_TYPES = {
   BOLD_TEXT: "BoldText",
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "InlineInput",
+  /** Single inline draggable option (appears in-flow with text) */
+  INLINE_DRAG_OPTION: "InlineDragOption",
   /** Inline fraction widget (numerator/denominator with optional inputs) */
   FRACTION: "Fraction",
   /** Inline image element */
@@ -38,6 +40,16 @@ const AST_TYPES = {
   TABLE_ROW: "TableRow",
   /** Cell within a table row */
   TABLE_CELL: "TableCell",
+  /** Vertical operation (column arithmetic) block */
+  VERTICAL_OPERATION_BLOCK: "VerticalOperationBlock",
+  /** Row within a vertical operation */
+  VOP_ROW: "VopRow",
+  /** Cell within a vertical-operation row */
+  VOP_CELL: "VopCell",
+  /** Separator line within a vertical operation */
+  VOP_SEPARATOR: "VopSeparator",
+  /** Carry row within a vertical operation */
+  VOP_CARRY_ROW: "VopCarryRow",
   /** Number line layout block */
   NUMBER_LINE_BLOCK: "NumberLineBlock",
   /** A position marker on the number line */
@@ -52,6 +64,8 @@ const AST_TYPES = {
   MATCHER_ROW: "MatcherRow",
   /** Item within a matcher row */
   MATCHER_ITEM: "MatcherItem",
+  /** Pair-matcher layout block (top-row ↔ bottom-row pairing) */
+  PAIR_MATCHER_BLOCK: "PairMatcherBlock",
   /** Visual fraction inline widget */
   VISUAL_FRACTION: "VisualFraction",
   // ═══════════════════════════════════════════════════════════════════════════
@@ -70,6 +84,8 @@ const AST_TYPES = {
   SIMPLE_VALIDATION: "SimpleValidation",
   /** Expression-based validation */
   EXPRESSION_VALIDATION: "ExpressionValidation",
+  /** Mixed validation: per-widget simple answers + expression over free variables */
+  MIXED_VALIDATION: "MixedValidation",
   // ═══════════════════════════════════════════════════════════════════════════
   // Document
   // ═══════════════════════════════════════════════════════════════════════════
@@ -108,6 +124,16 @@ const JSON_TYPES = {
   TABLE_ROW: "table-row",
   /** Cell within a table */
   TABLE_CELL: "table-cell",
+  /** Vertical operation (column arithmetic) block */
+  VERTICAL_OPERATION: "vertical-operation",
+  /** Row within a vertical operation */
+  VOP_ROW: "vop-row",
+  /** Cell within a vertical-operation row */
+  VOP_CELL: "vop-cell",
+  /** Separator within a vertical operation */
+  VOP_SEPARATOR: "vop-separator",
+  /** Carry row within a vertical operation */
+  VOP_CARRY_ROW: "vop-carry-row",
   /** Number line layout block */
   NUMBER_LINE: "number-line",
   /** Position marker within a number line */
@@ -122,6 +148,8 @@ const JSON_TYPES = {
   MATCHER_ROW: "matcher-row",
   /** Item within a matcher row */
   MATCHER_ITEM: "matcher-item",
+  /** Pair-matcher widget (top-row ↔ bottom-row pairing) */
+  PAIR_MATCHER: "pair-matcher",
   // ═══════════════════════════════════════════════════════════════════════════
   // Widget Types
   // ═══════════════════════════════════════════════════════════════════════════
@@ -129,6 +157,8 @@ const JSON_TYPES = {
   INLINE_INPUT: "inline-input",
   /** Drag-and-drop options widget */
   DRAG_OPTIONS: "drag-options",
+  /** Single inline draggable option (appears in-flow with text) */
+  INLINE_DRAG_OPTION: "inline-drag-option",
   /** Radio button options widget */
   RADIO_OPTIONS: "radio-options",
   /** Numeric keypad widget */
@@ -139,11 +169,25 @@ const JSON_TYPES = {
   VISUAL_FRACTION: "visual-fraction"
 };
 const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
+const STATEFUL_WIDGET_TYPES = /* @__PURE__ */ new Set([
+  JSON_TYPES.MATCHER,
+  JSON_TYPES.PAIR_MATCHER,
+  JSON_TYPES.VISUAL_FRACTION
+]);
+const INLINE_DRAG_OPT_PREFIX = "_inline_drag_opt_";
+const RTL_INLINE_WIDGET_TYPES = /* @__PURE__ */ new Set([
+  JSON_TYPES.INLINE_INPUT,
+  JSON_TYPES.INLINE_DRAG_OPTION,
+  JSON_TYPES.FRACTION,
+  JSON_TYPES.VISUAL_FRACTION
+]);
 const VALIDATION_MODES = {
   /** Simple answer matching validation */
   SIMPLE: "simple",
   /** Expression-based validation using JavaScript expressions */
-  EXPRESSION: "expression"
+  EXPRESSION: "expression",
+  /** Mixed: simple per-widget answers AND a boolean expression over free variables */
+  MIXED: "mixed"
 };
 const INPUT_TYPES = {
   /** String/text input */
@@ -219,6 +263,10 @@ const STRING_INPUT = createToken({
   name: "STRING_INPUT",
   pattern: /STRING_INPUT/
 });
+const INLINE_DRAG_OPTION = createToken({
+  name: "INLINE_DRAG_OPTION",
+  pattern: /INLINE_DRAG_OPTION/
+});
 const DRAGABLE_BUTTONS_OPTIONS = createToken({
   name: "DRAGABLE_BUTTONS_OPTIONS",
   pattern: /DRAGABLE_BUTTONS_OPTIONS/
@@ -279,10 +327,22 @@ const FRACTION = createToken({
   name: "FRACTION",
   pattern: /FRACTION/
 });
+const PAIR_MATCHER = createToken({
+  name: "PAIR_MATCHER",
+  pattern: /PAIR_MATCHER/
+});
 const MATCHER = createToken({
   name: "MATCHER",
   pattern: /MATCHER/
 });
+const TOP_ROW = createToken({
+  name: "TOP_ROW",
+  pattern: /TOP_ROW/
+});
+const BOTTOM_ROW = createToken({
+  name: "BOTTOM_ROW",
+  pattern: /BOTTOM_ROW/
+});
 const ITEM = createToken({
   name: "ITEM",
   pattern: /ITEM/
@@ -295,6 +355,26 @@ const IMAGE = createToken({
   name: "IMAGE",
   pattern: /IMAGE/
 });
+const VERTICAL_OPERATION = createToken({
+  name: "VERTICAL_OPERATION",
+  pattern: /VERTICAL_OPERATION/
+});
+const SEP = createToken({
+  name: "SEP",
+  pattern: /SEP(?![a-zA-Z0-9_])/
+});
+const CARRY = createToken({
+  name: "CARRY",
+  pattern: /CARRY(?![a-zA-Z0-9_])/
+});
+const INPUT = createToken({
+  name: "INPUT",
+  pattern: /INPUT(?=\s*\[)/
+});
+const Underscore = createToken({
+  name: "Underscore",
+  pattern: /_(?![a-zA-Z0-9_])/
+});
 const NumberLiteral = createToken({
   name: "NumberLiteral",
   pattern: /-?\d+(\.\d+)?/
@@ -391,6 +471,7 @@ const allTokens = [
   HIGHLIGHT_TEXT,
   W_S_I,
   STRING_INPUT,
+  INLINE_DRAG_OPTION,
   DRAGABLE_BUTTONS_OPTIONS,
   RADIO_BUTTONS_OPTIONS,
   NUMERIC_KEYPAD,
@@ -401,15 +482,23 @@ const allTokens = [
   POSITION,
   TABLE,
   ROW,
+  TOP_ROW,
+  BOTTOM_ROW,
   CELL,
   COUNTER,
   HIGHLIGHT,
   VISUAL_FRACTION,
   FRACTION,
+  PAIR_MATCHER,
   MATCHER,
   ITEM,
   ANSWERS,
   IMAGE,
+  VERTICAL_OPERATION,
+  SEP,
+  CARRY,
+  INPUT,
+  Underscore,
   // Literals
   NumberLiteral,
   StringLiteral,
@@ -559,10 +648,18 @@ class MathExerciseParser extends CstParser {
           GATE: this.BACKTRACK(this.numberLine),
           ALT: () => this.SUBRULE(this.numberLine)
         },
+        {
+          GATE: this.BACKTRACK(this.pairMatcher),
+          ALT: () => this.SUBRULE(this.pairMatcher)
+        },
         {
           GATE: this.BACKTRACK(this.matcher),
           ALT: () => this.SUBRULE(this.matcher)
         },
+        {
+          GATE: this.BACKTRACK(this.verticalOperation),
+          ALT: () => this.SUBRULE(this.verticalOperation)
+        },
         { ALT: () => this.SUBRULE(this.line) }
       ]);
     });
@@ -820,6 +917,193 @@ class MathExerciseParser extends CstParser {
       });
       this.CONSUME(RBracket);
     });
+    this.pairMatcher = this.RULE("pairMatcher", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(PAIR_MATCHER);
+      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.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.SUBRULE(this.pairMatcherTopSection);
+      this.SUBRULE(this.pairMatcherBottomSection);
+      this.SUBRULE(this.matcherAnswers);
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
+      });
+    });
+    this.pairMatcherTopSection = this.RULE("pairMatcherTopSection", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(TOP_ROW);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.AT_LEAST_ONE(() => {
+        this.SUBRULE(this.matcherItem);
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+    });
+    this.pairMatcherBottomSection = this.RULE("pairMatcherBottomSection", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(BOTTOM_ROW);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.AT_LEAST_ONE(() => {
+        this.SUBRULE(this.matcherItem);
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+    });
+    this.verticalOperation = this.RULE("verticalOperation", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(VERTICAL_OPERATION);
+      this.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.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.AT_LEAST_ONE(() => {
+        this.OR4([
+          { ALT: () => this.SUBRULE(this.vopRow) },
+          { ALT: () => this.SUBRULE(this.vopCarry) },
+          { ALT: () => this.SUBRULE(this.vopSep) }
+        ]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR5([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
+      });
+    });
+    this.vopRow = this.RULE("vopRow", () => {
+      this.CONSUME(ROW);
+      this.OPTION(() => {
+        this.CONSUME(LBracket);
+        this.SUBRULE(this.parameterList);
+        this.CONSUME(RBracket);
+      });
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.SUBRULE(this.vopCell);
+      this.MANY3(() => {
+        this.MANY4(() => {
+          this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+        });
+        this.CONSUME(Comma);
+        this.MANY5(() => {
+          this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+        });
+        this.SUBRULE2(this.vopCell);
+      });
+      this.MANY6(() => {
+        this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY7(() => {
+        this.OR6([{ ALT: () => this.CONSUME6(Space) }, { ALT: () => this.CONSUME6(Newline) }]);
+      });
+    });
+    this.vopCell = this.RULE("vopCell", () => {
+      this.OR([
+        { ALT: () => this.CONSUME(NumberLiteral) },
+        { ALT: () => this.CONSUME(StringLiteral) },
+        { ALT: () => this.CONSUME(Underscore) },
+        {
+          ALT: () => {
+            this.CONSUME(INPUT);
+            this.CONSUME(LBracket);
+            this.SUBRULE(this.parameterList);
+            this.CONSUME(RBracket);
+          }
+        },
+        { ALT: () => this.SUBRULE(this.colorText) },
+        { ALT: () => this.SUBRULE(this.boldText) },
+        { ALT: () => this.SUBRULE(this.textHighlighter) }
+      ]);
+    });
+    this.vopCarry = this.RULE("vopCarry", () => {
+      this.CONSUME(CARRY);
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.SUBRULE(this.vopCell);
+      this.MANY3(() => {
+        this.MANY4(() => {
+          this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+        });
+        this.CONSUME(Comma);
+        this.MANY5(() => {
+          this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+        });
+        this.SUBRULE2(this.vopCell);
+      });
+      this.MANY6(() => {
+        this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY7(() => {
+        this.OR6([{ ALT: () => this.CONSUME6(Newline) }, { ALT: () => this.CONSUME6(Space) }]);
+      });
+    });
+    this.vopSep = this.RULE("vopSep", () => {
+      this.CONSUME(SEP);
+      this.OPTION(() => {
+        this.MANY(() => {
+          this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+        });
+        this.CONSUME(LBrace);
+        this.MANY2(() => {
+          this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+        });
+        this.CONSUME(RBrace);
+      });
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+    });
     this.line = this.RULE("line", () => {
       this.MANY(() => {
         this.CONSUME(Space);
@@ -873,7 +1157,9 @@ class MathExerciseParser extends CstParser {
         // VISUAL_FRACTION — always allowed; display-only when answer=[] or absence of answer parameter, interactive when answer=[...] with values.
         { 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) }
+        { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineInput) },
+        // INLINE_DRAG_OPTION (single draggable option inline with text) — excluded in display-only
+        { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineDragOption) }
       ]);
     });
     this.textHighlighter = this.RULE("textHighlighter", () => {
@@ -955,6 +1241,12 @@ class MathExerciseParser extends CstParser {
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
     });
+    this.inlineDragOption = this.RULE("inlineDragOption", () => {
+      this.CONSUME(INLINE_DRAG_OPTION);
+      this.CONSUME(LBracket);
+      this.CONSUME(StringLiteral);
+      this.CONSUME(RBracket);
+    });
     this.tool = this.RULE("tool", () => {
       this.OR([
         { ALT: () => this.SUBRULE(this.dragableButtons) },
@@ -1223,6 +1515,10 @@ function isPerfectSquare(value) {
   const root = Math.sqrt(value);
   return Number.isInteger(root);
 }
+const InlineDragOptionSchema = z.object({
+  type: z.literal(AST_TYPES.INLINE_DRAG_OPTION),
+  value: z.string().min(1)
+});
 const InlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
@@ -1232,7 +1528,8 @@ const InlineNodeSchema = z.union([
   InlineInputWidgetSchema,
   FractionInlineSchema,
   ImageInlineSchema,
-  VisualFractionInlineSchema
+  VisualFractionInlineSchema,
+  InlineDragOptionSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
@@ -1268,24 +1565,32 @@ function createBoldText(value, highlight) {
   });
 }
 function createStringInput(name, length, answer, placeholder) {
-  return parseOrThrow(InlineInputWidgetSchema, {
-    type: AST_TYPES.INLINE_INPUT,
-    name,
-    inputType: INPUT_TYPES.STRING,
-    length,
-    placeholder,
-    answer
-  }, "STRING_INPUT");
+  return parseOrThrow(
+    InlineInputWidgetSchema,
+    {
+      type: AST_TYPES.INLINE_INPUT,
+      name,
+      inputType: INPUT_TYPES.STRING,
+      length,
+      placeholder,
+      answer
+    },
+    "STRING_INPUT"
+  );
 }
 function createNumericInput(name, digits, answer, placeholder) {
-  return parseOrThrow(InlineInputWidgetSchema, {
-    type: AST_TYPES.INLINE_INPUT,
-    name,
-    inputType: INPUT_TYPES.NUMERIC,
-    digits,
-    placeholder,
-    answer
-  }, "NUMERIC_INPUT");
+  return parseOrThrow(
+    InlineInputWidgetSchema,
+    {
+      type: AST_TYPES.INLINE_INPUT,
+      name,
+      inputType: INPUT_TYPES.NUMERIC,
+      digits,
+      placeholder,
+      answer
+    },
+    "NUMERIC_INPUT"
+  );
 }
 function createImage(name, src, alt, options = {}) {
   return ImageInlineSchema.parse({
@@ -1311,6 +1616,12 @@ function createVisualFraction(name, divisions, options = {}) {
     ...options
   });
 }
+function createInlineDragOption(value) {
+  return InlineDragOptionSchema.parse({
+    type: AST_TYPES.INLINE_DRAG_OPTION,
+    value
+  });
+}
 function isFreeText(value) {
   return FreeTextInlineSchema.safeParse(value).success;
 }
@@ -1332,6 +1643,9 @@ function isInlineNode(value) {
 function isVisualFractionInline(value) {
   return VisualFractionInlineSchema.safeParse(value).success;
 }
+function isInlineDragOption(value) {
+  return InlineDragOptionSchema.safeParse(value).success;
+}
 const TextBlockSchema = z.object({
   type: z.literal(AST_TYPES.TEXT_BLOCK),
   value: z.string()
@@ -1385,17 +1699,19 @@ const NumberLineCounterSchema = z.object({
   min: z.number().int().min(1, { message: "COUNTER: min must be >= 1" }),
   max: z.number().int().positive({ message: "COUNTER: max must be > 0" }),
   default: z.number().int().nonnegative().optional(),
-  name: z.string().optional()
+  name: z.string().optional(),
+  answer: z.number().int().positive({ message: "COUNTER: answer must be a positive integer" }).optional()
 }).refine((d) => d.min <= d.max, {
   message: "COUNTER: min must be <= max"
 });
-function createNumberLineCounter(max, min, defaultValue2, name) {
+function createNumberLineCounter(max, min, defaultValue2, name, answer) {
   return NumberLineCounterSchema.parse({
     type: AST_TYPES.NUMBER_LINE_COUNTER,
     min: min ?? 1,
     max,
     ...defaultValue2 !== void 0 && { default: defaultValue2 },
-    ...name !== void 0 && { name }
+    ...name !== void 0 && { name },
+    ...answer !== void 0 && { answer }
   });
 }
 const NumberLineHighlightSchema = z.object({
@@ -1529,6 +1845,146 @@ function createTableBlock(cols, rows) {
     rows
   });
 }
+const VOP_OPERATORS = ["+", "-", "×", "÷", "="];
+function normalizeVopOperator(raw) {
+  const map = {
+    "+": "+",
+    "-": "-",
+    "−": "-",
+    "*": "×",
+    "x": "×",
+    "X": "×",
+    "×": "×",
+    "/": "÷",
+    "÷": "÷",
+    "=": "="
+  };
+  const op = map[raw];
+  if (!op) throw new Error(`VERTICAL_OPERATION: unsupported op "${raw}"`);
+  return op;
+}
+const VopDigitCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("digit"),
+  value: z.string()
+});
+const VopLabelCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("label"),
+  value: z.string()
+});
+const VopInputCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("input"),
+  name: z.string().min(1),
+  digits: z.number().int().positive().default(1),
+  answer: z.union([z.string(), z.number()]).optional()
+});
+const VopEmptyCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("empty")
+});
+const VopColorCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("color"),
+  value: z.string(),
+  color: z.string()
+});
+const VopBoldCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("bold"),
+  value: z.string()
+});
+const VopHighlightCellSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CELL),
+  kind: z.literal("highlight"),
+  value: z.string()
+});
+const VopCellSchema = z.discriminatedUnion("kind", [
+  VopDigitCellSchema,
+  VopLabelCellSchema,
+  VopColorCellSchema,
+  VopBoldCellSchema,
+  VopHighlightCellSchema,
+  VopInputCellSchema,
+  VopEmptyCellSchema
+]);
+function createVopDigitCell(value) {
+  return VopDigitCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "digit", value });
+}
+function createVopInputCell(name, digits = 1, answer) {
+  return VopInputCellSchema.parse({
+    type: AST_TYPES.VOP_CELL,
+    kind: "input",
+    name,
+    digits,
+    answer
+  });
+}
+function createVopLabelCell(value) {
+  return VopLabelCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "label", value });
+}
+function createVopEmptyCell() {
+  return VopEmptyCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "empty" });
+}
+function createVopColorCell(value, color) {
+  return VopColorCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "color", value, color });
+}
+function createVopBoldCell(value) {
+  return VopBoldCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "bold", value });
+}
+function createVopHighlightCell(value) {
+  return VopHighlightCellSchema.parse({ type: AST_TYPES.VOP_CELL, kind: "highlight", value });
+}
+const VopRowSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_ROW),
+  cells: z.array(VopCellSchema).min(1),
+  op: z.enum(VOP_OPERATORS).optional()
+});
+function createVopRow(cells, op) {
+  return VopRowSchema.parse({ type: AST_TYPES.VOP_ROW, cells, op });
+}
+const VopCarryRowSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_CARRY_ROW),
+  cells: z.array(VopCellSchema).min(1)
+});
+function createVopCarryRow(cells) {
+  return VopCarryRowSchema.parse({ type: AST_TYPES.VOP_CARRY_ROW, cells });
+}
+const VopSeparatorSchema = z.object({
+  type: z.literal(AST_TYPES.VOP_SEPARATOR)
+});
+function createVopSeparator() {
+  return VopSeparatorSchema.parse({ type: AST_TYPES.VOP_SEPARATOR });
+}
+const VopBlockItemSchema = z.union([VopRowSchema, VopCarryRowSchema, VopSeparatorSchema]);
+const VerticalOperationBlockSchema = z.object({
+  type: z.literal(AST_TYPES.VERTICAL_OPERATION_BLOCK),
+  op: z.enum(VOP_OPERATORS).optional(),
+  items: z.array(VopBlockItemSchema).min(1)
+});
+function createVerticalOperationBlock(op, items) {
+  return VerticalOperationBlockSchema.parse({
+    type: AST_TYPES.VERTICAL_OPERATION_BLOCK,
+    op,
+    items
+  });
+}
+function isVopCell(value) {
+  return VopCellSchema.safeParse(value).success;
+}
+function isVopRow(value) {
+  return VopRowSchema.safeParse(value).success;
+}
+function isVopCarryRow(value) {
+  return VopCarryRowSchema.safeParse(value).success;
+}
+function isVopSeparator(value) {
+  return VopSeparatorSchema.safeParse(value).success;
+}
+function isVerticalOperationBlock(value) {
+  return VerticalOperationBlockSchema.safeParse(value).success;
+}
 const DisplayFractionInlineSchema = FractionInlineSchema.refine(
   (f) => f.numerator !== void 0 && f.denominator !== void 0,
   { message: "FRACTION inside MATCHER ITEM must be in display mode (both numerator and denominator required)" }
@@ -1634,6 +2090,91 @@ function createMatcherBlock(name, rows, answers, colors) {
 function isMatcherBlock(value) {
   return MatcherBlockSchema.safeParse(value).success;
 }
+const PairMatcherBlockSchema = z.object({
+  type: z.literal(AST_TYPES.PAIR_MATCHER_BLOCK),
+  name: z.string().min(1),
+  /** Items in the top row — at least one required */
+  topItems: z.array(MatcherItemSchema).min(1),
+  /** Items in the bottom row — at least one required */
+  bottomItems: z.array(MatcherItemSchema).min(1),
+  /**
+   * Each answer pair is [topId, bottomId].
+   * At least one pair is required.
+   */
+  answers: z.array(z.tuple([z.string().min(1), z.string().min(1)])).min(1)
+}).superRefine((data, ctx) => {
+  const idRegistry = /* @__PURE__ */ new Map();
+  const sections = [
+    { key: "topItems", items: data.topItems },
+    { key: "bottomItems", items: data.bottomItems }
+  ];
+  for (const { key: key2, items } of sections) {
+    for (let i = 0; i < items.length; i++) {
+      const { itemId } = items[i];
+      const existing = idRegistry.get(itemId);
+      if (existing) {
+        const isCrossSection = existing.section !== key2;
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: isCrossSection ? `itemId "${itemId}" appears in both TOP and BOTTOM — ids must be globally unique` : `Duplicate itemId "${itemId}" in ${key2 === "topItems" ? "TOP" : "BOTTOM"} section`,
+          path: [key2, i, "itemId"]
+        });
+      } else {
+        idRegistry.set(itemId, { section: key2, index: i });
+      }
+    }
+  }
+  const topIds = new Set(data.topItems.map((it) => it.itemId));
+  const bottomIds = new Set(data.bottomItems.map((it) => it.itemId));
+  const usedTopIds = /* @__PURE__ */ new Set();
+  const usedBottomIds = /* @__PURE__ */ new Set();
+  data.answers.forEach(([topId, bottomId], i) => {
+    if (!topIds.has(topId)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Answer pair [${topId}, ${bottomId}]: "${topId}" is not declared in TOP section`,
+        path: ["answers", i, 0]
+      });
+    }
+    if (!bottomIds.has(bottomId)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `Answer pair [${topId}, ${bottomId}]: "${bottomId}" is not declared in BOTTOM section`,
+        path: ["answers", i, 1]
+      });
+    }
+    if (usedTopIds.has(topId)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `topId "${topId}" appears in more than one answer pair`,
+        path: ["answers", i, 0]
+      });
+    } else {
+      usedTopIds.add(topId);
+    }
+    if (usedBottomIds.has(bottomId)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `bottomId "${bottomId}" appears in more than one answer pair`,
+        path: ["answers", i, 1]
+      });
+    } else {
+      usedBottomIds.add(bottomId);
+    }
+  });
+});
+function createPairMatcherBlock(name, topItems, bottomItems, answers) {
+  return PairMatcherBlockSchema.parse({
+    type: AST_TYPES.PAIR_MATCHER_BLOCK,
+    name,
+    topItems,
+    bottomItems,
+    answers
+  });
+}
+function isPairMatcherBlock(value) {
+  return PairMatcherBlockSchema.safeParse(value).success;
+}
 const DragOptionsToolSchema = z.object({
   type: z.literal(AST_TYPES.DRAG_OPTIONS),
   options: z.array(z.string()).min(1)
@@ -1692,9 +2233,14 @@ const ExpressionValidationSchema = z.object({
   type: z.literal(AST_TYPES.EXPRESSION_VALIDATION),
   expression: z.string()
 });
+const MixedValidationSchema = z.object({
+  type: z.literal(AST_TYPES.MIXED_VALIDATION),
+  expression: z.string().min(1)
+});
 const ValidationNodeSchema = z.discriminatedUnion("type", [
   SimpleValidationSchema,
-  ExpressionValidationSchema
+  ExpressionValidationSchema,
+  MixedValidationSchema
 ]);
 function createSimpleValidation() {
   return SimpleValidationSchema.parse({
@@ -1707,16 +2253,25 @@ function createExpressionValidation(expression) {
     expression
   });
 }
+function createMixedValidation(expression) {
+  return MixedValidationSchema.parse({
+    type: AST_TYPES.MIXED_VALIDATION,
+    expression
+  });
+}
 function isSimpleValidation(value) {
   return SimpleValidationSchema.safeParse(value).success;
 }
 function isExpressionValidation(value) {
   return ExpressionValidationSchema.safeParse(value).success;
 }
+function isMixedValidation(value) {
+  return MixedValidationSchema.safeParse(value).success;
+}
 function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
-const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema]);
+const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema]);
 const ExerciseDocumentSchema = z.object({
   type: z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
@@ -1764,6 +2319,12 @@ const ExerciseDocumentSchema = z.object({
           visitInlines(item.inlines, ["lines", bi, "rows", ri, "items", ii, "inlines"]);
         });
       });
+    } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
+      const pm = block;
+      record(pm.name, ["lines", bi, "name"]);
+      [...pm.topItems, ...pm.bottomItems].forEach((item, ii) => {
+        visitInlines(item.inlines, ["lines", bi, "items", ii, "inlines"]);
+      });
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       record(block.name, ["lines", bi, "name"]);
     }
@@ -1812,7 +2373,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.table) return this.visit(ctx.table);
     if (ctx.radioButtons) return this.visit(ctx.radioButtons);
     if (ctx.numberLine) return this.visit(ctx.numberLine);
+    if (ctx.pairMatcher) return this.visit(ctx.pairMatcher);
     if (ctx.matcher) return this.visit(ctx.matcher);
+    if (ctx.verticalOperation) return this.visit(ctx.verticalOperation);
     if (ctx.line) return this.visit(ctx.line);
     throw new Error("Unknown content block");
   }
@@ -1884,7 +2447,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const min = params.min !== void 0 ? Number(params.min) : void 0;
     const defaultValue2 = params.default !== void 0 ? Number(params.default) : void 0;
     const name = params.name;
-    return createNumberLineCounter(max, min, defaultValue2, name);
+    const answer = params.answer !== void 0 ? Number(params.answer) : void 0;
+    return createNumberLineCounter(max, min, defaultValue2, name, answer);
   }
   highlight(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -1925,6 +2489,102 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     return ctx.ids ? ctx.ids.map((t) => t.image) : [];
   }
   // ═══════════════════════════════════════════════════════════════════════════
+  // Pair Matcher Block
+  // ═══════════════════════════════════════════════════════════════════════════
+  pairMatcher(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const name = params.name;
+    const topItems = this.visit(ctx.pairMatcherTopSection);
+    const bottomItems = this.visit(ctx.pairMatcherBottomSection);
+    const rawAnswers = this.visit(ctx.matcherAnswers);
+    return createPairMatcherBlock(name, topItems, bottomItems, rawAnswers);
+  }
+  pairMatcherTopSection(ctx) {
+    return this.visitMatcherItemList(ctx);
+  }
+  pairMatcherBottomSection(ctx) {
+    return this.visitMatcherItemList(ctx);
+  }
+  /**
+   * Maps `ctx.matcherItem` CST nodes to MatcherItem AST nodes.
+   * Shared by pairMatcherTopSection and pairMatcherBottomSection because their
+   * grammar rules are structurally identical — both are `matcherItem+` lists
+   * wrapped in a labelled section keyword.
+   */
+  visitMatcherItemList(ctx) {
+    return ctx.matcherItem ? ctx.matcherItem.map((i) => this.visit(i)) : [];
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Vertical Operation Block
+  // ═══════════════════════════════════════════════════════════════════════════
+  verticalOperation(ctx) {
+    const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
+    const op = params.op !== void 0 ? normalizeVopOperator(String(params.op)) : void 0;
+    const tagged = [];
+    ctx.vopRow?.forEach((cstNode, i) => {
+      tagged.push({ offset: cstNode.location?.startOffset ?? i, node: this.visit(cstNode) });
+    });
+    ctx.vopCarry?.forEach((cstNode, i) => {
+      tagged.push({ offset: cstNode.location?.startOffset ?? i, node: this.visit(cstNode) });
+    });
+    ctx.vopSep?.forEach((cstNode, i) => {
+      tagged.push({ offset: cstNode.location?.startOffset ?? i, node: this.visit(cstNode) });
+    });
+    tagged.sort((a, b) => a.offset - b.offset);
+    const items = tagged.map((t) => t.node);
+    return createVerticalOperationBlock(op, items);
+  }
+  vopRow(ctx) {
+    const cells = ctx.vopCell ? ctx.vopCell.map((c) => this.visit(c)) : [];
+    const rowParams = ctx.parameterList ? this.visit(ctx.parameterList) : {};
+    const op = rowParams.op !== void 0 ? normalizeVopOperator(String(rowParams.op)) : void 0;
+    return createVopRow(cells, op);
+  }
+  vopCarry(ctx) {
+    const cells = ctx.vopCell ? ctx.vopCell.map((c) => this.visit(c)) : [];
+    return createVopCarryRow(cells);
+  }
+  vopSep(_ctx) {
+    return createVopSeparator();
+  }
+  vopCell(ctx) {
+    if (ctx.NumberLiteral) {
+      const token = ctx.NumberLiteral[0];
+      return createVopDigitCell(token.image);
+    }
+    if (ctx.StringLiteral) {
+      const token = ctx.StringLiteral[0];
+      const value = token.image.slice(1, -1);
+      return createVopLabelCell(value);
+    }
+    if (ctx.Underscore) {
+      return createVopEmptyCell();
+    }
+    if (ctx.INPUT) {
+      const params = this.visit(ctx.parameterList);
+      const name = params.name;
+      if (!name) {
+        throw new Error("INPUT inside VERTICAL_OPERATION requires parameter: name");
+      }
+      const digits = params.digits !== void 0 ? Number(params.digits) : 1;
+      const answer = params.answer;
+      return createVopInputCell(name, digits, answer);
+    }
+    if (ctx.colorText) {
+      const inline = this.visit(ctx.colorText);
+      return createVopColorCell(inline.value, inline.color);
+    }
+    if (ctx.boldText) {
+      const inline = this.visit(ctx.boldText);
+      return createVopBoldCell(inline.value);
+    }
+    if (ctx.textHighlighter) {
+      const inline = this.visit(ctx.textHighlighter);
+      return createVopHighlightCell(inline.value);
+    }
+    throw new Error("Unknown vopCell");
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
   // Line Block
   // ═══════════════════════════════════════════════════════════════════════════
   line(ctx) {
@@ -2020,6 +2680,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.inlineInput) {
       return this.visit(ctx.inlineInput);
     }
+    if (ctx.inlineDragOption) {
+      return this.visit(ctx.inlineDragOption);
+    }
     throw new Error("Unknown inline element");
   }
   textHighlighter(ctx) {
@@ -2096,6 +2759,11 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const digits = params.digits;
     return createNumericInput(name, digits, answer, placeholder);
   }
+  inlineDragOption(ctx) {
+    const valueToken = ctx.StringLiteral[0];
+    const value = this.extractString(valueToken.image);
+    return createInlineDragOption(value);
+  }
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -2130,6 +2798,12 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     } else if (type === "expression") {
       const expression = params.expression;
       return createExpressionValidation(expression);
+    } else if (type === "mixed") {
+      const expression = params.expression;
+      if (!expression || expression.trim() === "") {
+        throw new Error("Mixed validation requires a non-empty expression");
+      }
+      return createMixedValidation(expression);
     }
     throw new Error(`Unknown validation type: ${type}`);
   }
@@ -2284,7 +2958,8 @@ const LayoutItemSchema = z.lazy(
     GroupItemSchema,
     OperatorItemSchema,
     TableItemSchema,
-    NumberLineItemSchema
+    NumberLineItemSchema,
+    VerticalOperationItemSchema
   ])
 );
 const GroupItemSchema = z.object({
@@ -2321,7 +2996,8 @@ const NumberLineCounterItemSchema = z.object({
   min: z.number().int().min(1),
   max: z.number().int().positive(),
   default: z.number().int().nonnegative().optional(),
-  name: z.string().optional()
+  name: z.string().optional(),
+  answer: z.number().int().positive().optional()
 });
 const NumberLineHighlightItemSchema = z.object({
   id: z.string(),
@@ -2358,6 +3034,80 @@ const MatcherRowItemSchema = z.object({
   type: z.literal(JSON_TYPES.MATCHER_ROW),
   items: z.array(MatcherItemContentSchema).min(1)
 });
+const VopOperatorJSONSchema = z.enum(["+", "-", "×", "÷", "="]);
+const VopDigitCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("digit"),
+  value: z.string()
+});
+const VopInputCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("input"),
+  widgetId: z.string()
+});
+const VopLabelCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("label"),
+  value: z.string()
+});
+const VopEmptyCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("empty")
+});
+const VopColorCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("color"),
+  value: z.string(),
+  color: z.string()
+});
+const VopBoldCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("bold"),
+  value: z.string()
+});
+const VopHighlightCellItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CELL),
+  kind: z.literal("highlight"),
+  value: z.string()
+});
+const VopCellItemSchema = z.discriminatedUnion("kind", [
+  VopDigitCellItemSchema,
+  VopLabelCellItemSchema,
+  VopColorCellItemSchema,
+  VopBoldCellItemSchema,
+  VopHighlightCellItemSchema,
+  VopInputCellItemSchema,
+  VopEmptyCellItemSchema
+]);
+const VopRowItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_ROW),
+  cells: z.array(VopCellItemSchema),
+  op: VopOperatorJSONSchema.optional()
+});
+const VopCarryRowItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_CARRY_ROW),
+  cells: z.array(VopCellItemSchema)
+});
+const VopSeparatorItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VOP_SEPARATOR)
+});
+const VerticalOperationItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.VERTICAL_OPERATION),
+  op: VopOperatorJSONSchema.optional(),
+  cols: z.number().int().positive(),
+  items: z.array(z.union([VopRowItemSchema, VopCarryRowItemSchema, VopSeparatorItemSchema]))
+});
 const StringInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.STRING),
@@ -2378,6 +3128,10 @@ const DragOptionsJSONSchema = z.object({
   type: z.literal(JSON_TYPES.DRAG_OPTIONS),
   options: z.array(z.string())
 });
+const InlineDragOptionJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.INLINE_DRAG_OPTION),
+  value: z.string().min(1)
+});
 const RadioOptionsJSONSchema = z.object({
   type: z.literal(JSON_TYPES.RADIO_OPTIONS),
   options: z.array(z.string())
@@ -2403,6 +3157,11 @@ const MatcherWidgetJSONSchema = z.object({
   /** Number of answer groups — equals answers.length, stored here to avoid prop-drilling. */
   groupCount: z.number().int().min(1)
 });
+const PairMatcherWidgetJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.PAIR_MATCHER),
+  topItems: z.array(MatcherItemContentSchema).min(1),
+  bottomItems: z.array(MatcherItemContentSchema).min(1)
+});
 const VisualFractionJSONSchema = z.object({
   type: z.literal(JSON_TYPES.VISUAL_FRACTION),
   shape: z.enum(["bar", "circle", "triangle", "grid"]).default("bar"),
@@ -2423,14 +3182,16 @@ const VisualFractionJSONSchema = z.object({
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
   DragOptionsJSONSchema,
+  InlineDragOptionJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
   FractionJSONSchema,
   MatcherWidgetJSONSchema,
+  PairMatcherWidgetJSONSchema,
   VisualFractionJSONSchema
 ]);
 const ValidationJSONSchema = z.object({
-  mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION]),
+  mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION, VALIDATION_MODES.MIXED]),
   // Simple answers: string|number per widget id.
   // Matcher answers: string[][] keyed by matcher name. Outer/inner min(1)
   // mirrors MatcherBlockSchema invariants in src/ast/matcher.ts.
@@ -2514,12 +3275,18 @@ function isTableRowItem(item) {
 function isTableCellItem(item) {
   return item.type === JSON_TYPES.TABLE_CELL;
 }
+function isVerticalOperationItem(item) {
+  return item.type === JSON_TYPES.VERTICAL_OPERATION;
+}
 function isInlineInputJSON(widget) {
   return widget.type === JSON_TYPES.INLINE_INPUT;
 }
 function isDragOptionsJSON(widget) {
   return widget.type === JSON_TYPES.DRAG_OPTIONS;
 }
+function isInlineDragOptionJSON(widget) {
+  return widget.type === JSON_TYPES.INLINE_DRAG_OPTION;
+}
 function isRadioOptionsJSON(widget) {
   return widget.type === JSON_TYPES.RADIO_OPTIONS;
 }
@@ -2542,6 +3309,18 @@ class LayoutIdGenerator {
 }
 function toJSON(ast) {
   const idGenerator = new LayoutIdGenerator();
+  const widgets = {};
+  const answers = {};
+  const allInlines = collectAllInlines(ast.lines);
+  const inlineDragIds = /* @__PURE__ */ new Map();
+  {
+    let counter = 0;
+    for (const inline of allInlines) {
+      if (inline.type === AST_TYPES.INLINE_DRAG_OPTION) {
+        inlineDragIds.set(inline, `${INLINE_DRAG_OPT_PREFIX}${counter++}`);
+      }
+    }
+  }
   const layout = [];
   if (ast.question) {
     layout.push({
@@ -2552,9 +3331,13 @@ function toJSON(ast) {
   }
   for (const block of ast.lines) {
     if (block.type === AST_TYPES.TABLE_BLOCK) {
-      layout.push(transformTable(block, idGenerator));
+      layout.push(transformTable(block, idGenerator, inlineDragIds));
     } else if (block.type === AST_TYPES.NUMBER_LINE_BLOCK) {
-      layout.push(transformNumberLine(block, idGenerator));
+      const nlItem = transformNumberLine(block, idGenerator, inlineDragIds);
+      layout.push(nlItem);
+      if (nlItem.counter?.answer !== void 0) {
+        answers[nlItem.counter.id] = nlItem.counter.answer;
+      }
     } else if (block.type === AST_TYPES.MATCHER_BLOCK) {
       const matcherBlock = block;
       layout.push({
@@ -2566,6 +3349,19 @@ function toJSON(ast) {
         id: idGenerator.generate(JSON_TYPES.LINEBREAK),
         type: JSON_TYPES.LINEBREAK
       });
+    } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
+      const pmBlock = block;
+      layout.push({
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId: pmBlock.name
+      });
+      layout.push({
+        id: idGenerator.generate(JSON_TYPES.LINEBREAK),
+        type: JSON_TYPES.LINEBREAK
+      });
+    } else if (block.type === AST_TYPES.VERTICAL_OPERATION_BLOCK) {
+      layout.push(transformVerticalOperation(block, idGenerator));
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       const radioBlock = block;
       layout.push({
@@ -2578,13 +3374,10 @@ function toJSON(ast) {
         type: JSON_TYPES.LINEBREAK
       });
     } else {
-      const lineItems = transformLine(block, idGenerator);
+      const lineItems = transformLine(block, idGenerator, inlineDragIds);
       layout.push(...lineItems);
     }
   }
-  const widgets = {};
-  const answers = {};
-  const allInlines = collectAllInlines(ast.lines);
   for (const inline of allInlines) {
     if (inline.type === AST_TYPES.INLINE_INPUT) {
       if (inline.inputType === INPUT_TYPES.STRING) {
@@ -2618,6 +3411,13 @@ function toJSON(ast) {
         answers[inline.name] = inline.answer;
       }
     }
+    if (inline.type === AST_TYPES.INLINE_DRAG_OPTION) {
+      const widgetId = inlineDragIds.get(inline);
+      widgets[widgetId] = {
+        type: JSON_TYPES.INLINE_DRAG_OPTION,
+        value: inline.value
+      };
+    }
     if (inline.type === AST_TYPES.VISUAL_FRACTION) {
       const answerArr = inline.answer ?? [];
       widgets[inline.name] = {
@@ -2635,6 +3435,27 @@ function toJSON(ast) {
       }
     }
   }
+  for (const block of ast.lines) {
+    if (block.type !== AST_TYPES.VERTICAL_OPERATION_BLOCK) continue;
+    const vop = block;
+    for (const item of vop.items) {
+      if (item.type !== AST_TYPES.VOP_ROW && item.type !== AST_TYPES.VOP_CARRY_ROW) continue;
+      for (const cell of item.cells) {
+        if (cell.kind !== "input") continue;
+        if (widgets[cell.name]) {
+          throw new Error(`VERTICAL_OPERATION: duplicate INPUT name "${cell.name}"`);
+        }
+        widgets[cell.name] = {
+          type: JSON_TYPES.INLINE_INPUT,
+          inputType: INPUT_TYPES.NUMERIC,
+          digits: cell.digits
+        };
+        if (cell.answer !== void 0) {
+          answers[cell.name] = cell.answer;
+        }
+      }
+    }
+  }
   for (const block of ast.lines) {
     if (block.type === AST_TYPES.RADIO_OPTIONS) {
       const radioBlock = block;
@@ -2645,8 +3466,12 @@ function toJSON(ast) {
       answers[radioBlock.name] = radioBlock.answer;
     } else if (block.type === AST_TYPES.MATCHER_BLOCK) {
       const matcherBlock = block;
-      widgets[matcherBlock.name] = buildMatcherWidget(matcherBlock, idGenerator);
+      widgets[matcherBlock.name] = buildMatcherWidget(matcherBlock, idGenerator, inlineDragIds);
       answers[matcherBlock.name] = matcherBlock.answers;
+    } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
+      const pmBlock = block;
+      widgets[pmBlock.name] = buildPairMatcherWidget(pmBlock, idGenerator, inlineDragIds);
+      answers[pmBlock.name] = pmBlock.answers;
     }
   }
   if (ast.tools) {
@@ -2695,13 +3520,18 @@ function collectAllInlines(blocks) {
           result.push(...item.inlines);
         }
       }
+    } else if (block.type === AST_TYPES.PAIR_MATCHER_BLOCK) {
+      const pm = block;
+      for (const item of [...pm.topItems, ...pm.bottomItems]) {
+        result.push(...item.inlines);
+      }
     }
   }
   return result;
 }
-function transformNumberLine(numberLine, idGenerator) {
+function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
   const positions = numberLine.positions.map((pos) => {
-    const content = pos.inlines.map((inline) => transformInline(inline, idGenerator));
+    const content = pos.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds));
     return {
       id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_POSITION),
       type: JSON_TYPES.NUMBER_LINE_POSITION,
@@ -2718,7 +3548,8 @@ function transformNumberLine(numberLine, idGenerator) {
       min: c.min,
       max: c.max,
       ...c.default !== void 0 && { default: c.default },
-      ...c.name !== void 0 && { name: c.name }
+      ...c.name !== void 0 && { name: c.name },
+      ...c.answer !== void 0 && { answer: c.answer }
     };
   }
   let highlights;
@@ -2748,20 +3579,20 @@ function transformNumberLine(numberLine, idGenerator) {
   };
   return item;
 }
-function buildMatcherWidget(matcher, idGenerator) {
-  const rows = matcher.rows.map((row) => {
-    const items = row.items.map((item) => ({
-      id: idGenerator.generate(JSON_TYPES.MATCHER_ITEM),
-      type: JSON_TYPES.MATCHER_ITEM,
-      itemId: item.itemId,
-      content: item.inlines.map((inline) => transformInline(inline, idGenerator))
-    }));
-    return {
-      id: idGenerator.generate(JSON_TYPES.MATCHER_ROW),
-      type: JSON_TYPES.MATCHER_ROW,
-      items
-    };
-  });
+function mapMatcherItemList(items, idGenerator, inlineDragIds) {
+  return items.map((item) => ({
+    id: idGenerator.generate(JSON_TYPES.MATCHER_ITEM),
+    type: JSON_TYPES.MATCHER_ITEM,
+    itemId: item.itemId,
+    content: item.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds))
+  }));
+}
+function buildMatcherWidget(matcher, idGenerator, inlineDragIds) {
+  const rows = matcher.rows.map((row) => ({
+    id: idGenerator.generate(JSON_TYPES.MATCHER_ROW),
+    type: JSON_TYPES.MATCHER_ROW,
+    items: mapMatcherItemList(row.items, idGenerator, inlineDragIds)
+  }));
   const result = {
     type: JSON_TYPES.MATCHER,
     rows,
@@ -2772,10 +3603,72 @@ function buildMatcherWidget(matcher, idGenerator) {
   }
   return result;
 }
-function transformTable(table, idGenerator) {
+function buildPairMatcherWidget(pm, idGenerator, inlineDragIds) {
+  return {
+    type: JSON_TYPES.PAIR_MATCHER,
+    topItems: mapMatcherItemList(pm.topItems, idGenerator, inlineDragIds),
+    bottomItems: mapMatcherItemList(pm.bottomItems, idGenerator, inlineDragIds)
+  };
+}
+function transformVerticalOperation(vop, idGenerator) {
+  const anyRowHasOp = vop.items.some(
+    (item) => item.type === AST_TYPES.VOP_ROW && item.op !== void 0
+  );
+  if (!anyRowHasOp && vop.op === void 0) {
+    throw new Error("VERTICAL_OPERATION: at least one op is required (set op on the block or on individual ROWs)");
+  }
+  let cols = 1;
+  for (const item of vop.items) {
+    if (item.type === AST_TYPES.VOP_ROW || item.type === AST_TYPES.VOP_CARRY_ROW) {
+      cols = Math.max(cols, item.cells.length);
+    }
+  }
+  function buildCells(row) {
+    return row.cells.map((cell) => {
+      const id = idGenerator.generate(JSON_TYPES.VOP_CELL);
+      if (cell.kind === "digit") return { id, type: JSON_TYPES.VOP_CELL, kind: "digit", value: cell.value };
+      if (cell.kind === "label") return { id, type: JSON_TYPES.VOP_CELL, kind: "label", value: cell.value };
+      if (cell.kind === "color") return { id, type: JSON_TYPES.VOP_CELL, kind: "color", value: cell.value, color: cell.color };
+      if (cell.kind === "bold") return { id, type: JSON_TYPES.VOP_CELL, kind: "bold", value: cell.value };
+      if (cell.kind === "highlight") return { id, type: JSON_TYPES.VOP_CELL, kind: "highlight", value: cell.value };
+      if (cell.kind === "input") return { id, type: JSON_TYPES.VOP_CELL, kind: "input", widgetId: cell.name };
+      return { id, type: JSON_TYPES.VOP_CELL, kind: "empty" };
+    });
+  }
+  const items = vop.items.map((item) => {
+    if (item.type === AST_TYPES.VOP_SEPARATOR) {
+      return {
+        id: idGenerator.generate(JSON_TYPES.VOP_SEPARATOR),
+        type: JSON_TYPES.VOP_SEPARATOR
+      };
+    }
+    if (item.type === AST_TYPES.VOP_CARRY_ROW) {
+      return {
+        id: idGenerator.generate(JSON_TYPES.VOP_CARRY_ROW),
+        type: JSON_TYPES.VOP_CARRY_ROW,
+        cells: buildCells(item)
+      };
+    }
+    const row = item;
+    return {
+      id: idGenerator.generate(JSON_TYPES.VOP_ROW),
+      type: JSON_TYPES.VOP_ROW,
+      cells: buildCells(row),
+      ...row.op !== void 0 && { op: row.op }
+    };
+  });
+  return {
+    id: idGenerator.generate(JSON_TYPES.VERTICAL_OPERATION),
+    type: JSON_TYPES.VERTICAL_OPERATION,
+    op: vop.op,
+    cols,
+    items
+  };
+}
+function transformTable(table, idGenerator, inlineDragIds) {
   const rows = table.rows.map((row) => {
     const cells = row.cells.map((cell) => {
-      const items = cell.inlines.map((inline) => transformInline(inline, idGenerator));
+      const items = cell.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds));
       const cellItem = {
         id: idGenerator.generate(JSON_TYPES.TABLE_CELL),
         type: JSON_TYPES.TABLE_CELL,
@@ -2799,10 +3692,10 @@ function transformTable(table, idGenerator) {
     rows
   };
 }
-function transformLine(line, idGenerator) {
+function transformLine(line, idGenerator, inlineDragIds) {
   const items = [];
   for (const inline of line.inlines) {
-    items.push(transformInline(inline, idGenerator));
+    items.push(transformInline(inline, idGenerator, inlineDragIds));
   }
   items.push({
     id: idGenerator.generate(JSON_TYPES.LINEBREAK),
@@ -2810,7 +3703,7 @@ function transformLine(line, idGenerator) {
   });
   return items;
 }
-function transformInline(inline, idGenerator) {
+function transformInline(inline, idGenerator, inlineDragIds) {
   switch (inline.type) {
     case AST_TYPES.FREE_TEXT:
       const trimmed = inline.value.trim();
@@ -2882,6 +3775,12 @@ function transformInline(inline, idGenerator) {
         type: JSON_TYPES.WIDGET_REF,
         widgetId: inline.name
       };
+    case AST_TYPES.INLINE_DRAG_OPTION:
+      return {
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId: inlineDragIds.get(inline)
+      };
     default:
       throw new Error(`Unknown inline type: ${inline.type}`);
   }
@@ -2900,6 +3799,32 @@ function transformValidation(validation, answers, widgets) {
       expression: validation.expression,
       variables
     };
+  } else if (validation.type === AST_TYPES.MIXED_VALIDATION) {
+    const validVariableNames = Object.keys(widgets);
+    const variables = extractVariables$1(validation.expression, validVariableNames);
+    const inExpression = new Set(variables);
+    for (const [name, widget] of Object.entries(widgets)) {
+      if (name.startsWith("_")) continue;
+      if (name in answers) continue;
+      if (inExpression.has(name)) continue;
+      if (widget.type === JSON_TYPES.FRACTION) {
+        const w = widget;
+        if (w.numerator !== null && w.denominator !== null) continue;
+      }
+      if (widget.type === JSON_TYPES.VISUAL_FRACTION) {
+        const w = widget;
+        if (Array.isArray(w.filled) && w.filled.length > 0) continue;
+      }
+      throw new Error(
+        `Mixed validation: widget "${name}" has no \`answer\` and is not referenced in expression "${validation.expression}"`
+      );
+    }
+    return {
+      mode: VALIDATION_MODES.MIXED,
+      expression: validation.expression,
+      answers,
+      variables
+    };
   }
   throw new Error(`Unknown validation type: ${validation.type}`);
 }
@@ -8424,6 +9349,19 @@ function areMatcherEqual(expected, result) {
   const normalize2 = (groups) => lodashExports.sortBy(groups.map((g) => lodashExports.sortBy(g)), (g) => g.join("|"));
   return lodashExports.isEqual(normalize2(expected), normalize2(result));
 }
+function getPairMatcherGroupResults(expected, result) {
+  if (!Array.isArray(result)) return [];
+  const normalizeGroup = (g) => lodashExports.sortBy(g).join("|");
+  const expectedKeys = new Set(expected.map(normalizeGroup));
+  return result.map((group) => {
+    const key2 = normalizeGroup(group);
+    if (expectedKeys.has(key2)) {
+      expectedKeys.delete(key2);
+      return { group, isCorrect: true };
+    }
+    return { group, isCorrect: false };
+  });
+}
 function areVisualFractionCountsEqual(expected, result) {
   if (!Array.isArray(result)) return false;
   if (expected.length !== result.length) return false;
@@ -8462,7 +9400,8 @@ function validateSimple(exercise, userInputs) {
     return {
       isCorrect: false,
       details: {},
-      score: 0
+      score: 0,
+      error: "No answers defined for simple validation"
     };
   }
   const positionMap = buildPositionMap(exercise);
@@ -8477,6 +9416,21 @@ function validateSimple(exercise, userInputs) {
       else allCorrect = false;
       continue;
     }
+    if (widget?.type === JSON_TYPES.PAIR_MATCHER) {
+      const userValue2 = userInputs[widgetId];
+      const groupResults = getPairMatcherGroupResults(expected, userValue2);
+      const isCorrect2 = groupResults.length === expected.length && groupResults.every((r) => r.isCorrect);
+      details[widgetId] = {
+        widgetId,
+        userValue: userValue2,
+        isCorrect: isCorrect2,
+        groupResults
+      };
+      totalCount++;
+      if (isCorrect2) correctCount++;
+      else allCorrect = false;
+      continue;
+    }
     if (widget?.type === JSON_TYPES.VISUAL_FRACTION) {
       const userValue2 = userInputs[widgetId];
       const isCorrect2 = areVisualFractionCountsEqual(expected, userValue2);
@@ -8791,9 +9745,58 @@ function parseFractionOrNumber(s) {
     if (Number.isFinite(num) && Number.isFinite(den) && den !== 0) {
       return num / den;
     }
-    return NaN;
+    return NaN;
+  }
+  return parseFloat(s);
+}
+function validateMixed(exercise, userInputs) {
+  const answers = exercise.validation.answers ?? {};
+  const simpleResult = validateSimple(exercise, userInputs);
+  const scalarInputs = {};
+  for (const [k, v] of Object.entries(userInputs)) {
+    if (typeof v === "string" || typeof v === "number") scalarInputs[k] = v;
+  }
+  const exprResult = validateExpression(exercise, scalarInputs);
+  const details = {};
+  const answerKeys = new Set(Object.keys(answers));
+  for (const k of answerKeys) {
+    const simpleDetail = simpleResult.details[k];
+    if (!simpleDetail) continue;
+    const inExpr = k in exprResult.details;
+    details[k] = {
+      ...simpleDetail,
+      simpleCorrect: simpleDetail.isCorrect,
+      ...inExpr && { expressionCorrect: exprResult.isCorrect },
+      isCorrect: inExpr ? simpleDetail.isCorrect && exprResult.isCorrect : simpleDetail.isCorrect
+    };
+  }
+  for (const [k, detail] of Object.entries(exprResult.details)) {
+    if (!(k in details)) {
+      details[k] = {
+        ...detail,
+        expressionCorrect: exprResult.isCorrect
+      };
+    }
   }
-  return parseFloat(s);
+  const simpleCount = Object.keys(answers).length;
+  let simpleCorrect = 0;
+  for (const k of Object.keys(answers)) {
+    if (simpleResult.details[k]?.isCorrect) simpleCorrect++;
+  }
+  const score = (simpleCorrect + (exprResult.isCorrect ? 1 : 0)) / (simpleCount + 1);
+  const isCorrect = simpleResult.isCorrect && exprResult.isCorrect;
+  const result = {
+    isCorrect,
+    details,
+    score,
+    expression: exercise.validation.expression,
+    scope: exprResult.scope
+  };
+  const propagatedError = exprResult.error ?? simpleResult.error;
+  if (!isCorrect && propagatedError) {
+    result.error = propagatedError;
+  }
+  return result;
 }
 function preprocessFractionValues(exercise, userInputs) {
   const result = { ...userInputs };
@@ -8837,6 +9840,8 @@ function validate(exercise, userInputs) {
       }
       return validateExpression(validatedExercise, scalar);
     }
+    case VALIDATION_MODES.MIXED:
+      return validateMixed(validatedExercise, processedInputs);
     default:
       return {
         isCorrect: false,
@@ -8850,18 +9855,27 @@ function getMissingInputs(exercise, userInputs) {
   if (!exercise.validation) {
     return missing;
   }
+  const isEmpty = (v) => v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
   if (exercise.validation.mode === VALIDATION_MODES.SIMPLE && exercise.validation.answers) {
     for (const widgetId of Object.keys(exercise.validation.answers)) {
-      if (!(widgetId in userInputs) || userInputs[widgetId] === "") {
+      if (!(widgetId in userInputs) || isEmpty(userInputs[widgetId])) {
         missing.push(widgetId);
       }
     }
   } else if (exercise.validation.mode === VALIDATION_MODES.EXPRESSION && exercise.validation.variables) {
     for (const varName of exercise.validation.variables) {
-      if (!(varName in userInputs) || userInputs[varName] === "") {
+      if (!(varName in userInputs) || isEmpty(userInputs[varName])) {
         missing.push(varName);
       }
     }
+  } else if (exercise.validation.mode === VALIDATION_MODES.MIXED) {
+    const keys = /* @__PURE__ */ new Set([
+      ...Object.keys(exercise.validation.answers ?? {}),
+      ...exercise.validation.variables ?? []
+    ]);
+    for (const k of keys) {
+      if (!(k in userInputs) || isEmpty(userInputs[k])) missing.push(k);
+    }
   }
   return missing;
 }
@@ -12931,7 +13945,7 @@ const InlineInput = ({
       id: widgetId,
       accepts: ["drag-option"],
       onDrop: handleDrop,
-      className: "inline-input-droppable",
+      className: "inline-widget inline-input-droppable",
       children: isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
         /* @__PURE__ */ jsx(
@@ -12963,6 +13977,32 @@ const InlineInput = ({
     }
   );
 };
+const SingleDragOption = ({
+  optionId,
+  value,
+  onOptionClick,
+  className = ""
+}) => {
+  const { usedOptionIds } = useExerciseDnd();
+  const isUsed = usedOptionIds.has(optionId);
+  return /* @__PURE__ */ jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+    Draggable,
+    {
+      id: optionId,
+      type: "drag-option",
+      data: { value, label: value },
+      className: "drag-option-wrapper",
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "drag-option",
+          onClick: () => onOptionClick?.(value),
+          children: value
+        }
+      )
+    }
+  ) });
+};
 const PillBackground = ({
   width = "100%",
   minHeight = "72px",
@@ -13035,36 +14075,32 @@ const DragOptions = ({
   options,
   onOptionClick
 }) => {
-  const { usedOptionIds } = useExerciseDnd();
   return /* @__PURE__ */ jsx(PillBackground, { children: /* @__PURE__ */ jsx("div", { className: "drag-options", children: options.map((option, idx) => {
     const optionId = `drag-option-${idx}`;
     const optionValue = String(option);
-    const isUsed = usedOptionIds.has(optionId);
-    return /* @__PURE__ */ jsx("div", { className: "drag-option-slot", children: isUsed ? (
-      // Empty slot - this specific option is in an input
-      /* @__PURE__ */ jsx("div", { className: "drag-option-empty" })
-    ) : (
-      // Draggable option
-      /* @__PURE__ */ jsx(
-        Draggable,
-        {
-          id: optionId,
-          type: "drag-option",
-          data: { value: optionValue, label: optionValue },
-          className: "drag-option-wrapper",
-          children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "drag-option",
-              onClick: () => onOptionClick?.(optionValue),
-              children: optionValue
-            }
-          )
-        }
-      )
-    ) }, optionId);
+    return /* @__PURE__ */ jsx(
+      SingleDragOption,
+      {
+        optionId,
+        value: optionValue,
+        onOptionClick
+      },
+      optionId
+    );
   }) }) });
 };
+const InlineDragOption = ({
+  widgetId,
+  widget
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "inline-widget", children: /* @__PURE__ */ jsx(
+    SingleDragOption,
+    {
+      optionId: widgetId,
+      value: widget.value
+    }
+  ) });
+};
 const NumericKeypad = ({
   value,
   includeOperators = false,
@@ -13159,7 +14195,7 @@ const FractionInput = ({
       }
     );
   };
-  return /* @__PURE__ */ jsxs("span", { className: "fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
+  return /* @__PURE__ */ jsxs("span", { className: "inline-widget fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
     /* @__PURE__ */ jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator", numValidationStatus) }),
     /* @__PURE__ */ jsx("span", { className: "fraction-bar", "aria-hidden": "true" }),
     /* @__PURE__ */ jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator", denValidationStatus) })
@@ -13591,7 +14627,7 @@ const VisualFraction = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `visual-fraction-widget visual-fraction-widget--${shape}${statusClass}`,
+      className: `inline-widget visual-fraction-widget visual-fraction-widget--${shape}${statusClass}`,
       style: rootStyle,
       role: "group",
       "aria-label": `${divisions} part ${shape} fraction`,
@@ -13695,10 +14731,10 @@ function buildGroups(assignments) {
   }
   return Array.from(map.values());
 }
-const EMPTY_WIDGETS = {};
-const EMPTY_VALUES = {};
-const EMPTY_DROPPED = /* @__PURE__ */ new Set();
-const NOOP = () => {
+const EMPTY_WIDGETS$1 = {};
+const EMPTY_VALUES$1 = {};
+const EMPTY_DROPPED$1 = /* @__PURE__ */ new Set();
+const NOOP$1 = () => {
 };
 const MatcherWidget = ({
   widgetId,
@@ -13709,7 +14745,7 @@ const MatcherWidget = ({
   widgets
 }) => {
   const { rows, colors: userColors, groupCount } = widget;
-  const widgetsMap = widgets ?? EMPTY_WIDGETS;
+  const widgetsMap = widgets ?? EMPTY_WIDGETS$1;
   const palette = useMemo(
     () => resolveGroupPalette(userColors, groupCount),
     [userColors, groupCount]
@@ -13774,9 +14810,9 @@ const MatcherWidget = ({
               {
                 item: layoutItem,
                 widgets: widgetsMap,
-                values: EMPTY_VALUES,
-                droppedInputs: EMPTY_DROPPED,
-                onChange: NOOP
+                values: EMPTY_VALUES$1,
+                droppedInputs: EMPTY_DROPPED$1,
+                onChange: NOOP$1
               },
               layoutItem.id
             ))
@@ -13788,12 +14824,433 @@ 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,
+  lineDirections,
+  validationStatus,
+  pairStatusByTopId
+}) {
+  const dotRefs = useRef(/* @__PURE__ */ new Map());
+  const [lines, setLines] = useState([]);
+  const recalcLines = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const cr = container.getBoundingClientRect();
+    const newLines = [];
+    for (const [topId, bottomId] of Object.entries(pairs)) {
+      const topDot = dotRefs.current.get(`top:${topId}`);
+      const bottomDot = dotRefs.current.get(`bottom:${bottomId}`);
+      if (!topDot || !bottomDot) continue;
+      const tr = topDot.getBoundingClientRect();
+      const br = bottomDot.getBoundingClientRect();
+      const status = validationStatus ? pairStatusByTopId[topId] ?? (validationStatus === "correct" ? "correct" : "incorrect") : "idle";
+      const direction = lineDirections[topId] ?? "top-to-bottom";
+      const startRect = direction === "top-to-bottom" ? tr : br;
+      const endRect = direction === "top-to-bottom" ? br : tr;
+      newLines.push({
+        topId,
+        x1: startRect.left - cr.left + startRect.width / 2,
+        y1: startRect.top - cr.top + startRect.height / 2,
+        x2: endRect.left - cr.left + endRect.width / 2,
+        y2: endRect.top - cr.top + endRect.height / 2,
+        status
+      });
+    }
+    setLines(newLines);
+  }, [pairs, lineDirections, validationStatus, pairStatusByTopId]);
+  useLayoutEffect(() => {
+    recalcLines();
+  }, [recalcLines]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(recalcLines);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [containerRef, recalcLines]);
+  return { dotRefs, lines };
+}
+const EMPTY_WIDGETS = {};
+const EMPTY_VALUES = {};
+const EMPTY_DROPPED = /* @__PURE__ */ new Set();
+const NOOP = () => {
+};
+function buildInitialState(defaultValue2, topIds, bottomIds) {
+  if (!defaultValue2?.length) return { pairs: {}, lineDirections: {} };
+  const pairs = {};
+  const lineDirections = {};
+  for (const pair of defaultValue2) {
+    if (!Array.isArray(pair) || pair.length !== 2 || pair[0] == null || pair[1] == null) continue;
+    const [first, second] = pair;
+    if (topIds.has(first) && bottomIds.has(second)) {
+      pairs[first] = second;
+      lineDirections[first] = "top-to-bottom";
+    } else if (bottomIds.has(first) && topIds.has(second)) {
+      pairs[second] = first;
+      lineDirections[second] = "bottom-to-top";
+    }
+  }
+  return { pairs, lineDirections };
+}
+function findTopForBottom(pairs, bottomId) {
+  return Object.keys(pairs).find((topId) => pairs[topId] === bottomId);
+}
+function withLineDirection(lineDirections, pairs, topId, bottomId, direction) {
+  const next = { ...lineDirections };
+  delete next[topId];
+  const existingTop = findTopForBottom(pairs, bottomId);
+  if (existingTop !== void 0) delete next[existingTop];
+  next[topId] = direction;
+  return next;
+}
+function getPairIds(pair, topIds, bottomIds) {
+  if (pair.length !== 2) return null;
+  const first = pair[0];
+  const second = pair[1];
+  if (first === void 0 || second === void 0) return null;
+  if (topIds.has(first) && bottomIds.has(second)) return { topId: first, bottomId: second };
+  if (bottomIds.has(first) && topIds.has(second)) return { topId: second, bottomId: first };
+  return null;
+}
+function withPair(pairs, topId, bottomId) {
+  const next = { ...pairs };
+  delete next[topId];
+  const existingTop = findTopForBottom(next, bottomId);
+  if (existingTop !== void 0) delete next[existingTop];
+  next[topId] = bottomId;
+  return next;
+}
+function resolveCardStatus(ownId, isTop, pairs, pending, validationStatus, pairStatus) {
+  if (validationStatus) {
+    const topId2 = isTop ? ownId : findTopForBottom(pairs, ownId);
+    if (topId2 === void 0 || pairs[topId2] === void 0) return "idle";
+    return pairStatus ?? (validationStatus === "correct" ? "correct" : "incorrect");
+  }
+  if (pending?.side === (isTop ? "top" : "bottom") && pending.id === ownId) return "pending";
+  const topId = isTop ? ownId : findTopForBottom(pairs, ownId);
+  if (topId !== void 0 && pairs[topId] !== void 0) return "paired";
+  return "idle";
+}
+function buildDotClass(status, position) {
+  const cls = ["pair-matcher-dot", `pair-matcher-dot--${position}`];
+  if (status !== "idle") {
+    cls.push("pair-matcher-dot--active");
+    if (status !== "paired") cls.push(`pair-matcher-dot--${status}`);
+  }
+  return cls.join(" ");
+}
+function buildCardClass(status, isFlashing) {
+  const cls = ["pair-matcher-card"];
+  if (status !== "idle") cls.push(`pair-matcher-card--${status}`);
+  if (isFlashing) cls.push("pair-matcher-card--flash");
+  return cls.join(" ");
+}
+function lineStrokeVar(status) {
+  if (status === "correct") return "var(--pm-line-color-correct)";
+  if (status === "incorrect") return "var(--pm-line-color-incorrect)";
+  return "var(--pm-line-color)";
+}
+function renderPairMatcherItemContent(item, widgets) {
+  if (item.type === JSON_TYPES.SPACE) {
+    return /* @__PURE__ */ jsx("span", { className: "space", children: " " }, item.id);
+  }
+  if (item.type === JSON_TYPES.GROUP) {
+    return /* @__PURE__ */ jsx("span", { className: "group", children: item.items.map((subItem) => renderPairMatcherItemContent(subItem, widgets)) }, item.id);
+  }
+  return /* @__PURE__ */ jsx(
+    LayoutRenderer,
+    {
+      item,
+      widgets,
+      values: EMPTY_VALUES,
+      droppedInputs: EMPTY_DROPPED,
+      onChange: NOOP
+    },
+    item.id
+  );
+}
+const PairMatcherWidget = ({
+  widgetId,
+  widget,
+  onChange,
+  validationStatus = null,
+  validationDetail,
+  defaultValue: defaultValue2,
+  widgets,
+  shuffleItems = true
+}) => {
+  const { topItems, bottomItems } = widget;
+  const [shuffledTop] = useState(
+    () => shuffleItems ? lodashExports.shuffle([...topItems]) : [...topItems]
+  );
+  const [shuffledBottom] = useState(
+    () => shuffleItems ? lodashExports.shuffle([...bottomItems]) : [...bottomItems]
+  );
+  const widgetsMap = widgets ?? EMPTY_WIDGETS;
+  const topIds = useMemo(() => new Set(topItems.map((item) => item.itemId)), [topItems]);
+  const bottomIds = useMemo(() => new Set(bottomItems.map((item) => item.itemId)), [bottomItems]);
+  const pairStatusByTopId = useMemo(() => {
+    const statuses = {};
+    for (const result of validationDetail?.groupResults ?? []) {
+      const ids2 = getPairIds(result.group, topIds, bottomIds);
+      if (ids2) statuses[ids2.topId] = result.isCorrect ? "correct" : "incorrect";
+    }
+    return statuses;
+  }, [validationDetail?.groupResults, topIds, bottomIds]);
+  const [state, setState] = useState(() => ({
+    ...buildInitialState(defaultValue2, topIds, bottomIds),
+    pending: null,
+    flashTopId: null,
+    flashBottomId: null
+  }));
+  const flashTimerRef = useRef(null);
+  const handleTopClick = useCallback((topId) => {
+    if (validationStatus) return;
+    if (flashTimerRef.current) {
+      clearTimeout(flashTimerRef.current);
+      flashTimerRef.current = null;
+    }
+    setState((prev) => {
+      if (prev.pairs[topId] !== void 0) {
+        const { [topId]: _, ...rest } = prev.pairs;
+        const { [topId]: __, ...restDirections } = prev.lineDirections;
+        if (prev.pending?.side === "bottom") {
+          return {
+            pairs: withPair(rest, topId, prev.pending.id),
+            lineDirections: withLineDirection(restDirections, rest, topId, prev.pending.id, "bottom-to-top"),
+            pending: null,
+            flashTopId: topId,
+            flashBottomId: prev.pending.id
+          };
+        }
+        return {
+          pairs: rest,
+          lineDirections: restDirections,
+          pending: { side: "top", id: topId },
+          flashTopId: null,
+          flashBottomId: null
+        };
+      }
+      if (prev.pending?.side === "bottom") {
+        return {
+          pairs: withPair(prev.pairs, topId, prev.pending.id),
+          lineDirections: withLineDirection(prev.lineDirections, prev.pairs, topId, prev.pending.id, "bottom-to-top"),
+          pending: null,
+          flashTopId: topId,
+          flashBottomId: prev.pending.id
+        };
+      }
+      return {
+        ...prev,
+        pending: prev.pending?.side === "top" && prev.pending.id === topId ? null : { side: "top", id: topId },
+        flashTopId: null,
+        flashBottomId: null
+      };
+    });
+  }, [validationStatus]);
+  const handleBottomClick = useCallback((bottomId) => {
+    if (validationStatus) return;
+    if (flashTimerRef.current) {
+      clearTimeout(flashTimerRef.current);
+      flashTimerRef.current = null;
+    }
+    setState((prev) => {
+      const existingTop = findTopForBottom(prev.pairs, bottomId);
+      if (existingTop !== void 0) {
+        const { [existingTop]: _, ...rest } = prev.pairs;
+        const { [existingTop]: __, ...restDirections } = prev.lineDirections;
+        if (prev.pending?.side === "top" && prev.pending.id !== existingTop) {
+          return {
+            pairs: withPair(rest, prev.pending.id, bottomId),
+            lineDirections: withLineDirection(restDirections, rest, prev.pending.id, bottomId, "top-to-bottom"),
+            pending: null,
+            flashTopId: prev.pending.id,
+            flashBottomId: bottomId
+          };
+        }
+        return {
+          pairs: rest,
+          lineDirections: restDirections,
+          pending: { side: "bottom", id: bottomId },
+          flashTopId: null,
+          flashBottomId: null
+        };
+      }
+      if (prev.pending?.side === "top") {
+        return {
+          pairs: withPair(prev.pairs, prev.pending.id, bottomId),
+          lineDirections: withLineDirection(prev.lineDirections, prev.pairs, prev.pending.id, bottomId, "top-to-bottom"),
+          pending: null,
+          flashTopId: prev.pending.id,
+          flashBottomId: bottomId
+        };
+      }
+      return {
+        ...prev,
+        pending: prev.pending?.side === "bottom" && prev.pending.id === bottomId ? null : { side: "bottom", id: bottomId },
+        flashTopId: null,
+        flashBottomId: null
+      };
+    });
+  }, [validationStatus]);
+  useEffect(() => {
+    if (validationStatus || state.flashTopId === null || state.flashBottomId === null) return;
+    flashTimerRef.current = setTimeout(() => {
+      flashTimerRef.current = null;
+      setState((current) => {
+        if (current.flashTopId === null && current.flashBottomId === null) return current;
+        return { ...current, flashTopId: null, flashBottomId: null };
+      });
+    }, 650);
+    return () => {
+      if (flashTimerRef.current) {
+        clearTimeout(flashTimerRef.current);
+        flashTimerRef.current = null;
+      }
+    };
+  }, [state.flashTopId, state.flashBottomId, validationStatus]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    const value = Object.entries(state.pairs).map(
+      ([topId, bottomId]) => state.lineDirections[topId] === "bottom-to-top" ? [bottomId, topId] : [topId, bottomId]
+    );
+    onChangeRef.current(widgetId, value);
+  }, [state.pairs, state.lineDirections, widgetId]);
+  const containerRef = useRef(null);
+  const { dotRefs, lines } = usePairLines({
+    containerRef,
+    pairs: state.pairs,
+    lineDirections: state.lineDirections,
+    validationStatus,
+    pairStatusByTopId
+  });
+  const cols = useMemo(
+    () => Math.max(topItems.length, bottomItems.length, 1),
+    [topItems.length, bottomItems.length]
+  );
+  const renderCard = (item, isTop) => {
+    const isRtl = shouldItemsUseRTL(item.content);
+    const pairedTopId = isTop ? item.itemId : findTopForBottom(state.pairs, item.itemId);
+    const pairStatus = pairedTopId ? pairStatusByTopId[pairedTopId] ?? null : null;
+    const status = resolveCardStatus(
+      item.itemId,
+      isTop,
+      state.pairs,
+      state.pending,
+      validationStatus,
+      pairStatus
+    );
+    const isFlashing = isTop ? state.flashTopId === item.itemId : state.flashBottomId === item.itemId;
+    const dotKey = isTop ? `top:${item.itemId}` : `bottom:${item.itemId}`;
+    const dot = /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: buildDotClass(status, isTop ? "south" : "north"),
+        ref: (el) => {
+          if (el) dotRefs.current.set(dotKey, el);
+          else dotRefs.current.delete(dotKey);
+        }
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { className: "pair-matcher-cell", children: [
+      !isTop && dot,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `${buildCardClass(status, isFlashing)}${isRtl ? " pair-matcher-card--rtl" : ""}`,
+          dir: isRtl ? "rtl" : void 0,
+          onClick: () => isTop ? handleTopClick(item.itemId) : handleBottomClick(item.itemId),
+          "aria-pressed": status !== "idle",
+          "aria-disabled": validationStatus ? "true" : void 0,
+          children: /* @__PURE__ */ jsx("span", { className: "pair-matcher-card-content", children: item.content.map((li) => renderPairMatcherItemContent(li, widgetsMap)) })
+        }
+      ),
+      isTop && dot
+    ] }, item.id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `pair-matcher-widget${validationStatus ? ` pair-matcher-widget--${validationStatus}` : ""}`,
+      style: { "--pm-cols": cols },
+      ref: containerRef,
+      role: "group",
+      "aria-label": "Pair matcher exercise",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pair-matcher-row pair-matcher-row--top", children: shuffledTop.map((item) => renderCard(item, true)) }),
+        /* @__PURE__ */ jsx("svg", { className: "pair-matcher-lines", "aria-hidden": "true", children: lines.map((line) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: line.x1,
+            y1: line.y1,
+            x2: line.x2,
+            y2: line.y2,
+            stroke: lineStrokeVar(line.status),
+            strokeWidth: "var(--pm-line-width, 4)",
+            strokeLinecap: "round",
+            pathLength: 1,
+            className: "pair-matcher-line"
+          },
+          line.topId
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "pair-matcher-row pair-matcher-row--bottom", children: shuffledBottom.map((item) => renderCard(item, false)) })
+      ]
+    }
+  );
+};
+PairMatcherWidget.displayName = "PairMatcherWidget";
 function isInlineInputWidget(widget) {
   return widget.type === "inline-input";
 }
 function isDragOptionsWidget(widget) {
   return widget.type === "drag-options";
 }
+function isInlineDragOptionWidget(widget) {
+  return widget.type === "inline-drag-option";
+}
 function isRadioOptionsWidget(widget) {
   return widget.type === "radio-options";
 }
@@ -13806,6 +15263,9 @@ function isFractionWidget(widget) {
 function isMatcherWidget(widget) {
   return widget.type === "matcher";
 }
+function isPairMatcherWidget(widget) {
+  return widget.type === "pair-matcher";
+}
 function isVisualFractionWidget(widget) {
   return widget.type === "visual-fraction";
 }
@@ -13818,6 +15278,7 @@ const WidgetRenderer = ({
   validationStatus = null,
   numValidationStatus = null,
   denValidationStatus = null,
+  validationDetail,
   droppedInputs = /* @__PURE__ */ new Set(),
   widgets,
   onChange,
@@ -13852,6 +15313,15 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isInlineDragOptionWidget(widget)) {
+    return /* @__PURE__ */ jsx(
+      InlineDragOption,
+      {
+        widgetId,
+        widget
+      }
+    );
+  }
   if (isRadioOptionsWidget(widget)) {
     return /* @__PURE__ */ jsx(
       RadioOptions,
@@ -13917,6 +15387,20 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isPairMatcherWidget(widget)) {
+    return /* @__PURE__ */ jsx(
+      PairMatcherWidget,
+      {
+        widgetId,
+        widget,
+        onChange,
+        validationStatus,
+        validationDetail,
+        defaultValue: Array.isArray(value) ? value : void 0,
+        widgets
+      }
+    );
+  }
   if (isVisualFractionWidget(widget)) {
     return /* @__PURE__ */ jsx(
       VisualFraction,
@@ -14554,6 +16038,13 @@ const NumberLineRenderer = ({
   useEffect(() => {
     setCounterCount(defaultCounterCount);
   }, [counter]);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    if (counter !== void 0) {
+      onChangeRef.current(counter.id, String(counterCount));
+    }
+  }, [counterCount, counter?.id]);
   const effectiveStep = useMemo(() => {
     if (counter !== void 0 && counterCount > 0) {
       return cleanFloat((max - min) / counterCount);
@@ -14587,10 +16078,17 @@ const NumberLineRenderer = ({
     [visiblePositions]
   );
   const { positionContentHeight, getPositionContentRef } = useMeasuredPositionContentHeight(visiblePositionIds);
+  const nlValidationStatus = useMemo(() => {
+    if (!validationDetails || counter === void 0) return null;
+    if (counter.answer === void 0) return null;
+    const counterValidation = validationDetails[counter.id];
+    if (counterValidation === void 0) return null;
+    return counterValidation.isCorrect ? "correct" : "incorrect";
+  }, [validationDetails, counter]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
+      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}${nlValidationStatus ? ` number-line--${nlValidationStatus}` : ""}`,
       style: {
         [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%`,
         ...positionContentHeight && { "--nl-position-content-height": positionContentHeight }
@@ -14673,36 +16171,6 @@ const NumberLineRenderer = ({
     }
   );
 };
-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 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;
 }
@@ -14805,9 +16273,10 @@ const LayoutRenderer = ({
     case JSON_TYPES.WIDGET_REF: {
       const widget = widgets[item.widgetId];
       if (!widget) return null;
-      const isCorrect = validationDetails?.[item.widgetId];
+      const validationDetail = validationDetails?.[item.widgetId];
+      const isCorrect = validationDetail?.isCorrect;
       const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
-      const widgetKey = widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.VISUAL_FRACTION ? `${item.widgetId}-${resetKey}` : item.widgetId;
+      const widgetKey = STATEFUL_WIDGET_TYPES.has(widget.type) ? `${item.widgetId}-${resetKey}` : item.widgetId;
       return /* @__PURE__ */ jsx(
         WidgetRenderer,
         {
@@ -14817,8 +16286,9 @@ const LayoutRenderer = ({
           values,
           isDropped: droppedInputs.has(item.widgetId),
           validationStatus,
-          numValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__num`]),
-          denValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__den`]),
+          numValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__num`]?.isCorrect),
+          denValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__den`]?.isCorrect),
+          validationDetail,
           droppedInputs,
           widgets,
           onChange,
@@ -14885,6 +16355,126 @@ const LayoutRenderer = ({
         },
         resetKey
       );
+    case JSON_TYPES.VERTICAL_OPERATION: {
+      const vop = item;
+      const anyRowHasOp = vop.items.some(
+        (x) => x.type === JSON_TYPES.VOP_ROW && x.op !== void 0
+      );
+      let operatorRowIdx = -1;
+      if (!anyRowHasOp && vop.op !== void 0) {
+        const firstSepIdx = vop.items.findIndex((x) => x.type === JSON_TYPES.VOP_SEPARATOR);
+        for (let i = (firstSepIdx === -1 ? vop.items.length : firstSepIdx) - 1; i >= 0; i--) {
+          const curr = vop.items[i];
+          if (curr && curr.type === JSON_TYPES.VOP_ROW) {
+            operatorRowIdx = i;
+            break;
+          }
+        }
+      }
+      const totalCols = vop.cols + 1;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "vop",
+          style: { "--vop-cols": totalCols },
+          dir: "ltr",
+          children: vop.items.map((child, idx) => {
+            if (child.type === JSON_TYPES.VOP_SEPARATOR) {
+              const sep = child;
+              return /* @__PURE__ */ jsx("div", { className: "vop-sep" }, sep.id);
+            }
+            if (child.type === JSON_TYPES.VOP_CARRY_ROW) {
+              const carry = child;
+              const carryLeadingEmpty = Math.max(0, vop.cols - carry.cells.length);
+              return /* @__PURE__ */ jsxs("div", { className: "vop-row vop-carry-row", children: [
+                /* @__PURE__ */ jsx("span", { className: "vop-op-cell" }),
+                Array.from({ length: carryLeadingEmpty }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-empty" }, `cpad-${i}`)),
+                carry.cells.map((cell) => {
+                  if (cell.kind === "digit") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-digit", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "label") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-label", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "color") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-color", style: { color: cell.color }, children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "bold") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-bold", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "highlight") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-highlight", children: /* @__PURE__ */ jsx("mark", { children: cell.value }) }, cell.id);
+                  }
+                  if (cell.kind === "empty") {
+                    return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-empty" }, cell.id);
+                  }
+                  const widget = widgets[cell.widgetId];
+                  if (!widget) return /* @__PURE__ */ jsx("span", { className: "vop-cell" }, cell.id);
+                  const isCorrect = validationDetails?.[cell.widgetId]?.isCorrect;
+                  const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-carry-cell-input", children: /* @__PURE__ */ jsx(
+                    WidgetRenderer,
+                    {
+                      widget,
+                      widgetId: cell.widgetId,
+                      value: values[cell.widgetId] || "",
+                      isDropped: droppedInputs.has(cell.widgetId),
+                      validationStatus,
+                      onChange,
+                      onInputFocus
+                    }
+                  ) }, cell.id);
+                })
+              ] }, carry.id);
+            }
+            const row = child;
+            const showOperator = row.op !== void 0 || idx === operatorRowIdx;
+            const displayOp = row.op ?? vop.op;
+            const leadingEmpty = vop.cols - row.cells.length;
+            return /* @__PURE__ */ jsxs("div", { className: "vop-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "vop-op-cell", children: showOperator ? /* @__PURE__ */ jsx("span", { className: "operator vop-op", children: displayOp }) : null }),
+              Array.from({ length: leadingEmpty }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-empty" }, `pad-${i}`)),
+              row.cells.map((cell) => {
+                if (cell.kind === "digit") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-digit", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "label") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-label", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "color") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-color", style: { color: cell.color }, children: cell.value }, cell.id);
+                }
+                if (cell.kind === "bold") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-bold", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "highlight") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-highlight", children: /* @__PURE__ */ jsx("mark", { children: cell.value }) }, cell.id);
+                }
+                if (cell.kind === "empty") {
+                  return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-empty" }, cell.id);
+                }
+                const widget = widgets[cell.widgetId];
+                if (!widget) return /* @__PURE__ */ jsx("span", { className: "vop-cell" }, cell.id);
+                const isCorrect = validationDetails?.[cell.widgetId]?.isCorrect;
+                const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
+                return /* @__PURE__ */ jsx("span", { className: "vop-cell vop-cell-input", children: /* @__PURE__ */ jsx(
+                  WidgetRenderer,
+                  {
+                    widget,
+                    widgetId: cell.widgetId,
+                    value: values[cell.widgetId] || "",
+                    isDropped: droppedInputs.has(cell.widgetId),
+                    validationStatus,
+                    onChange,
+                    onInputFocus
+                  }
+                ) }, cell.id);
+              })
+            ] }, row.id);
+          })
+        }
+      );
+    }
     default:
       return null;
   }
@@ -14901,7 +16491,7 @@ const DEFAULT_RULER_TOOL = {
 function buildInitialValues(json) {
   const initial = {};
   for (const [id, widget] of Object.entries(json.widgets)) {
-    if (widget.type === JSON_TYPES.MATCHER) initial[id] = [];
+    if (widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.PAIR_MATCHER) initial[id] = [];
   }
   return initial;
 }
@@ -14920,10 +16510,12 @@ const ExerciseRenderer = forwardRef(({
   useImperativeHandle(ref, () => ({
     submit: () => {
       const result = validate(json, values);
-      const details = {};
-      for (const [id, v] of Object.entries(result.details)) {
-        details[id] = v.isCorrect;
-      }
+      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;
@@ -14931,18 +16523,12 @@ const ExerciseRenderer = forwardRef(({
         if (!answer) continue;
         const [expectedNum, expectedDen] = answer.split("/", 2);
         if (!expectedNum || !expectedDen) continue;
-        if (details[widgetId]) {
-          if (widget.numerator === null) details[`${widgetId}__num`] = true;
-          if (widget.denominator === null) details[`${widgetId}__den`] = true;
+        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) {
-            const u = values[`${widgetId}__num`];
-            details[`${widgetId}__num`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedNum);
-          }
-          if (widget.denominator === null) {
-            const u = values[`${widgetId}__den`];
-            details[`${widgetId}__den`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedDen);
-          }
+          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);
@@ -14982,6 +16568,13 @@ const ExerciseRenderer = forwardRef(({
     onSubmit?.(values);
   };
   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) {
@@ -14989,6 +16582,7 @@ const ExerciseRenderer = forwardRef(({
         groups.push({
           items: [item],
           hasArabic: itemContainsArabic(item),
+          hasRTLInlineWidget: false,
           subGroups: []
           // Question text doesn't need sub-grouping
         });
@@ -14997,13 +16591,15 @@ const ExerciseRenderer = forwardRef(({
       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, subGroups });
+          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
           currentGroup = [];
         }
         groups.push({
           items: [item],
           hasArabic: false,
+          hasRTLInlineWidget: false,
           subGroups: []
         });
         continue;
@@ -15011,13 +16607,31 @@ const ExerciseRenderer = forwardRef(({
       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, subGroups });
+          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
           currentGroup = [];
         }
         groups.push({
           items: [item],
           hasArabic: false,
+          hasRTLInlineWidget: false,
           subGroups: []
         });
         continue;
@@ -15025,8 +16639,9 @@ const ExerciseRenderer = forwardRef(({
       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, subGroups });
+          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
           currentGroup = [];
         }
       } else {
@@ -15035,11 +16650,12 @@ const ExerciseRenderer = forwardRef(({
     }
     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, subGroups });
+      groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
     }
     return groups;
-  }, [json.layout]);
+  }, [json.layout, json.widgets]);
   const droppedInputs = useMemo(() => new Set(droppedSources.keys()), [droppedSources]);
   const dragOptionsWidget = json.widgets["_drag_options"];
   const rulerWidget = json.widgets["_ruler"];
@@ -15057,7 +16673,8 @@ const ExerciseRenderer = forwardRef(({
       /* @__PURE__ */ jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: `exercise-line ${group.hasArabic ? "exercise-line-arabic" : ""}`,
+          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 ? (
@@ -15202,6 +16819,7 @@ export {
   HighlightedTextSchema,
   ImageInlineSchema,
   ImageItemSchema,
+  InlineDragOptionSchema,
   InlineInputJSONSchema,
   InlineInputWidgetSchema,
   InlineNodeSchema,
@@ -15214,6 +16832,8 @@ export {
   MatcherBlockSchema,
   MatcherItemSchema,
   MatcherRowSchema,
+  MatcherWidgetJSONSchema,
+  MixedValidationSchema,
   NumberLineCounterItemSchema,
   NumberLineHighlightItemSchema,
   NumberLineItemSchema,
@@ -15222,6 +16842,8 @@ export {
   NumericKeypadToolSchema,
   OperatorItemSchema,
   OperatorSchema,
+  PairMatcherBlockSchema,
+  PairMatcherWidgetJSONSchema,
   ParseError,
   QuestionTextSchema,
   RadioOptionsJSONSchema,
@@ -15239,10 +16861,31 @@ export {
   VISUAL_FRACTION_MAX_DIVISIONS,
   VISUAL_FRACTION_SHAPE,
   VISUAL_FRACTION_SHAPES,
+  VOP_OPERATORS,
   ValidationError,
   ValidationJSONSchema,
   ValidationNodeSchema,
+  VerticalOperationBlockSchema,
+  VerticalOperationItemSchema,
   VisualFractionInlineSchema,
+  VopBoldCellItemSchema,
+  VopBoldCellSchema,
+  VopCarryRowItemSchema,
+  VopCarryRowSchema,
+  VopCellItemSchema,
+  VopCellSchema,
+  VopColorCellItemSchema,
+  VopColorCellSchema,
+  VopDigitCellSchema,
+  VopEmptyCellSchema,
+  VopHighlightCellItemSchema,
+  VopHighlightCellSchema,
+  VopInputCellSchema,
+  VopLabelCellSchema,
+  VopRowItemSchema,
+  VopRowSchema,
+  VopSeparatorItemSchema,
+  VopSeparatorSchema,
   WidgetJSONSchema,
   WidgetRefSchema,
   WidgetRenderer,
@@ -15257,17 +16900,31 @@ export {
   createFreeText,
   createHighlightedText,
   createImage,
+  createInlineDragOption,
   createLineBlock,
   createMatcherBlock,
   createMatcherItem,
   createMatcherRow,
+  createMixedValidation,
   createNumericInput,
   createNumericKeypad,
+  createPairMatcherBlock,
   createSimpleValidation,
   createSpace,
   createStringInput,
   createTextBlock,
+  createVerticalOperationBlock,
   createVisualFraction,
+  createVopBoldCell,
+  createVopCarryRow,
+  createVopColorCell,
+  createVopDigitCell,
+  createVopEmptyCell,
+  createVopHighlightCell,
+  createVopInputCell,
+  createVopLabelCell,
+  createVopRow,
+  createVopSeparator,
   evaluate,
   extractVariables as extractExpressionVariables,
   findValidCombination,
@@ -15287,6 +16944,8 @@ export {
   isHighlightedText,
   isImage,
   isImageItem,
+  isInlineDragOption,
+  isInlineDragOptionJSON,
   isInlineInput,
   isInlineInputJSON,
   isInlineNode,
@@ -15295,9 +16954,13 @@ export {
   isMatcherBlock,
   isMatcherItem,
   isMatcherRow,
+  isMatcherWidget,
+  isMixedValidation,
   isNumericKeypad,
   isNumericKeypadJSON,
   isOperatorItem,
+  isPairMatcherBlock,
+  isPairMatcherWidget,
   isQuestionText,
   isRadioOptionsJSON,
   isSimpleValidation,
@@ -15311,8 +16974,15 @@ export {
   isToolNode,
   isValidExpression,
   isValidationNode,
+  isVerticalOperationBlock,
+  isVerticalOperationItem,
   isVisualFractionInline,
+  isVopCarryRow,
+  isVopCell,
+  isVopRow,
+  isVopSeparator,
   isWidgetRef,
+  normalizeVopOperator,
   parse,
   parseFractionKey,
   parseSafe,
@@ -15327,6 +16997,7 @@ export {
   validateExerciseJSONSafe,
   validateExpression,
   validateInputFormats,
+  validateMixed,
   validateSimple,
   validateVisualFractionCapacity,
   validateWidgetJSON,