@khanacademy/perseus 40.0.0 → 41.1.0

package/dist/es/index.js

@@ -32,7 +32,7 @@ import { OptionItem, SingleSelect, MultiSelect } from '@khanacademy/wonder-block
 import caretDown from '@phosphor-icons/core/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
-import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, useTransformContext, Text as Text$1, Mafs } from 'mafs';
+import { vec, Coordinates, Ellipse, Plot as Plot$3, Line as Line$4, Point as Point$2, Polygon, Text as Text$1, useTransformContext, Mafs } from 'mafs';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { useDrag } from '@use-gesture/react';
@@ -238,7 +238,15 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   addPoint: "Add Point",
   removePoint: "Remove Point",
-  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph"
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
+  srPointAtCoordinates: ({
+    x,
+    y
+  }) => `Point at ${x} comma ${y}`,
+  srInteractiveElements: ({
+    elements
+  }) => `Interactive elements: ${elements}`,
+  srNoInteractiveElements: "No interactive elements"
 };
 
 /**
@@ -246,11 +254,13 @@ const mockStrings = {
  * used inside the Perseus package.
  *
  */
-// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
-const PerseusI18nContext = /*#__PURE__*/React.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? {
+const mockPerseusI18nContext = {
   strings: mockStrings,
   locale: "en"
-} :
+};
+
+// @ts-expect-error - TS2322 - Type 'Context<{ strings: {}; locale: string; }>' is not assignable to type 'Context<I18nContextType>'.
+const PerseusI18nContext = /*#__PURE__*/React.createContext(process.env.NODE_ENV === "test" || process.env.STORYBOOK ? mockPerseusI18nContext :
 // We want to return null here, not an empty object, so that we
 // are will throw an error when attempting to access the
 // undefined locale or strings, making it easier to debug.
@@ -531,7 +541,7 @@ class InnerMathInput extends React.Component {
           closeButtonVisible: true,
           style: styles$E.popoverContent
         }, /*#__PURE__*/React.createElement(DesktopKeypad, _extends({
-          onAnalyticsEvent: this.props.analytics.onAnalyticsEvent,
+          onAnalyticsEvent: this.props.onAnalyticsEvent,
           extraKeys: this.props.extraKeys,
           onClickKey: this.handleKeypadPress,
           cursorContext: this.state.cursorContext,
@@ -705,6 +715,9 @@ const getDependencies = () => {
 const DependenciesContext = /*#__PURE__*/React.createContext({
   analytics: {
     onAnalyticsEvent: async () => {}
+  },
+  useVideo: () => {
+    throw new Error("useVideo dependency not provided in Perseus dependencies");
   }
 });
 
@@ -958,7 +971,7 @@ class TextListEditor extends React.Component {
 }
 TextListEditor.propTypes = {
   options: PropTypes.array,
-  layout: PropTypes.string,
+  layout: PropTypes.oneOf(["horizontal", "vertical"]),
   onChange: PropTypes.func.isRequired
 };
 TextListEditor.defaultProps = {
@@ -966,6 +979,8 @@ TextListEditor.defaultProps = {
   layout: "horizontal"
 };
 
+const EMPTY_ARRAY = [];
+
 /**
  * Stub Tag Editor.
  *
@@ -979,7 +994,6 @@ TextListEditor.defaultProps = {
  * It also gives a nicer interface for the group metadata editor
  * in local demo mode.
  */
-const EMPTY_ARRAY = [];
 class StubTagEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", null, this.props.showTitle && /*#__PURE__*/React.createElement("div", {
@@ -2408,7 +2422,7 @@ class Expression extends React.Component {
     }, cb);
   }
   render() {
-    var _this$props$keypadCon, _this$props$analytics2;
+    var _this$props$keypadCon, _this$props$analytics2, _this$props$analytics3;
     if (this.props.apiOptions.customKeypad) {
       return /*#__PURE__*/React.createElement(View, {
         className: css(styles$D.mobileLabelInputWrapper)
@@ -2481,9 +2495,7 @@ class Expression extends React.Component {
       hasError: this.state.showErrorStyle,
       ariaLabel: this.props.ariaLabel || this.context.strings.mathInputBox,
       extraKeys: (_this$props$keypadCon = this.props.keypadConfiguration) == null ? void 0 : _this$props$keypadCon.extraKeys,
-      analytics: (_this$props$analytics2 = this.props.analytics) != null ? _this$props$analytics2 : {
-        onAnalyticsEvent: async function () {}
-      }
+      onAnalyticsEvent: (_this$props$analytics2 = (_this$props$analytics3 = this.props.analytics) == null ? void 0 : _this$props$analytics3.onAnalyticsEvent) != null ? _this$props$analytics2 : async function () {}
     }))));
   }
 }
@@ -14800,11 +14812,7 @@ _.extend(MovableLine$4.prototype, {
  * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
  * inline like Font Awesome did.
  *
- * If you are looking for an icon that we've used before you should look in
- * webapp's `icon-paths.js` which is a reference file for all the SVG paths
- * that we've used. You'll need to copy the object from that file into
- * whichever file you're using the icon and explicitly pass it in to the
- * <InlineIcon/> React component.
+ * You can refer to `icon-paths.ts` for all available SVG icons.
  *
  * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
  * be defined differently. At some point we might want to add these attributes
@@ -14812,13 +14820,14 @@ _.extend(MovableLine$4.prototype, {
  *
  * Sample usage:
  *
- *   const editIcon = {
+ * ```
+ * const editIcon = {
  *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
  *      width: 100,
  *      height: 78.912,
- *   };
- *   <InlineIcon {...editIcon} />
- *
+ * };
+ * <InlineIcon {...editIcon} />
+ * ```
  */
 const InlineIcon = ({
   path,
@@ -14841,11 +14850,7 @@ const InlineIcon = ({
 }));
 
 /**
- * Icon paths to be used with `inline-icon.jsx`.
- *
- * These paths are taken directly from webapp's `icon-paths.js`. Unlike the
- * webapp equivalent, these can be directly required within Perseus files since
- * this is all bundled together anyway.
+ * Icon paths to be used with `inline-icon.tsx` and `icon.tsx`.
  */
 
 const iconCheck = {
@@ -16791,6 +16796,15 @@ const Status = {
   LOADED: "loaded",
   FAILED: "failed"
 };
+/**
+ * Component to display an image (or other React components) while the desired
+ * image is loading.
+ *
+ * Derived from
+ * https://github.com/hzdg/react-imageloader/blob/master/src/index.js
+ * to better suit our environment/build tools. Additionally, this one does
+ * not introduce a wrapper element, which makes styling easier.
+ */
 class ImageLoader extends React.Component {
   constructor(props) {
     super(props);
@@ -20920,7 +20934,7 @@ const Triangle = props => {
       width: 0,
       position: "absolute",
       left: props.left,
-      top: props["top"],
+      top: props.top,
       borderLeft: borderLeft,
       borderRight: borderRight,
       borderTop: borderTop,
@@ -21001,6 +21015,47 @@ const HORIZONTAL_ALIGNMNENTS = {
     arrowLeft: arrowSize => -arrowSize - 2
   }
 };
+/**
+ * DEPRECATED! Use Wonder Blocks tooltip instead.
+ *
+ * A generic tooltip library for React.js
+ *
+ * ```
+ * import Tooltip from "./tooltip";
+ * <Tooltip
+ *     className="class-for-tooltip-contents"
+ *     horizontalPosition={HoriziontalDirection.Left}
+ *     horizontalAlign={HoriziontalDirection.Left}
+ *     verticalPosition={VerticalDirection.Top}
+ *     arrowSize={10} // arrow size in pixels
+ *     borderColor="#ccc" // color of the border for the tooltip
+ *     show={true} // whether the tooltip should currently be visible
+ *     targetContainerStyle={targetContainerStyle}
+ * >
+ *     <TargetElementOfTheTooltip />
+ *     <TooltipContents1 />
+ *     <TooltipContents2 />
+ * </Tooltip>
+ * ```
+ *
+ * To show/hide the tooltip, the parent component should call the
+ * `.show()` and `.hide()` methods of the tooltip when appropriate.
+ * (These are usually set up as handlers of events on the target element.)
+ *
+ * Notes:
+ *     `className` should not specify a border; that is handled by `borderColor`
+ *     so that the arrow and tooltip match
+ *
+ * ```
+ *          __,,--``\\
+ *  _,,-''``         \\     ,
+ * '----------_.------'-.___|\__
+ *    _.--''``    `)__   )__   @\__
+ *   (  .. ''---/___,,E/__,E'------`
+ *    `-''`''
+ * Here be dragons.
+ * ```
+ */
 class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
@@ -21227,10 +21282,7 @@ class InputWithExamples extends React.Component {
       return "- " + example;
     }).join("\n");
     const showExamples = this.props.shouldShowExamples && this.state.showExamples;
-    return /*#__PURE__*/React.createElement(Tooltip
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "tooltip",
+    return /*#__PURE__*/React.createElement(Tooltip, {
       className: "perseus-formats-tooltip preview-measure",
       horizontalPosition: HorizontalDirection.Left,
       horizontalAlign: HorizontalDirection.Left,
@@ -24747,6 +24799,37 @@ const BASE_ICON_SIZE = 10;
 // If you pass in an object you need to specify an SVG path to
 // render along with the width and height of the path (to ensure
 // that it gets scaled correctly).
+/**
+ * An SVG Icon
+ *
+ * This component is designed to take in SVG paths and render icons based upon
+ * them. If you are looking for an icon that we've used before you should look
+ * in `icon-paths.js` which is a reference file for all the SVG paths that
+ * we've used. You'll need to copy the object from that file into whichever
+ * file you're using the icon and explicitly pass it in to the <Icon/> React
+ * component.
+ *
+ * Sample usage:
+ *
+ * ```
+ * const dropdownIcon = `M5,6L0,0L10,0`;
+ * <Icon icon={dropdownIcon} />
+ * ```
+ *
+ * Or:
+ *
+ * ```
+ *   const dropdownIcon = {
+ *       path: `M5,6L0,0L10,0`,
+ *       height: 10,
+ *       width: 10,
+ *   };
+ *   <Icon icon={dropdownIcon} size={20} />
+ * ```
+ *
+ * If you want to add an entirely new icon please read the note inside
+ * the `icon-paths.ts` file.
+ */
 class Icon extends React.Component {
   render() {
     const {
@@ -24969,7 +25052,7 @@ function ChoiceInner(props) {
   } = usePerseusI18n();
   const letter = getChoiceLetter(pos, strings);
   if (!showCorrectness) {
-    return letter;
+    return /*#__PURE__*/React.createElement("span", null, letter);
   }
   if (correct) {
     return /*#__PURE__*/React.createElement(InlineIcon, _extends({}, iconCheck, {
@@ -25039,7 +25122,6 @@ const ChoiceIcon = function ChoiceIcon(props) {
     visible: focused || hovered,
     multipleSelect: multipleSelect
   }, /*#__PURE__*/React.createElement("div", {
-    // @ts-expect-error - TS2322 - Type '{ backgroundColor: string | null | undefined; borderColor: string; color: string; borderRadius: number; }' is not assignable to type 'Properties<string | number, string & {}>'.
     style: dynamicStyles,
     "data-testid": "choice-icon__library-choice-icon",
     className: css(styles$s.circle, showCorrectness && correct && styles$s.circleCorrect, showCorrectness && !correct && styles$s.circleIncorrect, showCorrectness && !correct && (checked || previouslyAnswered) && styles$s.circleIncorrectAnswered)
@@ -30873,6 +30955,10 @@ const HiddenIcon = () => /*#__PURE__*/React.createElement("svg", {
 }, /*#__PURE__*/React.createElement("path", {
   d: "M0 0h24v24H0z"
 }))));
+/**
+ * A "heads-up display" (HUD) indicator that includes a short message (usually
+ * used for linting errors). The indicator can be disabled.
+ */
 const HUD = ({
   message,
   enabled,
@@ -31093,18 +31179,24 @@ const {
 const toNumericString = KhanMath.toNumericString;
 const getNumericFormat = KhanMath.getNumericFormat;
 
-/* An input box that accepts only numeric strings
+/**
+ * An input box that accepts only numeric strings
  *
- * Calls onChange(value, format) for valid numbers.
- * Reverts to the current value onBlur or on [ENTER],
+ * Calls `onChange(value, format)` for valid numbers.
+ *
+ * Reverts to the current value `onBlur` or on [ENTER],
  *   but maintains the format (i.e. 3/2, 1 1/2, 150%)
- * Accepts empty input and sends it to onChange as null
- *   if no numeric placeholder is set.
- * If given a checkValidity function, will turn
- *   the background/outline red when invalid
- * If useArrowKeys is set to true, up/down arrows will
- *   increment/decrement integers
- * Optionally takes a size ("mini", "small", "normal")
+ *
+ * Accepts empty input and sends it to `onChange` as `null` if no numeric
+ * placeholder is set.
+ *
+ * If given a `checkValidity` function, will turn the background/outline red
+ * when invalid.
+ *
+ * If `useArrowKeys` is set to `true`, up/down arrows will increment/decrement
+ * integers.
+ *
+ * Optionally takes a `size` (`"mini"`, `"small"`,` `"normal"`)
  */
 class NumberInput extends React.Component {
   constructor(...args) {
@@ -31263,7 +31355,7 @@ NumberInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   onFormatChange: PropTypes.func,
   checkValidity: PropTypes.func,
-  size: PropTypes.string,
+  size: PropTypes.oneOf(["mini", "small", "normal"]),
   label: PropTypes.oneOf(["put your labels outside your inputs!"])
 };
 NumberInput.defaultProps = {
@@ -31277,8 +31369,8 @@ NumberInput.defaultProps = {
 
 const truth = () => true;
 
-/* A minor abstraction on top of NumberInput for ranges
- *
+/**
+ * A minor abstraction on top of `NumberInput` for ranges
  */
 class RangeInput extends React.Component {
   constructor(...args) {
@@ -32129,6 +32221,327 @@ function reinitialize(params) {
   };
 }
 
+/**
+ * Wrapper with Mafs transform styles for SVG elements.
+ * Scales and translates the SVG element to match the Mafs view.
+ * Use if you do not need/want to use the hook in `use-transform.ts`.
+ */
+const MafsCssTransformWrapper = ({
+  children
+}) => /*#__PURE__*/React.createElement("g", {
+  style: {
+    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
+  }
+}, children);
+
+const _excluded$1 = ["children"];
+const TextLabel = _ref => {
+  let {
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
+    size: 16,
+    svgTextProps: {
+      filter: "url(#background)",
+      fontWeight: "bold"
+    }
+  }, rest), children);
+};
+const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
+  id: "background",
+  x: "-5%",
+  width: "110%",
+  y: "0%",
+  height: "100%"
+}, /*#__PURE__*/React__default.createElement("feFlood", {
+  floodColor: "#FFF",
+  floodOpacity: "0.64"
+}), /*#__PURE__*/React__default.createElement("feComposite", {
+  operator: "over",
+  in: "SourceGraphic"
+})));
+
+const PolygonAngle = ({
+  centerPoint,
+  endPoints,
+  range,
+  polygonLines,
+  showAngles,
+  snapTo
+}) => {
+  const [centerX, centerY] = centerPoint;
+  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
+  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
+  const radius = 0.3;
+  const a = vec.dist(centerPoint, endPoints[0]);
+  const b = vec.dist(centerPoint, endPoints[1]);
+  const c = vec.dist(endPoints[0], endPoints[1]);
+
+  // Law of cosines
+  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Fourth point that would create a rhomboid
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
+  if (!showAngles) {
+    return isRightPolygonAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+      start: [x1, y1],
+      vertex: [x2, y2],
+      end: [x3, y3]
+    }) : null;
+  }
+
+  // Midpoint betwen ends of arc
+  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
+  const largeArcFlag = isOutside ? 1 : 0;
+  const sweepFlag = isOutside ? 1 : 0;
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+  let angleInDegrees = angle * (180 / Math.PI);
+  // If we have triggered "largArcFlag", the angle should be greater than 180
+  if (isOutside) {
+    angleInDegrees = 360 - angleInDegrees;
+  }
+
+  // Only want to show whole numbers when in angles mode
+  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(snapTo === "angles" ? 0 : 1));
+  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3]
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc
+  }), /*#__PURE__*/React.createElement(TextLabel, {
+    x: x3,
+    y: y3,
+    attach: y3 - centerY > 0 ? "s" : "n",
+    attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
+  }, angleLabel, "\xB0"));
+};
+const Angle = ({
+  vertex,
+  coords,
+  showAngles,
+  allowReflexAngles,
+  range
+}) => {
+  // Check if the points are clockwise or not, depending on whether we allow reflex angles
+  const areClockwise = clockwise$1([...coords, vertex]);
+  const shouldReverseCoords = areClockwise && !allowReflexAngles;
+
+  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
+  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
+
+  // Calculate the angles between the two points
+  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
+  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
+  const angle = (startAngle + 360 - endAngle) % 360;
+
+  // Check if the angle is reflexive
+  const isReflexive = angle > 180;
+
+  // Break out the necessary points for the arc calculation
+  const [centerX, centerY] = vertex;
+  const [point1, point2] = clockwiseCoords;
+  const [startX, startY] = point1;
+  const [endX, endY] = point2;
+  const a = vec.dist(vertex, point1);
+  const b = vec.dist(vertex, point2);
+
+  // Set the radius of the arc
+  const radius = 2;
+
+  // Calculate the end points of the arc
+  const y1 = centerY + (startY - centerY) / a * radius;
+  const x2 = centerX + (endX - centerX) / b * radius;
+  const x1 = centerX + (startX - centerX) / a * radius;
+  const y2 = centerY + (endY - centerY) / b * radius;
+
+  // Used to calculate the inside of the angle and to create square
+  const [x3, y3] = vec.add(vertex, vec.add(vec.sub([x1, y1], vertex), vec.sub([x2, y2], vertex)));
+
+  // Determine whether the arc should be drawn outside the angle
+  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
+
+  // Determine the flags for the arc
+  // If the angle is outside OR reflexive, we want to draw a large arc
+  // If the angle is outside AND reflexive, we want to sweep the arc
+  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
+  const sweepFlag = isOutside && isReflexive ? 1 : 0;
+
+  // Create the SVG path for the arc
+  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
+
+  // We only ever want to show whole angles
+  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
+
+  // Calculate the text position based on the angle and whether we allow reflex angles
+  // Let's try the angle bisector method to find the midpoint of the arc
+  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "background",
+    x: "-5%",
+    width: "110%",
+    y: "0%",
+    height: "100%"
+  }, /*#__PURE__*/React.createElement("feFlood", {
+    floodColor: "#FFF",
+    floodOpacity: "0.5"
+  }), /*#__PURE__*/React.createElement("feComposite", {
+    operator: "over",
+    in: "SourceGraphic"
+  }))), isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
+    start: [x1, y1],
+    vertex: [x2, y2],
+    end: [x3, y3],
+    className: "arc-right-angle"
+  }) : /*#__PURE__*/React.createElement(Arc, {
+    arc: arc,
+    className: "angle-arc"
+  }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
+    x: textX,
+    y: textY,
+    color: color.blue
+  }, angleLabel, "\xB0"));
+};
+
+/**
+ * This is broken out into its own component so that it can be used for an early return
+ * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
+ */
+const RightAngleSquare = ({
+  start: [x1, y1],
+  vertex: [x2, y2],
+  end: [x3, y3],
+  className
+}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+  d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
+  strokeWidth: 0.02,
+  fill: "none",
+  className: className
+}));
+
+// We're conditionally adding the class name here so that we can style the arc differently
+// based on whether it's an angle or a polygon angle
+const Arc = ({
+  arc,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
+    d: arc,
+    strokeWidth: 0.02,
+    fill: "none",
+    className: className
+  }));
+};
+const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
+const isRightAngle = angle => Math.round(angle) === 90;
+
+/**
+ * Determines if an angle is an inside (false) or outside (true) angle.
+ * They way, we know to flip the `largeArc` and `sweepArc` flags.
+ * Uses the priciple that a ray from a point inside a polygon will intersect
+ * with an odd number of lines, while a ray from a point outside the polygon
+ * will intersect with an even number of lines.
+ * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
+ */
+const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
+  // Create a ray from the midpoint (inside angle) to the edge of the range
+  const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
+  let lineIntersectionCount = 0;
+  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
+
+  // If the number of intersections is even, the angle is inside the polygon
+  return !isEven(lineIntersectionCount);
+};
+const isEven = n => n % 2 === 0;
+
+// This function calculates the bisector point of an angle formed by two points
+// and a vertex. It is used to position the angle label so that it is always
+// outside the arc at the exact midpoint of the angle.
+// Reflex angles make use of polar coordinates to determine the correct direction
+function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
+  const [originX, originY] = vertex;
+  const [x1, y1] = point1;
+  const [x2, y2] = point2;
+
+  // Convert the Cartesian Coordinates to vectors
+  const vectorA = [x1 - originX, y1 - originY];
+  const vectorB = [x2 - originX, y2 - originY];
+
+  // Calculate the average angle of the vectors
+  // so that we can point the bisector in the correct direction using polar coordinates
+  const angleA = Math.atan2(vectorA[1], vectorA[0]);
+  const angleB = Math.atan2(vectorB[1], vectorB[0]);
+
+  // Calculate the average of these two angles
+  let averageAngle = (angleA + angleB) / 2;
+  const angleRadians = Math.abs(angleA - angleB);
+
+  // Adjust the average angle to point in the correct direction
+  // and to account for reflex angles and a bug with 180 degrees
+  // that occurs due to our angleOffsetDegrees option in the graph
+  if (allowReflex) {
+    // If the resulting angles are less than 180 degrees,
+    // or if the user has flipped the points on the interactive element
+    // ensure that we have the correct direction for the reflex angle
+    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
+      averageAngle += Math.PI; // Add 180 degrees
+    }
+  } else {
+    // If the resulting angles are greater than 180 degrees, adjust
+    // to get the correct angle, as we already know that the angle is not reflexive
+    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
+    if (angleRadians > Math.PI) {
+      averageAngle -= Math.PI; // Subract 180 degrees
+    }
+  }
+
+  // Convert the average angle back to Cartesian coordinates
+  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
+
+  // Calculate the magnitude of the sum to normalize it
+  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
+  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
+
+  // Calculate the initial distance of the bisector direction from the origin
+  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
+
+  // Determine the minimum radius to ensure that the text is always outside the arc
+  const requiredDistance = arcRadius * 1.75;
+  let radius = requiredDistance / initialDistance;
+
+  // Apply radius only if the initial distance is less than required
+  if (initialDistance >= requiredDistance) {
+    radius = 1; // Use the unit vector as is
+  }
+
+  // Scale the bisector direction by the radius
+  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
+
+  // Add the vertex to the bisector point to get the final position
+  // to ensure that the angle label moves with the interactive element
+  const scaledBisector = vec.add(bisectorPoint, vertex);
+  return scaledBisector;
+}
+
 /**
  * 44 is touch best practice and AAA compliant for WCAG
  * https://www.w3.org/WAI/WCAG21/Understanding/target-size.html
@@ -32334,6 +32747,14 @@ function range(min, max, step = 1) {
   return result;
 }
 
+function srFormatNumber(a, locale) {
+  // adding zero here converts negative zero to positive zero.
+  return (0 + a).toLocaleString(locale, {
+    maximumFractionDigits: 3,
+    useGrouping: false // no thousands separators
+  });
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -32448,6 +32869,10 @@ function useControlPoint(params) {
     onBlur = noop$1,
     forwardedRef = noop$1
   } = params;
+  const {
+    strings,
+    locale
+  } = usePerseusI18n();
   const [focused, setFocused] = useState(false);
   const focusableHandleRef = useRef(null);
   useDraggable({
@@ -32473,6 +32898,15 @@ function useControlPoint(params) {
     className: "movable-point__focusable-handle",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
     ref: focusableHandleRef,
+    role: "button",
+    "aria-label": strings.srPointAtCoordinates({
+      x: srFormatNumber(point[X], locale),
+      y: srFormatNumber(point[Y], locale)
+    })
+    // aria-live="assertive" causes the new location of the point to be
+    // announced immediately on move.
+    ,
+    "aria-live": "assertive",
     onFocus: event => {
       onFocus(event);
       setFocused(true);
@@ -32653,25 +33087,338 @@ function trimRange(range, graphDimensionsInPixels) {
   return inset([graphUnitsToTrimX, graphUnitsToTrimY], range);
 }
 
-const SegmentGraph = props => {
+const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
   const {
-    dispatch
+    visiblePoint,
+    focusableHandle
+  } = useControlPoint(_extends({}, props, {
+    forwardedRef: pointRef
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle, visiblePoint);
+});
+
+function renderAngleGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(AngleGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+function AngleGraph(props) {
+  const {
+    dispatch,
+    graphState
   } = props;
   const {
-    coords: segments
-  } = props.graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(MovableLine, {
-    key: i,
-    points: segment,
-    onMoveLine: delta => {
-      dispatch(actions.segment.moveLine(i, delta));
-    },
-    onMovePoint: (endpointIndex, destination) => {
-      dispatch(actions.segment.movePointInFigure(i, endpointIndex, destination));
+    graphDimensionsInPixels
+  } = useGraphConfig();
+  const {
+    coords,
+    showAngles,
+    range,
+    allowReflexAngles,
+    snapDegrees
+  } = graphState;
+
+  // Break the coords into the two end points and the center point
+  const endPoints = [coords[0], coords[2]];
+  const centerPoint = coords[1];
+
+  // Convert the vectors to pixels for rendering the svg lines
+  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
+  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
+
+  // Create the SVG lines for the angle
+  const svgLines = linePixelCoords.map(([startPtPx, endPtPx], i) => {
+    const trimmedRange = trimRange(range, graphDimensionsInPixels);
+    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
+    return /*#__PURE__*/React.createElement("g", {
+      key: `line-${i}`
+    }, /*#__PURE__*/React.createElement(SVGLine, {
+      start: startPtPx,
+      end: endPtPx,
+      style: {
+        stroke: "var(--movable-line-stroke-color)",
+        strokeWidth: "var(--movable-line-stroke-weight)"
+      }
+    }), /*#__PURE__*/React.createElement(Vector, {
+      tail: angleLines[i][1],
+      tip: endExtend,
+      color: "var(--movable-line-stroke-color)"
+    }));
+  });
+
+  // Create the angle indicator parameters
+  const angleParams = {
+    vertex: centerPoint,
+    coords: endPoints,
+    allowReflexAngles: allowReflexAngles || false,
+    // Whether to allow reflex angles or not
+    snapDegrees: snapDegrees || 1,
+    // The multiple of degrees to snap to
+    range: range,
+    showAngles: showAngles || false // Whether to show the angle or not
+  };
+
+  // Render the lines, angle, and then movable points
+  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[1],
+    constrain: p => p,
+    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[0],
+    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: coords[2],
+    constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
+    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
+  }));
+}
+const positiveX = [1, 0];
+const negativeX = [-1, 0];
+const positiveY = [0, 1];
+const negativeY = [0, -1];
+function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
+  var _findIntersectionOfRa, _findIntersectionOfRa2, _findIntersectionOfRa3, _findIntersectionOfRa4;
+  const currentAngle = calculateAngleInDegrees(vec.sub(sidePoint, vertex));
+
+  // Find the rays that start at the current point and point up, down, left
+  // and right.
+  const leftRay = [sidePoint, vec.add(sidePoint, negativeX)];
+  const rightRay = [sidePoint, vec.add(sidePoint, positiveX)];
+  const upRay = [sidePoint, vec.add(sidePoint, positiveY)];
+  const downRay = [sidePoint, vec.add(sidePoint, negativeY)];
+
+  // find the angles that lie one snap step clockwise and counter-clockwise
+  // from the current angle. These are the angles to which the side can be
+  // moved.
+  const oneStepCounterClockwise = currentAngle + snapDegrees;
+  const oneStepClockwise = currentAngle - snapDegrees;
+
+  // find the rays that start from the vertex and point in the direction of
+  // the angles we just computed.
+  const counterClockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepCounterClockwise))];
+  const clockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepClockwise))];
+
+  // find the intersections of those rays with the horizontal and vertical
+  // rays extending from the sidePoint. These intersections are the points to
+  // which sidePoint can move that will result in a rotation of `snapDegrees`.
+  const left = (_findIntersectionOfRa = findIntersectionOfRays(leftRay, counterClockwiseRay)) != null ? _findIntersectionOfRa : findIntersectionOfRays(leftRay, clockwiseRay);
+  const right = (_findIntersectionOfRa2 = findIntersectionOfRays(rightRay, counterClockwiseRay)) != null ? _findIntersectionOfRa2 : findIntersectionOfRays(rightRay, clockwiseRay);
+  const up = (_findIntersectionOfRa3 = findIntersectionOfRays(upRay, counterClockwiseRay)) != null ? _findIntersectionOfRa3 : findIntersectionOfRays(upRay, clockwiseRay);
+  const down = (_findIntersectionOfRa4 = findIntersectionOfRays(downRay, counterClockwiseRay)) != null ? _findIntersectionOfRa4 : findIntersectionOfRays(downRay, clockwiseRay);
+  return {
+    up: up != null ? up : sidePoint,
+    down: down != null ? down : sidePoint,
+    left: left != null ? left : sidePoint,
+    right: right != null ? right : sidePoint
+  };
+}
+
+function getGradableGraph(state, initialGraph) {
+  if (!state.hasBeenInteractedWith) {
+    return _extends({}, initialGraph);
+  }
+  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "segment" && initialGraph.type === "segment") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "linear" && initialGraph.type === "linear") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "ray" && initialGraph.type === "ray") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "polygon" && initialGraph.type === "polygon") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "point" && initialGraph.type === "point") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "circle" && initialGraph.type === "circle") {
+    return _extends({}, initialGraph, {
+      center: state.center,
+      radius: getRadius(state)
+    });
+  }
+  if (state.type === "quadratic" && initialGraph.type === "quadratic") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  if (state.type === "sinusoid" && initialGraph.type === "sinusoid") {
+    return _extends({}, initialGraph, {
+      coords: state.coords
+    });
+  }
+  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$1([state.coords[0], state.coords[2], state.coords[1]]);
+    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
+    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
+    return _extends({}, initialGraph, {
+      coords,
+      allowReflexAngles: state.allowReflexAngles
+    });
+  }
+  if (state.type === "none" && initialGraph.type === "none") {
+    return {
+      type: "none"
+    };
+  }
+  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
+}
+
+/**
+ * determine radius of a circle graph
+ *
+ * @param graph - the graph object containing the circle
+ * @returns the radius of the circle
+ */
+function getRadius(graph) {
+  const [centerX, centerY] = graph.center;
+  const [edgeX, edgeY] = graph.radiusPoint;
+  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
+}
+
+function renderCircleGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(CircleGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+function CircleGraph(props) {
+  const {
+    dispatch,
+    graphState
+  } = props;
+  const {
+    center,
+    radiusPoint
+  } = graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
+    center: center,
+    radius: getRadius(graphState),
+    onMove: c => dispatch(actions.circle.moveCenter(c))
+  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
+    point: radiusPoint,
+    cursor: "ew-resize",
+    onMove: newRadiusPoint => {
+      dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
     }
-  })));
-};
+  }));
+}
+function MovableCircle(props) {
+  const {
+    center,
+    radius,
+    onMove
+  } = props;
+  const {
+    snapStep,
+    disableKeyboardInteraction
+  } = useGraphConfig();
+  const draggableRef = useRef(null);
+  const {
+    dragging
+  } = useDraggable({
+    gestureTarget: draggableRef,
+    point: center,
+    onMove,
+    constrainKeyboardMovement: p => snap(snapStep, p)
+  });
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
+  return /*#__PURE__*/React.createElement("g", {
+    ref: draggableRef,
+    tabIndex: disableKeyboardInteraction ? -1 : 0,
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+  }, /*#__PURE__*/React.createElement("ellipse", {
+    className: "focus-ring",
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X] + 3,
+    ry: radiiPx[Y] + 3
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    className: "circle",
+    cx: centerPx[X],
+    cy: centerPx[Y],
+    rx: radiiPx[X],
+    ry: radiiPx[Y]
+  }), /*#__PURE__*/React.createElement(DragHandle, {
+    center: center
+  }));
+}
+const dragHandleDimensions = [24, 14];
+const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
+function DragHandle(props) {
+  const {
+    center
+  } = props;
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
+  const [centerPx] = useTransformVectorsToPixels(center);
+  const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    className: "movable-circle-handle",
+    x: topLeft[X],
+    y: topLeft[Y],
+    width: dragHandleDimensions[X],
+    height: dragHandleDimensions[Y],
+    rx: cornerRadius,
+    ry: cornerRadius
+  }), dragHandleDotPositions.map(offsetPx => {
+    const [xPx, yPx] = vec.add(offsetPx, centerPx);
+    return /*#__PURE__*/React.createElement("circle", {
+      key: `circle-${xPx}-${yPx}`,
+      className: "movable-circle-handle-dot",
+      cx: xPx,
+      cy: yPx
+    });
+  }));
+}
+function crossProduct(as, bs) {
+  const result = [];
+  for (const a of as) {
+    for (const b of bs) {
+      result.push([a, b]);
+    }
+  }
+  return result;
+}
 
