@khanacademy/perseus 18.0.0 → 19.0.0

package/dist/index.js

@@ -2776,7 +2776,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 ___default["default"](2).times(function (i) {
     const scale = scaleFromExtent(range[i], boxSize);
@@ -2958,13 +2958,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;
       }
     }
@@ -2982,10 +2982,10 @@ function deepEq$6(x, y) {
   if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
     return x === y || ___default["default"].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);
     }) && ___default["default"].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) {
@@ -3185,7 +3185,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) {
@@ -3273,7 +3273,7 @@ const Util = {
   firstNumericalParse: firstNumericalParse$1,
   stringArrayOfSize: stringArrayOfSize$1,
   gridDimensionConfig,
-  getGridStep: getGridStep$1,
+  getGridStep,
   snapStepFromGridStep,
   scaleFromExtent,
   tickStepFromExtent,
@@ -3282,7 +3282,7 @@ const Util = {
   constrainedTickStepsFromTickSteps,
   DeprecationMixin: DeprecationMixin$1,
   eq: eq$2,
-  deepEq: deepEq$6,
+  deepEq: deepEq$5,
   parseQueryString,
   updateQueryString: updateQueryString$2,
   strongEncodeURIComponent,
@@ -3292,7 +3292,7 @@ const Util = {
   resetTouchHandlers,
   extractPointerLocation,
   supportsPassiveEvents,
-  captureScratchpadTouchStart: captureScratchpadTouchStart$4,
+  captureScratchpadTouchStart: captureScratchpadTouchStart$3,
   getImageSize,
   getImageSizeModern: getImageSizeModern,
   getRealImageUrl: getRealImageUrl,
@@ -13479,7 +13479,7 @@ ___default["default"].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
@@ -13576,7 +13576,7 @@ const createSimpleClass = function (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;
@@ -13621,7 +13621,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
@@ -13692,7 +13692,7 @@ ___default["default"].extend(Movable.prototype, {
    * Simulates a mouse grab event on the movable object.
    */
   grab: function (coord) {
-    assert$9(kmath.point.is(coord));
+    assert$8(kmath.point.is(coord));
     const self = this;
     const graphie = self.graphie;
     const state = self.state;
@@ -14158,7 +14158,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"];
 
@@ -14184,8 +14184,8 @@ const DEFAULT_STATE$2 = {
   mouseTarget: null
 };
 const MovableLine$4 = function (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.
   ___default["default"].extend(this, {
@@ -14742,7 +14742,7 @@ var MovablePointOptions = {
   }
 };
 
-const assert$7 = InteractiveUtil.assert;
+const assert$6 = InteractiveUtil.assert;
 const normalizeOptions$1 = InteractiveUtil.normalizeOptions;
 const {
   processMath
@@ -14878,7 +14878,7 @@ ___default["default"].extend(MovablePoint$5.prototype, {
     const self = this;
     const graphie = self.graphie;
     const state = ___default["default"].extend(self.state, normalizeOptions$1(FUNCTION_ARRAY_OPTIONS$1, options));
-    assert$7(kmath.point.is(state.coord));
+    assert$6(kmath.point.is(state.coord));
 
     // Default things inside the state.normalStyle object, because
     // _.extend is not deep.
@@ -15080,12 +15080,12 @@ ___default["default"].extend(MovablePoint$5.prototype, {
     return result !== false;
   },
   setCoord: function (coord) {
-    assert$7(kmath.point.is(coord, 2));
+    assert$6(kmath.point.is(coord, 2));
     this.state.coord = ___default["default"].clone(coord);
     this.draw();
   },
   setCoordConstrained: function (coord) {
-    assert$7(kmath.point.is(coord, 2));
+    assert$6(kmath.point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = ___default["default"].clone(result);
@@ -15481,7 +15481,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
@@ -15520,8 +15520,8 @@ const DEFAULT_STATE = {
   mouseTarget: null
 };
 const MovablePolygon = function (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.
   ___default["default"].extend(this, {
@@ -16039,11 +16039,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__namespace.Component {
   graphieDivRef = /*#__PURE__*/React__namespace.createRef();
@@ -16074,7 +16074,7 @@ class Graphie extends React__namespace.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();
@@ -16218,7 +16218,7 @@ class Graphie extends React__namespace.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;
@@ -18405,7 +18405,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) => {
@@ -18416,9 +18416,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 => {
@@ -18445,9 +18442,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
@@ -20958,7 +20952,7 @@ class Tooltip extends React__namespace.Component {
 
 /* eslint-disable react/sort-comp */
 const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$3
+  captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
 class InputWithExamples extends React__namespace.Component {
   static defaultProps = {
@@ -21016,7 +21010,7 @@ class InputWithExamples extends React__namespace.Component {
     // Add useful props required for MATH and TEXT modes
     ___default["default"].extend(inputProps, {
       onChange: this.props.onChange,
-      onTouchStart: captureScratchpadTouchStart$3
+      onTouchStart: captureScratchpadTouchStart$2
     });
 
     // And add final props that are MATH- and TEXT-specific
@@ -23044,7 +23038,7 @@ var ChoiceNoneAbove$1 = /*#__PURE__*/React__namespace.forwardRef((props, ref) =>
 })));
 
 const {
-  captureScratchpadTouchStart: captureScratchpadTouchStart$2
+  captureScratchpadTouchStart: captureScratchpadTouchStart$1
 } = Util;
 
 // exported for tests
@@ -23296,7 +23290,7 @@ const BaseRadio = function (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__namespace.createElement(Element, _extends({}, elementProps, {
       ref: ref
     })));
@@ -26841,9 +26835,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
@@ -26858,8 +26852,8 @@ class ImageWidget extends React__namespace.Component {
     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: "",
@@ -27677,7 +27671,7 @@ var Interactive = {
 };
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-const defaultBackgroundImage$2 = {
+const defaultBackgroundImage$1 = {
   url: null
 };
 
@@ -27713,7 +27707,7 @@ class Graph extends React__namespace.Component {
     gridStep: [1, 1],
     snapStep: [0.5, 0.5],
     markings: "graph",
-    backgroundImage: defaultBackgroundImage$2,
+    backgroundImage: defaultBackgroundImage$1,
     showProtractor: false,
     showRuler: false,
     rulerLabel: "",
@@ -27981,7 +27975,7 @@ class Graph extends React__namespace.Component {
  */
 const {
   eq: eq$1,
-  deepEq: deepEq$3
+  deepEq: deepEq$2
 } = Util;
 
 // This should really be a readonly tuple of [number, number]
@@ -28094,7 +28088,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 = ___default["default"].zip(sides1, sides);
       const factors = ___default["default"].map(sidePairs, function (pair) {
         return pair[0] / pair[1];
@@ -28188,11 +28182,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:
@@ -28249,7 +28243,7 @@ class InteractiveGraph extends React__namespace.Component {
     labels: ["x", "y"],
     range: [[-10, 10], [-10, 10]],
     step: [1, 1],
-    backgroundImage: defaultBackgroundImage$1,
+    backgroundImage: defaultBackgroundImage,
     markings: "graph",
     showTooltips: false,
     showProtractor: false,
@@ -29842,7 +29836,7 @@ class InteractiveGraph extends React__namespace.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,
@@ -29858,7 +29852,7 @@ class InteractiveGraph extends React__namespace.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,
@@ -29867,7 +29861,7 @@ class InteractiveGraph extends React__namespace.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,
@@ -29886,7 +29880,7 @@ class InteractiveGraph extends React__namespace.Component {
         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,
@@ -29909,7 +29903,7 @@ class InteractiveGraph extends React__namespace.Component {
           /* exact */
           guess.sort();
           correct.sort();
-          match = deepEq$2(guess, correct);
+          match = deepEq$1(guess, correct);
         }
         if (match) {
           return {
@@ -29925,7 +29919,7 @@ class InteractiveGraph extends React__namespace.Component {
         guess = ___default["default"].invoke(guess, "sort").sort();
         // @ts-expect-error - TS2345 - Argument of type '(readonly Coord[])[] | undefined' is not assignable to parameter of type 'Collection<any>'.
         correct = ___default["default"].invoke(correct, "sort").sort();
-        if (deepEq$2(guess, correct)) {
+        if (deepEq$1(guess, correct)) {
           return {
             type: "points",
             earned: 1,
@@ -29938,7 +29932,7 @@ class InteractiveGraph extends React__namespace.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 {
@@ -29969,7 +29963,7 @@ class InteractiveGraph extends React__namespace.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'.
@@ -31108,7 +31102,7 @@ const AnswerPill = props => {
       id: idFactory.get("perseus-label-image-widget-answer-pill"),
       onClick: correct ? undefined : onClick,
       ref: ref,
-      style: [style, popperStyle, styles$h.relative, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
+      style: [style, popperStyle, styles$h.pill, correct && styles$h.correct, incorrect && styles$h.incorrect, (focused || hovered) && BringToFront]
     }, /*#__PURE__*/React__namespace.createElement(Renderer, {
       content: answerString,
       inline: true
@@ -31122,6 +31116,11 @@ const styles$h = aphrodite.StyleSheet.create({
   },
   incorrect: {
     backgroundColor: Color__default["default"].offBlack64
+  },
+  pill: {
+    // Reset the Pill's default height in order to account
+    // for multi-line pills.
+    height: "auto"
   }
 });
 
@@ -33127,7 +33126,7 @@ var Matcher$1 = {
 
 const {
   firstNumericalParse,
-  captureScratchpadTouchStart: captureScratchpadTouchStart$1
+  captureScratchpadTouchStart
 } = Util;
 const toNumericString = KhanMath.toNumericString;
 const getNumericFormat = KhanMath.getNumericFormat;
@@ -33200,7 +33199,7 @@ class NumberInput extends React__namespace.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
     }));
@@ -33326,7 +33325,7 @@ class NumberInput extends React__namespace.Component {
 // Type imports
 
 const {
-  assert: assert$4
+  assert: assert$3
 } = InteractiveUtil;
 const {
   stringArrayOfSize
@@ -33360,12 +33359,12 @@ const getDefaultPath$1 = function () {
 };
 const getRowFromPath$1 = function (path) {
   // 'path' should be a (row, column) pair
-  assert$4(___default["default"].isArray(path) && path.length === 2);
+  assert$3(___default["default"].isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath$1 = function (path) {
   // 'path' should be a (row, column) pair
-  assert$4(___default["default"].isArray(path) && path.length === 2);
+  assert$3(___default["default"].isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath$1 = function (path) {
@@ -34866,7 +34865,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";
@@ -35142,7 +35141,7 @@ class NumberLine extends React__namespace.Component {
     const snapX = props.tickStep / props.snapDivisions;
     let x = bound(numLinePosition, left, right);
     x = left + kmath.number.roundTo(x - left, snapX);
-    assert$3(___default["default"].isFinite(x));
+    assert$2(___default["default"].isFinite(x));
     return x;
   };
 
@@ -38249,7 +38248,7 @@ var PassageRefTarget$1 = {
 
 /* eslint-disable react/no-unsafe */
 const {
-  deepEq: deepEq$1
+  deepEq
 } = Util;
 class Plotter extends React__namespace.Component {
   // @ts-expect-error - TS2564 - Property 'shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
@@ -39042,7 +39041,7 @@ class Plotter extends React__namespace.Component {
 }
 ___default["default"].extend(Plotter, {
   validate: function (guess, rubric) {
-    if (deepEq$1(guess, rubric.starting)) {
+    if (deepEq(guess, rubric.starting)) {
       return {
         type: "invalid",
         message: null
@@ -39050,7 +39049,7 @@ ___default["default"].extend(Plotter, {
     }
     return {
       type: "points",
-      earned: deepEq$1(guess, rubric.correct) ? 1 : 0,
+      earned: deepEq(guess, rubric.correct) ? 1 : 0,
       total: 1,
       message: null
     };
@@ -39412,7 +39411,7 @@ class InfoTip extends React__namespace.Component {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, react/no-unsafe, react/sort-comp */
 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 {
@@ -39424,7 +39423,7 @@ const {
   MovablePoint,
   MovableLine
 } = Graphie;
-const defaultBoxSize$1 = 400;
+const defaultBoxSize = 400;
 const maxSampleSize = 1000;
 class Histogram extends React__namespace.Component {
   static propTypes = {
@@ -39437,7 +39436,7 @@ class Histogram extends React__namespace.Component {
     data: null,
     xAxisLabel: "Proportion (%)",
     yAxisLabel: "Number of times seen",
-    box: [defaultBoxSize$1, defaultBoxSize$1]
+    box: [defaultBoxSize, defaultBoxSize]
   };
   UNSAFE_componentWillReceiveProps(nextProps) {
     // Reset the threshold if the range has changed
@@ -39940,7 +39939,7 @@ class Simulator extends React__namespace.Component {
     return true;
   };
   focusInputPath = path => {
-    assert$2(path.length > 0);
+    assert$1(path.length > 0);
     const inputID = ___default["default"].head(path);
     // eslint-disable-next-line react/no-string-refs
     const inputComponent = this.refs[inputID];
@@ -39948,7 +39947,7 @@ class Simulator extends React__namespace.Component {
     inputComponent.focus();
   };
   blurInputPath = path => {
-    assert$2(path.length > 0);
+    assert$1(path.length > 0);
     const inputID = ___default["default"].head(path);
     // eslint-disable-next-line react/no-string-refs
     const inputComponent = this.refs[inputID];
@@ -39956,17 +39955,17 @@ class Simulator extends React__namespace.Component {
     inputComponent.blur();
   };
   getDOMNodeForPath = path => {
-    assert$2(path.length > 0);
+    assert$1(path.length > 0);
     const inputID = ___default["default"].head(path);
     // eslint-disable-next-line react/no-string-refs
     return ReactDOM__default["default"].findDOMNode(this.refs[inputID]);
   };
   getGrammarTypeForPath = path => {
-    assert$2(path.length > 0);
+    assert$1(path.length > 0);
     return "number";
   };
   setInputValue = (path, newValue, cb) => {
-    assert$2(path.length > 0);
+    assert$1(path.length > 0);
     const inputID = ___default["default"].head(path);
     const capitalizedID = inputID.charAt(0).toUpperCase() + inputID.slice(1);
     const functionName = "handle" + capitalizedID + "Change";
@@ -40126,7 +40125,7 @@ var Sorter$1 = {
 };
 
 const {
-  assert: assert$1
+  assert
 } = InteractiveUtil;
 
 /* Input handling: Maps a (row, column) pair to a unique ref used by React,
@@ -40140,12 +40139,12 @@ const getDefaultPath = function () {
 };
 const getRowFromPath = function (path) {
   // 'path' should be a (row, column) pair
-  assert$1(___default["default"].isArray(path) && path.length === 2);
+  assert(___default["default"].isArray(path) && path.length === 2);
   return +path[0];
 };
 const getColumnFromPath = function (path) {
   // 'path' should be a (row, column) pair
-  assert$1(___default["default"].isArray(path) && path.length === 2);
+  assert(___default["default"].isArray(path) && path.length === 2);
   return +path[1];
 };
 const getRefForPath = function (path) {
@@ -40419,2415 +40418,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 ___default["default"].object(___default["default"].map(object, function (value, key) {
-    return [key, value[subKey]];
-  }));
-}
-const defaultGraphProps = function (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 = kmath.vector.subtract(point, dilationCenter);
-  const pvScaled = kmath.vector.scale(pv, scale);
-  const transformedPoint = kmath.vector.add(dilationCenter, pvScaled);
-  return transformedPoint;
-}
-
-// TODO(jack): i18nize this
-function stringFromDecimal(number) {
-  return String(KhanMath.roundTo(9, number));
-}
-function stringFromFraction(number) {
-  const frac = KhanMath.toFraction(number, kmath.number.DEFAULT_TOLERANCE);
-  if (frac[1] === 1) {
-    return stringFromDecimal(number);
-  }
-  return stringFromDecimal(frac[0]) + "/" + stringFromDecimal(frac[1]);
-}
-function texFromPoint(point) {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React__namespace.createElement(TeX, {
-    key: "("
-  }, "("), stringFromDecimal(point[0]), /*#__PURE__*/React__namespace.createElement(TeX, {
-    key: ","
-  }, ", {}"), stringFromDecimal(point[1]), /*#__PURE__*/React__namespace.createElement(TeX, {
-    key: ")"
-  }, ")")];
-}
-function texFromVector(vector) {
-  const {
-    TeX
-  } = getDependencies();
-  return [/*#__PURE__*/React__namespace.createElement(TeX, {
-    key: "<"
-  }, i18n__namespace.doNotTranslate("\\langle")), stringFromDecimal(vector[0]), /*#__PURE__*/React__namespace.createElement(TeX, {
-    key: ","
-  }, ", {}"), stringFromDecimal(vector[1]), /*#__PURE__*/React__namespace.createElement(TeX, {
-    key: ">"
-  }, i18n__namespace.doNotTranslate("\\rangle"))];
-}
-function texFromAngleDeg(angleDeg) {
-  return stringFromDecimal(angleDeg) + DEGREE_SIGN;
-}
-function orderInsensitiveCoordsEqual(coords1, coords2) {
-  coords1 = ___default["default"].clone(coords1).sort(kmath.point.compare);
-  coords2 = ___default["default"].clone(coords2).sort(kmath.point.compare);
-  return ___default["default"].all(___default["default"].map(coords1, function (coord1, i) {
-    const coord2 = coords2[i];
-    return kmath.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 ___default["default"].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(___default["default"].last(transforms))) {
-      return ___default["default"].initial(transforms);
-    }
-    return transforms;
-  },
-  _appendAndCollapseLastTwo: function (transformList, newTransform) {
-    if (!transformList.length) {
-      return [newTransform];
-    }
-    const collapsed = TransformOps.collapse(___default["default"].last(transformList), newTransform);
-    return ___default["default"].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 (!___default["default"].isArray(collapsed)) {
-        collapsed = [collapsed];
-      }
-      // Add types to all transforms in the answer
-      ___default["default"].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__default["default"]({
-    displayName: "ListItem",
-    render: function () {
-      if (this.props.mode === "dynamic") {
-        return /*#__PURE__*/React__namespace.createElement("div", null, TransformOps.toTeX(this.props.transform));
-      }
-      if (this.props.mode === "interactive") {
-        const TransformClass = Transformations[this.props.transform.type].Input;
-        return /*#__PURE__*/React__namespace.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 ___default["default"].extend({
-          type: this.props.transform.type
-        },
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.transform.value());
-      }
-      return this.props.transform;
-    },
-    handleChange: ___default["default"].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 = ___default["default"].head(path);
-      return transform.refs[ref];
-    },
-    focus: function () {
-      // eslint-disable-next-line react/no-string-refs
-      const transform = this.refs.transform;
-      const path = ___default["default"].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["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__namespace._("Translate"),
-    nounName: i18n__namespace._("Translation"),
-    lowerNounName: i18n__namespace._("translation"),
-    apply: function (transform) {
-      return function (coord) {
-        return kmath.vector.add(coord, transform.vector);
-      };
-    },
-    isValid: function (transform) {
-      return ___default["default"].isFinite(transform.vector[0]) && ___default["default"].isFinite(transform.vector[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.vector[0] === null && transform.vector[1] === null;
-    },
-    isNoOp: function (transform) {
-      return kmath.vector.equal(transform.vector, [0, 0]);
-    },
-    collapse: function (transform1, transform2) {
-      return {
-        vector: kmath.vector.add(transform1.vector, transform2.vector)
-      };
-    },
-    toTeX: function (transform) {
-      // I18N: As in the command, "Translation by <3, 1>"
-      return i18n__namespace.$_("Translation by %(vector)s", {
-        vector: texFromVector(transform.vector)
-      });
-    },
-    Input: class extends React__namespace.Component {
-      state = {
-        vector: this.props.vector || [null, null]
-      };
-      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__namespace.createElement(TeX, {
-          key: "<"
-        }, i18n__namespace.doNotTranslate("\\langle")), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "x"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "x"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "y"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "y"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ">"
-        }, i18n__namespace.doNotTranslate("\\rangle"))];
-        return /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace.$_("Translation by %(vector)s", {
-          vector: vector
-        }));
-      }
-      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 */
-      setInputValue = (path, value, cb) => {
-        const id = ___default["default"].first(path);
-        const vector = ___default["default"].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);
-        });
-      };
-      getInputPaths = () => {
-        return [["x"], ["y"]];
-      };
-    }
-  },
-  rotation: {
-    // I18N: As in the command, "Rotate the polygon"
-    verbName: i18n__namespace._("Rotate"),
-    nounName: i18n__namespace._("Rotation"),
-    lowerNounName: i18n__namespace._("rotation"),
-    apply: function (transform) {
-      return function (coord) {
-        return kmath.point.rotateDeg(coord, transform.angleDeg, transform.center);
-      };
-    },
-    isValid: function (transform) {
-      return ___default["default"].isFinite(transform.angleDeg) && ___default["default"].isFinite(transform.center[0]) && ___default["default"].isFinite(transform.center[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.angleDeg === null && transform.center[0] === null && transform.center[1] === null;
-    },
-    isNoOp: function (transform) {
-      return kmath.number.equal(transform.angleDeg, 0);
-    },
-    collapse: function (transform1, transform2) {
-      if (!kmath.point.equal(transform1.center, transform2.center)) {
-        return false;
-      }
-      return {
-        center: transform1.center,
-        angleDeg: transform1.angleDeg + transform2.angleDeg
-      };
-    },
-    toTeX: function (transform) {
-      return i18n__namespace.$_("Rotation by %(degrees)s about %(point)s", {
-        degrees: texFromAngleDeg(transform.angleDeg),
-        point: texFromPoint(transform.center)
-      });
-    },
-    Input: class extends React__namespace.Component {
-      state = {
-        center: this.props.center || [null, null],
-        angleDeg: this.props.angleDeg || null
-      };
-      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__namespace.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "centerX"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "centerX"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "centerY"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "centerY"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const degrees = [/*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "angleDeg"),
-          onBlur: ___default["default"].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__namespace.$_("Rotation about %(point)s by %(degrees)s", {
-          point,
-          degrees
-        });
-        return /*#__PURE__*/React__namespace.createElement("div", null, text);
-      }
-      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 */
-      setInputValue = (path, value, cb) => {
-        const id = ___default["default"].first(path);
-        let angleDeg = ___default["default"].clone(this.state.angleDeg);
-        const center = ___default["default"].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);
-        });
-      };
-      getInputPaths = () => {
-        return [["centerX"], ["centerY"], ["angleDeg"]];
-      };
-    }
-  },
-  reflection: {
-    // I18N: As in the command, "Reflect the polygon"
-    verbName: i18n__namespace._("Reflect"),
-    nounName: i18n__namespace._("Reflection"),
-    lowerNounName: i18n__namespace._("reflection"),
-    apply: function (transform) {
-      return function (coord) {
-        return kmath.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 ___default["default"].all(___default["default"].flatten(transform.line), ___default["default"].isFinite) && !kmath.point.equal(transform.line[0], transform.line[1]);
-    },
-    isEmpty: function (transform) {
-      return ___default["default"].all(___default["default"].flatten(transform.line), ___default["default"].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 (!kmath.line.equal(transform1.line, transform2.line)) {
-        return false;
-      }
-      return [];
-    },
-    toTeX: function (transform) {
-      const point1 = transform.line[0];
-      const point2 = transform.line[1];
-      return i18n__namespace.$_("Reflection over the line from %(point1)s to %(point2)s", {
-        point1: texFromPoint(point1),
-        point2: texFromPoint(point2)
-      });
-    },
-    Input: class extends React__namespace.Component {
-      state = {
-        line: this.props.line || [[null, null], [null, null]]
-      };
-      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__namespace.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "x1"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "x1"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "y1"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "y1"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const point2 = [/*#__PURE__*/React__namespace.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "x2"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "x2"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "y2"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "y2"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        return /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace.$_("Reflection over the line from " + "%(point1)s to %(point2)s", {
-          point1,
-          point2
-        }));
-      }
-      changePoint = (i, j, val, cb) => {
-        const line = ___default["default"].map(this.state.line, ___default["default"].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);
-        });
-      };
-      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 */
-      setInputValue = (path, value, cb) => {
-        const id = ___default["default"].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);
-      };
-      getInputPaths = () => {
-        return [["x1"], ["y1"], ["x2"], ["y2"]];
-      };
-    }
-  },
-  dilation: {
-    // I18N: As in the command, "Dilate the polygon"
-    verbName: i18n__namespace._("Dilate"),
-    nounName: i18n__namespace._("Dilation"),
-    lowerNounName: i18n__namespace._("dilation"),
-    apply: function (transform) {
-      return function (coord) {
-        return dilatePointFromCenter(coord, transform.center, transform.scale);
-      };
-    },
-    isValid: function (transform) {
-      return ___default["default"].isFinite(transform.scale) && ___default["default"].isFinite(transform.center[0]) && ___default["default"].isFinite(transform.center[1]);
-    },
-    isEmpty: function (transform) {
-      return transform.scale === null && transform.center[0] === null && transform.center[1] === null;
-    },
-    isNoOp: function (transform) {
-      return kmath.number.equal(transform.scale, 1);
-    },
-    collapse: function (transform1, transform2) {
-      if (!kmath.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__namespace.$_("Dilation of scale %(scale)s about %(point)s", {
-        scale: scaleString,
-        point: texFromPoint(transform.center)
-      });
-    },
-    Input: class extends React__namespace.Component {
-      state = {
-        center: this.props.center || [null, null],
-        scale: this.props.scale || null
-      };
-      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__namespace.createElement(TeX, {
-          key: "("
-        }, "("), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "x"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "x"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ","
-        }, ", {}"), /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "y"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "y"),
-          keypadElement: this.props.keypadElement
-        }), /*#__PURE__*/React__namespace.createElement(TeX, {
-          key: ")"
-        }, ")")];
-        const scale = /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "scale"),
-          onBlur: ___default["default"].partial(this.props.onBlur, "scale"),
-          keypadElement: this.props.keypadElement
-        });
-        return /*#__PURE__*/React__namespace.createElement("div", null, i18n__namespace.$_("Dilation about %(point)s by %(scale)s", {
-          point,
-          scale
-        }));
-      }
-      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 */
-      setInputValue = (path, value, cb) => {
-        const id = ___default["default"].first(path);
-        let scale = this.state.scale;
-        const center = ___default["default"].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);
-        });
-      };
-      getInputPaths = () => {
-        return [["x"], ["y"], ["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 = ___default["default"].map(options.shape.coords, function (coord) {
-      let isMoving = false;
-      let previousCoord = coord;
-      const onMove = function (x, y) {
-        if (!isMoving) {
-          previousCoord = currentPoint.coord;
-          isMoving = true;
-        }
-        let moveVector = kmath.vector.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) {
-          ___default["default"].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(kmath.vector.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 = kmath.vector.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 () {
-        // 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 = kmath.vector.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);
-      ___default["default"].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 = ___default["default"].extend({}, options, typeOptions[i]);
-      return ShapeTypes._addType(graphie, type, points, shapeOptions);
-    });
-    const updateFuncs = ___default["default"].filter(___default["default"].pluck(shapes, "update"), ___default["default"].identity);
-    const update = function () {
-      ___default["default"].invoke(updateFuncs, "call");
-    };
-    const removeFuncs = ___default["default"].filter(___default["default"].pluck(shapes, "remove"), ___default["default"].identity);
-    const remove = function () {
-      ___default["default"].invoke(removeFuncs, "call");
-    };
-    const getOptions = function () {
-      return ___default["default"].map(shapes, function (shape) {
-        if (shape.getOptions) {
-          return shape.getOptions();
-        }
-        return {};
-      });
-    };
-    const toJSON = function () {
-      const coords = ___default["default"].map(points, function (pt) {
-        if (___default["default"].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 ___default["default"].all(___default["default"].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 (!___default["default"].isArray(types)) {
-      types = [types];
-    }
-    return ___default["default"].map(types, function (type) {
-      if (type === "polygon") {
-        return "polygon-3";
-      }
-      return type;
-    });
-  },
-  defaultOptions: function (types) {
-    return ___default["default"].map(types, function (type) {
-      const typeDefaultOptions = ShapeTypes._forType(type).defaultOptions;
-      return ___default["default"].extend({}, typeDefaultOptions);
-    });
-  },
-  _forType: function (type) {
-    const baseType = type.split("-")[0];
-    return ShapeTypes[baseType];
-  },
-  _mapTypes: function (types, points, func, context) {
-    return ___default["default"].map(types, function (type, i) {
-      const pointCount = ShapeTypes.getPointCountForType(type);
-      const currentPoints = ___default["default"].first(points, pointCount);
-      points = ___default["default"].rest(points, pointCount);
-      return func.call(context, type, currentPoints, i);
-    });
-  },
-  _addType: function (graphie, type, points, options) {
-    const lineCoords = ___default["default"].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(___default["default"].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(___default["default"].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 (!___default["default"].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: ___default["default"].identity
-      };
-      const redrawPerim = function () {
-        const coord0 = points[0].coord || points[0];
-        const coord1 = points[1].coord || points[1];
-        const radius = kmath.point.distanceToPoint(coord0, coord1);
-        // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
-        perimeter.remove();
-        perimeter = graphie.circle(coord0, radius, ___default["default"].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: kmath.line.equal
-  },
-  lineSegment: {
-    equal: orderInsensitiveCoordsEqual
-  },
-  angle: {
-    equal: function (points1, points2) {
-      if (!kmath.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'.
-      kmath.ray.equal(line1_0, line2_0) && kmath.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'.
-      kmath.ray.equal(line1_0, line2_2) && kmath.ray.equal(line1_2, line2_0);
-      return equalUnflipped || equalFlipped;
-    },
-    defaultOptions: {
-      reflex: false
-    }
-  },
-  circle: {
-    equal: function (points1, points2) {
-      const radius1 = kmath.point.distanceToPoint(points1[0], points1[1]);
-      const radius2 = kmath.point.distanceToPoint(points2[0], points2[1]);
-      return kmath.point.equal(points1[0], points2[0]) && kmath.number.equal(radius1, radius2);
-    }
-  },
-  point: {
-    equal: kmath.point.equal
-  }
-};
-const TransformationListItem = TransformOps.ListItem;
-class TransformationList extends React__namespace.Component {
-  render() {
-    if (this.props.mode === "static") {
-      return /*#__PURE__*/React__namespace.createElement("span", null); // don't render anything
-    }
-
-    const transformationList = ___default["default"].map(this.props.transformations, function (transform, i) {
-      return /*#__PURE__*/React__namespace.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: ___default["default"].partial(this.props.onFocus, "" + i)
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onBlur: ___default["default"].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__namespace.createElement("div", {
-      className: "perseus-transformation-list"
-    }, transformationList);
-  }
-  _transformationRefs = () => {
-    return ___default["default"].times(this.props.transformations.length, i => {
-      // eslint-disable-next-line react/no-string-refs
-      return this.refs["transformation" + i];
-    });
-  };
-  value = () => {
-    return ___default["default"].invoke(this._transformationRefs(), "value");
-  };
-  handleChange = (changed, callback) => {
-    this.props.onChange(this.value(), callback);
-  };
-  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'.
-      ___default["default"].last(transformationRefs).focus();
-    }
-  };
-}
-class ToolButton extends React__namespace.Component {
-  render() {
-    const classes = this.props.toggled ? "simple-button exercise-orange toggled highlighted-tool-button" : "simple-button";
-    return /*#__PURE__*/React__namespace.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__namespace.Component {
-  state = {
-    selected: null
-  };
-  render() {
-    const tools = ___default["default"].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__namespace.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__namespace.createElement("div", {
-      className: "transformer-tools-bar"
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: "simple-button-group"
-    }, tools), /*#__PURE__*/React__namespace.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__namespace.createElement(InlineIcon, iconUndo), " " + i18n__namespace._("Undo")), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "clear"
-    }));
-  }
-  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
-      });
-    }
-  };
-}
-class AddTransformBar extends React__namespace.Component {
-  render() {
-    const tools = ___default["default"].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__namespace.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__namespace.createElement(InlineIcon, iconPlus), " ", tool.nounName);
-      }
-    }, this);
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "transformer-tools-bar"
-    }, tools, /*#__PURE__*/React__namespace.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__namespace.createElement(InlineIcon, iconUndo), " " + i18n__namespace._("Undo")), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "clear"
-    }));
-  }
-  changeSelected = tool => {
-    if (tool) {
-      this.props.addTool(tool);
-    }
-  };
-}
-
-// there's no transform in the exports
-
-class Transformer extends React__namespace.Component {
-  // @ts-expect-error - TS2564 - Property 'tools' has no initializer and is not definitely assigned in the constructor.
-
-  // @ts-expect-error - TS2564 - Property 'transformations' has no initializer and is not definitely assigned in the constructor.
-
-  // This is not the same as TransformerShape
-
-  static defaultProps = ___default["default"].defaults({
-    transformations: []
-  }, defaultTransformerProps);
-  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 = ___default["default"].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__namespace.createElement("div", {
-      style: {
-        width: graph.box[0]
-      }
-    }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      className: "perseus-widget " + "perseus-widget-transformer"
-    }, /*#__PURE__*/React__namespace.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__namespace._("Add transformations below:"), this.props.graphMode === "static" && [/*#__PURE__*/React__namespace.createElement("br", {
-      key: "static-br"
-    }), /*#__PURE__*/React__namespace.createElement("em", {
-      key: "static-nomove"
-    }, " ", i18n__namespace._("Note: For this question, the shape will not move."), " ")], interactiveToolsMode && toolsBar, /*#__PURE__*/React__namespace.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);
-    }
-  }
-  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;
-  };
-  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();
-  };
-  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: ___default["default"].clone(this.props.tools.translation),
-      rotation: ___default["default"].clone(this.props.tools.rotation),
-      reflection: ___default["default"].clone(this.props.tools.reflection),
-      dilation: ___default["default"].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
-   */
-  setTransformations = transformations => {
-    this.resetCoords();
-    this.transformations = ___default["default"].clone(transformations);
-    ___default["default"].each(this.transformations, this.applyTransform);
-  };
-
-  // the polygon that we transform
-  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
-      }
-    });
-  };
-  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();
-      });
-    }
-  };
-  removeTool = toolId => {
-    if (this.currentTool) {
-      this.currentTool.remove();
-    }
-    this.currentTool = null;
-  };
-  addTranslationTool = () => {
-    const self = this;
-    this.shape?.remove();
-    this.addTransformerShape(this.shape?.toJSON(), /* translatable */true);
-    return {
-      remove: function () {
-        self.shape?.remove();
-        self.addTransformerShape(self.shape?.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'.
-  snapCoord = coord => {
-    const graphie = this.graphie();
-    return ___default["default"].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]'.
-  normalizeReflectionCoords = messyCoords => {
-    // @ts-expect-error - TS2345 - Argument of type 'Point' is not assignable to parameter of type 'Coord'.
-    const midpoint = this.snapCoord(kmath.line.midpoint(messyCoords));
-    const origDirectionPolar = kmath.vector.polarDegFromCart(kmath.vector.subtract(messyCoords[0], messyCoords[1]));
-    const direction = kmath.vector.cartFromPolarDeg(1, KhanMath.roundToNearest(45, origDirectionPolar[1]));
-    const coords = ___default["default"].map([-1, 1], function (directionCoefficient) {
-      const coord = kmath.vector.add(midpoint, kmath.vector.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;
-  };
-  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 () {
-      self.changeTool("reflection", {
-        coords: ___default["default"].pluck(reflectPoints, "coord")
-      });
-    };
-    const coords = this.normalizeReflectionCoords(options.coords);
-
-    // The points defining the line of reflection; hidden from the
-    // user.
-    const reflectPoints = ___default["default"].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: ___default["default"].pluck(reflectPoints, "coord")
-        });
-        if (reflectRotateHandle) {
-          // flip the rotation handle
-          // @ts-expect-error - TS2339 - Property 'setCoord' does not exist on type 'never'.
-          reflectRotateHandle.setCoord(kmath.vector.add(reflectButton.coord, kmath.vector.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 = kmath.vector.polarDegFromCart(kmath.vector.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
-    $__default["default"](reflectLine).on("move", function () {
-      reflectButton.update();
-      $__default["default"](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) {
-      $__default["default"](reflectRotateHandle).on("move", function () {
-        const rotateHandleApprox = self.snapCoord(
-        // @ts-expect-error - TS2531 - Object is possibly 'null'.
-        reflectRotateHandle.coord);
-        const rotateVector = kmath.vector.subtract(rotateHandleApprox, reflectButton.coord);
-        const flipped = reflectButton.isFlipped() ? 1 : 0;
-        reflectPoints[flipped].setCoord(kmath.vector.add(reflectButton.coord, kmath.vector.rotateDeg(rotateVector, 90)));
-        reflectPoints[1 - flipped].setCoord(kmath.vector.add(reflectButton.coord, kmath.vector.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)
-   */
-  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);
-  };
-  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 () {
-        self.rotateHandle?.remove();
-        self.rotatePoint?.remove();
-      }
-    };
-  };
-  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 = function () {
-      if (origOnMoveEnd) {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        origOnMoveEnd(args);
-      }
-      self.changeTool("dilation", {
-        coord: self.dilationCircle.centerPoint.coord
-      });
-    };
-    return {
-      remove: function () {
-        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'.
-  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
-  doTransform = (transform, callback) => {
-    this.applyTransform(transform);
-    this.addTransform(transform, callback);
-  };
-
-  // apply a transform to our polygon (without modifying our transformation
-  // list)
-  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
-  applyCoordTransformation = pointTransform => {
-    ___default["default"].each(this.shape.points, function (point) {
-      // @ts-expect-error - TS2349 - This expression is not callable.
-      const newCoord = pointTransform(point.coord);
-      point.setCoord(newCoord);
-    });
-    this.shape?.update();
-  };
-  resetCoords = () => {
-    const startCoords = this.props.starting.shape.coords;
-    ___default["default"].each(this.shape.points, function (point, i) {
-      point.setCoord(startCoords[i]);
-    });
-    this.shape?.update();
-  };
-
-  // Remove the last transformation
-  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: ___default["default"].initial(this.props.transformations)
-      });
-    }
-  };
-  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
-  addTransform = (transform, callback) => {
-    this.transformations = TransformOps.append(this.transformations, transform);
-    this.props.onChange({
-      transformations: ___default["default"].clone(this.transformations)
-    },
-    // @ts-expect-error - TS2345 - Argument of type '((arg1: any) => unknown) | undefined' is not assignable to parameter of type '(() => unknown) | undefined'.
-    callback);
-  };
-  changeTool = (tool, changes) => {
-    const newTools = ___default["default"].clone(this.props.tools);
-    newTools[tool] = ___default["default"].extend({}, this.props.tools[tool], changes);
-    this.tools[tool] = ___default["default"].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();
-  };
-  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'.
-  getCoords = () => {
-    const startCoords = this.props.starting.shape.coords;
-    const transforms = this.props.transformations;
-    return ___default["default"].reduce(transforms, function (coords, transform) {
-      return ___default["default"].map(coords, TransformOps.apply(transform));
-    }, startCoords);
-  };
-  getEditorJSON = () => {
-    const json = ___default["default"].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;
-  };
-  getUserInput = () => {
-    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.shape?.getOptions()
-      }
-    };
-  };
-
-  /* InputPath API */
-
-  _handleFocus = (() => {
-    var _this = this;
-    return function () {
-      for (var _len2 = arguments.length, path = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        path[_key2] = arguments[_key2];
-      }
-      _this.props.onFocus(path);
-    };
-  })();
-  _handleBlur = (() => {
-    var _this2 = this;
-    return function () {
-      for (var _len3 = arguments.length, path = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        path[_key3] = arguments[_key3];
-      }
-      _this2.props.onBlur(path);
-    };
-  })();
-  _getTransformationForID = transformationID => {
-    // Returns the 'transformation' component corresponding to a given ID
-    const refPath = ["transformationList", "transformation" + transformationID];
-
-    // Follow the path of references
-    let component = this;
-    ___default["default"].each(refPath, ref => {
-      // @ts-expect-error - TS2322 - Type 'ReactInstance' is not assignable to type 'this'.
-      component = component.refs[ref];
-    });
-    return component;
-  };
-  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 = [];
-    ___default["default"].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 = ___default["default"].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;
-  };
-  _passToInner = function (functionName, path) {
-    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 = ___default["default"].rest(path);
-
-    // Pass arguments down to appropriate 'transformation' component
-    const transformationID = ___default["default"].head(path);
-    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-    const caller = this._getTransformationForID(transformationID);
-    for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
-      args[_key4 - 2] = arguments[_key4];
-    }
-    return caller[functionName](innerPath, ...args);
-  };
-  focus = () => {
-    // Just focus the first showing input
-    const inputs = this.getInputPaths();
-    if (inputs.length > 0) {
-      this.focusInputPath(inputs[0]);
-      return true;
-    }
-    return false;
-  };
-  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);
-  };
-  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);
-  };
-  setInputValue = (path, value, cb) => {
-    assert(path.length >= 2);
-    return this._passToInner("setInputValue", path, value, cb);
-  };
-  getDOMNodeForPath = path => {
-    assert(path.length >= 2);
-    return this._passToInner("getDOMNodeForPath", path);
-  };
-  getGrammarTypeForPath = path => {
-    assert(path.length >= 2);
-    return this._passToInner("getGrammarTypeForPath", path);
-  };
-  static validate(guess, rubric) {
-    // Check for any required transformations
-    for (const type in Transformations) {
-      if (rubric.tools[type].required) {
-        const isUsed = ___default["default"].any(___default["default"].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__namespace._("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__namespace._("Use the interactive graph to define a " + "correct transformation.")
-      };
-    }
-    return {
-      type: "points",
-      earned: 0,
-      total: 1,
-      message: null
-    };
-  }
-}
-var Transformer$1 = {
-  name: "transformer",
-  displayName: "Transformer (deprecated)",
-  hidden: true,
-  widget: Transformer
-};
-
 var hubble = {exports: {}};
 
 (function (module, exports) {
@@ -44053,7 +41643,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
@@ -44097,7 +41687,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "18.0.0";
+const libVersion = "19.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45542,8 +43132,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -46668,10 +44256,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");
 };
 
 /**
@@ -47131,7 +44716,6 @@ exports.Renderer = Renderer;
 exports.ServerItemRenderer = ref;
 exports.SizingUtils = sizingUtils;
 exports.TableWidget = Table$1;
-exports.TransformerWidget = Transformer$1;
 exports.Util = Util;
 exports.WIDGET_PROP_DENYLIST = denylist;
 exports.WidgetJsonifyDeprecated = WidgetJsonifyDeprecated;