@mathscan/math-exercise-engine 1.1.8 → 1.1.10

package/dist/index.js

@@ -58,10 +58,14 @@ const AST_TYPES = {
   NUMBER_LINE_BLOCK: "NumberLineBlock",
   /** A position marker on the number line */
   NUMBER_LINE_POSITION: "NumberLinePosition",
+  /** A draggable cursor on the number line */
+  NUMBER_LINE_CURSOR: "NumberLineCursor",
   /** 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",
+  /** An arrow annotation spanning a number line interval */
+  NUMBER_LINE_ARROW: "NumberLineArrow",
   /** Matcher layout block */
   MATCHER_BLOCK: "MatcherBlock",
   /** Row within a matcher */
@@ -154,6 +158,10 @@ const JSON_TYPES = {
   NUMBER_LINE_COUNTER: "number-line-counter",
   /** Highlighted range within a number line */
   NUMBER_LINE_HIGHLIGHT: "number-line-highlight",
+  /** Draggable cursor within a number line */
+  NUMBER_LINE_CURSOR: "number-line-cursor",
+  /** Arrow annotation within a number line */
+  NUMBER_LINE_ARROW: "number-line-arrow",
   /** Matcher layout block */
   MATCHER: "matcher",
   /** Row within a matcher */
@@ -320,6 +328,14 @@ const POSITION = chevrotain.createToken({
   name: "POSITION",
   pattern: /POSITION/
 });
+const CURSOR = chevrotain.createToken({
+  name: "CURSOR",
+  pattern: /CURSOR/
+});
+const ARROW = chevrotain.createToken({
+  name: "ARROW",
+  pattern: /ARROW/
+});
 const TABLE = chevrotain.createToken({
   name: "TABLE",
   pattern: /TABLE/
@@ -517,6 +533,8 @@ const allTokens = [
   NUMERIC_INPUT,
   NUMBER_LINE,
   POSITION,
+  CURSOR,
+  ARROW,
   TABLE,
   ROW,
   TOP_ROW,
@@ -791,7 +809,9 @@ class MathExerciseParser extends chevrotain.CstParser {
         this.OR6([
           { ALT: () => this.SUBRULE(this.position) },
           { ALT: () => this.SUBRULE(this.counter) },
-          { ALT: () => this.SUBRULE(this.highlight) }
+          { ALT: () => this.SUBRULE(this.highlight) },
+          { ALT: () => this.SUBRULE(this.cursor) },
+          { ALT: () => this.SUBRULE(this.arrow) }
         ]);
       });
       this.CONSUME(RBrace);
@@ -840,6 +860,38 @@ class MathExerciseParser extends chevrotain.CstParser {
         this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
       });
     });
+    this.cursor = this.RULE("cursor", () => {
+      this.CONSUME(CURSOR);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+    });
+    this.arrow = this.RULE("arrow", () => {
+      this.CONSUME(ARROW);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.MANY4(() => {
+        this.OR4([
+          { ALT: () => this.SUBRULE(this.inlineElement) },
+          { ALT: () => this.CONSUME4(Newline) }
+        ]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY5(() => {
+        this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
+      });
+    });
     this.matcher = this.RULE("matcher", () => {
       this.MANY(() => {
         this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
@@ -1867,6 +1919,44 @@ function createNumberLineHighlight(from, to, color, label) {
     ...label !== void 0 && { label }
   });
 }
+const NumberLineCursorSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.NUMBER_LINE_CURSOR),
+  value: zod.z.number().finite({ message: "CURSOR: value must be a finite number" }).default(0),
+  answer: zod.z.number({ required_error: "CURSOR: answer is required" }).finite({ message: "CURSOR: answer must be a finite number" }),
+  color: zod.z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/, {
+    message: 'CURSOR: color must be a hex value (e.g. "#3B82F6" or "#F00")'
+  }).optional(),
+  fillRange: zod.z.boolean().default(false),
+  label: zod.z.string().optional()
+});
+function createNumberLineCursor(answer, value, color, fillRange, label) {
+  return NumberLineCursorSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_CURSOR,
+    answer,
+    ...value !== void 0 && { value },
+    ...color !== void 0 && { color },
+    ...fillRange !== void 0 && { fillRange },
+    ...label !== void 0 && { label }
+  });
+}
+const NumberLineArrowSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.NUMBER_LINE_ARROW),
+  from: zod.z.number().finite({ message: "ARROW: from must be a finite number" }),
+  to: zod.z.number().finite({ message: "ARROW: to must be a finite number" }),
+  color: zod.z.string().optional(),
+  inlines: zod.z.array(InlineNodeSchema)
+}).refine((d) => d.from < d.to, {
+  message: "ARROW: from must be less than to"
+});
+function createNumberLineArrow(from, to, inlines, color) {
+  return NumberLineArrowSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_ARROW,
+    from,
+    to,
+    ...color !== void 0 && { color },
+    inlines
+  });
+}
 const NumberLineBlockSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.NUMBER_LINE_BLOCK),
   min: zod.z.number().finite({ message: "NUMBER_LINE: min must be a finite number" }),
