@khanacademy/perseus 53.1.0 → 54.0.0

package/dist/index.js

@@ -33,7 +33,6 @@ var Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var caretDown = require('@phosphor-icons/core/regular/caret-down.svg');
 var caretUp = require('@phosphor-icons/core/regular/caret-up.svg');
-require('lodash.debounce');
 var mafs = require('mafs');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var questionIcon = require('@phosphor-icons/core/regular/question.svg');
@@ -367,6 +366,10 @@ const mockStrings = {
   simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
   selectAnAnswer: "Select an answer",
   // The following strings are used for interactive graph SR descriptions.
+  srGraphInstructions: "Use the Tab key to move through the interactive elements in the graph. When an interactive element has focus, use the Arrow keys to move it.",
+  srUnlimitedGraphInstructions: "Press Shift + Enter to interact with the graph. Use the Tab key to move through the interactive elements in the graph and access the graph Action Bar. When an interactive element has focus, use the Arrow keys to move it or use the Delete key to remove it from the graph. Use the buttons in the Action Bar to add or adjust elements within the graph.",
+  xAxis: "X-axis",
+  yAxis: "Y-axis",
   graphKeyboardPrompt: "Press Shift + Enter to interact with the graph",
   addPoint: "Add Point",
   removePoint: "Remove Point",
@@ -464,25 +467,37 @@ const mockStrings = {
     } = _ref37;
     return `Line from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
-  srAngleSideAtCoordinates: _ref38 => {
+  srAngleStartingSide: _ref38 => {
     let {
-      point,
-      side,
       x,
       y
     } = _ref38;
-    return `Point ${point}, ${side} at ${x} comma ${y}`;
+    return `Point 3, starting side at ${x} comma ${y}.`;
   },
-  srAngleVertexAtCoordinatesWithAngleMeasure: _ref39 => {
+  srAngleEndingSide: _ref39 => {
+    let {
+      x,
+      y
+    } = _ref39;
+    return `Point 2, ending side at ${x} comma ${y}.`;
+  },
+  srAngleVertex: _ref40 => {
+    let {
+      x,
+      y
+    } = _ref40;
+    return `Point 1, vertex at ${x} comma ${y}.`;
+  },
+  srAngleVertexWithAngleMeasure: _ref41 => {
     let {
       x,
       y,
       angleMeasure
-    } = _ref39;
-    return `Point 2, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees`;
+    } = _ref41;
+    return `Point 1, vertex at ${x} comma ${y}. Angle ${angleMeasure} degrees.`;
   },
   srAngleGraphAriaLabel: "An angle on a coordinate plane.",
-  srAngleGraphAriaDescription: _ref40 => {
+  srAngleGraphAriaDescription: _ref42 => {
     let {
       angleMeasure,
       vertexX,
@@ -491,118 +506,129 @@ const mockStrings = {
       startingSideY,
       endingSideX,
       endingSideY
-    } = _ref40;
+    } = _ref42;
     return `The angle measure is ${angleMeasure} degrees with a vertex at ${vertexX} comma ${vertexY}, a point on the starting side at ${startingSideX} comma ${startingSideY} and a point on the ending side at ${endingSideX} comma ${endingSideY}.`;
   },
+  srAngleInteractiveElements: _ref43 => {
+    let {
+      vertexX,
+      vertexY,
+      startingSideX,
+      startingSideY,
+      endingSideX,
+      endingSideY
+    } = _ref43;
+    return `An angle formed by 3 points. The vertex is at ${vertexX} comma ${vertexY}. The starting side point is at ${startingSideX} comma ${startingSideY}. The ending side point is at ${endingSideX} comma ${endingSideY}.`;
+  },
   srSingleSegmentGraphAriaLabel: "A line segment on a coordinate plane.",
-  srMultipleSegmentGraphAriaLabel: _ref41 => {
+  srMultipleSegmentGraphAriaLabel: _ref44 => {
     let {
       countOfSegments
-    } = _ref41;
+    } = _ref44;
     return `${countOfSegments} segments on a coordinate plane.`;
   },
-  srMultipleSegmentIndividualLabel: _ref42 => {
+  srMultipleSegmentIndividualLabel: _ref45 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y,
       indexOfSegment
-    } = _ref42;
+    } = _ref45;
     return `Segment ${indexOfSegment}: Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSingleSegmentLabel: _ref43 => {
+  srSingleSegmentLabel: _ref46 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref43;
+    } = _ref46;
     return `Endpoint 1 at ${point1X} comma ${point1Y}. Endpoint 2 at ${point2X} comma ${point2Y}.`;
   },
-  srSegmentLength: _ref44 => {
+  srSegmentLength: _ref47 => {
     let {
       length
-    } = _ref44;
+    } = _ref47;
     return `Segment length ${length} units.`;
   },
-  srSingleSegmentGraphEndpointAriaLabel: _ref45 => {
+  srSingleSegmentGraphEndpointAriaLabel: _ref48 => {
     let {
       endpointNumber,
       x,
       y
-    } = _ref45;
+    } = _ref48;
     return `Endpoint ${endpointNumber} at ${x} comma ${y}.`;
   },
-  srMultipleSegmentGraphEndpointAriaLabel: _ref46 => {
+  srMultipleSegmentGraphEndpointAriaLabel: _ref49 => {
     let {
       endpointNumber,
       x,
       y,
       indexOfSegment
-    } = _ref46;
+    } = _ref49;
     return `Endpoint ${endpointNumber} on segment ${indexOfSegment} at ${x} comma ${y}.`;
   },
-  srSegmentGrabHandle: _ref47 => {
+  srSegmentGrabHandle: _ref50 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref47;
+    } = _ref50;
     return `Segment from ${point1X} comma ${point1Y} to ${point2X} comma ${point2Y}.`;
   },
   srLinearSystemGraph: "Two lines on a coordinate plane.",
-  srLinearSystemPoints: _ref48 => {
+  srLinearSystemPoints: _ref51 => {
     let {
       lineNumber,
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref48;
+    } = _ref51;
     return `Line ${lineNumber} has two points, point 1 at ${point1X} comma ${point1Y} and point 2 at ${point2X} comma ${point2Y}.`;
   },
-  srLinearSystemPoint: _ref49 => {
+  srLinearSystemPoint: _ref52 => {
     let {
       lineNumber,
       pointSequence,
       x,
       y
-    } = _ref49;
+    } = _ref52;
     return `Point ${pointSequence} on line ${lineNumber} at ${x} comma ${y}.`;
   },
   srRayGraph: "A ray on a coordinate plane.",
-  srRayPoints: _ref50 => {
+  srRayPoints: _ref53 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref50;
+    } = _ref53;
     return `The endpoint is at ${point1X} comma ${point1Y} and the ray goes through point ${point2X} comma ${point2Y}.`;
   },
-  srRayGrabHandle: _ref51 => {
+  srRayGrabHandle: _ref54 => {
     let {
       point1X,
       point1Y,
       point2X,
       point2Y
-    } = _ref51;
+    } = _ref54;
     return `Ray with endpoint ${point1X} comma ${point1Y} going through point ${point2X} comma ${point2Y}.`;
   },
-  srRayEndpoint: _ref52 => {
+  srRayEndpoint: _ref55 => {
     let {
       x,
       y
-    } = _ref52;
+    } = _ref55;
     return `Endpoint at ${x} comma ${y}.`;
   },
-  srRayTerminalPoint: _ref53 => {
+  srRayTerminalPoint: _ref56 => {
     let {
       x,
       y
-    } = _ref53;
+    } = _ref56;
     return `Through point at ${x} comma ${y}.`;
   },
   srQuadraticGraph: "A parabola on a 4-quadrant coordinate plane.",
