@mathscan/math-exercise-engine 1.2.2 → 1.2.3

package/dist/index.mjs

@@ -77,6 +77,25 @@ const AST_TYPES = {
   /** Visual fraction inline widget */
   VISUAL_FRACTION: "VisualFraction",
   // ═══════════════════════════════════════════════════════════════════════════
+  // Chart
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Generic chart layout block (bar, pictograph, …) */
+  CHART_BLOCK: "ChartBlock",
+  /**
+   * X axis sub-block: when present the Bar label inlines are hidden.
+   * If both X_AXIS and Y_AXIS exist, X_AXIS acts as category axis.
+   */
+  CHART_X_AXIS: "ChartXAxis",
+  /**
+   * Y axis sub-block: value axis for vertical bar charts.
+   * If only X_AXIS is present, the transformer uses a default Y value axis.
+   */
+  CHART_Y_AXIS: "ChartYAxis",
+  /** A single bar inside a CHART[type="bar"] block */
+  CHART_BAR: "ChartBar",
+  /** A single pictograph item inside a CHART[type="pictograph"] block */
+  CHART_PICTO: "ChartPicto",
+  // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
   /** Drag-and-drop options tool */
@@ -171,7 +190,14 @@ const JSON_TYPES = {
   /** Pair-matcher widget (top-row ↔ bottom-row pairing) */
   PAIR_MATCHER: "pair-matcher",
   // ═══════════════════════════════════════════════════════════════════════════
-  // Widget Types
+  // Chart
+  // ═══════════════════════════════════════════════════════════════════════════
+  /** Generic chart block (bar, pictograph, …) */
+  CHART: "chart",
+  /** A single bar rendered inside a chart */
+  CHART_BAR: "chart-bar",
+  /** A single pictograph item rendered inside a chart */
+  CHART_PICTO: "chart-picto",
   // ═══════════════════════════════════════════════════════════════════════════
   /** Inline input widget (string or numeric) */
   INLINE_INPUT: "inline-input",
@@ -424,6 +450,26 @@ const RULER = createToken({
   name: "RULER",
   pattern: /RULER/
 });
+const CHART = createToken({
+  name: "CHART",
+  pattern: /CHART/
+});
+const X_AXIS = createToken({
+  name: "X_AXIS",
+  pattern: /X_AXIS/
+});
+const Y_AXIS = createToken({
+  name: "Y_AXIS",
+  pattern: /Y_AXIS/
+});
+const BAR = createToken({
+  name: "BAR",
+  pattern: /BAR/
+});
+const PICTO = createToken({
+  name: "PICTO",
+  pattern: /PICTO/
+});
 const SEP = createToken({
   name: "SEP",
   pattern: /SEP(?![a-zA-Z0-9_])/
@@ -566,6 +612,11 @@ const allTokens = [
   PROTRACTOR,
   SET_SQUARE,
   RULER,
+  CHART,
+  X_AXIS,
+  Y_AXIS,
+  BAR,
+  PICTO,
   SEP,
   CARRY,
   INPUT,
@@ -735,6 +786,10 @@ class MathExerciseParser extends CstParser {
           GATE: this.BACKTRACK(this.verticalOperation),
           ALT: () => this.SUBRULE(this.verticalOperation)
         },
+        {
+          GATE: this.BACKTRACK(this.chartBlock),
+          ALT: () => this.SUBRULE(this.chartBlock)
+        },
         { ALT: () => this.SUBRULE(this.line) }
       ]);
     });
@@ -1590,6 +1645,168 @@ class MathExerciseParser extends CstParser {
       this.MANY4(() => this.CONSUME4(Space));
       this.CONSUME(RBracket);
     });
