@khanacademy/perseus 31.0.1 → 32.0.0

package/dist/es/index.js

@@ -45,31 +45,23 @@ import cornersOutIcon from '@phosphor-icons/core/regular/corners-out.svg';
 import Link from '@khanacademy/wonder-blocks-link';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
 /**
@@ -532,6 +524,7 @@ class InnerMathInput extends React.Component {
       onFocus: () => this.focus(),
       onBlur: () => this.blur()
     }), /*#__PURE__*/React.createElement(Popover, {
+      rootBoundary: "document",
       opened: this.state.keypadOpen,
       onClose: () => this.closeKeypad(),
       dismissEnabled: true,
@@ -4515,16 +4508,14 @@ const InteractiveUtil = {
   }
 };
 
-function _classPrivateFieldBase(receiver, privateKey) {
-  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-    throw new TypeError("attempted to use private field on non-instance");
-  }
-  return receiver;
+function _classPrivateFieldBase(e, t) {
+  if (!{}.hasOwnProperty.call(e, t)) throw new TypeError("attempted to use private field on non-instance");
+  return e;
 }
 
 var id = 0;
-function _classPrivateFieldKey(name) {
-  return "__private_" + id++ + "_" + name;
+function _classPrivateFieldKey(e) {
+  return "__private_" + id++ + "_" + e;
 }
 
 /*!
@@ -19476,6 +19467,14 @@ class WidgetContainer extends React.Component {
     }
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.type !== nextProps.type) {
+      throw new Error("WidgetContainer can't change widget type; set a different " + "key instead to recreate the container.");
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.shouldHighlight !== nextProps.shouldHighlight || this.props.type !== nextProps.type || this.state.widgetProps !== nextState.widgetProps || this.state.sizeClass !== nextState.sizeClass;
+  }
   render() {
     let className = classNames({
       "perseus-widget-container": true,
@@ -19566,14 +19565,6 @@ class WidgetContainer extends React.Component {
       style: staticOverlayStyles
     }))));
   }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.type !== nextProps.type) {
-      throw new Error("WidgetContainer can't change widget type; set a different " + "key instead to recreate the container.");
-    }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    return this.props.shouldHighlight !== nextProps.shouldHighlight || this.props.type !== nextProps.type || this.state.widgetProps !== nextState.widgetProps || this.state.sizeClass !== nextState.sizeClass;
-  }
 }
 WidgetContainer.defaultProps = {
   linterContext: linterContextDefault
@@ -21334,7 +21325,6 @@ Tooltip.defaultProps = {
   targetContainerStyle: {}
 };
 
-/* eslint-disable react/sort-comp */
 const {
   captureScratchpadTouchStart: captureScratchpadTouchStart$2
 } = Util;
@@ -21690,7 +21680,6 @@ var TexWrangler = {
   modifyTex
 };
 
-/* eslint-disable react/sort-comp */
 const ParseTex$1 = TexWrangler.parseTex;
 const answerTypes = {
   number: {
@@ -21828,55 +21817,6 @@ class InputNumber extends React.Component {
       return [strings.yourAnswer].concat(examples);
     };
   }
-  render() {
-    if (this.props.apiOptions.customKeypad) {
-      // TODO(charlie): Support "Review Mode".
-      const input = /*#__PURE__*/React.createElement(SimpleKeypadInput
-      // eslint-disable-next-line react/no-string-refs
-      , {
-        ref: "input",
-        value: this.props.currentValue,
-        keypadElement: this.props.keypadElement,
-        onChange: this.handleChange,
-        onFocus: this._handleFocus,
-        onBlur: this._handleBlur
-      });
-      if (this.props.rightAlign) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "perseus-input-right-align"
-        }, input);
-      }
-      return input;
-    }
-    // HACK(johnsullivan): Create a function with shared logic between
-    // this and NumericInput.
-    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
-    const rubric = this.props.reviewModeRubric;
-
-    // Note: This is _very_ similar to what `numeric-input.jsx` does. If
-    // you modify this, double-check if you also need to modify that
-    // component.
-    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
-    // Unanswered
-    if (rubric && !this.props.currentValue) {
-      inputStyles.push(styles$A.answerStateUnanswered);
-    }
-    return /*#__PURE__*/React.createElement(InputWithExamples
-    // eslint-disable-next-line react/no-string-refs
-    , {
-      ref: "input",
-      value: this.props.currentValue,
-      onChange: this.handleChange,
-      style: inputStyles,
-      examples: this.examples(),
-      shouldShowExamples: this.shouldShowExamples(),
-      onFocus: this._handleFocus,
-      onBlur: this._handleBlur,
-      id: this.props.widgetId,
-      disabled: this.props.apiOptions.readOnly,
-      linterContext: this.props.linterContext
-    });
-  }
   static validate(state, rubric, strings, onInputError = () => {}) {
     if (rubric.answerType == null) {
       rubric.answerType = "number";
@@ -21932,6 +21872,55 @@ class InputNumber extends React.Component {
     }
     return answerString;
   }
+  render() {
+    if (this.props.apiOptions.customKeypad) {
+      // TODO(charlie): Support "Review Mode".
+      const input = /*#__PURE__*/React.createElement(SimpleKeypadInput
+      // eslint-disable-next-line react/no-string-refs
+      , {
+        ref: "input",
+        value: this.props.currentValue,
+        keypadElement: this.props.keypadElement,
+        onChange: this.handleChange,
+        onFocus: this._handleFocus,
+        onBlur: this._handleBlur
+      });
+      if (this.props.rightAlign) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "perseus-input-right-align"
+        }, input);
+      }
+      return input;
+    }
+    // HACK(johnsullivan): Create a function with shared logic between
+    // this and NumericInput.
+    // TODO(jeremy): Deprecate this widget and prefer numeric-input.
+    const rubric = this.props.reviewModeRubric;
+
+    // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+    // you modify this, double-check if you also need to modify that
+    // component.
+    const inputStyles = [styles$A.default, this.props.size === "small" ? styles$A.small : null, this.props.rightAlign ? styles$A.rightAlign : styles$A.leftAlign];
+    // Unanswered
+    if (rubric && !this.props.currentValue) {
+      inputStyles.push(styles$A.answerStateUnanswered);
+    }
+    return /*#__PURE__*/React.createElement(InputWithExamples
+    // eslint-disable-next-line react/no-string-refs
+    , {
+      ref: "input",
+      value: this.props.currentValue,
+      onChange: this.handleChange,
+      style: inputStyles,
+      examples: this.examples(),
+      shouldShowExamples: this.shouldShowExamples(),
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      id: this.props.widgetId,
+      disabled: this.props.apiOptions.readOnly,
+      linterContext: this.props.linterContext
+    });
+  }
 }
 InputNumber.contextType = PerseusI18nContext;
 InputNumber.defaultProps = {
@@ -22393,7 +22382,6 @@ var NumericInput$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/sort-comp */
 const EN_DASH$1 = "\u2013";
 class PassageRef extends React.Component {
   constructor(..._args) {
@@ -22445,9 +22433,32 @@ class PassageRef extends React.Component {
       return PassageRef.validate(this.getUserInput(), rubric);
     };
   }
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
+  componentDidMount() {
+    // TODO(scottgrant): This is a hack to remove the deprecated call to
+    // this.isMounted() but is still considered an anti-pattern.
+    this._isMounted = true;
+    this._deferredUpdateRange();
+    this._throttledUpdateRange = _.throttle(this._deferredUpdateRange, 500);
+    window.addEventListener("resize", this._throttledUpdateRange);
+  }
   shouldComponentUpdate(nextProps, nextState) {
     return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
   }
+  componentDidUpdate() {
+    this._deferredUpdateRange();
+  }
+  componentWillUnmount() {
+    window.removeEventListener("resize", this._throttledUpdateRange);
+    this._isMounted = false;
+  }
   render() {
     const {
       strings
@@ -22481,29 +22492,6 @@ class PassageRef extends React.Component {
       className: "perseus-sr-only"
     }, this.state.content));
   }
-  componentDidMount() {
-    // TODO(scottgrant): This is a hack to remove the deprecated call to
-    // this.isMounted() but is still considered an anti-pattern.
-    this._isMounted = true;
-    this._deferredUpdateRange();
-    this._throttledUpdateRange = _.throttle(this._deferredUpdateRange, 500);
-    window.addEventListener("resize", this._throttledUpdateRange);
-  }
-  componentDidUpdate() {
-    this._deferredUpdateRange();
-  }
-  componentWillUnmount() {
-    window.removeEventListener("resize", this._throttledUpdateRange);
-    this._isMounted = false;
-  }
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 PassageRef.contextType = PerseusI18nContext;
 PassageRef.defaultProps = {
@@ -24443,6 +24431,40 @@ class Categorizer extends React.Component {
       return Categorizer.validate(this.getUserInput(), rubric, this.context.strings);
     };
   }
+  static validate(userInput, rubric, strings) {
+    let completed = true;
+    let allCorrect = true;
+    rubric.values.forEach((value, i) => {
+      if (userInput.values[i] == null) {
+        completed = false;
+      }
+      if (userInput.values[i] !== value) {
+        allCorrect = false;
+      }
+    });
+    if (!completed) {
+      return {
+        type: "invalid",
+        message: strings.invalidSelection
+      };
+    }
+    return {
+      type: "points",
+      earned: allCorrect ? 1 : 0,
+      total: 1,
+      message: null
+    };
+  }
+  static getUserInputFromProps(props) {
+    return WidgetJsonifyDeprecated.getUserInputFromProps(props);
+  }
+  onChange(itemNum, catNum) {
+    const values = [...this.props.values];
+    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
+    values[itemNum] = catNum;
+    this.change("values", values);
+    this.props.trackInteraction();
+  }
   render() {
     const self = this;
 
@@ -24519,40 +24541,6 @@ class Categorizer extends React.Component {
       className: extraClassNames + " " + css(...inlineStyles)
     }, table);
   }
-  onChange(itemNum, catNum) {
-    const values = [...this.props.values];
-    // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
-    values[itemNum] = catNum;
-    this.change("values", values);
-    this.props.trackInteraction();
-  }
-  static validate(userInput, rubric, strings) {
-    let completed = true;
-    let allCorrect = true;
-    rubric.values.forEach((value, i) => {
-      if (userInput.values[i] == null) {
-        completed = false;
-      }
-      if (userInput.values[i] !== value) {
-        allCorrect = false;
-      }
-    });
-    if (!completed) {
-      return {
-        type: "invalid",
-        message: strings.invalidSelection
-      };
-    }
-    return {
-      type: "points",
-      earned: allCorrect ? 1 : 0,
-      total: 1,
-      message: null
-    };
-  }
-  static getUserInputFromProps(props) {
-    return WidgetJsonifyDeprecated.getUserInputFromProps(props);
-  }
 }
 
 // TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
@@ -25062,8 +25050,6 @@ var Dropdown$1 = {
   transform: optionsTransform
 };
 
-/* eslint-disable react/sort-comp */
-
 // transform = _.identity
 
 function mediaQueryIsMatched(mediaQuery) {
@@ -26820,6 +26806,34 @@ class Grapher extends React.Component {
       }
     };
   }
+  static validate(state, rubric) {
+    return validate$1(state, rubric);
+  }
+  static getUserInputFromProps(props) {
+    return props.plot;
+  }
+  _getGridConfig(options) {
+    return options.step.map((step, i) => {
+      return Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
+    });
+  }
+  _calculateMobileTickStep(gridStep, step, ranges) {
+    const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);
+
+    // According to the graphInit documentation in graphie.js, tickStep is
+    // relative to the grid units so we need to adjust all values by the
+    // grid step.
+    tickStep[0] = tickStep[0] / gridStep[0];
+    tickStep[1] = tickStep[1] / gridStep[1];
+    return tickStep;
+  }
+  simpleValidate(rubric) {
+    return validate$1(this.getUserInput(), rubric);
+  }
+  getUserInput() {
+    return Grapher.getUserInputFromProps(this.props);
+  }
+  focus() {}
   render() {
     const type = this.props.plot.type;
     const coords = this.props.plot.coords;
@@ -26870,34 +26884,6 @@ class Grapher extends React.Component {
     };
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FunctionGrapher, grapherProps), this.props.availableTypes.length > 1 && typeSelector);
   }
-  _getGridConfig(options) {
-    return options.step.map((step, i) => {
-      return Util.gridDimensionConfig(step, options.range[i], options.box[i], options.gridStep[i]);
-    });
-  }
-  _calculateMobileTickStep(gridStep, step, ranges) {
-    const tickStep = Util.constrainedTickStepsFromTickSteps(step, ranges);
-
-    // According to the graphInit documentation in graphie.js, tickStep is
-    // relative to the grid units so we need to adjust all values by the
-    // grid step.
-    tickStep[0] = tickStep[0] / gridStep[0];
-    tickStep[1] = tickStep[1] / gridStep[1];
-    return tickStep;
-  }
-  simpleValidate(rubric) {
-    return validate$1(this.getUserInput(), rubric);
-  }
-  getUserInput() {
-    return Grapher.getUserInputFromProps(this.props);
-  }
-  focus() {}
-  static validate(state, rubric) {
-    return validate$1(state, rubric);
-  }
-  static getUserInputFromProps(props) {
-    return props.plot;
-  }
 }
 Grapher.defaultProps = DEFAULT_GRAPHER_PROPS;
 const propTransform$2 = editorProps => {
@@ -27243,7 +27229,6 @@ var Iframe$1 = {
   hidden: true
 };
 
-/* eslint-disable react/sort-comp */
 const defaultBoxSize = 400;
 const defaultRange = [0, 10];
 const defaultBackgroundImage$2 = {
@@ -27270,6 +27255,14 @@ class ImageWidget extends React.Component {
     };
     this.focus = () => {};
   }
+  static validate(userInput, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   // no-op
 
   render() {
@@ -27401,14 +27394,6 @@ class ImageWidget extends React.Component {
       }
     }, title, image, caption);
   }
-  static validate(userInput, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 ImageWidget.contextType = PerseusI18nContext;
 ImageWidget.defaultProps = {
@@ -27596,6 +27581,14 @@ class Interaction extends React.Component {
       return Interaction.validate(this.getUserInput(), rubric);
     };
   }
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   UNSAFE_componentWillReceiveProps(nextProps) {
     // HACK(michaelpolyak): This widget is not wired to use the Perseus
     // `onChange` callback to save user changes. Perseus re-rendering of the
@@ -27941,14 +27934,6 @@ class Interaction extends React.Component {
       }
     }, this));
   }
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
 }
 Interaction.defaultProps = {
   graph: {
@@ -29548,6 +29533,11 @@ class NumberInput extends React.Component {
       $(ReactDOM__default.findDOMNode(this.refs.input)).val(toNumericString(val, format));
     };
   }
+  componentDidUpdate(prevProps) {
+    if (!number.equal(this.getValue(), this.props.value)) {
+      this._setValue(this.props.value, this.state.format);
+    }
+  }
   render() {
     let classes = classNames({
       "number-input": true,
@@ -29579,11 +29569,6 @@ class NumberInput extends React.Component {
       value: undefined
     }));
   }
-  componentDidUpdate(prevProps) {
-    if (!number.equal(this.getValue(), this.props.value)) {
-      this._setValue(this.props.value, this.state.format);
-    }
-  }
 }
 NumberInput.contextType = PerseusI18nContext;
 NumberInput.propTypes = {
@@ -29811,12 +29796,6 @@ const ItemExtras = [
 
 // prettier-ignore
 
-// prettier-ignore
-
-// prettier-ignore
-
-// prettier-ignore
-
 //prettier-ignore
 
 // A background image applied to various widgets.
@@ -30217,6 +30196,9 @@ const GraphLockedLayer = props => {
 };
 
 const actions = {
+  global: {
+    deleteIntent
+  },
   angle: {
     movePoint
   },
@@ -30234,7 +30216,10 @@ const actions = {
   },
   pointGraph: {
     movePoint,
-    addPoint
+    addPoint,
+    removePoint,
+    focusPoint,
+    blurPoint
   },
   polygon: {
     movePoint,
@@ -30255,6 +30240,12 @@ const actions = {
     movePoint
   }
 };
+const DELETE_INTENT = "delete-intent";
+function deleteIntent() {
+  return {
+    type: DELETE_INTENT
+  };
+}
 const MOVE_LINE = "move-line";
 function moveLine(itemIndex, delta) {
   return {
@@ -30270,6 +30261,26 @@ function addPoint(location) {
     location
   };
 }
+const REMOVE_POINT = "remove-point";
+function removePoint(index) {
+  return {
+    type: REMOVE_POINT,
+    index
+  };
+}
+const FOCUS_POINT = "focus-point";
+function focusPoint(index) {
+  return {
+    type: FOCUS_POINT,
+    index
+  };
+}
+const BLUR_POINT = "blur-point";
+function blurPoint() {
+  return {
+    type: BLUR_POINT
+  };
+}
 const MOVE_ALL = "move-all";
 function moveAll(delta) {
   return {
@@ -30557,7 +30568,8 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
     color: color$1 = color.blue,
     dragging,
     focusBehavior,
-    cursor
+    cursor,
+    onClick = () => {}
   } = props;
 
   // WB Tooltip requires a color name for the background color.
@@ -30592,7 +30604,12 @@ const MovablePointView = /*#__PURE__*/forwardRef((props, hitboxRef) => {
       cursor
     },
     "data-testid": "movable-point",
-    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior)
+    tabIndex: disableKeyboardInteraction ? -1 : tabIndex(focusBehavior),
+    onFocus: () => {
+      return getOnFocusChangeCallback(focusBehavior)(true);
+    },
+    onBlur: () => getOnFocusChangeCallback(focusBehavior)(false),
+    onClick: onClick
   }, /*#__PURE__*/React.createElement("circle", {
     className: "movable-point-hitbox",
     r: hitboxSizePx / 2,
@@ -30640,6 +30657,12 @@ function tabIndex(config) {
   }
   return undefined;
 }
+function getOnFocusChangeCallback(config) {
+  if (config.type === "uncontrolled") {
+    return config.onFocusChange;
+  }
+  return () => {};
+}
 
 const MovableLine = props => {
   const {
@@ -31229,7 +31252,8 @@ const MovablePoint$1 = props => {
   const elementRef = useRef(null);
   const {
     point,
-    onMove,
+    onMove = () => {},
+    onFocusChange = () => {},
     cursor,
     color: color$1 = color.blue,
     constrain = p => snap(snapStep, p)
@@ -31249,7 +31273,12 @@ const MovablePoint$1 = props => {
     dragging: dragging,
     focusBehavior: {
       type: "uncontrolled",
-      tabIndex: 0
+      tabIndex: 0,
+      onFocusChange
+    },
+    onClick: () => {
+      var _elementRef$current;
+      return (_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.focus();
     },
     cursor: cursor
   });
@@ -31846,7 +31875,14 @@ function UnlimitedPointGraph(props) {
   }), props.graphState.coords.map((point, i) => /*#__PURE__*/React.createElement(MovablePoint$1, {
     key: i,
     point: point,
-    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination))
+    onMove: destination => dispatch(actions.pointGraph.movePoint(i, destination)),
+    onFocusChange: isFocused => {
+      if (isFocused) {
+        dispatch(actions.pointGraph.focusPoint(i));
+      } else {
+        dispatch(actions.pointGraph.blurPoint());
+      }
+    }
   })));
 }
 function PointGraph(props) {
@@ -32002,6 +32038,7 @@ const MafsGraph = props => {
   } = props;
   const [width, height] = props.box;
   const tickStep = props.step;
+  const graphRef = React.useRef(null);
   return /*#__PURE__*/React.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32019,16 +32056,25 @@ const MafsGraph = props => {
   }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
     className: "mafs-graph",
     style: {
-      height,
-      width: "intrinsic",
       position: "relative",
       padding: "25px 25px 0 0",
       boxSizing: "content-box",
       marginLeft: "20px",
       marginBottom: "20px",
       pointerEvents: props.static ? "none" : "auto",
-      userSelect: "none"
-    }
+      userSelect: "none",
+      width,
+      height
+    },
+    onKeyUp: event => {
+      if (event.key === "Backspace") {
+        var _graphRef$current;
+        dispatch(actions.global.deleteIntent());
+        (_graphRef$current = graphRef.current) == null || _graphRef$current.focus();
+      }
+    },
+    ref: graphRef,
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement(LegacyGrid, {
     box: props.box,
     backgroundImage: props.backgroundImage
@@ -32209,7 +32255,8 @@ function initializeGraphState(params) {
       return _extends({}, shared, {
         type: graph.type,
         coords: getPointCoords(graph, range, step),
-        numPoints: graph.numPoints || 0
+        numPoints: graph.numPoints || 0,
+        focusedPointIndex: null
       });
     case "circle":
       return _extends({}, shared, {
@@ -32465,10 +32512,49 @@ function interactiveGraphReducer(state, action) {
       return doChangeRange(state, action);
     case ADD_POINT:
       return doAddPoint(state, action);
+    case REMOVE_POINT:
+      return doRemovePoint(state, action);
+    case FOCUS_POINT:
+      return doFocusPoint(state, action);
+    case BLUR_POINT:
+      return doBlurPoint(state);
+    case DELETE_INTENT:
+      return doDeleteIntent(state);
     default:
       throw new UnreachableCaseError(action);
   }
 }
+function doDeleteIntent(state, action) {
+  // For unlimited point graphs
+  if (state.type === "point" && state.numPoints === "unlimited") {
+    // if there's a focused point
+    if (state.focusedPointIndex !== null) {
+      // Remove the focused focus
+      return doRemovePoint(state, actions.pointGraph.removePoint(state.focusedPointIndex));
+    }
+  }
+  return state;
+}
+function doFocusPoint(state, action) {
+  switch (state.type) {
+    case "point":
+      return _extends({}, state, {
+        focusedPointIndex: action.index
+      });
+    default:
+      return state;
+  }
+}
+function doBlurPoint(state, action) {
+  switch (state.type) {
+    case "point":
+      return _extends({}, state, {
+        focusedPointIndex: null
+      });
+    default:
+      return state;
+  }
+}
 function doMovePointInFigure(state, action) {
   switch (state.type) {
     case "segment":
@@ -32812,6 +32898,15 @@ function doAddPoint(state, action) {
     coords: [...state.coords, snappedPoint]
   });
 }
+function doRemovePoint(state, action) {
+  if (state.type !== "point") {
+    return state;
+  }
+  return _extends({}, state, {
+    coords: state.coords.filter((_, i) => i !== action.index),
+    focusedPointIndex: null
+  });
+}
 const getDeltaVertex = (maxMoves, minMoves, delta) => {
   const [deltaX, deltaY] = delta;
   const maxXMove = Math.min(...maxMoves.map(move => move[X]));
@@ -37251,6 +37346,27 @@ class Draggable extends React.Component {
       passive: false
     } : false);
   }
+  componentDidUpdate(prevProps) {
+    if (this.props.state === prevProps.state) {
+      return;
+    }
+    if (this.props.state === ItemState.ANIMATING && this.props.endPosition) {
+      // Start animating
+      const current = this.getCurrentPosition();
+      const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
+
+      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
+      $(ReactDOM__default.findDOMNode(this)).animate(this.props.endPosition, {
+        duration: Math.max(duration, 1),
+        // Animating -> Static
+        complete: this.props.onAnimationEnd
+      });
+    } else if (this.props.state === ItemState.STATIC) {
+      // Ensure that any animations are done
+      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'finish' does not exist on type 'JQueryStatic'.
+      $(ReactDOM__default.findDOMNode(this)).finish();
+    }
+  }
   componentWillUnmount() {
     this._mounted = false;
     // Event handlers should be unbound before component unmounting, but
@@ -37312,27 +37428,6 @@ class Draggable extends React.Component {
       strings: this.context.strings
     }));
   }
-  componentDidUpdate(prevProps) {
-    if (this.props.state === prevProps.state) {
-      return;
-    }
-    if (this.props.state === ItemState.ANIMATING && this.props.endPosition) {
-      // Start animating
-      const current = this.getCurrentPosition();
-      const duration = 15 * Math.sqrt(Math.sqrt(Math.pow(this.props.endPosition.left - current.left, 2) + Math.pow(this.props.endPosition.top - current.top, 2)));
-
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this)).animate(this.props.endPosition, {
-        duration: Math.max(duration, 1),
-        // Animating -> Static
-        complete: this.props.onAnimationEnd
-      });
-    } else if (this.props.state === ItemState.STATIC) {
-      // Ensure that any animations are done
-      // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'finish' does not exist on type 'JQueryStatic'.
-      $(ReactDOM__default.findDOMNode(this)).finish();
-    }
-  }
 }
 Draggable.contextType = PerseusI18nContext;
 Draggable.defaultProps = {
@@ -37341,6 +37436,26 @@ Draggable.defaultProps = {
   linterContext: PerseusLinter.linterContextDefault
 };
 class Sortable extends React.Component {
+  static itemsFromProps(props) {
+    const state = props.disabled ? ItemState.DISABLED : ItemState.STATIC;
+    return props.options.map((option, i) => {
+      return {
+        option: option,
+        key: i,
+        state,
+        width: 0,
+        height: 0
+      };
+    });
+  }
+  static clearItemMeasurements(items) {
+    return items.map(item => {
+      return _extends({}, item, {
+        width: 0,
+        height: 0
+      });
+    });
+  }
   constructor(props) {
     super(props);
     // Don't call this.setState() here!
@@ -37380,26 +37495,6 @@ class Sortable extends React.Component {
       }, 0);
     }
   }
-  static itemsFromProps(props) {
-    const state = props.disabled ? ItemState.DISABLED : ItemState.STATIC;
-    return props.options.map((option, i) => {
-      return {
-        option: option,
-        key: i,
-        state,
-        width: 0,
-        height: 0
-      };
-    });
-  }
-  static clearItemMeasurements(items) {
-    return items.map(item => {
-      return _extends({}, item, {
-        width: 0,
-        height: 0
-      });
-    });
-  }
   measureItems() {
     // Measure all items and cache what their dimensions should be, taking
     // into account constraints and the current layout. This allows syncing
@@ -37451,124 +37546,6 @@ class Sortable extends React.Component {
       });
     });
   }
-  render() {
-    var _this$props$constrain, _this$props$constrain2;
-    // To minimize layout shift, we display a spinner until our math
-    // renderer is ready to render the math inside the sortable. To
-    // do this, we:
-    // - render a dummy TeX component to force the math renderer to load
-    // - display a spinner until the TeX component calls its onRender
-    //   callback, signifying that the math is rendered (from which we can
-    //   infer that the math renderer has loaded)
-    //
-    // If we didn't do this, the user might see a sortable with empty
-    // cells on first render, and then the math would pop in a few moments
-    // later once the rendering library loaded.
-    if (this.props.waitForTexRendererToLoad && !this.state.texRendererLoaded) {
-      const {
-        TeX
-      } = getDependencies();
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: "none"
-        }
-      }, /*#__PURE__*/React.createElement(TeX, {
-        onRender: () => this.setState({
-          texRendererLoaded: true
-        })
-      }, "1")));
-    }
-    const cards = [];
-    const {
-      layout
-    } = this.props;
-    // We need to keep backwards compatbility with rules specified directly
-    // in CSS. See sortable.less for details.
-    const className = css(styles$d.sortable) + " perseus-sortable";
-    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
-    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
-    _.each(this.state.items, function (item, i, items) {
-      const isLast = i === items.length - 1;
-      const isStatic = item.state === ItemState.STATIC || item.state === ItemState.DISABLED;
-      let margin;
-
-      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      if (this.props.layout === Layout.HORIZONTAL) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        margin = "0 " + this.props.margin + "px 0 0"; // right
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-      } else if (this.props.layout === Layout.VERTICAL) {
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        margin = "0 0 " + this.props.margin + "px 0"; // bottom
-      }
-
-      cards.push( /*#__PURE__*/React.createElement(Draggable, {
-        content: item.option,
-        key: item.key,
-        state: item.state
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        ,
-        ref: item.key,
-        width: syncWidth ? item.width : undefined,
-        height: syncHeight ? item.height : undefined,
-        layout: layout
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        includePadding: this.props.padding,
-        margin: isLast && isStatic ? 0 : margin,
-        endPosition: item.endPosition,
-        linterContext: PerseusLinter.pushContextStack(
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this.props.linterContext, "sortable")
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        ,
-        onRender: this.remeasureItems
-        // 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.
-        ,
-        onMouseDown: this.onMouseDown.bind(this, item.key)
-        // 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.
-        ,
-        onMouseMove: this.onMouseMove.bind(this, item.key)
-        // 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.
-        ,
-        onMouseUp: this.onMouseUp.bind(this, item.key)
-        // 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.
-        ,
-        onTouchMove: this.onMouseMove.bind(this, item.key)
-        // 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.
-        ,
-        onTouchEnd: this.onMouseUp.bind(this, item.key)
-        // 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.
-        ,
-        onTouchCancel: this.onMouseUp.bind(this, item.key)
-        // 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.
-        ,
-        onAnimationEnd: this.onAnimationEnd.bind(
-        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-        this, item.key)
-      }));
-      if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
-        cards.push( /*#__PURE__*/React.createElement(Placeholder, {
-          key: "placeholder_" + item.key,
-          ref: "placeholder_" + item.key,
-          width: item.width,
-          height: item.height,
-          layout: layout,
-          margin: isLast ? 0 : margin
-        }));
-      }
-    }, this);
-    return /*#__PURE__*/React.createElement("ul", {
-      className: className
-    }, cards);
-  }
   onMouseDown(key) {
     // Static -> Dragging
     const items = _.map(this.state.items, function (item) {
@@ -37714,6 +37691,124 @@ class Sortable extends React.Component {
   getOptions() {
     return _.pluck(this.state.items, "option");
   }
+  render() {
+    var _this$props$constrain, _this$props$constrain2;
+    // To minimize layout shift, we display a spinner until our math
+    // renderer is ready to render the math inside the sortable. To
+    // do this, we:
+    // - render a dummy TeX component to force the math renderer to load
+    // - display a spinner until the TeX component calls its onRender
+    //   callback, signifying that the math is rendered (from which we can
+    //   infer that the math renderer has loaded)
+    //
+    // If we didn't do this, the user might see a sortable with empty
+    // cells on first render, and then the math would pop in a few moments
+    // later once the rendering library loaded.
+    if (this.props.waitForTexRendererToLoad && !this.state.texRendererLoaded) {
+      const {
+        TeX
+      } = getDependencies();
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircularSpinner, null), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: "none"
+        }
+      }, /*#__PURE__*/React.createElement(TeX, {
+        onRender: () => this.setState({
+          texRendererLoaded: true
+        })
+      }, "1")));
+    }
+    const cards = [];
+    const {
+      layout
+    } = this.props;
+    // We need to keep backwards compatbility with rules specified directly
+    // in CSS. See sortable.less for details.
+    const className = css(styles$d.sortable) + " perseus-sortable";
+    const syncWidth = ((_this$props$constrain = this.props.constraints) == null ? void 0 : _this$props$constrain.width) || layout === Layout.VERTICAL;
+    const syncHeight = ((_this$props$constrain2 = this.props.constraints) == null ? void 0 : _this$props$constrain2.height) || layout === Layout.HORIZONTAL;
+    _.each(this.state.items, function (item, i, items) {
+      const isLast = i === items.length - 1;
+      const isStatic = item.state === ItemState.STATIC || item.state === ItemState.DISABLED;
+      let margin;
+
+      // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      if (this.props.layout === Layout.HORIZONTAL) {
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        margin = "0 " + this.props.margin + "px 0 0"; // right
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+      } else if (this.props.layout === Layout.VERTICAL) {
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        margin = "0 0 " + this.props.margin + "px 0"; // bottom
+      }
+
+      cards.push( /*#__PURE__*/React.createElement(Draggable, {
+        content: item.option,
+        key: item.key,
+        state: item.state
+        // @ts-expect-error - TS2769 - No overload matches this call.
+        ,
+        ref: item.key,
+        width: syncWidth ? item.width : undefined,
+        height: syncHeight ? item.height : undefined,
+        layout: layout
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        includePadding: this.props.padding,
+        margin: isLast && isStatic ? 0 : margin,
+        endPosition: item.endPosition,
+        linterContext: PerseusLinter.pushContextStack(
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this.props.linterContext, "sortable")
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        ,
+        onRender: this.remeasureItems
+        // 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.
+        ,
+        onMouseDown: this.onMouseDown.bind(this, item.key)
+        // 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.
+        ,
+        onMouseMove: this.onMouseMove.bind(this, item.key)
+        // 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.
+        ,
+        onMouseUp: this.onMouseUp.bind(this, item.key)
+        // 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.
+        ,
+        onTouchMove: this.onMouseMove.bind(this, item.key)
+        // 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.
+        ,
+        onTouchEnd: this.onMouseUp.bind(this, item.key)
+        // 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.
+        ,
+        onTouchCancel: this.onMouseUp.bind(this, item.key)
+        // 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.
+        ,
+        onAnimationEnd: this.onAnimationEnd.bind(
+        // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+        this, item.key)
+      }));
+      if (item.state === ItemState.DRAGGING || item.state === ItemState.ANIMATING) {
+        cards.push( /*#__PURE__*/React.createElement(Placeholder, {
+          key: "placeholder_" + item.key,
+          ref: "placeholder_" + item.key,
+          width: item.width,
+          height: item.height,
+          layout: layout,
+          margin: isLast ? 0 : margin
+        }));
+      }
+    }, this);
+    return /*#__PURE__*/React.createElement("ul", {
+      className: className
+    }, cards);
+  }
 }
 Sortable.defaultProps = {
   layout: Layout.HORIZONTAL,
@@ -38477,7 +38572,7 @@ var Matrix$1 = {
   isLintable: true
 };
 
-/* eslint-disable @babel/no-invalid-this, react/sort-comp */
+/* eslint-disable @babel/no-invalid-this */
 const defaultImage = {
   url: null,
   top: 0,
@@ -38519,30 +38614,6 @@ const Measurer = createReactClass({
   getInitialState: function () {
     return {};
   },
-  render: function () {
-    const image = _.extend({}, defaultImage, this.props.image);
-
-    // TODO(scottgrant): This isn't a11y-friendly! We should insist on
-    // finding some valid alt text when this widget is used.
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget perseus-widget-measurer " + "graphie-container above-scratchpad",
-      style: {
-        width: this.props.box[0],
-        height: this.props.box[1]
-      }
-    }, image.url && /*#__PURE__*/React.createElement("div", {
-      style: {
-        position: "relative",
-        top: image.top,
-        left: image.left
-      }
-    }, /*#__PURE__*/React.createElement(SvgImage, {
-      src: image.url
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "graphie",
-      ref: "graphieDiv"
-    }));
-  },
   componentDidMount: function () {
     this.setupGraphie();
   },
@@ -38600,7 +38671,31 @@ const Measurer = createReactClass({
     // TODO(joel) - I don't understand how this is useful!
     return Measurer.validate(this.getUserInput(), rubric);
   },
-  focus: $.noop
+  focus: $.noop,
+  render: function () {
+    const image = _.extend({}, defaultImage, this.props.image);
+
+    // TODO(scottgrant): This isn't a11y-friendly! We should insist on
+    // finding some valid alt text when this widget is used.
+    return /*#__PURE__*/React.createElement("div", {
+      className: "perseus-widget perseus-widget-measurer " + "graphie-container above-scratchpad",
+      style: {
+        width: this.props.box[0],
+        height: this.props.box[1]
+      }
+    }, image.url && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: "relative",
+        top: image.top,
+        left: image.left
+      }
+    }, /*#__PURE__*/React.createElement(SvgImage, {
+      src: image.url
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "graphie",
+      ref: "graphieDiv"
+    }));
+  }
 });
 _.extend(Measurer, {
   validate: function (state, rubric) {
@@ -40201,55 +40296,6 @@ class Card extends React.Component {
       }
     };
   }
-  render() {
-    let style = {};
-    if (this.props.floating) {
-      style = {
-        position: "absolute",
-        left: this.props.startOffset.left,
-        top: this.props.startOffset.top
-      };
-    }
-    if (this.props.width) {
-      style.width = this.props.width;
-    }
-    const className = ["card"];
-    if (this.props.stack) {
-      className.push("stack");
-    }
-    if (this.props.floating && !this.props.animating) {
-      className.push("dragging");
-      style.left += this.props.mouse.left - this.props.startMouse.left;
-      style.top += this.props.mouse.top - this.props.startMouse.top;
-    }
-
-    // Pull out the content to get rendered
-    const rendererProps = _.pick(this.props, "content");
-    const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "card-wrap " + ClassNames.INTERACTIVE,
-      style: style,
-      onMouseDown: onMouseDown,
-      onTouchStart: onMouseDown,
-      onTouchEnd: this.onMouseUp,
-      onTouchCancel: this.onMouseUp
-    }, /*#__PURE__*/React.createElement("div", {
-      className: className.join(" ")
-    }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
-      linterContext: this.props.linterContext,
-      strings: this.context.strings
-    }))));
-  }
-  shouldComponentUpdate(nextProps, nextState) {
-    // Cards in the bank or drag list don't usually change -- they only
-    // reorder themselves -- so we want to skip the update to things a
-    // little faster. We also need to re-render if the content changes,
-    // which happens only in the editor. (We do want to update the floating
-    // card on mouse move to update its position.)
-    return this.props.floating || nextProps.floating || this.props.content !== nextProps.content ||
-    // TODO(alpert): Remove ref here after fixing facebook/react#1392.
-    this.props.fakeRef !== nextProps.fakeRef;
-  }
   componentDidMount() {
     this.mouseMoveUpBound = false;
 
@@ -40268,6 +40314,16 @@ class Card extends React.Component {
       passive: false
     } : false);
   }
+  shouldComponentUpdate(nextProps, nextState) {
+    // Cards in the bank or drag list don't usually change -- they only
+    // reorder themselves -- so we want to skip the update to things a
+    // little faster. We also need to re-render if the content changes,
+    // which happens only in the editor. (We do want to update the floating
+    // card on mouse move to update its position.)
+    return this.props.floating || nextProps.floating || this.props.content !== nextProps.content ||
+    // TODO(alpert): Remove ref here after fixing facebook/react#1392.
+    this.props.fakeRef !== nextProps.fakeRef;
+  }
   componentDidUpdate(prevProps, prevState) {
     if (this.props.animating && !prevProps.animating) {
       // If we just were changed into animating, start the animation.
@@ -40289,6 +40345,45 @@ class Card extends React.Component {
     }
     document.removeEventListener("touchmove", this.onMouseMove);
   }
+  render() {
+    let style = {};
+    if (this.props.floating) {
+      style = {
+        position: "absolute",
+        left: this.props.startOffset.left,
+        top: this.props.startOffset.top
+      };
+    }
+    if (this.props.width) {
+      style.width = this.props.width;
+    }
+    const className = ["card"];
+    if (this.props.stack) {
+      className.push("stack");
+    }
+    if (this.props.floating && !this.props.animating) {
+      className.push("dragging");
+      style.left += this.props.mouse.left - this.props.startMouse.left;
+      style.top += this.props.mouse.top - this.props.startMouse.top;
+    }
+
+    // Pull out the content to get rendered
+    const rendererProps = _.pick(this.props, "content");
+    const onMouseDown = this.props.animating ? $.noop : this.onMouseDown;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "card-wrap " + ClassNames.INTERACTIVE,
+      style: style,
+      onMouseDown: onMouseDown,
+      onTouchStart: onMouseDown,
+      onTouchEnd: this.onMouseUp,
+      onTouchCancel: this.onMouseUp
+    }, /*#__PURE__*/React.createElement("div", {
+      className: className.join(" ")
+    }, /*#__PURE__*/React.createElement(Renderer, _extends({}, rendererProps, {
+      linterContext: this.props.linterContext,
+      strings: this.context.strings
+    }))));
+  }
 }
 Card.contextType = PerseusI18nContext;
 Card.propTypes = {
@@ -41495,7 +41590,6 @@ class HighlightSetRenderer extends React.PureComponent {
       hoveredHighlightKey: null,
       hoveringTooltipFor: null
     };
-    // eslint-disable-next-line react/sort-comp
     this._highlightRenderers = {};
     this._handleMouseMove = e => {
       const mouseClientPosition = {
@@ -41839,8 +41933,6 @@ class WordIndexer extends React.PureComponent {
     super(...args);
     this._container = void 0;
   }
-  /* eslint-enable react/sort-comp */
-
   componentDidMount() {
     this._sendWordsUpdate();
   }
@@ -42510,6 +42602,14 @@ class Passage extends React.Component {
       });
     };
   }