@@ -1885,6 +1975,8 @@ const NumberLineBlockSchema = zod.z.object({
   }).optional(),
   counter: NumberLineCounterSchema.optional(),
   highlights: zod.z.array(NumberLineHighlightSchema).optional(),
+  cursors: zod.z.array(NumberLineCursorSchema).optional(),
+  arrows: zod.z.array(NumberLineArrowSchema).optional(),
   dragMode: zod.z.enum(NUMBER_LINE_DRAG_MODES, {
     errorMap: () => ({
       message: `NUMBER_LINE: dragMode must be one of ${NUMBER_LINE_DRAG_MODES.join(", ")}`
@@ -1918,6 +2010,14 @@ const NumberLineBlockSchema = zod.z.object({
       });
     }
   }
+  for (const arrow of data.arrows ?? []) {
+    if (arrow.from < data.min || arrow.to > data.max) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: ARROW range [${arrow.from}, ${arrow.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({
@@ -1926,8 +2026,22 @@ const NumberLineBlockSchema = zod.z.object({
       });
     }
   }
+  for (const c of data.cursors ?? []) {
+    if (c.value < data.min || c.value > data.max) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: CURSOR value (${c.value}) must be within [${data.min}, ${data.max}]`
+      });
+    }
+    if (c.answer < data.min || c.answer > data.max) {
+      ctx.addIssue({
+        code: zod.z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: CURSOR answer (${c.answer}) must be within [${data.min}, ${data.max}]`
+      });
+    }
+  }
 });
-function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, dragMode) {
+function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, cursors, arrows, dragMode) {
   return NumberLineBlockSchema.parse({
     type: AST_TYPES.NUMBER_LINE_BLOCK,
     min,
@@ -1938,6 +2052,8 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style, lab
     labelVisibility,
     counter,
     highlights,
+    cursors,
+    arrows,
     dragMode,
     positions
   });
@@ -2591,7 +2707,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     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, dragMode);
+    const cursors = ctx.cursor ? ctx.cursor.map((c) => this.visit(c)) : [];
+    const arrows = ctx.arrow ? ctx.arrow.map((a) => this.visit(a)) : [];
+    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, cursors.length > 0 ? cursors : void 0, arrows.length > 0 ? arrows : void 0, dragMode);
   }
   position(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -2625,6 +2743,29 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const label = params.label;
     return createNumberLineHighlight(from, to, color, label);
   }
+  cursor(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.answer === void 0) {
+      throw new Error("CURSOR requires parameter: answer");
+    }
+    const answer = Number(params.answer);
+    const value = params.value !== void 0 ? Number(params.value) : void 0;
+    const color = params.color;
+    const fillRange = params.fillRange !== void 0 ? params.fillRange === true || params.fillRange === "true" : void 0;
+    const label = params.label;
+    return createNumberLineCursor(answer, value, color, fillRange, label);
+  }
+  arrow(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.from === void 0 || params.to === void 0) {
+      throw new Error("ARROW requires parameters: from and to");
+    }
+    const from = Number(params.from);
+    const to = Number(params.to);
+    const color = params.color;
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((elem) => this.visit(elem)) : [];
+    return createNumberLineArrow(from, to, inlines, color);
+  }
   // ═══════════════════════════════════════════════════════════════════════════
   // Matcher Block
   // ═══════════════════════════════════════════════════════════════════════════
@@ -3279,6 +3420,23 @@ const NumberLineHighlightItemSchema = zod.z.object({
   color: zod.z.enum(NUMBER_LINE_HIGHLIGHT_COLORS).optional(),
   label: zod.z.string().optional()
 });