+function renderLinearGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(LinearGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 const LinearGraph = (props, key) => {
   const {
     dispatch
@@ -32698,6 +33445,15 @@ const LinearGraph = (props, key) => {
   });
 };
 
+function renderLinearSystemGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(LinearSystemGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 const LinearSystemGraph = props => {
   const {
     dispatch
@@ -32720,359 +33476,121 @@ const LinearSystemGraph = props => {
   })), ";");
 };
 
-const RayGraph = props => {
+function renderPointGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(PointGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: /*#__PURE__*/React.createElement(PointGraphDescription, {
+      state: state
+    })
+  };
+}
+function PointGraph(props) {
+  const numPoints = props.graphState.numPoints;
+  if (numPoints === "unlimited") {
+    return UnlimitedPointGraph(props);
+  }
+  return LimitedPointGraph(props);
+}
+function LimitedPointGraph(props) {
   const {
     dispatch
   } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
+  })));
+}
+function UnlimitedPointGraph(props) {
   const {
-    coords: line
-  } = props.graphState;
-  const handleMoveLine = delta => dispatch(actions.ray.moveRay(delta));
-  const handleMovePoint = (pointIndex, newPoint) => dispatch(actions.ray.movePoint(pointIndex, newPoint));
-
-  // Ray graphs only have one line
-  return /*#__PURE__*/React.createElement(MovableLine, {
-    points: line,
-    onMoveLine: handleMoveLine,
-    onMovePoint: handleMovePoint,
-    extend: {
-      start: false,
-      end: true
-    }
-  });
-};
-
-/**
- * Wrapper with Mafs transform styles for SVG elements.
- * Scales and translates the SVG element to match the Mafs view.
- * Use if you do not need/want to use the hook in `use-transform.ts`.
- */
-const MafsCssTransformWrapper = ({
-  children
-}) => /*#__PURE__*/React.createElement("g", {
-  style: {
-    transform: `var(--mafs-view-transform) var(--mafs-user-transform)`
-  }
-}, children);
-
-const _excluded$1 = ["children"];
-const TextLabel = _ref => {
-  let {
-      children
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement(Text$1, _extends({
-    size: 16,
-    svgTextProps: {
-      filter: "url(#background)",
-      fontWeight: "bold"
+    dispatch
+  } = props;
+  const graphConfig = useGraphConfig();
+  const {
+    range: [[minX, maxX], [minY, maxY]]
+  } = graphConfig;
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
+  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
+  const itemsRef = React.useRef([]);
+  React.useEffect(() => {
+    const focusedIndex = props.graphState.focusedPointIndex;
+    if (focusedIndex != null) {
+      var _itemsRef$current$foc;
+      (_itemsRef$current$foc = itemsRef.current[focusedIndex]) == null || _itemsRef$current$foc.focus();
     }
-  }, rest), children);
-};
-const SvgDefs = () => /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("filter", {
-  id: "background",
-  x: "-5%",
-  width: "110%",
-  y: "0%",
-  height: "100%"
-}, /*#__PURE__*/React__default.createElement("feFlood", {
-  floodColor: "#FFF",
-  floodOpacity: "0.64"
-}), /*#__PURE__*/React__default.createElement("feComposite", {
-  operator: "over",
-  in: "SourceGraphic"
-})));
-
-const PolygonAngle = ({
-  centerPoint,
-  endPoints,
-  range,
-  polygonLines,
-  showAngles,
-  snapTo
-}) => {
-  const [centerX, centerY] = centerPoint;
-  const areClockwise = clockwise$1([centerPoint, ...endPoints]);
-  const [[startX, startY], [endX, endY]] = areClockwise ? endPoints : endPoints.reverse();
-  const radius = 0.3;
-  const a = vec.dist(centerPoint, endPoints[0]);
-  const b = vec.dist(centerPoint, endPoints[1]);
-  const c = vec.dist(endPoints[0], endPoints[1]);
-
-  // Law of cosines
-  const angle = Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b));
-  const y1 = centerY + (startY - centerY) / a * radius;
-  const x2 = centerX + (endX - centerX) / b * radius;
-  const x1 = centerX + (startX - centerX) / a * radius;
-  const y2 = centerY + (endY - centerY) / b * radius;
-
-  // Fourth point that would create a rhomboid
-  // Used to calculate the inside of the angle and to create square
-  const [x3, y3] = vec.add(centerPoint, vec.add(vec.sub([x1, y1], centerPoint), vec.sub([x2, y2], centerPoint)));
-  if (!showAngles) {
-    return isRightPolygonAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-      start: [x1, y1],
-      vertex: [x2, y2],
-      end: [x3, y3]
-    }) : null;
-  }
-
-  // Midpoint betwen ends of arc
-  const isOutside = shouldDrawArcOutside([x3, y3], centerPoint, range, polygonLines);
-  const largeArcFlag = isOutside ? 1 : 0;
-  const sweepFlag = isOutside ? 1 : 0;
-  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
-  let angleInDegrees = angle * (180 / Math.PI);
-  // If we have triggered "largArcFlag", the angle should be greater than 180
-  if (isOutside) {
-    angleInDegrees = 360 - angleInDegrees;
-  }
-
-  // Only want to show whole numbers when in angles mode
-  const angleLabelNumber = parseFloat(angleInDegrees.toFixed(snapTo === "angles" ? 0 : 1));
-  const angleLabel = Number.isInteger(angleLabelNumber) ? angleLabelNumber : "≈ " + angleLabelNumber;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "background",
-    x: "-5%",
-    width: "110%",
-    y: "0%",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodColor: "#FFF",
-    floodOpacity: "0.5"
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    operator: "over",
-    in: "SourceGraphic"
-  }))), !isOutside && isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-    start: [x1, y1],
-    vertex: [x2, y2],
-    end: [x3, y3]
-  }) : /*#__PURE__*/React.createElement(Arc, {
-    arc: arc
-  }), /*#__PURE__*/React.createElement(TextLabel, {
-    x: x3,
-    y: y3,
-    attach: y3 - centerY > 0 ? "s" : "n",
-    attachDistance: Math.abs(y3 - centerY) < 0.2 || vec.dist([x3, y3], centerPoint) < 0.3 ? 20 : 10
-  }, angleLabel, "\xB0"));
-};
-const Angle = ({
-  vertex,
-  coords,
-  showAngles,
-  allowReflexAngles,
-  range
-}) => {
-  // Check if the points are clockwise or not, depending on whether we allow reflex angles
-  const areClockwise = clockwise$1([...coords, vertex]);
-  const shouldReverseCoords = areClockwise && !allowReflexAngles;
-
-  // Reverse the coordinates accordingly to ensure the angle is calculated correctly
-  const clockwiseCoords = shouldReverseCoords ? coords : coords.reverse();
-
-  // Calculate the angles between the two points
-  const startAngle = getAngleFromVertex(clockwiseCoords[0], vertex);
-  const endAngle = getAngleFromVertex(clockwiseCoords[1], vertex);
-  const angle = (startAngle + 360 - endAngle) % 360;
-
-  // Check if the angle is reflexive
-  const isReflexive = angle > 180;
-
-  // Break out the necessary points for the arc calculation
-  const [centerX, centerY] = vertex;
-  const [point1, point2] = clockwiseCoords;
-  const [startX, startY] = point1;
-  const [endX, endY] = point2;
-  const a = vec.dist(vertex, point1);
-  const b = vec.dist(vertex, point2);
-
-  // Set the radius of the arc
-  const radius = 2;
-
-  // Calculate the end points of the arc
-  const y1 = centerY + (startY - centerY) / a * radius;
-  const x2 = centerX + (endX - centerX) / b * radius;
-  const x1 = centerX + (startX - centerX) / a * radius;
-  const y2 = centerY + (endY - centerY) / b * radius;
-
-  // Used to calculate the inside of the angle and to create square
-  const [x3, y3] = vec.add(vertex, vec.add(vec.sub([x1, y1], vertex), vec.sub([x2, y2], vertex)));
-
-  // Determine whether the arc should be drawn outside the angle
-  const isOutside = shouldDrawArcOutside([x3, y3], vertex, range, [[vertex, point1], [vertex, point2]]);
-
-  // Determine the flags for the arc
-  // If the angle is outside OR reflexive, we want to draw a large arc
-  // If the angle is outside AND reflexive, we want to sweep the arc
-  const largeArcFlag = isOutside || isReflexive ? 1 : 0;
-  const sweepFlag = isOutside && isReflexive ? 1 : 0;
-
-  // Create the SVG path for the arc
-  const arc = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${x2} ${y2}`;
-
-  // We only ever want to show whole angles
-  const angleLabel = parseFloat(angle.toFixed(0)); // Only want to show whole angles
-
-  // Calculate the text position based on the angle and whether we allow reflex angles
-  // Let's try the angle bisector method to find the midpoint of the arc
-  const [textX, textY] = calculateBisectorPoint(point1, point2, vertex, isReflexive, allowReflexAngles, radius);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "background",
-    x: "-5%",
-    width: "110%",
-    y: "0%",
-    height: "100%"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    floodColor: "#FFF",
-    floodOpacity: "0.5"
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    operator: "over",
-    in: "SourceGraphic"
-  }))), isRightAngle(angle) ? /*#__PURE__*/React.createElement(RightAngleSquare, {
-    start: [x1, y1],
-    vertex: [x2, y2],
-    end: [x3, y3],
-    className: "arc-right-angle"
-  }) : /*#__PURE__*/React.createElement(Arc, {
-    arc: arc,
-    className: "angle-arc"
-  }), showAngles && /*#__PURE__*/React.createElement(TextLabel, {
-    x: textX,
-    y: textY,
-    color: color.blue
-  }, angleLabel, "\xB0"));
-};
-
-/**
- * This is broken out into its own component so that it can be used for an early return
- * (see line 55 or https://github.com/Khan/perseus/blob/84bbd882b11d16871e1b813a0b901f3b903d5479/packages/perseus/src/widgets/interactive-graphs/graphs/components/angle.tsx#L53-L57)
- */
-const RightAngleSquare = ({
-  start: [x1, y1],
-  vertex: [x2, y2],
-  end: [x3, y3],
-  className
-}) => /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
-  d: `M ${x1} ${y1} L ${x3} ${y3} M ${x3} ${y3} L ${x2} ${y2}`,
-  strokeWidth: 0.02,
-  fill: "none",
-  className: className
-}));
-
-// We're conditionally adding the class name here so that we can style the arc differently
-// based on whether it's an angle or a polygon angle
-const Arc = ({
-  arc,
-  className
-}) => {
-  return /*#__PURE__*/React.createElement(MafsCssTransformWrapper, null, /*#__PURE__*/React.createElement("path", {
-    d: arc,
-    strokeWidth: 0.02,
-    fill: "none",
-    className: className
-  }));
-};
-const isRightPolygonAngle = angle => Math.abs(angle - Math.PI / 2) < 0.01;
-const isRightAngle = angle => Math.round(angle) === 90;
-
-/**
- * Determines if an angle is an inside (false) or outside (true) angle.
- * They way, we know to flip the `largeArc` and `sweepArc` flags.
- * Uses the priciple that a ray from a point inside a polygon will intersect
- * with an odd number of lines, while a ray from a point outside the polygon
- * will intersect with an even number of lines.
- * https://stackoverflow.com/questions/217578/how-can-i-determine-whether-a-2d-point-is-within-a-polygon
- */
-const shouldDrawArcOutside = (midpoint, vertex, range, polygonLines) => {
-  // Create a ray from the midpoint (inside angle) to the edge of the range
-  const rangeIntersectionPoint = getIntersectionOfRayWithBox(midpoint, vertex, range);
-  let lineIntersectionCount = 0;
-  polygonLines.forEach(line => segmentsIntersect([vertex, rangeIntersectionPoint], line) && lineIntersectionCount++);
-
-  // If the number of intersections is even, the angle is inside the polygon
-  return !isEven(lineIntersectionCount);
-};
-const isEven = n => n % 2 === 0;
-
-// This function calculates the bisector point of an angle formed by two points
-// and a vertex. It is used to position the angle label so that it is always
-// outside the arc at the exact midpoint of the angle.
-// Reflex angles make use of polar coordinates to determine the correct direction
-function calculateBisectorPoint(point1, point2, vertex, isReflex, allowReflex, arcRadius) {
-  const [originX, originY] = vertex;
-  const [x1, y1] = point1;
-  const [x2, y2] = point2;
-
-  // Convert the Cartesian Coordinates to vectors
-  const vectorA = [x1 - originX, y1 - originY];
-  const vectorB = [x2 - originX, y2 - originY];
-
-  // Calculate the average angle of the vectors
-  // so that we can point the bisector in the correct direction using polar coordinates
-  const angleA = Math.atan2(vectorA[1], vectorA[0]);
-  const angleB = Math.atan2(vectorB[1], vectorB[0]);
-
-  // Calculate the average of these two angles
-  let averageAngle = (angleA + angleB) / 2;
-  const angleRadians = Math.abs(angleA - angleB);
-
-  // Adjust the average angle to point in the correct direction
-  // and to account for reflex angles and a bug with 180 degrees
-  // that occurs due to our angleOffsetDegrees option in the graph
-  if (allowReflex) {
-    // If the resulting angles are less than 180 degrees,
-    // or if the user has flipped the points on the interactive element
-    // ensure that we have the correct direction for the reflex angle
-    if (angleRadians <= Math.PI && isReflex || angleB > angleA) {
-      averageAngle += Math.PI; // Add 180 degrees
+  }, [props.graphState.focusedPointIndex, itemsRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
+    style: {
+      fill: "rgba(0,0,0,0)",
+      cursor: "crosshair"
+    },
+    width: widthPx,
+    height: heightPx,
+    x: left,
+    y: top,
+    onClick: event => {
+      const elementRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - elementRect.x;
+      const y = event.clientY - elementRect.y;
+      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
+      dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
     }
-  } else {
-    // If the resulting angles are greater than 180 degrees, adjust
-    // to get the correct angle, as we already know that the angle is not reflexive
-    // This fixes a bug that occurs at 180 degrees due to our angleOffsetDegrees option in the graph
-    if (angleRadians > Math.PI) {
-      averageAngle -= Math.PI; // Subract 180 degrees
+  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
+    key: i,
+    point: point,
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    ref: ref => {
+      itemsRef.current[i] = ref;
+    },
+    onFocus: () => {
+      dispatch(actions.pointGraph.focusPoint(i));
+    },
+    onClick: () => {
+      dispatch(actions.pointGraph.clickPoint(i));
     }
-  }
-
-  // Convert the average angle back to Cartesian coordinates
-  const sum = [Math.cos(averageAngle), Math.sin(averageAngle)];
-
-  // Calculate the magnitude of the sum to normalize it
-  const sumMagnitude = Math.sqrt(sum[0] ** 2 + sum[1] ** 2);
-  const bisectorDirection = [sum[0] / sumMagnitude, sum[1] / sumMagnitude];
-
-  // Calculate the initial distance of the bisector direction from the origin
-  const initialDistance = Math.sqrt(bisectorDirection[0] ** 2 + bisectorDirection[1] ** 2);
-
-  // Determine the minimum radius to ensure that the text is always outside the arc
-  const requiredDistance = arcRadius * 1.75;
-  let radius = requiredDistance / initialDistance;
-
-  // Apply radius only if the initial distance is less than required
-  if (initialDistance >= requiredDistance) {
-    radius = 1; // Use the unit vector as is
-  }
-
-  // Scale the bisector direction by the radius
-  const bisectorPoint = [bisectorDirection[0] * radius, bisectorDirection[1] * radius];
-
-  // Add the vertex to the bisector point to get the final position
-  // to ensure that the angle label moves with the interactive element
-  const scaledBisector = vec.add(bisectorPoint, vertex);
-  return scaledBisector;
+  })));
+}
+function PointGraphDescription({
+  state
+}) {
+  // PointGraphDescription needs to `usePerseusI18n`, so it has to be a
+  // component rather than a function that simply returns a string.
+  const i18n = usePerseusI18n();
+  return describePointGraph(state, i18n);
 }
 
-const MovablePoint$1 = /*#__PURE__*/React.forwardRef((props, pointRef) => {
+// Exported for testing
+function describePointGraph(state, i18n) {
   const {
-    visiblePoint,
-    focusableHandle
-  } = useControlPoint(_extends({}, props, {
-    forwardedRef: pointRef
+    strings,
+    locale
+  } = i18n;
+  if (state.coords.length === 0) {
+    return strings.srNoInteractiveElements;
+  }
+  const pointDescriptions = state.coords.map(([x, y]) => strings.srPointAtCoordinates({
+    x: srFormatNumber(x, locale),
+    y: srFormatNumber(y, locale)
   }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, focusableHandle, visiblePoint);
-});
+  return strings.srInteractiveElements({
+    elements: pointDescriptions.join(", ")
+  });
+}
 
+function renderPolygonGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(PolygonGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 const LimitedPolygonGraph = props => {
   const [hovered, setHovered] = React.useState(false);
   // This is more so required for the re-rendering that occurs when state
@@ -33356,189 +33874,15 @@ const PolygonGraph = props => {
   return numSides === "unlimited" ? UnlimitedPolygonGraph(props) : LimitedPolygonGraph(props);
 };
 
-function getGradableGraph(state, initialGraph) {
-  if (!state.hasBeenInteractedWith) {
-    return _extends({}, initialGraph);
-  }
-  if (initialGraph.type === "linear-system" && state.type === "linear-system") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "segment" && initialGraph.type === "segment") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "linear" && initialGraph.type === "linear") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "ray" && initialGraph.type === "ray") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "polygon" && initialGraph.type === "polygon") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "point" && initialGraph.type === "point") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "circle" && initialGraph.type === "circle") {
-    return _extends({}, initialGraph, {
-      center: state.center,
-      radius: getRadius(state)
-    });
-  }
-  if (state.type === "quadratic" && initialGraph.type === "quadratic") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  if (state.type === "sinusoid" && initialGraph.type === "sinusoid") {
-    return _extends({}, initialGraph, {
-      coords: state.coords
-    });
-  }
-  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$1([state.coords[0], state.coords[2], state.coords[1]]);
-    const shouldReverseCoords = areClockwise && !state.allowReflexAngles;
-    const coords = shouldReverseCoords ? state.coords.slice().reverse() : state.coords;
-    return _extends({}, initialGraph, {
-      coords,
-      allowReflexAngles: state.allowReflexAngles
-    });
-  }
-  if (state.type === "none" && initialGraph.type === "none") {
-    return {
-      type: "none"
-    };
-  }
-  throw new Error("Mafs is not yet implemented for graph type: " + initialGraph.type);
-}
-
-/**
- * determine radius of a circle graph
- *
- * @param graph - the graph object containing the circle
- * @returns the radius of the circle
- */
-function getRadius(graph) {
-  const [centerX, centerY] = graph.center;
-  const [edgeX, edgeY] = graph.radiusPoint;
-  return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
-}
-
-function CircleGraph(props) {
-  const {
-    dispatch,
-    graphState
-  } = props;
-  const {
-    center,
-    radiusPoint
-  } = graphState;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MovableCircle, {
-    center: center,
-    radius: getRadius(graphState),
-    onMove: c => dispatch(actions.circle.moveCenter(c))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: radiusPoint,
-    cursor: "ew-resize",
-    onMove: newRadiusPoint => {
-      dispatch(actions.circle.moveRadiusPoint(newRadiusPoint));
-    }
-  }));
-}
-function MovableCircle(props) {
-  const {
-    center,
-    radius,
-    onMove
-  } = props;
-  const {
-    snapStep,
-    disableKeyboardInteraction
-  } = useGraphConfig();
-  const draggableRef = useRef(null);
-  const {
-    dragging
-  } = useDraggable({
-    gestureTarget: draggableRef,
-    point: center,
-    onMove,
-    constrainKeyboardMovement: p => snap(snapStep, p)
-  });
-  const [centerPx] = useTransformVectorsToPixels(center);
-  const [radiiPx] = useTransformDimensionsToPixels([radius, radius]);
-  return /*#__PURE__*/React.createElement("g", {
-    ref: draggableRef,
-    tabIndex: disableKeyboardInteraction ? -1 : 0,
-    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
-  }, /*#__PURE__*/React.createElement("ellipse", {
-    className: "focus-ring",
-    cx: centerPx[X],
-    cy: centerPx[Y],
-    rx: radiiPx[X] + 3,
-    ry: radiiPx[Y] + 3
-  }), /*#__PURE__*/React.createElement("ellipse", {
-    className: "circle",
-    cx: centerPx[X],
-    cy: centerPx[Y],
-    rx: radiiPx[X],
-    ry: radiiPx[Y]
-  }), /*#__PURE__*/React.createElement(DragHandle, {
-    center: center
-  }));
-}
-const dragHandleDimensions = [24, 14];
-const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
-function DragHandle(props) {
-  const {
-    center
-  } = props;
-  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
-  const [centerPx] = useTransformVectorsToPixels(center);
-  const topLeft = vec.sub(centerPx, vec.scale(dragHandleDimensions, 0.5));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
-    className: "movable-circle-handle",
-    x: topLeft[X],
-    y: topLeft[Y],
-    width: dragHandleDimensions[X],
-    height: dragHandleDimensions[Y],
-    rx: cornerRadius,
-    ry: cornerRadius
-  }), dragHandleDotPositions.map(offsetPx => {
-    const [xPx, yPx] = vec.add(offsetPx, centerPx);
-    return /*#__PURE__*/React.createElement("circle", {
-      key: `circle-${xPx}-${yPx}`,
-      className: "movable-circle-handle-dot",
-      cx: xPx,
-      cy: yPx
-    });
-  }));
-}
-function crossProduct(as, bs) {
-  const result = [];
-  for (const a of as) {
-    for (const b of bs) {
-      result.push([a, b]);
-    }
-  }
-  return result;
+function renderQuadraticGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(QuadraticGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
 }
-
 function QuadraticGraph(props) {
   const {
     dispatch,
@@ -33593,6 +33937,74 @@ const getQuadraticCoefficients$1 = coords => {
   return [a, b, c];
 };
 
+function renderRayGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(RayGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+const RayGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: line
+  } = props.graphState;
+  const handleMoveLine = delta => dispatch(actions.ray.moveRay(delta));
+  const handleMovePoint = (pointIndex, newPoint) => dispatch(actions.ray.movePoint(pointIndex, newPoint));
+
+  // Ray graphs only have one line
+  return /*#__PURE__*/React.createElement(MovableLine, {
+    points: line,
+    onMoveLine: handleMoveLine,
+    onMovePoint: handleMovePoint,
+    extend: {
+      start: false,
+      end: true
+    }
+  });
+};
+
+function renderSegmentGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(SegmentGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
+const SegmentGraph = props => {
+  const {
+    dispatch
+  } = props;
+  const {
+    coords: segments
+  } = props.graphState;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, segments == null ? void 0 : segments.map((segment, i) => /*#__PURE__*/React.createElement(MovableLine, {
+    key: i,
+    points: segment,
+    onMoveLine: delta => {
+      dispatch(actions.segment.moveLine(i, delta));
+    },
+    onMovePoint: (endpointIndex, destination) => {
+      dispatch(actions.segment.movePointInFigure(i, endpointIndex, destination));
+    }
+  })));
+};
+
+function renderSinusoidGraph(state, dispatch) {
+  return {
+    graph: /*#__PURE__*/React.createElement(SinusoidGraph, {
+      graphState: state,
+      dispatch: dispatch
+    }),
+    interactiveElementsDescription: null
+  };
+}
 function SinusoidGraph(props) {
   const {
     dispatch,
@@ -33668,187 +34080,6 @@ const getSinusoidCoefficients$1 = coords => {
   };
 };
 
-function AngleGraph(props) {
-  const {
-    dispatch,
-    graphState
-  } = props;
-  const {
-    graphDimensionsInPixels
-  } = useGraphConfig();
-  const {
-    coords,
-    showAngles,
-    range,
-    allowReflexAngles,
-    snapDegrees
-  } = graphState;
-
-  // Break the coords into the two end points and the center point
-  const endPoints = [coords[0], coords[2]];
-  const centerPoint = coords[1];
-
-  // Convert the vectors to pixels for rendering the svg lines
-  const angleLines = [[centerPoint, endPoints[0]], [centerPoint, endPoints[1]]];
-  const linePixelCoords = [useTransformVectorsToPixels(centerPoint, endPoints[0]), useTransformVectorsToPixels(centerPoint, endPoints[1])];
-
-  // Create the SVG lines for the angle
-  const svgLines = linePixelCoords.map(([startPtPx, endPtPx], i) => {
-    const trimmedRange = trimRange(range, graphDimensionsInPixels);
-    const endExtend = getIntersectionOfRayWithBox(angleLines[i][0], angleLines[i][1], trimmedRange);
-    return /*#__PURE__*/React.createElement("g", {
-      key: `line-${i}`
-    }, /*#__PURE__*/React.createElement(SVGLine, {
-      start: startPtPx,
-      end: endPtPx,
-      style: {
-        stroke: "var(--movable-line-stroke-color)",
-        strokeWidth: "var(--movable-line-stroke-weight)"
-      }
-    }), /*#__PURE__*/React.createElement(Vector, {
-      tail: angleLines[i][1],
-      tip: endExtend,
-      color: "var(--movable-line-stroke-color)"
-    }));
-  });
-
-  // Create the angle indicator parameters
-  const angleParams = {
-    vertex: centerPoint,
-    coords: endPoints,
-    allowReflexAngles: allowReflexAngles || false,
-    // Whether to allow reflex angles or not
-    snapDegrees: snapDegrees || 1,
-    // The multiple of degrees to snap to
-    range: range,
-    showAngles: showAngles || false // Whether to show the angle or not
-  };
-
-  // Render the lines, angle, and then movable points
-  return /*#__PURE__*/React.createElement(React.Fragment, null, svgLines, /*#__PURE__*/React.createElement(Angle, angleParams), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[1],
-    constrain: p => p,
-    onMove: destination => dispatch(actions.angle.movePoint(1, destination))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[0],
-    constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(0, destination))
-  }), /*#__PURE__*/React.createElement(MovablePoint$1, {
-    point: coords[2],
-    constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
-    onMove: destination => dispatch(actions.angle.movePoint(2, destination))
-  }));
-}
-const positiveX = [1, 0];
-const negativeX = [-1, 0];
-const positiveY = [0, 1];
-const negativeY = [0, -1];
-function getAngleSideConstraint(sidePoint, vertex, snapDegrees) {
-  var _findIntersectionOfRa, _findIntersectionOfRa2, _findIntersectionOfRa3, _findIntersectionOfRa4;
-  const currentAngle = calculateAngleInDegrees(vec.sub(sidePoint, vertex));
-
-  // Find the rays that start at the current point and point up, down, left
-  // and right.
-  const leftRay = [sidePoint, vec.add(sidePoint, negativeX)];
-  const rightRay = [sidePoint, vec.add(sidePoint, positiveX)];
-  const upRay = [sidePoint, vec.add(sidePoint, positiveY)];
-  const downRay = [sidePoint, vec.add(sidePoint, negativeY)];
-
-  // find the angles that lie one snap step clockwise and counter-clockwise
-  // from the current angle. These are the angles to which the side can be
-  // moved.
-  const oneStepCounterClockwise = currentAngle + snapDegrees;
-  const oneStepClockwise = currentAngle - snapDegrees;
-
-  // find the rays that start from the vertex and point in the direction of
-  // the angles we just computed.
-  const counterClockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepCounterClockwise))];
-  const clockwiseRay = [vertex, vec.add(vertex, polar(1, oneStepClockwise))];
-
-  // find the intersections of those rays with the horizontal and vertical
-  // rays extending from the sidePoint. These intersections are the points to
-  // which sidePoint can move that will result in a rotation of `snapDegrees`.
-  const left = (_findIntersectionOfRa = findIntersectionOfRays(leftRay, counterClockwiseRay)) != null ? _findIntersectionOfRa : findIntersectionOfRays(leftRay, clockwiseRay);
-  const right = (_findIntersectionOfRa2 = findIntersectionOfRays(rightRay, counterClockwiseRay)) != null ? _findIntersectionOfRa2 : findIntersectionOfRays(rightRay, clockwiseRay);
-  const up = (_findIntersectionOfRa3 = findIntersectionOfRays(upRay, counterClockwiseRay)) != null ? _findIntersectionOfRa3 : findIntersectionOfRays(upRay, clockwiseRay);
-  const down = (_findIntersectionOfRa4 = findIntersectionOfRays(downRay, counterClockwiseRay)) != null ? _findIntersectionOfRa4 : findIntersectionOfRays(downRay, clockwiseRay);
-  return {
-    up: up != null ? up : sidePoint,
-    down: down != null ? down : sidePoint,
-    left: left != null ? left : sidePoint,
-    right: right != null ? right : sidePoint
-  };
-}
-
-function LimitedPointGraph(props) {
-  const {
-    dispatch
-  } = props;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
-  })));
-}
-function UnlimitedPointGraph(props) {
-  const {
-    dispatch
-  } = props;
-  const graphConfig = useGraphConfig();
-  const {
-    range: [[minX, maxX], [minY, maxY]]
-  } = graphConfig;
-  const width = maxX - minX;
-  const height = maxY - minY;
-  const [[widthPx, heightPx]] = useTransformDimensionsToPixels([width, height]);
-  const [[left, top]] = useTransformVectorsToPixels([minX, maxY]);
-  const itemsRef = React.useRef([]);
-  React.useEffect(() => {
-    const focusedIndex = props.graphState.focusedPointIndex;
-    if (focusedIndex != null) {
-      var _itemsRef$current$foc;
-      (_itemsRef$current$foc = itemsRef.current[focusedIndex]) == null || _itemsRef$current$foc.focus();
-    }
-  }, [props.graphState.focusedPointIndex, itemsRef]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("rect", {
-    style: {
-      fill: "rgba(0,0,0,0)",
-      cursor: "crosshair"
-    },
-    width: widthPx,
-    height: heightPx,
-    x: left,
-    y: top,
-    onClick: event => {
-      const elementRect = event.currentTarget.getBoundingClientRect();
-      const x = event.clientX - elementRect.x;
-      const y = event.clientY - elementRect.y;
-      const graphCoordinates = pixelsToVectors([[x, y]], graphConfig);
-      dispatch(actions.pointGraph.addPoint(graphCoordinates[0]));
-    }
-  }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
-    key: i,
-    point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
-    ref: ref => {
-      itemsRef.current[i] = ref;
-    },
-    onFocus: () => {
-      dispatch(actions.pointGraph.focusPoint(i));
-    },
-    onClick: () => {
-      dispatch(actions.pointGraph.clickPoint(i));
-    }
-  })));
-}
-function PointGraph(props) {
-  const numPoints = props.graphState.numPoints;
-  if (numPoints === "unlimited") {
-    return UnlimitedPointGraph(props);
-  }
-  return LimitedPointGraph(props);
-}
-
 const protractorImage = "https://ka-perseus-graphie.s3.amazonaws.com/e9d032f2ab8b95979f674fbfa67056442ba1ff6a.png";
 
 // The vector from the center of the protractor to the top left corner of the
@@ -34013,6 +34244,7 @@ const MafsGraph = props => {
   const tickStep = props.step;
   const uniqueId = React.useId();
   const descriptionId = `interactive-graph-description-${uniqueId}`;
+  const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
   const graphRef = React.useRef(null);
   const {
     analytics
@@ -34047,6 +34279,13 @@ const MafsGraph = props => {
       }
     });
   });
+  const {
+    graph,
+    interactiveElementsDescription
+  } = renderGraphElements({
+    state,
+    dispatch
+  });
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -34078,7 +34317,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": fullGraphAriaDescription ? descriptionId : undefined,
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -34090,12 +34329,12 @@ const MafsGraph = props => {
   }, fullGraphAriaDescription && /*#__PURE__*/React.createElement(View, {
     id: descriptionId,
     tabIndex: -1,
-    style: {
-      width: 0,
-      height: 0,
-      overflow: "hidden"
-    }
-  }, fullGraphAriaDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
+    className: "mafs-sr-only"
+  }, fullGraphAriaDescription), interactiveElementsDescription && /*#__PURE__*/React.createElement(View, {
+    id: interactiveElementsDescriptionId,
+    tabIndex: -1,
+    className: "mafs-sr-only"
+  }, interactiveElementsDescription), /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), /*#__PURE__*/React.createElement(View, {
@@ -34146,10 +34385,7 @@ const MafsGraph = props => {
     zoom: false,
     width: width,
     height: height
-  }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), renderGraph({
-    state,
-    dispatch
-  }))))), interactionPrompt && /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement("svg", nestedSVGAttributes, props.showProtractor && /*#__PURE__*/React.createElement(Protractor, null), graph)))), interactionPrompt && /*#__PURE__*/React.createElement(View, {
     style: {
       textAlign: "center",
       backgroundColor: "white",
@@ -34382,7 +34618,7 @@ const calculateNestedSVGCoords = (range, width, height) => {
     viewboxY
   };
 };
-const renderGraph = props => {
+const renderGraphElements = props => {
   const {
     state,
     dispatch
@@ -34392,62 +34628,41 @@ const renderGraph = props => {
   } = state;
   switch (type) {
     case "angle":
-      return /*#__PURE__*/React.createElement(AngleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderAngleGraph(state, dispatch);
     case "segment":
-      return /*#__PURE__*/React.createElement(SegmentGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderSegmentGraph(state, dispatch);
     case "linear-system":
-      return /*#__PURE__*/React.createElement(LinearSystemGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderLinearSystemGraph(state, dispatch);
     case "linear":
-      return /*#__PURE__*/React.createElement(LinearGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderLinearGraph(state, dispatch);
     case "ray":
-      return /*#__PURE__*/React.createElement(RayGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderRayGraph(state, dispatch);
     case "polygon":
-      return /*#__PURE__*/React.createElement(PolygonGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderPolygonGraph(state, dispatch);
     case "point":
-      return /*#__PURE__*/React.createElement(PointGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderPointGraph(state, dispatch);
     case "circle":
-      return /*#__PURE__*/React.createElement(CircleGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderCircleGraph(state, dispatch);
     case "quadratic":
-      return /*#__PURE__*/React.createElement(QuadraticGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderQuadraticGraph(state, dispatch);
     case "sinusoid":
-      return /*#__PURE__*/React.createElement(SinusoidGraph, {
-        graphState: state,
-        dispatch: dispatch
-      });
+      return renderSinusoidGraph(state, dispatch);
     case "none":
-      return null;
+      return {
+        graph: null,
+        interactiveElementsDescription: null
+      };
     default:
       throw new UnreachableCaseError(type);
   }
 };
 
+// Returns a space-separated string like "foo bar" given several optional
+// string IDs. If all args are falsy, returns undefined.
+function describedByIds(...args) {
+  return args.filter(Boolean).join(" ") || undefined;
+}
+
 // Converts the state of a StatefulMafsGraph back to the format used to
 // represent graph state in the widget JSON.
 //
@@ -43657,7 +43872,7 @@ const VideoTranscriptLink = props => {
   } = props;
   const {
     useVideo
-  } = getDependencies();
+  } = useDependencies();
   const [id, kind] = IS_URL$1.test(location) ? [getYoutubeId(location), "YOUTUBE_ID"] : [location, "READABLE_ID"];
   // The result value conforms to the wonder-blocks-data `Result` type
   // which is used by our GraphQL framework.
@@ -43831,7 +44046,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 = "40.0.0";
+const libVersion = "41.1.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {