@khanacademy/perseus 17.8.0 → 18.0.1

package/dist/es/index.js

@@ -35,6 +35,7 @@ import { Popper } from 'react-popper';
 import createReactClass from 'create-react-class';
 import Link from '@khanacademy/wonder-blocks-link';
 import { addLibraryVersionToPerseusDebug } from '@khanacademy/perseus-core';
+import { keys } from '@khanacademy/wonder-stuff-core';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -4221,6 +4222,18 @@ const InteractiveUtil = {
   }
 };
 
+function _classPrivateFieldBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+  return receiver;
+}
+
+var id$1 = 0;
+function _classPrivateFieldKey(name) {
+  return "__private_" + id$1++ + "_" + name;
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -8511,6 +8524,95 @@ const KhanColors = {
   DYNAMIC: "#6495ED" // BLUE
 };
 
+// DrawingTransform is responsible for transforming from "math coordinates"
+// (on the Cartesian plane) to "canvas coordinates" in pixels.
+class DrawingTransform {
+  constructor(raphael, initialScale, bounds) {
+    this.raphael = void 0;
+    // Scale is measured in pixels per unit on the Cartesian plane.
+    this.xScale = void 0;
+    this.yScale = void 0;
+    this.bounds = void 0;
+    // TODO(benchristel): rename these methods to transform* instead of scale*.
+    // They're doing more than scaling! Some of them also translate.
+    this.scaleVector = point => {
+      if (typeof point === "number") {
+        return this.scaleVector([point, point]);
+      }
+      const x = point[0];
+      const y = point[1];
+      return [x * this.xScale, y * this.yScale];
+    };
+    this.scalePoint = point => {
+      if (typeof point === "number") {
+        return this.scalePoint([point, point]);
+      }
+      const x = point[0];
+      const y = point[1];
+      return [(x - this.bounds.xMin) * this.xScale, (this.bounds.yMax - y) * this.yScale];
+    };
+    this.unscalePoint = point => {
+      if (typeof point === "number") {
+        return this.unscalePoint([point, point]);
+      }
+      const x = point[0];
+      const y = point[1];
+      return [x / this.xScale + this.bounds.xMin, this.bounds.yMax - y / this.yScale];
+    };
+    this.unscaleVector = point => {
+      if (typeof point === "number") {
+        return this.unscaleVector([point, point]);
+      }
+      return [point[0] / this.xScale, point[1] / this.yScale];
+    };
+    this.setScale = scale => {
+      if (typeof scale === "number") {
+        scale = [scale, scale];
+      }
+      this.xScale = scale[0];
+      this.yScale = scale[1];
+
+      // Update the canvas size
+      this.raphael.setSize(...this.canvasDimensions());
+    };
+    this.canvasDimensions = () => {
+      return [this.bounds.width() * this.xScale, this.bounds.height() * this.yScale];
+    };
+    this.pixelsPerUnitX = () => {
+      return this.xScale;
+    };
+    this.pixelsPerUnitY = () => {
+      return this.yScale;
+    };
+    this.raphael = raphael;
+    this.bounds = bounds;
+    this.xScale = initialScale[0];
+    this.yScale = initialScale[1];
+    this.setScale(initialScale);
+  }
+}
+
+// Defines the bounds of the visible area of a graph, in Cartesian coordinates.
+// GraphBounds is immutable.
+class GraphBounds {
+  constructor(xRange, yRange) {
+    this.xMin = void 0;
+    this.xMax = void 0;
+    this.yMin = void 0;
+    this.yMax = void 0;
+    this.xMin = xRange[0];
+    this.xMax = xRange[1];
+    this.yMin = yRange[0];
+    this.yMax = yRange[1];
+  }
+  width() {
+    return this.xMax - this.xMin;
+  }
+  height() {
+    return this.yMax - this.yMin;
+  }
+}
+
 function render(element, container, callback) {
   // TODO(LP-11406): Replace this, or callers, with React Portal
   // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
@@ -8538,23 +8640,6 @@ function findChildOrAdd(elem, className) {
   }
   return $child;
 }
-function doCallback(elem, callback) {
-  let tries = 0;
-  (function check() {
-    const height = elem.scrollHeight;
-    // Heuristic to guess if the font has kicked in
-    // so we have box metrics (magic number ick,
-    // but this seems to work mostly-consistently)
-    if (height > 18 || tries >= 10) {
-      callback();
-    } else {
-      tries++;
-      // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-      // eslint-disable-next-line no-restricted-syntax
-      setTimeout(check, 100);
-    }
-  })();
-}
 var Tex$1 = {
   // Process a node and add math inside of it. This attempts to use KaTeX to
   // format the math, and if that fails it falls back to MathJax.
@@ -8576,27 +8661,14 @@ var Tex$1 = {
 
     // Only process if it hasn't been done before, or it is forced
     if ($elem.attr("data-math-formula") == null || force) {
-      const $katexHolder = findChildOrAdd($elem, "katex-holder");
-      const $mathjaxHolder = findChildOrAdd($elem, "mathjax-holder");
-
-      // Search for MathJax-y script tags inside of the node. These are
-      // used by MathJax to denote the formula to be typeset. Before, we
-      // would update the formula by updating the contents of the script
-      // tag, which shouldn't happen any more, but we manage them just in
-      // case.
-      const script = $mathjaxHolder.find("script[type='math/tex']")[0];
-
-      // If text wasn't provided, we look in two places
-      if (text == null) {
-        if ($elem.attr("data-math-formula")) {
-          // The old typeset formula
-          // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
-          text = $elem.attr("data-math-formula");
-        } else if (script) {
-          // The contents of the <script> tag
-          // @ts-expect-error - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
-          text = script.text || script.textContent;
-        }
+      const $texHolder = findChildOrAdd($elem, "tex-holder");
+
+      // If text wasn't provided, we use the cached text.
+      // TODO(benchristel): I'm not sure if text can ever be null. It's
+      // possible we don't need this check.
+      if (text == null && $elem.attr("data-math-formula")) {
+        // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
+        text = $elem.attr("data-math-formula");
       }
       text = text != null ? text + "" : "";
 
@@ -8612,64 +8684,15 @@ var Tex$1 = {
       // that name is already taken.
       render( /*#__PURE__*/React.createElement(TeX, {
         children: text,
-        onRender: () => {
-          if (callback) {
-            doCallback(elem, callback);
-          }
-        }
-      }), $katexHolder[0]);
-    }
-  },
-  // Function to restore a node to a non-math-processed state
-  cleanupMath: function (elem) {
-    const $elem = $(elem);
-
-    // Only mess with it if it's been processed before
-    if ($elem.attr("data-math-formula")) {
-      // Remove MathJax remnants
-      if (typeof MathJax !== "undefined") {
-        const jax = MathJax.Hub.getJaxFor($elem.find("script")[0]);
-        if (jax) {
-          const e = jax.SourceElement();
-          if (e.previousSibling && e.previousSibling.className) {
-            jax.Remove();
-          }
-        }
-      }
-
-      // @ts-expect-error - TS2769 - No overload matches this call.
-      $elem.text($elem.attr("data-math-formula"));
-      $elem.attr("data-math-formula", null);
-      $elem.attr("data-math-type", null);
+        onRender: callback
+      }), $texHolder[0]);
     }
-    return elem;
-  },
-  // Function to retrieve the formula of a typeset math node
-  retrieveMathFormula: function (elem) {
-    return $(elem).attr("data-math-formula");
   }
 };
 
 const {
   processMath: processMath$1
 } = Tex$1;
