@mathscan/math-exercise-engine 1.1.15 → 1.1.17

package/dist/index.mjs

@@ -1,8 +1,8 @@
-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, useImperativeHandle } from "react";
+import React, { useLayoutEffect, useEffect, useRef, useMemo, useCallback, useState, createContext, memo, useReducer, useContext, forwardRef, cloneElement, useId, useImperativeHandle } from "react";
 import { unstable_batchedUpdates, createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 const AST_TYPES = {
@@ -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,
@@ -229,6 +235,9 @@ const SIDE_PAD = 7;
 const CSS_VAR_SIDE_PAD = "--nl-side-pad";
 const NUMBER_LINE_LABELS = ["all", "extremes", "min-only", "max-only", "none"];
 const NUMBER_LINE_HIGHLIGHT_COLORS = ["blue", "red", "green", "orange", "purple", "yellow"];
+const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+const isNumberLineHighlightColor = (value) => NUMBER_LINE_HIGHLIGHT_COLORS.includes(value) || HEX_COLOR_REGEX.test(value);
+const highlightColorMessage = (block) => `${block}: color must be one of ${NUMBER_LINE_HIGHLIGHT_COLORS.join(", ")} or a hex value (e.g. "#3B82F6")`;
 const NUMBER_LINE_DRAG_MODES = ["axis", "inputs"];
 function getFractionKey(widgetId, part) {
   return `${widgetId}__${part}`;
@@ -241,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/,
@@ -322,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/
@@ -530,6 +548,7 @@ const allTokens = [
   W_N_I,
   NUMERIC_INPUT,
   NUMBER_LINE,
+  GRID_SYMMETRY,
   POSITION,
   CURSOR,
   ARROW,
@@ -705,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)
@@ -720,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) }]);
@@ -1433,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
@@ -1462,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
@@ -1517,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) {
@@ -1599,7 +1707,9 @@ const ImageInlineSchema = z.object({
   }),
   alt: z.string(),
   width: z.number().positive().optional(),
-  height: z.number().positive().optional()
+  height: z.number().positive().optional(),
+  /** Opt-in: show an expand control that opens the image fullscreen. */
+  fullscreen: z.boolean().optional()
 });
 const VisualFractionInlineSchema = z.object({
   type: z.literal(AST_TYPES.VISUAL_FRACTION),
@@ -1904,10 +2014,8 @@ const NumberLineHighlightSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_HIGHLIGHT),
   from: z.number().finite({ message: "HIGHLIGHT: from must be a finite number" }),
   to: z.number().finite({ message: "HIGHLIGHT: to must be a finite number" }),
-  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS, {
-    errorMap: () => ({
-      message: `HIGHLIGHT: color must be one of ${NUMBER_LINE_HIGHLIGHT_COLORS.join(", ")}`
-    })
+  color: z.string().refine(isNumberLineHighlightColor, {
+    message: highlightColorMessage("HIGHLIGHT")
   }).optional(),
   label: z.string().optional()
 }).refine((d) => d.from < d.to, {
@@ -1926,7 +2034,7 @@ const NumberLineCursorSchema = z.object({
   type: z.literal(AST_TYPES.NUMBER_LINE_CURSOR),
   value: z.number().finite({ message: "CURSOR: value must be a finite number" }).default(0),
   answer: z.number({ required_error: "CURSOR: answer is required" }).finite({ message: "CURSOR: answer must be a finite number" }),
-  color: z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/, {
+  color: z.string().regex(HEX_COLOR_REGEX, {
     message: 'CURSOR: color must be a hex value (e.g. "#3B82F6" or "#F00")'
   }).optional(),
   fillRange: z.boolean().default(false),
@@ -1948,8 +2056,8 @@ const NumberLineArrowSchema = z.object({
   to: z.number().finite({ message: "ARROW: to must be a finite number" }),
   color: z.string().optional(),
   inlines: z.array(InlineNodeSchema)
-}).refine((d) => d.from < d.to, {
-  message: "ARROW: from must be less than to"
+}).refine((d) => d.from !== d.to, {
+  message: "ARROW: from and to must be different"
 });
 function createNumberLineArrow(from, to, inlines, color) {
   return NumberLineArrowSchema.parse({
@@ -2014,7 +2122,9 @@ const NumberLineBlockSchema = z.object({
     }
   }
   for (const arrow of data.arrows ?? []) {
-    if (arrow.from < data.min || arrow.to > data.max) {
+    const lo = Math.min(arrow.from, arrow.to);
+    const hi = Math.max(arrow.from, arrow.to);
+    if (lo < data.min || hi > data.max) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `NUMBER_LINE: ARROW range [${arrow.from}, ${arrow.to}] must be within [${data.min}, ${data.max}]`
@@ -2061,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(),
@@ -2560,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(),
@@ -2662,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;
@@ -3106,7 +3357,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const alt = params.alt;
     const width = params.width;
     const height = params.height;
-    return createImage(name, src, alt, { width, height });
+    const fullscreen = params.fullscreen !== void 0 ? params.fullscreen === true || params.fullscreen === "true" : void 0;
+    return createImage(name, src, alt, { width, height, fullscreen });
   }
   visualFraction(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -3255,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -3328,7 +3589,9 @@ const ImageItemSchema = z.object({
   }),
   alt: z.string(),
   width: z.number().positive().optional(),
-  height: z.number().positive().optional()
+  height: z.number().positive().optional(),
+  /** Opt-in: show an expand control that opens the image fullscreen. */
+  fullscreen: z.boolean().optional()
 });
 const SpaceItemSchema = z.object({
   id: z.string(),
@@ -3433,7 +3696,9 @@ const NumberLineHighlightItemSchema = z.object({
   type: z.literal(JSON_TYPES.NUMBER_LINE_HIGHLIGHT),
   from: z.number().finite(),
   to: z.number().finite(),
-  color: z.enum(NUMBER_LINE_HIGHLIGHT_COLORS).optional(),
+  color: z.string().refine(isNumberLineHighlightColor, {
+    message: highlightColorMessage("HIGHLIGHT")
+  }).optional(),
   label: z.string().optional()
 });
 const NumberLineCursorItemSchema = z.object({
@@ -3441,7 +3706,7 @@ const NumberLineCursorItemSchema = z.object({
   type: z.literal(JSON_TYPES.NUMBER_LINE_CURSOR),
   value: z.number().finite(),
   answer: z.number().finite(),
-  color: z.string().regex(/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/).optional(),
+  color: z.string().regex(HEX_COLOR_REGEX).optional(),
   fillRange: z.boolean(),
   label: z.string().optional()
 });
@@ -3627,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()
@@ -3649,6 +3942,7 @@ const WidgetJSONSchema = z.union([
   MatcherWidgetJSONSchema,
   PairMatcherWidgetJSONSchema,
   VisualFractionJSONSchema,
+  GridSymmetryJSONSchema,
   RulerWidgetSchema,
   ProtractorWidgetSchema,
   SetSquareWidgetSchema
@@ -3664,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(),
@@ -3762,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;
 }
@@ -9269,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();
   {
@@ -9323,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({
@@ -9787,7 +10114,8 @@ function transformInline(inline, idGenerator, inlineDragIds) {
         src: inline.src,
         alt: inline.alt,
         ...inline.width !== void 0 && { width: inline.width },
-        ...inline.height !== void 0 && { height: inline.height }
+        ...inline.height !== void 0 && { height: inline.height },
+        ...inline.fullscreen !== void 0 && { fullscreen: inline.fullscreen }
       };
     case AST_TYPES.VISUAL_FRACTION:
       return {
@@ -9919,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 = [];
@@ -9992,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;
@@ -10422,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);
       }
     }
@@ -10440,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;
@@ -15863,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,
@@ -16511,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,
@@ -16655,8 +17110,243 @@ 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 = () => {
+  const gradientId = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "image-zoom-icon",
+      viewBox: "0 0 60 60",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            stroke: "#BDAFFE",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            y: "-1.41531",
+            width: "31.6754",
+            height: "31.6754",
+            rx: "7",
+            transform: "matrix(0.706556 0.707657 -0.706556 0.707657 29.4526 10.0862)",
+            stroke: `url(#${gradientId})`,
+            strokeOpacity: "0.3",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M22.45 27 L22.45 23.5 L25.95 23.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M34.95 23.5 L38.45 23.5 L38.45 27" }),
+              /* @__PURE__ */ jsx("path", { d: "M38.45 36 L38.45 39.5 L34.95 39.5" }),
+              /* @__PURE__ */ jsx("path", { d: "M25.95 39.5 L22.45 39.5 L22.45 36" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: gradientId,
+            x1: "3.84406",
+            y1: "3.97407",
+            x2: "24.7079",
+            y2: "24.8379",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "#FAFAFA" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8A4899" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+const CloseIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "image-lightbox-close-icon",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 6L6 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 6L18 18",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+const ImageItem = ({
+  src,
+  alt,
+  width,
+  height,
+  fullscreen = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const closeRef = useRef(null);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const isLightboxOpen = isOpen && fullscreen;
+  useEffect(() => {
+    if (!isLightboxOpen) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [isLightboxOpen, close]);
+  useEffect(() => {
+    if (!isLightboxOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isLightboxOpen]);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (isLightboxOpen) {
+      closeRef.current?.focus();
+    } else if (wasOpen.current) {
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+    wasOpen.current = isLightboxOpen;
+  }, [isLightboxOpen]);
+  const overlay = isLightboxOpen && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "image-lightbox",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": alt || "Image",
+        onClick: close,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeRef,
+              type: "button",
+              className: "image-lightbox-close",
+              "aria-label": "Close fullscreen image",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              className: "image-lightbox-img",
+              src,
+              alt,
+              onClick: (e) => e.stopPropagation()
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  const img = /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: `image-item text-item ${fullscreen ? "image-item-zoomable" : ""}`,
+      src,
+      alt,
+      ...width !== void 0 && { width },
+      ...height !== void 0 && { height },
+      loading: "lazy",
+      ...fullscreen && { onClick: open }
+    }
+  );
+  if (!fullscreen) return img;
+  return /* @__PURE__ */ jsxs("span", { className: "image-item-wrapper", children: [
+    img,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: "image-zoom-btn",
+        "aria-label": alt ? `View "${alt}" fullscreen` : "View image fullscreen",
+        onClick: open,
+        children: /* @__PURE__ */ jsx(ExpandDiamondIcon, {})
+      }
+    ),
+    overlay
+  ] });
+};
 const EPSILON = 10 ** -INTERNAL_PRECISION;
 const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
 const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
@@ -16710,7 +17400,7 @@ const getPositionWidgetId = (content) => {
   }
   return null;
 };
-const toHighlightColor = (color) => `var(--nl-highlight-${color})`;
+const toHighlightColor = (color) => color.startsWith("#") ? color : `var(--nl-highlight-${color})`;
 const getBandGeometry = (h, min, max) => {
   const leftPct = toPercent(Math.min(h.from, h.to), min, max);
   const rightPct = toPercent(Math.max(h.from, h.to), min, max);
@@ -17407,24 +18097,27 @@ function getArrowArcLabelTop(widthPct) {
   const arcTop = svgTop + ARROW_ARC_BASE_Y - getArrowArcLift(widthPct);
   return Math.max(0, arcTop - ARROW_ARC_LABEL_OFFSET);
 }
-function getArrowArcPaths(widthPct, svgWidthPx = ARROW_ARC_VIEWBOX_WIDTH) {
-  const endX = getArrowArcSvgWidth(svgWidthPx);
+function getArrowArcPaths(widthPct, svgWidthPx = ARROW_ARC_VIEWBOX_WIDTH, reversed = false) {
+  const width = getArrowArcSvgWidth(svgWidthPx);
+  const startX = reversed ? width : 0;
+  const tipX = reversed ? 0 : width;
+  const sign = reversed ? -1 : 1;
   const controlInset = Math.min(svgWidthPx * 0.18, 48);
   const lift = getArrowArcLift(widthPct);
   const controlY = fmt(ARROW_ARC_BASE_Y - lift);
-  const tangentAngle = Math.atan2(ARROW_ARC_BASE_Y - controlY, endX - (endX - controlInset));
-  const tx = Math.cos(tangentAngle);
+  const tangentAngle = Math.atan2(ARROW_ARC_BASE_Y - controlY, controlInset);
+  const tx = Math.cos(tangentAngle) * sign;
   const ty = Math.sin(tangentAngle);
-  const shaftEndX = fmt(endX - tx * ARROW_ARC_HEAD_LENGTH);
+  const shaftEndX = fmt(tipX - tx * ARROW_ARC_HEAD_LENGTH);
   const shaftEndY = fmt(ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH);
   const endControlX = fmt(shaftEndX - tx * controlInset);
   const endControlY = fmt(shaftEndY - ty * controlInset);
-  const arcPath = `M 0 ${ARROW_ARC_BASE_Y} C ${fmt(controlInset)} ${controlY} ${endControlX} ${endControlY} ${shaftEndX} ${shaftEndY}`;
+  const arcPath = `M ${fmt(startX)} ${ARROW_ARC_BASE_Y} C ${fmt(startX + sign * controlInset)} ${controlY} ${endControlX} ${endControlY} ${shaftEndX} ${shaftEndY}`;
   const nx = -ty;
   const ny = tx;
-  const baseX = endX - tx * ARROW_ARC_HEAD_LENGTH;
+  const baseX = tipX - tx * ARROW_ARC_HEAD_LENGTH;
   const baseY = ARROW_ARC_BASE_Y - ty * ARROW_ARC_HEAD_LENGTH;
-  const headPath = `M ${fmt(endX)} ${ARROW_ARC_BASE_Y} L ${fmt(baseX + nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY + ny * ARROW_ARC_HEAD_HALF_WIDTH)} L ${fmt(baseX - nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY - ny * ARROW_ARC_HEAD_HALF_WIDTH)} Z`;
+  const headPath = `M ${fmt(tipX)} ${ARROW_ARC_BASE_Y} L ${fmt(baseX + nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY + ny * ARROW_ARC_HEAD_HALF_WIDTH)} L ${fmt(baseX - nx * ARROW_ARC_HEAD_HALF_WIDTH)} ${fmt(baseY - ny * ARROW_ARC_HEAD_HALF_WIDTH)} Z`;
   return { arcPath, headPath };
 }
 function getArrowArcLayouts(arrows, min, max) {
@@ -17435,9 +18128,10 @@ function getArrowArcLayouts(arrows, min, max) {
     return {
       arrow,
       index,
-      leftPct: fromPct,
-      rightPct: toPct,
-      widthPct: toPct - fromPct,
+      leftPct: Math.min(fromPct, toPct),
+      rightPct: Math.max(fromPct, toPct),
+      widthPct: Math.abs(toPct - fromPct),
+      reversed: toPct < fromPct,
       level: 0
     };
   }).filter((layout) => layout.widthPct > 0).sort((a, b) => a.leftPct - b.leftPct || a.rightPct - b.rightPct || a.index - b.index);
@@ -17474,7 +18168,7 @@ function useElementWidth() {
   return [ref, width];
 }
 const ArrowArc = ({
-  layout: { arrow, leftPct, widthPct, level },
+  layout: { arrow, leftPct, widthPct, reversed, level },
   widgets,
   values,
   droppedInputs,
@@ -17486,8 +18180,8 @@ const ArrowArc = ({
   const hasLabel = arrow.content.length > 0;
   const svgWidthPx = getArrowArcSvgWidth(renderedWidthPx);
   const { arcPath, headPath } = useMemo(
-    () => getArrowArcPaths(widthPct, svgWidthPx),
-    [widthPct, svgWidthPx]
+    () => getArrowArcPaths(widthPct, svgWidthPx, reversed),
+    [widthPct, svgWidthPx, reversed]
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -18243,14 +18937,13 @@ const LayoutRenderer = ({
     }
     case JSON_TYPES.IMAGE:
       return /* @__PURE__ */ jsx(
-        "img",
+        ImageItem,
         {
-          className: "image-item text-item",
           src: item.src,
           alt: item.alt,
-          ...item.width !== void 0 && { width: item.width },
-          ...item.height !== void 0 && { height: item.height },
-          loading: "lazy"
+          width: item.width,
+          height: item.height,
+          fullscreen: item.fullscreen
         }
       );
     case JSON_TYPES.WIDGET_REF: {
@@ -18496,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;
 }
@@ -18925,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,
@@ -19011,6 +19721,8 @@ export {
   WidgetRenderer,
   compile,
   compileWithAST,
+  computeGridSymmetryCellsToFill,
+  computeGridSymmetryExpectedCells,
   createBoldText,
   createColorText,
   createDisplayClock,
@@ -19019,6 +19731,7 @@ export {
   createExpressionValidation,
   createFraction,
   createFreeText,
+  createGridSymmetryBlock,
   createHighlightedText,
   createImage,
   createInlineDragOption,
@@ -19057,6 +19770,7 @@ export {
   getFractionKey,
   getMissingInputs,
   isBoldText,
+  isCellInInteractiveArea,
   isClock,
   isClockItem,
   isColorText,
@@ -19068,6 +19782,8 @@ export {
   isFractionJSON,
   isFractionKey,
   isFreeText,
+  isGridSymmetryBlock,
+  isGridSymmetryJSON,
   isGroupItem,
   isHighlightedText,
   isImage,
@@ -19120,6 +19836,7 @@ export {
   parse,
   parseFractionKey,
   parseSafe,
+  reflectGridSymmetryCell,
   renderExercise,
   toAST,
   toJSON,