@@ -611,55 +637,55 @@ const mockStrings = {
   srQuadraticGraphVertexOrigin: "Vertex is at the origin.",
   srQuadraticGraphVertexXAxis: "Vertex is on the X-axis.",
   srQuadraticGraphVertexYAxis: "Vertex is on the Y-axis.",
-  srQuadraticGraphVertexQuadrant: _ref54 => {
+  srQuadraticGraphVertexQuadrant: _ref57 => {
     let {
       quadrant
-    } = _ref54;
+    } = _ref57;
     return `Vertex is in quadrant ${quadrant}.`;
   },
-  srQuadraticTwoXIntercepts: _ref55 => {
+  srQuadraticTwoXIntercepts: _ref58 => {
     let {
       intercept1,
       intercept2
-    } = _ref55;
+    } = _ref58;
     return `The X-intercepts are at ${intercept1} comma 0 and ${intercept2} comma 0.`;
   },
-  srQuadraticOneXIntercept: _ref56 => {
+  srQuadraticOneXIntercept: _ref59 => {
     let {
       intercept
-    } = _ref56;
+    } = _ref59;
     return `The X-intercept is at ${intercept} comma 0.`;
   },
-  srQuadraticYIntercept: _ref57 => {
+  srQuadraticYIntercept: _ref60 => {
     let {
       intercept
-    } = _ref57;
+    } = _ref60;
     return `The Y-intercept is at 0 comma ${intercept}.`;
   },
-  srQuadraticPointOrigin: _ref58 => {
+  srQuadraticPointOrigin: _ref61 => {
     let {
       pointNumber
-    } = _ref58;
+    } = _ref61;
     return `Point ${pointNumber} on parabola at the origin.`;
   },
-  srQuadraticPointAxis: _ref59 => {
+  srQuadraticPointAxis: _ref62 => {
     let {
       pointNumber,
       x,
       y
-    } = _ref59;
+    } = _ref62;
     return `Point ${pointNumber} on parabola at ${x} comma ${y}.`;
   },
-  srQuadraticPointQuadrant: _ref60 => {
+  srQuadraticPointQuadrant: _ref63 => {
     let {
       pointNumber,
       x,
       y,
       quadrant
-    } = _ref60;
+    } = _ref63;
     return `Point ${pointNumber} on parabola in quadrant ${quadrant} at ${x} comma ${y}.`;
   },
-  srQuadraticInteractiveElements: _ref61 => {
+  srQuadraticInteractiveElements: _ref64 => {
     let {
       point1X,
       point1Y,
@@ -667,52 +693,85 @@ const mockStrings = {
       point2Y,
       point3X,
       point3Y
-    } = _ref61;
+    } = _ref64;
     return `Parabola with points at ${point1X} comma ${point1Y}, ${point2X} comma ${point2Y}, and ${point3X} comma ${point3Y}.`;
   },
   srPolygonGraph: "A polygon.",
   srPolygonGraphCoordinatePlane: "A polygon on a coordinate plane.",
-  srPolygonGraphPointsNum: _ref62 => {
+  srPolygonGraphPointsNum: _ref65 => {
     let {
       num
-    } = _ref62;
+    } = _ref65;
     return `The polygon has ${num} points.`;
   },
   srPolygonGraphPointsOne: "The polygon has 1 point.",
-  srPolygonElementsNum: _ref63 => {
+  srPolygonElementsNum: _ref66 => {
     let {
       num
-    } = _ref63;
+    } = _ref66;
     return `A polygon with ${num} points.`;
   },
   srPolygonElementsOne: "A polygon with 1 point.",
-  srPolygonPointAngleApprox: _ref64 => {
+  srPolygonPointAngleApprox: _ref67 => {
     let {
       angle
-    } = _ref64;
+    } = _ref67;
     return `Angle approximately equal to ${angle} degrees.`;
   },
-  srPolygonPointAngle: _ref65 => {
+  srPolygonPointAngle: _ref68 => {
     let {
       angle
-    } = _ref65;
+    } = _ref68;
     return `Angle equal to ${angle} degrees.`;
   },
-  srPolygonSideLength: _ref66 => {
+  srPolygonSideLength: _ref69 => {
     let {
       pointNum,
       length
-    } = _ref66;
+    } = _ref69;
     return `A line segment, length equal to ${length} units, connects to point ${pointNum}.`;
   },
-  srPolygonSideLengthApprox: _ref67 => {
+  srPolygonSideLengthApprox: _ref70 => {
     let {
       pointNum,
       length
-    } = _ref67;
+    } = _ref70;
     return `A line segment, length approximately equal to ${length} units, connects to point ${pointNum}.`;
   },
-  srUnlimitedPolygonEmpty: "An empty coordinate plane."
+  srUnlimitedPolygonEmpty: "An empty coordinate plane.",
+  srSinusoidGraph: "A sinusoid function on a coordinate plane.",
+  srSinusoidRootPoint: _ref71 => {
+    let {
+      x,
+      y
+    } = _ref71;
+    return `Midline intersection at ${x} comma ${y}.`;
+  },
+  srSinusoidPeakPoint: _ref72 => {
+    let {
+      x,
+      y
+    } = _ref72;
+    return `Extremum point at ${x} comma ${y}.`;
+  },
+  srSinusoidDescription: _ref73 => {
+    let {
+      minValue,
+      maxValue,
+      cycleStart,
+      cycleEnd
+    } = _ref73;
+    return `The graph shows a wave with a minimum value of ${minValue} and a maximum value of ${maxValue}. The wave completes a full cycle from ${cycleStart} to ${cycleEnd}.`;
+  },
+  srSinusoidInteractiveElements: _ref74 => {
+    let {
+      point1X,
+      point1Y,
+      point2X,
+      point2Y
+    } = _ref74;
+    return `Sinusoid graph with midline intersection point at ${point1X} comma ${point1Y} and extremum point at ${point2X} comma ${point2Y}.`;
+  }
   // The above strings are used for interactive graph SR descriptions.
 };
 
@@ -1634,6 +1693,7 @@ const ApiOptions = {
     },
     baseElements: {
       Link: props => {
+        // eslint-disable-next-line jsx-a11y/anchor-has-content -- TODO(LEMS-2871): Address a11y error
         return /*#__PURE__*/React__namespace.createElement("a", props);
       }
     },
@@ -2034,7 +2094,6 @@ var Expression$1 = {
   propUpgrades: perseusCore.expressionLogic.widgetOptionsUpgrades,
   // For use by the editor
   isLintable: true,
-  getPublicWidgetOptions: perseusCore.getExpressionPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusExpressionRubric'.
   getOneCorrectAnswerFromRubric(rubric) {
@@ -16010,12 +16069,17 @@ class ImageLoader extends React__namespace.Component {
       };
     }
     const staticUrl = getDependencies().staticUrl;
-    return /*#__PURE__*/React__namespace.createElement("img", _extends({
-      tabIndex: 0,
-      src: staticUrl(src),
-      onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown
-    }, imgProps));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("img", _extends({
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- TODO(LEMS-2871): Address a11y error
+        tabIndex: 0,
+        src: staticUrl(src),
+        onKeyUp: onKeyUp,
+        onKeyDown: onKeyDown
+      }, imgProps))
+    );
   };
   render() {
     switch (this.state.status) {
@@ -16689,16 +16753,20 @@ class Zoomable extends React__namespace.Component {
       WebkitTapHighlightColor: "transparent",
       ...transitionStyle
     };
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      onClick: this.handleClick,
-      onClickCapture: this.handleClickIfZoomed,
-      onTouchCancelCapture: this.stopPropagationIfZoomed,
-      onTouchEndCapture: this.stopPropagationIfZoomed,
-      onTouchStartCapture: this.stopPropagationIfZoomed
-      // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
-      ,
-      style: style
-    }, this.props.children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("span", {
+        onClick: this.handleClick,
+        onClickCapture: this.handleClickIfZoomed,
+        onTouchCancelCapture: this.stopPropagationIfZoomed,
+        onTouchEndCapture: this.stopPropagationIfZoomed,
+        onTouchStartCapture: this.stopPropagationIfZoomed
+        // @ts-expect-error - TS2322 - Type '{ readonly transitionProperty: string; readonly transitionDuration: string; readonly transitionTimingFunction: string; readonly display: "block"; readonly width: "100%"; readonly height: number | ... 1 more ... | undefined; readonly transform: string; readonly transformOrigin: "0 0"; readonly opacity: 0 | 1; readonl...' is not assignable to type 'CSSProperties | undefined'.
+        ,
+        style: style
+      }, this.props.children)
+    );
   }
 }
 
@@ -17921,9 +17989,6 @@ const getWidget = name => {
 const getWidgetExport = name => {
   return widgets[name] ?? null;
 };
-const getPublicWidgetOptionsFunction = name => {
-  return widgets[name]?.getPublicWidgetOptions ?? (i => i);
-};
 const getEditor = name => {
   return ___default["default"].has(editors, name) ? editors[name] : null;
 };
@@ -18060,7 +18125,6 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   replaceDeprecatedEditors: replaceDeprecatedEditors,
   getWidget: getWidget,
   getWidgetExport: getWidgetExport,
-  getPublicWidgetOptionsFunction: getPublicWidgetOptionsFunction,
   getEditor: getEditor,
   getTransform: getTransform,
   getVersion: getVersion,
@@ -18136,6 +18200,7 @@ class WidgetContainer extends React__namespace.Component {
       "perseus-widget__definition": this.props.type === "definition"
     });
     const type = this.props.type;
+    const userAgent = navigator.userAgent;
     const WidgetType = getWidget(type);
     if (WidgetType == null) {
       // This is for the good of all people!!
@@ -18146,6 +18211,11 @@ class WidgetContainer extends React__namespace.Component {
         className: className
       });
     }
+    let subType = "null";
+    if (type === "interactive-graph") {
+      const props = this.state.widgetProps;
+      subType = props.graph?.type ?? "null";
+    }
     let alignment = this.state.widgetProps.alignment;
     if (alignment === "default") {
       alignment = perseusCore.CoreWidgetRegistry.getDefaultAlignment(type);
@@ -18202,12 +18272,26 @@ class WidgetContainer extends React__namespace.Component {
           widget_type: type,
           widget_id: this.props.id
         },
-        onError: () => {
+        onError: error => {
+          // TODO(LEMS-2826): Remove analytics event in LEMS-2826 in favor of ti below.
           analytics.onAnalyticsEvent({
             type: "perseus:widget-rendering-error",
             payload: {
+              widgetSubType: subType,
               widgetType: type,
-              widgetId: this.props.id
+              widgetId: this.props.id,
+              message: error.message,
+              userAgent: userAgent
+            }
+          });
+          analytics.onAnalyticsEvent({
+            type: "perseus:widget-rendering-error:ti",
+            payload: {
+              widgetSubType: subType,
+              widgetType: type,
+              widgetId: this.props.id,
+              message: error.message,
+              userAgent: userAgent
             }
           });
         }
@@ -20650,7 +20734,6 @@ var NumericInput$1 = {
   widget: NumericInput,
   transform: propsTransform,
   isLintable: true,
-  getPublicWidgetOptions: perseusCore.getNumericInputPublicWidgetOptions,
   // TODO(LEMS-2656): remove TS suppression
   // @ts-expect-error: Type 'Rubric' is not assignable to type 'PerseusNumericInputRubric'
   getOneCorrectAnswerFromRubric(rubric) {
@@ -21457,7 +21540,10 @@ class HighlightTooltip extends React__namespace.PureComponent {
     // using div instead of TooltipContent because
     // TooltipContent wouldn't let me overwrite
     // user-select and onClick
-    const content = /*#__PURE__*/React__namespace.createElement("div", {
+    const content =
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- TODO(LEMS-2871): Address a11y error
+    React__namespace.createElement("div", {
       className: aphrodite.css(styles$x.tooltipLabel),
       onClick: this.props.onClick
     }, this.props.label);
@@ -21468,14 +21554,18 @@ class HighlightTooltip extends React__namespace.PureComponent {
       top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
       height: 0
     };
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      style: style,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave
-    }, /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
-      content: content,
-      opened: true
-    }, /*#__PURE__*/React__namespace.createElement("div", null)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("div", {
+        style: style,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave
+      }, /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+        content: content,
+        opened: true
+      }, /*#__PURE__*/React__namespace.createElement("div", null)))
+    );
   }
 }
 const styles$x = aphrodite.StyleSheet.create({
@@ -24192,15 +24282,19 @@ const BaseRadio = function (_ref) {
     // content somehow? Would changing our choice of key
     // somehow break something happening inside a choice's
     // child Renderers, by changing when we mount/unmount?
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      key: i,
-      ref: e => listElem = e,
-      className: className,
-      onClick: clickHandler,
-      onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
-    }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
-      ref: ref
-    })));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("li", {
+        key: i,
+        ref: e => listElem = e,
+        className: className,
+        onClick: clickHandler,
+        onTouchStart: labelWrap ? undefined : captureScratchpadTouchStart$1
+      }, /*#__PURE__*/React__namespace.createElement(Element, _extends({}, elementProps, {
+        ref: ref
+      })))
+    );
   })));
 
   // Allow for horizontal scrolling if content is too wide, which may be
@@ -24745,8 +24839,7 @@ var Radio = {
   staticTransform: transform,
   version: perseusCore.radioLogic.version,
   propUpgrades: perseusCore.radioLogic.widgetOptionsUpgrades,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getRadioPublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable import/no-named-as-default */
@@ -25035,8 +25128,7 @@ var Categorizer$1 = {
   staticTransform: editorProps => {
     return ___default["default"].pick(editorProps, "items", "categories", "values", "randomizeItems");
   },
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getCategorizerPublicWidgetOptions
+  isLintable: true
 };
 
 /**
@@ -25246,8 +25338,7 @@ var CSProgram$1 = {
   name: "cs-program",
   displayName: "CS Program",
   widget: CSProgram,
-  hidden: true,
-  getPublicWidgetOptions: perseusCore.getCSProgramPublicWidgetOptions
+  hidden: true
 };
 
 const getPromptJSON$l = renderProps => {
@@ -25463,8 +25554,7 @@ var Dropdown$1 = {
   displayName: "Drop down",
   accessible: true,
   widget: Dropdown,
-  transform: optionsTransform,
-  getPublicWidgetOptions: perseusCore.getDropdownPublicWidgetOptions
+  transform: optionsTransform
 };
 
 const getPromptJSON$j = renderProps => {
@@ -26956,8 +27046,7 @@ var Grapher$1 = {
   hidden: true,
   widget: Grapher,
   transform: propTransform$2,
-  staticTransform: staticTransform$4,
-  getPublicWidgetOptions: perseusCore.getGrapherPublicWidgetOptions
+  staticTransform: staticTransform$4
 };
 
 const getPromptJSON$f = rendererJSON => {
@@ -27251,12 +27340,16 @@ class Iframe extends React__namespace.Component {
     //  that we need. This makes it a bit safer in case some content
     //  creator "went wild".
     // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-    return /*#__PURE__*/React__namespace.createElement("iframe", {
-      sandbox: sandboxProperties,
-      style: style,
-      src: url,
-      allowFullScreen: this.props.allowFullScreen
-    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/iframe-has-title -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("iframe", {
+        sandbox: sandboxProperties,
+        style: style,
+        src: url,
+        allowFullScreen: this.props.allowFullScreen
+      })
+    );
   }
 }
 var Iframe$1 = {
@@ -27264,8 +27357,7 @@ var Iframe$1 = {
   displayName: "Iframe (deprecated)",
   widget: Iframe,
   // Let's not expose it to all content creators yet
-  hidden: true,
-  getPublicWidgetOptions: perseusCore.getIFramePublicWidgetOptions
+  hidden: true
 };
 
 const getPromptJSON$d = renderProps => {
@@ -27282,7 +27374,7 @@ const getPromptJSON$d = renderProps => {
 
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null,
   width: 0,
   height: 0
@@ -27297,7 +27389,7 @@ class ImageWidget extends React__namespace.Component {
     title: "",
     range: [defaultRange, defaultRange],
     box: [defaultBoxSize, defaultBoxSize],
-    backgroundImage: defaultBackgroundImage$2,
+    backgroundImage: defaultBackgroundImage$1,
     labels: [],
     alt: "",
     caption: "",
@@ -28068,306 +28160,6 @@ var Interactive = {
   hidden: true
 };
 
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-const defaultBackgroundImage$1 = {
-  url: null
-};
-
-/* Style objects */
-const defaultInstructionsStyle = {
-  fontStyle: "italic",
-  fontWeight: "bold",
-  fontSize: "32px",
-  width: "100%",
-  height: "100%",
-  textAlign: "center",
-  backgroundColor: "white",
-  position: "absolute",
-  zIndex: 1,
-  transition: "opacity .25s ease-in-out"
-};
-const instructionsTextStyle = {
-  position: "relative",
-  top: "25%"
-};
-function numSteps$1(range, step) {
-  return Math.floor((range[1] - range[0]) / step);
-}
-class Graph extends React__namespace.Component {
-  graphieDivRef = /*#__PURE__*/React__namespace.createRef();
-  protractor;
-  ruler;
-  _graphie;
-  // @ts-expect-error - TS2564 - Property '_hasSetupGraphieThisUpdate' has no initializer and is not definitely assigned in the constructor.
-  _hasSetupGraphieThisUpdate;
-  // @ts-expect-error - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
-  _shouldSetupGraphie;
-  static defaultProps = {
-    labels: ["x", "y"],
-    range: [[-10, 10], [-10, 10]],
-    step: [1, 1],
-    gridStep: [1, 1],
-    snapStep: [0.5, 0.5],
-    markings: "graph",
-    backgroundImage: defaultBackgroundImage$1,
-    showProtractor: false,
-    showRuler: false,
-    rulerLabel: "",
-    rulerTicks: 10,
-    isMobile: false
-  };
-  componentDidMount() {
-    this._setupGraphie(true);
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const potentialChanges = ["labels", "range", "step", "markings", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep"];
-    const self = this;
-    ___default["default"].each(potentialChanges, function (prop) {
-      if (!___default["default"].isEqual(self.props[prop], nextProps[prop])) {
-        self._shouldSetupGraphie = true;
-      }
-    });
-  }
-  componentDidUpdate() {
-    // Only setupGraphie once per componentDidUpdate().
-    // See explanation in setupGraphie().
-    this._hasSetupGraphieThisUpdate = false;
-    if (this._shouldSetupGraphie) {
-      this._setupGraphie(false);
-      this._shouldSetupGraphie = false;
-    }
-  }
-
-  /* Reset the graphie canvas to its initial state
-   *
-   * Use when re-rendering the parent component and you need a blank
-   * graphie.
-   */
-  reset = () => {
-    this._setupGraphie(false);
-  };
-  graphie = () => {
-    return this._graphie;
-  };
-  pointsFromNormalized = (coordsList, noSnap) => {
-    const self = this;
-    return ___default["default"].map(coordsList, function (coords) {
-      return ___default["default"].map(coords, function (coord, i) {
-        const range = self.props.range[i];
-        if (noSnap) {
-          return range[0] + (range[1] - range[0]) * coord;
-        }
-        const step = self.props.step[i];
-        const nSteps = numSteps$1(range, step);
-        const tick = Math.round(coord * nSteps);
-        return range[0] + step * tick;
-      });
-    });
-  };
-  _setupGraphie = initialMount => {
-    // Only setupGraphie once per componentDidUpdate().
-    // This prevents this component from rendering graphie
-    // and then immediately re-render graphie because its
-    // parent component asked it to. This will happen when
-    // props on the parent and props on this component both
-    // require graphie to be re-rendered.
-    if (this._hasSetupGraphieThisUpdate) {
-      return;
-    }
-    const graphieDiv = this.graphieDivRef.current;
-    // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
-    $__default["default"](graphieDiv).empty();
-
-    // Content creators may need to explicitly add the dollar signs so the
-    // strings are picked up by our translation tools. However, these math
-    // annotations are redundant because we already render all graph labels
-    // in math mode. For example, a label value of `$\text{Dollars}$` will
-    // be translatable, but we only want to pass the string
-    // `\text{Dollars}` to the Graph widget.
-    const labels = this.props.labels.map(label => Util.unescapeMathMode(label));
-    const range = this.props.range;
-    // @ts-expect-error - TS2345: Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLElement'.
-    const graphie = this._graphie = GraphUtils.createGraphie(graphieDiv);
-    const gridConfig = this._getGridConfig();
-    // @ts-expect-error - TS2339: Property 'snap' does not exist on type 'Graphie'.
-    graphie.snap = this.props.snapStep;
-    if (this.props.markings === "graph") {
-      graphie.graphInit({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        axisArrows: "<->",
-        labelFormat: function (s) {
-          return "\\small{" + s + "}";
-        },
-        gridStep: this.props.gridStep,
-        tickStep: kmath.vector.map(gridConfig, g => g.tickStep),
-        labelStep: 1,
-        unityLabels: kmath.vector.map(gridConfig, g => g.unityLabel),
-        isMobile: this.props.isMobile
-      });
-      graphie.label([0, range[1][1]], labels[1], this.props.isMobile ? "below right" : "above");
-      graphie.label([range[0][1], 0], labels[0], this.props.isMobile ? "above left" : "right");
-    } else if (this.props.markings === "grid") {
-      graphie.graphInit({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        gridStep: this.props.gridStep,
-        axes: false,
-        ticks: false,
-        labels: false,
-        isMobile: this.props.isMobile
-      });
-    } else if (this.props.markings === "none") {
-      graphie.init({
-        range: range,
-        scale: kmath.vector.map(gridConfig, g => g.scale),
-        isMobile: this.props.isMobile
-      });
-    }
-
-    // Add instructions just before mouse layer
-    const visible = 0.5;
-    const invisible = 0.0;
-    let $instructionsWrapper;
-    if (this.props.instructions) {
-      $instructionsWrapper = $__default["default"]("<div/>");
-      ___default["default"].each(defaultInstructionsStyle, function (value, key) {
-        $instructionsWrapper.css(key, value);
-      });
-      $instructionsWrapper.css("opacity", visible);
-      const $instructions = $__default["default"]("<span/>", {
-        text: this.props.instructions
-      });
-      ___default["default"].each(instructionsTextStyle, function (value, key) {
-        $instructions.css(key, value);
-      });
-      $instructionsWrapper.append($instructions);
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'append' does not exist on type 'JQueryStatic'.
-      $__default["default"](graphieDiv).append($instructionsWrapper);
-    } else {
-      $instructionsWrapper = undefined;
-    }
-
-    // Add some handlers for instructions text (if necessary)
-    const onMouseDown = $instructionsWrapper || this.props.onMouseDown ? ___default["default"].bind(function (coord) {
-      if ($instructionsWrapper) {
-        $instructionsWrapper.remove();
-        $instructionsWrapper = null;
-      }
-      // eslint-disable-next-line @babel/no-invalid-this
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      // eslint-disable-next-line @babel/no-invalid-this
-      this.props.onMouseDown(coord);
-    }, this) : undefined;
-    const onMouseOver = $instructionsWrapper ? function () {
-      $instructionsWrapper?.css("opacity", invisible);
-    } : undefined;
-    const onMouseOut = $instructionsWrapper ? function () {
-      $instructionsWrapper?.css("opacity", visible);
-    } : undefined;
-    /* eslint-enable indent */
-
-    graphie.addMouseLayer({
-      onClick: this.props.onClick,
-      onMouseDown: onMouseDown,
-      onMouseOver: onMouseOver,
-      onMouseOut: onMouseOut,
-      onMouseMove: this.props.onMouseMove,
-      allowScratchpad: true,
-      setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
-    });
-    this._updateProtractor();
-    this._updateRuler();
-
-    // We set this flag before jumping into our callback
-    // to avoid recursing if our callback calls reset() itself
-    this._hasSetupGraphieThisUpdate = true;
-    if (!initialMount && this.props.onGraphieUpdated) {
-      // Calling a parent callback in componentDidMount is bad and
-      // results in hard-to-reason-about lifecycle problems (esp. with
-      // refs), so we do it only on update and rely on the parent to
-      // query for the graphie object on initial mount
-      this.props.onGraphieUpdated(graphie);
-    }
-  };
-  _getGridConfig = () => {
-    return kmath.vector.map(this.props.step, (step, i) => Util.gridDimensionConfig(step, this.props.range[i], this.props.box[i], this.props.gridStep[i]));
-  };
-  _updateProtractor = () => {
-    if (this.protractor) {
-      this.protractor.remove();
-    }
-    if (this.props.showProtractor) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const coord = this.pointsFromNormalized([[0.5, 0.05]])[0];
-      this.protractor = this._graphie.protractor(coord);
-    }
-  };
-  _updateRuler = () => {
-    if (this.ruler) {
-      this.ruler.remove();
-    }
-    if (this.props.showRuler) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const coord = this.pointsFromNormalized([[0.5, 0.25]])[0];
-      const extent = this._graphie.range[0][1] - this._graphie.range[0][0];
-      this.ruler = this._graphie.ruler({
-        center: coord,
-        label: this.props.rulerLabel,
-        pixelsPerUnit: this._graphie.scale[0],
-        ticksPerUnit: this.props.rulerTicks,
-        units: Math.round(0.8 * extent)
-      });
-    }
-  };
-  toJSON = () => {
-    return ___default["default"].pick(this.props, "range", "step", "markings", "labels", "backgroundImage", "showProtractor", "showRuler", "rulerLabel", "rulerTicks", "gridStep", "snapStep");
-  };
-  render() {
-    let image;
-    const imageData = this.props.backgroundImage;
-    if (imageData.url) {
-      const scale = this.props.box[0] / interactiveSizes$1.defaultBoxSize;
-      image = /*#__PURE__*/React__namespace.createElement(context$1.Consumer, null, _ref => {
-        let {
-          setAssetStatus
-        } = _ref;
-        return /*#__PURE__*/React__namespace.createElement(SvgImage
-        // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-        , {
-          src: imageData.url,
-          width: imageData.width,
-          height: imageData.height,
-          scale: scale,
-          responsive: false,
-          setAssetStatus: setAssetStatus
-        });
-      });
-    } else {
-      image = null;
-    }
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie-container blank-background",
-      style: {
-        width: this.props.box[0],
-        height: this.props.box[1]
-      }
-      // @ts-expect-error - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
-      ,
-      onMouseOut: this.onMouseOut
-      // @ts-expect-error - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
-      ,
-      onMouseOver: this.onMouseOver
-      // @ts-expect-error - TS2339 - Property 'onClick' does not exist on type 'Graph'.
-      ,
-      onClick: this.onClick
-    }, image, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "graphie",
-      ref: this.graphieDivRef
-    }));
-  }
-}
-
 const getPromptJSON$b = (props, userInput) => {
   return {
     type: "interactive-graph",
@@ -28932,13 +28724,19 @@ function escapeIfUnescaped(character) {
   }
 }
 
-function AxisLabels() {
+function AxisLabels(_ref) {
+  let {
+    i18n
+  } = _ref;
   const {
     range,
     labels,
     width,
     height
   } = useGraphConfig();
+  const {
+    strings
+  } = i18n;
   const yAxisLabelLocation = [0, range[Y][MAX]];
   const xAxisLabelLocation = [range[X][MAX], 0];
   const [xAxisLabelText, yAxisLabelText] = labels;
@@ -28956,6 +28754,7 @@ function AxisLabels() {
     TeX
   } = getDependencies();
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
+    "aria-label": strings.xAxis,
     style: {
       position: "absolute",
       left: x1,
@@ -28964,6 +28763,7 @@ function AxisLabels() {
       transform: "translate(7px, -50%)"
     }
   }, /*#__PURE__*/React__default["default"].createElement(TeX, null, replaceOutsideTeX(xAxisLabelText))), /*#__PURE__*/React__default["default"].createElement("span", {
+    "aria-label": strings.yAxis,
     style: {
       position: "absolute",
       left: x2,
@@ -29772,7 +29572,6 @@ class RangeInput extends React__namespace.Component {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   ButtonGroup: ButtonGroup,
-  Graph: Graph,
   Graphie: Graphie,
   HUD: HUD,
   Icon: Icon,
@@ -29916,9 +29715,9 @@ const LockedFunction = props => {
   const {
     color,
     strokeStyle,
-    directionalAxis,
-    domain
+    directionalAxis
   } = props;
+  const domain = props.domain ? [Number.isFinite(props.domain[0]) ? props.domain[0] : -Infinity, Number.isFinite(props.domain[1]) ? props.domain[1] : Infinity] : undefined;
   const plotProps = {
     color: perseusCore.lockedFigureColors[color],
     style: strokeStyle,
@@ -29998,6 +29797,11 @@ function Vector(props) {
 }
 
 function srFormatNumber(a, locale, maximumFractionDigits) {
+  const piBasedNumber = getPiMultiple(a);
+  if (piBasedNumber) {
+    return piBasedNumber;
+  }
+
   // adding zero here converts negative zero to positive zero.
   return (0 + a).toLocaleString(locale, {
     maximumFractionDigits: maximumFractionDigits ?? 3,
@@ -30005,6 +29809,77 @@ function srFormatNumber(a, locale, maximumFractionDigits) {
   });
 }
 
+// Exported for testing
+function getPiMultiple(a) {
+  // - Save some calculations by checking if this is an integer first.
+  //   If a is an integer, it's definitely not a multiple of π.
+  // - 0 should not be presented as a multiple of π.
+  // - If a is greater than 1e12, then it thinks that it's always a
+  //   multiple of π even when it's not, due to rounding errors.
+  if (Number.isInteger(a) || a === 0 || a > 1e12) {
+    return null;
+  }
+
+  // Figure out the coefficient before the π.
+  // Example: If a = π/2, then piCoefficient = 0.5
+  // Example: If a = 2π, then piCoefficient = 2
+  const piCoefficient = a / Math.PI;
+  // Truncate the coefficient to account for floating point errors.
+  // π calculations are only accurate up to precision of 1e-12.
+  const truncatedCoefficient = parseFloat(piCoefficient.toFixed(12));
+
+  // If the coefficient is already an integer, then the number
+  // is a multiple of π. Return it here.
+  // Example: If a = 2π, then truncatedCoefficient = 2, so return "2π"
+  if (Number.isInteger(truncatedCoefficient)) {
+    // Return "π" rather than "1π".
+    if (truncatedCoefficient === 1) {
+      return "π";
+    }
+
+    // Return "-π" rather than "-1π".
+    if (truncatedCoefficient === -1) {
+      return "-π";
+    }
+    return truncatedCoefficient + "π";
+  }
+
+  // If the coefficient is not an integer, then we need to
+  // check if it's a multiple of π/2, π/3, π/4, or π/6.
+  // These are π-based values on a unit circle.
+  const acceptableDivisors = [2, 3, 4, 6];
+
+  // Loop through the acceptable divisors and check if the
+  // coefficient is a multiple of (1/divisor).
+  // Example: If a = 5π/6, the coeff is 5/6, which is a multiple of 1/6.
+  // So we return "5π/6".
+  for (const divisor of acceptableDivisors) {
+    // Check if the coefficient is a multiple of (1/divisor) by
+    // multiplying the coefficient by the divisor and checking if
+    // the result is an integer.
+    // Example: If a = 5π/6, then piCoefficient = 5/6. We multiply
+    // by 6 (divisor) to get 5, which is an integer.
+    const coefficientNumerator = parseFloat(
+    // π calculations are only accurate up to precision of 1e-12.
+    (piCoefficient * divisor).toFixed(12));
+    if (Number.isInteger(coefficientNumerator)) {
+      // Handle the case where the coefficient numberator is just 1.
+      // We don't want to write "π/6" as "1π/6"
+      if (coefficientNumerator === 1) {
+        return "π/" + divisor;
+      }
+
+      // Handle the case where the coefficient numberator is just -1.
+      // We don't want to write "π/6" as "-1π/6"
+      if (coefficientNumerator === -1) {
+        return "-π/" + divisor;
+      }
+      return coefficientNumerator + "π/" + divisor;
+    }
+  }
+  return null;
+}
+
 /**
  * Given a ray and a rectangular box, find the point where the ray intersects
  * the edge of the box. Assumes the `initialPoint` is inside the box.
@@ -31172,6 +31047,34 @@ function range(min, max) {
   return result;
 }
 
+function Hairlines(props) {
+  const {
+    point
+  } = props;
+  const {
+    range
+  } = useGraphConfig();
+  const [[xMin, xMax], [yMin, yMax]] = range;
+  const [[x, y]] = useTransformVectorsToPixels(point);
+  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
+  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
+  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
+  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
+  return /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
+    x1: verticalStartX,
+    y1: y,
+    x2: verticalEndX,
+    y2: y,
+    stroke: wonderBlocksTokens.color.blue
+  }), /*#__PURE__*/React__namespace.createElement("line", {
+    x1: x,
+    y1: horizontalStartY,
+    x2: x,
+    y2: horizontalEndY,
+    stroke: wonderBlocksTokens.color.blue
+  }));
+}
+
 // The hitbox size of 48px by 48px is preserved from the legacy interactive
 // graph.
 const hitboxSizePx = 48;
@@ -31181,7 +31084,6 @@ const hitboxSizePx = 48;
 // on an interactive graph.
 const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   const {
-    range,
     markings,
     showTooltips
   } = useGraphConfig();
@@ -31189,6 +31091,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     point,
     color = wonderBlocksTokens.color.blue,
     dragging,
+    focused,
     cursor,
     showFocusRing,
     onClick = () => {}
@@ -31202,25 +31105,7 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
   })?.[0] ?? "blue";
   const pointClasses = classNames("movable-point", dragging && "movable-point--dragging", showFocusRing && "movable-point--focus");
   const [[x, y]] = useTransformVectorsToPixels(point);
-  const [[xMin, xMax], [yMin, yMax]] = range;
-  const [[verticalStartX]] = useTransformVectorsToPixels([xMin, 0]);
-  const [[verticalEndX]] = useTransformVectorsToPixels([xMax, 0]);
-  const [[_, horizontalStartY]] = useTransformVectorsToPixels([0, yMin]);
-  const [[__, horizontalEndY]] = useTransformVectorsToPixels([0, yMax]);
-  const showHairlines = dragging && markings !== "none";
-  const hairlines = /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("line", {
-    x1: verticalStartX,
-    y1: y,
-    x2: verticalEndX,
-    y2: y,
-    stroke: color
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: x,
-    y1: horizontalStartY,
-    x2: x,
-    y2: horizontalEndY,
-    stroke: color
-  }));
+  const showHairlines = (dragging || focused) && markings !== "none";
   const svgForPoint = /*#__PURE__*/React__namespace.createElement("g", {
     ref: hitboxRef,
     className: pointClasses,
@@ -31256,7 +31141,9 @@ const MovablePointView = /*#__PURE__*/React.forwardRef((props, hitboxRef) => {
     },
     "data-testid": "movable-point__center"
   }));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && hairlines, showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement(Hairlines, {
+    point: point
+  }), showTooltips ? /*#__PURE__*/React__namespace.createElement(Tooltip__default["default"], {
     autoUpdate: true,
     backgroundColor: wbColorName,
     content: `(${point[X]}, ${point[Y]})`,
@@ -31352,6 +31239,7 @@ function useControlPoint(params) {
     },
     point: point,
     dragging: dragging,
+    focused: focused,
     color: color,
     ref: visiblePointRef,
     showFocusRing: focused
@@ -31569,13 +31457,13 @@ const {
   getClockwiseAngle: getClockwiseAngle$2,
   polar: polar$1
 } = kmath.angles;
-function renderAngleGraph(state, dispatch) {
+function renderAngleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(AngleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getAngleGraphDescription(state, i18n)
   };
 }
 function AngleGraph(props) {
@@ -31586,6 +31474,9 @@ function AngleGraph(props) {
   const {
     graphDimensionsInPixels
   } = useGraphConfig();
+  const i18n = usePerseusI18n();
+  const id = React__namespace.useId();
+  const descriptionId = id + "-description";
   const {
     coords,
     showAngles,
@@ -31635,80 +31526,106 @@ function AngleGraph(props) {
     showAngles: showAngles || false // Whether to show the angle or not
   };
 
+  // Aria strings
   const {
-    strings,
-    locale
-  } = usePerseusI18n();
-  const angleMeasure = srFormatNumber(getClockwiseAngle$2([endPoints[0], centerPoint, endPoints[1]], allowReflexAngles), locale);
-  const wholeAngleAriaLabel = strings.srAngleGraphAriaLabel;
-  const wholeAngleDescription = strings.srAngleGraphAriaDescription({
-    angleMeasure,
-    vertexX: srFormatNumber(coords[1][X], locale),
-    vertexY: srFormatNumber(coords[1][Y], locale),
-    startingSideX: srFormatNumber(coords[2][X], locale),
-    startingSideY: srFormatNumber(coords[2][Y], locale),
-    endingSideX: srFormatNumber(coords[0][X], locale),
-    endingSideY: srFormatNumber(coords[0][Y], locale)
-  });
-  const formatCoordinates = (x, y) => ({
-    x: srFormatNumber(x, locale),
-    y: srFormatNumber(y, locale)
-  });
-  const formatSideAriaLabel = (side, newPoint) => {
-    const formattedCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = side === "terminal" ? strings.srAngleSideAtCoordinates({
-      point: 1,
-      side: "terminal side",
-      ...formattedCoordinates
-    }) : strings.srAngleSideAtCoordinates({
-      point: 3,
-      side: "initial side",
-      ...formattedCoordinates
-    });
-    return label;
-  };
-  const formatVertexAriaLabel = newPoint => {
-    const formattedVertexCoordinates = formatCoordinates(newPoint[X], newPoint[Y]);
-    const label = showAngles ? strings.srAngleVertexAtCoordinatesWithAngleMeasure({
-      ...formattedVertexCoordinates,
-      angleMeasure: angleMeasure
-    }) : strings.srAngleSideAtCoordinates({
-      point: 2,
-      side: "vertex",
-      ...formattedVertexCoordinates
-    });
-    return label;
-  };
-  const initialSideAriaLabel = formatSideAriaLabel("initial", coords[2]);
-  const terminalSideAriaLabel = formatSideAriaLabel("terminal", coords[0]);
-  const vertexAriaLabel = formatVertexAriaLabel(coords[1]);
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  } = describeAngleGraph(graphState, i18n);
 
   // Render the lines, angle, and then movable points
   return /*#__PURE__*/React__namespace.createElement("g", {
-    "aria-label": wholeAngleAriaLabel,
-    "aria-describedby": "angle-description"
+    "aria-label": srAngleGraphAriaLabel,
+    "aria-describedby": descriptionId
   }, svgLines, /*#__PURE__*/React__namespace.createElement(Angle, angleParams), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[1],
     sequenceNumber: 1,
     constrain: p => p,
     onMove: destination => dispatch(actions.angle.movePoint(1, destination)),
-    ariaLabel: vertexAriaLabel
+    ariaLabel: srAngleVertex
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[0],
     sequenceNumber: 2,
     constrain: getAngleSideConstraint(coords[0], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(0, destination)),
-    ariaLabel: terminalSideAriaLabel
+    ariaLabel: srAngleEndingSide
   }), /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
     point: coords[2],
     sequenceNumber: 3,
     constrain: getAngleSideConstraint(coords[2], coords[1], snapDegrees || 1),
     onMove: destination => dispatch(actions.angle.movePoint(2, destination)),
-    ariaLabel: initialSideAriaLabel
+    ariaLabel: srAngleStartingSide
   }), /*#__PURE__*/React__namespace.createElement("g", {
-    id: "angle-description",
+    id: descriptionId,
     style: a11y.srOnly
-  }, wholeAngleDescription));
+  }, srAngleGraphAriaDescription));
+}
+function getAngleGraphDescription(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  return strings.srInteractiveElements({
+    elements: strings.srAngleInteractiveElements({
+      vertexX: srFormatNumber(coords[1][X], locale),
+      vertexY: srFormatNumber(coords[1][Y], locale),
+      startingSideX: srFormatNumber(coords[2][X], locale),
+      startingSideY: srFormatNumber(coords[2][Y], locale),
+      endingSideX: srFormatNumber(coords[0][X], locale),
+      endingSideY: srFormatNumber(coords[0][Y], locale)
+    })
+  });
+}
+function describeAngleGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords,
+    allowReflexAngles,
+    showAngles
+  } = state;
+  const [endingSide, vertex, startingSide] = coords;
+  const angleMeasure = srFormatNumber(getClockwiseAngle$2(coords, allowReflexAngles), locale);
+  const srAngleGraphAriaLabel = strings.srAngleGraphAriaLabel;
+  const srAngleGraphAriaDescription = strings.srAngleGraphAriaDescription({
+    angleMeasure,
+    vertexX: srFormatNumber(vertex[X], locale),
+    vertexY: srFormatNumber(vertex[Y], locale),
+    startingSideX: srFormatNumber(startingSide[X], locale),
+    startingSideY: srFormatNumber(startingSide[Y], locale),
+    endingSideX: srFormatNumber(endingSide[X], locale),
+    endingSideY: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleStartingSide = strings.srAngleStartingSide({
+    x: srFormatNumber(startingSide[X], locale),
+    y: srFormatNumber(startingSide[Y], locale)
+  });
+  const srAngleEndingSide = strings.srAngleEndingSide({
+    x: srFormatNumber(endingSide[X], locale),
+    y: srFormatNumber(endingSide[Y], locale)
+  });
+  const srAngleVertex = showAngles ? strings.srAngleVertexWithAngleMeasure({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale),
+    angleMeasure
+  }) : strings.srAngleVertex({
+    x: srFormatNumber(vertex[X], locale),
+    y: srFormatNumber(vertex[Y], locale)
+  });
+  return {
+    srAngleGraphAriaLabel,
+    srAngleGraphAriaDescription,
+    srAngleStartingSide,
+    srAngleEndingSide,
+    srAngleVertex
+  };
 }
 const positiveX = [1, 0];
 const negativeX = [-1, 0];
