@khanacademy/perseus 52.0.1 → 53.1.0

package/dist/es/index.js

@@ -1,10 +1,9 @@
 import * as KAS from '@khanacademy/kas';
 import { MathInputI18nContext, CursorContext, getKeyTranslator, createMathField, getCursorContext, DesktopKeypad, convertDotToTimesByLocale, mathQuillInstance, KeypadInput, KeypadType, KeyArray, keypadElementPropType } from '@khanacademy/math-input';
-import { PerseusError, Errors, expressionLogic, getExpressionPublicWidgetOptions, getDecimalSeparator, approximateDeepEqual, pluck, getWidgetIdsFromContent, mapObject, passageRefLogic, radioLogic, getCategorizerPublicWidgetOptions, GrapherUtil as GrapherUtil$1, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getMatrixSize, measurerLogic, getOrdererPublicWidgetOptions, addLibraryVersionToPerseusDebug, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
+import { PerseusError, Errors, expressionLogic, getExpressionPublicWidgetOptions, getDecimalSeparator, approximateDeepEqual, pluck, CoreWidgetRegistry, getUpgradedWidgetOptions, mapObject, getNumericInputPublicWidgetOptions, passageRefLogic, radioLogic, getRadioPublicWidgetOptions, getCategorizerPublicWidgetOptions, getCSProgramPublicWidgetOptions, getDropdownPublicWidgetOptions, GrapherUtil as GrapherUtil$1, getGrapherPublicWidgetOptions, getIFramePublicWidgetOptions, lockedFigureColors, lockedFigureFillStyles, approximateEqual, getInteractiveGraphPublicWidgetOptions, getLabelImagePublicWidgetOptions, getMatrixPublicWidgetOptions, getMatrixSize, measurerLogic, getNumberLinePublicWidgetOptions, getOrdererPublicWidgetOptions, getPlotterPublicWidgetOptions, getSorterPublicWidgetOptions, getTablePublicWidgetOptions, addLibraryVersionToPerseusDebug, upgradeWidgetInfoToLatestVersion, getWidgetIdsFromContentByType } from '@khanacademy/perseus-core';
 export { isFailure, isSuccess, parseAndMigratePerseusArticle, parseAndMigratePerseusItem, parsePerseusItem } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import { linterContextDefault, Rule } from '@khanacademy/perseus-linter';
-import { scoreExpression, validateExpression, KhanAnswerTypes, scoreInputNumber, inputNumberAnswerTypes, scoreNumericInput, scoreRadio, validateRadio, scoreCategorizer, validateCategorizer, scoreCSProgram, scoreDropdown, validateDropdown, scoreGrapher, scoreIframe, scoreInteractiveGraph, scoreLabelImage, scoreLabelImageMarker, scoreMatcher, scoreMatrix, validateMatrix, scoreNumberLine, validateNumberLine, scoreOrderer, validateOrderer, scorePlotter, validatePlotter, scoreSorter, validateSorter, scoreTable, validateTable } from '@khanacademy/perseus-score';
 import { View, RenderStateRoot, Id, useOnMountEffect, useLatestRef, Text as Text$2 } from '@khanacademy/wonder-blocks-core';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import { HeadingMedium, LabelSmall, LabelLarge, Body, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -21,6 +20,7 @@ import { color, spacing, font } from '@khanacademy/wonder-blocks-tokens';
 import $ from 'jquery';
 import { v4 } from 'uuid';
 import PropTypes from 'prop-types';
+import { KhanAnswerTypes, emptyWidgetsFunctional, scoreWidgetsFunctional, flattenScores, inputNumberAnswerTypes, scoreRadio, scoreLabelImageMarker } from '@khanacademy/perseus-score';
 import { entries, UnreachableCaseError, keys } from '@khanacademy/wonder-stuff-core';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import { point, KhanMath, number, vector as vector$3, line, geometry, angles, coefficients } from '@khanacademy/kmath';
@@ -249,7 +249,7 @@ const mockStrings = {
     num,
     x,
     y
-  }) => `Point ${num} at ${x} comma ${y}`,
+  }) => `Point ${num} at ${x} comma ${y}.`,
   srInteractiveElements: ({
     elements
   }) => `Interactive elements: ${elements}`,
@@ -437,7 +437,32 @@ const mockStrings = {
     point2Y,
     point3X,
     point3Y
-  }) => `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`
+  }) => `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`,
+  srPolygonGraph: "A polygon.",
+  srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
+  srPolygonGraphPointsNum: ({
+    num
+  }) => `The polygon has ${num} points.`,
+  srPolygonGraphPointsOne: "The polygon has 1 point.",
+  srPolygonElementsNum: ({
+    num
+  }) => `A polygon with ${num} points.`,
+  srPolygonElementsOne: "A polygon with 1 point.",
+  srPolygonPointAngleApprox: ({
+    angle
+  }) => `Angle approximately equal to ${angle} degrees.`,
+  srPolygonPointAngle: ({
+    angle
+  }) => `Angle equal to ${angle} degrees.`,
+  srPolygonSideLength: ({
+    pointNum,
+    length
+  }) => `A line segment, length equal to ${length} units, connects to point ${pointNum}.`,
+  srPolygonSideLengthApprox: ({
+    pointNum,
+    length
+  }) => `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`,
+  srUnlimitedPolygonEmpty: "An empty coordinate plane."
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -1389,7 +1414,6 @@ const ClassNames = {
     SELECTED: "perseus-radio-selected",
     OPTION_CONTENT: "perseus-radio-option-content"
   },
-  INTERACTIVE: "perseus-interactive",
   CORRECT: "perseus-correct",
   INCORRECT: "perseus-incorrect",
   UNANSWERED: "perseus-unanswered",
