@mathscan/math-exercise-engine 1.1.4 → 1.1.6

package/dist/index.mjs

@@ -27,6 +27,8 @@ const AST_TYPES = {
   FRACTION: "Fraction",
   /** Inline image element */
   IMAGE: "Image",
+  /** Clock widget — analog/digital, display or interactive */
+  CLOCK: "Clock",
   // ═══════════════════════════════════════════════════════════════════════════
   // Blocks
   // ═══════════════════════════════════════════════════════════════════════════
@@ -112,6 +114,8 @@ const JSON_TYPES = {
   IMAGE: "image",
   /** Reference to a widget */
   WIDGET_REF: "widget-ref",
+  /** Clock widget (inline): analog or digital, display or interactive */
+  CLOCK: "clock",
   /** Line break element */
   LINEBREAK: "linebreak",
   /** Grouped layout items */
@@ -315,6 +319,10 @@ const COUNTER = createToken({
   name: "COUNTER",
   pattern: /COUNTER/
 });
+const CLOCK = createToken({
+  name: "CLOCK",
+  pattern: /CLOCK/
+});
 const HIGHLIGHT = createToken({
   name: "HIGHLIGHT",
   pattern: /HIGHLIGHT(?!_TEXT)/
@@ -486,6 +494,7 @@ const allTokens = [
   BOTTOM_ROW,
   CELL,
   COUNTER,
+  CLOCK,
   HIGHLIGHT,
   VISUAL_FRACTION,
   FRACTION,
@@ -1159,9 +1168,17 @@ class MathExerciseParser extends CstParser {
         // W_S_I (inline input widget) — excluded in display-only contexts (e.g. MATCHER ITEM)
         { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineInput) },
         // INLINE_DRAG_OPTION (single draggable option inline with text) — excluded in display-only
-        { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineDragOption) }
+        { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineDragOption) },
+        // CLOCK (inline clock widget)
+        { ALT: () => this.SUBRULE(this.clock) }
       ]);
     });
