@mathscan/math-exercise-engine 1.2.9 → 1.2.11

package/dist/style.css

@@ -636,6 +636,27 @@ mark {
   box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
 }
 
+/* Bounce hint — repeats until the student drags any option */
+
+@keyframes drag-option-hint {
+  0%, 100% { transform: translateY(0)     scale(1, 1);                }
+  15%      { transform: translateY(0)     scale(1.12, 0.88);          } /* squash before jump */
+  40%      { transform: translateY(-14px) scale(0.94, 1.08) rotate(-4deg); } /* stretch in the air */
+  60%      { transform: translateY(0)     scale(1.1, 0.9);            } /* squash on landing */
+  78%      { transform: translateY(-4px)  scale(0.98, 1.02) rotate(2deg); }
+}
+
+.drag-option.drag-option--hint {
+  transform-origin: center bottom;
+  animation: drag-option-hint 0.8s ease-in-out 0.4s 2 both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drag-option.drag-option--hint {
+    animation: none;
+  }
+}
+
 /* Legacy button-style drag options for backward compatibility */
 
 button.drag-option {
@@ -811,17 +832,35 @@ button.drag-option {
    TABLE LAYOUT
    ======================================== */
 
+/*
+ * Grid, not table layout: with equal `1fr` columns every cell gets the same
+ * width — the widest cell's when the table shrinks to fit, an equal share of
+ * the row when it stretches. min-width: max-content keeps columns from going
+ * narrower than the widest cell (which would split numbers or push inputs out
+ * of their cell); the container scrolls instead.
+ */
+
 .exercise-table {
-  border-spacing: 0;
+  display: grid;
+  grid-template-columns: repeat(var(--exercise-table-cols), minmax(0, 1fr));
   font-size: small;
   width: 100%;
+  min-width: max-content;
+}
+
+/* Rows only group cells for a11y; cells sit directly on the grid. */
+
+.exercise-table-row {
+  display: contents;
 }
 
 .exercise-table-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
   padding: 4px;
   text-align: center;
-  vertical-align: middle;
-  min-height: 36px;
   color: var(--exercise-text);
 }
 
@@ -834,35 +873,27 @@ button.drag-option {
 .exercise-table-container {
   border: 2px solid var(--exercise-table-border-color);
   border-radius: 8px;
-  overflow: hidden;
+  overflow-x: auto;
+  /* overflow-x alone turns overflow-y into auto too; sub-pixel rounding then
+     shows a useless vertical scrollbar. Only sideways scrolling is wanted. */
+  overflow-y: hidden;
 }
 
-table.exercise-table {
-  border-collapse: separate;
-  border-spacing: 0;
-}
+/* Inner grid lines: right + bottom on each cell, dropped at the outer edges. */
 
-td.exercise-table-cell,
-th.exercise-table-cell {
+.exercise-table-cell {
   box-shadow: inset -2px -2px 0 0 var(--exercise-table-border-color);
 }
 
-td.exercise-table-cell:last-child,
-th.exercise-table-cell:last-child {
+.exercise-table-cell.exercise-table-cell--last-col {
   box-shadow: inset 0 -2px 0 0 var(--exercise-table-border-color);
 }
 
-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 {
+.exercise-table-cell.exercise-table-cell--last-row {
   box-shadow: inset -2px 0 0 0 var(--exercise-table-border-color);
 }
 
-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 {
+.exercise-table-cell.exercise-table-cell--last-row.exercise-table-cell--last-col {
   box-shadow: none;
 }
 
@@ -1653,6 +1684,8 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   --nl-visual-fraction-size: clamp(5.5rem, 18vw, 8rem);
   /* Visual gap between end ticks and arrowheads — pure CSS, no effect on calculations */
   --nl-arrow-gap: 8px;
+  /* How far an open-ended track runs past the end tick ('line' / 'line-left' styles) */
+  --nl-open-end-length: 16px;
   --nl-arrow-arc-color: var(--exercise-danger, #D6234D);
   --nl-arrow-arc-stroke-width: 1.75;
 }
@@ -1833,12 +1866,15 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   right: calc(var(--nl-side-pad, 7%) - var(--nl-arrow-gap, 8px));
 }
 
-/* Geometric line style — track extends to the full container edges
-   so the axis looks like an infinite line, not a closed segment */
+/* Open end ('line' / 'line-left' styles) — track runs --nl-open-end-length past
+   the end tick so the axis looks like it continues, not a closed segment */
 
-.number-line--style-line .number-line-track {
-  left: 0;
-  right: 0;
+.number-line--extend-left .number-line-track {
+  left: calc(var(--nl-side-pad, 7%) - var(--nl-open-end-length, 16px));
+}
+
+.number-line--extend-right .number-line-track {
+  right: calc(var(--nl-side-pad, 7%) - var(--nl-open-end-length, 16px));
 }
 
 /* ── Arrowheads (CSS border-triangle technique) ── */
@@ -1870,16 +1906,6 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   border-right:  8px solid var(--nl-axis-color);
 }
 
-/* Geometric line style — arrows reach the full container edges */
-
-.number-line--style-line .number-line-arrow-right {
-  left: calc(100%);
-}
-
-.number-line--style-line .number-line-arrow-left {
-  left: 0;
-}
-
 /* ── Major ticks ── */
 
 .number-line-major-tick {
@@ -2789,8 +2815,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 {
@@ -3496,6 +3536,475 @@ 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);
+}
+
+/**
+ * Widget tutorial overlay (renderer/tutorial).
+ *
+ * Portaled to <body>, so it sits OUTSIDE .math-exercise-renderer and does not
+ * inherit its variables — the tokens below are declared on the overlay itself.
+ * Override them on `.met-tutorial` to retheme.
+ *
+ * `--met-tutorial-font` is deliberately NOT declared here: set it anywhere above
+ * (e.g. `:root`) to give the bubble the host's font. Unset → inherits from <body>.
+ */
+
+.met-tutorial {
+  --met-tutorial-dim: rgba(30, 24, 56, 0.45);
+  --met-tutorial-glow: #ffd66b;
+  --met-tutorial-accent: #705dc0;
+  --met-tutorial-accent-soft: #ece8fb;
+  --met-tutorial-accent-edge: #4f3f9a;
+  --met-tutorial-next-bg: #ffd66b;
+  --met-tutorial-next-edge: #d9a93a;
+  --met-tutorial-next-text: #2e2463;
+  --met-tutorial-text: #2e2463;
+  --met-tutorial-bubble-border: #e0d9ff;
+
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  /* Takes every tap: the hand is a demo, nothing may reach the exercise. */
+  pointer-events: auto;
+  touch-action: none;
+}
+
+.met-tutorial > * {
+  position: fixed;
+}
+
+/* ── Dim with spotlight holes ─────────────────────────────────────────── */
+
+.met-tutorial-dim {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  fill: var(--met-tutorial-dim);
+  animation: met-tutorial-fade 250ms ease-out both;
+}
+
+.met-tutorial-glow {
+  pointer-events: none;
+  box-shadow:
+    0 0 0 3px var(--met-tutorial-glow),
+    0 0 22px 6px color-mix(in srgb, var(--met-tutorial-glow) 70%, transparent);
+  transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
+  animation: met-tutorial-fade 250ms ease-out both;
+}
+
+/* The real key under the hand, mid-press. */
+
+.diamond-keypad .keypad-btn.met-tutorial-pressed {
+  transform: rotate(45deg) scale(0.9);
+}
+
+.keypad-btn.met-tutorial-pressed {
+  transform: scale(0.92);
+  box-shadow: 0 0 0 3px var(--met-tutorial-glow, #ffd66b);
+}
+
+/* ── Hand ─────────────────────────────────────────────────────────────── */
+
+.met-tutorial-hand {
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  /* Glide between targets — well inside the 1400ms cycle (TutorialOverlay CYCLE_MS). */
+  transition: transform 500ms cubic-bezier(0.45, 0, 0.25, 1);
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
+}
+
+.met-tutorial-hand-press {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: 75% 28%;
+  animation: met-tutorial-tap 1400ms ease-in-out both;
+}
+
+.met-tutorial-hand-press svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Press lands at ~46% of the cycle (PRESS_AT_MS = 650 / CYCLE_MS = 1400). */
+
+@keyframes met-tutorial-tap {
+  0%, 38% { transform: scale(1); }
+  46% { transform: scale(0.84); }
+  58%, 100% { transform: scale(1); }
+}
+
+.met-tutorial-ripple {
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  margin: -22px 0 0 -22px;
+  border-radius: 50%;
+  border: 3px solid var(--met-tutorial-glow);
+  opacity: 0;
+  animation: met-tutorial-ripple 1400ms ease-out both;
+}
+
+@keyframes met-tutorial-ripple {
+  0%, 44% { opacity: 0; transform: scale(0.3); }
+  50% { opacity: 1; transform: scale(0.5); }
+  80%, 100% { opacity: 0; transform: scale(1.4); }
+}
+
+/* ── Keypad scenes ────────────────────────────────────────────────────── */
+
+.met-tutorial-arc {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.met-tutorial-arc path {
+  fill: none;
+  stroke: white;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 2 9;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
+}
+
+/* Rides the arc's path (offset-path is set inline, in viewport coordinates). */
+
+.met-tutorial-hop {
+  left: 0;
+  top: 0;
+  width: 16px;
+  height: 16px;
+  margin: -8px 0 0 -8px;
+  border-radius: 50%;
+  background: var(--met-tutorial-accent);
+  box-shadow: 0 0 0 3px white;
+  offset-rotate: 0deg;
+  pointer-events: none;
+  animation: met-tutorial-hop 550ms ease-in-out both;
+}
+
+@keyframes met-tutorial-hop {
+  from { offset-distance: 0%; }
+  to { offset-distance: 100%; opacity: 0.2; }
+}
+
+/* Dots over the real (empty) answer box — never digits. */
+
+.met-tutorial-fill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35em;
+  border-radius: 10px;
+  pointer-events: none;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--met-tutorial-accent);
+}
+
+.met-tutorial-fill-dot {
+  animation: met-tutorial-pop 250ms ease-out both;
+}
+
+.met-tutorial-fill-slot {
+  opacity: 0.55;
+}
+
+@keyframes met-tutorial-pop {
+  from { transform: scale(0.2); }
+  to { transform: scale(1); }
+}
+
+/* Stand-in check when the host passed no submitTarget. */
+
+.met-tutorial-stand-in-check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  transform: rotate(45deg);
+  background: var(--met-tutorial-accent);
+  color: white;
+  font-size: 24px;
+  font-weight: 700;
+  pointer-events: none;
+  animation: met-tutorial-pop 250ms ease-out both;
+}
+
+.met-tutorial-stand-in-check span {
+  transform: rotate(-45deg);
+}
+
+/* ── Bubble ───────────────────────────────────────────────────────────── */
+
+.met-tutorial-bubble {
+  box-sizing: border-box;
+  padding: 16px 20px 12px;
+  border: 1.5px solid var(--met-tutorial-bubble-border);
+  border-radius: 14px;
+  background: white;
+  color: var(--met-tutorial-text);
+  font-family: var(--met-tutorial-font, inherit);
+  box-shadow: 0 4px 16px rgba(76, 63, 193, 0.18);
+  animation: met-tutorial-bubble-in 300ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
+  transform-origin: 30px 100%;
+}
+
+/* Tail pointing down at the anchor (the mascot). */
+
+.met-tutorial-bubble--anchored::after {
+  content: '';
+  position: absolute;
+  left: 28px;
+  bottom: -11px;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-right: 1.5px solid var(--met-tutorial-bubble-border);
+  border-bottom: 1.5px solid var(--met-tutorial-bubble-border);
+  transform: rotate(45deg);
+}
+
+@keyframes met-tutorial-bubble-in {
+  from { opacity: 0; transform: scale(0.7); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.met-tutorial-text {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.375;
+  text-align: center;
+}
+
+.met-tutorial-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Both buttons ≥ 44px — sized for small fingers. */
+
+.met-tutorial-speak,
+.met-tutorial-next {
+  min-height: 44px;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  transition: transform 120ms ease, filter 150ms ease;
+}
+
+/* No browser ring (the black outline); a brand ring for keyboard users only. */
+
+.met-tutorial-speak:focus,
+.met-tutorial-next:focus {
+  outline: none;
+}
+
+.met-tutorial-speak:focus-visible,
+.met-tutorial-next:focus-visible {
+  outline: 3px solid var(--met-tutorial-accent);
+  outline-offset: 3px;
+}
+
+.met-tutorial-speak:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 0 var(--met-tutorial-accent-edge);
+}
+
+/* Same 3D key as "فهمت" (shape, edge, press) — purple, so it reads as secondary. */
+
+.met-tutorial-speak {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  flex: none;
+  border-radius: 12px;
+  background: var(--met-tutorial-accent);
+  box-shadow: 0 4px 0 var(--met-tutorial-accent-edge);
+  color: white;
+}
+
+.met-tutorial-speak:hover {
+  filter: brightness(1.1);
+}
+
+/* Yellow = "go" (🔊 stays purple: secondary). Darker bottom edge, like the 3D keys. */
+
+.met-tutorial-next {
+  flex: 1;
+  padding: 0 24px;
+  border-radius: 12px;
+  background: var(--met-tutorial-next-bg);
+  box-shadow: 0 4px 0 var(--met-tutorial-next-edge);
+  color: var(--met-tutorial-next-text);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.met-tutorial-next:hover {
+  filter: brightness(1.1);
+}
+
+.met-tutorial-next:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 0 var(--met-tutorial-next-edge);
+}
+
+.met-tutorial-dots {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.met-tutorial-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--met-tutorial-accent-soft);
+  transition: background 200ms ease;
+}
+
+.met-tutorial-dots span.is-done {
+  background: color-mix(in srgb, var(--met-tutorial-accent) 45%, white);
+}
+
+.met-tutorial-dots span.is-current {
+  background: var(--met-tutorial-accent);
+}
+
+@keyframes met-tutorial-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .met-tutorial-hand { transition: none; }
+  .met-tutorial-hand-press,
+  .met-tutorial-ripple,
+  .met-tutorial-hop { animation: none; }
+}
+
 /* Responsive Overrides - must be last */
 
 /**
@@ -3659,13 +4168,25 @@ th.exercise-table-cell.exercise-table-cell--last-row:last-child {
   border-color: #4a90d9;
 }
 
-/* Chip style for dropped values - matches drag-option button */
+/* Slots holding a chip keep a hidden copy of the empty input as a sizer and lay
+   the chip over it (see PlacedInputChip), so dropping never resizes the slot. */
+.inline-input-droppable,
+.fraction-slot-droppable {
+  position: relative;
+}
+
+/* Chip style for dropped values - colors match drag-option button. Size comes
+   from the slot, so padding only keeps text off the border. */
 .inline-input-chip {
-  padding: 10px 20px;
+  padding: 0 4px;
   border: 2px solid #9b8fc7;
   border-radius: 8px;
   background: #e8e4f3;
-  font-size: 16px;
+  font-size: inherit;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: 500;
   color: #5c5470;
   cursor: pointer;

package/package.json

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