@mathscan/math-exercise-engine 1.1.14 → 1.1.16

package/dist/style.css

@@ -68,6 +68,9 @@
   /** Margin between inline elements (0.25rem = 4px) */
   --exercise-element-margin: 0.25rem;
 
+  /** Minimum space kept between the exercise content and the numeric keypad */
+  --exercise-keypad-gap: 1rem;
+
   /* ========================================
      TYPOGRAPHY VARIABLES
      ======================================== */
@@ -152,6 +155,10 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  /* Guaranteed breathing room between the content and the keypad.
+     space-between alone only separates them while there is leftover
+     space, so wide content would otherwise run right up to the keypad. */
+  gap: var(--exercise-keypad-gap);
 }
 
 /* When inside a keypad layout, the exercise layout must grow to fill
@@ -319,15 +326,7 @@ mark {
   font-weight: bold;
 }
 
-/* ========================================
-   IMAGE
-   ======================================== */
-
-.image-item {
-  vertical-align: middle;
-  max-width: 100%;
-  object-fit: contain;
-}
+/* Image styles live in image.css */
 
 /* ========================================
    OPERATORS & SYMBOLS
@@ -546,7 +545,7 @@ mark {
 }
 
 .pill-bg-path {
-  fill: var(--exercise-pill-bg, #FFE7B4);
+  fill: var(--exercise-pill-bg, #ffe7b4);
 }
 
 /*
@@ -685,11 +684,14 @@ button.drag-option {
   /**
    * Keypad container dimensions:
    * - min-width: 150px ensures keypad is always usable
-   * - margins: 5px on each side for spacing
+   * - flex-shrink: 0 so the keypad keeps its size and the content
+   *   (flex: 1; min-width: 0) absorbs the squeeze instead
+   * - margin-right: 5px keeps it off the outer edge; the space on its
+   *   left comes from the container gap (--exercise-keypad-gap)
    */
   min-width: 150px;
+  flex-shrink: 0;
   margin-right: 5px;
