@mathscan/math-exercise-engine 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -4,6 +4,87 @@ import { create, all } from "mathjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext, forwardRef, cloneElement, useImperativeHandle } from "react";
 import require$$0, { unstable_batchedUpdates, createPortal } from "react-dom";
+const AST_TYPES = {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Inline Elements
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Regular text without special formatting */
+  FREE_TEXT: "FreeText",
+  /** Explicit spacing element */
+  SPACE: "Space",
+  /** Text with optional character-range highlighting */
+  HIGHLIGHTED_TEXT: "HighlightedText",
+  /** Inline input widget (string or numeric) */
+  INLINE_INPUT: "InlineInput",
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Blocks
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Question/instruction text block */
+  TEXT_BLOCK: "TextBlock",
+  /** Line containing inline elements */
+  LINE_BLOCK: "LineBlock",
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Tools
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Drag-and-drop options tool */
+  DRAG_OPTIONS: "DragOptions",
+  /** Numeric keypad input tool */
+  NUMERIC_KEYPAD: "NumericKeypad",
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Validation
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Simple answer matching validation */
+  SIMPLE_VALIDATION: "SimpleValidation",
+  /** Expression-based validation */
+  EXPRESSION_VALIDATION: "ExpressionValidation",
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Document
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Root exercise document */
+  EXERCISE_DOCUMENT: "ExerciseDocument"
+};
+const JSON_TYPES = {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Layout Items
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Question/instruction text */
+  QUESTION_TEXT: "question-text",
+  /** Regular text element */
+  TEXT: "text",
+  /** Spacing element */
+  SPACE: "space",
+  /** Text with optional highlighting */
+  HIGHLIGHTED_TEXT: "highlighted-text",
+  /** Reference to a widget */
+  WIDGET_REF: "widget-ref",
+  /** Line break element */
+  LINEBREAK: "linebreak",
+  /** Grouped layout items */
+  GROUP: "group",
+  /** Operator symbol */
+  OPERATOR: "operator",
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Widget Types
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Inline input widget (string or numeric) */
+  INLINE_INPUT: "inline-input",
+  /** Drag-and-drop options widget */
+  DRAG_OPTIONS: "drag-options",
+  /** Numeric keypad widget */
+  NUMERIC_KEYPAD: "numeric-keypad"
+};
+const VALIDATION_MODES = {
+  /** Simple answer matching validation */
+  SIMPLE: "simple",
+  /** Expression-based validation using JavaScript expressions */
+  EXPRESSION: "expression"
+};
+const INPUT_TYPES = {
+  /** String/text input */
+  STRING: "string",
+  /** Numeric input (digits only) */
+  NUMERIC: "numeric"
+};
 const Newline = createToken({
   name: "Newline",
   pattern: /\r?\n/,
@@ -29,14 +110,18 @@ const QUESTION_TEXT = createToken({
   name: "QUESTION_TEXT",
   pattern: /QUESTION_TEXT/
 });
-const NUMBER_TEXT = createToken({
-  name: "NUMBER_TEXT",
-  pattern: /NUMBER_TEXT/
+const TEXT_HIGHLIGHTER = createToken({
+  name: "TEXT_HIGHLIGHTER",
+  pattern: /TEXT_HIGHLIGHTER/
 });
 const W_S_I = createToken({
   name: "W_S_I",
   pattern: /W_S_I/
 });
+const STRING_INPUT = createToken({
+  name: "STRING_INPUT",
+  pattern: /STRING_INPUT/
+});
 const DRAGABLE_BUTTONS_OPTIONS = createToken({
   name: "DRAGABLE_BUTTONS_OPTIONS",
   pattern: /DRAGABLE_BUTTONS_OPTIONS/
@@ -53,6 +138,10 @@ const W_N_I = createToken({
   name: "W_N_I",
   pattern: /W_N_I/
 });
+const NUMERIC_INPUT = createToken({
+  name: "NUMERIC_INPUT",
+  pattern: /NUMERIC_INPUT/
+});
 const NumberLiteral = createToken({
   name: "NumberLiteral",
   pattern: /-?\d+(\.\d+)?/
@@ -122,7 +211,7 @@ const Comma = createToken({
 });
 const FreeText = createToken({
   name: "FreeText",
-  pattern: /(?:[^A-Z\n\r]|(?![A-Z_]+\[)[A-Z])+/,
+  pattern: /(?:[^A-Z\n\r \t+\-−×*÷/=<>?()\[\],]|(?![A-Z_]+\[)[A-Z])+/,
   line_breaks: false
 });
 const allTokens = [
@@ -135,13 +224,14 @@ const allTokens = [
   Comment,
   // Component keywords (before Identifier!)
   QUESTION_TEXT,
-  NUMBER_TEXT,
+  TEXT_HIGHLIGHTER,
   W_S_I,
+  STRING_INPUT,
   DRAGABLE_BUTTONS_OPTIONS,
   NUMERIC_KEYPAD,
   WIDGET_ANSWER,
-  // Legacy keywords
   W_N_I,
+  NUMERIC_INPUT,
   // Literals
   NumberLiteral,
   StringLiteral,
@@ -319,14 +409,14 @@ class MathExerciseParser extends CstParser {
         // Parentheses (for grouping)
         { ALT: () => this.CONSUME(LParen) },
         { ALT: () => this.CONSUME(RParen) },
-        // NUMBER_TEXT (for highlighting)
-        { ALT: () => this.SUBRULE(this.numberText) },
+        // TEXT_HIGHLIGHTER (for highlighting)
+        { ALT: () => this.SUBRULE(this.textHighlighter) },
         // W_S_I (inline input widget)
         { ALT: () => this.SUBRULE(this.inlineInput) }
       ]);
     });
-    this.numberText = this.RULE("numberText", () => {
-      this.CONSUME(NUMBER_TEXT);
+    this.textHighlighter = this.RULE("textHighlighter", () => {
+      this.CONSUME(TEXT_HIGHLIGHTER);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
@@ -334,7 +424,9 @@ class MathExerciseParser extends CstParser {
     this.inlineInput = this.RULE("inlineInput", () => {
       this.OR([
         { ALT: () => this.CONSUME(W_S_I, { LABEL: "stringInput" }) },
-        { ALT: () => this.CONSUME(W_N_I, { LABEL: "numericInput" }) }
+        { ALT: () => this.CONSUME(STRING_INPUT, { LABEL: "stringInput" }) },
+        { ALT: () => this.CONSUME(W_N_I, { LABEL: "numericInput" }) },
+        { ALT: () => this.CONSUME(NUMERIC_INPUT, { LABEL: "numericInput" }) }
       ]);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
@@ -361,7 +453,9 @@ class MathExerciseParser extends CstParser {
     this.numericKeypad = this.RULE("numericKeypad", () => {
       this.CONSUME(NUMERIC_KEYPAD);
       this.CONSUME(LBracket);
-      this.SUBRULE(this.parameterList);
+      this.OPTION(() => {
+        this.SUBRULE(this.parameterList);
+      });
       this.CONSUME(RBracket);
       this.MANY(() => {
         this.OR([
@@ -458,29 +552,29 @@ class MathExerciseParser extends CstParser {
 }
 const parser = new MathExerciseParser();
 const FreeTextInlineSchema = z.object({
-  type: z.literal("FreeText"),
+  type: z.literal(AST_TYPES.FREE_TEXT),
   value: z.string()
 });
 const SpaceInlineSchema = z.object({
-  type: z.literal("Space")
+  type: z.literal(AST_TYPES.SPACE)
 });
-const NumberTextInlineSchema = z.object({
-  type: z.literal("NumberText"),
+const HighlightedTextInlineSchema = z.object({
+  type: z.literal(AST_TYPES.HIGHLIGHTED_TEXT),
   value: z.string(),
   highlight: z.tuple([z.number(), z.number()]).optional()
 });
 const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
   z.object({
-    type: z.literal("InlineInput"),
+    type: z.literal(AST_TYPES.INLINE_INPUT),
     name: z.string(),
-    inputType: z.literal("string"),
+    inputType: z.literal(INPUT_TYPES.STRING),
     length: z.number().int().positive(),
     answer: z.union([z.string(), z.number()]).optional()
   }),
   z.object({
-    type: z.literal("InlineInput"),
+    type: z.literal(AST_TYPES.INLINE_INPUT),
     name: z.string(),
-    inputType: z.literal("numeric"),
+    inputType: z.literal(INPUT_TYPES.NUMERIC),
     digits: z.number().int().positive(),
     answer: z.union([z.string(), z.number()]).optional()
   })
@@ -488,52 +582,45 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
 const InlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
-  NumberTextInlineSchema,
+  HighlightedTextInlineSchema,
   InlineInputWidgetSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
-    type: "FreeText",
+    type: AST_TYPES.FREE_TEXT,
     value
   });
 }
 function createSpace() {
   return SpaceInlineSchema.parse({
-    type: "Space"
+    type: AST_TYPES.SPACE
   });
 }
-function createNumberText(value, highlight) {
-  return NumberTextInlineSchema.parse({
-    type: "NumberText",
+function createHighlightedText(value, highlight) {
+  return HighlightedTextInlineSchema.parse({
+    type: AST_TYPES.HIGHLIGHTED_TEXT,
     value,
     highlight
   });
 }
 function createStringInput(name, length, answer) {
   return InlineInputWidgetSchema.parse({
-    type: "InlineInput",
+    type: AST_TYPES.INLINE_INPUT,
     name,
-    inputType: "string",
+    inputType: INPUT_TYPES.STRING,
     length,
     answer
   });
 }
 function createNumericInput(name, digits, answer) {
   return InlineInputWidgetSchema.parse({
-    type: "InlineInput",
+    type: AST_TYPES.INLINE_INPUT,
     name,
-    inputType: "numeric",
+    inputType: INPUT_TYPES.NUMERIC,
     digits,
     answer
   });
 }
-function createInlineInput(name, inputType, lengthOrDigits, answer) {
-  if (inputType === "string") {
-    return createStringInput(name, lengthOrDigits, answer);
-  } else {
-    return createNumericInput(name, lengthOrDigits, answer);
-  }
-}
 function isFreeText(value) {
   return FreeTextInlineSchema.safeParse(value).success;
 }
@@ -547,22 +634,22 @@ function isInlineNode(value) {
   return InlineNodeSchema.safeParse(value).success;
 }
 const TextBlockSchema = z.object({
-  type: z.literal("TextBlock"),
+  type: z.literal(AST_TYPES.TEXT_BLOCK),
   value: z.string()
 });
 const LineBlockSchema = z.object({
-  type: z.literal("LineBlock"),
+  type: z.literal(AST_TYPES.LINE_BLOCK),
   inlines: z.array(InlineNodeSchema)
 });
 function createTextBlock(value) {
   return TextBlockSchema.parse({
-    type: "TextBlock",
+    type: AST_TYPES.TEXT_BLOCK,
     value
   });
 }
 function createLineBlock(inlines) {
   return LineBlockSchema.parse({
-    type: "LineBlock",
+    type: AST_TYPES.LINE_BLOCK,
     inlines
   });
 }
@@ -573,13 +660,13 @@ function isLineBlock(value) {
   return LineBlockSchema.safeParse(value).success;
 }
 const DragOptionsToolSchema = z.object({
-  type: z.literal("DragOptions"),
+  type: z.literal(AST_TYPES.DRAG_OPTIONS),
   options: z.array(z.string()).min(1)
 });
 const NumericKeypadToolSchema = z.object({
-  type: z.literal("NumericKeypad"),
-  includeDecimal: z.boolean().default(false),
-  includeNegative: z.boolean().default(false)
+  type: z.literal(AST_TYPES.NUMERIC_KEYPAD),
+  includeOperators: z.boolean().optional(),
+  includeDecimal: z.boolean().optional()
 });
 const ToolNodeSchema = z.discriminatedUnion("type", [
   DragOptionsToolSchema,
@@ -587,15 +674,15 @@ const ToolNodeSchema = z.discriminatedUnion("type", [
 ]);
 function createDragOptions(options) {
   return DragOptionsToolSchema.parse({
-    type: "DragOptions",
+    type: AST_TYPES.DRAG_OPTIONS,
     options
   });
 }
-function createNumericKeypad(includeDecimal = false, includeNegative = false) {
+function createNumericKeypad(includeOperators, includeDecimal) {
   return NumericKeypadToolSchema.parse({
-    type: "NumericKeypad",
-    includeDecimal,
-    includeNegative
+    type: AST_TYPES.NUMERIC_KEYPAD,
+    includeOperators,
+    includeDecimal
   });
 }
 function isDragOptions(value) {
@@ -608,10 +695,10 @@ function isToolNode(value) {
   return ToolNodeSchema.safeParse(value).success;
 }
 const SimpleValidationSchema = z.object({
-  type: z.literal("SimpleValidation")
+  type: z.literal(AST_TYPES.SIMPLE_VALIDATION)
 });
 const ExpressionValidationSchema = z.object({
-  type: z.literal("ExpressionValidation"),
+  type: z.literal(AST_TYPES.EXPRESSION_VALIDATION),
   expression: z.string()
 });
 const ValidationNodeSchema = z.discriminatedUnion("type", [
@@ -620,12 +707,12 @@ const ValidationNodeSchema = z.discriminatedUnion("type", [
 ]);
 function createSimpleValidation() {
   return SimpleValidationSchema.parse({
-    type: "SimpleValidation"
+    type: AST_TYPES.SIMPLE_VALIDATION
   });
 }
 function createExpressionValidation(expression) {
   return ExpressionValidationSchema.parse({
-    type: "ExpressionValidation",
+    type: AST_TYPES.EXPRESSION_VALIDATION,
     expression
   });
 }
@@ -639,7 +726,7 @@ function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
 const ExerciseDocumentSchema = z.object({
-  type: z.literal("ExerciseDocument"),
+  type: z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
   lines: z.array(LineBlockSchema),
   tools: z.array(ToolNodeSchema).optional(),
@@ -647,7 +734,7 @@ const ExerciseDocumentSchema = z.object({
 });
 function createExerciseDocument(question, lines, validation, tools) {
   return ExerciseDocumentSchema.parse({
-    type: "ExerciseDocument",
+    type: AST_TYPES.EXERCISE_DOCUMENT,
     question,
     lines,
     tools,
@@ -752,19 +839,22 @@ class NaturalDSLVisitor extends BaseCstVisitor {
       const token = ctx.RParen[0];
       return createFreeText(token.image);
     }
-    if (ctx.numberText) {
-      return this.visit(ctx.numberText);
+    if (ctx.textHighlighter) {
+      return this.visit(ctx.textHighlighter);
     }
     if (ctx.inlineInput) {
       return this.visit(ctx.inlineInput);
     }
     throw new Error("Unknown inline element");
   }
-  numberText(ctx) {
+  textHighlighter(ctx) {
     const params = this.visit(ctx.parameterList);
     const value = params.value;
-    const highlight = params.highlight;
-    return createNumberText(value, highlight);
+    let highlight = void 0;
+    if (params.start !== void 0 && params.end !== void 0) {
+      highlight = [params.start, params.end];
+    }
+    return createHighlightedText(value, highlight);
   }
   inlineInput(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -794,9 +884,10 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     return createDragOptions(strings);
   }
   numericKeypad(ctx) {
-    const params = this.visit(ctx.parameterList);
+    const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
+    const includeOperators = params.includeOperators === true || params.includeOperators === "true";
     const includeDecimal = params.includeDecimal === true || params.includeDecimal === "true";
-    return createNumericKeypad(includeDecimal);
+    return createNumericKeypad(includeOperators || void 0, includeDecimal || void 0);
   }
   // ═══════════════════════════════════════════════════════════════════════════
   // Validation
@@ -888,33 +979,33 @@ function toAST(cst) {
 }
 const TextItemSchema = z.object({
   id: z.string(),
-  type: z.literal("text"),
+  type: z.literal(JSON_TYPES.TEXT),
   value: z.string()
 });
 const QuestionTextSchema = z.object({
   id: z.string(),
-  type: z.literal("question-text"),
+  type: z.literal(JSON_TYPES.QUESTION_TEXT),
   value: z.string()
 });
 const WidgetRefSchema = z.object({
   id: z.string(),
-  type: z.literal("widget-ref"),
+  type: z.literal(JSON_TYPES.WIDGET_REF),
   widgetId: z.string()
 });
-const NumberTextSchema = z.object({
+const HighlightedTextSchema = z.object({
   id: z.string(),
-  type: z.literal("number-text"),
+  type: z.literal(JSON_TYPES.HIGHLIGHTED_TEXT),
   value: z.string(),
   highlight: z.tuple([z.number(), z.number()]).optional()
 });
 const LinebreakSchema = z.object({
   id: z.string(),
-  type: z.literal("linebreak")
+  type: z.literal(JSON_TYPES.LINEBREAK)
 });
 const OperatorSchema = z.enum(["+", "-", "×", "÷", "=", "<", ">", "?"]);
 const OperatorItemSchema = z.object({
   id: z.string(),
-  type: z.literal("operator"),
+  type: z.literal(JSON_TYPES.OPERATOR),
   operator: OperatorSchema
 });
 const LayoutItemSchema = z.lazy(
@@ -922,7 +1013,7 @@ const LayoutItemSchema = z.lazy(
     QuestionTextSchema,
     TextItemSchema,
     WidgetRefSchema,
-    NumberTextSchema,
+    HighlightedTextSchema,
     LinebreakSchema,
     GroupItemSchema,
     OperatorItemSchema
@@ -930,17 +1021,17 @@ const LayoutItemSchema = z.lazy(
 );
 const GroupItemSchema = z.object({
   id: z.string(),
-  type: z.literal("group"),
+  type: z.literal(JSON_TYPES.GROUP),
   items: z.array(LayoutItemSchema)
 });
 const StringInputJSONSchema = z.object({
-  type: z.literal("inline-input"),
-  inputType: z.literal("string"),
+  type: z.literal(JSON_TYPES.INLINE_INPUT),
+  inputType: z.literal(INPUT_TYPES.STRING),
   length: z.number().int().positive()
 });
 const NumericInputJSONSchema = z.object({
-  type: z.literal("inline-input"),
-  inputType: z.literal("numeric"),
+  type: z.literal(JSON_TYPES.INLINE_INPUT),
+  inputType: z.literal(INPUT_TYPES.NUMERIC),
   digits: z.number().int().positive()
 });
 const InlineInputJSONSchema = z.discriminatedUnion("inputType", [
@@ -948,12 +1039,13 @@ const InlineInputJSONSchema = z.discriminatedUnion("inputType", [
   NumericInputJSONSchema
 ]);
 const DragOptionsJSONSchema = z.object({
-  type: z.literal("drag-options"),
+  type: z.literal(JSON_TYPES.DRAG_OPTIONS),
   options: z.array(z.string())
 });
 const NumericKeypadJSONSchema = z.object({
-  type: z.literal("numeric-keypad"),
-  includeDecimal: z.boolean()
+  type: z.literal(JSON_TYPES.NUMERIC_KEYPAD),
+  includeOperators: z.boolean().optional(),
+  includeDecimal: z.boolean().optional()
 });
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
@@ -961,7 +1053,7 @@ const WidgetJSONSchema = z.union([
   NumericKeypadJSONSchema
 ]);
 const ValidationJSONSchema = z.object({
-  mode: z.enum(["simple", "expression"]),
+  mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION]),
   answers: z.record(z.union([z.string(), z.number()])).optional(),
   expression: z.string().optional(),
   variables: z.array(z.string()).optional()
@@ -993,40 +1085,34 @@ function validateWidgetJSONSafe(data) {
   return WidgetJSONSchema.safeParse(data);
 }
 function isQuestionText(item) {
-  return item.type === "question-text";
+  return item.type === JSON_TYPES.QUESTION_TEXT;
 }
-function isTextItem(item) {
-  return item.type === "text";
+function isTextItem$1(item) {
+  return item.type === JSON_TYPES.TEXT;
 }
 function isWidgetRef(item) {
-  return item.type === "widget-ref";
+  return item.type === JSON_TYPES.WIDGET_REF;
 }
-function isNumberText(item) {
-  return item.type === "number-text";
+function isHighlightedText(item) {
+  return item.type === JSON_TYPES.HIGHLIGHTED_TEXT;
 }
 function isLinebreak(item) {
-  return item.type === "linebreak";
+  return item.type === JSON_TYPES.LINEBREAK;
 }
 function isGroupItem(item) {
-  return item.type === "group";
+  return item.type === JSON_TYPES.GROUP;
 }
 function isOperatorItem(item) {
-  return item.type === "operator";
+  return item.type === JSON_TYPES.OPERATOR;
 }
 function isInlineInputJSON(widget) {
-  return widget.type === "inline-input";
+  return widget.type === JSON_TYPES.INLINE_INPUT;
 }
 function isDragOptionsJSON(widget) {
-  return widget.type === "drag-options";
+  return widget.type === JSON_TYPES.DRAG_OPTIONS;
 }
 function isNumericKeypadJSON(widget) {
-  return widget.type === "numeric-keypad";
-}
-function isWidgetPlaceholder(item) {
-  return item.type === "widget-ref";
-}
-function isNumericInputJSON(widget) {
-  return widget.type === "inline-input";
+  return widget.type === JSON_TYPES.NUMERIC_KEYPAD;
 }
 class LayoutIdGenerator {
   constructor() {
@@ -1044,8 +1130,8 @@ function toJSON(ast) {
   const layout = [];
   if (ast.question) {
     layout.push({
-      id: idGenerator.generate("question-text"),
-      type: "question-text",
+      id: idGenerator.generate(JSON_TYPES.QUESTION_TEXT),
+      type: JSON_TYPES.QUESTION_TEXT,
       value: ast.question.value
     });
   }
@@ -1057,17 +1143,17 @@ function toJSON(ast) {
   const answers = {};
   for (const line of ast.lines) {
     for (const inline of line.inlines) {
-      if (inline.type === "InlineInput") {
-        if (inline.inputType === "string") {
+      if (inline.type === AST_TYPES.INLINE_INPUT) {
+        if (inline.inputType === INPUT_TYPES.STRING) {
           widgets[inline.name] = {
-            type: "inline-input",
-            inputType: "string",
+            type: JSON_TYPES.INLINE_INPUT,
+            inputType: INPUT_TYPES.STRING,
             length: inline.length
           };
         } else {
           widgets[inline.name] = {
-            type: "inline-input",
-            inputType: "numeric",
+            type: JSON_TYPES.INLINE_INPUT,
+            inputType: INPUT_TYPES.NUMERIC,
             digits: inline.digits
           };
         }
@@ -1079,14 +1165,15 @@ function toJSON(ast) {
   }
   if (ast.tools) {
     for (const tool of ast.tools) {
-      if (tool.type === "DragOptions") {
+      if (tool.type === AST_TYPES.DRAG_OPTIONS) {
         widgets["_drag_options"] = {
-          type: "drag-options",
+          type: JSON_TYPES.DRAG_OPTIONS,
           options: tool.options
         };
-      } else if (tool.type === "NumericKeypad") {
+      } else if (tool.type === AST_TYPES.NUMERIC_KEYPAD) {
         widgets["_numeric_keypad"] = {
-          type: "numeric-keypad",
+          type: JSON_TYPES.NUMERIC_KEYPAD,
+          includeOperators: tool.includeOperators,
           includeDecimal: tool.includeDecimal
         };
       }
@@ -1107,35 +1194,44 @@ function transformLine(line, idGenerator) {
     items.push(transformInline(inline, idGenerator));
   }
   items.push({
-    id: idGenerator.generate("linebreak"),
-    type: "linebreak"
+    id: idGenerator.generate(JSON_TYPES.LINEBREAK),
+    type: JSON_TYPES.LINEBREAK
   });
   return items;
 }
 function transformInline(inline, idGenerator) {
   switch (inline.type) {
-    case "FreeText":
+    case AST_TYPES.FREE_TEXT:
+      const trimmed = inline.value.trim();
+      const operators = ["+", "-", "×", "÷", "=", "<", ">", "?"];
+      if (operators.includes(trimmed) && inline.value.trim() === inline.value) {
+        return {
+          id: idGenerator.generate("operator"),
+          type: "operator",
+          operator: trimmed
+        };
+      }
       return {
-        id: idGenerator.generate("text"),
-        type: "text",
+        id: idGenerator.generate(JSON_TYPES.TEXT),
+        type: JSON_TYPES.TEXT,
         value: inline.value
       };
-    case "Space":
+    case AST_TYPES.SPACE:
       return {
-        id: idGenerator.generate("space"),
-        type: "space"
+        id: idGenerator.generate(JSON_TYPES.SPACE),
+        type: JSON_TYPES.SPACE
       };
-    case "NumberText":
+    case AST_TYPES.HIGHLIGHTED_TEXT:
       return {
-        id: idGenerator.generate("number-text"),
-        type: "number-text",
+        id: idGenerator.generate(JSON_TYPES.HIGHLIGHTED_TEXT),
+        type: JSON_TYPES.HIGHLIGHTED_TEXT,
         value: inline.value,
         highlight: inline.highlight
       };
-    case "InlineInput":
+    case AST_TYPES.INLINE_INPUT:
       return {
-        id: idGenerator.generate("widget-ref"),
-        type: "widget-ref",
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
         widgetId: inline.name
       };
     default:
@@ -1143,16 +1239,16 @@ function transformInline(inline, idGenerator) {
   }
 }
 function transformValidation(validation, answers, widgets) {
-  if (validation.type === "SimpleValidation") {
+  if (validation.type === AST_TYPES.SIMPLE_VALIDATION) {
     return {
-      mode: "simple",
+      mode: VALIDATION_MODES.SIMPLE,
       answers
     };
-  } else if (validation.type === "ExpressionValidation") {
+  } else if (validation.type === AST_TYPES.EXPRESSION_VALIDATION) {
     const validVariableNames = Object.keys(widgets);
     const variables = extractVariables$1(validation.expression, validVariableNames);
     return {
-      mode: "expression",
+      mode: VALIDATION_MODES.EXPRESSION,
       expression: validation.expression,
       variables
     };
@@ -1478,9 +1574,9 @@ function findValidCombination(expression, ranges) {
 }
 function validate(exercise, userInputs) {
   switch (exercise.validation.mode) {
-    case "simple":
+    case VALIDATION_MODES.SIMPLE:
       return validateSimple(exercise, userInputs);
-    case "expression":
+    case VALIDATION_MODES.EXPRESSION:
       return validateExpression(exercise, userInputs);
     default:
       return {
@@ -1492,13 +1588,13 @@ function validate(exercise, userInputs) {
 }
 function getMissingInputs(exercise, userInputs) {
   const missing = [];
-  if (exercise.validation.mode === "simple" && exercise.validation.answers) {
+  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] === "") {
         missing.push(widgetId);
       }
     }
-  } else if (exercise.validation.mode === "expression" && exercise.validation.variables) {
+  } else if (exercise.validation.mode === VALIDATION_MODES.EXPRESSION && exercise.validation.variables) {
     for (const varName of exercise.validation.variables) {
       if (!(varName in userInputs) || userInputs[varName] === "") {
         missing.push(varName);
@@ -1514,7 +1610,7 @@ function validateInputFormats(exercise, userInputs) {
     if (value === void 0 || value === "") {
       continue;
     }
-    if (widget.type === "inline-input" && widget.inputType === "numeric") {
+    if (widget.type === JSON_TYPES.INLINE_INPUT && widget.inputType === INPUT_TYPES.NUMERIC) {
       const numValue = typeof value === "number" ? value : parseFloat(String(value));
       if (!Number.isFinite(numValue)) {
         errors[widgetId] = "Must be a valid number";
@@ -5544,7 +5640,8 @@ const InlineInput = ({
   inputType,
   length,
   digits,
-  onChange
+  onChange,
+  onFocus
 }) => {
   const handleChange = useCallback((newValue, fromDrop = false) => {
     onChange(widgetId, newValue, fromDrop);
@@ -5585,6 +5682,7 @@ const InlineInput = ({
             className: "inline-input",
             value,
             onChange: (e) => handleChange(e.target.value, false),
+            onFocus: () => onFocus?.(widgetId),
             maxLength: expectedLength,
             style: { width: dynamicWidth }
           }
@@ -5629,6 +5727,7 @@ const DragOptions = ({
 };
 const NumericKeypad = ({
   value,
+  includeOperators = false,
   includeDecimal = false,
   onChange
 }) => {
@@ -5638,32 +5737,23 @@ const NumericKeypad = ({
   const handleBackspace = () => {
     onChange(value.slice(0, -1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: "numeric-keypad", children: [
-    ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"].map((digit) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "keypad-btn",
-        onClick: () => handleDigit(digit),
-        children: digit
-      },
-      digit
-    )),
-    includeDecimal && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "keypad-btn",
-        onClick: () => handleDigit("."),
-        children: "."
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "keypad-btn",
-        onClick: handleBackspace,
-        children: "⌫"
-      }
-    )
+  return /* @__PURE__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, children: [
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-decimal", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
   ] });
 };
 function isInlineInputWidget(widget) {
@@ -5680,11 +5770,10 @@ const WidgetRenderer = ({
   widgetId,
   value,
   isDropped = false,
-  onChange
+  onChange,
+  onInputFocus,
+  onKeypadChange
 }) => {
-  const handleChange = useCallback((newValue, fromDrop = false) => {
-    onChange(widgetId, newValue, fromDrop);
-  }, [onChange, widgetId]);
   if (isInlineInputWidget(widget)) {
     return /* @__PURE__ */ jsx(
       InlineInput,
@@ -5695,7 +5784,8 @@ const WidgetRenderer = ({
         inputType: widget.inputType,
         length: widget.inputType === "string" ? widget.length : void 0,
         digits: widget.inputType === "numeric" ? widget.digits : void 0,
-        onChange
+        onChange,
+        onFocus: onInputFocus
       }
     );
   }
@@ -5714,41 +5804,102 @@ const WidgetRenderer = ({
       NumericKeypad,
       {
         value,
+        includeOperators: widget.includeOperators,
         includeDecimal: widget.includeDecimal,
-        onChange: handleChange
+        onChange: onKeypadChange || (() => {
+        })
       }
     );
   }
   return null;
 };
-function isArabic$1(text) {
+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.OPERATOR || item.type === JSON_TYPES.SPACE || item.type === JSON_TYPES.GROUP;
+}
+function groupLineItems(items) {
+  const groups = [];
+  let currentTextGroup = [];
+  for (const item of items) {
+    if (isTextItem(item)) {
+      currentTextGroup.push(item);
+    } else {
+      if (currentTextGroup.length > 0) {
+        const hasArabic = currentTextGroup.some(itemContainsArabic);
+        const hasLatin = currentTextGroup.some(itemContainsLatin);
+        const shouldApplyRTL = hasArabic && !hasLatin;
+        groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
+        currentTextGroup = [];
+      }
+      groups.push({ items: [item], isTextGroup: false, hasArabic: false, hasLatin: false, shouldApplyRTL: false });
+    }
+  }
+  if (currentTextGroup.length > 0) {
+    const hasArabic = currentTextGroup.some(itemContainsArabic);
+    const hasLatin = currentTextGroup.some(itemContainsLatin);
+    const shouldApplyRTL = hasArabic && !hasLatin;
+    groups.push({ items: currentTextGroup, isTextGroup: true, hasArabic, hasLatin, shouldApplyRTL });
+  }
+  return groups;
+}
 const LayoutRenderer = ({
   item,
   widgets,
   values,
   droppedInputs,
-  onChange
+  onChange,
+  onInputFocus
 }) => {
   switch (item.type) {
-    case "question-text": {
-      const hasArabic = isArabic$1(item.value);
+    case JSON_TYPES.QUESTION_TEXT: {
+      const hasArabic = isArabic(item.value);
       return /* @__PURE__ */ jsx("span", { className: `question-text ${hasArabic ? "question-text-arabic" : ""}`, children: item.value });
     }
-    case "text":
-      return /* @__PURE__ */ jsx("span", { className: `text-item ${isArabic$1(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
-    case "number-text":
+    case JSON_TYPES.TEXT:
+      return /* @__PURE__ */ jsx("span", { className: `text-item ${isArabic(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
+    case JSON_TYPES.HIGHLIGHTED_TEXT: {
+      const hasArabic = isArabic(item.value);
+      const dirAttr = !hasArabic ? "ltr" : void 0;
       if (item.highlight) {
         const [start, end] = item.highlight;
-        return /* @__PURE__ */ jsxs("span", { className: "number-text", children: [
+        return /* @__PURE__ */ jsxs("span", { className: "highlighted-text", dir: dirAttr, children: [
           item.value.slice(0, start),
-          /* @__PURE__ */ jsx("mark", { className: "highlight", children: item.value.slice(start, end) }),
+          /* @__PURE__ */ jsx("span", { className: "highlight", children: item.value.slice(start, end) }),
           item.value.slice(end)
         ] });
       }
-      return /* @__PURE__ */ jsx("span", { className: "number-text", children: item.value });
-    case "widget-ref": {
+      return /* @__PURE__ */ jsx("span", { className: "highlighted-text", dir: dirAttr, children: item.value });
+    }
+    case JSON_TYPES.WIDGET_REF: {
       const widget = widgets[item.widgetId];
       if (!widget) return null;
       return /* @__PURE__ */ jsx(
@@ -5758,15 +5909,18 @@ const LayoutRenderer = ({
           widgetId: item.widgetId,
           value: values[item.widgetId] || "",
           isDropped: droppedInputs.has(item.widgetId),
-          onChange
+          onChange,
+          onInputFocus
         }
       );
     }
-    case "linebreak":
+    case JSON_TYPES.SPACE:
+      return /* @__PURE__ */ jsx("span", { className: "space", children: " " });
+    case JSON_TYPES.LINEBREAK:
       return null;
-    case "operator":
+    case JSON_TYPES.OPERATOR:
       return /* @__PURE__ */ jsx("span", { className: "operator", children: item.operator });
-    case "group":
+    case JSON_TYPES.GROUP:
       return /* @__PURE__ */ jsx("span", { className: "group", children: item.items.map((subItem) => /* @__PURE__ */ jsx(
         LayoutRenderer,
         {
@@ -5774,7 +5928,8 @@ const LayoutRenderer = ({
           widgets,
           values,
           droppedInputs,
-          onChange
+          onChange,
+          onInputFocus
         },
         subItem.id
       )) });
@@ -5791,21 +5946,6 @@ const DEFAULT_RULER_TOOL = {
   width: 300,
   allowRotate: true
 };
-function isArabic(text) {
-  return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
-}
-function itemContainsArabic(item) {
-  if (item.type === "text" && "value" in item) {
-    return isArabic(item.value);
-  }
-  if (item.type === "number-text" && "value" in item) {
-    return isArabic(item.value);
-  }
-  if (item.type === "group" && "items" in item) {
-    return item.items.some((subItem) => itemContainsArabic(subItem));
-  }
-  return false;
-}
 const ExerciseRenderer = forwardRef(({
   json,
   onSubmit,
@@ -5815,6 +5955,7 @@ const ExerciseRenderer = forwardRef(({
 }, ref) => {
   const [values, setValues] = useState({});
   const [droppedInputs, setDroppedInputs] = useState(/* @__PURE__ */ new Set());
+  const [focusedInputId, setFocusedInputId] = useState(null);
   useImperativeHandle(ref, () => ({
     submit: () => {
       const result = validate(json, values);
@@ -5825,6 +5966,7 @@ const ExerciseRenderer = forwardRef(({
     reset: () => {
       setValues({});
       setDroppedInputs(/* @__PURE__ */ new Set());
+      setFocusedInputId(null);
     },
     focusFirstInput: () => {
       const container = document.querySelector(".math-exercise-renderer");
@@ -5855,10 +5997,20 @@ const ExerciseRenderer = forwardRef(({
     const groups = [];
     let currentGroup = [];
     for (const item of json.layout) {
-      if (item.type === "linebreak") {
+      if (item.type === JSON_TYPES.QUESTION_TEXT) {
+        groups.push({
+          items: [item],
+          hasArabic: itemContainsArabic(item),
+          subGroups: []
+          // Question text doesn't need sub-grouping
+        });
+        continue;
+      }
+      if (item.type === JSON_TYPES.LINEBREAK) {
         if (currentGroup.length > 0) {
           const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
-          groups.push({ items: currentGroup, hasArabic });
+          const subGroups = groupLineItems(currentGroup);
+          groups.push({ items: currentGroup, hasArabic, subGroups });
           currentGroup = [];
         }
       } else {
@@ -5867,7 +6019,8 @@ const ExerciseRenderer = forwardRef(({
     }
     if (currentGroup.length > 0) {
       const hasArabic = currentGroup.some((item) => itemContainsArabic(item));
-      groups.push({ items: currentGroup, hasArabic });
+      const subGroups = groupLineItems(currentGroup);
+      groups.push({ items: currentGroup, hasArabic, subGroups });
     }
     return groups;
   }, [json.layout]);
@@ -5888,17 +6041,52 @@ const ExerciseRenderer = forwardRef(({
         "div",
         {
           className: `exercise-line ${group.hasArabic ? "exercise-line-arabic" : ""}`,
-          children: group.items.map((item) => /* @__PURE__ */ jsx(
-            LayoutRenderer,
-            {
-              item,
-              widgets: json.widgets,
-              values,
-              droppedInputs,
-              onChange: handleChange
-            },
-            item.id
-          ))
+          children: group.subGroups.length > 0 ? (
+            // Render sub-groups for regular lines
+            group.subGroups.map((subGroup, subIdx) => subGroup.isTextGroup ? (
+              // Text group - only apply RTL for pure Arabic (no mixed languages)
+              /* @__PURE__ */ jsx("span", { className: "text-group", dir: subGroup.shouldApplyRTL ? "rtl" : void 0, children: subGroup.items.map((item) => /* @__PURE__ */ jsx(
+                LayoutRenderer,
+                {
+                  item,
+                  widgets: json.widgets,
+                  values,
+                  droppedInputs,
+                  onChange: handleChange,
+                  onInputFocus: setFocusedInputId
+                },
+                item.id
+              )) }, subIdx)
+            ) : (
+              // Widget group - no dir wrapper, render directly
+              subGroup.items.map((item) => /* @__PURE__ */ jsx(
+                LayoutRenderer,
+                {
+                  item,
+                  widgets: json.widgets,
+                  values,
+                  droppedInputs,
+                  onChange: handleChange,
+                  onInputFocus: setFocusedInputId
+                },
+                item.id
+              ))
+            ))
+          ) : (
+            // For QUESTION_TEXT items (no sub-groups)
+            group.items.map((item) => /* @__PURE__ */ jsx(
+              LayoutRenderer,
+              {
+                item,
+                widgets: json.widgets,
+                values,
+                droppedInputs,
+                onChange: handleChange,
+                onInputFocus: setFocusedInputId
+              },
+              item.id
+            ))
+          )
         },
         groupIdx
       )) }),
@@ -5907,9 +6095,13 @@ const ExerciseRenderer = forwardRef(({
         {
           widget: numericKeypadWidget,
           widgetId: "_numeric_keypad",
-          value: "",
-          onChange: (v, w, f) => {
-            console.log(v, w, f, values);
+          value: focusedInputId ? values[focusedInputId] || "" : "",
+          onChange: () => {
+          },
+          onKeypadChange: (newValue) => {
+            if (focusedInputId) {
+              handleChange(focusedInputId, newValue, false);
+            }
           }
         }
       ) })
@@ -5980,6 +6172,7 @@ function compileWithAST(dsl) {
   return { ast, json };
 }
 export {
+  AST_TYPES,
   DragOptionsJSONSchema,
   DragOptionsToolSchema,
   EngineError,
@@ -5990,16 +6183,17 @@ export {
   ExpressionValidationSchema,
   FreeTextInlineSchema,
   GroupItemSchema,
+  HighlightedTextInlineSchema,
+  HighlightedTextSchema,
   InlineInputJSONSchema,
   InlineInputWidgetSchema,
   InlineNodeSchema,
+  JSON_TYPES,
   LayoutItemSchema,
   LayoutRenderer,
   LexerError,
   LineBlockSchema,
   LinebreakSchema,
-  NumberTextInlineSchema,
-  NumberTextSchema,
   NumericKeypadJSONSchema,
   NumericKeypadToolSchema,
   OperatorItemSchema,
@@ -6024,9 +6218,8 @@ export {
   createExerciseDocument,
   createExpressionValidation,
   createFreeText,
-  createInlineInput,
+  createHighlightedText,
   createLineBlock,
-  createNumberText,
   createNumericInput,
   createNumericKeypad,
   createSimpleValidation,
@@ -6043,13 +6236,12 @@ export {
   isExpressionValidation,
   isFreeText,
   isGroupItem,
+  isHighlightedText,
   isInlineInput,
   isInlineInputJSON,
   isInlineNode,
   isLineBlock,
   isLinebreak,
-  isNumberText,
-  isNumericInputJSON,
   isNumericKeypad,
   isNumericKeypadJSON,
   isOperatorItem,
@@ -6057,11 +6249,10 @@ export {
   isSimpleValidation,
   isSpace,
   isTextBlock,
-  isTextItem,
+  isTextItem$1 as isTextItem,
   isToolNode,
   isValidExpression,
   isValidationNode,
-  isWidgetPlaceholder,
   isWidgetRef,
   parse,
   parseSafe,