+    this.chartBlock = this.RULE("chartBlock", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(CHART);
+      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.MANY5({
+        GATE: () => this.LA(1).tokenType === X_AXIS || this.LA(1).tokenType === Y_AXIS,
+        DEF: () => {
+          this.OR5([
+            { ALT: () => this.SUBRULE(this.chartXAxis) },
+            { ALT: () => this.SUBRULE(this.chartYAxis) }
+          ]);
+        }
+      });
+      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;
+        },
+        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) }
+          ]);
+        }
+      });
+      this.CONSUME(RBrace);
+      this.MANY4(() => {
+        this.OR4([{ ALT: () => this.CONSUME4(Newline) }, { ALT: () => this.CONSUME4(Space) }]);
+      });
+    });
+    this.chartXAxis = this.RULE("chartXAxis", () => {
+      this.CONSUME(X_AXIS);
+      this.OPTION(() => {
+        this.CONSUME(LBracket);
+        this.OPTION2(() => {
+          this.SUBRULE(this.parameterList);
+        });
+        this.CONSUME(RBracket);
+      });
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.OPTION3(() => {
+        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.chartYAxis = this.RULE("chartYAxis", () => {
+      this.CONSUME(Y_AXIS);
+      this.OPTION(() => {
+        this.CONSUME(LBracket);
+        this.OPTION2(() => {
+          this.SUBRULE(this.parameterList);
+        });
+        this.CONSUME(RBracket);
+      });
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.OPTION3(() => {
+        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.chartBarItem = this.RULE("chartBarItem", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(BAR);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+      this.MANY2(() => {
+        this.OR2([{ ALT: () => this.CONSUME2(Space) }, { ALT: () => this.CONSUME2(Newline) }]);
+      });
+      this.OPTION(() => {
+        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.chartPictoItem = this.RULE("chartPictoItem", () => {
+      this.MANY(() => {
+        this.OR([{ ALT: () => this.CONSUME(Space) }, { ALT: () => this.CONSUME(Newline) }]);
+      });
+      this.CONSUME(PICTO);
+      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.performSelfAnalysis();
   }
   /** Distinguish `{[number, number], ...}` and the valid empty form `{}` from string lists. */
@@ -1604,6 +1821,18 @@ class MathExerciseParser extends CstParser {
   }
 }
 const parser = new MathExerciseParser();
+function normalize(value) {
+  if (typeof value === "number") {
+    return String(Math.round(value * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
+  }
+  const trimmed = String(value).trim().toLowerCase().replace(/^["']|["']$/g, "");
+  const asNum = Number(trimmed);
+  if (trimmed !== "" && !isNaN(asNum)) {
+    return String(Math.round(asNum * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
+  }
+  return trimmed;
+}
+const IMAGE_SRC_SCHEME_RE = /^(https?:\/\/|data:image\/)/i;
 function parseOrThrow(schema, data, label) {
   const result = schema.safeParse(data);
   if (!result.success) {
@@ -1673,11 +1902,10 @@ const FractionInlineSchema = z.object({
   simplified: z.boolean().default(true),
   placeholder: z.string().max(32).optional()
 });
-const IMAGE_SRC_SCHEME_RE$1 = /^(https?:\/\/|data:image\/)/i;
 const ImageInlineSchema = z.object({
   type: z.literal(AST_TYPES.IMAGE),
   name: z.string().min(1),
-  src: z.string().url().refine((s) => IMAGE_SRC_SCHEME_RE$1.test(s), {
+  src: z.string().url().refine((s) => IMAGE_SRC_SCHEME_RE.test(s), {
     message: "src must use http(s) or data:image scheme"
   }),
   alt: z.string(),
@@ -2719,6 +2947,350 @@ function isSetSquareTool(value) {
 function isToolNode(value) {
   return ToolNodeSchema.safeParse(value).success;
 }
+const CHART_TYPES = ["bar", "pictograph"];
+const CHART_AXIS_DEFAULTS = { min: 0, max: 100, step: 10, visible: true };
+const CHART_MAX_AXIS_TICKS = 200;
+const CHART_MAX_PICTO_SLOTS = 60;
+const ChartAxisSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_X_AXIS).or(z.literal(AST_TYPES.CHART_Y_AXIS)),
+  min: z.number().optional(),
+  max: z.number().optional(),
+  step: z.number().positive().optional(),
+  /** When false, the entire axis is hidden. Defaults to true. */
+  visible: z.boolean().optional(),
+  /** Inline elements used as the axis title label */
+  inlines: z.array(InlineNodeSchema).default([])
+}).superRefine((axis, ctx) => {
+  if (axis.min !== void 0 && axis.max !== void 0 && axis.min >= axis.max) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `AXIS: min (${axis.min}) must be strictly less than max (${axis.max})`,
+      path: ["min"]
+    });
+  }
+});
+function createChartAxis(axisType, opts) {
+  return ChartAxisSchema.parse({
+    type: axisType,
+    min: opts.min,
+    max: opts.max,
+    step: opts.step,
+    visible: opts.visible,
+    inlines: opts.inlines ?? []
+  });
+}
+function isChartAxis(value) {
+  return ChartAxisSchema.safeParse(value).success;
+}
+const ChartPictoSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_PICTO),
+  id: z.string().min(1),
+  value: z.number().default(0),
+  answer: z.number().optional(),
+  image: z.string().min(1).refine(
+    (s) => IMAGE_SRC_SCHEME_RE.test(s),
+    { message: "image must use http(s) or data:image scheme" }
+  ),
+  inlines: z.array(InlineNodeSchema).default([])
+});
+function createChartPicto(id, opts) {
+  return ChartPictoSchema.parse({
+    type: AST_TYPES.CHART_PICTO,
+    id,
+    value: opts.value ?? 0,
+    answer: opts.answer,
+    image: opts.image,
+    inlines: opts.inlines ?? []
+  });
+}
+function isChartPicto(value) {
+  return ChartPictoSchema.safeParse(value).success;
+}
+const ChartBarSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_BAR),
+  id: z.string().min(1),
+  value: z.number().default(0),
+  answer: z.number().optional(),
+  color: z.string().optional(),
+  inlines: z.array(InlineNodeSchema).default([])
+});
+function createChartBar(id, opts) {
+  return ChartBarSchema.parse({
+    type: AST_TYPES.CHART_BAR,
+    id,
+    value: opts.value ?? 0,
+    answer: opts.answer,
+    color: opts.color,
+    inlines: opts.inlines ?? []
+  });
+}
+function isChartBar(value) {
+  return ChartBarSchema.safeParse(value).success;
+}
+const ChartBlockSchema = z.object({
+  type: z.literal(AST_TYPES.CHART_BLOCK),
+  name: z.string().optional(),
+  title: z.string().optional(),
+  chartType: z.enum(CHART_TYPES),
+  grid: z.boolean().default(false),
+  scale: z.number().positive().default(1),
+  snap: z.number().positive().optional(),
+  xAxis: ChartAxisSchema.optional(),
+  yAxis: ChartAxisSchema.optional(),
+  bars: z.array(ChartBarSchema).default([]),
+  pictos: z.array(ChartPictoSchema).default([])
+}).superRefine((block, ctx) => {
+  validateChartBlock(block, ctx);
+});
+function resolveChartAxes(block) {
+  const horizontal = axisHasNumericParams(block.xAxis) && !axisHasNumericParams(block.yAxis);
+  const orientation = horizontal ? "horizontal" : "vertical";
+  return {
+    orientation,
+    valueAxis: resolveNumericAxis(horizontal ? block.xAxis : block.yAxis),
+    categoryAxis: horizontal ? block.yAxis : block.xAxis
+  };
+}
+function validateChartBlock(block, ctx) {
+  if (hasAmbiguousValueAxes(block)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `CHART[type="${block.chartType}"]: both X_AXIS and Y_AXIS declare numeric params (min/max/step) — ambiguous orientation. Remove params from one axis: the axis with params becomes the value axis.`,
+      path: ["xAxis"]
+    });
+    return;
+  }
+  const { valueAxis } = resolveChartAxes(block);
+  validateValueAxisRange(valueAxis, ctx);
+  if (block.chartType === "bar") {
+    if (block.pictos.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="bar"]: body must contain BAR items only, not PICTO',
+        path: ["pictos"]
+      });
+      return;
+    }
+    if (block.bars.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="bar"]: at least one BAR is required',
+        path: ["bars"]
+      });
+      return;
+    }
+    validateUniqueIds(block.bars, ctx);
+    validateChartSnap(block.snap, valueAxis.step, ctx);
+    validateBarAnswers(block.bars, valueAxis, block.snap, ctx);
+    return;
+  }
+  if (block.chartType === "pictograph") {
+    if (block.bars.length > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: body must contain PICTO items only, not BAR',
+        path: ["bars"]
+      });
+      return;
+    }
+    if (block.pictos.length === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: at least one PICTO is required',
+        path: ["pictos"]
+      });
+      return;
+    }
+    if (block.snap !== void 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: snap is not supported for pictograph charts',
+        path: ["snap"]
+      });
+      return;
+    }
+    validateUniqueIds(block.pictos, ctx);
+    if (!axisHasNumericParams(valueAxis.axis)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'CHART[type="pictograph"]: a value axis with min/max/step is required (e.g. Y_AXIS[min=0, max=8, step=2]) — without it the chart defaults to a 0–100 range and renders 100 icons per column.',
+        path: ["yAxis"]
+      });
+      return;
+    }
+    const slotCount = Math.round(valueAxis.max - valueAxis.min);
+    if (slotCount > CHART_MAX_PICTO_SLOTS) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART[type="pictograph"]: the value axis spans ${slotCount} units, so each column would render ${slotCount} icons — over the ${CHART_MAX_PICTO_SLOTS} limit. Narrow the range.`,
+        path: ["yAxis"]
+      });
+      return;
+    }
+    validatePictoAnswers(block.pictos, valueAxis, ctx);
+    return;
+  }
+  ctx.addIssue({
+    code: z.ZodIssueCode.custom,
+    message: `CHART: unsupported chartType "${block.chartType}" — add a validation branch to validateChartBlock`,
+    path: ["chartType"]
+  });
+}
+function axisHasNumericParams(axis) {
+  return axis?.min !== void 0 || axis?.max !== void 0 || axis?.step !== void 0;
+}
+function resolveNumericAxis(axis) {
+  return {
+    axis,
+    min: axis?.min ?? CHART_AXIS_DEFAULTS.min,
+    max: axis?.max ?? CHART_AXIS_DEFAULTS.max,
+    step: axis?.step ?? CHART_AXIS_DEFAULTS.step
+  };
+}
+function hasAmbiguousValueAxes(block) {
+  return axisHasNumericParams(block.xAxis) && axisHasNumericParams(block.yAxis);
+}
+function validateUniqueIds(items, ctx) {
+  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"]
+      });
+      return;
+    }
+    seen.add(item.id);
+  });
+}
+function validateValueAxisRange(axis, ctx) {
+  if (axis.min >= axis.max) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `CHART: value axis min (${axis.min}) must be strictly less than max (${axis.max})`
+    });
+    return;
+  }
+  const tickCount = Math.floor((axis.max - axis.min) / axis.step) + 1;
+  if (tickCount > CHART_MAX_AXIS_TICKS) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `CHART: value axis would render ${tickCount} ticks ((${axis.max} − ${axis.min}) / step ${axis.step}), over the ${CHART_MAX_AXIS_TICKS} limit — widen the step or narrow the range.`
+    });
+  }
+}
+function validateChartSnap(snap, step, ctx) {
+  if (snap === void 0) return;
+  if (snap > step) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `CHART: snap (${snap}) must be ≤ value-axis step (${step}).`,
+      path: ["snap"]
+    });
+    return;
+  }
+  const remainder = step % snap;
+  if (remainder > 1e-9 && remainder < snap - 1e-9) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `CHART: snap (${snap}) must evenly divide the value-axis step (${step}) — otherwise bars snap to positions between tick marks.`,
+      path: ["snap"]
+    });
+  }
+}
+function validateBarAnswers(bars, valueAxis, snap, ctx) {
+  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"]
+      });
+    }
+    if (bar.answer === void 0) return;
+    if (bar.answer < valueAxis.min || bar.answer > valueAxis.max) {
+      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"]
+      });
+      return;
+    }
+    const offGrid = Math.abs(bar.answer - valueAxis.min) % gridStep;
+    if (offGrid > 1e-9 && offGrid < gridStep - 1e-9) {
+      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"]
+      });
+    }
+  });
+}
+function isOnPictoGrid(value, axisMin) {
+  const offset = value - axisMin;
+  return Math.abs(offset - Math.round(offset)) <= 1e-9;
+}
+function validatePictoAnswers(pictos, valueAxis, ctx) {
+  pictos.forEach((picto, index) => {
+    if (picto.value < valueAxis.min || picto.value > valueAxis.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART: PICTO "${picto.id}" value (${picto.value}) is outside axis range [${valueAxis.min}, ${valueAxis.max}]`,
+        path: ["pictos", index, "value"]
+      });
+    } else if (!isOnPictoGrid(picto.value, valueAxis.min)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART: PICTO "${picto.id}" value (${picto.value}) is not a whole number of icons above the axis minimum (${valueAxis.min}) — icons can't be drawn in fractions.`,
+        path: ["pictos", index, "value"]
+      });
+    }
+    if (picto.answer === void 0) return;
+    if (picto.answer < valueAxis.min || picto.answer > valueAxis.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART: PICTO "${picto.id}" answer (${picto.answer}) is outside axis range [${valueAxis.min}, ${valueAxis.max}] — the student can never reach this value`,
+        path: ["pictos", index, "answer"]
+      });
+      return;
+    }
+    if (!isOnPictoGrid(picto.answer, valueAxis.min)) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART: PICTO "${picto.id}" answer (${picto.answer}) is not a whole number of icons above the axis minimum (${valueAxis.min}) — the student can never land on it.`,
+        path: ["pictos", index, "answer"]
+      });
+      return;
+    }
+    if (picto.answer < picto.value) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `CHART: PICTO "${picto.id}" answer (${picto.answer}) is below its prefilled value (${picto.value}) — prefilled icons can't be removed, so the exercise is unsolvable.`,
+        path: ["pictos", index, "answer"]
+      });
+    }
+  });
+}
+function createChartBlock(chartType, opts = {}) {
+  return ChartBlockSchema.parse({
+    type: AST_TYPES.CHART_BLOCK,
+    name: opts.name,
+    title: opts.title,
+    chartType,
+    grid: opts.grid ?? false,
+    scale: opts.scale ?? 1,
+    snap: opts.snap,
+    xAxis: opts.xAxis,
+    yAxis: opts.yAxis,
+    bars: opts.bars ?? [],
+    pictos: opts.pictos ?? []
+  });
+}
+function isChartBlock(value) {
+  return ChartBlockSchema.safeParse(value).success;
+}
 const RadioOptionsBlockSchema = z.object({
   type: z.literal(AST_TYPES.RADIO_OPTIONS),
   name: z.string(),
@@ -2778,7 +3350,7 @@ function isMixedValidation(value) {
 function isValidationNode(value) {
   return ValidationNodeSchema.safeParse(value).success;
 }
-const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema, GridSymmetryBlockSchema]);
+const ContentBlockSchema = z.union([LineBlockSchema, TableBlockSchema, RadioOptionsBlockSchema, NumberLineBlockSchema, MatcherBlockSchema, PairMatcherBlockSchema, VerticalOperationBlockSchema, GridSymmetryBlockSchema, ChartBlockSchema]);
 const ExerciseDocumentSchema = z.object({
   type: z.literal(AST_TYPES.EXERCISE_DOCUMENT),
   question: TextBlockSchema.optional(),
@@ -2884,6 +3456,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.pairMatcher) return this.visit(ctx.pairMatcher);
     if (ctx.matcher) return this.visit(ctx.matcher);
     if (ctx.verticalOperation) return this.visit(ctx.verticalOperation);
+    if (ctx.chartBlock) return this.visit(ctx.chartBlock);
     if (ctx.line) return this.visit(ctx.line);
     throw new Error("Unknown content block");
   }
@@ -3362,6 +3935,70 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     return createInlineDragOption(value);
   }
   // ═══════════════════════════════════════════════════════════════════════════
