@khanacademy/perseus 20.6.0 → 20.7.0

package/dist/index.js

@@ -18894,7 +18894,7 @@ const isAccessible = widgetInfo => {
   }
   return !!accessible;
 };
-const getAllWidgetTypes = () => {
+const getAllWidgetTypes$1 = () => {
   return ___default["default"].keys(widgets);
 };
 const upgradeWidgetInfoToLatestVersion = oldWidgetInfo => {
@@ -19166,7 +19166,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   getVersionVector: getVersionVector,
   getPublicWidgets: getPublicWidgets,
   isAccessible: isAccessible,
-  getAllWidgetTypes: getAllWidgetTypes,
+  getAllWidgetTypes: getAllWidgetTypes$1,
   upgradeWidgetInfoToLatestVersion: upgradeWidgetInfoToLatestVersion,
   getRendererPropsForWidgetInfo: getRendererPropsForWidgetInfo,
   traverseChildWidgets: traverseChildWidgets$3,
@@ -28320,22 +28320,55 @@ const GraphLockedLayer = props => {
 };
 
 const MOVE_CONTROL_POINT = "move-control-point";
-function moveControlPoint(objectIndex, pointIndex, destination) {
+function moveControlPoint(pointIndex, destination, itemIndex) {
   return {
     type: MOVE_CONTROL_POINT,
-    objectIndex,
+    itemIndex,
     pointIndex,
     destination
   };
 }
+const MOVE_ALL = "move-all";
 const MOVE_LINE = "move-line";
-function moveSegment(lineIndex, delta) {
+/** This action assumes the state.coords holds an array of collinear tuples that define lines */
+function moveLine(itemIndex, delta) {
   return {
     type: MOVE_LINE,
-    lineIndex,
+    itemIndex,
     delta
   };
 }
+/** This action assumes a flat array of vectors */
+const moveAll = delta => ({
+  type: MOVE_ALL,
+  delta
+});
+
+/**
+ * 44 is touch best practice and AAA compliant for WCAG
+ * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
+ */
+const TARGET_SIZE = 44;
+
+// same as pointsFromNormalized in interactive-graph.tsx
+const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
+// maps over [x, y]
+coords.map((coord, i) => {
+  const axisRange = range[i];
+  if (noSnap) {
+    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
+  }
+  const axisStep = step[i];
+  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
+  const tick = Math.round(coord * nSteps);
+  return axisRange[0] + axisStep * tick;
+}));
+
+// same as normalizeCoords in interactive-graph.tsx
+const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
+  const extent = ranges[i][1] - ranges[i][0];
+  return (coord + ranges[i][1]) / extent;
+}));
 
 const defaultStroke = "var(--movable-line-stroke-color)";
 const MovableLine = props => {
@@ -28383,7 +28416,7 @@ const MovableLine = props => {
     end: endPtPx,
     style: {
       stroke: "transparent",
-      strokeWidth: 44
+      strokeWidth: TARGET_SIZE
     }
   }), /*#__PURE__*/React__namespace.createElement(SVGLine, {
     start: startPtPx,
@@ -28416,7 +28449,7 @@ function SVGLine(props) {
     x2: end[0],
     y2: end[1],
     style: style,
-    className: dragging ? "movable-line-dragging" : undefined
+    className: dragging ? "movable-dragging" : undefined
   });
 }
 
@@ -28491,7 +28524,7 @@ const StyledMovablePoint = props => {
     }
   }, /*#__PURE__*/React__namespace.createElement("circle", {
     className: "movable-point-hitbox",
-    r: 22,
+    r: TARGET_SIZE / 2,
     cx: x,
     cy: y
   }), /*#__PURE__*/React__namespace.createElement("circle", {
@@ -28527,9 +28560,9 @@ const SegmentGraph = props => {
     snaps: snapStep,
     range: range,
     onMoveLine: delta => {
-      dispatch(moveSegment(i, delta));
+      dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination)),
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i)),
     "data-testid": "segment" + i
   })));
 };
@@ -28572,9 +28605,9 @@ const LinearGraph = props => {
     snaps: snapStep,
     range: range,
     onMoveLine: delta => {
-      dispatch(moveSegment(i, delta));
+      dispatch(moveLine(i, delta));
     },
-    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(i, endpointIndex, destination))
+    onMovePoint: (endpointIndex, destination) => dispatch(moveControlPoint(endpointIndex, destination, i))
     // "linear" or "linear-system" + index
     ,
     "data-testid": type + i,
@@ -28625,8 +28658,8 @@ const RayGraph = props => {
 
   // a ray only has one line
   const [start, end] = lines[0];
-  const handleMoveLine = delta => dispatch(moveSegment(0, delta));
-  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(0, pointIndex, newPoint));
+  const handleMoveLine = delta => dispatch(moveLine(0, delta));
+  const handleMovePoint = (newPoint, pointIndex) => dispatch(moveControlPoint(pointIndex, newPoint, 0));
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(MovableLine, {
     start: start,
     end: end,
@@ -28645,6 +28678,62 @@ const RayGraph = props => {
   }));
 };
 