+  static validate(state, rubric) {
+    return {
+      type: "points",
+      earned: 0,
+      total: 0,
+      message: null
+    };
+  }
   componentDidMount() {
     this._updateState();
 
@@ -42727,17 +42827,6 @@ class Passage extends React.Component {
     return Passage.validate(this.getUserInput(), rubric);
   }
 
-  /* eslint-disable react/sort-comp */
-  static validate(state, rubric) {
-    return {
-      type: "points",
-      earned: 0,
-      total: 0,
-      message: null
-    };
-  }
-  /* eslint-enable react/sort-comp */
-
   /**
    * Rendering
    *
@@ -42950,7 +43039,10 @@ var PassageRefTarget$1 = {
   isLintable: true
 };
 
-/* eslint-disable react/forbid-prop-types, react/sort-comp */
+/**
+ * This is a PhET simulation widget. It is used for rendering simulations
+ * from https://phet.colorado.edu/.
+ */
 
 // For returning user input, but currently the PhET widget
 // does not support accessing user input
@@ -42964,14 +43056,6 @@ class PhetSimulation extends React.Component {
       url: null,
       banner: null
     };
-    this.change = (...args) => {
-      // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-      return change.apply(this, args);
-    };
-    this.simpleValidate = rubric => {
-      // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof PhetSimulation'.
-      return PhetSimulation.validate(this.getUserInput(), rubric);
-    };
     // kaLocales and PhET locales use different formats and abbreviations.
     // PhET accepts different formats, i.e. kaLocale's hyphens, but it does not accept
     // different abbreviations, so in points of divergence of abbreviations, we need to
@@ -43001,9 +43085,6 @@ class PhetSimulation extends React.Component {
     };
     this.locale = this.getPhetCompatibleLocale(getDependencies().kaLocale);
   }
-  getUserInput() {
-    return null;
-  }
   async componentDidMount() {
     await this.updateSimState(this.props.url);
   }
@@ -43013,53 +43094,8 @@ class PhetSimulation extends React.Component {
       await this.updateSimState(this.props.url);
     }
   }
-  render() {
-    var _this$state$url;
-    // We sandbox the iframe so that we allowlist only the functionality
-    // that we need. This makes it safer to present third-party content
-    // from the PhET website.
-    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-    const sandboxProperties = "allow-same-origin allow-scripts";
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles$6.container
-    }, this.state.banner !== null &&
-    /*#__PURE__*/
-    // TODO(anna): Make this banner focusable
-    React.createElement(View, {
-      style: {
-        marginBottom: phoneMargin
-      }
-    }, /*#__PURE__*/React.createElement(Banner, {
-      layout: "floating",
-      kind: this.state.banner.kind,
-      text: this.state.banner.message
-    })), /*#__PURE__*/React.createElement("iframe", {
-      ref: this.iframeRef,
-      title: this.props.description,
-      sandbox: sandboxProperties,
-      style: {
-        minWidth: 400,
-        height: 360,
-        width: "100%",
-        borderWidth: 0
-      },
-      src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
-      allow: "fullscreen"
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      icon: cornersOutIcon,
-      onClick: () => {
-        var _this$iframeRef$curre;
-        (_this$iframeRef$curre = this.iframeRef.current) == null || _this$iframeRef$curre.requestFullscreen();
-      },
-      kind: "secondary",
-      "aria-label": "Fullscreen",
-      style: {
-        marginTop: 5,
-        marginBottom: 5,
-        alignSelf: "flex-end"
-      },
-      disabled: this.state.url === null
-    }));
+  getUserInput() {
+    return null;
   }
   async updateSimState(urlString) {
     const url = makeSafeUrl(urlString, this.locale);
@@ -43117,6 +43153,53 @@ class PhetSimulation extends React.Component {
     }
     return true;
   }
