@khanacademy/perseus 52.0.1 → 53.1.0

package/dist/index.js

@@ -6,7 +6,6 @@ var KAS = require('@khanacademy/kas');
 var mathInput = require('@khanacademy/math-input');
 var perseusCore = require('@khanacademy/perseus-core');
 var PerseusLinter = require('@khanacademy/perseus-linter');
-var perseusScore = require('@khanacademy/perseus-score');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var Tooltip$1 = require('@khanacademy/wonder-blocks-tooltip');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
@@ -21,6 +20,7 @@ var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var $ = require('jquery');
 var uuid = require('uuid');
 var PropTypes = require('prop-types');
+var perseusScore = require('@khanacademy/perseus-score');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
 var kmath = require('@khanacademy/kmath');
@@ -33,7 +33,7 @@ var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var caretDown = require('@phosphor-icons/core/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/regular/caret-up.svg');
-var debounce$1 = require('lodash.debounce');
+require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
@@ -82,7 +82,6 @@ var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
 var caretUp__default = /*#__PURE__*/_interopDefaultLegacy(caretUp);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce$1);
 var questionIcon__default = /*#__PURE__*/_interopDefaultLegacy(questionIcon);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
@@ -379,7 +378,7 @@ const mockStrings = {
       x,
       y
     } = _ref27;
