@mathscan/math-exercise-engine 1.1.2 → 1.1.3

package/dist/index.js

@@ -23,6 +23,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 */
@@ -40,6 +42,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 */
@@ -114,6 +126,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 */
@@ -137,6 +159,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 */
@@ -152,6 +176,13 @@ const STATEFUL_WIDGET_TYPES = /* @__PURE__ */ new Set([
   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",
@@ -234,6 +265,10 @@ const STRING_INPUT = chevrotain.createToken({
   name: "STRING_INPUT",
   pattern: /STRING_INPUT/
 });
+const INLINE_DRAG_OPTION = chevrotain.createToken({
+  name: "INLINE_DRAG_OPTION",
+  pattern: /INLINE_DRAG_OPTION/
+});
 const DRAGABLE_BUTTONS_OPTIONS = chevrotain.createToken({
   name: "DRAGABLE_BUTTONS_OPTIONS",
   pattern: /DRAGABLE_BUTTONS_OPTIONS/
@@ -322,6 +357,26 @@ const IMAGE = chevrotain.createToken({
   name: "IMAGE",
   pattern: /IMAGE/
 });
+const VERTICAL_OPERATION = chevrotain.createToken({
+  name: "VERTICAL_OPERATION",
+  pattern: /VERTICAL_OPERATION/
+});
+const SEP = chevrotain.createToken({
+  name: "SEP",
+  pattern: /SEP(?![a-zA-Z0-9_])/
+});
+const CARRY = chevrotain.createToken({
+  name: "CARRY",
+  pattern: /CARRY(?![a-zA-Z0-9_])/
+});
+const INPUT = chevrotain.createToken({
+  name: "INPUT",
+  pattern: /INPUT(?=\s*\[)/
+});
+const Underscore = chevrotain.createToken({
+  name: "Underscore",
+  pattern: /_(?![a-zA-Z0-9_])/
+});
 const NumberLiteral = chevrotain.createToken({
   name: "NumberLiteral",
   pattern: /-?\d+(\.\d+)?/
@@ -418,6 +473,7 @@ const allTokens = [
   HIGHLIGHT_TEXT,
   W_S_I,
   STRING_INPUT,
+  INLINE_DRAG_OPTION,
   DRAGABLE_BUTTONS_OPTIONS,
   RADIO_BUTTONS_OPTIONS,
   NUMERIC_KEYPAD,
@@ -440,6 +496,11 @@ const allTokens = [
   ITEM,
   ANSWERS,
   IMAGE,
+  VERTICAL_OPERATION,
+  SEP,
+  CARRY,
+  INPUT,
+  Underscore,
   // Literals
   NumberLiteral,
   StringLiteral,
@@ -597,6 +658,10 @@ class MathExerciseParser extends chevrotain.CstParser {
           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) }
       ]);
     });
@@ -917,6 +982,130 @@ class MathExerciseParser extends chevrotain.CstParser {
         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);
@@ -970,7 +1159,9 @@ class MathExerciseParser extends chevrotain.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", () => {
@@ -1052,6 +1243,12 @@ class MathExerciseParser extends chevrotain.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) },
@@ -1320,6 +1517,10 @@ function isPerfectSquare(value) {
   const root = Math.sqrt(value);
   return Number.isInteger(root);
 }
+const InlineDragOptionSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.INLINE_DRAG_OPTION),
+  value: zod.z.string().min(1)
+});
 const InlineNodeSchema = zod.z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
@@ -1329,7 +1530,8 @@ const InlineNodeSchema = zod.z.union([
   InlineInputWidgetSchema,
   FractionInlineSchema,
   ImageInlineSchema,
-  VisualFractionInlineSchema
+  VisualFractionInlineSchema,
+  InlineDragOptionSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
@@ -1365,24 +1567,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({
@@ -1408,6 +1618,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;
 }
@@ -1429,6 +1645,9 @@ function isInlineNode(value) {
 function isVisualFractionInline(value) {
   return VisualFractionInlineSchema.safeParse(value).success;
 }
+function isInlineDragOption(value) {
+  return InlineDragOptionSchema.safeParse(value).success;
+}
 const TextBlockSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.TEXT_BLOCK),
   value: zod.z.string()
@@ -1482,17 +1701,19 @@ const NumberLineCounterSchema = zod.z.object({
   min: zod.z.number().int().min(1, { message: "COUNTER: min must be >= 1" }),
   max: zod.z.number().int().positive({ message: "COUNTER: max must be > 0" }),
   default: zod.z.number().int().nonnegative().optional(),
-  name: zod.z.string().optional()
+  name: zod.z.string().optional(),
+  answer: zod.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 = zod.z.object({
@@ -1626,6 +1847,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 = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("digit"),
+  value: zod.z.string()
+});
+const VopLabelCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("label"),
+  value: zod.z.string()
+});
+const VopInputCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("input"),
+  name: zod.z.string().min(1),
+  digits: zod.z.number().int().positive().default(1),
+  answer: zod.z.union([zod.z.string(), zod.z.number()]).optional()
+});
+const VopEmptyCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("empty")
+});
+const VopColorCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("color"),
+  value: zod.z.string(),
+  color: zod.z.string()
+});
+const VopBoldCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("bold"),
+  value: zod.z.string()
+});
+const VopHighlightCellSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CELL),
+  kind: zod.z.literal("highlight"),
+  value: zod.z.string()
+});
+const VopCellSchema = zod.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 = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_ROW),
+  cells: zod.z.array(VopCellSchema).min(1),
+  op: zod.z.enum(VOP_OPERATORS).optional()
+});
+function createVopRow(cells, op) {
+  return VopRowSchema.parse({ type: AST_TYPES.VOP_ROW, cells, op });
+}
+const VopCarryRowSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_CARRY_ROW),
+  cells: zod.z.array(VopCellSchema).min(1)
+});
+function createVopCarryRow(cells) {
+  return VopCarryRowSchema.parse({ type: AST_TYPES.VOP_CARRY_ROW, cells });
+}
+const VopSeparatorSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VOP_SEPARATOR)
+});
+function createVopSeparator() {
+  return VopSeparatorSchema.parse({ type: AST_TYPES.VOP_SEPARATOR });
+}
+const VopBlockItemSchema = zod.z.union([VopRowSchema, VopCarryRowSchema, VopSeparatorSchema]);
+const VerticalOperationBlockSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.VERTICAL_OPERATION_BLOCK),
+  op: zod.z.enum(VOP_OPERATORS).optional(),
+  items: zod.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)" }
@@ -1912,7 +2273,7 @@ function isMixedValidation(value) {
 function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
-const ContentBlockSchema = zod.z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema]);
+const ContentBlockSchema = zod.z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema]);
 const ExerciseDocumentSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
@@ -2016,6 +2377,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     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");
   }
@@ -2087,7 +2449,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);
@@ -2154,6 +2517,76 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     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) {
@@ -2249,6 +2682,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) {
@@ -2325,6 +2761,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -2519,7 +2960,8 @@ const LayoutItemSchema = zod.z.lazy(
     GroupItemSchema,
     OperatorItemSchema,
     TableItemSchema,
-    NumberLineItemSchema
+    NumberLineItemSchema,
+    VerticalOperationItemSchema
   ])
 );
 const GroupItemSchema = zod.z.object({
@@ -2556,7 +2998,8 @@ const NumberLineCounterItemSchema = zod.z.object({
   min: zod.z.number().int().min(1),
   max: zod.z.number().int().positive(),
   default: zod.z.number().int().nonnegative().optional(),
-  name: zod.z.string().optional()
+  name: zod.z.string().optional(),
+  answer: zod.z.number().int().positive().optional()
 });
 const NumberLineHighlightItemSchema = zod.z.object({
   id: zod.z.string(),
@@ -2593,6 +3036,80 @@ const MatcherRowItemSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.MATCHER_ROW),
   items: zod.z.array(MatcherItemContentSchema).min(1)
 });
+const VopOperatorJSONSchema = zod.z.enum(["+", "-", "×", "÷", "="]);
+const VopDigitCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("digit"),
+  value: zod.z.string()
+});
+const VopInputCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("input"),
+  widgetId: zod.z.string()
+});
+const VopLabelCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("label"),
+  value: zod.z.string()
+});
+const VopEmptyCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("empty")
+});
+const VopColorCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("color"),
+  value: zod.z.string(),
+  color: zod.z.string()
+});
+const VopBoldCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("bold"),
+  value: zod.z.string()
+});
+const VopHighlightCellItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CELL),
+  kind: zod.z.literal("highlight"),
+  value: zod.z.string()
+});
+const VopCellItemSchema = zod.z.discriminatedUnion("kind", [
+  VopDigitCellItemSchema,
+  VopLabelCellItemSchema,
+  VopColorCellItemSchema,
+  VopBoldCellItemSchema,
+  VopHighlightCellItemSchema,
+  VopInputCellItemSchema,
+  VopEmptyCellItemSchema
+]);
+const VopRowItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_ROW),
+  cells: zod.z.array(VopCellItemSchema),
+  op: VopOperatorJSONSchema.optional()
+});
+const VopCarryRowItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_CARRY_ROW),
+  cells: zod.z.array(VopCellItemSchema)
+});
+const VopSeparatorItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VOP_SEPARATOR)
+});
+const VerticalOperationItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.VERTICAL_OPERATION),
+  op: VopOperatorJSONSchema.optional(),
+  cols: zod.z.number().int().positive(),
+  items: zod.z.array(zod.z.union([VopRowItemSchema, VopCarryRowItemSchema, VopSeparatorItemSchema]))
+});
 const StringInputJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: zod.z.literal(INPUT_TYPES.STRING),
