@khanacademy/perseus 21.0.0 → 21.2.0

package/dist/es/index.js

@@ -7,7 +7,7 @@ import * as i18n from '@khanacademy/wonder-blocks-i18n';
 import Tooltip$1 from '@khanacademy/wonder-blocks-tooltip';
 import classNames from 'classnames';
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef } from 'react';
+import React__default, { useState, useEffect, useRef, createContext } from 'react';
 import _, { debounce as debounce$1 } from 'underscore';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { Popover, PopoverContentCore, PopoverContent } from '@khanacademy/wonder-blocks-popover';
@@ -3258,6 +3258,15 @@ const textarea = {
  */
 const unescapeMathMode$1 = label => label.startsWith("$") && label.endsWith("$") ? label.slice(1, -1) : label;
 const random$1 = seededRNG$1(new Date().getTime() & 0xffffffff);
+
+// TODO(benchristel): in the future, we may want to make deepClone work for
+// Record<string, Cloneable> as well. Currently, it only does arrays.
+function deepClone(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone);
+  }
+  return obj;
+}
 const Util = {
   inputPathsEqual,
   nestedMap: nestedMap$2,
@@ -3303,7 +3312,8 @@ const Util = {
   getDataUrl: getDataUrl,
   textarea,
   unescapeMathMode: unescapeMathMode$1,
-  random: random$1
+  random: random$1,
+  deepClone
 };
 
 // Derived from the MIT-licensed:
@@ -24901,9 +24911,22 @@ class Explanation extends React.Component {
     // Special styling is needed to fit the button in a block of text without throwing off the line spacing.
     // While the button is not normally included in a block of text, it needs to be able to accommodate such a case.
     const buttonStyleOverrides = {
-      height: "22px",
+      height: "auto",
       marginLeft: "-2px",
-      padding: "0 2px"
+      // transfer space on the left side to the padding
+      marginRight: "2px",
+      // adds space between the right border and any text that follows
+      paddingLeft: "2px" // adds space between the left border and the button text
+    };
+
+    const labelStyle = {
+      fontSize: "18px",
+      lineHeight: "20px",
+      // The following property adjusts the large space between the button text and the caret icon.
+      // Since we are unable to adjust the styling of the icon (where the extra space exists),
+      //      we are adjusting it on the text label by using a negative margin.
+      marginRight: "-6px",
+      "white-space": "normal"
     };
     const contentStyling = [styles$p.content, this.state.expanded ? styles$p.contentExpanded : styles$p.contentCollapsed, allowTransition && (this.state.expanded ? styles$p.transitionExpanded : styles$p.transitionCollapsed)];
     return /*#__PURE__*/React.createElement(UniqueIDProvider, {
@@ -24914,8 +24937,9 @@ class Explanation extends React.Component {
       "aria-controls": ids.get("content"),
       endIcon: caretIcon,
       kind: "tertiary",
+      labelStyle: labelStyle,
       onClick: this._onClick,
-      size: "large",
+      size: "small",
       style: buttonStyleOverrides
     }, promptText), /*#__PURE__*/React.createElement(View, {
       id: ids.get("content"),
@@ -28190,6 +28214,36 @@ const moveAll = delta => ({
   type: MOVE_ALL,
   delta
 });
+const MOVE_POINT = "move-point";
+function movePoint(index, destination) {
+  return {
+    type: MOVE_POINT,
+    index,
+    destination
+  };
+}
+const CHANGE_SNAP_STEP = "change-snap-step";
+function changeSnapStep(snapStep) {
+  return {
+    type: CHANGE_SNAP_STEP,
+    snapStep
+  };
+}
+const CHANGE_RANGE = "change-range";
+function changeRange(range) {
+  return {
+    type: CHANGE_RANGE,
+    range
+  };
+}
+
+const GraphStateContext = /*#__PURE__*/createContext({
+  state: {},
+  dispatch: () => {}
+});
+function useGraphState() {
+  return React__default.useContext(GraphStateContext);
+}
 
 /**
  * 44 is touch best practice and AAA compliant for WCAG
@@ -28216,6 +28270,11 @@ const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.
   const extent = ranges[i][1] - ranges[i][0];
   return (coord + ranges[i][1]) / extent;
 }));
+function snap(snapStep, point) {
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
+}
 
 const useTransform = (...points) => {
   const {
@@ -28271,6 +28330,9 @@ const getLines = points => points.map((point, i) => {
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
+  const {
+    state
+  } = useGraphState();
   const {
     start,
     end,
@@ -28295,7 +28357,7 @@ const MovableLine = props => {
     onMove: newPoint => {
       onMove(vec.sub(newPoint, midpoint));
     },
-    constrain: p => p
+    constrain: p => snap(state.snapStep, p)
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("g", {
     ref: line,
@@ -28346,7 +28408,13 @@ function SVGLine(props) {
   });
 }
 
+// The hitbox size of 48px by 48px is preserved from the legacy interactive
+// graph.
+const hitboxSizePx = 48;
 const StyledMovablePoint = props => {
+  const {
+    state
+  } = useGraphState();
   const hitboxRef = useRef(null);
   const {
     point,
@@ -28359,7 +28427,7 @@ const StyledMovablePoint = props => {
     gestureTarget: hitboxRef,
     point,
     onMove,
-    constrain: p => p
+    constrain: p => snap(state.snapStep, p)
   });
   const [[x, y]] = useTransform(point);
   return /*#__PURE__*/React.createElement("g", {
@@ -28374,7 +28442,7 @@ const StyledMovablePoint = props => {
     }
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
-    r: TARGET_SIZE / 2,
+    r: hitboxSizePx / 2,
     cx: x,
     cy: y
   }), /*#__PURE__*/React.createElement("circle", {
@@ -28412,7 +28480,9 @@ const SegmentGraph = props => {
     onMoveLine: delta => {
       dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
+    onMovePoint: (endpointIndex, destination) => {
+      dispatch(moveControlPoint(endpointIndex, destination, i));
+    },
     "data-testid": "segment" + i
   })));
 };
@@ -28701,7 +28771,8 @@ const PolygonGraph = props => {
     type,
     showAngles,
     showSides,
-    range
+    range,
+    snapStep
   } = props.graphState;
   const points = coords != null ? coords : [[0, 0]];
   const pointsSum = points.reduce((acc, point) => vec.add(acc, point), [0, 0]);
@@ -28716,7 +28787,7 @@ const PolygonGraph = props => {
       const delta = vec.sub(newPoint, midpoint);
       dispatch(moveAll(delta));
     },
-    constrain: p => p
+    constrain: p => snap(snapStep, p)
   });
   const active = hovered || focused || dragging;
   const lines = getLines(points);
@@ -28768,22 +28839,179 @@ const PolygonGraph = props => {
   }), points.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
     key: "point-" + i,
     point: point,
-    onMove: destination => dispatch(moveControlPoint(i, destination)),
+    onMove: destination => dispatch(movePoint(i, destination)),
     "data-testid": type + i
   })));
 };
 
