@mathscan/math-exercise-engine 1.0.11 → 1.0.12

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";
@@ -38,6 +38,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 +98,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -120,8 +128,12 @@ 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"];
 const Newline = createToken({
   name: "Newline",
   pattern: /\r?\n/,
@@ -215,6 +227,14 @@ const CELL = createToken({
   name: "CELL",
   pattern: /CELL/
 });
+const COUNTER = createToken({
+  name: "COUNTER",
+  pattern: /COUNTER/
+});
+const HIGHLIGHT = createToken({
+  name: "HIGHLIGHT",
+  pattern: /HIGHLIGHT(?!_TEXT)/
+});
 const NumberLiteral = createToken({
   name: "NumberLiteral",
   pattern: /-?\d+(\.\d+)?/
@@ -322,6 +342,8 @@ const allTokens = [
   TABLE,
   ROW,
   CELL,
+  COUNTER,
+  HIGHLIGHT,
   // Literals
   NumberLiteral,
   StringLiteral,
@@ -429,10 +451,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 +467,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 +476,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 +498,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 +550,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 +561,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 +611,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", () => {
@@ -751,28 +726,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 +749,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", () => {
@@ -1021,7 +984,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 +1004,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 +1055,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 +1082,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 +1107,9 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style) {
     step,
     minorTicks,
     style,
+    labelVisibility,
+    counter,
+    highlights,
     positions
   });
 }
@@ -1291,8 +1320,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 +1339,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -1633,17 +1691,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({
@@ -1717,7 +1794,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) {
@@ -1890,16 +1967,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) {
@@ -2022,6 +2125,49 @@ 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);
+}
+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 +2181,11 @@ 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 isCorrect = areValuesEqual(userValue, expected, positionMap[widgetId]);
     details[widgetId] = {
       widgetId,
       userValue,
@@ -2066,19 +2213,13 @@ 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;
-}
-function normalize(value) {
-  if (typeof value === "number") {
-    return String(Math.round(value * 1e10) / 1e10);
-  }
-  return String(value).trim().toLowerCase().replace(/^["']|["']$/g, "");
+  return normalize(userValue) === normalize(expected);
 }
 const math = create(all);
 const BLOCKED_FUNCTIONS = [
@@ -6620,7 +6761,10 @@ const WidgetRenderer = ({
   }
   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 +6780,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 +6806,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 +6848,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 +6901,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(() => {
-    setDropLabels((prev) => {
+    placedChipsRef.current = placedChips;
+  }, [placedChips]);
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    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 +6954,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 +6968,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,6 +7135,132 @@ 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,
@@ -6848,27 +7269,59 @@ const NumberLineRenderer = ({
   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",
@@ -6900,50 +7353,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))
+          }
+        )
       ]
     }
   );
@@ -7171,8 +7617,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 +7627,7 @@ const ExerciseRenderer = forwardRef(({
       }
       return next;
     });
-    onChange?.(newValues);
+    onChange?.({ ...values, [widgetId]: value });
   };
   const handleSubmit = () => {
     onSubmit?.(values);
@@ -7406,6 +7851,10 @@ export {
   LexerError,
   LineBlockSchema,
   LinebreakSchema,
+  NumberLineCounterItemSchema,
+  NumberLineHighlightItemSchema,
+  NumberLineItemSchema,
+  NumberLinePositionItemSchema,
   NumericKeypadJSONSchema,
   NumericKeypadToolSchema,
   OperatorItemSchema,
@@ -7479,7 +7928,7 @@ export {
   isToolNode,
   isValidExpression,
   isValidationNode,
-  isWidgetRef$1 as isWidgetRef,
+  isWidgetRef,
   parse,
   parseSafe,
   renderExercise,