-
-/* Convert cartesian coordinates [x, y] to polar coordinates [r,
- * theta], with theta in degrees, or in radians if angleInRadians is
- * specified.
- */
-function cartToPolar(coord, angleInRadians) {
-  const r = Math.sqrt(Math.pow(coord[0], 2) + Math.pow(coord[1], 2));
-  let theta = Math.atan2(coord[1], coord[0]);
-  // convert angle range from [-pi, pi] to [0, 2pi]
-  if (theta < 0) {
-    theta += 2 * Math.PI;
-  }
-  if (!angleInRadians) {
-    theta = theta * 180 / Math.PI;
-  }
-  return [r, theta];
-}
 function polar(r, th) {
   if (typeof r === "number") {
     r = [r, r];
@@ -8725,223 +8748,440 @@ const GraphUtils = {
   },
   graphs: {}
 };
-const Graphie$1 = GraphUtils.Graphie = function () {};
-_.extend(Graphie$1.prototype, {
-  cartToPolar: cartToPolar,
-  polar: polar
-});
-const labelDirections = {
-  center: [-0.5, -0.5],
-  above: [-0.5, -1.0],
-  "above right": [0.0, -1.0],
-  right: [0.0, -0.5],
-  "below right": [0.0, 0.0],
-  below: [-0.5, 0.0],
-  "below left": [-1.0, 0.0],
-  left: [-1.0, -0.5],
-  "above left": [-1.0, -1.0]
-};
+var _bounds = /*#__PURE__*/_classPrivateFieldKey("bounds");
+var _drawingTransform = /*#__PURE__*/_classPrivateFieldKey("drawingTransform");
+class Graphie$1 {
+  constructor(el) {
+    this.el = void 0;
+    Object.defineProperty(this, _bounds, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _drawingTransform, {
+      writable: true,
+      value: void 0
+    });
+    this.raphael = void 0;
+    this.isMobile = false;
+    // Set up some reasonable defaults
+    this.currentStyle = {
+      "stroke-width": 2,
+      fill: "none"
+    };
+    this.range = void 0;
+    this.scale = void 0;
+    this.dimensions = void 0;
+    // TODO(benchristel): xpixels and ypixels are never used by this class, but
+    // other code reaches in to access them :(
+    // Refactor to accessor methods that look at this.dimensions.
+    this.xpixels = void 0;
+    this.ypixels = void 0;
+    this.svgPath = (points, alreadyScaled) => {
+      return $.map(points, (point, i) => {
+        if (point === true) {
+          return "z";
+        }
+        const scaled = alreadyScaled ? point : this.scalePoint(point);
+        return (i === 0 ? "M" : "L") + KhanMath.bound(scaled[0]) + " " + KhanMath.bound(scaled[1]);
+      }).join("");
+    };
+    this.svgParabolaPath = (a, b, c) => {
+      const computeParabola = function computeParabola(x) {
+        return (a * x + b) * x + c;
+      };
 
-/**
- * Safari applies some SVG-specific styles to things that are not SVGs, so we
- * need to exclude those styles from things that are not SVGs.
- *
- * To see this behavior in action, open https://codepen.io/anon/pen/zENEoa in
- * Safari.
- *
- * Usage `$.extend({}, someStyles, SVG_SPECIFIC_STYLE_MASK)`
- */
-const SVG_SPECIFIC_STYLE_MASK = {
-  "stroke-width": null
-};
-GraphUtils.createGraphie = function (el) {
-  let xScale = 40;
-  let yScale = 40;
-  let xRange;
-  let yRange;
-  $(el).css("position", "relative");
-  const raphael$1 = raphael.exports(el);
-
-  // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
-  $(el).children("div").css("position", "absolute");
-
-  // Set up some reasonable defaults
-  let currentStyle = {
-    "stroke-width": 2,
-    fill: "none"
-  };
-  const scaleVector = function scaleVector(point) {
-    if (typeof point === "number") {
-      return scaleVector([point, point]);
-    }
-    const x = point[0];
-    const y = point[1];
-    return [x * xScale, y * yScale];
-  };
-  const scalePoint = function scalePoint(point) {
-    if (typeof point === "number") {
-      return scalePoint([point, point]);
-    }
-    const x = point[0];
-    const y = point[1];
-    return [(x - xRange[0]) * xScale, (yRange[1] - y) * yScale];
-  };
-  const unscalePoint = function unscalePoint(point) {
-    if (typeof point === "number") {
-      return unscalePoint([point, point]);
-    }
-    const x = point[0];
-    const y = point[1];
-    return [x / xScale + xRange[0], yRange[1] - y / yScale];
-  };
-  const unscaleVector = function unscaleVector(point) {
-    if (typeof point === "number") {
-      return unscaleVector([point, point]);
-    }
-    return [point[0] / xScale, point[1] / yScale];
-  };
-  const setLabelMargins = function setLabelMargins(span, size) {
-    const $span = $(span);
-    const direction = $span.data("labelDirection");
-    let [width, height] = size;
-    // This can happen when a span
-    // is invisible but we still want to update the CSS. At worst, we will
-    // be off by a few pixels instead of in a different position entirely.
-    if (width === 0 && height === 0) {
-      [width, height] = [1, 1];
-      Log.log("Label size was 0x0 in graphie.js; using 1x1 instead");
-    }
-    $span.css("visibility", "");
-    if (typeof direction === "number") {
-      const x = Math.cos(direction);
-      const y = Math.sin(direction);
-      const scale = Math.min(width / 2 / Math.abs(x), height / 2 / Math.abs(y));
-      $span.css({
-        marginLeft: -width / 2 + x * scale,
-        marginTop: -height / 2 - y * scale
-      });
-    } else {
-      const multipliers = labelDirections[direction || "center"];
-      $span.css({
-        marginLeft: Math.round(width * multipliers[0]),
-        marginTop: Math.round(height * multipliers[1])
-      });
-    }
-  };
-  const svgPath = function svgPath(points, alreadyScaled) {
-    return $.map(points, function (point, i) {
-      if (point === true) {
-        return "z";
+      // If points are collinear, plot a line instead
+      if (a === 0) {
+        const _points = [[this.bounds().xMin, computeParabola(this.bounds().xMin)], [this.bounds().xMax, computeParabola(this.bounds().xMax)]];
+        // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
+        return this.svgPath(_points);
       }
-      const scaled = alreadyScaled ? point : scalePoint(point);
-      return (i === 0 ? "M" : "L") + KhanMath.bound(scaled[0]) + " " + KhanMath.bound(scaled[1]);
-    }).join("");
-  };
-  const svgParabolaPath = function svgParabolaPath(a, b, c) {
-    const computeParabola = function computeParabola(x) {
-      return (a * x + b) * x + c;
-    };
 
-    // If points are collinear, plot a line instead
-    if (a === 0) {
-      const _points = _.map(xRange, function (x) {
-        return [x, computeParabola(x)];
-      });
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      return svgPath(_points);
-    }
+      // Calculate x coordinates of points on parabola
+      const xVertex = -b / (2 * a);
+      const distToEdge = Math.max(Math.abs(xVertex - this.bounds().xMin), Math.abs(xVertex - this.bounds().xMax));
 
-    // Calculate x coordinates of points on parabola
-    const xVertex = -b / (2 * a);
-    const distToEdge = Math.max(Math.abs(xVertex - xRange[0]), Math.abs(xVertex - xRange[1]));
+      // To guarantee that drawn parabola to spans the viewport, use a point
+      // on the edge of the graph furtherest from the vertex
+      const xPoint = xVertex + distToEdge;
 
-    // To guarantee that drawn parabola to spans the viewport, use a point
-    // on the edge of the graph furtherest from the vertex
-    const xPoint = xVertex + distToEdge;
+      // Compute parabola and other point on the curve
+      const vertex = [xVertex, computeParabola(xVertex)];
+      const point = [xPoint, computeParabola(xPoint)];
 
-    // Compute parabola and other point on the curve
-    const vertex = [xVertex, computeParabola(xVertex)];
-    const point = [xPoint, computeParabola(xPoint)];
+      // Calculate SVG 'control' point, defined by spec
+      const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
 
-    // Calculate SVG 'control' point, defined by spec
-    const control = [vertex[0], vertex[1] - (point[1] - vertex[1])];
+      // Calculate mirror points across parabola's axis of symmetry
+      const dx = Math.abs(vertex[0] - point[0]);
+      const left = [vertex[0] - dx, point[1]];
+      const right = [vertex[0] + dx, point[1]];
 
-    // Calculate mirror points across parabola's axis of symmetry
-    const dx = Math.abs(vertex[0] - point[0]);
-    const left = [vertex[0] - dx, point[1]];
-    const right = [vertex[0] + dx, point[1]];
+      // Scale and bound
+      // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
+      const points = _.map([left, control, right], this.scalePoint);
+      const values = _.map(_.flatten(points), KhanMath.bound);
+      return "M" + values[0] + "," + values[1] + " Q" + values[2] + "," + values[3] + " " + values[4] + "," + values[5];
+    };
+    this.svgSinusoidPath = (a, b, c, d) => {
+      // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+      const quarterPeriod = Math.abs(Math.PI / (2 * b));
+      const computeSine = function computeSine(x) {
+        return a * Math.sin(b * x - c) + d;
+      };
+      const computeDerivative = function computeDerivative(x) {
+        return a * b * Math.cos(c - b * x);
+      };
+      const coordsForOffset = (initial, i) => {
+        // Return the cubic coordinates (including the two anchor and two
+        // control points) for the ith portion of the sinusoid.
+        const x0 = initial + quarterPeriod * i;
+        const x1 = x0 + quarterPeriod;
+
+        // Interpolate using derivative technique
+        // See: http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js
+        const xCoords = [x0, x0 * 2 / 3 + x1 * 1 / 3, x0 * 1 / 3 + x1 * 2 / 3, x1];
+        const yCoords = [computeSine(x0), computeSine(x0) + computeDerivative(x0) * (x1 - x0) / 3, computeSine(x1) - computeDerivative(x1) * (x1 - x0) / 3, computeSine(x1)];
+
+        // Zip and scale
+        // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
+        return _.map(_.zip(xCoords, yCoords), this.scalePoint);
+      };
 
-    // Scale and bound
-    // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-    const points = _.map([left, control, right], scalePoint);
-    const values = _.map(_.flatten(points), KhanMath.bound);
-    return "M" + values[0] + "," + values[1] + " Q" + values[2] + "," + values[3] + " " + values[4] + "," + values[5];
-  };
-  const svgSinusoidPath = function svgSinusoidPath(a, b, c, d) {
-    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
-    const quarterPeriod = Math.abs(Math.PI / (2 * b));
-    const computeSine = function computeSine(x) {
-      return a * Math.sin(b * x - c) + d;
+      // How many quarter-periods do we need to span the graph?
+      const extent = this.bounds().width();
+      const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
+
+      // Find starting coordinate: first anchor point curve left of bounds.xMin
+      let initial = c / b;
+      const distToEdge = initial - this.bounds().xMin;
+      initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
+
+      // First portion of path is special-case, requiring move-to ('M')
+      let coords = coordsForOffset(initial, 0);
+      let path = "M" + coords[0][0] + "," + coords[0][1] + " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
+      for (let i = 1; i < numQuarterPeriods; i++) {
+        coords = coordsForOffset(initial, i);
+        path += " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
+      }
+      return path;
+    };
+    this.scalePoint = point => {
+      return this.drawingTransform().scalePoint(point);
     };
-    const computeDerivative = function computeDerivative(x) {
-      return a * b * Math.cos(c - b * x);
+    this.scaleVector = point => {
+      return this.drawingTransform().scaleVector(point);
     };
-    const coordsForOffset = function coordsForOffset(initial, i) {
-      // Return the cubic coordinates (including the two anchor and two
-      // control points) for the ith portion of the sinusoid.
-      const x0 = initial + quarterPeriod * i;
-      const x1 = x0 + quarterPeriod;
+    this.unscalePoint = point => {
+      return this.drawingTransform().unscalePoint(point);
+    };
+    this.unscaleVector = point => {
+      return this.drawingTransform().unscaleVector(point);
+    };
+    this.el = el;
+    $(el).css("position", "relative");
+    this.raphael = raphael.exports(el);
 
-      // Interpolate using derivative technique
-      // See: http://stackoverflow.com/questions/13932704/how-to-draw-sine-waves-with-svg-js
-      const xCoords = [x0, x0 * 2 / 3 + x1 * 1 / 3, x0 * 1 / 3 + x1 * 2 / 3, x1];
-      const yCoords = [computeSine(x0), computeSine(x0) + computeDerivative(x0) * (x1 - x0) / 3, computeSine(x1) - computeDerivative(x1) * (x1 - x0) / 3, computeSine(x1)];
+    // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
+    $(el).children("div").css("position", "absolute");
+  }
+  init(options) {
+    let scale = options.scale || [40, 40];
+    scale = typeof scale === "number" ? [scale, scale] : scale;
+    if (options.range == null) {
+      throw new PerseusError("range should be specified in graph init", Errors.Internal);
+    }
+    _classPrivateFieldBase(this, _bounds)[_bounds] = new GraphBounds(...options.range);
+    _classPrivateFieldBase(this, _drawingTransform)[_drawingTransform] = new DrawingTransform(this.raphael, scale, this.bounds());
+    const [w, h] = this.drawingTransform().canvasDimensions();
+    $(this.el).css({
+      width: w,
+      height: h
+    });
+    this.range = options.range;
+    this.scale = scale;
+    // TODO(benchristel): I don't think dimensions is used. Can we
+    // remove it?
+    this.dimensions = [w, h];
+    this.xpixels = w;
+    this.ypixels = h;
+    this.isMobile = options.isMobile;
+    return this;
+  }
 
-      // Zip and scale
-      // @ts-expect-error - TS2345 - Argument of type '(point: number | Coord) => Coord' is not assignable to parameter of type 'Iteratee<any[][], any, any[]>'.
-      return _.map(_.zip(xCoords, yCoords), scalePoint);
+  // Initializes graphie settings for a graph and draws the basic graph
+  // features (axes, grid, tick marks, and axis labels)
+  // Options expected are:
+  // - range: [[a, b], [c, d]] or [a, b]
+  // - scale: [a, b] or number
+  // - gridOpacity: number (0 - 1)
+  // - gridStep: [a, b] or number (relative to units)
+  // - tickStep: [a, b] or number (relative to grid steps)
+  // - tickLen: [a, b] or number (in pixels)
+  // - labelStep: [a, b] or number (relative to tick steps)
+  // - yLabelFormat: fn to format label string for y-axis
+  // - xLabelFormat: fn to format label string for x-axis
+  graphInit(options) {
+    options = options || {};
+    $.each(options, function (prop, val) {
+      // allow options to be specified by a single number for shorthand if
+      // the horizontal and vertical components are the same
+      if (
+      // @ts-expect-error - TS2339 - Property 'match' does not exist on type 'string | number | symbol'.
+      !prop.match(/.*Opacity$/) && prop !== "range" && typeof val === "number") {
+        options[prop] = [val, val];
+      }
+
+      // allow symmetric ranges to be specified by the absolute values
+      if (prop === "range" || prop === "gridRange") {
+        if (val.constructor === Array) {
+          // but don't mandate symmetric ranges
+          if (val[0].constructor !== Array) {
+            options[prop] = [[-val[0], val[0]], [-val[1], val[1]]];
+          }
+        } else if (typeof val === "number") {
+          options[prop] = [[-val, val], [-val, val]];
+        }
+      }
+    });
+    const range = options.range || [[-10, 10], [-10, 10]];
+    const gridRange = options.gridRange || options.range;
+    const scale = options.scale || [20, 20];
+    const grid = options.grid != null ? options.grid : true;
+    const gridOpacity = options.gridOpacity || 0.1;
+    const gridStep = options.gridStep || [1, 1];
+    const axes = options.axes != null ? options.axes : true;
+    const axisArrows = options.axisArrows || "";
+    const axisOpacity = options.axisOpacity || 1.0;
+    const axisCenter = options.axisCenter || [Math.min(Math.max(range[0][0], 0), range[0][1]), Math.min(Math.max(range[1][0], 0), range[1][1])];
+    const axisLabels = options.axisLabels != null ? options.axisLabels : false;
+    const ticks = options.ticks != null ? options.ticks : true;
+    const tickStep = options.tickStep || [2, 2];
+    const tickLen = options.tickLen || [5, 5];
+    const tickOpacity = options.tickOpacity || 1.0;
+    const labels = options.labels || options.labelStep || false;
+    const labelStep = options.labelStep || [1, 1];
+    const labelOpacity = options.labelOpacity || 1.0;
+    let unityLabels = options.unityLabels || false;
+    const labelFormat = options.labelFormat || function (a) {
+      return a;
+    };
+    let xLabelFormat = options.xLabelFormat || labelFormat;
+    let yLabelFormat = options.yLabelFormat || labelFormat;
+    const realRange = [[range[0][0] - (range[0][0] > 0 ? 1 : 0), range[0][1] + (range[0][1] < 0 ? 1 : 0)], [range[1][0] - (range[1][0] > 0 ? 1 : 0), range[1][1] + (range[1][1] < 0 ? 1 : 0)]];
+    if (!_.isArray(unityLabels)) {
+      unityLabels = [unityLabels, unityLabels];
+    }
+    const minusIgnorer = function minusIgnorer(lf) {
+      return function (a) {
+        return (lf(a) + "").replace(/-(\d)/g, "\\llap{-}$1");
+      };
     };
+    xLabelFormat = minusIgnorer(xLabelFormat);
+    yLabelFormat = minusIgnorer(yLabelFormat);
+    this.init({
+      range: realRange,
+      scale: scale,
+      isMobile: options.isMobile
+    });
 
-    // How many quarter-periods do we need to span the graph?
-    const extent = xRange[1] - xRange[0];
-    const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
+    // draw grid
+    if (grid) {
+      this.grid(gridRange[0], gridRange[1], {
+        stroke: options.isMobile ? KhanColors.GRAY_C : "#000000",
+        opacity: options.isMobile ? 1 : gridOpacity,
+        step: gridStep,
+        strokeWidth: options.isMobile ? 1 : 2
+      });
+    }
 
-    // Find starting coordinate: first anchor point curve left of xRange[0]
-    let initial = c / b;
-    const distToEdge = initial - xRange[0];
-    initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
+    // draw axes
+    if (axes) {
+      // this is a slight hack until <-> arrowheads work
+      if (axisArrows === "<->" || axisArrows === true) {
+        const thisGraphie = this;
+        this.style({
+          stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
+          opacity: options.isMobile ? 1 : axisOpacity,
+          strokeWidth: options.isMobile ? 1 : 2,
+          arrows: "->"
+        }, function () {
+          if (range[1][0] < 0 && range[1][1] > 0) {
+            thisGraphie.path([axisCenter, [gridRange[0][0], axisCenter[1]]]);
+            thisGraphie.path([axisCenter, [gridRange[0][1], axisCenter[1]]]);
+          }
+          if (range[0][0] < 0 && range[0][1] > 0) {
+            thisGraphie.path([axisCenter, [axisCenter[0], gridRange[1][0]]]);
+            thisGraphie.path([axisCenter, [axisCenter[0], gridRange[1][1]]]);
+          }
+        });
 
-    // First portion of path is special-case, requiring move-to ('M')
-    let coords = coordsForOffset(initial, 0);
-    let path = "M" + coords[0][0] + "," + coords[0][1] + " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
-    for (let i = 1; i < numQuarterPeriods; i++) {
-      coords = coordsForOffset(initial, i);
-      path += " C" + coords[1][0] + "," + coords[1][1] + " " + coords[2][0] + "," + coords[2][1] + " " + coords[3][0] + "," + coords[3][1];
+        // also, we don't support "<-" arrows yet, but why you
+        // would want that on your graph is beyond me.
+      } else if (axisArrows === "->" || axisArrows === "") {
+        const thisGraphie = this;
+        this.style({
+          stroke: "#000000",
+          opacity: axisOpacity,
+          strokeWidth: 2,
+          arrows: axisArrows
+        }, function () {
+          thisGraphie.path([[gridRange[0][0], axisCenter[1]], [gridRange[0][1], axisCenter[1]]]);
+          thisGraphie.path([[axisCenter[0], gridRange[1][0]], [axisCenter[0], gridRange[1][1]]]);
+        });
+      }
+      if (axisLabels && axisLabels.length === 2) {
+        this.label([gridRange[0][1], axisCenter[1]], axisLabels[0], "right");
+        this.label([axisCenter[0], gridRange[1][1]], axisLabels[1], "above");
+      }
     }
-    return path;
-  };
 
-  // `svgPath` is independent of graphie range, so we export it independently
-  GraphUtils.svgPath = svgPath;
-  const processAttributes = function processAttributes(attrs) {
-    const transformers = {
-      scale: function (scale) {
-        if (typeof scale === "number") {
-          scale = [scale, scale];
+    // draw tick marks
+    if (ticks) {
+      const halfWidthTicks = options.isMobile;
+      const thisGraphie = this;
+      this.style({
+        stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
+        opacity: options.isMobile ? 1 : tickOpacity,
+        strokeWidth: 1
+      }, function () {
+        // horizontal axis
+        let step = gridStep[0] * tickStep[0];
+        let len = tickLen[0] / scale[1];
+        let start = gridRange[0][0];
+        let stop = gridRange[0][1];
+        if (range[1][0] < 0 && range[1][1] > 0) {
+          for (let x = step + axisCenter[0]; x <= stop; x += step) {
+            if (x < stop || !axisArrows) {
+              thisGraphie.line([x, -len + axisCenter[1]], [x, halfWidthTicks ? 0 : len + axisCenter[1]]);
+            }
+          }
+          for (let x = -step + axisCenter[0]; x >= start; x -= step) {
+            if (x > start || !axisArrows) {
+              thisGraphie.line([x, -len + axisCenter[1]], [x, halfWidthTicks ? 0 : len + axisCenter[1]]);
+            }
+          }
         }
-        xScale = scale[0];
-        yScale = scale[1];
 
-        // Update the canvas size
-        raphael$1.setSize((xRange[1] - xRange[0]) * xScale, (yRange[1] - yRange[0]) * yScale);
+        // vertical axis
+        step = gridStep[1] * tickStep[1];
+        len = tickLen[1] / scale[0];
+        start = gridRange[1][0];
+        stop = gridRange[1][1];
+        if (range[0][0] < 0 && range[0][1] > 0) {
+          for (let y = step + axisCenter[1]; y <= stop; y += step) {
+            if (y < stop || !axisArrows) {
+              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+              this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
+            }
+          }
+          for (let y = -step + axisCenter[1]; y >= start; y -= step) {
+            if (y > start || !axisArrows) {
+              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+              this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
+            }
+          }
+        }
+      });
+    }
+
+    // draw axis labels
+    if (labels) {
+      const thisGraphie = this;
+      this.style({
+        stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
+        opacity: options.isMobile ? 1 : labelOpacity
+      }, function () {
+        // horizontal axis
+        let step = gridStep[0] * tickStep[0] * labelStep[0];
+        let start = gridRange[0][0];
+        let stop = gridRange[0][1];
+        const xAxisPosition = axisCenter[0] < 0 ? "above" : "below";
+        const yAxisPosition = axisCenter[0] < 0 ? "right" : "left";
+        const xShowZero = axisCenter[0] === 0 && axisCenter[1] !== 0;
+        const yShowZero = axisCenter[0] !== 0 && axisCenter[1] === 0;
+        const axisOffCenter = axisCenter[0] !== 0 || axisCenter[1] !== 0;
+        const showUnityX = unityLabels[0] || axisOffCenter;
+        const showUnityY = unityLabels[1] || axisOffCenter;
+
+        // positive x-axis
+        for (let x = (xShowZero ? 0 : step) + axisCenter[0]; x <= stop; x += step) {
+          if (x < stop || !axisArrows) {
+            thisGraphie.label([x, axisCenter[1]], xLabelFormat(x), xAxisPosition);
+          }
+        }
+
+        // negative x-axis
+        for (let x = -step * (showUnityX ? 1 : 2) + axisCenter[0]; x >= start; x -= step) {
+          if (x > start || !axisArrows) {
+            thisGraphie.label([x, axisCenter[1]], xLabelFormat(x), xAxisPosition);
+          }
+        }
+        step = gridStep[1] * tickStep[1] * labelStep[1];
+        start = gridRange[1][0];
+        stop = gridRange[1][1];
+
+        // positive y-axis
+        for (let y = (yShowZero ? 0 : step) + axisCenter[1]; y <= stop; y += step) {
+          if (y < stop || !axisArrows) {
+            thisGraphie.label([axisCenter[0], y], yLabelFormat(y), yAxisPosition);
+          }
+        }
+
+        // negative y-axis
+        for (let y = -step * (showUnityY ? 1 : 2) + axisCenter[1]; y >= start; y -= step) {
+          if (y > start || !axisArrows) {
+            thisGraphie.label([axisCenter[0], y], yLabelFormat(y), yAxisPosition);
+          }
+        }
+      });
+    }
+  }
+  drawingTransform() {
+    if (_classPrivateFieldBase(this, _drawingTransform)[_drawingTransform] == null) {
+      throw new Error("Can't get drawingTransform of an uninitialized Graphie");
+    }
+    return _classPrivateFieldBase(this, _drawingTransform)[_drawingTransform];
+  }
+  bounds() {
+    if (_classPrivateFieldBase(this, _bounds)[_bounds] == null) {
+      throw new Error("Can't get bounds of an uninitialized Graphie");
+    }
+    return _classPrivateFieldBase(this, _bounds)[_bounds];
+  }
+  style(attrs, fn) {
+    const processed = this.processAttributes(attrs);
+    if (typeof fn === "function") {
+      const oldStyle = this.currentStyle;
+      this.currentStyle = $.extend({}, this.currentStyle, processed);
+      const result = fn.call(this);
+      this.currentStyle = oldStyle;
+      return result;
+    }
+    $.extend(this.currentStyle, processed);
+  }
+  label(point, text, direction, latex) {}
+  grid(xr, yr, styleAttributes) {}
+
+  // path is a stub that gets overwritten with a function from drawingTools
+  // in createGraphie
+  path(points) {}
+
+  // line is a stub that gets overwritten with a function from drawingTools
+  // in createGraphie
+  line(start, end) {}
+  processAttributes(attrs) {
+    const transformers = {
+      scale: scale => {
+        this.drawingTransform().setScale(scale);
       },
-      clipRect: function (pair) {
+      clipRect: pair => {
         const point = pair[0];
         const size = pair[1];
         point[1] += size[1]; // because our coordinates are flipped
 
         return {
-          "clip-rect": scalePoint(point).concat(scaleVector(size)).join(" ")
+          "clip-rect": this.scalePoint(point).concat(this.scaleVector(size)).join(" ")
         };
       },
       strokeWidth: function (val) {
@@ -8949,18 +9189,18 @@ GraphUtils.createGraphie = function (el) {
           "stroke-width": parseFloat(val)
         };
       },
-      rx: function (val) {
+      rx: val => {
         return {
-          rx: scaleVector([val, 0])[0]
+          rx: this.scaleVector([val, 0])[0]
         };
       },
-      ry: function (val) {
+      ry: val => {
         return {
-          ry: scaleVector([0, val])[1]
+          ry: this.scaleVector([0, val])[1]
         };
       },
-      r: function (val) {
-        const scaled = scaleVector([val, val]);
+      r: val => {
+        const scaled = this.scaleVector([val, val]);
         return {
           rx: scaled[0],
           ry: scaled[1]
@@ -8980,7 +9220,66 @@ GraphUtils.createGraphie = function (el) {
       }
     });
     return processed;
+  }
+}
+GraphUtils.Graphie = Graphie$1;
+const labelDirections = {
+  center: [-0.5, -0.5],
+  above: [-0.5, -1.0],
+  "above right": [0.0, -1.0],
+  right: [0.0, -0.5],
+  "below right": [0.0, 0.0],
+  below: [-0.5, 0.0],
+  "below left": [-1.0, 0.0],
+  left: [-1.0, -0.5],
+  "above left": [-1.0, -1.0]
+};
+
+/**
+ * Safari applies some SVG-specific styles to things that are not SVGs, so we
+ * need to exclude those styles from things that are not SVGs.
+ *
+ * To see this behavior in action, open https://codepen.io/anon/pen/zENEoa in
+ * Safari.
+ *
+ * Usage `$.extend({}, someStyles, SVG_SPECIFIC_STYLE_MASK)`
+ */
+const SVG_SPECIFIC_STYLE_MASK = {
+  "stroke-width": null
+};
+GraphUtils.createGraphie = function (el) {
+  const thisGraphie = new Graphie$1(el);
+  const setLabelMargins = function setLabelMargins(span, size) {
+    const $span = $(span);
+    const direction = $span.data("labelDirection");
+    let [width, height] = size;
+    // This can happen when a span
+    // is invisible but we still want to update the CSS. At worst, we will
+    // be off by a few pixels instead of in a different position entirely.
+    if (width === 0 && height === 0) {
+      [width, height] = [1, 1];
+      Log.log("Label size was 0x0 in graphie.js; using 1x1 instead");
+    }
+    $span.css("visibility", "");
+    if (typeof direction === "number") {
+      const x = Math.cos(direction);
+      const y = Math.sin(direction);
+      const scale = Math.min(width / 2 / Math.abs(x), height / 2 / Math.abs(y));
+      $span.css({
+        marginLeft: -width / 2 + x * scale,
+        marginTop: -height / 2 - y * scale
+      });
+    } else {
+      const multipliers = labelDirections[direction || "center"];
+      $span.css({
+        marginLeft: Math.round(width * multipliers[0]),
+        marginTop: Math.round(height * multipliers[1])
+      });
+    }
   };
+
+  // `svgPath` is independent of graphie range, so we export it independently
+  GraphUtils.svgPath = thisGraphie.svgPath;
   const addArrowheads = function arrows(path) {
     const type = path.constructor.prototype;
     if (type === raphael.exports.el) {
@@ -8988,21 +9287,21 @@ GraphUtils.createGraphie = function (el) {
         const w = path.attr("stroke-width");
         const s = 0.6 + 0.4 * w;
         const l = path.getTotalLength();
-        const set = raphael$1.set();
-        const head = raphael$1.path(graphie.isMobile ? "M-4,4 C-4,4 -0.25,0 -0.25,0 C-0.25,0 -4,-4 -4,-4" : "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4");
+        const set = thisGraphie.raphael.set();
+        const head = thisGraphie.raphael.path(thisGraphie.isMobile ? "M-4,4 C-4,4 -0.25,0 -0.25,0 C-0.25,0 -4,-4 -4,-4" : "M-3 4 C-2.75 2.5 0 0.25 0.75 0C0 -0.25 -2.75 -2.5 -3 -4");
         const end = path.getPointAtLength(l - 0.4);
         const almostTheEnd = path.getPointAtLength(l - 0.75 * s);
         const angle = Math.atan2(end.y - almostTheEnd.y, end.x - almostTheEnd.x) * 180 / Math.PI;
         const attrs = path.attr();
         delete attrs.path;
         let subpath = path.getSubpath(0, l - 0.75 * s);
-        subpath = raphael$1.path(subpath).attr(attrs);
+        subpath = thisGraphie.raphael.path(subpath).attr(attrs);
         subpath.arrowheadsDrawn = true;
         path.remove();
 
         // For some unknown reason 0 doesn't work for the rotation
         // origin so we use a tiny number.
-        head.rotate(angle, graphie.isMobile ? 1e-5 : 0.75, 0).scale(s, s, 0.75, 0).translate(almostTheEnd.x, almostTheEnd.y).attr(attrs).attr({
+        head.rotate(angle, thisGraphie.isMobile ? 1e-5 : 0.75, 0).scale(s, s, 0.75, 0).translate(almostTheEnd.x, almostTheEnd.y).attr(attrs).attr({
           "stroke-linejoin": "round",
           "stroke-linecap": "round"
         });
@@ -9018,767 +9317,424 @@ GraphUtils.createGraphie = function (el) {
     }
     return path;
   };
-  const drawingTools = {
-    circle: function (center, radius) {
-      return raphael$1.ellipse(...scalePoint(center).concat(scaleVector([radius, radius])));
-    },
-    // (x, y) is coordinate of bottom left corner
-    rect: function (x, y, width, height) {
-      // Raphael needs (x, y) to be coordinate of upper left corner
-      const corner = scalePoint([x, y + height]);
-      const dims = scaleVector([width, height]);
-      const elem = raphael$1.rect(...corner.concat(dims));
-      if (graphie.isMobile) {
-        elem.node.style.shapeRendering = "crispEdges";
-      }
-      return elem;
-    },
-    ellipse: function (center, radii) {
-      return raphael$1.ellipse(...scalePoint(center).concat(scaleVector(radii)));
-    },
-    fixedEllipse: function (center,
-    // Different type than Coord, this is radiusX, radiusY
-    radii, maxScale, padding) {
-      // Scale point and radius
-      const scaledPoint = scalePoint(center);
-      const scaledRadii = scaleVector(radii);
-      const width = 2 * scaledRadii[0] * maxScale + padding;
-      const height = 2 * scaledRadii[1] * maxScale + padding;
-
-      // Calculate absolute left, top
-      const left = scaledPoint[0] - width / 2;
-      const top = scaledPoint[1] - height / 2;
-
-      // Wrap in <div>
-      const wrapper = document.createElement("div");
-      $(wrapper).css({
-        position: "absolute",
-        width: width + "px",
-        height: height + "px",
-        left: left + "px",
-        top: top + "px"
-      });
-      // wrapper.setAttribute("data-graphie-type", "ellipse");
+  function circle(center, radius) {
+    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector([radius, radius])));
+  }
 
-      // Create Raphael canvas
-      const localRaphael = raphael.exports(wrapper, width, height);
-      const visibleShape = localRaphael.ellipse(width / 2, height / 2, scaledRadii[0], scaledRadii[1]);
-      return {
-        wrapper: wrapper,
-        visibleShape: visibleShape
-      };
-    },
-    arc: function (center, radius, startAngle, endAngle, sector) {
-      startAngle = (startAngle % 360 + 360) % 360;
-      endAngle = (endAngle % 360 + 360) % 360;
-      const cent = scalePoint(center);
-      const radii = scaleVector(radius);
-      const startVector = polar(radius, startAngle);
-      const endVector = polar(radius, endAngle);
-      const startPoint = scalePoint([center[0] + startVector[0], center[1] + startVector[1]]);
-      const endPoint = scalePoint([center[0] + endVector[0], center[1] + endVector[1]]);
-      const largeAngle = ((endAngle - startAngle) % 360 + 360) % 360 > 180;
-      return raphael$1.path("M" + startPoint.join(" ") + "A" + radii.join(" ") + " 0 " + (
-      // ellipse rotation
-      largeAngle ? 1 : 0) + " 0 " +
-      // sweep flag
-      endPoint.join(" ") + (sector ? "L" + cent.join(" ") + "z" : ""));
-    },
-    path: function (points) {
-      // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-      const p = raphael$1.path(svgPath(points));
-      p.graphiePath = points;
-      return p;
-    },
-    fixedPath: function (points, center, createPath) {
-      points = _.map(points, scalePoint);
-      center = center ? scalePoint(center) : null;
-      createPath = createPath || svgPath;
-      const pathLeft = _.min(_.pluck(points, 0));
-      const pathRight = _.max(_.pluck(points, 0));
-      const pathTop = _.min(_.pluck(points, 1));
-      const pathBottom = _.max(_.pluck(points, 1));
-
-      // Apply padding to line
-      const padding = [4, 4];
-
-      // Calculate and apply additional offset
-      const extraOffset = [pathLeft, pathTop];
-
-      // Apply padding and offset to points
-      points = _.map(points, function (point) {
-        return vector$1.add(vector$1.subtract(point, extraOffset), vector$1.scale(padding, 0.5));
-      });
-
-      // Calculate <div> dimensions
-      const width = pathRight - pathLeft + padding[0];
-      const height = pathBottom - pathTop + padding[1];
-      const left = extraOffset[0] - padding[0] / 2;
-      const top = extraOffset[1] - padding[1] / 2;
-
-      // Create <div>
-      const wrapper = document.createElement("div");
-      $(wrapper).css({
-        position: "absolute",
-        width: width + "px",
-        height: height + "px",
-        left: left + "px",
-        top: top + "px",
-        // If user specified a center, set it
-        // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
-        // so we cast to `any` here.
-        transformOrigin: center ? width / 2 + center[0] + "px " + (height / 2 + center[1]) + "px" : null
-      });
+  // (x, y) is coordinate of bottom left corner
+  function rect(x, y, width, height) {
+    // Raphael needs (x, y) to be coordinate of upper left corner
+    const corner = thisGraphie.scalePoint([x, y + height]);
+    const dims = thisGraphie.scaleVector([width, height]);
+    const elem = thisGraphie.raphael.rect(...corner.concat(dims));
+    if (thisGraphie.isMobile) {
+      elem.node.style.shapeRendering = "crispEdges";
+    }
+    return elem;
+  }
+  function ellipse(center, radii) {
+    return thisGraphie.raphael.ellipse(...thisGraphie.scalePoint(center).concat(thisGraphie.scaleVector(radii)));
+  }
+  function fixedEllipse(center,
+  // Different type than Coord, this is radiusX, radiusY
+  radii, maxScale, padding) {
+    // Scale point and radius
+    const scaledPoint = thisGraphie.scalePoint(center);
+    const scaledRadii = thisGraphie.scaleVector(radii);
+    const width = 2 * scaledRadii[0] * maxScale + padding;
+    const height = 2 * scaledRadii[1] * maxScale + padding;
+
+    // Calculate absolute left, top
+    const left = scaledPoint[0] - width / 2;
+    const top = scaledPoint[1] - height / 2;
+
+    // Wrap in <div>
+    const wrapper = document.createElement("div");
+    $(wrapper).css({
+      position: "absolute",
+      width: width + "px",
+      height: height + "px",
+      left: left + "px",
+      top: top + "px"
+    });
+    // wrapper.setAttribute("data-graphie-type", "ellipse");
 
-      // Create Raphael canvas
-      const localRaphael = raphael.exports(wrapper, width, height);
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
+    const visibleShape = localRaphael.ellipse(width / 2, height / 2, scaledRadii[0], scaledRadii[1]);
+    return {
+      wrapper: wrapper,
+      visibleShape: visibleShape
+    };
+  }
+  function arc(center, radius, startAngle, endAngle, sector) {
+    startAngle = (startAngle % 360 + 360) % 360;
+    endAngle = (endAngle % 360 + 360) % 360;
+    const cent = thisGraphie.scalePoint(center);
+    const radii = thisGraphie.scaleVector(radius);
+    const startVector = polar(radius, startAngle);
+    const endVector = polar(radius, endAngle);
+    const startPoint = thisGraphie.scalePoint([center[0] + startVector[0], center[1] + startVector[1]]);
+    const endPoint = thisGraphie.scalePoint([center[0] + endVector[0], center[1] + endVector[1]]);
+    const largeAngle = ((endAngle - startAngle) % 360 + 360) % 360 > 180;
+    return thisGraphie.raphael.path("M" + startPoint.join(" ") + "A" + radii.join(" ") + " 0 " + (
+    // ellipse rotation
+    largeAngle ? 1 : 0) + " 0 " +
+    // sweep flag
+    endPoint.join(" ") + (sector ? "L" + cent.join(" ") + "z" : ""));
+  }
+  function path(points) {
+    // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
+    const p = thisGraphie.raphael.path(thisGraphie.svgPath(points));
+    p.graphiePath = points;
+    return p;
+  }
+  function fixedPath(points, center, createPath) {
+    points = _.map(points, thisGraphie.scalePoint);
+    center = center ? thisGraphie.scalePoint(center) : null;
+    createPath = createPath || thisGraphie.svgPath;
+    const pathLeft = _.min(_.pluck(points, 0));
+    const pathRight = _.max(_.pluck(points, 0));
+    const pathTop = _.min(_.pluck(points, 1));
+    const pathBottom = _.max(_.pluck(points, 1));
+
+    // Apply padding to line
+    const padding = [4, 4];
+
+    // Calculate and apply additional offset
+    const extraOffset = [pathLeft, pathTop];
+
+    // Apply padding and offset to points
+    points = _.map(points, function (point) {
+      return vector$1.add(vector$1.subtract(point, extraOffset), vector$1.scale(padding, 0.5));
+    });
 
-      // Calculate path
-      const visibleShape = localRaphael.path(createPath(points));
-      return {
-        wrapper: wrapper,
-        visibleShape: visibleShape
-      };
-    },
-    scaledPath: function (points) {
-      const p = raphael$1.path(svgPath(points, /* alreadyScaled */true));
-      p.graphiePath = points;
-      return p;
-    },
-    line: function (start, end) {
-      const l = this.path([start, end]);
-      if (graphie.isMobile) {
-        l.node.style.shapeRendering = "crispEdges";
-      }
-      return l;
-    },
-    parabola: function (a, b, c) {
-      // Plot a parabola of the form: f(x) = (a * x + b) * x + c
-      return raphael$1.path(svgParabolaPath(a, b, c));
-    },
-    fixedLine: function (start, end, thickness) {
-      // Apply padding to line
-      const padding = [thickness, thickness];
-
-      // Scale points to get values in pixels
-      start = scalePoint(start);
-      end = scalePoint(end);
-
-      // Calculate and apply additional offset
-      const extraOffset = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
-
-      // Apply padding and offset to start, end points
-      start = vector$1.add(vector$1.subtract(start, extraOffset), vector$1.scale(padding, 0.5));
-      end = vector$1.add(vector$1.subtract(end, extraOffset), vector$1.scale(padding, 0.5));
-
-      // Calculate <div> dimensions
-      const left = extraOffset[0] - padding[0] / 2;
-      const top = extraOffset[1] - padding[1] / 2;
-      const width = Math.abs(start[0] - end[0]) + padding[0];
-      const height = Math.abs(start[1] - end[1]) + padding[1];
-
-      // Create <div>
-      const wrapper = document.createElement("div");
-      $(wrapper).css({
-        position: "absolute",
-        width: width + "px",
-        height: height + "px",
-        left: left + "px",
-        top: top + "px",
-        // Outsiders should feel like the line's 'origin' (i.e., for
-        // rotation) is the starting point
-        transformOrigin: start[0] + "px " + start[1] + "px"
-      });
-
-      // Create Raphael canvas
-      const localRaphael = raphael.exports(wrapper, width, height);
-
-      // Calculate path
-      const path = "M" + start[0] + " " + start[1] + " " + "L" + end[0] + " " + end[1];
-      const visibleShape = localRaphael.path(path);
-      visibleShape.graphiePath = [start, end];
-      return {
-        wrapper: wrapper,
-        visibleShape: visibleShape
-      };
-    },
-    sinusoid: function (a, b, c, d) {
-      // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
-      return raphael$1.path(svgSinusoidPath(a, b, c, d));
-    },
-    grid: function (xr, yr) {
-      const step = currentStyle.step || [1, 1];
-      const set = raphael$1.set();
-      let x = step[0] * Math.ceil(xr[0] / step[0]);
-      for (; x <= xr[1]; x += step[0]) {
-        set.push(this.line([x, yr[0]], [x, yr[1]]));
-      }
-      let y = step[1] * Math.ceil(yr[0] / step[1]);
-      for (; y <= yr[1]; y += step[1]) {
-        set.push(this.line([xr[0], y], [xr[1], y]));
-      }
-      return set;
-    },
-    label: function (point, text, direction, latex) {
-      latex = typeof latex === "undefined" || latex;
-      const $span = $("<span>").addClass("graphie-label");
-      const pad = currentStyle["label-distance"];
-      $span.css($.extend({}, {
-        position: "absolute",
-        padding: (pad != null ? pad : 7) + "px",
-        color: "black"
-      })).data("labelDirection", direction).appendTo(el);
-
-      // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-      $span.setPosition = function (point) {
-        const scaledPoint = scalePoint(point);
-        $span.css({
-          left: scaledPoint[0],
-          top: scaledPoint[1]
-        });
-      };
+    // Calculate <div> dimensions
+    const width = pathRight - pathLeft + padding[0];
+    const height = pathBottom - pathTop + padding[1];
+    const left = extraOffset[0] - padding[0] / 2;
+    const top = extraOffset[1] - padding[1] / 2;
 
-      // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-      $span.setPosition(point);
-      const span = $span[0];
+    // Create <div>
+    const wrapper = document.createElement("div");
+    $(wrapper).css({
+      position: "absolute",
+      width: width + "px",
+      height: height + "px",
+      left: left + "px",
+      top: top + "px",
+      // If user specified a center, set it
+      // NOTE(kevinb): jQuery doesn't like that `transformOrigin `could be `null`
+      // so we cast to `any` here.
+      transformOrigin: center ? width / 2 + center[0] + "px " + (height / 2 + center[1]) + "px" : null
+    });
 
-      // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-      $span.processMath = function (math, force) {
-        processMath$1(span, math, force, function () {
-          const width = span.scrollWidth;
-          const height = span.scrollHeight;
-          setLabelMargins(span, [width, height]);
-        });
-      };
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
 
-      // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-      $span.processText = function (text) {
-        $span.html(text);
+    // Calculate path
+    const visibleShape = localRaphael.path(createPath(points));
+    return {
+      wrapper: wrapper,
+      visibleShape: visibleShape
+    };
+  }
+  function scaledPath(points) {
+    const p = thisGraphie.raphael.path(thisGraphie.svgPath(points, /* alreadyScaled */true));
+    p.graphiePath = points;
+    return p;
+  }
+  function line(start, end) {
+    const l = path([start, end]);
+    if (thisGraphie.isMobile) {
+      l.node.style.shapeRendering = "crispEdges";
+    }
+    return l;
+  }
+  function parabola(a, b, c) {
+    // Plot a parabola of the form: f(x) = (a * x + b) * x + c
+    return thisGraphie.raphael.path(thisGraphie.svgParabolaPath(a, b, c));
+  }
+  function fixedLine(start, end, thickness) {
+    // Apply padding to line
+    const padding = [thickness, thickness];
+
+    // Scale points to get values in pixels
+    start = thisGraphie.scalePoint(start);
+    end = thisGraphie.scalePoint(end);
+
+    // Calculate and apply additional offset
+    const extraOffset = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+
+    // Apply padding and offset to start, end points
+    start = vector$1.add(vector$1.subtract(start, extraOffset), vector$1.scale(padding, 0.5));
+    end = vector$1.add(vector$1.subtract(end, extraOffset), vector$1.scale(padding, 0.5));
+
+    // Calculate <div> dimensions
+    const left = extraOffset[0] - padding[0] / 2;
+    const top = extraOffset[1] - padding[1] / 2;
+    const width = Math.abs(start[0] - end[0]) + padding[0];
+    const height = Math.abs(start[1] - end[1]) + padding[1];
+
+    // Create <div>
+    const wrapper = document.createElement("div");
+    $(wrapper).css({
+      position: "absolute",
+      width: width + "px",
+      height: height + "px",
+      left: left + "px",
+      top: top + "px",
+      // Outsiders should feel like the line's 'origin' (i.e., for
+      // rotation) is the starting point
+      transformOrigin: start[0] + "px " + start[1] + "px"
+    });
+
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
+
+    // Calculate path
+    const path = "M" + start[0] + " " + start[1] + " " + "L" + end[0] + " " + end[1];
+    const visibleShape = localRaphael.path(path);
+    visibleShape.graphiePath = [start, end];
+    return {
+      wrapper: wrapper,
+      visibleShape: visibleShape
+    };
+  }
+  function sinusoid(a, b, c, d) {
+    // Plot a sinusoid of the form: f(x) = a * sin(b * x - c) + d
+    return thisGraphie.raphael.path(thisGraphie.svgSinusoidPath(a, b, c, d));
+  }
+  function grid(xr, yr) {
+    const step = thisGraphie.currentStyle.step || [1, 1];
+    const set = thisGraphie.raphael.set();
+    let x = step[0] * Math.ceil(xr[0] / step[0]);
+    for (; x <= xr[1]; x += step[0]) {
+      set.push(line([x, yr[0]], [x, yr[1]]));
+    }
+    let y = step[1] * Math.ceil(yr[0] / step[1]);
+    for (; y <= yr[1]; y += step[1]) {
+      set.push(line([xr[0], y], [xr[1], y]));
+    }
+    return set;
+  }
+  function label(point, text, direction, latex) {
+    latex = typeof latex === "undefined" || latex;
+    const $span = $("<span>").addClass("graphie-label");
+    const pad = thisGraphie.currentStyle["label-distance"];
+    $span.css($.extend({}, {
+      position: "absolute",
+      padding: (pad != null ? pad : 7) + "px",
+      color: "black"
+    })).data("labelDirection", direction).appendTo(thisGraphie.el);
+
+    // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+    $span.setPosition = function (point) {
+      const scaledPoint = thisGraphie.scalePoint(point);
+      $span.css({
+        left: scaledPoint[0],
+        top: scaledPoint[1]
+      });
+    };
+
+    // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
+    $span.setPosition(point);
+    const span = $span[0];
+
+    // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+    $span.processMath = function (math, force) {
+      processMath$1(span, math, force, function () {
         const width = span.scrollWidth;
         const height = span.scrollHeight;
         setLabelMargins(span, [width, height]);
-      };
-      if (latex) {
-        // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
-        $span.processMath(text, /* force */false);
-      } else {
-        // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-        $span.processText(text);
-      }
-      return $span;
-    },
-    plotParametric: function (fn, range, shade, fn2) {
-      // Note: fn2 should only be set if 'shade' is true, as it denotes
-      // the function between which fn should have its area shaded.
-      // In general, plotParametric shouldn't be used to shade the area
-      // between two arbitrary parametrics functions over an interval,
-      // as the method assumes that fn and fn2 are both of the form
-      // fn(t) = (t, fn'(t)) for some initial fn'.
-      fn2 = fn2 || function (t) {
-        return [t, 0];
-      };
+      });
+    };
 
-      // We truncate to 500,000, since anything bigger causes
-      // overflow in the firefox svg renderer.  This is safe
-      // since 500,000 is outside the viewport anyway.  We
-      // write these functions the way we do to handle undefined.
-      const clipper = xy => {
-        if (Math.abs(xy[1]) > 500000) {
-          return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
-        }
-        return xy;
-      };
-      const clippedFn = x => clipper(fn(x));
-      const clippedFn2 = x => clipper(fn2(x));
-      if (!currentStyle.strokeLinejoin) {
-        currentStyle.strokeLinejoin = "round";
-      }
-      if (!currentStyle.strokeLinecap) {
-        currentStyle.strokeLinecap = "round";
-      }
-      const min = range[0];
-      const max = range[1];
-      let step = (max - min) / (currentStyle["plot-points"] || 800);
-      if (step === 0) {
-        step = 1;
-      }
-      const paths = raphael$1.set();
-      let points = [];
-      let lastDiff = GraphUtils.coordDiff(clippedFn(min), clippedFn2(min));
-      let lastFlip = min;
-      for (let t = min; t <= max; t += step) {
-        const top = clippedFn(t);
-        const bottom = clippedFn2(t);
-        const diff = GraphUtils.coordDiff(top, bottom);
-
-        // Find points where it flips
-        // Create path that sketches area between the two functions
-        if (
-        // if there is an asymptote here, meaning that the graph
-        // switches signs and has a large difference
-        diff[1] < 0 !== lastDiff[1] < 0 && Math.abs(diff[1] - lastDiff[1]) > 2 * yScale ||
-        // or the function is undefined
-        isNaN(diff[1])) {
-          // split the path at this point, and draw it
-          if (shade) {
-            // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-            points.push(top);
+    // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+    $span.processText = function (text) {
+      $span.html(text);
+      const width = span.scrollWidth;
+      const height = span.scrollHeight;
+      setLabelMargins(span, [width, height]);
+    };
+    if (latex) {
+      // @ts-expect-error - TS2339 - Property 'processMath' does not exist on type 'JQuery<HTMLElement>'.
+      $span.processMath(text, /* force */false);
+    } else {
+      // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
+      $span.processText(text);
+    }
+    return $span;
+  }
+  function plotParametric(fn, range, shade, fn2 = t => [t, 0]) {
+    // Note: fn2 should only be set if 'shade' is true, as it denotes
+    // the function between which fn should have its area shaded.
+    // In general, plotParametric shouldn't be used to shade the area
+    // between two arbitrary parametrics functions over an interval,
+    // as the method assumes that fn and fn2 are both of the form
+    // fn(t) = (t, fn'(t)) for some initial fn'.
+
+    // We truncate to 500,000, since anything bigger causes
+    // overflow in the firefox svg renderer.  This is safe
+    // since 500,000 is outside the viewport anyway.  We
+    // write these functions the way we do to handle undefined.
+    const clipper = xy => {
+      if (Math.abs(xy[1]) > 500000) {
+        return [xy[0], Math.min(Math.max(xy[1], -500000), 500000)];
+      }
+      return xy;
+    };
+    const clippedFn = x => clipper(fn(x));
+    const clippedFn2 = x => clipper(fn2(x));
+    if (!thisGraphie.currentStyle.strokeLinejoin) {
+      thisGraphie.currentStyle.strokeLinejoin = "round";
+    }
+    if (!thisGraphie.currentStyle.strokeLinecap) {
+      thisGraphie.currentStyle.strokeLinecap = "round";
+    }
+    const min = range[0];
+    const max = range[1];
+    let step = (max - min) / (thisGraphie.currentStyle["plot-points"] || 800);
+    if (step === 0) {
+      step = 1;
+    }
+    const paths = thisGraphie.raphael.set();
+    let points = [];
+    let lastDiff = GraphUtils.coordDiff(clippedFn(min), clippedFn2(min));
+    let lastFlip = min;
+    for (let t = min; t <= max; t += step) {
+      const top = clippedFn(t);
+      const bottom = clippedFn2(t);
+      const diff = GraphUtils.coordDiff(top, bottom);
+
+      // Find points where it flips
+      // Create path that sketches area between the two functions
+      if (
+      // if there is an asymptote here, meaning that the graph
+      // switches signs and has a large difference
+      diff[1] < 0 !== lastDiff[1] < 0 && Math.abs(diff[1] - lastDiff[1]) > 2 * thisGraphie.drawingTransform().pixelsPerUnitY() ||
+      // or the function is undefined
+      isNaN(diff[1])) {
+        // split the path at this point, and draw it
+        if (shade) {
+          // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
+          points.push(top);
 
-            // backtrack to draw paired function
-            for (let u = t - step; u >= lastFlip; u -= step) {
-              // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-              points.push(clippedFn2(u));
-            }
-            lastFlip = t;
-          }
-          paths.push(this.path(points));
-          // restart the path, excluding this point
-          points = [];
-          if (shade) {
+          // backtrack to draw paired function
+          for (let u = t - step; u >= lastFlip; u -= step) {
             // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-            points.push(top);
+            points.push(clippedFn2(u));
           }
-        } else {
-          // otherwise, just add the point to the path
-          // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-          points.push(top);
+          lastFlip = t;
         }
-        lastDiff = diff;
-      }
-      if (shade) {
-        // backtrack to draw paired function
-        for (let u = max - step; u >= lastFlip; u -= step) {
+        paths.push(path(points));
+        // restart the path, excluding this point
+        points = [];
+        if (shade) {
           // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
-          points.push(clippedFn2(u));
+          points.push(top);
         }
+      } else {
+        // otherwise, just add the point to the path
+        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
+        points.push(top);
       }
-      paths.push(this.path(points));
-      return paths;
-    },
-    plotPolar: function (fn, range) {
-      const min = range[0];
-      const max = range[1];
-
-      // There is probably a better heuristic for this
-      if (!currentStyle["plot-points"]) {
-        currentStyle["plot-points"] = 2 * (max - min) * xScale;
-      }
-      return this.plotParametric(function (th) {
-        return polar(fn(th), th * 180 / Math.PI);
-      }, range);
-    },
-    plot: function (fn, range, swapAxes, shade, fn2) {
-      const min = range[0];
-      const max = range[1];
-      if (!currentStyle["plot-points"]) {
-        currentStyle["plot-points"] = 2 * (max - min) * xScale;
-      }
-      if (swapAxes) {
-        if (fn2) {
-          // TODO(charlie): support swapped axis area shading
-          throw new PerseusError("Can't shade area between functions with swapped axes.", Errors.Internal);
-        }
-        return this.plotParametric(function (y) {
-          return [fn(y), y];
-        }, range, shade);
+      lastDiff = diff;
+    }
+    if (shade) {
+      // backtrack to draw paired function
+      for (let u = max - step; u >= lastFlip; u -= step) {
+        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
+        points.push(clippedFn2(u));
       }
+    }
+    paths.push(path(points));
+    return paths;
+  }
+  function plot(fn, range, swapAxes, shade, fn2) {
+    const min = range[0];
+    const max = range[1];
+    if (!thisGraphie.currentStyle["plot-points"]) {
+      thisGraphie.currentStyle["plot-points"] = 2 * (max - min) * thisGraphie.drawingTransform().pixelsPerUnitX();
+    }
+    if (swapAxes) {
       if (fn2) {
-        if (shade) {
-          return this.plotParametric(function (x) {
-            return [x, fn(x)];
-          }, range, shade, function (x) {
-            return [x, fn2(x)];
-          });
-        }
-        throw new PerseusError("fn2 should only be set when 'shade' is True.", Errors.Internal);
+        // TODO(charlie): support swapped axis area shading
+        throw new PerseusError("Can't shade area between functions with swapped axes.", Errors.Internal);
       }
-      return this.plotParametric(function (x) {
-        return [x, fn(x)];
+      return plotParametric(function (y) {
+        return [fn(y), y];
       }, range, shade);
-    },
-    /**
-     * Given a piecewise function, return a Raphael set of paths that
-     * can be used to draw the function, e.g. using style().
-     * Calls plotParametric.
-     *
-     * @param  {[]} fnArray    array of functions which when called
-     *                         with a parameter i return the value of
-     *                         the function at i
-     * @param  {[]} rangeArray array of ranges over which the
-     *                         corresponding functions are defined
-     * @return {Set<any>}      set of paths
-     */
-    plotPiecewise: function (fnArray, rangeArray) {
-      const paths = raphael$1.set();
-      const self = this;
-      _.times(fnArray.length, function (i) {
-        const fn = fnArray[i];
-        const range = rangeArray[i];
-        const fnPaths = self.plotParametric(function (x) {
+    }
+    if (fn2) {
+      if (shade) {
+        return plotParametric(function (x) {
           return [x, fn(x)];
-        }, range);
-        _.each(fnPaths, function (fnPath) {
-          paths.push(fnPath);
+        }, range, shade, function (x) {
+          return [x, fn2(x)];
         });
-      });
-      return paths;
-    },
-    /**
-     * Given an array of coordinates of the form [x, y], create and
-     * return a Raphael set of Raphael circle objects at those
-     * coordinates
-     *
-     * @param  {Array<[number, number]>} endpointArray
-     * @return {Set<any>} set of circles
-     */
-    plotEndpointCircles: function (endpointArray) {
-      const circles = raphael$1.set();
-      const self = this;
-      _.each(endpointArray, function (coord, i) {
-        circles.push(self.circle(coord, 0.15));
-      });
-      return circles;
-    },
-    plotAsymptotes: function (fn, range) {
-      const min = range[0];
-      const max = range[1];
-      const step = (max - min) / (currentStyle["plot-points"] || 800);
-      const asymptotes = raphael$1.set();
-      let lastVal = fn(min);
-      for (let t = min; t <= max; t += step) {
-        const funcVal = fn(t);
-        if (funcVal < 0 !== lastVal < 0 && Math.abs(funcVal - lastVal) > 2 * yScale) {
-          asymptotes.push(this.line([t, yScale], [t, -yScale]));
-        }
-        lastVal = funcVal;
       }
-      return asymptotes;
+      throw new PerseusError("fn2 should only be set when 'shade' is True.", Errors.Internal);
     }
+    return plotParametric(function (x) {
+      return [x, fn(x)];
+    }, range, shade);
+  }
+  const drawingTools = {
+    circle,
+    rect,
+    ellipse,
+    fixedEllipse,
+    arc,
+    path,
+    fixedPath,
+    scaledPath,
+    line,
+    parabola,
+    fixedLine,
+    sinusoid,
+    grid,
+    label,
+    plotParametric,
+    plot
   };
-  const graphie = new Graphie$1();
-  _.extend(graphie, {
-    raphael: raphael$1,
-    init: function (options) {
-      let scale = options.scale || [40, 40];
-      scale = typeof scale === "number" ? [scale, scale] : scale;
-      xScale = scale[0];
-      yScale = scale[1];
-      if (options.range == null) {
-        throw new PerseusError("range should be specified in graph init", Errors.Internal);
-      }
-      xRange = options.range[0];
-      yRange = options.range[1];
-      const w = (xRange[1] - xRange[0]) * xScale;
-      const h = (yRange[1] - yRange[0]) * yScale;
-      raphael$1.setSize(w, h);
-      $(el).css({
-        width: w,
-        height: h
-      });
-      this.range = options.range;
-      this.scale = scale;
-      this.dimensions = [w, h];
-      this.xpixels = w;
-      this.ypixels = h;
-      this.isMobile = options.isMobile;
-      return this;
-    },
-    style: function (attrs, fn) {
-      const processed = processAttributes(attrs);
-      if (typeof fn === "function") {
-        const oldStyle = currentStyle;
-        currentStyle = $.extend({}, currentStyle, processed);
-        const result = fn.call(graphie);
-        currentStyle = oldStyle;
-        return result;
-      }
-      $.extend(currentStyle, processed);
-    },
-    scalePoint: scalePoint,
-    scaleVector: scaleVector,
-    unscalePoint: unscalePoint,
-    unscaleVector: unscaleVector,
-    // Custom SVG path functions that are dependent on graphie range
-    // `svgPath`, while independent of range, is exported for consistency
-    svgPath: svgPath,
-    svgParabolaPath: svgParabolaPath,
-    svgSinusoidPath: svgSinusoidPath
-  });
-  $.each(drawingTools, function (name) {
-    graphie[name] = function (...args) {
+  function graphify(drawingFn) {
+    return function (...args) {
       const last = args[args.length - 1];
-      const oldStyle = currentStyle;
+      const oldStyle = thisGraphie.currentStyle;
       let result;
 
       // The last argument is probably trying to change the style
       if (typeof last === "object" && !_.isArray(last)) {
-        currentStyle = _extends({}, currentStyle, processAttributes(last));
+        thisGraphie.currentStyle = _extends({}, thisGraphie.currentStyle, thisGraphie.processAttributes(last));
         const rest = [].slice.call(args, 0, args.length - 1);
-        result = drawingTools[name](...rest);
+        result = drawingFn(...rest);
       } else {
-        currentStyle = $.extend({}, currentStyle);
-        result = drawingTools[name](...args);
+        thisGraphie.currentStyle = $.extend({}, thisGraphie.currentStyle);
+        result = drawingFn(...args);
       }
 
       // Bad heuristic for recognizing Raphael elements and sets
       const type = result.constructor.prototype;
       if (type === raphael.exports.el || type === raphael.exports.st) {
-        result.attr(currentStyle);
-        if (currentStyle.arrows) {
+        result.attr(thisGraphie.currentStyle);
+        if (thisGraphie.currentStyle.arrows) {
           result = addArrowheads(result);
         }
       } else if (result instanceof $) {
         // We assume that if it's not a Raphael element/set, it
         // does not contain SVG.
         // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
-        result.css(_extends({}, currentStyle, SVG_SPECIFIC_STYLE_MASK));
+        result.css(_extends({}, thisGraphie.currentStyle, SVG_SPECIFIC_STYLE_MASK));
       }
-      currentStyle = oldStyle;
+      thisGraphie.currentStyle = oldStyle;
       return result;
     };
+  }
+  $.each(drawingTools, function (name) {
+    thisGraphie[name] = graphify(drawingTools[name]);
   });
-
-  // Initializes graphie settings for a graph and draws the basic graph
-  // features (axes, grid, tick marks, and axis labels)
-  // Options expected are:
-  // - range: [[a, b], [c, d]] or [a, b]
-  // - scale: [a, b] or number
-  // - gridOpacity: number (0 - 1)
-  // - gridStep: [a, b] or number (relative to units)
-  // - tickStep: [a, b] or number (relative to grid steps)
-  // - tickLen: [a, b] or number (in pixels)
-  // - labelStep: [a, b] or number (relative to tick steps)
-  // - yLabelFormat: fn to format label string for y-axis
-  // - xLabelFormat: fn to format label string for x-axis
-  // - smartLabelPositioning: true or false to ignore minus sign
-  graphie.graphInit = function (options) {
-    options = options || {};
-    $.each(options, function (prop, val) {
-      // allow options to be specified by a single number for shorthand if
-      // the horizontal and vertical components are the same
-      if (
-      // @ts-expect-error - TS2339 - Property 'match' does not exist on type 'string | number | symbol'.
-      !prop.match(/.*Opacity$/) && prop !== "range" && typeof val === "number") {
-        options[prop] = [val, val];
-      }
-
-      // allow symmetric ranges to be specified by the absolute values
-      if (prop === "range" || prop === "gridRange") {
-        if (val.constructor === Array) {
-          // but don't mandate symmetric ranges
-          if (val[0].constructor !== Array) {
-            options[prop] = [[-val[0], val[0]], [-val[1], val[1]]];
-          }
-        } else if (typeof val === "number") {
-          options[prop] = [[-val, val], [-val, val]];
-        }
-      }
-    });
-    const range = options.range || [[-10, 10], [-10, 10]];
-    const gridRange = options.gridRange || options.range;
-    const scale = options.scale || [20, 20];
-    const grid = options.grid != null ? options.grid : true;
-    const gridOpacity = options.gridOpacity || 0.1;
-    const gridStep = options.gridStep || [1, 1];
-    const axes = options.axes != null ? options.axes : true;
-    const axisArrows = options.axisArrows || "";
-    const axisOpacity = options.axisOpacity || 1.0;
-    const axisCenter = options.axisCenter || [Math.min(Math.max(range[0][0], 0), range[0][1]), Math.min(Math.max(range[1][0], 0), range[1][1])];
-    const axisLabels = options.axisLabels != null ? options.axisLabels : false;
-    const ticks = options.ticks != null ? options.ticks : true;
-    const tickStep = options.tickStep || [2, 2];
-    const tickLen = options.tickLen || [5, 5];
-    const tickOpacity = options.tickOpacity || 1.0;
-    const labels = options.labels || options.labelStep || false;
-    const labelStep = options.labelStep || [1, 1];
-    const labelOpacity = options.labelOpacity || 1.0;
-    let unityLabels = options.unityLabels || false;
-    const labelFormat = options.labelFormat || function (a) {
-      return a;
-    };
-    let xLabelFormat = options.xLabelFormat || labelFormat;
-    let yLabelFormat = options.yLabelFormat || labelFormat;
-    const smartLabelPositioning = options.smartLabelPositioning != null ? options.smartLabelPositioning : true;
-    const realRange = [[range[0][0] - (range[0][0] > 0 ? 1 : 0), range[0][1] + (range[0][1] < 0 ? 1 : 0)], [range[1][0] - (range[1][0] > 0 ? 1 : 0), range[1][1] + (range[1][1] < 0 ? 1 : 0)]];
-    if (!_.isArray(unityLabels)) {
-      unityLabels = [unityLabels, unityLabels];
-    }
-    if (smartLabelPositioning) {
-      const minusIgnorer = function minusIgnorer(lf) {
-        return function (a) {
-          return (lf(a) + "").replace(/-(\d)/g, "\\llap{-}$1");
-        };
-      };
-      xLabelFormat = minusIgnorer(xLabelFormat);
-      yLabelFormat = minusIgnorer(yLabelFormat);
-    }
-    this.init({
-      range: realRange,
-      scale: scale,
-      isMobile: options.isMobile
-    });
-
-    // draw grid
-    if (grid) {
-      this.grid(gridRange[0], gridRange[1], {
-        stroke: options.isMobile ? KhanColors.GRAY_C : "#000000",
-        opacity: options.isMobile ? 1 : gridOpacity,
-        step: gridStep,
-        strokeWidth: options.isMobile ? 1 : 2
-      });
-    }
-
-    // draw axes
-    if (axes) {
-      // this is a slight hack until <-> arrowheads work
-      if (axisArrows === "<->" || axisArrows === true) {
-        this.style({
-          stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
-          opacity: options.isMobile ? 1 : axisOpacity,
-          strokeWidth: options.isMobile ? 1 : 2,
-          arrows: "->"
-        }, function () {
-          if (range[1][0] < 0 && range[1][1] > 0) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.path([axisCenter, [gridRange[0][0], axisCenter[1]]]);
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.path([axisCenter, [gridRange[0][1], axisCenter[1]]]);
-          }
-          if (range[0][0] < 0 && range[0][1] > 0) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.path([axisCenter, [axisCenter[0], gridRange[1][0]]]);
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.path([axisCenter, [axisCenter[0], gridRange[1][1]]]);
-          }
-        });
-
-        // also, we don't support "<-" arrows yet, but why you
-        // would want that on your graph is beyond me.
-      } else if (axisArrows === "->" || axisArrows === "") {
-        this.style({
-          stroke: "#000000",
-          opacity: axisOpacity,
-          strokeWidth: 2,
-          arrows: axisArrows
-        }, function () {
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          this.path([[gridRange[0][0], axisCenter[1]], [gridRange[0][1], axisCenter[1]]]);
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          this.path([[axisCenter[0], gridRange[1][0]], [axisCenter[0], gridRange[1][1]]]);
-        });
-      }
-      if (axisLabels && axisLabels.length === 2) {
-        this.label([gridRange[0][1], axisCenter[1]], axisLabels[0], "right");
-        this.label([axisCenter[0], gridRange[1][1]], axisLabels[1], "above");
-      }
-    }
-
-    // draw tick marks
-    if (ticks) {
-      const halfWidthTicks = options.isMobile;
-      this.style({
-        stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
-        opacity: options.isMobile ? 1 : tickOpacity,
-        strokeWidth: 1
-      }, function () {
-        // horizontal axis
-        let step = gridStep[0] * tickStep[0];
-        let len = tickLen[0] / scale[1];
-        let start = gridRange[0][0];
-        let stop = gridRange[0][1];
-        if (range[1][0] < 0 && range[1][1] > 0) {
-          for (let x = step + axisCenter[0]; x <= stop; x += step) {
-            if (x < stop || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-              this.line([x, -len + axisCenter[1]], [x, halfWidthTicks ? 0 : len + axisCenter[1]]);
-            }
-          }
-          for (let x = -step + axisCenter[0]; x >= start; x -= step) {
-            if (x > start || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-              this.line([x, -len + axisCenter[1]], [x, halfWidthTicks ? 0 : len + axisCenter[1]]);
-            }
-          }
-        }
-
-        // vertical axis
-        step = gridStep[1] * tickStep[1];
-        len = tickLen[1] / scale[0];
-        start = gridRange[1][0];
-        stop = gridRange[1][1];
-        if (range[0][0] < 0 && range[0][1] > 0) {
-          for (let y = step + axisCenter[1]; y <= stop; y += step) {
-            if (y < stop || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-              this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
-            }
-          }
-          for (let y = -step + axisCenter[1]; y >= start; y -= step) {
-            if (y > start || !axisArrows) {
-              // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-              this.line([-len + axisCenter[0], y], [halfWidthTicks ? 0 : len + axisCenter[0], y]);
-            }
-          }
-        }
-      });
-    }
-
-    // draw axis labels
-    if (labels) {
-      this.style({
-        stroke: options.isMobile ? KhanColors.GRAY_G : "#000000",
-        opacity: options.isMobile ? 1 : labelOpacity
-      }, function () {
-        // horizontal axis
-        let step = gridStep[0] * tickStep[0] * labelStep[0];
-        let start = gridRange[0][0];
-        let stop = gridRange[0][1];
-        const xAxisPosition = axisCenter[0] < 0 ? "above" : "below";
-        const yAxisPosition = axisCenter[0] < 0 ? "right" : "left";
-        const xShowZero = axisCenter[0] === 0 && axisCenter[1] !== 0;
-        const yShowZero = axisCenter[0] !== 0 && axisCenter[1] === 0;
-        const axisOffCenter = axisCenter[0] !== 0 || axisCenter[1] !== 0;
-        const showUnityX = unityLabels[0] || axisOffCenter;
-        const showUnityY = unityLabels[1] || axisOffCenter;
-
-        // positive x-axis
-        for (let x = (xShowZero ? 0 : step) + axisCenter[0]; x <= stop; x += step) {
-          if (x < stop || !axisArrows) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.label([x, axisCenter[1]], xLabelFormat(x), xAxisPosition);
-          }
-        }
-
-        // negative x-axis
-        for (let x = -step * (showUnityX ? 1 : 2) + axisCenter[0]; x >= start; x -= step) {
-          if (x > start || !axisArrows) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.label([x, axisCenter[1]], xLabelFormat(x), xAxisPosition);
-          }
-        }
-        step = gridStep[1] * tickStep[1] * labelStep[1];
-        start = gridRange[1][0];
-        stop = gridRange[1][1];
-
-        // positive y-axis
-        for (let y = (yShowZero ? 0 : step) + axisCenter[1]; y <= stop; y += step) {
-          if (y < stop || !axisArrows) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.label([axisCenter[0], y], yLabelFormat(y), yAxisPosition);
-          }
-        }
-
-        // negative y-axis
-        for (let y = -step * (showUnityY ? 1 : 2) + axisCenter[1]; y >= start; y -= step) {
-          if (y > start || !axisArrows) {
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this.label([axisCenter[0], y], yLabelFormat(y), yAxisPosition);
-          }
-        }
-      });
-    }
-  };
-  return graphie;
+  return thisGraphie;
 };
 
 /* eslint-disable */
@@ -13368,7 +13324,7 @@ _.extend(MovableAngle.prototype, {
           let angle = GraphUtils.findAngle(newPoint, vertex);
           angle = Math.round((angle - snapOffset) / snap) * snap + snapOffset;
           const distance = GraphUtils.getDistance(newPoint, vertex);
-          return addPoints(vertex, graphie.polar(distance, angle));
+          return addPoints(vertex, polar(distance, angle));
         }
         return true;
       };
@@ -18436,6 +18392,27 @@ const registerEditors = editorsToRegister => {
     editors[editor.widgetName] = editor;
   });
 };
+
+/**
+ *
+ * @param name - the widget that you are trying to replace
+ * @param replacementName - the name of the widget that takes its place
+ *
+ * e.g. replaceEditor("transformer", "always-correct") will make it so the
+ * transformer widget is replaced by the always correct widget
+ */
+const replaceEditor = (name, replacementName) => {
+  const substituteEditor = editors[replacementName];
+  if (!substituteEditor && Log) {
+    const errorMsg = `Failed to replace editor ${name} with ${replacementName}`;
+    Log.error(errorMsg, Errors.Internal);
+    return;
+  }
+  editors[name] = substituteEditor;
+  if (Log) {
+    Log.log(`INFO: Replacing editor ${name} with ${replacementName}`);
+  }
+};
 const getWidget = name => {
   // TODO(alex): Consider referring to these as renderers to avoid
   // overloading "widget"
@@ -18464,7 +18441,7 @@ const getVersion = name => {
       minor: 0
     };
   }
-  return null;
+  return;
 };
 const getVersionVector = () => {
   const version = {};
@@ -18745,6 +18722,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   registerWidgets: registerWidgets,
   replaceWidget: replaceWidget,
   registerEditors: registerEditors,
+  replaceEditor: replaceEditor,
   getWidget: getWidget,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -24370,14 +24348,14 @@ var Definition$1 = {
 
 // The props are type `any` on purpose so that this can receive props
 // from any deprecated widget
-class AutoCorrect extends React__default.Component {
+class DeprecatedStandin extends React__default.Component {
   constructor(...args) {
     super(...args);
     this.getUserInput = () => {
       return {};
     };
     this.simpleValidate = rubric => {
-      return AutoCorrect.validate(this.getUserInput(), rubric);
+      return DeprecatedStandin.validate(this.getUserInput(), rubric);
     };
   }
   static validate(userInput, rubric) {
@@ -24397,16 +24375,17 @@ class AutoCorrect extends React__default.Component {
         paddingBottom: 8
       }
     }, /*#__PURE__*/React__default.createElement(Banner, {
-      text: i18n._("This part of the question is no-longer available. You will not be graded on this part."),
-      kind: "warning",
+      text: i18n._("Sorry, this part of the question is no longer available. 😅 Don't worry, you won't be graded on this part. Keep going!"),
+      kind: "info",
       layout: "full-width"
     }));
   }
 }
-var DeprecatedStandin = {
+var DeprecatedStandin$1 = {
   name: "deprecated-standin",
   displayName: "Deprecated Standin",
-  widget: AutoCorrect
+  widget: DeprecatedStandin,
+  hidden: true
 };
 
 class Dropdown extends React.Component {
@@ -28895,7 +28874,7 @@ class InteractiveGraph extends React.Component {
         if (
         // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
         this.props.graph.snapTo === "angles" && this.points.length > 2) {
-          var _this$graphie5, _this$graphie6;
+          var _this$graphie5;
           // Snap to whole degree interior angles
 
           const angles = _.map(angleMeasures(coords), function (rad) {
@@ -28925,12 +28904,12 @@ class InteractiveGraph extends React.Component {
           // Solve for side by using the law of sines
           const side = Math.sin(innerAngles[1] * Math.PI / 180) / Math.sin(innerAngles[2] * Math.PI / 180) * knownSide;
           const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
-          const offset = (_this$graphie5 = this.graphie) == null ? void 0 : _this$graphie5.polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
-          return (_this$graphie6 = this.graphie) == null ? void 0 : _this$graphie6.addPoints(coords[rel(-1)], offset);
+          const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
+          return (_this$graphie5 = this.graphie) == null ? void 0 : _this$graphie5.addPoints(coords[rel(-1)], offset);
         }
         // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
         if (this.props.graph.snapTo === "sides" && this.points.length > 1) {
-          var _this$graphie7, _this$graphie8;
+          var _this$graphie6;
           // Snap to whole unit side measures
 
           const sides = _.map([[coords[rel(-1)], coords[i]], [coords[i], coords[rel(1)]], [coords[rel(-1)], coords[rel(1)]]], function (coords) {
@@ -28950,8 +28929,8 @@ class InteractiveGraph extends React.Component {
           const innerAngle = lawOfCosines(sides[0], sides[2], sides[1]);
           const outerAngle = GraphUtils.findAngle(coords[rel(1)], coords[rel(-1)]);
           const onLeft = sign(ccw(coords[rel(-1)], coords[rel(1)], coords[i])) === 1;
-          const offset = (_this$graphie7 = this.graphie) == null ? void 0 : _this$graphie7.polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
-          return (_this$graphie8 = this.graphie) == null ? void 0 : _this$graphie8.addPoints(coords[rel(-1)], offset);
+          const offset = polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
+          return (_this$graphie6 = this.graphie) == null ? void 0 : _this$graphie6.addPoints(coords[rel(-1)], offset);
         }
         // Snap to grid (already done)
         return true;
@@ -31029,7 +31008,7 @@ const AnswerPill = props => {
     id: idFactory.get("perseus-label-image-widget-answer-pill"),
     onClick: correct ? undefined : onClick,
     ref: ref,
-    style: [style, popperStyle, styles$h.relative, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
+    style: [style, popperStyle, styles$h.pill, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
   }, /*#__PURE__*/React.createElement(Renderer, {
     content: answerString,
     inline: true
@@ -31042,6 +31021,11 @@ const styles$h = StyleSheet.create({
   },
   incorrect: {
     backgroundColor: Color.offBlack64
+  },
+  pill: {
+    // Reset the Pill's default height in order to account
+    // for multi-line pills.
+    height: "auto"
   }
 });
 
@@ -43958,7 +43942,7 @@ var Video$1 = {
 };
 
 /* eslint-disable import/no-named-as-default */
-var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Transformer$1, Unit, Video$1, DeprecatedStandin];
+var extraWidgets = [Categorizer$1, CSProgram$1, Dropdown$1, Explanation$1, Definition$1, Grapher$1, GradedGroup$1, GradedGroupSet$1, Group$1, Iframe$1, Image$1, Interactive, InteractiveGraph$1, LabelImage$1, LightsPuzzle$1, Matrix$1, Matcher$1, Measurer$1, Molecule$1, NumberLine$1, Orderer$1, Passage$1, PassageRef$1, PassageRefTarget$1, Plotter$1, ReactionDiagram, Sequence$1, Simulator$1, Sorter$1, Table$1, Transformer$1, Unit, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -43976,7 +43960,7 @@ const init = function init(options) {
   // This section replaces widgets
   // When it's time to replace the transformer widget
   // uncomment this line
-  // Widgets.replaceWidget("transformer", "always-correct");
+  // Widgets.replaceWidget("transformer", "deprecated-standin");
 
   // Pass skipMathJax: true if MathJax is already loaded and configured.
   const skipMathJax = options.skipMathJax;
@@ -44002,7 +43986,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 = "17.8.0";
+const libVersion = "18.0.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46588,6 +46572,423 @@ const registerAllWidgetsForTesting = () => {
   // Widgets.replaceWidget("transformer", "deprecated-standin");
 };
 
+/**
+ * This function extracts the answers from the widgets.
+ *
+ * For each widget type, we first check to make sure the path to the answer exists,
+ * then we extract the answer and add it to the list of answers.
+ *
+ * A list is returned because some widgets, like multi-select radio widgets and groups
+ * can have multiple answers.
+ *
+ * @param {PerseusRenderer["widgets"]} widgets
+ * @returns a list of strings that are the answers to the widgets
+ */
+function getAnswersFromWidgets(widgets) {
+  const answers = [];
+  keys(widgets).forEach(widgetID => {
+    var _options$choices, _categorizer$options, _categorizer$options2, _categorizer$options3, _dropdown$options, _numericInput$options, _inputNumber$options, _expression$options, _gradedGroup$options, _plotter$options, _plotter$options2, _grapher$options, _orderer$options, _sorter$options, _labelImage$options, _numberLine$options, _matrix$options, _matcher$options, _matcher$options2;
+    const widget = widgets[widgetID];
+    if (!widget.options) {
+      return;
+    }
+    switch (widget.type) {
+      case "radio":
+        const radio = widget;
+        const options = radio.options;
+        // Answer is the content of the correct choice
+        if (options != null && (_options$choices = options.choices) != null && _options$choices.length) {
+          for (const choice of options.choices) {
+            if (choice != null && choice.correct) {
+              answers.push(choice.content);
+            }
+          }
+        }
+        break;
+      case "categorizer":
+        // Answer is a list of items mapped to their category
+        // e.g. ['item 1: category 1', 'item 2: category 2']
+        const categorizer = widget;
+        if ((_categorizer$options = categorizer.options) != null && _categorizer$options.categories && (_categorizer$options2 = categorizer.options) != null && _categorizer$options2.items && (_categorizer$options3 = categorizer.options) != null && _categorizer$options3.values) {
+          var _categorizer$options4, _categorizer$options5, _categorizer$options6;
+          const categories = (_categorizer$options4 = categorizer.options) == null ? void 0 : _categorizer$options4.categories;
+          const items = (_categorizer$options5 = categorizer.options) == null ? void 0 : _categorizer$options5.items;
+          const values = (_categorizer$options6 = categorizer.options) == null ? void 0 : _categorizer$options6.values;
+          answers.push(...values.map((value, index) => `${items[index]}: ${categories[value]}`));
+        }
+        break;
+      case "dropdown":
+        // Answer is the content of correct dropdown option
+        const dropdown = widget;
+        if ((_dropdown$options = dropdown.options) != null && _dropdown$options.choices) {
+          for (const choice of dropdown.options.choices) {
+            if (choice.correct) {
+              answers.push(choice.content);
+            }
+          }
+        }
+        break;
+      case "numeric-input":
+        // Answer is the numeric value cast to a string
+        const numericInput = widget;
+        if ((_numericInput$options = numericInput.options) != null && _numericInput$options.answers) {
+          for (const ans of numericInput.options.answers) {
+            if (ans.status === "correct" && ans.value != null) {
+              answers.push(ans.value.toString());
+            }
+          }
+        }
+        break;
+      case "input-number":
+        // Answer is the correct value
+        const inputNumber = widget;
+        if ((_inputNumber$options = inputNumber.options) != null && _inputNumber$options.value) {
+          answers.push(inputNumber.options.value.toString());
+        }
+        break;
+      case "expression":
+        // Answer is a list of potential correct expressions,
+        // since there can be multiple correct forms of the expression
+        const expression = widget;
+        if ((_expression$options = expression.options) != null && _expression$options.answerForms) {
+          answers.push(...expression.options.answerForms.map(answer => answer.value));
+        }
+        break;
+      case "group":
+      case "graded-group":
+        // Groups can contain multiple widgets, so we recursively
+        // call this function to get the nested answers from the
+        // group's widgets
+        const gradedGroup = widget;
+        if ((_gradedGroup$options = gradedGroup.options) != null && _gradedGroup$options.widgets) {
+          answers.push(...getAnswersFromWidgets(gradedGroup.options.widgets));
+        }
+        break;
+      case "plotter":
+        // Answer is a map of the correct value for each category
+        // e.g. '{Soccer: 35, Basketball: 20, Golf: 45, Volleyball: 15,
+        // Tennis: 30}'
+        const plotter = widget;
+        if ((_plotter$options = plotter.options) != null && _plotter$options.categories && (_plotter$options2 = plotter.options) != null && _plotter$options2.correct && plotter.options.categories.length === plotter.options.correct.length) {
+          const {
+            categories,
+            correct
+          } = plotter.options;
+          answers.push(`{${categories.map((category, index) => `${category}: ${correct[index]}`).join(", ")}}`);
+        }
+        break;
+      case "interactive-graph":
+      case "grapher":
+        // Answer is a list of points that should be on the graph
+        // E.g. 'There should be point(s) on [(-1, 1), (1, 1)]'
+        const grapher = widget;
+        // @ts-expect-error - TS2339 - Property 'coords' does not exist on type '{ type: "absolute_value"; coords: [Coord, Coord]; } | { type: "exponential"; asymptote: [Coord, Coord]; coords: [Coord, Coord]; } | { type: "linear"; coords: [...]; } | ... 4 more ... | PerseusGraphType'.
+        if ((_grapher$options = grapher.options) != null && (_grapher$options = _grapher$options.correct) != null && _grapher$options.coords) {
+          var _grapher$options$corr;
+          answers.push(
+          // @ts-expect-error - TS2339 - Property 'coords' does not exist on type '{ type: "absolute_value"; coords: [Coord, Coord]; } | { type: "exponential"; asymptote: [Coord, Coord]; coords: [Coord, Coord]; } | { type: "linear"; coords: [...]; } | ... 4 more ... | PerseusGraphType'.
+          `There should be point(s) on [${(_grapher$options$corr = grapher.options.correct) == null ? void 0 : _grapher$options$corr.coords.join("], [")}]`);
+        }
+        break;
+      case "orderer":
+        // Answer is the content of the each option
+        // in the correct order on newlines
+        // E.g. 'item 1\nitem 2\nitem 3'
+        const orderer = widget;
+        if ((_orderer$options = orderer.options) != null && _orderer$options.correctOptions) {
+          answers.push(orderer.options.correctOptions.map(option => option.content).join("\n"));
+        }
+        break;
+      case "sorter":
+        // Answer is the content of each option in the correct order
+        // separated by commas
+        // E.g. 'item 1, item 2, item 3'
+        const sorter = widget;
+        if ((_sorter$options = sorter.options) != null && _sorter$options.correct) {
+          answers.push(sorter.options.correct.join(", "));
+        }
+        break;
+      case "label-image":
+        // Answer is a list of labels, their positions, and their answer
+        // E.g. '{label: "label 1", position: {x: 0.5, y: 0.5}, answer: "answer 1"}'
+        const labelImage = widget;
+        if ((_labelImage$options = labelImage.options) != null && _labelImage$options.markers) {
+          answers.push(...labelImage.options.markers.map(m => `{label: "${m.label}", position: {${m.x},${m.y}}, answer: "${m.answers.join(", ")}"}`));
+        }
+        break;
+      case "number-line":
+        // Answer is the correct x position on the number line
+        // E.g. '0.5'
+        const numberLine = widget;
+        if (((_numberLine$options = numberLine.options) == null ? void 0 : _numberLine$options.correctX) != null) {
+          answers.push(numberLine.options.correctX.toString());
+        }
+        break;
+      case "matrix":
+        // Answer is a list of rows representing the matrix
+        // E.g. '[[1, 2], [3, 4]]'
+        const matrix = widget;
+        if ((_matrix$options = matrix.options) != null && _matrix$options.answers) {
+          answers.push(`[${matrix.options.answers.join("], [")}]`);
+        }
+        break;
+      case "matcher":
+        // Answer is a table of the left and right items
+        // E.g. '| Left | Right |\n| --- | --- |\n| left item 1 | right item 1 |\n| left item 2 | right item 2 |'
+        const matcher = widget;
+        if ((_matcher$options = matcher.options) != null && _matcher$options.left && (_matcher$options2 = matcher.options) != null && _matcher$options2.right) {
+          const {
+            left,
+            right
+          } = matcher.options;
+          const [leftHeader, rightHeader] = matcher.options.labels;
+          const tableHeader = `| ${leftHeader} | ${rightHeader} |\n| --- | --- |`;
+          const tableRows = left.map((leftItem, index) => {
+            return `| ${leftItem} | ${right[index]} |`;
+          });
+          const table = [tableHeader, ...tableRows].join("\n");
+          answers.push(table);
+        }
+        break;
+    }
+  });
+  return answers;
+}
+
+/**
+ * Inject a string equivalent of the widgets into the content.
+ *
+ * Content may contain Perseus widgets, that looks like this: '[[☃ Radio 1]]'.
+ * This function replaces those widgets with its equivalent string.
+ *
+ * @param {string} content
+ * @param {PerseusRenderer["widgets"]} widgets
+ * @returns
+ */
+function injectWidgets(content, widgets) {
+  // The types for taskProgress.itemData are not well defined,
+  // so there is a chance that widgets or content could be undefined.
+  // In that scenario, simply exit early and return the content as is.
+  if (!content) {
+    return "";
+  }
+  if (!widgets) {
+    return content;
+  }
+  let context = content;
+  keys(widgets).forEach(widgetID => {
+    var _radio$options, _image$options, _labelImage$options2, _explanation$options, _passage$options, _passage$options2, _group$options, _gradedGroup$options2, _categorizer$options7, _dropdown$options2, _definition$options, _orderer$options2, _sorter$options2, _interactiveGraph$opt, _numberLine$options2, _numberLine$options3, _numberLine$options4, _matrix$options2, _matcher$options3, _matcher$options4;
+    const widget = widgets[widgetID];
+    if (!widget.options) {
+      return;
+    }
+    switch (widget.type) {
+      case "radio":
+        // Replace radio with the radio options
+        // '[[☃ Radio 1]]' -> 'option 1\noption 2\noption 3'
+        const radio = widget;
+        if ((_radio$options = radio.options) != null && (_radio$options = _radio$options.choices) != null && _radio$options.length) {
+          var _radio$options2;
+          let radioContext = radio.options.choices.map(choice => choice.content).join("\n");
+          if ((_radio$options2 = radio.options) != null && _radio$options2.randomize) {
+            radioContext += "\nThose options are displayed in a different order to the user. If the user says the letter, number, or ordinal number, always ask them clarify which option they are referring to.\n";
+          }
+          context = context.replace(`[[☃ ${widgetID}]]`, radioContext);
+        }
+        break;
+      case "image":
+        // Replace image with the image's alt text
+        // '[[☃ Image 1]]' -> '<img id="Image 1" alt="The text for this image">'
+        const image = widget;
+        if ((_image$options = image.options) != null && _image$options.alt) {
+          context = context.replace(`[[☃ ${widgetID}]]`, `<img id="${widgetID}" alt="${image.options.alt}">`);
+        }
+        break;
+      case "label-image":
+        // Replace label-image with the label-image's alt text
+        // '[[☃ Label Image 1]]' -> '[An image with dots that user needs to label. Label choices: [choice 1, choice 2]. Image alt text: The text for this image]'
+        const labelImage = widget;
+        if ((_labelImage$options2 = labelImage.options) != null && _labelImage$options2.imageAlt) {
+          var _labelImage$options$i, _labelImage$options3;
+          context = context.replace(`[[☃ ${widgetID}]]`, `[An image with dots that user needs to label. Label choices: [${labelImage.options.choices.join(", ")}]. Image alt text: ${(_labelImage$options$i = (_labelImage$options3 = labelImage.options) == null ? void 0 : _labelImage$options3.imageAlt) != null ? _labelImage$options$i : ""}]`);
+        }
+        break;
+      case "explanation":
+        // Replace explaintion with the explaination text
+        // Note: explainations can have widgets inside of them too
+        // '[[☃ Explanation 1]]' -> 'This is the hidden explanation text'
+        const explanation = widget;
+        if ((_explanation$options = explanation.options) != null && _explanation$options.explanation) {
+          context = context.replace(`[[☃ ${widgetID}]]`, injectWidgets(explanation.options.explanation, explanation.options.widgets));
+        }
+        break;
+      case "passage":
+        // Replace passage with the passage text
+        // '[[☃ Passage 1]]' -> '# Passage Title\n\nPassage text'
+        const passage = widget;
+        if ((_passage$options = passage.options) != null && _passage$options.passageTitle || (_passage$options2 = passage.options) != null && _passage$options2.passageText) {
+          const {
+            passageTitle,
+            passageText
+          } = passage.options;
+          context = context.replace(`[[☃ ${widgetID}]]`, `# ${passageTitle}\n\n${passageText}`);
+        }
+        break;
+      case "group":
+      case "graded-group":
+        // Replace group with the group's nested content
+        // '[[☃ Group 1]]' -> 'Nested question\n[[☃ Radio 1]]'
+        //      -> 'Nested question\noption 1\noption 2\noption 3'
+        const group = widget;
+        if ((_group$options = group.options) != null && _group$options.widgets && group.options.content) {
+          context = context.replace(`[[☃ ${widgetID}]]`, injectWidgets(group.options.content, group.options.widgets));
+        }
+        break;
+      case "graded-group-set":
+        // Replace graded-group-set with the the nested groups
+        // '[[☃ Graded Group Set 1]]'
+        //      -> 'Nested question 1\noption 1\noption 2\noption 3\nNested question 2\noption 1\noption 2\noption 3'
+        const gradedGroup = widget;
+        if ((_gradedGroup$options2 = gradedGroup.options) != null && _gradedGroup$options2.gradedGroups) {
+          const gradedGroups = gradedGroup.options.gradedGroups;
+          const gradedGroupsContent = gradedGroups.reduce((acc, group) => {
+            if (group.widgets && group.content) {
+              acc += injectWidgets(group.content, group.widgets) + "\n";
+            }
+            return acc;
+          }, "");
+          context = context.replace(`[[☃ ${widgetID}]]`, gradedGroupsContent);
+        }
+        break;
+      case "categorizer":
+        // Replace categorizer with the options and categories
+        // '[[☃ Categorizer 1]]' -> '''
+        //    For each item, select the correct category. Categories: category 1, category 2, category 3.
+        //    Items:
+        //    item 1
+        //    item 2
+        // '''
+        const categorizer = widget;
+        if ((_categorizer$options7 = categorizer.options) != null && _categorizer$options7.categories && categorizer.options.items) {
+          const categories = categorizer.options.categories;
+          const items = categorizer.options.items;
+          context = context.replace(`[[☃ ${widgetID}]]`, `For each item, select the correct category. Categories: ${categories.join(", ")}.\nItems:\n${items.join("\n")}\n`);
+        }
+        break;
+      case "dropdown":
+        // Replace dropdown with the dropdown options
+        // '[[☃ Dropdown 1]]' -> '[option 1 | option 2 | option 3]'
+        const dropdown = widget;
+        if ((_dropdown$options2 = dropdown.options) != null && _dropdown$options2.choices) {
+          const choices = dropdown.options.choices.map(choice => choice.content);
+          context = context.replace(`[[☃ ${widgetID}]]`, `[${choices.join(" | ")}]`);
+        }
+        break;
+      case "definition":
+        // Replace definition with the word that is being defined
+        // NOTE(chase): this does not include the definition itself,
+        // because I believe the AI can infer that without wasting extra tokens
+        // '[[☃ Definition 1]]' -> 'word'
+        const definition = widget;
+        if ((_definition$options = definition.options) != null && _definition$options.togglePrompt) {
+          context = context.replace(`[[☃ ${widgetID}]]`, definition.options.togglePrompt);
+        }
+        break;
+      case "orderer":
+        // Replace orderer with the orderer options
+        // '[[☃ Orderer 1]]' -> 'option 1\noption 2\noption 3'
+        const orderer = widget;
+        if ((_orderer$options2 = orderer.options) != null && _orderer$options2.options) {
+          context = context.replace(`[[☃ ${widgetID}]]`, orderer.options.options.map(option => option.content).join("\n"));
+        }
+        break;
+      case "sorter":
+        // Replace sorter with the options
+        // NOTE(chase): These are already in the correct order
+        // '[[☃ Sorter 1]]' -> '[option 1 | option 2 | option 3]'
+        const sorter = widget;
+        if ((_sorter$options2 = sorter.options) != null && _sorter$options2.correct) {
+          const choices = sorter.options.correct;
+          context = context.replace(`[[☃ ${widgetID}]]`, `[${choices.join(" | ")}]`);
+        }
+        break;
+      case "interactive-graph":
+        // Replace interactive-graph with the graph's range
+        // '[[☃ Interactive Graph 1]]' -> '[Graph with an x range of -10 to 10 and y range of -10 to 10]'
+        const interactiveGraph = widget;
+        if (((_interactiveGraph$opt = interactiveGraph.options) == null ? void 0 : _interactiveGraph$opt.range.length) === 2) {
+          const [x, y] = interactiveGraph.options.range;
+          context = context.replace(`[[☃ ${widgetID}]]`, `[Graph with an x range of ${x[0]} to ${x[1]} and y range of ${y[0]} to ${y[1]}]`);
+        }
+        break;
+      case "number-line":
+        // Replace number-line with the number line's range, step, and initial position
+        // '[[☃ Number Line 1]]' -> '[Number line with a range of -10 to 10, a step of 1, and an initial position of 0]'
+        const numberLine = widget;
+        if (((_numberLine$options2 = numberLine.options) == null ? void 0 : _numberLine$options2.range.length) === 2 && (_numberLine$options3 = numberLine.options) != null && _numberLine$options3.tickStep && (_numberLine$options4 = numberLine.options) != null && _numberLine$options4.initialX) {
+          const [min, max] = numberLine.options.range;
+          const step = numberLine.options.tickStep;
+          const initialPosition = numberLine.options.initialX;
+          context = context.replace(`[[☃ ${widgetID}]]`, `[Number line with a range of ${min} to ${max}, a step of ${step}, and an initial position of ${initialPosition}]`);
+        }
+        break;
+      case "matrix":
+        // Replace matrix with the matrix's dimensions
+        // '[[☃ Matrix 1]]' -> '[Matrix with 2 rows and 3 columns. The user can click on each cell to enter a value]'
+        const matrix = widget;
+        if (((_matrix$options2 = matrix.options) == null ? void 0 : _matrix$options2.matrixBoardSize.length) === 2) {
+          const [rows, columns] = matrix.options.matrixBoardSize;
+          context = context.replace(`[[☃ ${widgetID}]]`, `[Matrix with ${rows} rows and ${columns} columns. The user can click on each cell to enter a value]`);
+        }
+        break;
+      case "matcher":
+        // Replace matcher with a table representing the left and right columns
+        // '[[☃ Matcher 1]]' -> '| Left Column | Right Column |\n| --- | --- |\n| option 1 | option 2 |\n| option 3 | option 4 |'
+        const matcher = widget;
+        if ((_matcher$options3 = matcher.options) != null && _matcher$options3.left && (_matcher$options4 = matcher.options) != null && _matcher$options4.right) {
+          const {
+            left,
+            right
+          } = matcher.options;
+          const [leftHeader, rightHeader] = matcher.options.labels;
+          const tableHeader = `| ${leftHeader} | ${rightHeader} |\n| --- | --- |`;
+          const tableRows = left.map((leftItem, index) => {
+            return `| ${leftItem} | ${right[index]} |`;
+          });
+          const table = [tableHeader, ...tableRows].join("\n");
+          const matcherWidgetExplanation = "The user needs to move items in the right column to match the correct option on the left. The order of items on the right side will be different from what the user sees.";
+          context = context.replace(`[[☃ ${widgetID}]]`, `${matcherWidgetExplanation}\n${table}`);
+        }
+        break;
+      case "numeric-input":
+      case "input-number":
+      case "expression":
+        // These widgets are just input fields, so we replace them with a ?
+        // 'Solve 2+2 [[☃ Numeric Input 1]]' -> 'Solve 2+2 ?'
+        // (we've found that using "?" gives the best results on fill-
+        // in-the-blank questions).
+        context = context.replace(`[[☃ ${widgetID}]]`, "?");
+        break;
+      default:
+        // Tell the bot that it doesn't understand this widget
+        context = context.replace(`[[☃ ${widgetID}]]`, `[[Unsupported ${widget.type} widget: Explain to the user that you are unable to understand the content in this widget and ask them to describe it.]]`);
+    }
+  });
+  return context;
+}
+
+/**
+ * Helper to parse Perseus JSON
+ * Why not just use JSON.parse? We want:
+ * - To make sure types are correct
+ * - To give us a central place to validate/transform output if needed
+ * @param {string} input - the stringified Perseus JSON
+ * @returns {PerseusItem} the parsed PerseusItem object
+ */
+function parsePerseusJSON(input) {
+  return JSON.parse(input);
+}
+
 const EditorJsonify = {
   serialize: function () {
     // Omit props that get passed to all widgets
@@ -46596,5 +46997,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, globalConstants, globalStyles, iconPaths as icons, init, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusJSON, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map