@mathscan/math-exercise-engine 1.2.3 → 1.2.5

package/dist/index.d.ts

@@ -6239,6 +6239,7 @@ export declare function compileWithAST(dsl: string): {
                 backgroundColor?: string | undefined;
             }[];
             cols: number;
+            borderColor: string;
         } | {
             type: "VerticalOperationBlock";
             items: ({
@@ -7402,6 +7403,7 @@ export declare const ContentBlockSchema: z.ZodUnion<[z.ZodObject<{
 }>, z.ZodObject<{
     type: z.ZodLiteral<"TableBlock">;
     cols: z.ZodNumber;
+    borderColor: z.ZodDefault<z.ZodEffects<z.ZodString, string, string>>;
     rows: z.ZodArray<z.ZodObject<{
         type: z.ZodLiteral<"TableRow">;
         backgroundColor: z.ZodOptional<z.ZodString>;
@@ -8095,6 +8097,7 @@ export declare const ContentBlockSchema: z.ZodUnion<[z.ZodObject<{
         backgroundColor?: string | undefined;
     }[];
     cols: number;
+    borderColor: string;
 }, {
     type: "TableBlock";
     rows: {
@@ -8186,6 +8189,7 @@ export declare const ContentBlockSchema: z.ZodUnion<[z.ZodObject<{
         backgroundColor?: string | undefined;
     }[];
     cols: number;
+    borderColor?: string | undefined;
 }>, z.ZodObject<{
     type: z.ZodLiteral<"RadioOptions">;
     name: z.ZodString;
@@ -16281,6 +16285,9 @@ export declare function createVopRow(cells: VopCell[], op?: VopOperator): VopRow
 
 export declare function createVopSeparator(): VopSeparator;
 
+/** Default color used for table borders and internal separators. */
+export declare const DEFAULT_TABLE_BORDER_COLOR = "#7c6cf2";
+
 export declare type DisplayInlineNode = z.infer<typeof DisplayInlineNodeSchema>;
 
 export declare const DisplayInlineNodeSchema: z.ZodUnion<[z.ZodObject<{
@@ -16995,6 +17002,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
     }>, z.ZodObject<{
         type: z.ZodLiteral<"TableBlock">;
         cols: z.ZodNumber;
+        borderColor: z.ZodDefault<z.ZodEffects<z.ZodString, string, string>>;
         rows: z.ZodArray<z.ZodObject<{
             type: z.ZodLiteral<"TableRow">;
             backgroundColor: z.ZodOptional<z.ZodString>;
@@ -17688,6 +17696,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor: string;
     }, {
         type: "TableBlock";
         rows: {
@@ -17779,6 +17788,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor?: string | undefined;
     }>, z.ZodObject<{
         type: z.ZodLiteral<"RadioOptions">;
         name: z.ZodString;
@@ -26123,6 +26133,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor: string;
     } | {
         type: "VerticalOperationBlock";
         items: ({
@@ -27119,6 +27130,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor?: string | undefined;
     } | {
         type: "VerticalOperationBlock";
         items: ({
@@ -28115,6 +28127,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor: string;
     } | {
         type: "VerticalOperationBlock";
         items: ({
@@ -29111,6 +29124,7 @@ export declare const ExerciseDocumentSchema: z.ZodEffects<z.ZodObject<{
             backgroundColor?: string | undefined;
         }[];
         cols: number;
+        borderColor?: string | undefined;
     } | {
         type: "VerticalOperationBlock";
         items: ({
@@ -30402,6 +30416,8 @@ export declare interface ExerciseRendererProps {
     soundEnabled?: boolean;
     /** Maps sound events → URL or callback. Omitted events stay silent. */
     sounds?: SoundConfig;
+    /** Overrides for validation state colors. */
+    theme?: ExerciseTheme;
 }
 
 export declare interface ExerciseRendererRef {
@@ -30415,6 +30431,22 @@ export declare interface ExerciseRendererRef {
     revealAnswers: () => void;
 }
 
+/**
+ * Validation state colors, applied as inline CSS variables on the renderer root.
+ * Inline beats any stylesheet, so this is the reliable way for a host to recolor
+ * per attempt (e.g. orange on the 1st wrong answer, red on the 2nd) — a
+ * `--exercise-incorrect` set on a wrapper is shadowed by variables.css.
+ * Background tints derive from these via color-mix. Omitted keys keep the defaults.
+ * Values must be valid CSS colors: an invalid one does NOT fall back to the
+ * default, it leaves the affected styles uncolored (dev builds log a warning).
+ * Change the color when a retry starts, not in onSubmit — otherwise the result
+ * still on screen recolors immediately.
+ */
+export declare interface ExerciseTheme {
+    correct?: string;
+    incorrect?: string;
+}
+
 export declare type ExpressionValidation = z.infer<typeof ExpressionValidationSchema>;
 
 /**
@@ -38876,6 +38908,7 @@ export declare type TableBlock = z.infer<typeof TableBlockSchema>;
 declare const TableBlockSchema: z.ZodObject<{
     type: z.ZodLiteral<"TableBlock">;
     cols: z.ZodNumber;
+    borderColor: z.ZodDefault<z.ZodEffects<z.ZodString, string, string>>;
     rows: z.ZodArray<z.ZodObject<{
         type: z.ZodLiteral<"TableRow">;
         backgroundColor: z.ZodOptional<z.ZodString>;
@@ -39569,6 +39602,7 @@ declare const TableBlockSchema: z.ZodObject<{
         backgroundColor?: string | undefined;
     }[];
     cols: number;
+    borderColor: string;
 }, {
     type: "TableBlock";
     rows: {
@@ -39660,6 +39694,7 @@ declare const TableBlockSchema: z.ZodObject<{
         backgroundColor?: string | undefined;
     }[];
     cols: number;
+    borderColor?: string | undefined;
 }>;
 
 export declare type TableCell = z.infer<typeof TableCellSchema>;
@@ -40120,6 +40155,7 @@ export declare const TableItemSchema: z.ZodObject<{
     id: z.ZodString;
     type: z.ZodLiteral<"table">;
     cols: z.ZodNumber;
+    borderColor: z.ZodDefault<z.ZodEffects<z.ZodString, string, string>>;
     rows: z.ZodArray<z.ZodObject<{
         id: z.ZodString;
         type: z.ZodLiteral<"table-row">;
@@ -40187,6 +40223,7 @@ export declare const TableItemSchema: z.ZodObject<{
         backgroundColor?: string | undefined;
     }[];
     cols: number;
+    borderColor: string;
     id: string;
 }, {
     type: "table";
@@ -40205,6 +40242,7 @@ export declare const TableItemSchema: z.ZodObject<{
     }[];
     cols: number;
     id: string;
+    borderColor?: string | undefined;
 }>;
 
 export declare type TableRow = z.infer<typeof TableRowSchema>;

package/dist/index.js

@@ -267,6 +267,10 @@ 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"];
+const DEFAULT_TABLE_BORDER_COLOR = "#7c6cf2";
+const isTableBorderColor = (value) => value.toLowerCase() === "transparent" || HEX_COLOR_REGEX.test(value);
+const TABLE_BORDER_COLOR_ERROR = 'TABLE: bordercolor must be "transparent" or a hex value (e.g. "#E67E22" or "#F00")';
+const TableBorderColorSchema = zod.z.string({ message: TABLE_BORDER_COLOR_ERROR }).refine(isTableBorderColor, { message: TABLE_BORDER_COLOR_ERROR }).default(DEFAULT_TABLE_BORDER_COLOR);
 function getFractionKey(widgetId, part) {
   return `${widgetId}__${part}`;
 }
@@ -2536,12 +2540,14 @@ function createTableRow(cells, backgroundColor) {
 const TableBlockSchema = zod.z.object({
   type: zod.z.literal(AST_TYPES.TABLE_BLOCK),
   cols: zod.z.number().int().positive(),
+  borderColor: TableBorderColorSchema,
   rows: zod.z.array(TableRowSchema).min(1)
 });
-function createTableBlock(cols, rows) {
+function createTableBlock(cols, rows, borderColor) {
   return TableBlockSchema.parse({
     type: AST_TYPES.TABLE_BLOCK,
     cols,
+    borderColor,
     rows
   });
 }
@@ -3486,8 +3492,10 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   table(ctx) {
     const params = this.visit(ctx.parameterList);
     const cols = params.cols;
+    const borderColorParam = params.bordercolor;
+    const borderColor = borderColorParam === void 0 ? void 0 : String(borderColorParam);
     const rows = ctx.row.map((r) => this.visit(r));
-    return createTableBlock(cols, rows);
+    return createTableBlock(cols, rows, borderColor);
   }
   row(ctx) {
     const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
@@ -4282,6 +4290,7 @@ const TableItemSchema = zod.z.object({
   id: zod.z.string(),
   type: zod.z.literal(JSON_TYPES.TABLE),
   cols: zod.z.number().int().positive(),
+  borderColor: TableBorderColorSchema,
   rows: zod.z.array(TableRowItemSchema)
 });
 const NumberLinePositionItemSchema = zod.z.object({
@@ -10866,6 +10875,7 @@ function transformTable(table, idGenerator, inlineDragIds) {
     id: idGenerator.generate(JSON_TYPES.TABLE),
     type: JSON_TYPES.TABLE,
     cols: table.cols,
+    borderColor: table.borderColor,
     rows
   };
 }
@@ -11908,7 +11918,7 @@ function getEventCoordinates(event) {
   }
   return null;
 }
-const CSS = /* @__PURE__ */ Object.freeze({
+const CSS$1 = /* @__PURE__ */ Object.freeze({
   Translate: {
     toString(transform) {
       if (!transform) {
@@ -11938,7 +11948,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: {
@@ -15057,7 +15067,7 @@ const PositionedOverlay = /* @__PURE__ */ React.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
@@ -15118,9 +15128,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 = {
@@ -15553,7 +15563,7 @@ const Draggable = ({
     disabled
   });
   const style = {
-    transform: CSS.Translate.toString(transform),
+    transform: CSS$1.Translate.toString(transform),
     cursor: disabled ? "default" : "grab",
     touchAction: "none"
   };
@@ -17913,7 +17923,7 @@ const CHART_TYPE_COMPONENTS = {
 const Chart = (props) => {
   const ChartComponent = CHART_TYPE_COMPONENTS[props.item.chartType];
   if (!ChartComponent) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart chart--unsupported", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--exercise-incorrect, #ef4444)", fontSize: "0.85rem" }, children: `Chart type "${props.item.chartType}" is not yet supported.` }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart chart--unsupported", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--exercise-error, #ef4444)", fontSize: "0.85rem" }, children: `Chart type "${props.item.chartType}" is not yet supported.` }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ChartComponent, { ...props });
 };
@@ -20627,7 +20637,10 @@ const LayoutRenderer = ({
       )) });
     case JSON_TYPES.TABLE: {
       const totalRows = item.rows.length;
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "exercise-table-container", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "exercise-table", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: item.rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "exercise-table-row", style: { backgroundColor: row.backgroundColor }, children: row.cells.map((cell) => {
+      const tableStyle = {
+        "--exercise-table-border-color": item.borderColor ?? DEFAULT_TABLE_BORDER_COLOR
+      };
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "exercise-table-container", style: tableStyle, children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "exercise-table", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: item.rows.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "exercise-table-row", style: { backgroundColor: row.backgroundColor }, children: row.cells.map((cell) => {
         const rowspan = cell.rowspan || 1;
         const isLastRow = rowIndex + rowspan - 1 >= totalRows - 1;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20830,6 +20843,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)) {
@@ -20902,7 +20924,8 @@ const ExerciseRenderer = React.forwardRef(({
   showSubmitButton = false,
   className = "",
   soundEnabled = true,
-  sounds
+  sounds,
+  theme
 }, ref) => {
   const initialValuesSignature = React.useMemo(() => buildInitialValuesSignature(json), [json]);
   const [values, setValues] = React.useState(() => buildInitialValues(json));
@@ -20916,6 +20939,15 @@ const ExerciseRenderer = React.forwardRef(({
   const rootRef = React.useRef(null);
   const [resetKey, setResetKey] = React.useState(0);
   const [revealed, setRevealed] = React.useState(false);
+  const themeStyle = React.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]);
+  React.useEffect(() => {
+    warnOnInvalidThemeColors({ correct: theme?.correct, incorrect: theme?.incorrect });
+  }, [theme?.correct, theme?.incorrect]);
   const playSound = useSoundPlayer(soundEnabled, sounds);
   const externallyLocked = useExerciseLocked();
   React.useLayoutEffect(() => {
@@ -21172,7 +21204,7 @@ const ExerciseRenderer = React.forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsxRuntime.jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -21333,6 +21365,7 @@ exports.ClockItemSchema = ClockItemSchema;
 exports.ColorTextInlineSchema = ColorTextInlineSchema;
 exports.ColorTextSchema = ColorTextSchema;
 exports.ContentBlockSchema = ContentBlockSchema;
+exports.DEFAULT_TABLE_BORDER_COLOR = DEFAULT_TABLE_BORDER_COLOR;
 exports.DisplayInlineNodeSchema = DisplayInlineNodeSchema;
 exports.DragOptionsJSONSchema = DragOptionsJSONSchema;
 exports.DragOptionsToolSchema = DragOptionsToolSchema;