@@ -1637,7 +1661,6 @@ class Expression extends React.Component {
     // eslint-disable-next-line react/no-string-refs
     , {
       ref: "input",
-      className: ClassNames.INTERACTIVE,
       value: this.props.value,
       onChange: this.changeAndTrack,
       convertDotToTimes: this.props.times,
@@ -1750,7 +1773,6 @@ var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
   accessible: true,
-  defaultAlignment: "inline-block",
   widget: ExpressionWithDependencies,
   transform: widgetOptions => {
     const {
@@ -1775,12 +1797,6 @@ var Expression$1 = {
   propUpgrades: expressionLogic.widgetOptionsUpgrades,
   // For use by the editor
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusExpressionUserInput'.
-  scorer: scoreExpression,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusExpressionUserInput'.
-  validator: validateExpression,
   getPublicWidgetOptions: getExpressionPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
@@ -3061,10 +3077,6 @@ const pureMdMax$1 = "1023px";
 const pureLgMax$1 = "1279px";
 // @tableBackgroundAccent: #f9f9f9; // for striping
 const tableBackgroundAccent = "#F9F9F9";
-// @zIndexAboveScratchpad: @zIndexScratchPad + 1;
-const zIndexAboveScratchpad$1 = 2;
-// @zIndexInteractiveComponent: @zIndexAboveScratchpad + 1;
-const zIndexInteractiveComponent$1 = 3;
 // @phoneMargin: 16px;
 const phoneMargin = 16;
 const negativePhoneMargin = -16;
@@ -3108,8 +3120,6 @@ var constants = /*#__PURE__*/Object.freeze({
   pureMdMax: pureMdMax$1,
   pureLgMax: pureLgMax$1,
   tableBackgroundAccent: tableBackgroundAccent,
-  zIndexAboveScratchpad: zIndexAboveScratchpad$1,
-  zIndexInteractiveComponent: zIndexInteractiveComponent$1,
   phoneMargin: phoneMargin,
   negativePhoneMargin: negativePhoneMargin,
   hintBorderWidth: hintBorderWidth,
@@ -9853,7 +9863,7 @@ class WrappedLine extends WrappedDrawing {
 
 /* eslint-disable @babel/no-invalid-this */
 const {
-  clockwise: clockwise$3,
+  clockwise: clockwise$2,
   reverseVector: reverseVector$1
 } = geometry;
 function scaledDistanceFromAngle(angle) {
@@ -11091,7 +11101,7 @@ _.extend(GraphUtils.Graphie.prototype, {
       // Temporary objects
       _.invoke(polygon.temp, "remove");
       polygon.temp = [];
-      const isClockwise = clockwise$3(polygon.coords);
+      const isClockwise = clockwise$2(polygon.coords);
 
       // Update angle labels
       if (polygon.angleLabels.length || polygon.showRightAngleMarkers.length) {
@@ -14482,7 +14492,7 @@ function sum(array) {
     return memo + arg;
   }, 0);
 }
-function clockwise$2(points) {
+function clockwise$1(points) {
   const segments = _.zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = _.map(segments, function (segment) {
     const p1 = segment[0];
@@ -14548,7 +14558,7 @@ const draw$1 = {
     const graphie = this.graphie;
     const self = this;
     const coords = _.invoke(state.points, "coord");
-    const isClockwise = clockwise$2(coords);
+    const isClockwise = clockwise$1(coords);
     const n = coords.length;
 
     // graphie.labelAngle and similar methods attempt to re-use the label
@@ -16285,9 +16295,29 @@ class Zoomable extends React.Component {
     if (!this._isMounted) {
       return;
     }
+
+    // When a zoomable item is contained within a collapsed parent (such as an Explanation widget),
+    //      the parent node has zero width, which causes the scale to be miscalculated.
+    // Therefore, we check to see if the node has a valid width, and if it doesn't,
+    //      then we traverse up the DOM tree and look for the closest "perseus-renderer"
+    //      (which should have a width).
+    // To be cautious, we also account for the possibility that we can't find any parents with a valid width
+    //      (not that they don't exist, just that we can't find them).
+    let parentNode = this._node;
+    let currentNode = parentNode;
+    while (currentNode && currentNode.offsetWidth === 0) {
+      var _currentNode$parentEl, _currentNode$parentEl2;
+      // When traversing up the DOM tree, we need to start at the "parentElement"
+      //      because "closest()" can match the current element,
+      //      and if it does so, then we are stuck in an infinite loop.
+      currentNode = (_currentNode$parentEl = (_currentNode$parentEl2 = currentNode.parentElement) == null ? void 0 : _currentNode$parentEl2.closest(".perseus-renderer")) != null ? _currentNode$parentEl : null;
+    }
+    if (currentNode) {
+      parentNode = currentNode;
+    }
     const parentBounds = {
-      width: this._node.offsetWidth,
-      height: this._node.offsetHeight
+      width: parentNode.offsetWidth,
+      height: parentNode.offsetHeight
     };
     const childBounds = this.props.computeChildBounds(this._node, parentBounds);
 
@@ -17334,130 +17364,162 @@ class QuestionParagraph extends React.Component {
   }
 }
 
-const noScore = {
-  type: "points",
-  earned: 0,
-  total: 0,
-  message: null
-};
-
 /**
- * If a widget says that it is empty once it is graded.
- * Trying to encapsulate references to the score format.
- */
-function scoreIsEmpty(score) {
-  // HACK(benkomalo): ugh. this isn't great; the Perseus score objects
-  // overload the type "invalid" for what should probably be three
-  // distinct cases:
-  //  - truly empty or not fully filled out
-  //  - invalid or malformed inputs
-  //  - "almost correct" like inputs where the widget wants to give
-  //  feedback (e.g. a fraction needs to be reduced, or `pi` should
-  //  be used instead of 3.14)
-  //
-  //  Unfortunately the coercion happens all over the place, as these
-  //  Perseus style score objects are created *everywhere* (basically
-  //  in every widget), so it's hard to change now. We assume that
-  //  anything with a "message" is not truly empty, and one of the
-  //  latter two cases for now.
-  return score.type === "invalid" && (!score.message || score.message.length === 0);
-}
-
-/**
- * Combine two score objects.
+ * TranslationLinter asynchronously calls Khan Academy's poentry linter.
  *
- * Given two score objects for two different widgets, combine them so that
- * if one is wrong, the total score is wrong, etc.
+ * The poentry linter checks for issues that prevent content from being
+ * translated. This linter is KA-specific and so TranslationLinter does not do
+ * anything in non-KA environments.
  */
-function combineScores(scoreA, scoreB) {
-  let message;
-  if (scoreA.type === "points" && scoreB.type === "points") {
-    if (scoreA.message && scoreB.message && scoreA.message !== scoreB.message) {
-      // TODO(alpert): Figure out how to combine messages usefully
-      message = null;
-    } else {
-      message = scoreA.message || scoreB.message;
-    }
-    return {
-      type: "points",
-      earned: scoreA.earned + scoreB.earned,
-      total: scoreA.total + scoreB.total,
-      message: message
-    };
-  }
-  if (scoreA.type === "points" && scoreB.type === "invalid") {
-    return scoreB;
-  }
-  if (scoreA.type === "invalid" && scoreB.type === "points") {
-    return scoreA;
-  }
-  if (scoreA.type === "invalid" && scoreB.type === "invalid") {
-    if (scoreA.message && scoreB.message && scoreA.message !== scoreB.message) {
-      // TODO(alpert): Figure out how to combine messages usefully
-      message = null;
-    } else {
-      message = scoreA.message || scoreB.message;
-    }
-    return {
-      type: "invalid",
-      message: message
-    };
-  }
 
+// A LintCB is called once the linter has been run.
+
+// msec to wait before we actually call the linter after receiving the
+// last call. The timer is reset if the lint is called during the wait.
+const DEBOUNCE_TIMEOUT = 1000;
+class TranslationLinter {
+  constructor() {
+    // To avoid linting when nothing has changed.
+    this.previousContent = null;
+    /**
+     * Runs the poentry linter on the given perseus string asynchronously.
+     *
+     * It doesn't do anything unless we're in a KA environment.
+     *
+     * onLintErrorsGenerated is called even if there are no errors. It is not
+     * called if perseusStr is unchanged from the last call.
+     *
+     * Linting is relatively expensive -- so we debounce linting each instance
+     * for some amount of time.
+     */
+    this.runLinter = debounce$1((perseusStr, onLintErrorsGenerated) => {
+      // TODO(FEI-5003): Do we still need to check for 'KA'?
+      if (typeof KA === "undefined") {
+        return;
+      }
+      if (perseusStr === this.previousContent) {
+        return;
+      }
+      this.previousContent = perseusStr;
+      if (perseusStr === "") {
+        onLintErrorsGenerated([]);
+        return;
+      }
+      fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          // The poentry linter verifies that the translation from
+          // the original text to the translated text is sane. We
+          // want to ensure that the translation from English to
+          // English is sane, so msgid === mstr.
+          msgid: perseusStr,
+          // msgid is the original text
+          msgstr: perseusStr,
+          // msgstr is the translated text
+          format: "perseus_text",
+          filename: ""
+        }),
+        method: "POST"
+      }).then(response => {
+        if (response.status >= 400) {
+          return {
+            status: "error",
+            message: "Could not run i18n linter."
+          };
+        }
+        return response.json();
+      }, rejection => {
+        return {
+          status: "error",
+          message: "Could not run i18n linter."
+        };
+      }).then(json => {
+        if (json.status === "error") {
+          onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
+        } else {
+          onLintErrorsGenerated([]);
+        }
+      });
+    }, DEBOUNCE_TIMEOUT);
+  }
   /**
-   * The above checks cover all combinations of score type, so if we get here
-   * then something is amiss with our inputs.
+   * Applies an array of errors generated by linters without position
+   * information (TranslationLinter and the legacy getSaveWarnings()) to the
+   * top of a Perseus tree.
    */
-  throw new PerseusError("PerseusScore with unknown type encountered", Errors.InvalidInput, {
-    metadata: {
-      scoreA: JSON.stringify(scoreA),
-      scoreB: JSON.stringify(scoreB)
+  applyLintErrors(parsedMarkdown, translationLintErrors) {
+    // These lint errors do not have position data associated with
+    // them, so we just plop them at the top.
+    if (translationLintErrors.length) {
+      const errorText = translationLintErrors.join("\n\n");
+      parsedMarkdown.unshift({
+        content: {
+          type: "text",
+          content: ""
+        },
+        insideTable: false,
+        message: errorText,
+        ruleName: "legacy-error",
+        severity: Rule.Severity.ERROR,
+        type: "lint"
+      });
     }
-  });
-}
-function flattenScores(widgetScoreMap) {
-  return Object.values(widgetScoreMap).reduce(combineScores, noScore);
-}
-function isCorrect(score) {
-  return score.type === "points" && score.earned >= score.total;
+  }
 }
-function keScoreFromPerseusScore(score,
-// It's weird, but this is what we're passing it
-guess, state) {
-  if (score.type === "points") {
-    return {
-      empty: false,
-      correct: isCorrect(score),
-      message: score.message,
-      guess: guess,
-      state: state
-    };
+
+/**
+ * Preprocess TeX code to convert things that MathJax doesn't know how to handle
+ * to things is does.
+ */
+var preprocessTex = (texCode => texCode
+// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
+// support (yet) with \begin{aligned}...\end{aligned} which renders
+// the same is supported by KaTeX.  It does the same for align*.
+// TODO(kevinb) update content to use aligned instead of align.
+// TODO(LEMS-1608) Remove this replacement as MathJax supports the
+// "align" macro correctly (and, in fact, it is not synonymous with
+// "aligned").
+.replace(/\{align[*]?\}/g, "{aligned}")
+// Replace non-breaking spaces with regular spaces.
+.replace(/[\u00a0]/g, " "));
+
+const {
+  interactiveSizes
+} = constants;
+
+// Note: these size cutoffs represent content-width cutoffs as specified in
+// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
+// TODO(benkomalo): these values aren't used in JS outside of this file, but
+// are coupled to the values in styles/styles.less - DRY it up at some point
+const smMax = articleMaxWidthTableInPx;
+const mdMax = articleMaxWidthInPx;
+const containerSizeClass = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "xlarge"
+};
+const getClassFromWidth = width => {
+  if (!width) {
+    return containerSizeClass.MEDIUM;
   }
-  if (score.type === "invalid") {
-    return {
-      empty: true,
-      correct: false,
-      message: score.message,
-      suppressAlmostThere: score.suppressAlmostThere,
-      guess: guess,
-      state: state
-    };
+  if (width <= smMax) {
+    return containerSizeClass.SMALL;
   }
-  throw new PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  "Invalid score type: " + score.type, Errors.InvalidInput, {
-    metadata: {
-      score: JSON.stringify(score),
-      guess: JSON.stringify(guess),
-      state: JSON.stringify(state)
-    }
-  });
-}
+  if (width <= mdMax) {
+    return containerSizeClass.MEDIUM;
+  }
+  return containerSizeClass.LARGE;
+};
+const getInteractiveBoxFromSizeClass = sizeClass => {
+  if (sizeClass === containerSizeClass.SMALL) {
+    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
+  }
+  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
+};
 
-const DEFAULT_ALIGNMENT$1 = "block";
-// NOTE(kevinb): "default" is not one in `validAlignments`.
-const DEFAULT_SUPPORTED_ALIGNMENTS = ["default"];
-const DEFAULT_STATIC = false;
 const DEFAULT_TRACKING = "";
 const DEFAULT_LINTABLE = false;
 const widgets = {};
@@ -17474,7 +17536,6 @@ const registerWidgets = widgets => {
   widgets.forEach(widget => {
     registerWidget(widget.name, widget);
   });
-  validateAlignments();
 };
 
 /**
@@ -17558,17 +17619,9 @@ const getWidgetExport = name => {
   var _widgets$name3;
   return (_widgets$name3 = widgets[name]) != null ? _widgets$name3 : null;
 };
-const getWidgetValidator = name => {
-  var _widgets$name$validat, _widgets$name4;
-  return (_widgets$name$validat = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.validator) != null ? _widgets$name$validat : null;
-};
-const getWidgetScorer = name => {
-  var _widgets$name$scorer, _widgets$name5;
-  return (_widgets$name$scorer = (_widgets$name5 = widgets[name]) == null ? void 0 : _widgets$name5.scorer) != null ? _widgets$name$scorer : null;
-};
 const getPublicWidgetOptionsFunction = name => {
-  var _widgets$name$getPubl, _widgets$name6;
-  return (_widgets$name$getPubl = (_widgets$name6 = widgets[name]) == null ? void 0 : _widgets$name6.getPublicWidgetOptions) != null ? _widgets$name$getPubl : i => i;
+  var _widgets$name$getPubl, _widgets$name4;
+  return (_widgets$name$getPubl = (_widgets$name4 = widgets[name]) == null ? void 0 : _widgets$name4.getPublicWidgetOptions) != null ? _widgets$name$getPubl : i => i;
 };
 const getEditor = name => {
   return _.has(editors, name) ? editors[name] : null;
@@ -17612,109 +17665,6 @@ const isAccessible = widgetInfo => {
 const getAllWidgetTypes = () => {
   return _.keys(widgets);
 };
-const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
-  const type = oldWidgetInfo.type;
-  // NOTE(jeremy): This looks like it could be replaced by fixing types so
-  // that `type` is non-optional. But we're seeing this in Sentry today so I
-  // suspect we have legacy data (potentially unpublished) and we should
-  // figure that out before depending solely on types.
-  if (!_.isString(type)) {
-    throw new PerseusError("widget type must be a string, but was: " + type, Errors.Internal);
-  }
-  const widgetExports = widgets[type];
-  if (widgetExports == null) {
-    // If we have a widget that isn't registered, we can't upgrade it
-    // TODO(aria): Figure out what the best thing to do here would be
-    return oldWidgetInfo;
-  }
-
-  // Unversioned widgets (pre-July 2014) are all implicitly 0.0
-  const initialVersion = oldWidgetInfo.version || {
-    major: 0,
-    minor: 0
-  };
-  const latestVersion = widgetExports.version || {
-    major: 0,
-    minor: 0
-  };
-
-  // If the widget version is later than what we understand (major
-  // version is higher than latest, or major versions are equal and minor
-  // version is higher than latest), don't perform any upgrades.
-  if (initialVersion.major > latestVersion.major || initialVersion.major === latestVersion.major && initialVersion.minor > latestVersion.minor) {
-    return oldWidgetInfo;
-  }
-
-  // We do a clone here so that it's safe to mutate the input parameter
-  // in propUpgrades functions (which I will probably accidentally do at
-  // some point, and we would like to not break when that happens).
-  let newEditorProps = _.clone(oldWidgetInfo.options) || {};
-  const upgradePropsMap = widgetExports.propUpgrades || {};
-
-  // Empty props usually mean a newly created widget by the editor,
-  // and are always considerered up-to-date.
-  // Mostly, we'd rather not run upgrade functions on props that are
-  // not complete.
-  if (_.keys(newEditorProps).length !== 0) {
-    // We loop through all the versions after the current version of
-    // the loaded widget, up to and including the latest version of the
-    // loaded widget, and run the upgrade function to bring our loaded
-    // widget's props up to that version.
-    // There is a little subtlety here in that we call
-    // upgradePropsMap[1] to upgrade *to* version 1,
-    // (not from version 1).
-    for (let nextVersion = initialVersion.major + 1; nextVersion <= latestVersion.major; nextVersion++) {
-      if (upgradePropsMap[String(nextVersion)]) {
-        newEditorProps = upgradePropsMap[String(nextVersion)](newEditorProps);
-      } else {
-        // This is a Log.error because it is unlikely to be hit in
-        // local testing, and a Log.error is slightly less scary in
-        // prod than a `throw new Error`
-        Log.error("No upgrade found for widget. Cannot render.", Errors.Internal, {
-          loggedMetadata: {
-            type,
-            fromMajorVersion: nextVersion - 1,
-            toMajorVersion: nextVersion
-          }
-        });
-        // But try to keep going anyways (yolo!)
-        // (Throwing an error here would just break the page
-        // silently anyways, so that doesn't seem much better
-        // than a halfhearted attempt to continue, however
-        // shallow...)
-      }
-    }
-  }
-
-  // Minor version upgrades (eg. new optional props) don't have
-  // transform functions. Instead, we fill in the new props with their
-  // defaults.
-  const defaultProps = type in editors ? editors[type].defaultProps : {};
-  newEditorProps = _extends({}, defaultProps, newEditorProps);
-  let alignment = oldWidgetInfo.alignment;
-
-  // Widgets that support multiple alignments will "lock in" the
-  // alignment to the alignment that would be listed first in the
-  // select box. If the widget only supports one alignment, the
-  // alignment value will likely just end up as "default".
-  if (alignment == null || alignment === "default") {
-    alignment = getSupportedAlignments(type)[0];
-  }
-  let widgetStatic = oldWidgetInfo.static;
-  if (widgetStatic == null) {
-    widgetStatic = DEFAULT_STATIC;
-  }
-  return _.extend({}, oldWidgetInfo, {
-    // maintain other info, like type
-    // After upgrading we guarantee that the version is up-to-date
-    version: latestVersion,
-    // Default graded to true (so null/undefined becomes true):
-    graded: oldWidgetInfo.graded != null ? oldWidgetInfo.graded : true,
-    alignment: alignment,
-    static: widgetStatic,
-    options: newEditorProps
-  });
-};
 const getRendererPropsForWidgetInfo = (widgetInfo, strings, problemNum) => {
   const type = widgetInfo.type;
   const widgetExports = widgets[type];
@@ -17756,70 +17706,6 @@ const traverseChildWidgets$3 = (widgetInfo, traverseRenderer) => {
   return widgetInfo;
 };
 
-/**
- * Handling for the optional alignments for widgets
- * See widget-container.jsx for details on how alignments are implemented.
- */
-
-/**
- * Returns the list of supported alignments for the given (string) widget
- * type. This is used primarily at editing time to display the choices
- * for the user.
- *
- * Supported alignments are given as an array of strings in the exports of
- * a widget's module.
- */
-const getSupportedAlignments = type => {
-  const widgetExport = widgets[type];
-  // @ts-expect-error - TS2322 - Type 'string[] | readonly Alignment[]' is not assignable to type 'readonly Alignment[]'.
-  return widgetExport && widgetExport.supportedAlignments || DEFAULT_SUPPORTED_ALIGNMENTS;
-};
-
-/**
- * For the given (string) widget type, determine the default alignment for
- * the widget. This is used at rendering time to go from "default" alignment
- * to the actual alignment displayed on the screen.
- *
- * The default alignment is given either as a string (called
- * `defaultAlignment`) or a function (called `getDefaultAlignment`) on
- * the exports of a widget's module.
- */
-const getDefaultAlignment = type => {
-  const widgetExports = widgets[type];
-  let alignment;
-  if (!widgetExports) {
-    return DEFAULT_ALIGNMENT$1;
-  }
-  if (widgetExports.getDefaultAlignment) {
-    alignment = widgetExports.getDefaultAlignment();
-  } else {
-    alignment = widgetExports.defaultAlignment;
-  }
-  return alignment || DEFAULT_ALIGNMENT$1;
-};
-const validAlignments = ["block", "inline-block", "inline", "float-left", "float-right", "full-width"];
-
-/**
- * Used at startup to fail fast if an alignment given by a widget is
- * invalid.
- */
-// TODO(alex): Change this to run as a testcase (vs. being run at runtime)
-// TODO(LP-10707): I think this can be completely removed because our TypeScript types
-// enforce this!
-const validateAlignments = () => {
-  _.each(widgets, function (widgetInfo) {
-    if (widgetInfo.defaultAlignment && !_.contains(validAlignments, widgetInfo.defaultAlignment)) {
-      throw new PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid defaultAlignment value: " + widgetInfo.defaultAlignment, Errors.InvalidInput);
-    }
-    if (widgetInfo.supportedAlignments) {
-      const unknownAlignments = _.difference(widgetInfo.supportedAlignments, validAlignments);
-      if (unknownAlignments.length) {
-        throw new PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid value for supportedAlignments: " + unknownAlignments.join(" "), Errors.InvalidInput);
-      }
-    }
-  });
-};
-
 /**
  * Handling for static mode for widgets that support it.
  */
@@ -17873,8 +17759,6 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getWidgetValidator: getWidgetValidator,
-  getWidgetScorer: getWidgetScorer,
   getPublicWidgetOptionsFunction: getPublicWidgetOptionsFunction,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -17883,265 +17767,14 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getPublicWidgets: getPublicWidgets,
   isAccessible: isAccessible,
   getAllWidgetTypes: getAllWidgetTypes,
-  upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
   traverseChildWidgets: traverseChildWidgets$3,
-  getSupportedAlignments: getSupportedAlignments,
-  getDefaultAlignment: getDefaultAlignment,
-  validateAlignments: validateAlignments,
   supportsStaticMode: supportsStaticMode,
   getStaticTransform: getStaticTransform,
   getTracking: getTracking,
   isLintable: isLintable
 });
 
-function getUpgradedWidgetOptions(oldWidgetOptions) {
-  return mapObject(oldWidgetOptions, (widgetInfo, widgetId) => {
-    if (!widgetInfo.type || !widgetInfo.alignment) {
-      const newValues = {};
-      if (!widgetInfo.type) {
-        // TODO: why does widget have no type?
-        // We don't want to derive type from widget ID
-        // see: LEMS-1845
-        newValues.type = widgetId.split(" ")[0];
-      }
-      if (!widgetInfo.alignment) {
-        newValues.alignment = "default";
-      }
-      widgetInfo = _extends({}, widgetInfo, newValues);
-    }
-    // TODO(LEMS-2656): remove TS suppression
-    return upgradeWidgetInfoToLatestVersion(widgetInfo);
-  });
-}
-
-/**
- * Checks the given user input to see if any answerable widgets have not been
- * "filled in" (ie. if they're empty). Another way to think about this
- * function is that its a check to see if we can score the provided input.
- */
-function emptyWidgetsFunctional(widgets,
-// This is a port of old code, I'm not sure why
-// we need widgetIds vs the keys of the widgets object
-widgetIds, userInputMap, strings, locale) {
-  return widgetIds.filter(id => {
-    const widget = widgets[id];
-    if (!widget || widget.static === true) {
-      // Static widgets shouldn't count as empty
-      return false;
-    }
-    const validator = getWidgetValidator(widget.type);
-    const userInput = userInputMap[id];
-    const validationData = widget.options;
-    const score = validator == null ? void 0 : validator(userInput, validationData, strings, locale);
-    if (score) {
-      return scoreIsEmpty(score);
-    }
-  });
-}
-
-// TODO: combine scorePerseusItem with scoreWidgetsFunctional
-// once scorePerseusItem is the only one calling scoreWidgetsFunctional
-function scorePerseusItem(perseusRenderData, userInputMap,
-// TODO(LEMS-2461,LEMS-2391): these probably
-// need to be removed before we move this to the server
-strings, locale) {
-  // There seems to be a chance that PerseusRenderer.widgets might include
-  // widget data for widgets that are not in PerseusRenderer.content,
-  // so this checks that the widgets are being used before scoring them
-  const usedWidgetIds = getWidgetIdsFromContent(perseusRenderData.content);
-  const scores = scoreWidgetsFunctional(perseusRenderData.widgets, usedWidgetIds, userInputMap, strings, locale);
-  return flattenScores(scores);
-}
-function scoreWidgetsFunctional(widgets,
-// This is a port of old code, I'm not sure why
-// we need widgetIds vs the keys of the widgets object
-widgetIds, userInputMap, strings, locale) {
-  const upgradedWidgets = getUpgradedWidgetOptions(widgets);
-  const gradedWidgetIds = widgetIds.filter(id => {
-    const props = upgradedWidgets[id];
-    const widgetIsGraded = (props == null ? void 0 : props.graded) == null || props.graded;
-    const widgetIsStatic = !!(props != null && props.static);
-    // Ungraded widgets or widgets set to static shouldn't be graded.
-    return widgetIsGraded && !widgetIsStatic;
-  });
-  const widgetScores = {};
-  gradedWidgetIds.forEach(id => {
-    var _validator;
-    const widget = upgradedWidgets[id];
-    if (!widget) {
-      return;
-    }
-    const userInput = userInputMap[id];
-    const validator = getWidgetValidator(widget.type);
-    const scorer = getWidgetScorer(widget.type);
-
-    // We do validation (empty checks) first and then scoring. If
-    // validation fails, it's result is itself a PerseusScore.
-    const score = (_validator = validator == null ? void 0 : validator(userInput, widget.options, strings, locale)) != null ? _validator : scorer == null ? void 0 : scorer(userInput, widget.options, strings, locale);
-    if (score != null) {
-      widgetScores[id] = score;
-    }
-  });
-  return widgetScores;
-}
-
-/**
- * TranslationLinter asynchronously calls Khan Academy's poentry linter.
- *
- * The poentry linter checks for issues that prevent content from being
- * translated. This linter is KA-specific and so TranslationLinter does not do
- * anything in non-KA environments.
- */
-
-// A LintCB is called once the linter has been run.
-
-// msec to wait before we actually call the linter after receiving the
-// last call. The timer is reset if the lint is called during the wait.
-const DEBOUNCE_TIMEOUT = 1000;
-class TranslationLinter {
-  constructor() {
-    // To avoid linting when nothing has changed.
-    this.previousContent = null;
-    /**
-     * Runs the poentry linter on the given perseus string asynchronously.
-     *
-     * It doesn't do anything unless we're in a KA environment.
-     *
-     * onLintErrorsGenerated is called even if there are no errors. It is not
-     * called if perseusStr is unchanged from the last call.
-     *
-     * Linting is relatively expensive -- so we debounce linting each instance
-     * for some amount of time.
-     */
-    this.runLinter = debounce$1((perseusStr, onLintErrorsGenerated) => {
-      // TODO(FEI-5003): Do we still need to check for 'KA'?
-      if (typeof KA === "undefined") {
-        return;
-      }
-      if (perseusStr === this.previousContent) {
-        return;
-      }
-      this.previousContent = perseusStr;
-      if (perseusStr === "") {
-        onLintErrorsGenerated([]);
-        return;
-      }
-      fetch("/api/internal/translations/lint_poentry?preview=1&lang=en", {
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          // The poentry linter verifies that the translation from
-          // the original text to the translated text is sane. We
-          // want to ensure that the translation from English to
-          // English is sane, so msgid === mstr.
-          msgid: perseusStr,
-          // msgid is the original text
-          msgstr: perseusStr,
-          // msgstr is the translated text
-          format: "perseus_text",
-          filename: ""
-        }),
-        method: "POST"
-      }).then(response => {
-        if (response.status >= 400) {
-          return {
-            status: "error",
-            message: "Could not run i18n linter."
-          };
-        }
-        return response.json();
-      }, rejection => {
-        return {
-          status: "error",
-          message: "Could not run i18n linter."
-        };
-      }).then(json => {
-        if (json.status === "error") {
-          onLintErrorsGenerated(["Some part of this text makes it untranslatable. " + "The specific message from the i18n linter was: " + json.message.replace(/\n/g, " ")]);
-        } else {
-          onLintErrorsGenerated([]);
-        }
-      });
-    }, DEBOUNCE_TIMEOUT);
-  }
-  /**
-   * Applies an array of errors generated by linters without position
-   * information (TranslationLinter and the legacy getSaveWarnings()) to the
-   * top of a Perseus tree.
-   */
-  applyLintErrors(parsedMarkdown, translationLintErrors) {
-    // These lint errors do not have position data associated with
-    // them, so we just plop them at the top.
-    if (translationLintErrors.length) {
-      const errorText = translationLintErrors.join("\n\n");
-      parsedMarkdown.unshift({
-        content: {
-          type: "text",
-          content: ""
-        },
-        insideTable: false,
-        message: errorText,
-        ruleName: "legacy-error",
-        severity: Rule.Severity.ERROR,
-        type: "lint"
-      });
-    }
-  }
-}
-
-/**
- * Preprocess TeX code to convert things that MathJax doesn't know how to handle
- * to things is does.
- */
-var preprocessTex = (texCode => texCode
-// Replace uses of \begin{align}...\end{align} which KaTeX doesn't
-// support (yet) with \begin{aligned}...\end{aligned} which renders
-// the same is supported by KaTeX.  It does the same for align*.
-// TODO(kevinb) update content to use aligned instead of align.
-// TODO(LEMS-1608) Remove this replacement as MathJax supports the
-// "align" macro correctly (and, in fact, it is not synonymous with
-// "aligned").
-.replace(/\{align[*]?\}/g, "{aligned}")
-// Replace non-breaking spaces with regular spaces.
-.replace(/[\u00a0]/g, " "));
-
-const {
-  interactiveSizes
-} = constants;
-
-// Note: these size cutoffs represent content-width cutoffs as specified in
-// http://zpl.io/1mVmvU (broken link - we no longer use Zeplin)
-// TODO(benkomalo): these values aren't used in JS outside of this file, but
-// are coupled to the values in styles/styles.less - DRY it up at some point
-const smMax = articleMaxWidthTableInPx;
-const mdMax = articleMaxWidthInPx;
-const containerSizeClass = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
-  XLARGE: "xlarge"
-};
-const getClassFromWidth = width => {
-  if (!width) {
-    return containerSizeClass.MEDIUM;
-  }
-  if (width <= smMax) {
-    return containerSizeClass.SMALL;
-  }
-  if (width <= mdMax) {
-    return containerSizeClass.MEDIUM;
-  }
-  return containerSizeClass.LARGE;
-};
-const getInteractiveBoxFromSizeClass = sizeClass => {
-  if (sizeClass === containerSizeClass.SMALL) {
-    return [interactiveSizes.defaultBoxSizeSmall, interactiveSizes.defaultBoxSizeSmall];
-  }
-  return [interactiveSizes.defaultBoxSize, interactiveSizes.defaultBoxSize];
-};
-
 class WidgetContainer extends React.Component {
   constructor(...args) {
     super(...args);
@@ -18214,7 +17847,7 @@ class WidgetContainer extends React.Component {
     }
     let alignment = this.state.widgetProps.alignment;
     if (alignment === "default") {
-      alignment = getDefaultAlignment(type);
+      alignment = CoreWidgetRegistry.getDefaultAlignment(type);
     }
     className += " widget-" + alignment;
     const apiOptions = this.state.widgetProps.apiOptions;
@@ -18222,6 +17855,7 @@ class WidgetContainer extends React.Component {
     // Hack to prevent interaction with static widgets: we overlay a big
     // div on top of the widget and overflow: hidden the container.
     // Ideally widgets themselves should know how to prevent interaction.
+    // UPDATE HTML5: `inert` on the underlying div would be better
     const isStatic = this.state.widgetProps.static || apiOptions.readOnly;
     const staticContainerStyles = {
       position: "relative",
@@ -18233,7 +17867,7 @@ class WidgetContainer extends React.Component {
       position: "absolute",
       top: 0,
       left: 0,
-      zIndex: zIndexInteractiveComponent$1
+      zIndex: 3
     };
 
     // Some widgets may include strings of markdown that we may
@@ -19417,7 +19051,7 @@ class Renderer extends React.Component {
    * empty if the graph is in the starting state.
    */
   emptyWidgets() {
-    return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+    return emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.context.locale);
   }
   /**
    * Returns an array of the widget `.getUserInput()` results
@@ -19477,7 +19111,7 @@ class Renderer extends React.Component {
    * @deprecated use scorePerseusItem
    */
   score() {
-    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
+    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.context.locale);
     const combinedScore = flattenScores(scores);
     return combinedScore;
   }
@@ -19703,7 +19337,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -20017,7 +19651,7 @@ class InputWithExamples extends React.Component {
     };
     this._getInputClassName = () => {
       // Otherwise, we need to add these INPUT and FOCUSED tags here.
-      let className = ClassNames.INPUT + " " + ClassNames.INTERACTIVE;
+      let className = ClassNames.INPUT;
       if (this.state.focused) {
         className += " " + ClassNames.FOCUSED;
       }
@@ -20429,14 +20063,10 @@ const propTransform$3 = widgetOptions => {
 var InputNumber$1 = {
   name: "input-number",
   displayName: "Input number (deprecated - use numeric input instead)",
-  defaultAlignment: "inline-block",
   hidden: true,
   widget: InputNumber,
   transform: propTransform$3,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInputNumberUserInput'.
-  scorer: scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
       return;
@@ -20693,14 +20323,11 @@ const propsTransform = function propsTransform(widgetOptions) {
 var NumericInput$1 = {
   name: "numeric-input",
   displayName: "Numeric input",
-  defaultAlignment: "inline-block",
   accessible: true,
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumericInputUserInput'.
-  scorer: scoreNumericInput,
+  getPublicWidgetOptions: getNumericInputPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
@@ -20761,23 +20388,6 @@ const getPromptJSON$p = renderProps => {
   };
 };
 
-/**
- * Several widgets don't have "right"/"wrong" scoring logic,
- * so this just says to move on past those widgets
- *
- * TODO(LEMS-2543) widgets that use this probably shouldn't have any
- * scoring logic and the thing scoring an exercise
- * should just know to skip these
- */
-function scoreNoop(points = 0) {
-  return {
-    type: "points",
-    earned: points,
-    total: points,
-    message: null
-  };
-}
-
 /**
  * Utility functions for manipulating ranges of highlightable content.
  */
@@ -22953,8 +22563,7 @@ var Passage$1 = {
   transform: editorProps => {
     return _.pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
-  isLintable: true,
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 /**
@@ -23076,16 +22685,13 @@ var PassageRef$1 = {
   name: "passage-ref",
   displayName: "PassageRef (SAT only)",
   hidden: true,
-  defaultAlignment: "inline",
   widget: PassageRef,
   transform: widgetOptions => ({
     passageNumber: widgetOptions.passageNumber,
     referenceNumber: widgetOptions.referenceNumber,
     summaryText: widgetOptions.summaryText
   }),
-  version: passageRefLogic.version,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  version: passageRefLogic.version
 };
 
 /**
@@ -23127,109 +22733,6 @@ var mediaQueries = {
   xlOrLarger: `@media screen and (min-width: ${pureXlMin})`
 };
 
-const {
-  zIndexAboveScratchpad,
-  zIndexInteractiveComponent,
-  radioBorderColor,
-  checkedColor,
-  circleSize,
-  radioMarginWidth
-} = constants;
-var sharedStyles = StyleSheet.create({
-  perseusInteractive: {
-    zIndex: zIndexInteractiveComponent,
-    position: "relative"
-  },
-  aboveScratchpad: {
-    position: "relative",
-    zIndex: zIndexAboveScratchpad
-  },
-  blankBackground: {
-    // TODO(emily): Use WB colors?
-    backgroundColor: "#FDFDFD"
-  },
-  perseusSrOnly: {
-    border: 0,
-    clip: "rect(0,0,0,0)",
-    height: 1,
-    margin: -1,
-    overflow: "hidden",
-    padding: 0,
-    position: "absolute",
-    width: 1
-  },
-  responsiveLabel: {
-    // NOTE(charlie): The values used here should be kept in sync with the
-    // caption text sizing in Perseus' styles.less.
-    // TODO(charlie): Migrate the captions over to using this style.
-    [mediaQueries.smOrSmaller]: {
-      fontSize: 14,
-      lineHeight: 1.3
-    },
-    [mediaQueries.md]: {
-      fontSize: 17,
-      lineHeight: 1.4
-    },
-    [mediaQueries.lgOrLarger]: {
-      fontSize: 20,
-      lineHeight: 1.4
-    }
-  },
-  responsiveInput: {
-    display: "inline-block",
-    WebkitAppearance: "none",
-    appearance: "none",
-    "::-ms-check": {
-      display: "none"
-    },
-    backgroundColor: "#fff",
-    border: "2px solid #fff",
-    boxShadow: `0 0px 0px 1px ${radioBorderColor}`,
-    outline: "none",
-    boxSizing: "border-box",
-    flexShrink: 0,
-    marginBottom: 1,
-    marginLeft: 1,
-    marginRight: 1,
-    marginTop: 1,
-    height: circleSize - 2,
-    width: circleSize - 2
-  },
-  responsiveRadioInput: {
-    borderRadius: "50%",
-    ":checked": {
-      backgroundColor: checkedColor,
-      border: "none",
-      borderRadius: "50%",
-      boxShadow: `inset 0px 0px 0px 2px white, ` + `0 0px 0px 2px ${checkedColor}`,
-      marginTop: radioMarginWidth,
-      marginBottom: radioMarginWidth,
-      marginLeft: radioMarginWidth,
-      marginRight: radioMarginWidth,
-      height: circleSize - 2 * radioMarginWidth,
-      width: circleSize - 2 * radioMarginWidth
-    }
-  },
-  responsiveRadioInputActive: {
-    backgroundColor: "#fff",
-    border: "2px solid #fff",
-    borderRadius: "50%",
-    boxShadow: `0 0px 0px 2px ${checkedColor}`,
-    marginTop: radioMarginWidth,
-    marginBottom: radioMarginWidth,
-    marginLeft: radioMarginWidth,
-    marginRight: radioMarginWidth,
-    height: circleSize - 2 * radioMarginWidth,
-    width: circleSize - 2 * radioMarginWidth,
-    ":checked": {
-      backgroundColor: "#fff"
-    }
-  },
-  disableTextSelection: {
-    userSelect: "none"
-  }
-});
-
 /**
  * A small collection of useful scrolling utility functions.
  */
@@ -23603,8 +23106,8 @@ const styles$s = StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
-    top: `0px`,
-    left: `0px`
+    top: `2px`,
+    left: `2px`
   }
 });
 
@@ -23631,43 +23134,6 @@ function ChoiceInner(props) {
   }
   return /*#__PURE__*/React.createElement(InlineIcon, iconMinus);
 }
-
-// Handle dynamic styling of the multiple choice icon. Most
-// MC icon styles are constant, but we do allow the caller
-// to specify the selected color, and thus must control styles
-// related to the selected state dynamically.
-function getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct) {
-  let backgroundColor;
-  let borderColor;
-  let color$1;
-  if (!showCorrectness && pressed) {
-    borderColor = color.blue;
-    color$1 = color.blue;
-    backgroundColor = "transparent";
-  } else if (checked) {
-    const bg = showCorrectness && correct ? color.green : color.blue;
-    color$1 = white;
-    backgroundColor = bg;
-    borderColor = bg;
-  } else {
-    borderColor = color.offBlack64;
-    color$1 = color.offBlack64;
-  }
-
-  // define shape
-  let borderRadius;
-  if (multipleSelect) {
-    borderRadius = 3;
-  } else {
-    borderRadius = CHOICE_ICON_SIZE;
-  }
-  return {
-    backgroundColor,
-    borderColor,
-    color: color$1,
-    borderRadius
-  };
-}
 const ChoiceIcon = function ChoiceIcon(props) {
   const {
     checked,
@@ -23679,9 +23145,41 @@ const ChoiceIcon = function ChoiceIcon(props) {
     multipleSelect,
     pos,
     previouslyAnswered,
+    // Used in "review mode"/"show rationale" to show that option was previously chosen
     pressed
   } = props;
-  const dynamicStyles = getDynamicStyles(checked, showCorrectness, pressed, multipleSelect, correct);
+
+  // Accounts for incorrect choice still displaying as learner tries again
+  const choiceIsChecked = checked || showCorrectness && !correct && previouslyAnswered;
+
+  // Core styling
+  const choiceStyling = [styles$r.choiceBase, multipleSelect ? styles$r.multiSelectShape : styles$r.singleSelectShape, showCorrectness ? styles$r.choiceHasIcon : styles$r.choiceHasLetter, choiceIsChecked ? styles$r.choiceIsChecked : styles$r.choiceIsUnchecked];
+
+  // Color styling
+  // Handle dynamic styling of the multiple choice icon. Most
+  // MC icon styles are constant, but we do allow the caller
+  // to specify the selected color, and thus must control styles
+  // related to the selected state dynamically.
+  let crossOutColor;
+  if (showCorrectness && correct && checked) {
+    choiceStyling.push(styles$r.choiceCorrect);
+    crossOutColor = color.green;
+  } else if (showCorrectness && !correct && (checked || previouslyAnswered)) {
+    choiceStyling.push(styles$r.choiceIncorrect);
+    crossOutColor = color.red;
+  } else if (checked) {
+    // Show filled neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.choiceNeutral);
+    crossOutColor = color.blue;
+  } else if (pressed) {
+    // Show outlined neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.activeNeutral);
+    crossOutColor = color.blue;
+  } else {
+    // choice is not checked
+    choiceStyling.push(styles$r.uncheckedColors);
+    crossOutColor = color.offBlack64;
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: css(styles$t.iconWrapper)
   }, /*#__PURE__*/React.createElement(FocusRing, {
@@ -23689,9 +23187,8 @@ const ChoiceIcon = function ChoiceIcon(props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
-    style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered)
+    className: css(...choiceStyling)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
@@ -23703,7 +23200,7 @@ const ChoiceIcon = function ChoiceIcon(props) {
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React.createElement(CrossOutLine, {
-    color: dynamicStyles.borderColor
+    color: crossOutColor
   }));
 };
 const styles$r = StyleSheet.create({
@@ -23715,8 +23212,7 @@ const styles$r = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  circle: {
-    // Make the circle
+  choiceBase: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
     boxSizing: "border-box",
@@ -23728,30 +23224,48 @@ const styles$r = StyleSheet.create({
     // "bold font family" so that characters which fall back to the default
     // font get bolded too.
     fontWeight: "bold",
-    fontSize: 12,
     // Center the icon wrapper.
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    // HACK(emily): I don't know why adding this line height makes the text
-    // appear centered better than any other value, but it does. In
-    // particular, at large zoom levels this line height does almost
-    // nothing, but at the default size this shifts the letter down one
-    // pixel so it is much better centered.
-    lineHeight: "1px"
-  },
-  circleCorrect: {
+    justifyContent: "center"
+  },
+  choiceHasLetter: {
+    fontSize: 12
+  },
+  choiceHasIcon: {
     fontSize: CHOICE_ICON_SIZE
   },
-  circleIncorrect: {
-    fontSize: CHOICE_ICON_SIZE,
-    borderColor: gray68,
-    color: gray68
+  choiceIsChecked: {
+    color: color.white
   },
-  circleIncorrectAnswered: {
+  choiceIsUnchecked: {
+    color: color.offBlack64
+  },
+  choiceCorrect: {
+    backgroundColor: color.green,
+    borderColor: color.green
+  },
+  choiceIncorrect: {
     backgroundColor: color.red,
-    borderColor: color.red,
-    color: color.white
+    borderColor: color.red
+  },
+  choiceNeutral: {
+    backgroundColor: color.blue,
+    borderColor: color.blue
+  },
+  activeNeutral: {
+    color: color.blue,
+    borderColor: color.blue,
+    backgroundColor: "transparent"
+  },
+  multiSelectShape: {
+    borderRadius: 3
+  },
+  singleSelectShape: {
+    borderRadius: CHOICE_ICON_SIZE
+  },
+  uncheckedColors: {
+    borderColor: color.offBlack64
   }
 });
 
@@ -24288,7 +23802,7 @@ const BaseRadio = function BaseRadio({
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return css(sharedStyles.aboveScratchpad, styles$o.item, styles$o.responsiveItem, checked && styles$o.selectedItem, checked && choice.highlighted && styles$o.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$o.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$o.nextHighlighted);
+      return css(styles$o.item, styles$o.responsiveItem, checked && styles$o.selectedItem, checked && choice.highlighted && styles$o.aboveBackdrop, checked && choice.highlighted && apiOptions.isMobile && styles$o.aboveBackdropMobile, nextChoiceHighlighted && apiOptions.isMobile && styles$o.nextHighlighted);
     };
 
     // HACK(abdulrahman): Preloads the selection-state
@@ -24878,17 +24392,105 @@ var Radio = {
   version: radioLogic.version,
   propUpgrades: radioLogic.widgetOptionsUpgrades,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
-  scorer: scoreRadio,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
-  validator: validateRadio
+  getPublicWidgetOptions: getRadioPublicWidgetOptions
 };
 
 /* eslint-disable import/no-named-as-default */
 var basicWidgets = [Radio, InputNumber$1, NumericInput$1, Expression$1];
 
+const {
+  radioBorderColor,
+  checkedColor,
+  circleSize,
+  radioMarginWidth
+} = constants;
+var sharedStyles = StyleSheet.create({
+  blankBackground: {
+    // TODO(emily): Use WB colors?
+    backgroundColor: "#FDFDFD"
+  },
+  perseusSrOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
+  },
+  responsiveLabel: {
+    // NOTE(charlie): The values used here should be kept in sync with the
+    // caption text sizing in Perseus' styles.less.
+    // TODO(charlie): Migrate the captions over to using this style.
+    [mediaQueries.smOrSmaller]: {
+      fontSize: 14,
+      lineHeight: 1.3
+    },
+    [mediaQueries.md]: {
+      fontSize: 17,
+      lineHeight: 1.4
+    },
+    [mediaQueries.lgOrLarger]: {
+      fontSize: 20,
+      lineHeight: 1.4
+    }
+  },
+  responsiveInput: {
+    display: "inline-block",
+    WebkitAppearance: "none",
+    appearance: "none",
+    "::-ms-check": {
+      display: "none"
+    },
+    backgroundColor: "#fff",
+    border: "2px solid #fff",
+    boxShadow: `0 0px 0px 1px ${radioBorderColor}`,
+    outline: "none",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    marginBottom: 1,
+    marginLeft: 1,
+    marginRight: 1,
+    marginTop: 1,
+    height: circleSize - 2,
+    width: circleSize - 2
+  },
+  responsiveRadioInput: {
+    borderRadius: "50%",
+    ":checked": {
+      backgroundColor: checkedColor,
+      border: "none",
+      borderRadius: "50%",
+      boxShadow: `inset 0px 0px 0px 2px white, ` + `0 0px 0px 2px ${checkedColor}`,
+      marginTop: radioMarginWidth,
+      marginBottom: radioMarginWidth,
+      marginLeft: radioMarginWidth,
+      marginRight: radioMarginWidth,
+      height: circleSize - 2 * radioMarginWidth,
+      width: circleSize - 2 * radioMarginWidth
+    }
+  },
+  responsiveRadioInputActive: {
+    backgroundColor: "#fff",
+    border: "2px solid #fff",
+    borderRadius: "50%",
+    boxShadow: `0 0px 0px 2px ${checkedColor}`,
+    marginTop: radioMarginWidth,
+    marginBottom: radioMarginWidth,
+    marginLeft: radioMarginWidth,
+    marginRight: radioMarginWidth,
+    height: circleSize - 2 * radioMarginWidth,
+    width: circleSize - 2 * radioMarginWidth,
+    ":checked": {
+      backgroundColor: "#fff"
+    }
+  },
+  disableTextSelection: {
+    userSelect: "none"
+  }
+});
+
 const getPromptJSON$n = (renderProps, userInput) => {
   return {
     type: "categorizer",
@@ -24979,7 +24581,6 @@ class Categorizer extends React.Component {
           className: "category " + css(styles$n.cell),
           key: catNum
         }, /*#__PURE__*/React.createElement("div", {
-          className: ClassNames.INTERACTIVE,
           role: "button",
           "aria-label": catName,
           onClick: () => this.onChange(itemNum, catNum)
@@ -25078,12 +24679,6 @@ var Categorizer$1 = {
     return _.pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
-  scorer: scoreCategorizer,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
-  validator: validateCategorizer,
   getPublicWidgetOptions: getCategorizerPublicWidgetOptions
 };
 
@@ -25289,12 +24884,9 @@ const styles$m = StyleSheet.create({
 var CSProgram$1 = {
   name: "cs-program",
   displayName: "CS Program",
-  supportedAlignments: ["block", "full-width"],
   widget: CSProgram,
   hidden: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
-  scorer: scoreCSProgram
+  getPublicWidgetOptions: getCSProgramPublicWidgetOptions
 };
 
 const getPromptJSON$l = renderProps => {
@@ -25367,11 +24959,8 @@ var Definition$1 = {
   name: "definition",
   displayName: "Definition",
   accessible: true,
-  defaultAlignment: "inline",
   widget: Definition,
-  transform: x => x,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  transform: x => x
 };
 
 // There are no required props, but this component can receive props from any
@@ -25401,9 +24990,7 @@ var DeprecatedStandin$1 = {
   name: "deprecated-standin",
   displayName: "Deprecated Standin",
   widget: DeprecatedStandin,
-  hidden: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop(1)
+  hidden: true
 };
 
 const getPromptJSON$k = (renderProps, userInput) => {
@@ -25515,16 +25102,10 @@ const optionsTransform = widgetOptions => {
 var Dropdown$1 = {
   name: "dropdown",
   displayName: "Drop down",
-  defaultAlignment: "inline-block",
   accessible: true,
   widget: Dropdown,
   transform: optionsTransform,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusDropdownUserInput'.
-  scorer: scoreDropdown,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusDropdownUserInput'.
-  validator: validateDropdown
+  getPublicWidgetOptions: getDropdownPublicWidgetOptions
 };
 
 const getPromptJSON$j = renderProps => {
@@ -25679,12 +25260,9 @@ var Explanation$1 = {
   name: "explanation",
   displayName: "Explanation",
   accessible: true,
-  defaultAlignment: "inline",
   widget: Explanation,
   transform: _.identity,
-  isLintable: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 const getPromptJSON$i = (title, rendererJSON, hintRendererJSON) => {
@@ -26784,7 +26362,7 @@ class FunctionGrapher extends React.Component {
         boxSizing: "initial"
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: "graphie-container above-scratchpad",
+      className: "graphie-container blank-background",
       style: {
         width: box[0],
         height: box[1]
@@ -26923,8 +26501,7 @@ class Grapher extends React.Component {
     const coords = this.props.plot.coords;
     const asymptote = this.props.plot.asymptote;
     const typeSelector = /*#__PURE__*/React.createElement("div", {
-      style: typeSelectorStyle,
-      className: "above-scratchpad"
+      style: typeSelectorStyle
     }, /*#__PURE__*/React.createElement(ButtonGroup, {
       value: type,
       allowEmpty: true,
@@ -27003,9 +26580,7 @@ var Grapher$1 = {
   widget: Grapher,
   transform: propTransform$2,
   staticTransform: staticTransform$4,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusGrapherUserInput'.
-  scorer: scoreGrapher
+  getPublicWidgetOptions: getGrapherPublicWidgetOptions
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -27021,24 +26596,6 @@ const getPromptJSON$f = rendererJSON => {
   });
 };
 
-// The `group` widget is basically a widget hosting a full Perseus system in
-// it. As such, scoring a group means scoring all widgets it contains.
-function scoreGroup(userInput, rubric, strings, locale) {
-  const scores = scoreWidgetsFunctional(rubric.widgets, Object.keys(rubric.widgets), userInput, strings, locale);
-  return flattenScores(scores);
-}
-
-function validateGroup(userInput, validationData, strings, locale) {
-  const emptyWidgets = emptyWidgetsFunctional(validationData.widgets, Object.keys(validationData.widgets), userInput, strings, locale);
-  if (emptyWidgets.length === 0) {
-    return null;
-  }
-  return {
-    type: "invalid",
-    message: null
-  };
-}
-
 // exports has no 'transform'
 
 class Group extends React.Component {
@@ -27193,12 +26750,6 @@ var Group$1 = {
   displayName: "Group (SAT only)",
   widget: Group,
   traverseChildWidgets: traverseChildWidgets,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusGroupUserInput'.
-  scorer: scoreGroup,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusGroupUserInput'.
-  validator: validateGroup,
   hidden: true,
   isLintable: true
 };
@@ -27335,9 +26886,7 @@ var Iframe$1 = {
   widget: Iframe,
   // Let's not expose it to all content creators yet
   hidden: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusIframeUserInput'.
-  scorer: scoreIframe
+  getPublicWidgetOptions: getIFramePublicWidgetOptions
 };
 
 const getPromptJSON$d = renderProps => {
@@ -27359,8 +26908,6 @@ const defaultBackgroundImage$2 = {
   width: 0,
   height: 0
 };
-const editorAlignments = ["block", "full-width"];
-const DEFAULT_ALIGNMENT = "block";
 
 // there is no transform as part of exports
 
@@ -27509,7 +27056,7 @@ class ImageWidget extends React.Component {
 }
 ImageWidget.contextType = PerseusI18nContext;
 ImageWidget.defaultProps = {
-  alignment: DEFAULT_ALIGNMENT,
+  alignment: "block",
   title: "",
   range: [defaultRange, defaultRange],
   box: [defaultBoxSize, defaultBoxSize],
@@ -27527,13 +27074,9 @@ var Image$1 = {
     const bgImage = widgetOptions.backgroundImage;
     return !(bgImage && bgImage.url && !widgetOptions.alt);
   },
-  defaultAlignment: DEFAULT_ALIGNMENT,
-  supportedAlignments: editorAlignments,
   displayName: "Image",
   widget: ImageWidget,
-  isLintable: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 const getPromptJSON$c = () => {
@@ -28131,9 +27674,7 @@ var Interactive = {
   displayName: "Interaction",
   widget: Interaction,
   transform: _.identity,
-  hidden: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  hidden: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -28402,7 +27943,7 @@ class Graph extends React.Component {
       image = null;
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: "graphie-container above-scratchpad",
+      className: "graphie-container blank-background",
       style: {
         width: this.props.box[0],
         height: this.props.box[1]
@@ -29037,7 +28578,8 @@ const tickLabelSize = 14;
 const YGridTick = ({
   y,
   range,
-  tickStep
+  tickStep,
+  showPi
 }) => {
   // If the graph requires out-of-bounds labels, we want to make sure to set the
   // coordinates to the edge of the visible range of the graph. Otherwise,
@@ -29073,6 +28615,7 @@ const YGridTick = ({
   // If the graph displays both the y and x axis lines within the graph, we want
   // to hide the label at -1 on the y-axis to prevent overlap with the x-axis label
   const showLabel = shouldShowLabel(y, range, tickStep);
+  const yLabel = showPi ? divideByAndShowPi(y) : y.toString();
   return /*#__PURE__*/React.createElement("g", {
     className: "tick",
     "aria-hidden": true
@@ -29090,11 +28633,12 @@ const YGridTick = ({
     textAnchor: "end",
     x: xPositionText,
     y: yPositionText
-  }, y.toString()));
+  }, yLabel));
 };
 const XGridTick = ({
   x,
-  range
+  range,
+  showPi
 }) => {
   // If the graph requires out-of-bounds labels, we want to make sure to set the
   // coordinates to the edge of the visible range of the graph. Otherwise,
@@ -29133,6 +28677,7 @@ const XGridTick = ({
   // Apply the adjustments to the x and y positions for the text
   const xPositionText = xPosition + xAdjustment;
   const yPositionText = yPosition + yAdjustment;
+  const xLabel = showPi ? divideByAndShowPi(x) : x.toString();
   return /*#__PURE__*/React.createElement("g", {
     className: "tick",
     "aria-hidden": true
@@ -29150,7 +28695,7 @@ const XGridTick = ({
     textAnchor: "middle",
     x: xPositionText,
     y: yPositionText
-  }, x.toString()));
+  }, xLabel));
 };
 
 // Determines whether to show the label for the given tick
@@ -29197,6 +28742,22 @@ const countSignificantDecimals = number => {
   }
   return numStr.split(".")[1].length;
 };
+
+// Show the given value as a multiple of pi (already assumed to be
+// a multiple of pi). Exported for testing
+function divideByAndShowPi(value) {
+  const dividedValue = value / Math.PI;
+  switch (dividedValue) {
+    case 1:
+      return "π";
+    case -1:
+      return "-π";
+    case 0:
+      return "0";
+    default:
+      return dividedValue + "π";
+  }
+}
 const AxisTicks = () => {
   const {
     tickStep,
@@ -29219,6 +28780,10 @@ const AxisTicks = () => {
       key: `y-grid-tick-${y}`,
       range: range,
       tickStep: tickStep[Y]
+      // Show the tick labels as multiples of pi
+      // if the tick step is a multiple of pi.
+      ,
+      showPi: tickStep[Y] % Math.PI === 0
     });
   })), /*#__PURE__*/React.createElement("g", {
     className: "x-axis-ticks"
@@ -29227,6 +28792,10 @@ const AxisTicks = () => {
       x: x,
       key: `x-grid-tick-${x}`,
       range: range
+      // Show the tick labels as multiples of pi
+      // if the tick step is a multiple of pi.
+      ,
+      showPi: tickStep[X] % Math.PI === 0
     });
   })));
 };
@@ -29534,6 +29103,15 @@ const styles$d = StyleSheet.create({
   }
 });
 
+function isPiMultiple(value) {
+  // Early return for integers that clearly aren't multiples
+  // of pi to save some computation.
+  if (Number.isInteger(value)) {
+    return false;
+  }
+  return value % Math.PI === 0 || value % (Math.PI / 2) === 0 || value % (Math.PI / 3) === 0 || value % (Math.PI / 4) === 0 || value % (Math.PI / 6) === 0;
+}
+
 const _excluded$1 = ["onFormatChange", "checkValidity", "useArrowKeys"];
 const {
   firstNumericalParse,
@@ -29671,6 +29249,19 @@ class NumberInput extends React.Component {
       this._getInput().value = toNumericString(val, format);
     };
   }
+  componentDidMount() {
+    // If the value is a multiple of pi, but it is not in the pi format,
+    // then convert it to the pi format and show it as a multiple of pi.
+    const value = this.getValue();
+    if (this.props.allowPiTruncation && value !== null && value !== 0) {
+      if (this.state.format !== "pi" && isPiMultiple(value)) {
+        this._setValue(value / Math.PI, "pi");
+        this.setState({
+          format: "pi"
+        });
+      }
+    }
+  }
   componentDidUpdate(prevProps) {
     if (!number.equal(this.getValue(), this.props.value)) {
       this._setValue(this.props.value, this.state.format);
@@ -29713,7 +29304,8 @@ NumberInput.propTypes = {
   onFormatChange: PropTypes.func,
   checkValidity: PropTypes.func,
   size: PropTypes.oneOf(["mini", "small", "normal"]),
-  label: PropTypes.oneOf(["put your labels outside your inputs!"])
+  label: PropTypes.oneOf(["put your labels outside your inputs!"]),
+  allowPiTruncation: PropTypes.bool
 };
 NumberInput.defaultProps = {
   value: null,
@@ -29752,14 +29344,16 @@ class RangeInput extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onChange.bind(this, 0),
-      placeholder: this.props.placeholder[0]
+      placeholder: this.props.placeholder[0],
+      allowPiTruncation: this.props.allowPiTruncation
     })), /*#__PURE__*/React.createElement(NumberInput, _extends({}, this.props, {
       value: value[1],
       checkValidity: val => checkValidity([value[0], val])
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onChange.bind(this, 1),
-      placeholder: this.props.placeholder[1]
+      placeholder: this.props.placeholder[1],
+      allowPiTruncation: this.props.allowPiTruncation
     })));
   }
 }
@@ -29767,7 +29361,8 @@ RangeInput.propTypes = {
   value: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.array,
-  checkValidity: PropTypes.func
+  checkValidity: PropTypes.func,
+  allowPiTruncation: PropTypes.bool
 };
 RangeInput.defaultProps = {
   placeholder: [null, null]
@@ -29998,10 +29593,10 @@ function Vector(props) {
   }));
 }
 
-function srFormatNumber(a, locale) {
+function srFormatNumber(a, locale, maximumFractionDigits) {
   // adding zero here converts negative zero to positive zero.
   return (0 + a).toLocaleString(locale, {
-    maximumFractionDigits: 3,
+    maximumFractionDigits: maximumFractionDigits != null ? maximumFractionDigits : 3,
     useGrouping: false // no thousands separators
   });
 }
@@ -30177,6 +29772,95 @@ a, b, c) {
   return [x1, x2];
 }
 
+/**
+ * Given a list of points, return the angle made by the point at index i
+ * with the points at indices i - 1 and i + 1.
+ */
+function getAngleFromPoints(points, i) {
+  // Make sure the index is valid.
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return null;
+  }
+
+  // If there are fewer than 3 points, there is no angle.
+  if (points.length < 3) {
+    return null;
+  }
+
+  // Get the points at the current index and the two adjacent points.
+  const point = points.at(i);
+  const pt1 = points.at(i - 1);
+  const pt2 = points[(i + 1) % points.length];
+  if (!point || !pt1 || !pt2) {
+    return null;
+  }
+
+  // Get the lengths of adjacent sides, making a triangle
+  // we can use to calculate the angle.
+  const a = vec.dist(point, pt1);
+  const b = vec.dist(point, pt2);
+  const c = vec.dist(pt1, pt2);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  return angle;
+}
+function getSideLengthsFromPoints(points, i, isPolygonOpen) {
+  if (i < 0 || i >= points.length || !Number.isInteger(i)) {
+    return [];
+  }
+  if (points.length < 2) {
+    return [];
+  }
+  const returnArray = [];
+  const point = points[i];
+  // If this point is the first point, then side 1 is the
+  // last point in the list.
+  const point1Index = i === 0 ? points.length - 1 : i - 1;
+  const point1 = points[point1Index];
+  // Make sure the previous point is not the same
+  // as the current point.
+  const side1 = i !== point1Index ? vec.dist(point, point1) : null;
+  // The first side of the first point does not exist if
+  // the polygon is open.
+  if (side1 && !(isPolygonOpen && i === 0)) {
+    returnArray.push({
+      pointIndex: point1Index,
+      sideLength: side1
+    });
+  }
+
+  // See if there is a side 2.
+  const point2Index = (i + 1) % points.length;
+  const point2 = points[point2Index];
+  // Make sure that the next point is not the same as the
+  // current point, and don't repeat the first point.
+  const side2 = i !== point2Index && point2Index !== point1Index ? vec.dist(point, point2) : null;
+  // The second side of the last point does not exist if
+  // the polygon is open.
+  if (side2 && !(isPolygonOpen && i === points.length - 1)) {
+    returnArray.push({
+      pointIndex: point2Index,
+      sideLength: side2
+    });
+  }
+  return returnArray;
+}
+
+/**
+ * Determine whether to determine the string with the
+ * exact side length or the approximate side length.
+ */
+function getPolygonSideString(sideLength, pointIndex, strings, locale) {
+  return Number.isInteger(sideLength) ? strings.srPolygonSideLength({
+    pointNum: pointIndex + 1,
+    length: `${sideLength}`
+  }) : strings.srPolygonSideLengthApprox({
+    pointNum: pointIndex + 1,
+    length: srFormatNumber(sideLength, locale, 1)
+  });
+}
+
 const {
   calculateAngleInDegrees: calculateAngleInDegrees$2
 } = angles;
@@ -30622,7 +30306,7 @@ const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*
 })));
 
 const {
-  clockwise: clockwise$1
+  clockwise
 } = geometry;
 const {
   getAngleFromVertex: getAngleFromVertex$1
@@ -30636,7 +30320,7 @@ const PolygonAngle = ({
   snapTo
 }) => {
   const [centerX, centerY] = centerPoint;
-  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const areClockwise = clockwise([centerPoint, ...endPoints]);
   const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
   const radius = 0.3;
   const a = vec.dist(centerPoint, endPoints[0]);
@@ -30708,7 +30392,7 @@ const Angle = ({
   range
 }) => {
   // Check if the points are clockwise or not, depending on whether we allow reflex angles
-  const areClockwise = clockwise$1([...coords, vertex]);
+  const areClockwise = clockwise([...coords, vertex]);
   const shouldReverseCoords = areClockwise && !allowReflexAngles;
 
   // Reverse the coordinates accordingly to ensure the angle is calculated correctly
@@ -31641,9 +31325,6 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-const {
-  clockwise
-} = geometry;
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return _extends({}, initialGraph);
@@ -31707,16 +31388,8 @@ function getGradableGraph(state, initialGraph) {
     });
   }
   if (state.type === "angle" && initialGraph.type === "angle") {
-    // We're going to reverse the coords for scoring if the angle is clockwise and
-    // we don't allow reflex angles. This is because the angle is largely defined
-    // by the order of the points in the coords array, and we want to maintain
-    // the same angle scoring with the legacy graph (which had a bug).
-    // (LEMS-2190): When we remove the legacy graph, move this logic to the scoring function.
-    const areClockwise = clockwise([state.coords[0], state.coords[2], state.coords[1]]);
-    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
-    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
     return _extends({}, initialGraph, {
-      coords,
+      coords: state.coords,
       allowReflexAngles: state.allowReflexAngles
     });
   }
@@ -32355,17 +32028,20 @@ function describePointGraph(state, i18n) {
     y: srFormatNumber(y, locale)
   }));
   return strings.srInteractiveElements({
-    elements: pointDescriptions.join(", ")
+    elements: pointDescriptions.join(" ")
   });
 }
 
-function renderPolygonGraph(state, dispatch) {
+const {
+  convertRadiansToDegrees
+} = angles;
+function renderPolygonGraph(state, dispatch, i18n, markings) {
   return {
     graph: /*#__PURE__*/React.createElement(PolygonGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getPolygonGraphDescription(state, i18n, markings)
   };
 }
 const PolygonGraph = props => {
@@ -32450,7 +32126,7 @@ const PolygonGraph = props => {
     focusVisible,
     setFocusVisible
   });
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+  return numSides === "unlimited" ? /*#__PURE__*/React.createElement(UnlimitedPolygonGraph, statefulProps) : /*#__PURE__*/React.createElement(LimitedPolygonGraph, statefulProps);
 };
 const LimitedPolygonGraph = statefulProps => {
   const {
@@ -32475,8 +32151,39 @@ const LimitedPolygonGraph = statefulProps => {
   const {
     disableKeyboardInteraction
   } = graphConfig;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.useId();
+  const pointsOffArray = Array(points.length).fill("off");
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const [ariaLives, setAriaLives] = React.useState([
+  // First one represents the aria-live value for the polygon itself.
+  "off",
+  // The rest represent the points.
+  ...pointsOffArray]);
   const lines = getLines(points);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polygon, {
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // Aria label srings
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
@@ -32501,13 +32208,17 @@ const LimitedPolygonGraph = statefulProps => {
       snapTo: snapTo
     });
   }), showSides && lines.map(([start, end], i) => {
+    // Use x and y to find the position of the label
     const [x, y] = vec.midpoint(start, end);
-    const length = parseFloat(vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
+    const length = vec.dist(start, end);
+    // Check if the length needs to indicate
+    // that it's an approximation.
+    const isApprox = !Number.isInteger(length);
     return /*#__PURE__*/React.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
       y: y
-    }, !Number.isInteger(length) && "≈ ", length);
+    }, isApprox ? `≈ ${length.toFixed(snapTo === "sides" ? 0 : 1)}` : length);
   }), /*#__PURE__*/React.createElement(Polygon, {
     points: [...points],
     color: "transparent",
@@ -32527,27 +32238,80 @@ const LimitedPolygonGraph = statefulProps => {
         setFocusVisible(hasFocusVisible(polygonRef.current));
       },
       // Required for lines to darken on focus
-      onFocus: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
+      onFocus: () => {
+        setFocusVisible(hasFocusVisible(polygonRef.current));
+        setAriaLives(() => ["polite", ...pointsOffArray]);
+      },
       // Required for line weighting to update on blur. Without this,
       // the user has to hover over the shape for it to update
       onBlur: () => setFocusVisible(hasFocusVisible(polygonRef.current)),
-      className: "movable-polygon"
-    }
-  }), points.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: "point-" + i,
-    constrain: constrain,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => {
-      const now = Date.now();
-      const targetFPS = 40;
-      const moveThresholdTime = 1000 / targetFPS;
-      if (now - lastMoveTimeRef.current > moveThresholdTime) {
-        dispatch(actions.polygon.movePoint(i, destination));
-        lastMoveTimeRef.current = now;
-      }
+      className: "movable-polygon",
+      // Accessibility-related fields
+      role: "button",
+      "aria-label": srPolygonGraphPoints ? `${srPolygonElementsNum} ${srPolygonGraphPoints}` : srPolygonElementsNum,
+      "aria-live": ariaLives[0]
     }
-  })));
+  }), points.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    const side1Id = `${id}-point-${i}-side-1`;
+    const side2Id = `${id}-point-${i}-side-2`;
+
+    // Limited polygons always have an angle at each vertex.
+    const angle = getAngleFromPoints(points, i);
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+
+    // Limited polygons always two sides attached to each vertex.
+    const sidesArray = getSideLengthsFromPoints(points, i);
+    const {
+      pointIndex: point1Index,
+      sideLength: side1Length
+    } = sidesArray[0];
+    const {
+      pointIndex: point2Index,
+      sideLength: side2Length
+    } = sidesArray[1];
+    return /*#__PURE__*/React.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${side1Id} ${side2Id}`,
+      ariaLive: ariaLives[i + 1],
+      constrain: constrain,
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => {
+        const now = Date.now();
+        const targetFPS = 40;
+        const moveThresholdTime = 1000 / targetFPS;
+        if (now - lastMoveTimeRef.current > moveThresholdTime) {
+          dispatch(actions.polygon.movePoint(i, destination));
+          lastMoveTimeRef.current = now;
+        }
+      },
+      onFocus: () => {
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives(["off", ...newPointAriaLives]);
+      }
+    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), /*#__PURE__*/React.createElement("g", {
+      id: side1Id
+    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React.createElement("g", {
+      id: side2Id
+    }, getPolygonSideString(side2Length, point2Index, strings, locale)));
+  }), /*#__PURE__*/React.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 const UnlimitedPolygonGraph = statefulProps => {
   const {
@@ -32562,6 +32326,19 @@ const UnlimitedPolygonGraph = statefulProps => {
     coords,
     closedPolygon
   } = statefulProps.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React.useId();
+  const polygonPointsNumId = id + "-points-num";
+  const polygonPointsId = id + "-points";
+
+  // When moving an element, set its aria-live to "polite" and the others
+  // to "off". Otherwise, other connected elements that move at the same
+  // time might override the currently focused element's aria live.
+  const pointsOffArray = Array(points.length).fill("off");
+  const [ariaLives, setAriaLives] = React.useState(pointsOffArray);
 
   // If the polygon is closed, return a LimitedPolygon component.
   if (closedPolygon) {
@@ -32575,7 +32352,22 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Polyline, {
+
+  // Aria label srings
+  const emptyGraph = coords.length === 0;
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": emptyGraph ? strings.srUnlimitedPolygonEmpty : srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React.createElement(Polyline, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolylineProps: {
@@ -32600,28 +32392,68 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    sequenceNumber: i + 1,
-    onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
-    ref: ref => {
-      pointsRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.polygon.focusPoint(i));
-    },
-    onClick: () => {
-      // If the point being clicked is the first point and
-      // there's enough non-duplicated points to form
-      // a polygon (3 or more), close the shape before
-      // setting focus.
-      if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
-        dispatch(actions.polygon.closePolygon());
-      }
-      dispatch(actions.polygon.clickPoint(i));
+  }), coords.map((point, i) => {
+    const angleId = `${id}-angle-${i}`;
+    let sideIds = "";
+
+    // This point only has an angle if it's not the first
+    // or last point in this open polygon.
+    const hasAngle = i > 0 && i < coords.length - 1;
+    const angle = hasAngle ? getAngleFromPoints(points, i) : null;
+    const angleDegree = angle ? convertRadiansToDegrees(angle) : null;
+    const sidesArray = getSideLengthsFromPoints(points, i, true);
+    for (let sideIndex = 0; sideIndex < sidesArray.length; sideIndex++) {
+      sideIds += `${id}-point-${i}-side-${sideIndex} `;
     }
-  })));
+    return /*#__PURE__*/React.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React.createElement(MovablePoint$1, {
+      ariaDescribedBy: `${angleId} ${sideIds}`,
+      ariaLive: ariaLives[i],
+      point: point,
+      sequenceNumber: i + 1,
+      onMove: destination => dispatch(actions.polygon.movePoint(i, destination)),
+      ref: ref => {
+        pointsRef.current[i] = ref;
+      },
+      onFocus: () => {
+        dispatch(actions.polygon.focusPoint(i));
+        const newPointAriaLives = [...pointsOffArray];
+        newPointAriaLives[i] = "polite";
+        // Whole polygon is "off", and the current
+        // point is "polite".
+        setAriaLives([...newPointAriaLives]);
+      },
+      onClick: () => {
+        // If the point being clicked is the first point and
+        // there's enough non-duplicated points to form
+        // a polygon (3 or more), close the shape before
+        // setting focus.
+        if (i === 0 && getArrayWithoutDuplicates(coords).length >= 3) {
+          dispatch(actions.polygon.closePolygon());
+        }
+        dispatch(actions.polygon.clickPoint(i));
+      }
+    }), angleDegree && /*#__PURE__*/React.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), sidesArray.map(({
+      pointIndex,
+      sideLength
+    }, j) => /*#__PURE__*/React.createElement("g", {
+      key: `${id}-point-${i}-side-${j}`,
+      id: `${id}-point-${i}-side-${j}`
+    }, getPolygonSideString(sideLength, pointIndex, strings, locale))));
+  }), coords.length > 0 && /*#__PURE__*/React.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -32643,6 +32475,54 @@ const hasFocusVisible = element => {
     return matches(":focus");
   }
 };
+function getPolygonGraphDescription(state, i18n, markings) {
+  const strings = describePolygonGraph(state, i18n, markings);
+  return strings.srPolygonInteractiveElements;
+}
+function describePolygonGraph(state, i18n, markings) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const isCoordinatePlane = markings === "axes" || markings === "graph";
+  const hasOnePoint = coords.length === 1;
+
+  // Figure out graph aria label based on markings.
+  const srPolygonGraph = isCoordinatePlane ? strings.srPolygonGraphCoordinatePlane : strings.srPolygonGraph;
+  const srPolygonGraphPointsNum = hasOnePoint ? strings.srPolygonGraphPointsOne : strings.srPolygonGraphPointsNum({
+    num: coords.length
+  });
+  let srPolygonGraphPoints;
+  // Figure out graph description based on markings.
+  // If the graph is not on a coordinate plane, we should not include
+  // the points' coordinates in the description.
+  if (isCoordinatePlane) {
+    const pointsString = coords.map((coord, i) => {
+      return strings.srPointAtCoordinates({
+        num: i + 1,
+        x: srFormatNumber(coord[0], locale),
+        y: srFormatNumber(coord[1], locale)
+      });
+    });
+    srPolygonGraphPoints = pointsString.join(" ");
+  }
+  const srPolygonElementsNum = hasOnePoint ? strings.srPolygonElementsOne : strings.srPolygonElementsNum({
+    num: coords.length
+  });
+  const srPolygonInteractiveElements = coords.length > 0 ? strings.srInteractiveElements({
+    elements: [srPolygonElementsNum, srPolygonGraphPoints].join(" ")
+  }) : null;
+  return {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints,
+    srPolygonElementsNum,
+    srPolygonInteractiveElements
+  };
+}
 
 function renderQuadraticGraph(state, dispatch, i18n) {
   return {
@@ -33342,7 +33222,8 @@ const MafsGraph = props => {
   } = renderGraphElements({
     state,
     dispatch,
-    i18n
+    i18n,
+    markings: props.markings
   });
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
@@ -33377,7 +33258,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && "unlimited-graph-keyboard-prompt"),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -33403,7 +33284,19 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null)), /*#__PURE__*/React.createElement(Mafs, {
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisLabels, null)), /*#__PURE__*/React.createElement(View
+  // If we have locked figures, we set aria-hidden
+  // to false so that screen readers can read the
+  // locked figures. If we don't have any locked
+  // figures, we need to set aria-hidden to true so
+  // that screen readers don't read this Mafs element
+  // as an empty image.
+  // Note: Adding this in a wrapping View element
+  // so that `aria-hidden` is a valid property.
+  // It does not work on `Mafs` or svg elements.
+  , {
+    "aria-hidden": props.lockedFigures && props.lockedFigures.length > 0 ? false : true
+  }, /*#__PURE__*/React.createElement(Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[X],
@@ -33423,10 +33316,10 @@ const MafsGraph = props => {
     height: height
   })),
   // Only render the axis ticks and arrows if the markings are set to a full "graph"
-  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AxisTicks, null), /*#__PURE__*/React.createElement(AxisArrows, null)), props.lockedFigures && props.lockedFigures.length > 0 && /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }))), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
+  })))), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLabelsLayer, {
     lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React.createElement(View, {
     style: {
@@ -33721,7 +33614,8 @@ const renderGraphElements = props => {
   const {
     state,
     dispatch,
-    i18n
+    i18n,
+    markings
   } = props;
   const {
     type
@@ -33738,7 +33632,7 @@ const renderGraphElements = props => {
     case "ray":
       return renderRayGraph(state, dispatch);
     case "polygon":
-      return renderPolygonGraph(state, dispatch);
+      return renderPolygonGraph(state, dispatch, i18n, markings);
     case "point":
       return renderPointGraph(state, dispatch);
     case "circle":
@@ -36375,26 +36269,17 @@ class InteractiveGraph extends React.Component {
   }
   render() {
     var _this$props$apiOption;
-    // Mafs shim
-    const mafsFlags = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null ? void 0 : _this$props$apiOption["mafs"];
-    if (shouldUseMafs(mafsFlags, this.props.graph)) {
-      var _this$props$apiOption2, _this$props$apiOption3;
-      const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
-      const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
-      const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
-      return /*#__PURE__*/React.createElement(StatefulMafsGraph, _extends({}, this.props, {
-        flags: (_this$props$apiOption2 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption2.flags,
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box,
-        showTooltips: !!this.props.showTooltips,
-        readOnly: (_this$props$apiOption3 = this.props.apiOptions) == null ? void 0 : _this$props$apiOption3.readOnly
-      }));
-    }
-    return /*#__PURE__*/React.createElement(LegacyInteractiveGraph, _extends({
-      ref: this.legacyGraphRef
-    }, this.props));
+    const box = getInteractiveBoxFromSizeClass(this.props.containerSizeClass);
+    const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, box[0]);
+    const snapStep = this.props.snapStep || Util.snapStepFromGridStep(gridStep);
+    return /*#__PURE__*/React.createElement(StatefulMafsGraph, _extends({}, this.props, {
+      ref: this.mafsRef,
+      gridStep: gridStep,
+      snapStep: snapStep,
+      box: box,
+      showTooltips: !!this.props.showTooltips,
+      readOnly: (_this$props$apiOption = this.props.apiOptions) == null ? void 0 : _this$props$apiOption.readOnly
+    }));
   }
 
   /**
@@ -36710,7 +36595,7 @@ class InteractiveGraph extends React.Component {
   }
 }
 
-// exported for testing
+// We don't need to change any of the original props for static mode
 InteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
@@ -36723,37 +36608,13 @@ InteractiveGraph.defaultProps = {
     type: "linear"
   }
 };
-function shouldUseMafs(mafsFlags, graph) {
-  if (typeof mafsFlags === "boolean" || typeof mafsFlags === "undefined") {
-    return false;
-  }
-  switch (graph.type) {
-    case "none":
-      return true;
-    case "point":
-      if (graph.numPoints === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-point"]);
-      }
-      return Boolean(mafsFlags["point"]);
-    case "polygon":
-      if (graph.numSides === UNLIMITED) {
-        return Boolean(mafsFlags["unlimited-polygon"]);
-      }
-      return Boolean(mafsFlags["polygon"]);
-    default:
-      return Boolean(mafsFlags[graph.type]);
-  }
-}
-// We don't need to change any of the original props for static mode
 const staticTransform$3 = _.identity;
 var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
   staticTransform: staticTransform$3,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusInteractiveGraphUserInput'.
-  scorer: scoreInteractiveGraph
+  getPublicWidgetOptions: getInteractiveGraphPublicWidgetOptions
 };
 
 // TODO: can we use WB typography?
@@ -37695,9 +37556,7 @@ var LabelImage$1 = {
   widget: LabelImageWithDependencies,
   accessible: true,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusLabelImageUserInput'.
-  scorer: scoreLabelImage
+  getPublicWidgetOptions: getLabelImagePublicWidgetOptions
 };
 
 var ItemState = /*#__PURE__*/function (ItemState) {
@@ -37930,7 +37789,7 @@ class Draggable extends React.Component {
     // We need to keep backwards compatbility with rules specified directly
     // in CSS. Hence the hacky tacking on of manual classNames.
     // See sortable.less for details.
-    let className = css(styles$8.card, styles$8.draggable, layout === "horizontal" && styles$8.horizontalCard, layout === "vertical" && styles$8.verticalCard, type === ItemState.DRAGGING && styles$8.dragging, type === ItemState.DISABLED && styles$8.disabled, !includePadding && styles$8.unpaddedCard) + " " + ClassNames.INTERACTIVE + " perseus-sortable-draggable";
+    let className = css(styles$8.card, styles$8.draggable, layout === "horizontal" && styles$8.horizontalCard, layout === "vertical" && styles$8.verticalCard, type === ItemState.DRAGGING && styles$8.dragging, type === ItemState.DISABLED && styles$8.disabled, !includePadding && styles$8.unpaddedCard) + " " + "perseus-sortable-draggable";
     if (!includePadding) {
       className += " perseus-sortable-draggable-unpadded";
     }
@@ -38631,10 +38490,7 @@ var Matcher$1 = {
   name: "matcher",
   displayName: "Matcher (two column)",
   widget: Matcher,
-  isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatcherUserInput'.
-  scorer: scoreMatcher
+  isLintable: true
 };
 
 const getPromptJSON$8 = (renderProps, userInput) => {
@@ -39039,12 +38895,7 @@ var Matrix$1 = {
   transform: propTransform$1,
   staticTransform: staticTransform$2,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatrixUserInput'.
-  scorer: scoreMatrix,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatrixUserInput'.
-  validator: validateMatrix
+  getPublicWidgetOptions: getMatrixPublicWidgetOptions
 };
 
 const getPromptJSON$7 = () => {
@@ -39124,7 +38975,7 @@ class Measurer extends React.Component {
     // TODO(scottgrant): This isn't a11y-friendly! We should insist on
     // finding some valid alt text when this widget is used.
     return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget perseus-widget-measurer " + "graphie-container above-scratchpad",
+      className: "perseus-widget perseus-widget-measurer " + "graphie-container blank-background",
       style: {
         width: this.props.box[0],
         height: this.props.box[1]
@@ -39161,9 +39012,7 @@ var Measurer$1 = {
   hidden: true,
   widget: Measurer,
   version: measurerLogic.version,
-  propUpgrades: measurerLogic.widgetOptionsUpgrades,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop(1)
+  propUpgrades: measurerLogic.widgetOptionsUpgrades
 };
 
 /**
@@ -40051,8 +39900,7 @@ var Molecule$1 = {
   name: "molecule-renderer",
   displayName: "Molecule renderer",
   hidden: true,
-  widget: MoleculeWidget,
-  scorer: () => scoreNoop()
+  widget: MoleculeWidget
 };
 
 const getPromptJSON$6 = (renderProps, userInput) => {
@@ -40621,12 +40469,7 @@ var NumberLine$1 = {
   widget: NumberLine,
   transform: numberLineTransform,
   staticTransform: staticTransform$1,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumberLineUserInput'.
-  scorer: scoreNumberLine,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumberLineUserInput'.
-  validator: validateNumberLine
+  getPublicWidgetOptions: getNumberLinePublicWidgetOptions
 };
 
 const getPromptJSON$5 = (renderProps, userInput) => {
@@ -40644,7 +40487,7 @@ const getPromptJSON$5 = (renderProps, userInput) => {
 class PlaceholderCard extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
+      className: "card-wrap",
       style: {
         width: this.props.width
       }
@@ -40659,7 +40502,7 @@ class PlaceholderCard extends React.Component {
 class DragHintCard extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE
+      className: "card-wrap"
     }, /*#__PURE__*/React.createElement("div", {
       className: "card drag-hint"
     }));
@@ -40795,7 +40638,7 @@ class Card extends React.Component {
     const rendererProps = _.pick(this.props, "content");
     const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
     return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
+      className: "card-wrap",
       style: style,
       onMouseDown: onMouseDown,
       onTouchStart: onMouseDown,
@@ -41166,7 +41009,7 @@ class Orderer extends React.Component {
       });
     }, this));
     return /*#__PURE__*/React.createElement("div", {
-      className: "draggy-boxy-thing orderer " + "height-" + this.props.height + " " + "layout-" + this.props.layout + " " + "above-scratchpad blank-background " + "perseus-clearfix " + ClassNames.INTERACTIVE
+      className: "draggy-boxy-thing orderer " + "height-" + this.props.height + " " + "layout-" + this.props.layout + " " + "blank-background " + "perseus-clearfix "
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "orderer"
@@ -41187,12 +41030,6 @@ var Orderer$1 = {
   hidden: true,
   widget: Orderer,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusOrdererUserInput
-  scorer: scoreOrderer,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusOrdererUserInput
-  validator: validateOrderer,
   getPublicWidgetOptions: getOrdererPublicWidgetOptions
 };
 
@@ -41231,15 +41068,12 @@ PassageRefTarget.defaultProps = {
 var PassageRefTarget$1 = {
   name: "passage-ref-target",
   displayName: "PassageRefTarget",
-  defaultAlignment: "inline",
   widget: PassageRefTarget,
   hidden: true,
   transform: editorProps => {
     return _.pick(editorProps, "content");
   },
-  isLintable: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 const getPromptJSON$4 = () => {
@@ -42226,7 +42060,7 @@ class Plotter extends React.Component {
       marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
+      className: "perseus-widget-plotter graphie"
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "graphieDiv",
@@ -42257,12 +42091,7 @@ var Plotter$1 = {
   hidden: true,
   widget: Plotter,
   staticTransform: staticTransform,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusPlotterUserInput
-  scorer: scorePlotter,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusPlotterUserInput
-  validator: validatePlotter
+  getPublicWidgetOptions: getPlotterPublicWidgetOptions
 };
 
 const getPromptJSON$2 = () => {
@@ -42425,12 +42254,7 @@ var Sorter$1 = {
   displayName: "Sorter",
   widget: Sorter,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusSorterUserInput
-  scorer: scoreSorter,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusSorterUserInput
-  validator: validateSorter
+  getPublicWidgetOptions: getSorterPublicWidgetOptions
 };
 
 const {
@@ -42650,12 +42474,7 @@ var Table$1 = {
   transform: propTransform,
   hidden: true,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusTableUserInput
-  scorer: scoreTable,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusTableUserInput
-  validator: validateTable
+  getPublicWidgetOptions: getTablePublicWidgetOptions
 };
 
 const getPromptJSON = () => {
@@ -42815,11 +42634,7 @@ Video.contextType = PerseusI18nContext;
 var Video$1 = {
   name: "video",
   displayName: "Video",
-  defaultAlignment: "block",
-  supportedAlignments: ["block", "float-left", "float-right", "full-width"],
-  widget: Video,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  widget: Video
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -42838,7 +42653,7 @@ const init = function init() {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "52.0.1";
+const libVersion = "53.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43705,6 +43520,42 @@ const ref = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.cre
   ref: ref
 }))));
 
+function isCorrect(score) {
+  return score.type === "points" && score.earned >= score.total;
+}
+function keScoreFromPerseusScore(score,
+// It's weird, but this is what we're passing it
+guess, state) {
+  if (score.type === "points") {
+    return {
+      empty: false,
+      correct: isCorrect(score),
+      message: score.message,
+      guess: guess,
+      state: state
+    };
+  }
+  if (score.type === "invalid") {
+    return {
+      empty: true,
+      correct: false,
+      message: score.message,
+      suppressAlmostThere: score.suppressAlmostThere,
+      guess: guess,
+      state: state
+    };
+  }
+  throw new PerseusError(
+  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
+  "Invalid score type: " + score.type, Errors.InvalidInput, {
+    metadata: {
+      score: JSON.stringify(score),
+      guess: JSON.stringify(guess),
+      state: JSON.stringify(state)
+    }
+  });
+}
+
 /**
  * Traverses a {content, widgets, images} renderer props object,
  * such as `itemData.question`
@@ -45081,5 +44932,5 @@ const ScoringUtil = {
  * Types
  */
 
-export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, JiptParagraphs, KhanColors, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, makeSafeUrl, mathOnlyParser, mediaQueries, parseDataFromJSONP, preprocessTex, registerAllWidgetsForTesting, scorePerseusItem, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, dependencies as Dependencies, EditorJsonify, Expression, GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, JiptParagraphs, KhanColors, context as LoadingContext, Log, Matrix$1 as MatrixWidget, NumericInput$1 as NumericInput, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ScoringUtil, ref as ServerItemRenderer, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, widgets$1 as Widgets, apiVersion, bodyXsmallBold, components, containerSizeClass, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getImagesWithoutAltData, getInteractiveBoxFromSizeClass, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, iconChevronDown, iconTrash, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, ItemVersion as itemVersion, libVersion, makeSafeUrl, mathOnlyParser, mediaQueries, parseDataFromJSONP, preprocessTex, registerAllWidgetsForTesting, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map