@khanacademy/perseus 19.1.6 → 19.1.8

package/dist/index.js

@@ -284,7 +284,11 @@ class MathInput extends React__namespace.Component {
         display: "flex",
         padding: 1
       },
-      onClick: () => {
+      onClick: e => {
+        // Prevent the click into the input from registering
+        // so that the keypad popover doesn't close when
+        // switching focus to the input.
+        e.stopPropagation();
         const mathField = this.mathField();
         if (!mathField) {
           return;
@@ -3999,10 +4003,10 @@ class FixedToResponsive extends React__namespace.Component {
 
 /* Local helper methods. */
 
-function getKey$1(eventName, id) {
+function getKey$2(eventName, id) {
   return eventName + ":" + id;
 }
-function getEventName$1(key) {
+function getEventName$2(key) {
   return key.split(":")[0];
 }
 const MovableHelperMethods = {
@@ -4083,7 +4087,7 @@ const MovableHelperMethods = {
 
     // If there's an existing handler, replace it by using its index in
     // `this.state[eventName]`; otherwise, add this handler to the end
-    const key = getKey$1(eventName, id);
+    const key = getKey$2(eventName, id);
     const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
     this.state[eventName][index] = func;
   },
@@ -4095,7 +4099,7 @@ const MovableHelperMethods = {
    */
   unlisten: function (eventName, id) {
     this._listenerMap = this._listenerMap || {};
-    const key = getKey$1(eventName, id);
+    const key = getKey$2(eventName, id);
     const index = this._listenerMap[key];
     if (index !== undefined) {
       // Remove handler from list of event handlers and listenerMap
@@ -4105,7 +4109,7 @@ const MovableHelperMethods = {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = ___default["default"].keys(this._listenerMap);
       ___default["default"].each(keys, function (key) {
-        if (getEventName$1(key) === eventName &&
+        if (getEventName$2(key) === eventName &&
         // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
         this._listenerMap[key] > index) {
           // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
@@ -4233,22 +4237,13 @@ const InteractiveUtil = {
   }
 };
 
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var raphael = {exports: {}};
-
 /*!
  * Raphael 1.5.2 - JavaScript Vector Library
  *
  * Copyright (c) 2010 Dmitry Baranovskiy (http://raphaeljs.com)
  * Licensed under the MIT (http://raphaeljs.com/license.html) license.
  */
-
-(function () {
+var Raphael$1 = (function () {
   var setAttr;
   if ("".trim) {
     setAttr = function (node, att, value) {
@@ -8425,7 +8420,7 @@ var raphael = {exports: {}};
   };
   R.el = elproto;
   R.st = Set[proto];
-  raphael.exports = R;
+  return R;
 })();
 
 /**
@@ -8713,7 +8708,7 @@ class Graphie$1 {
   constructor(el) {
     this.el = el;
     $__default["default"](el).css("position", "relative");
-    this.raphael = raphael.exports(el);
+    this.raphael = Raphael$1(el);
 
     // For a sometimes-reproducible IE8 bug; doesn't affect SVG browsers at all
     $__default["default"](el).children("div").css("position", "absolute");
@@ -9072,7 +9067,7 @@ class Graphie$1 {
       // wrapper.setAttribute("data-graphie-type", "ellipse");
 
       // Create Raphael canvas
-      const localRaphael = raphael.exports(wrapper, width, height);
+      const localRaphael = Raphael$1(wrapper, width, height);
       const visibleShape = localRaphael.ellipse(width / 2, height / 2, scaledRadii[0], scaledRadii[1]);
       return {
         wrapper: wrapper,
@@ -9139,7 +9134,7 @@ class Graphie$1 {
     });
 
     // Create Raphael canvas
-    const localRaphael = raphael.exports(wrapper, width, height);
+    const localRaphael = Raphael$1(wrapper, width, height);
 
     // Calculate path
     const visibleShape = localRaphael.path(createPath(points));
@@ -9202,7 +9197,7 @@ class Graphie$1 {
     });
 
     // Create Raphael canvas
-    const localRaphael = raphael.exports(wrapper, width, height);
+    const localRaphael = Raphael$1(wrapper, width, height);
 
     // Calculate path
     const path = "M" + start[0] + " " + start[1] + " " + "L" + end[0] + " " + end[1];
@@ -9426,7 +9421,7 @@ class Graphie$1 {
   postprocessDrawingResult(result) {
     // Bad heuristic for recognizing Raphael elements and sets
     const type = result.constructor.prototype;
-    if (type === raphael.exports.el || type === raphael.exports.st) {
+    if (type === Raphael$1.el || type === Raphael$1.st) {
       result.attr(this.currentStyle);
       if (this.currentStyle.arrows) {
         result = this.addArrowheads(result);
@@ -9444,7 +9439,7 @@ class Graphie$1 {
   }
   addArrowheads(path) {
     const type = path.constructor.prototype;
-    if (type === raphael.exports.el) {
+    if (type === Raphael$1.el) {
       if (path.type === "path" && typeof path.arrowheadsDrawn === "undefined") {
         const w = path.attr("stroke-width");
         const s = 0.6 + 0.4 * w;
@@ -9472,7 +9467,7 @@ class Graphie$1 {
         set.push(head);
         return set;
       }
-    } else if (type === raphael.exports.st) {
+    } else if (type === Raphael$1.st) {
       for (let i = 0, l = path.items.length; i < l; i++) {
         this.addArrowheads(path.items[i]);
       }
@@ -9546,6 +9541,9 @@ class Graphie$1 {
   getMouseCoord(event) {
     throw new Error("getMouseCoord is a stub, and is not implemented");
   }
+
+  // This is a stub that's overridden in interactive.ts
+  addMouseLayer(options) {}
 }
 const labelDirections = {
   center: [-0.5, -0.5],
@@ -10657,7 +10655,7 @@ ___default["default"].extend(GraphUtils.Graphie.prototype, {
       setDrawingAreaAvailable: function () {}
     }, options);
     const mouselayerZIndex = 2;
-    graph.mouselayer = raphael.exports(graph.raphael.canvas.parentNode, graph.xpixels, graph.ypixels);
+    graph.mouselayer = Raphael$1(graph.raphael.canvas.parentNode, graph.xpixels, graph.ypixels);
     $__default["default"](graph.mouselayer.canvas).css("z-index", mouselayerZIndex);
     if (options.onClick || options.onMouseDown || options.onMouseMove || options.onMouseOver || options.onMouseOut) {
       const canvasClickTarget = graph.mouselayer.rect(0, 0, graph.xpixels, graph.ypixels).attr({
@@ -14019,7 +14017,7 @@ class Movable {
 
     // If there's an existing handler, replace it by using its index in
     // `this.state[eventName]`; otherwise, add this handler to the end
-    const key = getKey(eventName, id);
+    const key = getKey$1(eventName, id);
     const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
     this.state[eventName][index] = func;
   }
@@ -14032,7 +14030,7 @@ class Movable {
    */
   unlisten(eventName, id) {
     this._listenerMap = this._listenerMap || {};
-    const key = getKey(eventName, id);
+    const key = getKey$1(eventName, id);
     const index = this._listenerMap[key];
     if (index !== undefined) {
       // Remove handler from list of event handlers and listenerMap
@@ -14042,7 +14040,7 @@ class Movable {
       // Re-index existing events: if they occur after `index`, decrement
       const keys = ___default["default"].keys(this._listenerMap);
       keys.forEach(key => {
-        if (getEventName(key) === eventName && this._listenerMap[key] > index) {
+        if (getEventName$1(key) === eventName && this._listenerMap[key] > index) {
           this._listenerMap[key]--;
         }
       });
@@ -14076,10 +14074,10 @@ class Movable {
     return this.state.mouseTarget;
   }
 }
-function getKey(eventName, id) {
+function getKey$1(eventName, id) {
   return eventName + ":" + id;
 }
-function getEventName(key) {
+function getEventName$1(key) {
   return key.split(":")[0];
 }
 
@@ -15032,103 +15030,53 @@ const DEFAULT_STATE$1 = {
   mouseTarget: null,
   touchOffset: null
 };
+// TODO(benchristel): this is a memory leak. We add items to
+// tooltipResetFunctions, but never remove them.
 const tooltipResetFunctions = [];
-const MovablePoint$5 = function (graphie, movable, options) {
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  ___default["default"].extend(this, {
-    graphie,
-    movable,
-    state: {
-      // Set here because this must be unique for each instance
-      id: ___default["default"].uniqueId("movablePoint")
-    }
-  });
+class MovablePoint$5 {
+  // @ts-expect-error - TS2564: Property 'prevState' has no initializer and is not definitely assigned in the constructor.
 
-  // We only set DEFAULT_STATE once, here
-  // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-  this.modify(___default["default"].extend({}, DEFAULT_STATE$1, options));
-};
-___default["default"].extend(MovablePoint$5, MovablePointOptions);
-InteractiveUtil.createGettersFor(MovablePoint$5, ___default["default"].extend({}, DEFAULT_PROPS$1, DEFAULT_STATE$1));
-InteractiveUtil.addMovableHelperMethodsTo(MovablePoint$5);
-___default["default"].extend(MovablePoint$5.prototype, {
-  cloneState: function () {
-    return ___default["default"].extend(this.movable.cloneState(), this.state);
-  },
-  _createDefaultState: function () {
-    return ___default["default"].extend({
-      id: this.state.id
-    }, normalizeOptions$1(
-    // Defaults are copied from MovablePointOptions.*.standard
-    // These defaults are set here instead of DEFAULT_PROPS/STATE
-    // because they:
-    //    - are objects, not primitives (and need a deeper copy)
-    //    - they don't need getters created for them
-    // TODO(jack): Consider "default" once we es3ify perseus
-    objective_.pluck(MovablePointOptions, "standard")
-
-    // We only update props here, because we want things on state to
-    // be persistent, and updated appropriately in modify()
-    ), DEFAULT_PROPS$1);
-  },
-  /**
-   * Resets the object to its state as if it were constructed with
-   * `options` originally. state not on DEFAULT_PROPS is maintained.
-   *
-   * Analogous to React.js's replaceProps
-   */
-  modify: function (options) {
+  _listenerMap = {};
+  constructor(graphie, movable, options) {
+    this.graphie = graphie;
+    this.movable = movable;
+    // @ts-expect-error - TS2740: Type '{ id: string; }' is missing the following properties from type 'State': add, added, constraints, coord, and 19 more.
+    this.state = {
+      id: ___default["default"].uniqueId("movablePoint")
+    };
+    this.modify({
+      ...DEFAULT_STATE$1,
+      ...options
+    });
+  }
+  modify(options) {
     this.update(___default["default"].extend(this._createDefaultState(), options));
-  },
-  /**
-   * Displays a tooltip above the point, replacing any previous contents. If
-   * there is no tooltip initialized, adds the tooltip.
-   *
-   * If the type of contents is string, the contents will be rendered with
-   * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
-   * be appended inside the tooltip.
-   */
-  _showTooltip: function (contents) {
-    if (!this._tooltip) {
-      this._tooltip = document.createElement("div");
-      this._tooltip.className = "tooltip-content";
-      this.state.visibleShape.wrapper.className = "tooltip";
-      this.state.visibleShape.wrapper.appendChild(this._tooltip);
+  }
+  _createDefaultState() {
+    return {
+      id: this.state.id,
+      ...normalizeOptions$1(
+      // Defaults are copied from MovablePointOptions.*.standard
+      // These defaults are set here instead of DEFAULT_PROPS/STATE
+      // because they:
+      //    - are objects, not primitives (and need a deeper copy)
+      //    - they don't need getters created for them
+      // TODO(jack): Consider "default" once we es3ify perseus
+      objective_.pluck(MovablePointOptions, "standard")
+      // We only update props here, because we want things on state to
+      // be persistent, and updated appropriately in modify()
+      ),
 
-      // Only one tooltip should be displayed at a time, so store a list
-      // of all the tooltips initialized.
-      tooltipResetFunctions.push(() => {
-        if (this.state.added) {
-          this._hideTooltip();
-        }
-      });
-    }
-    if (this._tooltip.firstChild) {
-      this._tooltip.removeChild(this._tooltip.firstChild);
-    }
-    this.state.visibleShape.wrapper.className = "tooltip visible";
-    this._tooltip.appendChild(document.createElement("span"));
-    if (typeof contents === "string") {
-      processMath(this._tooltip.firstChild, contents, false);
-    } else if (typeof contents === "function") {
-      contents(this._tooltip.firstChild);
-    } else {
-      this._tooltip.firstChild.appendChild(contents);
-    }
-  },
-  _hideTooltip: function () {
-    if (this._tooltip) {
-      // Without the visible class, tooltips have display: none set
-      this.state.visibleShape.wrapper.className = "tooltip";
-    }
-  },
-  /**
-   * Adjusts constructor parameters without changing previous settings
-   * for any option not specified
-   *
-   * Analogous to React.js's setProps
-   */
-  update: function (options) {
+      ...DEFAULT_PROPS$1
+    };
+  }
+  cloneState() {
+    return {
+      ...this.movable.cloneState(),
+      ...this.state
+    };
+  }
+  update(options) {
     const self = this;
     const graphie = self.graphie;
     const state = ___default["default"].extend(self.state, normalizeOptions$1(options));
@@ -15278,11 +15226,15 @@ ___default["default"].extend(MovablePoint$5.prototype, {
           showTrashTooltip();
           const content = svgElem.getElementsByClassName("tooltip-content")[0];
           content.style.filter = "none";
+
+          // @ts-expect-error - this._tooltip.firstChild is possibly null
           this._tooltip.firstChild.addEventListener("touchstart", e => {
             // Prevent creation of a new point when the event is
             // propagated up the DOM.
             e.stopPropagation();
           }, true);
+
+          // @ts-expect-error - this._tooltip.firstChild is possibly null
           this._tooltip.firstChild.addEventListener("touchend", e => {
             // Remove the point and prevent creation of a
             // new point.
@@ -15304,6 +15256,7 @@ ___default["default"].extend(MovablePoint$5.prototype, {
 
     // Trigger an add event if this hasn't been added before
     if (!state.added) {
+      // @ts-expect-error - type {} is missing properties from State
       self.prevState = {};
       self._fireEvent(state.add, self.cloneState(), self.prevState);
       state.added = true;
@@ -15315,38 +15268,191 @@ ___default["default"].extend(MovablePoint$5.prototype, {
 
     // Trigger a modify event
     self._fireEvent(state.modify, self.cloneState(), self.prevState);
-  },
-  remove: function () {
-    this.state.added = false;
-    this._fireEvent(this.state.remove);
-    if (this.movable) {
-      this.movable.remove();
-    }
-    // TODO(jack): This should really be moved off of
-    // movablePoint.state and only kept on movable.state
-    this.state.mouseTarget = null;
-  },
-  constrain: function () {
+  }
+  draw() {
+    const currState = this.cloneState();
+    this._fireEvent(this.state.draw, currState, this.prevState);
+    this.prevState = currState;
+  }
+  constrain() {
     const result = this._applyConstraints(this.coord(), this.coord());
     if (kmath.point.is(result)) {
       this.setCoord(result);
     }
     return result !== false;
-  },
-  setCoord: function (coord) {
+  }
+
+  /**
+   * Fire an onSomething type event to all functions in listeners
+   */
+  _fireEvent(listeners) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    for (const listener of listeners) {
+      listener.call(this, ...args);
+    }
+  }
+
+  /**
+   * Combine the array of constraints functions
+   * Returns either an [x, y] coordinate or false
+   */
+  _applyConstraints(current, previous, extraOptions) {
+    let skipRemaining = false;
+    return this.state.constraints.reduce((memo, constraint) => {
+      // A move that has been cancelled won't be propagated to later
+      // constraints calls
+      if (memo === false) {
+        return false;
+      }
+      if (skipRemaining) {
+        return memo;
+      }
+      const result = constraint.call(this, memo, previous, {
+        onSkipRemaining: () => {
+          skipRemaining = true;
+        },
+        ...extraOptions
+      });
+      if (result === false) {
+        // Returning false cancels the move
+        return false;
+      }
+      if (kmath.point.is(result, 2)) {
+        // Returning a coord from constraints overrides the move
+        return result;
+      }
+      if (result === true || result == null) {
+        // Returning true or undefined allow the move to occur
+        return memo;
+      }
+      // Anything else is an error
+      throw new PerseusError("Constraint returned invalid result: " + result, Errors.Internal);
+    }, current);
+  }
+
+  /**
+   * Displays a tooltip above the point, replacing any previous contents. If
+   * there is no tooltip initialized, adds the tooltip.
+   *
+   * If the type of contents is string, the contents will be rendered with
+   * KaTeX. Otherwise, the content will be assumed to be a DOM node and will
+   * be appended inside the tooltip.
+   */
+  _showTooltip(contents) {
+    if (!this._tooltip) {
+      this._tooltip = document.createElement("div");
+      this._tooltip.className = "tooltip-content";
+      this.state.visibleShape.wrapper.className = "tooltip";
+      this.state.visibleShape.wrapper.appendChild(this._tooltip);
+
+      // Only one tooltip should be displayed at a time, so store a list
+      // of all the tooltips initialized.
+      tooltipResetFunctions.push(() => {
+        if (this.state.added) {
+          this._hideTooltip();
+        }
+      });
+    }
+    if (this._tooltip.firstChild) {
+      this._tooltip.removeChild(this._tooltip.firstChild);
+    }
+    this.state.visibleShape.wrapper.className = "tooltip visible";
+    this._tooltip.appendChild(document.createElement("span"));
+    if (typeof contents === "string") {
+      // @ts-expect-error - this._tooltip.firstChild is possibly 'null'.
+      processMath(this._tooltip.firstChild, contents, false);
+    } else if (typeof contents === "function") {
+      contents(this._tooltip.firstChild);
+    } else {
+      // @ts-expect-error - this._tooltip.firstChild is possibly 'null'.
+      this._tooltip.firstChild.appendChild(contents);
+    }
+  }
+  _hideTooltip() {
+    if (this._tooltip) {
+      // Without the visible class, tooltips have display: none set
+      this.state.visibleShape.wrapper.className = "tooltip";
+    }
+  }
+  coord() {
+    return this.state.coord;
+  }
+  setCoord(coord) {
     assert$6(kmath.point.is(coord, 2));
     this.state.coord = ___default["default"].clone(coord);
     this.draw();
-  },
-  setCoordConstrained: function (coord) {
+  }
+  setCoordConstrained(coord) {
     assert$6(kmath.point.is(coord, 2));
     const result = this._applyConstraints(coord, this.coord());
     if (result !== false) {
       this.state.coord = ___default["default"].clone(result);
       this.draw();
     }
-  },
-  moveTo: function (coord) {
+  }
+
+  /**
+   * Add a listener to any event: startMove, constraints, onMove, onMoveEnd,
+   * etc. If a listener is already bound to the given eventName and id, then
+   * it is overwritten by func.
+   *
+   * eventName: the string name of the event to listen to. one of:
+   *   "onMoveStart", "onMove", "onMoveEnd", "draw", "remove"
+   *
+   * id: a string id that can be used to remove this event at a later time
+   *   note: adding multiple listeners with the same id is undefined behavior
+   *
+   * func: the function to call when the event happens, which is called
+   *   with the event's standard parameters [usually (coord, prevCoord) or
+   *   (state, prevState)]
+   */
+  // TODO(benchristel): listen() is duplicated in movable.ts
+  listen(eventName, id, func) {
+    this._listenerMap = this._listenerMap || {};
+
+    // If there's an existing handler, replace it by using its index in
+    // `this.state[eventName]`; otherwise, add this handler to the end
+    const key = getKey(eventName, id);
+    const index = this._listenerMap[key] = this._listenerMap[key] || this.state[eventName].length;
+    this.state[eventName][index] = func;
+  }
+
+  /**
+   * Remove a previously added listener, by the id specified in the
+   * corresponding listen() call
+   *
+   * If the given id has not been registered already, this is a no-op
+   */
+  // TODO(benchristel): I don't think unlisten is used. Delete it?
+  // TODO(benchristel): unlisten is duplicated in movable.ts
+  unlisten(eventName, id) {
+    this._listenerMap = this._listenerMap || {};
+    const key = getKey(eventName, id);
+    const index = this._listenerMap[key];
+    if (index !== undefined) {
+      // Remove handler from list of event handlers and listenerMap
+      this.state[eventName].splice(index, 1);
+      delete this._listenerMap[key];
+
+      // Re-index existing events: if they occur after `index`, decrement
+      const keys = ___default["default"].keys(this._listenerMap);
+      ___default["default"].each(keys, key => {
+        if (getEventName(key) === eventName && this._listenerMap[key] > index) {
+          this._listenerMap[key]--;
+        }
+      }, this);
+    }
+  }
+  grab(coord) {
+    // Provide an explicit touchOffset override, so that we track the user's
+    // finger when a point has been grabbed.
+    this.state.touchOffset = [0, 0];
+    this.movable.grab(coord);
+    this.moveTo(coord);
+  }
+  moveTo(coord) {
     // The caller has the option of adding an onMove() method to the
     // movablePoint object we return as a sort of event handler
     // By returning false from onMove(), the move can be vetoed,
@@ -15358,8 +15464,11 @@ ___default["default"].extend(MovablePoint$5.prototype, {
     const result = this._applyConstraints(coord, state.coord, state.onRemove ? {
       onOutOfBounds: () => {
         this.state.outOfBounds = true;
-      }
-    } : {});
+      },
+      onSkipRemaining: () => {}
+    } : {
+      onSkipRemaining: () => {}
+    });
     if (result === false) {
       return;
     }
@@ -15373,49 +15482,98 @@ ___default["default"].extend(MovablePoint$5.prototype, {
       this._fireEvent(state.onMove, state.coord, prevCoord);
       this.draw();
     }
-  },
-  // Clone these for use with raphael, which modifies the input
-  // style parameters
-  normalStyle: function () {
-    return ___default["default"].clone(this.state.normalStyle);
-  },
-  highlightStyle: function () {
-    return ___default["default"].clone(this.state.highlightStyle);
-  },
+  }
+  remove() {
+    this.state.added = false;
+    this._fireEvent(this.state.remove);
+    if (this.movable) {
+      this.movable.remove();
+    }
+    // TODO(jack): This should really be moved off of
+    // movablePoint.state and only kept on movable.state
+    this.state.mouseTarget = null;
+  }
+  pointSize() {
+    return this.state.pointSize;
+  }
+  static() {
+    return this.state.static;
+  }
+  cursor() {
+    return this.state.cursor;
+  }
+  normalStyle() {
+    return this.state.normalStyle;
+  }
+  highlightStyle() {
+    return this.state.highlightStyle;
+  }
+  shadow() {
+    return this.state.shadow;
+  }
+  tooltip() {
+    return this.state.tooltip;
+  }
+  added() {
+    return this.state.added;
+  }
+  hasMoved() {
+    return this.state.hasMoved;
+  }
+  visibleShape() {
+    return this.state.visibleShape;
+  }
+  outOfBounds() {
+    return this.state.outOfBounds;
+  }
+  mouseTarget() {
+    return this.state.mouseTarget;
+  }
+  touchOffset() {
+    return this.state.touchOffset;
+  }
+
+  /**
+   * Forwarding methods to this.movable:
+   */
+  isHovering() {
+    return this.movable.isHovering();
+  }
+  isDragging() {
+    return this.movable.isDragging();
+  }
+
   // Change z-order to back
-  toBack: function () {
+  toBack() {
     this.movable.toBack();
     if (this.state.visibleShape) {
       this.state.visibleShape.toBack();
     }
-  },
+  }
+
   // Change z-order to front
-  toFront: function () {
+  toFront() {
     if (this.state.visibleShape) {
       this.state.visibleShape.toFront();
     }
     this.movable.toFront();
-  },
-  /**
-   * Forwarding methods to this.movable:
-   */
-  isHovering: function () {
-    return this.movable.isHovering();
-  },
-  isDragging: function () {
-    return this.movable.isDragging();
-  },
-  mouseTarget: function () {
-    return this.movable.mouseTarget();
-  },
-  grab: function (coord) {
-    // Provide an explicit touchOffset override, so that we track the user's
-    // finger when a point has been grabbed.
-    this.state.touchOffset = [0, 0];
-    this.movable.grab(coord);
-    this.moveTo(coord);
   }
-});
+  static add = MovablePointOptions.add;
+  static modify = MovablePointOptions.modify;
+  static draw = MovablePointOptions.draw;
+  static remove = MovablePointOptions.remove;
+  static onMoveStart = MovablePointOptions.onMoveStart;
+  static constraints = MovablePointOptions.constraints;
+  static onMove = MovablePointOptions.onMove;
+  static onMoveEnd = MovablePointOptions.onMoveEnd;
+  static onClick = MovablePointOptions.onClick;
+}
+function getKey(eventName, id) {
+  return eventName + ":" + id;
+}
+function getEventName(key) {
+  return key.split(":")[0];
+}
 
 /* eslint-disable @babel/no-invalid-this */
 function sum(array) {
@@ -16391,11 +16549,9 @@ class Graphie extends React__namespace.Component {
     });
     // Only add the mouselayer if we actually want one.
     if (this.props.addMouseLayer) {
-      // @ts-expect-error - TS2339: Property 'addMouseLayer' does not exist on type 'Graphie'.
       graphie.addMouseLayer({
         onClick: this.props.onClick,
         onMouseDown: this.props.onMouseDown,
-        onMouseUp: this.props.onMouseUp,
         onMouseMove: this.props.onMouseMove,
         setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
       });
@@ -26430,11 +26586,7 @@ class FunctionGrapher extends React__namespace.Component {
         key: i,
         coord: coord,
         static: this.props.static,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap(), coord => {
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
           // Always enforce that this is a function
           const isFunction = ___default["default"].all(this._coords(), (otherCoord, j) => {
             return i === j || !otherCoord || !kmath.number.equal(coord[0], otherCoord[0]);
@@ -28122,22 +28274,20 @@ class Graph extends React__namespace.Component {
       // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
       // eslint-disable-next-line @babel/no-invalid-this
       this.props.onMouseDown(coord);
-    }, this) : null;
+    }, this) : undefined;
     const onMouseOver = $instructionsWrapper ? function () {
       $instructionsWrapper && $instructionsWrapper.css("opacity", invisible);
-    } : null;
+    } : undefined;
     const onMouseOut = $instructionsWrapper ? function () {
       $instructionsWrapper && $instructionsWrapper.css("opacity", visible);
-    } : null;
+    } : undefined;
     /* eslint-enable indent */
 
-    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       onClick: this.props.onClick,
       onMouseDown: onMouseDown,
       onMouseOver: onMouseOver,
       onMouseOut: onMouseOut,
-      onMouseUp: this.props.onMouseUp,
       onMouseMove: this.props.onMouseMove,
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.setDrawingAreaAvailable
@@ -28500,11 +28650,7 @@ class InteractiveGraph extends React__namespace.Component {
     const points = self.points = ___default["default"].map(coords, coord => {
       return Interactive2.addMaybeMobileMovablePoint(this, {
         coord: coord,
-        constraints: [
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.bound(),
-        // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-        Interactive2.MovablePoint.constraints.snap()],
+        constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap()],
         onMove: () => {
           const graph = ___default["default"].extend({}, self.props.graph, {
             coords: ___default["default"].invoke(points, "coord")
@@ -28575,11 +28721,7 @@ class InteractiveGraph extends React__namespace.Component {
     let pointA = null;
     pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coords[0],
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), coord => {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
         return !pointA ||
         // @ts-expect-error - TS2531 - Object is possibly 'null'.
         coord[0] !== pointB.coord()[0] &&
@@ -28595,11 +28737,7 @@ class InteractiveGraph extends React__namespace.Component {
     let pointB = null;
     pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coords[1],
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), coord => {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
         return !pointB ||
         // @ts-expect-error - TS2531 - Object is possibly 'null'.
         coord[0] !== pointA.coord()[0] &&
@@ -28615,11 +28753,7 @@ class InteractiveGraph extends React__namespace.Component {
     let pointC = null;
     pointC = this.pointC = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coords[2],
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), coord => {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
         return !pointC ||
         // @ts-expect-error - TS2531 - Object is possibly 'null'.
         coord[0] !== pointA.coord()[0] &&
@@ -28690,22 +28824,14 @@ class InteractiveGraph extends React__namespace.Component {
     let pointA = null;
     pointA = this.pointA = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coords[0],
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), coord => {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
         return !pointA || coord[0] !== pointB.coord()[0];
       }],
       onMove: onMoveHandler
     });
     const pointB = this.pointB = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coords[1],
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), coord => {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
         // @ts-expect-error - TS2339 - Property 'coord' does not exist on type 'never'.
         return !pointA || coord[0] !== pointA.coord()[0];
       }],
@@ -28786,11 +28912,7 @@ class InteractiveGraph extends React__namespace.Component {
         const coord = segmentCoords[i];
         segmentPoints.push(Interactive2.addMaybeMobileMovablePoint(this, {
           coord: coord,
-          constraints: [
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.bound(),
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.snap(), coord => {
+          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
             const otherSegment = segmentPoints[1 - i];
             if (!otherSegment) {
               // segment hasn't been defined yet
@@ -28865,11 +28987,7 @@ class InteractiveGraph extends React__namespace.Component {
     let point = null;
     point = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coord,
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(),
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap(), function (coord) {
+      constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), function (coord) {
         // TODO(jack): There ought to be a
         // MovablePoint.constraints.avoid
         // default that lets you do things like this
@@ -29144,11 +29262,7 @@ class InteractiveGraph extends React__namespace.Component {
     };
     const point = Interactive2.addMaybeMobileMovablePoint(this, {
       coord: coord,
-      constraints: [
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.bound(), snapToGrid ?
-      // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-      Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
+      constraints: [Interactive2.MovablePoint.constraints.bound(), snapToGrid ? Interactive2.MovablePoint.constraints.snap() : null, graphConstraint],
       onMoveStart: () => {
         if (this.isClickToAddPoints()) {
           this.setTrashCanVisibility(1);
@@ -29240,11 +29354,7 @@ class InteractiveGraph extends React__namespace.Component {
         const coord = segment[i];
         points.push(createPoint({
           coord: coord,
-          constraints: [
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.bound(),
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
-          Interactive2.MovablePoint.constraints.snap(), coord => {
+          constraints: [Interactive2.MovablePoint.constraints.bound(), Interactive2.MovablePoint.constraints.snap(), coord => {
             const otherPoint = points[1 - i];
             if (!otherPoint) {
               // point hasn't been defined yet
@@ -33938,7 +34048,6 @@ const Measurer = createReactClass__default["default"]({
       range: range,
       scale: scale
     });
-    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -38481,7 +38590,6 @@ class Plotter extends React__namespace.Component {
       scale: c.scale,
       isMobile: this.props.apiOptions.isMobile
     });
-    // @ts-expect-error - Property 'addMouseLayer' does not exist on type 'Graphie'.
     graphie.addMouseLayer({
       allowScratchpad: true,
       setDrawingAreaAvailable: this.props.apiOptions.setDrawingAreaAvailable
@@ -38894,7 +39002,6 @@ class Plotter extends React__namespace.Component {
       if (i > 0) {
         c.graph.lines[i] = Interactive2.addMovableLine(graphie, {
           points: [c.graph.points[i - 1], c.graph.points[i]],
-          // @ts-expect-error - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
           constraints: Interactive2.MovablePoint.constraints.fixed(),
           normalStyle: {
             stroke: KhanColors.BLUE_C,
@@ -40481,366 +40588,222 @@ var Table$1 = {
   isLintable: true
 };
 
-var hubble = {exports: {}};
-
-(function (module, exports) {
-	(function webpackUniversalModuleDefinition(root, factory) {
-	  module.exports = factory();
-	})(commonjsGlobal, function () {
-	  return (/******/function (modules) {
-	      // webpackBootstrap
-	      /******/ // The module cache
-	      /******/
-	      var installedModules = {};
-	      /******/
-	      /******/ // The require function
-	      /******/
-	      function __webpack_require__(moduleId) {
-	        /******/
-	        /******/ // Check if module is in cache
-	        /******/if (installedModules[moduleId]) {
-	          /******/return installedModules[moduleId].exports;
-	          /******/
-	        }
-	        /******/ // Create a new module (and put it into the cache)
-	        /******/
-	        var module = installedModules[moduleId] = {
-	          /******/i: moduleId,
-	          /******/l: false,
-	          /******/exports: {}
-	          /******/
-	        };
-	        /******/
-	        /******/ // Execute the module function
-	        /******/
-	        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-	        /******/
-	        /******/ // Flag the module as loaded
-	        /******/
-	        module.l = true;
-	        /******/
-	        /******/ // Return the exports of the module
-	        /******/
-	        return module.exports;
-	        /******/
-	      }
-	      /******/
-	      /******/
-	      /******/ // expose the modules object (__webpack_modules__)
-	      /******/
-	      __webpack_require__.m = modules;
-	      /******/
-	      /******/ // expose the module cache
-	      /******/
-	      __webpack_require__.c = installedModules;
-	      /******/
-	      /******/ // define getter function for harmony exports
-	      /******/
-	      __webpack_require__.d = function (exports, name, getter) {
-	        /******/if (!__webpack_require__.o(exports, name)) {
-	          /******/Object.defineProperty(exports, name, {
-	            /******/configurable: false,
-	            /******/enumerable: true,
-	            /******/get: getter
-	            /******/
-	          });
-	          /******/
-	        }
-	        /******/
-	      };
-	      /******/
-	      /******/ // getDefaultExport function for compatibility with non-harmony modules
-	      /******/
-	      __webpack_require__.n = function (module) {
-	        /******/var getter = module && module.__esModule ? /******/function getDefault() {
-	          return module['default'];
-	        } : /******/function getModuleExports() {
-	          return module;
-	        };
-	        /******/
-	        __webpack_require__.d(getter, 'a', getter);
-	        /******/
-	        return getter;
-	        /******/
-	      };
-	      /******/
-	      /******/ // Object.prototype.hasOwnProperty.call
-	      /******/
-	      __webpack_require__.o = function (object, property) {
-	        return Object.prototype.hasOwnProperty.call(object, property);
-	      };
-	      /******/
-	      /******/ // __webpack_public_path__
-	      /******/
-	      __webpack_require__.p = "";
-	      /******/
-	      /******/ // Load entry module and return exports
-	      /******/
-	      return __webpack_require__(__webpack_require__.s = 1);
-	      /******/
-	    }
-	    /************************************************************************/
-	    /******/([/* 0 */
-	    /***/function (module, exports) {
-	      var isObject = function (obj) {
-	        return obj === Object(obj);
-	      };
-	      var merge = function () {
-	        var obj = {};
-	        for (var i = 0; i < arguments.length; i++) {
-	          var source = arguments[i];
-	          if (source) {
-	            for (var prop in source) {
-	              obj[prop] = source[prop];
-	            }
-	          }
-	        }
-	        return obj;
-	      };
-	      var clone = function (obj) {
-	        if (!isObject(obj)) {
-	          return obj;
-	        }
-	        return Array.isArray(obj) ? obj.slice() : merge(obj);
-	      };
-	      module.exports = {
-	        isObject: isObject,
-	        merge: merge,
-	        clone: clone
-	      };
-
-	      /***/
-	    }, /* 1 */
-	    /***/function (module, exports, __webpack_require__) {
-	      /* TODO batch *all* mutations
-	       * idea: freeze / thaw implementations for all types
-	       * lens constructor thaws, freeze delegates to type's freeze
-	       */
-
-	      var util = __webpack_require__(0);
-	      var clone = util.clone;
-	      var isObject = util.isObject;
-	      var merge = util.merge;
-	      var arr = __webpack_require__(2);
-	      var obj = __webpack_require__(3);
-	      var str = __webpack_require__(4);
-
-	      // equivalents, without requiring it
-	      // find the implementation to use for a given object
-	      var dispatch = function (x) {
-	        if (Array.isArray(x)) {
-	          return arr;
-	        } else if (isObject(x)) {
-	          return obj;
-	        } else if (typeof x === "string") {
-	          return str;
-	        }
-	      };
-
-	      // This is underscore with a different name
-	      var lens = function (obj) {
-	        if (obj instanceof lens) {
-	          return obj;
-	        }
-	        if (!(this instanceof lens)) {
-	          return new lens(obj);
-	        }
-	        var ops = dispatch(obj);
-	        this._wrapped = ops.thaw ? ops.thaw(obj) : obj;
-	      };
-	      lens.prototype.freeze = function () {
-	        var obj = this._wrapped;
-	        var ops = dispatch(obj);
-	        return ops.freeze ? ops.freeze(obj) : obj;
-	      };
-	      lens.prototype.zoom = function (lensArr) {
-	        if (this._zoomStack === undefined) {
-	          this._zoomStack = [];
-	        }
-	        this._zoomStack.push({
-	          zoom: lensArr,
-	          wrapped: this._wrapped
-	        });
-	        this._wrapped = lens(this._wrapped).get(lensArr);
-	        return this;
-	      };
-	      lens.prototype.deZoom = function () {
-	        var frame = this._zoomStack.pop();
-	        this._wrapped = lens(frame.wrapped).set(frame.zoom, this._wrapped).freeze();
-	        return this;
-	      };
-	      lens.prototype.get = function (lensArr) {
-	        var obj = this._wrapped;
-	        for (var i = 0; i < lensArr.length; i++) {
-	          obj = dispatch(obj).get(obj, lensArr[i]);
-	        }
-	        return obj;
-	      };
-	      lens.prototype.mod = function (lensArr, f) {
-	        var obj = this._wrapped;
-	        var newObj = clone(obj);
-	        var ops = dispatch(obj);
-	        if (lensArr.length === 0) {
-	          this._wrapped = f(this._wrapped);
-	        } else if (lensArr.length === 1) {
-	          this._wrapped = ops.mod(newObj, lensArr[0], f);
-	        } else {
-	          var monocle = lensArr[0];
-	          var shortLens = lensArr.slice(1);
-
-	          // newObj = ops.mod(obj[monocle], shortLens, f);
-
-	          newObj[monocle] = lens(obj[monocle]).mod(shortLens, f).freeze();
-	          this._wrapped = newObj;
-	        }
-	        return this;
-	      };
-
-	      // TODO - move to individual files
-	      lens.prototype.merge = function (lensArr, props) {
-	        this._wrapped = lens(this._wrapped).mod(lensArr, function (oldProps) {
-	          return merge(oldProps, props);
-	        }).freeze();
-	        return this;
-	      };
-
-	      // Lens must have length >= 1 or there would be nothing to return
-	      lens.prototype.del = function (lensArr) {
-	        var obj = this._wrapped;
-	        var ops = dispatch(obj);
-	        if (lensArr.length === 1) {
-	          this._wrapped = ops.del(obj, lensArr[0]);
-	        } else {
-	          var monocle = lensArr[0];
-	          var shortLens = lensArr.slice(1);
-	          var newObj = clone(obj);
-	          newObj[monocle] = lens(obj[monocle]).del(shortLens).freeze();
-	          this._wrapped = newObj;
-	        }
-	        return this;
-	      };
-	      lens.prototype.set = function (lensArr, set) {
-	        return this.mod(lensArr, function () {
-	          return set;
-	        });
-	      };
-	      module.exports = lens;
-
-	      /***/
-	    }, /* 2 */
-	    /***/function (module, exports) {
-	      var get = function (arr, monocle) {
-	        return arr[monocle];
-	      };
-	      var set = function (arr, monocle, val) {
-	        var newArr = arr.splice();
-	        newArr[monocle] = val;
-	        return newArr;
-	      };
-	      var mod = function (arr, monocle, f) {
-	        var newArr = arr.slice();
-	        newArr[monocle] = f(arr[monocle]);
-	        return newArr;
-	      };
-	      var del = function (arr, monocle) {
-	        var newArr = arr.slice();
-	        newArr.splice(monocle, 1);
-	        return newArr;
-	      };
-
-	      /*
-	      // Lens must point to a member of an array. We'll insert into that array.
-	      lens.prototype.insertAt = function(lensArr, toInsert) {
-	          var obj = this._wrapped;
-	      
-	          var arrLens = lensArr.slice(0, -1);
-	          var arr = lens(obj).get(arrLens).slice(); // slice to copy
-	      
-	          var arrIdx = lensArr[lensArr.length-1];
-	          arr.splice(arrIdx, 0, toInsert);
-	          return lens(obj).set(arrLens, arr);
-	      };
-	      
-	      lens.prototype.insertBefore = lens.prototype.insertAt;
-	      lens.prototype.insertAfter = function(lensArr, toInsert) {
-	          var newLens = lensArr.slice();
-	          newLens[newLens.length-1] += 1;
-	          return lens(this._wrapped).insertAt(newLens, toInsert);
-	      };
-	      */
-
-	      module.exports = {
-	        get: get,
-	        set: set,
-	        mod: mod,
-	        del: del
-	      };
-
-	      /***/
-	    }, /* 3 */
-	    /***/function (module, exports, __webpack_require__) {
-	      var clone = __webpack_require__(0).clone;
-	      var get = function (obj, monocle) {
-	        return obj[monocle];
-	      };
-	      var set = function (obj, monocle, val) {
-	        var newObj = clone(obj);
-	        newObj[monocle] = val;
-	        return newObj;
-	      };
-	      var mod = function (obj, monocle, f) {
-	        var newObj = clone(obj);
-	        newObj[monocle] = f(obj[monocle]);
-	        return newObj;
-	      };
-	      var del = function (obj, monocle) {
-	        var newObj = clone(obj);
-	        delete newObj[monocle];
-	        return newObj;
-	      };
-	      module.exports = {
-	        get: get,
-	        set: set,
-	        mod: mod,
-	        del: del
-	      };
-
-	      /***/
-	    }, /* 4 */
-	    /***/function (module, exports) {
-	      var get = function (arr, monocle) {
-	        return arr[monocle];
-	      };
-	      var set = function (arr, monocle, val) {
-	        var newArr = arr.splice();
-	        newArr[monocle] = val;
-	        return newArr;
-	      };
-	      var mod = function (arr, monocle, f) {
-	        var newArr = arr.splice();
-	        newArr[monocle] = f(arr[monocle]);
-	        return newArr;
-	      };
-	      var del = function (arr, monocle) {
-	        var newArr = arr.slice();
-	        newArr.splice(monocle);
-	        return newArr;
-	      };
-	      module.exports = {
-	        get: get,
-	        set: set,
-	        mod: mod,
-	        del: del
-	      };
-
-	      /***/
-	    }
-	    /******/])
-	  );
-	});
-} (hubble));
-
-var lens = /*@__PURE__*/getDefaultExportFromCjs(hubble.exports);
+var isObject = function (obj) {
+  return obj === Object(obj);
+};
+var merge = function () {
+  var obj = {};
+  for (var i = 0; i < arguments.length; i++) {
+    var source = arguments[i];
+    if (source) {
+      for (var prop in source) {
+        obj[prop] = source[prop];
+      }
+    }
+  }
+  return obj;
+};
+var clone = function (obj) {
+  if (!isObject(obj)) {
+    return obj;
+  }
+  return Array.isArray(obj) ? obj.slice() : merge(obj);
+};
+
+/* TODO batch *all* mutations
+ * idea: freeze / thaw implementations for all types
+ * lens constructor thaws, freeze delegates to type's freeze
+ */
+
+// equivalents, without requiring it
+// find the implementation to use for a given object
+var dispatch = function (x) {
+  if (Array.isArray(x)) {
+    return arr;
+  } else if (isObject(x)) {
+    return obj;
+  } else if (typeof x === "string") {
+    return str;
+  }
+};
+
+// This is underscore with a different name
+var lens = function (obj) {
+  if (obj instanceof lens) {
+    return obj;
+  }
+  if (!(this instanceof lens)) {
+    return new lens(obj);
+  }
+  var ops = dispatch(obj);
+  this._wrapped = ops.thaw ? ops.thaw(obj) : obj;
+};
+lens.prototype.freeze = function () {
+  var obj = this._wrapped;
+  var ops = dispatch(obj);
+  return ops.freeze ? ops.freeze(obj) : obj;
+};
+lens.prototype.zoom = function (lensArr) {
+  if (this._zoomStack === undefined) {
+    this._zoomStack = [];
+  }
+  this._zoomStack.push({
+    zoom: lensArr,
+    wrapped: this._wrapped
+  });
+  this._wrapped = lens(this._wrapped).get(lensArr);
+  return this;
+};
+lens.prototype.deZoom = function () {
+  var frame = this._zoomStack.pop();
+  this._wrapped = lens(frame.wrapped).set(frame.zoom, this._wrapped).freeze();
+  return this;
+};
+lens.prototype.get = function (lensArr) {
+  var obj = this._wrapped;
+  for (var i = 0; i < lensArr.length; i++) {
+    obj = dispatch(obj).get(obj, lensArr[i]);
+  }
+  return obj;
+};
+lens.prototype.mod = function (lensArr, f) {
+  var obj = this._wrapped;
+  var newObj = clone(obj);
+  var ops = dispatch(obj);
+  if (lensArr.length === 0) {
+    this._wrapped = f(this._wrapped);
+  } else if (lensArr.length === 1) {
+    this._wrapped = ops.mod(newObj, lensArr[0], f);
+  } else {
+    var monocle = lensArr[0];
+    var shortLens = lensArr.slice(1);
+
+    // newObj = ops.mod(obj[monocle], shortLens, f);
+
+    newObj[monocle] = lens(obj[monocle]).mod(shortLens, f).freeze();
+    this._wrapped = newObj;
+  }
+  return this;
+};
+
+// TODO - move to individual files
+lens.prototype.merge = function (lensArr, props) {
+  this._wrapped = lens(this._wrapped).mod(lensArr, function (oldProps) {
+    return merge(oldProps, props);
+  }).freeze();
+  return this;
+};
+
+// Lens must have length >= 1 or there would be nothing to return
+lens.prototype.del = function (lensArr) {
+  var obj = this._wrapped;
+  var ops = dispatch(obj);
+  if (lensArr.length === 1) {
+    this._wrapped = ops.del(obj, lensArr[0]);
+  } else {
+    var monocle = lensArr[0];
+    var shortLens = lensArr.slice(1);
+    var newObj = clone(obj);
+    newObj[monocle] = lens(obj[monocle]).del(shortLens).freeze();
+    this._wrapped = newObj;
+  }
+  return this;
+};
+lens.prototype.set = function (lensArr, set) {
+  return this.mod(lensArr, function () {
+    return set;
+  });
+};
+
+// ARRAY FUNCTIONS
+
+const arr = {
+  get: function (arr, monocle) {
+    return arr[monocle];
+  },
+  set: function (arr, monocle, val) {
+    var newArr = arr.splice();
+    newArr[monocle] = val;
+    return newArr;
+  },
+  mod: function (arr, monocle, f) {
+    var newArr = arr.slice();
+    newArr[monocle] = f(arr[monocle]);
+    return newArr;
+  },
+  del: function (arr, monocle) {
+    var newArr = arr.slice();
+    newArr.splice(monocle, 1);
+    return newArr;
+  }
+};
+
+/*
+// Lens must point to a member of an array. We'll insert into that array.
+lens.prototype.insertAt = function(lensArr, toInsert) {
+    var obj = this._wrapped;
+
+    var arrLens = lensArr.slice(0, -1);
+    var arr = lens(obj).get(arrLens).slice(); // slice to copy
+
+    var arrIdx = lensArr[lensArr.length-1];
+    arr.splice(arrIdx, 0, toInsert);
+    return lens(obj).set(arrLens, arr);
+};
+
+lens.prototype.insertBefore = lens.prototype.insertAt;
+lens.prototype.insertAfter = function(lensArr, toInsert) {
+    var newLens = lensArr.slice();
+    newLens[newLens.length-1] += 1;
+    return lens(this._wrapped).insertAt(newLens, toInsert);
+};
+*/
+
+// OBJECT FUNCTIONS
+
+const obj = {
+  get: function (obj, monocle) {
+    return obj[monocle];
+  },
+  set: function (obj, monocle, val) {
+    var newObj = clone(obj);
+    newObj[monocle] = val;
+    return newObj;
+  },
+  mod: function (obj, monocle, f) {
+    var newObj = clone(obj);
+    newObj[monocle] = f(obj[monocle]);
+    return newObj;
+  },
+  del: function (obj, monocle) {
+    var newObj = clone(obj);
+    delete newObj[monocle];
+    return newObj;
+  }
+};
+
+// STRING FUNCTIONS
+
+const str = {
+  get: function (arr, monocle) {
+    return arr[monocle];
+  },
+  set: function (arr, monocle, val) {
+    var newArr = arr.splice();
+    newArr[monocle] = val;
+    return newArr;
+  },
+  mod: function (arr, monocle, f) {
+    var newArr = arr.splice();
+    newArr[monocle] = f(arr[monocle]);
+    return newArr;
+  },
+  del: function (arr, monocle) {
+    var newArr = arr.slice();
+    newArr.splice(monocle);
+    return newArr;
+  }
+};
 
 /* eslint-disable eqeqeq, @typescript-eslint/no-unused-vars */
 /*
@@ -41746,7 +41709,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "19.1.6";
+const libVersion = "19.1.8";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {