@mathscan/math-exercise-engine 1.2.9 → 1.2.11

package/dist/{index-XAInSHXa.mjs → index-6z_8j1tM.mjs}

@@ -100,6 +100,12 @@ const AST_TYPES = {
   CHART_BAR: "ChartBar",
   /** A single pictograph item inside a CHART[type="pictograph"] block */
   CHART_PICTO: "ChartPicto",
+  /** A named series (color + legend label) inside a CHART[type="grouped-bar"] block */
+  CHART_SERIES: "ChartSeries",
+  /** One category cluster inside a CHART[type="grouped-bar"] block */
+  CHART_GROUP: "ChartGroup",
+  /** A single bar inside a GROUP, referencing a declared SERIES by id */
+  CHART_SERIES_BAR: "ChartSeriesBar",
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -203,6 +209,10 @@ const JSON_TYPES = {
   CHART_BAR: "chart-bar",
   /** A single pictograph item rendered inside a chart */
   CHART_PICTO: "chart-picto",
+  /** A single bar rendered inside a grouped-bar chart's GROUP — distinct from
+   *  CHART_BAR so the JSON self-identifies which shape it is (has `seriesId`),
+   *  independent of the widget type used for validation. */
+  CHART_SERIES_BAR: "chart-series-bar",
   // ═══════════════════════════════════════════════════════════════════════════
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "inline-input",
@@ -230,6 +240,7 @@ const JSON_TYPES = {
   GEOMETRY: "geometry"
 };
 const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
+const NUMERIC_KEYPAD_WIDGET_ID = "_numeric_keypad";
 const RULER_WIDGET_ID = "_ruler";
 const PROTRACTOR_WIDGET_ID = "_protractor";
 const SET_SQUARE_WIDGET_ID = "_set_square";
@@ -262,7 +273,8 @@ const INPUT_TYPES = {
   /** Numeric input (digits only) */
   NUMERIC: "numeric"
 };
-const NUMBER_LINE_STYLES = ["arrow-right", "arrow-left", "arrow-both", "line"];
+const NUMBER_LINE_STYLES = ["arrow-right", "arrow-left", "arrow-both", "line", "line-left"];
+const DEFAULT_NUMBER_LINE_STYLE = "line-left";
 const INTERNAL_PRECISION = 9;
 const DISPLAY_PRECISION = 2;
 const SIDE_PAD = 7;
@@ -436,7 +448,7 @@ const MATCHER = createToken({
 });
 const GROUP = createToken({
   name: "GROUP",
-  pattern: /GROUP/
+  pattern: /GROUP(?=\s*[[{])/
 });
 const ITEM = createToken({
   name: "ITEM",
@@ -486,6 +498,18 @@ const PICTO = createToken({
   name: "PICTO",
   pattern: /PICTO/
 });
+const LABEL = createToken({
+  name: "LABEL",
+  pattern: /LABEL(?=\s*\{)/
+});
+const SERIES = createToken({
+  name: "SERIES",
+  pattern: /SERIES(?=\s*\[)/
+});
+const SERIES_BAR = createToken({
+  name: "SERIES_BAR",
+  pattern: /SERIES_BAR(?=\s*\[)/
+});
 const SEP = createToken({
   name: "SEP",
   pattern: /SEP(?![a-zA-Z0-9_])/
@@ -684,6 +708,9 @@ const allTokens = [
   Y_AXIS,
   BAR,
   PICTO,
+  LABEL,
+  SERIES_BAR,
+  SERIES,
   SEP,
   CARRY,
   INPUT,
@@ -1770,22 +1797,15 @@ class MathExerciseParser extends CstParser {
       });
       this.MANY6({
         GATE: () => {
-          let k = 1;
-          while (this.LA(k).tokenType === Space || this.LA(k).tokenType === Newline) k++;
-          const t = this.LA(k).tokenType;
-          return t === BAR || t === PICTO;
+          const t = this.LA(1).tokenType;
+          return t === BAR || t === PICTO || t === SERIES || t === GROUP;
         },
         DEF: () => {
           this.OR6([
-            {
-              GATE: () => {
-                let k = 1;
-                while (this.LA(k).tokenType === Space || this.LA(k).tokenType === Newline) k++;
-                return this.LA(k).tokenType === BAR;
-              },
-              ALT: () => this.SUBRULE(this.chartBarItem)
-            },
-            { ALT: () => this.SUBRULE(this.chartPictoItem) }
+            { GATE: () => this.LA(1).tokenType === BAR, ALT: () => this.SUBRULE(this.chartBarItem) },
+            { GATE: () => this.LA(1).tokenType === PICTO, ALT: () => this.SUBRULE(this.chartPictoItem) },
+            { GATE: () => this.LA(1).tokenType === SERIES, ALT: () => this.SUBRULE(this.chartSeriesItem) },
+            { ALT: () => this.SUBRULE(this.chartGroupItem) }
           ]);
         }
       });
@@ -1906,6 +1926,92 @@ class MathExerciseParser extends CstParser {
         this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
       });
     });
+    this.chartSeriesItem = this.RULE("chartSeriesItem", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(SERIES);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.MANY4(() => {
+        this.OR4([
+          { ALT: () => this.SUBRULE(this.inlineElement) },
+          { ALT: () => this.CONSUME4(Newline) }
+        ]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY5(() => {
+        this.OR5([{ ALT: () => this.CONSUME5(Space) }, { ALT: () => this.CONSUME5(Newline) }]);
+      });
+    });
+    this.chartGroupLabel = this.RULE("chartGroupLabel", () => {
+      this.CONSUME(LABEL);
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.MANY3(() => {
+        this.OR3([
+          { ALT: () => this.SUBRULE(this.inlineElement) },
+          { ALT: () => this.CONSUME3(Newline) }
+        ]);
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+    });
+    this.chartSeriesBarItem = this.RULE("chartSeriesBarItem", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(SERIES_BAR);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+    });
+    this.chartGroupItem = this.RULE("chartGroupItem", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(GROUP);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.CONSUME(LBrace);
+      this.MANY3(() => {
+        this.OR3([{ ALT: () => this.CONSUME3(Space) }, { ALT: () => this.CONSUME3(Newline) }]);
+      });
+      this.MANY4({
+        GATE: () => this.LA(1).tokenType === LABEL,
+        DEF: () => this.SUBRULE(this.chartGroupLabel)
+      });
+      this.MANY5({
+        GATE: () => this.LA(1).tokenType === SERIES_BAR,
+        DEF: () => this.SUBRULE(this.chartSeriesBarItem)
+      });
+      this.CONSUME(RBrace);
+      this.MANY6(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Space) }, { ALT: () => this.CONSUME4(Newline) }]);
+      });
+    });
     this.performSelfAnalysis();
   }
   /** Distinguish `{[number, number], ...}` and the valid empty form `{}` from string lists. */
@@ -1951,6 +2057,8 @@ const VISUAL_FRACTION_SHAPE = {
 };
 const VISUAL_FRACTION_DEFAULT_SIZE = 1.35;
 const VISUAL_FRACTION_MAX_DIVISIONS = 100;
+const INLINE_INPUT_MAX_WIDTH = 20;
+const InlineInputWidthSchema = z.number().int().positive().max(INLINE_INPUT_MAX_WIDTH, { message: `width cannot exceed ${INLINE_INPUT_MAX_WIDTH}` }).optional();
 const FreeTextInlineSchema = z.object({
   type: z.literal(AST_TYPES.FREE_TEXT),
   value: z.string()
@@ -1980,6 +2088,7 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     name: z.string(),
     inputType: z.literal(INPUT_TYPES.STRING),
     length: z.number().int().positive(),
+    width: InlineInputWidthSchema,
     placeholder: z.string().max(32).optional(),
     disabled: z.boolean().optional(),
     answer: z.union([z.string(), z.number()]).optional()
@@ -1989,6 +2098,7 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     name: z.string(),
     inputType: z.literal(INPUT_TYPES.NUMERIC),
     digits: z.number().int().positive(),
+    width: InlineInputWidthSchema,
     placeholder: z.string().max(32).optional(),
     disabled: z.boolean().optional(),
     answer: z.union([z.string(), z.number()]).optional()
@@ -2146,7 +2256,7 @@ function createBoldText(value, highlight) {
     highlight
   });
 }
-function createStringInput(name, length, answer, placeholder, disabled) {
+function createStringInput(name, length, answer, placeholder, disabled, width) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2154,6 +2264,7 @@ function createStringInput(name, length, answer, placeholder, disabled) {
       name,
       inputType: INPUT_TYPES.STRING,
       length,
+      width,
       placeholder,
       disabled,
       // A disabled input is never graded, so its answer is dropped.
@@ -2162,7 +2273,7 @@ function createStringInput(name, length, answer, placeholder, disabled) {
     "STRING_INPUT"
   );
 }
-function createNumericInput(name, digits, answer, placeholder, disabled) {
+function createNumericInput(name, digits, answer, placeholder, disabled, width) {
   return parseOrThrow(
     InlineInputWidgetSchema,
     {
@@ -2170,6 +2281,7 @@ function createNumericInput(name, digits, answer, placeholder, disabled) {
       name,
       inputType: INPUT_TYPES.NUMERIC,
       digits,
+      width,
       placeholder,
       disabled,
       // A disabled input is never graded, so its answer is dropped.
@@ -2386,7 +2498,7 @@ const NumberLineBlockSchema = z.object({
     errorMap: () => ({
       message: `NUMBER_LINE: style must be one of ${NUMBER_LINE_STYLES.join(", ")}`
     })
-  }).optional(),
+  }).default(DEFAULT_NUMBER_LINE_STYLE),
   labelVisibility: z.enum(NUMBER_LINE_LABELS, {
     errorMap: () => ({
       message: `NUMBER_LINE: labelVisibility must be one of ${NUMBER_LINE_LABELS.join(", ")}`
@@ -3065,7 +3177,7 @@ function isSetSquareTool(value) {
 function isToolNode(value) {
   return ToolNodeSchema.safeParse(value).success;
 }
-const CHART_TYPES = ["bar", "pictograph"];
+const CHART_TYPES = ["bar", "pictograph", "grouped-bar"];
 const CHART_AXIS_DEFAULTS = { min: 0, max: 100, step: 10, visible: true };
 const CHART_MAX_AXIS_TICKS = 200;
 const CHART_MAX_PICTO_SLOTS = 60;
@@ -3145,6 +3257,63 @@ function createChartBar(id, opts) {
 function isChartBar(value) {
   return ChartBarSchema.safeParse(value).success;
 }
+const ChartSeriesSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_SERIES),
+  id: z.string().min(1),
+  color: z.string().min(1),
+  inlines: z.array(DisplayInlineNodeSchema).default([])
+});
+function createChartSeries(id, opts) {
+  return ChartSeriesSchema.parse({
+    type: AST_TYPES.CHART_SERIES,
+    id,
+    color: opts.color,
+    inlines: opts.inlines ?? []
+  });
+}
+function isChartSeries(value) {
+  return ChartSeriesSchema.safeParse(value).success;
+}
+const ChartSeriesBarSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_SERIES_BAR),
+  id: z.string().min(1),
+  seriesId: z.string().min(1),
+  value: z.number().default(0),
+  answer: z.number().optional()
+});
+function createChartSeriesBar(id, opts) {
+  return ChartSeriesBarSchema.parse({
+    type: AST_TYPES.CHART_SERIES_BAR,
+    id,
+    seriesId: opts.seriesId,
+    value: opts.value ?? 0,
+    answer: opts.answer
+  });
+}
+function isChartSeriesBar(value) {
+  return ChartSeriesBarSchema.safeParse(value).success;
+}
+const ChartGroupSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_GROUP),
+  id: z.string().min(1),
+  labelInlines: z.array(InlineNodeSchema).default([]),
+  bars: z.array(ChartSeriesBarSchema).default([])
+});
+function createChartGroup(id, opts = {}) {
+  return ChartGroupSchema.parse({
+    type: AST_TYPES.CHART_GROUP,
+    id,
+    labelInlines: opts.labelInlines ?? [],
+    bars: opts.bars ?? []
+  });
+}
+function isChartGroup(value) {
+  return ChartGroupSchema.safeParse(value).success;
+}
+function alignGroupBarsToSeries(group, series) {
+  const bySeriesId = new Map(group.bars.map((bar) => [bar.seriesId, bar]));
+  return series.map((s) => bySeriesId.get(s.id));
+}
 const ChartBlockSchema = z.object({
   type: z.literal(AST_TYPES.CHART_BLOCK),
   name: z.string().optional(),
@@ -3156,7 +3325,10 @@ const ChartBlockSchema = z.object({
   xAxis: ChartAxisSchema.optional(),
   yAxis: ChartAxisSchema.optional(),
   bars: z.array(ChartBarSchema).default([]),
-  pictos: z.array(ChartPictoSchema).default([])
+  pictos: z.array(ChartPictoSchema).default([]),
+  legend: z.boolean().default(false),
+  series: z.array(ChartSeriesSchema).default([]),
+  groups: z.array(ChartGroupSchema).default([])
 }).superRefine((block, ctx) => {
   validateChartBlock(block, ctx);
 });
@@ -3181,10 +3353,10 @@ function validateChartBlock(block, ctx) {
   const { valueAxis } = resolveChartAxes(block);
   validateValueAxisRange(valueAxis, ctx);
   if (block.chartType === "bar") {
-    if (block.pictos.length > 0) {
+    if (block.pictos.length > 0 || block.series.length > 0 || block.groups.length > 0) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: 'CHART[type="bar"]: body must contain BAR items only, not PICTO',
+        message: 'CHART[type="bar"]: body must contain BAR items only, not PICTO, SERIES, or GROUP',
         path: ["pictos"]
       });
       return;
@@ -3197,16 +3369,16 @@ function validateChartBlock(block, ctx) {
       });
       return;
     }
-    validateUniqueIds(block.bars, ctx);
+    validateUniqueIds(block.bars, ctx, (i) => ["bars", i]);
     validateChartSnap(block.snap, valueAxis.step, ctx);
-    validateBarAnswers(block.bars, valueAxis, block.snap, ctx);
+    validateBarAnswers(block.bars, valueAxis, block.snap, ctx, (i) => ["bars", i]);
     return;
   }
   if (block.chartType === "pictograph") {
-    if (block.bars.length > 0) {
+    if (block.bars.length > 0 || block.series.length > 0 || block.groups.length > 0) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
-        message: 'CHART[type="pictograph"]: body must contain PICTO items only, not BAR',
+        message: 'CHART[type="pictograph"]: body must contain PICTO items only, not BAR, SERIES, or GROUP',
         path: ["bars"]
       });
       return;
@@ -3227,7 +3399,7 @@ function validateChartBlock(block, ctx) {
       });
       return;
     }
-    validateUniqueIds(block.pictos, ctx);
+    validateUniqueIds(block.pictos, ctx, (i) => ["pictos", i]);
     if (!axisHasNumericParams(valueAxis.axis)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
@@ -3248,6 +3420,63 @@ function validateChartBlock(block, ctx) {
     validatePictoAnswers(block.pictos, valueAxis, ctx);
     return;
   }
+  if (block.chartType === "grouped-bar") {
+    if (block.bars.length > 0 || block.pictos.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: body must contain SERIES and GROUP items only, not BAR or PICTO',
+        path: ["bars"]
+      });
+      return;
+    }
+    if (block.series.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: at least one SERIES is required',
+        path: ["series"]
+      });
+      return;
+    }
+    if (block.groups.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: at least one GROUP is required',
+        path: ["groups"]
+      });
+      return;
+    }
+    validateUniqueIds(block.series, ctx, (i) => ["series", i]);
+    validateUniqueIds(block.groups, ctx, (i) => ["groups", i]);
+    const allBars = block.groups.flatMap((g, gi) => g.bars.map((bar, bi) => ({ ...bar, groupIndex: gi, barIndex: bi })));
+    const pathForFlatBar = (i) => ["groups", allBars[i].groupIndex, "bars", allBars[i].barIndex];
+    validateUniqueIds(allBars, ctx, pathForFlatBar);
+    const seriesIds = new Set(block.series.map((s) => s.id));
+    block.groups.forEach((group, gi) => {
+      const seenInGroup = /* @__PURE__ */ new Set();
+      group.bars.forEach((bar, bi) => {
+        if (!seriesIds.has(bar.seriesId)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `CHART: GROUP "${group.id}" SERIES_BAR "${bar.id}" references unknown series "${bar.seriesId}" — no SERIES with that id is declared`,
+            path: ["groups", gi, "bars", bi, "seriesId"]
+          });
+          return;
+        }
+        if (seenInGroup.has(bar.seriesId)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `CHART: GROUP "${group.id}" references series "${bar.seriesId}" twice — each SERIES can appear at most once per GROUP`,
+            path: ["groups", gi, "bars", bi, "seriesId"]
+          });
+          return;
+        }
+        seenInGroup.add(bar.seriesId);
+      });
+    });
+    validateChartSnap(block.snap, valueAxis.step, ctx);
+    validateBarAnswers(allBars, valueAxis, block.snap, ctx, pathForFlatBar);
+    return;
+  }
   ctx.addIssue({
     code: z.ZodIssueCode.custom,
     message: `CHART: unsupported chartType "${block.chartType}" — add a validation branch to validateChartBlock`,
@@ -3268,14 +3497,14 @@ function resolveNumericAxis(axis) {
 function hasAmbiguousValueAxes(block) {
   return axisHasNumericParams(block.xAxis) && axisHasNumericParams(block.yAxis);
 }
-function validateUniqueIds(items, ctx) {
+function validateUniqueIds(items, ctx, pathFor) {
   const seen = /* @__PURE__ */ new Set();
   items.forEach((item, index) => {
     if (seen.has(item.id)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `CHART: duplicate id "${item.id}" — ids must be unique within the chart`,
-        path: [index, "id"]
+        path: [...pathFor(index), "id"]
       });
       return;
     }
@@ -3317,14 +3546,14 @@ function validateChartSnap(snap, step, ctx) {
     });
   }
 }
-function validateBarAnswers(bars, valueAxis, snap, ctx) {
+function validateBarAnswers(bars, valueAxis, snap, ctx, pathFor) {
   const gridStep = snap ?? valueAxis.step;
   bars.forEach((bar, index) => {
     if (bar.value < valueAxis.min || bar.value > valueAxis.max) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `CHART: BAR "${bar.id}" value (${bar.value}) is outside axis range [${valueAxis.min}, ${valueAxis.max}] — the bar will not render correctly`,
-        path: ["bars", index, "value"]
+        path: [...pathFor(index), "value"]
       });
     }
     if (bar.answer === void 0) return;
@@ -3332,7 +3561,7 @@ function validateBarAnswers(bars, valueAxis, snap, ctx) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `CHART: BAR "${bar.id}" answer (${bar.answer}) is outside axis range [${valueAxis.min}, ${valueAxis.max}] — the student can never reach this value`,
-        path: ["bars", index, "answer"]
+        path: [...pathFor(index), "answer"]
       });
       return;
     }
@@ -3341,7 +3570,7 @@ function validateBarAnswers(bars, valueAxis, snap, ctx) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: `CHART: BAR "${bar.id}" answer (${bar.answer}) is not on the drag grid (min ${valueAxis.min} + multiples of ${gridStep}) — the student can never land on it. Align the answer to the step/snap grid.`,
-        path: ["bars", index, "answer"]
+        path: [...pathFor(index), "answer"]
       });
     }
   });
@@ -3403,7 +3632,10 @@ function createChartBlock(chartType, opts = {}) {
     xAxis: opts.xAxis,
     yAxis: opts.yAxis,
     bars: opts.bars ?? [],
-    pictos: opts.pictos ?? []
+    pictos: opts.pictos ?? [],
+    series: opts.series ?? [],
+    groups: opts.groups ?? [],
+    legend: opts.legend ?? false
   });
 }
 function isChartBlock(value) {
@@ -3490,7 +3722,9 @@ const ExerciseDocumentSchema = z.object({
   };
   const visitInlines = (inlines, basePath) => {
     inlines.forEach((inline, i) => {
-      if (inline.type === AST_TYPES.INLINE_INPUT || inline.type === AST_TYPES.FRACTION || inline.type === AST_TYPES.IMAGE) {
+      if (inline.type === AST_TYPES.INLINE_INPUT || inline.type === AST_TYPES.FRACTION || inline.type === AST_TYPES.IMAGE || inline.type === AST_TYPES.VISUAL_FRACTION) {
+        record(inline.name, [...basePath, i, "name"]);
+      } else if (inline.type === AST_TYPES.CLOCK && inline.mode === "interactive") {
         record(inline.name, [...basePath, i, "name"]);
       }
     });
@@ -3522,6 +3756,28 @@ const ExerciseDocumentSchema = z.object({
       pm.groups.flat().forEach((item, ii) => {
         visitInlines(item.inlines, ["lines", bi, "items", ii, "inlines"]);
       });
+    } else if (block.type === AST_TYPES.CHART_BLOCK) {
+      const chart = block;
+      const base = ["lines", bi];
+      chart.bars.forEach((bar, i) => {
+        if (bar.answer !== void 0) record(bar.id, [...base, "bars", i, "id"]);
+        visitInlines(bar.inlines, [...base, "bars", i, "inlines"]);
+      });
+      chart.pictos.forEach((picto, i) => {
+        if (picto.answer !== void 0) record(picto.id, [...base, "pictos", i, "id"]);
+        visitInlines(picto.inlines, [...base, "pictos", i, "inlines"]);
+      });
+      chart.groups.forEach((group, gi) => {
+        group.bars.forEach((bar, i) => {
+          if (bar.answer !== void 0) record(bar.id, [...base, "groups", gi, "bars", i, "id"]);
+        });
+        visitInlines(group.labelInlines, [...base, "groups", gi, "labelInlines"]);
+      });
+      chart.series.forEach((series, i) => {
+        visitInlines(series.inlines, [...base, "series", i, "inlines"]);
+      });
+      if (chart.xAxis) visitInlines(chart.xAxis.inlines, [...base, "xAxis", "inlines"]);
+      if (chart.yAxis) visitInlines(chart.yAxis.inlines, [...base, "yAxis", "inlines"]);
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       record(block.name, ["lines", bi, "name"]);
     } else if (block.type === AST_TYPES.GEOMETRY_BLOCK && block.name !== void 0) {
@@ -4075,12 +4331,19 @@ class NaturalDSLVisitor extends BaseCstVisitor {
         `${ctx.stringInput ? "STRING_INPUT" : "NUMERIC_INPUT"} "${name}": disabled must be true or false, got ${JSON.stringify(params.disabled)}`
       );
     }
+    const width = params.width;
+    const maxChars = ctx.stringInput ? params.length : params.digits;
+    if (width !== void 0 && width < maxChars) {
+      throw new Error(
+        `${ctx.stringInput ? "STRING_INPUT" : "NUMERIC_INPUT"} "${name}": width (${width}) cannot be smaller than ${ctx.stringInput ? "length" : "digits"} (${maxChars})`
+      );
+    }
     if (ctx.stringInput) {
       const length = params.length;
-      return createStringInput(name, length, answer, placeholder, disabled);
+      return createStringInput(name, length, answer, placeholder, disabled, width);
     }
     const digits = params.digits;
-    return createNumericInput(name, digits, answer, placeholder, disabled);
+    return createNumericInput(name, digits, answer, placeholder, disabled, width);
   }
   inlineDragOption(ctx) {
     const valueToken = ctx.StringLiteral[0];
@@ -4093,7 +4356,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
   chartBlock(ctx) {
     const params = this.visit(ctx.parameterList);
     const chartType = params.type;
-    if (!chartType) throw new Error('CHART: type is required ("bar" | "pictograph")');
+    if (!chartType) throw new Error(`CHART: type is required (${CHART_TYPES.map((t) => `"${t}"`).join(" | ")})`);
     if (!CHART_TYPES.includes(chartType)) {
       throw new Error(`CHART: type must be one of ${CHART_TYPES.join(", ")} (got "${chartType}")`);
     }
@@ -4112,7 +4375,26 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const yAxis = ctx.chartYAxis ? this.visit(ctx.chartYAxis) : void 0;
     const bars = ctx.chartBarItem ? ctx.chartBarItem.map((b) => this.visit(b)) : [];
     const pictos = ctx.chartPictoItem ? ctx.chartPictoItem.map((p) => this.visit(p)) : [];
-    return createChartBlock(chartType, { bars, pictos, name, title, grid, scale, snap, xAxis, yAxis });
+    const series = ctx.chartSeriesItem ? ctx.chartSeriesItem.map((s) => this.visit(s)) : [];
+    const groups = ctx.chartGroupItem ? ctx.chartGroupItem.map((g) => this.visit(g)) : [];
+    if (params.legend !== void 0 && chartType !== "grouped-bar") {
+      throw new Error(`CHART: "legend" is only supported for type="grouped-bar" (got "${chartType}")`);
+    }
+    const legend = params.legend === true || params.legend === "true";
+    return createChartBlock(chartType, {
+      bars,
+      pictos,
+      series,
+      groups,
+      legend,
+      name,
+      title,
+      grid,
+      scale,
+      snap,
+      xAxis,
+      yAxis
+    });
   }
   /** X_AXIS and Y_AXIS carry identical params — only the produced AST type differs.
    *  Chevrotain needs two separate grammar rules, but one visitor body serves both. */
@@ -4151,6 +4433,52 @@ class NaturalDSLVisitor extends BaseCstVisitor {
       inlines
     });
   }
+  chartSeriesItem(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((e) => this.visit(e)) : [];
+    if (inlines.some((n) => !DisplayInlineNodeSchema.safeParse(n).success)) {
+      throw new Error(
+        `CHART: SERIES "${params.id}" label must be display-only — inputs, drag options, clocks and interactive fractions are not allowed in a legend label`
+      );
+    }
+    if (!params.color) {
+      throw new Error(`CHART: SERIES "${params.id}" requires "color"`);
+    }
+    return createChartSeries(params.id, {
+      color: params.color,
+      inlines
+    });
+  }
+  chartGroupLabel(ctx) {
+    return ctx.inlineElement ? ctx.inlineElement.map((e) => this.visit(e)) : [];
+  }
+  chartGroupItem(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (ctx.chartGroupLabel && ctx.chartGroupLabel.length > 1) {
+      throw new Error(`CHART: GROUP "${params.id}" has more than one LABEL — only one is allowed`);
+    }
+    const labelInlines = ctx.chartGroupLabel ? this.visit(ctx.chartGroupLabel) : [];
+    const bars = ctx.chartSeriesBarItem ? ctx.chartSeriesBarItem.map((b) => this.visit(b)) : [];
+    return createChartGroup(params.id, { labelInlines, bars });
+  }
+  // `params.series` is the raw DSL attribute name (SERIES_BAR[series="..."])
+  // — unrelated to the AST field's own `seriesId` name.
+  chartSeriesBarItem(ctx) {
+    const params = this.visit(ctx.parameterList);
+    if (!params.series) {
+      throw new Error(`CHART: SERIES_BAR "${params.id}" requires "series"`);
+    }
+    if (params.color !== void 0) {
+      throw new Error(
+        `CHART: SERIES_BAR "${params.id}" cannot set "color" — it comes from its SERIES`
+      );
+    }
+    return createChartSeriesBar(params.id, {
+      seriesId: params.series,
+      value: params.value !== void 0 ? Number(params.value) : void 0,
+      answer: params.answer !== void 0 ? Number(params.answer) : void 0
+    });
+  }
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -4605,23 +4933,23 @@ const ChartAxisJSONSchema = z.object({
     });
   }
 });
-const ChartBarJSONSchema = z.discriminatedUnion("interactive", [
-  z.object({
-    id: z.string(),
-    type: z.literal(JSON_TYPES.CHART_BAR),
-    interactive: z.literal(false),
-    value: z.number(),
-    color: z.string().optional(),
-    label: z.array(LayoutItemSchema).optional()
-  }),
-  z.object({
-    id: z.string(),
-    type: z.literal(JSON_TYPES.CHART_BAR),
+const ChartBarJSONBaseSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.CHART_BAR),
+  value: z.number(),
+  answer: z.number().optional(),
+  color: z.string().optional(),
+  label: z.array(LayoutItemSchema).optional()
+});
+const ChartBarJSONSchema = z.union([
+  ChartBarJSONBaseSchema.extend({
     interactive: z.literal(true),
-    value: z.number(),
-    widgetId: z.string(),
-    color: z.string().optional(),
-    label: z.array(LayoutItemSchema).optional()
+    /** The widgets/answers key, equal to `id` when compiled. */
+    widgetId: z.string()
+  }),
+  ChartBarJSONBaseSchema.extend({
+    interactive: z.literal(false).optional(),
+    widgetId: z.undefined().optional()
   })
 ]);
 const ChartPictoJSONSchema = z.object({
@@ -4635,21 +4963,55 @@ const ChartPictoJSONSchema = z.object({
   ),
   label: z.array(LayoutItemSchema).optional()
 });
-const ChartItemSchema = z.object({
+const ChartSeriesJSONSchema = z.object({
+  id: z.string(),
+  color: z.string(),
+  label: z.array(LayoutItemSchema).optional()
+});
+const ChartSeriesBarJSONSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.CHART_SERIES_BAR),
+  value: z.number(),
+  answer: z.number().optional(),
+  color: z.string(),
+  seriesId: z.string()
+});
+const ChartGroupJSONSchema = z.object({
+  id: z.string(),
+  label: z.array(LayoutItemSchema).optional(),
+  bars: z.array(ChartSeriesBarJSONSchema)
+});
+const ChartItemBaseSchema = z.object({
   id: z.string(),
   type: z.literal(JSON_TYPES.CHART),
   name: z.string().optional(),
   title: z.string().optional(),
-  chartType: z.enum(CHART_TYPES),
   orientation: z.enum(["vertical", "horizontal"]).default("vertical"),
   grid: z.boolean().default(false),
   scale: z.number().positive().default(1),
   snap: z.number().positive().optional(),
   xAxis: ChartAxisJSONSchema.optional(),
-  yAxis: ChartAxisJSONSchema.optional(),
-  bars: z.array(ChartBarJSONSchema).default([]),
-  pictos: z.array(ChartPictoJSONSchema).default([])
-}).superRefine((item, ctx) => {
+  yAxis: ChartAxisJSONSchema.optional()
+});
+const ChartItemBarSchema = ChartItemBaseSchema.extend({
+  chartType: z.literal("bar"),
+  bars: z.array(ChartBarJSONSchema)
+});
+const ChartItemPictographSchema = ChartItemBaseSchema.extend({
+  chartType: z.literal("pictograph"),
+  pictos: z.array(ChartPictoJSONSchema)
+});
+const ChartItemGroupedBarSchema = ChartItemBaseSchema.extend({
+  chartType: z.literal("grouped-bar"),
+  series: z.array(ChartSeriesJSONSchema),
+  groups: z.array(ChartGroupJSONSchema),
+  legend: z.boolean().default(false)
+});
+const ChartItemSchema = z.discriminatedUnion("chartType", [
+  ChartItemBarSchema,
+  ChartItemPictographSchema,
+  ChartItemGroupedBarSchema
+]).superRefine((item, ctx) => {
   if (item.chartType === "bar" && item.bars.length === 0) {
     ctx.addIssue({
       code: z.ZodIssueCode.custom,
@@ -4657,18 +5019,63 @@ const ChartItemSchema = z.object({
       path: ["bars"]
     });
   }
-  if (item.chartType === "pictograph" && item.pictos.length === 0) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'CHART[type="pictograph"]: at least one PICTO is required',
-      path: ["pictos"]
-    });
+  if (item.chartType === "pictograph") {
+    if (item.pictos.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: at least one PICTO is required',
+        path: ["pictos"]
+      });
+    }
+    if (item.snap !== void 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: snap is not supported for pictograph charts',
+        path: ["snap"]
+      });
+    }
   }