+  // Chart Block
+  // ═══════════════════════════════════════════════════════════════════════════
+  chartBlock(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const chartType = params.type;
+    if (!chartType) throw new Error('CHART: type is required ("bar" | "pictograph")');
+    if (!CHART_TYPES.includes(chartType)) {
+      throw new Error(`CHART: type must be one of ${CHART_TYPES.join(", ")} (got "${chartType}")`);
+    }
+    const name = params.name;
+    const title = params.title;
+    const grid = params.grid === true || params.grid === "true";
+    const scale = params.scale !== void 0 ? Number(params.scale) : 1;
+    const snap = params.snap !== void 0 ? Number(params.snap) : void 0;
+    if (ctx.chartXAxis && ctx.chartXAxis.length > 1) {
+      throw new Error("CHART: only one X_AXIS is allowed");
+    }
+    if (ctx.chartYAxis && ctx.chartYAxis.length > 1) {
+      throw new Error("CHART: only one Y_AXIS is allowed");
+    }
+    const xAxis = ctx.chartXAxis ? this.visit(ctx.chartXAxis) : void 0;
+    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 });
+  }
+  /** 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. */
+  buildChartAxis(ctx, astType) {
+    const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
+    const min = params.min !== void 0 ? Number(params.min) : void 0;
+    const max = params.max !== void 0 ? Number(params.max) : void 0;
+    const step = params.step !== void 0 ? Number(params.step) : void 0;
+    const visible = params.visible !== void 0 ? params.visible === true || params.visible === "true" : void 0;
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((e) => this.visit(e)) : [];
+    return createChartAxis(astType, { min, max, step, visible, inlines });
+  }
+  chartXAxis(ctx) {
+    return this.buildChartAxis(ctx, AST_TYPES.CHART_X_AXIS);
+  }
+  chartYAxis(ctx) {
+    return this.buildChartAxis(ctx, AST_TYPES.CHART_Y_AXIS);
+  }
+  chartBarItem(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((e) => this.visit(e)) : [];
+    return createChartBar(params.id, {
+      value: params.value !== void 0 ? Number(params.value) : void 0,
+      answer: params.answer !== void 0 ? Number(params.answer) : void 0,
+      color: params.color,
+      inlines
+    });
+  }
+  chartPictoItem(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const inlines = ctx.inlineElement ? ctx.inlineElement.map((e) => this.visit(e)) : [];
+    return createChartPicto(params.id, {
+      value: params.value !== void 0 ? Number(params.value) : void 0,
+      answer: params.answer !== void 0 ? Number(params.answer) : void 0,
+      image: params.image,
+      inlines
+    });
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
   tool(ctx) {
@@ -3548,7 +4185,6 @@ const BoldTextSchema = z.object({
   value: z.string(),
   highlight: z.tuple([z.number(), z.number()]).optional()
 });
-const IMAGE_SRC_SCHEME_RE = /^(https?:\/\/|data:image\/)/i;
 const ImageItemSchema = z.object({
   id: z.string(),
   type: z.literal(JSON_TYPES.IMAGE),
@@ -3617,7 +4253,8 @@ const LayoutItemSchema = z.lazy(
     TableItemSchema,
     NumberLineItemSchema,
     VerticalOperationItemSchema,
-    ClockItemSchema
+    ClockItemSchema,
+    ChartItemSchema
   ])
 );
 const GroupItemSchema = z.object({
@@ -3790,6 +4427,97 @@ const VerticalOperationItemSchema = z.object({
   cols: z.number().int().positive(),
   items: z.array(z.union([VopRowItemSchema, VopCarryRowItemSchema, VopSeparatorItemSchema]))
 });
+const ChartAxisJSONSchema = z.object({
+  min: z.number().optional(),
+  max: z.number().optional(),
+  step: z.number().positive().optional(),
+  visible: z.boolean().default(true),
+  title: z.array(LayoutItemSchema).optional()
+}).superRefine((axis, ctx) => {
+  const numericFields = [axis.min, axis.max, axis.step];
+  const numericFieldCount = numericFields.filter((value) => value !== void 0).length;
+  if (numericFieldCount > 0 && numericFieldCount < numericFields.length) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "AXIS: min, max, and step must be provided together for a numeric axis"
+    });
+    return;
+  }
+  if (axis.min !== void 0 && axis.max !== void 0 && axis.min >= axis.max) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `AXIS: min (${axis.min}) must be strictly less than max (${axis.max})`,
+      path: ["min"]
+    });
+  }
+});
+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),
+    interactive: z.literal(true),
+    value: z.number(),
+    widgetId: z.string(),
+    color: z.string().optional(),
+    label: z.array(LayoutItemSchema).optional()
+  })
+]);
+const ChartPictoJSONSchema = z.object({
+  id: z.string(),
+  type: z.literal(JSON_TYPES.CHART_PICTO),
+  value: z.number(),
+  answer: z.number().optional(),
+  image: z.string().min(1).refine(
+    (s) => IMAGE_SRC_SCHEME_RE.test(s),
+    { message: "image must use http(s) or data:image scheme" }
+  ),
+  label: z.array(LayoutItemSchema).optional()
+});
+const ChartItemSchema = 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) => {
+  if (item.chartType === "bar" && item.bars.length === 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'CHART[type="bar"]: at least one BAR is required',
+      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" && item.snap !== void 0) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'CHART[type="pictograph"]: snap is not supported for pictograph charts',
+      path: ["snap"]
+    });
+  }
+});
 const StringInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.STRING),
@@ -3848,6 +4576,14 @@ const PairMatcherWidgetJSONSchema = z.object({
     z.array(MatcherItemContentSchema).min(1)
   ])
 });
