@khanacademy/perseus 17.8.0 → 18.0.1

package/dist/index.js

@@ -36,6 +36,7 @@ var reactPopper = require('react-popper');
 var createReactClass = require('create-react-class');
 var Link = require('@khanacademy/wonder-blocks-link');
 var perseusCore = require('@khanacademy/perseus-core');
+var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -8536,6 +8537,89 @@ const KhanColors = {
   DYNAMIC: "#6495ED" // BLUE
 };
 
+// DrawingTransform is responsible for transforming from "math coordinates"
+// (on the Cartesian plane) to "canvas coordinates" in pixels.
+class DrawingTransform {
+  // Scale is measured in pixels per unit on the Cartesian plane.
+
+  constructor(raphael, initialScale, bounds) {
+    this.raphael = raphael;
+    this.bounds = bounds;
+    this.xScale = initialScale[0];
+    this.yScale = initialScale[1];
+    this.setScale(initialScale);
+  }
+
+  // TODO(benchristel): rename these methods to transform* instead of scale*.
+  // They're doing more than scaling! Some of them also translate.
+  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];
+  };
+  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];
+  };
+  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];
+  };
+  unscaleVector = point => {
+    if (typeof point === "number") {
+      return this.unscaleVector([point, point]);
+    }
+    return [point[0] / this.xScale, point[1] / this.yScale];
+  };
+  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());
+  };
+  canvasDimensions = () => {
+    return [this.bounds.width() * this.xScale, this.bounds.height() * this.yScale];
+  };
+  pixelsPerUnitX = () => {
+    return this.xScale;
+  };
+  pixelsPerUnitY = () => {
+    return this.yScale;
+  };
+}
+
+// Defines the bounds of the visible area of a graph, in Cartesian coordinates.
+// GraphBounds is immutable.
+class GraphBounds {
+  constructor(xRange, yRange) {
+    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>'.
@@ -8563,23 +8647,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.
@@ -8601,27 +8668,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 + "" : "";
 
@@ -8637,41 +8691,9 @@ var Tex$1 = {
       // that name is already taken.
       render( /*#__PURE__*/React__namespace.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 = $__default["default"](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 $__default["default"](elem).attr("data-math-formula");
   }
 };
 
@@ -8679,23 +8701,6 @@ var Tex$1 = {
 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];
@@ -8751,135 +8756,336 @@ const GraphUtils = {
   },
   graphs: {}
 };
-const Graphie$1 = GraphUtils.Graphie = function () {};
-___default["default"].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]
-};
-
-/**
- * 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;
-  $__default["default"](el).css("position", "relative");
-  const raphael$1 = raphael.exports(el);
-
-  // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
-  $__default["default"](el).children("div").css("position", "absolute");
-
+class Graphie$1 {
+  #bounds;
+  #drawingTransform;
+  isMobile = false;
   // Set up some reasonable defaults
-  let currentStyle = {
+  currentStyle = {
     "stroke-width": 2,
     fill: "none"
   };
-  const scaleVector = function (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 (point) {
-    if (typeof point === "number") {
-      return unscalePoint([point, point]);
+
+  // 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.
+  constructor(el) {
+    this.el = el;
+    $__default["default"](el).css("position", "relative");
+    this.raphael = raphael.exports(el);
+
+    // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
+    $__default["default"](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);
+    }
+    this.#bounds = new GraphBounds(...options.range);
+    this.#drawingTransform = new DrawingTransform(this.raphael, scale, this.bounds());
+    const [w, h] = this.drawingTransform().canvasDimensions();
+    $__default["default"](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;
+  }
+
+  // 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 || {};
+    $__default["default"].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 (!___default["default"].isArray(unityLabels)) {
+      unityLabels = [unityLabels, unityLabels];
     }
-    const x = point[0];
-    const y = point[1];
-    return [x / xScale + xRange[0], yRange[1] - y / yScale];
-  };
-  const unscaleVector = function (point) {
-    if (typeof point === "number") {
-      return unscaleVector([point, point]);
+    const minusIgnorer = function (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
+      });
     }
-    return [point[0] / xScale, point[1] / yScale];
-  };
-  const setLabelMargins = function (span, size) {
-    const $span = $__default["default"](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");
+
+    // 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]]]);
+          }
+        });
+
+        // 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");
+      }
     }
-    $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
+
+    // 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]]);
+            }
+          }
+        }
+
+        // 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]);
+            }
+          }
+        }
       });
-    } else {
-      const multipliers = labelDirections[direction || "center"];
-      $span.css({
-        marginLeft: Math.round(width * multipliers[0]),
-        marginTop: Math.round(height * multipliers[1])
+    }
+
+    // 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);
+          }
+        }
       });
     }
-  };
-  const svgPath = function (points, alreadyScaled) {
-    return $__default["default"].map(points, function (point, i) {
+  }
+  drawingTransform() {
+    if (this.#drawingTransform == null) {
+      throw new Error("Can't get drawingTransform of an uninitialized Graphie");
+    }
+    return this.#drawingTransform;
+  }
+  bounds() {
+    if (this.#bounds == null) {
+      throw new Error("Can't get bounds of an uninitialized Graphie");
+    }
+    return this.#bounds;
+  }
+  style(attrs, fn) {
+    const processed = this.processAttributes(attrs);
+    if (typeof fn === "function") {
+      const oldStyle = this.currentStyle;
+      this.currentStyle = $__default["default"].extend({}, this.currentStyle, processed);
+      const result = fn.call(this);
+      this.currentStyle = oldStyle;
+      return result;
+    }
+    $__default["default"].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) {}
+  svgPath = (points, alreadyScaled) => {
+    return $__default["default"].map(points, (point, i) => {
       if (point === true) {
         return "z";
       }
-      const scaled = alreadyScaled ? point : scalePoint(point);
+      const scaled = alreadyScaled ? point : this.scalePoint(point);
       return (i === 0 ? "M" : "L") + KhanMath.bound(scaled[0]) + " " + KhanMath.bound(scaled[1]);
     }).join("");
   };
-  const svgParabolaPath = function (a, b, c) {
+  svgParabolaPath = (a, b, c) => {
     const computeParabola = function (x) {
       return (a * x + b) * x + c;
     };
 
     // If points are collinear, plot a line instead
     if (a === 0) {
-      const points = ___default["default"].map(xRange, function (x) {
-        return [x, computeParabola(x)];
-      });
+      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 svgPath(points);
+      return this.svgPath(points);
     }
 
     // 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]));
+    const distToEdge = Math.max(Math.abs(xVertex - this.bounds().xMin), Math.abs(xVertex - this.bounds().xMax));
 
     // To guarantee that drawn parabola to spans the viewport, use a point
     // on the edge of the graph furtherest from the vertex
@@ -8899,11 +9105,11 @@ GraphUtils.createGraphie = function (el) {
 
     // 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 = ___default["default"].map([left, control, right], scalePoint);
+    const points = ___default["default"].map([left, control, right], this.scalePoint);
     const values = ___default["default"].map(___default["default"].flatten(points), KhanMath.bound);
     return "M" + values[0] + "," + values[1] + " Q" + values[2] + "," + values[3] + " " + values[4] + "," + values[5];
   };
-  const svgSinusoidPath = function (a, b, c, d) {
+  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 (x) {
@@ -8912,7 +9118,7 @@ GraphUtils.createGraphie = function (el) {
     const computeDerivative = function (x) {
       return a * b * Math.cos(c - b * x);
     };
-    const coordsForOffset = function (initial, i) {
+    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;
@@ -8925,16 +9131,16 @@ GraphUtils.createGraphie = function (el) {
 
       // 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 ___default["default"].map(___default["default"].zip(xCoords, yCoords), scalePoint);
+      return ___default["default"].map(___default["default"].zip(xCoords, yCoords), this.scalePoint);
     };
 
     // How many quarter-periods do we need to span the graph?
-    const extent = xRange[1] - xRange[0];
+    const extent = this.bounds().width();
     const numQuarterPeriods = Math.ceil(extent / quarterPeriod) + 1;
 
-    // Find starting coordinate: first anchor point curve left of xRange[0]
+    // Find starting coordinate: first anchor point curve left of bounds.xMin
     let initial = c / b;
-    const distToEdge = initial - xRange[0];
+    const distToEdge = initial - this.bounds().xMin;
     initial -= quarterPeriod * Math.ceil(distToEdge / quarterPeriod);
 
     // First portion of path is special-case, requiring move-to ('M')
@@ -8946,28 +9152,30 @@ GraphUtils.createGraphie = function (el) {
     }
     return path;
   };
-
-  // `svgPath` is independent of graphie range, so we export it independently
-  GraphUtils.svgPath = svgPath;
-  const processAttributes = function (attrs) {
+  scalePoint = point => {
+    return this.drawingTransform().scalePoint(point);
+  };
+  scaleVector = point => {
+    return this.drawingTransform().scaleVector(point);
+  };
+  unscalePoint = point => {
+    return this.drawingTransform().unscalePoint(point);
+  };
+  unscaleVector = point => {
+    return this.drawingTransform().unscaleVector(point);
+  };
+  processAttributes(attrs) {
     const transformers = {
-      scale: function (scale) {
-        if (typeof scale === "number") {
-          scale = [scale, scale];
-        }
-        xScale = scale[0];
-        yScale = scale[1];
-
-        // Update the canvas size
-        raphael$1.setSize((xRange[1] - xRange[0]) * xScale, (yRange[1] - yRange[0]) * yScale);
+      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) {
@@ -8975,18 +9183,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]
@@ -9006,7 +9214,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 (span, size) {
+    const $span = $__default["default"](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) {
@@ -9014,21 +9281,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"
         });
@@ -9044,519 +9311,415 @@ 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");
-      $__default["default"](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 = ___default["default"].map(points, scalePoint);
-      center = center ? scalePoint(center) : null;
-      createPath = createPath || svgPath;
-      const pathLeft = ___default["default"].min(___default["default"].pluck(points, 0));
-      const pathRight = ___default["default"].max(___default["default"].pluck(points, 0));
-      const pathTop = ___default["default"].min(___default["default"].pluck(points, 1));
-      const pathBottom = ___default["default"].max(___default["default"].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 = ___default["default"].map(points, function (point) {
-        return kmath.vector.add(kmath.vector.subtract(point, extraOffset), kmath.vector.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");
-      $__default["default"](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");
+    $__default["default"](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 = ___default["default"].map(points, thisGraphie.scalePoint);
+    center = center ? thisGraphie.scalePoint(center) : null;
+    createPath = createPath || thisGraphie.svgPath;
+    const pathLeft = ___default["default"].min(___default["default"].pluck(points, 0));
+    const pathRight = ___default["default"].max(___default["default"].pluck(points, 0));
+    const pathTop = ___default["default"].min(___default["default"].pluck(points, 1));
+    const pathBottom = ___default["default"].max(___default["default"].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 = ___default["default"].map(points, function (point) {
+      return kmath.vector.add(kmath.vector.subtract(point, extraOffset), kmath.vector.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");
+    $__default["default"](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
+    });
 
-      // 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 = kmath.vector.add(kmath.vector.subtract(start, extraOffset), kmath.vector.scale(padding, 0.5));
-      end = kmath.vector.add(kmath.vector.subtract(end, extraOffset), kmath.vector.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");
-      $__default["default"](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 = $__default["default"]("<span>").addClass("graphie-label");
-      const pad = currentStyle["label-distance"];
-      $span.css($__default["default"].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]
-        });
-      };
+    // Create Raphael canvas
+    const localRaphael = raphael.exports(wrapper, width, height);
 
-      // @ts-expect-error - TS2339 - Property 'setPosition' does not exist on type 'JQuery<HTMLElement>'.
-      $span.setPosition(point);
-      const span = $span[0];
+    // 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];
 
-      // @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]);
-        });
-      };
+    // Scale points to get values in pixels
+    start = thisGraphie.scalePoint(start);
+    end = thisGraphie.scalePoint(end);
 
-      // @ts-expect-error - TS2339 - Property 'processText' does not exist on type 'JQuery<HTMLElement>'.
-      $span.processText = function (text) {
-        $span.html(text);
+    // 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 = kmath.vector.add(kmath.vector.subtract(start, extraOffset), kmath.vector.scale(padding, 0.5));
+    end = kmath.vector.add(kmath.vector.subtract(end, extraOffset), kmath.vector.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");
+    $__default["default"](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 = $__default["default"]("<span>").addClass("graphie-label");
+    const pad = thisGraphie.currentStyle["label-distance"];
+    $span.css($__default["default"].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) {
+    let fn2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 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;
-      ___default["default"].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);
-        ___default["default"].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;
-      ___default["default"].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;
-    }
-  };
-  const graphie = new Graphie$1();
-  ___default["default"].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);
-      $__default["default"](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 = $__default["default"].extend({}, currentStyle, processed);
-        const result = fn.call(graphie);
-        currentStyle = oldStyle;
-        return result;
       }
-      $__default["default"].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
-  });
-  $__default["default"].each(drawingTools, function (name) {
-    graphie[name] = function () {
+      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
+  };
+  function graphify(drawingFn) {
+    return function () {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
       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" && !___default["default"].isArray(last)) {
-        currentStyle = {
-          ...currentStyle,
-          ...processAttributes(last)
+        thisGraphie.currentStyle = {
+          ...thisGraphie.currentStyle,
+          ...thisGraphie.processAttributes(last)
         };
         const rest = [].slice.call(args, 0, args.length - 1);
-        result = drawingTools[name](...rest);
+        result = drawingFn(...rest);
       } else {
-        currentStyle = $__default["default"].extend({}, currentStyle);
-        result = drawingTools[name](...args);
+        thisGraphie.currentStyle = $__default["default"].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 $__default["default"]) {
@@ -9564,256 +9727,18 @@ GraphUtils.createGraphie = function (el) {
         // does not contain SVG.
         // @ts-expect-error - TS2339 - Property 'css' does not exist on type '{}'.
         result.css({
-          ...currentStyle,
+          ...thisGraphie.currentStyle,
           ...SVG_SPECIFIC_STYLE_MASK
         });
       }
-      currentStyle = oldStyle;
+      thisGraphie.currentStyle = oldStyle;
       return result;
     };
+  }
+  $__default["default"].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 || {};
-    $__default["default"].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 (!___default["default"].isArray(unityLabels)) {
-      unityLabels = [unityLabels, unityLabels];
-    }
-    if (smartLabelPositioning) {
-      const minusIgnorer = function (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 */
@@ -13403,7 +13328,7 @@ ___default["default"].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;
       };