+  render() {
+    var _this$state$url;
+    // We sandbox the iframe so that we allowlist only the functionality
+    // that we need. This makes it safer to present third-party content
+    // from the PhET website.
+    // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
+    const sandboxProperties = "allow-same-origin allow-scripts";
+    return /*#__PURE__*/React.createElement(View, {
+      style: styles$6.container
+    }, this.state.banner !== null &&
+    /*#__PURE__*/
+    // TODO(anna): Make this banner focusable
+    React.createElement(View, {
+      style: {
+        marginBottom: phoneMargin
+      }
+    }, /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      kind: this.state.banner.kind,
+      text: this.state.banner.message
+    })), /*#__PURE__*/React.createElement("iframe", {
+      ref: this.iframeRef,
+      title: this.props.description,
+      sandbox: sandboxProperties,
+      style: {
+        height: 225,
+        width: "100%",
+        borderWidth: 0
+      },
+      src: (_this$state$url = this.state.url) == null ? void 0 : _this$state$url.toString(),
+      allow: "fullscreen"
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      icon: cornersOutIcon,
+      onClick: () => {
+        var _this$iframeRef$curre;
+        (_this$iframeRef$curre = this.iframeRef.current) == null || _this$iframeRef$curre.requestFullscreen();
+      },
+      kind: "secondary",
+      "aria-label": "Fullscreen",
+      style: {
+        marginTop: 5,
+        marginBottom: 5,
+        alignSelf: "flex-end"
+      },
+      disabled: this.state.url === null
+    }));
+  }
 }
 
 // Setting URL to null will display an error message in the iframe
@@ -43132,24 +43215,23 @@ const makeSafeUrl = (urlString, locale) => {
   url.searchParams.set("locale", locale);
   return url;
 };
-var PhetSimulation$1 = {
-  name: "phet-simulation",
-  displayName: "PhET Simulation",
-  widget: PhetSimulation,
-  // Hides widget from content creators until full release
-  hidden: true,
-  isLintable: true
-};
 const styles$6 = StyleSheet.create({
   container: {
     borderRadius: borderRadiusLarge,
     borderWidth: 1,
     borderColor: basicBorderColor,
-    padding: phoneMargin,
+    padding: spacing.medium_16,
     paddingBottom: 0,
-    width: 650
+    // Include space for medium_16 padding on each side
+    width: 400 + spacing.xLarge_32
   }
 });
+var PhetSimulation$1 = {
+  name: "phet-simulation",
+  displayName: "PhET Simulation",
+  widget: PhetSimulation,
+  isLintable: true
+};
 
 /* eslint-disable react/no-unsafe */
 const {
@@ -44655,7 +44737,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "31.0.1";
+const libVersion = "32.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -46468,8 +46550,6 @@ class MultiRenderer extends React.Component {
     // Keep state in sync with props.
     this.state = this._tryMakeRendererState(this.props);
   }
-  /* eslint-enable react/sort-comp */
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     // Keep state in sync with props.
     if (nextProps.item !== this.props.item) {
@@ -48242,5 +48322,5 @@ const EditorJsonify = {
   }
 };
 
-export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
+export { ApiOptions, ArrowPicker, ArticleRenderer, BaseRadio, Categorizer$1 as Categorizer, changeable as Changeable, ClassNames, ColorPicker, DashPicker, dependencies as Dependencies, EditorJsonify, ElementContainer, Expression, util as GrapherUtil, Grapher$1 as GrapherWidget, HintRenderer, HintsRenderer, InputNumber$1 as InputNumber, InteractiveGraph$1 as InteractiveGraphWidget, ItemExtras, JiptParagraphs, KhanColors, KhanMath, context as LoadingContext, Log, Matrix$1 as MatrixWidget, MultiItems, NumericInput$1 as NumericInput, PerseusExpressionAnswerFormConsidered, PerseusI18nContext, PerseusI18nContextProvider, PerseusMarkdown, Plotter$1 as PlotterWidget, QUESTION_WIDGETS, Radio, Renderer, ref as ServerItemRenderer, sizingUtils as SizingUtils, Table$1 as TableWidget, Util, denylist as WIDGET_PROP_DENYLIST, WidgetJsonifyDeprecated, widgets$1 as Widgets, addWidget, apiVersion, buildEmptyItemTreeForShape, buildMapper, components, constants, contentHasWidgetType, convertWidgetNameToEnum, displaySigFigs, generateTestCategorizerWidget, generateTestExpressionWidget, generateTestInteractiveGraphWidget, generateTestNumericInputWidget, generateTestPerseusItem, generateTestRadioWidget, genericPerseusItemData, getAngleCoords, getAnswerFromUserInput, getAnswersFromWidgets, getCircleCoords, getCorrectAnswerForWidgetId, getLineCoords, getLinearSystemCoords, getPointCoords, getPolygonCoords, getQuadraticCoords, getSegmentCoords, getSinusoidCoords, getValidWidgetIds, getWidgetFromWidgetMap, getWidgetIdsFromContent, getWidgetIdsFromContentByType, getWidgetTypeByWidgetId, getWidgetsFromWidgetMap, getWidgetsMapFromItemData, globalConstants, globalStyles, iconPaths as icons, init, injectWidgets, interactiveSizes$1 as interactiveSizes, isItemRenderableByVersion, isWidgetIdInContent, isWrongAnswerSupported, itemDataVersion, itemToTree, ItemVersion as itemVersion, libVersion, lockedFigureColors, lockedFigureFillStyles, makeSafeUrl, mediaQueries, parsePerseusItem, plotterPlotTypes, preprocessTex, registerAllWidgetsForTesting, shapes, shouldHaveIndividualAnswer, traverse, usePerseusI18n, violatingWidgets, allWidgets as widgets };
 //# sourceMappingURL=index.js.map