-const renderLineLabel = (n, [min, max]) => n !== -1 && n !== min && n !== max;
-const axisOptions = (props, index) => ({
-  axis: props.markings === "graph",
-  lines: props.step[index],
-  subdivisions: props.step[index] / props.gridStep[index],
-  labels: n => renderLineLabel(n, props.range[index]) ? n : ""
-});
-const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
-  xAxis: axisOptions(props, 0),
-  yAxis: axisOptions(props, 1)
-});
+function PointGraph(props) {
+  const {
+    dispatch
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(StyledMovablePoint, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(movePoint(i, destination))
+  })));
+}
+
+function Arrow(props) {
+  const {
+    userTransform,
+    viewTransform
+  } = useTransformContext();
+  const point = [props.x, props.y];
+  const userTransformedPoint = vec.transform(point, userTransform);
+  const viewTransformedPoint = vec.transform(userTransformedPoint, viewTransform);
+  return /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${viewTransformedPoint[0]} ${viewTransformedPoint[1]}) rotate(${props.rotate}) scale(1.25)`
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: "translate(-1)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4",
+    fill: "none"
+  })));
+}
+function AxisArrows() {
+  const {
+    state
+  } = useGraphState();
+  const range = state.range;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Arrow, {
+    x: xMax,
+    y: 0,
+    rotate: 0
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: 0,
+    y: yMin,
+    rotate: 90
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: xMin,
+    y: 0,
+    rotate: 180
+  }), /*#__PURE__*/React__default.createElement(Arrow, {
+    x: 0,
+    y: yMax,
+    rotate: 270
+  }));
+}
+
+const tickSize = 10;
+const tickStyle = {
+  stroke: "black",
+  strokeWidth: 1
+};
+const YGridTick = ({
+  y
+}) => {
+  const pointOnAxis = [0, y];
+  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  return /*#__PURE__*/React.createElement("g", {
+    className: "y-axis-ticks"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: xPosition - tickSize / 2,
+    y1: yPosition,
+    x2: xPosition + tickSize / 2,
+    y2: yPosition,
+    style: tickStyle
+  }));
+};
+const XGridTick = ({
+  x
+}) => {
+  const pointOnAxis = [x, 0];
+  const [[xPosition, yPosition]] = useTransform(pointOnAxis);
+  return /*#__PURE__*/React.createElement("g", {
+    className: "x-axis-ticks"
+  }, /*#__PURE__*/React.createElement("line", {
+    x1: xPosition,
+    y1: yPosition + tickSize / 2,
+    x2: xPosition,
+    y2: yPosition - tickSize / 2,
+    style: tickStyle
+  }));
+};
+function generateTickLocations(tickStep, min, max) {
+  const ticks = [];
+  for (let i = 0 + tickStep; i < max; i += tickStep) {
+    ticks.push(i);
+  }
+  for (let i = 0 - tickStep; i > min; i -= tickStep) {
+    ticks.push(i);
+  }
+  return ticks;
+}
+const AxisTicks = props => {
+  const range = props.range;
+  const [xMin, xMax] = range[0];
+  const [yMin, yMax] = range[1];
+  const yTickStep = props.tickStep[1];
+  const xTickStep = props.tickStep[0];
+  const yGridTicks = generateTickLocations(yTickStep, yMin, yMax);
+  const xGridTicks = generateTickLocations(xTickStep, xMin, xMax);
+  return /*#__PURE__*/React.createElement("g", {
+    className: "axis-ticks"
+  }, yGridTicks.map(y => {
+    return /*#__PURE__*/React.createElement(YGridTick, {
+      y: y,
+      key: `y-grid-tick-${y}`
+    });
+  }), xGridTicks.map(x => {
+    return /*#__PURE__*/React.createElement(XGridTick, {
+      x: x,
+      key: `x-grid-tick-${x}`
+    });
+  }));
+};
+
+/**
+ * lineLabelText get the text that should
+ * be displayed for a specific tick place
+ *
+ * @param {number} n the tick number
+ * @param {number} tickStep how frequently a label should appear
+ * @param {vec.Vector2} range the min/max range on the axis
+ */
+const lineLabelText = (n, tickStep, range) => {
+  const [min, max] = range;
+  const isOnStep = n % tickStep === 0;
+  const isNegativeOne = n === -1;
+  const isMin = n === min;
+  const isMax = n === max;
+  const shouldRender = isOnStep && !isNegativeOne && !isMin && !isMax;
+  return shouldRender ? `${n}` : "";
+};
+
+/**
+ * axisOptions determine axis options for Mafs
+ *
+ * axisIndex is for grabbing data in an array that contains
+ * data for multiple axes. For example range: [[-10, 10], [-10, 10]]
+ * range[0] is data for the x axis and range[1] is data for the y axis
+ *
+ * @param {GridProps} props
+ * @param {number} axisIndex which axis we're getting options for
+ */
+const axisOptions = (props, axisIndex) => {
+  const axisStep = props.tickStep[axisIndex];
+  const axisRange = props.range[axisIndex];
+  return {
+    axis: props.markings === "graph",
+    lines: props.gridStep[axisIndex],
+    labels: n => lineLabelText(n, axisStep, axisRange)
+  };
+};
+const Grid = props => {
+  return props.markings === "none" ? null : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Coordinates.Cartesian, {
+    xAxis: axisOptions(props, 0),
+    yAxis: axisOptions(props, 1)
+  }), /*#__PURE__*/React.createElement(AxisTicks, {
+    range: props.range,
+    tickStep: props.tickStep
+  }), props.markings === "graph" && /*#__PURE__*/React.createElement(AxisArrows, null));
+};
 
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React.createElement("svg", {
@@ -29480,53 +29708,50 @@ const LegacyGrid = ({
   return null;
 };
 
-/** Determine if coords is type CollinearTuple[] */
-const isCollinearTuples = coords => Array.isArray(coords[0][0]);
-
-// Generic type makes returned state match input state
 function interactiveGraphReducer(state, action) {
+  switch (action.type) {
+    case MOVE_CONTROL_POINT:
+      return doMoveControlPoint(state, action);
+    case MOVE_LINE:
+      return doMoveLine(state, action);
+    case MOVE_ALL:
+      return doMoveAll(state, action);
+    case MOVE_POINT:
+      return doMovePoint(state, action);
+    case CHANGE_SNAP_STEP:
+      return doChangeSnapStep(state, action);
+    case CHANGE_RANGE:
+      return doChangeRange(state, action);
+    default:
+      throw new UnreachableCaseError(action);
+  }
+}
+function doMoveControlPoint(state, action) {
   const {
     snapStep,
     range
   } = state;
-  if (!state.coords) {
-    throw new Error("Graph state must have been initialized with coords");
-  }
-  switch (action.type) {
-    case MOVE_CONTROL_POINT:
+  switch (state.type) {
+    case "segment":
+    case "linear":
+    case "linear-system":
+    case "ray":
       {
-        const newCoords = action.itemIndex !== undefined && state.coords && isCollinearTuples(state.coords) ? updateAtIndex({
+        const newCoords = updateAtIndex({
           array: state.coords,
           index: action.itemIndex,
           update: tuple => setAtIndex({
             array: tuple,
             index: action.pointIndex,
-            newValue: snap({
-              snapStep,
-              point: bound$1({
-                snapStep,
-                range,
-                point: action.destination
-              })
-            })
-          })
-        }) : setAtIndex({
-          array: state.coords,
-          index: action.pointIndex,
-          newValue: snap({
-            snapStep,
-            point: bound$1({
+            newValue: snap(snapStep, bound$1({
               snapStep,
               range,
               point: action.destination
-            })
+            }))
           })
         });
-
-        // Cannot type narrow both conditions within function parameters,
-        // so this may seem redundant, but it's necessary for type safety.
-        const coordsToCheck = isCollinearTuples(newCoords) && action.itemIndex !== undefined ? newCoords[action.itemIndex] : newCoords;
-        if (!isCollinearTuples(coordsToCheck) && coordsOverlap(coordsToCheck)) {
+        const coordsToCheck = newCoords[action.itemIndex];
+        if (coordsOverlap(coordsToCheck)) {
           return state;
         }
         return _extends({}, state, {
@@ -29534,16 +29759,30 @@ function interactiveGraphReducer(state, action) {
           coords: newCoords
         });
       }
-    case MOVE_LINE:
+    case "circle":
+      throw new Error("FIXME implement circle reducer");
+    case "point":
+    case "polygon":
+      throw new Error(`Don't use moveControlPoint for ${state.type} graphs. Use movePoint instead!`);
+    default:
+      throw new UnreachableCaseError(state);
+  }
+}
+function doMoveLine(state, action) {
+  const {
+    snapStep,
+    range
+  } = state;
+  switch (state.type) {
+    case "segment":
+    case "linear":
+    case "linear-system":
+    case "ray":
       {
-        var _state$coords;
-        if (!isCollinearTuples(state.coords)) {
-          throw new Error("Cannot call this action unless coords is array of CollinearTuple.");
-        }
         if (action.itemIndex === undefined) {
           throw new Error("Please provide index of line to move");
         }
-        const currentLine = (_state$coords = state.coords) == null ? void 0 : _state$coords[action.itemIndex];
+        const currentLine = state.coords[action.itemIndex];
         if (!currentLine) {
           throw new Error("No line to move");
         }
@@ -29551,45 +29790,89 @@ function interactiveGraphReducer(state, action) {
           snapStep,
           range
         });
-        const newLine = [snap({
-          snapStep,
-          point: vec.add(currentLine[0], change)
-        }), snap({
-          snapStep,
-          point: vec.add(currentLine[1], change)
-        })];
+        const newLine = [snap(snapStep, vec.add(currentLine[0], change)), snap(snapStep, vec.add(currentLine[1], change))];
         const newCoords = setAtIndex({
           array: state.coords,
           index: action.itemIndex,
           newValue: newLine
         });
         return _extends({}, state, {
+          type: state.type,
           hasBeenInteractedWith: true,
           coords: newCoords
         });
       }
-    case MOVE_ALL:
+    default:
+      // The MoveLine action doesn't make sense for other graph types;
+      // ignore it if it somehow happens
+      return state;
+  }
+}
+function doMoveAll(state, action) {
+  const {
+    snapStep,
+    range
+  } = state;
+  switch (state.type) {
+    case "polygon":
       {
-        if (isCollinearTuples(state.coords)) {
-          throw new Error("Cannot call this action unless coords is array of vectors.");
-        }
         const change = getChange(state.coords, action.delta, {
           snapStep,
           range
         });
-        const newCoords = state.coords.map(point => snap({
-          snapStep,
-          point: vec.add(point, change)
-        }));
+        const newCoords = state.coords.map(point => snap(snapStep, vec.add(point, change)));
         return _extends({}, state, {
           hasBeenInteractedWith: true,
           coords: newCoords
         });
       }
     default:
-      throw new UnreachableCaseError(action);
+      // MoveAll is not supported for other state types; just ignore it.
+      return state;
+  }
+}
+function doMovePoint(state, action) {
+  switch (state.type) {
+    case "point":
+    case "polygon":
+      {
+        return _extends({}, state, {
+          hasBeenInteractedWith: true,
+          coords: setAtIndex({
+            array: state.coords,
+            index: action.index,
+            newValue: snap(state.snapStep, bound$1({
+              snapStep: state.snapStep,
+              range: state.range,
+              point: action.destination
+            }))
+          })
+        });
+      }
+    default:
+      throw new Error("The movePoint action is only for point and polygon graphs");
   }
 }
