@mathscan/math-exercise-engine 1.2.13 → 1.2.15

package/dist/style.css

@@ -515,6 +515,87 @@ mark {
   opacity: 1;
 }
 
+/* ========================================
+   DROP INPUT
+   ======================================== */
+
+.drop-input {
+  direction: ltr;
+  text-align: center;
+}
+
+/* Border, color and padding come from .inline-input. 5em is InlineInput's default
+   box. Low specificity on purpose, so a host's .inline-input size wins. */
+
+.drop-input.inline-input,
+.drop-input-sizer.inline-input {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 5em;
+  /* A placeholder longer than the box grows it, on one line. Not fit-content: its
+     shrink-wrapped parent gets its width from this box, so that would wrap the text. */
+  min-width: max-content;
+}
+
+/* Keeps a line box when the box has no text, so it has the input's height. Only
+   when empty: beside a placeholder it is a flex item that a host's gap pushes apart. */
+
+.drop-input--empty:empty::before,
+.drop-input-sizer:empty::before {
+  content: '\200b';
+}
+
+/* Not a real <input>, so ::placeholder can't style it and it would read as an
+   answer. Faded from the input's own color, so it suits any host without an override.
+   Padding is here because hosts set .inline-input padding to 0 for a centered short
+   value, which leaves a box-sized placeholder touching the border. */
+
+.drop-input-placeholder {
+  padding: 0 0.25em;
+  color: var(--exercise-placeholder, color-mix(in srgb, currentColor 50%, transparent));
+  font-weight: normal;
+}
+
+/* Sizer and chip share one grid cell, so the cell fits whichever is bigger. */
+
+.drop-input.drop-input--filled {
+  display: inline-grid;
+}
+
+.drop-input--filled > * {
+  grid-area: 1 / 1;
+}
+
+.drop-input-sizer {
+  visibility: hidden;
+}
+
+.drop-input--locked {
+  cursor: default;
+}
+
+/* Unresolved stored value (no matching bank option) — plain text, still clickable to clear. */
+
+.drop-input-unresolved {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drop-input.widget--correct {
+  border-color: var(--exercise-correct, #22c55e);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-correct, #22c55e) 15%, transparent);
+}
+
+.drop-input.widget--incorrect {
+  border-color: var(--exercise-incorrect, #ef4444);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--exercise-incorrect, #ef4444) 15%, transparent);
+}
+
 /* ========================================
    VALIDATION STATUS
    ======================================== */
@@ -636,19 +717,23 @@ mark {
   box-shadow: 0 2px 4px rgba(0, 122, 204, 0.2);
 }
 
-/* Bounce hint — repeats until the student drags any option */
+/* A gentle lift and soft halo invite the student to pick up a chip. */
 
 @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); }
+  0%, 100% {
+    transform: translateY(0);
+    box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
+  }
+  40%, 55% {
+    transform: translateY(-5px);
+    box-shadow:
+      0 0 0 5px color-mix(in srgb, var(--exercise-accent) 16%, transparent),
+      0 6px 12px color-mix(in srgb, var(--exercise-accent) 22%, transparent);
+  }
 }
 
 .drag-option.drag-option--hint {
-  transform-origin: center bottom;
-  animation: drag-option-hint 0.8s ease-in-out 0.4s 2 both;
+  animation: drag-option-hint 1.8s ease-in-out 0.65s 1 both;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -669,6 +754,35 @@ button.drag-option {
   font-weight: var(--exercise-font-weight);
 }
 
+/* Cards holding images or colored text: on the accent surface they could become
+   unreadable, so only the surface changes. Text-only cards stay plain chips.
+   Same specificity as button.drag-option, so a host's restyle of that rule wins
+   here too and all cards in a bank match. */
+
+button.drag-option--rich {
+  background: var(--exercise-bg);
+  color: var(--exercise-text);
+}
+
+/* The mobile fixed chip width would clip an image. */
+
+.rich-drag-option-slot button.drag-option {
+  width: auto;
+}
+
+.rich-option-content {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+/* Text takes its color from the card it sits on. COLOR_TEXT keeps its own. */
+
+.rich-option-content .text-item,
+.rich-option-content .bold-text {
+  color: inherit;
+}
+
 /* ========================================
    RADIO OPTIONS
    ======================================== */
@@ -3672,6 +3786,7 @@ button.drag-option {
   --met-tutorial-next-text: #2e2463;
   --met-tutorial-text: #2e2463;
   --met-tutorial-bubble-border: #e0d9ff;
+  --met-tutorial-fill-bg: #fff;
 
   position: fixed;
   inset: 0;
@@ -3799,12 +3914,24 @@ button.drag-option {
   animation: met-tutorial-hop 550ms ease-in-out both;
 }
 
+.met-tutorial-hop--digit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin: -12px 0 0 -12px;
+  color: white;
+  font-size: 18px;
+  font-weight: 700;
+}
+
 @keyframes met-tutorial-hop {
   from { offset-distance: 0%; }
   to { offset-distance: 100%; opacity: 0.2; }
 }
 
-/* Dots over the real (empty) answer box — never digits. */
+/* Guided digits (or generic dots) over the real answer box. */
 
 .met-tutorial-fill {
   display: flex;
@@ -3812,6 +3939,8 @@ button.drag-option {
   justify-content: center;
   gap: 0.35em;
   border-radius: 10px;
+  /* Opaque: a prefill or typed value in the real box must not show through. */
+  background: var(--met-tutorial-fill-bg);
   pointer-events: none;
   font-size: 18px;
   font-weight: 700;
@@ -4079,12 +4208,6 @@ button.drag-option {
   user-select: none;
 }
 
-.draggable.dragging {
-  /* Hide original while drag overlay follows cursor to avoid duplicate render.
-     visibility:hidden preserves layout space so neighbors don't shift. */
-  visibility: hidden;
-}
-
 /* Droppable base */
 .droppable {
   display: inline-block;
@@ -4120,6 +4243,35 @@ button.drag-option {
   cursor: grabbing;
 }
 
+/* Carries the theme variables to the overlay; drops the root's own card look. */
+.math-exercise-renderer.rich-drag-overlay-root {
+  padding: 0;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.rich-drag-overlay-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Same light surface as .drag-option--rich in the bank. */
+.drag-overlay-option--rich {
+  background: var(--exercise-bg);
+  color: var(--exercise-text);
+}
+
+/* The droppable wrapper carries the inline flow (its child .drop-input keeps
+   .inline-widget for the no-dnd path). drop-active styling is shared with
+   .inline-input-droppable below. */
+.drop-input-droppable {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
 /* Note: .drag-options and .drag-option base styles live in styles/widgets.css
    (themed via CSS vars). Don't duplicate them here. */
 
@@ -4127,20 +4279,34 @@ button.drag-option {
   display: inline-block;
 }
 
-/* Slot container - maintains space when item is dragged out */
+/* Slot container - maintains space when item is dragged out.
+   Shared by the legacy chip bank and the rich DRAGGABLE_OPTIONS bank. */
 .drag-option-slot {
   display: inline-flex;
   min-width: 60px;
   min-height: 44px;
 }
 
-/* Empty slot - shows where item came from */
+/* Empty slot - shows where a chip came from, from pick-up on. It is sized by an
+   invisible copy of the chip; the outline draws inside so the size stays exact.
+   Solid, not dashed: dashed is the look of the inputs it must not be mistaken for. */
 .drag-option-empty {
-  min-width: 60px;
-  min-height: 44px;
-  border: 2px dashed #d4c5a9;
+  outline: 1px solid color-mix(in srgb, var(--exercise-accent) 30%, transparent);
+  outline-offset: -1px;
   border-radius: 8px;
-  background: rgba(212, 197, 169, 0.2);
+  background: #FFEECA;
+}
+
+.drag-option-empty .drag-option {
+  visibility: hidden;
+}
+
+/* Rich cards vary in size, so the slot always matches its hidden copy, even if a
+   host gives .drag-option-empty a fixed width or a border that adds to the size.
+   The outline above still draws the edge. */
+.rich-drag-option-slot .drag-option-empty {
+  width: auto;
+  border: 0;
 }
 
 /* Inline input droppable */
@@ -4203,8 +4369,19 @@ button.drag-option {
   opacity: 0.4;
 }
 
-/* When droppable is active, style the input inside */
-.inline-input-droppable.drop-active .inline-input {
+/* A chip in a DROP_INPUT stacks with its sizer instead of overlaying it, so a
+   large card can grow the slot. See .drop-input--filled. */
+.inline-input-chip.placed-rich-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+}
+
+/* When droppable is active, style the input inside.
+   DROP_INPUT shares the inline-input affordance. */
+.inline-input-droppable.drop-active .inline-input,
+.drop-input-droppable.drop-active .drop-input {
   border-color: #4a90d9;
   background-color: rgba(74, 144, 217, 0.05);
 }

package/package.json

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