@mathscan/math-exercise-engine 1.0.10 → 1.0.12

package/dist/style.css

@@ -100,6 +100,17 @@
 
   /** Border width for inputs and buttons */
   --exercise-border-width: 2px;
+
+  /* ========================================
+     NUMBER LINE — HIGHLIGHT COLORS
+     ======================================== */
+
+  --nl-highlight-blue:   rgba(0, 122, 204, 0.25);
+  --nl-highlight-red:    rgba(239, 68, 68, 0.25);
+  --nl-highlight-green:  rgba(34, 197, 94, 0.25);
+  --nl-highlight-orange: rgba(249, 115, 22, 0.25);
+  --nl-highlight-purple: rgba(112, 93, 192, 0.25);
+  --nl-highlight-yellow: rgba(255, 215, 0, 0.35);
 }
 
 /* Layout & Structure */
@@ -574,6 +585,8 @@ td.exercise-table-cell, th.exercise-table-cell {
   margin-bottom: var(--exercise-margin-bottom);
   user-select: none;
   --nl-chip-zone-height: 3rem;
+  /* Visual gap between end ticks and arrowheads — pure CSS, no effect on calculations */
+  --nl-arrow-gap: 8px;
 }
 
 /* Chip zone: push the axis row down so chips overflowing upward
@@ -615,7 +628,7 @@ td.exercise-table-cell, th.exercise-table-cell {
 
 /* 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] */
+/* Horizontal track line — spans [--nl-side-pad, 100% - --nl-side-pad] by default */
 
 .number-line-track {
   position: absolute;
@@ -629,6 +642,25 @@ td.exercise-table-cell, th.exercise-table-cell {
   transition: all 0.2s ease;
 }
 
+/* Extend the track toward the arrow only when the arrow is present —
+   keeps the track flush with the last tick when no arrow exists on that side */
+
+.number-line-axis-row:has(.number-line-arrow-left) .number-line-track {
+  left: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
+}
+
+.number-line-axis-row:has(.number-line-arrow-right) .number-line-track {
+  right: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
+}
+
+/* Geometric line style — track extends to the full container edges
+   so the axis looks like an infinite line, not a closed segment */
+
+.number-line--style-line .number-line-track {
+  left: 0;
+  right: 0;
+}
+
 /* ── Arrowheads (CSS border-triangle technique) ── */
 
 .number-line-arrow {
@@ -638,26 +670,36 @@ td.exercise-table-cell, th.exercise-table-cell {
   height: 0;
 }
 
-/* Right-pointing arrow — base sits at the right end of the track */
+/* Right-pointing arrow — base sits at the right end of the track, offset outward by --nl-arrow-gap */
 
 .number-line-arrow-right {
-  left: calc(100% - var(--nl-side-pad, 7%));
+  left: calc(100% - var(--nl-side-pad, 7%) + var(--nl-arrow-gap, 8px));
   transform: translateY(-50%);
   border-top:    5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left:   8px solid var(--exercise-text, #333);
 }
 
-/* Left-pointing arrow — tip extends just past the left end of the track */
+/* Left-pointing arrow — tip extends just past the left end of the track, offset outward by --nl-arrow-gap */
 
 .number-line-arrow-left {
-  left: var(--nl-side-pad, 7%);
+  left: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
   transform: translate(-100%, -50%);
   border-top:    5px solid transparent;
   border-bottom: 5px solid transparent;
   border-right:  8px solid var(--exercise-text, #333);
 }
 
+/* Geometric line style — arrows reach the full container edges */
+
+.number-line--style-line .number-line-arrow-right {
+  left: calc(100%);
+}
+
+.number-line--style-line .number-line-arrow-left {
+  left: 0;
+}
+
 /* ── Major ticks ── */
 
 .number-line-major-tick {
@@ -667,6 +709,7 @@ td.exercise-table-cell, th.exercise-table-cell {
   width: 2px;
   height: 14px;
   background-color: var(--exercise-text, #333);
+  transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
 }
 
 /* ── Minor ticks ── */
@@ -678,6 +721,7 @@ td.exercise-table-cell, th.exercise-table-cell {
   width: 1px;
   height: 8px;
   background-color: var(--exercise-text-light, #555);
+  transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
 }
 
 /* ── Position marker dots ── */
@@ -686,12 +730,11 @@ td.exercise-table-cell, th.exercise-table-cell {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
-  width: 16px;
-  height: 16px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
-  background-color: var(--exercise-primary, #007acc);
-  /** Shadow: same 0.2 opacity convention as .drag-option.selected */
-  box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
+  background-color: var(--exercise-accent, #705DC0);
+  box-shadow: 0 1px 3px rgba(112, 93, 192, 0.25);
   z-index: 2;
 }
 
@@ -705,10 +748,20 @@ td.exercise-table-cell, th.exercise-table-cell {
  *
  * Structure:
  *   .number-line-placed-chip          — absolute wrapper, positioned by left%
- *     .number-line-placed-chip-btn    — the visible chip button
+ *     .number-line-placed-chip-inner  — flex row holding btn + X button
+ *       .number-line-placed-chip-btn  — the visible chip button (draggable)
+ *       .number-line-placed-chip-remove — ✕ badge (always visible)
  *     ::after pseudo                  — thin connector line down to the axis
  */
 
+/* Drop landing animation — subtle scale for professional feel */
+
+@keyframes nl-chip-land {
+  0%   { transform: translateX(-50%) scale(0.75); opacity: 0.6; }
+  60%  { transform: translateX(-50%) scale(1.06); opacity: 1;   }
+  100% { transform: translateX(-50%) scale(1);    opacity: 1;   }
+}
+
 .number-line-placed-chip {
   position: absolute;
   bottom: calc(50% + 2px);
@@ -721,48 +774,134 @@ td.exercise-table-cell, th.exercise-table-cell {
   pointer-events: none;
 }
 
+/* Play landing animation when class is toggled on by React */
+
+.nl-chip-landing {
+  animation: nl-chip-land 0.28s ease-out forwards;
+}
+
+/* Hide original chip while DragOverlay clone follows cursor — no ghost double */
+
+.nl-chip-dragging {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.nl-chip-dragging::after {
+  display: none;
+}
+
 /* Thin connector between chip and axis */
 
 .number-line-placed-chip::after {
   content: '';
   display: block;
-  width: 2px;
-  height: 12px;
-  background-color: var(--exercise-primary, #007acc);
-  margin-top: 2px;
+  width: 1.5px;
+  height: 10px;
+  background-color: var(--exercise-accent, #705DC0);
+  opacity: 0.5;
+  margin-top: 1px;
+}
+
+/* Item 3 — Inner flex row: position: relative so ✕ badge can be anchored inside */
+
+.number-line-placed-chip-inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  pointer-events: all;
+}
+
+/* ✕ badge: hidden by default, revealed on chip hover — clean, non-distracting */
+
+.number-line-placed-chip-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1.5px solid white;
+  background-color: var(--exercise-text-light, #555);
+  color: white;
+  font-size: 0.5rem;
+  font-weight: bold;
+  line-height: 1;
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.12s ease, background-color 0.12s ease;
+  pointer-events: all;
+  z-index: 1;
+  opacity: 0;
+}
+
+/* Show ✕ on chip hover or when badge itself has focus */
+
+.number-line-placed-chip-inner:hover .number-line-placed-chip-remove,
+.number-line-placed-chip-remove:focus-visible {
+  opacity: 1;
+}
+
+.number-line-placed-chip-remove:hover {
+  opacity: 1;
+  transform: scale(1.15);
+  background-color: var(--exercise-danger, #ef4444);
 }
 
 .number-line-placed-chip-btn {
   pointer-events: all;
-  background-color: var(--exercise-primary, #007acc);
+  background-color: var(--exercise-accent, #705DC0);
   color: white;
-  /** White inner border uses border-width token for consistency */
-  border: var(--exercise-border-width) solid white;
-  border-radius: var(--exercise-border-radius, 0.25rem);
-  padding: var(--exercise-input-padding, 0.375rem 0.625rem);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 6px 14px;
   font-size: var(--exercise-font-size, 0.875rem);
   font-weight: var(--exercise-font-weight-bold, 600);
   cursor: pointer;
-  /** Shadow: same convention as .drag-option.selected and .radio-option.selected */
-  box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
-  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(112, 93, 192, 0.25);
+  transition: all 0.15s ease;
   white-space: nowrap;
 }
 
 .number-line-placed-chip-btn:hover {
-  background-color: var(--exercise-danger, #ef4444);
-  /** Scale down like other interactive elements (consistent with .drag-option:active) */
-  transform: scale(0.98);
+  filter: brightness(1.08);
+  box-shadow: 0 3px 10px rgba(112, 93, 192, 0.35);
 }
 
-/* Axis highlight while a chip is hovering over it */
+/* Nearest snap tick highlights during drag — scaleY keeps layout intact */
+
+.number-line-major-tick.nl-tick-hover {
+  transform: translate(-50%, -50%) scaleY(1.5);
+  width: 2.5px;
+  background-color: var(--exercise-accent, #705DC0);
+}
 
-.nl-axis-drag-over .number-line-track {
-  background-color: var(--exercise-primary, #007acc);
-  /** Shadow: same 0.2 opacity convention */
-  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
+.number-line-minor-tick.nl-tick-hover {
+  transform: translate(-50%, -50%) scaleY(1.8);
+  width: 1.5px;
+  background-color: var(--exercise-accent, #705DC0);
 }
 
+/* Snap preview — static subtle dot at landing position */
+
+.nl-snap-preview {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: var(--exercise-accent, #705DC0);
+  opacity: 0.3;
+  pointer-events: none;
+  z-index: 2;
+  transition: left 0.06s ease;
+}
+
+/* Axis glow on drag-over intentionally disabled — axis stays neutral */
+
 /* ========================================
    ROW 3 — NUMERIC TICK LABELS
    ======================================== */
@@ -783,6 +922,130 @@ td.exercise-table-cell, th.exercise-table-cell {
   white-space: nowrap;
 }
 
+/* ========================================
+   HIGHLIGHT BANDS
+   ======================================== */
+
+/* A coloured band spanning [from%, to%] on the axis row */
+
+.number-line-highlight-band {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-color: var(--nl-highlight-color, var(--nl-highlight-blue, rgba(0, 122, 204, 0.25)));
+  border-radius: 2px;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Highlight label row — sits below tick labels, never overlaps inputs */
+
+.number-line-highlight-labels-row {
+  position: relative;
+  width: 100%;
+  height: 1.2rem;
+  margin-top: 0.1rem;
+}
+
+.number-line-highlight-label {
+  position: absolute;
+  transform: translateX(-50%);
+  font-size: calc(var(--exercise-font-size) * 0.75);
+  font-weight: var(--exercise-font-weight-bold, 600);
+  color: var(--exercise-text-light, #555);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* ========================================
+   COUNTER UI
+   ======================================== */
+
+.number-line-counter {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  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;
+}
+
+/* Inner row: − value + buttons as a cohesive stepper */
+
+.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;
+}
+
+.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);
+  min-width: 2ch;
+  text-align: center;
+  line-height: 1;
+}
+
+.number-line-counter-btn {
+  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;
+  cursor: pointer;
+  transition: all 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:active:not(:disabled) {
+  transform: scale(0.93);
+}
+
+.number-line-counter-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* ========================================
+   ACCESSIBILITY — FOCUS-VISIBLE RINGS  (item 6)
+   ======================================== */
+
+.number-line-placed-chip-btn:focus-visible,
+.number-line-placed-chip-remove:focus-visible,
+.number-line-counter-btn:focus-visible {
+  outline: 2px solid var(--exercise-accent, #705DC0);
+  outline-offset: 2px;
+}
+
 /**
  * Button & Action Styles
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "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",