+const PolygonGraph = props => {
+  const [focused, setFocused] = React__namespace.useState(false);
+  const [hovered, setHovered] = React__namespace.useState(false);
+  const {
+    dispatch
+  } = props;
+  const {
+    coords,
+    type
+  } = props.graphState;
+  const points = coords ?? [[0, 0]];
+  const pointsSum = points.reduce((acc, point) => mafs.vec.add(acc, point), [0, 0]);
+  const midpoint = pointsSum && mafs.vec.scale(pointsSum, 1 / (points.length ?? 1));
+  const ref = React__namespace.useRef(null);
+  const {
+    dragging
+  } = mafs.useMovable({
+    gestureTarget: ref,
+    point: midpoint,
+    onMove: newPoint => {
+      const delta = mafs.vec.sub(newPoint, midpoint);
+      dispatch(moveAll(delta));
+    },
+    constrain: p => p
+  });
+  const active = hovered || focused || dragging;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
+    points: [...points],
+    color: "var(--movable-line-stroke-color)",
+    svgPolygonProps: {
+      strokeWidth: active ? "var(--movable-line-stroke-weight-active)" : "var(--movable-line-stroke-weight)"
+    }
+  }), /*#__PURE__*/React__namespace.createElement(mafs.Polygon, {
+    points: [...points],
+    color: "transparent",
+    svgPolygonProps: {
+      ref,
+      tabIndex: 0,
+      strokeWidth: TARGET_SIZE,
+      style: {
+        cursor: dragging ? "grabbing" : "grab"
+      },
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      className: "movable-polygon"
+    }
+  }), points.map((point, i) => /*#__PURE__*/React__namespace.createElement(StyledMovablePoint, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(moveControlPoint(i, destination)),
+    "data-testid": type + i
+  })));
+};
+
 const renderLineLabel = (n, _ref) => {
   let [min, max] = _ref;
   return n !== -1 && n !== min && n !== max;
@@ -28660,234 +28749,6 @@ const Grid = props => props.markings === "none" ? null : /*#__PURE__*/React__nam
   yAxis: axisOptions(props, 1)
 });
 
-function interactiveGraphReducer(state, action) {
-  switch (action.type) {
-    case MOVE_CONTROL_POINT:
-      {
-        const newCoords = updateAtIndex({
-          array: state.coords,
-          index: action.objectIndex,
-          update: tuple => setAtIndex({
-            array: tuple,
-            index: action.pointIndex,
-            newValue: snap(state, bound$1(state, action.destination))
-          })
-        });
-        if (!validSegments(newCoords)) {
-          return state;
-        }
-        return {
-          ...state,
-          hasBeenInteractedWith: true,
-          coords: newCoords
-        };
-      }
-    case MOVE_LINE:
-      {
-        const currentLine = state.coords?.[action.lineIndex];
-        if (!currentLine) {
-          throw new Error("No line to move");
-        }
-        const maxMoves = currentLine.map(point => maxMove(state, point));
-        const minMoves = currentLine.map(point => minMove(state, point));
-        const maxXMove = Math.min(...maxMoves.map(move => move[0]));
-        const maxYMove = Math.min(...maxMoves.map(move => move[1]));
-        const minXMove = Math.max(...minMoves.map(move => move[0]));
-        const minYMove = Math.max(...minMoves.map(move => move[1]));
-        const dx = clamp(action.delta[0], minXMove, maxXMove);
-        const dy = clamp(action.delta[1], minYMove, maxYMove);
-        const newValue = [snap(state, mafs.vec.add(currentLine[0], [dx, dy])), snap(state, mafs.vec.add(currentLine[1], [dx, dy]))];
-        const newLine = setAtIndex({
-          array: state.coords,
-          index: action.lineIndex,
-          newValue
-        });
-        return {
-          ...state,
-          hasBeenInteractedWith: true,
-          coords: newLine
-        };
-      }
-    default:
-      throw new wonderStuffCore.UnreachableCaseError(action);
-  }
-}
-function snap(state, point) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = state.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(state, point) {
-  const [requestedX, requestedY] = point;
-  const [snapX, snapY] = state.snapStep;
-  const [[minX, maxX], [minY, maxY]] = state.range;
-  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
-}
-
-// Returns the vector from the given point to the top-right corner of the graph
-function maxMove(state, point) {
-  const topRight = bound$1(state, [Infinity, Infinity]);
-  return mafs.vec.sub(topRight, point);
-}
-
-// Returns the vector from the given point to the bottom-left corner of the
-// graph
-function minMove(state, point) {
-  const bottomLeft = bound$1(state, [-Infinity, -Infinity]);
-  return mafs.vec.sub(bottomLeft, point);
-}
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
-function validSegments(segments) {
-  return segments.every(_ref => {
-    let [start, end] = _ref;
-    return !kmath.vector.equal(start, end);
-  });
-}
-function updateAtIndex(args) {
-  const {
-    array = [],
-    index,
-    update
-  } = args;
-  const newValue = update(array[index]);
-  return setAtIndex({
-    array,
-    index,
-    newValue
-  });
-}
-function setAtIndex(args) {
-  const {
-    array = [],
-    index,
-    newValue
-  } = args;
-  const copy = [...array];
-  copy[index] = newValue;
-  // restoring readonly to array
-  return copy;
-}
-
-// same as pointsFromNormalized in interactive-graph.tsx
-const normalizePoints = (range, step, coordsList, noSnap) => coordsList.map(coords =>
-// maps over [x, y]
-coords.map((coord, i) => {
-  const axisRange = range[i];
-  if (noSnap) {
-    return axisRange[0] + (axisRange[1] - axisRange[0]) * coord;
-  }
-  const axisStep = step[i];
-  const nSteps = Math.floor((axisRange[1] - axisRange[0]) / axisStep);
-  const tick = Math.round(coord * nSteps);
-  return axisRange[0] + axisStep * tick;
-}));
-
-// same as normalizeCoords in interactive-graph.tsx
-const normalizeCoords = (coordsList, ranges) => coordsList.map(coords => coords.map((coord, i) => {
-  const extent = ranges[i][1] - ranges[i][0];
-  return (coord + ranges[i][1]) / extent;
-}));
-
-function initializeGraphState(params) {
-  const {
-    graph,
-    step,
-    snapStep,
-    range
-  } = params;
-  switch (graph.type) {
-    case "segment":
-      return {
-        type: "segment",
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
-        coords: getDefaultSegments({
-          graph,
-          step,
-          range
-        })
-      };
-    case "linear":
-    case "linear-system":
-    case "ray":
-      return {
-        type: graph.type,
-        hasBeenInteractedWith: false,
-        range,
-        snapStep,
-        // Linear and ray graphs have a single tuple of points, while a
-        // linear system has two tuples of points.
-        coords: getLineCoords(graph, range, step)
-      };
-  }
-  throw new Error("Mafs not yet implemented for graph type: " + graph.type);
-}
-const getDefaultSegments = props => {
-  const ys = n => {
-    switch (n) {
-      case 2:
-        return [5, -5];
-      case 3:
-        return [5, 0, -5];
-      case 4:
-        return [6, 2, -2, -6];
-      case 5:
-        return [6, 3, 0, -3, -6];
-      case 6:
-        return [5, 3, 1, -1, -3, -5];
-      default:
-        return [5];
-    }
-  };
-  return ys(props.graph.numSegments).map(y => {
-    let endpoints = [[-5, y], [5, y]];
-    endpoints = normalizeCoords(endpoints, props.range);
-    endpoints = normalizePoints(props.range, props.step, endpoints);
-    return endpoints;
-  });
-};
-
-// TS v4 doesn't narrow return types, while v5 does.
-// Instead of updating to v5, using generic type to relate input and output types.
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return initialGraph;
-  }
-  switch (true) {
-    // coords: Array of CollinearTuple
-    case state.type === "linear-system" && initialGraph.type === "linear-system":
-    case state.type === "segment" && initialGraph.type === "segment":
-      return {
-        ...initialGraph,
-        coords: state.coords
-      };
-    // coords: CollinearTuple
-    case state.type === "linear" && initialGraph.type === "linear":
-    case state.type === "ray" && initialGraph.type === "ray":
-      return {
-        ...initialGraph,
-        coords: state.coords?.[0]
-      };
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
-const getLineCoords = (graph, range, step) =>
-// Return two lines for a linear system, one for a ray or linear
-graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])];
-
 // Displays a stylized open eye: lint warnings are visible
 const VisibleIcon = () => /*#__PURE__*/React__namespace.createElement("svg", {
   width: "24",
@@ -29423,161 +29284,540 @@ class NumberInput extends React__namespace.Component {
   };
 }
 
-/* eslint-disable @babel/no-invalid-this */
-
-/* A checkbox that syncs its value to props using the
- * renderer's onChange method, and gets the prop name
- * dynamically from its props list
- */
-const PropCheckBox = createReactClass__default["default"]({
-  displayName: "PropCheckBox",
-  propTypes: {
-    labelAlignment: PropTypes__default["default"].oneOf(["left", "right"])
-  },
-  DEFAULT_PROPS: {
-    label: null,
-    onChange: null,
-    labelAlignment: "left"
-  },
-  getDefaultProps: function () {
-    return this.DEFAULT_PROPS;
-  },
-  propName: function () {
-    const propName = ___default["default"].find(___default["default"].keys(this.props), function (localPropName) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      return !___default["default"].has(this.DEFAULT_PROPS, localPropName);
-    }, this);
-    if (!propName) {
-      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
-    }
-    return propName;
-  },
-  _labelAlignLeft: function () {
-    return this.props.labelAlignment === "left";
-  },
-  render: function () {
-    const propName = this.propName();
-    return /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$h.labeledCheckbox)
-    }, this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-      checked: this.props[propName],
-      onChange: this.toggle
-    }), !this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label));
-  },
-  toggle: function () {
-    const propName = this.propName();
-    const changes = {};
-    changes[propName] = !this.props[propName];
-    this.props.onChange(changes);
-  }
-});
-const styles$h = aphrodite.StyleSheet.create({
-  labeledCheckbox: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center"
+/* eslint-disable @babel/no-invalid-this */
+
+/* A checkbox that syncs its value to props using the
+ * renderer's onChange method, and gets the prop name
+ * dynamically from its props list
+ */
+const PropCheckBox = createReactClass__default["default"]({
+  displayName: "PropCheckBox",
+  propTypes: {
+    labelAlignment: PropTypes__default["default"].oneOf(["left", "right"])
+  },
+  DEFAULT_PROPS: {
+    label: null,
+    onChange: null,
+    labelAlignment: "left"
+  },
+  getDefaultProps: function () {
+    return this.DEFAULT_PROPS;
+  },
+  propName: function () {
+    const propName = ___default["default"].find(___default["default"].keys(this.props), function (localPropName) {
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      return !___default["default"].has(this.DEFAULT_PROPS, localPropName);
+    }, this);
+    if (!propName) {
+      throw new PerseusError("Attempted to create a PropCheckBox with no prop!", Errors.InvalidInput);
+    }
+    return propName;
+  },
+  _labelAlignLeft: function () {
+    return this.props.labelAlignment === "left";
+  },
+  render: function () {
+    const propName = this.propName();
+    return /*#__PURE__*/React__namespace.createElement("label", {
+      className: aphrodite.css(styles$h.labeledCheckbox)
+    }, this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      checked: this.props[propName],
+      onChange: this.toggle
+    }), !this._labelAlignLeft() && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, this.props.label));
+  },
+  toggle: function () {
+    const propName = this.propName();
+    const changes = {};
+    changes[propName] = !this.props[propName];
+    this.props.onChange(changes);
+  }
+});
+const styles$h = aphrodite.StyleSheet.create({
+  labeledCheckbox: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
+const truth = () => true;
+
+/* A minor abstraction on top of NumberInput for ranges
+ *
+ */
+class RangeInput extends React__namespace.Component {
+  static propTypes = {
+    value: PropTypes__default["default"].array.isRequired,
+    onChange: PropTypes__default["default"].func.isRequired,
+    placeholder: PropTypes__default["default"].array,
+    checkValidity: PropTypes__default["default"].func
+  };
+  static defaultProps = {
+    placeholder: [null, null]
+  };
+  render() {
+    const value = this.props.value;
+    const checkValidity = this.props.checkValidity || truth;
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: "range-input"
+    }, /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
+      value: value[0],
+      checkValidity: val => checkValidity([val, value[1]])
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onChange.bind(this, 0),
+      placeholder: this.props.placeholder[0]
+    })), /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
+      value: value[1],
+      checkValidity: val => checkValidity([value[0], val])
+      // eslint-disable-next-line react/jsx-no-bind
+      ,
+      onChange: this.onChange.bind(this, 1),
+      placeholder: this.props.placeholder[1]
+    })));
+  }
+  onChange = (i, newVal) => {
+    const value = this.props.value;
+    if (i === 0) {
+      this.props.onChange([newVal, value[1]]);
+    } else {
+      this.props.onChange([value[0], newVal]);
+    }
+  };
+}
+
+var components = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ButtonGroup: ButtonGroup,
+  Graph: Graph,
+  Graphie: Graphie,
+  HUD: HUD,
+  Icon: Icon,
+  InfoTip: InfoTip,
+  InlineIcon: InlineIcon,
+  MathInput: MathInput,
+  MultiButtonGroup: MultiButtonGroup,
+  NumberInput: NumberInput,
+  PropCheckBox: PropCheckBox,
+  RangeInput: RangeInput,
+  SvgImage: SvgImage,
+  TextInput: TextInput,
+  TextListEditor: TextListEditor
+});
+
+/**
+ * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
+ * Otherwise, returns `null`.
+ */
+const getLegacyGrid = (box, backgroundImage) => {
+  const {
+    url,
+    width,
+    height
+  } = backgroundImage ?? {};
+  if (url && typeof url === "string") {
+    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: {
+        position: "absolute",
+        bottom: 0,
+        left: 0
+      }
+    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
+      let {
+        setAssetStatus
+      } = _ref;
+      return /*#__PURE__*/React__namespace.createElement(SvgImage, {
+        src: url,
+        width: width,
+        height: height,
+        scale: scale,
+        responsive: false,
+        setAssetStatus: setAssetStatus,
+        alt: ""
+      });
+    }));
+  }
+  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) {
+  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:
+      {
+        const newCoords = action.itemIndex !== undefined && state.coords && isCollinearTuples(state.coords) ? 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({
+              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)) {
+          return state;
+        }
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        };
+      }
+    case MOVE_LINE:
+      {
+        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?.[action.itemIndex];
+        if (!currentLine) {
+          throw new Error("No line to move");
+        }
+        const change = getChange(currentLine, action.delta, {
+          snapStep,
+          range
+        });
+        const newLine = [snap({
+          snapStep,
+          point: mafs.vec.add(currentLine[0], change)
+        }), snap({
+          snapStep,
+          point: mafs.vec.add(currentLine[1], change)
+        })];
+        const newCoords = setAtIndex({
+          array: state.coords,
+          index: action.itemIndex,
+          newValue: newLine
+        });
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        };
+      }
+    case MOVE_ALL:
+      {
+        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: mafs.vec.add(point, change)
+        }));
+        return {
+          ...state,
+          hasBeenInteractedWith: true,
+          coords: newCoords
+        };
+      }
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(action);
+  }
+}
+const getChange = (coords, delta, constraintOpts) => {
+  const [deltaX, deltaY] = delta;
+  const maxMoves = coords.map(point => maxMove({
+    ...constraintOpts,
+    point
+  }));
+  const minMoves = coords.map(point => minMove({
+    ...constraintOpts,
+    point
+  }));
+  const maxXMove = Math.min(...maxMoves.map(move => move[0]));
+  const maxYMove = Math.min(...maxMoves.map(move => move[1]));
+  const minXMove = Math.max(...minMoves.map(move => move[0]));
+  const minYMove = Math.max(...minMoves.map(move => move[1]));
+  const dx = clamp(deltaX, minXMove, maxXMove);
+  const dy = clamp(deltaY, minYMove, maxYMove);
+  return [dx, dy];
+};
+function snap(_ref) {
+  let {
+    snapStep,
+    point
+  } = _ref;
+  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(_ref2) {
+  let {
+    snapStep,
+    range,
+    point
+  } = _ref2;
+  const [requestedX, requestedY] = point;
+  const [snapX, snapY] = snapStep;
+  const [[minX, maxX], [minY, maxY]] = range;
+  return [clamp(requestedX, minX + snapX, maxX - snapX), clamp(requestedY, minY + snapY, maxY - snapY)];
+}
+
+// Returns the vector from the given point to the top-right corner of the graph
+function maxMove(_ref3) {
+  let {
+    snapStep,
+    range,
+    point
+  } = _ref3;
+  const topRight = bound$1({
+    snapStep,
+    range,
+    point: [Infinity, Infinity]
+  });
+  return mafs.vec.sub(topRight, point);
+}
+
+// Returns the vector from the given point to the bottom-left corner of the
+// graph
+function minMove(_ref4) {
+  let {
+    snapStep,
+    range,
+    point
+  } = _ref4;
+  const bottomLeft = bound$1({
+    snapStep,
+    range,
+    point: [-Infinity, -Infinity]
+  });
+  return mafs.vec.sub(bottomLeft, point);
+}
+function clamp(value, min, max) {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+const coordsOverlap = coords => coords.some((coord, i) => coords.some((c, j) => i !== j && kmath.vector.equal(coord, c)));
+function updateAtIndex(args) {
+  const {
+    array = [],
+    index,
+    update
+  } = args;
+  const newValue = update(array[index]);
+  return setAtIndex({
+    array,
+    index,
+    newValue
+  });
+}
+function setAtIndex(args) {
+  const {
+    array = [],
+    index,
+    newValue
+  } = args;
+  const copy = [...array];
+  copy[index] = newValue;
+  // restoring readonly to array
+  return copy;
+}
+
+function initializeGraphState(params) {
+  const {
+    graph,
+    step,
+    snapStep,
+    range
+  } = params;
+  switch (graph.type) {
+    case "segment":
+      return {
+        type: "segment",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getDefaultSegments({
+          graph,
+          step,
+          range
+        })
+      };
+    case "linear":
+    case "linear-system":
+    case "ray":
+      return {
+        type: graph.type,
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        // Linear and ray graphs have a single tuple of points, while a
+        // linear system has two tuples of points.
+        coords: getLineCoords({
+          graph,
+          range,
+          step
+        })
+      };
+    case "polygon":
+      return {
+        type: "polygon",
+        hasBeenInteractedWith: false,
+        range,
+        snapStep,
+        coords: getPolygonCoords({
+          graph,
+          range,
+          step
+        })
+      };
+    case "angle":
+    case "point":
+    case "circle":
+    case "sinusoid":
+    case "quadratic":
+      throw new Error("Mafs not yet implemented for graph type: " + graph.type);
+    default:
+      throw new wonderStuffCore.UnreachableCaseError(graph);
+  }
+}
+
+// TS v4 doesn't narrow return types, while v5 does.
+// Instead of updating to v5, using generic type to relate input and output types.
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return initialGraph;
   }
-});
-
-const truth = () => true;
-
-/* A minor abstraction on top of NumberInput for ranges
- *
- */
-class RangeInput extends React__namespace.Component {
-  static propTypes = {
-    value: PropTypes__default["default"].array.isRequired,
-    onChange: PropTypes__default["default"].func.isRequired,
-    placeholder: PropTypes__default["default"].array,
-    checkValidity: PropTypes__default["default"].func
-  };
-  static defaultProps = {
-    placeholder: [null, null]
-  };
-  render() {
-    const value = this.props.value;
-    const checkValidity = this.props.checkValidity || truth;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "range-input"
-    }, /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
-      value: value[0],
-      checkValidity: val => checkValidity([val, value[1]])
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onChange.bind(this, 0),
-      placeholder: this.props.placeholder[0]
-    })), /*#__PURE__*/React__namespace.createElement(NumberInput, _extends({}, this.props, {
-      value: value[1],
-      checkValidity: val => checkValidity([value[0], val])
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.onChange.bind(this, 1),
-      placeholder: this.props.placeholder[1]
-    })));
+  switch (true) {
+    // coords: Array of CollinearTuple
+    case state.type === "linear-system" && initialGraph.type === "linear-system":
+    case state.type === "segment" && initialGraph.type === "segment":
+      return {
+        ...initialGraph,
+        coords: state.coords
+      };
+    // coords: CollinearTuple
+    case state.type === "linear" && initialGraph.type === "linear":
+    case state.type === "ray" && initialGraph.type === "ray":
+      return {
+        ...initialGraph,
+        coords: state.coords?.[0]
+      };
+    case state.type === "polygon" && initialGraph.type === "polygon":
+      return {
+        ...initialGraph,
+        coords: state.coords
+      };
+    default:
+      throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
   }
-  onChange = (i, newVal) => {
-    const value = this.props.value;
-    if (i === 0) {
-      this.props.onChange([newVal, value[1]]);
-    } else {
-      this.props.onChange([value[0], newVal]);
+}
+const getDefaultSegments = _ref => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref;
+  const ys = n => {
+    switch (n) {
+      case 2:
+        return [5, -5];
+      case 3:
+        return [5, 0, -5];
+      case 4:
+        return [6, 2, -2, -6];
+      case 5:
+        return [6, 3, 0, -3, -6];
+      case 6:
+        return [5, 3, 1, -1, -3, -5];
+      default:
+        return [5];
     }
   };
-}
+  return ys(graph.numSegments).map(y => {
+    let endpoints = [[-5, y], [5, y]];
+    endpoints = normalizeCoords(endpoints, range);
+    endpoints = normalizePoints(range, step, endpoints);
+    return endpoints;
+  });
+};
+const defaultLinearCoords = [[[0.25, 0.75], [0.75, 0.75]], [[0.25, 0.25], [0.75, 0.25]]];
+const getLineCoords = _ref2 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref2;
+  return (
+    // Return two lines for a linear system, one for a ray or linear
+    graph.coords ?? graph.type === "linear-system" ? defaultLinearCoords.map(collinear => normalizePoints(range, step, collinear)) : [normalizePoints(range, step, defaultLinearCoords[0])]
+  );
+};
+const getPolygonCoords = _ref3 => {
+  let {
+    graph,
+    range,
+    step
+  } = _ref3;
+  let coords = graph.coords;
+  if (coords) {
+    return coords;
+  }
+  const n = graph.numSides || 3;
+  if (n === "unlimited") {
+    coords = [];
+  } else {
+    const angle = 2 * Math.PI / n;
+    const offset = (1 / n - 1 / 2) * Math.PI;
 
-var components = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ButtonGroup: ButtonGroup,
-  Graph: Graph,
-  Graphie: Graphie,
-  HUD: HUD,
-  Icon: Icon,
-  InfoTip: InfoTip,
-  InlineIcon: InlineIcon,
-  MathInput: MathInput,
-  MultiButtonGroup: MultiButtonGroup,
-  NumberInput: NumberInput,
-  PropCheckBox: PropCheckBox,
-  RangeInput: RangeInput,
-  SvgImage: SvgImage,
-  TextInput: TextInput,
-  TextListEditor: TextListEditor
-});
+    // TODO(alex): Generalize this to more than just triangles so that
+    // all polygons have whole number side lengths if snapping to sides
+    const radius = graph.snapTo === "sides" ? Math.sqrt(3) / 3 * 7 : 4;
 
