@mathscan/math-exercise-engine 1.1.16 → 1.2.0

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;
@@ -15096,13 +15449,18 @@ function applyDropToInput(targetId, item, onChange) {
 function isUndoDrop(event, dragId) {
   return event.active.id === dragId && !event.over;
 }
+const LockContext = createContext(false);
+const ExerciseLockProvider = ({ locked, children }) => /* @__PURE__ */ jsx(LockContext.Provider, { value: locked, children });
+const useExerciseLocked = () => useContext(LockContext);
 const PlacedInputChip = ({ widgetId, value, className = "", onRemove }) => {
   const { droppedSources } = useExerciseDnd();
+  const locked = useExerciseLocked();
   const sourceOptionId = droppedSources.get(widgetId);
   const dragId = `${widgetId}__chip`;
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: dragId,
-    data: { type: "placed-chip", widgetId, label: value, sourceOptionId }
+    data: { type: "placed-chip", widgetId, label: value, sourceOptionId },
+    disabled: locked
   });
   useDndMonitor({
     onDragEnd(event) {
@@ -15115,10 +15473,10 @@ const PlacedInputChip = ({ widgetId, value, className = "", onRemove }) => {
       ref: setNodeRef,
       className: `inline-input-chip ${className}${isDragging ? " dragging" : ""}`.trim(),
       onClick: (e) => {
-        if (e.detail !== 0) onRemove();
+        if (!locked && e.detail !== 0) onRemove();
       },
-      title: "Drag to move, or click to remove",
-      style: { touchAction: "none", cursor: "grab" },
+      title: locked ? void 0 : "Drag to move, or click to remove",
+      style: { touchAction: "none", cursor: locked ? "default" : "grab" },
       ...listeners,
       ...attributes,
       children: value
@@ -15138,6 +15496,7 @@ const InlineInput = ({
   onFocus
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleChange = useCallback((newValue, fromDrop = false, sourceOptionId) => {
     onChange(widgetId, newValue, fromDrop, sourceOptionId);
   }, [onChange, widgetId]);
@@ -15153,6 +15512,7 @@ const InlineInput = ({
       id: widgetId,
       accepts: ["drag-option", "placed-chip"],
       onDrop: handleDrop,
+      disabled: locked,
       className: "inline-widget inline-input-droppable",
       children: isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
@@ -15175,8 +15535,11 @@ const InlineInput = ({
             className: `inline-input${statusClass}`,
             value,
             onChange: (e) => handleChange(e.target.value, false),
-            onMouseDown: () => playSound("input-select"),
+            onMouseDown: () => {
+              if (!locked) playSound("input-select");
+            },
             onFocus: () => onFocus?.(widgetId),
+            readOnly: locked,
             maxLength: expectedLength,
             style: { width: dynamicWidth },
             placeholder
@@ -15193,6 +15556,7 @@ const SingleDragOption = ({
   className = ""
 }) => {
   const { usedOptionIds } = useExerciseDnd();
+  const locked = useExerciseLocked();
   const isUsed = usedOptionIds.has(optionId);
   return /* @__PURE__ */ jsx("div", { className: `drag-option-slot ${className}`.trim(), children: isUsed ? /* @__PURE__ */ jsx("div", { className: "drag-option-empty", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
     Draggable,
@@ -15200,12 +15564,16 @@ const SingleDragOption = ({
       id: optionId,
       type: "drag-option",
       data: { value, label: value },
+      disabled: locked,
       className: "drag-option-wrapper",
       children: /* @__PURE__ */ jsx(
         "button",
         {
           className: "drag-option",
-          onClick: () => onOptionClick?.(value),
+          onClick: () => {
+            if (!locked) onOptionClick?.(value);
+          },
+          "aria-disabled": locked ? "true" : void 0,
           children: value
         }
       )
@@ -15319,31 +15687,34 @@ const NumericKeypad = ({
   onChange
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleDigit = (digit) => {
+    if (locked) return;
     playSound("keypad-press");
     onChange(value + digit);
   };
   const handleBackspace = () => {
+    if (locked) return;
     playSound("keypad-press");
     onChange(value.slice(0, -1));
   };
   return /* @__PURE__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, children: [
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("1"), children: "1" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("2"), children: "2" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("3"), children: "3" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("+"), children: "+" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("4"), children: "4" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("5"), children: "5" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("6"), children: "6" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("-"), children: "-" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("7"), children: "7" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("8"), children: "8" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("9"), children: "9" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("×"), children: "×" }),
-    includeDecimal ? /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-decimal", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("0"), children: "0" }),
-    /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-backspace", onClick: handleBackspace, children: "⌫" }),
-    includeOperators && /* @__PURE__ */ jsx("button", { className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", onClick: () => handleDigit("÷"), children: "÷" })
   ] });
 };
 const FractionInput = ({
@@ -15360,6 +15731,7 @@ const FractionInput = ({
   placeholder
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
   const numValue = values[numKey] ?? "";
@@ -15380,6 +15752,7 @@ const FractionInput = ({
         id: subKey,
         accepts: ["drag-option", "placed-chip"],
         onDrop: handleDrop(subKey),
+        disabled: locked,
         className: "fraction-slot-droppable",
         children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsx(
           PlacedInputChip,
@@ -15397,8 +15770,11 @@ const FractionInput = ({
             className: `inline-input fraction-input${slotClass}`,
             value: currentValue,
             onChange: (e) => onChange(subKey, e.target.value, false),
-            onMouseDown: () => playSound("input-select"),
+            onMouseDown: () => {
+              if (!locked) playSound("input-select");
+            },
             onFocus: () => onFocus?.(subKey),
+            readOnly: locked,
             maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
             size: placeholder ? placeholder.length : void 0,
             "aria-label": label,
@@ -15629,12 +16005,13 @@ function getEqualTrianglePartPath(index, divisions) {
 function getGridColumnCount(divisions) {
   return Math.ceil(Math.sqrt(divisions));
 }
-function getInteractiveProps(part, onPartClick) {
+function getInteractiveProps(part, onPartClick, locked = false) {
   if (!part.isInteractiveSlot) return {};
   return {
     onClick: () => onPartClick(part.index),
     role: "button",
     "aria-pressed": part.isSelected,
+    "aria-disabled": locked ? "true" : void 0,
     "aria-label": getPartAriaLabel(part),
     tabIndex: 0,
     onKeyDown: (event) => {
@@ -15654,6 +16031,7 @@ const BarShape = ({
   orientation,
   onPartClick
 }) => {
+  const locked = useExerciseLocked();
   const renderedParts = orientation === "vertical" ? [...parts].reverse() : parts;
   return /* @__PURE__ */ jsx(
     "div",
@@ -15665,7 +16043,7 @@ const BarShape = ({
         {
           className: part.className,
           style: part.style,
-          ...getInteractiveProps(part, onPartClick)
+          ...getInteractiveProps(part, onPartClick, locked)
         },
         part.index
       ))
@@ -15677,87 +16055,96 @@ const GridShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
-    style: {
-      "--visual-fraction-divisions": divisions,
-      "--visual-fraction-grid-cols": getGridColumnCount(divisions),
-      // Safe integer division: zod schema enforces divisions = perfect square.
-      "--visual-fraction-grid-rows": divisions / getGridColumnCount(divisions)
-    },
-    children: parts.map((part) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: part.className,
-        style: part.style,
-        ...getInteractiveProps(part, onPartClick)
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
+      style: {
+        "--visual-fraction-divisions": divisions,
+        "--visual-fraction-grid-cols": getGridColumnCount(divisions),
+        // Safe integer division: zod schema enforces divisions = perfect square.
+        "--visual-fraction-grid-rows": divisions / getGridColumnCount(divisions)
       },
-      part.index
-    ))
-  }
-);
+      children: parts.map((part) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: part.className,
+          style: part.style,
+          ...getInteractiveProps(part, onPartClick, locked)
+        },
+        part.index
+      ))
+    }
+  );
+};
 GridShape.displayName = "GridShape";
 const CircleShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "visual-fraction-widget__shape visual-fraction-widget__circle",
-    viewBox: "0 0 100 100",
-    children: parts.map((part) => {
-      const sectorProps = getCircleSectorProps(part.index, divisions);
-      const className = `${part.className} visual-fraction-widget__sector`;
-      const interactiveProps = getInteractiveProps(part, onPartClick);
-      return sectorProps.kind === "circle" ? /* @__PURE__ */ jsx(
-        "circle",
-        {
-          className,
-          style: part.style,
-          cx: "50",
-          cy: "50",
-          r: "48",
-          ...interactiveProps
-        },
-        part.index
-      ) : /* @__PURE__ */ jsx(
-        "path",
-        {
-          className,
-          style: part.style,
-          d: sectorProps.d,
-          ...interactiveProps
-        },
-        part.index
-      );
-    })
-  }
-);
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "visual-fraction-widget__shape visual-fraction-widget__circle",
+      viewBox: "0 0 100 100",
+      children: parts.map((part) => {
+        const sectorProps = getCircleSectorProps(part.index, divisions);
+        const className = `${part.className} visual-fraction-widget__sector`;
+        const interactiveProps = getInteractiveProps(part, onPartClick, locked);
+        return sectorProps.kind === "circle" ? /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className,
+            style: part.style,
+            cx: "50",
+            cy: "50",
+            r: "48",
+            ...interactiveProps
+          },
+          part.index
+        ) : /* @__PURE__ */ jsx(
+          "path",
+          {
+            className,
+            style: part.style,
+            d: sectorProps.d,
+            ...interactiveProps
+          },
+          part.index
+        );
+      })
+    }
+  );
+};
 CircleShape.displayName = "CircleShape";
 const TriangleShape = ({
   parts,
   divisions,
   onPartClick
-}) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "visual-fraction-widget__shape visual-fraction-widget__triangle",
-    viewBox: "0 0 100 100",
-    children: parts.map((part) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        className: `${part.className} visual-fraction-widget__sector`,
-        style: part.style,
-        d: getEqualTrianglePartPath(part.index, divisions),
-        ...getInteractiveProps(part, onPartClick)
-      },
-      part.index
-    ))
-  }
-);
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "visual-fraction-widget__shape visual-fraction-widget__triangle",
+      viewBox: "0 0 100 100",
+      children: parts.map((part) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: `${part.className} visual-fraction-widget__sector`,
+          style: part.style,
+          d: getEqualTrianglePartPath(part.index, divisions),
+          ...getInteractiveProps(part, onPartClick, locked)
+        },
+        part.index
+      ))
+    }
+  );
+};
 TriangleShape.displayName = "TriangleShape";
 const ShapeBar = ({ parts, divisions, orientation, onPartClick }) => /* @__PURE__ */ jsx(BarShape, { parts, divisions, orientation, onPartClick });
 const ShapeCircle = ({ parts, divisions, onPartClick }) => /* @__PURE__ */ jsx(CircleShape, { parts, divisions, onPartClick });
@@ -15801,12 +16188,14 @@ const VisualFraction = ({
     onChange
   });
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handlePartClickWithSound = useCallback(
     (index) => {
+      if (locked) return;
       if (answer.length > 0 && index >= filledCount) playSound("fraction-shade");
       handlePartClick(index);
     },
-    [answer.length, filledCount, playSound, handlePartClick]
+    [locked, answer.length, filledCount, playSound, handlePartClick]
   );
   const parts = useMemo(
     () => Array.from({ length: divisions }, (_, i) => {
@@ -15874,6 +16263,97 @@ function getSizeStyle(size, _shape) {
     "--visual-fraction-size": `${size * VISUAL_FRACTION_SVG_SIZE_SCALE}rem`
   };
 }
+const GridSymmetry = ({
+  widgetId,
+  widget,
+  value,
+  validationStatus = null,
+  onChange
+}) => {
+  const exerciseLocked = useExerciseLocked();
+  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) => {
+    if (exerciseLocked) return;
+    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,
+            "aria-disabled": exerciseLocked ? "true" : void 0,
+            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,
@@ -15882,6 +16362,7 @@ const RadioOptions = ({
   onChange
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   return /* @__PURE__ */ jsx("div", { className: "radio-options", children: options.map((option, idx) => {
     const isSelected = value === option;
     const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
@@ -15890,9 +16371,11 @@ const RadioOptions = ({
       {
         className: `radio-option${isSelected ? " selected" : ""}${statusClass}`,
         onClick: () => {
+          if (locked) return;
           playSound("radio-select");
           onChange(name, option);
         },
+        "aria-disabled": locked ? "true" : void 0,
         type: "button",
         children: option
       },
@@ -15904,7 +16387,10 @@ const Btn = ({
   label,
   extraClass = "keypad-btn-digit",
   onClick
-}) => /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+}) => {
+  const locked = useExerciseLocked();
+  return /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, disabled: locked, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+};
 const DiamondKeypad = ({ value, onChange }) => {
   const playSound = useSound();
   const append = (ch) => {
@@ -15991,8 +16477,10 @@ const MatcherWidget = ({
     () => defaultValue2 && defaultValue2.length > 0 ? assignmentsFromValue(defaultValue2, itemIds, groupCount) : initialAssignments(itemIds)
   );
   const playSound = useSound();
+  const locked = useExerciseLocked();
   const handleCardClick = useCallback(
     (itemId) => {
+      if (locked) return;
       playSound("matcher-select");
       setAssignments((prev) => {
         const current = prev[itemId] ?? null;
@@ -16000,7 +16488,7 @@ const MatcherWidget = ({
         return { ...prev, [itemId]: next };
       });
     },
-    [groupCount, playSound]
+    [groupCount, playSound, locked]
   );
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
@@ -16037,6 +16525,7 @@ const MatcherWidget = ({
               "--matcher-card-text-color": `var(--matcher-group-${colorIdx + 1}-text-color, ${textColors[colorIdx]})`
             } : void 0,
             onClick: () => handleCardClick(item.itemId),
+            "aria-disabled": locked ? "true" : void 0,
             "aria-pressed": isSelected,
             "aria-label": isSelected ? `Assigned to group ${colorIdx + 1}` : "Not assigned",
             children: item.content.map((layoutItem) => /* @__PURE__ */ jsx(
@@ -16250,6 +16739,7 @@ const PairMatcherWidget = ({
   shuffleItems = true
 }) => {
   const { topItems, bottomItems } = widget;
+  const exerciseLocked = useExerciseLocked();
   const [shuffledTop] = useState(
     () => shuffleItems ? lodashExports.shuffle([...topItems]) : [...topItems]
   );
@@ -16293,8 +16783,9 @@ const PairMatcherWidget = ({
     }
     soundPrevRef.current = { count, pendingId, flashId };
   }, [state.pairs, state.pending, state.flashTopId, playSound]);
+  const interactionLocked = validationStatus !== null || exerciseLocked;
   const handleTopClick = useCallback((topId) => {
-    if (validationStatus) return;
+    if (interactionLocked) return;
     if (flashTimerRef.current) {
       clearTimeout(flashTimerRef.current);
       flashTimerRef.current = null;
@@ -16336,9 +16827,9 @@ const PairMatcherWidget = ({
         flashBottomId: null
       };
     });
-  }, [validationStatus]);
+  }, [interactionLocked]);
   const handleBottomClick = useCallback((bottomId) => {
-    if (validationStatus) return;
+    if (interactionLocked) return;
     if (flashTimerRef.current) {
       clearTimeout(flashTimerRef.current);
       flashTimerRef.current = null;
@@ -16381,9 +16872,13 @@ const PairMatcherWidget = ({
         flashBottomId: null
       };
     });
-  }, [validationStatus]);
+  }, [interactionLocked]);
   useEffect(() => {
-    if (validationStatus || state.flashTopId === null || state.flashBottomId === null) return;
+    if (state.flashTopId === null || state.flashBottomId === null) return;
+    if (interactionLocked) {
+      setState((current) => ({ ...current, flashTopId: null, flashBottomId: null }));
+      return;
+    }
     flashTimerRef.current = setTimeout(() => {
       flashTimerRef.current = null;
       setState((current) => {
@@ -16397,7 +16892,7 @@ const PairMatcherWidget = ({
         flashTimerRef.current = null;
       }
     };
-  }, [state.flashTopId, state.flashBottomId, validationStatus]);
+  }, [state.flashTopId, state.flashBottomId, interactionLocked]);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const isMounted = useRef(false);
@@ -16457,7 +16952,7 @@ const PairMatcherWidget = ({
           dir: isRtl ? "rtl" : void 0,
           onClick: () => isTop ? handleTopClick(item.itemId) : handleBottomClick(item.itemId),
           "aria-pressed": status !== "idle",
-          "aria-disabled": validationStatus ? "true" : void 0,
+          "aria-disabled": interactionLocked ? "true" : void 0,
           children: /* @__PURE__ */ jsx("span", { className: "pair-matcher-card-content", children: item.content.map((li) => renderPairMatcherItemContent(li, widgetsMap)) })
         }
       ),
@@ -16522,6 +17017,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 +17164,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 = () => {
@@ -16978,6 +17491,7 @@ const DraggableCursor = ({
   currentValue,
   validationStatus
 }) => {
+  const locked = useExerciseLocked();
   const [isDragging, setIsDragging] = useState(false);
   const isDraggingRef = useRef(false);
   const currentValueRef = useRef(currentValue);
@@ -16999,13 +17513,14 @@ const DraggableCursor = ({
     return snapTicks.length > 0 ? snapToNearest(raw, snapTicks) : cleanFloat(raw);
   }, [axisRowRef, min, max, snapTicks]);
   const handlePointerDown = useCallback((e) => {
+    if (locked) return;
     e.currentTarget.setPointerCapture(e.pointerId);
     e.stopPropagation();
     isDraggingRef.current = true;
     dragStartValueRef.current = currentValue;
     lastSoundValueRef.current = currentValue;
     setIsDragging(true);
-  }, [currentValue]);
+  }, [currentValue, locked]);
   const updateCursorValue = useCallback((clientX) => {
     const next = snap(clientX);
     if (!almostEqual(next, lastSoundValueRef.current)) {
@@ -17033,7 +17548,7 @@ const DraggableCursor = ({
     }
   }, [updateCursorValue, playSound]);
   const handleKeyDown = useCallback((e) => {
-    if (!snapTicks.length) return;
+    if (locked || !snapTicks.length) return;
     const sorted = [...snapTicks].sort((a, b) => a - b);
     const idx = sorted.findIndex((t) => t >= currentValue - 1e-9);
     const first = sorted[0] ?? currentValue;
@@ -17055,7 +17570,7 @@ const DraggableCursor = ({
       }
       onChange(cursor.id, String(next));
     }
-  }, [snapTicks, audibleTicks, currentValue, playSound, onChange, cursor.id]);
+  }, [locked, snapTicks, audibleTicks, currentValue, playSound, onChange, cursor.id]);
   const ballClass = [
     "number-line-cursor-ball",
     isDragging ? "number-line-cursor-ball--dragging" : "",
@@ -17104,6 +17619,7 @@ const DraggableCursor = ({
         "aria-valuemax": max,
         "aria-valuenow": currentValue,
         "aria-label": sliderAriaLabel,
+        "aria-disabled": locked ? "true" : void 0,
         tabIndex: 0
       }
     )
@@ -17144,9 +17660,11 @@ const CursorBalls = ({
   }) });
 };
 const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
+  const locked = useExerciseLocked();
   const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
     id: widgetId,
-    data: { type: "placed-chip", widgetId, label }
+    data: { type: "placed-chip", widgetId, label },
+    disabled: locked
   });
   return /* @__PURE__ */ jsx(
     "div",
@@ -17171,6 +17689,7 @@ const PlacedChip = ({ widgetId, label, leftPercent, isLanding, onRemove }) => {
             type: "button",
             className: "number-line-placed-chip-remove",
             "aria-label": "Remove",
+            disabled: locked,
             onClick: onRemove,
             children: "✕"
           }
@@ -17210,6 +17729,7 @@ const FreeDragAxis = ({
   cursorValidationStatuses,
   snapKey
 }) => {
+  const axisLocked = useExerciseLocked();
   const axisRef = useRef(null);
   const snapTicks = useMemo(
     () => getSnapTicks(majorTicks, minorTicks),
@@ -17265,7 +17785,7 @@ const FreeDragAxis = ({
       return changed ? next : prev;
     });
   }, [values]);
-  const { setNodeRef } = useDroppable({ id: axisDropId });
+  const { setNodeRef } = useDroppable({ id: axisDropId, disabled: axisLocked });
   const mergedRef = useCallback((node) => {
     axisRef.current = node;
     setNodeRef(node);
@@ -17579,6 +18099,7 @@ const CounterControls = ({
   onIncrement
 }) => {
   const playSound = useSound();
+  const locked = useExerciseLocked();
   return /* @__PURE__ */ jsxs("div", { className: "number-line-counter", "aria-label": counter.name ?? "Counter", children: [
     /* @__PURE__ */ jsxs("div", { className: "number-line-counter-controls", children: [
       /* @__PURE__ */ jsx(
@@ -17587,7 +18108,7 @@ const CounterControls = ({
           type: "button",
           className: "number-line-counter-btn",
           "aria-label": "Decrease",
-          disabled: count <= counter.min,
+          disabled: locked || count <= counter.min,
           onClick: () => {
             playSound("counter-step");
             onDecrement();
@@ -17602,7 +18123,7 @@ const CounterControls = ({
           type: "button",
           className: "number-line-counter-btn",
           "aria-label": "Increase",
-          disabled: count >= counter.max,
+          disabled: locked || count >= counter.max,
           onClick: () => {
             playSound("counter-step");
             onIncrement();
@@ -18186,6 +18707,7 @@ const ClockRenderer = ({
   validationStatus,
   onChange
 }) => {
+  const locked = useExerciseLocked();
   const format = item.format ?? "24h";
   const interactive = item.mode === "interactive";
   const snap = interactive && "snap" in item ? item.snap ?? 1 : 1;
@@ -18231,18 +18753,18 @@ const ClockRenderer = ({
     }
   }, [snap, hours, minutes, item.mode, item.name, onChange, playSound]);
   const onPointerDown = (hand) => (e) => {
-    if (!interactive) return;
+    if (!interactive || locked) return;
     e.preventDefault();
     e.target.setPointerCapture?.(e.pointerId);
     draggingRef.current = hand;
     updateFromPointer(e.clientX, e.clientY);
   };
   const onPointerMove = (e) => {
-    if (!interactive || !draggingRef.current) return;
+    if (!interactive || locked || !draggingRef.current) return;
     updateFromPointer(e.clientX, e.clientY);
   };
   const onPointerUp = (e) => {
-    if (!interactive) return;
+    if (!interactive || locked) return;
     e.target.releasePointerCapture?.(e.pointerId);
     draggingRef.current = null;
   };
@@ -18730,6 +19252,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;
 }
@@ -18786,38 +19316,45 @@ const ExerciseRenderer = forwardRef(({
   const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
   const [focusedInputId, setFocusedInputId] = useState(null);
   const [validationDetails, setValidationDetails] = useState(null);
+  const rootRef = useRef(null);
   const [resetKey, setResetKey] = useState(0);
   const [revealed, setRevealed] = useState(false);
   const playSound = useSoundPlayer(soundEnabled, sounds);
-  useImperativeHandle(ref, () => ({
-    submit: () => {
-      const result = validate(json, values);
-      playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
-      const details = { ...result.details };
-      const slotValidation = (id, raw, expected) => ({
-        widgetId: id,
-        userValue: typeof raw === "string" ? raw : void 0,
-        isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
-      });
-      for (const [widgetId, widget] of Object.entries(json.widgets)) {
-        if (widget.type !== JSON_TYPES.FRACTION) continue;
-        if (!(widgetId in details)) continue;
-        const answer = json.validation?.answers?.[widgetId];
-        if (!answer) continue;
-        const [expectedNum, expectedDen] = answer.split("/", 2);
-        if (!expectedNum || !expectedDen) continue;
-        if (details[widgetId]?.isCorrect) {
-          if (widget.numerator === null) details[`${widgetId}__num`] = { widgetId: `${widgetId}__num`, userValue: void 0, isCorrect: true };
-          if (widget.denominator === null) details[`${widgetId}__den`] = { widgetId: `${widgetId}__den`, userValue: void 0, isCorrect: true };
-        } else {
-          if (widget.numerator === null) details[`${widgetId}__num`] = slotValidation(`${widgetId}__num`, values[`${widgetId}__num`], expectedNum);
-          if (widget.denominator === null) details[`${widgetId}__den`] = slotValidation(`${widgetId}__den`, values[`${widgetId}__den`], expectedDen);
-        }
+  const externallyLocked = useExerciseLocked();
+  const locked = validationDetails !== null || externallyLocked;
+  const lastResultRef = useRef(null);
+  const runSubmit = () => {
+    if (locked) return lastResultRef.current ?? validate(json, values);
+    const result = validate(json, values);
+    playSound(result.isCorrect ? "answer-correct" : "answer-wrong");
+    const details = { ...result.details };
+    const slotValidation = (id, raw, expected) => ({
+      widgetId: id,
+      userValue: typeof raw === "string" ? raw : void 0,
+      isCorrect: typeof raw === "string" && raw !== "" && normalize(raw) === normalize(expected)
+    });
+    for (const [widgetId, widget] of Object.entries(json.widgets)) {
+      if (widget.type !== JSON_TYPES.FRACTION) continue;
+      if (!(widgetId in details)) continue;
+      const answer = json.validation?.answers?.[widgetId];
+      if (!answer) continue;
+      const [expectedNum, expectedDen] = answer.split("/", 2);
+      if (!expectedNum || !expectedDen) continue;
+      if (details[widgetId]?.isCorrect) {
+        if (widget.numerator === null) details[`${widgetId}__num`] = { widgetId: `${widgetId}__num`, userValue: void 0, isCorrect: true };
+        if (widget.denominator === null) details[`${widgetId}__den`] = { widgetId: `${widgetId}__den`, userValue: void 0, isCorrect: true };
+      } else {
+        if (widget.numerator === null) details[`${widgetId}__num`] = slotValidation(`${widgetId}__num`, values[`${widgetId}__num`], expectedNum);
+        if (widget.denominator === null) details[`${widgetId}__den`] = slotValidation(`${widgetId}__den`, values[`${widgetId}__den`], expectedDen);
       }
-      setValidationDetails(details);
-      onSubmit?.(values);
-      return result;
-    },
+    }
+    setValidationDetails(details);
+    onSubmit?.(values);
+    lastResultRef.current = result;
+    return result;
+  };
+  useImperativeHandle(ref, () => ({
+    submit: runSubmit,
     getValues: () => values,
     getCompletion: () => {
       const answerable = getAnswerableInputs(json);
@@ -18860,14 +19397,20 @@ const ExerciseRenderer = forwardRef(({
       setResetKey((k) => k + 1);
     },
     focusFirstInput: () => {
-      const container = document.querySelector(".math-exercise-renderer");
-      const firstInput = container?.querySelector('input[type="text"], input[type="number"], textarea, select');
-      if (firstInput instanceof HTMLElement) {
-        firstInput.focus();
+      const container = rootRef.current;
+      if (!container) return;
+      const candidates = container.querySelectorAll(
+        'input[type="text"], input[type="number"], textarea, select'
+      );
+      for (const el of Array.from(candidates)) {
+        if (el.readOnly || el.disabled) continue;
+        el.focus();
+        return;
       }
     }
-  }), [json, values, onSubmit, playSound]);
+  }), [json, values, onSubmit, playSound, locked]);
   const handleChange = (widgetId, value, fromDrop = false, sourceOptionId) => {
+    if (locked) return;
     setRevealed(false);
     const next = { ...valuesRef.current, [widgetId]: value };
     valuesRef.current = next;
@@ -18884,7 +19427,7 @@ const ExerciseRenderer = forwardRef(({
     onChange?.(next);
   };
   const handleSubmit = () => {
-    onSubmit?.(values);
+    runSubmit();
   };
   const lineGroups = useMemo(() => {
     const isRTLInlineWidget = (item) => {
@@ -18999,7 +19542,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(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${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}`, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -19095,8 +19638,8 @@ const ExerciseRenderer = forwardRef(({
         }
       }
     ) }),
-    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", onClick: handleSubmit, children: "Check Answer" })
-  ] }) }) });
+    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" })
+  ] }) }) }) });
 });
 ExerciseRenderer.displayName = "ExerciseRenderer";
 function renderExercise(options) {
@@ -19153,12 +19696,22 @@ export {
   EngineError,
   ExerciseDocumentSchema,
   ExerciseJSONSchema,
+  ExerciseLockProvider,
   ExerciseMetaSchema,
   ExerciseRenderer,
   ExpressionValidationSchema,
   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 +19798,8 @@ export {
   WidgetRenderer,
   compile,
   compileWithAST,
+  computeGridSymmetryCellsToFill,
+  computeGridSymmetryExpectedCells,
   createBoldText,
   createColorText,
   createDisplayClock,
@@ -19253,6 +19808,7 @@ export {
   createExpressionValidation,
   createFraction,
   createFreeText,
+  createGridSymmetryBlock,
   createHighlightedText,
   createImage,
   createInlineDragOption,
@@ -19291,6 +19847,7 @@ export {
   getFractionKey,
   getMissingInputs,
   isBoldText,
+  isCellInInteractiveArea,
   isClock,
   isClockItem,
   isColorText,
@@ -19302,6 +19859,8 @@ export {
   isFractionJSON,
   isFractionKey,
   isFreeText,
+  isGridSymmetryBlock,
+  isGridSymmetryJSON,
   isGroupItem,
   isHighlightedText,
   isImage,
@@ -19354,11 +19913,13 @@ export {
   parse,
   parseFractionKey,
   parseSafe,
+  reflectGridSymmetryCell,
   renderExercise,
   toAST,
   toJSON,
   tokenize,
   tokenizeSafe,
+  useExerciseLocked,
   useSound,
   validate,
   validateBooleanExpression,