@mathscan/math-exercise-engine 1.1.1 → 1.1.2

package/dist/style.css

@@ -951,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
  *

package/package.json

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