@@ -2613,6 +3130,10 @@ const DragOptionsJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.DRAG_OPTIONS),
   options: zod.z.array(zod.z.string())
 });
+const InlineDragOptionJSONSchema = zod.z.object({
+  type: zod.z.literal(JSON_TYPES.INLINE_DRAG_OPTION),
+  value: zod.z.string().min(1)
+});
 const RadioOptionsJSONSchema = zod.z.object({
   type: zod.z.literal(JSON_TYPES.RADIO_OPTIONS),
   options: zod.z.array(zod.z.string())
@@ -2663,6 +3184,7 @@ const VisualFractionJSONSchema = zod.z.object({
 const WidgetJSONSchema = zod.z.union([
   InlineInputJSONSchema,
   DragOptionsJSONSchema,
+  InlineDragOptionJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
   FractionJSONSchema,
@@ -2755,12 +3277,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;
 }
@@ -2783,6 +3311,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({
@@ -2793,9 +3333,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({
@@ -2818,6 +3362,8 @@ function toJSON(ast) {
         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({
@@ -2830,13 +3376,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) {
@@ -2870,6 +3413,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] = {
@@ -2887,6 +3437,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;
@@ -2897,11 +3468,11 @@ 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);
+      widgets[pmBlock.name] = buildPairMatcherWidget(pmBlock, idGenerator, inlineDragIds);
       answers[pmBlock.name] = pmBlock.answers;
     }
   }
@@ -2960,9 +3531,9 @@ function collectAllInlines(blocks) {
   }
   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,
@@ -2979,7 +3550,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;
@@ -3009,19 +3581,19 @@ function transformNumberLine(numberLine, idGenerator) {
   };
   return item;
 }
-function mapMatcherItemList(items, idGenerator) {
+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))
+    content: item.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds))
   }));
 }
-function buildMatcherWidget(matcher, idGenerator) {
+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)
+    items: mapMatcherItemList(row.items, idGenerator, inlineDragIds)
   }));
   const result = {
     type: JSON_TYPES.MATCHER,
@@ -3033,17 +3605,72 @@ function buildMatcherWidget(matcher, idGenerator) {
   }
   return result;
 }
