@mathscan/math-exercise-engine 1.2.4 → 1.2.5

package/dist/index.mjs

@@ -11916,7 +11916,7 @@ function getEventCoordinates(event) {
   }
   return null;
 }
-const CSS = /* @__PURE__ */ Object.freeze({
+const CSS$1 = /* @__PURE__ */ Object.freeze({
   Translate: {
     toString(transform) {
       if (!transform) {
@@ -11946,7 +11946,7 @@ const CSS = /* @__PURE__ */ Object.freeze({
       if (!transform) {
         return;
       }
-      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+      return [CSS$1.Translate.toString(transform), CSS$1.Scale.toString(transform)].join(" ");
     }
   },
   Transition: {
@@ -15065,7 +15065,7 @@ const PositionedOverlay = /* @__PURE__ */ forwardRef((_ref, ref) => {
     height: rect.height,
     top: rect.top,
     left: rect.left,
-    transform: CSS.Transform.toString(scaleAdjustedTransform),
+    transform: CSS$1.Transform.toString(scaleAdjustedTransform),
     transformOrigin: adjustScale2 && activatorEvent ? getRelativeTransformOrigin(activatorEvent, rect) : void 0,
     transition: typeof transition === "function" ? transition(activatorEvent) : transition,
     ...style
@@ -15126,9 +15126,9 @@ const defaultKeyframeResolver = (_ref2) => {
     }
   } = _ref2;
   return [{
-    transform: CSS.Transform.toString(initial)
+    transform: CSS$1.Transform.toString(initial)
   }, {
-    transform: CSS.Transform.toString(final)
+    transform: CSS$1.Transform.toString(final)
   }];
 };
 const defaultDropAnimationConfiguration = {
@@ -15561,7 +15561,7 @@ const Draggable = ({
     disabled
   });
   const style = {
-    transform: CSS.Translate.toString(transform),
+    transform: CSS$1.Translate.toString(transform),
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
   };
@@ -17921,7 +17921,7 @@ const CHART_TYPE_COMPONENTS = {
 const Chart = (props) => {
   const ChartComponent = CHART_TYPE_COMPONENTS[props.item.chartType];
   if (!ChartComponent) {
-    return /* @__PURE__ */ jsx("div", { className: "chart chart--unsupported", children: /* @__PURE__ */ jsx("span", { style: { color: "var(--exercise-incorrect, #ef4444)", fontSize: "0.85rem" }, children: `Chart type "${props.item.chartType}" is not yet supported.` }) });
+    return /* @__PURE__ */ jsx("div", { className: "chart chart--unsupported", children: /* @__PURE__ */ jsx("span", { style: { color: "var(--exercise-error, #ef4444)", fontSize: "0.85rem" }, children: `Chart type "${props.item.chartType}" is not yet supported.` }) });
   }
   return /* @__PURE__ */ jsx(ChartComponent, { ...props });
 };
@@ -20841,6 +20841,15 @@ const TOOL_ASPECT_RATIO = {
   "set-square": SET_SQUARE_ASPECT_RATIO
 };
 const FLIP_BTN_EXTRA = 44;
+function warnOnInvalidThemeColors(theme) {
+  if (process.env.NODE_ENV === "production" || !theme) return;
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return;
+  for (const [key2, value] of Object.entries(theme)) {
+    if (value && !CSS.supports("color", value)) {
+      console.warn(`[ExerciseRenderer] theme.${key2} is not a valid CSS color: "${value}"`);
+    }
+  }
+}
 function buildInitialValues(json) {
   const initial = {};
   for (const [id, widget] of Object.entries(json.widgets)) {
@@ -20913,7 +20922,8 @@ const ExerciseRenderer = forwardRef(({
   showSubmitButton = false,
   className = "",
   soundEnabled = true,
-  sounds
+  sounds,
+  theme
 }, ref) => {
   const initialValuesSignature = useMemo(() => buildInitialValuesSignature(json), [json]);
   const [values, setValues] = useState(() => buildInitialValues(json));
@@ -20927,6 +20937,15 @@ const ExerciseRenderer = forwardRef(({
   const rootRef = useRef(null);
   const [resetKey, setResetKey] = useState(0);
   const [revealed, setRevealed] = useState(false);
+  const themeStyle = useMemo(() => {
+    const style = {};
+    if (theme?.correct) style["--exercise-correct"] = theme.correct;
+    if (theme?.incorrect) style["--exercise-incorrect"] = theme.incorrect;
+    return Object.keys(style).length > 0 ? style : void 0;
+  }, [theme?.correct, theme?.incorrect]);
+  useEffect(() => {
+    warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
+  }, [theme?.correct, theme?.incorrect]);
   const playSound = useSoundPlayer(soundEnabled, sounds);
   const externallyLocked = useExerciseLocked();
   useLayoutEffect(() => {
@@ -21183,7 +21202,7 @@ const ExerciseRenderer = forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, children: [
+  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {