@khanacademy/perseus 53.0.0 → 53.1.0

package/dist/index.js

@@ -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.
 };
 
@@ -10059,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) {
@@ -11297,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) {
@@ -14730,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];
@@ -14796,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
@@ -16542,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);
 
@@ -23377,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`
   }
 });
 
@@ -23405,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,
@@ -23453,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, {
@@ -23463,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
     ,
@@ -23477,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({
@@ -23489,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",
@@ -23502,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
   }
 });
 
@@ -24673,7 +24745,8 @@ var Radio = {
   staticTransform: transform,
   version: perseusCore.radioLogic.version,
   propUpgrades: perseusCore.radioLogic.widgetOptionsUpgrades,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: perseusCore.getRadioPublicWidgetOptions
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -26883,7 +26956,8 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4
+  staticTransform: staticTransform$4,
+  getPublicWidgetOptions: perseusCore.getGrapherPublicWidgetOptions
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -27190,7 +27264,8 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true
+  hidden: true,
+  getPublicWidgetOptions: perseusCore.getIFramePublicWidgetOptions
 };
 
 const getPromptJSON$d = renderProps => {
@@ -29922,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
   });
 }
@@ -30104,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;
@@ -30551,7 +30715,7 @@ const SvgDefs = () => /*#__PURE__*/React__default["default"].createElement("defs
 })));
 
 const {
-  clockwise: clockwise$1
+  clockwise
 } = kmath.geometry;
 const {
   getAngleFromVertex: getAngleFromVertex$1
@@ -30566,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]);
@@ -30639,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
@@ -31586,9 +31750,6 @@ function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
   };
 }
 
-const {
-  clockwise
-} = kmath.geometry;
 function getGradableGraph(state, initialGraph) {
   if (!state.hasBeenInteractedWith) {
     return {
@@ -31665,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
     };
   }
@@ -32327,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 => {
@@ -32422,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 {
@@ -32447,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: {
@@ -32474,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",
@@ -32500,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 {
@@ -32535,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) {
@@ -32549,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: {
@@ -32574,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) => {
@@ -32614,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 {
@@ -33320,7 +33683,8 @@ const MafsGraph = props => {
   } = renderGraphElements({
     state,
     dispatch,
-    i18n
+    i18n,
+    markings: props.markings
   });
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
@@ -33355,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 => {
@@ -33381,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],
@@ -33401,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: {
@@ -33698,7 +34074,8 @@ const renderGraphElements = props => {
   const {
     state,
     dispatch,
-    i18n
+    i18n,
+    markings
   } = props;
   const {
     type
@@ -33715,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":
@@ -34700,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) {
@@ -34871,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;
   }
@@ -34933,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;
   }
 
@@ -35100,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();
@@ -35126,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: {
@@ -35174,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();
@@ -36396,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
+    }));
   }
 
   /**
@@ -36730,35 +35883,14 @@ 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 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3
+  staticTransform: staticTransform$3,
+  getPublicWidgetOptions: perseusCore.getInteractiveGraphPublicWidgetOptions
 };
 
 // TODO: can we use WB typography?
@@ -39047,7 +38179,8 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: perseusCore.getMatrixPublicWidgetOptions
 };
 
 const getPromptJSON$7 = () => {
@@ -42243,7 +41376,8 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform
+  staticTransform: staticTransform,
+  getPublicWidgetOptions: perseusCore.getPlotterPublicWidgetOptions
 };
 
 const getPromptJSON$2 = () => {
@@ -42620,7 +41754,8 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true
+  isLintable: true,
+  getPublicWidgetOptions: perseusCore.getTablePublicWidgetOptions
 };
 
 const getPromptJSON = () => {
@@ -42801,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 = "53.0.0";
+const libVersion = "53.1.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {