@mathscan/math-exercise-engine 1.1.0 → 1.1.2

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);
 }
 
@@ -950,6 +951,109 @@ th.exercise-table-cell {
   opacity: 0.5;
 } */
 
+/* ========================================
+   PAIR MATCHER WIDGET
+   ======================================== */
+
+.pair-matcher-widget {
+  --pm-orange: #FFCA76; --pm-purple: #705DC0;
+  --pm-selected-bg: #E7E2FF; --pm-selected-border: #AE9CFF;
+  --pm-card-width: 163px; --pm-card-height: 82px; --pm-card-radius: 12px; --pm-card-border-width: 1px;
+  --pm-dot-size: 17px; --pm-dot-border-width: 2px;
+  --pm-line-color: var(--pm-orange); --pm-line-color-correct: #43B925; --pm-line-color-incorrect: #D6234D; --pm-line-width: 4px;
+  position: relative; display: flex; flex-direction: column;
+  gap: 52px; width: max-content; max-width: 100%; margin-inline: auto; padding: 0;
+}
+
+.pair-matcher-row {
+  position: relative; z-index: 2; display: grid;
+  grid-template-columns: repeat(var(--pm-cols, 3), minmax(0, var(--pm-card-width)));
+  justify-content: center; gap: 18px; align-items: stretch; min-width: 0;
+}
+
+.pair-matcher-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
+
+.pair-matcher-card {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
+  width: 100%; min-width: 0; max-width: 100%; align-self: stretch; flex: 1 1 auto;
+  min-height: var(--pm-card-height); height: auto; padding: 6px 8px;
+  border: var(--pm-card-border-width) solid var(--pm-orange); border-radius: var(--pm-card-radius);
+  background: #fff; color: var(--pm-purple);
+  font: 500 1rem / 1.2 var(--exercise-font-family, inherit); letter-spacing: 0;
+  text-align: center; word-break: normal; overflow-wrap: break-word;
+  white-space: normal; hyphens: auto; overflow: visible; cursor: pointer;
+  transition: background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
+}
+
+.pair-matcher-card:not([aria-disabled="true"]):active { transform: scale(0.98); }
+
+.pair-matcher-card[aria-disabled="true"] { cursor: default; }
+
+.pair-matcher-card--pending, .pair-matcher-card--flash { border-color: var(--pm-selected-border); background: var(--pm-selected-bg); }
+
+.pair-matcher-card--correct   { border-color: #43B925; background: #F2FFEE; color: #43B925; }
+
+.pair-matcher-card--incorrect { border-color: #D6234D; background: #FFF0F7; color: #D6234D; }
+
+.pair-matcher-dot {
+  position: relative; z-index: 3; flex-shrink: 0;
+  width: var(--pm-dot-size); height: var(--pm-dot-size);
+  border: var(--pm-dot-border-width) solid var(--pm-orange); border-radius: 50%; background: #fff;
+}
+
+.pair-matcher-dot--south   { margin-top:    calc(var(--pm-dot-size) / -2); }
+
+.pair-matcher-dot--north   { margin-bottom: calc(var(--pm-dot-size) / -2); }
+
+.pair-matcher-dot--active  { background: var(--pm-orange); }
+
+.pair-matcher-dot--pending { border-color: var(--pm-selected-border); background: #fff; }
+
+.pair-matcher-dot--correct   { border-color: #43B925; background: #43B925; }
+
+.pair-matcher-dot--incorrect { border-color: #D6234D; background: #D6234D; }
+
+.pair-matcher-lines {
+  position: absolute; inset: 0; z-index: 1;
+  width: 100%; height: 100%; overflow: visible; pointer-events: none;
+}
+
+.pair-matcher-line { stroke-dasharray: 1; animation: pair-matcher-line-draw 0.5s ease both; }
+
+@keyframes pair-matcher-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
+
+.pair-matcher-card .text-item,
+.pair-matcher-card .question-text,
+.pair-matcher-card .group {
+  margin: 0; min-width: 0; max-width: 100%;
+  color: inherit; font: inherit;
+  overflow-wrap: break-word; word-break: normal; white-space: normal;
+}
+
+.pair-matcher-card:not(.pair-matcher-card--rtl) .text-item,
+.pair-matcher-card:not(.pair-matcher-card--rtl) .question-text,
+.pair-matcher-card:not(.pair-matcher-card--rtl) .group { overflow-wrap: break-word; }
+
+.pair-matcher-card--rtl { direction: rtl; unicode-bidi: plaintext; }
+
+.pair-matcher-card-content {
+  display: block; width: 100%; min-width: 0; max-width: 100%; text-align: inherit; white-space: normal;
+}
+
+.pair-matcher-card-content .space { display: inline; width: auto; }
+
+.pair-matcher-card .text-item-arabic,
+.pair-matcher-card .question-text-arabic {
+  direction: rtl; font-size: 0.72rem; line-height: 1.15;
+  overflow-wrap: normal; word-break: normal; hyphens: manual;
+}
+
+@media (max-width: 420px) {
+  .pair-matcher-widget { gap: 46px; }
+  .pair-matcher-row { grid-template-columns: repeat(var(--pm-cols, 3), minmax(0, 1fr)); gap: 12px; }
+  .pair-matcher-card { min-height: 58px; padding: 6px 7px; font-size: 0.92rem; }
+}
+
 /**
  * Number Line Styles
  *
@@ -1544,7 +1648,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 +1670,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 +1760,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 +1820,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.2",
   "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",