@mathscan/math-exercise-engine 1.1.0 → 1.1.1

package/dist/style.css

@@ -421,10 +421,6 @@ mark {
    DRAG OPTIONS
    ======================================== */
 
-.drag-options-container {
-  /* Container for drag options widget */
-}
-
 .drag-options {
   display: flex;
   justify-content: center;
@@ -737,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;
@@ -778,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;
 }
@@ -800,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);
 }
@@ -812,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);
 }
 
@@ -896,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;
@@ -921,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);
 }
 
@@ -1544,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 */
@@ -1564,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;
@@ -1676,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.)
    ============================================ */
@@ -1747,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.1.0",
+  "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",