@mathscan/math-exercise-engine 1.0.15 → 1.0.16

package/dist/style.css

@@ -586,6 +586,49 @@ button.drag-option {
   color: white;
 }
 
+/* ========================================
+   NUMERIC KEYPAD V2 (diamond / 45-degree style)
+   ======================================== */
+
+.diamond-keypad {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  padding: 0;
+}
+
+.diamond-keypad-row {
+  display: flex;
+  gap: 20px;
+}
+
+.diamond-keypad .keypad-btn {
+  transform: rotate(45deg);
+}
+
+.diamond-keypad .keypad-btn span {
+  transform: rotate(-45deg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  line-height: 1;
+}
+
+.diamond-keypad .keypad-btn:hover {
+  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.18);
+}
+
+.diamond-keypad .keypad-btn:active {
+  transform: rotate(45deg) scale(0.92);
+}
+
+.diamond-keypad .keypad-btn-backspace {
+  border-color: var(--exercise-accent, #705dc0);
+  color: var(--exercise-accent, #705dc0);
+}
+
 /* ========================================
    TABLE LAYOUT
    ======================================== */
@@ -679,6 +722,152 @@ th.exercise-table-cell {
   display: inline-flex;
 }
 
+/* ========================================
+   VISUAL FRACTION WIDGET
+   ======================================== */
+
+.visual-fraction-widget {
+  --visual-fraction-size: clamp(7rem, 24vw, 12rem);
+  --visual-fraction-part-size: 1.35rem;
+  --visual-fraction-line-width: 1px;
+  --visual-fraction-svg-line-width: 0.5px;
+  --visual-fraction-gap: var(--visual-fraction-line-width);
+  --visual-fraction-border-radius: 0;
+  --visual-fraction-border-color: #705DC0;
+  --visual-fraction-empty-bg: var(--exercise-bg, #fff);
+  --visual-fraction-hover-color: #E6E0FF;
+  --visual-fraction-part-color: #AE9CFF;
+  --visual-fraction-part-text-color: #fff;
+  --visual-fraction-label-color: var(--exercise-text-light, #555);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.visual-fraction-widget__parts {
+  display: grid;
+  gap: var(--visual-fraction-gap);
+  border: var(--visual-fraction-line-width) solid var(--visual-fraction-border-color);
+  border-radius: var(--visual-fraction-border-radius);
+  background: var(--visual-fraction-border-color);
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.visual-fraction-widget__parts--horizontal {
+  grid-template-columns: repeat(var(--visual-fraction-divisions, 1), var(--visual-fraction-part-size));
+  grid-template-rows: var(--visual-fraction-part-size);
+  width: max-content;
+}
+
+.visual-fraction-widget__parts--vertical {
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(var(--visual-fraction-divisions, 1), var(--visual-fraction-part-size));
+  width: var(--visual-fraction-part-size);
+  height: max-content;
+}
+
+.visual-fraction-widget__part {
+  aspect-ratio: 1;
+  width: var(--visual-fraction-part-size);
+  height: var(--visual-fraction-part-size);
+  background: var(--visual-fraction-empty-bg);
+  color: var(--exercise-text, #333);
+  transition: background 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
+}
+
+.visual-fraction-widget__part[role="button"] {
+  cursor: pointer;
+}
+
+.visual-fraction-widget__part[role="button"]:hover {
+  background: var(--visual-fraction-hover-color);
+}
+
+.visual-fraction-widget__part[role="button"]:focus-visible {
+  outline: 2px solid var(--exercise-border-focus, var(--exercise-primary, #007acc));
+  outline-offset: -2px;
+}
+
+.visual-fraction-widget__part--filled,
+.visual-fraction-widget__part--answer {
+  background: var(--visual-fraction-part-color);
+  color: var(--visual-fraction-part-text-color);
+}
+
+.visual-fraction-widget__part--filled[role="button"]:hover,
+.visual-fraction-widget__part--answer[role="button"]:hover {
+  background: var(--visual-fraction-part-color);
+  color: var(--visual-fraction-part-text-color);
+}
+
+.visual-fraction-widget__sector {
+  fill: var(--visual-fraction-empty-bg);
+  stroke: var(--visual-fraction-border-color);
+  stroke-width: var(--visual-fraction-svg-line-width);
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  transition: fill 0.2s ease, filter 0.2s ease;
+}
+
+.visual-fraction-widget__sector[role="button"] {
+  cursor: pointer;
+}
+
+.visual-fraction-widget__sector[role="button"]:hover {
+  fill: var(--visual-fraction-hover-color);
+}
+
+.visual-fraction-widget__sector[role="button"]:focus-visible {
+  outline: none;
+  filter: drop-shadow(0 0 0.18rem var(--exercise-border-focus, var(--exercise-primary, #007acc)));
+}
+
+.visual-fraction-widget__sector.visual-fraction-widget__part--filled,
+.visual-fraction-widget__sector.visual-fraction-widget__part--answer,
+.visual-fraction-widget__sector.visual-fraction-widget__part--filled[role="button"]:hover,
+.visual-fraction-widget__sector.visual-fraction-widget__part--answer[role="button"]:hover {
+  fill: var(--visual-fraction-part-color);
+}
+
+.visual-fraction-widget.widget--correct .visual-fraction-widget__parts {
+  border-color: var(--exercise-correct, #22c55e);
+  background: var(--exercise-correct, #22c55e);
+}
+
+.visual-fraction-widget.widget--incorrect .visual-fraction-widget__parts {
+  border-color: var(--exercise-incorrect, #ef4444);
+  background: var(--exercise-incorrect, #ef4444);
+}
+
+.visual-fraction-widget.widget--correct .visual-fraction-widget__sector {
+  stroke: var(--exercise-correct, #22c55e);
+}
+
+.visual-fraction-widget.widget--incorrect .visual-fraction-widget__sector {
+  stroke: var(--exercise-incorrect, #ef4444);
+}
+
+.visual-fraction-widget__shape {
+  width: var(--visual-fraction-size);
+  height: var(--visual-fraction-size);
+  overflow: visible;
+}
+
+.visual-fraction-widget--grid .visual-fraction-widget__parts {
+  grid-template-columns: repeat(var(--visual-fraction-grid-cols, 3), var(--visual-fraction-part-size));
+  width: max-content;
+}
+
+.visual-fraction-widget__label {
+  color: var(--visual-fraction-label-color);
+  font-size: 0.9em;
+  font-weight: var(--exercise-font-weight, 500);
+}
+
 /* ========================================
    MATCHER WIDGET
    ======================================== */
@@ -686,101 +875,76 @@ th.exercise-table-cell {
 .matcher-widget {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 16px;
+  gap: clamp(10px, 2.5vw, 16px);
+  width: min(100%, 580px);
+  margin-inline: auto;
 }
 
 .matcher-row {
   display: grid;
-  grid-template-columns: repeat(var(--matcher-cols, 3), 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(var(--matcher-cols, 3), minmax(0, 1fr));
+  gap: clamp(10px, 2.5vw, 16px);
 }
 
 .matcher-card {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  min-height: 56px;
-  padding: 14px 12px;
-  border: 2.5px solid var(--exercise-border, #ddd);
-  border-radius: 14px;
-  background: var(--exercise-bg, #fff);
-  color: var(--exercise-text, #333);
-  font-size: var(--exercise-font-size, 1rem);
-  font-weight: var(--exercise-font-weight, 400);
-  line-height: 1.4;
+  min-height: clamp(72px, 14vw, 96px);
+  padding: clamp(8px, 2vw, 12px);
+  border: 2px solid #FFCA76;
+  border-radius: clamp(12px, 3vw, 17px);
+  background: #FFFFFF;
+  color: #333333;
   text-align: center;
-  overflow-wrap: break-word;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
   cursor: pointer;
-  user-select: none;
+  box-shadow: 0 4px 0 rgba(255, 202, 118, 0.22);
   transition:
-    border-color 0.2s ease,
-    background 0.2s ease,
-    color 0.2s ease,
-    box-shadow 0.2s ease,
-    transform 0.2s ease,
-    filter 0.2s ease;
+    background 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    border-color 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
+    box-shadow 280ms ease;
 }
 
+.matcher-card:active {
+  transform: scale(0.95);
+}
+
+/* Intentionally dropped — kept for reference if hover feedback is restored.
 .matcher-card:hover {
   border-color: var(--exercise-accent, #705dc0);
   box-shadow: 0 4px 10px rgba(112, 93, 192, 0.22);
-}
-
-.matcher-card:active {
-  transform: scale(0.96);
-}
+} */
 
 .matcher-card--selected {
-  background: var(--matcher-card-color);
+  background: color-mix(in srgb, var(--matcher-card-color) 12%, #FFFFFF);
   border-color: var(--matcher-card-color);
-  color: var(--matcher-card-text-color, #1a1a1a);
-  transform: translateY(-3px);
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 4px 0 color-mix(in srgb, var(--matcher-card-color) 30%, transparent);
+  transform: scale(1.04);
 }
 
-/* Force all nested text descendants to inherit the button's color so
-   validation/assignment colors aren't masked by their own color rules. */
-
-.matcher-card--selected * {
-  color: inherit;
-}
-
-.matcher-card--selected:hover {
-  border-color: var(--exercise-accent, #705dc0);
-  filter: brightness(1.07);
+.widget--correct .matcher-card--selected {
+  border-color: #43B925;
+  background: #F2FFEE;
+  box-shadow: 0 4px 0 rgba(67, 185, 37, 0.30);
 }
 
-.matcher-card--selected:active {
-  transform: scale(0.96) translateY(0);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  filter: none;
-}
-
-.matcher-widget.widget--correct .matcher-card--selected {
-  background: var(--exercise-correct, #22c55e);
-  border-color: var(--exercise-correct, #22c55e);
-  color: #fff;
+.widget--incorrect .matcher-card--selected {
+  border-color: #D6234D;
+  background: #FFF0F7;
+  box-shadow: 0 4px 0 rgba(214, 35, 77, 0.25);
 }
 
-.matcher-widget.widget--correct .matcher-card:not(.matcher-card--selected) {
+/* Intentionally dropped — kept for reference if unselected-card validation feedback is restored.
+.widget--correct .matcher-card:not(.matcher-card--selected) {
   border-color: var(--exercise-correct, #22c55e);
   opacity: 0.5;
 }
 
-.matcher-widget.widget--incorrect .matcher-card--selected {
-  background: var(--exercise-incorrect, #ef4444);
-  border-color: var(--exercise-incorrect, #ef4444);
-  color: #fff;
-}
-
-.matcher-widget.widget--incorrect .matcher-card:not(.matcher-card--selected) {
+.widget--incorrect .matcher-card:not(.matcher-card--selected) {
   border-color: var(--exercise-incorrect, #ef4444);
   opacity: 0.5;
-}
+} */
 
 /**
  * Number Line Styles
@@ -800,6 +964,10 @@ th.exercise-table-cell {
   margin-bottom: var(--exercise-margin-bottom);
   user-select: none;
   --nl-chip-zone-height: 3rem;
+  --nl-position-content-height: 0px;
+  --nl-position-content-min-height: 2.8rem;
+  --nl-visual-fraction-part-size: clamp(0.8rem, 2vw, 1rem);
+  --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;
 }
@@ -818,7 +986,7 @@ th.exercise-table-cell {
 .number-line-content-row {
   position: relative;
   width: 100%;
-  min-height: 2.8rem;
+  min-height: max(var(--nl-position-content-min-height), var(--nl-position-content-height));
 }
 
 .number-line-position-content {
@@ -831,6 +999,11 @@ th.exercise-table-cell {
   z-index: 1;
 }
 
+.number-line-position-content .visual-fraction-widget {
+  --visual-fraction-part-size: var(--nl-visual-fraction-part-size);
+  --visual-fraction-size: var(--nl-visual-fraction-size);
+}
+
 /* ========================================
    ROW 2 — AXIS (track + ticks + arrows + dots)
    ======================================== */

package/package.json

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