@khanacademy/perseus 18.0.1 → 19.0.0

package/dist/es/index.js

@@ -18,7 +18,7 @@ import $ from 'jquery';
 import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
-import { number, point, vector as vector$1, line, ray } from '@khanacademy/kmath';
+import { number, point, vector as vector$1, line } from '@khanacademy/kmath';
 import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import SimpleMarkdown from '@khanacademy/simple-markdown';
 import { pureMarkdownRules } from '@khanacademy/pure-markdown';
@@ -2748,7 +2748,7 @@ function gridDimensionConfig(absTickStep, extent, dimensionConstraint, gridStep)
  *
  * TODO(somewhatabstract, FEI-3464): Consolidate query string parsing functions.
  */
-function getGridStep$1(range, step, boxSize) {
+function getGridStep(range, step, boxSize) {
   // @ts-expect-error - TS2322 - Type '(number | null | undefined)[]' is not assignable to type 'Coordinates'.
   return _(2).times(function (i) {
     const scale = scaleFromExtent(range[i], boxSize);
@@ -2930,13 +2930,13 @@ function eq$2(x, y) {
  * Deep approximate equality on primitives, numbers, arrays, and objects.
  * Recursive.
  */
-function deepEq$6(x, y) {
+function deepEq$5(x, y) {
   if (Array.isArray(x) && Array.isArray(y)) {
     if (x.length !== y.length) {
       return false;
     }
     for (let i = 0; i < x.length; i++) {
-      if (!deepEq$6(x[i], y[i])) {
+      if (!deepEq$5(x[i], y[i])) {
         return false;
       }
     }
@@ -2954,10 +2954,10 @@ function deepEq$6(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || _.all(x, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$6(y[k], v);
+      return deepEq$5(y[k], v);
     }) && _.all(y, function (v, k) {
       // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
-      return deepEq$6(x[k], v);
+      return deepEq$5(x[k], v);
     });
   }
   if (typeof x === "object" && !!x || typeof y === "object" && !!y) {
@@ -3157,7 +3157,7 @@ const supportsPassiveEvents = () => {
  * Pass this function as the touchstart for an element to
  * avoid sending the touch to the mobile scratchpad
  */
-function captureScratchpadTouchStart$4(e) {
+function captureScratchpadTouchStart$3(e) {
   e.stopPropagation();
 }
 function getImageSize(url, callback) {
@@ -3247,7 +3247,7 @@ const Util = {
   firstNumericalParse: firstNumericalParse$1,
   stringArrayOfSize: stringArrayOfSize$1,
   gridDimensionConfig,
-  getGridStep: getGridStep$1,
+  getGridStep,
   snapStepFromGridStep,
   scaleFromExtent,
   tickStepFromExtent,
@@ -3256,7 +3256,7 @@ const Util = {
   constrainedTickStepsFromTickSteps,
   DeprecationMixin: DeprecationMixin$1,
   eq: eq$2,
-  deepEq: deepEq$6,
+  deepEq: deepEq$5,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -3266,7 +3266,7 @@ const Util = {
   resetTouchHandlers,
   extractPointerLocation,
   supportsPassiveEvents,
-  captureScratchpadTouchStart: captureScratchpadTouchStart$4,
+  captureScratchpadTouchStart: captureScratchpadTouchStart$3,
   getImageSize,
   getImageSizeModern: getImageSizeModern,
   getRealImageUrl: getRealImageUrl,
@@ -13475,7 +13475,7 @@ _.extend(MovableAngle.prototype, {
 
 /* eslint-disable @babel/no-invalid-this */
 const nestedMap$1 = Util.nestedMap;
-const deepEq$5 = Util.deepEq;
+const deepEq$4 = Util.deepEq;
 
 /**
  * A base class for all Graphie Movables
@@ -13572,7 +13572,7 @@ const createSimpleClass = function createSimpleClass(addFunction) {
       this._prevProps = this.props;
     },
     modify: function (graphie) {
-      if (!deepEq$5(this.props, this._prevProps)) {
+      if (!deepEq$4(this.props, this._prevProps)) {
         this.remove();
         this.add(graphie);
         this._prevProps = this.props;
@@ -13617,7 +13617,7 @@ var GraphieClasses = {
  * take appropriate action in onMoveStart, onMove, onMoveEnd
  */
 const normalizeOptions$3 = InteractiveUtil.normalizeOptions;
-const assert$9 = InteractiveUtil.assert;
+const assert$8 = InteractiveUtil.assert;
 
 // state parameters that should be converted into an array of
 // functions
@@ -13688,7 +13688,7 @@ _.extend(Movable.prototype, {
    * Simulates a mouse grab event on the movable object.
    */
   grab: function (coord) {
-    assert$9(point.is(coord));
+    assert$8(point.is(coord));
     const self = this;
     const graphie = self.graphie;
     const state = self.state;
@@ -14154,7 +14154,7 @@ var MovableLineOptions = {
 /**
  * MovableLine
  */
-const assert$8 = InteractiveUtil.assert;
+const assert$7 = InteractiveUtil.assert;
 const normalizeOptions$2 = InteractiveUtil.normalizeOptions;
 const FUNCTION_ARRAY_OPTIONS$2 = ["add", "draw", "remove", "onMoveStart", "constraints", "onMove", "onMoveEnd"];
 
@@ -14180,8 +14180,8 @@ const DEFAULT_STATE$2 = {
   mouseTarget: null
 };
 const MovableLine$4 = function MovableLine(graphie, movable, options) {
-  assert$8(graphie != null);
-  assert$8(options != null);
+  assert$7(graphie != null);
+  assert$7(options != null);
 
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   _.extend(this, {
@@ -14734,7 +14734,7 @@ var MovablePointOptions = {
   }
 };
 
-const assert$7 = InteractiveUtil.assert;
+const assert$6 = InteractiveUtil.assert;
 const normalizeOptions$1 = InteractiveUtil.normalizeOptions;
 const {
   processMath
@@ -14870,7 +14870,7 @@ _.extend(MovablePoint$5.prototype, {
     const self = this;
     const graphie = self.graphie;
     const state = _.extend(self.state, normalizeOptions$1(FUNCTION_ARRAY_OPTIONS$1, options));
-    assert$7(point.is(state.coord));
+    assert$6(point.is(state.coord));
 
     // Default things inside the state.normalStyle object, because
     // _.extend is not deep.
@@ -15072,12 +15072,12 @@ _.extend(MovablePoint$5.prototype, {
     return result !== false;
   },
   setCoord: function (coord) {
-    assert$7(point.is(coord, 2));
+    assert$6(point.is(coord, 2));
     this.state.coord = _.clone(coord);
     this.draw();
   },
   setCoordConstrained: function (coord) {
-    assert$7(point.is(coord, 2));
+    assert$6(point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = _.clone(result);
@@ -15473,7 +15473,7 @@ var MovablePolygonOptions = {
  * Creates and adds a polygon to the graph that can be dragged around.
  * It allows constraints on its movement and draws when moves happen.
  */
-const assert$6 = InteractiveUtil.assert;
+const assert$5 = InteractiveUtil.assert;
 const normalizeOptions = InteractiveUtil.normalizeOptions;
 
 // State parameters that should be converted into an array of
@@ -15512,8 +15512,8 @@ const DEFAULT_STATE = {
   mouseTarget: null
 };
 const MovablePolygon = function MovablePolygon(graphie, movable, options) {
-  assert$6(graphie != null);
-  assert$6(options != null);
+  assert$5(graphie != null);
+  assert$5(options != null);
 
   // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
   _.extend(this, {
@@ -16029,11 +16029,11 @@ var Movables = {
 const GraphieMovable = GraphieClasses.GraphieMovable;
 const createGraphie = GraphUtils.createGraphie;
 const {
-  deepEq: deepEq$4,
+  deepEq: deepEq$3,
   nestedMap
 } = Util;
 const {
-  assert: assert$5
+  assert: assert$4
 } = InteractiveUtil;
 class Graphie extends React.Component {
   constructor(...args) {
@@ -16175,7 +16175,7 @@ class Graphie extends React.Component {
 
         // Instantiate the descriptor to turn it into a real Movable
         const child = new childDescriptor.type(childDescriptor.props);
-        assert$5(child instanceof GraphieMovable, "All children of a Graphie component must be Graphie " + "movables");
+        assert$4(child instanceof GraphieMovable, "All children of a Graphie component must be Graphie " + "movables");
 
         // Give each child a key
         const keyProp = childDescriptor.key;
@@ -16275,7 +16275,7 @@ class Graphie extends React.Component {
     if (this.props.setup !== prevProps.setup) {
       Log.error("<Graphie> was given a new setup function. " + "This is a bad idea; please refactor your code to give " + "the same setup function reference to <Graphie> on " + "every render.", Errors.Internal);
     }
-    if (!deepEq$4(this.props.options, prevProps.options) || !deepEq$4(this.props.box, prevProps.box) || !deepEq$4(this.props.range, prevProps.range)) {
+    if (!deepEq$3(this.props.options, prevProps.options) || !deepEq$3(this.props.box, prevProps.box) || !deepEq$3(this.props.range, prevProps.range)) {
       this._setupGraphie();
     }
     this._updateMovables();
@@ -18369,7 +18369,7 @@ const registerWidgets = widgets => {
  * @param name - the widget that you are trying to replace
  * @param replacementName - the name of the widget that takes its place
  *
- * e.g. replaceWidget("transformer", "always-correct") will make it so the
+ * e.g. replaceWidget("transformer", "deprecated-standin") will make it so the
  * transformer widget is replaced by the always correct widget
  */
 const replaceWidget = (name, replacementName) => {
@@ -18380,9 +18380,6 @@ const replaceWidget = (name, replacementName) => {
     return;
   }
   registerWidget(name, substituteWidget);
-  if (Log) {
-    Log.log(`INFO: Replacing widget ${name} with ${replacementName}`);
-  }
 };
 const registerEditors = editorsToRegister => {
   editorsToRegister.forEach(editor => {
@@ -18409,9 +18406,6 @@ const replaceEditor = (name, replacementName) => {
     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
@@ -20874,7 +20868,7 @@ Tooltip.defaultProps = {
 
 /* eslint-disable react/sort-comp */
 const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$3
+  captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
 class InputWithExamples extends React.Component {
   constructor(...args) {
@@ -20925,7 +20919,7 @@ class InputWithExamples extends React.Component {
       // Add useful props required for MATH and TEXT modes
       _.extend(inputProps, {
         onChange: this.props.onChange,
-        onTouchStart: captureScratchpadTouchStart$3
+        onTouchStart: captureScratchpadTouchStart$2
       });
 
       // And add final props that are MATH- and TEXT-specific
@@ -22966,7 +22960,7 @@ var ChoiceNoneAbove$1 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE_
 })));
 
 const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$2
+  captureScratchpadTouchStart: captureScratchpadTouchStart$1
 } = Util;
 
 // exported for tests
@@ -23218,7 +23212,7 @@ const BaseRadio = function BaseRadio(props) {
       onClick: clickHandler
       // @ts-expect-error - TS2322 - Type '((e: TouchEvent) => void) | null' is not assignable to type 'TouchEventHandler<HTMLLIElement> | undefined'.
       ,
-      onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$2
+      onTouchStart: !labelWrap ? null : captureScratchpadTouchStart$1
     }, /*#__PURE__*/React.createElement(Element, _extends({}, elementProps, {
       ref: ref
     })));
@@ -26720,9 +26714,9 @@ var Iframe$1 = {
 };
 
 /* eslint-disable react/sort-comp */
-const defaultBoxSize$2 = 400;
+const defaultBoxSize$1 = 400;
 const defaultRange = [0, 10];
-const defaultBackgroundImage$3 = {
+const defaultBackgroundImage$2 = {
   url: null,
   width: 0,
   height: 0
@@ -26918,8 +26912,8 @@ ImageWidget.defaultProps = {
   alignment: DEFAULT_ALIGNMENT,
   title: "",
   range: [defaultRange, defaultRange],
-  box: [defaultBoxSize$2, defaultBoxSize$2],
-  backgroundImage: defaultBackgroundImage$3,
+  box: [defaultBoxSize$1, defaultBoxSize$1],
+  backgroundImage: defaultBackgroundImage$2,
   labels: [],
   alt: "",
   caption: "",
@@ -27547,7 +27541,7 @@ var Interactive = {
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null
 };
 
@@ -27840,7 +27834,7 @@ Graph.defaultProps = {
   gridStep: [1, 1],
   snapStep: [0.5, 0.5],
   markings: "graph",
-  backgroundImage: defaultBackgroundImage$2,
+  backgroundImage: defaultBackgroundImage$1,
   showProtractor: false,
   showRuler: false,
   rulerLabel: "",
@@ -27853,7 +27847,7 @@ Graph.defaultProps = {
  */
 const {
   eq: eq$1,
-  deepEq: deepEq$3
+  deepEq: deepEq$2
 } = Util;
 
 // This should really be a readonly tuple of [number, number]
@@ -27966,7 +27960,7 @@ function similar(coords1, coords2, tolerance) {
     angles = rotate(angles, i);
     // @ts-expect-error - TS4104 - The type 'readonly number[]' is 'readonly' and cannot be assigned to the mutable type 'number[]'.
     sides = rotate(sides, i);
-    if (deepEq$3(angles1, angles)) {
+    if (deepEq$2(angles1, angles)) {
       const sidePairs = _.zip(sides1, sides);
       const factors = _.map(sidePairs, function (pair) {
         return pair[0] / pair[1];
@@ -28058,11 +28052,11 @@ const {
   DeprecationMixin
 } = Util;
 const TRASH_ICON_URI = "https://ka-perseus-graphie.s3.amazonaws.com/b1452c0d79fd0f7ff4c3af9488474a0a0decb361.png";
-const defaultBackgroundImage$1 = {
+const defaultBackgroundImage = {
   url: null
 };
 const eq = Util.eq;
-const deepEq$2 = Util.deepEq;
+const deepEq$1 = Util.deepEq;
 const UNLIMITED = "unlimited";
 
 // Sample background image:
@@ -29731,7 +29725,7 @@ class InteractiveGraph extends React.Component {
         const correctCoeffs = this.getQuadraticCoefficients(
         // @ts-expect-error - TS2345 - Argument of type 'readonly Coord[] | undefined' is not assignable to parameter of type 'readonly Coord[]'.
         rubric.correct.coords);
-        if (deepEq$2(guessCoeffs, correctCoeffs)) {
+        if (deepEq$1(guessCoeffs, correctCoeffs)) {
           return {
             type: "points",
             earned: 1,
@@ -29747,7 +29741,7 @@ class InteractiveGraph extends React.Component {
         const canonicalGuessCoeffs = canonicalSineCoefficients(guessCoeffs);
         const canonicalCorrectCoeffs = canonicalSineCoefficients(correctCoeffs);
         // If the canonical coefficients match, it's correct.
-        if (deepEq$2(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
+        if (deepEq$1(canonicalGuessCoeffs, canonicalCorrectCoeffs)) {
           return {
             type: "points",
             earned: 1,
@@ -29756,7 +29750,7 @@ class InteractiveGraph extends React.Component {
           };
         }
       } else if (state.type === "circle" && rubric.correct.type === "circle") {
-        if (deepEq$2(state.center, rubric.correct.center) && eq(state.radius, rubric.correct.radius)) {
+        if (deepEq$1(state.center, rubric.correct.center) && eq(state.radius, rubric.correct.radius)) {
           return {
             type: "points",
             earned: 1,
@@ -29776,7 +29770,7 @@ class InteractiveGraph extends React.Component {
         guess == null || guess.sort();
         // @ts-expect-error - TS2339 - Property 'sort' does not exist on type 'readonly Coord[]'.
         correct.sort();
-        if (deepEq$2(guess, correct)) {
+        if (deepEq$1(guess, correct)) {
           return {
             type: "points",
             earned: 1,
@@ -29800,7 +29794,7 @@ class InteractiveGraph extends React.Component {
           /* exact */
           guess.sort();
           correct.sort();
-          match = deepEq$2(guess, correct);
+          match = deepEq$1(guess, correct);
         }
         if (match) {
           return {
@@ -29817,7 +29811,7 @@ class InteractiveGraph extends React.Component {
         guess = _.invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
         correct = _.invoke(correct, "sort").sort();
-        if (deepEq$2(guess, correct)) {
+        if (deepEq$1(guess, correct)) {
           return {
             type: "points",
             earned: 1,
@@ -29830,7 +29824,7 @@ class InteractiveGraph extends React.Component {
         const correct = rubric.correct.coords;
         if (
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
-        deepEq$2(guess[0], correct[0]) &&
+        deepEq$1(guess[0], correct[0]) &&
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
         collinear(correct[0], correct[1], guess[1])) {
           return {
@@ -29861,7 +29855,7 @@ class InteractiveGraph extends React.Component {
           /* exact */
           match =
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
-          deepEq$2(guess[1], correct[1]) &&
+          deepEq$1(guess[1], correct[1]) &&
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
           collinear(correct[1], correct[0], guess[0]) &&
           // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
@@ -29902,7 +29896,7 @@ InteractiveGraph.defaultProps = {
   labels: ["x", "y"],
   range: [[-10, 10], [-10, 10]],
   step: [1, 1],
-  backgroundImage: defaultBackgroundImage$1,
+  backgroundImage: defaultBackgroundImage,
   markings: "graph",
   showTooltips: false,
   showProtractor: false,
@@ -33024,7 +33018,7 @@ var Matcher$1 = {
 const _excluded$1 = ["onFormatChange", "checkValidity", "useArrowKeys"];
 const {
   firstNumericalParse,
-  captureScratchpadTouchStart: captureScratchpadTouchStart$1
+  captureScratchpadTouchStart
 } = Util;
 const toNumericString = KhanMath.toNumericString;
 const getNumericFormat = KhanMath.getNumericFormat;
@@ -33182,7 +33176,7 @@ class NumberInput extends React.Component {
       onKeyDown: this._onKeyDown
       // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLInputElement>'.
       ,
-      onTouchStart: captureScratchpadTouchStart$1,
+      onTouchStart: captureScratchpadTouchStart,
       defaultValue: toNumericString(this.props.value, this.state.format),
       value: undefined
     }));
@@ -33215,7 +33209,7 @@ NumberInput.defaultProps = {
 // Type imports
 
 const {
-  assert: assert$4
+  assert: assert$3
 } = InteractiveUtil;
 const {
   stringArrayOfSize
@@ -33249,12 +33243,12 @@ const getDefaultPath$1 = function getDefaultPath() {
 };
 const getRowFromPath$1 = function getRowFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$4(_.isArray(path) && path.length === 2);
+  assert$3(_.isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath$1 = function getColumnFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$4(_.isArray(path) && path.length === 2);
+  assert$3(_.isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath$1 = function getRefForPath(path) {
@@ -34757,7 +34751,7 @@ const MovablePoint$1 = Graphie.MovablePoint;
 // @ts-expect-error - TS2339 - Property 'Line' does not exist on type 'typeof Graphie'.
 const Line$1 = Graphie.Line;
 const {
-  assert: assert$3
+  assert: assert$2
 } = InteractiveUtil;
 const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
 const EN_DASH = "\u2013";
@@ -35015,7 +35009,7 @@ class NumberLine extends React.Component {
       const snapX = props.tickStep / props.snapDivisions;
       let x = bound(numLinePosition, left, right);
       x = left + number.roundTo(x - left, snapX);
-      assert$3(_.isFinite(x));
+      assert$2(_.isFinite(x));
       return x;
     };
     // This function is intended to be used by the client code
@@ -38136,7 +38130,7 @@ var PassageRefTarget$1 = {
 
 /* eslint-disable react/no-unsafe */
 const {
-  deepEq: deepEq$1
+  deepEq
 } = Util;
 class Plotter extends React.Component {
   constructor(..._args) {
@@ -38931,7 +38925,7 @@ Plotter.defaultProps = {
 };
 _.extend(Plotter, {
   validate: function (guess, rubric) {
-    if (deepEq$1(guess, rubric.starting)) {
+    if (deepEq(guess, rubric.starting)) {
       return {
         type: "invalid",
         message: null
@@ -38939,7 +38933,7 @@ _.extend(Plotter, {
     }
     return {
       type: "points",
-      earned: deepEq$1(guess, rubric.correct) ? 1 : 0,
+      earned: deepEq(guess, rubric.correct) ? 1 : 0,
       total: 1,
       message: null
     };
@@ -39307,7 +39301,7 @@ class InfoTip extends React.Component {
 }
 
 const {
-  assert: assert$2
+  assert: assert$1
 } = InteractiveUtil;
 // @ts-expect-error - TS2339 - Property 'Path' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Arc' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Circle' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Label' does not exist on type 'typeof Graphie'. | TS2339 - Property 'Line' does not exist on type 'typeof Graphie'. | TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'. | TS2339 - Property 'MovableLine' does not exist on type 'typeof Graphie'.
 const {
@@ -39319,7 +39313,7 @@ const {
   MovablePoint,
   MovableLine
 } = Graphie;
-const defaultBoxSize$1 = 400;
+const defaultBoxSize = 400;
 const maxSampleSize = 1000;
 class Histogram extends React.Component {
   constructor(...args) {
@@ -39601,7 +39595,7 @@ Histogram.defaultProps = {
   data: null,
   xAxisLabel: "Proportion (%)",
   yAxisLabel: "Number of times seen",
-  box: [defaultBoxSize$1, defaultBoxSize$1]
+  box: [defaultBoxSize, defaultBoxSize]
 };
 class Simulator extends React.Component {
   constructor(..._args) {
@@ -39699,7 +39693,7 @@ class Simulator extends React.Component {
       return true;
     };
     this.focusInputPath = path => {
-      assert$2(path.length > 0);
+      assert$1(path.length > 0);
       const inputID = _.head(path);
       // eslint-disable-next-line react/no-string-refs
       const inputComponent = this.refs[inputID];
@@ -39707,7 +39701,7 @@ class Simulator extends React.Component {
       inputComponent.focus();
     };
     this.blurInputPath = path => {
-      assert$2(path.length > 0);
+      assert$1(path.length > 0);
       const inputID = _.head(path);
       // eslint-disable-next-line react/no-string-refs
       const inputComponent = this.refs[inputID];
@@ -39715,17 +39709,17 @@ class Simulator extends React.Component {
       inputComponent.blur();
     };
     this.getDOMNodeForPath = path => {
-      assert$2(path.length > 0);
+      assert$1(path.length > 0);
       const inputID = _.head(path);
       // eslint-disable-next-line react/no-string-refs
       return ReactDOM__default.findDOMNode(this.refs[inputID]);
     };
     this.getGrammarTypeForPath = path => {
-      assert$2(path.length > 0);
+      assert$1(path.length > 0);
       return "number";
     };
     this.setInputValue = (path, newValue, cb) => {
-      assert$2(path.length > 0);
+      assert$1(path.length > 0);
       const inputID = _.head(path);
       const capitalizedID = inputID.charAt(0).toUpperCase() + inputID.slice(1);
       const functionName = "handle" + capitalizedID + "Change";
@@ -40016,7 +40010,7 @@ var Sorter$1 = {
 };
 
 const {
-  assert: assert$1
+  assert
 } = InteractiveUtil;
 
 /* Input handling: Maps a (row, column) pair to a unique ref used by React,
@@ -40030,12 +40024,12 @@ const getDefaultPath = function getDefaultPath() {
 };
 const getRowFromPath = function getRowFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$1(_.isArray(path) && path.length === 2);
+  assert(_.isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath = function getColumnFromPath(path) {
   // 'path' should be a (row, column) pair
-  assert$1(_.isArray(path) && path.length === 2);
+  assert(_.isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath = function getRefForPath(path) {
@@ -40312,2414 +40306,6 @@ var Table$1 = {
   isLintable: true
 };
 
-const {
-  deepEq,
-  getGridStep,
-  captureScratchpadTouchStart
-} = Util;
-const {
-  assert
-} = InteractiveUtil;
-const ROTATE_SNAP_DEGREES = 15;
-const DEGREE_SIGN = "\u00B0";
-const RENDER_TRANSFORM_DELAY_IN_MS = 300;
-const ROTATE_HANDLE_DIST = 1.5;
-const REFLECT_ROTATE_HANDLE_DIST = 2;
-const REFLECT_BUTTON_SIZE = 1;
-const defaultBoxSize = 400;
-const defaultBackgroundImage = {
-  url: null
-};
-
-/* Does a pluck on keys inside objects in an object
- *
- * Ex:
- * tools = {
- *     translation: {
- *         enabled: true
- *     },
- *     rotation: {
- *         enabled: false
- *     }
- * };
- * pluckObject(tools, "enabled") returns {
- *     translation: true
- *     rotation: false
- * }
- */
-function pluckObject(object, subKey) {
-  return _.object(_.map(object, function (value, key) {
-    return [key, value[subKey]];
-  }));
-}
-const defaultGraphProps = function defaultGraphProps(setProps, boxSize) {
-  setProps = setProps || {};
-  const labels = setProps.labels || ["x", "y"];
-  const range = setProps.range || [[-10, 10], [-10, 10]];
-  const step = setProps.step || [1, 1];
-  const gridStep = setProps.gridStep || getGridStep(range, step, boxSize);
-  return {
-    box: [boxSize, boxSize],
-    labels: labels,
-    range: range,
-    step: step,
-    gridStep: gridStep,
-    valid: true,
-    backgroundImage: defaultBackgroundImage,
-    markings: "grid",
-    showProtractor: false
-  };
-};
-const defaultTransformerProps = {
-  apiOptions: ApiOptions.defaults,
-  gradeEmpty: false,
-  graphMode: "interactive",
-  listMode: "dynamic",
-  graph: {},
-  tools: {
-    translation: {
-      enabled: true,
-      required: false,
-      constraints: {}
-    },
-    rotation: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coord: [1, 6]
-    },
-    reflection: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coords: [[2, -4], [2, 2]]
-    },
-    dilation: {
-      enabled: true,
-      required: false,
-      constraints: {
-        fixed: false
-      },
-      coord: [6, 6]
-    }
-  },
-  drawSolutionShape: true,
-  starting: {
-    shape: {
-      type: "polygon-3",
-      coords: [[2, 2], [2, 6], [7, 2]]
-    },
-    transformations: []
-  },
-  correct: {
-    shape: {
-      type: "polygon-3",
-      coords: [[2, 2], [2, 6], [7, 2]]
-    },
-    transformations: []
-  }
-};
-function colorForTool(tool) {
-  return tool.constraints.fixed ? KhanColors.DYNAMIC : KhanColors.INTERACTIVE;
-}
-
-/* Scales a distance from the default range of
- * [-10, 10] to a given props.range pair
- *
- * Used for sizing various transformation tools
- * (rotation handle, dilation circle)
- */
-function scaleToRange(dist, range) {
-  const spreadX = range[0][1] - range[0][0];
-  const spreadY = range[1][1] - range[1][0];
-  return dist * Math.max(spreadX, spreadY) / 20;
-}
-function dilatePointFromCenter(point, dilationCenter, scale) {
-  const pv = vector$1.subtract(point, dilationCenter);
-  const pvScaled = vector$1.scale(pv, scale);
-  const transformedPoint = vector$1.add(dilationCenter, pvScaled);
-  return transformedPoint;
-}
-
-// TODO(jack): i18nize this
-function stringFromDecimal(number) {
-  return String(KhanMath.roundTo(9, number));
-}
-function stringFromFraction(number$1) {
-  const frac = KhanMath.toFraction(number$1, number.DEFAULT_TOLERANCE);
-  if (frac[1] === 1) {
-    return stringFromDecimal(number$1);
-  }
-  return stringFromDecimal(frac[0]) + "/" + stringFromDecimal(frac[1]);
-}
-function texFromPoint(point) {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "("
-  }, "("), stringFromDecimal(point[0]), /*#__PURE__*/React.createElement(TeX, {
-    key: ","
-  }, ", {}"), stringFromDecimal(point[1]), /*#__PURE__*/React.createElement(TeX, {
-    key: ")"
-  }, ")")];
-}
-function texFromVector(vector) {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React.createElement(TeX, {
-    key: "<"
-  }, i18n.doNotTranslate("\\langle")), stringFromDecimal(vector[0]), /*#__PURE__*/React.createElement(TeX, {
-    key: ","
-  }, ", {}"), stringFromDecimal(vector[1]), /*#__PURE__*/React.createElement(TeX, {
-    key: ">"
-  }, i18n.doNotTranslate("\\rangle"))];
-}
-function texFromAngleDeg(angleDeg) {
-  return stringFromDecimal(angleDeg) + DEGREE_SIGN;
-}
-function orderInsensitiveCoordsEqual(coords1, coords2) {
-  coords1 = _.clone(coords1).sort(point.compare);
-  coords2 = _.clone(coords2).sort(point.compare);
-  return _.all(_.map(coords1, function (coord1, i) {
-    const coord2 = coords2[i];
-    return point.equal(coord1, coord2);
-  }));
-}
-const inputComponentForApiOptions = apiOptions => {
-  if (apiOptions.customKeypad) {
-    return SimpleKeypadInput;
-  }
-  return NumberInput;
-};
-
-/* Perform operations on raw transform objects */
-const TransformOps = {
-  apply: function (transform) {
-    // Any transformation with empty text boxes is a no-op until
-    // filled out (these show up as nulls in transform.vector/line/etc).
-    // TODO (jack): Merge this just into reflections now that other
-    // transforms are always valid (after merging transformation
-    // collapsing, which may use isValid)
-    // @ts-expect-error - TS2345 - Argument of type 'PerseusTransformerTransformation' is not assignable to parameter of type 'never'.
-    if (!Transformations[transform.type].isValid(transform)) {
-      return _.identity; // do not transform the coord
-    }
-    // @ts-expect-error - TS2345 - Argument of type 'PerseusTransformerTransformation' is not assignable to parameter of type 'never'.
-    return Transformations[transform.type].apply(transform);
-  },
-  append: function (transformList, newTransform) {
-    // Append newTransform to transformList, and collapse the last
-    // two transforms if they are collapsable
-    const results = TransformOps._appendAndCollapseLastTwo(transformList, newTransform);
-    // Collapse any no-ops at the end of the transformation list
-    return TransformOps._collapseFinalNoOps(results);
-  },
-  _collapseFinalNoOps: function (transforms) {
-    // Collapse no-op transformations at the end of the list
-    if (transforms.length && TransformOps.isNoOp(_.last(transforms))) {
-      return _.initial(transforms);
-    }
-    return transforms;
-  },
-  _appendAndCollapseLastTwo: function (transformList, newTransform) {
-    if (!transformList.length) {
-      return [newTransform];
-    }
-    const collapsed = TransformOps.collapse(_.last(transformList), newTransform);
-    return _.initial(transformList).concat(collapsed);
-  },
-  isNoOp: function (transform) {
-    return Transformations[transform.type].isNoOp(transform);
-  },
-  collapse: function (transform1, transform2) {
-    // We can only collapse transforms that have the same type
-    if (transform1.type !== transform2.type) {
-      return [transform1, transform2];
-    }
-
-    // Clicking the button again removes empty transformations
-    if (TransformOps.isEmpty(transform1) && TransformOps.isEmpty(transform2)) {
-      return [];
-    }
-
-    // Don't collapse invalid transformations otherwise
-    if (!TransformOps.isValid(transform1) || !TransformOps.isValid(transform2)) {
-      return [transform1, transform2];
-    }
-    return TransformOps._collapseValidMonotypedTransforms(transform1, transform2);
-  },
-  isValid: function (transform) {
-    // @ts-expect-error - TS2345 - Argument of type 'PerseusTransformerTransformation' is not assignable to parameter of type 'never'.
-    return Transformations[transform.type].isValid(transform);
-  },
-  isEmpty: function (transform) {
-    // @ts-expect-error - TS2345 - Argument of type 'PerseusTransformerTransformation' is not assignable to parameter of type 'never'.
-    return Transformations[transform.type].isEmpty(transform);
-  },
-  _collapseValidMonotypedTransforms: function (transform1, transform2) {
-    let collapsed = Transformations[transform1.type].collapse(transform1, transform2);
-    if (collapsed) {
-      // Force all answers into an array
-      if (!_.isArray(collapsed)) {
-        collapsed = [collapsed];
-      }
-      // Add types to all transforms in the answer
-      _.each(collapsed, function (transform) {
-        transform.type = transform1.type;
-      });
-      return collapsed;
-    }
-    // These transforms can't be collapsed together
-    return [transform1, transform2];
-  },
-  toTeX: function (transform) {
-    return Transformations[transform.type].toTeX(transform);
-  },
-  /* A react representation of this transform object */
-  ListItem: createReactClass({
-    displayName: "ListItem",
-    render: function () {
-      if (this.props.mode === "dynamic") {
-        return /*#__PURE__*/React.createElement("div", null, TransformOps.toTeX(this.props.transform));
-      }
-      if (this.props.mode === "interactive") {
-        const TransformClass = Transformations[this.props.transform.type].Input;
-        return /*#__PURE__*/React.createElement(TransformClass
-        // eslint-disable-next-line react/no-string-refs
-        , _extends({
-          ref: "transform",
-          onChange: this.handleChange,
-          onFocus: this.props.onFocus,
-          onBlur: this.props.onBlur,
-          keypadElement: this.props.keypadElement,
-          apiOptions: this.props.apiOptions
-        }, this.props.transform));
-      }
-      throw new PerseusError("Invalid mode: " + this.props.mode, Errors.InvalidInput);
-    },
-    value: function () {
-      if (this.props.mode === "interactive") {
-        return _.extend({
-          type: this.props.transform.type
-        },
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.transform.value());
-      }
-      return this.props.transform;
-    },
-    handleChange: _.debounce(function (callback) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      this.props.onChange(this.value(), callback);
-    }, RENDER_TRANSFORM_DELAY_IN_MS),
-    /* InputPath API: depending on the API call, this could involve simply
-     * navigating to the right ref and calling the function on that
-     * component, or threading the call down and returning the result. */
-    _getComponentAtPath: function (path) {
-      // eslint-disable-next-line react/no-string-refs
-      const transform = this.refs.transform;
-      const ref = _.head(path);
-      return transform.refs[ref];
-    },
-    focus: function () {
-      // eslint-disable-next-line react/no-string-refs
-      const transform = this.refs.transform;
-      const path = _.head(transform.getInputPaths());
-      if (path) {
-        this.focusInputPath(path);
-      }
-    },
-    focusInputPath: function (path) {
-      this._getComponentAtPath(path).focus();
-    },
-    blurInputPath: function (path) {
-      this._getComponentAtPath(path).blur();
-    },
-    getDOMNodeForPath: function (path) {
-      return ReactDOM__default.findDOMNode(this._getComponentAtPath(path));
-    },
-    getGrammarTypeForPath: function (path) {
-      return "number";
-    },
-    setInputValue: function (path, value, cb) {
-      // `value` comes in as a string on mobile, but we need a number
-      // We let through the empty string so that "Clear" works -- in
-      // that case, the transformer widget will just act as if there is
-      // no input, which is what we want.
-      // @ts-expect-error - TS2339 - Property 'length' does not exist on type 'string | number'.
-      if (value.length) {
-        // @ts-expect-error - TS2345 - Argument of type 'string | number' is not assignable to parameter of type 'string'.
-        value = parseFloat(value);
-        if (isNaN(value)) {
-          return;
-        }
-      }
-      // eslint-disable-next-line react/no-string-refs
-      this.refs.transform.setInputValue(path, value, cb);
-    },
-    getInputPaths: function () {
-      // If we're in dynamic mode, then the list items are made up of
-      // static text.
-      if (this.props.mode === "dynamic") {
-        return [];
-      }
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs.transform.getInputPaths();
-    }
-  })
-};
-const Transformations = {
-  translation: {
-    // I18N: As in the command, "Translate the polygon"
-    verbName: i18n._("Translate"),
-    nounName: i18n._("Translation"),
-    lowerNounName: i18n._("translation"),
-    apply: function (transform) {
-      return function (coord) {
-        return vector$1.add(coord, transform.vector);
-      };
-    },
-    isValid: function (transform) {
-      return _.isFinite(transform.vector[0]) && _.isFinite(transform.vector[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.vector[0] === null && transform.vector[1] === null;
-    },
-    isNoOp: function (transform) {
-      return vector$1.equal(transform.vector, [0, 0]);
-    },
-    collapse: function (transform1, transform2) {
-      return {
-        vector: vector$1.add(transform1.vector, transform2.vector)
-      };
-    },
-    toTeX: function (transform) {
-      // I18N: As in the command, "Translation by <3, 1>"
-      return i18n.$_("Translation by %(vector)s", {
-        vector: texFromVector(transform.vector)
-      });
-    },
-    Input: class Input extends React.Component {
-      constructor(...args) {
-        super(...args);
-        this.state = {
-          vector: this.props.vector || [null, null]
-        };
-        this.value = () => {
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const x = this.refs.x.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const y = this.refs.y.getValue();
-          return {
-            vector: [x, y]
-          };
-        };
-        /* InputPath API */
-        this.setInputValue = (path, value, cb) => {
-          const id = _.first(path);
-          const vector = _.clone(this.state.vector);
-          if (id === "x") {
-            vector[0] = value;
-          } else if (id === "y") {
-            vector[1] = value;
-          }
-          this.setState({
-            vector: vector
-          }, () => {
-            this.props.onChange(cb);
-          });
-        };
-        this.getInputPaths = () => {
-          return [["x"], ["y"]];
-        };
-      }
-      componentDidUpdate(prevProps) {
-        if (!deepEq(this.props, prevProps)) {
-          this.setState({
-            vector: this.props.vector
-          });
-        }
-      }
-      render() {
-        const InputComponent = inputComponentForApiOptions(this.props.apiOptions);
-        const {
-          TeX
-        } = getDependencies();
-        const vector = [/*#__PURE__*/React.createElement(TeX, {
-          key: "<"
-        }, i18n.doNotTranslate("\\langle")), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "vec_x"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "x",
-          placeholder: 0,
-          value: this.state.vector[0],
-          useArrowKeys: true,
-          onChange: val0 => {
-            const val1 = this.state.vector[1];
-            this.setState({
-              vector: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "x"),
-          onBlur: _.partial(this.props.onBlur, "x"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "vec_y"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "y",
-          placeholder: 0,
-          value: this.state.vector[1],
-          useArrowKeys: true,
-          onChange: val1 => {
-            const val0 = this.state.vector[0];
-            this.setState({
-              vector: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "y"),
-          onBlur: _.partial(this.props.onBlur, "y"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ">"
-        }, i18n.doNotTranslate("\\rangle"))];
-        return /*#__PURE__*/React.createElement("div", null, i18n.$_("Translation by %(vector)s", {
-          vector: vector
-        }));
-      }
-    }
-  },
-  rotation: {
-    // I18N: As in the command, "Rotate the polygon"
-    verbName: i18n._("Rotate"),
-    nounName: i18n._("Rotation"),
-    lowerNounName: i18n._("rotation"),
-    apply: function (transform) {
-      return function (coord) {
-        return point.rotateDeg(coord, transform.angleDeg, transform.center);
-      };
-    },
-    isValid: function (transform) {
-      return _.isFinite(transform.angleDeg) && _.isFinite(transform.center[0]) && _.isFinite(transform.center[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.angleDeg === null && transform.center[0] === null && transform.center[1] === null;
-    },
-    isNoOp: function (transform) {
-      return number.equal(transform.angleDeg, 0);
-    },
-    collapse: function (transform1, transform2) {
-      if (!point.equal(transform1.center, transform2.center)) {
-        return false;
-      }
-      return {
-        center: transform1.center,
-        angleDeg: transform1.angleDeg + transform2.angleDeg
-      };
-    },
-    toTeX: function (transform) {
-      return i18n.$_("Rotation by %(degrees)s about %(point)s", {
-        degrees: texFromAngleDeg(transform.angleDeg),
-        point: texFromPoint(transform.center)
-      });
-    },
-    Input: class Input extends React.Component {
-      constructor(...args) {
-        super(...args);
-        this.state = {
-          center: this.props.center || [null, null],
-          angleDeg: this.props.angleDeg || null
-        };
-        this.value = () => {
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const angleDeg = this.refs.angleDeg.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const centerX = this.refs.centerX.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const centerY = this.refs.centerY.getValue();
-          return {
-            angleDeg: angleDeg,
-            center: [centerX, centerY]
-          };
-        };
-        /* InputPath API */
-        this.setInputValue = (path, value, cb) => {
-          const id = _.first(path);
-          let angleDeg = _.clone(this.state.angleDeg);
-          const center = _.clone(this.state.center);
-          if (id === "angleDeg") {
-            angleDeg = value;
-          } else if (id === "centerX") {
-            center[0] = value;
-          } else if (id === "centerY") {
-            center[1] = value;
-          }
-          this.setState({
-            angleDeg: angleDeg,
-            center: center
-          }, () => {
-            this.props.onChange(cb);
-          });
-        };
-        this.getInputPaths = () => {
-          return [["centerX"], ["centerY"], ["angleDeg"]];
-        };
-      }
-      componentDidUpdate(prevProps) {
-        if (!deepEq(this.props, prevProps)) {
-          this.setState({
-            center: this.props.center,
-            angleDeg: this.props.angleDeg
-          });
-        }
-      }
-      render() {
-        const InputComponent = inputComponentForApiOptions(this.props.apiOptions);
-        const {
-          TeX
-        } = getDependencies();
-        const point = [/*#__PURE__*/React.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "X"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "centerX",
-          placeholder: 0,
-          value: this.state.center[0],
-          useArrowKeys: true,
-          onChange: val0 => {
-            const val1 = this.state.center[1];
-            this.setState({
-              center: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "centerX"),
-          onBlur: _.partial(this.props.onBlur, "centerX"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "Y"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "centerY",
-          placeholder: 0,
-          value: this.state.center[1],
-          useArrowKeys: true,
-          onChange: val1 => {
-            const val0 = this.state.center[0];
-            this.setState({
-              center: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "centerY"),
-          onBlur: _.partial(this.props.onBlur, "centerY"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const degrees = [/*#__PURE__*/React.createElement(InputComponent, {
-          key: "deg"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "angleDeg",
-          placeholder: 0,
-          value: this.state.angleDeg,
-          useArrowKeys: true,
-          onChange: val => {
-            this.setState({
-              angleDeg: val
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "angleDeg"),
-          onBlur: _.partial(this.props.onBlur, "angleDeg"),
-          keypadElement: this.props.keypadElement
-        }), DEGREE_SIGN];
-        // I18N: %(point)s must come before %(degrees)s in this phrase
-        const text = i18n.$_("Rotation about %(point)s by %(degrees)s", {
-          point,
-          degrees
-        });
-        return /*#__PURE__*/React.createElement("div", null, text);
-      }
-    }
-  },
-  reflection: {
-    // I18N: As in the command, "Reflect the polygon"
-    verbName: i18n._("Reflect"),
-    nounName: i18n._("Reflection"),
-    lowerNounName: i18n._("reflection"),
-    apply: function (transform) {
-      return function (coord) {
-        return point.reflectOverLine(coord, transform.line);
-      };
-    },
-    isValid: function (transform) {
-      // A bit hacky, but we'll also define reflecting over a
-      // single point as a no-op, to avoid NaN fun.
-      return _.all(_.flatten(transform.line), _.isFinite) && !point.equal(transform.line[0], transform.line[1]);
-    },
-    isEmpty: function (transform) {
-      return _.all(_.flatten(transform.line), _.isNull);
-    },
-    isNoOp: function (transform) {
-      // Invalid transforms are implicitly no-ops, so we don't
-      // have to catch that case here.
-      return false;
-    },
-    collapse: function (transform1, transform2) {
-      if (!line.equal(transform1.line, transform2.line)) {
-        return false;
-      }
-      return [];
-    },
-    toTeX: function (transform) {
-      const point1 = transform.line[0];
-      const point2 = transform.line[1];
-      return i18n.$_("Reflection over the line from %(point1)s to %(point2)s", {
-        point1: texFromPoint(point1),
-        point2: texFromPoint(point2)
-      });
-    },
-    Input: class Input extends React.Component {
-      constructor(...args) {
-        super(...args);
-        this.state = {
-          line: this.props.line || [[null, null], [null, null]]
-        };
-        this.changePoint = (i, j, val, cb) => {
-          const line = _.map(this.state.line, _.clone);
-          // @ts-expect-error - TS2538 - Type 'undefined' cannot be used as an index type.
-          line[i][j] = val;
-          this.setState({
-            line: line
-          }, () => {
-            this.props.onChange(cb);
-          });
-        };
-        this.value = () => {
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const x1 = this.refs.x1.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const y1 = this.refs.y1.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const x2 = this.refs.x2.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const y2 = this.refs.y2.getValue();
-          return {
-            line: [[x1, y1], [x2, y2]]
-          };
-        };
-        /* InputPath API */
-        this.setInputValue = (path, value, cb) => {
-          const id = _.first(path);
-          let j;
-          if (id[0] === "x") {
-            j = 0;
-          } else if (id[0] === "y") {
-            j = 1;
-          }
-          let i;
-          if (id[1] === "1") {
-            i = 0;
-          } else if (id[1] === "2") {
-            i = 1;
-          }
-          this.changePoint(i, j, value, cb);
-        };
-        this.getInputPaths = () => {
-          return [["x1"], ["y1"], ["x2"], ["y2"]];
-        };
-      }
-      componentDidUpdate(prevProps) {
-        if (!deepEq(this.props, prevProps)) {
-          this.setState({
-            line: this.props.line
-          });
-        }
-      }
-      render() {
-        const InputComponent = inputComponentForApiOptions(this.props.apiOptions);
-        const {
-          TeX
-        } = getDependencies();
-        const point1 = [/*#__PURE__*/React.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "x1"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "x1",
-          value: this.state.line[0][0],
-          useArrowKeys: true
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onChange: this.changePoint.bind(this, 0, 0),
-          onFocus: _.partial(this.props.onFocus, "x1"),
-          onBlur: _.partial(this.props.onBlur, "x1"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "y1"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "y1",
-          value: this.state.line[0][1],
-          useArrowKeys: true
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onChange: this.changePoint.bind(this, 0, 1),
-          onFocus: _.partial(this.props.onFocus, "y1"),
-          onBlur: _.partial(this.props.onBlur, "y1"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const point2 = [/*#__PURE__*/React.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "x2"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "x2",
-          value: this.state.line[1][0],
-          useArrowKeys: true
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onChange: this.changePoint.bind(this, 1, 0),
-          onFocus: _.partial(this.props.onFocus, "x2"),
-          onBlur: _.partial(this.props.onBlur, "x2"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "y2"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "y2",
-          value: this.state.line[1][1],
-          useArrowKeys: true
-          // eslint-disable-next-line react/jsx-no-bind
-          ,
-          onChange: this.changePoint.bind(this, 1, 1),
-          onFocus: _.partial(this.props.onFocus, "y2"),
-          onBlur: _.partial(this.props.onBlur, "y2"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        return /*#__PURE__*/React.createElement("div", null, i18n.$_("Reflection over the line from " + "%(point1)s to %(point2)s", {
-          point1,
-          point2
-        }));
-      }
-    }
-  },
-  dilation: {
-    // I18N: As in the command, "Dilate the polygon"
-    verbName: i18n._("Dilate"),
-    nounName: i18n._("Dilation"),
-    lowerNounName: i18n._("dilation"),
-    apply: function (transform) {
-      return function (coord) {
-        return dilatePointFromCenter(coord, transform.center, transform.scale);
-      };
-    },
-    isValid: function (transform) {
-      return _.isFinite(transform.scale) && _.isFinite(transform.center[0]) && _.isFinite(transform.center[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.scale === null && transform.center[0] === null && transform.center[1] === null;
-    },
-    isNoOp: function (transform) {
-      return number.equal(transform.scale, 1);
-    },
-    collapse: function (transform1, transform2) {
-      if (!point.equal(transform1.center, transform2.center)) {
-        return false;
-      }
-      return {
-        center: transform1.center,
-        scale: transform1.scale * transform2.scale
-      };
-    },
-    toTeX: function (transform) {
-      const scaleString = stringFromFraction(transform.scale);
-      return i18n.$_("Dilation of scale %(scale)s about %(point)s", {
-        scale: scaleString,
-        point: texFromPoint(transform.center)
-      });
-    },
-    Input: class Input extends React.Component {
-      constructor(...args) {
-        super(...args);
-        this.state = {
-          center: this.props.center || [null, null],
-          scale: this.props.scale || null
-        };
-        this.value = () => {
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const scale = this.refs.scale.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const x = this.refs.x.getValue();
-          // eslint-disable-next-line react/no-string-refs
-          // @ts-expect-error - TS2339 - Property 'getValue' does not exist on type 'ReactInstance'.
-          const y = this.refs.y.getValue();
-          return {
-            scale: scale,
-            center: [x, y]
-          };
-        };
-        /* InputPath API */
-        this.setInputValue = (path, value, cb) => {
-          const id = _.first(path);
-          let scale = this.state.scale;
-          const center = _.clone(this.state.center);
-          if (id === "x") {
-            center[0] = value;
-          } else if (id === "y") {
-            center[1] = value;
-          } else if (id === "scale") {
-            scale = value;
-          }
-          this.setState({
-            scale: scale,
-            center: center
-          }, () => {
-            this.props.onChange(cb);
-          });
-        };
-        this.getInputPaths = () => {
-          return [["x"], ["y"], ["scale"]];
-        };
-      }
-      componentDidUpdate(prevProps) {
-        if (!deepEq(this.props, prevProps)) {
-          this.setState({
-            center: this.props.center,
-            scale: this.props.scale
-          });
-        }
-      }
-      render() {
-        const InputComponent = inputComponentForApiOptions(this.props.apiOptions);
-        const {
-          TeX
-        } = getDependencies();
-        const point = [/*#__PURE__*/React.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "point_x"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "x",
-          placeholder: 0,
-          value: this.state.center[0],
-          useArrowKeys: true,
-          onChange: val0 => {
-            const val1 = this.state.center[1];
-            this.setState({
-              center: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "x"),
-          onBlur: _.partial(this.props.onBlur, "x"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React.createElement(InputComponent, {
-          key: "point_y"
-          // eslint-disable-next-line react/no-string-refs
-          ,
-          ref: "y",
-          placeholder: 0,
-          value: this.state.center[1],
-          useArrowKeys: true,
-          onChange: val1 => {
-            const val0 = this.state.center[0];
-            this.setState({
-              center: [val0, val1]
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "y"),
-          onBlur: _.partial(this.props.onBlur, "y"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const scale = /*#__PURE__*/React.createElement(InputComponent
-        // eslint-disable-next-line react/no-string-refs
-        , {
-          ref: "scale",
-          placeholder: 1,
-          value: this.state.scale,
-          useArrowKeys: true,
-          onChange: val => {
-            this.setState({
-              scale: val
-            }, () => {
-              this.props.onChange();
-            });
-          },
-          onFocus: _.partial(this.props.onFocus, "scale"),
-          onBlur: _.partial(this.props.onBlur, "scale"),
-          keypadElement: this.props.keypadElement
-        });
-        return /*#__PURE__*/React.createElement("div", null, i18n.$_("Dilation about %(point)s by %(scale)s", {
-          point,
-          scale
-        }));
-      }
-    }
-  }
-};
-
-/* Various functions to deal with different shape types */
-const ShapeTypes = {
-  getPointCountForType: function (type) {
-    const splitType = type.split("-");
-    if (splitType[0] === "polygon") {
-      return splitType[1] || 3;
-    }
-    if (splitType[0] === "line" || splitType[0] === "lineSegment") {
-      return 2;
-    }
-    if (splitType[0] === "angle") {
-      return 3;
-    }
-    if (splitType[0] === "circle") {
-      return 2;
-    }
-    if (splitType[0] === "point") {
-      return 1;
-    }
-  },
-  addMovableShape: function (graphie, options) {
-    if (options.editable && options.translatable) {
-      throw new PerseusError("It doesn't make sense to have a movable shape " + "where you can stretch the points and translate them " + "simultaneously. options: " + JSON.stringify(options), Errors.InvalidInput);
-    }
-    const points = _.map(options.shape.coords, function (coord) {
-      let isMoving = false;
-      let previousCoord = coord;
-      const onMove = function onMove(x, y) {
-        if (!isMoving) {
-          previousCoord = currentPoint.coord;
-          isMoving = true;
-        }
-        let moveVector = vector$1.subtract([x, y], currentPoint.coord);
-
-        // Translate from (x, y) semantics to (dX, dY) semantics
-        // This is more useful for translations on multiple points,
-        // where we care about how the points moved, not where any
-        // individual point ended up
-        if (options.onMove) {
-          moveVector = options.onMove(moveVector[0], moveVector[1]);
-        }
-
-        // Perform a translation on all points in this shape when
-        // any point moves
-        if (options.translatable) {
-          _.each(points, function (point) {
-            // The point itself will be updated by the
-            // movablePoint class, so only translate the other
-            // points
-            if (point !== currentPoint) {
-              point.setCoord(vector$1.add(point.coord, moveVector));
-            }
-          });
-        }
-
-        // Update our shape and our currentPoint
-        // Without this, some shapes (circles, angles) appear
-        // "bouncy" as they are updated with currentPoint at the
-        // current mouse coordinate (oldCoord), rather than newCoord
-        const oldCoord = currentPoint.coord;
-        const newCoord = vector$1.add(currentPoint.coord, moveVector);
-        // Temporarily change our coordinate so that
-        // shape.update() sees the new coordinate
-        currentPoint.coord = newCoord;
-        shape.update();
-        // ...But don't break onMove, which assumes it
-        // is the only thing changing our coord
-        currentPoint.coord = oldCoord;
-        return newCoord;
-      };
-      const onMoveEnd = function onMoveEnd() {
-        // onMove isn't guaranteed to be called before onMoveEnd, so
-        // we have to take into account that we may not have moved and
-        // set previousCoord.
-        if (options.onMoveEnd && isMoving) {
-          isMoving = false;
-          // We don't use the supplied x and y parameters here
-          // because MovablePoint's onMoveEnd semantics suck.
-          // It returns the mouseX, mouseY without processing them
-          // through onMove, leaving us with weird fractional moves
-          const change = vector$1.subtract(currentPoint.coord, previousCoord);
-          options.onMoveEnd(change[0], change[1]);
-        }
-        shape.update();
-      };
-      const currentPoint = graphie.addMovablePoint({
-        coord: coord,
-        normalStyle: options.normalPointStyle,
-        highlightStyle: options.highlightPointStyle,
-        constraints: {
-          fixed: !options.translatable && !options.editable
-        },
-        visible: options.showPoints,
-        snapX: options.snap && options.snap[0] || 0,
-        snapY: options.snap && options.snap[1] || 0,
-        bounded: false,
-        // Don't bound it when placing it on the graph
-        onMove: onMove,
-        onMoveEnd: onMoveEnd
-      });
-
-      // Bound it when moving
-      // We can't set this earlier, because doing so would mean any
-      // points outside of the graph would be moved into a moved into
-      // a position that doesn't preserve the shape
-      currentPoint.bounded = true;
-      return currentPoint;
-    });
-    const shape = ShapeTypes.addShape(graphie, options, points);
-    const removeShapeWithoutPoints = shape.remove;
-    shape.remove = function () {
-      removeShapeWithoutPoints.apply(shape);
-      _.invoke(points, "remove");
-    };
-    return shape;
-  },
-  addShape: function (graphie, options, points) {
-    points = points || options.shape.coords;
-    const types = ShapeTypes._typesOf(options.shape);
-    const typeOptions = options.shape.options || ShapeTypes.defaultOptions(types);
-
-    // @ts-expect-error - TS2554 - Expected 4 arguments, but got 3.
-    const shapes = ShapeTypes._mapTypes(types, points, function (type, points, i) {
-      const shapeOptions = _.extend({}, options, typeOptions[i]);
-      return ShapeTypes._addType(graphie, type, points, shapeOptions);
-    });
-    const updateFuncs = _.filter(_.pluck(shapes, "update"), _.identity);
-    const update = function update() {
-      _.invoke(updateFuncs, "call");
-    };
-    const removeFuncs = _.filter(_.pluck(shapes, "remove"), _.identity);
-    const remove = function remove() {
-      _.invoke(removeFuncs, "call");
-    };
-    const getOptions = function getOptions() {
-      return _.map(shapes, function (shape) {
-        if (shape.getOptions) {
-          return shape.getOptions();
-        }
-        return {};
-      });
-    };
-    const toJSON = function toJSON() {
-      const coords = _.map(points, function (pt) {
-        if (_.isArray(pt)) {
-          return pt;
-        }
-        return pt.coord;
-      });
-      return {
-        type: types,
-        coords: coords,
-        options: getOptions()
-      };
-    };
-    return {
-      type: types,
-      points: points,
-      update: update,
-      remove: remove,
-      toJSON: toJSON,
-      getOptions: getOptions
-    };
-  },
-  equal: function (shape1, shape2) {
-    const types1 = ShapeTypes._typesOf(shape1);
-    const types2 = ShapeTypes._typesOf(shape2);
-    if (types1.length !== types2.length) {
-      return false;
-    }
-    // @ts-expect-error - TS2554 - Expected 4 arguments, but got 3.
-    const shapes1 = ShapeTypes._mapTypes(types1, shape1.coords, ShapeTypes._combine);
-    // @ts-expect-error - TS2554 - Expected 4 arguments, but got 3.
-    const shapes2 = ShapeTypes._mapTypes(types2, shape2.coords, ShapeTypes._combine);
-    return _.all(_.map(shapes1, function (partialShape1, i) {
-      const partialShape2 = shapes2[i];
-      if (partialShape1.type !== partialShape2.type) {
-        return false;
-      }
-      return ShapeTypes._forType(partialShape1.type).equal(partialShape1.coords, partialShape2.coords);
-    }));
-  },
-  _typesOf: function (shape) {
-    let types = shape.type;
-    if (!_.isArray(types)) {
-      types = [types];
-    }
-    return _.map(types, function (type) {
-      if (type === "polygon") {
-        return "polygon-3";
-      }
-      return type;
-    });
-  },
-  defaultOptions: function (types) {
-    return _.map(types, function (type) {
-      const typeDefaultOptions = ShapeTypes._forType(type).defaultOptions;
-      return _.extend({}, typeDefaultOptions);
-    });
-  },
-  _forType: function (type) {
-    const baseType = type.split("-")[0];
-    return ShapeTypes[baseType];
-  },
-  _mapTypes: function (types, points, func, context) {
-    return _.map(types, function (type, i) {
-      const pointCount = ShapeTypes.getPointCountForType(type);
-      const currentPoints = _.first(points, pointCount);
-      points = _.rest(points, pointCount);
-      return func.call(context, type, currentPoints, i);
-    });
-  },
-  _addType: function (graphie, type, points, options) {
-    const lineCoords = _.isArray(points[0]) ? {
-      coordA: points[0],
-      coordZ: points[1]
-    } : {
-      pointA: points[0],
-      pointZ: points[1]
-    };
-    type = type.split("-")[0];
-    if (type === "polygon") {
-      const polygon = graphie.addMovablePolygon(_.extend({}, options, {
-        fixed: !options.editable,
-        snapX: options.snap && options.snap[0] || 0,
-        snapY: options.snap && options.snap[1] || 0,
-        points: points,
-        constrainToGraph: false
-      }));
-      return {
-        update: polygon.transform.bind(polygon),
-        remove: polygon.remove.bind(polygon)
-      };
-    }
-    if (type === "line" || type === "lineSegment") {
-      const line = graphie.addMovableLineSegment(_.extend({}, options, lineCoords, {
-        movePointsWithLine: true,
-        fixed: true,
-        constraints: {
-          fixed: true
-        },
-        extendLine: type === "line"
-      }));
-
-      // TODO(jack): Hide points on uneditable lines when translation
-      // is a vector.
-      // We can't just remove the points yet, because they are the
-      // translation handle for the line.
-      return {
-        update: line.transform.bind(line, true),
-        remove: line.remove.bind(line)
-      };
-    }
-    if (type === "angle") {
-      // If this angle is editable, we want to be able to make angles
-      // both larger and smaller than 180 degrees.
-      // If this angle is not editable, it should always maintain
-      // it's angle measure, even if it is reflected (causing the
-      // clockwise-ness of the points to change)
-      const shouldChangeReflexivity = options.editable ? null : false;
-      const angle = graphie.addMovableAngle({
-        angleLabel: "$deg0",
-        fixed: true,
-        points: points,
-        normalStyle: options.normalStyle,
-        reflex: options.reflex
-      });
-
-      // Hide non-vertex points on uneditable angles
-      if (!_.isArray(points[0]) && !options.editable) {
-        points[0].remove();
-        points[2].remove();
-      }
-      return {
-        update: angle.update.bind(angle, shouldChangeReflexivity),
-        remove: angle.remove.bind(angle),
-        getOptions: function () {
-          return {
-            reflex: angle.isReflex()
-          };
-        }
-      };
-    }
-    if (type === "circle") {
-      let perimeter = {
-        // temporary object for the first removal
-        remove: _.identity
-      };
-      const redrawPerim = function redrawPerim() {
-        const coord0 = points[0].coord || points[0];
-        const coord1 = points[1].coord || points[1];
-        const radius = point.distanceToPoint(coord0, coord1);
-        // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-        perimeter.remove();
-        perimeter = graphie.circle(coord0, radius, _.extend({
-          stroke: KhanColors.DYNAMIC,
-          "stroke-width": 2
-        }, options.normalStyle));
-      };
-      redrawPerim();
-      if (points[1].remove && !options.editable) {
-        points[1].remove();
-      }
-      return {
-        update: redrawPerim,
-        remove: function () {
-          // Not _.bind because the remove function changes
-          // when the perimeter is redrawn
-          // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-          perimeter.remove();
-        }
-      };
-    }
-    if (type === "point") {
-      // do nothing
-      return {
-        update: null,
-        remove: null
-      };
-    }
-    throw new PerseusError("Invalid shape type " + type, Errors.InvalidInput);
-  },
-  _combine: function (type, coords) {
-    return {
-      type: type,
-      coords: coords
-    };
-  },
-  polygon: {
-    equal: orderInsensitiveCoordsEqual
-  },
-  line: {
-    equal: line.equal
-  },
-  lineSegment: {
-    equal: orderInsensitiveCoordsEqual
-  },
-  angle: {
-    equal: function (points1, points2) {
-      if (!point.equal(points1[1], points2[1])) {
-        return false;
-      }
-      const line1_0 = [points1[1], points1[0]];
-      const line1_2 = [points1[1], points1[2]];
-      const line2_0 = [points2[1], points2[0]];
-      const line2_2 = [points2[1], points2[2]];
-      const equalUnflipped =
-      // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'. | TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'.
-      ray.equal(line1_0, line2_0) && ray.equal(line1_2, line2_2);
-      const equalFlipped =
-      // @ts-expect-error - TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'. | TS2345 - Argument of type 'any[]' is not assignable to parameter of type 'Ray'.
-      ray.equal(line1_0, line2_2) && ray.equal(line1_2, line2_0);
-      return equalUnflipped || equalFlipped;
-    },
-    defaultOptions: {
-      reflex: false
-    }
-  },
-  circle: {
-    equal: function (points1, points2) {
-      const radius1 = point.distanceToPoint(points1[0], points1[1]);
-      const radius2 = point.distanceToPoint(points2[0], points2[1]);
-      return point.equal(points1[0], points2[0]) && number.equal(radius1, radius2);
-    }
-  },
-  point: {
-    equal: point.equal
-  }
-};
-const TransformationListItem = TransformOps.ListItem;
-class TransformationList extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._transformationRefs = () => {
-      return _.times(this.props.transformations.length, i => {
-        // eslint-disable-next-line react/no-string-refs
-        return this.refs["transformation" + i];
-      });
-    };
-    this.value = () => {
-      return _.invoke(this._transformationRefs(), "value");
-    };
-    this.handleChange = (changed, callback) => {
-      this.props.onChange(this.value(), callback);
-    };
-    this.focusLast = () => {
-      const transformationRefs = this._transformationRefs();
-      if (transformationRefs.length !== 0) {
-        // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
-        _.last(transformationRefs).focus();
-      }
-    };
-  }
-  render() {
-    if (this.props.mode === "static") {
-      return /*#__PURE__*/React.createElement("span", null); // don't render anything
-    }
-
-    const transformationList = _.map(this.props.transformations, function (transform, i) {
-      return /*#__PURE__*/React.createElement(TransformationListItem, {
-        ref: "transformation" + i,
-        key: "transformation" + i,
-        transform: transform
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        mode: this.props.mode
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onChange: this.handleChange
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onFocus: _.partial(this.props.onFocus, "" + i)
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onBlur: _.partial(this.props.onBlur, "" + i)
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        keypadElement: this.props.keypadElement
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        apiOptions: this.props.apiOptions
-      });
-    }, this);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-transformation-list"
-    }, transformationList);
-  }
-}
-class ToolButton extends React.Component {
-  render() {
-    const classes = this.props.toggled ? "simple-button exercise-orange toggled highlighted-tool-button" : "simple-button";
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      className: classes,
-      disabled: this.props.disabled,
-      onClick: this.props.onClick
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLButtonElement>'.
-      ,
-      onTouchStart: captureScratchpadTouchStart
-    }, this.props.children);
-  }
-}
-class ToolsBar extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      selected: null
-    };
-    this.changeSelected = tool => {
-      this.props.removeTool(this.state.selected);
-      if (!tool || tool === this.state.selected) {
-        this.setState({
-          selected: null
-        });
-      } else {
-        this.props.addTool(tool);
-        this.setState({
-          selected: tool
-        });
-      }
-    };
-  }
-  render() {
-    const tools = _.map(Transformations, function (tool, type) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.enabled[type]) {
-        return /*#__PURE__*/React.createElement(ToolButton, {
-          key: type
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ,
-          disabled: this.props.apiOptions.readOnly
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ,
-          toggled: this.state.selected === type
-          // eslint-disable-next-line react/jsx-no-bind
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ,
-          onClick: this.changeSelected.bind(this, type)
-        }, tool.verbName);
-      }
-    }, this);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "transformer-tools-bar"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "simple-button-group"
-    }, tools), /*#__PURE__*/React.createElement("button", {
-      className: "transformer-undo-button simple-button",
-      type: "button",
-      disabled: this.props.apiOptions.readOnly,
-      onClick: this.props.onUndoClick
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLButtonElement>'.
-      ,
-      onTouchStart: captureScratchpadTouchStart
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconUndo), " " + i18n._("Undo")), /*#__PURE__*/React.createElement("div", {
-      className: "clear"
-    }));
-  }
-}
-class AddTransformBar extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.changeSelected = tool => {
-      if (tool) {
-        this.props.addTool(tool);
-      }
-    };
-  }
-  render() {
-    const tools = _.map(Transformations, function (tool, type) {
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.enabled[type]) {
-        return /*#__PURE__*/React.createElement(ToolButton, {
-          key: type,
-          toggled: false
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ,
-          disabled: this.props.apiOptions.readOnly
-          // eslint-disable-next-line react/jsx-no-bind
-          // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-          ,
-          onClick: this.changeSelected.bind(this, type)
-        }, /*#__PURE__*/React.createElement(InlineIcon, iconPlus), " ", tool.nounName);
-      }
-    }, this);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "transformer-tools-bar"
-    }, tools, /*#__PURE__*/React.createElement("button", {
-      className: "transformer-undo-button simple-button",
-      type: "button",
-      onClick: this.props.onUndoClick,
-      disabled: this.props.apiOptions.readOnly
-      // @ts-expect-error - TS2322 - Type '(e: TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLButtonElement>'.
-      ,
-      onTouchStart: captureScratchpadTouchStart
-    }, /*#__PURE__*/React.createElement(InlineIcon, iconUndo), " " + i18n._("Undo")), /*#__PURE__*/React.createElement("div", {
-      className: "clear"
-    }));
-  }
-}
-
-// there's no transform in the exports
-
-class Transformer extends React.Component {
-  constructor(..._args) {
-    super(..._args);
-    // @ts-expect-error - TS2564 - Property 'tools' has no initializer and is not definitely assigned in the constructor.
-    this.tools = void 0;
-    this.currentTool = void 0;
-    // @ts-expect-error - TS2564 - Property 'transformations' has no initializer and is not definitely assigned in the constructor.
-    this.transformations = void 0;
-    this.shape = void 0;
-    // This is not the same as TransformerShape
-    this.dilationCircle = void 0;
-    this.rotatePoint = void 0;
-    this.rotateHandle = void 0;
-    this.shouldSetupGraphie = (nextProps, prevProps) => {
-      if (!deepEq(prevProps.starting, nextProps.starting)) {
-        return true;
-      }
-      if (prevProps.graphMode !== nextProps.graphMode) {
-        return true;
-      }
-      if (prevProps.listMode !== nextProps.listMode) {
-        return true;
-      }
-      if (prevProps.drawSolutionShape !== nextProps.drawSolutionShape) {
-        return true;
-      }
-      if (nextProps.drawSolutionShape && !deepEq(prevProps.correct.shape, nextProps.correct.shape)) {
-        return true;
-      }
-      if (!deepEq(this.tools, nextProps.tools)) {
-        return true;
-      }
-      return false;
-    };
-    this.graphie = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      return this.refs.graph.graphie();
-    };
-    this.setupGraphie = graphie => {
-      // A background image of our solution:
-      if (this.props.drawSolutionShape && this.props.correct.shape && this.props.correct.shape.coords) {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
-        ShapeTypes.addShape(graphie, {
-          fixed: true,
-          shape: this.props.correct.shape,
-          normalStyle: {
-            stroke: KhanColors.GRAY,
-            "stroke-dasharray": "",
-            "stroke-width": 2
-          }
-        });
-      }
-      this.currentTool = null;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'changeSelected' does not exist on type 'ReactInstance'.
-      this.refs.toolsBar.changeSelected(null);
-      this.addTransformerShape(this.props.starting.shape, /* translatable */false);
-      this.setTransformations(this.props.transformations);
-
-      // Save a copy of our tools so that we can check future
-      // this.props.tools changes against them
-      // This seems weird, but gives us an easy way to tell whether
-      // props changes were self-inflicted (for which a graphie reset
-      // is not required, and is in fact a bad idea right now because
-      // of resetting the size of the dilation tool).
-      // TODO (jack): A deepClone method would be nice here
-      this.tools = {
-        translation: _.clone(this.props.tools.translation),
-        rotation: _.clone(this.props.tools.rotation),
-        reflection: _.clone(this.props.tools.reflection),
-        dilation: _.clone(this.props.tools.dilation)
-      };
-    };
-    /* Applies all transformations in `transformations`
-     * to the starting shape, and updates this.transformations
-     * to reflect this
-     *
-     * Usually called with this.props.transformations
-     */
-    this.setTransformations = transformations => {
-      this.resetCoords();
-      this.transformations = _.clone(transformations);
-      _.each(this.transformations, this.applyTransform);
-    };
-    // the polygon that we transform
-    this.addTransformerShape = (shape, translatable) => {
-      const self = this;
-      const graphie = this.graphie();
-      this.shape = ShapeTypes.addMovableShape(graphie, {
-        shape: shape,
-        editable: false,
-        showPoints: this.props.graphMode !== "static",
-        translatable: translatable,
-        onMove: function (dX, dY) {
-          dX = KhanMath.roundToNearest(graphie.snap[0], dX);
-          dY = KhanMath.roundToNearest(graphie.snap[1], dY);
-          // NOTE(kevinb): object is missing .constraints property
-          // @ts-expect-error - TS2345 - Argument of type '{ type: "translation"; vector: [any, any]; }' is not assignable to parameter of type 'PerseusTransformerTransformation'.
-          self.addTransform({
-            type: "translation",
-            vector: [dX, dY]
-          });
-          return [dX, dY];
-        },
-        normalPointStyle: {
-          fill: translatable ? KhanColors.INTERACTIVE : KhanColors.DYNAMIC,
-          stroke: translatable ? KhanColors.INTERACTIVE : KhanColors.DYNAMIC
-        },
-        highlightPointStyle: {
-          fill: KhanColors.INTERACTING,
-          stroke: KhanColors.INTERACTING
-        }
-      });
-    };
-    this.addTool = toolId => {
-      const self = this;
-      if (this.props.graphMode === "interactive") {
-        if (toolId === "translation") {
-          this.currentTool = this.addTranslationTool();
-        } else if (toolId === "rotation") {
-          this.currentTool = this.addRotationTool();
-        } else if (toolId === "reflection") {
-          this.currentTool = this.addReflectionTool();
-        } else if (toolId === "dilation") {
-          this.currentTool = this.addDilationTool();
-        } else {
-          throw new PerseusError("Invalid tool id: " + toolId, Errors.InvalidInput);
-        }
-      } else {
-        let transform;
-        if (toolId === "translation") {
-          // NOTE(kevinb): object is missing .constraints property
-          transform = {
-            type: "translation",
-            // NOTE(kevib): these should be numbers
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
-            vector: [null, null]
-          };
-        } else if (toolId === "rotation") {
-          // NOTE(kevinb): object is missing .constraints property
-          transform = {
-            type: "rotation",
-            // NOTE(kevib): these should be numbers
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
-            center: [null, null],
-            // NOTE(kevib): this should be a number
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'.
-            angleDeg: null
-          };
-        } else if (toolId === "reflection") {
-          // Reflections with nulls in them won't be applied until
-          // fills in the blanks
-          transform = {
-            type: "reflection",
-            line: [
-            // NOTE(kevib): these should be numbers
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
-            [null, null],
-            // NOTE(kevib): these should be numbers
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
-            [null, null]]
-          };
-        } else if (toolId === "dilation") {
-          // NOTE(kevinb): object is missing .constraints property
-          transform = {
-            type: "dilation",
-            // NOTE(kevib): these should be numbers
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'. | TS2322 - Type 'null' is not assignable to type 'number'.
-            center: [null, null],
-            // NOTE(kevib): this should be a number
-            // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'number'.
-            scale: null
-          };
-        } else {
-          throw new PerseusError("Invalid tool id: " + toolId, Errors.InvalidInput);
-        }
-        this.doTransform(transform, function () {
-          // @ts-expect-error - TS2339 - Property 'focusLast' does not exist on type 'ReactInstance'.
-          self.refs.transformationList.focusLast();
-        });
-      }
-    };
-    this.removeTool = toolId => {
-      if (this.currentTool) {
-        this.currentTool.remove();
-      }
-      this.currentTool = null;
-    };
-    this.addTranslationTool = () => {
-      var _this$shape, _this$shape2;
-      const self = this;
-      (_this$shape = this.shape) == null || _this$shape.remove();
-      this.addTransformerShape((_this$shape2 = this.shape) == null ? void 0 : _this$shape2.toJSON(), /* translatable */true);
-      return {
-        remove: function () {
-          var _self$shape, _self$shape2;
-          (_self$shape = self.shape) == null || _self$shape.remove();
-          self.addTransformerShape((_self$shape2 = self.shape) == null ? void 0 : _self$shape2.toJSON(), /* translatable */false);
-        }
-      };
-    };
-    // Snaps a coord to this.graphie()'s snap
-    // @ts-expect-error - TS2322 - Type '(coord: Coord) => number[]' is not assignable to type '(arg1: Coord) => Coord'.
-    this.snapCoord = coord => {
-      const graphie = this.graphie();
-      return _.map(coord, function (val, dim) {
-        return KhanMath.roundToNearest(graphie.snap[dim], val);
-      });
-    };
-    // Normalize the coords into something that fits the new 45 degree
-    // reflection line.
-    // @ts-expect-error - TS2322 - Type '(messyCoords: [Coord, Coord]) => any[]' is not assignable to type '(arg1: [Coord, Coord]) => [Coord, Coord]'.
-    this.normalizeReflectionCoords = messyCoords => {
-      // @ts-expect-error - TS2345 - Argument of type 'Point' is not assignable to parameter of type 'Coord'.
-      const midpoint = this.snapCoord(line.midpoint(messyCoords));
-      const origDirectionPolar = vector$1.polarDegFromCart(vector$1.subtract(messyCoords[0], messyCoords[1]));
-      const direction = vector$1.cartFromPolarDeg(1, KhanMath.roundToNearest(45, origDirectionPolar[1]));
-      const coords = _.map([-1, 1], function (directionCoefficient) {
-        const coord = vector$1.add(midpoint, vector$1.scale(direction, directionCoefficient *
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.scaleToCurrentRange(REFLECT_ROTATE_HANDLE_DIST)));
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        return this.snapCoord(coord);
-      }, this);
-      return coords;
-    };
-    this.addReflectionTool = () => {
-      const options = this.props.tools.reflection;
-      if (!options.enabled) {
-        return;
-      }
-      const self = this;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      const graphie = this.refs.graph.graphie();
-      const updateReflectionTool = function updateReflectionTool() {
-        self.changeTool("reflection", {
-          coords: _.pluck(reflectPoints, "coord")
-        });
-      };
-      const coords = this.normalizeReflectionCoords(options.coords);
-
-      // The points defining the line of reflection; hidden from the
-      // user.
-      const reflectPoints = _.map(coords, function (coord) {
-        return graphie.addMovablePoint({
-          coord: coord,
-          visible: false
-        });
-      }, this);
-
-      // the line of reflection
-      // TODO(jack): graphie.style here is a hack to prevent the dashed
-      // style from leaking into the rest of the shapes. Remove when
-      // graphie.addMovableLineSegment doesn't leak styles anymore.
-      let reflectLine;
-      const normalColor = colorForTool(options);
-      graphie.style({}, function () {
-        reflectLine = graphie.addMovableLineSegment({
-          fixed: options.constraints.fixed,
-          constraints: options.constraints,
-          pointA: reflectPoints[0],
-          pointZ: reflectPoints[1],
-          snapX: graphie.snap[0],
-          snapY: graphie.snap[1],
-          extendLine: true,
-          normalStyle: {
-            stroke: normalColor,
-            "stroke-width": 2,
-            "stroke-dasharray": "- "
-          },
-          highlightStyle: {
-            stroke: KhanColors.INTERACTING,
-            "stroke-width": 2,
-            "stroke-dasharray": "- " // TODO(jack) solid doesn't
-            // work here, but would be
-            // nicer
-          },
-
-          movePointsWithLine: true,
-          onMoveEnd: updateReflectionTool
-        });
-      });
-
-      // the "button" point in the center of the line of reflection
-      const reflectButton = graphie.addReflectButton({
-        fixed: options.constraints.fixed,
-        line: reflectLine,
-        size: this.scaleToCurrentRange(REFLECT_BUTTON_SIZE),
-        onClick: function () {
-          self.doTransform({
-            type: "reflection",
-            // @ts-expect-error - TS2322 - Type 'any[]' is not assignable to type '[Coord, Coord]'.
-            line: _.pluck(reflectPoints, "coord")
-          });
-          if (reflectRotateHandle) {
-            // flip the rotation handle
-            // @ts-expect-error - TS2339 - Property 'setCoord' does not exist on type 'never'.
-            reflectRotateHandle.setCoord(vector$1.add(reflectButton.coord, vector$1.subtract(reflectButton.coord,
-            // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
-            reflectRotateHandle.coord)));
-            // @ts-expect-error - TS2339 - Property 'update' does not exist on type 'never'.
-            reflectRotateHandle.update();
-          }
-        },
-        normalStyle: {
-          stroke: normalColor,
-          "stroke-width": 2,
-          fill: normalColor
-        },
-        highlightStyle: {
-          stroke: KhanColors.INTERACTING,
-          "stroke-width": 3,
-          fill: KhanColors.INTERACTING
-        },
-        onMoveEnd: updateReflectionTool
-      });
-      let reflectRotateHandle = null;
-      if (!options.constraints.fixed) {
-        // The rotation handle for rotating the line of reflection
-        const initRotateHandleAngle = vector$1.polarDegFromCart(vector$1.subtract(reflectPoints[1].coord, reflectPoints[0].coord))[1] + 90; // 90 degrees off of the line
-        reflectRotateHandle = graphie.addRotateHandle({
-          center: reflectButton,
-          radius: this.scaleToCurrentRange(REFLECT_ROTATE_HANDLE_DIST),
-          angleDeg: initRotateHandleAngle,
-          width: this.scaleToCurrentRange(0.24),
-          hoverWidth: this.scaleToCurrentRange(0.4),
-          lengthAngle: 17,
-          onMove: function (newAngle) {
-            return KhanMath.roundToNearest(45, newAngle);
-          },
-          onMoveEnd: updateReflectionTool
-        });
-      }
-
-      // Move the reflectButton and reflectRotateHandle with the line
-      $(reflectLine).on("move", function () {
-        reflectButton.update();
-        $(reflectButton).trigger("move"); // update the rotation handle,
-        // which watches for this in util/interactive.js.
-      });
-
-      // Update the line and reflect button when the reflectRotateHandle is
-      // rotated
-      if (reflectRotateHandle) {
-        $(reflectRotateHandle).on("move", function () {
-          const rotateHandleApprox = self.snapCoord(
-          // @ts-expect-error - TS2531 - Object is possibly 'null'.
-          reflectRotateHandle.coord);
-          const rotateVector = vector$1.subtract(rotateHandleApprox, reflectButton.coord);
-          const flipped = reflectButton.isFlipped() ? 1 : 0;
-          reflectPoints[flipped].setCoord(vector$1.add(reflectButton.coord, vector$1.rotateDeg(rotateVector, 90)));
-          reflectPoints[1 - flipped].setCoord(vector$1.add(reflectButton.coord, vector$1.rotateDeg(rotateVector, -90)));
-          reflectLine.transform(true);
-          reflectButton.update();
-        });
-      }
-      return {
-        remove: function () {
-          reflectButton.remove();
-          if (reflectRotateHandle) {
-            // @ts-expect-error - TS2339 - Property 'remove' does not exist on type 'never'.
-            reflectRotateHandle.remove();
-          }
-          reflectLine.remove();
-          reflectPoints[0].remove();
-          reflectPoints[1].remove();
-        }
-      };
-    };
-    /* Scales a distance from the default range of
-     * [-10, 10] to the current this.props.graph.range
-     *
-     * Used for sizing various transformation tools
-     * (rotation handle, dilation circle)
-     */
-    this.scaleToCurrentRange = dist => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'props' does not exist on type 'ReactInstance'.
-      return scaleToRange(dist, this.refs.graph.props.range);
-    };
-    this.addRotationTool = () => {
-      const options = this.props.tools.rotation;
-      if (!options.enabled) {
-        return;
-      }
-      const self = this;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      const graphie = this.refs.graph.graphie();
-      const pointColor = colorForTool(options);
-      // The center of our rotation, which can be moved to change the
-      // center of rotation
-      this.rotatePoint = graphie.addMovablePoint({
-        constraints: options.constraints,
-        coord: options.coord,
-        snapX: graphie.snap[0],
-        snapY: graphie.snap[1],
-        normalStyle: {
-          // ugh, this seems to be a global and
-          "stroke-dasharray": "",
-          // is set to dash above
-          stroke: pointColor,
-          fill: pointColor
-        },
-        highlightStyle: {
-          "stroke-dasharray": "",
-          stroke: KhanColors.INTERACTING,
-          fill: KhanColors.INTERACTING
-        }
-      });
-
-      // The point that we move around the center of rotation to actually
-      // cause rotations
-      this.rotateHandle = graphie.addRotateHandle({
-        center: this.rotatePoint,
-        radius: this.scaleToCurrentRange(ROTATE_HANDLE_DIST),
-        width: this.scaleToCurrentRange(0.24),
-        hoverWidth: this.scaleToCurrentRange(0.4),
-        onMove: function (newAngle, oldAngle) {
-          const transform = self.getRotationTransformFromAngle(self.rotatePoint.coord, newAngle - oldAngle);
-
-          // Rotate polygon with rotateHandle
-          self.doTransform(transform);
-
-          // @ts-expect-error - TS2339 - Property 'angleDeg' does not exist on type 'PerseusTransformerTransformation'.
-          return oldAngle + transform.angleDeg;
-        }
-      });
-
-      // Update tools.rotation.coord
-      this.rotatePoint.onMoveEnd = (x, y) => {
-        self.changeTool("rotation", {
-          coord: [x, y]
-        });
-      };
-      return {
-        remove: function () {
-          var _self$rotateHandle, _self$rotatePoint;
-          (_self$rotateHandle = self.rotateHandle) == null || _self$rotateHandle.remove();
-          (_self$rotatePoint = self.rotatePoint) == null || _self$rotatePoint.remove();
-        }
-      };
-    };
-    this.addDilationTool = () => {
-      const options = this.props.tools.dilation;
-      if (!options.enabled) {
-        return;
-      }
-      const self = this;
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graphie' does not exist on type 'ReactInstance'.
-      const graphie = this.refs.graph.graphie();
-      const pointColor = colorForTool(options);
-      // the circle for causing dilation transforms
-      self.dilationCircle = graphie.addCircleGraph({
-        centerConstraints: options.constraints,
-        center: options.coord,
-        radius: self.scaleToCurrentRange(2),
-        snapX: graphie.snap[0],
-        snapY: graphie.snap[1],
-        minRadius: self.scaleToCurrentRange(1),
-        snapRadius: self.scaleToCurrentRange(0.5),
-        onResize: function (newRadius, oldRadius) {
-          // NOTE(kevinb): object is missing .constraints property
-          // @ts-expect-error - TS2345 - Argument of type '{ type: "dilation"; center: any; scale: number; }' is not assignable to parameter of type 'PerseusTransformerTransformation'.
-          self.doTransform({
-            type: "dilation",
-            center: self.dilationCircle.centerPoint.coord,
-            scale: newRadius / oldRadius
-          });
-        },
-        circleNormalStyle: {
-          stroke: pointColor,
-          "stroke-width": 2,
-          "stroke-dasharray": "- ",
-          "fill-opacity": 0
-        },
-        circleHighlightStyle: {
-          stroke: KhanColors.INTERACTING,
-          "stroke-width": 2,
-          "stroke-dasharray": "",
-          fill: KhanColors.INTERACTING,
-          "fill-opacity": 0.05
-        },
-        centerNormalStyle: {
-          stroke: pointColor,
-          fill: pointColor,
-          "stroke-width": 2,
-          "stroke-dasharray": ""
-        },
-        centerHighlightStyle: {
-          stroke: pointColor,
-          fill: pointColor,
-          "stroke-width": 2,
-          "stroke-dasharray": ""
-        }
-      });
-      const origOnMoveEnd = this.dilationCircle.centerPoint.onMoveEnd;
-      this.dilationCircle.centerPoint.onMoveEnd = (...args) => {
-        if (origOnMoveEnd) {
-          origOnMoveEnd(args);
-        }
-        self.changeTool("dilation", {
-          coord: self.dilationCircle.centerPoint.coord
-        });
-      };
-      return {
-        remove: function () {
-          var _self$dilationCircle;
-          (_self$dilationCircle = self.dilationCircle) == null || _self$dilationCircle.remove();
-        }
-      };
-    };
-    // returns a transformation object representing a rotation
-    // rounds the angle to the nearest 15 degrees
-    // @ts-expect-error - TS2322 - Type '(center: Coord, angleChanged: number) => { type: "rotation"; center: Coord; angleDeg: number; }' is not assignable to type '(arg1: Coord, arg2: number) => PerseusTransformerTransformation'.
-    this.getRotationTransformFromAngle = (center, angleChanged) => {
-      angleChanged = (angleChanged + 360) % 360;
-      if (angleChanged > 180) {
-        angleChanged -= 360;
-      }
-      const roundedAngle = Math.round(angleChanged / ROTATE_SNAP_DEGREES) * ROTATE_SNAP_DEGREES;
-
-      // NOTE(kevinb): return object is missing .constraints property
-      return {
-        type: "rotation",
-        center: center,
-        angleDeg: roundedAngle
-      };
-    };
-    // apply and save a transform
-    this.doTransform = (transform, callback) => {
-      this.applyTransform(transform);
-      this.addTransform(transform, callback);
-    };
-    // apply a transform to our polygon (without modifying our transformation
-    // list)
-    this.applyTransform = transform => {
-      if (this.props.graphMode !== "static") {
-        const transformFunc = TransformOps.apply(transform);
-        // @ts-expect-error - TS2345 - Argument of type '(coord: any) => any' is not assignable to parameter of type 'PerseusTransformerTransformation'.
-        this.applyCoordTransformation(transformFunc);
-      }
-    };
-    // transform our polygon by transforming each point using a given function
-    this.applyCoordTransformation = pointTransform => {
-      var _this$shape3;
-      _.each(this.shape.points, function (point) {
-        // @ts-expect-error - TS2349 - This expression is not callable.
-        const newCoord = pointTransform(point.coord);
-        point.setCoord(newCoord);
-      });
-      (_this$shape3 = this.shape) == null || _this$shape3.update();
-    };
-    this.resetCoords = () => {
-      var _this$shape4;
-      const startCoords = this.props.starting.shape.coords;
-      _.each(this.shape.points, function (point, i) {
-        point.setCoord(startCoords[i]);
-      });
-      (_this$shape4 = this.shape) == null || _this$shape4.update();
-    };
-    // Remove the last transformation
-    this.handleUndoClick = () => {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'changeSelected' does not exist on type 'ReactInstance'.
-      this.refs.toolsBar.changeSelected(null);
-      if (this.props.transformations.length) {
-        this.props.onChange({
-          transformations: _.initial(this.props.transformations)
-        });
-      }
-    };
-    this.setTransformationProps = (newTransfomationList, callback) => {
-      this.props.onChange({
-        transformations: newTransfomationList
-      },
-      // @ts-expect-error - TS2345 - Argument of type '(arg1: any) => unknown' is not assignable to parameter of type '() => unknown'.
-      callback);
-    };
-    // add a transformation to our props list of transformation
-    this.addTransform = (transform, callback) => {
-      this.transformations = TransformOps.append(this.transformations, transform);
-      this.props.onChange({
-        transformations: _.clone(this.transformations)
-      },
-      // @ts-expect-error - TS2345 - Argument of type '((arg1: any) => unknown) | undefined' is not assignable to parameter of type '(() => unknown) | undefined'.
-      callback);
-    };
-    this.changeTool = (tool, changes) => {
-      const newTools = _.clone(this.props.tools);
-      newTools[tool] = _.extend({}, this.props.tools[tool], changes);
-      this.tools[tool] = _.clone(newTools[tool]);
-      this.props.onChange({
-        // @ts-expect-error - TS2740 - Type '{ dilation: DilationTool; reflection: ReflectionTool; rotation: RotationTool; translation: TranslationTool; }' is missing the following properties from type 'readonly any[]': length, concat, join, slice, and 18 more.
-        tools: newTools
-      });
-      this.props.trackInteraction();
-    };
-    this.simpleValidate = rubric => {
-      return Transformer.validate(this.getUserInput(), rubric);
-    };
-    /**
-     * Calculate where the coordinates would be if they were
-     * moved, even if we're in formal mode with no movement
-     * (and thus the actual movablepoints may not have moved
-     */
-    // @ts-expect-error - TS2322 - Type '() => [Coord, Coord] | readonly Coord[] | [Coord, Coord, Coord]' is not assignable to type '() => Coord'.
-    this.getCoords = () => {
-      const startCoords = this.props.starting.shape.coords;
-      const transforms = this.props.transformations;
-      return _.reduce(transforms, function (coords, transform) {
-        return _.map(coords, TransformOps.apply(transform));
-      }, startCoords);
-    };
-    this.getEditorJSON = () => {
-      const json = _.pick(this.props, "grading", "starting", "graphMode", "listMode", "tools", "drawSolutionShape", "gradeEmpty");
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'graph' does not exist on type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "tools" | "starting" | "drawSolutionShape" | "gradeEmpty" | "graphMode" | "listMode">'. | TS2339 - Property 'toJSON' does not exist on type 'ReactInstance'.
-      json.graph = this.refs.graph.toJSON();
-      // @ts-expect-error - TS2339 - Property 'version' does not exist on type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "tools" | "starting" | "drawSolutionShape" | "gradeEmpty" | "graphMode" | "listMode">'.
-      json.version = 1.2; // Give us some safety to change the format
-      // when we realize that I wrote
-      // a horrible json spec for this widget
-
-      // @ts-expect-error - TS2339 - Property 'answer' does not exist on type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "tools" | "starting" | "drawSolutionShape" | "gradeEmpty" | "graphMode" | "listMode">'.
-      json.answer = this.getUserInput();
-      return json;
-    };
-    this.getUserInput = () => {
-      var _this$shape5;
-      return {
-        transformations: this.props.transformations,
-        // This doesn't call this.shape.toJSON() because that doesn't
-        // handle coordinates in formal mode without movement, since
-        // the movablepoints never move
-        shape: {
-          type: this.shape.type,
-          coords: this.getCoords(),
-          options: (_this$shape5 = this.shape) == null ? void 0 : _this$shape5.getOptions()
-        }
-      };
-    };
-    /* InputPath API */
-    this._handleFocus = (...path) => {
-      this.props.onFocus(path);
-    };
-    this._handleBlur = (...path) => {
-      this.props.onBlur(path);
-    };
-    this._getTransformationForID = transformationID => {
-      // Returns the 'transformation' component corresponding to a given ID
-      const refPath = ["transformationList", "transformation" + transformationID];
-
-      // Follow the path of references
-      let component = this;
-      _.each(refPath, ref => {
-        // @ts-expect-error - TS2322 - Type 'ReactInstance' is not assignable to type 'this'.
-        component = component.refs[ref];
-      });
-      return component;
-    };
-    this.getInputPaths = () => {
-      // If we're in static mode, then there is no transformation list, and,
-      // as a result, no input paths.
-      if (this.props.listMode === "static") {
-        return [];
-      }
-      let inputPaths = [];
-      _.each(this.props.transformations, (transformation, i) => {
-        // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
-        transformation = this._getTransformationForID(i);
-        // @ts-expect-error - TS2339 - Property 'getInputPaths' does not exist on type 'PerseusTransformerTransformation'.
-        const innerPaths = transformation.getInputPaths();
-        const fullPaths = _.map(innerPaths, innerPath => {
-          return ["" + i].concat(innerPath);
-        });
-        // @ts-expect-error - TS2345 - Argument of type 'string[][]' is not assignable to parameter of type 'ConcatArray<never>'.
-        inputPaths = inputPaths.concat(fullPaths);
-      });
-      return inputPaths;
-    };
-    this._passToInner = function (functionName, path, ...args) {
-      if (!path || !path.length) {
-        return;
-      }
-
-      // First argument tells us which transformation will receive the call;
-      // remaining arguments are used within that transformation to identify
-      // a specific input.
-      const innerPath = _.rest(path);
-
-      // Pass arguments down to appropriate 'transformation' component
-      const transformationID = _.head(path);
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      const caller = this._getTransformationForID(transformationID);
-      return caller[functionName](innerPath, ...args);
-    };
-    this.focus = () => {
-      // Just focus the first showing input
-      const inputs = this.getInputPaths();
-      if (inputs.length > 0) {
-        this.focusInputPath(inputs[0]);
-        return true;
-      }
-      return false;
-    };
-    this.focusInputPath = path => {
-      // Since the transformer exposes the input API, it needs to be robust
-      // to empty paths. We don't expect this to happen, as entire-widget
-      // focusing is typically done through the focus() method, which already
-      // handles the empty path case properly, but it's better to be safe
-      // here.
-      if (path.length === 0) {
-        return false;
-      }
-      assert(path.length >= 2);
-      return this._passToInner("focusInputPath", path);
-    };
-    this.blurInputPath = path => {
-      // Since the transformer exposes the input API, it needs to be robust
-      // to empty paths (which indicate a blurring of the entire widget,
-      // e.g., when switching from interacting with the transformer to
-      // interacting with some other widget).
-      if (path.length === 0) {
-        return false;
-      }
-      assert(path.length >= 2);
-      return this._passToInner("blurInputPath", path);
-    };
-    this.setInputValue = (path, value, cb) => {
-      assert(path.length >= 2);
-      return this._passToInner("setInputValue", path, value, cb);
-    };
-    this.getDOMNodeForPath = path => {
-      assert(path.length >= 2);
-      return this._passToInner("getDOMNodeForPath", path);
-    };
-    this.getGrammarTypeForPath = path => {
-      assert(path.length >= 2);
-      return this._passToInner("getGrammarTypeForPath", path);
-    };
-  }
-  render() {
-    // Fill in any missing value in this.props.graph
-    // this can happen because the graph json doesn't include
-    // box, for example
-    const graph = _.extend(defaultGraphProps(this.props.graph, defaultBoxSize), this.props.graph);
-    const interactiveToolsMode = this.props.graphMode === "interactive";
-    const ToolsBarClass = interactiveToolsMode ? ToolsBar : AddTransformBar;
-
-    // This style is applied inline because it is dependent on the
-    // size of the graph as set by the graph.box prop, and this also
-    // lets us specify it in the same place the graph's width is
-    // specified.
-    const toolsBar = /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: graph.box[0]
-      }
-    }, /*#__PURE__*/React.createElement(ToolsBarClass
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "toolsBar",
-      enabled: pluckObject(this.props.tools, "enabled"),
-      apiOptions: this.props.apiOptions,
-      addTool: this.addTool,
-      removeTool: this.removeTool,
-      onUndoClick: this.handleUndoClick
-    }));
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget " + "perseus-widget-transformer"
-    }, /*#__PURE__*/React.createElement(Graph
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "graph",
-      box: graph.box,
-      range: graph.range,
-      labels: graph.labels,
-      step: graph.step,
-      gridStep: graph.gridStep,
-      markings: graph.markings,
-      backgroundImage: graph.backgroundImage,
-      showProtractor: graph.showProtractor,
-      onGraphieUpdated: this.setupGraphie,
-      setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
-    }), !interactiveToolsMode && i18n._("Add transformations below:"), this.props.graphMode === "static" && [/*#__PURE__*/React.createElement("br", {
-      key: "static-br"
-    }), /*#__PURE__*/React.createElement("em", {
-      key: "static-nomove"
-    }, " ", i18n._("Note: For this question, the shape will not move."), " ")], interactiveToolsMode && toolsBar, /*#__PURE__*/React.createElement(TransformationList
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "transformationList",
-      mode: this.props.listMode,
-      transformations: this.props.transformations,
-      onChange: this.setTransformationProps,
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      keypadElement: this.props.keypadElement,
-      apiOptions: this.props.apiOptions
-    }), !interactiveToolsMode && toolsBar);
-  }
-  componentDidMount() {
-    this.setupGraphie(this.graphie());
-  }
-  componentDidUpdate(prevProps) {
-    if (this.shouldSetupGraphie(this.props, prevProps)) {
-      // eslint-disable-next-line react/no-string-refs
-      // @ts-expect-error - TS2339 - Property 'reset' does not exist on type 'ReactInstance'.
-      this.refs.graph.reset();
-    } else if (!deepEq(this.props.transformations, this.transformations)) {
-      this.setTransformations(this.props.transformations);
-    }
-  }
-  static validate(guess, rubric) {
-    // Check for any required transformations
-    for (const type in Transformations) {
-      if (rubric.tools[type].required) {
-        const isUsed = _.any(_.map(guess.transformations, function (transform) {
-          // Required transformations must appear in the
-          // transformation list, and must not be no-ops
-          return transform.type === type && !TransformOps.isEmpty(transform) && !TransformOps.isNoOp(transform);
-        }));
-        if (!isUsed) {
-          return {
-            type: "invalid",
-            message: i18n._("Your transformation must use a " + "%(type)s.", {
-              type: Transformations[type].lowerNounName
-            })
-          };
-        }
-      }
-    }
-
-    // Compare shapes
-    if (ShapeTypes.equal(guess.shape, rubric.correct.shape)) {
-      return {
-        type: "points",
-        earned: 1,
-        total: 1,
-        message: null
-      };
-    }
-    if (!rubric.gradeEmpty && deepEq(guess.shape.coords, rubric.starting.shape.coords)) {
-      return {
-        type: "invalid",
-        message: i18n._("Use the interactive graph to define a " + "correct transformation.")
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-}
-Transformer.defaultProps = _.defaults({
-  transformations: []
-}, defaultTransformerProps);
-var Transformer$1 = {
-  name: "transformer",
-  displayName: "Transformer (deprecated)",
-  hidden: true,
-  widget: Transformer
-};
-
 var hubble = {exports: {}};
 
 (function (module, exports) {
@@ -43942,7 +41528,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$1];
+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, Unit, Video$1, DeprecatedStandin$1];
 
 /**
  * This should be called by all clients, specifying whether extra widgets are
@@ -43986,7 +41572,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "18.0.1";
+const libVersion = "19.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45432,8 +43018,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -46566,10 +44150,7 @@ function violatingWidgets(itemData) {
  */
 const registerAllWidgetsForTesting = () => {
   registerWidgets(allWidgets);
-
-  // When it's time to replace the transformer widget
-  // uncomment this line
-  // Widgets.replaceWidget("transformer", "deprecated-standin");
+  replaceWidget("transformer", "deprecated-standin");
 };
 
 /**
@@ -46997,5 +44578,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Transformer$1 as TransformerWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusJSON, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Errors, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusError, PerseusExpressionAnswerFormConsidered, PerseusMarkdown, Plotter$1 as PlotterWidget, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, displaySigFigs, getAnswersFromWidgets, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, mediaQueries, parsePerseusJSON, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, traverse, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map