@mathscan/math-exercise-engine 1.1.16 → 1.2.0

package/dist/style.css

@@ -1351,6 +1351,32 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   }
 }
 
+/* ============================================
+   LOCKED EXERCISE (answers checked or revealed)
+   Widgets refuse input in JS; these rules kill the pointer
+   cursor that suggests otherwise. Cursor only — never `transform`,
+   which would override rotations like `.diamond-keypad .keypad-btn`.
+   Reset() removes `.locked` and everything comes back.
+   ============================================ */
+
+.math-exercise-renderer.locked .inline-input,
+.math-exercise-renderer.locked .inline-input-chip,
+.math-exercise-renderer.locked .radio-option,
+.math-exercise-renderer.locked .drag-option,
+.math-exercise-renderer.locked .matcher-card,
+.math-exercise-renderer.locked .pair-matcher-card,
+.math-exercise-renderer.locked .keypad-btn,
+.math-exercise-renderer.locked .grid-symmetry__cell--editable,
+.math-exercise-renderer.locked .visual-fraction-widget__part,
+.math-exercise-renderer.locked .number-line-cursor-ball,
+.math-exercise-renderer.locked .number-line-placed-chip-btn,
+/* .clock-hand, not .clock-arrow: the arrow polygons are pointer-events:none,
+   the transparent hit-target lines are what carry the grab cursor. */
+.math-exercise-renderer.locked .clock-interactive .clock-hand,
+.math-exercise-renderer.locked .clock-interactive .clock-hand:active {
+  cursor: default;
+}
+
 /**
  * Image Styles
  *
@@ -2418,6 +2444,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
  *
@@ -2451,6 +2572,20 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   transform: scale(0.98);
 }
 
+/* Locked exercise — the button is disabled until reset(). */
+
+.exercise-submit-btn:disabled,
+.exercise-submit-btn:disabled:hover {
+  cursor: default;
+  opacity: 0.5;
+  background: var(--exercise-primary);
+  color: white;
+}
+
+.exercise-submit-btn:disabled:active {
+  transform: none;
+}
+
 /* Responsive Overrides - must be last */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.1.16",
+  "version": "1.2.0",
   "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",
@@ -16,22 +16,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "demo": "node examples/demo.mjs",
-    "demo:ts": "tsx --conditions=import examples/demo.ts",
-    "demo:build": "pnpm run build && node examples/demo.mjs",
-    "test": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "lint": "echo 'ESLint disabled for now'",
-    "lint:fix": "echo 'ESLint disabled for now'",
-    "format": "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\" \"*.{json,md}\"",
-    "format:check": "prettier --check \"src/**/*.ts\" \"tests/**/*.ts\" \"*.{json,md}\"",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm run build"
-  },
   "keywords": [
     "math",
     "exercise",
@@ -90,5 +74,21 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "pnpm@8.15.0"
-}
+  "packageManager": "pnpm@8.15.0",
+  "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",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "lint": "echo 'ESLint disabled for now'",
+    "lint:fix": "echo 'ESLint disabled for now'",
+    "format": "prettier --write \"src/**/*.ts\" \"tests/**/*.ts\" \"*.{json,md}\"",
+    "format:check": "prettier --check \"src/**/*.ts\" \"tests/**/*.ts\" \"*.{json,md}\"",
+    "typecheck": "tsc --noEmit"
+  }
+}