@mathscan/math-exercise-engine 1.0.11 → 1.0.13

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createToken, Lexer, CstParser } from "chevrotain";
 import { z } from "zod";
 import { create, all } from "mathjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext, forwardRef, cloneElement, useImperativeHandle } from "react";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -21,6 +21,8 @@ const AST_TYPES = {
   BOLD_TEXT: "BoldText",
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "InlineInput",
+  /** Inline fraction widget (numerator/denominator with optional inputs) */
+  FRACTION: "Fraction",
   // ═══════════════════════════════════════════════════════════════════════════
   // Blocks
   // ═══════════════════════════════════════════════════════════════════════════
@@ -38,6 +40,10 @@ const AST_TYPES = {
   NUMBER_LINE_BLOCK: "NumberLineBlock",
   /** A position marker on the number line */
   NUMBER_LINE_POSITION: "NumberLinePosition",
+  /** A dynamic subdivision counter embedded in a number line */
+  NUMBER_LINE_COUNTER: "NumberLineCounter",
+  /** A highlighted range on the number line axis */
+  NUMBER_LINE_HIGHLIGHT: "NumberLineHighlight",
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -94,6 +100,10 @@ const JSON_TYPES = {
   NUMBER_LINE: "number-line",
   /** Position marker within a number line */
   NUMBER_LINE_POSITION: "number-line-position",
+  /** Dynamic subdivision counter embedded in a number line */
+  NUMBER_LINE_COUNTER: "number-line-counter",
+  /** Highlighted range within a number line */
+  NUMBER_LINE_HIGHLIGHT: "number-line-highlight",
   // ═══════════════════════════════════════════════════════════════════════════
   // Widget Types
   // ═══════════════════════════════════════════════════════════════════════════
@@ -104,7 +114,9 @@ const JSON_TYPES = {
   /** Radio button options widget */
   RADIO_OPTIONS: "radio-options",
   /** Numeric keypad widget */
-  NUMERIC_KEYPAD: "numeric-keypad"
+  NUMERIC_KEYPAD: "numeric-keypad",
+  /** Inline fraction widget */
+  FRACTION: "fraction"
 };
 const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
 const VALIDATION_MODES = {
@@ -120,8 +132,23 @@ const INPUT_TYPES = {
   NUMERIC: "numeric"
 };
 const NUMBER_LINE_STYLES = ["arrow-right", "arrow-left", "arrow-both", "line"];
+const INTERNAL_PRECISION = 9;
+const DISPLAY_PRECISION = 2;
 const SIDE_PAD = 7;
 const CSS_VAR_SIDE_PAD = "--nl-side-pad";
+const NUMBER_LINE_LABELS = ["all", "extremes", "min-only", "max-only", "none"];
+const NUMBER_LINE_HIGHLIGHT_COLORS = ["blue", "red", "green", "orange", "purple", "yellow"];
+function getFractionKey(widgetId, part) {
+  return `${widgetId}__${part}`;
+}
+function isFractionKey(key2) {
+  return key2.endsWith("__num") || key2.endsWith("__den");
+}
+function parseFractionKey(key2) {
+  const match = key2.match(/^(.+)__(num|den)$/);
+  if (!match) return null;
+  return { widgetId: match[1], part: match[2] };
+}
 const Newline = createToken({
   name: "Newline",
   pattern: /\r?\n/,
@@ -215,6 +242,18 @@ const CELL = createToken({
   name: "CELL",
   pattern: /CELL/
 });
+const COUNTER = createToken({
+  name: "COUNTER",
+  pattern: /COUNTER/
+});
+const HIGHLIGHT = createToken({
+  name: "HIGHLIGHT",
+  pattern: /HIGHLIGHT(?!_TEXT)/
+});
+const FRACTION = createToken({
+  name: "FRACTION",
+  pattern: /FRACTION/
+});
 const NumberLiteral = createToken({
   name: "NumberLiteral",
   pattern: /-?\d+(\.\d+)?/
@@ -322,6 +361,9 @@ const allTokens = [
   TABLE,
   ROW,
   CELL,
+  COUNTER,
+  HIGHLIGHT,
+  FRACTION,
   // Literals
   NumberLiteral,
   StringLiteral,
@@ -429,10 +471,7 @@ class MathExerciseParser extends CstParser {
     });
     this.exerciseDocument = this.RULE("exerciseDocument", () => {
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Newline) },
-          { ALT: () => this.CONSUME(Space) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Newline) }, { ALT: () => this.CONSUME(Space) }]);
       });
       this.OPTION(() => {
         this.SUBRULE(this.question);
@@ -448,10 +487,7 @@ class MathExerciseParser extends CstParser {
         this.SUBRULE(this.validation);
       });
       this.MANY4(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME2(Newline) },
-          { ALT: () => this.CONSUME2(Space) }
-        ]);
+        this.OR2([{ ALT: () => this.CONSUME2(Newline) }, { ALT: () => this.CONSUME2(Space) }]);
       });
     });
     this.question = this.RULE("question", () => {
@@ -460,10 +496,7 @@ class MathExerciseParser extends CstParser {
       this.CONSUME(StringLiteral, { LABEL: "value" });
       this.CONSUME(RBracket);
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Newline) },
-          { ALT: () => this.CONSUME(Space) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Newline) }, { ALT: () => this.CONSUME(Space) }]);
       });
     });
     this.contentBlock = this.RULE("contentBlock", () => {
@@ -485,77 +518,50 @@ class MathExerciseParser extends CstParser {
     });
     this.table = this.RULE("table", () => {
       this.MANY(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME(Space) },
-          { ALT: () => this.CONSUME(Newline) }
-        ]);
+        this.OR2([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
       });
       this.CONSUME(TABLE);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
       this.MANY2(() => {
-        this.OR3([
-          { ALT: () => this.CONSUME2(Space) },
-          { ALT: () => this.CONSUME2(Newline) }
-        ]);
+        this.OR3([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
       this.CONSUME(LBrace);
       this.MANY3(() => {
-        this.OR4([
-          { ALT: () => this.CONSUME3(Space) },
-          { ALT: () => this.CONSUME3(Newline) }
-        ]);
+        this.OR4([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
       });
       this.AT_LEAST_ONE(() => {
         this.SUBRULE(this.row);
       });
       this.CONSUME(RBrace);
       this.MANY4(() => {
-        this.OR5([
-          { ALT: () => this.CONSUME4(Newline) },
-          { ALT: () => this.CONSUME4(Space) }
-        ]);
+        this.OR5([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
       });
     });
     this.row = this.RULE("row", () => {
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Space) },
-          { ALT: () => this.CONSUME(Newline) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
       });
       this.CONSUME(ROW);
       this.MANY2(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME2(Space) },
-          { ALT: () => this.CONSUME2(Newline) }
-        ]);
+        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.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
       });
       this.AT_LEAST_ONE(() => {
         this.SUBRULE(this.cell);
       });
       this.CONSUME(RBrace);
       this.MANY4(() => {
-        this.OR4([
-          { ALT: () => this.CONSUME4(Space) },
-          { ALT: () => this.CONSUME4(Newline) }
-        ]);
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
       });
     });
     this.cell = this.RULE("cell", () => {
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Space) },
-          { ALT: () => this.CONSUME(Newline) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
       });
       this.CONSUME(CELL);
       this.OPTION(() => {
@@ -564,10 +570,7 @@ class MathExerciseParser extends CstParser {
         this.CONSUME(RBracket);
       });
       this.MANY2(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME2(Space) },
-          { ALT: () => this.CONSUME2(Newline) }
-        ]);
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
       this.CONSUME(LBrace);
       this.MANY3(() => {
@@ -578,70 +581,47 @@ class MathExerciseParser extends CstParser {
       });
       this.CONSUME(RBrace);
       this.MANY4(() => {
-        this.OR4([
-          { ALT: () => this.CONSUME4(Space) },
-          { ALT: () => this.CONSUME4(Newline) }
-        ]);
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
       });
     });
     this.numberLine = this.RULE("numberLine", () => {
       this.MANY(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME(Space) },
-          { ALT: () => this.CONSUME(Newline) }
-        ]);
+        this.OR2([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
       });
       this.CONSUME(NUMBER_LINE);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
       this.MANY2(() => {
-        this.OR3([
-          { ALT: () => this.CONSUME2(Space) },
-          { ALT: () => this.CONSUME2(Newline) }
-        ]);
+        this.OR3([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
       this.CONSUME(LBrace);
       this.MANY3(() => {
-        this.OR4([
-          { ALT: () => this.CONSUME3(Space) },
-          { ALT: () => this.CONSUME3(Newline) }
-        ]);
+        this.OR4([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
       });
       this.MANY4(() => {
-        this.SUBRULE(this.position);
+        this.OR6([
+          { ALT: () => this.SUBRULE(this.position) },
+          { ALT: () => this.SUBRULE(this.counter) },
+          { ALT: () => this.SUBRULE(this.highlight) }
+        ]);
       });
       this.CONSUME(RBrace);
       this.MANY5(() => {
-        this.OR5([
-          { ALT: () => this.CONSUME4(Newline) },
-          { ALT: () => this.CONSUME4(Space) }
-        ]);
+        this.OR5([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
       });
     });
     this.position = this.RULE("position", () => {
-      this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Space) },
-          { ALT: () => this.CONSUME(Newline) }
-        ]);
-      });
       this.CONSUME(POSITION);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
       this.MANY2(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME2(Space) },
-          { ALT: () => this.CONSUME2(Newline) }
-        ]);
+        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.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
       });
       this.MANY4(() => {
         this.OR4([
@@ -651,10 +631,25 @@ class MathExerciseParser extends CstParser {
       });
       this.CONSUME(RBrace);
       this.MANY5(() => {
-        this.OR5([
-          { ALT: () => this.CONSUME5(Space) },
-          { ALT: () => this.CONSUME5(Newline) }
-        ]);
+        this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
+      });
+    });
+    this.counter = this.RULE("counter", () => {
+      this.CONSUME(COUNTER);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+    });
+    this.highlight = this.RULE("highlight", () => {
+      this.CONSUME(HIGHLIGHT);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
     });
     this.line = this.RULE("line", () => {
@@ -703,6 +698,8 @@ class MathExerciseParser extends CstParser {
         { ALT: () => this.SUBRULE(this.colorText) },
         // BOLD_TEXT (for bold text)
         { ALT: () => this.SUBRULE(this.boldText) },
+        // FRACTION (inline fraction widget)
+        { ALT: () => this.SUBRULE(this.fraction) },
         // W_S_I (inline input widget)
         { ALT: () => this.SUBRULE(this.inlineInput) }
       ]);
@@ -728,6 +725,12 @@ class MathExerciseParser extends CstParser {
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
     });
+    this.fraction = this.RULE("fraction", () => {
+      this.CONSUME(FRACTION);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+    });
     this.inlineInput = this.RULE("inlineInput", () => {
       this.OR([
         { ALT: () => this.CONSUME(W_S_I, { LABEL: "stringInput" }) },
@@ -751,28 +754,19 @@ class MathExerciseParser extends CstParser {
       this.SUBRULE(this.stringList);
       this.CONSUME(RBracket);
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Newline) },
-          { ALT: () => this.CONSUME(Space) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Newline) }, { ALT: () => this.CONSUME(Space) }]);
       });
     });
     this.radioButtons = this.RULE("radioButtons", () => {
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Newline) },
-          { ALT: () => this.CONSUME(Space) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Newline) }, { ALT: () => this.CONSUME(Space) }]);
       });
       this.CONSUME(RADIO_BUTTONS_OPTIONS);
       this.CONSUME(LBracket);
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
       this.MANY2(() => {
-        this.OR2([
-          { ALT: () => this.CONSUME2(Newline) },
-          { ALT: () => this.CONSUME2(Space) }
-        ]);
+        this.OR2([{ ALT: () => this.CONSUME2(Newline) }, { ALT: () => this.CONSUME2(Space) }]);
       });
     });
     this.numericKeypad = this.RULE("numericKeypad", () => {
@@ -783,10 +777,7 @@ class MathExerciseParser extends CstParser {
       });
       this.CONSUME(RBracket);
       this.MANY(() => {
-        this.OR([
-          { ALT: () => this.CONSUME(Newline) },
-          { ALT: () => this.CONSUME(Space) }
-        ]);
+        this.OR([{ ALT: () => this.CONSUME(Newline) }, { ALT: () => this.CONSUME(Space) }]);
       });
     });
     this.validation = this.RULE("validation", () => {
@@ -922,13 +913,22 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     answer: z.union([z.string(), z.number()]).optional()
   })
 ]);