-    return `Point ${num} at ${x} comma ${y}`;
+    return `Point ${num} at ${x} comma ${y}.`;
   },
   srInteractiveElements: _ref28 => {
     let {
@@ -670,7 +669,50 @@ const mockStrings = {
       point3Y
     } = _ref61;
     return `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: _ref62 => {
+    let {
+      num
+    } = _ref62;
+    return `The polygon has ${num} points.`;
+  },
+  srPolygonGraphPointsOne: "The polygon has 1 point.",
+  srPolygonElementsNum: _ref63 => {
+    let {
+      num
+    } = _ref63;
+    return `A polygon with ${num} points.`;
+  },
+  srPolygonElementsOne: "A polygon with 1 point.",
+  srPolygonPointAngleApprox: _ref64 => {
+    let {
+      angle
+    } = _ref64;
+    return `Angle approximately equal to ${angle} degrees.`;
+  },
+  srPolygonPointAngle: _ref65 => {
+    let {
+      angle
+    } = _ref65;
+    return `Angle equal to ${angle} degrees.`;
+  },
+  srPolygonSideLength: _ref66 => {
+    let {
+      pointNum,
+      length
+    } = _ref66;
+    return `A line segment, length equal to ${length} units, connects to point ${pointNum}.`;
+  },
+  srPolygonSideLengthApprox: _ref67 => {
+    let {
+      pointNum,
+      length
+    } = _ref67;
+    return `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.
 };
 
@@ -1612,7 +1654,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",
@@ -1868,7 +1909,6 @@ class Expression extends React__namespace.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,
@@ -1970,7 +2010,6 @@ var Expression$1 = {
   name: "expression",
   displayName: "Expression / Equation",
   accessible: true,
-  defaultAlignment: "inline-block",
   widget: ExpressionWithDependencies,
   transform: widgetOptions => {
     const {
@@ -1995,12 +2034,6 @@ var Expression$1 = {
   propUpgrades: perseusCore.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: perseusScore.scoreExpression,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusExpressionUserInput'.
-  validator: perseusScore.validateExpression,
   getPublicWidgetOptions: perseusCore.getExpressionPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
@@ -3280,10 +3313,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;
@@ -3327,8 +3356,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,
@@ -10074,7 +10101,7 @@ class WrappedLine extends WrappedDrawing {
 
 /* eslint-disable @babel/no-invalid-this */
 const {
-  clockwise: clockwise$3,
+  clockwise: clockwise$2,
   reverseVector: reverseVector$1
 } = kmath.geometry;
 function scaledDistanceFromAngle(angle) {
@@ -11312,7 +11339,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       // Temporary objects
       ___default["default"].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) {
@@ -14745,7 +14772,7 @@ function sum(array) {
     return memo + arg;
   }, 0);
 }
-function clockwise$2(points) {
+function clockwise$1(points) {
   const segments = ___default["default"].zip(points, points.slice(1).concat(points.slice(0, 1)));
   const areas = ___default["default"].map(segments, function (segment) {
     const p1 = segment[0];
@@ -14811,7 +14838,7 @@ const draw$1 = {
     const graphie = this.graphie;
     const self = this;
     const coords = ___default["default"].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
@@ -16557,9 +16584,28 @@ class Zoomable extends React__namespace.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) {
+      // 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.parentElement?.closest(".perseus-renderer") ?? 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);
 
@@ -17623,130 +17669,162 @@ class QuestionParagraph extends React__namespace.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;
+
+// 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 {
+  // To avoid linting when nothing has changed.
+  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.
+   */
+  runLinter = _.debounce((perseusStr, onLintErrorsGenerated) => {
+    // TODO(FEI-5003): Do we still need to check for 'KA'?
+    if (typeof KA === "undefined") {
+      return;
     }
-    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;
+    if (perseusStr === this.previousContent) {
+      return;
     }
-    return {
-      type: "invalid",
-      message: message
-    };
-  }
+    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 perseusCore.PerseusError("PerseusScore with unknown type encountered", perseusCore.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: PerseusLinter.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 perseusCore.PerseusError(
-  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
-  "Invalid score type: " + score.type, perseusCore.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 = {};
@@ -17763,7 +17841,6 @@ const registerWidgets = widgets => {
   widgets.forEach(widget => {
     registerWidget(widget.name, widget);
   });
-  validateAlignments();
 };
 
 /**
@@ -17844,12 +17921,6 @@ const getWidget = name => {
 const getWidgetExport = name => {
   return widgets[name] ?? null;
 };
-const getWidgetValidator = name => {
-  return widgets[name]?.validator ?? null;
-};
-const getWidgetScorer = name => {
-  return widgets[name]?.scorer ?? null;
-};
 const getPublicWidgetOptionsFunction = name => {
   return widgets[name]?.getPublicWidgetOptions ?? (i => i);
 };
@@ -17895,112 +17966,6 @@ const isAccessible = widgetInfo => {
 const getAllWidgetTypes = () => {
   return ___default["default"].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 (!___default["default"].isString(type)) {
-    throw new perseusCore.PerseusError("widget type must be a string, but was: " + type, perseusCore.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 = ___default["default"].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 (___default["default"].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.", perseusCore.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 = {
-    ...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 ___default["default"].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];
@@ -18042,70 +18007,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 = () => {
-  ___default["default"].each(widgets, function (widgetInfo) {
-    if (widgetInfo.defaultAlignment && !___default["default"].contains(validAlignments, widgetInfo.defaultAlignment)) {
-      throw new perseusCore.PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid defaultAlignment value: " + widgetInfo.defaultAlignment, perseusCore.Errors.InvalidInput);
-    }
-    if (widgetInfo.supportedAlignments) {
-      const unknownAlignments = ___default["default"].difference(widgetInfo.supportedAlignments, validAlignments);
-      if (unknownAlignments.length) {
-        throw new perseusCore.PerseusError("Widget '" + widgetInfo.displayName + "' has an invalid value for supportedAlignments: " + unknownAlignments.join(" "), perseusCore.Errors.InvalidInput);
-      }
-    }
-  });
-};
-
 /**
  * Handling for static mode for widgets that support it.
  */
@@ -18159,8 +18060,6 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getWidgetValidator: getWidgetValidator,
-  getWidgetScorer: getWidgetScorer,
   getPublicWidgetOptionsFunction: getPublicWidgetOptionsFunction,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -18169,267 +18068,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 perseusCore.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 = {
-        ...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?.(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 = perseusCore.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?.graded == null || props.graded;
-    const widgetIsStatic = !!props?.static;
-    // Ungraded widgets or widgets set to static shouldn't be graded.
-    return widgetIsGraded && !widgetIsStatic;
-  });
-  const widgetScores = {};
-  gradedWidgetIds.forEach(id => {
-    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?.(userInput, widget.options, strings, locale) ?? 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 {
-  // To avoid linting when nothing has changed.
-  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.
-   */
-  runLinter = _.debounce((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: PerseusLinter.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__namespace.Component {
   widgetRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
@@ -18502,7 +18148,7 @@ class WidgetContainer extends React__namespace.Component {
     }
     let alignment = this.state.widgetProps.alignment;
     if (alignment === "default") {
-      alignment = getDefaultAlignment(type);
+      alignment = perseusCore.CoreWidgetRegistry.getDefaultAlignment(type);
     }
     className += " widget-" + alignment;
     const apiOptions = this.state.widgetProps.apiOptions;
@@ -18510,6 +18156,7 @@ class WidgetContainer extends React__namespace.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",
@@ -18521,7 +18168,7 @@ class WidgetContainer extends React__namespace.Component {
       position: "absolute",
       top: 0,
       left: 0,
-      zIndex: zIndexInteractiveComponent$1
+      zIndex: 3
     };
 
     // Some widgets may include strings of markdown that we may
@@ -18787,7 +18434,7 @@ class Renderer extends React__namespace.Component {
     };
   };
   _getInitialWidgetState = props => {
-    const allWidgetInfo = getUpgradedWidgetOptions(props.widgets);
+    const allWidgetInfo = perseusCore.getUpgradedWidgetOptions(props.widgets);
     return {
       widgetInfo: allWidgetInfo,
       widgetProps: this._getAllWidgetsStartProps(allWidgetInfo, props)
@@ -19699,7 +19346,7 @@ class Renderer extends React__namespace.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 perseusScore.emptyWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.context.locale);
   }
   _setWidgetProps = (id, newProps, cb, silent) => {
     this.setState(prevState => {
@@ -19829,8 +19476,8 @@ class Renderer extends React__namespace.Component {
    * @deprecated use scorePerseusItem
    */
   score() {
-    const scores = scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.props.strings, this.context.locale);
-    const combinedScore = flattenScores(scores);
+    const scores = perseusScore.scoreWidgetsFunctional(this.state.widgetInfo, this.widgetIds, this.getUserInputMap(), this.context.locale);
+    const combinedScore = perseusScore.flattenScores(scores);
     return combinedScore;
   }
 
@@ -20351,7 +19998,7 @@ class InputWithExamples extends React__namespace.Component {
   };
   _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;
     }
@@ -20744,14 +20391,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: perseusScore.scoreInputNumber,
   getOneCorrectAnswerFromRubric(rubric) {
     if (rubric.value == null) {
       return;
@@ -21003,14 +20646,11 @@ const propsTransform = function (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: perseusScore.scoreNumericInput,
+  getPublicWidgetOptions: perseusCore.getNumericInputPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
@@ -21071,24 +20711,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() {
-  let points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return {
-    type: "points",
-    earned: points,
-    total: points,
-    message: null
-  };
-}
-
 /**
  * Utility functions for manipulating ranges of highlightable content.
  */
@@ -23266,8 +22888,7 @@ var Passage$1 = {
   transform: editorProps => {
     return ___default["default"].pick(editorProps, "passageTitle", "passageText", "footnotes", "showLineNumbers");
   },
-  isLintable: true,
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 /**
@@ -23393,16 +23014,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: perseusCore.passageRefLogic.version,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  version: perseusCore.passageRefLogic.version
 };
 
 /**
@@ -23444,109 +23062,6 @@ var mediaQueries = {
   xlOrLarger: `@media screen and (min-width: ${pureXlMin})`
 };
 
-const {
-  zIndexAboveScratchpad,
-  zIndexInteractiveComponent,
-  radioBorderColor,
-  checkedColor,
-  circleSize,
-  radioMarginWidth
-} = constants;
-var sharedStyles = aphrodite.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.
  */
@@ -23923,8 +23438,8 @@ const styles$s = aphrodite.StyleSheet.create({
   crossOutLine: {
     // Center the icon within the container.
     position: "absolute",
-    top: `0px`,
-    left: `0px`
+    top: `2px`,
+    left: `2px`
   }
 });
 
@@ -23951,43 +23466,6 @@ function ChoiceInner(props) {
   }
   return /*#__PURE__*/React__namespace.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;
-  if (!showCorrectness && pressed) {
-    borderColor = wonderBlocksTokens.color.blue;
-    color = wonderBlocksTokens.color.blue;
-    backgroundColor = "transparent";
-  } else if (checked) {
-    const bg = showCorrectness && correct ? wonderBlocksTokens.color.green : wonderBlocksTokens.color.blue;
-    color = white;
-    backgroundColor = bg;
-    borderColor = bg;
-  } else {
-    borderColor = wonderBlocksTokens.color.offBlack64;
-    color = wonderBlocksTokens.color.offBlack64;
-  }
-
-  // define shape
-  let borderRadius;
-  if (multipleSelect) {
-    borderRadius = 3;
-  } else {
-    borderRadius = CHOICE_ICON_SIZE;
-  }
-  return {
-    backgroundColor,
-    borderColor,
-    color,
-    borderRadius
-  };
-}
 const ChoiceIcon = function (props) {
   const {
     checked,
@@ -23999,9 +23477,41 @@ const ChoiceIcon = function (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 = wonderBlocksTokens.color.green;
+  } else if (showCorrectness && !correct && (checked || previouslyAnswered)) {
+    choiceStyling.push(styles$r.choiceIncorrect);
+    crossOutColor = wonderBlocksTokens.color.red;
+  } else if (checked) {
+    // Show filled neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.choiceNeutral);
+    crossOutColor = wonderBlocksTokens.color.blue;
+  } else if (pressed) {
+    // Show outlined neutral blue color (showCorrectness is false)
+    choiceStyling.push(styles$r.activeNeutral);
+    crossOutColor = wonderBlocksTokens.color.blue;
+  } else {
+    // choice is not checked
+    choiceStyling.push(styles$r.uncheckedColors);
+    crossOutColor = wonderBlocksTokens.color.offBlack64;
+  }
   return /*#__PURE__*/React__namespace.createElement("div", {
     className: aphrodite.css(styles$t.iconWrapper)
   }, /*#__PURE__*/React__namespace.createElement(FocusRing, {
@@ -24009,9 +23519,8 @@ const ChoiceIcon = function (props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
-    className: aphrodite.css(styles$r.circle, showCorrectness && correct && styles$r.circleCorrect, showCorrectness && !correct && styles$r.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$r.circleIncorrectAnswered)
+    className: aphrodite.css(...choiceStyling)
     // used in BaseRadio editMode to check
     // if we actually clicked on the radio icon
     ,
@@ -24023,7 +23532,7 @@ const ChoiceIcon = function (props) {
     showCorrectness: showCorrectness,
     correct: correct
   })))), crossedOut && /*#__PURE__*/React__namespace.createElement(CrossOutLine, {
-    color: dynamicStyles.borderColor
+    color: crossOutColor
   }));
 };
 const styles$r = aphrodite.StyleSheet.create({
@@ -24035,8 +23544,7 @@ const styles$r = aphrodite.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  circle: {
-    // Make the circle
+  choiceBase: {
     width: CHOICE_ICON_SIZE,
     height: CHOICE_ICON_SIZE,
     boxSizing: "border-box",
@@ -24048,30 +23556,48 @@ const styles$r = aphrodite.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: wonderBlocksTokens.color.white
+  },
+  choiceIsUnchecked: {
+    color: wonderBlocksTokens.color.offBlack64
+  },
+  choiceCorrect: {
+    backgroundColor: wonderBlocksTokens.color.green,
+    borderColor: wonderBlocksTokens.color.green
   },
-  circleIncorrectAnswered: {
+  choiceIncorrect: {
     backgroundColor: wonderBlocksTokens.color.red,
-    borderColor: wonderBlocksTokens.color.red,
-    color: wonderBlocksTokens.color.white
+    borderColor: wonderBlocksTokens.color.red
+  },
+  choiceNeutral: {
+    backgroundColor: wonderBlocksTokens.color.blue,
+    borderColor: wonderBlocksTokens.color.blue
+  },
+  activeNeutral: {
+    color: wonderBlocksTokens.color.blue,
+    borderColor: wonderBlocksTokens.color.blue,
+    backgroundColor: "transparent"
+  },
+  multiSelectShape: {
+    borderRadius: 3
+  },
+  singleSelectShape: {
+    borderRadius: CHOICE_ICON_SIZE
+  },
+  uncheckedColors: {
+    borderColor: wonderBlocksTokens.color.offBlack64
   }
 });
 
@@ -24615,7 +24141,7 @@ const BaseRadio = function (_ref) {
     const aphroditeClassName = checked => {
       // Whether or not to show correctness borders
       // for this choice and the next choice.
-      return aphrodite.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 aphrodite.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
@@ -25220,17 +24746,105 @@ var Radio = {
   version: perseusCore.radioLogic.version,
   propUpgrades: perseusCore.radioLogic.widgetOptionsUpgrades,
   isLintable: true,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
-  scorer: perseusScore.scoreRadio,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusRadioUserInput
-  validator: perseusScore.validateRadio
+  getPublicWidgetOptions: perseusCore.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 = aphrodite.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",
@@ -25331,7 +24945,6 @@ class Categorizer extends React__namespace.Component {
           className: "category " + aphrodite.css(styles$n.cell),
           key: catNum
         }, /*#__PURE__*/React__namespace.createElement("div", {
-          className: ClassNames.INTERACTIVE,
           role: "button",
           "aria-label": catName,
           onClick: () => this.onChange(itemNum, catNum)
@@ -25423,12 +25036,6 @@ var Categorizer$1 = {
     return ___default["default"].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: perseusScore.scoreCategorizer,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusCSProgramUserInput'.
-  validator: perseusScore.validateCategorizer,
   getPublicWidgetOptions: perseusCore.getCategorizerPublicWidgetOptions
 };
 
@@ -25638,12 +25245,9 @@ const styles$m = aphrodite.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: perseusScore.scoreCSProgram
+  getPublicWidgetOptions: perseusCore.getCSProgramPublicWidgetOptions
 };
 
 const getPromptJSON$l = renderProps => {
@@ -25720,11 +25324,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
@@ -25751,9 +25352,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) => {
@@ -25862,16 +25461,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: perseusScore.scoreDropdown,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusDropdownUserInput'.
-  validator: perseusScore.validateDropdown
+  getPublicWidgetOptions: perseusCore.getDropdownPublicWidgetOptions
 };
 
 const getPromptJSON$j = renderProps => {
@@ -26030,12 +25623,9 @@ var Explanation$1 = {
   name: "explanation",
   displayName: "Explanation",
   accessible: true,
-  defaultAlignment: "inline",
   widget: Explanation,
   transform: ___default["default"].identity,
-  isLintable: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 const getPromptJSON$i = (title, rendererJSON, hintRendererJSON) => {
@@ -27156,7 +26746,7 @@ class FunctionGrapher extends React__namespace.Component {
         boxSizing: "initial"
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie-container above-scratchpad",
+      className: "graphie-container blank-background",
       style: {
         width: box[0],
         height: box[1]
@@ -27284,8 +26874,7 @@ class Grapher extends React__namespace.Component {
     const coords = this.props.plot.coords;
     const asymptote = this.props.plot.asymptote;
     const typeSelector = /*#__PURE__*/React__namespace.createElement("div", {
-      style: typeSelectorStyle,
-      className: "above-scratchpad"
+      style: typeSelectorStyle
     }, /*#__PURE__*/React__namespace.createElement(ButtonGroup, {
       value: type,
       allowEmpty: true,
@@ -27368,9 +26957,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: perseusScore.scoreGrapher
+  getPublicWidgetOptions: perseusCore.getGrapherPublicWidgetOptions
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -27387,24 +26974,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__namespace.Component {
@@ -27556,12 +27125,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
 };
@@ -27702,9 +27265,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: perseusScore.scoreIframe
+  getPublicWidgetOptions: perseusCore.getIFramePublicWidgetOptions
 };
 
 const getPromptJSON$d = renderProps => {
@@ -27726,15 +27287,13 @@ const defaultBackgroundImage$2 = {
   width: 0,
   height: 0
 };
-const editorAlignments = ["block", "full-width"];
-const DEFAULT_ALIGNMENT = "block";
 
 // there is no transform as part of exports
 
 class ImageWidget extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   static defaultProps = {
-    alignment: DEFAULT_ALIGNMENT,
+    alignment: "block",
     title: "",
     range: [defaultRange, defaultRange],
     box: [defaultBoxSize, defaultBoxSize],
@@ -27901,13 +27460,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 = () => {
@@ -28510,9 +28065,7 @@ var Interactive = {
   displayName: "Interaction",
   widget: Interaction,
   transform: ___default["default"].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 */
@@ -28794,7 +28347,7 @@ class Graph extends React__namespace.Component {
       image = null;
     }
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie-container above-scratchpad",
+      className: "graphie-container blank-background",
       style: {
         width: this.props.box[0],
         height: this.props.box[1]
@@ -29428,7 +28981,8 @@ const YGridTick = _ref => {
   let {
     y,
     range,
-    tickStep
+    tickStep,
+    showPi
   } = _ref;
   // 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,
@@ -29464,6 +29018,7 @@ const YGridTick = _ref => {
   // 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__namespace.createElement("g", {
     className: "tick",
     "aria-hidden": true
@@ -29481,12 +29036,13 @@ const YGridTick = _ref => {
     textAnchor: "end",
     x: xPositionText,
     y: yPositionText
-  }, y.toString()));
+  }, yLabel));
 };
 const XGridTick = _ref2 => {
   let {
     x,
-    range
+    range,
+    showPi
   } = _ref2;
   // 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,
@@ -29525,6 +29081,7 @@ const XGridTick = _ref2 => {
   // 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__namespace.createElement("g", {
     className: "tick",
     "aria-hidden": true
@@ -29542,7 +29099,7 @@ const XGridTick = _ref2 => {
     textAnchor: "middle",
     x: xPositionText,
     y: yPositionText
-  }, x.toString()));
+  }, xLabel));
 };
 
 // Determines whether to show the label for the given tick
@@ -29589,6 +29146,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,
@@ -29611,6 +29184,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__namespace.createElement("g", {
     className: "x-axis-ticks"
@@ -29619,6 +29196,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
     });
   })));
 };
@@ -29920,6 +29501,15 @@ const styles$d = aphrodite.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 {
   firstNumericalParse,
   captureScratchpadTouchStart
@@ -29957,7 +29547,8 @@ class NumberInput extends React__namespace.Component {
     onFormatChange: PropTypes__default["default"].func,
     checkValidity: PropTypes__default["default"].func,
     size: PropTypes__default["default"].oneOf(["mini", "small", "normal"]),
-    label: PropTypes__default["default"].oneOf(["put your labels outside your inputs!"])
+    label: PropTypes__default["default"].oneOf(["put your labels outside your inputs!"]),
+    allowPiTruncation: PropTypes__default["default"].bool
   };
   static defaultProps = {
     value: null,
@@ -29970,6 +29561,19 @@ class NumberInput extends React__namespace.Component {
   state = {
     format: this.props.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 (!kmath.number.equal(this.getValue(), this.props.value)) {
       this._setValue(this.props.value, this.state.format);
@@ -30126,7 +29730,8 @@ class RangeInput extends React__namespace.Component {
     value: PropTypes__default["default"].array.isRequired,
     onChange: PropTypes__default["default"].func.isRequired,
     placeholder: PropTypes__default["default"].array,
-    checkValidity: PropTypes__default["default"].func
+    checkValidity: PropTypes__default["default"].func,
+    allowPiTruncation: PropTypes__default["default"].bool
   };
   static defaultProps = {
     placeholder: [null, null]
@@ -30150,14 +29755,16 @@ class RangeInput extends React__namespace.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__namespace.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
     })));
   }
 }
@@ -30390,10 +29997,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 ?? 3,
     useGrouping: false // no thousands separators
   });
 }
@@ -30572,6 +30179,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 = mafs.vec.dist(point, pt1);
+  const b = mafs.vec.dist(point, pt2);
+  const c = mafs.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 ? mafs.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 ? mafs.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
 } = kmath.angles;
@@ -31019,7 +30715,7 @@ const SvgDefs = () => /*#__PURE__*/React__default["default"].createElement("defs
 })));
 
 const {
-  clockwise: clockwise$1
+  clockwise
 } = kmath.geometry;
 const {
   getAngleFromVertex: getAngleFromVertex$1
@@ -31034,7 +30730,7 @@ const PolygonAngle = _ref => {
     snapTo
   } = _ref;
   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 = mafs.vec.dist(centerPoint, endPoints[0]);
@@ -31107,7 +30803,7 @@ const Angle = _ref2 => {
     range
   } = _ref2;
   // 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
@@ -32054,9 +31750,6 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-const {
-  clockwise
-} = kmath.geometry;
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return {
@@ -32133,17 +31826,9 @@ 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 {
       ...initialGraph,
-      coords,
+      coords: state.coords,
       allowReflexAngles: state.allowReflexAngles
     };
   }
@@ -32795,17 +32480,20 @@ function describePointGraph(state, i18n) {
     });
   });
   return strings.srInteractiveElements({
-    elements: pointDescriptions.join(", ")
+    elements: pointDescriptions.join(" ")
   });
 }
 
-function renderPolygonGraph(state, dispatch) {
+const {
+  convertRadiansToDegrees
+} = kmath.angles;
+function renderPolygonGraph(state, dispatch, i18n, markings) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(PolygonGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getPolygonGraphDescription(state, i18n, markings)
   };
 }
 const PolygonGraph = props => {
@@ -32890,7 +32578,7 @@ const PolygonGraph = props => {
     focusVisible,
     setFocusVisible
   };
-  return numSides === "unlimited" ? UnlimitedPolygonGraph(statefulProps) : LimitedPolygonGraph(statefulProps);
+  return numSides === "unlimited" ? /*#__PURE__*/React__namespace.createElement(UnlimitedPolygonGraph, statefulProps) : /*#__PURE__*/React__namespace.createElement(LimitedPolygonGraph, statefulProps);
 };
 const LimitedPolygonGraph = statefulProps => {
   const {
@@ -32915,8 +32603,39 @@ const LimitedPolygonGraph = statefulProps => {
   const {
     disableKeyboardInteraction
   } = graphConfig;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.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__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolygonProps: {
@@ -32942,13 +32661,17 @@ const LimitedPolygonGraph = statefulProps => {
     });
   }), showSides && lines.map((_ref, i) => {
     let [start, end] = _ref;
+    // Use x and y to find the position of the label
     const [x, y] = mafs.vec.midpoint(start, end);
-    const length = parseFloat(mafs.vec.dist(start, end).toFixed(snapTo === "sides" ? 0 : 1));
+    const length = mafs.vec.dist(start, end);
+    // Check if the length needs to indicate
+    // that it's an approximation.
+    const isApprox = !Number.isInteger(length);
     return /*#__PURE__*/React__namespace.createElement(TextLabel, {
       key: "side-" + i,
       x: x,
       y: y
-    }, !Number.isInteger(length) && "≈ ", length);
+    }, isApprox ? `≈ ${length.toFixed(snapTo === "sides" ? 0 : 1)}` : length);
   }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
     points: [...points],
     color: "transparent",
@@ -32968,27 +32691,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__namespace.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__namespace.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), /*#__PURE__*/React__namespace.createElement("g", {
+      id: side1Id
+    }, getPolygonSideString(side1Length, point1Index, strings, locale)), /*#__PURE__*/React__namespace.createElement("g", {
+      id: side2Id
+    }, getPolygonSideString(side2Length, point2Index, strings, locale)));
+  }), /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 const UnlimitedPolygonGraph = statefulProps => {
   const {
@@ -33003,6 +32779,19 @@ const UnlimitedPolygonGraph = statefulProps => {
     coords,
     closedPolygon
   } = statefulProps.graphState;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
+  const id = React__namespace.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__namespace.useState(pointsOffArray);
 
   // If the polygon is closed, return a LimitedPolygon component.
   if (closedPolygon) {
@@ -33017,7 +32806,22 @@ const UnlimitedPolygonGraph = statefulProps => {
   } = graphConfig;
   const widthPx = graphDimensionsInPixels[0];
   const heightPx = graphDimensionsInPixels[1];
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
+
+  // Aria label srings
+  const emptyGraph = coords.length === 0;
+  const {
+    srPolygonGraph,
+    srPolygonGraphPointsNum,
+    srPolygonGraphPoints
+  } = describePolygonGraph(statefulProps.graphState, {
+    strings,
+    locale
+  }, statefulProps.graphConfig.markings);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": emptyGraph ? strings.srUnlimitedPolygonEmpty : srPolygonGraph,
+    "aria-describedby": `${polygonPointsNumId} ${polygonPointsId}`
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Polyline, {
     points: [...points],
     color: "var(--movable-line-stroke-color)",
     svgPolylineProps: {
@@ -33042,28 +32846,71 @@ const UnlimitedPolygonGraph = statefulProps => {
       const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
       dispatch(actions.polygon.addPoint(graphCoordinates[0]));
     }
-  }), coords.map((point, i) => /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+      key: "point-" + i
+    }, /*#__PURE__*/React__namespace.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__namespace.createElement("g", {
+      id: angleId
+    }, Number.isInteger(angleDegree) ? strings.srPolygonPointAngle({
+      angle: angleDegree
+    }) : strings.srPolygonPointAngleApprox({
+      angle: srFormatNumber(angleDegree, locale, 1)
+    })), sidesArray.map((_ref2, j) => {
+      let {
+        pointIndex,
+        sideLength
+      } = _ref2;
+      return /*#__PURE__*/React__namespace.createElement("g", {
+        key: `${id}-point-${i}-side-${j}`,
+        id: `${id}-point-${i}-side-${j}`
+      }, getPolygonSideString(sideLength, pointIndex, strings, locale));
+    }));
+  }), coords.length > 0 && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsNumId,
+    style: a11y.srOnly
+  }, srPolygonGraphPointsNum), srPolygonGraphPoints && /*#__PURE__*/React__namespace.createElement("g", {
+    id: polygonPointsId,
+    style: a11y.srOnly
+  }, srPolygonGraphPoints));
 };
 function getLines(points) {
   return points.map((point, i) => {
@@ -33082,6 +32929,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 {
@@ -33788,7 +33683,8 @@ const MafsGraph = props => {
   } = renderGraphElements({
     state,
     dispatch,
-    i18n
+    i18n,
+    markings: props.markings
   });
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
@@ -33823,7 +33719,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 => {
@@ -33849,7 +33745,19 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null)), /*#__PURE__*/React__namespace.createElement(mafs.Mafs, {
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null)), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(mafs.Mafs, {
     preserveAspectRatio: false,
     viewBox: {
       x: state.range[X],
@@ -33869,10 +33777,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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
+  (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisTicks, null), /*#__PURE__*/React__namespace.createElement(AxisArrows, null)), props.lockedFigures && props.lockedFigures.length > 0 && /*#__PURE__*/React__namespace.createElement("svg", nestedSVGAttributes, /*#__PURE__*/React__namespace.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures,
     range: state.range
-  }))), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
+  })))), props.lockedFigures && /*#__PURE__*/React__namespace.createElement(GraphLockedLabelsLayer, {
     lockedFigures: props.lockedFigures
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -34166,7 +34074,8 @@ const renderGraphElements = props => {
   const {
     state,
     dispatch,
-    i18n
+    i18n,
+    markings
   } = props;
   const {
     type
@@ -34183,7 +34092,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":
@@ -35168,7 +35077,7 @@ const getChange = (coords, delta, constraintOpts) => {
   return [dx, dy];
 };
 // Less than or approximately equal
-function leq$1(a, b) {
+function leq(a, b) {
   return a < b || perseusCore.approximateEqual(a, b);
 }
 function boundAndSnapToGrid(point, _ref) {
@@ -35339,7 +35248,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
 
   // Avoid degenerate triangles
   if (innerAngles.some(function (angle) {
-    return leq$1(angle, 1);
+    return leq(angle, 1);
   })) {
     return startingPoint;
   }
@@ -35401,7 +35310,7 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
   });
 
   // Avoid degenerate triangles
-  if (leq$1(sides[1] + sides[2], sides[0]) || leq$1(sides[0] + sides[2], sides[1]) || leq$1(sides[0] + sides[1], sides[2])) {
+  if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
     return startingPoint;
   }
 
@@ -35568,24 +35477,10 @@ const {
   sign,
   vector
 } = kmath.geometry;
-const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
 const defaultBackgroundImage = {
   url: null
 };
 const UNLIMITED = "unlimited";
-
-// Sample background image:
-// https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
-
-// default to defaultValue if actual is null or undefined
-function defaultVal(actual, defaultValue) {
-  return actual == null ? defaultValue : actual;
-}
-
-// Less than or approximately equal
-function leq(a, b) {
-  return a < b || perseusCore.approximateEqual(a, b);
-}
 function capitalize(str) {
   return str.replace(/(?:^|-)(.)/g, function (match, letter) {
     return letter.toUpperCase();
@@ -35594,14 +35489,6 @@ function capitalize(str) {
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
-const _getShouldShowInstructions = props => {
-  return _isClickToAddPoints(props) && (
-  // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-  props.graph.coords == null || props.graph.coords.length === 0);
-};
-const _isClickToAddPoints = props => {
-  return props.graph.type === "point" && props.graph.numPoints === UNLIMITED || props.graph.type === "polygon" && props.graph.numSides === UNLIMITED;
-};
 const makeInvalidTypeError = (functionName, graphType) => {
   return new perseusCore.PerseusError(`${functionName} called but current graph type is not a '${graphType}'`, perseusCore.Errors.NotAllowed, {
     metadata: {
@@ -35642,1200 +35529,6 @@ function getQuadraticCoefficients(coords) {
   const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
   return [a, b, c];
 }
-
-// (LEMS-2190): Move the Mafs Angle Graph coordinate reversal logic in interactive-graph-state.ts
-// to this file when we remove the legacy graph. This logic allows us to support bi-directional angles
-// for the new (non-reflexive) Mafs graphs, while maintaining the same scoring behaviour as the legacy graph.
-// Once the legacy graph is removed, we should move this logic directly into the validate function below.
-class LegacyInteractiveGraph extends React__namespace.Component {
-  static contextType = PerseusI18nContext;
-  angle;
-  circle;
-  graphie;
-  horizHairline;
-  line;
-  lines;
-  parabola;
-  pointA;
-  pointB;
-  pointC;
-  // @ts-expect-error - TS2564 - Property 'points' has no initializer and is not definitely assigned in the constructor.
-  points;
-  polygon;
-  // @ts-expect-error - TS2564 - Property 'shouldResetGraphie' has no initializer and is not definitely assigned in the constructor.
-  shouldResetGraphie;
-  sinusoid;
-  trashCan;
-  vertHairline;
-  static defaultProps = {
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    backgroundImage: defaultBackgroundImage,
-    markings: "graph",
-    showTooltips: false,
-    showProtractor: false,
-    graph: {
-      type: "linear"
-    }
-  };
-  state = {
-    shouldShowInstructions: _getShouldShowInstructions(this.props)
-  };
-  componentDidMount() {
-    if (this.refs.graph) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      this.setGraphie(this.refs.graph.graphie());
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.isClickToAddPoints() !== this.isClickToAddPoints(nextProps)) {
-      this.shouldResetGraphie = true;
-      this.setState({
-        shouldShowInstructions: _getShouldShowInstructions(nextProps)
-      });
-    }
-    if (this.props.backgroundImage?.url !== nextProps.backgroundImage?.url || this.props.backgroundImage !== nextProps.backgroundImage || this.props.containerSizeClass !== nextProps.containerSizeClass) {
-      this.shouldResetGraphie = true;
-    }
-  }
-  componentDidUpdate(prevProps, prevState) {
-    // TODO(jeremy): This feels underspecified. For example, if the props
-    // change the coords of a segment graph, but not the numSegments, we'd
-    // not count that as an update.
-    const oldType = prevProps.graph.type;
-    const newType = this.props.graph.type;
-    if (oldType !== newType || prevProps.graph.type === "angle" && this.props.graph.type === "angle" && this.areAngleGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "point" && this.props.graph.type === "point" && this.arePointGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "polygon" && this.props.graph.type === "polygon" && this.arePolygonGraphsEqual(prevProps.graph, this.props.graph) || prevProps.graph.type === "segment" && this.props.graph.type === "segment" && this.areSegmentGraphsEqual(prevProps.graph, this.props.graph)) {
-      this["remove" + capitalize(oldType) + "Controls"]();
-      this["add" + capitalize(newType) + "Controls"]();
-    }
-    if (this.shouldResetGraphie) {
-      this.resetGraphie();
-    }
-  }
-  _getShouldShowInstructions = props => {
-    props = props || this.props;
-    return this.isClickToAddPoints(props) && (
-    // @ts-expect-error - TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'. | TS2339 - Property 'coords' does not exist on type 'PerseusGraphType'.
-    props.graph.coords == null || props.graph.coords.length === 0);
-  };
-  setGraphie = newGraphie => {
-    this.graphie = newGraphie;
-    this.setupGraphie();
-  };
-  handleAddPointsMouseDown = coord => {
-    // This function should only be called when this.isClickToAddPoints()
-    // is true
-    if (!this.isClickToAddPoints()) {
-      throw new perseusCore.PerseusError("handleAddPointsClick should not be registered" + "when isClickToAddPoints() is false", perseusCore.Errors.NotAllowed);
-    }
-    if (!this.isCoordInTrash(coord)) {
-      let point;
-      if (this.props.graph.type === "point") {
-        point = this.createPointForPointsType(coord, this.points.length);
-        if (!point.constrain()) {
-          point.remove();
-          return;
-        }
-        this.points.push(point);
-
-        // interactive2 allows us to grab the point
-        const idx = this.points.length - 1;
-        this.points[idx].grab(coord);
-        this.updateCoordsFromPoints();
-      } else if (this.props.graph.type === "polygon") {
-        if (this.polygon?.closed()) {
-          return;
-        }
-        point = this.createPointForPolygonType(coord, this.points.length);
-        this.points.push(point);
-        const idx = this.points.length - 1;
-        this.points[idx].grab(coord);
-
-        // We don't call updateCoordsFromPoints for
-        // polygons, since the polygon won't be
-        // closed yet.
-        this.updatePolygon();
-      }
-      this.setState({
-        shouldShowInstructions: false
-      });
-    }
-  };
-  resetGraphie = () => {
-    this.shouldResetGraphie = false;
-    this.parabola = null;
-    this.sinusoid = null;
-    // eslint-disable-next-line react/no-string-refs
-    // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-    this.refs.graph?.reset();
-  };
-  setupGraphie = () => {
-    this.setTrashCanVisibility(0);
-    if (this.isClickToAddPoints()) {
-      this.setTrashCanVisibility(0.5);
-    }
-    if (this.props.apiOptions.isMobile) {
-      this.horizHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-        normalStyle: {
-          strokeWidth: 1
-        }
-      });
-      this.horizHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.horizHairline?.hide();
-      this.vertHairline = new WrappedLine(this.graphie, [0, 0], [0, 0], {
-        normalStyle: {
-          strokeWidth: 1
-        }
-      });
-      this.vertHairline.attr({
-        stroke: KhanColors.INTERACTIVE
-      });
-      this.vertHairline?.hide();
-    }
-    const type = this.props.graph.type;
-    this["add" + capitalize(type) + "Controls"]();
-  };
-  showHairlines = point => {
-    if (this.props.apiOptions.isMobile && this.props.markings !== "none") {
-      // Hairlines are already initialized when the graph is loaded, so
-      // here we just move them to the updated location and make them
-      // visible.
-      this.horizHairline?.moveTo([this.props.range[0][0], point[1]], [this.props.range[0][1], point[1]]);
-      this.horizHairline?.show();
-      this.vertHairline?.moveTo([point[0], this.props.range[1][0]], [point[0], this.props.range[1][1]]);
-      this.vertHairline?.show();
-    }
-  };
-  hideHairlines = () => {
-    if (this.props.apiOptions.isMobile) {
-      this.horizHairline?.hide();
-      this.vertHairline?.hide();
-    }
-  };
-  setTrashCanVisibility = opacity => {
-    const graphie = this.graphie;
-    if (kmath.number.equal(opacity, 0)) {
-      if (this.trashCan) {
-        this.trashCan.remove();
-        this.trashCan = null;
-      }
-    } else if (!this.props.apiOptions.isMobile) {
-      // Only if trash tooltips are not being used, we initialize the old
-      // trash can area.
-      if (!this.trashCan) {
-        this.trashCan = graphie?.raphael?.image(TRASH_ICON_URI, graphie.xpixels - 40, graphie.ypixels - 40, 40, 40);
-      }
-      this.trashCan?.attr({
-        opacity: opacity
-      });
-    }
-  };
-  isClickToAddPoints = props => {
-    props = props || this.props;
-    return _isClickToAddPoints(props);
-  };
-  areAngleGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.allowReflexAngles !== currentGraph.allowReflexAngles || prevGraph.angleOffsetDeg !== currentGraph.angleOffsetDeg || prevGraph.snapDegrees !== currentGraph.snapDegrees;
-  }
-  arePointGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numPoints !== currentGraph.numPoints;
-  }
-  arePolygonGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSides !== currentGraph.numSides || prevGraph.showAngles !== currentGraph.showAngles || prevGraph.showSides !== currentGraph.showSides || prevGraph.snapTo !== currentGraph.snapTo;
-  }
-  areSegmentGraphsEqual(prevGraph, currentGraph) {
-    return prevGraph.numSegments !== currentGraph.numSegments;
-  }
-  _lineStroke = () => {
-    // This should probably use: this.props.apiOptions.isMobile
-    // @ts-expect-error - TS2339 - Property 'isMobile' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-    return this.props.isMobile ? {
-      "stroke-width": 3
-    } : {};
-  };
-  addLine = type => {
-    const self = this;
-    const graphie = self.graphie;
-    const coords = InteractiveGraph.getLineCoords(self.props.graph, self.props);
-    const points = self.points = ___default["default"].map(coords, coord => {
-      return Interactive2.addMaybeMobileMovablePoint(this, {
-        coord: coord,
-        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap()],
-        onMove: () => {
-          const graph = ___default["default"].extend({}, self.props.graph, {
-            coords: ___default["default"].invoke(points, "coord")
-          });
-          self.onChange({
-            graph: graph
-          });
-        }
-      });
-    });
-    const lineConfig = {
-      points: points,
-      static: true,
-      normalStyle: {
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-        ...this._lineStroke()
-      }
-    };
-    if (type === "line") {
-      // @ts-expect-error - TS2339 - Property 'extendLine' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-      lineConfig.extendLine = true;
-    } else if (type === "ray") {
-      // @ts-expect-error - TS2339 - Property 'extendRay' does not exist on type '{ readonly points: any[]; readonly static: true; readonly normalStyle: { readonly "stroke-width"?: number | undefined; readonly stroke: "#71B307" | "#63D9EA"; }; }'.
-      lineConfig.extendRay = true;
-    }
-    self.line = Interactive2.addMovableLine(graphie, lineConfig);
-
-    // A and B can't be in the same place
-    points[0].listen("constraints", "isLine", coord => {
-      return !kmath.point.equal(coord, points[1].coord());
-    });
-    points[1].listen("constraints", "isLine", coord => {
-      return !kmath.point.equal(coord, points[0].coord());
-    });
-  };
-  removeLine = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.line?.remove();
-  };
-  addNoneControls = () => {};
-  removeNoneControls = () => {};
-  addLinearControls = () => {
-    this.addLine("line");
-  };
-  removeLinearControls = () => {
-    this.removeLine();
-  };
-  addQuadraticControls = () => {
-    if (this.props.graph.type !== "quadratic") {
-      throw makeInvalidTypeError("addQuadraticControls", "quadratic");
-    }
-    let coords = this.props.graph.coords;
-    if (!coords) {
-      coords = InteractiveGraph.defaultQuadraticCoords(this.props);
-    }
-    const onMoveHandler = () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'. | TS2531 - Object is possibly 'null'.
-        coords: [pointA.coord(), pointB.coord(), pointC.coord()]
-      });
-      this.onChange({
-        graph
-      });
-      this.updateQuadratic();
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointA = null;
-    pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[0],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointA ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointB.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointC.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointB = null;
-    pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[1],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointB ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointA.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointC.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointC = null;
-    pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[2],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointC ||
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointA.coord()[0] &&
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coord[0] !== pointB.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    this.updateQuadratic();
-  };
-  updateQuadratic = () => {
-    const coeffs = InteractiveGraph.getCurrentQuadraticCoefficients(this.props);
-    if (!coeffs) {
-      return;
-    }
-
-    // Extract coefficients the parabola
-    const a = coeffs[0];
-    const b = coeffs[1];
-    const c = coeffs[2];
-
-    // Plot and style
-    if (this.parabola) {
-      const path = this.graphie?.svgParabolaPath(a, b, c);
-      this.parabola?.attr({
-        path: path
-      });
-    } else {
-      this.parabola = this.graphie?.parabola(a, b, c);
-      this.parabola?.attr({
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
-        ...this._lineStroke()
-      });
-      this.parabola?.toBack();
-    }
-  };
-  removeQuadraticControls = () => {
-    this.pointA?.remove();
-    this.pointB?.remove();
-    this.pointC?.remove();
-    if (this.parabola) {
-      this.parabola.remove();
-      this.parabola = null;
-    }
-  };
-  addSinusoidControls = () => {
-    if (this.props.graph.type !== "sinusoid") {
-      throw makeInvalidTypeError("addSinusoidControls", "sinusoid");
-    }
-    let coords = this.props.graph.coords;
-    if (!coords) {
-      coords = InteractiveGraph.defaultSinusoidCoords(this.props);
-    }
-    const onMoveHandler = () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        coords: [pointA.coord(), pointB.coord()]
-      });
-      this.onChange({
-        graph: graph
-      });
-      this.updateSinusoid();
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let pointA = null;
-    pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[0],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        return !pointA || coord[0] !== pointB.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    const pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coords[1],
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-        // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
-        return !pointA || coord[0] !== pointA.coord()[0];
-      }],
-      onMove: onMoveHandler
-    });
-    this.updateSinusoid();
-  };
-  updateSinusoid = () => {
-    const coeffs = InteractiveGraph.getCurrentSinusoidCoefficients(this.props);
-    if (!coeffs) {
-      return;
-    }
-    const a = coeffs[0];
-    const b = coeffs[1];
-    const c = coeffs[2];
-    const d = coeffs[3];
-
-    // Plot and style
-    if (this.sinusoid) {
-      const path = this.graphie?.svgSinusoidPath(a, b, c, d);
-      this.sinusoid?.attr({
-        path: path
-      });
-    } else {
-      this.sinusoid = this.graphie?.sinusoid(a, b, c, d);
-      this.sinusoid?.attr({
-        stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.DYNAMIC,
-        ...this._lineStroke()
-      });
-      this.sinusoid?.toBack();
-    }
-  };
-  removeSinusoidControls = () => {
-    this.pointA?.remove();
-    this.pointB?.remove();
-    if (this.sinusoid) {
-      this.sinusoid.remove();
-      this.sinusoid = null;
-    }
-  };
-  addCircleControls = () => {
-    const graphie = this.graphie;
-    const minSnap = ___default["default"].min(graphie.snap);
-    const circle = this.circle = graphie?.addCircleGraph({
-      // @ts-expect-error - TS2339 - Property 'center' does not exist on type 'PerseusGraphType'.
-      center: this.props.graph.center || [0, 0],
-      // @ts-expect-error - TS2339 - Property 'radius' does not exist on type 'PerseusGraphType'.
-      radius: this.props.graph.radius || ___default["default"].min(this.props.step),
-      snapX: graphie.snap[0],
-      snapY: graphie.snap[1],
-      minRadius: minSnap,
-      snapRadius: minSnap
-    });
-    $__default["default"](circle).on("move", () => {
-      const graph = ___default["default"].extend({}, this.props.graph, {
-        center: circle.center,
-        radius: circle.radius
-      });
-      this.onChange({
-        graph: graph
-      });
-    });
-  };
-  removeCircleControls = () => {
-    this.circle?.remove();
-  };
-  addLinearSystemControls = () => {
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getLinearSystemCoords(this.props.graph, this.props);
-    const segmentColors = [KhanColors.INTERACTIVE, KhanColors.GREEN];
-    const points = this.points = ___default["default"].map(coords, (segmentCoords, segmentIndex) => {
-      // NOTE(jeresig): This code attempts to access the variable
-      // while it's still being defined, it should be refactored!
-      // The callbacks appear to be executed synchronously, which
-      // causes this issue.
-      const segmentPoints = [];
-      for (let i = 0; i < segmentCoords.length; i += 1) {
-        const coord = segmentCoords[i];
-        segmentPoints.push(Interactive2.addMaybeMobileMovablePoint(this, {
-          coord: coord,
-          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-            const otherSegment = segmentPoints[1 - i];
-            if (!otherSegment) {
-              // segment hasn't been defined yet
-              // because we're still creating them
-              return;
-            }
-            return !kmath.point.equal(coord, otherSegment.coord());
-          }],
-          onMove: () => {
-            const graph = ___default["default"].extend({}, this.props.graph, {
-              coords: ___default["default"].map(this.points, segment => ___default["default"].invoke(segment, "coord"))
-            });
-            this.onChange({
-              graph: graph
-            });
-          },
-          normalStyle: {
-            fill: segmentColors[segmentIndex]
-          },
-          highlightStyle: {
-            fill: segmentColors[segmentIndex]
-          }
-        }));
-      }
-      return segmentPoints;
-    });
-    this.lines = ___default["default"].map(points, (segmentPoints, segmentIndex) => {
-      return Interactive2.addMovableLine(graphie, {
-        points: segmentPoints,
-        static: true,
-        extendLine: true,
-        normalStyle: {
-          stroke: segmentColors[segmentIndex]
-        }
-      });
-    });
-  };
-  removeLinearSystemControls = () => {
-    // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-    ___default["default"].invoke(this.lines, "remove");
-    ___default["default"].map(this.points, segment => ___default["default"].invoke(segment, "remove"));
-  };
-  isCoordInTrash = coord => {
-    if (this.props.apiOptions.isMobile) {
-      return false;
-    }
-    const graphie = this.graphie;
-    const screenPoint = graphie?.scalePoint(coord);
-    return screenPoint[0] >= graphie.xpixels - 40 && screenPoint[1] >= graphie.ypixels - 40;
-  };
-  createPointForPointsType = (coord, i) => {
-    const self = this;
-    const remove = () => {
-      self.points = ___default["default"].filter(self.points, function (pt) {
-        return pt !== point;
-      });
-      // update the correct answer box
-      self.updateCoordsFromPoints();
-
-      // remove this movablePoint from graphie.
-      // we wait to do this until we're not inside of
-      // said point's onMoveEnd method so its state is
-      // consistent throughout this method call
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // @ts-expect-error - TS2531 - Object is possibly 'null'.
-      setTimeout(point.remove.bind(point), 0); // eslint-disable-line no-restricted-syntax
-    };
-
-    // NOTE(jeresig): This code attempts to access the variable while it's
-    // still being defined, it should be refactored! The callbacks appear
-    // to be executed synchronously, which causes this issue.
-    let point = null;
-    point = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coord,
-      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), function (coord) {
-        // TODO(jack): There ought to be a
-        // MovablePoint.constraints.avoid
-        // default that lets you do things like this
-        return ___default["default"].all(self.points, function (pt) {
-          return point === pt || !kmath.point.equal(coord, pt.coord());
-        });
-      }],
-      onMoveStart: function () {
-        if (self.isClickToAddPoints()) {
-          self.setTrashCanVisibility(1);
-        }
-      },
-      onMove: self.updateCoordsFromPoints,
-      onMoveEnd: function (coord) {
-        if (self.isClickToAddPoints()) {
-          if (self.isCoordInTrash(coord)) {
-            remove();
-          }
-          // In case we mouseup'd off the graphie and that
-          // stopped the move (in which case, we might not
-          // be in isCoordInTrash()
-          self.setTrashCanVisibility(0.5);
-        }
-      },
-      ...(this.props.apiOptions.isMobile && self.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {})
-    });
-    return point;
-  };
-  removePoint = point => {
-    let index = null;
-    this.points = ___default["default"].filter(this.points, function (pt, i) {
-      if (pt === point) {
-        // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'null'.
-        index = i;
-        return false;
-      }
-      return true;
-    });
-    return index;
-  };
-  createPointForPolygonType = (coord, i) => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("createPointForPolygonType", "polygon");
-    }
-
-    // TODO(alex): check against "grid" instead, use constants
-    const snapToGrid = !___default["default"].contains(["angles", "sides"], this.props.graph.snapTo);
-
-    // Index relative to current point -> absolute index
-    // NOTE: This does not work when isClickToAddPoints() == true,
-    // as `i` can be changed by dragging a point to the trash
-    // Currently this function is only called when !isClickToAddPoints()
-    const rel = j => {
-      return (i + j + this.points.length) % this.points.length;
-    };
-    const remove = () => {
-      // remove this point from points
-      const index = this.removePoint(point);
-      if (this.polygon?.closed()) {
-        // We should be checking if this.points is defined before rotating them.
-        // @ts-expect-error - TS4104 - The type 'readonly any[]' is 'readonly' and cannot be assigned to the mutable type 'any[]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | undefined'.
-        this.points = rotate(this.points, index);
-        this.polygon?.update({
-          closed: false
-        });
-      }
-      this.updatePolygon();
-      // the polygon is now unclosed, so we need to
-      // remove any points props
-      this.clearCoords();
-
-      // remove this movablePoint from graphie.
-      // wait to do this until we're not inside of
-      // said point's onMoveEnd method so state is
-      // consistent throughout the method call
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-      // eslint-disable-next-line no-restricted-syntax
-      setTimeout(point.remove.bind(point), 0);
-    };
-    const setInitialMove = debounce__default["default"]((point, bool) => {
-      point.state.isInitialMove = bool;
-    }, 1000);
-    const onMoveEndHandler = coord => {
-      // If the user clicked and dragged a point over endpoint,
-      // join the them
-      const overlappedPoints = this.points.length > 1 && (point === this.points[0] && kmath.point.equal(coord, ___default["default"].last(this.points).coord()) || point === ___default["default"].last(this.points) && kmath.point.equal(coord, this.points[0].coord()));
-      if (this.isClickToAddPoints()) {
-        if (this.isCoordInTrash(coord)) {
-          remove();
-        } else if (overlappedPoints) {
-          const pointToRemove = this.points.pop();
-          if (this.points.length > 2) {
-            this.polygon?.update({
-              closed: true
-            });
-            this.updateCoordsFromPoints();
-          } else {
-            this.polygon?.update({
-              closed: false
-            });
-            this.clearCoords();
-          }
-          this.updatePolygon();
-          // remove this movablePoint from graphie.
-          // wait to do this until we're not inside of
-          // said point's onMoveEnd method so state is
-          // consistent throughout the method call
-          // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-          // eslint-disable-next-line no-restricted-syntax
-          setTimeout(pointToRemove.remove.bind(pointToRemove), 0);
-        } else {
-          // If the user clicked and dragged a point over any other
-          // existing point, fix shape
-          const shouldRemove = ___default["default"].any(this.points, function (pt) {
-            return pt !== point && kmath.point.equal(pt.coord(), coord);
-          });
-          if (shouldRemove) {
-            this.removePoint(point);
-            if (this.points.length < 3) {
-              this.polygon?.update({
-                closed: false
-              });
-              this.clearCoords();
-            } else if (this.polygon?.closed()) {
-              this.updateCoordsFromPoints();
-            }
-            this.updatePolygon();
-            // remove this movablePoint from graphie.
-            // wait to do this until we're not inside
-            // said point's onMoveEnd method so state
-            // is consistent throughout the method call
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(point.remove.bind(point), 0);
-          } else {
-            // If this was
-            //  * a click on the first or last point
-            //  * and not a deletion
-            //  * and not a drag,
-            //  * and not a creation of a new point
-            //    (see !point.state.isInitialMove, below),
-            //  * and our polygon is not closed,
-            //  * and we can close it (we need at least the same
-            //    number of points as coordinates asked for in the
-            //    question),
-            // then close it
-            const isFirstOrLastPoint = point === ___default["default"].head(this.points) || point === ___default["default"].last(this.points);
-            const pointNotMoved = !point.hasMoved();
-            // NOTE (jsatk): Currently different on mobile versus
-            // destkop
-            const notANewPoint = !point.state.isInitialMove;
-            const polygonNotClosed = !this.polygon?.closed();
-            const allPointsPlotted = this.points.length > 2;
-            const canCloseUnclosedPolygon = isFirstOrLastPoint && pointNotMoved && notANewPoint && polygonNotClosed && allPointsPlotted;
-            if (canCloseUnclosedPolygon) {
-              this.polygon?.update({
-                closed: true
-              });
-              this.updatePolygon();
-
-              // We finally have a closed polygon, so save our
-              // points to props
-              this.updateCoordsFromPoints();
-            }
-          }
-        }
-
-        // In case we mouseup'd off the graphie and that
-        // stopped the move
-        this.setTrashCanVisibility(0.5);
-      }
-      setInitialMove(point, false);
-    };
-    const graphConstraint = coord => {
-      // These constraints are all relative to the other points, so if
-      // we're creating the initial points and haven't added any others
-      // to the graph, we can't enforce them.
-      if (this.points == null || this.points.length === 0) {
-        return true;
-      }
-      const coords = ___default["default"].invoke(this.points, "coord");
-      coords[i] = coord;
-
-      // Check for invalid positioning, but only if we aren't adding
-      // points one click at a time, since those added points could
-      // have already violated these constraints
-      if (!this.isClickToAddPoints()) {
-        // Polygons can't have consecutive collinear points
-        if (collinear(coords[rel(-2)], coords[rel(-1)], coords[i]) || collinear(coords[rel(-1)], coords[i], coords[rel(1)]) || collinear(coords[i], coords[rel(1)], coords[rel(2)])) {
-          return false;
-        }
-        const segments = ___default["default"].zip(coords, rotate(coords));
-        if (this.points.length > 3) {
-          // Constrain to simple (non self-intersecting) polygon by
-          // testing whether adjacent segments intersect any others
-          for (let j = -1; j <= 0; j++) {
-            const segment = segments[rel(j)];
-            const others = ___default["default"].without(segments, segment, segments[rel(j - 1)], segments[rel(j + 1)]);
-            for (let k = 0; k < others.length; k++) {
-              const other = others[k];
-              // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Line'.
-              if (intersects(segment, other)) {
-                return false;
-              }
-            }
-          }
-        }
-      }
-      if (
-      // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-      this.props.graph.snapTo === "angles" && this.points.length > 2) {
-        // Snap to whole degree interior angles
-
-        const angles = ___default["default"].map(angleMeasures(coords), function (rad) {
-          return rad * 180 / Math.PI;
-        });
-        ___default["default"].each([-1, 1], function (j) {
-          angles[rel(j)] = Math.round(angles[rel(j)]);
-        });
-        const getAngle = function (a, vertex, b) {
-          const angle = GraphUtils.findAngleDeprecated(coords[rel(a)], coords[rel(b)], coords[rel(vertex)]);
-          return (angle + 360) % 360;
-        };
-        const innerAngles = [angles[rel(-1)] - getAngle(-2, -1, 1), angles[rel(1)] - getAngle(-1, 1, 2)];
-        innerAngles[2] = 180 - (innerAngles[0] + innerAngles[1]);
-
-        // Avoid degenerate triangles
-        if (___default["default"].any(innerAngles, function (angle) {
-          return leq(angle, 1);
-        })) {
-          return false;
-        }
-        const knownSide = magnitude(
-        // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'.
-        vector(coords[rel(-1)], coords[rel(1)]));
-        const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-
-        // Solve for side by using the law of sines
-        const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
-        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-        const offset = polar$2(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
-        return this.graphie?.addPoints(coords[rel(-1)], offset);
-      }
-      // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
-      if (this.props.graph.snapTo === "sides" && this.points.length > 1) {
-        // Snap to whole unit side measures
-
-        const sides = ___default["default"].map([[coords[rel(-1)], coords[i]], [coords[i], coords[rel(1)]], [coords[rel(-1)], coords[rel(1)]]], function (coords) {
-          // @ts-expect-error - TS2345 - Argument of type 'number[]' is not assignable to parameter of type 'readonly Coord[]'. | TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
-          return magnitude(vector(...coords));
-        });
-        ___default["default"].each([0, 1], function (j) {
-          sides[j] = Math.round(sides[j]);
-        });
-
-        // Avoid degenerate triangles
-        if (leq(sides[1] + sides[2], sides[0]) || leq(sides[0] + sides[2], sides[1]) || leq(sides[0] + sides[1], sides[2])) {
-          return false;
-        }
-
-        // Solve for angle by using the law of cosines
-        const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
-        const outerAngle = GraphUtils.findAngleDeprecated(coords[rel(1)], coords[rel(-1)]);
-        const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-        const offset = polar$2(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
-        return this.graphie?.addPoints(coords[rel(-1)], offset);
-      }
-      // Snap to grid (already done)
-      return true;
-    };
-    const point = Interactive2.addMaybeMobileMovablePoint(this, {
-      coord: coord,
-      constraints: [Interactive2.MovablePoint.constraints.bound(), snapToGrid ? Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
-      onMoveStart: () => {
-        if (this.isClickToAddPoints()) {
-          this.setTrashCanVisibility(1);
-        }
-      },
-      onMove: () => {
-        if (this.polygon?.closed()) {
-          this.updateCoordsFromPoints();
-        }
-      },
-      onMoveEnd: onMoveEndHandler,
-      ...(this.props.apiOptions.isMobile && this.isClickToAddPoints() ? {
-        onRemove: remove
-      } : {})
-    });
-    point.state.isInitialMove = true;
-    return point;
-  };
-  updateCoordsFromPoints = () => {
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      // Handle old movable points with .coord, or
-      // Interactive2.MovablePoint's with .coord()
-      coords: ___default["default"].map(this.points, function (point) {
-        return ___default["default"].result(point, "coord");
-      })
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  clearCoords = () => {
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      coords: null
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  onChange = data => {
-    this.props.onChange(data);
-    this.props.trackInteraction();
-  };
-  addPointControls = () => {
-    if (this.props.graph.type !== "point") {
-      throw makeInvalidTypeError("addPointControls", "point");
-    }
-    const coords = InteractiveGraph.getPointCoords(this.props.graph, this.props);
-    // Clear out our old points so that newly added points don't
-    // "collide" with them and reposition when being added
-    // Without this, when added, each point checks whether it is on top
-    // of a point in this.points, which (a) shouldn't matter since
-    // we're clearing out this.points anyways, and (b) can cause problems
-    // if each of this.points is a MovablePoint instead of an
-    // Interactive2.MovablePoint, since one has a .coord and the other
-    // has .coord()
-    // TODO(jack): Figure out a better way to do this
-    this.points = [];
-    this.points = ___default["default"].map(coords, this.createPointForPointsType, this);
-  };
-  removePointControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-  };
-  addSegmentControls = () => {
-    if (this.props.graph.type !== "segment") {
-      throw makeInvalidTypeError("addSegmentControls", "segment");
-    }
-    const self = this;
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getSegmentCoords(this.props.graph, this.props);
-    const createPoint = options => Interactive2.addMaybeMobileMovablePoint(this, options);
-    this.points = [];
-    this.lines = ___default["default"].map(coords, function (segment, i) {
-      const updateCoordProps = function () {
-        const graph = ___default["default"].extend({}, self.props.graph, {
-          // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-          coords: ___default["default"].invoke(self.lines, "coords")
-        });
-        self.onChange({
-          graph: graph
-        });
-      };
-
-      // NOTE(jeresig): This code attempts to access the variable
-      // while it's still being defined, it should be refactored!
-      // The callbacks appear to be executed synchronously, which
-      // causes this issue.
-      const points = [];
-      for (let i = 0; i < segment.length; i += 1) {
-        const coord = segment[i];
-        points.push(createPoint({
-          coord: coord,
-          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
-            const otherPoint = points[1 - i];
-            if (!otherPoint) {
-              // point hasn't been defined yet
-              // because we're still creating them
-              // We return false as the points aren't
-              // going to be in the same position at
-              // this point.
-              return false;
-            }
-            return !kmath.point.equal(coord, otherPoint.coord());
-          }],
-          onMove: updateCoordProps
-        }));
-      }
-      self.points = self.points.concat(points);
-      const line = Interactive2.addMovableLine(graphie, {
-        points: points,
-        static: false,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.constraints.snap()],
-        onMove: [
-        // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovableLine.onMove.updatePoints, updateCoordProps],
-        normalStyle: {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ...this._lineStroke()
-        },
-        highlightStyle: {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTING,
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ...this._lineStroke()
-        }
-      });
-      ___default["default"].invoke(points, "toFront");
-      return line;
-    }, this);
-  };
-  removeSegmentControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    // @ts-expect-error - TS2345 - Argument of type 'readonly (readonly Coord[])[] | null | undefined' is not assignable to parameter of type 'Collection<any>'.
-    ___default["default"].invoke(this.lines, "remove");
-  };
-  addRayControls = () => {
-    this.addLine("ray");
-  };
-  removeRayControls = () => {
-    this.removeLine();
-  };
-  addPolygonControls = () => {
-    this.polygon = null;
-    const coords = InteractiveGraph.getPolygonCoords(this.props.graph, this.props);
-    // Clear out our old points so that newly added points don't
-    // "collide", as in `addPointControls`
-    this.points = [];
-    this.points = ___default["default"].map(coords, this.createPointForPolygonType, this);
-    this.updatePolygon();
-  };
-  updatePolygon = () => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("updatePolygon", "polygon");
-    }
-    let closed;
-    if (this.polygon) {
-      closed = this.polygon.closed();
-    } else if (this.points.length >= 3) {
-      closed = true;
-    } else {
-      // There will only be fewer than 3 points in click-to-add-vertices
-      // mode, so we don't need to explicitly check for that here.
-      closed = false;
-    }
-    const graphie = this.graphie;
-    const n = this.points.length;
-
-    // TODO(alex): check against "grid" instead, use constants
-    const snapToGrid = !___default["default"].contains(["angles", "sides"], this.props.graph.snapTo);
-    const angleLabels = ___default["default"].times(n, function (i) {
-      if (
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      !this.props.graph.showAngles || !closed && (i === 0 || i === n - 1)) {
-        return "";
-      }
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.graph.snapTo === "angles") {
-        return "$deg0";
-      }
-      return "$deg1";
-    }, this);
-    const showRightAngleMarkers = ___default["default"].times(n, function (i) {
-      return closed || i !== 0 && i !== n - 1;
-    }, this);
-    const numArcs = ___default["default"].times(n, function (i) {
-      if (
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      this.props.graph.showAngles && (closed || i !== 0 && i !== n - 1)) {
-        return 1;
-      }
-      return 0;
-    }, this);
-    const sideLabels = ___default["default"].times(n, function (i) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (!this.props.graph.showSides || !closed && i === n - 1) {
-        return "";
-      }
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.graph.snapTo === "sides") {
-        return "$len0";
-      }
-      return "$len1";
-    }, this);
-    if (this.polygon == null) {
-      const self = this;
-      self.polygon = Interactive2.addMovablePolygon(graphie, {
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.constraints.bound(), snapToGrid ?
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.constraints.snap() : null],
-        closed: closed,
-        points: self.points,
-        angleLabels: angleLabels,
-        showRightAngleMarkers: showRightAngleMarkers,
-        numArcs: numArcs,
-        sideLabels: sideLabels,
-        onMove: [
-        // @ts-expect-error - TS2339 - Property 'onMove' does not exist on type '(graphie: any, movable: any, options: any) => undefined'.
-        Interactive2.MovablePolygon.onMove.updatePoints, function () {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          if (this.closed()) {
-            self.updateCoordsFromPoints();
-          }
-        }],
-        normalStyle: {
-          stroke: this.props.apiOptions.isMobile ? KhanColors.BLUE_C : KhanColors.INTERACTIVE,
-          ...this._lineStroke()
-        }
-      });
-    } else {
-      // We only need to pass in the properties that might've changed
-      this.polygon.update({
-        closed: closed,
-        points: this.points,
-        angleLabels: angleLabels,
-        showRightAngleMarkers: showRightAngleMarkers,
-        numArcs: numArcs,
-        sideLabels: sideLabels
-      });
-    }
-  };
-  removePolygonControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.polygon?.remove();
-  };
-  addAngleControls = () => {
-    if (this.props.graph.type !== "angle") {
-      throw makeInvalidTypeError("addAngleControls", "angle");
-    }
-    const graph = this.props.graph;
-    const graphie = this.graphie;
-    const coords = InteractiveGraph.getAngleCoords(this.props.graph, this.props);
-
-    // The vertex snaps to the grid, but the rays don't...
-    this.points = coords.map(function (coord, i) {
-      return graphie?.addMovablePoint(___default["default"].extend({
-        coord: coord,
-        normalStyle: {
-          stroke: KhanColors.INTERACTIVE,
-          fill: KhanColors.INTERACTIVE
-        }
-      }, i === 1 ? {
-        snapX: graphie.snap[0],
-        snapY: graphie.snap[1]
-      } : {}));
-    });
-
-    // ...they snap to whole-degree angles from the vertex.
-    this.angle = graphie?.addMovableAngle({
-      points: this.points,
-      snapDegrees: graph.snapDegrees || 1,
-      snapOffsetDeg: graph.angleOffsetDeg || 0,
-      angleLabel: graph.showAngles ? "$deg0" : "",
-      pushOut: 2,
-      allowReflex: defaultVal(graph.allowReflexAngles, true)
-    });
-    $__default["default"](this.angle).on("move", () => {
-      this.onChange({
-        graph: {
-          ...graph,
-          coords: this.angle?.getClockwiseCoords()
-        }
-      });
-    });
-  };
-  removeAngleControls = () => {
-    ___default["default"].invoke(this.points, "remove");
-    this.angle?.remove();
-  };
-  toggleShowSides = () => {
-    if (this.props.graph.type !== "polygon") {
-      throw makeInvalidTypeError("toggleShowSides", "polygon");
-    }
-    const graph = ___default["default"].extend({}, this.props.graph, {
-      showSides: !this.props.graph.showSides
-    });
-    this.onChange({
-      graph: graph
-    });
-  };
-  getUserInput() {
-    return InteractiveGraph.getUserInputFromProps(this.props);
-  }
-  focus = $__default["default"].noop;
-  render() {
-    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);
-    let instructions;
-    // isClickToAddPoints() only applies to points and polygons
-    if (this.isClickToAddPoints() && this.state.shouldShowInstructions) {
-      if (this.props.graph.type === "point") {
-        instructions = this.context.strings.addPoints;
-      } else if (this.props.graph.type === "polygon") {
-        instructions = this.context.strings.addVertices;
-      }
-    } else {
-      instructions = undefined;
-    }
-    let onMouseDown;
-    if (this.isClickToAddPoints()) {
-      onMouseDown = this.handleAddPointsMouseDown;
-    }
-    const isMobile = this.props.apiOptions.isMobile;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget " + "perseus-widget-interactive-graph",
-      style: {
-        width: box[0],
-        height: box[1]
-      }
-    }, /*#__PURE__*/React__namespace.createElement(Graph, {
-      instructions: instructions
-      // eslint-disable-next-line react/no-string-refs
-      ,
-      ref: "graph",
-      box: box,
-      labels: this.props.labels,
-      range: this.props.range,
-      step: isMobile ? Util.constrainedTickStepsFromTickSteps(this.props.step, this.props.range) : this.props.step,
-      gridStep: gridStep,
-      snapStep: snapStep,
-      markings: this.props.markings,
-      backgroundImage: this.props.backgroundImage,
-      showProtractor: this.props.showProtractor,
-      onMouseDown: onMouseDown,
-      onGraphieUpdated: this.setGraphie,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable,
-      isMobile: isMobile
-    }));
-  }
-}
 class InteractiveGraph extends React__namespace.Component {
   legacyGraphRef = /*#__PURE__*/React__namespace.createRef();
   mafsRef = /*#__PURE__*/React__namespace.createRef();
@@ -36864,25 +35557,17 @@ class InteractiveGraph extends React__namespace.Component {
     return getPromptJSON$b(this.props, this.getUserInput());
   }
   render() {
-    // Mafs shim
-    const mafsFlags = this.props.apiOptions?.flags?.["mafs"];
-    if (shouldUseMafs(mafsFlags, this.props.graph)) {
-      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__namespace.createElement(StatefulMafsGraph, _extends({}, this.props, {
-        flags: this.props.apiOptions?.flags,
-        ref: this.mafsRef,
-        gridStep: gridStep,
-        snapStep: snapStep,
-        box: box,
-        showTooltips: !!this.props.showTooltips,
-        readOnly: this.props.apiOptions?.readOnly
-      }));
-    }
-    return /*#__PURE__*/React__namespace.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__namespace.createElement(StatefulMafsGraph, _extends({}, this.props, {
+      ref: this.mafsRef,
+      gridStep: gridStep,
+      snapStep: snapStep,
+      box: box,
+      showTooltips: !!this.props.showTooltips,
+      readOnly: this.props.apiOptions?.readOnly
+    }));
   }
 
   /**
@@ -37198,28 +35883,6 @@ class InteractiveGraph extends React__namespace.Component {
   }
 }
 
-// exported for testing
-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 = ___default["default"].identity;
 var InteractiveGraph$1 = {
@@ -37227,9 +35890,7 @@ var InteractiveGraph$1 = {
   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: perseusScore.scoreInteractiveGraph
+  getPublicWidgetOptions: perseusCore.getInteractiveGraphPublicWidgetOptions
 };
 
 // TODO: can we use WB typography?
@@ -38187,9 +36848,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: perseusScore.scoreLabelImage
+  getPublicWidgetOptions: perseusCore.getLabelImagePublicWidgetOptions
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -38426,7 +37085,7 @@ class Draggable extends React__namespace.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 = aphrodite.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 = aphrodite.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";
     }
@@ -39117,10 +37776,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: perseusScore.scoreMatcher
+  isLintable: true
 };
 
 const getPromptJSON$8 = (renderProps, userInput) => {
@@ -39524,12 +38180,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: perseusScore.scoreMatrix,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusMatrixUserInput'.
-  validator: perseusScore.validateMatrix
+  getPublicWidgetOptions: perseusCore.getMatrixPublicWidgetOptions
 };
 
 const getPromptJSON$7 = () => {
@@ -39619,7 +38270,7 @@ class Measurer extends React__namespace.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__namespace.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]
@@ -39644,9 +38295,7 @@ var Measurer$1 = {
   hidden: true,
   widget: Measurer,
   version: perseusCore.measurerLogic.version,
-  propUpgrades: perseusCore.measurerLogic.widgetOptionsUpgrades,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop(1)
+  propUpgrades: perseusCore.measurerLogic.widgetOptionsUpgrades
 };
 
 /**
@@ -40534,8 +39183,7 @@ var Molecule$1 = {
   name: "molecule-renderer",
   displayName: "Molecule renderer",
   hidden: true,
-  widget: MoleculeWidget,
-  scorer: () => scoreNoop()
+  widget: MoleculeWidget
 };
 
 const getPromptJSON$6 = (renderProps, userInput) => {
@@ -41110,12 +39758,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: perseusScore.scoreNumberLine,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type 'UserInput' is not assignable to type 'PerseusNumberLineUserInput'.
-  validator: perseusScore.validateNumberLine
+  getPublicWidgetOptions: perseusCore.getNumberLinePublicWidgetOptions
 };
 
 const getPromptJSON$5 = (renderProps, userInput) => {
@@ -41133,7 +39776,7 @@ const getPromptJSON$5 = (renderProps, userInput) => {
 class PlaceholderCard extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
+      className: "card-wrap",
       style: {
         width: this.props.width
       }
@@ -41148,7 +39791,7 @@ class PlaceholderCard extends React__namespace.Component {
 class DragHintCard extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE
+      className: "card-wrap"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "card drag-hint"
     }));
@@ -41283,7 +39926,7 @@ class Card extends React__namespace.Component {
     const rendererProps = ___default["default"].pick(this.props, "content");
     const onMouseDown = this.props.animating ? $__default["default"].noop : this.onMouseDown;
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
+      className: "card-wrap",
       style: style,
       onMouseDown: onMouseDown,
       onTouchStart: onMouseDown,
@@ -41654,7 +40297,7 @@ class Orderer extends React__namespace.Component {
       });
     }, this));
     return /*#__PURE__*/React__namespace.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"
@@ -41667,12 +40310,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: perseusScore.scoreOrderer,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusOrdererUserInput
-  validator: perseusScore.validateOrderer,
   getPublicWidgetOptions: perseusCore.getOrdererPublicWidgetOptions
 };
 
