@mathscan/math-exercise-engine 1.0.15 → 1.0.17

package/dist/index.mjs

@@ -52,6 +52,8 @@ const AST_TYPES = {
   MATCHER_ROW: "MatcherRow",
   /** Item within a matcher row */
   MATCHER_ITEM: "MatcherItem",
+  /** Visual fraction inline widget */
+  VISUAL_FRACTION: "VisualFraction",
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
   // ═══════════════════════════════════════════════════════════════════════════
@@ -132,7 +134,9 @@ const JSON_TYPES = {
   /** Numeric keypad widget */
   NUMERIC_KEYPAD: "numeric-keypad",
   /** Inline fraction widget */
-  FRACTION: "fraction"
+  FRACTION: "fraction",
+  /** Visual fraction widget */
+  VISUAL_FRACTION: "visual-fraction"
 };
 const DRAG_OPTIONS_WIDGET_ID = "_drag_options";
 const VALIDATION_MODES = {
@@ -154,6 +158,7 @@ const SIDE_PAD = 7;
 const CSS_VAR_SIDE_PAD = "--nl-side-pad";
 const NUMBER_LINE_LABELS = ["all", "extremes", "min-only", "max-only", "none"];
 const NUMBER_LINE_HIGHLIGHT_COLORS = ["blue", "red", "green", "orange", "purple", "yellow"];
+const NUMBER_LINE_DRAG_MODES = ["axis", "inputs"];
 function getFractionKey(widgetId, part) {
   return `${widgetId}__${part}`;
 }
@@ -266,6 +271,10 @@ const HIGHLIGHT = createToken({
   name: "HIGHLIGHT",
   pattern: /HIGHLIGHT(?!_TEXT)/
 });
+const VISUAL_FRACTION = createToken({
+  name: "VISUAL_FRACTION",
+  pattern: /VISUAL_FRACTION/
+});
 const FRACTION = createToken({
   name: "FRACTION",
   pattern: /FRACTION/
@@ -395,6 +404,7 @@ const allTokens = [
   CELL,
   COUNTER,
   HIGHLIGHT,
+  VISUAL_FRACTION,
   FRACTION,
   MATCHER,
   ITEM,
@@ -860,6 +870,8 @@ class MathExerciseParser extends CstParser {
         { ALT: () => this.SUBRULE(this.fraction) },
         // IMAGE (inline image element)
         { ALT: () => this.SUBRULE(this.image) },
+        // VISUAL_FRACTION — always allowed; display-only when answer=[] or absence of answer parameter, interactive when answer=[...] with values.
+        { ALT: () => this.SUBRULE(this.visualFraction) },
         // W_S_I (inline input widget) — excluded in display-only contexts (e.g. MATCHER ITEM)
         { GATE: () => !displayOnly, ALT: () => this.SUBRULE(this.inlineInput) }
       ]);
@@ -897,6 +909,41 @@ class MathExerciseParser extends CstParser {
       this.SUBRULE(this.parameterList);
       this.CONSUME(RBracket);
     });
+    this.visualFraction = this.RULE("visualFraction", () => {
+      this.CONSUME(VISUAL_FRACTION);
+      this.CONSUME(LBracket);
+      this.SUBRULE(this.parameterList);
+      this.CONSUME(RBracket);
+    });
+    this.numberArray = this.RULE("numberArray", () => {
+      this.CONSUME(LBracket);
+      this.MANY(() => {
+        this.CONSUME(Space);
+      });
+      this.OPTION(() => {
+        this.CONSUME(NumberLiteral, { LABEL: "items" });
+        this.MANY2(() => {
+          this.MANY3(() => {
+            this.CONSUME2(Space);
+          });
+          this.CONSUME(Comma);
+          this.MANY4(() => {
+            this.CONSUME3(Space);
+          });
+          this.CONSUME2(NumberLiteral, { LABEL: "items" });
+        });
+        this.OPTION2(() => {
+          this.MANY5(() => {
+            this.CONSUME4(Space);
+          });
+          this.CONSUME2(Comma);
+        });
+      });
+      this.MANY6(() => {
+        this.CONSUME5(Space);
+      });
+      this.CONSUME(RBracket);
+    });
     this.inlineInput = this.RULE("inlineInput", () => {
       this.OR([
         { ALT: () => this.CONSUME(W_S_I, { LABEL: "stringInput" }) },
@@ -984,7 +1031,9 @@ class MathExerciseParser extends CstParser {
         // Tuple value: (start, end)
         { ALT: () => this.SUBRULE(this.tuple, { LABEL: "value" }) },
         // Curly-brace string list: {"a", "b", "c"}
-        { ALT: () => this.SUBRULE(this.curlyStringList, { LABEL: "value" }) }
+        { ALT: () => this.SUBRULE(this.curlyStringList, { LABEL: "value" }) },
+        // Square-bracket number array: [1, 2, 3]  — used by VISUAL_FRACTION filled/answer
+        { ALT: () => this.SUBRULE(this.numberArray, { LABEL: "value" }) }
       ]);
     });
     this.tuple = this.RULE("tuple", () => {
@@ -1040,6 +1089,25 @@ class MathExerciseParser extends CstParser {
   }
 }
 const parser = new MathExerciseParser();
+function parseOrThrow(schema, data, label) {
+  const result = schema.safeParse(data);
+  if (!result.success) {
+    const issue = result.error.issues[0];
+    if (!issue) throw new Error(`${label}: validation failed`);
+    const path = issue.path.length > 0 ? issue.path.join(".") : "<root>";
+    throw new Error(`${label}: ${path} ${issue.message}`);
+  }
+  return result.data;
+}
+const VISUAL_FRACTION_SHAPES = ["bar", "circle", "triangle", "grid"];
+const VISUAL_FRACTION_SHAPE = {
+  BAR: "bar",
+  CIRCLE: "circle",
+  TRIANGLE: "triangle",
+  GRID: "grid"
+};
+const VISUAL_FRACTION_DEFAULT_SIZE = 1.35;
+const VISUAL_FRACTION_MAX_DIVISIONS = 100;
 const FreeTextInlineSchema = z.object({
   type: z.literal(AST_TYPES.FREE_TEXT),
   value: z.string()
@@ -1069,6 +1137,7 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     name: z.string(),
     inputType: z.literal(INPUT_TYPES.STRING),
     length: z.number().int().positive(),
+    placeholder: z.string().max(32).optional(),
     answer: z.union([z.string(), z.number()]).optional()
   }),
   z.object({
@@ -1076,6 +1145,7 @@ const InlineInputWidgetSchema = z.discriminatedUnion("inputType", [
     name: z.string(),
     inputType: z.literal(INPUT_TYPES.NUMERIC),
     digits: z.number().int().positive(),
+    placeholder: z.string().max(32).optional(),
     answer: z.union([z.string(), z.number()]).optional()
   })
 ]);
@@ -1085,7 +1155,8 @@ const FractionInlineSchema = z.object({
   numerator: z.number().optional(),
   denominator: z.number().optional(),
   answer: z.string().optional(),
-  simplified: z.boolean().default(true)
+  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({
@@ -1098,6 +1169,60 @@ const ImageInlineSchema = z.object({
   width: z.number().positive().optional(),
   height: z.number().positive().optional()
 });
+const VisualFractionInlineSchema = z.object({
+  type: z.literal(AST_TYPES.VISUAL_FRACTION),
+  name: z.string(),
+  shape: z.enum(VISUAL_FRACTION_SHAPES).default("bar"),
+  divisions: z.number().int().positive().max(VISUAL_FRACTION_MAX_DIVISIONS, {
+    message: `divisions cannot exceed ${VISUAL_FRACTION_MAX_DIVISIONS}`
+  }),
+  filled: z.array(z.number().int().nonnegative()).default([]),
+  answer: z.array(z.number().int().nonnegative()).default([]),
+  orientation: z.enum(["horizontal", "vertical"]).optional(),
+  label: z.string().optional(),
+  /** Unified author size.
+   * - bar / grid:         overrides `--visual-fraction-part-size` (cell size).
+   * - circle / triangle:  maps to `--visual-fraction-size` with the renderer scale factor.
+   * Omit to use CSS defaults. */
+  size: z.number().positive().optional()
+}).superRefine(validateVisualFractionCapacity);
+function validateVisualFractionCapacity(data, ctx) {
+  const filledTotal = data.filled.reduce((sum, count) => sum + count, 0);
+  const answerTotal = data.answer.reduce((sum, count) => sum + count, 0);
+  if (filledTotal > data.divisions) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `filled total (${filledTotal}) cannot exceed divisions (${data.divisions})`,
+      path: ["filled"]
+    });
+  }
+  if (filledTotal + answerTotal > data.divisions) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `filled + answer total (${filledTotal + answerTotal}) cannot exceed divisions (${data.divisions})`,
+      path: ["answer"]
+    });
+  }
+  const shape = data.shape;
+  if (shape === "triangle" && !isPerfectSquare(data.divisions)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `triangle divisions (${data.divisions}) must be a perfect square to render equal triangle parts`,
+      path: ["divisions"]
+    });
+  }
+  if (shape === "grid" && !isPerfectSquare(data.divisions)) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: `grid divisions (${data.divisions}) must be a perfect square to render equal rows and columns`,
+      path: ["divisions"]
+    });
+  }
+}
+function isPerfectSquare(value) {
+  const root = Math.sqrt(value);
+  return Number.isInteger(root);
+}
 const InlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
@@ -1106,7 +1231,8 @@ const InlineNodeSchema = z.union([
   BoldTextInlineSchema,
   InlineInputWidgetSchema,
   FractionInlineSchema,
-  ImageInlineSchema
+  ImageInlineSchema,
+  VisualFractionInlineSchema
 ]);
 function createFreeText(value) {
   return FreeTextInlineSchema.parse({
@@ -1141,23 +1267,25 @@ function createBoldText(value, highlight) {
     highlight
   });
 }
-function createStringInput(name, length, answer) {
-  return InlineInputWidgetSchema.parse({
+function createStringInput(name, length, answer, placeholder) {
+  return parseOrThrow(InlineInputWidgetSchema, {
     type: AST_TYPES.INLINE_INPUT,
     name,
     inputType: INPUT_TYPES.STRING,
     length,
+    placeholder,
     answer
-  });
+  }, "STRING_INPUT");
 }
-function createNumericInput(name, digits, answer) {
-  return InlineInputWidgetSchema.parse({
+function createNumericInput(name, digits, answer, placeholder) {
+  return parseOrThrow(InlineInputWidgetSchema, {
     type: AST_TYPES.INLINE_INPUT,
     name,
     inputType: INPUT_TYPES.NUMERIC,
     digits,
+    placeholder,
     answer
-  });
+  }, "NUMERIC_INPUT");
 }
 function createImage(name, src, alt, options = {}) {
   return ImageInlineSchema.parse({
@@ -1175,6 +1303,14 @@ function createFraction(name, options = {}) {
     ...options
   });
 }
+function createVisualFraction(name, divisions, options = {}) {
+  return VisualFractionInlineSchema.parse({
+    type: AST_TYPES.VISUAL_FRACTION,
+    name,
+    divisions,
+    ...options
+  });
+}
 function isFreeText(value) {
   return FreeTextInlineSchema.safeParse(value).success;
 }
@@ -1193,6 +1329,9 @@ function isImage(value) {
 function isInlineNode(value) {
   return InlineNodeSchema.safeParse(value).success;
 }
+function isVisualFractionInline(value) {
+  return VisualFractionInlineSchema.safeParse(value).success;
+}
 const TextBlockSchema = z.object({
   type: z.literal(AST_TYPES.TEXT_BLOCK),
   value: z.string()
@@ -1299,6 +1438,11 @@ const NumberLineBlockSchema = z.object({
   }).optional(),
   counter: NumberLineCounterSchema.optional(),
   highlights: z.array(NumberLineHighlightSchema).optional(),
+  dragMode: z.enum(NUMBER_LINE_DRAG_MODES, {
+    errorMap: () => ({
+      message: `NUMBER_LINE: dragMode must be one of ${NUMBER_LINE_DRAG_MODES.join(", ")}`
+    })
+  }).optional(),
   positions: z.array(NumberLinePositionSchema)
 }).refine((data) => data.min < data.max, {
   message: "NUMBER_LINE: min must be less than max"
@@ -1336,7 +1480,7 @@ const NumberLineBlockSchema = z.object({
     }
   }
 });
-function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights) {
+function createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, dragMode) {
   return NumberLineBlockSchema.parse({
     type: AST_TYPES.NUMBER_LINE_BLOCK,
     min,
@@ -1347,6 +1491,7 @@ function createNumberLineBlock(min, max, positions, step, minorTicks, style, lab
     labelVisibility,
     counter,
     highlights,
+    dragMode,
     positions
   });
 }
@@ -1388,6 +1533,10 @@ const DisplayFractionInlineSchema = FractionInlineSchema.refine(
   (f) => f.numerator !== void 0 && f.denominator !== void 0,
   { message: "FRACTION inside MATCHER ITEM must be in display mode (both numerator and denominator required)" }
 );
+const DisplayVisualFractionInlineSchema = VisualFractionInlineSchema.refine(
+  (vf) => vf.answer.length === 0,
+  { message: "VISUAL_FRACTION inside MATCHER ITEM must be display-only (answer must be empty: answer=[])" }
+);
 const DisplayInlineNodeSchema = z.union([
   FreeTextInlineSchema,
   SpaceInlineSchema,
@@ -1395,7 +1544,8 @@ const DisplayInlineNodeSchema = z.union([
   ColorTextInlineSchema,
   BoldTextInlineSchema,
   DisplayFractionInlineSchema,
-  ImageInlineSchema
+  ImageInlineSchema,
+  DisplayVisualFractionInlineSchema
 ]);
 const MatcherItemSchema = z.object({
   type: z.literal(AST_TYPES.MATCHER_ITEM),
@@ -1491,7 +1641,8 @@ const DragOptionsToolSchema = z.object({
 const NumericKeypadToolSchema = z.object({
   type: z.literal(AST_TYPES.NUMERIC_KEYPAD),
   includeOperators: z.boolean().optional(),
-  includeDecimal: z.boolean().optional()
+  includeDecimal: z.boolean().optional(),
+  style: z.enum(["diamond", "classic"]).optional()
 });
 const ToolNodeSchema = z.discriminatedUnion("type", [
   DragOptionsToolSchema,
@@ -1503,11 +1654,12 @@ function createDragOptions(options) {
     options
   });
 }
-function createNumericKeypad(includeOperators, includeDecimal) {
+function createNumericKeypad(includeOperators, includeDecimal, style) {
   return NumericKeypadToolSchema.parse({
     type: AST_TYPES.NUMERIC_KEYPAD,
     includeOperators,
-    includeDecimal
+    includeDecimal,
+    style
   });
 }
 function isDragOptions(value) {
@@ -1704,6 +1856,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const minorTicks = params.minorTicks !== void 0 ? Number(params.minorTicks) : void 0;
     const style = params.style;
     const labelVisibility = params.labelVisibility;
+    const dragMode = params.dragMode;
     const positions = ctx.position ? ctx.position.map((p) => this.visit(p)) : [];
     const rawCounters = ctx.counter;
     if (rawCounters && rawCounters.length > 1) {
@@ -1711,7 +1864,7 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     }
     const counter = rawCounters ? this.visit(rawCounters) : void 0;
     const highlights = ctx.highlight ? ctx.highlight.map((h) => this.visit(h)) : [];
-    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights);
+    return createNumberLineBlock(min, max, positions, step, minorTicks, style, labelVisibility, counter, highlights, dragMode);
   }
   position(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -1861,6 +2014,9 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     if (ctx.image) {
       return this.visit(ctx.image);
     }
+    if (ctx.visualFraction) {
+      return this.visit(ctx.visualFraction);
+    }
     if (ctx.inlineInput) {
       return this.visit(ctx.inlineInput);
     }
@@ -1901,7 +2057,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const denominator = params.denominator;
     const answer = params.answer;
     const simplified = params.simplified !== void 0 ? params.simplified : void 0;
-    return createFraction(name, { numerator, denominator, answer, simplified });
+    const placeholder = params.placeholder;
+    return createFraction(name, { numerator, denominator, answer, simplified, placeholder });
   }
   image(ctx) {
     const params = this.visit(ctx.parameterList);
@@ -1912,16 +2069,32 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const height = params.height;
     return createImage(name, src, alt, { width, height });
   }
+  visualFraction(ctx) {
+    const params = this.visit(ctx.parameterList);
+    const name = params.name;
+    const divisions = params.divisions;
+    const shape = params.shape;
+    const filled = params.filled ?? [];
+    const answer = params.answer ?? [];
+    const orientation = params.orientation;
+    const label = params.label !== void 0 ? params.label : void 0;
+    const size = params.size !== void 0 ? params.size : void 0;
+    return createVisualFraction(name, divisions, { shape, filled, answer, orientation, label, size });
+  }
+  numberArray(ctx) {
+    return ctx.items ? ctx.items.map((t) => parseFloat(t.image)) : [];
+  }
   inlineInput(ctx) {
     const params = this.visit(ctx.parameterList);
     const name = params.name;
     const answer = params.answer;
+    const placeholder = params.placeholder;
     if (ctx.stringInput) {
       const length = params.length;
-      return createStringInput(name, length, answer);
+      return createStringInput(name, length, answer, placeholder);
     }
     const digits = params.digits;
-    return createNumericInput(name, digits, answer);
+    return createNumericInput(name, digits, answer, placeholder);
   }
   // ═══════════════════════════════════════════════════════════════════════════
   // Tools
@@ -1943,7 +2116,8 @@ class NaturalDSLVisitor extends BaseCstVisitor {
     const params = ctx.parameterList ? this.visit(ctx.parameterList) : {};
     const includeOperators = params.includeOperators === true || params.includeOperators === "true";
     const includeDecimal = params.includeDecimal === true || params.includeDecimal === "true";
-    return createNumericKeypad(includeOperators || void 0, includeDecimal || void 0);
+    const style = params.style;
+    return createNumericKeypad(includeOperators || void 0, includeDecimal || void 0, style);
   }
   // ═══════════════════════════════════════════════════════════════════════════
   // Validation
@@ -2168,6 +2342,7 @@ const NumberLineItemSchema = z.object({
   labelVisibility: z.enum(NUMBER_LINE_LABELS).optional(),
   counter: NumberLineCounterItemSchema.optional(),
   highlights: z.array(NumberLineHighlightItemSchema).optional(),
+  dragMode: z.enum(NUMBER_LINE_DRAG_MODES).optional(),
   positions: z.array(NumberLinePositionItemSchema)
 });
 const MatcherItemContentSchema = z.object({
@@ -2186,12 +2361,14 @@ const MatcherRowItemSchema = z.object({
 const StringInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.STRING),
-  length: z.number().int().positive()
+  length: z.number().int().positive(),
+  placeholder: z.string().max(32).optional()
 });
 const NumericInputJSONSchema = z.object({
   type: z.literal(JSON_TYPES.INLINE_INPUT),
   inputType: z.literal(INPUT_TYPES.NUMERIC),
-  digits: z.number().int().positive()
+  digits: z.number().int().positive(),
+  placeholder: z.string().max(32).optional()
 });
 const InlineInputJSONSchema = z.discriminatedUnion("inputType", [
   StringInputJSONSchema,
@@ -2208,13 +2385,15 @@ const RadioOptionsJSONSchema = z.object({
 const NumericKeypadJSONSchema = z.object({
   type: z.literal(JSON_TYPES.NUMERIC_KEYPAD),
   includeOperators: z.boolean().optional(),
-  includeDecimal: z.boolean().optional()
+  includeDecimal: z.boolean().optional(),
+  style: z.enum(["diamond", "classic"]).optional()
 });
 const FractionJSONSchema = z.object({
   type: z.literal(JSON_TYPES.FRACTION),
   numerator: z.number().nullable(),
   denominator: z.number().nullable(),
-  simplified: z.boolean()
+  simplified: z.boolean(),
+  placeholder: z.string().max(32).optional()
 });
 const MatcherWidgetJSONSchema = z.object({
   type: z.literal(JSON_TYPES.MATCHER),
@@ -2224,24 +2403,44 @@ const MatcherWidgetJSONSchema = z.object({
   /** Number of answer groups — equals answers.length, stored here to avoid prop-drilling. */
   groupCount: z.number().int().min(1)
 });
+const VisualFractionJSONSchema = z.object({
+  type: z.literal(JSON_TYPES.VISUAL_FRACTION),
+  shape: z.enum(["bar", "circle", "triangle", "grid"]).default("bar"),
+  divisions: z.number().int().positive().max(VISUAL_FRACTION_MAX_DIVISIONS, {
+    message: `divisions cannot exceed ${VISUAL_FRACTION_MAX_DIVISIONS}`
+  }),
+  filled: z.array(z.number().int().nonnegative()),
+  answer: z.array(z.number().int().nonnegative()),
+  orientation: z.enum(["horizontal", "vertical"]).optional(),
+  /** Optional label text rendered near the shape — replaces the old showLabel boolean */
+  label: z.string().optional(),
+  /** Overall shape size in unified author units.
+   * - bar / grid:         overrides `--visual-fraction-part-size` CSS custom property (cell size in rem).
+   * - circle / triangle:  overrides `--visual-fraction-size` through the renderer scale factor.
+   */
+  size: z.number().positive().optional()
+}).superRefine(validateVisualFractionCapacity);
 const WidgetJSONSchema = z.union([
   InlineInputJSONSchema,
   DragOptionsJSONSchema,
   RadioOptionsJSONSchema,
   NumericKeypadJSONSchema,
   FractionJSONSchema,
-  MatcherWidgetJSONSchema
+  MatcherWidgetJSONSchema,
+  VisualFractionJSONSchema
 ]);
 const ValidationJSONSchema = z.object({
   mode: z.enum([VALIDATION_MODES.SIMPLE, VALIDATION_MODES.EXPRESSION]),
   // Simple answers: string|number per widget id.
   // Matcher answers: string[][] keyed by matcher name. Outer/inner min(1)
   // mirrors MatcherBlockSchema invariants in src/ast/matcher.ts.
+  // VisualFraction answers: number[] — one count per color group.
   answers: z.record(
     z.union([
       z.string(),
       z.number(),
-      z.array(z.array(z.string().min(1)).min(1)).min(1)
+      z.array(z.array(z.string().min(1)).min(1)).min(1),
+      z.array(z.number().int().nonnegative())
     ])
   ).optional(),
   expression: z.string().optional(),
@@ -2392,13 +2591,15 @@ function toJSON(ast) {
         widgets[inline.name] = {
           type: JSON_TYPES.INLINE_INPUT,
           inputType: INPUT_TYPES.STRING,
-          length: inline.length
+          length: inline.length,
+          placeholder: inline.placeholder
         };
       } else {
         widgets[inline.name] = {
           type: JSON_TYPES.INLINE_INPUT,
           inputType: INPUT_TYPES.NUMERIC,
-          digits: inline.digits
+          digits: inline.digits,
+          placeholder: inline.placeholder
         };
       }
       if (inline.answer !== void 0) {
@@ -2410,12 +2611,29 @@ function toJSON(ast) {
         type: JSON_TYPES.FRACTION,
         numerator: inline.numerator ?? null,
         denominator: inline.denominator ?? null,
-        simplified: inline.simplified ?? true
+        simplified: inline.simplified ?? true,
+        placeholder: inline.placeholder
       };
       if (inline.answer !== void 0) {
         answers[inline.name] = inline.answer;
       }
     }
+    if (inline.type === AST_TYPES.VISUAL_FRACTION) {
+      const answerArr = inline.answer ?? [];
+      widgets[inline.name] = {
+        type: JSON_TYPES.VISUAL_FRACTION,
+        shape: inline.shape,
+        divisions: inline.divisions,
+        filled: inline.filled ?? [],
+        answer: answerArr,
+        ...inline.orientation !== void 0 && { orientation: inline.orientation },
+        ...inline.label !== void 0 && { label: inline.label },
+        ...inline.size !== void 0 && { size: inline.size }
+      };
+      if (answerArr.length > 0) {
+        answers[inline.name] = answerArr;
+      }
+    }
   }
   for (const block of ast.lines) {
     if (block.type === AST_TYPES.RADIO_OPTIONS) {
@@ -2442,7 +2660,8 @@ function toJSON(ast) {
         widgets["_numeric_keypad"] = {
           type: JSON_TYPES.NUMERIC_KEYPAD,
           includeOperators: tool.includeOperators,
-          includeDecimal: tool.includeDecimal
+          includeDecimal: tool.includeDecimal,
+          style: tool.style
         };
       }
     }
@@ -2524,6 +2743,7 @@ function transformNumberLine(numberLine, idGenerator) {
     ...numberLine.labelVisibility !== void 0 && { labelVisibility: numberLine.labelVisibility },
     ...counterItem !== void 0 && { counter: counterItem },
     ...highlights !== void 0 && { highlights },
+    ...numberLine.dragMode !== void 0 && { dragMode: numberLine.dragMode },
     positions
   };
   return item;
@@ -2656,6 +2876,12 @@ function transformInline(inline, idGenerator) {
         ...inline.width !== void 0 && { width: inline.width },
         ...inline.height !== void 0 && { height: inline.height }
       };
+    case AST_TYPES.VISUAL_FRACTION:
+      return {
+        id: idGenerator.generate(JSON_TYPES.WIDGET_REF),
+        type: JSON_TYPES.WIDGET_REF,
+        widgetId: inline.name
+      };
     default:
       throw new Error(`Unknown inline type: ${inline.type}`);
   }
@@ -8198,6 +8424,11 @@ function areMatcherEqual(expected, result) {
   const normalize2 = (groups) => lodashExports.sortBy(groups.map((g) => lodashExports.sortBy(g)), (g) => g.join("|"));
   return lodashExports.isEqual(normalize2(expected), normalize2(result));
 }
+function areVisualFractionCountsEqual(expected, result) {
+  if (!Array.isArray(result)) return false;
+  if (expected.length !== result.length) return false;
+  return lodashExports.isEqual(lodashExports.sortBy(expected), lodashExports.sortBy(result));
+}
 const math$1 = create(all);
 function collectNumberLines(items) {
   const result = [];
@@ -8246,6 +8477,15 @@ function validateSimple(exercise, userInputs) {
       else allCorrect = false;
       continue;
     }
+    if (widget?.type === JSON_TYPES.VISUAL_FRACTION) {
+      const userValue2 = userInputs[widgetId];
+      const isCorrect2 = areVisualFractionCountsEqual(expected, userValue2);
+      details[widgetId] = { widgetId, userValue: userValue2, isCorrect: isCorrect2 };
+      totalCount++;
+      if (isCorrect2) correctCount++;
+      else allCorrect = false;
+      continue;
+    }
     totalCount++;
     const userValue = userInputs[widgetId];
     const isFractionLenient = widget?.type === JSON_TYPES.FRACTION && widget.simplified === false;
@@ -8752,10 +8992,10 @@ function getOwnerDocument(target) {
   }
   return document;
 }
-const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = canUseDOM ? useLayoutEffect : useEffect;
 function useEvent(handler) {
   const handlerRef = useRef(handler);
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     handlerRef.current = handler;
   });
   return useCallback(function() {
@@ -8783,7 +9023,7 @@ function useLatestValue(value, dependencies) {
     dependencies = [value];
   }
   const valueRef = useRef(value);
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     if (valueRef.current !== value) {
       valueRef.current = value;
     }
@@ -10651,9 +10891,9 @@ function useResizeObserver(_ref) {
         return void 0;
       }
       const {
-        ResizeObserver
+        ResizeObserver: ResizeObserver2
       } = window;
-      return new ResizeObserver(handleResize);
+      return new ResizeObserver2(handleResize);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled]
@@ -10707,7 +10947,7 @@ function useRect(element, measure, fallbackRect) {
   const resizeObserver = useResizeObserver({
     callback: measureRect
   });
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     measureRect();
     if (element) {
       resizeObserver == null ? void 0 : resizeObserver.observe(element);
@@ -10881,7 +11121,7 @@ function useRects(elements, measure) {
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     resizeObserver == null ? void 0 : resizeObserver.disconnect();
     measureRects();
     elements.forEach((element) => resizeObserver == null ? void 0 : resizeObserver.observe(element));
@@ -11243,7 +11483,7 @@ function useLayoutShiftScrollCompensation(_ref) {
     x: config,
     y: config
   } : config;
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     const disabled = !x && !y;
     if (disabled || !activeNode) {
       initialized.current = false;
@@ -11604,7 +11844,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
   }, [draggableNodes, instantiateSensor]);
   const activators = useCombineActivators(sensors, bindActivatorToSensorInstantiator);
   useSensorSetup(sensors);
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     if (activeNodeRect && status === Status.Initializing) {
       setStatus(Status.Initialized);
     }
@@ -11688,7 +11928,7 @@ const DndContext = /* @__PURE__ */ memo(function DndContext2(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [overId]
   );
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     sensorContext.current = {
       activatorEvent,
       active,
@@ -11815,7 +12055,7 @@ function useDraggable(_ref) {
   const [activatorNode, setActivatorNodeRef] = useNodeRef();
   const listeners = useSyntheticListeners(activators, id);
   const dataRef = useLatestValue(data);
-  useIsomorphicLayoutEffect(
+  useIsomorphicLayoutEffect$1(
     () => {
       draggableNodes.set(id, {
         id,
@@ -11988,7 +12228,7 @@ function AnimationManager(_ref) {
   if (!children && !clonedChildren && previousChildren) {
     setClonedChildren(previousChildren);
   }
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     if (!element) {
       return;
     }
@@ -12670,6 +12910,7 @@ const InlineInput = ({
   inputType,
   length,
   digits,
+  placeholder,
   onChange,
   onFocus
 }) => {
@@ -12715,19 +12956,88 @@ const InlineInput = ({
             onChange: (e) => handleChange(e.target.value, false),
             onFocus: () => onFocus?.(widgetId),
             maxLength: expectedLength,
-            style: { width: dynamicWidth }
+            style: { width: dynamicWidth },
+            placeholder
           }
         )
       )
     }
   );
 };
+const PillBackground = ({
+  width = "100%",
+  minHeight = "72px",
+  fill = "#FFE7B4",
+  children,
+  className = "",
+  style,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `pill-bg-wrapper ${className}`.trim(),
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width,
+        minHeight,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 510 108",
+            preserveAspectRatio: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              display: "block"
+            },
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M439.707 0C457.071 0 472.52 8.196 482.398 20.9297C498.608 26.3308 510 39.1028 510 54C510 68.8966 498.608 81.667 482.399 87.0684C472.521 99.803 457.072 108 439.707 108H70.8975C53.653 108 38.2956 99.9172 28.4092 87.333C11.7719 82.0918 0.00025108 69.1432 0 54C0 38.8562 11.7721 25.906 28.4102 20.665C38.2966 8.08186 53.6537 0 70.8975 0H439.707Z",
+                fill
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              height: "100%",
+              padding: "0 2rem",
+              boxSizing: "border-box"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
 const DragOptions = ({
   options,
   onOptionClick
 }) => {
   const { usedOptionIds } = useExerciseDnd();
-  return /* @__PURE__ */ jsx("div", { className: "drag-options", children: options.map((option, idx) => {
+  return /* @__PURE__ */ jsx(PillBackground, { children: /* @__PURE__ */ jsx("div", { className: "drag-options", children: options.map((option, idx) => {
     const optionId = `drag-option-${idx}`;
     const optionValue = String(option);
     const isUsed = usedOptionIds.has(optionId);
@@ -12754,7 +13064,7 @@ const DragOptions = ({
         }
       )
     ) }, optionId);
-  }) });
+  }) }) });
 };
 const NumericKeypad = ({
   value,
@@ -12794,8 +13104,11 @@ const FractionInput = ({
   values,
   droppedInputs,
   validationStatus = null,
+  numValidationStatus = null,
+  denValidationStatus = null,
   onChange,
-  onFocus
+  onFocus,
+  placeholder
 }) => {
   const numKey = getFractionKey(widgetId, "num");
   const denKey = getFractionKey(widgetId, "den");
@@ -12808,11 +13121,12 @@ const FractionInput = ({
       onChange(subKey, data.value, true, String(item.id));
     }
   }, [onChange]);
-  const renderSlot = (subKey, fixedValue, currentValue, label) => {
+  const renderSlot = (subKey, fixedValue, currentValue, label, slotStatus) => {
     if (fixedValue !== null) {
       return /* @__PURE__ */ jsx("span", { className: "fraction-fixed", children: fixedValue });
     }
     const isDroppedHere = droppedInputs.has(subKey);
+    const slotClass = slotStatus ? ` widget--${slotStatus}` : statusClass;
     return /* @__PURE__ */ jsx(
       Droppable,
       {
@@ -12823,7 +13137,7 @@ const FractionInput = ({
         children: isDroppedHere && currentValue !== "" ? /* @__PURE__ */ jsx(
           "button",
           {
-            className: `inline-input-chip fraction-chip${statusClass}`,
+            className: `inline-input-chip fraction-chip${slotClass}`,
             onClick: () => onChange(subKey, "", false),
             title: "Click to remove",
             children: currentValue
@@ -12833,45 +13147,25 @@ const FractionInput = ({
           {
             id: `${subKey}-input`,
             type: "text",
-            className: `inline-input fraction-input${statusClass}`,
+            className: `inline-input fraction-input${slotClass}`,
             value: currentValue,
             onChange: (e) => onChange(subKey, e.target.value, false),
             onFocus: () => onFocus?.(subKey),
-            maxLength: 4,
-            "aria-label": label
+            maxLength: placeholder ? Math.max(20, placeholder.length) : 4,
+            size: placeholder ? placeholder.length : void 0,
+            "aria-label": label,
+            placeholder
           }
         )
       }
     );
   };
   return /* @__PURE__ */ jsxs("span", { className: "fraction", role: "math", "aria-label": `fraction ${widgetId}`, children: [
-    /* @__PURE__ */ jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator") }),
+    /* @__PURE__ */ jsx("span", { className: "fraction-numerator", children: renderSlot(numKey, numerator, numValue, "numerator", numValidationStatus) }),
     /* @__PURE__ */ jsx("span", { className: "fraction-bar", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator") })
+    /* @__PURE__ */ jsx("span", { className: "fraction-denominator", children: renderSlot(denKey, denominator, denValue, "denominator", denValidationStatus) })
   ] });
 };
-const RadioOptions = ({
-  name,
-  options,
-  value,
-  validationStatus = null,
-  onChange
-}) => {
-  return /* @__PURE__ */ jsx("div", { className: "radio-options", children: options.map((option, idx) => {
-    const isSelected = value === option;
-    const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: `radio-option${isSelected ? " selected" : ""}${statusClass}`,
-        onClick: () => onChange(name, option),
-        type: "button",
-        children: option
-      },
-      `${name}-radio-${idx}`
-    );
-  }) });
-};
 function isLightColor(hex) {
   const clean = hex.replace("#", "");
   const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
@@ -12886,7 +13180,8 @@ function isLightColor(hex) {
   return 1.05 / (L + 0.05) < 4.5;
 }
 function getTextColorForBackground(color) {
-  if (color.startsWith("hsl(")) return "#1a1a1a";
+  const hslLightness = parseHslLightness(color);
+  if (hslLightness !== null) return hslLightness >= 60 ? "#1a1a1a" : "#ffffff";
   return isLightColor(color) ? "#1a1a1a" : "#ffffff";
 }
 function generateHslPalette(n) {
@@ -12895,7 +13190,7 @@ function generateHslPalette(n) {
     return `hsl(${hue}, 60%, 72%)`;
   });
 }
-function resolveMatcherPalette(userColors, groupCount) {
+function resolveGroupPalette(userColors, groupCount) {
   if (groupCount <= 0) return [];
   if (!userColors || userColors.length === 0) {
     return generateHslPalette(groupCount);
@@ -12907,6 +13202,475 @@ function resolveMatcherPalette(userColors, groupCount) {
   const extras = generateHslPalette(needed);
   return [...userColors, ...extras];
 }
+function resolveDistinctGroupPalette(groupCount, options = {}) {
+  if (groupCount <= 0) return [];
+  const used = new Set((options.excludeColors ?? []).map(normalizeColorToken));
+  const palette = [];
+  for (const color of options.seedColors ?? []) {
+    const token = normalizeColorToken(color);
+    if (used.has(token)) continue;
+    palette.push(color);
+    used.add(token);
+    if (palette.length === groupCount) return palette;
+  }
+  const addCandidates = (candidates) => {
+    for (const color of candidates) {
+      const token = normalizeColorToken(color);
+      if (used.has(token)) continue;
+      palette.push(color);
+      used.add(token);
+      if (palette.length === groupCount) return;
+    }
+  };
+  addCandidates(generateHslPalette(groupCount));
+  let candidateCount = groupCount + 1;
+  while (palette.length < groupCount) {
+    addCandidates(generateHslPalette(candidateCount++));
+  }
+  return palette;
+}
+function getGroupClassName(groupIndex) {
+  return `widget-group-${groupIndex + 1}`;
+}
+function normalizeColorToken(color) {
+  return color.replace(/\s+/g, "").toLowerCase();
+}
+function parseHslLightness(color) {
+  const match = color.match(/^hsl\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*([\d.]+)%\s*\)$/i);
+  return match ? Number(match[1]) : null;
+}
+function sumCounts(counts) {
+  return counts.reduce((sum, count) => sum + count, 0);
+}
+function countsToPartGroups(counts) {
+  return counts.flatMap(
+    (count, groupIndex) => Array.from({ length: count }, () => groupIndex)
+  );
+}
+function normalizeCounts(value, expected) {
+  if (!Array.isArray(value)) return expected.map(() => 0);
+  return expected.map((max, i) => Math.max(0, Math.min(max, value[i] ?? 0)));
+}
+function serializeCounts(value) {
+  return Array.isArray(value) ? value.join("|") : null;
+}
+function countsToAssignments(counts, divisions, filledCount) {
+  const assignments = Array.from({ length: divisions }, () => null);
+  let index = filledCount;
+  counts.forEach((count, groupIndex) => {
+    for (let i = 0; i < count && index < divisions; i++) {
+      assignments[index] = groupIndex;
+      index++;
+    }
+  });
+  return assignments;
+}
+function getNextAssignments(assignments, partIndex, groupCount) {
+  if (groupCount === 0) return [...assignments];
+  const current = assignments[partIndex] ?? null;
+  const next = current === null ? 0 : current + 1 >= groupCount ? null : current + 1;
+  const updated = [...assignments];
+  updated[partIndex] = next;
+  return updated;
+}
+function assignmentsToCounts(assignments, groupCount) {
+  const counts = Array.from({ length: groupCount }, () => 0);
+  for (const groupIndex of assignments) {
+    if (groupIndex !== null && groupIndex >= 0 && groupIndex < groupCount) {
+      counts[groupIndex] = (counts[groupIndex] ?? 0) + 1;
+    }
+  }
+  return counts;
+}
+function useVisualFractionState({
+  widgetId,
+  divisions,
+  filledCount,
+  answer,
+  value,
+  onChange
+}) {
+  const [partAssignments, setPartAssignments] = useState(
+    () => countsToAssignments(normalizeCounts(value, answer), divisions, filledCount)
+  );
+  const lastInternalValueRef = useRef(null);
+  const valueKey = serializeCounts(value);
+  useEffect(() => {
+    if (valueKey !== null && valueKey === lastInternalValueRef.current) return;
+    lastInternalValueRef.current = null;
+    setPartAssignments(
+      countsToAssignments(normalizeCounts(value, answer), divisions, filledCount)
+    );
+  }, [answer, divisions, filledCount, valueKey]);
+  const handlePartClick = (partIndex) => {
+    if (partIndex < filledCount) return;
+    const updated = getNextAssignments(partAssignments, partIndex, answer.length);
+    const nextCounts = assignmentsToCounts(updated, answer.length);
+    lastInternalValueRef.current = serializeCounts(nextCounts);
+    setPartAssignments(updated);
+    onChange(widgetId, nextCounts);
+  };
+  return { partAssignments, handlePartClick };
+}
+const VISUAL_FRACTION_DISPLAY_COLOR = "#AE9CFF";
+const VISUAL_FRACTION_BORDER_COLOR = "#705DC0";
+const VISUAL_FRACTION_SVG_SIZE_SCALE = 8;
+function getCircleSectorProps(index, divisions) {
+  if (divisions <= 1) return { kind: "circle" };
+  const angle = 360 / divisions;
+  const startAngle = -90 + index * angle;
+  const endAngle = startAngle + angle;
+  const start = polarToCartesian(50, 50, 48, endAngle);
+  const end = polarToCartesian(50, 50, 48, startAngle);
+  const largeArcFlag = angle > 180 ? 1 : 0;
+  return {
+    kind: "path",
+    d: [
+      "M",
+      50,
+      50,
+      "L",
+      start.x,
+      start.y,
+      "A",
+      48,
+      48,
+      0,
+      largeArcFlag,
+      0,
+      end.x,
+      end.y,
+      "Z"
+    ].join(" ")
+  };
+}
+function polarToCartesian(cx, cy, r, angleInDegrees) {
+  const rad = angleInDegrees * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+function getEqualTrianglePartPath(index, divisions) {
+  const side = Math.sqrt(divisions);
+  if (!Number.isInteger(side)) {
+    throw new Error(`getEqualTrianglePartPath: divisions (${divisions}) must be a perfect square.`);
+  }
+  const smallSide = 96 / side;
+  const smallHeight = smallSide * Math.sqrt(3) / 2;
+  const totalHeight = side * smallHeight;
+  const offsetY = (100 - totalHeight) / 2;
+  let cursor = 0;
+  for (let row = 0; row < side; row++) {
+    const y = offsetY + row * smallHeight;
+    const rowLeft = 50 - (row + 1) * smallSide / 2;
+    for (let col = 0; col <= row; col++) {
+      if (cursor === index) {
+        const x = rowLeft + col * smallSide;
+        return ["M", x + smallSide / 2, y, "L", x + smallSide, y + smallHeight, "L", x, y + smallHeight, "Z"].join(" ");
+      }
+      cursor++;
+    }
+    for (let col = 0; col < row; col++) {
+      if (cursor === index) {
+        const x = rowLeft + col * smallSide;
+        return ["M", x + smallSide, y + smallHeight, "L", x + smallSide / 2, y, "L", x + smallSide * 1.5, y, "Z"].join(" ");
+      }
+      cursor++;
+    }
+  }
+  return "";
+}
+function getGridColumnCount(divisions) {
+  return Math.ceil(Math.sqrt(divisions));
+}
+function getInteractiveProps(part, onPartClick) {
+  if (!part.isInteractiveSlot) return {};
+  return {
+    onClick: () => onPartClick(part.index),
+    role: "button",
+    "aria-pressed": part.isSelected,
+    "aria-label": getPartAriaLabel(part),
+    tabIndex: 0,
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onPartClick(part.index);
+      }
+    }
+  };
+}
+function getPartAriaLabel(part) {
+  return part.groupIndex === null ? `Part ${part.index + 1}, empty` : `Part ${part.index + 1}, group ${part.groupIndex + 1}`;
+}
+const BarShape = ({
+  parts,
+  divisions,
+  orientation,
+  onPartClick
+}) => {
+  const renderedParts = orientation === "vertical" ? [...parts].reverse() : parts;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `visual-fraction-widget__parts${orientation === "vertical" ? " visual-fraction-widget__parts--vertical" : " visual-fraction-widget__parts--horizontal"}`,
+      style: { "--visual-fraction-divisions": divisions },
+      children: renderedParts.map((part) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: part.className,
+          style: part.style,
+          ...getInteractiveProps(part, onPartClick)
+        },
+        part.index
+      ))
+    }
+  );
+};
+BarShape.displayName = "BarShape";
+const GridShape = ({
+  parts,
+  divisions,
+  onPartClick
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "visual-fraction-widget__parts visual-fraction-widget__parts--horizontal",
+    style: {
+      "--visual-fraction-divisions": divisions,
+      "--visual-fraction-grid-cols": getGridColumnCount(divisions),
+      // Safe integer division: zod schema enforces divisions = perfect square.
+      "--visual-fraction-grid-rows": divisions / getGridColumnCount(divisions)
+    },
+    children: parts.map((part) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: part.className,
+        style: part.style,
+        ...getInteractiveProps(part, onPartClick)
+      },
+      part.index
+    ))
+  }
+);
+GridShape.displayName = "GridShape";
+const CircleShape = ({
+  parts,
+  divisions,
+  onPartClick
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "visual-fraction-widget__shape visual-fraction-widget__circle",
+    viewBox: "0 0 100 100",
+    children: parts.map((part) => {
+      const sectorProps = getCircleSectorProps(part.index, divisions);
+      const className = `${part.className} visual-fraction-widget__sector`;
+      const interactiveProps = getInteractiveProps(part, onPartClick);
+      return sectorProps.kind === "circle" ? /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className,
+          style: part.style,
+          cx: "50",
+          cy: "50",
+          r: "48",
+          ...interactiveProps
+        },
+        part.index
+      ) : /* @__PURE__ */ jsx(
+        "path",
+        {
+          className,
+          style: part.style,
+          d: sectorProps.d,
+          ...interactiveProps
+        },
+        part.index
+      );
+    })
+  }
+);
+CircleShape.displayName = "CircleShape";
+const TriangleShape = ({
+  parts,
+  divisions,
+  onPartClick
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "visual-fraction-widget__shape visual-fraction-widget__triangle",
+    viewBox: "0 0 100 100",
+    children: parts.map((part) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: `${part.className} visual-fraction-widget__sector`,
+        style: part.style,
+        d: getEqualTrianglePartPath(part.index, divisions),
+        ...getInteractiveProps(part, onPartClick)
+      },
+      part.index
+    ))
+  }
+);
+TriangleShape.displayName = "TriangleShape";
+const ShapeBar = ({ parts, divisions, orientation, onPartClick }) => /* @__PURE__ */ jsx(BarShape, { parts, divisions, orientation, onPartClick });
+const ShapeCircle = ({ parts, divisions, onPartClick }) => /* @__PURE__ */ jsx(CircleShape, { parts, divisions, onPartClick });
+const ShapeTriangle = ({ parts, divisions, onPartClick }) => /* @__PURE__ */ jsx(TriangleShape, { parts, divisions, onPartClick });
+const ShapeGrid = ({ parts, divisions, onPartClick }) => /* @__PURE__ */ jsx(GridShape, { parts, divisions, onPartClick });
+const SHAPE_COMPONENTS = {
+  [VISUAL_FRACTION_SHAPE.BAR]: ShapeBar,
+  [VISUAL_FRACTION_SHAPE.CIRCLE]: ShapeCircle,
+  [VISUAL_FRACTION_SHAPE.TRIANGLE]: ShapeTriangle,
+  [VISUAL_FRACTION_SHAPE.GRID]: ShapeGrid
+};
+const VisualFraction = ({
+  widgetId,
+  widget,
+  value,
+  validationStatus = null,
+  onChange
+}) => {
+  const { shape, divisions, filled, answer, orientation, label } = widget;
+  const filledCount = sumCounts(filled);
+  const filledPartGroups = useMemo(() => countsToPartGroups(filled), [filled]);
+  const filledPalette = useMemo(() => {
+    if (filled.length === 0) return [];
+    return resolveDistinctGroupPalette(filled.length, {
+      seedColors: [VISUAL_FRACTION_DISPLAY_COLOR],
+      excludeColors: [VISUAL_FRACTION_BORDER_COLOR]
+    });
+  }, [filled]);
+  const answerPalette = useMemo(() => {
+    if (answer.length === 0) return [];
+    return resolveDistinctGroupPalette(answer.length, {
+      excludeColors: [VISUAL_FRACTION_BORDER_COLOR, ...filledPalette]
+    });
+  }, [answer, filledPalette]);
+  const { partAssignments, handlePartClick } = useVisualFractionState({
+    widgetId,
+    divisions,
+    filledCount,
+    answer,
+    value,
+    onChange
+  });
+  const parts = useMemo(
+    () => Array.from({ length: divisions }, (_, i) => {
+      let partClass = "visual-fraction-widget__part visual-fraction-widget__part--empty";
+      let groupIdx = null;
+      if (i < filledCount) {
+        groupIdx = filledPartGroups[i] ?? 0;
+        partClass = "visual-fraction-widget__part visual-fraction-widget__part--filled";
+      } else if (partAssignments[i] != null) {
+        groupIdx = partAssignments[i];
+        partClass = "visual-fraction-widget__part visual-fraction-widget__part--answer";
+      }
+      if (groupIdx !== null) {
+        partClass += ` visual-fraction-widget__part--group-${groupIdx + 1} ${getGroupClassName(groupIdx)}`;
+      }
+      const colorKind = i < filledCount ? "filled" : "answer";
+      const palette = colorKind === "filled" ? filledPalette : answerPalette;
+      const fallbackColor = palette[groupIdx ?? 0];
+      const style = groupIdx !== null ? {
+        "--visual-fraction-part-color": `var(--visual-fraction-${colorKind}-group-${groupIdx + 1}-color, ${fallbackColor})`,
+        "--visual-fraction-part-text-color": `var(--visual-fraction-${colorKind}-group-${groupIdx + 1}-text-color, ${getTextColorForBackground(fallbackColor)})`
+      } : void 0;
+      return {
+        index: i,
+        className: partClass,
+        style,
+        // A slot is interactive when there are answer groups AND it falls in the non-filled range.
+        // answer.length counts groups (not total slots); the state hook handles per-slot cycling.
+        isInteractiveSlot: answer.length > 0 && i >= filledCount,
+        isSelected: groupIdx !== null,
+        groupIndex: groupIdx
+      };
+    }),
+    [divisions, filledCount, filledPartGroups, partAssignments, answer, filledPalette, answerPalette]
+  );
+  const statusClass = validationStatus ? ` visual-fraction-widget--${validationStatus} widget--${validationStatus}` : "";
+  const rootStyle = useMemo(() => getSizeStyle(widget.size), [widget.size, shape]);
+  const ShapeComponent = SHAPE_COMPONENTS[shape];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `visual-fraction-widget visual-fraction-widget--${shape}${statusClass}`,
+      style: rootStyle,
+      role: "group",
+      "aria-label": `${divisions} part ${shape} fraction`,
+      children: [
+        /* @__PURE__ */ jsx(
+          ShapeComponent,
+          {
+            parts,
+            divisions,
+            orientation: orientation ?? "horizontal",
+            onPartClick: handlePartClick
+          }
+        ),
+        label && /* @__PURE__ */ jsx("span", { className: "visual-fraction-widget__label", children: label })
+      ]
+    }
+  );
+};
+VisualFraction.displayName = "VisualFraction";
+function getSizeStyle(size, _shape) {
+  if (size === void 0) return void 0;
+  return {
+    "--visual-fraction-size": `${size * VISUAL_FRACTION_SVG_SIZE_SCALE}rem`
+  };
+}
+const RadioOptions = ({
+  name,
+  options,
+  value,
+  validationStatus = null,
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "radio-options", children: options.map((option, idx) => {
+    const isSelected = value === option;
+    const statusClass = isSelected && validationStatus ? ` widget--${validationStatus}` : "";
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `radio-option${isSelected ? " selected" : ""}${statusClass}`,
+        onClick: () => onChange(name, option),
+        type: "button",
+        children: option
+      },
+      `${name}-radio-${idx}`
+    );
+  }) });
+};
+const Btn = ({
+  label,
+  extraClass = "keypad-btn-digit",
+  onClick
+}) => /* @__PURE__ */ jsx("button", { className: `keypad-btn ${extraClass}`, onClick, children: /* @__PURE__ */ jsx("span", { children: label }) });
+const DiamondKeypad = ({ value, onChange }) => {
+  const append = (ch) => onChange(value + ch);
+  const backspace = () => onChange(value.slice(0, -1));
+  return /* @__PURE__ */ jsxs("div", { className: "diamond-keypad", children: [
+    /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
+      /* @__PURE__ */ jsx(Btn, { label: "1", onClick: () => append("1") }),
+      /* @__PURE__ */ jsx(Btn, { label: "2", onClick: () => append("2") }),
+      /* @__PURE__ */ jsx(Btn, { label: "3", onClick: () => append("3") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
+      /* @__PURE__ */ jsx(Btn, { label: "4", onClick: () => append("4") }),
+      /* @__PURE__ */ jsx(Btn, { label: "5", onClick: () => append("5") }),
+      /* @__PURE__ */ jsx(Btn, { label: "6", onClick: () => append("6") }),
+      /* @__PURE__ */ jsx(Btn, { label: "7", onClick: () => append("7") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
+      /* @__PURE__ */ jsx(Btn, { label: "8", onClick: () => append("8") }),
+      /* @__PURE__ */ jsx(Btn, { label: "9", onClick: () => append("9") }),
+      /* @__PURE__ */ jsx(Btn, { label: "0", onClick: () => append("0") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "diamond-keypad-row", children: [
+      /* @__PURE__ */ jsx(Btn, { label: ".", extraClass: "keypad-btn-decimal", onClick: () => append(".") }),
+      /* @__PURE__ */ jsx(Btn, { label: "⌫", extraClass: "keypad-btn-backspace", onClick: backspace })
+    ] })
+  ] });
+};
 function collectItemIds(rows) {
   return rows.flatMap((row) => row.items.map((item) => item.itemId));
 }
@@ -12948,7 +13712,7 @@ const MatcherWidget = ({
   const { rows, colors: userColors, groupCount } = widget;
   const widgetsMap = widgets ?? EMPTY_WIDGETS;
   const palette = useMemo(
-    () => resolveMatcherPalette(userColors, groupCount),
+    () => resolveGroupPalette(userColors, groupCount),
     [userColors, groupCount]
   );
   const textColors = useMemo(
@@ -12964,13 +13728,21 @@ const MatcherWidget = ({
       setAssignments((prev) => {
         const current = prev[itemId] ?? null;
         const next = current === null ? 0 : current + 1 >= groupCount ? null : current + 1;
-        const updated = { ...prev, [itemId]: next };
-        onChange(widgetId, buildGroups(updated));
-        return updated;
+        return { ...prev, [itemId]: next };
       });
     },
-    [groupCount, onChange, widgetId]
+    [groupCount]
   );
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    onChangeRef.current(widgetId, buildGroups(assignments));
+  }, [assignments, widgetId]);
   const maxCols = useMemo(
     () => rows.length === 0 ? 1 : Math.max(...rows.map((r) => r.items.length)),
     [rows]
@@ -12991,9 +13763,9 @@ const MatcherWidget = ({
           {
             type: "button",
             className: `matcher-card${isSelected ? " matcher-card--selected" : ""}`,
-            style: color ? {
-              "--matcher-card-color": color,
-              "--matcher-card-text-color": textColors[colorIdx]
+            style: colorIdx !== null && color ? {
+              "--matcher-card-color": `var(--matcher-group-${colorIdx + 1}-color, ${color})`,
+              "--matcher-card-text-color": `var(--matcher-group-${colorIdx + 1}-text-color, ${textColors[colorIdx]})`
             } : void 0,
             onClick: () => handleCardClick(item.itemId),
             "aria-pressed": isSelected,
@@ -13035,6 +13807,9 @@ function isFractionWidget(widget) {
 function isMatcherWidget(widget) {
   return widget.type === "matcher";
 }
+function isVisualFractionWidget(widget) {
+  return widget.type === "visual-fraction";
+}
 const WidgetRenderer = ({
   widget,
   widgetId,
@@ -13042,6 +13817,8 @@ const WidgetRenderer = ({
   values = {},
   isDropped = false,
   validationStatus = null,
+  numValidationStatus = null,
+  denValidationStatus = null,
   droppedInputs = /* @__PURE__ */ new Set(),
   widgets,
   onChange,
@@ -13060,6 +13837,7 @@ const WidgetRenderer = ({
         inputType: widget.inputType,
         length: widget.inputType === "string" ? widget.length : void 0,
         digits: widget.inputType === "numeric" ? widget.digits : void 0,
+        placeholder: widget.placeholder,
         onChange,
         onFocus: onInputFocus
       }
@@ -13088,14 +13866,24 @@ const WidgetRenderer = ({
     );
   }
   if (isNumericKeypadWidget(widget)) {
+    const keypadOnChange = onKeypadChange || (() => {
+    });
+    if (widget.style === "classic") {
+      return /* @__PURE__ */ jsx(
+        NumericKeypad,
+        {
+          value: strValue,
+          includeOperators: widget.includeOperators,
+          includeDecimal: widget.includeDecimal,
+          onChange: keypadOnChange
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
-      NumericKeypad,
+      DiamondKeypad,
       {
         value: strValue,
-        includeOperators: widget.includeOperators,
-        includeDecimal: widget.includeDecimal,
-        onChange: onKeypadChange || (() => {
-        })
+        onChange: keypadOnChange
       }
     );
   }
@@ -13109,8 +13897,11 @@ const WidgetRenderer = ({
         values,
         droppedInputs,
         validationStatus,
+        numValidationStatus,
+        denValidationStatus,
         onChange,
-        onFocus: onInputFocus
+        onFocus: onInputFocus,
+        placeholder: widget.placeholder
       }
     );
   }
@@ -13127,6 +13918,18 @@ const WidgetRenderer = ({
       }
     );
   }
+  if (isVisualFractionWidget(widget)) {
+    return /* @__PURE__ */ jsx(
+      VisualFraction,
+      {
+        widgetId,
+        widget,
+        value: Array.isArray(value) && value.every((v) => typeof v === "number") ? value : void 0,
+        validationStatus,
+        onChange: (id, nextValue) => onChange(id, nextValue)
+      }
+    );
+  }
   return null;
 };
 const EPSILON = 10 ** -INTERNAL_PRECISION;
@@ -13148,7 +13951,7 @@ const getMajorTicks = (min, max, step) => {
   const count = Math.floor((max - min) / step);
   const ticks = Array.from({ length: count + 1 }, (_, i) => cleanFloat(min + i * step));
   const lastTick = ticks[ticks.length - 1];
-  if (!almostEqual(lastTick, max)) {
+  if (roundTick(lastTick) !== roundTick(max)) {
     ticks.push(max);
   } else {
     ticks[ticks.length - 1] = max;
@@ -13629,6 +14432,102 @@ const CounterControls = ({
   ] }),
   counter.name && /* @__PURE__ */ jsx("span", { className: "number-line-counter-label", children: counter.name })
 ] });
+const CONTENT_ROW_EXTRA_SPACE = 8;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useMeasuredPositionContentHeight(positionIds) {
+  const [heightPx, setHeightPx] = useState(null);
+  const elementsRef = useRef(/* @__PURE__ */ new Map());
+  const refCallbacksRef = useRef(/* @__PURE__ */ new Map());
+  const observerRef = useRef(null);
+  const measureFrameRef = useRef(null);
+  const idsKey = positionIds.join("|");
+  const runMeasure = useCallback(() => {
+    let maxHeight = 0;
+    for (const element of elementsRef.current.values()) {
+      const rectHeight = element.getBoundingClientRect().height;
+      const measuredHeight = Math.max(rectHeight, element.offsetHeight);
+      maxHeight = Math.max(maxHeight, measuredHeight);
+    }
+    const nextHeight = maxHeight > 0 ? Math.ceil(maxHeight + CONTENT_ROW_EXTRA_SPACE) : null;
+    setHeightPx((current) => current === nextHeight ? current : nextHeight);
+  }, []);
+  const measure = useCallback(() => {
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+      runMeasure();
+      return;
+    }
+    if (measureFrameRef.current !== null) return;
+    measureFrameRef.current = window.requestAnimationFrame(() => {
+      measureFrameRef.current = null;
+      runMeasure();
+    });
+  }, [runMeasure]);
+  useEffect(
+    () => () => {
+      if (measureFrameRef.current !== null && typeof window !== "undefined") {
+        window.cancelAnimationFrame(measureFrameRef.current);
+        measureFrameRef.current = null;
+      }
+    },
+    []
+  );
+  const getPositionContentRef = useCallback(
+    (id) => {
+      const cachedRef = refCallbacksRef.current.get(id);
+      if (cachedRef) return cachedRef;
+      const refCallback = (node) => {
+        const current = elementsRef.current.get(id);
+        if (current && observerRef.current) {
+          observerRef.current.unobserve(current);
+        }
+        if (node) {
+          elementsRef.current.set(id, node);
+          observerRef.current?.observe(node);
+        } else {
+          elementsRef.current.delete(id);
+        }
+        measure();
+      };
+      refCallbacksRef.current.set(id, refCallback);
+      return refCallback;
+    },
+    [measure]
+  );
+  useEffect(() => {
+    const liveIds = new Set(positionIds);
+    for (const id of elementsRef.current.keys()) {
+      if (!liveIds.has(id)) {
+        elementsRef.current.delete(id);
+      }
+    }
+    for (const id of refCallbacksRef.current.keys()) {
+      if (!liveIds.has(id)) {
+        refCallbacksRef.current.delete(id);
+      }
+    }
+    measure();
+  }, [idsKey, measure]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof ResizeObserver === "undefined") {
+      measure();
+      return void 0;
+    }
+    const observer = new ResizeObserver(measure);
+    observerRef.current = observer;
+    for (const element of elementsRef.current.values()) {
+      observer.observe(element);
+    }
+    measure();
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+    };
+  }, [idsKey, measure]);
+  return {
+    positionContentHeight: heightPx === null ? void 0 : `${heightPx}px`,
+    getPositionContentRef
+  };
+}
 const NumberLineRenderer = ({
   item,
   widgets,
@@ -13663,7 +14562,7 @@ const NumberLineRenderer = ({
     return step;
   }, [counter, counterCount, min, max, step]);
   const majorTicks = useMemo(
-    () => getMajorTicks(min, max, effectiveStep).map(roundTick),
+    () => [...new Set(getMajorTicks(min, max, effectiveStep).map(roundTick))],
     [min, max, effectiveStep]
   );
   const minorValues = useMemo(
@@ -13672,28 +14571,38 @@ const NumberLineRenderer = ({
   );
   const showArrowRight = lineStyle === "arrow-right" || lineStyle === "arrow-both";
   const showArrowLeft = lineStyle === "arrow-left" || lineStyle === "arrow-both";
-  const isDragMode = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
+  const hasDragOptions = Boolean(widgets[DRAG_OPTIONS_WIDGET_ID]);
+  const isAxisDragMode = hasDragOptions && item.dragMode === "axis";
   const inputTickSet = useMemo(() => {
-    if (isDragMode) return /* @__PURE__ */ new Set();
+    if (isAxisDragMode) return /* @__PURE__ */ new Set();
     return new Set(
       positions.filter((pos) => getPositionWidgetId(pos.content) !== null).map((pos) => roundTick(pos.value))
     );
-  }, [isDragMode, positions]);
+  }, [isAxisDragMode, positions]);
   const visiblePositions = useMemo(
-    () => positions.filter((pos) => !isDragMode || getPositionWidgetId(pos.content) === null),
-    [isDragMode, positions]
+    () => positions.filter((pos) => !isAxisDragMode || getPositionWidgetId(pos.content) === null),
+    [isAxisDragMode, positions]
+  );
+  const visiblePositionIds = useMemo(
+    () => visiblePositions.map((pos) => pos.id),
+    [visiblePositions]
   );
+  const { positionContentHeight, getPositionContentRef } = useMeasuredPositionContentHeight(visiblePositionIds);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `number-line${isDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
-      style: { [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%` },
+      className: `number-line${isAxisDragMode ? " number-line--drag-mode" : ""}${lineStyle === "line" ? " number-line--style-line" : ""}`,
+      style: {
+        [CSS_VAR_SIDE_PAD]: `${SIDE_PAD}%`,
+        ...positionContentHeight && { "--nl-position-content-height": positionContentHeight }
+      },
       role: "group",
       "aria-label": `Number line from ${min} to ${max}`,
       children: [
         visiblePositions.length > 0 && /* @__PURE__ */ jsx("div", { className: "number-line-content-row", children: visiblePositions.map((pos) => /* @__PURE__ */ jsx(
           "div",
           {
+            ref: getPositionContentRef(pos.id),
             className: "number-line-position-content",
             style: { left: `${toPercent(pos.value, min, max)}%` },
             children: pos.content.map((subItem) => /* @__PURE__ */ jsx(
@@ -13712,7 +14621,7 @@ const NumberLineRenderer = ({
           },
           pos.id
         )) }),
-        isDragMode ? /* @__PURE__ */ jsx(
+        isAxisDragMode ? /* @__PURE__ */ jsx(
           FreeDragAxis,
           {
             axisDropId: `${item.id}--nl-axis`,
@@ -13823,6 +14732,7 @@ function groupLineItems(items) {
   }
   return groups;
 }
+const toValidationStatus = (v) => v === true ? "correct" : v === false ? "incorrect" : null;
 const LayoutRenderer = ({
   item,
   widgets,
@@ -13838,8 +14748,10 @@ const LayoutRenderer = ({
       const hasArabic = isArabic(item.value);
       return /* @__PURE__ */ jsx("span", { className: `question-text ${hasArabic ? "question-text-arabic" : ""}`, children: item.value });
     }
-    case JSON_TYPES.TEXT:
-      return /* @__PURE__ */ jsx("span", { className: `text-item ${isArabic(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
+    case JSON_TYPES.TEXT: {
+      const isNum = /^[\d.,\s]+$/.test(item.value);
+      return /* @__PURE__ */ jsx("span", { className: `text-item ${isNum ? "text-item-number" : ""} ${isArabic(item.value) ? "text-item-arabic" : "text-item-not-arabic"}`, children: item.value });
+    }
     case JSON_TYPES.HIGHLIGHTED_TEXT: {
       const hasArabic = isArabic(item.value);
       const dirAttr = !hasArabic ? "ltr" : void 0;
@@ -13896,7 +14808,7 @@ const LayoutRenderer = ({
       if (!widget) return null;
       const isCorrect = validationDetails?.[item.widgetId];
       const validationStatus = isCorrect === true ? "correct" : isCorrect === false ? "incorrect" : null;
-      const widgetKey = widget.type === JSON_TYPES.MATCHER ? `${item.widgetId}-${resetKey}` : item.widgetId;
+      const widgetKey = widget.type === JSON_TYPES.MATCHER || widget.type === JSON_TYPES.VISUAL_FRACTION ? `${item.widgetId}-${resetKey}` : item.widgetId;
       return /* @__PURE__ */ jsx(
         WidgetRenderer,
         {
@@ -13906,6 +14818,8 @@ const LayoutRenderer = ({
           values,
           isDropped: droppedInputs.has(item.widgetId),
           validationStatus,
+          numValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__num`]),
+          denValidationStatus: toValidationStatus(validationDetails?.[`${item.widgetId}__den`]),
           droppedInputs,
           widgets,
           onChange,
@@ -14011,6 +14925,27 @@ const ExerciseRenderer = forwardRef(({
       for (const [id, v] of Object.entries(result.details)) {
         details[id] = v.isCorrect;
       }
+      for (const [widgetId, widget] of Object.entries(json.widgets)) {
+        if (widget.type !== JSON_TYPES.FRACTION) continue;
+        if (!(widgetId in details)) continue;
+        const answer = json.validation?.answers?.[widgetId];
+        if (!answer) continue;
+        const [expectedNum, expectedDen] = answer.split("/", 2);
+        if (!expectedNum || !expectedDen) continue;
+        if (details[widgetId]) {
+          if (widget.numerator === null) details[`${widgetId}__num`] = true;
+          if (widget.denominator === null) details[`${widgetId}__den`] = true;
+        } else {
+          if (widget.numerator === null) {
+            const u = values[`${widgetId}__num`];
+            details[`${widgetId}__num`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedNum);
+          }
+          if (widget.denominator === null) {
+            const u = values[`${widgetId}__den`];
+            details[`${widgetId}__den`] = typeof u === "string" && u !== "" && normalize(u) === normalize(expectedDen);
+          }
+        }
+      }
       setValidationDetails(details);
       onSubmit?.(values);
       return result;
@@ -14301,9 +15236,14 @@ export {
   TextItemSchema,
   ToolNodeSchema,
   TransformError,
+  VISUAL_FRACTION_DEFAULT_SIZE,
+  VISUAL_FRACTION_MAX_DIVISIONS,
+  VISUAL_FRACTION_SHAPE,
+  VISUAL_FRACTION_SHAPES,
   ValidationError,
   ValidationJSONSchema,
   ValidationNodeSchema,
+  VisualFractionInlineSchema,
   WidgetJSONSchema,
   WidgetRefSchema,
   WidgetRenderer,
@@ -14328,6 +15268,7 @@ export {
   createSpace,
   createStringInput,
   createTextBlock,
+  createVisualFraction,
   evaluate,
   extractVariables as extractExpressionVariables,
   findValidCombination,
@@ -14371,6 +15312,7 @@ export {
   isToolNode,
   isValidExpression,
   isValidationNode,
+  isVisualFractionInline,
   isWidgetRef,
   parse,
   parseFractionKey,
@@ -14387,6 +15329,7 @@ export {
   validateExpression,
   validateInputFormats,
   validateSimple,
+  validateVisualFractionCapacity,
   validateWidgetJSON,
   validateWidgetJSONSafe
 };