@mathscan/math-exercise-engine 1.1.16 → 1.1.17

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { createToken, Lexer, CstParser } from "chevrotain";
 import { z } from "zod";
+import { createToken, Lexer, CstParser } from "chevrotain";
 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, useId, useImperativeHandle } from "react";
@@ -54,6 +54,8 @@ const AST_TYPES = {
   VOP_CARRY_ROW: "VopCarryRow",
   /** Number line layout block */
   NUMBER_LINE_BLOCK: "NumberLineBlock",
+  /** Symmetry exercise on a square grid */
+  GRID_SYMMETRY_BLOCK: "GridSymmetryBlock",
   /** A position marker on the number line */
   NUMBER_LINE_POSITION: "NumberLinePosition",
   /** A draggable cursor on the number line */
@@ -185,6 +187,8 @@ const JSON_TYPES = {
   FRACTION: "fraction",
   /** Visual fraction widget */
   VISUAL_FRACTION: "visual-fraction",
+  /** Interactive symmetry exercise on a grid */
+  GRID_SYMMETRY: "grid-symmetry",
   /** Ruler geometry tool widget */
   RULER: "ruler",
   /** Protractor geometry tool widget */
@@ -199,9 +203,11 @@ const SET_SQUARE_WIDGET_ID = "_set_square";
 const STATEFUL_WIDGET_TYPES = /* @__PURE__ */ new Set([
   JSON_TYPES.MATCHER,
   JSON_TYPES.PAIR_MATCHER,
-  JSON_TYPES.VISUAL_FRACTION
+  JSON_TYPES.VISUAL_FRACTION,
+  JSON_TYPES.GRID_SYMMETRY
 ]);
 const INLINE_DRAG_OPT_PREFIX = "_inline_drag_opt_";
+const GRID_SYMMETRY_WIDGET_PREFIX = "_grid_symmetry_";
 const RTL_INLINE_WIDGET_TYPES = /* @__PURE__ */ new Set([
   JSON_TYPES.INLINE_INPUT,
   JSON_TYPES.INLINE_DRAG_OPTION,
@@ -244,6 +250,11 @@ function parseFractionKey(key2) {
   if (!match) return null;
   return { widgetId: match[1], part: match[2] };
 }
+const GridCellSchema = z.tuple([
+  z.number().int().positive(),
+  z.number().int().positive()
+]);
+const gridCellKey = ([row, col]) => `${row},${col}`;
 const Newline = createToken({
   name: "Newline",
   pattern: /\r?\n/,
@@ -325,6 +336,10 @@ const NUMBER_LINE = createToken({
   name: "NUMBER_LINE",
   pattern: /NUMBER_LINE/
 });
+const GRID_SYMMETRY = createToken({
+  name: "GRID_SYMMETRY",
+  pattern: /GRID_SYMMETRY/
+});
 const POSITION = createToken({
   name: "POSITION",
   pattern: /POSITION/
@@ -533,6 +548,7 @@ const allTokens = [
   W_N_I,
   NUMERIC_INPUT,
   NUMBER_LINE,
+  GRID_SYMMETRY,
   POSITION,
   CURSOR,
   ARROW,
@@ -708,6 +724,10 @@ class MathExerciseParser extends CstParser {
           GATE: this.BACKTRACK(this.numberLine),
           ALT: () => this.SUBRULE(this.numberLine)
         },
+        {
+          GATE: this.BACKTRACK(this.gridSymmetry),
+          ALT: () => this.SUBRULE(this.gridSymmetry)
+        },
         {
           GATE: this.BACKTRACK(this.pairMatcher),
           ALT: () => this.SUBRULE(this.pairMatcher)
@@ -723,6 +743,18 @@ class MathExerciseParser extends CstParser {
         { ALT: () => this.SUBRULE(this.line) }
       ]);
     });
+    this.gridSymmetry = this.RULE("gridSymmetry", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(GRID_SYMMETRY);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+    });
     this.table = this.RULE("table", () => {
       this.MANY(() => {
         this.OR2([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
@@ -1436,27 +1468,51 @@ class MathExerciseParser extends CstParser {
     });
     this.parameterList = this.RULE("parameterList", () => {
       this.MANY(() => {
-        this.CONSUME(Space);
+        this.OR([
+          { ALT: () => this.CONSUME(Space) },
+          { ALT: () => this.CONSUME(Newline) }
+        ]);
       });
       this.SUBRULE(this.parameter);
       this.MANY2(() => {
         this.MANY3(() => {
-          this.CONSUME2(Space);
+          this.OR2([
+            { ALT: () => this.CONSUME2(Space) },
+            { ALT: () => this.CONSUME2(Newline) }
+          ]);
         });
         this.CONSUME(Comma);
         this.MANY4(() => {
-          this.CONSUME3(Space);
+          this.OR3([
+            { ALT: () => this.CONSUME3(Space) },
+            { ALT: () => this.CONSUME3(Newline) }
+          ]);
         });
         this.SUBRULE2(this.parameter);
       });
       this.MANY5(() => {
-        this.CONSUME4(Space);
+        this.OR4([
+          { ALT: () => this.CONSUME4(Space) },
+          { ALT: () => this.CONSUME4(Newline) }
+        ]);
       });
     });
     this.parameter = this.RULE("parameter", () => {
       this.CONSUME(Identifier, { LABEL: "key" });
+      this.MANY(() => {
+        this.OR([
+          { ALT: () => this.CONSUME(Space) },
+          { ALT: () => this.CONSUME(Newline) }
+        ]);
+      });
       this.CONSUME(Equals);
-      this.OR([
+      this.MANY2(() => {
+        this.OR2([
+          { ALT: () => this.CONSUME2(Space) },
+          { ALT: () => this.CONSUME2(Newline) }
+        ]);
+      });
+      this.OR3([
         // String value
         { ALT: () => this.CONSUME(StringLiteral, { LABEL: "value" }) },
         // Number value
@@ -1465,6 +1521,11 @@ class MathExerciseParser extends CstParser {
         { ALT: () => this.CONSUME2(Identifier, { LABEL: "value" }) },
         // Tuple value: (start, end)
         { ALT: () => this.SUBRULE(this.tuple, { LABEL: "value" }) },
+        // Number-pair list enclosed in braces: {[1, 2], [3, 4]}
+        {
+          GATE: () => this.isBracedNumberPairListAhead(),
+          ALT: () => this.SUBRULE(this.bracedNumberPairList, { LABEL: "value" })
+        },
         // Curly-brace string list: {"a", "b", "c"}
         { ALT: () => this.SUBRULE(this.curlyStringList, { LABEL: "value" }) },
         // Square-bracket number array: [1, 2, 3]  — used by VISUAL_FRACTION filled/answer
@@ -1520,8 +1581,52 @@ class MathExerciseParser extends CstParser {
       this.SUBRULE(this.stringList);
       this.CONSUME(RBrace);
     });
+    this.bracedNumberPairList = this.RULE("bracedNumberPairList", () => {
+      this.CONSUME(LBrace);
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.OPTION(() => {
+        this.SUBRULE(this.numberPair);
+        this.MANY2(() => {
+          this.MANY3(() => {
+            this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+          });
+          this.CONSUME(Comma);
+          this.MANY4(() => {
+            this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+          });
+          this.SUBRULE2(this.numberPair);
+        });
+      });
+      this.MANY5(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+      this.CONSUME(RBrace);
+    });
+    this.numberPair = this.RULE("numberPair", () => {
+      this.CONSUME(LBracket);
+      this.MANY(() => this.CONSUME(Space));
+      this.CONSUME(NumberLiteral, { LABEL: "row" });
+      this.MANY2(() => this.CONSUME2(Space));
+      this.CONSUME(Comma);
+      this.MANY3(() => this.CONSUME3(Space));
+      this.CONSUME2(NumberLiteral, { LABEL: "col" });
+      this.MANY4(() => this.CONSUME4(Space));
+      this.CONSUME(RBracket);
+    });
     this.performSelfAnalysis();
   }
+  /** Distinguish `{[number, number], ...}` and the valid empty form `{}` from string lists. */
+  isBracedNumberPairListAhead() {
+    if (this.LA(1).tokenType !== LBrace) return false;
+    let offset = 2;
+    while (this.LA(offset).tokenType === Space || this.LA(offset).tokenType === Newline) {
+      offset++;
+    }
+    const firstContentToken = this.LA(offset).tokenType;
+    return firstContentToken === LBracket || firstContentToken === RBrace;
+  }
 }
 const parser = new MathExerciseParser();
 function parseOrThrow(schema, data, label) {
@@ -2066,6 +2171,135 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style, lab
     positions
   });
 }
+const GRID_SYMMETRY_AXES = ["vertical", "horizontal"];
+const GRID_SYMMETRY_INTERACTIVE_AREAS = ["left", "right", "top", "bottom"];
+const GRID_SYMMETRY_MAX_ROWS = 20;
+const GRID_SYMMETRY_MAX_COLS = 20;
+const GRID_SYMMETRY_MIN_CELL_SIZE = 0.25;
+const GRID_SYMMETRY_MAX_CELL_SIZE = 2;
+function isCellInInteractiveArea(cell, rows, cols, area) {
+  const [row, col] = cell;
+  switch (area) {
+    case "left":
+      return col <= Math.floor(cols / 2);
+    case "right":
+      return col > Math.ceil(cols / 2);
+    case "top":
+      return row <= Math.floor(rows / 2);
+    case "bottom":
+      return row > Math.ceil(rows / 2);
+  }
+}
+function reflectGridSymmetryCell(cell, rows, cols, axis) {
+  const [row, col] = cell;
+  return axis === "vertical" ? [row, cols + 1 - col] : [rows + 1 - row, col];
+}
+function computeGridSymmetryExpectedCells(data) {
+  const seen = /* @__PURE__ */ new Set();
+  const expected = [];
+  for (const cell of data.cells) {
+    if (isCellInInteractiveArea(cell, data.rows, data.cols, data.interactiveArea)) continue;
+    const reflected = reflectGridSymmetryCell(cell, data.rows, data.cols, data.axis);
+    if (!isCellInInteractiveArea(reflected, data.rows, data.cols, data.interactiveArea)) continue;
+    const key2 = gridCellKey(reflected);
+    if (!seen.has(key2)) {
+      seen.add(key2);
+      expected.push(reflected);
+    }
+  }
+  return expected.sort(([ar, ac], [br, bc]) => ar - br || ac - bc);
+}
+function computeGridSymmetryCellsToFill(data) {
+  const initial = new Set(data.cells.map(gridCellKey));
+  return computeGridSymmetryExpectedCells(data).filter((cell) => !initial.has(gridCellKey(cell)));
+}
+const GridSymmetryBlockSchema = z.object({
+  type: z.literal(AST_TYPES.GRID_SYMMETRY_BLOCK),
+  rows: z.number().int("The number of rows must be a whole number.").positive("The number of rows must be greater than 0.").max(GRID_SYMMETRY_MAX_ROWS, {
+    message: `The number of rows cannot exceed ${GRID_SYMMETRY_MAX_ROWS}.`
+  }),
+  cols: z.number().int("The number of columns must be a whole number.").positive("The number of columns must be greater than 0.").max(GRID_SYMMETRY_MAX_COLS, {
+    message: `The number of columns cannot exceed ${GRID_SYMMETRY_MAX_COLS}.`
+  }),
+  axis: z.enum(GRID_SYMMETRY_AXES),
+  interactiveArea: z.enum(GRID_SYMMETRY_INTERACTIVE_AREAS),
+  cellSize: z.number().finite().min(
+    GRID_SYMMETRY_MIN_CELL_SIZE,
+    `Cell size must be between ${GRID_SYMMETRY_MIN_CELL_SIZE} and ${GRID_SYMMETRY_MAX_CELL_SIZE}.`
+  ).max(
+    GRID_SYMMETRY_MAX_CELL_SIZE,
+    `Cell size must be between ${GRID_SYMMETRY_MIN_CELL_SIZE} and ${GRID_SYMMETRY_MAX_CELL_SIZE}.`
+  ).default(1),
+  cells: z.array(GridCellSchema)
+}).superRefine((data, ctx) => {
+  const compatible = data.axis === "vertical" ? data.interactiveArea === "left" || data.interactiveArea === "right" : data.interactiveArea === "top" || data.interactiveArea === "bottom";
+  if (!compatible) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["interactiveArea"],
+      message: data.axis === "vertical" ? 'For a vertical axis, the interactive area must be "left" or "right".' : 'For a horizontal axis, the interactive area must be "top" or "bottom".'
+    });
+  }
+  if (data.axis === "vertical" && data.cols % 2 !== 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["cols"],
+      message: `For a vertical axis, the number of columns must be even. Received: ${data.cols}.`
+    });
+  }
+  if (data.axis === "horizontal" && data.rows % 2 !== 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      path: ["rows"],
+      message: `For a horizontal axis, the number of rows must be even. Received: ${data.rows}.`
+    });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  data.cells.forEach((cell, index) => {
+    const [row, col] = cell;
+    if (row > data.rows || col > data.cols) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["cells", index],
+        message: `Cell [${row},${col}] is outside the ${data.rows} × ${data.cols} grid.`
+      });
+    }
+    const key2 = gridCellKey(cell);
+    if (seen.has(key2)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["cells", index],
+        message: `Cell [${row},${col}] is listed more than once.`
+      });
+    }
+    seen.add(key2);
+  });
+  if (!compatible) return;
+  const expected = new Set(computeGridSymmetryExpectedCells(data).map(gridCellKey));
+  data.cells.forEach((cell, index) => {
+    if (isCellInInteractiveArea(cell, data.rows, data.cols, data.interactiveArea) && !expected.has(gridCellKey(cell))) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["cells", index],
+        message: `Prefilled cell [${cell[0]},${cell[1]}] does not match the expected symmetry.`
+      });
+    }
+  });
+});
+function createGridSymmetryBlock(rows, cols, axis, interactiveArea, cells, cellSize = 1) {
+  return GridSymmetryBlockSchema.parse({
+    type: AST_TYPES.GRID_SYMMETRY_BLOCK,
+    rows,
+    cols,
+    axis,
+    interactiveArea,
+    cellSize,
+    cells
+  });
+}
+function isGridSymmetryBlock(value) {
+  return GridSymmetryBlockSchema.safeParse(value).success;
+}
 const TableCellSchema = z.object({
   type: z.literal(AST_TYPES.TABLE_CELL),
   colspan: z.number().int().positive().optional(),
@@ -2565,7 +2799,7 @@ function isMixedValidation(value) {
 function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
-const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema]);
+const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema, GridSymmetryBlockSchema]);
 const ExerciseDocumentSchema = z.object({
   type: z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
@@ -2667,12 +2901,24 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.table) return this.visit(ctx.table);
     if (ctx.radioButtons) return this.visit(ctx.radioButtons);
     if (ctx.numberLine) return this.visit(ctx.numberLine);
+    if (ctx.gridSymmetry) return this.visit(ctx.gridSymmetry);
     if (ctx.pairMatcher) return this.visit(ctx.pairMatcher);
     if (ctx.matcher) return this.visit(ctx.matcher);
     if (ctx.verticalOperation) return this.visit(ctx.verticalOperation);
     if (ctx.line) return this.visit(ctx.line);
     throw new Error("Unknown content block");
   }