+const FractionInlineSchema = z.object({
+  type: z.literal(AST_TYPES.FRACTION),
+  name: z.string(),
+  numerator: z.number().optional(),
+  denominator: z.number().optional(),
+  answer: z.string().optional(),
+  simplified: z.boolean().default(true)
+});
 const InlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
   HighlightedTextInlineSchema,
   ColorTextInlineSchema,
   BoldTextInlineSchema,
-  InlineInputWidgetSchema
+  InlineInputWidgetSchema,
+  FractionInlineSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
@@ -981,6 +981,13 @@ function createNumericInput(name, digits, answer) {
     answer
   });
 }
+function createFraction(name, options = {}) {
+  return FractionInlineSchema.parse({
+    type: AST_TYPES.FRACTION,
+    name,
+    ...options
+  });
+}
 function isFreeText(value) {
   return FreeTextInlineSchema.safeParse(value).success;
 }
@@ -990,6 +997,9 @@ function isSpace(value) {
 function isInlineInput(value) {
   return InlineInputWidgetSchema.safeParse(value).success;
 }
+function isFraction(value) {
+  return FractionInlineSchema.safeParse(value).success;
+}
 function isInlineNode(value) {
   return InlineNodeSchema.safeParse(value).success;
 }
@@ -1021,7 +1031,7 @@ function isLineBlock(value) {
 }
 const NumberLinePositionSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_POSITION),
-  value: z.number(),
+  value: z.number().finite({ message: "POSITION: value must be a finite number" }),
   inlines: z.array(InlineNodeSchema).min(1)
 });
 function createNumberLinePosition(value, inlines) {
@@ -1041,10 +1051,50 @@ function createNumberLinePosition(value, inlines) {
     inlines
   });
 }
+const NumberLineCounterSchema = z.object({
+  type: z.literal(AST_TYPES.NUMBER_LINE_COUNTER),
+  min: z.number().int().min(1, { message: "COUNTER: min must be >= 1" }),
+  max: z.number().int().positive({ message: "COUNTER: max must be > 0" }),
+  default: z.number().int().nonnegative().optional(),
+  name: z.string().optional()
+}).refine((d) => d.min <= d.max, {
+  message: "COUNTER: min must be <= max"
+});
+function createNumberLineCounter(max, min, defaultValue2, name) {
+  return NumberLineCounterSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_COUNTER,
+    min: min ?? 1,
+    max,
+    ...defaultValue2 !== void 0 && { default: defaultValue2 },
+    ...name !== void 0 && { name }
+  });
+}
+const NumberLineHighlightSchema = z.object({
+  type: z.literal(AST_TYPES.NUMBER_LINE_HIGHLIGHT),
+  from: z.number().finite({ message: "HIGHLIGHT: from must be a finite number" }),
+  to: z.number().finite({ message: "HIGHLIGHT: to must be a finite number" }),
+  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS, {
+    errorMap: () => ({
+      message: `HIGHLIGHT: color must be one of ${NUMBER_LINE_HIGHLIGHT_COLORS.join(", ")}`
+    })
+  }).optional(),
+  label: z.string().optional()
+}).refine((d) => d.from < d.to, {
+  message: "HIGHLIGHT: from must be less than to"
+});
+function createNumberLineHighlight(from, to, color, label) {
+  return NumberLineHighlightSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_HIGHLIGHT,
+    from,
+    to,
+    ...color !== void 0 && { color },
+    ...label !== void 0 && { label }
+  });
+}
 const NumberLineBlockSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_BLOCK),
-  min: z.number(),
-  max: z.number(),
+  min: z.number().finite({ message: "NUMBER_LINE: min must be a finite number" }),
+  max: z.number().finite({ message: "NUMBER_LINE: max must be a finite number" }),
   step: z.number().positive({ message: "NUMBER_LINE: step must be greater than 0" }).default(1),
   minorTicks: z.number().int().nonnegative({ message: "NUMBER_LINE: minorTicks must be >= 0" }).optional(),
   style: z.enum(NUMBER_LINE_STYLES, {
@@ -1052,6 +1102,13 @@ const NumberLineBlockSchema = z.object({
       message: `NUMBER_LINE: style must be one of ${NUMBER_LINE_STYLES.join(", ")}`
     })
   }).optional(),
