@mathscan/math-exercise-engine 1.0.17 → 1.1.1

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 */
@@ -420,10 +421,6 @@ mark {
    DRAG OPTIONS
    ======================================== */
 
-.drag-options-container {
-  /* Container for drag options widget */
-}
-
 .drag-options {
   display: flex;
   justify-content: center;
@@ -736,10 +733,10 @@ th.exercise-table-cell {
   --visual-fraction-svg-line-width: 0.5px;
   --visual-fraction-gap: var(--visual-fraction-line-width);
   --visual-fraction-border-radius: 0;
-  --visual-fraction-border-color: #705DC0;
+  --visual-fraction-border-color: #705dc0;
   --visual-fraction-empty-bg: var(--exercise-bg, #fff);
-  --visual-fraction-hover-color: #E6E0FF;
-  --visual-fraction-part-color: #AE9CFF;
+  --visual-fraction-hover-color: #e6e0ff;
+  --visual-fraction-part-color: #ae9cff;
   --visual-fraction-part-text-color: #fff;
   --visual-fraction-label-color: var(--exercise-text-light, #555);
   display: inline-flex;
@@ -777,18 +774,21 @@ th.exercise-table-cell {
   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;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    filter 0.2s ease;
 }
 
-.visual-fraction-widget__part[role="button"] {
+.visual-fraction-widget__part[role='button'] {
   cursor: pointer;
 }
 
-.visual-fraction-widget__part[role="button"]:hover {
+.visual-fraction-widget__part[role='button']:hover {
   background: var(--visual-fraction-hover-color);
 }
 
-.visual-fraction-widget__part[role="button"]:focus-visible {
+.visual-fraction-widget__part[role='button']:focus-visible {
   outline: 2px solid var(--exercise-border-focus, var(--exercise-primary, #007acc));
   outline-offset: -2px;
 }
@@ -799,8 +799,8 @@ th.exercise-table-cell {
   color: var(--visual-fraction-part-text-color);
 }
 
-.visual-fraction-widget__part--filled[role="button"]:hover,
-.visual-fraction-widget__part--answer[role="button"]:hover {
+.visual-fraction-widget__part--filled[role='button']:hover,
+.visual-fraction-widget__part--answer[role='button']:hover {
   background: var(--visual-fraction-part-color);
   color: var(--visual-fraction-part-text-color);
 }
@@ -811,26 +811,28 @@ th.exercise-table-cell {
   stroke-width: var(--visual-fraction-svg-line-width);
   stroke-linejoin: round;
   stroke-linecap: round;
-  transition: fill 0.2s ease, filter 0.2s ease;
+  transition:
+    fill 0.2s ease,
+    filter 0.2s ease;
 }
 
-.visual-fraction-widget__sector[role="button"] {
+.visual-fraction-widget__sector[role='button'] {
   cursor: pointer;
 }
 
-.visual-fraction-widget__sector[role="button"]:hover {
+.visual-fraction-widget__sector[role='button']:hover {
   fill: var(--visual-fraction-hover-color);
 }
 
-.visual-fraction-widget__sector[role="button"]:focus-visible {
+.visual-fraction-widget__sector[role='button']:focus-visible {
   outline: none;
   filter: drop-shadow(0 0 0.18rem var(--exercise-border-focus, var(--exercise-primary, #007acc)));
 }
 
 .visual-fraction-widget__sector.visual-fraction-widget__part--filled,
 .visual-fraction-widget__sector.visual-fraction-widget__part--answer,
-.visual-fraction-widget__sector.visual-fraction-widget__part--filled[role="button"]:hover,
-.visual-fraction-widget__sector.visual-fraction-widget__part--answer[role="button"]:hover {
+.visual-fraction-widget__sector.visual-fraction-widget__part--filled[role='button']:hover,
+.visual-fraction-widget__sector.visual-fraction-widget__part--answer[role='button']:hover {
   fill: var(--visual-fraction-part-color);
 }
 
@@ -895,9 +897,9 @@ th.exercise-table-cell {
   justify-content: center;
   min-height: clamp(72px, 14vw, 96px);
   padding: clamp(8px, 2vw, 12px);
-  border: 2px solid #FFCA76;
+  border: 2px solid #ffca76;
   border-radius: clamp(12px, 3vw, 17px);
-  background: #FFFFFF;
+  background: #ffffff;
   color: #333333;
   text-align: center;
   cursor: pointer;
@@ -920,21 +922,21 @@ th.exercise-table-cell {
 } */
 
 .matcher-card--selected {
-  background: color-mix(in srgb, var(--matcher-card-color) 12%, #FFFFFF);
+  background: color-mix(in srgb, var(--matcher-card-color) 12%, #ffffff);
   border-color: var(--matcher-card-color);
   box-shadow: 0 4px 0 color-mix(in srgb, var(--matcher-card-color) 30%, transparent);
   transform: scale(1.04);
 }
 
 .widget--correct .matcher-card--selected {
-  border-color: #43B925;
-  background: #F2FFEE;
-  box-shadow: 0 4px 0 rgba(67, 185, 37, 0.30);
+  border-color: #43b925;
+  background: #f2ffee;
+  box-shadow: 0 4px 0 rgba(67, 185, 37, 0.3);
 }
 
 .widget--incorrect .matcher-card--selected {
-  border-color: #D6234D;
-  background: #FFF0F7;
+  border-color: #d6234d;
+  background: #fff0f7;
   box-shadow: 0 4px 0 rgba(214, 35, 77, 0.25);
 }
 
@@ -1027,7 +1029,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;
@@ -1068,7 +1070,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 */
@@ -1078,7 +1080,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 */
@@ -1099,7 +1101,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;
 }
 
@@ -1111,7 +1114,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;
 }
 
@@ -1309,7 +1313,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;
 }
 
@@ -1321,11 +1325,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;
 }
 
@@ -1540,7 +1545,9 @@ th.exercise-table-cell {
 }
 
 .draggable.dragging {
-  opacity: 0.5;
+  /* Hide original while drag overlay follows cursor to avoid duplicate render.
+     visibility:hidden preserves layout space so neighbors don't shift. */
+  visibility: hidden;
 }
 
 /* Droppable base */
@@ -1560,53 +1567,31 @@ th.exercise-table-cell {
   outline-offset: 2px;
 }
 
-/* Drag overlay - the item following cursor */
+/* Drag overlay - the item following cursor. Matches the rendered button look,
+   which is the `button.drag-option` legacy rule in styles/widgets.css
+   (accent background + white text, no border).
+   NOTE: @dnd-kit DragOverlay renders in a portal at document.body, outside
+   the .math-exercise-renderer scope — so CSS vars must include fallbacks. */
 .drag-overlay-option {
-  padding: 8px 16px;
-  background: #4a90d9;
+  padding: 10px 16px;
+  border: none;
+  border-radius: var(--exercise-border-radius, 0.25rem);
+  background: var(--exercise-accent, #705DC0);
   color: white;
-  border-radius: 6px;
-  font-weight: 500;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: var(--exercise-font-size, clamp(0.875rem, 2vw, 1.1rem));
+  font-weight: var(--exercise-font-weight, 500);
+  min-width: var(--exercise-button-width, clamp(3rem, 6vw, 4rem));
+  text-align: center;
   cursor: grabbing;
 }
 
-/* Drag options container */
-.drag-options {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  /* padding: 12px; */
-  /* background: #f5f5f5; */
-  border-radius: 8px;
-  justify-content: center;
-}
+/* Note: .drag-options and .drag-option base styles live in styles/widgets.css
+   (themed via CSS vars). Don't duplicate them here. */
 
 .drag-option-wrapper {
   display: inline-block;
 }
 
-.drag-option {
-  padding: 10px 20px;
-  border: 2px solid #ddd;
-  border-radius: 8px;
-  background: white;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: grab;
-  transition: all 0.15s ease;
-}
-
-.drag-option:hover {
-  border-color: #4a90d9;
-  background: #f0f7ff;
-}
-
-.drag-option.selected {
-  border-color: #4a90d9;
-  background: #e3f0ff;
-}
-
 /* Slot container - maintains space when item is dragged out */
 .drag-option-slot {
   display: inline-flex;
@@ -1672,17 +1657,6 @@ th.exercise-table-cell {
   background-color: rgba(74, 144, 217, 0.05);
 }
 
-/* Drag options container at bottom */
-.drag-options-container {
-  /* margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid #eee; */
-}
-
-/* ============================================
-   FUTURE WIDGETS - Placeholder styles
-   ============================================ */
-
 /* ============================================
    DRAGGABLE TOOLS (Ruler, Protractor, etc.)
    ============================================ */
@@ -1743,4 +1717,4 @@ th.exercise-table-cell {
 .math-exercise-renderer {
   position: relative;
   min-height: 200px;
-}
+}

package/package.json

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