-  margin-left: 5px;
 }
 
 .numeric-keypad {
@@ -780,10 +782,8 @@ button.drag-option {
 
 .exercise-table {
   border-spacing: 0;
-  border: 2px solid var(--exercise-table-border, #8b7ec8);
-  border-radius: 12px;
-  overflow: hidden;
   font-size: small;
+  width: 100%;
 }
 
 .exercise-table-cell {
@@ -801,12 +801,32 @@ button.drag-option {
 }
 
 table.exercise-table {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 td.exercise-table-cell,
 th.exercise-table-cell {
-  border: 2px solid #7c6cf2;
+  box-shadow: inset -2px -2px 0 0 #7c6cf2;
+}
+
+td.exercise-table-cell:last-child,
+th.exercise-table-cell:last-child {
+  box-shadow: inset 0 -2px 0 0 #7c6cf2;
+}
+
+tr.exercise-table-row:last-child td.exercise-table-cell,
+tr.exercise-table-row:last-child th.exercise-table-cell,
+td.exercise-table-cell.exercise-table-cell--last-row,
+th.exercise-table-cell.exercise-table-cell--last-row {
+  box-shadow: inset -2px 0 0 0 #7c6cf2;
+}
+
+tr.exercise-table-row:last-child td.exercise-table-cell:last-child,
+tr.exercise-table-row:last-child th.exercise-table-cell:last-child,
+td.exercise-table-cell.exercise-table-cell--last-row:last-child,
+th.exercise-table-cell.exercise-table-cell--last-row:last-child {
+  box-shadow: none;
 }
 
 /* ========================================
@@ -968,11 +988,11 @@ th.exercise-table-cell {
   fill: var(--visual-fraction-hover-color);
 }
 
-.visual-fraction-widget__sector[role="button"]:focus {
+.visual-fraction-widget__sector[role='button']:focus {
   outline: none;
 }
 
-.visual-fraction-widget__sector[role="button"]:focus-visible {
+.visual-fraction-widget__sector[role='button']:focus-visible {
   /* Keyboard-only focus indicator: a drop-shadow that follows the SVG shape
      instead of a rectangle, preserving accessibility without the visual glitch. */
   outline: none;
@@ -1106,102 +1126,394 @@ th.exercise-table-cell {
    ======================================== */
 
 .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;
+  --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;
+  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;
+  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-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;
+  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:not([aria-disabled='true']):active {
+  transform: scale(0.98);
+}
 
-.pair-matcher-card[aria-disabled="true"] { cursor: default; }
+.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--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--correct {
+  border-color: #43b925;
+  background: #f2ffee;
+  color: #43b925;
+}
 
-.pair-matcher-card--incorrect { border-color: #D6234D; background: #FFF0F7; color: #D6234D; }
+.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;
+  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--south {
+  margin-top: calc(var(--pm-dot-size) / -2);
+}
 
-.pair-matcher-dot--north   { margin-bottom: 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--active {
+  background: var(--pm-orange);
+}
 
-.pair-matcher-dot--pending { border-color: var(--pm-selected-border); background: #fff; }
+.pair-matcher-dot--pending {
+  border-color: var(--pm-selected-border);
+  background: #fff;
+}
 
-.pair-matcher-dot--correct   { border-color: #43B925; background: #43B925; }
+.pair-matcher-dot--correct {
+  border-color: #43b925;
+  background: #43b925;
+}
 
-.pair-matcher-dot--incorrect { border-color: #D6234D; background: #D6234D; }
+.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;
+  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; }
+.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; } }
+@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;
+  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:not(.pair-matcher-card--rtl) .group {
+  overflow-wrap: break-word;
+}
 
-.pair-matcher-card--rtl { direction: rtl; unicode-bidi: plaintext; }
+.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;
+  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-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;
+  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; }
+  .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;
+  }
+}
+
+/**
+ * Image Styles
+ *
+ * Inline images and their fullscreen (lightbox) view.
+ * The lightbox is portalled to document.body, so its rules must not depend
+ * on any ancestor inside .math-exercise-renderer.
+ */
+
+/* ========================================
+   INLINE IMAGE
+   ======================================== */
+
+/**
+ * Wrapper exists only for zoomable images. It is exactly the size of the
+ * image — no padding, no gap, no extra track — because .exercise-line is a
+ * flex row: any width the wrapper adds would push every later item along,
+ * which would move a second inline image on the same line.
+ */
+
+.image-item-wrapper {
+  position: relative;
+  display: inline-block;
+  /* line-height: 0 stops the inline descender gap from making the wrapper
+     taller than the image it wraps. */
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.image-item {
+  vertical-align: middle;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+.image-item-zoomable {
+  cursor: zoom-in;
+}
+
+/**
+ * Expand affordance. Always visible: sitting outside the image, it costs
+ * nothing to show, and a hover-reveal would be undiscoverable on touch.
+ *
+ * The diamond artwork carries all the chrome, so the button contributes no
+ * border or background of its own. Its `color` drives the glyph, which is
+ * drawn with currentColor.
+ *
+ * Absolutely positioned over the image's top-right corner: out of flow, so
+ * it costs zero layout width.
+ *
+ * The overhang is deliberately small. .exercise-line is a flex row with only
+ * a 0.25rem gap, so anything hanging past the image's right edge lands on the
+ * next item — a live button there would swallow clicks meant for the input
+ * beside the image. At 30% the badge still reads as a corner badge while the
+ * part sticking out is a few pixels of tapering tip.
+ *
+ * clip-path does the rest: it removes the square's dead corners from the hit
+ * area (clipped-away regions do not receive pointer events), which is exactly
+ * where the box poked furthest into its neighbours. The polygon runs through
+ * the diamond's four tips with a little tolerance for the 2px stroke, so it
+ * circumscribes the artwork and clips no visible pixels.
+ */
+
+.image-zoom-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(30%, -30%);
+  clip-path: polygon(50.75% 13%, 90% 52.5%, 50.75% 92%, 11.5% 52.5%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* Slightly larger than a plain square button: the diamond only fills
+     ~75% of its viewBox, so the visible badge lands near 1.7rem. */
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--exercise-accent, #705dc0);
+  line-height: 0;
+  cursor: zoom-in;
+  transition: transform 0.15s ease;
+}
+
+.image-zoom-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* The translate must be repeated here: transform is one property, so a bare
+   scale() would drop the positioning and snap the badge back onto the image. */
+
+.image-zoom-btn:hover,
+.image-zoom-btn:focus-visible {
+  transform: translate(30%, -30%) scale(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .image-zoom-btn {
+    transition: none;
+  }
+
+  .image-zoom-btn:hover,
+  .image-zoom-btn:focus-visible {
+    transform: translate(30%, -30%);
+  }
+}
+
+/* ========================================
+   FULLSCREEN LIGHTBOX
+   ======================================== */
+
+.image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.85);
+  cursor: zoom-out;
+}
+
+.image-lightbox-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  cursor: default;
+}
+
+.image-lightbox-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  /* Solid white disc: the cross is the accent purple, which would be muddy
+     read straight against the dark backdrop. */
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--exercise-accent, #705dc0);
+  line-height: 0;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.image-lightbox-close-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: block;
+}
+
+.image-lightbox-close:hover,
+.image-lightbox-close:focus-visible {
+  background: #ffffff;
 }
 
 /**
@@ -2171,6 +2483,11 @@ th.exercise-table-cell {
     /** Reduce gap between keypad buttons */
     gap: var(--exercise-element-margin);
   }
+
+  .exercise-layout-container.has-keypad {
+    /** Tighter separation between content and keypad on narrow screens */
+    gap: calc(var(--exercise-keypad-gap) * 0.5);
+  }
 }
 
 /* ========================================

package/package.json

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