+  labelVisibility: z.enum(NUMBER_LINE_LABELS, {
+    errorMap: () => ({
+      message: `NUMBER_LINE: labelVisibility must be one of ${NUMBER_LINE_LABELS.join(", ")}`
+    })
+  }).optional(),
+  counter: NumberLineCounterSchema.optional(),
+  highlights: z.array(NumberLineHighlightSchema).optional(),
   positions: z.array(NumberLinePositionSchema)
 }).refine((data) => data.min < data.max, {
   message: "NUMBER_LINE: min must be less than max"
@@ -1072,8 +1129,24 @@ const NumberLineBlockSchema = z.object({
     }
     seen.add(pos.value);
   }
+  for (const h of data.highlights ?? []) {
+    if (h.from < data.min || h.to > data.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: HIGHLIGHT range [${h.from}, ${h.to}] must be within [${data.min}, ${data.max}]`
+      });
+    }
+  }
+  if (data.counter?.default !== void 0) {
+    if (data.counter.default < data.counter.min || data.counter.default > data.counter.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: COUNTER default (${data.counter.default}) must be within [${data.counter.min}, ${data.counter.max}]`
+      });
+    }
+  }
 });
-function createNumberLineBlock(min, max, positions, step, minorTicks, style) {
+function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights) {
   return NumberLineBlockSchema.parse({
     type: AST_TYPES.NUMBER_LINE_BLOCK,
     min,
@@ -1081,6 +1154,9 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style) {
     step,
     minorTicks,
     style,
+    labelVisibility,
+    counter,
+    highlights,
     positions
   });
 }
@@ -1291,8 +1367,15 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const step = params.step !== void 0 ? Number(params.step) : void 0;
     const minorTicks = params.minorTicks !== void 0 ? Number(params.minorTicks) : void 0;
     const style = params.style;
+    const labelVisibility = params.labelVisibility;
     const positions = ctx.position ? ctx.position.map((p) => this.visit(p)) : [];
-    return createNumberLineBlock(min, max, positions, step, minorTicks, style);
+    const rawCounters = ctx.counter;
+    if (rawCounters && rawCounters.length > 1) {
+      throw new Error("NUMBER_LINE: only one COUNTER block is allowed");
+    }
+    const counter = rawCounters ? this.visit(rawCounters) : void 0;
+    const highlights = ctx.highlight ? ctx.highlight.map((h) => this.visit(h)) : [];
+    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights);
   }
   position(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -1303,6 +1386,28 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const inlines = ctx.inlineElement ? ctx.inlineElement.map((elem) => this.visit(elem)) : [];
     return createNumberLinePosition(value, inlines);
   }
+  counter(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.max === void 0) {
+      throw new Error("COUNTER requires parameter: max");
+    }
+    const max = Number(params.max);
+    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);
+  }
+  highlight(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.from === void 0 || params.to === void 0) {
+      throw new Error("HIGHLIGHT requires parameters: from and to");
+    }
+    const from = Number(params.from);
+    const to = Number(params.to);
+    const color = params.color;
+    const label = params.label;
+    return createNumberLineHighlight(from, to, color, label);
+  }
   // ═══════════════════════════════════════════════════════════════════════════
   // Line Block
   // ═══════════════════════════════════════════════════════════════════════════
@@ -1387,6 +1492,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.boldText) {
       return this.visit(ctx.boldText);
     }
+    if (ctx.fraction) {
+      return this.visit(ctx.fraction);
+    }
     if (ctx.inlineInput) {
       return this.visit(ctx.inlineInput);
     }
@@ -1420,6 +1528,15 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     return createBoldText(value, highlight);
   }
+  fraction(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const name = params.name;
+    const numerator = params.numerator;
+    const denominator = params.denominator;
+    const answer = params.answer;
+    const simplified = params.simplified !== void 0 ? params.simplified : void 0;
+    return createFraction(name, { numerator, denominator, answer, simplified });
+  }
   inlineInput(ctx) {
     const params = this.visit(ctx.parameterList);
     const name = params.name;
@@ -1633,17 +1750,36 @@ const TableItemSchema = z.object({
 const NumberLinePositionItemSchema = z.object({
   id: z.string(),
   type: z.literal(JSON_TYPES.NUMBER_LINE_POSITION),
-  value: z.number(),
-  content: z.array(z.lazy(() => LayoutItemSchema))
+  value: z.number().finite(),
+  content: z.array(LayoutItemSchema)
+});
+const NumberLineCounterItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.NUMBER_LINE_COUNTER),
+  min: z.number().int().min(1),
+  max: z.number().int().positive(),
+  default: z.number().int().nonnegative().optional(),
+  name: z.string().optional()
+});
+const NumberLineHighlightItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.NUMBER_LINE_HIGHLIGHT),
+  from: z.number().finite(),
+  to: z.number().finite(),
+  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS).optional(),
+  label: z.string().optional()
 });
 const NumberLineItemSchema = z.object({
   id: z.string(),
   type: z.literal(JSON_TYPES.NUMBER_LINE),
-  min: z.number(),
-  max: z.number(),
+  min: z.number().finite(),
+  max: z.number().finite(),
   step: z.number().positive(),
   minorTicks: z.number().int().nonnegative().optional(),
   style: z.enum(NUMBER_LINE_STYLES).optional(),
+  labelVisibility: z.enum(NUMBER_LINE_LABELS).optional(),
+  counter: NumberLineCounterItemSchema.optional(),
+  highlights: z.array(NumberLineHighlightItemSchema).optional(),
   positions: z.array(NumberLinePositionItemSchema)
 });
 const StringInputJSONSchema = z.object({
@@ -1673,11 +1809,18 @@ const NumericKeypadJSONSchema = z.object({
   includeOperators: z.boolean().optional(),
   includeDecimal: z.boolean().optional()
 });
+const FractionJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.FRACTION),
+  numerator: z.number().nullable(),
+  denominator: z.number().nullable(),
+  simplified: z.boolean()
+});
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
   DragOptionsJSONSchema,
   RadioOptionsJSONSchema,
-  NumericKeypadJSONSchema
+  NumericKeypadJSONSchema,
+  FractionJSONSchema
 ]);
 const ValidationJSONSchema = z.object({
   mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION]),
@@ -1717,7 +1860,7 @@ function isQuestionText(item) {
 function isTextItem$1(item) {
   return item.type === JSON_TYPES.TEXT;
 }
-function isWidgetRef$1(item) {
+function isWidgetRef(item) {
   return item.type === JSON_TYPES.WIDGET_REF;
 }
 function isHighlightedText(item) {
@@ -1762,6 +1905,9 @@ function isRadioOptionsJSON(widget) {
 function isNumericKeypadJSON(widget) {
   return widget.type === JSON_TYPES.NUMERIC_KEYPAD;
 }
+function isFractionJSON(widget) {
+  return widget.type === JSON_TYPES.FRACTION;
+}
 class LayoutIdGenerator {
   constructor() {
     this.counter = 0;
@@ -1826,6 +1972,17 @@ function toJSON(ast) {
         answers[inline.name] = inline.answer;
       }
     }
+    if (inline.type === AST_TYPES.FRACTION) {
+      widgets[inline.name] = {
+        type: JSON_TYPES.FRACTION,
+        numerator: inline.numerator ?? null,
+        denominator: inline.denominator ?? null,
+        simplified: inline.simplified ?? true
+      };
+      if (inline.answer !== void 0) {
+        answers[inline.name] = inline.answer;
+      }
+    }
   }
   for (const block of ast.lines) {
     if (block.type === AST_TYPES.RADIO_OPTIONS) {
@@ -1890,16 +2047,42 @@ function transformNumberLine(numberLine, idGenerator) {
       content
     };
   });
+  let counterItem;
+  if (numberLine.counter !== void 0) {
+    const c = numberLine.counter;
+    counterItem = {
+      id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_COUNTER),
+      type: JSON_TYPES.NUMBER_LINE_COUNTER,
+      min: c.min,
+      max: c.max,
+      ...c.default !== void 0 && { default: c.default },
+      ...c.name !== void 0 && { name: c.name }
+    };
+  }
+  let highlights;
+  if (numberLine.highlights !== void 0 && numberLine.highlights.length > 0) {
+    highlights = numberLine.highlights.map((h) => ({
+      id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_HIGHLIGHT),
+      type: JSON_TYPES.NUMBER_LINE_HIGHLIGHT,
+      from: h.from,
+      to: h.to,
+      ...h.color !== void 0 && { color: h.color },
+      ...h.label !== void 0 && { label: h.label }
+    }));
+  }
   const item = {
     id: idGenerator.generate(JSON_TYPES.NUMBER_LINE),
     type: JSON_TYPES.NUMBER_LINE,
     min: numberLine.min,
     max: numberLine.max,
     step: numberLine.step,
+    ...numberLine.minorTicks !== void 0 && { minorTicks: numberLine.minorTicks },
+    ...numberLine.style !== void 0 && { style: numberLine.style },
+    ...numberLine.labelVisibility !== void 0 && { labelVisibility: numberLine.labelVisibility },
+    ...counterItem !== void 0 && { counter: counterItem },
+    ...highlights !== void 0 && { highlights },
     positions
   };
-  if (numberLine.minorTicks !== void 0) item.minorTicks = numberLine.minorTicks;
-  if (numberLine.style !== void 0) item.style = numberLine.style;
   return item;
 }
 function transformTable(table, idGenerator) {
@@ -1990,6 +2173,12 @@ function transformInline(inline, idGenerator) {
         type: JSON_TYPES.WIDGET_REF,
         widgetId: inline.name
       };
+    case AST_TYPES.FRACTION:
+      return {
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId: inline.name
+      };
     default:
       throw new Error(`Unknown inline type: ${inline.type}`);
   }
@@ -2022,6 +2211,50 @@ function extractVariables$1(expression, validVariables) {
   }
   return uniqueVars;
 }
