@mathscan/math-exercise-engine 1.1.4 → 1.1.6

package/dist/style.css

@@ -521,6 +521,10 @@ mark {
   /* Container for drag options widget */
 }
 
+.pill-bg-path {
+  fill: var(--exercise-pill-bg, #FFE7B4);
+}
+
 /*
  * Shared base for every widget that sits inline within a text line.
  *
@@ -1681,6 +1685,195 @@ th.exercise-table-cell {
   outline-offset: 2px;
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   Clock Widget Styles
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.clock {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  margin: 4px;
+  user-select: none;
+}
+
+/* ── Analog ──────────────────────────────────────────────────────────────── */
+
+.clock-analog {
+  position: relative;
+}
+
+/* Circular wrapper — width/height/offset set via inline styles in ClockRenderer.tsx
+   (derived from FACE_RADIUS and INTERACTIVE_SCALE so they stay in sync).
+   box-shadow respects border-radius, so shadows align with the face.
+   Inset shadow goes on ::after (z-index:1) so it paints above the SVG child. */
+
+.clock-face-ring {
+  position: relative;
+  display: inline-block;
+  border-radius: 50%;
+  box-shadow: 0px 4.57px 0px 0px #00000040;
+}
+
+.clock-face-ring::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: 0px 3px 0px 4px #00000026 inset;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.clock-svg {
+  display: block;
+  touch-action: none;
+  /* top/left offset set via inline style in ClockRenderer.tsx */
+  position: absolute;
+}
+
+.clock-face {
+  fill: #ffffff;
+  stroke: #ae9cff;
+  stroke-width: 7;
+}
+
+.clock-tick-hour {
+  stroke: #705dc0;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+}
+
+.clock-tick-minute {
+  stroke: #c6b6ff;
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+.clock-number {
+  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  fill: #705dc0;
+  stroke: #ae9cff;
+  stroke-width: 2.5px;
+  paint-order: stroke fill;
+}
+
+.clock-hand {
+  stroke: transparent;
+}
+
+/* ── Arrow hands ─────────────────────────────────────────────────────────── */
+
+.clock-arrow {
+  fill: #ae9cff;
+  stroke: #705dc0;
+  stroke-width: 1;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.clock-interactive .clock-arrow {
+  stroke-dasharray: 3 2;
+}
+
+.clock-arrow-minute {
+  fill: #705dc0;
+}
+
+.clock-center {
+  fill: #705dc0;
+}
+
+.clock-interactive .clock-hand {
+  cursor: grab;
+}
+
+.clock-interactive .clock-hand:active {
+  cursor: grabbing;
+}
+
+.clock-interactive .clock-arrow-hour {
+  fill: #c8b8ff;
+}
+
+.clock-period-badge {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #705dc0;
+  background: rgba(255, 255, 255, 0.92);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+/* ── Digital ─────────────────────────────────────────────────────────────── */
+
+.clock-digital-wrapper {
+  --clock-digital-border: 5px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.clock-digital-tabs {
+  display: block;
+  margin-bottom: calc(-1 * var(--clock-digital-border));
+}
+
+.clock-digital-display {
+  font-family: 'Courier New', ui-monospace, monospace;
+  font-size: 28px;
+  font-weight: 700;
+  color: #705dc0;
+  background: #fffbf3;
+  padding: 6px 12px;
+  border-radius: 12px;
+  border: var(--clock-digital-border) solid #ffca76;
+  box-shadow: 0px 4px 1px 0px rgba(255, 202, 118, 0.4) inset;
+  letter-spacing: 2px;
+}
+
+/* ── Validation states ───────────────────────────────────────────────────── */
+
+.clock-interactive.clock-correct .clock-arrow,
+.clock-interactive.clock-incorrect .clock-arrow {
+  stroke-dasharray: none;
+}
+
+.clock-correct .clock-arrow {
+  fill: #16a34a;
+  stroke: #16a34a;
+}
+
+.clock-correct .clock-arrow-hour {
+  fill: #f2ffee;
+  stroke: #16a34a;
+}
+
+.clock-incorrect .clock-arrow {
+  fill: #dc2626;
+  stroke: #dc2626;
+}
+
+.clock-incorrect .clock-arrow-hour {
+  fill: #fff0f7;
+  stroke: #dc2626;
+}
+
+.clock-correct .clock-digital-display {
+  border-color: #16a34a;
+  background: #f0fdf4;
+}
+
+.clock-incorrect .clock-digital-display {
+  border-color: #dc2626;
+  background: #fef2f2;
+}
+
 /**
  * Button & Action Styles
  *

package/package.json

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