@mathscan/math-exercise-engine 1.0.13 → 1.0.15

package/dist/style.css

@@ -317,6 +317,16 @@ mark {
   font-weight: bold;
 }
 
+/* ========================================
+   IMAGE
+   ======================================== */
+
+.image-item {
+  vertical-align: middle;
+  max-width: 100%;
+  object-fit: contain;
+}
+
 /* ========================================
    OPERATORS & SYMBOLS
    ======================================== */
@@ -606,7 +616,8 @@ table.exercise-table {
   border-collapse: collapse;
 }
 
-td.exercise-table-cell, th.exercise-table-cell {
+td.exercise-table-cell,
+th.exercise-table-cell {
   border: 2px solid #7c6cf2;
 }
 
@@ -668,6 +679,109 @@ td.exercise-table-cell, th.exercise-table-cell {
   display: inline-flex;
 }
 
+/* ========================================
+   MATCHER WIDGET
+   ======================================== */
+
+.matcher-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.matcher-row {
+  display: grid;
+  grid-template-columns: repeat(var(--matcher-cols, 3), 1fr);
+  gap: 12px;
+}
+
+.matcher-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 56px;
+  padding: 14px 12px;
+  border: 2.5px solid var(--exercise-border, #ddd);
+  border-radius: 14px;
+  background: var(--exercise-bg, #fff);
+  color: var(--exercise-text, #333);
+  font-size: var(--exercise-font-size, 1rem);
+  font-weight: var(--exercise-font-weight, 400);
+  line-height: 1.4;
+  text-align: center;
+  overflow-wrap: break-word;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  user-select: none;
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    filter 0.2s ease;
+}
+
+.matcher-card:hover {
+  border-color: var(--exercise-accent, #705dc0);
+  box-shadow: 0 4px 10px rgba(112, 93, 192, 0.22);
+}
+
+.matcher-card:active {
+  transform: scale(0.96);
+}
+
+.matcher-card--selected {
+  background: var(--matcher-card-color);
+  border-color: var(--matcher-card-color);
+  color: var(--matcher-card-text-color, #1a1a1a);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+}
+
+/* Force all nested text descendants to inherit the button's color so
+   validation/assignment colors aren't masked by their own color rules. */
+
+.matcher-card--selected * {
+  color: inherit;
+}
+
+.matcher-card--selected:hover {
+  border-color: var(--exercise-accent, #705dc0);
+  filter: brightness(1.07);
+}
+
+.matcher-card--selected:active {
+  transform: scale(0.96) translateY(0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  filter: none;
+}
+
+.matcher-widget.widget--correct .matcher-card--selected {
+  background: var(--exercise-correct, #22c55e);
+  border-color: var(--exercise-correct, #22c55e);
+  color: #fff;
+}
+
+.matcher-widget.widget--correct .matcher-card:not(.matcher-card--selected) {
+  border-color: var(--exercise-correct, #22c55e);
+  opacity: 0.5;
+}
+
+.matcher-widget.widget--incorrect .matcher-card--selected {
+  background: var(--exercise-incorrect, #ef4444);
+  border-color: var(--exercise-incorrect, #ef4444);
+  color: #fff;
+}
+
+.matcher-widget.widget--incorrect .matcher-card:not(.matcher-card--selected) {
+  border-color: var(--exercise-incorrect, #ef4444);
+  opacity: 0.5;
+}
+
 /**
  * Number Line Styles
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "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",
@@ -48,6 +48,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
     "chevrotain": "^11.0.3",
+    "lodash": "^4.17.21",
     "mathjs": "^12.4.0",
     "zod": "^3.22.4"
   },
@@ -67,6 +68,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/lodash": "^4.17.24",
     "@types/node": "^20.11.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",