+function normalize(value) {
+  if (typeof value === "number") {
+    return String(Math.round(value * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
+  }
+  const trimmed = String(value).trim().toLowerCase().replace(/^["']|["']$/g, "");
+  const asNum = Number(trimmed);
+  if (trimmed !== "" && !isNaN(asNum)) {
+    return String(Math.round(asNum * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
+  }
+  return trimmed;
+}
+const NL_DRAG_PREFIX = "\0nl-drag\0";
+const isNLDragEncoded = (v) => v.startsWith(NL_DRAG_PREFIX);
+const encodeNLDragValue = (label, position) => `${NL_DRAG_PREFIX}${label}@${String(position)}`;
+function isNLDragCorrect(encoded, expectedLabel, expectedPosition) {
+  const payload = encoded.slice(NL_DRAG_PREFIX.length);
+  const atIdx = payload.lastIndexOf("@");
+  const label = normalize(payload.slice(0, atIdx));
+  const position = normalize(payload.slice(atIdx + 1));
+  return label === normalize(expectedLabel) && position === normalize(expectedPosition);
+}
+const math$1 = create(all);
+function collectNumberLines(items) {
+  const result = [];
+  for (const item of items) {
+    if (item.type === JSON_TYPES.NUMBER_LINE) result.push(item);
+    else if (item.type === JSON_TYPES.GROUP) result.push(...collectNumberLines(item.items));
+  }
+  return result;
+}
+function buildPositionMap(exercise) {
+  const map = {};
+  for (const nl of collectNumberLines(exercise.layout)) {
+    for (const pos of nl.positions) {
+      for (const c of pos.content) {
+        if (isWidgetRef(c)) {
+          map[c.widgetId] = pos.value;
+          break;
+        }
+      }
+    }
+  }
+  return map;
+}
 function validateSimple(exercise, userInputs) {
   const details = {};
   let allCorrect = true;
@@ -2035,10 +2268,13 @@ function validateSimple(exercise, userInputs) {
       score: 0
     };
   }
+  const positionMap = buildPositionMap(exercise);
   for (const [widgetId, expected] of Object.entries(answers)) {
     totalCount++;
     const userValue = userInputs[widgetId];
-    const isCorrect = areValuesEqual(userValue, expected);
+    const widget = exercise.widgets[widgetId];
+    const isFractionLenient = widget?.type === JSON_TYPES.FRACTION && widget.simplified === false;
+    const isCorrect = isFractionLenient ? areFractionsEquivalent(userValue, expected) : areValuesEqual(userValue, expected, positionMap[widgetId]);
     details[widgetId] = {
       widgetId,
       userValue,
@@ -2066,19 +2302,23 @@ function validateSimple(exercise, userInputs) {
     score: totalCount > 0 ? correctCount / totalCount : 0
   };
 }
-function areValuesEqual(userValue, expected) {
-  if (userValue === void 0 || userValue === null) {
-    return false;
+function areValuesEqual(userValue, expected, expectedPosition) {
+  if (userValue === void 0 || userValue === null) return false;
+  if (typeof userValue === "string" && isNLDragEncoded(userValue)) {
+    if (expectedPosition === void 0) return false;
+    return isNLDragCorrect(userValue, expected, expectedPosition);
   }
-  const normalizedUser = normalize(userValue);
-  const normalizedExpected = normalize(expected);
-  return normalizedUser === normalizedExpected;
+  return normalize(userValue) === normalize(expected);
 }
-function normalize(value) {
-  if (typeof value === "number") {
-    return String(Math.round(value * 1e10) / 1e10);
+function areFractionsEquivalent(user, expected) {
+  if (user === void 0 || user === null) return false;
+  try {
+    const userFrac = math$1.fraction(String(user));
+    const expectedFrac = math$1.fraction(String(expected));
+    return math$1.equal(userFrac, expectedFrac);
+  } catch {
+    return areValuesEqual(user, expected);
   }
-  return String(value).trim().toLowerCase().replace(/^["']|["']$/g, "");
 }
 const math = create(all);
 const BLOCKED_FUNCTIONS = [
@@ -2233,7 +2473,7 @@ function validateExpression(exercise, userInputs) {
       hasInvalidInput = true;
       continue;
     }
-    const numValue = typeof rawValue === "number" ? rawValue : parseFloat(String(rawValue).trim());
+    const numValue = typeof rawValue === "number" ? rawValue : parseFractionOrNumber(String(rawValue).trim());
     if (!Number.isFinite(numValue)) {
       details[varName] = {
         widgetId: varName,
@@ -2328,6 +2568,39 @@ function findValidCombination(expression, ranges) {
   }
   return null;
 }
+function parseFractionOrNumber(s) {
+  const parts = s.split("/");
+  if (parts.length === 2) {
+    const num = parseFloat(parts[0]);
+    const den = parseFloat(parts[1]);
+    if (Number.isFinite(num) && Number.isFinite(den) && den !== 0) {
+      return num / den;
+    }
+    return NaN;
+  }
+  return parseFloat(s);
+}
+function preprocessFractionValues(exercise, userInputs) {
+  const result = { ...userInputs };
+  for (const [widgetId, widget] of Object.entries(exercise.widgets)) {
+    if (widget.type !== JSON_TYPES.FRACTION) continue;
+    const numKey = getFractionKey(widgetId, "num");
+    const denKey = getFractionKey(widgetId, "den");
+    const numEffective = widget.numerator !== null ? String(widget.numerator) : result[numKey] !== void 0 ? String(result[numKey]) : "";
+    const denEffective = widget.denominator !== null ? String(widget.denominator) : result[denKey] !== void 0 ? String(result[denKey]) : "";
+    if (numEffective !== "" && denEffective !== "") {
+      result[widgetId] = `${numEffective}/${denEffective}`;
+    }
+    delete result[numKey];
+    delete result[denKey];
+  }
+  for (const key2 of Object.keys(result)) {
+    if (isFractionKey(key2)) {
+      delete result[key2];
+    }
+  }
+  return result;
+}
 function validate(exercise, userInputs) {
   if (!exercise.validation) {
     return {
@@ -2335,12 +2608,13 @@ function validate(exercise, userInputs) {
       details: {}
     };
   }
+  const processedInputs = preprocessFractionValues(exercise, userInputs);
   const validatedExercise = exercise;
   switch (validatedExercise.validation.mode) {
     case VALIDATION_MODES.SIMPLE:
-      return validateSimple(validatedExercise, userInputs);
+      return validateSimple(validatedExercise, processedInputs);
     case VALIDATION_MODES.EXPRESSION:
-      return validateExpression(validatedExercise, userInputs);
+      return validateExpression(validatedExercise, processedInputs);
     default:
       return {
         isCorrect: false,
@@ -6410,6 +6684,7 @@ const InlineInput = ({
   widgetId,
   value,
   isDropped = false,
+  validationStatus = null,
   inputType,
   length,
   digits,
@@ -6427,6 +6702,7 @@ const InlineInput = ({
   }, [handleChange]);
   const expectedLength = inputType === "numeric" ? digits : length;
   const dynamicWidth = `${(expectedLength || 5) * 0.8 + 1}em`;
+  const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
   return /* @__PURE__ */ jsx(
     Droppable,
     {
@@ -6439,7 +6715,7 @@ const InlineInput = ({
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: "inline-input-chip",
+            className: `inline-input-chip${statusClass}`,
             onClick: () => handleChange("", false),
             title: "Click to remove",
             children: value
@@ -6452,7 +6728,7 @@ const InlineInput = ({
           {
             id: widgetId + "-input",
             type: "text",
-            className: "inline-input",
+            className: `inline-input${statusClass}`,
             value,
             onChange: (e) => handleChange(e.target.value, false),
             onFocus: () => onFocus?.(widgetId),
@@ -6529,18 +6805,83 @@ const NumericKeypad = ({
     includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
   ] });
 };
+const FractionInput = ({
+  widgetId,
+  numerator,
+  denominator,
+  values,
+  droppedInputs,
+  validationStatus = null,
+  onChange,
+  onFocus
+}) => {
+  const numKey = getFractionKey(widgetId, "num");
+  const denKey = getFractionKey(widgetId, "den");
+  const numValue = values[numKey] ?? "";
+  const denValue = values[denKey] ?? "";
+  const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
+  const handleDrop = useCallback((subKey) => (item) => {
+    if (item.type === "drag-option") {
+      const data = item.data;
+      onChange(subKey, data.value, true, String(item.id));
+    }
+  }, [onChange]);
+  const renderSlot = (subKey, fixedValue, currentValue, label) => {
+    if (fixedValue !== null) {
+      return /* @__PURE__ */ jsx("span", { className: "fraction-fixed", children: fixedValue });
+    }
+    const isDroppedHere = droppedInputs.has(subKey);
+    return /* @__PURE__ */ jsx(
+      Droppable,
+      {
+        id: subKey,
+        accepts: ["drag-option"],
+        onDrop: handleDrop(subKey),
+        className: "fraction-slot-droppable",
+        children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `inline-input-chip fraction-chip${statusClass}`,
+            onClick: () => onChange(subKey, "", false),
+            title: "Click to remove",
+            children: currentValue
+          }
+        ) : /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${subKey}-input`,
+            type: "text",
+            className: `inline-input fraction-input${statusClass}`,
+            value: currentValue,
+            onChange: (e) => onChange(subKey, e.target.value, false),
+            onFocus: () => onFocus?.(subKey),
+            maxLength: 4,
+            "aria-label": label
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator") }),
+    /* @__PURE__ */ jsx("span", { className: "fraction-bar", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator") })
+  ] });
+};
 const RadioOptions = ({
   name,
   options,
   value,
+  validationStatus = null,
   onChange
 }) => {
   return /* @__PURE__ */ jsx("div", { className: "radio-options", children: options.map((option, idx) => {
     const isSelected = value === option;
+    const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
     return /* @__PURE__ */ jsx(
       "button",
       {
-        className: `radio-option${isSelected ? " selected" : ""}`,
+        className: `radio-option${isSelected ? " selected" : ""}${statusClass}`,
         onClick: () => onChange(name, option),
         type: "button",
         children: option
@@ -6561,11 +6902,17 @@ function isRadioOptionsWidget(widget) {
 function isNumericKeypadWidget(widget) {
   return widget.type === "numeric-keypad";
 }
+function isFractionWidget(widget) {
+  return widget.type === "fraction";
+}
 const WidgetRenderer = ({
   widget,
   widgetId,
   value,
+  values = {},
   isDropped = false,
+  validationStatus = null,
+  droppedInputs = /* @__PURE__ */ new Set(),
   onChange,
   onInputFocus,
   onKeypadChange
@@ -6577,6 +6924,7 @@ const WidgetRenderer = ({
         widgetId,
         value,
         isDropped,
+        validationStatus,
         inputType: widget.inputType,
         length: widget.inputType === "string" ? widget.length : void 0,
         digits: widget.inputType === "numeric" ? widget.digits : void 0,
@@ -6602,6 +6950,7 @@ const WidgetRenderer = ({
         name: widgetId,
         options: widget.options,
         value,
+        validationStatus,
         onChange
       }
     );
@@ -6618,9 +6967,27 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isFractionWidget(widget)) {
+    return /* @__PURE__ */ jsx(
+      FractionInput,
+      {
+        widgetId,
+        numerator: widget.numerator,
+        denominator: widget.denominator,
+        values,
+        droppedInputs,
+        validationStatus,
+        onChange,
+        onFocus: onInputFocus
+      }
+    );
+  }
   return null;
 };
-const cleanFloat = (n) => parseFloat(n.toFixed(10));
+const EPSILON = 10 ** -INTERNAL_PRECISION;
+const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
+const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
+const almostEqual = (a, b) => Math.abs(a - b) <= EPSILON;
 const toPercent = (value, min, max) => {
   const raw = SIDE_PAD + (value - min) / (max - min) * (100 - 2 * SIDE_PAD);
   return Math.max(SIDE_PAD, Math.min(100 - SIDE_PAD, raw));
@@ -6636,19 +7003,24 @@ const getMajorTicks = (min, max, step) => {
   const count = Math.floor((max - min) / step);
   const ticks = Array.from({ length: count + 1 }, (_, i) => cleanFloat(min + i * step));
   const lastTick = ticks[ticks.length - 1];
-  if (Math.abs(lastTick - max) > 1e-9) ticks.push(max);
+  if (!almostEqual(lastTick, max)) {
+    ticks.push(max);
+  } else {
+    ticks[ticks.length - 1] = max;
+  }
   return ticks;
 };
 const getMinorTickValues = (majorTicks, minorTicks) => {
-  if (minorTicks <= 0) return [];
+  if (minorTicks <= 0 || majorTicks.length < 2) return [];
   const result = [];
-  majorTicks.slice(0, -1).forEach((tick, idx) => {
-    const next = majorTicks[idx + 1];
-    const interval = next - tick;
+  for (let i = 0; i < majorTicks.length - 1; i++) {
+    const from = majorTicks[i];
+    const to = majorTicks[i + 1];
+    const interval = to - from;
     for (let j = 1; j <= minorTicks; j++) {
-      result.push(cleanFloat(tick + j / (minorTicks + 1) * interval));
+      result.push(cleanFloat(from + j / (minorTicks + 1) * interval));
     }
-  });
+  }
   return result;
 };
 const getSnapTicks = (majorTicks, minorTicks) => [
@@ -6657,19 +7029,41 @@ const getSnapTicks = (majorTicks, minorTicks) => [
 ];
 const snapToNearest = (raw, ticks) => {
   if (ticks.length === 0) return cleanFloat(raw);
-  const snapped = ticks.reduce(
-    (best, t) => Math.abs(t - raw) < Math.abs(best - raw) ? t : best
-  );
-  return cleanFloat(snapped);
+  return ticks.reduce((best, t) => Math.abs(t - raw) < Math.abs(best - raw) ? t : best);
 };
-const isWidgetRef = (item) => item.type === JSON_TYPES.WIDGET_REF;
 const getPositionWidgetId = (content) => {
   for (const item of content) {
     if (isWidgetRef(item)) return item.widgetId;
   }
   return null;
 };
-const PlacedChip = ({ widgetId, label, leftPercent, onRemove }) => {
+const toHighlightColor = (color) => `var(--nl-highlight-${color})`;
+const getBandGeometry = (h, min, max) => {
+  const leftPct = toPercent(Math.min(h.from, h.to), min, max);
+  const rightPct = toPercent(Math.max(h.from, h.to), min, max);
+  return { leftPct, widthPct: rightPct - leftPct };
+};
+const HighlightBands = ({ highlights, min, max }) => {
+  if (!highlights?.length) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: highlights.map((h) => {
+    const { leftPct, widthPct } = getBandGeometry(h, min, max);
+    if (widthPct <= 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "number-line-highlight-band",
+        "aria-hidden": "true",
+        style: {
+          left: `${leftPct}%`,
+          width: `${widthPct}%`,
+          ...h.color && { "--nl-highlight-color": toHighlightColor(h.color) }
+        }
+      },
+      h.id
+    );
+  }) });
+};
+const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: widgetId,
     data: { type: "placed-chip", widgetId, label }
@@ -6677,23 +7071,49 @@ const PlacedChip = ({ widgetId, label, leftPercent, onRemove }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "number-line-placed-chip",
-      style: { left: `${leftPercent}%`, opacity: isDragging ? 0.3 : 1 },
-      children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          ref: setNodeRef,
-          className: "number-line-placed-chip-btn",
-          title: "Drag to move · Click to remove",
-          onClick: onRemove,
-          ...listeners,
-          ...attributes,
-          children: label
-        }
-      )
+      className: `number-line-placed-chip${isLanding ? " nl-chip-landing" : ""}${isDragging ? " nl-chip-dragging" : ""}`,
+      style: { left: `${leftPercent}%` },
+      children: /* @__PURE__ */ jsxs("div", { className: "number-line-placed-chip-inner", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: setNodeRef,
+            className: "number-line-placed-chip-btn",
+            "aria-label": `${label}, drag to move`,
+            ...listeners,
+            ...attributes,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "number-line-placed-chip-remove",
+            "aria-label": "Remove",
+            onClick: onRemove,
+            children: "✕"
+          }
+        )
+      ] })
     }
   );
 };
+function findNearestFreeWidgetSlot(positions, axisValue, values, placedChips, excludeWid) {
+  let best;
+  let bestDist = Infinity;
+  for (const pos of positions) {
+    const wid = getPositionWidgetId(pos.content);
+    if (!wid) continue;
+    if (wid !== excludeWid && (values[wid] || placedChips.has(wid))) continue;
+    const dist = Math.abs(pos.value - axisValue);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = pos;
+    }
+  }
+  return best;
+}
 const FreeDragAxis = ({
   axisDropId,
   min,
@@ -6704,17 +7124,51 @@ const FreeDragAxis = ({
   showArrowRight,
   positions,
   values,
-  onChange
+  onChange,
+  highlights,
+  snapKey
 }) => {
   const axisRef = useRef(null);
   const snapTicks = useMemo(
     () => getSnapTicks(majorTicks, minorTicks),
     [majorTicks, minorTicks]
   );
-  const [dropLabels, setDropLabels] = useState(/* @__PURE__ */ new Map());
-  const [dropSources, setDropSources] = useState(/* @__PURE__ */ new Map());
+  const minorValues = useMemo(
+    () => getMinorTickValues(majorTicks, minorTicks),
+    [majorTicks, minorTicks]
+  );
+  const [placedChips, setPlacedChips] = useState(/* @__PURE__ */ new Map());
+  const [hoverSnap, setHoverSnap] = useState(null);
+  const [landingChips, setLandingChips] = useState(/* @__PURE__ */ new Set());
+  const landingTimersRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => () => landingTimersRef.current.forEach(clearTimeout), []);
+  const onChangeRef = useRef(onChange);
+  const placedChipsRef = useRef(placedChips);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    placedChipsRef.current = placedChips;
+  }, [placedChips]);
+  const isFirstRender = useRef(true);
   useEffect(() => {
-    setDropLabels((prev) => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    for (const [widgetId, chip] of placedChipsRef.current) {
+      onChangeRef.current(widgetId, "", false, chip.sourceId);
+    }
+    landingTimersRef.current.forEach(clearTimeout);
+    landingTimersRef.current.clear();
+    const empty = /* @__PURE__ */ new Map();
+    placedChipsRef.current = empty;
+    setPlacedChips(empty);
+    setHoverSnap(null);
+    setLandingChips(/* @__PURE__ */ new Set());
+  }, [snapKey]);
+  useEffect(() => {
+    setPlacedChips((prev) => {
       let changed = false;
       const next = new Map(prev);
       for (const [wid] of next) {
@@ -6723,21 +7177,13 @@ const FreeDragAxis = ({
           changed = true;
         }
       }
-      return changed ? next : prev;
-    });
-    setDropSources((prev) => {
-      let changed = false;
-      const next = new Map(prev);
-      for (const [wid] of next) {
-        if (!values[wid]) {
-          next.delete(wid);
-          changed = true;
-        }
+      if (changed) {
+        placedChipsRef.current = next;
       }
       return changed ? next : prev;
     });
   }, [values]);
-  const { setNodeRef, isOver } = useDroppable({ id: axisDropId });
+  const { setNodeRef } = useDroppable({ id: axisDropId });
   const mergedRef = useCallback((node) => {
     axisRef.current = node;
     setNodeRef(node);
@@ -6745,91 +7191,163 @@ const FreeDragAxis = ({
   const snapFromEvent = useCallback((translated) => {
     if (!axisRef.current) return null;
     const axisRect = axisRef.current.getBoundingClientRect();
+    if (axisRect.width === 0) return null;
     const chipCenterX = translated.left + translated.width / 2;
     const raw = pixelToValue(chipCenterX, axisRect.left, axisRect.width, min, max);
     return snapToNearest(raw, snapTicks);
   }, [min, max, snapTicks]);
+  const isTickOccupied = useCallback(
+    (tick, excludeWid) => [...placedChipsRef.current.entries()].some(
+      ([wid, c]) => wid !== excludeWid && almostEqual(c.position, tick)
+    ),
+    []
+    // reads placedChipsRef (a ref — stable, no dep needed)
+  );
+  const findNearestFreeWidgetSlotCb = useCallback(
+    (axisValue, excludeWid) => findNearestFreeWidgetSlot(positions, axisValue, values, placedChipsRef.current, excludeWid),
+    [positions, values]
+  );
+  const triggerLanding = useCallback((widgetId) => {
+    setLandingChips((prev) => new Set(prev).add(widgetId));
+    clearTimeout(landingTimersRef.current.get(widgetId));
+    landingTimersRef.current.set(widgetId, setTimeout(() => {
+      setLandingChips((prev) => {
+        const s = new Set(prev);
+        s.delete(widgetId);
+        return s;
+      });
+      landingTimersRef.current.delete(widgetId);
+    }, 300));
+  }, []);
   useDndMonitor({
+    onDragMove(event) {
+      if (!event.over || event.over.id !== axisDropId) {
+        setHoverSnap(null);
+        return;
+      }
+      const translated = event.active.rect.current.translated;
+      if (!translated) return;
+      setHoverSnap(snapFromEvent(translated));
+    },
+    onDragCancel() {
+      setHoverSnap(null);
+    },
     onDragEnd(event) {
+      setHoverSnap(null);
       if (!event.over || event.over.id !== axisDropId) return;
       if (!axisRef.current) return;
       const translated = event.active.rect.current.translated;
       if (!translated) return;
-      const placed = snapFromEvent(translated);
-      if (placed === null) return;
+      const rawPlaced = snapFromEvent(translated);
+      if (rawPlaced === null) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn("[FreeDragAxis] snap calculation failed — axis may not be laid out yet");
+        }
+        return;
+      }
+      const placed = cleanFloat(rawPlaced);
       const data = event.active.data.current;
-      if (data?.type === "placed-chip") {
-        const widgetId = data.widgetId;
+      if (!data) return;
+      if (data.type === "placed-chip") {
+        const oldWidgetId = data.widgetId;
         const label = data.label;
-        const originalSourceId = dropSources.get(widgetId) ?? widgetId;
-        onChange(widgetId, String(placed), true, originalSourceId);
-        setDropLabels((prev) => new Map(prev).set(widgetId, label));
+        const sourceId2 = placedChipsRef.current.get(oldWidgetId)?.sourceId ?? oldWidgetId;
+        if (isTickOccupied(placed, oldWidgetId)) return;
+        const targetPos2 = findNearestFreeWidgetSlotCb(placed, oldWidgetId);
+        if (!targetPos2) return;
+        const newWidgetId = getPositionWidgetId(targetPos2.content);
+        if (!newWidgetId) return;
+        if (newWidgetId !== oldWidgetId) {
+          onChangeRef.current(oldWidgetId, "", false, sourceId2);
+        }
+        onChangeRef.current(newWidgetId, encodeNLDragValue(label, placed), true, sourceId2);
+        setPlacedChips((prev) => {
+          const next = new Map(prev);
+          if (newWidgetId !== oldWidgetId) next.delete(oldWidgetId);
+          next.set(newWidgetId, { label, position: placed, sourceId: sourceId2 });
+          placedChipsRef.current = next;
+          return next;
+        });
+        triggerLanding(newWidgetId);
         return;
       }
-      const draggedItem = event.active.data.current;
-      if (draggedItem?.type !== "drag-option") return;
-      const targetPos = positions.find((pos) => {
-        const wid = getPositionWidgetId(pos.content);
-        return wid && !values[wid];
-      });
+      if (data.type !== "drag-option") return;
+      if (isTickOccupied(placed)) return;
+      const targetPos = findNearestFreeWidgetSlotCb(placed);
       if (!targetPos) return;
       const targetWidgetId = getPositionWidgetId(targetPos.content);
       if (!targetWidgetId) return;
-      const chipLabel = draggedItem.data.value;
-      const sourceOptId = String(event.active.id);
-      onChange(targetWidgetId, String(placed), true, sourceOptId);
-      setDropLabels((prev) => new Map(prev).set(targetWidgetId, chipLabel));
-      setDropSources((prev) => new Map(prev).set(targetWidgetId, sourceOptId));
+      const chipLabel = data.data.value;
+      const sourceId = String(event.active.id);
+      onChangeRef.current(targetWidgetId, encodeNLDragValue(chipLabel, placed), true, sourceId);
+      setPlacedChips((prev) => {
+        const next = new Map(prev).set(targetWidgetId, { label: chipLabel, position: placed, sourceId });
+        placedChipsRef.current = next;
+        return next;
+      });
+      triggerLanding(targetWidgetId);
     }
   });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: mergedRef,
-      className: `number-line-axis-row nl-axis-drag-mode${isOver ? " nl-axis-drag-over" : ""}`,
+      className: "number-line-axis-row nl-axis-drag-mode",
       children: [
         /* @__PURE__ */ jsx("div", { className: "number-line-track" }),
-        showArrowLeft && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-left" }),
-        showArrowRight && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-right" }),
-        getMinorTickValues(majorTicks, minorTicks).map((v) => /* @__PURE__ */ jsx(
+        showArrowLeft && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
+        showArrowRight && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(HighlightBands, { highlights, min, max }),
+        minorValues.map((v) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: "number-line-minor-tick",
+            className: `number-line-minor-tick${hoverSnap === v ? " nl-tick-hover" : ""}`,
             style: { left: `${toPercent(v, min, max)}%` }
           },
-          `minor-${v}`
+          `minor-${cleanFloat(v)}`
         )),
         majorTicks.map((tick) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: "number-line-major-tick",
+            className: `number-line-major-tick${hoverSnap === tick ? " nl-tick-hover" : ""}`,
             style: { left: `${toPercent(tick, min, max)}%` }
           },
-          `major-${tick}`
+          `major-${cleanFloat(tick)}`
+        )),
+        hoverSnap !== null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "nl-snap-preview",
+            style: { left: `${toPercent(hoverSnap, min, max)}%` },
+            "aria-hidden": "true"
+          }
+        ),
+        positions.filter((pos) => getPositionWidgetId(pos.content) === null).map((pos) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "number-line-position-dot",
+            style: { left: `${toPercent(pos.value, min, max)}%` }
+          },
+          `dot-${pos.id}`
         )),
         positions.map((pos) => {
           const wid = getPositionWidgetId(pos.content);
-          const dropPos = wid ? parseFloat(values[wid] ?? "") : NaN;
-          const label = wid ? dropLabels.get(wid) : void 0;
-          if (!wid || isNaN(dropPos) || !label) return null;
+          const chip = wid ? placedChips.get(wid) : void 0;
+          if (!wid || !chip) return null;
           return /* @__PURE__ */ jsx(
             PlacedChip,
             {
               widgetId: wid,
-              label,
-              leftPercent: toPercent(dropPos, min, max),
+              label: chip.label,
+              leftPercent: toPercent(chip.position, min, max),
+              isLanding: landingChips.has(wid),
               onRemove: () => {
-                const sourceId = dropSources.get(wid);
-                onChange(wid, "", false, sourceId);
-                setDropLabels((prev) => {
-                  const m = new Map(prev);
-                  m.delete(wid);
-                  return m;
-                });
-                setDropSources((prev) => {
-                  const m = new Map(prev);
-                  m.delete(wid);
-                  return m;
+                onChangeRef.current(wid, "", false, chip.sourceId);
+                setPlacedChips((prev) => {
+                  const next = new Map(prev);
+                  next.delete(wid);
+                  placedChipsRef.current = next;
+                  return next;
                 });
               }
             },
@@ -6840,35 +7358,194 @@ const FreeDragAxis = ({
     }
   );
 };
+const AxisTicks = ({
+  min,
+  max,
+  majorTicks,
+  minorValues,
+  showArrowLeft,
+  showArrowRight,
+  highlights,
+  positions
+}) => /* @__PURE__ */ jsxs("div", { className: "number-line-axis-row", role: "presentation", children: [
+  /* @__PURE__ */ jsx("div", { className: "number-line-track", "aria-hidden": "true" }),
+  showArrowLeft && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
+  showArrowRight && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
+  /* @__PURE__ */ jsx(HighlightBands, { highlights, min, max }),
+  minorValues.map((v) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "number-line-minor-tick",
+      "aria-hidden": "true",
+      style: { left: `${toPercent(v, min, max)}%` }
+    },
+    `minor-${v}`
+  )),
+  majorTicks.map((tick) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "number-line-major-tick",
+      "aria-hidden": "true",
+      style: { left: `${toPercent(tick, min, max)}%` }
+    },
+    `major-${tick}`
+  )),
+  positions.map((pos) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "number-line-position-dot",
+      "aria-hidden": "true",
+      style: { left: `${toPercent(pos.value, min, max)}%` }
+    },
+    `dot-${pos.id}`
+  ))
+] });
+const isLabelVisible = (tick, min, max, labelVisibility) => {
+  switch (labelVisibility) {
+    case "none":
+      return false;
+    case "min-only":
+      return tick === roundTick(min);
+    case "max-only":
+      return tick === roundTick(max);
+    case "extremes":
+      return tick === roundTick(min) || tick === roundTick(max);
+    default:
+      return true;
+  }
+};
+const AxisLabels = ({
+  majorTicks,
+  min,
+  max,
+  labelVisibility,
+  inputTickSet
+}) => /* @__PURE__ */ jsx("div", { className: "number-line-labels-row", "aria-hidden": "true", children: majorTicks.map((tick) => {
+  const visible = !inputTickSet.has(tick) && isLabelVisible(tick, min, max, labelVisibility);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "number-line-tick-label",
+      style: {
+        left: `${toPercent(tick, min, max)}%`,
+        visibility: visible ? "visible" : "hidden"
+      },
+      children: tick
+    },
+    `lbl-${tick}`
+  );
+}) });
+const HighlightLabelsRow = ({ highlights, min, max }) => {
+  if (!highlights?.some((h) => h.label)) return null;
+  return /* @__PURE__ */ jsx("div", { className: "number-line-highlight-labels-row", "aria-hidden": "true", children: highlights.map((h) => {
+    if (!h.label) return null;
+    const centerPct = (toPercent(h.from, min, max) + toPercent(h.to, min, max)) / 2;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "number-line-highlight-label",
+        style: { left: `${centerPct}%` },
+        children: h.label
+      },
+      `hl-lbl-${h.id}`
+    );
+  }) });
+};
+const CounterControls = ({
+  counter,
+  count,
+  onDecrement,
+  onIncrement
+}) => /* @__PURE__ */ jsxs("div", { className: "number-line-counter", "aria-label": counter.name ?? "Counter", children: [
+  /* @__PURE__ */ jsxs("div", { className: "number-line-counter-controls", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "number-line-counter-btn",
+        "aria-label": "Decrease",
+        disabled: count <= counter.min,
+        onClick: onDecrement,
+        children: "−"
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "number-line-counter-value", "data-testid": "counter-value", children: count }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "number-line-counter-btn",
+        "aria-label": "Increase",
+        disabled: count >= counter.max,
+        onClick: onIncrement,
+        children: "+"
+      }
+    )
+  ] }),
+  counter.name && /* @__PURE__ */ jsx("span", { className: "number-line-counter-label", children: counter.name })
+] });
 const NumberLineRenderer = ({
   item,
   widgets,
   values,
   droppedInputs,
+  validationDetails,
   onChange,
   onInputFocus
 }) => {
-  const { min, max, step, minorTicks = 0, style = "arrow-right", positions } = item;
-  const majorTicks = useMemo(() => getMajorTicks(min, max, step), [min, max, step]);
-  const minorValues = useMemo(() => getMinorTickValues(majorTicks, minorTicks), [majorTicks, minorTicks]);
-  const showArrowRight = style === "arrow-right" || style === "arrow-both";
-  const showArrowLeft = style === "arrow-left" || style === "arrow-both";
+  const {
+    min,
+    max,
+    step,
+    minorTicks = 0,
+    style: lineStyle = "arrow-right",
+    labelVisibility,
+    highlights,
+    counter,
+    positions
+  } = item;
+  const [counterCount, setCounterCount] = useState(
+    counter !== void 0 ? counter.default ?? counter.min : 0
+  );
+  useEffect(() => {
+    setCounterCount(counter !== void 0 ? counter.default ?? counter.min : 0);
+  }, [counter]);
+  const effectiveStep = useMemo(() => {
+    if (counter !== void 0 && counterCount > 0) {
+      return cleanFloat((max - min) / counterCount);
+    }
+    return step;
+  }, [counter, counterCount, min, max, step]);
+  const majorTicks = useMemo(
+    () => getMajorTicks(min, max, effectiveStep).map(roundTick),
+    [min, max, effectiveStep]
+  );
+  const minorValues = useMemo(
+    () => getMinorTickValues(majorTicks, minorTicks),
+    [majorTicks, minorTicks]
+  );
+  const showArrowRight = lineStyle === "arrow-right" || lineStyle === "arrow-both";
+  const showArrowLeft = lineStyle === "arrow-left" || lineStyle === "arrow-both";
   const isDragMode = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
   const inputTickSet = useMemo(() => {
     if (isDragMode) return /* @__PURE__ */ new Set();
     return new Set(
-      positions.filter((pos) => getPositionWidgetId(pos.content) !== null).map((pos) => pos.value)
+      positions.filter((pos) => getPositionWidgetId(pos.content) !== null).map((pos) => roundTick(pos.value))
     );
   }, [isDragMode, positions]);
+  const visiblePositions = useMemo(
+    () => positions.filter((pos) => !isDragMode || getPositionWidgetId(pos.content) === null),
+    [isDragMode, positions]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `number-line${isDragMode ? " number-line--drag-mode" : ""}`,
+      className: `number-line${isDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
       style: { [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%` },
-      role: "img",
+      role: "group",
       "aria-label": `Number line from ${min} to ${max}`,
       children: [
-        !isDragMode && /* @__PURE__ */ jsx("div", { className: "number-line-content-row", children: positions.map((pos) => /* @__PURE__ */ jsx(
+        visiblePositions.length > 0 && /* @__PURE__ */ jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsx(
           "div",
           {
             className: "number-line-position-content",
@@ -6880,6 +7557,7 @@ const NumberLineRenderer = ({
                 widgets,
                 values,
                 droppedInputs,
+                validationDetails,
                 onChange,
                 onInputFocus
               },
@@ -6900,50 +7578,43 @@ const NumberLineRenderer = ({
             showArrowRight,
             positions,
             values,
-            onChange
+            onChange,
+            highlights,
+            snapKey: counterCount
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: "number-line-axis-row", role: "presentation", children: [
-          /* @__PURE__ */ jsx("div", { className: "number-line-track", "aria-hidden": "true" }),
-          showArrowLeft && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
-          showArrowRight && /* @__PURE__ */ jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
-          minorValues.map((v) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "number-line-minor-tick",
-              "aria-hidden": "true",
-              style: { left: `${toPercent(v, min, max)}%` }
-            },
-            `minor-${v}`
-          )),
-          majorTicks.map((tick) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "number-line-major-tick",
-              style: { left: `${toPercent(tick, min, max)}%` }
-            },
-            `major-${tick}`
-          )),
-          positions.map((pos) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "number-line-position-dot",
-              style: { left: `${toPercent(pos.value, min, max)}%` }
-            },
-            `dot-${pos.id}`
-          ))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "number-line-labels-row", "aria-hidden": "true", children: majorTicks.map((tick) => {
-          const hasInputAtTick = inputTickSet.has(tick);
-          return /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "number-line-tick-label",
-              style: { left: `${toPercent(tick, min, max)}%`, visibility: hasInputAtTick ? "hidden" : "visible" },
-              children: tick
-            },
-            `lbl-${tick}`
-          );
-        }) })
+        ) : /* @__PURE__ */ jsx(
+          AxisTicks,
+          {
+            min,
+            max,
+            majorTicks,
+            minorValues,
+            showArrowLeft,
+            showArrowRight,
+            highlights,
+            positions
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AxisLabels,
+          {
+            majorTicks,
+            min,
+            max,
+            labelVisibility,
+            inputTickSet
+          }
+        ),
+        /* @__PURE__ */ jsx(HighlightLabelsRow, { highlights, min, max }),
+        counter !== void 0 && /* @__PURE__ */ jsx(
+          CounterControls,
+          {
+            counter,
+            count: counterCount,
+            onDecrement: () => setCounterCount((c) => Math.max(counter.min, c - 1)),
+            onIncrement: () => setCounterCount((c) => Math.min(counter.max, c + 1))
+          }
+        )
       ]
     }
   );
@@ -7011,6 +7682,7 @@ const LayoutRenderer = ({
   widgets,
   values,
   droppedInputs,
+  validationDetails,
   onChange,
   onInputFocus
 }) => {
@@ -7063,13 +7735,18 @@ const LayoutRenderer = ({
     case JSON_TYPES.WIDGET_REF: {
       const widget = widgets[item.widgetId];
       if (!widget) return null;
+      const isCorrect = validationDetails?.[item.widgetId];
+      const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
       return /* @__PURE__ */ jsx(
         WidgetRenderer,
         {
           widget,
           widgetId: item.widgetId,
           value: values[item.widgetId] || "",
+          values,
           isDropped: droppedInputs.has(item.widgetId),
+          validationStatus,
+          droppedInputs,
           onChange,
           onInputFocus
         }
@@ -7089,6 +7766,7 @@ const LayoutRenderer = ({
           widgets,
           values,
           droppedInputs,
+          validationDetails,
           onChange,
           onInputFocus
         },
@@ -7107,6 +7785,7 @@ const LayoutRenderer = ({
               widgets,
               values,
               droppedInputs,
+              validationDetails,
               onChange,
               onInputFocus
             },
@@ -7123,6 +7802,7 @@ const LayoutRenderer = ({
           widgets,
           values,
           droppedInputs,
+          validationDetails,
           onChange,
           onInputFocus
         }
@@ -7150,9 +7830,15 @@ const ExerciseRenderer = forwardRef(({
   const [values, setValues] = useState({});
   const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
   const [focusedInputId, setFocusedInputId] = useState(null);
+  const [validationDetails, setValidationDetails] = useState(null);
   useImperativeHandle(ref, () => ({
     submit: () => {
       const result = validate(json, values);
+      const details = {};
+      for (const [id, v] of Object.entries(result.details)) {
+        details[id] = v.isCorrect;
+      }
+      setValidationDetails(details);
       onSubmit?.(values);
       return result;
     },
@@ -7161,6 +7847,7 @@ const ExerciseRenderer = forwardRef(({
       setValues({});
       setDroppedSources(/* @__PURE__ */ new Map());
       setFocusedInputId(null);
+      setValidationDetails(null);
     },
     focusFirstInput: () => {
       const container = document.querySelector(".math-exercise-renderer");
@@ -7171,8 +7858,7 @@ const ExerciseRenderer = forwardRef(({
     }
   }), [json, values, onSubmit]);
   const handleChange = (widgetId, value, fromDrop = false, sourceOptionId) => {
-    const newValues = { ...values, [widgetId]: value };
-    setValues(newValues);
+    setValues((prev) => ({ ...prev, [widgetId]: value }));
     setDroppedSources((prev) => {
       const next = new Map(prev);
       if (fromDrop && value !== "" && sourceOptionId) {
@@ -7182,7 +7868,7 @@ const ExerciseRenderer = forwardRef(({
       }
       return next;
     });
-    onChange?.(newValues);
+    onChange?.({ ...values, [widgetId]: value });
   };
   const handleSubmit = () => {
     onSubmit?.(values);
@@ -7275,6 +7961,7 @@ const ExerciseRenderer = forwardRef(({
                   widgets: json.widgets,
                   values,
                   droppedInputs,
+                  validationDetails,
                   onChange: handleChange,
                   onInputFocus: setFocusedInputId
                 },
@@ -7289,6 +7976,7 @@ const ExerciseRenderer = forwardRef(({
                   widgets: json.widgets,
                   values,
                   droppedInputs,
+                  validationDetails,
                   onChange: handleChange,
                   onInputFocus: setFocusedInputId
                 },
@@ -7304,6 +7992,7 @@ const ExerciseRenderer = forwardRef(({
                 widgets: json.widgets,
                 values,
                 droppedInputs,
+                validationDetails,
                 onChange: handleChange,
                 onInputFocus: setFocusedInputId
               },
@@ -7393,6 +8082,8 @@ export {
   ExerciseMetaSchema,
   ExerciseRenderer,
   ExpressionValidationSchema,
+  FractionInlineSchema,
+  FractionJSONSchema,
   FreeTextInlineSchema,
   GroupItemSchema,
   HighlightedTextInlineSchema,
@@ -7406,6 +8097,10 @@ export {
   LexerError,
   LineBlockSchema,
   LinebreakSchema,
+  NumberLineCounterItemSchema,
+  NumberLineHighlightItemSchema,
+  NumberLineItemSchema,
+  NumberLinePositionItemSchema,
   NumericKeypadJSONSchema,
   NumericKeypadToolSchema,
   OperatorItemSchema,
@@ -7436,6 +8131,7 @@ export {
   createDragOptions,
   createExerciseDocument,
   createExpressionValidation,
+  createFraction,
   createFreeText,
   createHighlightedText,
   createLineBlock,
@@ -7448,6 +8144,7 @@ export {
   evaluate,
   extractVariables as extractExpressionVariables,
   findValidCombination,
+  getFractionKey,
   getMissingInputs,
   isBoldText,
   isColorText,
@@ -7455,6 +8152,9 @@ export {
   isDragOptionsJSON,
   isExerciseDocument,
   isExpressionValidation,
+  isFraction,
+  isFractionJSON,
+  isFractionKey,
   isFreeText,
   isGroupItem,
   isHighlightedText,
@@ -7479,8 +8179,9 @@ export {
   isToolNode,
   isValidExpression,
   isValidationNode,
-  isWidgetRef$1 as isWidgetRef,
+  isWidgetRef,
   parse,
+  parseFractionKey,
   parseSafe,
   renderExercise,
   toAST,