+  gridSymmetry(ctx) {
+    const params = this.visit(ctx.parameterList);
+    return createGridSymmetryBlock(
+      Number(params.rows),
+      Number(params.cols),
+      params.axis,
+      params.interactiveArea,
+      params.cells,
+      params.cellSize === void 0 ? 1 : Number(params.cellSize)
+    );
+  }
   radioButtons(ctx) {
     const params = this.visit(ctx.parameterList);
     const name = params.name;
@@ -3261,6 +3507,15 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   curlyStringList(ctx) {
     return this.visit(ctx.stringList);
   }
+  bracedNumberPairList(ctx) {
+    return ctx.numberPair ? ctx.numberPair.map((pair) => this.visit(pair)) : [];
+  }
+  numberPair(ctx) {
+    return [
+      parseFloat(ctx.row[0].image),
+      parseFloat(ctx.col[0].image)
+    ];
+  }
   // ═══════════════════════════════════════════════════════════════════════════
   // Helpers
   // ═══════════════════════════════════════════════════════════════════════════
@@ -3637,6 +3892,34 @@ const VisualFractionJSONSchema = z.object({
    */
   size: z.number().positive().optional()
 }).superRefine(validateVisualFractionCapacity);
+const GridSymmetryJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.GRID_SYMMETRY),
+  rows: z.number().int().positive(),
+  cols: z.number().int().positive(),
+  axis: z.enum(["vertical", "horizontal"]),
+  interactiveArea: z.enum(["left", "right", "top", "bottom"]),
+  cellSize: z.number().finite().positive().default(1),
+  cells: z.array(GridCellSchema)
+}).superRefine((data, ctx) => {
+  const result = GridSymmetryBlockSchema.safeParse({
+    type: AST_TYPES.GRID_SYMMETRY_BLOCK,
+    rows: data.rows,
+    cols: data.cols,
+    axis: data.axis,
+    interactiveArea: data.interactiveArea,
+    cellSize: data.cellSize,
+    cells: data.cells
+  });
+  if (!result.success) {
+    for (const issue of result.error.issues) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: issue.path,
+        message: issue.message
+      });
+    }
+  }
+});
 const RulerWidgetSchema = z.object({
   type: z.literal(JSON_TYPES.RULER),
   size: z.number().optional()
@@ -3659,6 +3942,7 @@ const WidgetJSONSchema = z.union([
   MatcherWidgetJSONSchema,
   PairMatcherWidgetJSONSchema,
   VisualFractionJSONSchema,
+  GridSymmetryJSONSchema,
   RulerWidgetSchema,
   ProtractorWidgetSchema,
   SetSquareWidgetSchema
@@ -3674,7 +3958,8 @@ const ValidationJSONSchema = z.object({
       z.string(),
       z.number(),
       z.array(z.array(z.string().min(1)).min(1)).min(1),
-      z.array(z.number().int().nonnegative())
+      z.array(z.number().int().nonnegative()),
+      z.array(GridCellSchema)
     ])
   ).optional(),
   expression: z.string().optional(),
@@ -3772,6 +4057,9 @@ function isNumericKeypadJSON(widget) {
 function isFractionJSON(widget) {
   return widget.type === JSON_TYPES.FRACTION;
 }
+function isGridSymmetryJSON(widget) {
+  return widget.type === JSON_TYPES.GRID_SYMMETRY;
+}
 function isRulerWidget(widget) {
   return widget.type === JSON_TYPES.RULER;
 }
@@ -9279,6 +9567,7 @@ function toJSON(ast) {
   const idGenerator = new LayoutIdGenerator();
   const widgets = {};
   const answers = {};
+  let gridSymmetryCounter = 0;
   const allInlines = collectAllInlines(ast.lines);
   const inlineDragIds = /* @__PURE__ */ new Map();
   {
@@ -9333,6 +9622,34 @@ function toJSON(ast) {
       });
     } else if (block.type === AST_TYPES.VERTICAL_OPERATION_BLOCK) {
       layout.push(transformVerticalOperation(block, idGenerator));
+    } else if (block.type === AST_TYPES.GRID_SYMMETRY_BLOCK) {
+      const grid = block;
+      const widgetId = `${GRID_SYMMETRY_WIDGET_PREFIX}${gridSymmetryCounter++}`;
+      widgets[widgetId] = {
+        type: JSON_TYPES.GRID_SYMMETRY,
+        rows: grid.rows,
+        cols: grid.cols,
+        axis: grid.axis,
+        interactiveArea: grid.interactiveArea,
+        cellSize: grid.cellSize,
+        cells: grid.cells
+      };
+      const prefilled = grid.cells.filter((cell) => isCellInInteractiveArea(
+        cell,
+        grid.rows,
+        grid.cols,
+        grid.interactiveArea
+      ));
+      answers[widgetId] = [...prefilled, ...computeGridSymmetryCellsToFill(grid)].sort(([ar, ac], [br, bc]) => ar - br || ac - bc);
+      layout.push({
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId
+      });
+      layout.push({
+        id: idGenerator.generate(JSON_TYPES.LINEBREAK),
+        type: JSON_TYPES.LINEBREAK
+      });
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       const radioBlock = block;
       layout.push({
@@ -9930,6 +10247,18 @@ function areVisualFractionCountsEqual(expected, result) {
   if (expected.length !== result.length) return false;
   return lodashExports.isEqual(lodashExports.sortBy(expected), lodashExports.sortBy(result));
 }
+function isValidGridSymmetryCell(value, rows, cols) {
+  if (!Array.isArray(value) || value.length !== 2) return false;
+  const [row, col] = value;
+  return Number.isInteger(row) && Number.isInteger(col) && row >= 1 && row <= rows && col >= 1 && col <= cols;
+}
+function areGridSymmetryCellsEqual(expected, actual, rows, cols) {
+  if (!Array.isArray(actual) || actual.length !== expected.length) return false;
+  if (!actual.every((cell) => isValidGridSymmetryCell(cell, rows, cols))) return false;
+  const actualKeys = new Set(actual.map(gridCellKey));
+  if (actualKeys.size !== actual.length) return false;
+  return expected.every((cell) => actualKeys.has(gridCellKey(cell)));
+}
 const math$1 = create(all);
 function collectNumberLines(items) {
   const result = [];
@@ -10003,6 +10332,20 @@ function validateSimple(exercise, userInputs) {
       else allCorrect = false;
       continue;
     }
+    if (widget?.type === JSON_TYPES.GRID_SYMMETRY) {
+      const userValue2 = userInputs[widgetId];
+      const isCorrect2 = areGridSymmetryCellsEqual(
+        expected,
+        userValue2,
+        widget.rows,
+        widget.cols
+      );
+      details[widgetId] = { widgetId, userValue: userValue2, isCorrect: isCorrect2 };
+      totalCount++;
+      if (isCorrect2) correctCount++;
+      else allCorrect = false;
+      continue;
+    }
     totalCount++;
     const userValue = userInputs[widgetId];
     const isFractionLenient = widget?.type === JSON_TYPES.FRACTION && widget.simplified === false;
@@ -10433,9 +10776,19 @@ function getMissingInputs(exercise, userInputs) {
   }
   const inputs = preprocessFractionValues(exercise, userInputs);
   const isEmpty = (v) => v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
+  const isMissingAnswer = (widgetId) => {
+    const value = inputs[widgetId];
+    const widget = exercise.widgets[widgetId];
+    if (widget?.type === JSON_TYPES.GRID_SYMMETRY) {
+      const expected = exercise.validation?.answers?.[widgetId];
+      const expectedCount = Array.isArray(expected) ? expected.length : 0;
+      return !Array.isArray(value) || value.length < expectedCount;
+    }
+    return !(widgetId in inputs) || isEmpty(value);
+  };
   if (exercise.validation.mode === VALIDATION_MODES.SIMPLE && exercise.validation.answers) {
     for (const widgetId of Object.keys(exercise.validation.answers)) {
-      if (!(widgetId in inputs) || isEmpty(inputs[widgetId])) {
+      if (isMissingAnswer(widgetId)) {
         missing.push(widgetId);
       }
     }
@@ -10451,7 +10804,7 @@ function getMissingInputs(exercise, userInputs) {
       ...exercise.validation.variables ?? []
     ]);
     for (const k of keys) {
-      if (!(k in inputs) || isEmpty(inputs[k])) missing.push(k);
+      if (isMissingAnswer(k)) missing.push(k);
     }
   }
   return missing;
@@ -15874,6 +16227,94 @@ function getSizeStyle(size, _shape) {
     "--visual-fraction-size": `${size * VISUAL_FRACTION_SVG_SIZE_SCALE}rem`
   };
 }
+const GridSymmetry = ({
+  widgetId,
+  widget,
+  value,
+  validationStatus = null,
+  onChange
+}) => {
+  const initialKeys = useMemo(() => new Set(widget.cells.map(gridCellKey)), [widget.cells]);
+  const initialInteractiveCells = useMemo(
+    () => widget.cells.filter(
+      (cell) => isCellInInteractiveArea(cell, widget.rows, widget.cols, widget.interactiveArea)
+    ),
+    [widget.cells, widget.rows, widget.cols, widget.interactiveArea]
+  );
+  const selectedCells = value ?? initialInteractiveCells;
+  const selectedKeys = useMemo(() => new Set(selectedCells.map(gridCellKey)), [selectedCells]);
+  const toggleCell = (cell) => {
+    const key2 = gridCellKey(cell);
+    if (initialKeys.has(key2)) return;
+    const next = selectedKeys.has(key2) ? selectedCells.filter((candidate) => gridCellKey(candidate) !== key2) : [...selectedCells, cell];
+    onChange(widgetId, next);
+  };
+  const statusClass = validationStatus ? ` grid-symmetry--${validationStatus}` : "";
+  const cells = [];
+  for (let row = 1; row <= widget.rows; row++) {
+    for (let col = 1; col <= widget.cols; col++) {
+      const cell = [row, col];
+      const key2 = gridCellKey(cell);
+      const interactive = isCellInInteractiveArea(
+        cell,
+        widget.rows,
+        widget.cols,
+        widget.interactiveArea
+      );
+      const initial = initialKeys.has(key2);
+      const selected = selectedKeys.has(key2);
+      const locked = initial || !interactive;
+      const roleClass = initial ? interactive ? " grid-symmetry__cell--prefilled" : " grid-symmetry__cell--reference" : selected ? " grid-symmetry__cell--answer" : "";
+      const className = `grid-symmetry__cell${interactive ? " grid-symmetry__cell--interactive" : ""}${locked ? "" : " grid-symmetry__cell--editable"}${selected || initial ? " grid-symmetry__cell--selected" : ""}${roleClass}`;
+      const label = `Row ${row}, column ${col}`;
+      cells.push(
+        locked ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className,
+            role: initial ? "img" : void 0,
+            "aria-label": initial ? `${label}, filled` : void 0,
+            "aria-hidden": initial ? void 0 : true
+          },
+          key2
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className,
+            "aria-label": label,
+            "aria-pressed": selected,
+            onClick: () => toggleCell(cell)
+          },
+          key2
+        )
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: `grid-symmetry${statusClass}`, "data-testid": "grid-symmetry", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid-symmetry__grid",
+      style: {
+        "--grid-symmetry-cell-size": `calc(48px * ${widget.cellSize})`,
+        gridTemplateColumns: `repeat(${widget.cols}, var(--grid-symmetry-cell-size))`,
+        gridTemplateRows: `repeat(${widget.rows}, var(--grid-symmetry-cell-size))`
+      },
+      role: "group",
+      "aria-label": `Symmetry grid, ${widget.rows} rows by ${widget.cols} columns`,
+      children: [
+        cells,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `grid-symmetry__axis grid-symmetry__axis--${widget.axis}`,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  ) });
+};
 const RadioOptions = ({
   name,
   options,
@@ -16522,6 +16963,9 @@ function isPairMatcherWidget(widget) {
 function isVisualFractionWidget(widget) {
   return widget.type === "visual-fraction";
 }
+function isGridSymmetryWidget(widget) {
+  return widget.type === "grid-symmetry";
+}
 const WidgetRenderer = ({
   widget,
   widgetId,
@@ -16666,6 +17110,21 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isGridSymmetryWidget(widget)) {
+    const cells = Array.isArray(value) && value.every(
+      (cell) => Array.isArray(cell) && cell.length === 2 && cell.every(Number.isInteger)
+    ) ? value : void 0;
+    return /* @__PURE__ */ jsx(
+      GridSymmetry,
+      {
+        widgetId,
+        widget,
+        value: cells,
+        validationStatus,
+        onChange: (id, nextValue) => onChange(id, nextValue)
+      }
+    );
+  }
   return null;
 };
 const ExpandDiamondIcon = () => {
@@ -18730,6 +19189,14 @@ function buildInitialValues(json) {
   const initial = {};
   for (const [id, widget] of Object.entries(json.widgets)) {
     if (widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.PAIR_MATCHER) initial[id] = [];
+    if (widget.type === JSON_TYPES.GRID_SYMMETRY) {
+      initial[id] = widget.cells.filter((cell) => isCellInInteractiveArea(
+        cell,
+        widget.rows,
+        widget.cols,
+        widget.interactiveArea
+      ));
+    }
   }
   return initial;
 }
@@ -19159,6 +19626,15 @@ export {
   FractionInlineSchema,
   FractionJSONSchema,
   FreeTextInlineSchema,
+  GRID_SYMMETRY_AXES,
+  GRID_SYMMETRY_INTERACTIVE_AREAS,
+  GRID_SYMMETRY_MAX_CELL_SIZE,
+  GRID_SYMMETRY_MAX_COLS,
+  GRID_SYMMETRY_MAX_ROWS,
+  GRID_SYMMETRY_MIN_CELL_SIZE,
+  GridCellSchema,
+  GridSymmetryBlockSchema,
+  GridSymmetryJSONSchema,
   GroupItemSchema,
   HighlightedTextInlineSchema,
   HighlightedTextSchema,
@@ -19245,6 +19721,8 @@ export {
   WidgetRenderer,
   compile,
   compileWithAST,
+  computeGridSymmetryCellsToFill,
+  computeGridSymmetryExpectedCells,
   createBoldText,
   createColorText,
   createDisplayClock,
@@ -19253,6 +19731,7 @@ export {
   createExpressionValidation,
   createFraction,
   createFreeText,
+  createGridSymmetryBlock,
   createHighlightedText,
   createImage,
   createInlineDragOption,
@@ -19291,6 +19770,7 @@ export {
   getFractionKey,
   getMissingInputs,
   isBoldText,
+  isCellInInteractiveArea,
   isClock,
   isClockItem,
   isColorText,
@@ -19302,6 +19782,8 @@ export {
   isFractionJSON,
   isFractionKey,
   isFreeText,
+  isGridSymmetryBlock,
+  isGridSymmetryJSON,
   isGroupItem,
   isHighlightedText,
   isImage,
@@ -19354,6 +19836,7 @@ export {
   parse,
   parseFractionKey,
   parseSafe,
+  reflectGridSymmetryCell,
   renderExercise,
   toAST,
   toJSON,