@@ -18503,6 +18428,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"
@@ -18531,7 +18477,7 @@ const getVersion = name => {
       minor: 0
     };
   }
-  return null;
+  return;
 };
 const getVersionVector = () => {
   const version = {};
@@ -18815,6 +18761,7 @@ var widgets$1 = /*#__PURE__*/Object.freeze({
   registerWidgets: registerWidgets,
   replaceWidget: replaceWidget,
   registerEditors: registerEditors,
+  replaceEditor: replaceEditor,
   getWidget: getWidget,
   getEditor: getEditor,
   getTransform: getTransform,
@@ -24505,7 +24452,7 @@ 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["default"].Component {
+class DeprecatedStandin extends React__default["default"].Component {
   static validate(userInput, rubric) {
     // Since this mean to replace an existing widget the learner
     // WILL earn points for this widget
@@ -24520,7 +24467,7 @@ class AutoCorrect extends React__default["default"].Component {
     return {};
   };
   simpleValidate = rubric => {
-    return AutoCorrect.validate(this.getUserInput(), rubric);
+    return DeprecatedStandin.validate(this.getUserInput(), rubric);
   };
   render() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24529,16 +24476,17 @@ class AutoCorrect extends React__default["default"].Component {
         paddingBottom: 8
       }
     }, /*#__PURE__*/React__default["default"].createElement(Banner__default["default"], {
-      text: i18n__namespace._("This part of the question is no-longer available. You will not be graded on this part."),
-      kind: "warning",
+      text: i18n__namespace._("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__namespace.Component {
@@ -29113,7 +29061,7 @@ class InteractiveGraph extends React__namespace.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.graphie?.polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
+        const offset = polar(side, outerAngle + (onLeft ? 1 : -1) * innerAngles[0]);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
       }
       // @ts-expect-error - TS2339 - Property 'snapTo' does not exist on type 'PerseusGraphType'.
@@ -29137,7 +29085,7 @@ class InteractiveGraph extends React__namespace.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.graphie?.polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
+        const offset = polar(sides[0], outerAngle + (onLeft ? 1 : -1) * innerAngle);
         return this.graphie?.addPoints(coords[rel(-1)], offset);
       }
       // Snap to grid (already done)
@@ -31160,7 +31108,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__namespace.createElement(Renderer, {
       content: answerString,
       inline: true
@@ -31174,6 +31122,11 @@ const styles$h = aphrodite.StyleSheet.create({
   },
   incorrect: {
     backgroundColor: Color__default["default"].offBlack64
+  },
+  pill: {
+    // Reset the Pill's default height in order to account
+    // for multi-line pills.
+    height: "auto"
   }
 });
 
@@ -44105,7 +44058,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
@@ -44123,7 +44076,7 @@ const init = function (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;
@@ -44149,7 +44102,7 @@ const init = function (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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46726,6 +46679,417 @@ 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 = [];
+  wonderStuffCore.keys(widgets).forEach(widgetID => {
+    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?.choices?.length) {
+          for (const choice of options.choices) {
+            if (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?.categories && categorizer.options?.items && categorizer.options?.values) {
+          const categories = categorizer.options?.categories;
+          const items = categorizer.options?.items;
+          const values = categorizer.options?.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?.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?.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?.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?.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?.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?.categories && plotter.options?.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?.correct?.coords) {
+          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.correct?.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?.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?.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?.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?.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?.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?.left && matcher.options?.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;
+  wonderStuffCore.keys(widgets).forEach(widgetID => {
+    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?.choices?.length) {
+          let radioContext = radio.options.choices.map(choice => choice.content).join("\n");
+          if (radio.options?.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?.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.options?.imageAlt) {
+          context = context.replace(`[[☃ ${widgetID}]]`, `[An image with dots that user needs to label. Label choices: [${labelImage.options.choices.join(", ")}]. Image alt text: ${labelImage.options?.imageAlt ?? ""}]`);
+        }
+        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) {
+          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?.passageTitle || passage.options?.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?.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.options?.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.options?.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.options?.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?.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.options?.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.options?.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.options?.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.options?.range.length === 2 && numberLine.options?.tickStep && numberLine.options?.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.options?.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.options?.left && matcher.options?.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
@@ -46783,10 +47147,12 @@ exports.buildMapper = buildMapper;
 exports.components = components;
 exports.constants = constants;
 exports.displaySigFigs = displaySigFigs;
+exports.getAnswersFromWidgets = getAnswersFromWidgets;
 exports.globalConstants = globalConstants;
 exports.globalStyles = globalStyles;
 exports.icons = iconPaths;
 exports.init = init;
+exports.injectWidgets = injectWidgets;
 exports.interactiveSizes = interactiveSizes$1;
 exports.isItemRenderableByVersion = isItemRenderableByVersion;
 exports.itemDataVersion = itemDataVersion;
@@ -46794,6 +47160,7 @@ exports.itemToTree = itemToTree;
 exports.itemVersion = ItemVersion;
 exports.libVersion = libVersion;
 exports.mediaQueries = mediaQueries;
+exports.parsePerseusJSON = parsePerseusJSON;
 exports.plotterPlotTypes = plotterPlotTypes;
 exports.preprocessTex = preprocessTex;
 exports.registerAllWidgetsForTesting = registerAllWidgetsForTesting;