@mathscan/math-exercise-engine 1.1.15 → 1.1.16

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { createToken, Lexer, CstParser } from "chevrotain";
 import { z } from "zod";
 import { create, all } from "mathjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext, forwardRef, cloneElement, useImperativeHandle } from "react";
+import React, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext, forwardRef, cloneElement, useId, useImperativeHandle } from "react";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 const AST_TYPES = {
@@ -229,6 +229,9 @@ const SIDE_PAD = 7;
 const CSS_VAR_SIDE_PAD = "--nl-side-pad";
 const NUMBER_LINE_LABELS = ["all", "extremes", "min-only", "max-only", "none"];
 const NUMBER_LINE_HIGHLIGHT_COLORS = ["blue", "red", "green", "orange", "purple", "yellow"];
+const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+const isNumberLineHighlightColor = (value) => NUMBER_LINE_HIGHLIGHT_COLORS.includes(value) || HEX_COLOR_REGEX.test(value);
+const highlightColorMessage = (block) => `${block}: color must be one of ${NUMBER_LINE_HIGHLIGHT_COLORS.join(", ")} or a hex value (e.g. "#3B82F6")`;
 const NUMBER_LINE_DRAG_MODES = ["axis", "inputs"];
 function getFractionKey(widgetId, part) {
   return `${widgetId}__${part}`;
@@ -1599,7 +1602,9 @@ const ImageInlineSchema = z.object({
   }),
   alt: z.string(),
   width: z.number().positive().optional(),
-  height: z.number().positive().optional()
+  height: z.number().positive().optional(),
+  /** Opt-in: show an expand control that opens the image fullscreen. */
+  fullscreen: z.boolean().optional()
 });
 const VisualFractionInlineSchema = z.object({
   type: z.literal(AST_TYPES.VISUAL_FRACTION),
@@ -1904,10 +1909,8 @@ const NumberLineHighlightSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_HIGHLIGHT),
   from: z.number().finite({ message: "HIGHLIGHT: from must be a finite number" }),
   to: z.number().finite({ message: "HIGHLIGHT: to must be a finite number" }),
-  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS, {
-    errorMap: () => ({
-      message: `HIGHLIGHT: color must be one of ${NUMBER_LINE_HIGHLIGHT_COLORS.join(", ")}`
-    })
+  color: z.string().refine(isNumberLineHighlightColor, {
+    message: highlightColorMessage("HIGHLIGHT")
   }).optional(),
   label: z.string().optional()
 }).refine((d) => d.from < d.to, {
@@ -1926,7 +1929,7 @@ const NumberLineCursorSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_CURSOR),
   value: z.number().finite({ message: "CURSOR: value must be a finite number" }).default(0),
   answer: z.number({ required_error: "CURSOR: answer is required" }).finite({ message: "CURSOR: answer must be a finite number" }),
-  color: z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/, {
+  color: z.string().regex(HEX_COLOR_REGEX, {
     message: 'CURSOR: color must be a hex value (e.g. "#3B82F6" or "#F00")'
   }).optional(),
   fillRange: z.boolean().default(false),
@@ -1948,8 +1951,8 @@ const NumberLineArrowSchema = z.object({
   to: z.number().finite({ message: "ARROW: to must be a finite number" }),
   color: z.string().optional(),
   inlines: z.array(InlineNodeSchema)
-}).refine((d) => d.from < d.to, {
-  message: "ARROW: from must be less than to"
+}).refine((d) => d.from !== d.to, {
+  message: "ARROW: from and to must be different"
 });
 function createNumberLineArrow(from, to, inlines, color) {
   return NumberLineArrowSchema.parse({
@@ -2014,7 +2017,9 @@ const NumberLineBlockSchema = z.object({
     }
   }
   for (const arrow of data.arrows ?? []) {
-    if (arrow.from < data.min || arrow.to > data.max) {
+    const lo = Math.min(arrow.from, arrow.to);
+    const hi = Math.max(arrow.from, arrow.to);
+    if (lo < data.min || hi > data.max) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `NUMBER_LINE: ARROW range [${arrow.from}, ${arrow.to}] must be within [${data.min}, ${data.max}]`
@@ -3106,7 +3111,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const alt = params.alt;
     const width = params.width;
     const height = params.height;
-    return createImage(name, src, alt, { width, height });
+    const fullscreen = params.fullscreen !== void 0 ? params.fullscreen === true || params.fullscreen === "true" : void 0;
+    return createImage(name, src, alt, { width, height, fullscreen });
   }
   visualFraction(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -3328,7 +3334,9 @@ const ImageItemSchema = z.object({
   }),
   alt: z.string(),
   width: z.number().positive().optional(),
-  height: z.number().positive().optional()
+  height: z.number().positive().optional(),
+  /** Opt-in: show an expand control that opens the image fullscreen. */
+  fullscreen: z.boolean().optional()
 });
 const SpaceItemSchema = z.object({
   id: z.string(),
@@ -3433,7 +3441,9 @@ const NumberLineHighlightItemSchema = z.object({
   type: z.literal(JSON_TYPES.NUMBER_LINE_HIGHLIGHT),
   from: z.number().finite(),
   to: z.number().finite(),
-  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS).optional(),
+  color: z.string().refine(isNumberLineHighlightColor, {
+    message: highlightColorMessage("HIGHLIGHT")
+  }).optional(),
   label: z.string().optional()
 });
 const NumberLineCursorItemSchema = z.object({
@@ -3441,7 +3451,7 @@ const NumberLineCursorItemSchema = z.object({
   type: z.literal(JSON_TYPES.NUMBER_LINE_CURSOR),
   value: z.number().finite(),
   answer: z.number().finite(),
-  color: z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/).optional(),
+  color: z.string().regex(HEX_COLOR_REGEX).optional(),
   fillRange: z.boolean(),
   label: z.string().optional()
 });
@@ -9787,7 +9797,8 @@ function transformInline(inline, idGenerator, inlineDragIds) {
         src: inline.src,
         alt: inline.alt,
         ...inline.width !== void 0 && { width: inline.width },
-        ...inline.height !== void 0 && { height: inline.height }
+        ...inline.height !== void 0 && { height: inline.height },
+        ...inline.fullscreen !== void 0 && { fullscreen: inline.fullscreen }
       };
     case AST_TYPES.VISUAL_FRACTION:
       return {
@@ -16657,6 +16668,226 @@ const WidgetRenderer = ({
   }
   return null;
 };
+const ExpandDiamondIcon = () => {
+  const gradientId = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "image-zoom-icon",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            stroke: "#BDAFFE",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            stroke: `url(#${gradientId})`,
+            strokeOpacity: "0.3",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M22.45 27 L22.45 23.5 L25.95 23.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M34.95 23.5 L38.45 23.5 L38.45 27" }),
+              /* @__PURE__ */ jsx("path", { d: "M38.45 36 L38.45 39.5 L34.95 39.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M25.95 39.5 L22.45 39.5 L22.45 36" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "3.84406",
+            y1: "3.97407",
+            x2: "24.7079",
+            y2: "24.8379",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#FAFAFA" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8A4899" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+const CloseIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "image-lightbox-close-icon",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 6L6 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 6L18 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const ImageItem = ({
+  src,
+  alt,
+  width,
+  height,
+  fullscreen = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const isLightboxOpen = isOpen && fullscreen;
+  useEffect(() => {
+    if (!isLightboxOpen) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isLightboxOpen, close]);
+  useEffect(() => {
+    if (!isLightboxOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isLightboxOpen]);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (isLightboxOpen) {
+      closeRef.current?.focus();
+    } else if (wasOpen.current) {
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+    wasOpen.current = isLightboxOpen;
+  }, [isLightboxOpen]);
+  const overlay = isLightboxOpen && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "image-lightbox",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": alt || "Image",
+        onClick: close,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeRef,
+              type: "button",
+              className: "image-lightbox-close",
+              "aria-label": "Close fullscreen image",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "image-lightbox-img",
+              src,
+              alt,
+              onClick: (e) => e.stopPropagation()
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  const img = /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: `image-item text-item ${fullscreen ? "image-item-zoomable" : ""}`,
+      src,
+      alt,
+      ...width !== void 0 && { width },
+      ...height !== void 0 && { height },
+      loading: "lazy",
+      ...fullscreen && { onClick: open }
+    }
+  );
+  if (!fullscreen) return img;
+  return /* @__PURE__ */ jsxs("span", { className: "image-item-wrapper", children: [
+    img,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "image-zoom-btn",
+        "aria-label": alt ? `View "${alt}" fullscreen` : "View image fullscreen",
+        onClick: open,
+        children: /* @__PURE__ */ jsx(ExpandDiamondIcon, {})
+      }
+    ),
+    overlay
+  ] });
+};
 const EPSILON = 10 ** -INTERNAL_PRECISION;
 const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
 const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
@@ -16710,7 +16941,7 @@ const getPositionWidgetId = (content) => {
   }
   return null;
 };
-const toHighlightColor = (color) => `var(--nl-highlight-${color})`;
+const toHighlightColor = (color) => color.startsWith("#") ? color : `var(--nl-highlight-${color})`;
 const getBandGeometry = (h, min, max) => {
   const leftPct = toPercent(Math.min(h.from, h.to), min, max);
   const rightPct = toPercent(Math.max(h.from, h.to), min, max);
@@ -17407,24 +17638,27 @@ function getArrowArcLabelTop(widthPct) {
   const arcTop = svgTop + ARROW_ARC_BASE_Y - getArrowArcLift(widthPct);
   return Math.max(0, arcTop - ARROW_ARC_LABEL_OFFSET);
 }
-function getArrowArcPaths(widthPct, svgWidthPx = ARROW_ARC_VIEWBOX_WIDTH) {
-  const endX = getArrowArcSvgWidth(svgWidthPx);
+function getArrowArcPaths(widthPct, svgWidthPx = ARROW_ARC_VIEWBOX_WIDTH, reversed = false) {
+  const width = getArrowArcSvgWidth(svgWidthPx);
+  const startX = reversed ? width : 0;
+  const tipX = reversed ? 0 : width;
+  const sign = reversed ? -1 : 1;
   const controlInset = Math.min(svgWidthPx * 0.18, 48);
   const lift = getArrowArcLift(widthPct);
   const controlY = fmt(ARROW_ARC_BASE_Y - lift);
-  const tangentAngle = Math.atan2(ARROW_ARC_BASE_Y - controlY, endX - (endX - controlInset));
-  const tx = Math.cos(tangentAngle);
+  const tangentAngle = Math.atan2(ARROW_ARC_BASE_Y - controlY, controlInset);
+  const tx = Math.cos(tangentAngle) * sign;
   const ty = Math.sin(tangentAngle);
-  const shaftEndX = fmt(endX - tx * ARROW_ARC_HEAD_LENGTH);
+  const shaftEndX = fmt(tipX - tx * ARROW_ARC_HEAD_LENGTH);
   const shaftEndY = fmt(ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH);
   const endControlX = fmt(shaftEndX - tx * controlInset);
   const endControlY = fmt(shaftEndY - ty * controlInset);
-  const arcPath = `M 0 ${ARROW_ARC_BASE_Y} C ${fmt(controlInset)} ${controlY} ${endControlX} ${endControlY} ${shaftEndX} ${shaftEndY}`;
+  const arcPath = `M ${fmt(startX)} ${ARROW_ARC_BASE_Y} C ${fmt(startX + sign * controlInset)} ${controlY} ${endControlX} ${endControlY} ${shaftEndX} ${shaftEndY}`;
   const nx = -ty;
   const ny = tx;
-  const baseX = endX - tx * ARROW_ARC_HEAD_LENGTH;
+  const baseX = tipX - tx * ARROW_ARC_HEAD_LENGTH;
   const baseY = ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH;
-  const headPath = `M ${fmt(endX)} ${ARROW_ARC_BASE_Y} L ${fmt(baseX + nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY + ny * ARROW_ARC_HEAD_HALF_WIDTH)} L ${fmt(baseX - nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY - ny * ARROW_ARC_HEAD_HALF_WIDTH)} Z`;
+  const headPath = `M ${fmt(tipX)} ${ARROW_ARC_BASE_Y} L ${fmt(baseX + nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY + ny * ARROW_ARC_HEAD_HALF_WIDTH)} L ${fmt(baseX - nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY - ny * ARROW_ARC_HEAD_HALF_WIDTH)} Z`;
   return { arcPath, headPath };
 }
 function getArrowArcLayouts(arrows, min, max) {
@@ -17435,9 +17669,10 @@ function getArrowArcLayouts(arrows, min, max) {
     return {
       arrow,
       index,
-      leftPct: fromPct,
-      rightPct: toPct,
-      widthPct: toPct - fromPct,
+      leftPct: Math.min(fromPct, toPct),
+      rightPct: Math.max(fromPct, toPct),
+      widthPct: Math.abs(toPct - fromPct),
+      reversed: toPct < fromPct,
       level: 0
     };
   }).filter((layout) => layout.widthPct > 0).sort((a, b) => a.leftPct - b.leftPct || a.rightPct - b.rightPct || a.index - b.index);
@@ -17474,7 +17709,7 @@ function useElementWidth() {
   return [ref, width];
 }
 const ArrowArc = ({
-  layout: { arrow, leftPct, widthPct, level },
+  layout: { arrow, leftPct, widthPct, reversed, level },
   widgets,
   values,
   droppedInputs,
@@ -17486,8 +17721,8 @@ const ArrowArc = ({
   const hasLabel = arrow.content.length > 0;
   const svgWidthPx = getArrowArcSvgWidth(renderedWidthPx);
   const { arcPath, headPath } = useMemo(
-    () => getArrowArcPaths(widthPct, svgWidthPx),
-    [widthPct, svgWidthPx]
+    () => getArrowArcPaths(widthPct, svgWidthPx, reversed),
+    [widthPct, svgWidthPx, reversed]
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -18243,14 +18478,13 @@ const LayoutRenderer = ({
     }
     case JSON_TYPES.IMAGE:
       return /* @__PURE__ */ jsx(
-        "img",
+        ImageItem,
         {
-          className: "image-item text-item",
           src: item.src,
           alt: item.alt,
-          ...item.width !== void 0 && { width: item.width },
-          ...item.height !== void 0 && { height: item.height },
-          loading: "lazy"
+          width: item.width,
+          height: item.height,
+          fullscreen: item.fullscreen
         }
       );
     case JSON_TYPES.WIDGET_REF: {