@mathscan/math-exercise-engine 1.2.8 → 1.2.10

package/dist/style.css

@@ -2626,6 +2626,28 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   transform: translateY(-50%);
 }
 
+/**
+ * GEOMETRY widget — the wrapper this package owns. Everything inside it is
+ * rendered by @mathscan/geometry-engine, which ships no stylesheet of its own
+ * and sizes its canvas from the box it is given.
+ */
+
+.geometry-widget {
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+/* Reserves the canvas box while the engine's React entry is still loading, so
+   the exercise does not jump when the canvas appears. */
+
+.geometry-widget__loading {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 8px;
+  background: var(--exercise-bg, transparent);
+}
+
 /**
  * Button & Action Styles
  *
@@ -2767,8 +2789,22 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
 
 /* ── Root container ─────────────────────────────────────────────────────────── */
 
+/* CSS-only scroll shadows (Lea Verou): edge-pinned radial gradients revealed by
+   `local`-attached cover gradients that scroll away with the content. */
+
 .chart-scroll {
   width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  background:
+    linear-gradient(to right, var(--exercise-bg, #fff) 30%, transparent),
+    linear-gradient(to left, var(--exercise-bg, #fff) 30%, transparent) 100% 0,
+    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.15), transparent),
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.15), transparent) 100% 0;
+  background-repeat: no-repeat;
+  background-color: var(--exercise-bg, #fff);
+  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+  background-attachment: local, local, scroll, scroll;
 }
 
 .chart {
@@ -3474,6 +3510,120 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   width: 1px;
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   GROUPED-BAR CHART (.chart--grouped-bar)
+   Two nesting levels: .chart-groups > .chart-group (cluster) > .chart-bar-wrapper.
+   Bars inside a cluster reuse every bar-chart rule and var untouched; the only
+   new spacing is the cluster gap (--chart-group-gap vs --chart-bar-gap).
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.chart-groups {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-inline: var(--chart-group-gap);
+  gap: var(--chart-group-gap);
+}
+
+.chart-group {
+  flex: 0 0 var(--chart-group-width);
+  width: var(--chart-group-width);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--chart-bar-gap);
+  height: 100%;
+}
+
+/* Series declared but absent from this GROUP: holds the slot, paints nothing. */
+
+.chart-group-bar-gap {
+  flex: 0 0 var(--chart-bar-slot-width);
+  width: var(--chart-bar-slot-width);
+  height: 100%;
+}
+
+/* Category label row: bar-chart's .chart-axis-x widened from a bar to a cluster. */
+
+.chart--grouped-bar .chart-axis-x {
+  padding-inline: var(--chart-group-gap);
+  gap: var(--chart-group-gap);
+}
+
+.chart--grouped-bar .chart-axis-tick-x {
+  flex: 0 0 var(--chart-group-width);
+}
+
+/* ── Horizontal ─────────────────────────────────────────────────────────────── */
+
+.chart--horizontal .chart-groups {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-inline: 0;
+  padding-block: var(--chart-group-gap);
+}
+
+.chart--horizontal .chart-group {
+  flex: 0 0 var(--chart-group-width);
+  height: var(--chart-group-width);
+  width: 100%;
+  /* Column, not row: each bar needs the full plot width to fill from 0. */
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.chart--horizontal .chart-group-bar-gap {
+  flex: 0 0 var(--chart-bar-slot-width);
+  width: 100%;
+  height: var(--chart-bar-slot-width);
+}
+
+.chart--grouped-bar.chart--horizontal .chart-axis-y--categories {
+  padding-block: var(--chart-group-gap);
+  gap: var(--chart-group-gap);
+}
+
+.chart--grouped-bar.chart--horizontal .chart-bar-y-label {
+  flex: 0 0 var(--chart-group-width);
+  height: var(--chart-group-width);
+}
+
+/* ── Legend ─────────────────────────────────────────────────────────────────── */
+
+/* Explicit cell: grid auto-placement would float it above the chart. */
+
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.4rem 1rem;
+  padding-top: 0.6rem;
+  grid-column: 3;
+  grid-row: 5;
+}
+
+.chart-legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.chart-legend-swatch {
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 3px;
+  flex: 0 0 auto;
+}
+
+.chart-legend-label {
+  font-size: var(--chart-label-font-size);
+  color: var(--exercise-text-primary, #1f2937);
+}
+
 /* Responsive Overrides - must be last */
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mathscan/math-exercise-engine",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "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",
@@ -18,6 +18,7 @@
   ],
   "scripts": {
     "build": "vite build",
+    "check:geometry-isolation": "node --no-warnings --experimental-loader ./scripts/geometry-validation-isolation-loader.mjs ./scripts/check-geometry-validation-isolation.mjs && node ./scripts/check-geometry-bundle-isolation.mjs",
     "dev": "vite build --watch",
     "playground": "vite --open /playground/grid-symmetry-builder/",
     "demo": "node examples/demo.mjs",
@@ -31,7 +32,7 @@
     "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"
+    "prepublishOnly": "pnpm run build && pnpm run check:geometry-isolation"
   },
   "keywords": [
     "math",
@@ -48,14 +49,17 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
+    "@mathscan/geometry-engine": "0.1.4",
     "chevrotain": "^11.0.3",
     "lodash": "^4.17.21",
     "mathjs": "^12.4.0",
     "zod": "^3.22.4"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "konva": "^10.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-konva": "^19.2.5"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -63,6 +67,12 @@
     },
     "react-dom": {
       "optional": true
+    },
+    "konva": {
+      "optional": true
+    },
+    "react-konva": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -89,7 +99,7 @@
     "vitest": "^4.0.17"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "packageManager": "pnpm@8.15.0"
 }