@mathscan/math-exercise-engine 1.1.16 → 1.1.17

package/dist/style.css

@@ -2418,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
  *

package/package.json

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