@mathscan/math-exercise-engine 1.1.6 → 1.1.8

package/dist/style.css

@@ -142,7 +142,9 @@
    ======================================== */
 
 .exercise-layout-container {
-  /* Default: regular block layout */
+  /* Default: regular block layout.
+     position:relative makes this the anchor for the absolute tools-overlay. */
+  position: relative;
 }
 
 .exercise-layout-container.has-keypad {
@@ -2083,6 +2085,11 @@ th.exercise-table-cell {
   border-color: #8578b0;
 }
 
+/* Original chip dims while its copy is shown in the drag overlay */
+.inline-input-chip.dragging {
+  opacity: 0.4;
+}
+
 /* When droppable is active, style the input inside */
 .inline-input-droppable.drop-active .inline-input {
   border-color: #4a90d9;
@@ -2093,6 +2100,7 @@ th.exercise-table-cell {
    DRAGGABLE TOOLS (Ruler, Protractor, etc.)
    ============================================ */
 
+/* Default overlay — absolute positioning (for floating-over-exercise future use) */
 .tools-overlay {
   position: absolute;
   top: 0;
@@ -2101,11 +2109,13 @@ th.exercise-table-cell {
   height: 100%;
   pointer-events: none;
   z-index: 50;
+  overflow: visible;
 }
 
 .draggable-tool {
   pointer-events: auto;
-  transition: box-shadow 0.15s ease;
+  touch-action: none;
+  border-radius: 3px;
 }
 
 .draggable-tool:hover {
@@ -2116,37 +2126,58 @@ th.exercise-table-cell {
   filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
 }
 
-/* Rotate handle */
-.tool-rotate-handle {
+/* Ensure exercise container allows tools to float outside */
+.math-exercise-renderer {
+  position: relative;
+  overflow: visible;
+}
+
+/* ── Intro jiggle — plays on mount so students know tools are draggable ─────── */
+@keyframes tool-jiggle {
+  0%, 100% { transform: translateX(0) rotate(0deg); }
+  20%       { transform: translateX(-5px) rotate(-2deg); }
+  40%       { transform: translateX(5px)  rotate(2deg); }
+  60%       { transform: translateX(-3px) rotate(-1deg); }
+  80%       { transform: translateX(3px)  rotate(1deg); }
+}
+
+.tool-content-jiggle {
+  animation: tool-jiggle 0.55s ease-in-out 0.4s 2 both;
+}
+
+/* ── Flip button (set-square mirror) ─────────────────────────────────────────── */
+.tool-flip-btn {
   position: absolute;
-  top: -30px;
+  bottom: -36px;
   left: 50%;
   transform: translateX(-50%);
-  width: 24px;
-  height: 24px;
-  background: #e8e4f3;
-  border: 2px solid #9b8fc7;
+  width: 30px;
+  height: 30px;
+  border: 1.5px solid #705DC0;
   border-radius: 50%;
+  background: #fff;
+  color: #705DC0;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: grab;
-  font-size: 14px;
-  color: #5c5470;
-  opacity: 0;
-  transition: opacity 0.15s ease;
+  pointer-events: auto;
+  z-index: 102;
+  opacity: 0.78;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+  padding: 0;
+  box-shadow: 0 1px 5px rgba(112, 93, 192, 0.22);
 }
 
-.draggable-tool:hover .tool-rotate-handle {
+.tool-flip-btn:hover {
   opacity: 1;
+  background: #705DC0;
+  color: #fff;
 }
 
-.tool-rotate-handle:hover {
-  background: #e8e4f3;
-}
-
-/* Ensure exercise container has relative positioning for tools */
-.math-exercise-renderer {
-  position: relative;
-  min-height: 200px;
+.tool-flip-btn--active {
+  background: #705DC0;
+  color: #fff;
+  opacity: 1;
+  box-shadow: 0 1px 5px rgba(112, 93, 192, 0.4);
 }

package/package.json

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