@mathscan/math-exercise-engine 1.2.9 → 1.2.10

package/dist/{index-D-QbiBn5.js → index-tEgJE6m2.js}

@@ -101,6 +101,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -204,6 +210,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",
@@ -437,7 +447,7 @@ const MATCHER = chevrotain.createToken({
 });
 const GROUP = chevrotain.createToken({
   name: "GROUP",
-  pattern: /GROUP/
+  pattern: /GROUP(?=\s*[[{])/
 });
 const ITEM = chevrotain.createToken({
   name: "ITEM",
@@ -487,6 +497,18 @@ const PICTO = chevrotain.createToken({
   name: "PICTO",
   pattern: /PICTO/
 });
+const LABEL = chevrotain.createToken({
+  name: "LABEL",
+  pattern: /LABEL(?=\s*\{)/
+});
+const SERIES = chevrotain.createToken({
+  name: "SERIES",
+  pattern: /SERIES(?=\s*\[)/
+});
+const SERIES_BAR = chevrotain.createToken({
+  name: "SERIES_BAR",
+  pattern: /SERIES_BAR(?=\s*\[)/
+});
 const SEP = chevrotain.createToken({
   name: "SEP",
   pattern: /SEP(?![a-zA-Z0-9_])/
@@ -685,6 +707,9 @@ const allTokens = [
   Y_AXIS,
   BAR,
   PICTO,
+  LABEL,
+  SERIES_BAR,
+  SERIES,
   SEP,
   CARRY,
   INPUT,
@@ -1771,22 +1796,15 @@ class MathExerciseParser extends chevrotain.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) }
           ]);
         }
       });
@@ -1907,6 +1925,92 @@ class MathExerciseParser extends chevrotain.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. */
@@ -3066,7 +3170,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;
@@ -3146,6 +3250,63 @@ function createChartBar(id, opts) {
 function isChartBar(value) {
   return ChartBarSchema.safeParse(value).success;
 }
+const ChartSeriesSchema = zod.z.object({
+  type: zod.z.literal(AST_TYPES.CHART_SERIES),
+  id: zod.z.string().min(1),
+  color: zod.z.string().min(1),
+  inlines: zod.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 = zod.z.object({
+  type: zod.z.literal(AST_TYPES.CHART_SERIES_BAR),
+  id: zod.z.string().min(1),
+  seriesId: zod.z.string().min(1),
+  value: zod.z.number().default(0),
+  answer: zod.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 = zod.z.object({
+  type: zod.z.literal(AST_TYPES.CHART_GROUP),
+  id: zod.z.string().min(1),
+  labelInlines: zod.z.array(InlineNodeSchema).default([]),
+  bars: zod.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 = zod.z.object({
   type: zod.z.literal(AST_TYPES.CHART_BLOCK),
   name: zod.z.string().optional(),
@@ -3157,7 +3318,10 @@ const ChartBlockSchema = zod.z.object({
   xAxis: ChartAxisSchema.optional(),
   yAxis: ChartAxisSchema.optional(),
   bars: zod.z.array(ChartBarSchema).default([]),
-  pictos: zod.z.array(ChartPictoSchema).default([])
+  pictos: zod.z.array(ChartPictoSchema).default([]),
+  legend: zod.z.boolean().default(false),
+  series: zod.z.array(ChartSeriesSchema).default([]),
+  groups: zod.z.array(ChartGroupSchema).default([])
 }).superRefine((block, ctx) => {
   validateChartBlock(block, ctx);
 });
@@ -3182,10 +3346,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: zod.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;
@@ -3198,16 +3362,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: zod.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;
@@ -3228,7 +3392,7 @@ function validateChartBlock(block, ctx) {
       });
       return;
     }
-    validateUniqueIds(block.pictos, ctx);
+    validateUniqueIds(block.pictos, ctx, (i) => ["pictos", i]);
     if (!axisHasNumericParams(valueAxis.axis)) {
       ctx.addIssue({
         code: zod.z.ZodIssueCode.custom,
@@ -3249,6 +3413,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: zod.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: zod.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: zod.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: zod.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: zod.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: zod.z.ZodIssueCode.custom,
     message: `CHART: unsupported chartType "${block.chartType}" — add a validation branch to validateChartBlock`,
@@ -3269,14 +3490,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: zod.z.ZodIssueCode.custom,
         message: `CHART: duplicate id "${item.id}" — ids must be unique within the chart`,
-        path: [index, "id"]
+        path: [...pathFor(index), "id"]
       });
       return;
     }
@@ -3318,14 +3539,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: zod.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;
@@ -3333,7 +3554,7 @@ function validateBarAnswers(bars, valueAxis, snap, ctx) {
       ctx.addIssue({
         code: zod.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;
     }
@@ -3342,7 +3563,7 @@ function validateBarAnswers(bars, valueAxis, snap, ctx) {
       ctx.addIssue({
         code: zod.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"]
       });
     }
   });
@@ -3404,7 +3625,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) {
@@ -3491,7 +3715,9 @@ const ExerciseDocumentSchema = zod.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"]);
       }
     });
@@ -3523,6 +3749,28 @@ const ExerciseDocumentSchema = zod.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) {
@@ -4094,7 +4342,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}")`);
     }
@@ -4113,7 +4361,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. */
@@ -4152,6 +4419,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
   // ═══════════════════════════════════════════════════════════════════════════
@@ -4606,23 +4919,23 @@ const ChartAxisJSONSchema = zod.z.object({
     });
   }
 });
-const ChartBarJSONSchema = zod.z.discriminatedUnion("interactive", [
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal(JSON_TYPES.CHART_BAR),
-    interactive: zod.z.literal(false),
-    value: zod.z.number(),
-    color: zod.z.string().optional(),
-    label: zod.z.array(LayoutItemSchema).optional()
-  }),
-  zod.z.object({
-    id: zod.z.string(),
-    type: zod.z.literal(JSON_TYPES.CHART_BAR),
+const ChartBarJSONBaseSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.CHART_BAR),
+  value: zod.z.number(),
+  answer: zod.z.number().optional(),
+  color: zod.z.string().optional(),
+  label: zod.z.array(LayoutItemSchema).optional()
+});
+const ChartBarJSONSchema = zod.z.union([
+  ChartBarJSONBaseSchema.extend({
     interactive: zod.z.literal(true),
-    value: zod.z.number(),
-    widgetId: zod.z.string(),
-    color: zod.z.string().optional(),
-    label: zod.z.array(LayoutItemSchema).optional()
+    /** The widgets/answers key, equal to `id` when compiled. */
+    widgetId: zod.z.string()
+  }),
+  ChartBarJSONBaseSchema.extend({
+    interactive: zod.z.literal(false).optional(),
+    widgetId: zod.z.undefined().optional()
   })
 ]);
 const ChartPictoJSONSchema = zod.z.object({
@@ -4636,21 +4949,55 @@ const ChartPictoJSONSchema = zod.z.object({
   ),
   label: zod.z.array(LayoutItemSchema).optional()
 });
-const ChartItemSchema = zod.z.object({
+const ChartSeriesJSONSchema = zod.z.object({
+  id: zod.z.string(),
+  color: zod.z.string(),
+  label: zod.z.array(LayoutItemSchema).optional()
+});
+const ChartSeriesBarJSONSchema = zod.z.object({
+  id: zod.z.string(),
+  type: zod.z.literal(JSON_TYPES.CHART_SERIES_BAR),
+  value: zod.z.number(),
+  answer: zod.z.number().optional(),
+  color: zod.z.string(),
+  seriesId: zod.z.string()
+});
+const ChartGroupJSONSchema = zod.z.object({
+  id: zod.z.string(),
+  label: zod.z.array(LayoutItemSchema).optional(),
+  bars: zod.z.array(ChartSeriesBarJSONSchema)
+});
+const ChartItemBaseSchema = zod.z.object({
   id: zod.z.string(),
   type: zod.z.literal(JSON_TYPES.CHART),
   name: zod.z.string().optional(),
   title: zod.z.string().optional(),
-  chartType: zod.z.enum(CHART_TYPES),
   orientation: zod.z.enum(["vertical", "horizontal"]).default("vertical"),
   grid: zod.z.boolean().default(false),
   scale: zod.z.number().positive().default(1),
   snap: zod.z.number().positive().optional(),
   xAxis: ChartAxisJSONSchema.optional(),
-  yAxis: ChartAxisJSONSchema.optional(),
-  bars: zod.z.array(ChartBarJSONSchema).default([]),
-  pictos: zod.z.array(ChartPictoJSONSchema).default([])
-}).superRefine((item, ctx) => {
+  yAxis: ChartAxisJSONSchema.optional()
+});
+const ChartItemBarSchema = ChartItemBaseSchema.extend({
+  chartType: zod.z.literal("bar"),
+  bars: zod.z.array(ChartBarJSONSchema)
+});
+const ChartItemPictographSchema = ChartItemBaseSchema.extend({
+  chartType: zod.z.literal("pictograph"),
+  pictos: zod.z.array(ChartPictoJSONSchema)
+});
+const ChartItemGroupedBarSchema = ChartItemBaseSchema.extend({
+  chartType: zod.z.literal("grouped-bar"),
+  series: zod.z.array(ChartSeriesJSONSchema),
+  groups: zod.z.array(ChartGroupJSONSchema),
+  legend: zod.z.boolean().default(false)
+});
+const ChartItemSchema = zod.z.discriminatedUnion("chartType", [
+  ChartItemBarSchema,
+  ChartItemPictographSchema,
+  ChartItemGroupedBarSchema
+]).superRefine((item, ctx) => {
   if (item.chartType === "bar" && item.bars.length === 0) {
     ctx.addIssue({
       code: zod.z.ZodIssueCode.custom,
@@ -4658,18 +5005,63 @@ const ChartItemSchema = zod.z.object({
       path: ["bars"]
     });
   }
-  if (item.chartType === "pictograph" && item.pictos.length === 0) {
-    ctx.addIssue({
-      code: zod.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: zod.z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: at least one PICTO is required',
+        path: ["pictos"]
+      });
+    }
+    if (item.snap !== void 0) {
+      ctx.addIssue({
+        code: zod.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: zod.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: zod.z.ZodIssueCode.custom,
+        message: 'CHART[type="grouped-bar"]: at least one SERIES is required',
+        path: ["series"]
+      });
+    }
+    if (item.groups.length === 0) {
+      ctx.addIssue({
+        code: zod.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: zod.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: zod.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);
+      });
     });
   }
 });
@@ -10768,6 +11160,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;
@@ -10802,27 +11196,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);
@@ -10839,21 +11225,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) {
@@ -17518,12 +17945,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(" ");
@@ -17534,7 +17966,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));
@@ -17593,6 +18026,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,
@@ -17645,6 +18080,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;
@@ -17696,6 +18166,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 = React.useCallback(
     (clientY, clientX) => {
       const track = trackRef.current;
@@ -17713,10 +18184,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 = React.useCallback(
     (e) => {
@@ -17749,8 +18220,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 = React.useCallback(
     (e) => {
       if (exerciseLocked) return;
@@ -17759,22 +18230,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;
@@ -17850,7 +18321,7 @@ const StaticBar = ({
     }
   ) });
 };
-const EMPTY_SET$2 = /* @__PURE__ */ new Set();
+const EMPTY_SET$4 = /* @__PURE__ */ new Set();
 const XAxisLabel = ({
   bar,
   widgets,
@@ -17865,14 +18336,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,
@@ -17880,6 +18351,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;
@@ -17893,7 +18365,7 @@ const BarChart = ({
         item: subItem,
         widgets,
         values,
-        droppedInputs: EMPTY_SET$1,
+        droppedInputs: EMPTY_SET$3,
         validationDetails,
         onChange
       },
@@ -17903,9 +18375,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__ */ jsxRuntime.jsx("div", { className: "chart-bar-wrapper", children: bar.interactive ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-bar-wrapper", children: widgetKey !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       DraggableBar,
       {
         bar,
@@ -17938,7 +18411,7 @@ const BarChart = ({
           item: subItem,
           widgets,
           values,
-          droppedInputs: EMPTY_SET$1,
+          droppedInputs: EMPTY_SET$3,
           validationDetails,
           onChange
         },
@@ -18143,7 +18616,7 @@ const PictographGrid = ({
     ))
   ] });
 };
-const EMPTY_SET = /* @__PURE__ */ new Set();
+const EMPTY_SET$2 = /* @__PURE__ */ new Set();
 const PictographChart = ({
   item,
   widgets,
@@ -18151,7 +18624,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;
@@ -18164,7 +18638,7 @@ const PictographChart = ({
         item: subItem,
         widgets,
         values,
-        droppedInputs: EMPTY_SET,
+        droppedInputs: EMPTY_SET$2,
         validationDetails,
         onChange
       },
@@ -18202,7 +18676,7 @@ const PictographChart = ({
           item: subItem,
           widgets,
           values,
-          droppedInputs: EMPTY_SET,
+          droppedInputs: EMPTY_SET$2,
           validationDetails,
           onChange
         },
@@ -18223,7 +18697,7 @@ const PictographChart = ({
       item: subItem,
       widgets,
       values,
-      droppedInputs: EMPTY_SET,
+      droppedInputs: EMPTY_SET$2,
       validationDetails,
       onChange
     },
@@ -18242,9 +18716,183 @@ const PictographChart = ({
     xAxisTitle
   ] }) }) });
 };
+const GroupSlot = ({
+  group,
+  series,
+  axis,
+  snap,
+  orientation = "vertical",
+  values,
+  validationDetails,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-group", children: series.map((s) => {
+    const bar = group.bars.find((b) => b.seriesId === s.id);
+    if (!bar) {
+      return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "chart-bar-wrapper", children: bar.answer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      DraggableBar,
+      {
+        bar: { ...bar, answer: bar.answer },
+        currentValue,
+        axis,
+        snap,
+        validationStatus,
+        orientation,
+        onChange
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "chart-legend", children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chart-legend-item", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chart-legend-swatch", "aria-hidden": "true", style: { backgroundColor: s.color } }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chart-legend-label", children: s.label?.map((subItem) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: title.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+      LayoutRenderer,
+      {
+        item: subItem,
+        widgets,
+        values,
+        droppedInputs: EMPTY_SET,
+        validationDetails,
+        onChange
+      },
+      subItem.id
+    )) });
+  };
+  const renderGroupSlots = (orient) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-groups", children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+    GroupSlot,
+    {
+      group,
+      series,
+      axis: fillAxis,
+      snap: item.snap,
+      orientation: orient,
+      values,
+      validationDetails,
+      onChange
+    },
+    group.id
+  )) });
+  const legend = item.legend ? /* @__PURE__ */ jsxRuntime.jsx(
+    ChartLegend,
+    {
+      series,
+      widgets,
+      values,
+      validationDetails,
+      onChange
+    }
+  ) : null;
+  if (isHorizontal) {
+    const chartStyle2 = computeGroupedChartStyle(item.scale, groups.length, series.length, "horizontal", isInteractive);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chartClass, dir: "ltr", style: chartStyle2, children: [
+      item.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-title", children: item.title }),
+      categoryAxis?.visible && categoryAxis.title?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-title chart-axis-title--y-h", children: renderAxisTitle(categoryAxis.title) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-y--categories", children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-bar-y-label", children: group.label?.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+        LayoutRenderer,
+        {
+          item: subItem,
+          widgets,
+          values,
+          droppedInputs: EMPTY_SET,
+          validationDetails,
+          onChange
+        },
+        subItem.id
+      )) }, group.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chart-plot", children: [
+        grid && /* @__PURE__ */ jsxRuntime.jsx(Grid, { axis: fillAxis, orientation: "horizontal" }),
+        renderGroupSlots("horizontal")
+      ] }),
+      valueAxis && valueAxis.visible && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "chart-axis-x", children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-tick-x", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-tick-x-inner", children: group.label?.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(
+    LayoutRenderer,
+    {
+      item: subItem,
+      widgets,
+      values,
+      droppedInputs: EMPTY_SET,
+      validationDetails,
+      onChange
+    },
+    subItem.id
+  )) }) }, group.id)) }) : null;
+  const xAxisTitle = categoryAxis?.visible && categoryAxis.title?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-title chart-axis-title--x-category", children: renderAxisTitle(categoryAxis.title) }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-scroll", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chartClass, dir: "ltr", style: chartStyle, children: [
+    item.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-title", children: item.title }),
+    valueAxis?.visible && valueAxis.title?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "chart-axis-title chart-axis-title--y", children: renderAxisTitle(valueAxis.title) }) : null,
+    valueAxis && valueAxis.visible && /* @__PURE__ */ jsxRuntime.jsx(YAxis, { axis: valueAxis }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "chart-plot", children: [
+      grid && /* @__PURE__ */ jsxRuntime.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,
 };
@@ -18927,7 +19575,7 @@ function isGeometryWidget(widget) {
   return widget.type === JSON_TYPES.GEOMETRY;
 }
 const GeometryWidget = React.lazy(async () => ({
-  default: (await Promise.resolve().then(() => require("./GeometryWidget-D2QyGzW-.js"))).GeometryWidget
+  default: (await Promise.resolve().then(() => require("./GeometryWidget-DgPfqyQv.js"))).GeometryWidget
 }));
 const WidgetRenderer = ({
   widget,
@@ -21716,10 +22364,16 @@ exports.ChartBarJSONSchema = ChartBarJSONSchema;
 exports.ChartBarSchema = ChartBarSchema;
 exports.ChartBarWidgetJSONSchema = ChartBarWidgetJSONSchema;
 exports.ChartBlockSchema = ChartBlockSchema;
+exports.ChartGroupJSONSchema = ChartGroupJSONSchema;
+exports.ChartGroupSchema = ChartGroupSchema;
 exports.ChartItemSchema = ChartItemSchema;
 exports.ChartPictoJSONSchema = ChartPictoJSONSchema;
 exports.ChartPictoSchema = ChartPictoSchema;
 exports.ChartPictoWidgetJSONSchema = ChartPictoWidgetJSONSchema;
+exports.ChartSeriesBarJSONSchema = ChartSeriesBarJSONSchema;
+exports.ChartSeriesBarSchema = ChartSeriesBarSchema;
+exports.ChartSeriesJSONSchema = ChartSeriesJSONSchema;
+exports.ChartSeriesSchema = ChartSeriesSchema;
 exports.ClockInlineSchema = ClockInlineSchema;
 exports.ClockItemSchema = ClockItemSchema;
 exports.ColorTextInlineSchema = ColorTextInlineSchema;
@@ -21834,6 +22488,7 @@ exports.VopSeparatorSchema = VopSeparatorSchema;
 exports.WidgetJSONSchema = WidgetJSONSchema;
 exports.WidgetRefSchema = WidgetRefSchema;
 exports.WidgetRenderer = WidgetRenderer;
+exports.alignGroupBarsToSeries = alignGroupBarsToSeries;
 exports.compile = compile;
 exports.compileWithAST = compileWithAST;
 exports.computeGridSymmetryCellsToFill = computeGridSymmetryCellsToFill;
@@ -21842,7 +22497,10 @@ exports.createBoldText = createBoldText;
 exports.createChartAxis = createChartAxis;
 exports.createChartBar = createChartBar;
 exports.createChartBlock = createChartBlock;
+exports.createChartGroup = createChartGroup;
 exports.createChartPicto = createChartPicto;
+exports.createChartSeries = createChartSeries;
+exports.createChartSeriesBar = createChartSeriesBar;
 exports.createColorText = createColorText;
 exports.createDisplayClock = createDisplayClock;
 exports.createDragOptions = createDragOptions;
@@ -21895,9 +22553,12 @@ exports.isChartAxis = isChartAxis;
 exports.isChartBar = isChartBar;
 exports.isChartBarWidgetJSON = isChartBarWidgetJSON;
 exports.isChartBlock = isChartBlock;
+exports.isChartGroup = isChartGroup;
 exports.isChartItem = isChartItem;
 exports.isChartPicto = isChartPicto;
 exports.isChartPictoWidgetJSON = isChartPictoWidgetJSON;
+exports.isChartSeries = isChartSeries;
+exports.isChartSeriesBar = isChartSeriesBar;
 exports.isClock = isClock;
 exports.isClockItem = isClockItem;
 exports.isColorText = isColorText;
@@ -21984,7 +22645,8 @@ exports.validateExpression = validateExpression;
 exports.validateInputFormats = validateInputFormats;
 exports.validateMixed = validateMixed;
 exports.validateSimple = validateSimple;
+exports.validateUniqueIds = validateUniqueIds;
 exports.validateVisualFractionCapacity = validateVisualFractionCapacity;
 exports.validateWidgetJSON = validateWidgetJSON;
 exports.validateWidgetJSONSafe = validateWidgetJSONSafe;
-//# sourceMappingURL=index-D-QbiBn5.js.map
+//# sourceMappingURL=index-tEgJE6m2.js.map