@mathscan/math-exercise-engine 1.1.8 → 1.1.10

package/dist/style.css

@@ -1206,6 +1206,8 @@ th.exercise-table-cell {
   --nl-visual-fraction-size: clamp(5.5rem, 18vw, 8rem);
   /* Visual gap between end ticks and arrowheads — pure CSS, no effect on calculations */
   --nl-arrow-gap: 8px;
+  --nl-arrow-arc-color: var(--exercise-danger, #D6234D);
+  --nl-arrow-arc-stroke-width: 1.75;
 }
 
 /* ========================================
@@ -1230,7 +1232,39 @@ th.exercise-table-cell {
 }
 
 /* ========================================
-   ROW 1 — POSITION CONTENT (inputs / labels above axis)
+   ROW 1 — OVERLAYS ATTACHED TO AXIS
+   ======================================== */
+
+.number-line-overlays-row {
+  position: relative;
+  width: 100%;
+  min-height: max(
+    var(--nl-position-content-min-height),
+    var(--nl-position-content-height),
+    var(--nl-arrow-arcs-row-height, 0px)
+  );
+  margin-top: 0.1rem;
+}
+
+.number-line-overlays-row .number-line-content-row,
+.number-line-overlays-row .number-line-arrow-arcs-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-top: 0;
+}
+
+/* The two overlays share the same axis-anchored box. Position content holds the
+   interactive inputs, so it takes pointer/paint priority over arc annotations —
+   made explicit here rather than relying on DOM sibling order. */
+
+.number-line-overlays-row .number-line-arrow-arcs-row { z-index: 0; }
+
+.number-line-overlays-row .number-line-content-row { z-index: 1; }
+
+/* ========================================
+   POSITION CONTENT (inputs / labels above axis)
    ======================================== */
 
 .number-line-content-row {
@@ -1255,7 +1289,64 @@ th.exercise-table-cell {
 }
 
 /* ========================================
-   ROW 2 — AXIS (track + ticks + arrows + dots)
+   ARROW ANNOTATION ARCS
+   ======================================== */
+
+.number-line-arrow-arcs-row {
+  position: relative;
+  width: 100%;
+  margin-top: 0.1rem;
+}
+
+.number-line-arrow-arc {
+  position: absolute;
+  height: 80px;
+  pointer-events: none;
+}
+
+.number-line-arrow-arc-svg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 64px;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.number-line-arrow-arc-path {
+  fill: none;
+  stroke: var(--nl-arrow-arc-color);
+  stroke-width: var(--nl-arrow-arc-stroke-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.number-line-arrow-arc-head {
+  fill: var(--nl-arrow-arc-color);
+  stroke: none;
+}
+
+.number-line-arrow-arc-label {
+  position: absolute;
+  /* top is always set via inline style from getArrowArcLabelTop() */
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--nl-arrow-arc-color);
+  font-size: calc(var(--exercise-font-size) * 0.8);
+  font-weight: var(--exercise-font-weight-bold, 600);
+  line-height: 1.1;
+  pointer-events: auto;
+  /* Centre content horizontally; allow LayoutRenderer to size naturally */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ========================================
+   ROW 3 — AXIS (track + ticks + arrows + dots)
    ======================================== */
 
 .number-line-axis-row {
@@ -1264,6 +1355,10 @@ th.exercise-table-cell {
   height: 2rem;
 }
 
+.number-line-axis-row:has(.number-line-cursor-label) {
+  height: 3rem;
+}
+
 /* In drag mode, chip zone is handled by .number-line--drag-mode padding-top on root */
 
 /* Horizontal track line — spans [--nl-side-pad, 100% - --nl-side-pad] by default */
@@ -1543,7 +1638,7 @@ th.exercise-table-cell {
 /* Axis glow on drag-over intentionally disabled — axis stays neutral */
 
 /* ========================================
-   ROW 3 — NUMERIC TICK LABELS
+   ROW 4 — NUMERIC TICK LABELS
    ======================================== */
 
 .number-line-labels-row {
@@ -1563,7 +1658,7 @@ th.exercise-table-cell {
 }
 
 /* ========================================
-   HIGHLIGHT BANDS
+   ROW 5 — HIGHLIGHT BANDS / LABELS
    ======================================== */
 
 /* A coloured band spanning [from%, to%] on the axis row */
@@ -1598,84 +1693,197 @@ th.exercise-table-cell {
   pointer-events: none;
 }
 
+/* ========================================
+   CURSOR BALL
+   ======================================== */
+
+/* Filled range between the cursor's initial value and its current position */
+
+.number-line-cursor-fill {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 6px;
+  background-color: var(--nl-cursor-color, var(--exercise-accent, #705DC0));
+  opacity: 0.28;
+  border-radius: 999px;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* The ball rendered at the cursor's current value */
+
+.number-line-cursor-ball {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 2.5px solid var(--nl-cursor-color, var(--exercise-accent, #705DC0));
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+  pointer-events: auto;
+  cursor: grab;
+  z-index: 4;
+  touch-action: none; /* required for pointer capture on mobile */
+  transition: box-shadow 0.12s ease, transform 0.12s ease;
+}
+
+.number-line-cursor-ball:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+  transform: translate(-50%, -50%) scale(1.15);
+}
+
+.number-line-cursor-ball--dragging {
+  cursor: grabbing;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
+  transform: translate(-50%, -50%) scale(1.25);
+  transition: none;
+}
+
+@keyframes number-line-cursor-jiggle {
+  0%, 100% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); }
+  20%      { transform: translate(-50%, -50%) translateX(-5px) rotate(-2deg); }
+  40%      { transform: translate(-50%, -50%) translateX(5px) rotate(2deg); }
+  60%      { transform: translate(-50%, -50%) translateX(-3px) rotate(-1deg); }
+  80%      { transform: translate(-50%, -50%) translateX(3px) rotate(1deg); }
+}
+
+.number-line-cursor-ball--jiggle {
+  animation: number-line-cursor-jiggle 0.55s ease-in-out 0.4s 2 both;
+}
+
+.number-line-cursor-label {
+  position: absolute;
+  top: calc(50% - 0.6rem);
+  display: block;
+  max-width: min(8rem, 26vw);
+  transform: translate(-50%, -100%);
+  overflow: hidden;
+  color: var(--nl-cursor-color, var(--exercise-text-light, #555));
+  font-size: calc(var(--exercise-font-size) * 0.75);
+  font-weight: var(--exercise-font-weight-bold, 600);
+  line-height: 1.1;
+  pointer-events: none;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  z-index: 5;
+}
+
+/* Validation feedback — mirrors the correct/incorrect axis colors */
+
+.number-line-cursor-ball--correct,
+.number-line-cursor-fill--correct,
+.number-line-cursor-label--correct {
+  --nl-cursor-color: #43B925;
+}
+
+.number-line-cursor-ball--incorrect,
+.number-line-cursor-fill--incorrect,
+.number-line-cursor-label--incorrect {
+  --nl-cursor-color: #D6234D;
+}
+
+.number-line-cursor-ball:focus-visible {
+  outline: 2px solid var(--nl-cursor-color, var(--exercise-accent, #705DC0));
+  outline-offset: 3px;
+}
+
 /* ========================================
    COUNTER UI
+   ROW 6 — COUNTER UI
    ======================================== */
 
 .number-line-counter {
+  /* ── Color tokens (override to restyle) ── */
+  --nl-counter-bg:           #FFFFFF;
+  --nl-counter-border-color: #FFCA76;
+  --nl-counter-value-color:  #705DC0;
+  --nl-counter-btn-bg:       #E7E2FF;
+  --nl-counter-btn-color:    #705DC0;
+
+  /* ── Layout ── */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-  margin-top: 0.5rem;
+  margin: 0.5rem auto 0;
   padding: 0.4rem 0.75rem;
   width: fit-content;
-  margin-left: auto;
-  margin-right: auto;
-  background: var(--exercise-bg, white);
-  border: 1px solid var(--exercise-border, #ddd);
-  border-radius: 8px;
+  box-sizing: border-box;
+  background: var(--nl-counter-bg);
+  border: 1px solid var(--nl-counter-border-color);
+  border-radius: 9px;
 }
 
-/* Inner row: − value + buttons as a cohesive stepper */
+.number-line-counter-label {
+  font-size: calc(var(--exercise-font-size) * 0.85);
+  color: var(--exercise-text-light, #555);
+  text-align: center;
+}
 
 .number-line-counter-controls {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-}
-
-.number-line-counter-label {
-  font-size: calc(var(--exercise-font-size) * 0.85);
-  color: var(--exercise-text-light, #555);
-  text-align: center;
+  gap: 0.75rem;
 }
 
 .number-line-counter-value {
-  font-size: calc(var(--exercise-font-size) * 1.15);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--exercise-text, #333);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-width: 2ch;
-  text-align: center;
+  font-size: calc(var(--exercise-font-size) * 2);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
   line-height: 1;
+  text-align: center;
+  color: var(--nl-counter-value-color);
 }
 
 .number-line-counter-btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 36px;
-  min-height: 36px;
-  width: 36px;
-  height: 36px;
-  border: 1.5px solid var(--exercise-accent, #705DC0);
-  border-radius: 50%;
-  background: transparent;
-  color: var(--exercise-accent, #705DC0);
-  font-size: 1.1rem;
-  font-weight: 500;
-  line-height: 1;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 9px;
+  background: var(--nl-counter-btn-bg);
+  color: var(--nl-counter-btn-color);
+  font-size: 0;
   cursor: pointer;
-  transition: all 0.12s ease;
+  transition: filter 0.12s ease, transform 0.12s ease;
   -webkit-tap-highlight-color: transparent;
 }
 
-.number-line-counter-btn:hover:not(:disabled) {
-  background: var(--exercise-accent, #705DC0);
-  color: white;
-}
+.number-line-counter-btn:hover:not(:disabled)  { filter: brightness(0.94); }
 
-.number-line-counter-btn:active:not(:disabled) {
-  transform: scale(0.93);
-}
+.number-line-counter-btn:active:not(:disabled) { transform: scale(0.93); }
 
-.number-line-counter-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
+.number-line-counter-btn:disabled              { opacity: 0.45; cursor: not-allowed; }
+
+/* ── Icon pseudo-elements (horizontal bar shared; vertical bar on + only) ── */
+
+.number-line-counter-btn::before,
+.number-line-counter-btn::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  background: currentColor;
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
 }
 
+.number-line-counter-btn::before                    { width: 29px; height: 7px; }
+
+.number-line-counter-btn[aria-label='Increase']::after { width: 7px;  height: 29px; }
+
 /* ========================================
    ACCESSIBILITY — FOCUS-VISIBLE RINGS  (item 6)
    ======================================== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "A DSL parser and validator for math exercises - transforms text-based exercise definitions into structured AST and JSON",
   "main": "dist/index.js",
   "module": "dist/index.mjs",