@@ -41716,15 +40353,12 @@ class PassageRefTarget extends React__namespace.Component {
 var PassageRefTarget$1 = {
   name: "passage-ref-target",
   displayName: "PassageRefTarget",
-  defaultAlignment: "inline",
   widget: PassageRefTarget,
   hidden: true,
   transform: editorProps => {
     return ___default["default"].pick(editorProps, "content");
   },
-  isLintable: true,
-  // TODO: things that aren't interactive shouldn't need scoring functions
-  scorer: () => scoreNoop()
+  isLintable: true
 };
 
 const getPromptJSON$4 = () => {
@@ -42726,7 +41360,7 @@ class Plotter extends React__namespace.Component {
       marginBottom: this.props.labels[0] ? paddingForBottomLabel : 0
     };
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-plotter graphie " + ClassNames.INTERACTIVE
+      className: "perseus-widget-plotter graphie"
       // eslint-disable-next-line react/no-string-refs
       ,
       ref: "graphieDiv",
@@ -42743,12 +41377,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: perseusScore.scorePlotter,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusPlotterUserInput
-  validator: perseusScore.validatePlotter
+  getPublicWidgetOptions: perseusCore.getPlotterPublicWidgetOptions
 };
 
 const getPromptJSON$2 = () => {
@@ -42909,12 +41538,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: perseusScore.scoreSorter,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusSorterUserInput
-  validator: perseusScore.validateSorter
+  getPublicWidgetOptions: perseusCore.getSorterPublicWidgetOptions
 };
 
 const {
@@ -43131,12 +41755,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: perseusScore.scoreTable,
-  // TODO(LEMS-2656): remove TS suppression
-  // @ts-expect-error: Type UserInput is not assignable to type PerseusTableUserInput
-  validator: perseusScore.validateTable
+  getPublicWidgetOptions: perseusCore.getTablePublicWidgetOptions
 };
 
 const getPromptJSON = () => {
@@ -43298,11 +41917,7 @@ class Video extends React__namespace.Component {
 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 */
@@ -43321,7 +41936,7 @@ const init = function () {
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44197,6 +42812,42 @@ const ref = /*#__PURE__*/React__namespace.forwardRef((props, ref) => /*#__PURE__
   }));
 }));
 
+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 perseusCore.PerseusError(
+  // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
+  "Invalid score type: " + score.type, perseusCore.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`
@@ -44217,7 +42868,7 @@ const deepCallbackFor = function (contentCallback, widgetCallback, optionsCallba
     // This doesn't modify the widget info if the widget info
     // is at a later version than is supported, which is important
     // for our latestVersion test below.
-    const upgradedWidgetInfo = upgradeWidgetInfoToLatestVersion(widgetInfo);
+    const upgradedWidgetInfo = perseusCore.upgradeWidgetInfoToLatestVersion(widgetInfo);
     const latestVersion = getVersion(upgradedWidgetInfo.type);
 
     // Only traverse our children if we can understand this version
@@ -44329,7 +42980,7 @@ const isRawWidgetInfoRenderableBy = function (widgetInfo, rendererContentVersion
 
   // NOTE: This doesn't modify the widget info if the widget info
   // is at a later version than is supported.
-  const upgradedWidgetInfo = upgradeWidgetInfoToLatestVersion(widgetInfo);
+  const upgradedWidgetInfo = perseusCore.upgradeWidgetInfoToLatestVersion(widgetInfo);
   return isUpgradedWidgetInfoRenderableBy(upgradedWidgetInfo, rendererContentVersion[upgradedWidgetInfo.type]);
 };
 const isRendererContentRenderableBy = function (rendererOptions, rendererContentVersion) {
@@ -45677,7 +44328,6 @@ exports.mediaQueries = mediaQueries;
 exports.parseDataFromJSONP = parseDataFromJSONP;
 exports.preprocessTex = preprocessTex;
 exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;
-exports.scorePerseusItem = scorePerseusItem;
 exports.shouldHaveIndividualAnswer = shouldHaveIndividualAnswer;
 exports.traverse = traverse;
 exports.usePerseusI18n = usePerseusI18n;