@khanacademy/perseus 34.1.0 → 35.0.0

package/dist/index.js

@@ -366,7 +366,10 @@ const mockStrings = {
   cos: "cos",
   tan: "tan",
   simulationLoadFail: "Sorry, this simulation cannot load.",
-  simulationLocaleWarning: "Sorry, this simulation isn't available in your language."
+  simulationLocaleWarning: "Sorry, this simulation isn't available in your language.",
+  addPoint: "Add Point",
+  removePoint: "Remove Point",
+  graphKeyboardPrompt: "Press Shift + Enter to interact with the graph"
 };
 
 /**
@@ -862,7 +865,7 @@ const denylist = [
 // (technically the renderer still adds them)
 "key", "ref",
 // added by src/renderer.jsx
-"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "questionCompleted", "findWidgets",
+"containerSizeClass", "widgetId", "onChange", "problemNum", "apiOptions", "widgetIsOpen", "questionCompleted", "findWidgets",
 // added by src/editor.jsx, for widgets removing themselves
 // this is soooo not the right place for this, but alas.
 "onRemove",
@@ -870,17 +873,6 @@ const denylist = [
 "id",
 // Callbacks and items for interaction handling
 "onBlur", "onFocus", "trackInteraction", "keypadElement"];
-const removeDenylistProps = props => {
-  const newProps = {
-    ...props
-  };
-  for (const prop of denylist) {
-    if (prop in newProps) {
-      delete newProps[prop];
-    }
-  }
-  return newProps;
-};
 
 /* eslint-disable @babel/no-invalid-this */
 const USAGE = "Usage:\n" + "  this.change({propName: 5}, callback);\n" + '  this.change("propName", 5, callback);\n' + '  this.change("propName")';
