@mathscan/math-exercise-engine 1.2.6 → 1.2.8

package/dist/style.css

@@ -60,6 +60,10 @@
   --exercise-incorrect: #ef4444;
   --exercise-correct-bg: color-mix(in srgb, var(--exercise-correct) 6%, var(--exercise-bg));
   --exercise-incorrect-bg: color-mix(in srgb, var(--exercise-incorrect) 6%, var(--exercise-bg));
+  /* Disabled inputs: a visible slot the student can't fill. Derived from the
+     base tokens so they follow the host theme. */
+  --exercise-disabled-bg: color-mix(in srgb, var(--exercise-border) 40%, var(--exercise-bg));
+  --exercise-disabled-border: var(--exercise-border);
   /* Authoring/engine errors — kept apart from --exercise-incorrect so they
      don't follow the student's attempt state. */
   --exercise-error: #ef4444;
@@ -496,6 +500,21 @@ mark {
   border-color: var(--exercise-border-focus);
 }
 
+/* ========================================
+   DISABLED
+   Prefixed with .math-exercise-renderer so a host's own .inline-input CSS can't override the gray.
+   To change the colors, override the --exercise-disabled-* variables instead.
+   ======================================== */
+
+.math-exercise-renderer .inline-input.inline-input--disabled:disabled {
+  background: var(--exercise-disabled-bg);
+  border: var(--exercise-border-width) solid var(--exercise-disabled-border);
+  box-shadow: none;
+  cursor: not-allowed;
+  /* Cancel the browser's default fade: the gray tokens already convey it. */
+  opacity: 1;
+}
+
 /* ========================================
    VALIDATION STATUS
    ======================================== */
@@ -1068,7 +1087,8 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 .matcher-widget {
   display: flex;
   flex-direction: column;
-  gap: clamp(10px, 2.5vw, 16px);
+  gap: clamp(6px, min(max(10px, 2.5vw), 2.5vh), 16px);
+  gap: clamp(6px, min(max(10px, 2.5vw), 2.5dvh), 16px);
   width: min(100%, 580px);
   margin-inline: auto;
 }
@@ -1076,15 +1096,20 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 .matcher-row {
   display: grid;
   grid-template-columns: repeat(var(--matcher-cols, 3), minmax(0, 1fr));
-  gap: clamp(10px, 2.5vw, 16px);
+  gap: clamp(6px, min(max(10px, 2.5vw), 2.5vh), 16px);
+  gap: clamp(6px, min(max(10px, 2.5vw), 2.5dvh), 16px);
 }
 
 .matcher-card {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: clamp(72px, 14vw, 96px);
-  padding: clamp(8px, 2vw, 12px);
+  /* Bounded by viewport height too, so 3 rows fit on landscape phones (~330px tall).
+     vh lines are fallbacks for WebViews without dvh support. */
+  min-height: clamp(44px, min(max(72px, 14vw), 15vh), 96px);
+  min-height: clamp(44px, min(max(72px, 14vw), 15dvh), 96px);
+  padding: clamp(4px, min(max(8px, 2vw), 1.5vh), 12px);
+  padding: clamp(4px, min(max(8px, 2vw), 1.5dvh), 12px);
   border: 2px solid #ffca76;
   border-radius: clamp(12px, 3vw, 17px);
   background: #ffffff;

package/package.json

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