+const ChartBarWidgetJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.CHART_BAR),
+  value: z.number()
+});
+const ChartPictoWidgetJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.CHART_PICTO),
+  value: z.number()
+});
 const VisualFractionJSONSchema = z.object({
   type: z.literal(JSON_TYPES.VISUAL_FRACTION),
   shape: z.enum(["bar", "circle", "triangle", "grid"]).default("bar"),
@@ -3918,7 +4654,9 @@ const WidgetJSONSchema = z.union([
   GridSymmetryJSONSchema,
   RulerWidgetSchema,
   ProtractorWidgetSchema,
-  SetSquareWidgetSchema
+  SetSquareWidgetSchema,
+  ChartBarWidgetJSONSchema,
+  ChartPictoWidgetJSONSchema
 ]);
 const ValidationJSONSchema = z.object({
   mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION, VALIDATION_MODES.MIXED]),
@@ -4012,6 +4750,9 @@ function isVerticalOperationItem(item) {
 function isClockItem(item) {
   return item.type === JSON_TYPES.CLOCK;
 }
+function isChartItem(item) {
+  return item.type === JSON_TYPES.CHART;
+}
 function isInlineInputJSON(widget) {
   return widget.type === JSON_TYPES.INLINE_INPUT;
 }
@@ -4033,6 +4774,12 @@ function isFractionJSON(widget) {
 function isGridSymmetryJSON(widget) {
   return widget.type === JSON_TYPES.GRID_SYMMETRY;
 }
+function isChartBarWidgetJSON(widget) {
+  return widget.type === JSON_TYPES.CHART_BAR;
+}
+function isChartPictoWidgetJSON(widget) {
+  return widget.type === JSON_TYPES.CHART_PICTO;
+}
 function isRulerWidget(widget) {
   return widget.type === JSON_TYPES.RULER;
 }
@@ -8522,7 +9269,7 @@ lodash.exports;
       function valuesIn(object) {
         return object == null ? [] : baseValues(object, keysIn(object));
       }
-      function clamp(number, lower, upper) {
+      function clamp2(number, lower, upper) {
         if (upper === undefined$1) {
           upper = lower;
           lower = undefined$1;
@@ -9199,7 +9946,7 @@ lodash.exports;
       lodash2.camelCase = camelCase;
       lodash2.capitalize = capitalize;
       lodash2.ceil = ceil;
-      lodash2.clamp = clamp;
+      lodash2.clamp = clamp2;
       lodash2.clone = clone;
       lodash2.cloneDeep = cloneDeep;
       lodash2.cloneDeepWith = cloneDeepWith;
@@ -9623,6 +10370,15 @@ function toJSON(ast) {
         id: idGenerator.generate(JSON_TYPES.LINEBREAK),
         type: JSON_TYPES.LINEBREAK
       });
+    } else if (block.type === AST_TYPES.CHART_BLOCK) {
+      const { item: chartItem, chartWidgets, chartAnswers } = transformChart(
+        block,
+        idGenerator,
+        inlineDragIds
+      );
+      layout.push(chartItem);
+      for (const [id, w] of Object.entries(chartWidgets)) widgets[id] = w;
+      for (const [id, a] of Object.entries(chartAnswers)) answers[id] = a;
     } else if (block.type === AST_TYPES.RADIO_OPTIONS) {
       const radioBlock = block;
       layout.push({
@@ -9771,12 +10527,18 @@ function toJSON(ast) {
       }
     }
   }
+  let validationSection = {};
+  if (ast.validation) {
+    validationSection = { validation: transformValidation(ast.validation, answers, widgets) };
+  } else if (Object.keys(answers).length > 0) {
+    validationSection = { validation: { mode: VALIDATION_MODES.SIMPLE, answers } };
+  }
   return {
     version: "2.0",
     // Natural DSL version
     layout,
     widgets,
-    ...ast.validation ? { validation: transformValidation(ast.validation, answers, widgets) } : {}
+    ...validationSection
   };
 }
 function collectAllInlines(blocks) {
@@ -9809,10 +10571,100 @@ function collectAllInlines(blocks) {
       for (const item of pm.groups.flat()) {
         result.push(...item.inlines);
       }
+    } else if (block.type === AST_TYPES.CHART_BLOCK) {
+      const chart = block;
+      for (const bar of chart.bars) result.push(...bar.inlines);
+      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);
     }
   }
   return result;
 }
+function transformChart(block, idGenerator, inlineDragIds) {
+  const { orientation, valueAxis, categoryAxis } = resolveChartAxes(block);
+  function transformAxisTitle(axis) {
+    return axis !== void 0 && axis.inlines.length > 0 ? axis.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds)) : void 0;
+  }
+  function transformNumericAxis(axis) {
+    const title = transformAxisTitle(axis.axis);
+    return {
+      min: axis.min,
+      max: axis.max,
+      step: axis.step,
+      visible: axis.axis?.visible ?? true,
+      ...title !== void 0 && { title }
+    };
+  }
+  function transformCategoryAxis(axis) {
+    const title = transformAxisTitle(axis);
+    const visible = axis?.visible ?? true;
+    if (!title && visible) return void 0;
+    return { visible, ...title && { title } };
+  }
+  function toLabel(inlines) {
+    return inlines.length > 0 ? inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds)) : void 0;
+  }
+  const xAxis = orientation === "horizontal" ? transformNumericAxis(valueAxis) : transformCategoryAxis(categoryAxis);
+  const yAxis = orientation === "horizontal" ? transformCategoryAxis(categoryAxis) : transformNumericAxis(valueAxis);
+  const chartWidgets = {};
+  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 {
+      id: bar.id,
+      type: JSON_TYPES.CHART_BAR,
+      interactive: false,
+      value: bar.value,
+      ...bar.color !== void 0 && { color: bar.color },
+      ...label !== void 0 && { label }
+    };
+  });
+  const pictos = block.pictos.map((picto) => {
+    const label = toLabel(picto.inlines);
+    if (picto.answer !== void 0) {
+      chartWidgets[picto.id] = { type: JSON_TYPES.CHART_PICTO, value: picto.value };
+      chartAnswers[picto.id] = picto.answer;
+    }
+    return {
+      id: picto.id,
+      type: JSON_TYPES.CHART_PICTO,
+      value: picto.value,
+      image: picto.image,
+      ...picto.answer !== void 0 && { answer: picto.answer },
+      ...label !== void 0 && { label }
+    };
+  });
+  const item = {
+    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
+  };
+  return { item, chartWidgets, chartAnswers };
+}
 function transformNumberLine(numberLine, idGenerator, inlineDragIds) {
   const positions = numberLine.positions.map((pos) => {
     const content = pos.inlines.map((inline) => transformInline(inline, idGenerator, inlineDragIds));
@@ -10179,17 +11031,6 @@ function extractVariables$1(expression, validVariables) {
   }
   return uniqueVars;
 }
-function normalize(value) {
-  if (typeof value === "number") {
-    return String(Math.round(value * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
-  }
-  const trimmed = String(value).trim().toLowerCase().replace(/^["']|["']$/g, "");
-  const asNum = Number(trimmed);
-  if (trimmed !== "" && !isNaN(asNum)) {
-    return String(Math.round(asNum * 10 ** INTERNAL_PRECISION) / 10 ** INTERNAL_PRECISION);
-  }
-  return trimmed;
-}
 const NL_DRAG_PREFIX = "\0nl-drag\0";
 const isNLDragEncoded = (v) => v.startsWith(NL_DRAG_PREFIX);
 const encodeNLDragValue = (label, position) => `${NL_DRAG_PREFIX}${label}@${String(position)}`;
@@ -10338,16 +11179,6 @@ function validateSimple(exercise, userInputs) {
       allCorrect = false;
     }
   }
-  for (const widgetId of Object.keys(userInputs)) {
-    if (!(widgetId in answers) && !(widgetId in details)) {
-      details[widgetId] = {
-        widgetId,
-        userValue: userInputs[widgetId],
-        isCorrect: true
-        // No validation rule = assume correct
-      };
-    }
-  }
   return {
     isCorrect: allCorrect,
     details,
@@ -14521,7 +15352,9 @@ const DEFAULT_SOUNDS = {
   "input-select": inputSelect,
   "answer-correct": answerCorrect,
   "answer-wrong": answerWrong,
-  "answer-reveal": answerReveal
+  "answer-reveal": answerReveal,
+  "bar-step": buttonClick,
+  "bar-release": dragDrop
 };
 function resolveSounds(overrides) {
   return overrides ? { ...DEFAULT_SOUNDS, ...overrides } : DEFAULT_SOUNDS;
@@ -14806,27 +15639,41 @@ function useRotate(options) {
   return { rotation, setRotation };
 }
 const REPEAT_DELAY_MS = 5e3;
-function useJiggle(isDragging) {
+function useJiggle(isDiscovered, options = {}) {
+  const {
+    ignoreBubbledAnimationEnd = false,
+    repeatDelayMs = REPEAT_DELAY_MS
+  } = options;
   const [jiggling, setJiggling] = useState(true);
   const [discovered, setDiscovered] = useState(false);
+  const discoveredRef = useRef(false);
   const timerRef = useRef(null);
-  useEffect(() => {
-    if (isDragging && !discovered) {
-      setDiscovered(true);
-      if (timerRef.current) clearTimeout(timerRef.current);
-      setJiggling(false);
-    }
-  }, [isDragging, discovered]);
-  useEffect(() => () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
+  const clearRepeatTimer = useCallback(() => {
+    if (!timerRef.current) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
   }, []);
-  const onAnimationEnd = useCallback(() => {
+  const discover = useCallback(() => {
+    discoveredRef.current = true;
+    clearRepeatTimer();
+    setDiscovered(true);
     setJiggling(false);
-    if (!discovered) {
-      timerRef.current = setTimeout(() => setJiggling(true), REPEAT_DELAY_MS);
-    }
-  }, [discovered]);
-  return { jiggling, onAnimationEnd };
+  }, [clearRepeatTimer]);
+  useEffect(() => {
+    if (isDiscovered) discover();
+  }, [isDiscovered, discover]);
+  useEffect(() => () => clearRepeatTimer(), [clearRepeatTimer]);
+  const onAnimationEnd = useCallback((event) => {
+    if (ignoreBubbledAnimationEnd && event && event.currentTarget !== event.target) return;
+    setJiggling(false);
+    if (discoveredRef.current) return;
+    clearRepeatTimer();
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      if (!discoveredRef.current) setJiggling(true);
+    }, repeatDelayMs);
+  }, [clearRepeatTimer, ignoreBubbledAnimationEnd, repeatDelayMs]);
+  return { jiggling: jiggling && !discovered, onAnimationEnd, discover };
 }
 const VW$2 = 320;
 const VH$2 = 44;
@@ -16331,6 +17178,743 @@ const GridSymmetry = ({
     }
   ) });
 };
+function getChartClassName(item) {
+  const isHorizontal = item.orientation === "horizontal";
+  return [
+    "chart",
+    isHorizontal ? "chart--horizontal" : "",
+    item.chartType === "pictograph" ? "chart--pictograph" : "",
+    item.xAxis?.visible === false ? "chart--no-xaxis" : "",
+    item.yAxis?.visible === false ? "chart--no-yaxis" : ""
+  ].filter(Boolean).join(" ");
+}
+function resolveItemValue(id, defaultValue2, values) {
+  const raw = values[id];
+  const parsed = parseFloat(raw ?? "");
+  return isNaN(parsed) ? defaultValue2 : parsed;
+}
+function resolveValue(bar, values) {
+  return bar.interactive ? resolveItemValue(bar.widgetId, bar.value, values) : bar.value;
+}
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function snapToStep(v, min, step) {
+  const snapped = min + Math.round((v - min) / step) * step;
+  return +snapped.toFixed(10);
+}
+function nextStepValue(v, axis, direction, snap) {
+  const min = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const max = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  const step = snap ?? axis.step ?? CHART_AXIS_DEFAULTS.step;
+  const raw = direction === 1 ? min + Math.ceil((v - min) / step + 1e-9) * step : min + Math.floor((v - min) / step - 1e-9) * step;
+  return +clamp(raw, min, max).toFixed(10);
+}
+function toFill(v, axis) {
+  const min = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const max = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  return clamp((v - min) / (max - min), 0, 1);
+}
+function barClasses(base, validationStatus) {
+  const statusClass = validationStatus === "correct" ? "chart-bar-correct" : validationStatus === "incorrect" ? "chart-bar-incorrect" : null;
+  return [...base, ...statusClass ? [statusClass] : []].join(" ");
+}
+function buildAxisTicks(axis) {
+  const min = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const max = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  const step = axis.step ?? CHART_AXIS_DEFAULTS.step;
+  const ticks = [];
+  for (let v = min; v <= max + 1e-9; v = +(v + step).toFixed(10)) {
+    ticks.push(v);
+  }
+  if (ticks.length === 0 || Math.abs(ticks[ticks.length - 1] - max) > 1e-9) {
+    ticks.push(max);
+  }
+  return ticks;
+}
+function axisTickPercent(value, axis) {
+  const min = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const max = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  return (value - min) / (max - min) * 100;
+}
+function buildAxisTickPositions(axis) {
+  return buildAxisTicks(axis).map((value) => ({
+    value,
+    percent: axisTickPercent(value, axis)
+  }));
+}
+function formatAxisTick(value) {
+  return Number.isInteger(value) ? value : parseFloat(value.toPrecision(10));
+}
+const CHART_METRICS = {
+  scaleMin: 0.6,
+  scaleMax: 1.6,
+  slotWidth: 5.2,
+  gapWidth: 1,
+  axisWidth: 2.35,
+  barWidth: 3.35,
+  fontSize: 0.9,
+  labelFontSize: 0.98,
+  handleSize: 1.15,
+  chartHeight: 16
+};
+function computeBaseChartVars(scale, barCount) {
+  const visualScale = clamp(scale, CHART_METRICS.scaleMin, CHART_METRICS.scaleMax);
+  const slotWidth = CHART_METRICS.slotWidth * visualScale;
+  const gapWidth = CHART_METRICS.gapWidth * visualScale;
+  const trackLength = barCount * slotWidth + Math.max(0, barCount - 1) * gapWidth + gapWidth * 2;
+  return {
+    visualScale,
+    trackLength,
+    cssVars: {
+      "--chart-axis-width": `${CHART_METRICS.axisWidth * visualScale}rem`,
+      "--chart-bar-slot-width": `${slotWidth}rem`,
+      "--chart-bar-width": `${CHART_METRICS.barWidth * visualScale}rem`,
+      "--chart-bar-gap": `${gapWidth}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`
+    }
+  };
+}
+function computeChartStyle(scale, barCount) {
+  const { trackLength, visualScale, cssVars } = computeBaseChartVars(scale, barCount);
+  return {
+    ...cssVars,
+    "--chart-height": `${CHART_METRICS.chartHeight * visualScale}rem`,
+    "--chart-content-width": `${trackLength}rem`
+  };
+}
+function computePictographChartStyle(scale, columnCount, totalSlots, orientation = "vertical") {
+  const slots = Math.max(0, totalSlots);
+  const gaps = Math.max(0, slots - 1);
+  const slotSpan = `calc(${slots} * var(--picto-cell-size) + ${gaps} * var(--picto-cell-gap))`;
+  if (orientation === "horizontal") {
+    return {
+      ...computeHorizontalChartStyle(scale, columnCount),
+      "--picto-total-slots": slots,
+      // Horizontal columns run along the width, so the value axis is the width here.
+      // Both vars move together to keep the X-axis ticks aligned with the icons.
+      "--chart-h-value-width": slotSpan,
+      "--chart-content-width": slotSpan
+    };
+  }
+  return {
+    ...computeChartStyle(scale, columnCount),
+    "--picto-total-slots": slots,
+    "--chart-height": slotSpan
+  };
+}
+function computeHorizontalChartStyle(scale, barCount) {
+  const { trackLength, visualScale, cssVars } = computeBaseChartVars(scale, barCount);
+  const valueWidth = CHART_METRICS.chartHeight * visualScale;
+  return {
+    ...cssVars,
+    "--chart-height": `${trackLength}rem`,
+    "--chart-h-value-width": `${valueWidth}rem`,
+    "--chart-content-width": `${valueWidth}rem`
+  };
+}
+const YAxis = ({ axis }) => {
+  const ticks = buildAxisTickPositions(axis);
+  return /* @__PURE__ */ jsx("div", { className: "chart-axis-y", children: ticks.map(({ value, percent }) => /* @__PURE__ */ jsx("span", { className: "chart-axis-tick-y", style: { bottom: `${percent}%` }, children: formatAxisTick(value) }, value)) });
+};
+const Grid = ({ axis, orientation = "vertical" }) => {
+  const lines = buildAxisTickPositions(axis);
+  return /* @__PURE__ */ jsx(Fragment, { children: lines.map(({ value, percent }) => {
+    const style = orientation === "horizontal" ? { left: `${percent}%` } : { bottom: `${percent}%` };
+    return /* @__PURE__ */ jsx("div", { className: "chart-gridline", style }, value);
+  }) });
+};
+const XAxis = ({ axis, title }) => {
+  const ticks = buildAxisTickPositions(axis);
+  return /* @__PURE__ */ jsxs("div", { className: "chart-axis-x-numeric", children: [
+    /* @__PURE__ */ jsx("div", { className: "chart-axis-x-numeric-ticks", children: ticks.map(({ value, percent }) => /* @__PURE__ */ jsx("span", { className: "chart-axis-tick-x-num", style: { left: `${percent}%` }, children: formatAxisTick(value) }, value)) }),
+    title && /* @__PURE__ */ jsx("div", { className: "chart-axis-title chart-axis-title--x", children: title })
+  ] });
+};
+const DraggableBar = ({
+  bar,
+  currentValue,
+  axis,
+  snap,
+  validationStatus,
+  orientation = "vertical",
+  onChange
+}) => {
+  const trackRef = useRef(null);
+  const dragging = useRef(false);
+  const lastSnap = useRef(null);
+  const preDragValue = useRef(0);
+  const playSound = useSound();
+  const exerciseLocked = useExerciseLocked();
+  const [isDragging, setIsDragging] = useState(false);
+  const { jiggling, onAnimationEnd, discover } = useJiggle(isDragging, {
+    ignoreBubbledAnimationEnd: true
+  });
+  const axisMin = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const axisMax = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  const axisStep = axis.step ?? CHART_AXIS_DEFAULTS.step;
+  const snapStep = snap ?? axisStep;
+  const fillFromPointer = useCallback(
+    (clientY, clientX) => {
+      const track = trackRef.current;
+      if (!track) return;
+      const rect = track.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
+      let ratio;
+      if (orientation === "horizontal") {
+        ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+      } else {
+        ratio = clamp(1 - (clientY - rect.top) / rect.height, 0, 1);
+      }
+      const rawValue = axisMin + ratio * (axisMax - axisMin);
+      const snapped = clamp(snapToStep(rawValue, axisMin, snapStep), axisMin, axisMax);
+      if (snapped !== lastSnap.current) {
+        lastSnap.current = snapped;
+        playSound("bar-step");
+        onChange(bar.widgetId, String(snapped));
+      }
+    },
+    [axisMin, axisMax, snapStep, bar.widgetId, onChange, orientation, playSound]
+  );
+  const onPointerDown = useCallback(
+    (e) => {
+      if (exerciseLocked) return;
+      e.preventDefault();
+      discover();
+      dragging.current = true;
+      preDragValue.current = currentValue;
+      lastSnap.current = clamp(snapToStep(currentValue, axisMin, snapStep), axisMin, axisMax);
+      setIsDragging(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+      fillFromPointer(e.clientY, e.clientX);
+    },
+    [fillFromPointer, currentValue, axisMin, axisMax, snapStep, discover, exerciseLocked]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!dragging.current) return;
+      fillFromPointer(e.clientY, e.clientX);
+    },
+    [fillFromPointer]
+  );
+  const onPointerUp = useCallback(() => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    setIsDragging(false);
+    playSound("bar-release");
+  }, [playSound]);
+  const onPointerCancel = useCallback(() => {
+    if (!dragging.current) return;
+    dragging.current = false;
+    setIsDragging(false);
+    onChange(bar.widgetId, String(preDragValue.current));
+  }, [bar.widgetId, onChange]);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (exerciseLocked) return;
+      const isInc = e.key === "ArrowUp" || e.key === "ArrowRight";
+      const isDec = e.key === "ArrowDown" || e.key === "ArrowLeft";
+      if (isInc) {
+        e.preventDefault();
+        playSound("bar-step");
+        onChange(bar.widgetId, String(nextStepValue(currentValue, axis, 1, snap)));
+      } else if (isDec) {
+        e.preventDefault();
+        playSound("bar-step");
+        onChange(bar.widgetId, String(nextStepValue(currentValue, axis, -1, snap)));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        playSound("bar-step");
+        onChange(bar.widgetId, String(axisMin));
+      } else if (e.key === "End") {
+        e.preventDefault();
+        playSound("bar-step");
+        onChange(bar.widgetId, String(axisMax));
+      }
+    },
+    [axisMin, axisMax, bar.widgetId, currentValue, axis, snap, onChange, playSound, exerciseLocked]
+  );
+  const fill = toFill(currentValue, axis);
+  const isAtMin = currentValue <= axisMin;
+  const ariaLabel = bar.label?.map((item) => "value" in item ? String(item.value) : "").filter(Boolean).join(" ") || bar.id;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: trackRef,
+      className: "chart-bar-track chart-bar-track--interactive",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "slider",
+          tabIndex: 0,
+          "aria-valuemin": axisMin,
+          "aria-valuemax": axisMax,
+          "aria-valuenow": currentValue,
+          "aria-orientation": orientation === "horizontal" ? "horizontal" : "vertical",
+          "aria-label": ariaLabel,
+          "aria-disabled": exerciseLocked ? "true" : void 0,
+          className: barClasses(
+            [
+              "chart-bar",
+              orientation === "horizontal" ? "chart-bar--horizontal" : "chart-bar--vertical",
+              "chart-bar-interactive",
+              isAtMin ? "chart-bar-at-min" : "",
+              jiggling && !isDragging && !exerciseLocked && validationStatus === null ? "chart-bar--peek" : ""
+            ],
+            validationStatus
+          ),
+          onAnimationEnd,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel,
+          onKeyDown,
+          style: {
+            "--bar-fill": fill,
+            "--chart-bar-instance-color": bar.color ?? "var(--chart-bar-color)"
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "chart-bar-handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+            /* @__PURE__ */ jsx("path", { d: "M1.5 4.8 L5 1.5 L8.5 4.8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx("path", { d: "M1.5 8.5 L5 5.2 L8.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] }) })
+        }
+      )
+    }
+  );
+};
+const StaticBar = ({
+  bar,
+  currentValue,
+  axis,
+  validationStatus,
+  orientation = "vertical"
+}) => {
+  const fill = toFill(currentValue, axis);
+  return /* @__PURE__ */ jsx("div", { className: "chart-bar-track", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: barClasses(
+        [
+          "chart-bar",
+          orientation === "horizontal" ? "chart-bar--horizontal" : "chart-bar--vertical"
+        ],
+        validationStatus
+      ),
+      style: {
+        "--bar-fill": fill,
+        "--chart-bar-instance-color": bar.color ?? "var(--chart-bar-color)",
+        backgroundColor: "var(--chart-bar-instance-color)"
+      }
+    }
+  ) });
+};
+const EMPTY_SET$2 = /* @__PURE__ */ new Set();
+const XAxisLabel = ({
+  bar,
+  widgets,
+  values,
+  validationDetails,
+  onChange
+}) => {
+  if (!bar.label || bar.label.length === 0) return /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x" });
+  return /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x", children: /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x-inner", children: bar.label.map((subItem) => /* @__PURE__ */ jsx(
+    LayoutRenderer,
+    {
+      item: subItem,
+      widgets,
+      values,
+      droppedInputs: EMPTY_SET$2,
+      validationDetails,
+      onChange
+    },
+    subItem.id
+  )) }) });
+};
+const EMPTY_SET$1 = /* @__PURE__ */ new Set();
+const BarChart = ({
+  item,
+  widgets,
+  values,
+  validationDetails,
+  onChange
+}) => {
+  const { bars, grid } = item;
+  const isHorizontal = item.orientation === "horizontal";
+  const valueAxis = isHorizontal ? item.xAxis : item.yAxis;
+  const categoryAxis = isHorizontal ? item.yAxis : item.xAxis;
+  const chartClass = getChartClassName(item);
+  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$1,
+        validationDetails,
+        onChange
+      },
+      subItem.id
+    )) });
+  };
+  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 validationStatus = vStatus?.isCorrect === true ? "correct" : vStatus?.isCorrect === false ? "incorrect" : null;
+    return /* @__PURE__ */ jsx("div", { className: "chart-bar-wrapper", children: bar.interactive ? /* @__PURE__ */ jsx(
+      DraggableBar,
+      {
+        bar,
+        currentValue,
+        axis: fillAxis,
+        snap: item.snap,
+        validationStatus,
+        orientation: orient,
+        onChange
+      }
+    ) : /* @__PURE__ */ jsx(
+      StaticBar,
+      {
+        bar,
+        currentValue,
+        axis: fillAxis,
+        validationStatus,
+        orientation: orient
+      }
+    ) }, bar.id);
+  };
+  if (isHorizontal) {
+    const chartStyle2 = computeHorizontalChartStyle(item.scale, bars.length);
+    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: bars.map((bar) => /* @__PURE__ */ jsx("div", { className: "chart-bar-y-label", children: bar.label?.map((subItem) => /* @__PURE__ */ jsx(
+        LayoutRenderer,
+        {
+          item: subItem,
+          widgets,
+          values,
+          droppedInputs: EMPTY_SET$1,
+          validationDetails,
+          onChange
+        },
+        subItem.id
+      )) }, bar.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "chart-plot", children: [
+        grid && /* @__PURE__ */ jsx(Grid, { axis: fillAxis, orientation: "horizontal" }),
+        /* @__PURE__ */ jsx("div", { className: "chart-bars", children: bars.map((b) => renderBar(b, "horizontal")) })
+      ] }),
+      valueAxis && valueAxis.visible && /* @__PURE__ */ jsx(XAxis, { axis: valueAxis, title: renderAxisTitle(valueAxis.title) })
+    ] }) }) });
+  }
+  const chartStyle = computeChartStyle(item.scale, bars.length);
+  const hasAnyLabel = bars.some((b) => b.label && b.label.length > 0);
+  const xAxisRow = hasAnyLabel ? /* @__PURE__ */ jsx("div", { className: "chart-axis-x", children: bars.map((bar) => /* @__PURE__ */ jsx(
+    XAxisLabel,
+    {
+      bar,
+      widgets,
+      values,
+      validationDetails,
+      onChange
+    },
+    bar.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 }),
+      /* @__PURE__ */ jsx("div", { className: "chart-bars", children: bars.map((b) => renderBar(b)) })
+    ] }),
+    xAxisRow,
+    xAxisTitle
+  ] }) }) });
+};
+const clampSlotCount = (value, axisMin, totalSlots) => Math.round(Math.min(Math.max(value - axisMin, 0), totalSlots));
+const buildSelectedAnswerSlots = (totalSlots, baseFilledCount, selectedCount) => {
+  const slots = Array.from({ length: totalSlots }, () => false);
+  const end = Math.min(totalSlots, baseFilledCount + selectedCount);
+  for (let i = baseFilledCount; i < end; i++) slots[i] = true;
+  return slots;
+};
+const PictographColumn = ({
+  picto,
+  currentValue,
+  axis,
+  validationStatus,
+  orientation = "vertical",
+  onChange
+}) => {
+  const axisMin = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const axisMax = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  const isInteractive = picto.answer !== void 0;
+  const totalSlots = Math.round(axisMax - axisMin);
+  const baseFilledCount = clampSlotCount(picto.value, axisMin, totalSlots);
+  const currentFilledCount = clampSlotCount(currentValue, axisMin, totalSlots);
+  const answerSlotCount = Math.max(0, totalSlots - baseFilledCount);
+  const selectedAnswerCount = Math.min(
+    Math.max(currentFilledCount - baseFilledCount, 0),
+    answerSlotCount
+  );
+  const [selectedSlots, setSelectedSlots] = useState(
+    () => buildSelectedAnswerSlots(totalSlots, baseFilledCount, selectedAnswerCount)
+  );
+  const lastInternalValueRef = useRef(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const { jiggling: hinting, onAnimationEnd: onHintEnd } = useJiggle(hasInteracted);
+  const playSound = useSound();
+  const exerciseLocked = useExerciseLocked();
+  useEffect(() => {
+    const nextValue = String(axisMin + baseFilledCount + selectedAnswerCount);
+    if (nextValue === lastInternalValueRef.current) return;
+    lastInternalValueRef.current = null;
+    setSelectedSlots(buildSelectedAnswerSlots(totalSlots, baseFilledCount, selectedAnswerCount));
+  }, [axisMin, baseFilledCount, selectedAnswerCount, totalSlots]);
+  const handleCellClick = useCallback(
+    (cellIndex) => {
+      if (exerciseLocked || !isInteractive || cellIndex < baseFilledCount) return;
+      if (!hasInteracted) setHasInteracted(true);
+      const slotRelative = cellIndex - baseFilledCount;
+      const isCurrentlyFilled = Boolean(selectedSlots[cellIndex]);
+      const nextCount = isCurrentlyFilled ? slotRelative : slotRelative + 1;
+      const nextSlots = buildSelectedAnswerSlots(totalSlots, baseFilledCount, nextCount);
+      const nextValue = axisMin + baseFilledCount + nextCount;
+      lastInternalValueRef.current = String(nextValue);
+      setSelectedSlots(nextSlots);
+      onChange(picto.id, String(nextValue));
+      playSound("fraction-shade");
+    },
+    [exerciseLocked, isInteractive, baseFilledCount, totalSlots, selectedSlots, axisMin, onChange, picto.id, playSound, hasInteracted]
+  );
+  const statusClass = validationStatus === "correct" ? "picto-column--correct" : validationStatus === "incorrect" ? "picto-column--incorrect" : "";
+  const cellCount = isInteractive ? totalSlots : currentFilledCount;
+  const cells = Array.from({ length: cellCount }, (_, i) => {
+    const isPrefilled = isInteractive ? i < baseFilledCount : i < currentFilledCount;
+    const isSelectedAnswer = isInteractive && i >= baseFilledCount && Boolean(selectedSlots[i]);
+    const canToggle = isInteractive && i >= baseFilledCount;
+    const isActive = isPrefilled || isSelectedAnswer;
+    const isInactiveFn = !isActive && isInteractive;
+    const isLastInteractive = canToggle && i === cellCount - 1;
+    const animClass = validationStatus === "correct" && isActive ? "picto-cell--pop" : validationStatus === "incorrect" && isActive ? "picto-cell--jiggle" : hinting && validationStatus === null && !exerciseLocked && canToggle && !isActive ? "picto-cell--hint" : "";
+    const cellClass = [
+      "picto-cell",
+      isInactiveFn ? "picto-cell--inactive" : "",
+      canToggle ? "picto-cell--interactive" : "",
+      isInteractive && !canToggle ? "picto-cell--locked" : "",
+      animClass
+    ].filter(Boolean).join(" ");
+    const imgStyle = animClass === "picto-cell--pop" || animClass === "picto-cell--jiggle" ? { animationDelay: `${i * 50}ms` } : animClass === "picto-cell--hint" ? { animationDelay: `${(i - baseFilledCount) * 80}ms` } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cellClass,
+        onClick: canToggle ? () => handleCellClick(i) : void 0,
+        role: isInteractive ? "checkbox" : void 0,
+        "aria-checked": isInteractive ? isActive : void 0,
+        "aria-disabled": isInteractive && (!canToggle || exerciseLocked) ? true : void 0,
+        "aria-label": isInteractive ? `${picto.id} icon ${i + 1}` : void 0,
+        tabIndex: canToggle ? 0 : void 0,
+        onKeyDown: canToggle ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleCellClick(i);
+          }
+        } : void 0,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: picto.image,
+            alt: "",
+            "aria-hidden": "true",
+            style: imgStyle,
+            onAnimationEnd: isLastInteractive && animClass === "picto-cell--hint" ? onHintEnd : void 0
+          }
+        )
+      },
+      i
+    );
+  });
+  const columnClass = [
+    "chart-picto-column-wrapper",
+    orientation === "horizontal" ? "chart-picto-column-wrapper--h" : "",
+    statusClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: columnClass, children: /* @__PURE__ */ jsx("div", { className: `chart-picto-cells${orientation === "horizontal" ? " chart-picto-cells--h" : ""}`, children: cells }) });
+};
+const PictographGrid = ({
+  axis,
+  columnCount,
+  orientation = "vertical"
+}) => {
+  const axisMin = axis.min ?? CHART_AXIS_DEFAULTS.min;
+  const axisMax = axis.max ?? CHART_AXIS_DEFAULTS.max;
+  const totalSlots = Math.round(axisMax - axisMin);
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      Array.from({ length: columnCount - 1 }, (_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "picto-gridline picto-gridline--row",
+          style: {
+            top: `calc(var(--chart-bar-gap) + ${i + 1} * (var(--chart-bar-slot-width) + var(--chart-bar-gap)))`
+          }
+        },
+        `row-${i}`
+      )),
+      Array.from({ length: totalSlots - 1 }, (_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "picto-gridline picto-gridline--col",
+          style: {
+            left: `calc(${i + 1} * (var(--picto-cell-size) + var(--picto-cell-gap)))`
+          }
+        },
+        `col-${i}`
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Array.from({ length: totalSlots - 1 }, (_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "picto-gridline picto-gridline--row",
+        style: {
+          bottom: `calc(${i + 1} * (var(--picto-cell-size) + var(--picto-cell-gap)))`
+        }
+      },
+      `row-${i}`
+    )),
+    Array.from({ length: columnCount - 1 }, (_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "picto-gridline picto-gridline--col",
+        style: {
+          left: `calc(var(--chart-bar-gap) + ${i + 1} * (var(--chart-bar-slot-width) + var(--chart-bar-gap)))`
+        }
+      },
+      `col-${i}`
+    ))
+  ] });
+};
+const EMPTY_SET = /* @__PURE__ */ new Set();
+const PictographChart = ({
+  item,
+  widgets,
+  values,
+  validationDetails,
+  onChange
+}) => {
+  const { pictos = [], grid } = item;
+  const isHorizontal = item.orientation === "horizontal";
+  const valueAxis = isHorizontal ? item.xAxis : item.yAxis;
+  const categoryAxis = isHorizontal ? item.yAxis : item.xAxis;
+  const chartClass = getChartClassName(item);
+  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 fillAxis = valueAxis ?? CHART_AXIS_DEFAULTS;
+  const totalSlots = Math.round(
+    (fillAxis.max ?? CHART_AXIS_DEFAULTS.max) - (fillAxis.min ?? CHART_AXIS_DEFAULTS.min)
+  );
+  const renderColumn = (picto, orient = "vertical") => {
+    const currentValue = resolveItemValue(picto.id, picto.value, values);
+    const vStatus = picto.answer !== void 0 ? validationDetails?.[picto.id] : void 0;
+    const validationStatus = vStatus?.isCorrect === true ? "correct" : vStatus?.isCorrect === false ? "incorrect" : null;
+    return /* @__PURE__ */ jsx("div", { className: "chart-bar-wrapper", children: /* @__PURE__ */ jsx(
+      PictographColumn,
+      {
+        picto,
+        currentValue,
+        axis: fillAxis,
+        validationStatus,
+        orientation: orient,
+        onChange
+      }
+    ) }, picto.id);
+  };
+  if (isHorizontal) {
+    const chartStyle2 = computePictographChartStyle(item.scale, pictos.length, totalSlots, "horizontal");
+    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: pictos.map((picto) => /* @__PURE__ */ jsx("div", { className: "chart-bar-y-label", children: picto.label?.map((subItem) => /* @__PURE__ */ jsx(
+        LayoutRenderer,
+        {
+          item: subItem,
+          widgets,
+          values,
+          droppedInputs: EMPTY_SET,
+          validationDetails,
+          onChange
+        },
+        subItem.id
+      )) }, picto.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "chart-plot", children: [
+        grid && /* @__PURE__ */ jsx(PictographGrid, { axis: fillAxis, columnCount: pictos.length, orientation: "horizontal" }),
+        /* @__PURE__ */ jsx("div", { className: "chart-bars", children: pictos.map((p) => renderColumn(p, "horizontal")) })
+      ] }),
+      valueAxis && valueAxis.visible && /* @__PURE__ */ jsx(XAxis, { axis: valueAxis, title: renderAxisTitle(valueAxis.title) })
+    ] }) }) });
+  }
+  const chartStyle = computePictographChartStyle(item.scale, pictos.length, totalSlots);
+  const hasAnyLabel = pictos.some((p) => p.label && p.label.length > 0);
+  const xAxisRow = hasAnyLabel ? /* @__PURE__ */ jsx("div", { className: "chart-axis-x", children: pictos.map((picto) => /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x", children: /* @__PURE__ */ jsx("div", { className: "chart-axis-tick-x-inner", children: picto.label?.map((subItem) => /* @__PURE__ */ jsx(
+    LayoutRenderer,
+    {
+      item: subItem,
+      widgets,
+      values,
+      droppedInputs: EMPTY_SET,
+      validationDetails,
+      onChange
+    },
+    subItem.id
+  )) }) }, picto.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(PictographGrid, { axis: fillAxis, columnCount: pictos.length }),
+      /* @__PURE__ */ jsx("div", { className: "chart-bars", children: pictos.map((p) => renderColumn(p)) })
+    ] }),
+    xAxisRow,
+    xAxisTitle
+  ] }) }) });
+};
+const CHART_TYPE_COMPONENTS = {
+  bar: BarChart,
+  pictograph: PictographChart
+  // line: LineChart,
+  // pie:  PieChart,
+};
+const Chart = (props) => {
+  const ChartComponent = CHART_TYPE_COMPONENTS[props.item.chartType];
+  if (!ChartComponent) {
+    return /* @__PURE__ */ jsx("div", { className: "chart chart--unsupported", children: /* @__PURE__ */ jsx("span", { style: { color: "var(--exercise-incorrect, #ef4444)", fontSize: "0.85rem" }, children: `Chart type "${props.item.chartType}" is not yet supported.` }) });
+  }
+  return /* @__PURE__ */ jsx(ChartComponent, { ...props });
+};
 const RadioOptions = ({
   name,
   options,
@@ -18457,11 +20041,14 @@ const NumberLineRenderer = ({
   onChangeRef.current = onChange;
   const valuesRef = useRef(values);
   valuesRef.current = values;
+  const prevCounterCountRef = useRef(null);
   useEffect(() => {
     if (counter === void 0) return;
     const next = String(counterCount);
+    const isSeed = prevCounterCountRef.current === null || prevCounterCountRef.current === counterCount;
+    prevCounterCountRef.current = counterCount;
     if (valuesRef.current[counter.id] !== next) {
-      onChangeRef.current(counter.id, next);
+      onChangeRef.current(counter.id, next, false, void 0, isSeed);
     }
   }, [counterCount, counter?.id]);
   const cursorKeys = useMemo(
@@ -18475,7 +20062,7 @@ const NumberLineRenderer = ({
     for (const cursor of cursors ?? []) {
       const existing = valuesRef.current[cursor.id];
       if (!isDefinitionChange && existing !== void 0 && existing !== "") continue;
-      onChangeRef.current(cursor.id, String(cursor.value));
+      onChangeRef.current(cursor.id, String(cursor.value), false, void 0, true);
     }
   }, [cursorKeys]);
   const effectiveStep = useMemo(() => {
@@ -19217,6 +20804,20 @@ const LayoutRenderer = ({
         }
       );
     }
+    case JSON_TYPES.CHART: {
+      const chartItem = item;
+      return /* @__PURE__ */ jsx(
+        Chart,
+        {
+          item: chartItem,
+          widgets,
+          values,
+          validationDetails,
+          onChange: (barId, val) => onChange(barId, val)
+        },
+        resetKey
+      );
+    }
     default:
       return null;
   }
@@ -19230,18 +20831,30 @@ const FLIP_BTN_EXTRA = 44;
 function buildInitialValues(json) {
   const initial = {};
   for (const [id, widget] of Object.entries(json.widgets)) {
-    if (widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.PAIR_MATCHER) initial[id] = [];
-    if (widget.type === JSON_TYPES.GRID_SYMMETRY) {
+    if (widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.PAIR_MATCHER) {
+      initial[id] = [];
+    } else if (widget.type === JSON_TYPES.GRID_SYMMETRY) {
       initial[id] = widget.cells.filter((cell) => isCellInInteractiveArea(
         cell,
         widget.rows,
         widget.cols,
         widget.interactiveArea
       ));
+    } else if (widget.type === JSON_TYPES.CHART_BAR || widget.type === JSON_TYPES.CHART_PICTO) {
+      initial[id] = String(widget.value);
     }
   }
   return initial;
 }
+function toBaseId(widgetId) {
+  return parseFractionKey(widgetId)?.widgetId ?? widgetId;
+}
+function buildInitialValuesSignature(json) {
+  return JSON.stringify({
+    widgets: json.widgets,
+    answers: json.validation?.answers ?? null
+  });
+}
 function buildRevealedValues(json) {
   const revealed = {};
   const validation = json.validation;
@@ -19289,9 +20902,12 @@ const ExerciseRenderer = forwardRef(({
   soundEnabled = true,
   sounds
 }, ref) => {
+  const initialValuesSignature = useMemo(() => buildInitialValuesSignature(json), [json]);
   const [values, setValues] = useState(() => buildInitialValues(json));
   const valuesRef = useRef(values);
   valuesRef.current = values;
+  const touchedRef = useRef(/* @__PURE__ */ new Set());
+  const [loadedValuesSignature, setLoadedValuesSignature] = useState(initialValuesSignature);
   const [droppedSources, setDroppedSources] = useState(/* @__PURE__ */ new Map());
   const [focusedInputId, setFocusedInputId] = useState(null);
   const [validationDetails, setValidationDetails] = useState(null);
@@ -19300,6 +20916,16 @@ const ExerciseRenderer = forwardRef(({
   const [revealed, setRevealed] = useState(false);
   const playSound = useSoundPlayer(soundEnabled, sounds);
   const externallyLocked = useExerciseLocked();
+  useLayoutEffect(() => {
+    if (loadedValuesSignature === initialValuesSignature) return;
+    setValues(buildInitialValues(json));
+    setDroppedSources(/* @__PURE__ */ new Map());
+    setFocusedInputId(null);
+    setValidationDetails(null);
+    setResetKey((k) => k + 1);
+    setLoadedValuesSignature(initialValuesSignature);
+    touchedRef.current = /* @__PURE__ */ new Set();
+  }, [json, initialValuesSignature, loadedValuesSignature]);
   const locked = validationDetails !== null || externallyLocked;
   const lastResultRef = useRef(null);
   const runSubmit = () => {
@@ -19337,8 +20963,11 @@ const ExerciseRenderer = forwardRef(({
     getValues: () => values,
     getCompletion: () => {
       const answerable = getAnswerableInputs(json);
-      const missing = getMissingInputs(json, valuesRef.current);
-      const missingSet = new Set(missing);
+      const missingSet = new Set(getMissingInputs(json, valuesRef.current));
+      for (const id of answerable) {
+        if (!touchedRef.current.has(id)) missingSet.add(id);
+      }
+      const missing = [...missingSet];
       const filledIds = answerable.filter((id) => !missingSet.has(id));
       return {
         total: answerable.length,
@@ -19358,6 +20987,8 @@ const ExerciseRenderer = forwardRef(({
       setValidationDetails(null);
       setResetKey((k) => k + 1);
       setRevealed(false);
+      setLoadedValuesSignature(initialValuesSignature);
+      touchedRef.current = /* @__PURE__ */ new Set();
     },
     revealAnswers: () => {
       const revealedValues = buildRevealedValues(json);
@@ -19366,6 +20997,7 @@ const ExerciseRenderer = forwardRef(({
       const details = {};
       for (const [widgetId, userValue] of Object.entries(revealedValues)) {
         details[widgetId] = { widgetId, userValue, isCorrect: true };
+        touchedRef.current.add(toBaseId(widgetId));
       }
       const next = { ...valuesRef.current, ...revealedValues };
       valuesRef.current = next;
@@ -19385,10 +21017,13 @@ const ExerciseRenderer = forwardRef(({
       const target = candidates.find(canTakeInput) ?? (locked ? void 0 : candidates[0]);
       target?.focus();
     }
-  }), [json, values, onSubmit, playSound, locked]);
-  const handleChange = (widgetId, value, fromDrop = false, sourceOptionId) => {
+  }), [json, values, onSubmit, playSound, locked, initialValuesSignature]);
+  const handleChange = (widgetId, value, fromDrop = false, sourceOptionId, silent = false) => {
     if (locked) return;
-    setRevealed(false);
+    if (!silent) {
+      setRevealed(false);
+      touchedRef.current.add(toBaseId(widgetId));
+    }
     const next = { ...valuesRef.current, [widgetId]: value };
     valuesRef.current = next;
     setValues(next);
@@ -19475,6 +21110,22 @@ const ExerciseRenderer = forwardRef(({
         });
         continue;
       }
+      if (item.type === JSON_TYPES.CHART) {
+        if (currentGroup.length > 0) {
+          const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
+          const hasRTLInlineWidget = currentGroup.some(isRTLInlineWidget);
+          const subGroups = groupLineItems(currentGroup);
+          groups.push({ items: currentGroup, hasArabic, hasRTLInlineWidget, subGroups });
+          currentGroup = [];
+        }
+        groups.push({
+          items: [item],
+          hasArabic: false,
+          hasRTLInlineWidget: false,
+          subGroups: []
+        });
+        continue;
+      }
       if (item.type === JSON_TYPES.LINEBREAK) {
         if (currentGroup.length > 0) {
           const hasArabic = currentGroup.some((item2) => itemContainsArabic(item2));
@@ -19658,10 +21309,24 @@ export {
   AST_TYPES,
   BoldTextInlineSchema,
   BoldTextSchema,
+  CHART_AXIS_DEFAULTS,
+  CHART_MAX_AXIS_TICKS,
+  CHART_MAX_PICTO_SLOTS,
+  CHART_TYPES,
   CLOCK_FORMATS,
   CLOCK_MODES,
   CLOCK_TIME_REGEX,
   CLOCK_TYPES,
+  ChartAxisJSONSchema,
+  ChartAxisSchema,
+  ChartBarJSONSchema,
+  ChartBarSchema,
+  ChartBarWidgetJSONSchema,
+  ChartBlockSchema,
+  ChartItemSchema,
+  ChartPictoJSONSchema,
+  ChartPictoSchema,
+  ChartPictoWidgetJSONSchema,
   ClockInlineSchema,
   ClockItemSchema,
   ColorTextInlineSchema,
@@ -19778,6 +21443,10 @@ export {
   computeGridSymmetryCellsToFill,
   computeGridSymmetryExpectedCells,
   createBoldText,
+  createChartAxis,
+  createChartBar,
+  createChartBlock,
+  createChartPicto,
   createColorText,
   createDisplayClock,
   createDragOptions,
@@ -19825,6 +21494,13 @@ export {
   getMissingInputs,
   isBoldText,
   isCellInInteractiveArea,
+  isChartAxis,
+  isChartBar,
+  isChartBarWidgetJSON,
+  isChartBlock,
+  isChartItem,
+  isChartPicto,
+  isChartPictoWidgetJSON,
   isClock,
   isClockItem,
   isColorText,
@@ -19892,6 +21568,7 @@ export {
   parseSafe,
   reflectGridSymmetryCell,
   renderExercise,
+  resolveChartAxes,
   toAST,
   toJSON,
   tokenize,