@@ -1142,8 +1134,6 @@ class StubTagEditor extends React__namespace.Component {
  *  * nothing if it is purely a bug fix.
  *
  * Callbacks passed to Renderer/ItemRenderer:
- *  * onInputError:
- *    Called when there is an error grading a widget
  *  * onFocusChange: (newFocusPath, oldFocusPath, keypadDOMNode)
  *    Called when the user focus changes. The first two parameters are `path`
  *    arrays uniquely identifying the respect inputs. The third parameter,
@@ -1166,7 +1156,6 @@ class StubTagEditor extends React__namespace.Component {
 const ApiOptions = {
   propTypes: PropTypes__default["default"].shape({
     isArticle: PropTypes__default["default"].bool.isRequired,
-    onInputError: PropTypes__default["default"].func.isRequired,
     onFocusChange: PropTypes__default["default"].func.isRequired,
     GroupMetadataEditor: PropTypes__default["default"].func.isRequired,
     showAlignmentOptions: PropTypes__default["default"].bool.isRequired,
@@ -1250,7 +1239,6 @@ const ApiOptions = {
   defaults: {
     isArticle: false,
     isMobile: false,
-    onInputError: function () {},
     onFocusChange: function () {},
     GroupMetadataEditor: StubTagEditor,
     showAlignmentOptions: false,
@@ -2262,10 +2250,7 @@ const getDecimalSeparator = locale => {
  *   show the user an error. TODO(joel) - what error?
  * - Otherwise, pass through the resulting points and message.
  */
-function expressionValidator(userInput, rubric) {
-  let onInputError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
-  let strings = arguments.length > 3 ? arguments[3] : undefined;
-  let locale = arguments.length > 4 ? arguments[4] : undefined;
+function expressionValidator(userInput, rubric, strings, locale) {
   const options = ___default["default"].clone(rubric);
   ___default["default"].extend(options, {
     decimal_separator: getDecimalSeparator(locale)
@@ -2365,14 +2350,9 @@ function expressionValidator(userInput, rubric) {
     };
   }
   if (matchingAnswerForm.considered === "ungraded") {
-    // We matched an ungraded answer form - return "invalid", which
-    // will let the user try again with no penalty
-    const apiResult = onInputError(null,
-    // Reserved for some widget identifier
-    userInput, matchMessage);
     return {
       type: "invalid",
-      message: apiResult === false ? null : matchMessage
+      message: matchMessage
     };
   }
   // We matched a graded answer form, so we can now tell the user
@@ -2422,11 +2402,8 @@ class Expression extends React__namespace.Component {
   _isMounted = false;
 
   // TODO remove this in favor of just using expressionValidator
-  static validate(userInput, rubric) {
-    let onInputError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
-    let strings = arguments.length > 3 ? arguments[3] : undefined;
-    let locale = arguments.length > 4 ? arguments[4] : undefined;
-    return expressionValidator(userInput, rubric, onInputError, strings, locale);
+  static validate(userInput, rubric, strings, locale) {
+    return expressionValidator(userInput, rubric, strings, locale);
   }
   static getUserInputFromProps(props) {
     return normalizeTex(props.value);
@@ -2487,14 +2464,9 @@ class Expression extends React__namespace.Component {
         showErrorStyle: false
       });
       if (!this.parse(this.props.value, this.props).parsed) {
-        const apiResult = this.props.apiOptions.onInputError(null,
-        // reserved for some widget identifier
-        this.props.value, this.context.strings.ERROR_TITLE);
-        if (apiResult !== false) {
-          this.setState({
-            invalid: true
-          });
-        }
+        this.setState({
+          invalid: true
+        });
       }
     }
   };
@@ -2508,12 +2480,12 @@ class Expression extends React__namespace.Component {
       });
     }
   };
-  simpleValidate = (_ref, onInputError) => {
+  simpleValidate = _ref => {
     let {
       scoring,
       ...rubric
     } = _ref;
-    const score = expressionValidator(this.getUserInput(), rubric, onInputError || function () {}, this.context.strings, this.context.locale);
+    const score = expressionValidator(this.getUserInput(), rubric, this.context.strings, this.context.locale);
 
     // "scoring" is a flag that indicates when we are checking answers.
     // otherwise, we may just be checking validity after changes.
@@ -2528,9 +2500,9 @@ class Expression extends React__namespace.Component {
     }
     return score;
   };
-  getUserInput = () => {
+  getUserInput() {
     return Expression.getUserInputFromProps(this.props);
-  };
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -14815,7 +14787,7 @@ const pluck = function (table, subKey) {
  *   });
  * {a: 2, b: 3}
  */
-const mapObject$2 = function (obj, lambda) {
+const mapObject$1 = function (obj, lambda) {
   const result = {};
   ___default["default"].each(___default["default"].keys(obj), function (key) {
     // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'K'.
@@ -14841,7 +14813,7 @@ const mapObjectFromArray$1 = function (arr, lambda) {
 };
 var objective_ = {
   pluck: pluck,
-  mapObject: mapObject$2,
+  mapObject: mapObject$1,
   mapObjectFromArray: mapObjectFromArray$1
 };
 
@@ -19789,7 +19761,7 @@ class WidgetContainer extends React__namespace.Component {
 }
 
 const {
-  mapObject: mapObject$1,
+  mapObject,
   mapObjectFromArray
 } = objective_;
 const rContainsNonWhitespace = /\S/;
@@ -19817,9 +19789,6 @@ const isIdPathPrefix = function (prefixArray, wholeArray) {
   });
 };
 
-// The return type for getUserInput. Widgets have full control of what is
-// returned so it's not easily typed (some widgets return a scalar (string),
-// some return a custom-built object
 /**
  * The Widget type represents the common API that the Renderer uses to interact
  * with all widgets. All widgets must implement the methods in this API, unless
@@ -19829,6 +19798,7 @@ const isIdPathPrefix = function (prefixArray, wholeArray) {
  * communicate with the individual widgets to coordinate actions such as
  * scoring, state serialization/deserialization, and focus management.
  */
+
 class Renderer extends React__namespace.Component {
   _currentFocus;
   // @ts-expect-error - TS2564 - Property '_foundTextNodes' has no initializer and is not definitely assigned in the constructor.
@@ -20025,7 +19995,7 @@ class Renderer extends React__namespace.Component {
 
   // @ts-expect-error - TS2322 - Type '(props: Props) => Partial<Record<string, CategorizerWidget | CSProgramWidget | DefinitionWidget | DropdownWidget | ... 35 more ... | VideoWidget>>' is not assignable to type '(props: Props) => { [key: string]: PerseusWidget; }'.
   _getAllWidgetsInfo = props => {
-    return mapObject$1(props.widgets, (widgetInfo, widgetId) => {
+    return mapObject(props.widgets, (widgetInfo, widgetId) => {
       if (!widgetInfo.type || !widgetInfo.alignment) {
         const newValues = {};
         if (!widgetInfo.type) {
@@ -20172,7 +20142,7 @@ class Renderer extends React__namespace.Component {
    * state from that instead of the current widget props.
    */
   getSerializedState = widgetProps => {
-    return mapObject$1(widgetProps || this.state.widgetProps, (props, widgetId) => {
+    return mapObject(widgetProps || this.state.widgetProps, (props, widgetId) => {
       const widget = this.getWidgetInstance(widgetId);
       if (widget && widget.getSerializedState) {
         return widget.getSerializedState();
@@ -20208,7 +20178,7 @@ class Renderer extends React__namespace.Component {
       }
     };
     this.setState({
-      widgetProps: mapObject$1(serializedState, (props, widgetId) => {
+      widgetProps: mapObject(serializedState, (props, widgetId) => {
         const widget = this.getWidgetInstance(widgetId);
         if (widget && widget.restoreSerializedState) {
           // Note that we probably can't call
@@ -21083,7 +21053,6 @@ class Renderer extends React__namespace.Component {
    */
   scoreWidgets = () => {
     const widgetProps = this.state.widgetInfo;
-    const onInputError = this.getApiOptions().onInputError;
     const gradedWidgetIds = ___default["default"].filter(this.widgetIds, id => {
       const props = widgetProps[id];
       const widgetIsGraded = props?.graded == null || props.graded;
@@ -21100,7 +21069,7 @@ class Renderer extends React__namespace.Component {
         widgetScores[id] = widget.simpleValidate({
           ...props?.options,
           scoring: true
-        }, onInputError);
+        });
       }
     });
     return widgetScores;
@@ -21973,7 +21942,6 @@ const answerTypes = {
   }
 };
 function inputNumberValidator(state, rubric, strings) {
-  let onInputError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
   if (rubric.answerType == null) {
     rubric.answerType = "number";
   }
@@ -21997,13 +21965,9 @@ function inputNumberValidator(state, rubric, strings) {
   // TODO(eater): Seems silly to translate result to this invalid/points
   // thing and immediately translate it back in ItemRenderer.scoreInput()
   if (result.empty) {
-    // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
-    const apiResult = onInputError?.(null,
-    // reserved for some widget identifier
-    state.currentValue, result.message);
     return {
       type: "invalid",
-      message: apiResult === false ? null : result.message
+      message: result.message
     };
   }
   return {
@@ -22056,8 +22020,7 @@ class InputNumber extends React__namespace.Component {
     linterContext: PerseusLinter.linterContextDefault
   };
   static validate(state, rubric, strings) {
-    let onInputError = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => {};
-    return inputNumberValidator(state, rubric, strings, onInputError);
+    return inputNumberValidator(state, rubric, strings);
   }
   static getUserInputFromProps(props) {
     return {
@@ -22126,13 +22089,12 @@ class InputNumber extends React__namespace.Component {
       currentValue: newValue
     }, cb);
   };
-  getUserInput = () => {
+  getUserInput() {
     return InputNumber.getUserInputFromProps(this.props);
-  };
-  simpleValidate = (rubric, onInputError) => {
-    onInputError = onInputError || function () {};
-    return inputNumberValidator(this.getUserInput(), rubric, this.context.strings, onInputError);
-  };
+  }
+  simpleValidate(rubric) {
+    return inputNumberValidator(this.getUserInput(), rubric, this.context.strings);
+  }
   examples = () => {
     const {
       strings
@@ -22477,9 +22439,9 @@ class NumericInput extends React__namespace.Component {
     const allFormsAccepted = answerFormNames.length >= Object.keys(formExamples).length;
     return !noFormsAccepted && !allFormsAccepted;
   };
-  simpleValidate = rubric => {
+  simpleValidate(rubric) {
     return numericInputValidator(this.getUserInput(), rubric, this.context.strings);
-  };
+  }
   focus = () => {
     this.inputRef?.focus();
     return true;
@@ -22506,9 +22468,9 @@ class NumericInput extends React__namespace.Component {
       currentValue: newValue
     }, cb);
   };
-  getUserInput = () => {
+  getUserInput() {
     return NumericInput.getUserInputFromProps(this.props);
-  };
+  }
   handleChange = (newValue, cb) => {
     this.props.onChange({
       currentValue: newValue
@@ -22695,11 +22657,10 @@ class PassageRef extends React__namespace.Component {
     this._isMounted = false;
   }
 
-  // TODO(tamarab): getUserInput needs to be updated to only return
-  // props input by the user. Currently returns all the widget's props.
-  getUserInput = () => {
-    return removeDenylistProps(this.props);
-  };
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
+  getUserInput() {
+    return null;
+  }
   change = (() => {
     var _this = this;
     return function () {
@@ -24143,6 +24104,56 @@ const styles$t = aphrodite.StyleSheet.create({
   }
 });
 
+function radioValidator(userInput, rubric, strings) {
+  const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
+    return sum + (selected ? 1 : 0);
+  }, 0);
+  if (numSelected === 0) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+
+  // TODO: should numCorrect actually be on the rubric
+  // instead of the userInput?
+  if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
+    return {
+      type: "invalid",
+      message: strings.chooseCorrectNum
+    };
+    // If NOTA and some other answer are checked, ...
+  }
+
+  // TODO: should noneOfTheAboveSelected be replaced with a
+  // combination of choicesSelected and noneOfTheAboveIndex?
+  if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+    return {
+      type: "invalid",
+      message: strings.notNoneOfTheAbove
+    };
+  }
+  const correct = userInput.choicesSelected.every((selected, i) => {
+    let isCorrect;
+    // TODO: should noneOfTheAboveIndex actually be on the rubric
+    // instead of the userInput?
+    if (userInput.noneOfTheAboveIndex === i) {
+      isCorrect = rubric.choices.every((choice, j) => {
+        return i === j || !choice.correct;
+      });
+    } else {
+      isCorrect = !!rubric.choices[i].correct;
+    }
+    return isCorrect === selected;
+  });
+  return {
+    type: "points",
+    earned: correct ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 // RenderProps is the return type for radio.jsx#transform
 
 class Radio$1 extends React__namespace.Component {
@@ -24158,46 +24169,7 @@ class Radio$1 extends React__namespace.Component {
     showSolutions: "none"
   };
   static validate(userInput, rubric, strings) {
-    const numSelected = userInput.choicesSelected.reduce((sum, selected) => {
-      return sum + (selected ? 1 : 0);
-    }, 0);
-    if (numSelected === 0) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    if (userInput.numCorrect && userInput.numCorrect > 1 && numSelected !== userInput.numCorrect) {
-      return {
-        type: "invalid",
-        message: strings.chooseCorrectNum
-      };
-      // If NOTA and some other answer are checked, ...
-    }
-
-    if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-      return {
-        type: "invalid",
-        message: strings.notNoneOfTheAbove
-      };
-    }
-    const correct = userInput.choicesSelected.every((selected, i) => {
-      let isCorrect;
-      if (userInput.noneOfTheAboveIndex === i) {
-        isCorrect = rubric.choices.every((choice, j) => {
-          return i === j || !choice.correct;
-        });
-      } else {
-        isCorrect = !!rubric.choices[i].correct;
-      }
-      return isCorrect === selected;
-    });
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
+    return radioValidator(userInput, rubric, strings);
   }
   static getUserInputFromProps(props) {
     // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
@@ -24382,12 +24354,12 @@ class Radio$1 extends React__namespace.Component {
     });
     this.props.trackInteraction();
   };
-  getUserInput = () => {
+  getUserInput() {
     return Radio$1.getUserInputFromProps(this.props);
-  };
-  simpleValidate = rubric => {
-    return Radio$1.validate(this.getUserInput(), rubric, this.context.strings);
-  };
+  }
+  simpleValidate(rubric) {
+    return radioValidator(this.getUserInput(), rubric, this.context.strings);
+  }
 
   /**
    * Turn on rationale display for the currently selected choices. Note that
@@ -24741,9 +24713,9 @@ class Categorizer extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput = () => {
+  getUserInput() {
     return Categorizer.getUserInputFromProps(this.props);
-  };
+  }
   onChange(itemNum, catNum) {
     const values = [...this.props.values];
     // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
@@ -24751,9 +24723,9 @@ class Categorizer extends React__namespace.Component {
     this.change("values", values);
     this.props.trackInteraction();
   }
-  simpleValidate = rubric => {
+  simpleValidate(rubric) {
     return categorizerValidator(this.getUserInput(), rubric, this.context.strings);
-  };
+  }
   render() {
     const self = this;
 
@@ -25127,9 +25099,9 @@ class Definition extends React__namespace.Component {
   static validate() {
     return noopValidator();
   }
-  getUserInput = () => {
+  getUserInput() {
     return {};
-  };
+  }
 
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   simpleValidate() {
@@ -25272,14 +25244,14 @@ class Dropdown extends React__namespace.Component {
       selected: selected
     });
   };
-  getUserInput = () => {
+  getUserInput() {
     return {
       value: this.props.selected
     };
-  };
-  simpleValidate = rubric => {
+  }
+  simpleValidate(rubric) {
     return dropdownValidator(this.getUserInput(), rubric);
-  };
+  }
   render() {
     const children = [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: "placeholder",
@@ -25370,9 +25342,9 @@ class Explanation extends React__namespace.Component {
     });
     this.props.trackInteraction();
   };
-  getUserInput = () => {
+  getUserInput() {
     return {};
-  };
+  }
 
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   simpleValidate() {
@@ -27008,9 +26980,6 @@ class FunctionGrapher extends React__namespace.Component {
     }), this.props.model && this.renderPlot(), this.props.model && this.renderAsymptote(), this.props.model && points)));
   }
 }
-
-// Really this is props.plot, I think
-
 /* Widget and editor. */
 class Grapher extends React__namespace.Component {
   horizHairline;
@@ -27245,9 +27214,9 @@ class Group extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput = () => {
+  getUserInput() {
     return this.rendererRef?.getUserInput();
-  };
+  }
   getSerializedState = () => {
     return this.rendererRef?.getSerializedState();
   };
@@ -27257,9 +27226,9 @@ class Group extends React__namespace.Component {
     // (all our changes were in state):
     return null;
   };
-  simpleValidate = rubric => {
+  simpleValidate() {
     return this.rendererRef?.score();
-  };
+  }
 
   // Mobile API:
   getInputPaths = () => {
@@ -27569,9 +27538,9 @@ class ImageWidget extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput = () => {
+  getUserInput() {
     return null;
-  };
+  }
 
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   simpleValidate() {
@@ -27914,13 +27883,13 @@ class Interaction extends React__namespace.Component {
       return change.apply(_this, args);
     };
   })();
-  getUserInput = () => {
+  getUserInput() {
     // TODO(eater): Perhaps we want to be able to record the state of the
     // user's interaction. Unfortunately sending all the props will
     // probably make the attempt payload too large. So for now, don't send
     // anything.
     return {};
-  };
+  }
 
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   simpleValidate() {
@@ -29992,14 +29961,20 @@ function GraphLockedLabelsLayer(props) {
     // Point flag + point type
     flags?.["mafs"]?.["locked-point-labels"] && figure.type === "point" ||
     // Line flag + line type
-    flags?.["mafs"]?.["locked-line-labels"] && figure.type === "line") {
+    flags?.["mafs"]?.["locked-line-labels"] && figure.type === "line" ||
+    // Vector flag + vector type
+    flags?.["mafs"]?.["locked-vector-labels"] && figure.type === "vector" ||
+    // Ellipse flag + ellipse type
+    flags?.["mafs"]?.["locked-ellipse-labels"] && figure.type === "ellipse" ||
+    // Function flag + function type
+    flags?.["mafs"]?.["locked-function-labels"] && figure.type === "function") {
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
         key: i
-      }, figure.labels.map((label, j) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+      }, figure.labels?.map((label, j) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
         key: `${i}-label-${j}`
-      }, label))), figure.type === "line" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, figure.points[0].labels.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+      }, label))), figure.type === "line" && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, figure.points[0].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
         key: `locked-figure-${i}-point-1-label-${k}`
-      }, label))), figure.points[1].labels.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
+      }, label))), figure.points[1].labels?.map((label, k) => /*#__PURE__*/React__namespace.createElement(LockedLabel, _extends({
         key: `locked-figure-${i}-point-2-label-${k}`
       }, label)))));
     }
@@ -32117,7 +32092,7 @@ function Protractor() {
   const [[xMin, xMax], [yMin, yMax]] = range;
   // Position the protractor in the center of the graph (horizontally), and
   // 95% of the way to the bottom of the graph (vertically).
-  const initialCenter = [lerp(xMin, xMax, 0.5), lerp(yMin, yMax, 0.05)];
+  const initialCenter = [lerp(xMin, xMax, 0.5), lerp(yMin, yMax, 0.25)];
   const [center, setCenter] = React.useState(initialCenter);
   const [rotationHandleOffset, setRotationHandleOffset] = React.useState(centerToRotationHandle);
   const draggableRef = React.useRef(null);
@@ -32278,6 +32253,9 @@ const MafsGraph = props => {
     x: viewboxX,
     y: viewboxY
   };
+  const {
+    strings
+  } = usePerseusI18n();
   return /*#__PURE__*/React__namespace.createElement(GraphConfigContext.Provider, {
     value: {
       range: state.range,
@@ -32392,10 +32370,11 @@ const MafsGraph = props => {
       top: "50%",
       transform: "translateY(-50%)"
     }
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, "Press ", /*#__PURE__*/React__namespace.createElement("strong", null, "Shift + Enter"), " to interact with the graph"))), renderGraphControls({
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, strings.graphKeyboardPrompt))), renderGraphControls({
     state,
     dispatch,
-    width
+    width,
+    strings
   })));
 };
 const renderPointGraphControls = props => {
@@ -32404,6 +32383,10 @@ const renderPointGraphControls = props => {
     showRemovePointButton,
     focusedPointIndex
   } = props.state;
+  const {
+    strings
+  } = props;
+  const shouldShowRemoveButton = showRemovePointButton && focusedPointIndex !== null;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
       flexDirection: "row",
@@ -32419,7 +32402,7 @@ const renderPointGraphControls = props => {
     onClick: () => {
       props.dispatch(actions.pointGraph.addPoint([0, 0]));
     }
-  }, "Add Point"), interactionMode === "mouse" && showRemovePointButton && focusedPointIndex !== null && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  }, strings.addPoint), interactionMode === "mouse" && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     id: REMOVE_BUTTON_ID,
     kind: "secondary",
     color: "destructive"
@@ -32429,18 +32412,20 @@ const renderPointGraphControls = props => {
     tabIndex: -1,
     style: {
       width: "100%",
-      marginLeft: "20px"
+      marginLeft: "20px",
+      visibility: shouldShowRemoveButton ? "visible" : "hidden"
     },
     onClick: event => {
       props.dispatch(actions.pointGraph.removePoint(props.state.focusedPointIndex));
     }
-  }, "Remove Point"));
+  }, strings.removePoint));
 };
 const renderGraphControls = props => {
   const {
     state,
     dispatch,
-    width
+    width,
+    strings
   } = props;
   const {
     type
@@ -32451,7 +32436,8 @@ const renderGraphControls = props => {
         return renderPointGraphControls({
           state,
           dispatch,
-          width
+          width,
+          strings
         });
       }
       return null;
@@ -35069,17 +35055,17 @@ class InteractiveGraph extends React__namespace.Component {
       type: "linear"
     }
   };
-  getUserInput = () => {
-    if (this.mafsRef.current) {
-      return this.mafsRef.current.getUserInput?.();
+  getUserInput() {
+    if (this.mafsRef.current?.getUserInput) {
+      return this.mafsRef.current.getUserInput();
     }
-    if (this.legacyGraphRef.current) {
+    if (this.legacyGraphRef.current?.getUserInput) {
       return this.legacyGraphRef.current.getUserInput();
     }
     throw new perseusCore.PerseusError("Cannot getUserInput from a graph that has never rendered", perseusCore.Errors.NotAllowed);
-  };
+  }
   simpleValidate(rubric) {
-    return InteractiveGraph.validate(this.getUserInput?.(), rubric, this);
+    return InteractiveGraph.validate(this.getUserInput(), rubric, this);
   }
   render() {
     // Mafs shim
@@ -36746,6 +36732,57 @@ const styles$h = aphrodite.StyleSheet.create({
   }
 });
 
+// Question state for marker as result of user selected answers.
+
+function scoreMarker(marker) {
+  const score = {
+    hasAnswers: false,
+    isCorrect: false
+  };
+  if (marker.selected && marker.selected.length > 0) {
+    score.hasAnswers = true;
+  }
+  if (marker.answers.length > 0) {
+    if (marker.selected && marker.selected.length === marker.answers.length) {
+      // All correct answers are selected by the user.
+      score.isCorrect = marker.selected.every(choice => marker.answers.includes(choice));
+    }
+  } else if (!marker.selected || marker.selected.length === 0) {
+    // Correct as no answers should be selected by the user.
+    score.isCorrect = true;
+  }
+  return score;
+}
+function labelImageValidator(state, rubric) {
+  let numAnswered = 0;
+  let numCorrect = 0;
+  for (const marker of state.markers) {
+    const score = scoreMarker(marker);
+    if (score.hasAnswers) {
+      numAnswered++;
+    }
+    if (score.isCorrect) {
+      numCorrect++;
+    }
+  }
+
+  // We expect all question markers to be answered before grading.
+  if (numAnswered !== state.markers.length) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  return {
+    type: "points",
+    // Markers with no expected answers are graded as correct if user
+    // makes no answer selection.
+    earned: numCorrect === state.markers.length ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 const BringToFront = {
   boxShadow: `0 8px 8px ${wonderBlocksTokens.color.offBlack64}`,
   zIndex: 1000
@@ -37006,61 +37043,15 @@ const styles$f = aphrodite.StyleSheet.create({
  * No diagonals allowed.
  */
 
+// TODO: should this be using WidgetProps / PerseusLabelImageWidgetOptions?
+
 class LabelImage extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // The rendered markers on the question image for labeling.
   _markers;
   _mounted = false;
-  static gradeMarker(marker) {
-    const score = {
-      hasAnswers: false,
-      isCorrect: false
-    };
-    if (marker.selected && marker.selected.length > 0) {
-      // @ts-expect-error - TS2540 - Cannot assign to 'hasAnswers' because it is a read-only property.
-      score.hasAnswers = true;
-    }
-    if (marker.answers.length > 0) {
-      if (marker.selected && marker.selected.length === marker.answers.length) {
-        // All correct answers are selected by the user.
-        // @ts-expect-error - TS2540 - Cannot assign to 'isCorrect' because it is a read-only property.
-        score.isCorrect = marker.selected.every(choice => marker.answers.includes(choice));
-      }
-    } else if (!marker.selected || marker.selected.length === 0) {
-      // Correct as no answers should be selected by the user.
-      // @ts-expect-error - TS2540 - Cannot assign to 'isCorrect' because it is a read-only property.
-      score.isCorrect = true;
-    }
-    return score;
-  }
   static validate(state, rubric) {
-    let numAnswered = 0;
-    let numCorrect = 0;
-    for (const marker of state.markers) {
-      const score = LabelImage.gradeMarker(marker);
-      if (score.hasAnswers) {
-        numAnswered++;
-      }
-      if (score.isCorrect) {
-        numCorrect++;
-      }
-    }
-
-    // We expect all question markers to be answered before grading.
-    if (numAnswered !== state.markers.length) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    return {
-      type: "points",
-      // Markers with no expected answers are graded as correct if user
-      // makes no answer selection.
-      earned: numCorrect === state.markers.length ? 1 : 0,
-      total: 1,
-      message: null
-    };
+    return labelImageValidator(state);
   }
 
   /**
@@ -37255,7 +37246,7 @@ class LabelImage extends React__namespace.Component {
     this._mounted = false;
   }
   simpleValidate(rubric) {
-    return LabelImage.validate(this.getUserInput(), rubric);
+    return labelImageValidator(this.getUserInput());
   }
   getUserInput() {
     const {
@@ -37273,7 +37264,7 @@ class LabelImage extends React__namespace.Component {
       onChange
     } = this.props;
     const updatedMarkers = markers.map(marker => {
-      const score = LabelImage.gradeMarker(marker);
+      const score = scoreMarker(marker);
       return {
         ...marker,
         // Reveal correctness state for markers with answers.
@@ -37422,7 +37413,7 @@ class LabelImage extends React__namespace.Component {
           bottom: "top"
         }[markerPosition];
       }
-      const score = LabelImage.gradeMarker(marker);
+      const score = scoreMarker(marker);
       // Once the question is answered, show markers
       // with correct answers, otherwise passthrough
       // the correctness state.
@@ -37628,9 +37619,7 @@ const LabelImageWithDependencies = /*#__PURE__*/React__namespace.forwardRef((pro
 // methods and instead adjust Peresus to provide these facilities through
 // instance methods on our Renderers.
 // @ts-expect-error - TS2339 - Property 'validate' does not exist on type
-LabelImageWithDependencies.validate = LabelImage.validate;
-// @ts-expect-error - TS2339 - Property 'gradeMarker' does not exist on type
-LabelImageWithDependencies.gradeMarker = LabelImage.gradeMarker;
+LabelImageWithDependencies.validate = labelImageValidator;
 var LabelImage$1 = {
   name: "label-image",
   displayName: "Label Image",
@@ -38419,10 +38408,10 @@ class Matcher extends React__namespace.Component {
     // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
     this.refs.right.moveOptionToIndex(option, index);
   };
-  simpleValidate = rubric => {
+  simpleValidate(rubric) {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Matcher'.
     return Matcher.validate(this.getUserInput(), rubric);
-  };
+  }
   render() {
     // To minimize layout shift, we display a spinner until our math
     // renderer is ready to render the math inside the matcher. To
@@ -38665,7 +38654,9 @@ class Matrix extends React__namespace.Component {
           hasEmptyCell = true;
         }
         if (!incorrectSize) {
-          const validator = createValidator(solution[row][col], {
+          const validator = createValidator(
+          // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
+          solution[row][col], {
             simplify: true
           }, strings);
           const result = validator(supplied[row][col]);
@@ -38837,14 +38828,14 @@ class Matrix extends React__namespace.Component {
     }, cb);
     this.props.trackInteraction();
   };
-  getUserInput = () => {
+  getUserInput() {
     return {
       answers: this.props.answers
     };
-  };
-  simpleValidate = rubric => {
+  }
+  simpleValidate(rubric) {
     return Matrix.validate(this.getUserInput(), rubric, this.context.strings);
-  };
+  }
   render() {
     // Set the input sizes through JS so we can control the size of the
     // brackets. (If we set them in CSS we won't know values until the
@@ -40057,9 +40048,9 @@ class MoleculeWidget extends React__namespace.Component {
   simpleValidate() {
     return noopValidator();
   }
-  getUserInput = () => {
+  getUserInput() {
     return [];
-  };
+  }
 
   // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   validate() {
@@ -40205,6 +40196,9 @@ const TickMarks = Graphie.createSimpleClass((graphie, props) => {
   });
   return results;
 });
+
+// TODO: most widgets use some like Widget<Something, PerseusNumberLineWidgetOptions>
+// should this one?
 class NumberLine extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   static defaultProps = {
@@ -40506,18 +40500,18 @@ class NumberLine extends React__namespace.Component {
       arrows: "->"
     });
   };
-  getUserInput = () => {
+  getUserInput() {
     return {
       numLinePosition: this.props.numLinePosition,
       rel: this.props.isInequality ? this.props.rel : "eq",
       numDivisions: this.props.numDivisions,
       divisionRange: this.props.divisionRange
     };
-  };
-  simpleValidate = rubric => {
+  }
+  simpleValidate(rubric) {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof NumberLine'.
     return NumberLine.validate(this.getUserInput(), rubric);
-  };
+  }
   render() {
     const {
       strings
@@ -40577,6 +40571,8 @@ ___default["default"].extend(NumberLine, {
     const correctRel = rubric.correctRel || "eq";
     const correctPos = kmath.number.equal(state.numLinePosition, rubric.correctX || 0);
     const outsideAllowedRange = state.numDivisions > divisionRange[1] || state.numDivisions < divisionRange[0];
+
+    // TODO: I don't think isTickCrtl is a thing anymore
     if (state.isTickCrtl && outsideAllowedRange) {
       return {
         type: "invalid",
@@ -40829,8 +40825,8 @@ class Card extends React__namespace.Component {
     }))));
   }
 }
-const NORMAL = "normal",
-  HORIZONTAL = "horizontal";
+const NORMAL = "normal";
+const HORIZONTAL = "horizontal";
 class Orderer extends React__namespace.Component {
   static defaultProps = {
     current: [],
@@ -41085,17 +41081,17 @@ class Orderer extends React__namespace.Component {
       current: list
     });
   };
-  getUserInput = () => {
+  getUserInput() {
     return {
       current: ___default["default"].map(this.props.current, function (v) {
         return v.content;
       })
     };
-  };
-  simpleValidate = rubric => {
+  }
+  simpleValidate(rubric) {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Orderer'.
     return Orderer.validate(this.getUserInput(), rubric);
-  };
+  }
   render() {
     // This is the card we are currently dragging
     const dragging = this.state.dragging && /*#__PURE__*/React__namespace.createElement(Card
@@ -41201,14 +41197,14 @@ class Orderer extends React__namespace.Component {
   }
 }
 ___default["default"].extend(Orderer, {
-  validate: function (state, rubric) {
-    if (state.current.length === 0) {
+  validate: function (userInput, rubric) {
+    if (userInput.current.length === 0) {
       return {
         type: "invalid",
         message: null
       };
     }
-    const correct = ___default["default"].isEqual(state.current, ___default["default"].pluck(rubric.correctOptions, "content"));
+    const correct = ___default["default"].isEqual(userInput.current, ___default["default"].pluck(rubric.correctOptions, "content"));
     return {
       type: "points",
       earned: correct ? 1 : 0,
@@ -43418,9 +43414,9 @@ class PassageRefTarget extends React__namespace.Component {
   }
 
   // TODO passage-ref-target isn't interactive; remove
-  getUserInput = () => {
-    return;
-  };
+  getUserInput() {
+    return null;
+  }
 
   // TODO passage-ref-target isn't interactive; remove
   change = (() => {
@@ -43472,9 +43468,6 @@ var PassageRefTarget$1 = {
  * 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
 // This renders the PhET sim
 class PhetSimulation extends React__namespace.Component {
   static contextType = PerseusI18nContext;
@@ -43497,6 +43490,8 @@ class PhetSimulation extends React__namespace.Component {
       await this.updateSimState(this.props.url);
     }
   }
+
+  // TODO (LEMS-2396): remove validation logic from widgets that don't validate
   getUserInput() {
     return null;
   }
@@ -44446,13 +44441,13 @@ class Plotter extends React__namespace.Component {
       });
     });
   };
-  getUserInput = () => {
+  getUserInput() {
     return this.state.values;
-  };
-  simpleValidate = rubric => {
+  }
+  simpleValidate(rubric) {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Plotter'.
     return Plotter.validate(this.getUserInput(), rubric);
-  };
+  }
   render() {
     // TODO(kevinb) actually compute the size of the graphie correctly and
     // make it that size so we don't have to add extra padding.  The value
@@ -44471,8 +44466,8 @@ class Plotter extends React__namespace.Component {
   }
 }
 ___default["default"].extend(Plotter, {
-  validate: function (guess, rubric) {
-    if (deepEq(guess, rubric.starting)) {
+  validate: function (userInput, rubric) {
+    if (deepEq(userInput, rubric.starting)) {
       return {
         type: "invalid",
         message: null
@@ -44480,7 +44475,7 @@ ___default["default"].extend(Plotter, {
     }
     return {
       type: "points",
-      earned: deepEq(guess, rubric.correct) ? 1 : 0,
+      earned: deepEq(userInput, rubric.correct) ? 1 : 0,
       total: 1,
       message: null
     };
@@ -44543,6 +44538,28 @@ var PythonProgram$1 = {
   widget: PythonProgram
 };
 
+function sorterValidator(userInput, rubric) {
+  // If the sorter widget hasn't been changed yet, we treat it as "empty" which
+  // prevents the "Check" button from becoming active. We want the user
+  // to make a change before trying to move forward. This makes an
+  // assumption that the initial order isn't the correct order! However,
+  // this should be rare if it happens, and interacting with the list
+  // will enable the button, so they won't be locked out of progressing.
+  if (!userInput.changed) {
+    return {
+      type: "invalid",
+      message: null
+    };
+  }
+  const correct = Util.deepEq(userInput.options, rubric.correct);
+  return {
+    type: "points",
+    earned: correct ? 1 : 0,
+    total: 1,
+    message: null
+  };
+}
+
 const {
   shuffle
 } = Util;
@@ -44556,14 +44573,8 @@ class Sorter extends React__namespace.Component {
     onChange: function () {},
     linterContext: PerseusLinter.linterContextDefault
   };
-  static validate(state, rubric) {
-    const correct = ___default["default"].isEqual(state.options, rubric.correct);
-    return {
-      type: "points",
-      earned: correct ? 1 : 0,
-      total: 1,
-      message: null
-    };
+  static validate(userInput, rubric) {
+    return sorterValidator(userInput, rubric);
   }
   state = {
     changed: false
@@ -44593,33 +44604,23 @@ class Sorter extends React__namespace.Component {
       }, 0);
     });
   };
-  getUserInput = () => {
+  getUserInput() {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'getOptions' does not exist on type 'ReactInstance'.
+    const options = this.refs.sortable.getOptions();
     return {
-      options: this.refs.sortable.getOptions()
+      options,
+      changed: this.state.changed
     };
-  };
+  }
   moveOptionToIndex = (option, index) => {
     // eslint-disable-next-line react/no-string-refs
     // @ts-expect-error - TS2339 - Property 'moveOptionToIndex' does not exist on type 'ReactInstance'.
     this.refs.sortable.moveOptionToIndex(option, index);
   };
-  simpleValidate = rubric => {
-    // If this widget hasn't been changed yet, we treat it as "empty" which
-    // prevents the "Check" button from becoming active. We want the user
-    // to make a change before trying to move forward. This makes an
-    // assumption that the initial order isn't the correct order! However,
-    // this should be rare if it happens, and interacting with the list
-    // will enable the button, so they won't be locked out of progressing.
-    if (!this.state.changed) {
-      return {
-        type: "invalid",
-        message: null
-      };
-    }
-    return Sorter.validate(this.getUserInput(), rubric);
-  };
+  simpleValidate(rubric) {
+    return sorterValidator(this.getUserInput(), rubric);
+  }
   render() {
     const options = shuffle(this.props.correct, this.props.problemNum, /* ensurePermuted */true);
     const {
@@ -44699,9 +44700,9 @@ class Table extends React__namespace.Component {
   _getColumns = () => {
     return this.props.answers[0].length;
   };
-  getUserInput = () => {
+  getUserInput() {
     return ___default["default"].map(this.props.answers, ___default["default"].clone);
-  };
+  }
   onValueChange = (row, column, eventOrValue) => {
     const answers = ___default["default"].map(this.props.answers, ___default["default"].clone);
 
@@ -44721,10 +44722,10 @@ class Table extends React__namespace.Component {
       headers: headers
     });
   };
-  simpleValidate = rubric => {
+  simpleValidate(rubric) {
     // @ts-expect-error - TS2339 - Property 'validate' does not exist on type 'typeof Table'.
     return Table.validate(this.getUserInput(), rubric, this.context.strings);
-  };
+  }
   _handleFocus = inputPath => {
     this.props.onFocus(inputPath);
   };
@@ -45144,7 +45145,7 @@ const init = function (options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "34.1.0";
+const libVersion = "35.0.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {
@@ -45698,9 +45699,6 @@ const defaultContext = {
 };
 const context = /*#__PURE__*/React__namespace.createContext(defaultContext);
 
-const {
-  mapObject
-} = objective_;
 class ServerItemRenderer extends React__namespace.Component {
   static contextType = PerseusI18nContext;
   // @ts-expect-error - TS2564 - Property 'questionRenderer' has no initializer and is not definitely assigned in the constructor.
@@ -45916,20 +45914,6 @@ class ServerItemRenderer extends React__namespace.Component {
     return this.questionRenderer.getWidgetIds();
   }
 
-  /**
-   * Returns an object mapping from widget ID to KE-style score.
-   * The keys of this object are the values of the array returned
-   * from `getWidgetIds`.
-   */
-  scoreWidgets() {
-    const qScore = this.questionRenderer.scoreWidgets();
-    const qGuess = this.questionRenderer.getUserInputForWidgets();
-    const state = this.questionRenderer.getSerializedState();
-    return mapObject(qScore, (score, id) => {
-      return Util.keScoreFromPerseusScore(score, qGuess[id], state);
-    });
-  }
-
   /**
    * Get a representation of the current state of the item.
    */