+const NumberLineCursorItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.NUMBER_LINE_CURSOR),
+  value: zod.z.number().finite(),
+  answer: zod.z.number().finite(),
+  color: zod.z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/).optional(),
+  fillRange: zod.z.boolean(),
+  label: zod.z.string().optional()
+});
+const NumberLineArrowItemSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.NUMBER_LINE_ARROW),
+  from: zod.z.number().finite(),
+  to: zod.z.number().finite(),
+  color: zod.z.string().optional(),
+  content: zod.z.array(LayoutItemSchema)
+});
 const NumberLineItemSchema = zod.z.object({
   id: zod.z.string(),
   type: zod.z.literal(JSON_TYPES.NUMBER_LINE),
@@ -3290,6 +3448,8 @@ const NumberLineItemSchema = zod.z.object({
   labelVisibility: zod.z.enum(NUMBER_LINE_LABELS).optional(),
   counter: NumberLineCounterItemSchema.optional(),
   highlights: zod.z.array(NumberLineHighlightItemSchema).optional(),
+  cursors: zod.z.array(NumberLineCursorItemSchema).optional(),
+  arrows: zod.z.array(NumberLineArrowItemSchema).optional(),
   dragMode: zod.z.enum(NUMBER_LINE_DRAG_MODES).optional(),
   positions: zod.z.array(NumberLinePositionItemSchema)
 });
@@ -3637,6 +3797,9 @@ function toJSON(ast) {
       if (nlItem.counter?.answer !== void 0) {
         answers[nlItem.counter.id] = nlItem.counter.answer;
       }
+      for (const cursor of nlItem.cursors ?? []) {
+        answers[cursor.id] = cursor.answer;
+      }
     } else if (block.type === AST_TYPES.MATCHER_BLOCK) {
       const matcherBlock = block;
       layout.push({
@@ -3827,9 +3990,13 @@ function collectAllInlines(blocks) {
         }
       }
     } else if (block.type === AST_TYPES.NUMBER_LINE_BLOCK) {
-      for (const position of block.positions) {
+      const numberLine = block;
+      for (const position of numberLine.positions) {
         result.push(...position.inlines);
       }
+      for (const arrow of numberLine.arrows ?? []) {
+        result.push(...arrow.inlines);
+      }
     } else if (block.type === AST_TYPES.MATCHER_BLOCK) {
       for (const row of block.rows) {
         for (const item of row.items) {
@@ -3879,6 +4046,29 @@ function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
       ...h.label !== void 0 && { label: h.label }
     }));
   }
+  let cursors;
+  if (numberLine.cursors !== void 0 && numberLine.cursors.length > 0) {
+    cursors = numberLine.cursors.map((c) => ({
+      id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_CURSOR),
+      type: JSON_TYPES.NUMBER_LINE_CURSOR,
+      value: c.value,
+      answer: c.answer,
+      fillRange: c.fillRange,
+      ...c.color !== void 0 && { color: c.color },
+      ...c.label !== void 0 && { label: c.label }
+    }));
+  }
+  let arrows;
+  if (numberLine.arrows !== void 0 && numberLine.arrows.length > 0) {
+    arrows = numberLine.arrows.map((a) => ({
+      id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_ARROW),
+      type: JSON_TYPES.NUMBER_LINE_ARROW,
+      from: a.from,
+      to: a.to,
+      ...a.color !== void 0 && { color: a.color },
+      content: a.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds))
+    }));
+  }
   const item = {
     id: idGenerator.generate(JSON_TYPES.NUMBER_LINE),
     type: JSON_TYPES.NUMBER_LINE,
@@ -3890,6 +4080,8 @@ function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
     ...numberLine.labelVisibility !== void 0 && { labelVisibility: numberLine.labelVisibility },
     ...counterItem !== void 0 && { counter: counterItem },
     ...highlights !== void 0 && { highlights },
+    ...cursors !== void 0 && { cursors },
+    ...arrows !== void 0 && { arrows },
     ...numberLine.dragMode !== void 0 && { dragMode: numberLine.dragMode },
     positions
   };
@@ -4021,7 +4213,7 @@ function transformLine(line, idGenerator, inlineDragIds) {
 }
 function transformInline(inline, idGenerator, inlineDragIds) {
   switch (inline.type) {
-    case AST_TYPES.FREE_TEXT:
+    case AST_TYPES.FREE_TEXT: {
       const trimmed = inline.value.trim();
       const operators = ["+", "-", "×", "÷", "=", "<", ">", "?"];
       if (operators.includes(trimmed) && inline.value.trim() === inline.value) {
@@ -4036,6 +4228,7 @@ function transformInline(inline, idGenerator, inlineDragIds) {
         type: JSON_TYPES.TEXT,
         value: inline.value
       };
+    }
     case AST_TYPES.SPACE:
       return {
         id: idGenerator.generate(JSON_TYPES.SPACE),
@@ -8298,7 +8491,7 @@ lodash.exports;
         var tag = baseGetTag(value);
         return tag == errorTag || tag == domExcTag || typeof value.message == "string" && typeof value.name == "string" && !isPlainObject(value);
       }
-      function isFinite(value) {
+      function isFinite2(value) {
         return typeof value == "number" && nativeIsFinite(value);
       }
       function isFunction(value) {
@@ -9399,7 +9592,7 @@ lodash.exports;
       lodash2.isEqual = isEqual;
       lodash2.isEqualWith = isEqualWith;
       lodash2.isError = isError;
-      lodash2.isFinite = isFinite;
+      lodash2.isFinite = isFinite2;
       lodash2.isFunction = isFunction;
       lodash2.isInteger = isInteger;
       lodash2.isLength = isLength;
@@ -13953,6 +14146,8 @@ const DEFAULT_SOUNDS = {
   "clock-hour-tick": buttonClick,
   "clock-minute-tick": buttonClick,
   "counter-step": buttonClick,
+  "cursor-step": buttonClick,
+  "cursor-release": dragDrop,
   "input-select": inputSelect,
   "answer-correct": answerCorrect,
   "answer-wrong": answerWrong
@@ -15050,19 +15245,21 @@ const DragOptions = ({
   options,
   onOptionClick
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options", children: options.map((option, idx) => {
-    const optionId = `drag-option-${idx}`;
-    const optionValue = String(option);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SingleDragOption,
-      {
-        optionId,
-        value: optionValue,
-        onOptionClick
-      },
-      optionId
-    );
-  }) }) });
+  const [shuffledOptions] = React.useState(
+    () => lodashExports.shuffle(options.map((option, idx) => ({
+      optionId: `drag-option-${idx}`,
+      value: String(option)
+    })))
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PillBackground, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "drag-options", children: shuffledOptions.map(({ optionId, value }) => /* @__PURE__ */ jsxRuntime.jsx(
+    SingleDragOption,
+    {
+      optionId,
+      value,
+      onOptionClick
+    },
+    optionId
+  )) }) });
 };
 const InlineDragOption = ({
   widgetId,
@@ -15646,7 +15843,8 @@ const RadioOptions = ({
   onChange
 }) => {
   const playSound = useSound();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "radio-options", children: options.map((option, idx) => {
+  const [shuffledOptions] = React.useState(() => lodashExports.shuffle(options));
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "radio-options", children: shuffledOptions.map((option, idx) => {
     const isSelected = value === option;
     const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -16511,6 +16709,182 @@ const HighlightBands = ({ highlights, min, max }) => {
     );
   }) });
 };
+const DraggableCursor = ({
+  cursor,
+  min,
+  max,
+  snapTicks,
+  audibleTicks,
+  axisRowRef,
+  onChange,
+  currentValue,
+  validationStatus
+}) => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const isDraggingRef = React.useRef(false);
+  const currentValueRef = React.useRef(currentValue);
+  currentValueRef.current = currentValue;
+  const dragStartValueRef = React.useRef(currentValue);
+  const lastSoundValueRef = React.useRef(currentValue);
+  const { jiggling, onAnimationEnd } = useJiggle(isDragging);
+  const playSound = useSound();
+  const colorVar = !validationStatus && cursor.color ? { "--nl-cursor-color": cursor.color } : void 0;
+  const initialPct = toPercent(cursor.value, min, max);
+  const ballPct = toPercent(currentValue, min, max);
+  const fillLeft = Math.min(initialPct, ballPct);
+  const fillWidth = Math.abs(ballPct - initialPct);
+  const snap = React.useCallback((clientX) => {
+    const el = axisRowRef.current;
+    if (!el) return currentValueRef.current;
+    const rect = el.getBoundingClientRect();
+    const raw = pixelToValue(clientX, rect.left, rect.width, min, max);
+    return snapTicks.length > 0 ? snapToNearest(raw, snapTicks) : cleanFloat(raw);
+  }, [axisRowRef, min, max, snapTicks]);
+  const handlePointerDown = React.useCallback((e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    e.stopPropagation();
+    isDraggingRef.current = true;
+    dragStartValueRef.current = currentValue;
+    lastSoundValueRef.current = currentValue;
+    setIsDragging(true);
+  }, [currentValue]);
+  const updateCursorValue = React.useCallback((clientX) => {
+    const next = snap(clientX);
+    if (!almostEqual(next, lastSoundValueRef.current)) {
+      const soundTicks = audibleTicks ?? snapTicks;
+      if (soundTicks.some((tick) => almostEqual(tick, next))) playSound("cursor-step");
+      lastSoundValueRef.current = next;
+    }
+    onChange(cursor.id, String(next));
+    return next;
+  }, [snap, audibleTicks, snapTicks, playSound, onChange, cursor.id]);
+  const handlePointerMove = React.useCallback((e) => {
+    if (!isDraggingRef.current) return;
+    e.stopPropagation();
+    updateCursorValue(e.clientX);
+  }, [updateCursorValue]);
+  const handlePointerUp = React.useCallback((e) => {
+    if (!isDraggingRef.current) return;
+    isDraggingRef.current = false;
+    setIsDragging(false);
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    e.stopPropagation();
+    const next = updateCursorValue(e.clientX);
+    if (!almostEqual(next, dragStartValueRef.current)) {
+      playSound("cursor-release");
+    }
+  }, [updateCursorValue, playSound]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (!snapTicks.length) return;
+    const sorted = [...snapTicks].sort((a, b) => a - b);
+    const idx = sorted.findIndex((t) => t >= currentValue - 1e-9);
+    const first = sorted[0] ?? currentValue;
+    const last = sorted[sorted.length - 1] ?? currentValue;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = sorted[idx + 1] ?? last;
+      const soundTicks = audibleTicks ?? snapTicks;
+      if (!almostEqual(next, currentValue) && soundTicks.some((tick) => almostEqual(tick, next))) {
+        playSound("cursor-step");
+      }
+      onChange(cursor.id, String(next));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = sorted[idx - 1] ?? first;
+      const soundTicks = audibleTicks ?? snapTicks;
+      if (!almostEqual(next, currentValue) && soundTicks.some((tick) => almostEqual(tick, next))) {
+        playSound("cursor-step");
+      }
+      onChange(cursor.id, String(next));
+    }
+  }, [snapTicks, audibleTicks, currentValue, playSound, onChange, cursor.id]);
+  const ballClass = [
+    "number-line-cursor-ball",
+    isDragging ? "number-line-cursor-ball--dragging" : "",
+    jiggling && !isDragging ? "number-line-cursor-ball--jiggle" : "",
+    validationStatus ? `number-line-cursor-ball--${validationStatus}` : ""
+  ].filter(Boolean).join(" ");
+  const fillClass = [
+    "number-line-cursor-fill",
+    validationStatus ? `number-line-cursor-fill--${validationStatus}` : ""
+  ].filter(Boolean).join(" ");
+  const labelClass = [
+    "number-line-cursor-label",
+    validationStatus ? `number-line-cursor-label--${validationStatus}` : ""
+  ].filter(Boolean).join(" ");
+  const sliderAriaLabel = cursor.label ? `${cursor.label}: cursor position ${currentValue}` : `cursor position ${currentValue}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    cursor.fillRange && fillWidth > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: fillClass,
+        "aria-hidden": "true",
+        style: { left: `${fillLeft}%`, width: `${fillWidth}%`, ...colorVar }
+      }
+    ),
+    cursor.label && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: labelClass,
+        "aria-hidden": "true",
+        style: { left: `${ballPct}%`, ...colorVar },
+        children: cursor.label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ballClass,
+        style: { left: `${ballPct}%`, ...colorVar },
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onKeyDown: handleKeyDown,
+        onAnimationEnd,
+        role: "slider",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": currentValue,
+        "aria-label": sliderAriaLabel,
+        tabIndex: 0
+      }
+    )
+  ] });
+};
+const CursorBalls = ({
+  cursors,
+  min,
+  max,
+  snapTicks,
+  audibleTicks,
+  axisRowRef,
+  onChange,
+  values,
+  cursorValidationStatuses
+}) => {
+  if (!cursors?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: cursors.map((cursor) => {
+    const raw = values[cursor.id];
+    const parsed = Number(raw);
+    const currentValue = raw !== void 0 && raw !== "" && isFinite(parsed) ? parsed : cursor.value;
+    const validationStatus = cursorValidationStatuses?.[cursor.id] ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DraggableCursor,
+      {
+        cursor,
+        min,
+        max,
+        snapTicks,
+        audibleTicks,
+        axisRowRef,
+        onChange,
+        currentValue,
+        validationStatus
+      },
+      cursor.id
+    );
+  }) });
+};
 const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: widgetId,
@@ -16574,6 +16948,8 @@ const FreeDragAxis = ({
   values,
   onChange,
   highlights,
+  cursors,
+  cursorValidationStatuses,
   snapKey
 }) => {
   const axisRef = React.useRef(null);
@@ -16746,6 +17122,20 @@ const FreeDragAxis = ({
         showArrowLeft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
         showArrowRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxRuntime.jsx(HighlightBands, { highlights, min, max }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CursorBalls,
+          {
+            cursors,
+            min,
+            max,
+            snapTicks,
+            audibleTicks: majorTicks,
+            axisRowRef: axisRef,
+            onChange,
+            values,
+            cursorValidationStatuses
+          }
+        ),
         minorValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -16814,40 +17204,65 @@ const AxisTicks = ({
   showArrowLeft,
   showArrowRight,
   highlights,
-  positions
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "number-line-axis-row", role: "presentation", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-track", "aria-hidden": "true" }),
-  showArrowLeft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
-  showArrowRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
-  /* @__PURE__ */ jsxRuntime.jsx(HighlightBands, { highlights, min, max }),
-  minorValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "number-line-minor-tick",
-      "aria-hidden": "true",
-      style: { left: `${toPercent(v, min, max)}%` }
-    },
-    `minor-${v}`
-  )),
-  majorTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "number-line-major-tick",
-      "aria-hidden": "true",
-      style: { left: `${toPercent(tick, min, max)}%` }
-    },
-    `major-${tick}`
-  )),
-  positions.map((pos) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "number-line-position-dot",
-      "aria-hidden": "true",
-      style: { left: `${toPercent(pos.value, min, max)}%` }
-    },
-    `dot-${pos.id}`
-  ))
-] });
+  positions,
+  cursors,
+  onChange,
+  values,
+  cursorValidationStatuses
+}) => {
+  const axisRowRef = React.useRef(null);
+  const snapTicks = React.useMemo(
+    () => [...majorTicks, ...minorValues],
+    [majorTicks, minorValues]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: axisRowRef, className: "number-line-axis-row", role: "presentation", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-track", "aria-hidden": "true" }),
+    showArrowLeft && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-left", "aria-hidden": "true" }),
+    showArrowRight && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-arrow number-line-arrow-right", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx(HighlightBands, { highlights, min, max }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CursorBalls,
+      {
+        cursors,
+        min,
+        max,
+        snapTicks,
+        audibleTicks: majorTicks,
+        axisRowRef,
+        onChange,
+        values,
+        cursorValidationStatuses
+      }
+    ),
+    minorValues.map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "number-line-minor-tick",
+        "aria-hidden": "true",
+        style: { left: `${toPercent(v, min, max)}%` }
+      },
+      `minor-${v}`
+    )),
+    majorTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "number-line-major-tick",
+        "aria-hidden": "true",
+        style: { left: `${toPercent(tick, min, max)}%` }
+      },
+      `major-${tick}`
+    )),
+    positions.map((pos) => /* @__PURE__ */ jsxRuntime.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":
@@ -16941,6 +17356,209 @@ const CounterControls = ({
     counter.name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "number-line-counter-label", children: counter.name })
   ] });
 };
+const ARROW_ARC_LEVEL_HEIGHT = 80;
+const ARROW_ARC_VIEWBOX_HEIGHT = 64;
+const ARROW_ARC_VIEWBOX_WIDTH = 100;
+const ARROW_ARC_BASE_Y = 56;
+const ARROW_ARC_MIN_LIFT = 28;
+const ARROW_ARC_MAX_LIFT = 58;
+const ARROW_ARC_LIFT_RATIO = 1.15;
+const ARROW_ARC_LABEL_OFFSET = 24;
+const ARROW_ARC_HEAD_LENGTH = 8;
+const ARROW_ARC_HEAD_HALF_WIDTH = 3.2;
+function getArrowArcLift(widthPct) {
+  return Math.min(ARROW_ARC_MAX_LIFT, Math.max(ARROW_ARC_MIN_LIFT, widthPct * ARROW_ARC_LIFT_RATIO));
+}
+function fmt(n) {
+  return Number(n.toFixed(2));
+}
+function getArrowArcSvgWidth(renderedWidthPx) {
+  return renderedWidthPx > 0 ? renderedWidthPx : ARROW_ARC_VIEWBOX_WIDTH;
+}
+function getArrowArcLabelTop(widthPct) {
+  const svgTop = ARROW_ARC_LEVEL_HEIGHT - ARROW_ARC_VIEWBOX_HEIGHT;
+  const arcTop = svgTop + ARROW_ARC_BASE_Y - getArrowArcLift(widthPct);
+  return Math.max(0, arcTop - ARROW_ARC_LABEL_OFFSET);
+}
+function getArrowArcPaths(widthPct, svgWidthPx = ARROW_ARC_VIEWBOX_WIDTH) {
+  const endX = getArrowArcSvgWidth(svgWidthPx);
+  const controlInset = Math.min(svgWidthPx * 0.18, 48);
+  const lift = getArrowArcLift(widthPct);
+  const controlY = fmt(ARROW_ARC_BASE_Y - lift);
+  const tangentAngle = Math.atan2(ARROW_ARC_BASE_Y - controlY, endX - (endX - controlInset));
+  const tx = Math.cos(tangentAngle);
+  const ty = Math.sin(tangentAngle);
+  const shaftEndX = fmt(endX - tx * ARROW_ARC_HEAD_LENGTH);
+  const shaftEndY = fmt(ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH);
+  const endControlX = fmt(shaftEndX - tx * controlInset);
+  const endControlY = fmt(shaftEndY - ty * controlInset);
+  const arcPath = `M 0 ${ARROW_ARC_BASE_Y} C ${fmt(controlInset)} ${controlY} ${endControlX} ${endControlY} ${shaftEndX} ${shaftEndY}`;
+  const nx = -ty;
+  const ny = tx;
+  const baseX = endX - tx * ARROW_ARC_HEAD_LENGTH;
+  const baseY = ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH;
+  const headPath = `M ${fmt(endX)} ${ARROW_ARC_BASE_Y} L ${fmt(baseX + nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY + ny * ARROW_ARC_HEAD_HALF_WIDTH)} L ${fmt(baseX - nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY - ny * ARROW_ARC_HEAD_HALF_WIDTH)} Z`;
+  return { arcPath, headPath };
+}
+function getArrowArcLayouts(arrows, min, max) {
+  if (!arrows?.length) return [];
+  const sorted = arrows.map((arrow, index) => {
+    const fromPct = toPercent(arrow.from, min, max);
+    const toPct = toPercent(arrow.to, min, max);
+    return {
+      arrow,
+      index,
+      leftPct: fromPct,
+      rightPct: toPct,
+      widthPct: toPct - fromPct,
+      level: 0
+    };
+  }).filter((layout) => layout.widthPct > 0).sort((a, b) => a.leftPct - b.leftPct || a.rightPct - b.rightPct || a.index - b.index);
+  const levelRightEdges = [];
+  for (const layout of sorted) {
+    const reusableLevel = levelRightEdges.findIndex((rightPct) => layout.leftPct >= rightPct);
+    const level = reusableLevel === -1 ? levelRightEdges.length : reusableLevel;
+    layout.level = level;
+    levelRightEdges[level] = layout.rightPct;
+  }
+  return sorted.sort((a, b) => a.index - b.index);
+}
+function getArrowArcsRowHeight(layouts) {
+  if (layouts.length === 0) return 0;
+  const levelCount = Math.max(...layouts.map((layout) => layout.level)) + 1;
+  return levelCount * ARROW_ARC_LEVEL_HEIGHT;
+}
+function useElementWidth() {
+  const ref = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+  React.useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const updateWidth = () => {
+      const nextWidth = element.getBoundingClientRect().width;
+      setWidth((previousWidth) => previousWidth === nextWidth ? previousWidth : nextWidth);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+const ArrowArc = ({
+  layout: { arrow, leftPct, widthPct, level },
+  widgets,
+  values,
+  droppedInputs,
+  validationDetails,
+  onChange,
+  onInputFocus
+}) => {
+  const [arcRef, renderedWidthPx] = useElementWidth();
+  const hasLabel = arrow.content.length > 0;
+  const svgWidthPx = getArrowArcSvgWidth(renderedWidthPx);
+  const { arcPath, headPath } = React.useMemo(
+    () => getArrowArcPaths(widthPct, svgWidthPx),
+    [widthPct, svgWidthPx]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: arcRef,
+      className: "number-line-arrow-arc",
+      "data-level": level,
+      style: {
+        left: `${leftPct}%`,
+        width: `${widthPct}%`,
+        bottom: `${level * ARROW_ARC_LEVEL_HEIGHT}px`,
+        // DSL color overrides the CSS default — only set when the author
+        // explicitly wrote e.g. ARROW[from=0,to=5,color="#2B6DEA"]
+        ...arrow.color !== void 0 && { "--nl-arrow-arc-color": arrow.color }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "number-line-arrow-arc-svg",
+            viewBox: `0 0 ${svgWidthPx} ${ARROW_ARC_VIEWBOX_HEIGHT}`,
+            preserveAspectRatio: "none",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "number-line-arrow-arc-path",
+                  d: arcPath
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "number-line-arrow-arc-head",
+                  d: headPath
+                }
+              )
+            ]
+          }
+        ),
+        hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "number-line-arrow-arc-label",
+            style: { top: `${getArrowArcLabelTop(widthPct)}px` },
+            children: arrow.content.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+              LayoutRenderer,
+              {
+                item: subItem,
+                widgets,
+                values,
+                droppedInputs,
+                validationDetails,
+                onChange,
+                onInputFocus
+              },
+              subItem.id
+            ))
+          }
+        )
+      ]
+    }
+  );
+};
+const ArrowArcsRow = ({
+  layouts,
+  rowHeight,
+  widgets,
+  values,
+  droppedInputs,
+  validationDetails,
+  onChange,
+  onInputFocus
+}) => {
+  if (layouts.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "number-line-arrow-arcs-row",
+      style: { height: `${rowHeight}px` },
+      children: layouts.map((layout) => /* @__PURE__ */ jsxRuntime.jsx(
+        ArrowArc,
+        {
+          layout,
+          widgets,
+          values,
+          droppedInputs,
+          validationDetails,
+          onChange,
+          onInputFocus
+        },
+        layout.arrow.id
+      ))
+    }
+  );
+};
 const CONTENT_ROW_EXTRA_SPACE = 8;
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 function useMeasuredPositionContentHeight(positionIds) {
@@ -17054,8 +17672,10 @@ const NumberLineRenderer = ({
     style: lineStyle = "arrow-right",
     labelVisibility,
     highlights,
+    arrows,
     counter,
-    positions
+    positions,
+    cursors
   } = item;
   const [counterCount, setCounterCount] = React.useState(
     counter !== void 0 ? counter.default ?? counter.min : 0
@@ -17071,6 +17691,15 @@ const NumberLineRenderer = ({
       onChangeRef.current(counter.id, String(counterCount));
     }
   }, [counterCount, counter?.id]);
+  const cursorKeys = React.useMemo(
+    () => (cursors ?? []).map((c) => `${c.id}:${c.value}`).join(","),
+    [cursors]
+  );
+  React.useEffect(() => {
+    for (const cursor of cursors ?? []) {
+      onChangeRef.current(cursor.id, String(cursor.value));
+    }
+  }, [cursorKeys]);
   const effectiveStep = React.useMemo(() => {
     if (counter !== void 0 && counterCount > 0) {
       return cleanFloat((max - min) / counterCount);
@@ -17104,6 +17733,15 @@ const NumberLineRenderer = ({
     [visiblePositions]
   );
   const { positionContentHeight, getPositionContentRef } = useMeasuredPositionContentHeight(visiblePositionIds);
+  const arrowArcLayouts = React.useMemo(
+    () => getArrowArcLayouts(arrows, min, max),
+    [arrows, min, max]
+  );
+  const arrowArcsRowHeight = React.useMemo(
+    () => getArrowArcsRowHeight(arrowArcLayouts),
+    [arrowArcLayouts]
+  );
+  const hasOverlayRow = arrowArcsRowHeight > 0 || visiblePositions.length > 0;
   const nlValidationStatus = React.useMemo(() => {
     if (!validationDetails || counter === void 0) return null;
     if (counter.answer === void 0) return null;
@@ -17111,6 +17749,17 @@ const NumberLineRenderer = ({
     if (counterValidation === void 0) return null;
     return counterValidation.isCorrect ? "correct" : "incorrect";
   }, [validationDetails, counter]);
+  const cursorValidationStatuses = React.useMemo(() => {
+    if (!validationDetails || !cursors?.length) return void 0;
+    const statuses = {};
+    for (const cursor of cursors) {
+      const detail = validationDetails[cursor.id];
+      if (detail !== void 0) {
+        statuses[cursor.id] = detail.isCorrect ? "correct" : "incorrect";
+      }
+    }
+    return statuses;
+  }, [validationDetails, cursors]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17122,28 +17771,50 @@ const NumberLineRenderer = ({
       role: "group",
       "aria-label": `Number line from ${min} to ${max}`,
       children: [
-        visiblePositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsxRuntime.jsx(
+        hasOverlayRow && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            ref: getPositionContentRef(pos.id),
-            className: "number-line-position-content",
-            style: { left: `${toPercent(pos.value, min, max)}%` },
-            children: pos.content.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
-              LayoutRenderer,
-              {
-                item: subItem,
-                widgets,
-                values,
-                droppedInputs,
-                validationDetails,
-                onChange,
-                onInputFocus
-              },
-              subItem.id
-            ))
-          },
-          pos.id
-        )) }),
+            className: "number-line-overlays-row",
+            style: { "--nl-arrow-arcs-row-height": `${arrowArcsRowHeight}px` },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ArrowArcsRow,
+                {
+                  layouts: arrowArcLayouts,
+                  rowHeight: arrowArcsRowHeight,
+                  widgets,
+                  values,
+                  droppedInputs,
+                  validationDetails,
+                  onChange,
+                  onInputFocus
+                }
+              ),
+              visiblePositions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: getPositionContentRef(pos.id),
+                  className: "number-line-position-content",
+                  style: { left: `${toPercent(pos.value, min, max)}%` },
+                  children: pos.content.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+                    LayoutRenderer,
+                    {
+                      item: subItem,
+                      widgets,
+                      values,
+                      droppedInputs,
+                      validationDetails,
+                      onChange,
+                      onInputFocus
+                    },
+                    subItem.id
+                  ))
+                },
+                pos.id
+              )) })
+            ]
+          }
+        ),
         isAxisDragMode ? /* @__PURE__ */ jsxRuntime.jsx(
           FreeDragAxis,
           {
@@ -17158,6 +17829,8 @@ const NumberLineRenderer = ({
             values,
             onChange,
             highlights,
+            cursors,
+            cursorValidationStatuses,
             snapKey: counterCount
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -17170,7 +17843,11 @@ const NumberLineRenderer = ({
             showArrowLeft,
             showArrowRight,
             highlights,
-            positions
+            positions,
+            cursors,
+            onChange,
+            values,
+            cursorValidationStatuses
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -18149,7 +18826,9 @@ exports.MatcherItemSchema = MatcherItemSchema;
 exports.MatcherRowSchema = MatcherRowSchema;
 exports.MatcherWidgetJSONSchema = MatcherWidgetJSONSchema;
 exports.MixedValidationSchema = MixedValidationSchema;
+exports.NumberLineArrowItemSchema = NumberLineArrowItemSchema;
 exports.NumberLineCounterItemSchema = NumberLineCounterItemSchema;
+exports.NumberLineCursorItemSchema = NumberLineCursorItemSchema;
 exports.NumberLineHighlightItemSchema = NumberLineHighlightItemSchema;
 exports.NumberLineItemSchema = NumberLineItemSchema;
 exports.NumberLinePositionItemSchema = NumberLinePositionItemSchema;