+    this.clock = this.RULE("clock", () => {
+      this.CONSUME(CLOCK);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+    });
     this.textHighlighter = this.RULE("textHighlighter", () => {
       this.OR([
         { ALT: () => this.CONSUME(TEXT_HIGHLIGHTER) },
@@ -1519,6 +1536,33 @@ const InlineDragOptionSchema = z.object({
   type: z.literal(AST_TYPES.INLINE_DRAG_OPTION),
   value: z.string().min(1)
 });
+const CLOCK_TYPES = ["analog", "digital"];
+const CLOCK_MODES = ["display", "interactive"];
+const CLOCK_FORMATS = ["12h", "24h"];
+const CLOCK_TIME_REGEX = /^([01]\d|2[0-3]):[0-5]\d$/;
+const TimeStringSchema = z.string().regex(CLOCK_TIME_REGEX, 'must be "HH:MM" in 24h format');
+const DisplayClockInlineSchema = z.object({
+  type: z.literal(AST_TYPES.CLOCK),
+  mode: z.literal("display"),
+  clockType: z.enum(CLOCK_TYPES),
+  value: TimeStringSchema,
+  format: z.enum(CLOCK_FORMATS).optional(),
+  name: z.string().optional()
+});
+const InteractiveClockInlineSchema = z.object({
+  type: z.literal(AST_TYPES.CLOCK),
+  mode: z.literal("interactive"),
+  clockType: z.literal("analog"),
+  value: TimeStringSchema,
+  answer: TimeStringSchema,
+  format: z.enum(CLOCK_FORMATS).optional(),
+  snap: z.number().int().min(1).max(60).optional(),
+  name: z.string()
+});
+const ClockInlineSchema = z.discriminatedUnion("mode", [
+  DisplayClockInlineSchema,
+  InteractiveClockInlineSchema
+]);
 const InlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
@@ -1529,7 +1573,8 @@ const InlineNodeSchema = z.union([
   FractionInlineSchema,
   ImageInlineSchema,
   VisualFractionInlineSchema,
-  InlineDragOptionSchema
+  InlineDragOptionSchema,
+  ClockInlineSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
@@ -1622,6 +1667,21 @@ function createInlineDragOption(value) {
     value
   });
 }
+function createDisplayClock(params) {
+  return ClockInlineSchema.parse({
+    type: AST_TYPES.CLOCK,
+    mode: "display",
+    ...params
+  });
+}
+function createInteractiveClock(params) {
+  return ClockInlineSchema.parse({
+    type: AST_TYPES.CLOCK,
+    mode: "interactive",
+    clockType: "analog",
+    ...params
+  });
+}
 function isFreeText(value) {
   return FreeTextInlineSchema.safeParse(value).success;
 }
@@ -1637,6 +1697,9 @@ function isFraction(value) {
 function isImage(value) {
   return ImageInlineSchema.safeParse(value).success;
 }
+function isClock(value) {
+  return ClockInlineSchema.safeParse(value).success;
+}
 function isInlineNode(value) {
   return InlineNodeSchema.safeParse(value).success;
 }
@@ -2683,8 +2746,66 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.inlineDragOption) {
       return this.visit(ctx.inlineDragOption);
     }
+    if (ctx.clock) {
+      return this.visit(ctx.clock);
+    }
     throw new Error("Unknown inline element");
   }
+  // Manual checks below duplicate what ClockInlineSchema.parse() enforces, but produce
+  // DSL-friendly error messages (e.g. 'CLOCK: value is required') instead of Zod paths.
+  clock(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const mode = params.mode ?? "display";
+    if (!CLOCK_MODES.includes(mode)) {
+      throw new Error(`CLOCK: mode must be one of ${CLOCK_MODES.join(", ")} (got "${mode}")`);
+    }
+    const clockType = params.type;
+    if (!clockType) {
+      throw new Error('CLOCK: type is required ("analog" or "digital")');
+    }
+    if (!CLOCK_TYPES.includes(clockType)) {
+      throw new Error(`CLOCK: type must be one of ${CLOCK_TYPES.join(", ")} (got "${clockType}")`);
+    }
+    const value = params.value;
+    if (!value) {
+      throw new Error('CLOCK: value is required ("HH:MM" 24h format)');
+    }
+    if (!CLOCK_TIME_REGEX.test(value)) {
+      throw new Error(`CLOCK: value must be "HH:MM" in 24h format (got "${value}")`);
+    }
+    const format = params.format;
+    if (format !== void 0 && !CLOCK_FORMATS.includes(format)) {
+      throw new Error(`CLOCK: format must be one of ${CLOCK_FORMATS.join(", ")} (got "${format}")`);
+    }
+    const name = params.name;
+    const answer = params.answer;
+    const snap = params.snap;
+    if (mode === "display") {
+      if (answer !== void 0) {
+        throw new Error('CLOCK: "answer" is only valid when mode="interactive"');
+      }
+      if (snap !== void 0) {
+        throw new Error('CLOCK: "snap" is only valid when mode="interactive"');
+      }
+      return createDisplayClock({ clockType, value, format, name });
+    }
+    if (clockType !== "analog") {
+      throw new Error('CLOCK: interactive mode requires type="analog" (digital clocks cannot be interactive)');
+    }
+    if (answer === void 0) {
+      throw new Error('CLOCK: interactive mode requires "answer"');
+    }
+    if (!CLOCK_TIME_REGEX.test(answer)) {
+      throw new Error(`CLOCK: answer must be "HH:MM" in 24h format (got "${answer}")`);
+    }
+    if (!name) {
+      throw new Error('CLOCK: interactive mode requires "name" (for answer validation)');
+    }
+    if (snap !== void 0 && (!Number.isInteger(snap) || snap < 1 || snap > 60)) {
+      throw new Error(`CLOCK: snap must be an integer in 1..60 (got ${snap})`);
+    }
+    return createInteractiveClock({ name, value, answer, format, snap });
+  }
   textHighlighter(ctx) {
     const params = this.visit(ctx.parameterList);
     const value = params.value;
@@ -2944,6 +3065,31 @@ const OperatorItemSchema = z.object({
   type: z.literal(JSON_TYPES.OPERATOR),
   operator: OperatorSchema
 });
+const ClockTimeSchema = z.string().regex(CLOCK_TIME_REGEX);
+const ClockFormatSchema = z.enum(["12h", "24h"]);
+const ClockDisplayItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.CLOCK),
+  mode: z.literal("display"),
+  clockType: z.enum(["analog", "digital"]),
+  value: ClockTimeSchema,
+  format: ClockFormatSchema.optional(),
+  name: z.string().optional()
+});
+const ClockInteractiveItemSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.CLOCK),
+  mode: z.literal("interactive"),
+  clockType: z.literal("analog"),
+  value: ClockTimeSchema,
+  format: ClockFormatSchema.optional(),
+  snap: z.number().int().min(1).max(60).optional(),
+  name: z.string()
+});
+const ClockItemSchema = z.discriminatedUnion("mode", [
+  ClockDisplayItemSchema,
+  ClockInteractiveItemSchema
+]);
 const LayoutItemSchema = z.lazy(
   () => z.union([
     QuestionTextSchema,
@@ -2959,7 +3105,8 @@ const LayoutItemSchema = z.lazy(
     OperatorItemSchema,
     TableItemSchema,
     NumberLineItemSchema,
-    VerticalOperationItemSchema
+    VerticalOperationItemSchema,
+    ClockItemSchema
   ])
 );
 const GroupItemSchema = z.object({
@@ -3278,6 +3425,9 @@ function isTableCellItem(item) {
 function isVerticalOperationItem(item) {
   return item.type === JSON_TYPES.VERTICAL_OPERATION;
 }
+function isClockItem(item) {
+  return item.type === JSON_TYPES.CLOCK;
+}
 function isInlineInputJSON(widget) {
   return widget.type === JSON_TYPES.INLINE_INPUT;
 }
@@ -3398,6 +3548,8 @@ function toJSON(ast) {
       if (inline.answer !== void 0) {
         answers[inline.name] = inline.answer;
       }
+    } else if (inline.type === AST_TYPES.CLOCK && inline.mode === "interactive") {
+      answers[inline.name] = inline.answer;
     }
     if (inline.type === AST_TYPES.FRACTION) {
       widgets[inline.name] = {
@@ -3781,6 +3933,21 @@ function transformInline(inline, idGenerator, inlineDragIds) {
         type: JSON_TYPES.WIDGET_REF,
         widgetId: inlineDragIds.get(inline)
       };
+    case AST_TYPES.CLOCK: {
+      const base = {
+        id: idGenerator.generate(JSON_TYPES.CLOCK),
+        type: JSON_TYPES.CLOCK,
+        mode: inline.mode,
+        clockType: inline.clockType,
+        value: inline.value,
+        ...inline.format !== void 0 && { format: inline.format },
+        ...inline.name !== void 0 && { name: inline.name }
+      };
+      if (inline.mode === "interactive") {
+        return { ...base, ...inline.snap !== void 0 && { snap: inline.snap } };
+      }
+      return base;
+    }
     default:
       throw new Error(`Unknown inline type: ${inline.type}`);
   }
@@ -14006,12 +14173,13 @@ const SingleDragOption = ({
 const PillBackground = ({
   width = "100%",
   minHeight = "72px",
-  fill = "#FFE7B4",
+  fill,
   children,
   className = "",
   style,
   ...rest
 }) => {
+  const pillVarStyle = fill ? { "--exercise-pill-bg": fill } : {};
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -14023,6 +14191,7 @@ const PillBackground = ({
         justifyContent: "center",
         width,
         minHeight,
+        ...pillVarStyle,
         ...style
       },
       ...rest,
@@ -14044,8 +14213,8 @@ const PillBackground = ({
             children: /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M439.707 0C457.071 0 472.52 8.196 482.398 20.9297C498.608 26.3308 510 39.1028 510 54C510 68.8966 498.608 81.667 482.399 87.0684C472.521 99.803 457.072 108 439.707 108H70.8975C53.653 108 38.2956 99.9172 28.4092 87.333C11.7719 82.0918 0.00025108 69.1432 0 54C0 38.8562 11.7721 25.906 28.4102 20.665C38.2966 8.08186 53.6537 0 70.8975 0H439.707Z",
-                fill
+                className: "pill-bg-path",
+                d: "M439.707 0C457.071 0 472.52 8.196 482.398 20.9297C498.608 26.3308 510 39.1028 510 54C510 68.8966 498.608 81.667 482.399 87.0684C472.521 99.803 457.072 108 439.707 108H70.8975C53.653 108 38.2956 99.9172 28.4092 87.333C11.7719 82.0918 0.00025108 69.1432 0 54C0 38.8562 11.7721 25.906 28.4102 20.665C38.2966 8.08186 53.6537 0 70.8975 0H439.707Z"
               }
             )
           }
@@ -16171,6 +16340,236 @@ const NumberLineRenderer = ({
     }
   );
 };
+function parseTime(s) {
+  const parts = s.split(":");
+  return { h: Number(parts[0]), m: Number(parts[1]) };
+}
+function formatTime(h, m) {
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function formatDisplay(h24, m, format) {
+  if (format === "24h") return formatTime(h24, m);
+  const period = h24 >= 12 ? "PM" : "AM";
+  const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
+  return `${String(h12).padStart(2, "0")}:${String(m).padStart(2, "0")} ${period}`;
+}
+const CLOCK_SIZE = 160;
+const INTERACTIVE_SCALE = 1.2;
+const CENTER = CLOCK_SIZE / 2;
+const FACE_RADIUS = CENTER - 6;
+const HOUR_HAND = FACE_RADIUS * 0.45;
+const MINUTE_HAND = FACE_RADIUS * 0.65;
+const HOUR_LABELS = Array.from({ length: 12 }, (_, i) => i + 1);
+const M_SHAFT = Math.round(MINUTE_HAND * 0.049);
+const M_ARROW = Math.round(MINUTE_HAND * 0.156);
+const M_TIP = Math.round(MINUTE_HAND * 0.279);
+const M_TAIL = Math.round(MINUTE_HAND * 0.056);
+const H_SHAFT = Math.round(HOUR_HAND * 0.074);
+const H_ARROW = Math.round(HOUR_HAND * 0.246);
+const H_TIP = Math.round(HOUR_HAND * 0.369);
+const H_TAIL = Math.round(HOUR_HAND * 0.082);
+const ClockRenderer = ({
+  item,
+  value,
+  validationStatus,
+  onChange
+}) => {
+  const format = item.format ?? "24h";
+  const interactive = item.mode === "interactive";
+  const snap = interactive && "snap" in item ? item.snap ?? 1 : 1;
+  const initial = parseTime(interactive && value ? value : item.value);
+  const [hours, setHours] = useState(initial.h);
+  const [minutes, setMinutes] = useState(initial.m);
+  useEffect(() => {
+    if (interactive && value) {
+      const t = parseTime(value);
+      setHours(t.h);
+      setMinutes(t.m);
+    }
+  }, [value, interactive]);
+  const svgRef = useRef(null);
+  const draggingRef = useRef(null);
+  const updateFromPointer = useCallback((clientX, clientY) => {
+    const svg = svgRef.current;
+    if (!svg || !draggingRef.current) return;
+    const rect = svg.getBoundingClientRect();
+    const dx = clientX - rect.left - CENTER;
+    const dy = clientY - rect.top - CENTER;
+    const angle = (Math.atan2(dx, -dy) + 2 * Math.PI) % (2 * Math.PI);
+    if (draggingRef.current === "minute") {
+      const rawMin = angle / (2 * Math.PI) * 60;
+      const snapped = Math.round(rawMin / snap) * snap % 60;
+      setMinutes(snapped);
+      if (item.mode === "interactive" && onChange) {
+        onChange(item.name, formatTime(hours, snapped));
+      }
+    } else {
+      const rawHour12 = angle / (2 * Math.PI) * 12;
+      const rounded = Math.round(rawHour12) % 12;
+      const isPm = hours >= 12;
+      const newH = (rounded === 0 ? 0 : rounded) + (isPm ? 12 : 0);
+      const h24 = newH % 24;
+      setHours(h24);
+      if (item.mode === "interactive" && onChange) {
+        onChange(item.name, formatTime(h24, minutes));
+      }
+    }
+  }, [snap, hours, minutes, item.mode, item.name, onChange]);
+  const onPointerDown = (hand) => (e) => {
+    if (!interactive) return;
+    e.preventDefault();
+    e.target.setPointerCapture?.(e.pointerId);
+    draggingRef.current = hand;
+    updateFromPointer(e.clientX, e.clientY);
+  };
+  const onPointerMove = (e) => {
+    if (!interactive || !draggingRef.current) return;
+    updateFromPointer(e.clientX, e.clientY);
+  };
+  const onPointerUp = (e) => {
+    if (!interactive) return;
+    e.target.releasePointerCapture?.(e.pointerId);
+    draggingRef.current = null;
+  };
+  const hourAngleRad = useMemo(() => {
+    const h12 = hours % 12;
+    return (h12 + minutes / 60) / 12 * 2 * Math.PI;
+  }, [hours, minutes]);
+  const minuteAngleRad = useMemo(() => minutes / 60 * 2 * Math.PI, [minutes]);
+  const hourX = CENTER + Math.sin(hourAngleRad) * HOUR_HAND;
+  const hourY = CENTER - Math.cos(hourAngleRad) * HOUR_HAND;
+  const minuteX = CENTER + Math.sin(minuteAngleRad) * MINUTE_HAND;
+  const minuteY = CENTER - Math.cos(minuteAngleRad) * MINUTE_HAND;
+  const hourDeg = hourAngleRad * 180 / Math.PI;
+  const minuteDeg = minuteAngleRad * 180 / Math.PI;
+  const scale = interactive ? INTERACTIVE_SCALE : 1;
+  const svgSize = CLOCK_SIZE * scale;
+  const ringSize = FACE_RADIUS * 2 * scale;
+  const svgOffset = -6 * scale;
+  const statusClass = validationStatus ? `clock-${validationStatus}` : "";
+  if (item.clockType === "digital") {
+    return /* @__PURE__ */ jsx("span", { className: `clock clock-digital ${statusClass}`, dir: "ltr", children: /* @__PURE__ */ jsxs("span", { className: "clock-digital-wrapper", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "clock-digital-tabs", width: "85", height: "9", viewBox: "0 0 85 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H14C18.4183 0 22 3.58172 22 8V9H0V8Z", fill: "#AE9CFF" }),
+        /* @__PURE__ */ jsx("path", { d: "M63 8C63 3.58172 66.5817 0 71 0H77C81.4183 0 85 3.58172 85 8V9H63V8Z", fill: "#AE9CFF" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "clock-digital-display", children: formatDisplay(hours, minutes, format) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: `clock clock-analog ${interactive ? "clock-interactive" : "clock-display"} ${statusClass}`, dir: "ltr", children: [
+    /* @__PURE__ */ jsx("span", { className: "clock-face-ring", style: { width: ringSize, height: ringSize }, children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: svgRef,
+        width: svgSize,
+        height: svgSize,
+        viewBox: `0 0 ${CLOCK_SIZE} ${CLOCK_SIZE}`,
+        style: { top: svgOffset, left: svgOffset },
+        onPointerMove,
+        onPointerUp,
+        onPointerCancel: onPointerUp,
+        className: "clock-svg",
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: CENTER,
+              cy: CENTER,
+              r: FACE_RADIUS,
+              className: "clock-face"
+            }
+          ),
+          Array.from({ length: 12 }).map((_, i) => {
+            const a = i / 12 * 2 * Math.PI;
+            const x1 = CENTER + Math.sin(a) * (FACE_RADIUS - 8);
+            const y1 = CENTER - Math.cos(a) * (FACE_RADIUS - 8);
+            const x2 = CENTER + Math.sin(a) * FACE_RADIUS;
+            const y2 = CENTER - Math.cos(a) * FACE_RADIUS;
+            return /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, className: "clock-tick clock-tick-hour" }, `t${i}`);
+          }),
+          Array.from({ length: 60 }).map((_, i) => {
+            if (i % 5 === 0) return null;
+            const a = i / 60 * 2 * Math.PI;
+            const x1 = CENTER + Math.sin(a) * (FACE_RADIUS - 4);
+            const y1 = CENTER - Math.cos(a) * (FACE_RADIUS - 4);
+            const x2 = CENTER + Math.sin(a) * FACE_RADIUS;
+            const y2 = CENTER - Math.cos(a) * FACE_RADIUS;
+            return /* @__PURE__ */ jsx("line", { x1, y1, x2, y2, className: "clock-tick clock-tick-minute" }, `m${i}`);
+          }),
+          HOUR_LABELS.map((n) => {
+            const a = n / 12 * 2 * Math.PI;
+            const r = FACE_RADIUS - 20;
+            const x = CENTER + Math.sin(a) * r;
+            const y = CENTER - Math.cos(a) * r;
+            return /* @__PURE__ */ jsx("text", { x, y, className: "clock-number", textAnchor: "middle", dominantBaseline: "central", children: n }, `l${n}`);
+          }),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              transform: `translate(${CENTER},${CENTER}) rotate(${hourDeg})`,
+              points: [
+                `0,${-HOUR_HAND}`,
+                `${H_ARROW},${-(HOUR_HAND - H_TIP)}`,
+                `${H_SHAFT},${-(HOUR_HAND - H_TIP)}`,
+                `${H_SHAFT},${H_TAIL}`,
+                `${-H_SHAFT},${H_TAIL}`,
+                `${-H_SHAFT},${-(HOUR_HAND - H_TIP)}`,
+                `${-H_ARROW},${-(HOUR_HAND - H_TIP)}`
+              ].join(" "),
+              className: "clock-arrow clock-arrow-hour",
+              style: { pointerEvents: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              transform: `translate(${CENTER},${CENTER}) rotate(${minuteDeg})`,
+              points: [
+                `0,${-MINUTE_HAND}`,
+                `${M_ARROW},${-(MINUTE_HAND - M_TIP)}`,
+                `${M_SHAFT},${-(MINUTE_HAND - M_TIP)}`,
+                `${M_SHAFT},${M_TAIL}`,
+                `${-M_SHAFT},${M_TAIL}`,
+                `${-M_SHAFT},${-(MINUTE_HAND - M_TIP)}`,
+                `${-M_ARROW},${-(MINUTE_HAND - M_TIP)}`
+              ].join(" "),
+              className: "clock-arrow clock-arrow-minute",
+              style: { pointerEvents: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CENTER,
+              y1: CENTER,
+              x2: hourX,
+              y2: hourY,
+              className: "clock-hand clock-hand-hour",
+              stroke: "transparent",
+              strokeWidth: 20,
+              onPointerDown: onPointerDown("hour")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: CENTER,
+              y1: CENTER,
+              x2: minuteX,
+              y2: minuteY,
+              className: "clock-hand clock-hand-minute",
+              stroke: "transparent",
+              strokeWidth: 16,
+              onPointerDown: onPointerDown("minute")
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: CENTER, cy: CENTER, r: 4, className: "clock-center" })
+        ]
+      }
+    ) }),
+    format === "12h" && /* @__PURE__ */ jsx("span", { className: "clock-period-badge", children: hours >= 12 ? "PM" : "AM" })
+  ] });
+};
 function isTextItem(item) {
   return item.type === JSON_TYPES.TEXT || item.type === JSON_TYPES.HIGHLIGHTED_TEXT || item.type === JSON_TYPES.BOLD_TEXT || item.type === JSON_TYPES.COLOR_TEXT || item.type === JSON_TYPES.OPERATOR || item.type === JSON_TYPES.SPACE || item.type === JSON_TYPES.GROUP;
 }
@@ -16475,6 +16874,22 @@ const LayoutRenderer = ({
         }
       );
     }
+    case JSON_TYPES.CLOCK: {
+      const clockItem = item;
+      const widgetName = clockItem.mode === "interactive" ? clockItem.name : void 0;
+      const validationStatus = widgetName ? toValidationStatus(validationDetails?.[widgetName]?.isCorrect) : null;
+      const rawValue = widgetName ? values[widgetName] : void 0;
+      const value = typeof rawValue === "string" ? rawValue : void 0;
+      return /* @__PURE__ */ jsx(
+        ClockRenderer,
+        {
+          item: clockItem,
+          value,
+          validationStatus,
+          onChange
+        }
+      );
+    }
     default:
       return null;
   }
@@ -16799,6 +17214,12 @@ export {
   AST_TYPES,
   BoldTextInlineSchema,
   BoldTextSchema,
+  CLOCK_FORMATS,
+  CLOCK_MODES,
+  CLOCK_TIME_REGEX,
+  CLOCK_TYPES,
+  ClockInlineSchema,
+  ClockItemSchema,
   ColorTextInlineSchema,
   ColorTextSchema,
   ContentBlockSchema,
@@ -16893,6 +17314,7 @@ export {
   compileWithAST,
   createBoldText,
   createColorText,
+  createDisplayClock,
   createDragOptions,
   createExerciseDocument,
   createExpressionValidation,
@@ -16901,6 +17323,7 @@ export {
   createHighlightedText,
   createImage,
   createInlineDragOption,
+  createInteractiveClock,
   createLineBlock,
   createMatcherBlock,
   createMatcherItem,
@@ -16931,6 +17354,8 @@ export {
   getFractionKey,
   getMissingInputs,
   isBoldText,
+  isClock,
+  isClockItem,
   isColorText,
   isDragOptions,
   isDragOptionsJSON,