@mathscan/math-exercise-engine 1.0.16 → 1.1.0

package/dist/style.css

@@ -107,12 +107,13 @@
      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);
+  --nl-axis-color:       #705DC0;
+  --nl-highlight-blue:   #007ACC;
+  --nl-highlight-red:    #EF4444;
+  --nl-highlight-green:  #22C55E;
+  --nl-highlight-orange: #F97316;
+  --nl-highlight-purple: #705DC0;
+  --nl-highlight-yellow: #FFD700;
 }
 
 /* Layout & Structure */
@@ -238,6 +239,10 @@
   unicode-bidi: plaintext;
 }
 
+.text-item-number {
+  font-variant-numeric: tabular-nums;
+}
+
 .text-item-arabic {
   /* Direction is handled by parent text-group with unicode-bidi: plaintext */
 }
@@ -707,7 +712,6 @@ th.exercise-table-cell {
 }
 
 .fraction-input {
-  width: 3.2em !important;
   padding: 0.15em 0.2em;
   font-size: 0.9em;
   text-align: center;
@@ -758,22 +762,20 @@ th.exercise-table-cell {
 }
 
 .visual-fraction-widget__parts--horizontal {
-  grid-template-columns: repeat(var(--visual-fraction-divisions, 1), var(--visual-fraction-part-size));
+  grid-template-columns: repeat(var(--visual-fraction-divisions, 1), 1fr);
   grid-template-rows: var(--visual-fraction-part-size);
-  width: max-content;
+  width: var(--visual-fraction-size);
 }
 
 .visual-fraction-widget__parts--vertical {
-  grid-template-columns: 1fr;
-  grid-template-rows: repeat(var(--visual-fraction-divisions, 1), var(--visual-fraction-part-size));
-  width: var(--visual-fraction-part-size);
-  height: max-content;
+  grid-template-columns: var(--visual-fraction-part-size);
+  grid-template-rows: repeat(var(--visual-fraction-divisions, 1), 1fr);
+  height: var(--visual-fraction-size);
 }
 
 .visual-fraction-widget__part {
-  aspect-ratio: 1;
-  width: var(--visual-fraction-part-size);
-  height: var(--visual-fraction-part-size);
+  min-width: 0;
+  min-height: 0;
   background: var(--visual-fraction-empty-bg);
   color: var(--exercise-text, #333);
   transition: background 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
@@ -858,8 +860,10 @@ th.exercise-table-cell {
 }
 
 .visual-fraction-widget--grid .visual-fraction-widget__parts {
-  grid-template-columns: repeat(var(--visual-fraction-grid-cols, 3), var(--visual-fraction-part-size));
-  width: max-content;
+  grid-template-columns: repeat(var(--visual-fraction-grid-cols, 3), 1fr);
+  grid-template-rows: repeat(var(--visual-fraction-grid-rows, 3), 1fr);
+  width: var(--visual-fraction-size);
+  height: var(--visual-fraction-size);
 }
 
 .visual-fraction-widget__label {
@@ -1024,7 +1028,7 @@ th.exercise-table-cell {
   right: var(--nl-side-pad, 7%);
   top: 50%;
   height: 2px;
-  background-color: var(--exercise-text, #333);
+  background-color: var(--nl-axis-color);
   transform: translateY(-50%);
   /* transition on base state so both enter and exit are smooth */
   transition: all 0.2s ease;
@@ -1065,7 +1069,7 @@ th.exercise-table-cell {
   transform: translateY(-50%);
   border-top:    5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-left:   8px solid var(--exercise-text, #333);
+  border-left:   8px solid var(--nl-axis-color);
 }
 
 /* Left-pointing arrow — tip extends just past the left end of the track, offset outward by --nl-arrow-gap */
@@ -1075,7 +1079,7 @@ th.exercise-table-cell {
   transform: translate(-100%, -50%);
   border-top:    5px solid transparent;
   border-bottom: 5px solid transparent;
-  border-right:  8px solid var(--exercise-text, #333);
+  border-right:  8px solid var(--nl-axis-color);
 }
 
 /* Geometric line style — arrows reach the full container edges */
@@ -1096,7 +1100,8 @@ th.exercise-table-cell {
   transform: translate(-50%, -50%);
   width: 2px;
   height: 14px;
-  background-color: var(--exercise-text, #333);
+  background-color: var(--nl-axis-color);
+  z-index: 2;
   transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
 }
 
@@ -1108,7 +1113,8 @@ th.exercise-table-cell {
   transform: translate(-50%, -50%);
   width: 1px;
   height: 8px;
-  background-color: var(--exercise-text-light, #555);
+  background-color: var(--nl-axis-color);
+  z-index: 2;
   transition: transform 0.1s ease, background-color 0.1s ease, width 0.1s ease;
 }
 
@@ -1306,7 +1312,7 @@ th.exercise-table-cell {
   transform: translateX(-50%);
   /** Slightly smaller than base font — same pattern as secondary text in the app */
   font-size: calc(var(--exercise-font-size) * 0.8);
-  color: var(--exercise-text-light, #555);
+  color: var(--nl-axis-color);
   white-space: nowrap;
 }
 
@@ -1318,11 +1324,12 @@ th.exercise-table-cell {
 
 .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;
+  top: 50%;
+  height: 6px;
+  transform: translateY(-50%);
+  background-color: var(--nl-highlight-color, var(--nl-highlight-purple, #705DC0));
+  border-radius: 0;
+  z-index: 1;
   pointer-events: none;
 }
 

package/package.json

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