-  if (item.chartType === "pictograph" && item.snap !== void 0) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: 'CHART[type="pictograph"]: snap is not supported for pictograph charts',
-      path: ["snap"]
+  if (item.chartType === "grouped-bar") {
+    if (item.series.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: at least one SERIES is required',
+        path: ["series"]
+      });
+    }
+    if (item.groups.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: at least one GROUP is required',
+        path: ["groups"]
+      });
+    }
+    validateUniqueIds(item.series, ctx, (i) => ["series", i]);
+    validateUniqueIds(item.groups, ctx, (i) => ["groups", i]);
+    const allBars = item.groups.flatMap((g, gi) => g.bars.map((bar, bi) => ({ id: bar.id, gi, bi })));
+    validateUniqueIds(allBars, ctx, (i) => ["groups", allBars[i].gi, "bars", allBars[i].bi]);
+    const seriesIds = new Set(item.series.map((s) => s.id));
+    item.groups.forEach((group, gi) => {
+      const seenInGroup = /* @__PURE__ */ new Set();
+      group.bars.forEach((bar, bi) => {
+        if (!seriesIds.has(bar.seriesId)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `CHART[type="grouped-bar"]: GROUP "${group.id}" bar "${bar.id}" references unknown seriesId "${bar.seriesId}" — no SERIES with that id is declared`,
+            path: ["groups", gi, "bars", bi, "seriesId"]
+          });
+          return;
+        }
+        if (seenInGroup.has(bar.seriesId)) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `CHART[type="grouped-bar"]: GROUP "${group.id}" has two bars for seriesId "${bar.seriesId}" — each series can appear at most once per group`,
+            path: ["groups", gi, "bars", bi, "seriesId"]
+          });
+          return;
+        }
+        seenInGroup.add(bar.seriesId);
+      });
     });
   }
 });
@@ -4676,6 +5083,8 @@ const StringInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.STRING),
   length: z.number().int().positive(),
+  /** Box width in characters; defaults to `length`. */
+  width: InlineInputWidthSchema,
   placeholder: z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
   disabled: z.boolean().optional()
@@ -4684,6 +5093,8 @@ const NumericInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.NUMERIC),
   digits: z.number().int().positive(),
+  /** Box width in characters; defaults to `digits`. */
+  width: InlineInputWidthSchema,
   placeholder: z.string().max(32).optional(),
   /** Gray, non-interactive, never graded (any answer for it is ignored). */
   disabled: z.boolean().optional()
@@ -5674,7 +6085,7 @@ lodash.exports;
       var reIsNative = RegExp2(
         "^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
       );
-      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined$1, symIterator = Symbol ? Symbol.iterator : undefined$1, symToStringTag = Symbol ? Symbol.toStringTag : undefined$1;
+      var Buffer = moduleExports ? context.Buffer : undefined$1, Symbol2 = context.Symbol, Uint8Array = context.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined$1, getPrototype = overArg(Object2.getPrototypeOf, Object2), objectCreate = Object2.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, spreadableSymbol = Symbol2 ? Symbol2.isConcatSpreadable : undefined$1, symIterator = Symbol2 ? Symbol2.iterator : undefined$1, symToStringTag = Symbol2 ? Symbol2.toStringTag : undefined$1;
       var defineProperty = function() {
         try {
           var func = getNative(Object2, "defineProperty");
@@ -5689,7 +6100,7 @@ lodash.exports;
       var metaMap = WeakMap && new WeakMap();
       var realNames = {};
       var dataViewCtorString = toSource(DataView), mapCtorString = toSource(Map2), promiseCtorString = toSource(Promise2), setCtorString = toSource(Set2), weakMapCtorString = toSource(WeakMap);
-      var symbolProto = Symbol ? Symbol.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
+      var symbolProto = Symbol2 ? Symbol2.prototype : undefined$1, symbolValueOf = symbolProto ? symbolProto.valueOf : undefined$1, symbolToString = symbolProto ? symbolProto.toString : undefined$1;
       function lodash2(value) {
         if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
           if (value instanceof LodashWrapper) {
@@ -10588,6 +10999,7 @@ function toJSON(ast) {
           type: JSON_TYPES.INLINE_INPUT,
           inputType: INPUT_TYPES.STRING,
           length: inline.length,
+          ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
           ...inline.disabled && { disabled: true }
         };
@@ -10596,6 +11008,7 @@ function toJSON(ast) {
           type: JSON_TYPES.INLINE_INPUT,
           inputType: INPUT_TYPES.NUMERIC,
           digits: inline.digits,
+          ...inline.width !== void 0 && { width: inline.width },
           placeholder: inline.placeholder,
           ...inline.disabled && { disabled: true }
         };
@@ -10691,7 +11104,7 @@ function toJSON(ast) {
           options: lodashExports.shuffle(tool.options)
         };
       } else if (tool.type === AST_TYPES.NUMERIC_KEYPAD) {
-        widgets["_numeric_keypad"] = {
+        widgets[NUMERIC_KEYPAD_WIDGET_ID] = {
           type: JSON_TYPES.NUMERIC_KEYPAD,
           includeOperators: tool.includeOperators,
           includeDecimal: tool.includeDecimal,
@@ -10767,6 +11180,8 @@ function collectAllInlines(blocks) {
       for (const picto of chart.pictos) result.push(...picto.inlines);
       if (chart.xAxis) result.push(...chart.xAxis.inlines);
       if (chart.yAxis) result.push(...chart.yAxis.inlines);
+      for (const series of chart.series) result.push(...series.inlines);
+      for (const group of chart.groups) result.push(...group.labelInlines);
     }
   }
   return result;
@@ -10801,27 +11216,19 @@ function transformChart(block, idGenerator, inlineDragIds) {
   const chartAnswers = {};
   const bars = block.bars.map((bar) => {
     const label = toLabel(bar.inlines);
-    if (bar.answer !== void 0) {
-      chartWidgets[bar.id] = { type: JSON_TYPES.CHART_BAR, value: bar.value };
-      chartAnswers[bar.id] = bar.answer;
-      return {
-        id: bar.id,
-        type: JSON_TYPES.CHART_BAR,
-        interactive: true,
-        value: bar.value,
-        widgetId: bar.id,
-        ...bar.color !== void 0 && { color: bar.color },
-        ...label !== void 0 && { label }
-      };
-    }
-    return {
+    const common = {
       id: bar.id,
       type: JSON_TYPES.CHART_BAR,
-      interactive: false,
       value: bar.value,
       ...bar.color !== void 0 && { color: bar.color },
       ...label !== void 0 && { label }
     };
+    if (bar.answer !== void 0) {
+      chartWidgets[bar.id] = { type: JSON_TYPES.CHART_BAR, value: bar.value };
+      chartAnswers[bar.id] = bar.answer;
+      return { ...common, interactive: true, widgetId: bar.id, answer: bar.answer };
+    }
+    return { ...common, interactive: false };
   });
   const pictos = block.pictos.map((picto) => {
     const label = toLabel(picto.inlines);
@@ -10838,21 +11245,62 @@ function transformChart(block, idGenerator, inlineDragIds) {
       ...label !== void 0 && { label }
     };
   });
-  const item = {
+  const series = block.series.map((s) => {
+    const label = toLabel(s.inlines);
+    return {
+      id: s.id,
+      color: s.color,
+      ...label !== void 0 && { label }
+    };
+  });
+  const groups = block.groups.map((group) => {
+    const slots = alignGroupBarsToSeries(group, block.series);
+    const groupBars = slots.map((bar, i) => {
+      if (bar === void 0) return void 0;
+      const series2 = block.series[i];
+      if (bar.answer !== void 0) {
+        chartWidgets[bar.id] = { type: JSON_TYPES.CHART_BAR, value: bar.value };
+        chartAnswers[bar.id] = bar.answer;
+      }
+      return {
+        id: bar.id,
+        type: JSON_TYPES.CHART_SERIES_BAR,
+        value: bar.value,
+        ...bar.answer !== void 0 && { answer: bar.answer },
+        color: series2.color,
+        seriesId: series2.id
+      };
+    }).filter((bar) => bar !== void 0);
+    const label = toLabel(group.labelInlines);
+    return {
+      id: group.id,
+      ...label !== void 0 && { label },
+      bars: groupBars
+    };
+  });
+  const base = {
     id: idGenerator.generate(JSON_TYPES.CHART),
     type: JSON_TYPES.CHART,
     ...block.name !== void 0 && { name: block.name },
     ...block.title !== void 0 && { title: block.title },
-    chartType: block.chartType,
     orientation,
     grid: block.grid,
     scale: block.scale,
     ...block.snap !== void 0 && { snap: block.snap },
     ...xAxis !== void 0 && { xAxis },
-    ...yAxis !== void 0 && { yAxis },
-    bars,
-    pictos
+    ...yAxis !== void 0 && { yAxis }
   };
+  let item;
+  if (block.chartType === "bar") {
+    item = { ...base, chartType: "bar", bars };
+  } else if (block.chartType === "pictograph") {
+    item = { ...base, chartType: "pictograph", pictos };
+  } else if (block.chartType === "grouped-bar") {
+    item = { ...base, chartType: "grouped-bar", series, groups, legend: block.legend };
+  } else {
+    const unhandled = block.chartType;
+    throw new Error(`CHART: unsupported chart type "${String(unhandled)}"`);
+  }
   return { item, chartWidgets, chartAnswers };
 }
 function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
@@ -10919,7 +11367,7 @@ function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
     max: numberLine.max,
     step: numberLine.step,
     ...numberLine.minorTicks !== void 0 && { minorTicks: numberLine.minorTicks },
-    ...numberLine.style !== void 0 && { style: numberLine.style },
+    style: numberLine.style,
     ...numberLine.labelVisibility !== void 0 && { labelVisibility: numberLine.labelVisibility },
     ...counterItem !== void 0 && { counter: counterItem },
     ...highlights !== void 0 && { highlights },
@@ -15576,22 +16024,22 @@ function createDefaultDropAnimation(options) {
       easing,
       fill: "forwards"
     });
-    return new Promise((resolve) => {
+    return new Promise((resolve2) => {
       animation.onfinish = () => {
         cleanup == null ? void 0 : cleanup();
-        resolve();
+        resolve2();
       };
     });
   };
 }
-let key = 0;
+let key$1 = 0;
 function useKey(id) {
   return useMemo(() => {
     if (id == null) {
       return;
     }
-    key++;
-    return key;
+    key$1++;
+    return key$1;
   }, [id]);
 }
 const DragOverlay = /* @__PURE__ */ React.memo((_ref) => {
@@ -15673,6 +16121,7 @@ const DEFAULT_SOUNDS = {
   "drag-start": dragStart,
   "drag-drop": dragDrop,
   "drag-cancel": dragDrop,
+  "drag-hint": buttonClick,
   "radio-select": buttonClick,
   "pair-select": buttonClick,
   "pair-link": buttonClick,
@@ -15776,14 +16225,24 @@ function useExerciseDnd() {
   }
   return ctx;
 }
+const NO_EXERCISE = Symbol("no-exercise");
 const ExerciseDndProvider = ({
   children,
   droppedSources,
-  onDragEnd
+  onDragEnd,
+  exerciseKey
 }) => {
   const [activeItem, setActiveItem] = useState(null);
+  const [draggedExerciseKey, setDraggedExerciseKey] = useState(NO_EXERCISE);
+  const hasDraggedOption = draggedExerciseKey === exerciseKey;
   const [dropHandlers] = useState(() => /* @__PURE__ */ new Map());
   const playSound = useSound();
+  const hintSoundExerciseRef = useRef(NO_EXERCISE);
+  const playHintSound = useCallback(() => {
+    if (hintSoundExerciseRef.current === exerciseKey) return;
+    hintSoundExerciseRef.current = exerciseKey;
+    playSound("drag-hint");
+  }, [playSound, exerciseKey]);
   const usedOptionIds = useMemo(() => {
     return new Set(droppedSources.values());
   }, [droppedSources]);
@@ -15807,6 +16266,7 @@ const ExerciseDndProvider = ({
     const raw = active.data.current;
     const item = raw?.type === "placed-chip" ? { type: "placed-chip", widgetId: raw.widgetId, label: raw.label, sourceOptionId: raw.sourceOptionId } : raw;
     setActiveItem(item);
+    if (item.type === "drag-option") setDraggedExerciseKey(exerciseKey);
     playSound("drag-start");
   };
   const handleDragEnd = (event) => {
@@ -15832,6 +16292,9 @@ const ExerciseDndProvider = ({
       value: {
         activeItem,
         isDragging: activeItem !== null,
+        exerciseKey,
+        hasDraggedOption,
+        playHintSound,
         usedOptionIds,
         droppedSources,
         registerDropHandler,
@@ -16612,9 +17075,40 @@ function isUndoDrop(event, dragId) {
 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 OVERLAY_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  minWidth: 0,
+  maxWidth: "none",
+  margin: 0,
+  boxSizing: "border-box"
+};
+const SlotSizer = ({
+  style,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "input",
+  {
+    ...props,
+    type: "text",
+    value: "",
+    readOnly: true,
+    tabIndex: -1,
+    "aria-hidden": "true",
+    style: { ...style, visibility: "hidden" }
+  }
+);
+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({
@@ -16636,13 +17130,41 @@ const PlacedInputChip = ({ widgetId, value, className = "", onRemove }) => {
         if (!locked && e.detail !== 0) onRemove();
       },
       title: locked ? void 0 : "Drag to move, or click to remove",
-      style: { touchAction: "none", cursor: locked ? "default" : "grab" },
+      style: {
+        ...OVERLAY_STYLE,
+        touchAction: "none",
+        cursor: locked ? "default" : "grab"
+      },
       ...listeners,
       ...attributes,
       children: value
     }
   );
 };
+function getMaxInputLength(exercise, inputKey) {
+  const widget = exercise.widgets[inputKey];
+  if (widget?.type !== JSON_TYPES.INLINE_INPUT) return void 0;
+  return widget.inputType === INPUT_TYPES.NUMERIC ? widget.digits : widget.length;
+}
+function getInputElementId(key2) {
+  return `${key2}-input`;
+}
+function getTextInputs(container) {
+  return Array.from(
+    container.querySelectorAll(
+      'input[type="text"], input[type="number"], textarea, select'
+    )
+  );
+}
+function canTakeInput(el) {
+  return !el.readOnly && !el.disabled;
+}
+function findNextInput(container, currentKey) {
+  const inputs = getTextInputs(container);
+  const currentIndex = inputs.findIndex((el) => el.id === getInputElementId(currentKey));
+  if (currentIndex === -1) return null;
+  return inputs.slice(currentIndex + 1).find(canTakeInput) ?? null;
+}
 const InlineInput = ({
   widgetId,
   value,
@@ -16651,6 +17173,7 @@ const InlineInput = ({
   inputType,
   length,
   digits,
+  width,
   placeholder,
   disabled = false,
   onChange,
@@ -16664,8 +17187,8 @@ const InlineInput = ({
   const handleDrop = useCallback((item) => {
     return applyDropToInput(widgetId, item, onChange);
   }, [onChange, widgetId]);
-  const expectedLength = inputType === "numeric" ? digits : length;
-  const dynamicWidth = `${(expectedLength || 5) * 0.8 + 1}em`;
+  const expectedLength = inputType === INPUT_TYPES.NUMERIC ? digits : length;
+  const dynamicWidth = `${(width ?? expectedLength ?? 5) * 0.8 + 1}em`;
   const statusClass = validationStatus ? ` widget--${validationStatus}` : "";
   const disabledClass = disabled ? " inline-input--disabled" : "";
   return /* @__PURE__ */ jsx(
@@ -16678,21 +17201,31 @@ const InlineInput = ({
       className: "inline-widget inline-input-droppable",
       children: isDropped && value !== "" ? (
         // Show as chip only when value came from drag-drop
-        /* @__PURE__ */ jsx(
-          PlacedInputChip,
-          {
-            widgetId,
-            value,
-            className: statusClass.trim(),
-            onRemove: () => handleChange("", false)
-          }
-        )
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SlotSizer,
+            {
+              className: `inline-input${disabledClass}`,
+              style: { width: dynamicWidth },
+              placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlacedInputChip,
+            {
+              widgetId,
+              value,
+              className: statusClass.trim(),
+              onRemove: () => handleChange("", false)
+            }
+          )
+        ] })
       ) : (
         // Regular input for typing
         /* @__PURE__ */ jsx(
           "input",
           {
-            id: widgetId + "-input",
+            id: getInputElementId(widgetId),
             type: "text",
             className: `inline-input${statusClass}${disabledClass}`,
             value,
@@ -16712,15 +17245,20 @@ const InlineInput = ({
     }
   );
 };
-const SingleDragOption = ({
+const SingleDragOption = (props) => {
+  const { exerciseKey } = useExerciseDnd();
+  return /* @__PURE__ */ jsx(DragOptionChip, { ...props }, exerciseKey ?? "");
+};
+const DragOptionChip = ({
   optionId,
   value,
   onOptionClick,
   className = ""
 }) => {
-  const { usedOptionIds } = useExerciseDnd();
+  const { usedOptionIds, hasDraggedOption, playHintSound } = useExerciseDnd();
   const locked = useExerciseLocked();
   const isUsed = usedOptionIds.has(optionId);
+  const { jiggling: hinting, onAnimationEnd: onHintEnd } = useJiggle(hasDraggedOption);
   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,
     {
@@ -16732,7 +17270,11 @@ const SingleDragOption = ({
       children: /* @__PURE__ */ jsx(
         "button",
         {
-          className: "drag-option",
+          className: hinting && !locked ? "drag-option drag-option--hint" : "drag-option",
+          onAnimationStart: () => {
+            if (hinting) playHintSound();
+          },
+          onAnimationEnd: onHintEnd,
           onClick: () => {
             if (!locked) onOptionClick?.(value);
           },
@@ -16861,23 +17403,23 @@ const NumericKeypad = ({
     playSound("keypad-press");
     onChange(value.slice(0, -1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, 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: "÷" })
+  return /* @__PURE__ */ jsxs("div", { className: `numeric-keypad ${includeOperators ? "numeric-keypad-with-operators" : ""}`, "data-tutorial": "keypad", children: [
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "1", onClick: () => handleDigit("1"), children: "1" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "2", onClick: () => handleDigit("2"), children: "2" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "3", onClick: () => handleDigit("3"), children: "3" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "+", onClick: () => handleDigit("+"), children: "+" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "4", onClick: () => handleDigit("4"), children: "4" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "5", onClick: () => handleDigit("5"), children: "5" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "6", onClick: () => handleDigit("6"), children: "6" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "-", onClick: () => handleDigit("-"), children: "-" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "7", onClick: () => handleDigit("7"), children: "7" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "8", onClick: () => handleDigit("8"), children: "8" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "9", onClick: () => handleDigit("9"), children: "9" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "×", onClick: () => handleDigit("×"), children: "×" }),
+    includeDecimal ? /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-decimal", "data-key": ",", onClick: () => handleDigit(","), children: "," }) : /* @__PURE__ */ jsx("div", {}),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-digit", "data-key": "0", onClick: () => handleDigit("0"), children: "0" }),
+    /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-backspace", "data-key": "backspace", onClick: handleBackspace, children: "⌫" }),
+    includeOperators && /* @__PURE__ */ jsx("button", { disabled: locked, className: "keypad-btn keypad-btn-operator", "data-key": "÷", onClick: () => handleDigit("÷"), children: "÷" })
   ] });
 };
 const FractionInput = ({
@@ -16917,18 +17459,28 @@ const FractionInput = ({
         onDrop: handleDrop(subKey),
         disabled: locked,
         className: "fraction-slot-droppable",
-        children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsx(
-          PlacedInputChip,
-          {
-            widgetId: subKey,
-            value: currentValue,
-            className: `fraction-chip${slotClass}`,
-            onRemove: () => onChange(subKey, "", false)
-          }
-        ) : /* @__PURE__ */ jsx(
+        children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SlotSizer,
+            {
+              className: "inline-input fraction-input",
+              size: placeholder ? placeholder.length : void 0,
+              placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PlacedInputChip,
+            {
+              widgetId: subKey,
+              value: currentValue,
+              className: `fraction-chip${slotClass}`,
+              onRemove: () => onChange(subKey, "", false)
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
           "input",
           {
-            id: `${subKey}-input`,
+            id: getInputElementId(subKey),
             type: "text",
             className: `inline-input fraction-input${slotClass}`,
             value: currentValue,
@@ -17517,12 +18069,17 @@ const GridSymmetry = ({
     }
   ) });
 };
+function interactiveBarKey(bar) {
+  if (bar.answer === void 0 && bar.interactive !== true) return void 0;
+  return bar.widgetId ?? bar.id;
+}
 function getChartClassName(item) {
   const isHorizontal = item.orientation === "horizontal";
   return [
     "chart",
     isHorizontal ? "chart--horizontal" : "",
     item.chartType === "pictograph" ? "chart--pictograph" : "",
+    item.chartType === "grouped-bar" ? "chart--grouped-bar" : "",
     item.xAxis?.visible === false ? "chart--no-xaxis" : "",
     item.yAxis?.visible === false ? "chart--no-yaxis" : ""
   ].filter(Boolean).join(" ");
@@ -17533,7 +18090,8 @@ function resolveItemValue(id, defaultValue2, values) {
   return isNaN(parsed) ? defaultValue2 : parsed;
 }
 function resolveValue(bar, values) {
-  return bar.interactive ? resolveItemValue(bar.widgetId, bar.value, values) : bar.value;
+  const widgetKey = interactiveBarKey(bar);
+  return widgetKey !== void 0 ? resolveItemValue(widgetKey, bar.value, values) : bar.value;
 }
 function clamp(v, min, max) {
   return Math.min(max, Math.max(min, v));
@@ -17592,6 +18150,8 @@ const CHART_METRICS = {
   gapWidth: 1,
   axisWidth: 2.35,
   barWidth: 3.35,
+  // Fixed narrow width so several series fit in one cluster; not derived from count.
+  groupedBarWidth: 1.8,
   fontSize: 0.9,
   labelFontSize: 0.98,
   handleSize: 1.15,
@@ -17644,6 +18204,41 @@ function computePictographChartStyle(scale, columnCount, totalSlots, orientation
     "--chart-height": slotSpan
   };
 }
+function computeGroupedChartStyle(scale, groupCount, seriesCount, orientation = "vertical", isInteractive = false) {
+  const visualScale = clamp(scale, CHART_METRICS.scaleMin, CHART_METRICS.scaleMax);
+  const barWidth = (isInteractive ? CHART_METRICS.barWidth : CHART_METRICS.groupedBarWidth) * visualScale;
+  const barGap = CHART_METRICS.gapWidth * visualScale * 0.5;
+  const groupGap = CHART_METRICS.gapWidth * visualScale * 2;
+  const seriesPerGroup = Math.max(1, seriesCount);
+  const groupWidth = seriesPerGroup * barWidth + Math.max(0, seriesPerGroup - 1) * barGap;
+  const trackLength = groupCount * groupWidth + Math.max(0, groupCount - 1) * groupGap + groupGap * 2;
+  const cssVars = {
+    "--chart-axis-width": `${CHART_METRICS.axisWidth * visualScale}rem`,
+    "--chart-bar-width": `${barWidth}rem`,
+    // A bar slot inside a group is just the bar; reuse the plain bar-chart var.
+    "--chart-bar-slot-width": `${barWidth}rem`,
+    "--chart-bar-gap": `${barGap}rem`,
+    "--chart-group-gap": `${groupGap}rem`,
+    "--chart-group-width": `${groupWidth}rem`,
+    "--chart-font-size": `${CHART_METRICS.fontSize * visualScale}rem`,
+    "--chart-label-font-size": `${CHART_METRICS.labelFontSize * visualScale}rem`,
+    "--chart-handle-size": `${CHART_METRICS.handleSize * visualScale}rem`
+  };
+  if (orientation === "horizontal") {
+    const valueWidth = CHART_METRICS.chartHeight * visualScale;
+    return {
+      ...cssVars,
+      "--chart-height": `${trackLength}rem`,
+      "--chart-h-value-width": `${valueWidth}rem`,
+      "--chart-content-width": `${valueWidth}rem`
+    };
+  }
+  return {
+    ...cssVars,
+    "--chart-height": `${CHART_METRICS.chartHeight * visualScale}rem`,
+    "--chart-content-width": `${trackLength}rem`
+  };
+}
 function computeHorizontalChartStyle(scale, barCount) {
   const { trackLength, visualScale, cssVars } = computeBaseChartVars(scale, barCount);
   const valueWidth = CHART_METRICS.chartHeight * visualScale;
@@ -17695,6 +18290,7 @@ const DraggableBar = ({
   const axisMax = axis.max ?? CHART_AXIS_DEFAULTS.max;
   const axisStep = axis.step ?? CHART_AXIS_DEFAULTS.step;
   const snapStep = snap ?? axisStep;
+  const widgetKey = bar.widgetId ?? bar.id;
   const fillFromPointer = useCallback(
     (clientY, clientX) => {
       const track = trackRef.current;
@@ -17712,10 +18308,10 @@ const DraggableBar = ({
       if (snapped !== lastSnap.current) {
         lastSnap.current = snapped;
         playSound("bar-step");
-        onChange(bar.widgetId, String(snapped));
+        onChange(widgetKey, String(snapped));
       }
     },
-    [axisMin, axisMax, snapStep, bar.widgetId, onChange, orientation, playSound]
+    [axisMin, axisMax, snapStep, widgetKey, onChange, orientation, playSound]
   );
   const onPointerDown = useCallback(
     (e) => {
@@ -17748,8 +18344,8 @@ const DraggableBar = ({
     if (!dragging.current) return;
     dragging.current = false;
     setIsDragging(false);
-    onChange(bar.widgetId, String(preDragValue.current));
-  }, [bar.widgetId, onChange]);
+    onChange(widgetKey, String(preDragValue.current));
+  }, [widgetKey, onChange]);
   const onKeyDown = useCallback(
     (e) => {
       if (exerciseLocked) return;
@@ -17758,22 +18354,22 @@ const DraggableBar = ({
       if (isInc) {
         e.preventDefault();
         playSound("bar-step");
-        onChange(bar.widgetId, String(nextStepValue(currentValue, axis, 1, snap)));
+        onChange(widgetKey, String(nextStepValue(currentValue, axis, 1, snap)));
       } else if (isDec) {
         e.preventDefault();
         playSound("bar-step");
-        onChange(bar.widgetId, String(nextStepValue(currentValue, axis, -1, snap)));
+        onChange(widgetKey, String(nextStepValue(currentValue, axis, -1, snap)));
       } else if (e.key === "Home") {
         e.preventDefault();
         playSound("bar-step");
-        onChange(bar.widgetId, String(axisMin));
+        onChange(widgetKey, String(axisMin));
       } else if (e.key === "End") {
         e.preventDefault();
         playSound("bar-step");
-        onChange(bar.widgetId, String(axisMax));
+        onChange(widgetKey, String(axisMax));
       }
     },
-    [axisMin, axisMax, bar.widgetId, currentValue, axis, snap, onChange, playSound, exerciseLocked]
+    [axisMin, axisMax, widgetKey, currentValue, axis, snap, onChange, playSound, exerciseLocked]
   );
   const fill = toFill(currentValue, axis);
   const isAtMin = currentValue <= axisMin;
@@ -17849,7 +18445,7 @@ const StaticBar = ({
     }
   ) });
 };
-const EMPTY_SET$2 = /* @__PURE__ */ new Set();
+const EMPTY_SET$4 = /* @__PURE__ */ new Set();
 const XAxisLabel = ({
   bar,
   widgets,
@@ -17864,14 +18460,14 @@ const XAxisLabel = ({
       item: subItem,
       widgets,
       values,
-      droppedInputs: EMPTY_SET$2,
+      droppedInputs: EMPTY_SET$4,
       validationDetails,
       onChange
     },
     subItem.id
   )) }) });
 };
-const EMPTY_SET$1 = /* @__PURE__ */ new Set();
+const EMPTY_SET$3 = /* @__PURE__ */ new Set();
 const BarChart = ({
   item,
   widgets,
@@ -17879,6 +18475,7 @@ const BarChart = ({
   validationDetails,
   onChange
 }) => {
+  if (item.chartType !== "bar") return null;
   const { bars, grid } = item;
   const isHorizontal = item.orientation === "horizontal";
   const valueAxis = isHorizontal ? item.xAxis : item.yAxis;
@@ -17892,7 +18489,7 @@ const BarChart = ({
         item: subItem,
         widgets,
         values,
-        droppedInputs: EMPTY_SET$1,
+        droppedInputs: EMPTY_SET$3,
         validationDetails,
         onChange
       },
@@ -17902,9 +18499,10 @@ const BarChart = ({
   const fillAxis = valueAxis ?? CHART_AXIS_DEFAULTS;
   const renderBar = (bar, orient = "vertical") => {
     const currentValue = resolveValue(bar, values);
-    const vStatus = bar.interactive ? validationDetails?.[bar.widgetId] : void 0;
+    const widgetKey = interactiveBarKey(bar);
+    const vStatus = widgetKey !== void 0 ? validationDetails?.[widgetKey] : void 0;
     const validationStatus = vStatus?.isCorrect === true ? "correct" : vStatus?.isCorrect === false ? "incorrect" : null;
-    return /* @__PURE__ */ jsx("div", { className: "chart-bar-wrapper", children: bar.interactive ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "chart-bar-wrapper", children: widgetKey !== void 0 ? /* @__PURE__ */ jsx(
       DraggableBar,
       {
         bar,
@@ -17937,7 +18535,7 @@ const BarChart = ({
           item: subItem,
           widgets,
           values,
-          droppedInputs: EMPTY_SET$1,
+          droppedInputs: EMPTY_SET$3,
           validationDetails,
           onChange
         },
@@ -18142,7 +18740,7 @@ const PictographGrid = ({
     ))
   ] });
 };
-const EMPTY_SET = /* @__PURE__ */ new Set();
+const EMPTY_SET$2 = /* @__PURE__ */ new Set();
 const PictographChart = ({
   item,
   widgets,
@@ -18150,7 +18748,8 @@ const PictographChart = ({
   validationDetails,
   onChange
 }) => {
-  const { pictos = [], grid } = item;
+  if (item.chartType !== "pictograph") return null;
+  const { pictos, grid } = item;
   const isHorizontal = item.orientation === "horizontal";
   const valueAxis = isHorizontal ? item.xAxis : item.yAxis;
   const categoryAxis = isHorizontal ? item.yAxis : item.xAxis;
@@ -18163,7 +18762,7 @@ const PictographChart = ({
         item: subItem,
         widgets,
         values,
-        droppedInputs: EMPTY_SET,
+        droppedInputs: EMPTY_SET$2,
         validationDetails,
         onChange
       },
@@ -18201,7 +18800,7 @@ const PictographChart = ({
           item: subItem,
           widgets,
           values,
-          droppedInputs: EMPTY_SET,
+          droppedInputs: EMPTY_SET$2,
           validationDetails,
           onChange
         },
@@ -18222,7 +18821,7 @@ const PictographChart = ({
       item: subItem,
       widgets,
       values,
-      droppedInputs: EMPTY_SET,
+      droppedInputs: EMPTY_SET$2,
       validationDetails,
       onChange
     },
@@ -18241,9 +18840,183 @@ const PictographChart = ({
     xAxisTitle
   ] }) }) });
 };
+const GroupSlot = ({
+  group,
+  series,
+  axis,
+  snap,
+  orientation = "vertical",
+  values,
+  validationDetails,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "chart-group", children: series.map((s) => {
+    const bar = group.bars.find((b) => b.seriesId === s.id);
+    if (!bar) {
+      return /* @__PURE__ */ jsx("div", { className: "chart-group-bar-gap", "aria-hidden": "true" }, s.id);
+    }
+    const currentValue = resolveValue(bar, values);
+    const vStatus = bar.answer !== void 0 ? validationDetails?.[bar.id] : void 0;
+    const validationStatus = vStatus?.isCorrect === true ? "correct" : vStatus?.isCorrect === false ? "incorrect" : null;
+    return /* @__PURE__ */ jsx("div", { className: "chart-bar-wrapper", children: bar.answer !== void 0 ? /* @__PURE__ */ jsx(
+      DraggableBar,
+      {
+        bar: { ...bar, answer: bar.answer },
+        currentValue,
+        axis,
+        snap,
+        validationStatus,
+        orientation,
+        onChange
+      }
+    ) : /* @__PURE__ */ jsx(
+      StaticBar,
+      {
+        bar,
+        currentValue,
+        axis,
+        validationStatus,
+        orientation
+      }
+    ) }, bar.id);
+  }) });
+};
+const EMPTY_SET$1 = /* @__PURE__ */ new Set();
+const ChartLegend = ({
+  series,
+  widgets,
+  values,
+  validationDetails,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "chart-legend", children: series.map((s) => /* @__PURE__ */ jsxs("div", { className: "chart-legend-item", children: [
+    /* @__PURE__ */ jsx("span", { className: "chart-legend-swatch", "aria-hidden": "true", style: { backgroundColor: s.color } }),
+    /* @__PURE__ */ jsx("span", { className: "chart-legend-label", children: s.label?.map((subItem) => /* @__PURE__ */ jsx(
+      LayoutRenderer,
+      {
+        item: subItem,
+        widgets,
+        values,
+        droppedInputs: EMPTY_SET$1,
+        validationDetails,
+        onChange
+      },
+      subItem.id
+    )) })
+  ] }, s.id)) });
+};
+const EMPTY_SET = /* @__PURE__ */ new Set();
+const GroupedBarChart = ({
+  item,
+  widgets,
+  values,
+  validationDetails,
+  onChange
+}) => {
+  if (item.chartType !== "grouped-bar") return null;
+  const { groups, series, grid } = item;
+  const isHorizontal = item.orientation === "horizontal";
+  const isInteractive = groups.some((g) => g.bars.some((bar) => bar.answer !== void 0));
+  const valueAxis = isHorizontal ? item.xAxis : item.yAxis;
+  const categoryAxis = isHorizontal ? item.yAxis : item.xAxis;
+  const chartClass = getChartClassName(item);
+  const fillAxis = valueAxis ?? CHART_AXIS_DEFAULTS;
+  const renderAxisTitle = (title) => {
+    if (!title?.length) return null;
+    return /* @__PURE__ */ jsx(Fragment, { children: title.map((subItem) => /* @__PURE__ */ jsx(
+      LayoutRenderer,
+      {
+        item: subItem,
+        widgets,
+        values,
+        droppedInputs: EMPTY_SET,
+        validationDetails,
+        onChange
+      },
+      subItem.id
+    )) });
+  };
+  const renderGroupSlots = (orient) => /* @__PURE__ */ jsx("div", { className: "chart-groups", children: groups.map((group) => /* @__PURE__ */ jsx(
+    GroupSlot,
+    {
+      group,
+      series,
+      axis: fillAxis,
+      snap: item.snap,
+      orientation: orient,
+      values,
+      validationDetails,
+      onChange
+    },
+    group.id
+  )) });
+  const legend = item.legend ? /* @__PURE__ */ jsx(
+    ChartLegend,
+    {
+      series,
+      widgets,
+      values,
+      validationDetails,
+      onChange
+    }
+  ) : null;
+  if (isHorizontal) {
+    const chartStyle2 = computeGroupedChartStyle(item.scale, groups.length, series.length, "horizontal", isInteractive);
+    return /* @__PURE__ */ jsx("div", { className: "chart-container", children: /* @__PURE__ */ jsx("div", { className: "chart-scroll", children: /* @__PURE__ */ jsxs("div", { className: chartClass, dir: "ltr", style: chartStyle2, children: [
+      item.title && /* @__PURE__ */ jsx("div", { className: "chart-title", children: item.title }),
+      categoryAxis?.visible && categoryAxis.title?.length ? /* @__PURE__ */ jsx("div", { className: "chart-axis-title chart-axis-title--y-h", children: renderAxisTitle(categoryAxis.title) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "chart-axis-y--categories", children: groups.map((group) => /* @__PURE__ */ jsx("div", { className: "chart-bar-y-label", children: group.label?.map((subItem) => /* @__PURE__ */ jsx(
+        LayoutRenderer,
+        {
+          item: subItem,
+          widgets,
+          values,
+          droppedInputs: EMPTY_SET,
+          validationDetails,
+          onChange
+        },
+        subItem.id
+      )) }, group.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "chart-plot", children: [
+        grid && /* @__PURE__ */ jsx(Grid, { axis: fillAxis, orientation: "horizontal" }),
+        renderGroupSlots("horizontal")
+      ] }),
+      valueAxis && valueAxis.visible && /* @__PURE__ */ jsx(XAxis, { axis: valueAxis, title: renderAxisTitle(valueAxis.title) }),
+      legend
+    ] }) }) });
+  }
+  const chartStyle = computeGroupedChartStyle(item.scale, groups.length, series.length, "vertical", isInteractive);
+  const hasAnyGroupLabel = groups.some((g) => g.label && g.label.length > 0);
+  const groupLabelRow = hasAnyGroupLabel ? /* @__PURE__ */ jsx("div", { className: "chart-axis-x", children: groups.map((group) => /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x", children: /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x-inner", children: group.label?.map((subItem) => /* @__PURE__ */ jsx(
+    LayoutRenderer,
+    {
+      item: subItem,
+      widgets,
+      values,
+      droppedInputs: EMPTY_SET,
+      validationDetails,
+      onChange
+    },
+    subItem.id
+  )) }) }, group.id)) }) : null;
+  const xAxisTitle = categoryAxis?.visible && categoryAxis.title?.length ? /* @__PURE__ */ jsx("div", { className: "chart-axis-title chart-axis-title--x-category", children: renderAxisTitle(categoryAxis.title) }) : null;
+  return /* @__PURE__ */ jsx("div", { className: "chart-container", children: /* @__PURE__ */ jsx("div", { className: "chart-scroll", children: /* @__PURE__ */ jsxs("div", { className: chartClass, dir: "ltr", style: chartStyle, children: [
+    item.title && /* @__PURE__ */ jsx("div", { className: "chart-title", children: item.title }),
+    valueAxis?.visible && valueAxis.title?.length ? /* @__PURE__ */ jsx("div", { className: "chart-axis-title chart-axis-title--y", children: renderAxisTitle(valueAxis.title) }) : null,
+    valueAxis && valueAxis.visible && /* @__PURE__ */ jsx(YAxis, { axis: valueAxis }),
+    /* @__PURE__ */ jsxs("div", { className: "chart-plot", children: [
+      grid && /* @__PURE__ */ jsx(Grid, { axis: fillAxis }),
+      renderGroupSlots("vertical")
+    ] }),
+    groupLabelRow,
+    xAxisTitle,
+    legend
+  ] }) }) });
+};
 const CHART_TYPE_COMPONENTS = {
   bar: BarChart,
-  pictograph: PictographChart
+  pictograph: PictographChart,
+  "grouped-bar": GroupedBarChart
   // line: LineChart,
   // pie:  PieChart,
 };
@@ -18285,11 +19058,12 @@ const RadioOptions = ({
 };
 const Btn = ({
   label,
+  dataKey = label,
   extraClass = "keypad-btn-digit",
   onClick
 }) => {
   const locked = useExerciseLocked();
-  return /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, disabled: locked, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+  return /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, "data-key": dataKey, disabled: locked, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
 };
 const DiamondKeypad = ({ value, onChange }) => {
   const playSound = useSound();
@@ -18301,7 +19075,7 @@ const DiamondKeypad = ({ value, onChange }) => {
     playSound("keypad-press");
     onChange(value.slice(0, -1));
   };
-  return /* @__PURE__ */ jsxs("div", { className: "diamond-keypad", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "diamond-keypad", "data-tutorial": "keypad", children: [
     /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
       /* @__PURE__ */ jsx(Btn, { label: "1", onClick: () => append("1") }),
       /* @__PURE__ */ jsx(Btn, { label: "2", onClick: () => append("2") }),
@@ -18320,7 +19094,7 @@ const DiamondKeypad = ({ value, onChange }) => {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
       /* @__PURE__ */ jsx(Btn, { label: ".", extraClass: "keypad-btn-decimal", onClick: () => append(".") }),
-      /* @__PURE__ */ jsx(Btn, { label: "⌫", extraClass: "keypad-btn-backspace", onClick: backspace })
+      /* @__PURE__ */ jsx(Btn, { label: "⌫", dataKey: "backspace", extraClass: "keypad-btn-backspace", onClick: backspace })
     ] })
   ] });
 };
@@ -18926,7 +19700,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await import("./GeometryWidget-BRV6LLcW.mjs")).GeometryWidget
+  default: (await import("./GeometryWidget-2TCLbTEv.mjs")).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -18954,8 +19728,9 @@ const WidgetRenderer = ({
         isDropped,
         validationStatus,
         inputType: widget.inputType,
-        length: widget.inputType === "string" ? widget.length : void 0,
-        digits: widget.inputType === "numeric" ? widget.digits : void 0,
+        length: widget.inputType === INPUT_TYPES.STRING ? widget.length : void 0,
+        digits: widget.inputType === INPUT_TYPES.NUMERIC ? widget.digits : void 0,
+        width: widget.width,
         placeholder: widget.placeholder,
         disabled: widget.disabled,
         onChange,
@@ -19326,6 +20101,13 @@ const EPSILON = 10 ** -INTERNAL_PRECISION;
 const cleanFloat = (n) => parseFloat(n.toFixed(INTERNAL_PRECISION));
 const roundTick = (n) => parseFloat(n.toFixed(DISPLAY_PRECISION));
 const almostEqual = (a, b) => Math.abs(a - b) <= EPSILON;
+const NUMBER_LINE_AXIS_ENDS = {
+  "arrow-right": { left: "tick", right: "arrow" },
+  "arrow-left": { left: "arrow", right: "tick" },
+  "arrow-both": { left: "arrow", right: "arrow" },
+  "line": { left: "line", right: "line" },
+  "line-left": { left: "line", right: "arrow" }
+};
 const toPercent = (value, min, max) => {
   const raw = SIDE_PAD + (value - min) / (max - min) * (100 - 2 * SIDE_PAD);
   return Math.max(SIDE_PAD, Math.min(100 - SIDE_PAD, raw));
@@ -20373,7 +21155,7 @@ const NumberLineRenderer = ({
     max,
     step,
     minorTicks = 0,
-    style: lineStyle = "arrow-right",
+    style: lineStyle = DEFAULT_NUMBER_LINE_STYLE,
     labelVisibility,
     highlights,
     arrows,
@@ -20437,8 +21219,9 @@ const NumberLineRenderer = ({
     () => getMinorTickValues(majorTicks, minorTicks),
     [majorTicks, minorTicks]
   );
-  const showArrowRight = lineStyle === "arrow-right" || lineStyle === "arrow-both";
-  const showArrowLeft = lineStyle === "arrow-left" || lineStyle === "arrow-both";
+  const axisEnds = NUMBER_LINE_AXIS_ENDS[lineStyle] ?? NUMBER_LINE_AXIS_ENDS[DEFAULT_NUMBER_LINE_STYLE];
+  const showArrowLeft = axisEnds.left === "arrow";
+  const showArrowRight = axisEnds.right === "arrow";
   const hasDragOptions = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
   const isAxisDragMode = hasDragOptions && item.dragMode === "axis";
   const inputTickSet = useMemo(() => {
@@ -20486,7 +21269,7 @@ const NumberLineRenderer = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}${nlValidationStatus ? ` number-line--${nlValidationStatus}` : ""}`,
+      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${axisEnds.left === "line" ? " number-line--extend-left" : ""}${axisEnds.right === "line" ? " number-line--extend-right" : ""}${nlValidationStatus ? ` number-line--${nlValidationStatus}` : ""}`,
       style: {
         [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%`,
         ...positionContentHeight && { "--nl-position-content-height": positionContentHeight }
@@ -20859,6 +21642,35 @@ function groupLineItems(items) {
   }
   return groups;
 }
+function placeTableCells(rows, cols) {
+  const placements = /* @__PURE__ */ new Map();
+  const occupied = rows.map(() => []);
+  const totalRows = rows.length;
+  rows.forEach((row, rowIndex) => {
+    const taken = occupied[rowIndex] ?? [];
+    let col = 0;
+    for (const cell of row.cells) {
+      while (taken[col]) col++;
+      const colspan = cell.colspan || 1;
+      const rowspan = Math.min(cell.rowspan || 1, totalRows - rowIndex);
+      for (let r = rowIndex; r < rowIndex + rowspan; r++) {
+        const line = occupied[r];
+        if (!line) continue;
+        for (let c = col; c < col + colspan; c++) line[c] = true;
+      }
+      placements.set(cell.id, {
+        column: col + 1,
+        row: rowIndex + 1,
+        colspan,
+        rowspan,
+        isLastColumn: col + colspan >= cols,
+        isLastRow: rowIndex + rowspan >= totalRows
+      });
+      col += colspan;
+    }
+  });
+  return placements;
+}
 const toValidationStatus = (v) => v === true ? "correct" : v === false ? "incorrect" : null;
 const isNumericText = (value) => /^[\d.,\s]+$/.test(value);
 const numberClass = (value) => isNumericText(value) ? "text-item-number" : "";
@@ -20982,21 +21794,28 @@ const LayoutRenderer = ({
         subItem.id
       )) });
     case JSON_TYPES.TABLE: {
-      const totalRows = item.rows.length;
+      const placements = placeTableCells(item.rows, item.cols);
       const tableStyle = {
-        "--exercise-table-border-color": item.borderColor ?? DEFAULT_TABLE_BORDER_COLOR
+        "--exercise-table-border-color": item.borderColor ?? DEFAULT_TABLE_BORDER_COLOR,
+        "--exercise-table-cols": item.cols
       };
-      return /* @__PURE__ */ jsx("div", { className: "exercise-table-container", style: tableStyle, children: /* @__PURE__ */ jsx("table", { className: "exercise-table", children: /* @__PURE__ */ jsx("tbody", { children: item.rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "exercise-table-row", style: { backgroundColor: row.backgroundColor }, children: row.cells.map((cell) => {
-        const rowspan = cell.rowspan || 1;
-        const isLastRow = rowIndex + rowspan - 1 >= totalRows - 1;
+      return /* @__PURE__ */ jsx("div", { className: "exercise-table-container", style: tableStyle, children: /* @__PURE__ */ jsx("div", { className: "exercise-table", role: "table", children: item.rows.map((row) => /* @__PURE__ */ jsx("div", { className: "exercise-table-row", role: "row", children: row.cells.map((cell) => {
+        const placement = placements.get(cell.id);
+        const modifiers = [
+          placement?.isLastRow ? " exercise-table-cell--last-row" : "",
+          placement?.isLastColumn ? " exercise-table-cell--last-col" : ""
+        ].join("");
         return /* @__PURE__ */ jsx(
-          "td",
+          "div",
           {
-            className: `exercise-table-cell${isLastRow ? " exercise-table-cell--last-row" : ""}`,
-            colSpan: cell.colspan || 1,
-            rowSpan: rowspan,
-            style: { backgroundColor: cell.backgroundColor },
-            children: cell.items.map((subItem) => /* @__PURE__ */ jsx(
+            className: `exercise-table-cell${modifiers}`,
+            role: "cell",
+            style: {
+              backgroundColor: cell.backgroundColor ?? row.backgroundColor,
+              gridColumn: placement && `${placement.column} / span ${placement.colspan}`,
+              gridRow: placement && `${placement.row} / span ${placement.rowspan}`
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "exercise-table-cell-content", children: cell.items.map((subItem) => /* @__PURE__ */ jsx(
               LayoutRenderer,
               {
                 item: subItem,
@@ -21009,11 +21828,11 @@ const LayoutRenderer = ({
                 resetKey
               },
               subItem.id
-            ))
+            )) })
           },
           cell.id
         );
-      }) }, row.id)) }) }) });
+      }) }, row.id)) }) });
     }
     case JSON_TYPES.NUMBER_LINE:
       return /* @__PURE__ */ jsx(
@@ -21183,6 +22002,394 @@ const LayoutRenderer = ({
       return null;
   }
 };
+function LionHand({ className }) {
+  const id = useId();
+  const shadowId = `${id}-shadow`;
+  const maskId = `${id}-mask`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "75",
+      height: "78",
+      viewBox: "0 0 75 78",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      children: [
+        /* @__PURE__ */ jsxs("g", { filter: `url(#${shadowId})`, children: [
+          /* @__PURE__ */ jsx(
+            "mask",
+            {
+              id: maskId,
+              style: { maskType: "alpha" },
+              maskUnits: "userSpaceOnUse",
+              x: "9",
+              y: "19",
+              width: "49",
+              height: "42",
+              children: /* @__PURE__ */ jsx("path", { d: "M49.7484 33.9668C58.158 45.6281 37.9572 61.4399 28.1745 60.1051C17.1397 58.5995 5.03802 42.2474 10.4349 38.3224C15.8318 34.3974 18.9715 32.4031 23.1181 30.1278C24.1486 29.5624 25.1742 29.0263 26.1947 28.5358C33.7314 24.764 52.8138 16.0308 57.0969 21.97C59.9201 25.8848 54.8651 28.9522 48.1097 31.8806C48.658 32.518 49.2042 33.2123 49.7484 33.9668Z", fill: "#FCD592" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("g", { mask: `url(#${maskId})`, children: [
+            /* @__PURE__ */ jsx("path", { d: "M49.7484 33.9672C58.158 45.6285 38.3118 60.3151 32.1037 64.7332C22.6672 71.4486 2.68204 43.9969 12.2424 37.1926C15.1884 35.0959 18.9716 32.4035 23.1182 30.1282C24.7308 29.2433 26.3314 28.4303 27.9195 27.7514C36.611 23.6398 54.4269 16.1501 58.4471 21.7248C61.34 25.7362 55.5686 28.9294 48.2024 31.9893C48.7196 32.5968 49.2349 33.2552 49.7484 33.9672Z", fill: "#FCD592" }),
+            /* @__PURE__ */ jsx("path", { d: "M12.2426 37.1924C2.68223 43.9967 22.6674 71.4485 32.1039 64.733C31.3434 63.6785 26.4317 61.1668 25.3134 59.6161C24.1951 58.0654 22.794 50.5211 22.123 49.5907C21.4521 48.6603 16.3219 45.7409 15.5637 44.4032C14.8055 43.0655 13.8979 39.4877 14.7258 35.4253L12.2426 37.1924Z", fill: "#6B291E" }),
+            /* @__PURE__ */ jsx("path", { d: "M50.4102 36.1737C50.6823 37.524 52.0035 38.4016 53.3614 38.1339C54.7192 37.8662 55.5994 36.5546 55.3274 35.2043L52.8688 35.689L50.4102 36.1737ZM38.8014 26.9523C37.4241 27.0934 36.425 28.3178 36.5697 29.6872C36.7144 31.0565 37.9482 32.0522 39.3255 31.9111L39.0634 29.4317L38.8014 26.9523ZM52.8688 35.689C55.3274 35.2043 55.327 35.2023 55.3266 35.2004C55.3265 35.1997 55.326 35.1977 55.3258 35.1963C55.3252 35.1935 55.3246 35.1906 55.324 35.1875C55.3227 35.1815 55.3213 35.1749 55.3198 35.1679C55.3168 35.1539 55.3133 35.1379 55.3092 35.1201C55.3011 35.0845 55.2907 35.0415 55.2779 34.9916C55.2522 34.8918 55.2163 34.764 55.1676 34.6127C55.0703 34.3106 54.9205 33.911 54.6961 33.4507C54.247 32.5296 53.4925 31.3535 52.2552 30.241C49.7078 27.9508 45.5021 26.2658 38.8014 26.9523L39.0634 29.4317L39.3255 31.9111C44.9159 31.3384 47.6128 32.782 48.8954 33.9352C49.5731 34.5445 49.9653 35.1687 50.1842 35.6177C50.2938 35.8424 50.3584 36.0201 50.3919 36.1242C50.4086 36.1759 50.4172 36.2084 50.4197 36.2181C50.4209 36.223 50.4206 36.222 50.419 36.2148C50.4181 36.2111 50.417 36.2059 50.4155 36.1991C50.4148 36.1957 50.414 36.1919 50.4131 36.1876C50.4127 36.1855 50.4122 36.1833 50.4117 36.181C50.4115 36.1798 50.4111 36.178 50.411 36.1774C50.4106 36.1755 50.4102 36.1737 52.8688 35.689Z", fill: "#A2634A" }),
+            /* @__PURE__ */ jsx("path", { d: "M54.7526 47.3947C55.5602 48.5146 57.1269 48.7734 58.2518 47.9729C59.3767 47.1723 59.634 45.6155 58.8264 44.4956L56.7895 45.9452L54.7526 47.3947ZM38.1539 36.5617C36.7805 36.7357 35.8113 37.9837 35.9891 39.3493C36.1669 40.7148 37.4244 41.6808 38.7978 41.5068L38.4758 39.0342L38.1539 36.5617ZM56.7895 45.9452L58.8264 44.4956C57.4277 42.5562 55.3182 40.1317 51.9378 38.4204C48.5385 36.6995 44.0772 35.8112 38.1539 36.5617L38.4758 39.0342L38.7978 41.5068C43.8796 40.863 47.3003 41.6624 49.6691 42.8616C52.0569 44.0704 53.6015 45.7985 54.7526 47.3947L56.7895 45.9452Z", fill: "#A2634A" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: shadowId, x: "-1.99995", y: "0", width: "78.3658", height: "81.8518", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+          /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+          /* @__PURE__ */ jsx("feOffset", { dy: "2" }),
+          /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "1" }),
+          /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "out" }),
+          /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" }),
+          /* @__PURE__ */ jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }),
+          /* @__PURE__ */ jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })
+        ] }) })
+      ]
+    }
+  );
+}
+const TUTORIAL_HAND_TIP = { x: 56 / 75, y: 22 / 78 };
+const CYCLE_MS = 1400;
+const PRESS_AT_MS = 650;
+const PRESS_HOLD_MS = 220;
+const HOLE_PAD = 10;
+const HOLE_RADIUS = 18;
+const HAND_W = 72;
+const HAND_H = 75;
+const BUBBLE_W = 240;
+const BUBBLE_GAP = 14;
+const EDGE = 8;
+const DEFAULT_NEXT_LABEL = "فهمت";
+function resolve(t) {
+  return (typeof t === "function" ? t() : t) ?? null;
+}
+function toRect(t) {
+  if (!t) return null;
+  const r = t instanceof Element ? t.getBoundingClientRect() : t;
+  if (r.width <= 0 || r.height <= 0) return null;
+  return { x: Math.round(r.x), y: Math.round(r.y), width: Math.round(r.width), height: Math.round(r.height) };
+}
+const centerOf = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+const TutorialOverlay = ({ tutorial, root, json, options, onClose }) => {
+  const { steps } = tutorial;
+  const [stepIndex, setStepIndex] = useState(
+    () => Math.min(Math.max(0, Math.floor(options.startStep ?? 0)), steps.length - 1)
+  );
+  const step = steps[stepIndex];
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const ctx = { root, json, submitTarget: resolve(options.submitTarget) };
+  const ctxRef = useRef(ctx);
+  ctxRef.current = ctx;
+  const [layout, setLayout] = useState(null);
+  useEffect(() => {
+    let raf = 0;
+    let last = "";
+    const tick = () => {
+      const c = ctxRef.current;
+      const next2 = {
+        spotlight: step.spotlight(c).map(toRect),
+        taps: step.taps(c).map(toRect),
+        anchor: toRect(resolve(optionsRef.current.bubbleAnchor)),
+        root: toRect(c.root),
+        vw: window.innerWidth,
+        vh: window.innerHeight
+      };
+      const key2 = JSON.stringify(next2);
+      if (key2 !== last) {
+        last = key2;
+        setLayout(next2);
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    tick();
+    return () => cancelAnimationFrame(raf);
+  }, [step]);
+  const [tapIndex, setTapIndex] = useState(0);
+  const [tapCount, setTapCount] = useState(0);
+  const [shownStep, setShownStep] = useState(stepIndex);
+  if (shownStep !== stepIndex) {
+    setShownStep(stepIndex);
+    setTapIndex(0);
+    setTapCount(0);
+  }
+  useEffect(() => {
+    let release;
+    const press = setTimeout(() => {
+      setTapCount((n) => n + 1);
+      const targets = step.taps(ctxRef.current);
+      const el = targets[tapIndex % Math.max(1, targets.length)];
+      if (el instanceof Element) {
+        el.classList.add("met-tutorial-pressed");
+        release = setTimeout(() => el.classList.remove("met-tutorial-pressed"), PRESS_HOLD_MS);
+      }
+    }, PRESS_AT_MS);
+    const advance = setTimeout(() => setTapIndex((i) => i + 1), CYCLE_MS);
+    return () => {
+      clearTimeout(press);
+      clearTimeout(advance);
+      if (release) clearTimeout(release);
+      root.querySelectorAll(".met-tutorial-pressed").forEach((el) => el.classList.remove("met-tutorial-pressed"));
+    };
+  }, [step, tapIndex, root]);
+  const text = options.texts?.[step.id] ?? step.text;
+  const textRef = useRef(text);
+  textRef.current = text;
+  useEffect(() => {
+    optionsRef.current.onStep?.(stepIndex, step.id);
+    optionsRef.current.onSpeak?.(step.id, textRef.current);
+  }, [stepIndex, step]);
+  const isLast = stepIndex === steps.length - 1;
+  const next = () => {
+    if (isLast) onClose(true);
+    else setStepIndex((i) => i + 1);
+  };
+  const overlayRef = useRef(null);
+  const nextRef = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  useEffect(() => {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    previous?.blur();
+    const onKeyDown = (e) => {
+      const overlay = overlayRef.current;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onCloseRef.current(false);
+        return;
+      }
+      if (e.key === "Tab" && overlay) {
+        e.preventDefault();
+        const buttons = Array.from(overlay.querySelectorAll("button"));
+        if (buttons.length === 0) return;
+        const at = buttons.indexOf(document.activeElement);
+        const to = (at + (e.shiftKey ? -1 : 1) + buttons.length) % buttons.length;
+        buttons[to]?.focus();
+        return;
+      }
+      if (overlay && e.target instanceof Node && overlay.contains(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown, true);
+      if (previous?.isConnected) previous.focus();
+    };
+  }, []);
+  const bubbleShown = layout !== null;
+  useEffect(() => {
+    nextRef.current?.focus({ focusVisible: false });
+  }, [stepIndex, bubbleShown]);
+  const maskId = `met-tutorial-mask-${useId()}`;
+  if (typeof document === "undefined") return null;
+  const holes = (layout?.spotlight ?? []).filter((r) => r !== null);
+  const tapTarget = layout?.taps.length ? layout.taps[tapIndex % layout.taps.length] ?? null : null;
+  const Scene = step.Scene;
+  return createPortal(
+    /* @__PURE__ */ jsxs("div", { ref: overlayRef, className: "met-tutorial", role: "dialog", "aria-modal": "true", "aria-label": text, children: [
+      /* @__PURE__ */ jsxs("svg", { className: "met-tutorial-dim", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+          /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
+          holes.map((r, i) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: r.x - HOLE_PAD,
+              y: r.y - HOLE_PAD,
+              width: r.width + HOLE_PAD * 2,
+              height: r.height + HOLE_PAD * 2,
+              rx: HOLE_RADIUS,
+              fill: "black"
+            },
+            i
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", mask: `url(#${maskId})` })
+      ] }),
+      holes.map((r, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "met-tutorial-glow",
+          style: {
+            left: r.x - HOLE_PAD,
+            top: r.y - HOLE_PAD,
+            width: r.width + HOLE_PAD * 2,
+            height: r.height + HOLE_PAD * 2,
+            borderRadius: HOLE_RADIUS
+          }
+        },
+        i
+      )),
+      Scene && layout && /* @__PURE__ */ jsx(Scene, { ctx, spotlight: layout.spotlight, taps: layout.taps, tapCount }),
+      tapTarget && /* @__PURE__ */ jsx(Hand, { target: tapTarget, tapKey: `${stepIndex}-${tapIndex}` }),
+      layout && /* @__PURE__ */ jsx(
+        Bubble,
+        {
+          layout,
+          text,
+          stepIndex,
+          stepCount: steps.length,
+          nextLabel: options.nextLabel ?? DEFAULT_NEXT_LABEL,
+          onSpeak: options.onSpeak && (options.canSpeak?.(step.id) ?? true) ? () => optionsRef.current.onSpeak?.(step.id, textRef.current) : void 0,
+          onNext: next,
+          nextRef
+        }
+      )
+    ] }),
+    document.body
+  );
+};
+const Hand = ({ target, tapKey }) => {
+  const c = centerOf(target);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "met-tutorial-hand",
+      style: {
+        width: HAND_W,
+        height: HAND_H,
+        transform: `translate(${c.x - TUTORIAL_HAND_TIP.x * HAND_W}px, ${c.y - TUTORIAL_HAND_TIP.y * HAND_H}px)`
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "met-tutorial-hand-press", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "met-tutorial-ripple",
+            style: { left: TUTORIAL_HAND_TIP.x * HAND_W, top: TUTORIAL_HAND_TIP.y * HAND_H }
+          }
+        ),
+        /* @__PURE__ */ jsx(LionHand, {})
+      ] }, tapKey)
+    }
+  );
+};
+const Bubble = ({ layout, text, stepIndex, stepCount, nextLabel, onSpeak, onNext, nextRef }) => {
+  const { anchor, root, vw, vh } = layout;
+  const clampLeft = (x) => Math.min(Math.max(EDGE, x), Math.max(EDGE, vw - BUBBLE_W - EDGE));
+  const style = anchor ? { left: clampLeft(anchor.x), bottom: Math.max(EDGE, vh - anchor.y + BUBBLE_GAP), width: BUBBLE_W } : { left: clampLeft((root?.x ?? 0) + EDGE * 2), top: (root?.y ?? 0) + EDGE * 2, width: BUBBLE_W };
+  return /* @__PURE__ */ jsxs("div", { className: `met-tutorial-bubble${anchor ? " met-tutorial-bubble--anchored" : ""}`, style, children: [
+    /* @__PURE__ */ jsx("p", { className: "met-tutorial-text", dir: "auto", children: text }),
+    /* @__PURE__ */ jsxs("div", { className: "met-tutorial-actions", children: [
+      onSpeak && /* @__PURE__ */ jsx("button", { type: "button", className: "met-tutorial-speak", "aria-label": "🔊", onClick: onSpeak, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 9v6h4l5 4V5L8 9H4z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+      ] }) }),
+      /* @__PURE__ */ jsx("button", { ref: nextRef, type: "button", className: "met-tutorial-next", onClick: onNext, children: nextLabel })
+    ] }),
+    stepCount > 1 && /* @__PURE__ */ jsx("div", { className: "met-tutorial-dots", "aria-hidden": "true", children: Array.from({ length: stepCount }, (_, i) => /* @__PURE__ */ jsx("span", { className: i === stepIndex ? "is-current" : i < stepIndex ? "is-done" : "" }, i)) })
+  ] });
+};
+const DEMO_KEYS = ["2", "5", "8"];
+const DEFAULT_SLOTS = 3;
+const MAX_SLOTS = 6;
+const STAND_IN_CHECK_SIZE = 52;
+const STAND_IN_CHECK_GAP = 20;
+function keypad(ctx) {
+  return ctx.root.querySelector('[data-tutorial="keypad"]');
+}
+function key(ctx, k) {
+  return ctx.root.querySelector(`[data-tutorial="keypad"] [data-key="${k}"]`);
+}
+function answerBox(ctx) {
+  const inputs = getTextInputs(ctx.root);
+  return inputs.find(canTakeInput) ?? inputs[0] ?? null;
+}
+function answerSlots(ctx) {
+  const id = answerBox(ctx)?.id.replace(/-input$/, "");
+  const max = id ? getMaxInputLength(ctx.json, id) : void 0;
+  return Math.min(MAX_SLOTS, Math.max(1, max ?? DEFAULT_SLOTS));
+}
+function checkTarget(ctx) {
+  if (ctx.submitTarget) return ctx.submitTarget;
+  const box = answerBox(ctx)?.getBoundingClientRect();
+  if (!box) return null;
+  return new DOMRect(
+    box.right + STAND_IN_CHECK_GAP,
+    box.top + box.height / 2 - STAND_IN_CHECK_SIZE / 2,
+    STAND_IN_CHECK_SIZE,
+    STAND_IN_CHECK_SIZE
+  );
+}
+const demoKeys = (ctx) => DEMO_KEYS.map((k) => key(ctx, k));
+const StandInFill = ({ box, slots, filled }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "met-tutorial-fill",
+    style: { left: box.x, top: box.y, width: box.width, height: box.height },
+    children: Array.from({ length: slots }, (_, i) => /* @__PURE__ */ jsx("span", { className: i < filled ? "met-tutorial-fill-dot" : "met-tutorial-fill-slot", children: i < filled ? "●" : "_" }, i))
+  }
+);
+const center = (r) => ({ x: r.x + r.width / 2, y: r.y + r.height / 2 });
+const HopScene = ({ ctx, spotlight, taps, tapCount }) => {
+  const box = spotlight[1];
+  if (!box) return null;
+  const slots = answerSlots(ctx);
+  const filled = tapCount === 0 ? 0 : (tapCount - 1) % slots + 1;
+  const from = tapCount > 0 ? taps[(tapCount - 1) % taps.length] : null;
+  let arc = null;
+  if (from) {
+    const a = center(from);
+    const b = center(box);
+    const lift = Math.max(40, Math.hypot(b.x - a.x, b.y - a.y) * 0.35);
+    arc = `M ${a.x} ${a.y} Q ${(a.x + b.x) / 2} ${Math.min(a.y, b.y) - lift} ${b.x} ${b.y}`;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    arc && /* @__PURE__ */ jsx("svg", { className: "met-tutorial-arc", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: arc }) }),
+    arc && /* @__PURE__ */ jsx("div", { className: "met-tutorial-hop", style: { offsetPath: `path('${arc}')` } }, tapCount),
+    /* @__PURE__ */ jsx(StandInFill, { box, slots, filled })
+  ] });
+};
+const CheckScene = ({ ctx, spotlight }) => {
+  const box = spotlight[0];
+  const check = spotlight[1];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    box && /* @__PURE__ */ jsx(StandInFill, { box, slots: answerSlots(ctx), filled: answerSlots(ctx) }),
+    check && !ctx.submitTarget && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "met-tutorial-stand-in-check",
+        style: { left: check.x, top: check.y, width: check.width, height: check.height },
+        children: /* @__PURE__ */ jsx("span", { children: "✓" })
+      }
+    )
+  ] });
+};
+const keypadTutorial = {
+  id: "keypad",
+  appliesTo: (json) => json.widgets[NUMERIC_KEYPAD_WIDGET_ID]?.type === JSON_TYPES.NUMERIC_KEYPAD,
+  steps: [
+    {
+      id: "keypad.tap-number",
+      text: "اضغط على رقم",
+      spotlight: (ctx) => [keypad(ctx), answerBox(ctx)],
+      taps: demoKeys
+    },
+    {
+      id: "keypad.hop",
+      text: "يظهر الرقم في الخانة",
+      spotlight: (ctx) => [keypad(ctx), answerBox(ctx)],
+      taps: demoKeys,
+      Scene: HopScene
+    },
+    {
+      id: "keypad.tap-check",
+      text: "اضغط على زر التحقق",
+      spotlight: (ctx) => [answerBox(ctx), checkTarget(ctx)],
+      taps: (ctx) => [checkTarget(ctx)],
+      Scene: CheckScene
+    }
+  ]
+};
+const WIDGET_TUTORIALS = [keypadTutorial];
+function findWidgetTutorial(json) {
+  return WIDGET_TUTORIALS.find((t) => t.appliesTo(json)) ?? null;
+}
 const TOOL_ASPECT_RATIO = {
   ruler: RULER_ASPECT_RATIO,
   protractor: PROTRACTOR_ASPECT_RATIO,
@@ -21221,6 +22428,11 @@ function buildInitialValues(json) {
 function toBaseId(widgetId) {
   return parseFractionKey(widgetId)?.widgetId ?? widgetId;
 }
+function hasJustFilledBox(json, key2, previous, value) {
+  const maxLength = getMaxInputLength(json, key2);
+  if (maxLength === void 0) return false;
+  return String(previous ?? "").length < maxLength && String(value).length >= maxLength;
+}
 function buildInitialValuesSignature(json) {
   return JSON.stringify({
     widgets: json.widgets,
@@ -21270,6 +22482,27 @@ function buildRevealedValues(json) {
   }
   return revealed;
 }
+function buildRevealedDropSources(json, revealedValues) {
+  const pool = [];
+  const bank = json.widgets[DRAG_OPTIONS_WIDGET_ID];
+  if (bank?.type === JSON_TYPES.DRAG_OPTIONS) {
+    bank.options.forEach((value, idx) => pool.push({ optionId: `drag-option-${idx}`, value: String(value) }));
+  }
+  for (const [widgetId, widget] of Object.entries(json.widgets)) {
+    if (widget.type === JSON_TYPES.INLINE_DRAG_OPTION) pool.push({ optionId: widgetId, value: widget.value });
+  }
+  const sources = /* @__PURE__ */ new Map();
+  if (pool.length === 0) return sources;
+  const used = /* @__PURE__ */ new Set();
+  for (const [inputId, value] of Object.entries(revealedValues)) {
+    if (typeof value !== "string" || value === "") continue;
+    const match = pool.find((o) => !used.has(o.optionId) && normalize(o.value) === normalize(value));
+    if (!match) continue;
+    used.add(match.optionId);
+    sources.set(inputId, match.optionId);
+  }
+  return sources;
+}
 const ExerciseRenderer = forwardRef(({
   json,
   onSubmit,
@@ -21292,6 +22525,8 @@ const ExerciseRenderer = forwardRef(({
   const rootRef = useRef(null);
   const [resetKey, setResetKey] = useState(0);
   const [revealed, setRevealed] = useState(false);
+  const tutorial = useMemo(() => findWidgetTutorial(json), [json]);
+  const [tutorialRun, setTutorialRun] = useState(null);
   const themeStyle = useMemo(() => {
     const style = {};
     if (theme?.correct) style["--exercise-correct"] = theme.correct;
@@ -21312,6 +22547,7 @@ const ExerciseRenderer = forwardRef(({
     setResetKey((k) => k + 1);
     setLoadedValuesSignature(initialValuesSignature);
     touchedRef.current = /* @__PURE__ */ new Set();
+    setTutorialRun(null);
   }, [json, initialValuesSignature, loadedValuesSignature]);
   const locked = validationDetails !== null || externallyLocked;
   const lastResultRef = useRef(null);
@@ -21395,7 +22631,7 @@ const ExerciseRenderer = forwardRef(({
       const next = { ...valuesRef.current, ...revealedValues };
       valuesRef.current = next;
       setValues(next);
-      setDroppedSources(/* @__PURE__ */ new Map());
+      setDroppedSources(buildRevealedDropSources(json, revealedValues));
       setValidationDetails(details);
       setRevealed(true);
       setResetKey((k) => k + 1);
@@ -21403,20 +22639,29 @@ const ExerciseRenderer = forwardRef(({
     focusFirstInput: () => {
       const container = rootRef.current ?? document.querySelector(".math-exercise-renderer");
       if (!container) return;
-      const candidates = Array.from(
-        container.querySelectorAll('input[type="text"], input[type="number"], textarea, select')
-      );
-      const canTakeInput = (el) => !el.readOnly && !el.disabled;
+      const candidates = getTextInputs(container);
       const target = candidates.find(canTakeInput) ?? (locked ? void 0 : candidates[0]);
       target?.focus();
-    }
-  }), [json, values, onSubmit, playSound, locked, initialValuesSignature]);
+    },
+    hasTutorial: () => tutorial !== null,
+    startTutorial: (options = {}) => {
+      if (!tutorial || !rootRef.current) return false;
+      setTutorialRun((prev) => ({ options, run: (prev?.run ?? 0) + 1 }));
+      return true;
+    },
+    stopTutorial: () => setTutorialRun(null)
+  }), [json, values, onSubmit, playSound, locked, initialValuesSignature, tutorial]);
+  const focusNextInput = (currentKey) => {
+    if (!rootRef.current) return;
+    findNextInput(rootRef.current, currentKey)?.focus();
+  };
   const handleChange = (widgetId, value, fromDrop = false, sourceOptionId, silent = false) => {
     if (locked) return;
     if (!silent) {
       setRevealed(false);
       touchedRef.current.add(toBaseId(widgetId));
     }
+    const previous = valuesRef.current[widgetId];
     const next = { ...valuesRef.current, [widgetId]: value };
     valuesRef.current = next;
     setValues(next);
@@ -21430,6 +22675,9 @@ const ExerciseRenderer = forwardRef(({
       return next2;
     });
     onChange?.(next);
+    if (!fromDrop && !silent && hasJustFilledBox(json, widgetId, previous, value)) {
+      focusNextInput(widgetId);
+    }
   };
   const handleSubmit = () => {
     runSubmit();
@@ -21544,7 +22792,7 @@ const ExerciseRenderer = forwardRef(({
   const rulerWidget = json.widgets[RULER_WIDGET_ID];
   const protractorWidget = json.widgets[PROTRACTOR_WIDGET_ID];
   const setSquareWidget = json.widgets[SET_SQUARE_WIDGET_ID];
-  const numericKeypadWidget = json.widgets["_numeric_keypad"];
+  const numericKeypadWidget = json.widgets[NUMERIC_KEYPAD_WIDGET_ID];
   const { tools, toolsMinHeight } = useMemo(() => {
     const list = [];
     const PAD = 12;
@@ -21563,7 +22811,7 @@ const ExerciseRenderer = forwardRef(({
     if (setSquareWidget) add2("set-square-1", "set-square", Math.round(getSize(setSquareWidget) * 160));
     return { tools: list, toolsMinHeight: maxH };
   }, [rulerWidget, protractorWidget, setSquareWidget]);
-  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
+  return /* @__PURE__ */ jsx(SoundPlayerProvider, { play: playSound, children: /* @__PURE__ */ jsx(ExerciseLockProvider, { locked, children: /* @__PURE__ */ jsx(ExerciseDndProvider, { droppedSources, exerciseKey: loadedValuesSignature, children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `math-exercise-renderer ${revealed ? "revealed" : ""} ${locked ? "locked" : ""} ${className}`, style: themeStyle, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -21659,7 +22907,21 @@ const ExerciseRenderer = forwardRef(({
         }
       }
     ) }),
-    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" })
+    showSubmitButton && /* @__PURE__ */ jsx("button", { className: "exercise-submit-btn", disabled: locked, onClick: handleSubmit, children: "Check Answer" }),
+    tutorial && tutorialRun && rootRef.current && /* @__PURE__ */ jsx(
+      TutorialOverlay,
+      {
+        tutorial,
+        root: rootRef.current,
+        json,
+        options: tutorialRun.options,
+        onClose: (finished) => {
+          setTutorialRun(null);
+          if (finished) tutorialRun.options.onDone?.();
+        }
+      },
+      tutorialRun.run
+    )
   ] }) }) }) });
 });
 ExerciseRenderer.displayName = "ExerciseRenderer";
@@ -21728,7 +22990,7 @@ export {
   isTableRowItem as Z,
   isTableCellItem as _,
   compileWithAST as a,
-  EngineError as a$,
+  validateExerciseJSONSafe as a$,
   isVerticalOperationItem as a0,
   isClockItem as a1,
   isRulerWidget as a2,
@@ -21747,25 +23009,25 @@ export {
   ChartAxisJSONSchema as aF,
   ChartBarJSONSchema as aG,
   ChartPictoJSONSchema as aH,
-  WidgetJSONSchema as aI,
-  InlineInputJSONSchema as aJ,
-  DragOptionsJSONSchema as aK,
-  RadioOptionsJSONSchema as aL,
-  NumericKeypadJSONSchema as aM,
-  FractionJSONSchema as aN,
-  MatcherWidgetJSONSchema as aO,
-  PairMatcherWidgetJSONSchema as aP,
-  GridSymmetryJSONSchema as aQ,
-  ChartBarWidgetJSONSchema as aR,
-  ChartPictoWidgetJSONSchema as aS,
-  RulerWidgetSchema as aT,
-  ProtractorWidgetSchema as aU,
-  SetSquareWidgetSchema as aV,
-  GeometryJSONSchema as aW,
-  validateExerciseJSON as aX,
-  validateExerciseJSONSafe as aY,
-  validateWidgetJSON as aZ,
-  validateWidgetJSONSafe as a_,
+  ChartSeriesJSONSchema as aI,
+  ChartSeriesBarJSONSchema as aJ,
+  ChartGroupJSONSchema as aK,
+  WidgetJSONSchema as aL,
+  InlineInputJSONSchema as aM,
+  DragOptionsJSONSchema as aN,
+  RadioOptionsJSONSchema as aO,
+  NumericKeypadJSONSchema as aP,
+  FractionJSONSchema as aQ,
+  MatcherWidgetJSONSchema as aR,
+  PairMatcherWidgetJSONSchema as aS,
+  GridSymmetryJSONSchema as aT,
+  ChartBarWidgetJSONSchema as aU,
+  ChartPictoWidgetJSONSchema as aV,
+  RulerWidgetSchema as aW,
+  ProtractorWidgetSchema as aX,
+  SetSquareWidgetSchema as aY,
+  GeometryJSONSchema as aZ,
+  validateExerciseJSON as a_,
   QuestionTextSchema as aa,
   TextItemSchema as ab,
   WidgetRefSchema as ac,
@@ -21793,178 +23055,196 @@ export {
   VopSeparatorItemSchema as ay,
   VopCellItemSchema as az,
   tokenizeSafe as b,
-  MatcherItemSchema as b$,
-  LexerError as b0,
-  ParseError as b1,
-  TransformError as b2,
-  ValidationError as b3,
-  ExerciseRenderer as b4,
-  LayoutRenderer as b5,
-  WidgetRenderer as b6,
-  renderExercise as b7,
-  SoundProvider as b8,
-  useSound as b9,
-  createHighlightedText as bA,
-  createColorText as bB,
-  createBoldText as bC,
-  createStringInput as bD,
-  createNumericInput as bE,
-  createImage as bF,
-  createFraction as bG,
-  createVisualFraction as bH,
-  createInlineDragOption as bI,
-  createDisplayClock as bJ,
-  createInteractiveClock as bK,
-  isFreeText as bL,
-  isSpace as bM,
-  isInlineInput as bN,
-  isFraction as bO,
-  isImage as bP,
-  isClock as bQ,
-  isInlineNode as bR,
-  isVisualFractionInline as bS,
-  isInlineDragOption as bT,
-  TextBlockSchema as bU,
-  LineBlockSchema as bV,
-  createTextBlock as bW,
-  createLineBlock as bX,
-  isTextBlock as bY,
-  isLineBlock as bZ,
-  DisplayInlineNodeSchema as b_,
-  ExerciseLockProvider as ba,
-  isPairMatcherWidget as bb,
-  isMatcherWidget as bc,
-  VISUAL_FRACTION_SHAPES as bd,
-  VISUAL_FRACTION_SHAPE as be,
-  VISUAL_FRACTION_DEFAULT_SIZE as bf,
-  VISUAL_FRACTION_MAX_DIVISIONS as bg,
-  FreeTextInlineSchema as bh,
-  SpaceInlineSchema as bi,
-  HighlightedTextInlineSchema as bj,
-  ColorTextInlineSchema as bk,
-  BoldTextInlineSchema as bl,
-  InlineInputWidgetSchema as bm,
-  FractionInlineSchema as bn,
-  ImageInlineSchema as bo,
-  VisualFractionInlineSchema as bp,
-  validateVisualFractionCapacity as bq,
-  InlineDragOptionSchema as br,
-  CLOCK_TYPES as bs,
-  CLOCK_MODES as bt,
-  CLOCK_FORMATS as bu,
-  CLOCK_TIME_REGEX as bv,
-  ClockInlineSchema as bw,
-  InlineNodeSchema as bx,
-  createFreeText as by,
-  createSpace as bz,
+  TextBlockSchema as b$,
+  validateWidgetJSON as b0,
+  validateWidgetJSONSafe as b1,
+  EngineError as b2,
+  LexerError as b3,
+  ParseError as b4,
+  TransformError as b5,
+  ValidationError as b6,
+  ExerciseRenderer as b7,
+  LayoutRenderer as b8,
+  WidgetRenderer as b9,
+  CLOCK_MODES as bA,
+  CLOCK_FORMATS as bB,
+  CLOCK_TIME_REGEX as bC,
+  ClockInlineSchema as bD,
+  InlineNodeSchema as bE,
+  createFreeText as bF,
+  createSpace as bG,
+  createHighlightedText as bH,
+  createColorText as bI,
+  createBoldText as bJ,
+  createStringInput as bK,
+  createNumericInput as bL,
+  createImage as bM,
+  createFraction as bN,
+  createVisualFraction as bO,
+  createInlineDragOption as bP,
+  createDisplayClock as bQ,
+  createInteractiveClock as bR,
+  isFreeText as bS,
+  isSpace as bT,
+  isInlineInput as bU,
+  isFraction as bV,
+  isImage as bW,
+  isClock as bX,
+  isInlineNode as bY,
+  isVisualFractionInline as bZ,
+  isInlineDragOption as b_,
+  renderExercise as ba,
+  SoundProvider as bb,
+  useSound as bc,
+  ExerciseLockProvider as bd,
+  WIDGET_TUTORIALS as be,
+  findWidgetTutorial as bf,
+  isPairMatcherWidget as bg,
+  isMatcherWidget as bh,
+  VISUAL_FRACTION_SHAPES as bi,
+  VISUAL_FRACTION_SHAPE as bj,
+  VISUAL_FRACTION_DEFAULT_SIZE as bk,
+  VISUAL_FRACTION_MAX_DIVISIONS as bl,
+  INLINE_INPUT_MAX_WIDTH as bm,
+  InlineInputWidthSchema as bn,
+  FreeTextInlineSchema as bo,
+  SpaceInlineSchema as bp,
+  HighlightedTextInlineSchema as bq,
+  ColorTextInlineSchema as br,
+  BoldTextInlineSchema as bs,
+  InlineInputWidgetSchema as bt,
+  FractionInlineSchema as bu,
+  ImageInlineSchema as bv,
+  VisualFractionInlineSchema as bw,
+  validateVisualFractionCapacity as bx,
+  InlineDragOptionSchema as by,
+  CLOCK_TYPES as bz,
   compile as c,
-  createVopCarryRow as c$,
-  createMatcherItem as c0,
-  isMatcherItem as c1,
-  MatcherRowSchema as c2,
-  createMatcherRow as c3,
-  isMatcherRow as c4,
-  MatcherBlockSchema as c5,
-  createMatcherBlock as c6,
-  isMatcherBlock as c7,
-  PairMatcherBlockSchema as c8,
-  createPairMatcherBlock as c9,
-  isExpressionValidation as cA,
-  isMixedValidation as cB,
-  isValidationNode as cC,
-  ContentBlockSchema as cD,
-  ExerciseDocumentSchema as cE,
-  createExerciseDocument as cF,
-  isExerciseDocument as cG,
-  VOP_OPERATORS as cH,
-  normalizeVopOperator as cI,
-  VopDigitCellSchema as cJ,
-  VopLabelCellSchema as cK,
-  VopInputCellSchema as cL,
-  VopEmptyCellSchema as cM,
-  VopColorCellSchema as cN,
-  VopBoldCellSchema as cO,
-  VopHighlightCellSchema as cP,
-  VopCellSchema as cQ,
-  createVopDigitCell as cR,
-  createVopInputCell as cS,
-  createVopLabelCell as cT,
-  createVopEmptyCell as cU,
-  createVopColorCell as cV,
-  createVopBoldCell as cW,
-  createVopHighlightCell as cX,
-  VopRowSchema as cY,
-  createVopRow as cZ,
-  VopCarryRowSchema as c_,
-  isPairMatcherBlock as ca,
-  DragOptionsToolSchema as cb,
-  NumericKeypadToolSchema as cc,
-  RulerToolSchema as cd,
-  ProtractorToolSchema as ce,
-  SetSquareToolSchema as cf,
-  ToolNodeSchema as cg,
-  createDragOptions as ch,
-  createNumericKeypad as ci,
-  createRulerTool as cj,
-  createProtractorTool as ck,
-  createSetSquareTool as cl,
-  isDragOptions as cm,
-  isNumericKeypad as cn,
-  isRulerTool as co,
-  isProtractorTool as cp,
-  isSetSquareTool as cq,
-  isToolNode as cr,
-  SimpleValidationSchema as cs,
-  ExpressionValidationSchema as ct,
-  MixedValidationSchema as cu,
-  ValidationNodeSchema as cv,
-  createSimpleValidation as cw,
-  createExpressionValidation as cx,
-  createMixedValidation as cy,
-  isSimpleValidation as cz,
+  createVopEmptyCell as c$,
+  LineBlockSchema as c0,
+  createTextBlock as c1,
+  createLineBlock as c2,
+  isTextBlock as c3,
+  isLineBlock as c4,
+  DisplayInlineNodeSchema as c5,
+  MatcherItemSchema as c6,
+  createMatcherItem as c7,
+  isMatcherItem as c8,
+  MatcherRowSchema as c9,
+  ExpressionValidationSchema as cA,
+  MixedValidationSchema as cB,
+  ValidationNodeSchema as cC,
+  createSimpleValidation as cD,
+  createExpressionValidation as cE,
+  createMixedValidation as cF,
+  isSimpleValidation as cG,
+  isExpressionValidation as cH,
+  isMixedValidation as cI,
+  isValidationNode as cJ,
+  ContentBlockSchema as cK,
+  ExerciseDocumentSchema as cL,
+  createExerciseDocument as cM,
+  isExerciseDocument as cN,
+  VOP_OPERATORS as cO,
+  normalizeVopOperator as cP,
+  VopDigitCellSchema as cQ,
+  VopLabelCellSchema as cR,
+  VopInputCellSchema as cS,
+  VopEmptyCellSchema as cT,
+  VopColorCellSchema as cU,
+  VopBoldCellSchema as cV,
+  VopHighlightCellSchema as cW,
+  VopCellSchema as cX,
+  createVopDigitCell as cY,
+  createVopInputCell as cZ,
+  createVopLabelCell as c_,
+  createMatcherRow as ca,
+  isMatcherRow as cb,
+  MatcherBlockSchema as cc,
+  createMatcherBlock as cd,
+  isMatcherBlock as ce,
+  PairMatcherBlockSchema as cf,
+  createPairMatcherBlock as cg,
+  isPairMatcherBlock as ch,
+  DragOptionsToolSchema as ci,
+  NumericKeypadToolSchema as cj,
+  RulerToolSchema as ck,
+  ProtractorToolSchema as cl,
+  SetSquareToolSchema as cm,
+  ToolNodeSchema as cn,
+  createDragOptions as co,
+  createNumericKeypad as cp,
+  createRulerTool as cq,
+  createProtractorTool as cr,
+  createSetSquareTool as cs,
+  isDragOptions as ct,
+  isNumericKeypad as cu,
+  isRulerTool as cv,
+  isProtractorTool as cw,
+  isSetSquareTool as cx,
+  isToolNode as cy,
+  SimpleValidationSchema as cz,
   parse as d,
-  VopSeparatorSchema as d0,
-  createVopSeparator as d1,
-  VerticalOperationBlockSchema as d2,
-  createVerticalOperationBlock as d3,
-  isVopCell as d4,
-  isVopRow as d5,
-  isVopCarryRow as d6,
-  isVopSeparator as d7,
-  isVerticalOperationBlock as d8,
-  GRID_SYMMETRY_AXES as d9,
-  ChartBlockSchema as dA,
-  resolveChartAxes as dB,
-  createChartBlock as dC,
-  isChartBlock as dD,
-  GeometryBlockSchema as dE,
-  createGeometryBlock as dF,
-  isGeometryBlock as dG,
-  GRID_SYMMETRY_INTERACTIVE_AREAS as da,
-  GRID_SYMMETRY_MAX_ROWS as db,
-  GRID_SYMMETRY_MAX_COLS as dc,
-  GRID_SYMMETRY_MIN_CELL_SIZE as dd,
-  GRID_SYMMETRY_MAX_CELL_SIZE as de,
-  isCellInInteractiveArea as df,
-  reflectGridSymmetryCell as dg,
-  computeGridSymmetryExpectedCells as dh,
-  computeGridSymmetryCellsToFill as di,
-  GridSymmetryBlockSchema as dj,
-  createGridSymmetryBlock as dk,
-  isGridSymmetryBlock as dl,
-  CHART_TYPES as dm,
-  CHART_AXIS_DEFAULTS as dn,
-  CHART_MAX_AXIS_TICKS as dp,
-  CHART_MAX_PICTO_SLOTS as dq,
-  ChartAxisSchema as dr,
-  createChartAxis as ds,
-  isChartAxis as dt,
-  ChartPictoSchema as du,
-  createChartPicto as dv,
-  isChartPicto as dw,
-  ChartBarSchema as dx,
-  createChartBar as dy,
-  isChartBar as dz,
+  createVopColorCell as d0,
+  createVopBoldCell as d1,
+  createVopHighlightCell as d2,
+  VopRowSchema as d3,
+  createVopRow as d4,
+  VopCarryRowSchema as d5,
+  createVopCarryRow as d6,
+  VopSeparatorSchema as d7,
+  createVopSeparator as d8,
+  VerticalOperationBlockSchema as d9,
+  isChartAxis as dA,
+  ChartPictoSchema as dB,
+  createChartPicto as dC,
+  isChartPicto as dD,
+  ChartBarSchema as dE,
+  createChartBar as dF,
+  isChartBar as dG,
+  ChartSeriesSchema as dH,
+  createChartSeries as dI,
+  isChartSeries as dJ,
+  ChartSeriesBarSchema as dK,
+  createChartSeriesBar as dL,
+  isChartSeriesBar as dM,
+  ChartGroupSchema as dN,
+  createChartGroup as dO,
+  isChartGroup as dP,
+  alignGroupBarsToSeries as dQ,
+  ChartBlockSchema as dR,
+  resolveChartAxes as dS,
+  validateUniqueIds as dT,
+  createChartBlock as dU,
+  isChartBlock as dV,
+  GeometryBlockSchema as dW,
+  createGeometryBlock as dX,
+  isGeometryBlock as dY,
+  createVerticalOperationBlock as da,
+  isVopCell as db,
+  isVopRow as dc,
+  isVopCarryRow as dd,
+  isVopSeparator as de,
+  isVerticalOperationBlock as df,
+  GRID_SYMMETRY_AXES as dg,
+  GRID_SYMMETRY_INTERACTIVE_AREAS as dh,
+  GRID_SYMMETRY_MAX_ROWS as di,
+  GRID_SYMMETRY_MAX_COLS as dj,
+  GRID_SYMMETRY_MIN_CELL_SIZE as dk,
+  GRID_SYMMETRY_MAX_CELL_SIZE as dl,
+  isCellInInteractiveArea as dm,
+  reflectGridSymmetryCell as dn,
+  computeGridSymmetryExpectedCells as dp,
+  computeGridSymmetryCellsToFill as dq,
+  GridSymmetryBlockSchema as dr,
+  createGridSymmetryBlock as ds,
+  isGridSymmetryBlock as dt,
+  CHART_TYPES as du,
+  CHART_AXIS_DEFAULTS as dv,
+  CHART_MAX_AXIS_TICKS as dw,
+  CHART_MAX_PICTO_SLOTS as dx,
+  ChartAxisSchema as dy,
+  createChartAxis as dz,
   parseSafe as e,
   toAST as f,
   getFractionKey as g,
@@ -21988,4 +23268,4 @@ export {
   extractVariables as y,
   validateBooleanExpression as z
 };
-//# sourceMappingURL=index-XAInSHXa.mjs.map
+//# sourceMappingURL=index-6z_8j1tM.mjs.map