+function doChangeSnapStep(state, action) {
+  if (
+  // Deep equality check since these are arrays
+  _.isEqual(state.snapStep, action.snapStep)) {
+    return state;
+  }
+  return _extends({}, state, {
+    snapStep: action.snapStep
+  });
+}
+function doChangeRange(state, action) {
+  if (
+  // Deep equality check since these are arrays
+  _.isEqual(state.range, action.range)) {
+    return state;
+  }
+  return _extends({}, state, {
+    range: action.range
+  });
+}
 const getChange = (coords, delta, constraintOpts) => {
   const [deltaX, deltaY] = delta;
   const maxMoves = coords.map(point => maxMove(_extends({}, constraintOpts, {
@@ -29606,15 +29889,6 @@ const getChange = (coords, delta, constraintOpts) => {
   const dy = clamp(deltaY, minYMove, maxYMove);
   return [dx, dy];
 };
-function snap({
-  snapStep,
-  point
-}) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = snapStep;
-  return [Math.round(requestedX / snapX) * snapX, Math.round(requestedY / snapY) * snapY];
-}
-
 // Returns the closest point to the given `point` that is within the graph
 // bounds given in `state`.
 function bound$1({
@@ -29668,7 +29942,7 @@ function clamp(value, min, max) {
 const coordsOverlap = coords => coords.some((coord, i) => coords.some((c, j) => i !== j && vector$1.equal(coord, c)));
 function updateAtIndex(args) {
   const {
-    array = [],
+    array,
     index,
     update
   } = args;
@@ -29681,13 +29955,12 @@ function updateAtIndex(args) {
 }
 function setAtIndex(args) {
   const {
-    array = [],
+    array,
     index,
     newValue
   } = args;
   const copy = [...array];
   copy[index] = newValue;
-  // restoring readonly to array
   return copy;
 }
 
@@ -29728,19 +30001,32 @@ function initializeGraphState(params) {
         })
       };
     case "polygon":
-      return _extends({
+      return {
+        type: "polygon",
         hasBeenInteractedWith: false,
         range,
-        snapStep
-      }, graph, {
+        snapStep,
+        showAngles: Boolean(graph.showAngles),
+        showSides: Boolean(graph.showSides),
         coords: getPolygonCoords({
           graph,
           range,
           step
         })
-      });
-    case "angle":
+      };
     case "point":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getDefaultPoints({
+          graph,
+          step,
+          range
+        })
+      };
+    case "angle":
     case "circle":
     case "sinusoid":
     case "quadratic":
@@ -29749,6 +30035,46 @@ function initializeGraphState(params) {
       throw new UnreachableCaseError(graph);
   }
 }
+const getDefaultPoints = ({
+  graph,
+  range,
+  step
+}) => {
+  var _graph$coords;
+  const numPoints = graph.numPoints || 1;
+  let coords = (_graph$coords = graph.coords) == null ? void 0 : _graph$coords.slice();
+  if (coords) {
+    return coords;
+  }
+  switch (numPoints) {
+    case 1:
+      // Back in the day, one point's coords were in graph.coord
+      coords = [graph.coord || [0, 0]];
+      break;
+    case 2:
+      coords = [[-5, 0], [5, 0]];
+      break;
+    case 3:
+      coords = [[-5, 0], [0, 0], [5, 0]];
+      break;
+    case 4:
+      coords = [[-6, 0], [-2, 0], [2, 0], [6, 0]];
+      break;
+    case 5:
+      coords = [[-6, 0], [-3, 0], [0, 0], [3, 0], [6, 0]];
+      break;
+    case 6:
+      coords = [[-5, 0], [-3, 0], [-1, 0], [1, 0], [3, 0], [5, 0]];
+      break;
+    default:
+      coords = [];
+      break;
+  }
+  // Transform coords from their -10 to 10 space to 0 to 1
+  // because of the old graph.coord, and also it's easier.
+  const newCoords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  return normalizePoints(range, step, newCoords);
+};
 
 // TS v4 doesn't narrow return types, while v5 does.
 // Instead of updating to v5, using generic type to relate input and output types.
@@ -29769,15 +30095,13 @@ function getGradableGraph(state, initialGraph) {
     });
   }
   if (state.type === "linear" && initialGraph.type === "linear") {
-    var _state$coords;
     return _extends({}, initialGraph, {
-      coords: (_state$coords = state.coords) == null ? void 0 : _state$coords[0]
+      coords: state.coords[0]
     });
   }
   if (state.type === "ray" && initialGraph.type === "ray") {
-    var _state$coords2;
     return _extends({}, initialGraph, {
-      coords: (_state$coords2 = state.coords) == null ? void 0 : _state$coords2[0]
+      coords: state.coords[0]
     });
   }
   if (state.type === "polygon" && initialGraph.type === "polygon") {
@@ -29785,6 +30109,11 @@ function getGradableGraph(state, initialGraph) {
       coords: state.coords
     });
   }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
   throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
 }
 const getDefaultSegments = ({
@@ -29822,10 +30151,10 @@ const getLineCoords = ({
   range,
   step
 }) => {
-  var _graph$coords;
+  var _graph$coords2;
   return (
     // Return two lines for a linear system, one for a ray or linear
-    ((_graph$coords = graph.coords) != null ? _graph$coords : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+    ((_graph$coords2 = graph.coords) != null ? _graph$coords2 : graph.type === "linear-system") ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
   );
 };
 const getPolygonCoords = ({
@@ -29833,7 +30162,8 @@ const getPolygonCoords = ({
   range,
   step
 }) => {
-  let coords = graph.coords;
+  var _graph$coords3;
+  let coords = (_graph$coords3 = graph.coords) == null ? void 0 : _graph$coords3.slice();
   if (coords) {
     return coords;
   }
@@ -29887,6 +30217,13 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "point":
+      return /*#__PURE__*/React.createElement(PointGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
+    case "circle":
+      throw new Error("the circle graph type is not yet implemented");
     default:
       return new UnreachableCaseError(type);
   }
@@ -29894,10 +30231,36 @@ const renderGraph = props => {
 const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [width, height] = props.box;
   const [state, dispatch] = React.useReducer(interactiveGraphReducer, props, initializeGraphState);
+  const prevState = useRef(state);
+  useEffect(() => {
+    if (prevState.current !== state) {
+      props.onChange({
+        graph: state
+      });
+    }
+    prevState.current = state;
+  }, [props, state]);
+
+  // Destructuring first to keep useEffect from making excess calls
+  const [xSnap, ySnap] = props.snapStep;
+  useEffect(() => {
+    dispatch(changeSnapStep([xSnap, ySnap]));
+  }, [xSnap, ySnap]);
+
+  // Destructuring first to keep useEffect from making excess calls
+  const [[xMinRange, xMaxRange], [yMinRange, yMaxRange]] = props.range;
+  useEffect(() => {
+    dispatch(changeRange([[xMinRange, xMaxRange], [yMinRange, yMaxRange]]));
+  }, [xMinRange, xMaxRange, yMinRange, yMaxRange]);
   React.useImperativeHandle(ref, () => ({
     getUserInput: () => getGradableGraph(state, props.graph)
   }));
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(GraphStateContext.Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, /*#__PURE__*/React.createElement(View, {
     style: {
       width,
       height,
@@ -29923,12 +30286,18 @@ const MafsGraph = /*#__PURE__*/React.forwardRef((props, ref) => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, props), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
+  }, /*#__PURE__*/React.createElement(SvgDefs, null), /*#__PURE__*/React.createElement(Grid, {
+    tickStep: props.step,
+    gridStep: props.gridStep,
+    range: props.range,
+    containerSizeClass: props.containerSizeClass,
+    markings: props.markings
+  }), props.lockedFigures && /*#__PURE__*/React.createElement(GraphLockedLayer, {
     lockedFigures: props.lockedFigures
   }), renderGraph({
     state,
     dispatch
-  }))));
+  })))));
 });
 
 const {
@@ -31065,6 +31434,7 @@ class LegacyInteractiveGraph extends React.Component {
       $(this.angle).on("move", () => {
         var _this$angle;
         this.onChange({
+          // @ts-expect-error Type '{ coords: any; type: "angle"; showAngles?: boolean | undefined; allowReflexAngles?: boolean | undefined; angleOffsetDeg?: number | undefined; snapDegrees?: number | undefined; match?: "congruent" | undefined; }' is not assignable to type 'InteractiveGraphState | undefined'.
           graph: _extends({}, graph, {
             coords: (_this$angle = this.angle) == null ? void 0 : _this$angle.getClockwiseCoords()
           })
@@ -31656,9 +32026,8 @@ class InteractiveGraph extends React.Component {
           };
         }
       } else if (userInput.type === "point" && rubric.correct.type === "point" && userInput.coords != null) {
-        var _userInput$coords;
         let correct = InteractiveGraph.getPointCoords(rubric.correct, component);
-        const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
+        const guess = userInput.coords.slice();
         correct = correct.slice();
         // Everything's already rounded so we shouldn't need to do an
         // eq() comparison but _.isEqual(0, -0) is false, so we'll use
@@ -31676,8 +32045,8 @@ class InteractiveGraph extends React.Component {
           };
         }
       } else if (userInput.type === "polygon" && rubric.correct.type === "polygon" && userInput.coords != null) {
-        var _userInput$coords2, _rubric$correct$coord;
-        const guess = (_userInput$coords2 = userInput.coords) == null ? void 0 : _userInput$coords2.slice();
+        var _userInput$coords, _rubric$correct$coord;
+        const guess = (_userInput$coords = userInput.coords) == null ? void 0 : _userInput$coords.slice();
         // @ts-expect-error - TS2322 - Type 'Coord[] | undefined' is not assignable to type 'Coord[]'.
         const correct = (_rubric$correct$coord = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord.slice();
         let match;
@@ -31702,9 +32071,9 @@ class InteractiveGraph extends React.Component {
           };
         }
       } else if (userInput.type === "segment" && rubric.correct.type === "segment" && userInput.coords != null) {
-        var _rubric$correct$coord2;
-        let guess = userInput.coords.slice();
-        let correct = (_rubric$correct$coord2 = rubric.correct.coords) == null ? void 0 : _rubric$correct$coord2.slice();
+        var _rubric$correct;
+        let guess = Util.deepClone(userInput.coords);
+        let correct = Util.deepClone((_rubric$correct = rubric.correct) == null ? void 0 : _rubric$correct.coords);
         guess = _.invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
         correct = _.invoke(correct, "sort").sort();
@@ -41972,7 +42341,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "21.0.0";
+const libVersion = "21.2.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43096,6 +43465,9 @@ const ItemExtras = [
 // A background image applied to various widgets.
 
 const PerseusExpressionAnswerFormConsidered = ["correct", "wrong", "ungraded"];
+
+// 2D range: xMin, xMax, yMin, yMax
+
 const plotterPlotTypes = ["bar", "line", "pic", "histogram", "dotplot"];
 
 /**
@@ -44482,7 +44854,7 @@ function getAnswersFromWidgets(widgets) {
         // E.g. 'item 1\nitem 2\nitem 3'
         const orderer = widget;
         if ((_orderer$options = orderer.options) != null && _orderer$options.correctOptions) {
-          answers.push(orderer.options.correctOptions.map(option => option.content).join("\n"));
+          answers.push(joinOptionContents(orderer.options.correctOptions));
         }
         break;
       case "sorter":
@@ -44541,6 +44913,28 @@ function getAnswersFromWidgets(widgets) {
   return answers;
 }
 
+/**
+ * Join the content of the options together.
+ * @param {Array<{content: string}>} options
+ * @returns {string}
+ */
+const joinOptionContents = options => options.map(({
+  content
+}) => content).join("\n");
+
+/**
+ * Convert an index to an option letter.
+ * @param {number} index
+ * @returns {string}
+ * @example
+ * toOptionLetter(0) // 'A'
+ * toOptionLetter(1) // 'B'
+ * toOptionLetter(25) // 'Z'
+ * // Once the index goes past 25, it will start returning special characters
+ * toOptionLetter(26) // '['
+ */
+const toOptionLetter = index => String.fromCharCode("A".charCodeAt(0) + index);
+
 /**
  * Inject a string equivalent of the widgets into the content.
  *
@@ -44551,7 +44945,7 @@ function getAnswersFromWidgets(widgets) {
  * @param {PerseusRenderer["widgets"]} widgets
  * @returns
  */
-function injectWidgets(content, widgets) {
+function injectWidgets(content, widgets, widgetProps) {
   // The types for taskProgress.itemData are not well defined,
   // so there is a chance that widgets or content could be undefined.
   // In that scenario, simply exit early and return the content as is.
@@ -44571,12 +44965,20 @@ function injectWidgets(content, widgets) {
     switch (widget.type) {
       case "radio":
         // Replace radio with the radio options
-        // '[[☃ Radio 1]]' -> 'option 1\noption 2\noption 3'
+        // '[[☃ Radio 1]]' -> 'choice 1\nchoice 2\nchoice 3'
+        // or if the current widget state is available with proper order,
+        // '[[☃ Radio 1]]' ->
+        //   'Option A: choice 1\nOption B: choice 2\nOption C: choice 3'
         const radio = widget;
+        const radioProps = widgetProps == null ? void 0 : widgetProps[widgetID];
         if ((_radio$options = radio.options) != null && (_radio$options = _radio$options.choices) != null && _radio$options.length) {
           var _radio$options2;
-          let radioContext = radio.options.choices.map(choice => choice.content).join("\n");
-          if ((_radio$options2 = radio.options) != null && _radio$options2.randomize) {
+          let radioContext = joinOptionContents(radioProps ? radioProps.choices.map(({
+            content
+          }, i) => ({
+            content: `Option ${toOptionLetter(i)}: ${content}`
+          })) : radio.options.choices);
+          if (!radioProps && (_radio$options2 = radio.options) != null && _radio$options2.randomize) {
             radioContext += "\nThose options are displayed in a different order to the user. If the user says the letter, number, or ordinal number, always ask them clarify which option they are referring to.\n";
           }
           context = context.replace(`[[☃ ${widgetID}]]`, radioContext);
@@ -44685,7 +45087,7 @@ function injectWidgets(content, widgets) {
         // '[[☃ Orderer 1]]' -> 'option 1\noption 2\noption 3'
         const orderer = widget;
         if ((_orderer$options2 = orderer.options) != null && _orderer$options2.options) {
-          context = context.replace(`[[☃ ${widgetID}]]`, orderer.options.options.map(option => option.content).join("\n"));
+          context = context.replace(`[[☃ ${widgetID}]]`, joinOptionContents(orderer.options.options));
         }
         break;
       case "sorter":