@@ -31852,17 +31769,16 @@ function getRadius(graph) {
   return Math.sqrt(Math.pow(edgeX - centerX, 2) + Math.pow(edgeY - centerY, 2));
 }
 
-function renderCircleGraph(state, dispatch) {
+function renderCircleGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(CircleGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(CircleGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getCircleGraphDescription(state, i18n)
   };
 }
+// Exported for testing
 function CircleGraph(props) {
   const {
     dispatch,
@@ -31955,6 +31871,7 @@ function MovableCircle(props) {
     snapStep,
     disableKeyboardInteraction
   } = useGraphConfig();
+  const [focused, setFocused] = React__namespace.useState(false);
   const draggableRef = React.useRef(null);
   const {
     dragging
@@ -31973,7 +31890,9 @@ function MovableCircle(props) {
     ref: draggableRef,
     role: "button",
     tabIndex: disableKeyboardInteraction ? -1 : 0,
-    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`
+    className: `movable-circle ${dragging ? "movable-circle--dragging" : ""}`,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
   }, /*#__PURE__*/React__namespace.createElement("ellipse", {
     className: "focus-ring",
     cx: centerPx[X],
@@ -31988,19 +31907,29 @@ function MovableCircle(props) {
     rx: radiiPx[X],
     ry: radiiPx[Y]
   }), /*#__PURE__*/React__namespace.createElement(DragHandle, {
-    center: center
+    center: center,
+    dragging: dragging,
+    focused: focused
   }));
 }
 const dragHandleDimensions = [24, 14];
 const dragHandleDotPositions = crossProduct([-4.4, 0, 4.4], [-2.1, 2.1]);
 function DragHandle(props) {
   const {
-    center
+    center,
+    dragging,
+    focused
   } = props;
-  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const [centerPx] = useTransformVectorsToPixels(center);
+  const {
+    markings
+  } = useGraphConfig();
+  const cornerRadius = Math.min(...dragHandleDimensions) / 2;
   const topLeft = mafs.vec.sub(centerPx, mafs.vec.scale(dragHandleDimensions, 0.5));
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("rect", {
+  const showHairlines = (dragging || focused) && markings !== "none";
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showHairlines && /*#__PURE__*/React__namespace.createElement(Hairlines, {
+    point: center
+  }), /*#__PURE__*/React__namespace.createElement("rect", {
     className: "movable-circle-handle",
     x: topLeft[X],
     y: topLeft[Y],
@@ -32027,14 +31956,7 @@ function crossProduct(as, bs) {
   }
   return result;
 }
-function CircleGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that CircleGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getCircleGraphDescription(state, i18n) {
   const strings = describeCircleGraph(state, i18n);
   return strings.srCircleInteractiveElement;
 }
@@ -32087,15 +32009,13 @@ function describeCircleGraph(state, i18n) {
   };
 }
 
-function renderLinearGraph(state, dispatch) {
+function renderLinearGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(LinearGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(LinearGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearGraphDescription(state, i18n)
   };
 }
 const LinearGraph = (props, key) => {
@@ -32160,14 +32080,7 @@ const LinearGraph = (props, key) => {
     style: a11y.srOnly
   }, slopeString));
 };
-function LinearGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that LinearGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getLinearGraphDescription(state, i18n) {
   const strings = describeLinearGraph(state, i18n);
   return strings.srLinearInteractiveElement;
 }
@@ -32211,15 +32124,13 @@ function describeLinearGraph(state, i18n) {
   };
 }
 
-function renderLinearSystemGraph(state, dispatch) {
+function renderLinearSystemGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(LinearSystemGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(LinearSystemGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getLinearSystemGraphDescription(state, i18n)
   };
 }
 const LinearSystemGraph = props => {
@@ -32312,19 +32223,9 @@ const LinearSystemGraph = props => {
     }, slopeDescription));
   }));
 };
-function LinearSystemGraphDescription(_ref3) {
-  let {
-    state
-  } = _ref3;
-  // The reason that LinearSystemGraphDescription is a component (rather
-  // than a function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeLinearSystemGraph(state, i18n);
-}
 
 // Exported for testing
-function describeLinearSystemGraph(state, i18n) {
+function getLinearSystemGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32350,15 +32251,13 @@ function describeLinearSystemGraph(state, i18n) {
   });
 }
 
-function renderPointGraph(state, dispatch) {
+function renderPointGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(PointGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(PointGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getPointGraphDescription(state, i18n)
   };
 }
 function PointGraph(props) {
@@ -32380,7 +32279,9 @@ function PointGraph(props) {
     if (focusedIndex != null) {
       pointsRef.current[focusedIndex]?.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
   const statefulProps = {
     ...props,
     graphConfig,
@@ -32452,18 +32353,9 @@ function UnlimitedPointGraph(statefulProps) {
     }
   })));
 }
-function PointGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // 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);
-}
 
 // Exported for testing
-function describePointGraph(state, i18n) {
+function getPointGraphDescription(state, i18n) {
   const {
     strings,
     locale
@@ -32471,8 +32363,8 @@ function describePointGraph(state, i18n) {
   if (state.coords.length === 0) {
     return strings.srNoInteractiveElements;
   }
-  const pointDescriptions = state.coords.map((_ref2, index) => {
-    let [x, y] = _ref2;
+  const pointDescriptions = state.coords.map((_ref, index) => {
+    let [x, y] = _ref;
     return strings.srPointAtCoordinates({
       num: index + 1,
       x: srFormatNumber(x, locale),
@@ -32552,7 +32444,9 @@ const PolygonGraph = props => {
     if (focusedIndex != null) {
       pointsRef.current[focusedIndex]?.focus();
     }
-  }, [props.graphState.focusedPointIndex, pointsRef]);
+  }, [props.graphState.focusedPointIndex,
+  // Ensure that we re-focus if a point is deleted.
+  props.graphState.coords.length, pointsRef]);
 
   // If the unlimited polygon is rendered with 3 or more coordinates
   // Close the polygon, but only on first render.
@@ -33135,15 +33029,13 @@ function describeQuadraticGraph(state, i18n) {
   };
 }
 
-function renderRayGraph(state, dispatch) {
+function renderRayGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(RayGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(RayGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getRayGraphDescription(state, i18n)
   };
 }
 const RayGraph = props => {
@@ -33197,14 +33089,7 @@ const RayGraph = props => {
     style: a11y.srOnly
   }, srRayPoints));
 };
-function RayGraphDescription(_ref) {
-  let {
-    state
-  } = _ref;
-  // The reason that RayGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
+function getRayGraphDescription(state, i18n) {
   const strings = describeRayGraph(state, i18n);
   return strings.srRayInteractiveElement;
 }
@@ -33254,15 +33139,13 @@ function describeRayGraph(state, i18n) {
   };
 }
 
-function renderSegmentGraph(state, dispatch) {
+function renderSegmentGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(SegmentGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: /*#__PURE__*/React__namespace.createElement(SegmentGraphDescription, {
-      state: state
-    })
+    interactiveElementsDescription: getSegmentGraphDescription(state, i18n)
   };
 }
 const SegmentGraph = _ref => {
@@ -33356,25 +33239,15 @@ const SegmentGraph = _ref => {
 function getLengthOfSegment(segment) {
   return kmath.point.distanceToPoint(...segment);
 }
-function SegmentGraphDescription(_ref2) {
-  let {
-    state
-  } = _ref2;
-  // The reason that SegmentGraphDescription is a component (rather than a
-  // function that returns a string) is because it needs to use a
-  // hook: `usePerseusI18n`.
-  const i18n = usePerseusI18n();
-  return describeSegmentGraph(state, i18n);
-}
 
 // Exported for testing
-function describeSegmentGraph(state, i18n) {
+function getSegmentGraphDescription(state, i18n) {
   const {
     strings,
     locale
   } = i18n;
-  const segmentDescriptions = state.coords.map((_ref3, index) => {
-    let [point1, point2] = _ref3;
+  const segmentDescriptions = state.coords.map((_ref2, index) => {
+    let [point1, point2] = _ref2;
     return strings.srMultipleSegmentIndividualLabel({
       point1X: srFormatNumber(point1[X], locale),
       point1Y: srFormatNumber(point1[Y], locale),
@@ -33388,13 +33261,13 @@ function describeSegmentGraph(state, i18n) {
   });
 }
 
-function renderSinusoidGraph(state, dispatch) {
+function renderSinusoidGraph(state, dispatch, i18n) {
   return {
     graph: /*#__PURE__*/React__namespace.createElement(SinusoidGraph, {
       graphState: state,
       dispatch: dispatch
     }),
-    interactiveElementsDescription: null
+    interactiveElementsDescription: getSinusoidDescription(state, i18n)
   };
 }
 function SinusoidGraph(props) {
@@ -33402,6 +33275,9 @@ function SinusoidGraph(props) {
     dispatch,
     graphState
   } = props;
+  const i18n = usePerseusI18n();
+  const id = React__namespace.useId();
+  const descriptionId = id + "-description";
 
   // Destructure the coordinates from the graph state
   // Note: The order of the coordinates is important:
@@ -33426,15 +33302,30 @@ function SinusoidGraph(props) {
   if (coeffs !== undefined) {
     coeffRef.current = coeffs;
   }
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
+
+  // Aria strings
+  const {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint
+  } = describeSinusoidGraph(graphState, i18n);
+  return /*#__PURE__*/React__namespace.createElement("g", {
+    // Outer graph minimal description
+    "aria-label": srSinusoidGraph,
+    "aria-describedby": descriptionId
+  }, /*#__PURE__*/React__namespace.createElement(mafs.Plot.OfX, {
     y: x => computeSine(x, coeffRef.current),
     color: wonderBlocksTokens.color.blue
   }), coords.map((coord, i) => /*#__PURE__*/React__namespace.createElement(MovablePoint$1, {
+    ariaLabel: i === 0 ? srSinusoidRootPoint : srSinusoidPeakPoint,
     key: "point-" + i,
     point: coord,
     sequenceNumber: i + 1,
     onMove: destination => dispatch(actions.sinusoid.movePoint(i, destination))
-  })));
+  })), /*#__PURE__*/React__namespace.createElement("g", {
+    id: descriptionId
+  }, srSinusoidDescription));
 }
 
 // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
@@ -33472,6 +33363,52 @@ const getSinusoidCoefficients$1 = coords => {
     verticalOffset
   };
 };
+function getSinusoidDescription(state, i18n) {
+  const strings = describeSinusoidGraph(state, i18n);
+  return strings.srSinusoidInteractiveElements;
+}
+function describeSinusoidGraph(state, i18n) {
+  const {
+    strings,
+    locale
+  } = i18n;
+  const {
+    coords
+  } = state;
+  const [root, peak] = coords;
+  const diffX = Math.abs(peak[X] - root[X]);
+  const diffY = Math.abs(peak[Y] - root[Y]);
+  const srSinusoidGraph = strings.srSinusoidGraph;
+  const srSinusoidDescription = strings.srSinusoidDescription({
+    minValue: srFormatNumber(root[Y] - diffY, locale),
+    maxValue: srFormatNumber(root[Y] + diffY, locale),
+    cycleStart: srFormatNumber(root[X] - 2 * diffX, locale),
+    cycleEnd: srFormatNumber(root[X] + 2 * diffX, locale)
+  });
+  const srSinusoidRootPoint = strings.srSinusoidRootPoint({
+    x: srFormatNumber(root[X], locale),
+    y: srFormatNumber(root[Y], locale)
+  });
+  const srSinusoidPeakPoint = strings.srSinusoidPeakPoint({
+    x: srFormatNumber(peak[X], locale),
+    y: srFormatNumber(peak[Y], locale)
+  });
+  const srSinusoidInteractiveElements = strings.srInteractiveElements({
+    elements: strings.srSinusoidInteractiveElements({
+      point1X: srFormatNumber(root[X], locale),
+      point1Y: srFormatNumber(root[Y], locale),
+      point2X: srFormatNumber(peak[X], locale),
+      point2Y: srFormatNumber(peak[Y], locale)
+    })
+  });
+  return {
+    srSinusoidGraph,
+    srSinusoidDescription,
+    srSinusoidRootPoint,
+    srSinusoidPeakPoint,
+    srSinusoidInteractiveElements
+  };
+}
 
 const {
   calculateAngleInDegrees,
@@ -33642,6 +33579,7 @@ const MafsGraph = props => {
   const descriptionId = `interactive-graph-description-${uniqueId}`;
   const interactiveElementsDescriptionId = `interactive-graph-interactive-elements-description-${uniqueId}`;
   const unlimitedGraphKeyboardPromptId = `unlimited-graph-keyboard-prompt-${uniqueId}`;
+  const instructionsId = `instructions-${uniqueId}`;
   const graphRef = React__namespace.useRef(null);
   const {
     analytics
@@ -33669,6 +33607,7 @@ const MafsGraph = props => {
   const interactionPrompt = isUnlimitedGraphState(state) && state.showKeyboardInteractionInvitation;
   wonderBlocksCore.useOnMountEffect(() => {
     analytics.onAnalyticsEvent({
+      // TODO(LEMS-2827): Remove analytics event in LEMS-2827 in favor of ti below.
       type: "perseus:interactive-graph-widget:rendered",
       payload: {
         type,
@@ -33676,6 +33615,14 @@ const MafsGraph = props => {
         widgetId: "interactive-graph"
       }
     });
+    analytics.onAnalyticsEvent({
+      type: "perseus:widget:rendered:ti",
+      payload: {
+        widgetSubType: type,
+        widgetType: "INTERACTIVE_GRAPH",
+        widgetId: "interactive-graph"
+      }
+    });
   });
   const {
     graph,
@@ -33719,7 +33666,7 @@ const MafsGraph = props => {
       handleKeyboardEvent(event, state, dispatch);
     },
     "aria-label": fullGraphAriaLabel,
-    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId),
+    "aria-describedby": describedByIds(fullGraphAriaDescription && descriptionId, interactiveElementsDescription && interactiveElementsDescriptionId, isUnlimitedGraphState(state) && unlimitedGraphKeyboardPromptId, state.type !== "none" && instructionsId),
     ref: graphRef,
     tabIndex: 0,
     onFocus: event => {
@@ -33736,7 +33683,11 @@ const MafsGraph = props => {
     id: interactiveElementsDescriptionId,
     tabIndex: -1,
     className: "mafs-sr-only"
-  }, interactiveElementsDescription), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
+  }, interactiveElementsDescription), state.type !== "none" && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    id: instructionsId,
+    tabIndex: -1,
+    className: "mafs-sr-only"
+  }, isUnlimitedGraphState(state) ? strings.srUnlimitedGraphInstructions : strings.srGraphInstructions), /*#__PURE__*/React__namespace.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
@@ -33745,7 +33696,9 @@ const MafsGraph = props => {
       bottom: 0,
       left: 0
     }
-  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, null)), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
+  }, (props.markings === "graph" || props.markings === "axes") && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(AxisLabels, {
+    i18n: i18n
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
   // If we have locked figures, we set aria-hidden
   // to false so that screen readers can read the
   // locked figures. If we don't have any locked
@@ -34082,25 +34035,25 @@ const renderGraphElements = props => {
   } = state;
   switch (type) {
     case "angle":
-      return renderAngleGraph(state, dispatch);
+      return renderAngleGraph(state, dispatch, i18n);
     case "segment":
-      return renderSegmentGraph(state, dispatch);
+      return renderSegmentGraph(state, dispatch, i18n);
     case "linear-system":
-      return renderLinearSystemGraph(state, dispatch);
+      return renderLinearSystemGraph(state, dispatch, i18n);
     case "linear":
-      return renderLinearGraph(state, dispatch);
+      return renderLinearGraph(state, dispatch, i18n);
     case "ray":
-      return renderRayGraph(state, dispatch);
+      return renderRayGraph(state, dispatch, i18n);
     case "polygon":
       return renderPolygonGraph(state, dispatch, i18n, markings);
     case "point":
-      return renderPointGraph(state, dispatch);
+      return renderPointGraph(state, dispatch, i18n);
     case "circle":
-      return renderCircleGraph(state, dispatch);
+      return renderCircleGraph(state, dispatch, i18n);
     case "quadratic":
       return renderQuadraticGraph(state, dispatch, i18n);
     case "sinusoid":
-      return renderSinusoidGraph(state, dispatch);
+      return renderSinusoidGraph(state, dispatch, i18n);
     case "none":
       return {
         graph: null,
@@ -34520,13 +34473,13 @@ const {
   polar
 } = kmath.angles;
 const {
-  angleMeasures: angleMeasures$1,
-  ccw: ccw$1,
-  lawOfCosines: lawOfCosines$1,
+  angleMeasures,
+  ccw,
+  lawOfCosines,
   magnitude: magnitude$1,
   polygonSidesIntersect,
   reverseVector,
-  sign: sign$1,
+  sign,
   vector: vector$1
 } = kmath.geometry;
 const {
@@ -35033,7 +34986,7 @@ function doAddPoint(state, action) {
     ...state,
     hasBeenInteractedWith: true,
     coords: newCoords,
-    showRemovePointButton: false,
+    showRemovePointButton: true,
     focusedPointIndex: newCoords.length - 1
   };
 }
@@ -35041,17 +34994,12 @@ function doRemovePoint(state, action) {
   if (!isUnlimitedGraphState(state)) {
     return state;
   }
-  let nextFocusedPointIndex;
-  if (state.interactionMode === "mouse") {
-    nextFocusedPointIndex = null;
-  } else {
-    nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
-  }
+  const nextFocusedPointIndex = state.coords.length > 1 ? state.coords.length - 2 : null;
   return {
     ...state,
     coords: state.coords.filter((_, i) => i !== action.index),
     focusedPointIndex: nextFocusedPointIndex,
-    showRemovePointButton: false
+    showRemovePointButton: nextFocusedPointIndex !== null ? true : false
   };
 }
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
@@ -35228,7 +35176,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
   });
 
   // Gets the radian angles between the coords and maps them to degrees
-  const angles = angleMeasures$1(coordsCopy).map(angle => angle * 180 / Math.PI);
+  const angles = angleMeasures(coordsCopy).map(angle => angle * 180 / Math.PI);
 
   // Gets the relative index of a point
   const rel = j => {
@@ -35262,7 +35210,7 @@ function boundAndSnapToPolygonAngle(destinationPoint, _ref6, index) {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Solve for side by using the law of sines
   const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
@@ -35316,7 +35264,7 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
 
   // Solve for angle by using the law of cosines
   // Angle at the first vertex of the polygon
-  const innerAngle = lawOfCosines$1(sides[0], sides[2], sides[1]);
+  const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
 
   // Angle at the second vertex of the polygon
   const outerAngle = getAngleFromVertex(coordsCopy[rel(1)], coordsCopy[rel(-1)]);
@@ -35327,7 +35275,7 @@ function boundAndSnapToSides(destinationPoint, _ref7, index) {
   // we want to add the inner angle to the outer angle, and if it's on the right,
   // we want to subtract the inner angle from the outer angle. The angle solved
   // for is then used in the polar function to determine the new point.
-  const onLeft = sign$1(ccw$1(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
+  const onLeft = sign(ccw(coordsCopy[rel(-1)], coordsCopy[rel(1)], coordsCopy[index])) === 1;
 
   // Uses the length of the first side of the polygon (radial coordinate)
   // and the angle between the first and second sides of the
@@ -35465,27 +35413,19 @@ const {
   getClockwiseAngle
 } = kmath.angles;
 const {
-  angleMeasures,
-  ccw,
-  collinear,
   getLineEquation,
   getLineIntersection,
-  intersects,
-  lawOfCosines,
   magnitude,
-  rotate,
-  sign,
   vector
 } = kmath.geometry;
 const defaultBackgroundImage = {
   url: null
 };
 const UNLIMITED = "unlimited";
-function capitalize(str) {
-  return str.replace(/(?:^|-)(.)/g, function (match, letter) {
-    return letter.toUpperCase();
-  });
-}
+
+// Sample background image:
+// https://ka-perseus-graphie.s3.amazonaws.com/29c1b0fcd17fe63df0f148fe357044d5d5c7d0bb.png
+
 function numSteps(range, step) {
   return Math.floor((range[1] - range[0]) / step);
 }
@@ -35530,7 +35470,6 @@ function getQuadraticCoefficients(coords) {
   return [a, b, c];
 }
 class InteractiveGraph extends React__namespace.Component {
-  legacyGraphRef = /*#__PURE__*/React__namespace.createRef();
   mafsRef = /*#__PURE__*/React__namespace.createRef();
   static defaultProps = {
     labels: ["x", "y"],
@@ -35548,9 +35487,6 @@ class InteractiveGraph extends React__namespace.Component {
     if (this.mafsRef.current?.getUserInput) {
       return this.mafsRef.current.getUserInput();
     }
-    if (this.legacyGraphRef.current?.getUserInput) {
-      return this.legacyGraphRef.current.getUserInput();
-    }
     throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
   }
   getPromptJSON() {
@@ -35744,8 +35680,32 @@ class InteractiveGraph extends React__namespace.Component {
   }
   static getEquationString(props) {
     const type = props.graph.type;
-    const funcName = "get" + capitalize(type) + "EquationString";
-    return InteractiveGraph[funcName](props);
+    switch (type) {
+      case "none":
+        return InteractiveGraph.getNoneEquationString();
+      case "linear":
+        return InteractiveGraph.getLinearEquationString(props);
+      case "quadratic":
+        return InteractiveGraph.getQuadraticEquationString(props);
+      case "sinusoid":
+        return InteractiveGraph.getSinusoidEquationString(props);
+      case "circle":
+        return InteractiveGraph.getCircleEquationString(props);
+      case "linear-system":
+        return InteractiveGraph.getLinearSystemEquationString(props);
+      case "point":
+        return InteractiveGraph.getPointEquationString(props);
+      case "segment":
+        return InteractiveGraph.getSegmentEquationString(props);
+      case "ray":
+        return InteractiveGraph.getRayEquationString(props);
+      case "polygon":
+        return InteractiveGraph.getPolygonEquationString(props);
+      case "angle":
+        return InteractiveGraph.getAngleEquationString(props);
+      default:
+        throw new wonderStuffCore.UnreachableCaseError(type);
+    }
   }
   static pointsFromNormalized(props, coordsList, noSnap) {
     // @ts-expect-error - TS2322 - Type 'number[][]' is not assignable to type 'readonly Coord[]'.
@@ -35889,8 +35849,7 @@ var InteractiveGraph$1 = {
   name: "interactive-graph",
   displayName: "Interactive graph (Assessments only)",
   widget: InteractiveGraph,
-  staticTransform: staticTransform$3,
-  getPublicWidgetOptions: perseusCore.getInteractiveGraphPublicWidgetOptions
+  staticTransform: staticTransform$3
 };
 
 // TODO: can we use WB typography?
@@ -36526,10 +36485,15 @@ class LabelImage extends React__namespace.Component {
     });
   }
   activateMarker(index, opened) {
+    // TODO(LEMS-2830): Remove analytics event in LEMS-2830 in favor of ti below.
     this.props.analytics?.onAnalyticsEvent({
       type: "perseus:label-image:marker-interacted-with",
       payload: null
     });
+    this.props.analytics?.onAnalyticsEvent({
+      type: "perseus:label-image:marker-interacted-with:ti",
+      payload: null
+    });
     const {
       activeMarkerIndex
     } = this.state;
@@ -36673,10 +36637,15 @@ class LabelImage extends React__namespace.Component {
         })),
         multipleSelect: this.props.multipleAnswers,
         onChange: selection => {
+          // TODO(LEMS-2829): Remove analytics event in LEMS-2829 in favor of ti below.
           this.props.analytics?.onAnalyticsEvent({
             type: "perseus:label-image:choiced-interacted-with",
             payload: null
           });
+          this.props.analytics?.onAnalyticsEvent({
+            type: "perseus:label-image:choiced-interacted-with:ti",
+            payload: null
+          });
           this.handleAnswerChoicesChangeForMarker(index, selection);
         },
         onToggle: opened => this.activateMarker(index, opened)
@@ -36781,10 +36750,15 @@ class LabelImage extends React__namespace.Component {
     })), this.renderMarkers()), /*#__PURE__*/React__namespace.createElement(HideAnswersToggle, {
       areAnswersHidden: this.state.hideAnswers,
       onChange: hideAnswers => {
+        // TODO(LEMS-2831): Remove analytics event in LEMS-2831 in favor of ti below.
         this.props.analytics?.onAnalyticsEvent({
           type: "perseus:label-image:toggle-answers-hidden",
           payload: null
         });
+        this.props.analytics?.onAnalyticsEvent({
+          type: "perseus:label-image:toggle-answers-hidden:ti",
+          payload: null
+        });
         this.setState({
           hideAnswers
         });
@@ -36847,8 +36821,7 @@ var LabelImage$1 = {
   displayName: "Label Image",
   widget: LabelImageWithDependencies,
   accessible: true,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getLabelImagePublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -37107,20 +37080,24 @@ class Draggable extends React__namespace.Component {
     if (this.props.margin != null) {
       style.margin = this.props.margin;
     }
-    return /*#__PURE__*/React__namespace.createElement("li", {
-      className: className,
-      style: style,
-      onMouseDown: this.onMouseDown,
-      onTouchStart: this.onMouseDown,
-      onTouchMove: this.onMouseMove,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, {
-      content: this.props.content,
-      linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
-      onRender: this.props.onRender,
-      strings: this.context.strings
-    }));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("li", {
+        className: className,
+        style: style,
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onMouseDown,
+        onTouchMove: this.onMouseMove,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, {
+        content: this.props.content,
+        linterContext: PerseusLinter__namespace.pushContextStack(this.props.linterContext, "draggable"),
+        onRender: this.props.onRender,
+        strings: this.context.strings
+      }))
+    );
   }
 }
 class Sortable extends React__namespace.Component {
@@ -38179,8 +38156,7 @@ var Matrix$1 = {
   widget: Matrix,
   transform: propTransform$1,
   staticTransform: staticTransform$2,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getMatrixPublicWidgetOptions
+  isLintable: true
 };
 
 const getPromptJSON$7 = () => {
@@ -39757,8 +39733,7 @@ var NumberLine$1 = {
   displayName: "Number line",
   widget: NumberLine,
   transform: numberLineTransform,
-  staticTransform: staticTransform$1,
-  getPublicWidgetOptions: perseusCore.getNumberLinePublicWidgetOptions
+  staticTransform: staticTransform$1
 };
 
 const getPromptJSON$5 = (renderProps, userInput) => {
@@ -39925,19 +39900,23 @@ class Card extends React__namespace.Component {
     // Pull out the content to get rendered
     const rendererProps = ___default["default"].pick(this.props, "content");
     const onMouseDown = this.props.animating ? $__default["default"].noop : this.onMouseDown;
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "card-wrap",
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    }))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO(LEMS-2871): Address a11y error
+      React__namespace.createElement("div", {
+        className: "card-wrap",
+        style: style,
+        onMouseDown: onMouseDown,
+        onTouchStart: onMouseDown,
+        onTouchEnd: this.onMouseUp,
+        onTouchCancel: this.onMouseUp
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: className.join(" ")
+      }, /*#__PURE__*/React__namespace.createElement(Renderer, _extends({}, rendererProps, {
+        linterContext: this.props.linterContext,
+        strings: this.context.strings
+      }))))
+    );
   }
 }
 class Orderer extends React__namespace.Component {
@@ -40309,8 +40288,7 @@ var Orderer$1 = {
   displayName: "Orderer",
   hidden: true,
   widget: Orderer,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getOrdererPublicWidgetOptions
+  isLintable: true
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
@@ -41376,8 +41354,7 @@ var Plotter$1 = {
   displayName: "Plotter",
   hidden: true,
   widget: Plotter,
-  staticTransform: staticTransform,
-  getPublicWidgetOptions: perseusCore.getPlotterPublicWidgetOptions
+  staticTransform: staticTransform
 };
 
 const getPromptJSON$2 = () => {
@@ -41537,8 +41514,7 @@ var Sorter$1 = {
   name: "sorter",
   displayName: "Sorter",
   widget: Sorter,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getSorterPublicWidgetOptions
+  isLintable: true
 };
 
 const {
@@ -41754,8 +41730,7 @@ var Table$1 = {
   widget: Table,
   transform: propTransform,
   hidden: true,
-  isLintable: true,
-  getPublicWidgetOptions: perseusCore.getTablePublicWidgetOptions
+  isLintable: true
 };
 
 const getPromptJSON = () => {
@@ -41936,7 +41911,7 @@ const init = function () {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "53.1.0";
+const libVersion = "54.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -43430,6 +43405,17 @@ function getWidgetTypeByWidgetId(WidgetId, widgetMap) {
   const widget = widgetMap[WidgetId];
   return widget?.type ?? null;
 }
+function getWidgetSubTypeByWidgetId(widgetId, widgetMap) {
+  const widget = widgetMap[widgetId];
+  const widgetType = widget?.type ?? null;
+  switch (widgetType) {
+    case "interactive-graph":
+      const graph = widget.options.graph;
+      return graph?.type ?? null;
+    default:
+      return null;
+  }
+}
 
 /**
  * Does the content have a specific type of widget?
@@ -44308,6 +44294,7 @@ exports.getSegmentCoords = getSegmentCoords;
 exports.getSinusoidCoords = getSinusoidCoords;
 exports.getValidWidgetIds = getValidWidgetIds;
 exports.getWidgetFromWidgetMap = getWidgetFromWidgetMap;
+exports.getWidgetSubTypeByWidgetId = getWidgetSubTypeByWidgetId;
 exports.getWidgetTypeByWidgetId = getWidgetTypeByWidgetId;
 exports.getWidgetsFromWidgetMap = getWidgetsFromWidgetMap;
 exports.getWidgetsMapFromItemData = getWidgetsMapFromItemData;