-function buildPairMatcherWidget(pm, idGenerator) {
+function buildPairMatcherWidget(pm, idGenerator, inlineDragIds) {
   return {
     type: JSON_TYPES.PAIR_MATCHER,
-    topItems: mapMatcherItemList(pm.topItems, idGenerator),
-    bottomItems: mapMatcherItemList(pm.bottomItems, idGenerator)
+    topItems: mapMatcherItemList(pm.topItems, idGenerator, inlineDragIds),
+    bottomItems: mapMatcherItemList(pm.bottomItems, idGenerator, inlineDragIds)
   };
 }
-function transformTable(table, idGenerator) {
+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,
@@ -3067,10 +3694,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),
@@ -3078,7 +3705,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();
@@ -3150,6 +3777,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}`);
   }
@@ -13314,7 +13947,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__ */ jsxRuntime.jsx(
@@ -13346,6 +13979,32 @@ const InlineInput = ({
     }
   );
 };
+const SingleDragOption = ({
+  optionId,
+  value,
+  onOptionClick,
+  className = ""
+}) => {
+  const { usedOptionIds } = useExerciseDnd();
+  const isUsed = usedOptionIds.has(optionId);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(
+    Draggable,
+    {
+      id: optionId,
+      type: "drag-option",
+      data: { value, label: value },
+      className: "drag-option-wrapper",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "drag-option",
+          onClick: () => onOptionClick?.(value),
+          children: value
+        }
+      )
+    }
+  ) });
+};
 const PillBackground = ({
   width = "100%",
   minHeight = "72px",
@@ -13418,36 +14077,32 @@ const DragOptions = ({
   options,
   onOptionClick
 }) => {
-  const { usedOptionIds } = useExerciseDnd();
   return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "drag-option-slot", children: isUsed ? (
-      // Empty slot - this specific option is in an input
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-option-empty" })
-    ) : (
-      // Draggable option
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Draggable,
-        {
-          id: optionId,
-          type: "drag-option",
-          data: { value: optionValue, label: optionValue },
-          className: "drag-option-wrapper",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: "drag-option",
-              onClick: () => onOptionClick?.(optionValue),
-              children: optionValue
-            }
-          )
-        }
-      )
-    ) }, optionId);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SingleDragOption,
+      {
+        optionId,
+        value: optionValue,
+        onOptionClick
+      },
+      optionId
+    );
   }) }) });
 };
+const InlineDragOption = ({
+  widgetId,
+  widget
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-widget", children: /* @__PURE__ */ jsxRuntime.jsx(
+    SingleDragOption,
+    {
+      optionId: widgetId,
+      value: widget.value
+    }
+  ) });
+};
 const NumericKeypad = ({
   value,
   includeOperators = false,
@@ -13542,7 +14197,7 @@ const FractionInput = ({
       }
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-widget fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator", numValidationStatus) }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-bar", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator", denValidationStatus) })
@@ -13974,7 +14629,7 @@ const VisualFraction = ({
   return /* @__PURE__ */ jsxRuntime.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`,
@@ -14595,6 +15250,9 @@ function isInlineInputWidget(widget) {
 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";
 }
@@ -14657,6 +15315,15 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isInlineDragOptionWidget(widget)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      InlineDragOption,
+      {
+        widgetId,
+        widget
+      }
+    );
+  }
   if (isRadioOptionsWidget(widget)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       RadioOptions,
@@ -15373,6 +16040,13 @@ const NumberLineRenderer = ({
   React.useEffect(() => {
     setCounterCount(defaultCounterCount);
   }, [counter]);
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  React.useEffect(() => {
+    if (counter !== void 0) {
+      onChangeRef.current(counter.id, String(counterCount));
+    }
+  }, [counterCount, counter?.id]);
   const effectiveStep = React.useMemo(() => {
     if (counter !== void 0 && counterCount > 0) {
       return cleanFloat((max - min) / counterCount);
@@ -15406,10 +16080,17 @@ const NumberLineRenderer = ({
     [visiblePositions]
   );
   const { positionContentHeight, getPositionContentRef } = useMeasuredPositionContentHeight(visiblePositionIds);
+  const nlValidationStatus = React.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__ */ jsxRuntime.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 }
@@ -15676,6 +16357,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "vop-row vop-carry-row", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-op-cell" }),
+                Array.from({ length: carryLeadingEmpty }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-empty" }, `cpad-${i}`)),
+                carry.cells.map((cell) => {
+                  if (cell.kind === "digit") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-digit", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "label") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-label", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "color") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-color", style: { color: cell.color }, children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "bold") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-bold", children: cell.value }, cell.id);
+                  }
+                  if (cell.kind === "highlight") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-highlight", children: /* @__PURE__ */ jsxRuntime.jsx("mark", { children: cell.value }) }, cell.id);
+                  }
+                  if (cell.kind === "empty") {
+                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-empty" }, cell.id);
+                  }
+                  const widget = widgets[cell.widgetId];
+                  if (!widget) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell" }, cell.id);
+                  const isCorrect = validationDetails?.[cell.widgetId]?.isCorrect;
+                  const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-carry-cell-input", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "vop-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-op-cell", children: showOperator ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "operator vop-op", children: displayOp }) : null }),
+              Array.from({ length: leadingEmpty }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-empty" }, `pad-${i}`)),
+              row.cells.map((cell) => {
+                if (cell.kind === "digit") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-digit", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "label") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-label", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "color") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-color", style: { color: cell.color }, children: cell.value }, cell.id);
+                }
+                if (cell.kind === "bold") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-bold", children: cell.value }, cell.id);
+                }
+                if (cell.kind === "highlight") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-highlight", children: /* @__PURE__ */ jsxRuntime.jsx("mark", { children: cell.value }) }, cell.id);
+                }
+                if (cell.kind === "empty") {
+                  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-empty" }, cell.id);
+                }
+                const widget = widgets[cell.widgetId];
+                if (!widget) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell" }, cell.id);
+                const isCorrect = validationDetails?.[cell.widgetId]?.isCorrect;
+                const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
+                return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vop-cell vop-cell-input", children: /* @__PURE__ */ jsxRuntime.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;
   }
@@ -15769,6 +16570,13 @@ const ExerciseRenderer = React.forwardRef(({
     onSubmit?.(values);
   };
   const lineGroups = React.useMemo(() => {
+    const isRTLInlineWidget = (item) => {
+      if (item.type === JSON_TYPES.WIDGET_REF) {
+        const widget = json.widgets[item.widgetId];
+        return !!widget && RTL_INLINE_WIDGET_TYPES.has(widget.type);
+      }
+      return RTL_INLINE_WIDGET_TYPES.has(item.type);
+    };
     const groups = [];
     let currentGroup = [];
     for (const item of json.layout) {
@@ -15776,6 +16584,7 @@ const ExerciseRenderer = React.forwardRef(({
         groups.push({
           items: [item],
           hasArabic: itemContainsArabic(item),
+          hasRTLInlineWidget: false,
           subGroups: []
           // Question text doesn't need sub-grouping
         });
@@ -15784,13 +16593,15 @@ const ExerciseRenderer = React.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;
@@ -15798,13 +16609,31 @@ const ExerciseRenderer = React.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;
@@ -15812,8 +16641,9 @@ const ExerciseRenderer = React.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 {
@@ -15822,11 +16652,12 @@ const ExerciseRenderer = React.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 = React.useMemo(() => new Set(droppedSources.keys()), [droppedSources]);
   const dragOptionsWidget = json.widgets["_drag_options"];
   const rulerWidget = json.widgets["_ruler"];
@@ -15844,7 +16675,8 @@ const ExerciseRenderer = React.forwardRef(({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "exercise-layout", children: lineGroups.map((group, groupIdx) => /* @__PURE__ */ jsxRuntime.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 ? (
@@ -15988,6 +16820,7 @@ exports.HighlightedTextInlineSchema = HighlightedTextInlineSchema;
 exports.HighlightedTextSchema = HighlightedTextSchema;
 exports.ImageInlineSchema = ImageInlineSchema;
 exports.ImageItemSchema = ImageItemSchema;
+exports.InlineDragOptionSchema = InlineDragOptionSchema;
 exports.InlineInputJSONSchema = InlineInputJSONSchema;
 exports.InlineInputWidgetSchema = InlineInputWidgetSchema;
 exports.InlineNodeSchema = InlineNodeSchema;
@@ -16029,10 +16862,31 @@ exports.VISUAL_FRACTION_DEFAULT_SIZE = VISUAL_FRACTION_DEFAULT_SIZE;
 exports.VISUAL_FRACTION_MAX_DIVISIONS = VISUAL_FRACTION_MAX_DIVISIONS;
 exports.VISUAL_FRACTION_SHAPE = VISUAL_FRACTION_SHAPE;
 exports.VISUAL_FRACTION_SHAPES = VISUAL_FRACTION_SHAPES;
+exports.VOP_OPERATORS = VOP_OPERATORS;
 exports.ValidationError = ValidationError;
 exports.ValidationJSONSchema = ValidationJSONSchema;
 exports.ValidationNodeSchema = ValidationNodeSchema;
+exports.VerticalOperationBlockSchema = VerticalOperationBlockSchema;
+exports.VerticalOperationItemSchema = VerticalOperationItemSchema;
 exports.VisualFractionInlineSchema = VisualFractionInlineSchema;
+exports.VopBoldCellItemSchema = VopBoldCellItemSchema;
+exports.VopBoldCellSchema = VopBoldCellSchema;
+exports.VopCarryRowItemSchema = VopCarryRowItemSchema;
+exports.VopCarryRowSchema = VopCarryRowSchema;
+exports.VopCellItemSchema = VopCellItemSchema;
+exports.VopCellSchema = VopCellSchema;
+exports.VopColorCellItemSchema = VopColorCellItemSchema;
+exports.VopColorCellSchema = VopColorCellSchema;
+exports.VopDigitCellSchema = VopDigitCellSchema;
+exports.VopEmptyCellSchema = VopEmptyCellSchema;
+exports.VopHighlightCellItemSchema = VopHighlightCellItemSchema;
+exports.VopHighlightCellSchema = VopHighlightCellSchema;
+exports.VopInputCellSchema = VopInputCellSchema;
+exports.VopLabelCellSchema = VopLabelCellSchema;
+exports.VopRowItemSchema = VopRowItemSchema;
+exports.VopRowSchema = VopRowSchema;
+exports.VopSeparatorItemSchema = VopSeparatorItemSchema;
+exports.VopSeparatorSchema = VopSeparatorSchema;
 exports.WidgetJSONSchema = WidgetJSONSchema;
 exports.WidgetRefSchema = WidgetRefSchema;
 exports.WidgetRenderer = WidgetRenderer;
@@ -16047,6 +16901,7 @@ exports.createFraction = createFraction;
 exports.createFreeText = createFreeText;
 exports.createHighlightedText = createHighlightedText;
 exports.createImage = createImage;
+exports.createInlineDragOption = createInlineDragOption;
 exports.createLineBlock = createLineBlock;
 exports.createMatcherBlock = createMatcherBlock;
 exports.createMatcherItem = createMatcherItem;
@@ -16059,7 +16914,18 @@ exports.createSimpleValidation = createSimpleValidation;
 exports.createSpace = createSpace;
 exports.createStringInput = createStringInput;
 exports.createTextBlock = createTextBlock;
+exports.createVerticalOperationBlock = createVerticalOperationBlock;
 exports.createVisualFraction = createVisualFraction;
+exports.createVopBoldCell = createVopBoldCell;
+exports.createVopCarryRow = createVopCarryRow;
+exports.createVopColorCell = createVopColorCell;
+exports.createVopDigitCell = createVopDigitCell;
+exports.createVopEmptyCell = createVopEmptyCell;
+exports.createVopHighlightCell = createVopHighlightCell;
+exports.createVopInputCell = createVopInputCell;
+exports.createVopLabelCell = createVopLabelCell;
+exports.createVopRow = createVopRow;
+exports.createVopSeparator = createVopSeparator;
 exports.evaluate = evaluate;
 exports.extractExpressionVariables = extractVariables;
 exports.findValidCombination = findValidCombination;
@@ -16079,6 +16945,8 @@ exports.isGroupItem = isGroupItem;
 exports.isHighlightedText = isHighlightedText;
 exports.isImage = isImage;
 exports.isImageItem = isImageItem;
+exports.isInlineDragOption = isInlineDragOption;
+exports.isInlineDragOptionJSON = isInlineDragOptionJSON;
 exports.isInlineInput = isInlineInput;
 exports.isInlineInputJSON = isInlineInputJSON;
 exports.isInlineNode = isInlineNode;
@@ -16107,8 +16975,15 @@ exports.isTextItem = isTextItem$1;
 exports.isToolNode = isToolNode;
 exports.isValidExpression = isValidExpression;
 exports.isValidationNode = isValidationNode;
+exports.isVerticalOperationBlock = isVerticalOperationBlock;
+exports.isVerticalOperationItem = isVerticalOperationItem;
 exports.isVisualFractionInline = isVisualFractionInline;
+exports.isVopCarryRow = isVopCarryRow;
+exports.isVopCell = isVopCell;
+exports.isVopRow = isVopRow;
+exports.isVopSeparator = isVopSeparator;
 exports.isWidgetRef = isWidgetRef;
+exports.normalizeVopOperator = normalizeVopOperator;
 exports.parse = parse;
 exports.parseFractionKey = parseFractionKey;
 exports.parseSafe = parseSafe;