-/**
- * If a graphie URL is provided in `backgroundImage`, will return the rendered graphie background.
- * Otherwise, returns `null`.
- */
-const getLegacyGrid = (box, backgroundImage) => {
-  const {
-    url,
-    width,
-    height
-  } = backgroundImage ?? {};
-  if (url && typeof url === "string") {
-    const scale = box[0] / interactiveSizes$1.defaultBoxSize;
-    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: {
-        position: "absolute",
-        bottom: 0,
-        left: 0
-      }
-    }, /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
-      let {
-        setAssetStatus
-      } = _ref;
-      return /*#__PURE__*/React__namespace.createElement(SvgImage, {
-        src: url,
-        width: width,
-        height: height,
-        scale: scale,
-        responsive: false,
-        setAssetStatus: setAssetStatus,
-        alt: ""
-      });
-    }));
+    // Generate coords of a regular polygon with n sides
+    coords = [...Array(n).keys()].map(i => [radius * Math.cos(i * angle + offset), radius * Math.sin(i * angle + offset)]);
   }
-  return null;
+  coords = normalizeCoords(coords, [[-10, 10], [-10, 10]]);
+  const snapToGrid = !["angles", "sides"].includes(graph.snapTo || "");
+  coords = normalizePoints(range, step, coords, /* noSnap */!snapToGrid);
+  return coords;
 };
 
 const renderGraph = props => {
@@ -29605,6 +29845,11 @@ const renderGraph = props => {
         graphState: state,
         dispatch: dispatch
       });
+    case "polygon":
+      return /*#__PURE__*/React__namespace.createElement(PolygonGraph, {
+        graphState: state,
+        dispatch: dispatch
+      });
     default:
       return new wonderStuffCore.UnreachableCaseError(type);
   }
@@ -29618,8 +29863,8 @@ const MafsGraph = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
   }));
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
-      width: props.backgroundImage?.width ?? width,
-      height: props.backgroundImage?.height ?? height,
+      width,
+      height,
       position: "relative"
     }
   }, legacyGrid, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -41649,7 +41894,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.6.0";
+const libVersion = "20.7.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -44417,6 +44662,153 @@ function getWidgetTypeFromWidgetId(widgetId) {
   return widgetType;
 }
 
+let WidgetType = /*#__PURE__*/function (WidgetType) {
+  WidgetType["Categorizer"] = "categorizer";
+  WidgetType["CSProgram"] = "cs-program";
+  WidgetType["Definition"] = "definition";
+  WidgetType["Dropdown"] = "dropdown";
+  WidgetType["Explanation"] = "explanation";
+  WidgetType["Expression"] = "expression";
+  WidgetType["GradedGroup"] = "graded-group";
+  WidgetType["GradedGroupAnswerBar"] = "graded-group-answer-bar";
+  WidgetType["GradedGroupSet"] = "graded-group-set";
+  WidgetType["Grapher"] = "grapher";
+  WidgetType["Group"] = "group";
+  WidgetType["Iframe"] = "iframe";
+  WidgetType["Image"] = "image";
+  WidgetType["InputNumber"] = "input-number";
+  WidgetType["Interaction"] = "interaction";
+  WidgetType["InteractiveGraph"] = "interactive-graph";
+  WidgetType["InteractiveNumberLine"] = "interactive-number-line";
+  WidgetType["LabelImage"] = "label-image";
+  WidgetType["Matcher"] = "matcher";
+  WidgetType["Matrix"] = "matrix";
+  WidgetType["Measurer"] = "measurer";
+  WidgetType["Molecule"] = "molecule";
+  WidgetType["NumberLine"] = "number-line";
+  WidgetType["NumericInput"] = "numeric-input";
+  WidgetType["Orderer"] = "orderer";
+  WidgetType["Passage"] = "passage";
+  WidgetType["PassageRef"] = "passage-ref";
+  WidgetType["PassageRefTarget"] = "passage-ref-target";
+  WidgetType["Plotter"] = "plotter";
+  WidgetType["Protractor"] = "protractor";
+  WidgetType["PythonProgram"] = "python-program";
+  WidgetType["Radio"] = "radio";
+  WidgetType["Sorter"] = "sorter";
+  WidgetType["Table"] = "table";
+  WidgetType["Unit"] = "unit";
+  WidgetType["Video"] = "video";
+  WidgetType["VideoTranscriptLink"] = "video-transcript-link";
+  return WidgetType;
+}({});
+// These are all the current widgets that require user-input and are supported for automatic scoring
+const QUESTION_WIDGETS = ["numeric-input", "input-number", "radio", "interactive-graph", "interactive-number-line", "categorizer", "plotter", "orderer", "protractor", "matcher", "sorter"];
+
+/**
+ * Regex for widget placeholders in a string.
+ *
+ * First capture group is the widget ID (ex. 'radio 1')
+ * Second capture group is the widget type (ex. "radio)
+ * exec return will look like: ['[[☃ radio 1]]', 'radio 1', 'radio']
+ */
+function getWidgetRegex() {
+  return /\[\[☃ (([a-z-]+) \d+)\]\]/g;
+}
+
+/**
+ * Add a widget placeholder using the provided widget type and instance number.
+ * ex. addWidget(WidgetType.Radio, 1) => "[[☃ radio 1]]"
+ *
+ * @param {WidgetType} widgetType
+ * @param {number} instance
+ * @returns {string}
+ */
+function addWidget(widgetType, instance) {
+  return `[[☃ ${widgetType} ${String(instance)}]]`;
+}
+
+/**
+ * Extract all widget IDs, which includes the widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1', 'categorizor 2']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns {Array<WidgetId>} widgets
+ */
+function getAllWidgetIds(content) {
+  const widgets = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    widgets.push(match[1]);
+    match = localWidgetRegex.exec(content);
+  }
+  return widgets;
+}
+
+/**
+ * Check if a specific widget is an actual widget type using its name.
+ * The widget name should include a widget type, without an instance number,
+ * as a string. ex. 'radio'
+ *
+ * @param {string} widgetName
+ * @returns {boolean}
+ */
+function isWidgetType(widgetName) {
+  return Object.values(WidgetType).includes(widgetName);
+}
+
+/**
+ * Extract all widget types from a Perseus JSON content string.
+ * This does not include the instance number and prevents duplicates.
+ * example output: ['radio', 'categorizer']
+ *
+ * @param {string} content
+ * @returns {Array<WidgetId>}
+ */
+function getAllWidgetTypes(content) {
+  const widgetTypes = [];
+  const localWidgetRegex = getWidgetRegex();
+  let match = localWidgetRegex.exec(content);
+  while (match !== null) {
+    const matchType = match[2];
+    if (!widgetTypes.includes(matchType) && isWidgetType(matchType)) {
+      widgetTypes.push(matchType);
+    }
+    match = localWidgetRegex.exec(content);
+  }
+  return widgetTypes;
+}
+
+/**
+ * Check if a specific widget is a question widget type using its ID.
+ * The widget ID includes the widget type and the instance number.
+ *
+ * @param {WidgetId} widgetId
+ * @returns {boolean}
+ */
+function isQuestionWidgetType(widgetId) {
+  return QUESTION_WIDGETS.includes(widgetId.split(" ")[0]);
+}
+
+/**
+ * Extract the widget IDs of all widgets considered question widgets. Widget IDs
+ * include widget type and instance number.
+ * example output: ['radio 1', 'categorizer 1']
+ *
+ * Content should contain Perseus widget placeholders,
+ * which look like: '[[☃ radio 1]]'.
+ *
+ * @param {string} content
+ * @returns Array<WidgetId>
+ */
+function getQuestionWidgetIds(content) {
+  return getAllWidgetIds(content).filter(isQuestionWidgetType);
+}
+
 const EditorJsonify = {
   serialize: function () {
     // Omit props that get passed to all widgets
@@ -44458,6 +44850,7 @@ exports.PerseusError = PerseusError;
 exports.PerseusExpressionAnswerFormConsidered = PerseusExpressionAnswerFormConsidered;
 exports.PerseusMarkdown = PerseusMarkdown;
 exports.PlotterWidget = Plotter$1;
+exports.QUESTION_WIDGETS = QUESTION_WIDGETS;
 exports.Radio = Radio;
 exports.Renderer = Renderer;
 exports.ServerItemRenderer = ref;
@@ -44466,7 +44859,9 @@ exports.TableWidget = Table$1;
 exports.Util = Util;
 exports.WIDGET_PROP_DENYLIST = denylist;
 exports.WidgetJsonifyDeprecated = WidgetJsonifyDeprecated;
+exports.WidgetType = WidgetType;
 exports.Widgets = widgets$1;
+exports.addWidget = addWidget;
 exports.apiVersion = apiVersion;
 exports.buildEmptyItemTreeForShape = buildEmptyItemTreeForShape;
 exports.buildMapper = buildMapper;
@@ -44476,7 +44871,10 @@ exports.convertWidgetNameToEnum = convertWidgetNameToEnum;
 exports.displaySigFigs = displaySigFigs;
 exports.generateTestPerseusItem = generateTestPerseusItem;
 exports.genericPerseusItemData = genericPerseusItemData;
+exports.getAllWidgetIds = getAllWidgetIds;
+exports.getAllWidgetTypes = getAllWidgetTypes;
 exports.getAnswersFromWidgets = getAnswersFromWidgets;
+exports.getQuestionWidgetIds = getQuestionWidgetIds;
 exports.getWidgetTypeFromWidgetId = getWidgetTypeFromWidgetId;
 exports.globalConstants = globalConstants;
 exports.globalStyles = globalStyles;