@mathscan/math-exercise-engine 1.0.8 → 1.0.9

package/dist/index.mjs

@@ -34,6 +34,10 @@ const AST_TYPES = {
   TABLE_ROW: "TableRow",
   /** Cell within a table row */
   TABLE_CELL: "TableCell",
+  /** Number line layout block */
+  NUMBER_LINE_BLOCK: "NumberLineBlock",
+  /** A position marker on the number line */
+  NUMBER_LINE_POSITION: "NumberLinePosition",
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -86,6 +90,10 @@ const JSON_TYPES = {
   TABLE_ROW: "table-row",
   /** Cell within a table */
   TABLE_CELL: "table-cell",
+  /** Number line layout block */
+  NUMBER_LINE: "number-line",
+  /** Position marker within a number line */
+  NUMBER_LINE_POSITION: "number-line-position",
   // ═══════════════════════════════════════════════════════════════════════════
   // Widget Types
   // ═══════════════════════════════════════════════════════════════════════════
@@ -98,6 +106,7 @@ const JSON_TYPES = {
   /** Numeric keypad widget */
   NUMERIC_KEYPAD: "numeric-keypad"
 };
+const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
 const VALIDATION_MODES = {
   /** Simple answer matching validation */
   SIMPLE: "simple",
@@ -110,6 +119,9 @@ const INPUT_TYPES = {
   /** Numeric input (digits only) */
   NUMERIC: "numeric"
 };
+const NUMBER_LINE_STYLES = ["arrow-right", "arrow-left", "arrow-both", "line"];
+const SIDE_PAD = 7;
+const CSS_VAR_SIDE_PAD = "--nl-side-pad";
 const Newline = createToken({
   name: "Newline",
   pattern: /\r?\n/,
@@ -183,6 +195,14 @@ const NUMERIC_INPUT = createToken({
   name: "NUMERIC_INPUT",
   pattern: /NUMERIC_INPUT/
 });
+const NUMBER_LINE = createToken({
+  name: "NUMBER_LINE",
+  pattern: /NUMBER_LINE/
+});
+const POSITION = createToken({
+  name: "POSITION",
+  pattern: /POSITION/
+});
 const TABLE = createToken({
   name: "TABLE",
   pattern: /TABLE/
@@ -297,6 +317,8 @@ const allTokens = [
   WIDGET_ANSWER,
   W_N_I,
   NUMERIC_INPUT,
+  NUMBER_LINE,
+  POSITION,
   TABLE,
   ROW,
   CELL,
@@ -386,14 +408,14 @@ const MathExerciseLexer = new Lexer(allTokens, {
   positionTracking: "full"
 });
 function tokenize(input) {
-  const result = MathExerciseLexer.tokenize(input);
+  const result = MathExerciseLexer.tokenize(input.replace(/\u00A0/g, " "));
   if (result.errors.length > 0) {
     throw new LexerError(result.errors);
   }
   return result.tokens;
 }
 function tokenizeSafe(input) {
-  const result = MathExerciseLexer.tokenize(input);
+  const result = MathExerciseLexer.tokenize(input.replace(/\u00A0/g, " "));
   return {
     tokens: result.tokens,
     errors: result.errors
@@ -451,6 +473,10 @@ class MathExerciseParser extends CstParser {
           GATE: this.BACKTRACK(this.radioButtons),
           ALT: () => this.SUBRULE(this.radioButtons)
         },
+        {
+          GATE: this.BACKTRACK(this.numberLine),
+          ALT: () => this.SUBRULE(this.numberLine)
+        },
         { ALT: () => this.SUBRULE(this.line) }
       ]);
     });
@@ -555,6 +581,79 @@ class MathExerciseParser extends CstParser {
         ]);
       });
     });
+    this.numberLine = this.RULE("numberLine", () => {
+      this.MANY(() => {
+        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.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR4([
+          { ALT: () => this.CONSUME3(Space) },
+          { ALT: () => this.CONSUME3(Newline) }
+        ]);
+      });
+      this.MANY4(() => {
+        this.SUBRULE(this.position);
+      });
+      this.CONSUME(RBrace);
+      this.MANY5(() => {
+        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.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.line = this.RULE("line", () => {
       this.MANY(() => {
         this.CONSUME(Space);
@@ -917,6 +1016,71 @@ function isTextBlock(value) {
 function isLineBlock(value) {
   return LineBlockSchema.safeParse(value).success;
 }
+const NumberLinePositionSchema = z.object({
+  type: z.literal(AST_TYPES.NUMBER_LINE_POSITION),
+  value: z.number(),
+  inlines: z.array(InlineNodeSchema).min(1)
+});
+function createNumberLinePosition(value, inlines) {
+  const hasRealContent = inlines.some((n) => n.type !== AST_TYPES.SPACE);
+  if (!hasRealContent) {
+    throw new Error(`POSITION[value=${value}]: content cannot be empty or whitespace only`);
+  }
+  const inputs = inlines.filter((i) => i.type === AST_TYPES.INLINE_INPUT);
+  if (inputs.length > 1) {
+    throw new Error(
+      `POSITION[value=${value}]: only one input widget is allowed, got ${inputs.length}`
+    );
+  }
+  return NumberLinePositionSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_POSITION,
+    value,
+    inlines
+  });
+}
+const NumberLineBlockSchema = z.object({
+  type: z.literal(AST_TYPES.NUMBER_LINE_BLOCK),
+  min: z.number(),
+  max: z.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, {
+    errorMap: () => ({
+      message: `NUMBER_LINE: style must be one of ${NUMBER_LINE_STYLES.join(", ")}`
+    })
+  }).optional(),
+  positions: z.array(NumberLinePositionSchema)
+}).refine((data) => data.min < data.max, {
+  message: "NUMBER_LINE: min must be less than max"
+}).superRefine((data, ctx) => {
+  const seen = /* @__PURE__ */ new Set();
+  for (const pos of data.positions) {
+    if (pos.value < data.min || pos.value > data.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: POSITION value (${pos.value}) must be within [${data.min}, ${data.max}]`
+      });
+    }
+    if (seen.has(pos.value)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `NUMBER_LINE: duplicate POSITION value (${pos.value})`
+      });
+    }
+    seen.add(pos.value);
+  }
+});
+function createNumberLineBlock(min, max, positions, step, minorTicks, style) {
+  return NumberLineBlockSchema.parse({
+    type: AST_TYPES.NUMBER_LINE_BLOCK,
+    min,
+    max,
+    step,
+    minorTicks,
+    style,
+    positions
+  });
+}
 const TableCellSchema = z.object({
   type: z.literal(AST_TYPES.TABLE_CELL),
   colspan: z.number().int().positive().optional(),
@@ -1031,7 +1195,7 @@ function isExpressionValidation(value) {
 function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
-const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema]);
+const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema]);
 const ExerciseDocumentSchema = z.object({
   type: z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
@@ -1081,6 +1245,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   contentBlock(ctx) {
     if (ctx.table) return this.visit(ctx.table);
     if (ctx.radioButtons) return this.visit(ctx.radioButtons);
+    if (ctx.numberLine) return this.visit(ctx.numberLine);
     if (ctx.line) return this.visit(ctx.line);
     throw new Error("Unknown content block");
   }
@@ -1111,6 +1276,31 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     return createTableCell(inlines, colspan);
   }
   // ═══════════════════════════════════════════════════════════════════════════
+  // Number Line Block
+  // ═══════════════════════════════════════════════════════════════════════════
+  numberLine(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.min === void 0 || params.max === void 0) {
+      throw new Error("NUMBER_LINE requires parameters: min and max");
+    }
+    const min = Number(params.min);
+    const max = Number(params.max);
+    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 positions = ctx.position ? ctx.position.map((p) => this.visit(p)) : [];
+    return createNumberLineBlock(min, max, positions, step, minorTicks, style);
+  }
+  position(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (params.value === void 0) {
+      throw new Error("POSITION requires parameter: value");
+    }
+    const value = Number(params.value);
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((elem) => this.visit(elem)) : [];
+    return createNumberLinePosition(value, inlines);
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
   // Line Block
   // ═══════════════════════════════════════════════════════════════════════════
   line(ctx) {
@@ -1411,7 +1601,8 @@ const LayoutItemSchema = z.lazy(
     LinebreakSchema,
     GroupItemSchema,
     OperatorItemSchema,
-    TableItemSchema
+    TableItemSchema,
+    NumberLineItemSchema
   ])
 );
 const GroupItemSchema = z.object({
@@ -1436,6 +1627,22 @@ const TableItemSchema = z.object({
   cols: z.number().int().positive(),
   rows: z.array(TableRowItemSchema)
 });
+const NumberLinePositionItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.NUMBER_LINE_POSITION),
+  value: z.number(),
+  content: z.array(z.lazy(() => LayoutItemSchema))
+});
+const NumberLineItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.NUMBER_LINE),
+  min: z.number(),
+  max: z.number(),
+  step: z.number().positive(),
+  minorTicks: z.number().int().nonnegative().optional(),
+  style: z.enum(NUMBER_LINE_STYLES).optional(),
+  positions: z.array(NumberLinePositionItemSchema)
+});
 const StringInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.STRING),
@@ -1507,7 +1714,7 @@ function isQuestionText(item) {
 function isTextItem$1(item) {
   return item.type === JSON_TYPES.TEXT;
 }
-function isWidgetRef(item) {
+function isWidgetRef$1(item) {
   return item.type === JSON_TYPES.WIDGET_REF;
 }
 function isHighlightedText(item) {
@@ -1576,6 +1783,8 @@ function toJSON(ast) {
   for (const block of ast.lines) {
     if (block.type === AST_TYPES.TABLE_BLOCK) {
       layout.push(transformTable(block, idGenerator));
+    } else if (block.type === AST_TYPES.NUMBER_LINE_BLOCK) {
+      layout.push(transformNumberLine(block, idGenerator));
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       const radioBlock = block;
       layout.push({
@@ -1661,10 +1870,36 @@ function collectAllInlines(blocks) {
           result.push(...cell.inlines);
         }
       }
+    } else if (block.type === AST_TYPES.NUMBER_LINE_BLOCK) {
+      for (const position of block.positions) {
+        result.push(...position.inlines);
+      }
     }
   }
   return result;
 }
+function transformNumberLine(numberLine, idGenerator) {
+  const positions = numberLine.positions.map((pos) => {
+    const content = pos.inlines.map((inline) => transformInline(inline, idGenerator));
+    return {
+      id: idGenerator.generate(JSON_TYPES.NUMBER_LINE_POSITION),
+      type: JSON_TYPES.NUMBER_LINE_POSITION,
+      value: pos.value,
+      content
+    };
+  });
+  const item = {
+    id: idGenerator.generate(JSON_TYPES.NUMBER_LINE),
+    type: JSON_TYPES.NUMBER_LINE,
+    min: numberLine.min,
+    max: numberLine.max,
+    step: numberLine.step,
+    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) {
   const rows = table.rows.map((row) => {
     const cells = row.cells.map((cell) => {
@@ -2146,6 +2381,8 @@ function validateInputFormats(exercise, userInputs) {
 const DragItemTypeSchema = z.enum([
   "drag-option",
   // Draggable answer options
+  "placed-chip",
+  // Chip already placed on a number-line axis (re-drag)
   "ruler-handle",
   // Future: ruler endpoints
   "shape",
@@ -5857,7 +6094,8 @@ const ExerciseDndProvider = ({
   }, [dropHandlers]);
   const handleDragStart = (event) => {
     const { active } = event;
-    const item = active.data.current;
+    const raw = active.data.current;
+    const item = raw?.type === "placed-chip" ? { id: String(active.id), type: "placed-chip", data: { label: raw.label } } : raw;
     setActiveItem(item);
   };
   const handleDragEnd = (event) => {
@@ -5908,6 +6146,10 @@ const DragOverlayContent = ({ item }) => {
       const data = item.data;
       return /* @__PURE__ */ jsx("div", { className: "drag-overlay-option", children: data.label });
     }
+    case "placed-chip": {
+      const label = item.data?.label ?? "";
+      return /* @__PURE__ */ jsx("div", { className: "drag-overlay-option", children: label });
+    }
     default:
       return null;
   }
@@ -6366,6 +6608,334 @@ const WidgetRenderer = ({
   }
   return null;
 };
+const cleanFloat = (n) => parseFloat(n.toFixed(10));
+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));
+};
+const pixelToValue = (chipCenterX, axisLeft, axisWidth, min, max) => {
+  const relX = (chipCenterX - axisLeft) / axisWidth;
+  const fraction = (relX - SIDE_PAD / 100) / (1 - 2 * SIDE_PAD / 100);
+  const clamped = Math.max(0, Math.min(1, fraction));
+  return min + clamped * (max - min);
+};
+const getMajorTicks = (min, max, step) => {
+  if (step <= 0 || max <= min) return [min, max];
+  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);
+  return ticks;
+};
+const getMinorTickValues = (majorTicks, minorTicks) => {
+  if (minorTicks <= 0) return [];
+  const result = [];
+  majorTicks.slice(0, -1).forEach((tick, idx) => {
+    const next = majorTicks[idx + 1];
+    const interval = next - tick;
+    for (let j = 1; j <= minorTicks; j++) {
+      result.push(cleanFloat(tick + j / (minorTicks + 1) * interval));
+    }
+  });
+  return result;
+};
+const getSnapTicks = (majorTicks, minorTicks) => [
+  ...majorTicks,
+  ...getMinorTickValues(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);
+};
+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 { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: widgetId,
+    data: { type: "placed-chip", widgetId, label }
+  });
+  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
+        }
+      )
+    }
+  );
+};
+const FreeDragAxis = ({
+  axisDropId,
+  min,
+  max,
+  minorTicks,
+  majorTicks,
+  showArrowLeft,
+  showArrowRight,
+  positions,
+  values,
+  onChange
+}) => {
+  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());
+  useEffect(() => {
+    setDropLabels((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      for (const [wid] of next) {
+        if (!values[wid]) {
+          next.delete(wid);
+          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;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [values]);
+  const { setNodeRef, isOver } = useDroppable({ id: axisDropId });
+  const mergedRef = useCallback((node) => {
+    axisRef.current = node;
+    setNodeRef(node);
+  }, [setNodeRef]);
+  const snapFromEvent = useCallback((translated) => {
+    if (!axisRef.current) return null;
+    const axisRect = axisRef.current.getBoundingClientRect();
+    const chipCenterX = translated.left + translated.width / 2;
+    const raw = pixelToValue(chipCenterX, axisRect.left, axisRect.width, min, max);
+    return snapToNearest(raw, snapTicks);
+  }, [min, max, snapTicks]);
+  useDndMonitor({
+    onDragEnd(event) {
+      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 data = event.active.data.current;
+      if (data?.type === "placed-chip") {
+        const widgetId = 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));
+        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 (!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));
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      className: `number-line-axis-row nl-axis-drag-mode${isOver ? " nl-axis-drag-over" : ""}`,
+      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(
+          "div",
+          {
+            className: "number-line-minor-tick",
+            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) => {
+          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;
+          return /* @__PURE__ */ jsx(
+            PlacedChip,
+            {
+              widgetId: wid,
+              label,
+              leftPercent: toPercent(dropPos, min, max),
+              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;
+                });
+              }
+            },
+            wid
+          );
+        })
+      ]
+    }
+  );
+};
+const NumberLineRenderer = ({
+  item,
+  widgets,
+  values,
+  droppedInputs,
+  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 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)
+    );
+  }, [isDragMode, positions]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `number-line${isDragMode ? " number-line--drag-mode" : ""}`,
+      style: { [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%` },
+      role: "img",
+      "aria-label": `Number line from ${min} to ${max}`,
+      children: [
+        !isDragMode && /* @__PURE__ */ jsx("div", { className: "number-line-content-row", children: positions.map((pos) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "number-line-position-content",
+            style: { left: `${toPercent(pos.value, min, max)}%` },
+            children: pos.content.map((subItem) => /* @__PURE__ */ jsx(
+              LayoutRenderer,
+              {
+                item: subItem,
+                widgets,
+                values,
+                droppedInputs,
+                onChange,
+                onInputFocus
+              },
+              subItem.id
+            ))
+          },
+          pos.id
+        )) }),
+        isDragMode ? /* @__PURE__ */ jsx(
+          FreeDragAxis,
+          {
+            axisDropId: `${item.id}--nl-axis`,
+            min,
+            max,
+            minorTicks,
+            majorTicks,
+            showArrowLeft,
+            showArrowRight,
+            positions,
+            values,
+            onChange
+          }
+        ) : /* @__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}`
+          );
+        }) })
+      ]
+    }
+  );
+};
 function isArabic(text) {
   return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(text);
 }
@@ -6533,6 +7103,18 @@ const LayoutRenderer = ({
         },
         cell.id
       )) }, row.id)) }) }) });
+    case JSON_TYPES.NUMBER_LINE:
+      return /* @__PURE__ */ jsx(
+        NumberLineRenderer,
+        {
+          item,
+          widgets,
+          values,
+          droppedInputs,
+          onChange,
+          onInputFocus
+        }
+      );
     default:
       return null;
   }
@@ -6620,6 +7202,20 @@ const ExerciseRenderer = forwardRef(({
         });
         continue;
       }
+      if (item.type === JSON_TYPES.NUMBER_LINE) {
+        if (currentGroup.length > 0) {
+          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+          const subGroups = groupLineItems(currentGroup);
+          groups.push({ items: currentGroup, hasArabic, subGroups });
+          currentGroup = [];
+        }
+        groups.push({
+          items: [item],
+          hasArabic: false,
+          subGroups: []
+        });
+        continue;
+      }
       if (item.type === JSON_TYPES.LINEBREAK) {
         if (currentGroup.length > 0) {
           const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
@@ -6871,7 +7467,7 @@ export {
   isToolNode,
   isValidExpression,
   isValidationNode,
-  isWidgetRef,
+  isWidgetRef$1 as isWidgetRef,
   parse,
   parseSafe,
   renderExercise,