@mathscan/math-exercise-engine 1.1.15 → 1.1.17

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
@@ -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 {
@@ -1349,6 +1351,171 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   }
 }
 
+/**
+ * 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;
+}
+
 /**
  * Number Line Styles
  *
@@ -2251,6 +2418,101 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   background: #fef2f2;
 }
 
+.grid-symmetry {
+  /* Figma palette. All tokens remain overridable by consuming applications. */
+  --grid-symmetry-cell-color: #fff;
+  --grid-symmetry-focus-color: #0f172a;
+  --grid-symmetry-reference-color: #705dc0;
+  --grid-symmetry-prefilled-color: #4f86d9;
+  --grid-symmetry-answer-color: #291a64;
+  --grid-symmetry-correct-color: #43b925;
+  --grid-symmetry-incorrect-color: #d6234d;
+  --grid-symmetry-line-color: #ffca76;
+  --grid-symmetry-axis-color: #291a64;
+  max-width: 100%;
+  overflow: auto;
+  padding: 0.75rem;
+}
+
+.grid-symmetry__grid {
+  display: grid;
+  position: relative;
+  width: max-content;
+  gap: 1px;
+  padding: 1px;
+  background: var(--grid-symmetry-line-color);
+}
+
+.grid-symmetry__cell {
+  box-sizing: border-box;
+  width: var(--grid-symmetry-cell-size);
+  height: var(--grid-symmetry-cell-size);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--grid-symmetry-cell-color);
+  appearance: none;
+  opacity: 1;
+  transition: background-color 120ms ease;
+}
+
+/* Unlocked cells only — locked ones render as plain spans and are not clickable. */
+
+.grid-symmetry__cell--editable {
+  cursor: pointer;
+}
+
+.grid-symmetry__cell--editable:focus-visible {
+  outline: 3px solid var(--grid-symmetry-focus-color);
+  outline-offset: -3px;
+  position: relative;
+  z-index: 2;
+}
+
+.grid-symmetry__cell--reference {
+  background: var(--grid-symmetry-reference-color);
+}
+
+.grid-symmetry__cell--prefilled {
+  background: var(--grid-symmetry-prefilled-color);
+}
+
+.grid-symmetry__cell--answer {
+  background: var(--grid-symmetry-answer-color);
+}
+
+.grid-symmetry--correct .grid-symmetry__cell--interactive.grid-symmetry__cell--selected {
+  background: var(--grid-symmetry-correct-color);
+}
+
+.grid-symmetry--incorrect .grid-symmetry__cell--interactive.grid-symmetry__cell--selected {
+  background: var(--grid-symmetry-incorrect-color);
+}
+
+.grid-symmetry__axis {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  background: var(--grid-symmetry-axis-color);
+}
+
+.grid-symmetry__axis--vertical {
+  top: -12px;
+  bottom: -12px;
+  left: 50%;
+  width: 3px;
+  transform: translateX(-50%);
+}
+
+.grid-symmetry__axis--horizontal {
+  right: -12px;
+  left: -12px;
+  top: 50%;
+  height: 3px;
+  transform: translateY(-50%);
+}
+
 /**
  * Button & Action Styles
  *
@@ -2316,6 +2578,11 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
     /** 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.15",
+  "version": "1.1.17",
   "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",
@@ -19,6 +19,7 @@
   "scripts": {
     "build": "vite build",
     "dev": "vite build --watch",
+    "playground": "vite --open /playground/grid-symmetry-builder/",
     "demo": "node examples/demo.mjs",
     "demo:ts": "tsx --conditions=import examples/demo.ts",
     "demo:build": "pnpm run build && node examples/demo.mjs",